/* ==========================================================================
   QB SPY
   Layout follows the wireframe in Untitled_Artwork-4.png: a top bar, a rail of
   followed players/teams, an empty rail either side of a center feed, and a
   bottom tab bar. Everything black on white for now.
   ========================================================================== */

/* The two faces, served by us.
 *
 * These came from Google on every visit, which cost two more names to look
 * up and two more connections to open before a single letter could be drawn —
 * and told a third party who was reading, on every page, before the page had
 * done anything.
 *
 * Both are the same files Google serves, and both are open-licenced, so
 * holding them here changes nothing but where they come from. They are
 * variable fonts: one file covers every weight of a family, which is why
 * there are two files and not five. Only the latin cut is kept — the Greek,
 * Cyrillic and Vietnamese ones were being offered and no card has ever set a
 * word in them.
 *
 * swap, so the card is readable in the fallback before the face lands. */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/archivo.woff2") format("woff2");
}

@font-face {
    font-family: "Caveat";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/caveat.woff2") format("woff2");
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* The top bar, the follow rail and the tab bar are pinned. The page itself
   never scrolls — only the feed in the middle does. */
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    overflow: hidden;
    background: #ffffff;
    color: #111111;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.site-header,
.chip-rail,
.tab-bar {
    flex: none;
}

/* Shared look for every stroked icon button on the page. */
.icon-btn,
.login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
}

.icon-btn svg,
.login-btn svg,
.chip__circle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== Top bar ============================================================ */

/* The mark needs room under it: the follow strip sits directly below and
   the two ran together. */
.site-header {
    display: flex;
    align-items: center;
    padding: 14px 20px 18px;
    border-bottom: 1px solid #e6e6e6;
}

.site-header__home {
    display: inline-flex;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.site-header__logo {
    display: block;
    height: 34px;
    width: auto;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.login-btn {
    width: 36px;
    height: 36px;
    border: 1.5px solid #d4d4d4;
    border-radius: 8px;
}

/* ===== Chip rail ==========================================================
   Scrolls sideways once there are more followed players than fit. */

.chip-rail {
    border-bottom: 1px solid #e6e6e6;
    overflow-x: auto;
}

.chip-rail__list {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 16px 20px 12px;
    list-style: none;
}

.chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.chip__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    background: none;
    border: 1.5px solid #d4d4d4;
    border-radius: 22%;
    color: inherit;
    cursor: pointer;
}

.chip__circle--add {
    border-color: #111111;
}

.chip__label {
    font-size: 11px;
    line-height: 1.4;
}

/* ===== Body ===============================================================
   The side rails are empty on purpose — they are the hatched blocks in the
   wireframe, kept as space until there is something to put there. */

/* The rails were sized for the news feed and squeezed every other panel into
   620px. The column is full width now; only the feed itself is narrowed. */
.layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 20px;
    overflow: hidden;
}

.rail {
    display: none;
}

.rail {
    min-height: 1px;
}

/* The one scrolling region on the page. Kept narrow — long text is unreadable
   across a wide window — while the lists beside it use the full width. */
.feed {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    min-width: 0;
    padding: 20px 0;
    overflow-y: auto;
}

/* ===== Blog post ======================================================= */

.post {
    padding-bottom: 16px;
    border-bottom: 1px solid #e6e6e6;
}

/* Stand-in for the article photo. */
.post__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    color: #9a9a9a;
    font-size: 32px;
    letter-spacing: 0.08em;
}

.post__title {
    margin: 14px 0 4px;
    font-size: 19px;
    line-height: 1.3;
}

.post__meta {
    margin: 0;
    color: #6b6b6b;
    font-size: 13px;
}

.post__actions {
    display: flex;
    align-items: center;
    margin-top: 14px;
}

.post__tools {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

/* Emoji left on the post, then the total. */
.reactions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: none;
    border: 1.5px solid #d4d4d4;
    border-radius: 14px;
    color: inherit;
    font-size: 13px;
    cursor: pointer;
}

.reactions__emoji {
    font-size: 15px;
    line-height: 1;
}

.reactions__count {
    color: #6b6b6b;
}

/* A count sitting beside an icon, like the comment total. */
.icon-btn--counted {
    gap: 6px;
}

.icon-btn__count {
    color: #6b6b6b;
    font-size: 13px;
}

/* ===== Bottom tab bar ===================================================== */

.tab-bar {
    background: #ffffff;
    border-top: 1px solid #e6e6e6;
}

.tab-bar__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tab-bar__list li {
    flex: 1;
    /* Divider between tabs, as drawn in the wireframe. */
    border-left: 1px solid #e6e6e6;
}

.tab-bar__list li:first-child {
    border-left: none;
}

/* Three of the five go to a tab and are links; Favorites and Search open a
   screen and are buttons. They read the same either way. */
.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 100%;
    padding: 10px 8px;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.tab__icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The tab you are on gets a heavier line, not a fill — filling the outlined
   icons turns them into solid blocks. */
.tab--on .tab__icon {
    stroke-width: 2.2;
}

.tab--on {
    font-weight: 700;
}

/* ===== Reactions breakdown sheet ==========================================
   Sits against the bottom of the screen: the heading and total on the left,
   a close button on the right, then one row per emoji with its count. */

.sheet {
    width: min(520px, calc(100% - 40px));
    max-width: none;
    /* auto all round centers it in the viewport. */
    margin: auto;
    padding: 0;
    background: #ffffff;
    color: inherit;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.sheet::backdrop {
    background: rgba(0, 0, 0, 0.35);
}

.sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #e6e6e6;
}

.sheet__title {
    margin: 0;
    font-size: 18px;
}

.sheet__total {
    margin: 2px 0 0;
    color: #6b6b6b;
    font-size: 13px;
}

.sheet__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.reaction-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid #f0f0f0;
}

.reaction-row:first-child {
    border-top: none;
}

.reaction-row__emoji {
    font-size: 22px;
    line-height: 1;
}

.reaction-row__count {
    font-size: 15px;
}

/* ===== Preset emoji picker ================================================
   The four presets, in a pill to the left of the smiley that opened them. */

.react {
    position: relative;
    display: inline-flex;
}

.emoji-picker {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    padding: 5px 8px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

/* display:flex would otherwise beat the hidden attribute. */
.emoji-picker[hidden] {
    display: none;
}

.emoji-picker__btn {
    padding: 2px 4px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

/* ===== Options rows ======================================================= */

.option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 20px;
    background: none;
    border: none;
    border-top: 1px solid #f0f0f0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sheet__list li:first-child .option {
    border-top: none;
}

.option__icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.option--warn {
    color: #d32f2f;
}

/* ===== Comments screen ====================================================
   A dialog that covers everything: bar, article, thread, comment box. */

.screen {
    display: flex;
    flex-direction: column;
    /* Every screen is the size of the Add Favorites sheet, so opening a
       player, a game or a team feels like the same window. */
    width: min(560px, calc(100% - 40px));
    max-width: none;
    height: min(620px, calc(100% - 40px));
    max-height: none;
    margin: auto;
    padding: 0;
    background: #ffffff;
    color: inherit;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

/* display:flex above beats the browser rule that hides a shut dialog, so the
   closed state has to be spelled out or the screen shows on load. */
.screen:not([open]) {
    display: none;
}

/* The card somebody was sent, when he arrives on it. A ring that fades
   rather than a colour that stays: it has to say which one without becoming
   a thing he has to get rid of. */
.factcard--landed {
    animation: card-landed 2.4s ease-out;
}

@keyframes card-landed {
    0%, 60% {
        box-shadow: 0 0 0 3px #ffb020, 0 8px 30px rgba(255, 176, 32, 0.25);
    }
    100% {
        box-shadow: 0 0 0 3px rgba(255, 176, 32, 0), 0 8px 30px rgba(255, 176, 32, 0);
    }
}

/* ---- A screen is a sheet ----

   On a phone these were windows floating in the middle with a margin all
   round, which is not how anything else on the phone opens. They come up
   from the bottom instead: full width, stopping short of the top so the page
   is still there behind them, a handle to say they can be pulled, and a pull
   downward that takes them away.

   The pull only drags when the thing under the finger is already scrolled to
   its top — mid-content the same movement is a scroll, which is what it
   looks like it should be. */
@media (max-width: 700px) {
    /* screen--wide sets a width of its own further down the file and would
       otherwise win on specificity, leaving the player, team and matchup
       screens floating in the middle while every other screen became a
       sheet. They are the three this was asked for. */
    /* dialog.screen, not .screen: `.screen--wide` sets a width of its own
       eight hundred lines further down, and a media query adds no
       specificity — so the plain class lost to it and the player, team and
       matchup screens stayed floating in the middle at 100% - 40px while
       every other screen became a sheet. The tag settles it. */
    dialog.screen,
    dialog.screen--wide,
    dialog.sheet,
    dialog.sheet--tall {
        width: 100%;
        max-width: 100%;
        height: 92vh;
        margin: auto 0 0;
        padding-top: 20px;
        border: 0;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.28);
        animation: sheet-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* A tray of four reactions has no business being as tall as a player's
       whole page. The short ones take the room they need and stop; only the
       ones with a list in them go full height. */
    dialog.sheet:not(.sheet--tall) {
        height: auto;
        max-height: 92vh;
    }

    dialog.screen::before,
    dialog.screen--wide::before,
    dialog.sheet::before,
    dialog.sheet--tall::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        width: 36px;
        height: 5px;
        margin-left: -18px;
        background: rgba(0, 0, 0, 0.18);
        border-radius: 999px;
    }

    /* While a finger is on it there is no animation to fight. */
    dialog.screen--dragging {
        animation: none;
        transition: none;
    }

    /* And when it is let go it either falls back into place or leaves. */
    dialog.screen--settling {
        animation: none;
        transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
    }
}

@keyframes sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.screen::backdrop {
    background: rgba(0, 0, 0, 0.35);
}

.screen__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    padding: 12px 20px;
}

.screen__article {
    flex: none;
    padding: 0 20px 14px;
    border-bottom: 1px solid #e6e6e6;
}

.screen__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 21 / 6;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    color: #9a9a9a;
    font-size: 26px;
    letter-spacing: 0.08em;
}

.screen__title {
    margin: 12px 0 6px;
    font-size: 19px;
    line-height: 1.3;
}

.screen__links {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.screen__count {
    color: #6b6b6b;
    font-size: 14px;
}

.link {
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

/* The thread is the part that scrolls. */
.thread {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.comment {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.comment__avatar {
    flex: none;
    width: 30px;
    height: 30px;
    border: 1.5px solid #d4d4d4;
    border-radius: 7px;
}

.comment__body {
    flex: 1 1 auto;
    min-width: 0;
}

.comment__head {
    margin: 0 0 3px;
    font-size: 14px;
}

.comment__name {
    font-weight: 700;
}

.comment__time {
    color: #6b6b6b;
}

.comment__text {
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 1.4;
}

.comment__tools {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}

.reply {
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

/* ===== Leave a comment ==================================================== */

.leave {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 12px 20px;
    border-top: 1px solid #e6e6e6;
}

/* The placeholder carries the wording, so the label is for screen readers. */
.leave__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.leave__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    background: #f4f4f4;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    color: inherit;
    font: inherit;
    font-size: 15px;
}

.leave__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 1.5px solid #d4d4d4;
    border-radius: 12px;
    color: inherit;
    cursor: pointer;
}

.leave__send svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== My Account ========================================================= */

/* Back button, centered title, then an empty box the same width as the button
   so the title sits dead center. */
.screen__bar--titled {
    display: grid;
    grid-template-columns: minmax(76px, auto) 1fr minmax(76px, auto);
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
}

.screen__bar--titled > :first-child {
    justify-self: start;
}

.screen__bar--titled > :last-child {
    justify-self: end;
}

.screen__heading {
    margin: 0;
    font-size: 16px;
    text-align: center;
}

.account {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px 20px 24px;
    overflow-y: auto;
}

.account__intro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.account__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 54px;
    height: 54px;
    border: 1.5px solid #d4d4d4;
    border-radius: 10px;
}

.account__avatar svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: #9a9a9a;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.account__title {
    margin: 0 0 4px;
    font-size: 17px;
}

.account__blurb {
    margin: 0;
    color: #6b6b6b;
    font-size: 14px;
    line-height: 1.45;
}

/* Log in and create account share the row. */
.account__auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 18px 0;
}

.btn {
    padding: 13px 16px;
    background: #f4f4f4;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    color: inherit;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

.btn--primary {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

/* ===== Settings rows ====================================================== */

.rows {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    overflow: hidden;
}

.rows:last-child {
    margin-bottom: 0;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    border-top: 1px solid #f0f0f0;
    color: inherit;
    font: inherit;
    text-align: left;
}

.rows li:first-child .row,
.rows li:first-child.row {
    border-top: none;
}

.row--link {
    cursor: pointer;
}

.row__text {
    display: block;
}

.row__label {
    display: block;
    font-size: 15px;
}

.row__note {
    display: block;
    margin-top: 3px;
    color: #6b6b6b;
    font-size: 13px;
    line-height: 1.4;
}

.row__chevron {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #9a9a9a;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== Toggle =============================================================
   A checkbox restyled into a switch, so it still works with the keyboard. */

.switch {
    position: relative;
    flex: none;
    width: 46px;
    height: 27px;
    margin: 0;
    background: #d4d4d4;
    border-radius: 999px;
    appearance: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 21px;
    height: 21px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.switch:checked {
    background: #111111;
}

.switch:checked::after {
    transform: translateX(19px);
}

/* ===== Forms ==============================================================
   Fields at the top, the submit button held against the bottom edge. */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px;
}

.form__fields {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.field {
    margin: 0 0 14px;
}

.input {
    display: block;
    width: 100%;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    color: inherit;
    font: inherit;
    font-size: 15px;
}

.input::placeholder {
    color: #9a9a9a;
}

.input:focus {
    border-color: #111111;
    outline: none;
}

.btn--block {
    display: block;
    width: 100%;
    margin-top: 16px;
}

/* Dimmed until every field is filled in. */
.btn:disabled {
    opacity: 0.45;
    cursor: default;
}

/* A hidden element stays hidden even when a rule below gives it a display. */
[hidden] {
    display: none !important;
}

/* ===== Signed-in profile ================================================== */

.profile {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px;
    background: none;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.profile__text {
    flex: 1 1 auto;
    min-width: 0;
}

.profile__name {
    display: block;
    font-weight: 700;
    font-size: 16px;
}

.profile__sub {
    display: block;
    margin-top: 2px;
    color: #6b6b6b;
    font-size: 13px;
}

/* The signed-in ring. */
.account__avatar--ringed {
    border-color: #0b6fe8;
    box-shadow: 0 0 0 2px rgba(11, 111, 232, 0.25);
}

/* ===== Poll wins and comments ============================================= */

.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 14px 0 18px;
}

.stat {
    display: flex;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 10px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
}

.stat__icon {
    width: 18px;
    height: 18px;
    margin-bottom: 2px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stat__value {
    font-weight: 700;
    font-size: 17px;
}

.stat__label {
    color: #6b6b6b;
    font-size: 13px;
}

.rows--spaced {
    margin-top: 18px;
}

/* ===== Panels =============================================================
   The center column holds one panel per bottom-nav tab. */

.panels {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

/* ===== Empty state ======================================================== */

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px;
    text-align: center;
}

.empty__icon {
    width: 74px;
    height: 74px;
    margin-bottom: 18px;
    fill: none;
    stroke: #c9c9c9;
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.empty__title {
    margin: 0 0 8px;
    font-size: 18px;
}

.empty__blurb {
    max-width: 34em;
    margin: 0 0 22px;
    color: #6b6b6b;
    font-size: 15px;
    line-height: 1.45;
}

.empty .btn {
    width: auto;
    padding: 13px 26px;
}

/* ===== Taller sheets with their own scroll ================================ */

/* As tall as what is in it, up to a cap.
   A fixed height suits a list somebody scrolls — the favorites picker holds
   thirty-two clubs. It does not suit a sheet holding one switch, which was
   left standing in six hundred pixels of nothing. */
.sheet--tall {
    display: flex;
    flex-direction: column;
    width: min(560px, calc(100% - 40px));
    max-height: min(620px, calc(100% - 40px));
}

/* The two that are lists keep their height, because a picker that grows and
   shrinks as you search is worse than one that holds still. */
#add-favorites-sheet,
#manage-favorites-sheet {
    height: min(620px, calc(100% - 40px));
}

.sheet--tall:not([open]) {
    display: none;
}

.sheet__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

#callslip .placeholder,
#callslip .no-results {
    margin: 16px;
}

/* Title centered with the Close link kept to the right. */
.sheet__head--centered {
    align-items: center;
}

.sheet__spacer,
.screen__spacer {
    display: block;
}

.sheet__title--small {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b6b6b;
}

.text-btn {
    padding: 0;
    white-space: nowrap;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.sheet__close {
    flex: none;
    padding: 16px;
    background: none;
    border: none;
    border-top: 1px solid #e6e6e6;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* ===== Search ============================================================= */

.search {
    position: relative;
    flex: none;
    padding: 12px 16px 0;
}

.search__icon {
    position: absolute;
    top: 50%;
    left: 30px;
    width: 18px;
    height: 18px;
    transform: translateY(-25%);
    fill: none;
    stroke: #9a9a9a;
    stroke-width: 1.8;
    stroke-linecap: round;
    pointer-events: none;
}

.search__input {
    width: 100%;
    padding: 10px 14px 10px 40px;
    background: #f4f4f4;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    color: inherit;
    font: inherit;
    font-size: 15px;
}

/* ===== All / Teams / Leagues / Players ==================================== */

.segments {
    display: flex;
    flex: none;
    padding: 0 16px;
    border-bottom: 1px solid #e6e6e6;
}

.segment {
    flex: 1;
    padding: 12px 4px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #6b6b6b;
    font: inherit;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.segment--on {
    border-bottom-color: #111111;
    color: #111111;
    font-weight: 700;
}

/* ===== Pick rows ==========================================================
   One row per team, league or player, with a star to favorite it. */

.pick__heading {
    margin: 0;
    padding: 14px 16px 8px;
    color: #6b6b6b;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.picks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pick {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
}

.pick:first-child {
    border-top: none;
}

/* Stand-in for the team, league or player badge. */
.pick__badge {
    flex: none;
    width: 30px;
    height: 30px;
    border: 1.5px solid #d4d4d4;
    border-radius: 22%;
}

.pick__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
}

.pick__name--link {
    margin-right: 10px;
}

.pick__sub {
    color: #9a9a9a;
    font-size: 12px;
}

.star,
.bell {
    flex: none;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
}

.star svg,
.bell svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #c9c9c9;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

/* Turned on, they fill in. */
.star[aria-pressed="true"] svg,
.bell[aria-pressed="true"] svg {
    fill: #f5b301;
    stroke: #f5b301;
}

/* ===== Bookmarks ========================================================== */

.saved {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.saved__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.saved__title {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.3;
}

.saved__meta {
    margin: 0;
    color: #6b6b6b;
    font-size: 13px;
}

.saved__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: span 2;
    width: 78px;
    height: 78px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    color: #9a9a9a;
    font-size: 13px;
    letter-spacing: 0.08em;
}

.saved__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}


/* ===== Poll wins record =================================================== */

.record {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px 20px;
    overflow-y: auto;
}

.record__label {
    margin: 0;
    color: #6b6b6b;
    font-size: 14px;
}

.record__value {
    margin: 4px 0 14px;
    font-size: 20px;
}

.record__note {
    margin: 0;
    max-width: 60em;
    color: #6b6b6b;
    font-size: 14px;
    line-height: 1.5;
}

/* The comment-history empty state sits inside a dialog rather than a panel. */
.screen .empty {
    flex: 1 1 auto;
}

/* ===== Player and matchup pages =========================================== */

.screen--wide {
    width: min(560px, calc(100% - 40px));
    height: min(620px, calc(100% - 40px));
}

.screen__subheading {
    margin: 1px 0 0;
    color: #6b6b6b;
    font-size: 12px;
    text-align: center;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.page-head {
    flex: none;
    padding: 4px 20px 14px;
    text-align: center;
}

.page-head__photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid #d4d4d4;
    border-radius: 22%;
    color: #9a9a9a;
    font-size: 12px;
    letter-spacing: 0.08em;
}

.page-head__name {
    margin: 10px 0 2px;
    font-size: 20px;
}

.page-head__sub {
    margin: 0;
    color: #6b6b6b;
    font-size: 14px;
}

/* ===== In-page tabs =======================================================
   A tab strip plus its panels. Scopes can nest, so the reference sub-tabs work
   the same way inside the reference panel. */

.pane-scope--fill {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.tabs {
    display: flex;
    flex: none;
    gap: 4px;
    padding: 0 16px;
    overflow-x: auto;
    border-bottom: 1px solid #e6e6e6;
}

.tabs__btn {
    padding: 12px 10px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #6b6b6b;
    font: inherit;
    font-size: 13px;
    white-space: nowrap;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.tabs__btn--on {
    border-bottom-color: #111111;
    color: #111111;
    font-weight: 700;
}

.pane--scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 20px 24px;
    overflow-y: auto;
}

.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    border: 1px dashed #d4d4d4;
    border-radius: 10px;
    color: #9a9a9a;
    font-size: 14px;
}

.segments--inset {
    margin-bottom: 4px;
    padding: 0;
}

/* ===== Feed posts ========================================================= */

.social {
    margin: 0;
    padding: 0;
    list-style: none;
}

.social__item {
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}

.social__meta {
    margin: 0 0 4px;
    color: #6b6b6b;
    font-size: 13px;
}

.social__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}

.social__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    margin-top: 10px;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    color: #9a9a9a;
    font-size: 14px;
    letter-spacing: 0.08em;
}

.social__media--video {
    gap: 10px;
}

.play svg {
    display: block;
    width: 34px;
    height: 34px;
    fill: #9a9a9a;
}

/* ===== Matchup header and odds ============================================ */

.matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e6e6e6;
}

.matchup__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.matchup__code {
    font-weight: 700;
    font-size: 15px;
}

.matchup__record {
    color: #6b6b6b;
    font-size: 12px;
}

.matchup__date,
.matchup__time {
    margin: 0;
    font-size: 13px;
    text-align: center;
}

.matchup__time {
    color: #6b6b6b;
}

.odds {
    padding: 16px 0;
}

.board__title {
    margin: 0 0 12px;
    font-size: 17px;
}

.board__table {
    width: 100%;
    border-collapse: collapse;
}

.board__table th,
.board__table td {
    padding: 6px 4px;
    font-weight: 400;
    font-size: 12px;
    color: #6b6b6b;
    text-align: center;
}

.board__table td {
    width: 84px;
}

.board__team {
    color: #111111;
    font-size: 15px;
    text-align: left;
}

/* One tappable price. No border — an outline on a price means the result
   went that way, and only a settled game has one. */
.odd {
    width: 100%;
    padding: 10px 6px;
    background: #f4f4f4;
    border: none;
    border-radius: 8px;
    color: inherit;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.see-all {
    width: 100%;
    margin-top: 14px;
    padding: 13px;
    background: #f4f4f4;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    color: inherit;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

/* ===== Poll ===============================================================
   One question at a time, with dots to move between them. */

.poll {
    padding: 18px 0 4px;
    border-top: 1px solid #e6e6e6;
}

.poll__question {
    margin: 0 0 12px;
    font-size: 15px;
}

.poll__choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.choice {
    padding: 15px 12px;
    background: none;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    color: inherit;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

.poll__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 12px;
}

.poll__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    background: #d4d4d4;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.poll__dot--on {
    background: #111111;
}

.poll__signup {
    margin: 0;
    text-align: center;
}

.link-btn {
    padding: 0;
    background: none;
    border: none;
    color: #6b6b6b;
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

/* A pick row name that opens that team or player. */
.pick__name--link {
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

/* ===== Favorites, lists and the odds/poll states ========================= */

.favs-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.picks--panel {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 0;
    overflow-y: auto;
}

.no-results {
    margin: 0;
    padding: 24px 16px;
    color: #9a9a9a;
    font-size: 14px;
    text-align: center;
}

/* Up and down arrows, shown only while re-ordering. */
.move {
    flex: none;
    width: 28px;
    padding: 4px 0;
    background: none;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    color: inherit;
    font-size: 11px;
    cursor: pointer;
}

.figure--on {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

.choice--on {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

.poll__votes {
    margin: 10px 0 0;
    color: #6b6b6b;
    font-size: 13px;
    text-align: center;
}

/* ===== Toast ==============================================================
   Brief confirmation for actions with nothing else to show. */

.toast {
    position: fixed;
    bottom: 84px;
    left: 50%;
    z-index: 10;
    margin: 0;
    padding: 11px 18px;
    transform: translateX(-50%);
    background: #111111;
    border-radius: 12px;
    color: #ffffff;
    font-size: 14px;
}

/* ===== The account ring ===================================================
   The same ring on the header's login button as on the avatar inside the
   account modal. */

.login-btn--ringed {
    border-color: #0b6fe8;
    box-shadow: 0 0 0 2px rgba(11, 111, 232, 0.25);
}

/* Centered, but "safe" so an overflowing row falls back to the start —
   plain centering clips the leftmost tabs and they cannot be scrolled to. */
.tabs {
    justify-content: safe center;
}

/* ===== Odds board =========================================================
   A league heading, the market columns, then one block per game. */

.board__league {
    margin: 0 0 12px;
    font-size: 20px;
}

.board__head {
    display: grid;
    grid-template-columns: 1fr repeat(3, 84px);
    gap: 8px;
    align-items: end;
    padding-bottom: 8px;
    border-bottom: 1px solid #e6e6e6;
}

.board__day {
    font-size: 15px;
}

.board__col {
    color: #6b6b6b;
    font-size: 12px;
    text-align: center;
}

.game {
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}

.game__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.game__time {
    font-size: 13px;
}

.game__body {
    display: grid;
    grid-template-columns: 1fr repeat(3, 84px);
    gap: 8px;
    align-items: center;
}

/* Both teams are one target, so tapping either opens the matchup. */
.game__teams {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.game__team {
    display: flex;
    align-items: center;
    gap: 10px;
}

.game__team .pick__badge {
    width: 26px;
    height: 26px;
}

.game__names {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.game__code {
    color: #6b6b6b;
    font-size: 11px;
}

.game__name {
    font-weight: 700;
    font-size: 15px;
}


/* Three markets across, one row per team. */
.game__odds {
    display: grid;
    grid-column: 2 / -1;
    grid-template-columns: repeat(3, 84px);
    gap: 8px;
}

.figure--stacked {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 4px;
    line-height: 1.2;
}

.figure__line {
    font-size: 13px;
}

.figure__value {
    color: #6b6b6b;
    font-size: 12px;
}

.figure--on .figure__value {
    color: #ffffff;
}

/* ===== My Calls ============================================================ */

.calls {
    margin: 0;
    padding: 0;
    list-style: none;
}

.call {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}

.call__text {
    flex: 1 1 auto;
    min-width: 0;
}

.call__pick {
    display: block;
    font-weight: 700;
    font-size: 15px;
}

.call__kind {
    display: block;
    margin-top: 2px;
    color: #6b6b6b;
    font-size: 13px;
}

.call__figure {
    flex: none;
    font-size: 15px;
}

/* ===== Slate bar ========================================================
   A popover so it keeps showing over the full-screen dialogs. Sits directly
   on top of the tab bar. */

.slipbar {
    /* The browser gives a popover inset:0, which pinned this to the top of the
       screen — hence spelling out top:auto rather than only setting bottom. */
    position: fixed;
    inset: auto 0 62px 0;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    overflow: visible;
    /* The bar spans the width, so only the button itself takes clicks —
       otherwise the strip swallows taps meant for what is behind it. */
    pointer-events: none;
}

.slipbar__btn {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(560px, calc(100% - 40px));
    margin: 0 auto;
    padding: 14px 20px;
    background: #111111;
    border: none;
    border-radius: 12px 12px 0 0;
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

.slipbar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: #0b6fe8;
    border-radius: 999px;
    color: #ffffff;
    font-size: 13px;
}

#callslip-count {
    background: #0b6fe8;
}

/* ===== A selection on the slip ============================================ */

.slip {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.slip__game {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    padding: 12px 14px;
    background: #f4f4f4;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.slip__when {
    grid-column: 1;
    color: #6b6b6b;
    font-size: 12px;
    letter-spacing: 0.04em;
}

.slip__match {
    grid-column: 1;
    margin-top: 2px;
    font-size: 15px;
}

.slip__game .row__chevron {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.slip__pick {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.slip__team {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 15px;
}

.slip__odds {
    font-weight: 700;
    font-size: 15px;
}

.slip__market {
    margin: 2px 0 0 32px;
    color: #6b6b6b;
    font-size: 13px;
}

/* 25 / 50 / 75 / 100 */
.slip__quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 14px 0 12px;
}

.quick {
    padding: 12px 4px;
    background: #f4f4f4;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    color: inherit;
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

.slip__amounts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.amount {
    display: block;
    padding: 8px 14px 10px;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
}

.amount__label {
    display: block;
    color: #6b6b6b;
    font-size: 12px;
}

.amount__input {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 16px;
}

.amount__input:focus {
    outline: none;
}

.slip__takes {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 14px 0 0;
    font-weight: 700;
    font-size: 15px;
}

.slip__place {
    flex: none;
    margin: 0;
    border-radius: 0;
}

/* ===== Player props ======================================================= */

.board__head--props {
    grid-template-columns: 1fr repeat(2, 96px);
    margin-bottom: 4px;
}

.prop {
    display: grid;
    grid-template-columns: 1fr repeat(2, 96px);
    gap: 8px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.prop__name {
    font-size: 15px;
}

.prop__odds {
    display: grid;
    grid-column: 2 / -1;
    grid-template-columns: repeat(2, 96px);
    gap: 8px;
}

/* ===== Card ============================================================= */

/* Each leg sits in its own card, inset from the sheet's edges. */
.cardlegs {
    margin: 0;
    padding: 14px 16px;
    list-style: none;
}

.cardleg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 16px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    font-size: 15px;
}

.cardleg + .cardleg {
    margin-top: 8px;
}

.cardleg .slip__odds {
    flex: none;
}


/* ===== Slate layout =====================================================
   Head at the top, tabs and their content taking the middle and scrolling,
   the action held against the bottom edge. */

.sheet--tall > .sheet__head {
    flex: none;
}

.sheet--tall > .pane-scope {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.poll__context {
    margin: 0 0 4px;
    color: #6b6b6b;
    font-size: 13px;
}

/* ===== Week picker ======================================================== */

.weeks {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    overflow-x: auto;
    border-bottom: 1px solid #e6e6e6;
}

.weeks__label {
    margin-right: 4px;
    color: #6b6b6b;
    font-size: 13px;
}

.week {
    flex: none;
    min-width: 32px;
    padding: 7px 4px;
    background: none;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    color: inherit;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.week--on {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

/* ===== Schedule ===========================================================
   A heading per date, then matchup / time / TV / location. */

.day {
    margin-bottom: 26px;
}

.day__date {
    margin: 0 0 10px;
    font-size: 17px;
}

.day__head,
.fixture {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 84px 84px minmax(0, 1.4fr);
    gap: 12px;
    align-items: center;
}

.day__head {
    padding-bottom: 8px;
    border-bottom: 1px solid #e6e6e6;
    color: #6b6b6b;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fixture {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.fixture__teams {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.fixture__abbr {
    font-weight: 700;
    font-size: 14px;
}

.fixture__at {
    color: #9a9a9a;
    font-size: 13px;
}

.fixture__time,
.fixture__tv {
    font-size: 14px;
}

.fixture__tv {
    color: #6b6b6b;
}

.fixture__where {
    min-width: 0;
    font-size: 14px;
}

.fixture__city {
    display: block;
    color: #6b6b6b;
    font-size: 12px;
}

/* Team crests wherever a badge is drawn. */
.pick__badge--logo {
    object-fit: contain;
    border: none;
    border-radius: 0;
    background: none;
}

.fixture .pick__badge,
.fixture .pick__badge--logo {
    width: 24px;
    height: 24px;
}

/* ===== Player headshot ==================================================== */

.page-head__photo img {
    display: block;
    width: 62px;
    height: 62px;
    border-radius: 22%;
    object-fit: cover;
}

/* ===== Stat tables ========================================================
   Wide, so they scroll sideways rather than pushing the page out. */

.stat-table__title {
    margin: 18px 0 8px;
    font-size: 15px;
}

.stat-table__title:first-child {
    margin-top: 0;
}

.stat-table__scroll {
    overflow-x: auto;
}

.stat-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.stat-table th,
.stat-table td {
    padding: 8px 10px;
    font-weight: 400;
    font-size: 13px;
    text-align: right;
}

.stat-table thead th {
    border-bottom: 1px solid #e6e6e6;
    color: #6b6b6b;
    font-size: 11px;
    letter-spacing: 0.06em;
}

.stat-table tbody th,
.stat-table thead th:first-child {
    text-align: left;
}

.stat-table tbody th {
    font-weight: 700;
}

.stat-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
}

/* ===== Biography ========================================================== */

.bio {
    margin: 0;
}

.bio__row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #f0f0f0;
}

.bio dt {
    color: #6b6b6b;
    font-size: 14px;
}

.bio dd {
    margin: 0;
    font-size: 15px;
}

/* A crest sits on nothing; only a headshot needs a ground behind it. */
.pick__badge--logo {
    background: none;
}


/* ===== Crests on the follow chips ========================================= */

.chip__circle img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 22%;
}

.chip__label {
    max-width: 66px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Schedule: room for the star ======================================== */

.day__head,
.fixture {
    grid-template-columns: minmax(0, 1.4fr) 74px 74px minmax(0, 1.3fr) 28px;
}

.fixture .star svg {
    width: 20px;
    height: 20px;
}

/* ===== Matchup header ===================================================== */

.matchup__side .pick__badge,
.matchup__side .pick__badge--logo {
    width: 40px;
    height: 40px;
}

.feed-note {
    margin: 0 0 10px;
    color: #6b6b6b;
    font-size: 13px;
}

/* ===== Follow chips =======================================================
   One quiet border on everything followed, whatever it is. */

.chip__circle {
    position: relative;
    overflow: hidden;
    border: 1.5px solid #d4d4d4;
}

.chip__circle--add {
    border-color: #111111;
}

.chip__circle--game {
    border-color: #111111;
}

/* Two crests in the one circle, split down the middle. */
.chip__circle--game {
    padding: 0;
    gap: 0;
}

.chip__half {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

/* The circle is cut straight down the middle, a team either side. The half
   you picked to win fills yellow. */
.chip__half {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    overflow: hidden;
}

.chip__half:first-child {
    left: 0;
    border-right: 1.5px solid #111111;
}

.chip__half:last-child {
    right: 0;
}

.chip__half img {
    position: absolute;
    top: 0;
    width: 40px;
    height: 100%;
    object-fit: contain;
}

.chip__half:first-child img {
    left: 0;
}

.chip__half:last-child img {
    right: 0;
}

.chip__half--picked {
    background: none;
}

/* ===== Team page ========================================================== */

.page-head__photo--crest {
    border: none;
}

.page-head__photo--crest img {
    border-radius: 0;
    object-fit: contain;
}

/* Weeks read left, so the numeric columns are not right-aligned here. */
.season-table td,
.season-table th {
    text-align: left;
}

.bye td {
    color: #9a9a9a;
    letter-spacing: 0.08em;
}

.opponent .link-btn {
    color: inherit;
    font-size: 13px;
}

.result--w {
    font-weight: 700;
    color: #1a7f37;
}

.result--l {
    font-weight: 700;
    color: #d32f2f;
}


/* ===== Team page header ===================================================
   Last season on the left of the crest, this season on the right. */

.page-head__sub {
    display: flex;
    justify-content: center;
    gap: 22px;
}

.head-side {
    white-space: nowrap;
}

/* The quarterback column is text among numbers. */
.qb-cell {
    white-space: nowrap;
}

.average th,
.average td {
    border-top: 1px solid #d4d4d4;
    font-weight: 700;
}

/* ===== Team page season switch ============================================ */

.head-side {
    padding: 6px 12px;
    background: none;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    color: #6b6b6b;
    font: inherit;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.head-side--on {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

.result {
    margin-right: 4px;
}

/* What a quarterback is ranked on, beside his name. */
.pick__stat {
    flex: none;
    color: #6b6b6b;
    font-size: 12px;
    white-space: nowrap;
}

/* ===== Game screen ======================================================== */

.game-score {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex: none;
    padding: 12px 20px 16px;
    border-bottom: 1px solid #e6e6e6;
}

.game-score__side {
    display: flex;
    align-items: center;
    gap: 10px;
}

.game-score__side img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.game-score__abbr {
    font-weight: 700;
    font-size: 15px;
}

.game-score__points {
    font-size: 22px;
}

.score-btn {
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

/* Wide panes stretch three columns across the whole modal, which reads badly.
   The leaders sit in a column of their own instead. */
.narrow {
    max-width: 620px;
    margin: 0 auto;
}

.leaders__team {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 6px;
    font-size: 14px;
    letter-spacing: 0.06em;
}

.leaders__team:first-child {
    margin-top: 0;
}

.leaders__team img {
    object-fit: contain;
}

.leader {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.leader__what {
    color: #6b6b6b;
    font-size: 13px;
}

.leader__who {
    font-weight: 700;
}

.leader__line {
    color: #6b6b6b;
    white-space: nowrap;
}

.play {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.play__when,
.play__score {
    color: #6b6b6b;
    font-size: 13px;
}

.drive__head {
    margin: 16px 0 4px;
    font-size: 14px;
}

/* ===== Box score ========================================================== */

.box__group {
    margin: 14px 0 6px;
    color: #6b6b6b;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* The passing and rushing split behind a quarterback's total. */
.pick__split {
    color: #9a9a9a;
}

/* ===== Player totals and depth switcher =================================== */


.post-line {
    display: block;
    margin-top: 3px;
    color: #6b6b6b;
    font-size: 13px;
}

.depth {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.depth__btn {
    min-width: 46px;
    padding: 6px 10px;
    background: none;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    color: #6b6b6b;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.depth__btn--on {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

/* ===== Jump links =========================================================
   Any name that identifies a game, team or player is a way into it. */

.jump {
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.jump--quiet {
    color: #9a9a9a;
    font-size: 12px;
}

/* The 25-yard mark a passing day cleared. */
.mark {
    display: inline-block;
    padding: 2px 7px;
    background: #f4f4f4;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    font-size: 12px;
}


/* ===== When the marks fell ================================================ */

.mark--btn {
    cursor: pointer;
}

.splits td {
    padding: 10px 10px 14px;
    background: #fafafa;
}

.splits__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    white-space: normal;
}

.splits__label {
    min-width: 78px;
    color: #6b6b6b;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.splits__hit {
    padding: 3px 9px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    font-size: 13px;
}

.splits__hit em {
    color: #6b6b6b;
    font-style: normal;
}

.splits__hit--end {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

.splits__hit--end em {
    color: #ffffff;
}

/* What a quarterback is worth against the position average: 1.00 is par. */
.value {
    display: inline-block;
    min-width: 38px;
    margin-right: 4px;
    padding: 2px 7px;
    background: #111111;
    border-radius: 10px;
    color: #ffffff;
    font-size: 12px;
    text-align: center;
}

/* ===== When a mark fell ===================================================
   Sits under the number in its own cell, so the quarter reads with the stat. */

.when {
    display: block;
    margin-top: 2px;
    color: #6b6b6b;
    font-size: 11px;
    white-space: nowrap;
}

/* ===== Ranking ============================================================ */

.rank-note {
    margin: 12px 0 4px;
    color: #6b6b6b;
    font-size: 13px;
    line-height: 1.4;
}


/* A When column reads quieter than the number it belongs to. */
.when-cell {
    color: #6b6b6b;
}

.when {
    display: block;
    color: #6b6b6b;
    font-size: 11px;
    white-space: nowrap;
}

.playoff th[scope="row"] {
    color: #0b6fe8;
}

/* The stat itself, with its mark columns trailing quietly behind it. */
.lead-cell {
    border-left: 1px solid #e6e6e6;
    font-weight: 700;
}

.when-cell {
    color: #6b6b6b;
    font-size: 12px;
}

/* Both crests on a game row, split like the follow chip. */
.pick__badge--pair {
    position: relative;
    overflow: hidden;
    border: 1.5px solid #111111;
    border-radius: 22%;
}

.pick__badge--pair .chip__half img {
    width: 30px;
}

/* Passing and rushing sit side by side under their own headings. */
.group-row th {
    padding-bottom: 2px;
}

.group {
    border-left: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
    color: #111111;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}



/* A matchup written out: crest, team, @, crest, team. */
.matchline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.matchline__crest {
    object-fit: contain;
}

.matchline__at {
    margin: 0 2px;
    color: #9a9a9a;
}

/* A pick row's name sits on one line with whatever follows it. */
.pick__name--link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pick__name--link .pick__sub {
    margin-left: 0;
}

/* How often a mark was reached, under the time it usually falls. */
.count-note {
    display: block;
    color: #9a9a9a;
    font-size: 11px;
}

/* ===== Player rows ========================================================
   A headshot, who he is, then the totals laid out as a small tree: games
   played, tied across to yards and touchdowns, each branching into the
   passing and rushing halves beneath it. */

.shot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 60px;
    height: 60px;
    background: #f4f4f4;
    border-radius: 22%;
    overflow: hidden;
}

.shot img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    object-position: top center;
}

.who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.who__name {
    font-weight: 700;
    font-size: 16px;
}

.who__sub {
    color: #6b6b6b;
    font-size: 12px;
}

.tree {
    display: flex;
    align-items: flex-start;
    flex: none;
    margin-left: auto;
}

.node {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 84px;
}

.node b {
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.node i {
    color: #9a9a9a;
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* The rule joining one figure to the next. */
.tie {
    width: 26px;
    height: 1px;
    margin-top: 13px;
    background: #d4d4d4;
}

/* The two halves hanging under a figure, on their own stems. */
.branch {
    position: relative;
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding-top: 8px;
    color: #6b6b6b;
    font-size: 11px;
    white-space: nowrap;
}

.branch::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 8px;
    border-top: 1px solid #d4d4d4;
    border-left: 1px solid #d4d4d4;
    border-right: 1px solid #d4d4d4;
}

.pick {
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
}

.picks--panel .pick__name--link {
    align-items: flex-start;
}

/* The same tree, centered under the player's name on his own page. */
.tree--head {
    justify-content: center;
    margin: 0 auto;
}

.tree-note {
    display: block;
    margin-top: 34px;
    color: #6b6b6b;
    font-size: 13px;
}


/* ===== Player page header =================================================
   Who he is on the left, what he has done on the right. */

/* The picture and the totals read as one block, centred in the section,
   with the rest of his details on one line beneath. */
.page-head--split {
    display: block;
    text-align: center;
}


.page-head__who {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-head--split .page-head__photo {
    width: 92px;
    height: 92px;
    flex: none;
}

.page-head--split .page-head__photo img {
    width: 92px;
    height: 92px;
    object-fit: cover;
    object-position: top center;
}

.page-head--split .page-head__name {
    margin: 0 0 2px;
    font-size: 22px;
}


.page-head--split .tree--head {
    justify-content: flex-end;
    margin: 0 0 0 auto;
}

.page-head--split .tree-note {
    text-align: right;
}

/* The slot row sits under the weeks. */
.weeks--days {
    margin-top: -8px;
}

/* ===== Totals as sums =====================================================
   Each figure written out: the parts, a rule, then the total under it. */

.sums {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0;
}

.sum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 18px;
    text-align: center;
}

.sum + .sum {
    border-left: 1px solid #e6e6e6;
}

.sum__parts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding-bottom: 6px;
    color: #6b6b6b;
    font-size: 12px;
    white-space: nowrap;
}

.sum__op {
    color: #c9c9c9;
    font-size: 11px;
    line-height: 1;
}

/* The rule the total sits under. */
.sum__total {
    padding-top: 6px;
    border-top: 1.5px solid #111111;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.sum__label {
    color: #9a9a9a;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* A wider portrait on the profile, as drawn. */
.page-head--split .page-head__photo {
    width: 132px;
    height: 132px;
    border-radius: 14px;
}

.page-head--split .page-head__photo img {
    width: 132px;
    height: 132px;
    border-radius: 14px;
}

.page-head--split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: end;
}


/* ===== Totals on the player page ==========================================
   Regular season and playoffs on their own lines, passing and rushing side
   by side, the total under a rule. */

.totals {
    width: 100%;
    border-collapse: collapse;
}

.totals th,
.totals td {
    padding: 5px 8px;
    text-align: right;
    white-space: nowrap;
}

.totals thead th {
    color: #9a9a9a;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.totals tbody th {
    color: #6b6b6b;
    font-weight: 400;
    font-size: 13px;
    text-align: left;
}

.totals tbody td {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* A rule across the figures, the sum sitting under it — no label needed. */
.totals__sum td {
    padding-top: 7px;
    border-top: 1.5px solid #111111;
    font-size: 24px;
}

/* A player in a list is laid out the way his profile header is: the portrait
   on the left, the totals on the right, at the same size. */


.pick--player .totals {
    flex: 0 0 auto;
}


.pick .totals {
    width: auto;
    margin-left: auto;
    flex: none;
}

/* The star leads the row, the rank number sitting just after it. */
.pick > .star:first-child {
    margin-right: 2px;
}



/* ===== Player rows ========================================================
   The same size and shape as a team or a game: star, portrait, who he is. */

.pick--player {
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.pick--player .shot {
    width: 34px;
    height: 34px;
    border-radius: 22%;
}

.pick--player .shot img {
    width: 34px;
    height: 34px;
    border-radius: 22%;
}

.pick--player .who {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.pick--player .who__name {
    font-size: 15px;
    font-weight: 400;
}

.pick--player .who__sub {
    font-size: 12px;
    white-space: nowrap;
}

/* The embedded club timeline. */
.timeline {
    min-height: 200px;
    margin-top: 8px;
}

.timeline iframe {
    max-width: 100% !important;
}


/* ===== Win probability ====================================================
   The team on top owns the line; the area under it is their share of the
   game. Moving across reads out the play at that moment. */

.wp__title {
    margin: 0 0 14px;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.wp__side {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.wp__side img {
    object-fit: contain;
}

.wp__abbr {
    font-size: 14px;
}

/* The key showing which line belongs to which team. */
.wp__key {
    width: 26px;
    height: 0;
    border-top: 2px solid var(--team);
}

.wp__key--dash {
    border-top-style: dotted;
    border-top-width: 3px;
}

.wp__pct {
    margin-left: auto;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.02em;
}

.wp {
    position: relative;
    padding-right: 42px;
}

.wp svg {
    display: block;
    width: 100%;
    height: 260px;
    touch-action: none;
    cursor: crosshair;
}

.wp__area {
    opacity: 0.18;
}

.wp__line {
    fill: none;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* The team above the middle is drawn dotted, the one below solid, matching
   the keys either side of the chart. */
.wp__line--dash {
    stroke-dasharray: 3 3;
}

.wp__rule {
    stroke: #d4d4d4;
    stroke-width: 1;
    stroke-dasharray: 3 4;
    vector-effect: non-scaling-stroke;
}

.wp__even {
    stroke: #d4d4d4;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.wp__cursor {
    stroke: #111111;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.wp__dot {
    fill: #111111;
}

/* 100 at the top, 50 across the middle, 100 again at the foot. */
.wp__scale {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0 0 8px;
    color: #9a9a9a;
    font-size: 11px;
}

.wp__quarters {
    position: relative;
    height: 18px;
    margin-top: 4px;
}

.wp__quarters span {
    position: absolute;
    transform: translateX(-50%);
    color: #6b6b6b;
    font-size: 12px;
}

/* The play under the cursor. */
.wp__play:not(:empty) {
    margin-top: 10px;
    padding: 14px 16px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
}

.wp__playhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.wp__down {
    font-weight: 700;
    font-size: 16px;
}

.wp__score {
    display: flex;
    gap: 18px;
    font-size: 16px;
}

.wp__when {
    margin: 2px 0 6px;
    color: #6b6b6b;
    font-size: 13px;
}

.wp__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

/* Centered, but "safe" — a plain centered row that overflows gets clipped on
   the left and PRE 1 becomes unreachable. */
.weeks {
    justify-content: safe center;
}


/* A followed game shows its week; picking a winner fills the circle. */
.chip__week {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
}

.chip__circle--picked {
    background: none;
    border-color: #111111;
}

/* Preseason games read quieter than the ones that count. */
.preseason th[scope="row"] {
    color: #9a9a9a;
}

/* A game already played shows its state instead of a star. */
.fixture__played {
    color: #9a9a9a;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --------- sits beside each team once the game has been played. */
.fixture__score {
    min-width: 22px;
    color: #6b6b6b;
    font-size: 14px;
}

.fixture__score--won {
    color: #111111;
    font-weight: 700;
}

.fixture__final {
    color: #6b6b6b;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* A search box sitting on the end of the depth tabs. */
.tabs__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
    margin-left: 12px;
    align-self: center;
}

.tabs__search .search__input {
    width: 160px;
    padding: 8px 14px;
    font-size: 14px;
}

/* The sub line is a flex row on the team page, for its season switch. On a
   player it stacks, so the size sits under the team. */
.page-head--split .page-head__sub {
    display: block;
}

.page-head__size {
    display: block;
    margin-top: 3px;
    color: #9a9a9a;
    font-size: 13px;
}

/* Active players are ringed in green — no word needed. */
.page-head__photo--active {
    box-shadow: 0 0 0 5px #1a7f37;
}

/* The season switch above a player's game log. */
.weeks--seasons {
    justify-content: flex-start;
    margin-bottom: 14px;
    border-bottom: none;
}

.weeks--seasons .week {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px;
    font-size: 14px;
}

.week__count {
    color: #9a9a9a;
    font-size: 11px;
}

.week--on .week__count {
    color: #ffffff;
}

/* Which book the prices came from, and a game with no market. */
.game__book {
    margin-left: 8px;
    color: #9a9a9a;
    font-size: 11px;
}

.figure--none {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 4px;
    color: #c9c9c9;
    font-size: 13px;
}


/* ===== Select your team ===================================================
   A card per club: the abbreviation set large, the crest beside it. */

.pick-team {
    margin: 0 0 16px;
    font-size: 26px;
    font-style: italic;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.teamgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0 0 20px;
    list-style: none;
}

.teamcard {
    position: relative;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.teamcard:hover {
    border-color: var(--team);
}

.teamcard__open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 22px 18px;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.teamcard__abbr {
    font-family: "Archivo", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-stretch: 75%;
    font-weight: 900;
    font-size: 30px;
    letter-spacing: -0.01em;
    line-height: 1;
}

.teamcard__crest {
    flex: none;
    object-fit: contain;
}

/* The star sits in the corner, out of the card's way. */
.teamcard__star {
    position: absolute;
    top: 8px;
    right: 8px;
}

.teamcard__star svg {
    width: 18px;
    height: 18px;
}

/* ===== Quarterback cards ==================================================
   The same container as the teams, with his name and headshot. */

/* Two to a row, always — a quarterback is a name and a club, and at three or
   four across the names start breaking. minmax(0, …) rather than a bare 1fr
   so a long name shrinks the column instead of pushing past it. */
.teamgrid--players {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A quarterback stands on his card: his face above, his name along the foot.
   Everything is declared here rather than inherited, because the club card
   further down sets .teamcard__open to a two-column grid and would otherwise
   put the face beside the name again. */
.teamcard--player .teamcard__open {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    height: 100%;
    /* Left inset for the strip down the edge, matching the club cards. */
    padding: 18px 14px 16px 38px;
    text-align: center;
}

/* Whatever room is left goes above the name, so the name sits on the foot of
   every card in the row whether it runs to one line or two. */
.teamcard--player .teamcard__who {
    align-items: center;
    margin-top: auto;
    text-align: center;
}

.teamcard--player .teamcard__shot {
    width: 88px;
    height: 88px;
}

/* The cards in a row are as tall as the tallest, and the button fills its
   card — without which the name would sit under the face, not at the foot. */
.teamcard--player {
    display: flex;
}

.teamcard__who {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    text-align: left;
}

.teamcard__last {
    font-family: "Archivo", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-stretch: 75%;
    font-weight: 900;
    font-size: 21px;
    letter-spacing: -0.01em;
    /* Room for the tail of a g or a y, and room to wrap: Richardson Sr.
       belongs on the card whole, not trimmed to an ellipsis. */
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.teamcard__meta {
    color: #6b6b6b;
    font-size: 12px;
}

.teamcard__shot {
    flex: none;
    width: 64px;
    height: 64px;
    background: #f4f4f4;
    border-radius: 22%;
    object-fit: cover;
    object-position: top center;
}

/* A price that can no longer be taken: greyed out and not clickable. */
.figure--closed {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 9px 4px;
    background: #f7f7f7;
    border: none;
    border-radius: 8px;
    color: #9a9a9a;
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    cursor: default;
}

/* The side that came in. */
.figure--hit {
    border: 1.5px solid #111111;
    color: #111111;
    font-weight: 700;
}

.figure--hit .figure__value {
    color: #6b6b6b;
}

.cell--hit {
    border: 1.5px solid #111111;
    border-radius: 6px;
    font-weight: 700;
}

.figure--closed .figure__value {
    color: #c9c9c9;
}

/* Prices in the closing-line table. */
.stat-table em {
    color: #9a9a9a;
    font-style: normal;
    font-size: 12px;
}

/* The odds tab lays out exactly like a schedule block. */
.day__head--odds {
    grid-template-columns: minmax(0, 1fr) repeat(3, 96px);
}

.line--odds {
    grid-template-columns: minmax(0, 1fr) repeat(3, 96px);
    padding: 6px 0;
}

.line--odds .line__odds {
    grid-column: 2 / -1;
}

/* A game not yet played shows its kickoff where the result will go. */
.upcoming {
    color: #9a9a9a;
}

/* ===== Team colors ========================================================
   The header block carries the club's color; the content below stays plain
   so the numbers keep their contrast. */

.screen--tinted .screen__bar,
.screen--tinted .page-head {
    background: var(--team);
    color: var(--ink);
    border-bottom: none;
}

.screen--tinted .page-head {
    padding-bottom: 22px;
}

.screen--tinted .screen__heading,
.screen--tinted .page-head__name,
.screen--tinted .page-head__sub,
.screen--tinted .page-head__size,
.screen--tinted .screen__subheading {
    color: var(--ink);
}

.screen--tinted .icon-btn,
.screen--tinted .star,
.screen--tinted .bell {
    color: var(--ink);
}

.screen--tinted .star svg,
.screen--tinted .bell svg {
    stroke: var(--ink);
}

/* Sums and the season switch sit on the color, so they take the same ink. */

/* The heading bar takes the club's second color, so it stands off the
   header behind it rather than merging into it. */
.screen--tinted .totals thead tr {
    background: var(--team2);
}

.screen--tinted .totals thead th {
    padding: 9px 10px;
    color: var(--ink2);
    font-weight: 700;
    opacity: 1;
}

.screen--tinted .totals tbody th,
.screen--tinted .totals tbody td {
    color: #111111;
}

.screen--tinted .totals tbody tr:first-child th,
.screen--tinted .totals tbody tr:first-child td {
    padding-top: 10px;
}

.screen--tinted .totals tbody tr:last-child th,
.screen--tinted .totals tbody tr:last-child td {
    padding-bottom: 12px;
}

.screen--tinted .totals__sum td {
    border-top-color: #111111;
}

.screen--tinted .head-side {
    border-color: color-mix(in srgb, var(--ink) 40%, transparent);
    color: var(--ink);
}

.screen--tinted .head-side--on {
    background: var(--ink);
    color: var(--team);
}

/* The portrait sits on the color, so it needs its own ground. */
.screen--tinted .page-head__photo {
    background: color-mix(in srgb, var(--ink) 12%, transparent);
    border-color: color-mix(in srgb, var(--ink) 30%, transparent);
}

/* ===== The picker and search ==============================================
   Both lay their options out the same way: clubs three to a row as crests,
   quarterbacks two to a row with their headshot, a game across the width. */

/* The pill sizes to its contents, so a long matchup stays on one line. */
.teamgrid--search .pick {
    width: 100%;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1.5px solid #e6e6e6;
    border-radius: 14px;
    border-top: 1.5px solid #e6e6e6;
}

.teamgrid--search .pick:hover {
    border-color: #111111;
}

/* The name block sits in the middle rather than stretching the row. */
.teamgrid--search .pick__name--link {
    flex: 0 1 auto;
    justify-content: center;
    text-align: center;
}

.teamgrid--search .who {
    align-items: center;
    text-align: center;
}

/* Name and details read across, not stacked. */
.teamgrid--search .pick--player .who {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
}

.teamgrid--search .star {
    flex: none;
}

/* Crests and headshots keep to one size in the pill. */
.teamgrid--search .pick__badge,
.teamgrid--search .pick__badge--logo,
.teamgrid--search .shot,
.teamgrid--search .shot img,
.teamgrid--search .pick__badge,
.teamgrid--search .pick__badge--logo,
.teamgrid--search .shot,
.teamgrid--search .shot img {
    width: 28px;
    height: 28px;
}

.teamgrid--search .matchline__crest {
    width: 20px;
    height: 20px;
}

.teamgrid--search .pick__sub {
    display: inline;
    margin-left: 4px;
    white-space: nowrap;
}

/* Nothing in a pill wraps. */
.teamgrid--search .pick__name--link,
.teamgrid--search .pick__name--link,
.teamgrid--search .matchline,
.teamgrid--search .matchline,
.teamgrid--search .who {
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* An empty playoff line reads quieter than a filled one. */
.totals__none td {
    color: #c9c9c9;
}

.screen--tinted .totals__none td {
    color: #c9c9c9;
}

/* ===== Alerts sheet ======================================================= */

.alerts__head {
    margin: 14px 16px 2px;
    color: #6b6b6b;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.alerts__note {
    margin: 0 16px 12px;
    color: #6b6b6b;
    font-size: 14px;
    line-height: 1.45;
}

.rows--alerts {
    margin: 0 16px 20px;
}

/* The player's details, read under his name. */
.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
}

.fact em {
    font-style: normal;
    opacity: 0.65;
}

.screen--tinted .facts {
    color: var(--ink);
}

/* ===== Slate footer =====================================================
   The figures stay above the action while the picks
   above them scroll. */

.slip__foot {
    flex: none;
    padding: 14px 16px 12px;
    border-top: 1px solid #e6e6e6;
}

.slip__foot:empty {
    display: none;
}

.foot__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.foot__what {
    font-weight: 700;
    font-size: 15px;
}

.foot__odds {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.01em;
}

.slip__foot .slip__quick {
    margin: 0 0 10px;
}

.slip__foot .slip__takes {
    margin-top: 12px;
}

.cardleg__kind {
    color: #9a9a9a;
}

/* The first post carries the mark rather than a photo. */
.post__media--logo {
    background: #fafafa;
    border-color: #e6e6e6;
}

.post__media--logo img {
    width: auto;
    height: 62%;
    object-fit: contain;
}

.post__lede {
    margin: 0 0 6px;
    color: #6b6b6b;
    font-size: 15px;
    line-height: 1.45;
}

/* Final, or the state of play, between the two scores. */
.game-score {
    align-items: center;
}

.game-score__state {
    color: #6b6b6b;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.game-score__points--won {
    font-weight: 700;
}

.game-score__points:not(.game-score__points--won) {
    color: #6b6b6b;
}


/* ===== Matchups ===========================================================
   A card apiece, laid out the way the clubs and the quarterbacks are: who is
   playing, then when, on what, and where. */

.fix {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
}

.fix:hover {
    background: #fafafa;
}

.fix__who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* The star and the Final flag sit in the card's top right corner. The star
   carries padding around it so a thumb catches the star rather than the card
   behind it. */
.fix__star,
.fix__played {
    position: absolute;
    top: 4px;
    right: 4px;
}

.fix__star {
    z-index: 2;
    padding: 8px;
}

.fix__star svg {
    width: 18px;
    height: 18px;
    display: block;
}

.fix__teams {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fix__team {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
}

/* The club's block keeps its own width; where a score will not fit beside
   it, --------- drops under it rather than running over the crest. */
.fix__team .crest {
    flex: 0 0 auto;
    min-width: max-content;
}

/* A crest big enough to read, centered against the name beside it. */
.fix__team .pick__badge,
.fix__team .pick__badge--logo {
    width: 32px;
    height: 32px;
}

/* The crest, code and name stay on one line, the text sitting level with the
   middle of the crest rather than on its baseline. Nothing is clipped — the
   name takes the width it needs. */
.fix__team .crest {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    min-width: 0;
    line-height: 1;
    white-space: nowrap;
}

.fix__team .crest img {
    display: block;
    align-self: center;
}

/* The club's code, then its crest — the way a club reads on its own card in
   search. Its full name is not needed beside the code. */
/* The code with its name under it, the crest standing beside the pair. */
.fix__team .crest {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    width: 100%;
}

.fix__abbr {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
}

.fix__team .crest img,
.fix__team .pick__badge,
.fix__team .pick__badge--logo {
    grid-row: 1;
}

.fix__team .crest img,
.fix__team .pick__badge,
.fix__team .pick__badge--logo {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

/* A rule under the code and the crest, its name centered beneath. */
.fix__name {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #e6e6e6;
    text-align: center;
    color: #6b6b6b;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fix__team .crest img,
.fix__team .pick__badge,
.fix__team .pick__badge--logo {
    width: 54px;
    height: 54px;
}

.fix__abbr {
    font-family: "Archivo", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-stretch: 75%;
    font-weight: 900;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: inherit;
}

.fix__name {
    color: #6b6b6b;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.2;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* --------- sits beside the club's block rather than on top of it — set as
   a column of its own so nothing overlaps the crest. */
.fix__score {
    flex: none;
    align-self: center;
    color: #6b6b6b;
    font-size: 16px;
    line-height: 1;
}

.fix__score--won {
    color: #111111;
    font-weight: 700;
}

/* A game being played says so on its own score, so a glance down the list
   tells live from finished without reading a word. */
.fix__score--live {
    color: #e2483d;
    font-weight: 700;
}

.fix__played--live {
    color: #e2483d;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* "at" sits between the two teams on its own rule. */
.fix__at {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0;
    color: #9a9a9a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.fix__at::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #ececec;
}

.fix__played {
    flex: none;
    color: #9a9a9a;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The market grid. */
.fix__odds {
    grid-column: 2;
    grid-row: 1;
}

.fix__heads,
.fix__grid {
    display: grid;
    grid-template-columns: repeat(3, 78px);
    gap: 6px;
}

.fix__heads {
    margin-bottom: 6px;
    color: #6b6b6b;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

/* When and where, under the teams. */
/* When and where runs the full width under both columns, so the venue is
   not squeezed by the price grid beside it. */
.fix__when {
    margin: 0;
    min-width: 0;
    color: #6b6b6b;
    font-size: 12px;
    white-space: nowrap;
}

/* A dot between each part. */
.fix__when span + span::before {
    content: "· ";
    color: #c9c9c9;
}

.fix__where {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Two days side by side, each keeping its own games stacked beneath its
   heading. */
/* Games flow across two columns in kickoff order; each date heading spans
   both so a new day always starts a fresh line. */
#schedule {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    align-items: stretch;
    padding: 0 0 20px;
}

/* The crest and name are just a link — no box around them. */
.fix .crest {
    padding: 0;
    border-radius: 0;
}

.fix .crest:hover {
    background: none;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fix__odds {
    justify-self: end;
}

/* Two columns need room for two price grids; below that they stack. */
@media (max-width: 900px) {
    #schedule {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Nothing boxes the crest and name in a matchup. */
.fix .crest,
.fix .crest:hover,
.fix .crest:focus {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

/* Every price button is the same height, its value centered both ways —
   a win has one line where a spread has two, and it should still sit
   in the middle of its button. */
.fix__grid {
    align-items: stretch;
}

.fix__grid .odd {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 52px;
    text-align: center;
}

/* ===== A line of odds ======================================================
   Team on the left, the three markets on the right. Used by the game's odds
   tab and by the scorecast. */

.oddsbox {
    max-width: 560px;
}

.figureline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 6px 0;
}

.figureline__team {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.figureline__grid {
    display: grid;
    grid-template-columns: repeat(3, 78px);
    align-items: stretch;
    gap: 6px;
}

.figureline__grid > .odd {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    text-align: center;
}

/* The heading row above them. */
.figureline--heads {
    padding-bottom: 6px;
    border-bottom: 1px solid #e6e6e6;
}

.figureline--heads .figureline__team,
.figureline--heads .figureline__grid > span {
    color: #6b6b6b;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

.figureline--heads .figureline__team {
    text-align: left;
}

/* ===== Scorecast odds =====================================================
   The table was stretching the team names away from their prices. */

.odds {
    max-width: 560px;
}

.board__table th,
.board__table td {
    text-align: center;
}

.board__table .board__team {
    text-align: left;
}

.board__table td {
    width: 78px;
}

/* A name inside a table is a link like any other — say so. */
.stat-table .jump,
.qb-cell .jump {
    color: #0b6fe8;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.stat-table .jump:hover,
.qb-cell .jump:hover {
    color: #111111;
}

.screen--tinted .stat-table .jump {
    color: #0b6fe8;
}

/* ===== Club records =============================================
   Last season's form on a team page: a ranking dial, the tally, and the
   home/road plus favorite/underdog splits underneath. */

.board-line {
    margin: 0 0 14px;
    font-size: 13px;
    color: #56606b;
}

.board-heading {
    margin: 26px 0 12px;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #56606b;
}

.board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.board-grid--pair {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.board-card {
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    padding: 14px 16px 6px;
    background: #ffffff;
}

.board-card__title {
    margin: 0 0 12px;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #56606b;
}

.board-card__head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 12px;
}

/* The dial from the source page, drawn as a plain ring in club colors. */
.board-rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border: 4px solid var(--team, #0b6fe8);
    border-radius: 16px;
    text-align: center;
}

.board-rank strong {
    font-size: 17px;
    line-height: 1.1;
}

.board-rank span {
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #56606b;
}

.board-totals {
    display: flex;
    gap: 20px;
}

.board-total {
    display: flex;
    flex-direction: column;
}

.board-total__label {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #56606b;
}

.board-total__count {
    font-size: 22px;
    font-weight: 700;
}

.board-table th[scope="row"] {
    text-align: left;
    white-space: nowrap;
}

.board-table td {
    text-align: center;
    white-space: nowrap;
}

/* The season picker above the records. */
.board-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.board-picker__label {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #56606b;
}

.board-picker__select {
    font: inherit;
    font-size: 14px;
    padding: 6px 10px;
    border: 1px solid #d5d9de;
    border-radius: 8px;
    background: #ffffff;
    color: inherit;
}

/* ===== Stadiums ====================================================
   The list of grounds, and one ground's record with the filters on top. */

.venue-heading {
    margin: 18px 0 10px;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #56606b;
}

.venue-heading:first-child {
    margin-top: 0;
}

.venue-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
}

.venue-row {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    background: #ffffff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.venue-row:hover {
    border-color: #0b6fe8;
}

.venue-row__name {
    font-weight: 600;
}

.venue-row__where,
.venue-row__count {
    font-size: 12px;
    color: #56606b;
}

/* ---- The filter bar ---- */

.venue-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 20px 14px;
}

.picker {
    position: relative;
    display: grid;
    gap: 4px;
}

.picker__label {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #56606b;
}

.picker__btn,
.picker__select {
    font: inherit;
    font-size: 14px;
    min-width: 160px;
    padding: 8px 12px;
    border: 1px solid #d5d9de;
    border-radius: 8px;
    background: #ffffff;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.picker__btn {
    display: grid;
}

.picker__btn .picker__label {
    display: none;
}

.picker__panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    width: max-content;
    min-width: 100%;
    max-height: 300px;
    margin-top: 4px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid #d5d9de;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(17, 17, 17, .16);
}

.picker__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.picker__row:hover {
    background: #f4f6f8;
}

.picker__row--all {
    margin-bottom: 4px;
    border-bottom: 1px solid #eceff2;
    border-radius: 6px 6px 0 0;
    font-weight: 600;
}

/* ---- The panels ---- */

.venue-body {
    padding: 0 20px 24px;
    overflow-y: auto;
}

.venue-card {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
}

.venue-card__title {
    margin: 0 0 12px;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #56606b;
}

.venue-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
}

.venue-stat {
    display: grid;
    gap: 2px;
}

.venue-stat strong {
    font-size: 22px;
}

.venue-stat span {
    font-size: 12px;
    color: #56606b;
}

.venue-note {
    margin: 12px 0 0;
    font-size: 12px;
    color: #56606b;
}

/* ---- Quarter bars ---- */

.quarters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.quarter {
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
}

.quarter__bar {
    width: 100%;
    max-width: 70px;
    min-height: 4px;
    border-radius: 6px 6px 0 0;
    background: var(--team, #0b6fe8);
}

.quarter strong {
    font-size: 18px;
}

.quarter span {
    font-size: 11px;
    color: #56606b;
}

/* ---- Results ---- */

.results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.resultcard {
    padding: 12px 14px;
    border: 1px solid #eceff2;
    border-radius: 10px;
}

.resultcard__when {
    margin: 0 0 10px;
    font-size: 12px;
    color: #56606b;
}

.resultcard__flag {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f0f3f6;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.resultcard__score {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.result-side {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.resultcard__score .result-side:last-child {
    flex-direction: row-reverse;
}

.result-side__form {
    font-size: 11px;
    color: #56606b;
}

.result-side__score {
    margin-left: auto;
    font-size: 20px;
    font-weight: 700;
}

.resultcard__score .result-side:last-child .result-side__score {
    margin: 0 auto 0 0;
}

.result-side__score--win {
    color: #0b6fe8;
}

.resultcard__ft {
    font-size: 11px;
    letter-spacing: .06em;
    color: #56606b;
}

.resultcard__grid td,
.resultcard__grid th[scope="col"] {
    text-align: center;
}

.resultcard__grid th[scope="row"] {
    text-align: left;
    white-space: nowrap;
}

/* ===== Game insights ==============================================
   The market's read on a fixture: implied prices, the facts behind
   them, streaks, systems, ranks and the head to head. */

.factchip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
}

.factchip__market {
    color: #56606b;
}

.factchip__side {
    font-weight: 600;
}

.factchip__odds {
    color: #0b6fe8;
    font-weight: 600;
}

.implied__bar {
    display: flex;
    height: 10px;
    margin-bottom: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: #eceff2;
}

.implied__half--away {
    background: #9aa4ae;
}

.implied__half--home {
    background: var(--team, #0b6fe8);
}

.implied__ends {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.factlist {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.factline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #eceff2;
}

.factline:last-child {
    border-bottom: 0;
}

.fact__text {
    margin: 0;
    flex: 1 1 240px;
    font-size: 14px;
}

.venue-line {
    margin: 0 0 12px;
    font-size: 14px;
}

.runs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.run {
    display: grid;
    gap: 6px;
    justify-items: start;
    padding: 12px;
    border: 1px solid #eceff2;
    border-radius: 10px;
}

.run__team {
    margin: 0;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #56606b;
}

.run__text,
.run__count {
    margin: 0;
    font-size: 14px;
}

.run__count strong {
    font-size: 20px;
}

.rank-table th[scope="row"] {
    text-align: center;
    white-space: nowrap;
}

.rank-table td {
    text-align: center;
}

.h2h-lines {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.h2h-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    font-size: 14px;
}

.h2h-line span:last-child {
    text-align: right;
}

.h2h-line__label {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #56606b;
    text-align: center;
}

.season-sides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.season-side__team {
    margin: 0 0 10px;
    font-weight: 600;
}

.formlist {
    display: grid;
    gap: 2px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.formlist__row {
    display: grid;
    grid-template-columns: 62px 22px minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #f2f4f6;
    font-size: 13px;
}

.formlist__week,
.formlist__at {
    color: #56606b;
}

.formlist__score {
    font-variant-numeric: tabular-nums;
}

/* ===== League tables ==============================================
   Standings, team stats and player stats: a row of dropdowns over one
   wide table. */

.league-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
}

.tabs--inline {
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    border: 0;
}

.league-group {
    margin: 20px 0 8px;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #56606b;
}

.league-group:first-child {
    margin-top: 0;
}

.league-table td {
    text-align: center;
    white-space: nowrap;
}

.league-table th[scope="row"] {
    text-align: left;
    white-space: nowrap;
}

.last5 {
    display: inline-flex;
    gap: 3px;
}

/* ===== The huddle =================================================
   A club's other players, and one of them opened. */

.huddle__spot {
    margin: 14px 0 6px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #56606b;
}

.huddle-side + .huddle-side {
    margin-top: 26px;
}

.huddle__club {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
}

#huddle-screen .league-filters,
#huddle-screen .league-body {
    padding: 0 20px;
}

#huddle-screen .league-body {
    overflow-y: auto;
}

.run__moved {
    margin: 0;
    font-size: 12px;
    color: #56606b;
}

.prop__waiting,
.prop__none {
    font-size: 12px;
    color: #56606b;
}

/* ===== How a game settled ==========================================
   One market a cell: what it was, then how it landed. */

.settled-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px 20px;
}

.settled {
    display: grid;
    gap: 2px;
    align-content: start;
    min-width: 0;
}

.settled__kind {
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #56606b;
}

.settled__side {
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ===== Futures chart ===============================================
   How a season-long price has drifted, drawn as plain SVG. */

.chart {
    margin-bottom: 18px;
    overflow-x: auto;
}

.chart svg {
    display: block;
    width: 100%;
    min-width: 520px;
    height: auto;
}

.chart__tick {
    font-size: 10px;
    fill: #56606b;
}

.chart__tick--foot {
    text-anchor: middle;
}

/* A figure inside a chip reads like any other. */
.factchip .odd {
    padding: 4px 10px;
}

.factchip .figure__line {
    font-size: 12px;
}

/* A futures cell: the price, and the button that opens its history. */
.future-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.future-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1.5px solid #1a7f37;
    border-radius: 50%;
    background: none;
    color: #1a7f37;
    cursor: pointer;
}

.future-chart svg {
    width: 15px;
    height: 15px;
}

.future-graph:empty {
    display: none;
}

.future-graph {
    margin-bottom: 18px;
}

.book-list {
    font-size: 13px;
    line-height: 1.5;
}

.book-plays {
    margin: 0 0 6px;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.6;
}

.book-plays__qtr {
    color: #56606b;
}

.book-play {
    text-align: left !important;
    white-space: normal !important;
    min-width: 320px;
}

/* ===== The game book ==============================================
   Lineups in four columns, and the play by play as it reads. */

.book-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.book-lineup {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.7;
}

.book-lineup__spot {
    display: inline-block;
    width: 34px;
    color: #56606b;
}

.book-lineup__no {
    display: inline-block;
    width: 26px;
    color: #56606b;
    text-align: right;
    margin-right: 8px;
}

.book-pbp {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.7;
}

.book-pbp li {
    margin-bottom: 2px;
}

.book-pbp__score {
    font-weight: 600;
}

/* The touchdown leader boards, five deep each. */
.tdboards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.tdboard {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tdboard li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f2f4f6;
    font-size: 14px;
}

.tdboard li:last-child {
    border-bottom: 0;
}

.teamcard__snaps {
    display: block;
    font-size: 11px;
    color: #56606b;
}

.head-year {
    margin-left: 12px;
}

.weeks__season {
    margin-right: 14px;
}

/* A man with no page of his own is a card, not a button. */
.teamcard--flat:hover {
    border-color: #e6e6e6;
}

.teamcard--flat .teamcard__open {
    cursor: default;
}

/* The picture with the name under it; everything else stays to the side. */
.page-head__id {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: none;
}

.page-head--split .page-head__name {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.page-head__first,
.page-head__last {
    font-size: inherit;
    font-weight: inherit;
}

/* The season picker sits in the table's empty corner. */
/* The picker lives in the header, so the yellow runs the whole way across. */
.totals__lead {
    vertical-align: middle;
}

.totals-year {
    min-width: 96px;
    max-width: 108px;
    padding: 4px 8px;
    border: 1px solid rgba(17, 17, 17, .25);
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: inherit;
    cursor: pointer;
}

/* Everything has to fit the card: the numbers set the column widths and the
   head gives the table whatever room it needs. */



.totals th,
.totals td {
    padding: 5px 7px;
}

.totals thead th {
    font-size: 10px;
    letter-spacing: 0.04em;
}

/* The name sits dead centre of the bar, whatever the icons either side. */
.screen__bar--titled .screen__title {
    margin: 0;
    text-align: center;
    justify-self: center;
}

.screen__no {
    color: inherit;
    font-weight: 500;
}

.page-head__club {
    margin: 0;
    font-size: 13px;
    text-align: center;
}

/* Height, weight and birthday read as one line under the club. */
.page-head__club {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.page-head__vitals {
    font-size: 12px;
    color: #6b6b6b;
}

.screen--tinted .page-head__vitals {
    color: var(--ink);
    opacity: .85;
}

/* Everything else about him, on one line under the block. */
/* One line, read as a sentence: From … · CFB … · Draft … The three were flex
   blocks that broke onto lines of their own; inline text wraps mid-line the
   way a line of prose does and stays one thing. */
.page-head--split .page-head__sub {
    display: block;
    text-align: center;
    margin-top: 12px;
}

.page-head--split .factlist,
.page-head--split .fact {
    display: inline;
}

/* The dot between them belongs to the pair, not to either one — so the last
   fact never trails one. */
.page-head--split .fact + .fact::before {
    content: " · ";
    opacity: 0.45;
}

/* The picture squares off against the table beside it. */
.page-head--split .page-head__photo,
.page-head--split .page-head__photo img {
    width: 142px;
    height: 142px;
}

/* The home page: the mark, then what the place is for. Posts go beneath it
   when there are any. */
/* Home stands clear of the follow strip above it rather than starting the
   moment the strip ends. */
/* The hero takes the whole of the home panel rather than only as much as its
   words need. The drift is pinned to its edges, so a hero that stopped at the
   lede left the crests floating in the top of the screen with a band of empty
   white between them and the nav. */
.hero {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 0;
    padding: 40px 20px 32px;
    text-align: center;
    overflow: hidden;
}

/* ---- The home drift ---- */

/* Crests and faces wander behind the mark, each from its own place and in its
   own direction. It sits under everything and takes no clicks, so the page
   reads exactly as it did. */
.drift {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Every mark is placed by the script, which holds its own position and moves
   it with a transform — so the browser is never asked to reflow the page. */
.drift__mark {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: clamp(26px, 6vw, 46px);
    height: clamp(26px, 6vw, 46px);
    padding: 0;
    border: 0;
    background: none;
    opacity: 0.28;
    will-change: transform;
}

.drift__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The mark and the words sit above the drift, on a soft wash so whatever
   passes behind them never fights the reading. */
.hero__front {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    min-height: 0;
    padding: clamp(16px, 4vw, 30px) clamp(18px, 6vw, 44px);
    border-radius: 20px;
    background: radial-gradient(closest-side,
        rgba(255, 255, 255, 0.94) 60%, rgba(255, 255, 255, 0) 100%);
}

.hero__mark {
    width: 100%;
    max-width: 520px;
    height: auto;
    max-height: 100%;
    min-height: 0;
    object-fit: contain;
}

.hero__lede {
    margin: 0;
    max-width: 44ch;
    font-size: 17px;
    line-height: 1.5;
    color: #4a4a4a;
}

/* ---- The masthead ----
   A band across the top of every page rather than a screen of its own: it
   takes only the room the mark needs and hands the rest to whatever is below.
   It sits on every page, so it must be shallow. */
.hero--head {
    flex: none;
    gap: 10px;
    padding: 14px 20px 12px;
}

.hero--head .hero__front {
    gap: 10px;
    padding: 0;
    background: none;
}

/* The mark is sized on the button, and the picture fills it — a block button
   in a centered column has no width of its own to give the picture. */
.hero--head .hero__home {
    width: min(210px, 52vw);
}

.hero--head .hero__mark {
    width: 100%;
    max-width: 100%;
}

/* The mark is the way home, so it is a button — but it must read as the mark
   and not as a control. */
.hero__home {
    display: block;
    max-width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

/* The line under the mark, in a box of its own: small, spaced and uppercase,
   so it reads as part of the mark rather than as a sentence. */
.hero__lede--boxed {
    max-width: none;
    padding: 5px 12px;
    border: 1.25px solid #111111;
    border-radius: 7px;
    color: #111111;
    font-size: clamp(10px, 2.6vw, 12px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.blog:empty {
    display: none;
}

/* The news page holds one post, so it should sit on the screen whole rather
   than scroll. The hero gives back whatever room is left. */
#blog-feed {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: hidden;
}

/* The mark names the feature itself. With no word under it, it stands as
   tall as an icon and its label together. */
.tab__icon--mark {
    width: auto;
    height: 40px;
    max-width: 96px;
    object-fit: contain;
}

/* The header is now 560px wide, so the totals scale to what is left rather
   than running past the edge. */
.page-head--split .page-head__photo,
.page-head--split .page-head__photo img {
    width: 96px;
    height: 96px;
}


.totals th,
.totals td {
    padding: 4px 5px;
}

.totals thead th {
    font-size: 9px;
    letter-spacing: 0;
}

.totals tbody td {
    font-size: 15px;
}

.totals tbody th {
    font-size: 12px;
}

.totals-year {
    min-width: 84px;
    max-width: 92px;
    padding: 3px 5px;
    font-size: 11px;
    letter-spacing: 0;
}

/* The huddle from above: a ring of heads. */
.tabs__icon {
    width: 22px;
    height: 22px;
    margin-right: 6px;
    vertical-align: -5px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

/* One market a line: what it is, who it is on, and the price. */
.priced {
    margin: 0;
    padding: 0;
    list-style: none;
}

.priced__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f2f4f6;
}

.priced__row:last-child {
    border-bottom: 0;
}

.priced__kind {
    flex: 0 0 auto;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #56606b;
}

.priced__who {
    flex: 1 1 auto;
    font-weight: 600;
}

/* The next fixture: one line, then its six prices across. */
.nextgame__when {
    margin: 0 0 12px;
    font-size: 13px;
    color: #56606b;
    text-align: center;
}








/* One rounding for anything that frames a crest, a face or a mark. */
.chip__circle,
.chip__circle img,
.pick__badge,
.pick__badge--pair,
.page-head__photo,
.page-head__photo img,
.shot,
.pick--player .shot,
.pick--player .shot img,
.teamcard__shot {
    border-radius: 22%;
}

/* The picture and the totals sit together in one white card on the club's
   color, with the picture on its own white ground. */


.page-head--split .page-head__photo {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    box-shadow: none;
    margin-right: 10px;
}

.page-head__id {
    gap: 6px;
}

/* On the books: a green dot before his name. */
.screen__title--active::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    background: #1a7f37;
    vertical-align: 1px;
}

/* The five columns share what room is left after the picture. */
.page-head--split .page-head__photo,
.page-head--split .page-head__photo img {
    width: 84px;
    height: 84px;
}

.totals th,
.totals td {
    padding: 4px 4px;
}

.totals tbody td {
    font-size: 14px;
}

.totals thead th {
    font-size: 9px;
}

.totals-year {
    min-width: 76px;
    max-width: 84px;
    font-size: 10px;
    padding: 3px 4px;
}

/* Height, weight and birthday stack under the picture at the card's size. */
.vitals {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 11px;
    line-height: 1.35;
}

.vitals .fact em {
    color: #6b6b6b;
    font-style: normal;
    margin-right: 3px;
}

/* The card is white, so what sits inside it reads dark whatever the club's
   color behind it. */

.screen--tinted .vitals .fact em {
    color: #6b6b6b;
}

/* The picture column takes only what its details need; everything else goes
   to the table, so the columns stop crowding each other. */

.page-head__id {
    align-items: center;
    width: max-content;
}

.page-head--split .page-head__photo {
    margin-right: 0;
}

.totals th,
.totals td {
    padding: 5px 7px;
}

.totals tbody td {
    font-size: 15px;
}

.totals thead th {
    font-size: 10px;
}

/* No card around the picture and the table — the frame was what squeezed the
   last column off the end. */


.totals {
    width: auto;
    min-width: 0;
}

/* One card around the picture and the table together. */



/* ===== The player card ============================================
   One card holding the picture and his totals. It is bounded by the
   modal, and the table takes whatever the picture leaves — the last
   column has to fit, so nothing here may size to its content. */

.page-head__main {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(17, 17, 17, .12);
}

.page-head__id {
    flex: 0 0 auto;
}

.page-head__totals {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

.totals {
    width: 100%;
    table-layout: fixed;
}

.totals th,
.totals td {
    padding: 5px 3px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.totals thead th {
    font-size: 9px;
    letter-spacing: 0;
}

.totals tbody td {
    font-size: 14px;
}

.totals tbody th {
    font-size: 11px;
}

.totals__lead {
    width: 84px;
}

.totals-year {
    width: 100%;
    min-width: 0;
    max-width: none;
    font-size: 10px;
    padding: 3px 2px;
}

/* His measurements take the club's color so they read apart from the
   numbers in the table beside them. */
.screen--tinted .vitals,
.screen--tinted .vitals .fact {
    color: var(--team);
    font-weight: 600;
}

.screen--tinted .vitals .fact em {
    color: #8a8f96;
    font-weight: 400;
}

/* The picker takes only the room its label needs, so the columns spread into
   what is left instead of leaving a gap before GP. */
.totals {
    table-layout: auto;
}

.totals__lead {
    width: 1%;
    white-space: nowrap;
    padding-right: 8px !important;
}

.totals-year {
    width: auto;
    min-width: 0;
    padding: 4px 22px 4px 8px;
    font-size: 11px;
    /* The arrow sits beside the year rather than under it. */
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 10px center, right 6px center;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    border-radius: 10px;
}

.totals th,
.totals td {
    padding: 5px 6px;
}

/* Rounded, as the card around it is. */
.page-head__totals,
.totals {
    border-radius: 12px;
    overflow: hidden;
}

.totals thead th:first-child {
    border-top-left-radius: 12px;
}

.totals thead th:last-child {
    border-top-right-radius: 12px;
}

/* A followed thing is gold wherever it shows — the club's ink on a tinted
   page must not take the star's own color off it. */
.star[aria-pressed="true"] svg,
.bell[aria-pressed="true"] svg,
.screen--tinted .star[aria-pressed="true"] svg,
.screen--tinted .bell[aria-pressed="true"] svg {
    fill: #f5b301;
    stroke: #f5b301;
}

/* Search shows each kind as it shows on its own tab: clubs and quarterbacks
   as cards, a game as the row it already was, spanning the grid. */
.teamgrid--search {
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 0 0 16px;
}

.teamgrid--search > .teamcard {
    grid-column: span 3;
}

.teamgrid--search > .teamcard--player {
    grid-column: span 3;
}

.teamgrid--search > .teamgrid__row {
    grid-column: 1 / -1;
}

.teamgrid__row {
    list-style: none;
}

.teamgrid__row .picks {
    margin: 0;
    padding: 0;
}

.teamgrid--search .teamcard,
.teamgrid--search .teamcard__open,
.teamgrid--search .pick {
    border-radius: 14px;
}



/* ===== All Teams ==========================================================
   The league as it is organised: two conferences side by side, four
   divisions across each, the clubs beneath their own division. */

.conferences {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    padding: 0 16px 20px;
}

.conf__name {
    margin: 0 0 10px;
    font-family: "Archivo", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-stretch: 75%;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 0.02em;
}

.conf__divisions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.division__name {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b6b6b;
}

.division__clubs {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Narrow columns, so the crest sits close to the initials rather than
   across the card from them. */
.division__clubs .teamcard__open {
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 10px;
}

.division__clubs .teamcard__abbr {
    font-size: 20px;
}

.division__clubs .teamcard__crest {
    width: 30px;
    height: 30px;
}

.division__clubs .teamcard__star {
    top: 4px;
    right: 4px;
}

.division__clubs .teamcard__star svg {
    width: 15px;
    height: 15px;
}

@media (max-width: 900px) {
    .conferences {
        grid-template-columns: minmax(0, 1fr);
    }

    .conf__divisions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===== What he follows ====================================================
   The panel reads like the picker: a box to type in, a chip per kind, and
   each followed thing in its own rounded square. */

/* A followed thing is one line of text and a couple of icons; stretched the
   width of a desktop window it reads as a rule, not a row. */
#favs-search-box,
#favs-segments,
.picks--panel {
    flex: none;
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.picks--panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.picks--panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px 16px;
}

.picks--panel .pick {
    width: 100%;
    gap: 10px;
    padding: 12px 16px;
    border: 1.5px solid #e6e6e6;
    border-radius: 14px;
    border-top: 1.5px solid #e6e6e6;
}

.picks--panel .pick:hover {
    background: #fafafa;
}

/* Crests on the follow strip need air: two chips side by side ran into
   one another. */
.chip__circle img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.chip-rail__list {
    gap: 22px;
}

/* A followed thing inside the picker takes the whole width: crest, name,
   then the bell and the star closing the row. */
/* Two to a row, the same as every other kind on these lists. */
.teamgrid--search > .pick {
    grid-column: span 3;
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border: 1.5px solid #e6e6e6;
    border-radius: 14px;
}

.teamgrid--search > .pick .pick__name {
    flex: 1 1 auto;
    justify-content: flex-start;
    text-align: left;
    min-width: 0;
}

.teamgrid--search > .pick .bell,
.teamgrid--search > .pick .star {
    flex: none;
}

/* His club sits beside his number in the bar and opens its own page. */
.screen__club .jump {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.screen__club .jump:hover {
    text-decoration: underline;
}

/* His size and his age, a line each, no labels. */
.vitals__line {
    display: block;
    white-space: nowrap;
}

/* The long name of a market, set small beside its short one. */
.market__note {
    font-weight: 400;
    font-size: 11px;
    color: #6b6b6b;
}

/* The markets, listed plainly until there are numbers to put beside them. */
.marketlist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.marketlist__row {
    padding: 10px 14px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    font-weight: 600;
}

/* ===== Spy ================================================================
   It used to be the fixture and the poll pinned at the top with his last five
   scrolling in a box underneath, so the pane itself was told not to scroll.
   The last five has gone and nothing inside scrolls any more — so the pane
   does its own scrolling again, the way every other pane does. */

.lastfive {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* The poll is called by market rather than by an unlabelled dot. */
.poll__kind {
    padding: 6px 12px;
    border: 1px solid #d5d9de;
    border-radius: 10px;
    background: #ffffff;
    color: #56606b;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.poll__kind--on {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

/* On his Next Game tab the markets lead the poll, so the rule and the two
   sets of spacing above them left a band of empty page. */
.poll--stacked {
    padding: 10px 0 4px;
}

.poll--stacked .poll__dots {
    margin: 0 0 10px;
}

.poll--stacked + .nextgame__when, #player-screen .nextgame__when {
    margin-bottom: 8px;
}

/* The four markets sit two by two on the left, a rule between, his call
   beside them on the right. Both sides run the same height. */
.poll--stacked {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

/* The markets always lead, whichever order the markup happens to be in. */
.poll--stacked .poll__dots {
    order: -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    flex: 0 0 auto;
    width: 45%;
    margin: 0;
    padding-right: 16px;
    border-right: 1px solid #e6e6e6;
}

.poll--stacked .poll__kind {
    width: 100%;
    padding: 6px 8px;
    font-size: 11px;
    text-align: center;
}

.poll--stacked .poll__slides {
    flex: 1 1 auto;
    min-width: 0;
}

.poll--stacked .poll__slide {
    height: 100%;
}

.poll--stacked .poll__choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
}

.poll--stacked .poll__choices .choice {
    flex: 1 1 0;
    padding: 6px 10px;
    font-size: 13px;
}

/* What he has called, on the fixture he called it for: the heading and the
   fixture read across one line, his picks under them. */
.picked__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.picked__head .venue-card__title {
    margin: 0;
}

.picked__when {
    font-size: 12px;
    color: #56606b;
}

.picked__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.picked__chip {
    padding: 8px 12px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* One quarterback's calls: his name, the fixture they are on, then the
   calls themselves. */
.selection {
    padding: 14px 16px;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    list-style: none;
}

.selection__who {
    margin: 0 0 2px;
    font-weight: 700;
    font-size: 16px;
}

.selection__who .jump {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.selection__when {
    margin: 0 0 10px;
    font-size: 12px;
    color: #56606b;
}

/* A settled call: green where it landed, red where it did not. */
.picked__chip--won {
    border-color: #1a7f37;
    background: #e8f5ec;
    color: #146c2e;
}

.picked__chip--lost {
    border-color: #c9302c;
    background: #fdeceb;
    color: #a92622;
}

/* His name and the fixture on the left, the calls beside them rather than
   flung out to the far edge — a single call left a field of nothing between
   the two. */
.selection {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px 20px;
}

.selection__text {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}

.selection .picked__row {
    flex: 1 1 auto;
    justify-content: flex-start;
}

.selection__who,
.selection__when {
    margin: 0;
}

/* The block is only as wide as its own contents need — stretched across a
   desktop window it left a field of nothing between the name and the calls. */
#pulse-picks,
#pulse-sort {
    width: 100%;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.selection {
    gap: 10px 20px;
}

/* The date a game was played sits quieter than the numbers beside it. */
.log-date {
    white-space: nowrap;
    color: #56606b;
}

/* The present sits in a lane of its own to the left of the week. The lane is
   the same width on every row, so the week numbers stay where they were and
   no column moves. */
.stat-table th[scope="row"] {
    position: relative;
    padding-left: 22px;
}

.cake {
    position: absolute;
    left: 1px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #111111;
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* The splits sit under the rest of his Pulse, with room above them. */
.splitsblock {
    margin-top: 16px;
}

/* Three markets read as one column; four sit two by two. */
.poll--stacked .poll__dots {
    grid-template-columns: minmax(0, 1fr);
}

#player-screen .poll--stacked .poll__dots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Nothing between the fixture and the call. */
#team-screen .nextgame__when {
    margin-bottom: 8px;
    text-align: center;
}

#team-screen .poll--stacked {
    padding-top: 0;
    border-top: none;
}

/* ===== Game leaders =======================================================
   The two clubs either side of what they are leading in: the away club reads
   out from the left, the home club back from the right, the category down
   the middle. */

.leaders-table th[scope="col"]:first-child,
.leaders-table td:first-child,
.leaders-table .leader__cell:first-child {
    text-align: left;
}

.leaders-table th[scope="col"]:last-child,
.leaders-table td:last-child,
.leaders-table .leader__cell:last-child {
    text-align: right;
}

.leaders-table th[scope="col"]:nth-child(2) {
    text-align: center;
}

.leaders-table th[scope="col"] img {
    vertical-align: middle;
    margin-right: 6px;
}

.leaders-table th[scope="row"].leader__what,
.leader__what {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #56606b;
    white-space: nowrap;
}

.leaders-table th[scope="row"] {
    padding-left: 0;
}

/* The figure sits under his name, on the same edge as it. */
.leader__cell .leader__who,
.leader__cell .leader__line {
    display: block;
}

.leader__cell .leader__line {
    font-size: 12px;
    color: #56606b;
    white-space: nowrap;
}

/* The running score with each club's crest beside its own number. */
.play__score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.play__crest {
    vertical-align: middle;
}

/* A man in the box score wears his club's crest. */
.box__who {
    white-space: nowrap;
}

.box__crest {
    vertical-align: middle;
    margin-right: 6px;
}

.play__dash {
    color: #9aa2ab;
}

/* A settled call on a played game: what landed and what did not. */
.choice--won {
    border-color: #1a7f37;
    background: #e8f5ec;
    color: #146c2e;
}

.choice--lost {
    border-color: #c9302c;
    background: #fdeceb;
    color: #a92622;
}

.choice[disabled] {
    cursor: default;
    opacity: 1;
}

/* The two clubs read down the card, the fixture's details under them. */
.fix__who {
    align-items: flex-start;
}

/* The two clubs side by side with AT between them, each showing its code
   beside its crest and its name centered under the pair. */
.fix__teams {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.fix__team {
    flex: 1 1 0;
    min-width: 0;
}

/* A rule down the middle of the card with AT sitting on it, the line
   running behind the word rather than beside it. */
.fix__at {
    position: relative;
    flex: none;
    align-self: stretch;
    display: grid;
    place-items: center;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #9aa2ab;
}

.fix__at::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: #e6e6e6;
}



/* The kickoff across the top, the ground across the foot — both centered,
   both reading like the clubs' names between them. Plain blocks: an older
   rule laid the foot out as a flex row, which no amount of centering
   reaches. */
.fix__top,
.fix__when {
    display: block;
    margin: 0;
    padding: 0;
    color: #6b6b6b;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
}

/* Both lines centre on the card itself, so the top mirrors the foot. The
   star sits above the line in the corner rather than pushing it over. */
.fix__top {
    position: relative;
    z-index: 1;
}


/* The word covers the rule where it crosses it. */
.fix__at-word {
    position: relative;
    padding: 3px 4px;
    background: #ffffff;
}

.fix:hover .fix__at-word {
    background: #fafafa;
}

/* ===== A club on a card ===================================================
   Its code beside its crest, a rule under the pair, its name beneath — the
   same shape a fixture uses on the Matchups board. */

/* Tight to its contents: the mark, the rule, the name.

   It used to be two columns, the club's code beside its crest. The mark says
   the code now, so there is one thing on the row and it stands in the middle
   of the tile rather than in the left half of a grid still holding room for
   something that is gone. */
.teamcard__open {
    display: grid;
    grid-template-columns: auto;
    justify-items: center;
    justify-content: center;
    align-items: center;
    row-gap: 0;
    padding: 10px 16px;
}

.teamcard__crest {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

.teamcard__club {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    padding-top: 4px;
    border-top: 1px solid #e6e6e6;
    color: #6b6b6b;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

/* A quarterback's card keeps its own shape. */
.teamcard--player .teamcard__open {
    display: flex;
    justify-content: space-between;
    padding: 16px 18px;
}

/* Games in search and the picker: the same card the board draws, two to a
   row rather than one across the width. */
.teamgrid--search > .teamgrid__game {
    grid-column: span 3;
    list-style: none;
}

.teamgrid--search .fix {
    height: 100%;
}

/* Two to a row in a 560px sheet is a narrow card, so the club's code, its
   crest and the lines around them all come down a size and nothing runs past
   the card's edge. */
.teamgrid--search .fix {
    padding: 12px 12px;
    overflow: hidden;
}

.teamgrid--search .fix__abbr {
    font-size: 20px;
}

.teamgrid--search .fix__team .crest img,
.teamgrid--search .fix__team .pick__badge,
.teamgrid--search .fix__team .pick__badge--logo {
    width: 34px;
    height: 34px;
}

.teamgrid--search .fix__team .crest {
    column-gap: 6px;
}

.teamgrid--search .fix__top,
.teamgrid--search .fix__when,
.teamgrid--search .fix__name {
    font-size: 11px;
}

/* The ground and the city wrap rather than running off the side. */
.teamgrid--search .fix__when {
    white-space: normal;
}

.teamgrid--search .fix__name {
    white-space: normal;
    overflow-wrap: anywhere;
}

.teamgrid--search .fix__at {
    padding: 0 4px;
}



/* ===== A club's division ==================================================
   Read down the left edge of its card, so the cards need no headings over
   them. */

.teamcard {
    position: relative;
}

.teamcard__div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    padding: 6px 0;
    border-right: 1px solid #e6e6e6;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9aa2ab;
    white-space: nowrap;
    pointer-events: none;
}

.teamcard__open {
    padding-left: 38px;
}

/* All Teams: two across, the same as the quarterbacks and the same as these
   clubs read in Search and Favorites. */
.teamgrid--clubs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0 0 20px;
    list-style: none;
}


/* ==========================================================================
   Parked
   Features that are built and kept, but not shown for the moment. Nothing
   here is deleted: the markup, the styles and the script that drive each one
   are all still in place. Take data-parked off an element in index.html and
   the feature comes back exactly as it was.

   Parked today: the drifting club crests behind the home mark, the log-in
   button, the Pulse tab on the player, game and team pages, the polls those
   pages asked, and Pulse as the third tab in the bottom bar.
   ========================================================================== */
[data-parked] {
    display: none !important;
}

/* The polls the player and game pages asked before kickoff. The page writes
   two of them and the script writes the rest, so an attribute cannot reach
   them all — they are parked by name instead. Everything that built them,
   counted the votes and colored how they landed is still here. Delete this
   one rule and the questions are asked again. */
.poll {
    display: none !important;
}


/* ==========================================================================
   Search and Favorites: one thing to a line
   Both lists are the same grid, and a grid of two or three across turns a
   list of names into a wall. One column reads as a list, at a width that
   does not stretch a name across a desktop window.
   ========================================================================== */
.teamgrid--search {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    gap: 8px;
}

/* ==========================================================================
   Tab rows on a phone
   A row of tabs scrolls sideways rather than squeezing, and it starts at the
   left so the first tab is never hidden off the edge. The scrollbar itself
   is taken away — on a touch screen it is chrome over the labels.
   ========================================================================== */
@media (max-width: 640px) {

    .tabs {
        /* Centred, but "safe" — a row too wide to centre falls back to the
           start rather than clipping its first tab out of reach. */
        justify-content: safe center;
        padding: 0 12px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

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

    /* All / QB1 … QB4 with a search box on the end is wider than a phone, and
       the box was the part pushed off the edge. On a narrow screen the box
       takes the first line whole and the five buttons share the second. */
    #depth-tabs {
        flex-wrap: wrap;
        row-gap: 6px;
        overflow-x: visible;
    }

    #depth-tabs .tabs__btn {
        flex: 1 1 auto;
    }

    #depth-tabs .tabs__search {
        order: -1;
        width: 100%;
        margin-left: 0;
    }

    #depth-tabs .tabs__search .search__input {
        width: 100%;
    }
}


/* ==========================================================================
   The card on home
   The book's own picture behind it, kept visible: the wash is only as heavy
   as the words need, and the words carry their own shadow rather than the
   picture being blacked out under them.

   The four asks are strung on a dotted line, the same dot-and-dash the mark
   stands on at the top of the page — a thread through them rather than rules
   between them.
   ========================================================================== */

.factcard {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background-color: #14161c;
    background-position: center;
    background-size: cover;
    color: #ffffff;
}

/* Light at the head where the bursts are, and only as dark as it must be at
   the foot, where the buttons sit. */
.factcard__body {
    position: relative;
    padding: 22px 20px 20px;
    background: linear-gradient(180deg,
        rgba(10, 12, 18, 0.18) 0%,
        rgba(10, 12, 18, 0.34) 55%,
        rgba(10, 12, 18, 0.58) 100%);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.9);
}

.factcard__title {
    margin: 0 0 6px;
    font-family: Archivo, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-size: clamp(24px, 6.4vw, 34px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    /* Never two lines: the size is cut to the name, below. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.factcard__title--mid {
    font-size: clamp(19px, 4.9vw, 27px);
}

.factcard__title--long {
    font-size: clamp(15px, 3.9vw, 22px);
    letter-spacing: -0.02em;
}

/* When and where, always on one line. It is the same four parts on every
   card, so it should be the same shape on every card — at fourteen it was
   wider than a phone and only the long ones broke, which made the deck look
   ragged for no reason anybody could see. */
.factcard__blurb {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The thread the asks hang on: a dotted line down the picture column, the
   same dot-and-dash the mark used to stand on. It joins them — it is not a
   rule between them, and there is no rule between them. */
.factcard__lines {
    position: relative;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.factcard__lines::before {
    content: "";
    position: absolute;
    top: 25px;
    bottom: 25px;
    left: 16px;
    width: 0;
    border-left: 2px dotted rgba(255, 255, 255, 0.6);
}

/* A picture and what is being asked. Nothing rules one ask off from the next:
   the classes are the card's own, so the older .factline on the game pages
   cannot lend this one its border. */
.cardline {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    border: 0;
}

/* Whoever the line is about — a man's face, or a club's crest. It sits on the
   thread, so it carries the card's own ground behind it. */
.cardline__logo {
    position: relative;
    flex: none;
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    object-fit: cover;
    background: #14161c;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6);
}

/* A crest is a shape on nothing and must not be cropped; a face fills its
   square. */
.cardline__logo--crest {
    object-fit: contain;
    padding: 4px;
}

.cardline__said {
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

/* ==========================================================================
   What the card is given back
   The heat under the title, the reactions under the description, the bars
   under each ask, and a count on Share. All of it drawn in one weight, so
   the card reads as one thing and not as a toolbar.
   ========================================================================== */

.ico {
    width: 17px;
    height: 17px;
    flex: none;
    fill: currentColor;
    stroke: none;
}

/* Three of the four are line drawings; the flame and the thumb are solid. */
.ico--rising,
.ico--called {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ico--hot {
    fill: #ffb020;
}

/* ---- A line, its picture and its bar ---- */
.cardline {
    align-items: flex-start;
    /* Above the dotted thread, which is drawn on the list behind them. */
    z-index: 1;
}

/* The picture, with his numbers on the corner of it. */
.cardline__face {
    position: relative;
    flex: none;
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #14161c;
}

.cardline__logo {
    width: 38px;
    height: 38px;
}

/* Bottom right of the face, half off it, the way the books draw it. */
.cardline__stats {
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    padding: 0;
    background: #ffffff;
    border: 1.5px solid rgba(10, 12, 18, 0.55);
    border-radius: 7px;
    color: #111111;
    cursor: pointer;
}

.cardline__stats .ico {
    width: 11px;
    height: 11px;
}

.cardline__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    padding-top: 1px;
}

/* ---- The bar under each ask ----
   Where he is now on the left, the run to the line, a tick at the line, and
   the line itself under it. Before kickoff every one of these is zero, which
   is the truth: it fills as the game is played. */
.statbar {
    display: flex;
    align-items: center;
    gap: 9px;
}

.statbar__now {
    display: grid;
    place-items: center;
    flex: none;
    min-width: 26px;
    height: 20px;
    padding: 0 6px;
    border: 1.5px solid #ffb020;
    border-radius: 7px;
    color: #ffb020;
    font-size: 11px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-shadow: none;
}

/* Past the line, and it stops being a chase. */
.statbar__now--made {
    background: #ffb020;
    color: #111111;
}

.statbar__track {
    position: relative;
    flex: 1 1 auto;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.24);
}

.statbar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 2px;
    background: #ffb020;
    transition: width 0.4s ease;
}

/* Where the line sits on the run. */
.statbar__tick {
    position: absolute;
    top: -5px;
    bottom: -5px;
    width: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.85);
}


/* Lined up under the tick or the cross, so the eye reads down the right-hand
   edge: what was asked above, and where he got to below. */
.statbar__now {
    margin-left: auto;
}


/* ==========================================================================
   The foot of the card
   Set the way -------- sets the foot of a story: what has been given on the
   left, what can be done on the right, and air between them. Everything on
   this row is a mark — no words, since the mark says which it is.
   ========================================================================== */

.factcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* ---- What can be done ---- */
.factcard__acts {
    display: flex;
    align-items: center;
    gap: 18px;
}

.act {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.92);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    text-shadow: none;
}

.act .ico {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tracking fills the bell in, the way a set bell reads everywhere else. */
.act--on {
    color: #ffb020;
}

.act--on .ico {
    fill: #ffb020;
    stroke: #ffb020;
}

.act__count {
    font-variant-numeric: tabular-nums;
}

/* ---- What has been given ----
   The marks overlap into one cluster with a single total beside it, the way
   -------- stacks them at the foot of a story. Empty until something is
   given: a fresh card carries no row of blanks. */
.reactstack {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
    color: #9aa2ab;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    text-shadow: none;
    touch-action: none;
}

.disc {
    display: block;
    width: 27px;
    height: 27px;
    border-radius: 50%;
}

/* Each one sits over the one before it, first on top. */
.disc--stacked {
    margin-right: -9px;
}

.disc--stacked:first-child {
    z-index: 3;
}

.reactstack__count {
    margin-left: 15px;
    font-variant-numeric: tabular-nums;
}

/* ---- The four to choose from ----
   It comes up over the button rather than dropping below it, so the thumb
   that opened it is already under the row and can slide straight along. */
/* An author rule beats the browser's own [hidden], so hiding has to be said
   here too — without this the row is never away. */
.reactpick[hidden] {
    display: none;
}

.reactpick {
    position: absolute;
    right: 0;
    bottom: calc(100% - 6px);
    z-index: 4;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 10px;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(18, 20, 26, 0.94);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
}

.reactpick__one {
    display: block;
    cursor: pointer;
    transition: transform 0.13s cubic-bezier(0.2, 0.9, 0.3, 1.3);
    transform-origin: 50% 100%;
}

.disc--pick {
    display: block;
    width: 34px;
    height: 34px;
    /* The picture never takes the tap; the box around it does, so what is
       chosen is the same whether it was tapped or slid onto. */
    pointer-events: none;
}

/* The one under the thumb swells and lifts, so it is obvious which will be
   taken when he lets go. */
.reactpick__one--over {
    transform: translateY(-10px) scale(1.5);
}

/* The foot is what the row is measured from, and nothing on it should start
   a text selection or a scroll while a reaction is being chosen. */
.factcard__foot {
    position: relative;
    touch-action: manipulation;
}

.act {
    touch-action: none;
}

/* One subject's name, where a card is about more than one. */
.alerts__who {
    margin: 18px 0 6px;
    padding: 0 4px;
    color: #6b6b6b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---- The foot on a phone ----
   A hold has to be a hold: no selection, no callout, no magnifier, and no
   handing the gesture to the pane scrolling underneath. Safari needs all of
   these said out loud or the row comes up and dies on the first millimetre. */
.factcard__foot,
.reactpick {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.reactstack,
.act[data-react-open] {
    -webkit-tap-highlight-color: transparent;
}

/* Counts sit beside their mark on the same line, in the same grey, so the
   foot reads as one row of four rather than as icons with labels. */
.act__count {
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 800;
    color: #9aa2ab;
}

.act--on .act__count {
    color: inherit;
}

/* Share and the bell carry numbers and the face does not, so they are given
   a little more room and the row still sits even. */
.factcard__acts {
    gap: 20px;
}


/* ==========================================================================
   The quarterback's bar
   His face, his name, his number and his club on one line at the top of the
   page, between the back arrow and the icons — rather than a small name on
   the bar with a large picture under it.
   ========================================================================== */

/* Centered between the back arrow and the icons. The bar is three tracks and
   both outer ones have the same 76px floor, so the middle one is genuinely
   centered on the bar — and stays centered when the bell appears beside the
   star, since two icons still come in under that floor. */
#player-screen .screen__who {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    /* Held to its own track. Centred content sizes itself to what is in it
       and will happily run out under the icons either side, which is how the
       bell ended up behind the crest — the name gives way instead. */
    max-width: 100%;
    justify-self: center;
}

/* Small enough to sit on a bar, and squared off like every other picture on
   the site rather than rounded into a badge. */
#player-screen .page-head__photo {
    width: 42px;
    height: 42px;
    flex: none;
    /* No frame around it, but a pale ground under it — a cut-out headshot on
       the club's own color has nothing to sit on. */
    border: none;
    background: #ffffff;
    border-radius: 22%;
    overflow: hidden;
    font-size: 9px;
}

#player-screen .page-head__photo img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    object-position: top center;
}

/* The two pictures keep their size; the words between them are what gives
   way — by wrapping, not by being cut off. Both lines centre on each other. */
#player-screen .screen__naming {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
}

/* First and last on one line. Stacking them reads as two names rather than
   one, so the type gives way before the line does. */
#player-screen .screen__title {
    margin: 0;
    font-size: clamp(13px, 3.9vw, 16px);
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* The bar wears the club's color, so a fixed grey is dark-on-dark for half
   the league. It takes the bar's own ink, held back rather than dimmed to a
   color of its own. */
#player-screen .screen__meta {
    display: block;
    color: var(--ink, #6b6b6b);
    opacity: 0.78;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* The crest, the same size as his face and on the same line — the club said
   as a picture rather than as three letters. */
#player-screen .screen__crest {
    display: block;
    flex: none;
    width: 42px;
    height: 42px;
}

/* The bar wears the club's own color, so the club's own crest lands on top of
   itself and vanishes — the Rams' navy on Rams navy. It gets a pale ground of
   its own to stand on, a rounded square like every other picture here. */
#player-screen .screen__crest .jump {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 4px;
    background: #ffffff;
    border: none;
    border-radius: 22%;
    text-decoration: none;
    cursor: pointer;
}

#player-screen .screen__crest img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#player-screen .screen__meta .jump {
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

#player-screen .screen__meta .jump:hover {
    text-decoration: underline;
}


/* Room between the middle of the bar and the icons either side, so a wide
   name never runs right up against the star. */
#player-screen .screen__bar--titled {
    column-gap: 12px;
}

/* Room for a name that runs to two lines without the bar feeling tight. */
#player-screen .screen__bar--titled {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* The outer tracks only hold one icon on the left and two on the right, so
   their 76px floor was giving the name less room than the bar actually had.
   Sized to their contents instead, and the whole of the rest is the name's. */
#player-screen .screen__bar--titled {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

/* PTD and RTD carry their meaning in a title; the browser's dotted underline
   on an abbr would read as an error in a column heading. */
.totals abbr {
    text-decoration: none;
    cursor: help;
}


/* ==========================================================================
   Tightening the top of the page
   The mark, the follow strip and the tabs each carried desktop-sized padding,
   and on a phone that is most of the first screen gone before a single
   quarterback appears. The strip was the worst of it: one Add button in a
   band eighty points tall with the whole of the row empty beside it.
   ========================================================================== */

.chip-rail__list {
    gap: 12px;
    padding: 9px 16px 8px;
}

.chip__circle {
    width: 42px;
    height: 42px;
}

.chip__circle svg {
    width: 18px;
    height: 18px;
}

.chip__label {
    font-size: 11px;
}

/* The mark and its line, closer together and closer to what follows. */
.hero--head {
    gap: 7px;
    padding: 10px 20px 8px;
}

.hero--head .hero__front {
    gap: 7px;
}

/* The search box and the rungs, on one tighter block. */
#depth-tabs {
    padding-top: 4px;
}

.tabs__search .search__input {
    padding: 7px 12px;
}

/* The grid starts right under the tabs rather than a line lower. */
.teamgrid--players {
    padding-top: 12px;
    gap: 10px;
}

/* The quarterback list runs edge to edge on a phone — twenty points of gutter
   either side of a two-column grid is a column's worth of nothing. */
@media (max-width: 640px) {
    [data-pane-panel="qb-list"] {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 10px;
    }
}

/* The card was mostly air: an 88px face in a card twice that wide, with the
   name small under it. The face fills the width it is given and the padding
   comes in, so the card is the man rather than a frame around him. */
.teamcard--player .teamcard__open {
    gap: 8px;
    padding: 12px 10px 12px 32px;
}

.teamcard--player .teamcard__shot {
    width: 100%;
    max-width: 118px;
    height: auto;
    aspect-ratio: 1;
}

/* The strip narrows with it — twenty-six points for three short words is
   more than they need. */
.teamcard--player .teamcard__div {
    width: 22px;
    font-size: 8.5px;
    letter-spacing: 0.08em;
}

/* With the rungs gone the row is just the search box, so it takes the whole
   line on any screen rather than sitting on the end of an empty strip. */
#depth-tabs {
    border-bottom: none;
    padding-top: 0;
}

#depth-tabs .tabs__search {
    width: 100%;
    margin-left: 0;
}

#depth-tabs .tabs__search .search__input {
    width: 100%;
}


/* ==========================================================================
   His four numbers
   Pass Yds · Rush Yds · PTD · RTD inline across the top in the club's second
   color — the heading row the table always had — with the number under its
   own heading and, under that, where the number puts him among quarterbacks.
   ========================================================================== */

/* The base table sets every cell right, for columns of figures with a label
   on the left. This one has no label column — four headings over four
   numbers — so every cell is centred under its own heading. */
.totals--tiles th,
.totals--tiles td {
    text-align: center;
}

.totals--tiles {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    table-layout: fixed;
}

.totals--tiles thead th {
    padding: 7px 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
}

.totals--tiles abbr {
    text-decoration: none;
    cursor: help;
}

/* The number, large and on its own line under its heading. Proportional
   figures, not tabular — at this size tabular gives every digit the width of
   a nought and the number reads loose. */
.totals--tiles .totals__figures td {
    padding: 12px 6px 0;
    color: #111111;
    font-size: clamp(19px, 5.4vw, 25px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-align: center;
}

.totals--tiles .totals__places td {
    padding: 4px 6px 12px;
    font-size: 12px;
    text-align: center;
}

.totals--tiles .totals__places b {
    color: var(--team, #111111);
    font-weight: 800;
}

.totals--tiles .totals__places small {
    color: #6b6b6b;
    font-size: 11px;
    font-weight: 600;
}

.totals__nowhere {
    color: #9aa2ab;
}



/* ==========================================================================
   The season switch, on the bar
   It changes what every number on the page says, so it sits under his name
   where it is looked at — and it has to read as a thing you open. A bare
   select on a colored bar reads as a label, so it is given a ground of its
   own and a chevron drawn on the end.
   ========================================================================== */

#player-screen .screen__meta .totals-year {
    min-width: 0;
    padding: 4px 26px 4px 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--ink, #111111);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: center;
    cursor: pointer;

    /* The browser's own arrow is taken off so one can be drawn that takes the
       bar's ink rather than the system's. */
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 10px 7px;
}

#player-screen .screen__meta .totals-year:hover {
    border-color: rgba(255, 255, 255, 0.85);
}

/* The list itself is drawn by the system, on the system's own white. */
#player-screen .screen__meta .totals-year option {
    color: #111111;
    background: #ffffff;
}


/* ==========================================================================
   Info
   Who he is, off the head and onto a page: a plain list of label and answer,
   one to a row.
   ========================================================================== */

.info {
    margin: 0;
    max-width: 560px;
}

.info__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 2px;
    border-bottom: 1px solid #f0f0f0;
}

.info__row:last-child {
    border-bottom: none;
}

.info__label {
    flex: none;
    color: #6b6b6b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.info__value {
    margin: 0;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    text-align: right;
}

/* Nothing in the heading row wraps or clips — four short headings on one
   line, whatever the screen. */
.totals--tiles thead th {
    white-space: nowrap;
    overflow: visible;
}


/* ==========================================================================
   Spy
   Every card made about him, newest week first: the week over it, the card
   itself, and the fixture it is about underneath — so it is never a guess
   which game the four asks are for.
   ========================================================================== */

.spyweek {
    margin: 0 0 22px;
}

.spyweek:last-child {
    margin-bottom: 0;
}

/* The week and the game, once, over the card it belongs to — set exactly as
   the fixture line was set before, so it still sits on one row. Bold was
   what pushed it onto two. */
.spyweek__when {
    margin: 0 0 10px;
    color: #56606b;
    font-size: 13px;
    text-align: center;
}

/* ---- The huddle's cards ----
   The same card the quarterback grid uses, so the two read as one thing: his
   club, position and number down the edge, and his name stacked — what he is
   called over what he is filed under. */
.teamcard__first {
    display: block;
    font-family: "Archivo", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-stretch: 75%;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.1;
    color: #6b6b6b;
    overflow-wrap: anywhere;
}

.teamcard__snaps {
    display: block;
    margin-top: 3px;
    color: #6b6b6b;
    font-size: 11px;
    font-weight: 600;
}

/* A man with no page of his own is still a card, just not a pressable one. */
.teamcard--flat .teamcard__open {
    cursor: default;
}

/* The strip is as tall as its text, and the card clips what will not fit —
   so the card is given enough height for it and the text enough room to sit
   in. A huddle card has no face on it, so nothing else sets its height. */
.teamcard--flat,
.huddle-side .teamcard--player {
    min-height: 78px;
}

.teamcard--player .teamcard__div {
    font-size: 8px;
    letter-spacing: 0.06em;
    padding: 4px 0;
}


/* ---- Clubs and quarterbacks in Search and Favorites ----
   Each is drawn the way its own tab draws it — a club as its crest and code,
   a quarterback as face over name — so the same thing looks the same wherever
   it is found. Both cards are built for half a column, so a list holding them
   runs two across. A game stays one to a line: it is a wide row. */
.teamgrid--search:has(.teamcard) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* Clubs and quarterbacks both take one column of the two; a game is a wide
   row and still spans the pair. */
.teamgrid--search > .teamcard,
.teamgrid--search > .teamcard--player {
    grid-column: auto;
}

/* ==========================================================================
   One gutter
   A card was three different widths depending where it was found: the
   quarterbacks had a 12px gutter, All Teams had the pane's 20 plus its own
   16, and Search had 16 inside a list capped at 620. The gutter belongs to
   the pane, once, and every grid inside takes it.
   ========================================================================== */

/* The 620px cap was for a one-column list of rows. A two-column grid of
   cards should be as wide as the pane, like the quarterbacks. */
.teamgrid--search:has(.teamcard) {
    max-width: none;
}

@media (max-width: 640px) {
    .pane--scroll,
    .sheet__scroll {
        padding-left: 12px;
        padding-right: 12px;
    }

    .screen .sheet__scroll,
    .sheet .sheet__scroll {
        padding-top: 10px;
    }
}

/* ==========================================================================
   The club's bar
   Its crest and its name on one line at the top, as a quarterback's face and
   name are — the head below carries neither, so the page starts at its tabs.
   ========================================================================== */

#team-screen .screen__bar--titled {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}

#team-screen .screen__who {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    max-width: 100%;
    justify-self: center;
}

/* On the club's own color, a crest of that color needs a ground to stand on. */
#team-screen .page-head__photo {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    padding: 4px;
    border: none;
    background: #ffffff;
    border-radius: 22%;
    overflow: hidden;
}

#team-screen .page-head__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#team-screen .screen__naming {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex: 0 1 auto;
    min-width: 0;
}

/* "New England Patriots" is longer than any quarterback's name, and with the
   share button gone there is room for it — but it still gives way before the
   line does. */
#team-screen .screen__title {
    margin: 0;
    font-size: clamp(12px, 3.6vw, 16px);
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#team-screen .screen__meta {
    display: block;
    color: var(--ink, #6b6b6b);
    opacity: 0.78;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

/* Nothing left in the head but the sub, which is empty — so it takes no room
   and the tabs sit under the bar. */
#team-screen .page-head:empty,
#team-screen .page-head__sub:empty {
    display: none;
}

#team-screen .page-head {
    padding: 0;
}

/* ==========================================================================
   The crest button
   A <button> with its background and border taken off still wears the
   system's own button color — on iOS that is the accent blue, which is why
   NE and SEA came out blue on the matchups board. Every other button here
   says color: inherit; this one never did.
   ========================================================================== */
.crest {
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}




/* ==========================================================================
   The matchups controls
   Season, week and slot: three boxes on one line. They were three rows of
   chips with a word over each — most of the screen gone before a game showed,
   and the later weeks still hidden off the right-hand edge. A dropdown holds
   all eighteen weeks and the playoffs in the space one chip took.
   ========================================================================== */

#week-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    overflow: visible;
    border-bottom: 1px solid #e6e6e6;
}

/* The three share the line evenly, and the slot box takes its share only
   when there is one. */
.pick3 {
    flex: 1 1 0;
    min-width: 0;
    display: block;
}

.pick3[hidden] {
    display: none;
}

.pick3__select {
    width: 100%;
    padding: 9px 26px 9px 11px;
    background-color: #ffffff;
    border: 1px solid #d5d9de;
    border-radius: 8px;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;

    /* The system's arrow is taken off so all three carry the same one. */
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 10px 7px;
}

.pick3__select:hover {
    border-color: #b9c0c8;
}

/* The slot row is gone — it is the third box now. */
#day-picker {
    display: none;
}

/* ---- The game's cards ----
   Under the two clubs on the Matchup tab, set the way they are on a player's
   Spy tab so a card looks the same wherever it is found. */
.spygame {
    margin-top: 4px;
}

.spygame .spyweek:last-child {
    margin-bottom: 0;
}

/* ---- A book's card ----
   No picture behind it: these are the books' own cards, and what matters is
   the name and the legs. Dark ground, so it still reads as a card rather
   than as a list. */
.factcard--book {
    background-image: none !important;
    background-color: #14161c;
}

.factcard--book .factcard__body {
    background: none;
    text-shadow: none;
}

.factcard--book .factcard__title {
    font-size: clamp(19px, 5vw, 25px);
}

/* The pick sits above what it is a pick on — "1+" over "Jalen Hurts
   Touchdowns Scored". */
.cardline__pick {
    display: block;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.15;
}

.factcard--book .cardline__said {
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    font-weight: 600;
}

/* A tab of cards stacks them. */
.factdeck {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* A man we do not carry a page for: what he plays, on his club's colour.
   Better than a blank square and honest about what we know of him. */
/* The number the leg turns on, and under it whose and what. Same shape for a
   passing line, a touchdown and a club winning, so the eye reads down the
   card rather than across each line. */
.cardline__figure {
    display: block;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.cardline__said {
    display: block;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.68;
}

.cardline__spot {
    display: grid;
    place-items: center;
    align-content: center;
    width: 38px;
    height: 38px;
    border-radius: 22%;
    background: var(--team, #111111);
    color: #ffffff;
    letter-spacing: 0.04em;
    line-height: 1.05;
}

/* What he plays, over who he plays for — a leg about a man we do not track
   still has to say which sideline he is on. */
.cardline__spot b {
    font-size: 12px;
    font-weight: 900;
}

.cardline__spot i {
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    opacity: 0.75;
}

/* The card's name and, beside it, what it is made of — the short forms a
   board uses, so a glance says passing yards and a win without the
   card having to spell either out. */
/* ---- The mark, behind the card ----

   The vertical mark set into the card the way a watermark is set into paper,
   rather than a picture sitting on it. Pale enough that nothing has to be
   read through it, and square so a card of ten legs does not stretch it into
   a different drawing than a card of three shows.

   This lived only on the landing page, so a reader arriving from there met a
   watermarked card and then found a plain one in the app — the same object
   drawn two ways. */
.factcard__body {
    position: relative;
}

.factcard__body::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* It fits inside the card rather than being cropped by it. The mark is
       square: on a card of three legs the height is what it has to fit
       within, on a card of ten it is the width. The ratio holds the shape
       and max-height takes whichever is tighter, so it is never stretched to
       match a card that happens to be taller. */
    width: 104%;
    max-height: 94%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: url("img/qb-spy-vertical.png") center / contain no-repeat;
    /* Drawn in black; on a dark card it is turned white before it is faded. */
    filter: invert(1);
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

.factcard__head,
.factcard__lines,
.factcard__foot {
    position: relative;
    z-index: 1;
}

/* The name and its line on the left, the mark on the right, the same way
   the landing page sets it — a reader coming from there should meet the same
   object rather than a printed cousin of it.

   One size whatever the card is. A card of ten legs is three times the height
   of a card of three, and a mark that grew with it would be three times the
   size for saying exactly the same thing. */
.factcard__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: start;
}

.factcard__head .factcard__title { grid-column: 1; grid-row: 1; }
.factcard__head .factcard__blurb { grid-column: 1; grid-row: 2; }

.factcard__mark {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    width: 54px;
    height: auto;
    margin-top: 3px;
    opacity: 0.92;
}




/* Weeks already played: a tap away, never in the way. A finished week is no
   use for tracking, but it is the record of what was said beforehand. */
.spypast {
    margin-top: 14px;
}

.spypast__btn {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.03);
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.spypast__body {
    margin-top: 12px;
}

.spytabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.spytabs__btn {
    padding: 6px 10px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.spytabs__btn--on {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

/* What each group in the alerts sheet is — the man, a club, or the kickoff —
   so a name never sits over a list with nothing saying why it is there. */
.alerts__role {
    display: inline-block;
    margin-right: 7px;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.07);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity: 0.75;
    vertical-align: middle;
}

/* Cards inside one game sat flush against each other — the 22px belonged to
   the group, not to the cards in it, and a fixture can carry twenty. */
.spyweek .factcard + .factcard {
    margin-top: 12px;
}

.spyheld + .spyheld {
    margin-top: 22px;
}

/* ---- The bar under each ask ----
   Where he is now on the left, the run to the line, a tick at the line, and
   the line itself under it. Before kickoff every one of these is zero, which
   is the truth: it fills as the game is played. */
.cardline__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    padding-top: 1px;
}

.cardline__head {
    display: block;
    min-width: 0;
}

.statbar {
    display: flex;
    align-items: center;
    gap: 9px;
}

.statbar__now {
    display: grid;
    place-items: center;
    flex: none;
    min-width: 26px;
    height: 20px;
    padding: 0 6px;
    border: 1.5px solid #ffb020;
    border-radius: 7px;
    color: #ffb020;
    font-size: 11px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-shadow: none;
}

/* Past the line, and it stops being a chase. */
.statbar__now--made {
    background: #ffb020;
    color: #111111;
}

.statbar__track {
    position: relative;
    flex: 1 1 auto;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.24);
}

.statbar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 2px;
    background: #ffb020;
    transition: width 0.4s ease;
}

/* Where the line sits on the run. */
.statbar__tick {
    position: absolute;
    top: -5px;
    bottom: -5px;
    width: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.85);
}


/* Lined up under the tick or the cross, so the eye reads down the right-hand
   edge: what was asked above, and where he got to below. */
.statbar__now {
    margin-left: auto;
}

/* ---- A leg that has been settled ----
   Green when it came in, faded when it did not. Nothing at all until the game
   has been played, which is most of the time a card is read. */
.cardline__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.cardline__done {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 15px;
    height: 15px;
    margin-left: auto;
    color: #2fbf6b;
}

.cardline__done .ico {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cardline__done--no {
    color: #e2483d;
}

.cardline--made .cardline__figure {
    color: #2fbf6b;
}

/* A miss reads as a miss: the figure in red, the words faded behind it.
   Fading the whole line was the wrong tool — opacity opens a stacking context,
   and the dotted thread behind the pictures then painted over the faces. The
   colour is put on the parts instead, so nothing changes what sits above
   what. */
.cardline--missed .cardline__figure {
    color: #e2483d;
}

.cardline--missed .cardline__said {
    opacity: 0.6;
}

.cardline--missed .cardline__face {
    filter: grayscale(0.7);
}

.cardline--missed .statbar__now {
    border-color: #e2483d;
    color: #e2483d;
}

.cardline--missed .statbar__fill {
    background: #e2483d;
}

/* Made, and the bar stops being a chase. */
.cardline--made .statbar__fill,
.cardline--made .statbar__now--made {
    background: #2fbf6b;
}

.cardline--made .statbar__now {
    border-color: #2fbf6b;
    color: #111111;
}

/* ---- A spread's bar ----
   Nought in the middle, because a spread is settled either side of it. The
   run goes right by however much it covered and left by however much it did
   not — the same distance means the same thing on both sides. */
.statbar--spread .statbar__track {
    background: rgba(255, 255, 255, 0.14);
}

.statbar__from {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 2px;
    background: #e2483d;
}

.statbar__from--made {
    background: #2fbf6b;
}

/* A push: settled, and neither answer. A dash rather than a tick or a cross,
   and grey rather than either colour — it did not come in and it did not
   fail, so it must not read as though it did. */
.cardline__done--push {
    color: rgba(255, 255, 255, 0.5);
}

.cardline--push .cardline__figure {
    color: rgba(255, 255, 255, 0.62);
}

.cardline--push .cardline__said {
    opacity: 0.6;
}

.cardline--push .cardline__face {
    filter: grayscale(1);
}

.statbar__now--push {
    border-color: rgba(255, 255, 255, 0.45);
    color: rgba(255, 255, 255, 0.7);
}

/* ---- What is happening right now ----
   A game being played has numbers already, and they are moving. Marked so
   nobody reads a half-time line as a finished one — the season totals above
   are deliberately left alone, because a total that climbs while you read it
   has stopped being a total. */
.logrow--live {
    background: rgba(255, 176, 32, 0.07);
}

.logrow--live th,
.logrow--live td {
    font-weight: 800;
}

.logrow--live th::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-radius: 50%;
    background: #ffb020;
    vertical-align: middle;
}

/* A total that is still moving. The number is the number — today is in it —
   and the colour is the only thing saying it has not finished changing. */
.totals__figures--live td {
    color: #ffb020;
}

/* ---- What has already happened, over the switches ----
   The bell asked to be told; this is what it has to say. Above the choices,
   because a card he opens after a game wants the answer first and the
   settings second. */
.told {
    display: grid;
    gap: 6px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.told__one {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.05);
    font-size: 13px;
    font-weight: 600;
}

.told__mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 16px;
    height: 16px;
}

.told__mark .ico {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.told__one--made .told__mark { color: #1c9c56; }
.told__one--missed .told__mark { color: #d13d31; }
.told__one--push .told__mark { color: #8a8f98; }

/* A bell with something to say. */
.act--rung {
    color: #ffb020;
}

.act__count--rung {
    background: #ffb020;
    color: #111111;
    font-weight: 900;
}

/* The switch that keeps eyes on a card, in the foot beside share. */
.act--watch {
    cursor: pointer;
}

/* ---- The card's watch switch ----
   The switch is a light-mode control: a pale track and a white knob. On the
   card's dark ground that reads as nothing at all when it is off. Given its
   own ground and an edge here, and the bell rides on the knob so the control
   says what it is for without a second icon beside it. */
.act--watch .switch {
    width: 42px;
    height: 25px;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.act--watch .switch:checked {
    background: #ffb020;
    box-shadow: inset 0 0 0 1px #ffb020;
}

.act--watch .switch::after {
    width: 19px;
    height: 19px;
    background-color: #ffffff;
    /* The bell, drawn into the knob. */
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' \
stroke='%2314161c' stroke-width='2.1' stroke-linecap='round' \
stroke-linejoin='round'><path d='M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/>\
<path d='M13.7 21a2 2 0 0 1-3.4 0'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.act--watch .switch:checked::after {
    transform: translateX(17px);
}

.act--watch .act__count--rung {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 15px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 15px;
    text-align: center;
}

.act--watch {
    position: relative;
}

/* A tab with something waiting on it. */
.tabs__btn--rung::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 5px;
    border-radius: 50%;
    background: #ffb020;
    vertical-align: middle;
}

/* A club stands alone in its box where a man has two lines, so it is set
   larger and centred on its own. */
.cardline__spot--club b {
    font-size: 14px;
    letter-spacing: 0.02em;
}

/* A game total is neither club's, so it is drawn in the card's own grey
   rather than borrowing a colour that would say it belonged to one of them. */
.cardline__spot--total {
    background: #262a33;
    color: #ffffff;
}

.cardline__spot--total b { font-size: 17px; letter-spacing: 0; }

/* ---- While it is still arriving ---- */

/* A card's shape, before there is a card. Drawn rather than left blank so
   the shelf has its height from the first moment and nothing jumps when the
   real ones land — a page that reflows under a thumb is the thing that reads
   as a website rather than an app.

   No spinner. A spinner says "wait"; this says "here, nearly". */
.factcard--waiting {
    position: relative;
    overflow: hidden;
    pointer-events: none;
}

.factcard--waiting * { visibility: hidden; }

.waiting {
    display: block;
    border-radius: 7px;
    background: #22262e;
}

.factcard--waiting .waiting { visibility: visible; }

/* The sweep. Slow enough not to nag, and it stops the moment the card is
   real because the element is replaced outright. */
@keyframes waiting-sweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

.factcard--waiting::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: waiting-sweep 1.4s ease-in-out infinite;
}

/* The pieces, in the places the real card puts them. */
.waiting--title { width: 58%; height: 21px; margin: 0 0 9px; }
.waiting--blurb { width: 38%; height: 12px; margin: 0 0 20px; }
.waiting--face  { width: 38px; height: 38px; border-radius: 22%; flex: none; }
.waiting--said  { width: 62%; height: 13px; margin: 0 0 8px; }
.waiting--bar   { width: 100%; height: 8px; border-radius: 4px; }

.waiting-line {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
}

.waiting-line__body { flex: 1; }

/* A reader who would rather nothing moved gets nothing moving. */
@media (prefers-reduced-motion: reduce) {
    .factcard--waiting::after { animation: none; }
}

/* ---- Marks, where pictures used to be ---- */

/* A man is his initials on his club's colour; a club is its three letters on
   its own. Nobody's photograph and no club's crest anywhere on the site.

   Both are somebody else's to license, and neither says anything the letters
   and the colour do not. It also means a man we hold no picture of looks
   exactly like one we do, which is how it should always have read. */
.badge {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 22%;
    background: var(--team, #1d2129);
    color: #ffffff;
    font-family: Archivo, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
    font-weight: 900;
    letter-spacing: 0.01em;
    line-height: 1;
    overflow: hidden;
    vertical-align: middle;
}

/* The letters take their size from the box, so one rule covers a mark of
   eighteen pixels and one of sixty-two. */
.badge b {
    font-size: 0.42em;
    font-weight: 900;
}

.badge[style*="width:62"] b,
.badge[style*="width:64"] b { font-size: 22px; }
.badge[style*="width:54"] b { font-size: 19px; }
.badge[style*="width:42"] b { font-size: 15px; }
.badge[style*="width:40"] b { font-size: 14px; }
.badge[style*="width:38"] b { font-size: 14px; }
.badge[style*="width:34"] b { font-size: 12px; }
.badge[style*="width:30"] b { font-size: 11px; }
.badge[style*="width:26"] b { font-size: 10px; }
.badge[style*="width:22"] b { font-size: 9px; }
.badge[style*="width:20"] b { font-size: 8px; }
.badge[style*="width:18"] b { font-size: 7px; }

/* A club's letters are wider than a man's initials, so they are set tighter
   rather than allowed to run past the box. */
.badge[title$="s"] b { letter-spacing: -0.02em; }

/* Where a mark stands in for something that was round. */
.matchline__crest,
.play__crest,
.box__crest { border-radius: 28%; margin-right: 5px; }

.pick__badge--logo { border-radius: 24%; }

/* A man's mark holds two lines — what he plays over who he plays for — where
   a club's holds one. The lines are set against each other rather than both
   at the box's own size. */
.badge--man {
    grid-auto-flow: row;
    align-content: center;
    gap: 1px;
    letter-spacing: 0.03em;
}

/* Two lines in a small square, so both are set as large as the box will
   carry — the position slightly the larger of the two, since that is what is
   read first. Anything smaller and the mark is a coloured square with
   something in it. */
.badge--man b { font-size: 0.40em; line-height: 1; }
.badge--man i { font-size: 0.32em; font-style: normal; font-weight: 800;
                line-height: 1; opacity: 0.88; }

.badge--man[style*="width:62"] b,
.badge--man[style*="width:64"] b { font-size: 24px; }
.badge--man[style*="width:62"] i,
.badge--man[style*="width:64"] i { font-size: 18px; }
.badge--man[style*="width:42"] b { font-size: 17px; }
.badge--man[style*="width:42"] i { font-size: 13px; }
.badge--man[style*="width:40"] b { font-size: 16px; }
.badge--man[style*="width:40"] i { font-size: 12px; }
.badge--man[style*="width:38"] b { font-size: 15px; }
.badge--man[style*="width:38"] i { font-size: 11px; }
.badge--man[style*="width:34"] b { font-size: 14px; }
.badge--man[style*="width:34"] i { font-size: 10px; }


/* A club on a fixture card. The mark is the code now, so it is set at the
   size the code was — the biggest thing on the row — rather than beside it. */
.fix__mark {
    width: 58px;
    height: 58px;
    border-radius: 16%;
}

.fix__mark b { font-size: 21px; }

/* Under a week's heading, a card does not repeat it. */
.spyweek--said .factcard__blurb { display: none; }



/* The screen's own scroll, since a dialog does not give it one. */
.howto-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 20px 0;
}


/* ---- How it works ----

   The steps in the order somebody takes them, numbered because they are
   steps and not a list of features. */
.howto {
    counter-reset: howto;
    margin: 0;
    padding: 4px 0 40px;
    list-style: none;
}

.howto__step {
    counter-increment: howto;
    position: relative;
    padding: 0 0 22px 44px;
}

/* The number, and the line joining it to the next — the same dotted thread a
   card hangs its legs on. */
.howto__step::before {
    content: counter(howto);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 22%;
    background: #111111;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

.howto__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 32px;
    bottom: 6px;
    left: 13px;
    width: 0;
    border-left: 2px dotted #d8d8d8;
}

.howto__name {
    margin: 4px 0 5px;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: #111111;
}

.howto__said {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #5c5c5c;
}

/* ---- The walk ----

   A hole in a dark sheet over whatever is being talked about, and a note
   beside it. The hole is drawn with a shadow rather than a clip path, which
   is what lets one box darken the whole screen except itself. */
.walk {
    position: fixed;
    inset: 0;
    z-index: 200;
}

.walk[hidden] { display: none; }

/* The thing being talked about, lit.

   Everything outside the box is darkened and everything inside it is left
   alone — so the section itself is what stands out, not a rectangle drawn
   near it. A ring and a glow round the edge, because a hole in the dark with
   no edge reads as a gap rather than as the thing. */
.walk__hole {
    position: absolute;
    border-radius: 14px;
    box-shadow:
        0 0 0 9999px rgba(6, 8, 12, 0.82),
        0 0 0 3px #ffffff,
        0 0 0 8px rgba(255, 255, 255, 0.22),
        0 0 34px 8px rgba(255, 255, 255, 0.20);
    transition: top 0.28s ease, left 0.28s ease,
                width 0.28s ease, height 0.28s ease;
    pointer-events: none;
}

/* And it breathes, so the eye goes to it before the words are read. */
@keyframes walk-lit {
    0%, 100% { box-shadow:
        0 0 0 9999px rgba(6, 8, 12, 0.82),
        0 0 0 3px #ffffff,
        0 0 0 8px rgba(255, 255, 255, 0.22),
        0 0 34px 8px rgba(255, 255, 255, 0.20); }
    50% { box-shadow:
        0 0 0 9999px rgba(6, 8, 12, 0.82),
        0 0 0 3px #ffffff,
        0 0 0 12px rgba(255, 255, 255, 0.10),
        0 0 46px 12px rgba(255, 255, 255, 0.28); }
}

.walk__hole { animation: walk-lit 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .walk__hole { animation: none; }
}

.walk__note {
    position: absolute;
    left: 50%;
    width: min(340px, calc(100vw - 32px));
    transform: translateX(-50%);
    padding: 16px 18px 14px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
    transition: top 0.28s ease, bottom 0.28s ease;
}

.walk__step {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9a9a9a;
}

.walk__name {
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: #111111;
}

.walk__said {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.45;
    color: #4a4a4a;
}

.walk__acts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.walk__skip {
    padding: 8px 4px;
    border: 0;
    background: none;
    color: #8a8a8a;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.walk__next {
    padding: 10px 20px;
    border: 0;
    border-radius: 11px;
    background: #111111;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

/* Nothing on the page is pressed while the walk is on. */
body.is-walking { overflow: hidden; }

/* The sheet fades while the page moves under it, rather than blinking off
   and back — a walk that jumps reads as several tours rather than one. */
.walk { transition: opacity 0.2s ease; }
.walk--going { opacity: 0; pointer-events: none; }

/* The hole slides to the next thing rather than appearing at it. */
.walk__hole {
    transition: top 0.34s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.34s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.34s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.walk__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.walk__back {
    padding: 10px 16px;
    border: 1.5px solid #d8d8d8;
    border-radius: 11px;
    background: none;
    color: #111111;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.walk__back[hidden] { display: none; }

/* The walk is a dialog so it can sit in the top layer above any sheet it
   opens, but it is not a panel — it fills the screen and paints nothing of
   its own. */
.walk[open] {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
}

.walk::backdrop { background: none; }

/* ---- The card, in the hand ----

   The landing page sets its card in Caveat, and a reader coming from there
   should meet the same object rather than a printed cousin of it. So the
   card is written by hand here too: its name, its figures, its lines and its
   counts. Everything around it stays in Archivo — the tabs, the bars, the
   pages — because the card is the thing being read and the rest is furniture.

   Caveat sets smaller and wider than Archivo, so every size is given back
   what the change takes off it. */
.factcard,
.factcard * {
    font-family: Caveat, "Bradley Hand", "Segoe Print", cursive;
}

.factcard__title { font-size: 27px; letter-spacing: 0; }
.factcard__title--mid { font-size: 24px; }
.factcard__title--long { font-size: 21px; }
.factcard__blurb { font-size: 16px; }

.factcard .cardline__figure { font-size: 24px; }
.factcard .cardline__said { font-size: 17px; }
.factcard .statbar__now { font-size: 17px; }
.factcard .reactstack__count,
.factcard .act__count { font-size: 18px; }

/* A hand carries past where the font says a word ends, so every box on the
   card is given room for its last stroke to finish in. */
.factcard .cardline__said { padding-right: 6px; }

.factcard .cardline__spot {
    width: 42px;
    height: 46px;
    padding: 4px 3px 7px;
    line-height: 1;
    align-content: center;
    letter-spacing: 0.02em;
    overflow: visible;
}

.factcard .cardline__spot b,
.factcard .cardline__spot i {
    display: block;
    padding: 0 3px;
    overflow: visible;
    line-height: 1;
}

.factcard .cardline__spot b { font-size: 16px; }
.factcard .cardline__spot i { font-size: 12px; opacity: 0.85; }

/* The figure in its pill, in the hand the card is now set in.

   Caveat hangs its digits low and leans them right, so a box that centres the
   text centres the space around them rather than the digits themselves — the
   number sat low and off to one side. It is given the room the hand needs and
   nudged back into the middle of the pill. */
.factcard .statbar__now {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 24px;
    padding: 0 8px 3px 6px;
    line-height: 1;
    font-variant-numeric: normal;
    letter-spacing: 0;
    overflow: visible;
}