/* ========================================
   MLB Dashboard — Complete Stylesheet
   Defaults to dark; flips to light on prefers-color-scheme: light.
   All shared colors come from CSS variables on :root.
   ======================================== */

:root {
    color-scheme: dark light;

    /* surfaces */
    --bg:          #0b1f33;   /* page background */
    --bg-elev:     #11283e;   /* cards, panels, footer */
    --bg-row:      #14304a;   /* table row hover / banded rows */
    --bg-row-alt:  #102740;
    --bg-input:    #0e2236;   /* form fields */
    --bg-header:   linear-gradient(135deg, #0d2b45 0%, #1a4a72 100%);

    /* text */
    --text:        #e8ecf1;   /* primary */
    --text-strong: #ffffff;   /* headings */
    --text-muted:  #a8b3c0;   /* secondary */
    --text-dim:    #7e8a98;   /* tertiary */
    --text-on-accent: #ffffff;

    /* borders */
    --border:        #1f3a56;
    --border-strong: #2a4a6e;

    /* accents */
    --accent:        #4fc1ff;   /* link, focus, callouts */
    --accent-hover:  #7dd4ff;
    --accent-ink:    var(--accent-ink);   /* deep navy — table thead bg */
    --accent-strong: #ff6b8a;
    --good:          #4ade80;
    --bad:           #f87171;
    --warn:          #fbbf24;
    --gold:          var(--warn);
}

@media (prefers-color-scheme: light) {
    :root {
        --bg:          var(--bg);
        --bg-elev:     var(--bg-elev);
        --bg-row:      var(--border);
        --bg-row-alt:  #f9f1de;
        --bg-input:    #ffffff;
        --bg-header:   linear-gradient(135deg, var(--border) 0%, #113a5c 100%);

        --text:        var(--text);
        --text-strong: var(--accent-ink);
        --text-muted:  var(--text-muted);
        --text-dim:    var(--text-dim);
        --text-on-accent: #ffffff;

        --border:        var(--border);
        --border-strong: #b4a883;

        --accent:        var(--accent-ink);
        --accent-hover:  var(--accent-strong);
        --accent-ink:    var(--accent-ink);
        --accent-strong: var(--accent-strong);
        --good:          var(--good);
        --bad:           var(--bad);
        --warn:          var(--warn);
        --gold:          var(--warn);
    }
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--accent);
    text-decoration: none;
}
a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-strong);
    margin-top: 0;
}

/* --- Site Header / Nav --- */
.site-header {
    background: var(--bg-header);
    padding: 0.85rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--accent-ink);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.site-header h1 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 1px;
    white-space: nowrap;
}

.site-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.site-header nav a {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.35rem 0.65rem;
    border-radius: 5px;
    transition: background 0.15s, color 0.15s;
}

.site-header nav a:hover,
.site-header nav a.active {
    background: rgba(79, 193, 255, 0.15);
    color: var(--accent-ink);
    text-decoration: none;
}

/* --- Main Content --- */
main {
    padding: 1.5rem 2rem 3rem;
    max-width: 1440px;
    margin: 0 auto;
}

/* --- Footer --- */
footer {
    background: var(--bg);
    border-top: 1px solid var(--accent-ink);
    text-align: center;
    padding: 1rem 2rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
}

.data-freshness {
    color: var(--accent-ink);
    font-size: 0.8rem;
    opacity: 0.85;
}
.data-freshness strong {
    color: var(--accent-strong);
}

.footer-disclaimer {
    color: var(--text);
    background: rgba(255, 193, 100, 0.08);
    border: 1px solid rgba(255, 193, 100, 0.25);
    border-radius: 6px;
    padding: 0.5rem 0.85rem;
    max-width: 900px;
    line-height: 1.5;
    font-size: 0.78rem;
}
.footer-disclaimer strong {
    color: var(--warn);
}

/* --- Buttons --- */
.btn,
.btn-primary {
    display: inline-block;
    padding: 0.5rem 1.15rem;
    background: linear-gradient(135deg, var(--accent-ink), var(--accent-ink));
    color: var(--bg);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.btn:hover,
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(79, 193, 255, 0.3);
    color: var(--bg-elev);
    text-decoration: none;
}

/* --- Sections --- */
.dashboard-section {
    margin-bottom: 2rem;
}

.dashboard-section h2 {
    font-size: 1.35rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.dashboard-section h3 {
    font-size: 1.1rem;
}

.section-header {
    margin-bottom: 1rem;
}

.section-header h2,
.section-header h3 {
    margin-bottom: 0.25rem;
}

.section-tagline {
    color: var(--text-dim);
    font-size: 0.95rem;
    margin: 0 0 1rem;
    max-width: 700px;
}

.page-intro {
    margin-bottom: 2rem;
}

/* --- Muted / Empty --- */
.muted {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.empty-state {
    color: var(--text-muted);
    font-style: italic;
    padding: 1.5rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px dashed var(--border);
}

.empty-state h4 {
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

/* --- Filters / Forms --- */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(17, 58, 92, 0.4);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.filters label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.filters input,
.filters select {
    padding: 0.45rem 0.65rem;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
    min-width: 120px;
}

.filters input:focus,
.filters select:focus {
    outline: none;
    border-color: var(--accent-ink);
    box-shadow: 0 0 0 2px rgba(79, 193, 255, 0.2);
}

/* --- Tables (shared base) --- */
table,
.data-table,
.workload-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

table thead,
.data-table thead,
.workload-table thead {
    background: var(--accent-ink);
}

table th,
.data-table th,
.workload-table th {
    border: 1px solid var(--border);
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    white-space: nowrap;
}

table td,
.data-table td,
.workload-table td {
    border: 1px solid var(--border);
    padding: 0.55rem 0.75rem;
    text-align: left;
    font-size: 0.9rem;
}

table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.02);
}

table tbody tr:hover {
    background: rgba(79, 193, 255, 0.08);
}

/* Compact table variant */
.data-table.compact td,
.data-table.compact th {
    padding: 0.4rem 0.65rem;
    font-size: 0.85rem;
}

/* Clickable table rows (explorer tables) */
.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: rgba(79, 193, 255, 0.12) !important;
}

.clickable-row.highlight {
    background: rgba(79, 193, 255, 0.18) !important;
    border-left: 3px solid var(--accent-ink);
}

/* Workload row coloring for reliever tables */
tr.workload-critical {
    border-left: 4px solid var(--accent-strong);
}

tr.workload-warning {
    border-left: 4px solid var(--warn);
}

tr.workload-ready {
    border-left: 4px solid #2d7a3d;
}

/* Responsive table wrapper */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 0.75rem;
}

/* --- Grid Layouts --- */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

/* Wider grid for leaderboard tables with many columns */
.metrics-grid.leaders-grid {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

.grid.snap {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid.cards {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

/* --- Cards --- */
.card,
.metric-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.15rem;
    transition: border-color 0.15s;
}

.card:hover,
.metric-card:hover {
    border-color: var(--accent-ink);
}

.card h3,
.metric-card h3 {
    margin-top: 0;
    margin-bottom: 0.65rem;
    font-size: 1rem;
    color: var(--accent-ink);
}

/* Tables inside cards: scroll horizontally instead of overflowing */
.metric-card table,
.card table {
    display: table;
    width: 100%;
    min-width: 0;
}

.metric-card > .table-wrap,
.metric-card {
    overflow-x: auto;
}

.card h4,
.metric-card h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.card p,
.metric-card p {
    margin: 0.3rem 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.badge {
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    background: rgba(79, 193, 255, 0.15);
    border: 1px solid rgba(79, 193, 255, 0.3);
    border-radius: 999px;
    color: var(--accent-ink);
    font-weight: 600;
}

/* Meta & Chip lists */
.meta-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.meta-list li {
    padding: 0.3rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.meta-list li:last-child {
    border-bottom: none;
}

.chip-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chip-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(79, 193, 255, 0.12);
    border: 1px solid rgba(79, 193, 255, 0.25);
    font-size: 0.82rem;
    color: var(--text);
}

.chip-list li span {
    font-weight: 700;
    color: var(--accent-ink);
}

/* Notes block */
.notes {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.notes h4 {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
}

.notes ul {
    margin: 0;
    padding-left: 1.25rem;
}

.notes li {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

/* --- Player Header --- */
.player-header h2 {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
}

.player-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.player-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* --- Player Selector / Explorer --- */
.player-selector {
    background: #0f2a42;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
}

.selector-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.selector-panels.single {
    grid-template-columns: minmax(280px, 1fr);
}

.category-panel {
    background: rgba(17, 58, 92, 0.5);
    border: 1px solid rgba(79, 193, 255, 0.2);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.category-panel h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--accent-ink);
}

.panel-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.panel-controls {
    display: grid;
    gap: 0.65rem;
}

.panel-controls label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.panel-controls select {
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
}

.panel-controls select:focus {
    outline: none;
    border-color: var(--accent-ink);
    box-shadow: 0 0 0 2px rgba(79, 193, 255, 0.2);
}

.view-player-btn {
    align-self: flex-start;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    border: none;
    background: linear-gradient(135deg, var(--accent-ink), var(--accent-ink));
    color: var(--bg);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.view-player-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(79, 193, 255, 0.3);
}

.view-player-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Explorer header */
.explorer-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.explorer-header h2 {
    margin: 0;
    font-size: 1.75rem;
    letter-spacing: 0.5px;
}

.explorer-subtitle {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.95rem;
    max-width: 640px;
}

/* ── Highlight boxes (Hitting Explorer) ── */
.highlights-strip {
    padding-top: 0 !important;
}

.highlights-grid {
    display: grid;
    /* minmax(0, 1fr) lets columns shrink below their content min-width so
       long team names ("Arizona Diamondbacks") can truncate instead of
       blowing out the grid past its parent's right edge. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.highlight-box {
    background: linear-gradient(135deg, rgba(13,43,69,0.6) 0%, rgba(21,61,94,0.4) 100%);
    border: 1px solid rgba(79, 193, 255, 0.12);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    min-width: 0;       /* allow grid item to shrink */
    overflow: hidden;   /* belt-and-suspenders against truant children */
}

/* Names inside highlight entries need to be allowed to truncate */
.highlight-entry {
    min-width: 0;
}
.highlight-entry a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.highlight-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(79, 193, 255, 0.1);
    padding-bottom: 0.4rem;
}

.highlight-window {
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 0.4rem;
}

.highlight-columns {
    display: grid;
    /* minmax(0, 1fr), not 1fr — a bare 1fr column can't shrink below its content's
       min-width, so the right column (long team names, nowrap) overflowed the card
       and the value got clipped off the right edge. minmax(0,…) lets it shrink. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
}
.highlight-col { min-width: 0; }   /* grid item must allow shrink for the above to bite */

.highlight-col-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    margin-bottom: 0.3rem;
}

.highlight-top .highlight-col-label {
    color: var(--good);
}

.highlight-bottom .highlight-col-label {
    color: var(--accent-strong);
}

.highlight-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.15rem 0;
    font-size: 0.75rem;
}

.highlight-entry a {
    color: #8ab4cc;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;   /* natural width but allowed to shrink so the NAME truncates    */
    min-width: 0;     /* (ellipsis) instead of shoving the value off the card's right */
}                     /* edge, where the box's overflow:hidden was clipping it        */

.highlight-entry a:hover {
    color: var(--accent-ink);
    text-decoration: underline;
}

.highlight-stat {
    font-weight: 700;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;        /* the number is fixed-width — never shrink or clip it */
    padding-left: 0.4rem;  /* breathing room from a truncated team name */
}

/* Selector + inline leaders side by side */
.selector-with-leaders {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.selector-with-leaders .selector-panels {
    flex: 0 0 340px;
}

.selector-with-leaders .inline-leaders {
    flex: 1;
    min-width: 220px;
}

.inline-leaders .highlight-entry {
    gap: 0.4rem;
}

.leader-rank {
    color: var(--text-dim);
    font-weight: 700;
    font-size: 0.72rem;
    min-width: 1.2rem;
}

.leader-team {
    color: var(--text-dim);
    font-size: 0.65rem;
    flex: 1;
    text-align: right;
    margin-right: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1100px) {
    .highlights-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .selector-with-leaders {
        flex-direction: column;
    }
    .selector-with-leaders .selector-panels {
        flex: 1;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .highlights-grid {
        grid-template-columns: 1fr;
    }
}

/* Team overview / Roster cards */
.team-overview {
    margin-top: 0.5rem;
}

.team-overview-header h3 {
    margin-bottom: 0.25rem;
}

.team-overview-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
}

.team-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 0.75rem;
}

.roster-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    transition: border-color 0.15s, transform 0.1s;
}

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

.roster-card.clickable:hover {
    border-color: var(--accent-ink);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(79, 193, 255, 0.12);
}

.roster-card h4 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    color: var(--text);
}

.roster-card p {
    margin: 0.15rem 0;
    font-size: 0.82rem;
    color: var(--text-dim);
    line-height: 1.45;
}

/* --- Workload Table --- */
.workload-table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.02);
}

.workload-table tbody tr.highlight {
    background: rgba(79, 193, 255, 0.12);
}

.workload-table tbody tr.workload-critical {
    border-left: 4px solid var(--accent-strong);
}

.workload-table tbody tr.workload-warning {
    border-left: 4px solid var(--warn);
}

.workload-table tbody tr.workload-ready {
    border-left: 4px solid #2d7a3d;
}

.outing-chip {
    display: inline-block;
    margin-right: 0.3rem;
    margin-bottom: 0.3rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(79, 193, 255, 0.12);
    border: 1px solid rgba(79, 193, 255, 0.25);
    font-size: 0.78rem;
}

/* --- League Leaders Tabs --- */
/* Outer page tabs (Standings vs League Leaders) — slightly larger than the
   inner Batting/Pitching tabs, sits at the top of the merged league page. */
.page-tabs {
    display: flex;
    gap: 0;
    margin-top: 0.75rem;
    border-bottom: 2px solid var(--accent-ink);
}

.page-tab {
    padding: 0.75rem 1.75rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-dim);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -2px;
}

.page-tab:hover { color: var(--text); }

.page-tab.active {
    color: var(--accent-ink);
    border-bottom-color: var(--accent-ink);
}

.page-pane { display: none; }
.page-pane.active { display: block; }

.leader-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid var(--accent-ink);
}

.leader-tab {
    padding: 0.65rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-dim);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -2px;
}

.leader-tab:hover {
    color: var(--text);
}

.leader-tab.active {
    color: var(--accent-ink);
    border-bottom-color: var(--accent-ink);
}

.leader-group {
    display: none;
    padding-top: 1rem;
}

.leader-group.active {
    display: block;
}

.leader-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.leader-subtab {
    padding: 0.4rem 0.9rem;
    background: rgba(17, 58, 92, 0.5);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.leader-subtab:hover {
    background: rgba(79, 193, 255, 0.1);
    border-color: var(--accent-ink);
    color: var(--text);
}

.leader-subtab.active {
    background: rgba(79, 193, 255, 0.2);
    border-color: var(--accent-ink);
    color: var(--accent-ink);
}

.leader-table {
    display: none;
}

.leader-table.active {
    display: block;
}

/* --- Hot Players --- */
.hot-players .hot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}

.hot-players .metric-card h3 {
    color: var(--warn);
}

.hot-players table {
    width: 100%;
    border-collapse: collapse;
}

.hot-players th,
.hot-players td {
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.45rem 0.65rem;
    text-align: left;
    font-size: 0.85rem;
}

.hot-players thead {
    background: rgba(255, 255, 255, 0.03);
}

/* --- Division-Grouped Standings --- */
.division-group {
    margin-bottom: 1.75rem;
}

.division-header {
    color: var(--accent-ink);
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}

.division-leader td {
    font-weight: 600;
}

.positive-diff {
    color: #2d7a3d;
    font-weight: 600;
}

.negative-diff {
    color: var(--accent-strong);
    font-weight: 600;
}

/* Highlight cell */
td.highlight {
    color: var(--warn);
    font-weight: 700;
}

/* --- Homerun Pulse --- */
.model-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.predictions {
    margin-bottom: 2rem;
}

.venue-rankings {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    counter-reset: venue;
}

.venue-rankings li {
    counter-increment: venue;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.88rem;
}

.venue-rankings li::before {
    content: counter(venue) ".";
    font-weight: 700;
    color: var(--accent-ink);
    margin-right: 0.5rem;
    min-width: 1.5rem;
}

.venue-name {
    flex: 1;
}

.venue-metric {
    color: var(--text-dim);
    font-size: 0.82rem;
    white-space: nowrap;
    margin-left: 0.75rem;
}

/* --- Stat value formatting --- */
.stat-value {
    font-variant-numeric: tabular-nums;
    font-family: 'Segoe UI', monospace;
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-big {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bg-elev);
}

/* --- Back link --- */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.back-link:hover {
    color: var(--accent-ink);
}

/* --- Matchup Cards --- */
/* ── Game-nav: horizontal jump-to-game strip ── */
.game-nav {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0.55rem 0.15rem 0.7rem;
    margin: 0.4rem 0 0.3rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.game-nav-chip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 96px;
    padding: 0.45rem 0.65rem;
    border-radius: 9px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    line-height: 1.15;
    transition: border-color 0.15s, transform 0.15s;
}
.game-nav-chip:hover { border-color: var(--accent-ink); transform: translateY(-1px); }
.game-nav-chip .gn-teams { font-weight: 700; font-size: 0.82rem; white-space: nowrap; }
.game-nav-chip .gn-at { opacity: 0.45; font-weight: 400; }
.game-nav-chip .gn-time { opacity: 0.6; font-size: 0.72rem; }
.game-nav-chip .gn-score { font-weight: 700; font-size: 0.78rem; color: var(--accent-ink); }
.game-nav-chip .gn-time.gn-delayed { color: #f5a623; opacity: 0.95; font-weight: 600; }

/* Discreet footer link to the hidden results page */
.freshness-link { color: inherit; text-decoration: none; cursor: pointer; }
.freshness-link:hover { text-decoration: underline; }

/* Hidden results page */
.results-wrap { max-width: 1100px; margin: 0 auto; padding: 8px 4px 40px; }
.results-title { font-size: 1.4rem; margin: 6px 0 18px; }
.results-sub { font-weight: 400; font-size: 0.62em; }
.results-day { margin-bottom: 22px; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 12px 14px; background: rgba(255,255,255,0.02); }
.results-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.results-date { font-weight: 700; font-size: 1.02rem; }
.results-tally { display: flex; gap: 10px; flex-wrap: wrap; }
.rt-chip { font-size: 0.74rem; opacity: 0.8; white-space: nowrap; }
.rt-chip strong.rt-good { color: #4ade80; }
.rt-chip strong.rt-bad { color: #f87171; }
.rt-chip-pending { opacity: 0.6; font-style: italic; }
/* Results body — grouped into labeled bands so short columns (Winners) don't
   leave big gaps beside long ones (F5), and picks never overflow the card. */
.results-band { margin-top: 20px; }
.results-band:first-of-type { margin-top: 4px; }
.results-band-head { font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase;
    font-weight: 700; opacity: 0.5; margin: 0 0 9px; padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.06); }
.results-band-note { font-weight: 400; letter-spacing: 0.02em; text-transform: none; opacity: 0.8; }
.results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 26px; }
.results-col { min-width: 0; }   /* let long picks ellipsize instead of overflowing the card */
.results-col-head { font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.55; margin-bottom: 6px; }
.results-row { display: flex; align-items: baseline; gap: 6px; font-size: 0.8rem; padding: 2px 0; }
.rr-mark { width: 14px; flex: none; text-align: center; }
.rr-subject { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rr-pick { margin-left: auto; opacity: 0.6; font-size: 0.72rem; white-space: nowrap; flex: none; }
.rr-odds { flex: none; margin-left: 8px; font-family: ui-monospace, Menlo, monospace;
    font-variant-numeric: tabular-nums; font-size: 0.72rem; color: #53d18b; white-space: nowrap; }
.rr-pending { opacity: 0.4; }
@media (max-width: 520px) { .results-grid { grid-template-columns: 1fr; } }

/* ── ROI / unit ─────────────────────────────────────────────────────── */
.roi-val { font-style: normal; font-weight: 700; margin-left: 5px; font-size: 0.95em; }
.roi-pos { color: #4ade80; }
.roi-neg { color: #f87171; }
.roi-flat { color: #cbd5e1; }
.roi-u { font-weight: 600; opacity: 0.6; font-size: 0.85em; }
.rt-chip-day { font-weight: 700; opacity: 1; padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.14); }
.roi-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
    margin: 4px 0 18px; padding: 12px 16px; border-radius: 10px;
    background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); }
.roi-banner-title { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
    font-weight: 700; opacity: 0.6; }
.roi-banner-cells { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.roi-cell { display: inline-flex; align-items: baseline; gap: 2px; font-size: 0.84rem; }
.roi-cell-label { opacity: 0.65; font-size: 0.78rem; }
.roi-cell-overall { padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.16); }
.roi-cell-overall .roi-cell-label { opacity: 0.85; font-weight: 700; }
.roi-cell-overall .roi-val { font-size: 1.05em; }
.roi-banner-note { width: 100%; font-size: 0.68rem; opacity: 0.45; }
.game-nav-chip.gn-started { border-color: var(--accent-ink); }

html { scroll-behavior: smooth; }

/* Hidden entry point to the pick-results / CLV page — looks exactly like the
   tagline text (no link affordance), but "by the numbers" navigates to results. */
.site-header .site-tagline .tagline-secret,
.site-header .site-tagline .tagline-secret:hover,
.site-header .site-tagline .tagline-secret:focus {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    cursor: default;
}
.site-tagline {
    font-size: 0.46em;
    font-weight: 400;
    opacity: 0.6;
    letter-spacing: 0.02em;
    margin-left: 0.55rem;
    text-transform: none;
    vertical-align: middle;
}

.matchup-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.matchup-card { scroll-margin-top: 84px; }

/* ── Per-game projections strip (NRFI / F5 / run producers) ── */
.proj-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: stretch;
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--accent-ink) 6%, transparent);
}
.proj-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 0.1rem 0.7rem 0.1rem 0;
    border-right: 1px solid var(--border);
    min-width: 92px;
}
.proj-cell:last-child { border-right: none; }
.proj-cell-wide { flex: 1 1 240px; min-width: 200px; }
.proj-val { font-size: 1.35rem; font-weight: 800; line-height: 1; color: var(--accent-ink); }
.proj-val-obp { font-size: 1.05rem; }
.proj-lean { font-size: 0.7rem; font-weight: 700; color: var(--accent); vertical-align: middle; margin-left: 1px; }
.proj-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.proj-tag {
    display: inline-block; font-size: 0.6rem; font-weight: 700;
    padding: 1px 5px; border-radius: 4px; margin-left: 3px;
    background: var(--accent-ink); color: var(--bg-elev); opacity: 0.85;
}
.proj-producers { display: flex; flex-direction: column; gap: 4px; margin-top: 3px; }
.rp-team { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.rp-team-name { font-size: 0.66rem; font-weight: 700; opacity: 0.6; min-width: 64px; }
.rp-chip {
    font-size: 0.74rem; padding: 1px 6px; border-radius: 5px;
    background: var(--bg-elev); border: 1px solid var(--border);
}
.rp-chip em { font-style: normal; font-weight: 700; color: var(--accent-ink); opacity: 0.9; }

/* ── "Most Likely Today" — two category banners ──────────────────────── */
.likely-banners { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }
.likely-banner {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 7px 10px 8px;
    background: var(--bg-elev);
    border-left: 3px solid var(--accent);
}
.lb-hit { border-left-color: var(--accent); }
.lb-win { border-left-color: #f5a623; }          /* winners = warm amber */
.lb-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-bottom: 6px;
}
.lb-title {
    font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--accent);
}
.lb-win .lb-title { color: #f5a623; }            /* winners title amber, hits stay cyan */
.lb-note { font-size: 0.68rem; color: var(--text-muted); }
.lb-rail {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;   /* all 5 on one row */
}
@media (max-width: 760px) { .lb-rail { grid-template-columns: repeat(2, 1fr); } }
/* Phones: keep 2-up rather than collapsing to full-width rows that waste the
   right half of the screen and push the game cards far down. */
@media (max-width: 460px) { .lb-rail { grid-template-columns: repeat(2, 1fr); gap: 6px; } }
.lb-chip {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 9px; border-radius: 9px; text-decoration: none;
    background: var(--bg-elev); border: 1px solid var(--border);
    transition: transform 0.1s ease, border-color 0.1s ease;
    min-width: 0;
}
.lb-chip:hover { transform: translateY(-1px); border-color: var(--accent); }
.lb-pct {
    font-size: 1.2rem; font-weight: 800; line-height: 1; color: #f5a623;
    flex: 0 0 auto;
}
.lb-text { display: flex; flex-direction: column; min-width: 0; }
.lb-main {
    font-size: 0.84rem; font-weight: 700; line-height: 1.12;
    color: var(--text-strong, #fff); white-space: normal;
}
.lb-vs { font-size: 0.7rem; color: var(--text-muted); white-space: normal; line-height: 1.1; }
.lb-res { flex: 0 0 auto; margin-left: auto; font-weight: 800; font-size: 0.95rem; line-height: 1; }
.lb-res-w { color: var(--good); }
.lb-res-l { color: var(--bad); }
.lb-chip-w { border-color: var(--good); }
.lb-chip-l { opacity: 0.5; }
.lb-stars { flex: 0 0 auto; color: #f5c518; font-size: 0.74rem; letter-spacing: -1px; line-height: 1; }
.lb-hit .lb-chip { align-items: center; }

/* Most Likely To Get A Hit — 3-across grid (2 rows of 3), fills the width */
.lb-hit-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px 14px; }
@media (max-width: 820px) { .lb-hit-list { grid-template-columns: repeat(2, 1fr); } }
/* Phones: stay 2-up. A single column here is the biggest real-estate sink on
   mobile — 7 full-width rows shove every game card below the fold. */
@media (max-width: 520px) { .lb-hit-list { grid-template-columns: repeat(2, 1fr); gap: 4px 8px; } }
.lb-hit-row {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 5px 9px; border-radius: 6px; text-decoration: none;
    background: rgba(255,255,255,0.02); border: 1px solid transparent;
    transition: background 0.1s ease;
}
.lb-hit-row:hover { background: rgba(255,255,255,0.06); border-color: var(--border); }
.lhr-id { display: flex; flex-direction: column; min-width: 0; flex: 0 0 auto; line-height: 1.15; }
.lhr-name { font-weight: 700; color: var(--text-strong, #fff); font-size: 0.8rem; }
.lhr-team { font-size: 0.64rem; color: var(--text-muted); }
.lhr-sigs { display: flex; flex-wrap: wrap; gap: 4px; }
.lhr-sig {
    font-size: 0.68rem; padding: 0 6px; border-radius: 4px; white-space: nowrap;
    border: 1px solid var(--border); color: #7dd4ff;   /* value cyan — matches Stars Align */
}
.lhr-sig.strong { color: #f5c518; border-color: var(--border-strong); font-weight: 600; }  /* .350+ gold */
.lhr-l { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-muted); margin-right: 2px; }
.lhr-res { font-size: 0.66rem; font-weight: 800; margin-left: 5px; }
.lhr-res-w { color: var(--good); }
.lhr-res-l { color: var(--bad); }

/* ── Injured List strip ──────────────────────────────────────────────── */
.injury-strip {
    padding: 6px 12px; margin: 0 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.injury-head {
    font-size: 0.8em; font-weight: 700; margin-bottom: 4px;
    color: var(--accent-strong); letter-spacing: 0.03em;
}
.injury-cols { display: flex; gap: 10px; }
.injury-col { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.inj-chip { font-size: 0.78em; line-height: 1.3; color: var(--text-muted); }
.inj-il {
    display: inline-block; font-size: 0.72em; font-weight: 800;
    color: var(--accent-strong); border: 1px solid var(--accent-strong);
    border-radius: 4px; padding: 0 4px; margin-right: 5px; opacity: 0.85;
}
.inj-name { color: var(--text-strong, #fff); font-weight: 600; }
.inj-note { opacity: 0.8; }

.matchup-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s;
}

.matchup-card:hover {
    border-color: var(--accent-ink);
}

/* ── Header: teams + info bar ── */
.matchup-header {
    background: linear-gradient(135deg, var(--border) 0%, #153d5e 100%);
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.matchup-teams {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bg-elev);
}

.matchup-teams a {
    color: #5bc0de;
    text-decoration: none;
}

.matchup-teams a:hover {
    text-decoration: underline;
    color: #8dd8ea;
}

.team-record {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #a0b4c8;
    background: rgba(91, 192, 222, 0.12);
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 3px;
    vertical-align: middle;
    letter-spacing: 0.2px;
}

h2 .team-record {
    font-size: 0.55em;
}

.matchup-at {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.9rem;
}

.divisional-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--warn);
    background: rgba(255, 193, 100, 0.15);
    border: 1px solid rgba(255, 193, 100, 0.4);
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.h2h-panel {
    background: linear-gradient(90deg, rgba(79,193,255,0.06) 0%, rgba(79,193,255,0.02) 100%);
    border-top: 1px solid rgba(79,193,255,0.12);
    border-bottom: 1px solid rgba(79,193,255,0.12);
    padding: 0.4rem 1.25rem;
}

.h2h-row {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.h2h-span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
}

.h2h-label {
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.h2h-val {
    font-weight: 700;
    color: #a0b4c8;
    font-size: 0.85rem;
}

.h2h-val.h2h-lead {
    color: var(--accent-ink);
}

.h2h-dash {
    color: #4a6a82;
    font-weight: 400;
}

.matchup-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.game-time-badge {
    font-weight: 700;
    color: var(--text);
}

.matchup-info-bar .game-status {
    color: var(--warn);
    font-weight: 600;
}

/* ── Pitcher cards ── */
.pitcher-matchup-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.pitcher-card {
    padding: 0.85rem 1.1rem;
    border-right: 1px solid var(--border);
}

.pitcher-card:last-child {
    border-right: none;
}

.pitcher-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.pitcher-name-row a {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-ink);
    text-decoration: none;
}

.pitcher-name-row a:hover {
    text-decoration: underline;
}

.pitcher-name-row.tbd {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-muted);
    font-style: italic;
}

.pitcher-hand {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-dim);
    background: rgba(142, 169, 192, 0.15);
    border-radius: 3px;
    padding: 1px 5px;
    letter-spacing: 0.3px;
}

.pitcher-record {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: auto;
}

/* Season stat line */
.pitcher-season-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text);
    margin-bottom: 0.45rem;
    line-height: 1.4;
}

.pitcher-season-line strong {
    color: var(--text);
}

/* Pitch arsenal chips */
.pitch-arsenal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.pitch-chip {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text);
    background: rgba(79, 193, 255, 0.1);
    border: 1px solid rgba(79, 193, 255, 0.2);
    border-radius: 3px;
    padding: 1px 6px;
    letter-spacing: 0.2px;
}

.pitch-chip em {
    font-style: normal;
    font-weight: 400;
    color: var(--text-dim);
    margin-left: 2px;
}

/* Matchup stats grid (vs roster breakdown) */
.matchup-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}

.matchup-stats-grid.statcast-row {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.4rem;
}

.stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.stat-cell .stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.stat-cell .stat-val {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* vs Roster section */
.vs-roster-section {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.45rem;
    margin-top: 0.1rem;
}

.vs-roster-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.vs-roster-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-size: 0.8rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.vs-roster-stats em {
    font-style: normal;
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-right: 2px;
    font-weight: 600;
}

.no-history {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.82rem;
    margin: 0.35rem 0;
}

/* Footer */
.matchup-footer {
    padding: 0.6rem 1.25rem;
    border-top: 1px solid var(--border);
    text-align: center;
}

.matchup-detail-btn {
    font-size: 0.78rem;
    padding: 0.35rem 0.9rem;
}

/* Matchup detail page meta */
.matchup-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-top: 0.25rem;
}

/* Detail page pitcher profile cards */
.detail-pitcher-card {
    background: rgba(13, 43, 69, 0.5);
    border-radius: 6px;
    padding: 1rem 1.25rem;
}

/* Bullpen side-by-side layout */
.bullpen-matchup-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 0.75rem;
}

.bullpen-panel h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--text);
}

.outing-chip {
    display: inline-block;
    font-size: 0.68rem;
    color: var(--text-dim);
    background: rgba(142, 169, 192, 0.1);
    border-radius: 3px;
    padding: 1px 4px;
    margin-right: 3px;
}

/* League filters */
.league-filters {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    margin-top: 0.75rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-group label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.filter-group input[type="text"] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    color: var(--text);
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    width: 260px;
}

.filter-group input[type="text"]::placeholder {
    color: var(--text-dim);
}

.filter-group input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-ink);
}

/* Hot section header with window selector */
.hot-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.hot-section-header h3 {
    margin: 0;
}

.window-selector {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.window-btn {
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: all 0.15s;
}

.window-btn:hover {
    color: var(--accent-ink);
    border-color: var(--accent-ink);
}

.window-btn.active {
    color: var(--text);
    background: rgba(79, 193, 255, 0.2);
    border-color: var(--accent-ink);
}

/* Sortable column headers (server-side) */
.sortable-header a {
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.sortable-header a:hover {
    color: var(--accent-ink);
    text-decoration: none;
}
.sortable-header.sort-active a {
    color: var(--accent-ink);
    font-weight: 700;
}

/* Trust tier badges */
.trust-high { color: var(--good); font-weight: 700; }
.trust-mid  { color: var(--warn); font-weight: 600; }
.trust-low  { color: var(--text-muted); font-weight: 400; }
.trust-—    { color: var(--text-dim); }

/* Workload row colors */
.workload-ready td { color: var(--good); }
.workload-warning td { color: var(--warn); }
.workload-critical td { color: var(--bad); }

/* --- Responsive --- */
@media (max-width: 1024px) {
    main {
        padding: 1rem 1.25rem 2rem;
    }

    .metrics-grid,
    .grid,
    .grid.snap {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .metrics-grid.leaders-grid {
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    }

    .team-overview-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .site-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.75rem 1rem;
        gap: 0.5rem;
    }

    .site-header h1 {
        font-size: 1.25rem;
    }

    .site-header nav {
        gap: 0.15rem;
    }

    .site-header nav a {
        font-size: 0.78rem;
        padding: 0.3rem 0.5rem;
    }

    main {
        padding: 0.75rem 0.75rem 2rem;
    }

    .metrics-grid,
    .grid,
    .grid.snap,
    .grid.cards {
        grid-template-columns: 1fr;
    }

    .selector-panels {
        grid-template-columns: 1fr;
    }

    .team-overview-grid {
        grid-template-columns: 1fr;
    }

    .model-summary {
        grid-template-columns: 1fr;
    }

    .filters {
        flex-direction: column;
        align-items: stretch;
    }

    .player-header h2 {
        font-size: 1.35rem;
    }

    .explorer-header h2 {
        font-size: 1.35rem;
    }

    /* MOBILE TABLES — stack every row as a label/value card. No horizontal scroll.
       The base.html boot script injects data-label="<column header>" onto every
       <td>, so we render each row as a vertical list of "Label  Value" pairs.
       Linescore tables opt out via the .linescore class. */
    table:not(.linescore),
    .data-table:not(.linescore),
    .workload-table:not(.linescore) {
        display: block;
        width: 100%;
        border: none;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* hide the original thead — labels come from data-label attributes */
    table:not(.linescore) thead,
    .data-table:not(.linescore) thead,
    .workload-table:not(.linescore) thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    table:not(.linescore) tbody,
    .data-table:not(.linescore) tbody,
    .workload-table:not(.linescore) tbody {
        display: block;
        width: 100%;
    }

    /* each row becomes a self-contained card */
    table:not(.linescore) tbody tr,
    .data-table:not(.linescore) tbody tr,
    .workload-table:not(.linescore) tbody tr {
        display: block;
        width: 100%;
        margin: 0 0 0.6rem 0;
        padding: 0.5rem 0.6rem;
        background: var(--bg-elev);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    }

    table:not(.linescore) tbody tr:nth-child(odd),
    table:not(.linescore) tbody tr:hover {
        background: var(--bg-elev);
    }

    /* each cell is a label/value row inside the card */
    table:not(.linescore) tbody td,
    .data-table:not(.linescore) tbody td,
    .workload-table:not(.linescore) tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.75rem;
        width: 100%;
        padding: 0.3rem 0;
        border: none;
        border-bottom: 1px dashed var(--border);
        text-align: right;
        font-size: 0.92rem;
        color: var(--text);
        min-height: 1.6rem;
    }

    table:not(.linescore) tbody td:last-child {
        border-bottom: none;
    }

    /* prepend the column header from data-label on the left */
    table:not(.linescore) tbody td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        text-align: left;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    /* if a cell has no data-label (no thead), don't draw the empty prefix */
    table:not(.linescore) tbody td:not([data-label])::before,
    table:not(.linescore) tbody td[data-label=""]::before {
        content: none;
    }

    /* Linescore: stays tabular but allows controlled horizontal scroll */
    table.linescore {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        font-size: 0.82rem;
    }

    /* Stack the two pitcher cards (and bullpen panels) vertically so each
       gets the full screen width — otherwise both columns get squished and
       overflow horizontally on phones. */
    .pitcher-matchup-row,
    .bullpen-matchup-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pitcher-card {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .pitcher-card:last-child {
        border-bottom: none;
    }
}

@media (max-width: 480px) {
    .site-header nav a {
        font-size: 0.72rem;
        padding: 0.25rem 0.4rem;
    }

    main {
        padding: 0.5rem 0.5rem 1.5rem;
    }

    .metric-card,
    .card {
        padding: 0.85rem;
    }

    .roster-card {
        padding: 0.65rem 0.75rem;
    }
}

/* ========================================
   Pitch Visualization
   ======================================== */

/* Layout */
/* ── Pitch Viz — Pitcher's POV ── */
.pitchviz-wrapper {
    position: relative;
}

/* ── Top controls bar ── */
.pitchviz-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.control-group {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.control-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    margin-right: 0.3rem;
    font-weight: 600;
}

.ctrl-btn {
    font-size: 0.72rem;
    padding: 0.25rem 0.65rem;
    border-radius: 14px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.ctrl-btn:hover {
    color: var(--accent-ink);
    border-color: rgba(79, 193, 255, 0.4);
}

.ctrl-btn.active {
    color: var(--text);
    background: rgba(79, 193, 255, 0.15);
    border-color: rgba(79, 193, 255, 0.5);
}

.ctrl-btn.ctrl-k.active {
    color: var(--accent-strong);
    background: rgba(255, 107, 107, 0.15);
    border-color: rgba(255, 107, 107, 0.5);
}

.ctrl-btn.ctrl-bb.active {
    color: var(--accent-ink);
    background: rgba(79, 193, 255, 0.15);
    border-color: rgba(79, 193, 255, 0.5);
}

.ctrl-btn.ctrl-hits.active {
    color: var(--good);
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.5);
}

.outcome-filter-group {
    border-left: 1px solid rgba(79, 193, 255, 0.12);
    padding-left: 0.75rem;
    margin-left: 0.25rem;
}

/* ── Main layout: legend + SVG side by side ── */
.pitchviz-main {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* Stacked pitch type legend */
.pitchviz-legend {
    flex: 0 0 170px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.legend-header {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    font-weight: 700;
    margin-bottom: 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(79, 193, 255, 0.1);
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    font-size: 0.72rem;
}

.legend-row:hover {
    background: rgba(79, 193, 255, 0.08);
}

.legend-row.legend-inactive {
    opacity: 0.18;
}

.legend-shape-svg {
    flex-shrink: 0;
}

.legend-info {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.legend-name {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.legend-count {
    color: var(--text-muted);
    font-size: 0.68rem;
    text-align: right;
}

.legend-pct {
    color: var(--accent-ink);
    font-weight: 600;
    font-size: 0.68rem;
    text-align: right;
}

.legend-speed {
    color: var(--text-dim);
    font-size: 0.65rem;
}

/* Dot shape key */
.legend-key {
    margin-top: 0.5rem;
}

.key-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    color: var(--text-muted);
    padding: 0.15rem 0.4rem;
}

/* (pitch-type shapes drawn via SVG in JS) */

.key-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 14px;
    font-size: 0.58rem;
    font-weight: 800;
    color: var(--bg-elev);
    background: rgba(79, 193, 255, 0.15);
    border: 1px solid rgba(79, 193, 255, 0.25);
    border-radius: 3px;
    flex-shrink: 0;
}

.key-label.key-hr {
    color: #ffdd57;
    background: rgba(255, 100, 127, 0.15);
    border-color: rgba(255, 100, 127, 0.3);
}

.key-label.key-k {
    color: var(--accent-strong);
    background: rgba(255, 107, 107, 0.12);
    border-color: rgba(255, 107, 107, 0.25);
}

.key-label.key-bb {
    color: var(--accent-ink);
    background: rgba(79, 193, 255, 0.12);
    border-color: rgba(79, 193, 255, 0.25);
}

.key-label.key-out {
    color: #ccc;
    background: rgba(200, 200, 200, 0.08);
    border-color: rgba(200, 200, 200, 0.2);
}

.key-label.key-hit-lbl {
    color: var(--good);
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.25);
}

.key-outcome {
    justify-content: space-between;
}

.key-outcome .legend-count {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Outcome labels on pitch dots */
.outcome-label {
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* SVG column */
.pitchviz-viz-col {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.strike-zone-svg {
    width: 100%;
    max-width: 780px;
    height: auto;
    border-radius: 12px;
    background: radial-gradient(ellipse at 50% 45%, #1a3d5c 0%, #14304a 35%, #0f2438 70%, #0b1a2c 100%);
    box-shadow:
        0 0 40px rgba(0, 0, 0, 0.5),
        inset 0 0 60px rgba(0, 0, 0, 0.15);
}

.movement-chart-svg {
    width: 380px;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    background: radial-gradient(ellipse at 50% 50%, #0f2538 0%, var(--bg) 70%, #060e18 100%);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Pitch dots */
.pitch-dots circle, .pitch-dots polygon, .pitch-dots path { cursor: pointer; }
.pitch-dot-group { cursor: pointer; transition: transform 0.1s; }

/* Tooltip — redesigned with outcome highlighting */
.pitch-tooltip {
    position: absolute;
    z-index: 100;
    background: rgba(8, 20, 35, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(79, 193, 255, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    font-size: 0.73rem;
    line-height: 1.55;
    color: var(--text);
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 12px rgba(79, 193, 255, 0.06);
}

.tip-speed {
    color: #7bb8d9;
}

.tip-count {
    color: var(--text-dim);
    font-weight: 600;
}

.tip-tag {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--bg-elev);
    vertical-align: middle;
    margin-left: 0.25rem;
}

.tip-whiff { background: #e63946; }
.tip-barrel { background: #f59e0b; }

.tip-outcome {
    display: inline-block;
    color: var(--accent-ink);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.1rem 0.5rem;
    background: rgba(79, 193, 255, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(79, 193, 255, 0.2);
}

.tip-outcome.tip-hr {
    color: var(--accent-strong);
    background: rgba(255, 100, 127, 0.12);
    border-color: rgba(255, 100, 127, 0.3);
}

.tip-hit-outcome {
    color: var(--good);
    font-weight: 600;
    text-transform: capitalize;
}

.tip-ev, .tip-la {
    color: #a0b8cc;
    font-size: 0.68rem;
}

.tip-who {
    color: var(--text-dim);
    font-size: 0.65rem;
}

/* D3 axis styling */
.axis path, .axis line { stroke: #2a4a63; }
.axis text { fill: var(--text-muted); font-size: 10px; }

/* Viz section layout (pitching.html wrapper) */
.pitchviz-section {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.pitchviz-zone-panel {
    flex: 1;
    min-width: 500px;
}

.pitchviz-movement-panel {
    flex: 0 0 400px;
    position: relative;
}

@media (max-width: 900px) {
    .pitchviz-main {
        flex-direction: column;
    }
    .pitchviz-legend {
        flex: 1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .legend-row {
        grid-template-columns: 10px auto auto;
    }
    .legend-speed {
        display: none;
    }
    .strike-zone-svg,
    .movement-chart-svg {
        width: 100%;
    }
    .pitchviz-section {
        flex-direction: column;
    }
    .pitchviz-movement-panel {
        flex: 1;
        min-width: unset;
    }
}

/* Predictions page — each card on its own row, full-width tables that match
   the Game Predictions table sizing/style at the top of the page. */
.predictions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}

.pred-card {
    min-width: 0;
}

.pred-accuracy {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--good);
    background: rgba(52, 211, 153, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    margin-left: 0.5rem;
    vertical-align: middle;
}


/* ====================================================================
   CLASSIC BASEBALL THEME — appended overrides
   Palette: Cream paper · MLB Navy (#002D72) · MLB Red (#D50032)
                          · Sepia lines (var(--border)) · Field green (var(--good))
   Aesthetic: scorecard paper feel, bold sans-serif headlines, sharp ink
   borders, MLB-cap navy header with red accent stripe.
   ==================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   STADIUM AT NIGHT — body background
   Layers (bottom to top):
   1. Dark navy "night sky" up high → grass green at the field
   2. Diamond mowed-grass cross-hatch (2 diagonals)
   3. Soft warm vignette at very top mimicking stadium lights spilling down
   4. Subtle "warning track" tan band at the bottom edge
   ───────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

body {
    background:
        /* Warm light wash from top — stadium lights */
        radial-gradient(ellipse 1400px 550px at 50% -120px, rgba(255, 220, 150, 0.18) 0%, transparent 70%),
        /* Sky → field gradient */
        linear-gradient(180deg,
            var(--text-strong) 0%,         /* night sky behind stadium */
            #0e2c3e 8%,
            #163f25 18%,        /* dark grass edge */
            #1d5530 35%,
            #246438 60%,
            #2c7548 100%        /* foreground grass */
        );
    background-attachment: fixed;
    color: var(--text);
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
    font-feature-settings: 'tnum' 1, 'cv11' 1;
    min-height: 100vh;
}

/* Diamond cross-hatch mowed-grass pattern */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        repeating-linear-gradient(
            38deg,
            transparent 0,
            transparent 80px,
            rgba(255, 255, 255, 0.05) 80px,
            rgba(255, 255, 255, 0.05) 160px
        ),
        repeating-linear-gradient(
            -38deg,
            transparent 0,
            transparent 80px,
            rgba(0, 0, 0, 0.075) 80px,
            rgba(0, 0, 0, 0.075) 160px
        );
    pointer-events: none;
    z-index: 0;
}

/* Warning track — a tan band along the bottom of the page */
body::after {
    content: '';
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 60px;
    background:
        linear-gradient(180deg,
            rgba(176, 122, 79, 0) 0%,
            rgba(176, 122, 79, 0.55) 80%,
            rgba(176, 122, 79, 0.85) 100%);
    pointer-events: none;
    z-index: 0;
}

body > * { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────────────────────────────
   STADIUM LIGHT STRIP — runs along the bottom edge of the navy header.
   Implemented as a flex row of pseudo-bulbs via box-shadow on a single
   element. A few bulbs are deliberately dim ("blown out") for character.
   ───────────────────────────────────────────────────────────────────── */
.site-header {
    position: relative;
    z-index: 100;
}
.site-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -8px; /* sits just below the red accent stripe */
    height: 8px;
    background:
        radial-gradient(circle 4px at 1.5%   50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 5.0%   50%, #fffbe6 0%, #f0c860 35%, transparent 75%),
        radial-gradient(circle 4px at 8.5%   50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 12.0%  50%, rgba(255, 232, 154, 0.25) 0%, transparent 70%), /* dim "blown" */
        radial-gradient(circle 4px at 15.5%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 19.0%  50%, #fffbe6 0%, #f0c860 35%, transparent 75%),
        radial-gradient(circle 4px at 22.5%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 26.0%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 29.5%  50%, #fffbe6 0%, #f0c860 35%, transparent 75%),
        radial-gradient(circle 4px at 33.0%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 36.5%  50%, rgba(255, 232, 154, 0.25) 0%, transparent 70%), /* dim */
        radial-gradient(circle 4px at 40.0%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 43.5%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 47.0%  50%, #fffbe6 0%, #f0c860 35%, transparent 75%),
        radial-gradient(circle 4px at 50.5%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 54.0%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 57.5%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 61.0%  50%, #fffbe6 0%, #f0c860 35%, transparent 75%),
        radial-gradient(circle 4px at 64.5%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 68.0%  50%, rgba(255, 232, 154, 0.30) 0%, transparent 70%), /* dim */
        radial-gradient(circle 4px at 71.5%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 75.0%  50%, #fffbe6 0%, #f0c860 35%, transparent 75%),
        radial-gradient(circle 4px at 78.5%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 82.0%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 85.5%  50%, #fffbe6 0%, #f0c860 35%, transparent 75%),
        radial-gradient(circle 4px at 89.0%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 92.5%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 96.0%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%),
        radial-gradient(circle 4px at 99.0%  50%, #ffe89a 0%, var(--warn) 30%, transparent 75%);
    /* Soft glow halo around the strip */
    filter: drop-shadow(0 0 6px rgba(255, 220, 130, 0.35));
    pointer-events: none;
}

/* Site title gets a "scoreboard" font */
.site-header h1 {
    font-family: 'Oswald', 'Inter', sans-serif !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* Cards lift off the grass with soft shadow + a subtle navy glow */
.dashboard-section,
.matchup-card,
.metric-card,
.card,
.highlight-box {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.20),
        0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Slight warm tint on card top edge — like ambient stadium light */
.dashboard-section {
    border-top: 2px solid var(--accent-ink) !important;
}

/* Section headers in scoreboard "Oswald" font for a sporty feel */
.dashboard-section > h2,
.dashboard-section > h3,
.dashboard-section > header h2,
.dashboard-section > header h3,
.metric-card h3,
.highlight-box .highlight-title {
    font-family: 'Oswald', 'Inter', sans-serif !important;
}

/* Stat numbers — use Oswald with tabular nums for that scoreboard digit feel */
.highlight-box p strong,
.metric-card p strong,
table td strong,
.data-table td strong {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-feature-settings: 'tnum' 1;
    font-weight: 600;
    font-size: 1.05em;
}

/* Headings — ink black for primary, MLB navy for secondary */
h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 800;
    letter-spacing: -0.005em;
    margin-top: 0;
}
h2, h3, h4 { color: var(--accent-ink); }

/* Site header — deep ink navy (matches headline ink), gold accent.
   Less clash against the grass + cream palette. */
.site-header {
    background: linear-gradient(180deg, var(--text-strong) 0%, #07111f 100%) !important;
    border-bottom: 3px solid var(--warn) !important;
    padding: 0.95rem 2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.site-header h1 {
    color: var(--bg) !important;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 1.4rem;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.site-header nav a {
    color: var(--border) !important;
    font-weight: 700;
    font-size: 0.83rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding: 0.4rem 0.75rem;
    background: transparent !important;
}
.site-header nav a:hover {
    color: var(--warn) !important;                 /* gold on hover, like a stadium light */
    border-bottom-color: var(--warn);
    background: rgba(212, 148, 10, 0.10) !important;
}
.site-header nav a.active {
    color: var(--warn) !important;
    border-bottom-color: var(--warn);
    background: rgba(212, 148, 10, 0.15) !important;
}

/* Sections / cards — cream paper */
.dashboard-section {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

/* Section headlines — navy ink with sepia underline */
.dashboard-section > h2,
.dashboard-section > h3,
.dashboard-section > header h2,
.dashboard-section > header h3 {
    border-bottom: 2px solid var(--accent-ink);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    color: var(--accent-ink);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dashboard-section h4 {
    color: var(--accent-ink);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.9rem;
}

/* Cards / metric boxes / highlight boxes */
.metric-card,
.card,
.highlight-box {
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px;
    padding: 0.85rem 1rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.metric-card h3,
.card h3,
.highlight-box .highlight-title {
    color: var(--accent-ink);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
}

/* Tables — scorebook feel: navy thead, cream body, sepia grid */
table,
.data-table,
.workload-table {
    background: var(--bg-elev);
    border: 1px solid var(--accent-ink);
}
table thead,
.data-table thead,
.workload-table thead {
    background: var(--accent-ink) !important;
}
table th,
.data-table th,
.workload-table th {
    color: var(--bg-elev) !important;
    background: var(--accent-ink) !important;
    border: 1px solid var(--text-strong) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
}
table td,
.data-table td,
.workload-table td {
    background: var(--bg-elev);
    border: 1px solid var(--border) !important;
    color: var(--text);
}
table tbody tr:nth-child(even) td {
    background: var(--bg);
}
table tbody tr:hover td {
    background: rgba(0, 45, 114, 0.08) !important;
}
.clickable-row:hover td,
.clickable-row.highlight td {
    background: rgba(213, 0, 50, 0.10) !important;
}

/* Tabs */
.page-tab,
.leader-tab {
    color: var(--text-muted);
    background: transparent;
}
.page-tab:hover,
.leader-tab:hover {
    color: var(--accent-ink);
}
.page-tab.active,
.leader-tab.active {
    color: var(--accent-strong) !important;
    border-bottom-color: var(--accent-strong) !important;
}
.page-tabs,
.leader-tabs {
    border-bottom-color: var(--accent-ink) !important;
}

/* Form controls — bright white inputs on cream page */
input, select, textarea,
.filters input, .filters select {
    background: var(--bg-elev) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent-ink) !important;
    box-shadow: 0 0 0 2px rgba(213, 0, 50, 0.2) !important;
}
.filters {
    background: var(--border) !important;
    border: 1px solid var(--border) !important;
}

/* Stat colors — field green for positive, MLB red for negative */
.positive-diff { color: var(--good) !important; font-weight: 700; }
.negative-diff { color: var(--bad) !important; font-weight: 700; }

/* Workload bands */
tr.workload-ready { border-left: 4px solid var(--good); }
tr.workload-warning { border-left: 4px solid var(--warn); }
tr.workload-critical { border-left: 4px solid var(--accent-strong); }
.workload-ready td { color: var(--good); }
.workload-warning td { color: #946400; }
.workload-critical td { color: var(--bad); }

/* Buttons — MLB navy primary, red on hover */
.btn, .btn-primary {
    background: var(--accent-ink) !important;
    color: var(--bg-elev) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    border-radius: 4px;
    border: none;
    box-shadow: 0 2px 0 var(--text-strong);
}
.btn:hover, .btn-primary:hover {
    background: var(--accent-strong) !important;
    color: var(--bg-elev) !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 0 #a8002a;
}

/* Links */
a { color: var(--accent-ink); font-weight: 600; }
a:hover { color: var(--accent-strong); }

/* Footer — cream paper with navy top border */
footer {
    background: var(--border) !important;
    border-top: 3px solid var(--accent-ink) !important;
    color: var(--text-muted);
    padding: 1.25rem 2rem;
}
.footer-disclaimer {
    background: rgba(213, 0, 50, 0.06) !important;
    border: 1px solid rgba(213, 0, 50, 0.25) !important;
    color: var(--text) !important;
}
.footer-disclaimer strong { color: var(--accent-strong) !important; }
.data-freshness { color: var(--accent-ink) !important; }
.data-freshness strong { color: var(--accent-strong) !important; }

/* Matchup cards — cream paper feel, navy accents */
.matchup-card {
    background: var(--bg-elev) !important;
    border: 1px solid var(--accent-ink) !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);
}
.matchup-header {
    background: var(--border) !important;
    border-bottom: 2px solid var(--accent-ink) !important;
}

.pitcher-card {
    background: var(--bg-elev) !important;
    border-color: var(--border) !important;
}

/* Numbers/stats — tabular alignment */
table td strong, .data-table td strong,
.metric-card p strong, .highlight-box p strong {
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* Division leader row in standings */
tr.division-leader td {
    background: rgba(213, 0, 50, 0.08) !important;
    font-weight: 700;
}
tr.division-leader td:first-child::before {
    content: '\2605 ';
    color: var(--accent-strong);
}

.site-header { z-index: 100; }


/* ====================================================================
   DENSITY & TYPOGRAPHY UPSCALE
   The matchup cards had a lot of horizontal whitespace at the default
   font sizes. Bumping the base scale, adding letter-spacing on stat
   labels, and widening tables/chips so content fills the column.
   ==================================================================== */

html { font-size: 17px; }              /* scaled back per user feedback */

@media (min-width: 1200px) {
    html { font-size: 18px; }
}
@media (min-width: 1600px) {
    html { font-size: 19px; }
}

body, p, td, th, span, div, li, label, input, select {
    line-height: 1.55;
}

/* Pitcher card — make the stat line breathe */
.pitcher-card {
    padding: 1.1rem 1.4rem;
}
.pitcher-name-row strong,
.pitcher-card .pitcher-name {
    font-size: 1.2rem !important;
    letter-spacing: 0.01em;
}
.pitcher-season-line,
.pitcher-card .pitcher-season-line {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    line-height: 1.7;
}

/* Pitch arsenal chips — bigger, looser */
.pitch-chip,
.arsenal-chip,
.pitcher-card .arsenal-row span {
    font-size: 0.85rem !important;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.55rem !important;
}

/* "VS X ROSTER" stat grid — bigger numbers, more letter-spacing on labels */
.vs-roster,
.pitcher-vs-roster {
    font-size: 1rem;
}
.vs-roster .stat-label,
.pitcher-vs-roster th,
.pitcher-card th {
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
}
.vs-roster .stat-value,
.pitcher-card td {
    font-size: 1.05rem !important;
    font-weight: 700;
}

/* Section heads inside cards (HOT HITTERS, STARS ALIGNING, BULLPEN) */
.matchup-card h4,
.matchup-card .section-label {
    font-size: 0.95rem;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    margin-top: 0.25rem;
}

/* Hot hitters table inside the matchup card — larger, fills column */
.matchup-card table {
    font-size: 0.95rem;
}
.matchup-card table th {
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
    padding: 0.5rem 0.55rem;
}
.matchup-card table td {
    padding: 0.5rem 0.6rem;
}
.matchup-card table td strong {
    font-size: 1rem;
}

/* Stars Aligning chips — fill the row width */
.stars-row,
.matchup-card .stars-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
}
.matchup-card .stars-list > * {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
}

/* H2H panel at top — increase legibility */
.h2h-panel {
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
}
.h2h-panel .h2h-label {
    letter-spacing: 0.12em;
    font-size: 0.72rem;
}
.h2h-panel .h2h-val {
    font-size: 1.1rem !important;
    font-weight: 700;
}

/* Highlight boxes (Yesterday's Results) — bigger headline numbers */
.highlight-box p strong {
    font-size: 1.5rem !important;
    line-height: 1.1;
}
.highlight-box .highlight-title {
    font-size: 0.85rem !important;
    letter-spacing: 0.06em;
}

/* Yesterday's results 5-column grid — let the boxes breathe more */
.highlights-grid {
    gap: 1rem !important;
}

/* Game time / venue / weather meta line on matchup card */
.matchup-info-bar,
.matchup-card .matchup-info-bar {
    font-size: 0.95rem !important;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.75rem !important;
}

/* PICK line under the matchup card */
.matchup-pick,
.matchup-card .pick-line {
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.75rem;
}

/* General table density bump */
.data-table th,
.data-table td {
    padding: 0.55rem 0.75rem;
}
.data-table.compact th,
.data-table.compact td {
    padding: 0.5rem 0.7rem;
}

/* Section descriptive text — slightly bigger */
.dashboard-section > p.muted,
.dashboard-section > .explorer-subtitle {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 90ch;
}


/* ====================================================================
   LAYOUT FIX — VS ROSTER + LAST 5 STARTS side-by-side, full-width header
   ==================================================================== */

/* Two-column inside each pitcher card: vs-roster | last-5-starts */
.pitcher-deep-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.6rem;
}

.pitcher-deep-stats .vs-roster-section,
.pitcher-deep-stats .recent-starts-section {
    background: rgba(0, 45, 114, 0.04);
    border: 1px solid rgba(0, 45, 114, 0.18);
    border-radius: 4px;
    padding: 0.6rem 0.7rem;
}

.pitcher-deep-stats .vs-roster-label {
    display: block;
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-ink);
    font-weight: 700;
    margin-bottom: 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(0, 45, 114, 0.2);
}

/* The 5-cell stat grid — each cell is its own block, evenly spaced */
.matchup-stats-grid.compact5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.4rem;
}
/* 6-cell variant (Last-5-starts rows: adds R and R/9). Inherits all .compact5
   styling above; only the column count changes. */
.matchup-stats-grid.compact6 { grid-template-columns: repeat(6, 1fr); }
.matchup-stats-grid.statcast-row {
    margin-bottom: 0;
}
.matchup-stats-grid.compact5 .stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.3rem 0.15rem;
    border-radius: 3px;
}
.matchup-stats-grid.compact5 .stat-label {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.1rem;
}
.matchup-stats-grid.compact5 .stat-val {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* On narrow phones, stack the two stat panels vertically */
@media (max-width: 768px) {
    .pitcher-deep-stats {
        grid-template-columns: 1fr;
    }
}

/* Matchup-card header — make h2h panel and info-bar fill full width */
.matchup-header {
    padding: 0.85rem 1.1rem;
}

.h2h-panel {
    display: flex;
    align-items: center;
    width: 100%;
}
.h2h-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
    justify-content: space-between;   /* spread chips across the full row */
}
.h2h-span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
}
.h2h-label {
    font-family: 'Oswald', 'Inter', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}
.h2h-val {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 1.2rem !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.h2h-val.h2h-lead {
    color: var(--accent-ink);
}
.h2h-dash {
    color: var(--text-dim);
    margin: 0 0.15rem;
}

/* Matchup-info-bar (game time, venue, weather, status) — bigger, spread */
.matchup-info-bar {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1.1rem !important;
    border-top: 1px solid rgba(0, 45, 114, 0.15);
}
.matchup-info-bar > * {
    display: inline-flex;
    align-items: center;
}
.game-time-badge {
    background: var(--accent-ink);
    color: var(--bg-elev) !important;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-family: 'Oswald', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 0.95rem !important;
}
.game-status {
    color: var(--accent-strong);
    font-weight: 700;
    font-family: 'Oswald', 'Inter', sans-serif;
    letter-spacing: 0.05em;
}

/* Matchup teams — 2-column grid that mirrors the pitcher row below.
   Away team sits on the left half (above the away pitcher),
   Home team sits on the right half (above the home pitcher).
   The "@" separator is hidden — the column layout makes it obvious. */
.matchup-teams {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 45, 114, 0.2);
}
.matchup-teams .team-away {
    justify-self: start;
}
.matchup-teams .team-home {
    justify-self: start;          /* left-align in right column so it sits over its pitcher */
}
.matchup-teams .matchup-at {
    display: none;                /* the column layout makes "@" redundant */
}
.matchup-teams .team-away,
.matchup-teams .team-home {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 1.4rem !important;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.matchup-teams .team-away a,
.matchup-teams .team-home a {
    color: var(--accent-ink);
    text-decoration: none;
}
.matchup-teams .team-record {
    background: var(--border);
    color: var(--text-muted) !important;
    border: 1px solid var(--border);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.78rem !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-family: 'Oswald', 'Inter', sans-serif;
}
.matchup-at {
    color: var(--text-dim);
    font-weight: 400;
    font-size: 1.1rem;
    margin: 0 0.25rem;
}
.divisional-badge {
    background: var(--accent-strong);
    color: var(--bg-elev);
    padding: 0.15rem 0.55rem;
    border-radius: 3px;
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    font-weight: 700;
}

/* Pitcher stat line — big number, bigger gaps */
.pitcher-season-line {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1rem !important;
    font-size: 0.95rem !important;
    margin: 0.4rem 0 0.6rem;
}
.pitcher-season-line strong {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 1.1rem;
    color: var(--accent-ink);
}

/* Pitch arsenal chips — bigger and spaced out */
.pitch-arsenal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.3rem 0 0.55rem;
}
.pitch-chip {
    background: var(--border);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.82rem !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: 3px;
}
.pitch-chip em {
    color: var(--accent-ink);
    font-style: normal;
    font-weight: 700;
    margin-left: 0.25rem;
}

/* Pitcher name area — big and clean */
.pitcher-name-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.3rem;
    margin-bottom: 0.5rem;
}
.pitcher-name-row a {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 1.3rem !important;
    font-weight: 700;
    color: var(--accent-ink);
    letter-spacing: 0.01em;
}
.pitcher-hand {
    background: var(--accent-ink);
    color: var(--bg-elev);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.pitcher-record {
    margin-left: auto;
    color: var(--text-muted) !important;
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
}


/* ====================================================================
   MATCHUP HEADER — 3-COLUMN LAYOUT
   AWAY team + venue record  |  CENTER STACK (h2h, time, venue, status)  |  HOME team + venue record
   The center column is narrower and stacks data vertically.
   ==================================================================== */

.matchup-3col {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.25rem;
    align-items: start;
    padding: 0.75rem 0.5rem;
}

/* Away column — left aligned, content sits over the away pitcher card */
.matchup-col-away {
    text-align: left;
    padding-right: 0.5rem;
}
/* Home column — also left aligned (sits over home pitcher card) */
.matchup-col-home {
    text-align: left;
    padding-left: 0.5rem;
}

.matchup-col-away .team-away,
.matchup-col-home .team-home {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.matchup-col-away .team-away a,
.matchup-col-home .team-home a {
    color: var(--accent-ink);
    text-decoration: none;
}
.team-record {
    background: var(--border);
    color: var(--text-muted) !important;
    border: 1px solid var(--border);
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-family: 'Oswald', 'Inter', sans-serif;
}

/* Final score + team batting line for completed/in-progress games */
.team-scoreline {
    margin-top: 0.4rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: 'Oswald', 'Inter', sans-serif;
}
.team-final-score {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.team-scoreline-winner .team-final-score {
    color: var(--accent-ink);
}
.team-win-badge {
    background: var(--accent-ink);
    color: var(--bg-elev);
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.model-pick-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
    padding: 0.18rem 0.55rem;
    background: rgba(46, 160, 90, 0.18);
    border: 1px solid rgba(46, 160, 90, 0.4);
    border-radius: 4px;
    font-size: 0.78rem;
    font-family: 'Oswald', 'Inter', sans-serif;
    letter-spacing: 0.04em;
}
.mpb-label {
    font-weight: 700;
    color: #2ea05a;
    letter-spacing: 0.07em;
}
.mpb-pct {
    font-weight: 600;
    color: #c8d6c8;
}
.mpb-odds {
    color: #8aab8a;
    font-size: 0.9em;
}
.mpb-tier {
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-size: 0.82em;
    font-weight: 700;
}
.mpb-tier-mispriced, .mpb-tier-underdog { background: rgba(241,196,15,0.2); color: #f1c40f; }
.mpb-tier-big-edge  { background: rgba(46,204,113,0.2); color: #2ecc71; }
.mpb-tier-edge      { background: rgba(52,152,219,0.15); color: #3498db; }
.team-box-line {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.team-box-line .tb-val {
    font-weight: 700;
    color: var(--accent-ink);
    font-variant-numeric: tabular-nums;
    margin-right: 0.18rem;
}
.team-box-line .tb-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a847b;
}

/* Per-team top performers list (Judge 2-4, HR, 3RBI) */
.team-top-performers {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.team-top-performers li {
    padding: 0.05rem 0;
}
.team-top-performers a {
    color: var(--accent-ink);
    text-decoration: none;
    font-weight: 600;
}
.team-top-performers a:hover {
    text-decoration: underline;
}
.team-top-performers .tp-line {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    margin-left: 0.3rem;
}
.team-top-performers .tp-hr {
    color: var(--accent-strong);
    font-weight: 700;
}
.team-top-performers .tp-rbi {
    color: var(--accent-ink);
    font-weight: 600;
}
.team-top-performers .tp-r,
.team-top-performers .tp-bb,
.team-top-performers .tp-sb {
    color: var(--text-muted);
    font-weight: 600;
}

/* Inning-by-inning linescore table — sits below the matchup header */
.linescore-wrap {
    margin: 0.5rem 0.5rem 0;
    padding: 0.4rem 0.5rem;
    border-top: 1px solid rgba(0, 45, 114, 0.15);
    border-bottom: 1px solid rgba(0, 45, 114, 0.15);
    overflow-x: auto;
}
.linescore {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.linescore th,
.linescore td {
    padding: 0.15rem 0.4rem;
    text-align: center;
    border: none;
}
.linescore th {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a847b;
    font-weight: 600;
}
.linescore .ls-team {
    text-align: left;
    font-weight: 700;
    color: var(--accent-ink);
    padding-right: 0.6rem;
}
.linescore .ls-sep {
    border-left: 2px solid rgba(0, 45, 114, 0.2);
    padding-left: 0.55rem;
}
.linescore .ls-tot {
    font-weight: 700;
    color: var(--accent-ink);
}

/* Each team's @-venue record sits directly below its name */
.team-venue-record {
    margin-top: 0.4rem;
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    font-family: 'Oswald', 'Inter', sans-serif;
}
.team-venue-record .vr-label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}
.team-venue-record .vr-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent-ink);
    font-variant-numeric: tabular-nums;
}

/* CENTER STACK — DIV badge, h2h, time, venue, weather, status all stacked */
.matchup-col-center {
    text-align: center;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    border-left: 1px solid rgba(0, 45, 114, 0.15);
    border-right: 1px solid rgba(0, 45, 114, 0.15);
}

.divisional-badge.center {
    background: var(--accent-strong);
    color: var(--bg-elev);
    padding: 0.15rem 0.7rem;
    border-radius: 3px;
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    align-self: center;
    width: auto;             /* override the wide bar that was happening */
    display: inline-block;
}

.center-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-family: 'Oswald', 'Inter', sans-serif;
    line-height: 1.2;
}
.cs-label {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 0.15rem;
}
.cs-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.cs-val.h2h-lead {
    color: var(--accent-ink);
}
.cs-dash {
    color: var(--text-dim);
}

.center-time .game-time-badge {
    background: var(--accent-ink);
    color: var(--bg-elev) !important;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
    font-family: 'Oswald', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 0.95rem;
    margin-top: 0.2rem;
}

.center-venue {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.02em;
}
.center-weather {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}
.center-status .game-status {
    color: var(--accent-strong);
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(213, 0, 50, 0.08);
    padding: 0.15rem 0.55rem;
    border-radius: 3px;
}

/* On phones, stack the 3 columns vertically */
@media (max-width: 768px) {
    .matchup-3col {
        grid-template-columns: 1fr;
    }
    .matchup-col-center {
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(0, 45, 114, 0.15);
        border-bottom: 1px solid rgba(0, 45, 114, 0.15);
        padding: 0.5rem;
    }
}

/* Make sure the OLD wide-row .matchup-teams display rules don't apply here */
.matchup-3col .matchup-teams,
.matchup-3col .h2h-panel,
.matchup-3col .matchup-info-bar {
    display: contents;
}


/* ====================================================================
   TODAY'S TOP PICKS — secondary legacy panels (Games, Hits, Pitcher K's,
   SchwarBombs). 4 cards side-by-side at full width.
   The K Alt-Lines validated edge has its own hero card above (.hero-picks-card).
   ==================================================================== */

.top-picks-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

@media (max-width: 1100px) {
    .top-picks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .top-picks-grid { grid-template-columns: 1fr; }
}

/* ── Hero K Alt-Lines card — full-width table, prominent above the
   legacy panel grid. Validated +13% ROI gets the real estate it earned. ── */
.hero-picks-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-top: 3px solid var(--good, #2d9d3a);
    border-radius: 6px;
    padding: 0.85rem 1rem;
    margin-top: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.hpc-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text);
}
.hpc-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    background: rgba(45, 157, 58, 0.18);
    letter-spacing: 0.02em;
}
.hero-picks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.hero-picks-table thead th {
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.55rem;
    border-bottom: 1px solid var(--border);
}
.hero-picks-table tbody td {
    padding: 0.45rem 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text);
}
.hero-picks-table tbody tr:last-child td { border-bottom: none; }
.hero-picks-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }

/* ── Edge R&D strip — honest log of attempts at the markets that haven't
   yet beaten the gate. Not a panel of empty boxes — a row of attempt logs. ── */
.edge-rnd-strip {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-left: 3px solid var(--warn, #d49a3a);
    border-radius: 4px;
    padding: 0.65rem 0.9rem;
    margin-top: 0.85rem;
}
.ernd-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.5rem;
}
.ernd-grid { display: flex; flex-direction: column; gap: 0.35rem; }
.ernd-row {
    display: grid;
    grid-template-columns: 130px 110px 1fr;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.82rem;
    line-height: 1.4;
}
.ernd-market { font-weight: 700; color: var(--text); }
.ernd-status {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ernd-detail { color: var(--text-muted); font-size: 0.78rem; }
@media (max-width: 800px) {
    .ernd-row {
        grid-template-columns: 1fr;
        padding: 0.35rem 0;
        border-bottom: 1px dashed rgba(255,255,255,0.06);
    }
}

.top-picks-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent-ink);
    border-radius: 4px;
    padding: 0.65rem 0.85rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);
}

.tpc-title {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-ink);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.3rem;
    margin-bottom: 0.45rem;
}

.tpc-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.05rem;
    padding: 0.35rem 0;
    border-bottom: 1px dotted var(--border);
}
.tpc-row:last-child { border-bottom: none; }

.tpc-pick {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-ink);
    line-height: 1.15;
}

.tpc-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.25;
}

.tpc-stat {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 0.15rem;
    font-variant-numeric: tabular-nums;
}
.tpc-stat .tpc-edge {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-left: 0.25rem;
}

.tpc-empty {
    color: var(--text-dim);
    font-style: italic;
    font-size: 0.85rem;
    padding: 0.5rem 0;
}


/* ====================================================================
   STARS ALIGNING ROW (under the team headers, mirrors the 3-col grid)
   + DEEPER NAVY for headers/team names so they don't read as "baby blue"
   ==================================================================== */

/* Stars row: same 1fr auto 1fr grid as .matchup-3col so columns align */
.stars-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.25rem;
    align-items: start;
    padding: 0.55rem 0.5rem 0.7rem;
    border-top: 1px solid rgba(0, 26, 74, 0.15);
    background: rgba(26, 107, 61, 0.04);  /* faint green tint to evoke "alignment" */
}

.stars-col {
    padding: 0 0.5rem;
}
.stars-col-spacer {
    /* Empty middle column, matches the center stack width */
    min-width: 200px;
}

.stars-col-label {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--good);       /* field-green for the section label */
    margin-bottom: 0.3rem;
}

.star-entry {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.88rem;
    padding: 0.2rem 0;
    line-height: 1.3;
}
.star-icons {
    color: var(--warn);        /* gold stars */
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.star-name {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-weight: 700;
    color: var(--text-strong);        /* deep ink — no baby blue */
}
a.star-name {
    color: var(--text-strong);
    text-decoration: none;
    border-bottom: 1px dotted rgba(10, 25, 41, 0.3);
}
a.star-name:hover {
    color: var(--accent-strong);
    border-bottom-color: var(--accent-strong);
}

.star-hr-badge {
    background: rgba(213, 0, 50, 0.15);
    color: var(--bad);
    border: 1px solid rgba(213, 0, 50, 0.4);
    border-radius: 3px;
    padding: 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Oswald', 'Inter', sans-serif;
}
.star-rbi-badge {
    background: rgba(0, 26, 74, 0.1);
    color: var(--text-strong);
    border: 1px solid rgba(0, 26, 74, 0.35);
    border-radius: 3px;
    padding: 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Oswald', 'Inter', sans-serif;
}

/* On phones, stack vertically */
@media (max-width: 768px) {
    .stars-row {
        grid-template-columns: 1fr;
    }
    .stars-col-spacer { display: none; }
}


/* ====================================================================
   DEEPER NAVY HEADERS — replace the washed-out feeling with ink-like depth
   ==================================================================== */

/* Major headings — deep ink-navy instead of MLB Navy alone */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-strong) !important;     /* very dark navy, almost black */
    font-weight: 800 !important;
}

.dashboard-section > h2,
.dashboard-section > h3,
.dashboard-section > header h2,
.dashboard-section > header h3 {
    color: var(--text-strong) !important;
    border-bottom-color: var(--text-strong) !important;
    font-weight: 900 !important;
}

/* Team name links — use the same deep ink so they don't look pale */
.matchup-col-away .team-away a,
.matchup-col-home .team-home a,
.team-away a,
.team-home a {
    color: var(--text-strong) !important;
    font-weight: 800 !important;
}

/* Pitcher name links — same treatment */
.pitcher-name-row a {
    color: var(--text-strong) !important;
    font-weight: 800 !important;
}

/* The "VS X ROSTER" / "LAST N STARTS" panel labels */
.pitcher-deep-stats .vs-roster-label {
    color: var(--text-strong) !important;
    border-bottom-color: rgba(10, 25, 41, 0.25) !important;
}

/* Top picks card titles + picks */
.tpc-title {
    color: var(--text-strong) !important;
}
.tpc-pick {
    color: var(--text-strong) !important;
}

/* Top picks card top stripe — keep navy but slightly deeper */
.top-picks-card {
    border-top-color: var(--text-strong) !important;
}

/* Section headlines (e.g., the h2 "TODAY'S MATCHUPS") */
.dashboard-section h2,
.dashboard-section h3 {
    color: var(--text-strong) !important;
}

/* Matchup-card section h2 if present */
.matchup-card h3,
.matchup-card h4 {
    color: var(--text-strong) !important;
}

/* Star Aligning — signal chips (vs P, vs Team, Hand, Hot, etc.) */
.star-signals {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-left: 0.2rem;
    align-items: baseline;
}
.star-signal {
    display: inline-flex;
    gap: 0.15rem;
    align-items: baseline;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.star-signal .ss-label {
    font-family: 'Oswald', 'Inter', sans-serif;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    font-weight: 600;
}
.star-signal .ss-val {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-weight: 700;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
/* Strong signals get extra emphasis (the original `strong` flag from the service) */
.star-signal.strong .ss-val {
    color: var(--good);
}

/* ====================================================================
   PREDICTIONS PAGE — uniform table sizing
   Match Game Predictions row size across every table on the picks page.
   ==================================================================== */

.dashboard-section.pred-card .data-table th,
.dashboard-section.pred-card .data-table td,
.predictions-grid .data-table th,
.predictions-grid .data-table td {
    padding: 0.38rem 0.55rem !important;
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
}

.dashboard-section.pred-card .data-table th,
.predictions-grid .data-table th {
    font-size: 0.68rem !important;
}

/* Game Predictions table at the top — same compact density */
.dashboard-section .data-table.compact th,
.dashboard-section .data-table.compact td {
    padding: 0.38rem 0.55rem;
    font-size: 0.8rem;
    line-height: 1.25;
    vertical-align: middle;
}
.dashboard-section .data-table.compact th {
    font-size: 0.68rem;
}

/* Player + team label on same line — tighter typography */
.dashboard-section.pred-card .data-table td .muted,
.predictions-grid .data-table td .muted {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 0.2rem;
}