/* ─────────────────────────────────────────────────────────
   TITLETOWN PROPS — Analytics terminal aesthetic
   Dark editorial / data-first / monospace for numbers
───────────────────────────────────────────────────────── */

:root {
    /* Core palette — near-black with paper warmth */
    --bg-base: #0a0a0b;
    --bg-elev-1: #111113;
    --bg-elev-2: #17171a;
    --bg-elev-3: #1f1f24;

    /* Text — warm near-white */
    --text-primary: #f5f5f0;
    --text-secondary: #a3a3a0;
    --text-tertiary: #6b6b68;
    --text-muted: #45454a;

    /* Accents — only two. Green for +EV, red for -EV */
    --accent-pos: #00d97a;
    --accent-pos-dim: rgba(0, 217, 122, 0.12);
    --accent-pos-border: rgba(0, 217, 122, 0.24);
    --accent-neg: #ff4d4d;
    --accent-neg-dim: rgba(255, 77, 77, 0.12);

    /* Structural */
    --border: rgba(255, 255, 245, 0.08);
    --border-strong: rgba(255, 255, 245, 0.16);
    --divider: rgba(255, 255, 245, 0.04);

    /* Fonts */
    --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

    /* Bottom nav height */
    --nav-height: 64px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-feature-settings: 'ss01', 'ss02', 'cv11';
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    background-image:
        radial-gradient(ellipse at top right, rgba(0, 217, 122, 0.025), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(255, 255, 255, 0.015), transparent 50%);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.025;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    z-index: 1;
}

/* ─── Top bar ─────────────────────────────────────────── */

.top-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(10, 10, 11, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.top-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 32px;
    height: 32px;
    background: var(--accent-pos);
    color: var(--bg-base);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    display: grid;
    place-items: center;
    letter-spacing: -0.02em;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.brand-sub {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.18em;
    margin-top: 3px;
}

.status-block {
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: var(--font-mono);
}

.status-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.status-item-dot {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    background: var(--bg-elev-1);
}

.status-label {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.16em;
}

.status-value {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-tertiary);
    box-shadow: 0 0 0 0 var(--text-tertiary);
}

.status-dot.active {
    background: var(--accent-pos);
    animation: pulse 2s ease-in-out infinite;
}

.status-dot.error {
    background: var(--accent-neg);
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 217, 122, 0.5); }
    50% { box-shadow: 0 0 0 5px rgba(0, 217, 122, 0); }
}

/* ─── Main ─────────────────────────────────────────────── */

.main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 28px calc(var(--nav-height) + 48px);
    position: relative;
    z-index: 2;
}

/* ─── Summary strip (slate page) ───────────────────────── */

.summary-strip {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 20px 28px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    margin-bottom: 40px;
    overflow-x: auto;
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 28px;
    min-width: max-content;
    flex: 1;
}

.summary-item:first-child {
    padding-left: 0;
}

.summary-divider {
    width: 1px;
    height: 32px;
    background: var(--border);
    flex-shrink: 0;
}

.summary-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.summary-value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.summary-value-accent {
    color: var(--accent-pos);
}

/* ─── Slate header ─────────────────────────────────────── */

.slate-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    gap: 24px;
    flex-wrap: wrap;
}

.slate-title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
}

.slate-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.18em;
    margin-right: 4px;
}

/* v0.4.3 — Segmented control wrapper for the 3 sort options.
   The 3 buttons sit inside this single bordered enclosure so active /
   inactive state doesn't depend on each individual button growing or
   losing a border. Active state fills with elev-3 + a subtle ring.
   Inactives stay transparent inside the group. */
.slate-sort-seg {
    display: inline-flex;
    align-items: center;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    gap: 1px;
}

.sort-btn {
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.sort-btn:hover:not(.sort-btn-active) {
    color: var(--text-secondary);
}

.sort-btn-active {
    color: var(--text-primary);
    background: var(--bg-elev-3);
    box-shadow: 0 0 0 1px var(--border-strong);
}

/* v0.4.3 — Vertical hairline separating the sort segment from the
   sport pill. Implies different scope (sort = page-local, sport = global
   filter that flips the entire dataset). */
.slate-sort-divider {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 2px;
}

/* v0.4.3 — Sport pill. The sport-switcher.js module injects this
   markup into #sport-pill-host as an unstyled <button class="sport-pill">,
   and prior to v0.4.3 the page rendered it with browser-default white
   background — visually jarring in the dark UI. Styled here as a peer
   pill matching the segmented control's border + radius shape. Inner
   structure: label · value caret. The label hints scope ("Sport"); the
   value carries the active sport name in primary text color so it reads
   first. */
.sport-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 12px;
    font-family: var(--font-display);
    font-size: 11.5px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.sport-pill:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background: var(--bg-elev-3);
}

.sport-pill-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.sport-pill-divider {
    color: var(--text-muted);
    font-size: 10px;
}

.sport-pill-value {
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.sport-pill-caret {
    color: var(--text-muted);
    font-size: 9px;
    margin-left: 1px;
}

/* ─── Day toggle (Yesterday / Today / Tomorrow / All) ─── */

.day-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

.day-toggle::-webkit-scrollbar { display: none; }

.day-pill {
    font-family: var(--font-display);
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 9px 14px 9px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
}

.day-pill:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background: var(--bg-elev-1);
}

.day-pill-active {
    color: var(--bg-base);
    background: var(--text-primary);
    border-color: var(--text-primary);
    font-weight: 600;
}

.day-pill-active:hover {
    color: var(--bg-base);
    background: var(--text-primary);
    border-color: var(--text-primary);
}

.day-pill-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

.day-pill-active .day-pill-label {
    font-weight: 600;
}

.day-pill-count {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    padding: 2px 6px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.day-pill-active .day-pill-count {
    color: var(--text-primary);
    background: var(--bg-base);
    border-color: var(--bg-base);
}

/* ─── Games grid (slate page) ──────────────────────────── */

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 48px;
}

.game-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    animation: cardIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.game-card:hover {
    border-color: var(--border-strong);
    background: var(--bg-elev-2);
    transform: translateY(-1px);
}

.game-card:hover .game-arrow {
    transform: translateX(3px);
    color: var(--accent-pos);
}

.game-card-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-pos);
    opacity: 0;
    transition: opacity 0.2s;
}

.game-card:hover .game-card-accent {
    opacity: 1;
}

.game-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--divider);
}

.game-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.game-time {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-pos);
    letter-spacing: 0.12em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.game-time-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-pos);
}

.game-index {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-tertiary);
    letter-spacing: 0.14em;
}

.game-matchup {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.game-matchup .vs {
    color: var(--text-tertiary);
    font-weight: 500;
    margin: 0 4px;
    font-size: 14px;
}

.game-body {
    padding: 14px 20px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.game-stats {
    display: flex;
    gap: 18px;
}

.game-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.game-stat-value {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.game-stat-value-accent {
    color: var(--accent-pos);
}

.game-stat-label {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.game-arrow {
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--text-tertiary);
    transition: all 0.2s ease;
}

/* ─── Loading / empty states ───────────────────────────── */

.loading-state,
.empty-state,
.error-state {
    grid-column: 1 / -1;
    padding: 80px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.loading-pulse {
    width: 36px;
    height: 36px;
    border: 2px solid var(--border);
    border-top-color: var(--accent-pos);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-text,
.empty-text,
.error-text {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.12em;
}

.error-state { color: var(--accent-neg); }

.error-detail {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    max-width: 480px;
    line-height: 1.6;
    margin-top: 4px;
    word-break: break-word;
}

.empty-detail {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 6px;
    letter-spacing: 0.04em;
}

.empty-detail strong {
    color: var(--accent-pos);
    font-weight: 600;
}

/* ─── Footer ───────────────────────────────────────────── */

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
    flex-wrap: wrap;
    gap: 12px;
}

/* ═══════════════════════════════════════════════════════
   GAME DETAIL PAGE
═══════════════════════════════════════════════════════ */

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
}

.breadcrumb-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 6px 10px 6px 8px;
    border: 1px solid var(--border);
    transition: all 0.15s ease;
}

.breadcrumb-back:hover {
    color: var(--accent-pos);
    border-color: var(--accent-pos-border);
    background: var(--accent-pos-dim);
}

.breadcrumb-arrow {
    font-size: 14px;
    line-height: 1;
}

.breadcrumb-label {
    text-transform: uppercase;
}

.breadcrumb-sep {
    color: var(--text-muted);
}

.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 500;
}

/* Game header */
.game-detail-header {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    margin-bottom: 24px;
    overflow: hidden;
}

.game-detail-header-inner {
    padding: 28px 32px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.game-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.game-detail-time {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-pos);
    letter-spacing: 0.16em;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

.game-detail-matchup {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
}

.game-detail-matchup .vs {
    color: var(--text-tertiary);
    font-weight: 500;
    margin: 0 6px;
    font-size: 28px;
}

.game-detail-stats {
    display: flex;
    gap: 36px;
}

.game-detail-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.game-detail-stat-value {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1;
}

.game-detail-stat-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.game-detail-top {
    padding: 14px 32px;
    border-top: 1px solid var(--divider);
    background: var(--bg-elev-2);
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    flex-wrap: wrap;
}

.game-detail-top-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.18em;
    padding-right: 12px;
    border-right: 1px solid var(--border);
}

.game-detail-top-prop {
    color: var(--text-primary);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.game-detail-top-ev {
    color: var(--accent-pos);
    font-weight: 700;
    margin-left: auto;
}

.game-detail-top-book {
    color: var(--text-tertiary);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Filter bar */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 20px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    margin-bottom: 0;
    border-bottom: none;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
}

.filter-select {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    padding: 7px 28px 7px 10px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b6b68' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.filter-select:hover {
    border-color: var(--border-strong);
}

.filter-toggle {
    display: flex;
    border: 1px solid var(--border);
    background: var(--bg-elev-2);
}

.filter-toggle-btn {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    padding: 7px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-right: 1px solid var(--border);
}

.filter-toggle-btn:last-child { border-right: none; }

.filter-toggle-btn:hover { color: var(--text-primary); }

.filter-toggle-active {
    color: var(--bg-base);
    background: var(--text-primary);
}

.filter-toggle-active:hover { color: var(--bg-base); }

.filter-search {
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    padding: 7px 10px;
    width: 160px;
    transition: border-color 0.15s ease;
}

.filter-search::placeholder { color: var(--text-muted); }

.filter-search:focus {
    outline: none;
    border-color: var(--accent-pos-border);
}

.filter-group-search { flex: 1; min-width: 220px; }

.filter-group-count { margin-left: auto; }

.filter-count {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Props table */
.props-table-wrap {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    overflow-x: auto;
    margin-bottom: 32px;
}

.props-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-display);
}

.props-table thead {
    background: var(--bg-elev-2);
    border-bottom: 1px solid var(--border-strong);
}

.props-table th {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left;
    padding: 12px 14px;
    white-space: nowrap;
    user-select: none;
}

.th-num { text-align: right; }

.th-sortable { cursor: pointer; transition: color 0.15s ease; }

.th-sortable:hover { color: var(--text-primary); }

.th-sortable.th-sorted { color: var(--accent-pos); }

.th-arrow {
    display: inline-block;
    margin-left: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    width: 10px;
}

.th-arrow-col { width: 32px; }

.props-table tbody tr {
    border-bottom: 1px solid var(--divider);
    transition: background 0.12s ease;
    cursor: pointer;
}

.props-table tbody tr:hover {
    background: var(--bg-elev-2);
}

.props-table tbody tr:hover .td-arrow {
    color: var(--accent-pos);
    transform: translateX(3px);
}

.props-table td {
    padding: 11px 14px;
    font-size: 13px;
    color: var(--text-primary);
    vertical-align: middle;
    white-space: nowrap;
}

.td-num {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.td-player {
    font-weight: 600;
    letter-spacing: -0.005em;
}

.td-team {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

.td-game {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.props-table-allgames .td-game {
    color: var(--text-secondary);
}

.td-market {
    color: var(--text-secondary);
    font-size: 12px;
}

.td-line {
    font-weight: 600;
    color: var(--text-primary);
}

.td-ev {
    font-weight: 700;
    font-size: 13px;
}

.td-ev.ev-pos { color: var(--accent-pos); }
.td-ev.ev-neg { color: var(--accent-neg); }

.td-book {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.book-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    background: var(--bg-elev-3);
    border: 1px solid var(--border);
    padding: 1px 6px;
    letter-spacing: 0.04em;
}

.td-arrow {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    transition: all 0.15s ease;
}

/* Side pills (OVER / UNDER) */
.prop-side {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 3px 7px;
    border: 1px solid;
    text-transform: uppercase;
    display: inline-block;
}

.prop-side-over {
    color: var(--accent-pos);
    border-color: var(--accent-pos-border);
    background: var(--accent-pos-dim);
}

.prop-side-under {
    color: #ffa940;
    border-color: rgba(255, 169, 64, 0.24);
    background: rgba(255, 169, 64, 0.10);
}

.empty-state-table {
    padding: 60px 20px;
}

/* ═══════════════════════════════════════════════════════
   PROP DETAIL PAGE
═══════════════════════════════════════════════════════ */

.prop-header {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    margin-bottom: 24px;
    overflow: hidden;
}

.prop-header-main {
    padding: 24px 28px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
}

/* ─── Player headshot ───────────────────────────────── */

.prop-header-image {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 96px;
}

.prop-headshot {
    width: 132px;
    height: 96px;
    object-fit: cover;
    object-position: center top;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    /* The NBA CDN serves transparent PNGs; the dark elev-2 acts as a backdrop. */
    /* Subtle radial fade so the image edge is softer */
    mask-image: radial-gradient(ellipse 95% 95% at center, black 70%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 95% 95% at center, black 70%, transparent 100%);
}

.prop-headshot-fallback {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 800;
    color: var(--text-tertiary);
    letter-spacing: -0.02em;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    /* No mask — the fallback is a solid block with initials */
    mask-image: none;
    -webkit-mask-image: none;
}

/* ─── Header info column (left of stat blocks) ──────── */

.prop-header-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.prop-header-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    flex-wrap: wrap;
}

/* Team logos in the meta row — sized to match the pill height */
.prop-team-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    /* SVGs from the NBA CDN render fine in dark mode without modification.
       If a particular team's logo is too dark, the CDN actually serves
       an alt SVG already optimized for dark backgrounds. */
}

.prop-team-pill {
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-elev-2);
    padding: 3px 8px;
    border: 1px solid var(--border);
    line-height: 1.4;
}

.prop-team-pill-opp {
    color: var(--text-secondary);
    background: transparent;
}

.prop-vs-team {
    font-weight: 500;
    color: var(--text-tertiary);
    padding: 0 2px;
}

.prop-header-player {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
}

.prop-header-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.prop-line-value {
    font-family: var(--font-mono);
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
}

.prop-line-stat {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
}

.prop-header-right {
    display: flex;
    gap: 24px;
    flex-shrink: 0;
}

.prop-stat-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.prop-stat-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.prop-stat-value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.prop-stat-value-sm { font-size: 14px; font-weight: 500; }

.prop-stat-value.ev-pos { color: var(--accent-pos); }
.prop-stat-value.ev-neg { color: var(--accent-neg); }

/* ─── Multi-window hit-rate strip ────────────────────── */

.hr-windows {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 12px;
    overflow: hidden;
}

.hr-window {
    background: var(--bg-elev-1);
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    transition: background 0.15s ease;
}

.hr-window-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hr-window-pct {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.hr-window-pct.ev-pos { color: var(--accent-pos); }
.hr-window-pct.ev-neg { color: var(--accent-neg); }

.hr-window-detail {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* ─── Secondary stats strip (Avg / Median / Range / Sample) ─── */

.hr-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 24px;
    overflow: hidden;
}

.hr-stat {
    background: var(--bg-elev-1);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

.hr-stat-label {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hr-stat-value {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.hr-stat-vs {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}

.hr-stat-vs.ev-pos { color: var(--accent-pos); }
.hr-stat-vs.ev-neg { color: var(--accent-neg); }

/* ─── Insights block ─────────────────────────────────── */

.insights-block {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    margin-bottom: 24px;
    border-top: none;
}

.insights-header {
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.insights-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.insights-meta {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.insights-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.insight-item {
    padding: 11px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    border-bottom: 1px solid var(--divider);
}

.insight-item:last-child { border-bottom: none; }

.insight-icon {
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1.4;
    margin-top: 1px;
}

.insight-text {
    flex: 1;
    min-width: 0;
}

.insight-text strong {
    color: var(--text-primary);
    font-weight: 700;
}

.insights-empty {
    padding: 14px 20px;
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
}

.insight-cold .insight-text strong,
.insight-h2h-cold .insight-text strong,
.insight-cooling .insight-text strong {
    color: var(--accent-neg);
}

.insight-streak .insight-text strong,
.insight-h2h-hot .insight-text strong,
.insight-hot .insight-text strong,
.insight-gap .insight-text strong {
    color: var(--accent-pos);
}

/* ─── Filter sheet trigger button (in filter bar) ─────── */

.filter-group-end {
    margin-left: auto;
}

.filter-sheet-trigger {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
    padding: 7px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    line-height: 1;
}

.filter-sheet-trigger:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background: var(--bg-elev-1);
}

.filter-sheet-trigger-icon {
    font-size: 11px;
    color: var(--text-tertiary);
}

.filter-sheet-trigger-label {
    letter-spacing: 0.04em;
}

.filter-sheet-trigger-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--bg-base);
    background: var(--accent-pos);
    border-radius: 999px;
    padding: 2px 6px 1px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}

/* ─── Filter sheet (slide-up modal) ───────────────────── */

.filter-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 90;
    opacity: 0;
    transition: opacity 0.28s ease;
    backdrop-filter: blur(2px);
}

.filter-sheet-backdrop-open {
    opacity: 1;
}

.filter-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg-elev-1);
    border-top: 1px solid var(--border-strong);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(.2, .8, .2, 1);
}

/* Desktop: center as a modal at fixed width (no full-width sprawl).
   Mobile keeps the bottom slide-up. */
@media (min-width: 720px) {
    .filter-sheet {
        left: 50%;
        right: auto;
        bottom: 5vh;
        width: 640px;
        max-width: calc(100vw - 40px);
        max-height: 85vh;
        transform: translate(-50%, calc(100% + 10vh));
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        box-shadow: 0 24px 48px rgba(0,0,0,0.6);
    }
    .filter-sheet-open {
        transform: translate(-50%, 0);
    }
}

.filter-sheet-open {
    transform: translateY(0);
}

.filter-sheet-header {
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--divider);
    /* 3-column grid: empty spacer | title (centered) | close button.
       Spacer matches close button's footprint so title is true-centered. */
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    flex-shrink: 0;
}

.filter-sheet-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    text-align: center;
    grid-column: 2;
}

.filter-sheet-close {
    grid-column: 3;
    justify-self: end;
    font-family: var(--font-mono);
    font-size: 24px;
    line-height: 1;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s ease;
}

.filter-sheet-close:hover {
    color: var(--text-primary);
}

.filter-sheet-body {
    padding: 8px 20px 20px;
    overflow-y: auto;
    flex: 1;
}

.fs-row {
    padding: 14px 0;
    border-bottom: 1px solid var(--divider);
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    align-items: center;
}

.fs-row:last-child { border-bottom: none; }

.fs-row-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.fs-row-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fs-row-stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.fs-segmented {
    display: inline-flex;
    border: 1px solid var(--border);
    overflow: hidden;
    flex-wrap: wrap;
}

.fs-segmented-btn {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-right: 1px solid var(--border);
    padding: 7px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}

.fs-segmented-btn:last-child { border-right: none; }

.fs-segmented-btn:hover {
    color: var(--text-primary);
    background: var(--bg-elev-2);
}

.fs-segmented-active {
    color: var(--bg-base);
    background: var(--text-primary);
    font-weight: 600;
}

.fs-segmented-active:hover {
    color: var(--bg-base);
    background: var(--text-primary);
}

.fs-input {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-base);
    border: 1px solid var(--border);
    padding: 7px 12px;
    width: 100px;
    font-variant-numeric: tabular-nums;
}

.fs-input:focus {
    outline: none;
    border-color: var(--text-secondary);
}

.fs-hint {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}

.filter-sheet-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--divider);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    background: var(--bg-elev-2);
    flex-shrink: 0;
}

.filter-sheet-btn {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 18px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--border);
    line-height: 1;
}

.filter-sheet-btn-secondary {
    color: var(--text-secondary);
    background: transparent;
}

.filter-sheet-btn-secondary:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.filter-sheet-btn-primary {
    color: var(--bg-base);
    background: var(--text-primary);
    border-color: var(--text-primary);
}

.filter-sheet-btn-primary:hover {
    background: var(--accent-pos);
    border-color: var(--accent-pos);
}

body.no-scroll {
    overflow: hidden;
}

/* ─── Stat tabs ───────────────────────────────────── */

.stat-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.stat-tabs::-webkit-scrollbar { display: none; }

.stat-tab {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.stat-tab:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.stat-tab-active {
    color: var(--bg-base);
    background: var(--text-primary);
    border-color: var(--text-primary);
    font-weight: 600;
}

/* Disabled stat tab — no prop posted for this stat (v0.9.7) */
.stat-tab-disabled,
.stat-tab:disabled {
    opacity: 0.32;
    cursor: not-allowed;
    color: var(--text-tertiary);
}
.stat-tab-disabled:hover,
.stat-tab:disabled:hover {
    color: var(--text-tertiary);
    border-color: var(--border);  /* don't brighten on hover */
}

.stat-tab-divider {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 6px;
    flex-shrink: 0;
}

/* ─── Prop filter bar (overrides) ─────────────────── */

.prop-filter-bar {
    margin-top: 0;
    border-top: none;
}

/* ─── Chart ───────────────────────────────────────── */

.chart-wrap {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-top: none;
    margin-bottom: 24px;
}

.chart-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--divider);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}

.chart-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.chart-stat-label {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.chart-line-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: lowercase;
}

.chart-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.chart-canvas-wrap {
    padding: 20px 18px 16px;
    height: 320px;
    position: relative;
}

/* ─── Game log (props-table reused) ───────────────── */

.gamelog-wrap {
    margin-top: 0;
}

.gamelog-title {
    padding: 14px 20px;
    background: var(--bg-elev-2);
    border-bottom: 1px solid var(--border-strong);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.gamelog-meta {
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
}

.gamelog-table tbody tr {
    cursor: default;
}

.gamelog-table tbody tr:hover {
    background: var(--bg-elev-2);
}

.gamelog-table .td-stat-active {
    color: var(--accent-pos);
    font-weight: 700;
    background: rgba(0, 217, 122, 0.06);
}

.gamelog-table .td-date {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.gamelog-table .td-vs-line {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.vs-line-hit {
    color: var(--accent-pos);
}

.vs-line-miss {
    color: var(--accent-neg);
    opacity: 0.85;
}

.vs-line-push {
    color: var(--text-tertiary);
}

.gametype-pill {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    padding: 2px 6px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gametype-pill.gametype-playoffs {
    color: #ffa940;
    border-color: rgba(255, 169, 64, 0.24);
    background: rgba(255, 169, 64, 0.08);
}

.gametype-pill.gametype-playin {
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.24);
    background: rgba(96, 165, 250, 0.08);
}

.gametype-pill.gametype-ist {
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.24);
    background: rgba(167, 139, 250, 0.08);
}

/* ─── Position pills + leaderboard ─────────────────────── */

.position-block {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    margin-bottom: 24px;
    overflow: hidden;
}

.position-block-header {
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.position-block-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.position-block-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.position-block-label span {
    color: var(--accent-pos);
}

.position-block-meta {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.position-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.pos-pill {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
    min-width: 38px;
    text-align: center;
}

.pos-pill:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background: var(--bg-elev-2);
}

.pos-pill-active {
    color: var(--bg-base);
    background: var(--text-primary);
    border-color: var(--text-primary);
    font-weight: 600;
}

.pos-pill-active:hover {
    color: var(--bg-base);
    background: var(--text-primary);
}

/* Leaderboard table */
.position-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-display);
    font-size: 12px;
}

.position-table thead {
    background: var(--bg-elev-2);
}

.position-table thead th {
    padding: 10px 10px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
}

.position-table thead .th-num {
    text-align: right;
}

.position-table thead .th-stat-active {
    color: var(--accent-pos);
}

.position-table thead .th-vs-line {
    text-align: center;
}

.position-table tbody tr {
    transition: background 0.1s ease;
}

.position-table tbody tr:hover {
    background: var(--bg-elev-2);
}

.position-table tbody tr.position-row-current {
    background: rgba(0, 217, 122, 0.06);
}

.position-table tbody tr.position-row-current:hover {
    background: rgba(0, 217, 122, 0.10);
}

.position-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--divider);
    color: var(--text-primary);
    white-space: nowrap;
}

.position-table tbody tr:last-child td {
    border-bottom: none;
}

.position-table .td-player {
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.position-table .td-current-player {
    font-weight: 700;
    color: var(--accent-pos);
}

.position-current-marker {
    color: var(--accent-pos);
    font-size: 9px;
    margin-right: 4px;
    vertical-align: middle;
}

.position-table .td-pos {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.position-table .td-num {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

.position-table .td-num-faint {
    color: var(--text-tertiary);
}

.position-table .td-stat-active {
    color: var(--accent-pos);
    font-weight: 600;
}

.position-table .td-vs-line {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.position-table .vs-line-empty {
    color: var(--text-tertiary);
}

.position-empty {
    padding: 32px 20px;
    text-align: center;
}

.position-overflow {
    padding: 12px 20px;
    border-top: 1px solid var(--divider);
    background: var(--bg-elev-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.position-overflow #position-overflow-text {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.position-show-all {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}

.position-show-all:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background: var(--bg-elev-1);
}

/* ─── Bottom nav bar ───────────────────────────────────── */

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: rgba(10, 10, 11, 0.92);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--border-strong);
    height: var(--nav-height);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
}

.bottom-nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    padding: 0 28px;
    display: flex;
    align-items: center;
    gap: 28px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bottom-nav-inner::-webkit-scrollbar { display: none; }

.nav-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.nav-group-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-right: 1px solid var(--border);
    margin-right: 4px;
    white-space: nowrap;
    line-height: 1;
    padding: 4px 10px 4px 0;
}

.nav-group-items {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-item {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    padding: 8px 14px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    line-height: 1;
    border-radius: 0;
}

.nav-item:hover {
    color: var(--text-primary);
    background: var(--bg-elev-2);
}

.nav-item-active {
    color: var(--accent-pos);
    background: var(--accent-pos-dim);
    border-color: var(--accent-pos-border);
    font-weight: 600;
}

.nav-item-active:hover {
    color: var(--accent-pos);
    background: var(--accent-pos-dim);
}

.nav-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
    flex-shrink: 0;
}

/* ─── Toast ────────────────────────────────────────────── */

.toast {
    position: fixed;
    bottom: calc(var(--nav-height) + 16px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-elev-3);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    padding: 12px 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.2s;
    max-width: calc(100vw - 32px);
    text-align: center;
}

.toast.show { opacity: 1; }

.toast-sub {
    color: var(--text-tertiary);
    font-size: 9px;
    display: block;
    margin-top: 4px;
}

/* ─── Responsive ───────────────────────────────────────── */

@media (max-width: 768px) {
    :root { --nav-height: 60px; }

    .top-bar-inner {
        padding: 12px 16px;
        gap: 12px;
        flex-wrap: wrap;
    }

    .status-block { gap: 12px; }

    .main {
        padding: 20px 16px calc(var(--nav-height) + 32px);
    }

    .summary-strip { padding: 16px; gap: 0; }
    .summary-item { padding: 0 14px; }
    .summary-value { font-size: 18px; }
    .slate-title { font-size: 28px; }
    .games-grid { grid-template-columns: 1fr; }
    .brand-sub { display: none; }

    .day-toggle {
        gap: 5px;
        margin-bottom: 18px;
    }
    .day-pill {
        padding: 8px 11px 8px 12px;
        gap: 8px;
    }
    .day-pill-label { font-size: 12px; }
    .day-pill-count { font-size: 9px; padding: 2px 5px; }

    /* v0.4.3 — tighter pillbar on tablet/phone widths */
    .slate-sort { gap: 8px; }
    .slate-sort-seg { padding: 2px; }
    .sort-btn { padding: 5px 10px; font-size: 11px; }
    .sport-pill { padding: 6px 10px; font-size: 11px; }
    .slate-sort-divider { height: 18px; margin: 0 1px; }

    .game-detail-header-inner {
        padding: 20px 18px;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .game-detail-matchup { font-size: 26px; }
    .game-detail-matchup .vs { font-size: 20px; }

    .game-detail-stats {
        gap: 24px;
        width: 100%;
        justify-content: space-between;
    }

    .game-detail-stat { align-items: flex-start; }
    .game-detail-stat-value { font-size: 22px; }

    .game-detail-top {
        padding: 12px 18px;
        font-size: 11px;
        gap: 8px;
    }

    .game-detail-top-ev { margin-left: 0; }

    .filter-bar {
        padding: 12px 14px;
        gap: 14px;
    }

    .filter-group-search { width: 100%; }
    .filter-search { width: 100%; }
    .filter-group-count { margin-left: 0; }

    .props-table th,
    .props-table td {
        padding: 10px 10px;
        font-size: 12px;
    }

    .td-team { display: none; }
    .props-table th:nth-child(2) { display: none; }

    /* Prop detail page mobile tweaks */
    .prop-header-main {
        padding: 18px 16px;
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: flex-start;
    }
    .prop-header-image {
        width: 80px;
        height: 60px;
    }
    .prop-headshot {
        width: 80px;
        height: 60px;
    }
    .prop-headshot-fallback {
        font-size: 22px;
    }
    .prop-header-player { font-size: 28px; }
    .prop-line-value { font-size: 24px; }
    .prop-team-logo { width: 14px; height: 14px; }
    .prop-header-right {
        width: 100%;
        justify-content: space-between;
        gap: 16px;
    }
    .prop-stat-block { align-items: flex-start; }
    .prop-stat-value { font-size: 18px; }

    .hr-windows {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .hr-window {
        padding: 10px 10px 8px;
    }
    .hr-window-pct { font-size: 18px; }
    .hr-window-label { font-size: 8px; }
    .hr-window-detail { font-size: 8px; }

    .hr-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hr-stat { padding: 9px 12px; }
    .hr-stat-value { font-size: 14px; }

    .insight-item { padding: 10px 14px; font-size: 12px; }
    .insights-header { padding: 12px 14px 8px; }

    .stat-tab { font-size: 12px; padding: 7px 12px; }

    .chart-canvas-wrap { height: 260px; padding: 14px 8px 12px; }
    .chart-stat-label { font-size: 16px; }

    /* Filter sheet adjustments for narrow screens */
    .fs-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .filter-sheet-body { padding: 8px 16px 16px; }
    .filter-sheet-header { padding: 14px 16px; }
    .filter-sheet-footer { padding: 12px 16px; }

    /* Position leaderboard mobile tweaks */
    .position-block-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 14px 10px;
    }
    .position-pills {
        gap: 3px;
        width: 100%;
    }
    .pos-pill {
        font-size: 11px;
        padding: 5px 8px;
        min-width: 32px;
        flex: 1;
    }
    .position-table thead th,
    .position-table td {
        padding: 8px 6px;
        font-size: 11px;
    }
    /* Hide STL, BLK, 3PM on small screens to save horizontal space */
    .position-table th:nth-child(8),
    .position-table td:nth-child(8),
    .position-table th:nth-child(9),
    .position-table td:nth-child(9),
    .position-table th:nth-child(10),
    .position-table td:nth-child(10) {
        display: none;
    }

    /* Hide some game-log columns on smaller screens */
    .gamelog-table th:nth-child(8),
    .gamelog-table td:nth-child(8),
    .gamelog-table th:nth-child(9),
    .gamelog-table td:nth-child(9),
    .gamelog-table th:nth-child(10),
    .gamelog-table td:nth-child(10) {
        display: none;
    }

    .bottom-nav-inner { padding: 0 16px; gap: 20px; }
    .nav-group { gap: 8px; }
    .nav-item { font-size: 12px; padding: 7px 11px; }
    .nav-group-label { font-size: 8px; padding-right: 2px; }
}

@media (max-width: 480px) {
    .summary-strip { padding: 12px 8px; }
    .summary-item { padding: 0 10px; }
    .summary-label { font-size: 8px; }
    .summary-value { font-size: 16px; }
    .slate-sort { width: 100%; overflow-x: auto; }

    /* Hide projection col on small phones to keep table readable */
    .props-table th:nth-child(6),
    .props-table td:nth-child(6) {
        display: none;
    }

    /* Hide Game column on the slate-wide props table at this size */
    .props-table-allgames .td-game,
    .props-table-allgames .th-game {
        display: none;
    }
}
/* ============================================================
   RECENT TRENDS CARDS  (v0.7.4)
   Appended to styles.css. Place after existing prop-page rules.
   ============================================================ */

.trends-section {
  margin: 24px 0;
  padding: 0;
}

.trends-section-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary, #a3a3a0);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 245, 0.08));
}

.trends-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.trend-card {
  background: var(--bg-elev-1, #131316);
  border: 1px solid var(--border, rgba(255, 255, 245, 0.08));
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* squared corners — no border-radius, per design system */
}

.trend-card-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary, #6b6b68);
}

.trend-card-stat-name {
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #f5f5f0);
  letter-spacing: -0.01em;
}

.trend-card-delta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.trend-card-delta {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.trend-card-delta.positive {
  color: var(--accent-pos, #00d97a);
}

.trend-card-delta.negative {
  color: var(--accent-neg, #ff4d4d);
}

.trend-card-delta.neutral {
  color: var(--text-secondary, #a3a3a0);
}

.trend-card-delta-arrow {
  font-size: 18px;
  margin-right: 4px;
}

.trend-card-delta-context {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary, #6b6b68);
}

/* Sparkline — 10 bars, fixed-height row */
.trend-card-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  margin-top: 4px;
}

.trend-card-spark-bar {
  flex: 1;
  min-height: 2px;
  background: var(--text-tertiary, #6b6b68);
  opacity: 0.35;
  /* squared corners */
}

.trend-card-spark-bar.recent.positive {
  background: var(--accent-pos, #00d97a);
  opacity: 1;
}

.trend-card-spark-bar.recent.negative {
  background: var(--accent-neg, #ff4d4d);
  opacity: 1;
}

.trend-card-spark-bar.recent.neutral {
  background: var(--text-secondary, #a3a3a0);
  opacity: 0.7;
}

/* Empty state — when fewer than 10 games available */
.trend-card.empty {
  align-items: center;
  justify-content: center;
  min-height: 140px;
}

.trend-card-empty-msg {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-tertiary, #6b6b68);
  text-align: center;
}

/* Mobile — stack cards vertically below ~640px */
@media (max-width: 640px) {
  .trends-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   GAMES PLAYED DOT GRID  (v0.7.5)
   2-col row hosting Insights + Games Played, side by side.
   ============================================================ */

/* Row wrapper — 2-col on desktop, stacked on mobile */
.insights-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 24px;
}

/* Override: insights-block had its own bottom margin; move it to the row */
.insights-row .insights-block {
    margin-bottom: 0;
    height: 100%;
}

/* Games played card — matches insights-block visual language */
.games-played-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-top: none;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.games-played-header {
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.games-played-title {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.games-played-label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.games-played-count {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600;
    color: var(--accent-pos);
    letter-spacing: 0.04em;
}

.games-played-count-sep {
    color: var(--text-tertiary);
    margin: 0 2px;
}

.games-played-count-total {
    color: var(--text-secondary);
}

/* Mini legend in the header — three small dots inline */
.games-played-legend {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: help;
}

.gp-legend-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
}

/* Grid body */
.games-played-grid {
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1;
    align-content: flex-start;
}

/* Individual dot — squared corners per design system */
.gp-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    flex-shrink: 0;
    transition: transform 80ms ease, opacity 80ms ease;
}

.gp-dot:hover {
    transform: scale(1.4);
}

.gp-dot-played {
    background: var(--accent-pos);
}

.gp-dot-dnp {
    background: var(--accent-neg);
}

.gp-dot-future {
    background: transparent;
    border: 1px solid var(--border-strong);
}

/* Footer with availability stat */
.games-played-footer {
    padding: 10px 20px 14px;
    border-top: 1px solid var(--divider);
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.games-played-stat-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.games-played-stat-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-pos);
    letter-spacing: 0.02em;
}

.games-played-stat-context {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    margin-left: auto;
}

/* Mobile — stack vertically */
@media (max-width: 768px) {
    .insights-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .games-played-header { padding: 12px 14px 8px; }
    .games-played-grid { padding: 14px 14px; gap: 4px; }
    .games-played-footer { padding: 8px 14px 12px; }

    .gp-dot {
        width: 9px;
        height: 9px;
    }
}


/* ============================================================
   CORRELATED PROPS  (v0.7.13)
   Two-section layout — "Likely to Hit" and "Likely to Miss".
   ============================================================ */

.correlations-section {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    margin-bottom: 24px;
}

.correlations-header {
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.correlations-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.correlations-meta {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.correlations-empty {
    padding: 28px 20px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
    line-height: 1.5;
}

/* Subsection (Likely to Hit / Likely to Miss) */
.correlations-subsection {
    border-top: 1px solid var(--divider);
}

.correlations-subsection:first-of-type {
    border-top: none;
}

.correlations-subheader {
    padding: 12px 20px 8px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.correlations-subtitle {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.correlations-subheader-lift .correlations-subtitle {
    color: var(--accent-pos);
}

.correlations-subheader-drag .correlations-subtitle {
    color: var(--accent-neg);
}

.correlations-subcount {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Card grid */
.correlations-grid {
    padding: 4px 20px 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Per-card */
.corr-card {
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-left-width: 3px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.corr-card-lift {
    border-left-color: var(--accent-pos);
}

.corr-card-drag {
    border-left-color: var(--accent-neg);
}

.corr-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.corr-card-teammate {
    flex: 1;
    min-width: 0;
}

.corr-card-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.corr-card-prop {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 2px;
}

.corr-card-line {
    color: var(--text-primary);
    font-weight: 600;
}

/* HIT RATE block on the right of each card */
.corr-card-rate {
    flex-shrink: 0;
    text-align: right;
}

.corr-card-rate-label {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.16em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.corr-card-rate-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
}

.corr-card-rate-lift .corr-card-rate-value {
    color: var(--accent-pos);
}

.corr-card-rate-drag .corr-card-rate-value {
    color: var(--accent-neg);
}

/* Sparkline — 10 cells */
.corr-card-spark {
    display: flex;
    gap: 2px;
    height: 10px;
}

.corr-spark-cell {
    flex: 1;
    height: 100%;
}

.corr-spark-lift {
    background: var(--accent-pos);
}

.corr-spark-drag {
    background: var(--accent-neg);
}

.corr-spark-miss {
    background: var(--text-tertiary);
    opacity: 0.3;
}

.corr-spark-empty {
    background: transparent;
    border: 1px solid var(--border);
}

/* Bottom meta line: delta tag + baseline + sample */
.corr-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.04em;
}

.corr-delta-tag {
    padding: 2px 6px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 8px;
}

.corr-delta-tag-strong-lift {
    background: var(--accent-pos-dim);
    color: var(--accent-pos);
}

.corr-delta-tag-strong-drag {
    background: var(--accent-neg-dim);
    color: var(--accent-neg);
}

.corr-delta-tag-mild {
    background: rgba(255, 255, 245, 0.06);
    color: var(--text-secondary);
}

.corr-delta-tag-flat {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-style: italic;
    letter-spacing: 0.04em;
}

.corr-card-baseline-mini {
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.corr-card-sample {
    margin-left: auto;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}

/* Tablet: keep 2 columns but tighter */
@media (max-width: 960px) {
    .correlations-grid {
        gap: 8px;
    }
}

/* Mobile: 1 column */
@media (max-width: 600px) {
    .correlations-grid {
        grid-template-columns: 1fr;
    }
    .correlations-header { padding: 12px 14px 8px; }
    .correlations-subheader { padding: 10px 14px 6px; }
    .correlations-grid { padding: 4px 14px 12px; }
    .corr-card { padding: 10px 12px; }
    .corr-card-meta { flex-wrap: wrap; }
}

/* ─────────────────────────────────────────────────────────
   Shot Charts (v0.9.2)
   Three-tab section: Shot Diet / Defense Faced / Play Types.
   Mounted between Recent Trends and the position leaderboard.
───────────────────────────────────────────────────────── */

.shotcharts-section {
    margin: 24px 0;
    padding: 0;
}

.shotcharts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.shotcharts-title {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.shotcharts-tabs {
    display: flex;
    gap: 0;
}

.shotcharts-tab {
    background: transparent;
    border: 1px solid var(--border);
    border-right-width: 0;
    color: var(--text-secondary);
    padding: 8px 14px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.shotcharts-tab:first-child { border-left: 1px solid var(--border); }
.shotcharts-tab:last-child  { border-right: 1px solid var(--border); }

.shotcharts-tab:hover:not(:disabled) {
    color: var(--text-primary);
    background: var(--bg-elev-1);
}

.shotcharts-tab-active,
.shotcharts-tab-active:hover {
    color: var(--text-primary);
    background: var(--bg-elev-2);
    border-color: var(--border-strong);
}

.shotcharts-tab:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.shotcharts-body {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
}

.shotcharts-tab-body {
    padding: 16px 16px 18px;
}

.shotcharts-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Controls (window selector + color-mode pill row) */
.shotcharts-controls {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.shotcharts-control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shotcharts-control-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.shotcharts-pill-row {
    display: flex;
    gap: 0;
}

.shotcharts-pill {
    background: transparent;
    border: 1px solid var(--border);
    border-right-width: 0;
    color: var(--text-secondary);
    padding: 5px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.shotcharts-pill:first-child { border-left: 1px solid var(--border); }
.shotcharts-pill:last-child  { border-right: 1px solid var(--border); }

.shotcharts-pill:hover {
    color: var(--text-primary);
    background: var(--bg-elev-2);
}

.shotcharts-pill.active {
    background: var(--text-primary);
    color: var(--bg-base);
    border-color: var(--text-primary);
}

/* Layout: court SVG on left, table on right */
.shotcharts-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(260px, 1fr);
    gap: 16px;
    align-items: start;
}

/* Right-column stack — zone breakdown on top, play types on bottom (v0.9.6) */
.shotcharts-right-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
}

.shotcharts-court {
    background: var(--bg-base);
    border: 1px solid var(--border);
    padding: 10px;
}

.shotcharts-court-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Zone label (uppercase, sits above the percentage) */
.shotcharts-court-zone-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    fill: var(--text-tertiary);
    pointer-events: none;
}

/* Indicator glyph (▲ ▼ ●) — colored by signal direction */
.shotcharts-court-zone-glyph {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
}
.shotcharts-court-zone-glyph.ind-pos     { fill: var(--accent-pos); }
.shotcharts-court-zone-glyph.ind-neg     { fill: var(--accent-neg); }
.shotcharts-court-zone-glyph.ind-neutral { fill: var(--text-tertiary); }

/* Percentage value (the big number next to the indicator) */
.shotcharts-court-zone-pct {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    fill: var(--text-primary);
    pointer-events: none;
}

/* Rank label (used in Defense Faced tab — sits below percentage) */
.shotcharts-court-zone-rank {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    fill: var(--text-secondary);
    pointer-events: none;
}

/* Zone breakdown / defense rank table */
.shotcharts-zonetable-wrap,
.shotcharts-playtypes-wrap {
    background: var(--bg-base);
    border: 1px solid var(--border);
}

.shotcharts-zonetable {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.shotcharts-zonetable thead th {
    background: var(--bg-elev-2);
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    text-align: left;
    padding: 8px 12px;
}

.shotcharts-zonetable th.zt-num,
.shotcharts-zonetable td.zt-num {
    text-align: right;
    font-family: var(--font-mono);
}

.shotcharts-zonetable tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--divider);
    color: var(--text-primary);
}

.shotcharts-zonetable tbody tr:last-child td { border-bottom: none; }

.shotcharts-zonetable tfoot td {
    padding: 9px 12px;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
}

.shotcharts-zonetable td.zt-zone {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--text-primary);
}

.shotcharts-zonetable td.zt-efg.pos { color: var(--accent-pos); }
.shotcharts-zonetable td.zt-efg.neg { color: var(--accent-neg); }

.shotcharts-zonetable-meta {
    padding: 8px 12px;
    border-top: 1px solid var(--divider);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
}

/* Defense Faced — per-team note above the layout */
.shotcharts-defnote {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: var(--bg-elev-2);
    border-left: 2px solid var(--accent-pos-border);
    flex-wrap: wrap;
}

.shotcharts-defnote-team {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.shotcharts-defnote-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
}

/* Rank pill (defense ranks + play type percentile) */
.shotcharts-rank-pill {
    display: inline-block;
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    border: 1px solid var(--border);
}

.shotcharts-rank-pill.rank-good {
    background: var(--accent-pos-dim);
    border-color: var(--accent-pos-border);
    color: var(--accent-pos);
}

.shotcharts-rank-pill.rank-bad {
    background: var(--accent-neg-dim);
    border-color: rgba(255, 77, 77, 0.24);
    color: var(--accent-neg);
}

.shotcharts-rank-pill.rank-mid {
    color: var(--text-secondary);
}

/* Play Types — sortable headers */
.shotcharts-playtypes-table th.pt-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.12s, background 0.12s;
}

.shotcharts-playtypes-table th.pt-sortable:hover {
    color: var(--text-primary);
    background: var(--bg-elev-3);
}

.shotcharts-playtypes-table th.pt-sort-active {
    color: var(--text-primary);
}

.pt-sort-arrow {
    margin-left: 4px;
    font-size: 9px;
}

/* Mobile — stack court above table */
@media (max-width: 720px) {
    .shotcharts-layout {
        grid-template-columns: 1fr;
    }
    .shotcharts-header {
        gap: 8px;
    }
    .shotcharts-tab {
        padding: 6px 10px;
        font-size: 11px;
    }
    .shotcharts-tab-body {
        padding: 12px 12px 14px;
    }
    .shotcharts-controls {
        gap: 16px;
    }
    .shotcharts-pill {
        padding: 4px 10px;
        font-size: 10px;
    }
    /* Make court a touch shorter on phones to avoid huge letterboxing */
    .shotcharts-court { padding: 6px; }
}

/* ─────────────────────────────────────────────────────────
   Play Types compact panel (v0.9.6)
   Sits in the right column under the zone breakdown table
   on the Shot Diet tab. 4 columns, sortable, ▲▼● indicators
   on the DEF RANK column.
───────────────────────────────────────────────────────── */

.shotcharts-playtypes-panel {
    background: var(--bg-base);
    border: 1px solid var(--border);
}

/* Compact 4-column variant of the existing zonetable */
.shotcharts-playtypes-compact {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.shotcharts-playtypes-compact thead th {
    background: var(--bg-elev-2);
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    text-align: left;
    padding: 7px 10px;
}

.shotcharts-playtypes-compact th.zt-num {
    text-align: right;
}

.shotcharts-playtypes-compact tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--divider);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.shotcharts-playtypes-compact tbody td.zt-zone {
    font-family: var(--font-display);
    font-weight: 500;
}

.shotcharts-playtypes-compact tbody td.zt-num {
    text-align: right;
}

.shotcharts-playtypes-compact tbody tr:last-child td { border-bottom: none; }

/* DEF RANK cell — stays a normal table cell so column alignment holds.
   Inside, an inline-flex span pairs the glyph with the ordinal. */
.shotcharts-playtypes-compact td.pt-def-cell {
    /* table-cell default — don't override display */
}
.pt-def-inner {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    justify-content: flex-end;
}
.pt-def-text {
    font-family: var(--font-mono);
}

/* Triangle/dot glyph inline next to rank */
.pt-def-glyph {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
}
.pt-def-glyph.ind-pos     { color: var(--accent-pos); }
.pt-def-glyph.ind-neg     { color: var(--accent-neg); }
.pt-def-glyph.ind-neutral { color: var(--text-tertiary); }

.pt-def-na {
    color: var(--text-tertiary);
}

/* Mobile — table compresses naturally; just tighten padding */
@media (max-width: 720px) {
    .shotcharts-playtypes-compact thead th { padding: 6px 8px; font-size: 9px; }
    .shotcharts-playtypes-compact tbody td  { padding: 6px 8px; font-size: 11px; }
    .shotcharts-right-stack { gap: 10px; }
}

/* ─────────────────────────────────────────────────────────
   Active filters summary strip (v0.9.8)
   Rendered below the inline filter bar when one or more
   sheet filters are active. Auto-hides at zero filters.
───────────────────────────────────────────────────────── */
.active-filters-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px 10px;
    background: var(--bg-base);
    border-bottom: 1px solid var(--divider);
    font-family: var(--font-mono);
    font-size: 11px;
}

.active-filters-strip[hidden] { display: none; }

.active-filters-label {
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    font-size: 10px;
    padding-right: 4px;
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    background: var(--accent-pos-dim);
    color: var(--accent-pos);
    border: 1px solid var(--accent-pos-border);
    padding: 3px 9px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.active-filters-clear {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 3px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.active-filters-clear:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

@media (max-width: 720px) {
    .active-filters-strip { padding: 7px 12px 9px; gap: 6px; }
    .active-filters-clear { margin-left: 0; }
}

/* ─────────────────────────────────────────────────────────
   Filter sheet — v0.9.9 expanded sections
───────────────────────────────────────────────────────── */

/* Collapsible <details> sections */
.fs-section {
    border-top: 1px solid var(--divider);
    margin: 0;
}

.fs-section-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 14px;
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.fs-section-summary::-webkit-details-marker { display: none; }
.fs-section-summary:hover .fs-section-title { color: var(--text-primary); }

.fs-section-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

.fs-section-chevron {
    color: var(--text-tertiary);
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.fs-section[open] > .fs-section-summary .fs-section-chevron {
    transform: rotate(180deg);
}

.fs-section[open] > .fs-section-summary .fs-section-title {
    color: var(--text-primary);
}

.fs-section-body {
    padding: 4px 0 16px;
}

.fs-section-hint {
    color: var(--text-tertiary);
    font-size: 11px;
    line-height: 1.5;
    padding-top: 8px;
}

/* Two-column grid for the Games checkboxes (Wins | Losses) */
.fs-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.fs-section-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fs-checklabel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--text-secondary);
    transition: color 0.15s ease;
}
.fs-checklabel:hover { color: var(--text-primary); }
.fs-checklabel input[type="checkbox"]:checked + span { color: var(--accent-pos); }

/* Custom checkbox styled for our dark theme */
.fs-check {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border);
    background: var(--bg-elev-1);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.fs-check:hover { border-color: var(--border-strong); }
.fs-check:checked {
    background: var(--accent-pos);
    border-color: var(--accent-pos);
}
.fs-check:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid var(--bg-base);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ─── Stat filter rows (one per stat in #fs-stats-body) ── */
.fs-stat-row {
    padding: 14px 0;
    border-bottom: 1px solid var(--divider);
}
.fs-stat-row:last-child { border-bottom: none; }

.fs-stat-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    gap: 12px;
}

.fs-stat-toggle {
    flex: 1;
    min-width: 0;
}

.fs-stat-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}
.fs-stat-row-enabled .fs-stat-name { color: var(--accent-pos); }

.fs-stat-readout {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
.fs-stat-row-enabled .fs-stat-readout { color: var(--text-primary); }

.fs-stat-readout-sep {
    margin: 0 4px;
    color: var(--text-tertiary);
}

/* Bar preview — sparkline-style row of bars spanning the full width of
   the container so the bars align horizontally with the slider below.
   Bars grow to fill but cap at a reasonable width so they don't become
   fat blocks. justify-content: space-evenly keeps them balanced when
   game count is small. */
.fs-stat-preview {
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    gap: 4px;
    height: 144px;
    margin: 8px 0 12px;
    padding: 6px 8px;
    background: var(--bg-base);
    border: 1px solid var(--divider);
    overflow: hidden;
}
.fs-preview-bar {
    flex: 1 1 0;
    max-width: 28px;
    min-width: 4px;
    /* Visible floor of 3px so zero-value bars don't disappear */
    min-height: 3px;
    background: var(--accent-pos);
    transition: opacity 0.15s ease, background 0.15s ease;
    align-self: flex-end;
}
.fs-preview-bar-dim {
    background: var(--text-tertiary);
    opacity: 0.35;
}

/* Disabled stat row (column missing from CSV) */
.fs-stat-row-disabled {
    opacity: 0.4;
}
.fs-stat-row-disabled .fs-stat-toggle { cursor: not-allowed; }
.fs-stat-row-disabled .fs-rangeslider { pointer-events: none; }

.fs-stat-nodata {
    display: inline-block;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 8px 6px;
    align-self: center;
}

/* ─── Dual-thumb range slider ─── */
.fs-rangeslider {
    position: relative;
    height: 24px;
    margin: 0;
    padding: 10px 0;
}
.fs-rangeslider-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: var(--bg-elev-2);
    border: 1px solid var(--divider);
    pointer-events: none;
}
.fs-rangeslider-fill {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: var(--accent-pos);
    pointer-events: none;
    transition: left 0.05s linear, right 0.05s linear;
}

/* The two range inputs sit on top of each other. Both have the full track
   width but only their thumbs are visible. */
.fs-rangeslider-input {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
}

/* Webkit thumb */
.fs-rangeslider-input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-primary);
    border: 2px solid var(--accent-pos);
    cursor: grab;
    pointer-events: auto;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    transition: transform 0.1s ease;
}
.fs-rangeslider-input::-webkit-slider-thumb:hover { transform: scale(1.15); }
.fs-rangeslider-input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.2); }

/* Webkit track — invisible (we draw our own) */
.fs-rangeslider-input::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
    height: 100%;
}

/* Firefox thumb */
.fs-rangeslider-input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-primary);
    border: 2px solid var(--accent-pos);
    cursor: grab;
    pointer-events: auto;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.fs-rangeslider-input::-moz-range-track {
    background: transparent;
    border: none;
    height: 4px;
}

/* Axis labels under the slider */
.fs-rangeslider-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ─── Defense rank section internals ─── */
.fs-defrank-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fs-rangeslider-wrap {
    display: flex;
    flex-direction: column;
}

.fs-rangeslider-readout {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 600;
}
.fs-rangeslider-sep { color: var(--text-tertiary); }

/* Mobile tweaks */
@media (max-width: 720px) {
    .fs-section-grid { grid-template-columns: 1fr; gap: 6px; }
    .fs-stat-preview { height: 88px; }
    .fs-preview-bar { max-width: 18px; }
    .fs-rangeslider-input::-webkit-slider-thumb {
        width: 20px; height: 20px;  /* larger touch target */
    }
    .fs-rangeslider-input::-moz-range-thumb {
        width: 20px; height: 20px;
    }
}
/* ═══════════════════════════════════════════════════════════════════
   v0.12.0 — Supporting Stats row
   Sits inside .chart-wrap, between .chart-header and .chart-canvas-wrap.
   Lets users pivot the main chart bars to a context stat (Minutes,
   Fouls, Field Goals, etc.) without leaving the prop page.

   Layout:
     [Tabs row .................................] [Avg | Med toggle]
     [Primary | Sup1 | Sup2 | Sup3 ...]

   Each tab has a label (top) and a value/summary (bottom).
   Active tab gets bolder label + brighter color; inactive tabs muted.
   ═══════════════════════════════════════════════════════════════════ */

.supporting-stats {
    border-bottom: 1px solid var(--divider);
    padding: 14px 24px 16px;
    background: var(--bg-elev-1);
}

.supporting-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.supporting-stats-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.supporting-stats-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 6px 18px 6px 0;
    margin-right: 18px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 120ms ease, opacity 120ms ease;
    opacity: 0.55;
}

.supporting-stats-tab:hover {
    opacity: 0.85;
}

.supporting-stats-tab-active {
    opacity: 1;
    border-bottom-color: var(--text-primary);
}

.supporting-stats-tab-disabled {
    cursor: default;
    opacity: 0.4;
}

.supporting-stats-tab-disabled:hover {
    opacity: 0.4;
}

.supporting-stats-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.supporting-stats-tab-active .supporting-stats-label {
    color: var(--text-primary);
}

.supporting-stats-value {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
    line-height: 1.3;
    /* Composite mode renders 2 lines ("X Made (YY%)" \n "Z Attempts").
       Preserve newline. */
    white-space: pre-line;
}

.supporting-stats-tab-active .supporting-stats-value {
    color: var(--text-primary);
}

/* Reserve consistent height so single-line and 2-line tabs align */
.supporting-stats-tab .supporting-stats-value {
    min-height: 18px;
}

/* ─── Average | Median toggle ──────────────────────────────────── */

.supporting-stats-summary-toggle {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 4px;
}

.supporting-stats-summary-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    white-space: nowrap;
}

.supporting-stats-summary-btn:hover {
    color: var(--text-secondary);
}

.supporting-stats-summary-btn + .supporting-stats-summary-btn {
    border-left: 1px solid var(--border);
}

.supporting-stats-summary-active {
    background: var(--bg-elev-2, rgba(255,255,245,0.06));
    color: var(--text-primary);
}

/* ─── Mobile (<= 720px) ────────────────────────────────────────── */

@media (max-width: 720px) {
    .supporting-stats {
        padding: 12px 16px 14px;
    }
    .supporting-stats-header {
        gap: 12px;
    }
    .supporting-stats-tabs {
        /* Horizontal scroll on narrow screens — feels more native than wrap */
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .supporting-stats-tabs::-webkit-scrollbar { display: none; }
    .supporting-stats-tab {
        margin-right: 14px;
        padding-right: 14px;
        flex-shrink: 0;
    }
    .supporting-stats-label {
        font-size: 9px;
    }
    .supporting-stats-value {
        font-size: 13px;
    }
    .supporting-stats-summary-btn {
        padding: 5px 10px;
        font-size: 9px;
    }
}
/* ============================================================
   TRENDS TAB — Insight Cards   (v0.11.0)
   Append to styles.css. All classes namespaced under
   .insight-card-*, .insights-feed, .trends-filter-bar
   to avoid collision with existing rules.
   ============================================================ */

/* Filter bar tweak — give the trends bar a wrap for many filters */
.trends-filter-bar {
    flex-wrap: wrap;
}

/* ─── Feed container ─────────────────────────────────────── */

.insights-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 24px;
}

/* ─── Card ─────────────────────────────────────────────────── */

.insight-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.insight-card-clickable {
    cursor: pointer;
}

.insight-card-clickable:hover {
    border-color: var(--border-strong);
    background: var(--bg-elev-2);
}

.insight-card-clickable:focus {
    outline: none;
    border-color: var(--accent-pos-border);
    background: var(--bg-elev-2);
}

/* ─── Header row (player/team identity + type pill) ──────── */

.insight-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.insight-card-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.insight-card-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.insight-card-team {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 2px;
}

.insight-card-type {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    padding: 4px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ─── Subline (game + tip-off time) ──────────────────────── */

.insight-card-subline {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
}

/* ─── Narrative (the headline sentence) ──────────────────── */

.insight-card-narrative {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.005em;
}

/* ─── Footer (side label + hit-rate bar + odds) ─────────── */

.insight-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.insight-card-side {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    flex-shrink: 0;
    min-width: 90px;
}

.insight-card-hit-bar {
    flex: 1;
    position: relative;
    height: 24px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.insight-card-hit-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--accent-pos-dim);
    border-right: 1px solid var(--accent-pos-border);
    transition: width 0.2s ease;
    z-index: 0;
}

.insight-card-hit-pct {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-pos);
    margin-left: auto;
}

.insight-card-odds {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-elev-3);
    border: 1px solid var(--border);
    padding: 4px 10px;
    flex-shrink: 0;
    min-width: 60px;
    text-align: center;
}

/* ─── Meta line (small "10/13 · last 13 games" footer) ──── */

.insight-card-meta {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-top: 1px solid var(--divider);
    padding-top: 8px;
    margin-top: 2px;
}

/* ─── Mobile ─────────────────────────────────────────────── */

@media (max-width: 640px) {
    .insight-card {
        padding: 14px;
    }

    .insight-card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .insight-card-side {
        min-width: 0;
    }

    .insight-card-hit-bar {
        width: 100%;
    }

    .insight-card-odds {
        align-self: flex-start;
    }
}
/* ============================================================
   TRENDS TAB CARD REDESIGN — v0.11.1
   Append to staging/styles.css. Overrides v0.11.0 .insight-card-*
   rules via cascade order (these come after the v0.11.0 block).
   New card classes: .insight-card-row, .insight-card-pattern,
   .insight-card-dots, .insight-card-dot, .insight-card-record,
   .insight-card-team-abbrev, .insight-card-avg, .insight-card-avg-label.
   ============================================================ */

/* Tighter feed gap — smaller cards mean less air needed */
.insights-feed {
    gap: 8px;
}

/* ─── Card body — denser, restrained ─────────────────────── */

.insight-card {
    padding: 12px 16px;
    gap: 8px;
}

/* ─── Header — name + team abbrev inline; type badge subtle ─ */

.insight-card-id {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
}

.insight-card-name {
    font-size: 14px;
}

.insight-card-team-abbrev {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Override the bordered-pill type badge with quieter type-only label */
.insight-card-type {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-muted);
    font-size: 9px;
    letter-spacing: 0.18em;
}

/* ─── Subline tighter ────────────────────────────────────── */

.insight-card-subline {
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-top: -2px;
}

/* ─── Hide v0.11.0 card elements that v0.11.1 replaces ──── */

.insight-card-narrative,
.insight-card-footer,
.insight-card-meta {
    display: none;
}

/* ─── New main row: side · dots · odds · avg ──────────────── */

.insight-card-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
}

.insight-card-side {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    flex-shrink: 0;
    min-width: 0;
    /* No width constraint on min-width here; let it size to content */
}

.insight-card-pattern {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.insight-card-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.insight-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.insight-dot-hit {
    background: var(--accent-pos);
}

.insight-dot-miss {
    background: transparent;
    border: 1px solid var(--border-strong, var(--border));
    width: 7px;   /* offset the 1px border to keep visual size identical */
    height: 7px;
}

.insight-card-record {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

/* Odds badge — tighter, mono, no fill */

.insight-card-odds {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--border);
    padding: 3px 8px;
    flex-shrink: 0;
    min-width: 0;
    text-align: center;
}

/* Average badge — small, muted, signals magnitude of trend */

.insight-card-avg {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.insight-card-avg-label {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.15em;
}

/* ─── Mobile (≤ 640px) ────────────────────────────────────── */

@media (max-width: 640px) {
    .insight-card {
        padding: 12px 14px;
    }

    .insight-card-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .insight-card-side {
        flex-basis: 100%;
        font-size: 13px;
    }

    .insight-card-pattern {
        order: 1;
    }

    .insight-card-odds {
        order: 2;
    }

    .insight-card-avg {
        order: 3;
        margin-left: auto;
    }
}
/* ============================================================
   TRENDS TAB — v0.11.2 — Player headshot + team logo on cards
   Append to staging/styles.css. Adds media block on the left of
   each card. Player cards: circular headshot with team logo
   notched into bottom-right. Team cards: large team logo only.
   New classes: .insight-card-body, .insight-card-media,
   .insight-card-headshot (+ -fallback), .insight-card-team-logo,
   .insight-card-team-logo-lg (+ -fallback), .insight-card-media-team.
   ============================================================ */

/* ─── Card becomes a horizontal flex: media | body ─────────── */

.insight-card {
    /* Override v0.11.0's `flex-direction: column; gap: 10px`
       (and v0.11.1's `gap: 8px`) — we now want media on the left
       and the existing card content on the right. */
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.insight-card-body {
    flex: 1;
    min-width: 0;        /* allows long names to truncate cleanly */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ─── Media container ────────────────────────────────────── */

.insight-card-media {
    flex-shrink: 0;
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Player headshot — circular, dark backdrop ─────────── */

.insight-card-headshot {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    /* Pull the bottom edge of the headshot up so the head sits
       roughly centered. NBA headshot crops are wide and the head
       sits in the upper-third of the source image. */
    object-position: center 22%;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
}

.insight-card-headshot-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
}

/* ─── Team logo overlap on player cards ─────────────────── */

.insight-card-team-logo {
    position: absolute;
    bottom: -2px;
    right: -4px;
    width: 24px;
    height: 24px;
    object-fit: contain;
    background: var(--bg-elev-1);
    border-radius: 50%;
    padding: 2px;
    /* Slight ring against the card backdrop so the SVG never
       disappears into a similarly-colored team palette. */
    box-shadow: 0 0 0 1px var(--border);
}

/* ─── Big team logo on team cards (TEAM_TOTAL / TEAM_ATS) ─ */

.insight-card-team-logo-lg {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.insight-card-team-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
}

/* ─── Mobile (≤ 640px) ────────────────────────────────────── */

@media (max-width: 640px) {
    .insight-card-media {
        width: 44px;
        height: 44px;
    }
    .insight-card-headshot,
    .insight-card-headshot-fallback {
        width: 44px;
        height: 44px;
    }
    .insight-card-team-logo {
        width: 20px;
        height: 20px;
    }
    .insight-card-team-logo-lg,
    .insight-card-team-logo-fallback {
        width: 40px;
        height: 40px;
    }
}
/* ============================================================
   TRENDS TAB — v0.11.3 — Per-game sparkline
   Append to staging/styles.css.
   Adds .insight-card-spark SVG styling. Bars: green for hits,
   dimmed for misses. Subtle dashed rule for the prop line.
   The dot-grid fallback (.insight-card-dots) still works for
   team cards / older data without per_game arrays.
   ============================================================ */

/* Tighten the pattern container so the SVG sits cleanly next to the record */
.insight-card-pattern {
    gap: 8px;
}

.insight-card-spark {
    flex-shrink: 0;
    display: block;
    overflow: visible;
}

/* Hit bars — solid accent green */
.spark-bar-hit {
    fill: var(--accent-pos);
}

/* Miss bars — dim against the card backdrop, just enough to read */
.spark-bar-miss {
    fill: var(--text-muted);
    opacity: 0.45;
}

/* Line threshold — dashed rule across the chart at the prop's line value */
.spark-line {
    stroke: var(--text-muted);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    opacity: 0.55;
}

/* ─── Mobile (≤ 640px) ────────────────────────────────────── */

@media (max-width: 640px) {
    .insight-card-spark {
        /* SVG is preserveAspectRatio=none so it scales fluidly,
           but cap to the available row width on narrow screens. */
        max-width: 100%;
    }
}
/* ============================================================
   TRENDS TAB — v0.11.3 — Per-game sparkline
   Append to staging/styles.css.
   Adds .insight-card-spark SVG styling. Bars: green for hits,
   dimmed for misses. Subtle dashed rule for the prop line.
   The dot-grid fallback (.insight-card-dots) still works for
   team cards / older data without per_game arrays.
   ============================================================ */

/* Tighten the pattern container so the SVG sits cleanly next to the record */
.insight-card-pattern {
    gap: 8px;
}

.insight-card-spark {
    flex-shrink: 0;
    display: block;
    overflow: visible;
}

/* Hit bars — solid accent green */
.spark-bar-hit {
    fill: var(--accent-pos);
}

/* Miss bars — dim against the card backdrop, just enough to read */
.spark-bar-miss {
    fill: var(--text-muted);
    opacity: 0.45;
}

/* Line threshold — dashed rule across the chart at the prop's line value */
.spark-line {
    stroke: var(--text-muted);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    opacity: 0.55;
}

/* ─── Mobile (≤ 640px) ────────────────────────────────────── */

@media (max-width: 640px) {
    .insight-card-spark {
        /* SVG is preserveAspectRatio=none so it scales fluidly,
           but cap to the available row width on narrow screens. */
        max-width: 100%;
    }
}
/* ─────────────────────────────────────────────────────────
   TITLETOWN v0.11.8 — Outlier-style filter pillbar + modal system
   Append this to staging/styles.css with:
     cat styles-append-v0.11.8.css >> styles.css

   Replaces / supersedes the v0.11.7 chip styling. The v0.11.7 rules
   (.filter-toggle-btn-type, .filter-toggle-btn-count, .filter-toggle-btn-disabled)
   target HTML elements that no longer exist in v0.11.8 trends.html — they
   become harmless dead CSS but won't conflict.

   Sections:
   1. Pill bar
   2. Modal overlay + card chrome
   3. Generic modal rows / lists
   4. Modal-specific layouts (range, sort grid, active-filters, headshots)
   5. Card save button (★)
   6. Hide the v0.11.6/.7 filter-bar (display:none) so old class names
      that may persist on the page don't show ghost UI
───────────────────────────────────────────────────────── */

/* ───── 1. PILL BAR ──────────────────────────────────────── */

.filter-pillbar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 24px;
    margin: 12px 0 22px;
    border: 1px solid var(--border, #2a2a2c);
    background: var(--bg-elev-1, #131316);
    border-radius: 12px;
}

.filter-pillbar-scroll {
    display: flex;
    gap: 8px;
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* v0.15.3.10 — hide scrollbar gutter; wheel/trackpad horizontal scroll preserved */
    scrollbar-width: none;          /* Firefox / standards */
    -ms-overflow-style: none;       /* legacy Edge / IE */
}
.filter-pillbar-scroll::-webkit-scrollbar { display: none; }  /* WebKit (Safari / Chrome) */

.filter-pillbar-count {
    flex-shrink: 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: var(--text-tertiary, #8a8a90);
    letter-spacing: 0.04em;
    padding-left: 12px;
    border-left: 1px solid var(--border, #2a2a2c);
    white-space: nowrap;
}

.filter-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 999px;
    background: var(--bg-elev-2, #1c1c20);
    color: var(--text-secondary, #b8b8bc);
    font-family: var(--font-display, 'Inter Tight', sans-serif);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    white-space: nowrap;
    line-height: 1.2;
}

.filter-pill:hover {
    background: var(--bg-elev-3, #25252a);
    border-color: var(--border-strong, #3a3a3e);
    color: var(--text-primary, #ededef);
}

.filter-pill-active {
    background: var(--accent-pos-bg, #1a3d2b);
    border-color: var(--accent-pos, #4ade80);
    color: var(--accent-pos, #4ade80);
}

.filter-pill-active:hover {
    background: #214d35;
    border-color: var(--accent-pos, #4ade80);
    color: var(--accent-pos, #4ade80);
}

.filter-pill-icon {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    opacity: 0.85;
}

.filter-pill-caret {
    font-size: 9px;
    margin-left: 2px;
    opacity: 0.6;
}

.filter-pill-master {
    background: var(--bg-elev-3, #25252a);
}
.filter-pill-toggle .filter-pill-icon { font-size: 13px; }
.filter-pill-active .filter-pill-icon { opacity: 1; }

/* ───── 2. MODAL OVERLAY + CARD ──────────────────────────── */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: modal-fade-in 120ms ease;
}
.modal-overlay[hidden] { display: none; }
@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-card {
    background: var(--bg-elev-1, #131316);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 14px;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: modal-card-rise 160ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
@keyframes modal-card-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border, #2a2a2c);
}

.modal-title {
    margin: 0;
    font-family: var(--font-display, 'Inter Tight', sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #ededef);
}

.modal-close-x {
    background: transparent;
    border: none;
    color: var(--text-tertiary, #8a8a90);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 120ms ease, background 120ms ease;
}
.modal-close-x:hover {
    color: var(--text-primary, #ededef);
    background: var(--bg-elev-2, #1c1c20);
}

.modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 12px 14px;
    /* Scrollbar styling */
    scrollbar-width: thin;
}
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border-strong, #3a3a3e); border-radius: 3px; }

.modal-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--border, #2a2a2c);
}

.modal-clear {
    flex: 0 0 auto;
    width: 42px;
    height: 38px;
    background: var(--bg-elev-2, #1c1c20);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 8px;
    color: var(--text-tertiary, #8a8a90);
    cursor: pointer;
    font-size: 14px;
    transition: color 120ms ease, border-color 120ms ease;
}
.modal-clear:hover {
    color: var(--accent-neg, #ef4444);
    border-color: var(--accent-neg, #ef4444);
}

.modal-done {
    flex: 1 1 auto;
    height: 38px;
    background: var(--bg-elev-2, #1c1c20);
    border: 1px solid var(--border-strong, #3a3a3e);
    border-radius: 8px;
    color: var(--text-primary, #ededef);
    font-family: var(--font-display, 'Inter Tight', sans-serif);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease;
}
.modal-done:hover { background: var(--bg-elev-3, #25252a); }

/* ───── 3. GENERIC MODAL ROWS / LISTS ────────────────────── */

.modal-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-elev-2, #1c1c20);
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-primary, #ededef);
    font-family: var(--font-display, 'Inter Tight', sans-serif);
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
}

.modal-row:hover:not(.modal-row-disabled) {
    background: var(--bg-elev-3, #25252a);
}

.modal-row-selected {
    background: var(--bg-elev-3, #25252a);
    border-color: var(--border-strong, #3a3a3e);
}

.modal-row-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.modal-row-label {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-row-sub {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: var(--text-tertiary, #8a8a90);
    font-weight: 400;
}

.modal-row-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 5px;
    color: var(--accent-pos, #4ade80);
    font-size: 13px;
    line-height: 1;
}
.modal-row-selected .modal-row-check {
    background: var(--accent-pos-bg, #1a3d2b);
    border-color: var(--accent-pos, #4ade80);
}

/* Search input inside modals */
.modal-search-wrap {
    position: relative;
    margin: 4px 4px 12px;
}
.modal-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary, #8a8a90);
    font-size: 14px;
    pointer-events: none;
}
.modal-search-input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    background: var(--bg-elev-2, #1c1c20);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 8px;
    color: var(--text-primary, #ededef);
    font-family: var(--font-display, 'Inter Tight', sans-serif);
    font-size: 13px;
    outline: none;
    transition: border-color 120ms ease;
}
.modal-search-input:focus { border-color: var(--border-strong, #3a3a3e); }
.modal-search-input::placeholder { color: var(--text-tertiary, #8a8a90); }

/* Group label inside Splits modal */
.modal-group-label {
    margin: 12px 4px 6px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: var(--text-tertiary, #8a8a90);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ───── 4. MODAL-SPECIFIC LAYOUTS ───────────────────────── */

/* Range inputs (Odds, Hit Rate) */
.modal-range {
    padding: 4px;
}
.modal-range-row {
    display: flex;
    align-items: stretch;
    background: var(--bg-elev-2, #1c1c20);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 10px;
    overflow: hidden;
}
.modal-range-cell {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    cursor: text;
}
.modal-range-cell-label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: var(--text-tertiary, #8a8a90);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.modal-range-input {
    background: transparent;
    border: none;
    color: var(--text-primary, #ededef);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 500;
    outline: none;
    padding: 0;
    width: 100%;
}
.modal-range-input::-webkit-outer-spin-button,
.modal-range-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.modal-range-input { -moz-appearance: textfield; appearance: textfield; }
.modal-range-sep {
    align-self: center;
    color: var(--text-tertiary, #8a8a90);
    padding: 0 6px;
    border-left: 1px solid var(--border, #2a2a2c);
    border-right: 1px solid var(--border, #2a2a2c);
    height: 100%;
    display: flex;
    align-items: center;
}
.modal-help {
    margin: 10px 4px 0;
    color: var(--text-tertiary, #8a8a90);
    font-size: 11.5px;
    line-height: 1.5;
}

/* Sort 2x2 grid */
.modal-sort-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 4px;
}
.modal-sort-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    background: var(--bg-elev-2, #1c1c20);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 10px;
    color: var(--text-primary, #ededef);
    font-family: var(--font-display, 'Inter Tight', sans-serif);
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
}
.modal-sort-cell:hover {
    background: var(--bg-elev-3, #25252a);
    border-color: var(--border-strong, #3a3a3e);
}
.modal-sort-cell-selected {
    border-color: var(--accent-pos, #4ade80);
    color: var(--accent-pos, #4ade80);
}
.modal-sort-arrow {
    font-size: 16px;
    line-height: 1;
}
.modal-sort-label {
    font-size: 13.5px;
    font-weight: 500;
}

/* Active-filters summary modal */
.modal-active-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px;
}
.modal-active-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-elev-2, #1c1c20);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 10px;
    color: var(--text-primary, #ededef);
    font-size: 13px;
}
.modal-active-chip-x {
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 50%;
    color: var(--text-tertiary, #8a8a90);
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}
.modal-active-chip-x:hover {
    color: var(--accent-neg, #ef4444);
    border-color: var(--accent-neg, #ef4444);
}
.modal-clear-all {
    margin-top: 4px;
    padding: 12px;
    background: transparent;
    border: 1px dashed var(--border-strong, #3a3a3e);
    border-radius: 10px;
    color: var(--accent-neg, #ef4444);
    font-family: var(--font-display, 'Inter Tight', sans-serif);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.modal-clear-all:hover {
    background: rgba(239, 68, 68, 0.06);
}
.modal-empty-msg {
    padding: 20px;
    text-align: center;
    color: var(--text-tertiary, #8a8a90);
    font-size: 13px;
}

/* Headshots / logos in Players & Teams modals */
.modal-row-headshot {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-elev-3, #25252a);
}
.modal-row-headshot-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: var(--text-tertiary, #8a8a90);
}
.modal-row-logo {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.modal-row-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-elev-3, #25252a);
    border-radius: 6px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: var(--text-secondary, #b8b8bc);
}

/* ───── 5. CARD SAVE BUTTON ─────────────────────────────── */

.insight-card-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.insight-card-save {
    background: transparent;
    border: none;
    color: var(--text-tertiary, #6a6a70);
    font-size: 18px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
    transition: color 120ms ease, transform 120ms ease;
    border-radius: 4px;
}
.insight-card-save:hover {
    color: var(--text-secondary, #b8b8bc);
    transform: scale(1.1);
}
.insight-card-save-on {
    color: #fbbf24;
}
.insight-card-save-on:hover {
    color: #f59e0b;
}

/* ───── 6. HIDE LEGACY FILTER BAR ───────────────────────── */
/* The v0.11.6 / v0.11.7 .filter-bar / .trends-filter-bar is removed from
   the new trends.html, but if any cached HTML or older code path renders
   it, hide so it doesn't show ghost UI alongside the new pillbar. */
.filter-bar.trends-filter-bar { display: none !important; }

/* Mobile (narrow viewports) */
@media (max-width: 720px) {
    .filter-pillbar {
        padding: 10px 14px;
        gap: 10px;
        margin: 8px 0 16px;
    }
    .filter-pillbar-count {
        padding-left: 8px;
        font-size: 10.5px;
    }
    .filter-pill {
        padding: 6px 12px;
        font-size: 12px;
    }
    .modal-card {
        max-width: 100%;
        max-height: calc(100vh - 32px);
    }
}
/* ─────────────────────────────────────────────────────────
   TITLETOWN v0.11.9 — Outlier-density card redesign
   Append this to staging/styles.css with:
     cat styles-append-v0.11.9.css >> styles.css

   Replaces the v0.11.8 (and prior) verbose card layout with a
   compact horizontal layout: [media] [center] [right column].
   The renderCard function in trends.js writes the new ic-v2
   class on every <article>; this file targets that.

   Legacy .insight-card-* rules (e.g. .insight-card-body,
   .insight-card-row, .insight-card-side, .insight-card-pattern,
   .insight-card-record, .insight-card-avg, .insight-card-odds,
   .insight-card-headshot, .insight-card-team-logo, etc.) are
   no longer rendered by renderCard, so they become dead CSS.
   They don't conflict with the new rules because the new HTML
   doesn't carry those class names.
───────────────────────────────────────────────────────── */

/* ───── Card container ──────────────────────────────────── */
/* The existing .insight-card rule sets a vertical flex / lots of padding.
   .ic-v2 overrides to horizontal flex with tighter padding. The selector
   is .insight-card.ic-v2 to win specificity over the older single-class. */

.insight-card.ic-v2 {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 12px;
    margin: 0 0 6px;
    background: var(--bg-elev-1, #131316);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 8px;
    position: relative;
    transition: border-color 100ms ease, background 100ms ease;
    /* Reset anything inherited from .insight-card's older flex-direction */
    flex-direction: row;
}

.insight-card.ic-v2:hover {
    border-color: var(--border-strong, #3a3a3e);
    background: var(--bg-elev-2, #1c1c20);
}

.insight-card.ic-v2.ic-clickable { cursor: pointer; }

/* ───── Media (left): compact ───────────────────────────── */

.ic-media {
    flex-shrink: 0;
    position: relative;
    width: 40px;
    height: 40px;
}

.ic-headshot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-elev-2, #1c1c20);
    border: 1px solid var(--border, #2a2a2c);
}

.ic-headshot-fb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: var(--text-secondary, #b8b8bc);
}

/* Small team mark in the bottom-right of the headshot */
.ic-team-mark {
    position: absolute;
    bottom: -2px;
    right: -3px;
    width: 18px;
    height: 18px;
    object-fit: contain;
    background: var(--bg-elev-1, #131316);
    border: 1.5px solid var(--bg-elev-1, #131316);
    border-radius: 50%;
    padding: 1px;
}

.ic-media-team .ic-team-logo-lg {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.ic-team-logo-fb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev-2, #1c1c20);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 6px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: var(--text-secondary, #b8b8bc);
}

/* ───── Center column ───────────────────────────────────── */

.ic-center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ic-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.ic-id {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ic-name {
    font-family: var(--font-display, 'Inter Tight', sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary, #ededef);
    line-height: 1.1;
    flex-shrink: 0;
}

.ic-team-tag {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary, #8a8a90);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.ic-game {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: var(--text-tertiary, #6a6a70);
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.ic-type {
    flex-shrink: 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary, #6a6a70);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 3px;
    padding: 2px 6px;
    line-height: 1.2;
    white-space: nowrap;
}

/* ───── Narrative (the main body sentence) ──────────────── */

.ic-narrative {
    font-family: var(--font-display, 'Inter Tight', sans-serif);
    font-size: 12.5px;
    color: var(--text-secondary, #b8b8bc);
    line-height: 1.4;
    /* Truncate to 2 lines max */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ───── Sparkline / dot row ─────────────────────────────── */

.ic-spark-wrap {
    display: flex;
    align-items: center;
    margin-top: 2px;
    /* Shrink any oversized inherited sparkline so it fits the dense card */
    max-height: 22px;
    overflow: hidden;
}
.ic-spark-wrap .insight-card-spark {
    height: 22px;
    max-width: 100%;
}

.ic-dots {
    display: inline-flex;
    gap: 3px;
}
.ic-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.ic-dot-hit { background: var(--accent-pos, #4ade80); }
.ic-dot-miss { background: var(--accent-neg, #ef4444); opacity: 0.5; }

/* ───── Right column: hit% + line + odds ────────────────── */

.ic-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    min-width: 92px;
    padding-left: 12px;
    border-left: 1px solid var(--border, #2a2a2c);
    text-align: right;
}

.ic-hitrate {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-pos, #4ade80);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.ic-record {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: var(--text-tertiary, #6a6a70);
    line-height: 1.2;
    margin-top: -1px;
}

.ic-line {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-secondary, #b8b8bc);
    margin-top: 4px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.ic-odds {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-primary, #ededef);
    background: var(--bg-elev-2, #1c1c20);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 4px;
    padding: 1px 6px;
    margin-top: 2px;
    line-height: 1.3;
}

/* ───── Save button (top-right corner) ──────────────────── */
/* In v0.11.8 this was inside the header; in v0.11.9 it's absolutely
   positioned in the card's top-right corner so it's discoverable
   regardless of card content density. */

.insight-card.ic-v2 .ic-save {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: none;
    color: var(--text-tertiary, #555558);
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
    transition: color 120ms ease, transform 120ms ease;
    border-radius: 3px;
    z-index: 2;
}
.insight-card.ic-v2 .ic-save:hover {
    color: var(--text-secondary, #b8b8bc);
    transform: scale(1.15);
}
.insight-card.ic-v2 .ic-save-on {
    color: #fbbf24;
}
.insight-card.ic-v2 .ic-save-on:hover {
    color: #f59e0b;
}

/* ───── Hide legacy v0.11.8 save button styling ─────────── */
/* The old .insight-card-save class is no longer rendered; ensure no
   ghost styles fire if any cached HTML still uses it. */
.insight-card-save:not(.ic-save) { display: none !important; }
.insight-card-header-right:not(.ic-top-row) {
    /* The v0.11.8 right-cluster div is no longer rendered. Belt and braces. */
    display: none;
}

/* ───── Feed wrapper: tighter spacing between cards ─────── */
/* The .insights-feed has the existing rules from earlier versions;
   we only adjust gap if needed. Most existing rules use margin on
   each card which we already shrunk above (margin: 0 0 6px). */

.insights-feed {
    /* Override any existing feed gap that pushed cards too far apart */
    padding: 0;
}

/* ───── Mobile (≤720px) ─────────────────────────────────── */

@media (max-width: 720px) {
    .insight-card.ic-v2 {
        padding: 8px 10px;
        gap: 10px;
    }
    .ic-media { width: 34px; height: 34px; }
    .ic-headshot { width: 34px; height: 34px; }
    .ic-team-mark { width: 14px; height: 14px; }
    .ic-name { font-size: 12.5px; }
    .ic-narrative { font-size: 11.5px; }
    .ic-right { min-width: 78px; padding-left: 8px; }
    .ic-hitrate { font-size: 15px; }
    .ic-line { font-size: 9.5px; max-width: 100px; }
    .ic-type { display: none; } /* drop type badge on narrow screens */
}
/* ─────────────────────────────────────────────────────────
   TITLETOWN v0.11.9 — Outlier-density card redesign
   Append this to staging/styles.css with:
     cat styles-append-v0.11.9.css >> styles.css

   Replaces the v0.11.8 (and prior) verbose card layout with a
   compact horizontal layout: [media] [center] [right column].
   The renderCard function in trends.js writes the new ic-v2
   class on every <article>; this file targets that.

   Legacy .insight-card-* rules (e.g. .insight-card-body,
   .insight-card-row, .insight-card-side, .insight-card-pattern,
   .insight-card-record, .insight-card-avg, .insight-card-odds,
   .insight-card-headshot, .insight-card-team-logo, etc.) are
   no longer rendered by renderCard, so they become dead CSS.
   They don't conflict with the new rules because the new HTML
   doesn't carry those class names.
───────────────────────────────────────────────────────── */

/* ───── Card container ──────────────────────────────────── */
/* The existing .insight-card rule sets a vertical flex / lots of padding.
   .ic-v2 overrides to horizontal flex with tighter padding. The selector
   is .insight-card.ic-v2 to win specificity over the older single-class. */

.insight-card.ic-v2 {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px 10px 12px;
    margin: 0 0 6px;
    background: var(--bg-elev-1, #131316);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 8px;
    position: relative;
    transition: border-color 100ms ease, background 100ms ease;
    /* Reset anything inherited from .insight-card's older flex-direction */
    flex-direction: row;
}

.insight-card.ic-v2:hover {
    border-color: var(--border-strong, #3a3a3e);
    background: var(--bg-elev-2, #1c1c20);
}

.insight-card.ic-v2.ic-clickable { cursor: pointer; }

/* ───── Media (left): compact ───────────────────────────── */

.ic-media {
    flex-shrink: 0;
    position: relative;
    width: 40px;
    height: 40px;
}

.ic-headshot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-elev-2, #1c1c20);
    border: 1px solid var(--border, #2a2a2c);
}

.ic-headshot-fb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: var(--text-secondary, #b8b8bc);
}

/* Small team mark in the bottom-right of the headshot */
.ic-team-mark {
    position: absolute;
    bottom: -2px;
    right: -3px;
    width: 18px;
    height: 18px;
    object-fit: contain;
    background: var(--bg-elev-1, #131316);
    border: 1.5px solid var(--bg-elev-1, #131316);
    border-radius: 50%;
    padding: 1px;
}

.ic-media-team .ic-team-logo-lg {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.ic-team-logo-fb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev-2, #1c1c20);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 6px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: var(--text-secondary, #b8b8bc);
}

/* ───── Center column ───────────────────────────────────── */

.ic-center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ic-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.ic-id {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ic-name {
    font-family: var(--font-display, 'Inter Tight', sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary, #ededef);
    line-height: 1.1;
    flex-shrink: 0;
}

.ic-team-tag {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary, #8a8a90);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.ic-game {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: var(--text-tertiary, #6a6a70);
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.ic-type {
    flex-shrink: 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary, #6a6a70);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 3px;
    padding: 2px 6px;
    line-height: 1.2;
    white-space: nowrap;
}

/* ───── Narrative (the main body sentence) ──────────────── */

.ic-narrative {
    font-family: var(--font-display, 'Inter Tight', sans-serif);
    font-size: 12.5px;
    color: var(--text-secondary, #b8b8bc);
    line-height: 1.4;
    /* Truncate to 2 lines max */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ───── Sparkline / dot row ─────────────────────────────── */

.ic-spark-wrap {
    display: flex;
    align-items: center;
    margin-top: 2px;
    /* Shrink any oversized inherited sparkline so it fits the dense card */
    max-height: 22px;
    overflow: hidden;
}
.ic-spark-wrap .insight-card-spark {
    height: 22px;
    max-width: 100%;
}

.ic-dots {
    display: inline-flex;
    gap: 3px;
}
.ic-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.ic-dot-hit { background: var(--accent-pos, #4ade80); }
.ic-dot-miss { background: var(--accent-neg, #ef4444); opacity: 0.5; }

/* ───── Right column: hit% + line + odds ────────────────── */

.ic-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    min-width: 92px;
    padding-left: 12px;
    border-left: 1px solid var(--border, #2a2a2c);
    text-align: right;
}

.ic-hitrate {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-pos, #4ade80);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.ic-record {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: var(--text-tertiary, #6a6a70);
    line-height: 1.2;
    margin-top: -1px;
}

.ic-line {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-secondary, #b8b8bc);
    margin-top: 4px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.ic-odds {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-primary, #ededef);
    background: var(--bg-elev-2, #1c1c20);
    border: 1px solid var(--border, #2a2a2c);
    border-radius: 4px;
    padding: 1px 6px;
    margin-top: 2px;
    line-height: 1.3;
}

/* ───── Save button (top-right corner) ──────────────────── */
/* In v0.11.8 this was inside the header; in v0.11.9 it's absolutely
   positioned in the card's top-right corner so it's discoverable
   regardless of card content density. */

.insight-card.ic-v2 .ic-save {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: none;
    color: var(--text-tertiary, #555558);
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
    transition: color 120ms ease, transform 120ms ease;
    border-radius: 3px;
    z-index: 2;
}
.insight-card.ic-v2 .ic-save:hover {
    color: var(--text-secondary, #b8b8bc);
    transform: scale(1.15);
}
.insight-card.ic-v2 .ic-save-on {
    color: #fbbf24;
}
.insight-card.ic-v2 .ic-save-on:hover {
    color: #f59e0b;
}

/* ───── Hide legacy v0.11.8 save button styling ─────────── */
/* The old .insight-card-save class is no longer rendered; ensure no
   ghost styles fire if any cached HTML still uses it. */
.insight-card-save:not(.ic-save) { display: none !important; }
.insight-card-header-right:not(.ic-top-row) {
    /* The v0.11.8 right-cluster div is no longer rendered. Belt and braces. */
    display: none;
}

/* ───── Feed wrapper: tighter spacing between cards ─────── */
/* The .insights-feed has the existing rules from earlier versions;
   we only adjust gap if needed. Most existing rules use margin on
   each card which we already shrunk above (margin: 0 0 6px). */

.insights-feed {
    /* Override any existing feed gap that pushed cards too far apart */
    padding: 0;
}

/* ───── Mobile (≤720px) ─────────────────────────────────── */

@media (max-width: 720px) {
    .insight-card.ic-v2 {
        padding: 8px 10px;
        gap: 10px;
    }
    .ic-media { width: 34px; height: 34px; }
    .ic-headshot { width: 34px; height: 34px; }
    .ic-team-mark { width: 14px; height: 14px; }
    .ic-name { font-size: 12.5px; }
    .ic-narrative { font-size: 11.5px; }
    .ic-right { min-width: 78px; padding-left: 8px; }
    .ic-hitrate { font-size: 15px; }
    .ic-line { font-size: 9.5px; max-width: 100px; }
    .ic-type { display: none; } /* drop type badge on narrow screens */
}

/* ─────────────────────────────────────────────────────────
   v0.13.1 — Props grid (Outlier-style)
───────────────────────────────────────────────────────── */

.props-grid-wrap {
    margin: 16px 0;
    border: 1px solid var(--border-color, #1c1c1c);
    border-radius: 8px;
    background: var(--bg-elev-1, #0d0d0d);
    overflow: hidden;
}
.props-grid-scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
.props-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: var(--text-primary, #e8e8e8);
    min-width: 1100px;
}
.pg-th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-elev-2, #131313);
    color: var(--text-secondary, #999);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    text-align: right;
    padding: 10px 10px;
    border-bottom: 1px solid var(--border-color, #1c1c1c);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.pg-th:first-child { text-align: left; }
.pg-th-num { text-align: right; }
.pg-th-window { min-width: 60px; }
.pg-th-side { cursor: default; }
.pg-th-arrow {
    display: inline-block;
    width: 10px;
    color: var(--accent-pos, #4ade80);
    font-weight: 700;
    margin-left: 4px;
}
.pg-th-sorted {
    color: var(--text-primary, #e8e8e8);
    background: var(--bg-elev-3, #1a1a1a);
}
.pg-th[data-sort]:hover {
    color: var(--text-primary, #e8e8e8);
    background: var(--bg-elev-3, #1a1a1a);
}
.pg-th-sticky {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 240px;
}
.pg-row {
    cursor: pointer;
    transition: background 60ms ease;
}
.pg-row:hover { background: var(--bg-elev-2, #131313); }
.pg-row:hover .pg-td-sticky { background: var(--bg-elev-2, #131313); }
.pg-td {
    padding: 10px 10px;
    border-bottom: 1px solid var(--border-color-soft, #1a1a1a);
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
}
.pg-td-num { font-variant-numeric: tabular-nums; }
.pg-td:first-child { text-align: left; }
.pg-td-sticky {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-elev-1, #0d0d0d);
}
.pg-td-prop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-width: 240px;
}
.pg-save {
    background: transparent;
    border: 0;
    color: var(--text-tertiary, #555);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    transition: color 80ms;
}
.pg-save:hover { color: var(--text-secondary, #999); }
.pg-save.pg-save-on { color: var(--accent-warn, #fbbf24); }
.pg-team-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
.pg-prop-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pg-prop-line1 { display: flex; align-items: center; gap: 8px; }
.pg-player {
    font-family: var(--font-sans, 'Inter Tight', sans-serif);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary, #e8e8e8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg-team-pill {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #999);
    background: var(--bg-elev-3, #1a1a1a);
    border-radius: 3px;
    padding: 2px 6px;
}
.pg-prop-line2 {
    font-size: 10px;
    color: var(--text-tertiary, #777);
    display: flex;
    gap: 8px;
}
.pg-market { color: var(--text-secondary, #999); }
.pg-game-sub::before {
    content: "·";
    margin-right: 6px;
    color: var(--text-tertiary, #555);
}
.pg-side-pill {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 3px;
    padding: 3px 8px;
}
.pg-side-over { color: #4ade80; background: rgba(74, 222, 128, 0.10); }
.pg-side-under { color: #f87171; background: rgba(248, 113, 113, 0.10); }
.pg-td-ev { font-weight: 600; }
.pg-ev-pos { color: #4ade80; }
.pg-ev-neg { color: #f87171; }
.pg-td-hit { font-weight: 600; position: relative; min-width: 50px; }
.pg-hit-green { color: #4ade80; background: rgba(74, 222, 128, 0.08); }
.pg-hit-yellow { color: #fbbf24; background: rgba(251, 191, 36, 0.08); }
.pg-hit-red { color: #f87171; background: rgba(248, 113, 113, 0.08); }
.pg-hit-empty { color: var(--text-tertiary, #555); }
.pg-hit-sub {
    display: block;
    font-size: 8.5px;
    font-weight: 500;
    color: var(--text-tertiary, #777);
    margin-top: 2px;
    letter-spacing: 0.02em;
}
.pg-td-rank { font-weight: 600; }
.pg-rank-good { color: #f87171; }
.pg-rank-bad  { color: #4ade80; }
.pg-rank-empty { color: var(--text-tertiary, #555); }
.pg-truncated td { background: var(--bg-elev-1, #0d0d0d); }
.modal-help {
    margin: 8px 4px 0 4px;
    font-size: 10.5px;
    color: var(--text-tertiary, #777);
    font-family: var(--font-mono, monospace);
    line-height: 1.4;
}
@media (max-width: 720px) {
    .pg-td, .pg-th { padding: 8px 6px; font-size: 10px; }
    .pg-th-sticky, .pg-td-prop { min-width: 200px; }
    .pg-player { font-size: 12px; }
}
/* ─────────────────────────────────────────────────────────
   TITLETOWN PROPS — v0.13.2-frontend append
   ----------------------------------------------------------
   Adds PrizePicks/DFS row styling on top of the v0.13.1 grid.

   New visual elements:
     • PP logo glyph in Odds column (purple D, ~14px)
     • Tier icons in Line column (red devil / green goblin)
     • EV+ badge in Proposition line1
     • Source modal tabs (Sportsbooks / DFS)
     • IP column width tuning
     • Subtle row decoration for PP rows (slim left border)

   IMPORTANT: append this file's contents to staging/styles.css.
   See README. Image assets live in staging/assets/.
───────────────────────────────────────────────────────── */

/* ── PP row decoration ──────────────────────────────────────
   v0.13.4.2 — REMOVED. Mo doesn't want PP rows visually
   stripped with a purple stripe — the PP logo glyph in the
   Odds column is sufficient identification. The .pg-row-pp
   class is still applied by props.js (used elsewhere); only
   the leftmost-cell stripe styling is gone. */
.pg-row-pp .pg-td-sticky {
    /* no stripe */
}

/* ── PP logo glyph in Odds column ──────────────────────────
   Renders inline before the American odds number. Sized to
   match the row's text height. */
.pg-pp-logo {
    width: 14px;
    height: 14px;
    object-fit: contain;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
    flex-shrink: 0;
}

/* The Odds <td> needs to be a flex container so the logo and
   number sit on one line and right-align together. .pg-td-num
   already sets text-align:right; we override here for PP rows
   while keeping sportsbook rows visually identical. */
.pg-td-odds {
    white-space: nowrap;
}
.pg-td-odds .pg-odds-num {
    font-variant-numeric: tabular-nums;
}

/* ── Tier icons in Line column ─────────────────────────────
   Red devil (demon) / green goblin (goblin) appear next to
   the line number. Standard tier renders no icon. */
.pg-td-line {
    white-space: nowrap;
}
.pg-td-line .pg-line-num {
    margin-right: 6px;
    font-variant-numeric: tabular-nums;
}
.pg-tier-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    display: inline-block;
    vertical-align: -2px;
    flex-shrink: 0;
}
/* Tier-specific tweaks for visual weight parity */
.pg-tier-demon { /* red devil — naturally darker, no extra tweak */ }
.pg-tier-goblin { /* green goblin — slightly lighter, no extra tweak */ }

/* v0.13.4.2 — Tier filter modal icons. Matches the grid icon size
   so the modal options visually mirror the icons appearing in the
   Line column. Spacing uses the same lead-icon convention as the
   Source modal book icons. */
.modal-tier-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: inline-block;
    flex-shrink: 0;
    margin-right: 10px;
    vertical-align: middle;
}

/* ── EV+ badge ─────────────────────────────────────────────
   Compact pill in the player line of the Proposition column.
   Single visual style for both PP and sportsbook rows — the
   badge means the same thing functionally (model identifies
   an edge), even though the underlying threshold differs. */
.pg-edge-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: rgba(74, 222, 128, 0.14);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.30);
    white-space: nowrap;
    line-height: 1.2;
}

/* ── IP column ─────────────────────────────────────────────
   Implied probability cell. Displayed as integer percent.
   No color tier — neutral by design (information, not signal). */
.pg-td-ip {
    color: var(--text-secondary, #999);
    font-weight: 600;
    min-width: 40px;
}

/* ── Source modal tabs ─────────────────────────────────────
   Two-tab strip at the top of the Source modal. Active tab
   is the only one with a colored underline; inactive tabs
   retain neutral text. Counts use the same modal-row-sub
   muting we already employ in other lists. */
.modal-tabs {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border-strong, #3a3a3e);
    margin-bottom: 8px;
}
.modal-tab {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--text-secondary, #999);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px; /* overlap parent border so the active tab's underline replaces it */
    transition: color 80ms ease;
}
.modal-tab:hover { color: var(--text-primary, #ddd); }
.modal-tab-active {
    color: var(--text-primary, #ddd);
    border-bottom-color: rgba(168, 85, 247, 0.75);
}
.modal-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 0 5px;
    height: 16px;
    border-radius: 8px;
    background: var(--bg-elev-2, #131313);
    color: var(--text-tertiary, #8a8a90);
    font-size: 9px;
    font-weight: 700;
}
.modal-tab-active .modal-tab-count {
    background: rgba(168, 85, 247, 0.15);
    color: rgba(216, 180, 254, 0.85);
}

/* ── Mobile tweaks ─────────────────────────────────────────
   Match the mobile shrink already applied to .pg-td / .pg-th. */
@media (max-width: 720px) {
    .pg-pp-logo,
    .pg-tier-icon { width: 12px; height: 12px; vertical-align: -1px; }
    .pg-edge-badge { font-size: 8px; padding: 1px 4px; }
    .modal-tab { font-size: 10px; padding: 9px 10px; }
}

/* ── v0.13.3.1 hotfix: book icons in Source modal ──────── */
.pg-book-icon-wrap {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    flex-shrink: 0;
    margin-right: 12px;
    border-radius: 6px;
    background: #131313;
    overflow: hidden;
    box-sizing: border-box;
    vertical-align: middle;
}
.pg-book-icon {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.pg-book-icon-placeholder-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #999;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
}
.modal-tabs-source {
    overflow-x: auto;
    scrollbar-width: none;
}
.modal-tabs-source::-webkit-scrollbar { display: none; }
.modal-tabs-source .modal-tab { flex-shrink: 0; }
/* ─────────────────────────────────────────────────────────
   styles-append-v0.13.4.1.9.css — share-card footer logo
   ----------------------------------------------------------
   Append to staging/styles.css:
       cat styles-append-v0.13.4.1.9.css >> styles.css

   Replaces the text-only TITLETOWN wordmark in the share-card
   footer with the brand logo image. Sized to render sharp at
   2x retina (target ~140px display width, 280px source render).
───────────────────────────────────────────────────────── */

/* Keep the text-fallback rule around in case the image is missing —
   harmless when the image loads (the .sc-footer-mark element is no
   longer rendered, so this rule never matches). */
.sc-footer-mark {
    /* unchanged from existing styles */
}
/* ─────────────────────────────────────────────────────────
   styles-append-v0.13.4.1.10b.css — share-card footer logo
   ----------------------------------------------------------
   PATCH FOR THE CSS FROM v0.13.4.1.10. The previous append
   used `height: auto` which collapses to 0 before the image
   has loaded. html-to-image measures the export target's
   bounding rect synchronously, so it captured a shorter
   region than the live modal — clipping the footer entirely.

   Fix: set explicit aspect-ratio so the footer reserves space
   from the very first paint, regardless of image load state.
   Source logo is 560×373 → ratio 1.5/1 (≈ 3:2).
   ----------------------------------------------------------
   To apply: append to staging/styles.css:
       cat styles-append-v0.13.4.1.10b.css >> styles.css
───────────────────────────────────────────────────────── */

/* Override the v0.13.4.1.10 rule. CSS cascade: last rule wins. */
/* ─────────────────────────────────────────────────────────
   styles-append-v0.13.4.1.10b.css — share-card footer logo
   ----------------------------------------------------------
   PATCH FOR THE CSS FROM v0.13.4.1.10. The previous append
   used `height: auto` which collapses to 0 before the image
   has loaded. html-to-image measures the export target's
   bounding rect synchronously, so it captured a shorter
   region than the live modal — clipping the footer entirely.

   Fix: set explicit aspect-ratio so the footer reserves space
   from the very first paint, regardless of image load state.
   Source logo is 560×373 → ratio 1.5/1 (≈ 3:2).
   ----------------------------------------------------------
   To apply: append to staging/styles.css:
       cat styles-append-v0.13.4.1.10b.css >> styles.css
───────────────────────────────────────────────────────── */

/* Override the v0.13.4.1.10 rule. CSS cascade: last rule wins. */
/* ─────────────────────────────────────────────────────────
   styles-append-v0.13.4.1.10b.css — share-card footer logo
   ----------------------------------------------------------
   PATCH FOR THE CSS FROM v0.13.4.1.10. The previous append
   used `height: auto` which collapses to 0 before the image
   has loaded. html-to-image measures the export target's
   bounding rect synchronously, so it captured a shorter
   region than the live modal — clipping the footer entirely.

   Fix: set explicit aspect-ratio so the footer reserves space
   from the very first paint, regardless of image load state.
   Source logo is 560×373 → ratio 1.5/1 (≈ 3:2).
   ----------------------------------------------------------
   To apply: append to staging/styles.css:
       cat styles-append-v0.13.4.1.10b.css >> styles.css
───────────────────────────────────────────────────────── */

/* Override the v0.13.4.1.10 rule. CSS cascade: last rule wins. */

/* TitleTown share-card footer logo */
.sc-footer-logo {
    display: block;
    width: 220px;
    aspect-ratio: 560 / 373;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}
/* ─────────────────────────────────────────────────────────
   v0.13.6 — Banned tab + BANNED pill
   Append to end of styles.css. No existing rules modified.
   ───────────────────────────────────────────────────────── */

/* The pill itself — used in props grid, trends cards, prop detail
   header, and the Banned tab list. Matches .pg-team-pill geometry
   exactly (size, padding, weight, letter-spacing) so it sits
   neighborly next to team pills. Color is muted gray to match
   [Low Sample] convention from spec v1.7. */
.tt-banned-pill {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #999);
    background: var(--bg-elev-3, #1a1a1a);
    border: 1px solid var(--border-subtle, #2a2a2a);
    border-radius: 3px;
    padding: 2px 6px;
    text-transform: uppercase;
    vertical-align: middle;
    /* Sit slightly down so it lines up with the player name baseline
       in the props grid where team pill is also flush-baseline. */
    transform: translateY(-1px);
}

/* Larger variant for the prop detail page header where the player
   name renders at heading size. Keeps proportion with the
   .prop-header-player h1. */
.prop-header-player .tt-banned-pill {
    font-size: 11px;
    padding: 3px 8px;
    margin-left: 10px;
    transform: translateY(-4px);
}

/* Trends-card variant. The .ic-name text is larger than props grid
   so bump the pill slightly. */
.ic-id .tt-banned-pill {
    margin-left: 4px;
}

/* ─── Banned tab page ───────────────────────────────────────── */

.bp-intro {
    margin: 0 0 24px;
    padding: 16px 20px;
    background: var(--bg-elev-1, #111);
    border: 1px solid var(--border-subtle, #2a2a2a);
    border-radius: 6px;
}
.bp-intro-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary, #999);
}
.bp-intro-text strong {
    color: var(--text-primary, #e6e6e6);
    font-weight: 600;
}
.bp-intro-text code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    background: var(--bg-elev-2, #161616);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--text-primary, #e6e6e6);
}

.bp-controls {
    margin: 0 0 24px;
}
.bp-add-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.bp-input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    color: var(--text-primary, #e6e6e6);
    background: var(--bg-elev-1, #111);
    border: 1px solid var(--border-subtle, #2a2a2a);
    border-radius: 4px;
    outline: none;
    transition: border-color 120ms ease;
}
.bp-input:focus {
    border-color: var(--accent, #4a9eff);
}
.bp-input::placeholder {
    color: var(--text-tertiary, #555);
}
.bp-actions-row {
    display: flex;
    gap: 10px;
}
.bp-btn {
    padding: 9px 18px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-primary, #e6e6e6);
    background: var(--bg-elev-2, #161616);
    border: 1px solid var(--border-subtle, #2a2a2a);
    border-radius: 4px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.bp-btn:hover {
    background: var(--bg-elev-3, #1a1a1a);
    border-color: var(--border-emphasis, #3a3a3a);
}
.bp-btn-add {
    background: var(--accent, #4a9eff);
    color: #0a0a0a;
    border-color: var(--accent, #4a9eff);
}
.bp-btn-add:hover {
    background: var(--accent-hover, #5fadff);
    border-color: var(--accent-hover, #5fadff);
}
.bp-btn-secondary {
    /* baseline .bp-btn is fine */
}
.bp-btn-danger {
    color: var(--accent-neg, #ef4444);
}
.bp-btn-danger:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}

.bp-list-section {
    margin: 0 0 40px;
}
.bp-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle, #2a2a2a);
}
.bp-list-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary, #999);
}
.bp-list-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-tertiary, #777);
}

.bp-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-elev-1, #111);
    border: 1px solid var(--border-subtle, #2a2a2a);
    border-radius: 4px;
}
.bp-row-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #e6e6e6);
}
.bp-row-remove {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--text-tertiary, #777);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.bp-row-remove:hover {
    color: var(--accent-neg, #ef4444);
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}

.bp-empty {
    padding: 32px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-tertiary, #777);
    background: var(--bg-elev-1, #111);
    border: 1px dashed var(--border-subtle, #2a2a2a);
    border-radius: 4px;
}

/* Toast — bottom-right, fades in on add/remove. */
.bp-toast {
    position: fixed;
    bottom: 80px;       /* above bottom-nav */
    right: 24px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #e6e6e6);
    background: var(--bg-elev-3, #1a1a1a);
    border: 1px solid var(--border-emphasis, #3a3a3a);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: none;
    z-index: 1000;
}
.bp-toast-show {
    opacity: 1;
    transform: translateY(0);
}
/* ─────────────────────────────────────────────────────────
   v0.4.0 (2026-05-06) — Top +EV leaderboard
   Append at end of styles.css. Mirrors .game-card aesthetic:
   bg-elev-1 surface, 1px borders, mono numerics, accent-pos
   for +EV. Two breakpoints: 768px collapses BOOK column;
   480px collapses PROJ + tightens player cell.
───────────────────────────────────────────────────────── */

.leaderboard {
    margin-top: 48px;
    margin-bottom: 48px;
}

.leaderboard[hidden] { display: none; }

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;
    gap: 16px;
    flex-wrap: wrap;
}

.leaderboard-title-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.leaderboard-title {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.2px;
    color: var(--text-primary);
}

.leaderboard-subtitle {
    font-size: 11px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    letter-spacing: 0.2px;
}

.leaderboard-filters {
    display: flex;
    gap: 4px;
    align-items: center;
}

.lb-filter {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 10px;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
}

.lb-filter:hover {
    color: var(--text-secondary);
    border-color: var(--border-strong);
}

.lb-filter-active {
    background: var(--accent-pos-dim);
    color: var(--accent-pos);
    border-color: var(--accent-pos-border);
}

.lb-filter-active:hover {
    color: var(--accent-pos);
    border-color: var(--accent-pos-border);
}

.lb-filter-divider {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: var(--border);
    margin: 0 4px;
}

.lb-toggle {
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 10px;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
}

.lb-toggle:hover {
    color: var(--text-secondary);
    border-color: var(--border-strong);
}

.lb-toggle-active {
    background: var(--accent-pos-dim);
    color: var(--accent-pos);
    border-color: var(--accent-pos-border);
    border-style: solid;
}

.lb-toggle-active:hover {
    color: var(--accent-pos);
    border-color: var(--accent-pos-border);
}

.leaderboard-table {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    overflow: hidden;
}

.lb-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 0.7fr) minmax(0, 1fr) 64px 72px;
    gap: 12px;
    padding: 10px 16px;
    align-items: center;
    border-bottom: 1px solid var(--divider);
    font-size: 13px;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease;
}

.lb-row:last-child { border-bottom: none; }

.lb-row-data {
    cursor: pointer;
    animation: lbRowIn 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.lb-row-data:hover {
    background: var(--bg-elev-2);
}

@keyframes lbRowIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lb-row-header {
    background: rgba(255, 255, 245, 0.02);
    padding: 8px 16px;
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: var(--font-mono);
    cursor: default;
}

.lb-row-header:hover { background: rgba(255, 255, 245, 0.02); }

.lb-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-cell-rank {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.lb-rank-top { color: var(--accent-pos); }

.lb-cell-player {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.lb-player-name {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-player-team {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.lb-cell-prop {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
}

.lb-cell-book {
    font-size: 11px;
    color: var(--text-tertiary);
}

.lb-cell-proj {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    text-align: right;
}

.lb-cell-ev {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-pos);
    text-align: right;
}

@media (max-width: 768px) {
    .leaderboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .leaderboard-filters {
        flex-wrap: wrap;
    }
    .lb-row {
        grid-template-columns: 28px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 0.6fr) 56px 64px;
        gap: 10px;
        padding: 10px 12px;
    }
    .lb-row-header { padding: 8px 12px; }
    .lb-cell-book { display: none; }
}

@media (max-width: 480px) {
    .lb-row {
        grid-template-columns: 24px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 0.6fr) 56px;
        gap: 8px;
        padding: 9px 10px;
        font-size: 12px;
    }
    .lb-row-header { padding: 7px 10px; }
    .lb-cell-proj { display: none; }
    .lb-player-team { font-size: 9px; }
}
/* ─────────────────────────────────────────────────────────
   v0.4.2 (2026-05-06) — Games filter date sub-line
   Append at end of styles.css. Adds:
     • .modal-row-label-block — vertical stack wrapper
     • .modal-row-subline      — third quiet line
   The existing .modal-row-label keeps its flex:1 inside the
   block so label + sublabel still hug each other on one line.
   The wrapper takes flex:1 from the row instead.
───────────────────────────────────────────────────────── */

.modal-row-label-block {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* When the new wrapper is present, the inner label loses flex:1 because
   the wrapper carries it. This keeps the label/sublabel pair tight on
   line 1 and lets the wrapper stretch to fill the row. */
.modal-row-label-block .modal-row-label {
    flex: 0 0 auto;
}

.modal-row-subline {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10.5px;
    letter-spacing: 0.5px;
    color: var(--text-muted, #5a5a60);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Selected-row variant: the subline brightens slightly when its parent
   row is checked, matching the existing label/sublabel emphasis change. */
.modal-row-selected .modal-row-subline {
    color: var(--text-tertiary, #8a8a90);
}
/* ─────────────────────────────────────────────────────────
   v0.4.4 (2026-05-06) — Sport modal styling
   Append at end of styles.css. Adds rules for:
     .sport-modal-overlay  — fixed-position backdrop
     .sport-modal-card     — the modal panel itself
     .sport-modal-header   — title + close button row
     .sport-modal-title
     .sport-modal-close
     .sport-modal-body     — list container
     .sport-modal-row      — each sport button
     .sport-modal-row-{selected,disabled,label,sub,check}

   Why this is needed:
   sport-switcher.js's openLightweightModal() injects a fully-formed
   <div class="sport-modal-overlay">…</div> into document.body, but
   prior to v0.4.4 the stylesheet had ZERO rules for any of those
   classes. The DOM was correct but the elements rendered as
   default-flow, unstyled, invisible div text — same root pattern as
   the .sport-pill bug that v0.4.3 fixed. Discovered when Mo clicked
   the sport pill after the v0.4.3 drop and nothing happened;
   `document.querySelector('.sport-modal-overlay')` returned the
   element, confirming the modal WAS in the DOM but had no styles.
───────────────────────────────────────────────────────── */

.sport-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 24px;
    animation: sportModalFadeIn 0.18s ease-out;
}

@keyframes sportModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sport-modal-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: min(420px, 100%);
    max-height: min(80vh, 640px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: sportModalCardIn 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes sportModalCardIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sport-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--divider);
}

.sport-modal-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.1px;
    color: var(--text-primary);
    margin: 0;
}

.sport-modal-close {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.sport-modal-close:hover {
    color: var(--text-primary);
    background: var(--bg-elev-2);
    border-color: var(--border);
}

.sport-modal-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    overflow-y: auto;
}

.sport-modal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.sport-modal-row:hover:not(.sport-modal-row-disabled) {
    color: var(--text-primary);
    background: var(--bg-elev-3);
    border-color: var(--border-strong);
}

.sport-modal-row-selected {
    color: var(--accent-pos);
    background: var(--accent-pos-dim);
    border-color: var(--accent-pos-border);
}

.sport-modal-row-selected:hover:not(.sport-modal-row-disabled) {
    color: var(--accent-pos);
    background: var(--accent-pos-dim);
    border-color: var(--accent-pos-border);
}

.sport-modal-row-disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.55;
}

.sport-modal-row-label {
    flex: 1 1 auto;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}

.sport-modal-row-sub {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-elev-3);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 6px;
}

.sport-modal-row-check {
    font-size: 13px;
    color: var(--accent-pos);
    margin-left: 4px;
}

@media (max-width: 480px) {
    .sport-modal-card {
        width: 100%;
        max-height: 90vh;
    }
    .sport-modal-header { padding: 14px 16px; }
    .sport-modal-body   { padding: 10px; }
    .sport-modal-row    { padding: 11px 12px; }
}
/* ─────────────────────────────────────────────────────────
   v0.4.5 (2026-05-06) — Game Detail page body styles
   Append at end of styles.css. Adds rules for ALL the gd-*
   classes that game.js emits but had zero CSS coverage —
   sections, tables, signal cards, injury panels, meta grids,
   deferred-grid, etc. The hero block (.game-detail-header
   and friends) already had styles; everything below it
   was rendering as raw stacked text.

   Same root pattern as v0.4.3 (.sport-pill) and v0.4.4
   (.sport-modal-*) — markup is fine, CSS was never written.

   Class inventory covered (~40 selectors):
     .gd-section / .gd-section-header / .gd-section-deferred
       / .gd-section-split / .gd-section-num / .gd-section-title
       / .gd-section-note / .gd-section-note-warn
     .gd-half / .gd-team-home / .gd-team-away
     .gd-table / .gd-table-wrap / .gd-table-market
       / .gd-table-meta / .gd-table-props / .gd-table-props-compact
       / .gd-th-muted / .gd-td-muted / .gd-stat-pos
     .gd-signal-grid / .gd-signal-card / .gd-signal-label
       / .gd-signal-value / .gd-signal-pos / .gd-signal-sub
       / .gd-signal-tag / .gd-tag-pos / .gd-tag-neutral / .gd-tag-none
     .gd-meta-grid / .gd-meta-row / .gd-meta-label / .gd-meta-value
       / .gd-meta-src
     .gd-injury-grid / .gd-injury-panel / .gd-injury-panel-away
       / .gd-injury-panel-home / .gd-injury-panel-header
       / .gd-injury-list / .gd-injury-row / .gd-injury-name
       / .gd-injury-status / .gd-injury-status-out / -q / -a / -p
       / .gd-injury-reason / .gd-injury-empty
     .gd-deferred-grid / .gd-deferred-item / .gd-deferred-num
       / .gd-deferred-label / .gd-deferred-intro
     .gd-bullets / .gd-empty / .gd-empty-mini / .gd-empty-error
     .ev-neg (game-detail context — already exists for tables)
───────────────────────────────────────────────────────── */

/* ─── §-section frame ─── */
.gd-section {
    margin-top: 32px;
    padding-bottom: 4px;
}
.gd-section + .gd-section {
    margin-top: 36px;
}
.gd-section-header {
    margin-bottom: 14px;
}
.gd-section-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-primary);
    margin: 0 0 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.gd-section-num {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent-pos);
    background: var(--accent-pos-dim);
    border: 1px solid var(--accent-pos-border);
    border-radius: 4px;
    padding: 2px 7px;
    flex: 0 0 auto;
}
.gd-section-note {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-tertiary);
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--bg-elev-1);
    border: 1px solid var(--divider);
    border-radius: 6px;
}
.gd-section-note-warn {
    color: var(--accent-neg);
    border-color: rgba(255, 77, 77, 0.18);
    background: rgba(255, 77, 77, 0.04);
}
.gd-section-note code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-secondary);
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
}

/* ─── Side-by-side §P1.2/§P1.3 split ─── */
.gd-section-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.gd-half {
    min-width: 0;
}
.gd-team-home,
.gd-team-away {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}
.gd-team-home { color: var(--accent-pos); }
.gd-team-away { color: var(--text-secondary); }

/* ─── Tables (market snapshot, props, source log) ─── */
.gd-table-wrap {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.gd-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 12.5px;
}
.gd-table thead th {
    font-weight: 600;
    text-align: left;
    color: var(--text-tertiary);
    background: var(--bg-elev-2);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.gd-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--divider);
    color: var(--text-primary);
    vertical-align: middle;
}
.gd-table tbody tr:last-child td {
    border-bottom: none;
}
.gd-table tbody tr:hover td {
    background: var(--bg-elev-2);
}
.gd-th-muted,
.gd-td-muted {
    color: var(--text-muted) !important;
}
.gd-table .ev-pos { color: var(--accent-pos); font-weight: 600; }
.gd-table .ev-neg { color: var(--accent-neg); font-weight: 600; }

.gd-table-market tbody tr td:first-child {
    color: var(--text-secondary);
    font-weight: 500;
}

.gd-table-props-compact { font-size: 11.5px; }
.gd-table-props-compact thead th { padding: 8px 10px; font-size: 9.5px; }
.gd-table-props-compact tbody td { padding: 8px 10px; }

.gd-table-meta thead th {
    font-size: 9.5px;
}
.gd-table-meta tbody td:first-child {
    color: var(--accent-pos);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Hero stat-pos uses same accent treatment as ev-pos */
.gd-stat-pos { color: var(--accent-pos); }

/* ─── §1.2 Model Signal cards ─── */
.gd-signal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 4px;
}
.gd-signal-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.gd-signal-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.gd-signal-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    line-height: 1.1;
}
.gd-signal-pos { color: var(--accent-pos); }
.gd-signal-sub {
    font-size: 11.5px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

/* Tag pill inside the §1.2 TAG card */
.gd-signal-tag {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-elev-2);
    align-self: flex-start;
    line-height: 1.2;
}
.gd-tag-pos {
    color: var(--accent-pos);
    background: var(--accent-pos-dim);
    border-color: var(--accent-pos-border);
}
.gd-tag-neutral {
    color: var(--text-secondary);
    background: var(--bg-elev-2);
    border-color: var(--border);
}
.gd-tag-none {
    color: var(--accent-neg);
    background: rgba(255, 77, 77, 0.1);
    border-color: rgba(255, 77, 77, 0.22);
}

/* ─── §2.1 Injury panels ─── */
.gd-injury-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.gd-injury-panel {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    min-width: 0;
}
.gd-injury-panel-header {
    background: var(--bg-elev-2);
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.gd-injury-panel-away .gd-injury-panel-header { color: var(--text-secondary); }
.gd-injury-panel-home .gd-injury-panel-header { color: var(--accent-pos); }
.gd-injury-list {
    display: flex;
    flex-direction: column;
}
.gd-injury-row {
    display: grid;
    grid-template-columns: 1.4fr auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--divider);
    font-size: 12.5px;
}
.gd-injury-row:last-child {
    border-bottom: none;
}
.gd-injury-name {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gd-injury-status {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 3px;
    text-align: center;
    white-space: nowrap;
    color: var(--text-secondary);
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
}
.gd-injury-status-out {
    color: var(--accent-neg);
    background: rgba(255, 77, 77, 0.1);
    border-color: rgba(255, 77, 77, 0.22);
}
.gd-injury-status-q {
    color: #ffb84d;
    background: rgba(255, 184, 77, 0.1);
    border-color: rgba(255, 184, 77, 0.22);
}
.gd-injury-status-a,
.gd-injury-status-p {
    color: var(--accent-pos);
    background: var(--accent-pos-dim);
    border-color: var(--accent-pos-border);
}
.gd-injury-reason {
    color: var(--text-tertiary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.gd-injury-empty {
    padding: 14px 16px;
    color: var(--text-tertiary);
    font-size: 12.5px;
    line-height: 1.5;
}

/* ─── §7 Closing notes / meta grid ─── */
.gd-meta-grid {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.gd-meta-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--divider);
    font-size: 13px;
}
.gd-meta-row:last-child {
    border-bottom: none;
}
.gd-meta-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.gd-meta-value {
    color: var(--text-primary);
    line-height: 1.5;
}
.gd-meta-value code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 6px;
    color: var(--text-secondary);
}
.gd-meta-src {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 12px;
}

/* ─── Deferred sections list ─── */
.gd-section-deferred {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px dashed var(--border);
    opacity: 0.7;
}
.gd-deferred-intro {
    color: var(--text-tertiary);
    font-size: 12.5px;
    line-height: 1.55;
    margin-bottom: 16px;
}
.gd-deferred-intro code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    color: var(--text-secondary);
}
.gd-deferred-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.gd-deferred-item {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 12.5px;
}
.gd-deferred-num {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    flex: 0 0 auto;
}
.gd-deferred-label {
    color: var(--text-secondary);
}

/* ─── Bullets / empty states ─── */
.gd-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gd-bullets li {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.gd-bullets li::before {
    content: '·';
    position: absolute;
    left: 6px;
    top: -1px;
    color: var(--accent-pos);
    font-weight: 700;
    font-size: 16px;
}
.gd-empty {
    padding: 16px 18px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-tertiary);
    font-size: 13px;
    line-height: 1.55;
}
.gd-empty strong {
    color: var(--text-secondary);
    font-weight: 600;
}
.gd-empty code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    color: var(--text-secondary);
}
.gd-empty-mini {
    padding: 12px;
    color: var(--text-tertiary);
    font-size: 12px;
    text-align: center;
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.gd-empty-error {
    color: var(--accent-neg);
    background: rgba(255, 77, 77, 0.05);
    border-color: rgba(255, 77, 77, 0.18);
}

/* ─── Mobile breakpoint ─── */
@media (max-width: 768px) {
    .gd-signal-grid     { grid-template-columns: repeat(2, 1fr); }
    .gd-section-split   { grid-template-columns: 1fr; gap: 28px; }
    .gd-injury-grid     { grid-template-columns: 1fr; }
    .gd-deferred-grid   { grid-template-columns: 1fr; }
    .gd-meta-row        { grid-template-columns: 1fr; gap: 4px; }
    .gd-table           { font-size: 11.5px; }
    .gd-table thead th  { padding: 8px 10px; font-size: 9.5px; }
    .gd-table tbody td  { padding: 8px 10px; }
    .gd-section-title   { font-size: 18px; }
}

@media (max-width: 480px) {
    .gd-signal-grid     { grid-template-columns: 1fr; }
    .gd-injury-row      { grid-template-columns: 1fr auto; gap: 6px; }
    .gd-injury-reason   { grid-column: 1 / -1; text-align: left; }
}
/* ─────────────────────────────────────────────────────────
   v0.4.7 (2026-05-06) — §P1.1 collapse + Show all button
   Append at end of styles.css. Adds:
     .gd-section-count        — "397 rows · top 10 shown" inline label
     .gd-rows-hidden          — belt-and-suspenders for [hidden] tbody
     .gd-table-foot           — tfoot wrapper background gradient
     .gd-show-all-cell        — tfoot cell layout
     .gd-show-all-btn         — the "Show all 397" button
     .gd-show-all-count       — count badge inside the button
───────────────────────────────────────────────────────── */

.gd-section-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 9px;
    align-self: center;
}

/* The .gd-section-title flex layout already handles `.gd-section-count`
   pushing right via `margin-left: auto`. Make the title row stretch
   so the count pill genuinely lives at the right edge. */
.gd-section-title {
    width: 100%;
}

.gd-rows-hidden[hidden] {
    display: none;
}

.gd-table-foot {
    background: linear-gradient(to bottom, transparent, var(--bg-elev-2));
}
.gd-show-all-cell {
    text-align: center;
    padding: 14px !important;
    border-bottom: none !important;
}
.gd-show-all-btn {
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.gd-show-all-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background: var(--bg-elev-3);
}
.gd-show-all-count {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    background: var(--bg-elev-3);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 6px;
}
/* ─────────────────────────────────────────────────────────
   TitleTown v0.13.6 — Game Detail v1.7-data CSS
   ─────────────────────────────────────────────────────────
   Append-only. Adds styling for 17 new sections wired in
   game.js v0.13.6 (§2.2–§2.13, §4.1–§4.3, §4, §5, §6, §P1.6).
   IMPORTANT (gotcha #10): never replace styles.css — only
   append. Run: cat staging/styles-append-v0.13.6.css >> staging/styles.css
   ───────────────────────────────────────────────────────── */

/* ── Base .gd-tag (shared by §2.13, §4, §5) ─────────────── */
/* Existing styles.css defines .gd-tag-pos, .gd-tag-neutral,
   .gd-tag-none individually but no base .gd-tag rule. The new
   sections use the markup pattern <span class="gd-tag gd-tag-pos">
   so we define the base shape here and add the missing
   modifiers (-neg, -warn). */
.gd-tag {
    display: inline-block;
    font-family: var(--font-display, "Inter Tight", -apple-system, sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-elev-2);
    color: var(--text-secondary);
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
}
.gd-tag-neg {
    color: var(--accent-neg);
    background: var(--accent-neg-dim);
    border-color: rgba(255, 77, 77, 0.24);
}
.gd-tag-warn {
    color: #ffb74d;
    background: rgba(255, 183, 77, 0.10);
    border-color: rgba(255, 183, 77, 0.24);
}

/* ── Two-team comparison grid (§2.2, §2.4–§2.10, §2.12, §4.3) ─── */
/* Three-column row: away value | label | home value.
   Used as a quick scannable side-by-side without a full table. */
.gd-2team-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
.gd-2team-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.gd-2team-away,
.gd-2team-home {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}
.gd-2team-away  { text-align: right; color: var(--text-secondary); }
.gd-2team-home  { text-align: left;  color: var(--accent-pos); }
.gd-2team-label {
    font-family: var(--font-display, "Inter Tight", -apple-system, sans-serif);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-tertiary);
    text-align: center;
    white-space: nowrap;
}
.gd-2team-label .gd-stat-note {
    display: block;
    font-size: 9.5px;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 2px;
}
/* Color override when away/home value gets a tag class */
.gd-2team-away.gd-tag-pos,
.gd-2team-home.gd-tag-pos { color: var(--accent-pos); }
.gd-2team-away.gd-tag-neg,
.gd-2team-home.gd-tag-neg { color: var(--accent-neg); }
.gd-2team-away.gd-tag-neutral,
.gd-2team-home.gd-tag-neutral { color: var(--text-secondary); }
.gd-2team-away.gd-tag-warn,
.gd-2team-home.gd-tag-warn { color: #ffb74d; }

/* ── Four Factors layout (§2.3) ─────────────────────────── */
/* 4-column grid: label | away (val + delta) | league avg | home (val + delta) */
.gd-ff-head,
.gd-ff-row {
    display: grid;
    grid-template-columns: 80px 1fr 90px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}
.gd-ff-head {
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
    margin-bottom: 4px;
}
.gd-ff-row {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 6px;
}
.gd-ff-label {
    font-family: var(--font-display, "Inter Tight", -apple-system, sans-serif);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
}
.gd-ff-team-head {
    font-family: var(--font-display, "Inter Tight", -apple-system, sans-serif);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-align: center;
}
.gd-ff-lg-head {
    font-family: var(--font-display, "Inter Tight", -apple-system, sans-serif);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    text-align: center;
}
.gd-ff-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.gd-ff-team-away .gd-ff-val { color: var(--text-secondary); }
.gd-ff-team-home .gd-ff-val { color: var(--accent-pos); }
.gd-ff-val {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}
.gd-ff-delta {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 10px;
    line-height: 1.2;
    color: var(--text-tertiary);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid transparent;
}
.gd-ff-delta.gd-tag-pos      { color: var(--accent-pos); background: var(--accent-pos-dim); }
.gd-ff-delta.gd-tag-neg      { color: var(--accent-neg); background: var(--accent-neg-dim); }
.gd-ff-delta.gd-tag-neutral  { color: var(--text-tertiary); }
.gd-ff-lg {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 13px;
    color: var(--text-tertiary);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.gd-ff-lg small {
    font-family: var(--font-display, "Inter Tight", -apple-system, sans-serif);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}

/* ── Subsection title (§2.10, §2.11, §2.12, §P1.6) ──────── */
.gd-subsec-title {
    font-family: var(--font-display, "Inter Tight", -apple-system, sans-serif);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    margin: 14px 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Positional defense table (§2.10) ───────────────────── */
/* Compact 6-column table: team name + 5 positions. Uses
   smaller cell padding so all 5 cols + name fit on mobile. */
.gd-table-positions thead th,
.gd-table-positions tbody td {
    padding: 8px 10px;
    font-size: 12px;
}
.gd-table-positions thead th { font-size: 10px; }

/* ── Confidence Index display (§5) ──────────────────────── */
.gd-ci-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 14px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 6px;
}
.gd-ci-value {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}
.gd-ci-max {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-left: 4px;
}
.gd-ci-bar {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 8px;
    background: var(--bg-elev-3);
    border-radius: 4px;
    overflow: hidden;
}
.gd-ci-bar-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--accent-neg) 0%,
        #ffb74d 50%,
        var(--accent-pos) 100%
    );
    border-radius: 4px;
    transition: width 0.3s ease;
}
.gd-ci-bar-marker {
    position: absolute;
    top: -2px;
    width: 1px;
    height: 12px;
    background: var(--text-muted);
    transform: translateX(-50%);
}

/* ── Correlated Prop Pairs (§P1.6) ──────────────────────── */
/* Two side-by-side panels (lift / drag). Stacks on narrow
   screens. Each panel is its own bordered card. */
.gd-corr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 8px;
}
@media (min-width: 760px) {
    .gd-corr-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.gd-corr-panel {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}
.gd-corr-panel-lift {
    border-color: var(--accent-pos-border);
}
.gd-corr-panel-drag {
    border-color: rgba(255, 77, 77, 0.24);
}
.gd-corr-panel .gd-subsec-title {
    margin-top: 0;
    margin-bottom: 10px;
}

/* ── End v0.13.6 ──────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────
   TitleTown v0.13.6 — Game Detail v1.7-data CSS
   ─────────────────────────────────────────────────────────
   Append-only. Adds styling for 17 new sections wired in
   game.js v0.13.6 (§2.2–§2.13, §4.1–§4.3, §4, §5, §6, §P1.6).
   IMPORTANT (gotcha #10): never replace styles.css — only
   append. Run: cat staging/styles-append-v0.13.6.css >> staging/styles.css
   ───────────────────────────────────────────────────────── */

/* ── Base .gd-tag (shared by §2.13, §4, §5) ─────────────── */
/* Existing styles.css defines .gd-tag-pos, .gd-tag-neutral,
   .gd-tag-none individually but no base .gd-tag rule. The new
   sections use the markup pattern <span class="gd-tag gd-tag-pos">
   so we define the base shape here and add the missing
   modifiers (-neg, -warn). */
.gd-tag {
    display: inline-block;
    font-family: var(--font-display, "Inter Tight", -apple-system, sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-elev-2);
    color: var(--text-secondary);
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
}
.gd-tag-neg {
    color: var(--accent-neg);
    background: var(--accent-neg-dim);
    border-color: rgba(255, 77, 77, 0.24);
}
.gd-tag-warn {
    color: #ffb74d;
    background: rgba(255, 183, 77, 0.10);
    border-color: rgba(255, 183, 77, 0.24);
}

/* ── Two-team comparison grid (§2.2, §2.4–§2.10, §2.12, §4.3) ─── */
/* Three-column row: away value | label | home value.
   Used as a quick scannable side-by-side without a full table. */
.gd-2team-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
.gd-2team-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.gd-2team-away,
.gd-2team-home {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}
.gd-2team-away  { text-align: right; color: var(--text-secondary); }
.gd-2team-home  { text-align: left;  color: var(--accent-pos); }
.gd-2team-label {
    font-family: var(--font-display, "Inter Tight", -apple-system, sans-serif);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-tertiary);
    text-align: center;
    white-space: nowrap;
}
.gd-2team-label .gd-stat-note {
    display: block;
    font-size: 9.5px;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 2px;
}
/* Color override when away/home value gets a tag class */
.gd-2team-away.gd-tag-pos,
.gd-2team-home.gd-tag-pos { color: var(--accent-pos); }
.gd-2team-away.gd-tag-neg,
.gd-2team-home.gd-tag-neg { color: var(--accent-neg); }
.gd-2team-away.gd-tag-neutral,
.gd-2team-home.gd-tag-neutral { color: var(--text-secondary); }
.gd-2team-away.gd-tag-warn,
.gd-2team-home.gd-tag-warn { color: #ffb74d; }

/* ── Four Factors layout (§2.3) ─────────────────────────── */
/* 4-column grid: label | away (val + delta) | league avg | home (val + delta) */
.gd-ff-head,
.gd-ff-row {
    display: grid;
    grid-template-columns: 80px 1fr 90px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}
.gd-ff-head {
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
    margin-bottom: 4px;
}
.gd-ff-row {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 6px;
}
.gd-ff-label {
    font-family: var(--font-display, "Inter Tight", -apple-system, sans-serif);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
}
.gd-ff-team-head {
    font-family: var(--font-display, "Inter Tight", -apple-system, sans-serif);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-align: center;
}
.gd-ff-lg-head {
    font-family: var(--font-display, "Inter Tight", -apple-system, sans-serif);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    text-align: center;
}
.gd-ff-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.gd-ff-team-away .gd-ff-val { color: var(--text-secondary); }
.gd-ff-team-home .gd-ff-val { color: var(--accent-pos); }
.gd-ff-val {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}
.gd-ff-delta {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 10px;
    line-height: 1.2;
    color: var(--text-tertiary);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid transparent;
}
.gd-ff-delta.gd-tag-pos      { color: var(--accent-pos); background: var(--accent-pos-dim); }
.gd-ff-delta.gd-tag-neg      { color: var(--accent-neg); background: var(--accent-neg-dim); }
.gd-ff-delta.gd-tag-neutral  { color: var(--text-tertiary); }
.gd-ff-lg {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 13px;
    color: var(--text-tertiary);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.gd-ff-lg small {
    font-family: var(--font-display, "Inter Tight", -apple-system, sans-serif);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}

/* ── Subsection title (§2.10, §2.11, §2.12, §P1.6) ──────── */
.gd-subsec-title {
    font-family: var(--font-display, "Inter Tight", -apple-system, sans-serif);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    margin: 14px 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Positional defense table (§2.10) ───────────────────── */
/* Compact 6-column table: team name + 5 positions. Uses
   smaller cell padding so all 5 cols + name fit on mobile. */
.gd-table-positions thead th,
.gd-table-positions tbody td {
    padding: 8px 10px;
    font-size: 12px;
}
.gd-table-positions thead th { font-size: 10px; }

/* ── Confidence Index display (§5) ──────────────────────── */
.gd-ci-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 14px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 6px;
}
.gd-ci-value {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}
.gd-ci-max {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-left: 4px;
}
.gd-ci-bar {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 8px;
    background: var(--bg-elev-3);
    border-radius: 4px;
    overflow: hidden;
}
.gd-ci-bar-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--accent-neg) 0%,
        #ffb74d 50%,
        var(--accent-pos) 100%
    );
    border-radius: 4px;
    transition: width 0.3s ease;
}
.gd-ci-bar-marker {
    position: absolute;
    top: -2px;
    width: 1px;
    height: 12px;
    background: var(--text-muted);
    transform: translateX(-50%);
}

/* ── Correlated Prop Pairs (§P1.6) ──────────────────────── */
/* Two side-by-side panels (lift / drag). Stacks on narrow
   screens. Each panel is its own bordered card. */
.gd-corr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 8px;
}
@media (min-width: 760px) {
    .gd-corr-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.gd-corr-panel {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}
.gd-corr-panel-lift {
    border-color: var(--accent-pos-border);
}
.gd-corr-panel-drag {
    border-color: rgba(255, 77, 77, 0.24);
}
.gd-corr-panel .gd-subsec-title {
    margin-top: 0;
    margin-bottom: 10px;
}

/* ── End v0.13.6 ──────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
   v0.14.5 — Refs directory (refs.html) + Per-ref profile (ref.html)
   Bundle 3 part 3 of the referee database project.

   Append to staging/styles.css. All selectors namespaced under .refs- and
   .ref- to avoid collision with the v0.4.6 .gd-* Game Detail rules.
   ───────────────────────────────────────────────────────────────────────── */

/* ─── Common: page intro stat strip + filter bar ────────────────────────── */

.refs-filter-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin: 18px 28px 14px;
}

.refs-filter-input {
    flex: 0 0 240px;
    height: 32px;
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 0 12px;
    font-size: 13px;
    font-family: var(--font-display);
    border-radius: 0;
    outline: none;
    transition: border-color 0.15s ease;
}
.refs-filter-input::placeholder { color: var(--text-tertiary); }
.refs-filter-input:focus { border-color: var(--border-strong); }

.refs-filter-pill {
    padding: 6px 12px;
    font-size: 12px;
    font-family: var(--font-display);
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    line-height: 1;
    height: 32px;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.refs-filter-pill:hover {
    color: var(--text-primary);
    background: var(--bg-elev-2);
}
.refs-filter-pill-active {
    color: var(--accent-pos);
    background: var(--accent-pos-dim);
    border-color: var(--accent-pos-border);
    font-weight: 600;
}

/* ─── refs.html — directory table ───────────────────────────────────────── */

.refs-table-wrap {
    margin: 0 28px 28px;
    border: 1px solid var(--border);
    background: var(--bg-elev-1);
    overflow-x: auto;
}

.refs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 920px;
}

.refs-table thead {
    background: var(--bg-elev-2);
    border-bottom: 1px solid var(--border);
}

.refs-table th {
    text-align: left;
    padding: 11px 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}
.refs-table th:hover { color: var(--text-secondary); }
.refs-table th.refs-th-num { text-align: right; }
.refs-table th.refs-th-active { color: var(--accent-pos); }
.refs-table th .refs-th-arrow {
    display: inline-block;
    margin-left: 4px;
    font-size: 9px;
    opacity: 0.7;
}

.refs-table tbody tr {
    border-bottom: 1px solid var(--divider);
    transition: background 0.12s ease;
    cursor: pointer;
}
.refs-table tbody tr:last-child { border-bottom: 0; }
.refs-table tbody tr:hover { background: var(--bg-elev-2); }

.refs-table td {
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 13px;
    white-space: nowrap;
}
.refs-table td.refs-td-num {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
}
.refs-table td.refs-td-jersey {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
}
.refs-table td.refs-td-name {
    font-weight: 500;
    color: var(--text-primary);
}
.refs-table .refs-td-pos { color: var(--accent-pos); }
.refs-table .refs-td-neg { color: var(--accent-neg); }
.refs-table .refs-td-muted { color: var(--text-tertiary); }
.refs-table .refs-td-empty { color: var(--text-muted); font-style: italic; }

/* Truncate row */
.refs-table-truncate {
    text-align: center;
    color: var(--text-tertiary);
    font-style: italic;
    padding: 14px;
    font-size: 12px;
    border-top: 1px solid var(--divider);
    background: var(--bg-elev-1);
}

/* ─── ref.html — profile page ───────────────────────────────────────────── */

/* Crumbs / back link */
.ref-crumbs {
    margin: 14px 28px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}
.ref-crumbs a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}
.ref-crumbs a:hover { color: var(--text-primary); }
.ref-crumbs .ref-crumbs-sep {
    margin: 0 8px;
    color: var(--text-muted);
}

/* Profile header — avatar + name + meta */
.ref-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 28px 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.ref-header-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-elev-2);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.ref-header-text { flex: 1; min-width: 0; }
.ref-header-name {
    font-size: 26px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.ref-header-name-jersey {
    font-size: 14px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 10px;
    font-family: var(--font-mono);
}
.ref-header-meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

/* "CC tonight" badge */
.ref-tonight-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-pos-dim);
    color: var(--accent-pos);
    border: 1px solid var(--accent-pos-border);
    padding: 3px 9px;
    font-size: 10px;
    margin-left: 10px;
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}
.ref-tonight-badge::before {
    content: '●';
    font-size: 7px;
    animation: ref-pulse 2s ease-in-out infinite;
}
@keyframes ref-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Stat card grid */
.ref-stat-grid {
    margin: 0 28px 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.ref-stat-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    padding: 14px 16px;
}
.ref-stat-k {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 6px;
}
.ref-stat-v {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.ref-stat-v-pos { color: var(--accent-pos); }
.ref-stat-v-neg { color: var(--accent-neg); }
.ref-stat-v-empty { color: var(--text-muted); font-style: italic; font-size: 16px; }

/* Subline below header card */
.ref-subline {
    margin: 0 28px 22px;
    padding-top: 12px;
    border-top: 1px solid var(--divider);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
}

/* Section labels */
.ref-section-label {
    margin: 24px 28px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.ref-section-label-extra {
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 400;
    margin-left: 8px;
}

/* Recent games table */
.ref-recent-wrap {
    margin: 0 28px 14px;
    border: 1px solid var(--border);
    background: var(--bg-elev-1);
    overflow-x: auto;
}
.ref-recent-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 640px;
}
.ref-recent-table thead {
    background: var(--bg-elev-2);
    border-bottom: 1px solid var(--border);
}
.ref-recent-table th {
    text-align: left;
    padding: 9px 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
}
.ref-recent-table th.refs-th-num { text-align: right; }
.ref-recent-table th.refs-th-ctr { text-align: center; }
.ref-recent-table tbody tr {
    border-bottom: 1px solid var(--divider);
}
.ref-recent-table tbody tr:last-child { border-bottom: 0; }
.ref-recent-table td {
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 13px;
    white-space: nowrap;
}
.ref-recent-table td.refs-td-num { text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.ref-recent-table td.refs-td-ctr { text-align: center; }
.ref-recent-table .ref-recent-date {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
}
.ref-recent-table .ref-recent-role {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--accent-pos);
    font-weight: 600;
    letter-spacing: 0.06em;
}
.ref-recent-table .ref-recent-role-other {
    color: var(--text-tertiary);
    font-weight: 400;
}

/* Tonight panel — 2-column historical splits when CC tonight */
.ref-tonight-grid {
    margin: 0 28px 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ref-tonight-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    padding: 14px 16px;
}
.ref-tonight-card-k {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
}
.ref-tonight-card-line {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.ref-tonight-card-line .ats-bad { color: var(--accent-neg); }
.ref-tonight-card-line .ats-good { color: var(--accent-pos); }
.ref-tonight-card-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
}

.ref-tonight-empty {
    margin: 0 28px 22px;
    padding: 20px 24px;
    background: var(--bg-elev-1);
    border: 1px dashed var(--border);
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
    line-height: 1.5;
}
.ref-tonight-empty-meta {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

/* Mobile */
@media (max-width: 760px) {
    .refs-filter-bar {
        margin: 14px 16px 12px;
    }
    .refs-filter-input {
        flex: 1 1 100%;
    }
    .refs-table-wrap, .ref-recent-wrap { margin-left: 16px; margin-right: 16px; }
    .ref-crumbs { margin: 10px 16px 6px; }
    .ref-header { margin: 0 16px 14px; gap: 14px; }
    .ref-header-avatar { width: 52px; height: 52px; font-size: 18px; }
    .ref-header-name { font-size: 22px; }
    .ref-stat-grid {
        margin: 0 16px 14px;
        grid-template-columns: repeat(2, 1fr);
    }
    .ref-subline { margin: 0 16px 18px; }
    .ref-section-label { margin: 18px 16px 10px; }
    .ref-tonight-grid {
        margin: 0 16px 18px;
        grid-template-columns: 1fr;
    }
    .ref-tonight-empty { margin: 0 16px 18px; }
}
/* ─────────────────────────────────────────────────────────────────────────
   v0.14.5.1 — Refs page patch
   - Tonight-aware row highlighting (two-tier: CC + U1/U2)
   - Defensive thead rule (in case the v0.14.5 headers were collapsing)

   Append to staging/styles.css after the v0.14.5 block.
   All selectors namespaced under .refs- to match the existing block.
   ───────────────────────────────────────────────────────────────────────── */

/* Defensive: ensure refs-table headers are always visible. v0.14.5 had a
   report of headers not rendering on first paint. Forcing display: table-
   header-group + bumping background specificity fixes any cascade weirdness
   from the surrounding page-level table rules in styles.css. */
.refs-table thead {
    display: table-header-group !important;
    background: var(--bg-elev-2);
    position: relative;
    z-index: 1;
}
.refs-table thead tr {
    border-bottom: 1px solid var(--border) !important;
}

/* ─── Tonight tier highlights ────────────────────────────────────────────
   Two-tier visual:
   - CC tonight: bright green left border (3px) + dim green tint
   - U1/U2 tonight: dimmer green left border (2px), no tint
   These styles use ::before pseudos rather than border on the <tr> itself
   because Safari + Firefox both render <tr> borders inconsistently. We
   apply a left-border to the first <td> instead. */

.refs-table tbody tr.refs-tr-tonight-cc td:first-child {
    box-shadow: inset 3px 0 0 var(--accent-pos);
}
.refs-table tbody tr.refs-tr-tonight-cc {
    background: rgba(0, 217, 122, 0.05);
}
.refs-table tbody tr.refs-tr-tonight-cc:hover {
    background: rgba(0, 217, 122, 0.09);
}

.refs-table tbody tr.refs-tr-tonight-u td:first-child {
    box-shadow: inset 2px 0 0 rgba(0, 217, 122, 0.45);
}
/* No background tint for U1/U2 — keeps the visual hierarchy clear */

/* Inline tonight pill in the name cell */
.refs-tonight-pill {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    margin-left: 8px;
    line-height: 1;
    vertical-align: 1px;
    text-transform: uppercase;
}
.refs-tonight-pill-cc {
    color: var(--accent-pos);
    background: var(--accent-pos-dim);
    border: 1px solid var(--accent-pos-border);
}
.refs-tonight-pill-u {
    color: var(--text-secondary);
    background: rgba(255, 255, 245, 0.04);
    border: 1px solid var(--border);
}
/* ============================================================
 * TitleTown — Filter Templates (v0.14.8) — append to staging/styles.css
 * Drop in via:  cat styles-append-v0.14.8.css >> staging/styles.css
 * ============================================================
 *
 * Adds visuals for the Current/Templates tab toggle, template-row cards,
 * and the modal footer (RESET · SAVE · SHOW N) used in both props.js
 * and trends.js v0.14.8.
 *
 * All classes namespaced .ft-* (filter-templates) so they don't collide
 * with existing modal-* / filter-pill-* classes.
 *
 * Reuses existing tokens from the base stylesheet:
 *   --bg, --panel, --line, --text, --text-dim, --accent
 * No new design system additions.
 * ============================================================ */

/* ── Modal body wrapper ── */
.ft-modal {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Modal body has its own padding from .modal-body — we inherit it */
}

/* ── Tab toggle row (Current / Templates) ── */
.ft-tabs {
    display: inline-flex;
    align-self: center;
    padding: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    margin: 0 auto 16px;
    gap: 2px;
}

.ft-tab {
    appearance: none;
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 8px 16px;
    color: var(--text-dim, #8a9499);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 120ms ease, color 120ms ease;
}

.ft-tab:hover {
    color: var(--text, #e8eef2);
}

.ft-tab-on {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text, #e8eef2);
    font-weight: 600;
}

.ft-tab-ico {
    font-size: 14px;
    opacity: 0.85;
}

.ft-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent, #4ee0a0);
    color: #001b0d;
    font-size: 11px;
    font-weight: 700;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Active tab pane container ── */
.ft-pane {
    min-height: 120px;
    padding-bottom: 16px;
}

/* ── Template list (Templates tab content) ── */
.ft-tmpl-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ft-tmpl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line, #232a2e);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 120ms ease, background 120ms ease;
}

.ft-tmpl:hover {
    border-color: rgba(78, 224, 160, 0.35);
    background: rgba(78, 224, 160, 0.04);
}

.ft-tmpl-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ft-tmpl-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #e8eef2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ft-tmpl-meta {
    font-size: 11px;
    color: var(--text-dim, #8a9499);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ft-tmpl-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ft-tmpl-apply,
.ft-tmpl-delete {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text-dim, #8a9499);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.ft-tmpl-apply {
    color: var(--accent, #4ee0a0);
    border-color: rgba(78, 224, 160, 0.4);
}

.ft-tmpl-apply:hover {
    background: rgba(78, 224, 160, 0.12);
    border-color: var(--accent, #4ee0a0);
}

.ft-tmpl-delete {
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ft-tmpl-delete:hover {
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.4);
    background: rgba(255, 107, 107, 0.08);
}

/* ── Modal footer: RESET · SAVE · SHOW N ── */
.ft-foot {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 14px 0 0;
    margin-top: 16px;
    border-top: 1px solid var(--line, #232a2e);
}

.ft-btn {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: var(--text, #e8eef2);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.ft-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.ft-btn-ghost {
    color: var(--text-dim, #8a9499);
}

.ft-btn-ghost:hover {
    color: var(--text, #e8eef2);
}

.ft-btn-save {
    /* Middle button stretches to fill 1fr column */
    width: 100%;
}

.ft-btn-primary {
    background: var(--accent, #4ee0a0);
    border-color: var(--accent, #4ee0a0);
    color: #001b0d;
}

.ft-btn-primary:hover {
    background: #6ee9b3;
    border-color: #6ee9b3;
}

/* ── Mobile / narrow viewports ── */
@media (max-width: 520px) {
    .ft-foot {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ft-btn,
    .ft-btn-save {
        width: 100%;
    }
    .ft-tmpl-meta {
        max-width: 200px;
    }
}
/* ─── v0.14.13 prop detail upgrades ───────────────────── */

.ps-book-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--bg-elev, #1a1a1a);
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    color: var(--text, #e8e8e8);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.ps-book-trigger:hover,
.ps-book-trigger[aria-expanded="true"] {
    background: var(--bg-elev-2, #222);
    border-color: var(--border-hi, #444);
}
.ps-book-trigger-label { line-height: 1; }
.ps-book-trigger-chevron {
    font-size: 10px;
    opacity: 0.6;
    transform: translateY(1px);
    transition: transform 160ms ease;
}
.ps-book-trigger[aria-expanded="true"] .ps-book-trigger-chevron {
    transform: rotate(180deg) translateY(-1px);
}
.ps-book-menu {
    background: var(--bg-elev, #1a1a1a);
    border: 1px solid var(--border-hi, #444);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}
.ps-book-option {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text, #e8e8e8);
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background-color 100ms ease;
}
.ps-book-option:hover { background: var(--bg-elev-2, #222); }
.ps-book-option-active { background: var(--accent-soft, rgba(120, 180, 255, 0.08)); }
.ps-book-option-active:hover { background: var(--accent-soft-hi, rgba(120, 180, 255, 0.14)); }
.ps-book-option-name { font-weight: 600; }
.ps-book-option-odds { font-family: 'JetBrains Mono', monospace; font-size: 12px; opacity: 0.85; }
.ps-book-option-ev { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; min-width: 56px; text-align: right; }

.ps-alt-trigger {
    background: transparent !important;
    border: 0 !important;
    color: inherit !important;
    font: inherit;
    cursor: pointer;
    padding: 0 4px;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    border-radius: 4px;
    transition: background-color 120ms ease;
}
.ps-alt-trigger:hover,
.ps-alt-trigger[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.06) !important;
}
.ps-alt-cue { font-size: 0.55em; opacity: 0.55; transform: translateY(-2px); }

.ps-alt-popover {
    background: var(--bg-elev, #1a1a1a);
    border: 1px solid var(--border-hi, #444);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
    width: 320px;
    max-height: 480px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'Inter Tight', sans-serif;
}
.ps-alt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border, #333);
}
.ps-alt-title { font-weight: 600; font-size: 13px; color: var(--text, #e8e8e8); letter-spacing: 0.04em; }
.ps-alt-close {
    background: transparent;
    border: 0;
    color: var(--text-muted, #888);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    transition: background-color 120ms ease;
}
.ps-alt-close:hover { background: var(--bg-elev-2, #222); color: var(--text, #e8e8e8); }
.ps-alt-list { flex: 1 1 auto; overflow-y: auto; padding: 4px; }
.ps-alt-row {
    display: grid;
    grid-template-columns: 60px 1fr 70px;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text, #e8e8e8);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background-color 100ms ease;
}
.ps-alt-row:hover:not([disabled]) { background: var(--bg-elev-2, #222); }
.ps-alt-row-disabled,
.ps-alt-row[disabled] { opacity: 0.35; cursor: not-allowed; }
.ps-alt-row-current { background: var(--accent-soft, rgba(120, 180, 255, 0.08)); font-weight: 600; }
.ps-alt-row-line { font-weight: 600; }
.ps-alt-row-odds { text-align: right; opacity: 0.85; }
.ps-alt-row-ev { text-align: right; font-weight: 600; }
.ps-alt-custom {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid var(--border, #333);
}
.ps-alt-custom-label { font-size: 12px; color: var(--text-muted, #888); letter-spacing: 0.02em; }
.ps-alt-custom-input {
    background: var(--bg, #0a0a0a);
    border: 1px solid var(--border, #333);
    border-radius: 4px;
    color: var(--text, #e8e8e8);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    padding: 6px 8px;
    width: 100%;
}
.ps-alt-custom-input:focus { outline: none; border-color: var(--border-hi, #555); }
.ps-alt-custom-apply {
    background: var(--accent, #4a90e2);
    color: white;
    border: 0;
    border-radius: 4px;
    padding: 6px 14px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.ps-alt-custom-apply:hover { background: var(--accent-hi, #5aa0f2); }

.ps-odds-chosen {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    margin-left: 8px;
    background: var(--bg-elev-2, #222);
    border: 1px solid var(--border, #333);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #aaa);
    letter-spacing: 0.02em;
}

.fs-teammate-row .fs-row-control.ps-teammate-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.ps-teammate-input {
    width: 100%;
    background: var(--bg, #0a0a0a);
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    color: var(--text, #e8e8e8);
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    padding: 8px 10px;
    transition: border-color 120ms ease;
}
.ps-teammate-input:focus { outline: none; border-color: var(--accent, #4a90e2); }
.ps-teammate-input::placeholder { color: var(--text-muted, #666); }
.ps-teammate-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.ps-teammate-chips:empty { display: none; }
.ps-teammate-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px;
    background: var(--accent-soft, rgba(120, 180, 255, 0.12));
    border: 1px solid var(--accent-border, rgba(120, 180, 255, 0.3));
    border-radius: 12px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text, #e8e8e8);
}
.ps-teammate-chip-name { line-height: 1; }
.ps-teammate-chip-x {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text, #e8e8e8);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 120ms ease;
}
.ps-teammate-chip-x:hover { background: rgba(255, 100, 100, 0.4); }

.insights-block .insights-header {
    user-select: none;
    transition: opacity 120ms ease;
}
.insights-block .insights-header:hover { opacity: 0.85; }
.insights-block .insights-header::after {
    content: '⌄';
    margin-left: auto;
    font-size: 14px;
    opacity: 0.5;
    transition: transform 200ms ease;
    display: inline-block;
}
.insights-block-collapsed .insights-header::after { transform: rotate(-90deg); }
.insights-block-collapsed .insights-list { display: none; }

@media (max-width: 720px) {
    .ps-book-menu { min-width: 180px; }
    .ps-alt-popover { width: calc(100vw - 24px); max-width: 320px; }
    .ps-alt-row { grid-template-columns: 50px 1fr 60px; gap: 8px; padding: 8px 10px; }
}/* ══════════════════════════════════════════════════════════════════
   CATCH-UP APPEND — v0.14.16 + v0.14.18 + v0.14.19
   ══════════════════════════════════════════════════════════════════
   Diagnosis from May 10, 2026:
   - v0.11.0 through v0.14.14 — already in your live styles.css ✓
   - v0.14.16, v0.14.18, v0.14.19 — missing, this file adds them

   To install:
   1. Open this file in TextEdit, Cmd+A, Cmd+C
   2. Open NBA/staging/styles.css, Cmd+End, Cmd+V, Cmd+S
   3. Hard refresh (Cmd+Shift+R)

   After this, you're caught up through v0.14.19. Going forward,
   each new append file you receive needs the same treatment.
   ══════════════════════════════════════════════════════════════════ */


/* ───── v0.14.16 ───── */
/* ──────────────────────────────────────────────────────────────────
   styles-append-v0.14.16.css
   Drop-in append for v0.14.16 chart polish bundle.
   To install (TextEdit method — gotcha #10):
     1. Open this file, Cmd+A, Cmd+C
     2. Open NBA/staging/styles.css in TextEdit
     3. Cmd+End to go to bottom, paste, save
   ────────────────────────────────────────────────────────────────── */


/* ─── Custom chart tooltip (v0.14.16) ──────────────────────────── */

.prop-chart-tt {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    background: #1f1f24;
    border: 1px solid rgba(255, 255, 245, 0.16);
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 180px;
    max-width: 240px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    color: #f5f5f0;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    line-height: 1.35;
    opacity: 0;
    transition: opacity 100ms ease;
}

.prop-chart-tt .tt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 245, 0.10);
    margin-bottom: 8px;
}

.prop-chart-tt .tt-teams {
    display: flex;
    align-items: center;
    gap: 4px;
}

.prop-chart-tt .tt-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.prop-chart-tt .tt-logo-placeholder {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 245, 0.08);
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    color: #a3a3a0;
}

.prop-chart-tt .tt-at {
    color: #6b6b68;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 0 2px;
}

.prop-chart-tt .tt-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.prop-chart-tt .tt-score {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: #f5f5f0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.prop-chart-tt .tt-score-num { opacity: 0.65; }
.prop-chart-tt .tt-score-win { opacity: 1; }
.prop-chart-tt .tt-score-sep { color: #6b6b68; }

.prop-chart-tt .tt-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #a3a3a0;
    letter-spacing: 0.02em;
}

.prop-chart-tt .tt-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prop-chart-tt .tt-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.prop-chart-tt .tt-row-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    color: #a3a3a0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.prop-chart-tt .tt-row-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #f5f5f0;
}

.prop-chart-tt .tt-row-delta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
}
.prop-chart-tt .tt-row-delta.ev-pos { color: rgba(0, 217, 122, 1); }
.prop-chart-tt .tt-row-delta.ev-neg { color: rgba(255, 77, 77, 1); }

.prop-chart-tt .tt-rank-tough { color: rgba(255, 77, 77, 1); }
.prop-chart-tt .tt-rank-soft  { color: rgba(0, 217, 122, 1); }
.prop-chart-tt .tt-rank-mid   { color: #f5f5f0; }


/* ─── Teammate dropdown (v0.14.16) ─────────────────────────────── */

.fs-teammate-row {
    position: relative;
}

.ps-teammate-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    /* anchor to bottom of input — input is in .fs-row-control which is the
       sibling, so we use percentage positioning instead. Falls back to
       relative-positioned if anchor breaks. */
    top: 100%;
    margin-top: 4px;
    z-index: 50;
    background: var(--bg-elev, #1a1a1a);
    border: 1px solid var(--border-hi, #444);
    border-radius: 6px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 4px;
}

.ps-tm-dd-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: var(--text, #e8e8e8);
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background-color 100ms ease;
}
.ps-tm-dd-row:hover {
    background: var(--bg-elev-2, #222);
}
.ps-tm-dd-row-selected {
    background: var(--accent-soft, rgba(120, 180, 255, 0.10));
}
.ps-tm-dd-row-selected:hover {
    background: var(--accent-soft-hi, rgba(120, 180, 255, 0.18));
}

.ps-tm-dd-check {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: rgba(120, 180, 255, 0.9);
    flex-shrink: 0;
}
.ps-tm-dd-check-empty {
    border: 1px solid var(--border, #333);
    border-radius: 3px;
}

.ps-tm-dd-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-tm-dd-opposite-note {
    font-size: 10px;
    color: var(--text-muted, #888);
    font-style: italic;
    margin-right: 4px;
}

.ps-tm-dd-badge {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ps-tm-dd-badge-out {
    background: rgba(255, 77, 77, 0.18);
    color: rgba(255, 120, 120, 1);
    border: 1px solid rgba(255, 77, 77, 0.35);
}
.ps-tm-dd-badge-questionable {
    background: rgba(255, 180, 60, 0.16);
    color: rgba(255, 200, 100, 1);
    border: 1px solid rgba(255, 180, 60, 0.30);
}

.ps-tm-dd-row-injured .ps-tm-dd-name {
    color: rgba(255, 180, 180, 0.95);
}

.ps-tm-dd-empty {
    padding: 12px 10px;
    text-align: center;
    color: var(--text-muted, #888);
    font-size: 12px;
    font-style: italic;
}


/* ─── Mobile narrow-viewport tweaks (v0.14.16) ─────────────────── */

@media (max-width: 720px) {
    .prop-chart-tt {
        min-width: 160px;
        max-width: 220px;
        padding: 8px 10px;
        font-size: 11px;
    }
    .prop-chart-tt .tt-logo {
        width: 20px;
        height: 20px;
    }
    .prop-chart-tt .tt-score { font-size: 13px; }
    .ps-teammate-dropdown {
        max-height: 240px;
    }
}


/* ───── v0.14.19 ───── */
/* ──────────────────────────────────────────────────────────────────
   styles-append-v0.14.19.css
   v0.14.19 — Teammate dropdown polish

   Three fixes:
   1. Force one-row-per-line layout (was wrapping inline due to parent
      flex-wrap rules in existing styles.css)
   2. Tighter padding + better badge styling
   3. Inject !important overrides on the dropdown panel to neutralize
      any conflicting parent flex rules

   To install (TextEdit method — gotcha #10):
     1. Open this file, Cmd+A, Cmd+C
     2. Open NBA/staging/styles.css in TextEdit
     3. Cmd+End to go to bottom, paste, save
   ────────────────────────────────────────────────────────────────── */


/* ─── Force vertical stack layout on dropdown ─────────────────────

   The dropdown's parent .fs-teammate-row has flex/wrap behavior
   inherited from the filter sheet's row styling. Without forcing
   block layout, button rows render as wrapped pills (image 2).
   ──────────────────────────────────────────────────────────────── */

.ps-teammate-dropdown {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 1px;
}

.ps-tm-dd-row {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    /* Reset any inline-block default from <button> */
    box-sizing: border-box !important;
    /* Don't let parent's text-align inherit weirdly */
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.ps-tm-dd-name {
    flex: 1 1 auto !important;
    min-width: 0 !important; /* allow text-overflow ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
}

.ps-tm-dd-badge {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    padding: 2px 7px !important;
    font-size: 9px !important;
    border-radius: 3px;
}


/* ─── Dropdown panel positioning + width ──────────────────────────

   Was anchored to .fs-teammate-row via position: absolute + top: 100%.
   That works when .fs-teammate-row is `position: relative`, but in
   the filter sheet the row may not be — causing the panel to anchor
   relative to a higher ancestor and look detached.

   Also bump width to fill the row.
   ──────────────────────────────────────────────────────────────── */

.fs-teammate-row {
    position: relative !important;
}

.ps-teammate-dropdown {
    /* Wider panel so names don't get truncated visually */
    width: 100% !important;
    margin-top: 6px !important;
    /* Drop shadow more pronounced so it floats above sibling chips */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65) !important;
    border-radius: 8px !important;
}


/* ─── Chip placement: above input, not below dropdown ─────────────

   Existing DOM order: input → dropdown → chips.
   Visually the chip ends up below the dropdown panel.
   Reorder using flex-direction: column-reverse on the row container,
   so chips render above input + dropdown.
   ──────────────────────────────────────────────────────────────── */

.fs-teammate-row {
    display: flex !important;
    flex-direction: column !important;
}

.ps-teammate-chips {
    /* Render chips above the input by using order property */
    order: -1 !important;
    margin-bottom: 6px !important;
    /* Empty chip container shouldn't take vertical space */
    min-height: 0 !important;
}

.ps-teammate-chips:empty {
    display: none !important;
}


/* ─── Cleaner selected-row + injured-row styling ──────────────────

   Selected rows that are also in the dropdown look like duplicate
   noise next to the chip. Soften the selected state visually so
   it's clearly secondary to the chip.

   For OUT/DOUBTFUL injured rows, brighten the badge a touch so the
   one piece of information that matters (OUT badge) stands out.
   ──────────────────────────────────────────────────────────────── */

.ps-tm-dd-row-selected {
    /* Subtle dot indicator on the left instead of full background tint */
    background: transparent !important;
    opacity: 0.55;
}
.ps-tm-dd-row-selected:hover {
    opacity: 0.85;
}
.ps-tm-dd-row-selected .ps-tm-dd-check {
    color: rgba(0, 217, 122, 0.95) !important;
}

.ps-tm-dd-row-injured .ps-tm-dd-name {
    color: rgba(255, 200, 200, 0.98) !important;
}

.ps-tm-dd-badge-out {
    background: rgba(255, 77, 77, 0.20) !important;
    color: rgba(255, 145, 145, 1) !important;
    border: 1px solid rgba(255, 77, 77, 0.45) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}


/* ─── Dropdown max-height + scroll ────────────────────────────────

   Was 280px which is OK but cramped if more than ~8 rows. Bump to
   320px on desktop; mobile stays smaller for sheet usability.
   ──────────────────────────────────────────────────────────────── */

.ps-teammate-dropdown {
    max-height: 320px !important;
}

@media (max-width: 720px) {
    .ps-teammate-dropdown {
        max-height: 260px !important;
    }
}


/* ───── v0.14.19.1 hotfix ───── */
/* ──────────────────────────────────────────────────────────────────
   styles-append-v0.14.19.1.css
   v0.14.19.1 — Hotfix for v0.14.19

   Two bugs introduced by v0.14.19:
   1. .ps-teammate-dropdown has `display: flex !important` which
      overrides the JS's `dd.style.display = 'none'` for the empty
      state. The empty dropdown panel renders as a thin horizontal
      bar between the label and the input.
   2. .fs-teammate-row's `flex-direction: column !important` combined
      with inherited align-items pushed the labels to center.

   Fix: scope the v0.14.19 dropdown layout rules so they only apply
   when the dropdown is actually visible (i.e. has children), and
   force labels back to left-align.

   To install (TextEdit method):
     1. Open this file in TextEdit, Cmd+A, Cmd+C
     2. Open NBA/staging/styles.css in TextEdit
     3. Cmd+End, paste, save
   ────────────────────────────────────────────────────────────────── */


/* ─── Fix 1: empty dropdown should be invisible ────────────────────

   v0.14.19's `display: flex !important` on .ps-teammate-dropdown
   overrides the inline display:none that JS sets when there's
   nothing to show. Use :empty + an explicit dropdown-shown class
   that JS doesn't set, so we don't need to change the JS.

   Strategy: when the dropdown has no children, hide it via
   :empty selector with the same !important specificity that
   v0.14.19 used.
   ──────────────────────────────────────────────────────────────── */

.ps-teammate-dropdown:empty {
    display: none !important;
}

/* Also: when JS sets style="display: none" inline, respect it.
   v0.14.19's `display: flex !important` was too aggressive. We
   want flex layout when shown, hidden when JS hides it. The
   :not selector below + matching specificity wins over v0.14.19. */
.ps-teammate-dropdown[style*="display: none"],
.ps-teammate-dropdown[style*="display:none"] {
    display: none !important;
}


/* ─── Fix 2: labels back to left-aligned ──────────────────────────

   v0.14.19 made .fs-teammate-row `flex-direction: column`. Combined
   with inherited align-items from somewhere upstream, the labels
   (which are children of .fs-teammate-row) are getting centered.

   Force the row's own children (label, chips, control) to align
   to the start of the cross axis (= left).
   ──────────────────────────────────────────────────────────────── */

.fs-teammate-row {
    align-items: stretch !important;
}

.fs-teammate-row > .fs-row-label,
.fs-teammate-row > label {
    text-align: left !important;
    align-self: stretch !important;
}


/* ─── Fix 3: ensure the parent grid layout that the filter sheet
   uses for label-on-left, input-on-right ISN'T broken by v0.14.19's
   column-flex on the row. If the sheet uses a grid where each row
   is a 2-col grid (label | control), the column-flex breaks it.

   This will revert the row to its natural display IF .fs-row-label
   is a sibling that needs to sit side-by-side with the control.

   Detected via the screenshot — the label "GAMES WITH PLAYER" is
   on its own line above the input, which is fine for a column
   layout. But the input is also full-width while the label is
   center-aligned, suggesting some flex weirdness. Just normalize
   children alignment.
   ──────────────────────────────────────────────────────────────── */

.fs-teammate-row > * {
    text-align: left;
}


/* ─── Defensive: keep chips container truly hidden when empty ────

   If the chips container is empty (no children rendered yet),
   `:empty` doesn't always match if the JS leaves whitespace
   inside the div. Add :not(:has(*)) as a more aggressive
   "really has no element children" selector for modern browsers.
   ──────────────────────────────────────────────────────────────── */

.ps-teammate-chips:not(:has(*)) {
    display: none !important;
}



/* ─────────────────────────────────────────────────────────
   TitleTown v0.13.7 — Game Detail UI quick-wins
   ─────────────────────────────────────────────────────────
   Appended on top of v0.13.6 block. Two concerns:
     1. Bigger team names in §1 header (Mo: "the teams playing
        should be larger") — bumps `.game-detail-matchup` over
        the v0.13.5 baseline of 38px/26px to 52px/36px so the
        matchup is the visual anchor of the header, not the
        right-side stat column.
     2. §7 Closing Notes + §8 Source Column Log collapsed by
        default (Mo: "make collapsable by default") — new
        general `.gd-collapsible / .gd-collapse-*` pattern.
   No selectors collide with prior gd-* CSS — `.game-detail-matchup`
   rule below overrides the v0.13.5 rule via cascade order;
   collapse classes are net-new.
   ───────────────────────────────────────────────────────── */


/* ── §1 header — larger team names ─────────────────────── */

.game-detail-matchup {
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -0.04em;
}
.game-detail-matchup .vs {
    font-size: 38px;
    margin: 0 10px;
}
@media (max-width: 768px) {
    .game-detail-matchup    { font-size: 36px; }
    .game-detail-matchup .vs { font-size: 26px; }
}


/* ── §7 + §8 — Collapsible sections (collapsed by default) ────

   Markup (game.js v0.13.7):

       <section class="gd-section gd-collapsible gd-collapsed">
           <h2 class="gd-section-title">
               <span class="gd-section-num">§7</span> Closing Notes
               <button class="gd-collapse-toggle" data-action="toggle-section">
                   <span class="gd-collapse-label-expand">Expand</span>
                   <span class="gd-collapse-label-collapse">Collapse</span>
                   <span class="gd-collapse-chevron">▾</span>
               </button>
           </h2>
           <div class="gd-collapse-body">…</div>
       </section>

   Default state: section has both `.gd-collapsible` and `.gd-collapsed`.
   Click toggles `.gd-collapsed`. CSS hides `.gd-collapse-body` while
   collapsed and swaps button label + chevron rotation. ─────────── */

.gd-collapsible > .gd-section-title {
    display: flex;
    align-items: center;
    gap: 0.6em;
}
.gd-collapsible > .gd-section-title > .gd-collapse-toggle {
    margin-left: auto;
}

.gd-collapse-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
    line-height: 1;
}
.gd-collapse-toggle:hover {
    color: var(--text-primary);
    border-color: var(--divider);
}
.gd-collapse-toggle:focus-visible {
    outline: 1px solid var(--accent-pos);
    outline-offset: 2px;
}

.gd-collapse-chevron {
    display: inline-block;
    font-size: 10px;
    transition: transform 160ms ease;
    transform: rotate(0deg);
}
.gd-collapsible.gd-collapsed .gd-collapse-chevron {
    transform: rotate(-90deg);
}

.gd-collapse-label-expand,
.gd-collapse-label-collapse { display: inline; }
.gd-collapsible:not(.gd-collapsed) .gd-collapse-label-expand { display: none; }
.gd-collapsible.gd-collapsed     .gd-collapse-label-collapse { display: none; }

.gd-collapsible.gd-collapsed .gd-collapse-body {
    display: none;
}

/* ── End v0.13.7 ──────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────
   ref.js v0.4.1.0 — NBA Bundle 4 tonight splits panel
   ─────────────────────────────────────────────────────────────────────
   New classes for renderTonight()'s split cards. Drops in below the
   existing .ref-tonight-empty rules near line 9030. Reuses design
   tokens from the hero stat grid (.ref-stat-card pattern) for
   visual consistency. Append to end of styles.css.
   ─────────────────────────────────────────────────────────────────── */

.ref-tonight-splits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 28px 18px;
}

.ref-tonight-split-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    padding: 14px 16px;
}

.ref-tonight-split-team {
    font-family: var(--font-inter-tight);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.ref-tonight-split-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px 16px;
}

.ref-tonight-split-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ref-tonight-split-k {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.ref-tonight-split-v {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

/* Empty state inside one card (when ref hasn't officiated this team yet) */
.ref-tonight-split-empty {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    font-style: italic;
    line-height: 1.4;
}

/* Hint line under a card when it has games but no odds coverage */
.ref-tonight-split-hint {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--divider);
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    font-style: italic;
}

/* Sample-flag footer below both cards */
.ref-tonight-flag {
    margin: 0 28px 18px;
    padding-top: 10px;
    border-top: 1px solid var(--divider);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    font-style: italic;
}

/* Mobile reflow — stack to single column under 600px */
@media (max-width: 600px) {
    .ref-tonight-splits {
        grid-template-columns: 1fr;
        margin: 0 16px 18px;
    }
    .ref-tonight-split-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    .ref-tonight-flag {
        margin: 0 16px 18px;
    }
}
/* ──────────────────────────────────────────────────────────────────
   v0.4.1.1 — Tonight-splits modifier-class specificity fix
   ──────────────────────────────────────────────────────────────────
   .ref-tonight-split-v sets color: var(--text-primary) and appears
   AFTER .ref-stat-v-pos / -neg / -empty in source order (line ~10399
   vs line ~8902). Single-class modifiers (specificity 0,0,1,0) lose
   to the base class by source order, so SU/ATS/OU records that
   should render green/red render plain white instead.

   Compound selectors below raise modifier specificity to 0,0,2,0
   so they always win regardless of source order. Covers all three
   colored value types written by ref.js renderTonight (SU on line
   619, ATS on line 623, OU on line 627).
   ────────────────────────────────────────────────────────────────── */
.ref-tonight-split-v.ref-stat-v-pos { color: var(--accent-pos); }
.ref-tonight-split-v.ref-stat-v-neg { color: var(--accent-neg); }
.ref-tonight-split-v.ref-stat-v-empty { color: var(--text-muted); font-style: italic; }
/* ─────────────────────────────────────────────────────────
   styles-append-v0.13.10.css

   Drop in via:
     cat "staging/css/styles append/styles-append-v0.13.10.css" \
       >> staging/css/styles.css

   v0.13.10 (Session 44) — §4 Focused Summary redesign
   plus minor cosmetic patches from the §3–§8 + §P.x walk.

   Adds:
     - Headline strip (.gd-fs-headline + sub-classes)
     - 5-card grid (.gd-fs-grid + .gd-fs-card variants)
     - Color tier classes (red/yellow/green) on cards + bars
     - SATURATED badge (.gd-fs-badge-warn) for cap-reached scores
     - Signal pill row (.gd-fs-signal-row + .gd-fs-pill variants)
     - Single-book warning chip (.gd-fs-single-book)

   Namespace: all selectors begin with .gd-fs- to keep the
   redesign isolated from the existing .gd-signal-* family used
   elsewhere in game.js (§1.2 still consumes .gd-signal-grid).
   ───────────────────────────────────────────────────────── */

/* Local color tokens with fallbacks. If your styles.css defines
   --accent-pos / --accent-warn / --accent-neg, the var()
   references will pick them up — otherwise the hex fallbacks
   render correctly. */
.gd-fs-section {
    --gd-fs-green:        var(--accent-pos, #3ecf8e);
    --gd-fs-green-bright: #4be39b;
    --gd-fs-green-bg:     rgba(62, 207, 142, 0.08);
    --gd-fs-green-border: rgba(62, 207, 142, 0.30);
    --gd-fs-yellow:       var(--accent-warn, #f5a623);
    --gd-fs-yellow-bg:    rgba(245, 166, 35, 0.10);
    --gd-fs-yellow-border: rgba(245, 166, 35, 0.35);
    --gd-fs-red:          var(--accent-neg, #ff5a5a);
    --gd-fs-red-bg:       rgba(255, 90, 90, 0.08);
    --gd-fs-red-border:   rgba(255, 90, 90, 0.30);
    --gd-fs-panel:        var(--surface-1, #111);
    --gd-fs-panel-2:      var(--surface-2, #161616);
    --gd-fs-border:       var(--border-1, #1f1f1f);
    --gd-fs-border-hi:    var(--border-2, #2a2a2a);
    --gd-fs-text:         var(--text, #e8e8e8);
    --gd-fs-text-dim:     var(--text-dim, #888);
    --gd-fs-text-faint:   var(--text-faint, #555);
}

/* ── Headline strip ─────────────────────────────────────── */
.gd-fs-headline {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--gd-fs-panel);
    border: 1px solid var(--gd-fs-border);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 12px;
    margin-top: 12px;
}

.gd-fs-headline-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gd-fs-green-bg);
    border: 1px solid var(--gd-fs-green-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gd-fs-green);
    font-family: var(--font-mono, 'JetBrains Mono', 'SF Mono', Menlo, monospace);
    font-size: 14px;
    font-weight: 700;
}

.gd-fs-headline-text {
    flex: 1;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 14px;
    line-height: 1.5;
    color: var(--gd-fs-text);
}

.gd-fs-headline-text strong {
    color: var(--gd-fs-green);
    font-weight: 700;
}

.gd-fs-headline-warn {
    color: var(--gd-fs-yellow);
    font-weight: 700;
}

.gd-fs-headline-confidence {
    flex-shrink: 0;
    padding-left: 16px;
    border-left: 1px solid var(--gd-fs-border);
    text-align: right;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: var(--gd-fs-text-dim);
    line-height: 1.4;
}

.gd-fs-headline-confidence-val {
    display: block;
    color: var(--gd-fs-text);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}

.gd-fs-headline-confidence-tier {
    text-transform: lowercase;
}

/* ── Metric grid ────────────────────────────────────────── */
.gd-fs-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.gd-fs-card {
    background: var(--gd-fs-panel);
    border: 1px solid var(--gd-fs-border);
    border-radius: 8px;
    padding: 16px 16px 14px;
    position: relative;
    overflow: hidden;
}

.gd-fs-card-label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: var(--gd-fs-text-dim);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.gd-fs-card-value {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
    color: var(--gd-fs-text);
}

.gd-fs-card-bar {
    height: 4px;
    background: var(--gd-fs-border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

.gd-fs-card-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--gd-fs-text-dim);
    transition: width 0.4s ease;
}

.gd-fs-card-caption {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: var(--gd-fs-text-faint);
    line-height: 1.4;
}

/* Tier color modifiers — applied to .gd-fs-card to color
   the value + bar fill consistently. */
.gd-fs-card-green .gd-fs-card-value,
.gd-fs-card-green .gd-fs-card-bar-fill {
    color: var(--gd-fs-green);
    background: var(--gd-fs-green);
}
.gd-fs-card-green .gd-fs-card-value { background: transparent; }

.gd-fs-card-yellow .gd-fs-card-value,
.gd-fs-card-yellow .gd-fs-card-bar-fill {
    color: var(--gd-fs-yellow);
    background: var(--gd-fs-yellow);
}
.gd-fs-card-yellow .gd-fs-card-value { background: transparent; }

.gd-fs-card-red .gd-fs-card-value,
.gd-fs-card-red .gd-fs-card-bar-fill {
    color: var(--gd-fs-red);
    background: var(--gd-fs-red);
}
.gd-fs-card-red .gd-fs-card-value { background: transparent; }

.gd-fs-card-red {
    border-color: var(--gd-fs-red-border);
}

.gd-fs-card-none .gd-fs-card-value {
    color: var(--gd-fs-text-dim);
}

/* Saturated state — total/spread/ML edge at the 10.0 cap. */
.gd-fs-card-saturated {
    border-color: var(--gd-fs-yellow-border);
    background: linear-gradient(180deg,
        var(--gd-fs-yellow-bg) 0%,
        var(--gd-fs-panel) 30%);
}

/* SATURATED badge inside the card label row. */
.gd-fs-badge {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}

.gd-fs-badge-warn {
    background: var(--gd-fs-yellow-bg);
    color: var(--gd-fs-yellow);
    border: 1px solid var(--gd-fs-yellow-border);
}

/* ── Signal pill row ────────────────────────────────────── */
.gd-fs-signal-row {
    background: var(--gd-fs-panel);
    border: 1px solid var(--gd-fs-border);
    border-radius: 8px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.gd-fs-signal-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gd-fs-signal-label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: var(--gd-fs-text-dim);
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.gd-fs-signal-divider {
    width: 1px;
    height: 20px;
    background: var(--gd-fs-border);
}

.gd-fs-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
}

.gd-fs-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.gd-fs-pill-stable {
    background: var(--gd-fs-green-bg);
    color: var(--gd-fs-green);
    border: 1px solid var(--gd-fs-green-border);
}

.gd-fs-pill-warn {
    background: var(--gd-fs-yellow-bg);
    color: var(--gd-fs-yellow);
    border: 1px solid var(--gd-fs-yellow-border);
}

.gd-fs-pill-neg {
    background: var(--gd-fs-red-bg);
    color: var(--gd-fs-red);
    border: 1px solid var(--gd-fs-red-border);
}

.gd-fs-pill-none {
    background: transparent;
    color: var(--gd-fs-text-faint);
    border: 1px solid var(--gd-fs-border-hi);
}

.gd-fs-single-book {
    margin-left: auto;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    color: var(--gd-fs-yellow);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
    .gd-fs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .gd-fs-headline {
        flex-wrap: wrap;
    }
    .gd-fs-headline-confidence {
        margin-left: 44px;
        border-left: 0;
        padding-left: 0;
        text-align: left;
    }
}

@media (max-width: 720px) {
    .gd-fs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .gd-fs-card-value {
        font-size: 26px;
    }
    .gd-fs-signal-row {
        gap: 14px;
    }
    .gd-fs-single-book {
        margin-left: 0;
        flex-basis: 100%;
    }
}

@media (max-width: 480px) {
    .gd-fs-grid {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────
   End of v0.13.10 append.
   ───────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────
   TITLETOWN / GAME DETAIL — styles-append-v0.13.11.css
   ────────────────────────────────────────────────────────
   Per-section team identification on gd-2team-grid (v0.13.11).

   New .gd-2team-header rule decorates the AWAY / vs / HOME
   row that twoTeamHeader() renders at the top of every
   two-team comparison grid. Subtle border-bottom separator,
   monospace uppercase abbreviations, dimmer "vs" label.
   Reuses .gd-team-away / .gd-team-home color tokens (already
   present in styles.css) so abbreviations carry the team
   tint that the v1 page-header matchup uses.

   Cat-merge into staging/css/styles.css per existing append
   convention (matches v0.13.10's append file).
   ───────────────────────────────────────────────────────── */

.gd-2team-row.gd-2team-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
    margin-bottom: 4px;
    align-items: baseline;
}

.gd-2team-row.gd-2team-header .gd-2team-away,
.gd-2team-row.gd-2team-header .gd-2team-home {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gd-2team-row.gd-2team-header .gd-2team-label {
    color: #6a6864;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 500;
}
/* ═════════════════════════════════════════════════════════════════════════
   v0.15.2 — Players Directory (players.html) + Player Profile stub (player.html)
/* ═════════════════════════════════════════════════════════════════════════
   v0.15.3 — Players Directory rebuild — NFL-mirror chassis
/* ═════════════════════════════════════════════════════════════════════════
   v0.15.3 — Players Directory rebuild — NFL-mirror chassis
   MARKER: v0.15.3_players_directory_marker
   Replaces v0.15.2 sortable-filterable-table design (the
   v0.15.2_players_directory_marker block above this one in styles.css
   should be sed'd out before catting this block — see README_v0.15.3.md).

   Mirrors the v0.2.4 NFL Players design — search-first, narrow column,
   simple team-logo + name + abbr + position rows. Reuses existing
   TitleTown design tokens. Classes use the SAME NAMES as NFL's nfl.css
   players-page block so the two sport surfaces feel intentionally identical
   (NFL chassis already proven in live use; NBA + WNBA inherit verbatim).

   Namespacing: `.players-*` (page surfaces) and `.player-*` (per-row).
   The crumbs + header + stub-banner classes from v0.15.2 (`.player-crumbs`,
   `.player-header`, `.player-stub-banner`, `.player-stub-tabs`) are
   PRESERVED in v0.15.2 block and continue to serve the v0.15.2 player.html
   stub (which v0.15.3 does NOT replace — full Player Detail lands v0.15.4).
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Page header ───────────────────────────────────────────────────────── */

.players-page-header {
    margin: 32px 28px 8px;
}

.players-page-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0;
}

.players-page-sub {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    max-width: 720px;
}

/* ─── Search input — NFL pattern verbatim ───────────────────────────────── */

.players-search-container {
    position: relative;
    margin: 32px 28px 12px;
    max-width: 720px;
}

.players-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 14px;
    pointer-events: none;
}

.players-search-input {
    width: 100%;
    padding: 13px 18px 13px 42px;
    background: rgba(255, 255, 245, 0.02);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 15px;
    outline: none;
    border-radius: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.players-search-input::placeholder {
    color: var(--text-muted);
}

.players-search-input:focus {
    border-color: var(--accent-pos);
    background: rgba(255, 255, 245, 0.03);
}

/* ─── Stat strip below search ───────────────────────────────────────────── */

.players-status {
    margin: 0 28px 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    max-width: 720px;
}

.players-status-loading { color: var(--text-secondary); }
.players-status-ok      { color: var(--text-secondary); }
.players-status-err     { color: var(--accent-neg); }

/* ─── List section ──────────────────────────────────────────────────────── */

.players-list-section {
    margin: 16px 28px 28px;
    max-width: 720px;
}

.players-list-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--text-secondary);
    padding: 0 0 8px 0;
    border-bottom: 1px solid var(--border-strong);
    margin-bottom: 4px;
}

.players-list-count {
    color: var(--text-tertiary);
    font-weight: 500;
}

/* ─── Player row ────────────────────────────────────────────────────────── */

.player-row {
    display: grid;
    grid-template-columns: 32px 1fr 60px 60px;
    gap: 16px;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
    transition: background 0.1s ease;
    text-decoration: none;
    color: inherit;
}

.player-row:hover {
    background: rgba(255, 255, 245, 0.02);
}

.player-row:last-child {
    border-bottom: none;
}

.player-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.player-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-team {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.player-position {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}

/* ─── Empty state ───────────────────────────────────────────────────────── */

.players-empty {
    padding: 40px 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-align: center;
}

/* ─── Load-failed error card ────────────────────────────────────────────── */

.players-error {
    margin: 0;
    padding: 18px 16px;
    background: var(--bg-elev-1);
    border: 1px solid var(--accent-neg);
    border-left-width: 3px;
}

.players-error-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-neg);
    margin-bottom: 6px;
}

.players-error-msg {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.players-error-hint {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.players-error-hint code {
    background: var(--bg-elev-2);
    padding: 1px 4px;
    color: var(--text-secondary);
    font-size: 10px;
}

/* ─────────────────────────────────────────────────────────
   styles-append-v0.13.15.css
   ─────────────────────────────────────────────────────────
   §2.13 Referee Tendencies crew-name link styling.

   v0.13.14 fixed the data layer — REF_CREW_CHIEF / REF_REF2 /
   REF_REF3 now populate correctly. But the existing render
   wraps each name in <a class="gd-ref-link"> tags pointing at
   ref.html?slug=<slug>, and the class had no CSS rules, so
   the browser fell back to default link styling: bright blue
   #0000ee, underlined, jarring against the dark editorial
   palette.

   This append adds the class with:
     - Off-white #f5f3eb base color (matches player names in
       the share-card render spec — same editorial palette)
     - Dotted underline at 30% opacity (preserves "this is
       clickable" affordance without the blue scream)
     - Mint #5DE0AC on hover (ties to the share-card HIT_TOP
       accent color — gives section-wide visual continuity)
     - :visited match base color (don't let history shift the
       palette)

   Cat-merges into staging/css/styles.css per convention.
   ───────────────────────────────────────────────────────── */

.gd-ref-link {
    color: #f5f3eb;
    text-decoration: none;
    border-bottom: 1px dotted rgba(245, 243, 235, 0.3);
    transition: color 0.15s ease, border-bottom-color 0.15s ease;
}

.gd-ref-link:visited {
    color: #f5f3eb;
}

.gd-ref-link:hover {
    color: #5DE0AC;
    border-bottom-color: #5DE0AC;
}

.gd-ref-link:focus-visible {
    outline: 2px solid #5DE0AC;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Strong (crew chief) preserves the same palette — no override
   needed, just ensures the <strong> inside the <a> doesn't
   inherit a different color from elsewhere. */
.gd-ref-link strong {
    color: inherit;
    font-weight: 700;
}