/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-fwgjju52is],
.components-reconnect-repeated-attempt-visible[b-fwgjju52is],
.components-reconnect-failed-visible[b-fwgjju52is],
.components-pause-visible[b-fwgjju52is],
.components-resume-failed-visible[b-fwgjju52is],
.components-rejoining-animation[b-fwgjju52is] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-fwgjju52is],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-fwgjju52is],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-fwgjju52is],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-fwgjju52is],
#components-reconnect-modal.components-reconnect-retrying[b-fwgjju52is],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-fwgjju52is],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-fwgjju52is],
#components-reconnect-modal.components-reconnect-failed[b-fwgjju52is],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-fwgjju52is] {
    display: block;
}


#components-reconnect-modal[b-fwgjju52is] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-fwgjju52is 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-fwgjju52is 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-fwgjju52is 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-fwgjju52is]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-fwgjju52is 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-fwgjju52is {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-fwgjju52is {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-fwgjju52is {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-fwgjju52is] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-fwgjju52is] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-fwgjju52is] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-fwgjju52is] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-fwgjju52is] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-fwgjju52is] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-fwgjju52is] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-fwgjju52is 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-fwgjju52is] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-fwgjju52is {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Dev/SpreadPreview.razor.rz.scp.css */
.preview[b-zbdvx3mneq] {
    margin-block: var(--space-6);
}

.preview__title[b-zbdvx3mneq] {
    font-size: var(--step-0);
    color: var(--fg-muted);
    margin-block-end: var(--space-2);
}

/* container-type is what the chart's reflow queries against, and it belongs on
   the card rather than on the chart itself -- the chart should respond to the
   space it is GIVEN. */
.preview__card[b-zbdvx3mneq] {
    container-type: inline-size;
    background: var(--surface-1);
    border: 1px solid var(--rule);
    border-radius: var(--radius-3);
    padding: var(--space-4);
}

.preview__card--narrow[b-zbdvx3mneq] {
    max-inline-size: 22rem;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.hero[b-su0cpyc5gu] {
    padding-block: var(--space-6) var(--space-7);
}

.hero__title[b-su0cpyc5gu] {
    font-size: var(--step-4);
    font-weight: 800;
    letter-spacing: -.01em;
    margin-block: var(--space-3);
}

.hero__accent[b-su0cpyc5gu] {
    color: var(--vegas);
}

.hero__lede[b-su0cpyc5gu] {
    max-inline-size: var(--measure);
    font-size: var(--step-1);
    color: var(--fg-muted);
}

.hero__actions[b-su0cpyc5gu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
}

.rules[b-su0cpyc5gu] {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    margin: 0;
}

.rules__item dt[b-su0cpyc5gu] {
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--wdth-display);
    font-weight: 700;
    font-size: var(--step-1);
    margin-block-end: var(--space-1);
}

.rules__item dd[b-su0cpyc5gu] {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--step--1);
}
/* /Components/Pages/LeagueBoard.razor.rz.scp.css */
.invite[b-tj703dsu5n] {
    margin-block-start: var(--space-6);
}

/* Read aloud and typed from screenshots, so it is set large, spaced, and in tabular figures. */
.invite__code[b-tj703dsu5n] {
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--wdth-display);
    font-size: var(--step-3);
    font-weight: 800;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    margin: 0;
}
/* /Components/Pages/Leagues.razor.rz.scp.css */
.lede[b-noxegz5hpl] {
    max-inline-size: var(--measure);
    margin-block-end: var(--space-6);
}

.league-list[b-noxegz5hpl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
    margin-block-end: var(--space-6);
}

.league-forms[b-noxegz5hpl] {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
/* /Components/Pages/Picks.razor.rz.scp.css */
/* One game at a time.
 *
 * The 2016 attempt at this was abandoned for two specific reasons, both recorded at the time: it
 * trapped you in a linear flow for a task people want to scan, and its single terminal SAVE button
 * put the whole week one navigation away from being lost. Neither applies here, and not by
 * accident. Every game commits on its own button, so there is nothing to lose by leaving; and the
 * summary step lists the week and jumps straight to any game in it, so the flow is linear by
 * default rather than by force.
 *
 * What the wizard buys in exchange is the thing the scrolling sheet could not do: the line for the
 * game in front of you cannot be read until you have guessed it, and you cannot page past a game to
 * go looking. */
.wizard[b-2df84y7tcr] {
    display: grid;
    gap: var(--space-4);
    margin-block-end: var(--space-8);
}

/* The scribe colour, same as the banner on /picks/for/{slug}, because this is the same act: putting
   words in somebody else's mouth. Quieter than the banner -- it is an offer, not a state you are
   already in. */
.scribe-offer[b-2df84y7tcr] {
    display: flex;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-block-end: var(--space-4);
    background: color-mix(in oklch, var(--scribe) 10%, var(--surface-1));
    border: 1px solid color-mix(in oklch, var(--scribe) 55%, transparent);
    border-radius: var(--radius-2);
    cursor: pointer;
}

.scribe-offer input[b-2df84y7tcr] {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-block-start: .15em;
    accent-color: var(--scribe);
    flex: none;
}

/* Guest play. Every colour here is a theme token and nothing is a literal, so both themes and the
   toggle follow by construction rather than by being checked twice. */

.guest-note[b-2df84y7tcr] {
    padding-inline-start: var(--space-3);
    border-inline-start: 2px solid var(--rule);
}

/* The ask, at the end of the week. Given the weight of a call to action rather than a notice,
   because it IS the next thing to do -- but kept below the week itself, which is what makes it
   worth doing. */
.guest-save[b-2df84y7tcr] {
    display: grid;
    gap: var(--space-3);
    border-color: color-mix(in oklch, var(--jeff) 45%, var(--rule));
}

.guest-save__actions[b-2df84y7tcr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
}

/* Wraps to its own line on a phone rather than being squeezed beside the buttons: it is the
   sentence somebody needs BEFORE pressing one of them. */
.guest-save__caveat[b-2df84y7tcr] {
    font-size: var(--step--1);
    max-inline-size: var(--measure);
}

.guest-claim[b-2df84y7tcr] {
    display: grid;
    gap: var(--space-2);
    margin-block-end: var(--space-5);
}

.wizard__intro[b-2df84y7tcr] {
    max-inline-size: var(--measure);
    margin-block-end: var(--space-5);
}

.wizard__progress[b-2df84y7tcr] {
    display: grid;
    gap: var(--space-2);
}

.wizard__count[b-2df84y7tcr] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0;
}

.wizard__tally[b-2df84y7tcr] {
    color: var(--fg-muted);
    letter-spacing: normal;
    text-transform: none;
}

.wizard__bar[b-2df84y7tcr] {
    block-size: 4px;
    background: var(--rail);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.wizard__bar-fill[b-2df84y7tcr] {
    block-size: 100%;
    background: var(--jeff);
    transition: inline-size var(--dur-2) var(--ease-out);
}

/* The standing guest reminder. Deliberately the quietest text on the page: it sits on every one of
   sixteen screens, so anything with more weight would read as nagging by game three. The link is the
   only part that lifts, and only on hover -- the notice itself is not asking for a click. */
.wizard__guest[b-2df84y7tcr] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--step--2);
    color: var(--fg-subtle);
}

.wizard__guest a[b-2df84y7tcr] {
    color: var(--fg-muted);
    text-underline-offset: .2em;
}

/* Guarded, because :hover is sticky on touch -- a tapped link stays lit for the rest of the week. */
@media (hover: hover) {
    .wizard__guest a:hover[b-2df84y7tcr] { color: var(--jeff); }
}

.wizard__nav[b-2df84y7tcr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* No longer a button in the action row -- it sat beside Submit and competed with the next game for
   the same press. Now a link inside the progress tally: reachable, because the Lock of the Week is
   on the summary and nothing else leads there, but plainly not the thing to do next. */
.wizard__review[b-2df84y7tcr] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--fg-muted);
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}

/* Guarded: :hover is sticky on touch, so an unguarded rule leaves it lit after a tap. */
@media (hover: hover) {
    .wizard__review:hover[b-2df84y7tcr] { color: var(--fg); }
}


.wizard__nav .btn:disabled[b-2df84y7tcr] {
    opacity: .4;
    cursor: not-allowed;
}
/* /Components/Pages/Stats.razor.rz.scp.css */
.board[b-pbbgnnof9y] {
    display: grid;
    gap: var(--space-4);
    /* Cards decide their own internal layout by container query, so the grid can
       simply fit as many as comfortably fit. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
    margin-block-end: var(--space-5);
}

.summary[b-pbbgnnof9y] {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    margin-block-end: var(--space-6);
}
/* /Components/Picks/LockPicker.razor.rz.scp.css */
.lock[b-udezp67r7e] {
    background: var(--surface-1);
    border: 1px solid var(--rule);
    border-radius: var(--radius-3);
    padding: var(--space-5);
    margin-block-end: var(--space-6);
}

.lock__head[b-udezp67r7e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block-end: var(--space-2);
}

.lock__head h2[b-udezp67r7e] {
    margin-inline-end: auto;
}

.lock__clock[b-udezp67r7e] {
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--wdth-display);
    font-size: var(--step-1);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding: .1em .5em;
    border-radius: var(--radius-2);
    background: var(--surface-2);
}

/* Colour alone would not carry this, so the last two minutes also get a pulse. */
.lock__clock.is-urgent[b-udezp67r7e] {
    background: var(--wayoff-bg);
    color: var(--wayoff);
    animation: lock-pulse-b-udezp67r7e 1s ease-in-out infinite;
}

@keyframes lock-pulse-b-udezp67r7e {
    50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .lock__clock.is-urgent[b-udezp67r7e] { animation: none; }
}

.lock__closed[b-udezp67r7e] {
    max-inline-size: var(--measure);
}

.lock__final[b-udezp67r7e] {
    margin: 0;
    font-size: var(--step-1);
}

.lock__intro[b-udezp67r7e] {
    max-inline-size: var(--measure);
    margin-block-end: var(--space-4);
}

.lock__list[b-udezp67r7e] {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    margin-block-end: var(--space-4);
}

.lock__game[b-udezp67r7e] {
    padding: var(--space-3);
    border: 1px solid var(--rule);
    border-radius: var(--radius-2);
}

.lock__game.is-chosen[b-udezp67r7e] {
    border-color: var(--jeff);
    background: color-mix(in oklch, var(--jeff) 8%, transparent);
}

.lock__matchup[b-udezp67r7e] {
    display: block;
    font-size: var(--step--1);
    color: var(--fg-muted);
    margin-block-end: var(--space-2);
}

.lock__sides[b-udezp67r7e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.lock__side[b-udezp67r7e] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 3rem;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-2);
    border: 2px solid transparent;
    border-radius: var(--radius-2);
    cursor: pointer;
    text-align: start;
    font-variant-numeric: tabular-nums;
}

.lock__side.is-on[b-udezp67r7e] {
    border-color: var(--jeff);
    background: var(--surface-1);
}

/* Same rule, and the same reasoning, as the team buttons on the pick control: hover feedback is a
   promise that clicking will do something, so it belongs only on the side you have not already
   backed. Without :not(.is-on) a bare :hover outranks .is-on on specificity and swaps the selected
   border for the idle one, so pointing at your own lock reads as cancelling it -- which there is a
   separate button for.

   Guarded on (hover: hover) because touch reports a sticky :hover, which would otherwise leave a
   tapped side looking hovered for the rest of the week. */
@media (hover: hover) {
    .lock__side:hover:not(:disabled):not(.is-on)[b-udezp67r7e] {
        border-color: var(--hover);
    }
}

.lock__side:disabled[b-udezp67r7e] {
    opacity: .5;
    cursor: not-allowed;
}

.lock__side b[b-udezp67r7e] {
    font-size: var(--step-1);
}

/* The instruction -- "give the points" / "take the points" -- pushed to its own line, because it is
   what actually tells you what the number means. */
.lock__side small[b-udezp67r7e] {
    flex-basis: 100%;
    color: var(--fg-muted);
    font-size: var(--step--2);
}

.lock__status[b-udezp67r7e] {
    margin-block-start: var(--space-3);
    font-size: var(--step--1);
    color: var(--fg-muted);
}

@container (max-width: 26rem) {
    .lock__sides[b-udezp67r7e] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Picks/PickCard.razor.rz.scp.css */
.pick-card[b-3rjxfn5gz9] {
    background: var(--surface-1);
    border: 1px solid var(--rule);
    border-radius: var(--radius-3);
    padding: var(--space-4);
    display: grid;
    gap: var(--space-3);
}

.pick-card.is-locked[b-3rjxfn5gz9] {
    background: var(--noline-bg);
}

.pick-card__head[b-3rjxfn5gz9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.pick-card__matchup[b-3rjxfn5gz9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
}

.pick-card__team[b-3rjxfn5gz9] {
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--wdth-display);
    font-weight: 700;
    font-size: var(--step-1);
    text-transform: uppercase;
}

/* Lighter than the name it follows in both senses asked for: subtle rather than full foreground, and
   back to the body face at normal weight, where the name is display-face at 700. It is context for
   the matchup, not part of it, and on a card whose actual job is the spread control below it must
   not pull the eye first.

   Kept on the baseline of the name rather than centred on it, so the two read as one line. */
.pick-card__record[b-3rjxfn5gz9] {
    font-family: var(--font-ui);
    font-variation-settings: 'wdth' var(--wdth-ui);
    font-weight: 400;
    font-size: var(--step--1);
    color: var(--fg-subtle);
    white-space: nowrap;
    margin-inline-start: calc(var(--space-2) * -0.5);
}

.pick-card__at[b-3rjxfn5gz9] {
    color: var(--fg-subtle);
    font-size: var(--step--1);
}

.pick-card__locked[b-3rjxfn5gz9] {
    color: var(--fg-subtle);
}

/* Two entries on one card. Separated by a rule rather than by spacing alone: these are two people's
   guesses at the same game, and mistaking one box for the other is silent and permanent. */
.pick-card__entry[b-3rjxfn5gz9] {
    display: grid;
    gap: var(--space-2);
}

.pick-card__entry--scribed[b-3rjxfn5gz9] {
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--rule);
}

.pick-card__whose[b-3rjxfn5gz9] {
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

/* The name in the colour it carries everywhere else, so the second box is identifiable at a glance
   rather than by reading it. */
.pick-card__whose--jeff[b-3rjxfn5gz9] {
    color: var(--jeff);
}

.entry[b-3rjxfn5gz9] {
    display: grid;
    gap: var(--space-2);
    justify-items: end;
}

.entry > .spread-input[b-3rjxfn5gz9] {
    inline-size: 100%;
}

/* Available, never suggested. Declining a game is legitimate and rare, so it should be findable
   without competing with the button everybody actually wants. */
.entry__skip[b-3rjxfn5gz9],
.entry__undo[b-3rjxfn5gz9] {
    color: var(--fg-subtle);
    border-color: transparent;
    font-size: var(--step--1);
    padding-block: var(--space-1);
}

@media (hover: hover) {
    .entry__skip:hover[b-3rjxfn5gz9] { color: var(--wayoff); }
    .entry__undo:hover[b-3rjxfn5gz9] { color: var(--fg); }
}

/* Marked, not yet submitted. Stated in the red it will keep once it is in, so the decision looks
   the same before and after committing it. */
.entry__skipped[b-3rjxfn5gz9] {
    inline-size: 100%;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--wayoff-bg);
    border: 1px solid var(--wayoff);
    border-radius: var(--radius-2);
    color: var(--wayoff);
}

/* A forfeited game. The same red as the control's "No pick" box, because it is the same fact. */
.pick-card__skipped[b-3rjxfn5gz9] {
    margin: 0;
    color: var(--wayoff);
    font-weight: 700;
}

.pick-card__where[b-3rjxfn5gz9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* The ordinary case is quiet: the venue is worth knowing but not worth announcing when it is the
   home team's own field, which it is for all but a handful of games a season. */
.venue[b-3rjxfn5gz9] {
    color: var(--fg-subtle);
    font-size: var(--step--1);
}

/* The exception is what gets the colour. A London kickoff or a neutral-site playoff changes how the
   line was set, so it should be impossible to skim past. */
.venue--away[b-3rjxfn5gz9] {
    padding: .15em .7em;
    border: 1px solid var(--venue);
    border-radius: var(--radius-pill);
    color: var(--venue);
    font-weight: 700;
}

/* U+2708 with U+FE0E, not the emoji form. The variation selector asks for the monochrome TEXT glyph,
   which inherits colour from the pill instead of arriving as a full-colour aeroplane that fights the
   token. Honoured on Windows and Android; Apple platforms may still paint their colour version, and
   that degrades to "a plane, slightly out of palette" rather than to anything broken. */
.venue__mark[b-3rjxfn5gz9] {
    margin-inline-end: .4em;
    font-size: .9em;
    /* Archivo has no glyph at U+2708, so this falls through to a system face either way. Naming the
       fallback keeps it off the display face's width axis, which would distort it. */
    font-family: system-ui, sans-serif;
}

.pick-card__status[b-3rjxfn5gz9] {
    margin: 0;
    font-size: var(--step--2);
    color: var(--fg-muted);
}
/* /Components/Picks/PickReveal.razor.rz.scp.css */
/* Three columns normally, four when the line moved between the two picks. Equal columns rather than
   auto, so the numbers line up down a sheet of games instead of shifting with the width of a team
   abbreviation. */
.reveal[b-9v0d4l8t68] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--rule);
    text-align: center;
}

.reveal--drifted[b-9v0d4l8t68] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Jeff's own sheet: you against the line, with nobody to beat. */
.reveal--pair[b-9v0d4l8t68] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reveal__cell[b-9v0d4l8t68] {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: var(--space-1);
    min-inline-size: 0;
}

/* The rule marks where one person's pairing ends and the other's begins -- it is the thing that
   says these are two different numbers rather than a typo. */
.reveal__cell--drifted[b-9v0d4l8t68] {
    border-inline-start: 1px solid var(--rule);
}

.reveal__label[b-9v0d4l8t68] {
    color: var(--fg-subtle);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Whose number it is, in the colour that means that person everywhere else on the site. */
.reveal__label--vegas[b-9v0d4l8t68] { color: var(--vegas); }
.reveal__label--opponent[b-9v0d4l8t68] { color: var(--jeff); }

.reveal__value[b-9v0d4l8t68] {
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--wdth-display);
    font-size: var(--step-1);
    font-weight: 700;
    white-space: nowrap;
}

.reveal__value--absent[b-9v0d4l8t68] {
    color: var(--fg-subtle);
}

.reveal__stamp[b-9v0d4l8t68] {
    color: var(--fg-subtle);
    font-size: var(--step--2);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.reveal__none[b-9v0d4l8t68] {
    margin: 0;
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--rule);
}

/* Four columns of "SEA −3.5" over "TUE 10:14 AM" do not fit a phone. Two rows of two keeps every
   pairing intact -- you beside your line, Jeff beside his -- which is the only property of this
   layout that actually matters.

   The three-column case is NOT reflowed with it. Two columns would leave Jeff alone on a second row
   opposite an empty cell, and he is the thing you are being compared against: the row is a
   comparison, and splitting it costs more than the crowding does. Three columns still fit 320px. */
@media (width < 34rem) {
    .reveal--drifted[b-9v0d4l8t68] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4) var(--space-3);
    }

    .reveal__cell--drifted[b-9v0d4l8t68] {
        border-inline-start: 0;
    }

    .reveal__value[b-9v0d4l8t68] {
        font-size: var(--step-0);
    }
}
/* /Components/Picks/SpreadInput.razor.rz.scp.css */
.spread-input[b-e3w9rs6ft4] {
    display: grid;
    gap: var(--space-3);
}

/* Dim the team buttons, never the value. Fading the whole control made the one thing the card is
   trying to say -- what happened to this game -- the hardest part of it to read. */
.spread-input.is-disabled .side[b-e3w9rs6ft4] {
    opacity: .55;
}

/* The three cells that carry the whole meaning: who, how much, who. The centre is wider so a
   two-digit half-point value never crowds its own box. */
.spread-input__pick[b-e3w9rs6ft4] {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: var(--space-2);
}

.side[b-e3w9rs6ft4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* Well above the 44px minimum: this and the value beside it are the whole control. */
    min-block-size: 5rem;
    padding: var(--space-2);
    background: var(--surface-2);
    border: 2px solid transparent;
    border-radius: var(--radius-2);
    color: var(--fg);
    font-size: var(--step-1);
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--dur-1) var(--ease-out);
}

/* Selection is carried by border AND background weight, never colour alone -- the two options are
   otherwise distinguished only by which team they name. It is also what licenses the signed number
   in the cell between them: the sign is never shown without a named side. */
.side.is-on[b-e3w9rs6ft4] {
    border-color: var(--jeff);
    background: var(--surface-1);
}

/* Hover feedback is a promise that clicking will do something, so it belongs only on the button
   that will -- whether nothing is chosen yet or the other side is. Choosing the side already chosen
   is deliberately a no-op, so the selected button holds its amber unchanged; a hover colour there
   would advertise an effect it does not have. The exclusion is also load-bearing on specificity: a
   bare .side:hover outranks .side.is-on, so without :not(.is-on) hovering your own choice would
   swap the selected border for the idle one and read as unselecting it.

   Yellow rather than a grey rule, because at two pixels on a dark surface a neutral border is
   almost invisible and the whole point is to say "this one is live". A different hue from --jeff on
   purpose: the two sit side by side, so "live" and "chosen" must not be mistakable.

   Guarded on (hover: hover) because touch reports a sticky :hover: tapping a team on a phone would
   otherwise leave it hovered for good. */
@media (hover: hover) {
    .side:hover:not(:disabled):not(.is-on)[b-e3w9rs6ft4] {
        border-color: var(--hover);
    }
}

.side:disabled[b-e3w9rs6ft4] {
    cursor: default;
}

/* Both the display and the field. There is no separate box to type into: the number you are
   looking at is the number you edit. */
.spread-input__value[b-e3w9rs6ft4] {
    inline-size: 100%;
    min-inline-size: 0;
    block-size: 5rem;
    padding: 0;
    text-align: center;
    background: var(--surface-1);
    color: var(--fg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-2);
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--wdth-display);
    font-size: var(--step-3);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.spread-input__value[b-e3w9rs6ft4]::placeholder {
    color: var(--fg-subtle);
    font-weight: 400;
}

/* A game that kicked off before it was guessed. Red because it is a result, not an empty field --
   the same red the scoreboard uses for a bad one. It borrows --wayoff rather than introducing a
   second red: two reds a shade apart would read as two different severities. */
.spread-input__value.is-missed[b-e3w9rs6ft4] {
    border-color: var(--wayoff);
    background: var(--wayoff-bg);
}

.spread-input__value.is-missed[b-e3w9rs6ft4]::placeholder {
    color: var(--wayoff);
    font-weight: 700;
    opacity: 1;
}

/* Read-only rather than disabled once committed: the pick is still the headline number on the
   card, so it keeps full contrast instead of being greyed out like a dead control. */
.spread-input__value:read-only[b-e3w9rs6ft4] {
    cursor: default;
}


/* One row, always. It reads as a scale running from "hard toward the away team" through pick 'em to
   "hard toward the home team", and wrapping it would destroy that. */
.nudge[b-e3w9rs6ft4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.4fr repeat(3, 1fr);
    gap: var(--space-2);
}

.nudge__step[b-e3w9rs6ft4] {
    min-block-size: 2.75rem;
    padding-inline: var(--space-1);
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-2);
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--dur-1) var(--ease-out);
}

.nudge__step:hover:not(:disabled)[b-e3w9rs6ft4] {
    border-color: var(--fg-subtle);
}

.nudge__step--pk[b-e3w9rs6ft4] {
    color: var(--fg-muted);
    font-weight: 700;
}

.nudge__step:disabled[b-e3w9rs6ft4] {
    opacity: .4;
    cursor: not-allowed;
}

/* Seven cells across a phone is the tight case. Tighten the gaps and the type rather than losing
   the single row. */
@media (width < 30rem) {
    .nudge[b-e3w9rs6ft4] {
        gap: var(--space-1);
    }

    .nudge__step[b-e3w9rs6ft4] {
        padding-inline: 0;
        font-size: var(--step--1);
    }

    .side[b-e3w9rs6ft4] {
        min-block-size: 4.25rem;
        font-size: var(--step-0);
    }

    .spread-input__value[b-e3w9rs6ft4] {
        block-size: 4.25rem;
        font-size: var(--step-2);
    }
}
/* /Components/Picks/WeekScorecard.razor.rz.scp.css */
.compare[b-tsnxh4suw3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
}

.compare__label[b-tsnxh4suw3] {
    color: var(--fg-muted);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Wide enough for a name, narrow enough that it does not read as the page's main control -- the
   table below it is. */
.compare__select[b-tsnxh4suw3] {
    inline-size: auto;
    min-inline-size: 14rem;
}

/* The week's four headline numbers. A description list rather than a row of divs, because that is
   what these are -- a term and its value -- and it survives being read aloud in order. */
.tally[b-tsnxh4suw3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
}

.tally__item[b-tsnxh4suw3] {
    padding: var(--space-3);
    background: var(--surface-2);
    border-radius: var(--radius-2);
}

.tally__item dt[b-tsnxh4suw3] {
    color: var(--fg-muted);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tally__value[b-tsnxh4suw3] {
    margin: var(--space-1) 0 0;
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--wdth-display);
    font-size: var(--step-2);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Colour on the count, not on a pill: these are figures to be read, and a filled shape at this size
   would shout louder than the record beside it. */
.tally__value--good[b-tsnxh4suw3] { color: var(--nailed); }
.tally__value--bad[b-tsnxh4suw3] { color: var(--wayoff); }

.tally__note[b-tsnxh4suw3] {
    margin: 0;
    color: var(--fg-subtle);
    font-size: var(--step--2);
}

/* Seven columns of spreads do not fit a phone, and squeezing them would make every number harder
   to read to save a scroll. The table keeps its natural width and the container scrolls -- the
   first column carries the game, so what you scroll away from is a label you already read. */
.scorecard[b-tsnxh4suw3] {
    overflow-x: auto;
    margin-block-start: var(--space-4);
    /* Room for the focus ring on the jump buttons, which the overflow would otherwise clip. */
    padding: 2px;
}

.scorecard__table[b-tsnxh4suw3] {
    /* Beats the container's shrink-to-fit, so the columns size to their content and scroll rather
       than compressing. */
    min-inline-size: 100%;
    inline-size: max-content;
}

/* Row headers are the game, and inherit the table's first-column alignment. Reset the weight the
   browser gives th so a picked row does not read as more important than an unpicked one. */
.scorecard__table th[scope='row'][b-tsnxh4suw3] {
    font-weight: 400;
}

.scorecard__jump[b-tsnxh4suw3] {
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-weight: 700;
    line-height: 1.25;
    text-align: start;
    cursor: pointer;
}

/* A guess is two cells, not one. The mark sits hard against the number and the number keeps its own
   column, so sixteen spreads line up regardless of how wide each logo happens to be. */
.scorecard__mark[b-tsnxh4suw3] {
    inline-size: 1px;               /* shrink to the image */
    padding-inline-end: var(--space-2);
    line-height: 0;                 /* no descender gap under the mark */
}

.scorecard__number[b-tsnxh4suw3] {
    padding-inline-start: 0;
    font-variant-numeric: tabular-nums;
}

/* The market's number, after the home team, where its sign reads as that team's own line. */
.scorecard__line[b-tsnxh4suw3] {
    color: var(--fg-muted);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (hover: hover) {
    .scorecard__jump:hover[b-tsnxh4suw3] {
        color: var(--hover);
    }
}

/* A game still open and unguessed. Quiet rather than absent: the row has to be there to be clicked,
   but it is not telling you anything yet. */
.scorecard__todo[b-tsnxh4suw3] {
    color: var(--fg-subtle);
}

/* One that kicked off first. The same red as the pick control's "No pick" box, because it is the
   same fact. */
.scorecard__missed[b-tsnxh4suw3] {
    color: var(--wayoff);
    font-weight: 700;
}
/* /Components/Scoreboard/BreakdownTable.razor.rz.scp.css */
/* The second footer row: the total the season ranking is actually computed from, sitting under the
   total of every row shown. Two "Total"-weight rows would read as a duplicate, so this one is muted
   and separated -- it is a reconciliation, not a competing headline. */
.counted th[b-l2tzblvish],
.counted td[b-l2tzblvish] {
    font-weight: 600;
    color: var(--fg-muted);
    border-block-start: 1px solid var(--rule);
}
/* /Components/Scoreboard/GameCard.razor.rz.scp.css */
/* The chart's reflow queries against THIS box, so a card in a two-up grid
   behaves like one on a phone rather than reading the viewport. */
.game-card[b-36omhqcla9] {
    container-type: inline-size;
    background: var(--surface-1);
    border: 1px solid var(--rule);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-1);
    padding: var(--space-4);
    position: relative;
    overflow: hidden;
}

/* Team colour is used for an edge accent only, never behind text. NFL primaries
   run from near-black to bright yellow, so anything else needs normalising. */
.game-card[b-36omhqcla9]::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 3px;
    background: var(--team, var(--rule));
}

.game-card.is-nailed[b-36omhqcla9] { background: var(--nailed-bg); }
.game-card.is-wayoff[b-36omhqcla9] { background: var(--wayoff-bg); }
.game-card.is-ungraded[b-36omhqcla9] { background: var(--noline-bg); }

.game-card__teams[b-36omhqcla9] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
}

.team[b-36omhqcla9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
}

/* Away reads outward-in from the left, home inward-out to the right, so the two
   logos frame the score. */
.team--away[b-36omhqcla9] { justify-content: flex-start; }
.team--home[b-36omhqcla9] { justify-content: flex-end; }
.team--home .team__name[b-36omhqcla9] { text-align: end; }

.team__name[b-36omhqcla9] {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.team__city[b-36omhqcla9] {
    font-size: var(--step--2);
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.team__nick[b-36omhqcla9] {
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--wdth-display);
    font-weight: 700;
    font-size: var(--step-1);
    text-transform: uppercase;
    line-height: 1;
}

.game-card__middle[b-36omhqcla9] { text-align: center; }

.game-card__score[b-36omhqcla9] {
    display: flex;
    align-items: baseline;
    gap: .25em;
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--wdth-display);
    font-size: var(--step-3);
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

.game-card__dash[b-36omhqcla9] { color: var(--fg-subtle); font-weight: 400; }

.game-card__at[b-36omhqcla9] {
    font-size: var(--step-0);
    color: var(--fg-subtle);
    margin: 0;
}

.game-card__when[b-36omhqcla9] {
    margin-block-start: var(--space-1);
    white-space: nowrap;
}

.game-card__result[b-36omhqcla9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--rule);
}

.game-card__h2h[b-36omhqcla9] {
    font-size: var(--step--2);
    color: var(--fg-muted);
}

.team-logo[b-36omhqcla9] { flex: none; }

@container (max-width: 26rem) {
    .team__nick[b-36omhqcla9] { font-size: var(--step-0); }
    .game-card__score[b-36omhqcla9] { font-size: var(--step-2); }
    .team-logo[b-36omhqcla9] { inline-size: 34px; block-size: 34px; }
}

@container (max-width: 20rem) {
    /* The city is the first thing that can go -- the nickname and logo already
       identify the team. */
    .team__city[b-36omhqcla9] { display: none; }
}
/* /Components/Scoreboard/LockDonut.razor.rz.scp.css */
.donut[b-ek5ecmfwe0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    margin: 0;
}

.donut__svg[b-ek5ecmfwe0] {
    inline-size: min(100%, 14rem);
    flex: none;
}

.donut__hole[b-ek5ecmfwe0] {
    fill: none;
    stroke: var(--rail);
    stroke-width: 4;
}

.donut__seg[b-ek5ecmfwe0] {
    fill: none;
    stroke: var(--seg);
    stroke-width: 4.6;
    stroke-linecap: butt;
}

.donut__total[b-ek5ecmfwe0] {
    fill: var(--fg);
    font-size: 6px;
    font-weight: 800;
    text-anchor: middle;
    font-variant-numeric: tabular-nums;
}

.donut__sub[b-ek5ecmfwe0] {
    fill: var(--fg-subtle);
    font-size: 2.2px;
    letter-spacing: .3px;
    text-anchor: middle;
}

.donut__legend[b-ek5ecmfwe0] {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--step--1);
}

.donut__legend li[b-ek5ecmfwe0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.donut__swatch[b-ek5ecmfwe0] {
    inline-size: .75em;
    block-size: .75em;
    border-radius: 2px;
    background: var(--seg);
    flex: none;
}
/* /Components/Scoreboard/SpreadChart.razor.rz.scp.css */
/* `1fr auto 1fr` is what actually guarantees the centre axis stays centred: the
   label column takes whatever width it needs and the two tracks split the rest
   evenly, so a long label cannot shift the axis off-centre. */
.spread[b-gc9pqlezi0] {
    --bar-h: clamp(0.7rem, 3.5cqi, 1.2rem);

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    row-gap: var(--space-2);
    /* Deliberately no column gap. Every bar is measured from the centre axis, so
       a gap would add the same constant offset to all of them and make short
       lines look further from zero than they are. The label's own padding
       provides the breathing room instead, and its borders ARE the axis. */
    column-gap: 0;
    margin-block: var(--space-4);
}

/* Each row carries its own --fill and --bar but must still participate in the
   parent's three columns, which is exactly what display: contents does. */
.spread__row[b-gc9pqlezi0] {
    display: contents;
}

.spread__track[b-gc9pqlezi0] {
    display: flex;
    block-size: var(--bar-h);
    /* A hairline rail, so an empty side still reads as a scale rather than as
       missing content. */
    background: linear-gradient(var(--rail) 0 0) no-repeat center / 100% 1px;
}

.spread__track--away[b-gc9pqlezi0] {
    justify-content: flex-end;      /* grows leftward from the axis */
}

.spread__track--home[b-gc9pqlezi0] {
    justify-content: flex-start;    /* grows rightward from the axis */
}

.spread__fill[b-gc9pqlezi0] {
    inline-size: calc(var(--fill, 0) * 1%);
    block-size: 100%;
    background: var(--bar);
    border-radius: 2px;
    transition: inline-size var(--dur-2) var(--ease-out);
}

/* Past the 30-point scale the bar is pinned, and says so with a pointed end
   rather than pretending the value fits. */
.spread__fill.is-over[b-gc9pqlezi0] {
    clip-path: polygon(0 0, calc(100% - .45rem) 0, 100% 50%, calc(100% - .45rem) 100%, 0 100%);
}

.spread__track--away .spread__fill.is-over[b-gc9pqlezi0] {
    clip-path: polygon(.45rem 0, 100% 0, 100% 100%, .45rem 100%, 0 50%);
}

.spread__label[b-gc9pqlezi0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1em;
    min-inline-size: 7rem;
    margin: 0;
    padding-inline: var(--space-3);
    /* The axis itself, drawn as the label's two edges. */
    border-inline: 1px solid var(--rule);
    line-height: 1.05;
}

.spread__who[b-gc9pqlezi0] {
    font-size: var(--step--2);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.spread__val[b-gc9pqlezi0] {
    font-size: var(--step-0);
    font-weight: 650;
    white-space: nowrap;
}

/* Reflow is driven by the CARD's width, not the viewport's, so a card sitting in
   a two-up desktop grid behaves like one on a phone. The 2014 version hard-coded
   a 20px bar height, which is why it only ever looked right at 800px. */
@container (max-width: 26rem) {
    .spread__label[b-gc9pqlezi0] {
        min-inline-size: 0;
        padding-inline: var(--space-2);
    }

    /* The row colour and the legend already carry this. */
    .spread__who[b-gc9pqlezi0] {
        display: none;
    }

    .spread__val[b-gc9pqlezi0] {
        font-size: var(--step--1);
    }
}

@container (max-width: 18rem) {
    /* Last resort: label above its own pair of tracks. */
    .spread__row[b-gc9pqlezi0] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .spread__label[b-gc9pqlezi0] {
        grid-column: 1 / -1;
        flex-direction: row;
        gap: .4em;
        border-inline: 0;
        order: -1;
    }

    .spread__who[b-gc9pqlezi0] {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spread__fill[b-gc9pqlezi0] {
        transition: none;
    }
}
/* /Components/Shared/Stat.razor.rz.scp.css */
.stat[b-ax6bp5on2z] {
    text-align: center;
}

.stat__value[b-ax6bp5on2z] {
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--wdth-display);
    font-size: var(--step-3);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.stat__label[b-ax6bp5on2z] {
    margin-block-start: var(--space-1);
}
/* /Components/Standings/StandingsTable.razor.rz.scp.css */
.rank[b-7yk95sol7g] {
    text-align: end;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}

.who[b-7yk95sol7g] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 650;
}

.benchmark[b-7yk95sol7g] {
    background: color-mix(in oklch, var(--jeff) 22%, transparent);
    color: var(--fg);
}

.unranked[b-7yk95sol7g] {
    margin-block-start: var(--space-3);
    font-size: var(--step--1);
}

/* A non-zero skip count, or a week set aside, is not an error and must not read as one -- it is a
   legitimate entry that happens to be partial. Weighted rather than coloured for that reason: enough
   to stop the eye, and deliberately not the wayoff red, which on this site means a bad guess. */
.is-partial[b-7yk95sol7g] {
    font-weight: 700;
    color: var(--fg);
}