/* VIN decoding in the AUTODOC tools family, not a copy of one of them: the lockup, Inter and the ink button of all
   three; AB Dashboard's cool terminal ground and its violet; Studio's glow and glass, held behind the VIN field. What
   is this page's own: the workshop shadow board behind the hero (pegboard holes, the painted outlines of a mechanic's
   tools, the gear that turns while the decoder works) and the chassis plate, the 17 cells the VIN fills. The brand
   orange lives in the lockup, the glow, the gear and the focus ring, never on a button. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-variable.woff2') format('woff2');
}

:root {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #EEF0F3;
  --line: rgba(17, 19, 23, 0.10);
  --line-2: rgba(17, 19, 23, 0.18);
  --ink: #111317;
  --ink-2: #3F4550;
  --ink-3: #5F6672;
  --solid: #111317;
  --solid-ink: #FFFFFF;
  --brand: #F85A00;
  --focus: #F85A00;
  --focus-soft: rgba(248, 90, 0, 0.14);
  --ok: oklch(0.52 0.14 150);
  --ok-soft: oklch(0.52 0.14 150 / 0.12);
  --maybe: oklch(0.58 0.13 75);
  --maybe-soft: oklch(0.70 0.13 75 / 0.16);
  --bad: #C8323A;
  --bad-soft: rgba(200, 50, 58, 0.10);
  --bar: rgba(17, 19, 23, 0.28);
  --hole: rgba(17, 19, 23, 0.11);
  --tool: rgba(17, 19, 23, 0.075);
  --tool-hot: rgba(248, 90, 0, 0.17);
  --violet: #8B7BE8;
  --photo-bg: #EEF0F3; --photo-ink: #5F6672;
  --glass: color-mix(in srgb, var(--surface) 76%, transparent);
  --blur: blur(20px) saturate(1.18);
  --shadow-lg: 0 32px 80px -28px rgba(17, 19, 23, 0.30), 0 4px 14px -6px rgba(17, 19, 23, 0.12);
  --shadow-sm: 0 10px 30px -14px rgba(17, 19, 23, 0.22);
  --field-opacity: 0.42;
  --mono: 'SF Mono', ui-monospace, 'Cascadia Code', Consolas, 'Liberation Mono', monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 160ms var(--ease);
  --r: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D0F13; --surface: #181B21; --surface-2: #1E222A; --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.17);
    --ink: #ECEDEF; --ink-2: #B0B6BF; --ink-3: #8E95A0; --hole: rgba(255, 255, 255, 0.075); --tool: rgba(255, 255, 255, 0.05); --tool-hot: rgba(243, 124, 46, 0.2); --solid: #FFFFFF; --solid-ink: #17140F; --focus: #FF7A2E; --focus-soft: rgba(255, 122, 46, 0.22);
    --ok: oklch(0.76 0.15 150); --ok-soft: oklch(0.76 0.15 150 / 0.14); --maybe: oklch(0.82 0.13 80); --maybe-soft: oklch(0.82 0.13 80 / 0.14);
    --bad: #FF6B70; --bad-soft: rgba(255, 107, 112, 0.14); --bar: rgba(255, 255, 255, 0.34);
    --glass: color-mix(in srgb, var(--surface) 68%, transparent);
    --shadow-lg: 0 34px 90px -30px rgba(0, 0, 0, 0.85), 0 4px 14px -6px rgba(0, 0, 0, 0.6); --shadow-sm: 0 12px 34px -16px rgba(0, 0, 0, 0.8);
    --field-opacity: 0.30; color-scheme: dark;
    --photo-bg: #DADDE2; --photo-ink: #4A505A;
  }
}
:root[data-theme="dark"] {
  --bg: #0D0F13; --surface: #181B21; --surface-2: #1E222A; --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 255, 255, 0.17);
  --ink: #ECEDEF; --ink-2: #B0B6BF; --ink-3: #8E95A0; --hole: rgba(255, 255, 255, 0.075); --tool: rgba(255, 255, 255, 0.05); --tool-hot: rgba(243, 124, 46, 0.2); --solid: #FFFFFF; --solid-ink: #17140F; --focus: #FF7A2E; --focus-soft: rgba(255, 122, 46, 0.22);
  --ok: oklch(0.76 0.15 150); --ok-soft: oklch(0.76 0.15 150 / 0.14); --maybe: oklch(0.82 0.13 80); --maybe-soft: oklch(0.82 0.13 80 / 0.14);
  --bad: #FF6B70; --bad-soft: rgba(255, 107, 112, 0.14); --bar: rgba(255, 255, 255, 0.34);
  --glass: color-mix(in srgb, var(--surface) 68%, transparent);
  --shadow-lg: 0 34px 90px -30px rgba(0, 0, 0, 0.85), 0 4px 14px -6px rgba(0, 0, 0, 0.6); --shadow-sm: 0 12px 34px -16px rgba(0, 0, 0, 0.8);
  --field-opacity: 0.30; color-scheme: dark;
  --photo-bg: #DADDE2; --photo-ink: #4A505A;
}

* { box-sizing: border-box; }
/* theme.js: the frame the theme changes in, no colour fades (everything turns at once) */
:root[data-theme-switch] *, :root[data-theme-switch] *::before, :root[data-theme-switch] *::after { transition: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
  position: relative;
  overflow-x: hidden;
}
::selection { background: var(--focus-soft); color: var(--ink); }
input, button { caret-color: var(--focus); }
a { color: var(--ink); text-decoration-color: var(--line-2); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color var(--t); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* the backdrop, held at the top of the page where the VIN is typed (it scrolls away with the hero; the answer and
   the tables sit on the plain ground): Studio's glow, cut to two lights, AB's orange and violet, behind the field;
   over it the shadow board, faded out where the question and the VIN are */
.field { position: absolute; inset: 0 0 auto; height: 900px; z-index: 0; pointer-events: none; overflow: hidden; }
.field::before, .field::after { content: ''; position: absolute; border-radius: 50%; filter: blur(100px); opacity: var(--field-opacity); }
.field::before { width: 640px; height: 520px; left: calc(50% - 560px); top: 250px; background: radial-gradient(circle at 60% 50%, var(--violet), transparent 66%); }
.field::after { width: 700px; height: 560px; left: calc(50% - 60px); top: 200px; background: radial-gradient(circle at 40% 50%, var(--brand), transparent 64%); }
.board {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  background-image: radial-gradient(circle, var(--hole) 1.6px, transparent 2.1px);
  background-size: 24px 24px; background-position: 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse 34% 46% at 50% 44%, transparent 30%, #000 100%), linear-gradient(#000 55%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 34% 46% at 50% 44%, transparent 30%, #000 100%), linear-gradient(#000 55%, transparent 98%);
  mask-composite: intersect;
}
.board .tool { fill: var(--tool); }
.board .gear-main { fill: var(--tool-hot); }
.gear-main, .gear-small { transform-box: fill-box; transform-origin: center; }
/* every character typed turns the gear one tooth, like a ratchet (app.js sets --teeth) */
.gear-main { transform: rotate(calc(var(--teeth, 0) * 20deg)); }
.gear-small { transform: rotate(calc(8deg - var(--teeth, 0) * 32.73deg)); }
@media (prefers-reduced-motion: no-preference) {
  .gear-main, .gear-small { transition: transform 240ms var(--ease); }
}
@media (prefers-reduced-motion: no-preference) {
  /* the decoder at work: the big gear turns, the small one with it (18 teeth to 11) */
  body.is-decoding .gear-main { animation: turn 3.6s linear infinite; }
  body.is-decoding .gear-small { animation: turn-back 3.6s linear infinite; }
}
@keyframes turn { from { transform: rotate(calc(var(--teeth, 0) * 20deg)); } to { transform: rotate(calc(var(--teeth, 0) * 20deg + 360deg)); } }
@keyframes turn-back { from { transform: rotate(calc(8deg - var(--teeth, 0) * 32.73deg)); } to { transform: rotate(calc(8deg - var(--teeth, 0) * 32.73deg - 589deg)); } }
.nav, main, .foot { position: relative; z-index: 2; }

/* ---- the top strip: lockup, product, theme ---- */
.nav { display: flex; align-items: center; gap: 14px; max-width: 1180px; margin: 0 auto; padding: 18px 26px; }
.brand { display: flex; align-items: center; color: var(--ink); border-radius: 6px; }
.lockup { height: 19px; width: auto; display: block; }
.divider { width: 1px; height: 22px; background: var(--line-2); flex: none; }
.product { font-size: 14px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.01em; white-space: nowrap; }
.spacer { flex: 1; }
.pill { display: flex; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--glass); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); }
.theme { padding: 3px; gap: 2px; }
.theme label { position: relative; display: block; cursor: pointer; }
.theme input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.theme-f { display: grid; place-items: center; width: 34px; height: 30px; border-radius: var(--r-pill); color: var(--ink-3); transition: background var(--t), color var(--t); }
.theme-f svg { width: 17px; height: 17px; display: block; }
.theme label:hover .theme-f { color: var(--ink); }
.theme input:checked + .theme-f { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.theme input:focus-visible + .theme-f { outline: 2px solid var(--focus); outline-offset: 1px; }

main { max-width: 1180px; margin: 0 auto; padding: 0 26px; }

/* ---- the hero: one question, one field ---- */
.hero { padding: min(9vh, 80px) 0 0; text-align: center; }
h1 { margin: 0 0 14px; font-size: clamp(2.4rem, 5.6vw, 4.1rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
.hero > .lead { margin: 0 auto 34px; max-width: 56ch; font-size: 18px; color: var(--ink-2); text-wrap: pretty; }
h2 { margin: 0 0 18px; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 28px 0 6px; }
.lead { color: var(--ink-2); max-width: 66ch; }

.composer {
  max-width: 780px; margin: 0 auto; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--glass); backdrop-filter: var(--blur); box-shadow: var(--shadow-lg);
  padding: 22px 22px 18px;
  transition: border-color var(--t);
}
.composer:focus-within { border-color: var(--line-2); }
.vin-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 2px 8px; }
.vin-input {
  width: 100%; display: block;
  font: 600 clamp(20px, 3.6vw, 30px)/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 15px 18px;
  transition: border-color var(--t), box-shadow var(--t);
}
.vin-input::placeholder { color: var(--ink-3); opacity: 0.55; }
.vin-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px var(--focus-soft); }

/* the VIN: typed in one field, shown as the 17 cells of a chassis plate, read segment by segment */
.plate { display: grid; grid-template-columns: 3fr 6fr 8fr; gap: 10px; margin: 14px 0 4px; }
.seg { min-width: 0; }
.cells { display: grid; gap: 3px; }
.cells.n3 { grid-template-columns: repeat(3, 1fr); }
.cells.n6 { grid-template-columns: repeat(6, 1fr); }
.cells.n8 { grid-template-columns: repeat(8, 1fr); }
.cell { aspect-ratio: 3 / 4; display: grid; place-items: center; background: var(--surface-2); border: 1px solid transparent; border-radius: 7px; font: 600 clamp(11px, 2.2vw, 17px) var(--mono); color: var(--ink); }
.cell.empty { color: transparent; }
.cell.used { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.cell.bad { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.seg-name { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.3; }
.seg-read { font-size: 13px; color: var(--ink); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.composer-bar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 14px; }

/* the button that acts: ink, never the brand orange */
.go {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1 'Inter', system-ui, sans-serif; text-decoration: none;
  background: var(--solid); color: var(--solid-ink); border: 0; border-radius: var(--r-pill); padding: 13px 24px; cursor: pointer;
  transition: opacity var(--t), transform var(--t);
}
.go:hover:not(:disabled) { opacity: 0.86; }
.go:active:not(:disabled) { transform: translateY(1px); }
.go:disabled { opacity: 0.45; cursor: progress; }


/* ---- the answer ---- */
.result { max-width: 1040px; margin: 48px auto 0; }
.found {
  --state: var(--ink-3); --state-soft: transparent;
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-lg);
  padding: 26px 30px 24px; margin: 0 0 18px;
}
/* the state washes the top of the card in its own tint: found, to confirm or not found reads before a word does */
.found::before { content: ''; position: absolute; inset: 0 0 auto; height: 220px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--state-soft), transparent); }
.state-ok { --state: var(--ok); --state-soft: var(--ok-soft); }
.state-maybe { --state: var(--maybe); --state-soft: var(--maybe-soft); }
.state-bad { --state: var(--bad); --state-soft: var(--bad-soft); }
.ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.found-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.found-state { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; padding: 5px 12px 5px 10px; border-radius: var(--r-pill); color: var(--ink-2); background: var(--surface-2); }
.found-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--state); box-shadow: 0 0 0 3px color-mix(in srgb, var(--state) 22%, transparent); }
.state-ok .found-state, .state-maybe .found-state, .state-bad .found-state { color: color-mix(in srgb, var(--state) 72%, var(--ink)); background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state) 30%, transparent); }
button.real { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 'Inter', system-ui, sans-serif; padding: 6px 12px; border-radius: var(--r-pill); border: 0; cursor: pointer; color: var(--ink-2); background: var(--surface-2); transition: background var(--t); }
button.real .ico { width: 14px; height: 14px; }
button.real.exact { color: var(--ok); background: var(--ok-soft); }
button.real.low { color: var(--bad); background: var(--bad-soft); }
.real-q { font-weight: 500; color: var(--ink-3); padding-left: 6px; margin-left: 2px; border-left: 1px solid var(--line-2); }
button.real[aria-expanded="true"] .real-q { color: var(--ink); }
.real-why ul { margin: 12px 0 0; padding: 12px 16px 12px 32px; border-radius: var(--r); background: var(--surface-2); color: var(--ink-2); font-size: 14px; }
.real-why li + li { margin-top: 3px; }
/* the model's photo beside the title: the shop's photos are on white, so they sit on a light tile in both themes and
   multiply into it (no white box on the dark card); the box is sized before the image comes, which then fades in */
.found-top.has-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 36%); gap: 4px 28px; align-items: center; }
.found-photo { margin: 18px 0 0; padding: 12px 16px 8px; border-radius: var(--r-lg); background: var(--photo-bg); }
.found-photo img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 287; mix-blend-mode: multiply; opacity: 0; transition: opacity 360ms var(--ease); }
.found-photo img.is-in { opacity: 1; }
.found-photo figcaption { margin-top: 4px; font-size: 11.5px; line-height: 1.3; color: var(--photo-ink); text-align: right; }
.found-title { font-size: clamp(28px, 3.8vw, 40px); line-height: 1.05; margin: 18px 0 10px; font-weight: 650; letter-spacing: -0.035em; text-wrap: balance; }
.found-lead { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 600; max-width: 62ch; text-wrap: pretty; }
.found-likely { font-weight: 500; color: var(--ink-2); }
.found-line { margin: 6px 0 0; max-width: 70ch; color: var(--ink-2); text-wrap: pretty; }
/* make, model, year, engine: read, estimated or still open */
.steps { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 18px 0 0; padding: 0; font-size: 14px; font-weight: 600; }
.steps li { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.steps li + li::before { content: ''; width: 26px; height: 1px; margin: 0 10px; background: var(--line-2); }
.step-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.step-dot .ico { width: 13px; height: 13px; stroke-width: 2.2; }
.step-ok .step-dot { color: var(--ok); background: var(--ok-soft); }
.step-maybe { color: color-mix(in srgb, var(--maybe) 70%, var(--ink)) !important; }
.step-maybe .step-dot { color: color-mix(in srgb, var(--maybe) 80%, var(--ink)); background: var(--maybe-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--maybe) 45%, transparent); }
.step-none { color: var(--ink-3) !important; }
.step-none .step-dot { color: var(--ink-3); background: var(--surface-2); }
.found-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 26px; margin: 22px 0 0; }
.found-facts div { border-top: 1px solid var(--line); padding: 12px 0 13px; min-width: 0; }
.found-facts div.wide { grid-column: span 2; }
.found-facts dt { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.found-facts dd { margin: 3px 0 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* the car ID and the KBA number: the two numbers to find this car again, in the plate's monospace, one click to copy */
.ids { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; margin: 6px 0 0; border-radius: var(--r-lg); overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.id { display: grid; gap: 2px; padding: 13px 16px 14px; background: var(--surface-2); }
.id-k { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.id-row { display: flex; align-items: center; gap: 8px; }
.id-v { font: 600 22px/1.25 var(--mono); letter-spacing: 0.06em; color: var(--ink); font-variant-numeric: tabular-nums; }
.id-h { font-size: 12.5px; color: var(--ink-3); }
button.copy { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: color var(--t), border-color var(--t), background var(--t); }
button.copy:hover { color: var(--ink); border-color: var(--ink-3); }
button.copy .ico { width: 15px; height: 15px; grid-area: 1 / 1; transition: opacity var(--t), transform var(--t); }
button.copy .ico:last-child { opacity: 0; transform: scale(0.6); color: var(--ok); stroke-width: 2.2; }
button.copy.is-done { border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: var(--ok-soft); }
button.copy.is-done .ico:first-child { opacity: 0; transform: scale(0.6); }
button.copy.is-done .ico:last-child { opacity: 1; transform: none; }
.found-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
.found-cta .go { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.found-cta .go .ico { transition: transform var(--t); }
.found-cta .go:hover .ico { transform: translateX(3px); }
.found-alt { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; }
.found-alt .ico { color: var(--ink-3); }
.found-basis { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.found-basis p { margin: 0; max-width: 90ch; }
.found-basis p + p { margin-top: 3px; }

.stamp { display: inline-block; font-size: 13px; font-weight: 600; border-radius: var(--r-pill); padding: 4px 11px; background: var(--surface-2); color: var(--ink-2); }
.stamp.high, .stamp.exact { color: var(--ok); background: var(--ok-soft); }
.stamp.low { color: var(--bad); background: var(--bad-soft); }
.answer-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-top: 18px; }
.answer-head h3 { font-size: 26px; margin: 0; letter-spacing: -0.02em; }
.note { color: var(--ink-2); margin: 8px 0 0; max-width: 72ch; font-size: 15px; }
.warn { color: var(--bad); margin: 10px 0 0; }
.pct { color: var(--ink-3); font-size: 13px; font-weight: 400; }
.pick-head { font-size: 22px; letter-spacing: -0.02em; margin: 34px 0 0; }

/* tables: quiet rules, tabular figures */
.table-wrap { width: 100%; }
table { width: 100%; border-collapse: collapse; margin-top: 14px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
th { font-size: 12px; color: var(--ink-3); font-weight: 500; padding-top: 6px; padding-bottom: 8px; }
td.num, th.num { text-align: right; }
td a { font-weight: 500; }
tr.first td { font-weight: 600; }

/* «Which one is yours?»: one row per version on one quiet surface; the decoder's pick first */
.pick { margin-top: 40px; }
.pick-sub { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; max-width: 76ch; }
.pick-sub b { color: var(--ink); font-weight: 600; }
.vers { list-style: none; margin: 16px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.ver { display: grid; grid-template-columns: 112px minmax(0, 1fr) 200px auto; align-items: center; gap: 10px 24px; padding: 16px 18px 16px 16px; transition: background var(--t); }
/* each version's model photo, small, on the same light tile; a drawn car where the shop has none */
.ver-pic { display: grid; place-items: center; align-self: start; width: 112px; aspect-ratio: 200 / 72; padding: 4px 6px; box-sizing: border-box; border-radius: 10px; background: var(--photo-bg); color: var(--photo-ink); }
.ver-pic img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; opacity: 0; transition: opacity 360ms var(--ease); }
.ver-pic img.is-in { opacity: 1; }
.ver-pic.is-empty { background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.ver.first .ver-pic.is-empty { background: var(--surface); }
.ico-car { width: 40px; height: 20px; stroke-width: 1.5; opacity: 0.7; }
.ver + .ver { border-top: 1px solid var(--line); }
.ver:hover { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.ver.first { background: var(--surface-2); }
.ver-name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.ver-name a { text-decoration-color: transparent; }
.ver-name a:hover { text-decoration-color: currentColor; }
.ver-tag { display: inline-block; vertical-align: 1px; margin-left: 6px; padding: 2px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: var(--solid-ink); background: var(--solid); white-space: nowrap; }
.ver-specs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 7px 0 0; padding: 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ver-specs span { padding: 2px 8px; border-radius: 6px; background: var(--surface-2); }
.ver.first .ver-specs span { background: var(--surface); }
.ver-specs .ver-kw { font-weight: 650; color: var(--ink); }
.ver-ids { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-3); }
.ver-ids b { font: 600 12.5px var(--mono); letter-spacing: 0.03em; color: var(--ink-2); }
.ver-share { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.ver-share .bar { order: -1; display: block; height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.ver.first .ver-share .bar { background: var(--surface); }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--ink-2); transform-origin: left center; }
.ver.first .bar i { background: var(--ink); }
.ver-pct { min-width: 4ch; text-align: right; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
button.mine {
  display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1 'Inter', system-ui, sans-serif; white-space: nowrap; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 10px 16px; cursor: pointer; transition: border-color var(--t), background var(--t), color var(--t), transform var(--t);
}
button.mine .ico { width: 15px; height: 15px; stroke-width: 2.2; }
button.mine:hover { border-color: var(--ink); }
button.mine:active { transform: scale(0.97); }
button.mine .mine-on { display: none; }
button.mine[aria-pressed="true"] { background: var(--solid); border-color: var(--solid); color: var(--solid-ink); }
button.mine[aria-pressed="true"] .mine-on { display: inline-flex; align-items: center; gap: 6px; }
button.mine[aria-pressed="true"] .mine-off { display: none; }
.ver.picked { background: var(--ok-soft); }
.ver.picked .ver-specs span, .ver.picked .bar { background: var(--surface); }
.more-cars { margin-top: 14px; }
.more-cars .vers { margin-top: 10px; }
.more-cars .ver { padding-top: 12px; padding-bottom: 12px; }
/* «Details» inside an answer: closed by default, for whoever wants every table */
.a .more { margin-top: 18px; border-top: 1px solid var(--line-2); padding-top: 4px; }
.a .more > summary { cursor: pointer; font-weight: 600; font-size: 15px; padding: 8px 0; color: var(--ink-2); }
.a .more > summary:hover { color: var(--ink); }
.a .more > summary::marker { color: var(--ink-3); }
.a .more[open] > summary { margin-bottom: 8px; }
.more-cars > summary { cursor: pointer; font-weight: 600; font-size: 15px; padding: 6px 0; }
.more-cars > summary::marker { color: var(--ink-3); }
.owners { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--ok); }
.maker-data { margin-top: 26px; }
.maker-data h4 { margin: 0; font-size: 16px; font-weight: 600; }
.maker-data th { width: 170px; color: var(--ink-3); font-weight: 500; font-size: 13px; }

.verdict { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface-2); }
.verdict p { margin: 0 auto 0 0; font-weight: 400; color: var(--ink-2); font-size: 15px; max-width: 60ch; }
.verdict p b { color: var(--ink); font-weight: 600; }
.verdict button { font: 600 14px/1 'Inter', system-ui, sans-serif; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 10px 16px; cursor: pointer; transition: border-color var(--t), background var(--t); }
.verdict button:hover { border-color: var(--ink); }
.verdict button[aria-pressed="true"] { background: var(--solid); color: var(--solid-ink); border-color: var(--solid); }
.actual { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.actual input { font: inherit; font-size: 15px; flex: 1 1 260px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 10px 16px; }
.actual input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-soft); }
.thanks { color: var(--ok); font-weight: 600; }

/* the answer arrives once per decode: one rise, nothing on later updates */
@media (prefers-reduced-motion: no-preference) {
  .result.is-in > * { animation: rise 340ms var(--ease) both; }
  .result.is-in > *:nth-child(2) { animation-delay: 40ms; }
  .result.is-in > *:nth-child(n+3) { animation-delay: 80ms; }
  .result.is-in .bar i { animation: fill 720ms var(--ease) 260ms both; }
  .result.is-in .ver:nth-child(2) .bar i { animation-delay: 320ms; }
  .result.is-in .ver:nth-child(3) .bar i { animation-delay: 380ms; }
  .result.is-in .ver:nth-child(n+4) .bar i { animation-delay: 440ms; }
  .cell { transition: background var(--t), border-color var(--t); }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes fill { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .found-photo img, .ver-pic img { transition: none; } }

/* ---- how it works: one card per question, the answer folded under it, opened with a short glide ---- */
.faq { max-width: 880px; margin: 96px auto 72px; }
.faq > h2 { margin: 0 0 18px; }
.qa { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 12px; transition: border-color var(--t), box-shadow 280ms var(--ease); }
.qa:hover { border-color: var(--line-2); }
.qa[open] { box-shadow: var(--shadow-sm); border-color: var(--line-2); }
.qa > summary { display: flex; align-items: center; gap: 14px; padding: 18px 18px 18px 22px; cursor: pointer; list-style: none; border-radius: var(--r-lg); }
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.q { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.a-peek { margin-left: auto; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; background: var(--surface-2); border-radius: var(--r-pill); padding: 5px 11px; white-space: nowrap; }
.a-peek:empty { display: none; }
.chev { width: 32px; height: 32px; padding: 6px; flex: none; color: var(--ink-3); border-radius: var(--r-pill); background: var(--surface-2); transition: transform 280ms var(--ease), color var(--t), background var(--t); }
.qa > summary:not(:has(.a-peek:not(:empty))) .chev { margin-left: auto; }
.qa > summary:hover .chev { color: var(--ink); }
.qa[open] > summary .chev { transform: rotate(180deg); color: var(--ink); }
/* the folded part: its own box, so its height can glide (api: app.js «folds») */
.a { padding: 2px 22px 24px; }
.a > p, .a .lead { max-width: 70ch; }
.a > p:first-child, .a > .lead:first-child { margin-top: 0; }
.a > p { color: var(--ink-2); }
.a b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 18px; }
.figure { background: var(--surface-2); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.figure strong { font-size: 28px; font-weight: 650; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--ink); }
.figure span { font-size: 13px; color: var(--ink-2); }
#benchSummary p { margin: 0 0 10px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); color: var(--ink-2); max-width: none; }
#benchSummary p:last-child { margin-bottom: 0; }

.foot { max-width: 1180px; margin: 0 auto; padding: 22px 26px 36px; color: var(--ink-3); font-size: 13px; border-top: 1px solid var(--line); }
.foot p { max-width: 110ch; margin: 0; }

@media (max-width: 720px) {
  /* on a phone the board shrinks so its tools stay in view around the question, not cut off at the sides */
  .board { width: 640px; height: 400px; left: 50%; transform: translateX(-50%); top: 40px;
    -webkit-mask-image: radial-gradient(ellipse 26% 34% at 50% 50%, transparent 35%, #000 100%), linear-gradient(#000 60%, transparent 100%);
    mask-image: radial-gradient(ellipse 26% 34% at 50% 50%, transparent 35%, #000 100%), linear-gradient(#000 60%, transparent 100%); }
  .field::before { left: -40%; top: 280px; width: 420px; height: 420px; }
  .field::after { left: 20%; top: 240px; width: 420px; height: 420px; }
  .nav { padding: 14px 16px; gap: 10px; }
  .lockup { height: 15px; }
  .divider { height: 18px; }
  .product { font-size: 13px; }
  main { padding: 0 16px; }
  .hero { padding-top: 34px; }
  .hero > .lead { font-size: 16px; margin-bottom: 24px; }
  .composer { padding: 14px 14px 14px; border-radius: 22px; }
  .vin-input { padding: 13px 14px; letter-spacing: 0.06em; border-radius: 14px; }
  .plate { gap: 4px; }
  .cells { gap: 2px; }
  .cell { border-radius: 4px; }
  .seg-name { font-size: 11px; }
  .seg-read { font-size: 12px; }
  .composer-bar .go { width: 100%; }
  .result { margin-top: 32px; }
  .found { padding: 20px 18px 18px; border-radius: 22px; }
  .found-title { margin-top: 16px; }
  .found-lead { font-size: 16px; }
  .steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 13.5px; }
  .steps li + li::before { display: none; }
  .found-facts { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .found-facts dd { font-size: 14px; }
  .id-v { font-size: 19px; }
  .found-cta .go { width: 100%; justify-content: center; }
  .table-wrap { overflow-x: auto; }
  .found-top.has-photo { grid-template-columns: 1fr; }
  .found-photo { order: -1; margin-top: 14px; padding: 10px 12px 6px; }
  .ver { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px 14px; padding: 14px 14px 14px 14px; }
  .ver-pic { width: 76px; padding: 3px 4px; border-radius: 8px; }
  .ver-main { grid-column: 2 / -1; }
  .ver-share { grid-column: 1 / 3; }
  .ver-name { font-size: 14.5px; }
  .figures { grid-template-columns: 1fr; }
  .faq { margin-top: 64px; }
  .q { font-size: 16px; }
  .a-peek { display: none; }
  .qa > summary .chev { margin-left: auto; }
  .qa > summary { padding: 16px 14px 16px 16px; }
  .a { padding: 2px 16px 20px; }
  .figure strong { font-size: 24px; }
  .verdict p { margin-right: 0; }
  .foot { padding: 18px 16px 30px; }
}

/* /licences: the attributions the registers' licences ask for, on their own page */
.licences { max-width: 760px; margin: 0 auto; padding: 40px 20px 60px; color: var(--ink-2); }
.licences h1 { color: var(--ink); font-size: 28px; margin: 12px 0 14px; }
.licences li { margin: 4px 0; }
.licences a { color: var(--ink); }