/* Shared interface refinement. Existing sport identities, chart data and exports remain native. */
:root {
  --bg:#f6f7f9; --surface:#fff; --surface-2:#f0f2f5; --surface-3:#e5e9ee;
  --border:#d8dee6; --border-strong:#94a0ae; --grid:#e8ecf1;
  --text:#17212f; --text-2:#354254; --muted:#586779;
  --row-alt:#fafbfd; --row-hover:#fff5cf;
  --ui-radius:10px; --ui-shadow:0 8px 28px #1422340d;
  --ui-menu-shadow:0 14px 36px #10182824;
}
:root[data-theme="dark"] {
  --bg:#15171b; --surface:#1d2026; --surface-2:#252a32; --surface-3:#303743;
  --border:#3b4350; --border-strong:#748194; --grid:#303641;
  --text:#f0f3f7; --text-2:#d1d9e4; --muted:#acb8c8;
  --row-alt:#21252c; --row-hover:#3b3624;
  --ui-shadow:0 8px 28px #0002; --ui-menu-shadow:0 14px 36px #0006;
}
body { line-height:1.55; }
html { scroll-padding-top:calc(var(--header-h,80px) + 16px); }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
button,a.btn,[role="button"],summary { touch-action:manipulation; }
button,.btn,.icon-btn { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
.btn { min-height:36px; height:auto; border-radius:7px; padding:8px 12px; font-size:.84rem; line-height:1.25; justify-content:center; }
.btn.small { min-height:30px; height:auto; padding:5px 9px; }
.btn.primary { box-shadow:0 1px 2px #0001; }
.btn:disabled { opacity:.48; }
.btn:active:not(:disabled) { background:var(--surface-3); }
.btn.primary:active:not(:disabled) { background:var(--ink-btn); opacity:.84; }
input[type="text"],input[type="search"],input[type="number"],input[type="email"],input[type="password"],input[type="date"],textarea {
  border-radius:7px; min-height:36px; padding:7px 10px; line-height:1.3;
}
/* Native WebKit menu labels clip when vertical padding consumes the control line box. */
select { border-radius:7px; min-height:36px; padding:0 10px; line-height:normal; }
textarea { color:var(--text); background:var(--surface); border:1px solid var(--border-strong); font:inherit; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
label.field { gap:5px; }
.seg { height:auto; min-height:36px; border-radius:7px; overflow:hidden; }
.seg button { min-height:34px; padding:7px 11px; }
.box,.tbl-wrap,.kpis { border-radius:var(--ui-radius); }
.tbl-wrap { scrollbar-color:var(--border-strong) var(--surface-2); }
.tbl-tools { gap:8px; padding-top:8px; padding-bottom:8px; }
.menu,.clip-menu,.pop,.popover,.search-results { border-radius:10px; box-shadow:var(--ui-menu-shadow); }
dialog { border-radius:12px; border:1px solid var(--border-strong); box-shadow:0 24px 72px #0005; }
dialog::backdrop { background:#080d1680; }
summary { cursor:pointer; text-underline-offset:3px; }
.notice { border-radius:0 8px 8px 0; line-height:1.6; }
.site-header { border-bottom-width:3px; }
.site-header>.wrap { min-height:64px; height:64px; gap:14px; padding-left:20px; padding-right:20px; }
.site-header .brand { font-size:1.27rem; letter-spacing:.045em; gap:8px; min-height:38px; }
.site-header .brand-logo { flex:none; }
.site-header .beta-pill { flex:none; margin-left:0; }
.site-header .nav { align-items:stretch; gap:1px; }
.site-header .nav>a,.site-header .graphics-nav>a { display:flex; align-items:center; font-size:.73rem; line-height:1.2; padding:0 8px; letter-spacing:.025em; }
.site-header .nav a { transition:background-color 120ms ease,color 120ms ease; }
.site-header .nav a[aria-current="page"] { background:#ffffff0b; }
.site-header .header-tools { gap:7px; }
.site-header .icon-btn { min-height:36px; height:36px; border-radius:7px; padding:0 10px; font-size:.72rem; }
.site-header .search input { width:190px; height:36px; min-height:36px; padding:7px 10px; border-radius:7px; }
.site-header .search-results { max-height:min(440px,65dvh); overflow:auto; padding:5px; border-color:var(--border-strong); }
.site-header .search-results a { min-height:42px; align-items:center; padding:9px 10px; border-radius:6px; gap:12px; }
.site-header .search-results a small { flex:none; }
.site-header .graphics-options { padding:6px; border-radius:10px; box-shadow:var(--ui-menu-shadow); min-width:220px; }
.site-header .nav .graphics-options a { display:flex; align-items:center; min-height:42px; line-height:1.25; padding:10px 12px; border:0; border-radius:6px; color:var(--text); font-size:.78rem; letter-spacing:.02em; }
.site-header .nav .graphics-options a:hover,.site-header .nav .graphics-options a:focus-visible,.site-header .nav .graphics-options a[aria-current="page"] { color:var(--text); background:var(--surface-2); }
/* This is a drawn icon, not the coarse-pointer hit-area pseudo-element from site.css. */
.site-header .menu-btn { flex:none; white-space:nowrap; }
.menu-btn::before { content:""; position:static; transform:none; display:block; flex:0 0 14px; width:14px; height:11px; border-top:2px solid currentColor; border-bottom:2px solid currentColor; background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat; }
.site-footer { margin-top:24px; background:var(--surface); border-top:1px solid var(--border); }
.site-family { gap:10px; padding-top:22px; padding-bottom:20px; }
.site-family a { border-radius:8px; padding:12px 14px; }
.site-foot-main { line-height:1.75; padding-top:16px; padding-bottom:18px; }
.shared-signin-foot { padding-top:14px; padding-bottom:18px; }
@media (max-width:1599px), (pointer:coarse) {
  .site-header>.wrap { height:auto; min-height:64px; padding-top:10px; padding-bottom:10px; flex-wrap:wrap; gap:10px; }
  .site-header .header-tools { margin-left:auto; }
  .site-header .menu-btn { display:inline-flex; }
  .site-header:not(.menu-open) .nav { display:none; }
  .site-header.menu-open .nav { order:3; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); flex-basis:100%; gap:8px; padding:12px 0; border-top:1px solid #ffffff24; height:auto; max-height:60dvh; overflow-y:auto; overscroll-behavior:contain; }
  .site-header.menu-open .nav>a,.site-header.menu-open .graphics-nav>a { justify-content:flex-start; text-align:left; min-height:48px; padding:12px 14px; line-height:1.3; border:1px solid #ffffff2e; border-radius:8px; background:#ffffff0d; color:var(--header-ink); font-size:.82rem; font-weight:650; text-decoration:none; }
  .site-header.menu-open .nav a[aria-current="page"] { background:#ffffff20; border-color:#ffffff60; box-shadow:inset 3px 0 var(--brand); }
  .site-header.menu-open .nav :is(a:active,a:focus-visible) { background:#ffffff26; border-color:#ffffff70; color:var(--header-ink); text-decoration:none; }
  .site-header .graphics-nav>a { width:100%; }
  .site-header .graphics-options { display:none !important; }
}
@media (max-width:1000px) {
  .site-header>.wrap { padding-left:16px; padding-right:16px; }
  .site-header .search input { width:150px; }
  .site-header .icon-btn { padding:0 9px; }
}
@media (max-width:680px) {
  .site-header>.wrap { gap:8px 10px; }
  .site-header .brand { font-size:1.2rem; }
  .site-header .header-tools { flex-basis:100%; display:flex; width:100%; gap:6px; position:relative; }
  .site-header .search { flex:1; min-width:90px; position:static; }
  .site-header .search input { width:100%; font-size:16px; }
  .site-header .search-results { top:calc(100% + 6px); left:0; right:0; width:auto; }
  .site-header .icon-btn { min-height:40px; height:40px; padding:0 9px; }
  .site-header .search input { min-height:40px; height:40px; }
  .site-header #theme-label { display:none; }
  .site-header #theme-toggle { width:40px; justify-content:center; }
  .site-header.menu-open .nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-foot-main { gap:12px; }
}
@media (pointer:coarse) {
  :is(input[type="text"],input[type="search"],input[type="number"],input[type="email"],input[type="password"],input[type="date"],select,textarea) { font-size:16px; }
  .btn,.seg button { min-height:44px; }
  select { min-height:44px; }
  .site-header .icon-btn,.site-header .search input { min-height:44px; height:44px; }
  .site-header #theme-toggle { width:auto; min-width:44px; flex:none; }
}
@media (hover:hover) and (pointer:fine) {
  .btn:hover:not(:disabled) { border-color:var(--text-2); }
  .site-header .nav>a:hover,.site-header .graphics-nav>a:hover { background:#ffffff0b; }
  .site-header.menu-open .nav>a:hover,.site-header.menu-open .graphics-nav>a:hover { background:#ffffff26; border-color:#ffffff70; color:var(--header-ink); text-decoration:none; }
  .site-family a:hover { background:var(--surface-2); }
}
@media (prefers-reduced-motion:reduce) {
  .site-header .nav a { transition:none; }
}
/* Keep presentation and compact widget controls in their own established geometry. */
.wtools .btn,.w-tools .btn { min-height:26px; padding:3px 6px; }
html[data-brand] .site-header>.wrap { min-height:50px; }
@media print { body { background:#fff; } }

/* Trend cards must grow with text zoom and wrap long numeric comparisons. */
.tgroups { grid-template-columns:repeat(auto-fill,minmax(min(100%,18.125rem),1fr)); }
.tgroup { min-width:0; }
.tgroup li a { flex-wrap:wrap; }
.tgroup li a .what { min-width:0; flex:1 1 6em; overflow-wrap:anywhere; }
.tgroup li a .nums { white-space:normal; overflow-wrap:anywhere; margin-left:auto; text-align:right; }

@media (max-width:680px) { .site-header .header-tools { flex-wrap:wrap; } }

.vcard .top,.tgroup-head { flex-wrap:wrap; }

.site-header .brand { min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; }

/* A popup dismissal is a touch target; compact chart toolbar buttons stay unchanged. */
@media (pointer:coarse) {
  .inspector > h3 > .btn.small, .settings-modal .settings-ways > .btn.small { min-width:44px; min-height:44px; padding:8px 10px; }
}

/* (Not in Edit dashboard on an iPad, .free-edit: there the board keeps its columns so a finger can size widgets.)
   Reflow saved dashboard columns for phones and tablets without rewriting the
   board's desktop spans or dimensions. Charts get room across, not tall slivers. */
@media (max-width:1280px) {
  .dash-page:not(.free-edit) .board.cells { --cols:1; grid-auto-rows:auto; min-height:400px; }
  .dash-page:not(.free-edit) .board.cells>.widget { grid-column:1 / -1 !important; grid-row:auto !important; min-height:280px; }
  .dash-page:not(.free-edit) .board.cells>.widget.tiles-w,.dash-page:not(.free-edit) .board.cells>.widget.answer { min-height:0; }
  .dash-page .board-scroll { min-height:0; }
  .dash-page:not(.free-edit) :is(.w-resize, .w-edge) { display:none; }
  .dash-page .w-body.chart { flex:none; height:320px; }
  .dash-page .widget.radar-w .w-body.chart { height:430px; }
  .dash-page .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); height:auto; }
  .dash-page .tile { min-height:120px; padding:12px; justify-content:flex-start; gap:4px; }
  .dash-page .tile .k { font-size:13px; white-space:normal; overflow:visible; line-height:1.35; }
  .dash-page .tile :is(.r,.q,.p) { font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
}

@media (max-width:599px) { .dash-page .tiles { grid-template-columns:minmax(0,1fr); } }

/* Clearing a phone dashboard must leave a visible way to restore it even when
   the empty-board view hides the Edit dashboard control. */
@media (max-width:720px) {
  .dash-page.empty-board:not(.locked):not(.editing) .dash-top>:is(.dash-undo,.dash-redo):not(.x) { display:inline-flex; }
}

/* Team result links show the opponent, not an unexplained game number. */
.team-result-strip { margin:12px 0; max-width:100%; }
.team-result-strip>p { margin:0 0 6px; }
.team-result-links { display:flex; flex-wrap:wrap; gap:4px; max-height:146px; overflow:auto; padding:2px 2px 4px; overscroll-behavior:contain; }
.team-result-links a,.results.team-result-strip a { display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:72px; min-height:44px; height:auto; padding:8px 10px; border-radius:4px; font-size:13px; line-height:1.2; white-space:nowrap; color:#fff; text-decoration:none; }
.team-result-links a.w { background:#087b37; }
.team-result-links a.l { background:#b3261e; }
.team-result-links a.t { background:#596273; }
.team-result-links a:hover,.team-result-links a:focus-visible,.results.team-result-strip a:hover,.results.team-result-strip a:focus-visible { color:#fff; text-decoration:none; outline:2px solid var(--text); outline-offset:2px; }

/* NBA game details use recorded box scores, with contained tables on touch screens. */
.nba-game-detail { font-size:14px; line-height:1.45; }
.nba-game-detail .small { font-size:13px; line-height:1.5; }
.nba-shot-teams { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.nba-shot-team { min-width:0; border:1px solid var(--border); border-radius:8px; padding:12px; }
.nba-shot-team h3 { margin:0 0 10px; font-size:17px; white-space:normal; }
.nba-score-stack { display:flex; min-height:44px; width:100%; overflow:hidden; border-radius:5px; margin-bottom:12px; }
.nba-score-stack>span { display:flex; align-items:center; justify-content:center; min-width:max-content; padding:0 3px; font-size:12px; font-weight:700; color:#fff; overflow:hidden; white-space:nowrap; }
.nba-score-stack .two { background:#0d6680; }.nba-score-stack .three { background:#7043a3; }.nba-score-stack .ft { background:#805a00; }
.nba-detail-scroll { max-width:100%; overflow:auto; margin:8px 0; }
.nba-detail-table { border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; font-size:14px; }
.nba-detail-table th,.nba-detail-table td { padding:9px 10px; border-bottom:1px solid var(--border); text-align:right; white-space:nowrap; }
.nba-detail-table th:first-child { text-align:left; }
.nba-detail-table thead { background:var(--surface-2); }
.nba-detail-players { margin:12px 0; padding:10px 12px; border:1px solid var(--border); border-radius:7px; }
.nba-detail-players summary { min-height:44px; display:list-item; cursor:pointer; font-weight:700; padding:10px 0; }
.nba-detail-players .nba-detail-table { min-width:610px; }
@media (max-width:700px) { .nba-shot-teams { grid-template-columns:minmax(0,1fr); }.nba-detail-table th,.nba-detail-table td { padding:9px 6px; }.nba-shot-team { padding:10px; } }
.nba-detail-table-hint { display:none; }
@media (max-width:700px) { .nba-detail-table-hint { display:block; } }
.nba-game-jumps { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; }
.nba-game-jumps .btn { min-height:44px; }
.game-board #game-shooting,.game-board #game-rebounds { scroll-margin-top:calc(var(--header-h,64px) + 12px); }
.nba-shot-team .nba-detail-table th:last-child { padding-right:16px; }

/* Removable filters align their label and close control on the same centre line. */
.ask-filters .filter-chips, .ask-chips { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.chip.filter-chip, .dash-page .ask-bar .chip.filter-chip { display:inline-flex; align-items:center; gap:6px; line-height:1.25; vertical-align:middle; }
.chip.filter-chip .chip-x { flex:none; margin:0; align-self:center; }
/* The tight right padding only makes room for the x. A chip without one (who, which seasons) keeps even padding, so its label is centred. */
.chip.filter-chip, .dash-page .ask-bar .chip.filter-chip { justify-content:center; padding:2px 10px; }
.chip.filter-chip:has(> .chip-x), .dash-page .ask-bar .chip.filter-chip:has(> .chip-x) { padding:1px 2px 1px 10px; }
/* A widget's sample line starts on the same edge as its title (.w-head has 9px). */
.w-sample { padding-left:9px; }

/* Box-score cards read like numbers, with supporting labels at a readable size. */
.widget .tile { align-items:flex-start; text-align:left; padding:16px; gap:5px; justify-content:flex-start; }
.widget .tile .v { font:700 2.5rem/1.15 var(--font); font-variant-numeric:tabular-nums; }
.widget .tile :is(.r,.q,.p) { font-size:14px; line-height:1.45; }
.widget .tile .k { font-size:13px; line-height:1.4; }
@media(min-width:1281px) { .widget .tile { min-height:180px; } }
@media(max-width:600px) { .widget .tiles { grid-template-columns:1fr; } .widget .tile { min-height:150px; } }

/* ---------- 2026-10-30, the UI audit ---------- */
/* A busy site (api.js): one quiet line while requests wait their turn. */
.net-busy { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; max-width: calc(100vw - 32px); padding: 8px 16px; border-radius: 999px; background: var(--surface); color: var(--text-2); border: 1px solid var(--border-strong); font-size: .85rem; box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.busy-page { margin-top: 28px; margin-bottom: 32px; }
/* Charts that cannot use the board's filters (filter-hold.js): one neutral line at the end of the board. */
.filter-held-line { padding: 10px 12px; color: var(--text-2); font-size: .9rem; line-height: 1.45; border-top: 1px solid var(--border); min-width: 0; }
.filter-held-line .linkish { min-height: 32px; }
.filter-header-note { padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2, var(--bg)); color: var(--text-2); font-size: .82rem; line-height: 1.4; text-align: left; flex: 0 0 auto; }
.filter-header-note strong { display: block; color: var(--text); font-size: .88rem; }
.filter-held-note { padding: 14px; color: var(--text-2); font-size: .9rem; line-height: 1.45; text-align: left; }
.filter-held-note p { margin: 0; }
/* Above the board, and where the screen lands after Ask: below the sticky header, never under it. */
.answer-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 2px; }
.answer-nav[hidden] { display: none; }
.answer-said { flex: 1 1 100%; font-size: .95rem; line-height: 1.4; }
.ask-unused { flex: 1 1 100%; margin: 0; padding: 6px 10px; border-left: 3px solid var(--border-strong); background: var(--surface); font-size: .9rem; line-height: 1.4; }
.answer-nav .to-ask { font-size: .85rem; min-height: 32px; }
/* The machinery of an answer, folded. */
.ask-details { font-size: .8rem; color: var(--text-2); }
.ask-details > summary { cursor: pointer; min-height: 28px; line-height: 28px; font-weight: 600; }
.ask-links { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 4px 0; }
.ask-links:empty { display: none; }
.ask-history { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
/* A chart not yet near the screen holds a chart's room. */
.widget.undrawn .w-body { min-height: 200px; }
/* Editor tools only while editing, at every width (phones already were). */
.dash-page:not(.editing):not(.empty-board) .dash-top > :is(.add-widget, .dash-clear, .paste-pop, .sep, .seg, .dash-fit, .edit-only, .account-presets, [aria-label="Keyboard shortcuts"]),
.dash-page:not(.editing) .focus-bar { display: none; }
/* Signed out: a control that needs an account says so with a small lock before it is pressed; a widget's editing tools do not show at all. */
.w-tools > [data-signin] { display: none; }
.dash-top > button[data-signin]::after, .dash-top > .pop[data-signin] > button::after, .page-head button.needs-account::after, .creator-tools button[data-signin]::after, a.btn[data-signin]::after {
  content: ''; display: inline-block; width: .62em; height: .72em; margin-left: .4em; vertical-align: -.02em; opacity: .75; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 016 0V5h1v7H1V5zm1.4 0h3.2V3.5a1.6 1.6 0 00-3.2 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 016 0V5h1v7H1V5zm1.4 0h3.2V3.5a1.6 1.6 0 00-3.2 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Games: a day at a time. */
.games-days { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.games-days .day-label { font-weight: 700; flex: 1 1 auto; text-align: center; min-width: 8em; }
.games-days .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* A player's latest numbers, first on his page. */
.player-line { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin: 12px 0; }
.player-line > div { padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); text-align: center; }
.player-line b { display: block; font-size: 1.35rem; line-height: 1.2; }
.player-line span { font-size: .75rem; color: var(--text-2); }
.player-line-head { margin: 16px 0 0; font-size: .95rem; }
.for-creators { margin-top: 24px; }
/* Its packs, each its name, what is in it and its two buttons (vertical, landscape), each button its own status line under it. */
.for-creators .pack-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; align-items: stretch; margin: 10px 0; }
.for-creators .pack-group { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; }
.for-creators .pack-group h3 { margin: 0; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.for-creators .pack-group > p { margin: 0; }
.for-creators .pack-buttons { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.for-creators .pack-pro { font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; color: var(--text-2); }
.for-creators .prep-pack { margin: 0; }
.for-creators .prep-pack .btn { width: 100%; white-space: normal; }
.for-creators .prep-pack [role="status"] { margin: 4px 0 0; }
.for-creators .prep-pack [role="status"]:empty { display: none; }
/* Before / After: a refusal that reads as one. */
.ba-error { padding: 10px 12px; border-left: 4px solid var(--bad, #b91c1c); background: var(--surface); color: var(--text); font-size: .95rem; line-height: 1.45; }

/* The tip bar's statement: its first sentence and the link on a phone, its first three sentences from there up (the owner's wording; the full text on About). */
@media (max-width: 600px) { .tip-more { display: none; } }
.tip-strip .wrap > span a { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* A finger gets 44 px on "How it works", as on the bar's other controls (site.css; the accessibility statement promises it). */
@media (pointer: coarse) {
  .tip-strip .wrap > span a { position: relative; z-index: 1; }
  .tip-strip .wrap > span a::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}
/* "No ads." takes the statement past one line at desktop widths: two even lines, not the link alone on the second. */
.tip-strip .wrap > span:first-child { text-wrap: balance; text-align: center; }

/* The tip bar on one line, and a second line for creators (the owner, 2026-11-04: "that same top bar fix for hoopvision
   as well with the creator portal link", as Pigskin Lab has it). The rest of the free-during-beta statement is the
   tooltip and About#access; .tip-more is hidden on every screen now. */
.tip-strip .tip-more { display: none; }
.tip-strip .wrap > span:first-child { flex-basis: auto; }
.tip-strip-creators { flex-basis: 100%; margin: 2px 0 0; padding-top: 5px; border-top: 1px solid #3a3322; text-align: center; color: #d8d2c0; }
.tip-strip-creators b { color: #f2d27a; font-weight: 700; }
.tip-strip-creators a { color: #f2d27a; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
@media (max-width: 600px) { .tip-strip-creators { font-size: .74rem; } }
@media (pointer: coarse) {
  .tip-strip-creators a { position: relative; z-index: 1; }
  .tip-strip-creators a::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}

/* The header names the site by its domain (hoopvisionlab.com, the owner, 2026-11-01): a little tighter on a tablet (681 to 900 px),
   so the brand, the Beta pill and the search, sign-in, theme and menu buttons stay on one row as they did with the name. */
@media (min-width: 681px) and (max-width: 900px) { .site-header .brand { font-size: 1.1rem; letter-spacing: .02em; } }
/* The tip bar's × beside its first line, not halfway down both (the owner, 2026-11-04). */
.tip-strip .wrap:has(.tip-strip-creators) .tip-strip-close { top: 19px; }
/* A game's live box score until the refresh loads it (public/js/live-box.js; the owner, 2026-11-07): the notice at the very top
   of the page, then the score, each period, both sides' totals and the leaders. */
.live-notice { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--brand); background: var(--surface); font-size: .92rem; }
.live-notice.on { border-left-color: var(--live-green); }
/* Green: this game, from the live feed. Red: everything from before tip-off (the owner, 2026-11-07). */
:root { --live-green: #1f9d55; --live-green-bg: #157a40; --pre-red: #c8102e; }
:root[data-theme="dark"] { --live-green: #3ecf73; --live-green-bg: #3ecf73; --pre-red: #ff6b61; }
.live-box { margin: 16px 0 8px; padding: 14px 16px; border: 3px solid var(--live-green); background: var(--surface); }
.live-label, .pregame-label { display: inline-block; margin: 0 0 10px; padding: 3px 12px; font-size: .9rem; font-weight: 800; letter-spacing: .12em; color: #fff; }
.live-label { background: var(--live-green-bg); }
/* (At the final: a neutral badge, not the live green. Audit 2026-11-08.) */
.live-label.live-final { background: #4b5563; color: #fff; }
:root[data-theme="dark"] .live-label.live-final { background: #9ca3af; color: #101010; }
/* (And the box's border with it: a final kept the live green border round a grey badge. Audit 2026-11-08.) */
.live-box[data-state="final"] { border-color: #4b5563; }
:root[data-theme="dark"] .live-box[data-state="final"] { border-color: #9ca3af; }
.live-box[data-state="final"] .live-chart-cap { color: var(--text-2); }
.pregame-label { background: var(--pre-red); }
:root[data-theme="dark"] .live-label, :root[data-theme="dark"] .pregame-label { color: #101010; }
/* The live box without dead space (the owner, 2026-11-07): the label and the clock on one line; the score in a tight block with
   the points by period beside it; then team totals, leaders and tonight vs season average as cards filling the width; the card
   buttons in one row. */
.live-label { vertical-align: middle; margin-right: 10px; }
.live-head { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; vertical-align: middle; margin: 0 0 10px; }
.live-top { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 14px 28px; align-items: center; margin: 4px 0 10px; }
/* The points by period only as wide as its numbers (the owner, 2026-11-07: no stretched sparse tables): Q1 and Q2 were 250 px
   apart across the box. Each period a fixed narrow column; the table scrolls on its own in overtime on a phone. */
.live-top { grid-template-columns: minmax(260px, 380px) minmax(0, max-content); }
.live-top .live-periods { width: auto; }
.live-top .live-periods th:not(:first-child), .live-top .live-periods td { min-width: 3.2em; padding-left: 12px; padding-right: 12px; }
.live-top .live-periods th:first-child { padding-right: 20px; }
.live-score { display: grid; gap: 2px; }
.live-side { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); padding: 4px 0; }
.live-chip { width: 14px; height: 28px; background: var(--muted); box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); }
.live-team { font-size: 1.1rem; min-width: 0; overflow-wrap: anywhere; }
.live-pts { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.live-table { border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 0; width: 100%; }
.live-table th, .live-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: right; }
.live-table th[scope="row"], .live-table thead th:first-child { text-align: left; }
.live-total { font-weight: 700; }
.live-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
/* The cards under the graphs in columns that each stack their own cards (public/js/live-box.js flow): no card is stretched to a
   neighbour's height and no column is left with a hole under a short card. */
.live-flow { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.live-flow-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.live-card { border: 1px solid var(--border); padding: 10px 12px; min-width: 0; }
.live-card h3 { margin: 0 0 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.live-card > p { margin: 6px 0 0; }
.live-leaders h4, .live-versus h4 { margin: 8px 0 2px; font-size: .95rem; }
.live-leaders h4:first-of-type, .live-versus h4:first-of-type { margin-top: 0; }
.live-leaders dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
.live-leaders dt { color: var(--muted); }
.live-leaders dd { margin: 0; }
.live-versus ul { margin: 0; padding-left: 18px; }
.live-versus li { margin: 2px 0; }
.live-avg { color: var(--muted); }
.live-cards { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.live-cards p { flex: 1 1 280px; margin: 0; }
/* What the card shows, on its own line above the buttons, not squeezed beside them (the owner, 2026-11-07). */
.live-cards p.live-cards-about { flex: 0 0 100%; }
.live-cards [role="status"]:empty { display: none; }
/* The pregame box: its label and heading on one line, the notice under them. */
.pregame-box { margin: 18px 0 8px; padding: 12px 16px; border: 3px solid var(--pre-red); }
.pregame-box > .pregame-label { vertical-align: middle; margin: 0 10px 8px 0; }
.pregame-box > h2 { display: inline-block; vertical-align: middle; margin: 0 0 8px; font-size: 1.35rem; }
.pregame-box .game-board { margin-top: 12px; }
.pregame-notice { margin: 0; padding: 8px 12px; border: 1px solid var(--border); border-left: 4px solid var(--muted); background: var(--surface); font-size: .92rem; }
main.content-pages .live-game-page .page-head > p, .live-game-page .page-head > p { max-width: none; }
/* The live graphs (public/js/live-charts.js): the lead tracker across the box, the bars as cards; the site's text colours, the
   live green for the line and the better side's bar. */
/* The Advanced card and the Customize card panel (public/js/live-box.js). */
.live-adv td small { display: block; font-size: .72rem; }
.live-advanced h3 + table, .live-advanced table + p { margin-top: 4px; }
.live-advanced h3:not(:first-child) { margin-top: 10px; }
.live-customize { flex-basis: 100%; border: 1px solid var(--border); padding: 6px 10px; }
.live-customize summary { cursor: pointer; font-weight: 700; }
.live-customize-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 14px; margin-top: 6px; }
.live-customize-body > p { grid-column: 1 / -1; margin: 0; }
.live-customize-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.live-customize-group legend { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 0; margin-bottom: 2px; }
.live-customize-group label { display: block; font-size: .85rem; line-height: 1.5; }
.live-fit { margin: 6px 0 0; }
.live-preview img { display: block; max-width: 100%; height: auto; margin-top: 8px; border: 1px solid var(--border); }
/* The live-game demo (views/live-demo.js): the replay said first, the controls kept in view. */
.live-demo-banner { margin: 8px 0; padding: 10px 12px; border: 2px dashed var(--muted); background: var(--surface); }
.live-demo-public { margin-bottom: 4px; }
/* The creators' line's own × (public/js/app.js creatorsLine), apart from the bar's. */
.tip-strip-creators { position: relative; padding-right: 32px; padding-left: 32px; }
.tip-strip-creators-close { position: absolute; right: 4px; top: 50%; transform: translateY(-40%); background: none; border: 0; color: #9a927e; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.tip-strip-creators-close:hover, .tip-strip-creators-close:focus-visible { color: #fff; }
.tip-strip-creators-close::before { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.live-demo { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 12px 0 0; padding: 8px 10px; border: 2px dashed var(--muted); background: var(--surface); font-size: .85rem; }
.live-demo-play { flex: 1 1 100%; font-variant-numeric: tabular-nums; }
/* The charts by team (public/js/live-charts.js headToHead, teamColumns): this game head to head once for both clubs, then the away
   side, then the home side. Three across on a wide screen; on a middle one the head-to-head across the top, the two clubs under
   it; one column on a phone. */
.live-teams { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.live-h2h h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.live-h2h .live-team-sec { margin-top: 4px; }
.lc-h2h { color: var(--text); }
@media (max-width: 1099px) { .live-teams { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .live-teams > .live-h2h { grid-column: 1 / -1; } }
.live-team-col h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.live-team-chip { display: inline-block; width: 6px; height: 22px; box-shadow: inset 0 0 0 1px var(--border-strong, var(--border)); }
.live-team-sec { margin-top: 10px; }
.live-team-sec h4 { margin: 0; font-size: .9rem; }
.live-team-sec .live-chart-cap { margin: 0 0 4px; }
.live-team-note { margin: 4px 0 0; }
@media (max-width: 760px) { .live-teams { grid-template-columns: minmax(0, 1fr); } }
.live-chart { margin: 0; }
.live-chart.live-lead { grid-column: 1 / -1; }
.live-chart-cap { margin: -2px 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--live-green); }
.live-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.live-lead .live-svg { max-height: 260px; }
/* The live win probability (live-charts.js winProbChart): across the box, the number now big over the curve. */
.live-chart.live-wp { grid-column: 1 / -1; }
.live-wp .live-svg { max-height: 260px; }
.live-wp-now { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; }
.live-wp-now strong { font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.live-wp-now .live-team-chip { height: 30px; }
.live-wp-final { margin: 0 0 6px; font-weight: 700; }
.live-wp-why { flex-basis: 100%; }
@media (max-width: 480px) { .live-wp-now strong { font-size: 1.5rem; } }
.live-chart figcaption { margin-top: 6px; }
.lc-grid { stroke: var(--border); stroke-width: 1; }
.lc-zero { stroke: var(--text-2, var(--text)); stroke-width: 1.5; stroke-dasharray: 4 3; }
.lc-line { fill: none; stroke: var(--live-green); stroke-width: 2.5; stroke-linejoin: round; }
.lc-dot { fill: var(--live-green); }
.lc-pt { fill: var(--live-green); opacity: .5; }
.lc-tick { fill: var(--muted); font-size: 11px; }
.lc-label { fill: var(--text); font-size: 12px; font-weight: 700; }
.lc-val { fill: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.lc-muted { fill: var(--muted); font-size: 13px; }
.lc-bar { fill: var(--muted); opacity: .45; }
.lc-bar.lc-best { fill: var(--live-green); opacity: 1; }
.lc-best-t { font-weight: 700; }
/* (A value written over the chart keeps a ring of the card's colour, so a line under it never runs through its letters.) */
.lc-halo { paint-order: stroke; stroke: var(--surface, #fff); stroke-width: 4px; stroke-linejoin: round; }
@media (max-width: 760px) { .live-top { grid-template-columns: minmax(0, 1fr); } }
/* (At 320 px the points by period kept their desktop padding, the more specific .live-top rule beating the phone one, and widened
   the page to 323 px with the score above them: narrower cells, the table its own scroller when overtime still needs more. Site
   audit 2026-11-08 round 4, H4-7.) */
@media (max-width: 680px) {
  .live-top > * { min-width: 0; max-width: 100%; }
  .live-top .live-periods { display: block; overflow-x: auto; max-width: 100%; }
  .live-top .live-periods th:not(:first-child), .live-top .live-periods td { min-width: 2.2em; padding-left: 5px; padding-right: 5px; }
  .live-top .live-periods th:first-child { padding-right: 8px; }
  .live-score, .live-side { min-width: 0; max-width: 100%; }
}
@media (max-width: 680px) { .live-box, .pregame-box { padding: 10px 10px; } .live-grid { grid-template-columns: 1fr; } .live-pts { font-size: 1.6rem; } .live-periods th, .live-periods td { padding: 4px 5px; } }
/* A two-club table on a game page (game-detail.js: a stat, then each club) sized to its numbers, not 1,270 px across with the two
   columns 400 px apart (the owner, 2026-11-07: no stretched sparse tables). Inside a club's half card it still fills the half. */
.nba-detail-fit .nba-detail-table { width: auto; min-width: min(100%, 460px); }
.nba-detail-fit .nba-detail-table th:not(:first-child), .nba-detail-fit .nba-detail-table td { min-width: 5.5em; padding-left: 18px; }
.nba-shot-team .nba-detail-fit .nba-detail-table { width: 100%; }
/* A full-width card on a game page whose body is words and tables, not a chart (where the final score came from, rebounds and
   ball security, the clubs' lines, each club's players, every meeting): as tall as what it holds. Its saved row count left 80 to
   150 px of empty card under the last table (the owner, 2026-11-07: no empty-bottomed cards). Alone in its row, so nothing beside
   it changes; charts keep their rows. */
.game-board.board.cells > .widget[style*="span 12"]:not(.answer):not(:has(.w-body.chart)):not(:has(svg.chart, canvas)) { grid-row: span 1 !important; }

/* The game's advanced box (public/js/game-detail.js advancedBox): the scoring breakdown, both sides on one scale from zero. */
.nba-adv-bars { display:grid; gap:10px; margin:8px 0 12px; }
.nba-adv-row { display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(0,2fr) minmax(0,2fr); gap:12px; align-items:center; }
.nba-adv-label { font-weight:600; font-size:14px; }
.nba-adv-bar { display:grid; grid-template-columns:42px minmax(0,1fr) 34px; gap:8px; align-items:center; font-variant-numeric:tabular-nums; font-size:14px; }
.nba-adv-team { color:var(--muted); font-size:12px; font-weight:700; }
.nba-adv-track { display:block; height:14px; background:var(--surface-2); border-radius:3px; overflow:hidden; }
.nba-adv-fill { display:block; height:100%; border-radius:3px; }
.nba-adv-bar.a .nba-adv-fill { background:#0d6680; } .nba-adv-bar.b .nba-adv-fill { background:#b8571f; }
.nba-adv-val { text-align:right; font-weight:700; }
@media (max-width:700px) { .nba-adv-row { grid-template-columns:minmax(0,1fr); gap:4px; } .nba-adv-label { font-size:13px; } }
:root[data-theme="dark"] .nba-adv-bar.a .nba-adv-fill { background:#3fa7c8; } :root[data-theme="dark"] .nba-adv-bar.b .nba-adv-fill { background:#e08a4f; }
/* The shot chart (public/js/shotchart.js): the court beside its zones, one above the other on a narrow widget or a phone. */
.w-body.shotchart { overflow:auto; container-type:inline-size; }
.sc-wrap { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; align-items:start; padding:4px 2px; }
@container (max-width:640px) { .sc-wrap { grid-template-columns:minmax(0,1fr); } }
@media (max-width:700px) { .sc-wrap { grid-template-columns:minmax(0,1fr); } }
.sc-svg { display:block; width:100%; height:auto; max-height:520px; }
.sc-court rect, .sc-court circle, .sc-court path, .sc-court line { stroke:var(--border-strong); stroke-width:2; }
.sc-made { fill:#1f8a4c; fill-opacity:.8; stroke:#1f8a4c; stroke-width:1; }
.sc-miss { fill:none; stroke:#c8322f; stroke-opacity:.75; stroke-width:1.4; }
:root[data-theme="dark"] .sc-made { fill:#43c27a; stroke:#43c27a; } :root[data-theme="dark"] .sc-miss { stroke:#f06a5f; }
.sc-legend { display:flex; flex-wrap:wrap; gap:14px; font-size:13px; margin-top:6px; align-items:center; }
.sc-key { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:6px; vertical-align:-1px; }
.sc-key.sc-made { background:#1f8a4c; } .sc-key.sc-miss { border:1.5px solid #c8322f; box-sizing:border-box; }
:root[data-theme="dark"] .sc-key.sc-made { background:#43c27a; } :root[data-theme="dark"] .sc-key.sc-miss { border-color:#f06a5f; }
.sc-side .nba-detail-table th, .sc-side .nba-detail-table td { padding:7px 8px; }
.w-body.nba-adv-body { container-type:inline-size; }
.nba-adv-top { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px; align-items:start; }
@container (max-width:900px) { .nba-adv-top { grid-template-columns:minmax(0,1fr); gap:8px; } }
.nba-adv-hustle .nba-detail-scroll { margin-top:0; }
.nba-adv-hustle .nba-detail-table th, .nba-adv-hustle .nba-detail-table td { padding:6px 10px; }
/* (Narrow: the bars, then the clubs' hustle table, then each player's box.) */
@container (max-width:900px) { .nba-adv-left { display:contents; } .nba-adv-bars { order:1; } .nba-adv-hustle { order:2; } .nba-adv-left > details { order:3; } }
.nba-adv-defs { margin:10px 0 4px; font-size:13px; }
.nba-adv-defs summary { cursor:pointer; font-weight:700; min-height:32px; display:list-item; }
.nba-adv-defs dl { display:grid; grid-template-columns:minmax(120px,max-content) minmax(0,1fr); gap:4px 14px; margin:6px 0 0; }
.nba-adv-defs dt { font-weight:600; } .nba-adv-defs dd { margin:0; color:var(--muted); }
@media (max-width:700px) { .nba-adv-defs dl { grid-template-columns:minmax(0,1fr); } .nba-adv-defs dd { margin-bottom:6px; } }
.adv-foot { margin-top:10px; }
/* The club's advanced tiles fill whole rows: five a row (ten stats, eight before hustle was kept), two on a phone. */
.adv-tiles .tiles { grid-template-columns:repeat(5, minmax(0,1fr)); }
.adv-tiles .tiles:has(> .tile:nth-child(8):last-child) { grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:700px) { .adv-tiles .tiles, .adv-tiles .tiles:has(> .tile:nth-child(8):last-child) { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.w-body.adv-tiles { overflow:visible; }
.w-body.shotchart-page { padding:0; }
/* (A phone: the zone names wrap and the cells tighten, so all five columns fit without a sideways scroll.) */
.sc-side .nba-detail-table th[scope="row"] { white-space:normal; }
@media (max-width:700px) { .sc-side .nba-detail-table { font-size:12.5px; } .sc-side .nba-detail-table th, .sc-side .nba-detail-table td { padding:6px 4px; } }

/* A narrow table and its note side by side, no blank half card (audit 2026-11-08). */
.nba-detail-pair { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 28px; }
.nba-detail-pair > .nba-detail-scroll { flex: 0 1 auto; }
.nba-detail-pair > p { flex: 1 1 240px; max-width: 52ch; margin-top: 14px; }
/* (No hustle table for the game: the bars and the players take the whole width, no blank column. Audit 2026-11-08.) */
.nba-adv-top:has(> :only-child) { grid-template-columns: minmax(0, 1fr) !important; }
.nba-adv-top:has(> :only-child) .nba-adv-bars { max-width: 760px; }

/* Phones: a table's club, season and position under the name, the stat columns in view (audit 2026-11-08). */
.tbl .meta-under { display: none; }
@media (max-width: 600px) {
  .tbl th.meta-col, .tbl td.meta-col { display: none; }
  .tbl .meta-under { display: block; font-size: .72rem; color: var(--muted); font-weight: 400; }
}
/* A game page's words card (the preview's text, an answer) one row, as tall as its words, never stretched to a fixed span: ~196 px of
   empty card under the preview's last line (audit 2026-11-08). */
.board.cells.game-board > .widget.answer { grid-row: auto / span 1 !important; height: auto !important; }
.board.cells.game-board > .widget.answer .w-body { height: auto; overflow: visible; }

/* Signed out with nothing ranked: the stage as tall as its words (audit 2026-11-08). */
.rankings-quiet { min-height: 0 !important; height: auto !important; }

/* The live box's card buttons and the replay controls wrap on a phone: "REPLAY card (not live) — landscape (1920 × 1080)" kept on one
   line (.btn is nowrap) widened a 320 px page to 357 px once the replay drew its box (Codex audit 2026-11-08, /live-demo?i=12). */
.live-cards .btn, .live-demo .btn { white-space: normal; height: auto; min-height: 30px; max-width: 100%; text-align: left; overflow-wrap: anywhere; }
/* A box that scrolls, reached by the keyboard (charts.js scrollable, table.js): its ring shows (Codex audit 2026-11-08). */
.scroll-focus:focus { outline: none; }
.scroll-focus:focus-visible, .nba-detail-scroll:focus-visible, .schedule-table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Photo-credit links read as links, not grey text: underlined and in the link colour (Codex audit 2026-11-08: hard to tell apart). */
.photo-credit a, .gfx-credit a, .rankings-credits a, #photos-note a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.photo-credit .muted a, .gfx-credit a { color: var(--link); }