/* Regish – one hand-written stylesheet.
   Organised CUBE-style: tokens, reset, base elements, compositions (layout), utilities, blocks.
   Spec: WEBSITE_PLAN.md section 5. Type and space scales from utopia.fyi (16→18 px, 1.2→1.25). */

/* ---------------------------------------------------------------- Fonts */

/* The UK number plate font (K-Type, used with permission; D23). Subset to A-Z, 0-9, space and _ (3 KB), made
   from private/Font Charles wright/CharlesWright-Bold.otf by fontTools. Kept out of Git (.gitignore); it reaches
   the Pi with deploy.ps1. Medium/regular requests use the bold too, so a plate never falls back to another font. */
@font-face {
  font-family: "Charles Wright";
  src: url("../fonts/charles-wright-bold.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Headings where Bahnschrift (Windows) and DIN Alternate (Apple) aren't installed, e.g. Android (14 Nov):
   Barlow Semi Condensed, a free DIN-like road-sign font. Only downloaded on those devices.
   SIL Open Font License 1.1, see fonts/barlow-semi-condensed-OFL.txt. */
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/barlow-semi-condensed-500.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/barlow-semi-condensed-700.woff2") format("woff2");
  font-weight: 700 900;
  font-display: swap;
}

/* Body text (chosen 12 Nov, D57): Atkinson Hyperlegible Next by the Braille Institute, drawn so lookalike
   characters (0/O, 1/l/I) are easy to tell apart. One variable file covers every weight (Latin, 34 KB).
   SIL Open Font License 1.1, see fonts/atkinson-hyperlegible-next-OFL.txt. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* ---------------------------------------------------------------- Tokens */

:root {
  --paper: #f7f6f2;
  --surface: #ffffff;
  /* Text is a very dark navy rather than black (12 Nov), so light mode shares the dark mode's blue. */
  --ink: #0f1a2b;
  --ink-2: #4a5468;
  /* The header bar: the dark mode's navy in both modes, with the yellow plate logo on it. */
  --head-bg: #0f1a2b;
  --head-ink: #f7f6f2;
  --line: #d9d7cf;
  --line-strong: #8a887f;
  --plate: #ffcc00;
  --plate-ink: #111111;
  --plate-fill: #e0b000;
  --plate-edge: #1a1a1a;
  --pass: #00703c;
  --fail: #d4351c;
  --focus: #ffcc00;
  --focus-ink: #111111;
  --hover: #eeece4;
  /* The fourth colour (12 Nov): the blue of the UK identifier band on real plates. Used only for the main
     action ("Show N vehicles", "Show 50 more") and for selected states, the way GOV.UK keeps its green for
     the start button. Not green, because green already means "MOT valid". 9.1:1 with white text. */
  --accent: #1d4f91;
  --accent-ink: #ffffff;
  --accent-soft: #e6edf7;
  --accent-hover: #163d70;   /* a plain darker blue on hover, instead of a brightness filter (preview, 14 Nov) */

  --font-ui: Bahnschrift, "DIN Alternate", "Barlow Semi Condensed", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-plate: "Charles Wright", Bahnschrift, "DIN Alternate", "Barlow Semi Condensed", sans-serif;

  --step--2: clamp(0.6944rem, 0.6855rem + 0.0445vw, 0.72rem);
  --step--1: clamp(0.8333rem, 0.8101rem + 0.116vw, 0.9rem);
  --step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
  --step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
  --step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);

  --space-3xs: clamp(0.25rem, 0.2391rem + 0.0543vw, 0.2813rem);
  --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7174rem + 0.163vw, 0.8438rem);
  --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
  --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);

  /* Rounded corners (12 Nov: softer than the original 2 px, which looked boxy). Controls get the small radius,
     cards and panels the large one, so things inside a card stay visibly "inside" it. */
  --radius: 8px;
  --radius-l: 14px;
  --radius-plate: 6px;
  --border: 2px solid var(--ink);
  --measure: 65ch;
  --page: 72rem;
  --gutter: var(--space-s);

  color-scheme: light;
}

/* Dark mode (changed 12 Nov): a dark plate-band blue instead of black, and the accent swaps roles. Light mode
   is blue on beige; dark mode is beige on blue (the Filters button, Table/Cards, Apply, selected choices). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1a2b;
    --surface: #16243a;
    --ink: #edede8;
    --ink-2: #a9b4c6;
    --line: #263753;
    --line-strong: #4b5f80;
    --plate-edge: #000000;
    --pass: #4cc38a;
    --fail: #ff6b57;
    --hover: #1e2e48;
    --accent: #f7f6f2;
    --accent-ink: #0f1a2b;
    --accent-soft: #22334f;
    --accent-hover: #ffffff;
    --head-bg: #0a1322;
    --head-ink: #edede8;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #0f1a2b;
  --surface: #16243a;
  --ink: #edede8;
  --ink-2: #a9b4c6;
  --line: #263753;
  --line-strong: #4b5f80;
  --plate-edge: #000000;
  --pass: #4cc38a;
  --fail: #ff6b57;
  --hover: #1e2e48;
  --accent: #f7f6f2;
  --accent-ink: #0f1a2b;
  --accent-soft: #22334f;
  --accent-hover: #ffffff;
  --head-bg: #0a1322;
  --head-ink: #edede8;
  color-scheme: dark;
}

/* Paint colours for the colour filter and results (registered colours, not exact shades). */
[data-colour] { --swatch: transparent; }
[data-colour="black"] { --swatch: #151515; }
[data-colour="white"] { --swatch: #ffffff; }
[data-colour="silver"] { --swatch: #c3c5c8; }
[data-colour="grey"] { --swatch: #6e7176; }
[data-colour="blue"] { --swatch: #1f4e9c; }
[data-colour="red"] { --swatch: #c1121f; }
[data-colour="green"] { --swatch: #2d6a4f; }
[data-colour="yellow"] { --swatch: #f2c300; }
[data-colour="orange"] { --swatch: #e36414; }
[data-colour="brown"] { --swatch: #6f4518; }
[data-colour="beige"] { --swatch: #d6c4a1; }
[data-colour="cream"] { --swatch: #f1e6cc; }
[data-colour="gold"] { --swatch: #c9a227; }
[data-colour="bronze"] { --swatch: #a0682d; }
[data-colour="maroon"] { --swatch: #6a0d1b; }
[data-colour="purple"] { --swatch: #5b2a86; }
[data-colour="pink"] { --swatch: #e58fb1; }
[data-colour="turquoise"] { --swatch: #1fa7a5; }

/* ---------------------------------------------------------------- Reset (after Andy Bell) */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; }
body { min-height: 100vh; line-height: 1.5; }
h1, h2, h3, h4, button, input, label { line-height: 1.15; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
textarea:not([rows]) { min-height: 10em; }
:target { scroll-margin-block: 5ex; }
table { border-collapse: collapse; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- Base */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

h1, h2, h3 { font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--step-2); }
h2 { font-size: var(--step-1); }
h3 { font-size: var(--step-0); }

p, li { max-width: var(--measure); }
.prose { font-family: var(--font-body); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 3px; }

/* The GOV.UK-style focus: yellow background with a dark bar underneath, the same in both themes. */
:focus-visible {
  outline: 3px solid transparent;
  background-color: var(--focus);
  color: var(--focus-ink);
  box-shadow: 0 -2px var(--focus), 0 4px var(--focus-ink);
  text-decoration: none;
}
input:focus-visible, select:focus-visible, button:focus-visible, summary:focus-visible {
  background-color: var(--surface);
  color: var(--ink);
  outline: 3px solid var(--focus);
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px var(--ink);
}

::selection { background: var(--plate); color: var(--plate-ink); }

input[type="text"], input[type="search"], select {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-3xs) var(--space-2xs);
  min-height: 2.5rem;
  max-width: 100%;
}

select { padding-right: var(--space-l); }

button {
  cursor: pointer;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-3xs) var(--space-xs);
  min-height: 2.5rem;
}
button:hover { background: var(--hover); }
button:disabled { cursor: not-allowed; opacity: 0.45; }

label, legend, summary { font-weight: 700; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); width: 1.15em; height: 1.15em; }

/* ---------------------------------------------------------------- Compositions */

.wrapper {
  width: min(100% - 2 * var(--gutter), var(--page));
  margin-inline: auto;
}

.stack { display: flex; flex-direction: column; justify-content: flex-start; }
.stack > * { margin-block: 0; }
.stack > * + * { margin-block-start: var(--stack-space, var(--space-s)); }
.stack-s { --stack-space: var(--space-2xs); }
.stack-l { --stack-space: var(--space-l); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-space, var(--space-s));
  align-items: var(--cluster-align, center);
}

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
}

/* ---------------------------------------------------------------- Utilities */

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.muted { color: var(--ink-2); }
.small { font-size: var(--step--1); }
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.link-button {
  border: 0;
  background: none;
  padding: 0;
  min-height: 0;
  font-weight: 400;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.link-button:hover { background: none; text-decoration-thickness: 3px; }

/* ---------------------------------------------------------------- Prototype notice */

.proto-note {
  max-width: none;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
  padding-block: var(--space-3xs);
}

/* ---------------------------------------------------------------- Header and footer */

.site-head { border-bottom: 1px solid var(--line); padding-block: var(--space-xs); }

.wordmark { text-decoration: none; display: inline-block; }
.wordmark:hover { text-decoration: none; }

.site-nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-s); }
.site-nav a { text-decoration: none; padding-block: var(--space-3xs); }
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.4em; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  border-width: 1px;
  font-size: var(--step--1);
  min-height: 2.25rem;
}
.theme-toggle svg { width: 1.1em; height: 1.1em; }

.site-foot {
  border-top: 1px solid var(--line);
  margin-top: var(--space-xl);
  padding-block: var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.site-foot ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s); }

/* ---------------------------------------------------------------- Plates (wordmark, results) */

.plate {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-plate);
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--plate);
  color: var(--plate-ink);
  border: 1px solid var(--plate-edge);
  border-radius: 4px;
  padding: 0.12em 0.45em 0.08em;
  line-height: 1.1;
  white-space: pre;
  text-decoration: none;
}
.plate__gap { display: inline-block; width: 0.4em; }                    /* the plate's space, see plate() in prototype.js */
.plate .f { background: var(--plate-fill); border-radius: 1px; }        /* filled in by the database */
.plate .l { text-decoration: underline dotted 2px; text-underline-offset: 0.15em; } /* matched a lookalike */
.plate--logo { font-size: var(--step-1); padding: 0.1em 0.4em 0.05em; border-width: 2px; }
.plate--big { font-size: var(--step-3); border-width: 2px; border-radius: var(--radius-plate); }
a.plate:hover { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---------------------------------------------------------------- Search intro */

.search-intro { padding-block: var(--space-l) var(--space-s); }
.search-intro h1 { font-size: var(--step-2); }
.search-intro .hint { color: var(--ink-2); margin-top: var(--space-3xs); }

/* ---------------------------------------------------------------- Plate input */

.plate-field__fallback input { font-family: var(--font-plate); font-size: var(--step-2); text-transform: uppercase; width: 12ch; }

/* One yellow tile per character, with a small gap between them so each character stands on its own.
   Together they read as a plate: only the outer corners of the first and last tiles are rounded,
   and the plate's space is a wider gap. Seven tiles fit a 320 px phone. */
.plate-input { --tile: clamp(2.15rem, 10.2vw, 4rem); }

.plate-input__plate {
  display: flex;
  width: fit-content;   /* so the centred layout can centre it with margin: auto */
  max-width: 100%;
  align-items: center;
  gap: 3px;
}

.cell {
  position: relative;
  display: flex;
  width: var(--tile);
  height: calc(var(--tile) * 1.55);
  background: var(--plate);
  border: 2px solid var(--plate-edge);
  border-radius: 0;
}
.cell:first-of-type { border-radius: 0.55rem 0 0 0.55rem; }
.cell:last-of-type { border-radius: 0 0.55rem 0.55rem 0; }
.cell:only-of-type { border-radius: 0.55rem; }
.cell--gap { margin-left: calc(var(--tile) * 0.4); }

input.cell__input {   /* "input." so it beats the general text-input style above */
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--plate-ink);
  font-family: var(--font-plate);
  font-weight: 700;
  font-size: calc(var(--tile) * 1.15);
  font-stretch: 78%;   /* plate letters are narrow; the stand-in Bahnschrift has a condensed width built in */
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  caret-color: transparent;
  padding: 0;
  min-height: 0;
}
.cell__input::placeholder { color: rgb(0 0 0 / 0.2); }
.cell__input:focus { outline: none; }
.cell__input:focus-visible { outline: none; box-shadow: none; background: transparent; }
.cell:focus-within::after {
  content: "";
  position: absolute;
  inset: auto 18% 8%;
  height: 3px;
  background: var(--plate-ink);
}
/* "+3": how many lookalikes this character also searches for, just under its tile */
.cell__alt {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.15em 0.35em;
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.cell__alt:empty { display: none; }
.plate-input__plate--alts { margin-bottom: 1.6rem; }
/* Length unknown: "…" next to the tiles shows the plate carries on before and/or after what was typed. */
.plate-input__plate[data-where="start"]::after,
.plate-input__plate[data-where="end"]::before,
.plate-input__plate[data-where="any"]::before,
.plate-input__plate[data-where="any"]::after {
  content: "···";   /* middle dots sit at mid-height, unlike "…" */
  padding-inline: 0.2em;
  font-family: var(--font-plate);
  font-weight: 700;
  font-size: calc(var(--tile) * 0.9);
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}

/* Only a real end of the plate gets rounded corners: the start, the end, or neither ("anywhere"). */
.plate-input__plate[data-where="start"] .cell:last-of-type { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.plate-input__plate[data-where="end"] .cell:first-of-type { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.plate-input__plate[data-where="any"] .cell { border-radius: 0; }

/* The spare tile at the end, when the length isn't known: room to carry on typing. */
.cell--next { background: transparent; border-style: dashed; border-color: var(--line-strong); }
.cell--next:focus-within { background: var(--plate); border-style: solid; border-color: var(--plate-edge); }

.plate-input { margin-bottom: var(--space-xs); }
.plate-input__controls { --cluster-space: var(--space-xs) var(--space-m); margin-top: var(--space-xs); }

.stepper { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.stepper button { width: 2.25rem; min-height: 2.25rem; padding: 0; font-weight: 700; border-width: 1px; }
.stepper output { min-width: 8.5ch; text-align: center; font-variant-numeric: tabular-nums; }

/* On/off switch ("I know the length") */
.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  border: 0;
  background: none;
  padding: 0;
  font-weight: 700;
}
.switch:hover { background: none; }
.switch__track {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  border: 2px solid var(--ink);
  border-radius: 1rem;
  background: var(--surface);
  flex: none;
}
.switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.5rem - 8px);
  height: calc(1.5rem - 8px);
  border-radius: 50%;
  background: var(--ink-2);
  transition: transform 120ms ease-out;
}
.switch[aria-checked="true"] .switch__track { background: var(--ink); }
.switch[aria-checked="true"] .switch__thumb { background: var(--plate); transform: translateX(1.25rem); }
.switch:focus-visible { outline: none; box-shadow: none; background: none; }
.switch:focus-visible .switch__track { outline: 3px solid var(--focus); outline-offset: 2px; }

/* The same switch for a checkbox (the off-road filter) */
.switch-check { position: relative; display: inline-flex; align-items: center; gap: var(--space-2xs); cursor: pointer; font-weight: 400; }
.switch-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-check input:checked + .switch__track { background: var(--ink); }
.switch-check input:checked + .switch__track .switch__thumb { background: var(--plate); transform: translateX(1.25rem); }
.switch-check input:focus-visible + .switch__track { outline: 3px solid var(--focus); outline-offset: 2px; }
.field--switch { justify-content: flex-start; }
.field--switch .switch-check { min-height: 2.5rem; }

.choice { display: inline-flex; align-items: flex-start; gap: var(--space-2xs); font-weight: 400; cursor: pointer; line-height: 1.3; }
.choice input { flex: none; margin-top: 0.1em; }
.choice .hint { color: var(--ink-2); }
.choice .example { color: var(--ink-2); font-family: var(--font-plate); white-space: nowrap; }

/* "Include all lookalikes" with its "See more" panel */
.lookalikes { margin-block: var(--space-2xs) var(--space-s); }
.lookalikes__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); }

.help-panel {
  margin-top: var(--space-xs);
  max-width: 36rem;
  padding: var(--space-xs) var(--space-s);
  border-left: 4px solid var(--plate);
  background: var(--surface);
  font-size: var(--step--1);
  text-align: left;
}
.help-panel > * + * { margin-top: var(--space-2xs); }
.help-panel ul { padding-left: 1.1em; }
.help-panel .plate { font-size: inherit; padding: 0.05em 0.4em 0; }
.help-panel .groups {
  list-style: none;
  padding: 0;
  columns: 2 8rem;   /* one group per line, in two columns when there's room */
  font-family: var(--font-plate);
  font-weight: 700;
  word-spacing: 0.4em;
}
.help-panel .groups li { padding-block: 1px; }

.search--centre .lookalikes__row { justify-content: center; }
.search--centre .help-panel { margin-inline: auto; }

/* Lookalike popover */
.alts {
  position: absolute;
  z-index: 20;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--space-2xs);
  min-width: 12rem;
}
.alts p { font-size: var(--step--1); font-weight: 700; margin-bottom: var(--space-3xs); }
.alts .cluster { --cluster-space: var(--space-3xs); }
.alts__char { font-family: var(--font-plate); font-weight: 700; min-width: 2.25rem; border-width: 1px; }
.alts__char[aria-pressed="true"] { background: var(--plate); color: var(--plate-ink); border-color: var(--plate-edge); }
.alts__done { border-width: 1px; font-size: var(--step--1); margin-top: var(--space-2xs); }

/* ---------------------------------------------------------------- Filters */

.filters { margin-top: var(--space-m); }
.filters__main { --cluster-space: var(--space-s) var(--space-m); --cluster-align: flex-start; }

.field { display: flex; flex-direction: column; gap: var(--space-3xs); }
.field select { min-width: 11rem; }
.field--year .cluster { --cluster-space: var(--space-2xs); flex-wrap: nowrap; }
.field--year select { min-width: 0; width: 6rem; padding-right: 1.5rem; }

.swatches { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-2xs); padding: 0; list-style: none; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 3.4rem; cursor: pointer; font-weight: 400; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch__dot {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--swatch);
  border: 1px solid var(--line-strong);
}
.swatch__dot[data-colour="multi-colour"] {
  background: conic-gradient(#c1121f 0 25%, #f2c300 0 50%, #1f4e9c 0 75%, #2d6a4f 0);
}
.swatch__name { font-size: var(--step--2); color: var(--ink-2); }
.swatch input:checked + .swatch__dot { outline: 3px solid var(--ink); outline-offset: 2px; }
.swatch input:checked ~ .swatch__name { color: var(--ink); font-weight: 700; }
.swatch input:focus-visible + .swatch__dot { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ink); }
.swatch--zero { opacity: 0.35; }
.swatches__more { min-height: 1.9rem; align-self: flex-start; border-width: 1px; font-size: var(--step--1); }

.more-filters { margin-top: var(--space-s); border-top: 1px solid var(--line); padding-top: var(--space-xs); }
.more-filters summary { cursor: pointer; width: fit-content; }
.more-filters summary .muted { font-weight: 400; }
.more-filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-m);
  margin-top: var(--space-s);
}
.more-filters fieldset .stack { --stack-space: var(--space-3xs); }
.more-filters legend { margin-bottom: var(--space-2xs); }

.toggle-chips { display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.toggle-chip { position: relative; }
.toggle-chip input { position: absolute; opacity: 0; }
.toggle-chip span {
  display: inline-block;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.3em 0.7em;
  font-weight: 400;
  cursor: pointer;
}
.toggle-chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.toggle-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }

.filters-button { display: none; }

/* Mobile filter sheet */
.sheet {
  border: 0;
  border-top: var(--border);
  padding: 0;
  margin: auto 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 88vh;
  background: var(--paper);
  color: var(--ink);
}
.sheet::backdrop { background: rgb(0 0 0 / 0.45); }
.sheet__body { padding: var(--space-s); overflow-y: auto; max-height: calc(88vh - 4.5rem); }
.sheet__foot { padding: var(--space-xs) var(--space-s); border-top: 1px solid var(--line); background: var(--surface); }
.sheet__foot button { width: 100%; background: var(--ink); color: var(--paper); font-weight: 700; }
.sheet .filters { margin-top: 0; }
.sheet .field select { width: 100%; }

/* ---------------------------------------------------------------- Results */

.results { margin-top: var(--space-l); border-top: var(--border); padding-top: var(--space-s); }
.results[aria-busy="true"] .results__body { opacity: 0.6; }
.results__progress { height: 3px; background: var(--plate); width: 0; }
.results[aria-busy="true"] .results__progress { width: 100%; transition: width 400ms ease-out; }

.results__count { font-size: var(--step-1); }
.results__count .pattern { font-family: var(--font-plate); letter-spacing: 0.04em; white-space: pre; }
.results__meta { font-size: var(--step--1); color: var(--ink-2); }

.active-filters { --cluster-space: var(--space-3xs) var(--space-2xs); margin-top: var(--space-2xs); }
.active-filters button {
  border-width: 1px;
  min-height: 2rem;
  padding: 0.15em 0.6em;
  font-size: var(--step--1);
}
.active-filters button::after { content: " ×"; font-weight: 700; }
.active-filters .link-button::after { content: none; }

.summary-details { margin-top: var(--space-s); }
.summary-details > summary { cursor: pointer; width: fit-content; font-size: var(--step--1); }
@media (min-width: 48rem) { .summary-details > summary { display: none; } }

.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-m);
  margin-top: var(--space-m);
}
.summary h3 { font-size: var(--step--1); margin-bottom: var(--space-2xs); }
.bars { list-style: none; padding: 0; display: grid; gap: 2px; }
.bar {
  display: grid;
  grid-template-columns: 7rem 1fr 3.5rem;
  align-items: center;
  gap: var(--space-2xs);
  width: 100%;
  border: 0;
  background: none;
  padding: 0.15em 0;
  min-height: 0;
  font-size: var(--step--1);
  text-align: left;
}
.bar:hover { background: var(--hover); }
.bar__label { display: flex; align-items: center; gap: 0.4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar__track { height: 0.7rem; }
.bar__fill { height: 100%; background: var(--ink); min-width: 2px; }
.bar__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.dot { width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--swatch); border: 1px solid var(--line-strong); flex: none; }

.years { display: flex; align-items: flex-end; gap: 1px; height: 4.5rem; border-bottom: 1px solid var(--ink); }
.years button { flex: 1; min-width: 0; min-height: 0; padding: 0; border: 0; background: var(--ink); border-radius: 0; }
.years button:hover { background: var(--plate-fill); }
.years__axis { display: flex; justify-content: space-between; font-size: var(--step--2); color: var(--ink-2); margin-top: 2px; }

.toolbar { margin-top: var(--space-m); border-bottom: 1px solid var(--line); padding-bottom: var(--space-2xs); }
.toolbar label { font-weight: 400; font-size: var(--step--1); display: inline-flex; align-items: center; gap: var(--space-3xs); }
.toolbar select { min-height: 2.25rem; font-size: var(--step--1); }
.toolbar button { min-height: 2.25rem; border-width: 1px; font-size: var(--step--1); }

.segmented { display: inline-flex; border: 1px solid var(--ink); border-radius: var(--radius); overflow: hidden; }   /* clip the selected half to the rounded corners */
.segmented label { position: relative; font-size: var(--step--1); }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: block; padding: 0.4em 0.8em; cursor: pointer; font-weight: 400; }
.segmented label + label span { border-left: 1px solid var(--ink); }
.segmented input:checked + span { background: var(--ink); color: var(--paper); }
.segmented input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }

.table-wrap { overflow-x: auto; margin-top: var(--space-2xs); }
.results-table { width: 100%; font-size: var(--step--1); background: var(--surface); }
.results-table th { text-align: left; font-weight: 700; border-bottom: 2px solid var(--ink); padding: var(--space-2xs) var(--space-2xs); white-space: nowrap; }
.results-table td { border-bottom: 1px solid var(--line); padding: var(--space-2xs); vertical-align: middle; }
.results-table td.num, .results-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.results-table tbody tr:hover { background: var(--hover); }
.results-table .plate { font-size: var(--step-0); }
.results-table .group th { background: var(--paper); border-bottom: 1px solid var(--ink); padding-top: var(--space-s); font-size: var(--step-0); }
.results-table .group .muted { font-weight: 400; }

.model-detail { display: block; color: var(--ink-2); font-size: var(--step--2); }
.colour { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; }
.mot { white-space: nowrap; }
.mot--pass::before, .mot--fail::before, .mot--none::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.4em;
  border-radius: 50%;
  vertical-align: 0.05em;
}
.mot--pass::before { background: var(--pass); }
.mot--fail::before { background: var(--fail); }
.mot--none::before { border: 1px solid var(--ink-2); }

.star {
  border: 0;
  background: none;
  padding: 0.2em;
  min-height: 0;
  line-height: 0;
  color: var(--ink-2);
}
.star svg { width: 1.3rem; height: 1.3rem; }
.star:hover { background: none; color: var(--ink); }
.star[aria-pressed="true"] { color: var(--ink); }
.star[aria-pressed="true"] svg { fill: var(--plate); }

.cards {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  padding: var(--space-xs);
  display: grid;
  gap: var(--space-3xs);
  font-size: var(--step--1);
  max-width: none;
}
.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2xs); margin-bottom: var(--space-3xs); }
.card .plate { font-size: var(--step-1); }
.card__title { font-size: var(--step-0); font-weight: 700; }
.cards-group { font-size: var(--step-0); margin-top: var(--space-m); }
.cards-group .muted { font-weight: 400; }

.pager { margin-top: var(--space-m); --cluster-space: var(--space-xs) var(--space-m); justify-content: space-between; }
.pager__more { font-weight: 700; }
.pager ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.pager ol button { border-width: 1px; min-width: 2.25rem; min-height: 2.25rem; padding: 0 0.5em; }
.pager ol button[aria-current="page"] { background: var(--ink); color: var(--paper); }

.plan { margin-top: var(--space-m); font-size: var(--step--1); color: var(--ink-2); }
.plan summary { font-weight: 400; cursor: pointer; width: fit-content; }

/* Empty, too broad, no matches */
.notice { border-left: 5px solid var(--ink); border-radius: var(--radius); padding: var(--space-2xs) var(--space-s); background: var(--surface); }
.notice h2 { font-size: var(--step-1); margin-bottom: var(--space-3xs); }
.notice ul { padding-left: 1.2em; }
.notice--start { border-left-color: var(--plate); }
.examples { --cluster-space: var(--space-2xs); }
.examples button { border: 0; background: none; padding: 0; min-height: 0; }
.examples button .plate { font-size: var(--step-0); }

/* Shortlist */
.shortlist-button {
  position: fixed;
  right: var(--space-s);
  bottom: var(--space-s);
  z-index: 10;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.shortlist-button:hover { background: var(--ink); text-decoration: underline; }
.shortlist-button svg { width: 1.1em; height: 1.1em; fill: var(--plate); }

.dialog {
  border: var(--border);
  border-radius: var(--radius-l);
  padding: var(--space-s);
  width: min(100% - 2rem, 50rem);
  background: var(--paper);
  color: var(--ink);
}
.dialog::backdrop { background: rgb(0 0 0 / 0.45); }

/* ---------------------------------------------------------------- Layout B: filters on the left
   (prototype/sidebar.html). The panel folds away to a narrow tab; the plate sits in the middle with the
   results underneath. On phones it falls back to the filter sheet. */

.wrapper--wide { --page: 90rem; }

.workspace {
  --page: 90rem;
  display: grid;
  grid-template-columns: 18.5rem minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
}
.workspace[data-collapsed] { grid-template-columns: 2.75rem minmax(0, 1fr); }

.sidebar {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  padding: var(--space-m) var(--space-s) var(--space-l) 0;
}
.sidebar__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2xs); margin-bottom: var(--space-s); }
.sidebar__head h2 { font-size: var(--step-0); }
.sidebar__toggle { border-width: 1px; font-size: var(--step--1); min-height: 2.25rem; }
.sidebar .filters { margin-top: 0; }
.sidebar .filters__main { flex-direction: column; align-items: stretch; --cluster-space: var(--space-m); }
.sidebar .field select { width: 100%; min-width: 0; }
.sidebar .more-filters__grid { grid-template-columns: 1fr; }
.sidebar .swatches { gap: var(--space-3xs) 0; }
.sidebar .swatch { width: 3.25rem; }

.workspace[data-collapsed] .sidebar { padding-right: 0; overflow: visible; }
.workspace[data-collapsed] .sidebar__body,
.workspace[data-collapsed] .sidebar__head h2 { display: none; }
.workspace[data-collapsed] .sidebar__toggle { writing-mode: vertical-rl; padding: var(--space-xs) 0; width: 2.25rem; }

.search--centre { text-align: center; }
.search--centre .search-intro h1, .search--centre .search-intro p, .search--centre > p { margin-inline: auto; }
.search--centre .plate-input__plate { margin-inline: auto; }
.search--centre .plate-input__controls { justify-content: center; }
.search--centre .plate-input { text-align: left; }
.search--centre .plate-input__controls, .search--centre .choice { text-align: left; }

/* ---------------------------------------------------------------- Minimal layout (prototype/minimal.html, D48)
   No menu and no footer: the wordmark, an "Info" link and an icon-only theme button. Before a search the
   page is the slogan and the plate; the filters bar appears with the results. */

/* The header spans the whole window: logo in the top-left corner, Info and the theme button top right. */
.site-head--minimal { border-bottom: 0; padding-block: var(--space-s); background: var(--head-bg); color: var(--head-ink); }
.site-head--minimal .theme-toggle--icon { color: var(--head-ink); }
.site-head--minimal .theme-toggle--icon:hover { background: rgb(255 255 255 / 0.12); }
/* In dark mode the page is navy too, so a faint line marks where the header ends. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-head--minimal { border-bottom: 1px solid var(--line); } }
:root[data-theme="dark"] .site-head--minimal { border-bottom: 1px solid var(--line); }
.site-head--minimal > .wrapper { --page: 100%; }
.site-head--minimal .plate--logo { font-size: var(--step-3); border-width: 3px; border-radius: var(--radius-plate); }
.head-links { --cluster-space: var(--space-m); font-size: var(--step-1); font-weight: 700; }
.theme-toggle--icon { border: 0; background: none; padding: 0; width: 3rem; height: 3rem; min-height: 0; justify-content: center; }
.theme-toggle--icon:hover { background: var(--hover); border-radius: 50%; }
.theme-toggle--icon svg { width: 2rem; height: 2rem; }

[data-minimal] .search-intro { padding-block: var(--space-xl) var(--space-m); }
/* No footer, but keep the room one would take, so the page doesn't stop right under the last line. */
[data-minimal] main { padding-bottom: calc(var(--space-xl) * 2); }

/* Before anything is typed, the slogan and plate sit in the middle of the window. Once a search runs
   (body[data-searching], set by prototype.js) they move up so the results have room. */
[data-minimal]:not([data-searching]) main[data-centre] { display: flex; }
[data-minimal]:not([data-searching]) main[data-centre] > .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 6rem;   /* about the header's height, so the plate is centred in the window, not below it */
}
[data-minimal]:not([data-searching]) .search-intro { padding-top: 0; }

.help-button {
  width: 1.6rem;
  height: 1.6rem;
  min-height: 0;
  padding: 0;
  border-width: 1px;
  border-radius: 50%;
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1;
}
.help-button[aria-expanded="true"] { background: var(--ink); color: var(--paper); }

.filters-bar { margin-top: var(--space-m); padding-top: var(--space-s); border-top: 1px solid var(--line); }
.filters-bar .filters { margin-top: 0; }
.filters-bar .filters__main .field select { width: 15.5rem; min-width: 0; }   /* fixed, so counts in the options don't push the colours onto a new row */

.swatch__n { font-size: var(--step--2); color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1; }
.swatch__n:empty { display: none; }

/* ---------------------------------------------------------------- Minimal layout: easier to read (12 Nov, A–H)
   From the readability review: fewer lines, a readable text font, quieter labels, labelled facts on cards,
   a calmer toolbar, more space between sections, less yellow, three cards a row. */

/* A: fewer lines. Spacing separates the sections; one soft line above the results remains. */
[data-minimal] .filters-bar { border-top: 0; padding-top: 0; }
[data-minimal] .more-filters { border-top: 0; padding-top: 0; margin-top: var(--space-xs); }
[data-minimal] .results { border-top: 1px solid var(--line); padding-top: var(--space-m); }
[data-minimal] .toolbar { border-bottom: 0; padding-bottom: 0; }
[data-minimal] .card { border-color: var(--line); }

/* C: Bahnschrift (narrow, road-sign) for headings, plates and the logo; the system font for text to read. */
[data-minimal] .filters,
[data-minimal] .lookalikes,
[data-minimal] .help-panel,
[data-minimal] .results__meta,
[data-minimal] .toolbar,
[data-minimal] .card__facts,
[data-minimal] .card__foot,
[data-minimal] .notice p,
[data-minimal] .notice li,
[data-minimal] .pager,
[data-minimal] .active-filters,
[data-minimal] .results-table td,
[data-minimal] .info-page p,
[data-minimal] .info-page li,
[data-minimal] .facts,
[data-minimal] .tests { font-family: var(--font-body); }

/* D: labels are signposts, not headlines: smaller and grey. The result count and card titles lead. */
[data-minimal] .filters .field > label,
[data-minimal] .filters legend {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
  font-family: var(--font-body);
}
[data-minimal] .more-filters summary { font-size: var(--step--1); font-weight: 600; font-family: var(--font-body); }
[data-minimal] .swatch__name { font-family: var(--font-body); }
[data-minimal] .swatch__n { color: var(--line-strong); }
[data-minimal] .results__meta { margin-top: var(--space-3xs); }

/* B: cards with each fact in its own labelled cell, and the MOT status as a pill. */
.card--facts { gap: var(--space-2xs); padding: var(--space-s); }
.card--facts .card__top { margin-bottom: 0; }
.card--facts .card__title { font-size: var(--step-1); }
.card__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xs) var(--space-s);
  margin: 0;
  font-size: var(--step-0);
}
.card__facts dt { font-size: var(--step--1); color: var(--ink-2); }
.card__facts dd { margin: 0; }
.card__foot { margin-top: var(--space-3xs); font-size: var(--step--1); }
.card__foot .mot { display: inline-flex; align-items: center; padding: 0.25em 0.7em; border-radius: 999px; }
.card__foot .mot--pass { background: color-mix(in srgb, var(--pass) 14%, transparent); }
.card__foot .mot--fail { background: color-mix(in srgb, var(--fail) 14%, transparent); }
.card__foot .mot--none { background: var(--hover); }

/* E: a calmer toolbar: a light Sort select and a link-style download. */
[data-minimal] .toolbar select { border-width: 1px; border-color: var(--line-strong); min-height: 2.25rem; }
[data-minimal] .toolbar label { color: var(--ink-2); }
.toolbar__csv { display: inline-flex; align-items: center; gap: 0.35em; font-size: var(--step--1); }
.toolbar__csv svg { width: 1.1em; height: 1.1em; }

/* F: more space between the sections (plate · filters · results), less inside them. */
[data-minimal] .filters-bar { margin-top: var(--space-l); }
[data-minimal] .results { margin-top: var(--space-l); }
[data-minimal] .filters__main { --cluster-space: var(--space-s) var(--space-l); }
[data-minimal] .filters .field { gap: var(--space-3xs); }

/* G: no darker yellow on database-filled characters in the results grid; it's mostly noise across 50 plates.
   (Lookalike matches keep their dotted underline.) */
[data-minimal] .cards .plate .f,
[data-minimal] .results-table .plate .f { background: none; }

/* H: at most three cards a row, so each has room. */
[data-minimal] .cards {
  --gap: var(--space-s);
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(max(17rem, calc((100% - 2 * var(--gap)) / 3)), 1fr));
}

/* ---------------------------------------------------------------- Make / Model / Colour as three matching boxes
   (chosen 12 Nov over colour chips and a row of filter buttons). Colour opens a list of swatch + name + count. */

.colour-field { position: relative; }
/* Floated, the legend becomes an ordinary flex item spaced by the field's gap, like the Make and Model
   labels; with their line height, "Colour" and its box line up with them. */
.colour-field > legend { float: left; line-height: 1.15; }
/* Model before a make is chosen: just a greyed-out box. */
[data-minimal] .filters select:disabled { background: var(--hover); color: var(--ink-2); border-color: var(--line-strong); opacity: 1; }
.colour-trigger {
  display: inline-flex; align-items: center; gap: 0.5em;
  width: 15.5rem; min-height: 2.5rem;
  border: var(--border); border-radius: var(--radius); background: var(--surface);
  padding: var(--space-3xs) var(--space-xs) var(--space-3xs) var(--space-2xs);
  font-family: var(--font-body); font-weight: 400; text-align: left;
}
.colour-trigger::after { content: ""; margin-left: auto; border: 0.32em solid transparent; border-top-color: currentColor; border-bottom-width: 0; }
.colour-trigger__dots { display: inline-flex; }
.colour-trigger__dots .dot { width: 0.95em; height: 0.95em; }
.colour-trigger__dots .dot + .dot { margin-left: -0.3em; }
.colour-trigger__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The panel drops down as a list, one colour per line: dot, name, count. */
.colour-panel {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  min-width: 15.5rem; max-height: 23rem; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-l);
  padding: var(--space-3xs);
}
.colour-panel .swatches { display: grid; grid-template-columns: 1fr; gap: 1px; }
.colour-panel .swatch {
  flex-direction: row; width: auto; gap: 0.6em; padding: 0.4em 0.6em; border-radius: var(--radius);
}
.colour-panel .swatch:hover { background: var(--hover); }
.colour-panel .swatch:has(input:checked) { background: var(--hover); }
.colour-panel .swatch__dot { width: 1.15rem; height: 1.15rem; }
.colour-panel .swatch input:checked + .swatch__dot { outline-width: 2px; }
.colour-panel .swatch__name { font-size: var(--step-0); color: var(--ink); }
.colour-panel .swatch__n { margin-left: auto; font-size: var(--step--1); color: var(--ink-2); }
.colour-panel .swatch:has(input:checked)::after { content: "✓"; font-weight: 700; margin-left: 0.4em; }
.colour-panel .swatch:has(input:checked) .swatch__n { margin-left: auto; }

.filters-bar .filters__main { flex-wrap: wrap; align-items: flex-start; }

/* ---------------------------------------------------------------- Filters pop-up (minimal layout, 12 Nov)
   Like Auto Trader: one "Filters" button on the page; every filter in a pop-up; "Show N vehicles" applies them.
   A centred window on a laptop, a sheet from the bottom on a phone. */

[data-minimal] .filters-in-page { display: none; }
[data-minimal] .filters-button {
  display: inline-flex; align-items: center; gap: 0.5em; margin-top: 0;
  min-height: 2.75rem; padding: 0 1.1em; border-radius: 999px; font-weight: 700;
}
[data-minimal] .filters-button svg { width: 1.2em; height: 1.2em; }

[data-minimal] .sheet {
  margin: auto;
  width: min(100% - 2rem, 42rem);
  max-height: min(88vh, 52rem);
  border: 0;
  border-radius: var(--radius-l);
  padding: 0;
  overflow: hidden;
}
[data-minimal] .sheet[open] { display: flex; flex-direction: column; }
.sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  padding: var(--space-xs) var(--space-s); border-bottom: 1px solid var(--line);
}
.sheet__head h2 { font-size: var(--step-1); }
.sheet__x { border: 0; background: none; width: 2.5rem; height: 2.5rem; padding: 0; min-height: 0; border-radius: 50%; display: grid; place-items: center; }
.sheet__x svg { width: 1.25rem; height: 1.25rem; }
[data-minimal] .sheet__body { flex: 1; max-height: none; overflow-y: auto; padding: var(--space-s); }
[data-minimal] .sheet__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  padding: var(--space-xs) var(--space-s);
}
[data-minimal] .sheet__foot .sheet__apply { width: auto; min-width: 13rem; min-height: 2.75rem; border-radius: 999px; }
[data-minimal] .sheet__foot .link-button { width: auto; background: none; color: var(--ink); font-weight: 400; min-height: 0; }

/* Inside the pop-up: sections stacked, Make and Model side by side, labels as clear section titles. */
[data-minimal] .sheet .filters__main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m) var(--space-s); }
[data-minimal] .sheet .colour-field { grid-column: 1 / -1; }
[data-minimal] .sheet .filters .field > label,
[data-minimal] .sheet .filters legend { font-size: var(--step-0); font-weight: 700; color: var(--ink); }
[data-minimal] .sheet .more-filters { margin-top: var(--space-m); }
[data-minimal] .sheet .more-filters > summary { display: none; }   /* everything is shown in the pop-up */
[data-minimal] .sheet .more-filters__grid { margin-top: 0; gap: var(--space-m) var(--space-s); }

/* Colours in the pop-up: a plain grid of swatch + name + count, not a drop-down. */
[data-minimal] .sheet .colour-trigger { display: none; }
[data-minimal] .sheet .colour-panel {
  position: static; min-width: 0; max-height: none; overflow: visible; border: 0; background: none; padding: 0;
}
[data-minimal] .sheet .colour-panel .swatches { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-3xs); }
[data-minimal] .sheet .colour-panel .swatch { border: 1px solid var(--line); background: var(--surface); }
[data-minimal] .sheet .colour-panel .swatch:has(input:checked) { border-color: var(--ink); }

.notice__action { margin-top: var(--space-2xs); border-radius: 999px; font-weight: 700; padding-inline: 1.1em; }

/* Compact results header (12 Nov): two rows. No separate Filters row and no dividing line. */
[data-minimal] .results { border-top: 0; padding-top: 0; margin-top: var(--space-l); }
.results-head { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-s); }
.results-head__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs) var(--space-s); }
.results-head__row--sub { justify-content: flex-start; }
.results-head__row--sub .active-filters { margin-top: 0; }
.results-head__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-s); font-family: var(--font-body); }
.results-head__tools select { min-height: 2.25rem; font-size: var(--step--1); border-width: 1px; border-color: var(--line-strong); width: auto; }
.results-head__sort { font-weight: 400; }
.results-head__hint { font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-2); }
[data-minimal] .filters-button--small { min-height: 2.25rem; padding: 0 0.9em; font-size: var(--step--1); }
.results-head .segmented label { font-size: var(--step--1); }
.results-head .segmented span { padding: 0.35em 0.8em; }
[data-minimal] .results-head + .cards { margin-top: 0; }

/* Header (12 Nov): the slogan sits next to the logo; above the plate there's just what to do. */
.head-brand { display: flex; align-items: center; gap: var(--space-s); min-width: 0; }
.head-tagline { font-family: var(--font-body); font-size: var(--step--1); color: var(--head-ink); opacity: 0.8; max-width: none; }
@media (max-width: 47.99rem) { .head-tagline { display: none; } }
[data-minimal] .search-prompt { font-family: var(--font-body); font-size: var(--step-0); font-weight: 600; color: var(--ink-2); }

/* The two options under the plate, each with its "?". */
.lookalikes__row .option { display: inline-flex; align-items: center; gap: var(--space-2xs); }
[data-minimal] .lookalikes__row { gap: var(--space-2xs) var(--space-l); }

/* The "?" pop-ups: the same window as Filters, smaller; plain text in the body font, no coloured side bar. */
[data-minimal] .help-dialog { width: min(100% - 2rem, 32rem); }
.help-dialog__body { font-family: var(--font-body); }
.help-dialog__body > * + * { margin-top: var(--space-xs); }
.help-dialog__body h3 { font-size: var(--step-0); margin-top: var(--space-m); }
.help-dialog__body .plate { font-size: inherit; padding: 0.05em 0.4em 0; }
[data-minimal] .sheet__foot--end { justify-content: flex-end; }
.lookalike-groups { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s); }
.lookalike-groups li { display: inline-flex; gap: 2px; }
.mini-tile {
  display: inline-grid; place-items: center; width: 1.6rem; height: 2.1rem;
  background: var(--plate); color: var(--plate-ink); border: 1px solid var(--plate-edge);
  font-family: var(--font-plate); font-weight: 700; font-size: 1.15rem; line-height: 1;
}
.mini-tile:first-child { border-radius: 4px 0 0 4px; }
.mini-tile:last-child { border-radius: 0 4px 4px 0; }
.mini-tile:only-child, .mini-tile--inline { border-radius: 4px; }
/* An empty plate box drawn inside a sentence: a small yellow tile with a low dash, like on the plate. */
.mini-tile--inline {
  width: 1.45rem; height: 1.9rem; font-size: 1.2rem; vertical-align: middle; margin-inline: 0.1em;
  color: rgb(0 0 0 / 0.45); align-items: end; padding-bottom: 0.3rem;
}
/* A button drawn inside a sentence ("press − under the plate"), the way the real one looks. */
.key {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; vertical-align: middle;
  border: 1px solid var(--ink); border-radius: var(--radius); background: var(--surface); color: var(--ink);
  font-family: var(--font-ui); font-weight: 700; line-height: 1;
}

/* Active filter chips (12 Nov): soft pills with a round × to remove; "Clear all" as quiet text. */
[data-minimal] .active-filters { --cluster-space: var(--space-2xs); }
[data-minimal] .active-filters button:not(.link-button) {
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 2rem; padding: 0 0.35em 0 0.9em;
  border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
}
[data-minimal] .active-filters button:not(.link-button)::after {
  content: "×"; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: 1rem; font-weight: 700; line-height: 1;
}
[data-minimal] .active-filters button:not(.link-button):hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
[data-minimal] .active-filters .link-button {
  font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-2); text-decoration: none; padding-inline: 0.3em;
}
[data-minimal] .active-filters .link-button:hover { color: var(--ink); text-decoration: underline; }

/* No matches / too broad (12 Nov): no boxed card with a side bar; a plain line and the fixes as buttons. */
[data-minimal] .notice { border-left: 0; background: none; padding: 0; border-radius: 0; }
[data-minimal] .notice h2 { font-size: var(--step-1); }
[data-minimal] .notice p { color: var(--ink-2); }
.empty { font-family: var(--font-body); margin-top: var(--space-s); }
.empty__lead { font-size: var(--step-2); font-weight: 700; line-height: 1.25; color: var(--ink); }
.empty__text { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); margin-top: var(--space-2xs); }
.empty__text b { color: var(--ink); }

/* Fuel choices with no matching vehicles can't be pressed. */
.toggle-chip input:disabled + span { opacity: 0.4; cursor: not-allowed; border-style: dashed; }

/* The accent (plate-band blue): main actions and selected states only. */
[data-minimal] .sheet__foot .sheet__apply,
[data-minimal] .notice__action,
[data-minimal] .pager__more {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
[data-minimal] .sheet__foot .sheet__apply:hover,
[data-minimal] .notice__action:hover,
[data-minimal] .pager__more:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
[data-minimal] .pager__more { border-radius: 999px; padding-inline: 1.2em; }
[data-minimal] .filters-button { border-color: var(--accent); color: var(--accent); }
[data-minimal] .filters-button:hover { background: var(--accent-soft); }
[data-minimal] .segmented { border-color: var(--accent); }
[data-minimal] .segmented label + label span { border-left-color: var(--accent); }
[data-minimal] .segmented input:checked + span { background: var(--accent); color: var(--accent-ink); }
[data-minimal] .toggle-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
[data-minimal] .sheet .colour-panel .swatch:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
[data-minimal] .sheet .colour-panel .swatch:has(input:checked)::after { color: var(--accent); }
[data-minimal] input[type="checkbox"], [data-minimal] input[type="radio"] { accent-color: var(--accent); }
[data-minimal] .active-filters button:not(.link-button) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

@media (max-width: 47.99rem) {
  [data-minimal] .sheet { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 92vh; border-radius: var(--radius-l) var(--radius-l) 0 0; }
  [data-minimal] .sheet .filters__main { grid-template-columns: 1fr; }
  [data-minimal] .sheet__foot .sheet__apply { flex: 1; min-width: 0; }
}

/* ---------------------------------------------------------------- Vehicle and Info pages */

.page { padding-block: var(--space-l) var(--space-xl); }
.page > * + * { margin-top: var(--space-m); }
.back { font-size: var(--step--1); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3xs) var(--space-m); max-width: 32rem; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; font-weight: 700; }
.example-note { border-left: 4px solid var(--plate); background: var(--surface); padding: var(--space-2xs) var(--space-s); font-size: var(--step--1); }
.mileage { width: 100%; max-width: 40rem; height: auto; color: var(--ink); }
.mileage text { font-family: var(--font-ui); font-size: 11px; fill: var(--ink-2); }
.tests { list-style: none; padding: 0; display: grid; gap: var(--space-2xs); max-width: 40rem; }
.test { border: 1px solid var(--line-strong); background: var(--surface); padding: var(--space-2xs) var(--space-xs); max-width: none; }
.test summary { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-s); align-items: center; cursor: pointer; font-weight: 400; }
.test ul { padding-left: 1.2em; margin-top: var(--space-3xs); font-size: var(--step--1); }
.tag { font-size: var(--step--2); font-weight: 700; padding: 0.15em 0.5em; border-radius: var(--radius); color: #fff; }
.tag--pass { background: var(--pass); }
.tag--fail { background: var(--fail); }
.warning { border-left: 5px solid var(--fail); background: var(--surface); padding: var(--space-2xs) var(--space-s); font-size: var(--step--1); }
.info-page h2 { margin-top: var(--space-l); }
.info-page p + p, .info-page ul { margin-top: var(--space-2xs); }

/* ---------------------------------------------------------------- Small screens */

@media (max-width: 47.99rem) {
  .workspace { display: block; }
  .site-head .site-nav { width: 100%; order: 3; }
  .filters-in-page { display: none; }
  .filters-button { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; margin-top: var(--space-s); }
  .filters-bar .filters-button { margin-top: 0; }
  .summary { grid-template-columns: 1fr; }
  .bar { grid-template-columns: 6rem 1fr 3rem; }
  .shortlist-button { right: var(--space-2xs); bottom: var(--space-2xs); }
}

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

/* ---------------------------------------------------------------- Print (the shortlist) */

@media print {
  .site-head, .site-foot, .proto-note, .search, .filters, .toolbar, .pager, .shortlist-button, .star, .plan { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------------------------------------------------------------- Search and Filters buttons (14 Nov)
   Under the plate: Filters (outline) and Search (solid accent blue). Typing searches quietly; Search shows it. */
.search-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-s); margin-top: var(--space-m); }
[data-minimal] .search-actions .filters-button { min-height: 3rem; padding: 0 1.3em; }
.search-button {
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 3rem; padding: 0 2em; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); border: 2px solid var(--accent);
  font-family: var(--font-ui); font-size: var(--step-0); font-weight: 700;
}
.search-button svg { width: 1.15em; height: 1.15em; }
.search-button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.search-button { transition: background-color 200ms, color 200ms, border-color 200ms; }
/* After a search, until the plate or an option changes (14 Nov): the page colour, with a faint outline, so it
   reads as "done" rather than gone. It can't be pressed (disabled). */
.search-button[data-done],
.search-button[data-done]:hover { background: var(--paper); color: var(--ink-2); border-color: var(--line); cursor: default; }
/* Results from before the plate changed: faded until Search is pressed again. */
[data-minimal] .results[data-stale] .results__body { opacity: 0.4; transition: opacity 120ms; }
/* Short screens: keep a gap under the header when the centred plate fills the height. */
[data-minimal]:not([data-searching]) main[data-centre] > .wrapper { padding-top: var(--space-m); }

/* ---------------------------------------------------------------- Minor fixes (preview, 14 Nov) */
/* The shortlist-full note, in place of the old alert() box. */
.shortlist-full {
  margin-top: var(--space-2xs); padding: 0.4em 0.7em; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--ink); font-family: var(--font-body); font-size: var(--step--1);
}
/* Room at the bottom of the page for the floating Shortlist button, so it never covers the last card or
   "Show 50 more" on a phone. */
body[data-has-shortlist] main { padding-bottom: calc(var(--space-xl) * 2 + 3rem); }

/* ---------------------------------------------------------------- Site review (preview, 14 Nov) */

/* Search options (14 Nov, v2): always shown under Search as one quiet bar split into four parts (length,
   lookalikes, any length, Filters). The thin dividers and the shared outline ("common region") show where
   each option starts and ends; the text is normal size so it is easy to read, but grey, so the plate and
   Search stay the main thing. On a phone the four parts stack as rows of a small list. */
.search-options {
  display: inline-flex; flex-wrap: wrap; align-items: stretch; justify-content: center;
  max-width: 100%; margin-top: var(--space-s); margin-inline: auto;
  border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface);
  font-family: var(--font-body); font-size: var(--step-0); color: var(--ink-2);
  transition: background-color 300ms;
}
.search-options .lookalikes, .search-options .lookalikes__row { display: contents; }
.search-options__item, .search-options .option, .search-options__filters {
  display: flex; align-items: center; gap: var(--space-2xs); min-height: 3rem; padding: 0 var(--space-s);
}
.search-options .option, .search-options__filters { border-left: 1px solid var(--line); }
.search-options .plate-input__controls { margin-top: 0; }
.search-options .stepper { gap: var(--space-2xs); }
.search-options .stepper button {
  width: 2rem; min-height: 2rem; border-color: var(--line-strong); background: none; color: var(--ink-2);
}
.search-options .stepper button:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-2); }
.search-options .stepper output { min-width: 8ch; color: var(--ink); }
.search-options .choice { color: var(--ink-2); }
.search-options .choice:hover { color: var(--ink); }
.search-options .choice input { width: 1.15rem; height: 1.15rem; }
.search-options .help-button { width: 1.5rem; height: 1.5rem; font-size: 0.8rem; border-color: var(--line-strong); color: var(--ink-2); }
.search-options__filters { border-width: 0 0 0 1px; border-style: solid; border-color: var(--line); border-radius: 0; background: none; color: var(--ink-2); font: inherit; text-decoration: none; }
.search-options__filters:hover { color: var(--ink); background: var(--hover); }
.search-options__filters::before {
  content: ""; width: 1.1em; height: 1.1em; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 5h9m4 0h1M3 10h3m4 0h7M3 15h7m4 0h3' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='5' r='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='8' cy='10' r='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='15' r='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 5h9m4 0h1M3 10h3m4 0h7M3 15h7m4 0h3' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='5' r='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='8' cy='10' r='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='15' r='2' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search-options > :first-child { border-radius: var(--radius-l) 0 0 var(--radius-l); }
.search-options > :last-child { border-radius: 0 var(--radius-l) var(--radius-l) 0; }
@media (max-width: 47.99rem) {
  /* Phone and small tablet: one option per row, divided by lines, like a settings list. */
  .search-options { display: flex; flex-direction: column; width: min(100%, 24rem); }
  .search-options__item, .search-options .option { justify-content: space-between; }
  .search-options .option, .search-options__filters { border-width: 1px 0 0; border-style: solid; border-color: var(--line); }
  .search-options__item, .search-options .option, .search-options__filters { min-height: 2.75rem; }
  .search-options > :first-child { border-radius: var(--radius-l) var(--radius-l) 0 0; }
  .search-options > :last-child { border-radius: 0 0 var(--radius-l) var(--radius-l); }
  .search-options__filters::after { content: "›"; margin-left: auto; font-size: 1.3em; line-height: 1; }
}
/* "Search options" in a no-results message scrolls here and lights the bar up for a moment. */
.search-options--flash { background: var(--accent-soft); }

/* Quick filters above the results (Mockup B), stuck to the top of the window while scrolling. */
.quick-filters {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 25;
  margin-top: var(--space-l); padding-block: var(--space-2xs);
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.quick-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.quick-chip {
  display: inline-flex; align-items: center; gap: 0.4em; max-width: 15rem; min-height: 2.5rem; padding: 0 0.9em;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; white-space: nowrap;
}
.quick-chip > span { overflow: hidden; text-overflow: ellipsis; }
.quick-chip[data-quick]::after { content: ""; flex: none; border: 0.3em solid transparent; border-top-color: currentColor; border-bottom-width: 0; }
.quick-chip:hover { background: var(--hover); }
.quick-chip--on, .quick-chip--on:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.quick-chip[aria-expanded="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.quick-chip svg { width: 1.15em; height: 1.15em; }
.quick-filters__count { margin-left: auto; color: var(--ink-2); font-family: var(--font-body); font-size: var(--step--1); }

/* The quick filters as small number plates (14 Nov): a rectangle with the plate's slightly rounded corners,
   a dark edge and a thin inner rim, and the label in the plate font. Off they are a white front plate; when
   a filter is on, the plate turns yellow like a rear plate. On a phone the four share one row evenly. */
.quick-chip {
  justify-content: center; min-width: 6.5rem; min-height: 2.5rem; padding: 0 0.85em;
  border: 2px solid var(--plate-edge); border-radius: var(--radius-plate);
  background: #ffffff; color: var(--plate-ink); box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 3px rgb(0 0 0 / 0.18);
  font-family: var(--font-plate); font-size: var(--step-0); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.quick-chip:hover { background: #f1f1f1; }
.quick-chip--on, .quick-chip--on:hover {
  border-color: var(--plate-edge); background: var(--plate); color: var(--plate-ink);
  box-shadow: inset 0 0 0 2px var(--plate), inset 0 0 0 3px rgb(0 0 0 / 0.25);
}
.quick-chip[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.quick-chip [data-filter-count] { font-family: var(--font-body); letter-spacing: 0; }
@media (max-width: 29.99rem) {
  .quick-filters__row { flex-wrap: nowrap; gap: var(--space-3xs); }
  .quick-chip { flex: 1 1 0; min-width: 0; padding: 0 0.4em; gap: 0.25em; font-size: var(--step--1); }
}
[data-minimal] .results { margin-top: var(--space-s); }
.quick-pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 26;
  width: min(22rem, 100%); max-height: min(60vh, 26rem); overflow-y: auto; padding: var(--space-xs);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-l);
  font-family: var(--font-body);
}
.quick-pop .link-button { margin-top: var(--space-2xs); font-size: var(--step--1); }
.quick-colours { list-style: none; padding: 0; display: grid; gap: 2px; }
.quick-colour {
  display: flex; align-items: center; gap: 0.6em; width: 100%; min-height: 2.5rem; padding: 0 0.6em;
  border: 0; border-radius: var(--radius); background: none; color: var(--ink);
  font-family: var(--font-body); font-weight: 400; text-align: left;
}
.quick-colour:hover { background: var(--hover); }
.quick-colour[aria-pressed="true"] { background: var(--accent-soft); font-weight: 600; }
.quick-colour[aria-pressed="true"]::after { content: "✓"; color: var(--accent); font-weight: 700; }
.quick-colour .dot { width: 1.1rem; height: 1.1rem; }
.quick-colour__n { margin-left: auto; color: var(--ink-2); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.quick-year { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.quick-year label { display: grid; gap: var(--space-3xs); color: var(--ink-2); font-size: var(--step--1); font-weight: 600; }
.quick-year select { width: 8rem; }

/* The make picker: a search box and the most common makes as chips, in place of a 660-line drop-down. */
.make-picker { display: grid; gap: var(--space-2xs); font-family: var(--font-body); }
.make-picker__q { width: 100%; min-height: 2.5rem; }
.make-picker__label { color: var(--ink-2); font-size: var(--step--1); }
.make-picker__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.make-picker__chosen:empty { display: none; }
.make-chip {
  min-height: 2.25rem; padding: 0 0.85em; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
}
.make-chip:hover { background: var(--hover); }
.make-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.make-chip__n { margin-left: 0.3em; color: var(--ink-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.make-picker__clear {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.25rem; padding: 0 0.35em 0 0.9em;
  border: 0; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 700;
}
.make-picker__clear::after {
  content: "×"; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: 1rem; line-height: 1;
}
[data-minimal] .sheet .filters__main { grid-template-columns: 1fr; }

/* Colours: the six most common, then "Show all". */
.swatches__all { margin-top: var(--space-2xs); font-size: var(--step--1); }

/* The minor groups folded into one line each, saying what's chosen (Mockup C). */
.folds { margin-top: var(--space-m); border-top: 1px solid var(--line); }
.fold { border-bottom: 1px solid var(--line); }
.fold > summary {
  display: flex; align-items: center; gap: var(--space-s); min-height: 3rem; cursor: pointer; list-style: none; font-weight: 700;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: ""; flex: none; width: 0.5em; height: 0.5em; margin-right: 0.2em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-0.15em);
}
.fold[open] > summary::after { transform: rotate(-135deg) translateY(-0.1em); }
.fold__value {
  margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-2); font-family: var(--font-body); font-size: var(--step--1); font-weight: 400;
}
.fold--set .fold__value { color: var(--accent); font-weight: 600; }
/* Engine size when Electric is the only fuel (14 Nov): greyed out and can't be opened. */
.fold--off { opacity: 0.45; }
.fold--off > summary { pointer-events: none; cursor: default; }
.fold__body { min-width: 0; margin: 0; padding: 0 0 var(--space-s); border: 0; }

/* "Also": each grey hint on its own line under its choice. */
.choice__hint { display: block; color: var(--ink-2); font-size: var(--step--1); }
/* On a phone the count would wrap onto its own line, and the results heading says it just below. */
@media (max-width: 29.99rem) { .quick-filters__count { display: none; } }
/* ---------------------------------------------------------------- Page load: the tiles flip in (14 Nov)
   Each tile swings up from its bottom edge, one after another, like a split-flap board. Played once:
   plate-input.js removes .plate-input--intro after 2 s. Off under prefers-reduced-motion (rule above). */
@keyframes tile-flip-in {
  from { transform: perspective(400px) rotateX(-90deg); opacity: 0; }
  to { transform: perspective(400px) rotateX(0); opacity: 1; }
}
/* The page shows first; the tiles wait --intro-wait (blank, held by `backwards`) and then flip in one by one. */
.plate-input--intro { --intro-wait: 300ms; --intro-step: 80ms; }
.plate-input--intro .cell { transform-origin: center bottom; animation: tile-flip-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: var(--intro-wait); }
.plate-input--intro .cell:nth-child(2) { animation-delay: calc(var(--intro-wait) + var(--intro-step) * 1); }
.plate-input--intro .cell:nth-child(3) { animation-delay: calc(var(--intro-wait) + var(--intro-step) * 2); }
.plate-input--intro .cell:nth-child(4) { animation-delay: calc(var(--intro-wait) + var(--intro-step) * 3); }
.plate-input--intro .cell:nth-child(5) { animation-delay: calc(var(--intro-wait) + var(--intro-step) * 4); }
.plate-input--intro .cell:nth-child(6) { animation-delay: calc(var(--intro-wait) + var(--intro-step) * 5); }
.plate-input--intro .cell:nth-child(7) { animation-delay: calc(var(--intro-wait) + var(--intro-step) * 6); }
.plate-input--intro .cell:nth-child(8) { animation-delay: calc(var(--intro-wait) + var(--intro-step) * 7); }

/* ---------------------------------------------------------------- Animations preview (14 Nov)
   All of these are switched off by the prefers-reduced-motion rule further up (it uses !important). */

/* The logo: inline SVG (templates/_logo.html), about the height the old REG ISH plate had. logo.js plays the
   ISH reels (their letters are outlines in logo.js, the same font as the logo). */
.wordmark .logo { display: block; height: 3rem; width: auto; }
@media (max-width: 29.99rem) { .wordmark .logo { height: 2.4rem; } }

/* A wrong key (/ ! - and so on): plate-input.js writes it in the tile, the tile shakes, then it is deleted.
   The wrong character shows in red, so it reads as "not allowed". */
@keyframes cell-nope {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
.cell--nope { animation: cell-nope 420ms ease-out; }
.cell--nope input.cell__input { color: #c62828; }

/* While searching, the unknown tiles flick through characters, then settle back to blank. */
.cell__roll {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  color: var(--plate-ink); opacity: 0.45;
  font-family: var(--font-plate); font-weight: 700; font-size: calc(var(--tile) * 1.15); font-stretch: 78%; line-height: 1;
}
.cell--rolling .cell__input::placeholder { color: transparent; }

/* The filters pop-up slides up into place, and the page behind it dims gently. */
@keyframes sheet-up { from { transform: translateY(2.5rem); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
.sheet[open] { animation: sheet-up 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.sheet[open]::backdrop { animation: fade-in 250ms ease-out; }

/* New results rise in, one card after another (search.js adds .rise and --i; "Show more" only the new ones). */
@keyframes rise-in { from { transform: translateY(0.75rem); opacity: 0; } }
.rise { animation: rise-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }