/**
 * Theme contrast + professional polish
 * Loaded last — wins over main / ux / layout-fix conflicts.
 */

:root {
  --surface: #ffffff;
  --surface-2: #f3f6f9;
  --surface-3: #e8eef3;
  --on-surface: #0b1f33;
  --on-surface-muted: #4a5d6e;
  --outline: #c5d0db;
  --outline-strong: #8a9bab;
  --hero-fg: #ffffff;
  --tip-bg: #0b1f33;
  --tip-fg: #ffffff;
  --notice-bg: #e8f1f8;
  --notice-fg: #0b1f33;
  --notice-border: #1e5a7a;
  --choice-hover: #fff7f0;
  --table-head: #e4ebf1;
  --table-stripe: #f5f8fa;
  --header-bg: rgba(255, 255, 255, 0.92);
  --elev-card: 0 1px 2px rgba(11, 31, 51, 0.05), 0 8px 24px rgba(11, 31, 51, 0.06);
}

html[data-theme="dark"] {
  --surface: #152433;
  --surface-2: #0d1620;
  --surface-3: #1c2d3d;
  --on-surface: #eef3f7;
  --on-surface-muted: #a8b8c8;
  --outline: #2d4154;
  --outline-strong: #5a7388;
  --hero-fg: #ffffff;
  --tip-bg: #020617;
  --tip-fg: #f8fafc;
  --notice-bg: #1a2f42;
  --notice-fg: #dce9f4;
  --notice-border: #3d8ab8;
  --choice-hover: #1f3142;
  --table-head: #1a2c3c;
  --table-stripe: rgba(255, 255, 255, 0.035);
  --header-bg: rgba(11, 18, 28, 0.94);
  --elev-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.28);

  --brand-ink: #eef3f7;
  --brand-navy: #d2e2ef;
  --brand-steel: #7eb8d4;
  --brand-muted: #a8b8c8;
  --brand-mist: #1a2c3c;
  --brand-sand: #0c1520;
  --brand-white: #152433;
  --brand-line: #2d4154;
  --brand-accent: #ff7a2f;
  --on-surface: #eef3f7;
}

/* ---------- Base readability ---------- */
body {
  color: var(--on-surface);
  background:
    radial-gradient(1100px 480px at 6% -12%, rgba(30, 90, 122, 0.12), transparent 55%),
    radial-gradient(900px 400px at 100% 0%, rgba(232, 93, 4, 0.07), transparent 50%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--brand-sand, #f3f1ec) 100%);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(1100px 480px at 8% -10%, rgba(30, 90, 122, 0.2), transparent 55%),
    radial-gradient(900px 400px at 100% 0%, rgba(232, 93, 4, 0.1), transparent 50%),
    linear-gradient(180deg, #0a1118 0%, #101a24 100%);
}

h1, h2, h3, h4, h5, strong, .form-label, .section-head h2 {
  color: var(--on-surface);
}
p, .form-hint, .price-note, .breadcrumb, .brand-tag,
.quick-action small, .section-head p, .opt-mark, .image-attribution {
  color: var(--on-surface-muted);
}
a { color: var(--brand-steel); }
a:hover { color: var(--brand-accent); }

/* ---------- Surfaces (kill hardcoded #fff) ---------- */
.card,
.result-card,
.filter-panel,
.table-wrap,
.faq details,
.empty-state,
.error-state,
.stat,
.quick-action,
.sticky-cta,
.search-suggest,
.nav-more-menu,
.more-drawer,
.modal,
.modal-panel,
.choice-card,
.cw-chart-card,
.input,
.select,
.textarea,
.tab,
.theme-toggle {
  background: var(--surface);
  color: var(--on-surface);
  border-color: var(--outline);
}

.card,
.result-card,
.filter-panel,
.cw-chart-card,
.quick-action,
.choice-card {
  box-shadow: var(--elev-card);
}

.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--outline);
  backdrop-filter: blur(12px);
}

/* ---------- Forms ---------- */
.input, .select, .textarea {
  background: var(--surface);
  color: var(--on-surface);
  border: 1px solid var(--outline-strong);
}
.input::placeholder, .textarea::placeholder {
  color: var(--on-surface-muted);
  opacity: 0.85;
}
.form-label {
  color: var(--on-surface);
  font-weight: 650;
}
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea {
  background: #0f1a24;
  border-color: var(--outline-strong);
}

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--brand-accent);
  color: #fff !important;
  border-color: transparent;
}
.btn-secondary {
  background: #123a56;
  color: #fff !important;
  border-color: transparent;
}
html[data-theme="dark"] .btn-secondary {
  background: #2a5f82;
  color: #fff !important;
}
.btn-outline {
  background: var(--surface);
  color: var(--on-surface) !important;
  border: 1.5px solid var(--outline-strong);
  font-weight: 700;
}
.btn-outline:hover {
  background: var(--surface-3);
  border-color: var(--brand-steel);
  color: var(--on-surface) !important;
}
.hero .btn-outline,
.hero-split .btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff !important;
}
.hero .btn-outline:hover,
.hero-split .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
}

/* ---------- Tooltips (fixed — never invert with brand-ink) ---------- */
.field-info-tip {
  background: var(--tip-bg) !important;
  color: var(--tip-fg) !important;
}
.field-info-tip::after {
  border-top-color: var(--tip-bg) !important;
}
.field-info-btn {
  background: var(--surface-3);
  color: var(--on-surface);
  border-color: var(--brand-steel);
}
.toast {
  background: var(--tip-bg);
  color: var(--tip-fg);
}
.toast.success { background: #0f7a4a; color: #fff; }
.toast.error { background: #b42318; color: #fff; }

/* ---------- Notice / chips / badges ---------- */
.notice {
  background: var(--notice-bg);
  color: var(--notice-fg);
  border-left: 4px solid var(--notice-border);
}
.chip, .badge {
  background: var(--surface-3);
  color: var(--on-surface);
}
.badge-estimated { background: #dbeafe; color: #075985; }
.badge-reported { background: #ede9fe; color: #5b21b6; }
.badge-verified { background: #d1fae5; color: #065f46; }
.badge-rumour { background: #fee2e2; color: #991b1b; }
.badge-demo { background: #fef3c7; color: #92400e; }
html[data-theme="dark"] .badge-estimated { background: #0c4a6e; color: #bae6fd; }
html[data-theme="dark"] .badge-reported { background: #4c1d95; color: #ddd6fe; }
html[data-theme="dark"] .badge-verified { background: #064e3b; color: #a7f3d0; }
html[data-theme="dark"] .badge-rumour { background: #7f1d1d; color: #fecaca; }
html[data-theme="dark"] .badge-demo { background: #78350f; color: #fde68a; }

/* ---------- Tables ---------- */
table.data {
  color: var(--on-surface);
  background: var(--surface);
}
table.data th {
  background: var(--table-head);
  color: var(--on-surface);
}
table.data td {
  color: var(--on-surface);
  border-bottom-color: var(--outline);
}
table.data tbody tr:nth-child(even) td {
  background: var(--table-stripe);
}
table.data th:first-child,
table.data td:first-child {
  color: var(--on-surface);
  font-weight: 650;
}
table.data a { color: var(--brand-steel); }
table.data .winner {
  background: rgba(15, 122, 74, 0.14) !important;
  color: var(--on-surface);
}
html[data-theme="dark"] table.data .winner {
  background: rgba(52, 211, 153, 0.16) !important;
}

/* ---------- Nav / chrome ---------- */
.brand, .brand-name { color: var(--on-surface); }
.nav-desktop a { color: var(--on-surface); }
.nav-desktop a:hover,
.nav-desktop a.active {
  background: var(--surface-3);
  color: var(--on-surface);
}
.nav-more-btn {
  color: var(--on-surface);
  background: transparent;
}
.nav-more-menu a { color: var(--on-surface); }
.more-drawer a {
  color: var(--on-surface);
  border-bottom-color: var(--outline);
}
.more-group-label { color: var(--on-surface-muted); }
.bottom-nav {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-top: 1px solid var(--outline);
}
.bottom-nav a { color: var(--on-surface-muted); }
.bottom-nav a.active,
.bottom-nav a:hover { color: var(--brand-accent); }

/* ---------- Cards / lists ---------- */
.car-card,
.car-card:hover {
  color: var(--on-surface);
  background: var(--surface);
}
.car-card-title,
.price {
  color: var(--on-surface);
}
.quick-action span { color: var(--on-surface); }
.quick-action:hover {
  border-color: color-mix(in srgb, var(--brand-accent) 50%, var(--outline));
  color: var(--on-surface);
}
.choice-card {
  background: var(--surface);
  color: var(--on-surface);
}
.choice-card:hover,
.choice-card:has(input:checked) {
  background: var(--choice-hover);
  border-color: color-mix(in srgb, var(--brand-accent) 55%, var(--outline));
}
.faq summary { color: var(--on-surface); }
.faq details p { color: var(--on-surface-muted); }
.find-cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-3) 100%);
  border: 1px solid var(--outline);
}
.find-cta-band h2 { margin-bottom: 0.35rem; }
.find-cta-band p { margin-bottom: 0; max-width: 48ch; }

/* ---------- Charts ---------- */
.cw-chart-title,
.cw-bar-label,
.cw-donut-legend .leg-label {
  color: var(--on-surface) !important;
}
.cw-donut-legend .leg-val,
.cw-bar-value {
  color: var(--on-surface-muted) !important;
}
.cw-bar-track { background: var(--surface-3); }
.cw-donut-center { fill: var(--on-surface) !important; }
.cw-donut-sub { fill: var(--on-surface-muted) !important; }

/* ---------- Tabs / progress ---------- */
.tab { color: var(--on-surface); }
.tab.active, .tab[aria-selected="true"] {
  background: #123a56;
  color: #fff;
  border-color: #123a56;
}
html[data-theme="dark"] .tab.active,
html[data-theme="dark"] .tab[aria-selected="true"] {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #fff;
}
.progress-track { background: var(--surface-3); }

/* ---------- Hero stays high-contrast ---------- */
.hero, .hero-split, .hero-car-detail {
  color: var(--hero-fg);
}
.hero h1, .hero-copy h1 { color: #fff; }
.hero p, .hero-kicker, .hero .breadcrumb, .hero .breadcrumb a {
  color: rgba(255, 255, 255, 0.88);
}
.hero .breadcrumb a:hover { color: #fff; }

/* ---------- Professional density ---------- */
.section-head h2 {
  letter-spacing: -0.03em;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}
.section-head p {
  max-width: 54ch;
  line-height: 1.5;
}
.result-card,
.filter-panel {
  border-radius: 16px;
  padding: 1.35rem 1.4rem;
}
.car-card {
  border-radius: 16px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.car-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-3, 0 12px 32px rgba(11, 31, 51, 0.12));
}
.btn {
  border-radius: 12px;
  letter-spacing: 0.01em;
}
.form-actions-bar {
  border-top-color: var(--outline);
}

/* Select option readability in dark (where supported) */
html[data-theme="dark"] option {
  background: #152433;
  color: #eef3f7;
}

/* Match match-pct / prices stay accent */
.match-pct { color: var(--brand-accent); }

/* Prose body text */
.prose, .prose p, .prose li { color: var(--on-surface-muted); }
.prose h2, .prose h3 { color: var(--on-surface); }

/* Footer stays dark intentionally */
.site-footer {
  background: #0b1f33;
  color: rgba(255, 255, 255, 0.82);
}
.site-footer h4 { color: #fff; }
.site-footer a { color: rgba(255, 255, 255, 0.82); }
.site-footer a:hover { color: #fff; }

/* Sticky CTA readable */
.sticky-cta {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-color: var(--outline);
}

/* Car rank / overlays that used brand-ink as dark chip */
.car-card-rank,
.card-media {
  color: #fff;
}
.car-card-rank {
  background: #0b1f33;
}

/* Soft reveal ? never leave text invisible */
html.cw-js .section-head, html.cw-js .car-card, html.cw-js .result-card {
  opacity: 1;
  transform: none;
  transition: transform .4s ease, box-shadow .25s ease;
}
html.cw-js .section-head.is-visible, html.cw-js .car-card.is-visible, html.cw-js .result-card.is-visible {
  opacity: 1; transform: none;
}

/* External references — outbound links only */
.ext-refs {
  margin: 1.5rem 0;
  padding: 1.35rem 1.4rem;
  border-radius: 16px;
  border: 1px solid var(--outline, var(--brand-line));
  background: var(--surface, #fff);
  box-shadow: var(--elev-card, var(--shadow));
}
.ext-refs-head h2 {
  margin: 0 0 0.45rem;
  font-size: 1.25rem;
}
.ext-refs-head p {
  margin: 0 0 1rem;
  max-width: 62ch;
  color: var(--on-surface-muted, var(--brand-muted));
  font-size: 0.92rem;
}
.ext-refs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 720px) {
  .ext-refs-list { grid-template-columns: repeat(3, 1fr); }
}
.ext-refs-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--outline, var(--brand-line));
  background: var(--surface-3, var(--brand-mist));
  color: var(--on-surface);
  font-weight: 750;
}
.ext-refs-link:hover {
  border-color: var(--brand-accent);
  color: var(--on-surface);
}
.ext-refs-go {
  font-size: 0.82rem;
  color: var(--brand-accent);
  font-weight: 800;
}
.ext-refs-note {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--on-surface-muted, var(--brand-muted));
  line-height: 1.4;
}
.ext-refs-legal {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  color: var(--on-surface-muted, var(--brand-muted));
}