/* TyreKicker design system (SPEC 5.10). One stylesheet, no inline styles anywhere (CSP style-src 'self').
   Themes: <html data-theme="dark|light"> once the visitor picks one (the header switch, cookie tk_theme); with no
   choice stored the page is light (owner 2026-10-25, dark 22-25 Oct; tk.render.theme_for). The data-theme="auto" rules below
   (follow the device) are no longer used; they stay so going back is a one-line change in theme_for.
   Mobile first: 16px gutters, 44px+ tap targets, no horizontal scroll at 320px.

   Class map (all optional; bare elements are styled too):
     layout     .wrap  main.wide (720px, reports)  main.full (1280px, admin)  .stack  .row  .row-between  .grid-2
     text       .lead  .muted  .small  .center  .right  .nowrap  .mono  .notice
     header     .site-header .brand .wordmark .site-nav   .banner (worker taking a break)
     feedback   .flash .flash-ok|error|info  .field-errors  .spinner  .spinner-small  progress
     forms      .field .hint .has-error  .chips .chip  .chip-check  .segmented  .toggle  .check  .range-row
                .auth-tabs .auth-tab .auth-panel (sign in / create account)  .reveal-btn (show password)
     buttons    .btn .btn-primary|secondary|ghost|danger  .btn-small  .btn-big  .btn-block  .btn-google .btn-apple
     content    .card .card-title  .stats .stat  .badge .badge-<state>  .steps  details/summary
     admin      .table-wrap table  td.num  .inline-form  .admin-nav  .code .code-list
                td[data-label] .cell-wide .table-plain .chips-row (phones: tables as cards, see .admin-nav)
                .cell-break .cell-meta .cell-link .table-list .card-grid .jump-links .filter-form .find-row
                .friends .manage .give-form .friend-more (staging/admin1031)
     reports    .cars .car .car-photo .car-body .car-title .car-price .car-facts .verdict-great|good
                .value-under|over  .mot .flags  .why-list  .matrix .yes .no .unknown  .car-actions .thumbs
     example    .example-link .example-mini .stat-strip (front page)  .example-* .turned-* (/example)
     js hooks   .js-only (shown only with JavaScript)  .no-js-only
*/

/* ----- fonts ------------------------------------------------------------------------------------- */
/* All text, Apple-like everywhere (owner 2026-10-30 headings "like Apple", 2026-10-31 "change them every where so
   fonts looks good", staging/fonts1031). Apple devices use the system SF Pro and never fetch this; elsewhere (Android,
   Windows) Inter v4.1 (rsms.me/inter, SIL OFL: fonts/LICENSE-Inter.txt): ONE variable file, weight 400-700 and
   optical size 14-32, so text sizes get Inter's text cut and headings its Display cut by themselves, the way SF Pro
   switches Text/Display. Latin + Latin Extended-A (Škoda), quotes/dashes/…, and the ✓ ✗ → − ▲ ▼ used in the CSS (no ♥: Inter's reads as an
   icon in the placeholder, the system one stays), 47 KB. Preloaded
   in base.html for non-Apple browsers only. font-display: optional = never a jump: a page whose font comes too late
   keeps the fallback, the next one has it. Weights: 400 text, 600 labels/buttons/strong, 700 headings and prices. */
@font-face { font-family: "TK Sans"; font-style: normal; font-weight: 400 700; font-display: optional;
  src: url("fonts/inter-var.woff2") format("woff2-variations"), url("fonts/inter-var.woff2") format("woff2"); }

/* ----- tokens ------------------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #1f232c;
  --text: #e8eaed;
  --muted: #9aa0a6;
  --border: #2a2f3a;
  --field-border: #646b78;   /* inputs, selects, textareas: 3.5:1 on the page, 3.25:1 on the input fill (WCAG 1.4.11) */
  --accent: #f5b301;
  --accent-ink: #111;
  --accent-text: #f5b301;
  --accent-soft: rgba(245, 179, 1, 0.16);
  --good: #34c759;
  --good-ink: #07140b;
  --good-soft: rgba(52, 199, 89, 0.14);
  --bad: #ff6b6b;
  --bad-soft: rgba(255, 107, 107, 0.14);
  --focus: #ffd257;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --glow: rgba(245, 179, 1, 0.07);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%239aa0a6' stroke-width='2'/%3E%3C/svg%3E");
  color-scheme: dark;

  /* SF Pro on Apple devices, Inter (TK Sans) elsewhere; --font-display is the same family (optical size picks the
     Display cut for big text), kept as its own name for headings, prices and the wordmark */
  --font: -apple-system, BlinkMacSystemFont, "TK Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "TK Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 14px;
  --radius-sm: 10px;
  --pill: 999px;
  --tap: 44px;
  --gutter: 16px;
  /* vertical rhythm between stacked blocks (buttons, boxes, hints) */
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
}

/* Type scale (staging/fonts1031; 1rem = 17px). Small print, hints, chips, sub-lines: --fs-s. Three weights. */
:root {
  --fs-xs: 0.8rem;    /* 13.6px pills, badges */
  --fs-s: 0.88rem;    /* 15px hints, sub-lines, chips, captions, footer */
  --fw-text: 400;
  --fw-strong: 600;   /* labels, buttons, links that act, small titles, strong */
  --fw-heading: 700;  /* headings and prices, on --font-display */
}

[data-theme="light"] {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef0f4;
  --text: #15171c;
  --muted: #59606b;
  --border: #d6dae1;
  --field-border: #7d8490;   /* 3.5:1 on the page, 3.8:1 on white */
  --accent: #f5b301;
  --accent-ink: #111;
  --accent-text: #a85200;   /* 5.4:1 on white, 5.1:1 on the page, 4.75:1 on surface-2 (design audit 14 Oct: not olive) */
  --accent-soft: rgba(245, 179, 1, 0.22);
  --good: #187a33;   /* 5.4:1 on white, 4.7:1 on good-soft and surface-2 (WCAG AA for small bold text) */
  --good-ink: #ffffff;
  --good-soft: rgba(24, 122, 51, 0.1);
  --bad: #c62828;
  --bad-soft: rgba(198, 40, 40, 0.08);
  --focus: #b07800;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.06);
  --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.07), 0 8px 24px rgba(16, 24, 40, 0.07);
  --glow: rgba(245, 179, 1, 0.14);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2359606b' stroke-width='2'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* No choice stored (data-theme="auto") on a device set to light: the light tokens, word for word (keep the two
   blocks the same: tests/test_landing.py). Every other light-only rule has an "auto" twin in the same kind of
   media block next to it. */
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #eef0f4;
    --text: #15171c;
    --muted: #59606b;
    --border: #d6dae1;
    --field-border: #7d8490;   /* 3.5:1 on the page, 3.8:1 on white */
    --accent: #f5b301;
    --accent-ink: #111;
    --accent-text: #a85200;   /* 5.4:1 on white, 5.1:1 on the page, 4.75:1 on surface-2 (design audit 14 Oct: not olive) */
    --accent-soft: rgba(245, 179, 1, 0.22);
    --good: #187a33;   /* 5.4:1 on white, 4.7:1 on good-soft and surface-2 (WCAG AA for small bold text) */
    --good-ink: #ffffff;
    --good-soft: rgba(24, 122, 51, 0.1);
    --bad: #c62828;
    --bad-soft: rgba(198, 40, 40, 0.08);
    --focus: #b07800;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.06);
    --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.07), 0 8px 24px rgba(16, 24, 40, 0.07);
    --glow: rgba(245, 179, 1, 0.14);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2359606b' stroke-width='2'/%3E%3C/svg%3E");
    color-scheme: light;
  }
}

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

html {
  font-size: 106.25%; /* 17px with the default 16px, still follows the reader's own setting */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  /* Room for the scrollbar on every page, so the header doesn't jump sideways between a long page (scrollbar)
     and a short one like Sign in (none) where scrollbars take space (Windows; Mac with a mouse). */
  overflow-y: scroll;
}
@supports (scrollbar-gutter: stable) {
  html { overflow-y: auto; scrollbar-gutter: stable; }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.6em; letter-spacing: -0.01em; }
/* Apple-style headings (owner 2026-10-30): bold, not black; tracking near 0 like apple.com; h1 lines balanced */
h1, h2 { font-family: var(--font-display); font-weight: 700; }
h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.12; letter-spacing: -0.005em; margin-bottom: 0.7em; text-wrap: balance; }
h2 { font-size: clamp(1.25rem, 4vw, 1.45rem); letter-spacing: 0; margin-top: 1.6em; text-wrap: pretty; }
h3 { font-size: 1.1rem; font-weight: var(--fw-strong); margin-top: 1.3em; }
h4 { font-size: 1rem; font-weight: var(--fw-strong); }
p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: 0.25em; }
small, .small { font-size: var(--fs-s); }
:where(body:not(.home)) :is(p, li) { text-wrap: pretty; }
strong, b { font-weight: var(--fw-strong); }
hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
code, kbd, pre, .mono { font-family: var(--mono); font-size: 0.92em; }
pre { white-space: pre-wrap; background: var(--surface-2); padding: 12px; border-radius: var(--radius-sm); overflow-x: auto; }
kbd { border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; padding: 0 6px; }
dt { font-weight: var(--fw-strong); }
dd { margin: 0 0 0.6em; }
abbr[title] { text-decoration: underline dotted; }

a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
/* Small links inside hints and muted text take the text's own calm colour, underlined, and brighten on hover or
   focus (owner 2026-10-11: no bright yellow "Terms" in the buy box). Muted is 5.6:1 or more on the page, cards
   and surface-2 in both themes (WCAG AA 4.5:1); the main nav and the buttons keep their colours. */
.hint a, .muted a { color: inherit; }
.hint a:hover, .hint a:focus-visible, .muted a:hover, .muted a:focus-visible { color: var(--text); }

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

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

/* ----- layout ------------------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(640px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
main.wrap { padding-top: 20px; padding-bottom: 32px; }
main.wide, body.report .wrap { max-width: calc(720px + 2 * var(--gutter)); }
main.full, body.admin .wrap { max-width: calc(1280px + 2 * var(--gutter)); }   /* admin1031: wide tables (was 1040; 1280 with Friends' Bought) */

.stack > * + * { margin-top: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.row > * { min-width: 0; }
.row-between { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 400px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: var(--fw-strong); }
.skip-link:focus { left: 16px; }

/* ----- header, banner, footer --------------------------------------------------------------------- */
/* The header is dark in both themes (design audit 14 Oct, V2: the yellow tyre and "Kicker" lose their colour on a
   light page): it takes the dark tokens whatever the page's theme. */
.site-header {
  --bg: #0f1115; --surface-2: #1f232c; --text: #e8eaed; --muted: #9aa0a6; --border: #2a2f3a;
  --accent-text: #f5b301; --focus: #ffd257;
  color-scheme: dark; border-bottom: 1px solid var(--border); background: var(--bg); color: var(--text);
}
/* Wraps when big text (150-200 %) makes the logo and the nav too wide for a phone: the nav drops below,
   right-aligned, instead of pushing "Sign in" off the screen. Same 64 px header at normal size. */
.header-inner { display: flex; flex-wrap: wrap; row-gap: 0; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
body.report .header-inner { max-width: calc(1040px + 2 * var(--gutter)); }
body.admin .header-inner { max-width: calc(1280px + 2 * var(--gutter)); }

.brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); color: var(--text); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-glyph { width: 32px; height: 32px; flex: none; }
.tyre-ring { fill: none; stroke: var(--accent); stroke-width: 11; }
.tyre-rim { fill: none; stroke: var(--text); stroke-width: 3.5; }
.tyre-tread rect { fill: var(--bg); }
.tyre-hub { fill: var(--text); }
.wordmark { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.wordmark-accent { color: var(--accent); }

.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; border-radius: var(--pill); color: var(--text); text-decoration: none; font-weight: 600; white-space: nowrap; }
.site-nav a:hover { background: var(--surface-2); }
.site-nav a[aria-current="page"] { color: var(--accent-text); }
/* Signed in (New search · My searches [· Admin]): too wide next to the logo on a phone, so below 520 px the links
   get their own row under the logo, left-aligned (the first link's text lines up with the logo). */
@media (max-width: 520px) {
  .site-nav-many { flex: 1 0 100%; justify-content: flex-start; margin-left: -12px; }
  .site-nav-many a { padding: 0 12px; }
}

/* Light / dark switch (base.html): one icon link, 44 px square, after the nav. "auto" (no choice stored) has both
   links and shows the one that switches away from what the device shows. On a phone with the signed-in nav on its
   own row, the switch stays on the logo's row, at the right. */
.theme-switch { display: flex; align-items: center; }
.theme-switch a { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: var(--pill); color: var(--muted); }
.theme-switch a:hover { color: var(--text); background: var(--surface-2); }
.theme-switch svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="auto"] .theme-to-dark { display: none; }
@media (prefers-color-scheme: light) {
  [data-theme="auto"] .theme-to-light { display: none; }
  [data-theme="auto"] .theme-to-dark { display: inline-flex; }
}
@media (max-width: 360px) {      /* logo, "Sign in" and the switch on one 320 px row */
  .site-nav a { padding: 0 8px; }
  .site-nav + .theme-switch { margin-left: -8px; }
}
@media (max-width: 520px) {
  .site-nav-many { order: 3; }
  .site-nav-many + .theme-switch { margin-left: auto; }
}

.banner { background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--fs-s); }
.banner .wrap { padding-top: 10px; padding-bottom: 10px; border-left: 4px solid var(--accent); padding-left: 12px; }

.site-footer { margin-top: 40px; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-s); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-top: 16px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.site-footer a { color: var(--muted); display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer a:hover { color: var(--text); }

/* ----- text helpers ------------------------------------------------------------------------------- */
.lead { font-size: 1.1rem; color: var(--muted); }
.muted { color: var(--muted); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.hidden { display: none !important; }
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.notice { background: var(--surface-2); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 16px; }
.notice > :last-child { margin-bottom: 0; }
.notice .unproven-addr { margin: 12px 0 16px; max-width: 420px; }
.notice .unproven-addr input[readonly] { background: transparent; }
/* "Check your email" (_unproven.html, staging/confirm1031): the one thing to do after an email sign-up, first; the
   rescue lines (from/spam) quiet and set off from the rest by a rule (Opus critique 1) */
.notice-check { padding: 18px 18px 16px; }
.notice-check .check-title { margin: 0 0 8px; font-size: 1.4rem; }
.notice-check .check-lead { margin: 0 0 16px; }
.notice-check .check-subject { font-weight: var(--fw-strong); }
.notice-check .check-open { margin: 0 0 10px; max-width: 420px; }
.notice-check .check-open .btn { min-height: 52px; font-size: 1.05rem; }
.notice-check .check-help { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); color: var(--muted); }
.notice-check .unproven-addr label { font-size: var(--fs-s); color: var(--muted); }
.notice-check .inline-form .btn-ghost { margin-left: -15px; }
.hero { padding: 12px 0 4px; }

/* ----- flash messages ----------------------------------------------------------------------------- */
.flash { border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 16px; overflow-wrap: anywhere; }
.flash ul { margin: 6px 0 0; }
.flash-title { font-weight: var(--fw-strong); margin: 0; }
.flash-ok { border-color: var(--good); background: var(--good-soft); }
.flash-error { border-color: var(--bad); background: var(--bad-soft); }
.flash-info { border-color: var(--border); }

/* ----- cards, stats, badges ----------------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin: 0 0 16px; box-shadow: var(--card-shadow); }
.card > :last-child { margin-bottom: 0; }
.card-title { font-size: 1.1rem; font-weight: var(--fw-heading); margin: 0 0 8px; }
@media (min-width: 560px) { .card { padding: 22px 24px; } }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, calc(50% - 6px)), 1fr)); gap: 12px; margin: 0 0 20px; }  /* never fewer than 2 a row (320 px, inside a card) */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.stat-value { display: block; font-size: 1.6rem; font-weight: var(--fw-heading); line-height: 1.1; font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.stat-label { display: block; color: var(--muted); font-size: var(--fs-s); }

.badge { display: inline-block; padding: 2px 10px; border-radius: var(--pill); border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-strong); line-height: 1.6; white-space: nowrap; vertical-align: middle; }
.badge-queued, .state-queued { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }
.badge-running, .state-running { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.badge-done, .state-done { color: var(--good); border-color: var(--good); background: var(--good-soft); }
.badge-failed, .state-failed { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.badge-cancelled, .state-cancelled, .badge-draft, .state-draft { color: var(--muted); }

/* ----- forms -------------------------------------------------------------------------------------- */
form { margin: 0 0 16px; }
.field { margin: 0 0 20px; min-width: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
label, legend { display: block; font-weight: var(--fw-strong); margin: 0 0 6px; padding: 0; }
.hint { color: var(--muted); font-size: var(--fs-s); line-height: 1.45; margin: -2px 0 8px; text-wrap: pretty; }

input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"], input[type="password"], input:not([type]), select, textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font: inherit;
  font-size: 1rem; /* >= 16px: no zoom-on-focus on iPhones */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
input[type="date"] { min-width: 0; }
textarea { min-height: 140px; line-height: 1.45; resize: vertical; }
select { padding-right: 40px; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }  /* 6.3:1 light, 6.6:1 dark */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Keyboard focus must stand out (WCAG 1.4.11, 3:1): the amber glow alone is 1.85:1 on the light theme. */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input[readonly], textarea[readonly] { background: var(--surface-2); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 22px; height: 22px; margin: 0; flex: none; }

.has-error input, .has-error select, .has-error textarea, [aria-invalid="true"] { border-color: var(--bad); }
.field-errors { list-style: none; padding: 0; margin: 6px 0 0; color: var(--bad); font-size: var(--fs-s); font-weight: 600; }
.field-errors li + li { margin-top: 2px; }

.char-count { display: block; text-align: right; color: var(--muted); font-size: var(--fs-s); margin-top: 4px; font-variant-numeric: tabular-nums; }
.prompt-box textarea, textarea.prompt { min-height: 168px; font-size: 1.05rem; }

/* chips: example prompts (links/buttons) and checkbox/radio chips */
.chips, .segmented { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .chip-check > span {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 8px 14px;
  border-radius: var(--pill); border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: var(--fs-s); line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.chip:hover, .chip-check > span:hover { border-color: var(--accent); text-decoration: none; }
.chips-examples .chip { border-radius: var(--radius-sm); }
.chip-check { position: relative; display: inline-flex; margin: 0; font-weight: 400; }
.chip-check > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chip-check > input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: var(--fw-strong); }
.chip-check > input:checked + span::before { content: "\2713\00a0"; }
.chip-check > input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.chip-check > input:disabled + span { opacity: 0.5; cursor: not-allowed; }

/* switch */
.toggle { position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--tap); margin: 0; cursor: pointer; font-weight: 600; }
.toggle-note { color: var(--muted); font-weight: var(--fw-text); }
.toggle > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.toggle-track { position: relative; flex: none; width: 52px; height: 32px; border-radius: var(--pill); background: var(--surface-2); border: 1px solid var(--border); transition: background 0.15s, border-color 0.15s; }
.toggle-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--muted); transition: transform 0.15s, background 0.15s; }
.toggle > input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
.toggle > input:checked + .toggle-track::after { transform: translateX(20px); background: var(--accent-ink); }
.toggle > input:focus-visible + .toggle-track { outline: 3px solid var(--focus); outline-offset: 2px; }
.toggle-label { min-width: 0; line-height: 1.3; }
.toggle-hint { margin: 2px 0 0 64px; }

.check { display: flex; align-items: flex-start; gap: 10px; min-height: var(--tap); padding-top: 10px; font-weight: 400; cursor: pointer; }
.check > input { margin-top: 1px; }

/* radius slider + number box */
.range-row { display: flex; align-items: center; gap: 14px; }
/* The slider's label with its live number beside it, not inside it (front page; W3C: an <output> inside <label for>
   must be that label's control). */
.range-label { font-weight: var(--fw-strong); margin: 0 0 6px; }
.range-label output { font-variant-numeric: tabular-nums; }   /* "miles" stays put while the number changes */
.range-label label { display: inline; margin: 0; }
.range-number { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.range-number input[type="number"] { width: 5.2em; text-align: right; display: inline-block; }
.unit { color: var(--muted); }
input[type="range"] { flex: 1 1 auto; min-width: 0; width: 100%; height: var(--tap); margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
/* No ring round the whole slider when it is clicked, dragged or touched (the generic input:focus glow and
   input:focus-visible outline): keyboard focus shows on the thumb only, below. */
input[type="range"]:focus, input[type="range"]:focus-visible { outline: none; box-shadow: none; border-color: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--pill); background: var(--field-border); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--accent); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--pill); background: var(--field-border); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: var(--pill); background: var(--accent); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); }
/* Light theme: the amber thumb on a white card needs an edge for 3:1 (Fable critique, staging/searchtop). Before the
   focus rules, which have the same specificity and must win. */
[data-theme="light"] input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--accent-text); }
[data-theme="light"] input[type="range"]::-moz-range-thumb { box-shadow: 0 0 0 1px var(--accent-text); }
@media (prefers-color-scheme: light) { [data-theme="auto"] input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--accent-text); } }
@media (prefers-color-scheme: light) { [data-theme="auto"] input[type="range"]::-moz-range-thumb { box-shadow: 0 0 0 1px var(--accent-text); } }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--focus); }

/* ----- buttons ------------------------------------------------------------------------------------ */
.btn, button, input[type="submit"], input[type="button"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px; margin: 0;
  font: inherit; font-weight: var(--fw-strong); line-height: 1.2; text-align: center; text-decoration: none; white-space: normal;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: filter 0.15s, background 0.15s, border-color 0.15s, transform 0.05s;
  -webkit-appearance: none; appearance: none;
}
.btn:hover, button:hover { border-color: var(--muted); text-decoration: none; }
.btn:active, button:active { transform: translateY(1px); }
.btn-primary, button.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.07); border-color: var(--accent); }
.btn-secondary { background: var(--surface-2); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--accent-text); }
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; }
.btn-danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn-danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn-small { min-height: var(--tap); padding: 8px 14px; font-size: var(--fs-s); }
.btn-big { min-height: 58px; padding: 14px 24px; font-size: 1.12rem; }
.btn-block { display: flex; width: 100%; }
.btn:disabled, button:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; filter: none; transform: none; }
.btn-provider { width: 100%; gap: 12px; }
.btn-provider svg { width: 20px; height: 20px; flex: none; }
.btn-google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.btn-google:hover { border-color: #b5b9bf; }
.btn-apple { background: #000; color: #fff; border-color: #000; }
[data-theme="dark"] .btn-apple, [data-theme="auto"] .btn-apple { background: #fff; color: #000; border-color: #fff; }
@media (prefers-color-scheme: light) { [data-theme="auto"] .btn-apple { background: #000; color: #fff; border-color: #000; } }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }
.button-row:not(:last-child) { margin-bottom: var(--space-m); }
.inline-form { display: inline-block; margin: 0; }
.signin-options { display: grid; gap: 12px; margin: 0 0 20px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-s); margin: 20px 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
/* Sign in: "Sign in" | "Create account", native radios styled as tabs like the buy box's (arrow keys move between
   them). Each form is a later sibling of both radios, so the chosen one shows with CSS alone, no JavaScript and no
   :has(). Without CSS both forms show, which still works. */
.auth-tabs { position: relative; display: flex; flex-wrap: wrap; margin: 0 0 var(--space-m); }
.auth-tabs > .auth-tab-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.auth-tab { display: flex; align-items: center; min-height: 44px; padding: 10px 16px; margin: 0 0 8px; cursor: pointer; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; }
.auth-tab:hover { color: var(--text); }
.auth-tab-input:checked + .auth-tab { color: var(--text); border-bottom-color: var(--text); }
.auth-tab-input:focus-visible + .auth-tab { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.auth-panel { flex: 0 0 100%; min-width: 0; margin: 0; }
#auth-tab-signin:checked ~ .auth-panel-create, #auth-tab-create:checked ~ .auth-panel-signin { display: none; }
.auth-forgot { margin: 12px 0 4px; }
/* "Show" next to a password field (app.js, data-reveal): sits inside the field's right edge. */
.reveal-wrap { position: relative; display: block; }
.reveal-wrap > input { padding-right: 76px; }
.reveal-btn { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); min-height: 40px; }

/* ----- waiting: spinner and progress -------------------------------------------------------------- */
.waiting { text-align: center; padding: 32px 0; }
.spinner { /* a rolling tyre: amber tread blocks, light rim and hub */
  --spinner-bg: var(--bg);
  display: block; width: 68px; height: 68px; margin: 24px auto; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, var(--text) 0 6px, var(--spinner-bg) 7px 11px, var(--text) 12px 14px,
                    var(--spinner-bg) 15px 21px, transparent 22px),
    repeating-conic-gradient(var(--accent) 0deg 21deg, var(--spinner-bg) 21deg 30deg);
  animation: tk-roll 1.6s linear infinite;
}
.card .spinner, .car .spinner, .notice .spinner { --spinner-bg: var(--surface); }
.notice .spinner { --spinner-bg: var(--surface-2); }
.spinner-small {
  --spinner-bg: var(--bg);
  display: inline-block; width: 20px; height: 20px; margin: 0 6px 0 0; vertical-align: -4px; border-radius: 50%;
  animation: tk-roll 1.6s linear infinite;
  background:
    radial-gradient(circle closest-side, var(--text) 0 2px, var(--spinner-bg) 3px 5px, transparent 6px),
    repeating-conic-gradient(var(--accent) 0deg 30deg, var(--spinner-bg) 30deg 45deg);
}
@keyframes tk-roll { to { transform: rotate(360deg); } }
@keyframes tk-pulse { 50% { opacity: 0.45; } }

progress { display: block; width: 100%; height: 10px; margin: 10px 0; border: 0; border-radius: var(--pill); background: var(--surface-2); color: var(--accent); overflow: hidden; -webkit-appearance: none; appearance: none; }
progress::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--pill); }
progress::-webkit-progress-value { background: var(--accent); border-radius: var(--pill); }
progress::-moz-progress-bar { background: var(--accent); border-radius: var(--pill); }

.steps { list-style: none; padding: 0; margin: 0 0 16px; }
.steps li { position: relative; padding: 6px 0 6px 30px; color: var(--muted); margin: 0; text-wrap: balance; }
.steps li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); }
.steps li.done { color: var(--text); }
.steps li.done::before { content: "\2713"; border: 0; color: var(--good); font-weight: var(--fw-heading); top: 6px; left: 3px; width: auto; height: auto; }
.steps li.current { color: var(--text); font-weight: 600; }
.steps li.current::before { background: var(--accent); border-color: var(--accent); animation: tk-pulse 1.4s ease-in-out infinite; }

.status-big { font-family: var(--font-display); font-size: clamp(1.3rem, 4.8vw, 1.6rem); font-weight: 600; line-height: 1.2;
  letter-spacing: 0; margin: 0 0 12px; text-wrap: pretty; }
.status-running { margin-bottom: 14px; text-align: center; text-wrap: balance; }   /* the running headline sits centred over the hamster (owner 2026-10-24) */
.status-step { display: block; color: var(--muted); opacity: 0.88; }   /* "Reading your request": the quiet second line, Apple's two-tone */
.status-step::first-letter { text-transform: uppercase; }   /* "you're next" reads "You're next" on its own line */
.eta { color: var(--muted); }
.eyebrow { margin: 0 0 4px; color: var(--muted); font-size: var(--fs-s); font-weight: var(--fw-strong); }   /* "Your search" over its title */
/* Status page title = the search's one-sentence summary (owner 3 Nov 2026): a step under h1 and filling the line,
   so a long sentence reads in 2 lines on a PC (lined up with the card) instead of a narrow balanced block */
.search-title { font-size: clamp(1.25rem, 4.6vw, 1.55rem); line-height: 1.22; text-wrap: pretty; }
.hamster { display: block; margin: 8px 0 16px; }
.hamster img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; border-radius: 12px; }
/* The hamster pictures have their own #202124 background: framed like a card so they sit on both themes (design
   audit 14 Oct, V6). */
.hamster img, .error-hamster, .report-hamster, .report-header-hamster { background: #202124; border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.hamster-small img { max-width: 200px; border-radius: 16px; }

/* ----- details / summary -------------------------------------------------------------------------- */
details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 16px; margin: 0 0 12px; }
summary { display: flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; font-weight: var(--fw-strong); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-left: auto; color: var(--muted); font-weight: 400; font-size: 1.3rem; }
details[open] summary::after { content: "\2212"; }
details[open] { padding-bottom: 12px; }

/* ----- tables (admin, /me) ------------------------------------------------------------------------ */
.table-wrap { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 0 0 20px; }
.table-wrap > table { margin: 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
th, td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
th { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-strong); white-space: nowrap; background: var(--surface); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) td { background: var(--surface); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td .inline-form + .inline-form { margin-left: 6px; }
td .grant-mail { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding-top: 0; margin-left: 8px; vertical-align: middle; white-space: nowrap; }   /* /admin/users "Email them" */
td .btn-small { min-height: 36px; padding: 6px 12px; } /* dense admin tables; still easy to hit on a laptop */
@media (pointer: coarse) { td .btn-small { min-height: var(--tap); } }   /* ... but a finger needs 44 px */

.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.admin-nav a { display: inline-flex; flex: none; align-items: center; min-height: var(--tap); padding: 0 14px; border-radius: var(--pill); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: 600; white-space: nowrap; }
.admin-nav a:hover { border-color: var(--muted); }
.admin-nav a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* staging/adminmobile: the admin pages on a phone (the owner runs the site from an iPhone). Desktop is unchanged.
   Tables: every admin <td> carries data-label="<its column's header>" (data-label="" for a column of buttons;
   tests/test_adminmobile.py checks every admin page). Below 640 px a .table-wrap table turns into one card per row:
   each cell's label (td::before, muted) floats in the cell's left padding beside its value; .cell-wide puts the
   label above a long value (emails, summaries, errors) so it gets the card's full width; empty cells are left out;
   the button column has no label and big buttons. .table-plain keeps a small two-column table a table. Scoped to
   body.admin: report tables (also .table-wrap) are not touched. The section nav (6 links) is one sticky row that
   scrolls sideways (app.js brings the current link into view); the events filter is a sideways row too. */
body.admin .chip[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: var(--fw-strong); }
@media (max-width: 639px) {
  body.admin { --cell-label: 6.2rem; }
  body.admin .admin-nav, body.admin .chips-row {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  body.admin .admin-nav::-webkit-scrollbar, body.admin .chips-row::-webkit-scrollbar { display: none; }
  /* stuck under the top edge while a long page scrolls: 61 px, opaque so rows don't show through */
  body.admin .admin-nav { position: sticky; top: 0; z-index: 5; gap: 6px; margin-top: -12px; padding-block: 8px; background: var(--bg); border-bottom: 1px solid var(--border); }
  body.admin main * { scroll-margin-top: 76px; }   /* a #link or a focused field never lands under the nav */
  body.admin .chips-row { padding-bottom: 4px; margin-bottom: 16px; }
  body.admin .chips-row .chip { flex: none; white-space: nowrap; }
  body.admin .card { padding: 16px 14px; }
  body.admin dl.grid-2 { grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: 0 14px; }   /* label | value, not stacked */
  body.admin dl.grid-2 dt { margin: 0 0 0.6em; }
  body.admin form:not(.inline-form) > .btn { width: 100%; }

  body.admin .table-wrap:not(.table-plain) { overflow: visible; border: 0; border-radius: 0; }
  body.admin .table-wrap:not(.table-plain) > table, body.admin .table-wrap:not(.table-plain) tbody,
  body.admin .table-wrap:not(.table-plain) tr { display: block; }
  body.admin .table-wrap:not(.table-plain) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.admin .table-wrap:not(.table-plain) tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; margin: 0 0 12px; }
  body.admin .table-wrap:not(.table-plain) td {
    display: flow-root;   /* holds the floated label, so a 2-line label never runs into the next cell */
    padding: 4px 0 4px calc(var(--cell-label) + 12px); border: 0; background: none; text-align: left; white-space: normal;
  }
  body.admin .table-wrap:not(.table-plain) td::before {
    content: attr(data-label); float: left; width: var(--cell-label); margin-left: calc(-1 * (var(--cell-label) + 12px));
    color: var(--muted); font-family: var(--font); font-size: var(--fs-s); font-weight: 600; line-height: 1.65; overflow-wrap: break-word;
  }
  body.admin .table-wrap:not(.table-plain) td.cell-wide { padding: 6px 0; }
  body.admin .table-wrap:not(.table-plain) td.cell-wide::before { float: none; display: block; width: auto; margin: 0 0 2px; line-height: 1.4; }
  body.admin .table-wrap:not(.table-plain) td .badge { white-space: normal; border-radius: 12px; }   /* a long note in a badge wraps (a pill still looks a pill) */
  body.admin .table-wrap:not(.table-plain) td[data-label=""] { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 4px; }
  body.admin .table-wrap:not(.table-plain) td[data-label=""]::before { content: none; }
  body.admin .table-wrap:not(.table-plain) td[data-label=""] > .inline-form { flex: 1 1 auto; margin: 0; }
  body.admin .table-wrap:not(.table-plain) td[data-label=""] .btn { width: 100%; min-height: var(--tap); }
  body.admin .table-wrap:not(.table-plain) td .inline-form + .inline-form { margin-left: 0; }
  body.admin .table-wrap:not(.table-plain) td.cell-wide > .inline-form { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
  body.admin .table-wrap:not(.table-plain) td.cell-wide > .inline-form .btn { flex: 1 1 auto; min-height: var(--tap); }
  body.admin .table-wrap:not(.table-plain) td.cell-wide > .inline-form { flex-wrap: wrap; }
  body.admin .table-wrap:not(.table-plain) td.cell-wide > .inline-form > .grant-mail { flex: 1 1 100%; margin: 0; min-height: var(--tap); }   /* "Email them" on its own line under Give */
  body.admin .table-wrap:not(.table-plain) td:empty { display: none; }   /* last: beats the button cell's display: flex */
}
@media (max-width: 360px) {   /* the admin's header nav (New search · My searches · Admin) on one 320 px row */
  body.admin .site-nav-many { gap: 0; margin-inline: -7px; }
  body.admin .site-nav-many a { padding: 0 7px; }
}

/* staging/admin1031 (owner 2026-10-31: Friends "looks like it is all over the place", make the admin pages better on a
   PC and a phone).
   PC: cells wrap at spaces only (overflow-wrap: break-word). With the old "anywhere" every column's narrowest width
   was one letter, so the browser squeezed emails, notes and button labels ("Re/tr/y", "Em/ail/a pa/ss...") to a few
   letters a line while the number boxes kept theirs. A long address now holds its column open instead; .cell-break
   (errors, event details: long URLs) may still break anywhere and keeps 16rem. Buttons never wrap.
   Phones: .table-list = cards without labels (a muted .cell-meta line, e.g. "date · friend", then the text);
   .card-grid = cards whose number cells (td.num) sit three to a row, label above. */
body.admin td .btn, body.admin td select { white-space: nowrap; }
body.admin tbody > tr[hidden] { display: none !important; }   /* the Friends find box (app.js); beats the phone cards' display */
@media (min-width: 640px) {
  body.admin td { overflow-wrap: break-word; }
  body.admin td.cell-break { overflow-wrap: anywhere; min-width: 16rem; }
  body.admin td.cell-link { width: 1%; }
  /* an address is one long word: it may break anywhere rather than push the table wider than the page */
  body.admin td .addr, body.admin .friend-email, body.admin .event-email { overflow-wrap: anywhere; }
}
@media (min-width: 1024px) {   /* ... but no wide column shrinks to a sliver (Payments, Recent failures) */
  body.admin td.cell-wide:not(.cell-break) { min-width: 11rem; }
  body.admin td.cell-wide.cell-addr { min-width: 13rem; }
  body.admin .stats { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }   /* 8 or 9 tiles on one row */
  body.admin .card > p.small:not(.notice) { max-width: 80ch; }   /* help text: readable line length at 1200 px */
}
@media (min-width: 640px) {
  @media (hover: hover) { body.admin .table-wrap tbody tr:hover td { background: var(--surface-2); } }
  /* settings and code forms: a number box needn't be 1,000 px wide */
  body.admin .card .field input[type="number"], body.admin .card .field input[type="date"] { max-width: 14rem; }
  body.admin .card .field input[type="text"] { max-width: 36rem; }
  body.admin dl.grid-2 { grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr); column-gap: 32px; }
  body.admin .card div.grid-2 { grid-template-columns: repeat(2, minmax(0, 14rem)); column-gap: 24px; }   /* Make codes: the two numbers side by side */
}
body.admin td .muted.small { line-height: 1.45; }

/* /admin: jump past the long finished list (a sideways row on a phone, like .chips-row) */
.jump-links { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 24px; }
.jump-links a { display: inline-flex; flex: none; align-items: center; min-height: 34px; padding: 0 12px; border-radius: var(--pill); background: var(--surface-2); color: var(--text); font-size: 0.88rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.jump-links a:hover { background: var(--border); }
@media (pointer: coarse) { .jump-links a { min-height: var(--tap); } }

/* /admin/events: one dropdown filter */
.filter-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px; }
.filter-form label { margin: 0; }
.filter-form select { width: auto; min-width: 13rem; max-width: 100%; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
@media (pointer: coarse) { .filter-form select { min-height: var(--tap); } }
.events-table .event-email, .events-table .event-ip { display: block; }
.events-table .event-ip { color: var(--muted); }
.code-note { margin-top: 2px; }

/* /admin/users (Friends): who | last seen | numbers | give or take back */
.find-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.find-row input { flex: 1 1 16rem; max-width: 26rem; }
.friend-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.friend-email { font-weight: var(--fw-strong); }
.friend-line { margin-top: 2px; }
.warn-text { color: var(--accent-text); font-weight: var(--fw-strong); }
.friend-paused { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.friends tr.row-quiet .friend-email { color: var(--muted); }
.manage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.manage::after { content: ""; flex: 0 0 100%; order: 1; height: 0; margin-top: -6px; }   /* line 1: amount, kind, Give, Take back */
.give-form { display: contents; }   /* its fields share .manage's rows with More (one form: Take back posts it to /revoke) */
.manage .give-n { width: 4.2em; min-height: 36px; padding: 4px 8px; text-align: right; }
.manage .grant-mail { order: 2; margin: 0 auto 0 0; min-height: 36px; padding: 0; }   /* line 2: Email them ... More */
.manage > .inline-form, .manage > .muted { order: 3; }
.friend-more { order: 3; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 0; background: none; }
.friend-more > summary { justify-content: flex-end; gap: 4px; min-height: 36px; padding: 0 4px 0 10px; font-size: var(--fs-s); font-weight: 600; color: var(--accent-text); }
.friend-more > summary::after { content: "\25BE"; margin: 0; font-size: 0.85rem; color: inherit; }
.friend-more[open] { flex-basis: 100%; padding: 0; }
.friend-more[open] > summary::after { content: "\25B4"; }
.friend-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 2px 0 4px; }
.friends-gone > summary { font-weight: 600; }
/* Sort by (owner 2026-10-31): the report's .sort-links line; the sorted column's header gets an arrow */
body.admin th.sorted { color: var(--text); }
body.admin th.sorted::after { content: "\00a0\2193"; }
body.admin th.sorted.asc::after { content: "\00a0\2191"; }
.friend-sort { margin-bottom: 2px; }
.friend-sort .sort-on { font-weight: 700; color: var(--text); }
.sort-hint { margin: 0 0 12px; }
@media (pointer: coarse) { .friend-sort a, .friend-sort strong { display: inline-flex; align-items: center; min-height: var(--tap); } }
.friends .bought-what { white-space: normal; min-width: 5.5rem; }   /* "3 searches · 1 full check" may wrap */
.friends-gone .table-wrap { margin-top: 4px; }
@media (min-width: 640px) {
  body.admin .friends td.friend-manage { width: 24rem; }
  body.admin .friends .manage { min-width: 22.25rem; }   /* amount, kind, Give, Take back on one line, however long an address is */
  body.admin .friends td.cell-wide.friend-cell { min-width: 14rem; }
}
@media (pointer: coarse) { .manage .give-n, .manage select, .manage .btn, .manage .grant-mail, .friend-more > summary, .friend-paused .btn { min-height: var(--tap); } }
@media (pointer: coarse) { body.admin td.cell-link a { display: inline-flex; align-items: center; min-height: var(--tap); } }   /* Open report */

@media (max-width: 639px) {
  body.admin .table-wrap.table-list:not(.table-plain) tr { padding: 10px 14px; }
  body.admin .table-wrap.table-list:not(.table-plain) td { padding: 2px 0; }
  body.admin .table-wrap.table-list:not(.table-plain) td::before { content: none; }
  body.admin .table-wrap.table-list:not(.table-plain) td.cell-meta { display: inline-block; margin: 0 10px 2px 0; color: var(--muted); font-size: var(--fs-s); vertical-align: middle; }
  body.admin .table-wrap.table-list:not(.table-plain) td.cell-link { padding-top: 4px; }

  body.admin .table-wrap.card-grid:not(.table-plain) tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
  body.admin .table-wrap.card-grid:not(.table-plain) td { grid-column: 1 / -1; }
  body.admin .table-wrap.card-grid:not(.table-plain) td.num { grid-column: auto; padding: 6px 0; font-size: 1.05rem; font-weight: var(--fw-strong); }
  body.admin .table-wrap.card-grid:not(.table-plain) td.num::before { float: none; display: block; width: auto; margin: 0; line-height: 1.3; }
  body.admin .table-wrap.card-grid:not(.table-plain) td.num .muted { font-size: var(--fs-s); font-weight: 400; }

  body.admin .friends td.friend-cell::before, body.admin .friends td.friend-manage::before { content: none; }
  body.admin .friends td.friend-cell { padding: 4px 0 8px; }
  body.admin .friends td.friend-cell .friend-email { font-size: 1.05rem; }
  body.admin .friends td[data-label="Last seen"] { padding-bottom: 8px; border-bottom: 1px solid var(--border); }   /* one line above the numbers */
  body.admin .table-wrap.friends.card-grid:not(.table-plain) tr { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 8px; }   /* searches, left, codes, bought */
  body.admin .friends .bought-what { min-width: 0; }
  body.admin .friends td.friend-manage { padding: 10px 0 2px; border-top: 1px solid var(--border); }
  /* line 1: amount, kind, Give (wide); line 2: Email them ... Take back, More */
  body.admin form.give-form > .btn { width: auto; }   /* not the phone rule above that widens a form's own button */
  body.admin .friends .manage .give-btn { flex: 1 1 auto; }
  body.admin .friends .manage .take-btn { order: 3; }
  body.admin .friends .friend-more { order: 4; margin-left: 0; }
  body.admin .friends .friend-more[open] { margin-left: auto; }
  body.admin .friends .friend-more > summary { padding-left: 14px; }
  body.admin .friends-gone { padding: 0 12px; }
  .find-row input { max-width: none; }
  body.admin .codes-usage td.code-cell::before { content: none; }
  body.admin .codes-usage td.code-cell .code { font-size: 1.05rem; }
  body.admin .table-wrap.codes-usage td[data-label=""] { justify-content: flex-end; }
  body.admin .table-wrap.codes-usage td[data-label=""] > .inline-form { flex: none; }
  body.admin .table-wrap.codes-usage td[data-label=""] .btn { width: auto; }
  body.admin .events-table .event-ip { font-size: 0.78rem; }
  body.admin form.filter-form > .btn { width: auto; }
  body.admin .filter-form select { flex: 1 1 10rem; min-width: 0; }
}
@media (max-width: 360px) { body.admin .friends .friend-more { margin-left: auto; } }   /* More on a line of its own: still at the right */

/* search codes */
.code { font-family: var(--mono); font-weight: var(--fw-strong); letter-spacing: 0.06em; white-space: nowrap; }
.code-list { list-style: none; padding: 0; margin: 0 0 16px; }
.code-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 8px 8px 16px; margin: 0 0 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.code-list .code { font-size: 1.1rem; }
textarea.codes-plain { font-family: var(--mono); min-height: 120px; }
.copy-btn[data-copied] { color: var(--good); }

/* /me job list */
.job-list { list-style: none; padding: 0; margin: 0 0 20px; }
.job-list > li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin: 0 0 10px; }
.job-title { font-size: 1.05rem; font-weight: 600; line-height: 1.3; margin: 0 0 4px; text-wrap: balance; }
.job-meta { color: var(--muted); font-size: var(--fs-s); margin: 0 0 8px; }

/* ----- reports ------------------------------------------------------------------------------------ */
.report-header { margin: 0 0 20px; }
.report-meta { color: var(--muted); font-size: var(--fs-s); }
.cars { display: grid; gap: 20px; margin: 0 0 28px; }
.car { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; overflow-wrap: anywhere; box-shadow: var(--card-shadow); }
.car-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.car-body { padding: 16px 18px 18px; }
.car-body > :last-child { margin-bottom: 0; }
.car-rank { color: var(--muted); font-size: var(--fs-s); font-weight: var(--fw-strong); margin: 0 0 2px; }
.car-title { font-size: 1.15rem; font-weight: var(--fw-strong); line-height: 1.3; margin: 0 0 6px; text-wrap: balance; }
.car-price { font-size: 1.55rem; font-weight: var(--fw-heading); line-height: 1.1; margin: 0 0 4px; font-family: var(--font-display); letter-spacing: -0.01em; }
/* /confirm: what the search will look for, as calm tags (not buttons) */
.facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 var(--space-m); }
.facts li { margin: 0; padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-s); line-height: 1.3; }
/* staging/probes: the count of matching car ads under /confirm's tags, and its one-tap changes when there are few */
.count-line { margin: 0 0 var(--space-m); }
.count-warning .count-lead { font-weight: var(--fw-strong); margin: 8px 0; }
.count-chips:not(:last-child) { margin-bottom: 0; }
/* the big button straight under what we understood (owner 2026-10-25), its two small lines under it */
.confirm-go { margin: 0 0 20px; }
.confirm-go > p { margin: 10px 0 0; }
.confirm-more { margin-top: 20px; }
.confirm-more > .btn { margin-top: 16px; }
.car-facts { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 8px 0 12px; color: var(--text); font-size: var(--fs-xs); }
.car-facts li { margin: 0; padding: 2px 9px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); font-weight: var(--fw-text); line-height: 1.5; }
.verdict { display: inline-block; padding: 2px 10px; border-radius: var(--pill); font-size: var(--fs-xs); font-weight: var(--fw-strong); letter-spacing: 0; vertical-align: middle; }
.verdict-great { background: var(--good); color: var(--good-ink); }
.verdict-good { border: 1px solid var(--good); color: var(--good); }
/* readability critique 2026-10-27: the price sentence lighter and a little smaller than the body, its colour kept */
.value-note { font-size: var(--fs-s); font-weight: var(--fw-text); line-height: 1.45; text-wrap: pretty; }
.value-under { color: var(--good); }
.value-over { color: var(--bad); }
.mot { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 14px; margin: 12px 0; }
.mot-status { font-weight: var(--fw-strong); margin: 0 0 4px; }
.mot > :last-child { margin-bottom: 0; }
.flags { list-style: none; padding: 0; margin: 8px 0 0; }
.flags li { padding-left: 1.4em; position: relative; }
.flags li::before { content: "!"; position: absolute; left: 0.3em; color: var(--accent-text); font-weight: var(--fw-heading); }
.why { margin: 12px 0; }
/* "Why it's good" as separate points (staging/tidy): a tick in the good colour, like the !-list of MOT flags. */
.why-list { list-style: none; padding: 0; }
.why-list li { padding-left: 1.4em; position: relative; margin: 0 0 4px; }
.why-list li:last-child { margin-bottom: 0; }
.why-list li::before { content: "\2713"; position: absolute; left: 0.2em; color: var(--good); font-weight: var(--fw-heading); }
.matrix { width: 100%; font-size: var(--fs-s); margin: 12px 0; }
.matrix td { padding: 6px 8px; }
.matrix tbody tr:nth-child(even) td { background: transparent; }
.yes { color: var(--good); font-weight: var(--fw-strong); }
.no { color: var(--bad); font-weight: var(--fw-strong); }
.unknown { color: var(--muted); }
.yes::before { content: "\2713\00a0"; }
.no::before { content: "\2717\00a0"; }
.unknown::before { content: "?\00a0"; }
.car-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.thumbs button { min-width: var(--tap); }
.thumbs input[type="text"] { flex: 1 1 180px; min-height: var(--tap); }
.report-footer h2 { margin-top: 1.2em; }

/* ----- error page --------------------------------------------------------------------------------- */
.error-page { text-align: center; }
.error-box { padding: 28px 0 8px; }
.error-code { font-size: clamp(3.2rem, 20vw, 5.5rem); font-weight: var(--fw-heading); line-height: 1; letter-spacing: -0.04em; color: var(--accent); margin: 0 0 12px; font-family: var(--font-display); }
[data-theme="light"] .error-code { color: var(--accent-text); }
@media (prefers-color-scheme: light) { [data-theme="auto"] .error-code { color: var(--accent-text); } }
.error-hamster { display: block; width: 100%; max-width: 320px; height: auto; border-radius: 16px; margin: 0 auto 20px; }
.report-hamster { display: block; width: 100%; max-width: 220px; height: auto; border-radius: 16px; margin: 0 0 16px; }
.report-header-hamster { float: right; width: 140px; height: auto; border-radius: 16px; margin: 0 0 12px 16px; }
@media (max-width: 480px) { .report-header-hamster { width: 96px; margin-left: 12px; } }
.report-header::after { content: ""; display: block; clear: both; }
.error-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; justify-content: center; margin: 4px 0 var(--space-m); }
.error-actions .btn { min-height: 48px; padding: 10px 20px; font-size: 1rem; }

/* ----- JavaScript-only bits ----------------------------------------------------------------------- */
html:not(.js) .js-only { display: none !important; }
html.js .no-js-only { display: none !important; }

/* ----- wider screens ------------------------------------------------------------------------------ */
@media (min-width: 640px) {
  main.wrap { padding-top: 28px; }
  .car-body { padding: 20px 24px 22px; }
}

/* ----- motion ------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .spinner, .spinner-small { animation: tk-pulse 2s ease-in-out infinite; }
  .steps li.current::before { animation: none; }
}

/* ----- print (reports): light, no buttons or forms ------------------------------------------------ */
@media print {
  :root, [data-theme="dark"], [data-theme="light"], [data-theme="auto"] {
    --bg: #fff; --surface: #fff; --surface-2: #f2f2f2; --text: #000; --muted: #444; --border: #bbb; --field-border: #bbb;
    --accent-text: #000; --good: #1e7a34; --bad: #b00020; --good-ink: #fff;
    color-scheme: light;
  }
  html { font-size: 11pt; }
  body { background: #fff; color: #000; display: block; }
  .site-nav, .site-footer, .banner, .skip-link, .btn, button, form, .thumbs, .no-print, .js-only { display: none !important; }
  .site-header { border: 0; background: none; --bg: #fff; --text: #000; }
  .wrap, main.wide, main.full { max-width: none; padding: 0; }
  .card, .car, details, .mot { box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
  .car { border: 1px solid #bbb; margin-bottom: 12pt; }
  .car-photo { max-height: 6.5cm; }
  .cars { display: block; }
  a { color: #000; }
  .car a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  details > *:not(summary) { display: block; }
  h1, h2, h3 { break-after: avoid; }
}

/* reports ------------------------------------------------------------------------------------------
   Report page additions (tk/templates/report.html). Base report classes (.cars .car .car-photo .mot .matrix
   .thumbs ...) and the print stylesheet live above; this section only adds what the template needs on top. */
ol.cars { list-style: none; padding: 0; }
.cars > li + li { margin-top: 0; }
.report-kicker { color: var(--accent-text); font-size: var(--fs-s); font-weight: var(--fw-strong); margin: 0 0 6px; }
.report-summary { margin: 0 0 10px; text-wrap: balance; }      /* critique round 2 (fast1029): no town alone on line 2 */
/* staging/fast1029 (design critique round 1): the title is the friend's confirmed sentence, so balanced lines (no word
   alone on the last one); one over tk.reports.TITLE_LONG characters (up to 120) a step smaller, never above 1.6rem:
   two lines at the desktop's 760 px, about 5 beside the phone's hamster, and "pretty" (balance fights the float) */
.report-header h1 { text-wrap: balance; }
.report-header h1.report-title-long { font-size: clamp(1.35rem, 4.4vw, 1.6rem); line-height: 1.25; text-wrap: pretty; }
.pre-line { white-space: pre-line; }
.job-meta .dot-sep::before { content: "\00b7"; margin: 0 0.45em; }
.report-meta > span { display: inline-block; }
.report-meta > span:not(:last-child)::after { content: "\00b7"; content: "\00b7" / ""; margin: 0 0.45em; }
/* no place first (the summary says the town and the miles: readability critique 2026-10-27): no dot before the first item */
.report-fb-note { border-left-color: var(--muted); }
/* flex + gap: a chip that wraps to its own line starts at the left edge, not a few px in. */
/* readability critique 2026-10-27: the town and distance in the text colour, the advert's age after it quieter
   (muted, no pill): how far away matters more than when it was listed */
.car-where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text); font-size: var(--fs-s); margin: -6px 0 12px; }
.car-added { display: inline-block; margin-left: 0; color: var(--muted); font-weight: 400; }
/* staging/fast1029: a Facebook car's seller line under the place, quiet like the advert's age; like the claims line, a
   part never breaks inside and no line starts with a dot; the label (who sells it) in the text colour, like the town */
.car-seller { color: var(--muted); font-size: var(--fs-s); margin: -8px 0 12px; }
.car-seller .seller-label { color: var(--text); }
.car-seller .seller-part { white-space: nowrap; }
.car-seller .seller-part:not(:last-child)::after { content: "\00b7"; content: "\00b7" / ""; margin: 0 0.2em 0 0.45em;
  color: var(--muted); }
.car-rank { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.car .why h3, .car h3 { font-size: var(--fs-s); font-weight: var(--fw-strong); line-height: 1.3; margin: 20px 0 8px; padding-left: 9px; border-left: 3px solid var(--accent); }
.car-body > .why { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.car-body > .why > h3:first-child { margin-top: 2px; }
.check-list, .checklist { padding-left: 1.2em; }
/* readability critique 2026-10-27: a car's "What to check" marked like the MOT flags (an amber !), not the browser's
   hollow circles, so the checks look as weighty as the ticks of "Why it's good" (the front page's list is untouched) */
.car .check-list { list-style: none; padding-left: 0; }
.car .check-list li { position: relative; padding-left: 1.4em; margin: 0 0 4px; }
.car .check-list li:last-child { margin-bottom: 0; }
.car .check-list li::before { content: "!"; content: "!" / ""; position: absolute; left: 0.3em; color: var(--accent-text); font-weight: var(--fw-heading); }
.matrix-wrap { margin: 8px 0 12px; }
.matrix th { background: var(--surface-2); }
.matrix td:last-child { white-space: nowrap; }
.matrix-note { display: block; color: var(--muted); font-size: var(--fs-s); margin-top: 2px; }
/* Narrow phones (320 px): headers may wrap ("WHAT YOU DON'T WANT" must not push the answer column out of
   the box), the answer column keeps a fixed share, and its words never split ("Doesn't", not "Doe/sn't"). */
.matrix th { white-space: normal; }
/* readability critique 2026-10-27: "THIS CAR" on one line where there is room; "Nice to have" folded when the car has
   them all (report.html phrase_table), its tick after the link */
@media (min-width: 421px) { .matrix th:last-child { white-space: nowrap; } }
.mini-fold.matrix-fold { margin: 12px 0 4px; }        /* beats .mini-fold's margin further down */
.matrix-fold > summary .matrix-fold-yes { margin-left: 0.5em; min-width: 0; }
/* readability critique round 1, 2026-10-27: its summary is the section's heading (the card's h3, in the text colour,
   not a link's amber), then what the car has in the good colour (min-width: 0 above: a long one wraps beside the
   heading); the +/- stays */
.mini-fold.matrix-fold > summary { color: var(--text); }
.matrix-fold > summary h3 { flex: none; margin: 0; }
.matrix-fold .matrix-wrap { margin-top: 0; }
/* readability critique round 2, 2026-10-27: what the car has in the text colour after a green tick (in the good colour
   and bold it outshouted its own heading), and on phones on its own line under the heading, where a narrow column
   beside it ran to two or three lines; the +/- stays on the heading's line */
.matrix-fold > summary .matrix-fold-yes { color: var(--text); font-weight: 400; }
.matrix-fold > summary .matrix-fold-yes::before { color: var(--good); font-weight: 700; }
@media (max-width: 479px) {
  .mini-fold.matrix-fold > summary { flex-wrap: wrap; row-gap: 2px; }
  .matrix-fold > summary::after { order: 2; }
  .matrix-fold > summary .matrix-fold-yes { order: 3; flex: 1 0 100%; margin: 0; padding-left: 12px; }
}
@media (max-width: 420px) {
  .matrix { table-layout: fixed; }
  .matrix th:last-child, .matrix td:last-child { width: 38%; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; }
}
.advert-link { flex: 1 1 auto; }
.vote-thanks { margin: 12px 0 0; }
.thumbs { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.thumbs form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.thumbs-down { flex: 0 1 auto; }
.vote-thanks > p { margin: 0; }
.vote-why { display: grid; gap: 6px; margin: 8px 0 0; }
.vote-why-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vote-why-row input[type="text"] { flex: 1 1 180px; min-height: var(--tap); }
.thumbs .btn { gap: 6px; }
.thumb-icon { width: 18px; height: 18px; fill: currentColor; flex: none; }
.thumb-down { transform: rotate(180deg); }
.check-yourself { margin-top: 24px; }
.report-stats { margin-top: 16px; }
.report-made-by { color: var(--muted); }
/* UX review 2026-10-13 (report.html): the share row under the title; a long report's summary table (its photo,
   mileage and distance columns only from 640 px, the car cell says the numbers below that, so nothing scrolls
   sideways at 320 px; the photos are lazy, so a phone never downloads them) and sort links (every card is
   open); the owner's "Search again" card; the generic lists folded with a one-line summary; and from 1000 px a wider page with each card's photos beside its text, the reading text kept
   to 760 px. */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.share-label { color: var(--muted); font-size: var(--fs-s); font-weight: var(--fw-strong); margin-right: 4px; }
.report-index { margin: 0 0 24px; }
.report-index h2 { font-size: 1.15rem; margin: 0 0 4px; }
.report-order { color: var(--muted); font-size: var(--fs-s); margin: 0 0 2px; }
.sort-links { font-size: var(--fs-s); margin: 0 0 10px; }
.sort-links .dot-sep::before { content: "\00b7"; margin: 0 0.45em; color: var(--muted); }
.index-table { table-layout: fixed; }
.index-table th, .index-table td { padding: 8px 10px; vertical-align: middle; }
/* readability critique 2026-10-27: the row's figures level with the car's name and the price bold (what people
   compare here); the names in the text colour, still underlined, the underline in the accent */
.index-table td { vertical-align: top; }
.index-table td.index-price { font-weight: var(--fw-heading); font-family: var(--font-display); }
.index-table td.index-photo img { display: block; width: 88px; height: 66px; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.index-table th.num { width: 92px; }
.index-car a { font-weight: var(--fw-strong); color: var(--text); text-decoration-color: var(--accent-text); }
.index-car { text-wrap: pretty; }   /* no "5dr" alone on its line (type pass 2026-10-31) */
.index-narrow, .index-why, .index-added { display: block; color: var(--muted); font-size: var(--fs-s); margin-top: 2px; }
/* owner 2026-10-31: when the advert was posted, the row's last line (its own line, so the 2-line cut of
   .index-why never hides it) */
.index-why { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.index-table .index-wide, .index-table .index-photo { display: none; }
@media (max-width: 479px) { .share-label { flex: 1 0 100%; } }
.sort-links a, .sort-links strong { white-space: nowrap; }
@media (min-width: 640px) {
  .index-table .index-wide, .index-table .index-photo { display: table-cell; }
  .index-table th.index-wide { width: 116px; }
  .index-narrow { display: none; }
  .index-table .index-photo { width: 100px; padding-right: 0; }
}
/* Owner 2026-10-25 ("something like in League of Legends, Play next game, easy and simple to click"): the owner's
   next search as one big amber button in a centred card (also on a wide screen, where the column is 760 px), a soft
   amber glow behind it; the one-tap reruns under an "or" rule, smaller and quiet. The same block (rerun_block) ends
   the empty report's card, centred there too under a hairline. No motion beyond the arrow's nudge on hover. */
.report-rerun { margin: 0 0 28px; text-align: center; padding-top: 24px;
  background: radial-gradient(ellipse 420px 190px at 50% 0, var(--glow), transparent 75%) no-repeat, var(--surface); }
.rerun-title { font-family: var(--font-display); font-size: clamp(1.25rem, 5vw, 1.5rem); font-weight: 700; letter-spacing: 0; margin: 0 0 16px; text-wrap: balance; }
.rerun-play, .rerun-more { text-align: center; }
.rerun-more .button-row { justify-content: center; }
.btn-play { width: 100%; min-height: 64px; padding: 14px 28px; gap: 10px; border-radius: var(--radius);
  font-size: 1.3rem; font-weight: var(--fw-strong); letter-spacing: -0.01em;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14), 0 6px 20px rgba(245, 179, 1, 0.22); }
.btn-play:active { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 3px 10px rgba(245, 179, 1, 0.2); }
.btn-play-arrow { width: 22px; height: 22px; flex: none; transition: transform 0.15s; }
.btn-play:hover .btn-play-arrow, .btn-play:focus-visible .btn-play-arrow { transform: translateX(3px); }
@media (min-width: 560px) { .btn-play { width: auto; min-width: 20rem; padding-inline: 44px; } }
/* light: the amber on white needs an edge for 3:1 (#b07800 is 3.8:1 on white); a fainter glow and shadow, so the
   white card looks lit, not stained (Fable) */
[data-theme="light"] .report-rerun { background: radial-gradient(ellipse 420px 190px at 50% 0, rgba(245, 179, 1, 0.07), transparent 75%) no-repeat, var(--surface); }
@media (prefers-color-scheme: light) { [data-theme="auto"] .report-rerun { background: radial-gradient(ellipse 420px 190px at 50% 0, rgba(245, 179, 1, 0.07), transparent 75%) no-repeat, var(--surface); } }
[data-theme="light"] .btn-play { border-color: #b07800; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14), 0 4px 12px rgba(176, 120, 0, 0.16); }
@media (prefers-color-scheme: light) { [data-theme="auto"] .btn-play { border-color: #b07800; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14), 0 4px 12px rgba(176, 120, 0, 0.16); } }
[data-theme="light"] .btn-play:active { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 2px 6px rgba(176, 120, 0, 0.14); }
@media (prefers-color-scheme: light) { [data-theme="auto"] .btn-play:active { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 2px 6px rgba(176, 120, 0, 0.14); } }
.rerun-edit-note { color: var(--muted); font-size: var(--fs-s); margin: 8px 0 0; text-wrap: balance; }
.rerun-more { margin-top: 16px; }
.rerun-or { margin: 0 0 10px; }
.rerun-lead { color: var(--muted); font-size: var(--fs-s); font-weight: var(--fw-strong); margin: 14px 0 8px; text-wrap: balance; }
.rerun-or + .rerun-lead { margin-top: 0; }
.rerun-more .btn { min-height: var(--tap); padding: 8px 14px; font-size: var(--fs-s); }
.rerun-more .btn, .rerun-more .hint { text-wrap: balance; }     /* no one-word orphans in wrapped labels and hints */
/* phones: the one-tap reruns as one tidy column of equal widths, not a ragged centred stack */
@media (max-width: 559px) {
  .rerun-more .button-row { flex-direction: column; align-items: stretch; gap: var(--space-xs); }
  .rerun-more .inline-form, .rerun-more .inline-form .btn { display: flex; width: 100%; }
}
.rerun-changes { margin-bottom: 12px; }
.rerun-more .hint { margin: 6px 0 14px; }
.rerun-more > .hint:last-child, .card > .button-row + .hint { margin: 12px 0 0; }
.report-empty .rerun-play { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.report-empty .rerun-more { margin-top: 12px; }
.report-footer .report-fold { margin: 16px 0 0; }
.report-fold > summary { flex-wrap: wrap; row-gap: 0; padding: 8px 0; }
.report-footer .report-fold > summary h2 { flex: 1 1 auto; margin: 0; }
.report-fold > summary::after { order: 2; }
.report-fold .fold-sub { order: 3; flex: 1 0 100%; color: var(--muted); font-size: var(--fs-s); font-weight: 400; }
@media (min-width: 1000px) {
  body.report main.wide, body.report .footer-inner { max-width: calc(1040px + 2 * var(--gutter)); }
  body.report main.wide > :not(.cars):not(.report-index):not(.report-header),
  .report-header > :not(.report-header-hamster) { max-width: 760px; }
  body.report main.wide > .report-rerun { margin-left: auto; margin-right: auto; }
  .car-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .car { overflow: clip; }                  /* not a scroll box (hidden would be), so the photos can stick */
  .car-media { position: sticky; top: 12px; }
}
@media print {
  .share-row, .sort-links, .report-rerun, .rerun-play, .rerun-more { display: none !important; }
  .index-table .index-photo { display: none !important; }
}
@media print {
  .car-actions .btn.advert-link { display: inline !important; min-height: 0; padding: 0; border: 0; background: none; color: #000; font-weight: 400; }
  .vote-thanks, .report-made-by { display: none !important; }
  .car-added { background: none; padding: 0; }
  .car-photo { width: auto; max-width: 100%; }
}

/* SPEC-phase2 additions ----------------------------------------------------------------------------
   Reports (P2.1): extra photos, plate, price guidance, train-town badge, notes; ideas box (P2.5); admin. */
.car-thumbs { display: flex; gap: 6px; list-style: none; padding: 6px 6px 0; margin: 0; }
.car-thumbs li { flex: 1 1 0; min-width: 0; margin: 0; }
.car-thumbs a { display: block; border-radius: 8px; overflow: hidden; }
.car-thumbs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
/* readability critique 2026-10-27: smaller thumbnails on phones, so the price comes up sooner (still well over a
   tap's size; the viewer shows every photo big) */
@media (max-width: 639px) { .car-thumbs li { flex: 0 0 76px; } }
.train-badge { display: inline-block; margin-left: 0; padding: 2px 10px; border-radius: var(--pill); border: 1px solid var(--accent); color: var(--accent-text); background: var(--accent-soft); font-size: var(--fs-xs); font-weight: var(--fw-strong); vertical-align: middle; white-space: normal; }
/* readability critique round 1, 2026-10-27 (phone critic fix 3): the price lines go with the price, not the facts
   row: as heavy as the sentence over them, close under it, the gap below them; "How we worked out the price"
   (the drawer) stays with them too */
.price-guidance { font-size: var(--fs-s); font-weight: var(--fw-text); margin: 0 0 14px; font-variant-numeric: tabular-nums; }
.value-note:has(+ .price-guidance) { margin-bottom: 6px; }
.value-note:has(+ .price-drawer) { margin-bottom: 4px; }
.price-guidance:has(+ .price-drawer) { margin-bottom: 4px; }
.price-guidance + .price-drawer { margin-bottom: 14px; }
/* readability critique 2026-10-27: one part a line; round 2: a wrapped part indented under itself, like the MOT
   summary's lines, so its second half never reads as another line */
.price-line { display: block; padding-left: 0.9em; text-indent: -0.9em; text-wrap: pretty; }
.car-notes { list-style: none; padding: 0; margin: -4px 0 12px; font-size: var(--fs-s); }
.car-notes li { margin: 0 0 4px; }
.car-notes .also-on { color: var(--muted); }
.car-notes .second-check { color: var(--accent-text); font-weight: 600; }
.mot-advisories-title { font-weight: var(--fw-strong); margin: 10px 0 4px; }
.mot-advisories { padding-left: 1.2em; margin: 0; }
/* readability critique 2026-10-27: under the repair costs, which price the same jobs, the tester's words smaller and
   muted (5.6:1 light, 6:1 dark on the box); the DVSA reference small and whole, never split over two lines */
.mot-advisories-title.mot-priced { font-size: var(--fs-s); color: var(--muted); }
.mot-advisories.mot-priced { font-size: var(--fs-s); line-height: 1.45; color: var(--muted); }
/* readability critique round 1, 2026-10-27: the older MOTs' lines (report.html car.mot.past) take the same small muted
   style, after the latest test's; "And more in the MOT history" is no item, so no bullet */
.mot-past .mot-more { list-style: none; }
/* round 2: a hairline where the latest test's list ends and the older MOTs' lines start (the same muted style ran them
   together), as under the repair costs */
.mot-advisories:not(.mot-past) + .mot-past-title { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  border-top-color: color-mix(in srgb, var(--muted) 35%, transparent); }
/* ... and the summary one sentence a line, a wrapped line indented under its sentence and a small gap between
   sentences (desktop critic fix 7), so a wrap never reads as a new sentence */
.mot-line { display: block; padding-left: 0.9em; text-indent: -0.9em; text-wrap: pretty; }
.mot-line + .mot-line { margin-top: 3px; }
.mot-code { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
/* owner 2026-10-27: the repair costs first in the MOT box, the price big (_macros.repair_costs) */
.mot-repairs { margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--border);
  border-bottom-color: color-mix(in srgb, var(--muted) 35%, transparent); }
.mot-repairs-title { font-weight: var(--fw-strong); font-size: var(--fs-s); margin: 0; text-wrap: balance; }
.mot-repairs-total { margin: 2px 0 6px; font-size: 1.5rem; font-weight: var(--fw-heading); line-height: 1.2; font-family: var(--font-display); letter-spacing: -0.01em; }
.mot-range { white-space: nowrap; }
.mot-costs { list-style: none; padding: 0; margin: 0; max-width: 22rem; }
.mot-costs li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; line-height: 1.35; }
.mot-job { text-wrap: balance; }
.mot-cost { font-weight: var(--fw-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mot-costs-note { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-s); text-wrap: balance; }
.plate-line { font-size: var(--fs-s); margin: 0 0 12px; }
.plate { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 4px; background: #f7d117; color: #111; font-family: var(--font-display); font-weight: var(--fw-heading); letter-spacing: 0.04em; white-space: nowrap; word-spacing: 0.15em; font-variant-numeric: tabular-nums; }
.report-train { color: var(--muted); font-size: var(--fs-s); }
.report-wider { font-size: var(--fs-s); margin-top: 4px; }
.why-none { padding-left: 1.2em; margin: 0 0 4px; }
.why-none li { margin: 0 0 6px; }
.ogl { margin-top: 4px; }
.suggestion-list { list-style: none; padding: 0; margin: 0 0 20px; }
.suggestion-done { opacity: 0.75; }
.fb-blocked { margin-bottom: 12px; }
@media print {
  .car-thumbs { display: none !important; }
  .plate { background: none; border: 1px solid #000; }
}
/* Front page: the postcode hint sits right under the postcode (not just above the radius label, which made it
   read as part of that field); /confirm: the budget line under From/Up to. "No code yet?" keeps clear of the Go
   button. */
.grid-2 + .hint { margin: -12px 0 20px; }
.search-form > .btn-big + .hint { margin-top: 12px; }
/* Owner 2026-10-23: the search's box at the top of the front page. Its label is the h1 (as big as the old tagline),
   one muted line under it, the offer, then the card; what used to be the hero is in the "About us" fold. */
.ask-title { font-size: clamp(1.6rem, 7vw, 2.3rem); line-height: 1.1; letter-spacing: -0.005em; margin: 8px 0 10px; text-wrap: balance; }
.ask-title label { display: inline; font: inherit; letter-spacing: inherit; margin: 0; }
.ask-lead { margin: 0 0 14px; }
.hero-ask .kick-teaser { margin: -6px 0 14px; color: var(--muted); }     /* quiet: for those with an advert already */
.hero-ask .kick-teaser a { color: inherit; }
.hero-ask .kick-teaser a:hover, .hero-ask .kick-teaser a:focus-visible { color: var(--text); }
@media (min-width: 640px) {       /* wide screens: the question, its line and the offer centred over the box */
  .hero-ask { text-align: center; }
  .hero-ask .offer { justify-content: center; }
}
/* The box straight under the card's yellow edge; the hint under it, the counter on its right once there is text
   (Fable critique 1). */
.prompt-box { display: flow-root; }
.prompt-box .char-count { float: right; margin: 6px 0 0 12px; }
.prompt-box .prompt-hint { margin: 6px 0 0; }
.prompt-box textarea:placeholder-shown + .char-count { display: none; }
.about-lead { margin: 0 0 14px; }
.about-lead strong { color: var(--text); }
/* Front page: how it works / what we check / questions (below the form), each a closed <details> with its h2 in
   the <summary> (owner 2026-10-11), styled like "Delete my account" on My searches. */
.about-folds { margin-top: 32px; }
.about { margin: 0; }
.fold { margin: 0 0 var(--space-s); }
.fold > summary { padding: 4px 0; }
.fold > summary h2 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: 0; text-wrap: balance; }
.fold[open] > summary { margin-bottom: var(--space-xs); }
.about-steps li, .about .check-list li { margin: 0 0 10px; }
/* Front page: three example chips right under the box (links to /?ex=N), then the rest folded under "More example
   searches" */
.quick-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 12px; }
.quick-examples .hint { margin: 0; }
.quick-examples .chip { min-height: 36px; padding: 4px 12px; }
@media (pointer: coarse) { .quick-examples .chip { min-height: var(--tap); } }
.examples { margin: 0 0 20px; }
.examples .hint { margin: 0 0 var(--space-xs); }
.kept-note { margin: 0 0 var(--space-s); }
/* My searches: "Sign out", then the "Delete my account" box under it */
.account-actions { margin: 0 0 var(--space-m); }
/* My searches (owner review 2026-10-13): under the searches, one strip "N searches available" with "Add a code" and
   "Buy more" folded beside it (an open one takes a row of its own), then "Your account" in a fold. */
.credit-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-l); }
.credit-strip .credit-count { flex: 1 1 auto; margin: 0; font-size: 1.1rem; font-weight: var(--fw-heading); letter-spacing: 0; text-wrap: balance; }
.credit-strip .credit-lead { display: inline-block; max-width: 100%; }   /* the only break: after the colon */
.credit-strip .stat-value { display: inline; font-size: inherit; font-weight: inherit; }
.credit-strip .credit-from { flex: 1 1 100%; order: 9; margin: var(--space-xs) 0 0; }
.strip-fold { flex: 0 0 auto; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.strip-fold > summary { color: var(--accent-text); }
.strip-fold > summary::after { margin-left: 4px; }
.strip-fold[open] { flex-basis: 100%; padding: 0 0 var(--space-xs); }
.strip-buy { flex: 1 1 100%; order: 10; margin: var(--space-m) 0 0; }   /* always open, under "Searches start from" */
/* owner 27 Oct: "Add a code" on its own line under the buy box (beside the count when there's no buy box) */
.strip-buy ~ .strip-fold { flex-basis: 100%; order: 11; margin-top: var(--space-m); padding-top: var(--space-s); border-top: 1px solid var(--border); }
.account-fold { margin-top: var(--space-l); }
/* Buy box (templates/_buy.html), top to bottom (owner 2026-10-14, D4): the pack choice, the tick box, "Pay by
   card", then the Apple Pay / Google Pay buttons (wallet.js) on devices that have them, then the hint. While
   Stripe checks the device the wallet block keeps its place but stays invisible (Stripe's own advice: never
   display: none while it mounts). Calm on purpose (owner 2026-10-11): a small heading and a grey "Pay by card" on
   My searches and the front page, whose only yellow button stays "Go kick some tyres"; on /confirm "Pay by card" is
   the yellow primary button (D4: paying is the step that starts your search there). */
.buy-box .card-title { font-size: 1rem; font-weight: var(--fw-heading); margin-bottom: var(--space-s); }
.buy-box > p { margin: 0 0 var(--space-m); }
.buy-form { margin: 0; }
/* My searches only: "For me" | "For friends", native radios styled as tabs (arrow keys move between them, screen
   readers say "1 of 2"). Calm colours: the chosen tab is underlined in the text colour, never yellow. Browsers
   without :has() show both hint sentences, which are true together, and the packs as searches (.for-me-only;
   .for-friends-only says "codes" and shows only with :has() on For friends): each code runs one search. */
.buy-for { border: 0; padding: 0; margin: 0 0 var(--space-m); }
.buy-for-tabs { position: relative; display: flex; border-bottom: 1px solid var(--border); }
.buy-for-tabs > .buy-for-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.buy-for-tab { display: flex; align-items: center; min-height: 44px; padding: 10px 16px; margin: 0 0 -1px; cursor: pointer; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; }
.buy-for-tab:hover { color: var(--text); }
.buy-for-input:checked + .buy-for-tab { color: var(--text); border-bottom-color: var(--text); }
.buy-for-input:focus-visible + .buy-for-tab { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.for-friends-only { display: none; }
@supports selector(:has(*)) {
  .buy-form:has(#buy-for-me:checked) .for-friends, .buy-form:has(#buy-for-friends:checked) .for-me { display: none; }
  .buy-form:has(#buy-for-friends:checked) .for-me-only { display: none; }
  .buy-form:has(#buy-for-friends:checked) .for-friends-only { display: inline; }
}
.buy-packs { margin-bottom: var(--space-m); }
.buy-packs .chip-check > span:hover { border-color: var(--muted); }
.buy-packs .chip-check > input:checked + span { background: var(--surface-2); border-color: var(--text); color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.buy-packs .pack-text { display: inline; }   /* one flex item, so the spaces around "·" stay (the chip is inline-flex) */
.wallet { margin: 0 0 var(--space-m); max-width: 420px; }
.wallet-loading { visibility: hidden; }
.wallet-or { color: var(--muted); font-size: var(--fs-s); margin: 0 0 var(--space-xs); }
.wallet-buttons { min-height: 44px; }
.wallet-msg { color: var(--bad); font-size: var(--fs-s); font-weight: 600; margin: 0 0 var(--space-m); }
.wallet-msg:empty { display: none; }
.buy-agree { margin: 0 0 var(--space-m); }
.buy-agree .field { margin: 0; }
.buy-agree .check { padding-top: 0; }
/* "Tick this first" (app.js / wallet.js): the box outlined and the message under its label */
.needs-tick .check { outline: 2px solid var(--bad); outline-offset: 6px; border-radius: 6px; }
.tick-msg { color: var(--bad); font-size: var(--fs-s); font-weight: 600; margin: var(--space-xs) 0 0 32px; }
.tick-msg:empty { display: none; }
.buy-hint { margin: 0; }
.buy-hint a { white-space: nowrap; }

/* Proof for a first-time visitor (owner review 2026-10-13; tk/example_report.py). Front page: the example report's
   first car as a small card under the Go button ("See an example report" when there is none), the last 30 days'
   numbers in the "About us" fold. */
.example-link { font-weight: var(--fw-strong); }
.example-link + .hint { margin-top: 8px; }
/* /example: report.html in example mode. The banner and what was asked above the cars, the turned-down cars as
   plain cards without photos, and the way back to the form at the end. The funnel (every report since
   staging/polish) is one line of steps with arrows (the arrows are drawn, not read out). */
.example-banner { margin-bottom: 20px; }
.example-banner p { text-wrap: balance; }     /* readability critique round 1, 2026-10-27: no "out." alone */
.example-asked-title { color: var(--muted); font-family: var(--font); font-size: var(--fs-s); font-weight: var(--fw-strong); margin: 16px 0 6px; }
.example-prompt { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 14px; }
.funnel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; list-style: none; padding: 0; margin: 0 0 4px; color: var(--muted); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.funnel li { margin: 0; }
.funnel li + li::before { content: "\2192"; content: "\2192" / ""; margin: 0 0.5em; }
.funnel strong { color: var(--text); }
.turned-down { margin: 0 0 28px; }
.dropped-list { padding-left: 1.2em; }
.turned-cars { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.turned-cars > li + li { margin-top: 0; }
.turned-car { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; overflow-wrap: anywhere; }
.turned-car > :last-child { margin-bottom: 0; }
.turned-stage { margin: 0 0 6px; }
.turned-badge { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); white-space: normal; }
.turned-title { font-size: 1.05rem; font-weight: var(--fw-strong); line-height: 1.3; margin: 0 0 4px; }
.turned-advertised { color: var(--muted); font-size: var(--fs-s); font-variant-numeric: tabular-nums; margin: 0 0 8px; }
.turned-headline { font-weight: var(--fw-strong); margin: 0 0 6px; }
.turned-reasons { padding-left: 1.2em; margin: 0; }
.example-cta { margin-top: 28px; }
@media print {
  .example-cta { display: none !important; }
  .turned-car { break-inside: avoid; page-break-inside: avoid; }
}
/* staging/reportdata (14 Oct audit, Batch 3): small folds that read like a link (no box, so the cards stay calm):
   "Cars we turned down" under the funnel, "How we worked out the price" under a car's price line and "What the
   photos show" under "Model watch:", just above the advert button (staging/reportorder); the price drawer's table
   of the nearest similar cars; "Model watch:" under What to check. The fact pills by source: the advert's claims (owners, service history, a changed cambelt) are one
   muted line under the facts row, "From the advert:" then the claims with a dot between them; the judges' knowledge
   (a timing chain, a cambelt due) are plain .car-facts items. */
.mini-fold { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 8px; }
.mini-fold > summary { min-height: 32px; gap: 0; font-size: var(--fs-s); font-weight: 600; color: var(--accent-text); }
.mini-fold > summary::after { margin-left: 6px; font-size: 1.1rem; }
/* The underline sits on the words only: on the flex <summary> itself it also ran under the +/− (owner 2026-10-19). */
.strip-fold .fold-link, .mini-fold .fold-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.mini-fold[open] { padding: 0 0 4px; }
.mini-fold[open] > summary { margin-bottom: 4px; }
.mini-fold > p, .mini-fold .dropped-list { font-size: var(--fs-s); margin: 0 0 8px; }
@media (pointer: coarse) { .mini-fold > summary { min-height: var(--tap); } }
.turned-fold { margin: 4px 0 8px; }
.price-drawer .table-wrap { margin: 0 0 6px; }
.close-table th, .close-table td { padding: 6px 8px; }
/* readability critique 2026-10-27: muted, its label in the text colour (the checks above say what to do) */
.model-watch { font-size: var(--fs-s); margin: -4px 0 14px; color: var(--muted); }
.model-watch strong { color: var(--text); }
.car-claims { color: var(--muted); font-size: var(--fs-s); margin: -8px 0 12px; }
.car-claims .claims-lead { font-weight: 600; margin-right: 0.2em; }
/* readability critique round 1, 2026-10-27: a claim never breaks inside ("Full service / history"); the longest,
   "Part service history" (tk.reports.fact_pills), is about 150 px wide, well inside the 250 px text of a 320 px
   phone's card. The dot ends the claim before it and the line may break at the space after it (report.html), so no
   line starts with a dot */
.car-claims .claim { white-space: nowrap; }
.car-claims .claim:not(:last-child)::after { content: "\00b7"; content: "\00b7" / ""; margin: 0 0.2em 0 0.45em; }
/* staging/reportorder (owner 2026-10-24): the photos' fold and the advert button follow "Model watch:". A rule under
   the button (the twin of the one above "Why it's good") marks where the evidence starts (must-haves, MOT box, Ask
   the seller); none when only the owner's pills or the votes follow, which have their own rule. */
.car-actions:not(:last-child) { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.car-actions:has(+ .track, + .vote-thanks, + .thumbs) { padding-bottom: 0; border-bottom: 0; }
.car-actions + .mot { margin-top: 16px; }
/* No advert button (/example, or a link the privacy rules took out): the MOT box keeps the same 16 px (Fable round 2). */
.photo-fold + .mot, .model-watch + .mot, .check-list + .mot { margin-top: 16px; }
.car-actions + h3 { margin-top: 14px; }
.photo-fold[open] > p:last-child { margin-bottom: 0; }
@media print {
  .mini-fold > summary::after { content: none; }
}

/* staging/retention (14 Oct audit, Batch 8; tk.retention) ---------------------------------------------------
   "Edit my words" note on the front page; /confirm's "Change my words"; a re-run's badges on a car ("New since your
   10 Oct search", "£250 less than on 10 Oct") and the line under the title about cars no longer in it; the owner's
   tracker pills on each car (To call / Called / Viewing / Sold or ruled out), a card marked Sold / ruled out dimmed
   (its pills stay clear, so it can be undone), and the banner when they all are. */
.from-note { margin: 0 0 var(--space-s); }
.change-words { margin: -4px 0 16px; font-size: var(--fs-s); }
.diff-badge { display: inline-block; padding: 2px 10px; border-radius: var(--pill); font-size: var(--fs-xs); font-weight: var(--fw-strong); vertical-align: middle; white-space: normal; }
.diff-new { border: 1px solid var(--good); color: var(--good); background: var(--good-soft); }
.diff-drop { border: 1px solid var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.report-gone { color: var(--muted); font-size: var(--fs-s); margin: 0 0 10px; }
.track { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.track-lead { flex: 1 0 100%; color: var(--muted); font-size: var(--fs-s); font-weight: var(--fw-strong); }
.track-pill {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 6px 14px; margin: 0;
  border-radius: var(--pill); border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: var(--fs-s); line-height: 1.3; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.track-pill:hover { border-color: var(--accent); }
.track-pill:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.track-pill.track-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: var(--fw-strong); }
.track-pill.track-on::before { content: "\2713\00a0"; }
.car-out .car-media, .car-out .car-body > :not(.track):not(.vote-thanks) { opacity: 0.5; }
.car-out .car-title { text-decoration: line-through; text-decoration-thickness: 1px; }
.index-out td { opacity: 0.55; }
.track-banner { margin: 0 0 20px; }
.track-banner .button-row { margin: 10px 0 0; }
.track-banner .hint { margin: 8px 0 0; }
.vote-next { margin: 10px 0 0; }
.vote-thanks .hint { margin: 6px 0 0; }
.rerun-avoid { margin-bottom: 4px; }
@media print {
  .track-banner, .vote-next { display: none !important; }
  .car-out .car-media, .car-out .car-body > * { opacity: 1; }
}

/* ----- admin visitors (analytics) ----- */
/* /admin/analytics (tk.analytics, templates/admin/analytics.html). Mobile first; nothing here is wider than the
   page at 320px. The charts are inline SVG stretched to the card (preserveAspectRatio none, hairlines kept 1px by
   vector-effect); their colours come from the theme variables, so light and dark both work. Tables follow the
   admin convention (data-label on every cell, .table-wrap). */
.range-picker { margin: 0 0 4px; }
.range-picker .chip[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: var(--fw-strong); }
.visitor-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.visitor-stats .stat { padding: 10px 12px; min-width: 0; }
.visitor-stats .stat-label { overflow-wrap: anywhere; }
.stat-range { display: block; margin-top: 4px; color: var(--muted); font-size: 0.8rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .visitor-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1000px) { .visitor-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.vchart { margin: 0 0 22px; }
.vchart-title { margin: 0 0 8px; font-size: var(--fs-s); font-weight: var(--fw-strong); }
.vchart-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
.vchart-y { display: flex; flex-direction: column; justify-content: space-between; min-width: 4ch; height: 140px; color: var(--muted); font-size: 0.75rem; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.vchart-svg { display: block; width: 100%; min-width: 0; height: 140px; overflow: visible; }
.vchart-x { grid-column: 2; display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--muted); font-size: 0.75rem; line-height: 1.2; }
@media (min-width: 640px) { .vchart-y, .vchart-svg { height: 180px; } }
.vchart-bar { fill: var(--accent-text); }
.vchart-bar-logs { fill-opacity: 0.45; }
.vchart-hit { fill: transparent; }
.vchart-day:hover .vchart-hit { fill: var(--surface-2); }
.vchart-grid { stroke: var(--border); stroke-width: 1; }
.vchart-axis { stroke: var(--field-border); stroke-width: 1; }
@media (forced-colors: active) {
  .vchart-bar { fill: CanvasText; }
  .vchart-bar-logs { fill: GrayText; fill-opacity: 1; }
}

.visitor-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
.visitor-grid > section { min-width: 0; }
.visitor-grid h2 { margin-top: 1.2em; font-size: 1.15rem; }
.visitor-grid .table-wrap { margin-bottom: 8px; }
@media (min-width: 760px) { .visitor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ----- design audit 14 Oct 2026 (staging/design1014) -------------------------------------------------------
   Front page: a warm glow behind the hero; the offer on its own line (free first); the last 30 days as four
   counters (since 2026-10-23 inside the About us fold); the form as one raised card with a yellow top edge, inputs
   sunk into it; postcode and distance side by side from 560 px (on a phone, since 2026-10-25, another order: see
   "the front page's form" below); "Search options" folded with what is chosen now; the example's first car as a small card under the button (at every width since
   2026-10-23); the folds below with an icon and a one-line summary. My searches: the saved search as a quote.
   Sign in: the note beside Google / Apple. */
body.home { background: radial-gradient(ellipse 900px 360px at 50% 0, var(--glow), transparent 75%) no-repeat, var(--bg); }

.offer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -2px 0 18px; }
.offer-free { display: inline-flex; align-items: center; padding: 4px 13px; border-radius: var(--pill); background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text); font-weight: var(--fw-strong); line-height: 1.3; }
.offer-free::before { content: "\2713\00a0"; }
.offer-then { color: var(--muted); font-weight: var(--fw-text); font-size: var(--fs-s); }

.stat-strip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--card-shadow); padding: 10px 14px 12px; margin: 0 0 16px; }
.stat-strip-title { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-strong); letter-spacing: 0.06em; text-transform: uppercase; }
.stat-strip-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; list-style: none; padding: 0; margin: 0; }
.stat-strip-list li { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.stat-strip-list strong { color: var(--text); font-family: var(--font-display); font-size: 1.3rem; font-weight: var(--fw-heading); line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat-strip-list span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.3; }
@media (min-width: 480px) { .stat-strip-list { grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 20px; } }
/* Phones: a tighter hero, so the form starts on the first screen (Fable critique 1). */
@media (max-width: 559px) {
  body.home .hero { padding-top: 4px; }
  body.home .lead { font-size: 1rem; margin-bottom: 12px; }
  .stat-strip { padding: 8px 14px 10px; margin-bottom: 12px; }
  .stat-strip-list { gap: 6px 14px; }
  .stat-strip-list strong { font-size: 1.15rem; }
}

.search-form { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 18px 16px 20px; margin: 4px 0 16px; }
@media (min-width: 560px) { .search-form { padding: 24px 28px 26px; } }
.search-form input[type="text"], .search-form input[type="number"], .search-form input:not([type]), .search-form select, .search-form textarea { background-color: var(--bg); }
.search-form details { background: transparent; }
/* "More example searches" reads as a link that opens, not as another field (Fable critique 6). */
.examples { border: 0; background: transparent; box-shadow: none; padding: 0; margin: 0 0 20px; }
.examples > summary { display: inline-flex; gap: 6px; min-height: var(--tap); color: var(--accent-text); font-weight: 600; }
.examples-summary { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.examples > summary:hover .examples-summary { text-decoration-thickness: 2px; }
.examples > summary::after { margin-left: 0; }
.examples[open] { padding-bottom: 0; }
.where-postcode .field { margin-bottom: 6px; }
.where-postcode .postcode-hint { margin: 0 0 20px; }
.search-options { margin: 0 0 16px; }
.search-options > summary { flex-wrap: wrap; row-gap: 0; padding: 8px 0; }
.search-options > summary::after { order: 2; }
.search-options-now { order: 3; flex: 1 0 100%; color: var(--muted); font-size: var(--fs-s); font-weight: var(--fw-text); }
.search-options-now .dot-sep::before { content: "\00b7"; margin: 0 0.45em; }
.search-options[open] > summary { margin-bottom: 8px; }
.search-options > .field:last-child { margin-bottom: 4px; }


.example-mini { display: block; margin: 18px 0 0; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; transition: border-color 0.15s; }
.example-mini:hover { border-color: var(--accent); text-decoration: none; }
/* Owner 2026-10-25: the example car in its own area under the search's card, as a card of its own */
.example-area { margin: 0 0 16px; }
.example-area .example-mini { margin: 0; padding: 16px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--card-shadow); }
@media (min-width: 560px) { .example-area .example-mini { padding: 20px 24px 22px; } }
.example-area .example-link { margin: 0; }
.examples-narrow > .examples { margin-bottom: 0; }   /* now the form's last part on a phone: the card's padding is enough */
.example-mini-body { display: block; }
.example-mini-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.example-mini-price { font-family: var(--font-display); font-size: 1.3rem; font-weight: var(--fw-heading); line-height: 1.1; letter-spacing: -0.01em; }
.example-mini-title { display: block; font-weight: var(--fw-strong); line-height: 1.3; margin: 0 0 6px; text-wrap: balance; }
.example-mini-value { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: var(--fs-s); font-weight: var(--fw-text); line-height: 1.4; margin: 0 0 10px; }
.example-mini-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.example-mini-pills > span { padding: 2px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); font-size: 0.8rem; font-weight: var(--fw-text); line-height: 1.5; }
.example-mini-caption { display: block; margin-top: 12px; color: var(--accent-text); font-size: var(--fs-s); font-weight: var(--fw-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.example-mini-caption::after { content: "\00a0\2192"; content: "\00a0\2192" / ""; }
.example-mini:hover .example-mini-caption { text-decoration-thickness: 2px; }
.mot-pill, .example-mini-pills > .mot-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: var(--good-soft); border: 1px solid transparent; color: var(--good); font-size: 0.8rem; font-weight: var(--fw-strong); line-height: 1.5; }
.mot-pill::before { content: "\2713\00a0"; }
.example-mini-pills > .mot-pill { background: var(--surface); border-color: var(--good); display: block; }   /* AA on the grey card */

/* ----- the front page's form (owner 2026-10-25, staging/frontorder) --------------------------------------------
   "Go kick some tyres" on a phone's first screen. index.html is written in a phone's order and a phone shows it as
   it comes: the box and its hint, the postcode (its hint hidden), the code box when it shows, Go, a hairline, how
   far, the Facebook Marketplace switch, "Search options", the examples and the example card. From 560 px a grid
   lays the same parts out as the form always was: the examples under the box, the postcode and how far side by
   side, "Search options", Facebook, the code box, the searches you have, Go and the card; the margins are the ones
   the old block layout gave after collapsing. Written twice, one hidden at each width: the examples
   (.examples-wide / .examples-narrow) and Go with its hint (.go-wide / .go-narrow). */
@media (min-width: 560px) {
  /* No reading-flow: grid-order here. It would make Tab follow the screen, but Chromium 156 then skips "Search
     options" (a <details>) altogether (staging/frontorder/NOTES.md); Tab follows the page's order instead. */
  .search-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .search-form > * { grid-column: 1 / -1; min-width: 0; }
  .search-form > .prompt-box { order: 1; }
  .search-form > .examples-wide { order: 2; }
  .search-form > .where-postcode { order: 3; grid-column: 1; }
  .search-form > .range-field { order: 4; grid-column: 2; }
  .search-form > .search-options { order: 5; }
  .search-form > .fb-field { order: 6; }
  .search-form > .code-field { order: 7; }
  .search-form > .balance-note { order: 8; }
  .search-form > .go-wide { order: 9; }
  .examples-narrow, .go-narrow { display: none; }
}
/* the exact complement of (min-width: 560px), so a fractional width (559.4 px at 125% scaling) gets one layout, not
   both Goes (frontorder check) */
@media not all and (min-width: 560px) {
  .examples-wide, .go-wide, .search-form .postcode-hint { display: none; }
  /* the card's tighter top (Fable critique 1, staging/searchtop), after the base .search-form rule, so it applies */
  .search-form { padding-top: 14px; }
  .search-form .where-postcode .field { margin-bottom: 20px; }
  /* a hairline under Go: the box, the postcode and Go above it, the rest "if you like" below (Fable critique 1) */
  .search-form .range-field { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
  .examples-narrow .quick-examples { margin-top: 0; }
  /* The box about four lines high (rows="6" elsewhere), still taller than its placeholder at 320 px; where the
     browser can, it grows with what is typed up to about eight lines (no JavaScript); else it scrolls inside. */
  .search-form .prompt-box textarea { min-height: 0; height: 7.5em; }
  @supports (field-sizing: content) {
    .search-form .prompt-box textarea { field-sizing: content; height: auto; min-height: 7.5em; max-height: 14em; }
  }
  /* The Facebook switch: its label in bold, the wait it adds as a quiet line under it (Fable critique 1). */
  .search-form .toggle-note { display: block; font-size: var(--fs-s); margin-top: 2px; }
  .search-form .toggle-track { border-color: var(--field-border); }   /* the off track's edge 3:1 (Fable critique 2) */
  /* no one-word last lines: the chips, the card's caption, "Add a code or buy searches first" (Fable critiques 2, 3) */
  .examples-narrow .chip, .example-mini-caption, .search-form .go-narrow { text-wrap: balance; }
  /* "Search options": each choice in words stays whole, the dot ends the first, so a second line starts with a
     whole phrase ("no towns by train"), not its last word (Fable critique 4). app.js changes the spans' text only. */
  .search-options-now > span { display: inline-block; }
  .search-options-now .dot-sep::before { content: none; }
  .search-options-now > span:first-child::after { content: "\00b7"; margin: 0 0.45em; }
}
/* Up to 400 px a little less air above Go, so it also fits what a 360 px Android's browser leaves of the screen, and
   the offer on one line at 360 px (Fable critique 1, staging/frontorder). */
@media (max-width: 400px) {
  body.home main.wrap { padding-top: 12px; }
  body.home .ask-title { margin-top: 4px; }
  body.home .lead { margin-bottom: 8px; }
  .offer { margin-bottom: 12px; gap: 4px 8px; }
  .offer-free { padding: 4px 11px; }
  .hero-ask .kick-teaser { margin-bottom: 10px; }
  .search-form .prompt-box, .search-form .where-postcode .field { margin-bottom: 16px; }
  /* 8 px more for Go on a 360 px Android (Fable critique 4): no air between the hero and the card but the teaser's */
  body.home .hero { padding-bottom: 0; }
  body.home .search-form { margin-top: 0; }
}

.fold { box-shadow: var(--card-shadow); }
.fold > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon head mark" "icon sub mark"; column-gap: 14px; row-gap: 0; align-items: center; padding: 12px 0; }
.report-fold > summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head mark" "sub mark"; }
.fold > summary h2 { grid-area: head; align-self: end; }
.fold > summary::after { grid-area: mark; margin-left: 0; }
.fold-icon { grid-area: icon; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); }
.fold-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fold-sub { grid-area: sub; align-self: start; margin-top: 2px; color: var(--muted); font-size: var(--fs-s); font-weight: var(--fw-text); line-height: 1.35; text-wrap: balance; }

.saved-search { margin: 0 0 12px; padding: 10px 14px; background: var(--surface); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }
.saved-search p { margin: 0; }
.saved-search .saved-search-where { margin-top: 4px; color: var(--muted); font-size: var(--fs-s); }
.provider-note { margin: -8px 0 0; }
/* in the Facebook / Instagram app's browser the note follows the Google / Apple buttons (signin.html, in_app) */
/* staging/carry (owner 2026-10-23): in the Facebook / Instagram app's browser, after a tap on Google or Apple, a tip
   at the top of the sign-in page, its arrow pointing up at the app's menu (the dots at the top right) to open the
   page in the phone's browser, and a link to try here anyway. */
.open-out { margin: 2px 0 14px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); font-size: var(--fs-s); line-height: 1.45; }
.open-out::after { content: ""; display: table; clear: both; }
.open-out > p { margin: 0; }
.open-out > .open-out-alt { margin-top: 8px; }
.open-out-alt a { display: inline-block; padding: 12px 0; margin: -12px 0; font-weight: var(--fw-strong); color: inherit; }
.auth-tabs { scroll-margin-top: 12px; }        /* "Use your email below" jumps here */
.open-out-again { margin: 0 0 var(--space-l); }   /* the reminder under the buttons, before "New here?" */
.open-out-arrow { float: right; width: 40px; height: 40px; margin: -2px -2px 2px 10px; fill: none; stroke: var(--accent-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.open-out-dots { display: inline-block; min-width: 1.6em; padding: 0 5px; border-radius: 6px; background: transparent; border: 1px solid var(--muted); font-weight: var(--fw-heading); line-height: 1.3; text-align: center; }
/* staging/redditcompass1103: Reddit on an iPhone, the tip points DOWN at the Safari compass in the app's bottom bar
   (the arrow flipped), drawn as the same outlined chip as the dots. */
.open-out-down .open-out-arrow { transform: scaleY(-1); }
.open-out-compass svg { width: 1.05em; height: 1.05em; vertical-align: -0.16em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.open-out-compass .needle { fill: currentColor; }
/* While the tip shows, our header keeps only the logo: the app's menu is then the one thing at the top right. */
body.open-out-page .site-nav, body.open-out-page .theme-switch { display: none; }
/* staging/signinab (owner 2026-10-26): the one-form sign-in page an app's own browser gets right after Go
   (signin.html `first`): the question as the heading, what happens next, the words this browser typed, one email
   field and "Create my free account", then Google / Apple. And on every sign-up form "Did you mean ...@gmail.com?"
   (.typo-check: the server's after a post, app.js's own as it is typed). */
/* Opus critique 1: the form on a phone's first screen (a shorter lead, the heading balanced), the offer in the text
   colour, and the kept search as a quiet pull-quote of at most 2 lines (3 from 560 px; the whole of it is in the page) */
.hero-first { padding-top: 4px; }
.hero-first h1 { margin-bottom: 10px; text-wrap: balance; }
.hero-first .lead { font-size: 1rem; margin-bottom: 12px; text-wrap: pretty; }
.hero-first .lead strong { color: var(--text); }
.signin-kept { margin: 0 0 14px; }
.signin-kept-label { margin: 0 0 4px; color: var(--muted); font-size: var(--fs-s); }
.signin-kept .saved-search { margin: 0; padding: 2px 0 2px 12px; background: none; border-radius: 0; overflow-wrap: anywhere; }
.signin-kept .saved-search > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
@media (min-width: 560px) { .signin-kept .saved-search > p { -webkit-line-clamp: 3; line-clamp: 3; } }
.signup-first { scroll-margin-top: 12px; }        /* "Use your email below" (the tip) jumps here */
/* small and calm, like the site's other small links (Opus critique 2): one yellow thing in the card, the button */
.signin-instead { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: var(--fs-s); }
.signin-instead a { display: inline-block; padding: 11px 4px; margin: -11px 0; color: var(--text); font-weight: var(--fw-strong); }
body.signin-first .site-nav a[aria-current="page"] { color: var(--text); }
/* Apple's white-with-outline button here (light theme), so a way in that often fails in the app's browser doesn't
   outweigh "Create my free account" (Opus critique 1) */
[data-theme="light"] .signup-first ~ .signin-options .btn-apple { background: #fff; color: #000; border-color: #000; }
[data-theme="light"] .signup-first ~ .signin-options .btn-google { border-color: #747775; }   /* a matching pair (critique 2) */
@media (prefers-color-scheme: light) { [data-theme="auto"] .signup-first ~ .signin-options .btn-apple { background: #fff; color: #000; border-color: #000; } }
@media (prefers-color-scheme: light) { [data-theme="auto"] .signup-first ~ .signin-options .btn-google { border-color: #747775; } }
.typo-check { margin: -8px 0 20px; padding: 12px 14px; background: var(--surface-2); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.typo-check > p { margin: 0; }
.typo-check .typo-use { margin: 10px 0; background: var(--surface); border-color: var(--muted); scroll-margin-block: 80px; }
.typo-check .typo-use:hover { border-color: var(--text); }
.typo-check .hint { margin: 0; }
.typo-check:empty { padding: 0; margin: 0; border: 0; }   /* app.js's live region waits, unseen, for its words */
.go-next strong { color: var(--text); font-weight: var(--fw-strong); }  /* the line under Go (variant b): "Next: your email" */
.hint-nudge { color: var(--accent-text); font-weight: var(--fw-strong); }
@media print {
  .example-mini { display: none !important; }
}

/* ----- the instant single-car check (staging/kick, tk.kick) ---------------------------------------------------
   Front page: a quiet card under the search's card (no yellow edge, a grey button: "Go kick some tyres" stays the
   page's one yellow button), the link box and its button side by side when they fit, stacked on a phone.
   /check/<id>: the car's name, price and facts as on a report card; the verdict as a tinted box whose pill says
   the tone in the tone's colour (green clean, amber ask first, red red flag, grey not checked: the words say it
   too, never colour alone); "What we checked" as a list with a mark per line (and the same word for screen
   readers); then the hook, a raised card with the yellow top edge like the search's form. */
.kick-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 16px; margin: 24px 0 0; }
@media (min-width: 560px) { .kick-card { padding: 20px 24px 22px; } }
.kick-head { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "text text"; column-gap: 12px; align-items: center; margin: 0 0 14px; }
.kick-icon { grid-area: icon; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); }
.kick-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kick-title { grid-area: title; margin: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; text-wrap: balance; }
.kick-promise { grid-area: text; margin: 10px 0 0; color: var(--muted); font-size: var(--fs-s); line-height: 1.45; text-wrap: pretty; }
.kick-form { margin: 0; }
.kick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.kick-row input[type="url"] { flex: 1 1 240px; min-width: 0; width: auto; background-color: var(--bg); }
.kick-btn { flex: 1 0 auto; white-space: nowrap; }
@media (min-width: 560px) { .kick-btn { flex: 0 0 auto; } }
.kick-err { margin: 8px 0 0; }

.kick-tag { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-s); font-weight: var(--fw-strong); }
.kick-header { margin: 4px 0 0; }
.kick-car { margin: 0 0 4px; font-size: clamp(1.45rem, 6vw, 2rem); line-height: 1.15; }
.kick-car + .card { margin-top: 16px; }
.kick-price { margin: 0 0 4px; font-size: 1.3rem; font-weight: var(--fw-heading); line-height: 1.1; font-family: var(--font-display); letter-spacing: -0.01em; }
.kick-facts { margin: 8px 0 0; }
.kick-verdict { margin: 20px 0; padding: 16px 18px; border: 1px solid var(--border); border-left-width: 5px; border-radius: var(--radius); background: var(--surface-2); }
.kick-verdict > :last-child { margin-bottom: 0; }
.kick-verdict p { margin: 0 0 6px; }
.kick-verdict-good { border-color: var(--good); background: var(--good-soft); }
.kick-verdict-ask { border-color: var(--accent); background: var(--accent-soft); }
.kick-verdict-warn { border-color: var(--bad); background: var(--bad-soft); }
.kick-verdict-label { display: inline-flex; align-items: center; margin: 0 0 10px; padding: 2px 10px; border-radius: var(--pill); font-size: var(--fs-xs); font-weight: var(--fw-strong); line-height: 1.6; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.kick-verdict-label::before { content: "?\00a0"; content: "?\00a0" / ""; }
.kick-verdict-good .kick-verdict-label { background: var(--good); border-color: var(--good); color: var(--good-ink); }
.kick-verdict-good .kick-verdict-label::before { content: "\2713\00a0"; content: "\2713\00a0" / ""; }
.kick-verdict-ask .kick-verdict-label { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.kick-verdict-ask .kick-verdict-label::before { content: "!\00a0"; content: "!\00a0" / ""; }
.kick-verdict-warn .kick-verdict-label { background: var(--bad); border-color: var(--bad); color: var(--bg); }
.kick-verdict-warn .kick-verdict-label::before { content: "\2717\00a0"; content: "\2717\00a0" / ""; }
.kick-verdict-head { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(1.15rem, 4.6vw, 1.35rem); font-weight: 700; line-height: 1.25; letter-spacing: 0; }
.kick-more { margin: 10px 0 0; padding-left: 1.2em; }
.kick-more li { margin: 0 0 4px; }

.kick-checks .card-title { margin-bottom: 4px; }
.kick-list { list-style: none; padding: 0; margin: 0; }
.kick-item { position: relative; margin: 0; padding: 12px 0 12px 36px; border-top: 1px solid var(--border); }
.kick-item:first-child { border-top: 0; }
.kick-item:last-child { padding-bottom: 0; }
.kick-item::before { position: absolute; left: 0; top: 13px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: var(--fs-s); font-weight: var(--fw-heading); line-height: 1; }
.kick-ok::before { content: "\2713"; content: "\2713" / ""; background: var(--good-soft); color: var(--good); }
.kick-warn::before { content: "!"; content: "!" / ""; background: var(--accent-soft); color: var(--accent-text); }
.kick-bad::before { content: "\2717"; content: "\2717" / ""; background: var(--bad-soft); color: var(--bad); }
.kick-skip::before { content: "\2013"; content: "\2013" / ""; background: var(--surface-2); color: var(--muted); }
.kick-info::before { content: "i"; content: "i" / ""; background: var(--surface-2); color: var(--muted); font-family: Georgia, serif; font-style: italic; }
.kick-item-title { margin: 0 0 2px; font-weight: var(--fw-strong); }
.kick-item-title .plate { margin: 0 0 0 4px; font-size: var(--fs-s); }
.kick-item-line { margin: 0 0 2px; font-size: var(--fs-s); }
.kick-sub-title { margin: 8px 0 2px; color: var(--muted); font-size: var(--fs-s); font-weight: var(--fw-strong); }
.kick-sub { margin: 0; padding-left: 1.1em; font-size: var(--fs-s); line-height: 1.4; }
.kick-sub li { margin: 0; }
.kick-sub li + li { margin-top: 6px; }
.kick-mot-link { margin: 14px 0 0; font-size: var(--fs-s); }
.kick-notes { margin: 0 0 4px; }
.kick-notes p { margin: 0 0 6px; color: var(--muted); font-size: var(--fs-s); }
.kick-advert { margin: 14px 0 0; }

.kick-hook { margin: 28px 0 12px; padding: 20px 18px 22px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius); box-shadow: var(--card-shadow); }
@media (min-width: 560px) { .kick-hook { padding: 24px 28px 26px; } }
.kick-hook-title { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(1.2rem, 4.6vw, 1.4rem); font-weight: 700; letter-spacing: 0; }
.kick-hook > p { margin: 0 0 10px; }
.kick-hook .kick-offer { margin: 12px 0 16px; }
.kick-offer strong { color: var(--good); }
.kick-hook .kick-hook-hint { margin: 10px 0 0; }
.kick-again { margin: 12px 0 0; }

.kick-wait .hamster img { margin: 0 auto; max-width: 180px; }
.kick-wait .spinner { margin: 8px auto 20px; width: 52px; height: 52px; }
.kick-error-hamster { max-width: 280px; }
.kick-retry { max-width: 520px; margin: 4px auto 16px; text-align: left; }
@media print {
  .kick-hook, .kick-again, .kick-card { display: none !important; }
}
/* Fable critique 1 (staging/kick): the teaser line under the offer (a 44 px target through its padding), the
   confirmed plate under the price, a smaller hamster on the error page and 44 px targets for the new pages' inline
   links. The desktop hero card went with the hero (owner 2026-10-23). */
.kick-teaser { margin: -4px 0 14px; font-size: var(--fs-s); }
.kick-teaser a { display: inline-block; padding: 11px 0; margin: -11px 0; font-weight: var(--fw-strong); }
.kick-card-narrow { scroll-margin-top: 12px; }
.kick-plate-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0; font-size: var(--fs-s); }
.kick-plate-line .plate { margin: 0; font-size: 1rem; }
.kick-plate-note { color: var(--muted); }
.kick-failed .error-hamster { max-width: 240px; margin-bottom: 16px; }
.kick-mot-link a, .kick-again a, .kick-failed > p > a, .kick-wait .small a, .kick-verdict p > a { display: inline-block; padding: 11px 0; margin: -11px 0; }
/* Fable critique 2: the quiet jump from the verdict to the hook */
.kick-next { margin: -8px 0 20px; font-size: var(--fs-s); }
.kick-next a { display: inline-block; padding: 11px 0; margin: -11px 0; font-weight: var(--fw-strong); }
.kick-hook-title { scroll-margin-top: 28px; }

/* ----- the paid AI check (staging/paidcheck, tk.carcheck) ------------------------------------------------------------
   The offer under a free check's verdict: a quiet card with the yellow left edge and an outlined button (the hook's
   "Find the good ones near you" stays the page's one yellow button). /check/<id>/ai and /car/<id> reuse the free check's
   header, verdict box and "What we checked" list; the verdict box takes the tone of the verdict (green Great find and
   Worth seeing, amber Go carefully, red Walk away: the words say it too, never colour alone). */
.ai-offer { margin: -4px 0 20px; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.ai-offer > p { margin: 0 0 10px; }
.ai-offer-title { margin: 0 0 6px; font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.ai-offer-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 !important; }
.ai-offer-full { margin: 0 !important; font-weight: var(--fw-strong); }
.ai-confirm .ai-what { margin: 16px 0; }
.ai-what-list { margin: 0 0 12px; padding-left: 1.2em; }
.ai-what-list li { margin: 0 0 4px; }
.ai-form { margin: 0 0 16px; }
.ai-plate-note { margin: 0 0 12px; padding: 10px 14px; background: var(--surface-2); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); }
.ai-first-hint { margin: -20px 0 16px 32px; }
.ai-back { margin: 12px 0 0; }
.ai-back a { display: inline-block; padding: 11px 0; margin: -11px 0; }
.ai-wait .hamster img { margin: 0 auto; max-width: 180px; }
.ai-wait .status-big { text-align: center; text-wrap: balance; }
.ai-verdict .ai-one-line { font-size: 1rem; font-weight: var(--fw-text); }
.ai-verdict .ai-verdict-line { color: var(--muted); }
.ai-cap { padding-top: 6px; border-top: 1px solid var(--border); }
/* Fable round 4 (fix 3): the ruled cap / "Worth knowing" line spaced like the price block below it (10 px either side
   of its rule); .ai-verdict outranks .kick-verdict p */
.ai-verdict .ai-cap { margin-top: 10px; padding-top: 10px; }
/* polish round: the check's day under the facts; the box's cap findings under a verdict it didn't lower */
.ai-checked { margin: 8px 0 0; }
.ai-price-line { font-variant-numeric: tabular-nums; }
.ai-section { margin: 0 0 16px; }
.ai-section .card-title { margin-bottom: 8px; }
/* Only the plain bullet lists: the free check's icon list (.kick-list), the ticks (.why-list) and the flags keep their
   own indent (UI round 1: they were pushed 1.2em right) */
.ai-section > ul:not(.kick-list):not(.why-list):not(.flags) { margin: 0; padding-left: 1.2em; }
.ai-section > ul:not(.kick-list) > li { margin: 0 0 4px; }
.ai-section .flags { margin: 0; }
.ai-limits { margin: 4px 0 8px; }
.ai-limits-title { margin: 0 0 6px; font-size: 1rem; font-weight: var(--fw-strong); }
.ai-failed .error-hamster { max-width: 240px; margin-bottom: 16px; }
.badge-verdict-good { color: var(--good); border-color: var(--good); background: var(--good-soft); }
.badge-verdict-ask { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); }
.badge-verdict-warn { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.ai-me .job-list { margin: 0; }
.select-small { width: auto; min-height: 36px; padding: 4px 28px 4px 8px; font-size: 1rem; }
/* UI round 1 (staging/paidcheck/FABLE_CRITIQUE_1.md, UI_CHANGES.md):
   - the offer's button outlined in the link colour (5.4:1 light, about 9:1 dark): the page's one thing to buy, without
     a second yellow button; the full-search link at the offer's foot
   - the verdict box's price summary one part per line, under a rule (a range never breaks after its dash)
   - the viewing checklist folded in its card (summary: its h2 and how many things), no JavaScript needed */
.ai-offer-btn { background: var(--surface); border: 2px solid var(--accent-text); color: var(--accent-text); }
.ai-offer-btn:hover { background: var(--accent-soft); border-color: var(--accent-text); }
.ai-offer .ai-offer-next { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: var(--fs-s); }
.ai-verdict .ai-price-line { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }
/* round 2 (FABLE_CRITIQUE_2 fix 7): label quiet, figure bold, figures aligned; a long part ("you'd need £90 off...")
   wraps in its column, a short figure never breaks after its dash. Readability critique round 1, 2026-10-27: the
   labels may wrap too, past half the box ("Start your offer around" beside "£6,400–£6,900" was wider than a 320 px
   phone) */
.ai-verdict .ai-price-line { display: grid; grid-template-columns: fit-content(50%) minmax(0, 1fr); gap: 2px 10px; align-items: baseline; }
.ai-price-part { display: contents; }
.ai-price-k { color: var(--muted); font-weight: var(--fw-text); font-size: var(--fs-s); }
.ai-price-k::first-letter { text-transform: uppercase; }
.ai-price-v { font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.ai-price-short { white-space: nowrap; }
.ai-price-sep { display: none; }
.ai-fold { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.ai-fold[open] { padding: 0; }
.ai-fold > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head mark" "sub mark"; column-gap: 12px; row-gap: 2px; align-items: center; }
.ai-section .ai-fold > summary .card-title { grid-area: head; margin: 0; }
.ai-fold-sub { grid-area: sub; color: var(--muted); font-size: var(--fs-s); font-weight: var(--fw-text); }
.ai-fold > summary::after { grid-area: mark; }
.ai-fold[open] > summary { margin-bottom: 10px; }
.ai-fold .check-list { margin: 0; }
.ai-fold .check-list li { margin: 0 0 4px; }
/* round 2 (fixes 4-6): the repair costs ruled off like the items above them; the offer's title balanced; the foot link
   quieter than the button */
.ai-section .mot-repairs { margin-bottom: 14px; padding-bottom: 14px; }
.ai-offer-title { text-wrap: balance; }
.ai-offer .ai-offer-next a { font-weight: var(--fw-text); }
@media print {
  .ai-offer, .kick-hook { display: none !important; }
}

/* ----- staging/paidcheck DESIGN.md 15: the free check's Registration tab (tk.kick_plate; _kick_plate.html,
   check_plate.html). Two plain links styled as tabs (no JavaScript), inside the card's head under its title. The
   open tab: the text colour on surface-2 with a 3px bar in --accent-text (4.75:1 or more on surface-2 in both
   themes, WCAG 1.4.11) and heavier type; the other: --muted on the page colour (6:1 or more). ----- */
.kick-head-tabs { grid-template-areas: "icon title" "tabs tabs" "text text"; }
.kick-tabs { grid-area: tabs; display: flex; gap: 4px; margin: 14px 0 0; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.kick-tab { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 6px 8px; border-radius: 7px; color: var(--muted); font-size: 0.95rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; }
.kick-tab:hover { color: var(--text); text-decoration: underline; }
.kick-tab[aria-current="true"] { background: var(--surface-2); color: var(--text); font-weight: var(--fw-strong); box-shadow: inset 0 -3px 0 var(--accent-text); text-decoration: none; }
.kick-row .kick-plate-input { flex: 1 1 160px; min-width: 0; width: auto; background-color: var(--bg); font-family: var(--mono); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
/* UI round 3 (FABLE_CRITIQUE_3 fix 3): the example reads as an example, not a typed registration */
.kick-row .kick-plate-input::placeholder { font-weight: 400; letter-spacing: 0.04em; color: var(--muted); opacity: 1; }
.kick-plate-scope { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-s); }

/* ----- photo viewer (app.js data-photo-zoom; report.html): a tap on a car's big photo, or on its photo in the list
   at a glance, or on one of its thumbnails, shows the car's photos whole (not cropped to 4:3 like the card) and as big as the screen allows, on a
   near-black backdrop in both themes. On a phone the close button sits above the photo and the arrows with the "2 / 3"
   count between them under it; on wider screens they sit beside it; white on
   rgba(12,13,16,.72) circles reads 15:1 over the backdrop and stays clear of a bright photo. ----- */
.car-photo-link { position: relative; display: block; color: #fff; }
html.js .car-photo-link, html.js .index-zoom, html.js .car-thumbs a { cursor: zoom-in; }
.zoom-chip { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--pill); background: rgba(12, 13, 16, 0.6); pointer-events: none; transition: background 0.15s; }
.car-photo-link:hover .zoom-chip, .car-photo-link:focus-visible:not(.pv-quiet) .zoom-chip { background: rgba(12, 13, 16, 0.85); }
.car-photo-link:focus-visible { outline-offset: -3px; border-radius: 0; }
.index-zoom { display: block; border-radius: 6px; }
html.pv-open, html.pv-open body { overflow: hidden; }
.photo-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; overscroll-behavior: contain; --focus: #ffd257; }
.photo-viewer[open] { display: grid; place-items: center; }
.photo-viewer:focus, .photo-viewer:focus-visible { outline: none; }   /* focus after a tap: no ring round the screen */
a.pv-quiet:focus, a.pv-quiet:focus-visible { outline: none; }          /* the photo tapped, after the viewer closes */
.photo-viewer::backdrop { background: #060709; }
.pv-img { width: 100vw; height: 100vh; height: 100dvh; max-width: 1200px; max-height: 900px; object-fit: contain; cursor: zoom-out; -webkit-user-select: none; user-select: none; }
.pv-full .pv-img { max-width: 2048px; max-height: 1536px; }   /* staging/photohd: a car with a full-size photo (data-full, up to 2048 px) may fill a bigger screen, all its photos alike */
.pv-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--pill); background: rgba(12, 13, 16, 0.72); color: #fff; cursor: pointer; }
.pv-btn:hover { background: rgba(40, 42, 48, 0.92); }
.pv-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--pill); }
.pv-close { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
.pv-prev, .pv-next { top: 50%; margin-top: -24px; }
.pv-prev { left: max(8px, env(safe-area-inset-left)); }
.pv-next { right: max(8px, env(safe-area-inset-right)); }
.pv-count { position: absolute; top: max(22px, calc(env(safe-area-inset-top) + 10px)); left: max(14px, env(safe-area-inset-left)); margin: 0; padding: 4px 12px; border-radius: var(--pill); background: rgba(12, 13, 16, 0.72); font-size: var(--fs-s); font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; pointer-events: none; }
.pv-one .pv-prev, .pv-one .pv-next, .pv-one .pv-count { display: none; }
/* Fable round 1: on a phone the arrows sit in the thumb zone under the photo, never over its edges */
@media (max-width: 639px) {
  .pv-prev, .pv-next { top: auto; bottom: max(20px, env(safe-area-inset-bottom)); margin-top: 0; }
  .pv-prev { left: max(16px, env(safe-area-inset-left)); }
  .pv-next { right: max(16px, env(safe-area-inset-right)); }
  /* Fable round 2: the count between the arrows, centred on them */
  .pv-count { top: auto; bottom: max(30px, calc(env(safe-area-inset-bottom) + 10px)); left: 50%; transform: translateX(-50%); }
}
@media (min-width: 640px) {
  .pv-img { width: calc(100vw - 160px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); height: calc(100vh - 56px); height: calc(100dvh - 56px); }
  .pv-prev { left: max(20px, env(safe-area-inset-left)); }
  .pv-next { right: max(20px, env(safe-area-inset-right)); }
  .pv-close { top: max(16px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); }
  .pv-count { top: max(26px, calc(env(safe-area-inset-top) + 10px)); left: max(22px, env(safe-area-inset-left)); }
}
@media (min-width: 640px) and (max-height: 500px) {   /* a phone on its side: the photo takes the full height */
  .pv-img { height: 100vh; height: 100dvh; }
}
@media (prefers-reduced-motion: no-preference) {
  .photo-viewer[open], .photo-viewer[open]::backdrop { animation: pv-in 0.16s ease-out; }
}
@keyframes pv-in { from { opacity: 0; } }
@media print {
  .photo-viewer { display: none !important; }
}

/* ----- full history check (staging/fullcheck, tk.fullcheck; fullcheck.html, fullcheck_confirm.html, _fullcheck.html)
   The result page answers first: the verdict box (the free check's .kick-verdict, green / amber / red: the words say
   it too, never colour alone), then the 15-row checklist (.kick-list marks), then one card per subject. Charts are
   inline SVG coloured from the theme tokens, so both themes work. fc- classes only; no inline styles. ----- */
.fc-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; margin: 4px 0 0; }
.fc-head-text { min-width: 0; }
.fc-photo { width: 92px; height: 69px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); margin-top: 22px; }
.fc-plate-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0; font-size: var(--fs-s); }
.fc-plate-line .plate { margin: 0; font-size: 1rem; }
.fc-facts { color: var(--muted); }
.fc-asking { margin: 4px 0 0; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.fc-links { margin: 6px 0 0; font-size: var(--fs-s); }
.fc-links a { display: inline-block; padding: 11px 0; margin: -11px 0; }
.fc-verdict { margin: 18px 0 16px; }
.fc-verdict .kick-verdict-head { margin-bottom: 8px; text-wrap: balance; }
.fc-verdict .kick-verdict-label { font-size: var(--fs-s); padding: 4px 14px; margin-bottom: 12px; }
.fc-verdict .fc-lead { margin: 10px 0 4px; font-weight: var(--fw-strong); }
.fc-bullets { margin: 4px 0 10px; padding-left: 1.2em; }
.fc-bullets li { margin: 0 0 6px; text-wrap: pretty; }   /* critic round 4: no word alone on a bullet's last line */
.fc-bullets a { color: var(--text); text-decoration: underline; text-decoration-color: var(--muted); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.fc-bullets a:hover { text-decoration-color: currentColor; }
.fc-verdict .fc-more { color: var(--muted); }
.fc-verdict .fc-vin { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.fc-verdict .fc-action { margin-top: 12px; font-weight: var(--fw-strong); }
.kick-verdict-ask .fc-lead { font-weight: var(--fw-text); }
.fc-refunded, .fc-old { margin-top: 8px !important; font-weight: var(--fw-strong); }
.fc-unknown-lead { color: var(--muted); }

.fc-checks .card-title { margin-bottom: 4px; }
.fc-list .kick-item { padding: 0 0 0 36px; }
.fc-list .kick-item::before { top: 11px; }
.fc-row { display: block; padding: 10px 0; color: inherit; text-decoration: none; min-height: var(--tap); }
.fc-row:hover .kick-item-title { text-decoration: underline; text-underline-offset: 0.18em; }
.fc-row .kick-item-title, .fc-row .kick-item-line { display: block; }
.fc-row .kick-item-line { color: var(--text); }
.fc-list .kick-ok .kick-item-line { color: var(--muted); }
.fc-list .kick-item:last-child .fc-row { padding-bottom: 2px; }

.fc-sections { display: block; }
.fc-sec { scroll-margin-top: 16px; }
.fc-anchor { display: block; position: relative; top: -16px; visibility: hidden; }
.fc-sec-bad { border-top: 3px solid var(--bad); }
.fc-sec-warn { border-top: 3px solid var(--accent); }
.fc-sec-title { display: flex; align-items: center; gap: 8px; }
.fc-sec-mark { display: none; }
.fc-answer { margin: 0 0 8px; font-weight: var(--fw-strong); font-size: 1rem; }
.fc-sec > p, .fc-sec > .fc-note { margin: 0 0 10px; }
.fc-sec > :last-child { margin-bottom: 0; }
.fc-note { padding: 8px 12px 8px 36px; position: relative; background: var(--surface-2); border-radius: var(--radius-sm); font-size: var(--fs-s); }
.fc-note::before { content: "i"; content: "i" / ""; position: absolute; left: 10px; top: 8px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: Georgia, serif; font-style: italic; font-weight: var(--fw-heading); font-size: 0.75rem; background: var(--surface); color: var(--muted); }
.fc-note-warn::before { content: "!"; content: "!" / ""; font-family: var(--font); font-style: normal; color: var(--accent-text); }
.fc-note-bad::before { content: "\2717"; content: "\2717" / ""; font-family: var(--font); font-style: normal; color: var(--bad); }
.fc-sub { margin: 16px 0 6px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 1rem; font-weight: var(--fw-strong); }
.fc-link a { display: inline-block; padding: 11px 0; margin: -11px 0; }

.fc-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 4px 0 12px; padding: 10px 14px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: var(--fs-s); }
.fc-kv-row { display: contents; }
.fc-kv dt, .fc-specs dt { color: var(--muted); font-weight: var(--fw-text); }
.fc-kv dd, .fc-specs dd { margin: 0; font-weight: var(--fw-strong); overflow-wrap: anywhere; }
.fc-specs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: var(--fs-s); }

.fc-table-wrap { margin: 4px 0 10px; }
.fc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.fc-table th, .fc-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.fc-table thead th { color: var(--muted); font-weight: var(--fw-strong); font-size: var(--fs-xs); }
.fc-table th { text-transform: none; letter-spacing: normal; }
.fc-compare th, .fc-compare td { overflow-wrap: normal; word-break: normal; hyphens: none; }
.fc-compare tbody th { width: 1%; white-space: nowrap; font-size: var(--fs-s); }
.fc-table tbody tr:last-child th, .fc-table tbody tr:last-child td { border-bottom: 0; }
.fc-table .num { text-align: right; }
.fc-table .fc-row-bad td { color: var(--bad); font-weight: var(--fw-strong); }
.fc-table .fc-row-down td { color: var(--bad); font-weight: var(--fw-strong); }   /* review fix (RL3-5): where it went down */
.fc-table .fc-row-warn td:nth-child(2) { color: var(--accent-text); font-weight: var(--fw-strong); }
.fc-compare tbody th { font-weight: var(--fw-text); color: var(--muted); }
.fc-compare td { white-space: normal; }
.fc-mark-cell { width: 28px; text-align: center; }
.fc-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.75rem; font-weight: var(--fw-heading); }
.fc-mark-ok { background: var(--good-soft); color: var(--good); }
.fc-mark-ok::before { content: "\2713"; content: "\2713" / ""; }
.fc-mark-warn { background: var(--accent-soft); color: var(--accent-text); }
.fc-mark-warn::before { content: "!"; content: "!" / ""; }
.fc-mark-bad { background: var(--bad-soft); color: var(--bad); }
.fc-mark-bad::before { content: "\2717"; content: "\2717" / ""; }
.fc-mark-info { background: var(--surface-2); color: var(--muted); font-family: Georgia, serif; font-style: italic; }
.fc-mark-info::before { content: "i"; content: "i" / ""; }
.fc-more-fold { margin: 0 0 10px; }

/* the mileage chart and the valuation scale (viewBox units; text sizes in viewBox units too) */
.fc-chart, .fc-scale { margin: 6px 0 10px; }
.fc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fc-line { stroke: var(--accent-text); stroke-width: 2.2; stroke-linecap: round; }
.fc-gap { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 4; stroke-linecap: round; }
.fc-dot { fill: var(--accent-text); }
.fc-drop { fill: var(--bad); stroke: var(--surface); stroke-width: 1.5; }
.fc-down { fill: var(--surface); stroke: var(--bad); stroke-width: 2.5; }        /* review fix (RL3-5): a drop's ends */
.fc-seg-down { stroke: var(--bad); stroke-width: 2.8; }                             /* and the line going down */
.fc-axis { stroke: var(--border); stroke-width: 1.5; }
.fc-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.fc-tick { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.fc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; color: var(--muted); font-size: var(--fs-s); }
.fc-key::before { content: ""; display: inline-block; vertical-align: middle; margin-right: 6px; }
.fc-key-drop::before { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); }
.fc-key-down::before { width: 18px; border-top: 3px solid var(--bad); }
.fc-key-gap::before { width: 18px; border-top: 2px dashed var(--muted); }
.fc-key-ask::before { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid var(--accent-text); }
.fc-key-range::before { width: 18px; height: 6px; border-radius: 3px; background: var(--good); }
.fc-key-dot::before { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.fc-scale-line { stroke: var(--border); stroke-width: 6; stroke-linecap: round; }
.fc-scale-range { stroke: var(--good); stroke-width: 6; stroke-linecap: round; }
.fc-scale-dot { fill: var(--muted); stroke: var(--surface); stroke-width: 1.5; }
.fc-ask { fill: var(--accent-text); }
.fc-values { list-style: none; margin: 0 0 10px; padding: 0; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.fc-values li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 10px; border-radius: 8px; }
.fc-values li:nth-child(even) { background: var(--surface-2); }
.fc-values .fc-val { font-weight: var(--fw-strong); white-space: nowrap; }
.fc-values .fc-this { background: var(--accent-soft) !important; font-weight: var(--fw-strong); }
.fc-values .fc-this .fc-val-label::before { content: "\25BC\00a0"; content: "\25BC\00a0" / ""; color: var(--accent-text); font-size: 0.75em; }

/* the timeline: dated events, oldest first, a mark on the amber and red ones */
.fc-timeline { list-style: none; margin: 12px 0 0; padding: 0 0 0 4px; font-size: var(--fs-s); }
.fc-ev { position: relative; display: grid; grid-template-columns: 7.2em minmax(0, 1fr); column-gap: 8px; padding: 4px 0 4px 22px; border-left: 2px solid var(--border); margin-left: 5px; }
.fc-ev::before { content: ""; position: absolute; left: -7px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); }
.fc-ev-ok::before { border-color: var(--good); }
.fc-ev-warn::before { border-color: var(--accent-text); background: var(--accent); }
.fc-ev-bad::before { border-color: var(--bad); background: var(--bad); }
.fc-ev-info::before { border-color: var(--muted); }
.fc-ev-now::before { border-color: var(--text); background: var(--text); }
.fc-ev-when { display: inline-block; min-width: 7.2em; color: var(--muted); font-variant-numeric: tabular-nums; }
.fc-ev-warn .fc-ev-text, .fc-ev-bad .fc-ev-text { font-weight: var(--fw-strong); }

.fc-items-title { margin: 0 0 4px; font-weight: var(--fw-strong); }
.fc-do { margin: 0 0 10px; padding-left: 1.2em; }        /* critic round 4: the things to do, as steps */
.fc-do li { margin: 0 0 4px; text-wrap: pretty; }
.fc-items { margin: 0 0 10px; padding: 0; list-style: none; font-size: var(--fs-s); }
.fc-items li { margin: 0 0 4px; }
.fc-item-type { display: inline-block; padding: 0 6px; margin-right: 4px; border-radius: 4px; background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: 0.06em; }
.fc-item-warn .fc-item-type { background: var(--accent-soft); color: var(--accent-text); }
.fc-item-bad .fc-item-type { background: var(--bad-soft); color: var(--bad); }

.fc-fold { padding: 0 18px; }
.fc-fold > summary .card-title { margin: 0; }
.fc-fold[open] { padding-bottom: 16px; }
.fc-foot { margin: 8px 0 0; }
.fc-again a { display: inline-block; padding: 11px 0; margin: -11px 0; font-weight: var(--fw-strong); }

/* waiting and failed */
.fc-wait .kick-tag .plate { letter-spacing: 0.06em; }
.fc-wait .fc-steps { max-width: 360px; margin: 8px auto 16px; text-align: left; }
.fc-failed .error-hamster { max-width: 240px; margin-bottom: 16px; }
.fc-refund-line { font-weight: var(--fw-strong); }

/* the confirm page */
.fc-confirm .fc-what { margin: 16px 0; }
.fc-what-list { margin: 0 0 12px; padding-left: 1.2em; }
.fc-what-list li { margin: 0 0 8px; }
.fc-confirm-price { font-size: 1rem; font-weight: var(--fw-strong); font-variant-numeric: tabular-nums; }
.fc-found { margin: 6px 0 0; }
.fc-form { margin: 16px 0; }
/* owner 27 Oct (Opus critique): why pay, above the button; the refund promise under it; no lone last words; small print
   links big enough to tap */
.fc-why { margin: 12px 0 0; max-width: 34rem; font-size: 1rem; line-height: 1.45; text-wrap: pretty; }
.fc-what > p { text-wrap: pretty; }
.fc-form .buy-hint a { display: inline-block; padding: 11px 0; margin: -11px 0; }
/* critic 27 Oct: the card button as wide as Stripe's wallet button under it; a note right under the header gets the
   same gap as the pay card */
.fc-form .buy-buttons .btn-block { max-width: 420px; justify-content: center; }
/* owner 31 Oct: the pay block centred in its card (on a phone the button is full width anyway) */
.fc-form { text-align: center; }
.fc-form .buy-buttons { justify-content: center; }
.fc-form .wallet { margin-inline: auto; }
.fc-form .buy-hint { max-width: 420px; margin-inline: auto; text-wrap: balance; }
.fc-form .test-mode { text-align: left; }
.fc-confirm .kick-header + .notice, .fc-confirm .kick-header + .flash { margin-top: 16px; }
/* owner 31 Oct (Opus critique): the hint centred with or without the wallet (.card > .button-row + .hint resets its
   sides); "What you get" leads dark, the why grey, so it reads as 7 headlines; the "or" divider over the wallet; the
   grey second button at the end of the list */
.fc-confirm .fc-form .buy-hint { margin-left: auto; margin-right: auto; }
.fc-what-list li { color: var(--muted); text-wrap: pretty; }
.fc-what-list strong { color: var(--text); }
.fc-form .wallet-or { margin-bottom: var(--space-s); }
.fc-what .fc-pay-again { margin: var(--space-m) 0 0; }
.fc-what .fc-pay-again .btn-block { max-width: 420px; margin: 0 auto; justify-content: center; }

/* the report card: the offer under the advert button, grey (the advert stays the card's one yellow button) */
.car-actions .fullcheck-link { white-space: nowrap; gap: 6px; }
.fc-gem { font-size: 1.25em; line-height: 1; }   /* owner 27 Oct: a diamond on the history check button */
.car-actions .fullcheck-hint { flex: 1 0 100%; margin: -4px 0 0; }
.car-actions .fullcheck-full, .car-actions .fullcheck-have { flex: 1 0 100%; margin: 0; }
.fullcheck-have { line-height: 1.8; }
.fullcheck-have .badge { margin-right: 4px; }
/* critic round 4: the bought check's badge carries the page pill's mark (the text says the answer, so no alt text) */
.fullcheck-have .badge-verdict-good::before { content: "\2713\00a0"; content: "\2713\00a0" / ""; }
.fullcheck-have .badge-verdict-ask::before { content: "!\00a0"; content: "!\00a0" / ""; }
.fullcheck-have .badge-verdict-warn::before { content: "\2717\00a0"; content: "\2717\00a0" / ""; }
.fullcheck-fresh { white-space: nowrap; }
.fc-row, .car-actions .fullcheck-hint { text-wrap: pretty; }
.fc-answer { text-wrap: balance; }
.fullcheck-have a { display: inline-block; padding: 10px 0; margin: -10px 0; }
@media (max-width: 559px) {
  .car-actions-history .btn { flex: 1 1 100%; }
  .fc-table th, .fc-table td { padding: 7px 5px; }
  .fc-table td:last-child { white-space: normal; text-wrap: balance; }
  .fc-tick { font-size: 13px; }           /* critic round 4: the chart's and the value scale's labels, on phones */
}
/* critic rounds 1-2: on phones the photo sits beside the tag and title only, and the plate line, asking line and
   links run the full width, so the verdict starts higher; the fine checklist rows take one line each ("Stolen: No theft
   record"), so the !, ✗ and i rows stand out */
@media (max-width: 639px) {
  .fullcheck-fresh { display: block; }                 /* on phones its own line, so no "·" starts one */
  .fullcheck-fresh > [aria-hidden] { display: none; }
  .fc-head-text { display: contents; }
  .fc-head-text > * { grid-column: 1; }
  .fc-head-text > .fc-plate-line, .fc-head-text > .fc-asking, .fc-head-text > .fc-links { grid-column: 1 / -1; }
  .fc-header > .fc-photo { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (max-width: 899px) {
  .fc-list .kick-ok .fc-row .kick-item-title, .fc-list .kick-ok .fc-row .kick-item-line { display: inline; }
  .fc-list .kick-ok .fc-row { font-size: var(--fs-s); }
  .fc-list .kick-ok::before { top: 9px; }
  .fc-list .kick-ok .kick-item-title::after { content: ":"; content: ":" / ""; }
}

@media (min-width: 640px) {
  .fc-photo { width: 220px; height: 165px; margin-top: 0; }
}
@media (min-width: 900px) {
  body.fc-body main.wide { max-width: calc(1040px + 2 * var(--gutter)); }
  .fc-list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(8, auto); grid-auto-flow: column; column-gap: 32px; }
  .fc-list > .kick-item:nth-child(9) { border-top: 0; }
  .fc-list > .kick-item:nth-child(8) .fc-row { padding-bottom: 2px; }
  .fc-sections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .fc-sections > .fc-wide { grid-column: 1 / -1; }
  /* the mileage chart beside its readings, the chart no wider than it reads well */
  #mileage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; column-gap: 28px; align-items: start; }
  #mileage > * { grid-column: 1 / -1; }
  #mileage > .fc-chart { grid-column: 1; }
  #mileage > .fc-table-wrap, #mileage > .fc-more-fold { grid-column: 2; }
  .fc-scale { max-width: 560px; }
  .fc-verdict .kick-verdict-head { font-size: 1.5rem; }
  .fc-bullets-many { columns: 2; column-gap: 32px; }
  .fc-bullets-many li { break-inside: avoid; }
  /* critic round 4: lines of about 75 characters, not 110, in the verdict box and the wide cards (the VIN line keeps
     the box's full width) */
  .fc-verdict > .fc-lead, .fc-verdict > .fc-more, .fc-verdict > .fc-bullets:not(.fc-bullets-many),
  .fc-wide > p { max-width: 40rem; }
}
@media print {
  .fc-links, .fc-again { display: none !important; }
  .fc-fold { break-inside: avoid; }
}

/* ----- Halloween candy codes (staging/halloween1031, tk.candy) ------------------------------------------------- */
/* "A friend sent you a treat": under Go on the front page (never above the box), on the sign-in page and in My
   searches' "Add a code". Text colour on the amber tint, so it reads in both themes. */
.treat-note { margin: var(--space-s) 0 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text); font-size: var(--fs-s); line-height: 1.45; }
.treat-signin { margin: 0 0 var(--space-m); }
.treat-me { margin: var(--space-xs) 0 var(--space-s); }
.treat-wait { color: var(--text); }
/* My searches: the owner's card */
.candy-top { display: flex; gap: 14px; align-items: flex-start; }
.candy-hamster { flex: 0 0 auto; width: 88px; height: 88px; border-radius: var(--radius-sm); }
.candy-card .card-title { margin: 2px 0 6px; }
.candy-state { margin: 0; }
.candy-done .candy-state strong { color: var(--good); }
.candy-code { margin: var(--space-m) 0 var(--space-s); }
.candy-code .code { display: inline-block; max-width: 100%; padding: 8px 14px; font-size: 1.35rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); -webkit-user-select: all; user-select: all; }
.candy-share { margin: 0 0 var(--space-s); }
.candy-link { margin: 0 0 var(--space-xs); overflow-wrap: break-word; }
.share-link { font-family: var(--mono); font-size: var(--fs-s); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.candy-ends { margin: 0; }
/* "Stop these emails" */
.offers-stop { max-width: 560px; }
.offers-stop h1 { margin: 0 0 12px; font-size: 1.6rem; }
/* critic 1: the front page's treat note fills its box (the phone's Go hints are balanced: .search-form .go-narrow);
   from 560 px it sits right under the box (order 1, after .prompt-box in the page), on a phone under Go */
.search-form .treat-note { text-wrap: wrap; text-wrap: pretty; }   /* critic 2: no one-word last line; "wrap"
   first for browsers without "pretty", which would otherwise keep the Go hints' balance */
.treat-note, .candy-state { text-wrap: pretty; }
.search-form > .treat-wide { order: 1; margin: 0 0 var(--space-m); }
@media not all and (min-width: 560px) {
  .search-form > .treat-wide { display: none; }
  /* critic 1: the card's text gets the full width (hamster and title share the first row), and its two buttons
     stack full width */
  .candy-top { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px 14px; align-items: center; }
  .candy-top > div { display: contents; }
  .candy-hamster { width: 64px; height: 64px; }
  .candy-card .card-title { margin: 0; }
  .candy-state { grid-column: 1 / -1; }
  .candy-share > * { flex: 1 1 100%; }
  .candy-code .code { display: block; text-align: center; }   /* critic 2: as wide as the buttons under it */
}
@media (min-width: 560px) {
  /* critic 2: room under the note before the example chips (.quick-examples pulls itself up under the box's hint) */
  .search-form > .treat-wide { margin: 0 0 20px; }
  .search-form > .treat-wide + .examples-wide .quick-examples { margin-top: 0; }
}
.candy-same-ip { color: var(--bad); font-weight: var(--fw-strong); }   /* /admin/codes: a friend on the owner's network (review) */