:root{
  --r-lg:22px; --r-md:14px; --r-sm:9px;
  --shadow-lg:0 24px 70px -20px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.25);
  --shadow-md:0 12px 34px -14px rgba(0,0,0,.45);
  --ease:cubic-bezier(.2,.85,.25,1);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
[data-accent="aurora"]{--accent:38 92% 56%;--accent2:190 95% 48%;--blob1:#10b981;--blob2:#0ea5e9;--blob3:#6366f1;}
[data-accent="sunset"]{--accent:18 95% 60%;--accent2:330 92% 62%;--blob1:#fb923c;--blob2:#f43f5e;--blob3:#d946ef;}
[data-accent="synapse"]{--accent:262 90% 66%;--accent2:190 95% 55%;--blob1:#7c3aed;--blob2:#ec4899;--blob3:#22d3ee;}
[data-accent="emerald"]{--accent:152 76% 46%;--accent2:86 72% 52%;--blob1:#059669;--blob2:#84cc16;--blob3:#14b8a6;}
[data-accent="crimson"]{--accent:356 82% 60%;--accent2:24 92% 58%;--blob1:#e11d48;--blob2:#f97316;--blob3:#b91c1c;}
[data-accent="slate"]{--accent:210 65% 58%;--accent2:260 50% 66%;--blob1:#3b82f6;--blob2:#8b5cf6;--blob3:#475569;}
[data-mode="dark"]{
  --bg:#070a0f; --fg:#eef3f8; --muted:#9db0c4; --faint:#8fa2b7;
  --glass:rgba(17,24,35,.62); --glass-2:rgba(255,255,255,.045);
  --stroke:rgba(255,255,255,.10); --stroke-2:rgba(255,255,255,.16);
  --row-alt:rgba(255,255,255,.022); --row-hover:rgba(255,255,255,.06);
  --good:#34d399; --warn:#fbbf24;
  --atext:color-mix(in srgb,hsl(var(--accent)) 66%,#fff);   /* lifted: Synapse/Crimson accents fail 4.5:1 on dark glass raw */
}
[data-mode="light"]{
  --bg:#eef2f7; --fg:#0d1520; --muted:#4c5e71; --faint:#536373;
  --glass:rgba(255,255,255,.66); --glass-2:rgba(255,255,255,.75);
  --stroke:rgba(10,20,35,.10); --stroke-2:rgba(10,20,35,.16);
  --row-alt:rgba(10,25,45,.026); --row-hover:rgba(10,25,45,.06);
  --good:#036649; --warn:#b45309;
  --atext:color-mix(in srgb,hsl(var(--accent)) 50%,#000);   /* accent TEXT on light glass needs >= 4.5:1 */
}
html{font-size:clamp(14px,.6vw + 8px,18px)}      /* fluid root: ~14px phones, ~16px at 1330px, 18px on big screens; text is in rem */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--fg);background:var(--bg);font-size:0.8438rem;
  line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
:where(#board) thead th,:where(#board) tbody tr{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
body.dragging{user-select:none!important;cursor:grabbing}
body.dragging *{pointer-events:none!important}

/* Soft colour blobs. CPU/GPU-cheap on purpose: radial gradients instead of a 70px blur over a viewport-sized layer, no
   blend modes, transform-only animation (compositor), and the animation stops when the tab is hidden or idle. */
.bg{position:fixed;inset:-10%;z-index:-2;contain:strict;pointer-events:none}   /* soft enough that faint text keeps its contrast */
.blob{position:absolute;border-radius:50%;opacity:.3;background-image:radial-gradient(circle,var(--bc) 0%,transparent 68%)}   /* opacity per blob: a group opacity forces an offscreen composite every frame */
[data-mode="light"] .blob{opacity:.15}
.bg.paused .blob{animation-play-state:paused}
.b1{width:46vw;height:46vw;--bc:var(--blob1);top:4%;left:-8%;animation:drift1 26s var(--ease) infinite alternate}
.b2{width:40vw;height:40vw;--bc:var(--blob2);top:38%;right:-12%;animation:drift2 32s var(--ease) infinite alternate}
.b3{width:34vw;height:34vw;--bc:var(--blob3);bottom:-14%;left:28%;animation:drift3 38s var(--ease) infinite alternate}
.b4{width:24vw;height:24vw;--bc:var(--blob2);top:16%;left:44%;animation:drift2 44s var(--ease) infinite alternate-reverse}
@keyframes drift1{to{transform:translate3d(22vw,14vh,0) scale(1.18)}}
@keyframes drift2{to{transform:translate3d(-18vw,-10vh,0) scale(.86)}}
@keyframes drift3{to{transform:translate3d(12vw,-16vh,0) scale(1.24)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:radial-gradient(circle at 1px 1px, var(--stroke) 1px, transparent 1.5px);
  background-size:34px 34px;}
@media (prefers-reduced-motion: reduce){.blob{animation:none!important}*{transition-duration:.01ms!important}}

.glass{background:var(--glass);border:1px solid var(--stroke);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.18);}
[data-mode="light"] .glass{box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.9)}

.wrap{width:100%;max-width:min(100%,2400px);margin:0 auto;padding:clamp(14px,1.6vw,28px) clamp(12px,2.4vw,44px) clamp(48px,6vw,96px)}
header.top{position:static;padding:12px 0}   /* not sticky: it would cover the table's sticky header row */
.top-in{display:flex;align-items:center;gap:16px;padding:11px 18px;border-radius:var(--r-lg)}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.logo{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,hsl(var(--accent)),hsl(var(--accent2)));
  box-shadow:0 6px 18px -6px hsl(var(--accent)/.7), inset 0 1px 0 rgba(255,255,255,.4);
  font-weight:800;color:#fff;font-size:0.9375rem}
.brand-txt b,.brand-txt h1{font-size:0.9375rem;letter-spacing:-.2px;white-space:nowrap;font-weight:700}
.brand-txt span{display:block;font-size:0.6875rem;color:var(--muted);white-space:nowrap}
.brand-txt h1 span{font-weight:400;letter-spacing:0}
.top-spacer{flex:1}
.icon-btn{height:36px;min-width:36px;padding:0 10px;border-radius:11px;border:1px solid var(--stroke);
  background:var(--glass-2);color:var(--fg);cursor:pointer;font-size:0.8125rem;font:inherit;transition:.2s var(--ease)}
.icon-btn:hover{border-color:var(--stroke-2);transform:translateY(-1px)}
.icon-btn:focus-visible{outline:2px solid var(--atext);outline-offset:2px}
.chip-live{font-size:0.6875rem;padding:4px 10px;border-radius:999px;border:1px solid hsl(var(--accent)/.45);
  color:var(--atext);background:hsl(var(--accent)/.1);font-weight:700;letter-spacing:.4px;white-space:nowrap}
.chip-live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:hsl(var(--accent));
  margin-right:6px;box-shadow:0 0 8px hsl(var(--accent))}   /* static on purpose: an infinite blink here kept the GPU process at ~800% CPU */
.swatches{display:flex;gap:6px;padding:5px 9px;border-radius:13px;border:1px solid var(--stroke);background:var(--glass-2)}
.sw{width:19px;height:19px;border-radius:7px;cursor:pointer;border:2px solid transparent;transition:.2s var(--ease)}
.sw:hover{transform:scale(1.14)}
.sw.on{border-color:var(--fg);box-shadow:0 0 0 2px var(--bg),0 0 0 4px hsl(var(--accent)/.5)}
.sw:focus-visible{outline:2px solid var(--atext);outline-offset:2px}

/* ---- filter bar: the category filters ---- */
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:20px 0 16px}
.fgroup-label{font-size:0.6562rem;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:700;margin-right:2px}
.fchip{font:inherit;font-size:0.75rem;font-weight:600;padding:7px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--stroke);background:var(--glass-2);color:var(--muted);transition:.2s var(--ease)}
.fchip:hover{color:var(--fg);border-color:var(--stroke-2);transform:translateY(-1px)}
.fchip.on{color:#04101c;border-color:transparent;background:linear-gradient(140deg,hsl(var(--accent)),hsl(var(--accent2)));
  box-shadow:0 6px 16px -8px hsl(var(--accent)/.9)}
.fchip.n{opacity:.55}
.search{position:relative;margin-left:auto}
.search input{padding:0 12px 0 34px;height:36px;width:clamp(150px,16vw,300px);border-radius:11px;border:1px solid var(--stroke);
  background:var(--glass-2);color:var(--fg);font:inherit;font-size:0.7812rem;transition:.22s var(--ease)}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none;border-color:hsl(var(--accent)/.7);box-shadow:0 0 0 3px hsl(var(--accent)/.18);width:clamp(180px,20vw,360px)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--faint)}

/* ---- board ---- */
.board{border-radius:var(--r-lg);overflow:hidden;position:relative}
.board-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--stroke);flex-wrap:wrap}
.board-head .hint{font-size:0.7188rem;color:var(--muted)}
.board-head .sp{flex:1}
.kbd{font:600 0.625rem var(--mono);padding:2px 6px;border-radius:5px;border:1px solid var(--stroke-2);
  background:var(--row-hover);color:var(--muted)}
.scroll{overflow:auto;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);overscroll-behavior:auto;scroll-padding-left:clamp(190px,24vw,380px);scroll-padding-top:56px}   /* keyboard focus must not land under the pinned column / sticky header */
/* the Model column stays visible while the 14 metric columns scroll sideways; opaque so rows don't show through */
:where(#board) tbody td:first-child,:where(#board) thead th:first-child{position:sticky;left:0;background-color:var(--bg)}
:where(#board) tbody td:first-child{z-index:4}
:where(#board) thead th:first-child{z-index:8;background-image:linear-gradient(var(--glass),var(--glass))}
:where(#board) tbody tr:nth-child(even) td:first-child{background-image:linear-gradient(var(--row-alt),var(--row-alt))}
:where(#board) tbody tr:hover td:first-child{background-image:linear-gradient(var(--row-hover),var(--row-hover))}
:where(#board) tbody td:first-child{box-shadow:1px 0 0 var(--stroke)}
:where(#board){width:100%;border-collapse:separate;border-spacing:0;min-width:min(100%,54rem)}
:where(#board) th,:where(#board) td{padding:.7rem clamp(.4rem,.7vw,.9rem);text-align:left;white-space:nowrap;vertical-align:middle}
:where(#board) thead th{position:sticky;top:0;z-index:5;background:var(--glass);
  border-bottom:1px solid var(--stroke-2);font-size:0.6562rem;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);font-weight:700;cursor:grab;touch-action:pan-x pan-y}
:where(#board) thead th:hover{color:var(--fg)}
:where(#board) thead th .colwrap{display:flex;flex-direction:column;gap:1px;width:min-content;min-width:4.6rem;white-space:normal}   /* labels wrap at spaces: the column is as narrow as its data */
:where(#board) thead th .colwrap b{font-size:0.6562rem;letter-spacing:.5px;font-weight:750}
:where(#board) thead th .colwrap i{display:none;font-style:normal;font-size:0.5938rem;color:var(--faint);letter-spacing:.2px;text-transform:none;font-weight:500}
:where(#board) thead th.sorted{color:var(--atext)}
:where(#board) thead th .sortarrow{font-size:0.5625rem;color:var(--atext);margin-left:3px}
:where(#board) tbody tr{transition:background .18s var(--ease)}
:where(#board) tbody tr:nth-child(even){background:var(--row-alt)}
:where(#board) tbody tr:hover{background:var(--row-hover)}
:where(#board) tbody tr.flash td{animation:flash .9s var(--ease)}
@keyframes flash{0%{background:hsl(var(--accent)/.22)}100%{background:transparent}}
.cell-model{display:flex;align-items:center;gap:.7rem;max-width:none;min-width:min(12rem,40vw)}
.rank{width:24px;height:24px;flex:none;border-radius:8px;display:grid;place-items:center;font:700 0.6875rem var(--mono);
  background:var(--row-hover);color:var(--muted);border:1px solid var(--stroke)}
:where(#board) tr:nth-child(1) .rank{background:linear-gradient(140deg,hsl(var(--accent)),hsl(var(--accent2)));color:#04101c;
  border-color:transparent;box-shadow:0 4px 12px -4px hsl(var(--accent)/.8)}
:where(#board) tr:nth-child(2) .rank{color:var(--atext);border-color:hsl(var(--accent)/.4)}
:where(#board) tr:nth-child(3) .rank{color:var(--atext);border-color:hsl(var(--accent2)/.4)}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.mname{font-weight:650;font-size:0.8438rem;letter-spacing:-.15px;display:inline-block;max-width:clamp(9rem,12vw,20rem);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.morg{display:inline-block;max-width:clamp(9rem,12vw,20rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
.morg{font-size:0.6562rem;color:var(--faint)}
.tags{display:inline-flex;gap:4px}
.tag{font-size:0.5625rem;font-weight:700;padding:2px 6px;border-radius:5px;letter-spacing:.3px;
  background:var(--row-hover);color:var(--muted);border:1px solid var(--stroke)}
.tag.open{color:var(--good);border-color:hsl(140 60% 50% / .35)}
.cell-score{display:flex;flex-direction:column;gap:5px;width:100%;min-width:5rem;max-width:12rem}
.score-top{display:flex;align-items:baseline;gap:5px}
.score-val{font:650 0.8125rem var(--mono);letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.score-unit{font-size:0.5938rem;color:var(--faint)}
.prov{font-size:0.5312rem;color:var(--faint);cursor:help}
.bar{height:5px;border-radius:99px;background:var(--row-hover);overflow:hidden;position:relative}
.bar i{position:absolute;inset:0 auto 0 0;border-radius:99px;
  background:linear-gradient(90deg,hsl(var(--accent2)),hsl(var(--accent)));
  box-shadow:0 0 10px -2px hsl(var(--accent)/.8)}
.cell-price .score-val{color:var(--atext);font-weight:700;font-size:0.8438rem}
.cell-price .bar i{background:linear-gradient(90deg,hsl(var(--accent)),#f59e0b)}
.release-pill{--rfg:var(--rfg-d);display:inline-flex;align-items:center;gap:6px;font:600 0.7188rem var(--mono);
  letter-spacing:-.2px;padding:5px 10px;border-radius:8px;font-variant-numeric:tabular-nums;
  background:var(--rbg);color:var(--rfg);border:1px solid var(--bd)}
.release-pill::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--rfg);box-shadow:0 0 7px var(--rfg)}
footer{margin-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
  padding:14px 18px;border-radius:var(--r-md);font-size:0.7188rem;color:var(--muted)}

/* ---- affiliate section: SEPARATE from the leaderboard, per the trust rule ---- */
.cta{margin-top:22px;padding:20px 22px;border-radius:var(--r-lg);border:1px dashed hsl(var(--accent)/.4)}
.cta h3{font-size:0.8125rem;letter-spacing:.2px;margin-bottom:4px}
.cta p{font-size:0.7188rem;color:var(--muted);margin-bottom:14px}
.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px}
.cta-card{padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--stroke);
  background:var(--glass-2);display:flex;flex-direction:column;gap:5px;transition:.2s var(--ease)}
.cta-card:hover{transform:translateY(-2px);border-color:hsl(var(--accent)/.5);box-shadow:var(--shadow-md)}
.cta-card b{font-size:0.8125rem}
.cta-card small{color:var(--faint);font-size:0.6562rem}
.cta-card a{margin-top:5px;font-size:0.7188rem;font-weight:700;color:var(--atext);text-decoration:none;
  align-self:flex-start}
.cta-card a:hover{text-decoration:underline}
.disclosure{margin-top:14px;font-size:0.6562rem;color:var(--faint);line-height:1.5}
#ghost{position:fixed;z-index:200;pointer-events:none;border-radius:var(--r-md);padding:8px 14px;
  display:flex;align-items:center;gap:12px;font-size:0.7812rem;background:var(--glass);
  border:1px solid var(--stroke-2);box-shadow:var(--shadow-lg);opacity:.94;
  transform:translate(-50%,-50%) scale(1.02) rotate(-.6deg);max-width:520px}
#ghost.hide{display:none}
#ghost b{font-weight:650;white-space:nowrap}
#ghost small{color:var(--faint);font:500 0.625rem var(--mono)}
.loading{padding:60px;text-align:center;color:var(--muted);font-size:0.8125rem}
.loading{min-height:75vh}                       /* reserve the table's space while loading: content below the board must not jump when the rows arrive */
.loading .spin{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--stroke-2);
  border-top-color:var(--atext);margin:0 auto 12px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
::-webkit-scrollbar{height:10px;width:10px}
::-webkit-scrollbar-thumb{background:var(--stroke-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
@media (max-width:900px){.search input{width:130px}.brand-txt span{display:none}}

/* ---- additions from the audit ---- */
.release-pill.approx{border-style:dashed}
.err-box{padding:46px 20px;text-align:center;color:var(--muted);font-size:0.8125rem}
.err-box button{margin-top:12px;font:inherit;font-weight:650;padding:7px 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--stroke-2);background:var(--glass-2);color:var(--fg)}
.err-box button:focus-visible,:where(#board) thead th:focus-visible{outline:2px solid var(--atext);outline-offset:2px}
.noscript{padding:40px;text-align:center;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.score-unit.na{color:var(--muted)}

/* an Index built from fewer than 3 benchmarks is weak evidence: dim it, the n= label stays */
.cell-score.lowconf .score-val{opacity:.6}
.cell-score.lowconf .bar i{opacity:.45}

/* release pill text: bright tint on dark, dark tint on light (contrast >= 4.5:1) */
[data-mode="light"] .release-pill{--rfg:var(--rfg-l)}
/* drag-and-drop feedback */
.drag-src{opacity:.4}
:where(#board) tbody tr.drop-before td{box-shadow:inset 0 2px 0 hsl(var(--accent))}
:where(#board) tbody tr.drop-after td{box-shadow:inset 0 -2px 0 hsl(var(--accent))}
:where(#board) thead th.drop-before{box-shadow:inset 3px 0 0 hsl(var(--accent))}
:where(#board) thead th.drop-after{box-shadow:inset -3px 0 0 hsl(var(--accent))}
:where(#board) tbody tr.flash td:first-child{animation:none}
a.prov{color:inherit;text-decoration:underline dotted;text-underline-offset:2px;cursor:pointer}
a.prov:hover{color:var(--atext)}
#reset-order[hidden]{display:none}
/* phones: the pinned Model column may take at most ~45% of the width so metric columns stay reachable */
@media (max-width:640px){
  /* table cells ignore max-width, so pin the column's width itself */
  :where(#board) thead th:first-child,:where(#board) tbody td:first-child{width:40vw;min-width:40vw;max-width:40vw}
  .cell-model{max-width:calc(40vw - 28px);gap:7px}
  .mname,.morg{max-width:calc(40vw - 28px - 20px - 7px - 18px)}
  .rank{width:20px;height:20px}
  header.top{position:static}                 /* a wrapped two-row sticky bar would cover the table header */
  .top-in{flex-wrap:wrap;row-gap:8px}
  .chip-live{display:none}
  .swatches .sw{width:32px;height:32px}
  .scroll{max-height:calc(100vh - 150px)}
}
/* touch screens cannot drag rows/columns (the browser scrolls instead): don't advertise it */
@media (hover:none){.board-head .hint .hint-drag{display:none}}

/* keyboard users: jump over the 700+ row table */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:8px 14px;border-radius:10px;background:var(--bg);
  color:var(--fg);border:1px solid var(--stroke-2);font-weight:700;text-decoration:none}
.skip:focus{left:12px}


/* ================= responsive layer =================
   >1024  full table, pinned Model column, sticky header
   641-1024  same table, tighter chrome, wrapping controls, scroll-shadow hint at the edge
   <=640  phone: every model becomes a card (the header row is hidden; sorting moves to the "Sort by" menu) */
.fgroup{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sortsel{display:none;font-size:0.7188rem;color:var(--muted);align-items:center;gap:6px}
.sortsel select{font:inherit;font-size:0.7812rem;height:36px;padding:0 10px;border-radius:11px;border:1px solid var(--stroke);
  background:var(--glass-2);color:var(--fg);max-width:46vw}
.sortsel select:focus-visible{outline:2px solid var(--atext);outline-offset:2px}
/* edge fade = "there is more to the right": toggled by JS while the table can still scroll sideways */
.board::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;opacity:0;transition:opacity .2s;
  background:linear-gradient(to left,var(--bg),transparent);z-index:9}
.board.has-more::after{opacity:.9}
@media (max-width:1024px){
  .top-in{flex-wrap:wrap;row-gap:10px}
  .filters{gap:10px 14px}
  .search{margin-left:0;flex:1 1 200px}.search input,.search input:focus{width:100%}
  :where(#board) th,:where(#board) td{padding:.65rem .7rem}
  .swatches{gap:8px}.swatches .sw{width:28px;height:28px}      /* easier to hit than 19px */
  .cell-model{min-width:11rem}.mname,.morg{max-width:clamp(9rem,26vw,16rem)}      /* leave room for the metric columns */
  .fchip{padding:9px 14px}                       /* >= 36px touch target */
}
@media (max-width:640px){
  body{font-size:0.875rem}
  .swatches .sw{width:32px;height:32px}
  .top-in{padding:10px 12px}
  .filters{margin:14px 0 12px;display:grid;grid-template-columns:1fr;gap:10px}
  .fchip{padding:10px 15px;font-size:0.8125rem}
  .search{flex:none;width:100%}.search input{height:42px;font-size:0.875rem}
  .icon-btn{height:42px;min-width:42px}
  .board-head{padding:10px 12px;gap:8px}
  .board-head .hint:first-child{display:none}               /* the drag/click hint is about the desktop table */
  .board::after{display:none}
  .board-head{flex-wrap:wrap}
  .sortsel{display:flex;order:1;flex:1 1 100%;min-width:0}
  .sortsel select{flex:1 1 auto;min-width:0;max-width:none}
  .sp{display:none}
  #counts{white-space:normal;flex:1 1 0;min-width:0}#refresh{flex:none}
  #counts,#refresh,#reset-order{order:2}
  .scroll{max-height:none;overflow:visible;background:none}
  :where(#board){min-width:0;display:block}
  /* the header row is visually hidden but stays in the accessibility tree, so screen readers keep column headers for the cards */
  :where(#board) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  :where(#board) tbody{display:block}
  :where(#board) tbody tr{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:10px 14px;padding:13px 12px;border-bottom:1px solid var(--stroke)}
  :where(#board) tbody td,:where(#board) tbody td:first-child{display:block;position:static;padding:0;white-space:normal;width:auto;min-width:0;max-width:none;
    background:none;box-shadow:none;z-index:auto}
  :where(#board) tbody tr:nth-child(even) td:first-child,:where(#board) tbody tr:hover td:first-child{background-image:none}
  :where(#board) tbody td:first-child,:where(#board) tbody td:nth-child(2),:where(#board) tbody td[colspan]{grid-column:1/-1}
  :where(#board) tbody td:nth-child(n+9):not([data-col="price"]){display:none}      /* a card shows the first 8 columns + price */
  :where(#board) tbody td[data-label]::before{content:attr(data-label);display:block;font-size:0.5938rem;text-transform:uppercase;letter-spacing:.5px;
    color:var(--faint);font-weight:700;margin-bottom:4px}
  :where(#board) tbody td:first-child[data-label]::before{display:none}
  .cell-model{max-width:none;gap:10px}
  .mname,.morg{max-width:calc(100vw - 110px);white-space:normal;overflow:visible;text-overflow:clip;display:inline}
  .mname{font-size:0.9375rem}.morg{font-size:0.75rem}
  .rank{width:26px;height:26px}
  .cell-score{width:auto}
  :where(#board) tbody td:nth-child(2) .score-val{font-size:1.0625rem}
  .score-unit,.prov{font-size:0.6562rem}
  .bar{height:6px}
  .release-pill{font-size:0.75rem}
  .cta-grid{grid-template-columns:1fr}
  footer{flex-direction:column;align-items:flex-start}
}

/* the big table card must not blur whatever moves behind it: that recomputes every frame and was the main CPU/GPU cost */
.board.glass{background:color-mix(in srgb,var(--bg) 78%,transparent)}
:where(#board) thead th{background-color:color-mix(in srgb,var(--bg) 92%,transparent)}
/* the one-line description under a column label is in the header's tooltip (title): printing it widened every column */