/* 2026 FRC World Championship Analysis - Shared Styles */ :root { color-scheme: light dark; --primary-color: #0066cc; --primary-rgb: 0, 102, 204; --secondary-color: #ff6600; --success-color: #28a745; --danger-color: #dc3545; --warning-color: #ffc107; --dark-bg: #1a1a1a; --light-bg: #f8f9fa; --card-bg: #ffffff; --text-primary: #333333; --text-secondary: #666666; --border-color: #dee2e6; --shadow: 0 2px 8px rgba(0,0,0,0.1); --shadow-hover: 0 4px 16px rgba(0,0,0,0.15); } /* Dark mode — applies when: - the user has set [data-theme="dark"] on via the nav toggle, OR - the OS prefers dark and the user hasn't explicitly opted to "light" Light-only callers can opt out via [data-theme="light"]. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --light-bg: #15181d; --card-bg: #252932; --text-primary: #ebecef; --text-secondary: #a8b0ba; --border-color: #383d47; --shadow: 0 2px 8px rgba(0,0,0,0.6); --shadow-hover: 0 4px 16px rgba(0,0,0,0.7); } } :root[data-theme="dark"] { color-scheme: dark; --light-bg: #15181d; --card-bg: #252932; --text-primary: #ebecef; --text-secondary: #a8b0ba; --border-color: #383d47; --shadow: 0 2px 8px rgba(0,0,0,0.6); --shadow-hover: 0 4px 16px rgba(0,0,0,0.7); } :root[data-theme="light"] { color-scheme: light; } /* All hardcoded `background: white` in this file have been replaced with var(--card-bg) so dark mode auto-applies — no per-class override list needed. The light tints below need explicit dark equivalents though. */ /* Alert backgrounds in dark mode — the light tints (#d1ecf1 etc.) wash out their borders and have black text that disappears on dark surfaces. */ :root[data-theme="dark"] .alert-info, :root:not([data-theme="light"]) .alert-info { background-color: rgba(13, 202, 240, 0.12); color: #9eeaff; } :root[data-theme="dark"] .alert-success, :root:not([data-theme="light"]) .alert-success { background-color: rgba(40, 167, 69, 0.15); color: #98ecae; } :root[data-theme="dark"] .alert-warning, :root:not([data-theme="light"]) .alert-warning { background-color: rgba(255, 193, 7, 0.15); color: #ffe69b; } /* Alliance-strip / stats / chip — softer surface in dark mode, otherwise they look like flat dark cards on top of the parent card. */ :root[data-theme="dark"] .alliance-strip, :root[data-theme="dark"] .alliance-stats, :root[data-theme="dark"] .ranking-item, :root[data-theme="dark"] .h2h-side-stat, :root[data-theme="dark"] .h2h-team-chip, :root:not([data-theme="light"]) .alliance-strip, :root:not([data-theme="light"]) .alliance-stats, :root:not([data-theme="light"]) .ranking-item, :root:not([data-theme="light"]) .h2h-side-stat, :root:not([data-theme="light"]) .h2h-team-chip { background: rgba(255, 255, 255, 0.04); } /* Match-row/team-row hover tints used 0.05 alpha against white. In dark mode they need a higher alpha or the highlight is invisible. */ :root[data-theme="dark"] tbody tr:hover, :root[data-theme="dark"] .team-match-row:hover, :root[data-theme="dark"] .team-detail-row:hover, :root:not([data-theme="light"]) tbody tr:hover, :root:not([data-theme="light"]) .team-match-row:hover, :root:not([data-theme="light"]) .team-detail-row:hover { background-color: rgba(0, 102, 204, 0.18); } /* Theme toggle button in the nav. */ .theme-toggle { background: none; border: 1px solid rgba(255,255,255,0.2); color: white; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 1rem; line-height: 1; margin-left: 8px; transition: background 0.15s, border-color 0.15s; } .theme-toggle:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); } @media (max-width: 768px) { .theme-toggle { margin-right: 8px; } } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text-primary); background-color: var(--light-bg); /* Prevent iOS Safari from inflating font sizes in landscape. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Smooth font rendering on macOS / iOS. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Tables auto-overflow horizontally on small screens so wide reports (Top 20 teams, Division Overview) don't blow out the viewport. We DON'T put overflow-x on .card itself — per CSS spec, setting overflow-x:auto with overflow-y:visible promotes overflow-y to auto too, which clips absolutely-positioned dropdowns (search suggestion lists). Instead, put the overflow on the table itself by making it a block-level scrollable element only when it would actually overflow. */ table { min-width: 0; /* Wrap text instead of horizontal scroll — keeps dropdowns un-clipped and works fine for our content-heavy tables. Tables that genuinely need horizontal scrolling can opt in by wrapping in .table-scroll. */ } /* Constrain to the parent card's content area so a wide table can't push the wrapper itself wider — the wrapper has to be clipped, not the table. max-width:100% + display:block + width:100% is belt-and-suspenders against shrink-to-fit-style sizing inside flex/grid ancestors. */ .table-scroll { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* When inside a table-scroll, the table must NOT be forced to fill 100% of the wrapper — it should size to its own min-content so columns stay readable while the wrapper handles horizontal overflow. */ .table-scroll > table { width: max-content; min-width: 100%; } /* Honor the iPhone safe-area inset so content doesn't get clipped under the notch / home indicator when the site is launched as a PWA. */ @supports (padding: max(0px)) { nav .nav-container { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } .container { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } footer { padding-bottom: max(30px, env(safe-area-inset-bottom)); } } /* iOS Safari zooms in (very rudely) when an input with font-size < 16px gets focus. Force every text input to 16px on small screens — this doesn't change the font-size cascade for the design, just prevents the zoom. */ @media (max-width: 768px) { input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], select, textarea { font-size: 16px !important; } } /* ============================================================ Form elements — global defaults so every ,

picks up the theme without per-class restyling.
   Native controls don't inherit `color`/`background` from the
   surrounding text by default; without this they fall through
   to the OS theme (which can produce white-on-dark or black-on-
   dark depending on the platform). color-scheme on :root flips
   the default chrome (scrollbars, dropdown arrows, focus rings).
   ============================================================ */
input, select, textarea, button {
    font-family: inherit;
    font-size: 1rem;
    color: var(--text-primary);
    background-color: var(--card-bg);
}
input::placeholder, textarea::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}
/* <option> in a native select doesn't always inherit from the parent;
   set both fg and bg so the dropdown menu is readable in dark mode. */
option {
    background-color: var(--card-bg);
    color: var(--text-primary);
}
/* Search inputs (<input type="search">) get a default UA cancel button
   that's hard to see in dark mode. Hide it — the user can clear with
   keyboard or by retyping. */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Navigation */
nav {
    background: linear-gradient(135deg, var(--primary-color), #0052a3);
    color: white;
    padding: 0;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
}

.nav-brand {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 15px 0;
    text-decoration: none;
    color: white;
    white-space: nowrap;
}

.nav-brand:hover {
    color: var(--secondary-color);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 5px;
}

.nav-menu li a {
    display: block;
    padding: 20px 15px;
    color: white;
    text-decoration: none;
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
}

.nav-menu li a:hover,
.nav-menu li a.active,
.nav-menu li a[aria-current="page"] {
    background-color: rgba(255,255,255,0.1);
    border-bottom-color: var(--secondary-color);
}

/* Live-updated badge in the nav. Pushed to the right by margin-left:auto;
   collapses on mobile so it doesn't fight the hamburger menu. */
.nav-updated {
    margin-left: auto;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
    padding: 0 14px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.nav-updated:empty { display: none; }
@media (max-width: 768px) {
    .nav-updated { display: none; }
}

/* Mobile Menu Toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 10px;
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Page Header */
.page-header {
    background: var(--card-bg);
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.page-header h1 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.page-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* Cards */
.card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    transition: all 0.3s;
}

.card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.card-header {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

thead {
    background: var(--primary-color);
    color: white;
}

th, td {
    padding: 12px 15px;
    text-align: left;
}

th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

tbody tr:hover {
    background-color: rgba(0, 102, 204, 0.05);
}

tbody tr:last-child {
    border-bottom: none;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 500;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: #0052a3;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

.btn-secondary:hover {
    background-color: #e65c00;
}

.btn-success {
    background-color: var(--success-color);
    color: white;
}
.btn-success:hover {
    background-color: #1e7e34;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}
.btn-danger:hover {
    background-color: #b02a37;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* Default button styling — covers <button class="btn"> without a variant
   modifier, e.g. the Reset button. Without this they fall through to the
   browser's white default which is jarring in dark mode. */
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger) {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.badge-primary {
    background-color: var(--primary-color);
    color: white;
}

.badge-success {
    background-color: var(--success-color);
    color: white;
}

.badge-warning {
    background-color: var(--warning-color);
    color: var(--text-primary);
}

.badge-danger {
    background-color: var(--danger-color);
    color: white;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: all 0.3s;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.stat-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Division Selector */
.division-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.division-btn {
    padding: 10px 20px;
    border: 2px solid var(--primary-color);
    background: var(--card-bg);
    color: var(--primary-color);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
}

.division-btn:hover,
.division-btn.active {
    background: var(--primary-color);
    color: white;
}

/* Loading Spinner */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.spinner {
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Alert Messages */
.alert {
    padding: 15px 20px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.alert-info {
    background-color: #d1ecf1;
    border-left: 4px solid #0c5460;
    color: #0c5460;
}

.alert-success {
    background-color: #d4edda;
    border-left: 4px solid #155724;
    color: #155724;
}

.alert-warning {
    background-color: #fff3cd;
    border-left: 4px solid #856404;
    color: #856404;
}

/* Footer */
footer {
    background: var(--dark-bg);
    color: white;
    text-align: center;
    padding: 30px 20px;
    margin-top: 50px;
}

footer p {
    margin-bottom: 10px;
}

footer a {
    color: var(--secondary-color);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-toggle {
        display: block;
        margin-left: auto;  /* push hamburger + theme-toggle to the right */
    }

.nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--primary-color);
        box-shadow: var(--shadow);
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .nav-menu li a {
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    .card-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .page-header {
        padding: 20px;
    }
    
    .page-header h1 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .division-selector {
        flex-direction: column;
    }
    
    .division-btn {
        width: 100%;
    }
}

/* ============================================================
   Utility classes — keep this section small and theme-aware.
   Anything that needs to change in dark mode should reference
   custom properties so it auto-adapts.
   ============================================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.hidden { display: none; }

.muted    { color: var(--text-secondary); }
.tabular  { font-variant-numeric: tabular-nums; }
.surface  { background: var(--card-bg); }
.subtle-border { border: 1px solid var(--border-color); border-radius: 6px; }

/* Skip-to-main link for keyboard users — visually hidden until focused. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    background: var(--primary-color);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus {
    left: 8px;
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

/* Skeleton-loader shimmer for loading states. Replaces spinners on cards
   that have known shape (team detail, alliance grid). */
@keyframes skeletonShimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton {
    background: linear-gradient(90deg,
        var(--border-color) 0%,
        var(--light-bg) 50%,
        var(--border-color) 100%);
    background-size: 800px 100%;
    animation: skeletonShimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* Mobile nav backdrop — appears under the dropdown menu so taps anywhere
   else dismiss the menu and the user clearly sees the menu is modal-ish. */
.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    top: 60px; /* below nav */
    background: rgba(0, 0, 0, 0.4);
    z-index: 900;
}
.nav-backdrop.active { display: block; }

/* Cross-page team links — used by FRCAnalysis.teamLink() in any context
   that renders a team number that should jump to the team detail page. */
.team-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s, background 0.15s;
    padding: 0 2px;
    border-radius: 3px;
}

.team-link:hover,
.team-link:focus-visible {
    border-bottom-color: var(--primary-color);
    background: rgba(0, 102, 204, 0.06);
}

/* Bracket variant — bracket cards have red/blue backgrounds, so the
   default blue link color clashes. Inherit the surrounding text color
   and use a softer hover affordance. */
.team-link--bracket {
    color: inherit;
    font-weight: 700;
}

.team-link--bracket:hover,
.team-link--bracket:focus-visible {
    border-bottom-color: rgba(0, 0, 0, 0.6);
    background: rgba(255, 255, 255, 0.4);
}

/* Bracket alliance highlight (set by playoffs.js when the user lands via
   ?team=N or ?alliance=N). Pulses for 2 seconds, then settles into a
   persistent gold outline so the alliance stays findable. */
@keyframes bracketHighlightPulse {
    0%   { box-shadow: 0 0 0 0   rgba(255, 193, 7, 0.9); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 193, 7, 0); }
    100% { box-shadow: 0 0 0 0   rgba(255, 193, 7, 0); }
}

.bracket-card--highlight {
    animation: bracketHighlightPulse 1.4s ease-out 2;
    outline: 3px solid var(--warning-color);
    outline-offset: 2px;
    z-index: 5;
    position: relative;
}

.tba-link {
    display: inline-block;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: border-color 0.15s, background 0.15s;
}

.tba-link:hover {
    border-color: var(--primary-color);
    background: rgba(0, 102, 204, 0.06);
}

/* Quick-action row on the team detail card. Wraps gracefully on narrow
   viewports; each action is the same height for visual rhythm. */
.team-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.team-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.team-action:hover {
    border-color: var(--primary-color);
    background: rgba(0, 102, 204, 0.06);
    transform: translateY(-1px);
}

.team-action--external {
    color: var(--text-secondary);
}

.team-action--external:hover {
    color: var(--primary-color);
}

/* === Team's matches section on teams.html (All / Completed / Upcoming) === */

.team-matches-jump {
    float: right;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
}

.team-matches-jump:hover {
    text-decoration: underline;
}

.team-matches-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 14px;
}

.team-matches-tab {
    background: none;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;  /* hide the card border under the active underline */
    transition: color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.team-matches-tab:hover {
    color: var(--text-primary);
}

.team-matches-tab--active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.team-matches-tab__count {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    background: rgba(0, 102, 204, 0.1);
    color: var(--primary-color);
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.team-matches-tab--active .team-matches-tab__count {
    background: var(--primary-color);
    color: white;
}

.team-matches-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Each row is an anchor → click anywhere navigates to matches.html */
.team-match-row {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 14px;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.team-match-row:hover {
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.team-match-row--red {
    border-left: 4px solid #dc3545;
}

.team-match-row--blue {
    border-left: 4px solid #0066cc;
}

.team-match-row__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.team-match-row__num {
    font-weight: 600;
    color: var(--text-primary);
}

.team-match-row__side {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.team-match-row__side--red {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

.team-match-row__side--blue {
    background: rgba(0, 102, 204, 0.12);
    color: #0066cc;
}

.team-match-row__status {
    margin-left: auto;
    font-weight: 600;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    padding: 3px 10px;
    border-radius: 12px;
}

.team-match-row__status--win {
    background: rgba(40, 167, 69, 0.12);
    color: var(--success-color);
}

.team-match-row__status--loss {
    background: rgba(220, 53, 69, 0.12);
    color: var(--danger-color);
}

.team-match-row__status--tie {
    background: rgba(255, 193, 7, 0.18);
    color: #b07a00;
}

.team-match-row__status--upcoming {
    background: rgba(0, 102, 204, 0.12);
    color: var(--primary-color);
}

.team-match-row__alliances {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    font-size: 0.85rem;
}

.team-match-row__alliances::before {
    content: 'vs';
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.8rem;
    grid-column: 2;
    text-align: center;
}

.team-match-row__alliance {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    color: var(--text-secondary);
}

.team-match-row__alliance--red { grid-column: 1; }
.team-match-row__alliance--blue { grid-column: 3; justify-content: flex-end; }

.team-match-row__alliance--focus {
    color: var(--text-primary);
}

.team-match-row__team {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: 3px;
}

.team-match-row__team--self {
    background: rgba(0, 102, 204, 0.15);
    color: var(--primary-color);
    font-weight: 700;
}

@media (max-width: 600px) {
    .team-match-row__alliances {
        grid-template-columns: 1fr;
    }
    .team-match-row__alliances::before {
        grid-column: 1;
    }
    .team-match-row__alliance--red,
    .team-match-row__alliance--blue {
        grid-column: 1;
        justify-content: flex-start;
    }
}

/* ============================================================
   Match Predictions page (matches.html)
   ============================================================ */

/* Filter pill row — same shape language as .division-selector but
   without the heavy outlined-button styling. */
.match-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.match-filter-btn {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

.match-filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.match-filter-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Active team-filter chip (shown when ?team=N is in the URL). */
.team-filter-chip {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 14px;
    border-radius: 20px;
    background: rgba(0, 102, 204, 0.08);
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.9rem;
}

.team-filter-chip__clear {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
}

.team-filter-chip__clear:hover {
    background: #0052a3;
}

/* Cross-division team search on the matches page. Same visual language as
   the teams.html search but the suggestion rows show division so users
   can disambiguate at a glance. */
.match-search-row {
    display: flex;
}

.match-search-wrapper {
    position: relative;
    flex: 1;
}

.match-search-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    box-sizing: border-box;
    background: var(--card-bg);
    color: var(--text-primary);
    transition: border-color 0.15s;
}

.match-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.match-search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

.match-search-suggestion {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}

.match-search-suggestion:last-child {
    border-bottom: none;
}

.match-search-suggestion:hover,
.match-search-suggestion--active {
    background: rgba(0, 102, 204, 0.08);
}

.match-search-suggestion__num {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-weight: 700;
    color: var(--primary-color);
}

.match-search-suggestion__name {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-search-suggestion__div {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.match-search-empty {
    padding: 14px;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    list-style: none;
}

/* Match list — vertical stack of match rows, each one a self-contained card. */
.match-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.match-row {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    background: var(--card-bg);
    transition: box-shadow 0.2s, transform 0.2s;
}

.match-row:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.match-row--tossup {
    border-left: 4px solid var(--warning-color);
}

.match-row--locked {
    border-left: 4px solid var(--success-color);
}

/* Completed matches: subtle gray left border + slightly faded so the eye
   skips them when scanning for upcoming action, without making them invisible. */
.match-row--completed {
    border-left: 4px solid var(--text-secondary);
    opacity: 0.92;
}
.match-row--completed:hover { opacity: 1; }

/* Section heading separating Quals from Eliminations on the matches page. */
.match-section-heading {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 4px 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

/* Match row is clickable; show that with cursor + faint highlight on hover */
.match-row {
    cursor: pointer;
    user-select: none;
}

.match-row:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.match-row__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.match-row__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.match-row__number {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.05rem;
}

/* Predicted score replaces the previous "Blue favored 73%" badge —
   conveys the same directional info plus the actual score gap. */
.match-row__predicted-score {
    color: var(--text-secondary);
    font-size: 0.95rem;
    letter-spacing: 0.2px;
}

.match-row__score-red {
    color: #dc3545;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.match-row__score-blue {
    color: #0066cc;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.match-row__score-sep {
    color: var(--border-color);
    font-weight: 400;
    margin: 0 2px;
}

/* Expand/collapse chevron — rotates when the row is open. */
.match-row__chevron {
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.match-row--open .match-row__chevron {
    transform: rotate(180deg);
}

/* Two-color probability bar: red fills from the left, blue fills the rest. */
.prob-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--border-color);
}

.prob-bar__red {
    background: #dc3545;
    transition: width 0.3s;
}

.prob-bar__blue {
    background: #0066cc;
    transition: width 0.3s;
}

/* Side-by-side alliance strips below the probability bar. */
.match-alliances {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.alliance-strip {
    border-radius: 6px;
    padding: 10px 12px;
    border-left: 4px solid;
    background: var(--light-bg);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.alliance-strip--red {
    border-left-color: #dc3545;
    background: rgba(220, 53, 69, 0.05);
}

.alliance-strip--blue {
    border-left-color: #0066cc;
    background: rgba(0, 102, 204, 0.05);
}

.alliance-strip__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.alliance-strip--red .alliance-strip__label { color: #dc3545; }
.alliance-strip--blue .alliance-strip__label { color: #0066cc; }

.alliance-strip__teams {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Team tag is now an anchor — same visual but clickable to teams.html */
.alliance-team-tag {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    transition: border-color 0.15s, background 0.15s;
}

.alliance-team-tag:hover {
    border-color: var(--primary-color);
    background: rgba(0, 102, 204, 0.06);
    color: var(--primary-color);
}

.alliance-strip__meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.alliance-strip__prob {
    font-weight: 600;
    color: var(--text-primary);
}

/* Expanded per-team breakdown shown when a match row is clicked. */
.match-detail {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-color);
}

.match-detail__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.match-detail__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.match-detail__heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.match-detail__col--red .match-detail__heading { color: #dc3545; }
.match-detail__col--blue .match-detail__heading { color: #0066cc; }

.match-detail__teams {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.match-detail__empty {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
    padding: 8px 0;
}

/* Whole row is now an anchor — kill the default underline + inherit color
   so the inner cells keep their styling. Hover affordance moved to the row
   level so it's clear the entire row is clickable. */
.team-detail-row {
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.team-detail-row:hover {
    border-color: var(--primary-color);
    background: rgba(0, 102, 204, 0.04);
}

.team-detail-row__number {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-weight: 700;
    color: var(--primary-color);
}

.team-detail-row__name {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-detail-row__epa {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.team-detail-row__epa-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.team-detail-row__epa-value {
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.team-detail-row__record {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    min-width: 60px;
    text-align: right;
}

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

.match-row__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

.match-row__chevron {
        align-self: flex-end;
        margin-top: -22px;  /* tuck it back into the title row visually */
    }

.match-detail__grid {
        grid-template-columns: 1fr;
    }

.team-detail-row {
        grid-template-columns: 50px 1fr auto;
    }

.team-detail-row__record {
        grid-column: 1 / -1;
        text-align: left;
        padding-left: 62px;
    }
}

/* ============================================================
   Sandbox / live-tracker page (was 415 lines of inline <style>)
   ============================================================ */

.sandbox-mode-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sandbox-mode-tab {
    flex: 1 1 200px;
    padding: 14px 18px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.sandbox-mode-tab:hover {
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.sandbox-mode-tab.sandbox-mode-tab--active {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
}

.sandbox-help {
    background: rgba(0, 102, 204, 0.04);
    border-left: 4px solid var(--primary-color);
    padding: 14px 18px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.sandbox-help summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--primary-color);
}

.sandbox-help[open] summary { margin-bottom: 12px; }

.sandbox-help ol,
.sandbox-help ul { margin: 0 0 8px 24px; line-height: 1.7; }

.sandbox-help pre {
    background: #2d3748;
    color: #e2e8f0;
    padding: 12px;
    border-radius: 5px;
    font-size: 0.85rem;
    overflow-x: auto;
    margin: 8px 0;
}

.sandbox-help code {
    background: rgba(0, 102, 204, 0.08);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
}

.sandbox-help-nested {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.sandbox-help-nested summary {
    color: var(--text-primary);
    font-weight: 500;
}

.sandbox-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.sandbox-control-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.sandbox-select,
.sandbox-input {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--border-color);
    border-radius: 5px;
    font-size: 0.95rem;
    background: var(--card-bg);
    color: var(--text-primary);
}

.sandbox-select:focus,
.sandbox-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.sandbox-button-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

/* Scenario tabs (existing feature). */
.scenario-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.scenario-tab {
    padding: 10px 20px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    font-weight: 500;
}

.scenario-tab.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.scenario-tab:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.scenario-tab .close-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--danger-color);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
}

/* Alliance grid + cards. */
.alliances-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.alliance-card {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 20px;
    box-shadow: var(--shadow);
    transition: all 0.2s;
}

.alliance-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.alliance-header {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--primary-color);
    color: var(--primary-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reset-alliance-btn {
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.reset-alliance-btn:hover {
    background: #b02a37;
    transform: rotate(180deg);
}

.team-selection { margin-bottom: 15px; }

.team-selection label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--text-secondary);
}

.team-select-wrapper { position: relative; }

.team-select {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--border-color);
    border-radius: 5px;
    font-size: 14px;
    background: var(--card-bg);
    color: var(--text-primary);
}

.team-select:focus {
    border-color: var(--primary-color);
    outline: none;
}

.team-epa {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 8px;
    background: var(--success-color);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.alliance-stats {
    margin-top: 15px;
    padding: 15px;
    background: var(--light-bg);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.stat-row:first-child {
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.alliance-stats .stat-label {
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    font-size: inherit;
}

.alliance-stats .stat-value {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1rem;
    margin-bottom: 0;
}

.stat-highlight {
    font-size: 1.7rem;
    color: var(--success-color);
    font-weight: 800;
    line-height: 1;
}

.team-unavailable {
    color: var(--border-color);
    font-style: italic;
}

.validation-message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    font-weight: 600;
}

.validation-error {
    background: #fed7d7;
    color: #c53030;
    border-left: 4px solid var(--danger-color);
}

.validation-success {
    background: #c6f6d5;
    color: #22543d;
    border-left: 4px solid var(--success-color);
}

/* Dark-mode replacements — the original light-pink/light-green tints don't
   blend with dark surfaces. Use translucent versions of the brand colors. */
:root[data-theme="dark"] .validation-error,
:root:not([data-theme="light"]) .validation-error {
    background: rgba(220, 53, 69, 0.18);
    color: #f5a4ad;
}
:root[data-theme="dark"] .validation-success,
:root:not([data-theme="light"]) .validation-success {
    background: rgba(40, 167, 69, 0.18);
    color: #98ecae;
}

.alliance-rankings {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: var(--shadow);
}

.alliance-rankings h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--primary-color);
    font-size: 1.2rem;
}

.rankings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ranking-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: var(--light-bg);
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
    transition: all 0.2s;
}

.ranking-item:hover {
    background: rgba(0, 102, 204, 0.06);
    transform: translateX(4px);
}

.ranking-position {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    min-width: 40px;
}

.ranking-alliance-name {
    flex: 1;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.ranking-teams {
    flex: 2;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 15px;
}

.ranking-epa {
    display: flex;
    gap: 20px;
    align-items: center;
}

.ranking-epa-item { text-align: right; }

.ranking-epa-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    display: block;
}

.ranking-epa-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--success-color);
}

.ranking-epa-value.secondary {
    font-size: 0.9rem;
    color: var(--primary-color);
}

.sandbox-bracket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sandbox-bracket-close {
    padding: 5px 15px;
    font-size: 0.85rem;
}

@media (max-width: 1400px) {
    .alliances-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .alliances-grid { grid-template-columns: 1fr; }
    .sandbox-controls { grid-template-columns: 1fr; }
}

/* === Head-to-Head mode (new) === */

.h2h-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 16px;
}

.h2h-builder {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 18px;
}

.h2h-builder--red  { border-left: 6px solid #dc3545; }
.h2h-builder--blue { border-left: 6px solid #0066cc; }

.h2h-builder__heading {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    text-transform: uppercase;
}

.h2h-builder--red  .h2h-builder__heading { color: #dc3545; }
.h2h-builder--blue .h2h-builder__heading { color: #0066cc; }

.h2h-pick-row {
    position: relative;
    margin-bottom: 12px;
}

.h2h-pick-row label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.h2h-team-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: 5px;
    font-size: 0.95rem;
    box-sizing: border-box;
    background: var(--card-bg);
    color: var(--text-primary);
    transition: border-color 0.15s;
}

.h2h-team-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.h2h-team-input.h2h-team-input--filled {
    background: rgba(0, 102, 204, 0.04);
    font-weight: 500;
}

.h2h-suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    max-height: 240px;
    overflow-y: auto;
}

.h2h-suggestions li {
    padding: 8px 12px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.h2h-suggestions li:last-child { border-bottom: none; }

.h2h-suggestions li:hover,
.h2h-suggestions li.h2h-suggestion--active {
    background: rgba(0, 102, 204, 0.08);
}

.h2h-suggestions li.h2h-empty {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    grid-template-columns: 1fr;
    cursor: default;
}

.h2h-suggestions li.h2h-empty:hover { background: var(--card-bg); }

.h2h-suggestion__num {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-weight: 700;
    color: var(--primary-color);
}

.h2h-suggestion__div {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.h2h-builder__teams {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.h2h-team-chip {
    display: grid;
    grid-template-columns: 60px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
    background: var(--light-bg);
    border-radius: 5px;
    font-size: 0.9rem;
}

.h2h-team-chip__num {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-weight: 700;
    color: var(--primary-color);
}

.h2h-team-chip__name {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h2h-team-chip__epa {
    color: var(--success-color);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.h2h-team-chip__remove {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.h2h-team-chip__remove:hover { color: var(--danger-color); }

.h2h-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

/* Prediction panel — populated by renderH2HPrediction. */
.h2h-prediction-summary {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
}

.h2h-side-stat {
    text-align: center;
    padding: 14px 18px;
    background: var(--light-bg);
    border-radius: 8px;
}

.h2h-side-stat--red  { border-top: 3px solid #dc3545; }
.h2h-side-stat--blue { border-top: 3px solid #0066cc; }

.h2h-side-stat__label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.h2h-side-stat--red  .h2h-side-stat__label { color: #dc3545; }
.h2h-side-stat--blue .h2h-side-stat__label { color: #0066cc; }

.h2h-side-stat__prob {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

.h2h-side-stat__score {
    font-size: 1rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.h2h-vs {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.h2h-prob-bar {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: 18px;
    background: var(--border-color);
}

.h2h-prob-bar__red  { background: #dc3545; transition: width 0.3s; }
.h2h-prob-bar__blue { background: #0066cc; transition: width 0.3s; }

.h2h-detail-table {
    margin-top: 14px;
    width: 100%;
    border-collapse: collapse;
}

.h2h-detail-table th,
.h2h-detail-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    font-size: 0.9rem;
}

.h2h-detail-table th {
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.75rem;
}

.h2h-empty-state {
    color: var(--text-secondary);
    text-align: center;
    padding: 24px 8px;
}

@media (max-width: 768px) {
    .h2h-grid { grid-template-columns: 1fr; }
    .h2h-prediction-summary {
        grid-template-columns: 1fr;
    }
    .h2h-vs { display: none; }
}

/* ============================================================
   Print stylesheet — clean output for brackets, alliances, etc.
   ============================================================ */
@media print {
    nav, footer, .nav-toggle, .nav-backdrop, .nav-updated, .theme-toggle,
    .skip-link, .division-selector, .match-filters, .match-search-row,
    .team-actions-row, #navBackdrop {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
    .card, .stat-card, table, .alliance-card, .match-row {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    a { color: black !important; text-decoration: none !important; }
    a[href]::after { content: ""; }  /* don't print URLs */
    .container, main { max-width: 100% !important; padding: 0 !important; }
}

/* Bracket alliance cells — clickable, with hover affordance. The inline
   onmouseover/onmouseout that used to do this violated strict CSP. */
.bracket-alliance {
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
}
.bracket-alliance:hover { opacity: 0.85; transform: translateY(-1px); }
.bracket-alliance--upper { background: #ff9999; }
.bracket-alliance--lower { background: #99ccff; }
/* Force dark text inside the bracket cells regardless of theme — the
   pink/blue backgrounds stay light in dark mode, so light text would
   be unreadable. */
/* Force dark text on the pink/blue bracket cells regardless of theme.
   Specificity (0,1,1 via the universal selector) is enough to beat any
   descendant `.team-link` rule, so no !important needed. */
.bracket-alliance,
.bracket-alliance * { color: #1a1a1a; }

/* Visible focus ring when a bracket cell is keyboard-focused. The default
   browser outline disappears on cells with role="button" + tabindex=0 in
   most browsers, so we paint our own with the warning color (high contrast
   against both pink and blue). */
.bracket-alliance:focus-visible {
    outline: 3px solid var(--warning-color);
    outline-offset: 2px;
}

/* Bracket finals "card" container that wraps upper+lower champion cells.
   Originally a bright gold gradient that clashed badly in dark mode.
   In light: keep the warm yellow accent. In dark: use card-bg with a
   gold border so the celebratory feel stays without burning out. */
/* Bracket finals card. Light theme uses a warm gold gradient; dark theme
   falls back to card-bg + gold border so the gradient doesn't burn out
   against dark surfaces. The JS renderer doesn't set inline background or
   border on this element, so plain class specificity is sufficient. */
.bracket-finals-card {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe066 100%);
    border: 3px solid var(--warning-color);
}
:root[data-theme="dark"] .bracket-finals-card {
    background: var(--card-bg);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bracket-finals-card {
        background: var(--card-bg);
    }
}
.bracket-alliance--winner {
    border: 3px solid #000;
    font-weight: 900;
}

/* ============================================================
   Teams page search bar — was inline styles in the HTML, lifted
   here so the input/suggestion list inherit the theme correctly.
   ============================================================ */
.team-search-input {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 5px;
    box-sizing: border-box;
    background: var(--card-bg);
    color: var(--text-primary);
    transition: border-color 0.15s;
}
.team-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}
.team-search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 1000;
}

/* ============================================================
   Live tracking page (live.html) — was inline <style> in the
   page; lifted here so it's themeable and doesn't violate CSP.
   ============================================================ */
@media (max-width: 968px) {
    #splitRankings > div {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 768px) {
    .card table { font-size: 14px; }
    .card table th, .card table td { padding: 8px 4px; }
}
.top8-separator { height: 2px; background: var(--primary-color); }
.card table tbody tr:hover {
    background-color: rgba(var(--primary-rgb), 0.05);
}
.card table th { white-space: nowrap; padding: 12px 8px; }
#predictedRankingsDisplay table th:nth-child(1),
#predictedRankingsDisplay table td:nth-child(1) { width: 60px; }
#predictedRankingsDisplay table th:nth-child(2),
#predictedRankingsDisplay table td:nth-child(2) { width: 100px; }
#predictedRankingsDisplay table th:nth-child(3),
#predictedRankingsDisplay table td:nth-child(3) { width: 90px; }
#predictedRankingsDisplay table th:nth-child(4),
#predictedRankingsDisplay table td:nth-child(4) { width: 70px; }
#predictedRankingsDisplay table th:nth-child(5),
#predictedRankingsDisplay table td:nth-child(5) { width: 90px; }
#predictedRankingsDisplay table th:nth-child(6),
#predictedRankingsDisplay table td:nth-child(6) { width: 110px; }

/* Empty-state card — when a section has no data yet (pre-event, not-yet-played). */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}
.empty-state__icon {
    font-size: 3rem;
    margin-bottom: 14px;
    opacity: 0.6;
}
.empty-state__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.empty-state__hint {
    font-size: 0.9rem;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.5;
}