/* ===========================================================================
   WF Car Advisor — WorkFactory editorial
   Cormorant Garamond headlines + Inter body + JetBrains Mono figures, on the
   house palette (Logo.md): Deep Blue #1E3A8A, CTA #0369A1, Agent Orange
   #F97316 (graphical only on light — 2.9:1), Ink #0F172A.
   Three colour modes: light is the base on :root, dark overrides under both
   the media query (system) and [data-theme="dark"] (manual), and
   [data-theme="light"] pins light against a dark OS. Components only ever
   read tokens, so the mode switch happens here and nowhere else.
   =========================================================================== */

/* The hidden attribute means "not rendered", full stop. Author rules that set
   display (flex, grid) silently beat the UA's display:none, and that has now
   caused three separate bugs here — a locked chat panel rendered above a working
   input, and results that stayed on screen after being hidden. One rule, once. */
[hidden] { display: none !important; }

:root {
  color-scheme: light;

  --bg:          #F6F7F9;
  --surface:     #FFFFFF;
  --surface-2:   #EEF1F5;
  --surface-3:   #E2E8F0;
  --border:      #D3DAE4;
  --border-soft: #E5EAF1;

  --text:        #26364E;
  --text-strong: #0F172A;
  --muted:       #4F6076;   /* 6.2:1 on white — body-safe */
  --muted-dim:   #7B8AA0;   /* captions and hints only */

  /* House CTA blue. --accent fills, --on-accent sits on it, --accent-hi is the
     text-safe accent. Orange is the logo accent and is graphical only on light. */
  --accent:      #0369A1;
  --on-accent:   #FFFFFF;
  --accent-hi:   #075985;
  --accent-soft: rgba(3, 105, 161, .10);
  --brand:       #1E3A8A;
  --orange:      #F97316;
  --good:        #0E7A4F;
  --warn:        #9A6700;

  /* Powertrain pills — dark tonal on light ground. */
  --pt-petrol: #4A5B72;
  --pt-turbo:  #8A5A00;
  --pt-diesel: #9A3412;
  --pt-hybrid: #0E7490;
  --pt-phev:   #6D28D9;
  --pt-ev:     #047857;

  /* Surfaces that are not simple fills. */
  --topbar-bg:   rgba(246, 247, 249, .92);
  --scrim:       rgba(15, 23, 42, .45);
  --chip-tint:   rgba(15, 23, 42, .04);
  --swatch-ring: rgba(15, 23, 42, .18);
  --shadow:      0 10px 28px rgba(15, 23, 42, .10);

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;

  --r-1: 6px; --r-2: 10px; --r-3: 16px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --bg-art: url('assets/bg-light.svg');

  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --ui:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Dark palette, defined once and applied twice: system preference (unless the
   user pinned light) and the manual toggle. Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B1220; --surface: #111B2E; --surface-2: #16243C; --surface-3: #1D2E4A;
    --border: #22304C; --border-soft: #1A2740;
    --text: #E8EEF7; --text-strong: #FFFFFF; --muted: #93A4BD; --muted-dim: #6B7C96;
    --accent: #0EA5E9; --on-accent: #06131F; --accent-hi: #7DD3FC;
    --accent-soft: rgba(14, 165, 233, .16);
    --brand: #93B4F5; --orange: #FB923C; --good: #34D399; --warn: #FBBF24;
    --pt-petrol: #A9B8CC; --pt-turbo: #FBBF24; --pt-diesel: #FB923C;
    --pt-hybrid: #22D3EE; --pt-phev: #A78BFA; --pt-ev: #34D399;
    --bg-art: url('assets/bg-dark.svg');
    --topbar-bg: rgba(11, 18, 32, .90);
    --scrim: rgba(4, 8, 16, .68);
    --chip-tint: rgba(255, 255, 255, .05);
    --swatch-ring: rgba(255, 255, 255, .22);
    --shadow: 0 12px 32px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1220; --surface: #111B2E; --surface-2: #16243C; --surface-3: #1D2E4A;
  --border: #22304C; --border-soft: #1A2740;
  --text: #E8EEF7; --text-strong: #FFFFFF; --muted: #93A4BD; --muted-dim: #6B7C96;
  --accent: #0EA5E9; --on-accent: #06131F; --accent-hi: #7DD3FC;
  --accent-soft: rgba(14, 165, 233, .16);
  --brand: #93B4F5; --orange: #FB923C; --good: #34D399; --warn: #FBBF24;
  --pt-petrol: #A9B8CC; --pt-turbo: #FBBF24; --pt-diesel: #FB923C;
  --pt-hybrid: #22D3EE; --pt-phev: #A78BFA; --pt-ev: #34D399;
  --bg-art: url('assets/bg-dark.svg');
  --topbar-bg: rgba(11, 18, 32, .90);
  --scrim: rgba(4, 8, 16, .68);
  --chip-tint: rgba(255, 255, 255, .05);
  --swatch-ring: rgba(255, 255, 255, .22);
  --shadow: 0 12px 32px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

/* The scene behind the page: a blueprint elevation in light mode, light trails
   in dark. Fixed so it holds still while the content scrolls over it; cards
   carry solid surfaces, so the art lives only in the page ground between them. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--bg-art) no-repeat top center / cover;
}
@media (prefers-reduced-motion: no-preference) {
  body::before { will-change: transform; }
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  position: relative;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.015em; }

svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

button, select, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: var(--s-2) var(--s-4);
}
.skip:focus { left: var(--s-4); top: var(--s-2); }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- top bar --- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  padding: var(--s-4) var(--s-5) 0;
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  display: block;
}
.brand-actions {
  position: absolute; top: var(--s-3); right: var(--s-5);
  display: flex; align-items: center; gap: var(--s-2);
}

.brand { display: flex; gap: var(--s-3); align-items: baseline; padding: 0 0 var(--s-3); }
.brand .brand-txt { display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; flex-wrap: wrap; }
.brand .mark { width: 28px; height: 28px; color: var(--accent); flex: none; align-self: center; }
.brand h1 { font-family: var(--serif); font-size: 21px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.brand p { margin: 0; font-size: 11.5px; color: var(--muted-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52ch; }

.controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  padding-bottom: var(--s-4);
}

.field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }

.field input, .field select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: 9px var(--s-3);
  min-height: 40px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.field input:hover, .field select:hover { border-color: var(--surface-3); }
.field input:focus, .field select:focus { border-color: var(--accent); background: var(--surface-3); }
.field select { cursor: pointer; appearance: none; padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.budget-input { position: relative; display: flex; align-items: center; }
.budget-input input {
  width: 100%; font-family: var(--mono); font-size: 18px; font-weight: 600;
  letter-spacing: -.02em; padding-right: 62px; min-height: 46px; color: var(--text-strong);
}
.budget-input .unit {
  position: absolute; right: var(--s-3); font-size: 12px; color: var(--muted); pointer-events: none;
}
.hint { font-size: 11px; color: var(--muted-dim); font-family: var(--mono); }

#budgetRange {
  grid-column: 1 / -1;
  width: 100%; height: 3px; margin: 0 0 -1.5px; padding: 0;
  appearance: none; background: var(--border); cursor: pointer;
}
#budgetRange::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent); margin-top: -1px;
}
#budgetRange::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg);
}

/* ------------------------------------------------------------- layout ---- */

main { max-width: 1560px; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-7); }

.section { margin-bottom: var(--s-7); }
.section-head { margin-bottom: var(--s-4); }
/* The house eyebrow (m.AI sales-kit language): a short orange dash before a
   tracked-caps label. Orange is graphical here, never body text on light. */
.section-head p::before, .vh-eyebrow::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 18px; height: 2px; margin-right: 8px; background: var(--orange);
}
.section-head h2 { font-family: var(--serif); font-size: 27px; font-weight: 700; line-height: 1.15; }
.seo-summary h2 { font-family: var(--serif); font-size: 27px; font-weight: 700; line-height: 1.15; }
.section-head p { margin: var(--s-1) 0 0; font-size: 13px; color: var(--muted); max-width: 76ch; }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-5);
}

/* ------------------------------------------------------------ verdict ---- */

.verdict {
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
  position: relative;
  overflow: hidden;
}
.verdict::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 65%);
}
.verdict-head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.verdict-head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.verdict-head .sub { margin: 0; font-size: 13px; color: var(--muted-dim); }

.verdict-body { display: flex; flex-direction: column; gap: var(--s-4); }

/* ------------------------------------------------------ podium ----------- */
/* The showroom: top three as photo cards, reference-style. #1 carries the
   accent border and the orange rank chip; the numbers stay mono. */
.podium {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4); margin-bottom: var(--s-4);
}
.pod {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2); overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.pod:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--surface-3); }
.pod[data-rank="1"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

.pod figure {
  margin: 0; position: relative; aspect-ratio: 16 / 10; max-height: 300px; width: 100%; flex: none;
  background: var(--surface-2); cursor: pointer;
}
/* Absolute, so a portrait-ish source can never stretch the figure past its
   aspect-ratio — with height:100% the third card sat taller than its rank mates. */
.pod figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pod-rank {
  position: absolute; top: var(--s-3); left: var(--s-3);
  padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.pod[data-rank="1"] .pod-rank { background: var(--orange); border-color: var(--orange); color: #221000; }

.pod-body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); flex: 1; }
.pod-name { margin: 0; font-family: var(--serif); font-size: 23px; font-weight: 700; line-height: 1.12; color: var(--text-strong); }
.pod-name span { display: block; font-family: var(--ui); font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 3px; }

.pod-price { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--text-strong); }
.pod-price s { margin-left: 8px; font-size: 12.5px; font-weight: 400; color: var(--muted-dim); }

.pod-specs { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: 0; padding: 0; list-style: none; }
.pod-specs li { font-size: 12px; color: var(--muted); }
.pod-specs li:not(:last-child)::after { content: '·'; margin-left: var(--s-2); color: var(--muted-dim); }

.pod-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4);
  padding-top: var(--s-3); border-top: 1px solid var(--border-soft);
  margin-top: auto;
}
.pod-facts .k { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-dim); }
.pod-facts .v { font-family: var(--mono); font-size: 14px; color: var(--text); }

.pod .btn-ghost { width: 100%; justify-content: center; }

.verdict-why {
  padding: var(--s-4); background: var(--surface);
  border: 1px solid var(--border-soft); border-left: 3px solid var(--accent);
  border-radius: var(--r-2);
  font-size: 13.5px; line-height: 1.65; color: var(--muted); max-width: none;
}
.verdict-why strong { color: var(--text-strong); }

@media (max-width: 980px) { .podium { grid-template-columns: minmax(0, 1fr); } }

.no-fit {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--r-2);
  background: var(--accent-soft); border: 1px solid rgba(226,55,68,.3);
}
.no-fit svg { width: 20px; height: 20px; color: var(--accent-hi); flex: none; margin-top: 2px; }

/* --------------------------------------------------------------- grid ---- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: var(--s-4); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--surface-3); box-shadow: var(--shadow); }
.card[data-fits="false"] { background: var(--surface-2); }
.card[data-rank="1"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

.card-photo { position: relative; aspect-ratio: 16 / 9; background: var(--surface-3); overflow: hidden; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.card:hover .card-photo img { transform: scale(1.045); }
.card-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,18,32,.92) 2%, rgba(11,18,32,.15) 42%, transparent 70%);
}

.card-badges { position: absolute; top: var(--s-3); left: var(--s-3); right: var(--s-3); display: flex; gap: var(--s-2); z-index: 2; }
.badge {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px; backdrop-filter: blur(8px);
  background: rgba(11,18,32,.72); border: 1px solid var(--border); color: var(--muted);
}
.badge.rank { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.badge.over { background: rgba(11,18,32,.8); color: var(--accent-hi); border-color: rgba(226,55,68,.45); }

.card-title { position: absolute; bottom: var(--s-3); left: var(--s-4); right: var(--s-4); z-index: 2; }
.card-title .brand-line { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.card-title h3 { font-size: 19px; font-weight: 600; color: var(--text-strong); }

.card-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }

.card-price { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.card-price .p { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--text-strong); }
.card-price .p small { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 3px; }
.card-price .t { font-size: 11.5px; color: var(--accent-hi); text-align: right; max-width: 46%; }

.fitbar { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.fitbar i { display: block; height: 100%; border-radius: 2px; transition: width .5s var(--ease); }

.card-tagline { font-size: 12.5px; color: var(--muted); margin: 0; }

.minispecs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--border-soft); }
.minispec { text-align: center; }
.minispec .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-dim); }
.minispec .v { font-family: var(--mono); font-size: 13px; color: var(--text); font-weight: 500; }

.credit-note { font-size: 11.5px; color: var(--muted-dim); margin-top: var(--s-3); }

/* -------------------------------------------------------------- radar ---- */

#radar { width: 100%; height: auto; display: block; }

.legend { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.legend button {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 100px;
  padding: 5px 11px; font-size: 12px; color: var(--muted);
  transition: all .18s var(--ease);
}
.legend button:hover { border-color: var(--surface-3); color: var(--text); }
.legend button[aria-pressed="true"] { color: var(--text-strong); background: var(--surface-3); }
.legend button[aria-pressed="false"] { opacity: .42; }
.legend .swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* ---------------------------------------------------------------- tco ---- */

.tco-row { margin-bottom: var(--s-4); }
.tco-row:last-of-type { margin-bottom: 0; }
.tco-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: 5px; font-size: 13px; }
.tco-label .nm { color: var(--text); }
.tco-label .nm em { font-style: normal; color: var(--muted-dim); font-size: 11.5px; }
.tco-label .tot { font-family: var(--mono); font-weight: 600; color: var(--text-strong); }

.tco-bar { display: flex; height: 22px; border-radius: var(--r-1); overflow: hidden; background: var(--surface-2); }
.tco-bar span { display: block; transition: width .55s var(--ease); position: relative; }
.tco-bar span[data-k="dep"]  { background: var(--accent); }
.tco-bar span[data-k="fuel"] { background: #3E7BC4; }
.tco-bar span[data-k="svc"]  { background: #2F8F6E; }

.tco-key { display: flex; gap: var(--s-4); margin: 0 0 var(--s-4); font-size: 11.5px; color: var(--muted); }
.tco-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }

.footnote { font-size: 11.5px; color: var(--muted-dim); margin: var(--s-4) 0 0; }

/* -------------------------------------------------------------- table ---- */

.table-wrap {
  overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-3); background: var(--surface);
}
table { border-collapse: collapse; width: 100%; min-width: 1080px; font-size: 13px; }

thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); padding: var(--s-3);
  text-align: left; font-weight: 600; font-size: 12.5px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
thead th:first-child { position: sticky; left: 0; z-index: 3; }
thead th .th-brand { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-dim); font-weight: 500; }

tbody th {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface); padding: 9px var(--s-3);
  text-align: left; font-weight: 400; color: var(--muted); white-space: nowrap;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border-soft);
}
tbody td {
  padding: 9px var(--s-3); border-bottom: 1px solid var(--border-soft);
  font-family: var(--mono); font-size: 12.5px; white-space: nowrap;
}
tbody tr:hover th, tbody tr:hover td { background: var(--surface-2); }
tbody td.best { color: var(--good); font-weight: 600; }
tbody td.text { font-family: var(--ui); white-space: normal; min-width: 190px; color: var(--muted); }
tbody tr.grouphead th, tbody tr.grouphead td {
  background: var(--surface-2); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted-dim); font-weight: 600; font-family: var(--ui);
}

/* ---------------------------------------------------------- community ---- */

.community { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s-4); }

.cbox { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: var(--s-4); }
.cbox h3 { font-size: 15px; margin-bottom: var(--s-3); display: flex; align-items: center; gap: var(--s-2); }
.cbox h3 i { width: 3px; height: 15px; border-radius: 2px; display: block; }

.quote { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--border-soft); font-size: 13px; }
.quote:first-of-type { border-top: 0; }
.quote .pip { width: 6px; height: 6px; border-radius: 50%; flex: none; margin-top: 7px; }
.quote[data-s="positive"] .pip { background: var(--good); }
.quote[data-s="negative"] .pip { background: var(--accent); }
.quote[data-s="mixed"]    .pip { background: var(--warn); }
.quote p { margin: 0; color: var(--text); }
.quote cite { display: block; margin-top: 3px; font-size: 11px; color: var(--muted-dim); font-style: normal; }

/* --------------------------------------------------------------- foot ---- */

.foot {
  border-top: 1px solid var(--border); padding-top: var(--s-5); margin-top: var(--s-7);
  /* Was --muted-dim, which measures 4.04:1 here and fails AA. The footer carries
     the disclaimer, which is the last thing that should be hard to read. */
  font-size: 12px; color: var(--muted);
}
.foot-cols {
  display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: var(--s-6);
}

/* The disclaimer leads the footer: prices move, scores are a judgement, go and
   drive the thing. It applies to the glossary tab too, so it lives outside both. */
.disclaimer {
  display: flex; gap: var(--s-4); align-items: flex-start;
  margin-bottom: var(--s-6); padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--warn); border-radius: var(--r-2);
}
.disclaimer > svg {
  width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--warn);
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.disclaimer h3 { color: var(--text-strong); font-size: 12px; letter-spacing: .06em; }
.disclaimer ul { display: grid; gap: var(--s-2); }
.disclaimer li {
  margin: 0; padding-left: 14px; position: relative;
  font-size: 12.5px; line-height: 1.65; color: var(--muted); max-width: 100ch;
}
.disclaimer li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--muted-dim);
}
.disclaimer strong { color: var(--text); }

@media (max-width: 720px) {
  .foot-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .disclaimer { flex-direction: column; gap: var(--s-3); }
}
.foot h3 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: var(--s-3); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 5px; }
.foot a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--border); }
.foot a:hover { color: var(--text); }
.foot p { margin: 0 0 var(--s-3); max-width: 92ch; line-height: 1.6; }
.foot strong { color: var(--muted); }

/* --------------------------------------------------------------- chat ---- */

.chat { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 50; }

.chat-toggle {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--accent); color: var(--on-accent); border: 0;
  padding: 12px var(--s-4); border-radius: 100px; font-weight: 600; font-size: 13.5px;
  box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 38%, transparent);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.chat-toggle:hover { transform: translateY(-2px); box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 48%, transparent); }
.chat-toggle svg { width: 17px; height: 17px; }
.chat-toggle .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-left: 3px; }
.chat-toggle .dot[data-ok="true"]  { background: #7CFFC4; }
.chat-toggle .dot[data-ok="false"] { background: #FFC9CD; }

.chat-panel {
  position: absolute; right: 0; bottom: 0;
  width: min(460px, calc(100vw - 32px)); height: min(680px, calc(100vh - 80px));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-3); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98); pointer-events: none;
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.chat[data-open="true"] .chat-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.chat[data-open="true"] .chat-toggle { opacity: 0; pointer-events: none; }

.chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.chat-head strong { font-size: 13.5px; display: block; }
.chat-head select {
  background: transparent; border: 0; padding: 0; font-size: 11px;
  color: var(--muted-dim); font-family: var(--mono); max-width: 220px; cursor: pointer;
}
.chat-head-actions { display: flex; align-items: center; gap: var(--s-3); }

.switch { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); cursor: pointer; }
.switch input { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }

.icon-btn { background: transparent; border: 0; color: var(--muted); padding: 6px; border-radius: var(--r-1); display: flex; align-items: center; justify-content: center; flex: none; }
.icon-btn:hover { color: var(--text); background: var(--surface-3); }
.icon-btn svg { width: 16px; height: 16px; }

.chat-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }

.chat-log > * { flex-shrink: 0; min-width: 0; overflow-wrap: anywhere; }
.chat-panel > :not(.chat-log) { flex-shrink: 0; }

.msg { font-size: 13.5px; line-height: 1.6; max-width: 92%; }
.msg p { margin: 0 0 var(--s-2); }
.msg p:last-child { margin-bottom: 0; }
.msg.user {
  align-self: flex-end; background: var(--accent); color: var(--on-accent);
  padding: 9px var(--s-3); border-radius: var(--r-2) var(--r-2) 3px var(--r-2);
}
.msg.assistant {
  align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border);
  padding: 10px var(--s-3); border-radius: var(--r-2) var(--r-2) var(--r-2) 3px; max-width: 100%;
}
.msg.assistant strong { color: var(--text-strong); }
.msg.assistant code { font-family: var(--mono); font-size: 12px; background: var(--surface-3); padding: 1px 4px; border-radius: 3px; }
.msg.assistant ul { margin: var(--s-2) 0; padding-left: 18px; }
.msg.assistant li { margin-bottom: 3px; }
.msg.error { align-self: stretch; background: var(--accent-soft); border: 1px solid rgba(226,55,68,.35); color: var(--accent-hi); padding: 10px var(--s-3); border-radius: var(--r-2); font-size: 12.5px; }

.tool-note {
  align-self: flex-start; display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--muted-dim); font-family: var(--mono);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  padding: 5px 10px; border-radius: 100px; max-width: 100%;
}
.tool-note svg { width: 12px; height: 12px; flex: none; }
.tool-note .spin { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.sources { align-self: flex-start; font-size: 11.5px; max-width: 100%; }
.sources a { display: block; color: var(--muted); text-decoration: none; padding: 2px 0; }
.sources a:hover { color: var(--accent-hi); }

.cursor { display: inline-block; width: 7px; height: 14px; background: var(--accent-hi); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.chat-suggest { display: flex; gap: 6px; padding: 0 var(--s-4) var(--s-3); flex-wrap: wrap; }
.chat-suggest button {
  font-size: 11.5px; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 100px; padding: 5px 11px;
  transition: all .18s var(--ease);
}
.chat-suggest button:hover { color: var(--text); border-color: var(--surface-3); background: var(--surface-3); }

.chat-input { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border); align-items: flex-end; }
.chat-input textarea {
  flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-2);
  padding: 10px var(--s-3); resize: none; max-height: 130px; font-size: 13.5px; line-height: 1.5;
}
.chat-input textarea:focus { border-color: var(--accent); outline: none; }
.chat-input button {
  background: var(--accent); border: 0; color: var(--on-accent); width: 40px; height: 40px;
  border-radius: var(--r-2); display: flex; align-items: center; justify-content: center; flex: none;
  transition: background .18s var(--ease);
}
.chat-input button:hover { background: var(--accent-hi); }
.chat-input button:disabled { background: var(--surface-3); color: var(--muted-dim); cursor: not-allowed; }
.chat-input button svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }

.chat-foot { margin: 0; padding: 0 var(--s-4) var(--s-3); font-size: 10.5px; color: var(--muted-dim); font-family: var(--mono); }

/* --------------------------------------------------------- responsive --- */

@media (max-width: 1240px) {
  .verdict-alt { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); padding: var(--s-4) 0 0; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1000px) {
  .topbar { grid-template-columns: 1fr; gap: var(--s-3); }
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  main { padding: var(--s-5) var(--s-4) var(--s-7); }
  .topbar { padding: var(--s-3) var(--s-4) 0; }
  .controls { grid-template-columns: 1fr 1fr; }
  .field-budget { grid-column: 1 / -1; }
  .chat { right: var(--s-3); bottom: var(--s-3); }
  .chat-panel { height: min(600px, calc(100vh - 60px)); }
}

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

/* Reasoning-model scratchpad — visible on demand, never mistaken for the answer. */
.thinking {
  align-self: flex-start; max-width: 100%;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-2); font-size: 11.5px; color: var(--muted-dim);
}
.thinking summary {
  cursor: pointer; padding: 6px var(--s-3); font-family: var(--mono);
  list-style: none; user-select: none;
}
.thinking summary::-webkit-details-marker { display: none; }
.thinking summary::before { content: '▸ '; }
.thinking[open] summary::before { content: '▾ '; }
.thinking summary:hover { color: var(--muted); }
.thinking > div {
  padding: 0 var(--s-3) var(--s-3); max-height: 190px; overflow-y: auto;
  white-space: pre-wrap; line-height: 1.5; border-top: 1px solid var(--border-soft);
  margin-top: 2px; padding-top: var(--s-2);
}
.thinking:not([open]) > div { display: none; }

/* ===========================================================================
   IA for 25 cars: toolbar -> dense list / grid -> detail drawer -> compare
   =========================================================================== */

.btn-primary {
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--r-1);
  padding: 9px var(--s-4); font-size: 13px; font-weight: 600;
  transition: background .18s var(--ease);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hi); }
.btn-primary:disabled { background: var(--surface-3); color: var(--muted-dim); cursor: not-allowed; }

.btn-ghost {
  background: transparent; color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-1); padding: 8px var(--s-4); font-size: 12.5px;
  transition: all .18s var(--ease);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-hi); }

.linkbtn {
  background: none; border: 0; padding: 0; color: var(--accent-hi);
  font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px;
}
.linkbtn:hover { color: var(--text-strong); }

/* ------------------------------------------------------------- toolbar --- */

.toolbar {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.tb-row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }

.searchbox { position: relative; flex: 1 1 280px; display: flex; align-items: center; }
.searchbox > svg {
  position: absolute; left: 11px; width: 15px; height: 15px; color: var(--muted-dim); pointer-events: none;
}
.searchbox input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-1); padding: 10px 34px 10px 34px; min-height: 40px; font-size: 13.5px;
  transition: border-color .18s var(--ease);
}
.searchbox input::-webkit-search-cancel-button { display: none; }
.searchbox input:focus { border-color: var(--accent); outline: none; }
.q-clear {
  position: absolute; right: 8px; background: none; border: 0; color: var(--muted-dim);
  display: flex; padding: 4px; border-radius: 50%;
}
.q-clear:hover { color: var(--text); background: var(--surface-3); }
.q-clear svg { width: 13px; height: 13px; }

.tb-switch { white-space: nowrap; }
.tb-field { display: flex; align-items: center; gap: var(--s-2); }
.tb-field label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tb-field select {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-1);
  padding: 8px var(--s-3); min-height: 38px; font-size: 12.5px; cursor: pointer;
}
.tb-field select:focus { border-color: var(--accent); outline: none; }

.viewtoggle { display: flex; border: 1px solid var(--border); border-radius: var(--r-1); overflow: hidden; }
.viewtoggle button {
  display: flex; align-items: center; gap: 6px; background: var(--surface-2);
  border: 0; padding: 9px var(--s-3); font-size: 12px; color: var(--muted);
  transition: all .18s var(--ease);
}
.viewtoggle button svg { width: 14px; height: 14px; }
.viewtoggle button + button { border-left: 1px solid var(--border); }
.viewtoggle button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.viewtoggle button:hover[aria-pressed="false"] { color: var(--text); background: var(--surface-3); }

.filters { gap: var(--s-4); align-items: flex-start; }
.chipgroup { display: flex; gap: 5px; flex-wrap: wrap; }
.chipgroup + .chipgroup { padding-left: var(--s-4); border-left: 1px solid var(--border-soft); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 100px;
  padding: 4px 10px; font-size: 11.5px; color: var(--muted);
  transition: all .16s var(--ease); white-space: nowrap;
}
.chip em { font-style: normal; color: var(--muted-dim); font-family: var(--mono); font-size: 10px; }
.chip:hover { border-color: var(--surface-3); color: var(--text); }
.chip[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi);
}
.chip[aria-pressed="true"] em { color: var(--accent-hi); }

.summary { justify-content: space-between; padding-top: var(--s-1); }
.rc { font-size: 12px; color: var(--muted-dim); font-family: var(--mono); }

/* ---------------------------------------------------------------- list --- */

#results.list { display: flex; flex-direction: column; gap: 5px; }

.row {
  display: grid;
  grid-template-columns: 30px 74px minmax(150px, 1.5fr) 118px minmax(230px, 1.1fr) 92px 20px;
  gap: var(--s-3); align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2);
  padding: 8px var(--s-3); cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.row:hover { border-color: var(--surface-3); background: var(--surface-2); transform: translateX(2px); }
.row:focus-visible { border-color: var(--accent-hi); }
.row[data-fits="false"] { background: var(--surface-2); }

.pick { display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 6px; }
.pick input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.row-thumb { width: 100%; height: 46px; border-radius: var(--r-1); overflow: hidden; background: var(--surface-3); }
.row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.row-name { min-width: 0; }
.rn-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rn-brand { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-dim); }
.row-name strong { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.rn-sub { font-size: 11.5px; color: var(--muted-dim); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.row-price { text-align: right; }
.rp-main { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--text-strong); }
.rp-sub { font-size: 10.5px; color: var(--muted-dim); font-family: var(--mono); }
.rp-sub s { opacity: .7; }

.row-stats { display: flex; gap: var(--s-3); margin: 0; justify-content: flex-end; }
.row-stats > div { text-align: center; min-width: 40px; }
.row-stats dt { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-dim); }
.row-stats dd { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--text); }

.row-score { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.rs-num { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); }
.row-score .fitbar { width: 100%; }

.row-go { width: 16px; height: 16px; color: var(--muted-dim); }
.row:hover .row-go { color: var(--accent-hi); }

/* Grid view reuses the card component. */
#results.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: var(--s-4); }
#results.grid .card { cursor: pointer; }
.pick-card {
  position: absolute; top: var(--s-2); right: var(--s-2); z-index: 3;
  background: rgba(11,18,32,.75); border-radius: var(--r-1); backdrop-filter: blur(6px);
}

.empty {
  text-align: center; padding: var(--s-7) var(--s-4);
  background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-3);
}
.empty svg { width: 30px; height: 30px; color: var(--muted-dim); margin-bottom: var(--s-3); }
.empty h3 { font-size: 16px; margin-bottom: var(--s-2); }
.empty p { color: var(--muted); font-size: 13px; margin: 0 0 var(--s-4); }

/* -------------------------------------------------------------- drawer --- */

.drawer-scrim, .modal-scrim {
  position: fixed; inset: 0; background: var(--scrim);
  backdrop-filter: blur(2px); z-index: 60;
}
.modal-scrim { z-index: 70; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(660px, 100vw);
  background: var(--bg); border-left: 1px solid var(--border);
  z-index: 61; overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform .3s var(--ease);
  padding-bottom: var(--s-7);
}
.drawer.open { transform: none; }

.drawer-close {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 4;
  background: rgba(11,18,32,.8); border: 1px solid var(--border); color: var(--text);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px);
}
.drawer-close:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.drawer-close svg { width: 16px; height: 16px; }

.dr-hero { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: var(--surface-3); }
.dr-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg) 3%, rgba(11,18,32,.35) 45%, transparent 75%);
}
.dr-hero-txt { position: absolute; left: var(--s-5); right: var(--s-5); bottom: var(--s-4); z-index: 2; }
.dr-brand { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.dr-hero-txt h2 { font-family: var(--serif); font-size: 34px; font-weight: 700; color: var(--text-strong); margin: 2px 0 var(--s-2); }
.dr-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.dr-tagline { padding: var(--s-4) var(--s-5) 0; margin: 0; color: var(--muted); font-size: 14px; }

.dr-keyfigs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3);
  padding: var(--s-4) var(--s-5); margin-top: var(--s-3);
  border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft);
}
.dr-keyfigs .k { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-dim); }
.dr-keyfigs .v { display: block; font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--text-strong); margin-top: 2px; }
.dr-keyfigs .v small { font-size: 11px; color: var(--muted); font-weight: 400; }

.dr-sec { padding: var(--s-5) var(--s-5) 0; }
.dr-sec h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 600; margin-bottom: var(--s-3);
  display: flex; align-items: center; gap: var(--s-2);
}
.fitscore { font-family: var(--mono); color: var(--accent-hi); letter-spacing: 0; }
.dr-body { margin: 0 0 var(--s-2); font-size: 13.5px; color: var(--text); line-height: 1.6; }
.dr-note {
  margin: var(--s-3) 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6;
  background: var(--surface); border-left: 2px solid var(--accent); border-radius: 0 var(--r-1) var(--r-1) 0;
  padding: var(--s-3);
}
.dr-note strong { color: var(--text); }

.dr-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 12.5px; }
.dr-table thead th {
  position: static; background: var(--surface-2); padding: 8px var(--s-3);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  text-align: right; white-space: nowrap;
}
.dr-table thead th:first-child { text-align: left; }
.dr-table tbody th {
  position: static; text-align: left; font-weight: 400; color: var(--text);
  padding: 9px var(--s-3); border-bottom: 1px solid var(--border-soft); border-right: 0;
  background: transparent; white-space: normal;
}
.dr-table tbody td {
  text-align: right; font-family: var(--mono); padding: 9px var(--s-3);
  border-bottom: 1px solid var(--border-soft); color: var(--muted); white-space: nowrap;
}
.dr-table .street { color: var(--text-strong); font-weight: 600; }
.dr-table tr.is-pick th, .dr-table tr.is-pick td { background: var(--accent-soft); }
.dr-table tr.is-over { color: var(--muted); }
.dr-table .tag {
  display: inline-block; margin-left: 7px; font-size: 9px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accent-hi); border: 1px solid rgba(226,55,68,.4);
  border-radius: 100px; padding: 1px 6px; vertical-align: middle;
}

.dr-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); margin: 0; }
.dr-specs > div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--s-3);
  padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px;
}
.dr-specs dt { color: var(--muted-dim); flex: none; }
.dr-specs dd { overflow-wrap: anywhere; margin: 0; text-align: right; color: var(--text); font-family: var(--mono); font-size: 12px; }

.dr-scores { display: flex; flex-direction: column; gap: 7px; }
.scorerow { display: grid; grid-template-columns: 130px 1fr 32px; gap: var(--s-3); align-items: center; font-size: 12.5px; }
.scorerow .sl { color: var(--muted); }
.scorerow .sb { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.scorerow .sb i { display: block; height: 100%; border-radius: 3px; }
.scorerow .sv { font-family: var(--mono); text-align: right; color: var(--text); }

.dr-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.dr-list { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.6; }
.dr-list li { margin-bottom: 7px; color: var(--text); }
.dr-list.good li::marker { color: var(--good); }
.dr-list.bad  li::marker { color: var(--accent); }

.tco-bar.big { height: 30px; margin-bottom: var(--s-3); }

.dr-actions { padding: var(--s-5); }
.dr-actions .btn-primary { width: 100%; padding: 12px; }

/* ------------------------------------------------------------- compare --- */

.comparetray {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--s-4); z-index: 45;
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--surface-2); border: 1px solid var(--surface-3);
  border-radius: 100px; padding: 8px 8px 8px var(--s-4); box-shadow: var(--shadow);
  max-width: calc(100vw - 32px);
}
.ct-items { display: flex; gap: 6px; overflow-x: auto; }
.ct-chip {
  display: flex; align-items: center; gap: 6px; flex: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 100px;
  padding: 4px 10px 4px 4px; font-size: 12px; color: var(--text); white-space: nowrap;
}
.ct-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.ct-chip svg { width: 12px; height: 12px; color: var(--muted-dim); }
.ct-chip:hover { border-color: var(--accent); }
.ct-chip:hover svg { color: var(--accent-hi); }
.ct-actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.modal {
  position: fixed; inset: 4vh 3vw; z-index: 71;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-3);
  display: none; flex-direction: column; box-shadow: var(--shadow); overflow: hidden;
}
.modal.open { display: flex; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.modal-head h2 { font-size: 15px; }
.modal-body { flex: 1; overflow: auto; padding: var(--s-4); }
.modal-body .table-wrap { border: 0; }
.cmp-thumb { width: 100%; max-width: 120px; height: 54px; object-fit: cover; border-radius: var(--r-1); display: block; margin-bottom: 6px; }

.legend-note { font-size: 11px; color: var(--muted-dim); align-self: center; margin-left: var(--s-2); }
.tco-label .over { color: var(--accent-hi); }
.tco-row { cursor: pointer; }
.tco-row:hover .tco-label .nm { color: var(--accent-hi); }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 1100px) {
  .row { grid-template-columns: 30px 66px minmax(130px, 1.4fr) 108px 84px 20px; }
  .row-stats { display: none; }
  .dr-two { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .row { grid-template-columns: 28px 72px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .row-thumb { height: 54px; }
  .row-price { grid-column: 2 / -1; text-align: left; border-top: 1px solid var(--border-soft); padding-top: 10px; }
  .rn-sub { white-space: normal; overflow-wrap: anywhere; margin-top: 5px; line-height: 1.6; }
  .rn-top { gap: 4px 7px; overflow-wrap: anywhere; }
  .pick { min-height: 44px; padding: 0; }
  .row-score, .row-go { display: none; }
  .dr-keyfigs { grid-template-columns: repeat(2, 1fr); }
  .dr-specs { grid-template-columns: 1fr; }
  .chipgroup + .chipgroup { padding-left: 0; border-left: 0; }
  .modal { inset: 0; border-radius: 0; }
  .comparetray { left: var(--s-3); right: var(--s-3); transform: none; border-radius: var(--r-3); }
}

/* --- Sticky comparison header ---------------------------------------------
   The table wrapper must be the scroll container, not .modal-body. With
   overflow-x:auto the wrapper already computes overflow-y:auto, but without a
   bounded height it grows to fit the table, so the sticky <thead> has nothing
   to stick within and scrolls away with the modal. Bounding it fixes that. */

.modal-body { overflow: hidden; display: flex; flex-direction: column; }
.modal-body .table-wrap { flex: 1; min-height: 0; overflow: auto; }

#compare-table thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface-2);
  box-shadow: inset 0 -1px 0 var(--border);
  vertical-align: bottom;
}
/* Corner cell sits above both the sticky row and the sticky first column. */
#compare-table thead th:first-child { left: 0; z-index: 6; }
#compare-table tbody th { z-index: 1; }

/* Group headings stay legible under the header while scrolling. */
#compare-table tbody tr.grouphead th,
#compare-table tbody tr.grouphead td {
  position: sticky; top: 96px; z-index: 3;
  background: var(--surface-3);
  box-shadow: inset 0 -1px 0 var(--border);
}
#compare-table tbody tr.grouphead th { z-index: 4; }

/* ------------------------------------------------- language & settings --- */

.brand-txt { min-width: 0; }
.brand-actions { display: flex; gap: 4px; margin-left: auto; align-self: flex-start; }

.langbtn {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  border-radius: 100px; padding: 5px 11px; font-size: 11.5px; white-space: nowrap;
  transition: all .18s var(--ease);
}
.langbtn:hover { color: var(--text); border-color: var(--surface-3); }

.drawer.settings { width: min(560px, 100vw); padding-bottom: var(--s-7); }
.set-head { padding: var(--s-5) var(--s-5) 0; }
.set-head h2 { font-size: 21px; font-weight: 700; }

.langpick { display: flex; gap: var(--s-2); }
.langpick button {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-1); padding: 10px; font-size: 13px; color: var(--muted);
  transition: all .18s var(--ease);
}
.langpick button[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi); font-weight: 600;
}
.langpick button:hover[aria-pressed="false"] { color: var(--text); border-color: var(--surface-3); }

#set-status dd.ok  { color: var(--good); }
#set-status dd.bad { color: var(--accent-hi); }

.set-scope { margin-bottom: var(--s-3); }
.set-scope select { flex: 1; }
.set-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); }

.refresh-log {
  margin-top: var(--s-3); max-height: 220px; overflow-y: auto;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7;
}
.refresh-log:empty { display: none; }
.rl-line { white-space: pre-wrap; word-break: break-word; }
.rl-line.head { color: var(--text-strong); margin-top: 6px; }
.rl-line.dim  { color: var(--muted-dim); }
.rl-line.ok   { color: var(--good); }
.rl-line.bad  { color: var(--accent-hi); }

.rv-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 600; margin: var(--s-4) 0 var(--s-2);
}
.rv-table td, .rv-table th { font-size: 12px; }
.rv-table td:first-child { width: 34px; text-align: left; }
.rv-sources a { display: block; font-size: 11.5px; color: var(--muted); text-decoration: none; padding: 2px 0; }
.rv-sources a:hover { color: var(--accent-hi); }
.dr-body.ok { color: var(--good); }

/* ------------------------------------------------------------- use case --- */

.usecase { display: flex; border: 1px solid var(--border); border-radius: var(--r-1); overflow: hidden; min-height: 40px; }
.usecase button {
  flex: 1; background: var(--surface-2); border: 0; padding: 8px 10px;
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
  transition: all .18s var(--ease);
}
.usecase button + button { border-left: 1px solid var(--border); }
.usecase button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.usecase button:hover[aria-pressed="false"] { color: var(--text); background: var(--surface-3); }
.uc-hint { font-size: 11px; color: var(--muted-dim); margin: 3px 0 0; }

/* --------------------------------------------------------- seo summary --- */
/* Visible, crawlable plain-language summary. Never hidden — hidden keyword
   text is a spam signal and gets pages demoted rather than ranked. */

.seo-summary { max-width: 88ch; }
.seo-summary h2 { font-size: 19px; font-weight: 600; margin-bottom: var(--s-3); }
.seo-summary h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); font-weight: 600; margin: var(--s-5) 0 var(--s-3); }
.seo-summary p { font-size: 13.5px; color: var(--muted); line-height: 1.7; margin: 0 0 var(--s-3); }
.seo-summary strong { color: var(--text); font-weight: 500; }
.seo-faq { margin: 0; }
.seo-faq dt { font-size: 13.5px; color: var(--text-strong); font-weight: 500; margin-top: var(--s-4); }
.seo-faq dd { margin: 5px 0 0; font-size: 13px; color: var(--muted); line-height: 1.7; }

/* Seven controls need more room before they wrap. */
@media (max-width: 1500px) {
  .controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .field-budget { grid-column: span 1; }
}
@media (max-width: 1000px) {
  .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------- access token --- */

.tokenrow { display: flex; gap: var(--s-2); align-items: center; }
.tokenrow input {
  flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-1); padding: 9px var(--s-3); min-height: 38px;
  font-family: var(--mono); font-size: 12.5px;
}
.tokenrow input:focus { border-color: var(--accent); outline: none; }
.dr-body.bad { color: var(--accent-hi); }

/* ==========================================================================
   Mobile: the seven criteria controls filled an entire phone screen and the
   header is sticky, so almost nothing else was visible. They now collapse to
   a one-line summary that expands on tap. Desktop is unchanged.
   ========================================================================== */

/* Collapse is universal now, not a phone concession: after the first search the
   whole criteria block folds to a one-line summary, and the results get the
   screen. The chevron strip brings it back. */
.topbar[data-open="false"] .crit { display: none; }

.crit-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  width: calc(100% + var(--s-5) * 2); margin: 0 calc(var(--s-5) * -1);
  padding: 9px var(--s-5); background: var(--surface-2);
  border: 0; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 12px; text-align: left; cursor: pointer;
}
.crit-toggle:hover { color: var(--text); }
.crit-toggle svg { width: 15px; height: 15px; flex: none; transition: transform .2s var(--ease); }
.topbar[data-open="true"] .crit-toggle svg { transform: rotate(180deg); }
.ct-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-summary b { color: var(--text); font-weight: 500; }

@media (max-width: 860px) {
  .topbar {
    position: sticky; top: 0;
    max-height: 100vh; overflow-y: auto;
    padding-bottom: 0;
  }
  /* Phone: the four criteria columns stack two-up, budget full width. */
  .topbar[data-open="true"] .controls { grid-template-columns: 1fr 1fr; padding-bottom: var(--s-3); }
  .topbar[data-open="true"] .field-budget { grid-column: 1 / -1; }
  /* Long Vietnamese select values ("Khu vực I — Hà Nội / TP.HCM", "Xe công ty
     cân bằng") truncate mid-word in a half-width cell — give selects the row. */
  .topbar[data-open="true"] .field:has(#region),
  .topbar[data-open="true"] .field:has(#usecase),
  .topbar[data-open="true"] .field:has(#preset) { grid-column: 1 / -1; }
  /* Expanded, the panel fills the phone screen. Sticky would pin the results
     out of reach, so it scrolls away while open and re-sticks when closed. */
  .topbar[data-open="true"] { position: static; }

  .crit-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
    width: calc(100% + var(--s-4) * 2); margin: 0 calc(var(--s-4) * -1);
    padding: 9px var(--s-4); background: var(--surface-2);
    border: 0; border-top: 1px solid var(--border);
    color: var(--muted); font-size: 11.5px; text-align: left;
  }
  .crit-toggle svg { width: 15px; height: 15px; flex: none; transition: transform .2s var(--ease); }
  .topbar[data-open="true"] .crit-toggle svg { transform: rotate(180deg); }
  .ct-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ct-summary b { color: var(--text); font-weight: 500; }

  /* The budget figure is the one control worth keeping large on a phone. */
  .budget-input input { font-size: 19px; min-height: 42px; }
  .brand p { display: none; }
  .brand h1 { font-size: 15px; }
  .brand .mark { width: 26px; height: 26px; }
  .brand { padding-bottom: var(--s-2); }
  .uc-hint { display: none; }
}

@media (max-width: 860px) {
  .topbar[data-open="true"] .uc-hint { display: block; grid-column: 1 / -1; }
}

/* Mobile overflow: flex children default to min-width:auto and refuse to
   shrink below their content, so .brand pushed to 420px in a 375px viewport
   and clipped the language button. */
@media (max-width: 860px) {
  .topbar { overflow-x: hidden; }
  .brand { min-width: 0; flex-wrap: nowrap; }
  .brand-txt { min-width: 0; flex: 1; }
  .brand h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-actions { flex: none; }
  .langbtn { padding: 5px 9px; font-size: 11px; }

  /* Full-bleed strip. width:auto is NOT the fix here — on a <button> auto
     means max-content, so the long Vietnamese summary blew the bar past the
     viewport. A definite calc() width lets the flex summary shrink+ellipsize. */
  .crit-toggle {
    width: calc(100% + var(--s-4) * 2); margin: 0 calc(var(--s-4) * -1);
    box-sizing: border-box; padding-left: var(--s-4); padding-right: var(--s-4);
  }
  .controls, .field, .field-budget { min-width: 0; }
  .budget-input input { width: 100%; box-sizing: border-box; }
}

/* A `1fr` grid track has an automatic min-content floor, so the non-wrapping
   brand row forced the column to 420px inside a 343px space. minmax(0,1fr)
   removes that floor and lets the title truncate instead. */
@media (max-width: 1000px) {
  .topbar { grid-template-columns: minmax(0, 1fr); }
}

/* Audit trail for scores changed after the data review. */
.scorerow .revd { color: var(--accent); font-weight: 700; margin-left: 2px; cursor: help; }
.snote { margin: -2px 0 8px; font-size: 12px; }
.snote summary { color: var(--muted); cursor: pointer; padding: 2px 0; }
.snote summary:hover { color: var(--text); }
.snote p { color: var(--muted); line-height: 1.55; margin: 4px 0 0;
           padding-left: 10px; border-left: 2px solid var(--border-soft); }

/* ---------------------------------------------- what "budget" means ------ */
/* Sits in the sticky header between the criteria and the budget slider, so it
   reads as part of the budget control rather than as page content. Collapsed it
   is one advisory line carrying the correction itself, so the misreading is
   headed off without expanding; the breakdown is the detail. */
/* Direct child of the .topbar grid (brand | controls), so it must be told to
   span both columns — otherwise it lands in the narrow brand column. */
.budget-note { grid-column: 1 / -1; margin: 0 0 var(--s-3); }

.budget-note details {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-2);
}

.budget-note summary {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 44px;                       /* touch target */
  padding: var(--s-2) var(--s-4);
  cursor: pointer; list-style: none;
  font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
.budget-note summary::-webkit-details-marker { display: none; }
.budget-note summary:hover { color: var(--text); }
.budget-note summary:focus-visible {
  outline: 2px solid var(--accent-hi); outline-offset: -2px; border-radius: var(--r-2);
}
.budget-note .bn-lede strong,
.budget-note .bn-lede-sm strong { color: var(--text); font-weight: 600; }
.bn-lede-sm { display: none; }

.bn-icon, .bn-chev {
  flex: none; width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.bn-icon  { color: var(--accent-hi); }
.bn-cue {
  flex: none; margin-left: auto; font-size: 12px; color: var(--accent-hi);
  white-space: nowrap; text-decoration: underline; text-underline-offset: 3px;
}
.budget-note details[open] .bn-cue { display: none; }
.bn-chev  { margin-left: var(--s-2); transition: transform .2s var(--ease); }
.budget-note details:not([open]) .bn-chev { margin-left: 0; }
.budget-note details[open] .bn-chev { transform: rotate(180deg); }

.bn-body { padding: 0 var(--s-4) var(--s-4); border-top: 1px solid var(--border-soft); }
.bn-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-4) var(--s-5); margin-top: var(--s-4);
}
.bn-col h3 {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 var(--s-2);
}
.bn-yes h3 { color: var(--good); }
.bn-no  h3 { color: var(--accent-hi); }

.bn-col ul { margin: 0; padding: 0; list-style: none; }
.bn-col li {
  position: relative; padding-left: 18px; margin-bottom: var(--s-2);
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.bn-col li::before {
  position: absolute; left: 0; top: 0; font-weight: 700;
}
.bn-yes li::before { content: '+'; color: var(--good); }
.bn-no  li::before { content: '−'; color: var(--accent-hi); }
.bn-col li strong { color: var(--text); font-weight: 600; }

.bn-why {
  margin: var(--s-4) 0 0; padding-top: var(--s-3);
  border-top: 1px solid var(--border-soft);
  font-size: 13px; line-height: 1.65; color: var(--muted); max-width: 92ch;
}
.bn-why strong { color: var(--text); font-weight: 600; }

@media (max-width: 720px) {
  .budget-note { margin: 0 0 var(--s-3); }
  .bn-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  /* Too narrow for the text cue as well — the chevron carries the affordance,
     and icon + line stay on one row instead of the icon taking a row alone. */
  .budget-note summary { align-items: flex-start; padding: var(--s-3); flex-wrap: nowrap; }
  .bn-lede { display: none; }
  .bn-lede-sm { display: block; flex: 1 1 auto; min-width: 0; }
  .bn-cue { display: none; }
  .bn-icon, .bn-chev { margin-top: 1px; }
  .bn-chev { margin-left: var(--s-2); }
  .bn-body { padding: 0 var(--s-3) var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  .bn-chev { transition: none; }
}

/* Expanded, this takes the sticky header to ~77% of the viewport, which would
   pin the results out of reach while it is open. Rather than cap the text and
   add an inner scrollbar, stop the header sticking for as long as it is open —
   it then scrolls away like normal content and re-sticks when closed. */
.topbar:has(.budget-note details[open]) { position: static; }

/* --------------------------------------------------- theme toggle -------- */
.themebtn svg {
  width: 16px; height: 16px; display: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.themebtn[data-mode="light"]  .th-light  { display: block; }
.themebtn[data-mode="dark"]   .th-dark   { display: block; }
.themebtn[data-mode="system"] .th-system { display: block; }

/* ------------------------------------------------- taste criteria -------- */
/* These constrain the recommendation, so they sit with the criteria rather than
   with the browsing filters under the verdict. One category per row, with the
   labels in a fixed column so the three rows read as a set rather than as three
   unrelated strips. */
.panel-lower {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: var(--s-5); align-items: start;
  padding: 0 0 var(--s-4);
}
.prefs { display: grid; gap: var(--s-2); min-width: 0; }

/* Running-cost assumptions, grouped so three small numbers read as one idea. */
.assumptions {
  border: 1px solid var(--border-soft); border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4) var(--s-4); background: var(--surface);
}
.asm-head {
  display: block; margin-bottom: var(--s-3);
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.asm-head::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 14px; height: 2px; margin-right: 7px; background: var(--orange);
}
.asm-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.asm-field label { font-size: 10px; letter-spacing: .05em; }
/* A two-line label (ELECTRIC ₫/KWH) must not push its input out of line with
   its neighbours — inputs bottom-align across the trio. */
.asm-field { display: flex; flex-direction: column; }
.asm-field input { font-family: var(--mono); font-size: 13.5px; min-height: 36px; padding: 6px var(--s-2); width: 100%; margin-top: auto; }

.pref-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  align-items: start; gap: var(--s-4);
}
.pref-label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  padding-top: 8px;                 /* optical alignment with the first chip */
  white-space: nowrap;
}
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); min-width: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 4px 11px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: 12.5px; cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--surface-3); }
.chip:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.chip.on {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); font-weight: 600;
}
.chip-n { font-size: 10.5px; color: var(--muted-dim); font-family: var(--mono); }
.chip.on .chip-n { color: var(--on-accent); opacity: .75; }

.pref-clear {
  padding: 4px 10px; min-height: 30px;
  border: 0; background: none; color: var(--accent-hi);
  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
}
.pref-clear:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

@media (max-width: 860px) {
  .topbar[data-open="false"] .prefs { display: none; }
  /* This override must live AFTER the base .panel-lower two-column rule —
     an earlier copy of it was silently dead and the 300px assumptions panel
     landed on top of the seat chips on phones. */
  .panel-lower { grid-template-columns: minmax(0, 1fr); }
  .topbar[data-open="false"] .assumptions { display: none; }
  /* Three columns at 375px leave ~100px each; tighter gap and tracking keep
     the two-word labels (DIEN d/KWH) on one line beside the info chip. */
  .asm-fields { gap: var(--s-2); }
  .asm-field label { letter-spacing: .02em; }
  .asm-field .field-head { gap: 4px; }
  .pref-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .pref-label { padding-top: 0; }
  .chip { min-height: 44px; padding: 8px 14px; font-size: 13.5px; }
  .pref-clear { min-height: 44px; justify-self: start; }
}

/* ------------------------------------------------------------- tabs ------ */
.tabs {
  display: flex; gap: var(--s-1);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}
.tab {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-4);
  border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--muted); font: inherit; font-size: 14px; cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.tab svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.tab:hover { color: var(--text); }
.tab:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
.tab.on { color: var(--text-strong); border-bottom-color: var(--accent); font-weight: 500; }

#tab-compare:focus, #tab-glossary:focus { outline: none; }

/* ---------------------------------------------------------- glossary ----- */
.glossary { max-width: 92ch; }

.gloss-jump {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--border-soft);
}
.gloss-jump a {
  min-height: 32px; display: inline-flex; align-items: center;
  padding: 4px 11px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font-size: 12.5px; text-decoration: none;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.gloss-jump a:hover { color: var(--text); border-color: var(--surface-3); }

.gloss-group { margin-bottom: var(--s-7); scroll-margin-top: 90px; }
.gloss-group h3 { font-family: var(--serif); font-size: 25px; font-weight: 700; margin: 0 0 var(--s-2); }
.gloss-blurb {
  margin: 0 0 var(--s-5); font-size: 13.5px; line-height: 1.65; color: var(--muted);
  padding-left: var(--s-3); border-left: 2px solid var(--accent);
}
.gloss-group dl { margin: 0; }

.gloss-term {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border-soft);
  display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 1fr); gap: var(--s-5);
}
.gloss-term dt { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.gloss-alt {
  display: block; margin-top: 3px;
  font-size: 12px; font-weight: 400; font-style: italic; color: var(--muted-dim);
}
.gloss-term dd {
  margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--muted);
}

@media (max-width: 720px) {
  .tab { padding: 0 var(--s-3); font-size: 13.5px; }
  .gloss-term { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .gloss-jump a { min-height: 40px; }
}

/* Reading the glossary, the car-selection controls are irrelevant — the header
   keeps only the brand, language and settings. */
body[data-tab="glossary"] #crit,
body[data-tab="glossary"] .crit-toggle,
body[data-tab="glossary"] #comparetray { display: none; }
body[data-tab="glossary"] .topbar { padding-bottom: var(--s-3); }

/* ------------------------------------------------- powertrain tags ------- */
/* Colour sorts at a glance; the label carries the meaning. Never colour alone.
   Each hue is a light tonal variant for dark mode, not a saturated brand colour,
   and every text/background pair below clears 4.5:1 on --surface. */
.pt-tag {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; vertical-align: middle;
}
.pt-tag::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; margin-right: 5px; flex: none;
}
.pt-tag[data-pt="petrol"] { color: var(--pt-petrol); background: color-mix(in srgb, var(--pt-petrol) 12%, transparent); }
.pt-tag[data-pt="turbo"]  { color: var(--pt-turbo);  background: color-mix(in srgb, var(--pt-turbo) 12%, transparent); }
.pt-tag[data-pt="diesel"] { color: var(--pt-diesel); background: color-mix(in srgb, var(--pt-diesel) 12%, transparent); }
.pt-tag[data-pt="hybrid"] { color: var(--pt-hybrid); background: color-mix(in srgb, var(--pt-hybrid) 12%, transparent); }
.pt-tag[data-pt="phev"]   { color: var(--pt-phev);   background: color-mix(in srgb, var(--pt-phev) 12%, transparent); }
.pt-tag[data-pt="ev"]     { color: var(--pt-ev);     background: color-mix(in srgb, var(--pt-ev) 12%, transparent); }

/* The drawer chips sit on a photo, so they need a solid backing. */
.dr-chips .pt-tag { padding: 3px 10px; font-size: 11px; background-color: rgba(11, 18, 32, .72); }

/* Match the filter chips to the same palette, so the control and the data agree. */
#pref-energy .chip.on[data-pt="turbo"]  { background: var(--pt-turbo);  border-color: var(--pt-turbo); }
#pref-energy .chip.on[data-pt="diesel"] { background: var(--pt-diesel); border-color: var(--pt-diesel); }
#pref-energy .chip.on[data-pt="hybrid"] { background: var(--pt-hybrid); border-color: var(--pt-hybrid); }
#pref-energy .chip.on[data-pt="phev"]   { background: var(--pt-phev);   border-color: var(--pt-phev); }
#pref-energy .chip.on[data-pt="ev"]     { background: var(--pt-ev);     border-color: var(--pt-ev); }
#pref-energy .chip.on[data-pt] { color: var(--surface); }
#pref-energy .chip.on[data-pt] .chip-n { color: var(--surface); opacity: .8; }

/* ------------------------------------------------------- paint swatches -- */
.swatches {
  list-style: none; margin: 0 0 var(--s-3); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3);
}
.swatches li { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.sw {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  /* A ring, because white-on-dark and black-on-dark both vanish without one. */
  box-shadow: inset 0 0 0 1px var(--swatch-ring), 0 1px 3px rgba(0, 0, 0, .35);
}
.sw-name { font-size: 12.5px; color: var(--muted); line-height: 1.35; min-width: 0; }
.sw-plus {
  display: block; font-size: 11px; font-weight: 600; color: var(--warn);
}

/* The model picker is plumbing, not product — the server chooses. */
#model-select { display: none; }

/* --------------------------------------------------- advisor warm-up ----- */
/* The model is serverless and scales to zero, so the first question waits for a
   GPU worker. This turns that silence into a visible state. */
.chat-status {
  margin: var(--s-2) 0; padding: var(--s-3);
  border-radius: var(--r-1); border-left: 2px solid var(--muted-dim);
  background: var(--surface-2);
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.chat-status[data-state="waking"] { border-left-color: var(--warn); }
.chat-status[data-state="waking"]::after {
  content: ''; display: inline-block; vertical-align: middle;
  width: 9px; height: 9px; margin-left: 8px; border-radius: 50%;
  border: 2px solid var(--warn); border-right-color: transparent;
  animation: spin .8s linear infinite;
}
.chat-status[data-state="ready"] { border-left-color: var(--good); color: var(--good); }
.chat-status[data-state="bad"]   { border-left-color: var(--accent); color: var(--accent-hi); }

/* @keyframes spin is already defined above for the chat send button. */
@media (prefers-reduced-motion: reduce) {
  .chat-status[data-state="waking"]::after { animation: none; opacity: .6; }
}

/* ------------------------------------------------- advisor, locked ------- */
/* The button is always offered; without a token the panel says why it cannot
   answer yet and points at the one place that fixes it. */
.chat-locked {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-5); margin: var(--s-4);
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: var(--r-2);
}
.chat-locked > svg {
  width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--accent-hi);
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.chat-locked strong { display: block; color: var(--text-strong); font-size: 14px; }
.chat-locked p {
  margin: var(--s-2) 0 var(--s-4);
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
}
.chat-locked .btn-primary { min-height: 40px; }

/* These three set display:flex, which beats the hidden attribute's UA
   display:none. Without this the locked panel appeared *above* a fully working
   greeting, suggestion chips and input box. */
/* (covered by the global [hidden] rule at the top of this file) */

/* ------------------------------------------------- budget slider scale --- */
/* A 300-3,500 track with no scale is unreadable — you cannot tell 900 from
   1,400 by eye. The marks give the handle something to mean. */
.range-wrap { grid-column: 1 / -1; position: relative; padding-bottom: 18px; }
.range-marks { position: relative; height: 14px; margin-top: 6px; }
.range-marks .rm {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 10px; font-family: var(--mono); color: var(--muted-dim);
  white-space: nowrap; pointer-events: none;
}
.range-marks .rm::before {
  content: ''; position: absolute; left: 50%; top: -6px;
  width: 1px; height: 4px; background: var(--border);
}
/* First and last labels would hang off the edge of the track. */
.range-marks .rm:first-child { transform: none; }
.range-marks .rm:last-child  { transform: translateX(-100%); }

@media (max-width: 720px) {
  /* Too narrow for seven labels — show every other one. */
  .range-marks .rm:nth-child(even) { display: none; }
}

/* ------------------------------------------------------ field help ------- */
/* One "i" per control. Hover shows it for a mouse; focus shows it for a
   keyboard and for a tap, because hover alone excludes both. */
/* Label and its help icon on one row. The row is also the tooltip's anchor,
   which is why it is the positioned element rather than the 15px button. */
.field-head { position: relative; display: flex; align-items: center; gap: 6px; }

.info {
  position: static;
  width: 15px; height: 15px; padding: 0; flex: none;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface-2); color: var(--muted);
  font: 600 9.5px/1 var(--ui); cursor: help;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.info:hover, .info:focus-visible { color: var(--accent-hi); border-color: var(--accent); }
.info:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

.tip {
  position: absolute; top: calc(100% + 9px); left: -8px; z-index: 60;
  width: 420px; max-width: min(420px, calc(100vw - 32px));
  padding: var(--s-4);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-2); box-shadow: var(--shadow);
  text-align: left; text-transform: none; letter-spacing: normal;
  font-weight: 400; font-size: 12.5px; line-height: 1.6; color: var(--muted);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s var(--ease), transform .14s var(--ease), visibility .14s;
  cursor: default;
}
.tip[data-side="right"] { left: auto; right: -8px; }
.info:hover .tip, .info:focus-visible .tip, .info:focus-within .tip {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* The little arrow, so it reads as attached to the icon rather than floating. */
.tip::before {
  content: ''; position: absolute; top: -5px; left: 10px;
  width: 8px; height: 8px; background: var(--surface-2);
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.tip[data-side="right"]::before { left: auto; right: 10px; }

.tip b {
  display: block; margin-bottom: var(--s-2);
  color: var(--text-strong); font-size: 13px; font-weight: 600;
}
.tip p { margin: 0 0 var(--s-2); }
.tip p:last-child { margin-bottom: 0; }
.tip p b { display: inline; margin: 0; font-size: inherit; color: var(--text); }
.tip u {
  display: block; margin-bottom: 2px; text-decoration: none;
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent-hi);
}

@media (max-width: 720px) {
  .info { width: 24px; height: 24px; font-size: 11px; }
  /* position:fixed does not escape .topbar — its backdrop-filter makes the bar a
     containing block, so a fixed tip anchors to the bar and overflows the screen.
     Anchor to the field instead, which is full width in the collapsed panel. */
  .tip { left: 0; right: auto; width: 100%; max-width: none; }
  .tip[data-side="right"] { left: 0; right: auto; }
  .tip::before { left: 10px; right: auto; }
}

/* --------------------------------------------------------- search -------- */
.pref-action {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--s-4);
  padding-top: var(--s-2);
}
.btn-search {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 42px; padding: 0 var(--s-5);
  border: 0; border-radius: var(--r-1);
  background: var(--accent); color: var(--on-accent);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
}
.btn-search:hover { background: var(--accent-hi); }
.btn-search:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.btn-search svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Results on screen no longer match the criteria — draw the eye back here. */
.btn-search[data-stale="true"] { box-shadow: 0 0 0 3px var(--accent-soft); }
.search-hint { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
/* Zero results: name the colliding filters, each removable in place. */
.search-hint .zero-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent-soft);
  color: var(--accent-hi); font: inherit; font-size: 11.5px; font-weight: 600;
}
.search-hint .zero-pill:hover { background: var(--accent); color: var(--on-accent); }

/* ---------------------------------------------------- pre-search --------- */
.prestate {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-6); margin-bottom: var(--s-6);
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--r-3);
}
.prestate > svg {
  width: 24px; height: 24px; flex: none; margin-top: 2px; color: var(--muted-dim);
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.prestate strong { display: block; font-family: var(--serif); font-size: 23px; font-weight: 700; color: var(--text-strong); }
.prestate p { margin: var(--s-2) 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 70ch; }

@media (max-width: 720px) {
  .pref-action { flex-direction: column; align-items: stretch; }
  .btn-search { min-height: 46px; justify-content: center; }
}

/* ------------------------------------------------- safety features ------- */
/* Tri-state on purpose: a wrong "Yes" on AEB is worse than an honest dash. */
.sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-5); }
.sf-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 7px 0; border-bottom: 1px solid var(--border-soft);
  font-size: 13px; color: var(--muted);
}
.sf-row > span > small { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); }
.sf {
  flex: none; min-width: 58px; text-align: center;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; font-style: normal;
}
.sf.yes { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.sf.no  { background: color-mix(in srgb, var(--accent) 0%, transparent); color: var(--muted-dim); border: 1px solid var(--border); }
.sf.top { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.sf.unk { color: var(--muted-dim); }
@media (max-width: 720px) { .sf-grid { grid-template-columns: 1fr; } }

.foot-stamp { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin: 0 0 var(--s-3); }

/* Header controls and readable supporting text. The scoped selectors also beat
   the compact rules in drive.css / racer.css, which load after this file. */
.app-frame > .topbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px;
}
.app-frame > .topbar > .brand { grid-column: 1; grid-row: 1; padding-right: 0; }
.app-frame > .topbar > .brand-actions {
  grid-column: 2; grid-row: 1; position: static; align-self: center;
  display: flex; align-items: center; gap: 8px; margin: 0;
}
.app-frame > .topbar > :is(.drive-hero, .crit, .crit-toggle) { grid-column: 1 / -1; min-width: 0; }
.topbar .brand-actions > button {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px;
  width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text); line-height: 1;
}
.topbar .brand-actions > button:hover { background: var(--surface-2); border-color: var(--muted); }
.topbar .brand-actions > button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.topbar .brand-actions > button > svg { width: 20px; height: 20px; flex: none; }
#lang-label { display: flex; align-items: center; justify-content: center; }
#lang-label img { display: block; width: 28px; height: 20px; object-fit: contain; }
@media (max-width: 760px) {
  .app-frame > .topbar { column-gap: 12px; }
  .app-frame > .topbar > .brand-actions { gap: 6px; }
  .topbar .brand-home { font-size: clamp(20px, calc(10vw - 12px), 32px); letter-spacing: -1px; gap: 5px; }
}
@media (max-width: 360px) {
  .app-frame > .topbar { column-gap: 6px; }
}

.topbar .field label, .topbar .pref-label,
.topbar .field input:not(#budget), .topbar .field select,
.topbar .usecase button, .topbar .chip { font-size: 13px; }
.topbar :is(.criteria-note, .budget-caption, .budget-shortcuts, .search-hint),
.topbar #budget-hint, .topbar .budget-shortcuts :is(button, span),
.topbar .driving-options summary { font-size: 12px; line-height: 1.6; }
.app-frame :is(.home-freshness, .pod-price-note, .price-proof, .rating-note,
  .rating-pending, .catalogue-status, .footnote),
.app-frame .catalogue-price small,
.app-frame .price-pair dt, .app-frame .row-price .price-pair dt,
.app-frame :is(.pod-facts .k, .minispec .k, .row-stats dt),
#drawer .dr-keyfigs .k, #drawer .sf {
  font-size: 12px; line-height: 1.6;
}
.app-frame :is(.pod-facts .k, .minispec .k, .row-stats dt, .footnote),
#drawer .dr-keyfigs .k, #drawer :is(.sf.no, .sf.unk) { color: var(--muted); }
:root:not([data-drive='night']) .pod[data-rank='1'] .pod-crown { color: #80601f; }