/* 800 CARS: supplied brand colours, composed as charcoal, pearl and orange. */
:root {
  --brand-orange: #F04C22;
  --brand-charcoal: #231F20;
  --brand-graphite: #3A3535;
  --brand-brown: #593933;
  --brand-white: #FEFEFE;
  --ink: var(--brand-charcoal);
  --accent: var(--brand-orange);
  --green: var(--brand-brown);
  --canvas: color-mix(in srgb, var(--brand-white) 96%, var(--brand-brown));
  --surface-soft: color-mix(in srgb, var(--brand-white) 94%, var(--brand-brown));
  --surface-warm: color-mix(in srgb, var(--brand-white) 88%, var(--brand-brown));
  --paper: var(--surface-soft);
  --muted: color-mix(in srgb, var(--brand-graphite) 76%, var(--brand-white));
  --line: color-mix(in srgb, var(--brand-white) 87%, var(--brand-brown));
  --line-strong: color-mix(in srgb, var(--brand-white) 73%, var(--brand-graphite));
  --on-dark-muted: color-mix(in srgb, var(--brand-white) 76%, var(--brand-graphite));
  --feature: linear-gradient(120deg, var(--brand-charcoal), var(--brand-graphite));
  --shadow: 0 12px 36px #231F200A, 0 1px 3px #231F2005;
}
body, #app, .app-scroll, .portal-main { background: var(--canvas); }
h1, h2, h3, h4 { font-weight: 650; }
.price, .stat .value { font-weight: 750; }
.app-header { background: var(--brand-white); backdrop-filter: none; border-color: var(--line); }
.nav button { color: var(--muted); }
.nav button.active, .nav button:hover { color: var(--ink); }
.nav button.active::after { height: 2px; width: 24px; }
.avatar { background: var(--surface-warm); }
.icon-btn { background: var(--brand-white); border-color: var(--line); }
.icon-btn:hover { background: var(--surface-soft); border-color: var(--line-strong); }
.recovery-cta { background: var(--brand-charcoal); }
.recovery-cta:hover { background: var(--brand-graphite); }
.badge-count { background: var(--brand-charcoal); color: var(--brand-white); border: 1px solid var(--brand-white); }

/* The complete supplied car-and-phone logo stays intact at every size. */
.logo { padding: 0; width: auto; letter-spacing: normal; }
.logo img { display: block; object-fit: contain; height: auto; max-width: 100%; }
.logo .brand-logo { width: 96px; }
.header-inner { padding-top: 12px; padding-bottom: 12px; }
.portal-sidebar .logo .brand-logo { width: 112px; }
.driver-top .logo .brand-logo { width: 90px; }
.logo-signature .brand-logo { width: 138px; }
.review-label .logo .brand-logo { width: 46px; }
.brand-intro { margin-bottom: 20px; }
.brand-intro .brand-logo { display: block; width: 116px; height: auto; margin: 0 auto; object-fit: contain; }
.recovery-brand { gap: 18px; }
.recovery-brand .logo .brand-logo { width: 74px; }
.footer .logo-signature { align-self: flex-start; }
.footer > div:first-child { max-width: 100%; }

/* Charcoal actions, neutral secondary actions, selective orange details. */
.btn, .btn.primary {
  background: var(--brand-charcoal);
  color: var(--brand-white);
  border: 1px solid var(--brand-charcoal);
  box-shadow: 0 3px 8px #231F2008;
}
.btn:hover, .btn.primary:hover { background: var(--brand-graphite); border-color: var(--brand-graphite); }
.btn.primary svg { color: var(--brand-orange); }
.btn.outline { color: var(--ink); background: var(--brand-white); border-color: var(--line-strong); box-shadow: none; }
.btn.outline:hover { background: var(--surface-soft); border-color: var(--brand-graphite); }
.btn.ghost { color: var(--ink); background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--surface-soft); }
.text-btn { color: var(--brand-graphite); }
.text-btn:hover, .link-green { color: var(--brand-brown); }

/* Dark showroom opening, followed by a quiet, light marketplace. */
.hero {
  background: var(--feature);
  color: var(--brand-white);
  padding: 36px;
  border: 1px solid #FEFEFE0D;
  border-radius: 26px;
  gap: 32px;
  box-shadow: 0 16px 40px #231F200D;
}
.hero h1 { font-weight: 650; letter-spacing: -.045em; }
.hero h1 .soft { color: color-mix(in srgb, var(--brand-white) 74%, var(--brand-brown)); }
.hero-copy > p, .hero .eyebrow, .hero-chips { color: var(--on-dark-muted); }
.hero-chips svg { color: var(--brand-orange); }
.hero .eyebrow::before { background: var(--brand-orange); }
.hero-image { border-radius: 18px; border: 1px solid #FEFEFE1A; }
.hero-image::after { background: linear-gradient(0deg, #231F20DB, #231F2000 65%); }
.hero-bottom p { color: #FEFEFED9; }
.hero-bottom button { background: var(--brand-white); color: var(--brand-charcoal); }
.hero-bottom button:hover { background: var(--surface-warm); }
.hero .btn.primary, .dark-surface .btn.primary, .garage-hero .btn.primary, .tyre-finder .btn.primary {
  background: var(--brand-white);
  color: var(--brand-charcoal);
  border-color: var(--brand-white);
  box-shadow: none;
}
.hero .btn.primary:hover, .dark-surface .btn.primary:hover,
.garage-hero .btn.primary:hover, .tyre-finder .btn.primary:hover { background: var(--surface-warm); border-color: var(--surface-warm); }
.hero .btn.outline, .dark-surface .btn.outline, .garage-hero .btn.outline { background: transparent; color: var(--brand-white); border-color: #FEFEFE40; }
.hero .btn.outline:hover, .dark-surface .btn.outline:hover, .garage-hero .btn.outline:hover { background: #FEFEFE0D; border-color: #FEFEFE80; }

.search-panel { background: var(--brand-white); border-color: var(--line); box-shadow: var(--shadow); }
.tabs button.active { border-color: var(--brand-orange); }
.field label, .label { color: var(--brand-graphite); }
.field input, .field select, .field textarea { background: var(--brand-white); border-color: var(--line-strong); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-charcoal); }
.category-tile { background: var(--brand-white); border-color: var(--line); }
.category-tile > svg { color: var(--brand-graphite); }
.category-tile:hover { background: var(--brand-white); border-color: var(--line-strong); box-shadow: var(--shadow); }
.category-tile:hover > svg { color: var(--brand-orange); }
.card { background: var(--brand-white); border-color: var(--line); box-shadow: 0 2px 8px #231F2003; }
.card-link:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.surface, .spec, .summary-lines, .result-price, .tracking-status, .empty { background: var(--surface-soft); }
.filters { background: var(--brand-white); border-color: var(--line); }
.service-card .icon-box, .booking-card .icon-box { background: var(--surface-soft); color: var(--brand-graphite); }
.service-card .arrow { color: var(--muted); }
.service-card:hover .arrow { color: var(--brand-orange); }
.car-card .photo .pill { background: #FEFEFEEF; border-color: #FEFEFE80; color: var(--ink); }
.save.saved { color: var(--brand-white); background: var(--brand-charcoal); }
.save.saved svg { fill: var(--brand-white); }
.product-visual { background: linear-gradient(145deg, var(--brand-white), var(--surface-soft)); color: var(--brand-graphite); }
.garage-banner { background: var(--brand-white); border-color: var(--line); border-left: 3px solid var(--brand-charcoal); }
.garage-banner .icon-box { background: var(--surface-soft); color: var(--brand-graphite); }
.sort { background: var(--surface-soft); color: var(--ink); border: 1px solid var(--line); }
.footer { border-color: var(--line); }
.eyebrow { color: var(--brand-brown); }
.eyebrow::before { background: var(--brand-orange); }

.pill, .pill.gray, .pill.blue, .pill.green { background: var(--surface-soft); color: var(--brand-graphite); border: 1px solid var(--line); }
.pill.orange { background: var(--surface-warm); color: var(--brand-brown); border: 1px solid var(--line); }
.pill.dark { background: var(--brand-charcoal); color: var(--brand-white); border-color: var(--brand-charcoal); }
.dark-surface, .garage-hero, .tyre-finder { background: var(--feature); border: 1px solid #FEFEFE0D; }
.dark-surface p, .garage-hero p, .tyre-finder p { color: var(--on-dark-muted); }
.dark-surface .pill, .garage-hero .pill { color: var(--brand-white); background: #FEFEFE0D; border-color: #FEFEFE33; }
.tyre-finder .field label { color: var(--on-dark-muted); }
.promo-art { background: #FEFEFE06; border: 1px solid #FEFEFE1A; }
.promo-art .icon { color: #FEFEFED9; }
.promo-art .float-label { background: var(--brand-white); box-shadow: 0 10px 24px #231F2022; }

/* Selected states retain a clear label and a precise orange detail. */
.choice.active { background: var(--canvas); border-color: var(--brand-graphite); box-shadow: inset 3px 0 0 var(--brand-orange); }
.choice.active .choice-radio { border-color: var(--brand-charcoal); }
.choice.active .choice-radio::after { background: var(--brand-charcoal); }
.chip.active, .slot.active, .recovery-options button.active { background: var(--brand-charcoal); color: var(--brand-white); border-color: var(--brand-charcoal); }
.chip:hover, .slot:hover { border-color: var(--brand-graphite); }
.step-number { background: var(--surface-warm); color: var(--brand-brown); }
.step-caption { color: var(--brand-brown); }
.progress div { background: var(--line); }
.progress div.done { background: var(--brand-charcoal); }
.success-symbol { background: var(--brand-charcoal); color: var(--brand-white); }
.notice, .notice.orange { background: var(--surface-soft); color: var(--brand-graphite); border: 1px solid var(--line); }
.notice.orange { border-left: 3px solid var(--brand-orange); }
.notice svg { color: var(--brand-brown); }
.form-error { background: var(--surface-warm); color: var(--brand-brown); border-left: 3px solid var(--brand-orange); }
.demo-controls { background: var(--surface-soft); border-color: var(--line); color: var(--brand-graphite); }
.upload-box { background: var(--surface-soft); border-color: var(--line-strong); }
.finance-slider input, .check-row input, .compare-check input { accent-color: var(--brand-charcoal); }
.thumbs button.active { border-color: var(--brand-charcoal); }
.driver-face { background: var(--surface-warm); color: var(--brand-brown); }
.timeline-item.done .timeline-dot { background: var(--brand-charcoal); border-color: var(--brand-charcoal); }
.timeline-item.current .timeline-dot { background: var(--brand-white); border-color: var(--brand-orange); box-shadow: 0 0 0 3px #F04C2212; }
.map { background: var(--surface-soft); border-color: var(--line); }
.map-badge, .map-legend { background: #FEFEFEF2; border: 1px solid var(--line); box-shadow: var(--shadow); }
.map-legend { color: var(--brand-graphite); }
.map-overlay-label { color: var(--brand-graphite); background: #FEFEFEEF; }
.map-svg > rect:first-of-type { fill: var(--canvas); }
.map-svg > path:nth-of-type(1) { stroke: var(--surface-warm); }
.map-svg > path:nth-of-type(4) { stroke: var(--brand-charcoal); }

/* Dark workspace navigation, with light operational content. */
.portal-sidebar { background: var(--brand-charcoal); color: var(--brand-white); border-color: var(--brand-charcoal); }
.portal-sidebar .portal-name, .portal-sidebar p { color: var(--on-dark-muted); }
.portal-nav button { color: var(--on-dark-muted); border: 1px solid transparent; }
.portal-nav button:hover { color: var(--brand-white); background: #FEFEFE08; }
.portal-nav button.active { background: #FEFEFE0D; color: var(--brand-white); border-color: #FEFEFE1A; box-shadow: inset 2px 0 0 var(--brand-orange); }
.portal-nav button.active svg { color: var(--brand-orange); }
.portal-sidebar .avatar { background: #FEFEFE12; color: var(--brand-white); }
.portal-sidebar .btn.outline { background: transparent; border-color: #FEFEFE33; color: var(--brand-white); }
.portal-sidebar .btn.outline:hover { background: #FEFEFE0D; }
.stat { background: var(--brand-white); border-color: var(--line); box-shadow: 0 3px 12px #231F2004; }
.stat .trend { color: var(--muted); }
.portal-main > .grid > .stat:first-child { color: var(--brand-white); background: var(--feature); border-color: var(--brand-charcoal); }
.portal-main > .grid > .stat:first-child .label,
.portal-main > .grid > .stat:first-child .trend { color: var(--on-dark-muted); }
.table-wrap { background: var(--brand-white); border-color: var(--line); }
.table th, .table-wrap::before { background: var(--surface-soft); }
.table tbody tr:hover { background: var(--canvas); }
.chart-bar { background: color-mix(in srgb, var(--brand-graphite) 70%, var(--brand-white)); }
.chart-bar.highlight { background: var(--brand-orange); }

/* Driver app, navigation, dialogs and prototype review controls. */
.driver-container, .phone-mode #stage, .tablet-mode #stage { background: var(--surface-warm); }
.phone-mode #app, .driver-shell { border-color: var(--brand-charcoal); box-shadow: 0 24px 60px #231F2026; }
.driver-top { background: var(--brand-charcoal); color: var(--brand-white); }
.driver-top .toggle { background: #FEFEFE33; }
.driver-top .toggle.on { background: var(--brand-orange); }
.driver-scroll, .driver-content, .driver-offer { background: var(--brand-white); }
.driver-stats > div { background: var(--surface-soft); }
.bottom-nav, .driver-bottom { background: var(--brand-white); border-color: var(--line); }
.bottom-nav button.active, .driver-bottom button.active { color: var(--brand-charcoal); }
.bottom-nav button.active svg, .driver-bottom button.active svg { color: var(--brand-orange); }
.bottom-nav button.recover svg { background: var(--brand-charcoal); color: var(--brand-white); }
.bottom-nav button.recover.active svg { color: var(--brand-orange); }
.modal { background: var(--brand-white); }
.modal-head { background: var(--canvas); border-color: var(--line); }
.research-coverage div { background: var(--surface-soft); }
#reviewbar { background: var(--brand-charcoal); border-bottom: 1px solid #FEFEFE1A; }
.review-roles { background: #FEFEFE08; border: 1px solid #FEFEFE12; }
.review-roles button { color: var(--on-dark-muted); }
.review-roles button.active { background: #FEFEFE12; color: var(--brand-white); box-shadow: inset 0 -2px 0 var(--brand-orange); }
.review-right button.active { color: var(--brand-white); background: #FEFEFE12; border-radius: 6px; }
.review-label .dot { background: var(--brand-orange); }

.brand-palette { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.brand-palette span { min-width: 0; padding: 12px 8px; font-size: 11px; border: 1px solid var(--line); border-radius: 10px; text-align: center; }
.brand-palette span::before { content: ''; display: block; height: 35px; background: var(--swatch); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; }

/* Local hero insets adapt without changing existing grid/scroll breakpoints. */
@container app (max-width: 1180px) {
  .hero { padding: 28px; gap: 24px; }
}
@container app (max-width: 960px) {
  .portal-nav button.active { box-shadow: inset 0 -2px 0 var(--brand-orange); }
  .portal-sidebar .logo .brand-logo { width: 86px; }
}
@container app (max-width: 850px) {
  .hero { padding: 28px; gap: 24px; }
}
@container app (max-width: 750px) {
  .header-inner .logo .brand-logo, .driver-top .logo .brand-logo { width: 82px; }
  .hero { padding: 24px; border-radius: 22px; }
  .hero-image { border-radius: 14px; }
  .hero-bottom button { width: 44px; height: 44px; }
}
@container app (max-width: 480px) {
  .header-inner { padding-top: 10px; padding-bottom: 10px; }
  .header-inner .logo .brand-logo, .driver-top .logo .brand-logo,
  .portal-sidebar .logo .brand-logo { width: 80px; }
  .brand-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding: 24px 20px 20px; gap: 22px; }
  .hero h1 { font-size: 34px; line-height: 1.15; }
  .hero-copy > .row { gap: 10px; }
  .hero-copy > .row .btn { flex: 1 1 auto; padding-left: 13px; padding-right: 13px; }
  .hero-image { height: 210px; }
  .hero-photo-label { font-size: 9px; }
  .hero-bottom h3 { font-size: 15px; }
  .hero-bottom p { font-size: 10px; }
  .hero-chips { gap: 10px 12px; }
}
@container app (max-width: 400px) {
  .hero { padding: 22px 18px 18px; }
  .hero h1 { font-size: 32px; }
  .hero-image { height: 190px; }
  .hero-bottom { left: 14px; right: 14px; bottom: 14px; gap: 10px; }
}
@container app (max-width: 360px) {
  .header-inner .logo .brand-logo, .driver-top .logo .brand-logo { width: 76px; }
  .hero h1 { font-size: 30px; }
  .hero-copy > .row .btn { flex-basis: 100%; }
}
@media (max-width: 750px) {
  .phone-mode #app, .driver-shell { box-shadow: none; }
}