/* NBA slate — module CSS (plan §3.7–§3.10). Global tokens only; the status chips reuse the --status-* tiers of css/styles.css.
   Traps handled here: form 300px, button 100%, input/select/checkbox 100%, explicit :hover on every custom button. */

/* Unconfirmed predictions are brown (5.9:1 light, 7.3:1 dark on the surface); defined here and in both dark scopes. */
:root {
    --nba-unconfirmed:        #8a5a2b;
    --nba-unconfirmed-soft:   #f6ece2;
    --nba-unconfirmed-border: #d9bfa3;
}
:root[data-theme="dark"] {
    --nba-unconfirmed:        #d4a373;
    --nba-unconfirmed-soft:   #2e2419;
    --nba-unconfirmed-border: #6b5138;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --nba-unconfirmed:        #d4a373;
        --nba-unconfirmed-soft:   #2e2419;
        --nba-unconfirmed-border: #6b5138;
    }
}

.nba { max-width: var(--container-max); }

/* ── Cards ────────────────────────────────────────────────────────────────────────────── */

.nba-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 12px 16px;
    margin-bottom: 12px;
}

.nba-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.nba-head-status { margin-top: 10px; }

/* ── Buttons, tabs, inputs (compact — never 44 px) ───────────────────────────────────── */

.nba-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    height: 30px;
    padding: 0 12px;
    margin: 0;
    box-sizing: border-box;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}

.nba-btn:hover,
.nba-btn:focus-visible { background: var(--bg-surface-alt); color: var(--text-primary); text-decoration: none; }

.nba-btn.is-active,
.nba-btn.is-active:hover,
.nba-btn.is-active:focus-visible { background: var(--color-primary); color: var(--text-inverse); border-color: var(--color-primary); }

.nba-btn-icon { width: 30px; padding: 0; font-size: 1.1rem; }
.nba-btn-xs   { height: 24px; padding: 0 8px; font-size: var(--font-size-xs); font-weight: 600; }

.nba-date-nav { display: flex; align-items: center; gap: 6px; }
.nba-login-link { font-size: var(--font-size-sm); white-space: nowrap; color: var(--text-link); }   /* guests: where a login-only control would sit */

.nba-date-form {
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.nba-date-input {
    width: auto;
    height: 30px;
    margin: 0;
    padding: 0 8px;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}

.nba-tabs { display: inline-flex; gap: 4px; padding: 3px; background: var(--bg-surface-alt); border-radius: var(--radius-pill); }

.nba-tab {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
}

.nba-tab:hover { color: var(--text-primary); text-decoration: none; }
.nba-tab.is-active { background: var(--color-primary); color: var(--text-inverse); }

.nba-counts { margin: 0; font-size: var(--font-size-sm); color: var(--text-secondary); }
.nba-counts:empty { display: none; }
.nba-slate-msg { margin: 8px 0 0; font-size: var(--font-size-md); color: var(--text-primary); }
.nba-slate-msg a { color: var(--text-link); }
.nba-slate-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nba-slate-chips:empty { display: none; }

/* ── Status chips (coinbase .is-<tier> shape) ────────────────────────────────────────── */

.nba-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
}

.nba-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.nba-chip .nba-time { font-weight: 500; opacity: 0.9; }

.nba-chip.is-fresh   { color: var(--status-fresh-text);   background: var(--status-fresh-bg);   border-color: var(--status-fresh-border); }
.nba-chip.is-slow    { color: var(--status-slow-text);    background: var(--status-slow-bg);    border-color: var(--status-slow-border); }
.nba-chip.is-unconfirmed { color: var(--nba-unconfirmed); background: var(--nba-unconfirmed-soft); border-color: var(--nba-unconfirmed-border); }
.nba-chip.is-delayed { color: var(--status-delayed-text); background: var(--status-delayed-bg); border-color: var(--status-delayed-border); }
.nba-chip.is-offline { color: var(--status-offline-text); background: var(--status-offline-bg); border-color: var(--status-offline-border); }
.nba-chip.is-pending { color: var(--text-secondary); background: var(--color-primary-soft); border-color: var(--color-primary-soft); }
.nba-chip.is-final   { color: var(--color-success-strong); background: var(--color-success-soft); border-color: var(--color-success-border); }
.nba-chip.is-muted   { color: var(--text-muted); background: transparent; border-color: var(--border); }
.nba-chip.is-muted .nba-chip-dot { display: none; }

/* ── Banners ─────────────────────────────────────────────────────────────────────────── */

.nba-banners:empty { display: none; }

.nba-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-surface-alt);
    color: var(--text-primary);
    font-size: var(--font-size-md);
}

.nba-banner-new    { background: var(--color-primary-soft); border-color: var(--color-primary); }
.nba-banner-failed { background: var(--status-offline-bg); border-color: var(--status-offline-border); color: var(--status-offline-text); }

/* ── Filters ─────────────────────────────────────────────────────────────────────────── */

.nba-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.nba-filters .nba-f,
.nba-filters .nba-check,
.nba-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

.nba-filters select,
.nba-filters input[type="number"],
.nba-filters input[type="search"] {
    width: auto;
    height: 30px;
    margin: 0;
    padding: 0 8px;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.nba-filters input[type="number"] { width: 72px; }
.nba-search { min-width: 180px; }
.nba-filters input[type="checkbox"],
.nba-flag input[type="checkbox"] { width: auto; height: auto; margin: 0; }

.nba-flags {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding-left: 8px;
    border-left: 1px solid var(--border-soft);
}
.nba-flags-cap { font-size: var(--font-size-xs); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
/* The i mark of a filter hint sits inside its label (the label's gap spaces it). */
.nba-f-info { margin: 0; }
.nba-clear { margin: 0 0 0 auto; }

.nba-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nba-chips:empty { display: none; }

.nba-fchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--text-link);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.nba-fchip-x {
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-link);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nba-fchip-x:hover,
.nba-fchip-x:focus-visible { background: var(--color-primary); color: var(--text-inverse); }

/* ── Toolbar + table ─────────────────────────────────────────────────────────────────── */

.nba-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.nba-toolbar .nba-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--text-secondary); }
.nba-toolbar input[type="checkbox"] { width: auto; margin: 0; }
.nba-sort-status { font-size: var(--font-size-xs); color: var(--text-muted); }
.nba-sort-status:empty { display: none; }
.nba-status { margin: 0 0 8px; font-size: var(--font-size-sm); color: var(--text-secondary); }
.nba-status:empty { display: none; }
.nba-empty { margin: 10px 0 0; font-size: var(--font-size-sm); color: var(--text-muted); text-align: center; }

/* One scroll container: the sticky header and the sticky Player column both stick against it, not the page. */
.nba-scroll {
    max-height: 75vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.nba-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}

.nba-table th,
.nba-table td {
    padding: 6px;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    background: var(--bg-surface);
}

.nba-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-surface-alt);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-primary);
    padding: 0;
}

.nba-table thead th .nba-th-text { display: block; padding: 8px; }

.nba-th-btn {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.nba-table thead th.nba-num .nba-th-btn,
.nba-table thead th.nba-num .nba-th-text { text-align: right; }

.nba-th-btn:hover,
.nba-th-btn:focus-visible { background: var(--color-primary-soft); color: var(--text-primary); }

/* Header label + its info mark; the mark pins the hint on a tap, the label sorts. */
.nba-th-wrap { display: flex; align-items: center; }
.nba-th-wrap .nba-th-btn,
.nba-th-wrap .nba-th-text { flex: 1 1 auto; width: auto; min-width: 0; }
.nba-th-wrap .nba-th-btn:not(:last-child),
.nba-th-wrap .nba-th-text:not(:last-child) { padding-right: 2px; }
.nba-table thead th .nba-th-text:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

.nba-th-info {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0 6px 0 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-family: Georgia, serif;
    font-size: 10px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nba-th-info:hover,
.nba-th-info:focus-visible { background: var(--color-primary-soft); color: var(--text-primary); border-color: var(--text-link); }
/* A mouse reads a header hint on hover, so the label is dotted (as the drawer's hinted labels) and the i mark, a touch screen's
   tap target, is dropped: every column gets ~22 px back. */
@media (hover: hover) and (pointer: fine) {
    .nba-th-wrap .nba-th-info { display: none; }
    .nba-th-wrap .nba-th-btn:not(:last-child),
    .nba-th-wrap .nba-th-text:not(:last-child) { padding-right: 8px; }
    .nba-th-wrap:has(.nba-th-info) .nba-th-label,
    .nba-th-wrap:has(.nba-th-info) .nba-th-text { text-decoration: underline dotted; text-underline-offset: 3px; }
}

/* A column a set filter added (not in the chosen set): a small "filter" mark in its header and in the chooser. */
.nba-filter-mark {
    flex: 0 0 auto;
    margin: 0 4px 0 0;
    padding: 0 4px;
    border: 1px solid var(--text-link);
    border-radius: var(--radius-pill);
    color: var(--text-link);
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
}
/* Header labels may take two lines and an over-rate wraps its share under its count, so the sixteen default columns fit
   1280 px without the table scrolling (and a filter's extra columns fit before it does). */
.nba-table thead .nba-th-btn,
.nba-table thead .nba-th-text { white-space: normal; }
.nba-table td[data-col$="_rate"] { white-space: normal; }
.nba-nw { white-space: nowrap; }
.nba-ccol.is-filter-col::after { content: 'shown by filter'; font-size: var(--font-size-xs); color: var(--text-link); }

/* A drawer label with a hint: dotted like the unconfirmed cue, focusable, tap to pin. */
.nba-hint { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.nba-hint:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-radius: 2px; }

/* The one floating hint (position: fixed, so the table's scroll box never clips it). */
.nba-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    box-sizing: border-box;
    max-width: min(300px, calc(100vw - 16px));
    padding: 6px 9px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
}
.nba-table thead th[aria-sort="ascending"],
.nba-table thead th[aria-sort="descending"] { background: var(--color-primary-soft); }

/* Sticky Player column: opaque backgrounds and z-index layers (corner > header > first column > body). */
.nba-table .nba-sticky { position: sticky; left: 0; z-index: 2; border-right: 1px solid var(--border); min-width: 160px; }
.nba-table thead th.nba-sticky { z-index: 4; }
.nba-table tbody tr:hover td { background: var(--bg-surface-alt); }
.nba-table .nba-num { text-align: right; }
.nba-table tbody tr.is-floored td { color: var(--text-muted); }
.nba-table tbody tr.is-hit td { background: var(--color-success-soft); }

.nba-player { display: flex; flex-direction: column; gap: 2px; white-space: normal; min-width: 160px; }
.nba-name { color: var(--text-primary); }
.nba-sub { font-size: var(--font-size-xs); color: var(--text-muted); }
.nba-player .nba-chip { align-self: flex-start; margin-top: 2px; }

.nba-line-top { display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; }
.nba-line-val { font-weight: 600; }
.nba-move { font-size: var(--font-size-xs); font-weight: 600; }
.nba-move.is-up   { color: var(--color-success-strong); }
.nba-move.is-down { color: var(--color-danger-strong); }
.nba-line-range { font-size: var(--font-size-xs); color: var(--text-muted); white-space: nowrap; }
.nba-prices { font-size: var(--font-size-xs); color: var(--text-muted); }
/* Line cell: "o -128" over "u +100" keeps the column narrow; the 375 px card puts them side by side. */
.nba-ou { display: flex; flex-direction: column; align-items: flex-end; }
.nba-ou span { white-space: nowrap; }
.nba-line-stale .nba-line-val { font-style: italic; color: var(--text-secondary); }

/* Diff % is weighted by MAGNITUDE in one hue (text only); direction is not good or bad. */
.nba-band-2 { font-weight: 600; }
.nba-band-3 { font-weight: 700; color: var(--text-link); }

/* Over-rates carry meaning above / below 50 %, so their text uses the success / danger colours (never a cell fill). */
.nba-rate-hi { color: var(--color-success-strong); }
.nba-rate-lo { color: var(--color-danger-strong); }
.nba-small-sample { font-style: italic; }

.nba-lean {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

/* Colour plus a dotted underline, so the cue survives without colour; the hint (hover, focus, tap) holds the reason. */
.nba-unconf { color: var(--nba-unconfirmed); text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.nba-unconf:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-radius: 2px; }
.nba-chip-hint { cursor: help; }
.nba-chip-hint:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.nba-unknown { color: var(--text-muted); }
.nba-pending { color: var(--text-muted); font-style: italic; }
/* Under Actual: the lean's verdict (or Push / Void); the word and mark carry it, the colour repeats it. */
.nba-hit,
.nba-hit-res { white-space: nowrap; }
.nba-table td[data-col="actual"] { white-space: normal; }
.nba-hit.is-hit  { color: var(--color-success-strong); font-weight: 600; }
.nba-hit.is-miss { color: var(--color-danger-strong); }
.nba-hit-note { margin: 8px 0 0; }
.nba-mono { font-family: var(--font-family-mono); font-size: var(--font-size-xs); }
.nba-time { white-space: nowrap; }

.nba-group-row td { background: var(--bg-surface-alt); font-weight: 600; color: var(--text-primary); }
.nba-group-row .nba-chip { margin-left: 8px; }
/* The game stays in view while the table scrolls sideways. */
.nba-group-label { position: sticky; left: 10px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.nba-group-row .nba-game-label { font-weight: 700; }
.nba-group-row.is-muted td { color: var(--text-muted); font-weight: 500; }

/* Skeleton rows while the pred layer loads */
.nba-skel td span { display: block; height: 12px; width: 70%; border-radius: var(--radius-sm); background: var(--bg-surface-alt); }
.nba-skel td:first-child span { width: 140px; }

/* The per-row More button and the cell labels exist for the mobile cards only. */
.nba-more-cell,
.nba-cell-label { display: none; }

/* ── What the numbers mean: the plain-words key above the filters (open until folded, remembered per browser) ── */

.nba-explain-sum { font-size: var(--font-size-md); font-weight: 600; color: var(--text-primary); cursor: pointer; }
.nba-explain-sum:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.nba-explain-lead { margin: 6px 0 8px; font-size: var(--font-size-sm); color: var(--text-secondary); }
.nba-explain-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; margin: 0; }
.nba-explain-item dt { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
.nba-explain-item dd { margin: 0; font-size: var(--font-size-sm); color: var(--text-secondary); }
.nba-explain-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 10px 0 0;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ── Column chooser dialog ───────────────────────────────────────────────────────────── */

.nba-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px 16px;
    background: rgba(0, 0, 0, 0.45);
    overflow-y: auto;
}

.nba-dialog {
    position: relative;
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 18px 22px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    outline: none;
}

.nba-dialog-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nba-dialog-close:hover,
.nba-dialog-close:focus-visible { background: var(--bg-surface-alt); color: var(--text-primary); }

.nba-dialog-head { display: flex; align-items: center; gap: 12px; margin: 0 36px 10px 0; }
.nba-dialog-title { margin: 0; font-size: 1.05rem; }

.nba-cgroup { margin: 0 0 8px; padding: 6px 10px 8px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.nba-cgroup legend {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
}
.nba-cgroup-list { display: flex; flex-wrap: wrap; gap: 4px 14px; }

.nba-ccol { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--text-primary); cursor: pointer; }
.nba-ccol input[type="checkbox"] { width: auto; height: auto; margin: 0; }

/* ── Column guide: fixed head (title + search), scrolling list; a bottom sheet on phones ─ */

.nba-dialog.nba-guide { display: flex; flex-direction: column; max-width: 680px; padding: 0; overflow: hidden; }
.nba-guide-top { padding: 16px 20px 6px; border-bottom: 1px solid var(--border-soft); }
.nba-guide-top .nba-dialog-title { margin: 0 36px 8px 0; }
.nba-guide-top .nba-pl-note { margin: 0 0 4px; }

.nba-guide-search {
    width: 100%;
    height: 32px;
    margin: 0 0 6px;
    padding: 0 10px;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}

.nba-guide-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 20px 16px; }
.nba-guide-h { margin: 12px 0 2px; font-size: var(--font-size-sm); color: var(--text-secondary); }
.nba-guide-list { margin: 0; }
.nba-guide-row { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 2px 12px; padding: 5px 0; }
.nba-guide-row:not(:last-child) { border-bottom: 1px solid var(--border-soft); }
.nba-guide-row dt { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); }
.nba-guide-row dd { margin: 0; font-size: var(--font-size-sm); color: var(--text-secondary); }

/* ── Toolbar homes, Confirmed only, Export (plan §3.6–§3.7) ───────────────────────────── */

.nba-filter-head { display: none; }
.nba-export { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; }

.nba-export-scope,
.nba-dialog input[type="date"] {
    width: auto;
    height: 30px;
    margin: 0;
    padding: 0 8px;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.nba-sort-status { margin: 0 0 8px; text-align: right; }
.nba-btn[aria-busy="true"] { cursor: progress; opacity: 0.7; }
.nba-btn-primary { background: var(--color-primary); color: var(--text-inverse); border-color: var(--color-primary); }
.nba-btn-primary:hover,
.nba-btn-primary:focus-visible { background: var(--color-primary-hover); color: var(--text-inverse); }

/* Player name opener: a real button that reads as the name */
.nba-link {
    display: inline;
    width: auto;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--text-link);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.nba-link:hover,
.nba-link:focus-visible { background: transparent; color: var(--text-link); text-decoration: underline; }

/* ── Export date-range dialog ───────────────────────────────────────────────────────── */

.nba-dialog-sm { max-width: 460px; }

.nba-export-form {
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.nba-export-dates { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
.nba-export-dates .nba-f { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--text-secondary); }
.nba-export-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 10px;
    padding: 6px 10px 8px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
}
.nba-export-cols legend { padding: 0 4px; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary); }
.nba-export-cols .nba-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--text-primary); }
.nba-export-cols input[type="radio"] { width: auto; height: auto; margin: 0; }
.nba-export-error { margin: 0 0 8px; font-size: var(--font-size-sm); color: var(--color-danger-strong); }
.nba-export-error:empty { display: none; }
.nba-export-actions { display: flex; gap: 8px; }

/* ── Player drawer / sheet (plan §3.4) ──────────────────────────────────────────────── */

.nba-scrim { position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, 0.45); }

.nba-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 16px 18px 20px;
    background: var(--bg-surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    outline: none;
}

.nba-drawer .nba-status { margin-right: 32px; }

.nba-pl-head { margin: 0 32px 10px 0; }
.nba-pl-name { margin: 0 0 2px; font-size: 1.15rem; }
.nba-pl-sub { margin: 0 0 6px; font-size: var(--font-size-sm); color: var(--text-secondary); }
.nba-pl-head .nba-chip { margin-bottom: 8px; }
.nba-pl-summary { margin: 0 0 10px; font-size: var(--font-size-sm); line-height: 1.5; color: var(--text-primary); }
.nba-pl-stats { margin: 0 0 8px 10px; vertical-align: middle; }

.nba-pl-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.nba-pl-fact { display: flex; flex-direction: column; }
.nba-pl-fact dt { font-size: var(--font-size-xs); color: var(--text-muted); }
.nba-pl-fact dd { margin: 0; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.nba-pl-rates { padding: 8px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }

.nba-pl-sec { margin-top: 14px; container: nba-pl / inline-size; }
.nba-pl-h { margin: 0 0 6px; font-size: var(--font-size-md); }
.nba-pl-note { margin: 0 0 6px; font-size: var(--font-size-xs); color: var(--text-secondary); }
.nba-pl-note a { color: var(--text-link); }

.nba-pl-scroll { overflow-x: auto; }
.nba-pl-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.nba-pl-table th,
.nba-pl-table td { padding: 4px 6px; border-bottom: 1px solid var(--border-soft); text-align: left; white-space: nowrap; }
.nba-pl-table th { font-weight: 600; color: var(--text-secondary); background: var(--bg-surface-alt); }
.nba-pl-table .nba-num { text-align: right; }
.nba-pl-table tr.is-sel td { background: var(--color-primary-soft); font-weight: 600; }
.nba-pl-ext { color: var(--text-link); white-space: nowrap; }
.nba-pl-tag { display: inline-block; max-width: 9em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* Narrow drawer / phone: each Record row is a fixed grid (columns align across rows) and the model tag takes its own line. */
@container nba-pl (max-width: 520px) {
    .nba-pl-record,
    .nba-pl-record thead,
    .nba-pl-record tbody { display: block; }
    .nba-pl-record tr { display: grid; grid-template-columns: 4.6em 3em repeat(3, minmax(0, 1fr)) 5.2em 2.6em; }
    .nba-pl-record th,
    .nba-pl-record td { min-width: 0; padding: 4px; overflow: hidden; text-overflow: ellipsis; }
    .nba-pl-record thead th:last-child { display: none; }
    .nba-pl-record td:not(:last-child) { border-bottom: 0; }
    .nba-pl-record td:last-child { grid-column: 1 / -1; padding-top: 0; color: var(--text-muted); }
    .nba-pl-record .nba-pl-tag { max-width: 100%; }
}

/* 320 px: Opp moves to the tag line so Line / Prediction / Actual keep readable headers; "· this game" may wrap. */
@container nba-pl (max-width: 330px) {
    .nba-pl-record tr { grid-template-columns: 4.2em repeat(3, minmax(0, 1fr)) 4.4em 2.4em; }
    .nba-pl-record th,
    .nba-pl-record td { padding: 4px 3px; }
    .nba-pl-record thead th:nth-child(2) { display: none; }
    .nba-pl-record td:nth-child(2) { grid-row: 2; grid-column: 1; padding-top: 0; color: var(--text-muted); }
    .nba-pl-record td:last-child { grid-row: 2; grid-column: 2 / -1; }
    .nba-pl-table tr.is-sel td:first-child { white-space: normal; }
}

.nba-strip { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 0 6px; }
.nba-bar { fill: var(--color-primary); }
.nba-bar.is-over { fill: var(--color-success-strong); }
.nba-bar.is-under { fill: var(--color-danger-strong); }
.nba-bar.is-push { fill: var(--text-muted); }
.nba-strip-val,
.nba-strip-date { font-size: 8px; text-anchor: middle; fill: var(--text-secondary); }
.nba-strip-val { paint-order: stroke; stroke: var(--bg-surface); stroke-width: 3px; stroke-linejoin: round; }
.nba-strip-axis { stroke: var(--border); stroke-width: 1; }
.nba-strip-rule { stroke: var(--text-primary); stroke-width: 1; stroke-dasharray: 4 3; }
.nba-strip-rule-label { font-size: 8px; font-weight: 600; text-anchor: end; fill: var(--text-primary); }
.nba-bar.is-sel { stroke: var(--text-primary); stroke-width: 2; }
.nba-strip-date.is-sel { font-weight: 700; fill: var(--text-primary); }

.nba-pl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.nba-player-page .nba-card { max-width: 720px; }

/* ── Mobile: stacked cards (plan §3.7) ────────────────────────────────────────────────── */

@media (max-width: 720px) {
    .nba-card { padding: 10px 12px; }
    .nba-head-row { gap: 8px 10px; }
    .nba-search { min-width: 0; flex: 1 1 140px; }
    .nba-flags { border-left: 0; padding-left: 0; }
    .nba-clear { margin: 0; }

    .nba-scroll { max-height: none; overflow: visible; border: 0; border-radius: 0; }
    .nba-table thead { display: none; }

    .nba-table,
    .nba-table tbody,
    .nba-table tr,
    .nba-table td {
        box-sizing: border-box;
        display: block;
        width: 100%;
    }

    .nba-table tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px 10px;
        padding: 8px 10px;
        margin-bottom: 8px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg-surface);
    }

    .nba-table td {
        position: static;
        padding: 0;
        border: 0;
        white-space: normal;
        background: transparent;
        min-width: 0;
        text-align: left;
    }

    /* The card label is a real button: dotted like every hinted label, a tap pins the column's hint. */
    .nba-cell-label {
        display: block;
        width: auto;
        max-width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--text-muted);
        font-family: inherit;
        font-size: var(--font-size-xs);
        font-style: normal;
        font-weight: 400;
        line-height: 1.4;
        text-align: left;
        text-decoration: underline dotted;
        text-underline-offset: 3px;
        cursor: help;
    }
    .nba-cell-label:hover,
    .nba-cell-label:focus-visible { background: transparent; color: var(--text-primary); }
    .nba-table td[data-col="player"] { grid-column: 1 / 3; order: 0; }
    .nba-table td[data-col="lean"] { order: 1; justify-self: end; align-self: start; text-align: right; }
    .nba-table td[data-col="lean"] .nba-cell-label { margin-left: auto; }
    .nba-table td[data-col="line"] { order: 2; }
    .nba-table td[data-col="pred"] { order: 3; }
    .nba-table td[data-col="diff_pct"] { order: 4; }
    .nba-table td[data-col="l5_rate"] { order: 5; }
    .nba-table td[data-col="l10_rate"] { order: 6; }
    .nba-table td[data-col="season_rate"] { order: 7; }
    .nba-table td[data-col="actual"] { order: 4; }
    .nba-table td[data-col="minutes"] { order: 4; }
    .nba-table td.nba-sticky { border-right: 0; }
    .nba-table tbody tr:hover td { background: transparent; }
    .nba-line-top { justify-content: flex-start; }
    .nba-ou { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }

    /* Only the emphasised values show until More ▾ (one selector, no whitespace between the :not() chain) */
    .nba-table td:not([data-col="player"], [data-col="lean"], [data-col="line"], [data-col="pred"], [data-col="diff_pct"],
                      [data-col="actual"], [data-col="minutes"], [data-col="l5_rate"], [data-col="l10_rate"], [data-col="season_rate"],
                      .nba-more-cell) {
        display: none;
        order: 10;
    }
    .nba-table tr.is-open td { display: block; }
    .nba-table td.is-filter-col { display: block; }   /* a filter-added column shows on the card without More ▾ */
    .nba-table td.nba-num { text-align: left; }
    .nba-more-cell { display: block; grid-column: 1 / -1; order: 99; }
    .nba-table tr.is-hit td { background: transparent; }
    .nba-table tr.is-hit { background: var(--color-success-soft); }

    .nba-table tr.nba-group-row { display: block; padding: 6px 10px; }
    .nba-group-label { position: static; }
    .nba-table tr.nba-group-row td { display: block; }
    .nba-table tr.nba-skel { display: block; }
    .nba-table .nba-skel td { display: block; padding: 4px 0; }   /* outranks the td:not() reveal rule above */

    .nba-overlay { padding: 12px 8px; }

    /* One card: the filter header carries the toolbar; the filter body collapses (closed by default). */
    .nba-filter-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .nba-filter-card.is-collapsed .nba-filter-body { display: none; }
    .nba-filter-body { margin-top: 10px; }
    .nba-toolbar-slot[data-nba-toolbar-mobile] { display: contents; }
    .nba-toolbar-slot[data-nba-toolbar-mobile] .nba-toolbar { margin: 0; gap: 8px 10px; flex: 1 1 100%; min-width: 0; }
    .nba-export { margin: 0; flex: 1 1 100%; min-width: 0; }
    .nba-export-scope { flex: 1 1 auto; min-width: 0; }
    .nba-sort-status { text-align: left; }

    .nba-drawer { width: 100%; border-left: 0; padding: 14px 12px 18px; }
    .nba-dialog { padding: 14px 12px 16px; border-radius: var(--radius-md); }

    .nba-guide-overlay { padding: 0; align-items: flex-end; overflow: hidden; }
    .nba-dialog.nba-guide { max-width: none; max-height: 88vh; padding: 0; border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .nba-guide-top { padding: 14px 12px 6px; }
    .nba-guide-body { padding: 2px 12px 16px; }
    .nba-guide-row { grid-template-columns: minmax(0, 1fr); }

    /* Phone: one run-in line per term ("Line FanDuel's number ..."), so the key stays short. */
    .nba-explain-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .nba-explain-item dt { display: inline; margin-right: 4px; }
    .nba-explain-item dd { display: inline; }
}

/* 320 px: ‹ date › Today fits inside the card padding. */
@media (max-width: 360px) {
    .nba-date-nav { gap: 4px; }
    .nba-date-input { padding: 0 6px; }
    .nba-date-nav .nba-btn:not(.nba-btn-icon) { padding: 0 8px; }
}

/* ── Bounds error + Advanced filters (one card with the quick filters) ─────────────────── */

.nba-bounds-err { margin: 6px 0 0; font-size: var(--font-size-sm); color: var(--color-danger-strong); }
.nba-bounds-err:empty { display: none; }
.nba-filters input[aria-invalid="true"] { border-color: var(--color-danger-strong); }

.nba-adv { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.nba-adv-sum {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nba-adv-sum:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

.nba-adv-row,
.nba-adv-actions,
.nba-adv-cond,
.nba-adv-add,
.nba-compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.nba-adv-row { margin-top: 8px; }
.nba-adv-actions { margin-top: 8px; }

.nba-adv .nba-f,
.nba-compare-bar .nba-f { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--text-secondary); }

.nba-adv select,
.nba-adv input[type="number"],
.nba-adv input[type="text"],
.nba-compare-bar select,
.nba-compare-bar input[type="number"] {
    width: auto;
    max-width: 100%;
    height: 30px;
    margin: 0;
    padding: 0 8px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.nba-adv input[type="number"],
.nba-compare-bar input[type="number"] { width: 80px; }
.nba-adv-name { width: 140px; }
.nba-adv-row select[data-nba-adv-preset] { max-width: 420px; }

.nba-adv-builder { margin-top: 8px; }
.nba-adv-builder:empty { display: none; }
.nba-adv-group { display: flex; flex-direction: column; gap: 6px; }
.nba-adv-group .nba-adv-group { margin-left: 12px; padding: 6px 0 6px 10px; border-left: 2px solid var(--border); }
.nba-adv-cond select[data-part="f"],
.nba-adv-cond select[data-part="t"] { max-width: 240px; }
.nba-adv-incomplete input,
.nba-adv-incomplete select[data-part="v"] { border-style: dashed; }

.nba-adv-x {
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nba-adv-x:hover,
.nba-adv-x:focus-visible { background: var(--bg-surface-alt); color: var(--text-primary); }
.nba-btn:disabled { cursor: not-allowed; opacity: 0.55; }

.nba-adv-line { margin: 8px 0 0; font-size: var(--font-size-sm); color: var(--text-secondary); }
.nba-adv-line:empty { display: none; }
.nba-adv-conflict { color: var(--status-slow-text); }
.nba-adv-summary { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 0 0; font-size: var(--font-size-sm); }
.nba-adv-summary:empty { display: none; }
.nba-adv-summary div { display: inline-flex; gap: 4px; }
.nba-adv-summary dt { color: var(--text-muted); }
.nba-adv-summary dd { margin: 0; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.nba-adv-warn { margin: 6px 0 0; }
.nba-adv-warn:empty { display: none; }

/* Compare presets dialog: the table scrolls sideways inside the dialog on a phone. */
.nba-dialog.nba-compare { max-width: 900px; }
.nba-compare-bar { margin: 0 0 8px; }
.nba-compare-bar .nba-btn { margin-left: auto; }
.nba-compare-table td:nth-child(2) { white-space: normal; min-width: 180px; }
/* |Diff %| and Season avg: min and max side by side in one filter, each with its own hint. */
.nba-filters .nba-pair { gap: 6px; }
.nba-pair-f { display: inline-flex; align-items: center; gap: 4px; }
.nba-filters .nba-pair input[type="number"] { width: 60px; }
.nba-compare-table tr.is-base td { font-weight: 600; background: var(--bg-surface-alt); }

@media (max-width: 720px) {
    .nba-adv-row .nba-f { max-width: 100%; min-width: 0; }
    .nba-adv-row .nba-f:has(select[data-nba-adv-preset]) { flex: 1 1 100%; }
    .nba-adv-row select[data-nba-adv-preset] { flex: 1 1 auto; width: 100%; min-width: 0; }
    .nba-adv-cond select[data-part="f"],
    .nba-adv-cond select[data-part="t"] { max-width: 100%; min-width: 0; flex: 1 1 160px; }
    .nba-adv-group .nba-adv-group { margin-left: 4px; padding-left: 8px; }
    .nba-adv-cond + .nba-adv-cond { padding-top: 6px; border-top: 1px solid var(--border-soft); }
    .nba-compare-table td:nth-child(2) { min-width: 0; }
    .nba-compare-table .nba-cmp-minor { display: none; }
    .nba-compare-table th,
    .nba-compare-table td { padding: 4px 3px; }
    .nba-compare-bar .nba-btn { margin-left: 0; }
}