/* CPM By BrickSquad: shared styles for index.html and credits.html. Light/dark tokens in :root. */
:root{
  --bg:#EDEFEB; --surface:#FFFFFF; --sunk:#F5F6F3; --ink:#121416; --ink2:#34393D; --muted:#646B6F;
  --line:#CDD2CB; --rule:#121416; --accent:#FFD21F; --accent-ink:#121416; --accent-soft:#FFF3B8;
  --good:#1D7A4B; --ok:#3F7F6A; --warn:#A8690F; --bad:#B3261E; --new:#2453A0; --used:#7A5A28; --keep:#121416;
  --c1:#121416; --c2:#5B6770; --c3:#D9A400; --c4:#2F7F9E; --c5:#8C5A3C; --c6:#7C8B45; --c7:#B3261E; --c8:#A0A7AA;
  --display:"Archivo","Arial Narrow",Arial,sans-serif; --body:"Source Sans 3","Segoe UI",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --shadow:0 1px 0 rgba(18,20,22,.06);
  --photo-hi:#F7F8F5; --photo-lo:#D9DDD6;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0E1011; --surface:#16191B; --sunk:#1C2023; --ink:#ECEEEA; --ink2:#C9CDC8; --muted:#979E9A;
  --line:#2C3235; --rule:#ECEEEA; --accent:#FFD21F; --accent-ink:#121416; --accent-soft:#3A3212;
  --good:#4CC38A; --ok:#7FC4AA; --warn:#E3A948; --bad:#F2766C; --new:#86A9F2; --used:#D2AE77; --keep:#ECEEEA;
  --c1:#ECEEEA; --c2:#8C99A1; --c3:#FFD21F; --c4:#5DB6D6; --c5:#D08E68; --c6:#AEBF6E; --c7:#F2766C; --c8:#4E5559;
  --photo-hi:#4E555A; --photo-lo:#262A2D;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --photo-hi:#4E555A; --photo-lo:#262A2D;
  --bg:#0E1011; --surface:#16191B; --sunk:#1C2023; --ink:#ECEEEA; --ink2:#C9CDC8; --muted:#979E9A;
  --line:#2C3235; --rule:#ECEEEA; --accent:#FFD21F; --accent-ink:#121416; --accent-soft:#3A3212;
  --good:#4CC38A; --ok:#7FC4AA; --warn:#E3A948; --bad:#F2766C; --new:#86A9F2; --used:#D2AE77; --keep:#ECEEEA;
  --c1:#ECEEEA; --c2:#8C99A1; --c3:#FFD21F; --c4:#5DB6D6; --c5:#D08E68; --c6:#AEBF6E; --c7:#F2766C; --c8:#4E5559;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{background:var(--bg);color:var(--ink);font:16px/1.45 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 4px var(--ink)}
.num,td.money,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:1480px;margin:0 auto;padding-inline:clamp(16px,3vw,32px)}

/* Masthead */
.mast{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--ink);color:var(--bg);border-bottom:3px solid var(--accent)}
:root[data-theme="dark"] .mast{background:#000;color:#ECEEEA}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mast{background:#000;color:#ECEEEA}}
.mast .wrap{display:flex;align-items:center;gap:18px;height:56px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:none}
.plate{font:900 21px/1 var(--display);font-stretch:125%;letter-spacing:.04em;background:var(--accent);color:var(--accent-ink);padding:6px 9px 5px;border-radius:3px;box-shadow:inset 0 0 0 2px var(--accent-ink),inset 0 0 0 3px var(--accent)}
.brand small{font:600 12px/1.1 var(--display);font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav a{font:700 13px/1 var(--display);font-stretch:110%;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:10px 11px;border-radius:3px;white-space:nowrap;opacity:.82}
.nav a:hover{opacity:1;background:rgba(255,255,255,.1)}
.badge{font:600 11px/1 var(--mono);border:1px solid currentColor;padding:4px 6px;border-radius:2px;opacity:.8;white-space:nowrap}
@media (max-width:760px){.nav{display:none}.brand small{display:none}.mast .wrap{justify-content:space-between}}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:end;padding-block:clamp(28px,5vw,52px) 22px}
.eyebrow{font:700 12px/1 var(--display);font-stretch:115%;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
h1{font:900 clamp(34px,5.4vw,68px)/.95 var(--display);font-stretch:118%;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--accent) 62%,var(--accent) 92%,transparent 92%)}
.lede{font-size:18px;color:var(--ink2);max-width:60ch;margin:18px 0 0}
.tally{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:2px solid var(--rule);background:var(--surface)}
.tally>div{padding:14px 14px 12px;border-right:1px solid var(--line);min-width:0}
.tally>div:last-child{border-right:0}
.tally .k{font:700 11px/1.2 var(--display);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tally .v{font:600 clamp(24px,2.6vw,34px)/1.05 var(--mono);margin-top:8px;letter-spacing:-.02em}
.tally .v small{font-size:.45em;color:var(--muted);letter-spacing:0}
.tally .s{font-size:13px;color:var(--ink2);margin-top:6px;overflow-wrap:anywhere}
.tally .s+.s{margin-top:2px}
.tally .base{background:var(--accent-soft)}
@media (max-width:980px){.hero{grid-template-columns:1fr}}
@media (max-width:520px){.tally{grid-template-columns:1fr}.tally>div{border-right:0;border-bottom:1px solid var(--line)}.tally>div:last-child{border-bottom:0}}

/* Section heads */
.sec{padding-block:26px 8px;scroll-margin-top:70px}
.sechead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-top:3px solid var(--rule);padding-top:12px;margin-bottom:14px}
.sechead h2{font:900 clamp(22px,2.6vw,30px)/1 var(--display);font-stretch:115%;margin:0;text-transform:uppercase;letter-spacing:.01em}
.sechead p{margin:0;color:var(--muted);font-size:15px;max-width:70ch}
.sechead .right{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* Scenario panel */
.scenario{background:var(--surface);border:2px solid var(--rule)}
.sc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sc-group{padding:14px 16px 16px;border-right:1px solid var(--line);min-width:0}
.sc-group:last-child{border-right:0}
.sc-group h3{font:800 12px/1 var(--display);font-stretch:115%;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px;display:flex;justify-content:space-between;gap:8px}
.sc-group h3 span{font:500 11px/1 var(--mono);letter-spacing:0;text-transform:none;color:var(--muted)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.field{display:grid;gap:4px;min-width:0}
.field>span{font-size:13px;color:var(--ink2);font-weight:600;display:flex;justify-content:space-between;gap:6px}
.field>span i{font-style:normal;font-weight:400;color:var(--muted);font-size:12px}
.field input,.field select,.field textarea{width:100%;min-width:0;border:1px solid var(--line);background:var(--sunk);border-radius:3px;padding:8px 9px;font-family:var(--mono);font-size:14px}
.field select{font-family:var(--body);font-size:15px}
.field input:hover,.field select:hover{border-color:var(--muted)}
.field.wide{grid-column:1/-1}
.inline{display:flex;gap:6px}
#a-zip{min-width:6.5em;flex:1 1 auto}
.inline .btn{flex:0 0 auto}
.inline input{flex:1}
details.adv{border-top:1px solid var(--line)}
details.adv>summary{cursor:pointer;padding:11px 16px;font:800 12px/1 var(--display);font-stretch:115%;letter-spacing:.12em;text-transform:uppercase;list-style:none;display:flex;gap:10px;align-items:center}
details.adv>summary::before{content:"+";font-family:var(--mono);font-size:15px;width:14px}
details.adv[open]>summary::before{content:"−"}
details.adv>summary span{font:400 13px/1.2 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.adv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;padding:4px 16px 16px}
@media (max-width:1100px){.sc-grid{grid-template-columns:1fr 1fr}.sc-group:nth-child(2){border-right:0}.sc-group:nth-child(-n+2){border-bottom:1px solid var(--line)}.adv-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sc-grid{grid-template-columns:1fr}.sc-group{border-right:0;border-bottom:1px solid var(--line)}.adv-grid{grid-template-columns:1fr}}

/* Buttons & chips */
.btn{border:1.5px solid var(--rule);background:var(--surface);border-radius:3px;padding:8px 12px;font:700 13px/1 var(--display);font-stretch:108%;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--sunk)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(.96)}
.btn.ghost{border-color:var(--line)}
.btn.sm{padding:6px 8px;font-size:11px}
.btn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip{display:inline-block;font:700 10.5px/1 var(--display);font-stretch:112%;letter-spacing:.09em;text-transform:uppercase;padding:4px 6px 3px;border-radius:2px;border:1px solid currentColor;vertical-align:1px;white-space:nowrap}
.chip.new{color:var(--new)}.chip.used{color:var(--used)}.chip.keep{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip.base{background:var(--accent);color:var(--accent-ink);border-color:var(--accent-ink)}
.chip.mine{color:var(--good)}
.chip.conf-h{color:var(--good)}.chip.conf-m{color:var(--warn)}.chip.conf-l{color:var(--bad)}

/* Toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0 10px}
.seg{display:inline-flex;border:1.5px solid var(--rule);border-radius:3px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:8px 11px;font:700 12.5px/1 var(--display);font-stretch:108%;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.active{background:var(--ink);color:var(--bg)}
.seg button small{font-family:var(--mono);font-weight:500;opacity:.7;margin-left:3px}
.toolbar select,.toolbar input[type=search]{border:1.5px solid var(--line);background:var(--surface);border-radius:3px;padding:8px 10px;font-size:15px;min-width:0}
.toolbar input[type=search]{flex:1 1 200px;max-width:320px}
.count{margin-left:auto;font:500 13px/1 var(--mono);color:var(--muted)}

/* Main table */
.tablewrap{overflow:auto;max-height:78vh;border:2px solid var(--rule);background:var(--surface);overscroll-behavior-x:contain}
table.spec{border-collapse:separate;border-spacing:0;width:100%;min-width:1180px;font-size:14px}
/* Columns menu: hidden columns keep their cells in the DOM */
.spec.hide-tax .col-tax,.spec.hide-insurance .col-insurance,.spec.hide-registration .col-registration,.spec.hide-interest .col-interest{display:none}
.colmenu{position:relative}
.colmenu>summary{list-style:none;cursor:pointer;border:1.5px solid var(--line);background:var(--surface);border-radius:3px;padding:8px 10px;font:700 12.5px/1 var(--display);font-stretch:108%;letter-spacing:.05em;text-transform:uppercase}
.colmenu>summary::-webkit-details-marker{display:none}
.colmenu>summary::after{content:" ▾";color:var(--muted)}
.colmenu[open]>summary{border-color:var(--rule)}
.colmenu-pop{position:absolute;z-index:20;top:calc(100% + 6px);left:0;width:260px;background:var(--surface);border:2px solid var(--rule);box-shadow:0 8px 24px rgba(0,0,0,.14);padding:10px 12px;display:grid;gap:8px;font-size:14px}
.colmenu-pop p{margin:0 0 2px;font-size:12px;color:var(--muted)}
.colmenu-pop label{display:flex;gap:8px;align-items:center;cursor:pointer}
@media (max-width:760px){.colmenu{display:none}}
.spec th,.spec td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;vertical-align:middle;background:var(--surface)}
.spec thead th{position:sticky;top:0;z-index:3;background:var(--sunk);border-bottom:2px solid var(--rule);font:800 11px/1.15 var(--display);font-stretch:110%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);cursor:pointer;user-select:none;vertical-align:bottom}
.spec thead th:hover{color:var(--ink)}
.spec thead th[aria-sort]::after{content:" ↓";color:var(--ink)}
.spec thead th[aria-sort=ascending]::after{content:" ↑"}
.spec th.l,.spec td.l{text-align:left}
.spec .stick{position:sticky;left:0;z-index:2}
.spec thead .stick{z-index:4}
.spec .stick2{position:sticky;left:356px;z-index:2;box-shadow:inset -2px 0 0 var(--rule)}
.spec thead .stick2{z-index:4}
.spec td.veh{width:356px;min-width:356px;max-width:356px;white-space:normal}
.spec tbody tr:hover td{background:var(--sunk)}
.spec tbody tr.is-base td{background:var(--accent-soft)}
.vrow{display:grid;grid-template-columns:18px 22px 72px minmax(0,1fr);gap:6px;align-items:start}
/* Photos: thumbnail in the table, photo on phone cards, hero on the sticker. Fixed boxes, so nothing shifts as they load. */
.vthumb-btn,.card-photo,.st-hero{background:radial-gradient(ellipse 72% 62% at 50% 56%,var(--photo-hi),var(--photo-lo))}
.vthumb-btn,.card-photo{display:block;padding:0;border:0;cursor:pointer;overflow:hidden}
.card-photo{width:calc(100% + 24px);margin:-12px -12px 10px}
.vthumb-btn{width:72px;height:54px;border-radius:2px;margin-top:1px}
.vthumb{display:block;width:72px;height:54px;object-fit:contain}
.cphoto{display:block;width:100%;height:100%;object-fit:contain}
.card-photo{height:150px}
.st-hero{margin:0;border-bottom:3px solid var(--rule);position:relative}
.st-hero .ph-src{position:absolute;right:10px;bottom:8px;margin:0;background:var(--surface);text-decoration:none;text-align:center;opacity:.8}
.st-hero .ph-src:hover,.st-hero .ph-src:focus-visible{opacity:1}
.st-img{display:block;width:100%;height:auto;max-height:340px;aspect-ratio:2/1;object-fit:contain}
@media (max-width:760px){.st-img{aspect-ratio:4/3}}
svg.sil{display:block;width:100%;height:100%;padding:8%;color:var(--muted)}
svg.sil path{fill:currentColor;opacity:.55}svg.sil circle{fill:currentColor}
.grip{cursor:grab;color:var(--muted);font-size:16px;line-height:1;user-select:none;touch-action:none;background:none;border:1px solid transparent;border-radius:3px;padding:3px 2px;margin-top:-2px;width:22px}
.grip:hover{color:var(--ink);border-color:var(--line);background:var(--sunk)}
.grip:active{cursor:grabbing}
body.is-reordering,body.is-reordering *{cursor:grabbing!important;user-select:none!important}
.spec tbody tr.dragging td,.card.dragging{opacity:.45}
.spec tbody tr.drop-before td{box-shadow:inset 0 3px 0 var(--accent)}
.spec tbody tr.drop-after td{box-shadow:inset 0 -3px 0 var(--accent)}
.card.drop-before{box-shadow:0 -4px 0 var(--accent)}
.card.drop-after{box-shadow:0 4px 0 var(--accent)}
/* Identity: manufacturer + body style, subtle hue shifts */
:root{--make-l:34%;--make-s:42%;--make-edge-l:52%;--body-bg-l:93%;--body-bg-s:32%;--body-fg-l:30%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--make-l:74%;--make-s:48%;--make-edge-l:58%;--body-bg-l:20%;--body-bg-s:22%;--body-fg-l:78%}}
:root[data-theme="dark"]{--make-l:74%;--make-s:48%;--make-edge-l:58%;--body-bg-l:20%;--body-bg-s:22%;--body-fg-l:78%}
.idline{display:flex;gap:6px;align-items:center;margin-bottom:3px;flex-wrap:wrap}
.make{font:700 10px/1 var(--display);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;color:hsl(var(--h) var(--make-s) var(--make-l))}
.body{font:500 11px/1 var(--body);letter-spacing:.02em;padding:2px 5px 1px;border-radius:2px;background:hsl(var(--bh) var(--body-bg-s) var(--body-bg-l) / .7);color:hsl(var(--bh) 22% var(--body-fg-l))}
.spec td.veh{box-shadow:inset 3px 0 0 hsl(var(--h,0) var(--make-s) var(--make-edge-l) / .55)}
.cards .card{border-left:4px solid hsl(var(--h,0) var(--make-s) var(--make-edge-l) / .65)}
.st-links{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;padding:10px 16px;border-top:3px solid var(--rule);font-size:13px}
.st-links a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.st-links a:hover{color:var(--ink);text-decoration-color:var(--accent)}
.st-links .sep{color:var(--muted)}
.rank{font:500 12px/1.6 var(--mono);color:var(--muted);text-align:right}
.vname{font:800 15px/1.15 var(--display);font-stretch:100%;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;text-decoration-thickness:2px}
.vname:hover{text-decoration-color:var(--accent)}
.vmeta{font-size:12.5px;color:var(--muted);margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 7px;align-items:center}
.vtext{min-width:0}
.vline{flex-wrap:nowrap;overflow:hidden;white-space:nowrap;gap:6px}
.vline>*{flex:none}
.spec .vline .chip{font-size:9.5px;padding:3px 4px 2px;letter-spacing:.07em}
.vline .mi,.vnote .mi{font-family:var(--mono);font-size:11px}
.st-head .vline{flex-wrap:wrap;white-space:normal}
.spec .vnote{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.vnote{font-size:12.5px;color:var(--ink2);margin-top:3px;line-height:1.3}
.cpmcell{min-width:118px}
.cpmv{font:600 19px/1 var(--mono);letter-spacing:-.02em;display:inline-flex;align-items:center;gap:7px}
.band{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.b1{background:var(--good)}.b2{background:var(--ok)}.b3{background:var(--warn)}.b4{background:var(--bad)}
.rng{font:500 11px/1 var(--mono);color:var(--muted);margin-top:5px}
.delta{font-family:var(--mono)}
.pos{color:var(--bad)}.neg{color:var(--good)}
.trail{font-family:var(--mono);letter-spacing:1px}
.trail b{color:var(--ink)}.trail i{font-style:normal;color:var(--line)}
td.total{font:700 15px/1.2 var(--mono);color:var(--ink);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.spec th[data-col="total"]{background:color-mix(in srgb,var(--accent) 38%,var(--sunk));color:var(--ink)}
/* Total cost of ownership over the chosen years: the number people compare, so it reads first */
.tco{font-weight:800}
.card-grid .tco-cell .v{font:800 18px/1.2 var(--mono)}
.st-tco{font-size:17px;margin-top:4px}.st-tco b{font:800 22px/1 var(--mono)}
.h2h .tco-row td{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.cmp{min-width:98px}

/* Mobile cards */
.cards{display:none;gap:10px}
.card{background:var(--surface);border:1.5px solid var(--rule);padding:12px 12px 10px;cursor:pointer;overflow:hidden}
.card.is-base{background:var(--accent-soft)}
.card-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.card-id{display:flex;gap:4px;align-items:flex-start;min-width:0}
.card-cpm{text-align:right}
.card .vline .dot{color:var(--line)}
.card .vline .cbody{font-size:12px}
.card .vname{font-size:16px}
.card .cpmv{font-size:24px}
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.card-grid div{min-width:0}
.card-grid .k{font:700 10px/1.1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card-grid .v{font:500 14px/1.3 var(--mono);margin-top:2px}
.card-actions{display:flex;gap:8px;margin-top:10px}
@media (max-width:760px){.tablewrap{display:none}.cards{display:grid}.count{margin-left:0;width:100%}}

/* Compare */
.h2h-lede{font:600 18px/1.4 var(--body);margin:0 0 12px;max-width:80ch}
.h2hwrap{overflow-x:auto;border:2px solid var(--rule);background:var(--surface)}
table.h2h{border-collapse:collapse;width:100%;min-width:760px;font-size:14px}
.h2h th,.h2h td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}
.h2h th[scope=row]{text-align:left;font:700 12px/1.2 var(--display);font-stretch:108%;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);width:190px;background:var(--sunk);position:sticky;left:0;z-index:1}
.h2h thead th{vertical-align:bottom;text-align:right;border-bottom:2px solid var(--rule)}
.h2h thead .hv{font:800 16px/1.1 var(--display);text-align:right}
.h2h .big{font:600 26px/1 var(--mono);letter-spacing:-.02em}
.h2h tr.grp th,.h2h tr.grp td{background:var(--sunk);font:800 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:12px}
.h2h td.best{box-shadow:inset 3px 0 0 var(--good)}
.stack{display:flex;height:14px;width:100%;min-width:120px;border:1px solid var(--rule);background:var(--sunk)}
.stack i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink2);margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;display:inline-block;border:1px solid var(--rule)}
.empty{padding:22px;border:2px dashed var(--line);color:var(--muted);text-align:center}

/* Chart */
.chartbox{background:var(--surface);border:2px solid var(--rule);padding:12px 12px 8px;position:relative}
.chartctl{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.chartctl label{font-size:13px;color:var(--ink2);display:flex;gap:6px;align-items:center}
.chartctl select{border:1px solid var(--line);background:var(--sunk);border-radius:3px;padding:6px 8px}
.chartscroll{overflow:hidden;margin-top:8px}
svg.scatter{display:block;max-width:100%;height:auto;touch-action:manipulation}
.scatter text{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.scatter .tick{font-size:11px;fill:var(--muted)}
.scatter .ax{stroke:var(--muted);stroke-width:1}
.scatter .grid{stroke:var(--line);stroke-width:1;opacity:.7}
.scatter .gutter{stroke:var(--line);stroke-width:1}
.scatter .bandfill{opacity:.07}
.scatter .bandfill.b1{fill:var(--good)}.scatter .bandfill.b2{fill:var(--ok)}.scatter .bandfill.b3{fill:var(--warn)}.scatter .bandfill.b4{fill:var(--bad)}
.scatter .baseline{stroke:var(--ink);stroke-width:1.5}
.scatter .blabel{font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;fill:var(--ink)}
.scatter .corner{font-family:var(--body);font-style:italic;font-size:12px;fill:var(--muted)}
.scatter .dot{stroke:var(--surface);stroke-width:2;paint-order:stroke}
.scatter .dot.hl{stroke:var(--ink);stroke-width:2.5}
.scatter .focus{fill:none;stroke:var(--ink);stroke-width:2;pointer-events:none}
.scatter .lbl{font-family:var(--body);font-weight:600;font-size:11.5px;fill:var(--ink2);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
.scatter .lbl.strong{font-family:var(--display);font-weight:800;fill:var(--ink)}
.scatter .axt{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.08em;fill:var(--ink2);text-transform:uppercase}
:root{--d-new:#2453A0;--d-used:#B8621B;--d-keep:#0E8A78;--d-mine:#7B4FB8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--d-new:#5F8CE3;--d-used:#C27838;--d-keep:#2FA28F;--d-mine:#9B7ADB}}
:root[data-theme="dark"]{--d-new:#5F8CE3;--d-used:#C27838;--d-keep:#2FA28F;--d-mine:#9B7ADB}
.d-new{fill:var(--d-new)}.d-used{fill:var(--d-used)}.d-keep{fill:var(--d-keep)}.d-mine{fill:var(--d-mine)}
.legend .sw{width:10px;height:10px;border-radius:50%;border:0;display:inline-block}
.legend .sw.d-new{background:var(--d-new)}.legend .sw.d-used{background:var(--d-used)}.legend .sw.d-keep{background:var(--d-keep)}.legend .sw.d-mine{background:var(--d-mine)}
.legend .sw.ring{background:var(--surface);box-shadow:0 0 0 2px var(--ink) inset}
.legend b{font-weight:500;color:var(--muted);font-size:11.5px}
.legend .muted{color:var(--muted)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px;cursor:pointer}
.linkish:hover{color:var(--ink);text-decoration-color:var(--accent)}
.loc-pick{margin:10px 0 0;font-size:13px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.loc-pick button{border:1px solid var(--line);background:var(--surface);border-radius:3px;padding:6px 8px;font:600 12.5px/1.25 var(--body);cursor:pointer;color:var(--ink);width:100%;text-align:left}
.loc-pick button span{color:var(--muted);font-weight:400}
.loc-pick button b{font-family:var(--mono);font-weight:600}
.loc-pick button[aria-pressed="true"]{border-color:var(--rule);background:var(--accent-soft)}
.loc-pick small{color:var(--muted);width:100%}
/* Your current car: a keep row the visitor enters, shown in the list with an asterisk */
.mycar-body{padding:0 16px 14px}
.mycar>summary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mycar-summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--ink2)}
.mycar-summary b{color:var(--ink)}
.mycar-form{margin-top:12px}
.field.check{display:flex;gap:8px;align-items:center;flex-direction:row}
.field.check input{width:auto}
.ast{color:var(--warn);font:800 13px/1 var(--display);margin-left:2px;vertical-align:super;text-decoration:none}
.ast-note{font-size:12.5px;color:var(--muted);margin:8px 2px 0}
label.need>span:first-child::after{content:'Pick one for better suggestions';color:var(--warn);font-weight:600;font-size:12px}
label.need select{outline:2px solid var(--warn)}
.sugg{display:block;min-height:15px;font-size:12px;line-height:1.3;color:var(--muted)}
.sugg b{font-family:var(--mono);font-weight:600;color:var(--ink)}
.sugg .linkish{font-size:12px;margin-left:4px}
.sugg i{font-style:normal}
.sugg.conf-low b::after{content:" ~";color:var(--muted)}
.sugg-bar{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:13px;color:var(--ink2);background:var(--accent-soft);border:1px solid var(--line);padding:8px 10px;margin-bottom:12px}
.sugg-bar:empty{display:none}
.sugg-bar select{font:inherit;padding:2px 4px}
.ai-box{border:1px dashed var(--line);padding:10px 12px;margin-bottom:12px;background:var(--surface)}
.ai-box textarea,.import textarea{width:100%;font:inherit;padding:8px;border:1px solid var(--line);background:var(--sunk);color:var(--ink);resize:vertical}
.ai-box .actions{margin-top:8px}
.import-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.import .fine{font-size:12.5px;color:var(--muted);margin:10px 0 0}
#i-text-wrap{margin-top:10px}
.i-card{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center;border:1px solid var(--line);padding:10px;margin-top:10px;background:var(--sunk)}
.i-card .v{font:600 14px/1.3 var(--mono)}
.i-reasons{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--ink2)}
details.byhand{margin-top:14px}
details.byhand>summary{cursor:pointer;font:800 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
details.byhand>summary span{font:500 12px/1 var(--body);letter-spacing:0;text-transform:none;color:var(--muted);margin-left:8px}
details.byhand[open]>summary{margin-bottom:12px}
.chip.review{color:var(--warn)}.chip.community{color:var(--new)}
@media (max-width:560px){.import-row{grid-template-columns:1fr}}
.raw{object-fit:cover!important}
.st-own{padding:14px 16px;border-top:3px solid var(--rule)}
.st-own p{margin:6px 0;font-size:14px}
.own-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}
.own-grid>div{border:1px solid var(--line);padding:10px;background:var(--surface);min-width:0}
.own-grid .k{font:700 10.5px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.own-grid .v{font:700 22px/1.2 var(--mono);margin:4px 0}
.own-grid .s{font-size:12.5px;color:var(--ink2);overflow-wrap:anywhere}
.stars{color:var(--accent-ink);background:var(--accent);padding:0 4px;letter-spacing:1px;font-size:16px}
.own-quote{font-style:italic;color:var(--ink2)}.own-quote span{font-style:normal;color:var(--muted);font-size:12.5px}
@media (max-width:640px){.own-grid{grid-template-columns:1fr}}
/* Source chips: tap any number on a sticker to see where it came from */
.src{background:none;border:1px solid var(--line);border-radius:50%;width:16px;height:16px;padding:0;margin-left:5px;font:700 10px/14px var(--body);color:var(--muted);cursor:pointer;vertical-align:1px}
a.src{display:inline-block;text-align:center;text-decoration:none}
.src:hover,.src[aria-expanded="true"]{border-color:var(--rule);color:var(--ink)}
.srcpop{position:fixed;z-index:200;max-width:340px;background:var(--surface);color:var(--ink);border:2px solid var(--rule);box-shadow:0 8px 24px rgba(0,0,0,.18);padding:10px 12px;font-size:13px;line-height:1.35}
.srcpop b{display:block;font:800 11px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.srcpop ul{margin:0;padding-left:16px}.srcpop li{margin:4px 0}.srcpop .meta{color:var(--muted);font-size:12px}
.srcpop .none{color:var(--warn)}
/* Scenario summary: pinned under the masthead so it's always clear which assumptions every number uses */
.scbar{position:sticky;top:calc(59px + env(safe-area-inset-top,0px));z-index:35;background:var(--accent-soft);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink2)}
.scbar .wrap{display:flex;align-items:center;gap:12px;min-height:40px}
.scbar p{margin:0;flex:1;min-width:0;white-space:nowrap;overflow-x:auto;scrollbar-width:none;padding:9px 0}
.scbar p::-webkit-scrollbar{display:none}
.scbar b{font-family:var(--mono);font-weight:600;color:var(--ink)}
.scbar .k{font:800 11px/1 var(--display);font-stretch:110%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-right:6px}
.scbar .applied{color:var(--muted);margin-left:4px}
.scbar .applied::before{content:"— "}
.scbar .ph{display:none}
@media (max-width:760px){.scbar{font-size:12.5px}.scbar .applied,.scbar .lo,.scbar .k{display:none}.scbar .ph{display:inline}
  /* phones: the essentials wrap onto at most 2 lines instead of scrolling out of sight */
  .scbar p{white-space:normal;overflow:visible;line-height:1.45;padding:6px 0}.scbar .wrap{align-items:flex-start}.scbar .btn{margin-top:6px}}
/* A value a scenario change just moved: brief highlight, then settle */
@keyframes chg{0%,30%{opacity:.38}100%{opacity:0}}
.chg:not(.stick2){position:relative}
.chg::after{content:"";position:absolute;inset:0;background:var(--accent);opacity:0;pointer-events:none;animation:chg 1.2s ease-out}
@media (prefers-reduced-motion:reduce){.chg::after{animation:none}}
.chip.deal{color:var(--warn)}
.btn.armed{background:var(--bad);border-color:var(--bad);color:#fff}
#trade-note{font-size:12px}

.legend .offnote{display:block;flex-basis:100%;line-height:1.5}
.seg.sm button{padding:6px 9px;font-size:11px}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);padding:9px 11px;font-size:13px;border-radius:3px;max-width:280px;z-index:5;line-height:1.35}
.tip b{display:block;font-family:var(--display);margin-bottom:3px}
.tip .mono{font-size:12px;display:block}
.tip .tiphint{display:block;margin-top:5px;font-size:11px;opacity:.7}

/* Forms: add / workspaces */
.panel{background:var(--surface);border:2px solid var(--rule);padding:16px}
.two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.formgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px}
@media (max-width:700px){.formgrid{grid-template-columns:1fr 1fr}}
.formgrid .span2{grid-column:span 2}
.formgrid .span4{grid-column:1/-1}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.status{font-size:14px;color:var(--good);min-height:1.3em}
.status.err{color:var(--bad)}
.wslist{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
.wslist li{display:flex;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.wslist li b{font-family:var(--display);flex:1;min-width:140px}
.wslist li small{color:var(--muted);font-family:var(--mono);font-size:11.5px;width:100%}
textarea.code{width:100%;min-height:110px;font:12px/1.4 var(--mono);border:1px solid var(--line);background:var(--sunk);padding:8px;border-radius:3px}

/* Methodology */
.method{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:900px){.method{grid-template-columns:minmax(0,1fr)}}
.method{align-items:start}
.m-art{min-width:0;background:var(--surface);border:1px solid var(--line)}
.m-art>summary{cursor:pointer;list-style:none;padding:14px 18px;display:flex;gap:10px;align-items:baseline}
.m-art>summary::-webkit-details-marker{display:none}
.m-art>summary::before{content:"+";font:600 15px/1 var(--mono);width:14px;flex:none}
.m-art[open]>summary::before{content:"−"}
.m-art>summary:hover h3{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.m-body{padding:0 18px 16px}
.method h3{font:800 15px/1.2 var(--display);font-stretch:112%;text-transform:uppercase;letter-spacing:.05em;margin:0}
.method p,.method li{font-size:15px;color:var(--ink2);max-width:68ch}
.method ul{padding-left:18px;margin:6px 0}
.formula{font:500 13.5px/1.6 var(--mono);background:var(--sunk);border-left:3px solid var(--accent);padding:8px 12px;margin:8px 0;overflow-x:auto;white-space:pre}
table.mini{border-collapse:collapse;font-size:14px;width:100%}
.mini th,.mini td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left}
.mini td.r,.mini th.r{text-align:right;font-family:var(--mono)}

/* Window sticker dialog */
dialog.sticker{border:0;padding:0;width:min(1060px,calc(100vw - 24px));max-height:calc(100dvh - 24px);background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.sticker::backdrop{background:rgba(14,16,17,.62)}
.st-frame{border:3px solid var(--rule);margin:10px;display:flex;flex-direction:column}
.st-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px 16px 12px;border-bottom:3px solid var(--rule);align-items:start}
.st-head .eyebrow{margin-bottom:8px}
.st-head h2{font:900 clamp(22px,3vw,32px)/1 var(--display);font-stretch:112%;margin:0;text-wrap:balance}
.st-head .vmeta{font-size:13.5px;margin-top:8px}
.st-close{font:600 20px/1 var(--mono);background:none;border:1.5px solid var(--rule);width:36px;height:36px;cursor:pointer;border-radius:3px}
.st-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);}
.st-col{padding:14px 16px;min-width:0}
.st-col+.st-col{border-left:1px solid var(--rule)}
@media (max-width:820px){.st-body{grid-template-columns:1fr}.st-col+.st-col{border-left:0;border-top:1px solid var(--rule)}}
.st-box{border:2px solid var(--rule);padding:12px;margin-bottom:12px}
.st-box.hl{background:var(--accent);color:var(--accent-ink);border-color:var(--accent-ink)}
.st-box .k{font:800 11px/1.2 var(--display);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase}
.st-cpm{font:600 56px/1 var(--mono);letter-spacing:-.04em;margin:6px 0 2px}
.st-cpm small{font-size:18px;letter-spacing:0}
.st-sub{font-size:14px}
.st-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-pair .v{font:600 20px/1.1 var(--mono);margin-top:5px}
.st-pair .s{font-size:12.5px;color:var(--muted);margin-top:3px}
.st-h{font:800 12px/1 var(--display);font-stretch:115%;letter-spacing:.12em;text-transform:uppercase;margin:16px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--rule);display:flex;justify-content:space-between;gap:8px}
.st-h:first-child{margin-top:0}
.st-h span{font:400 12px/1 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
table.brk{width:100%;border-collapse:collapse;font-size:14px}
.brk td{padding:5px 0;border-bottom:1px dotted var(--line)}
.brk td.r{text-align:right;font-family:var(--mono)}
.brk td.p{text-align:right;font-family:var(--mono);color:var(--muted);width:48px}
.brk td.bar{width:34%;padding-left:10px}
.brk td.bar i{display:block;height:8px;background:var(--ink2)}
.brk tr.tot td{border-bottom:0;border-top:2px solid var(--rule);font-weight:700;padding-top:7px}
table.sens{width:100%;border-collapse:collapse;font-size:13px}
.sens th,.sens td{padding:6px 6px;border:1px solid var(--line);text-align:right;font-family:var(--mono)}
.sens th{font:700 11px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;background:var(--sunk);text-align:left}
.sens td.cur{background:var(--accent-soft);font-weight:600}
.st-edit .fields{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:520px){.st-edit .fields{grid-template-columns:1fr 1fr}}
.st-foot{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:10px 16px;border-top:3px solid var(--rule);font-size:12.5px;color:var(--muted)}
.st-foot a{color:var(--muted)}
.st-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.st-vnote{margin-top:6px}
.st-body.solo{grid-template-columns:1fr}
.st-issues+.st-mblock,.st-mblock+.st-own,.st-issues+.st-own{margin-top:18px}
.st-col>section:first-child .st-h,.st-col>.st-issues:first-child>.st-h{margin-top:0}
.st-col .st-own{padding:0;border-top:0}
.st-quiet{font-size:13.5px;color:var(--muted);margin:6px 0 0}
.st-more{border-top:3px solid var(--rule)}
.st-dis>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:12px 16px}
.st-dis>summary::-webkit-details-marker{display:none}
.st-dis>summary::before{content:"+";font:600 15px/1 var(--mono);width:14px;flex:none}
.st-dis[open]>summary::before{content:"−"}
.st-dis>summary:hover .st-dt{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.st-dt{font:800 12px/1.2 var(--display);font-stretch:115%;letter-spacing:.12em;text-transform:uppercase}
.st-ds{font:500 12.5px/1.2 var(--mono);color:var(--muted)}
.st-more>.st-dis+.st-dis{border-top:1px solid var(--line)}
.st-dis-body{padding:0 16px 14px}
.st-dis-body>.st-h:first-child{margin-top:4px}
.st-dis-in{margin-top:8px;border:1px dashed var(--line)}
.st-dis-in>summary{padding:9px 11px;font-size:13.5px;color:var(--ink2)}
.st-dis-in .st-dis-body{padding:0 8px 8px}
.sens-wrap{overflow-x:auto}
.st-edit .fields{margin-top:4px}
.conf{display:flex;flex-wrap:wrap;gap:6px}
.st-msum{font:500 15px/1.45 var(--body);margin:0 0 10px;max-width:60ch}
.st-note{font-size:13px;color:var(--warn);margin:8px 0 0}
.st-war{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:13px;margin:12px 0}
.st-war dt{font:700 11px/1.5 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.st-war dd{margin:0;color:var(--ink2)}
ol.issues{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.issue{border:1px solid var(--line);border-left:4px solid var(--line);padding:9px 11px;background:var(--surface)}
.issue.od-high.cv-no,.issue.od-high.cv-part{border-left-color:var(--bad)}
.issue.od-med.cv-no,.issue.od-med.cv-part{border-left-color:var(--warn)}
.issue.cv-yes{border-left-color:var(--good);background:var(--sunk)}
.iss-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.iss-top b{font:800 14px/1.25 var(--display)}
.iss-cost{font-size:13px;white-space:nowrap;font-weight:600}
.issue.cv-yes .iss-cost{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--good)}
.iss-prob{font-size:13.5px;color:var(--ink2);margin-top:3px;line-height:1.35}
.iss-meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:6px;font-size:12px;color:var(--muted)}
.iss-meta a{color:var(--muted)}.iss-meta a:hover{color:var(--ink)}
.iss-cov{font-size:12px;color:var(--muted);margin-top:3px}
.odds,.cov{font:700 10.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:3px 5px 2px;border-radius:2px;border:1px solid currentColor}
.odds.od-high{color:var(--bad)}.odds.od-med{color:var(--warn)}.odds.od-low{color:var(--muted)}
.cov.cv-yes{color:var(--good)}.cov.cv-part{color:var(--warn)}.cov.cv-no{color:var(--bad)}
.rng.risk{color:var(--warn);font-family:var(--body);font-weight:600}
.st-edit .field{align-content:end}

/* Footer: one quiet line at the very bottom. --muted meets WCAG AA on --bg in both themes (4.7:1 light, 6.9:1 dark). */
.foot-min{padding-block:18px 28px;margin-top:36px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--muted)}
.foot-min a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.foot-min a:hover{color:var(--ink);text-decoration-color:var(--accent)}
.foot-min a:focus-visible{color:var(--ink)}

/* Credits page (/credits) */
.cr-main{max-width:1100px;padding-block:22px 0}
.cr-main h1{font-size:clamp(30px,4.4vw,48px);margin-bottom:10px}
.cr-back{margin:0 0 18px;font:700 13px/1 var(--display);font-stretch:108%;letter-spacing:.05em;text-transform:uppercase}
.cr-back a{text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}
.cr-sec{margin-top:26px;border-top:3px solid var(--rule);padding-top:12px}
.cr-sec h2{font:900 clamp(20px,2.4vw,26px)/1 var(--display);font-stretch:115%;text-transform:uppercase;margin:0 0 10px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.cr-sec h2 span{font:500 13px/1 var(--mono);text-transform:none;color:var(--muted)}
.cr-lede{max-width:75ch;color:var(--ink2);margin:0 0 14px}
.cr-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:8px}
.cr-item{background:var(--surface);border:1px solid var(--line);padding:10px 12px;display:grid;gap:3px;font-size:13.5px;scroll-margin-top:80px;min-width:0}
.cr-item.cr-hit,.cr-item:target{border-color:var(--rule);box-shadow:inset 4px 0 0 var(--accent)}
.cr-car{font:800 14px/1.2 var(--display)}
.cr-shows{color:var(--ink2)}
.cr-meta{display:flex;flex-wrap:wrap;gap:2px 12px;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.cr-meta a,.cr-links a,.cr-research a{color:var(--ink2)}
.cr-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:10px}
.cr-group{background:var(--surface);border:1px solid var(--line);padding:12px 14px;min-width:0}
.cr-group h3{font:800 13px/1.2 var(--display);font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px}
.cr-group p{margin:0 0 6px;font-size:14px;color:var(--ink2)}
.cr-wide{grid-column:1/-1}
.cr-research{font-size:13px;columns:2 300px;column-gap:24px;padding-left:22px;margin:6px 0 0}
.cr-research li{break-inside:avoid;margin-bottom:3px;overflow-wrap:anywhere}
.cr-fine{margin:22px 0 0;font-size:13px;color:var(--muted);max-width:80ch}
