/* MileMetric web-app — design tokens + components.
   Tokens are lifted verbatim from the approved mockups; component classes
   reproduce the mockup's inline-styled pieces so screens stay consistent. */

:root{
  --bg:#FCFCFB; --surface:#FFFFFF; --surface-2:#F4F6F6; --surface-3:#ECEFF0;
  --border:#E2E6E8; --border-strong:#CFD6D9;
  --fg:#0B1D2E; --fg-2:#55616D; --fg-3:#8B96A1;
  --teal:#00C9A7; --teal-ink:#00806B; --teal-soft:#E6FAF5; --navy:#0B1D2E;
  --logo-dash:#C5CACD;
  --b-exc:#00A98A; --b-good:#6FD0AE; --b-typ:#55616D; --b-below:#E8A13A; --b-poor:#E5544B;
  --b-exc-soft:#E2F6F1; --b-good-soft:#EAF8F2; --b-typ-soft:#EEF0F1; --b-below-soft:#FDF3E3; --b-poor-soft:#FCEBEA;
  --amber-ink:#A9701C; --coral-ink:#B93A32;
  --track:#E7EBEC;
  --sh-1:0 1px 2px rgba(11,29,46,.06), 0 1px 3px rgba(11,29,46,.04);
  --sh-2:0 4px 14px rgba(11,29,46,.09), 0 1px 3px rgba(11,29,46,.05);
}
:root[data-theme="dark"]{
  --bg:#0B1D2E; --surface:#152636; --surface-2:#1B3044; --surface-3:#22394E;
  --border:#263D51; --border-strong:#33506A;
  --fg:#F1F6F8; --fg-2:#9AACBA; --fg-3:#71879A;
  --teal-ink:#3FE0C3; --teal-soft:#0E3A38;
  --logo-dash:#55616D;
  --b-exc:#2EC7A6; --b-good:#7FD9BA; --b-typ:#8FA2B1; --b-below:#F0B45C; --b-poor:#F27168;
  --b-exc-soft:#123B39; --b-good-soft:#123B39; --b-typ-soft:#1E3245; --b-below-soft:#3A2C15; --b-poor-soft:#3B1D1C;
  --amber-ink:#F0B45C; --coral-ink:#F27168;
  --track:#22394E;
  --sh-1:0 1px 2px rgba(0,0,0,.3); --sh-2:0 6px 18px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0}
/* Column flexbox on the body so the footer can be pushed to the bottom of a
   short page (`.footer{margin-top:auto}`) instead of floating halfway up with
   dead space under it. `dvh` not `vh`: mobile Safari's `100vh` is the height
   WITHOUT its toolbar, so a vh-based page always overshoots by the toolbar. */
body{background:var(--bg);color:var(--fg);
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
/* REQUIRED BY THE LINE ABOVE, not an optimisation.
   `.container` carries `margin:0 auto`, and an AUTO CROSS-AXIS MARGIN DISABLES
   `align-items:stretch`: the item is sized by fit-content instead of filling
   the line. fit-content of a container holding `.cmp` (min-width 640px) or
   `.batch` (720px) is that table plus padding, so on a phone the container
   became ~704px, the page grew wider than the viewport, and the header,
   content and footer all scrolled sideways together.
   `width:100%` restores the fill that stretch would have given (max-width and
   the auto margins still centre it on a wide screen). `min-width:0` is the
   companion: without it a flex item also refuses to shrink below its
   content's min-content width. Making the body a flex column for the sticky
   footer is what introduced this, so the two rules travel together. */
body > *{min-width:0;width:100%}
a{color:var(--teal-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1{margin:0 0 5px;font-size:29px;line-height:1.15;letter-spacing:-.03em}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace}
.muted{color:var(--fg-2)}.muted-3{color:var(--fg-3)}

/* --- shell --- */
.topbar{position:sticky;top:0;z-index:50;background:var(--surface);
  border-bottom:1px solid var(--border);padding:11px 32px;
  display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:9px;font-size:14.5px;letter-spacing:-.02em;color:var(--fg)}
.brand:hover{text-decoration:none}
.brand .wordmark{font-weight:400;white-space:nowrap}
.brand b{font-weight:700}
.nav{display:flex;gap:2px;font-weight:600;font-size:13px}
.nav a{padding:6px 11px;border-radius:8px;color:var(--fg-2)}
.nav a.active{background:var(--surface-3);color:var(--fg)}
.nav a:hover{text-decoration:none;color:var(--fg)}
.spacer{flex:1}
.lookups-left{font-weight:500;font-size:12px;color:var(--fg-3)}
.role-chip{height:23px;padding:0 9px;display:inline-flex;align-items:center;border-radius:7px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--fg-2);
  font:600 10.5px 'IBM Plex Mono',monospace;text-transform:uppercase}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px}
.iconbtn{height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--border-strong);
  background:transparent;color:var(--fg);font:600 12px Inter,sans-serif;cursor:pointer}
/* the toggle shows the theme it switches TO: moon while light, sun while dark */
.themebtn{padding:0 10px;font-size:14px;line-height:1}
.themebtn .to-light{display:none}
:root[data-theme="dark"] .themebtn .to-dark{display:none}
:root[data-theme="dark"] .themebtn .to-light{display:inline}

.container{max-width:1180px;margin:0 auto;padding:30px 32px 40px}
.container-narrow{max-width:1024px}

/* --- cards / buttons --- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:22px 24px;box-shadow:var(--sh-1)}
.card-teal{border-left:3px solid var(--teal)}
.kicker{font:600 12px Inter,sans-serif;color:var(--fg-3);letter-spacing:.04em;margin-bottom:12px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}

.btn{height:38px;padding:0 15px;border-radius:9px;border:1px solid var(--border-strong);
  background:transparent;color:var(--fg);font:600 13px Inter,sans-serif;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  /* a label that wraps mid-phrase ("Compare / with / another car") is worse
     than a row that wraps between buttons */
  white-space:nowrap;flex:none}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{filter:brightness(1.1)}
.btn-accent{background:var(--teal);border:none;color:#04121E;font-weight:700;height:42px}
.btn-accent:hover{filter:brightness(1.05)}
.btn-lg{height:46px;padding:0 22px;font-size:14px}

label{display:block;font:600 12.5px Inter,sans-serif;color:var(--fg-2);margin-bottom:6px}
.input{width:100%;height:42px;padding:0 13px;border-radius:9px;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--fg);font:500 14px Inter,sans-serif;outline:none}
.input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.field{margin-bottom:14px}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.actions form{margin:0}

/* --- UK plate --- */
.plate{display:inline-flex;height:32px;border-radius:7px;overflow:hidden;border:1px solid var(--border-strong)}
.plate .gb{width:18px;background:var(--navy);color:#fff;display:flex;align-items:flex-end;
  justify-content:center;padding-bottom:4px;font:700 8px 'IBM Plex Mono',monospace}
.plate .reg{display:flex;align-items:center;padding:0 10px;background:var(--surface);
  font:600 15px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:var(--fg)}
.plate-input{height:58px;text-align:center;text-transform:uppercase;letter-spacing:.18em;
  font:700 26px 'IBM Plex Mono',monospace;background:#F7D131;color:#0B1D2E;border:2px solid #0B1D2E;border-radius:10px}
.plate-input::placeholder{color:#0B1D2E;opacity:.45}

.report-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:14px}

/* --- score card / bands --- */
.score-num{font:700 72px/.88 Inter,sans-serif;letter-spacing:-.045em;color:var(--fg)}
.band-pill{display:inline-flex;align-items:center;gap:6px;height:25px;padding:0 11px;border-radius:99px;
  font:600 12.5px Inter,sans-serif}
.band-pill i{width:7px;height:7px;border-radius:50%;display:inline-block}
.ladder{display:flex;flex-direction:column;gap:4px}
.ladder .rung{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:8px}
.ladder .rung.on{outline:1.5px solid var(--b-good)}
.ladder .bar{width:4px;height:20px;border-radius:2px}
.ladder .name{flex:1;font:500 12.5px Inter,sans-serif;color:var(--fg-2)}
.ladder .rung.on .name{font-weight:700;color:var(--fg)}
.ladder .rng{font:400 11px 'IBM Plex Mono',monospace;color:var(--fg-3)}

.b-exc{background:var(--b-exc)}.b-good{background:var(--b-good)}.b-typ{background:var(--b-typ)}
.b-below{background:var(--b-below)}.b-poor{background:var(--b-poor)}
.pill-exc,.pill-good{background:var(--b-good-soft);color:var(--b-exc)}
.pill-typ{background:var(--b-typ-soft);color:var(--b-typ)}
.pill-below{background:var(--b-below-soft);color:var(--amber-ink)}
.pill-poor{background:var(--b-poor-soft);color:var(--coral-ink)}

/* --- horizons --- */
.hz{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.hz .k{font:600 10.5px 'IBM Plex Mono',monospace;color:var(--fg-2);letter-spacing:.03em;text-transform:uppercase}
.hz .v{display:flex;align-items:baseline;gap:3px;margin:4px 0 7px}
.hz .v b{font:700 30px/1 Inter,sans-serif;letter-spacing:-.03em;color:var(--fg)}
.hz .v s{font:600 14px Inter,sans-serif;color:var(--fg-2);text-decoration:none}
.hz .track{height:5px;border-radius:99px;background:var(--track);overflow:hidden}
.hz .track > div{height:100%}
.hz .fleet{font:400 11px Inter,sans-serif;color:var(--fg-3);margin-top:6px}

/* --- TCO --- */
.tco-num{display:flex;align-items:baseline;gap:9px;margin-bottom:16px}
.tco-num b{font:700 34px/1 Inter,sans-serif;letter-spacing:-.035em;color:var(--fg)}
.tco-num s{font:500 13px Inter,sans-serif;color:var(--fg-2);text-decoration:none}
.tco-bar{position:relative;height:14px;border-radius:99px;background:linear-gradient(90deg,#B6EDE0,#00C9A7);margin-top:5px}
.tco-bar .mark{position:absolute;top:-6px;bottom:-6px;width:4px;border-radius:2px;background:var(--fg);box-shadow:0 0 0 3px var(--surface)}
.tco-ends{position:relative;height:18px;margin-top:7px;font:500 11.5px Inter,sans-serif;color:var(--fg-2)}
.tco-ends .lo{position:absolute;left:0}.tco-ends .hi{position:absolute;right:0}
.tco-ends b{font-weight:700;color:var(--fg)}

/* --- category bars --- */
.cat{padding:11px 0;border-top:1px solid var(--border)}
.cat .head{display:flex;align-items:center;gap:10px}
.cat .name{width:162px;flex:none;font:600 13.5px Inter,sans-serif;color:var(--fg)}
.cat .bar{flex:1;position:relative;height:22px;background:var(--surface-2);border-radius:6px}
.cat .tick{position:absolute;left:33.3%;top:-3px;bottom:-3px;width:1.5px;background:var(--border-strong)}
.cat .fill{position:absolute;left:0;top:0;bottom:0;border-radius:6px}
.cat .mult{width:92px;flex:none;text-align:right;font:700 15px Inter,sans-serif;color:var(--fg)}
.cat .mult s{font-weight:500;font-size:12px;color:var(--fg-2);text-decoration:none}
.cat .tag{width:120px;flex:none;display:flex;justify-content:flex-end}
.cat .ev{padding-left:172px;font:400 12.5px/1.5 Inter,sans-serif;color:var(--fg-2);margin-top:5px}
.axis{position:relative;height:15px;margin:0 232px 4px 172px;font:400 10.5px 'IBM Plex Mono',monospace;color:var(--fg-3)}
.axis .a0{position:absolute;left:0}
.axis .a1{position:absolute;left:33.3%;transform:translateX(-50%);white-space:nowrap;color:var(--fg-2)}
.axis .a2{position:absolute;left:66.6%;transform:translateX(-50%)}
.axis .a3{position:absolute;left:100%;transform:translateX(-100%)}

/* --- driver chips --- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:10px;font:500 12.5px Inter,sans-serif}
.chip b{font-weight:700}.chip s{font-weight:600;opacity:.75;text-decoration:none}
.chip.raise{background:var(--b-poor-soft);color:var(--coral-ink)}
.chip.lower{background:var(--teal-soft);color:var(--teal-ink)}

/* --- sufficiency --- */
.info{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--teal);
  border-radius:12px;padding:17px 20px}
.info .h{display:flex;align-items:center;gap:9px;margin-bottom:7px;font:600 13.5px Inter,sans-serif;color:var(--fg)}
.info .dot{width:18px;height:18px;flex:none;border-radius:50%;border:1.5px solid var(--teal-ink);
  color:var(--teal-ink);font:700 11px Inter,sans-serif;display:flex;align-items:center;justify-content:center}
.info p{margin:0;font:400 12.5px/1.6 Inter,sans-serif;color:var(--fg-2)}

/* --- watchlist --- */
.watch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.watch-card{position:relative}
.watch-x{position:absolute;top:14px;right:14px;margin:0}
.watch-x .iconbtn{width:28px;height:28px;padding:0;font-size:15px;line-height:1}
.watch-name{font-size:17px;letter-spacing:-.02em;margin:0 34px 4px 0}
.watch-meta{font:400 12px Inter,sans-serif;color:var(--fg-3)}
.watch-score{font:700 44px/1 Inter,sans-serif;letter-spacing:-.04em}
.watch-delta{font:400 11.5px Inter,sans-serif;color:var(--fg-3);margin-top:5px}
.watch-delta .up{color:var(--b-exc);font-weight:600}
.watch-delta .down{color:var(--amber-ink);font-weight:600}
.watch-row{display:flex;justify-content:space-between;gap:12px;margin-top:9px;
  font:400 12px Inter,sans-serif;color:var(--fg-2)}
.watch-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:12px}
.watch-foot a{font-weight:600}
.claim{max-width:640px;margin:0 auto}
.claim .checkbox{align-items:center}

/* --- comparison --- */
.cmp-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;
  border-radius:9px;border:1px solid var(--border-strong);background:var(--surface);
  color:var(--fg-2);font:600 12px Inter,sans-serif}
.cmp-chip:hover{text-decoration:none;border-color:var(--teal)}
.cmp-chip.on{border-color:var(--teal);background:var(--teal-soft);color:var(--teal-ink)}
.cmp-chip .mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.05em}
.cmp-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.cmp{border-collapse:collapse;width:100%;min-width:640px}
.cmp th,.cmp td{border-bottom:1px solid var(--border);padding:16px 18px;
  vertical-align:top;text-align:left}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:none}
.cmp td{border-left:1px solid var(--border);min-width:210px}
.cmp-label{width:150px;background:var(--surface-2);color:var(--fg-3);
  font:600 10.5px 'IBM Plex Mono',monospace;letter-spacing:.06em;white-space:nowrap}
.cmp-name{font:700 15px Inter,sans-serif;letter-spacing:-.02em;margin:3px 0 2px}
.cmp-score{font:700 30px/1 Inter,sans-serif;letter-spacing:-.035em}
.cmp-cost{font:700 24px/1.1 Inter,sans-serif;letter-spacing:-.03em}
.cmp-risk{font:700 15px Inter,sans-serif}
.fp{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.fp-name{width:52px;flex:none;font:500 11.5px Inter,sans-serif;color:var(--fg-2)}
.fp-bar{flex:1;height:6px;border-radius:99px;background:var(--track);overflow:hidden}
.fp-bar i{display:block;height:100%;border-radius:99px}
.fp-mult{width:36px;flex:none;text-align:right;font:600 11.5px 'IBM Plex Mono',monospace}

/* --- My Garage --- */
.garage-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:900px){.garage-grid{grid-template-columns:1fr}}
.premot{padding:12px 0;border-top:1px solid var(--border)}
.premot:first-of-type{border-top:none;padding-top:0}
.premot-name{font:600 13.5px Inter,sans-serif}
.premot-pct{font:700 15px Inter,sans-serif}
.premot-bar{height:6px;border-radius:99px;background:var(--track);overflow:hidden;margin:8px 0 6px}
.premot-bar i{display:block;height:100%;border-radius:99px}
.premot-ev{font:400 12px/1.5 Inter,sans-serif;color:var(--fg-2)}

/* --- risk numbers -------------------------------------------------------
   A percentage never appears without saying what it is a percentage OF.
   See templates/_risk.html; these classes exist so the wording is styled
   consistently rather than re-invented per surface. */
.risk{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.risk-n{font-family:Inter,sans-serif;font-weight:700;letter-spacing:-.01em}
.risk-u{font:500 11.5px/1.2 Inter,sans-serif;color:var(--fg-2);
        letter-spacing:.01em}
/* Tight variant for table cells: the unit drops under the number so the
   column stays narrow, and it is never dropped altogether. */
.risk-tight{flex-direction:column;align-items:flex-end;gap:1px}
.risk-tight .risk-u{font-size:10.5px}
.risk-vs{font:400 11.5px/1.2 Inter,sans-serif;color:var(--fg-3)}
.risk-note{font:400 12px/1.55 Inter,sans-serif;color:var(--fg-2);
           margin:0 0 14px}
.risk-note b{color:var(--fg);font-weight:600}
@media (max-width:560px){
  /* On a phone the sentence wraps rather than pushing the band pill off the
     card, which is what the old single-line row did. */
  .risk{white-space:normal}
}
.spark{position:relative;height:130px;margin:18px 0 6px}
.spark svg{width:100%;height:100%;display:block}
.spark i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--teal);
  transform:translate(-50%,-50%)}
.spark i.last{width:13px;height:13px;background:var(--surface);
  border:2.5px solid var(--teal)}
.traj{border-collapse:collapse;width:100%;margin-top:14px}
.traj th{text-align:right;padding:0 0 8px;font:600 10.5px 'IBM Plex Mono',monospace;
  color:var(--fg-3);letter-spacing:.06em;border-bottom:1px solid var(--border)}
.traj th:first-child{text-align:left}
.traj td{text-align:right;padding:8px 0;font:400 13px Inter,sans-serif;
  border-bottom:1px solid var(--border)}
.traj td:first-child{text-align:left;font-size:12.5px;color:var(--fg-2)}
.traj tr:last-child td{border-bottom:none}
.tx-exc,.tx-good{color:var(--b-exc);font-weight:600}
.tx-typ{color:var(--fg-2);font-weight:600}
.tx-below{color:var(--amber-ink);font-weight:600}
.tx-poor{color:var(--coral-ink);font-weight:600}

/* --- dealer --- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:14px}
.tile-num{font:700 40px/1 Inter,sans-serif;letter-spacing:-.04em;margin:2px 0 6px}
.dealer-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:900px){.dealer-grid{grid-template-columns:1fr}}
.joblink{display:block;padding:12px 14px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface-2);color:var(--fg)}
.joblink:hover{text-decoration:none;border-color:var(--teal)}
.batch{border-collapse:collapse;width:100%;min-width:720px}
.batch th{text-align:left;padding:11px 18px;background:var(--surface-2);
  font:600 10.5px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--fg-3);
  border-bottom:1px solid var(--border);white-space:nowrap}
.batch td{padding:12px 18px;border-bottom:1px solid var(--border);
  font:400 13.5px Inter,sans-serif}
.batch tr:last-child td{border-bottom:none}
.batch .r{text-align:right}
.batch .plate-cell{font:600 13px 'IBM Plex Mono',monospace;letter-spacing:.06em;white-space:nowrap}
.batch tr.unscored td{color:var(--fg-3)}
.badge-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}

.badge-preview{padding:20px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface-2);display:flex;justify-content:center}
.snippet{width:100%;padding:14px;border-radius:10px;border:1px solid var(--border-strong);
  background:var(--navy);color:#9AE6D3;font:400 11.5px/1.6 'IBM Plex Mono',monospace;
  resize:vertical}

.fixrow{display:grid;grid-template-columns:170px 200px 1fr;gap:18px;
  align-items:start;padding:14px 0;border-top:1px solid var(--border)}
.fixrow:first-child{border-top:none;padding-top:0}
.fixrow-why{display:block;font:400 12.5px/1.5 Inter,sans-serif;color:var(--fg-2)}

/* --- warranty --- */
.rc{border-collapse:collapse;width:100%}
.rc th{text-align:left;padding:0 8px 8px 0;font:600 10.5px 'IBM Plex Mono',monospace;
  letter-spacing:.05em;color:var(--fg-3)}
.rc td{padding:0 8px 8px 0}
.rc .input{height:38px}
.rc-loadings{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.rc-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.verdict{border-width:1.5px}
.verdict.v-accept,.verdict.v-accept_exclusions{border-color:var(--teal);background:var(--teal-soft)}
.verdict.v-refer{border-color:var(--b-below);background:var(--b-below-soft)}
.verdict.v-decline{border-color:var(--b-poor);background:var(--b-poor-soft)}
.verdict-chip{display:inline-flex;align-items:center;height:26px;padding:0 12px;
  border-radius:99px;background:var(--navy);color:#fff;
  font:700 10.5px 'IBM Plex Mono',monospace;letter-spacing:.07em}
.verdict.v-refer .verdict-chip{background:var(--amber-ink)}
.verdict.v-decline .verdict-chip{background:var(--coral-ink)}
.quote-figs{display:flex;gap:26px;flex-wrap:wrap;flex:none}
.quote-figs.unpriced{max-width:280px;display:block}
.fig{font:700 27px/1.1 Inter,sans-serif;letter-spacing:-.03em;margin:3px 0 2px}
.fig s{font:600 13px Inter,sans-serif;text-decoration:none;color:var(--fg-2)}
.quote-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:14px;
  align-items:start;margin-top:14px}
@media(max-width:960px){.quote-grid{grid-template-columns:1fr}}
.sched{padding:11px 13px;border-radius:10px;margin-bottom:9px;
  background:var(--surface-2);border:1px solid transparent}
.sched-excluded{background:var(--b-poor-soft);border-color:var(--b-poor)}
.sched-capped{background:var(--b-below-soft);border-color:var(--b-below)}
.sched-not_covered{opacity:.6}
.sched-mark{font-weight:700;width:14px;flex:none}
.sched-excluded .sched-mark{color:var(--coral-ink)}
.sched-capped .sched-mark{color:var(--amber-ink)}
.sched-full .sched-mark{color:var(--b-exc)}
.sched-name{font:600 13.5px Inter,sans-serif}
.sched-note{font:400 12px/1.5 Inter,sans-serif;color:var(--fg-2);margin-top:5px}

/* --- claims --- */
.claims-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:14px;align-items:start}
@media(max-width:960px){.claims-grid{grid-template-columns:1fr}}
.claimrow{display:block;padding:14px 20px;border-top:1px solid var(--border);color:var(--fg)}
.claimrow:hover{text-decoration:none;background:var(--surface-2)}
.claimrow.on{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--teal)}
.claim-flag{font:500 11.5px Inter,sans-serif}
.claim-flag.ok{color:var(--b-exc)}
.claim-flag.warn{color:var(--amber-ink)}
.claim-flag.bad{color:var(--coral-ink)}
.timeline{position:relative;padding-left:20px}
.timeline:before{content:'';position:absolute;left:4px;top:6px;bottom:6px;
  width:1.5px;background:var(--border)}
.tl-item{position:relative;margin-bottom:18px}
.tl-item:before{content:'';position:absolute;left:-20px;top:4px;width:9px;height:9px;
  border-radius:50%;background:var(--fg-3)}
.tl-ok:before{background:var(--b-exc)}
.tl-warn:before{background:var(--b-below)}
.tl-claim:before{background:var(--b-poor)}
.tl-title{font:600 13.5px Inter,sans-serif}
.tl-date{font-size:11px;color:var(--fg-3);margin:2px 0 4px}
.tl-detail{font:400 12.5px/1.55 Inter,sans-serif;color:var(--fg-2)}
.rec{border-radius:12px;padding:16px 18px;margin-top:6px;border:1px solid}
.rec-pay{background:var(--b-good-soft);border-color:var(--b-exc)}
.rec-pay_capped{background:var(--b-below-soft);border-color:var(--b-below)}
.rec-refer{background:var(--b-below-soft);border-color:var(--b-below)}
.rec-decline{background:var(--b-poor-soft);border-color:var(--b-poor)}

/* --- admin --- */
.alert{padding:11px 15px;border-radius:10px;border:1px solid;
  font:400 13px/1.5 Inter,sans-serif}
.alert b{font-weight:700}
.alert-poor{background:var(--b-poor-soft);border-color:var(--b-poor);color:var(--coral-ink)}
.alert-below{background:var(--b-below-soft);border-color:var(--b-below);color:var(--amber-ink)}
.seg{padding:12px 0;border-top:1px solid var(--border)}
.seg:first-of-type{border-top:none;padding-top:0}
.seg .track{height:6px;border-radius:99px;background:var(--track);overflow:hidden}
.seg .track > div{height:100%;border-radius:99px}
.batch .track{height:6px;border-radius:99px;background:var(--track);overflow:hidden}
.batch .track > div{height:100%;border-radius:99px}

/* --- account area --- */
.acct{display:grid;grid-template-columns:210px 1fr;gap:26px;align-items:start}
.acct-nav-toggle{display:none}

.acct-nav{display:flex;flex-direction:column;gap:2px;font:500 13.5px Inter,sans-serif}
.acct-nav a{padding:9px 13px;border-radius:9px;color:var(--fg-2)}
.acct-nav a:hover{text-decoration:none;color:var(--fg);background:var(--surface-2)}
.acct-nav a.on{background:var(--surface-3);color:var(--fg);font-weight:600}
.acct-nav a.danger{color:var(--coral-ink)}
.acct-nav a.danger.on{background:var(--b-poor-soft)}
.acct-nav hr{border:none;border-top:1px solid var(--border);margin:10px 4px}
.acct-signout{border:none;background:none;padding:9px 13px;cursor:pointer;
  font:500 13.5px Inter,sans-serif;color:var(--fg-2);text-align:left;width:100%}
.acct-signout:hover{color:var(--fg)}
.avatar-lg{width:56px;height:56px;font-size:19px;flex:none}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}
@media(max-width:600px){.prefrow{flex-direction:column;align-items:flex-start;gap:12px}}
@media(max-width:640px){.fields{grid-template-columns:1fr}}
.fl{display:block;font:400 11.5px Inter,sans-serif;color:var(--fg-3);margin-bottom:3px}
.fv{display:block;font:500 14px Inter,sans-serif;padding-bottom:9px;
  border-bottom:1px solid var(--border)}
.tag-ok{display:inline-block;padding:1px 7px;border-radius:6px;background:var(--b-good-soft);
  color:var(--b-exc);font:600 10px 'IBM Plex Mono',monospace;vertical-align:middle}
.tag-muted{display:inline-block;padding:1px 7px;border-radius:6px;background:var(--surface-3);
  color:var(--fg-3);font:600 10px 'IBM Plex Mono',monospace;vertical-align:middle}
.prefrow{display:flex;align-items:center;gap:20px;justify-content:space-between;
  padding:15px 0;border-top:1px solid var(--border)}
.prefrow > div:first-child{max-width:460px}
.prefrow b{display:block;font:600 13.5px Inter,sans-serif;margin-bottom:3px}
.prefrow span{font:400 12.5px/1.5 Inter,sans-serif;color:var(--fg-2)}
.segbtns{display:inline-flex;background:var(--surface-2);border-radius:9px;padding:3px;flex:none}
.segbtns label{margin:0;padding:6px 13px;border-radius:7px;cursor:pointer;
  font:500 12.5px Inter,sans-serif;color:var(--fg-2);white-space:nowrap}
.segbtns label.on{background:var(--surface);color:var(--fg);font-weight:600;box-shadow:var(--sh-1)}
.segbtns input{display:none}
.toggle{position:relative;width:42px;height:24px;flex:none;margin:0;cursor:pointer}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle i{position:absolute;inset:0;border-radius:99px;background:var(--border-strong);
  transition:background .15s}
.toggle i:before{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:transform .15s}
.toggle input:checked + i{background:var(--teal)}
.toggle input:checked + i:before{transform:translateX(18px)}
.chan{width:100%;border-collapse:collapse}
.chan th{text-align:center;padding:0 0 10px;font:600 10.5px 'IBM Plex Mono',monospace;
  color:var(--fg-3);letter-spacing:.05em}
.chan th:first-child{text-align:left}
.chan td{text-align:center;padding:11px 0;border-top:1px solid var(--border);
  font:500 13.5px Inter,sans-serif}
.chan td:first-child{text-align:left}
.holdrow{display:flex;justify-content:space-between;gap:20px;padding:14px 0;
  border-top:1px solid var(--border)}
.holdrow b{display:block;font:600 13.5px Inter,sans-serif;margin-bottom:3px}
.holdrow span{font:400 12.5px/1.5 Inter,sans-serif;color:var(--fg-2)}
.sessrow{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:13px 0;border-top:1px solid var(--border)}
.linkbtn{border:none;background:none;padding:0;cursor:pointer;font:600 12.5px Inter,sans-serif;
  color:var(--teal-ink)}
.linkbtn.danger{color:var(--coral-ink)}
.closecols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:700px){.closecols{grid-template-columns:1fr}}
.dotlist{margin:10px 0 0;padding:0;list-style:none}
.dotlist li{position:relative;padding-left:15px;margin-bottom:9px;
  font:400 13px/1.55 Inter,sans-serif;color:var(--fg-2)}
.dotlist li:before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%}
.dotlist.gone li:before{background:var(--b-poor)}
.dotlist.kept li:before{background:var(--fg-3)}
.reason{margin:0;padding:8px 14px;border-radius:9px;border:1px solid var(--border-strong);
  cursor:pointer;font:500 12.5px Inter,sans-serif;color:var(--fg-2)}
.reason.on{border-color:var(--teal);background:var(--teal-soft);color:var(--teal-ink)}
.reason input{display:none}
.danger-link{color:var(--coral-ink);font-weight:600}
.acctmenu{position:relative}
.acctmenu summary{list-style:none;cursor:pointer}
.acctmenu summary::-webkit-details-marker{display:none}
.acctmenu-pop{position:absolute;right:0;top:calc(100% + 10px);min-width:230px;z-index:60;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--sh-2);padding:6px}
.acctmenu-head{display:flex;gap:10px;align-items:center;padding:10px 10px 12px;
  border-bottom:1px solid var(--border);margin-bottom:6px}
.acctmenu-pop a,.acctmenu-pop button{display:block;width:100%;text-align:left;padding:8px 10px;
  border-radius:8px;border:none;background:none;cursor:pointer;color:var(--fg);
  font:500 13px Inter,sans-serif}
.acctmenu-pop a:hover,.acctmenu-pop button:hover{text-decoration:none;background:var(--surface-2)}
.acctmenu-pop hr{border:none;border-top:1px solid var(--border);margin:6px 4px}

/* --- states --- */
.state{max-width:520px;margin:60px auto;text-align:center}
.state h2{font-size:22px;margin:0 0 8px}
.state p{color:var(--fg-2);font-size:14px;line-height:1.6}
.error{background:var(--b-poor-soft);color:var(--coral-ink);border-radius:9px;
  padding:10px 13px;font-size:13px;margin-bottom:14px}

/* --- footer --- */
/* margin-top:auto claims whatever vertical space is left, so the footer sits
   on the bottom edge of a short page and directly after the content on a long
   one. It must stay `auto`, not a fixed gap: a fixed gap is what left it
   floating mid-screen on the lookup page with a third of the viewport empty
   below it. */
.footer{background:var(--surface);border-top:1px solid var(--border);
  padding:18px 32px;margin-top:auto}
.footer .links{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:9px;font:500 12.5px Inter,sans-serif}
.footer p{margin:0;font:400 11.5px/1.6 Inter,sans-serif;color:var(--fg-3);max-width:900px}

/* --- auth --- */
/* Two rows so the alt link ("New here?") can sit UNDER the form column on a
   wide screen while living after the figures in the DOM, which is the order a
   phone needs. One piece of markup, two placements, no duplicate copy. */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr auto}
.auth .panel{grid-column:1;grid-row:1/3;background:var(--navy);color:#fff;
  padding:44px 48px;display:flex;
  flex-direction:column;justify-content:space-between;min-height:100vh}
/* Every pitch occupies the SAME grid cell, so the panel is as tall as the
   longest one and nothing below it moves when the copy changes. */
.auth .panel-mid{max-width:470px;display:grid}
.auth .pitch{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease}
.auth .pitch.on{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.auth .pitch{transition:none}}
.auth .panel h2{font-size:34px;line-height:1.18;letter-spacing:-.03em;margin:0 0 16px;color:#fff}
.auth .panel p{color:#9AACBA;font-size:14.5px;line-height:1.7;max-width:430px;margin:0}
.auth .stats-mobile{display:none}
.auth .panel-stats{display:flex;gap:38px;flex-wrap:wrap}
.auth .panel-stats b{display:block;font:700 21px 'IBM Plex Mono',monospace;color:#3FE0C3;
  letter-spacing:-.01em}
.auth .panel-stats span{display:block;font:400 11.5px Inter,sans-serif;color:#71879A;margin-top:4px}
.auth .form{grid-column:2;grid-row:1;display:flex;align-items:center;
  justify-content:center;padding:40px}
.auth .form .box{width:100%;max-width:380px}
.auth .auth-alt{grid-column:2;grid-row:2;display:none}
.checkbox{display:flex;gap:8px;align-items:flex-start;font:400 12.5px/1.5 Inter,sans-serif;color:var(--fg-2)}
.btn-block{width:100%}

/* Show/hide sits inside the field, so the field keeps its own height. */
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:64px}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;padding:6px 4px;
  font:600 12.5px Inter,sans-serif;color:var(--fg-2)}
.pw-toggle:hover{color:var(--fg)}

.pwmeter{display:flex;align-items:center;gap:5px;margin-top:8px}
.pwmeter i{height:3px;flex:1;border-radius:2px;background:var(--track)}
.pwmeter i.on{background:var(--teal)}
.pwmeter .pwword{font:600 11.5px Inter,sans-serif;color:var(--teal-ink);
  min-width:44px;text-align:right}

/* Two-step sign-up. `.stepped` is added by script, so the default state is
   one scrolling form that still works without it. */
.stepped .step{display:none}
.stepped .step.on{display:block}
.steph2{font-size:20px;letter-spacing:-.02em;margin:0 0 4px}
.stepsub{color:var(--fg-2);font-size:13px;line-height:1.6;margin:0 0 16px}
.steps{display:flex;flex-direction:column;gap:10px}
.steplabel{font:600 11.5px 'IBM Plex Mono',monospace;letter-spacing:.1em;
  color:#71879A;align-self:flex-end}
.stepbars{display:flex;gap:10px}
.stepbars i{height:3px;flex:1;border-radius:2px;background:#22394E}
.stepbars i.on{background:var(--teal)}
.brand.is-back .wordmark::before{content:"\2190\00a0\00a0"}

.rolecard{display:flex;gap:12px;align-items:flex-start;padding:14px 15px;
  margin-bottom:10px;border:1px solid var(--border-strong);border-radius:12px;
  cursor:pointer;position:relative}
.rolecard input{position:absolute;opacity:0;width:0;height:0}
.rolecard .dot{flex:0 0 auto;width:18px;height:18px;margin-top:2px;
  border-radius:50%;border:2px solid var(--border-strong)}
.rolecard input:checked ~ .dot{border-color:var(--teal);
  box-shadow:inset 0 0 0 4px var(--teal)}
.rolecard:has(input:checked){border-color:var(--teal)}
.rolecard input:focus-visible ~ .dot{outline:2px solid var(--teal);outline-offset:2px}
.rolebody{display:block}
.rolebody b{display:block;font-size:14.5px;margin-bottom:3px}
.rolebody em{display:block;font-style:normal;font-size:13px;line-height:1.55;
  color:var(--fg-2)}
.tradetag{font:600 10px 'IBM Plex Mono',monospace;letter-spacing:.1em;
  color:var(--fg-3);margin-left:6px;font-style:normal}
.getlist{margin:0;padding-left:18px}
.getlist li{font-size:13px;line-height:1.6;color:var(--fg-2);margin-bottom:7px}
.getlist li::marker{color:var(--teal)}
.tradenote{font-size:12px;line-height:1.55;margin:14px 0 0}
.agree{margin:4px 0 18px}

/* label with a link on the right ("Password  ...  Forgotten?") */
/* The row carries the label's own 6px gap, because `.labelrow label{margin:0}`
   below has to remove it for the baseline alignment with the link. Without it
   the password field sat tight against its label while the email field above
   kept the gap. */
.labelrow{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:6px}
.labelrow label{margin:0}
.minor{font:600 12.5px Inter,sans-serif}
.okmark{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:17px;line-height:1;color:var(--teal-ink)}
.input.mismatch,.mismatch .input{border-color:var(--b-poor)}

/* Development-only note. Behind MILEMETRIC_DEV, never customer-facing. */
.devnote{margin:18px 0 0;padding:11px 13px;border-radius:9px;
  border:1px dashed var(--border-strong);background:var(--surface-2);
  font:400 12px/1.6 Inter,sans-serif;color:var(--fg-2)}
.auth .devnote{background:#12283A;border-color:#2C4C67;color:#8FA6B8}

.ordiv{display:flex;align-items:center;gap:12px;margin:18px 0;
  font:600 11px Inter,sans-serif;letter-spacing:.1em;color:var(--fg-3)}
.ordiv::before,.ordiv::after{content:"";height:1px;flex:1;background:var(--border)}

.steplist{list-style:none;margin:0;padding:0;border:1px solid var(--border);
  border-radius:12px}
.steplist li{display:flex;gap:14px;padding:14px 16px;font-size:13.5px;
  line-height:1.6;color:var(--fg-2);border-top:1px solid var(--border)}
.steplist li:first-child{border-top:none}
.steplist .num{font:600 12px 'IBM Plex Mono',monospace;color:var(--teal-ink)}



/* Per-row report link in the dealer batch table. */
.rowlink{display:inline-block;padding:2px 9px;border:1px solid var(--border);
  border-radius:6px;font-size:11.5px;font-weight:600;letter-spacing:.03em;
  color:var(--ink);text-decoration:none;background:var(--card)}
.rowlink:hover{border-color:var(--brand);color:var(--brand)}

/* Dealer per-vehicle report: plate cell links through to the full report. */
.plate-link{color:inherit;text-decoration:none;border-bottom:1px dashed var(--border)}
.plate-link:hover{color:var(--brand);border-bottom-color:var(--brand)}
.backlink{display:inline-block;margin-bottom:12px;font-size:12.5px;
  color:var(--fg-2);text-decoration:none}
.backlink:hover{color:var(--brand)}

/* --- catalogue entry grid --- */
.offscreen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.notice{background:var(--teal-soft);color:var(--fg);border-radius:9px;
  padding:10px 13px;font-size:13px;margin-bottom:14px}
.gridhead,.gridrow{display:grid;grid-template-columns:190px 150px 130px 1fr;
  gap:12px;align-items:center}
.gridhead{font:600 11px Inter,sans-serif;letter-spacing:.06em;
  color:var(--fg-3);text-transform:uppercase;margin-bottom:8px}
.gridrow{padding:4px 0}
.gridrow .input{height:38px}
.gcell{display:block;margin:0}
.glabel{display:none;font:600 11px Inter,sans-serif;letter-spacing:.04em;
  color:var(--fg-3);text-transform:uppercase;margin-bottom:4px}
.gnote{font:400 12.5px/1.5 Inter,sans-serif;color:var(--b-poor)}
.gridrow.bad .input[name="reg"]{border-color:var(--b-poor)}
.fixhint{display:block;font-weight:600;color:var(--fg-2)}
.importer{margin-top:16px}
.importer summary{font:600 14px Inter,sans-serif;cursor:pointer}

/* --- public information pages (explainer, terms, privacy) --- */
.prose{max-width:680px}
.prose .backlink{display:inline-block;margin-bottom:14px;font-size:13px;
  font-weight:600;color:var(--fg-2)}
.prose .backlink:hover{color:var(--brand);text-decoration:none}
.prose h1{font-size:28px;letter-spacing:-.02em;margin:0 0 6px}
.prose .lede{font-size:15px;line-height:1.65;color:var(--fg-2);margin:0 0 6px}
.prose h2{font-size:18px;margin:34px 0 10px;letter-spacing:-.01em}
.prose h3{font-size:14.5px;margin:22px 0 6px;color:var(--fg)}
.prose p,.prose li{font-size:14px;line-height:1.7;color:var(--fg-2)}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 12px;padding-left:20px}
.prose li{margin-bottom:6px}
.prose strong{color:var(--fg);font-weight:600}
.prose .updated{font-size:12px;color:var(--fg-3);margin-bottom:26px}
.prose dl{margin:0 0 12px}
.prose dt{font-size:13.5px;font-weight:600;color:var(--fg);margin-top:14px}
.prose dd{margin:3px 0 0;font-size:13.5px;line-height:1.65;color:var(--fg-2)}
.draft-note{background:var(--b-below-soft);color:var(--amber-ink);
  border-radius:9px;padding:11px 14px;font-size:12.5px;line-height:1.6;
  margin-bottom:22px}
.tbc{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.92em;
  color:var(--fg-3)}
.pagenav{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:22px;
  font:500 12.5px Inter,sans-serif}
.pagenav a{color:var(--fg-2)}
.pagenav a.on{color:var(--brand);text-decoration:underline}

/* ===========================================================================
   RESPONSIVE OVERRIDES  —  KEEP THIS BLOCK LAST
   A media query does not beat a later rule of the same specificity. These
   were sitting mid-file and `.acct-nav{display:flex}` was redefined 21
   characters below the query that hides it, so the account sidebar could
   never collapse. Anything that overrides a base rule at a breakpoint
   belongs here, after everything it overrides.
   ======================================================================== */

/* --- responsive shell -----------------------------------------------------
   The topbar has to hold a brand, up to four nav links, a usage counter, a
   role chip, a theme toggle and an avatar. On a phone that wraps into three
   ragged lines, so below 900px the secondary chrome drops out and the nav
   folds behind a hamburger. Checkbox + label rather than <details>: a closed
   <details> cannot be reliably forced open by CSS on desktop. */
.navtoggle{display:none}
.hamburger{display:none;width:34px;height:34px;border-radius:9px;cursor:pointer;
  border:1px solid var(--border-strong);margin:0;position:relative;flex:none}
.hamburger span,.hamburger span:before,.hamburger span:after{
  position:absolute;left:9px;width:16px;height:2px;border-radius:2px;background:var(--fg);
  content:''}
.hamburger span{top:16px}
.hamburger span:before{top:-5px;left:0}
.hamburger span:after{top:5px;left:0}

@media(max-width:900px){
  .topbar{padding:10px 16px;gap:12px}
  .lookups-left{display:none}
  .hamburger{display:block;order:-1}
  .nav{display:none}
  .navtoggle:checked ~ .nav{
    display:flex;flex-direction:column;gap:2px;position:absolute;top:56px;left:12px;
    right:12px;z-index:70;background:var(--surface);border:1px solid var(--border);
    border-radius:12px;box-shadow:var(--sh-2);padding:7px}
  .navtoggle:checked ~ .nav a{padding:11px 13px}
  .container{padding:22px 16px 32px}
  h1{font-size:24px}
}
@media(max-width:600px){
  .role-chip{display:none}
  .tiles{grid-template-columns:1fr 1fr}
}

@media(max-width:820px){.badge-grid{grid-template-columns:1fr}}

@media(max-width:820px){
  /* the sidebar stacked above every panel, so each page opened on a list of
     links instead of its own content. Collapse it into one control. */
  .acct{grid-template-columns:1fr;gap:14px}
  .acct-nav-toggle{display:flex;align-items:center;justify-content:space-between;
    gap:12px;margin:0;padding:13px 16px;border:1px solid var(--border-strong);
    border-radius:11px;background:var(--surface);cursor:pointer;
    font:600 14px Inter,sans-serif;color:var(--fg)}
  .acct-nav-toggle b{font:600 12px Inter,sans-serif;color:var(--teal-ink)}
  .acct-nav{display:none}
  .navtoggle:checked ~ .acct-nav{display:flex;padding:7px;border:1px solid var(--border);
    border-radius:12px;background:var(--surface);box-shadow:var(--sh-1)}
  .acct-body{order:3}
}

@media(max-width:820px){
  /* MOBILE AUTH, to the mockups in project-brief/app-mockups/mobile-auth/.
     The panel used to be `display:none` here, so a phone visitor saw a bare
     form and none of the reason to sign up. A squeezed two-column layout was
     not the answer either: the whole screen becomes ONE navy page, headline
     directly under the logo, first field above the fold, figures and the
     alt link at the bottom where they read as provenance.

     Every input is 50px and 16px: under 16px iOS zooms the page on focus,
     which throws the layout out and is not recoverable by pinching back. */
  /* Flex, not grid, so the page can USE the whole viewport: content flows
     from the top and `margin-top:auto` on the figures pushes them and the
     alt link to the bottom edge, instead of everything bunching under the
     logo with a dead half-screen below it. */
  .auth{display:flex;flex-direction:column;background:var(--navy);
    min-height:100vh;min-height:100dvh}
  .auth .panel{min-height:0;padding:26px 22px 0;gap:18px;
    justify-content:flex-start}
  .auth .panel-mid{max-width:none}
  .auth .panel h2{font-size:27px;line-height:1.2;margin:0 0 10px}
  .auth .panel p{font-size:14px;line-height:1.6;max-width:none}
  .auth .form{padding:22px 22px 0;align-items:flex-start;display:block}
  .auth .form .box{max-width:none}

  /* the form heading is replaced by the headline above it */
  .auth .form-title,.auth .form-title-sub{display:none}

  .auth label,.auth .field label{color:#B8C7D4;font-size:13px;font-weight:600}
  .auth .input{height:50px;font-size:16px;background:#12283A;
    border-color:#254159;color:#fff;border-radius:12px}
  .auth .input::placeholder{color:#6B8299}
  .auth .input:focus{border-color:var(--teal);
    box-shadow:0 0 0 3px rgba(0,201,167,.18)}
  .auth textarea.input,.auth select.input{font-size:16px}
  .auth .pw-toggle{color:#B8C7D4;font-size:13.5px;padding:10px 6px}
  .auth .btn-lg{height:52px;font-size:16px;border-radius:12px}
  .auth .checkbox{color:#B8C7D4;font-size:13.5px;line-height:1.5;gap:11px}
  .auth .checkbox input{width:22px;height:22px;accent-color:var(--teal)}
  .auth .muted,.auth .muted-3{color:#8FA6B8}
  .auth .steph2{color:#fff;font-size:22px}
  .auth .stepsub,.auth .getlist li,.auth .rolebody em{color:#9AACBA}
  .auth .rolecard{border-color:#254159;padding:16px;border-radius:14px}
  .auth .rolecard .dot{border-color:#3A5B77;width:22px;height:22px}
  .auth .rolebody b{color:#fff;font-size:15.5px}
  .auth .pwmeter i{background:#254159}
  .auth .error{background:#3B1D1C;color:#F27168}

  .auth .stats-desktop{display:none}
  /* margin-top:auto is what claims the empty space: everything from here
     down sits against the bottom of the viewport. */
  .auth .stats-mobile{display:block;margin-top:auto;padding:34px 22px 0}
  .auth .stats-mobile .panel-stats{gap:0;justify-content:space-between}
  .auth .stats-mobile .panel-stats b{font-size:17px}
  .auth .stats-mobile .panel-stats span{font-size:10.5px}

  .auth .auth-alt{display:block;margin:18px 22px 30px;padding-top:18px;
    border-top:1px solid #1E3448;color:#8FA6B8;
    font:500 14px Inter,sans-serif}
  .auth .auth-alt a{color:var(--teal);font-weight:600}

  /* Same-specificity trap: `.auth .pwmeter i` and `.pwmeter i.on` both score
     (0,2,1), so the later rule wins wherever it sits. Without this the mobile
     track colour painted over every filled bar and the meter looked dead. */
  .auth .pwmeter i.on{background:var(--teal)}
  .auth .okmark{color:var(--teal)}
  .auth .minor{color:var(--teal)}
  .auth .ordiv{color:#6B8299}
  .auth .ordiv::before,.auth .ordiv::after{background:#254159}
  .auth .steplist li{border-color:#1E3448}
  .auth .steplist .num{color:var(--teal)}
  .auth .notice{background:#0E3A38;color:#B8C7D4}
  .auth .card{background:#12283A;border-color:#254159}
  .auth .card p,.auth .card b{color:#D6E2EA}
  .auth .btn:not(.btn-accent){background:transparent;border-color:#2C4C67;
    color:#fff}
}

@media(max-width:760px){
  /* a form must not need horizontal scrolling to be read: stack the review
     rows instead of letting the "why" column fall off the screen */
  .fixrow{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .fixrow .input{max-width:220px}

  /* the catalogue grid becomes one card per vehicle: four columns at phone
     width would put the price and the note off the right edge, and a column
     header sitting above a stacked field labels the wrong thing, so the
     per-cell labels come back instead */
  .gridhead{display:none}
  .gridrow{grid-template-columns:1fr;gap:8px;padding:14px 0;
    border-top:1px solid var(--border)}
  .gridrow:first-child{border-top:none}
  .glabel{display:block}
  .gridrow .input{max-width:260px}
}

@media(max-width:760px){
  /* the vehicle report was built as two fixed columns with a category row
     whose label, bar, multiple and pill all had fixed widths: on a phone the
     bar collapsed and the axis labels sat over each other */
  .report-grid{grid-template-columns:1fr}
  .score-num{font-size:52px}
  .ladder .rng{display:none}
  .axis{display:none}
  .cat .head{flex-wrap:wrap;gap:6px}
  .cat .name{width:auto;flex:1 1 60%;font-size:13px}
  .cat .bar{order:3;flex:1 1 100%;height:14px}
  .cat .mult{width:auto;text-align:left;font-size:13.5px}
  .cat .tag{width:auto;flex:0 0 auto}
  .cat .ev{padding-left:0;margin-top:8px}
  .hz{grid-template-columns:1fr 1fr}
  .tco-num b{font-size:28px}
}

@media(max-width:560px){
  /* one action per line at phone width: side by side they either wrap their
     labels or shrink below a comfortable tap target */
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .actions .btn,.actions form,.actions form .btn{width:100%}
  .actions .spacer{display:none}

  /* ROW-CARD TABLES. NOTE the class is `rowcards`, not `stack`: `.stack` is
     already a global flex utility (display:flex;flex-direction:column), so
     `class="batch stack"` applied it at EVERY width and collapsed the table to
     its content width on desktop. A .batch table is min-width:720px, so on a phone even a
     scrollable wrapper means dragging sideways to read a row, and comparing
     rows becomes impossible. Marking a table `.stack` turns each row into a
     card with its column names inline, so the whole thing reads top to bottom
     with no horizontal movement at all. Column names come from data-label on
     each cell. */
  /* The tbody must go block too. Browsers insert one automatically, and left
     as table-row-group it keeps a table formatting context, so the block rows
     shrink to fit their content instead of filling the card and sit inset with
     dead space on the right. */
  .batch.rowcards,
  .batch.rowcards tbody{min-width:0;display:block;width:100%}
  .batch.rowcards tr{display:block;width:100%;box-sizing:border-box;
    border:1px solid var(--border);
    border-radius:12px;padding:6px 14px;margin-bottom:10px;
    background:var(--surface)}
  .batch.rowcards tr:first-child{display:none}
  .batch.rowcards td{display:flex;align-items:baseline;justify-content:space-between;
    gap:16px;width:auto;padding:7px 0;text-align:right;
    border-bottom:1px solid var(--border)}
  .batch.rowcards tr td:last-child{border-bottom:0}
  .batch.rowcards td::before{content:attr(data-label);flex:none;text-align:left;
    color:var(--fg-2);font:600 10.5px/1.4 Inter;letter-spacing:.06em;
    text-transform:uppercase}
  .batch.rowcards td[data-label=""]::before{display:none}
  /* A two-column label/value table needs no stacking, only permission to be
     narrower than 720px. */
  .batch.kvrows{min-width:0}
  .batch.kvrows td{padding:11px 14px}
  .batch.kvrows td:first-child{white-space:normal}
  .cmp-wrap.stackwrap{overflow-x:visible;border:0;background:none}

  /* THE COMPARISON TABLE DOES NOT SCROLL SIDEWAYS ON A PHONE, it stacks.
     `.cmp` is attribute-major (rows are attributes, columns are vehicles), so
     it stacks into one card PER ATTRIBUTE with the vehicles listed inside,
     rather than one card per row the way `.batch.rowcards` does. Sideways
     scrolling inside a card is still scrolling: the right-hand vehicles are
     off screen and nothing says they are there. */
  .cmp{display:block;min-width:0;width:100%}
  .cmp tbody{display:block;width:100%}
  .cmp tr{display:block;width:100%;margin-bottom:12px;padding:4px 15px 12px;
    border:1px solid var(--border);border-radius:14px;background:var(--surface)}
  .cmp th.cmp-label,.cmp td{display:block;width:auto;min-width:0;border:0;
    white-space:normal}
  .cmp th.cmp-label{background:none;padding:13px 0 2px}
  .cmp th.cmp-label br{display:none}
  .cmp td{padding:12px 0;border-top:1px solid var(--border)}
  .cmp tr td:first-of-type{border-top:0;padding-top:6px}
  .cmp tr:last-child td{border-bottom:0}
  /* which vehicle this value belongs to, once there is more than one */
  .cmp-wrap.stackwrap:not(.single) td::before{content:attr(data-label);
    display:block;margin-bottom:7px;
    font:600 10.5px/1.4 'IBM Plex Mono',monospace;letter-spacing:.06em;
    color:var(--fg-3)}
}


/* A consent row that is a term of the agreement rather than a choice. Shown,
   never hidden: concealing what we do with a client's data to avoid showing
   an immovable switch would be the worse trade. */
.prefrow-locked .toggle{opacity:.55;cursor:not-allowed}
.lock-tag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:99px;
          background:var(--track);color:var(--fg-2);
          font:600 10.5px/1.6 Inter,sans-serif;letter-spacing:.04em;
          text-transform:uppercase;vertical-align:1px}
.lock-why{display:block;margin-top:6px;font:400 11.5px/1.55 Inter,sans-serif;
          color:var(--fg-3)}
.lock-why a{color:var(--fg-2)}