/* ==========================================================================
   Jitcar — LOTLINE base layer
   Type, buttons, forms, chips, badges, vehicle card, odometer digits.
   Consumes tokens.css only — no raw color/font/radius/shadow values here.
   Anatomy & spacing are provisional until verified against the v3 boards
   in design/reference/ (boards are canonical for anatomy and spacing).
   ========================================================================== */

/* --- Fonts — self-hosted variable woff2 (production app; boards load
       Google Fonts intentionally for standalone use). One file per family
       covers all permitted weights (latin subset, OFL — licenses alongside).
       Preload both in every template head — both faces are above the fold
       on every page:
       <link rel="preload" href="/design/fonts/overpass-var.woff2"
             as="font" type="font/woff2" crossorigin>
       <link rel="preload" href="/design/fonts/overpass-mono-var.woff2"
             as="font" type="font/woff2" crossorigin> -------------------- */
@font-face {
  font-family: 'Overpass';
  src: url('fonts/overpass-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Overpass Mono';
  src: url('fonts/overpass-mono-var.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Document ----------------------------------------------------------- */
body {
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--asphalt);
  background: var(--concrete);
  -webkit-font-smoothing: antialiased;
}

/* Visible keyboard focus — quality floor §9 */
:focus-visible {
  outline: 2px solid var(--asphalt);
  outline-offset: 2px;
}
.dark :focus-visible,
.on-dark :focus-visible {
  outline-color: var(--lane);
}

img, svg { display: block; max-width: 100%; }

/* Stroke icon default (boards' .ico convention) */
.ico {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

a {
  color: inherit;
  text-decoration-color: var(--lane);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* --- Type --------------------------------------------------------------- */
/* Sentence case everywhere, including buttons — enforced in copy, not CSS. */
h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: var(--w-black);
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-md);  font-weight: var(--w-extrabold); letter-spacing: 0; }

/* Every number a shopper compares is set in mono. */
.mono {
  font-family: var(--mono);
}

.kicker {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: var(--w-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel);
}

.muted { color: var(--steel); }

/* --- Buttons ------------------------------------------------------------
   Sentence case. Buttons say what happens and keep the same name through
   the flow. Text on lane is always asphalt, never white. ------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: var(--w-extrabold);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.btn-primary {
  background: var(--lane);
  color: var(--asphalt);
}
.btn-primary:hover { filter: brightness(.96); }

.btn-secondary {
  background: transparent;
  color: var(--asphalt);
  border-color: var(--hairline-2);
}
.btn-secondary:hover { border-color: var(--asphalt); }

/* Secondary on dark surfaces (paybar, sticker header) */
.on-dark .btn-secondary {
  color: var(--concrete);
  border-color: var(--asphalt-2);
}

.btn-dark {
  background: var(--asphalt);
  color: #fff;
}

.btn-block {
  width: 100%;
  margin-top: 12px;
}

.btn-quiet {
  background: transparent;
  color: var(--asphalt);
  min-height: 40px;
  font-weight: var(--w-semibold);
  text-decoration: underline;
  text-decoration-color: var(--lane);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* Time expectation under a primary button (§3 forms) */
.btn-note {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--steel);
  text-align: center;
}

/* --- Forms ---------------------------------------------------------------
   Multi-step, one question cluster per screen, big targets. Consent
   checkboxes unticked by default (markup rule). ---------------------------- */
.field { margin-bottom: var(--sp-5); }

.field-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--w-semibold);
  margin-bottom: var(--sp-2);
}

.input,
select.input,
textarea.input {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-control);
  background: #fff;
  font-family: var(--sans);
  font-size: var(--fs-base);
  color: var(--asphalt);
  transition: border-color var(--dur-fast) var(--ease);
}
.input:focus {
  outline: none;
  border-color: var(--asphalt);
}
.input::placeholder { color: var(--steel); }

/* Numeric inputs a shopper compares (down payment, term) are data */
.input-mono { font-family: var(--mono); }

/* Errors say what went wrong and how to fix it — never apologize, never vague.
   --error is functional-only: fields, never vehicle cards. */
.field.is-error .input { border-color: var(--error); }
.field-error {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--error);
}

.field-help {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--steel);
}

/* Consent row — plain language, unticked by default */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--asphalt);
  flex: none;
}

/* Soft-pull assurance beside any credit-adjacent step */
.assurance {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--guide);
  font-weight: var(--w-semibold);
}

/* --- Filter / pay chips — pill form (boards: header paychips, filter rows) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  white-space: nowrap;
}
.on-dark .chip {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .24);
  color: var(--concrete);
  font-family: var(--mono);
}
.chip.on {
  background: var(--lane);
  border-color: var(--lane);
  color: var(--asphalt);
}

/* --- Status chips (§3) — exactly one per card. Rectangular, control radius. */
.fitchip,
.gapchip,
.estchip,
.droptag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-control);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--w-bold);
  white-space: nowrap;
}

/* Verified only. Green means verified — using it on an estimate devalues
   the whole system. */
.fitchip {
  background: var(--guide-bg);
  color: var(--guide);
}

/* The gap-closer: sells the fix, never red-flags the car. */
.gapchip {
  background: var(--lane);
  color: var(--asphalt);
}

/* The pre-flip default. */
.estchip {
  background: var(--fill-quiet);
  color: var(--steel);
}

/* May accompany any state: "↓ $500 · 12 days listed" */
.droptag {
  gap: 4px;
  background: var(--fill-quiet);
  color: var(--asphalt);
}

/* --- Badges — the two-badge system (§3) ----------------------------------
   Market badges are estimates and always carry "· est." (copy rule).
   Fit badges are verified budget truth. Green never makes a market claim. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-control);
  font-size: var(--fs-2xs);
  font-weight: var(--w-bold);
  line-height: 1.4;
}
.badge-market {
  background: var(--concrete);
  color: var(--asphalt);
}
.badge-fit {
  background: var(--guide);
  color: #fff; /* white on guide is fine at chip sizes and up */
}

/* --- Vehicle stage (§3) --------------------------------------------------
   Dark showroom stage, lane-yellow ground line under the wheels. Live feed
   photos ride the same treatment so cards stay lit and consistent. */
.stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 16px;
  background: var(--stage);
  overflow: hidden;
  aspect-ratio: 16 / 10; /* boards use fixed heights (150/158px) on fixed-width
                            frames; ratio ≈ equivalent at fluid card widths */
}
.stage::after {
  /* the ground line */
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--lane);
  opacity: .85;
}
.stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}
.stage .badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}
.fav {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--overlay-light);
  color: #fff;
  cursor: pointer;
}

/* --- Vehicle card — "the sticker" (§3) ------------------------------------
   Stage → title → mono meta → payline → dashed footer. One component,
   two layouts (mobile & 3-up desktop grid). Anatomy per the v3 boards. */
.vcard {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.vbody { padding: 13px 14px 11px; }

.vbody h4 {
  font-size: var(--fs-base);
  font-weight: var(--w-extrabold);
  letter-spacing: 0;
  line-height: var(--lh-tight);
}

/* Mileage written plainly here ("41,220 mi") — odometer zeros live only in
   odometer-styled components. */
.vmeta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--steel);
}

/* The payline: payment hero + status chip + price sub. The payment is the
   typographic hero; cash price demotes to a small mono secondary. */
.payline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.pay-hero {
  font-family: var(--mono);
  font-size: var(--fs-xl);
  font-weight: var(--w-bold);
  letter-spacing: -.01em;
  line-height: 1;
}
.pay-hero.fit { color: var(--guide); }   /* verified fit only */
.pay-sub {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--steel);
}

/* Dashed footer: stock number + barcode motif */
.vfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  padding: 8px 14px 10px;
  border-top: 1px dashed var(--hairline-2);
}
.stock {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--steel);
  letter-spacing: .04em;
}
.barcode {
  width: 66px;
  height: 18px;
  opacity: .85;
  background: repeating-linear-gradient(
    90deg,
    var(--asphalt) 0 2px, transparent 2px 4px,
    var(--asphalt) 4px 7px, transparent 7px 9px,
    var(--asphalt) 9px 10px, transparent 10px 13px
  );
}

/* --- Odometer digits (§3) --------------------------------------------------
   Boxed mono digits, lane numerals on asphalt. The two reveal moments:
   pre-qual budget and instant trade value. */
.odo {
  display: inline-flex;
  gap: 3px;
}
.odo span {
  display: grid;
  place-items: center;
  min-width: 1.5em;
  padding: .3em .1em .2em;
  background: var(--asphalt);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: var(--fs-3xl);
  font-weight: var(--w-black);
  line-height: 1;
  color: var(--lane);
}
.odo span.sep {
  background: transparent;
  color: var(--asphalt);
  min-width: auto;
}

/* --- Dark hero band with the lane-dash motif ------------------------------ */
.hero-band {
  background: var(--asphalt);
  color: var(--concrete);
}
.hero-band .lane-line {
  height: 4px;
  background: var(--lane-dashes);
}