/* ---------- tokens ----------
   Press: white, black, one red. The red is the only hue on the page, so it
   carries BOTH interaction and the top rarity band -- which is safe here only
   because _tier() already drives row DENSITY, so hue is reinforcement rather
   than the sole channel. The three-band scale is still monotonic in luminance
   in both themes (light .262/.156/.119, dark .162/.296/.407), so it survives
   greyscale and colour-blindness. "live" is motion, not hue -- --live points
   at --ink and the pulse carries the meaning, and --alive is now ink too,
   because a green would be the one stray hue in the palette. */
:root{
  color-scheme:light;
  --bg:#fff; --surface:#fff; --raised:#fff; --sunk:#f2f2f2; --hover:#ededed;
  --line:#e4e4e4; --line-soft:#efefef; --line-strong:#b8b8b8;
  --ink:#111; --ink-2:#3a3a3a; --muted:#6b6b6b;
  --accent:#c1121f; --alive:#111;
  --r-common:#8c8c8c; --r-notable:#6e6e6e; --r-peak:#c1121f;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.05);
  --logo-variant:"on-light";

  /* live is motion, not colour — see .pulse */
  --live:var(--ink);
  /* legacy aliases: every existing rule picks up the new palette for free */
  --cool:var(--r-common); --warm:var(--r-notable); --peak:var(--r-peak);

  /* type scale — 7 steps. Any size off this scale is a bug. */
  --t1:11px; --t2:13px; --t3:15px; --t4:17px; --t5:21px; --t6:26px; --t7:34px;
  /* radii — 4 for controls, 12 for cards, pill for pills, 50% for avatars */
  --rad-sm:4px; --rad-md:12px; --rad-pill:999px;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0a0a0a; --surface:#141414; --raised:#1a1a1a; --sunk:#0f0f0f; --hover:#1e1e1e;
    --line:#242424; --line-soft:#1a1a1a; --line-strong:#4a4a4a;
    --ink:#f0f0f0; --ink-2:#c4c4c4; --muted:#8c8c8c;
    --accent:#ff8a75; --alive:#f0f0f0;
    --r-common:#707070; --r-notable:#949494; --r-peak:#ff8a75;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.4);
    --logo-variant:"on-dark";
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a0a0a; --surface:#141414; --raised:#1a1a1a; --sunk:#0f0f0f; --hover:#1e1e1e;
  --line:#242424; --line-soft:#1a1a1a; --line-strong:#4a4a4a;
  --ink:#f0f0f0; --ink-2:#c4c4c4; --muted:#8c8c8c;
  --accent:#ff8a75; --alive:#f0f0f0;
  --r-common:#707070; --r-notable:#949494; --r-peak:#ff8a75;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 2px 10px rgba(0,0,0,.4);
  --logo-variant:"on-dark";
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* the sticky masthead is 52-69px tall; deep links (#pa123) must clear it */
:target{scroll-margin-top:104px}
@media(max-width:900px){:target{scroll-margin-top:132px}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
body{background:var(--bg);color:var(--ink);
  font:400 15px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  padding-bottom:80px;transition:background .18s,color .18s}
a{color:inherit;text-decoration:none}
.wrap{max-width:1680px;margin:0 auto;padding:0 40px}
.wrap.narrow{max-width:1080px}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--line);background:var(--bg);
  position:sticky;top:0;z-index:30}
.mast{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:18px;padding:16px 0}
.mleft{display:flex;align-items:center;gap:14px;min-width:0;justify-self:start}
.mright{display:flex;align-items:center;gap:18px;justify-self:end}
.wm{justify-self:center}
.bk{font-size:var(--t2);color:var(--ink-2);white-space:nowrap;display:inline-flex;
  align-items:center;gap:5px;padding:12px 0}
.bk:hover{color:var(--accent)}
/* the in-body "back to board" link — was a 15px-tall tap target */
.backlink{display:inline-block;padding:18px 6px 6px 0;color:var(--accent);font-size:var(--t2)}
.backlink:hover{text-decoration:underline}
@media(max-width:900px){
  /* column-gap:0 because .mleft is empty on the board — the gap alone pushed
     the wordmark 12px off the left edge every other element sits on.
     .bk carries its own spacing, so it appears only when there IS a back link. */
  .mast{grid-template-columns:auto 1fr;row-gap:10px;column-gap:0}
  .wm{justify-self:start;grid-column:2}.mleft{grid-column:1}
  .bk{margin-right:12px}
  .mright{grid-column:1/-1;justify-self:start}}
/* The wordmark is OUTLINED Archivo Black shipped as geometry, not live text,
   so the identity costs no font request and can never flash a fallback face.
   currentColor themes the letters; --rd is the red period, which is the one
   piece doing the identifying work at favicon size. Hover goes to --ink-2,
   NOT --accent: accent is the red now, and a fully red wordmark shouts. */
.wm{display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink);--rd:var(--accent)}
.wm svg{height:20px;width:auto;display:block}
.wm:hover{color:var(--ink-2)}
.crumb{font-size:var(--t2);color:var(--muted);display:flex;align-items:baseline;
  gap:7px;min-width:0;overflow:hidden}
.crumb a{color:var(--accent)}
.crumb i{font-style:normal;opacity:.45}
.crumb b{color:var(--ink-2);font-weight:500;font-size:var(--t2);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.warnpill{margin-left:10px;font-size:var(--t1);text-transform:uppercase;
  letter-spacing:.8px;font-weight:600;color:var(--r-peak);border:1px solid var(--r-peak);
  padding:3px 9px;border-radius:var(--rad-pill);display:inline-flex;
  align-items:center}
.warnpill:hover{background:var(--peak);color:var(--bg)}
.stat{font-size:var(--t2);color:var(--muted);font-variant-numeric:tabular-nums;
  display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lvon{color:var(--live);font-weight:600}
.lvoff{color:var(--muted)}
.hin{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0}
.brand{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:var(--t6);font-weight:600;
  letter-spacing:-.4px;line-height:1}
.tagline{font-size:var(--t2);color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--live);margin-right:6px;vertical-align:1px;
  animation:pl 1.8s ease-in-out infinite}
@keyframes pl{50%{opacity:.2}}
.nav{display:flex;gap:18px;font-size:var(--t2);flex-wrap:wrap}
.nav a{white-space:nowrap}
.nav a{color:var(--ink-2);padding:12px 2px;position:relative;display:inline-block}
.nav a:after{content:"";position:absolute;left:2px;right:2px;bottom:10px;height:1.5px;
  background:var(--accent);opacity:0;transition:opacity .13s}
.nav a:hover{color:var(--ink)}
.nav a:hover:after{opacity:1}
.bt{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:var(--t3);font-weight:600;
  letter-spacing:-.01em;margin-bottom:5px;color:var(--ink)}
.bb{font-size:var(--t2);color:var(--muted);line-height:1.45;min-height:36px}
.n2{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;
  color:var(--ink-2);font-size:var(--t2)}
.sf{display:flex;gap:8px;margin:22px 0 6px;max-width:520px}
.sf input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:var(--rad-sm);
  background:var(--surface);color:var(--ink);font-size:var(--t4);font-family:inherit}
.sf input:focus{outline:none;border-color:var(--accent)}
.sf button{padding:11px 20px;border:1px solid var(--accent);background:var(--accent);
  color:#fff;border-radius:var(--rad-sm);cursor:pointer;font-size:var(--t3);font-family:inherit}
@media(max-width:640px){.nav{gap:12px;font-size:var(--t2)}}
.tgl{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:var(--t3);
  display:grid;place-items:center;flex:none;transition:.15s}
.tgl:hover{border-color:var(--ink-2);color:var(--ink)}

/* ---------- section headings ---------- */
h2{font-size:var(--t1);text-transform:uppercase;letter-spacing:1.6px;
  color:var(--muted);font-weight:600;margin:38px 0 2px;
  display:flex;align-items:baseline;gap:10px}
h2:after{content:"";flex:1;height:1px;background:var(--line)}
.lede{font-size:var(--t2);color:var(--muted);margin:7px 0 18px;max-width:60ch}

/* ---------- hero search ---------- */
.hsearch{max-width:760px;margin:30px auto 26px;position:relative}
.sgbox{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:60;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-md);
  box-shadow:0 8px 30px rgba(20,23,28,.14);overflow:hidden;display:none}
:root[data-theme="dark"] .sgbox{box-shadow:0 8px 30px rgba(0,0,0,.5)}
.sgbox.on{display:block}
.sgi{display:flex;align-items:center;gap:12px;padding:9px 15px;cursor:pointer;
  border-bottom:1px solid var(--line-soft)}
.sgi:last-child{border-bottom:0}
.sgi.sel,.sgi:hover{background:var(--sunk)}
.sgi img{width:34px;height:34px;border-radius:50%;background:var(--sunk);
  border:1px solid var(--line);object-fit:cover;object-position:top center;flex:none}
.sgi .ph{width:34px;height:34px;border-radius:var(--rad-sm);background:var(--sunk);
  border:1px solid var(--line);flex:none;display:grid;place-items:center;
  font-size:var(--t2);color:var(--muted)}
.sgi .sgt{flex:1;min-width:0}
.sgi .sgn{display:block;font-size:var(--t3);line-height:1.35;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgi .sgs{display:block;font-size:var(--t1);line-height:1.35;color:var(--muted);
  margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgi .sgk{font-size:var(--t1);text-transform:uppercase;letter-spacing:.9px;
  color:var(--muted);flex:none}
.hsearch form{display:flex;align-items:center;gap:12px;padding:0 6px 0 20px;
  border:1px solid var(--line);border-radius:var(--rad-md);background:var(--surface);
  box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.hsearch form:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.hsearch .mag{width:17px;height:17px;flex:none;stroke:var(--muted);fill:none;
  stroke-width:2;stroke-linecap:round}
.hsearch form:focus-within .mag{stroke:var(--accent)}
.hsearch input{flex:1;padding:16px 0;border:0;background:transparent;
  color:var(--ink);font-size:var(--t4);font-family:inherit;min-width:0}
.hsearch input::placeholder{color:var(--muted)}
.hsearch input:focus{outline:none}
.hsearch button{border:0;background:var(--accent);color:#fff;cursor:pointer;
  padding:13px 22px;min-height:44px;border-radius:var(--rad-md);font-size:var(--t3);
  font-family:inherit;font-weight:500;transition:opacity .13s}
.hsearch button:hover{opacity:.88}
@media(max-width:760px){.crumb{display:none}}
@media(max-width:640px){.hsearch form{padding-left:14px}
  .hsearch input{font-size:var(--t4);padding:13px 0}}

/* ---------- two-column board ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;
  align-items:start}
/* every grid child must be allowed to be narrower than its content, or a
   horizontally-scrolling child sizes the whole track instead of scrolling */
.cols>*{min-width:0}
/* the board column has no h2 of its own; match the 38px the sidebar's
   heading contributes so both columns start on the same line */
.board{margin-top:38px}
/* top:80px, not 112px -- the masthead measures 52-69px, so the old value left
   a 43-60px dead gap. overscroll-behavior stops the inner scroll from
   chaining into the page and losing the reader's position. */
.side{position:sticky;top:92px;max-height:calc(100vh - 112px);overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.slate-list{margin-top:14px}
@media(max-width:1500px){.wrap{max-width:1280px}.cols{grid-template-columns:minmax(0,1fr) 330px;gap:44px}}
/* the slate was taking 39% of the content width at 1024 */
@media(max-width:1100px){.cols{grid-template-columns:minmax(0,1fr) 290px;gap:32px}}
@media(max-width:1000px){.wrap{padding:0 20px}}
@media(max-width:900px){
  /* Stacking put "The slate" ~3,587px down the page -- on a phone, today's
     games were never seen. order:-1 lifts it above the feed and the list
     becomes a snap-scrolling strip, so games in progress are the second
     thing you see instead of the last. */
  .cols{grid-template-columns:minmax(0,1fr);gap:8px}
  .side{position:static;max-height:none;overflow:visible;order:-1;margin-bottom:18px;
    min-width:0}
  .slate-list{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
  .slate-list::-webkit-scrollbar{display:none}
  .side .gs2{flex:0 0 158px;scroll-snap-align:start;margin-bottom:0}
  .side .gs2 .r2 .n2b{font-size:var(--t2)}
}

/* ---------- compact slate ---------- */
.gs2{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-md);
  padding:10px 12px;margin-bottom:7px;display:block;transition:.13s}
.gs2:hover{border-color:var(--ink-2)}
.gs2 .r2{display:flex;align-items:center;gap:8px;padding:2px 0;font-size:var(--t2)}
.gs2 .r2 img{width:19px;height:19px;flex:none}
.gs2 .r2 .n2b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.gs2 .r2 .s2{font-family:'IBM Plex Mono',monospace;font-size:var(--t3);font-weight:500;
  font-variant-numeric:tabular-nums}
.gs2 .lost2{color:var(--muted)}
.gs2 .f2{display:flex;justify-content:space-between;margin-top:7px;padding-top:6px;
  border-top:1px solid var(--line-soft);font-size:var(--t1);color:var(--muted)}
.gs2 .rare2{color:var(--warm);font-weight:600;text-transform:uppercase;
  letter-spacing:.7px}

/* ---------- search results ---------- */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:10px;margin-top:14px}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-md);
  padding:14px;display:flex;gap:12px;align-items:center;transition:.13s}
.pc:hover{border-color:var(--accent);transform:translateY(-1px)}
.pc img{width:48px;height:48px;border-radius:50%;background:var(--sunk);
  border:1px solid var(--line);object-fit:cover;object-position:top center;flex:none}
.pc .pcn{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:var(--t4);font-weight:500;
  line-height:1.2;margin-bottom:3px}
.pc .pcm{font-size:var(--t1);color:var(--muted);font-variant-numeric:tabular-nums}
.pc .pcf{font-size:var(--t1);color:var(--warm);font-weight:600;margin-top:3px;
  text-transform:uppercase;letter-spacing:.6px}
/* ---------- rarity rows: three densities ----------
   The band picks the row's FORM, not just its tint. A feature is a story, a
   brief is a note, a list row is a line. Importance is carried by size and
   space -- which read pre-attentively -- so the number only confirms an
   impression the layout already gave you. */
/* ---------- time-window switcher ----------
   A row of links, not a select: five options is few enough that the whole
   choice should be visible, and each one is a real URL that can be linked and
   crawled. The current window is carried by weight and a rule, not by colour
   alone -- blue is the interaction hue here and every tab is interactive. */
.wtabs{display:flex;gap:2px;flex-wrap:wrap;margin:2px 0 0;
  border-bottom:1px solid var(--line)}
.wtab{font-size:var(--t2);color:var(--muted);padding:9px 14px;
  min-height:44px;display:inline-flex;align-items:center;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.wtab:hover{color:var(--ink);background:var(--hover)}
.wtab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.wscope{font-size:var(--t1);color:var(--muted);margin:10px 0 0;max-width:70ch}
.feed{margin-top:6px}
.row{display:grid;cursor:pointer;position:relative;
  transition:background .12s,box-shadow .12s}
/* one custom property drives every band-coloured thing in the row */
.row[data-t="common"]{--band:var(--r-common)}
.row[data-t="notable"]{--band:var(--r-notable)}
.row[data-t="peak"]{--band:var(--r-peak)}
.row:hover{background:var(--hover)}
/* The card used to be a single anchor, so no player or team name inside it
   could be a link — nesting anchors is invalid, has collapsed this grid twice,
   and fails the build. A stretched overlay carries the card's own destination
   underneath; real links sit above it. */
.row .rowfill{position:absolute;inset:0;z-index:0;border-radius:inherit}
.row .score,.row .meter,.row .caps,.row .kick,.row .hl,.row .de,.row .meta,
.row .lmeta{position:relative;z-index:1;pointer-events:none}
.row .hl a,.row .meta a,.row .lmeta a,.row .de a{pointer-events:auto;
  position:relative;z-index:2;text-decoration:underline;
  text-decoration-color:color-mix(in srgb,currentColor 30%,transparent);
  text-underline-offset:2px}
.row .hl a:hover,.row .meta a:hover,.row .lmeta a:hover{color:var(--accent);
  text-decoration-color:currentColor}
.row:hover:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--band);border-radius:3px}

.score{font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-weight:500;font-variant-numeric:tabular-nums;color:var(--band);
  line-height:1.05;letter-spacing:-.03em}
.meter{height:3px;background:var(--line);margin-top:8px;border-radius:3px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--band)}

/* --- FEATURE (rarity 85+) : the story --- */
.row[data-d="feature"]{grid-template-columns:64px 44px minmax(0,1fr);gap:18px;
  padding:18px 4px 20px 15px;margin-left:-15px;
  border-left:2px solid var(--band);border-bottom:1px solid var(--line-soft);
  align-items:start}
.row[data-d="feature"] .score{font-size:var(--t6)}
.row[data-d="feature"] .hl{font-size:var(--t5);font-weight:600;margin:5px 0 4px}
.row[data-d="feature"] .kick{color:var(--band)}
.row[data-d="feature"]:hover:before{display:none}

/* --- BRIEF (60-84) : the note --- */
.row[data-d="brief"]{grid-template-columns:52px 40px minmax(0,1fr);gap:16px;
  padding:11px 4px;border-bottom:1px solid var(--line-soft);align-items:start}
.row[data-d="brief"] .score{font-size:var(--t4)}
.row[data-d="brief"] .hl{font-size:var(--t3);font-weight:500;margin:3px 0 2px}

/* --- LIST (under 60) : the line --- */
.row[data-d="list"]{grid-template-columns:46px minmax(0,1fr) auto;gap:16px;
  padding:7px 4px;align-items:baseline;border-bottom:1px solid var(--line-soft)}
/* compact to the eye, still a 44px target to a thumb */
@media(pointer:coarse),(max-width:900px){
  .row[data-d="list"]{padding:12px 4px;min-height:44px;align-items:center}}
/* the feature's full-bleed left rule has no room to bleed on a phone --
   keep it on the content edge and indent the text instead */
@media(max-width:900px){
  .row[data-d="feature"]{margin-left:0;padding:16px 4px 18px 13px}
}
.row[data-d="list"] .score{font-size:var(--t3);font-weight:400}
.row[data-d="list"] .hl{font-size:var(--t3);font-weight:400;color:var(--ink-2);
  margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row[data-d="list"]:hover .hl{color:var(--ink)}
.lmeta{font-size:var(--t1);color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
@media(max-width:640px){.lmeta{display:none}}

/* Defensive: if the body wrapper is ever lost (a stray tag, a stale cache),
   these must still land in the text column instead of scattering across the
   score and logo columns. Scoped per density -- a list row has no logo column. */
.row:not([data-d="list"]) > .kick,.row:not([data-d="list"]) > .hl,
.row:not([data-d="list"]) > .de,.row:not([data-d="list"]) > .meta{grid-column:3}
.row:not([data-d="list"]) > *:nth-child(n+3){grid-column:3}
.row[data-d="list"] > *:nth-child(n+4){grid-column:2}
.caps{display:flex;align-items:center;padding-top:2px}
/* .caps img is more specific than .face — scope the face rules to win */
.caps .facewrap{position:relative;width:46px;height:46px;flex:none}
.caps .facewrap img.face{width:46px;height:46px;border-radius:50%;
  background:var(--sunk);border:1px solid var(--line);object-fit:cover;
  object-position:top center;display:block;margin:0}
.caps .facewrap img:not(.face){position:absolute;right:-4px;bottom:-3px;
  width:21px;height:21px;border-radius:50%;background:var(--bg);
  padding:1px;margin:0;box-shadow:0 0 0 1px var(--line)}
img.face{width:46px;height:46px;border-radius:50%;background:var(--sunk);
  border:1px solid var(--line);object-fit:cover;object-position:top center;display:block}
.hero{display:flex;gap:20px;align-items:flex-end;margin:14px 0 6px}
.hero img.big{width:104px;height:104px;border-radius:var(--rad-md);background:var(--sunk);
  border:1px solid var(--line);object-fit:cover;object-position:top center}
.abfaces{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.abfaces img{width:52px;height:52px;border-radius:50%;background:var(--sunk);
  border:1px solid var(--line);object-fit:cover;object-position:top center}
.abfaces .vsm{color:var(--muted);font-size:var(--t2)}
@media(max-width:640px){.hero img.big{width:76px;height:76px}
  .mast{gap:12px 0;padding:12px 0 9px}.wm{font-size:var(--t4)}}
.caps img{width:26px;height:26px;display:block}
.caps img+img{margin-left:-7px}
.kick{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-style:normal;font-size:var(--t1);
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.state{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-style:normal;font-size:var(--t1);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase}
/* "achieved" is 22 of 23 rows -- the default state should not shout */
.state.achieved{color:var(--muted)} .state.imminent{color:var(--r-peak)}
.state.alive{color:var(--alive)} .state.broken{color:var(--muted)}
.state:before{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1.5px}
.hl{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:var(--t4);font-weight:600;
  letter-spacing:-.02em;line-height:1.25;margin:4px 0 3px;
  max-width:52ch;text-wrap:balance}
.de{color:var(--ink-2);font-size:var(--t2);max-width:68ch;line-height:1.5}
.meta{margin-top:7px;font-size:var(--t1);color:var(--muted);max-width:68ch;
  display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.meta span:not(:last-child):after{content:"·";margin-left:7px;opacity:.5}
.meta em{font-style:normal;color:var(--ink-2)}
.sublink{color:var(--accent);cursor:pointer}
.sublink:hover{text-decoration:underline}

/* ---------- games ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:8px;margin-top:14px}
.g{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-sm);
  padding:14px 16px 12px;cursor:pointer;transition:border-color .14s,background .14s;
  display:flex;flex-direction:column}
.g:hover{border-color:var(--ink-2);background:var(--hover)}
.g.open{border-color:var(--accent)}
.tm{display:flex;align-items:center;gap:9px;padding:4px 0}
.tm img{width:24px;height:24px;flex:none}
.tm .nm{flex:1;font-size:var(--t3);font-weight:500}
.tm .rn{font-family:'IBM Plex Mono',monospace;font-size:var(--t4);font-weight:500;
  font-variant-numeric:tabular-nums}
.tm.lost .nm,.tm.lost .rn{color:var(--muted);font-weight:400}
.gf{display:flex;flex-direction:column;gap:1px;
  margin-top:auto;padding-top:11px;border-top:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums}
/* the rate IS the rarity, so it is the number on the card, not a pill wedged
   against the count. Mono keeps the rates aligned card to card. */
.rare{font-family:'IBM Plex Mono',monospace;color:var(--ink);font-weight:500;
  font-size:var(--t4);letter-spacing:-.02em;text-transform:none}
.n2{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:var(--t1);color:var(--muted);
  letter-spacing:.02em}
.gtop{margin-top:7px;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:var(--t1);
  color:var(--muted);line-height:1.4}

/* ---------- inline detail ---------- */
.panel{grid-column:1/-1;background:var(--surface);border:1px solid var(--accent);
  border-radius:var(--rad-md);padding:22px 24px;margin:2px 0 8px;box-shadow:var(--shadow)}
.panel h3{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:var(--t6);font-weight:600;
  letter-spacing:-.3px;display:flex;align-items:center;gap:11px;margin-bottom:3px}
.panel h3 img{width:30px;height:30px}
.psub{font-size:var(--t2);color:var(--muted);margin-bottom:20px}
.phead{font-size:var(--t1);text-transform:uppercase;letter-spacing:1.4px;
  color:var(--muted);font-weight:600;margin:22px 0 10px}
.abx{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rad-md);padding:20px 22px;box-shadow:var(--shadow)}
.abhead{border-bottom:1px solid var(--line-soft);padding-bottom:14px;margin-bottom:14px}
.abwho{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:var(--t6);font-weight:600;
  letter-spacing:-.4px;line-height:1.25}
.abwho a{color:inherit}.abwho a:hover{color:var(--accent)}
.hand{font-size:var(--t3);color:var(--muted);font-family:'IBM Plex Mono',monospace;
  font-weight:400;letter-spacing:0}
.vsx{color:var(--muted);font-size:var(--t4);font-weight:400;margin:0 3px}
.abtoday{margin-top:7px;font-size:var(--t2);color:var(--ink-2)}
.abtoday b{font-family:'IBM Plex Mono',monospace;font-weight:500;color:var(--ink)}
.abseq{display:block;color:var(--muted);font-size:var(--t2);margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.chip{font-size:var(--t1);padding:4px 10px;border-radius:var(--rad-sm);background:var(--sunk);
  color:var(--ink-2);border:1px solid var(--line-soft);white-space:nowrap}
.chip.warm{background:transparent;border-color:var(--warm);color:var(--warm)}
.chip.peak{background:transparent;border-color:var(--peak);color:var(--peak);font-weight:600}
.ladder{margin:0 0 16px;border-left:2px solid var(--line);padding-left:14px}
.lad{display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:var(--t3)}
.lad .ld{color:var(--ink-2)}
.lad.warm .ld{color:var(--warm)}
.lad.peak .ld{color:var(--peak);font-weight:600}
.lad .lr{color:var(--muted);font-size:var(--t1);font-family:'IBM Plex Mono',monospace;
  white-space:nowrap;align-self:center}
/* Two cards of nine names do not need 930px each. Cap the pair so the lineups
   read as a pair of lists rather than two half-empty pages. */
.lus{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;margin-top:14px;max-width:820px}
.lu{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-md);
  overflow:hidden;box-shadow:var(--shadow)}
.luh{display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--sunk)}
.luh img{width:22px;height:22px;flex:none}
.luh b{font-size:var(--t2);font-weight:600;flex:1}
.luh span{font-size:var(--t1);text-transform:uppercase;letter-spacing:.9px;
  color:var(--muted)}
.lur{display:grid;grid-template-columns:22px 30px minmax(0,1fr) auto;gap:10px;
  align-items:center;padding:7px 14px;font-size:var(--t2);
  border-bottom:1px solid var(--line-soft)}
.lur:last-child{border-bottom:0}
.lur:hover{background:var(--sunk)}
.lur .lun{font-family:'IBM Plex Mono',monospace;font-size:var(--t2);color:var(--muted);
  font-variant-numeric:tabular-nums}
.lur .lup{font-family:'IBM Plex Mono',monospace;font-size:var(--t1);color:var(--ink-2);
  letter-spacing:.4px}
.lur .lub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;gap:8px}
.lur .luf{width:22px;height:22px;flex:none;border-radius:50%;
  background:var(--sunk);object-fit:cover;object-position:top center}
.lur .lub a{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lur .lub a{color:var(--ink)}
.lur .lub a:hover{color:var(--accent)}
/* the season line: OPS for a hitter, ERA for a pitcher. Mono so the decimals
   stack down the card, and quiet so the NAME stays the thing you read. */
.lur .lst{font-family:'IBM Plex Mono',monospace;font-size:var(--t1);
  color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right;
  min-width:38px;white-space:nowrap}
/* Head-to-head reuses the lineup row, but its first column is a DATE, not a
   jersey number: at 22px "2025-07-23" broke on both hyphens and every meeting
   stood three lines tall. Its own column widths, and nothing numeric wraps. */
/* Measured, not eyeballed: an ISO date renders 78px and a two-digit-both-ways
   score 41px in this face, so the columns carry ~15% headroom. Fixed widths
   rather than auto because each row is its own grid -- auto would size the
   score column per row and the scores would stop lining up. */
.lur.h2h{grid-template-columns:90px 52px minmax(0,1fr);gap:14px}
.lur .lun,.lur .lup{white-space:nowrap}
.lur.h2h .lun{color:var(--ink-2)}
.lur.h2h .lup{font-size:var(--t2);color:var(--ink);text-align:right}
@media(max-width:380px){.lur.h2h{grid-template-columns:84px 46px minmax(0,1fr);
  gap:8px;padding-left:12px;padding-right:12px}}
.luempty{padding:16px;color:var(--muted);font-size:var(--t2)}
.ppgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px;margin-top:14px}
.ppc{display:flex;gap:16px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--rad-md);padding:16px 18px;
  box-shadow:var(--shadow)}
.ppc img{width:72px;height:72px;border-radius:50%;flex:none;
  background:linear-gradient(180deg,var(--sunk),var(--bg));
  border:1px solid var(--line);object-fit:cover;object-position:top center}
.ppb{min-width:0}
.ppn{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:var(--t5);font-weight:600;
  letter-spacing:-.3px;margin:2px 0 3px}
.ppn a{color:inherit}.ppn a:hover{color:var(--accent)}
.ppl{font-size:var(--t2);color:var(--ink-2)}
.rchips{display:flex;flex-wrap:wrap;gap:6px;padding:6px 0 12px}
.rchip{font-size:var(--t2);padding:4px 10px;border:1px solid var(--line);
  border-radius:var(--rad-pill);color:var(--ink-2);display:inline-flex;gap:6px;
  align-items:baseline}
.rchip span{color:var(--muted);font-size:var(--t1)}
.rchip a{color:var(--ink-2)}
.rchip:hover{border-color:var(--accent)}
.rchip:hover a{color:var(--accent)}
.abgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;padding-top:15px;border-top:1px solid var(--line-soft)}
.abk{font-size:var(--t1);text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);
  font-weight:600;margin-bottom:5px}
.abv{font-size:var(--t3);color:var(--ink)}
.abn{font-size:var(--t1);color:var(--muted);margin-top:2px}
@media(max-width:600px){.abwho{font-size:var(--t5)}.abx{padding:16px}}
.ab{background:var(--sunk);border-radius:var(--rad-md);padding:15px 17px}
.ab .who{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:var(--t4);font-weight:500}
.ab .what{color:var(--ink-2);font-size:var(--t3);margin-top:4px}
.ab .vs{margin-top:10px;font-size:var(--t2);color:var(--muted)}
.ab .vs b{color:var(--ink-2);font-weight:500}
table{width:100%;border-collapse:collapse;font-size:var(--t2);margin-top:12px}
/* a table header is a structural division, so it gets the visible rule */
th{font-size:var(--t1);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  font-weight:600;text-align:left;padding:0 10px 7px 0;border-bottom:1px solid var(--line-strong)}
td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
/* Subject cell: cap then name. inline-flex keeps the name on the text
   baseline of the rows whose club has no logo, so the column reads as one
   left edge instead of two. The cap never shrinks in a narrow scroller. */
.subj{display:inline-grid;grid-template-columns:22px minmax(0,1fr);gap:8px;
  align-items:center}
.subj img,.subj .nocap{width:22px;height:22px;display:block}
/* a headshot is a face, so it gets the avatar treatment the rest of the site
   uses; the empty slot reads as "no photo on file", not as a broken image */
.subj img.face{border-radius:50%;background:var(--sunk);object-fit:cover;
  object-position:top center}
.subj .noface{border-radius:50%;background:var(--sunk);
  box-shadow:inset 0 0 0 1px var(--line)}

/* the one CTA per history row: an affordance, not a shout, but still a
   44px target. 250 identical blue links on a page is not a choice. */
.rowgo{display:inline-flex;align-items:center;justify-content:flex-end;
  min-width:44px;min-height:44px;color:var(--muted);font-size:var(--t3)}
.rowgo:hover{color:var(--accent)}
.cta{color:var(--accent)}

/* --- mobile line score ---------------------------------------------------
   R/H/E used to sit 94px past the right edge of a 343px scroller: you opened
   the page to see who won and the score was off-screen. Lift it out. */
.lsum{display:none}
.lsg{display:grid;grid-template-columns:minmax(0,1fr) 2.6em 2.6em 2.6em;
  gap:2px 0;align-items:baseline;margin-top:12px}
.lsh{font-size:var(--t1);text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:600;text-align:right}
.lsl{font-size:var(--t2);color:var(--ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;padding-right:10px}
.lsv{font-family:'IBM Plex Mono',monospace;font-size:var(--t5);font-weight:500;
  font-variant-numeric:tabular-nums;text-align:right;color:var(--ink-2)}
.lsrow-win .lsl,.lsv.win{color:var(--ink)}
.lsg .lsv:first-of-type{font-weight:600}

@media(max-width:640px){
  .lsum{display:block}
  .ls-wrap{margin-top:14px}
  .ls-wrap:before{content:"By inning";display:block;font-size:var(--t1);
    text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
    font-weight:600;margin-bottom:4px}
  /* keep the team name anchored while the innings scroll under it */
  table.ls td:first-child,table.ls th:first-child{position:sticky;left:0;
    background:var(--bg);z-index:1}
  /* 22 of 76 tables were clipping by 1-22px -- a 7px scroll reads as breakage,
     not as a scroll. Reclaiming the horizontal padding fits them outright. */
  th{padding:0 5px 7px 0}
  td{padding:7px 5px 7px 0}
  table.ls th,table.ls td{padding:6px 5px}
}
tr.hit td{background:color-mix(in srgb,var(--warm) 15%,transparent)}
td.n{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;
  color:var(--ink)}
/* a row that goes somewhere says so */
tr[data-href]{cursor:pointer}
tr[data-href]:hover{background:var(--hover)}
tr[data-href]:hover td:first-child a{color:var(--accent)}
/* The rare-feats table is the answer to the question the site asks, so it is
   the one table on a player page that gets room: a bigger rarity number, a
   bigger feat name, and air between the rows. */
table.feats{font-size:var(--t3);margin-top:6px}
table.feats th,table.feats td{padding:10px 14px 10px 0}
table.feats td:first-child{font-family:'IBM Plex Mono',monospace;
  font-size:var(--t5);font-weight:500;color:var(--r-peak);
  letter-spacing:-.02em;width:64px}
table.feats td:nth-child(3){font-size:var(--t4);font-weight:500;color:var(--ink)}
table.feats td:nth-child(3) a{color:inherit}
table.feats td:nth-child(3) a:hover{color:var(--accent)}
.close{float:right;border:none;background:none;color:var(--muted);cursor:pointer;
  font-size:var(--t5);line-height:1;padding:2px 5px}
.close:hover{color:var(--ink)}
.ptitle{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:var(--t7);font-weight:600;
  letter-spacing:-1px;line-height:1.1;margin:14px 0 6px}
.rn2{font-family:'IBM Plex Mono',monospace;font-weight:500;font-variant-numeric:tabular-nums}
.pblurb{font-size:var(--t3);color:var(--muted);margin-bottom:6px;letter-spacing:.1px}
.pblurb b{color:var(--ink-2);font-weight:500}
.row{color:inherit;text-decoration:none}
a.g{display:block;color:inherit;text-decoration:none}
.stats{display:flex;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--rad-md);overflow:hidden;margin:18px 0 4px}
.stats>div{flex:1 1 138px;padding:13px 15px;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);margin:0 -1px -1px 0;min-width:0}
.stats b{display:block;font-family:'IBM Plex Mono',monospace;font-size:var(--t5);
  font-weight:500;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.stats span{display:block;font-size:var(--t1);color:var(--muted);margin-top:3px;
  text-transform:uppercase;letter-spacing:.8px}
.bars{margin-top:2px;border-top:1px solid var(--line-soft)}
.mrow{display:grid;grid-template-columns:minmax(130px,1.15fr) minmax(90px,2fr) minmax(74px,auto);
  gap:16px;align-items:center;padding:10px 2px;border-bottom:1px solid var(--line-soft);
  font-size:var(--t2)}
.mrow .ml{color:var(--ink);font-weight:500;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mrow .ml a{color:inherit}.mrow .ml a:hover{color:var(--accent)}
.mrow .mb{height:6px;background:var(--sunk);border-radius:3px;overflow:hidden}
.mrow .mb i{display:block;height:100%;background:var(--cool);border-radius:3px}
.mrow.done .mb i{background:var(--alive)}
.mrow .mv{text-align:right;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--t2);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.mrow.done .mv{color:var(--muted)}
@media(max-width:600px){
  .mrow{grid-template-columns:1fr auto;gap:6px 12px;padding:11px 2px}
  .mrow .ml{white-space:normal}
  .mrow .mb{grid-column:1/-1;order:3;margin-top:2px}
}
.panel a[target]{color:var(--accent)}
.empty{color:var(--muted);padding:28px 0;font-size:var(--t3)}
.scroll{overflow-x:auto}
details{border-bottom:1px solid var(--line-soft)}
summary{cursor:pointer;padding:12px 4px;list-style:none;display:flex;
  align-items:baseline;gap:14px;font-size:var(--t2);transition:background .12s;
  min-height:44px}
summary::-webkit-details-marker{display:none}
summary:hover{background:var(--sunk)}
summary:before{content:"▸";color:var(--muted);font-size:var(--t1);
  transition:transform .15s;display:inline-block;flex:none}
details[open]>summary:before{transform:rotate(90deg)}
details>*:not(summary){padding-left:22px;padding-bottom:10px}
.inn>summary{font-weight:500}
.innn{min-width:82px;color:var(--ink);font-weight:600}
.innt{color:var(--ink-2);min-width:150px}
.innr{color:var(--muted);font-size:var(--t2)}
.pa>summary{font-size:var(--t2);padding:10px 4px;min-height:44px}
.pan{min-width:52px;color:var(--muted);font-family:'IBM Plex Mono',monospace;
  font-size:var(--t1)}
.pab{min-width:170px;color:var(--ink)}
.pab a{color:inherit}.pab a:hover{color:var(--accent)}
.pad{color:var(--ink-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.paev{color:var(--warm);font-family:'IBM Plex Mono',monospace;font-size:var(--t1)}
.pap{color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:var(--t1)}
.padesc{color:var(--ink-2);font-size:var(--t2);padding-top:2px}
.paact{color:var(--muted);font-size:var(--t2);padding-top:2px}
.pa:target{background:color-mix(in srgb,var(--warm) 13%,transparent);
  border-radius:var(--rad-sm);box-shadow:0 0 0 2px var(--warm)}

/* ---------- pitch placement ----------
   The plot and the table are the same five to seven facts twice: the chart
   answers "where", the table answers "how fast, how much did it move". Side
   by side on a desk, stacked on a phone.

   Outcome is encoded by FILL, not hue. The palette reserves warm for rarity
   and blue for interaction, so a five-colour pitch legend would overload both;
   fill weight also survives greyscale and every kind of colour blindness,
   which a red/green ball-strike split does not. */
.pabody{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.pabody>.scroll{flex:1 1 340px;min-width:0}
/* the figure is sized by the PLOT, not by its caption: left to size
   itself, the one-line caption stretched it to 609px and pushed the
   table onto its own row even on a wide desk */
.pzwrap{flex:none;width:250px;max-width:100%;margin:2px 0 0}
.pz{display:block;height:auto;max-width:100%;overflow:visible}
.pzb{fill:none;stroke:var(--line-strong);stroke-width:3}
.pzg{stroke:var(--line);stroke-width:1.5}
.pzo{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:3 4;opacity:.75}
.pzp{fill:var(--sunk);stroke:var(--line);stroke-width:2}
.pzm text{font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:500;
  text-anchor:middle;fill:var(--ink);paint-order:stroke;stroke:var(--bg);
  stroke-width:3px}
.pzm circle{stroke-width:2.5}
/* a ball is an outline: nothing happened */
.pzm.ball circle{fill:var(--bg);stroke:var(--line-strong)}
/* A strike is solid. The fill is --ink-2, not --line-strong: the numeral
   sits ON the marker, and against --line-strong it measured 1.92:1 in light
   and 2.11:1 in dark at an effective 11px. --ink-2 puts it at 8.2:1 / 8.6:1,
   in line with the 15:1 every other marker already had. */
.pzm.strike circle{fill:var(--ink-2);stroke:var(--ink-2)}
/* a foul is a strike the batter got a piece of -- half weight */
.pzm.foul circle{fill:var(--sunk);stroke:var(--ink-2);stroke-dasharray:4 3}
/* The pitch that ended the at-bat carries the ink, and a ring: now that a
   strike is also dark-filled, weight alone no longer separates the two. */
.pzm.inplay circle{fill:var(--ink);stroke:var(--ink)}
.pzr{fill:none;stroke:var(--ink);stroke-width:2;opacity:.45}
.pzm.inplay text{fill:var(--bg);stroke:none}
.pzm.strike text{fill:var(--bg);stroke:none}
.pzm.hbp circle{fill:var(--bg);stroke:var(--ink);stroke-dasharray:3 3}
.pzwrap figcaption{margin-top:8px;display:flex;flex-direction:column;gap:5px}
.pzkeys{display:flex;flex-wrap:wrap;gap:10px}
.pzk{display:inline-flex;align-items:center;gap:5px;font-size:var(--t1);
  color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pzk i{width:10px;height:10px;border-radius:50%;border:2px solid var(--line-strong);
  background:var(--bg);flex:none}
.pzk.strike i{background:var(--ink-2);border-color:var(--ink-2)}
.pzk.foul i{background:var(--sunk);border-color:var(--ink-2)}
.pzk.inplay i{background:var(--ink);border-color:var(--ink)}
.pzk.hbp i{border-color:var(--ink);border-style:dotted}
.pzn{font-size:var(--t1);color:var(--muted)}
/* The ball actually put in play, called out on its own line. --ink-2, not
   --warm: the tokens reserve warm hues for rarity, and an 83 mph flyout is a
   measurement, not a rare event. */
.pahit{font-family:'IBM Plex Mono',monospace;font-size:var(--t1);color:var(--ink-2);
  padding-top:4px;letter-spacing:.02em}
/* eleven columns is a lot: keep the numbers tight so it fits without a
   scroller on a laptop, and let .scroll take it from there */
table.pt{font-size:var(--t1);margin-top:0}
table.pt th,table.pt td{padding:5px 9px 5px 0;white-space:nowrap}
table.pt tr.pr-inplay td{color:var(--ink);font-weight:500}
table.ls th,table.ls td{padding:6px 9px;text-align:center}
table.ls td:first-child,table.ls th:first-child{text-align:left}
@media(max-width:640px){
  /* the text column was only 189px at 375 because the score and logo columns
     ate the width -- headlines wrapped to four lines. Collapse the logo column
     (to 0, not away, so grid-column:3 and the anti-nesting guards still hold)
     and tighten the score column. */
  .row[data-d="feature"]{grid-template-columns:52px 0 minmax(0,1fr);gap:0 13px}
  .row[data-d="brief"]{grid-template-columns:40px 0 minmax(0,1fr);gap:0 11px}
  .row[data-d="list"]{grid-template-columns:34px minmax(0,1fr) auto;gap:12px}
  .row[data-d="feature"] .caps,.row[data-d="brief"] .caps{display:none}
  /* on a phone the brief keeps headline + metadata; the detail line is what
     separates a feature from a brief when there is no room for both */
  .row[data-d="brief"] .de{display:none}
  .row[data-d="feature"] .score{font-size:var(--t6)}
  .row[data-d="feature"] .hl{font-size:var(--t5)}
  .row[data-d="brief"] .score{font-size:var(--t4)}
  .row[data-d="brief"] .hl{font-size:var(--t4)}
  .row[data-d="list"] .score,.row[data-d="list"] .hl{font-size:var(--t2)}
  .caps img{width:20px;height:20px}
  .caps img+img{margin-left:-6px}
  .caps .facewrap,.caps .facewrap img.face{width:34px;height:34px}
  .caps .facewrap img:not(.face){width:16px;height:16px}
  .wrap{padding:0 16px}
  .hin{padding:14px 0}
  .brand{font-size:var(--t5)}
  .grid{grid-template-columns:1fr}
  .panel{padding:18px}
}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.nav{flex-wrap:wrap}
.browse{margin:10px 0 0;font-size:13px;color:var(--muted);line-height:1.8}
.browse a{color:var(--accent)}
.whylist{margin:10px 0 0;padding-left:18px;font-size:14px;line-height:1.9}
.whylist a{color:var(--accent)}