/* ============================================================
   VROOM — "Night Garage" showroom theme (Increment 2)
   A dark studio surface, instrument-grade type, and a rev-counter
   score gauge. Layered last so it retones the finca token base and
   restyles the signature components. Everything else inherits.
   ============================================================ */

:root {
  /* --- Surfaces: cool near-black studio, raised graphite panels --- */
  --paper: #0E0F12;
  --paper-deep: #0A0B0D;
  --bone: #F1ECE4;            /* warm off-white — stays the light foreground */
  --linen: #191C21;           /* muted media backdrop */
  --rule: #2B2F37;
  --rule-soft: #23272E;

  /* --- Ink flips to light on dark --- */
  --ink: #F2EEE7;
  --ink-soft: #A7A29B;
  --ink-faint: #8B8680;       /* clears AA on the near-black surface */

  /* Charcoal surface range (was "forest") */
  --forest: #16181D;
  --forest-deep: #0E0F12;
  --forest-mid: #2B2F37;

  /* Heat accent — the single hot colour (redline / CTA / active) */
  --magenta: #FF5A1F;
  --magenta-deep: #E8480F;
  --blue: #FF5A1F;
  --blue-deep: #FF6A33;
  --blue-wash: rgba(255, 90, 31, 0.15);

  /* Supporting neutrals remapped to steel */
  --butter: #262A31;
  --butter-deep: #2F343C;
  --clay: #8B8680;
  --clay-deep: #A7A29B;
  --clay-light: #3A3F48;

  /* --- Vroom component aliases (override the light finca refresh) --- */
  --vroom-canvas: #0E0F12;
  --vroom-surface: #16181D;
  --vroom-surface-muted: #1E2127;
  --vroom-ink: #F2EEE7;
  --vroom-muted: #A7A29B;
  --vroom-accent: #FF5A1F;
  --vroom-accent-soft: rgba(255, 90, 31, 0.16);
  --on-accent: #160C05;       /* near-black text on the bright heat accent — AA (~5.9:1) */
  --vroom-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 6px 18px rgba(0, 0, 0, 0.45);
  --vroom-shadow-md: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 42px rgba(0, 0, 0, 0.55);

  /* --- Studio & gauge --- */
  --studio-sweep: radial-gradient(120% 92% at 50% 8%, #2A2F38 0%, #191C22 46%, #0C0D10 100%);
  --gauge-track: #2A2F37;
  --gauge-cool: #7E8894;      /* low scores — cool steel */
  --gauge-warm: #E8B04A;      /* mid — amber */
  --gauge-hot: #FF5A1F;       /* redline — Best of Vroom (88+) */

  /* --- Type: technical grotesk + mono telemetry --- */
  --font-display: "Archivo", system-ui, -apple-system, sans-serif;
  --font-caps: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --shadow-poster: 0 24px 60px -30px rgba(0, 0, 0, 0.8), 0 6px 16px -8px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 18px 40px -26px rgba(0, 0, 0, 0.7), 0 3px 8px -4px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 34px 70px -30px rgba(0, 0, 0, 0.85), 0 10px 22px -12px rgba(0, 0, 0, 0.6);
}

/* Animatable gauge fill */
@property --pct { syntax: "<number>"; inherits: false; initial-value: 0; }

html, body { background: var(--vroom-canvas); color: var(--vroom-ink); }
body {
  background:
    radial-gradient(80% 45% at 50% -8%, rgba(255, 90, 31, 0.06), transparent 60%),
    var(--vroom-canvas);
}
::selection { background: rgba(255, 90, 31, 0.32); color: #fff; }

/* --- Type application --- */
body { font-family: var(--font-body); letter-spacing: -0.01em; }
h1, h2, h3, .wordmark small, .picker-title, #picker-title {
  font-family: var(--font-display);
  letter-spacing: var(--track-tight);
}
#picker-title, .finder-shell__intro h1 { font-weight: 800; text-transform: none; }
#picker-title em { font-style: normal; color: var(--vroom-accent); }
.eyebrow, .filter-bar__label, .body-shape-picker legend, .slider-card legend,
.slider-deck__heading h2 { font-family: var(--font-caps); text-transform: uppercase; letter-spacing: var(--track-wider); }

/* Numbers & data as telemetry */
.price-chip, .card-stat strong, .detail-price, .detail-modelyear strong,
.detail-stats strong, .grade-bars strong, #result-count, .range-scale span,
.slider-card__value output, .slider-note output, .year-select select,
.saved-count, .compare-tray__count { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* --- Header --- */
.site-header { background: color-mix(in srgb, var(--vroom-canvas) 82%, transparent); border-bottom: 1px solid var(--rule-soft); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.wordmark, .wordmark small { color: var(--vroom-ink); }
.logo-accent { color: var(--vroom-accent); }
.header-nav__link { color: var(--vroom-ink); }
.header-nav__link--best { color: var(--vroom-accent); }
.icon-button { background: var(--vroom-surface); border-color: var(--rule); color: var(--vroom-ink); }

/* --- Finder console --- */
.finder-shell { background: transparent; }
.global-search { background: var(--vroom-surface); border: 1px solid var(--rule); border-radius: var(--vroom-radius-md); }
.global-search:focus-within { border-color: var(--vroom-accent); box-shadow: 0 0 0 3px var(--vroom-accent-soft); }
.global-search input { color: var(--vroom-ink); }
.global-search input::placeholder { color: var(--ink-faint); }
.search-glyph { color: var(--ink-soft); }
.search-submit { background: var(--vroom-accent); color: var(--on-accent); border-radius: var(--vroom-radius-sm); }

.finder-shell,
.slider-deck,
.chiprail { background: transparent; }
.slider-deck__grid > .slider-card { background: var(--vroom-surface); border: 1px solid var(--rule-soft); border-radius: var(--vroom-radius-md); }
.chiprail { border-block: 1px solid var(--rule-soft); background: color-mix(in srgb, var(--vroom-surface) 40%, transparent); }

/* Body-shape tiles — backlit, line art inverted to read on dark */
.body-shape-option { background: var(--vroom-surface); border: 1px solid var(--rule-soft); border-radius: var(--vroom-radius-sm); color: var(--vroom-ink); }
.body-shape-option__art img { filter: invert(0.92) brightness(1.15); opacity: 0.9; }
.body-shape-option:hover { border-color: var(--rule); background: var(--vroom-surface-muted); }
.body-shape-option[aria-pressed="true"] { border-color: var(--vroom-accent); background: var(--vroom-accent-soft); }
.body-shape-option[aria-pressed="true"] .body-shape-option__art img { filter: invert(0.92) brightness(1.2) sepia(1) saturate(6) hue-rotate(-12deg); opacity: 1; }

.filter-chip, .filter-bar__link { background: var(--vroom-surface); border: 1px solid var(--rule); color: var(--vroom-ink); }
.filter-chip[aria-pressed="true"], .filter-chip.is-active { background: var(--vroom-accent); color: var(--on-accent); border-color: var(--vroom-accent); }
.filter-chip--best { color: var(--vroom-accent); border-color: color-mix(in srgb, var(--vroom-accent) 40%, var(--rule)); }
.filter-chip--best[aria-pressed="true"] { color: var(--on-accent); }

/* Sliders as precision faders */
.range-track { background: var(--gauge-track); }
.select-wrap select, .field-label select, #sort-select {
  background: var(--vroom-surface); color: var(--vroom-ink); border: 1px solid var(--rule);
  border-radius: var(--vroom-radius-sm); font-family: var(--font-mono);
}

/* --- Results toolbar --- */
.results-toolbar h2 { font-family: var(--font-display); }
#result-count { color: var(--vroom-accent); }

/* --- Cars: dark panel + studio float --- */
.car-card { background: var(--vroom-surface); border: 1px solid var(--rule-soft); border-radius: var(--vroom-radius-md); box-shadow: var(--vroom-shadow-sm); }
.car-card:hover, .car-card:focus-within { border-color: var(--rule); box-shadow: var(--vroom-shadow-md); }
.car-card__media, .car-media { background: var(--studio-sweep); border-bottom: 1px solid var(--rule-soft); }
.car-card__media::after, .car-media::after { content: none; }
.car-card__media.is-render { background: var(--studio-sweep); }
.car-card__media.is-render img { padding: 6% 8% 9%; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.55)); }
.car-card__body { background: var(--vroom-surface); }
.car-card__body h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--track-tight); color: var(--vroom-ink); }
.card-verdict { color: var(--ink-soft); }
.card-stat span { color: var(--ink-faint); }
.card-stat i { background: var(--gauge-track); }
.card-stat i b { background: var(--vroom-accent); }
.price-chip, .car-card__price { background: rgba(10, 11, 13, 0.7); color: var(--bone); border: 1px solid var(--rule); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.car-card__credit { color: var(--ink-faint); }
.car-card__credit a { color: var(--ink-soft); }
.tag, .car-card__tag { background: var(--vroom-surface-muted); color: var(--ink-soft); }
.heart-button, .save-button, .car-card__save { background: color-mix(in srgb, var(--vroom-surface) 88%, transparent); border: 1px solid var(--rule); color: var(--vroom-accent); }
.compare-button { background: var(--vroom-surface); border: 1px solid var(--rule); color: var(--vroom-ink); }

/* ---------------------------------------------------------------
   Signature: the rev-counter score gauge
   --------------------------------------------------------------- */
.score-gauge {
  --size: 58px;
  position: absolute; z-index: 3; top: var(--sp-3); left: var(--sp-3);
  display: grid; place-items: center;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: conic-gradient(from -125deg,
    var(--gauge-fill, var(--gauge-cool)) calc(var(--pct) * 2.5deg),
    var(--gauge-track) 0 250deg,
    transparent 250deg);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}
.score-gauge::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #1c2027, #101216);
  border: 1px solid var(--rule);
}
/* redline tick at the Best-of-Vroom threshold (88) */
/* (Redline tick removed — it read as a stray dash beside the number; the heat fill on 88+
   scores conveys the redline instead.) */
.score-gauge b {
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem;
  color: var(--vroom-ink); line-height: 1; font-feature-settings: "tnum" 1;
}
.score-gauge.is-best b { color: var(--gauge-hot); }

.score-gauge--large {
  --size: 92px; top: var(--sp-4); left: var(--sp-4);
}
.score-gauge--large b { font-size: 1.9rem; }
.score-gauge--large::after { height: 10px; }
/* One-time reveal — only on the detail hero (never in the filter re-render loop). */
@keyframes gauge-fill { from { --pct: 0; } }
.score-gauge--large { animation: gauge-fill 1000ms var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .score-gauge--large { animation: none; }
}

/* --- Detail sheet (dark cinematic) --- */
.sheet__surface, .detail-sheet__surface, .compare-sheet__surface, .drawer__surface { background: var(--vroom-surface); color: var(--vroom-ink); }
.detail-sheet__chrome, .sheet__header { border-bottom: 1px solid var(--rule-soft); }
.detail-hero, .detail-hero > figure { background: var(--studio-sweep); }
.detail-hero.is-render { background: var(--studio-sweep); }
.detail-hero.is-render img { filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.6)); }
.detail-hero figcaption { color: var(--ink-faint); }
.detail-header h2, #car-dialog-title { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--track-tight); }
.detail-price { color: var(--vroom-accent); }
.detail-verdict { color: var(--ink-soft); border-left: 2px solid var(--vroom-accent); }
.buy-section, .grade-section, .issues-section, .twins-section, .rivals-section, .detail-section { border-top: 1px solid var(--rule-soft); }
.buy-section h3, .grade-section h3, .twins-section h3, .issues-section h3, .rivals-section h3 { font-family: var(--font-caps); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--ink-soft); }
.detail-stats li, .grade-bars li { border-bottom: 1px solid var(--rule-soft); }
.detail-stats span, .grade-bars span { color: var(--ink-faint); }

/* Variants: display-only "versions in this generation" chips. */
.detail-variants-section { border-top: 1px solid var(--rule-soft); padding-top: var(--sp-3); margin-bottom: var(--sp-4); }
.detail-variants-section h3 {
  margin: 0 0 var(--sp-2); font-family: var(--font-caps); text-transform: uppercase;
  letter-spacing: var(--track-wide); color: var(--ink-soft); font-size: var(--fs-eyebrow);
}
.detail-variants { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.detail-variants li {
  padding: 4px 9px; border: 1px solid var(--rule); border-radius: var(--r-pill, 999px);
  background: var(--vroom-surface-muted); color: var(--vroom-ink);
  font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.grade-bars i { background: var(--gauge-track); }
.grade-bars i b { background: var(--vroom-accent); }
.twin-card { background: var(--vroom-surface-muted); border: 1px solid var(--rule-soft); color: var(--vroom-ink); }
.twin-card:hover { border-color: var(--vroom-accent); }
.twin-card small { color: var(--ink-soft); }

/* --- Dialogs / drawer / compare / tray / toast / tabbar --- */
.sheet::backdrop, dialog::backdrop { background: rgba(6, 7, 9, 0.7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.choice-group { border-top: 1px solid var(--rule-soft); }
.choice-grid label { background: var(--vroom-surface-muted); border: 1px solid var(--rule-soft); color: var(--vroom-ink); }
.choice-grid input:checked + span, .choice-grid label:has(input:checked) { color: var(--vroom-accent); }
.toggle-row { border-top: 1px solid var(--rule-soft); }
.poster-button { background: var(--vroom-surface); border: 1px solid var(--rule); color: var(--vroom-ink); }
.poster-button--primary { background: var(--vroom-accent); border-color: var(--vroom-accent); color: var(--on-accent); }
.text-button { color: var(--vroom-accent); }
.compare-tray { background: color-mix(in srgb, var(--vroom-surface) 92%, transparent); border-top: 1px solid var(--rule); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.toast { background: var(--forest-mid); color: var(--vroom-ink); border: 1px solid var(--rule); }
.toast--error { border-color: var(--vroom-accent); }
.mobile-tabbar { background: color-mix(in srgb, var(--vroom-canvas) 90%, transparent); border-top: 1px solid var(--rule); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mobile-tabbar__item { color: var(--ink-soft); }
.mobile-tabbar__item.is-active { color: var(--vroom-accent); }

/* --- Boot screen --- */
.boot-screen { background: var(--vroom-canvas); color: var(--vroom-ink); }
.boot-mark { color: var(--vroom-accent); }

/* --- States, footer, misc --- */
.state-panel { color: var(--ink-soft); }
.state-panel h3 { color: var(--vroom-ink); font-family: var(--font-display); }
.state-panel__mark { background: var(--vroom-surface-muted); color: var(--vroom-accent); }
.site-footer { border-top: 1px solid var(--rule-soft); color: var(--ink-faint); }
.site-footer strong { color: var(--vroom-ink); }
.site-footer a { color: var(--vroom-accent); }
.load-more { background: var(--vroom-surface); border: 1px solid var(--rule); color: var(--vroom-ink); }
.load-more:hover { border-color: var(--vroom-accent); }

/* Card entrance intentionally omitted: cards are recreated on every filter re-render, so a
   per-card entrance would replay on each slider tick and fight the "snappier" goal. */

/* --- Fixes: elements that referenced light tokens directly --- */
.detail-sheet__chrome { background: var(--vroom-surface); border-bottom: 1px solid var(--rule-soft); }
.detail-sheet__chrome .wordmark,
.detail-sheet__chrome .wordmark--small { color: var(--vroom-ink); }
.car-detail > blockquote,
.detail-verdict {
  background: var(--vroom-surface-muted);
  color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
  border-left: 3px solid var(--vroom-accent);
}

/* --- Radar page (new/) surfaces --- */
.radar-header { background: color-mix(in srgb, var(--vroom-canvas) 82%, transparent); border-bottom: 1px solid var(--rule-soft); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.radar-nav a { color: var(--ink-soft); }
.radar-nav a[aria-current="page"] { background: var(--vroom-accent); color: var(--on-accent); }
.radar-nav a:hover { color: var(--vroom-accent); }
.radar-filters button { background: var(--vroom-surface); color: var(--vroom-ink); border: 1px solid var(--rule); }
.radar-filters button:hover,
.radar-filters button[aria-pressed="true"] { background: var(--vroom-accent); border-color: var(--vroom-accent); color: var(--on-accent); }
.radar-sort select { background: var(--vroom-surface); color: var(--vroom-ink); border: 1px solid var(--rule); }
.radar-card { background: var(--vroom-surface); border: 1px solid var(--rule-soft); }
.radar-method { background: var(--vroom-surface-muted); }

/* ---------------------------------------------------------------
   Dark cascade fixes — light-era app.css rules that won on
   specificity and left invisible text or light blocks in dark UI
   (adversarial review, 2026-07-22).
   --------------------------------------------------------------- */
:root { color-scheme: dark; }

/* Invisible text: color: var(--forest) (now #16181D) sitting on a dark surface */
.slider-card__value output,
.detail-stats strong, .detail-fact strong,
.compare-car h2,
.choice-group legend,
.twin-card strong,
.compare-tray__copy strong { color: var(--vroom-ink); }
.compare-car p { color: var(--ink-soft); }

/* Light blocks: background: var(--bone)/var(--vroom-ink) (now light) inside dark UI */
.site-footer { background: var(--vroom-canvas); }
.buy-section, .issues-section { background: var(--vroom-surface-muted); color: var(--ink); }
.buy-section h3, .issues-section h3 { color: var(--ink-soft); }
.compare-table thead th:first-child { background: var(--vroom-surface-muted); color: var(--vroom-ink); }

/* Bone/white text on the bright heat accent -> near-black on accent (WCAG AA) */
.choice-grid input:checked + span,
.compare-button.is-compared, .compare-button[aria-pressed="true"],
.header-nav__link--best[aria-pressed="true"],
.angle-toggle button[aria-pressed="true"],
.state-panel--error .state-panel__mark,
.compare-tray__count,
.empty-results button { color: var(--on-accent); }

/* Mobile compare swipe hint (was hardcoded light) */
.compare-scroll::before { background: var(--vroom-surface-muted); color: var(--vroom-ink); box-shadow: none; }

/* ---------------------------------------------------------------
   Live design-review polish (cards + detail sheet).
   --------------------------------------------------------------- */
/* 1. Bigger studio renders (imagin now zoomType=fullscreen) */
.car-card__media.is-render img { padding: 3% 5% 6%; }
.detail-hero.is-render img { padding: 1% 4% 3%; }

/* 2. Card: brand leads, model is the hero, year/body is quiet meta */
.car-card__make {
  margin: 0 0 3px;
  font-family: var(--font-caps); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone);
}
.car-card__body h2 { margin: 0; line-height: 0.98; }
.car-card__meta { margin: 5px 0 0; color: var(--ink-faint); }

/* 3. Detail section headings: quieter (were --fs-h2, ~2.5rem) */
.grade-section h2, .grade-section h3, .buy-section h2, .buy-section h3,
.issues-section h2, .issues-section h3, .twins-section h2, .twins-section h3,
.rivals-section h2, .rivals-section h3, .detail-section h3 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-caps); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.1;
}

/* 4. Verdict: smaller + clearer */
.car-detail > blockquote, .detail-verdict {
  font-size: clamp(1.1rem, 1.3vw, 1.4rem); line-height: 1.32;
}

/* 5. Spec grid: make the LABELS obvious (were tiny/faint), values crisp */
.detail-stats li span, .detail-fact span, .detail-stat span {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-soft);
}
.detail-stats li strong, .detail-fact strong { font-size: 1.2rem; color: var(--vroom-ink); }

/* 6. Bars (scorecard + card stats): drop the harsh light stroke -> clean rounded track */
.grade-bars li > i, .card-stat > i, .card-stat i, .score-row__bar {
  border: 0; height: 7px; border-radius: 999px; background: var(--gauge-track); overflow: hidden;
}
.grade-bars li > i > b, .card-stat > i > b, .card-stat i b, .score-row__bar span {
  background: var(--vroom-accent); border-radius: 999px;
}
.card-stat > span { color: var(--ink-faint); }
.card-stat > strong { color: var(--vroom-ink); }

/* 7. Scorecard rows: icons + legible labels */
.grade-bars li { grid-template-columns: 152px 1fr 34px; font-size: 0.78rem; }
.grade-bars li span, .grade-bars li > span { color: var(--ink-soft); text-transform: none; letter-spacing: 0.02em; }
.grade-bars li > strong { color: var(--vroom-ink); font-family: var(--font-mono); }
.grade-label { display: inline-flex; align-items: center; gap: 8px; }
.grade-label svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--vroom-accent); }
@media (max-width: 560px) { .grade-bars li { grid-template-columns: 128px 1fr 30px; } .grade-label svg { width: 14px; height: 14px; } }

/* ---------------------------------------------------------------
   Slider console: minimal + single-line readouts (live review).
   --------------------------------------------------------------- */
.slider-card__value { min-height: 2.4rem; }
.slider-card__value output {
  font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; line-height: 1.15;
  font-size: clamp(1rem, 1vw, 1.2rem); white-space: nowrap; color: var(--vroom-ink);
}
.slider-card__value span { color: var(--ink-faint); font-size: 0.7rem; }
.range-stack { height: 30px; margin-top: var(--sp-2); }
.range-track { height: 4px; border-radius: 999px; }
.range-input::-webkit-slider-thumb {
  width: 15px; height: 15px; border: 2px solid var(--vroom-accent);
  background: var(--vroom-ink); box-shadow: none;
}
.range-input::-moz-range-thumb {
  width: 15px; height: 15px; border: 2px solid var(--vroom-accent);
  background: var(--vroom-ink); box-shadow: none;
}
.range-scale { margin-top: 4px; }
.range-scale span { font-size: 0.6rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.slider-note { font-size: 0.68rem; color: var(--ink-faint); margin-top: 6px; }
.slider-note output { white-space: nowrap; color: var(--vroom-accent); }
.slider-deck__heading h2 { font-size: 0.85rem; }

/* Card render: sit a touch lower + slightly smaller (was too high/big) */
.car-card__media.is-render img { padding: 7% 9% 9%; object-position: center 58%; cursor: ew-resize; }

/* ---------------------------------------------------------------
   Sliders REBUILT as one clean rounded capsule (match stat bars).
   Kills the double-track: only .range-track shows; native tracks are
   transparent; the thumb rides centred on the capsule.
   --------------------------------------------------------------- */
.slider-deck__grid > .slider-card { padding: 22px 24px 20px; }
.slider-card legend { margin-bottom: 2px; }

.range-stack { height: 28px; margin-top: 14px; }
.range-track {
  top: 50%; right: 0; left: 0; height: 10px; transform: translateY(-50%);
  border: 0; border-radius: 999px;
  background: linear-gradient(to right,
    var(--gauge-track) 0 var(--low),
    var(--vroom-accent) var(--low) var(--high),
    var(--gauge-track) var(--high) 100%);
}
.range-input { height: 28px; }
.range-input::-webkit-slider-runnable-track { height: 10px; border: 0; background: transparent; }
.range-input::-moz-range-track { height: 10px; border: 0; background: transparent; }
.range-input::-webkit-slider-thumb {
  width: 18px; height: 18px; margin-top: -4px; border: 3px solid var(--vroom-accent);
  border-radius: 50%; background: var(--vroom-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55); cursor: grab;
}
.range-input::-moz-range-thumb {
  width: 18px; height: 18px; border: 3px solid var(--vroom-accent);
  border-radius: 50%; background: var(--vroom-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55); cursor: grab;
}
.range-scale { margin-top: 8px; }

/* ---------------------------------------------------------------
   Detail body: two columns — editorial text | scores & stats.
   Related cars sit full-width below with thumbnails.
   --------------------------------------------------------------- */
.detail-body { display: grid; grid-template-columns: 1.02fr 1fr; align-items: start; }
.detail-body__text { border-right: 1px solid var(--rule-soft); }
.detail-body__scores .grade-section { border-top: 0; }
.detail-body__scores .grade-bars { display: grid; grid-template-columns: 1fr; gap: 12px; }
.detail-body__scores .grade-bars li { grid-template-columns: 150px 1fr 40px; }
.detail-body__scores .detail-stats { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) {
  .detail-body { grid-template-columns: 1fr; }
  .detail-body__text { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .detail-body__scores .detail-stats { grid-template-columns: 1fr 1fr; }
}

/* Related-car cards: thumbnail + text (Also try / Same vibes) */
.twin-card { display: flex; align-items: center; gap: 12px; }
.twin-card__thumb {
  flex: 0 0 auto; width: 92px; height: 60px; border-radius: 8px; overflow: hidden;
  background: var(--vroom-surface-muted); display: grid; place-items: center;
}
.twin-card__thumb.is-render { background: var(--studio-sweep); }
.twin-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.twin-card__thumb.is-render img { object-fit: contain; padding: 6% 6%; }
.twin-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.twin-card__make { color: var(--ink-soft); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; }
.twin-card__text strong { color: var(--vroom-ink); line-height: 1.1; }
.twin-card__text small { color: var(--ink-soft); }

/* ---------------------------------------------------------------
   Detail header: title block (left) + scorecard (right, larger).
   --------------------------------------------------------------- */
.detail-header { display: grid; grid-template-columns: 1.12fr 0.92fr; gap: var(--sp-6); align-items: start; }
.detail-header__main { min-width: 0; }
.detail-actions { position: static; margin-top: var(--sp-4); }
.detail-header__scores { border-top: 0; margin: 0; }
.detail-header__scores h3 { margin-bottom: var(--sp-3); }
.detail-header__scores .grade-bars { display: grid; grid-template-columns: 1fr; gap: 13px; }
.detail-header__scores .grade-bars li { grid-template-columns: 148px 1fr 42px; font-size: 0.92rem; }
.detail-header__scores .grade-bars li > strong { font-size: 1.1rem; }
.detail-header__scores .grade-label svg { width: 18px; height: 18px; }
.detail-header__scores .grade-bars li > i { height: 8px; }
@media (max-width: 860px) {
  .detail-header { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* --- Verdict block: padding, smaller copy, no broken corner --- */
.car-detail > blockquote, .detail-verdict {
  padding: var(--sp-5) var(--sp-6);
  font-size: clamp(1rem, 1.05vw, 1.18rem);
  line-height: 1.4;
}
.detail-body__text { overflow: hidden; }  /* keep the verdict bg inside the rounded body */

/* --- Related-card thumbnails: float the render on the card bg (no distinct box) --- */
.twin-card__thumb, .twin-card__thumb.is-render { background: transparent; }

/* ---------------------------------------------------------------
   Finder console restructure (top bar removed; actions by search;
   inline engine + character chips; Filters moved into Refine).
   --------------------------------------------------------------- */
.finder-shell { margin-top: clamp(0.75rem, 2vw, 1.5rem); }
.finder-shell__intro {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
}
.finder-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding-top: 10px; }
/* Consistent bordered pills for the three entry points (Best of Vroom toggle + the two
   New/Old links). Same height and shape; the accent only fills in on the active toggle. */
.finder-action {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  font-family: var(--font-caps); font-size: 0.74rem; font-weight: 700;
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--vroom-ink);
  text-decoration: none; white-space: nowrap;
  border: 1px solid var(--rule); border-radius: var(--r-pill, 999px);
  background: var(--vroom-surface); cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.finder-action:hover {
  color: var(--vroom-accent);
  border-color: color-mix(in srgb, var(--vroom-accent) 55%, var(--rule));
  background: color-mix(in srgb, var(--vroom-accent) 12%, var(--vroom-surface));
}
/* The "Best of Vroom" filter toggle reads as accent, and fills solid when active. */
.finder-action--best { color: var(--vroom-accent); border-color: color-mix(in srgb, var(--vroom-accent) 45%, var(--rule)); }
.finder-actions .icon-button { width: 40px; height: 40px; }

/* --- Shared slim top nav (every page) --- */
.topnav {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid var(--rule-soft);
  background: color-mix(in srgb, var(--vroom-canvas) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.topnav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  width: min(calc(100% - 2 * var(--gutter)), var(--content-max));
  min-height: 60px; margin-inline: auto;
}
.topnav__brand { display: inline-flex; align-items: center; color: var(--vroom-ink); flex: 0 0 auto; }
.topnav__logo { display: block; height: 26px; width: auto; overflow: visible; }
.topnav__logo .logo-accent { stroke: var(--vroom-accent); }
/* Always single-row (scrolls if it can't fit) so the topnav height stays fixed at ~60px —
   a two-row wrap would grow it past the masterclass rail's sticky top:60px and overlap it. */
.topnav__links { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-end; scrollbar-width: none; }
.topnav__links::-webkit-scrollbar { display: none; }
.topnav__links a {
  display: inline-flex; min-height: 40px; align-items: center; padding: 0 12px;
  border-radius: var(--r-pill, 999px); color: var(--ink-soft);
  font-family: var(--font-caps); font-size: 0.72rem; font-weight: 700;
  letter-spacing: var(--track-wide); text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.topnav__links a:hover { color: var(--vroom-accent); }
.topnav__links a[aria-current="page"] { color: var(--vroom-accent); background: var(--vroom-accent-soft); }
@media (max-width: 680px) {
  .topnav__inner { min-height: 54px; gap: var(--sp-2); }
  .topnav__links { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
  .topnav__links a { padding: 0 9px; font-size: 0.66rem; }
}

.chiprail {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; padding: var(--sp-3) clamp(1.25rem, 3vw, 2.5rem);
  border-block: 1px solid var(--rule-soft);
  background: var(--vroom-surface-muted);
}
.chiprail__group { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.chiprail__character { justify-content: flex-end; }
.chiprail__label {
  font-family: var(--font-caps); font-size: var(--fs-eyebrow); letter-spacing: var(--track-wider);
  text-transform: uppercase; color: var(--ink-faint); margin-right: 4px;
}
.slider-deck__tools { display: flex; align-items: center; gap: var(--sp-4); }
@media (min-width: 980px) {
  .chiprail { flex-wrap: nowrap; }
  .chiprail__fuel { flex: 0 0 auto; }
  .chiprail__character { flex: 1 1 auto; }
}
@media (max-width: 720px) {
  .chiprail { flex-direction: column; align-items: stretch; }
  .chiprail__character { justify-content: flex-start; }
}

/* --- Verification-audit fixes --- */
/* Best of Vroom active state: solid accent fill (was orange-on-light-grey, muddy). */
.finder-action--best[aria-pressed="true"], .finder-action--best.is-active {
  background: var(--vroom-accent); color: var(--on-accent); border-color: var(--vroom-accent);
}
/* Compare view photo credits were near-invisible dark-on-dark */
.compare-content small, .compare-car small, .compare-car__credit, .compare-car p small {
  color: var(--ink-soft);
}
.compare-content small a, .compare-car small a { color: var(--vroom-accent); }