/* How the pages look, and why. docs/DESIGN.md has the reasons in full.

   1. Learning first, warnings one tap away. A page shows titles and
      opens detail on request, never more than two levels deep.
   2. Every pair of text and background reaches 4.5:1 contrast, and marks
      that carry meaning reach 3:1. A palette colour that cannot carry text
      is used only as a fill, a line or a dot.
   3. Red means a warning and nothing else. Indigo is the site's own colour
      and its links. Sand marks things to tap. Orange is a good find and
      the answer you chose.
   4. Phone first, and the screen used on desktop. Running text stays about
      70 characters wide; cards and menus fill the width beside it. Light
      and dark follow the reader's own setting.
   5. The same thing looks the same everywhere: one card, one chip, one menu.

   The palette is Shifterati's (decision 0052): #4E598C indigo, #FFFFFF
   white, #F9C784 sand, #FCAF58 apricot and #FF8C42 orange, with ink, deep
   indigo, night, periwinkle and a warning red added so every pair passes
   rule 2. White text never sits on the oranges; ink does. */

/* Archivo for headings and Atkinson Hyperlegible for reading, both under
   the SIL Open Font Licence, served from the site so no reader's browser
   asks another company for them (rule 8). */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 600 900; font-stretch: 100% 125%;
  font-display: swap;
  src: url("/static/fonts/archivo.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/atkinson-hyperlegible-400.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/atkinson-hyperlegible-700.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/atkinson-hyperlegible-400-italic.woff2") format("woff2");
}

:root {
  --page: #f6f7fb;       /* white leaning to indigo, so white cards stand off it */
  --panel: #ffffff;
  --text: #1b1f33;       /* ink, 15.2:1 on the page */
  --muted: #5e6680;      /* 5.3:1 on the page, 5.7:1 on a card */
  --line: #d9dcea;
  --link: #4e598c;       /* indigo, 6.3:1 on the page */
  --brand: #4e598c;      /* indigo */
  --brand-deep: #2e3561; /* deep indigo */
  --brand-night: #1f2447;
  --on-brand: #ffffff;   /* white on indigo, 6.7:1; on the deep indigo, 11.7:1 */
  --chip: #f9c784;       /* sand, with --on-chip text */
  --on-chip: #1b1f33;    /* ink, 10.5:1 on sand */
  --band: #fcaf58;       /* apricot, with --on-chip text, 8.8:1 */
  --good: #b54708;       /* orange darkened for text and edges, 5.1:1 on the page */
  --chosen: #ff8c42;     /* orange, a fill only, with --on-chosen text */
  --on-chosen: #1b1f33;  /* ink, 7.0:1 on orange */
  --alarm: #b3261e;      /* warning red, 6.1:1 on the page */
  --warn: #b3261e;
  --on-alarm: #ffffff;   /* 6.5:1 on the warning red */
  --pressed: inset 0 2px 5px rgb(27 31 51 / 35%);
  --shadow: 0 1px 2px rgb(27 31 51 / 8%), 0 4px 14px rgb(27 31 51 / 8%);
  --shadow-lift: 0 2px 4px rgb(27 31 51 / 10%), 0 10px 24px rgb(27 31 51 / 14%);
  --radius: 14px;
  --display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --reading: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #14172a;     /* night */
    --panel: #1e2238;
    --text: #ffffff;     /* 17.7:1 */
    --muted: #9aa0bd;    /* 6.9:1 on the page, 6.1:1 on a card */
    --line: #333957;
    --link: #a9b1e0;     /* periwinkle, 7.5:1 on a card; indigo itself is 2.6:1 here */
    --brand: #2e3561;    /* deep indigo, white on it 11.7:1 */
    --brand-deep: #1f2447;
    --brand-night: #14172a;
    --on-brand: #ffffff;
    --chip: #f9c784;     /* sand stays sand, 11.4:1 against the night page */
    --on-chip: #1b1f33;
    --band: #fcaf58;
    --good: #ff8c42;     /* orange itself, 6.8:1 on a card */
    --chosen: #ff8c42;
    --on-chosen: #1b1f33;
    --alarm: #ff6b7a;    /* warning red lightened, 5.7:1 on a card */
    --warn: #ff6b7a;
    --on-alarm: #1b1f33;
    --pressed: inset 0 2px 5px rgb(0 0 0 / 45%);
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 14px rgb(0 0 0 / 30%);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / 35%), 0 10px 24px rgb(0 0 0 / 45%);
  }
}

/* --- The frame ----------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 17px/1.55 var(--reading);
}
ul.stats, ul.year-chips, ol.eras, .photo-slot { font-variant-numeric: tabular-nums; }
/* Atkinson slashes its zero, which helps in codes such as 2TR-FE but makes
   every year look struck through. Years and counts take Archivo's plain zero. */
ul.stats strong, ul.year-chips, ol.eras, .photo-slot, .years, .card-meta, .year-nav a,
.site-counts strong { font-family: var(--display); }

.wrap { max-width: 76rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

.appbar { background: var(--brand); color: var(--on-brand); }
.appbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--on-brand); font-weight: 800; letter-spacing: -0.01em; text-decoration: none;
  /* The wordmark: the name in wide lowercase beside the gate S. */
  font-family: var(--display); font-stretch: 125%; text-transform: lowercase; font-size: 1.1rem;
}
.mark {
  display: block; width: 32px; height: 32px; border-radius: 9px;
  /* A thin white edge, so the deep tile still stands out on the dark app bar,
     which is the same deep indigo. */
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 45%);
}
.appnav { display: flex; gap: 4px; }
.appnav a {
  color: var(--on-brand); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  padding: 6px 12px; border-radius: 999px;
}
.appnav a:hover, .appnav a:focus-visible { background: var(--brand-deep); }
.brand { white-space: nowrap; }
/* Three links and the name fit one line on a phone, and wrap to two below that. */
@media (max-width: 360px) { .appbar-inner { padding-top: 4px; padding-bottom: 6px; } }
@media (max-width: 420px) { .appbar-inner { flex-wrap: wrap; } .appnav { gap: 0; } .appnav a { padding: 6px 7px; } }

main { padding-bottom: 48px; }
.site-foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; padding-top: 8px; padding-bottom: 32px; }

a { color: var(--link); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--display); font-stretch: 112%; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); font-weight: 800; margin: 0.4rem 0 0.6rem; }
h2 { font-size: 1.4rem; font-weight: 800; margin-top: 2.2rem; }
h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 0.25rem; }
p, li, dd { max-width: 70ch; }

.lead { font-size: 1.12rem; }
.years, .covers, .aka, .label, .cite, .quiet, .evidence, .count { color: var(--muted); }
.years, .covers { font-weight: 400; font-size: 0.9em; letter-spacing: 0; }
.years { white-space: nowrap; }
.label, .cite { font-size: 0.85rem; }
.cite { display: block; }
.crumbs { font-size: 0.95rem; color: var(--muted); margin: 1.2rem 0 0; font-weight: 600; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.draft {
  background: var(--panel);
  border-left: 4px solid var(--alarm);
  border-radius: 6px;
  padding: 8px 12px;
}

/* --- Pieces used on every page ---------------------------------------- */

/* Tags: outlined pills that lead to the models sharing the tag. */
ul.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0.6rem 0; }
ul.tags a {
  display: block; padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--text); font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
ul.tags a:hover, ul.tags a:focus-visible { border-color: var(--link); color: var(--link); }
ul.tags .count { font-weight: 400; }

/* Numbers that sum a page up at a glance. */
ul.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 10px;
  list-style: none; padding: 0; margin: 1.2rem 0;
}
ul.stats li {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; color: var(--muted); font-size: 0.9rem;
}
/* A number that leads to its section reads like the others, and shows it can be tapped. */
ul.stats li:has(> a) { padding: 0; }
ul.stats a { display: block; padding: 10px 14px; color: inherit; text-decoration: none; border-radius: var(--radius); }
ul.stats a:hover, ul.stats a:focus-visible { box-shadow: 0 0 0 2px var(--link); }
ul.stats strong { display: block; color: var(--link); font-size: 1.8rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }

/* Where a photo will go. A tile in the site's colours with a faint stripe,
   and the name on it in white, 11.7:1 on the deep indigo. */
.photo-slot {
  display: flex; align-items: flex-end;
  aspect-ratio: 16 / 9; border-radius: calc(var(--radius) - 4px); overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 6%) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, var(--brand-deep), var(--brand-night));
  color: var(--on-brand);
}
.photo-slot span {
  padding: 10px 12px; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.1;
}
.photo-slot.large { aspect-ratio: 5 / 2; }
@media (min-width: 900px) { .photo-slot.large { aspect-ratio: 16 / 9; } }
.photo-slot.large span { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); padding: 16px 18px; }
.photo-slot.small span { font-size: 1.1rem; }

/* A photo takes the tile's frame, cropped to fit it, so a page looks the
   same with a photo or without. Its credit sits under it in small muted
   type, because the licence asks for it to be shown, not to stand out. */
.shown-photo { margin: 0; }
.shown-photo img, .photo-frame img {
  display: block; width: 100%; height: auto;
  border-radius: calc(var(--radius) - 4px); background: var(--brand-deep);
}
.shown-photo.large img, .shown-photo.small img, .photo-frame img { aspect-ratio: 16 / 9; object-fit: cover; }
.shown-photo.large img { aspect-ratio: 5 / 2; }
@media (min-width: 900px) { .shown-photo.large img { aspect-ratio: 16 / 9; } }
.shown-photo figcaption, .card-credit { color: var(--muted); font-size: 0.8rem; margin: 4px 0 0; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 16px; list-style: none; padding: 0; }

/* --- The home, make and tag pages ------------------------------------- */

.hero {
  margin: 0 -16px; padding: 28px 16px 8px;
  background: linear-gradient(180deg, var(--panel), var(--page));
  border-bottom: 1px solid var(--line);
}
.hero h1 { max-width: 18ch; }
/* The full logo on the home page: the mark large beside the wordmark. */
.lockup {
  display: flex; align-items: center; gap: 14px; margin: 0 0 0.6rem;
  font-family: var(--display); font-stretch: 125%; font-weight: 850;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem); letter-spacing: -0.03em; line-height: 1;
  color: var(--text);
}
.lockup img { width: 1.4em; height: 1.4em; flex: none; }
/* The owner's note to the first readers: a panel edged in indigo, never red,
   because it is a greeting and not a warning. */
.welcome {
  max-width: 70ch; margin: 0.5rem 0 1rem; padding: 8px 14px;
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--link);
  border-radius: 6px;
}
.welcome p { margin: 0.4rem 0; }
.hero details > summary, .browse details > summary { font-weight: 700; }
.hero details > summary::after, .browse details > summary::after { content: " ▾"; color: var(--muted); }
.hero details[open] > summary::after, .browse details[open] > summary::after { content: " ▴"; }
.hero details[open] > summary, .browse details[open] > summary { margin-bottom: 0.35rem; }

/* The site's size in one line under the search box, not a row of tiles,
   so the first screen reaches this week's vehicle. */
.site-counts { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font-size: 0.95rem; margin: 0.75rem 0 0; font-variant-numeric: tabular-nums; }
.site-counts strong { color: var(--text); }

/* This week: a strip that scrolls sideways and stops on each card, with the
   next card showing at the edge so a reader sees there is more. The browser
   does the scrolling; there is no script. */
.spotlight h2 { margin-bottom: 0.6rem; }
ol.spotlight-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px;
  list-style: none; padding: 4px 16px 12px; margin: 0 -16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
}
ol.spotlight-strip:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
@media (min-width: 560px) { ol.spotlight-strip { grid-auto-columns: 46%; } }
@media (min-width: 720px) { ol.spotlight-strip { margin: 0 -32px; padding: 4px 32px 12px; scroll-padding-inline: 32px; } }
@media (min-width: 1100px) { ol.spotlight-strip { grid-auto-columns: calc((100% - 36px) / 4); } }
.spotlight-card {
  scroll-snap-align: start; max-width: none;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 8px 12px; box-shadow: var(--shadow);
}
.spotlight-card:first-child { border-color: var(--link); }
.spotlight-card .card-link { display: flex; flex-direction: column; }
.spotlight-card .card-link .photo-slot, .spotlight-card .card-link .photo-frame { margin-bottom: 10px; }
.spotlight-card .card-link .photo-slot, .spotlight-card .card-link .photo-frame img { aspect-ratio: 16 / 9; }
.spotlight-card h3 { font-size: 1.2rem; margin: 0.15rem 0 0; padding: 0 6px; }
.spotlight-label { padding: 0 6px; color: var(--link); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.spotlight-summary { padding: 0 6px; margin-top: 0.35rem; font-size: 0.95rem; }
.spotlight-card .card-flag, .spotlight-card .card-credit { padding: 0 6px; }

.browse h2 { margin-bottom: 0.4rem; }
ul.make-chips a { font-size: 1rem; padding: 6px 14px; }

/* On the home page a card is short: the model, its years and its warnings.
   Its tags and other badges are a tap away. */
ul.model-grid.is-compact { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 12px; }
.model-card.is-compact .card-link h3 { font-size: 1.2rem; }
@media (max-width: 559px) {
  .model-card.is-compact { padding: 6px 6px 8px; }
  .model-card.is-compact .card-link { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .model-card.is-compact .card-link .photo-slot,
  .model-card.is-compact .card-link .photo-frame img { aspect-ratio: 1 / 1; }
  .model-card.is-compact .card-link .photo-slot span { font-size: 0.7rem; padding: 5px; }
  .model-card.is-compact .card-flag, .model-card.is-compact .card-rare { margin: 0.3rem 0 0; padding-left: calc(4.5rem + 12px); }
}
@media (min-width: 720px) { .hero { margin: 0 -32px; padding: 48px 32px 16px; } }

.tag-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 4px 24px; }
.tag-group h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0.6rem 0 0; }

.make h2 a { color: var(--text); text-decoration: none; }
.make h2 a:hover { color: var(--link); text-decoration: underline; }

ul.model-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 16px;
  list-style: none; padding: 0; margin: 0;
}
.model-card {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 8px 12px; box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.model-card:hover, .model-card:focus-within { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.card-link { display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
.card-link .photo-slot, .card-link .photo-frame { margin-bottom: 10px; }
.photo-frame { display: block; }
.card-credit { padding: 0 6px; }
.card-link h3 { font-size: 1.35rem; margin: 0; padding: 0 6px; }
.card-make { padding: 0 6px; color: var(--muted); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.card-meta { padding: 0 6px; color: var(--muted); font-size: 0.9rem; }
.card-link:hover h3 { color: var(--link); text-decoration: underline; }
.model-card ul.tags, .model-card .card-flag { padding: 0 6px; margin-bottom: 0; }
.card-flag { color: var(--warn); font-weight: 700; font-size: 0.88rem; margin: 0.5rem 0 0; }
.card-flag::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px;
  border-radius: 50%; background: var(--alarm); vertical-align: 0.1em;
}

/* On a phone a card lies on its side, so a list of models stays short. */
@media (max-width: 559px) {
  .card-link { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 12px; align-content: start; }
  .card-link .photo-slot, .card-link .photo-frame { grid-row: 1 / span 4; margin-bottom: 0; }
  .card-link .photo-slot, .card-link .photo-frame img { aspect-ratio: 4 / 3; }
  .card-credit { padding: 0; }
  .card-link .photo-slot span { font-size: 0.95rem; padding: 8px; }
  .card-link h3 { font-size: 1.2rem; }
  .card-make, .card-meta, .card-link h3 { padding: 0; }
}

.page-head { margin-bottom: 1rem; }

/* --- A model, a generation, a year ------------------------------------ */

.model-hero { display: grid; gap: 16px; margin-top: 16px; }
.model-hero .crumbs { margin-top: 0; }
@media (min-width: 900px) {
  .model-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: center; margin-top: 28px; }
}

/* Other lines sold under the same name, near the top so a reader who
   arrived at the wrong one moves on quickly. */
.related {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--link);
  border-radius: 10px; padding: 10px 14px; margin-top: 1rem;
}
.related h2 { font-size: 1rem; margin: 0 0 0.3rem; }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { padding: 2px 0; }
.related li > a { font-weight: 700; }

/* The timeline bar: one band per generation, as wide as its years. */
.era-bar { margin: 0.5rem 0 1rem; }
/* Each band starts as wide as its name and shares what is left by its
   years, so a short generation keeps its name whole. When the names do not
   fit on one line, the bands wrap to a second. */
ol.eras {
  display: flex; flex-wrap: wrap; gap: 3px;
  list-style: none; padding: 0; margin: 0;
}
ol.eras > li { flex: 1 0 auto; max-width: none; }
ol.eras a {
  display: block; height: 100%; padding: 8px 8px 7px;
  white-space: nowrap; text-decoration: none;
  background: var(--brand); color: var(--on-brand); font-size: 0.8rem; line-height: 1.25;
}
ol.eras > li:nth-child(even) a { background: var(--band); color: var(--on-chip); }
ol.eras a { border-radius: 4px; }
ol.eras > li:first-child a { border-radius: 10px 4px 4px 10px; }
ol.eras > li:last-child a { border-radius: 4px 10px 10px 4px; }
ol.eras > li:only-child a { border-radius: 10px; }
ol.eras a:hover strong { text-decoration: underline; }
ol.eras span { display: none; }
@media (max-width: 719px) { ol.eras a { padding: 7px 6px 6px; } }
@media (min-width: 720px) { ol.eras span { display: block; } ol.eras a { font-size: 0.88rem; } }
.span-1 { flex-grow: 1; }
.span-2 { flex-grow: 2; }
.span-3 { flex-grow: 3; }
.span-4 { flex-grow: 4; }
.span-5 { flex-grow: 5; }
.span-6 { flex-grow: 6; }
.span-7 { flex-grow: 7; }
.span-8 { flex-grow: 8; }
.span-9 { flex-grow: 9; }
.span-10 { flex-grow: 10; }
.span-11 { flex-grow: 11; }
.span-12 { flex-grow: 12; }
.span-13 { flex-grow: 13; }
.span-14 { flex-grow: 14; }
.span-15 { flex-grow: 15; }
.span-16 { flex-grow: 16; }
.span-17 { flex-grow: 17; }
.span-18 { flex-grow: 18; }
.span-19 { flex-grow: 19; }
.span-20 { flex-grow: 20; }
.span-21 { flex-grow: 21; }
.span-22 { flex-grow: 22; }
.span-23 { flex-grow: 23; }
.span-24 { flex-grow: 24; }
.span-25 { flex-grow: 25; }
.span-26 { flex-grow: 26; }
.span-27 { flex-grow: 27; }
.span-28 { flex-grow: 28; }
.span-29 { flex-grow: 29; }
.span-30 { flex-grow: 30; }
.span-31 { flex-grow: 31; }
.span-32 { flex-grow: 32; }
.span-33 { flex-grow: 33; }
.span-34 { flex-grow: 34; }
.span-35 { flex-grow: 35; }
.span-36 { flex-grow: 36; }
.span-37 { flex-grow: 37; }
.span-38 { flex-grow: 38; }
.span-39 { flex-grow: 39; }
.span-40 { flex-grow: 40; }
.span-41 { flex-grow: 41; }
.span-42 { flex-grow: 42; }
.span-43 { flex-grow: 43; }
.span-44 { flex-grow: 44; }
.span-45 { flex-grow: 45; }

/* Beside the page, on wide screens, the section menu stays in view. */
@media (min-width: 960px) {
  .with-rail { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 40px; }
  .with-rail > .jump {
    position: sticky; top: 16px; align-self: start;
    margin: 2.2rem 0 0; padding: 0; border: 0; overflow: visible;
  }
  .with-rail > .jump ul { flex-direction: column; gap: 6px; white-space: normal; }
  .with-rail > .jump a { border-radius: 10px; padding: 7px 12px; background: var(--panel); }
}

/* The section menu on a phone stays at the top while the reader scrolls,
   so any section is one tap away. It scrolls sideways on its own when it
   is wider than a phone, and never pushes the page wider. */
.jump {
  position: sticky; top: 0; z-index: 1;
  background: var(--page); border-bottom: 1px solid var(--line);
  margin: 0 -16px; padding: 8px 16px; overflow-x: auto;
}
.jump ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.jump a {
  display: block; padding: 4px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; text-decoration: none;
}
.jump a:hover, .jump a:focus-visible { border-color: var(--link); }
section[id] { scroll-margin-top: 56px; }

ul.issues, ul.claims, ul.recalls, ul.years-list { list-style: none; padding: 0; }
ul.issues > li, ul.claims > li, ul.recalls > li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  max-width: 52rem;
}
ul.issues p, ul.claims p, ul.recalls p { margin: 0.35rem 0; }
/* When the recalls were last checked against NHTSA, under the list. Quiet,
   because it is a note on the list rather than a warning. */
.recall-check { max-width: 52rem; }
.recall-check p { margin: 0.35rem 0; }
ul.unlisted { padding-left: 1.25rem; margin: 0.35rem 0; }
li.walk-away { border-color: var(--alarm); border-left-width: 5px; }
.flag { color: var(--warn); font-weight: 700; font-size: 0.9rem; margin-left: 0.25rem; }

dl.options { display: grid; grid-template-columns: 1fr; }
dl.options dt { font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
dl.options dd { margin: 0 0 0.6rem; }
dl.options ul.one-per-line { list-style: none; margin: 0; padding: 0; }
dl.options ul.one-per-line li + li { margin-top: 0.25rem; }
@media (min-width: 720px) {
  dl.options { grid-template-columns: 11rem minmax(0, 1fr); gap: 4px 16px; }
  dl.options dt { padding-top: 0.2rem; }
}

/* Engines: a card each, laid out like a colour tile, with the gearboxes and
   drives that went with it. The code is muted text, and a link to the
   engine's own page when there is one (decision 0057). */
ul.engines {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: 8px;
  list-style: none; padding: 0; margin: 0 0 0.8rem;
}
ul.engines > li {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; max-width: none;
}
ul.engines p { margin: 0; }
.engine-code { color: var(--muted); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
a.engine-code { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.engine-detail { color: var(--muted); }

/* An engine page lists its versions as tiles like the engine cards, each
   reached from a model's engine card by its code, and the models that
   used it as plain links grouped by model. */
ul.versions {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: 8px;
  list-style: none; padding: 0; margin: 0 0 0.8rem;
}
ul.versions > li {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; max-width: none; scroll-margin-top: 72px;
}
ul.versions > li:target { border-color: var(--link); box-shadow: inset 4px 0 0 var(--link); }
ul.versions p { margin: 0; }
ul.versions .used-in { margin-top: 0.4rem; font-size: 0.95rem; }
ul.found-in { list-style: none; padding: 0; display: grid; gap: 10px; }
ul.found-in ul { list-style: none; padding: 0; margin: 0.2rem 0 0; }
ul.engine-list { list-style: none; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
ul.engine-list > li { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
ul.engine-list p { margin: 0.2rem 0 0; }

/* A glossary term named in dossier text (decision 0063): the sentence keeps
   its own colour so a paragraph does not turn into a row of links, and the
   dotted line says there is an explanation one tap away. */
a.term { color: inherit; text-decoration: underline dotted var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a.term:hover, a.term:focus-visible { color: var(--link); text-decoration-style: solid; }
ul.engines dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 0.5rem 0 0; }
ul.engines dt { font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding-top: 0.15rem; }
ul.engines dd { margin: 0; }

/* Paint colours: a tile each, several across. A limited colour carries an
   orange mark, never red, because red is kept for warnings. */
ul.colors {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: 8px;
  list-style: none; padding: 0;
}
ul.colors > li {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; max-width: none;
}
ul.colors > li.is-rare { border-color: var(--good); box-shadow: inset 4px 0 0 var(--good); }
.rare {
  display: block; margin-top: 0.3rem; color: var(--good);
  font-size: 0.85rem; font-weight: 700; text-decoration: none;
}
a.rare:hover, a.rare:focus-visible { text-decoration: underline; }
.rare::before { content: "★ "; }
.card-colors { color: var(--muted); font-size: 0.9rem; }

/* Rare catches: what is rare, why, and a verdict. A good find is orange
   with a star; a bad sign is red, because it is a warning; a mixed one is
   plain. */
ul.rare-catches {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 10px;
  list-style: none; padding: 0;
}
ul.rare-catches > li {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; max-width: none;
}
ul.rare-catches p { margin: 0.3rem 0; }
.verdict { display: block; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
li.verdict-good { border-color: var(--good); box-shadow: inset 4px 0 0 var(--good); }
li.verdict-good .verdict { color: var(--good); }
li.verdict-good .verdict::before { content: "★ "; }
li.verdict-bad { border-color: var(--alarm); box-shadow: inset 4px 0 0 var(--alarm); }
li.verdict-bad .verdict { color: var(--warn); }
.card-rare { color: var(--good); font-weight: 700; font-size: 0.88rem; margin: 0.4rem 0 0; padding: 0 6px; }
.card-rare::before { content: "★ "; }

/* Footnotes: every statement ends with a small number that jumps to the
   Sources list at the foot of the page, so the source stays one tap away
   without a line of links under every item. */
sup.fn { font-size: 0.7em; line-height: 0; margin-left: 1px; font-variant-numeric: tabular-nums; }
sup.fn a { text-decoration: none; font-weight: 700; padding: 0 1px; }
sup.fn a:hover, sup.fn a:focus-visible { text-decoration: underline; }
.thin {
  display: inline-block; margin-left: 6px; padding: 0 8px; vertical-align: 0.1em;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.cited-by { color: var(--muted); font-size: 0.9rem; }
ol.source-list, ul.source-list { padding-left: 1.8rem; font-size: 0.95rem; }
ol.source-list > li, ul.source-list > li { padding: 2px 0; overflow-wrap: anywhere; }
ol.source-list > li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
ol.source-list > li:target { background: var(--panel); outline: 2px solid var(--link); border-radius: 4px; }
ul.facts { padding-left: 1.2rem; }
/* The EPA's ratings: one line each, the carline first, then what it had,
   then the figures, so a phone reads them top to bottom. */
ul.fuel { list-style: none; margin: 0 0 0.6rem; padding: 0; max-width: 52rem; }
ul.fuel li + li { margin-top: 0.6rem; }
ul.fuel .fuel-detail, ul.fuel .fuel-figures { display: block; }
ul.fuel .fuel-detail { color: var(--muted); font-size: 0.9rem; }
/* Complaints counted from NHTSA: a name and its count on one line. */
ul.part-counts { list-style: none; margin: 0.35rem 0; padding: 0; max-width: 52rem; }
ul.part-counts li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line); }

ul.years-list > li { padding: 4px 0; }

.year-title { margin-top: 0.4rem; }
.year-nav {
  display: flex; justify-content: space-between;
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-weight: 700;
}
.year-nav.top { margin: 0.5rem 0 1rem; padding: 0; border-top: 0; font-size: 0.95rem; }

/* Warnings and claims show their titles and open on a tap. */
details > summary { cursor: pointer; }
ul.issues summary, ul.claims summary { list-style-position: outside; margin-left: 1rem; }
/* A service shows when it is due without a tap, since that is what a
   buyer compares against the records (decision 0059). */
ul.maintenance .due { display: block; margin-top: 2px; font-size: 0.92rem; font-weight: 600; }
details[open] > summary { margin-bottom: 0.35rem; }
section > details > summary { list-style: none; }
section > details > summary::-webkit-details-marker { display: none; }
section > details > summary h2 { display: inline-block; margin: 2.2rem 0 0.5rem; }
section > details > summary h2::after { content: " ▾"; color: var(--muted); font-size: 0.9rem; }
section > details[open] > summary h2::after { content: " ▴"; }

/* The timeline: one band per generation down a line, oldest first. */
ol.timeline { list-style: none; padding: 0; margin: 0; border-left: 3px solid var(--line); }
ol.timeline > li.band { position: relative; padding: 0 0 1.2rem 18px; max-width: none; }
ol.timeline > li.band::before {
  content: "";
  position: absolute; left: -9px; top: 0.3rem;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--link); border: 3px solid var(--page);
}
ol.timeline h3 { margin: 0; }
ul.year-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0.5rem 0; }
ul.year-chips a {
  display: block; padding: 3px 9px; border-radius: 7px;
  background: var(--chip); color: var(--on-chip);
  font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
ul.year-chips a:hover, ul.year-chips a:focus-visible { box-shadow: 0 0 0 2px var(--link); }
ol.marks { list-style: none; padding: 0; margin: 0.25rem 0 0; font-size: 0.95rem; }
ol.marks > li { padding: 2px 0; }
ol.marks > li > a { font-weight: 700; margin-right: 0.35rem; }
ol.timeline details > summary { color: var(--muted); font-size: 0.95rem; margin-top: 0.2rem; }

/* The badges a model wore, each leading to its own page. Outlined, so
   they do not read as the filled year buttons. */
ul.badge-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0.6rem 0; }
ul.badge-chips a {
  display: block; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-weight: 700; text-decoration: none;
}
ul.badge-chips a:hover, ul.badge-chips a:focus-visible { border-color: var(--link); color: var(--link); }

/* A badge's page: a block per generation that wore it. */
ol.badge-uses { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 16px; }
ol.badge-uses > li {
  max-width: none; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow);
}
ol.badge-uses h2 { margin: 0 0 0.4rem; font-size: 1.3rem; }

/* A trim's or package's page reuses the badge blocks, with small headings
   for what it added, its rare catch, warnings and services. Decision 0062. */
ol.option-uses h3 { margin: 1rem 0 0.3rem; font-size: 1rem; }
ol.option-uses ul.adds { padding-left: 1.2rem; margin: 0.3rem 0; }
/* Plain small capitals, not a pill: an outlined pill means something to
   tap (DESIGN.md rule 3), and .thin means a statement rests on one source. */
.edition {
  margin-left: 6px; color: var(--muted);
  font-size: 0.8rem; font-weight: 700; font-variant-caps: all-small-caps;
  letter-spacing: 0.04em; white-space: nowrap;
}

/* A card per generation, leading to its own page. Two or three across on
   a wide screen, one on a phone. */
ul.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 16px; list-style: none; padding: 0; }
ul.cards > li {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px; box-shadow: var(--shadow); max-width: none;
}
ul.cards .card-text { padding: 8px 6px 4px; display: flex; flex-direction: column; flex: 1; }
ul.cards h3 { margin: 0; font-size: 1.2rem; }
ul.cards p { margin: 0.35rem 0; }
ul.cards ul.issues { margin: 0.3rem 0; }
.card-warnings { color: var(--muted); font-size: 0.9rem; }
.more { font-size: 0.95rem; font-weight: 600; margin-top: auto; padding-top: 0.4rem; }

@media (prefers-reduced-motion: reduce) {
  .model-card { transition: none; }
  .model-card:hover, .model-card:focus-within { transform: none; }
}

/* The back of house: the owner's private page and its sign-in. */
.problem { color: var(--warn); font-weight: 600; }
form.sign-in { display: grid; gap: 8px; max-width: 24rem; }
form.sign-in input {
  font: inherit; padding: 10px 12px; border: 1px solid var(--muted); border-radius: 6px;
  background: var(--panel); color: var(--text);
}
form button {
  font: inherit; font-weight: 600; padding: 10px 16px; border: 0; border-radius: 6px;
  background: var(--brand); color: var(--on-brand); cursor: pointer; justify-self: start;
}
form.sign-out { margin-top: 2.5rem; }
/* The back of house's forms: a photo, and the guided ones such as a new source. */
form.photo, form.guided { display: grid; gap: 8px; max-width: 32rem; }
form.photo input:not([type="radio"]), form.photo select, form.guided input:not([type="checkbox"]), form.guided select {
  font: inherit; padding: 10px 12px; border: 1px solid var(--muted); border-radius: 6px;
  background: var(--panel); color: var(--text); box-sizing: border-box; width: 100%;
}
form.photo fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
form.photo label.choice, form.guided label.choice { display: block; padding: 4px 0; }
form.guided fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 8px 0; display: grid; gap: 6px; min-width: 0; }
form.guided fieldset.years input { min-width: 0; }
form.guided fieldset p { margin: 6px 0 0; }
form.guided fieldset.years { grid-template-columns: auto 1fr auto 1fr; align-items: center; }
form.guided legend { max-width: 100%; white-space: normal; }
.problem ul { margin: 0.25rem 0; }

/* What the back of house sent and is not merged yet. */
ul.waiting { list-style: none; padding: 0; margin: 1rem 0; max-width: 46rem; }
ul.waiting li { padding: 10px 0; border-bottom: 1px solid var(--line); }
ul.waiting .kind {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); margin-right: 0.5rem;
}

/* The public feedback form. */
form.feedback { display: grid; gap: 8px; max-width: 40rem; }
form.feedback input[type="text"], form.feedback textarea {
  font: inherit; padding: 10px 12px; border: 1px solid var(--muted); border-radius: 6px;
  background: var(--panel); color: var(--text); box-sizing: border-box; width: 100%;
}
form.feedback fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
form.feedback label.choice { display: block; padding: 4px 0; }
.hint { color: var(--muted); font-weight: 400; font-size: 0.9rem; }
/* Hidden from people, who therefore never fill it in. Moved off screen
   rather than hidden outright, because some programs skip hidden fields. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.done { font-weight: 600; overflow-wrap: anywhere; }
figure.photo { margin: 1rem 0; }
figure.photo img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
figure.photo figcaption { color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem; }
section.backstage { border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
section.backstage h3, section.backstage h4 { display: inline-block; margin: 0.75rem 0 0.25rem; }
section.backstage > details > summary :is(h3, h4)::after { content: " ▾"; color: var(--muted); font-size: 0.9rem; }
section.backstage > details[open] > summary :is(h3, h4)::after { content: " ▴"; }

/* Editing a dossier in the back of house. The text box uses the whole width,
   because a dossier's lines are long and wrapping them hides their indentation. */
form.editor { display: grid; gap: 8px; margin-top: 1rem; }
form.editor textarea {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9rem; line-height: 1.45;
  padding: 10px 12px; border: 1px solid var(--muted); border-radius: 6px; box-sizing: border-box;
  width: 100%; background: var(--panel); color: var(--text); white-space: pre; overflow-wrap: normal; overflow-x: auto;
  tab-size: 2;
}
.editor-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.editor-buttons button[value="check"], .editor-buttons button[value="preview"] {
  background: transparent; color: var(--link); border: 1px solid currentColor;
}
/* A previewed page sits under a bar that stays in view, so it is never mistaken for the live one. */
.preview-bar { position: sticky; top: 0; z-index: 10; background: var(--panel); border-bottom: 3px solid var(--link); }
.preview-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; }
.preview-inner p { margin: 0; }
ul.edit-parts { list-style: none; padding: 0; margin: 0.25rem 0 1rem; }
ul.edit-parts li { padding: 6px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 960px) {
  .edit-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0 2rem; }
}


/* The consistency board: every dossier side by side. */
section.board-section { margin-top: 1.5rem; }
.coverage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 1rem 2rem; }
@media (max-width: 480px) { .coverage-grid { grid-template-columns: 1fr; } }
/* A table that is too wide scrolls inside itself, never the page. */
.table-scroll { overflow-x: auto; }
table.coverage { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
table.coverage caption { text-align: left; font-weight: 800; padding-bottom: 4px; }
table.coverage th, table.coverage td { padding: 5px 3px; border-bottom: 1px solid var(--line); }
table.coverage thead th { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); text-align: right; }
table.coverage thead th:first-child, table.coverage tbody th { text-align: left; }
table.coverage tbody th { font-weight: 600; }
table.coverage td { text-align: right; }
table.coverage td.none { color: var(--muted); }
.coverage-grid .lacks { font-size: 0.85rem; color: var(--muted); margin: 0.4rem 0 0; }
details.board-model summary h3 { display: inline-block; margin: 0.75rem 0 0.25rem; }
details.board-model > summary h3::after { content: " ▾"; color: var(--muted); font-size: 0.9rem; }
details.board-model[open] > summary h3::after { content: " ▴"; }
ul.findings { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.findings li { padding: 8px 0; border-bottom: 1px solid var(--line); }

/* Search. The box sits under the home page's heading and on its own page;
   the app bar only links to it, so the bar stays one line on a phone. */
form.search { display: flex; gap: 8px; max-width: 40rem; margin: 0.8rem 0 1rem; }
form.search input {
  flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border: 1px solid var(--muted); border-radius: 6px;
  background: var(--panel); color: var(--text);
}
ul.results { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 12px; }
@media (max-width: 480px) { ul.results { grid-template-columns: 1fr; } }
ul.results li {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
ul.results a { font-weight: 700; font-size: 1.08rem; }
ul.results .label { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 0.75rem; }
/* The style guide: each colour token shown as it is in the reader's setting. */
ol.style-rules li { margin: 0.35rem 0; }
ul.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 10px 16px; list-style: none; padding: 0; }
ul.swatches li { display: flex; gap: 10px; align-items: center; }
.swatch { flex: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); }
.swatch-page { background: var(--page); }
.swatch-panel { background: var(--panel); }
.swatch-text { background: var(--text); }
.swatch-muted { background: var(--muted); }
.swatch-line { background: var(--line); }
.swatch-link { background: var(--link); }
.swatch-brand { background: var(--brand); }
.swatch-chip { background: var(--chip); }
.swatch-band { background: var(--band); }
.swatch-good { background: var(--good); }
.swatch-chosen { background: var(--chosen); }
.swatch-alarm { background: var(--alarm); }
.swatch-warn { background: var(--warn); }
.preview-inner > a { font-weight: 600; }

/* Two years compared. Each year's head stays beside the other even on a
   phone, because they are short. The sections stack on a phone and sit side
   by side on a wider screen, with what both share across the two. */
ul.compare-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; padding: 0; margin: 1rem 0; }
ul.compare-heads > li {
  display: flex; flex-direction: column; gap: 2px; max-width: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
}
ul.compare-heads ul.year-chips { margin: 0 0 4px; }
ul.compare-heads ul.year-chips a { font-size: 1.3rem; font-weight: 800; padding: 2px 12px; }
.compare-gen { font-weight: 700; }
ul.compare-heads .aka { font-size: 0.9rem; }
ul.compare-heads ul.stats { grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 6px; margin: 0.5rem 0 0; }
ul.compare-heads ul.stats li { padding: 6px 10px; }
ul.compare-heads ul.stats strong { font-size: 1.4rem; }
form.compare { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0.5rem 0; }
form.compare select {
  font: inherit; padding: 8px 10px; border: 1px solid var(--muted); border-radius: 6px;
  background: var(--panel); color: var(--text);
}
form.compare button { padding: 8px 16px; }
.split { display: grid; gap: 0 2rem; }
.split h3 { color: var(--link); margin: 0.75rem 0 0.25rem; font-variant-numeric: tabular-nums; }
.split-both { border-top: 1px solid var(--line); margin-top: 0.5rem; }
@media (min-width: 720px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-both { grid-column: 1 / -1; }
}
/* The support page's one link out, drawn like the site's buttons. Decision 0031. */
a.support-link, a.checklist-button {
  display: inline-block; font-weight: 600; padding: 10px 16px; border-radius: 6px;
  background: var(--brand); color: var(--on-brand); text-decoration: none;
}
/* --- Buyer's checklists and the inspection sheet (decisions 0032 to 0034) ---
   Both are used standing beside a car, often with one hand. So: big targets
   (44px and up), one column on a phone, a running count that stays in view,
   and nothing that needs a script. Marks are never sent or kept. */

/* Pieces both pages share. */
.sheet-intro { display: grid; gap: 4px; margin-bottom: 1rem; }
.tally {
  position: sticky; bottom: 0; z-index: 2; margin: 1.5rem 0 0; padding: 12px 16px;
  background: var(--brand); color: var(--on-brand); border-radius: 12px 12px 0 0;
  font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: var(--shadow-lift); max-width: none;
}
.sheet-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; margin: 1rem 0 1.5rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow); text-decoration: none; color: var(--text);
}
.sheet-link strong { display: block; color: var(--link); }
.sheet-link .go { font-size: 1.4rem; color: var(--link); }
.price-note { border-left: 4px solid var(--link); padding-left: 12px; }

/* The buyer's checklist: each group a card, each line a big row to tick. */
.checklist { counter-reset: ticked; }
.checklist-group {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 16px 8px; margin: 0 0 16px; box-shadow: var(--shadow);
}
.checklist-group.walk-away { border-left: 5px solid var(--alarm); }
.checklist-group h2 { margin: 12px 0 0; font-size: 1.15rem; }
.checklist-group h2 .count {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 6px; padding: 0 6px;
  border-radius: 999px; background: var(--page); font-size: 0.8rem; font-weight: 700; vertical-align: 0.15em;
}
ul.check-lines { list-style: none; margin: 4px 0 0; padding: 0; }
ul.check-lines li + li { border-top: 1px solid var(--line); }
ul.check-lines label {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start;
  padding: 12px 0; cursor: pointer; min-height: 44px;
}
ul.check-lines input { width: 26px; height: 26px; margin: 0; accent-color: var(--brand); }
ul.check-lines input:checked { counter-increment: ticked; }
ul.check-lines input:checked + .line { color: var(--muted); }
ul.check-lines input:checked + .line strong { text-decoration: line-through; }
.line strong { display: block; }
.line .covers { display: block; font-size: 0.85rem; }
.checklist .tally-ticked::before { content: counter(ticked); }

/* The inspection sheet. */
.steps {
  position: sticky; top: 0; z-index: 2; margin: 0 0 1rem; padding: 8px 0;
  background: var(--page); border-bottom: 1px solid var(--line);
}
.steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; }
.steps a {
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 8px 4px 6px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; text-decoration: none;
  color: var(--text); font-weight: 600; font-size: 0.9rem; background: var(--panel);
}
.step-number {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: var(--on-brand); font-size: 0.9rem; font-weight: 700;
}
.sheet-section { scroll-margin-top: 64px; margin-bottom: 2rem; }
.sheet-section h2 { display: flex; align-items: center; gap: 10px; }

.inspection { counter-reset: marked problems; }
.walk-round { display: grid; gap: 16px; }
svg.car-top { width: 100%; max-width: 230px; justify-self: center; }
svg.car-top .car-body { fill: var(--line); }
svg.car-top .wheel { fill: var(--text); }
svg.car-top .panel { fill: var(--panel); stroke: var(--muted); stroke-width: 1.2; stroke-linejoin: round; }
svg.car-top a:hover .panel, svg.car-top a:focus-visible .panel { stroke: var(--link); stroke-width: 3; }
svg.car-top .panel-number { fill: var(--text); font-size: 13px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.inspection:has(#body-front-bumper input.is-problem:checked) .panel-front-bumper { fill: var(--alarm); }
.inspection:has(#body-hood input.is-problem:checked) .panel-hood { fill: var(--alarm); }
.inspection:has(#body-windshield input.is-problem:checked) .panel-windshield { fill: var(--alarm); }
.inspection:has(#body-roof input.is-problem:checked) .panel-roof { fill: var(--alarm); }
.inspection:has(#body-rear-glass input.is-problem:checked) .panel-rear-glass { fill: var(--alarm); }
.inspection:has(#body-trunk input.is-problem:checked) .panel-trunk { fill: var(--alarm); }
.inspection:has(#body-rear-bumper input.is-problem:checked) .panel-rear-bumper { fill: var(--alarm); }
.inspection:has(#body-driver-front-fender input.is-problem:checked) .panel-driver-front-fender { fill: var(--alarm); }
.inspection:has(#body-driver-front-door input.is-problem:checked) .panel-driver-front-door { fill: var(--alarm); }
.inspection:has(#body-driver-rear-door input.is-problem:checked) .panel-driver-rear-door { fill: var(--alarm); }
.inspection:has(#body-driver-rear-quarter input.is-problem:checked) .panel-driver-rear-quarter { fill: var(--alarm); }
.inspection:has(#body-passenger-front-fender input.is-problem:checked) .panel-passenger-front-fender { fill: var(--alarm); }
.inspection:has(#body-passenger-front-door input.is-problem:checked) .panel-passenger-front-door { fill: var(--alarm); }
.inspection:has(#body-passenger-rear-door input.is-problem:checked) .panel-passenger-rear-door { fill: var(--alarm); }
.inspection:has(#body-passenger-rear-quarter input.is-problem:checked) .panel-passenger-rear-quarter { fill: var(--alarm); }

ol.parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
details.part { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
details.part[open] { box-shadow: var(--shadow); }
details.part:has(:target) { border-color: var(--link); }
details.part summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px;
  cursor: pointer; list-style: none; font-weight: 600;
}
details.part summary::-webkit-details-marker { display: none; }
details.part summary::after { content: "+"; margin-left: 4px; color: var(--muted); font-size: 1.3rem; font-weight: 400; }
details.part[open] summary::after { content: "\2212"; }
.part-number {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums;
}
.part-name { flex: 1; }
.part-status { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
details.part:has(input:checked) .part-status::before { content: "Checked \2713"; }
details.part:has(input:checked) .part-status { color: var(--link); }
details.part:has(input.is-problem:checked) .part-status::before { content: "Problem"; }
details.part:has(input.is-problem:checked) .part-status { color: var(--warn); }
details.part:has(input.is-problem:checked) { border-left: 5px solid var(--alarm); }
details.part:has(input.is-problem:checked) .part-number { background: var(--alarm); border-color: var(--alarm); color: var(--on-alarm); }
details.part fieldset { border: 0; margin: 0; padding: 0 14px 14px; min-width: 0; scroll-margin-top: 140px; }

.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choices label {
  display: grid; place-items: center; min-height: 44px; padding: 6px 10px; text-align: center;
  border: 1px solid var(--muted); border-radius: 10px; cursor: pointer; line-height: 1.2;
}
.choices input:checked { counter-increment: marked; }
.choices input.is-problem:checked { counter-increment: marked problems; }
/* A chosen answer sinks in, like a gear clicking into place (decision 0052). */
.choices input:checked + label { background: var(--chosen); border-color: var(--good); color: var(--on-chosen); font-weight: 600; box-shadow: var(--pressed); }
.choices input.is-problem:checked + label { background: var(--panel); border: 2px solid var(--alarm); color: var(--warn); }
.choices input:focus-visible + label { outline: 3px solid var(--link); outline-offset: 2px; }
.inspection .tally-marked::before { content: counter(marked); }
.inspection .tally-problems::before { content: " \00B7  " counter(problems) " with a problem"; }

@media (min-width: 900px) {
  .walk-round { grid-template-columns: 300px 1fr; align-items: start; }
  svg.car-top { position: sticky; top: 80px; max-width: 300px; }
  .sheet-section > ol.parts { grid-template-columns: 1fr 1fr; }
}

@media print {
  .appbar, .site-foot, .crumbs, .price-note, .steps, .tally, .sheet-link .go { display: none; }
  body { font-size: 11pt; }
  .checklist-group, details.part { box-shadow: none; break-inside: avoid; }
  details.part::details-content { content-visibility: visible; display: block; }
  details.part summary { min-height: 0; padding: 4px 8px; }
  details.part summary::after, .part-status { display: none; }
  details.part fieldset { padding: 0 8px 6px; }
  .choices { display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .choices input { position: static; opacity: 1; width: auto; height: auto; margin: 0 4px 0 0; }
  .choices label { display: inline; min-height: 0; padding: 0; border: 0; }
  .choices input:checked + label, .choices input.is-problem:checked + label { background: none; border: 0; color: var(--text); font-weight: 700; }
  .walk-round { grid-template-columns: 180px 1fr; }
  svg.car-top { max-width: 180px; }
}

/* --- Two sides of a generation page (decision 0042) ---------------------
   Learning comes first and buying second. On a phone the sides stack; on a
   wide screen they stand side by side, so a buyer still sees the warnings
   without scrolling past the history. The two buttons under the summary
   jump to each side, and the Buy one counts the warnings. */
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 1rem 0 0; max-width: 36rem; }
.sides a {
  display: block; padding: 10px 12px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  color: var(--text); text-decoration: none;
}
.sides a:hover, .sides a:focus-visible { border-color: var(--link); }
.sides strong { display: block; font-size: 1.05rem; color: var(--link); }
.sides span { display: block; font-size: 0.82rem; line-height: 1.3; color: var(--muted); }
.side-head {
  margin: 2rem 0 0; padding-bottom: 4px; border-bottom: 2px solid var(--line);
  font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}
.side > section > h2:first-child { margin-top: 1.2rem; }
.side { scroll-margin-top: 56px; }
@media (min-width: 960px) {
  .two-sides { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
}
/* --- Learn and Buy tabs of a generation page (decision 0058) ------------
   Each tab is its own address, so a phone shows one at a time. The open
   tab is filled indigo and pressed in; the other is a card to tap. */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 1rem 0 0; max-width: 36rem; }
.tabs a {
  display: block; padding: 10px 12px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  color: var(--text); text-decoration: none; box-shadow: var(--shadow);
}
.tabs a:hover, .tabs a:focus-visible { border-color: var(--link); }
.tabs strong { display: block; font-size: 1.05rem; color: var(--link); }
.tabs span { display: block; font-size: 0.82rem; line-height: 1.3; color: var(--muted); }
.tabs a[aria-current="page"] {
  background: var(--brand); border-color: var(--brand); box-shadow: var(--pressed);
}
.tabs a[aria-current="page"] strong, .tabs a[aria-current="page"] span { color: var(--on-brand); }
.tab-body { scroll-margin-top: 56px; }

/* A model page's buying side lists a checklist per generation (decision 0042). */
ul.checklist-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul.checklist-links a {
  display: block; padding: 8px 14px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  font-weight: 600; text-decoration: none;
}
ul.checklist-links a:hover, ul.checklist-links a:focus-visible { border-color: var(--link); }

/* --- Articles (decision 0045) -------------------------------------------
   A card says what kind of piece it is before its title, and an opinion is
   an outlined pill so it never reads as fact. The article itself is one
   column of running text, about 70 characters wide. */
ul.article-cards {
  list-style: none; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
ul.article-cards a {
  display: block; height: 100%; padding: 12px 14px;
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--text); text-decoration: none;
}
ul.article-cards a:hover, ul.article-cards a:focus-visible { box-shadow: var(--shadow-lift); }
ul.article-cards a:hover strong { color: var(--link); text-decoration: underline; }
ul.article-cards strong { display: block; margin: 4px 0 2px; font-size: 1.1rem; }
ul.article-cards .dek { display: block; color: var(--muted); font-size: 0.92rem; }
.article-meta { display: block; margin-top: 6px; color: var(--muted); font-size: 0.8rem; }
.article-kind {
  display: inline-block; margin: 0; color: var(--link);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.article-kind.opinion { color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }
article.piece { max-width: 42rem; }
article.piece h1 { margin: 0.4rem 0 0.4rem; line-height: 1.15; }
article.piece > .article-kind { margin-top: 0.8rem; }
.byline { color: var(--muted); font-size: 0.9rem; }
.opinion-note {
  border-left: 4px solid var(--chip); background: var(--panel);
  padding: 10px 14px; border-radius: 0 12px 12px 0; font-size: 0.95rem;
}
ul.about-links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
ul.about-links a {
  display: block; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; text-decoration: none;
}
ul.about-links a:hover, ul.about-links a:focus-visible { border-color: var(--link); }

/* The article in the "This week" strip says what kind of piece it is, as
   every article card does. Decision 0051. */
.spotlight-card .article-kind { align-self: flex-start; margin: 4px 6px 0; }

/* A piece written by AI as a stand-in says so on its card, quietly: muted,
   never red, since it is not a warning. Decision 0061. */
.placeholder-tag {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: var(--panel); border: 1px dashed var(--line); color: var(--muted);
  font-size: 0.72rem; font-weight: 600;
}
.spotlight-card .placeholder-tag { align-self: flex-start; margin: 4px 6px 0; }