/* ==========================================================================
   Penalty Box Stats — design tokens
   The light page is the design. The site chrome (navbar) stays dark: it is
   the thing that makes the site read as a stats product, and it is easier on
   a long table than a dark page is.
   A dark page is available by setting data-theme="dark" on <html>, and is
   not applied automatically — see the note on that block below.
   ========================================================================== */

:root {
    color-scheme: light;

    --sc-page: #f7f6f3;
    --sc-panel: #ffffff;
    --sc-subtle: #efece6;
    --sc-line: #e3dfd7;
    --sc-text: #16191c;
    --sc-muted: #56606a;
    --sc-dim: #88919a;
    --sc-accent: #1a7fa3;
    --sc-accent-rgb: 26, 127, 163;
    --sc-accent-hover: #12637f;
    --sc-ember: #9c5b2e;
    --sc-ember-rgb: 156, 91, 46;

    /* Chrome is dark in both modes. */
    --sc-chrome: #0e161b;
    --sc-chrome-line: #24343d;
    --sc-chrome-text: #e8eff3;
    --sc-chrome-muted: #a9bfcb;
    --sc-chrome-dim: #6f8593;
    --sc-chrome-accent: #4fc3e8;

    /* Cell shading is an alpha ramp over --sc-accent, so it inverts for free:
       on paper more alpha reads darker, on slate it reads brighter. The alpha
       itself is computed per division in Standings.razor. */

    --sc-font-display: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
    --sc-font-body: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --sc-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Hand the tokens to Bootstrap so its own components follow along. */
    --bs-body-bg: var(--sc-page);
    --bs-body-color: var(--sc-text);
    --bs-border-color: var(--sc-line);
    --bs-secondary-color: var(--sc-muted);
    --bs-link-color: var(--sc-accent);
    --bs-link-hover-color: var(--sc-accent-hover);
    --bs-emphasis-color: var(--sc-text);
}

/* The dark set is opt-in only. It is deliberately NOT wired to
   prefers-color-scheme: a reader whose machine is in dark mode would get a
   fully dark page, which is the direction we did not pick — the light page
   under dark chrome is the design, not a light-mode variant of it. Set
   data-theme="dark" on <html> to use these. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --sc-page: #0b1115;
    --sc-panel: #121b21;
    --sc-subtle: #0e161b;
    --sc-line: #24343d;
    --sc-text: #e8eff3;
    --sc-muted: #a9bfcb;
    --sc-dim: #6f8593;
    --sc-accent: #4fc3e8;
    --sc-accent-rgb: 79, 195, 232;
    --sc-accent-hover: #9fe0f5;
    --sc-ember: #e6a45e;
    --sc-ember-rgb: 230, 164, 94;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html, body {
    font-family: var(--sc-font-body);
    background-color: var(--sc-page);
    color: var(--sc-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .sc-display {
    font-family: var(--sc-font-display);
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--sc-text);
}

a, .btn-link {
    color: var(--sc-accent);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--sc-accent-hover);
}

.btn-primary {
    color: #ffffff;
    background-color: var(--sc-accent);
    border-color: var(--sc-accent);
}

.btn-primary:hover, .btn-primary:focus {
    color: #ffffff;
    background-color: var(--sc-accent-hover);
    border-color: var(--sc-accent-hover);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--sc-accent-rgb), 0.28);
    border-color: var(--sc-accent);
}

.card {
    background-color: var(--sc-panel);
    border-color: var(--sc-line);
}

.card-header {
    background-color: var(--sc-subtle);
    border-bottom-color: var(--sc-line);
}

.form-select, .form-control {
    background-color: var(--sc-panel);
    border-color: var(--sc-line);
    color: var(--sc-text);
}

.text-muted {
    color: var(--sc-muted) !important;
}

.sc-eyebrow {
    font-family: var(--sc-font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sc-muted);
}

.sc-num {
    font-family: var(--sc-font-mono);
    font-variant-numeric: tabular-nums;
}

.content {
    padding-top: 1.1rem;
}

.stats-wide-shell {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--bs-gutter-x, 0.75rem);
}

h1:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   Chrome — one row: brand, sections, account.
   No league control lives here. Every league-scoped page already carries its
   own League select beside Division, and the section links pick the league up
   from the URL, so the chrome only has to answer "where am I".
   -------------------------------------------------------------------------- */

.sc-chrome {
    background-color: var(--sc-chrome);
    border-bottom: 1px solid var(--sc-chrome-line);
}

.sc-chrome a {
    color: var(--sc-chrome-accent);
}

.sc-chrome a:hover {
    color: #9fe0f5;
}

.sc-chrome-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    min-height: 60px;
}

.sc-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
}

.sc-brand-name {
    font-family: var(--sc-font-display);
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
}

.sc-chrome .sc-brand-name:hover {
    color: #ffffff;
}

.sc-brand-suffix {
    padding-left: 0.625rem;
    border-left: 1px solid var(--sc-chrome-line);
    color: var(--sc-chrome-dim);
}

.sc-chrome-meta {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    flex-shrink: 0;
}

.sc-tabs {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    flex-grow: 1;
}

.sc-chrome .sc-tab {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sc-chrome-muted);
    padding: 0.875rem 0.125rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    background: none;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

.sc-chrome .sc-tab:hover {
    color: #ffffff;
}

.sc-chrome .sc-tab.active {
    color: var(--sc-chrome-text);
    border-bottom-color: var(--sc-chrome-accent);
}

.sc-chrome .dropdown-menu {
    background-color: var(--sc-chrome);
    border-color: var(--sc-chrome-line);
}

.sc-chrome .dropdown-item {
    color: var(--sc-chrome-muted);
}

.sc-chrome .dropdown-item:hover, .sc-chrome .dropdown-item:focus {
    background-color: #16222a;
    color: #ffffff;
}

.sc-chrome .dropdown-divider {
    border-top-color: var(--sc-chrome-line);
}

/* --------------------------------------------------------------------------
   Stats tables
   Rank columns lead so disagreement between the rating systems reads first;
   the group header row says which family each block of columns belongs to.
   -------------------------------------------------------------------------- */

.sc-table-wrap {
    border: 1px solid var(--sc-line);
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--sc-panel);
}

table.sc-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0;
}

table.sc-table th,
table.sc-table td {
    padding: var(--sc-row-pad, 0.6875rem) 0.5rem;
    font-size: 0.84375rem;
}

table.sc-table thead.sc-groups th {
    padding: 0.625rem 0.5rem 0.4375rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sc-dim);
    background-color: var(--sc-subtle);
    border-bottom: 1px solid var(--sc-line);
    text-align: center;
}

table.sc-table thead.sc-groups th.sc-group-lead {
    text-align: left;
    padding-left: 0.875rem;
}

table.sc-table thead.sc-groups th.sc-group-krach {
    color: var(--sc-accent);
}

table.sc-table thead.sc-columns th {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sc-muted);
    text-align: center;
    background-color: var(--sc-subtle);
    border-bottom: 1.5px solid var(--sc-text);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

table.sc-table thead.sc-columns th:hover {
    color: var(--sc-text);
}

/* Sorting is a control, so it is a button: it takes focus, answers Enter and
   Space, and announces itself. It fills the cell so the whole header is the
   target, and inherits everything so the header still looks like a header. */
table.sc-table thead.sc-columns th {
    padding: 0;
}

table.sc-table thead.sc-columns .sc-sort {
    display: block;
    padding: var(--sc-row-pad, 0.6875rem) 0.5rem;
    appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: inherit;
    white-space: inherit;
    cursor: pointer;
}

table.sc-table thead.sc-columns .sc-sort:focus-visible {
    outline: 2px solid var(--sc-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

table.sc-table thead.sc-columns th.sc-col-team {
    text-align: left;
}

table.sc-table thead.sc-columns th.sc-col-team .sc-sort {
    padding-left: 0.875rem;
}

table.sc-table td {
    text-align: center;
    font-family: var(--sc-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--sc-muted);
    border-bottom: 1px solid var(--sc-line);
    background-color: var(--sc-panel);
}

table.sc-table td.sc-cell-team {
    text-align: left;
    padding-left: 0.875rem;
    font-family: var(--sc-font-body);
    color: var(--sc-text);
    font-weight: 500;
    white-space: nowrap;
}

table.sc-table td.sc-cell-rank {
    color: var(--sc-text);
    font-weight: 600;
}

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

table.sc-table tbody tr:hover td {
    background-color: rgba(var(--sc-accent-rgb), 0.05);
}

table.sc-table .sc-vsep {
    border-left: 1px solid var(--sc-line);
}

/* Sequential ramp: one hue, magnitude only. --sc-heat is 0..1, set inline
   per cell from the rating's position within its own division. */
td.sc-heat {
    background-image: linear-gradient(rgba(var(--sc-accent-rgb), var(--sc-heat, 0)), rgba(var(--sc-accent-rgb), var(--sc-heat, 0)));
    color: var(--sc-text);
    font-weight: 600;
}

/* Diverging wash: two hues either side of even, with the surface itself as
   the neutral midpoint. */
td.sc-diff-pos {
    background-image: linear-gradient(rgba(var(--sc-accent-rgb), var(--sc-heat, 0)), rgba(var(--sc-accent-rgb), var(--sc-heat, 0)));
    color: var(--sc-accent);
    font-weight: 600;
}

td.sc-diff-neg {
    background-image: linear-gradient(rgba(var(--sc-ember-rgb), var(--sc-heat, 0)), rgba(var(--sc-ember-rgb), var(--sc-heat, 0)));
    color: var(--sc-ember);
    font-weight: 600;
}

/* A rating that disagrees with KRACH by four places or more is worth a look. */
table.sc-table td.sc-flagged {
    color: var(--sc-ember);
    font-weight: 600;
}

.sc-table-legend {
    display: flex;
    align-items: center;
    gap: 1.875rem;
    flex-wrap: wrap;
    margin-top: 0.875rem;
    font-size: 0.78125rem;
    color: var(--sc-dim);
}

.sc-ramp {
    display: flex;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--sc-line);
}

.sc-ramp span {
    display: block;
    width: 26px;
    height: 12px;
}

.sc-compact {
    --sc-row-pad: 0.375rem;
}

.sc-compact table.sc-table th,
.sc-compact table.sc-table td {
    font-size: 0.78125rem;
}

/* --------------------------------------------------------------------------
   Reconnect
   Every sort and filter on this site is a round trip, so a phone that walks
   out of wifi range at the rink loses the circuit regularly. Blazor toggles
   the state classes; this says what happened in the site's own voice instead
   of the stock unstyled bar.
   -------------------------------------------------------------------------- */

#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    padding: 0.75rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.sc-reconnect-card {
    max-width: 30rem;
    margin-inline: auto;
    padding: 0.75rem 1rem;
    border: 1px solid var(--sc-chrome-line);
    border-radius: 10px;
    background-color: var(--sc-chrome);
    color: var(--sc-chrome-text);
    font-size: 0.875rem;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.sc-reconnect-card a {
    color: var(--sc-chrome-accent);
    text-decoration: underline;
}

#components-reconnect-modal .sc-reconnect-card > span {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .sc-reconnect-show,
#components-reconnect-modal.components-reconnect-failed .sc-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected .sc-reconnect-rejected {
    display: inline;
}

/* --------------------------------------------------------------------------
   Framework leftovers
   -------------------------------------------------------------------------- */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* --------------------------------------------------------------------------
   Mobile
   The desktop layout is the design; everything below only reshapes it where a
   phone cannot hold it. Two things break first on a narrow screen: the tab row
   wraps into a wall of thin tap targets, and a wide table scrolls the team
   name out of view, leaving anonymous numbers. Both are fixed here.
   -------------------------------------------------------------------------- */

html {
    -webkit-text-size-adjust: 100%;
}

/* A sideways swipe on a wide table should not walk the browser back a page. */
.table-responsive {
    overscroll-behavior-x: contain;
}

/* A division header is a disclosure control: the whole title is the target, and
   it inherits the heading's type so the card still reads as a card. */
.sc-division-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.sc-division-toggle:focus-visible {
    outline: 2px solid var(--sc-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.sc-division-caret {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sc-line);
    border-radius: 4px;
    background-color: var(--sc-panel);
    color: var(--sc-muted);
    font-family: var(--sc-font-mono);
    font-size: 0.875rem;
    line-height: 1;
}

.sc-division-toggle:hover .sc-division-caret {
    border-color: var(--sc-accent);
    color: var(--sc-accent);
}

/* The "All columns" toggle only means anything where columns are being hidden. */
.sc-col-toggle {
    display: none;
}

/* The About links are a dropdown on desktop and flat tabs in the scrolling
   strip on a phone: a dropdown menu inside a horizontal scroller gets clipped
   by the scroller, and on a strip that already scrolls, three more tabs cost
   nothing. */
.sc-about-flat {
    display: none;
}

@media (max-width: 991.98px) {
    /* Brand and account share the first line; the sections become a strip of
       their own that scrolls sideways, so every section stays one tap away
       instead of behind a menu. */
    .sc-chrome-row {
        gap: 0.5rem 0.75rem;
        min-height: 0;
        padding-top: 0.5rem;
    }

    .sc-brand {
        order: 1;
    }

    .sc-chrome-meta {
        order: 2;
        margin-left: auto;
        gap: 0.875rem;
    }

    .sc-tabs {
        order: 3;
        flex-basis: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        gap: 1.125rem;
        /* Bleed to the screen edges so a half-cut tab shows there is more. */
        margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    }

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

    /* ~44px of height: a tab row is the most-tapped thing on the site. */
    .sc-chrome .sc-tab {
        font-size: 0.875rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .sc-tabs .dropdown {
        display: none;
    }

    .sc-about-flat {
        display: inline-block;
    }

    /* Pin the team name so the numbers keep an owner while the table scrolls.
       Both cells already carry an opaque background, so rows pass underneath
       cleanly; the hairline stands in for the edge of the pinned column. */
    table.sc-table td.sc-cell-team,
    table.sc-table thead.sc-columns th.sc-col-team {
        position: sticky;
        left: 0;
        z-index: 2;
        box-shadow: 1px 0 0 var(--sc-line);
    }

    /* Standings carries up to twenty columns across four rating systems. On a
       phone it opens on the columns that answer "who is winning" — rank, team,
       record, and the headline rating — and the toggle brings the rest back.
       The group header row goes with them: its cells span whole families of
       columns, so once some of those are hidden its spans no longer line up,
       and the column headers underneath already name every column. */
    table.sc-table thead.sc-groups {
        display: none;
    }

    .sc-col-scope:not(.sc-show-all) table.sc-table .sc-col-detail {
        display: none;
    }

    /* Half a rem of side padding per cell is a desk-sized luxury; on a phone it
       is most of a column. */
    table.sc-table th,
    table.sc-table td,
    table.sc-table thead.sc-columns .sc-sort,
    table.sc-table thead.sc-columns th.sc-col-team .sc-sort {
        padding-left: 0.3125rem;
        padding-right: 0.3125rem;
    }

    /* The pinned name column is the widest thing on the row. Letting it wrap
       costs a second line and buys back enough width for the trimmed table to
       sit inside the screen instead of scrolling. */
    table.sc-table td.sc-cell-team {
        white-space: normal;
        max-width: 9rem;
        padding-left: 0.3125rem;
    }

    /* The crest is decoration here — it carries alt="" and the name beside it
       is the identifier. On a phone the 28px it occupies is the difference
       between the trimmed table fitting the screen and not. */
    table.sc-table td.sc-cell-team .rounded-circle {
        display: none;
    }

    .sc-col-toggle {
        display: inline-block;
        white-space: nowrap;
    }

    /* The freshness note and the toggle cannot both have the line. The toggle
       is the one you act on. */
    .sc-updated {
        display: none;
    }

    .card-header .sc-col-toggle {
        margin-left: auto;
    }

    /* A grid inside its own scroller should not hand the scroll back to the
       page the moment it reaches an edge. */
    .matchup-scroll {
        overscroll-behavior: contain;
    }

    /* Same job on the plain Bootstrap tables, which have no team-cell class. */
    .table td.sc-sticky-name {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: var(--sc-panel);
        box-shadow: 1px 0 0 var(--sc-line);
    }

    .table th.sc-sticky-name {
        position: sticky;
        left: 0;
        z-index: 3;
        background-color: var(--bs-tertiary-bg, var(--sc-subtle));
        box-shadow: 1px 0 0 var(--sc-line);
    }
}

@media (max-width: 575.98px) {
    /* px-4 on the article plus the container's own gutter was eating roughly
       an eighth of a 390px screen before any content. */
    .content.px-4 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .container-xxl,
    .stats-wide-shell {
        --bs-gutter-x: 0.75rem;
    }

    .content {
        padding-top: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   Game odds — KRACH win chances on Upcoming, upset flags on Scores.
   The favourite's figure carries the accent; the underdog's stays dim, so the
   eye lands on who is expected to win without reading both numbers.
   -------------------------------------------------------------------------- */

.sc-odds {
    font-size: 0.75rem;
    color: var(--sc-dim);
    white-space: nowrap;
}

.sc-odds.sc-odds-favourite {
    font-weight: 600;
    color: var(--sc-accent);
}

.sc-upset {
    display: block;
    width: max-content;
    margin: 0.2rem auto 0;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--sc-ember);
    background-color: rgba(var(--sc-ember-rgb), 0.12);
    border: 1px solid rgba(var(--sc-ember-rgb), 0.35);
}

/* Ranking history on the team page. The viewBox is phone-width so the date
   labels stay readable when the SVG scales down; the frame caps how far it
   grows on the wide team layout, where an uncapped chart would balloon the type. */
.sc-rank-chart-block {
    margin: 0;
    padding: 0.875rem 0.75rem 0.25rem;
    border-bottom: 1px solid var(--sc-line);
}

.sc-rank-chart-title {
    margin: 0 0 0.5rem;
    font-family: var(--sc-font-display);
    font-size: 1rem;
    letter-spacing: 0.01em;
    color: var(--sc-text);
}

.sc-rank-chart-hint {
    margin-left: 0.5rem;
    font-family: var(--sc-font-body);
    font-size: 0.8125rem;
    color: var(--sc-muted);
}

.sc-rank-chart-frame {
    width: 100%;
    max-width: 36rem;
}

.sc-rank-chart {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.sc-rank-chart text {
    font-family: var(--sc-font-body);
}

.sc-rank-chart .grid {
    stroke: var(--sc-line);
    fill: none;
}

.sc-rank-chart .tick {
    fill: var(--sc-muted);
}

.sc-rank-krach { color: var(--sc-accent); }
.sc-rank-pairwise { color: var(--sc-ember); }
.sc-rank-npi { color: #1e7a46; }
.sc-rank-srs { color: #6a3d8a; }
.sc-rank-other { color: var(--sc-text); }

:root[data-theme="dark"] .sc-rank-npi { color: #7dcea0; }
:root[data-theme="dark"] .sc-rank-srs { color: #d2b4e8; }

.sc-rank-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    list-style: none;
    margin: 0.5rem 0 0.625rem;
    padding: 0;
    font-size: 0.875rem;
    color: var(--sc-text);
}

.sc-rank-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.sc-rank-swatch {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    background: currentColor;
}

.sc-rank-chart-empty {
    margin: 0;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--sc-line);
    font-size: 0.9375rem;
}