/* ================================================================
   Workshop-Manuals.com — Site Stylesheet
   Design "D": a printed factory service manual laid on a drafting
   sheet. Ink black on a gridded sheet, condensed caps for headings,
   a mono face for running heads and figures, and a colour code that
   always means something:
     - chapter colour groups (key band, section tab, chapter lists)
     - country of origin (home page)
     - decade (year tags)

   Fonts (self-hosted, SIL OFL): Archivo (variable wdth/wght),
   IBM Plex Mono 400/600.

   Structure:
     1.  Fonts
     2.  Tokens
     3.  Reset and base
     4.  Header, brand, search
     5.  Navigation and chapter dropdown
     6.  Chapter key band
     7.  Page grid, running head, breadcrumbs, headings
     8.  Application (context) box
     9.  Ads (fixed sizes — no layout shift)
     10. Prev / next
     11. Manual sheet
     12. Sidebar
     13. Chapter lists (sidebar, dropdown, full index)
     14. Home — make index
     15. Make, group and search — model tables
     16. Prose pages (about, articles, 404)
     17. Footer
     18. Donation popup and buttons
     19. Anchor ad
     20. Staging placeholders
     21. Utilities
     22. Responsive
================================================================ */


/* ----------------------------------------------------------------
   1. Fonts
---------------------------------------------------------------- */
@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/archivo-var-latin.woff2') format('woff2');
    font-weight: 400 800;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/fonts/plexmono-400-latin.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/fonts/plexmono-600-latin.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
/* Metric-matched fallback so the swap doesn't reflow text */
@font-face {
    font-family: 'Archivo Fallback';
    src: local('Arial');
    size-adjust: 103%;
    ascent-override: 88%;
    descent-override: 22%;
}


/* ----------------------------------------------------------------
   2. Tokens
---------------------------------------------------------------- */
:root {
    /* Sheet and ink */
    --sheet:    #FBFBF8;   /* drafting sheet (page ground)  */
    --grid:     #E2E6E0;   /* drafting grid lines           */
    --paper:    #FFFFFF;   /* panels, manual sheet          */
    --ink:      #16181B;   /* text, rules, primary actions  */
    --muted:    #565C62;   /* secondary text (7.0:1 on paper) */
    --rule:     #B7BBB6;   /* borders, dividers             */
    --hair:     #E4E5E1;   /* light row dividers            */

    /* Chapter colour groups — all carry white text at AA except elec (ink text) */
    --c-diag:   #0F7C7A;
    --c-maint:  #2E7D32;
    --c-eng:    #C2410C;
    --c-trans:  #A15C00;
    --c-brake:  #B42318;
    --c-elec:   #F2B233;
    --c-steer:  #5C7A1F;
    --c-hvac:   #2B6E8F;
    --c-body:   #4E5D6C;
    --c-gen:    #16181B;

    /* Current section colour — overridden by body.sec-* */
    --sec:      var(--c-gen);
    --sec-ink:  #FFFFFF;

    --f-ui:     'Archivo', 'Archivo Fallback', 'Arial Narrow', Arial, sans-serif;
    --f-mono:   'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --max:      1240px;
    --side:     300px;
    --gutter:   24px;
    --focus:    0 0 0 3px var(--paper), 0 0 0 6px var(--ink);
}

body.sec-diag  { --sec: var(--c-diag); }
body.sec-maint { --sec: var(--c-maint); }
body.sec-eng   { --sec: var(--c-eng); }
body.sec-trans { --sec: var(--c-trans); }
body.sec-brake { --sec: var(--c-brake); }
body.sec-elec  { --sec: var(--c-elec); --sec-ink: var(--ink); }
body.sec-steer { --sec: var(--c-steer); }
body.sec-hvac  { --sec: var(--c-hvac); }
body.sec-body  { --sec: var(--c-body); }

/* Group colour utility: .g-brake etc. sets --g for any element */
.g-diag  { --g: var(--c-diag); }
.g-maint { --g: var(--c-maint); }
.g-eng   { --g: var(--c-eng); }
.g-trans { --g: var(--c-trans); }
.g-brake { --g: var(--c-brake); }
.g-elec  { --g: var(--c-elec); --g-ink: var(--ink); }
.g-steer { --g: var(--c-steer); }
.g-hvac  { --g: var(--c-hvac); }
.g-body  { --g: var(--c-body); }
.g-gen   { --g: var(--c-gen); }


/* ----------------------------------------------------------------
   3. Reset and base
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--f-ui);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink);
    background-color: var(--sheet);
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 24px 24px;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }

a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: none; box-shadow: var(--focus); }

button, input { font: inherit; color: inherit; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 1000;
    background: var(--ink); color: #fff; padding: 10px 14px; text-decoration: none;
}
.skip-link:focus { top: 8px; }


/* ----------------------------------------------------------------
   4. Header, brand, search
---------------------------------------------------------------- */
.hdr {
    background: var(--paper);
    border-bottom: 3px solid var(--ink);
}
.hdr__in {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.brand {
    display: flex;
    align-items: baseline;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}
.brand__name {
    font-weight: 800;
    font-stretch: 70%;
    font-size: 1.625rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .01em;
}
.brand__tag {
    font-family: var(--f-mono);
    font-size: .6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.makechip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 20px;
    border-left: 1px solid var(--rule);
    min-height: 44px;
    text-decoration: none;
    flex-shrink: 0;
}
.makechip img { width: 56px; height: 40px; object-fit: contain; }
.makechip span {
    font-weight: 700;
    font-stretch: 75%;
    font-size: 1.125rem;
    text-transform: uppercase;
}

.hsearch, .msearch {
    display: flex;
    border: 2px solid var(--ink);
    background: var(--paper);
}
.hsearch { margin-left: auto; width: min(360px, 34vw); }
.hsearch input, .msearch input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    font-size: .9375rem;
}
.hsearch input:focus-visible, .msearch input:focus-visible { box-shadow: none; outline: 2px solid var(--ink); outline-offset: -4px; }
.hsearch button, .msearch button, .side-search button {
    border: 0;
    background: var(--ink);
    color: #fff;
    padding: 0 16px;
    min-height: 44px;
    font-weight: 700;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
}
.msearch { display: none; margin-bottom: 14px; }


/* ----------------------------------------------------------------
   5. Navigation and chapter dropdown
---------------------------------------------------------------- */
.nav {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav__in {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 calc(var(--gutter) - 14px);
    display: flex;
    gap: 2px;
}
.nav__btn {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 14px;
    font-weight: 650;
    font-stretch: 85%;
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    list-style: none;
}
.nav__btn:hover { border-bottom-color: var(--ink); }
.nav-menu { position: relative; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after { content: '▾'; margin-left: 6px; font-size: .75rem; }
.nav-menu[open] > summary { border-bottom-color: var(--sec); }
.nav-menu__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: min(380px, calc(100vw - 32px));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    background: var(--paper);
    border: 2px solid var(--ink);
    padding: 6px 12px;
    z-index: 200;
}


/* ----------------------------------------------------------------
   6. Chapter key band — every chapter of this manual, in its colour
---------------------------------------------------------------- */
.key {
    display: flex;
    height: 8px;
    background: var(--ink);
    position: relative;
    z-index: 2;
}
.key__seg {
    flex: 1;
    display: block;
    background: var(--g);
    position: relative;
}
.key a.key__seg:hover { box-shadow: inset 0 -3px 0 var(--ink); }
.key__seg.is-current { flex: 3; }
.key__seg.is-current::after {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 8px;
    background: var(--g);
    color: var(--g-ink, #fff);
    font-family: var(--f-mono);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 8px 3px;
    white-space: nowrap;
}


/* ----------------------------------------------------------------
   7. Page grid, running head, breadcrumbs, headings
---------------------------------------------------------------- */
.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 18px var(--gutter) 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side);
    gap: 28px;
    align-items: start;
}
.main { min-width: 0; }

.runhead {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;           /* clears the key band's current-chapter label */
    padding-bottom: 6px;
    border-bottom: 2px solid var(--ink);
    font-family: var(--f-mono);
    font-size: .71875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.crumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    font-size: .84375rem;
    color: var(--muted);
    margin-bottom: 10px;
}
.crumbs li + li::before { content: '/'; color: var(--rule); margin: 0 8px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }

.eyebrow {
    display: inline-block;
    background: var(--g);
    color: var(--g-ink, #fff);
    font-family: var(--f-mono);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 10px;
    margin: 2px 0 8px;
}
.h1 {
    font-weight: 800;
    font-stretch: 72%;
    font-size: 2.5rem;
    line-height: 1.02;
    letter-spacing: -.005em;
    text-transform: uppercase;
    text-wrap: balance;
    margin-bottom: 8px;
}
.intro {
    color: var(--muted);
    max-width: 66ch;
    margin-bottom: 16px;
}


/* ----------------------------------------------------------------
   8. Application (context) box — make, model, engine, year, section
---------------------------------------------------------------- */
.appl {
    display: flex;
    flex-wrap: wrap;
    background: var(--paper);
    border: 2px solid var(--ink);
    margin: 4px 0 16px;
}
.appl > div {
    padding: 6px 12px 7px;
    border-right: 1px solid var(--rule);
    min-width: 0;
}
.appl > div:last-child { border-right: 0; }
.appl__wide { flex: 1 1 220px; }
.appl__sec {
    border-left: 8px solid var(--sec);
    background: color-mix(in srgb, var(--sec) 10%, var(--paper));
}
.appl dt {
    font-family: var(--f-mono);
    font-size: .65625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.appl dd {
    font-weight: 600;
    font-size: .90625rem;
    overflow-wrap: anywhere;
}


/* ----------------------------------------------------------------
   9. Ads — every slot has a fixed box so nothing shifts
---------------------------------------------------------------- */
/* min-height reserves the slot before the ad loads. Ads are never clipped
   (AdSense policy), so an unusually tall fill can still grow the box. */
.ad-wrap { display: grid; }
.ad-wrap--leaderboard { min-height: 90px; max-width: 728px; width: 100%; margin: 0 auto 16px; }
.ad-wrap--sidebar     { min-height: 250px; }
.ad-wrap--mid         { min-height: 250px; margin: 8px 0; }
.ad-wrap > .ad-unit   { min-height: inherit; }


/* ----------------------------------------------------------------
   10. Prev / next
---------------------------------------------------------------- */
.pn {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.pn--bottom { margin: 12px 0 0; }
.prev-btn, .next-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border: 2px solid var(--ink);
    background: var(--paper);
    font-weight: 700;
    font-stretch: 85%;
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-decoration: none;
}
.next-btn { margin-left: auto; background: var(--ink); color: #fff; }
.prev-btn:hover { background: var(--hair); }
.next-btn:hover { background: #33373C; }
.prev-btn small, .next-btn small {
    font-family: var(--f-mono);
    font-weight: 400;
    font-size: .6875rem;
    letter-spacing: 0;
    text-transform: none;
    opacity: .85;
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ----------------------------------------------------------------
   11. Manual sheet — frames the original 918 × 1188 page
---------------------------------------------------------------- */
.sheet {
    position: relative;
    background: var(--paper);
    border: 2px solid var(--ink);
    outline: 1px solid var(--ink);
    outline-offset: 5px;
    margin: 6px;
    padding: 14px 48px 16px 16px;
}
.sheet__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--f-mono);
    font-size: .6875rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 6px;
    margin-bottom: 10px;
}
.sheet__tab {
    position: absolute;
    right: -2px;
    top: 120px;
    width: 34px;
    padding: 14px 0;
    background: var(--sec);
    color: var(--sec-ink);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-stretch: 75%;
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.sheet__tab b { font-family: var(--f-mono); font-weight: 600; }

/* The viewport keeps the page's aspect ratio before JS runs (no CLS).
   site.js scales the inner wrapper to the column width; Panzoom acts
   on the #pageN-div itself, so the two transforms never fight. */
.manual-viewport {
    position: relative;
    width: 100%;
    max-width: 918px;
    aspect-ratio: 918 / 1188;
    overflow: hidden;
    background: #fff;
    touch-action: pan-y pinch-zoom;
}
.manual-scaler {
    position: absolute;
    top: 0;
    left: 0;
    width: 918px;
    transform-origin: top left;
}
.manual-scaler > div { background: #fff; }
.manual-scaler img { max-width: none; height: auto; display: block; }
.manual-viewport.is-zoomed { cursor: grab; }
/* Flowing manuals (Vauxhall TIS, VAG): real responsive text. Their own
   <FONT> sizes are kept, but capped so 18pt titles don't dwarf the column. */
.manual-flow {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #111;
    overflow-x: auto;
    overflow-wrap: break-word;
}
.manual-flow p, .manual-flow div { margin: 0 0 .5em; }
.manual-flow font { font-size: min(1.0625rem, 100%) !important; }
.manual-flow font[style*="18pt"], .manual-flow .titel-h-kap { display: block; font-size: 1.375rem !important; font-weight: 700; line-height: 1.25; }
.manual-flow table { border-collapse: collapse; max-width: 100%; width: auto !important; }
.manual-flow td, .manual-flow th { vertical-align: top; padding: 2px 6px 2px 0; }
.manual-flow img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
.manual-flow a { color: inherit; }

.manual-hint {
    font-family: var(--f-mono);
    font-size: .6875rem;
    color: var(--muted);
    margin-top: 8px;
}


/* ----------------------------------------------------------------
   11b. Amazon blocks — "Parts & tools for this job" and sidebar list.
   Styled as part of the manual (an FSM special-tools table), never as
   an ad, and kept away from AdSense units.
---------------------------------------------------------------- */
.aff--panel {
    margin-top: 22px;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-top: 8px solid var(--sec);
}
.aff__h {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 12px;
    background: var(--ink);
    color: #fff;
    padding: 9px 14px;
    font-size: .9375rem;
    font-weight: 800;
    font-stretch: 75%;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.aff__h small {
    font-family: var(--f-mono);
    font-weight: 400;
    font-size: .6875rem;
    letter-spacing: .02em;
    text-transform: none;
    opacity: .9;
}
.aff__staging {
    font-family: var(--f-mono);
    font-size: .625rem;
    letter-spacing: .1em;
    padding: 1px 6px;
    background: repeating-linear-gradient(135deg, var(--c-elec) 0 6px, var(--ink) 6px 12px);
    color: #fff;
    text-shadow: 0 0 2px var(--ink);
}
.aff__list { list-style: none; }
.aff--panel li {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--rule);
    min-height: 60px;
}
.aff__tag {
    font-family: var(--f-mono);
    font-size: .65625rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-align: center;
    padding: 3px 0;
    color: #fff;
    background: var(--c-body);
}
.aff__tag--part  { background: var(--c-brake); }
.aff__tag--tool  { background: var(--c-diag); }
.aff__tag--fluid { background: var(--c-hvac); }
.aff__tag--book  { background: var(--c-trans); }
.aff--panel .aff__link { display: grid; text-decoration: none; min-height: 44px; align-content: center; }
.aff--panel .aff__link strong { font-size: .9375rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.aff--panel .aff__link:hover strong { text-decoration-thickness: 2px; }
.aff__q { font-size: .78125rem; color: var(--muted); }
.aff__go { font-weight: 700; font-size: .8125rem; white-space: nowrap; }
.aff__disc { font-size: .75rem; color: var(--muted); padding: 8px 14px 10px; margin: 0; }
.aff--mini .aff__sub { font-size: .8125rem; color: var(--muted); margin-bottom: 4px; }
.aff--mini li a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--hair); font-size: .875rem; font-weight: 600; }
.aff--mini .aff__disc { padding: 8px 0 0; }


/* ----------------------------------------------------------------
   12. Sidebar
---------------------------------------------------------------- */
.side { display: grid; gap: 18px; align-content: start; }
.sbox {
    background: var(--paper);
    border-top: 3px solid var(--ink);
    padding: 12px 14px 14px;
}
.sbox__h {
    display: block;
    font-family: var(--f-mono);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}
.side-search__row { display: flex; border: 2px solid var(--ink); }
.side-search input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border: 0;
    padding: 0 10px;
    background: transparent;
}
.side-search input:focus-visible { box-shadow: none; outline: 2px solid var(--ink); outline-offset: -4px; }
.donate p { font-size: .875rem; color: var(--muted); }
.donate a { color: var(--ink); }


/* ----------------------------------------------------------------
   13. Chapter lists — sidebar, dropdown and the full index page
---------------------------------------------------------------- */
.chap { list-style: none; }
.chap a, .chap span.chap__row {
    display: grid;
    grid-template-columns: 8px 26px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
    font-size: .875rem;
    line-height: 1.3;
    text-decoration: none;
    border-bottom: 1px solid var(--hair);
}
.chap li:last-child a { border-bottom: 0; }
.chap i { align-self: stretch; background: var(--g); }
.chap b { font-family: var(--f-mono); font-weight: 400; font-size: .75rem; color: var(--muted); }
.chap a:hover { background: color-mix(in srgb, var(--g) 8%, var(--paper)); }
.chap li.is-current a {
    font-weight: 700;
    background: color-mix(in srgb, var(--g) 14%, var(--paper));
}
.chap li.is-current b { color: var(--ink); font-weight: 600; }

/* Full chapter index (/…/fullindex/) */
.chap--index {
    background: var(--paper);
    border: 2px solid var(--ink);
    columns: 2 300px;
    column-gap: 0;
    column-rule: 1px solid var(--rule);
    padding: 4px 0;
}
.chap--index li { break-inside: avoid; padding: 0 14px; }
.chap--index a { font-size: 1rem; min-height: 52px; }
.legend-groups { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }


/* ----------------------------------------------------------------
   14. Home — make index (table of contents)
---------------------------------------------------------------- */
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px 0 0;
    background: var(--paper);
    border: 1px solid var(--rule);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}
.chip i { width: 10px; align-self: stretch; background: var(--g, var(--ink)); }
.chip[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
span.chip { cursor: default; }

.alpha { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 14px; }
.alpha a {
    min-width: 34px;
    min-height: 34px;
    display: grid;
    place-items: center;
    background: var(--paper);
    border: 1px solid var(--rule);
    font-family: var(--f-mono);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
}
.alpha a:hover { border-color: var(--ink); }

.toc {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 28px;
    list-style: none;
}
.toc li { min-width: 0; }
.toc li[hidden] { display: none; }
.toc a {
    display: grid;
    grid-template-columns: 6px 56px minmax(0, auto) 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    background: color-mix(in srgb, var(--sheet) 88%, transparent);
}
.toc a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.toc s { align-self: stretch; margin: 9px 0; background: var(--o); }
.toc img { width: 56px; height: 38px; object-fit: contain; }
.toc b { font-weight: 700; font-stretch: 85%; font-size: 1rem; line-height: 1.2; }
.toc i { border-bottom: 1.5px dotted var(--rule); margin-top: 8px; }
.toc em {
    font-style: normal;
    font-family: var(--f-mono);
    font-size: .6875rem;
    color: var(--muted);
}
.toc__ad { grid-column: 1 / -1; list-style: none; }

/* Country-of-origin colours (home) */
.o-usa     { --o: #2B6E8F; --g: #2B6E8F; }
.o-japan   { --o: #B42318; --g: #B42318; }
.o-germany { --o: #F2B233; --g: #F2B233; }
.o-uk      { --o: #2E7D32; --g: #2E7D32; }
.o-europe  { --o: #0F7C7A; --g: #0F7C7A; }
.o-korea   { --o: #C2410C; --g: #C2410C; }


/* ----------------------------------------------------------------
   15. Make, group and search — model tables
---------------------------------------------------------------- */
.mline { margin-bottom: 24px; scroll-margin-top: 60px; }
.mline__h {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border-bottom: 3px solid var(--ink);
    padding-bottom: 4px;
    font-size: 1.375rem;
    font-weight: 800;
    font-stretch: 75%;
    text-transform: uppercase;
}
.mline__h a { text-decoration: none; }
.mline__h a:hover { text-decoration: underline; }
.mline__h small {
    font-family: var(--f-mono);
    font-size: .71875rem;
    font-weight: 400;
    color: var(--muted);
    text-transform: none;
    white-space: nowrap;
}
.mt { width: 100%; border-collapse: collapse; background: var(--paper); font-size: .90625rem; }
.mt th {
    text-align: left;
    font-family: var(--f-mono);
    font-size: .65625rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 6px 10px;
    border-bottom: 1px solid var(--rule);
}
.mt td { padding: 0 10px; height: 46px; border-bottom: 1px solid var(--hair); }
.mt td a { display: flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
.mt tr:hover td { background: color-mix(in srgb, var(--ink) 4%, var(--paper)); }
.mt tr:hover td a { text-decoration: underline; }
.mt .mt__y { width: 1%; white-space: nowrap; }
.mt td.mt__make { color: var(--muted); font-size: .84375rem; white-space: nowrap; }

.yr {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: .78125rem;
    font-weight: 600;
    padding: 2px 8px;
    color: #fff;
    background: var(--ink);
    white-space: nowrap;
}
.yr.d1970 { background: var(--c-body); }
.yr.d1980 { background: var(--c-trans); }
.yr.d1990 { background: var(--c-diag); }
.yr.d2000 { background: var(--c-brake); }
.yr.d2010 { background: var(--c-maint); }
.chip.d1970 { --g: var(--c-body); }
.chip.d1980 { --g: var(--c-trans); }
.chip.d1990 { --g: var(--c-diag); }
.chip.d2000 { --g: var(--c-brake); }
.chip.d2010 { --g: var(--c-maint); }

.make-description, .make-auto-description { max-width: 70ch; color: var(--muted); margin-bottom: 18px; }
.make-description p, .make-auto-description p { margin-bottom: .75rem; }

.search-page-form { display: flex; border: 2px solid var(--ink); background: var(--paper); margin-bottom: 16px; max-width: 640px; }
.search-page-form input { flex: 1; min-width: 0; min-height: 52px; border: 0; padding: 0 14px; font-size: 1.0625rem; background: transparent; }
.search-page-form input:focus-visible { box-shadow: none; outline: 2px solid var(--ink); outline-offset: -4px; }
.search-page-form button { border: 0; background: var(--ink); color: #fff; padding: 0 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.search-result-count, .search-no-results { margin-bottom: 12px; }


/* ----------------------------------------------------------------
   16. Prose pages — about, articles, features, 404
---------------------------------------------------------------- */
.prose {
    background: var(--paper);
    border-top: 3px solid var(--ink);
    padding: 20px 24px;
    max-width: 76ch;
}
.prose h2, .prose h3 {
    font-weight: 800;
    font-stretch: 78%;
    text-transform: uppercase;
    font-size: 1.25rem;
    line-height: 1.15;
    margin: 1.4em 0 .4em;
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 1rem; }
.prose li { margin-bottom: .35rem; }
.prose img { margin: 1rem 0; }
.prose table { border-collapse: collapse; margin: 1rem 0; display: block; overflow-x: auto; }
.prose td, .prose th { border: 1px solid var(--rule); padding: 6px 10px; }


/* ----------------------------------------------------------------
   17. Footer
---------------------------------------------------------------- */
.ftr { background: var(--paper); margin-top: 24px; }
.ftr .key { height: 6px; }
.ftr__in {
    max-width: var(--max);
    margin: 0 auto;
    padding: 18px var(--gutter) 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: .8125rem;
    color: var(--muted);
}
.ftr__in a { color: var(--ink); }
.ftr__in p { flex-basis: 100%; margin: 0; }


/* ----------------------------------------------------------------
   18. Donation popup and buttons
---------------------------------------------------------------- */
.popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.popup[hidden] { display: none; }
.popup__overlay { position: absolute; inset: 0; background: rgba(22, 24, 27, .6); }
.popup__box {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-top: 8px solid var(--c-elec);
    padding: 22px 22px 18px;
}
.popup__title {
    font-weight: 800;
    font-stretch: 75%;
    text-transform: uppercase;
    font-size: 1.375rem;
    line-height: 1.1;
    margin: 0 36px 10px 0;
}
.popup__box p { font-size: .9375rem; color: var(--muted); margin-bottom: 14px; }
.popup__close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    font-size: 1.125rem;
    cursor: pointer;
}
.popup__divider { border: 0; border-top: 1px solid var(--rule); margin: 16px 0; }
.popup__share-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.popup__share-links a { min-height: 44px; display: inline-flex; align-items: center; }

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    margin-bottom: 8px;
    border: 2px solid var(--ink);
    font-weight: 700;
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-decoration: none;
    cursor: pointer;
}
.btn--ink    { background: var(--ink); color: #fff; }
.btn--paypal { background: #003087; border-color: #003087; color: #fff; }
.btn--kofi   { background: var(--paper); color: var(--ink); }
.btn--ink:hover    { background: #33373C; }
.btn--paypal:hover { background: #00205F; }
.btn--kofi:hover   { background: var(--hair); }


/* ----------------------------------------------------------------
   19. Anchor ad — mobile only
---------------------------------------------------------------- */
.anchor-ad {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background: var(--paper);
    border-top: 2px solid var(--ink);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    min-height: 58px;
}
.anchor-ad__close {
    position: absolute;
    top: -30px;
    right: 6px;
    width: 30px;
    height: 30px;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-bottom: 0;
    cursor: pointer;
    font-size: .875rem;
}
.anchor-ad .ad-unit { height: 50px; max-width: 320px; margin: 0 auto; }


/* ----------------------------------------------------------------
   20. Staging placeholders (AdSense::placeholder)
---------------------------------------------------------------- */
.ad-placeholder {
    height: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(135deg, #E6E8E3 0 8px, #F0F1EC 8px 16px);
    border: 1px solid var(--rule);
    font-family: var(--f-mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}


/* ----------------------------------------------------------------
   21. Utilities
---------------------------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.not-found { font-size: 1.0625rem; }


/* ----------------------------------------------------------------
   22. Responsive
---------------------------------------------------------------- */
@media (max-width: 1100px) {
    .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    :root { --gutter: 16px; }

    .hdr__in { min-height: 58px; gap: 12px; }
    .brand__name { font-size: 1.25rem; }
    .brand__tag, .hsearch { display: none; }
    .makechip { margin-left: auto; padding-left: 12px; }
    .makechip span { display: none; }
    .makechip img { width: 48px; height: 36px; }

    .nav__in { padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
    .nav__in::-webkit-scrollbar { display: none; }
    .nav__btn { padding: 0 11px; }
    .nav-menu { position: static; }
    .nav-menu__dropdown { position: fixed; left: 16px; right: 16px; top: auto; width: auto; margin-top: 2px; }

    .wrap { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 14px; }
    .runhead { font-size: .65625rem; }
    .runhead span:last-child { display: none; }
    .msearch { display: flex; }
    .side-search { display: none; }

    .h1 { font-size: 1.75rem; }
    .no-msearch .msearch { display: none; }

    /* Long breadcrumb trails: keep make, model and the last crumb; the
       full trail is still in the HTML and the BreadcrumbList JSON-LD. */
    .crumbs--long li:not(:nth-child(-n+2)):not(:last-child) { display: none; }
    .crumbs--long li:last-child::before { content: '/ … /'; }
    .appl > div { flex: 1 1 45%; border-bottom: 1px solid var(--rule); }
    .appl > div.appl__wide { flex-basis: 100%; border-bottom: 0; }

    .ad-wrap--leaderboard { min-height: 100px; max-width: 336px; }

    .sheet { margin: 0; outline: 0; padding: 6px; }
    .sheet__head, .sheet__tab { display: none; }
    .prev-btn, .next-btn { flex: 1; justify-content: center; }
    .prev-btn small, .next-btn small { display: none; }

    .toc { grid-template-columns: minmax(0, 1fr); }
    .toc a { grid-template-columns: 6px 48px minmax(0, auto) 1fr auto; }

    .chap--index { columns: 1; }

    .anchor-ad { display: block; }
    body.has-anchor { padding-bottom: 64px; }

    /* Mobile order after the content: Amazon list, donate, ad, chapters.
       The donate box always separates an Amazon block from the ad; on
       manual pages the sidebar Amazon list is hidden (the panel ends main). */
    .side { display: flex; flex-direction: column; }
    .side .side-aff { order: 1; }
    .side .donate { order: 2; }
    .side .ad-wrap--sidebar { order: 3; }
    .side .side-chapters { order: 4; }
    .side-aff--desktop { display: none; }
    .aff--panel li { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 12px; }
    .aff__tag { display: none; }
    .key__seg.is-current::after { font-size: .625rem; }
}

@media (max-width: 420px) {
    .mt .mt__make { display: none; }
    .prose { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
    .hdr, .nav, .key, .side, .ftr, .ad-wrap, .anchor-ad, .pn, .msearch { display: none !important; }
    body { background: #fff; }
    .wrap { display: block; }
}