/* Identify page-specific styling (hand-curated).
   Accidental drift from the canonical was resolved to core.css (main column width
   1100->1400, h3 weight, section margin, #back-to-top, .card/.callout base); only
   genuine page-specific components remain. Run build/extract_page_css.py for the
   full diff diagnostic vs core.css. */

/* Breadcrumb is now in the shared core (build/css/components.css). */

/* Sidebar brand as a link (shared; core.css lacks it). */
.sidebar-brand a {
  display: block; padding: 0; min-height: 0;
  border-left: none; white-space: normal; text-decoration: none;
}

/* Multi-paragraph callout spacing (identify's iron-stamp reference). */
.callout p { margin-bottom: 0.4em; }
.callout p:last-child { margin-bottom: 0; }

/* Three-colour feature-highlight system. */
.hi-key     { background: rgba(52,152,108,0.22); color: #72d4a0; border-radius: 2px; padding: 0 3px; }
.hi-combo   { background: rgba(200,146,42,0.22); color: #e8b84b; border-radius: 2px; padding: 0 3px; }
.hi-changed { background: rgba(155,160,180,0.15); color: #b8c2d4; border-radius: 2px; padding: 0 3px; }

/* Colour-key legend. */
.legend-box { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.2rem 1.5rem; margin-bottom: 2rem; }
.legend-box h3 { font-family: 'Courier New', monospace; font-size: var(--fs-2xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 0.9rem; font-weight: normal; }
.legend-items { display: flex; flex-direction: column; gap: 0.7rem; }
.legend-item { display: flex; align-items: baseline; gap: 0.75rem; font-size: var(--fs-dense); }
.legend-swatch { flex-shrink: 0; font-family: 'Courier New', monospace;
  font-size: var(--fs-sm); padding: 1px 8px; border-radius: 2px; white-space: nowrap; }
.legend-swatch.s-key    { background: rgba(52,152,108,0.22); color: #72d4a0; }
.legend-swatch.s-combo  { background: rgba(200,146,42,0.22);  color: #e8b84b; }
.legend-swatch.s-change { background: rgba(155,160,180,0.15); color: #b8c2d4; }
.legend-item span { color: var(--muted); }

/* Quick-ID cheat sheet. */
.cheat-sheet { background: rgba(200,146,42,0.07); border-left: 2px solid var(--accent);
  padding: 0.55rem 1rem; margin: 0 1.25rem 0.5rem; font-size: var(--fs-sm);
  color: var(--muted); line-height: 1.55; }
.cs-label { font-family: 'Courier New', monospace; font-size: var(--fs-3xs);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent);
  display: block; margin-bottom: 0.2rem; }

/* "What to examine" step cards. */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
.step-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem 1.35rem;
  display: flex; gap: 1rem; align-items: flex-start; }
.step-num { font-family: 'Courier New', monospace; font-size: var(--fs-numeral);
  color: var(--faint); line-height: 1; flex-shrink: 0; min-width: 2.2rem; }
.step-body h3 { color: var(--accent2); font-size: var(--fs-dense); margin-bottom: 0.3rem; }
.step-body p { color: var(--muted); font-size: var(--fs-dense); margin: 0; line-height: 1.6; }

/* Era dividers + per-era label colours. */
.era-divider { display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0 1.25rem; }
.era-divider-label { font-family: 'Courier New', monospace; font-size: var(--fs-2xs);
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.era-divider-line { flex: 1; height: 1px; background: var(--border); }
.era-boston  .era-divider-label { color: #c07040; }
.era-early   .era-divider-label { color: #b09040; }
.era-lateral .era-divider-label { color: #50a888; }
.era-sweet   .era-divider-label { color: #9880d0; }
.era-war     .era-divider-label { color: #d87868; }
.era-postwar .era-divider-label { color: #50a0c0; }
.era-modern  .era-divider-label { color: #8098e0; }

/* Type entries. */
.type-entry { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 0.85rem; overflow: hidden; }
.type-entry.era-boston  { border-top: 3px solid #9a5022; }
.type-entry.era-early   { border-top: 3px solid #7a5818; }
.type-entry.era-lateral { border-top: 3px solid #226050; }
.type-entry.era-sweet   { border-top: 3px solid #48387a; }
.type-entry.era-war     { border-top: 3px solid #7a2820; }
.type-entry.era-postwar { border-top: 3px solid #204858; }
.type-entry.era-modern  { border-top: 3px solid #283878; }
.te-hdr { display: flex; align-items: flex-start; gap: 1rem; padding: 0.95rem 1.25rem 0.7rem; }
.te-num { font-family: 'Courier New', monospace; font-size: var(--fs-numeral);
  font-weight: bold; line-height: 1; min-width: 2.5rem; flex-shrink: 0; }
.n-boston  { color: #c07040; }
.n-early   { color: #b09040; }
.n-lateral { color: #50a888; }
.n-sweet   { color: #9880d0; }
.n-war     { color: #d87868; }
.n-postwar { color: #50a0c0; }
.n-modern  { color: #8098e0; }
.te-meta { flex: 1; min-width: 0; }
.te-name { font-size: var(--fs-dense); color: var(--accent2); line-height: 1.3; margin-bottom: 0.1rem; }
.te-years { font-family: 'Courier New', monospace; font-size: var(--fs-xs); color: var(--muted); }
.te-link { font-family: 'Courier New', monospace; font-size: var(--fs-2xs);
  color: var(--faint); text-decoration: none; white-space: nowrap;
  padding: 0.2rem 0.5rem; border: 1px solid var(--border);
  border-radius: 4px; flex-shrink: 0; align-self: center; transition: all 0.15s; }
.te-link:hover { color: var(--accent2); border-color: var(--accent); }
.te-features { list-style: none; padding: 0.25rem 1.25rem 1rem 1.25rem; border-top: 1px solid var(--border); }
.te-features li { font-size: var(--fs-dense); color: var(--muted);
  padding: 0.26rem 0 0.26rem 1.1rem; position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.03); line-height: 1.55; }
.te-features li:last-child { border-bottom: none; }
.te-features li::before { content: '\203A'; position: absolute; left: 0; color: var(--faint); }
.te-origin-note { font-size: var(--fs-sm); color: var(--faint); font-style: italic;
  padding: 0.4rem 1.25rem 0.6rem; line-height: 1.5; }

/* FAQ accordion. */
.faq-list { display: flex; flex-direction: column; gap: 1rem; }
.faq-item { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; }
.faq-q { padding: 1rem 1.25rem; font-size: var(--fs-dense); color: var(--accent2);
  font-weight: bold; cursor: pointer; user-select: none;
  display: flex; justify-content: space-between; align-items: center; list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-toggle { font-size: var(--fs-h3); color: var(--faint); transition: transform 0.2s; flex-shrink: 0; }
details[open] .faq-toggle { transform: rotate(45deg); }
.faq-a { padding: 0 1.25rem 1rem; font-size: var(--fs-dense); color: var(--muted);
  border-top: 1px solid var(--border); line-height: 1.7; }
.faq-a p { margin-top: 0.7rem; margin-bottom: 0; }

/* Wizard CTA box. */
.cta-box { background: var(--surface2); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 1.5rem 2rem; text-align: center; }
.cta-box h3 { color: var(--accent2); font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.cta-box p { color: var(--muted); font-size: var(--fs-dense); margin-bottom: 1rem; }
.cta-btn { display: inline-block; background: var(--accent); color: #000;
  font-family: 'Courier New', monospace; font-size: var(--fs-sm);
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.65rem 1.5rem; border-radius: 4px;
  text-decoration: none; font-weight: bold; transition: background 0.15s; }
.cta-btn:hover { background: var(--accent2); }

/* In-content page footer (identify's cross-links). */
.page-footer { border-top: 1px solid var(--border); margin-top: 3rem;
  padding-top: 1.5rem; font-size: var(--fs-sm); color: var(--faint); font-family: 'Courier New', monospace; }
.page-footer a { color: var(--faint); display: inline-block; padding: 0.3rem 0.15rem; }
.page-footer a:hover { color: var(--accent2); }