:root{
  --paper:#E9EBEE; --sheet:#FFFFFF; --sheet-2:#F3F5F7;
  --ink:#12171D; --ink-2:#525C68; --ink-3:#7B8794;
  --rule:#C7CED6; --rule-2:#E2E6EB;
  --blue:#0B4EA2; --blue-soft:#DEE9F7; --on-blue:#FFFFFF;
  --amber:#8A5300; --amber-soft:#FAEAD2;
  --red:#9E241F; --red-soft:#F8DFDD;
  --green:#1B6349; --green-soft:#DBEDE4;
  --shadow:rgba(18,23,29,.10);
  --display:"Barlow Condensed","Arial Narrow",Helvetica,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#11151A; --sheet:#1A2027; --sheet-2:#212A33;
    --ink:#E7ECF1; --ink-2:#A5B0BC; --ink-3:#7C8794;
    --rule:#333D48; --rule-2:#28313A;
    --blue:#84B5F1; --blue-soft:#1A2C43; --on-blue:#0F1620;
    --amber:#E0A64B; --amber-soft:#392B15;
    --red:#F09089; --red-soft:#3B1F1D;
    --green:#63C79E; --green-soft:#123329;
    --shadow:rgba(0,0,0,.45);
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }

h1,h2,h3{ font-family:var(--display); text-transform:uppercase; margin:0; text-wrap:balance }
h1{ font-size:30px; font-weight:700; letter-spacing:.01em; line-height:1 }
h2{ font-size:23px; font-weight:700; line-height:1.05 }
h3{ font-size:18px; font-weight:600; letter-spacing:.03em }
.eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums }
.dim{ color:var(--ink-2) }
.small{ font-size:13px }
.muted{ color:var(--ink-3) }
.hide{ display:none !important }

/* ---------- shell ---------- */
.wrap{ max-width:980px; margin:0 auto; padding:0 16px 64px }
.topbar{
  position:sticky; top:0; z-index:20; background:var(--sheet);
  border-bottom:1px solid var(--rule);
}
.topbar-in{
  max-width:980px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.brand{ font-family:var(--display); font-size:21px; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em; margin-right:auto }
.brand span{ color:var(--blue) }
.who{ font-family:var(--mono); font-size:12px; color:var(--ink-2) }

.tabs{ display:flex; gap:6px; overflow-x:auto; padding:12px 0 0 }
.tab{
  font-family:var(--display); text-transform:uppercase; font-size:16px; font-weight:600;
  letter-spacing:.03em; padding:7px 14px; border-radius:3px; white-space:nowrap;
  border:1px solid var(--rule-2); background:var(--sheet); color:var(--ink-2); cursor:pointer;
}
.tab[aria-selected="true"]{ background:var(--blue); border-color:var(--blue); color:var(--on-blue) }

/* ---------- buttons & fields ---------- */
button{ font-family:inherit; font-size:inherit; cursor:pointer }
.btn{
  font-size:13px; font-weight:600; padding:8px 14px; border-radius:3px;
  border:1px solid var(--blue); background:var(--blue); color:var(--on-blue);
}
.btn:hover{ filter:brightness(1.08) }
a.btn{ text-decoration:none; display:inline-block }
.btn.ghost{ background:transparent; color:var(--blue) }
.btn.quiet{ background:transparent; border-color:var(--rule); color:var(--ink-2) }
.btn.danger{ background:transparent; border-color:var(--rule); color:var(--red) }
.btn.sm{ font-size:12px; padding:5px 10px }
button:focus-visible, input:focus-visible, a:focus-visible, .tab:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}
input, select, textarea{
  font-family:inherit; font-size:15px; color:var(--ink); background:var(--sheet);
  border:1px solid var(--rule); border-radius:3px; padding:9px 11px; width:100%;
}
input:focus, textarea:focus{ border-color:var(--blue); outline:none }
label{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:5px }
.field{ margin-bottom:14px }
.row{ display:grid; gap:12px; grid-template-columns:1fr 1fr }
@media(max-width:560px){ .row{ grid-template-columns:1fr } }

/* ---------- cards ---------- */
.card{
  background:var(--sheet); border:1px solid var(--rule-2); border-radius:4px;
  box-shadow:0 1px 2px var(--shadow); margin-top:18px;
}
.card-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 16px; border-bottom:1px solid var(--rule-2); background:var(--sheet-2);
}
.card-head h2{ margin-right:auto }
.card-body{ padding:16px }

/* ---------- odometer ---------- */
.odo-line{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.odo-big{ font-family:var(--display); font-size:44px; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums }
.odo-unit{ font-family:var(--mono); font-size:13px; color:var(--ink-2) }
.odo-asof{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-left:auto }
.odo-form{ display:flex; gap:8px; margin-top:12px; max-width:340px }
.odo-form input{ font-family:var(--mono) }
.odo-form .btn{ white-space:nowrap }

/* ---------- due tiles ---------- */
.tiles{ display:grid; gap:12px; grid-template-columns:repeat(3,1fr) }
@media(max-width:800px){ .tiles{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:560px){ .tiles{ grid-template-columns:1fr } }
.tile{ border:1px solid var(--rule-2); border-radius:4px; padding:14px; background:var(--sheet) }
.tile-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px }
.tile-label{ font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2) }
.tile-big{ font-family:var(--display); font-size:32px; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums }
.tile-sub{ font-size:12.5px; color:var(--ink-2); margin-top:2px }
.pill{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 8px; border-radius:99px; white-space:nowrap;
}
.pill.ok{ background:var(--green-soft); color:var(--green) }
.pill.soon{ background:var(--amber-soft); color:var(--amber) }
.pill.overdue{ background:var(--red-soft); color:var(--red) }
.pill.unknown{ background:var(--sheet-2); color:var(--ink-3) }
.meter{ height:6px; border-radius:99px; background:var(--rule-2); overflow:hidden; margin-top:12px }
.meter i{ display:block; height:100% }
.meter.ok i{ background:var(--green) } .meter.soon i{ background:var(--amber) }
.meter.overdue i{ background:var(--red) } .meter.unknown i{ background:var(--rule) }

/* ---------- the road ---------- */
.road-wrap{ overflow-x:auto }
.road{ min-width:720px; padding:0 24px }
.road-flag{ position:relative; height:44px }
.road-flag-in{ position:absolute; transform:translateX(-50%); text-align:center; white-space:nowrap }
.road-chip{ display:inline-block; background:var(--blue); color:var(--on-blue);
  font-family:var(--mono); font-size:11px; font-weight:600; padding:4px 10px; border-radius:3px }
.road-stem{ width:2px; height:12px; background:var(--blue); margin:0 auto }
.road-track{ position:relative; height:12px; border-radius:99px;
  background:var(--sheet-2); border:1px solid var(--rule-2) }
.road-done{ position:absolute; left:0; top:0; bottom:0; border-radius:99px;
  background:var(--blue); opacity:.2 }
.road-now{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--blue) }
.pin{ position:absolute; top:50%; width:13px; height:13px; border-radius:50%;
  transform:translate(-50%,-50%); border:2px solid var(--sheet); box-sizing:content-box }
.pin.past{ background:var(--ink-3) }
.pin.soon{ background:var(--amber) }
.pin.overdue{ background:var(--red) }
.pin.ok{ background:var(--sheet); box-shadow:inset 0 0 0 3px var(--blue) }
.road-labels{ position:relative; height:180px; margin-top:8px }
.rl{ position:absolute; transform:translateX(-50%); width:148px; text-align:center }
.rl::before{ content:""; display:block; width:1px; background:var(--rule);
  height:10px; margin:0 auto 6px }
.rl.a{ top:0 }
.rl.b{ top:88px }
.rl.b::before{ height:80px; margin-top:-84px }
.rl-km{ font-family:var(--mono); font-size:11px; color:var(--ink-3);
  font-variant-numeric:tabular-nums }
.rl-job{ font-size:12.5px; line-height:1.3; margin-top:2px }
.rl-note{ font-family:var(--mono); font-size:10.5px; margin-top:3px }
.rl-note.soon{ color:var(--amber) } .rl-note.overdue{ color:var(--red) }
.rl-note.past{ color:var(--ink-3) } .rl-note.ok{ color:var(--ink-2) }
.road-ends{ display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:11px; color:var(--ink-3); margin-top:6px; padding-top:8px;
  border-top:1px solid var(--rule-2) }
.cal{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px }
.cal-chip{ display:flex; align-items:center; gap:8px; padding:7px 11px; border-radius:3px;
  border:1px solid var(--rule-2); background:var(--sheet); font-size:13px }
.cal-chip i{ width:9px; height:9px; border-radius:50%; flex:none }

/* ---------- tables ---------- */
.tw{ overflow-x:auto }
table{ border-collapse:collapse; width:100%; min-width:660px; font-size:13.5px }
th{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); text-align:left; font-weight:500; padding:9px 12px;
  border-bottom:1px solid var(--rule); white-space:nowrap }
td{ padding:10px 12px; border-bottom:1px solid var(--rule-2); vertical-align:top }
tbody tr:last-child td{ border-bottom:0 }
td.num, th.num{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums }
.chip{ display:inline-block; font-family:var(--mono); font-size:10.5px; padding:2px 7px;
  border-radius:3px; background:var(--blue-soft); color:var(--blue); margin-right:4px }
.chip.todo{ background:var(--amber-soft); color:var(--amber) }

/* ---------- specs ---------- */
.spec{ display:grid; grid-template-columns:minmax(130px,1fr) 1.7fr auto; align-items:start; gap:10px }
.spec > div{ padding:9px 0; border-bottom:1px solid var(--rule-2) }
.spec .k{ font-family:var(--mono); font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3) }
.spec .v{ font-size:14px; word-break:break-word }
.spec .a{ text-align:right }
@media(max-width:600px){
  .spec{ grid-template-columns:1fr auto }
  .spec .k{ border-bottom:0; padding-bottom:0; grid-column:1 / -1 }
  .spec .v{ padding-top:0 }
}

/* ---------- login / setup ---------- */
.gate{ max-width:400px; margin:9vh auto; padding:0 20px }
.gate .card{ margin-top:22px }
.gate h1{ font-size:38px }
.gate .lede{ color:var(--ink-2); margin:10px 0 0 }
.err{ background:var(--red-soft); color:var(--red); border-radius:3px;
  padding:9px 12px; font-size:13.5px; margin-bottom:14px }
.ok-note{ background:var(--green-soft); color:var(--green); border-radius:3px;
  padding:9px 12px; font-size:13.5px; margin-bottom:14px }

.empty{ color:var(--ink-3); font-size:14px; padding:6px 0 }
.stack{ display:flex; gap:8px; flex-wrap:wrap }
dialog{ border:1px solid var(--rule); border-radius:5px; background:var(--sheet);
  color:var(--ink); padding:0; width:min(520px,92vw); box-shadow:0 12px 40px var(--shadow) }
dialog::backdrop{ background:rgba(0,0,0,.45) }
.dlg-head{ padding:14px 16px; border-bottom:1px solid var(--rule-2); background:var(--sheet-2) }
.dlg-body{ padding:16px; max-height:70vh; overflow-y:auto }
.dlg-foot{ padding:12px 16px; border-top:1px solid var(--rule-2);
  display:flex; gap:8px; justify-content:flex-end }
.check{ display:flex; align-items:flex-start; gap:9px; padding:6px 0; font-size:14px }
.check input{ width:auto; margin-top:3px }

/* ---------- photos ---------- */
.shots{ display:flex; flex-wrap:wrap; gap:8px }
.shot{ position:relative; width:74px; height:74px; border-radius:3px; overflow:hidden;
  border:1px solid var(--rule-2); background:var(--sheet-2); flex:none }
.shot img{ width:100%; height:100%; object-fit:cover; display:block }
.shot .pdf{ display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  font-family:var(--mono); font-size:11px; color:var(--ink-2) }
.shot button{
  position:absolute; top:2px; right:2px; width:20px; height:20px; line-height:1;
  border-radius:50%; border:0; background:rgba(0,0,0,.62); color:#fff; font-size:13px;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.shot a{ display:block; width:100%; height:100% }
.log-shots{ margin-top:8px }
.addshot{ display:inline-flex; align-items:center; justify-content:center;
  width:74px; height:74px; border:1px dashed var(--rule); border-radius:3px;
  background:transparent; color:var(--ink-3); font-size:22px; flex:none }
.addshot:hover{ border-color:var(--blue); color:var(--blue) }
.lightbox{ border:0; padding:0; background:transparent; max-width:96vw; max-height:96vh }
.lightbox::backdrop{ background:rgba(0,0,0,.8) }
.lightbox img{ max-width:96vw; max-height:88vh; display:block; border-radius:4px }
.lightbox .close{ margin-top:10px }
.bought{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:3px }

/* ---------- receipt reader ---------- */
.reader{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px; border:1px dashed var(--rule); border-radius:3px; margin-bottom:16px }
.read-status{ border-radius:3px; padding:9px 12px; font-size:13.5px; margin-bottom:14px }
.read-status.working{ background:var(--blue-soft); color:var(--blue) }
.read-status.done{ background:var(--green-soft); color:var(--green) }
.read-status.warn{ background:var(--amber-soft); color:var(--amber) }
.read-status.bad{ background:var(--red-soft); color:var(--red) }
input.from-receipt{ border-color:var(--blue); background:var(--blue-soft) }

/* ---------- manuals ---------- */
.doc{ display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--rule-2) }
.doc:last-of-type{ border-bottom:0 }
.doc-main{ margin-right:auto; min-width:0 }
.doc-title{ font-size:14.5px; word-break:break-word }
.doc-meta{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:2px }
.ask{ margin-top:18px; padding-top:16px; border-top:1px solid var(--rule-2) }
.ask-form{ display:flex; gap:8px }
.ask-form input{ flex:1 }
.answer{ margin-top:14px; border-left:3px solid var(--blue); background:var(--blue-soft);
  padding:13px 15px; border-radius:0 3px 3px 0 }
.answer.none{ border-left-color:var(--ink-3); background:var(--sheet-2) }
.answer p{ margin:0; font-size:14.5px }
.answer .cites{ margin-top:9px; display:flex; gap:7px; flex-wrap:wrap }
.cite{ font-family:var(--mono); font-size:11px; padding:3px 9px; border-radius:99px;
  background:var(--sheet); border:1px solid var(--rule-2); color:var(--blue);
  text-decoration:none }
.cite:hover{ border-color:var(--blue) }
.lookup{ margin-left:6px }

/* ---------- page nav ---------- */
.nav{ display:flex; gap:4px; margin-right:auto }
.navlink{
  font-family:var(--display); text-transform:uppercase; font-size:15px; font-weight:600;
  letter-spacing:.04em; padding:5px 11px; border-radius:3px; border:1px solid transparent;
  background:transparent; color:var(--ink-2);
}
.navlink[aria-current="page"]{ color:var(--blue); border-color:var(--blue-soft); background:var(--blue-soft) }
.topbar-in .brand{ margin-right:6px }
@media(max-width:560px){ .topbar-in{ gap:8px } .navlink{ padding:5px 8px; font-size:14px } .who{ display:none } }
.veh-meta{ display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:10px;
  border-top:1px solid var(--rule-2) }
.veh-meta span{ margin-right:auto; word-break:break-all }
.sel{ width:auto; font-size:13px; padding:6px 9px }

/* ---------- product bits ---------- */
.plan{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 8px; border-radius:99px; white-space:nowrap }
.plan.free{ background:var(--sheet-2); color:var(--ink-3); border:1px solid var(--rule-2) }
.plan.plus{ background:var(--blue); color:var(--on-blue) }
.plan.demo{ background:var(--amber-soft); color:var(--amber) }
.tab.add{ border-style:dashed; color:var(--ink-3) }
.tab.add:hover{ color:var(--blue); border-color:var(--blue) }
.demo-note{ margin-top:14px; padding:10px 14px; border-radius:4px; font-size:13.5px;
  background:var(--amber-soft); color:var(--amber); border:1px solid var(--amber-soft) }
.demo-note a{ color:inherit; font-weight:600 }
.empty-garage{ text-align:center; padding:40px 20px }
.empty-garage h2{ margin-bottom:8px }
.empty-garage p{ max-width:440px; margin:0 auto 18px }
.plan-box{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 14px;
  border:1px solid var(--rule-2); border-radius:4px; background:var(--sheet-2) }
.plan-box > div:nth-child(2){ margin-right:auto; flex:1; min-width:180px }
.plan-name{ font-family:var(--display); font-size:22px; font-weight:700; text-transform:uppercase }
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0 }
@media(max-width:560px){ .plans{ grid-template-columns:1fr } }
.plan-col{ border:1px solid var(--rule-2); border-radius:4px; padding:14px }
.plan-col.plus{ border-color:var(--blue); background:var(--blue-soft) }
.plan-price{ font-family:var(--display); font-size:34px; font-weight:700; line-height:1.1; margin:4px 0 8px }
.plan-price span{ font-size:14px; font-family:var(--mono); font-weight:400; color:var(--ink-2) }
.plan-col ul{ margin:8px 0 0; padding-left:18px; font-size:13.5px }
.plan-col li{ margin:4px 0 }
label.check{ font-family:var(--body); font-size:14px; letter-spacing:0; text-transform:none; color:var(--ink); margin:0 }
label.check .muted{ display:block; margin-top:3px; font-size:13px }