/* CarClarity — design system carried over from the approved prototype */
:root{
  --bg:#0f1419; --panel:#161c24; --panel2:#1d2530; --line:#2a3441;
  --ink:#eef2f7; --soft:#c3cede; --muted:#a8b7c8; --accent:#f2a71b; --accent2:#4aa3ff;
  --good:#3ecf8e; --warn:#ffb454; --bad:#ff6b6b;
  /* --on-accent = text/glyphs sitting ON an --accent fill; flips per theme */
  --on-accent:#0d1116;
  --bodytop:#0d1116; --bodybot:#0f1419;                 /* body gradient stops */
  --chrome:rgba(13,17,22,.94);                          /* sticky top/bottom bars */
  --radius:14px; --shadow:0 6px 24px rgba(0,0,0,.35);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* G20: the light / sun column — a legible-on-asphalt palette (Marcus: dark UIs
   wash out on a lot). Tokens only, plus the handful of element backgrounds that
   were baked dark. JS writes a concrete data-theme ("light"/"dark") from the
   stored pref or the OS setting, so this one block covers both auto and manual. */
:root[data-theme="light"]{
  --bg:#f4f6f9; --panel:#ffffff; --panel2:#eef1f6; --line:#d5dce5;
  --ink:#12181f; --soft:#33404f; --muted:#5a6b7d; --accent:#b5680a; --accent2:#1668c9;
  --good:#1f8f63; --warn:#b5680a; --bad:#d23b3b;
  --on-accent:#ffffff;
  --bodytop:#eef1f6; --bodybot:#f4f6f9;
  --chrome:rgba(255,255,255,.9);
  --shadow:0 6px 20px rgba(23,42,71,.12);
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,var(--bodytop),var(--bodybot));color:var(--ink);line-height:1.5;font-size:16px}
/* §2 top bar — one 52px sticky row (logo · current vehicle · Why It Matters) */
#topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 12px;padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--line);background:var(--chrome);backdrop-filter:blur(8px)}
.logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#e8890b);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--on-accent);flex:none}
.vehbtn{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-weight:700;font-size:15px;cursor:pointer;text-align:left;font-family:inherit}
.vehbtn #vehbtn-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vehbtn .caret{color:var(--accent);flex:none}
.vehbtn:hover{border-color:var(--accent)}
@keyframes vehpulse{0%,100%{box-shadow:0 0 0 0 rgba(242,167,27,0)}50%{box-shadow:0 0 0 3px rgba(242,167,27,.5)}}
.vehbtn.pulse{animation:vehpulse 1.1s ease-in-out 3}
.iconbtn{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer}
.iconbtn svg{width:22px;height:22px}
.iconbtn:hover{color:var(--accent2);border-color:var(--accent2)}

/* the wordmark + tagline scroll away with the page — kept compact so the
   answer isn't pushed down the page (P1-9) */
.pagetop{padding:10px 20px 0}
h1{font-size:20px;margin:0;letter-spacing:.2px}
.tag{color:var(--muted);font-size:12.5px;margin-top:1px}

.promise{margin:12px 20px 0;padding:12px 16px;border:1px dashed var(--line);border-radius:12px;background:var(--panel);color:var(--soft);font-size:14px;max-width:70ch}
.promise>b{color:var(--accent)}
.promise details{margin-top:8px}
.promise summary{cursor:pointer;color:var(--accent2);font-size:13px;font-weight:600;list-style:none;min-height:24px;display:inline-flex;align-items:center}
.promise summary::-webkit-details-marker{display:none}
.promise details[open] summary{margin-bottom:6px}
.mb-note{font-size:12px;color:var(--muted);font-style:italic;margin-top:8px}

/* §1 bottom tab bar — thumbs live at the bottom on phones */
nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:2px;padding:4px 4px calc(4px + env(safe-area-inset-bottom));background:var(--chrome);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:4px 2px;border:none;border-radius:12px;background:none;color:var(--muted);cursor:pointer;font-weight:600;font-family:inherit}
.tab svg{width:23px;height:23px;flex:none}
.tab span{font-size:11px;letter-spacing:.1px}
.tab.active{color:var(--accent)}
main{max-width:1080px;margin:0 auto;padding:20px;padding-bottom:88px}
h2{font-size:17px;margin:6px 0 4px;letter-spacing:.2px}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;font-size:13.5px;font-weight:600;transition:.15s;min-height:44px}
.chip:hover{border-color:var(--accent2)}
.chip.on{background:var(--panel2);color:var(--ink);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.chip-off{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.chip-off:hover{border-color:var(--line)}
.chip small{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}
.chip .sugg{color:var(--accent);font-size:12px}
.brandlabel{font-size:15.5px;font-weight:800;color:var(--accent);margin:16px 0 6px;letter-spacing:.3px}
.col h3 .vehname{color:var(--accent);font-weight:800;font-size:13px}
.hint{color:var(--muted);font-size:12.5px;margin:-8px 0 14px}

/* --- guided narrowing --- */
.narrow{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:18px}
.narrow h2{margin-top:0}
.narrow .advice{margin-top:12px;padding:13px 15px;border-radius:12px;background:rgba(74,163,255,.09);border:1px solid rgba(74,163,255,.32);font-size:16px;color:var(--soft)}
.narrow .advice b{color:var(--ink)}

/* --- compare columns --- */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.col{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.col h3{margin:0;padding:14px 15px;font-size:15px;background:var(--panel2);border-bottom:1px solid var(--line)}
.col h3 span{display:block;color:var(--muted);font-weight:500;font-size:12px;margin-top:2px}
.row{padding:11px 15px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row.same .k,.row.same .v,.row.same .v b{color:var(--muted);font-weight:400}
.k{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:3px}
.v{font-size:16px;color:var(--soft)}
.v b{color:var(--ink);font-weight:700}
.v .eng{display:flex;justify-content:space-between;gap:10px;padding:2px 0;border-bottom:1px dotted var(--line)}
.v .eng:last-child{border-bottom:none}
.v .eng b{font-weight:600;color:var(--ink)}
.v .eng span{color:var(--muted)}
.v .noteline{color:var(--muted);font-size:12px;margin-top:5px}
.pkgbadge{display:inline-block;background:rgba(242,167,27,.15);color:var(--accent);border:1px solid rgba(242,167,27,.4);border-radius:8px;padding:3px 10px;font-weight:800;font-size:12px;letter-spacing:.2px}
.pkgtag{font-size:11px;color:var(--muted);margin:3px 0 8px}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill2{background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:4px 9px;font-size:12px;color:var(--ink)}
.paying{background:rgba(242,167,27,.07)}
.paying .k{color:var(--accent)}
.flag{background:rgba(255,180,84,.08)}
.flag .k{color:var(--warn)}
.srcline{font-size:12.5px;color:var(--muted);margin-top:5px;font-style:italic}

/* --- resume note & focus visibility --- */
.resume{background:rgba(74,163,255,.09);border:1px solid rgba(74,163,255,.32);border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:14px;color:var(--soft);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.resume button{background:none;border:1px solid var(--line);border-radius:8px;color:var(--muted);padding:6px 14px;cursor:pointer;font-size:12.5px;min-height:44px}
/* retry links inside live-data failure states are real tap targets, not text links */
.retrybtn{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--accent2);font-weight:600;text-decoration:none;font-size:13px}
.retrybtn:hover{border-color:var(--accent2)}
.tab:focus-visible,.chip:focus-visible,.actionbtn:focus-visible,.vehbtn:focus-visible,.iconbtn:focus-visible,.addchip:focus-visible,.pickchip .x:focus-visible,.sheetclose:focus-visible,.listrow:focus-visible,.difftoggle:focus-visible,.segbtn:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
nav button.tab{font-family:inherit}

/* --- explainers --- */
.exp{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.exp summary{list-style:none;cursor:pointer;padding:15px 17px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.exp summary::-webkit-details-marker{display:none}
.exp .title{font-size:15.5px;font-weight:700}
.exp .q{color:var(--muted);font-size:12.5px;margin-top:3px;font-weight:500}
.exp .caret{color:var(--accent);font-size:22px;transition:.2s;font-weight:700}
.exp[open] .caret{transform:rotate(45deg)}
.exp .body{padding:0 17px 17px}
.opt{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--panel2);margin-top:11px}
.opt .name{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:.2px;line-height:1.3}
.opt .line{margin-top:8px;font-size:16px;color:var(--soft)}
.opt .line b{color:var(--ink);font-weight:800}
.opt .lab{font-weight:800;font-size:11.5px;letter-spacing:.7px}
.lab.best{color:var(--good)}
.lab.watch{color:var(--warn)}
.verdict{margin-top:14px;padding:13px 15px;border-radius:12px;background:rgba(242,167,27,.09);border:1px solid rgba(242,167,27,.32);font-size:16px;color:var(--soft)}
.verdict b{color:var(--ink)}
.verdict .vlab{display:block;font-weight:800;font-size:11.5px;letter-spacing:.7px;color:var(--accent);margin-bottom:5px}

/* --- live safety panel --- */
.livepanel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:18px}
.livepanel h2{margin-top:0}
.recall{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel2);margin-top:10px;font-size:16px;color:var(--soft)}
.recall.parkit{border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.07)}
.recall .rc-head{font-weight:800;color:var(--ink);margin-bottom:4px}
.recall .rc-badge{display:inline-block;background:rgba(255,107,107,.15);color:var(--bad);border:1px solid rgba(255,107,107,.4);border-radius:8px;padding:2px 9px;font-weight:800;font-size:11px;margin-left:6px;vertical-align:middle}
.recall .rc-pop{font-size:13.5px;color:var(--muted);margin:2px 0 6px}
.recall .rc-pop b{color:var(--ink)}
.vinbtn{display:inline-block;background:var(--accent);color:var(--on-accent);border-radius:10px;padding:12px 18px;font-weight:800;font-size:14.5px;text-decoration:none;min-height:44px;margin:2px 0 8px}
.vinbtn:hover{background:#ffb733}
.stars{color:var(--accent);letter-spacing:2px}
.loading{color:var(--muted);font-size:13px;font-style:italic}
.fetchfail{color:var(--warn);font-size:13px}

/* --- calculator --- */
.calc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.calc label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px;font-weight:600}
.calc input,.calc select{width:100%;max-width:420px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-size:16px}
.calc button#c-go{margin-top:16px;padding:12px 22px;border-radius:10px;border:none;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:15px;cursor:pointer;min-height:44px}
.calcresult{margin-top:16px;padding:15px;border-radius:12px;font-size:16px;line-height:1.6}
.calcresult.ok{background:rgba(62,207,142,.09);border:1px solid rgba(62,207,142,.35)}
.calcresult.tight{background:rgba(255,180,84,.09);border:1px solid rgba(255,180,84,.35)}
.calcresult.no{background:rgba(255,107,107,.09);border:1px solid rgba(255,107,107,.35)}
.calcresult b{color:var(--ink)}

/* --- ask --- */
.ask{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.askrow{display:flex;gap:10px;flex-wrap:wrap}
.ask input{flex:1;min-width:240px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-size:16px}
.ask button#ask-go{padding:12px 22px;border-radius:10px;border:none;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:15px;cursor:pointer;min-height:44px}
.askexamples{margin-top:10px}
.answer{margin-top:16px;font-size:16px;color:var(--soft);line-height:1.65}
.answer b{color:var(--ink)}
.answer .mini{margin-top:12px}

/* --- actions / off-ramps --- */
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.actionbtn{padding:11px 18px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:700;font-size:13.5px;cursor:pointer;min-height:44px}
.actionbtn:hover{border-color:var(--accent)}

footer{max-width:1080px;margin:0 auto;padding:10px 20px 40px;color:var(--muted);font-size:12px;line-height:1.7}
footer a{color:var(--accent2)}
.footlink{display:inline-block;margin-top:6px;font-size:13px;font-weight:600;min-height:32px;line-height:1.5}

/* --- G19 CarComplaints triplet (problem · typical fix · usual mileage) --- */
.failure{margin:6px 0 10px}
.failure:last-child{margin-bottom:2px}
.fprob{font-size:14px;color:var(--soft);line-height:1.5}
.ftrip{display:flex;flex-wrap:wrap;gap:5px 16px;margin:5px 0 3px;padding-left:12px}
.ftrip span{font-size:13px;color:var(--muted)}
.ftrip b{color:var(--ink);font-weight:600}
.failure .srcline{padding-left:12px}

/* --- G18 About / method page --- */
.about{max-width:70ch}
.about-sec{margin-top:24px}
.about-h{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.2px;margin-bottom:8px}
.about-list{margin:0;padding-left:18px}
.about-list li{margin:8px 0;font-size:14px;color:var(--soft);line-height:1.55}
.about-list.refusals li{list-style:none;position:relative;padding-left:22px}
.about-list.refusals li::before{content:"✕";position:absolute;left:0;color:var(--bad);font-weight:700}
.about-p{font-size:14px;color:var(--soft);line-height:1.6;margin:8px 0;max-width:70ch}
.about-cta{margin-top:16px}

/* --- G18 first-visit hint (dismissible, shown once) --- */
.firsthint{display:flex;align-items:center;gap:10px;margin:10px 20px 0;padding:10px 14px;border-radius:12px;background:rgba(74,163,255,.09);border:1px solid rgba(74,163,255,.32);color:var(--soft);font-size:13px;max-width:70ch}
.firsthint span{flex:1}
.firsthint a{color:var(--accent2);font-weight:600}
.firsthint-x{flex:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:14px}
.firsthint-x:hover{color:var(--ink);border-color:var(--accent2)}
.live{display:inline-block;background:rgba(62,207,142,.12);color:var(--good);border:1px solid rgba(62,207,142,.35);border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700;margin-left:8px;vertical-align:middle}

@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  main{padding:14px;padding-bottom:88px}
}

/* =====================================================================
   P2 — structure overhaul (bottom bar breakpoint, picker sheet,
   comparison rail, current-picks selection). Tokens only, per DESIGN_RULES.
   ===================================================================== */

/* ≥900px: the tab bar returns to a top row under the header; eyes rule desktops */
@media (min-width:900px){
  nav{position:sticky;top:52px;bottom:auto;flex-wrap:wrap;justify-content:flex-start;gap:8px;padding:10px 20px;border-top:none;border-bottom:1px solid var(--line);background:var(--chrome);backdrop-filter:blur(8px)}
  .tab{flex:0 0 auto;flex-direction:row;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel)}
  .tab svg{width:18px;height:18px}
  .tab span{font-size:13.5px}
  .tab.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .tab.active svg{stroke:var(--on-accent)}
  main{padding-bottom:24px}
  /* P1-14: don't stretch phone UI across a wide screen */
  .vehbtn{flex:0 1 380px;margin-right:auto}
  .calc,.ask{max-width:600px}
  .sub,.segcaption{max-width:70ch}
  .promise{max-width:70ch}
  .podwhy,.lpair,.podium .sub{max-width:70ch}   /* sentences don't stretch; data grids may */
}
/* P1-13: reserve space for live cells so their arrival doesn't reflow the page */
.v[data-live]{min-height:2.4em}
.livepanel [data-live]{display:block;min-height:64px}

/* §3 picker sheet — bottom sheet (phone) / centered modal (≥900) */
.sheet[hidden]{display:none}
.sheet{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:flex-end}
.sheet .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.sheetpanel{position:relative;background:var(--panel);border-radius:16px 16px 0 0;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 -8px 30px rgba(0,0,0,.5);animation:sheetup .18s ease}
@keyframes sheetup{from{transform:translateY(12%);opacity:.6}to{transform:translateY(0);opacity:1}}
.sheethead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 8px}
.sheethead h3{margin:0;font-size:18px}
.sheetclose{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--soft);font-size:18px;cursor:pointer;flex:none}
.sheetclose:hover{color:var(--ink);border-color:var(--accent2)}
.sheetbody{overflow-y:auto;padding:4px 16px 20px;-webkit-overflow-scrolling:touch}
.searchbox{width:100%;height:48px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-size:16px;margin-bottom:8px}
.grouphdr{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;margin:16px 0 4px}
.listrow{display:flex;flex-direction:column;justify-content:center;width:100%;min-height:48px;padding:8px 12px;border-radius:10px;border:none;background:none;color:var(--ink);text-align:left;cursor:pointer;font-size:16px;font-weight:600;font-family:inherit}
.listrow:hover,.listrow:focus-visible{background:var(--panel2);outline:none}
.listrow.on{background:var(--panel2);box-shadow:inset 0 0 0 1px var(--accent)}
.listrow small{display:block;color:var(--muted);font-weight:400;font-size:13px;margin-top:2px}
.listrow.jobrow{color:var(--accent2)}
.sheet .recents{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.sheet .emptyfind{color:var(--muted);font-size:14px;padding:14px 4px}
.gengroup{border-top:1px solid var(--line)}
.gengroup summary{cursor:pointer;list-style:none;padding:14px 4px;font-weight:700;font-size:15px;color:var(--ink);display:flex;align-items:baseline;gap:8px;min-height:44px}
.gengroup summary::-webkit-details-marker{display:none}
.gengroup summary::before{content:"▸";color:var(--accent);font-weight:700;transition:.15s}
.gengroup[open] summary::before{content:"▾"}
/* P1-17: keep the Add button reachable without scrolling the sheet */
.li-addbar{position:sticky;bottom:0;background:var(--panel);padding:12px 0 6px;margin-top:8px;border-top:1px solid var(--line)}
.li-addbar .addchip{width:100%;justify-content:center}
@media (min-width:900px){
  .sheet{justify-content:center;align-items:center}
  .sheetpanel{max-width:520px;width:520px;border-radius:16px;max-height:80vh;animation:none}
}

/* §4 comparison rail — horizontal scroll-snap with a peeking next column */
.grid.rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:85%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.grid.rail>.col{scroll-snap-align:start}
/* A4 differences-first: identical rows hidden by default (fade stays in full view) */
.grid.diffonly .row.same{display:none}
.diffrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-2px 0 12px;flex-wrap:wrap}
.diffcap{font-size:12.5px;color:var(--muted)}
.difftoggle{min-height:44px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--accent2);font-weight:600;font-size:13px;cursor:pointer;font-family:inherit}
.difftoggle:hover{border-color:var(--accent2)}
.railnote{font-size:12px;color:var(--muted);text-align:center;margin:2px 0 14px}
@media (min-width:640px) and (max-width:899px){ .grid.rail{grid-auto-columns:48%} }
@media (min-width:900px){
  .grid.rail{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-auto-flow:row;overflow:visible}
  .railnote{display:none}
}

/* §4/§5 current-picks selection: selected chips (removable) + one add affordance */
.picks{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.pickchip{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 4px 0 14px;border-radius:10px;border:1px solid var(--accent);background:var(--panel2);color:var(--ink);font-size:14px;font-weight:600}
.pickchip .sub-lab{color:var(--muted);font-weight:400;margin-left:2px}
.pickchip .x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:none;background:none;color:var(--muted);font-size:17px;cursor:pointer;font-family:inherit}
.pickchip .x:hover{color:var(--bad)}
.addchip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:10px;border:1px dashed var(--accent2);background:none;color:var(--accent2);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.addchip:hover{background:rgba(74,163,255,.08)}
body.sheet-open{overflow:hidden}

/* C10 recall-list expansion · C11 lot checklist */
.recall-list{margin-top:6px}
.recall-list summary,.lotcheck summary{cursor:pointer;color:var(--accent2);font-size:13px;font-weight:600;list-style:none;min-height:44px;display:inline-flex;align-items:center}
.recall-list summary::-webkit-details-marker,.lotcheck summary::-webkit-details-marker{display:none}
.recall-item{border-top:1px solid var(--line);padding:8px 0;font-size:13.5px}
.recall-item .rc-sub{color:var(--soft);margin:2px 0}
.lotcheck{margin-top:8px;background:rgba(74,163,255,.06);border:1px solid rgba(74,163,255,.28);border-radius:12px;padding:4px 12px}
.lotcheck ul{margin:6px 0 8px;padding-left:20px}
.lotcheck li{margin:5px 0;font-size:14px;color:var(--soft)}
.lotcheck .sayline{font-size:14px;color:var(--ink);border-top:1px solid var(--line);padding:8px 0 10px}
.lotcheck .sayline b{color:var(--accent)}
/* C9 VIN tool */
.vinrow{display:flex;gap:8px;align-items:stretch}
.vinrow .searchbox{flex:1;margin:0;text-transform:uppercase}
.vinrow .actionbtn{flex:none}
/* D13 fuel-cost inputs */
.fuelinputs{display:flex;gap:10px;margin-bottom:10px}
.fuelinputs label{flex:1;font-size:13px;color:var(--muted);font-weight:600;display:block}
.fuelinputs .searchbox{margin:4px 0 0;width:100%}

/* §4b Listings Compare — mode toggle, pair verdicts, in-column divider */
.modeseg{display:flex;gap:4px;padding:4px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;margin-bottom:8px}
.segbtn{flex:1;min-height:44px;padding:8px 12px;border:none;border-radius:9px;background:none;color:var(--muted);font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit}
.segbtn.on{background:var(--accent);color:var(--on-accent)}
.segbtn .segcheck{font-weight:800;margin-right:5px}
.segcaption{font-size:12.5px;color:var(--muted);margin:0 2px 16px}
.lpair{font-size:16px;color:var(--soft);line-height:1.6}
.lpair + .lpair{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.lpair b{color:var(--ink)}

/* P1-8 podium verdict — ranked answer-first; severity ladder (green good /
   amber caution), never red (red = do-not-drive only) */
.podium{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 16px 14px;margin-top:16px}
.podlab{display:block;font-weight:800;font-size:11.5px;letter-spacing:.7px;color:var(--accent);margin-bottom:10px}
.podrow{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--panel2);border-left:3px solid var(--line);margin-bottom:8px}
.podrow.buy{border-left-color:var(--good);background:rgba(62,207,142,.07)}
.podrow.walk{border-left-color:var(--warn);background:rgba(255,180,84,.07)}
.podrow.backup{border-left-color:var(--accent2)}
.podrank{flex:none;width:74px;font-size:10.5px;font-weight:800;letter-spacing:.5px;line-height:1.25;padding-top:3px}
.podrow.buy .podrank{color:var(--good)}
.podrow.walk .podrank{color:var(--warn)}
.podrow.backup .podrank{color:var(--accent2)}
.podhead{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:3px}
.podwhy{font-size:14px;color:var(--soft);line-height:1.5}
.podium-detail{margin-top:4px}
.podium-detail summary{cursor:pointer;color:var(--accent2);font-size:13.5px;font-weight:600;list-style:none;min-height:44px;display:inline-flex;align-items:center}
.podium-detail summary::-webkit-details-marker{display:none}
.podium-detail .lpair:first-of-type{margin-top:8px}
.row.rowsplit{background:var(--panel2)}
.row.rowsplit .k{color:var(--accent)}
.row.rowsplit .v{font-size:13px;color:var(--muted)}
@media print{
  header,nav,.narrow,.actions,.ask,footer .noprint{display:none}
  body{background:#fff;color:#000}
  .col,.livepanel,.calc{border-color:#999;box-shadow:none;background:#fff}
  .v,.k,.sub{color:#222}
}