/* base.css: the shared furniture of "open all night" (founder's pick, 2026-11-12).
   Specification: ops/briefs/2026-11-12/247-ads-calls/redesign/direction-b. DESIGN.md has the
   measured values; tokens.css has every colour and size.

   What is here: the reset, the type register, the shell every page wears (header, the closing
   sign, footer, the phone Call + WhatsApp bar), buttons, links, the open-now line and the content
   line. Page furniture is in pages.css.

   Tokens only. scripts/check-contrast.mjs fails the build on a raw colour under src/ outside
   tokens.css; a one-line mix of two tokens is the one exemption.

   Logical properties throughout, because /ar/ is the same markup read from the right. */

*,
*::before,
*::after { box-sizing: border-box; }

/* Several nodes are `hidden` until a script has something to put in them, and each carries a
   class whose own `display` would win. The attribute is the contract; this makes it hold. */
[hidden] { display: none !important; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--color-raised) var(--color-bg);
}

::selection { background: var(--color-accent); color: var(--color-text-on-accent); }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  caret-color: var(--color-accent);
  accent-color: var(--color-accent);
}

img,
svg { max-width: 100%; }

img { height: auto; }

/* A link is bone text over a 2px signal underline. Colour never marks a link here. */
a {
  color: var(--color-link);
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

:where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }

ul, ol { padding: 0; list-style: none; }

/* Focus is a 3px bone ring outside the control, on every page and every control. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: -80px;
  inset-inline-start: var(--space-12);
  z-index: var(--z-skip);
  padding: var(--space-12) var(--space-6);
  border-radius: var(--radius-ctl);
  background: var(--color-bone);
  color: var(--color-on-bone);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus { inset-block-start: var(--space-12); }

/* ---------- the register ------------------------------------------------------------------ */
/* One family per script. Headings are 600 (Arabic h1 700), set in sentence case, never
   uppercase. Size and leading come from tokens.css, which restates them for Arabic. */
h1, h2, h3,
.display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--weight-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-title); line-height: 1.25; letter-spacing: var(--tracking-display-title); }

/* A run in the other script keeps its own face and direction. `direction` alone does nothing to
   an inline run, so the run is isolated as well. */
:not(html)[lang="ar"] { font-family: var(--font-arabic); direction: rtl; unicode-bidi: isolate; }
:not(html)[lang="en"] { font-family: var(--font-latin); direction: ltr; unicode-bidi: isolate; }

/* Digits and codes read left to right in the Latin face, in both locales: phone numbers, tyre
   sizes, counts beside a size. .num is the explicit form; any dir="ltr" island on the Arabic
   page takes the face too, so a size inside Arabic copy is never drawn in the Arabic font. */
.num {
  font-family: var(--font-latin);
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

html[lang="ar"] [dir="ltr"] { font-family: var(--font-latin); }

[data-clock] { font-variant-numeric: tabular-nums; }

.lede { color: var(--color-text-muted); text-wrap: pretty; max-width: var(--measure); }

.label {
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text-muted);
}

/* The text link: bone, 2px signal underline, a full tap target. */
.link,
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  color: var(--color-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .link:hover,
  .text-link:hover { color: var(--color-accent-hover); }
}

.link:active,
.text-link:active { color: var(--color-accent-press); }

/* ---------- buttons ----------------------------------------------------------------------- */
/* Soft plates: 16px radius, 56px high, no shadow. A button is a raised dark plate with a signal
   icon. ONE button on a screen is filled with the signal and it is always Call (.btn-call, or
   any tel: button). Press scales to 0.98. */
.btn,
.button {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-7);
  border: 0;
  border-radius: var(--radius-ctl);
  background: var(--color-raised);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-line);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* The older .button is used inline and centred, and some of its labels are long enough to need a
   second line on a phone. */
.button { display: inline-flex; justify-content: center; white-space: normal; text-align: center; }

.btn svg,
.button svg { width: 24px; height: 24px; flex: none; color: var(--color-accent); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  .button:hover { background: var(--color-raised-hover); }
}

.btn:active,
.button:active { transform: scale(0.98); background: var(--color-raised-press); }

.btn:focus-visible,
.button:focus-visible { border-radius: var(--radius-ctl); }

.btn-call,
.button[href^="tel:"] {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  box-shadow: none;
}

.btn-call svg,
.button[href^="tel:"] svg { color: var(--color-text-on-accent); }

@media (hover: hover) and (pointer: fine) {
  .btn-call:hover,
  .button[href^="tel:"]:hover { background: var(--color-accent-hover); }
}

.btn-call:active,
.button[href^="tel:"]:active { background: var(--color-accent-press); }

/* The first-screen Call: 88px, the number as its label, "Call now" above it. */
.btn-call-lg { min-height: var(--call-height); padding-inline: var(--space-14); gap: var(--space-6); }
.btn-call-lg svg { width: 30px; height: 30px; }
.btn-call-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.btn-call-what { font-size: var(--fs-caption); font-weight: 600; line-height: 1; }
html[lang="ar"] .btn-call-what { font-size: var(--fs-chip); line-height: 1.2; }
.btn-call-lg .num { font-size: var(--fs-call-number); font-weight: var(--weight-number); line-height: 1; letter-spacing: -0.012em; }

.btn-fit { width: fit-content; }

/* ---------- the open-now line and the number as a sign -------------------------------------- */
/* The shop never closes, so "Open now" is always true; app.js writes the hour in Riffa beside
   it and the static text is the fallback. The lamp is the one circle in the system. */
.open-line {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-chip);
  font-weight: 500;
  line-height: 1.2;
}

.lamp {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-lamp-halo);
}

.open-now { color: var(--color-accent); }
.open-clock { color: var(--color-text-muted); }

.sign { padding-block: var(--space-19) var(--space-17); }
.sign .open-line { margin-block-end: var(--space-11); }

.bignum {
  display: block;
  width: fit-content;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--fs-sign);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-number);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .bignum:hover { color: var(--color-accent); }
}

.bignum:active { color: var(--color-accent-press); }

.sign-always { margin-block-start: var(--space-4); color: var(--color-text-muted); }

/* ---------- the shell: header --------------------------------------------------------------- */
/* Logo at the start, the language at the end, and from 60em two quiet links between them. No
   band, no rule, no menu: the page ground runs under it. On a phone everything else is one
   scroll away in the footer, and Call and WhatsApp are in the bar. */
.wrap {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.top {
  position: relative;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--masthead-height);
}

.logo { display: flex; align-items: center; min-height: var(--tap-target); border-radius: var(--radius-sm); }
.logo img { display: block; height: var(--logo-height); width: auto; }

.top-nav { display: flex; align-items: center; gap: var(--space-16); }

.top-nav a:not([class]),
.top-call {
  display: none;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  color: var(--color-text-muted);
  font-weight: 500;
  text-decoration: none;
}

.top-nav a:not([class])[aria-current="page"] { color: var(--color-text); }
.top-call { color: var(--color-text); font-weight: 600; }
.top-call svg { width: 20px; height: 20px; flex: none; color: var(--color-accent); }

@media (hover: hover) and (pointer: fine) {
  .top-nav a:not([class]):hover { color: var(--color-text); }
  .top-call:hover { color: var(--color-accent-hover); }
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding-inline: var(--space-5);
  margin-inline-end: calc(-1 * var(--space-5));
  border-radius: var(--radius-ctl);
  color: var(--color-text);
  font-size: var(--fs-body-md);
  font-weight: 500;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .lang-switch:hover { background: var(--color-surface); }
}

.lang-switch:active { background: var(--color-raised); }

@media (min-width: 60em) {
  .top-nav a:not([class]) { display: inline-flex; }
  /* Home's first screen already carries the number as its one filled button. */
  body:not([data-page="home"]) .top-call { display: inline-flex; }
}

/* ---------- the shell: footer --------------------------------------------------------------- */
/* Every page closes the same way: the open-now line and the number set as a sign, then a
   hairline and the quiet list of everything else. */
.foot { color: var(--color-text-muted); font-size: var(--fs-chip); }

.foot-nav {
  display: grid;
  gap: var(--space-9);
  padding-block: var(--space-16);
  border-block-start: 1px solid var(--color-line);
}

.foot-title { margin-block-end: var(--space-1); color: var(--color-text); font-weight: 600; }

.footer-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }

.foot-nav a,
.foot-base a,
.foot-button {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  color: var(--color-text-muted);
  text-decoration: none;
}

.foot-button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: start; }

@media (hover: hover) and (pointer: fine) {
  .foot-nav a:hover,
  .foot-base a:hover,
  .foot-button:hover { color: var(--color-text); }
}

.foot-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-8);
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--color-line);
}

.foot-where { margin-inline-start: auto; padding-block: var(--space-5); }

@media (min-width: 45em) {
  .foot-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-list { grid-template-columns: 1fr; }
}

/* ---------- the shell: the phone bar -------------------------------------------------------- */
/* Call (the number, filled) and WhatsApp, fixed to the bottom below 60em. Call is at the start,
   so it sits on the right on /ar/. pages.js sets body.contact-in-view while an on-page Call and
   WhatsApp are both fully on screen, and the bar slides away for as long as they are; the page
   keeps its bottom padding either way, so nothing is ever under the bar. */
.bottom-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-action-bar);
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-12) calc(var(--space-4) + env(safe-area-inset-bottom));
  background: var(--color-bg);
  border-block-start: 1px solid var(--color-line);
  transition: transform var(--duration-base) var(--ease-out), visibility 0s;
}

.bottom-bar .btn { min-height: var(--bar-button-h); justify-content: center; padding-inline: var(--space-12); gap: var(--space-3); }
.bottom-bar .btn-call svg { width: 22px; height: 22px; }
.bottom-bar .btn-call .num { font-size: 20px; font-weight: var(--weight-number); letter-spacing: -0.01em; }

/* Focus must reveal the action at once, without sliding through an off-screen state. */
.bottom-bar:focus-within { transition: none; }

.contact-in-view .bottom-bar:not(:focus-within) {
  transform: translateY(105%);
  visibility: hidden;
  transition: transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
}

@media (max-width: 59.99em) {
  body { padding-block-end: calc(var(--action-bar-height) + env(safe-area-inset-bottom)); }
}

@media (min-width: 60em) {
  .bottom-bar { display: none; }
}

/* ---------- the analytics choice dialog ----------------------------------------------------- */
.analytics-choice {
  max-inline-size: min(90vw, var(--measure));
  max-block-size: 90vh;
  overflow: auto;
  padding: var(--space-15);
  border: 0;
  border-radius: var(--radius-box);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.analytics-choice::backdrop { background: var(--color-backdrop); }
.analytics-choice h2 { font-size: var(--fs-title-lg); line-height: 1.2; }
.analytics-choice p { margin-block-start: var(--space-12); color: var(--color-text-muted); }
.analytics-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-7); }

/* ---------- the finder ---------------------------------------------------------------------- */
/* The size as the tyre prints it becomes the input: one surface panel, three numeral fields and
   the signal slash between them. Shared by /size/, /vehicle/ and the size guide. Every control
   is a native <select>; from 64em app.js lays a keyboard listbox over each one. */
.finder { padding: var(--space-14); border-radius: var(--radius-box); background: var(--color-surface); }
.finder-panel { display: none; }
.finder[data-tab="size"] #panel-size,
.finder[data-tab="vehicle"] #panel-vehicle { display: block; }
.finder-form { display: grid; gap: var(--space-7); }
.finder :is(button, select) { scroll-margin-block: var(--space-9); }

/* By size / By car: one track, the chosen side a raised plate. */
.finder-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-block-end: var(--space-14);
  padding: var(--space-2);
  border-radius: var(--radius-ctl);
  background: var(--color-bg);
}
.finder-mode {
  min-height: var(--tap-target);
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.finder-mode[aria-selected="true"] { background: var(--color-raised); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-line); }
@media (hover: hover) and (pointer: fine) {
  .finder-mode:hover { color: var(--color-text); }
}

/* A field: a visible label over a 56px plate. */
.finder-front { display: grid; gap: var(--space-6); }
.field { position: relative; display: grid; gap: var(--space-3); min-width: 0; }
.field-label { color: var(--color-text-muted); font-size: var(--fs-meta); font-weight: 500; line-height: 1.2; }
.field-optional { font-weight: 400; }
.field-hint { color: var(--color-text-muted); font-size: var(--fs-caption); }
.field-select {
  width: 100%;
  min-height: var(--control-height);
  padding-block: 0;
  padding-inline: var(--space-6) var(--space-10);
  border: 0;
  border-radius: var(--radius-ctl);
  background-color: var(--color-raised);
  /* The caret: two half-filled squares that meet in a point. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  color: var(--color-text);
  font: inherit;
  text-overflow: ellipsis;
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
}
[dir="rtl"] .field-select:not([dir="ltr"]) { background-position: 18px 50%, 24px 50%; }
.field-select:disabled { box-shadow: inset 0 0 0 1px var(--color-line); color: var(--color-text-muted); opacity: 1; cursor: not-allowed; }
.field-select:focus-visible { border-radius: var(--radius-ctl); }

/* The size row: width / profile R rim, left to right in both languages, as the sidewall has it. */
.finder-sizes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-11);
  direction: ltr;
}
.size-separator { color: var(--color-accent); font-family: var(--font-latin); font-size: var(--fs-field); font-weight: 500; line-height: 1; }
.size-rim-prefix { color: var(--color-text); }

/* A numeral field. The select covers the plate and is transparent; the readout under it prints
   the chosen value large. Empty, the plate reads its own name and nothing else. */
.field-num {
  align-content: center;
  justify-items: center;
  gap: var(--space-2);
  height: var(--field-height);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-ctl);
  background: var(--color-raised);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  text-align: center;
}
.field-num::after {
  content: "";
  border: 5px solid transparent;
  border-block-start-color: var(--color-text-muted);
  border-block-end-width: 0;
}
.field-num .field-label { font-size: var(--fs-caption); }
.field-num .field-select { position: absolute; inset: 0; z-index: 1; height: 100%; min-height: 0; padding: 0; background: none; box-shadow: none; opacity: 0; }
.field-readout {
  max-width: 100%;
  overflow: hidden;
  color: var(--color-text);
  font-family: var(--font-latin);
  font-size: var(--fs-field);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-number);
  white-space: nowrap;
}
.field-readout.is-long { font-size: var(--fs-title); letter-spacing: 0; }
.field-readout.is-example { color: var(--color-text-muted); font-family: inherit; font-size: var(--fs-body-md); letter-spacing: 0; line-height: 1.3; }
/* The label is still the field's name for assistive technology while the plate prints it. */
.field-num:has(.field-readout.is-example) .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Profile and rim wait for the width: a waiting field is an outline, not a plate. */
.field-num:has(.field-select:disabled) { background: none; box-shadow: inset 0 0 0 1px var(--color-line); }
.field-num:focus-within { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.field-num .field-select:focus-visible { outline: none; }
.field-num:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--color-danger); }

/* One plain sentence under the row that holds the empty field. */
.finder-note { color: var(--color-text-muted); font-size: var(--fs-meta); line-height: 1.4; }
.finder-msg { color: var(--color-danger); font-weight: 500; }
.finder-msg a { color: var(--color-text); }

.finder-rear-toggle {
  justify-self: start;
  min-height: var(--tap-target);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  cursor: pointer;
}

/* Reset is a quiet word; the submit is the form's one bone plate. Call stays the only button
   filled with the signal. */
.finder-actions { display: flex; align-items: center; gap: var(--space-6); }
.finder-reset {
  min-height: var(--tap-target);
  padding: 0 var(--space-3);
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.finder-cta {
  flex: 1;
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-7);
  border: 0;
  border-radius: var(--radius-ctl);
  background: var(--color-bone);
  color: var(--color-on-bone);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, transform 120ms ease;
}
.finder-cta:focus-visible { border-radius: var(--radius-ctl); }
.finder-cta:active { transform: scale(0.98); background: var(--color-bone-press); }
@media (hover: hover) and (pointer: fine) {
  .finder-reset:hover { color: var(--color-text); }
  .finder-cta:hover { background: var(--color-bone-hover); }
}

/* By car: four labelled plates, top to bottom. */
.finder-sizes-vehicle { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-6); direction: inherit; }
.finder-recent { display: grid; gap: var(--space-3); }
.finder-recent-title { color: var(--color-text-muted); font-size: var(--fs-meta); }
/* A car searched before: its name, then its size, quieter. Clearing the list is a word, not a chip. */
.chip-recent { gap: var(--space-3); }
.chip-recent .chip-size { color: var(--color-text-muted); font-size: var(--fs-caption); }
.chip-clear { background: none; box-shadow: none; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; }

/* From 64em an in-page listbox stands in for the native menu, so every browser gets the same
   compact list. The real select stays underneath as the form's source of truth; the transparent
   button over it is the keyboard target. Phones never show the enhancement. */
.compact-select-trigger { display: none; }
.compact-select-listbox {
  position: fixed;
  z-index: 1000;
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-raised);
  color: var(--color-text);
  font-size: var(--fs-caption);
  line-height: 18px;
}
.compact-select-option { min-height: 26px; padding: var(--space-1) var(--space-5); cursor: pointer; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .compact-select-option:is(.is-active, :hover) { background: var(--color-bone); color: var(--color-on-bone); }
}
.compact-select-option[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--color-accent); }
html[dir="rtl"] .compact-select-option[aria-selected="true"] { box-shadow: inset -3px 0 0 var(--color-accent); }
.compact-select-option[aria-disabled="true"] { color: var(--color-text-muted); cursor: default; }

@media (min-width: 45em) {
  .finder { padding: var(--space-17); }
  .finder-sizes { gap: var(--space-12); }
  .finder-sizes-vehicle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-readout.is-long { font-size: var(--fs-mono-md); }
  .field-readout.is-example { font-size: var(--fs-title); }
  .finder-actions { justify-content: space-between; }
  .finder-cta { flex: 0 1 280px; }
}

@media (min-width: 64em) {
  .has-compact-select .compact-select-trigger {
    position: absolute;
    display: block;
    z-index: 4;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-ctl);
    background: transparent;
    color: transparent;
    cursor: pointer;
  }
  .has-compact-select .compact-select-trigger:disabled { cursor: not-allowed; }
  .field-num .compact-select-trigger:focus-visible { outline: none; }
}

@media (prefers-reduced-motion: reduce) {
  .finder-mode, .finder-cta { transition: none; }
  .finder-cta:active { transform: none; }
}

/* ---------- chips ------------------------------------------------------------------------- */
.chip-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-ctl);
  background: var(--color-raised);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-line);
  font-size: var(--fs-chip);
  font-weight: 500;
  line-height: 1.15;
  text-decoration: none;
}

/* Only a chip that goes somewhere answers the pointer; a fact chip is not a control. */
@media (hover: hover) and (pointer: fine) {
  a.chip:hover { background: var(--color-raised-hover); }
}

/* ---------- brand marks ------------------------------------------------------------------- */
/* A brand mark always stands on a bone plate. A maker with no logo file is set as type on the
   same plate (.brand-badge), in the ink the plate takes. */
.brand-logo { display: flex; align-items: center; justify-content: center; }
.brand-logo img { max-height: 30px; width: auto; object-fit: contain; }
.brand-badge { flex-direction: column; gap: 2px; text-align: center; color: var(--color-on-bone); }
.brand-badge-initials { font-size: var(--fs-chip); font-weight: 600; }
.brand-badge-name { font-size: var(--fs-caption); color: var(--color-muted-on-bone); }
/* The exception: artwork a maker supplies in white or pale gold cannot be read on bone, so it
   keeps a raised dark plate with a hairline. The list follows the rendered asset audit. */
:is(.brand-logo, .tyre-card-brand, .brand-chip-mark, .size-tile-mark):has(> img:is(
  [src^="/brands/falken."], [src^="/brands/federal."], [src^="/brands/radar."],
  [src^="/brands/goform."], [src^="/brands/hifly."], [src^="/brands/ilink."],
  [src^="/brands/thunderer."], [src^="/brands/torque."], [src^="/brands/goodyear."],
  [src^="/brands/aterna."], [src^="/brands/boto."]
)) { background: var(--color-raised); box-shadow: inset 0 0 0 1px var(--color-line); }

/* ---------- the language-choice shells (dist/index.html and public/404.html) ---------------- */
/* Those two pages are written outside src/ and link tokens.css + base.css only. They must keep
   working after any rewrite of this file. */
.lang-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  min-height: 100vh;
  padding: var(--gutter);
  text-align: center;
}

.lang-choice h1 { font-size: var(--fs-h1-place); line-height: var(--lh-h1-place); }

/* ---------- the content line ---------------------------------------------------------------- */
/* THE PAGE SHELL NEVER INSETS. Exactly one box on the path from .page to the text carries the
   inset, and that inset is always --edge, the site's single content line: on a full-width box it
   centres the column, and it lands on the same pixel as .wrap at every width. */
.page { max-width: none; margin-inline: 0; padding: 0; }

.page > * { padding-inline: var(--edge); }

/* The plain-page defaults, for pages not yet ported. The exclusion list is wrapped in :where()
   on purpose: :not() takes its argument's specificity, and a bare chain outranked every
   .page-<id> rule a page slice writes. */
.page:not(:where(.page-home, .page-size-search, .page-vehicle-finder, .page-tyres, .page-tyres-size, .page-brands, .page-brand)) > section { margin-block-start: var(--space-10); }
.page:not(:where(.page-home, .page-size-search, .page-vehicle-finder, .page-tyres, .page-tyres-size, .page-brands, .page-brand)) h2 { font-size: var(--fs-title-lg); line-height: 1.2; margin-block-end: var(--space-5); }
.page:not(:where(.page-home, .page-size-search, .page-vehicle-finder, .page-tyres, .page-tyres-size, .page-brands, .page-brand)) p { margin-block-start: var(--space-5); max-width: var(--measure); }
.page:not(:where(.page-home, .page-size-search, .page-vehicle-finder, .page-tyres, .page-tyres-size, .page-brands, .page-brand)) .finder { margin-block-start: var(--space-7); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .button, .bignum, .bottom-bar { transition: none; }
  .contact-in-view .bottom-bar:not(:focus-within) { transition: none; }
  .btn:active, .button:active { transform: none; }
}