/* =========================================================
   smartcarmanuals.com — light theme, navy chrome, blue accents
   ========================================================= */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Surfaces */
  --bg-base: #FFFFFF;
  --bg-surface-1: #F8FAFC;
  --bg-surface-2: #F1F5F9;
  --bg-surface-3: #E2E8F0;
  --border-subtle: #E2E8F0;
  --border-strong: #CBD5E1;

  /* Text */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;  /* a11y: was #94A3B8 (~2.7:1, fails AA) -> #64748B is ~4.8:1 on white */
  --text-inverted: #FFFFFF;

  /* Brand: navy + blue */
  --navy: #1E3A8A;
  --navy-deep: #172554;
  --navy-mid: #1E40AF;
  --blue: #2563EB;
  --blue-bright: #3B82F6;
  --blue-soft: rgba(37, 99, 235, 0.08);
  --blue-glow: rgba(37, 99, 235, 0.20);
  --blue-on-navy: #93C5FD;

  /* Heading / emphasis TEXT — split out from the chrome-background navy so dark
     mode (#649) can lighten headings for AA without touching navy backgrounds.
     Light values are the navy they replaced (zero light-mode change). */
  --text-heading: var(--navy);
  --text-heading-strong: var(--navy-deep);

  /* State */
  --lime: #16A34A;
  --lime-soft: rgba(22, 163, 74, 0.10);
  --lime-bg: #DCFCE7;
  --amber: #92600A;
  --amber-soft: rgba(217, 119, 6, 0.12);
  --coral: #DC2626;
  --coral-soft: rgba(220, 38, 38, 0.08);

  /* State text (on tint backgrounds) + callout surface — tokenized so dark
     mode (#649) can lighten them for AA on the dark tint. Light values are
     unchanged from the prior hardcoded colours. */
  --success-text: #166534;
  --warn-text: #92400E;
  --warn-text-strong: #7C2D12;
  --danger-text: #991B1B;
  --callout-bg: #FFFBEB;
  --callout-border: #FCE9B8;

  /* Fonts */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout */
  --max: 1200px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* Effects */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 1px var(--border-subtle);
  --shadow-card-hover: 0 8px 24px rgba(15, 23, 42, 0.10), 0 0 0 1px var(--blue);
  --shadow-glow: 0 0 0 4px var(--blue-glow);

  --transition: 150ms ease-out;
}

/* =========================================================
   Reset + base
   ========================================================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg-base); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
code, kbd, pre, samp { font-family: var(--font-mono); }
a { color: var(--blue); transition: color var(--transition); }
a:hover { color: var(--blue-bright); }
/* #650: underline inline links in running body prose so the link signal is not
   color-only (color-blind / deuteranopia / protanopia users). Scoped to <main>
   paragraphs; nav/footer (outside main) and button-style links keep their
   underline-free treatment. */
main p a:not(.btn):not(.card__cta):not(.parts-row__pill) { text-decoration: underline; }
::selection { background: var(--blue); color: var(--text-inverted); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

/* Visually hidden but available to screen readers and search bots. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-navigation link: off-screen until keyboard focus (WCAG 2.4.1). */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--navy);
  color: var(--text-inverted);
  border-radius: var(--r-md);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus { top: 8px; }

/* =========================================================
   Header (white chrome — navy logo shows as designed)
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-base);
  color: var(--text-heading-strong);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-header__brand {
  /* Native PNG mark on white chrome — navy car silhouette shows as
     designed without any color filter. */
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.site-header__logo { display: block; height: 36px; width: auto; }

.site-nav { margin-left: auto; }
/* Direct-children selector ONLY — without this, the rule cascades into
   .site-nav__dropdown <ul> (which is also inside .site-nav), giving it
   display:flex via specificity 0,1,1 and overriding the dropdown's own
   display:none rule. That was the actual root cause of the "library is
   persistent" bug across seven prior fix attempts. */
.site-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.site-nav a,
.site-nav__trigger {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 8px 14px;
  color: var(--text-heading-strong);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem; /* #647: was 0.92rem (14.72px) — match 16px body for readability */
  letter-spacing: 0.4px;
  border-radius: var(--r-sm);
  transition: color var(--transition), background-color var(--transition);
  /* button reset for .site-nav__trigger */
  background: transparent;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  line-height: inherit;
}
.site-nav a:hover,
.site-nav__trigger:hover {
  color: var(--text-heading-strong);
  background: rgba(23, 37, 84, 0.05);
}
.site-nav a[aria-current="page"],
.site-nav__trigger[aria-current="page"] {
  color: var(--text-heading-strong);
  background: rgba(23, 37, 84, 0.06);
  font-weight: 600;
}
.site-nav a[aria-current="page"]::after,
.site-nav__trigger[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -2px;
  height: 2px;
  background: var(--navy-deep);
  border-radius: 2px;
}

/* Dropdown nav items (e.g. Library) — mirrors globals.css on
   ai.smartcarmanuals.com. CLICK-ONLY: no :hover rules. The trigger is
   a <button class="site-nav__trigger"> and the panel only renders when
   the parent <li> has the .is-open class (toggled by base.njk inline
   JS). This intentionally avoids every hover-related edge case Mike
   hit on 2026-04-28: phantom hover zones, dropdowns that survived
   page navigation because the cursor happened to be over the trigger,
   and click-opened panels that wouldn't dismiss. Mobile: inline
   indented list inside the hamburger panel. */
.site-nav .has-dropdown { position: relative; }
.site-nav__trigger .caret {
  display: inline-block;
  margin-left: 4px;
  color: var(--text-heading-strong);
  transition: transform 180ms ease-out;
}
.site-nav .has-dropdown.is-open > .site-nav__trigger .caret {
  transform: rotate(180deg);
}
/* Pressed-state background while open — signals "click again to close." */
.site-nav .has-dropdown.is-open > .site-nav__trigger {
  background: rgba(23, 37, 84, 0.06);
}

.site-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
  list-style: none;
  flex-direction: column;
  gap: 0;
  z-index: 60;
  animation: dropdown-in 160ms ease-out;
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Tail pointing up at the parent label. Sits at the very top of the
   panel border, overlapping into the trigger so the panel reads as
   anchored to Library. */
.site-nav__dropdown::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 22px;
  width: 10px;
  height: 10px;
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
  transform: rotate(45deg);
}
.site-nav .has-dropdown.is-open > .site-nav__dropdown { display: flex; }

.site-nav__dropdown li { width: 100%; }
.site-nav__dropdown a {
  display: block;
  padding: 9px 12px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-primary);
  border-radius: 6px;
  letter-spacing: 0.2px;
}
.site-nav__dropdown a:hover {
  background: rgba(37, 99, 235, 0.08);
  color: var(--text-heading);
}
.site-nav__dropdown a[aria-current="page"] {
  background: rgba(23, 37, 84, 0.06);
  color: var(--text-heading-strong);
  font-weight: 600;
}
.site-nav__dropdown a[aria-current="page"]::after { display: none; }

/* Phase 7B D7 — global search form. The desktop nav already has a Search link,
   so the full search form stays tucked into the hamburger panel where it cannot
   collide with the long primary nav. */
.site-header__search {
  order: 1;
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0;
  flex-shrink: 1;
  min-width: 0;
}
.site-nav { order: 2; }
.scm-chip { order: 3; }
.site-header__search-input {
  width: 200px;
  min-width: 96px;
  max-width: 100%;
  padding: 7px 12px;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--text-heading-strong);
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.site-header__search-input::placeholder { color: #94a3b8; }
.site-header__search-input:focus {
  /* Glow ring is the visible focus indicator (replaces the default outline). */
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--shadow-glow);
}
.site-header__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  color: var(--text-inverted);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
.site-header__search-btn:hover { background: var(--navy-deep); border-color: var(--text-heading-strong); }
.site-header__search-btn svg { display: block; }

/* Wide screens: keep the primary nav on one row. Below this breakpoint the
   hamburger panel owns both navigation and the search form. */
@media (min-width: 1300px) {
  .site-nav { flex-shrink: 0; }
}

/* #652 — the toggle is a real <button> (was a CSS-only checkbox). Hidden on
   wide screens; JS toggles .is-expanded on .site-header__inner to reveal the
   nav + search panel below the breakpoint. ≥44px tap target (#651 util). */
.nav-toggle {
  display: none;
  margin: 0;
  padding: 6px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--text-heading-strong);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nav-toggle__icon { display: inline-flex; }
.nav-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
}
@media (max-width: 1299px) {
  .site-header__inner { gap: 12px; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .site-nav { display: none; width: 100%; margin-left: 0; margin-top: 8px; }
  .site-nav > ul { flex-direction: column; gap: 0; }
  .site-nav a {
    padding: 12px 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
  }
  .site-nav a[aria-current="page"]::after { display: none; }
  .site-header__inner.is-expanded .site-nav { display: block; }

  /* D7: the header search lives in the hamburger panel. The .is-expanded class
     on .site-header__inner reveals it; full width on its own row, input grows
     to fill. Hidden until the menu opens so it never crowds the top row. */
  .site-header__search { display: none; width: 100%; margin-top: 8px; }
  .site-header__search-input { flex: 1 1 auto; width: auto; }
  .site-header__inner.is-expanded .site-header__search { display: flex; }

  /* Mobile: dropdown still toggles via .is-open. Tap Library to expand
     children inline, tap again to collapse. Same JS as desktop, same
     class-based show/hide. The previous version forced display:flex
     on the panel so children were always visible — no way to close. */
  .site-nav__trigger {
    width: 100%;
    justify-content: space-between;
  }
  .site-nav__trigger .caret {
    /* keep caret visible on mobile so the expand affordance is obvious */
    margin-left: auto;
  }
  .site-nav__dropdown {
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    animation: none;
  }
  .site-nav__dropdown::before { display: none; }
  .site-nav__dropdown a {
    padding-left: 32px;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    font-size: 0.92rem;
    color: var(--text-secondary);
  }
}

/* =========================================================
   Layout & sections
   ========================================================= */
main { display: block; }
.section { padding: 56px 24px; }
.section--narrow .section__inner { max-width: 760px; }
.section__inner { max-width: var(--max); margin: 0 auto; }
.section--alt {
  background: var(--bg-base);
}
.section[id] { scroll-margin-top: 80px; }
.fault-code > .section:first-child { padding-bottom: 20px; }
.fault-code > .section:first-child + .section { padding-top: 28px; }

/* Headings */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.85rem; margin-top: 0; }
h3 { font-size: 1.2rem; font-family: var(--font-sans); font-weight: 700; letter-spacing: 0; color: var(--text-primary); }
h4 { font-size: 1.02rem; font-family: var(--font-sans); font-weight: 700; letter-spacing: 0; color: var(--text-primary); }
.section h1, .section > .section__inner > h2 { text-align: center; margin-bottom: 24px; }
.section__icon {
  display: block;
  margin: 0 auto 12px;
  max-width: 220px;
  width: 100%;
  height: auto;
}
@media (min-width: 860px) {
  .section__icon { max-width: 260px; }
}
.section-hero-art {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 260px;
  margin: 0.75rem auto 1rem;
}
.section-hero-art--manuals {
  max-height: 280px;
  margin: 1rem auto 1.5rem;
}
.lede {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0 auto 24px;
  text-align: center;
  line-height: 1.6;
}

/* =========================================================
   Cards (manuals grid)
   ========================================================= */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 16px;
}
.card {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  border-color: var(--blue);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
.card__title { margin: 0 0 8px; color: var(--text-heading); font-size: 1.08rem; font-weight: 700; font-family: var(--font-display); letter-spacing: -0.01em; }
.card__body { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; flex: 1; margin-bottom: 16px; }
.card__body em {
  color: var(--text-muted);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0;
}
.card__body p { margin: 0 0 4px; }
.card__body p strong { color: var(--text-primary); }
.card__cta {
  /* #651: inline-flex + min-height 44px so "Download PDF" et al meet the WCAG
     2.5.5 (AA) 44px tap-target minimum on mobile (was 39px). */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  background: var(--navy);
  color: var(--text-inverted);
  text-decoration: none;
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  align-self: flex-start;
  transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card__cta:hover {
  background: var(--navy-mid);
  color: var(--text-inverted);
  box-shadow: var(--shadow-glow);
}
.card__cta:active { transform: translateY(1px); }
.card__cta--stacked {
  /* #651: base .card__cta is now inline-flex (row) for tap-target centering;
     the stacked CTA must override to a column so its two lines still stack. */
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1.2;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.card__cta-main {
  display: block;
  font-size: 0.92em;
}
.card__cta-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.72em;
  opacity: 0.9;
}

/* Decorative art tucked into the bottom-right corner of a card.
   Used on the Cosmic Cabrios homepage tile — the body reserves
   right-side space so the description text doesn't run under the
   illustration. */
.card--has-art { position: relative; }
.card--has-art .card__body { padding-right: 130px; }
.card__art {
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 110px;
  height: auto;
  opacity: 0.92;
  pointer-events: none;
  /* PNG has a near-white background — multiply blends it into the
     tile so the line art floats without a visible rectangle. */
  mix-blend-mode: multiply;
}
@media (max-width: 480px) {
  .card--has-art .card__body { padding-right: 0; }
  .card__art { width: 80px; bottom: 14px; right: 14px; opacity: 0.65; }
}

/* =========================================================
   Additional Resources groups (homepage #additional-resources)
   ========================================================= */
.resource-group { margin-top: 36px; }
.resource-group:first-of-type { margin-top: 0; }
.resource-group__title {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-heading);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.resource-group .cards { margin-top: 0; }
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--blue-soft);
  color: var(--text-heading);
  margin-bottom: 14px;
  flex: 0 0 auto;
}
.card__icon svg { width: 22px; height: 22px; display: block; }
.card:hover .card__icon { background: var(--blue-glow); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  /* Canonical theme: white body, navy chrome, blue accents. The hero sits on
     pure white to match the SmartDiag sister site and let the navy logo
     read as the brand anchor without a competing tint. */
  background: var(--bg-base);
  color: var(--text-primary);
  padding: 72px 24px;
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}
.hero__inner { max-width: 760px; margin: 0 auto; }
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3rem);
  margin: 0 0 16px;
  color: var(--text-heading);
}
.hero-logo {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto 18px;
}
.hero p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin: 0 auto 24px;
  max-width: 580px;
}
.hero p a { color: var(--blue); }
.hero p a.btn,
.hero p a.btn:link,
.hero p a.btn:visited,
.hero p a.btn:hover { color: var(--text-inverted); }
/* REC-PP-21: hero CTA row — two quick-link buttons below the tagline. */
.hero__quick-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  /* #651: 44px min tap target (WCAG 2.5.5 AA). */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 22px;
  background: var(--navy);
  color: var(--text-inverted);
  text-decoration: none;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
  font-family: var(--font-sans);
  cursor: pointer;
}
.btn:hover {
  background: var(--navy-mid);
  color: var(--text-inverted);
  box-shadow: var(--shadow-glow);
}
.btn:active { transform: translateY(1px); }
/* Force white text on `<a class="btn">` regardless of context (e.g. inside .resources where `a` is blue). */
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active { color: var(--text-inverted); }
.btn--ghost {
  background: transparent;
  color: var(--text-heading);
  border-color: var(--text-heading);
}
.btn--ghost:hover {
  background: var(--blue-soft);
  color: var(--text-heading);
}
a.btn--ghost,
a.btn--ghost:link,
a.btn--ghost:visited,
a.btn--ghost:hover,
a.btn--ghost:active { color: var(--text-heading); }

/* =========================================================
   Suggest-a-mechanic form (mechanic-directory)
   ========================================================= */
.sm-disclosure {
  margin-top: 24px;
  text-align: center;
}
.sm-disclosure__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.sm-disclosure__summary::-webkit-details-marker { display: none; }
.sm-disclosure__summary::marker { content: ""; }
.sm-disclosure[open] > .sm-disclosure__summary {
  margin-bottom: 12px;
}
.sm-disclosure .sm-form {
  margin-top: 0;
  text-align: left;
}
.sm-form {
  margin-top: 24px;
  padding: 24px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sm-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  .sm-form__row { grid-template-columns: 1fr; }
  .sm-form { padding: 18px; }
}
.sm-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.92rem;
}
.sm-form__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.sm-form__label {
  font-weight: 600;
  color: var(--text-primary);
}
.sm-form__req { color: var(--coral); margin-left: 2px; }
.sm-form input[type="text"],
.sm-form input[type="tel"],
.sm-form input[type="url"],
.sm-form input[type="email"],
.sm-form select,
.sm-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-base);
  font: inherit;
  color: var(--text-primary);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.sm-form input:focus,
.sm-form select:focus,
.sm-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-glow);
}
/* Model picker: only reveal when 'Are you a Smart owner?' = Yes (CSS-only, no JS). */
.sm-form__model-field { display: none; }
.sm-form:has(input[name="smart-owner"][value="yes"]:checked) .sm-form__model-field {
  display: flex;
}
.sm-form textarea { resize: vertical; min-height: 96px; }
.sm-form__radios {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-top: 4px;
}
.sm-form__radios label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.sm-form__radios input[type="radio"] { accent-color: var(--blue); }
.sm-form__actions {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.sm-form__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================
   Embeds (iframes)
   ========================================================= */
.embed-host {
  width: 100%;
  border: 0;
  display: block;
  background: var(--bg-base);
  border-radius: var(--r-md);
}

/* Side-by-side embed pairs (mechanic-directory map grid) */
.embed-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 16px;
}
.embed-pair__cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.embed-pair__cell h2,
.embed-pair__cell h3 {
  text-align: left;
  margin: 0 0 10px;
  font-size: 1.25rem;
}
.embed-pair__cell p {
  margin: 0 0 12px;
}
.embed-pair__cell .embed-host {
  height: 58vh;
  min-height: 480px;
}
@media (min-width: 1024px) {
  .embed-pair {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* =========================================================
   Affiliate parts row (per-model search links on homepage)
   ========================================================= */
.parts-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.parts-row__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-right: 4px;
}
.parts-row__pill {
  display: inline-block;
  padding: 5px 12px;
  background: var(--bg-base);
  color: var(--text-heading);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.parts-row__pill:hover {
  background: var(--blue-soft);
  border-color: var(--blue);
  color: var(--text-heading);
}

/* =========================================================
   Series Key (model designations panel)
   ========================================================= */
.series-key {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 28px;
}
.series-key__title {
  text-align: center;
  margin: 0 0 18px;
  font-size: 1.4rem;
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: 700;
}
.series-key__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.series-key__item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 14px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-sm);
}
.series-key__code {
  font-family: var(--font-mono);
  color: var(--blue);
  font-weight: 700;
  font-size: 0.95rem;
}
.series-key__name {
  color: var(--text-primary);
  font-size: 0.92rem;
  flex: 1 1 auto;
  min-width: 0;
}
.series-key__years {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.series-key__suffix {
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.series-key__suffix strong {
  font-family: var(--font-mono);
  color: var(--blue);
  font-weight: 700;
}

/* =========================================================
   Generations board (whiteboard-style explainer)
   ========================================================= */
.gen-board__formula {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-secondary);
  margin: 0 0 28px;
  letter-spacing: 0.02em;
}
.gen-board__formula strong {
  color: var(--text-heading);
  font-weight: 700;
}
.gen-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
.gen-board__col-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 1rem; /* #646: was 0.78rem (12.48px) — restore heading hierarchy (>= body) */
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.gen-board__list,
.gen-board__bodies,
.gen-board__examples {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gen-board__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 0.95rem;
  border-bottom: 1px dashed var(--border-subtle);
}
.gen-board__list li:last-child { border-bottom: 0; }
.gen-board__year {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-size: 0.86rem;
  white-space: nowrap;
  flex: 0 0 auto;
}
.gen-board__arrow {
  color: var(--blue);
  font-weight: 700;
  font-family: var(--font-mono);
  flex: 0 0 auto;
  font-size: 1.05rem;
}
.gen-board__code {
  font-family: var(--font-mono);
  color: var(--blue);
  font-weight: 700;
  font-size: 1.05rem;
  flex: 0 0 auto;
  min-width: 38px;
}
.gen-board__note {
  color: var(--text-primary);
  font-size: 0.92rem;
  flex: 1 1 auto;
  min-width: 0;
}
.gen-board__bodies li {
  padding: 9px 0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px dashed var(--border-subtle);
}
.gen-board__bodies li:last-child { border-bottom: 0; }
.gen-board__codes-line {
  font-family: var(--font-mono);
  color: var(--blue);
  font-weight: 700;
  font-size: 0.92rem;
  background: var(--blue-soft);
  padding: 4px 10px;
  border-radius: 6px;
  flex: 0 0 auto;
  letter-spacing: 0.02em;
}
.gen-board__body-text { color: var(--text-primary); flex: 1 1 auto; }
.gen-board__examples li {
  padding: 9px 0;
  font-size: 0.95rem;
  color: var(--text-primary);
  border-bottom: 1px dashed var(--border-subtle);
}
.gen-board__examples li:last-child { border-bottom: 0; }
.gen-board__examples strong {
  font-family: var(--font-mono);
  color: var(--blue);
  background: var(--blue-soft);
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
}
@media (max-width: 700px) {
  .gen-board { grid-template-columns: 1fr; gap: 28px; }
}

/* =========================================================
   Resources list (Additional Resources, Communities)
   ========================================================= */
.resources { max-width: 760px; margin: 0 auto; color: var(--text-primary); }
.resources p { margin: 0 0 14px; color: var(--text-secondary); line-height: 1.7; }
.resources p strong { color: var(--text-primary); font-weight: 700; }
.resources p strong a { color: var(--text-primary); }
.resources p strong a:hover { color: var(--blue); }
.resources h3 {
  margin: 32px 0 12px;
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.resources ul { margin: 8px 0 14px; padding-left: 1.3em; color: var(--text-secondary); }
.resources ul li { margin-bottom: 6px; }
.resources a { color: var(--blue); }

/* Community group entry: platform icon + link + 1-line description.
   FB groups get a uniform Facebook-blue badge; forums get the actual site
   favicon (via Google's S2 service) so each entry is visually distinct. */
.group-entry {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 14px;
}
.group-entry__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-soft);
  color: var(--text-heading);
  margin-top: 2px;
  overflow: hidden;
}
.group-entry__icon svg { width: 18px; height: 18px; display: block; }
.group-entry__icon img { width: 22px; height: 22px; object-fit: contain; display: block; }
.group-entry__icon--fb { background: #1877F2; color: var(--text-inverted); }
.group-entry__body { flex: 1; min-width: 0; }
.group-entry__link {
  color: var(--text-heading);
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
}
.group-entry__link:hover { color: var(--blue); text-decoration: underline; }
.group-entry__desc { display: block; color: var(--text-secondary); font-size: 0.92rem; margin-top: 2px; line-height: 1.5; }

/* =========================================================
   Callout (Cabrio advisory and similar)
   ========================================================= */
.callout {
  padding: 18px 20px;
  background: var(--callout-bg);
  border-left: 3px solid var(--amber);
  border-top: 1px solid var(--callout-border);
  border-right: 1px solid var(--callout-border);
  border-bottom: 1px solid var(--callout-border);
  border-radius: var(--r-md);
}
.callout__title {
  margin: 0 0 6px;
  color: var(--amber);
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}
.callout__body { margin: 0 0 10px; color: var(--text-primary); }
.callout__body strong { color: var(--text-primary); }
.callout__meta { margin: 0; font-size: 0.92rem; color: var(--text-secondary); }
.callout__meta a { color: var(--blue); font-weight: 600; text-decoration: none; }
.callout__meta a:hover { text-decoration: underline; }

/* Stranding-fault framing (T6). Distinguished from the ordinary amber
   callout by a red rule, because it answers a different question: not
   "be careful doing this job" but "here is what this fault does to you at
   road speed". Used only where a fault can leave a car dead in moving
   traffic - 21% of NHTSA owner narratives use explicit danger language and
   15% place the event on a highway. */
.callout--stranding { border-left-color: var(--coral); }
.callout--stranding .callout__title { color: var(--coral); }

/* ---------------------------------------------------------------------------
   Glossary (#657) — /glossary/ reference list + inline jargon <abbr> links.
   --------------------------------------------------------------------------- */
.glossary { margin: 24px 0 0; }
.glossary__entry {
  padding: 18px 0;
  border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: 90px; /* anchor target clears the sticky header */
}
.glossary__entry:first-child { padding-top: 0; }
.glossary__entry:target .glossary__term { color: var(--blue); }
.glossary__term {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}
.glossary__name {
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.glossary__name::before { content: "\2014\00a0"; } /* em-dash + nbsp */
.glossary__def { margin: 6px 0 0; }
.glossary__def p { margin: 0 0 4px; color: var(--text-primary); }
.glossary__more { margin: 0; }
.glossary__more a { color: var(--blue); font-weight: 600; text-decoration: none; }
.glossary__more a:hover { text-decoration: underline; }

/* Inline acronym link from {% abbr "DTC" %}. Dotted underline signals "hover
   for the full name"; the link itself routes to the glossary entry. */
abbr.glossary-abbr { text-decoration: none; }
abbr.glossary-abbr a {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
abbr.glossary-abbr a:hover { text-decoration: underline; }

/* =========================================================
   Cabrio-owners panel (mechanic-directory) — illustration + copy
   side-by-side at desktop, stacked on mobile. Brand-tone navy line
   art on a soft surface so it reads as part of the page, not an
   inline warning.
   ========================================================= */
.cabrio-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg, 14px);
  padding: 28px 28px;
}
.cabrio-flow__art {
  display: flex;
  justify-content: center;
}
.cabrio-flow__art img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
}
.cabrio-flow__copy { min-width: 0; }
.cabrio-flow__heading {
  margin: 0 0 12px;
  font-family: var(--font-display);
  color: var(--text-primary);
  font-size: 1.5rem;
  line-height: 1.2;
}
.cabrio-flow__copy p { margin: 0 0 12px; color: var(--text-primary); }
.cabrio-flow__copy p:last-of-type { margin-bottom: 0; }
.cabrio-flow__card {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--bg-surface-0, #fff);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md, 10px);
}
.cabrio-flow__card-title {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--text-primary);
}
.cabrio-flow__tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.cabrio-flow__card-meta {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.cabrio-flow__card-meta a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.cabrio-flow__card-meta a:hover { text-decoration: underline; }
@media (min-width: 860px) {
  .cabrio-flow {
    grid-template-columns: minmax(220px, 1fr) 2fr;
    gap: 36px;
    padding: 32px 36px;
  }
  .cabrio-flow__art img { max-width: 100%; }
}

/* =========================================================
   SmartDiag promo strip
   ========================================================= */
.ai-promo {
  background: var(--bg-base);
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
}
.ai-promo::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 70%;
  height: 100%;
  background: radial-gradient(ellipse at center, var(--blue-soft), transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
}
.ai-promo__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  position: relative;
}
.ai-promo__icon-wrap {
  flex: 0 0 auto;
  color: var(--text-heading);
  display: inline-flex;
}
.ai-promo__icon { width: 96px; height: 64px; display: block; }
.ai-promo__copy { flex: 1 1 320px; min-width: 0; }
.ai-promo__heading {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ai-promo__sub { margin: 0; font-size: 0.95rem; color: var(--text-secondary); line-height: 1.55; }
.ai-promo__cta {
  flex: 0 0 auto;
  display: inline-block;
  padding: 0.6rem 22px;
  background: var(--navy);
  color: var(--text-inverted);
  text-decoration: none;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.ai-promo__cta-main {
  display: block;
  font-size: 0.92em;
}
.ai-promo__cta-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.72em;
  opacity: 0.9;
}
.ai-promo__cta:hover {
  background: var(--navy-mid);
  color: var(--text-inverted);
  box-shadow: var(--shadow-glow);
}
.ai-promo__cta:active { transform: translateY(1px); }
@media (max-width: 540px) {
  .ai-promo { padding: 24px 18px; }
  .ai-promo__inner { gap: 18px; }
  .ai-promo__icon-wrap { display: none; }
  .ai-promo__cta { width: 100%; text-align: center; }
}

/* =========================================================
   Fault-code pages (template + index)
   ========================================================= */
.fc-breadcrumb {
  margin: 0 0 18px;
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.fc-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fc-breadcrumb li {
  display: inline-flex;
  align-items: center;
}
.fc-breadcrumb li + li::before {
  content: "\203A";
  margin: 0 6px;
  color: var(--text-muted);
}
.fc-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.fc-breadcrumb a:hover { color: var(--blue); text-decoration: underline; }

.fc-title {
  text-align: left;
  margin: 0 0 14px;
  font-size: 2rem;
  line-height: 1.15;
}

.fc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 0.92rem;
  color: var(--text-secondary);
}
.fc-model {
  /* Floating-text look: no chip background, regular weight. The severity
     pill (.fc-badge) still draws the eye — these are secondary metadata
     and reading better as inline text than as a row of competing pills. */
  font-family: var(--font-mono);
  background: transparent;
  color: var(--blue);
  padding: 3px 6px;
  font-size: 0.82rem;
  font-weight: 400;
}
/* Model-name pills are anchors → /#m{code} on the home page (browse
   manuals for that chassis). Underlined to read as link text without a
   chip backdrop. The non-link .fc-model spans (time/cost) inherit the
   ruleset above and stay plain text. */
a.fc-model {
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.fc-model:hover { color: var(--blue-bright); }

/* Illustrative figures inside fault-code / maintenance bodies. */
.fc-illustration {
  margin: 0 0 24px;
  text-align: center;
}
.fc-illustration img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
}
.fc-illustration figcaption {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* === Maintenance / fault-code "How-to videos" cards ===
   Two-column on desktop (thumb + title + meta), stack on mobile. The
   `related_videos` frontmatter array on /maintenance/{slug}/ pages drives
   the render. */
.fc-video-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.fc-video-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
}
.fc-video-thumb {
  flex-shrink: 0;
  display: block;
  line-height: 0;
}
.fc-video-thumb img {
  width: 200px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.fc-video-meta { flex: 1; min-width: 0; }
.fc-video-title {
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  margin: 0 0 4px;
}
.fc-video-sub {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
@media (max-width: 600px) {
  .fc-video-item { flex-direction: column; gap: 8px; }
  .fc-video-thumb img { width: 100%; }
}

.fc-summary {
  font-size: 1.08rem;
  color: var(--text-primary);
  margin: 0 0 22px;
  line-height: 1.6;
}

.fc-cta-wrap { margin: 0 0 8px; }

/* Severity pills (used on detail + index) */
.fc-badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  border: 1px solid transparent;
  white-space: nowrap;
}
.fc-badge--diy {
  background: var(--lime-bg);
  color: var(--success-text);
  border-color: rgba(22, 163, 74, 0.25);
}
.fc-badge--diy-first {
  background: var(--lime-soft);
  color: var(--success-text);
  border-color: rgba(22, 163, 74, 0.30);
}
.fc-badge--shop {
  background: var(--amber-soft);
  color: var(--warn-text);
  border-color: rgba(217, 119, 6, 0.30);
}
.fc-badge--safety {
  background: var(--coral-soft);
  color: var(--danger-text);
  border-color: rgba(220, 38, 38, 0.30);
}
/* Audience badges (D5) — restrained/muted, deliberately not in the saturated
   diy/shop/safety palette. Owner = calm blue tint; Technician = neutral grey. */
.fc-badge--owner {
  background: var(--blue-soft);
  color: var(--text-heading);
  border-color: var(--border-subtle);
  font-size: 0.68rem;
  padding: 3px 9px;
}
.fc-badge--tech {
  background: var(--bg-base);
  color: var(--text-muted);
  border-color: var(--border-subtle);
  font-size: 0.72rem;
  padding: 3px 9px;
}

/* Body content */
.fc-body { color: var(--text-primary); }
.fc-body p { margin: 0 0 14px; line-height: 1.7; color: var(--text-primary); }

/* #664: verbatim NHTSA wording disclosure under the readable sentence-cased text. */
.recall-verbatim { margin: 4px 0 18px; }
.recall-verbatim > summary { cursor: pointer; color: var(--text-secondary); font-size: 0.92rem; }
.recall-verbatim > p { margin: 8px 0 0; color: var(--text-secondary); font-size: 0.92rem; }
.fc-body a { color: var(--blue); }
.fc-body a:hover { text-decoration: underline; }
.fc-body strong { color: var(--text-primary); font-weight: 700; }
.fc-body ul, .fc-body ol { margin: 0 0 18px; padding-left: 1.4em; line-height: 1.7; }
.fc-body ul li, .fc-body ol li { margin-bottom: 6px; }
.fc-body code {
  background: var(--bg-surface-2);
  color: var(--text-heading);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.88em;
}

.fc-h2 {
  margin: 30px 0 12px;
  font-family: var(--font-display);
  font-size: 1.85rem;
  color: var(--text-heading);
}
.fc-list { margin: 0 0 18px; padding-left: 1.4em; }
.fc-list li { margin-bottom: 6px; line-height: 1.6; color: var(--text-primary); }

.fc-parts-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
  font-size: 0.93rem;
}
.fc-parts-table th, .fc-parts-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}
.fc-parts-table th {
  background: var(--bg-surface-2);
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-heading);
  font-weight: 700;
}
.fc-parts-table td:nth-child(2) { font-family: var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
/* D3: OE / part-number column on procedure parts tables. The cell content is
   swapped client-side (maintenance-links.js) when the reader changes chassis. */
.mt-parts-table td.mt-oe-cell { font-family: var(--font-mono); white-space: nowrap; color: var(--text-primary); }
.mt-parts-table td.mt-oe-cell code { background: none; padding: 0; font-size: 0.92em; }
.mt-parts-table .mt-oe-empty { color: var(--text-muted); }
/* D5c: workshop-manual deep-link in the torque table's Source column. */
.mt-torque-src a { color: var(--blue); text-decoration: none; font-weight: 600; white-space: nowrap; font-size: 0.85rem; }
.mt-torque-src a:hover { text-decoration: underline; }
.mt-torque-src .mt-oe-empty { color: var(--text-muted); }
.mt-scope { color: var(--text-muted); font-size: 0.875em; }
.mt-scope[data-scope-state="conflict"] { color: inherit; font-weight: 600; }
.fc-note { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 18px; font-style: italic; }

.fc-cta-block {
  margin: 36px 0 24px;
  padding: 22px 24px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
}
.fc-cta-block__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text-heading);
  font-weight: 700;
}
.fc-cta-block__body {
  margin: 0 0 14px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* Index page */
.fc-intro {
  max-width: 760px;
  margin: 0 auto 22px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.7;
}
.fc-intro + .section-hero-art { margin-top: 0; }

.fc-filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 36px;
}
.fc-chip {
  display: inline-block;
  padding: 6px 14px;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  color: var(--text-heading);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  transition: background-color var(--transition), border-color var(--transition);
}
.fc-chip:hover {
  background: var(--blue-soft);
  border-color: var(--blue);
  color: var(--text-heading);
}

.fc-model-section { padding: 30px 0; }
.fc-model-section + .fc-model-section { border-top: 1px solid var(--border-subtle); }
.fc-model-section h2 {
  text-align: left;
  margin: 0 0 18px;
  font-size: 1.5rem;
}
.fc-model-section h2 .fc-model-code {
  font-family: var(--font-mono);
  color: var(--blue);
  background: var(--blue-soft);
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 0.78em;
  margin-right: 10px;
  vertical-align: middle;
}

.fc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.fc-card {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  color: inherit;
}
.fc-card:hover {
  border-color: var(--blue);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
  color: inherit;
}
.fc-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  flex-wrap: wrap;
}
.fc-card__code {
  font-family: var(--font-mono);
  background: var(--bg-surface-2);
  color: var(--text-heading);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.82rem;
}
.fc-card__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--text-heading);
  font-weight: 700;
  line-height: 1.3;
}
.fc-card__summary {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .fault-code > .section:first-child { padding-bottom: 16px; }
  .fault-code > .section:first-child + .section { padding-top: 22px; }
  .fc-title { font-size: 1.6rem; }
  .fc-h2 { font-size: 1.4rem; }
  .fc-summary { font-size: 1rem; }
  .fc-parts-table { font-size: 0.86rem; }
  .fc-parts-table th, .fc-parts-table td { padding: 8px 10px; }
}

/* =========================================================
   Footer (white chrome)
   ========================================================= */
.site-footer {
  background: var(--bg-base);
  color: var(--text-heading-strong);
  padding: 36px 24px;
  border-top: 1px solid var(--border-subtle);
}
.site-footer__inner { max-width: var(--max); margin: 0 auto; text-align: center; }
.site-footer__brand {
  display: inline-block;
  margin: 0 0 18px;
  line-height: 0;
}
.site-footer__logo { display: block; height: 48px; width: auto; }
.site-footer ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
}
.site-footer a {
  color: var(--text-heading-strong);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 6px 8px;
  letter-spacing: 0.3px;
  transition: color var(--transition);
}
.site-footer a:hover { color: var(--blue); }
.site-footer__disclosure { margin: 0 0 0.5rem; max-width: 60ch; font-size: 0.8rem; line-height: 1.5; color: var(--text-muted); }
.site-footer__meta { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.site-footer__meta a { padding: 0; color: var(--text-heading-strong); }
.site-footer__meta a:hover { color: var(--blue); }

/* =========================================================
   Fault-code CATALOG (Phase 4 — full /fault-codes/ index)
   ========================================================= */

/* Section titles inside the index */
.fc-section-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 6px;
  color: var(--text-primary);
}
.fc-section-title__meta {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.78em;
}
.fc-section-sub {
  margin: 0 0 22px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Severity badges — extend existing fc-badge family for catalog values */
.fc-badge--low {
  background: var(--lime-bg);
  color: var(--success-text);
  border-color: rgba(22, 163, 74, 0.25);
}
.fc-badge--medium {
  background: var(--amber-soft);
  color: var(--warn-text);
  border-color: rgba(217, 119, 6, 0.30);
}
.fc-badge--high {
  background: rgba(217, 119, 6, 0.20);
  color: var(--warn-text-strong);
  border-color: rgba(217, 119, 6, 0.45);
}
.fc-badge--no-start {
  background: var(--coral-soft);
  color: var(--danger-text);
  border-color: rgba(220, 38, 38, 0.30);
}

/* Card additions for the top-guides grid */
.fc-card__cluster {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.fc-card__cta {
  margin: auto 0 0;
  padding-top: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* Model code chip (used in cards + table) */
.fc-model-chip {
  display: inline-block;
  padding: 2px 7px;
  margin-right: 4px;
  background: var(--blue-soft);
  color: var(--text-heading);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

/* Catalog wrapper */
.fc-catalog {
  margin-top: 8px;
}
.fc-catalog__controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.fc-control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.fc-control-row--toggles {
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
  margin-top: 4px;
}
.fc-control-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  min-width: 80px;
}

/* Search input */
.fc-search {
  flex: 1 1 240px;
  min-width: 200px;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--text-primary);
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.fc-search:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--shadow-glow);
}

/* Year helper control — "don't know your chassis? enter your year" */
.fc-year-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  flex: 1 1 240px;
}
.fc-year-input {
  width: 116px;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--text-primary);
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.fc-year-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--shadow-glow);
}
.fc-year-clear {
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.fc-year-clear:hover {
  background: var(--blue-soft);
  border-color: var(--blue);
  color: var(--text-heading);
}
.fc-year-hint {
  flex: 1 1 220px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Filter chip group */
.fc-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fc-filter-chip {
  display: inline-block;
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.fc-filter-chip:hover {
  background: var(--blue-soft);
  border-color: var(--blue);
  color: var(--text-heading);
}
.fc-filter-chip.is-active {
  background: var(--navy);
  color: var(--text-inverted);
  border-color: var(--text-heading);
}

/* Toggles + reset */
.fc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.fc-toggle input { accent-color: var(--blue); }
.fc-reset {
  margin-left: auto;
  padding: 5px 12px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.fc-reset:hover {
  background: var(--bg-surface-3);
  color: var(--text-primary);
}
.fc-result-count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* REC-PP-24: model overview backlink — inline hint below model filter chips. */
.fc-model-page-link {
  margin: 4px 0 0;
  font-size: 0.85rem;
}
.fc-model-page-link a {
  color: var(--blue);
  text-decoration: none;
}
.fc-model-page-link a:hover { text-decoration: underline; }

/* Table */
.fc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-base);
}
.fc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.fc-table thead th {
  text-align: left;
  padding: 10px 14px;
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.fc-table tbody td {
  padding: 12px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  line-height: 1.5;
}
.fc-table tbody tr:last-child td { border-bottom: none; }
.fc-table tbody tr:hover { background: var(--bg-surface-1); }

/* Per-cluster left-border accents (subtle) */
.fc-row { border-left: 3px solid transparent; }
.fc-row--cluster-misfire           { border-left-color: rgba(220, 38, 38, 0.35); }
.fc-row--cluster-evap              { border-left-color: rgba(22, 163, 74, 0.35); }
.fc-row--cluster-secondary_air     { border-left-color: rgba(22, 163, 74, 0.45); }
.fc-row--cluster-crank_no_start    { border-left-color: rgba(220, 38, 38, 0.45); }
.fc-row--cluster-fuel_trim         { border-left-color: rgba(217, 119, 6, 0.35); }
.fc-row--cluster-oxygen_sensor     { border-left-color: rgba(217, 119, 6, 0.45); }
.fc-row--cluster-clutch_gearbox    { border-left-color: rgba(37, 99, 235, 0.45); }
.fc-row--cluster-transmission_other { border-left-color: rgba(37, 99, 235, 0.30); }
.fc-row--cluster-voltage_can       { border-left-color: rgba(147, 51, 234, 0.40); }
.fc-row--cluster-abs_esp           { border-left-color: rgba(220, 38, 38, 0.55); }
.fc-row--cluster-turbo_boost       { border-left-color: rgba(217, 119, 6, 0.55); }
.fc-row--cluster-cooling           { border-left-color: rgba(37, 99, 235, 0.55); }
.fc-row--cluster-egr_vacuum        { border-left-color: rgba(217, 119, 6, 0.65); }
.fc-row--cluster-named_mechanical  { border-left-color: rgba(100, 116, 139, 0.45); }
.fc-row--cluster-named_water       { border-left-color: rgba(37, 99, 235, 0.65); }

/* Cell-specific styling */
.fc-cell-code { white-space: nowrap; }
.fc-cell-cluster .fc-cluster-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.fc-cell-models { white-space: nowrap; }
.fc-cell-note { color: var(--text-primary); min-width: 240px; }
.fc-cell-warranty { white-space: nowrap; }
.fc-cell-action { white-space: nowrap; }
.fc-action-link {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.fc-action-link:hover { text-decoration: underline; }

/* Warranty chips */
.fc-warranty {
  display: inline-block;
  padding: 3px 9px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  border: 1px solid transparent;
  cursor: help;
}
.fc-warranty--often {
  background: var(--lime-bg);
  color: var(--success-text);
  border-color: rgba(22, 163, 74, 0.25);
}
.fc-warranty--possibly {
  background: var(--amber-soft);
  color: var(--warn-text);
  border-color: rgba(217, 119, 6, 0.30);
}
.fc-warranty--none {
  background: var(--bg-surface-2);
  color: var(--text-muted);
  border-color: var(--border-subtle);
  cursor: default;
}

/* Empty-state row */
.fc-row-empty td {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

.fc-catalog__note {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
}
.fc-catalog__note--spaced { margin-top: 2rem; }
.manuals-table-badge { margin-left: 6px; }
.manuals-table-badge--community { font-size: 0.7em; }
.manuals-contact { color: var(--text-muted); }

/* Mobile — collapse table to stacked cards */
@media (max-width: 640px) {
  .fc-table thead { display: none; }
  .fc-table, .fc-table tbody, .fc-table tr, .fc-table td { display: block; width: 100%; }
  .fc-table tr {
    margin-bottom: 12px;
    padding: 12px 14px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--bg-base);
  }
  .fc-table tr:hover { background: var(--bg-base); }
  .fc-table tbody td {
    padding: 4px 0;
    border-bottom: none;
    display: flex;
    gap: 10px;
    align-items: baseline;
  }
  .fc-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 90px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }
  .fc-cell-note { min-width: 0; }
  .fc-cell-note::before { display: block; flex: 0 0 100%; margin-bottom: 4px; }
  .fc-row { border-left-width: 0; border-top: 3px solid transparent; }
  .fc-row.fc-row--cluster-misfire           { border-top-color: rgba(220, 38, 38, 0.45); }
  .fc-row.fc-row--cluster-evap              { border-top-color: rgba(22, 163, 74, 0.45); }
  .fc-row.fc-row--cluster-clutch_gearbox    { border-top-color: rgba(37, 99, 235, 0.55); }
  .fc-control-label { min-width: 100%; }
  .fc-reset { margin-left: 0; }
}

/* =========================================================
   Task cards — used on /maintenance/, /fault-codes/, and the
   new /models/{slug}/ pages. Replaces the older fc-card layout
   with a clearer hierarchy: short title left + difficulty pill
   right, model chips, one-sentence summary, time + CTA footer.
   ========================================================= */
.task-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 8px 0 24px;
}
.task-card-grid--featured { margin-bottom: 32px; }
.task-card-grid__subhead {
  max-width: 720px;
  margin: 28px auto 8px;
  color: var(--text-heading);
  text-align: center;
}
.task-card-grid__intro {
  max-width: 720px;
  margin: 0 auto 14px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.55;
}
.task-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 18px 20px 16px;
  text-decoration: none;
  color: inherit;
  min-height: 168px;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.task-card:hover,
.task-card:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
  color: inherit;
}
.task-card__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
}
.task-card__title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.task-card__title-code {
  font-family: var(--font-mono);
  color: var(--blue);
  letter-spacing: 0.02em;
}
.task-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 10px;
}
.task-card__summary {
  flex: 1 1 auto;
  margin: 0 0 14px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
/* P2 hub: "Includes a how-to fix guide" marker on deep-guide cards that have a
   related_maintenance link. Plain label (the card itself is the link). */
.task-card__fix {
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--green, #14743e); /* Item F (#504): was #1a8a4a = 4.39:1 on white, under WCAG AA 4.5:1; #14743e = 5.84:1 */
}
.task-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.task-card__time {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.task-card__cta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.02em;
}
.task-card:hover .task-card__cta { color: var(--blue-bright); }
.task-card-grid__more { margin: 12px 0 0; text-align: center; }

/* "Variants" task card on /maintenance/ — chassis chips render as inline
   anchors instead of static spans, so the parent card is decorative only
   (the chips own the click target). Hover states get suppressed. */
.task-card--variants { cursor: default; }
.task-card--variants:hover,
.task-card--variants:focus-visible {
  border-color: var(--border-subtle);
  box-shadow: none;
  transform: none;
}
.task-card__title-link {
  color: inherit;
  text-decoration: none;
}
.task-card__title-link:hover { color: var(--blue); }
a.fc-model-chip {
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
a.fc-model-chip:hover,
a.fc-model-chip:focus-visible {
  background: var(--blue);
  color: var(--text-inverted);
  border-color: var(--blue);
}
a.fc-model-chip--all {
  font-weight: 600;
}

/* Feature card — large two-column callout used on the homepage and
   /fun-stuff/ for the Evilution shout-out and similar promo blocks. */
.card--feature {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 28px;
  align-items: center;
  margin: 16px 0 32px;
}
.card--feature__art img { max-width: 100%; height: auto; display: block; }
.card--feature__title { margin: 0 0 12px; }
@media (max-width: 720px) {
  .card--feature { grid-template-columns: 1fr; }
}

/* Curated deep-link list inside the Evilution feature card. Two-column
   on desktop, single-column on narrow screens. Owner of evilution.co.uk
   blesses deep-linking; we don't ingest content (see memory/reference_evilution.md). */
.evilution-guides__intro {
  margin: 8px 0 6px;
  font-size: 0.92rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.evilution-guides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}
.evilution-guides li { margin: 0; padding: 2px 0; }
@media (max-width: 560px) {
  .evilution-guides { grid-template-columns: 1fr; }
}

/* =========================================================
   Parts finder — /maintenance/parts/
   Large block; kept here (not inline in the template) because the
   page paint stays lean and the rules can be reused if a second
   parts surface ever lands.
   ========================================================= */
.pf-coverage-stats { font-size: 0.95rem; color: var(--text-muted); margin-top: -0.5rem; }
.pf-model-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 1rem 0 0.5rem; }
.pf-model-chips__label { font-size: 0.9rem; color: var(--text-muted); margin-right: 0.25rem; }
.pf-model-chip { padding: 0.4rem 0.875rem; background: transparent; border: 1px solid var(--border-subtle); border-radius: 999px; font-size: 0.875rem; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; font-family: inherit; color: var(--text-primary); }
.pf-model-chip:hover { background: var(--bg-surface-2); border-color: var(--navy-mid); }
.pf-model-chip.is-active { background: var(--navy-mid); color: var(--text-inverted); border-color: var(--navy-mid); }
.pf-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem; margin: 1rem 0 1.5rem; }
.pf-cat-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.875rem 1rem; background: var(--bg-surface-1); border: 1px solid var(--border-subtle); border-radius: 8px; cursor: pointer; font-family: inherit; text-align: left; transition: background 0.15s, border-color 0.15s; }
.pf-cat-tile:hover { background: var(--bg-surface-2); border-color: var(--navy-mid); }
.pf-cat-tile__label { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.pf-cat-tile__count { font-size: 0.8rem; color: var(--text-muted); }

/* =========================================================
   Model page — top-level wrapper + hero
   ========================================================= */
.model-page { display: block; }

.model-hero {
  background: var(--bg-base);
  background-image: radial-gradient(ellipse 60% 70% at 50% 35%, rgba(147, 197, 253, 0.30), transparent 70%);
  padding: 56px 24px;
  border-bottom: 1px solid var(--border-subtle);
}
.model-hero__breadcrumb {
  max-width: 880px;
  margin: 0 auto 1rem;
}
.model-hero__breadcrumb .fc-breadcrumb { margin-bottom: 0; }
.model-hero__inner { max-width: 880px; margin: 0 auto; }
.model-hero__copy { text-align: center; }
.model-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 14px;
}
.model-hero__chassis {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-inverted);
  background: var(--navy);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.model-hero__years {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 700;
}
.model-hero__gen {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.model-hero__title {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--text-heading);
}
.model-hero__drivetrain {
  margin: 0 0 18px;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.model-hero__oneliner {
  margin: 0 auto 22px;
  max-width: 700px;
  font-size: 1.05rem;
  color: var(--text-primary);
  line-height: 1.6;
}
.model-hero__oneliner strong { color: var(--text-heading); }
.model-hero__cta-row {
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.model-hero__art {
  display: flex;
  align-items: center;
  justify-content: center;
}
.model-hero__art img {
  display: block;
  max-width: 100%;
  max-height: 360px;
  height: auto;
}
@media (min-width: 768px) {
  .model-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
  }
}

/* Model recall panel */
.model-recalls__campaigns { margin-bottom: 18px; }
.model-recalls__regional { margin-top: 18px; }
.model-recalls__resources { margin-top: 8px; }
.model-recalls__note { margin-top: 8px; }
.model-recalls__lookup { height: 480px; }

/* About paragraphs */
.model-about__para {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
}
.model-about__para:last-child { margin-bottom: 0; }

/* Specs table */
.model-specs {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}
.model-specs__list { margin: 0; padding: 0; }
.model-specs__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.model-specs__row:last-child { border-bottom: 0; }
.model-specs__row dt {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding-top: 2px;
}
.model-specs__row dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-primary);
}
.model-specs__sublist { margin: 0; padding-left: 1.2em; }
.model-specs__sublist li { margin-bottom: 4px; }
@media (max-width: 600px) {
  .model-specs__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  .model-specs__row dt { padding-top: 0; }
}

/* Downloads pill row */
.downloads-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.downloads-row__label {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-right: 4px;
  align-self: center;
  flex: 0 0 auto;
}
.downloads-row__pill {
  display: inline-block;
  padding: 6px 12px;
  background: var(--blue-soft);
  color: var(--text-heading);
  border: 1px solid rgba(37, 99, 235, 0.20);
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.downloads-row__pill:hover {
  background: var(--blue);
  color: var(--text-inverted);
  border-color: var(--blue);
}
.downloads-row__pill:hover .downloads-row__format,
.downloads-row__pill:hover .downloads-row__size {
  color: rgba(255, 255, 255, 0.85);
}
.downloads-row__format,
.downloads-row__size {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}
.downloads-row__note {
  margin: 12px 0 0;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
}

/* Trim list */
.trim-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.trim-item {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-sm);
  padding: 14px 18px 16px;
}
.trim-item__name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text-heading);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.trim-item__what {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* First 30 days */
.first-30-list {
  list-style: none;
  counter-reset: f30;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.first-30-item {
  counter-increment: f30;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 18px 22px 18px 64px;
  position: relative;
}
.first-30-item::before {
  content: counter(f30);
  position: absolute;
  left: 18px;
  top: 18px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--text-inverted);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}
.first-30-item__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text-heading);
}
.first-30-item__detail {
  margin: 0;
  font-size: 0.96rem;
  color: var(--text-primary);
  line-height: 1.65;
}
.first-30-item__detail a { color: var(--blue); }

/* Communities */
.community-region { margin-bottom: 26px; }
.community-region__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.community-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.community-item {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: 12px 16px;
}
.community-item__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.community-item__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-soft);
  color: var(--text-heading);
  overflow: hidden;
}
.community-item__icon svg { width: 14px; height: 14px; display: block; }
.community-item__icon img { width: 18px; height: 18px; object-fit: contain; display: block; }
.community-item__icon--fb { background: #1877F2; color: var(--text-inverted); }
.community-item__link {
  display: inline-block;
  font-weight: 700;
  color: var(--text-heading);
  text-decoration: none;
  font-size: 1rem;
  margin-right: 6px;
}
.community-item__link:hover { color: var(--blue); text-decoration: underline; }
.community-item__type {
  display: inline-block;
  padding: 1px 8px;
  background: var(--blue-soft);
  color: var(--blue);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.community-item__login {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.75rem;
  color: var(--amber);
  font-style: italic;
}
.community-item__note {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.community-tip {
  margin: 28px 0 0;
  padding: 18px 22px;
  background: var(--blue-soft);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
}
.community-tip__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}
.community-tip p { margin: 0; color: var(--text-primary); line-height: 1.6; }

/* Video grid */
.video-grid {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.video-grid__thumb {
  display: block;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  line-height: 0;
}
.video-grid__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-grid__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: rgba(15, 23, 42, 0.78);
  color: var(--text-inverted);
  font-size: 1.4rem;
  padding-left: 4px;
  transition: background-color var(--transition), transform var(--transition);
}
.video-grid__thumb:hover .video-grid__play { background: var(--blue); transform: translate(-50%, -50%) scale(1.05); }
.video-grid__title { margin: 10px 0 4px; font-size: 0.95rem; line-height: 1.4; }
.video-grid__title a { color: var(--text-primary); font-weight: 600; text-decoration: none; }
.video-grid__title a:hover { color: var(--blue); }
.video-grid__channel { margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.video-grid__more { text-align: center; margin: 18px 0 0; }

/* Pre-purchase */
.pp-h3 {
  margin: 22px 0 10px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}
.pp-list {
  margin: 0 0 14px;
  padding-left: 1.4em;
  line-height: 1.7;
  color: var(--text-primary);
}
.pp-list--ol { padding-left: 1.6em; }
.pp-list__item { margin-bottom: 10px; }
.pp-list__more { margin: 18px 0 0; }

/* Parts vendors by region */
.parts-region { margin-bottom: 22px; }
.parts-region__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.parts-region__list { list-style: none; margin: 0; padding: 0; }
.parts-region__item {
  padding: 10px 14px;
  border-bottom: 1px dashed var(--border-subtle);
}
.parts-region__item:last-child { border-bottom: 0; }
.parts-region__link {
  font-weight: 600;
  color: var(--text-heading);
  text-decoration: none;
  margin-right: 8px;
}
.parts-region__link:hover { color: var(--blue); text-decoration: underline; }
.parts-region__note {
  display: block;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.55;
}

/* Mechanic + SmartDiag prompt cards */
.prompt-card {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 24px 26px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
}
.prompt-card--smartdiag { border-left-color: var(--text-heading); background: linear-gradient(0deg, var(--blue-soft), var(--bg-base) 60%); }
.prompt-card__copy { flex: 1 1 320px; min-width: 0; }
.prompt-card__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text-heading);
  font-weight: 700;
  text-align: left;
}
.prompt-card__copy p { margin: 0; color: var(--text-secondary); line-height: 1.6; font-size: 0.96rem; }
.prompt-card__cta { flex: 0 0 auto; margin: 0; }

/* FAQ */
.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
}
.faq-item {
  border-bottom: 1px solid var(--border-subtle);
}
.faq-item details { padding: 14px 4px; }
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text-heading);
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-weight: 700;
  font-size: 1.2rem;
  transition: transform var(--transition);
}
.faq-item details[open] summary::after { content: "−"; }
.faq-item__a {
  margin: 10px 0 4px;
  font-size: 0.96rem;
  color: var(--text-primary);
  line-height: 1.7;
}
.faq-item__a a { color: var(--blue); }

/* =========================================================
   /new-owner/ landing
   ========================================================= */
.new-owner-hero {
  background: var(--bg-base);
  background-image: radial-gradient(ellipse 60% 70% at 50% 30%, rgba(147, 197, 253, 0.30), transparent 70%);
  padding: 60px 24px 36px;
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}
.new-owner-hero__inner { max-width: 760px; margin: 0 auto; }
.new-owner-hero h1 { margin: 0 0 12px; }
.new-owner-hero p { margin: 0 auto; max-width: 580px; color: var(--text-secondary); }

.new-owner-picker { padding: 36px 24px 56px; }
.new-owner-picker__inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (min-width: 880px) {
  /* Three children: VIN card | OR divider | Picker card. Use 1fr auto 1fr so
     the divider takes only the room it needs and both cards line up
     horizontally at equal width. align-items: stretch (inherited) makes the
     divider span the full card height. */
  .new-owner-picker__inner { grid-template-columns: 1fr auto 1fr; gap: 28px; }
}
.no-card {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 22px 22px 24px;
}
.no-card__heading {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-heading);
  text-align: left;
}
.no-card__sub {
  margin: 0 0 14px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.no-card__field {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.no-card__field input,
.no-card__field select {
  flex: 1 1 160px;
  min-width: 140px;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.no-card__field input { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.5px; }
.no-card__field input:focus,
.no-card__field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--shadow-glow);
}
.no-card__btn {
  padding: 10px 20px;
  background: var(--navy);
  color: var(--text-inverted);
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition), box-shadow var(--transition);
}
.no-card__btn:hover { background: var(--navy-mid); box-shadow: var(--shadow-glow); }
.no-card__hint { margin: 8px 0 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
.no-card__msg {
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: 0.9rem;
  border-radius: var(--r-sm);
  display: none;
}
.no-card__msg.is-error {
  display: block;
  background: var(--coral-soft);
  border: 1px solid rgba(220, 38, 38, 0.20);
  color: var(--danger-text);
}
.no-card__msg.is-info {
  display: block;
  background: var(--blue-soft);
  border: 1px solid rgba(37, 99, 235, 0.20);
  color: var(--text-heading);
}
.no-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.no-fallback {
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--bg-surface-1);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
}
.no-fallback h3 { margin: 0 0 8px; font-size: 0.95rem; text-align: left; color: var(--text-heading); }
.no-fallback p { margin: 0 0 10px; font-size: 0.92rem; color: var(--text-secondary); }
.no-fallback ul { margin: 0; padding-left: 1.4em; color: var(--text-secondary); font-size: 0.92rem; }

/* Mobile tweaks for model page */
@media (max-width: 600px) {
  .model-hero { padding: 40px 18px; }
  .model-hero__title { font-size: 1.7rem; }
  .first-30-item { padding: 16px 16px 14px 56px; }
  .first-30-item::before { left: 14px; top: 14px; width: 28px; height: 28px; font-size: 0.85rem; }
  .prompt-card { padding: 20px; }
  .prompt-card__title { font-size: 1.1rem; }
  .video-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Manual figures
   Rendered by the {% figure "id" %} Eleventy shortcode from a
   manifest at src/_data/figures.json. Source PDFs live in
   src/assets/manuals/; rendered WebPs in src/assets/manual-figures/.
   ========================================================= */
.manual-figure {
  margin: 28px 0;
  padding: 12px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-soft, var(--border-subtle));
  border-radius: var(--r-md);
}
.manual-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-md) - 4px);
  background: var(--bg-base);
}
.manual-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding: 0 4px;
  font-size: 0.88rem;
  line-height: 1.4;
}
.manual-figure__caption { color: var(--text-primary); }
.manual-figure__credit {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: italic;
}
/* D4: deep-link from an inline figure to its /figures/ library page. */
.manual-figure__library-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8rem;
}
.manual-figure__library-link:hover { text-decoration: underline; }
.manual-figure--missing {
  border-color: rgba(220, 38, 38, 0.30);
  background: rgba(220, 38, 38, 0.06);
}
.manual-figure--missing figcaption { color: var(--danger-text); font-style: italic; }

/* =========================================================
   Community-submitted fixes (/submitted-fixes/)
   ========================================================= */
.submitted-fix__byline {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.submitted-fix__credit {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 32px 0;
  padding: 18px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-soft, var(--border-subtle));
  border-radius: var(--r-md);
}
.submitted-fix__logo {
  flex: 0 0 auto;
  width: 110px;
  height: 110px;
  border-radius: var(--r-md);
  background: var(--bg-base);
  padding: 6px;
  object-fit: contain;
}
.submitted-fix__credit-body { flex: 1 1 auto; }
.submitted-fix__credit-title { margin: 0 0 6px; font-size: 1.05rem; }
@media (max-width: 520px) {
  .submitted-fix__credit { flex-direction: column; align-items: center; text-align: center; }
}

/* =========================================================
   Parts finder (/maintenance/parts/)
   ========================================================= */
.pf-page-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.pf-page-toolbar__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.pf-country-select {
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-base);
  font: inherit;
  color: var(--text-heading);
  cursor: pointer;
}

.pf-finder {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 18px;
  margin: 0 0 24px;
}
.pf-finder__row {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 10px;
}
@media (max-width: 600px) {
  .pf-finder__row { grid-template-columns: 1fr; }
}
.pf-input,
.pf-model {
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-base);
  font: inherit;
  font-size: 1rem;
  color: var(--text-heading);
}
.pf-input:focus,
.pf-model:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15);
}
.pf-results {
  margin-top: 12px;
  display: none;
  max-height: 460px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-base);
}
.pf-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  font: inherit;
  color: var(--text-primary);
  transition: background-color var(--transition);
}
.pf-result:last-child { border-bottom: 0; }
.pf-result:hover,
.pf-result.is-active {
  background: var(--blue-soft);
}
.pf-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.pf-result__name {
  font-weight: 600;
  color: var(--text-heading);
  font-size: 0.98rem;
}
.pf-result__meta {
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.pf-empty {
  margin-top: 12px;
  padding: 12px 14px;
  font-size: 0.92rem;
  color: var(--text-muted);
  background: var(--bg-base);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
}

.pf-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.pf-chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-heading);
  letter-spacing: 0.04em;
}

/* VIN form */
.pf-vin-form {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 18px;
}
.pf-vin-form__row {
  margin-bottom: 12px;
}
.pf-vin-form__row:last-child { margin-bottom: 0; }
.pf-vin-form__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}
@media (max-width: 600px) {
  .pf-vin-form__row--split { grid-template-columns: 1fr; }
}
.pf-vin-form__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.84rem;
  color: var(--text-primary);
}
.pf-vin-form__label > span {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
}
.pf-vin-form__label input,
.pf-vin-form__label select {
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-base);
  font: inherit;
  color: var(--text-heading);
}

/* Modal */
.pf-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  z-index: 1000;
  overflow-y: auto;
}
.pf-modal.is-open { display: flex; }
.pf-modal__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 28px 28px 24px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.30);
}
.pf-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.pf-modal__close:hover {
  background: var(--bg-surface-1);
  color: var(--text-heading);
}
.pf-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 32px 8px 0;
}
.pf-modal__title {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-heading);
}
.pf-modal__meta {
  margin: 4px 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.pf-modal__image {
  margin: 14px 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-surface-1);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pf-modal__image img { max-width: 100%; height: auto; display: block; }
.pf-modal__credit {
  margin: -8px 0 12px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: italic;
}
.pf-modal__image--placeholder {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-style: italic;
}
.pf-modal__numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 8px 0;
}
.pf-modal__numbers-label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  margin-right: 4px;
}
.pf-num {
  display: inline-block;
  padding: 3px 8px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--text-heading);
}
.pf-num--alt {
  background: var(--bg-base);
  color: var(--text-primary);
}
.pf-modal__notes {
  margin: 10px 0;
  padding: 10px 12px;
  background: var(--bg-surface-1);
  border-left: 3px solid var(--blue);
  font-size: 0.88rem;
  color: var(--text-primary);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.pf-modal__country {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 8px;
}
.pf-modal__country-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.pf-vendors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}
.pf-vendor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text-heading);
  font-weight: 600;
  font-size: 0.88rem;
  transition: background-color var(--transition), border-color var(--transition);
}
.pf-vendor:hover {
  background: var(--blue-soft);
  border-color: var(--blue);
}
.pf-vendor__arrow {
  color: var(--text-muted);
  font-size: 0.92rem;
}
.pf-lens {
  display: inline-block;
  margin: 6px 0 12px;
  padding: 8px 12px;
  background: var(--bg-surface-1);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text-heading);
  font-size: 0.86rem;
}
.pf-lens:hover { border-color: var(--blue); color: var(--text-heading); }
.pf-modal__caveat {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}
.pf-report {
  display: inline-block;
  margin: 12px 0 0;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.pf-report:hover {
  color: var(--blue);
  border-color: var(--blue);
}

/* {% partFromCatalog "id" %} — inline part card on maintenance MDs.
   Pulls from _data/parts.json; figure (optional) from figures_meta.json;
   "Find vendors" deep-links to /maintenance/parts/?q=&model= which the
   finder hydrates on load. Styled like .task-card siblings. */
.part-catalog {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 24px 0;
  padding: 18px 20px 16px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
}
@media (min-width: 720px) {
  .part-catalog:has(.part-catalog__figure) {
    grid-template-columns: minmax(220px, 38%) minmax(0, 1fr);
    grid-template-areas:
      "figure header"
      "figure body"
      "figure action";
    align-items: start;
  }
  .part-catalog:has(.part-catalog__figure) .part-catalog__figure { grid-area: figure; margin: 0; }
  .part-catalog:has(.part-catalog__figure) .part-catalog__header { grid-area: header; }
  .part-catalog:has(.part-catalog__figure) .part-catalog__body { grid-area: body; }
  .part-catalog:has(.part-catalog__figure) .part-catalog__action { grid-area: action; }
}
.part-catalog__header { margin: 0; }
.part-catalog__name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.part-catalog__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.part-catalog__chips { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.part-catalog__chip {
  display: inline-block;
  padding: 1px 7px;
  background: var(--blue-soft);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-heading);
  letter-spacing: 0.02em;
}
.part-catalog__engine { font-family: var(--font-mono); font-size: 0.82rem; }
.part-catalog__figure { margin: 0; }
.part-catalog__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
}
.part-catalog__body { font-size: 0.92rem; }
.part-catalog__numbers { margin: 0 0 10px; }
.part-catalog__numbers:last-child { margin-bottom: 0; }
.part-catalog__numbers strong {
  display: block;
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.part-catalog__numbers ul { margin: 0; padding-left: 1.2em; color: var(--text-secondary); }
.part-catalog__numbers ul li { margin: 2px 0; line-height: 1.5; }
.part-catalog__numbers code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--text-primary);
  background: var(--blue-soft);
  padding: 0 4px;
  border-radius: 3px;
}
.part-catalog__notes {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: var(--blue-soft);
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  color: var(--text-secondary);
}
.part-catalog__action { margin: 4px 0 0; }
.part-catalog--missing {
  border-left-color: var(--text-muted);
  background: var(--bg-base);
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* ---- Manual full-text reader (/manuals/<slug>/read/<n>/) ---- */
.hero--compact { padding-top: 1.5rem; padding-bottom: 1rem; }
.man-read__crumb { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 0.5rem; }
.man-read__crumb a { color: var(--text-secondary); }
.man-read__meta { color: var(--text-muted); font-size: 0.9rem; margin: 0.25rem 0; }
.man-read__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.5rem 0 0.75rem; }
.chip {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--bg-alt, #f1f1f1); color: var(--text-secondary);
  font-size: 0.8rem; font-weight: 600; text-decoration: none; border: 1px solid var(--border, #ddd);
}
.chip--muted { opacity: 0.7; font-weight: 500; }
.man-read { max-width: 820px; margin: 0 auto; }
.man-page { padding: 1.25rem 0 1.5rem; border-top: 1px solid var(--border, #e5e5e5); }
.man-page:first-child { border-top: 0; }
.man-page__num { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.4rem; }
.man-page__num a { color: var(--text-muted); text-decoration: none; }
.man-page__body { font-size: 0.95rem; line-height: 1.6; overflow-wrap: anywhere; }
.man-page__body table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; font-size: 0.85rem; display: block; overflow-x: auto; }
.man-page__body th, .man-page__body td { border: 1px solid var(--border, #ddd); padding: 4px 8px; text-align: left; vertical-align: top; }
.man-page__body th { background: var(--bg-alt, #f5f5f5); }
.man-page__body h1, .man-page__body h2, .man-page__body h3 { font-size: 1.05rem; margin: 1rem 0 0.4rem; }
.man-read__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 2px solid var(--border, #e5e5e5); }
.man-page__fig { margin: 0.85rem 0 0.25rem; }
.man-page__fig img { max-width: 100%; height: auto; border: 1px solid var(--border, #e5e5e5); border-radius: 6px; }
.man-page__fig figcaption { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.3rem; }

/* =========================================================
   Persistent vehicle chip (header) — Phase 2 (vehicle-state.js)
   Chassis (+ powertrain) the visitor selected anywhere on the site.
   Hidden until a vehicle is set.
   ========================================================= */
.scm-chip { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.scm-chip[hidden] { display: none; }
.scm-chip__main {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--blue-soft); color: var(--text-heading);
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--transition), border-color var(--transition);
}
.scm-chip__main:hover { background: var(--blue-glow); border-color: var(--blue); }
.scm-chip__car { font-size: 0.95rem; line-height: 1; }
.scm-chip__caret { opacity: 0.7; }
.scm-chip__clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-subtle); border-radius: 50%;
  font-size: 0.95rem; line-height: 1; cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.scm-chip__clear:hover { color: var(--coral); border-color: var(--coral); }
.scm-chip__popover {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 200px; padding: 10px;
  background: var(--bg-base); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  display: flex; flex-direction: column; gap: 8px;
}
.scm-chip__popover[hidden] { display: none; }
.scm-chip__row { display: flex; flex-wrap: wrap; gap: 6px; }
.scm-chip__row--pt { padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.scm-chip__opt {
  padding: 5px 10px;
  background: var(--bg-base); color: var(--text-heading);
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.scm-chip__opt:hover { background: var(--blue-soft); border-color: var(--blue); }
.scm-chip__opt.is-active { background: var(--navy); color: var(--text-inverted); border-color: var(--text-heading); }
.scm-chip__opt--pt { font-weight: 500; }
@media (max-width: 600px) {
  .scm-chip__label { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
  .scm-chip__popover { right: auto; left: 0; }
}

/* =========================================================
   Maintenance landing — controls, cards, filters (Phase 3)
   ========================================================= */
.mt-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mt-controls {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 16px;
  margin: 1.5rem 0 1rem;
  display: flex; flex-direction: column; gap: 12px;
}
@media (min-width: 880px) {
  /* Sticky on desktop only — a multi-row filter block stuck to a phone
     viewport would eat most of the screen; the jump strip is the mobile
     scroll aid. */
  .mt-controls { position: sticky; top: 8px; z-index: 30; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); }
}

/* ---- Phase 8 D6: mobile filter sheet (<600px) ----
   Desktop/tablet: the toggle button + sheet chrome are display:none, the filter
   panel renders inline exactly as before. <600px: the panel collapses behind a
   "Filters" button and opens as a bottom sheet. The chip controls inside are
   identical at all widths, so maintenance-filter.js binds unchanged. */
.mt-filter-toggle,
.mt-controls__sheet-head { display: none; }
.mt-filter-backdrop { display: none; }

/* The bottom-sheet behavior only engages when JS is present to provide the
   opener (the sheet script adds body.mt-sheet-enabled). With JS off, none of the
   below applies and the filter panel renders inline + usable. */
@media (max-width: 599.98px) {
  /* the trigger */
  body.mt-sheet-enabled .mt-filter-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 1.5rem 0 1rem; padding: 10px 16px;
    background: var(--bg-surface-1); color: var(--text-heading);
    border: 1px solid var(--border-strong); border-radius: var(--r-pill);
    font-family: var(--font-sans); font-size: 0.9rem; font-weight: 700; cursor: pointer;
  }
  .mt-filter-toggle__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    background: var(--navy); color: var(--text-inverted);
    border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 700;
  }

  /* the panel as a bottom sheet — off-screen until body.mt-filters-open.
     Gated on .mt-sheet-enabled so a no-JS client keeps the inline panel. */
  body.mt-sheet-enabled .mt-controls {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    margin: 0; border-radius: var(--r-md) var(--r-md) 0 0;
    max-height: 85vh; overflow-y: auto;
    transform: translateY(102%); transition: transform var(--transition);
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.22);
    -webkit-overflow-scrolling: touch;
  }
  body.mt-sheet-enabled.mt-filters-open .mt-controls { transform: translateY(0); }

  /* backdrop */
  body.mt-sheet-enabled .mt-filter-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(15, 23, 42, 0.4); opacity: 0; pointer-events: none;
    transition: opacity var(--transition);
  }
  body.mt-filters-open .mt-filter-backdrop { opacity: 1; pointer-events: auto; }
  body.mt-filters-open { overflow: hidden; }

  /* sheet header (title + Done) */
  body.mt-sheet-enabled .mt-controls__sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: -4px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
  }
  .mt-controls__sheet-title {
    font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-heading);
  }
  .mt-controls__sheet-close {
    background: var(--navy); color: var(--text-inverted); border: 0;
    border-radius: var(--r-pill); padding: 6px 16px;
    font-family: var(--font-sans); font-size: 0.85rem; font-weight: 700; cursor: pointer;
  }
  /* stack the chip rows for narrow widths */
  .mt-filter-row { flex-direction: column; gap: 12px; }
}

.mt-controls__search { position: relative; display: flex; align-items: center; }
.mt-search__input {
  flex: 1 1 auto; width: 100%;
  padding: 10px 40px 10px 14px;
  font-family: var(--font-sans); font-size: 0.95rem; color: var(--text-primary);
  background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.mt-search__input:focus { outline: none; border-color: var(--blue); box-shadow: var(--shadow-glow); }
.mt-search__kbd {
  position: absolute; right: 12px; padding: 1px 7px;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted);
  background: var(--bg-surface-2); border: 1px solid var(--border-strong); border-radius: 4px;
}

.mt-filter-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.mt-chip-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mt-chip-group__label {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted);
  margin-right: 2px;
}
.mt-filter-chip, .mt-pt-chip {
  padding: 5px 12px;
  background: var(--bg-base); color: var(--text-heading);
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.mt-filter-chip:hover, .mt-pt-chip:hover { background: var(--blue-soft); border-color: var(--blue); }
.mt-filter-chip.is-active, .mt-pt-chip.is-active {
  background: var(--navy); color: var(--text-inverted); border-color: var(--text-heading);
}
.mt-chip-group--pt { padding-left: 4px; border-left: 1px dashed var(--border-strong); }
.mt-pt-chip { font-weight: 500; font-size: 0.78rem; }

.mt-resultbar { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; font-size: 0.9rem; color: var(--text-secondary); }
.mt-clear {
  background: transparent; border: 0; color: var(--blue); cursor: pointer;
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; text-decoration: underline; padding: 0;
}
.mt-clear:hover { color: var(--text-heading); }

.mt-legend { font-size: 0.85rem; color: var(--text-secondary); }
.mt-legend summary { cursor: pointer; font-weight: 600; color: var(--text-heading); }
.mt-legend ul { margin: 8px 0 0; padding-left: 1.2em; line-height: 1.6; }

/* Jump strip — sticky scroll aid */
.mt-jump {
  position: sticky; top: 0; z-index: 25;
  display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto;
  padding: 8px 0; margin: 0 0 1rem;
  background: var(--bg-base); border-bottom: 1px solid var(--border-subtle);
  -webkit-overflow-scrolling: touch;
}
.mt-jump__link {
  flex: 0 0 auto; padding: 5px 12px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600;
  color: var(--text-secondary); text-decoration: none; white-space: nowrap;
  transition: background-color var(--transition), color var(--transition);
}
.mt-jump__link:hover { background: var(--blue-soft); color: var(--text-heading); }
.mt-jump__link.is-current { background: var(--navy); color: var(--text-inverted); }

/* Sections + card grid */
.mt-section { scroll-margin-top: 64px; margin: 0 0 1.5rem; }
.mt-section__count { color: var(--text-muted); font-weight: 500; font-size: 0.78em; }
.mt-card-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.mt-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-base); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); padding: 16px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.mt-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); }
.mt-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.mt-card__title { margin: 0; font-family: var(--font-display); font-size: 1.04rem; line-height: 1.3; }
.mt-card__link { color: var(--text-heading); text-decoration: none; }
.mt-card__link:hover { color: var(--blue); }
.mt-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.mt-card__time::before { content: "\23F1\FE0F"; margin-right: 3px; }
.mt-card__task { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; font-size: 0.72rem; }
.mt-card__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mt-chip {
  padding: 2px 9px; background: var(--bg-surface-2); color: var(--text-heading);
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.mt-chip:hover { background: var(--navy); color: var(--text-inverted); border-color: var(--text-heading); }
.mt-card__variants { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mt-card__variants-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.mt-variant {
  padding: 2px 9px; background: var(--blue-soft); color: var(--text-heading);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 0.76rem; font-weight: 600; text-decoration: none;
}
.mt-variant:hover { border-color: var(--blue); }
.mt-card__summary { margin: 0; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
.mt-card__cta { margin: auto 0 0; font-size: 0.85rem; font-weight: 600; }
.mt-card__cta a { color: var(--blue); text-decoration: none; }
.mt-card__cta a:hover { text-decoration: underline; }

/* Empty state */
.mt-empty {
  text-align: center; padding: 40px 24px; margin: 1rem 0;
  background: var(--bg-surface-1); border: 1px dashed var(--border-strong); border-radius: var(--r-md);
}
.mt-empty p { margin: 0 0 14px; color: var(--text-secondary); }
.btn--ghost { background: transparent; color: var(--text-heading); border: 1px solid var(--border-strong); }
.btn--ghost:hover { background: var(--bg-surface-2); }

/* Per-chassis sub-nav */
.mt-subnav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 1.5rem; font-size: 0.9rem; }
.mt-subnav__label { color: var(--text-muted); font-weight: 600; }
.mt-subnav a { color: var(--blue); text-decoration: none; font-weight: 600; }
.mt-subnav a:hover { text-decoration: underline; }
.mt-subnav__current { color: var(--text-heading); font-weight: 700; }

/* Procedure-page chassis chips (Phase 4). Reuse the .mt-chip styles defined
   above; only the row container + active state are new here. */
.mt-proc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 0.75rem; }
.mt-proc-chips .mt-chip.is-active {
  background: var(--navy); color: var(--text-inverted); border-color: var(--text-heading);
}
.mt-parts-link { color: var(--blue); text-decoration: none; font-weight: 600; white-space: nowrap; }
.mt-parts-link:hover { text-decoration: underline; }

/* Phase 7B (D1) — homepage triage block */
.triage { text-align: center; }
.triage__heading { margin: 0 0 1.25rem; font-size: 1.4rem; color: var(--text-primary); }
.triage__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 680px;
  margin: 0 auto;
}
.triage__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0.9rem 1.5rem;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill, 12px);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.triage__btn:hover,
.triage__btn:focus-visible {
  background: var(--blue-soft);
  border-color: var(--blue);
  color: var(--text-heading-strong);
}
.triage__secondary { margin: 1.1rem 0 0; font-size: 0.95rem; color: var(--text-secondary); }
.triage__secondary a { color: var(--blue); }
@media (min-width: 700px) {
  .triage__buttons { flex-direction: row; }
  .triage__btn { flex: 1; }
}

/* Phase 7B (D3a) — search "Best answer" pinned card */
.scm-best-answer {
  margin: 1rem 0 1.25rem;
  padding: 1.1rem 1.25rem;
  background: var(--blue-soft);
  border: 1px solid var(--blue);
  border-radius: 12px;
}
.scm-best-answer[hidden] { display: none; }
.scm-best-answer__label {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
}
.scm-best-answer__title {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}
.scm-best-answer__blurb {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.scm-best-answer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.scm-best-answer__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border-radius: var(--r-pill, 12px);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.scm-best-answer__btn--primary {
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--text-inverted);
}
.scm-best-answer__btn--primary:hover,
.scm-best-answer__btn--primary:focus-visible {
  background: var(--navy-deep);
  border-color: var(--text-heading-strong);
}
.scm-best-answer__btn--secondary {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}
.scm-best-answer__btn--secondary:hover,
.scm-best-answer__btn--secondary:focus-visible {
  border-color: var(--blue);
  color: var(--text-heading-strong);
}

/* Phase 7B (D3b) — search empty-state suggestion chips */
.scm-search-chips { margin: 1rem 0 1.25rem; }
.scm-search-chips[hidden] { display: none; }
.scm-search-chips__label {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.scm-search-chips__list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.scm-search-chips__chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.95rem;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill, 999px);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.scm-search-chips__chip:hover,
.scm-search-chips__chip:focus-visible {
  background: var(--blue-soft);
  border-color: var(--blue);
  color: var(--text-heading-strong);
}
.scm-search-chips__tip {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.scm-search-chips__tip code {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-size: 0.85em;
}

/* 3D explore: in interior POV, force-hide exterior zone pins so model-viewer's
   hotspot re-projection can't re-show them (display:none beats a re-asserted [hidden]). */
#xp3-model.is-interior .xp3-hotspot[data-zone] { display: none !important; }

/* =========================================================
   Reduced motion (WCAG 2.3.3) — respect the OS "reduce motion" setting.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------------
   Owner's Guide pill (nav item with `pill: true` in nav.json)
   Standout treatment vs ordinary nav links: filled amber background,
   uppercase, pill radius. Hover/active reverts to navy. Overrides the
   [aria-current] underline marker since the pill is its own emphasis.
   --------------------------------------------------------------------------- */
.site-nav a.site-nav__pill {
  background: var(--amber);
  color: var(--text-inverted);
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  font-size: 0.78rem;
  box-shadow: 0 1px 2px rgba(23, 37, 84, 0.12);
}
.site-nav a.site-nav__pill:hover,
.site-nav a.site-nav__pill:focus-visible {
  background: var(--navy-deep);
  color: var(--text-inverted);
}
.site-nav a.site-nav__pill[aria-current="page"] {
  background: var(--navy-deep);
  color: var(--text-inverted);
}
.site-nav a.site-nav__pill[aria-current="page"]::after {
  display: none;
}

/* Item E site-wide (#615, Mike-approved 2026-06-10): section-head line icons.
   Heroicons v2 outline via the h2-icon.njk macro; decorative (aria-hidden). */
.h2-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--blue);
  vertical-align: -4px;
  margin-right: 10px;
  display: inline-block;
}

/* #636 year -> chassis lookup widget (shared component). Additive, minimalist. */
.ycl { border: 1px solid var(--border-subtle); border-radius: var(--r-md, 10px); padding: 14px 16px; margin: 0 0 1.25rem; background: var(--bg-surface-1, #f8f9fb); }
.ycl__label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; color: var(--text-secondary); }
.ycl__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ycl__input { width: 9rem; padding: 8px 10px; font: inherit; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 6px); }
.ycl__forfour { font-size: 0.85rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.ycl__result { margin: 10px 0 0; font-size: 0.95rem; color: var(--text-primary); min-height: 1.2em; }
.ycl__cta { margin-top: 10px; }

/* #635 year-range suffix on chassis filter chips. Muted, smaller, inline. */
.fc-chip-years { font-size: 0.82em; font-weight: 400; opacity: 0.7; margin-left: 2px; }
/* #633 recalls empty-state. */
.rc-empty { margin: 1.5rem 0; color: var(--text-secondary); font-style: italic; }

/* #626 homepage hero search */
.hero-search { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 1rem auto 0; max-width: 540px; }
.hero-search input { flex: 1 1 300px; padding: 10px 14px; font: inherit; border: 1px solid var(--border-subtle); border-radius: var(--r-sm, 6px); }
/* #627 symptom-card meta + secondary CTA */
.card__meta { font-size: 0.85rem; color: var(--text-muted); margin-top: 8px; }
.card__cta-secondary { display: inline-block; margin-top: 6px; margin-left: 14px; font-size: 0.85rem; color: var(--blue); text-decoration: none; }
.card__cta-secondary:hover { text-decoration: underline; }


/* =========================================================
   Dark mode — OS preference only, no toggle (#649).
   Muted, print-of-night institutional: inverted luminance,
   same hierarchy, same restraint. No accent shifts, no neon.
   Scoped to `screen` so the print stylesheet always renders light.
   ========================================================= */
@media screen and (prefers-color-scheme: dark) {
  :root {
    /* Surfaces — slate scale, inverted luminance */
    --bg-base: #0F172A;
    --bg-surface-1: #1E293B;
    --bg-surface-2: #334155;
    --bg-surface-3: #475569;
    --border-subtle: #334155;
    --border-strong: #475569;

    /* Text — inverted */
    --text-primary: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    /* --text-inverted stays #FFFFFF — white text on navy/blue chrome */

    /* Chrome — lift navy-deep so it separates from the slate body */
    --navy-deep: #1E2A47;

    /* Heading / emphasis text — lightened off the brand navy for AA on the
       dark body (navy stays navy where it is a background). Neutral light so
       headings read by size/weight; links keep --blue-on-navy and don't collide. */
    --text-heading: #F1F5F9;
    --text-heading-strong: #F1F5F9;

    /* State tints — low-alpha, same hue, over the dark surface */
    --lime-bg: rgba(22, 163, 74, 0.16);
    --lime-soft: rgba(22, 163, 74, 0.16);
    --amber-soft: rgba(217, 119, 6, 0.18);
    --coral-soft: rgba(220, 38, 38, 0.16);
    --callout-bg: rgba(217, 119, 6, 0.12);
    --callout-border: rgba(217, 119, 6, 0.30);

    /* State text — lightened, same hue, for AA on the dark tint */
    --success-text: #86EFAC;
    --warn-text: #FCD34D;
    --warn-text-strong: #FDBA74;
    --danger-text: #FCA5A5;

    /* Shadows → border-only ring (no blur on dark; print-of-night) */
    --shadow-card: 0 0 0 1px var(--border-subtle);
    --shadow-card-hover: 0 0 0 1px var(--blue);
  }

  /* Body links → the palette's own AA-safe blue-on-dark. No accent shift,
     no new colour. Buttons / pills / nav keep their own (more specific) rules. */
  a { color: var(--blue-on-navy); }
  a:hover { color: var(--blue-on-navy); }

  /* Bare <input>/<select>/<textarea> that relied on the UA-default white
     background would glare on the dark surface (e.g. /figures search + year
     box). Give them the dark surface explicitly. Dark-only, so light is
     untouched. Checkboxes / radios keep their native control rendering. */
  input[type="text"], input[type="search"], input[type="number"],
  input[type="email"], input:not([type]), select, textarea {
    background: var(--bg-surface-1);
    color: var(--text-primary);
  }
}


/* =========================================================
   #696 — plain-language recall lead ("What it means for you")
   Calm, owner-facing summary above the official NHTSA text.
   Token-based so it inverts cleanly in dark mode.
   ========================================================= */
.recall-plain {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--blue-soft);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-sm);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text-primary);
}
.recall-plain strong { color: var(--text-heading); }
.task-card__plain {
  margin: 0 0 8px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-primary);
}
.task-card__plain strong { color: var(--text-heading); }

/* =========================================================
   Footer "recommend something" disclosure
   Only the wrapper is styled here — the form itself reuses
   .sm-form so it cannot drift from the site's other forms.
   ========================================================= */
.recommend {
  margin: 0 0 1.25rem;
  max-width: 68ch;
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
}
.recommend__summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-heading-strong);
  padding: 4px 0;
  list-style: revert;
}
.recommend__summary:hover { color: var(--blue); }
.recommend__summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.recommend__intro {
  margin: 0.6rem 0 0.9rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.recommend__hint {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.recommend .sm-form { margin-bottom: 0.5rem; }