@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════════════
   GarageApp — the stylesheet
   Hand-written, no build step, no CDN, no external requests, no web fonts.
   One stylesheet, and every rule lives in it: the production server sends
   `style-src 'self'` with no 'unsafe-inline', so an inline <style> block or a
   style= attribute is silently refused after upload. That has broken this
   site once already. Percentage widths use <progress value>, never a width
   set from JavaScript.

   DESIGN NOTES (deliberate, not defaults)

   This screen is meant to look like it belongs in the Flutter app, not like a
   different product that happens to be dark. Everything below is taken from
   that app's own design language.

   Canvas    Pure black. Not a warm near-black, not a blue-cast graphite —
             #000000, with cards lifted off it at #1C1C1E and a slightly
             lighter secondary strip at #2E2E2E. Nothing warm anywhere.
   Red       #D32F2F is the BRAND accent, and it means ACTIVE — the selected
             tab, the current step. It never means "down". Search this file:
             red appears only on --accent, and --accent is only ever used to
             mark the selected item in a set.
   Direction A gain is the WORD ("Climbing"), an arrow, and white at a heavier
             weight. A decline is the word, the arrow, and muted grey. No hue
             carries direction — not red (that is the brand), not green (never
             introduced), not the gold this file used to use. Turn the screen
             greyscale and nothing is lost.
   Blue      #4A90D9 for links and for a person's name, as in their app.
   Type      One neutral geometric sans, from the system stack, so it renders
             as Roboto on Android/Chrome and as the platform face everywhere
             else. No serif, no vendored font file, no @font-face. Figures use
             font-variant-numeric: tabular-nums, which every face in the stack
             supports.
   Shape     Cards 10px, pills 10px — rounded, not round. Cards run full-bleed
             to one side margin with generous internal padding.
   Themes    Dark is the real design. Light is a clean neutral equivalent —
             white canvas, light grey cards, the same red and the same blue
             family — never a warm cream.
   Contrast  Body text ≥4.5:1 and large text ≥3:1 in both themes. The greys
             below were picked against every surface they can land on, not
             against the canvas alone.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --bg:          #000000;
  --bg-deep:     #000000;
  --surface:     #1C1C1E;
  --surface-2:   #2E2E2E;
  --surface-3:   #333333;
  --line:        #2E2E2E;
  --line-soft:   #232325;
  --line-strong: #545456;

  --ink:         #FFFFFF;
  --ink-2:       #C7C7C7;   /* >=7:1 on bg, surface, surface-2 and surface-3 */
  --ink-3:       #9E9E9E;   /* >=4.7:1 on bg, surface, surface-2 and surface-3 */

  /* The brand red. Active states only. On the white pill it carries the
     label (4.98:1); everywhere else it is a graphic, never body text. */
  --accent:      #D32F2F;
  --accent-on:   #FFFFFF;   /* the pill the active label sits on */
  --accent-ink:  #D32F2F;   /* the active label itself */

  /* Their blue is #4A90D9. That clears 4.5:1 on the canvas (6.28) and on a
     card (5.09) but only reaches 4.06 on the #2E2E2E strip, which a link can
     land on — the provenance block is that grey. Lightened along the same
     hue until it clears every surface in the file: 7.91 / 6.41 / 5.12 / 4.76.
     Measured, not assumed. */
  --link:        #63A3E6;
  --focus:       #63A3E6;

  /* Direction. Aliases, so a component rule never has to know that "up" is
     simply white — and so the light theme cannot drift out of step. */
  --gain:        var(--ink);
  --fall:        var(--ink-3);
  --level:       var(--ink-2);

  --select-bg:   rgba(255,255,255,.22);
  --shadow:      0 1px 2px rgba(0,0,0,.6), 0 8px 26px -12px rgba(0,0,0,.9);
  --shadow-sm:   0 1px 2px rgba(0,0,0,.5);

  /* Fixed regardless of theme: these sit on a photograph, not on a surface. */
  --overlay-ink:   #FFFFFF;
  --overlay-scrim: rgba(0,0,0,.88);

  /* The ?frame=app phone shell. Chrome around the app, not part of it. */
  --frame-body:  radial-gradient(120% 90% at 50% 0%, #1A1A1C 0%, #0A0A0B 55%, #000000 100%);
  --frame-shell: linear-gradient(160deg, #454548 0%, #1C1C1E 26%, #0B0B0C 60%, #303033 100%);
  --frame-notch: #000000;
  --frame-edge:  rgba(255,255,255,.09);
  --frame-glint: rgba(255,255,255,.16);

  --font: system-ui, -apple-system, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;

  --t-2xs: .6875rem;  /* 11 */
  --t-xs:  .75rem;    /* 12 */
  --t-sm:  .8125rem;  /* 13 */
  --t-base:.9375rem;  /* 15 */
  --t-md:  1.0625rem; /* 17 */
  --t-lg:  1.25rem;   /* 20 — their card title */
  --t-xl:  1.5rem;    /* 24 */
  --t-2xl: 1.875rem;  /* 30 */

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 44px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 10px;
  --pad: 16px;
  --tap: 44px;
}

@media (prefers-color-scheme: light) {
  :root[data-theme='auto'] { color-scheme: light; }
}
:root[data-theme='light'] { color-scheme: light; }

:root[data-theme='light'],
:root[data-theme='auto'] {
  --light-bg:          #FFFFFF;
  --light-bg-deep:     #F2F2F2;
  --light-surface:     #F2F2F2;
  --light-surface-2:   #E6E6E6;
  --light-surface-3:   #DADADA;
  --light-line:        #D8D8D8;
  --light-line-soft:   #E8E8E8;
  --light-line-strong: #9A9A9A;
  --light-ink:         #0A0A0A;
  --light-ink-2:       #3D3D3D;
  --light-ink-3:       #5C5C5C;   /* >=4.7:1 on every light surface */
  /* Same red. Inverted, because a white pill cannot be seen on a white
     canvas: the active pill fills with the red and the label goes white
     (4.98:1 either way round). */
  --light-accent:      #D32F2F;
  --light-accent-on:   #D32F2F;
  --light-accent-ink:  #FFFFFF;
  /* The same blue, darkened for a white ground: 6.63 / 5.92 / 5.31 / 4.74
     against the four light surfaces. */
  --light-link:        #185EA3;
  --light-focus:       #185EA3;
  --light-select-bg:   rgba(0,0,0,.14);
  --light-shadow:      0 1px 2px rgba(0,0,0,.08), 0 10px 26px -14px rgba(0,0,0,.30);
  --light-shadow-sm:   0 1px 2px rgba(0,0,0,.08);
  --light-frame-body:  radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #ECECEC 55%, #DCDCDC 100%);
}

@media (prefers-color-scheme: light) {
  :root[data-theme='auto'] {
    --bg: var(--light-bg); --bg-deep: var(--light-bg-deep);
    --surface: var(--light-surface); --surface-2: var(--light-surface-2);
    --surface-3: var(--light-surface-3);
    --line: var(--light-line); --line-soft: var(--light-line-soft);
    --line-strong: var(--light-line-strong);
    --ink: var(--light-ink); --ink-2: var(--light-ink-2); --ink-3: var(--light-ink-3);
    --accent: var(--light-accent); --accent-on: var(--light-accent-on);
    --accent-ink: var(--light-accent-ink);
    --link: var(--light-link); --focus: var(--light-focus);
    --select-bg: var(--light-select-bg);
    --shadow: var(--light-shadow); --shadow-sm: var(--light-shadow-sm);
    --frame-body: var(--light-frame-body);
  }
}
:root[data-theme='light'] {
  --bg: var(--light-bg); --bg-deep: var(--light-bg-deep);
  --surface: var(--light-surface); --surface-2: var(--light-surface-2);
  --surface-3: var(--light-surface-3);
  --line: var(--light-line); --line-soft: var(--light-line-soft);
  --line-strong: var(--light-line-strong);
  --ink: var(--light-ink); --ink-2: var(--light-ink-2); --ink-3: var(--light-ink-3);
  --accent: var(--light-accent); --accent-on: var(--light-accent-on);
  --accent-ink: var(--light-accent-ink);
  --link: var(--light-link); --focus: var(--light-focus);
  --select-bg: var(--light-select-bg);
  --shadow: var(--light-shadow); --shadow-sm: var(--light-shadow-sm);
  --frame-body: var(--light-frame-body);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--link); }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: var(--select-bg); }

.u-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  background: var(--surface); color: var(--ink);
  padding: 10px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); text-decoration: none;
  transition: transform .16s ease;
}
.skip-link:focus-visible { transform: none; }

/* Numbers. Everything money-shaped goes through .num or .figure. There is
   one face in the file now, so this sets figures — not a second family.
   tabular-nums is supported by every face in the system stack. */
.num, .figure, table, time, .tabular {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ── Stage / device frame ───────────────────────────────────────────────── */

.stage { min-height: 100vh; display: block; }
.device__bezel, .statusbar, .homebar { display: none; }
.device, .device__screen { display: block; }
.app { background: var(--bg); min-height: 100vh; }

body.is-framed {
  background: var(--frame-body);
  padding: 40px 20px 28px;
}

body.is-framed .stage {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; min-height: auto;
}
body.is-framed .device {
  position: relative;
  width: 393px; max-width: 100%;
  height: min(852px, calc(100vh - 130px));
  border-radius: 46px;
  padding: 11px;
  background: var(--frame-shell);
  box-shadow: 0 0 0 1px var(--frame-edge), var(--shadow);
  isolation: isolate;
}
body.is-framed .device__bezel {
  display: block; position: absolute; inset: 5px;
  border-radius: 41px; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 1px var(--frame-edge),
              inset 0 1px 0 var(--frame-glint);
}
body.is-framed .device__screen {
  position: relative; height: 100%; border-radius: 36px; overflow: hidden;
  background: var(--bg); display: flex; flex-direction: column;
}
body.is-framed .statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 26px 4px; height: 44px; flex: 0 0 auto;
  color: var(--ink); font-size: var(--t-sm); font-weight: 600;
}
.statusbar__time { letter-spacing: .01em; }
.statusbar__notch {
  width: 86px; height: 26px; border-radius: 14px;
  background: var(--frame-notch); box-shadow: inset 0 0 0 1px var(--frame-edge);
}
.statusbar__icons { display: flex; align-items: center; gap: 5px; }
body.is-framed .app {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
body.is-framed .homebar {
  display: flex; justify-content: center; align-items: center;
  height: 22px; flex: 0 0 auto; background: var(--bg);
}
body.is-framed .homebar span {
  width: 134px; height: 5px; border-radius: 3px;
  background: var(--ink); opacity: .32;
}
.stage__caption {
  color: var(--ink-3); font-size: var(--t-xs); letter-spacing: .02em;
  text-align: center; max-width: 420px;
}
body.is-framed .appbar { position: static; }

@media (max-width: 900px), (max-height: 700px) {
  body.is-framed { padding: 0; background: var(--bg-deep); }
  body.is-framed .device {
    width: 100%; height: auto; border-radius: 0; padding: 0;
    background: none; box-shadow: none;
  }
  body.is-framed .device__bezel,
  body.is-framed .statusbar,
  body.is-framed .homebar { display: none; }
  body.is-framed .device__screen { border-radius: 0; height: auto; }
  body.is-framed .app { overflow: visible; }
  body.is-framed .appbar { position: sticky; }
  .stage__caption { display: none; }
}

/* ── App bar ────────────────────────────────────────────────────────────── */

.appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--pad); min-height: 54px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.appbar__title {
  font-weight: 600;
  font-size: var(--t-md); letter-spacing: -.005em;
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Their back affordance is a bare chevron, thin and white — no circle behind
   it. The presentation attribute on the path is stroke-width="2"; any CSS
   rule outranks a presentation attribute, so the weight is set here rather
   than by editing the markup. */
.appbar__back {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-left: -8px;
  border-radius: 50%; color: var(--ink); flex: 0 0 auto;
}
.appbar__back svg path { stroke-width: 1.6; }
.appbar__back:hover { background: var(--surface); }
.appbar__actions { display: flex; gap: 6px; flex: 0 0 auto; }
/* …and circular filled buttons on the right. */
.iconbtn {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; color: var(--ink); background: var(--surface);
}
.iconbtn:hover { background: var(--surface-2); }

/* ── Screen scaffolding ─────────────────────────────────────────────────── */

.screen { padding: var(--sp-4) var(--pad) 56px; }
.screen:focus { outline: none; }
.stack     { display: grid; gap: var(--sp-4); }
.stack--sm { display: grid; gap: var(--sp-2); }
.stack--lg { display: grid; gap: var(--sp-6); }

/* ABOUT YOURSELF — their section label: small, uppercase, letter-spaced,
   grey. Every group heading in this app now uses it. */
.eyebrow {
  font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3);
  line-height: 1.4;
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.muted   { color: var(--ink-2); }
.muted-3 { color: var(--ink-3); }
.small   { font-size: var(--t-sm); }
.xsmall  { font-size: var(--t-xs); }

/* Their card: a neutral grey block on the black canvas, 10px, no drop
   shadow — the luminance step is the edge. The hairline is there for the
   light theme, where card and canvas are close together. */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.card__body { padding: var(--sp-5); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

/* The two shapes their segmented row is built from, promoted to buttons:
   a solid fill for the primary action, and the outlined pill for everything
   else. Red is not used here — it means "selected", not "press me". */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-5);
  border-radius: var(--r-md); font-size: var(--t-base); font-weight: 600;
  border: 1.5px solid transparent; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
/* Inverted ink: white on black, near-black on white. 19.8:1 either way. */
.btn--primary {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
  font-weight: 700;
}
.btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn--ghost {
  background: none; color: var(--ink); border-color: var(--ink);
}
.btn--ghost:hover { background: var(--surface); }
.btn--block { width: 100%; }
/* Not opacity: a 45% white fill reads as a live grey button with a
   low-contrast label. A disabled control is a muted surface with muted ink. */
.btn[disabled], .btn[disabled]:hover {
  background: var(--surface-2); color: var(--ink-3); border-color: var(--surface-2);
  cursor: not-allowed;
}
.btn__spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Forms ──────────────────────────────────────────────────────────────── */

.field { display: grid; gap: 6px; }
.field > label, .field__label {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
.input, .select {
  width: 100%; min-height: var(--tap);
  padding: 0 var(--sp-4); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease;
}
.input:hover, .select:hover { border-color: var(--line-strong); }
.input:focus-visible, .select:focus-visible { border-color: var(--focus); }
.input::placeholder { color: var(--ink-3); }
.select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.select[disabled] { opacity: .5; cursor: not-allowed; }
/* AUDIT FIX (MAJOR 6): both were inline style= attributes, refused under the
   production CSP. The odometer row lost its flex layout, so the unit dropdown
   dropped below the number field and stretched full width. */
.input-row { display: flex; gap: 8px; }
.select--unit { max-width: 110px; }
.field__hint { font-size: var(--t-xs); color: var(--ink-3); }
/* An error is not a navigation state, so it is not red — red is the brand's
   "selected". It is white, bold, and set off by a rule down its edge, which
   is a shape channel and survives greyscale. role="alert" carries it to a
   screen reader either way. */
.field__err  {
  font-size: var(--t-xs); color: var(--ink); font-weight: 700;
  padding-left: var(--sp-2); border-left: 2px solid var(--ink);
}

/* ── Segmented tab row ─────────────────────────────────────────────────────
   Theirs, exactly: equal widths side by side, no track behind them. The
   ACTIVE pill is a white fill carrying a red label; an inactive pill is
   transparent with a 1.5px white border and a white label. Selection is
   carried by the fill inverting, not by the hue alone, and aria-checked
   carries it to a screen reader.

   Light theme flips the pair — a white pill cannot be seen on a white
   canvas — so there the fill is the red and the label is white. Same two
   colours, same 4.98:1, whichever way round. */

.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--sp-2);
}
.segmented__opt {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-3);
  border-radius: var(--r-md); font-size: var(--t-base); font-weight: 600;
  border: 1.5px solid var(--ink); color: var(--ink); background: none;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.segmented__opt[aria-checked='true'] {
  background: var(--accent-on); color: var(--accent-ink);
  border-color: var(--accent-on);
}
.segmented__opt:hover:not([aria-checked='true']) { background: var(--surface); }
.segmented__opt svg { flex: 0 0 auto; }

/* ── Sign in ────────────────────────────────────────────────────────────── */

.signin { max-width: 420px; margin: 0 auto; padding-top: 4vh; }
.brand { display: grid; justify-items: center; gap: var(--sp-3); margin-bottom: var(--sp-7); }
/* The mark stays monochrome. Red in this app means "this is the one you are
   on", and a logo is never that. */
.brand__mark {
  width: 58px; height: 58px; border-radius: var(--r-lg);
  display: grid; place-items: center; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
}
.brand__name {
  font-size: var(--t-xl);
  font-weight: 700; letter-spacing: -.02em;
}
.brand__tag { color: var(--ink-2); font-size: var(--t-sm); text-align: center; max-width: 30ch; }

.demo-row { display: grid; gap: var(--sp-2); }
.demo-btn {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: 58px; padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md); text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .15s ease, background-color .15s ease;
}
.demo-btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.demo-btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.demo-btn:has(input:checked) { border-color: var(--ink); background: var(--surface-2); }
.demo-btn__mark {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink);
  font-weight: 700; font-size: var(--t-sm);
}
/* Both are spans inside a plain span, so without an explicit display they
   flow together: "Marcus's garageThree classics — a long-hood 911…". */
.demo-btn__name { display: block; font-weight: 600; font-size: var(--t-base); }
/* A person's name is blue in their app, the way a username is — but only a
   person's name. The same element carries the correction-reason labels in
   "This number looks wrong", and those are choices, not links. */
.demo-row .demo-btn__name { color: var(--link); }
.demo-btn__desc { display: block; margin-top: 2px; color: var(--ink-3); font-size: var(--t-xs); line-height: 1.4; }
.demo-btn__go { margin-left: auto; color: var(--ink-3); flex: 0 0 auto; }
/* AUDIT FIX (MAJOR 6): was style="min-height:46px" in app.js. The production
   .htaccess sets `style-src 'self'` with no 'unsafe-inline', so the browser
   refused the attribute and these radios collapsed to the text height — under
   the 44px minimum touch target, on the one control that exists to be tapped
   by someone who thinks a number is wrong. Dev sets no CSP, so it looked fine
   locally and broke on upload. */
.demo-btn--compact { min-height: 46px; }

.rule {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--ink-3); font-size: var(--t-2xs);
  letter-spacing: .13em; text-transform: uppercase;
}
.rule::before, .rule::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--line);
}

/* ── Money (behind the curtain, and the spoken figures) ─────────────────── */

.money {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-weight: 600; letter-spacing: -.02em;
}
.money--lg   { font-size: var(--t-xl); line-height: 1.1; }

/* Direction never rides on a hue. A gain is white and heavier; a decline is
   muted grey. The word and the arrow beside it are the actual carriers. */
.up   { color: var(--gain); font-weight: 700; }
.down { color: var(--fall); }

.range-line {
  color: var(--ink-2); font-size: var(--t-sm);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── Provenance + disclaimer (adjacent to every number) ─────────────────── */

.provenance {
  display: grid; gap: 6px; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); background: var(--surface-2);
  border: 1px solid var(--line-soft);
  font-size: var(--t-xs); color: var(--ink-3); line-height: 1.45;
}
.provenance strong { color: var(--ink-2); font-weight: 600; }
.provenance__facts {
  display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.provenance__facts span { white-space: nowrap; }
.provenance__facts span:not(:last-child)::after {
  content: ' ·'; color: var(--ink-3);
}
.provenance__disclaimer { color: var(--ink-3); }
.provenance--inline { background: none; border: 0; padding: 0; }

/* ── STATUS ─────────────────────────────────────────────────────────────────

   The three blocks the vehicle screen is made of. Dark-first, and the whole
   screen is type — no cards, no chrome, nothing between the reader and the
   sentence.

   The direction is a WORD with an arrow beside it. A gain is white at a
   heavier weight; a decline is muted grey. Red is not available here: in
   their app red means "the tab you are on", and a value that fell is not a
   navigation state. No green is introduced either. Turn the screen greyscale
   and nothing is lost. */

.status { display: grid; gap: var(--sp-6); max-width: 34rem; }
.status__lead { display: grid; gap: var(--sp-3); }

/* The arrow flows INSIDE the heading rather than sitting in a flex row: at
   320px a flex arrow ends up alone on its own line above a two-line word. */
.status__dir {
  font-size: var(--t-2xl); line-height: 1.12; font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.status__dir.is-up    { color: var(--gain); font-weight: 700; }
.status__dir.is-down  { color: var(--fall); }
.status__dir.is-level { color: var(--level); }
/* Sized against the sans, not the serif this file used to set: the glyph is
   blockier and sits differently on the baseline. */
.status__arrow {
  display: inline-block; font-size: .42em; line-height: 1;
  margin-right: .55em; vertical-align: .3em;
}

.status__line {
  font-size: var(--t-md); line-height: 1.5; color: var(--ink);
  max-width: 36ch;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Block 2. Quieter than the sentence above it, louder than the fine print. */
.status__rarity {
  font-size: var(--t-base); line-height: 1.5; color: var(--ink-2);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
}

/* The liability sentence: still adjacent to the figure, now one line of it. */
.status__fine {
  font-size: var(--t-xs); line-height: 1.45; color: var(--ink-3);
  max-width: 44ch;
}

/* Block 3 — hand-written, or absent. */
.story {
  display: grid; gap: 7px;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--line-soft);
}
.story__hook {
  font-size: var(--t-lg); line-height: 1.25; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink);
  max-width: 26ch;
}
.story__body {
  font-size: var(--t-base); line-height: 1.62; color: var(--ink-2);
}

/* The quiet way out to the working. Deliberately not a button. */
.behind-link {
  justify-self: start;
  background: none; border: 0; padding: 10px 0; min-height: var(--tap);
  font: inherit; font-size: var(--t-sm);
  cursor: pointer; text-align: left;
  border-bottom: 1px solid transparent;
}
/* A link, so it is blue, as links are in their app. */
.behind-link { color: var(--link); }
.behind-link:hover { border-bottom-color: var(--link); }

.attrib { font-size: var(--t-2xs); color: var(--ink-3); }
.attrib a { color: var(--link); }

/* ── The garage ─────────────────────────────────────────────────────────────

   One warm line, then the cards. What used to be here: two total cards with a
   glow, a summed figure with a spread beneath it, the method footnote, and the
   excluded-vehicles explainer. */

/* The one sentence the garage opens with. Their weight, not a serif's:
   semibold at 20px, measured to about 26 characters a line. */
.garage-line {
  font-size: var(--t-lg); line-height: 1.4; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink);
  max-width: 26ch;
  font-variant-numeric: tabular-nums lining-nums;
}
.garage-note { font-size: var(--t-2xs); color: var(--ink-3); line-height: 1.45; }

/* ── Vehicle cards ──────────────────────────────────────────────────────────
   Photo, title, one line. */

.veh-list { display: grid; gap: var(--sp-3); }
.veh-card {
  display: grid; grid-template-columns: 96px 1fr; gap: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; text-align: left; width: 100%;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, transform .12s ease;
}
.veh-card:hover { border-color: var(--line-strong); }
.veh-card:active { transform: scale(.995); }
.veh-card__media {
  position: relative; min-height: 100px;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--surface-3) 88%, var(--ink) 4%),
      var(--surface-3) 62%);
}
.veh-card__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.veh-card__body {
  padding: 14px var(--sp-4); display: flex; flex-direction: column; justify-content: center;
  gap: 3px; min-width: 0;
}
/* Their card title is 20px, but that is a card the full width of the screen.
   This one is a thumbnail plus a body ~215px wide, where 20px put a single
   letter of "1973 Porsche 911 T" on a second line. 17px is the same type at
   the size this card actually has. */
.veh-card__name {
  font-weight: 600; font-size: var(--t-md);
  line-height: 1.3; letter-spacing: -.01em; color: var(--ink);
}
.veh-card__nick {
  display: block;
  font-size: var(--t-2xs); color: var(--ink-3);
  letter-spacing: .05em; text-transform: uppercase;
}
.veh-card__status {
  display: flex; align-items: baseline; gap: 7px;
  margin-top: 3px;
  font-size: var(--t-sm); line-height: 1.4; font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums lining-nums;
}
.veh-card__status.is-up    { color: var(--gain); font-weight: 700; }
.veh-card__status.is-down  { color: var(--fall); }
.veh-card__status.is-level { color: var(--level); }
.veh-card__status.is-quiet { color: var(--ink-3); font-weight: 500; }
.veh-card__status .status__arrow { font-size: .8em; margin-right: 0; vertical-align: baseline; }

.photo-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  overflow: hidden; color: var(--ink-3);
}
.photo-ph svg { width: 76%; height: auto; opacity: .75; }
.photo-credit {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 10px 8px 5px; font-size: 9.5px; line-height: 1.25; color: var(--overlay-ink);
  background: linear-gradient(transparent, var(--overlay-scrim));
  text-shadow: 0 1px 2px var(--overlay-scrim);
}
.photo-credit a { color: inherit; }

/* ── The add flow's sharpness bar ───────────────────────────────────────────

   A <progress value> and not a styled width: the production CSP sends
   style-src 'self' with no 'unsafe-inline', so every inline width this file
   used to set was silently refused after upload. */

.sharp { display: grid; gap: 5px; padding-top: var(--sp-2); }
.sharp__label { font-size: var(--t-2xs); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.sharp__note  { font-size: var(--t-xs); color: var(--ink-3); }
.sharp__bar {
  -webkit-appearance: none; appearance: none;
  width: 100%; max-width: 240px; height: 6px; border: 0;
  border-radius: 100px; overflow: hidden;
  background: var(--surface-3); color: var(--ink);
}
.sharp__bar::-webkit-progress-bar { background: var(--surface-3); border-radius: 100px; }
.sharp__bar::-webkit-progress-value { background: var(--ink); border-radius: 100px; }
.sharp__bar::-moz-progress-bar { background: var(--ink); border-radius: 100px; }

/* ── Behind the curtain ─────────────────────────────────────────────────────
   Only reachable through "The sales behind this". */

.sales-head { display: grid; gap: 5px; }
.sales-head__title {
  font-size: var(--t-lg);
  font-weight: 600; letter-spacing: -.01em;
}
.figure-strip {
  display: grid; gap: 5px;
  padding: var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
}

/* ── Detail: scatter chart ──────────────────────────────────────────────── */

.chart-wrap { display: grid; gap: var(--sp-3); }
.chart { display: block; width: 100%; height: auto; touch-action: manipulation; }
/* The band is the middle half of each month either way, so it is the same
   neutral whichever direction the line took — a hue here would have been a
   meaning nothing in the legend claims. */
.chart__band { fill: var(--ink); fill-opacity: .10; }
.chart__band--down { fill: var(--ink); fill-opacity: .10; }
.chart__grid { stroke: var(--line); stroke-width: 1; }
.chart__axis { fill: var(--ink-3); font-size: 10px; }
.chart__dot { fill: var(--ink-3); fill-opacity: .85; stroke: none; }
.chart__dot:hover, .chart__dot.is-active { fill: var(--ink-2); fill-opacity: 1; }
.chart__hit { fill: transparent; cursor: crosshair; touch-action: none; }
.chart__guide { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; }

.chart__paid { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart__paid-label, .chart__now-label {
  paint-order: stroke fill;
  stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round;
}
.chart__paid-label { fill: var(--ink-3); font-size: 10.5px; font-weight: 600; }
/* "Your car today" is the one point that must be found at a glance. It is
   white against grey dots, and it is labelled — the halo is the emphasis,
   not a colour. */
.chart__now-halo { fill: var(--ink); fill-opacity: .22; }
.chart__now { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.chart__now-label { fill: var(--ink); font-size: 10.5px; font-weight: 700; }
/* The same tab row as .segmented, at the size this control wants. */
.chart-range { display: flex; gap: var(--sp-2); }
.chart-range__opt {
  min-height: 30px; padding: 4px 12px; border-radius: var(--r-md);
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border: 1.5px solid var(--ink); color: var(--ink); background: none;
}
.chart-range__opt[aria-pressed='true'] {
  color: var(--accent-ink); border-color: var(--accent-on); background: var(--accent-on);
}
.chart__legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: var(--t-xs); color: var(--ink-3);
}
.chart__legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.swatch--dot  { background: var(--ink-3); opacity: .85; }
.swatch--band { background: var(--surface-3); border: 1px solid var(--line-strong); border-radius: 2px; }
.swatch--paid { width: 14px; height: 0; border-top: 2px dashed var(--ink-3); border-radius: 0; }
.swatch--now  { background: var(--ink); }

.readout {
  min-height: 62px; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface-2); font-size: var(--t-sm);
  display: grid; gap: 3px; align-content: center;
}
.readout__date { font-size: var(--t-2xs); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.readout__price { font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--t-md); }
.readout__meta { color: var(--ink-3); font-size: var(--t-xs); }

/* ── Disclosure / what-if / comps ───────────────────────────────────────── */

.disclose { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.disclose__btn {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-4) var(--sp-5); min-height: var(--tap); text-align: left;
  font-weight: 600; font-size: var(--t-base);
}
.disclose__btn:hover { background: var(--surface-2); }
.disclose__chev { margin-left: auto; color: var(--ink-3); transition: transform .22s ease; flex: 0 0 auto; }
.disclose__btn[aria-expanded='true'] .disclose__chev { transform: rotate(180deg); }
.disclose__panel { padding: 0 var(--sp-5) var(--sp-5); display: grid; gap: var(--sp-4); }

.kv { display: grid; gap: 0; font-size: var(--t-sm); }
.kv__row {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.kv__row:last-child { border-bottom: 0; }
.kv__k { color: var(--ink-3); }
.kv__v {
  color: var(--ink); text-align: right;
  font-variant-numeric: tabular-nums;
}

.sales-table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); }
.sales-table th {
  text-align: left; font-weight: 700; color: var(--ink-3);
  font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase;
  padding: 0 0 7px; border-bottom: 1px solid var(--line);
}
.sales-table th:nth-child(n+2), .sales-table td:nth-child(n+2) { text-align: right; }
.sales-table td {
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.sales-table tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.whatif { display: grid; gap: var(--sp-3); }
.whatif__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.whatif__tile {
  padding: var(--sp-3); border-radius: var(--r-md); text-align: left;
  background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 3px;
  transition: border-color .15s ease;
}
.whatif__tile:hover { border-color: var(--line-strong); }
.whatif__tile[aria-pressed='true'] { border-color: var(--ink); background: var(--surface-3); }
.whatif__grade { font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); }
.whatif__desc  { font-size: 10.5px; color: var(--ink-3); line-height: 1.35; }
.whatif__val {
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: var(--t-base); color: var(--ink);
}
.whatif__note {
  font-size: var(--t-xs); color: var(--ink-3);
  padding: var(--sp-3); border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px dashed var(--line);
}

/* ── Empty / no-data / error ────────────────────────────────────────────── */

.blank {
  display: grid; gap: var(--sp-4); justify-items: center; text-align: center;
  padding: var(--sp-8) var(--sp-4);
}
.blank__mark {
  width: 62px; height: 62px; border-radius: var(--r-lg); display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3);
}
.blank__title { font-size: var(--t-lg); font-weight: 600; }
.blank__text { color: var(--ink-2); font-size: var(--t-sm); max-width: 34ch; }

.banner {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  border-left: 3px solid var(--line-strong);
  font-size: var(--t-sm); color: var(--ink-2);
}
.banner__icon { flex: 0 0 auto; color: var(--ink-3); margin-top: 1px; }
.banner strong { color: var(--ink); display: block; margin-bottom: 2px; font-weight: 600; }

/* ── Skeletons (not spinners) ───────────────────────────────────────────── */

.sk {
  position: relative; overflow: hidden;
  background: var(--surface-2); border-radius: 6px;
}
.sk::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--ink) 7%, transparent), transparent);
  animation: sweep 1.35s ease-in-out infinite;
}
@keyframes sweep { 100% { transform: translateX(100%); } }
.sk--line   { height: 11px; }
.sk--title  { height: 17px; width: 62%; }
.sk--hero   { height: 40px; width: 74%; border-radius: 8px; }
.sk--media  { position: absolute; inset: 0; border-radius: 0; }
.w-40 { width: 40%; } .w-55 { width: 55%; } .w-70 { width: 70%; } .w-85 { width: 85%; }

/* ── Add-vehicle flow ───────────────────────────────────────────────────── */

.steps { display: flex; gap: 5px; margin-bottom: var(--sp-5); }
.steps__pip {
  height: 3px; flex: 1 1 0; border-radius: 2px; background: var(--line);
  transition: background-color .3s ease;
}
/* role="presentation" on the row, and the step's own heading says where you
   are — so this is decoration. The step you are on is the brand red, which
   is what red means everywhere else in this file. */
.steps__pip.is-done { background: var(--ink-3); }
.steps__pip.is-now  { background: var(--accent); }

.step-head { display: grid; gap: 5px; margin-bottom: var(--sp-5); }
.step-head h2 {
  font-size: var(--t-xl);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}
.step-head p { color: var(--ink-2); font-size: var(--t-sm); }
/* AUDIT FIX (MAJOR 6): was style="text-align:center" — refused under the
   production CSP, which left the step-4 confirmation heading left-aligned
   under a centred tick. */
.step-head--center { text-align: center; }

.reason {
  display: grid; gap: 4px; padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  font-size: var(--t-sm); color: var(--ink-2);
}
.reason strong { color: var(--ink); font-weight: 700; }

.narrow-form { display: grid; gap: var(--sp-4); padding-bottom: 8px; }
.done-mark {
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  margin: 0 auto;
}

.sticky-foot {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--line-soft);
}

/* ── Toast ──────────────────────────────────────────────────────────────── */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
  z-index: 120; max-width: min(360px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: var(--r-md);
  background: var(--surface-3); color: var(--ink);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  font-size: var(--t-sm); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
body.is-framed .toast { position: absolute; bottom: 60px; }

/* ── Responsive growth ──────────────────────────────────────────────────── */

@media (min-width: 560px) {
  :root { --pad: 26px; }
  .whatif__grid { grid-template-columns: repeat(4, 1fr); }
  .veh-card { grid-template-columns: 132px 1fr; }
}
/* …but the phone shell is a 371px-wide screen sitting inside a wide viewport,
   so the width-based growth above is measuring the wrong box. Undo it inside
   the shell. The condition is the exact inverse of the query that collapses
   the shell, so these two can never both apply. */
@media (min-width: 901px) and (min-height: 701px) {
  body.is-framed .device__screen { --pad: 16px; }
  body.is-framed .veh-card { grid-template-columns: 96px 1fr; }
  body.is-framed .whatif__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
  .screen { max-width: 700px; margin: 0 auto; }
}
@media (min-width: 1040px) {
  body:not(.is-framed) .screen { max-width: 860px; }
  body:not(.is-framed) .veh-list { grid-template-columns: 1fr 1fr; }
  body:not(.is-framed) .appbar { padding-inline: max(var(--pad), calc(50vw - 430px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .sk::after { animation: none; opacity: .5; transform: none; }
}

@media (forced-colors: active) {
  .card, .veh-card, .disclose, .figure-strip { border: 1px solid CanvasText; }
  .sharp__bar { forced-color-adjust: none; }
}