/* nfl.css — NFL Forecast.
   Requires ../assets/css/ink.css first (tokens, theme toggle, base type).

   The idea: a fine-press sporting almanac. The page is monochrome ink on
   paper, exactly like the rest of the site.

   Two colour systems, kept strictly apart:
     · IDENTITY — a club's own colours, used only in its logo, original press
       mark, and the schedule's pick buttons. Never used to show a quantity.
     · QUANTITY — one sequential grey-to-blue scale shared by the whole odds
       table, so a colour there always means a probability and never a team.
     Nought keeps the scale's low grey but adds hatching, because an outcome
     absent from the simulation is a different kind of fact from one that is
     merely unlikely.

   Mono labels sharing a line with serif text sit on a true shared baseline
   (align-items: baseline) — site-wide owner preference, no padding nudges. */

.nf-wrap {
    /* NFL Forecast only: IBM Plex Mono reads more cleanly at the page's small,
       widely tracked UI sizes than the site's default Courier Prime. */
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
        monospace;
    max-width: 74rem;
    margin: 0 auto;
    padding: 1.2rem 1.2rem 1.5rem;
}

/* ---------- masthead (matches Wordbook / the flashcards apps) ---------- */

.nf-masthead {
    position: relative;
    text-align: center;
    margin-bottom: 0.75rem;
}

.nf-masthead .m-rule {
    border: 0;
    border-top: 1px solid var(--hairline-strong);
    margin: 0 0 3px;
}

.nf-masthead .m-rule + .m-rule {
    margin-bottom: 0;
}

.nf-masthead-inner {
    padding: 0.9rem 3.5rem 0.75rem;
}

.nf-masthead h1 {
    margin: 0;
    font-size: clamp(1.9rem, 5vw, 2.8rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.nf-masthead h1 .nf-rule-word {
    font-style: italic;
    font-weight: 500;
}

.nf-nav {
    margin-top: 0.35rem;
}

.nf-home {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    text-decoration: none;
}

.nf-home:hover {
    color: var(--ink);
}

@media (min-width: 40rem) {
    .nf-masthead-inner {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 0.75rem;
    }

    .nf-nav {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-top: 0;
    }

    .nf-nav::before {
        content: "";
        width: 1px;
        height: 0.85rem;
        background: var(--hairline-strong);
    }
}

.toggle-rail {
    position: absolute;
    top: 0.55rem;
    right: 0.5rem;
    display: flex;
    flex-direction: row;
    gap: 0.55rem;
    align-items: center;
    z-index: 10;
}

.nf-masthead .theme-toggle,
.nf-masthead .nf-info-toggle {
    display: grid;
    place-items: center;
}

.nf-info-toggle {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    color: var(--ink-mute);
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease,
        background 0.12s ease;
}

.nf-info-toggle span {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1;
}

.nf-info-toggle:hover,
.nf-info-toggle[aria-expanded="true"] {
    color: var(--ink);
    border-color: var(--hairline-strong);
    background: var(--paper-raised);
}

.nf-info-toggle-inline {
    width: 1.45rem;
    height: 1.45rem;
}

.nf-info-toggle-inline span {
    font-size: 0.78rem;
}

/* ---------- dateline: the running state of the forecast ---------- */

.nf-dateline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 0.55rem;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    line-height: 1.35;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.nf-dateline .sep {
    color: var(--ink-faint);
}

.nf-dateline-pair {
    display: inline-flex;
    align-items: baseline;
    gap: 0.7rem;
}

.nf-dateline b {
    font-weight: 700;
    color: var(--ink-soft);
}

.nf-sim-state {
    min-width: 6.8em;
    color: var(--ink-mute);
}

.nf-sim-state[data-state="running"] {
    color: var(--ink);
}

.nf-sim-state[data-state="cached"] {
    color: var(--ink-soft);
}

/* the press is running — a thin travelling rule below the masthead */
.nf-press {
    position: relative;
    height: 2px;
    overflow: hidden;
    background: transparent;
}

.nf-press.is-running {
    background: var(--hairline);
}

.nf-press::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 28%;
    background: var(--ink);
    opacity: 0;
}

.nf-press.is-running::after {
    opacity: 1;
    animation: nf-press-run 900ms linear infinite;
}

@keyframes nf-press-run {
    from { transform: translateX(-100%); }
    to   { transform: translateX(460%); }
}

@media (prefers-reduced-motion: reduce) {
    .nf-press.is-running::after { animation: none; opacity: 0.5; width: 100%; }
}

/* ---------- controls ---------- */

/* One compact press tray keeps settings and scenario actions together without
   spending a full paper panel on each information group. On narrower screens
   the groups stack inside this same tray, separated by one quiet rule. */
.nf-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.4rem;
    margin: 0.65rem 0 0;
    padding: 0.65rem 0.8rem;
    background: color-mix(in srgb, var(--paper-recessed) 42%, var(--paper));
    border: 1px solid color-mix(in srgb, var(--hairline) 62%, transparent);
}

.nf-controls[hidden],
.nf-section-nav[hidden],
.nf-almanac[hidden] {
    display: none;
}

.nf-controls-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.55rem 1.2rem;
    min-width: 0;
}

.nf-controls-scenario {
    gap: 0.55rem 0.7rem;
    justify-content: flex-end;
}

.nf-fieldset {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.nf-legend {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute);
    white-space: nowrap;
}

.nf-segment {
    display: flex;
    border: 1px solid var(--hairline-strong);
}

.nf-btn {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: transparent;
    border: 0;
    min-height: 2rem;
    padding: 0.42rem 0.75rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.nf-segment .nf-btn + .nf-btn {
    border-left: 1px solid var(--hairline-strong);
}

.nf-btn:hover {
    color: var(--ink);
}

.nf-btn[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
}

.nf-btn-plain {
    border: 1px solid var(--hairline-strong);
    padding: 0.42rem 0.8rem;
}

.nf-btn-plain:hover {
    border-color: var(--ink);
}

.nf-btn-plain:disabled {
    opacity: 0.4;
    cursor: default;
    border-color: var(--hairline);
}

.nf-scenario {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    white-space: nowrap;
}

.nf-scenario b {
    color: var(--ink);
    font-weight: 700;
}

.nf-section-nav {
    display: none;
}

.nf-btn:focus-visible,
.nf-filter-trigger:focus-visible,
.nf-filter-expand:focus-visible,
.nf-filter-check input:focus-visible,
.pick:focus-visible,
.nf-info-toggle:focus-visible,
.nf-info-close:focus-visible,
.nf-section-nav button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* ---------- contextual information dialog ---------- */

body.nf-modal-open {
    overflow: hidden;
}

.nf-info-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(18, 17, 15, 0.48);
}

:root[data-theme="dark"] .nf-info-modal {
    background: rgba(0, 0, 0, 0.72);
}

.nf-info-modal[hidden] {
    display: none;
}

.nf-info-dialog {
    position: relative;
    width: min(38rem, 100%);
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: 1.4rem 1.5rem 1.5rem;
    color: var(--ink-soft);
    background: var(--paper);
    border: 1px solid var(--hairline-strong);
    box-shadow: 0 1.2rem 3.5rem rgba(0, 0, 0, 0.22);
}

.nf-info-dialog > header {
    padding: 0 2.4rem 0.8rem 0;
    border-bottom: 1px solid var(--hairline);
}

.nf-info-eyebrow,
.nf-info-strap,
.nf-info-kicker {
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.nf-info-eyebrow {
    margin: 0 0 0.18rem;
    color: var(--ink-mute);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.nf-info-dialog h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.45rem, 8vw, 1.8rem);
    font-weight: 600;
    line-height: 1.05;
}

.nf-info-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0 0 0.14rem;
    color: var(--ink-mute);
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.nf-info-close:hover {
    color: var(--ink);
    border-color: var(--hairline-strong);
    background: var(--paper-raised);
}

.nf-info-body {
    padding-top: 0.9rem;
    font-size: 1rem;
    line-height: 1.62;
}

.nf-info-body p {
    margin: 0;
}

.nf-info-lede {
    color: var(--ink-soft);
}

.nf-info-tagline {
    margin: 0 0 1rem !important;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink-soft);
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.35;
}

.nf-info-kicker {
    color: var(--ink);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.nf-info-strap {
    margin-top: 0.15rem !important;
    color: var(--ink-mute);
    font-size: 0.6rem;
    line-height: 1.55;
    letter-spacing: 0.1em;
}

.nf-info-body > section,
.nf-info-grid {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--hairline);
}

.nf-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.4rem;
}

.nf-info-body h3 {
    margin: 0 0 0.25rem;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.nf-info-body section p {
    color: var(--ink-mute);
    font-size: 0.93rem;
}

/* ---------- the two-column broadsheet ---------- */

.nf-almanac {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    margin-top: 1rem;
}

@media (min-width: 62rem) {
    .nf-almanac {
        grid-template-columns: minmax(0, 1fr) 23rem;
        gap: 0;
        align-items: start;
    }
}

/* The two columns are separated by a rule and share one rule under their
   headings — the broadsheet convention, and what stops the odds table and the
   schedule reading as two unrelated pages side by side. */
.nf-col-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    margin: 0 0 0.9rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--hairline-strong);
}

.nf-probability-head {
    flex-wrap: wrap;
}

.nf-probability-head .nf-dateline {
    order: 3;
    flex: 1 0 100%;
    padding-top: 0.35rem;
}

@media (min-width: 62rem) {
    .nf-almanac > section:first-child {
        padding-right: 2.2rem;
    }

    .nf-picker {
        border-left: 1px solid var(--hairline);
        padding-left: 2.2rem;
    }
}

.nf-col-head h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    scroll-margin-top: 0.8rem;
}

.nf-heading-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.nf-col-head .nf-col-note {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    text-align: right;
}

/* ---------- odds table ---------- */

.nf-conf {
    margin: 0 0 2.2rem;
}

.nf-conf h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.2rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.nf-conf-marks {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.35rem;
    height: 1rem;
}

.nf-conf-mark {
    display: block;
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nf-conf-mark-vintage {
    display: none;
}

:root[data-mark-style="vintage"] .nf-conf-mark-current {
    display: none;
}

:root[data-mark-style="vintage"] .nf-conf-mark-vintage {
    display: block;
}

.nf-conf h3::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--hairline);
    transform: translateY(-0.2em);
}

.nf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    /* Auto, deliberately. Narrow viewports drop whole columns with
       `display: none`, and the fixed algorithm keeps reserving width for them —
       the club column collapsed to 28px at 320px. The `width` values below are
       preferences that auto layout honours, so the columns still don't jitter
       as the figures change. */
    table-layout: auto;
}

.nf-table th {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-mute);
    text-align: center;
    padding: 0.5rem 0.3rem 0.4rem;
    border-top: 2px solid var(--hairline-strong);
    border-bottom: 1px solid var(--hairline-strong);
    vertical-align: bottom;
    white-space: nowrap;
}

.nf-table th.col-team {
    text-align: left;
    width: auto;
}

.nf-table th.col-rec {
    width: 4.4rem;
}

.nf-table th.col-pct {
    width: 4.3rem;
}

.nf-table td {
    padding: 0;
    border-bottom: 1px solid var(--hairline);
    vertical-align: middle;
}

/* the playoff cut line — seven clubs in, the rest out */
.nf-table tbody tr.cut-line td {
    border-bottom: 2px solid var(--hairline-strong);
}

.nf-row {
    cursor: pointer;
}

.nf-row:hover .cell-team,
.nf-row[aria-expanded="true"] .cell-team {
    box-shadow: inset 3px 0 0 var(--team-ink);
}

.nf-row:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: -2px;
}

.cell-team {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.4rem 0.42rem 0.5rem;
    min-width: 0;
    transition: box-shadow 0.12s ease;
}

/* The seven clubs currently in the field, printed as one block. */
.nf-row.in-field td {
    background: var(--paper-raised);
}

.nf-row.in-field .cell-team {
    box-shadow: inset 2px 0 0 var(--hairline-strong);
}

.nf-row.in-field:hover .cell-team,
.nf-row.in-field[aria-expanded="true"] .cell-team {
    box-shadow: inset 3px 0 0 var(--team-ink);
}

.team-div {
    margin-left: auto;
    padding-left: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    white-space: nowrap;
    cursor: help;
}

.team-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    color: var(--ink-faint);   /* the mark's hairline inherits this */
}

.mark {
    display: inline-grid;
    place-items: center;
    width: var(--mark-size);
    height: var(--mark-size);
    flex: none;
}

.mark-house,
.mark-logo,
.mark-vintage {
    display: block;
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
}

.mark-logo,
.mark-vintage {
    display: none;
    object-fit: contain;
}

:root[data-mark-style="logos"] .mark-house {
    display: none;
}

:root[data-mark-style="logos"] .mark-logo {
    display: block;
}

:root[data-mark-style="vintage"] .mark-house {
    display: none;
}

:root[data-mark-style="vintage"] .mark-vintage {
    display: block;
}

/* Two-letter clubs (NE, KC, GB, SF, TB, NO, LV) would otherwise pull their
   nickname a character to the left and break the column. The abbreviation gets
   a fixed three-character box — `ch` is exact here because IBM Plex Mono is
   monospaced — plus the trailing letter-spacing each character carries. */
.team-abbr {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
    flex: none;
    display: inline-block;
    min-width: calc(3ch + 0.3em);
}

.team-nick {
    font-family: var(--font-serif);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.cell-rec {
    padding: 0.42rem 0.3rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* A record carrying forced results is a projection, not a fact. Italic mono
   plus a dotted rule is the printer's way of saying "provisional" — and it
   stays legible in both themes without spending any colour on it. */
.cell-rec.is-projected {
    font-style: italic;
    color: var(--ink);
    border-bottom: 1px dotted var(--ink-faint);
    cursor: help;
}

/* ---------- club colour, chosen per paper ----------
   js/ui/ink.js stamps --ink-a (cream) and --ink-b (dark) on each row, button
   and strip; the theme decides which one is in force. Several clubs are
   near-black and would print as a hole on the dark paper otherwise. */

.nf-row,
.pick,
.seed-strip {
    --team-ink: var(--ink-a, var(--ink));
}

:root[data-theme="dark"] .nf-row,
:root[data-theme="dark"] .pick,
:root[data-theme="dark"] .seed-strip {
    --team-ink: var(--ink-b, var(--ink));
}

/* ---------- the probability, washed across the cell ----------
   Sequential, which is what a magnitude wants: grey at the bottom walking to
   blue at the top, hue and intensity moving together so the ramp survives
   greyscale and colour-vision deficiency alike. (This started out diverging
   about the coin flip, which only works if even odds is a real midpoint.)

   Club colour is deliberately NOT used here any more. It is the identity
   channel; spending it on magnitude re-encoded what the figure already said,
   and left 32 unrelated hues competing across one table. Identity now lives
   only in the club's mark. */

:root {
    --heat-hi: #2a78d6;    /* certain */
    --heat-lo: #8d887e;    /* barely possible */
    --nil-line: rgba(109, 103, 94, 0.45);
}

:root[data-theme="dark"] {
    --heat-hi: #3987e5;
    --heat-lo: #6b665e;
    --nil-line: rgba(148, 143, 133, 0.42);
}

.cell-pct {
    position: relative;
    padding: 0.5rem 0.42rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--ink);
}

/* Capped at 0.6 so the figure keeps at least 5.3:1 against the wash in either
   theme — the point of the colour is to make the table scannable, and it fails
   at that the moment a number stops being readable. */
.cell-pct .tint {
    position: absolute;
    inset: 1px;
    background: color-mix(in srgb, var(--heat-hi) var(--heat-p, 0%), var(--heat-lo));
    opacity: var(--heat-a, 0);
    transition: opacity 0.35s ease, background-color 0.35s ease;
}

/* ---------- the key ---------- */

.heat-key {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.heat-key-label {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.heat-key-ramp {
    display: block;
    width: 5.5rem;
    height: 8px;
    border: 1px solid var(--hairline);
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--heat-hi) 60%, var(--paper)),
        color-mix(in srgb, var(--heat-lo) 22%, var(--paper))
    );
}

.cell-pct .num {
    position: relative;
}

.cell-pct.is-lock .num {
    font-weight: 700;
}

/* An outcome that never once happened keeps the same low grey as the start of
   the probability ramp, then gains ruling. The ruling is the different KIND of
   mark that stops zero being misread as merely unlikely — and it is the one
   distinction that survives greyscale printing and forced-colours mode, where
   every hue collapses. "<1" stays an ordinary, unhached low-ramp value.

   135deg puts the rules bottom-left to top-right. (A linear-gradient angle
   names the axis, and the bands sit perpendicular to it, so 45deg would lean
   the other way.) Widely spaced: the mark only has to register, and a dense
   hatch turns the cell into a solid block. */
.cell-pct.is-nil .tint {
    opacity: 1;
    background-color: transparent;
    background-image:
        repeating-linear-gradient(135deg, transparent 0 7px, var(--nil-line) 7px 8px),
        linear-gradient(
            color-mix(in srgb, var(--heat-lo) 20%, transparent),
            color-mix(in srgb, var(--heat-lo) 20%, transparent)
        );
}

.cell-pct.is-nil .num {
    color: var(--ink-mute);
}

@media (prefers-reduced-motion: reduce) {
    .cell-pct .tint { transition: none; }
}

/* Persistent cumulative change from the no-pick forecast. */
/* The only colours on the page that aren't a club's. Deliberately muted press
   inks rather than screen green/red, so they sit with the paper. The arrows
   already carry the direction — colour is reinforcement, not the sole signal. */
:root {
    --rise: #2f6b4f;
    --fall: #a33a2b;
}

:root[data-theme="dark"] {
    --rise: #6fbf95;
    --fall: #e0796a;
}

.delta.is-rise { color: var(--rise); }
.delta.is-fall { color: var(--fall); }

/* Anchored left, because the figures are set flush right — a flag over the
   right edge lands on top of the number it is annotating. */
.delta {
    position: absolute;
    top: 0.12rem;
    left: 0.14rem;
    padding: 0 0.08rem;
    font-family: var(--font-mono);
    font-size: 0.48rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: var(--ink-mute);
    background: color-mix(in srgb, var(--paper) 84%, transparent);
    border-radius: 1px;
    opacity: 0.94;
    pointer-events: none;
}

/* ---------- expanded detail: the seed distribution ---------- */

.nf-detail td {
    padding: 0;
    border-bottom: 1px solid var(--hairline);
    background: var(--paper-recessed);
}

.nf-detail[hidden] {
    display: none;
}

.seed-strip {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    padding: 0.5rem 0.65rem 0.65rem;
    box-shadow: inset 3px 0 0 var(--team-ink);
}

.seed-cell {
    position: relative;
    min-width: 0;
    text-align: center;
    padding: 0.18rem 0.32rem 0.52rem;
    border-left: 1px solid var(--hairline);
}

.seed-cell.is-context {
    display: none;
}

.seed-cell.is-seed1 {
    border-left: 0;
}

/* The detail is subordinate to the main odds row: use the same sequential
   colour scale on a slim rail rather than filling eight more table cells. */
.seed-cell::before {
    content: "";
    position: absolute;
    left: 0.32rem;
    right: 0.32rem;
    bottom: 0;
    height: 3px;
    background: color-mix(in srgb, var(--heat-hi) var(--heat-p, 0%), var(--heat-lo));
    opacity: var(--heat-a, 0);
}

.seed-label,
.seed-val {
    position: relative;
}

.seed-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.seed-val {
    display: block;
    font-family: var(--font-mono);
    margin-top: 0.08rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ink);
}

/* ---------- the picker ---------- */

.nf-picker {
    min-width: 0;
    overflow-anchor: none;
}

.nf-picker-inner {
    max-height: min(70vh, 44rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-anchor: none;
    scrollbar-gutter: stable;
    padding-right: 0.3rem;
}

@media (min-width: 62rem) {
    .nf-picker-inner {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
    }
}

.nf-week {
    margin: 0 0 1.3rem;
}

.nf-week h3 {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
    border-bottom: 1px solid var(--hairline-strong);
    padding-bottom: 0.25rem;
}

.nf-week h3 .wk-count {
    margin-left: auto;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}

/* ---------- full-width live scoreboard ---------- */

.nf-scoreboard {
    margin: 0.75rem 0 0;
    padding: 0.65rem 0.75rem 0.75rem;
    background: var(--paper-raised);
    border: 1px solid var(--hairline);
}

.nf-scoreboard[hidden] {
    display: none;
}

.nf-scoreboard-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--hairline);
}

.nf-scoreboard-head h2,
.nf-scoreboard-head p {
    margin: 0;
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.nf-scoreboard-head h2 {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
}

.nf-scoreboard-head p {
    font-size: 0.6rem;
    line-height: 1.35;
    letter-spacing: 0.08em;
    color: var(--ink-mute);
    text-align: right;
}

.nf-scoreboard[data-mode="live"] .nf-scoreboard-head h2 {
    color: var(--ink);
}

.nf-scoreboard.is-delayed .nf-scoreboard-head p {
    color: var(--ink-soft);
}

.nf-scoreboard-games {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.45rem;
}

.nf-scoreboard-game {
    position: relative;
    min-width: 0;
    padding: 0.4rem 0.48rem 0.42rem;
    background: var(--paper);
    border: 1px solid var(--hairline);
}

.nf-scoreboard-game.is-live,
.nf-scoreboard-game.is-halftime,
.nf-scoreboard-game.is-end {
    border-left: 3px solid var(--ink);
    padding-left: calc(0.48rem - 2px);
}

.nf-scoreboard-game-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
    margin: 0 0 0.28rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.nf-scoreboard-game-head b {
    color: var(--ink-mute);
    text-align: right;
}

.nf-scoreboard-game.is-live .nf-scoreboard-game-head b::before,
.nf-scoreboard-game.is-halftime .nf-scoreboard-game-head b::before,
.nf-scoreboard-game.is-end .nf-scoreboard-game-head b::before {
    content: "";
    display: inline-block;
    width: 0.38rem;
    height: 0.38rem;
    margin-right: 0.3rem;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 0.02rem;
    animation: nf-live-pulse 1.8s ease-in-out infinite;
}

@keyframes nf-live-pulse {
    50% { opacity: 0.3; }
}

.nf-scoreboard-team {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 0;
    margin: 0.12rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-mute);
}

.nf-scoreboard-team.is-winner {
    color: var(--ink);
}

.nf-scoreboard-club {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
}

.nf-scoreboard-site {
    min-width: 1.15em;
    color: var(--ink-mute);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0;
    text-align: right;
}

.nf-scoreboard-score {
    flex: none;
    min-width: 1.4em;
    color: inherit;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ---------- schedule filter ---------- */

.nf-filter {
    --nf-filter-control-height: 2rem;
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.55rem;
    margin: 0 0 1rem;
}

.nf-filter-menu {
    /* The disclosure is visually triggered here, but its open panel belongs
       to the complete schedule toolbar. Keeping this wrapper static lets the
       toolbar contain the panel at both edges instead of measuring a viewport-
       wide panel from the narrower trigger. */
    position: static;
    display: flex;
    flex: 1;
    min-width: 0;
}

.nf-filter-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    height: var(--nf-filter-control-height);
    min-height: var(--nf-filter-control-height);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-align: left;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--hairline-strong);
    border-radius: 0;
    padding: 0.35rem 0.5rem;
    white-space: nowrap;
    cursor: pointer;
}

.nf-filter-trigger [data-filter-summary] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nf-filter-trigger-mark,
.nf-filter-expand span {
    display: block;
    flex: none;
    width: 0.46rem;
    height: 0.46rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translate(-0.08rem, 0.08rem);
    transition: transform 0.12s ease;
}

.nf-filter-trigger[aria-expanded="true"] .nf-filter-trigger-mark {
    transform: rotate(225deg) translate(-0.08rem, 0.08rem);
}

.nf-filter-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    max-height: min(31rem, 68vh);
    overflow: auto;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--hairline-strong);
    box-shadow: 0 0.9rem 2.2rem rgba(0, 0, 0, 0.18);
}

.nf-filter-panel[hidden],
.nf-filter-clubs[hidden] {
    display: none;
}

.nf-filter-check {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.045em;
    line-height: 1.35;
    cursor: pointer;
}

.nf-filter-check:hover {
    background: var(--paper);
}

.nf-filter-check input {
    flex: none;
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
    accent-color: var(--ink);
    transform: translateY(0.12em);
    cursor: pointer;
}

.nf-filter-check-label {
    min-width: 0;
}

.nf-filter-all {
    border-bottom: 1px solid var(--hairline-strong);
    font-weight: 600;
}

.nf-filter-division + .nf-filter-division {
    border-top: 1px solid var(--hairline);
}

.nf-filter-division-head {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: stretch;
}

.nf-filter-division-head.is-selected {
    box-shadow: inset 2px 0 0 var(--ink);
}

.nf-filter-expand {
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--ink-mute);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.nf-filter-expand:hover {
    color: var(--ink);
    background: var(--paper);
}

.nf-filter-expand span {
    width: 0.38rem;
    height: 0.38rem;
    transform: rotate(-45deg);
}

.nf-filter-expand[aria-expanded="true"] span {
    transform: rotate(45deg) translate(-0.08rem, 0.08rem);
}

.nf-filter-division-check {
    padding-left: 0.25rem;
    font-weight: 600;
}

.nf-filter-division-check .nf-filter-check-label {
    flex: none;
}

.nf-filter-division-clubs {
    min-width: 0;
    overflow: hidden;
    color: var(--ink-faint);
    font-size: 0.54rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nf-filter-clubs {
    padding: 0.08rem 0 0.3rem 2rem;
    background: color-mix(in srgb, var(--paper) 58%, transparent);
    border-top: 1px dotted var(--hairline);
}

.nf-filter-club-check {
    min-height: 2rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-size: 0.62rem;
    font-weight: 400;
}

.nf-jump {
    flex: none;
    height: var(--nf-filter-control-height);
    min-height: var(--nf-filter-control-height);
    white-space: nowrap;
}

.nf-week[hidden],
.nf-game[hidden] {
    display: none;
}

/* ---------- byes ---------- */

.nf-bye {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.55rem;
    margin: 0.5rem 0 0;
    padding-top: 0.4rem;
    border-top: 1px dotted var(--hairline);
}

.nf-bye-label {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.nf-bye-club {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink-mute);
}

.nf-bye-club .mark {
    opacity: 0.65;
}

.nf-game {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.15rem minmax(0, 1fr);
    gap: 2px;
    margin-bottom: 0.4rem;
}

.nf-game-meta {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    min-width: 0;
    margin: 0;
    padding: 0.18rem 0.15rem 0.06rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.nf-game-time {
    color: var(--ink-mute);
    white-space: nowrap;
}

.nf-game-time.is-tbd {
    font-style: italic;
    color: var(--ink-mute);
}

.nf-game-context {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    color: var(--ink-mute);
}

.nf-game-live {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--ink);
    font-weight: 700;
    white-space: nowrap;
}

.nf-game-live[hidden] {
    display: none;
}

.nf-game-live::before {
    content: "";
    flex: none;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: currentColor;
    animation: nf-live-pulse 1.8s ease-in-out infinite;
}

.nf-game.is-international .nf-game-context {
    color: var(--ink-soft);
}

.pick {
    position: relative;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    min-height: 2.8rem;
    overflow: hidden;
    padding: 0.3rem 0.35rem 0.95rem;
    background: transparent;
    border: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink-mute);
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.pick-away { grid-column: 1; }
.pick-tie  { grid-column: 2; }
.pick-home { grid-column: 3; }

.pick-home {
    justify-content: flex-end;
}

.nf-home-marker {
    color: var(--ink-mute);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0;
}

.pick-tie {
    justify-content: center;
    padding: 0.3rem 0;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
}

/* Pregame win / tie / win estimates. The wrapper contributes no additional
   grid row: its three children sit as quiet footers inside the corresponding
   pick buttons, so each figure and meter read as part of one outcome control.
   The quantity meter uses the table's grey-to-blue language, never a club
   colour. It is built once with the game row; model changes mutate only text
   and custom properties. Change this block's display to none if preview
   ratings should be kept dark before the real rating artifact lands. */
.nf-game-odds {
    display: contents;
}

.nf-game-odds[hidden] {
    display: none;
}

.nf-game-odd {
    position: relative;
    grid-row: 2;
    align-self: end;
    z-index: 1;
    min-width: 0;
    margin: 0 1px 1px;
    padding: 0.06rem 0.15rem 0.16rem;
    pointer-events: none;
    color: var(--ink-mute);
    background: color-mix(in srgb, var(--paper-recessed) 42%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--hairline) 68%, transparent);
    font-family: var(--font-mono);
    font-size: 0.54rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
}

.nf-game-odd-away { grid-column: 1; }
.nf-game-odd-tie  { grid-column: 2; }
.nf-game-odd-home { grid-column: 3; }

.nf-game-odd::before,
.nf-game-odd::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 2px;
}

.nf-game-odd::before {
    right: 0;
    left: 0;
    background: var(--hairline);
    opacity: 0.5;
}

.nf-game-odd::after {
    left: 0;
    width: var(--heat-p, 0%);
    background: color-mix(in srgb, var(--heat-hi) var(--heat-p, 0%), var(--heat-lo));
    opacity: var(--heat-a, 0);
    transition: opacity 0.35s ease, background-color 0.35s ease;
}

.nf-game-odd-tie::after {
    left: 50%;
    transform: translateX(-50%);
}

.nf-game-odd-home::after {
    right: 0;
    left: auto;
}

/* A pick states the reader's scenario, not a changed model belief. Keep the
   original odds but quiet the rail so the selected button remains primary. */
.nf-game.is-picked .nf-game-odd::after {
    height: 1px;
    filter: saturate(0.25);
}

.pick:hover:not(:disabled) {
    border-color: var(--ink);
    color: var(--ink);
}

/* A forced result is the loudest thing in the column: the club's own colour,
   full strength, against the played weeks' near-grey. Text stays --ink over a
   0.3 wash rather than reversing out of the colour, because several clubs sit
   too close to the paper to carry light type. */
.pick[aria-pressed="true"] {
    border-color: var(--team-ink, var(--ink));
    box-shadow: inset 3px 0 0 var(--team-ink, var(--ink));
    color: var(--ink);
    background: color-mix(in srgb, var(--team-ink, var(--ink)) 30%, var(--paper));
}

.pick-home[aria-pressed="true"] {
    box-shadow: inset -3px 0 0 var(--team-ink, var(--ink));
}

.pick-tie[aria-pressed="true"] {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
    color: var(--ink);
    background: var(--paper-recessed);
}

.pick:disabled {
    cursor: default;
    opacity: 0.55;
}

/* Weeks already played recede: desaturated and dimmed, so the live part of
   the schedule is what the eye lands on. */
.nf-game.is-played {
    filter: saturate(0.12);
    opacity: 0.62;
}

.nf-game.is-played .pick {
    min-height: 2rem;
    padding-bottom: 0.3rem;
    border-color: transparent;
}

/* The result still has to be legible at a glance — the winner keeps full ink
   and a rule under it; the loser stays faint. */
.nf-game.is-played .pick.is-winner {
    color: var(--ink);
    font-weight: 700;
    border-bottom: 2px solid var(--ink-soft);
}

.nf-game.is-played .pick:not(.is-winner) {
    color: var(--ink-faint);
}

.nf-game.is-played .pick .score {
    color: var(--ink);
    font-weight: 700;
}

.pick .mark {
    flex: none;
}

.pick .score {
    font-weight: 400;
    color: var(--ink-faint);
}

/* In-progress scores are a display overlay only. The controls remain a
   hypothetical picker until the separately validated final snapshot reloads
   the season, so the live wash must never resemble a locked result. */
.nf-game.has-live-score {
    box-shadow: inset 2px 0 0 var(--ink-soft);
}

.nf-game.has-live-score .pick {
    min-height: 2rem;
    padding-bottom: 0.3rem;
    background: color-mix(in srgb, var(--paper-raised) 55%, transparent);
}

.nf-game.has-live-score .pick[aria-pressed="true"] {
    background: color-mix(in srgb, var(--team-ink, var(--ink)) 30%, var(--paper));
}

.nf-game.has-live-score .pick .score {
    color: var(--ink);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.nf-game.has-live-score .pick.is-leading .score {
    font-weight: 700;
}

/* ---------- footer ---------- */

.nf-colophon {
    margin-top: 1rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
    text-align: center;
}

.nf-colophon-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.nf-colophon-line p {
    margin: 0;
}

.nf-colophon-info {
    width: 1.35rem;
    height: 1.35rem;
}

.nf-colophon-actions {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.3rem;
}

.nf-mark-secret {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    padding: 0;
    color: var(--ink-faint);
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 50%;
    font-family: var(--font-serif);
    font-size: 0.72rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.nf-mark-secret:hover,
.nf-mark-secret:focus-visible,
.nf-mark-secret[data-mark-state="original"],
.nf-mark-secret[data-mark-state="vintage"] {
    color: var(--ink-mute);
    border-color: var(--hairline-strong);
    opacity: 1;
}

.nf-mark-secret:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* ---------- wide landscape dashboard ----------

   A 14-inch MacBook Pro presents roughly 1510 × 825 CSS pixels in Chrome.
   That is wide enough for a real three-column almanac, but the old 74rem cap
   spent a quarter of it on blank paper and then stacked AFC over NFC. At this
   deliberately width-and-height-gated breakpoint, the two conference tables
   sit beside one another and the schedule becomes the third, internally
   scrolling column. Shorter or narrower windows keep the roomier broadsheet
   layout instead of receiving a compressed imitation of this view. */

@media (min-width: 88rem) and (min-height: 48rem) {
    .nf-wrap {
        /* JS replaces this safe first-paint fallback with the probability
           section's measured height. Keeping one shared token makes the
           schedule's scroll edge follow the complete AFC/NFC tables exactly,
           including when a seed-distribution row opens. */
        --dashboard-height: 34.7rem;
        max-width: 112rem;
        padding: 0.6rem clamp(0.9rem, 1.5vw, 1.5rem) 0.75rem;
    }

    .nf-masthead {
        margin-bottom: 0.35rem;
    }

    .nf-masthead-inner {
        padding: 0.38rem 3.5rem 0.3rem;
    }

    .nf-masthead h1 {
        font-size: 2.1rem;
    }

    .nf-nav {
        margin-top: 0;
    }

    .toggle-rail {
        top: 0.32rem;
        right: 0.55rem;
    }

    .nf-controls {
        margin-top: 0.4rem;
        gap: 0.4rem 1rem;
        padding: 0.28rem 0.55rem;
    }

    .nf-controls-group {
        gap: 0.4rem 0.9rem;
    }

    .nf-fieldset {
        gap: 0.4rem;
    }

    .nf-btn {
        min-height: 1.65rem;
        padding: 0.25rem 0.62rem;
    }

    .nf-almanac {
        grid-template-columns: minmax(0, 1fr) clamp(23rem, 27vw, 26rem);
        height: var(--dashboard-height);
        min-height: 32rem;
        margin-top: 0.6rem;
    }

    .nf-almanac > section:first-child {
        min-width: 0;
        padding-right: 1.1rem;
    }

    .nf-picker {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        height: var(--dashboard-height);
        max-height: var(--dashboard-height);
        min-height: 0;
        overflow: hidden;
        padding-left: 1.1rem;
    }

    .nf-col-head {
        margin-bottom: 0.55rem;
        padding-bottom: 0.35rem;
    }

    .nf-probability-head {
        flex-wrap: nowrap;
    }

    .nf-probability-head .nf-dateline {
        order: initial;
        flex: 1 1 auto;
        min-width: 0;
        padding-top: 0;
    }

    .nf-col-head h2 {
        font-size: 1.2rem;
    }

    #tableRoot {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .nf-conf {
        min-width: 0;
        margin-bottom: 0;
    }

    .nf-conf h3 {
        margin-bottom: 0.1rem;
    }

    .nf-table th {
        padding: 0.34rem 0.2rem 0.3rem;
        font-size: 0.52rem;
        letter-spacing: 0.08em;
    }

    .nf-table {
        margin: 0.1rem 0 0;
    }

    .nf-table th.col-rec {
        width: 3.45rem;
    }

    .nf-table th.col-pct {
        width: 3.2rem;
    }

    .cell-team {
        gap: 0.35rem;
        padding: 0.2rem 0.28rem 0.2rem 0.35rem;
        line-height: 1;
    }

    .team-chip {
        gap: 0.32rem;
    }

    .team-abbr {
        min-width: calc(3ch + 0.24em);
        font-size: 0.6rem;
        letter-spacing: 0.08em;
    }

    .team-nick {
        font-size: 0.88rem;
        line-height: 1.05;
    }

    .team-div {
        padding-left: 0.25rem;
        font-size: 0.5rem;
        letter-spacing: 0.08em;
    }

    .cell-rec,
    .cell-pct {
        padding: 0.25rem 0.2rem;
        font-size: 0.64rem;
        line-height: 1;
    }

    .nf-filter {
        --nf-filter-control-height: 1.65rem;
        margin-bottom: 0.65rem;
    }

    .nf-filter-trigger {
        min-height: 1.65rem;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .nf-picker-inner {
        position: static;
        top: auto;
        height: auto;
        min-height: 0;
        max-height: none;
    }
}

/* ---------- responsive column shedding ---------- */

@media (max-width: 74rem) {
    .col-conf, .cell-conf { display: none; }
    .seed-strip {
        grid-template-columns: repeat(9, minmax(0, 1fr));
    }
    .seed-cell.is-conf {
        display: block;
        border-left: 0;
    }
    .seed-cell.is-seed1 {
        border-left: 1px solid var(--hairline);
    }
}

@media (max-width: 61.99rem) {
    .nf-controls-group,
    .nf-controls-scenario {
        width: 100%;
        min-width: 0;
    }

    .nf-controls-scenario {
        justify-content: flex-start;
        padding-top: 0.6rem;
        border-top: 1px solid var(--hairline);
    }

    .nf-section-nav {
        display: flex;
        margin-top: 0.75rem;
        border: 1px solid var(--hairline-strong);
    }

    .nf-section-nav button {
        flex: 1;
        min-height: 2.4rem;
        padding: 0.45rem 0.65rem;
        background: transparent;
        border: 0;
        font-family: var(--font-mono);
        font-size: 0.62rem;
        letter-spacing: 0.14em;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        color: var(--ink-mute);
        cursor: pointer;
    }

    .nf-section-nav button + button {
        border-left: 1px solid var(--hairline-strong);
    }

    .nf-section-nav button:hover {
        color: var(--ink);
        background: var(--paper-raised);
    }
}

@media (max-width: 52rem) {
    .col-seed1, .cell-seed1 { display: none; }
}

@media (max-width: 40rem) {
    .col-div, .cell-div { display: none; }
    .team-nick { font-size: 0.95rem; }
    .team-div { display: none; }

    .nf-btn,
    .nf-filter-trigger,
    .pick {
        min-height: 2.4rem;
    }

    .nf-filter {
        --nf-filter-control-height: 2.4rem;
    }

    .seed-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.6rem 0;
    }

    .seed-cell.is-division {
        display: block;
    }

    .seed-cell.is-conf {
        border-left: 1px solid var(--hairline);
    }

    .seed-cell:nth-child(4n + 1) {
        border-left: 0;
    }

    .nf-info-grid {
        grid-template-columns: 1fr;
    }

    .nf-info-dialog {
        padding: 1.15rem 1.1rem 1.2rem;
    }
}

@media (max-width: 30rem) {
    .nf-filter { flex-wrap: wrap; }
    .nf-filter-menu { flex-basis: calc(100% - 3rem); }
    .nf-jump {
        width: 100%;
        margin-left: 0;
    }

}

@media (max-width: 26rem) {
    .nf-wrap { padding-left: 0.7rem; padding-right: 0.7rem; }
    .nf-masthead-inner {
        padding: 0.75rem 5.45rem 0.65rem 0.5rem;
        text-align: left;
    }
    .nf-masthead h1 {
        font-size: clamp(1.55rem, 8.2vw, 1.75rem);
    }

    /* "Broncos" cannot fit beside a mark and three figures, and clipping it to
       nothing is worse than not printing it — show the abbreviation instead. */
    .team-nick { display: none; }
    .team-abbr { display: inline-block; font-size: 0.72rem; }

    .nf-table th.col-rec { width: 3.9rem; }
    .nf-table th.col-pct { width: 3.8rem; }
    .cell-pct { font-size: 0.72rem; padding: 0.42rem 0.3rem 0.5rem; }
    .nf-game {
        grid-template-columns: minmax(0, 1fr) 2.4rem minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .nf-scoreboard-game-head b::before,
    .nf-game-live::before { animation: none !important; }
    .nf-game-odd::after { transition: none; }
}