/* /Components/LoadingPanel.razor.rz.scp.css */
/* Centred busy state. Page-level gets a tall box so the ring lands near the middle of the view
   rather than clinging to the masthead; the compact variant just fills its own section. */
.loading[b-pkpu7vfl3r] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45vh;
}

.loading-compact[b-pkpu7vfl3r] {
    min-height: 120px;
}

/* A thin mint arc on a hairline track — the accent the rest of the system already uses, no imagery
   and nothing to download. */
.loading-ring[b-pkpu7vfl3r] {
    width: 34px;
    height: 34px;
    border: 2px solid var(--image-frame);
    border-top-color: var(--mint);
    border-radius: 50%;
    animation: loading-spin-b-pkpu7vfl3r 720ms linear infinite;
}

@keyframes loading-spin-b-pkpu7vfl3r {
    to {
        transform: rotate(360deg);
    }
}

/* Spinning is the one thing a motion-sensitive visitor shouldn't get. Same indicator, breathing
   instead of rotating — still clearly "busy", no vestibular trigger. */
@media (prefers-reduced-motion: reduce) {
    .loading-ring[b-pkpu7vfl3r] {
        animation: loading-pulse-b-pkpu7vfl3r 1.4s ease-in-out infinite;
        border-top-color: var(--mint);
    }

    @keyframes loading-pulse-b-pkpu7vfl3r {
        0%, 100% { opacity: 0.35; }
        50% { opacity: 1; }
    }
}
/* /Components/Snackbar.razor.rz.scp.css */
.snackbar[b-ww7sk7797s] {
    position: fixed;
    bottom: 24px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 1000;
    animation: snack-in-b-ww7sk7797s 0.3s ease;
}

.snackbar.fade-out[b-ww7sk7797s] {
    animation: snack-out-b-ww7sk7797s 0.3s ease forwards;
}

.snackbar span[b-ww7sk7797s] {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 14px 32px;
    border-radius: var(--radius-cta);
    pointer-events: auto;
}

.snackbar span.success[b-ww7sk7797s] {
    background: var(--mint);
    color: #000;
}

.snackbar span.error[b-ww7sk7797s] {
    background: var(--ultraviolet);
    color: #fff;
}

@keyframes snack-in-b-ww7sk7797s {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes snack-out-b-ww7sk7797s {
    from { opacity: 1; }
    to   { opacity: 0; }
}
/* /Components/TeamBadge.razor.rz.scp.css */
/* Crest imagery sits in a 1px "contained Polaroid" frame (design spec §Image treatment); the
   monogram fallback mirrors the same footprint in Space Mono so a crest-less club still aligns. */
.crest[b-8hie408a2w] {
    display: block;
    object-fit: contain;
    border-radius: var(--radius-nested);
}

.crest-sm[b-8hie408a2w] {
    width: 22px;
    height: 22px;
}

.crest-lg[b-8hie408a2w] {
    width: 40px;
    height: 40px;
}

.monogram[b-8hie408a2w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--surface-slate);
    border: 1px solid var(--image-frame);
    border-radius: var(--radius-nested);
}

.monogram-sm[b-8hie408a2w] {
    width: 22px;
    height: 22px;
    font-size: 9px;
    letter-spacing: 0.5px;
}

.monogram-lg[b-8hie408a2w] {
    width: 40px;
    height: 40px;
    font-size: 12px;
    letter-spacing: 0.5px;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-ytqugoa2dv] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Persistent masthead — a thin canvas bar with a full-width hairline divider.
   The wordmark is a Space Mono uppercase label, not an Anton hero: the design spec
   reserves Anton for page-level heroes (≥60px) and a giant wordmark would clash.
   .masthead-inner shares the content column's max-width so the wordmark lines up
   with page content while the divider still spans edge to edge (design spec §5:
   max ~1300px, 24px mobile / 48px desktop edge padding). */
.masthead[b-ytqugoa2dv] {
    border-bottom: 1px solid var(--image-frame);
}

.masthead-inner[b-ytqugoa2dv] {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.content[b-ytqugoa2dv] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.masthead-inner[b-ytqugoa2dv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 20px 24px;
}

/* The compact wordmark. Colour is intentionally left to the global `a` / `a:hover` rules so
   the wordmark gets the #3860be link hover — a scoped color here would out-specify the global
   hover (design spec: "every link → #3860be"). */
.wordmark[b-ytqugoa2dv] {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

/* The anonymous side of the masthead: language toggle + Sign in. The signed-in side is a single
   account button (below) — there are no section links in this bar at all. */
.mast-nav[b-ytqugoa2dv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
}

/* ── Account button + menu ─────────────────────────────────────────────────────────────────
   One icon in the bar; everything else lives in a panel anchored to it. */
.account[b-ytqugoa2dv] {
    position: relative;
}

/* The button is a full 44px touch target, but negative vertical margins keep it from stretching
   the thin bar: it contributes only 34px to the masthead's height, so the bar stays at its
   original ~75px instead of the 85px a plain 44px control forced. The visible circle is the
   nested .account-ring, drawn at 34px. */
.account-toggle[b-ytqugoa2dv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -5px 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s ease;
}

.account-ring[b-ytqugoa2dv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--image-frame);
    border-radius: 50%;
    transition: border-color 0.15s ease;
}

.account-toggle:hover[b-ytqugoa2dv],
.account-toggle[aria-expanded="true"][b-ytqugoa2dv] {
    color: var(--mint);
}

.account-toggle:hover .account-ring[b-ytqugoa2dv],
.account-toggle[aria-expanded="true"] .account-ring[b-ytqugoa2dv] {
    border-color: var(--mint-border);
}

.account-icon[b-ytqugoa2dv] {
    width: 18px;
    height: 18px;
}

/* Sits under the panel and over everything else, so any outside tap dismisses. */
.account-backdrop[b-ytqugoa2dv] {
    position: fixed;
    inset: 0;
    z-index: 20;
}

/* Right-anchored so it can never push past the screen edge; min() keeps it inside a 375px
   viewport with the masthead's 24px padding still showing. */
.account-menu[b-ytqugoa2dv] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 21;
    width: min(260px, calc(100vw - 48px));
    padding: 6px;
    background: var(--surface-slate);
    border: 1px solid var(--image-frame);
    border-radius: 4px;
    box-shadow: 0 12px 28px rgb(0 0 0 / 55%);
}

/* Who you're signed in as — a label, not an action. Long usernames wrap rather than overflow. */
.account-name[b-ytqugoa2dv] {
    margin: 0;
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* Full-width rows, 44px tall, so the whole strip is tappable rather than just the text.
   .account-lang shares the geometry but isn't itself interactive — its toggles are. */
.account-item[b-ytqugoa2dv],
.account-lang[b-ytqugoa2dv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: left;
    color: var(--text);
    background: transparent;
    border: 0;
    border-top: 1px solid var(--image-frame);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

/* Not a control itself, so it keeps the label voice without the pointer/hover affordances. Its
   vertical padding is trimmed so the taller toggles inside still land the row on exactly 44px,
   matching the action rows rather than overflowing them. */
.account-lang[b-ytqugoa2dv] {
    padding: 4px 12px;
    color: var(--text-secondary);
    cursor: default;
}

.account-item:hover:not(:disabled)[b-ytqugoa2dv] {
    color: var(--mint);
    background: var(--canvas);
}

.account-item:disabled[b-ytqugoa2dv] {
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* The "coming soon" marker on the not-yet-available profile row. */
.account-soon[b-ytqugoa2dv] {
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--text-secondary);
    border: 1px solid var(--image-frame);
    border-radius: 999px;
    padding: 3px 7px;
    white-space: nowrap;
}

/* Language switcher: two Space Mono uppercase toggles (EN / DE) split by a hairline. The active
   language is mint (the system accent); the inactive one sits muted and lifts to full text on
   hover. Bare buttons — no .btn chrome — so it reads as a quiet label control in the thin bar. */
.lang-switch[b-ytqugoa2dv] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--image-frame);
    border-radius: 2px;
    overflow: hidden;
}

.lang-opt[b-ytqugoa2dv] {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    padding: 6px 10px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.lang-opt + .lang-opt[b-ytqugoa2dv] {
    border-left: 1px solid var(--image-frame);
}

.lang-opt:hover[b-ytqugoa2dv] {
    color: var(--text);
}

.lang-active[b-ytqugoa2dv],
.lang-active:hover[b-ytqugoa2dv] {
    color: #000;
    background: var(--mint);
    cursor: default;
}

/* Inside the account menu, widen the toggles for the thumb without making them tall — the row is
   already 44px, and a 44px-tall control here dominated the panel. ~44x31 each: comfortable
   horizontally, deliberately shorter than the 44px vertical ideal to keep the menu compact. */
.account-lang .lang-opt[b-ytqugoa2dv] {
    padding: 9px 14px;
}

/* Compact the button to masthead scale (the global .btn padding is page-CTA sized). */
.mast-auth[b-ytqugoa2dv] {
    padding: 8px 18px;
}

.content[b-ytqugoa2dv] {
    flex: 1;
    padding: 32px 24px;
}

/* Desktop: open the outer edge padding to 48px (design spec §5). */
@media (min-width: 1024px) {
    .masthead-inner[b-ytqugoa2dv] {
        padding: 20px 48px;
    }

    .content[b-ytqugoa2dv] {
        padding: 48px;
    }
}
/* /Pages/Game.razor.rz.scp.css */
/* Match detail + prediction entry — a direct port of wm's Matchup.razor.css (the concluded World
   Cup tracker), adapted to this app's TeamBadge (club crests) instead of wm's flag TeamCrest.
   Shared primitives (.hero, .kicker, .lede, .btn, .tag) live in app.css; this is the page-specific
   layout. */

.matchup-page[b-2izj39hoed] {
    max-width: 720px;
    margin: 0 auto;
}

.matchup-page .back[b-2izj39hoed] {
    margin-bottom: 8px;
}

/* Kicker carries the matchday tag on the left and the kickoff time on the right. */
.match-kicker[b-2izj39hoed] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Visually hidden — the crests inside the state card are the visual hero; the h1 exists for the
   document outline + screen readers only. */
.matchup-title[b-2izj39hoed] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The localized "vs" — small mono separator, used in the title and the locked-card team header. */
.vsep[b-2izj39hoed] {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Card surface — slate-bordered, no shadow (color/border is elevation). */
.card[b-2izj39hoed] {
    margin-top: 16px;
    background: var(--canvas);
    border: 1px solid var(--image-frame);
    border-radius: var(--radius-feature);
    padding: 22px 18px;
}

.state-label[b-2izj39hoed] {
    display: block;
    margin-bottom: 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Open-card header — "Your prediction" on the left, the lock-deadline pill on the right. Wraps on
   narrow widths (the pill drops below, still right-aligned). */
.card-head[b-2izj39hoed] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.card-head .deadline[b-2izj39hoed] {
    margin-bottom: 0;
}

.card-head .tag[b-2izj39hoed] {
    margin-left: auto;
}

.game-time[b-2izj39hoed] {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--live);
}

/* Deadline pill — a quiet slate chip. */
.deadline[b-2izj39hoed] {
    display: inline-block;
    background: var(--surface-slate);
    border: 1px solid var(--image-frame);
    border-radius: var(--radius-cta);
    padding: 8px 15px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Row 1: crests + team names side by side. */
.score-teams[b-2izj39hoed] {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 12px;
}

.gteam[b-2izj39hoed] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.gname[b-2izj39hoed] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: clamp(13px, 3vw, 18px);
    line-height: 1.1;
    text-align: center;
    max-width: 12ch;
}

/* Row 2: values + dash — all same height, naturally aligned. */
.score-values[b-2izj39hoed] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    --goal-h: 58px;
}

.goal-stepper[b-2izj39hoed] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.step-btn[b-2izj39hoed] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 24px;
    background: var(--surface-slate);
    border: 1px solid var(--image-frame);
    border-radius: var(--radius-nested);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    padding: 0;
}

.step-btn svg[b-2izj39hoed] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.step-btn:hover[b-2izj39hoed] {
    background: var(--mint);
    border-color: var(--mint);
    color: #000;
}

.step-btn:active[b-2izj39hoed] {
    transform: scale(0.92);
}

.goal-input[b-2izj39hoed] {
    box-sizing: border-box;
    width: 76px;
    height: var(--goal-h);
    text-align: center;
    background: var(--canvas);
    color: var(--text);
    border: 1px solid var(--text-secondary);
    border-radius: var(--radius-input);
    padding: 10px 8px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.6rem;
    transition: border-color 150ms ease;
    -moz-appearance: textfield;
    appearance: textfield;
}

.goal-input[b-2izj39hoed]::-webkit-inner-spin-button,
.goal-input[b-2izj39hoed]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.goal-input:focus[b-2izj39hoed] {
    outline: none;
    border-color: var(--mint);
}

.goal-value[b-2izj39hoed] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 76px;
    height: var(--goal-h);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.6rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.goal-value.is-live[b-2izj39hoed] {
    color: var(--live);
}

.edit-btn[b-2izj39hoed] {
    margin: -4px 0;
}

.dash[b-2izj39hoed] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--text-secondary);
}

.save[b-2izj39hoed] {
    width: 100%;
    padding: 16px;
}

.lock-note[b-2izj39hoed] {
    margin-top: 18px;
    font-size: 13px;
    color: var(--text-secondary);
}

.lock-note b[b-2izj39hoed] {
    color: var(--text);
}

/* Inline spinner inside the save button. */
.btn-spinner[b-2izj39hoed] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin-b-2izj39hoed 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

@keyframes spin-b-2izj39hoed {
    to { transform: rotate(360deg); }
}

/* Locked read-only card. */
.lock-teams[b-2izj39hoed] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 5vw, 32px);
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.lock-line[b-2izj39hoed] {
    margin-bottom: 18px;
    font-size: 14px;
    color: var(--text-secondary);
}

.your-call[b-2izj39hoed] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
}

.your-call.muted[b-2izj39hoed] {
    color: var(--text-secondary);
}

/* Live score in the locked card (a running game), sits where the "vs" separator is. */
.live-score[b-2izj39hoed] {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 22px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.state-label.is-live[b-2izj39hoed] {
    color: var(--live);
}

/* Settled view — full-time result banner (ultraviolet accent block) + everyone's calls. */
.result-banner[b-2izj39hoed] {
    background: var(--ultraviolet);
    border-radius: var(--radius-feature);
    padding: 22px 18px;
    margin-bottom: 20px;
    color: #fff;
}

.result-line[b-2izj39hoed] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}

/* Crest + club name flanking the score on the result banner, and in the locked-card header. */
.rteam[b-2izj39hoed] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.rname[b-2izj39hoed] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: clamp(14px, 3.4vw, 20px);
    line-height: 1.1;
    text-align: center;
}

.result-score[b-2izj39hoed] {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 0.9;
    text-align: center;
    white-space: nowrap;
}

/* Everyone's calls — a quiet table; the caller's own row goes mint. */
.preds[b-2izj39hoed] {
    width: 100%;
    border-collapse: collapse;
}

.preds th[b-2izj39hoed] {
    text-align: left;
    padding: 0 0 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.preds th.r[b-2izj39hoed],
.preds td.r[b-2izj39hoed] {
    text-align: right;
}

.preds td[b-2izj39hoed] {
    padding: 13px 0;
    border-top: 1px solid var(--image-frame);
    font-size: 15px;
}

.preds .who[b-2izj39hoed] {
    font-weight: 500;
}

.preds tr.you .who[b-2izj39hoed] {
    color: var(--mint);
}

.preds .call[b-2izj39hoed] {
    font-family: var(--font-mono);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* Who's in — when inset inside a card (locked state), separated by a hairline;
   when in its own card (open state), no separator needed. */
.whos-in[b-2izj39hoed] {}

.lockboard[b-2izj39hoed] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.col-head[b-2izj39hoed] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--image-frame);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.prow[b-2izj39hoed] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.avatar[b-2izj39hoed] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--surface-slate);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}

.prow .who[b-2izj39hoed] {
    font-size: 15px;
    overflow-wrap: anywhere;
}

.whos-in-empty[b-2izj39hoed] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* /Pages/Games.razor.rz.scp.css */
/* Season start/end caps — on the rail axis but without the dashed line. */
.timeline-cap[b-7qwgihkqqs] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 8px 20px;
}

.cap-icon[b-7qwgihkqqs] {
    width: 14px;
    height: 14px;
    position: absolute;
    left: -7px;
}

.timeline-label[b-7qwgihkqqs] {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.timeline-start .timeline-label[b-7qwgihkqqs] {
    color: var(--mint);
}

.timeline-end .timeline-label[b-7qwgihkqqs] {
    color: var(--live);
}

/* Today marker — sits on the rail like a regular item. */
.today-marker[b-7qwgihkqqs] {
    position: relative;
    padding: 8px 0 8px 20px;
    border-left: 1px dashed var(--purple-rule);
}

.today-label[b-7qwgihkqqs] {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mint);
}

.today-marker[b-7qwgihkqqs]::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mint);
}
/* /Pages/Home.razor.rz.scp.css */
.identity > div[b-o8cdanurz5] {
    display: flex;
    justify-content: flex-end;
    margin: 28px 0;
}

.signin-cta[b-o8cdanurz5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.arrow-icon[b-o8cdanurz5] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
/* /Pages/Overview.razor.rz.scp.css */
[b-yo7cpdsegi] .tile-pending {
    border-color: var(--mint-border);
}

[b-yo7cpdsegi] .pending-badge {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 14px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-inverted);
    background: var(--mint);
    border-radius: var(--radius-tile);
}

[b-yo7cpdsegi] .pending-badge + .pending-badge {
    margin-left: 6px;
}

[b-yo7cpdsegi] .tile-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

[b-yo7cpdsegi] .tile-head .section-head {
    margin-bottom: 0;
}

[b-yo7cpdsegi] .rank-chip {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mint);
}
/* /Pages/PredictPhase.razor.rz.scp.css */
/* Table-ranking editor. The old version was a two-column table in a horizontal scroll frame, so on
   a phone a club's name and its position input were never on screen together. This is a single
   vertical list whose ORDER is the prediction: nothing to type, nothing to scroll sideways. */

.rank-list[b-g2sr5v3aa6] {
    list-style: none;
    margin: 20px 0 24px;
    padding: 0;
    border: 1px solid var(--image-frame);
    border-radius: var(--radius-nested);
    overflow: hidden;
}

.rank-row[b-g2sr5v3aa6] {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Comfortably past 44px so a row is an easy target while 18 of them stay scannable. */
    min-height: 56px;
    padding: 8px 10px;
    background: var(--canvas);
    /* Transparent on the rows that are in no zone, so dragging between zones doesn't shift the row
       contents sideways. Zone tokens and their meaning live in app.css / TableZones. */
    border-left: 3px solid transparent;
}

.rank-row.zone-cl[b-g2sr5v3aa6] {
    border-left-color: var(--zone-cl);
}

.rank-row.zone-europe[b-g2sr5v3aa6] {
    border-left-color: var(--zone-europe);
}

.rank-row.zone-playoff[b-g2sr5v3aa6] {
    border-left-color: var(--zone-playoff);
}

.rank-row.zone-drop[b-g2sr5v3aa6] {
    border-left-color: var(--zone-drop);
}

.rank-row + .rank-row[b-g2sr5v3aa6] {
    border-top: 1px solid var(--image-frame);
}

/* Position, read off the row index — tabular so the column doesn't jitter between 9 and 10. */
.rank-pos[b-g2sr5v3aa6] {
    flex: 0 0 auto;
    min-width: 2ch;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* The only thing that starts a drag, so a swipe anywhere else on the row still scrolls the page.
   touch-action: none stops the browser claiming the gesture once the drag begins. */
.rank-handle[b-g2sr5v3aa6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: -8px 0;
    color: var(--text-secondary);
    cursor: grab;
    touch-action: none;
}

.rank-handle svg[b-g2sr5v3aa6] {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.rank-row-chosen .rank-handle[b-g2sr5v3aa6] {
    cursor: grabbing;
    color: var(--mint);
}

.rank-club[b-g2sr5v3aa6] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    /* Long club names wrap instead of truncating to "Borussia Mönchengladb…" — vertical space is
       the one thing this layout has to spare. */
    overflow-wrap: anywhere;
}

.rank-moves[b-g2sr5v3aa6] {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 2px;
}

.rank-move[b-g2sr5v3aa6] {
    width: 40px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--image-frame);
    border-radius: var(--radius-input);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.rank-move:hover:not(:disabled)[b-g2sr5v3aa6] {
    color: var(--mint);
    border-color: var(--mint-border);
}

.rank-move:disabled[b-g2sr5v3aa6] {
    opacity: 0.35;
    cursor: default;
}

/* --- Drag states (class names handed to SortableJS in ranking-sort.js) --- */

/* The gap the row will land in. */
.rank-row-ghost[b-g2sr5v3aa6] {
    background: var(--surface-slate);
    opacity: 0.45;
}

/* The row under the finger. */
.rank-row-chosen[b-g2sr5v3aa6] {
    background: var(--surface-slate);
}

.rank-row-drag[b-g2sr5v3aa6] {
    background: var(--surface-slate);
}

/* Not editing (saved, or the window has closed) — a plain ordered list, no affordances at all.
   Rows lose the handle/arrow columns, so they sit tighter than in edit mode. */
.rank-row-static[b-g2sr5v3aa6] {
    min-height: 44px;
    color: var(--text-muted);
}

/* Section header: the kicker on the left, the edit pencil hard right. */
.section-head-row[b-g2sr5v3aa6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.section-head-row .kicker[b-g2sr5v3aa6] {
    margin-bottom: 0;
}

/* --- Relegation choice ------------------------------------------------------
   Was two bare radios thrown to opposite ends of a space-between row, so the
   tap target was a ~13px dot. Now each option is a full-width row. */

.choice-list[b-g2sr5v3aa6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0 20px;
}

.choice[b-g2sr5v3aa6] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 10px 14px;
    background: var(--canvas);
    border: 1px solid var(--image-frame);
    border-radius: var(--radius-nested);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.choice:hover[b-g2sr5v3aa6] {
    border-color: var(--text-secondary);
}

.choice-on[b-g2sr5v3aa6] {
    border-color: var(--mint-border);
    color: var(--mint);
}

.choice input[b-g2sr5v3aa6] {
    /* Keep the native control (focus ring, screen-reader semantics) but scale it to the row. */
    width: 18px;
    height: 18px;
    accent-color: var(--mint);
    flex: 0 0 auto;
}


/* The locked bet, read-only (the editor opened on a stale bookmark after the deadline). */
.choice-locked[b-g2sr5v3aa6] {
    margin: 16px 0 20px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 18px;
}
/* /Pages/Score.razor.rz.scp.css */
.board[b-0j4gxvreo9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 520px;
}

.rank-tile[b-0j4gxvreo9] {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
    align-items: center;
    background: var(--canvas);
    border: 1px solid var(--image-frame);
    border-radius: var(--radius-tile);
    padding: 22px 26px;
    text-decoration: none;
    color: inherit;
    transition: border-color 150ms ease;
}

.rank-tile:hover[b-0j4gxvreo9] {
    border-color: var(--text-secondary);
    color: inherit;
}

.rank-tile.leader[b-0j4gxvreo9] {
    background: var(--mint);
    border-color: var(--mint);
}

.rank-tile.leader:hover[b-0j4gxvreo9] {
    border-color: rgba(0, 0, 0, 0.3);
}

.rank-tile.you:not(.leader)[b-0j4gxvreo9] {
    border-color: var(--mint);
}

.rk[b-0j4gxvreo9] {
    font-family: var(--font-ui);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-secondary);
}

.leader .rk[b-0j4gxvreo9] {
    color: #000;
}

.body[b-0j4gxvreo9] {
    min-width: 0;
}

.name[b-0j4gxvreo9] {
    display: block;
    font-family: var(--font-ui);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stats[b-0j4gxvreo9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
}

.info[b-0j4gxvreo9] {
    min-width: 0;
}

.leader .name[b-0j4gxvreo9] {
    color: #000;
}

.total-row[b-0j4gxvreo9] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.total[b-0j4gxvreo9] {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--text);
}

.leader .total[b-0j4gxvreo9] {
    color: #000;
}

.pts-label[b-0j4gxvreo9] {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.leader .pts-label[b-0j4gxvreo9] {
    color: rgba(0, 0, 0, 0.6);
}

.provisional[b-0j4gxvreo9] {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.leader .provisional[b-0j4gxvreo9] {
    color: rgba(0, 0, 0, 0.5);
}

.breakdown[b-0j4gxvreo9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.chip[b-0j4gxvreo9] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.chip-label[b-0j4gxvreo9] {
    color: var(--text-secondary);
}

.chip-val[b-0j4gxvreo9] {
    color: var(--text-muted);
    text-align: right;
}

.leader .chip-label[b-0j4gxvreo9] {
    color: rgba(0, 0, 0, 0.5);
}

.leader .chip-val[b-0j4gxvreo9] {
    color: rgba(0, 0, 0, 0.8);
}
/* /Pages/Standing.razor.rz.scp.css */
/* The league table. Its own style rather than the shared `.table` used by the score and admin
   pages: a standings table is read down the left edge and along the points column, so it gets a
   zone rail per row, a sticky header, a merged goals cell, and a signed goal difference. The zone
   colours are declared as tokens in app.css (:root can't live in a scoped sheet). */

.standings-scroll[b-5p6fng7dos] {
    overflow-x: auto;
    /* Frameless — the header rule and the row hairlines carry the structure. */
    margin-bottom: 20px;
}

.standings[b-5p6fng7dos] {
    width: 100%;
    /* Narrower than the shared table's 620px: merging goals-for/against into one cell and dropping
       the frame buys enough room that a phone in portrait barely scrolls. */
    min-width: 500px;
    /* Capped like the lede's measure — stretched across the full 1300px shell the numbers end up a
       hand's width from the club they belong to, which is exactly what makes a table unreadable. */
    max-width: 720px;
    border-collapse: collapse;
}

/* --- Header: sticky, so the column labels survive a long table -------------- */
.standings thead th[b-5p6fng7dos] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--canvas);
    padding: 10px 8px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--mint-border);
    white-space: nowrap;
}

.standings tbody td[b-5p6fng7dos] {
    padding: 9px 8px;
    font-family: var(--font-mono);
    font-size: 13px;
    text-align: center;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--image-frame);
    white-space: nowrap;
}

.standings tbody tr:last-child td[b-5p6fng7dos] {
    border-bottom: none;
}

.standings tbody tr:hover td[b-5p6fng7dos] {
    background: var(--surface-slate);
}

/* --- Position: the zone rail lives on this cell's left edge ----------------- */
/* A transparent rail on every row (header included) keeps the numbers on one baseline whether or
   not the row is in a zone — no reflow between marked and unmarked rows. */
.standings th.c-pos[b-5p6fng7dos],
.standings tbody td.c-pos[b-5p6fng7dos] {
    width: 1%;
    padding-left: 12px;
    border-left: 3px solid transparent;
}

.standings tbody td.c-pos[b-5p6fng7dos] {
    font-weight: 700;
    color: var(--text);
}

.standings tbody tr.zone-cl td.c-pos[b-5p6fng7dos] {
    border-left-color: var(--zone-cl);
}

.standings tbody tr.zone-europe td.c-pos[b-5p6fng7dos] {
    border-left-color: var(--zone-europe);
}

.standings tbody tr.zone-playoff td.c-pos[b-5p6fng7dos] {
    border-left-color: var(--zone-playoff);
}

.standings tbody tr.zone-drop td.c-pos[b-5p6fng7dos] {
    border-left-color: var(--zone-drop);
}

/* The champion-in-waiting: the one row that gets a tint on top of its rail. */
.standings tbody tr.leader td[b-5p6fng7dos] {
    background: rgba(60, 255, 208, 0.07);
}

.standings tbody tr.leader td.c-pos[b-5p6fng7dos] {
    color: var(--mint);
}

/* --- Club: the one left-aligned column, and the widest ----------------------
   This column absorbs whatever width the numeric columns don't need, and a name too long for what's
   left is truncated with an ellipsis. `max-width: 0` alongside `width: 99%` is what makes that
   possible: without it the cell's minimum is the full club name, which is what pushed the last tip
   column off a phone screen. The 99% still wins the width distribution; the 0 only frees the cell to
   be narrower than its text. */
.standings th.c-club[b-5p6fng7dos],
.standings tbody td.c-club[b-5p6fng7dos] {
    width: 99%;
    max-width: 0;
    text-align: left;
}

.club[b-5p6fng7dos] {
    display: flex;
    align-items: center;
    gap: 10px;
    /* A flex item won't shrink below its content unless told it may. */
    min-width: 0;
}

.club-name[b-5p6fng7dos] {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.2px;
    color: var(--text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Goals "72:28" as one cell, the colon dimmed to a separator ------------- */
.standings tbody td.c-goals[b-5p6fng7dos] {
    color: var(--text-muted);
}

.c-goals .sep[b-5p6fng7dos] {
    padding: 0 1px;
    color: var(--text-secondary);
}

/* --- Signed goal difference ------------------------------------------------- */
.standings tbody td.c-diff[b-5p6fng7dos] {
    font-weight: 700;
}

.standings tbody td.diff-up[b-5p6fng7dos] {
    color: var(--mint);
}

.standings tbody td.diff-down[b-5p6fng7dos] {
    color: var(--zone-drop);
}

/* --- Points: the column the eye lands on ----------------------------------- */
.standings th.c-pts[b-5p6fng7dos],
.standings tbody td.c-pts[b-5p6fng7dos] {
    width: 1%;
    padding-right: 14px;
}

.standings tbody td.c-pts[b-5p6fng7dos] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

/* --- The caller's own tip, measured against the table ----------------------- */
/* Phase switch + running total, directly above the table it annotates. */
.phase-switch[b-5p6fng7dos] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.phase-switch .chip[b-5p6fng7dos] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--image-frame);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-secondary);
    transition: background 180ms ease, color 150ms ease, border-color 150ms ease;
}

.phase-switch .chip:hover[b-5p6fng7dos] {
    color: var(--text);
    border-color: var(--mint-border);
}

.phase-switch .chip.on[b-5p6fng7dos] {
    background: var(--mint);
    border-color: var(--mint);
    color: var(--text-inverted);
}

/* Pushed to the far end of the row — the table's own summary line. */
.phase-switch .tip-total[b-5p6fng7dos] {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Stands in for the table when the selected phase has no tip: why there's nothing to compare, and
   what to do about it if the window is open. */
.phase-note[b-5p6fng7dos] {
    margin-bottom: 40px;
}

.relegation-bar[b-5p6fng7dos] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 28px;
}

.relegation-label[b-5p6fng7dos] {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mint);
}

.relegation-pick[b-5p6fng7dos] {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 15px;
}

.rel-pill[b-5p6fng7dos] {
    margin-left: auto;
    padding: 5px 14px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius-tile);
    background: var(--mint);
    color: var(--text-inverted);
}

.rel-pending[b-5p6fng7dos] {
    background: var(--surface-slate);
    color: var(--text-secondary);
}

/* The window-status line at the bottom — whether the phase can still be edited. */
.window-status[b-5p6fng7dos] {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--image-frame);
}

.window-status .btn[b-5p6fng7dos] {
    margin-top: 12px;
}

/* A dashed rule marks where the league's facts end and the caller's prediction starts. */
.standings th.c-tip[b-5p6fng7dos],
.standings tbody td.c-tip[b-5p6fng7dos] {
    border-left: 1px dashed var(--image-frame);
}

.standings tbody td.c-tip[b-5p6fng7dos] {
    color: var(--text-secondary);
}

.delta[b-5p6fng7dos] {
    margin-left: 6px;
    font-weight: 700;
}

/* The club climbed above where it was tipped / fell below it / landed exactly on it. */
.delta.up[b-5p6fng7dos] {
    color: var(--mint);
}

.delta.down[b-5p6fng7dos] {
    color: var(--zone-drop);
}

.delta.same[b-5p6fng7dos] {
    color: var(--tile-yellow);
}

.standings tbody td.c-earned[b-5p6fng7dos] {
    padding-right: 14px;
    font-weight: 700;
    color: var(--mint);
}

/* Nothing scored for this club — stated in the muted tone, not in the accent. */
.standings tbody td.c-earned.zero[b-5p6fng7dos] {
    color: var(--text-secondary);
}

/* --- Legend: what the rails mean ------------------------------------------- */
.zone-legend[b-5p6fng7dos] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.zone-legend li[b-5p6fng7dos] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.zone-legend li[b-5p6fng7dos]::before {
    content: '';
    width: 3px;
    height: 13px;
}

.zone-legend .zone-cl[b-5p6fng7dos]::before {
    background: var(--zone-cl);
}

.zone-legend .zone-europe[b-5p6fng7dos]::before {
    background: var(--zone-europe);
}

.zone-legend .zone-playoff[b-5p6fng7dos]::before {
    background: var(--zone-playoff);
}

.zone-legend .zone-drop[b-5p6fng7dos]::before {
    background: var(--zone-drop);
}

/* --- Narrow viewports: shed columns rather than scroll ----------------------
   One rule for every phase, whether or not it has a tip. An earlier version shed different columns
   depending on the tip columns being present, which meant switching phase reshaped the league table
   underneath — three columns materialising mid-switch reads as a different table, not the same one
   with a tip attached. Now the league columns are identical in both, and the only difference between
   phases is the tip pair at the right edge, which genuinely only exists for a phase you've tipped.
   Position, club, and points never go — points least of all, and it was the column a plain overflow
   scroll pushed off screen. */
@media (max-width: 519px) {
    .standings[b-5p6fng7dos] {
        min-width: 0;
    }

    /* Played, goals, and difference give way: on a phone, with or without the tip columns, this is
       a position/club/points table. */
    .standings .c-played[b-5p6fng7dos],
    .standings .c-goals[b-5p6fng7dos],
    .standings .c-diff[b-5p6fng7dos] {
        display: none;
    }

    /* The two-word tip headers would otherwise set a column floor wide enough to push themselves off
       the screen; wrapping them to two lines costs a little header height and nothing else. (The club
       names need no rule here — they ellipsize at any width.) */
    .standings thead th[b-5p6fng7dos] {
        white-space: normal;
    }

    .standings thead th[b-5p6fng7dos],
    .standings tbody td[b-5p6fng7dos] {
        padding-left: 6px;
        padding-right: 6px;
    }

    .club-name[b-5p6fng7dos] {
        font-size: 13px;
    }

    /* Both of these reserved edge padding from when they were the rightmost column. */
    .standings th.c-pts[b-5p6fng7dos],
    .standings tbody td.c-pts[b-5p6fng7dos] {
        padding-right: 6px;
    }

    .standings tbody td.c-earned[b-5p6fng7dos] {
        padding-right: 8px;
    }
}

/* --- Muted table: shown before the season starts -------------------------- */
.standings.muted[b-5p6fng7dos] {
    opacity: 0.45;
    min-width: 280px;
    max-width: 480px;
}