/* Custom styles for NFL Picks League */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1;
}

footer {
    margin-top: auto;
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 1.5rem;
}

.card-header {
    font-weight: bold;
}

/* Team-colored pick text: color is set directly by JS (see base.html) based
   on the active theme, using data-light-color/data-dark-color attributes.
   This avoids relying on CSS variable + attribute-selector cascade behavior. */
.picked-team-text {
    font-weight: 600;
    padding-left: 6px;
}

.form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.alert {
    border-radius: 0.5rem;
}

.list-group-item {
    border-left: 3px solid transparent;
}

.list-group-item:hover {
    background-color: var(--bs-tertiary-bg);  /* theme-aware; was light gray even in dark mode */
    border-left-color: #0d6efd;
}

/* Headings take the theme's text color (a fixed near-black here made every
   page title invisible in dark mode). */
h2 {
    margin-bottom: 1rem;
}

.lead {
    color: #6c757d;
}

/* Nav: one row of outlined buttons (see base.html).
   Order: Dashboard, Submit Picks, Trends, History, Profile, empty placeholder,
   Invite, Logout, theme toggle, Hello <user> (rightmost).
   The navbar is always dark (bg-dark) in both themes, so the light-outline
   buttons read correctly in light AND dark mode. */
.nav-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}
.nav-btn {
    white-space: nowrap;
}
.nav-btn-empty {
    min-width: 2.5rem;
    opacity: 0.5;
}
.nav-btn-empty:disabled {
    border-style: dashed;
}
/* Greeting: same edge as the buttons, but plainly not clickable. */
.nav-hello {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--bs-border-radius-sm, 0.25rem);
    cursor: default;
}
/* When the menu collapses on narrow screens, left-align and add breathing room. */
@media (max-width: 991.98px) {
    .nav-btn-row {
        justify-content: flex-start;
        padding: 0.5rem 0;
    }
}

/* Leaderboard icon strip: one small labeled tile per pick, P1..P5 then TB.
   The tiebreaker gets a dashed gold edge and a gap before it, so it reads
   as separate from the five picks that count. */
.pick-slot {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 2rem;
    padding: 0.1rem 0.2rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
}
.pick-slot-icon { line-height: 1.2; }
.pick-slot-label {
    font-size: 0.65rem;
    line-height: 1;
    opacity: 0.7;
}
.pick-slot-tb {
    border: 1px dashed var(--bs-warning);
    margin-left: 0.5rem;
}

/* History page: filter bar, sortable table, result pills */
.hist-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
}
.hist-filters .hist-reset { align-self: flex-end; }
.hist-by-player {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.hist-player-chip { font-size: 0.8rem; }
.hist-table th[data-sort] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.hist-table th[data-sort]:hover { color: var(--bs-primary); }
.hist-table th[data-sort]::after {
    content: attr(data-arrow);
    font-size: 0.7em;
    margin-left: 0.3em;
}
.hist-table th.sorted { color: var(--bs-primary); }
.hist-slot {
    display: inline-block;
    min-width: 2.2rem;
    text-align: center;
    font-size: 0.75rem;
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}
.hist-slot-tb {
    border-style: dashed;
    border-color: var(--bs-warning);
}
.hist-tb-row { opacity: 0.8; }
.hist-res {
    display: inline-block;
    min-width: 1.6rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
}
.hist-w { background: rgba(25, 135, 84, 0.25); color: var(--bs-success-text-emphasis); }
.hist-l { background: rgba(220, 53, 69, 0.22); color: var(--bs-danger-text-emphasis); }
.hist-p { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-weight: 400; }

/* History: checklist dropdown filters */
.hist-ms { display: flex; flex-direction: column; min-width: 10rem; }
.hist-ms-label { font-size: 0.75rem; color: var(--bs-secondary-color); }
.hist-ms-btn { min-width: 10rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-ms-btn.hist-ms-active { border-color: var(--bs-primary); }
.hist-ms-menu { min-width: 15rem; }
.hist-ms-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.35rem; font-size: 0.8rem; }
.hist-ms-list { max-height: 18rem; overflow-y: auto; }
.hist-ms-item { cursor: pointer; padding: 0.2rem 0.5rem; border-radius: 0.25rem; }

/* Splash page title block */
.splash-title { margin-bottom: 0.75rem; line-height: 1.1; }
.splash-title span { display: block; }
.splash-est { font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: 0.25rem; }
.splash-name { font-size: clamp(1.7rem, 5.2vw, 2.7rem); font-weight: 700; margin-top: 0.25rem; }
.splash-league { font-size: clamp(1.35rem, 4vw, 2.1rem); font-weight: 300; }
.splash-deadline { color: #ff3b30; }
.splash-freeze { color: #3d8bfd; }
/* Season Standings and Weekly Winner points: same four column widths, so the
   two tables line up (Record over Wins, 6th % over Runner-up, Win % over Total Points). */
.standings-cols { table-layout: fixed; }
.standings-cols th:nth-child(1) { width: 40%; }
.standings-cols th:nth-child(n+2) { width: 20%; }
/* Phones (fix 40): tighter cells and no wrapping, so W-L, 6th, Win %, Titles, Silvers, Pts each stay on one line */
@media (max-width: 575.98px) {
    .standings-cols th, .standings-cols td { padding: .45rem .3rem; white-space: nowrap; }
    .standings-cols th:nth-child(1) { width: 34%; }
    .standings-cols th:nth-child(n+2) { width: 22%; }
    .standings-cols td:first-child { overflow: hidden; text-overflow: ellipsis; }
}
.splash-version { font-size: 0.8rem; color: var(--bs-secondary-color); }
.splash-version-built { font-size: 0.7rem; opacity: 0.8; }
.splash-heritage { font-size: clamp(.675rem, 2.77vw, .85rem); font-style: italic; font-weight: 300; color: var(--bs-secondary-color); margin-bottom: 0; }
.splash-taglines { min-height: 3.2rem; display: flex; align-items: center; justify-content: center; transition: opacity 0.45s ease; }
.splash-taglines.is-fading { opacity: 0; }

/* ===== 5-0 weeks: gold, everywhere they appear ===== */
:root { --kk-gold: #d4a017; --kk-gold-bg: rgba(212, 160, 23, 0.16); }
.splash-stat { color: var(--kk-gold); font-weight: 600; }
/* Leaderboard: all five main picks gold-filled on a 5-0 */
.pick-slot-gold { background: var(--kk-gold); border-color: var(--kk-gold); }
.pick-slot-gold .pick-slot-label { color: #1a1a1a; opacity: 1; font-weight: 700; }
.badge-five-oh { background: var(--kk-gold); color: #1a1a1a; font-weight: 800; }
/* History */
.hist-five-oh td { font-weight: 700; }
.hist-five-oh { box-shadow: inset 4px 0 0 var(--kk-gold); background: var(--kk-gold-bg); }
.hist-five-oh > td { background: transparent; }
.hist-rec { font-size: 0.75rem; color: var(--bs-secondary-color); white-space: nowrap; }
.hist-rec-50 { color: var(--kk-gold); font-weight: 800; }
.five-oh-name { color: var(--kk-gold); font-weight: 700; }
/* Dashboard: last week's congratulations card */

/* ===== Phones (under 576px wide) ===== */
.bygame-consensus-head { min-width: 220px; }
@media (max-width: 575.98px) {
    /* By-Game: game name on its own line, then "picked" and the consensus bar */
    .bygame-table thead { display: none; }
    .bygame-table tbody tr {
        display: grid;
        grid-template-columns: 3.5rem 1fr;
        align-items: center;
        border-bottom: 1px solid var(--bs-border-color);
        padding: 0.35rem 0;
    }
    .bygame-table tbody td { padding: 0.15rem 0.25rem; }
    .bygame-table tbody td:first-child { grid-column: 1 / -1; }
    .bygame-consensus-head { min-width: 0; }
}
/* History on phones: each row is a compact two-column card */
.hist-compact thead { display: none; }
.hist-compact td { padding: 0.45rem 0.35rem; }
.hc { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.hc-main { min-width: 0; }
.hc-meta { font-size: 0.8rem; color: var(--bs-secondary-color); }
.hc-team { font-weight: 600; }
.hc-side { text-align: right; flex-shrink: 0; }
.hist-compact .hist-five-oh td { font-weight: 400; }
.hist-compact .hist-five-oh .hc-team { font-weight: 800; }

/* Game results: who covered (Weekly Submissions headers, Trends by Game) */
.result-chip { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.result-cover { background: rgba(25, 135, 84, 0.22); color: var(--bs-success-text-emphasis); }
.result-push { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }

/* The team that covered, shown in its own color (set by base.html's script) */
.team-color-text { font-weight: 800; }

/* Chat (fix 38) */
.chat-alert {
    display: inline-block;
    margin-left: 0.35rem;
    min-width: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.1rem;
    text-align: center;
}
.chat-alert-toggler {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    margin-left: 0;
}
.chat-thread {
    max-height: 60vh;
    overflow-y: auto;
}
.chat-msg {
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.4rem;
    border-radius: 0.5rem;
    border-left: 3px solid transparent;
}
.chat-msg-mine {
    background: rgba(13, 110, 253, 0.10);
    border-left-color: rgba(13, 110, 253, 0.6);
}
.chat-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.chat-action {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    vertical-align: baseline;
}
.chat-action:hover { color: var(--bs-link-color); }
.chat-action-danger:hover { color: #dc3545; }
.chat-edited { cursor: help; }

/* Leaderboard (fix 44): a submitted pick that isn't public yet -- a dim lock, no team */
.pick-slot-hidden { opacity: .55; border: 1px solid var(--bs-border-color); }
.pick-slot-hidden.pick-slot-tb { border-style: dashed; border-color: var(--bs-warning); }

/* Weekly Submissions (fix 45): narrow columns */
.wk-table th, .wk-table td { padding: .35rem .4rem; }
.wk-dayband th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color);
                 border-bottom: 1px solid var(--bs-border-color); text-align: center; font-weight: 600; }
.wk-match { font-weight: 700; line-height: 1.2; white-space: nowrap; }
.wk-sub { font-weight: 400; font-size: .8rem; color: var(--bs-secondary-color); white-space: nowrap; }
.wk-pt { display: inline-block; font-size: .65rem; font-weight: 700; padding: 0 .3rem; border-radius: 4px;
         background: var(--bs-secondary-bg); margin: 1px 0; }
/* The pick deadline, in each viewer's timezone */
.kk-deadline { color: var(--bs-danger); font-weight: 700; }

/* Your Picks (fix 46): P# on each row; compact rows on phones */
.yp-slot { display: inline-block; min-width: 2.2rem; text-align: center; font-size: .75rem; font-weight: 700;
           padding: .15rem .3rem; border-radius: .375rem; border: 1px solid var(--bs-border-color);
           color: var(--bs-secondary-color); margin-right: .6rem; }
.yp-slot-6 { border: 1px dashed var(--bs-warning); color: var(--bs-warning); }
.yp-row { display: flex; align-items: center; gap: .3rem; }
.yp-main { flex: 1; min-width: 0; }
.yp-time { font-size: .8rem; color: var(--bs-secondary-color); white-space: nowrap; }
.yp-status { width: 1.4rem; text-align: center; }

/* Trends tables (fix 47): codes, compact rows, fuller pills */
.trend-team-table th, .trend-team-table td { padding: .3rem .25rem; }
.trend-pill { display: block; width: 100%; min-width: 2.6rem; padding: .45em .3em; font-size: .8rem; }
.trend-pill-overall { font-size: .85rem; font-weight: 800; }
.yp-pick { padding-left: .4rem; }
@media (max-width: 575.98px) {
    .bygame-table tbody td.bygame-hidden { display: none; }
}
@media (max-width: 575.98px) {
    .trend-team-table th, .trend-team-table td { padding: .25rem .08rem; }
    .trend-team-table th { font-size: .8rem; }
    .trend-pill { min-width: 0; padding: .4em .1em; font-size: .68rem; }
    .trend-pill-overall { font-size: .72rem; }
}
.wk-pt-slot { height: 1.15rem; line-height: 1.15rem; }
.wk-match-1 { font-size: .78rem; letter-spacing: -.01em; }
.wk-6th { font-size: .62rem; vertical-align: middle; }
.wk-you { font-size: .62rem; vertical-align: middle; }

/* Splash (draft 49): "est. 2018" on the league-name line, in the same light face */
.splash-title .splash-est-inline { display: inline; font-size: 1em; font-weight: inherit; font-style: normal; color: inherit; white-space: nowrap; }   /* fix 54: same font as "NFL Pick 'Ems League" */
/* Splash: how it works */
.how-steps { list-style: none; padding: 0; text-align: left; }
.how-steps li { display: flex; align-items: baseline; gap: .6rem; padding: .15rem 0; }
.how-num { flex: 0 0 auto; min-width: 2.6rem; text-align: center; font-weight: 800; font-size: .8rem; padding: .1rem .35rem;
           border-radius: .375rem; border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); }
.how-head { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); margin-top: .6rem; }
.how-tag { display: inline-block; font-weight: 800; font-size: .8rem; line-height: 1.2; padding: .05rem .35rem; border-radius: .375rem; margin: 0 .1rem; }
.how-tag.six { border: 1px dashed var(--bs-warning); color: var(--bs-warning); }
.how-tag.ou { border: 1px solid #495057; color: #495057; }   /* fix 57: dark grey in light mode */
[data-bs-theme="dark"] .how-tag.ou { border-color: #c0c7cf; color: #c0c7cf; }   /* silver in dark mode */

/* Primetime Games (fix 49): the team that didn't cover, once final */
.pt-lost { opacity: .4; filter: grayscale(1); }

@media (max-width: 575.98px) {
    .splash-heritage { font-size: 2.77vw; white-space: nowrap; }              /* Eddie Gorman line on one line */
}

/* fix 51: league vs. Vegas under "Can you beat Vegas?"; Trends by Team dot rows; leaderboard O/U */
.vegas-score { font-size: .95rem; color: var(--bs-secondary-color); margin-top: .25rem; }
.trend-empty { color: var(--bs-secondary-color); opacity: .5; }
.lb-ou { align-self: center; margin-left: .35rem; font-size: .8rem; color: var(--bs-secondary-color); white-space: nowrap; }

/* fix 52: Trends by Game team pills and bars; Primetime rows for your own picks */
.tg-pill { display: inline-block; padding: 0 .4rem; border: 2px solid; border-radius: 5px; font-weight: 700; font-size: .85rem; line-height: 1.35; }
.tg-lost { opacity: .35; }
.tg-bar { background: var(--c-light); }
.tg-bar-split { border-left: 2px solid var(--bs-body-bg); }
[data-bs-theme="dark"] .tg-bar { background: var(--c-dark); }
.pt-mine { background: rgba(13, 110, 253, .16) !important; }
.pt-mine-6th { background: rgba(13, 110, 253, .07) !important; }
[data-bs-theme="dark"] .pt-mine { background: rgba(255, 255, 255, .13) !important; }
[data-bs-theme="dark"] .pt-mine-6th { background: rgba(255, 255, 255, .055) !important; }

/* fix 55: leaderboard hourglasses -- dim before kickoff, a touch brighter while the game is on */
.pick-slot-upcoming .pick-slot-icon { opacity: .4; }
.pick-slot-live .pick-slot-icon { opacity: 1; filter: brightness(1.25) saturate(1.2); }

/* fix 56: folding dashboard cards (all screen sizes) */
.kk-foldable { cursor: pointer; user-select: none; }
.kk-chev { display: inline-block; width: 1.1em; }
.card.kk-folded > :not(.card-header) { display: none !important; }
.card.kk-folded > .card-header { border-bottom: 0; border-radius: var(--bs-card-inner-border-radius); }
.card.kk-folded { height: auto !important; }   /* cards with h-100 shrink to their header */

/* fix 57: rules card items indented under their headings; gold Season Standings header; Vegas chart */
.how-steps li:not(.how-head) { padding-left: 1.1rem; }
.card-header.kk-gold { background: #c9a227; color: #1b1f24; }
.vegas-chart { color: var(--bs-secondary-color); }
.vegas-chart svg { display: block; }

/* fix 58: silver O/U slot tag (matches the front page's rules card) */
.yp-slot-ou { border: 1px solid #495057; color: #495057; }
[data-bs-theme="dark"] .yp-slot-ou { border-color: #c0c7cf; color: #c0c7cf; }
.hist-slot-ou { border: 1px solid #495057 !important; color: #495057 !important; background: transparent !important; }
[data-bs-theme="dark"] .hist-slot-ou { border-color: #c0c7cf !important; color: #c0c7cf !important; }
.lb-ou-tag { min-width: 0; padding: 0 .3rem; font-size: .7rem; margin-right: .2rem; }
.card-header.kk-slate { background: #2b4560; color: #fff; }   /* fix 58: The Board and both Trends cards */

/* fix 58: banner -- league pages on row 1; status chip, About, Invite, Logout, theme on row 2 */
.nav-stack { display: flex; flex-direction: column; }
.nav-status { display: inline-block; font-size: .8rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: #e9ecef; white-space: nowrap; }
.nav-status-ok { border-color: #22c55e; color: #86efac; }
.nav-status-warn { border-color: #ef4444; color: #fca5a5; }
.nav-status-live { border-color: #f59e0b; color: #fcd34d; }

/* fix 59: phone menu = one 3x3 grid (Dashboard, Submit Picks, The Board / History, Chat, About /
   Logout, theme, Invite); the status chip lives by your name instead, so it's hidden inside the menu. */
@media (max-width: 991.98px) {
    .nav-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: .5rem; }
    .nav-stack .nav-btn-row, .nav-stack .nav-invite { display: contents !important; }   /* beats d-inline-flex */
    .nav-stack .nav-status { display: none; }
    .nav-stack .nav-btn, .nav-stack .nav-invite > * { width: 100%; text-align: center; }
    .nav-stack .nav-invite > * { order: 99; }
    .nav-stack .nav-invite .btn { width: 100%; }
}

/* fix 60.2: desktop rules card at half width -- a little less side padding, each line on one line */
@media (min-width: 768px) {
    .how-rules { padding-left: .5rem; padding-right: .5rem; }
    .how-rules .how-steps li { white-space: nowrap; }
}

/* fix 61: Winner / Silver on the leaderboard; arrows in its header; The Board's Leaderboard tab width */
.lb-award { font-weight: 700; }
.lb-win { background: #c9a227; color: #1a1a1a; }
.lb-silver { background: #c0c7cf; color: #1a1a1a; }
.kk-lb-arrows .btn { padding: .1rem .5rem; line-height: 1.2; }
.lb-board { max-width: 40rem; }
/* fix 61: Weekly Title Points -- a gold chip for each week won */
.tp-weeks { display: inline-flex; flex-wrap: wrap; gap: .2rem; margin-left: .4rem; vertical-align: middle; }
.tp-wk { display: inline-block; min-width: 1.35rem; padding: 0 .3rem; border-radius: .35rem; background: #c9a227; color: #1a1a1a;
         font-size: .72rem; font-weight: 700; line-height: 1.15rem; text-align: center; }
@media (max-width: 575.98px) {
    .tp-weeks { display: flex; margin: .15rem 0 0; }   /* phones: chips on a line under the name */
}
.card-header.kk-silver { background: #c0c7cf; color: #1b1f24; }   /* fix 61: Weekly Title Points card */
/* fix 62: desktop -- the name (Profile) button by the logo at 1.5x */
@media (min-width: 992px) {
    .navbar .nav-me-wrap .nav-me { font-size: 1.3125rem; padding: .375rem .75rem; border-radius: .45rem; }
}
@media (min-width: 1200px) {   /* fix 94: 15% larger where there's room */
    .navbar .nav-me-wrap .nav-me { font-size: 1.51rem; padding: .43rem .86rem; border-radius: .52rem; }
}
/* fix 62: Trends by Team -- a team's code green once it covered, red once it didn't (pushes are losses) */
.tt-cov { color: #198754; }
.tt-miss { color: #dc3545; }
[data-bs-theme="dark"] .tt-cov { color: #4ade80; }
[data-bs-theme="dark"] .tt-miss { color: #f87171; }
/* fix 63: Submit Picks -- rules-card lines at the top, no extra indent */
.submit-how li:not(.how-head) { padding-left: 0; }
.submit-how { font-size: 1.1rem; }

@media (max-width: 575.98px) { .submit-how { font-size: .92rem; } .submit-how li:last-child { white-space: nowrap; } }   /* line 1 wraps naturally on phones */
/* fix 65: History > Stats */
.st-table { width: auto; min-width: 100%; }
.st-table.st-narrow { min-width: 0; }
.st-table td:first-child { font-weight: 600; white-space: nowrap; }
.st-table td.st-best { --bs-table-bg-type: rgba(201, 162, 39, .28); font-weight: 700; }
.st-best-key { background: rgba(201, 162, 39, .28); font-weight: 700; }
.st-best-key { padding: 0 .3rem; border-radius: .25rem; }
.st-league td { border-top: 2px solid var(--bs-border-color); font-weight: 700; }
.st-me td:first-child::after { content: " (you)"; font-weight: 400; color: var(--bs-secondary-color); font-size: .85em; }
.st-award-t { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); font-weight: 700; }
.st-award-who { font-weight: 700; }
.st-small { color: var(--bs-secondary-color); font-style: italic; }   /* fix 65: newer Members, small samples */
/* fix 66: The Board -- the week dropdown, a little bolder */
.bd-week-select { width: auto; font-weight: 700; border-color: var(--bs-primary); }
/* fix 66: History > By Team */
.bt-table { width: auto; }
.bt-table td, .bt-table th { white-space: nowrap; padding: .2rem .45rem; }
.bt-table td.bt-cell { --bs-table-bg-type: transparent; font-variant-numeric: tabular-nums; }
/* fix 67: chat flair pills -- one team color fills, the other letters; set per light/dark mode */
.flair-pill { display: inline-block; margin-left: .3rem; padding: 0 .35rem; border-radius: 999px; font-size: .68rem; font-weight: 800;
    letter-spacing: .03em; line-height: 1.25rem; vertical-align: .1em; min-width: 2.1rem; text-align: center;
    background: var(--fl-lbg); color: var(--fl-lfg); border: 1px solid var(--fl-lfg); }
[data-bs-theme="dark"] .flair-pill { background: var(--fl-dbg); color: var(--fl-dfg); border-color: var(--fl-dfg); }
/* fix 67: your flair in the banner -- after your name (laptops), after the status chip (phones). The navbar is
   always dark, so the pills use their dark-mode colors there in both themes. */
.navbar .flair-pill, [data-bs-theme="dark"] .navbar .flair-pill { background: var(--fl-bbg); color: var(--fl-bfg); border-color: var(--fl-bbd); }
.nav-flair { display: inline-flex; align-items: center; white-space: nowrap; }
.nav-flair .flair-pill:first-child { margin-left: .4rem; }
@media (min-width: 992px) { .nav-me-wrap .nav-flair .flair-pill { margin-left: .35rem; } .nav-me-wrap .nav-flair .flair-pill:first-child { margin-left: .46rem; } }
@media (max-width: 991.98px) {   /* phones: compact pills at the top right, on the logo row */
    .navbar > .container { flex-wrap: wrap; }
}

@media (min-width: 992px) {      /* laptops: pills sized to sit beside the 1.5x name button */
    .navbar .nav-flair .flair-pill { font-size: .85rem; line-height: 1.7rem; padding: 0 .55rem; min-width: 2.8rem; }
}
@media (min-width: 1200px) {   /* fix 94: 15% larger where there's room */
    .navbar .nav-flair .flair-pill { font-size: .98rem; line-height: 1.96rem; padding: 0 .63rem; min-width: 3.22rem; }
}
/* fix 67: flair picker slots */
.flair-slot { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.flair-slot-n { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 50%; text-align: center; line-height: 1.4rem;
    font-size: .75rem; font-weight: 700; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.flair-slot-body { flex: 1 1 auto; }
/* fix 67: the phone status chip says "Week N · locks Fri 5 PM" on small phones so it stays on screen */
.st-short { display: none; }
@media (max-width: 380px) { .st-long { display: none; } .st-short { display: inline; } }
/* fix 67: Weekly Title Points -- flair pills after the name; on phones the name column gets more room */
.tp-table .flair-pill { margin-left: .25rem; font-size: .62rem; line-height: 1.1rem; min-width: 0; padding: 0 .3rem; }
@media (max-width: 575.98px) {
    .tp-table th:nth-child(1) { width: 55%; }
    .tp-table th:nth-child(2), .tp-table th:nth-child(4) { width: 13%; }
    .tp-table th:nth-child(3) { width: 19%; }
    .tp-table th:nth-child(n+2), .tp-table td:nth-child(n+2) { text-align: center; padding-left: 0; padding-right: 0; }
    .tp-table th { font-size: .85rem; }
    .tp-table td:first-child { white-space: normal; }
}

/* fix 69: phones -- tappable status chip, tab bar along the bottom, "More" sheet */
.nav-chip-link { display: block; text-align: center; text-decoration: none; font-size: .9rem; padding: .3rem .6rem; }
.tabbar { transition: transform .25s ease; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; background: #1b1e22; border-top: 1px solid rgba(255,255,255,.12);
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); }
.tabbar a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .1rem; color: #adb5bd; text-decoration: none; font-size: .68rem; position: relative; }
.tabbar a.on { color: #fff; }
.tabbar a.on svg { color: #6ea8fe; }
.tab-alert { position: absolute; top: -2px; left: 56%; background: #dc3545; color: #fff; font-style: normal; font-weight: 800; font-size: .65rem;
    border-radius: 999px; padding: 0 .3rem; line-height: 1rem; }
@media (max-width: 991.98px) { body.has-tabbar { padding-bottom: 4.5rem; } }
.more-sheet { height: auto !important; border-radius: 1rem 1rem 0 0; }
.more-item { display: block; width: 100%; text-align: left; padding: .8rem 1rem; border: 0; border-bottom: 1px solid var(--bs-border-color);
    background: none; color: var(--bs-body-color); text-decoration: none; font-size: 1.05rem; }
/* fix 70: iPhone -- the tab bar stays attached to the bottom edge. viewport-fit=cover (base.html) lets it reach under the
   home-swipe area, and a strip of the same color below it fills any gap Safari opens while its own toolbar slides or
   the page bounces, so the bar never looks like it's floating with page content showing beneath it. */
.tabbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 120px; background: #1b1e22; }

body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }   /* fix 70: sideways iPhone -- keep pages clear of the notch */
/* fix 70: phones -- your name bar under the logo (name about 1.3x, pills, arrow); opens your Profile */
.me-row { display: flex; align-items: center; width: 100%; margin-top: .35rem; padding: .4rem .75rem; border-radius: .6rem; text-decoration: none; color: #fff;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); min-width: 0; }
.me-row:hover, .me-row:focus, .me-row.on { color: #fff; background: rgba(255,255,255,.13); }
.me-row .me-name { font-size: 1.3rem; font-weight: 700; margin-right: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.me-row .flair-pill { font-size: .8rem; line-height: 1.5rem; min-width: 0; padding: 0 .5rem; margin-left: .35rem; }
.me-row .me-arrow { margin-left: auto; padding-left: .5rem; font-size: 1.5rem; color: #adb5bd; line-height: 1; }
/* fix 71: phones -- the tab bar slides off the bottom while you scroll down, or when you tap empty space on the Dashboard */
.tabbar.tabbar-away { transform: translateY(calc(100% + 2px)); }
/* fix 71: phones -- the Light/Dark mode switch in the tab bar (Chat moved into More, with its red "!" there and on More) */
.tabbar .tab-theme { flex: 1 1 0; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: #adb5bd; padding: 0; }
.tabbar .tab-theme:active { color: #fff; }
.more-alert { background: #dc3545; color: #fff; font-style: normal; font-weight: 800; font-size: .7rem; border-radius: 999px; padding: 0 .35rem; margin-left: .3rem; }
/* fix 72: phones -- the tab bar 1.5x bigger (icons, words, bar). On narrow phones (under 380px wide) the words are 1.25x
   so they don't run together; the icons stay 1.5x. */
@media (max-width: 991.98px) {
    .tabbar { padding-top: .5rem; padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); }
    .tabbar svg { width: 33px; height: 33px; }
    .tabbar .tab-theme svg { width: 39px; height: 39px; }
    .tabbar a { font-size: 1.02rem; gap: .15rem; }
    .tabbar a span { white-space: nowrap; }
    .tab-alert { font-size: .85rem; line-height: 1.3rem; padding: 0 .4rem; }
    body.has-tabbar { padding-bottom: 6.5rem; }
}
@media (max-width: 379.98px) { .tabbar a { font-size: .85rem; } }

/* fix 73: front page -- three gold facts at a time on phones; the big title is the link; logged in, rules after the logged-in card.
   Phones -- ☀️/🌙 at the right end of your name bar. */
@media (max-width: 767.98px) {
    .splash-taglines { flex-direction: column; align-items: stretch; text-align: center; }
    .splash-taglines .splash-stat + .splash-stat { border-top: 1px solid var(--bs-border-color); margin-top: .6rem; padding-top: .6rem; }
}
.splash-home { color: inherit; text-decoration: none; display: block; }
.splash-home:hover .splash-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.splash-home .splash-name { font-size: clamp(1.4rem, 6.1vw, 2.9rem); font-weight: 800; color: var(--bs-emphasis-color); white-space: nowrap; }

.me-wrap { position: relative; width: 100%; }
.me-wrap .me-row { padding-right: .75rem; }   /* fix 89: no Light/Dark button beside it any more (was 3.6rem) */
.me-wrap .me-row .me-arrow { margin-left: auto; }
.me-theme { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); background: none; border: 0; border-left: 1px solid rgba(255,255,255,.18);
    font-size: 1.45rem; line-height: 1; padding: .3rem .35rem .3rem .65rem; }
.rules-after > .row { margin-top: 1rem !important; }
/* fix 74: laptops -- the banner's menu buttons and week chip at 1.25x. Phones -- Invite greyed out in More for everyone
   but the site admin. The Dashboard's first row of cards sits closer to the banner now that its heading is gone. */
/* Sized by screen width so the banner keeps two rows: 1.25x from 1400px up, 1.1x from 1200px, normal below that. Under 1400px
   the chip uses its short wording ("2026 · Wk 5 · locks Fri 5 PM"). */
.chip-short { display: none; }
@media (min-width: 992px) and (max-width: 1399.98px) { .chip-long { display: none; } .chip-short { display: inline; } }
@media (min-width: 1200px) {
    .navbar .nav-btn-row .nav-btn { font-size: .95rem; padding: .28rem .55rem; }
    .navbar .nav-status { font-size: .9rem; padding: .22rem .6rem; }
}
@media (min-width: 1400px) {
    .navbar .nav-btn-row { gap: .45rem; }
    .navbar .nav-btn-row .nav-btn { font-size: 1.09rem; padding: .3rem .62rem; border-radius: .4rem; }
    .navbar .nav-status { font-size: 1rem; padding: .25rem .7rem; }
}
.more-item.more-off { opacity: .45; cursor: default; }
.more-item.more-off .small { margin-left: .4rem; }
body[data-page="dashboard"] .container.mt-4 > .row.mt-4:first-child { margin-top: 0 !important; }
/* fix 75: front page on phones, logged in -- one card with labeled sections (rules, deadlines, Vegas, push rule) */
.fp-k { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); margin-bottom: .15rem; }
.fp-sec { padding: .5rem 0; border-bottom: 1px solid var(--bs-border-color); }
.fp-sec:first-child { padding-top: 0; }
.fp-vegas div:last-child { color: var(--bs-secondary-color); }
.fp-foot { padding-top: .6rem; text-align: center; }
/* fix 76: Dashboard League vs. Vegas -- phone strip (bronze edge) and laptop card (bronze header, chart edge to edge) */
.dv-strip { border-left: 4px solid #a67c2e; }
.dv-head { background: #6c4f1d; color: #fff; }
.dv-lead { font-size: .9rem; font-weight: 600; opacity: .9; }
.dv-k { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); }
.dv-swing { font-size: 1.35rem; font-weight: 800; }
.dv-up-t { color: #198754; } .dv-down-t { color: #dc3545; }
[data-bs-theme="dark"] .dv-up-t { color: #3fb37f; } [data-bs-theme="dark"] .dv-down-t { color: #e35d6a; }
.dv-chart svg { width: 100%; height: auto; display: block; }
.dv-chart svg text { font-size: 11px; }
.dv-chart svg { overflow: visible; }
/* fix 77: Your Picks -- one Tiebreakers section (6th, then the O/U with an MNF tag) and a one-row footer (stamp + small button) */
.yp-sub { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); margin: .6rem 0 .25rem; }
.yp-mnf { display: inline-block; font-size: .65rem; font-weight: 800; letter-spacing: .04em; padding: 0 .35rem; border-radius: .3rem; vertical-align: .1em;
    background: #343a40; color: #fff; }
[data-bs-theme="dark"] .yp-mnf { background: #c0c7cf; color: #1b1f24; }
.yp-row .yp-main .yp-mnf { margin-left: .15rem; }
.yp-ou-main { white-space: nowrap; }
.yp-tb-top > :last-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.yp-tb-bot > :first-child { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.yp-foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-top: .6rem; border-top: 1px solid var(--bs-border-color); }
.yp-foot p { font-size: .8rem; }
@media (min-width: 380px) { .yp-foot p { white-space: nowrap; } }
.yp-foot .btn { white-space: nowrap; flex: 0 0 auto; }
/* fix 77: phone League vs. Vegas strip */
.dv-sub { font-size: .75rem; white-space: nowrap; }
.dv-strip .dv-swing { line-height: 1.05; }
.dv-indent { padding-left: .85rem; margin-top: .1rem; }
.dv-hook { margin-left: -.85rem; display: inline-block; width: .85rem; opacity: .7; }
.dv-rec2 { font-size: .85rem; opacity: .85; line-height: 1.1; }
.dv-right { padding-left: .5rem; }
/* fix 78: phones -- League vs. Vegas inside the Leaderboard card; laptops -- "since 2018" beside the card title; front page -- Bavarian blue header */
.dv-in-lb { margin: 0 1rem; padding: .6rem 0 .75rem; border-top: 2px solid #a67c2e; }
.dv-in-lb.dv-away { display: none !important; }
.dv-in-lb .dv-indent { white-space: nowrap; }
@media (max-width: 379.98px) { .dv-in-lb .dv-indent { font-size: .78rem; } }
@media (max-width: 339.98px) { .dv-in-lb .dv-indent { white-space: normal; } }
.dv-since { font-size: .72em; opacity: .8; }
.dv-hsince { font-size: .62em; font-weight: 400; opacity: .8; margin-left: .2rem; }
.fp-vegas .dv-head { background: #0098d4; color: #fff; }
/* fix 79: Trends by Game -- the side that covered stays bold, the side that didn't fades (a push fades both) */
.tg-bar.tg-dim { opacity: .28; }
.tg-lab-win { font-weight: 700; color: var(--bs-body-color); }
.tg-lab-lose { opacity: .6; }
/* fix 79: Trends by Team -- a team that didn't cover, its pills fade */
.tt-row-lost .trend-pill { opacity: .28; }
/* fix 79: The Board -- kickoff windows (dashed line + time band), compact rows, narrow game columns */
.wk-table thead .wk-cut, .wk-table tbody .wk-cut { border-left: 1px dashed rgba(148,163,184,.55); }
.wk-timeband th { font-size: .68rem; font-weight: 600; color: var(--bs-secondary-color); text-align: left; padding-top: .15rem !important; padding-bottom: 0 !important; white-space: nowrap; }
.wk-compact tbody td { padding-top: .12rem !important; padding-bottom: .12rem !important; line-height: 1.15; }
.wk-compact tbody td strong { font-size: .88rem; }
.wk-compact tbody td .small[style*="position: absolute"] { font-size: .62rem; bottom: 0 !important; right: 4px !important; }
.wk-compact tbody td.text-muted.small { font-size: .7rem; }
.wk-compact tbody td[style*="border-radius"] { border-radius: 6px !important; }
.wk-compact .wk-6th { font-size: .6rem; padding: .1rem .3rem; }
.wk-compact tbody tr + tr td { border-top: 2px solid transparent; }
.wk-final .team-color-text { font-weight: 800; }
.wk-lost { opacity: .45; }
.wk-score { font-weight: 600; color: var(--bs-body-color); opacity: .85; }
.wk-push { font-size: .65rem; text-transform: uppercase; opacity: .7; }

/* ===== fix 81: User-Team Summaries -- tap a year header to sort by it ===== */
.bt-table .bt-sort { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer;
    text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--bs-secondary-color); }
.bt-table .bt-sort.on { color: var(--bs-primary); text-decoration: none; }
.bt-table .bt-arrow { font-size: .65em; margin-left: 2px; vertical-align: 1px; }
.bt-table td.bt-col { box-shadow: inset 2px 0 0 var(--bs-primary), inset -2px 0 0 var(--bs-primary); }
/* fix 81: narrow Submitted column */
.wk-subcol { font-size: .72rem !important; padding-left: .3rem !important; padding-right: .3rem !important; }
/* fix 81: MNF O/U "off by" */
.yp-off { flex: none; font-size: .72rem; font-weight: 700; padding: .1rem .4rem; border-radius: 999px; white-space: nowrap;
    border: 1px solid #495057; color: #495057; }
[data-bs-theme="dark"] .yp-off { border-color: #c0c7cf; color: #c0c7cf; }
.yp-off-exact { background: var(--bs-success); border-color: var(--bs-success); color: #fff !important; }
.yp-off-badge { background: transparent; border: 1px solid #495057; color: #495057; }
[data-bs-theme="dark"] .yp-off-badge { border-color: #c0c7cf; color: #c0c7cf; }

/* ===== fix 82.2: History tabs on one row on phones; Your Picks pick + line never wraps ===== */
@media (max-width: 575.98px) {
    .hist-tabs { flex-wrap: nowrap; }
    .hist-tabs .nav-link { padding-left: .7rem; padding-right: .7rem; white-space: nowrap; }
}
.yp-row .yp-pick { white-space: nowrap; }
@media (max-width: 374.98px) { .yp-row .yp-time { font-size: .72rem; } }
/* fix 82.2: the O/U row may break before the score "(30-35)" on narrow phones, so it never runs under the "off N" pill */
.yp-ou-main { white-space: normal; }

/* ===== fix 83: History > Head-to-Head tab ===== */
:root { --h2h-up: rgba(34,197,94,.75); --h2h-down: rgba(239,68,68,.7); --h2h-even: rgba(148,163,184,.7); }
.h2h-table { width: auto; font-variant-numeric: tabular-nums; }
.h2h-table td, .h2h-table th { white-space: nowrap; padding: .22rem .4rem; }
.h2h-table .h2h-bar { width: 90px; padding-left: .15rem; padding-right: .15rem; }
.h2h-track { position: relative; height: 10px; border-radius: 5px; background: var(--bs-tertiary-bg); overflow: hidden; }
.h2h-track span { position: absolute; top: 0; bottom: 0; }
.h2h-a .h2h-track span { right: 0; } .h2h-b .h2h-track span { left: 0; }
.h2h-track i { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--bs-body-color); opacity: .35; }
.h2h-team { min-width: 3rem; }
.h2h-gap { color: var(--bs-secondary-color); }
.h2h-name { font-weight: 700; }
@media (max-width: 575.98px) { .h2h-table .h2h-bar { width: 44px; } .h2h-gap { display: none; } .h2h-table td, .h2h-table th { padding: .2rem .25rem; } }
.h2h-h { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; color: var(--bs-secondary-color); }
.h2h-sixth td { border-top: 1px dashed var(--bs-border-color); }
.h2h-card > .card-header { padding: .5rem .85rem; }
.h2h-card > .card-header h5 { font-size: 1.05rem; }
.h2h-card > .card-body { padding: .4rem .5rem; }
.h2h-card .h2h-table { margin: 0 auto 0 0; }
.h2h-card .h2h-table tr:last-child td { border-bottom: 0; }
@media (min-width: 992px) {   /* laptops: the two cards side by side, each as wide as its table */
  .h2h-cards { display: flex; gap: 1rem; align-items: flex-start; }
  .h2h-cards > .h2h-card { flex: 0 0 auto; max-width: 100%; margin-bottom: .5rem !important; }
}
@media (min-width: 992px) and (max-width: 1399.98px) { .h2h-cards .h2h-bar { width: 66px; } .h2h-cards > .h2h-card { flex: 0 1 auto; min-width: 0; } }
@media (min-width: 992px) { .h2h-cards > .h2h-card:last-child { order: -1; } }   /* laptops: By Team left, By Pick Slot right */
/* fix 83: Head-to-Head scoreboard */
.h2h-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; max-width: 560px;
    border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .6rem .8rem; background: var(--bs-tertiary-bg); }
.h2h-side { min-width: 0; }
.h2h-l { text-align: left; } .h2h-r { text-align: right; }
.h2h-who { font-weight: 800; font-size: 1.1rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-fl { min-height: 1.15rem; margin: .1rem 0 .2rem; }
.h2h-fl .flair-pill { margin: 0 .12rem 0 0; vertical-align: middle; }
.h2h-r .h2h-fl .flair-pill { margin: 0 0 0 .12rem; }
.h2h-big { font-size: 1.55rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.h2h-pct { font-size: .9rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.h2h-lead .h2h-big { color: var(--bs-success); }
.h2h-n { font-size: .8rem; color: var(--bs-secondary-color); margin-top: .15rem; }
.h2h-n b { color: var(--bs-body-color); }
.h2h-vs { text-align: center; color: var(--bs-secondary-color); font-weight: 700; display: flex; flex-direction: column; align-items: center; }
.h2h-vs span { font-size: .95rem; }
.h2h-vs small { font-weight: 500; font-size: .72rem; white-space: nowrap; }
@media (max-width: 374.98px) { .h2h-big { font-size: 1.35rem; } .h2h-score { padding: .55rem .6rem; } }
.h2h-line .flair-pill { vertical-align: .1em; }
/* fix 83: the Record Book's download button, two lines */
.rb-dl { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; padding-top: .3rem; padding-bottom: .3rem; }
.rb-dl-1 { font-weight: 600; }
.rb-dl-2 { font-size: .72rem; opacity: .8; }
/* fix 83: "Record Book" is longer than "History" -- keep the laptop menu on two rows at 992-1199px */
@media (min-width: 992px) and (max-width: 1199.98px) { .navbar .nav-btn { padding-left: .4rem; padding-right: .4rem; } }
/* fix 85: Head-to-Head -- Picked Against Each Other */
@media (min-width: 992px) {
  .h2h-cards > .h2h-col { flex: 0 1 auto; min-width: 0; }
  .h2h-cards > .card.h2h-card:last-child { order: -1; }
}
.h2h-vs-score { display: flex; justify-content: center; align-items: baseline; gap: .6rem; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.h2h-vs-score b { font-size: 1rem; }
.h2h-vs-score .lead { color: var(--bs-success); font-weight: 800; }
.h2h-vs-score .sep { color: var(--bs-secondary-color); }
.h2h-vs-sum { margin-bottom: .5rem; }
.h2h-vs-table { width: 100%; }
.h2h-vs-pick.won { font-weight: 700; color: var(--bs-success); }
.h2h-vs-pick.lost { color: var(--bs-secondary-color); }
.h2h-vs-mark { font-size: .8em; }
.h2h-vs-slot { font-size: .7rem; font-weight: 700; padding: 0 .3rem; border: 1px solid var(--bs-border-color); border-radius: .3rem; color: var(--bs-secondary-color); }
@media (max-width: 575.98px) { .h2h-vs-line, .h2h-vs-slot { display: none; } .h2h-vs-table td, .h2h-vs-table th { font-size: .88rem; padding-left: .2rem; padding-right: .2rem; } }
/* DRAFT 86: The Board -- readable "how many picked it" shading in dark mode; sortable headers */
.wk-table td.wk-pop { background-color: hsl(210, 70%, calc(88% - var(--cp) * 48%)); border-radius: 8px; }
[data-bs-theme="dark"] .wk-table td.wk-pop { background-color: hsl(212, 62%, calc(19% + var(--cp) * 27%)); }
.wk-table th.wk-sort { cursor: pointer; user-select: none; }
.wk-table th.wk-sort:hover { color: var(--bs-primary); }
.wk-table th.wk-sorted-up::after, .wk-table th.wk-sorted-down::after { display: block; font-size: .65rem; line-height: 1; color: var(--bs-primary); }
.wk-table th.wk-sorted-up::after { content: "\25B2"; } .wk-table th.wk-sorted-down::after { content: "\25BC"; }
[data-bs-theme="dark"] .wk-table td.wk-pop { color: #fff; }   /* white codes on the blues (dark-mode body text is grey) */
@media (max-width: 575.98px) { [data-bs-theme="dark"] .wk-table td.wk-pop strong { font-weight: 800; } }
[data-bs-theme="dark"] .wk-table tbody td[style*="background"] > .text-nowrap > strong { color: #fff; }   /* every picked cell: white code (6th, live, final too) */
/* fix 86: tiny key for The Board's shading -- swatches use the same formula as the cells, so it flips with the theme */
.wk-legend { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 400; white-space: nowrap; color: var(--bs-secondary-color); }
.kk-slate .wk-legend { color: rgba(255,255,255,.75); }
.wk-legend i { width: 13px; height: 10px; border-radius: 3px; border: 1px solid rgba(255,255,255,.25);
               background-color: hsl(210, 70%, calc(88% - var(--cp) * 48%)); }
[data-bs-theme="dark"] .wk-legend i { background-color: hsl(212, 62%, calc(19% + var(--cp) * 27%)); }
/* fix 86: The Board page freezes its header rows -- the table scrolls inside a screen-tall box, so the
   game names stay on top while the names stay on the left. (Dashboard card is short; left as is.) */
body[data-page="trends"] .wk-scroll { max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); overflow: auto; }
@media (max-width: 991.98px) { body[data-page="trends"] .wk-scroll { max-height: calc(100dvh - 5.5rem); } }   /* clear the phone tab bar */
body[data-page="trends"] .wk-table thead { position: sticky; top: 0; z-index: 2; }
body[data-page="trends"] .wk-table thead th { background: var(--bs-body-bg); }
body[data-page="trends"] .wk-dayband th { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--bs-border-color); }   /* collapsed borders don't travel with a sticky header */
/* fix 87: Trends By Team -- sortable P1-P5 / 6th / Overall headers (same look as The Board's) */
.trend-team-table th.tt-sort { cursor: pointer; user-select: none; }
.trend-team-table th.tt-sort:hover { color: var(--bs-primary); }
.trend-team-table th.tt-sorted-up::after, .trend-team-table th.tt-sorted-down::after { display: block; font-size: .65rem; line-height: 1; color: var(--bs-primary); }
.trend-team-table th.tt-sorted-up::after { content: "\25B2"; } .trend-team-table th.tt-sorted-down::after { content: "\25BC"; }
/* fix 87: the key in the table's top-left corner */
.wk-table th.wk-legend-cell { text-align: left !important; vertical-align: bottom; padding-left: .4rem; }

/* fix 90: Record Book > User-Team Summaries > Performance by Year */
.kk-fold-card > .card-header { padding: .45rem .85rem; } .kk-fold-card > .card-header h5 { font-size: 1.05rem; }   /* fix 89: Performance by Year + By Team headers match */
.bt-card > .card-body { padding: .6rem .85rem .4rem; }
.py-card .card-body { position: relative; padding: .6rem .85rem .7rem; }
.py-head { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; font-size: .9rem; }
.py-who { font-weight: 700; }
.py-chart { position: relative; width: 100%; min-height: 200px; }
.py-svg { display: block; width: 100%; height: auto; overflow: visible; }
.py-grid { stroke: var(--bs-border-color); stroke-width: 1; opacity: .6; }
.py-half { stroke: var(--bs-secondary-color); stroke-width: 1; stroke-dasharray: 4 3; opacity: .8; }
.py-ax { fill: var(--bs-secondary-color); font-size: 11px; }
.py-val { fill: var(--bs-body-color); font-size: 11px; font-weight: 700; }
.py-line { fill: none; stroke: var(--bs-primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.py-league { fill: none; stroke: var(--bs-secondary-color); stroke-width: 2; stroke-dasharray: 5 4; }
.py-dot { fill: var(--bs-primary); stroke: var(--bs-body-bg); stroke-width: 2; transition: r .1s; }
.py-dot.py-cur { fill: #f0a020; } .py-dot.on { r: 7; }
.py-hit, .py-area { fill: transparent; cursor: pointer; } .py-area { cursor: crosshair; touch-action: pan-y; }
.py-wk { fill: none; stroke: var(--bs-primary); stroke-width: 1.75; stroke-opacity: var(--py-a, .5); stroke-linejoin: round; }
.py-wk.py-cur { stroke: #f0a020; stroke-width: 3; stroke-opacity: 1; }
.py-cross { stroke: var(--bs-secondary-color); stroke-width: 1; }
.py-legend { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin-top: .35rem; font-size: .82rem; }
.py-key { display: inline-flex; align-items: center; gap: .3rem; color: var(--bs-secondary-color); }
.py-key i { display: inline-block; width: 18px; border-top: 2.5px solid var(--bs-primary); }
.py-key i.py-k-lg { border-top: 2px dashed var(--bs-secondary-color); }
.py-yr { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .45rem; border: 1px solid var(--bs-border-color); border-radius: 999px;
         background: none; color: var(--bs-body-color); font-size: .8rem; }
.py-yr i { display: inline-block; width: 14px; border-top: 2px solid rgba(var(--bs-primary-rgb), var(--py-a, .5)); }
.py-yr.py-cur { font-weight: 700; } .py-yr.py-cur i { border-top: 3px solid #f0a020; }
.py-yr.off { opacity: .4; text-decoration: line-through; }
.py-tip { position: absolute; z-index: 5; pointer-events: none; padding: .35rem .55rem; border-radius: 8px; font-size: .8rem; line-height: 1.35; white-space: nowrap;
          background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); box-shadow: 0 3px 12px rgba(0,0,0,.18); }
.py-tip .py-tl { color: var(--bs-secondary-color); } .py-tip .py-tc { color: #f0a020; font-weight: 700; }
.py-view .btn { padding: .1rem .55rem; font-size: .8rem; }
/* fix 90 (round 2): by week -- each season its own color, chosen seasons only, year labels at the line ends */
.py-wk { stroke-opacity: 1; stroke-width: 2; transition: opacity .15s, stroke-width .15s; }
.py-wk.py-cur { stroke-width: 3; }
.py-wk.dim { opacity: .15; } .py-wk.hot { stroke-width: 3.5; }
.py-end { font-size: 11px; font-weight: 700; }
.py-yr { opacity: .55; } .py-yr.on { opacity: 1; border-color: var(--py-c); }
.py-yr i { border-top: 3px solid var(--py-c) !important; width: 14px; }
.py-yr:not(.on) i { border-top-style: dotted !important; }
.py-yr.off { text-decoration: none; }
.py-q { border: 0; background: none; padding: .05rem .3rem; font-size: .78rem; color: var(--bs-link-color); text-decoration: underline; text-underline-offset: 2px; }
.py-tip .py-sw { display: inline-block; width: 10px; height: 3px; margin: 0 .35rem .2rem 0; border-radius: 2px; vertical-align: middle; }
/* fix 89 (round 2): Performance by Year -- running record: each season its own color, chosen seasons only, year labels at the line ends */
.py-wk { stroke-opacity: 1; stroke-width: 2; transition: opacity .15s, stroke-width .15s; }
.py-wk.py-cur { stroke-width: 3; }
.py-wk.dim { opacity: .15; } .py-wk.hot { stroke-width: 3.5; }
.py-end { font-size: 11px; font-weight: 700; }
.py-yr { opacity: .6; } .py-yr.on { opacity: 1; border-color: var(--py-c); }
.py-yr i { border-top: 3px solid var(--py-c) !important; width: 14px; }
.py-yr:not(.on) i { border-top-style: dotted !important; }
.py-q { border: 0; background: none; padding: .05rem .3rem; font-size: .78rem; color: var(--bs-link-color); text-decoration: underline; text-underline-offset: 2px; }
.py-tip .py-sw { display: inline-block; width: 10px; height: 3px; margin: 0 .35rem .2rem 0; border-radius: 2px; vertical-align: middle; }
.py-view .btn { padding: .15rem .6rem; font-size: .82rem; }
/* Every week: season x week grid, 0-5 right (red -> green) */
.pyg { display: grid; grid-template-columns: auto repeat(var(--pyg-n), minmax(0, 1fr)) auto; gap: 2px; font-size: .72rem; align-items: center; }
.pyg-c { display: flex; align-items: center; justify-content: center; height: 22px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.pyg-h { color: var(--bs-secondary-color); height: 16px; font-size: .66rem; }
.pyg-y { justify-content: flex-start; padding-right: .3rem; font-weight: 600; color: var(--bs-secondary-color); } .pyg-y.cur { color: var(--bs-body-color); font-weight: 800; }
.pyg-tot { justify-content: flex-end; padding-left: .35rem; font-weight: 700; white-space: nowrap; }
.pyg-none { background: none; border: 1px dashed var(--bs-border-color); opacity: .5; }
.pyg-v { color: #fff; font-weight: 700; cursor: default; }
.pyg-v[data-l="0"] { background: #b42318; } .pyg-v[data-l="1"] { background: #e0583f; } .pyg-v[data-l="2"] { background: #f1a28c; color: #3b0d06; }
.pyg-v[data-l="3"] { background: #9fd8a8; color: #0b3a17; } .pyg-v[data-l="4"] { background: #3da35a; } .pyg-v[data-l="5"] { background: #13702e; }
[data-bs-theme="dark"] .pyg-v[data-l="2"] { background: #c46a55; color: #fff; } [data-bs-theme="dark"] .pyg-v[data-l="3"] { background: #4f9a63; color: #fff; }
.pyg-key { color: var(--bs-secondary-color); margin-right: .35rem; } .pyg-k { width: 22px; height: 18px; font-size: .7rem; }
@media (max-width: 479.98px) { .pyg { font-size: .62rem; gap: 1px; } .pyg-c { height: 18px; border-radius: 3px; } .pyg-h { font-size: .55rem; } }
/* fix 90: Stats -- League vs. every team (two columns on phones, four on laptops) + folding Stats cards */
.lt-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 1rem; font-size: .85rem; }
@media (min-width: 992px) { .lt-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lt-list li { display: grid; grid-template-columns: 2.6rem 1fr 2.6rem 3.4rem; align-items: center; gap: .35rem; padding: 2px 0; border-bottom: 1px solid var(--bs-border-color-translucent); }
.lt-t { font-weight: 700; } .lt-p { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.lt-r { text-align: right; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; font-size: .8rem; }
.lt-bar { height: 6px; border-radius: 3px; background: var(--bs-secondary-bg); overflow: hidden; position: relative; }
.lt-bar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--bs-secondary-color); opacity: .6; }
.lt-bar i { display: block; height: 100%; border-radius: 3px; background: var(--bs-secondary-color); }
.lt-list li.up .lt-bar i { background: #2e9e4e; } .lt-list li.dn .lt-bar i { background: #d9534f; }
.lt-list li.up .lt-p { color: #2e9e4e; } .lt-list li.dn .lt-p { color: #d9534f; }
.st-card .st-table, .st-card .table-responsive { margin-bottom: 0 !important; }
@media (max-width: 991.98px) { .lt-list li { grid-template-columns: 2.6rem 1fr 3.4rem; } .lt-bar { display: none; } }   /* phones: code, %, record */

/* fix 91: live scores (ESPN, display only). Dashed = still being played; solid fills stay for graded finals. */
.wk-live-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #ef4444; margin-right: .35rem;
    vertical-align: .05rem; animation: wk-pulse 1.6s ease-in-out infinite; }
@keyframes wk-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .wk-live-dot { animation: none; } }
.wk-live-clock { display: inline-block; font-size: .62rem; font-weight: 700; line-height: 1; padding: .12rem .3rem; border-radius: .25rem;
    color: #fff; background: #dc2626; white-space: nowrap; letter-spacing: .02em; }
.wk-live-score { font-weight: 700; color: var(--bs-body-color); }
.wk-table td.wk-live-up, .wk-table td.wk-live-down { border-radius: 8px; outline-offset: -3px; }
.wk-live-up   { background-color: rgba(34,197,94,.16) !important;  outline: 2px dashed rgba(34,197,94,.85); }
.wk-live-down { background-color: rgba(239,68,68,.16) !important;  outline: 2px dashed rgba(239,68,68,.85); }
.wk-live-key { display: inline-block; padding: 0 .35rem; border-radius: 6px; outline-offset: -1px; outline-width: 1.5px; font-weight: 600; }
.wk-live-note { line-height: 1.6; }
.yp-live { font-size: .8rem; white-space: nowrap; color: var(--bs-body-color); }
.yp-live .yp-clock { color: #ef4444; font-weight: 600; font-size: .72rem; }
[data-bs-theme="dark"] .yp-live .yp-clock { color: #f87171; }
.yp-cov { font-size: .8rem; font-weight: 700; }
.yp-cov-up { color: #16a34a; } .yp-cov-down { color: #dc2626; }
[data-bs-theme="dark"] .yp-cov-up { color: #4ade80; } [data-bs-theme="dark"] .yp-cov-down { color: #f87171; }
.yp-live-badge { border: 1.5px dashed currentColor; background: transparent; font-weight: 600; }
.yp-live-badge.yp-live-up { color: #15803d; } .yp-live-badge.yp-live-down { color: #b91c1c; }
[data-bs-theme="dark"] .yp-live-badge.yp-live-up { color: #4ade80; } [data-bs-theme="dark"] .yp-live-badge.yp-live-down { color: #f87171; }
/* fix 91: leaderboard -- live picks get a dashed slot with ▲ / ▼ instead of ⏳ (a push is a loss: ▼) */
.pick-slot.lb-live-up, .pick-slot.lb-live-down { border-style: dashed; border-width: 1.5px; }
.pick-slot.pick-slot-tb.lb-live-up, .pick-slot.pick-slot-tb.lb-live-down { margin-left: .5rem; }
.pick-slot.lb-live-up   { border-color: rgba(34,197,94,.85);  background: rgba(34,197,94,.12); }
.pick-slot.lb-live-down { border-color: rgba(239,68,68,.85);  background: rgba(239,68,68,.12); }
.pick-slot.lb-live-up .pick-slot-icon   { color: #16a34a; font-weight: 700; }
.pick-slot.lb-live-down .pick-slot-icon { color: #dc2626; font-weight: 700; }
[data-bs-theme="dark"] .pick-slot.lb-live-up .pick-slot-icon { color: #4ade80; }
[data-bs-theme="dark"] .pick-slot.lb-live-down .pick-slot-icon { color: #f87171; }


/* fix 94: the Podium (dashboard) -- last week's 1st and 2nd as podium steps, each Member with flair.
   Phones: the top of the page; laptops: the first card in the left column. */
.podium-card { border-left: 4px solid var(--bs-success); }
.podium-card.podium-gold { border-left-color: var(--kk-gold); background: linear-gradient(90deg, var(--kk-gold-bg), transparent 70%); }   /* a 5-0 week */
.col-md-6 .podium-card { margin-top: 0 !important; }
.pd-title { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .55rem; }
.pd-week { font-weight: 400; letter-spacing: .08em; color: var(--bs-secondary-color); }
.pd-name { font-weight: 700; font-size: 1.05rem; }
.pd-fl-below { display: block; line-height: 1.6; }   /* two or three flairs: their own line */
.pd-fl-below .flair-pill:first-child { margin-left: 0; }
.pd-you { display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: 6px; font-size: .7rem; font-weight: 700; line-height: 1.15rem;
    background: var(--bs-primary); color: #fff; vertical-align: .1em; }
.pd-steps { display: flex; align-items: flex-end; gap: .6rem; border-bottom: 2px solid var(--bs-border-color); }
.pd-col { flex: 1 1 0; min-width: 0; text-align: center; }
.pd-col .pd-who { margin-bottom: .35rem; line-height: 1.5; }
.pd-step { border-radius: 8px 8px 0 0; padding: .25rem .3rem; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .5rem; border-bottom: 0; }   /* medal, place and record on one line */
.pd-col-1 .pd-step { min-height: 2.5rem; background: color-mix(in srgb, var(--kk-gold) 30%, transparent); border: 1px solid var(--kk-gold); border-bottom: 0; }
.pd-col-2 .pd-step { min-height: 1.9rem; background: color-mix(in srgb, #adb5bd 28%, transparent); border: 1px solid #adb5bd; border-bottom: 0; }
.pd-col-3 .pd-step { min-height: 1.5rem; background: color-mix(in srgb, #cd7f32 28%, transparent); border: 1px solid #cd7f32; border-bottom: 0; }
.pd-col-1 .pd-step-five { min-height: 3.6rem; } .pd-col-2 .pd-step-five { min-height: 3rem; } .pd-col-3 .pd-step-five { min-height: 2.7rem; }
.pd-step-medal { font-weight: 800; font-size: .95rem; }
.pd-step-line { font-size: .95rem; }
.pd-rec { font-weight: 800; font-variant-numeric: tabular-nums; }
.pd-five { color: var(--kk-gold); }
[data-bs-theme="light"] .pd-five { color: #a57c00; }
.pd-step-rec .pd-rec { display: block; font-size: 1.9rem; line-height: 1.1; letter-spacing: .02em; }   /* a 5-0: big and centered */
.pd-col-2 .pd-step-rec .pd-rec, .pd-col-3 .pd-step-rec .pd-rec { font-size: 1.6rem; }
.pd-also { margin-top: .6rem; font-size: .9rem; }
/* fix 95: laptops 1200px+ -- your name and flair sit just before the menu buttons, a fixed gap from them, at any width
   (fix 94's centering slid back left at half screen). Narrower laptop windows keep them right after the logo, so the menu doesn't wrap. */
@media (min-width: 992px) { .nav-me-wrap { align-items: center; margin-right: auto; } }
@media (min-width: 1200px) {
  .nav-me-wrap { flex: 1 1 auto; justify-content: flex-end; min-width: 0; padding-right: 1.25rem; margin-right: 0; }
  .navbar-expand-lg #navbarNav { flex-grow: 0; }   /* the menu takes only the width it needs */
}
/* fix 94: 2nd place is the whole half 25% smaller than 1st -- narrower, smaller name, pills, step and record */
.pd-col-1 { flex: 4 1 0; } .pd-col-2 { flex: 3 1 0; }
.pd-col-2 .pd-name { font-size: .79rem; }
.pd-col-2 .flair-pill { font-size: .51rem; line-height: .94rem; min-width: 1.6rem; padding: 0 .26rem; margin-left: .22rem; }
.pd-col-2 .pd-fl-below .flair-pill:first-child { margin-left: 0; }
.pd-col-2 .pd-step-medal, .pd-col-2 .pd-step-line { font-size: .71rem; }
.pd-col-2 .pd-step { min-height: 1.43rem; gap: .38rem; padding: .19rem .23rem; }
.pd-col-2 .pd-step-five { min-height: 2.25rem; }
.pd-col-2 .pd-step-rec .pd-rec { font-size: 1.2rem; }
.pd-col-2 .five-oh-name { font-size: .79rem; }

/* fix 95: the Scouting Report -- slate (a lighter slate in dark mode), small inline charts colored by theme */
:root { --sc: #475569; --sc-ink: #475569; }
[data-bs-theme="dark"] { --sc: #64748b; --sc-ink: #a5b4c8; }
.kk-scout > .card-header { background: var(--sc); color: #fff; }
.sc-mode { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.sc-body { position: relative; min-height: 13.5rem; padding-bottom: 2.2rem; }
.sc-slide { display: none; }
.sc-slide.on { display: block; animation: sc-in .35s ease; }
@keyframes sc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sc-slide.on { animation: none; } }
.sc-tag { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sc-ink); margin-bottom: .2rem; }
.sc-head { font-size: 1.05rem; line-height: 1.35; }
.sc-chart { max-width: 22rem; margin-top: .6rem; }
.sc-sub { font-size: .82rem; color: var(--bs-secondary-color); margin-top: .45rem; }
.sc-foot { position: absolute; left: 1rem; right: 1rem; bottom: .7rem; display: flex; align-items: center; gap: .6rem; }
.sc-count { font-size: .72rem; color: var(--bs-secondary-color); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-bar { flex: 1; height: 3px; border-radius: 2px; background: var(--bs-border-color); overflow: hidden; }
.sc-fill { display: block; height: 100%; background: var(--sc-ink); transition: width .3s ease; }
.ins-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ins-lbl { font-size: 11px; fill: var(--bs-body-color); }
.ins-num { font-size: 11px; font-weight: 600; fill: var(--bs-body-color); }
.ins-yr { font-size: 10px; fill: var(--bs-secondary-color); text-anchor: middle; }
.ins-track { fill: var(--bs-tertiary-bg); }
.ins-ref { stroke: var(--bs-secondary-color); stroke-dasharray: 3 3; stroke-width: 1; opacity: .7; }
.ins-you { fill: none; stroke: var(--sc-ink); stroke-width: 2.4; }
.ins-lg { fill: none; stroke: var(--bs-secondary-color); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ins-pt { fill: var(--sc-ink); }
.ins-good { fill: #198754; } .ins-bad { fill: #dc3545; } .ins-mid { fill: #94a3b8; }
[data-bs-theme="dark"] .ins-good { fill: #3fb97a; } [data-bs-theme="dark"] .ins-bad { fill: #f06572; } [data-bs-theme="dark"] .ins-mid { fill: #7b8a9e; }
.ins-team { stroke: rgba(0,0,0,.25); stroke-width: 1; }
[data-bs-theme="dark"] .ins-team { stroke: rgba(255,255,255,.55); }
.ins-lgbar { fill: var(--sc-ink); opacity: .5; }
.ins-gold { fill: #c9a227; }
/* fix 95: Week N Primetime Games -- ◀ ▶ stay on one line beside the title; the title a touch smaller on phones so both fit */
.kk-lb-arrows { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 575.98px) { .kk-pt > .card-header h5 { font-size: 1.1rem; } }
/* fix 96: the Scouting Report's pause button -- a gap before ◀ ▶; gold while paused */
.kk-scout .sc-pause { margin-right: .35rem; font-size: .7rem; letter-spacing: -.12em; padding-left: .45rem; padding-right: .55rem; }
.kk-scout .sc-pause.sc-paused { background: #c9a227; border-color: #c9a227; color: #1b1f24; letter-spacing: 0; padding: .1rem .5rem; }
@media (max-width: 575.98px) {   /* fix 96: phones -- title, tag and three buttons on one line */
  .kk-scout > .card-header { padding-left: .75rem; padding-right: .6rem; }
  .kk-scout > .card-header h5 { font-size: 1.1rem; white-space: nowrap; }
  .kk-scout .sc-mode { font-size: .6rem; }
  .kk-scout .kk-lb-arrows .btn { padding-left: .4rem; padding-right: .4rem; }
  .kk-scout .sc-pause { margin-right: .2rem; }
}
/* fix 96: the Scouting Report's speed button (⏱ 10s) at the end of the progress bar */
.sc-speed { border: 1px solid var(--bs-border-color); background: transparent; color: var(--bs-secondary-color); font-size: .72rem; line-height: 1;
  padding: .2rem .45rem; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-speed:hover { color: var(--bs-body-color); border-color: var(--sc-ink); }
/* fix 96: League vs. Vegas as a Scouting Report slide */
.sc-tag-note { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .8; margin-left: .2rem; }
.sc-vegas .dv-chart { margin-top: .5rem !important; }
/* fix 96: laptops -- the Kom. Krause League logo a little bigger */
@media (min-width: 1400px) { .navbar-brand { font-size: 2.1rem; } }
@media (min-width: 1200px) and (max-width: 1399.98px) { .navbar-brand { font-size: 1.8rem; } }   /* fix 97: steps down so the menu fits */
/* fix 97: phones -- the Dashboard's top cards in one stack: Leaderboard, Your Picks, Primetime Games, Scouting Report
   (Tuesday to the first kickoff: Your Picks, Primetime Games, Leaderboard, Scouting Report). Laptops keep two columns. */
@media (max-width: 767.98px) {
  .kk-dash { display: flex; flex-direction: column; margin-left: 0; margin-right: 0; }
  .kk-dash > .kk-dash-col { display: contents !important; }   /* beats d-flex on the Tuesday column */
  .kk-dash > .kk-dash-col > .card { margin-top: 0 !important; margin-bottom: 1.5rem !important; order: 9; }
  .kk-dash > .kk-dash-col > .kk-lb { order: 1 !important; } .kk-dash > .kk-dash-col > .kk-yp { order: 2 !important; }
  .kk-dash > .kk-dash-col > .kk-pt { order: 3 !important; } .kk-dash > .kk-dash-col > .kk-scout { order: 4 !important; }
  .kk-dash-ptfirst > .kk-dash-col > .kk-lb { order: 3 !important; } .kk-dash-ptfirst > .kk-dash-col > .kk-yp { order: 1 !important; } .kk-dash-ptfirst > .kk-dash-col > .kk-pt { order: 2 !important; }
}
/* fix 97: laptops -- the menu always keeps its two rows (half-screen windows wrapped it to three or four, with ☀ alone);
   your name + flair give up the space instead (the flair drops under your name when it must). */
@media (min-width: 992px) {
  .navbar .nav-stack .nav-btn-row { flex-wrap: nowrap; }
  .navbar-expand-lg #navbarNav { flex-shrink: 0; }
  .nav-me-wrap { min-width: 0; }
}
@media (min-width: 1200px) {   /* fix 97: your name and flair on one line (no double-decker); the short week chip makes the room */
  .nav-me-inner { display: inline-flex; align-items: center; white-space: nowrap; }
  .navbar .chip-long { display: none; } .navbar .chip-short { display: inline; }
}