:root{--fg:#1a1a1a;--muted:#666;--line:#d8d8d8;--accent:#0b5; --link:#0645ad;--head:#2c3e50;--head-text:#2c3e50;--zebra:#f6f8fa;
  --bg:#fff;--card:#fff;--soft:#eef6ff;--soft-line:#cfe0f0;--total:#eef6ff;--pill:#36454f;color-scheme:light}
/* Dark palette: system preference unless the toggle stored a choice (data-theme). */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--fg:#e4e7ea;--muted:#9aa4ae;--line:#333b44;--link:#8ab8ff;
  --head:#1b2530;--head-text:#e4e7ea;--zebra:#161c22;--bg:#0f1418;--card:#171d23;--soft:#1a2430;--soft-line:#2a3a4c;--total:#1a2430;--pill:#c9d2dc;color-scheme:dark}}
:root[data-theme="dark"]{--fg:#e4e7ea;--muted:#9aa4ae;--line:#333b44;--link:#8ab8ff;
  --head:#1b2530;--head-text:#e4e7ea;--zebra:#161c22;--bg:#0f1418;--card:#171d23;--soft:#1a2430;--soft-line:#2a3a4c;--total:#1a2430;--pill:#c9d2dc;color-scheme:dark}
*{box-sizing:border-box}
/* Always reserve the vertical-scrollbar gutter so centered content sits in the same
   place on every page (tall pages with a scrollbar vs short pages without no longer
   shift horizontally). */
html{scrollbar-gutter:stable}
body{margin:0;font:14px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--fg);background:var(--bg)}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
header{display:flex;align-items:center;gap:16px;padding:10px 18px;background:var(--head);color:#fff;flex-wrap:wrap}
header .brand{color:#fff;font-weight:700;font-size:18px}
header nav{margin-left:8px}
header nav a{color:#cfe;margin-left:14px;white-space:nowrap}
header nav .user{color:#fff;margin-left:22px;font-weight:600}
header nav a.signin{margin-left:22px;border:1px solid #cfe;border-radius:4px;padding:2px 8px}
header nav a.up{margin-left:22px;color:#9fb3c4;font-size:13px}
header nav a.up:hover{color:#fff}
/* site switcher beside the brand (html._sites): the other sports; the brand already names this
   one, which only the phone menu lists (marked) */
header .sites{display:inline-flex;align-items:center;gap:0;margin-left:-10px}
header .sites a,header .sites .here{position:relative;display:inline-flex;align-items:center;gap:6px;padding:1px 3px;border-radius:6px;color:#cfe;font-size:15px;line-height:1.35;text-decoration:none}
header .sites .here{display:none}
header .sites a{opacity:.62}
header .sites a:hover,header .sites a:focus-visible{opacity:1;background:rgba(255,255,255,.14)}
header .sites .here{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);cursor:default}
header .sites .lbl{display:none;font-size:14px}
/* basketball and smallball share the ball: smallball's carries a small W */
header .sites [data-site="smallball"] .ico::after{content:"W";position:absolute;right:1px;bottom:1px;font:700 9px/1 system-ui,sans-serif;color:#fff;background:var(--head);border-radius:3px;padding:0 1px}
.nav-search{display:flex;gap:6px}
.nav-search input{padding:5px 8px;border:0;border-radius:3px;min-width:200px}
.nav-search button,.big-search button{padding:5px 12px;border:0;border-radius:3px;background:var(--accent);color:#fff;cursor:pointer}
/* one centred column; wide enough for the players-by-season table on a big monitor */
:root{--page-w:1450px}
main{max-width:var(--page-w);margin:0 auto;padding:18px}
h1{font-size:24px;margin:.2em 0}
h2{font-size:16px;margin:1.4em 0 .4em;border-bottom:2px solid var(--head);padding-bottom:3px}
.bio{color:var(--muted);margin:.2em 0 1em}
.tabs a,.tabs b{margin-right:10px}
.hero{text-align:center;padding:40px 0}
.hero h1{font-size:34px}
.hero .tagline{margin:-8px 0 0;color:var(--muted);font-size:15px}
.big-search{display:flex;gap:8px;justify-content:center;margin:20px 0}
.big-search input{padding:10px 14px;border:1px solid var(--line);border-radius:4px;width:min(440px,80%)}
.coverage{color:var(--muted);font-size:13px}
/* A table is as wide as its columns need and hugs the left edge; stretching it to the
   page (width:100%) spread the slack over every column on a wide monitor, so "Day" sat in
   a column ten times its width. Wider than the page: it scrolls (see .games-scroll). */
table{border-collapse:collapse;width:auto;max-width:100%;margin:.3em 0 1em;font-variant-numeric:tabular-nums}
table.stat td,table.stat th,table.list td,table.list th{border:1px solid var(--line);padding:3px 7px;text-align:right;white-space:nowrap}
table th{background:var(--head);color:#fff;position:sticky;top:0}
/* column headers with a hover explanation (title=) — signal it's hoverable */
table th.gloss{cursor:help;text-decoration:underline dotted rgba(255,255,255,.5);text-underline-offset:3px}
table.stat td:first-child,table.stat th:first-child,table.list td,table.list th{text-align:left}
table.lead td:nth-child(2),table.lead th:nth-child(2){text-align:left}
table tbody tr:nth-child(even){background:var(--zebra)}
table tbody tr:last-child{background:var(--total);font-weight:600}
/* a client-sorted table with no pinned Total row (app.js makeSortable): its last row is just a row */
table.resorted tbody tr:last-child{background:transparent;font-weight:inherit}
table.resorted tbody tr:last-child:nth-child(even){background:var(--zebra)}
.badge{display:inline-block;background:#fde;color:#a13;border:1px solid #e9b;border-radius:3px;padding:0 6px;font-size:11px;margin-left:6px}
.badge.win{background:#efe;color:#161;border-color:#bdb}
.note{color:var(--muted);font-size:13px}
.error{color:#c00;font-weight:600;margin:.4em 0}
.qbuild{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:.5em 0 1em;padding:12px;background:var(--zebra);border:1px solid var(--line);border-radius:5px}
.qbuild .frow{display:flex;gap:8px}
.qbuild select,.qbuild input{padding:4px 6px;border:1px solid var(--line);border-radius:3px;font-family:inherit}
.qbuild button{padding:5px 16px;border:0;border-radius:3px;background:var(--accent);color:#fff;cursor:pointer}
.qbuild .qreset{font-size:12px;color:var(--muted);align-self:center;margin-left:6px;text-decoration:none}
.qbuild .qreset:hover{color:var(--fg);text-decoration:underline}
.sqlform textarea{width:100%;max-width:720px;font-family:ui-monospace,Consolas,monospace;font-size:13px}
.sqlform>div{margin-top:8px}
details{margin:1em 0}
details pre{background:var(--zebra);padding:10px;border-radius:4px;overflow:auto;font-size:12px}
code{background:var(--zebra);padding:1px 4px;border-radius:3px}
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:.5em 0 1em;padding:10px;background:var(--zebra);border:1px solid var(--line);border-radius:5px}
.filters select,.filters input{padding:4px 6px;border:1px solid var(--line);border-radius:3px}
.filters button{padding:5px 14px;border:0;border-radius:3px;background:var(--accent);color:#fff;cursor:pointer}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:6px 14px;border-radius:4px;font-weight:600}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.charts{display:flex;gap:24px;flex-wrap:wrap;margin:.5em 0}
.charts figure{margin:0}
.charts figcaption{color:var(--muted);font-size:12px;text-align:center;margin-top:4px;max-width:300px}
svg.chart{width:300px;height:auto;border:1px solid var(--line);border-radius:4px}
svg.chart.wide{width:100%;max-width:740px}
.chartwrap{margin:.4em 0}
.tabs{margin:.3em 0}
.graphgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:1em 0}
.graphcard{display:flex;flex-direction:column;gap:5px;padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--zebra);color:var(--link)}
.graphcard:hover{text-decoration:none;border-color:var(--accent);box-shadow:0 1px 6px rgba(0,0,0,.08)}
.graphcard b{font-size:15px}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}
.ac-box{position:absolute;top:100%;left:0;background:var(--card);border:1px solid var(--line);border-radius:0 0 5px 5px;box-shadow:0 6px 18px rgba(0,0,0,.18);z-index:60;max-height:340px;overflow:auto;min-width:260px}
.big-search .ac-box{right:0;min-width:0}
.ac-box a{display:flex;justify-content:space-between;gap:14px;padding:6px 11px;color:var(--fg);border-bottom:1px solid #f0f0f0}
.ac-box a:hover,.ac-box a.on{background:var(--zebra);text-decoration:none}
.ac-box span{color:var(--muted);font-size:12px;white-space:nowrap}
.ac-box .ac-head{padding:4px 11px;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;background:#fafafa;border-bottom:1px solid #eee}
.ac-box .ac-tag{font-style:normal;font-size:10px;background:var(--head);color:#fff;border-radius:3px;padding:0 4px;margin-left:5px;vertical-align:1px}
table.stat th,table.sortable th{cursor:pointer;user-select:none}
/* Sort marks sit in a header's right padding, positioned, so marking a column sorted never
   widens it and shifts the columns under the pointer: the arrow (::after on client-sorted
   tables, span.sarrow on the server-sorted games tables) low, the multi-sort number high. */
table.stat th[data-sort]::after,table.sortable th[data-sort]::after,table.games th .sarrow{position:absolute;right:1px;bottom:3px;font-size:8px;line-height:1;opacity:.8}
table.stat th[data-sort=asc]::after,table.sortable th[data-sort=asc]::after{content:"▲"}
table.stat th[data-sort=desc]::after,table.sortable th[data-sort=desc]::after{content:"▼"}
.sortnum,table.games th sup{position:absolute;right:1px;top:2px;font-size:8px;line-height:1;opacity:.75}
table.games th a{position:relative}
/* Name columns of the home tables (app.js clipNames): a fixed width, so sorting or paging
   never widens them; a longer name ends in "…" and shows in full on hover (title). */
table.games .clip{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* auto-generated game recap paragraph (gamefeed Recap tab + classic /game page) */
.recap{border-left:3px solid var(--link);background:var(--soft);border-radius:0 8px 8px 0;padding:8px 14px;margin:4px 0 14px;max-width:760px}
.recap p{margin:0;line-height:1.55;color:var(--fg)}
.pctrow{display:flex;align-items:center;gap:12px;margin:5px 0;max-width:600px}
.pctl{width:150px;font-size:13px}
.pctbar{flex:1;height:9px;background:linear-gradient(90deg,#cfe0f0,#f0f0f0 50%,#f3cccc);border-radius:6px;position:relative}
.pctdot{position:absolute;top:-3px;width:15px;height:15px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 2px rgba(0,0,0,.45);transform:translateX(-7px)}
.pctv{width:135px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums}
.pctkey{color:var(--muted);font-size:12px;margin-bottom:2px}
.tdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:middle}
/* team logo shown to the left of a team name, anywhere a team is displayed */
.tlogo{width:18px;height:18px;object-fit:contain;vertical-align:middle;margin-right:6px}
h1.theader .tlogo{width:34px;height:34px;margin-right:10px}
.team-sel{margin-top:10px;color:var(--muted)}
.team-sel .tlogo{width:22px;height:22px;margin-right:6px}
.team-sel b{color:var(--fg)}
h1.theader{border-left:7px solid #5b6b7b;padding-left:12px}
/* player headshot shown to the left of a player name (small inline avatar) */
.phs{width:22px;height:22px;object-fit:cover;border-radius:50%;vertical-align:middle;margin-right:6px;background:#ececec}
/* list avatar: a fixed circular frame with a neutral silhouette placeholder; the photo
   (if it loads) overlays it, so every player renders an identical frame either way. */
.pha{position:relative;display:inline-block;width:22px;height:22px;border-radius:50%;overflow:hidden;
  vertical-align:middle;margin-right:6px;flex:none;
  background:#e3e7ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='4.2' fill='%23b7bec8'/%3E%3Cpath d='M3.5 22c0-4.7 3.8-7.5 8.5-7.5s8.5 2.8 8.5 7.5z' fill='%23b7bec8'/%3E%3C/svg%3E") center/100% no-repeat}
.pha img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--card)}
.phead{display:flex;align-items:center;gap:16px;margin:.2em 0 .6em}
.phead .phs{width:56px;height:56px;margin-right:0}   /* header: match the avatar size */
.phead h1{margin:0}
/* Wikipedia pill in player / team headers */
a.wiki{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;margin-left:14px;
  padding:3px 10px 3px 6px;border:1px solid #c9d2dc;border-radius:999px;background:var(--card);
  color:var(--fg);font-size:13px;font-weight:600;line-height:1.4;text-decoration:none;white-space:nowrap}
a.wiki:hover{border-color:var(--pill);background:var(--soft)}
a.wiki .wiki-w{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--pill);color:var(--card);
  font:700 11px/18px Georgia,"Times New Roman",serif;text-align:center}
a.wiki .ext{font-size:11px;opacity:.7}
.phead .bio{margin:.2em 0 0}
.avatar{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;color:#fff;font-weight:700;font-size:20px;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pbp-inn{font-weight:700;margin:1em 0 .2em;color:var(--head-text)}
ul.pbp{margin:.2em 0 .6em;padding-left:1.2em}
ul.pbp li{margin:1px 0}
ul.notes{margin:.2em 0 .8em;padding-left:1.2em;color:var(--fg);font-size:13px}
ul.notes li{margin:2px 0}
p.decisions{margin:.3em 0;font-size:14px}
p.umps{margin:.2em 0 .8em;color:var(--muted);font-size:12px}
.muted{color:var(--muted)}
.pos{color:var(--muted);font-size:11px;margin-left:3px}
/* Home-page global filter */
/* The filter control is one chip on the tab row: a rounded pill, deliberately unlike
   the square-shouldered view tabs beside it. Clicking it opens the form in a movable
   window (app.js), so the form itself needs no positioning here. */
.gfilter{display:inline-block}
.gfilter>form{display:none}                 /* lives in the float window when open */
.filt-chip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:5px 13px;border:1px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--fg);font:inherit;font-size:13px}
.filt-chip::after{content:"\25BE";color:var(--muted);font-size:11px}
.filt-chip:hover{border-color:var(--accent)}
.filt-chip:hover .filt-name{color:var(--accent)}
.filt-name{font-weight:700;letter-spacing:.02em}
.filt-desc{color:var(--muted);font-weight:400;max-width:44ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* the form, once lifted into a float window */
.bb-float-node{flex:1;overflow:auto;padding:14px 16px}
.bb-float-node>form{display:block}
@media (max-width:640px){.filt-desc{max-width:18ch}}
.lg-clear{background:none;border:0;color:var(--accent);cursor:pointer;font-size:12px;margin-left:12px;padding:2px 0}
.lg-clear:hover{text-decoration:underline}
.filter-form{padding:4px 14px 14px}
.all-box{display:inline-block;margin:6px 0 10px}
.lg-groups{display:flex;flex-wrap:wrap;gap:14px}
.lg-group{flex:1 1 210px;border:1px solid var(--line);border-radius:5px;margin:0;padding:6px 10px 10px;background:var(--card)}
.lg-group legend{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:0 4px}
.lg-box{display:block;margin:3px 0;white-space:nowrap}
.lg-code{font-weight:600}
.lg-name{color:var(--muted);font-size:12px}
.yr-range{margin:14px 0 10px;display:flex;flex-wrap:wrap;gap:26px}
.yr-side{display:flex;align-items:center;gap:10px}
.yr-side .yr-lbl{font-weight:600;width:34px}
.yr-side label{display:inline-flex;align-items:center;gap:4px}
.yr-in{width:74px;padding:3px 6px;border:1px solid var(--line);border-radius:3px}
/* Game-type filter: a multi-select dropdown (details) with descriptions */
.gtype-filter{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:4px 0 12px}
.gtype-filter .gt-lbl{font-weight:600}
.gt-all{margin:0}
.gtype-dd{position:relative;display:inline-block}
.gtype-dd>summary{cursor:pointer;list-style:none;border:1px solid var(--line);border-radius:4px;
  background:var(--card);padding:5px 28px 5px 10px;min-width:180px}
.gtype-dd>summary::-webkit-details-marker{display:none}
.gtype-dd>summary::after{content:"\25BE";position:absolute;right:10px;color:var(--muted)}
.gtype-dd[open]>summary::after{content:"\25B4"}
.gt-cur,.pos-cur{color:var(--accent);font-weight:600}
/* greyed out when the filter doesn't apply to the current view (its value still
   round-trips on submit so it's restored when you switch back). */
.gtype-filter.disabled{opacity:.5;pointer-events:none}
.gt-list{position:absolute;z-index:20;margin-top:4px;min-width:240px;max-height:260px;overflow:auto;
  border:1px solid var(--line);border-radius:5px;background:var(--card);box-shadow:0 4px 14px rgba(0,0,0,.12);padding:6px}
.gt-acts{display:flex;gap:14px;padding:2px 6px 6px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.gt-act{background:none;border:0;color:var(--accent);cursor:pointer;font-size:12px;padding:2px 0}
.gt-act:hover{text-decoration:underline}
.gt-box{display:flex;align-items:center;gap:7px;white-space:nowrap;padding:4px 6px;border-radius:4px}
.gt-box:hover{background:var(--zebra)}
.gt-desc{flex:1}
.gt-code{color:var(--muted);font-size:11px;letter-spacing:.03em}
.filter-actions{display:flex;align-items:center;gap:14px}
.filter-actions button{padding:6px 16px;border:0;border-radius:3px;background:var(--accent);color:#fff;cursor:pointer}
.btn-link{font-size:13px}
.filterbar{background:var(--soft);border:1px solid var(--soft-line);border-radius:5px;padding:6px 12px;margin:0 0 12px;font-size:13px}
.hero.compact{padding:18px 0 6px}
.hero.compact h1{font-size:26px}
/* #viewer = the home search/filters/games block; app.js fetch-swaps just this node
   (filters/search/sort/paging) so the widgets above never reload. Brief dim while loading. */
#viewer.viewer-loading{opacity:.55;pointer-events:none;transition:opacity .12s ease}
/* Arcade widget host — lives in the shell (persistent), shown only on /arcade so the
   games keep running/recall state across navigation (see html._arcade_host + app.js). */
.arcade-host{max-width:1000px;margin:0 auto 16px}
.arcade-host>h1{margin:6px 0 12px}
.arcade-grid{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:flex-start}  /* rows start at the left, so a card dropped under another stays there */
/* widget cards: a grip bar to drag (CSS order, so the iframes never reload) and a hide button;
   hidden cards come back from the pills under the grid; the frame follows the content height */
.wcard{display:flex;flex-direction:column}
.wcard[hidden]{display:none}
.whead{display:flex;align-items:center;justify-content:space-between;padding:0 4px 3px;font-size:11px;color:var(--muted);user-select:none}
.wgrip{cursor:grab;touch-action:none;display:inline-flex;align-items:center;gap:4px;font-size:15px;line-height:1}
.wgrip small{font-size:11px}
.whide{background:none;border:0;color:var(--muted);font:inherit;font-size:11px;cursor:pointer;padding:0 2px}
.whide:hover,.wgrip:hover{color:var(--fg)}
.wcard.dragging{opacity:.8;position:relative;z-index:5;pointer-events:none}
.arcade-grid.dragging iframe{pointer-events:none}
.wcard iframe{transition:height .18s ease}
.arcade-hidden{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:12px;font-size:12.5px;color:var(--muted)}
.wpill{font:inherit;font-size:12.5px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
.wpill:hover{border-color:#1c7d3a;color:#1c7d3a}
.wpill.wreset{margin-left:10px;color:var(--muted)}
/* Games | Players toggle */
/* Tab strip + the Filters chip share one line; the gap keeps them from reading as
   one group of controls. */
.tabrow{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0 0 10px}
.viewtabs{display:flex;gap:6px;margin:0}
.vtab{display:inline-block;padding:6px 18px;border:1px solid var(--line);border-bottom:2px solid var(--accent);
  border-radius:6px 6px 0 0;background:var(--card);color:var(--accent);font-weight:700;cursor:pointer;text-decoration:none}
.vtab:hover{background:var(--zebra)}
.vtab.active{color:var(--muted);background:var(--zebra);border-bottom-color:var(--line);cursor:default;pointer-events:none}
/* Players-by-season table: numbers right, text columns left; award badges */
.ptable td,.ptable th{text-align:right}
.ptable td.lft,.ptable th.lft{text-align:left}
.ptable td.lft{white-space:nowrap}
.awb{display:inline-block;font-size:10px;font-weight:700;padding:1px 4px;border-radius:3px;color:#fff;letter-spacing:.02em}
.awb.mvp{background:#b8860b}
.awb.cy{background:#2b5fa6}
.awb.roy{background:#1c7d3a}
.awb.gg{background:#7a6a3a}
/* Games list on the home page (server-sorted; clickable header links) */
/* wide tables (games / players-by-season) break out to the full content width so all
   columns are reachable. Gutter-safe: width excludes the reserved scrollbar (--sbw, set
   by app.js) so it spans exactly the visible area — no stray horizontal scrollbar, no
   left/right shift. Scrolls internally only when even the full width isn't enough. */
.games-scroll{overflow-x:auto;width:calc(100vw - var(--sbw, 0px));
  position:relative;left:50%;transform:translateX(-50%);
  /* the table starts where the page's content does (main: --page-w centred, 18px padding),
     so a narrow one lines up with the tabs above it; a wide one runs on to the right */
  padding:0 18px 0 max(18px, calc((100vw - var(--sbw, 0px) - var(--page-w)) / 2 + 18px));box-sizing:border-box}
table.games td,table.games th{border:1px solid var(--line);padding:3px 7px;text-align:right;white-space:nowrap}
table.games td:nth-child(-n+3),table.games th:nth-child(-n+3),
table.games td:nth-child(9),table.games th:nth-child(9),
table.games td:nth-child(10),table.games th:nth-child(10),
table.games td:nth-child(11),table.games th:nth-child(11),
table.games td.l,table.games th.l{text-align:left}   /* .l: a text column wherever it lands (the schedule has fewer columns) */
table.games th{padding:0}
table.games th a{display:block;color:#fff;padding:4px 7px;text-decoration:none}
table.games th a:hover{text-decoration:underline;background:rgba(255,255,255,.08)}
table.games th.sorted a{background:rgba(255,255,255,.16)}
.pager{display:flex;gap:4px;align-items:center}

/* ---- ballparks ---- */
.parkhead{display:flex;align-items:center;gap:16px;margin:.2em 0 .6em}
.parkhead h1{margin:0}
.parkhead .bio{margin:.2em 0 0}
.park-mark{width:56px;height:56px;border-radius:12px;background:linear-gradient(160deg,#2c3e50,#4b6584);
  display:flex;align-items:center;justify-content:center;font-size:30px;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:8px 0 18px}
.tile{border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:var(--zebra)}
.tile .tl{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px}
.tile .tv{font-size:15px;font-weight:600;margin-top:2px;line-height:1.7}
.tile .tv .tlogo{width:20px;height:20px;margin-right:4px;vertical-align:middle}
.tile .tv a{margin-right:8px}
.badge.gold{background:#fff4c2;color:#7a5a00;border-color:#e6c65a}
table.parks td:last-child .tlogo{width:18px;height:18px;margin-right:3px}
table.parks td:last-child a{margin-right:10px;white-space:nowrap}

/* ---- seasons ---- */
.seasonhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:.2em 0 .6em;flex-wrap:wrap}
.seasonhead h1{margin:0}
.seasonhead .bio{margin:.2em 0 0}
.seasonnav{white-space:nowrap;padding-top:6px}
.btn.ghost{background:var(--card);color:var(--head-text);border:1px solid var(--line);padding:5px 12px}
.btn.ghost:hover{background:var(--zebra);text-decoration:none}
.h2big{margin:22px 0 6px;font-size:20px}
table.seasons td:nth-child(4) .tlogo,table.standings td:nth-child(2) .tlogo,table.postseason .tlogo{width:20px;height:20px;margin-right:6px;vertical-align:middle}
table.standings td:nth-child(2){white-space:nowrap}
table.postseason td:nth-child(2) b{margin:0 8px;font-size:15px}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:6px 0 16px}
.lcard{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--zebra)}
.lcard .lc{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.lcard ol{margin:0;padding-left:18px;font-size:13px}
.lcard li{margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcard .lv{display:inline-block;min-width:38px;font-weight:700;font-variant-numeric:tabular-nums}
section h3{margin:12px 0 4px;font-size:15px;color:var(--head-text)}
ul.plain{margin:4px 0 12px;padding-left:20px}
ul.plain li{margin:3px 0}
table.seasons td:nth-child(4),table.seasons td:nth-child(5),table.seasons td:nth-child(6),
table.standings td:nth-child(2),table.standings td:nth-child(9),table.postseason td:nth-child(2),
table.seasons th:nth-child(4),table.seasons th:nth-child(5),table.seasons th:nth-child(6),
table.standings th:nth-child(2),table.standings th:nth-child(9),table.postseason th:nth-child(2){text-align:left}
table.seasons tbody tr:last-child,table.standings tbody tr:last-child,table.postseason tbody tr:last-child,
table.parks tbody tr:last-child{background:transparent;font-weight:normal}

/* ---- world series ---- */
table.wsindex td:nth-child(2),table.wsindex td:nth-child(4),table.wsindex td:nth-child(5),
table.wsindex th:nth-child(2),table.wsindex th:nth-child(4),table.wsindex th:nth-child(5),
table.wsgames td:nth-child(3),table.wsgames th:nth-child(3),table.wsgames td:nth-child(5),table.wsgames th:nth-child(5),
table.wsgames td:nth-child(7),table.wsgames td:nth-child(8),table.wsgames td:nth-child(9),
table.wsgames th:nth-child(7),table.wsgames th:nth-child(8),table.wsgames th:nth-child(9){text-align:left}
table.wsindex tbody tr:last-child,table.wsgames tbody tr:last-child,table.wsline tbody tr:last-child{background:transparent;font-weight:normal}
table.wsindex .tlogo,table.wsgames .tlogo{width:20px;height:20px;margin-right:6px;vertical-align:middle}
.wscols{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:18px}
.wscol h3{display:flex;align-items:center;gap:6px;margin:6px 0 4px;font-size:16px}
.wscol h3 .tlogo{width:24px;height:24px}
table.wsline{font-size:12.5px}
table.wsline td:first-child{white-space:nowrap}

/* ---- awards & leagues ---- */
table.awards td:nth-child(1),table.awards td:nth-child(5),table.awards td:nth-child(6),
table.awards th:nth-child(1),table.awards th:nth-child(5),table.awards th:nth-child(6),
table.awardwins td:nth-child(3),table.awardwins td:nth-child(4),table.awardwins th:nth-child(3),table.awardwins th:nth-child(4),
table.awardwins td:last-child,table.awardwins th:last-child,
table.leagues td:nth-child(1),table.leagues th:nth-child(1),
table.lgseasons td:nth-child(3),table.lgseasons th:nth-child(3),table.lgmembers td:nth-child(1),table.lgmembers th:nth-child(1){text-align:left}
table.awards tbody tr:last-child,table.awardwins tbody tr:last-child,table.leagues tbody tr:last-child,
table.lgseasons tbody tr:last-child,table.lgmembers tbody tr:last-child{background:transparent;font-weight:normal}
table.awardwins .tlogo,table.lgseasons .tlogo,table.lgmembers .tlogo{width:18px;height:18px;margin-right:5px;vertical-align:middle}
table.awardwins td:nth-child(7) a,table.awardwins td:nth-child(3) a{white-space:nowrap}
.tile .tv .tlogo{width:20px;height:20px}

/* ---- footer / credits ---- */
.site-foot{margin:32px 18px 18px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;text-align:center}
.prose.credits{max-width:760px;margin:0 auto;padding:8px 0 24px}
.prose.credits h2{font-size:17px;margin:20px 0 4px}
.prose.credits p,.prose.credits li{font-size:14px;line-height:1.5}
.prose.credits .quote{border-left:3px solid var(--line);padding-left:12px;color:#444;font-style:italic}

/* Stat finder presets: the landing page's main affordance, so they lead the page and
   are grouped by interest rather than run together in one undifferentiated row. */
.presets{margin:10px 0 14px}
.preset-row{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin:0 0 7px}
.preset-head{flex:0 0 12em;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.presets a.preset{display:inline-block;padding:4px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13px;color:var(--head-text);text-decoration:none;line-height:1.35}
.presets a.preset:hover{border-color:var(--accent);color:var(--accent)}
.presets a.preset.current{border-color:var(--accent);color:var(--accent);font-weight:600}
@media (max-width:640px){.preset-head{flex:1 0 100%;margin-bottom:2px}}

/* ---- theme toggle ---- */
.theme-btn{width:26px;height:26px;border-radius:50%;border:1px solid #5b6b7b;background:transparent;color:#cfe;cursor:pointer;
  font-size:13px;line-height:1;padding:0;margin-left:14px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.theme-btn:hover{border-color:#cfe;color:#fff}
:root[data-theme="dark"] img.tlogo,:root[data-theme="dark"] .tile .tlogo{filter:brightness(1.05)}

/* Pages shown inside a floating window (see bbFloat in app.js): no scoreboard strip. */
:root[data-framed] .sbwrap{display:none}

/* The shell's head is the same on every page: one search line, the scoreboard strip,
   this day, then the page. */
/* The search line starts at the left edge like the tabs and tables under it: the search
   box, then the fold buttons for the two strips right beside it (they wrap under it on a
   phone). A folded strip is gone until its button brings it back; the choice is
   remembered per browser (localStorage "<prefix>-fold", read before first paint by the
   head snippet in html.page, so nothing jumps on load). app.js paints the arrows. */
.hero.compact{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;padding:6px 0 0;text-align:left}
.big-search{justify-content:flex-start;margin:4px 0 8px}
.big-search input{padding:6px 12px;width:440px;max-width:calc(100vw - 130px)}
.folds{display:flex;gap:6px;margin:4px 0 8px}
.fold-btn{padding:2px 9px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);font:inherit;font-size:12px;line-height:1.4;cursor:pointer;white-space:nowrap}
.fold-btn::after{content:" \25BE";font-size:10px}                 /* ▾ open: click to fold */
.fold-btn.folded::after{content:" \25B8"}                          /* ▸ folded: click to show */
.fold-btn:hover{border-color:var(--accent);color:var(--accent)}
.fold-reset{padding:2px 4px;border:0;background:none;color:var(--muted);font:inherit;font-size:11.5px;line-height:1.4;cursor:pointer;opacity:.7;white-space:nowrap}
.fold-reset:hover{opacity:1;color:var(--accent);text-decoration:underline}
:root[data-fold~="scoreboard"] .sbwrap{display:none}
:root[data-fold~="thisday"] .thisday{display:none}
:root[data-fold~="news"] .newsstrip{display:none}
:root[data-framed] .newsstrip{display:none}
/* Headlines (hub/shell/news.py): one row of cards between the scoreboard and This Day, scrolled sideways
   (wheel or drag the thin bar). "All news ›" stays pinned at the left and opens /news in a window; a card's
   title link stretches over the whole card and opens the outlet, and its reaction row sits above that link. */
.newsstrip{display:flex;gap:8px;align-items:stretch;overflow-x:auto;margin:0 0 12px;padding:1px 1px 6px;scrollbar-width:thin}
.nwall{flex:0 0 auto;position:sticky;left:0;z-index:2;display:flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--link);font-size:12px;font-weight:700;white-space:nowrap;text-decoration:none;box-shadow:8px 0 8px -4px var(--bg)}
.nwall:hover{border-color:var(--accent);text-decoration:none}
.nwcard{flex:0 0 236px;position:relative;display:flex;flex-direction:column;gap:3px;padding:6px 10px;border:1px solid var(--soft-line);border-radius:8px;background:var(--card);overflow:hidden}
.nwcard:hover{border-color:var(--accent)}
.nwtop{display:flex;align-items:center;gap:4px;min-width:0}
.nwsrc{flex:1 1 auto;min-width:0;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nwtitle{font-size:12.5px;line-height:1.3;color:var(--link);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nwtitle:hover{text-decoration:none}
.nwtitle::after{content:"";position:absolute;inset:0}
.nwreact.mini{flex:0 0 auto;position:relative;z-index:1;gap:0;margin:-2px -6px -2px 0}
.nwreact.mini .nwr{font-size:11px;line-height:16px;padding:0 3px}
.nwreact.mini .nwn{margin-left:1px;font-size:10px;font-weight:700}
.nwcard:hover .nwr{opacity:.85;filter:none}
/* the /news page */
h2.nwday{font-size:15px;margin:1.2em 0 .3em;color:var(--head-text)}
ul.newslist{list-style:none;margin:0;padding:0;max-width:820px}
ul.newslist li{padding:6px 0;border-bottom:1px solid var(--soft-line);font-size:14px;line-height:1.4}
.nwmeta{font-size:11.5px;color:var(--muted);white-space:nowrap}
.nwsum{font-size:12.5px;color:var(--fg);opacity:.85;margin-top:1px}
/* reactions under each headline: faint until the row is hovered; a count only once used */
.nwreact{display:flex;gap:2px;margin:2px 0 0 -6px}
.nwr{border:1px solid transparent;border-radius:999px;background:none;padding:0 6px;font:inherit;font-size:12px;line-height:20px;color:var(--muted);cursor:pointer;opacity:.4;filter:grayscale(.6)}
ul.newslist li:hover .nwr,.nwr:focus-visible{opacity:.85;filter:none}
.nwr.has{opacity:.85;filter:none}
.nwr.on{opacity:1;filter:none;border-color:var(--accent);background:var(--soft)}
/* the two private ones (👎 🗑️) mark the visitor's own pick in a muted red rather than the accent */
.nwr.on[data-r="down"],.nwr.on[data-r="trash"]{border-color:#b8574a;background:rgba(184,87,74,.13)}
.nwr:hover{opacity:1;border-color:var(--line)}
.nwn{margin-left:3px;font-size:11px}
.nwn:empty{display:none}
/* two pairs (👍 👎 | 🔥 🗑️): a little gap before the second */
.nwr.nwpair{margin-left:8px}
.nwreact.mini .nwr.nwpair{margin-left:4px}
/* Inside a floating window the head furniture is redundant: the window has its own
   title bar, and the scoreboard/this-day lines already show on the page behind it. */
:root[data-framed] .thisday{display:none}
:root[data-framed] .hero{display:none}
:root[data-framed] header{display:none}   /* a floating window has its own title bar: no site header or tabs inside it */
:root[data-framed] main{padding-top:6px}

/* ---- phone layout: header nav folds behind a menu button ---- */
.menu-btn{display:none;margin-left:auto;width:36px;height:32px;border:1px solid #5b6b7b;border-radius:6px;background:transparent;color:#cfe;font-size:18px;cursor:pointer}
@media (max-width:720px){
  header{padding:8px 12px;gap:10px}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center}
  header nav{display:none;flex-basis:100%;flex-direction:column;margin:4px 0 2px;border-top:1px solid #34424f;padding-top:6px}
  header nav.open{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  header nav a,header nav .user{margin:0;padding:9px 6px;border-bottom:1px solid #2a3540}
  header nav .user{grid-column:1/-1}
  header nav a.up{margin:0;font-size:inherit}
  header nav a.signin{display:inline-block;justify-self:start;margin:8px 6px 4px;border-bottom:1px solid #cfe}
  header nav .theme-btn{margin:8px 6px;justify-self:start}
  /* the sports sit at the top of the open menu, named */
  header .sites{display:none;order:3;flex-basis:100%;margin:4px 0 0;border-top:1px solid #34424f;padding-top:6px}
  header:has(nav.open) .sites{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  header nav{order:4}
  header:has(nav.open) nav{border-top:0;margin-top:0;padding-top:0}
  header .sites a,header .sites .here{padding:9px 6px;border-bottom:1px solid #2a3540;border-radius:0;opacity:1}
  header .sites .here{display:inline-flex;box-shadow:none;background:rgba(255,255,255,.1)}
  header .sites .lbl{display:inline}
  header .sites [data-site="smallball"] .ico::after{content:none}
  .hero h1{font-size:26px}
  .big-search input{width:min(440px,70%)}
  table{font-size:12.5px}
}

/* player page: source IDs behind a small inline toggle */
details.ids{display:inline-block;vertical-align:baseline}
details.ids summary{cursor:pointer;color:var(--link);list-style:none;display:inline}
details.ids summary::-webkit-details-marker{display:none}
details.ids[open] summary::after{content:": "}

/* "This day in baseball" line (webapp/thisday.py) */
.thisday{margin:8px 0 12px;padding:9px 14px;border:1px solid var(--soft-line);border-radius:8px;background:var(--soft);font-size:14px;line-height:1.7}
.thisday b{color:var(--head-text)}
.thisday a.wiki{margin-left:6px;vertical-align:middle}
/* "From the vault" (webapp/vault.py): This Day's second line, joined into one box */
.thisday:has(+ .thisday.vault){margin-bottom:0;border-bottom-style:dashed;border-bottom-left-radius:0;border-bottom-right-radius:0}
.thisday + .thisday.vault{margin-top:0;border-top:0;border-top-left-radius:0;border-top-right-radius:0}
.thisday a.yt{margin-left:6px;white-space:nowrap;font-weight:600}
/* on a phone with no choice saved, This Day starts as one line and From the vault waits (html.page
   head snippet sets data-peek; app.js opens both on a tap or the fold button, and a tap on the open
   box puts it back to one line: › and ⌃ at the right edge say which way a tap goes) */
@media (max-width:720px){
  :root:not([data-peek~="thisday"]) .thisday{cursor:pointer}
  :root:not([data-peek~="thisday"]) .thisday:not(.vault){position:relative;padding-right:30px}
  :root:not([data-peek~="thisday"]) .thisday:not(.vault)::after{content:"\2303";position:absolute;right:12px;top:8px;font-weight:700;color:var(--link)}
}
:root[data-peek~="thisday"] .thisday{position:relative;margin-bottom:12px;padding-right:30px;border-bottom-style:solid;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
:root[data-peek~="thisday"] .thisday::after{content:"\203A";position:absolute;right:12px;top:8px;font-weight:700;color:var(--link)}
:root[data-peek~="thisday"] .thisday.vault{display:none}
/* wide laptops: a little less space between the tabs keeps the longest menus on one line */
@media (min-width:1221px) and (max-width:1440px){
  header nav a{margin-left:11px}
  header nav .user,header nav a.signin,header nav a.up{margin-left:16px}
}
/* laptop widths: keep the whole header on one line */
@media (min-width:721px) and (max-width:1220px){
  header{gap:10px;padding:8px 12px}
  header .brand{font-size:16px}
  header nav a{margin-left:9px;font-size:13.5px}
  header nav .user,header nav a.signin,header nav a.up{margin-left:12px}
  header nav .theme-btn{margin-left:8px}
}

/* ---- extras: win-probability chart, play tags, collapsed sections ---- */
.tag{display:inline-block;font-size:10.5px;line-height:1.5;padding:0 5px;border:1px solid var(--line);border-radius:3px;background:var(--zebra);color:var(--muted);margin-left:3px;vertical-align:middle;white-space:nowrap}
.tag.warn{color:#a13;border-color:#e9b}
.tag.ch{color:#265;border-color:#9cb}
:root[data-theme="dark"] .tag.warn{color:#f9b;border-color:#844}
:root[data-theme="dark"] .tag.ch{color:#9dc;border-color:#365}
details.xtra{border:1px solid var(--line);border-radius:8px;padding:6px 12px;background:var(--zebra);margin:.6em 0 1em}
details.xtra>summary{cursor:pointer;font-weight:600;color:var(--head-text)}
details.xtra[open]>summary{margin-bottom:6px}
details.xtra h3{margin:.8em 0 .3em}
.depth3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.tile .tv.small{font-size:13px;font-weight:400;line-height:1.5}

/* ---- free (Wikimedia Commons) photos ---- */
.photocredit{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.photocredit a{color:var(--muted)}
.parkphoto{width:132px;height:88px;object-fit:cover;border-radius:8px;flex:none}
figure.teamphoto{float:right;margin:0 0 10px 14px;max-width:260px}
figure.teamphoto img{width:100%;border-radius:8px;display:block}
figure.teamphoto figcaption{font-size:11px;color:var(--muted);margin-top:2px}
@media (max-width:720px){figure.teamphoto{float:none;max-width:100%;margin:6px 0}}

/* Stat finder's builder chip. Same control as the Filters chip, but this page's second
   path rather than a side refinement, so it gets a touch more presence and its own row. */
.builder-chip{display:block;margin:2px 0 12px}
.builder-chip .filt-chip{padding:6px 15px;font-size:13.5px}
.builder-chip .filt-desc{max-width:52ch}

/* A plain filter box above a long list (the colleges index). */
.list-filter{display:flex;align-items:center;gap:8px;margin:6px 0 12px}
.list-filter input{padding:6px 10px;border:1px solid var(--line);border-radius:6px;
  background:var(--card);color:var(--fg);min-width:260px;font:inherit}
.list-filter button{padding:6px 14px;border:0;border-radius:6px;background:var(--accent);
  color:#fff;cursor:pointer;font:inherit}