/* Shifterati 2.0 (decision 0093). One frame for every page about a thing:
   header and breadcrumbs, a title block, then tabs that switch in place.
   Phone first; information first, then buying. The palette and type are
   the ones in docs/DESIGN.md: red only for warnings, indigo for links and
   where the reader is, sand for a model year to tap, orange for a good find
   and the open tab's edge. Every pair of text and ground is 4.5:1 or more. */

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%;
  font-display: swap;
  src: url("/static/fonts/archivo.woff2") format("woff2");
}
/* Figures in running text come from Archivo, whose zero is plain, so a year
   or a mileage never reads as code (decision 0107). Letters stay Atkinson. */
@font-face {
  font-family: "Plain figures"; font-style: normal; font-weight: 100 900;
  font-display: swap; unicode-range: U+0030-0039;
  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; --panel: #ffffff; --text: #1b1f33; --muted: #5e6680; --line: #d9dcea;
  --link: #4e598c; --bar: #4e598c; --brand-deep: #2e3561; --on-brand: #ffffff;
  --sand: #f9c784; --on-sand: #1b1f33; --good: #b54708; --orange: #ff8c42; --alarm: #b3261e;
  --tint: #eef0f8;
  --shadow: 0 1px 2px rgb(27 31 51 / 8%), 0 4px 14px rgb(27 31 51 / 8%);
  --display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --reading: "Plain figures", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r: 12px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --tabs-h: 48px; --focus: #2e3561; --fast: 150ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #14172a; --panel: #1e2238; --text: #ffffff; --muted: #9aa0bd; --line: #333957;
    --link: #a9b1e0; --bar: #181b30; --brand-deep: #1f2447; --good: #ff8c42; --alarm: #ff6b7a;
    --tint: #252a45; --focus: #ff8c42;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 14px rgb(0 0 0 / 30%);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--text);
  font: 400 1rem/1.55 var(--reading);
}
a { color: var(--link); text-underline-offset: 0.15em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--display); text-wrap: balance; margin: 0; }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
dd { margin: 0; }
.wrap {
  max-width: 48rem; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 50; padding: 8px 14px; background: var(--panel); color: var(--link); font-weight: 700; border-radius: 6px; }
.skip:focus { top: 8px; }
/* Figures of even width, in Archivo, whose zero is plain (decision 0052). */
.n { font-family: var(--display); font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--muted); }

/* The header: Cars, Engines, Learn, Buying, then search, on one row down to 320 px. */
.appbar { background: var(--bar); color: var(--on-brand); }
.appbar-inner { display: flex; align-items: center; gap: var(--s3); min-height: 56px; }
.brand { display: flex; align-items: center; gap: var(--s2); color: inherit; text-decoration: none; margin-right: auto; }
.brand .mark { width: 32px; height: 32px; flex: none; }
.brand .wm { display: block; }
.brand .wordmark { display: block; height: 18px; width: auto; }
.appnav { display: flex; align-items: center; gap: var(--s1); }
.appnav a { color: inherit; text-decoration: none; font-weight: 700; font-size: 0.9375rem; padding: 10px 7px; border-radius: 8px; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.appnav a[aria-current] { background: rgb(255 255 255 / 16%); }
.appnav .search { justify-content: center; width: 44px; padding: 0; }
.appbar :focus-visible { outline-color: var(--sand); }
@media (max-width: 400px) { .brand .wm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (max-width: 360px) {
  .appnav a { font-size: 0.8125rem; padding-inline: 5px; }
  .appnav .search { width: 36px; }
  .brand .mark { width: 28px; height: 28px; }
}

/* The title block */
.head { padding-block: var(--s5) var(--s4); display: grid; gap: var(--s3); }
.crumbs ol { display: flex; flex-wrap: wrap; font-size: 0.9375rem; color: var(--muted); }
.crumbs li > span { padding-inline: 0.35em; }
/* A thumb needs 24 pixels; the text alone is 16 to 18 tall. */
.crumbs a, .sub a { display: inline-flex; align-items: center; min-height: 24px; }
h1 { font-size: clamp(1.75rem, 6vw, 2.4rem); line-height: 1.1; font-weight: 800; }
h1 .yrs { font-weight: 500; color: var(--muted); white-space: nowrap; }
.code { font: 700 0.75rem var(--display); letter-spacing: 0.06em; padding: 2px 6px; border-radius: 6px; background: var(--tint); color: var(--muted); vertical-align: 0.15em; white-space: nowrap; }
a.code { color: var(--link); }
.summary, .reading { max-width: 34em; }
.counts { font-weight: 700; font-size: 1.0625rem; padding: var(--s2) var(--s3); background: var(--tint); border-radius: 8px; }
.trust { font-size: 0.875rem; color: var(--muted); }
/* A draft is not a warning, so its edge is indigo, never red. */
.draft { border-left: 4px solid var(--link); background: var(--panel); padding: var(--s3) var(--s4); border-radius: 8px; font-size: 0.9375rem; }

/* The generation and year pickers: plain links in a fold, so they work with scripts off. */
.pickers { display: flex; flex-wrap: wrap; gap: var(--s2); position: relative; }
.pick { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
/* The two pickers are the same size, side by side, so neither looks empty
   or squeezed (visitor round 8 at 1366 pixels). */
.pickers { max-width: 34rem; }
.genpick, .yearpick { flex: 1 1 9.5rem; min-width: 0; }
.pick .lbl { white-space: nowrap; }
.pick summary { list-style: none; cursor: pointer; padding: 8px 36px 8px 12px; min-height: 52px; position: relative; }
.pick summary::-webkit-details-marker { display: none; }
.pick summary::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); }
.pick[open] summary::after { transform: translateY(-20%) rotate(225deg); }
.lbl { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pick ul { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 25; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 4px; }
.genpick li a { display: flex; justify-content: space-between; gap: var(--s3); padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--text); font-weight: 700; min-height: 44px; align-items: center; }
.genpick li a span { font-weight: 400; color: var(--muted); }
.pick summary .n { white-space: nowrap; }
.genpick li a[aria-current] { background: var(--tint); }
/* Sand marks a model year to tap. */
.pick ul.years { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: var(--s2); padding: var(--s3); }
.years a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 8px; background: var(--sand); color: var(--on-sand); font-weight: 700; text-decoration: none; }
.years a[aria-current] { outline: 3px solid var(--link); outline-offset: 1px; }
.years .all { grid-column: 1 / -1; }
.years .all a { background: transparent; color: var(--link); border: 1px solid var(--line); }

/* The tab row. It is sticky and never moves between tabs. */
.tabs { position: sticky; top: 0; z-index: 20; background: var(--page); border-bottom: 1px solid var(--line); }
.tabs ul { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; min-height: var(--tabs-h); align-items: stretch; }
.tabs ul::-webkit-scrollbar { display: none; }
.tabs a { display: flex; align-items: center; white-space: nowrap; padding: 0 10px; min-height: 44px; font-weight: 700; font-size: 0.9375rem; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; }
.tabs a[aria-current="true"] { color: var(--text); border-bottom-color: var(--orange); }
.tabs .divider { width: 1px; background: var(--line); margin: 12px 4px; }
/* The warning count, only when there is a warning: a red dot beside it. */
.tabs .count { margin-left: 6px; font: 700 0.75rem var(--display); min-width: 1.4em; padding: 0 6px; border-radius: 999px; background: var(--tint); color: var(--text); text-align: center; }
.tabs .count::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--alarm); margin-right: 4px; vertical-align: 0.1em; }
@media (max-width: 560px) {
  .tabs ul { flex-wrap: wrap; overflow: visible; row-gap: 0; }
  .tabs li { flex: 1 1 auto; }
  .tabs li a { justify-content: center; padding: 0 6px; }
  .tabs .divider { flex: 0 0 100%; height: 1px; width: auto; margin: 0; }
  :root { --tabs-h: 89px; }
}

/* The parts of the page */
.part { padding-block: var(--s6); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--tabs-h) + 8px); display: grid; gap: var(--s4); }
.part:last-of-type { border-bottom: 0; }
.part [id] { scroll-margin-top: calc(var(--tabs-h) + 24px); }
/* The card a link pointed at is marked, so the reader sees where they landed. */
.fault:target { box-shadow: 0 0 0 2px var(--link); }
/* With scripts on, one part shows at a time and fades in. */
.tabbed .part { display: none; }
.tabbed .part.on { display: grid; animation: fade var(--fast) ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tabbed .part.on { animation: none; } }
h2 { font-size: 1.5rem; font-weight: 800; }
h3 { font-size: 1.0625rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }
.sub { font: 800 0.8125rem var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: var(--s3); }
.lede { color: var(--muted); }
.when { font: 500 0.875rem var(--reading); color: var(--muted); }
.fine { font-size: 0.875rem; color: var(--muted); }
.gap { border: 1.5px dashed var(--line); border-radius: var(--r); padding: var(--s4); color: var(--muted); }
.cnt { font-weight: 500; color: var(--muted); font-size: 1rem; }
.plain { display: grid; gap: var(--s2); }
/* Muted pills say how much is known or what a thing is, never a warning. */
.pill { display: inline-block; font: 700 0.75rem var(--reading); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
/* Red means a warning and nothing else. */
.flag { display: inline-block; font: 700 0.75rem var(--reading); padding: 1px 8px; border-radius: 999px; background: var(--alarm); color: #fff; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .flag { color: #1b1f33; } }
.flags { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Footnotes: small numbers that lead to the Sources tab. */
/* The kind of source behind a fact, such as "Toyota, owners' reports (unofficial)" (decision 0098). */
.src { font-size: 0.8125rem; color: var(--muted); }

.glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.glance div { background: var(--panel); padding: var(--s3) var(--s4); display: grid; gap: 2px; align-content: start; }
.glance dt { font-size: 0.8125rem; color: var(--muted); }
.glance dd { font-weight: 700; }
.glance .wide { grid-column: 1 / -1; }
/* Body styles as plain links in a row, each tall enough to tap (decision 0124). */
.came-as { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.came-as a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.came-as-text { color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); text-decoration: none; font-weight: 700; }

/* Lists of things: colors, options, figures, services */
.opts, .maint, .recalls { display: grid; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.opts li, .maint li, .recalls li { padding: 10px var(--s4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.maint li, .recalls li { display: grid; gap: 2px; }
.opts li:first-child, .maint li:first-child, .recalls li:first-child { border-top: 0; }
.maint h4 { font-size: 1.0625rem; }
.detail { flex-basis: 100%; font-size: 0.9375rem; color: var(--muted); }
.colors li.is-rare { box-shadow: inset 4px 0 0 var(--good); }
.find { font: 700 0.75rem var(--reading); color: var(--good); text-decoration: none; }
.find::before { content: "★ "; }
.cond { font-size: 0.875rem; font-weight: 700; }
.more > summary { cursor: pointer; color: var(--link); font-weight: 700; padding-block: 10px; }
.more > ul { margin-top: var(--s2); }

.engines { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.engines > li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); display: grid; gap: var(--s1); align-content: start; }
.engines dl { display: grid; gap: 2px; margin-top: var(--s1); font-size: 0.9375rem; }
.engines dl div { display: flex; gap: var(--s2); }
.engines dt { color: var(--muted); }

.rares { display: grid; gap: var(--s3); }
.rares > li { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: var(--r); padding: var(--s4); display: grid; gap: var(--s1); }
.rares > li.verdict-good { border-left-color: var(--good); }
.rares > li.verdict-bad { border-left-color: var(--alarm); }
.verdict { font: 800 0.75rem var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.verdict-good .verdict { color: var(--good); }
.verdict-good .verdict::before { content: "★ "; }
.verdict-bad .verdict { color: var(--alarm); }
.rares .count { font-weight: 700; }
.why { color: var(--muted); font-size: 0.9375rem; }

.timeline li { display: grid; grid-template-columns: 3.6rem 1fr; gap: var(--s3); }
.timeline li > div { border-left: 2px solid var(--line); padding: 10px 0 12px var(--s4); position: relative; display: grid; gap: var(--s1); }
.timeline li > div::before { content: ""; position: absolute; left: -7px; top: 17px; width: 12px; height: 12px; border-radius: 50%; background: var(--page); border: 2px solid var(--link); }
.timeline li.none > div { color: var(--muted); }
.timeline li.none > div::before { border-color: var(--line); }
.yy { font-weight: 800; text-align: center; align-self: start; margin-top: 4px; min-height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--sand); color: var(--on-sand); text-decoration: none; }

.faults, .yr-cards { display: grid; gap: var(--s3); }
.fault, .yr-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); display: grid; gap: var(--s2); }
.fault.walk-away { border-left: 4px solid var(--alarm); }
.fault h3, .yr-card h3 { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.check { background: var(--tint); border-radius: 8px; padding: var(--s2) var(--s3); }
.yr-card { border-left-width: 4px; }
.yr-card.good { border-left-color: var(--good); }
.yr-card.mixed { border-left-color: var(--muted); }
.yr-card .tag { font: 800 0.75rem var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.yr-card.good .tag { color: var(--good); }
.r-head { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.camp { font-size: 0.8125rem; color: var(--muted); }

.cta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; background: var(--brand-deep); color: var(--on-brand); border-radius: var(--r); padding: var(--s4); }
.cta a { background: var(--orange); color: var(--on-sand); font-weight: 700; text-decoration: none; padding: 10px 16px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
.cta :focus-visible { outline-color: var(--sand); }

/* Complaints by year: bar lengths in twentieths, set by class, since the
   content security policy allows no inline style. */
.bars { display: grid; gap: 6px; }
.bars li { display: grid; grid-template-columns: 3rem 1fr 7.5rem; gap: var(--s2); align-items: center; font-size: 0.875rem; min-height: 32px; }
.bar { height: 10px; background: var(--tint); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--link); border-radius: 999px; width: 0; }
.bc { text-align: right; color: var(--muted); }
.w1 { width: 5% !important; } .w2 { width: 10% !important; } .w3 { width: 15% !important; } .w4 { width: 20% !important; }
.w5 { width: 25% !important; } .w6 { width: 30% !important; } .w7 { width: 35% !important; } .w8 { width: 40% !important; }
.w9 { width: 45% !important; } .w10 { width: 50% !important; } .w11 { width: 55% !important; } .w12 { width: 60% !important; }
.w13 { width: 65% !important; } .w14 { width: 70% !important; } .w15 { width: 75% !important; } .w16 { width: 80% !important; }
.w17 { width: 85% !important; } .w18 { width: 90% !important; } .w19 { width: 95% !important; } .w20 { width: 100% !important; }

table.warranty { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.warranty th, .warranty td { text-align: left; padding: var(--s2) var(--s4); border-top: 1px solid var(--line); vertical-align: top; }
.warranty tr:first-child th, .warranty tr:first-child td { border-top: 0; }
.warranty .detail { display: block; }

.site-foot { padding-block: var(--s6) var(--s7); color: var(--muted); font-size: 0.875rem; border-top: 1px solid var(--line); }
.site-foot .wrap { display: grid; gap: var(--s2); }
.site-foot nav ul { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-bottom: var(--s2); }
.site-foot nav a { font-weight: 700; display: inline-flex; min-height: 44px; align-items: center; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print {
  .appbar, .tabs, .pickers, .cta, .site-foot nav { display: none; }
  .tabbed .part { display: grid; }
}

/* The homepage, the Cars page and its shelves */
.hero { padding-block: var(--s6) var(--s4); display: grid; gap: var(--s3); }
.hero h1 { max-width: 20em; }
.tagline { color: var(--muted); font-size: 1.0625rem; }
.intro { max-width: 38em; }
/* Indigo like the draft notice, never red: it is news, not a warning. */
.in-progress { border-left: 4px solid var(--link); background: var(--panel); padding: var(--s3) var(--s4); border-radius: 8px; display: grid; gap: var(--s2); font-size: 0.9375rem; max-width: 42em; }
.in-progress .note-head { font-size: 1rem; }
.in-progress-links { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.in-progress-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.searchbox { display: flex; gap: var(--s2); margin-top: var(--s2); }
.searchbox input { flex: 1; min-width: 0; min-height: 52px; padding: 0 var(--s3); font: 400 1rem var(--reading); color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.searchbox input::placeholder { color: var(--muted); opacity: 1; font-size: 0.9375rem; }
.searchbox button { min-height: 52px; min-width: 52px; display: grid; place-items: center; padding: 0; font: 700 1rem var(--reading); color: var(--on-brand); background: var(--link); border: 0; border-radius: var(--r); cursor: pointer; }
@media (prefers-color-scheme: dark) { .searchbox button { color: #1b1f33; } }
.examples, .jump { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); text-decoration: none; font-weight: 700; }
.block { padding-block: var(--s6); border-top: 1px solid var(--line); display: grid; gap: var(--s3); scroll-margin-top: 8px; }
.block-head { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline; justify-content: space-between; }
.block-head a { font-weight: 700; display: inline-flex; min-height: 44px; align-items: center; }
.make { margin-top: var(--s2); }
.models { display: flex; flex-wrap: wrap; gap: var(--s2); }
.models a { display: inline-flex; gap: 6px; align-items: baseline; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); text-decoration: none; min-height: 44px; }
.models strong { color: var(--text); }
.cards { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card { display: grid; gap: 2px; height: 100%; padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: var(--r); box-shadow: var(--shadow); text-decoration: none; color: var(--text); }
.card.verdict-good { border-left-color: var(--good); }
.card.verdict-bad { border-left-color: var(--alarm); }
.card strong { font: 800 1.125rem var(--display); color: var(--link); }
.where { font-size: 0.875rem; color: var(--muted); }
.note { font-size: 0.9375rem; }
/* This week (decisions 0043, 0109): a strip the browser scrolls and stops on
   each card, with no script. It runs to the page's edges on a phone, inside
   the strip only, so the page itself never scrolls sideways. */
.week-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--s3);
  list-style: none; margin: 0 -16px; padding: 4px 16px 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
}
.week-strip > li { scroll-snap-align: start; min-width: 0; }
@media (min-width: 560px) { .week-strip { grid-auto-columns: 46%; } }
@media (min-width: 52rem) { .week-strip { margin: 0; padding-inline: 0; scroll-padding-inline: 0; } }
.week-nav { display: flex; gap: var(--s2); align-self: center; }
.week-nav[hidden] { display: none; }
.week-nav button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid var(--link); border-radius: 999px; background: var(--panel); color: var(--link); font: 700 1.5rem/1 var(--display); cursor: pointer; }
.week-nav button:disabled { border-color: var(--line); color: var(--muted); cursor: default; }
.week-card { display: grid; align-content: start; gap: 4px; height: 100%; padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); text-decoration: none; color: var(--text); }
.week-card.is-now { border-color: var(--link); }
.week-card strong { font: 800 1.125rem var(--display); color: var(--link); }
.week-label { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.tiles { display: grid; gap: var(--s2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles a { display: grid; gap: 2px; padding: var(--s3) var(--s4); min-height: 44px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--text); }
.big { font: 800 1.25rem var(--display); color: var(--link); }
.nick { font-size: 0.9375rem; }
.buying { background: var(--tint); border: 0; border-radius: var(--r); padding: var(--s5); margin-block: var(--s5); }
.buying a { font-weight: 700; }
.shelves { display: grid; gap: var(--s3); }
.shelves a { display: grid; gap: 2px; padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; }
.shelves strong { font: 800 1.125rem var(--display); }
.shelves .fine { display: block; }
.shelves .line { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }

/* A generation's lead photo, always with its credit under it (decision 0115).
   Cropped to one shape so a lineup of photos from different people sits evenly,
   and as wide as the text column so its edges line up with the boxes under it. */
.lead-photo { margin: 0; }
.lead-photo img, .shelf-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); background: var(--tint); }
.lead-photo figcaption, .shelf-credit { margin-top: 4px; font-size: 0.8125rem; color: var(--muted); }
/* On the model page a card with a photo is the list item itself, so the credit
   and its own links sit inside the card, under the photo, outside the card's link. */
.shelves .with-photo { display: grid; padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.shelves .with-photo > a { padding: 0; background: none; border: 0; border-radius: 0; }
.shelves .with-photo .shelf-photo { border-radius: calc(var(--r) - 4px); }
.shelves .with-photo .shelf-credit { margin: 4px 0 var(--s3); }
.shelves .shelf-photo-link { display: block; padding: 0; background: none; border: 0; border-radius: 0; }
.shelves .shelf-credit a { display: inline; padding: 0; background: none; border: 0; border-radius: 0; text-decoration: underline; }
.answers a { background: var(--tint); border-left: 3px solid var(--link); }
.terms { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sub a { color: inherit; }
.links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.links a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; }
.gens { display: grid; gap: var(--s4); }
.gen-colors { display: grid; gap: var(--s2); }
/* Paint colors sit two across where there is room, as tiles do. */
@media (min-width: 480px) {
  .opts.colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opts.colors li:nth-child(2) { border-top: 0; }
  .opts.colors li:nth-child(even) { border-left: 1px solid var(--line); }
}

/* The Buying page's picker: a plain form that works with scripts off. */
.carpick { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: stretch; }
.carpick label { flex: 1 1 8rem; display: grid; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 12px; }
.carpick label:first-child { flex-basis: 100%; }
.carpick .lbl { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.carpick select, .carpick input { font: 700 1rem var(--reading); color: var(--text); background: transparent; border: 0; padding: 0; min-height: 32px; width: 100%; }
.carpick select option, .carpick select optgroup { background: var(--panel); color: var(--text); }
.carpick button { flex: 1 1 100%; min-height: 48px; border: 0; border-radius: var(--r); background: var(--link); color: var(--on-brand); font: 800 1rem var(--display); cursor: pointer; }
@media (prefers-color-scheme: dark) { .carpick button { color: #1b1f33; } }
.due { font: 700 0.9375rem var(--display); }

/* The miles-per-year gauge on the Buying page (decision 0096). Its bands are
   shares of the national average: 0.5, 0.85, 1.15 and 1.5 of it, on a scale
   that ends at twice it. Shades of the link colour, never red: high miles are
   a thing to weigh, not a warning. */
.gauge { display: grid; gap: var(--s2); padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.gauge-head { display: flex; gap: var(--s3); align-items: baseline; justify-content: space-between; }
.gauge-head .lbl { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.gauge .band { font: 800 1.25rem var(--display); }
.scale { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(to right,
  color-mix(in srgb, var(--link) 20%, var(--panel)) 0 25%,
  color-mix(in srgb, var(--link) 38%, var(--panel)) 25% 42.5%,
  color-mix(in srgb, var(--link) 56%, var(--panel)) 42.5% 57.5%,
  color-mix(in srgb, var(--link) 76%, var(--panel)) 57.5% 75%,
  var(--link) 75% 100%); }
.scale .mark { position: absolute; left: 0; top: 0; bottom: 0; }
.scale .mark::after { content: ""; position: absolute; right: -3px; top: -6px; bottom: -6px; width: 6px; border-radius: 3px; background: var(--text); box-shadow: 0 0 0 2px var(--panel); }
.ticks { display: flex; font-size: 0.75rem; color: var(--muted); }
.ticks li { text-align: center; }
.ticks li:nth-child(1), .ticks li:nth-child(5) { flex: 0 0 25%; }
.ticks li:nth-child(2), .ticks li:nth-child(4) { flex: 0 0 17.5%; }
.ticks li:nth-child(3) { flex: 0 0 15%; }
.ticks li.on { color: var(--text); font-weight: 800; }

/* Wide screens: the frame widens and lists of cards sit two across, while
   running text keeps its measure (visitor round 5 found 60% of a 1920-pixel
   screen empty). */
@media (min-width: 1200px) {
  .wrap { max-width: 72rem; }
  .faults, .yr-cards, .shelves, .gens, .block .rares { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  /* Three round 7 visitors on laptops read 34em as half a column, so wide
     screens give running text a longer line, still short of 90 characters. */
  .summary, .reading, .part > p, .block > p { max-width: 42em; }
}
.pick summary .hint { display: block; font-size: 0.8125rem; color: var(--muted); }

/* A checklist: each line a box to tick at a viewing, for the reader alone. */
.checks { display: grid; gap: var(--s3); }
.checks label { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.checks input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--link); }
.checks .detail { display: block; }
.checks.walk-away label { border-left: 3px solid var(--alarm); }

/* A shelf's model menu runs long, so it scrolls within the screen. */
.head .genpick ul { max-height: 60vh; overflow-y: auto; }

/* An odd last square of the glance spans the row, so no empty square shows. */
.glance > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Tiles sit two across on a phone and four on a wider screen, so eight fill whole rows. */
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tiles .yrs { white-space: nowrap; }
/* The miles a Buying sheet is for go under its title, so the title wraps on its own. */
.at-miles { display: block; margin-top: 2px; }

/* The inspection sheet (decisions 0033 and 0034). It is used standing beside
   a car, often with one hand: big targets, one column on a phone, a running
   count that stays in view, and nothing that needs a script. Marks are never
   sent or kept. A problem marked is red, since it is a warning. */
.steps { position: sticky; top: 0; z-index: 20; margin-bottom: var(--s4); padding-block: var(--s2); background: var(--page); border-bottom: 1px solid var(--line); }
.steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.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: 700; 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(--link); color: var(--panel); font-size: 0.9rem; font-weight: 700; }
.sheet-section { scroll-margin-top: 72px; margin-bottom: var(--s6); display: grid; gap: var(--s3); }
.sheet-section h2 { display: flex; align-items: center; gap: 10px; font-size: 1.375rem; }
.inspection { counter-reset: marked problems; }
.walk-round { display: grid; gap: var(--s4); }
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: 700 13px var(--display); text-anchor: middle; pointer-events: none; }
.inspection:has(#body-front-bumper input.is-problem:checked) .panel-front-bumper,
.inspection:has(#body-hood input.is-problem:checked) .panel-hood,
.inspection:has(#body-windshield input.is-problem:checked) .panel-windshield,
.inspection:has(#body-roof input.is-problem:checked) .panel-roof,
.inspection:has(#body-rear-glass input.is-problem:checked) .panel-rear-glass,
.inspection:has(#body-trunk input.is-problem:checked) .panel-trunk,
.inspection:has(#body-rear-bumper input.is-problem:checked) .panel-rear-bumper,
.inspection:has(#body-driver-front-fender input.is-problem:checked) .panel-driver-front-fender,
.inspection:has(#body-driver-front-door input.is-problem:checked) .panel-driver-front-door,
.inspection:has(#body-driver-rear-door input.is-problem:checked) .panel-driver-rear-door,
.inspection:has(#body-driver-rear-quarter input.is-problem:checked) .panel-driver-rear-quarter,
.inspection:has(#body-passenger-front-fender input.is-problem:checked) .panel-passenger-front-fender,
.inspection:has(#body-passenger-front-door input.is-problem:checked) .panel-passenger-front-door,
.inspection:has(#body-passenger-rear-door input.is-problem:checked) .panel-passenger-rear-door,
.inspection:has(#body-passenger-rear-quarter input.is-problem:checked) .panel-passenger-rear-quarter { fill: var(--alarm); }
ol.spots { display: grid; gap: var(--s2); align-content: start; }
details.spot { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
details.spot[open] { box-shadow: var(--shadow); }
details.spot:has(:target) { border-color: var(--link); }
details.spot summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px; cursor: pointer; list-style: none; font-weight: 700; }
details.spot summary::-webkit-details-marker { display: none; }
details.spot summary::after { content: "+"; margin-left: 4px; color: var(--muted); font-size: 1.3rem; font-weight: 400; }
details.spot[open] summary::after { content: "\2212"; }
.spot-number { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--muted); font-size: 0.85rem; }
.spot-name { flex: 1; }
.spot-status { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
details.spot:has(input:checked) .spot-status::before { content: "Checked \2713"; }
details.spot:has(input:checked) .spot-status { color: var(--link); }
details.spot:has(input.is-problem:checked) .spot-status::before { content: "Problem"; }
details.spot:has(input.is-problem:checked) .spot-status { color: var(--alarm); }
details.spot:has(input.is-problem:checked) { border-left: 4px solid var(--alarm); }
details.spot:has(input.is-problem:checked) .spot-number { background: var(--alarm); border-color: var(--alarm); color: var(--panel); }
details.spot 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: var(--s2); }
.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; }
/* The chosen answer gets an orange ring, never an orange fill behind text. */
.choices input:checked + label { border: 2px solid var(--orange); box-shadow: 0 0 0 1px var(--orange); color: var(--text); font-weight: 700; }
.choices input.is-problem:checked + label { background: var(--panel); border: 2px solid var(--alarm); color: var(--alarm); }
.choices input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.tally { position: sticky; bottom: 0; z-index: 20; margin-top: var(--s5); padding: var(--s3) var(--s4); background: var(--bar); color: var(--on-brand); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; font-weight: 700; box-shadow: var(--shadow); }
.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.spots { grid-template-columns: 1fr 1fr; }
}
@media print {
  .steps, .tally { display: none; }
  details.spot { box-shadow: none; break-inside: avoid; }
  details.spot::details-content { content-visibility: visible; display: block; }
  details.spot summary { min-height: 0; padding: 4px 8px; }
  details.spot summary::after, .spot-status { display: none; }
  details.spot 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; }
}

/* Show me something interesting (decision 0108): one pick, then another. */
.surprise { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--link); border-radius: 999px; background: var(--panel); color: var(--link); font-weight: 700; text-decoration: none; }
.hero-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; }
.to-buying { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
/* Its own name, so it never styles the generation and year pickers, which
   once took its padding and green edge (visitor round 8). */
.pick-card { display: grid; gap: var(--s2); max-width: 40em; padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--good); border-radius: var(--r); box-shadow: var(--shadow); }
.pick-card h2 { font-size: 1.5rem; }
.pick-card .read { font-weight: 700; display: inline-flex; min-height: 44px; align-items: center; }
.another { padding-block: var(--s4) var(--s2); }

/* The back of house draws a previewed edit or a specimen under a bar that stays in view,
   so it is never mistaken for the live page. Readers never see it. */
.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: var(--s2) var(--s4); padding-block: var(--s2); }
.preview-inner p { margin: 0; }
.preview-buttons { display: flex; flex-wrap: wrap; gap: var(--s2); }
.preview-buttons button { min-height: 44px; padding: 0 var(--s4); border: 1.5px solid var(--link); border-radius: var(--r); background: var(--link); color: var(--on-brand); font: 700 1rem var(--reading); cursor: pointer; }
.preview-buttons button[value="check"] { background: transparent; color: var(--link); }
@media (prefers-color-scheme: dark) { .preview-buttons button[value="propose"] { color: #1b1f33; } }

/* A member's pages: signing in, the garage, a saved car's ticks, and the
   account buttons (decision 0113). Forms here stack one field to a row. */
.member-form { display: grid; gap: var(--s2); max-width: 32rem; }
.member-form label { font-weight: 700; }
.member-form label.choice { display: flex; gap: var(--s2); align-items: flex-start; font-weight: 400; padding-block: var(--s2); min-height: 44px; box-sizing: border-box; }
.member-form label.choice input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--link); }
.member-form input:not([type="checkbox"]), .member-form select {
  min-height: 48px; padding: 0 var(--s3); font: 400 1rem var(--reading); color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); width: 100%; box-sizing: border-box;
}
.member-form select option, .member-form select optgroup { background: var(--panel); color: var(--text); }
.member-form button, .garage-actions button {
  justify-self: start; min-height: 48px; padding: 0 var(--s4); border: 0; border-radius: var(--r);
  background: var(--link); color: var(--on-brand); font: 800 1rem var(--display); cursor: pointer;
}
@media (prefers-color-scheme: dark) { .member-form button, .garage-actions button { color: #1b1f33; } }
.member-form button.secondary { background: var(--panel); color: var(--link); border: 1.5px solid var(--link); }
.member-form button.danger { background: var(--panel); color: var(--alarm); border: 2px solid var(--alarm); }
.garage-actions button.quiet {
  min-height: 44px; padding: 0; background: none; color: var(--link); font: 400 1rem var(--reading);
  text-decoration: underline; text-underline-offset: 0.15em;
}
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.problem { color: var(--alarm); font-weight: 700; display: grid; gap: var(--s1); }
.problem ul { list-style: disc; padding-left: 1.25rem; }
.address { overflow-wrap: anywhere; }
.saved { font-weight: 700; color: var(--link); }
.garage { display: grid; gap: var(--s3); }
.garage > li { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.garage-actions { display: flex; flex-wrap: wrap; gap: 0 var(--s4); align-items: center; }
.garage-actions a, .garage strong a { display: inline-flex; min-height: 44px; align-items: center; }

/* Readers' photos (decision 0121): the gallery folded under a generation's
   lead photo, the call to send one, and the member's form with its license. */
.more-photos { margin-top: var(--s2); }
.more-photos summary { display: inline-flex; min-height: 44px; align-items: center; color: var(--link); font-weight: 700; cursor: pointer; }
.more-photos .lead-photo { margin-top: var(--s3); }
.lead-photo .send-photo { display: inline-flex; min-height: 44px; align-items: center; margin-left: var(--s2); }
.photo-call { padding: var(--s3) var(--s4); background: var(--tint); border-radius: var(--r); font-weight: 700; }
.photo-call a { display: inline-flex; min-height: 44px; align-items: center; }
.member-form input[type="file"] { padding: var(--s3); }
.photo-tips { list-style: disc; padding-left: 1.25rem; display: grid; gap: var(--s1); }
.grant { display: grid; gap: var(--s2); padding: var(--s4); background: var(--tint); border-left: 3px solid var(--link); border-radius: var(--r); }
.sent-photos .status { font-weight: 700; }
form.tick-form { display: grid; }
form.tick-form > .member-form { padding-block: var(--s5); }

/* What's coming (decision 0118). One bar shares every generation out by
   make, alternating indigo and sand like the timeline bar, so it reads as
   parts of a whole, never as progress. An indigo ring marks what comes next
   in order, a dashed muted ring what comes later. No red: nothing warns. */
.roadmap-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.roadmap-totals > div:last-child:nth-child(odd) { grid-column: auto; }
.make-share { display: block; border-radius: 6px; overflow: hidden; }
.make-share rect + rect { stroke: var(--page); stroke-width: 2; }
.share-a { fill: var(--link); background: var(--link); }
.share-b { fill: var(--sand); background: var(--sand); }
.make-key { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.make-key li { display: inline-flex; flex-wrap: wrap; gap: 0 6px; align-items: center; min-height: 44px; }
.make-key a { font-weight: 700; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.road { display: grid; }
.stop { display: grid; grid-template-columns: 28px 1fr; gap: var(--s3); position: relative; padding-bottom: var(--s4); }
.stop::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 0; width: 2px; background: var(--line); }
.road > .stop:last-child::before { display: none; }
.stop-body { display: grid; gap: 2px; padding-top: 2px; }
.stop-body h3 { font-size: 1.125rem; }
.road-gap { padding: var(--s2) 0 var(--s3); }
.road-gap h3 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.mark-ring { fill: var(--panel); stroke: var(--link); stroke-width: 2.5; }
.mark-num { font: 800 13px var(--display); fill: var(--link); }
.mark-dash { fill: var(--page); stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 2.4; }
/* A plan card leads nowhere yet, so it carries no link colour or shadow. */
.plan-card { box-shadow: none; border-left-color: var(--line); }
.plan-card strong { color: var(--text); }
.features { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.feature { display: grid; gap: var(--s2); align-content: start; padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.feature h3 { font-size: 1.0625rem; }
.track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s1); }
.track li { position: relative; padding-top: 20px; font-size: 0.8125rem; line-height: 1.25; color: var(--muted); text-align: center; }
.track li::before { content: ""; position: absolute; top: 4px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); z-index: 1; }
.track li::after { content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.track li:first-child::after { display: none; }
.track li.on { color: var(--text); font-weight: 700; }
.track li.on::before { background: var(--link); border-color: var(--link); }
.track li.on::after { background: var(--link); }

/* --- Pages moved from the old frame (audit item 12) ---
   Articles, the glossary, tags, notes, compare, the survey, feedback,
   support, terms and privacy. Their markup is older than the 2.0 pages, so
   it is wrapped in .flow, which puts back the spacing between blocks that
   the 2.0 reset takes away. */
.flow { padding-block: var(--s4) var(--s7); }
.flow :where(p, ul, ol, dl, h2, h3, figure, blockquote, details, fieldset, form, section, table, div, header, article, nav, aside)
  + :where(p, ul, ol, dl, h2, h3, figure, blockquote, details, fieldset, form, section, table, div, header, article, nav, aside) { margin-top: var(--s3); }
.flow :where(*) + :where(h2) { margin-top: var(--s6); }
.flow :where(*) + :where(h3) { margin-top: var(--s4); }
.flow > h1 { margin-top: var(--s4); margin-bottom: var(--s3); }
.flow h2 { font-size: 1.375rem; }
.flow :where(p, li) { max-width: 42em; }
.flow :where(ul:not([class]), ol:not([class]), ul.facts) { padding-left: 1.3rem; list-style: revert; }
.flow :where(ul:not([class]), ol:not([class])) > li + li { margin-top: var(--s1); }
.lead { font-size: 1.125rem; color: var(--muted); }
.years, .covers, .aka, .label, .quiet, .evidence, .count { color: var(--muted); }
.years, .covers { font-weight: 400; letter-spacing: 0; }
.label { font-size: 0.85rem; }
.crumbs .sep { margin: 0 0.45em; }
ul.stats, ul.year-chips { font-variant-numeric: tabular-nums; }
ul.stats strong, ul.year-chips, .card-meta, .byline, form.compare select { font-family: var(--display); }

.page-head { margin-bottom: var(--s4); }
.page-head > h1:first-child { margin-top: var(--s5); }
.page-head > .crumbs + h1 { margin: var(--s4) 0 var(--s2); }
/* On-page contents and lists of links get the 24px targets breadcrumbs have. */
.flow .jump a, ul.found-in a, ol.marks a, .compare-link a { display: inline-flex; align-items: center; min-height: 24px; }

/* Tags, as pills. */
ul.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.6rem 0; }
.flow ul.tags + * { margin-top: var(--s3); }
ul.tags a { display: inline-flex; align-items: center; min-height: 32px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 0.875rem; 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; margin-left: 0.3em; color: var(--muted); }
.tag-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 4px 24px; }
.tag-group h3 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0.6rem 0 0; }
ul.about-links { display: flex; flex-wrap: wrap; gap: 8px; }
ul.about-links a { display: inline-flex; align-items: center; min-height: 32px; 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); }

/* Number tiles. */
ul.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 10px; margin: 1.2rem 0; }
ul.stats li { max-width: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; color: var(--muted); font-size: 0.9rem; }
ul.stats li:has(> a) { padding: 0; }
ul.stats a { display: block; padding: 10px 14px; color: inherit; text-decoration: none; border-radius: var(--r); }
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; }

/* Model cards, on a tag's list. */
ul.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: 16px; }
ul.model-grid > li { max-width: none; }
.model-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 8px 12px; box-shadow: var(--shadow); transition: transform var(--fast) ease; }
.model-card:hover, .model-card:focus-within { transform: translateY(-2px); }
.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; }
.photo-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--r) - 4px); background: var(--brand-deep); }
.photo-slot { display: flex; align-items: center; min-height: 2.25rem; padding: 0 12px; border: 1px dashed var(--line); border-radius: calc(var(--r) - 4px); background: var(--page); color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.card-credit { padding: 0 6px; color: var(--muted); font-size: 0.8rem; }
.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(--alarm); font-weight: 700; font-size: 0.875rem; 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; }
.card-rare { color: var(--good); font-weight: 700; font-size: 0.875rem; margin: 0.4rem 0 0; padding: 0 6px; }
.card-rare::before { content: "★ "; }
@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-frame { grid-row: 1 / span 4; margin-bottom: 0; }
  .card-link .photo-frame img { aspect-ratio: 4 / 3; }
  .model-card .card-link:has(> .photo-slot) { grid-template-columns: minmax(0, 1fr); }
  .card-link .photo-slot { margin-bottom: 6px; }
  .card-credit, .card-make, .card-meta, .card-link h3 { padding: 0; }
  .card-link h3 { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .model-card { transition: none; } .model-card:hover, .model-card:focus-within { transform: none; } }

/* Problems, claims and maintenance, each on its own card. */
ul.issues, ul.claims, ul.recalls { display: grid; gap: 10px; }
ul.issues > li, ul.claims > li, ul.recalls > li { max-width: 52rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; box-shadow: var(--shadow); }
ul.issues > li[id] { scroll-margin-top: 120px; }
ul.issues p, ul.claims p, ul.recalls p { margin: 0.35rem 0 0; }
ul.issues summary, ul.claims summary { list-style-position: outside; margin-left: 1rem; }
.flag.calm { background: var(--tint); color: var(--text); border: 1px solid var(--line); }
.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.875rem; }

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 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; } }

ul.found-in { display: grid; gap: 10px; }
ul.found-in ul { margin: 0.2rem 0 0; }
ul.engine-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
ul.engine-list > li { max-width: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; }
ul.engine-list a { display: inline-flex; align-items: center; min-height: 24px; }
ul.engine-list p { margin: 0.2rem 0 0; }

/* A glossary term or a note, on one raised sheet. */
.dossier { margin-top: 14px; }
.sheet-head { padding-top: var(--s4); }
.sheet-head h1 { font-size: clamp(1.75rem, 6vw, 2.4rem); margin: var(--s3) 0 var(--s2); line-height: 1.1; }
@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; }
}

/* Year chips, for the years a term or a comparison covers. */
ul.year-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.5rem 0; }
ul.year-chips a { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 9px; border-radius: 7px; background: var(--sand); color: var(--on-sand); font-size: 0.875rem; 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); }
.year-title { margin-top: 0.4rem; }
ol.marks { 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; }

/* Compare two years. */
ul.compare-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1rem 0; }
ul.compare-heads > li { display: flex; flex-direction: column; gap: 2px; max-width: none; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); 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-size: 1rem; min-height: 44px; padding: 8px 10px; border: 1px solid var(--muted); border-radius: 6px; background: var(--panel); color: var(--text); max-width: 100%; }
.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; } }
.line .covers { display: block; font-size: 0.85rem; }
form.compare button { min-height: 44px; padding: 0 var(--s4); border: 0; border-radius: var(--r); background: var(--link); color: var(--on-brand); font: 700 1rem var(--reading); cursor: pointer; }
/* Paint colors on a comparison, a tile each. A limited color carries an
   orange mark, never red, because red is kept for warnings. */
.flow ul.colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: 8px; }
.flow ul.colors > li { max-width: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; }
.flow ul.colors > li.is-rare { border-color: var(--good); }
a.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; }
a.rare::before { content: "★ "; }

/* Articles. */
ul.article-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
ul.article-cards > li { max-width: none; }
ul.article-cards a { display: block; height: 100%; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); color: var(--text); text-decoration: none; }
ul.article-cards a:hover strong { color: var(--link); text-decoration: underline; }
ul.article-cards strong { display: block; margin: 4px 0 2px; font-family: var(--display); font-size: 1.125rem; }
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.8125rem; }
.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; 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(--sand); background: var(--panel); padding: 10px 14px; border-radius: 0 var(--r) var(--r) 0; font-size: 0.95rem; }

/* Forms: feedback and the survey. Big targets, one column. */
form.feedback { display: grid; gap: 8px; max-width: 40rem; }
form.feedback input[type="text"], form.feedback input[type="email"], form.feedback textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--muted); border-radius: 6px; background: var(--panel); color: var(--text); width: 100%; }
form.feedback fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; margin: 8px 0; min-width: 0; }
form.feedback label.choice { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 0; }
form.feedback button { justify-self: start; min-height: 44px; padding: 0 var(--s5); border: 0; border-radius: var(--r); background: var(--link); color: var(--on-brand); font: 700 1rem var(--reading); cursor: pointer; }
.hint { color: var(--muted); font-weight: 400; font-size: 0.9rem; }
a.support-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; padding: 0 var(--s5); border-radius: var(--r); background: var(--link); color: var(--on-brand); text-decoration: none; }
@media (prefers-color-scheme: dark) { form.feedback button, form.compare button, a.support-link { color: #1b1f33; } }

/* The end of an article (decision 0126): members' answers, the author's
   blurb, then members' comments. Each sits in its own panel. */
article.piece .answers, article.piece .author-blurb, article.piece .comments { margin-top: var(--s5); padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
article.piece .answers h2, article.piece .author-blurb h2, article.piece .comments h2 { margin-top: 0; font-size: 1.15rem; }
.answer-form { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; }
.answer { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.answer button { min-height: 44px; min-width: 6rem; padding: 0 var(--s4); border: 1.5px solid var(--link); border-radius: var(--r); background: var(--panel); color: var(--link); font: 700 1rem var(--reading); cursor: pointer; }
.answer button[aria-pressed="true"] { background: var(--link); color: var(--on-brand); }
@media (prefers-color-scheme: dark) { .answer button[aria-pressed="true"] { color: #1b1f33; } }
.answer .count, .answer-counts { color: var(--muted); }
.answer-counts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); list-style: none; padding: 0; }
.comment-list { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.comment-list > li { border-top: 1px solid var(--line); padding-top: var(--s3); overflow-wrap: anywhere; }
.comment-list p { margin: var(--s1) 0; }
.member-tag { display: inline-block; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.small-form button { min-height: 32px; padding: 0; background: none; border: 0; color: var(--link); font: 400 0.9rem var(--reading); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.comment-form textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--muted); border-radius: var(--r); background: var(--panel); color: var(--text); width: 100%; box-sizing: border-box; }
a.sign-in-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }