/* /Layout/MainLayout.razor.rz.scp.css */
/* Sticky-footer (owner fix, refined for #37): the min-height flex-column container lives on the
   MudMainContent wrapper in app.css (.ff-appshell .mud-main-content, reached globally because that
   element is rendered by the MudMainContent child component and cannot be hit from this scoped
   sheet). This .pa-4 content region takes its NATURAL height (flex:0 0 auto) rather than growing to
   fill the viewport, so <SiteFooter AppShell="true"/> trails the content directly instead of being
   jammed to the very bottom with a big empty void above it on short pages. The margin-bottom is a
   comfortable, viewport-scaled gap so the footer reads as an intentional page end a comfortable
   distance below the content; on long pages the content grows past the container min-height and the
   footer is pushed down naturally (never fixed/overlaid). Mirrors PublicLayout's .ff-public-body.

   The sensible min-height (60dvh, 60vh fallback) is the key to #37: it gives a short page enough
   presence that the footer stays in the lower third instead of riding up mid-screen, while being low
   enough that the footer is not jammed to the very bottom with a huge void above it. On a normal / long
   page the content exceeds this floor, so the footer just trails the content by the margin. */
.ff-appshell-body[b-nacpxvq9j3] {
    flex: 1 0 auto;
}

/* #54: the app-bar brand link. Desktop shows the full wordmark lockup; phones show the compact square
   football mark so the wide lockup never crowds the league switcher + user menu or overflows at 375px.
   The mark is hidden by default and swapped in under 600px (mirrors the app.css title-hide breakpoint).
   flex:0 0 auto keeps it from being squeezed by the neighbouring flexible switcher. */
.ff-appbar-brand[b-nacpxvq9j3] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex: 0 0 auto;
    line-height: 0;
}

.ff-appbar-brand-lockup[b-nacpxvq9j3] {
    display: inline-flex;
    align-items: center;
}

.ff-appbar-brand-mark[b-nacpxvq9j3] {
    display: none;
    align-items: center;
}

@media (max-width: 600px) {
    .ff-appbar-brand-lockup[b-nacpxvq9j3] {
        display: none;
    }

    .ff-appbar-brand-mark[b-nacpxvq9j3] {
        display: inline-flex;
    }
}

/* #72: DESKTOP-ONLY app-bar height bump. The desktop wordmark lockup grew to 48px (item 72), so the
   default ~64px toolbar left it a touch tight; give the bar a little more height so the taller lockup
   breathes and never clips. Scoped to >600px so the phone app bar (square football mark, owner says it
   is PERFECT) keeps its default height and is left completely untouched. */
@media (min-width: 601px) {
    .ff-appbar[b-nacpxvq9j3]  .mud-toolbar {
        min-height: 72px;
        height: 72px;
    }
}
/* /Layout/PublicLayout.razor.rz.scp.css */
/* Phase 26A + wave 2 redesign: scoped chrome for the public marketing layout. Mobile-first: the
   inline nav is hidden by default and the hamburger shows; at >=600px they swap. Colours ride
   MudBlazor's --mud-palette-* so light/dark both work; the brand accent keys off --ff-brand
   (app.css block) so a logo/colour swap is a one-place change. */

/* ---- app bar ---- */
/* Taller, cleaner bar with a hairline base and a thin brand accent along the very top, so the
   public chrome reads as designed rather than a default MudAppBar. The bar background stays the
   theme Surface (set on the component) so the theme-aware BrandMark always sits on matching chrome. */
.ff-public-bar[b-edjuto5vca] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    backdrop-filter: saturate(1.05);
}

.ff-public-bar[b-edjuto5vca]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ff-brand) 0%, #ff8a3d 55%, transparent 100%);
}

/* Give the toolbar real height so the legible brand lockup (60px desktop, wave 3 bump from 48px)
   has room to breathe without clipping. On phones the bar tightens so it does not eat the
   viewport; the lockup follows via its scoped floor (BrandMark.razor.css) and never shrinks to an
   illegible smear. */
.ff-public-bar[b-edjuto5vca]  .mud-toolbar {
    min-height: 84px;
    height: 84px;
}

@media (max-width: 599.98px) {
    .ff-public-bar[b-edjuto5vca]  .mud-toolbar {
        min-height: 62px;
        height: 62px;
    }
}

/* ---- brand ---- */
/* The brand link hosts the shared theme-aware <BrandMark/>; this container positions it and adds a
   subtle press affordance. The mark + wordmark styling lives in BrandMark.razor.css. */
.ff-public-brand[b-edjuto5vca] {
    display: inline-flex;
    align-items: center;
    transition: transform .18s ease, opacity .18s ease;
}

.ff-public-brand:hover[b-edjuto5vca] {
    transform: translateY(-1px);
    opacity: .92;
}

/* ---- nav: inline (desktop) vs compact hamburger (mobile) ---- */
.ff-public-nav__inline[b-edjuto5vca] {
    display: none;
    align-items: center;
    gap: 4px;
}

.ff-public-nav__compact[b-edjuto5vca] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Text links: an animated brand underline that grows from the centre on hover / focus. */
.ff-public-link[b-edjuto5vca] {
    position: relative;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .01em;
}

.ff-public-link[b-edjuto5vca]  .mud-button-label::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--ff-brand);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
}

.ff-public-link:hover[b-edjuto5vca]  .mud-button-label::after,
.ff-public-link:focus-visible[b-edjuto5vca]  .mud-button-label::after {
    transform: scaleX(1);
}

/* Primary conversion CTA: bolder weight + a lift/glow on hover so it pops off the bar. */
.ff-public-cta[b-edjuto5vca] {
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 4px 14px rgba(248, 91, 1, .28);
    transition: transform .18s ease, box-shadow .18s ease;
}

.ff-public-cta:hover[b-edjuto5vca] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(248, 91, 1, .42);
}

@media (min-width: 600px) {
    .ff-public-nav__inline[b-edjuto5vca] { display: inline-flex; }
    .ff-public-nav__compact[b-edjuto5vca] { display: none; }
}

/* ---- content ---- */
/* Sticky-footer: the .mud-main-content min-height flex-column lives in app.css (that element is
   rendered by the MudMainContent child component and cannot be reached from this scoped sheet).
   This body region grows to fill so <SiteFooter/> pins to the viewport bottom on short pages and is
   pushed down naturally on long ones. */
.ff-public-body[b-edjuto5vca] {
    flex: 1 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .ff-public-brand[b-edjuto5vca],
    .ff-public-cta[b-edjuto5vca],
    .ff-public-link[b-edjuto5vca]  .mud-button-label::after {
        transition: none;
    }
}
/* /Pages/Admin/AiUsage.razor.rz.scp.css */
/* Phase 29D: the admin AI usage dashboard. Scoped to AiUsage.razor (keeps app.css EOF free of layout;
   the tiles reuse the shared ff-stat-tiles grid which already wraps 1-col -> 2-col -> row across the
   breakpoint matrix). Mobile-first: the window selector stretches full width at 360px; the trend chart is
   full width and the tables scroll inside their own container (ResponsiveList swaps to a card list on a
   phone, so no horizontal overflow). */

.ff-aiusage-toolbar[b-5x3gbblxio] {
    display: flex;
    justify-content: flex-end;
}

.ff-aiusage-window[b-5x3gbblxio] {
    width: 100%;
    max-width: 220px;
}

@media (max-width: 599px) {
    .ff-aiusage-toolbar[b-5x3gbblxio] {
        justify-content: stretch;
    }

    .ff-aiusage-window[b-5x3gbblxio] {
        max-width: none;
    }
}

/* The trend chart is a full-width glance; the Chart host owns its own height (260px) and empty state. */
.ff-aiusage-trend[b-5x3gbblxio] {
    width: 100%;
}

/* The accent tile lifts the headline spend figure out of the counter grid (matches the Subscriptions
   dashboard accent). */
.ff-stat-tile.ff-aiusage-accent[b-5x3gbblxio] {
    border-left: 3px solid var(--mud-palette-primary);
}

/* The unpriced-warning "Pricing tab" link sits inline in the alert body. */
.ff-aiusage-inline-link[b-5x3gbblxio] {
    vertical-align: baseline;
}
/* /Pages/Admin/PointTypes.razor.rz.scp.css */
/* Polish PD-14 / PD-15 (2026-07-30) — the Point Types value stepper and the phone description clamp.

   Scoped rather than an app.css tail block (batch plan decision D9): everything here is local to this
   page, and app.css stays free for the slices that have no scoped file of their own. The original
   ff-pt-* rules (filter row, dirty dot, sticky save bar) stay where they are in app.css; nothing below
   overrides them.

   ResponsiveList renders the mobile card, and MudBlazor renders the field and the buttons, so none of
   that markup carries this file's scope id. Every rule that has to reach a child goes through an
   ancestor authored in PointTypes.razor plus ::deep, the same idiom StatSearch.razor.css and
   Assistant.razor.css already use. .ff-pt-step and .ff-pt-desc are authored here, so they carry the id
   directly and are reachable in both the desktop table cell and the phone card. */

/* ---- The stepper ---- */

/* Minus, value, plus on one line. The row never wraps: a wrapped plus button reads as a second
   control rather than the other half of the same one. */
.ff-pt-step[b-drhs6e9p7j] {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
}

/* PD-14's actual ask: a target big enough to hit one-handed. 44px is the platform minimum and the
   same floor the draft-order row actions use. */
.ff-pt-step[b-drhs6e9p7j]  .ff-pt-step-btn {
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 auto;
}

.ff-pt-step[b-drhs6e9p7j]  .ff-pt-value {
    flex: 0 1 auto;
    min-width: 84px;
    max-width: 104px;
}

/* The value is the middle of the control, so it reads centred between the two buttons. Tabular
   figures stop the number shifting sideways as it steps through 5.00, 5.50, 10.00. */
.ff-pt-step[b-drhs6e9p7j]  .ff-pt-value input {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---- The description ---- */

/* PD-15: the description was the tallest thing on the phone card and pushed the value field out of
   reach. Two lines until it is opened, full text after.

   AT EVERY WIDTH since the 2026-07-30 adversarial audit. The clamp used to live inside the phone media
   query below while the markup rendered role="button", tabindex="0" and both handlers unconditionally,
   so on desktop every one of these was a focus stop that did nothing at all. Either the affordance is
   real everywhere or the interactive semantics have to go; it is real everywhere, and the row it sits
   in is shorter on a wide table as a bonus. */
.ff-pt-desc[b-drhs6e9p7j] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}

.ff-pt-desc.open[b-drhs6e9p7j] {
    display: block;
    overflow: visible;
}

@media (max-width: 599.98px) {
    /* The card, not the table, is doing the layout here, so the field can give a little width back
       to the two tap targets beside it. */
    .ff-pt-step[b-drhs6e9p7j]  .ff-pt-value {
        min-width: 76px;
        max-width: 96px;
    }
}
/* /Pages/Admin/Subscriptions.razor.rz.scp.css */
/* Phase 27E: admin subscription dashboard. Scoped to Subscriptions.razor (keeps app.css EOF free of
   layout - only the genuinely global token belongs there per the campaign append rule). Mobile-first:
   the toolbar and mix chart stack at 360px; the stat-tile strip reuses the shared ff-stat-tiles grid,
   which already wraps 1-col -> 2-col -> row across the breakpoint matrix. */

.ff-subs-toolbar[b-5149ykufep] {
    display: flex;
    justify-content: flex-end;
}

.ff-subs-window[b-5149ykufep] {
    width: 100%;
    max-width: 220px;
}

@media (max-width: 599px) {
    .ff-subs-toolbar[b-5149ykufep] {
        justify-content: stretch;
    }

    .ff-subs-window[b-5149ykufep] {
        max-width: none;
    }
}

/* The status-mix donut is a compact glance, not a hero: cap its width so it never dominates the tab on
   a wide screen, full-width on a phone. */
.ff-subs-mix[b-5149ykufep] {
    max-width: 420px;
}

/* Owned-league status chips wrap to as many lines as needed inside the subscriber row cell. */
.ff-subs-owned[b-5149ykufep] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* The accent tile lifts the headline revenue figure out of the counter grid. */
.ff-stat-tile.ff-subs-accent[b-5149ykufep] {
    border-left: 3px solid var(--mud-palette-primary);
}

/* Negative money (a loss-making margin) reads in the error colour, never hidden. */
.ff-neg[b-5149ykufep] {
    color: var(--mud-palette-error);
}
/* /Pages/Admin/UserDetail.razor.rz.scp.css */
/* Phase 28B: admin user detail. Scoped to UserDetail.razor (keeps app.css untouched - that EOF is a
   shared campaign merge point). Panels single-column stack at 360px, two-column grid at >= 960px. */

.ff-detail-grid[b-hxhypmt5fk] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 960px) {
    .ff-detail-grid[b-hxhypmt5fk] {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.ff-back-link[b-hxhypmt5fk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8rem;
    margin-bottom: 6px;
}

/* Compact key/value list used inside the identity + security panels. */
.ff-kv[b-hxhypmt5fk] {
    display: grid;
    grid-template-columns: minmax(110px, auto) 1fr;
    gap: 6px 14px;
    margin: 0;
}

.ff-kv dt[b-hxhypmt5fk] {
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
    align-self: center;
}

.ff-kv dd[b-hxhypmt5fk] {
    margin: 0;
    font-size: .88rem;
    overflow-wrap: anywhere;
}

.ff-mono[b-hxhypmt5fk] {
    font-family: var(--mud-typography-monospace-family, monospace);
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

/* Phase 28C: the admin-actions button row. Buttons wrap, and stack full-width at 360px so no control
   is clipped on a narrow phone. */
.ff-action-row[b-hxhypmt5fk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 599px) {
    .ff-action-row[b-hxhypmt5fk] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Manual password set: a bordered inset so the one policy-bypassing control on the page reads as its
   own thing rather than more button chrome. Capped measure on desktop, full width at 360px. */
.ff-set-password[b-hxhypmt5fk] {
    max-width: 420px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-background-grey);
}
/* /Pages/Admin/Users.razor.rz.scp.css */
/* Phase 28B: admin user list. Scoped to Users.razor so it never collides with the shared app.css
   EOF (which other campaign PRs append to). The stat-tile grid and ff-panel come from app.css; this
   only adds the click affordance on the tiles and the small result-count line. */

.ff-clickable[b-mz3qziwnq2] {
    cursor: pointer;
    transition: border-color .12s ease, transform .12s ease;
}

.ff-clickable:hover[b-mz3qziwnq2] {
    border-color: var(--mud-palette-primary);
    transform: translateY(-1px);
}

.ff-list-meta[b-mz3qziwnq2] {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}
/* /Pages/Assistant.razor.rz.scp.css */
/* Slice F (#84) — mobile-clean league assistant.
   The critical case: assistant answers render markdown TABLES (e.g. "| QB | Last 6 recent games |")
   inside chat bubbles. MarkdownLite emits each as <div class="ff-md-table"><table>…</table></div>;
   the wrapper scrolls horizontally inside the bubble so a wide table never pushes the page body
   sideways on a phone. Rules reach MarkupString children via an authored ancestor + ::deep. */

.ff-md[b-ox0biifxne]  .ff-md-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin: 0 0 10px;
}
.ff-md[b-ox0biifxne]  .ff-md-table:last-child { margin-bottom: 0; }
.ff-md[b-ox0biifxne]  .ff-md-table table {
    border-collapse: collapse;
    width: auto;
    font-size: .9rem;
}
.ff-md[b-ox0biifxne]  .ff-md-table th,
.ff-md[b-ox0biifxne]  .ff-md-table td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
}
.ff-md[b-ox0biifxne]  .ff-md-table th {
    background: var(--mud-palette-background-grey);
    font-weight: 700;
}

/* The markdown body must be allowed to shrink so its scroll box, not the bubble, absorbs a wide
   table. Without min-width:0 a flex/auto-min-width child would let the table stretch the bubble. */
.ff-md[b-ox0biifxne] { min-width: 0; }

/* Chat bubbles (the only MudPaper on this page) never exceed the viewport; min-width:0 lets an
   inner table scroll instead of forcing the bubble wider than its 88% cap on a narrow screen. */
.ff-panel-body[b-ox0biifxne]  .mud-paper { min-width: 0; max-width: 100%; }

/* M8 (§5.11, §5.13) — the two chip rows: the ?about= subject suggestions under the input, and the
   follow-ups under the newest answer. `ff-chip-row` is the house idiom but it is a SCOPED class
   (stat search owns its own copy), so this page carries its own rules.

   Chips WRAP here rather than scrolling horizontally: these are whole questions, not one-word tags,
   and a horizontal scroller under the input would hide half of them behind an affordance a phone
   never advertises. A single long chip ellipsizes instead of forcing the row wider than the panel,
   with the full text on the chip's title attribute. */
.ff-chip-row[b-ox0biifxne] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
}
.ff-chip-row[b-ox0biifxne]  .mud-chip { max-width: 100%; }
.ff-chip-row[b-ox0biifxne]  .mud-chip-content {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* The subject row's header line: name (and subtitle) on the left, the dismiss x hard against it, both
   wrapping before they can push the panel sideways at 360px. */
.ff-subject-head[b-ox0biifxne] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* P6 (2026-07-30, PD-16): the shared <AiAskBar> owns its own row (AiAskBar.razor.css). The only thing
   this page has to say about it is that a growing textarea must never widen the input panel: the bar
   is a child-component root, so it needs ::deep from an authored ancestor to be reached at all. */
.ff-panel-body[b-ox0biifxne]  .ff-ask-bar { max-width: 100%; }

/* P7 (2026-07-30, PD-17 / PD-18) — the empty state and the disclaimer line.

   The 8vh top margin used to be an inline style on the empty state, which no media query could ever
   beat. It lives here now so the phone can drop it: on a 360px screen 8vh plus ff-empty-state's 34px
   of padding pushed the ask bar below the fold on the one visit where the member has typed nothing
   and most needs to reach it. Desktop keeps the airy version. */
.ff-ai-empty[b-ox0biifxne] { margin-top: 8vh; }

/* The example chips are the empty state's only real affordance, so they center under the lead line
   rather than hugging the left edge the way the under-input subject row does. Wrapping, ellipsis, and
   the max-width cap all come from .ff-chip-row above. */
.ff-example-row[b-ox0biifxne] { justify-content: center; }

/* The disclaimer and its info affordance read as one line: the icon sits with the sentence, not at
   the far end of the row (justify-content: space-between belongs to the Clear chat button). The 4px
   top margin is the mt-1 the caption carried before it moved inside this wrapper. */
.ff-ai-disclaimer[b-ox0biifxne] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    min-width: 0;
    margin-top: 4px;
}

@media (max-width: 599.98px) {
    .ff-ai-empty[b-ox0biifxne] { margin-top: 0; padding: 16px 20px; }
}
/* /Pages/BecomeCommissioner.razor.rz.scp.css */
/* Phase 30B scoped styles for the become-commissioner upsell; restyled in the onboarding polish
   round (2026-07-30). The page keeps its markup and every test hook; the hero becomes the same
   brand-gradient band the welcome page and league subpages carry, the price card reads as the
   offer instead of a plain outline, and the benefits become tinted check rows. Colours ride
   MudBlazor's --mud-palette-* plus the shared gradient recipe so light/dark both read. */

.ff-become[b-47ohjprr7m] {
    display: block;
    padding-top: 8px;
    padding-bottom: 24px;
    max-width: 560px;
    margin-inline: auto;
}

.ff-become-boot[b-47ohjprr7m] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40vh;
}

/* Brand-gradient hero, borrowing .ff-league-hero's language (same recipe as .ff-subpage-head). */
.ff-become-hero[b-47ohjprr7m] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 18px 22px;
    margin-bottom: 16px;
    border-radius: 16px;
    color: #fff;
    background:
        radial-gradient(115% 140% at 88% 0%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-darken, #C74A00));
    box-shadow: 0 14px 34px -24px rgba(0, 0, 0, .6);
}

.ff-become-eyebrow[b-47ohjprr7m] {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.35;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .34);
}

.ff-become-title[b-47ohjprr7m] {
    color: #fff;
    font-weight: 800;
    letter-spacing: -.02em;
}

.ff-become-lede[b-47ohjprr7m] {
    color: rgba(255, 255, 255, .88);
    max-width: 46ch;
}

/* The price card is the offer: primary accent border, faint brand tint, and the trophy in a
   tinted disc so the card has a focal point instead of a floating icon. */
.ff-become-price[b-47ohjprr7m] {
    margin-bottom: 16px;
    border-color: var(--mud-palette-primary);
    background: rgba(248, 91, 1, .05);
    background: color-mix(in srgb, var(--ff-brand, #F85B01) 5%, var(--mud-palette-surface));
}

.ff-become-price-row[b-47ohjprr7m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ff-become-price-amount[b-47ohjprr7m] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ff-become-price-value[b-47ohjprr7m] {
    font-weight: 800;
    line-height: 1;
}

.ff-become-trophy[b-47ohjprr7m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(248, 91, 1, .14);
    background: color-mix(in srgb, var(--ff-brand, #F85B01) 14%, transparent);
}

.ff-become-benefits[b-47ohjprr7m] {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Each benefit is a quiet row with a hairline shell, so the list reads as substance rather than
   four floating lines. */
.ff-become-benefits li[b-47ohjprr7m] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    line-height: 1.45;
}

.ff-become-benefits li[b-47ohjprr7m]  .mud-icon-root {
    flex: 0 0 auto;
    margin-top: 1px;
}

.ff-become-actions[b-47ohjprr7m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ff-become-actions[b-47ohjprr7m]  .mud-button-root {
    min-height: 46px;
    font-weight: 700;
}

.ff-become-fineprint[b-47ohjprr7m] {
    color: var(--mud-palette-text-secondary);
}

@media (min-width: 600px) {
    .ff-become-hero[b-47ohjprr7m] {
        padding: 26px 26px 28px;
    }
}
/* /Pages/CreateLeague.razor.rz.scp.css */
/* Onboarding polish (2026-07-30): scoped spacing pass for the create-league wizard. The header
   band is the shared .ff-subpage-head in app.css; this sheet only spaces the wizard furniture.
   Rules that reach MudBlazor-rendered markup hang off the authored .ff-cl wrapper plus ::deep,
   the Welcome.razor.css idiom. */

.ff-cl[b-pmw159n6ip] {
    display: block;
    max-width: 720px;
    margin-inline: auto;
}

/* The step pills sat directly on the card; give the progress row its own breathing room and
   real (28px) pill height so the wizard reads as three stages, not three stray chips. */
.ff-cl[b-pmw159n6ip]  .ff-wizard-steps {
    margin: 0 0 14px;
    gap: 8px;
}

.ff-cl[b-pmw159n6ip]  .ff-wizard-steps span {
    padding: 6px 13px;
    font-size: .8rem;
}

/* Card content: consistent vertical rhythm between the step title, fields, and alerts. */
.ff-cl[b-pmw159n6ip]  .mud-card-content {
    padding: 18px 16px 14px;
}

.ff-cl[b-pmw159n6ip]  .ff-slot-grid {
    gap: 12px 10px;
}

.ff-cl[b-pmw159n6ip]  .ff-review-grid {
    gap: 12px 10px;
}

/* The actions row: Back and the primary action share ONE row at every width (owner report
   2026-07-31: the previous full-width-primary-below-Back layout left Back floating in a weird
   spot on steps 2 and 3). At phone width the primary grows to fill the row beside Back; with no
   Back on step 1 it simply takes the whole row. */
.ff-cl[b-pmw159n6ip]  .ff-wizard-actions {
    padding: 2px 16px 16px;
}

.ff-cl[b-pmw159n6ip]  .ff-wizard-actions .mud-button-root {
    min-height: 44px;
}

.ff-cl[b-pmw159n6ip]  .ff-wizard-actions .mud-button-filled {
    min-width: 132px;
    font-weight: 700;
}

@media (max-width: 599.98px) {
    .ff-cl[b-pmw159n6ip]  .ff-wizard-actions .mud-button-filled {
        flex: 1 1 auto;
        margin-left: 10px;
    }
}
/* /Pages/DraftRecap.razor.rz.scp.css */
/* Phase 33D — page-local layout for /draft/recap.

   Only what belongs to THIS page lives here. Everything the grade card and the tendencies card also
   render (the letter chip, the pick list, the tendency rows) is shared by the room panel, and shared
   visuals cannot live in a scoped stylesheet, so they sit in the appended 33D block in app.css.

   One column at every width. The plan's breakpoint matrix widens the pick grid and puts the three
   panels side by side on a desktop, and both of those are the grade card's own business; the page
   itself only has to stack cleanly and never let the body scroll sideways. The league board owns its
   own horizontal scroll for exactly that reason. */

.ff-recap-page[b-zxhdz91bt6] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ff-recap-header[b-zxhdz91bt6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ff-recap-title[b-zxhdz91bt6] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.ff-recap-pool[b-zxhdz91bt6] {
    font-size: .78rem;
    opacity: .72;
}

.ff-recap-section[b-zxhdz91bt6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ff-recap-h2[b-zxhdz91bt6] {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .7;
    margin: 0;
}

/* The board scrolls INSIDE this container. The page body must never scroll horizontally at 360px,
   and the desktop table under ResponsiveList is the only thing here wide enough to make it. */
.ff-recap-board[b-zxhdz91bt6] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.ff-recap-denominator[b-zxhdz91bt6] {
    font-size: .74rem;
    opacity: .65;
    line-height: 1.45;
}

.ff-recap-none[b-zxhdz91bt6] {
    font-size: .85rem;
    opacity: .78;
    padding: 12px 0;
}

/* One member's cell on the board. The caller's row is flagged by the server, never guessed here. */
.ff-recap-row[b-zxhdz91bt6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ff-recap-row.me[b-zxhdz91bt6] {
    font-weight: 700;
}

.ff-recap-you[b-zxhdz91bt6] {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: #fff;
}

.ff-recap-dnd[b-zxhdz91bt6] {
    font-size: .74rem;
    opacity: .6;
}

.ff-recap-story[b-zxhdz91bt6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
    font-size: .85rem;
    line-height: 1.5;
}

.ff-recap-foot[b-zxhdz91bt6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 8px;
}

/* 360px is the primary drafting width, so the one onward action is a full-width tap target there
   rather than a small button floating in a wide row. */
@media (max-width: 599.98px) {
    .ff-recap-foot[b-zxhdz91bt6] {
        flex-direction: column;
        align-items: stretch;
    }

    .ff-recap-title[b-zxhdz91bt6] {
        font-size: 1.15rem;
    }
}
/* /Pages/JoinLeague.razor.rz.scp.css */
/* Onboarding polish (2026-07-30): scoped styling for Join a League, following the Welcome
   precedent. The header band itself is the shared .ff-subpage-head in app.css; everything here
   is page furniture. Rules that reach MudBlazor-rendered markup hang off an authored ancestor
   plus ::deep, the Welcome.razor.css idiom. */

.ff-join[b-r4o2tu4vqi] {
    max-width: 560px;
    margin-inline: auto;
}

/* The eyebrow pill above the title, borrowing the welcome hero's language (white on gradient). */
.ff-join-eyebrow[b-r4o2tu4vqi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.35;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .34);
}

.ff-join-eyebrow[b-r4o2tu4vqi]  .mud-icon-root {
    font-size: .95rem;
}

.ff-join-boot[b-r4o2tu4vqi] {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

/* Invite codes are 16-character monospace slugs; the input reads like one as you type it. */
.ff-join-code[b-r4o2tu4vqi]  input {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .08em;
}

.ff-join-card[b-r4o2tu4vqi]  .mud-card-actions .mud-button-root {
    min-height: 46px;
    font-weight: 700;
}

/* The no-code funnel line: one quiet row under the card, not a competing card. */
.ff-join-alt[b-r4o2tu4vqi] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 2px;
    margin-top: 14px;
    font-size: .88rem;
    color: var(--mud-palette-text-secondary);
}

.ff-join-alt[b-r4o2tu4vqi]  .mud-button-root {
    font-weight: 700;
}
/* /Pages/LeagueMembers.razor.rz.scp.css */
/* Owner walkthrough: the co-managers "Add" button did not sit on the same visual row as the two
   MudSelect dropdowns beside it. app.css's shared .ff-comanager-add rule (used by this page only)
   aligns the row with align-items: flex-start, which top-aligns the button against the selects'
   floating label + input + reserved helper-text space, so the button reads off-baseline. Blazor CSS
   isolation gives this scoped rule higher specificity than the global one (an implicit [b-xxx]
   attribute selector is added at build time), so overriding just align-items here - without editing
   the off-limits app.css - straightens the whole row onto one baseline while leaving the rest of the
   shared rule (display/gap/wrap) untouched. */
.ff-comanager-add[b-dejlwyklth] {
    align-items: center;
}

/* ==========================================================================================
   League pages polish (2026-07-30): mobile-first restyle of Members & Invites. Everything
   below is scoped (D10 precedent from Welcome.razor.css); rules that reach markup a MudBlazor
   component renders (MudButton, MudIcon, MudCard internals) hang off an AUTHORED ancestor
   plus ::deep, the same idiom Welcome.razor.css uses.
   ========================================================================================== */

/* Code + Copy on one line, wrapping at phone width so the 16-character slug can never push the
   page sideways. The code text itself wraps via the app.css .ff-invite-code rule. */
.ff-mi-code-row[b-dejlwyklth] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 4px 0 6px;
}

.ff-mi-code-row[b-dejlwyklth]  .mud-button-root {
    min-height: 36px;
}

/* Section headings: the welcome page's accent-bar language (.ff-w-h2) rather than a bare h5,
   so the page's five sections scan as sections. */
.ff-mi-h2[b-dejlwyklth] {
    position: relative;
    margin: 0 0 12px;
    padding-left: 12px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--mud-palette-text-primary);
}

.ff-mi-h2[b-dejlwyklth]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 4px;
    background: var(--ff-brand, var(--mud-palette-primary));
}

/* The member-count pill beside the Members heading. */
.ff-mi-count[b-dejlwyklth] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    margin-left: 6px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    vertical-align: 3px;
    color: var(--mud-palette-primary);
    background: rgba(248, 91, 1, .14);
    background: color-mix(in srgb, var(--ff-brand, #F85B01) 14%, transparent);
}

/* Empty states (targeted invite history, and any future sibling): quiet dashed shell instead
   of a heading floating over nothing. */
.ff-mi-empty[b-dejlwyklth] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
    color: var(--mud-palette-text-secondary);
    font-size: .88rem;
    line-height: 1.5;
}

.ff-mi-empty[b-dejlwyklth]  .mud-icon-root {
    flex: 0 0 auto;
    opacity: .7;
}

/* 360px: card action rows become real thumb targets and stop crowding the card edge. */
@media (max-width: 599.98px) {
    .ff-mi-code-row[b-dejlwyklth]  .mud-button-root {
        width: 100%;
        min-height: 44px;
    }
}
/* /Pages/Leagues.razor.rz.scp.css */
/* League pages polish (2026-07-30): scoped density pass for the My Leagues membership cards.
   The rich card carried its rows in a loose 12px-gap column with a separate avatars row, a
   separate draft row, and a roomy actions strip, which read as a card that is mostly air at
   phone width. Everything here tightens THAT card only: the commissioner dashboard grid above
   it renders three text actions per card and keeps the stock layout. Rules that reach
   MudBlazor-rendered markup hang off an authored ancestor (.ff-lg-grid / .ff-lg-foot) plus
   ::deep, the Welcome.razor.css idiom. */

.ff-lg-grid[b-v0tyukxxg0]  .ff-league-card-rich .mud-card-content {
    gap: 10px;
    padding: 16px 16px 10px;
}

/* Current league: a faint brand tint on top of the primary border it already gets, so "the one
   you are in" reads at a glance instead of only by chip. */
.ff-lg-grid[b-v0tyukxxg0]  .ff-league-card-current {
    background: rgba(248, 91, 1, .05);
    background: color-mix(in srgb, var(--ff-brand, #F85B01) 5%, var(--mud-palette-surface));
}

/* Avatars + draft state share one footer row; margin-top:auto keeps it pinned to the bottom
   when the grid stretches cards to equal heights on desktop. */
.ff-lg-foot[b-v0tyukxxg0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: auto;
    min-height: 28px;
}

/* app.css gives .ff-lc-draft margin-top:auto for the old column layout; inside a flex ROW that
   would drop it below the avatars' baseline. */
.ff-lg-foot[b-v0tyukxxg0]  .ff-lc-draft {
    margin-top: 0;
}

/* The card's one action becomes a real full-width target with a hairline above it, so the strip
   reads as the card's footer instead of a floating link with dead space around it. */
.ff-lg-grid[b-v0tyukxxg0]  .ff-league-card-rich .mud-card-actions {
    padding: 6px 10px 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ff-lg-grid[b-v0tyukxxg0]  .ff-league-card-rich .mud-card-actions .mud-button-root {
    width: 100%;
    min-height: 42px;
    justify-content: center;
}
/* /Pages/LeagueSettings.razor.rz.scp.css */
/* League pages polish (2026-07-30): scoped styling for League Settings, following the Welcome
   precedent (D10): page look lives beside the page, app.css only carries the shared subpage
   header band. Rules aimed at MudBlazor-rendered markup hang off an AUTHORED ancestor plus
   ::deep, the same idiom Welcome.razor.css uses. */

/* The settings form: league name and time zone take a full row (the autocomplete carries helper
   text and long labels); the member-cap and season-length fields share a row from 600px up. */
.ff-ls-grid[b-1lqkapnnmi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
}

/* CountStepper rollout (owner report 2026-07-31): Maximum members is now a three-part stepper
   (~200px minimum), so the old keep-the-pair-at-phone rule crushed its value field into a sliver
   in a half-width cell. Below 600px every field takes a full row; the pair returns on wider
   screens where a half cell is stepper-sized. */
@media (max-width: 599.98px) {
    .ff-ls-grid[b-1lqkapnnmi] {
        grid-template-columns: 1fr;
    }
}

.ff-ls-field[b-1lqkapnnmi] {
    min-width: 0;
}

.ff-ls-wide[b-1lqkapnnmi] {
    grid-column: 1 / -1;
}

/* Section heading: the accent-bar language the welcome page introduced (.ff-w-h2). */
.ff-ls-h2[b-1lqkapnnmi] {
    position: relative;
    margin: 0 0 6px;
    padding-left: 12px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--mud-palette-text-primary);
}

.ff-ls-h2[b-1lqkapnnmi]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 4px;
    background: var(--ff-brand, var(--mud-palette-primary));
}

/* Status + save on one row; the status line reads as a quiet fact, not a control. */
.ff-ls-actions[b-1lqkapnnmi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    width: 100%;
}

.ff-ls-status[b-1lqkapnnmi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.ff-ls-status[b-1lqkapnnmi]  .mud-icon-root {
    opacity: .7;
}

/* 360px: the save action becomes a full-width 44px thumb target under the status line. */
@media (max-width: 599.98px) {
    .ff-ls-actions[b-1lqkapnnmi]  .mud-button-root {
        width: 100%;
        min-height: 44px;
    }
}
/* /Pages/PlayerHub.razor.rz.scp.css */
/* Walk4 (#74/#76): the Watching list rows. A single nowrap flex row per followed player — the
   name/meta block shrinks (min-width:0 → ellipsis) while the actions stay pinned to the right, so
   the star never wraps onto its own line on mobile (the #74 bug). Desktop is unaffected: the row
   was already inline there; this just makes mobile behave the same. */
.ff-watch-row[b-6jn1zu3bfb] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.ff-watch-row:last-child[b-6jn1zu3bfb] {
    border-bottom: none;
}

/* The name + meta block: allowed to shrink so its text ellipsises instead of pushing the star out. */
.ff-watch-info[b-6jn1zu3bfb] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
    cursor: pointer;
}

.ff-watch-name[b-6jn1zu3bfb] {
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* #76: the team + points sub-line — compact, muted, single line with ellipsis on a narrow phone. */
.ff-watch-sub[b-6jn1zu3bfb] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ff-watch-team[b-6jn1zu3bfb] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ff-watch-pts[b-6jn1zu3bfb] {
    font-weight: 700;
    color: var(--ff-brand, var(--mud-palette-primary));
    flex: 0 0 auto;
}

/* The actions cluster (+queue and the star) — fixed, right-anchored, never shrinks or wraps. */
.ff-watch-actions[b-6jn1zu3bfb] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

/* #75: the top-scorers primary cell — name grows/ellipsises, the +queue button stays inline right
   (mirrors the watch row so the scorers teaser matches). */
.ff-scorer-row[b-6jn1zu3bfb] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    width: 100%;
}

.ff-scorer-row .ff-rank-player[b-6jn1zu3bfb] {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ================================================================================================
   Punch 2026-07-27 (P-22/P-23) — the two /players landing panels carry per-row scouting context.
   Mobile-first: every added piece lives on the existing name line or the existing single caption
   line, so neither row grows a third line at 360px; the caption ellipsises instead of wrapping.
   ================================================================================================ */

/* The inline position pill. app.css sizes .ff-pos for the roster grid (full-width block) and
   .ff-pos.inrow keeps that width; inside a text row it has to hug its two or three letters. */
.ff-pos.ff-pos-mini[b-6jn1zu3bfb] {
    width: auto;
    min-width: 30px;
    padding: 2px 7px;
    font-size: 0.6rem;
    flex: 0 0 auto;
}

/* P-22: the top-scorers primary cell is now two stacked lines (name row, then the stat caption). */
.ff-scorer-cell[b-6jn1zu3bfb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    width: 100%;
}

/* The week's headline stat line. Normal weight so it reads as a caption even on the mobile card,
   where the primary cell is rendered inside a 600-weight title. */
.ff-scorer-stats[b-6jn1zu3bfb] {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ff-scorer-avg[b-6jn1zu3bfb] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ff-scorer-avg.muted[b-6jn1zu3bfb] {
    color: var(--mud-palette-text-secondary);
}

/* The signed week-vs-season delta, shared by both panels. Flat stays neutral so a rounded 0.0
   never reads as movement. */
.ff-delta[b-6jn1zu3bfb] {
    margin-left: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ff-delta.up[b-6jn1zu3bfb] { color: var(--mud-palette-success); }
.ff-delta.down[b-6jn1zu3bfb] { color: var(--mud-palette-error); }
.ff-delta.flat[b-6jn1zu3bfb] { color: var(--mud-palette-text-secondary); }

/* P-23: the watch row's name line, so the pill sits beside the name without pushing it to wrap. */
.ff-watch-nameline[b-6jn1zu3bfb] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Without this the name is a flex item at its min-content width and the pill pushes it wide
   instead of letting it ellipsis (the #74 lesson, one level down). */
.ff-watch-nameline .ff-watch-name[b-6jn1zu3bfb] {
    min-width: 0;
    flex: 1 1 auto;
}

/* Middot separators between the caption chips (the flex gap alone left them running together
   once the line carried team, points, trend, and the season average). */
.ff-watch-sub > span + span[b-6jn1zu3bfb]::before {
    content: "·";
    margin-right: 8px;
    opacity: 0.55;
}

.ff-watch-trend[b-6jn1zu3bfb] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.ff-watch-trend.up[b-6jn1zu3bfb] { color: var(--mud-palette-success); }
.ff-watch-trend.down[b-6jn1zu3bfb] { color: var(--mud-palette-error); }
.ff-watch-trend.flat[b-6jn1zu3bfb] { color: var(--mud-palette-text-secondary); }

/* The trend arrow rides a 0.78rem caption, so it is sized to the text rather than Size.Small. */
.ff-watch-trend[b-6jn1zu3bfb]  svg {
    width: 0.95rem;
    height: 0.95rem;
}

.ff-watch-avg[b-6jn1zu3bfb] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Pages/PoolDetail.razor.rz.scp.css */
/* Phase 28 punch (#47): the pool detail surface. Format-themed hero + standings-style
   leaderboard rows, all on the ff-* / MudBlazor palette. --pool-accent (solid) and
   --pool-accent-rgb (tints) come from the inline style per format; no bespoke colors. */

/* ---- Hero ---- */
.pool-hero[b-fyrtjnx7u3] {
    --pool-accent: var(--mud-palette-primary);
    --pool-accent-rgb: var(--mud-palette-primary-rgb);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 20px;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--pool-accent);
    border-radius: 14px;
    background:
        linear-gradient(90deg, rgba(var(--pool-accent-rgb), .10), rgba(var(--pool-accent-rgb), 0) 60%),
        var(--mud-palette-surface);
}
.pool-hero__badge[b-fyrtjnx7u3] {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--pool-accent-rgb), .16);
    color: var(--pool-accent); /* MudIcon inherits via currentColor */
}
.pool-hero__body[b-fyrtjnx7u3] { min-width: 0; flex: 1 1 auto; }
.pool-hero__title-row[b-fyrtjnx7u3] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pool-hero__name[b-fyrtjnx7u3] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.15;
    min-width: 0;
}
.pool-hero__meta[b-fyrtjnx7u3] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}
.pool-chip[b-fyrtjnx7u3] {
    font-size: .74rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}
.pool-chip--accent[b-fyrtjnx7u3] {
    background: rgba(var(--pool-accent-rgb), .14);
    color: var(--pool-accent);
    font-weight: 700;
}

/* ---- Status pill (shared visual language with the list cards) ---- */
.pool-status[b-fyrtjnx7u3] {
    flex: 0 0 auto;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.pool-status--open[b-fyrtjnx7u3] { background: rgba(var(--mud-palette-success-rgb), .16); color: var(--mud-palette-success); }
.pool-status--active[b-fyrtjnx7u3] { background: rgba(var(--mud-palette-info-rgb), .16); color: var(--mud-palette-info); }
.pool-status--closed[b-fyrtjnx7u3] { background: var(--mud-palette-background-grey); color: var(--mud-palette-text-secondary); }

/* ---- Standings-style leaderboard rows ---- */
.pool-lb[b-fyrtjnx7u3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
}
.pool-lb-row[b-fyrtjnx7u3] {
    display: grid;
    grid-template-columns: 28px 32px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
}
.pool-lb-row.me[b-fyrtjnx7u3] { background: rgba(var(--mud-palette-primary-rgb), .13); }
.pool-lb-row.out[b-fyrtjnx7u3] { opacity: .68; }
.pool-lb-row .rank[b-fyrtjnx7u3] {
    width: 26px; height: 26px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
}
.pool-lb-row.r1 .rank[b-fyrtjnx7u3] { background: #d4af37; color: #231d00; }
.pool-lb-row.r2 .rank[b-fyrtjnx7u3] { background: #aab2bd; color: #1b1f24; }
.pool-lb-row.r3 .rank[b-fyrtjnx7u3] { background: #cd7f4a; color: #fff; }
/* size the shared MemberAvatar (a child component -> reach it with ::deep) */
.pool-lb-row[b-fyrtjnx7u3]  .mud-avatar {
    width: 32px; height: 32px;
    font-size: .72rem;
}
.pool-lb-row .who[b-fyrtjnx7u3] { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pool-lb-row .who .nm[b-fyrtjnx7u3] {
    font-weight: 600; font-size: .89rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pool-lb-row .who .nm .metag[b-fyrtjnx7u3] {
    font-size: .64rem; font-weight: 700;
    color: var(--mud-palette-primary);
    margin-left: 4px; letter-spacing: .04em;
}
.pool-lb-row .who .sub[b-fyrtjnx7u3] {
    font-size: .74rem; color: var(--mud-palette-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pool-lb-row .end[b-fyrtjnx7u3] { display: flex; align-items: center; justify-content: flex-end; }
.pool-lb-row .end .pts[b-fyrtjnx7u3] {
    font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.05rem;
    text-align: right; line-height: 1.05;
}
.pool-lb-row .end .pts small[b-fyrtjnx7u3] {
    display: block;
    font-weight: 600; font-size: .62rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase; letter-spacing: .03em;
}

/* Alive / eliminated tag. */
.pool-tag[b-fyrtjnx7u3] {
    font-size: .66rem; font-weight: 700;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.pool-tag--alive[b-fyrtjnx7u3] { background: rgba(var(--mud-palette-success-rgb), .16); color: var(--mud-palette-success); }
.pool-tag--out[b-fyrtjnx7u3] { background: rgba(var(--mud-palette-error-rgb), .16); color: var(--mud-palette-error); }

/* ---- Join / rich empty state shared by the pick panels ---- */
.pool-join[b-fyrtjnx7u3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 32px 22px;
}
.pool-join[b-fyrtjnx7u3]  .mud-icon-root {
    font-size: 2.2rem;
    color: var(--pool-accent, var(--mud-palette-text-secondary));
    opacity: .5;
}
.pool-join[b-fyrtjnx7u3]  .pool-join__ico--out {
    color: var(--mud-palette-error);
    opacity: .8;
}
.pool-join__t[b-fyrtjnx7u3] { font-weight: 700; font-size: 1rem; }
.pool-join__d[b-fyrtjnx7u3] {
    font-size: .84rem; color: var(--mud-palette-text-secondary);
    max-width: 340px; line-height: 1.5;
}
.pool-join .mud-button-root[b-fyrtjnx7u3] { margin-top: 6px; }

/* ---- Survivor pick-distribution bars ---- */
.pool-dist-row[b-fyrtjnx7u3] {
    display: grid;
    grid-template-columns: minmax(64px, auto) 1fr auto;
    align-items: center;
    gap: 10px;
}
.pool-dist-row__team[b-fyrtjnx7u3] { font-size: .84rem; font-weight: 600; }
.pool-dist-row__bar[b-fyrtjnx7u3] {
    height: 7px;
    border-radius: 999px;
    background: var(--mud-palette-background-grey);
    overflow: hidden;
}
.pool-dist-row__fill[b-fyrtjnx7u3] {
    display: block; height: 100%;
    border-radius: 999px;
    background: var(--pool-accent);
}
.pool-dist-row__pct[b-fyrtjnx7u3] {
    font-size: .74rem; color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---- Phone: tighten the hero so it reads cleanly at 375px ---- */
@media (max-width: 599px) {
    .pool-hero[b-fyrtjnx7u3] { padding: 14px 15px; gap: 13px; }
    .pool-hero__badge[b-fyrtjnx7u3] { width: 44px; height: 44px; border-radius: 12px; }
    .pool-hero__name[b-fyrtjnx7u3] { font-size: 1.25rem; }
}
/* /Pages/Pools.razor.rz.scp.css */
/* Phase 28 punch (#40): the pools hub cards. Format-themed on the ff-* / MudBlazor palette:
   each card sets --pool-accent (solid) + --pool-accent-rgb (for tints) inline; nothing here
   invents a color. Mobile-first: 1 column, 2-up >=600px, 3-up >=960px. */

.pool-grid[b-uxhjfvgwu6] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 600px) { .pool-grid[b-uxhjfvgwu6] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pool-grid[b-uxhjfvgwu6] { grid-template-columns: repeat(3, 1fr); } }

.pool-card[b-uxhjfvgwu6] {
    --pool-accent: var(--mud-palette-primary);
    --pool-accent-rgb: var(--mud-palette-primary-rgb);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 13px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 18px 18px 16px;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
/* Format accent bar across the top of every card. */
.pool-card[b-uxhjfvgwu6]::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--pool-accent);
}
.pool-card:hover[b-uxhjfvgwu6] {
    border-color: rgba(var(--pool-accent-rgb), .5);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .13);
    transform: translateY(-2px);
}

.pool-card__top[b-uxhjfvgwu6] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.pool-card__badge[b-uxhjfvgwu6] {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--pool-accent-rgb), .14);
    color: var(--pool-accent); /* MudIcon inherits via currentColor */
}
.pool-card__headings[b-uxhjfvgwu6] { min-width: 0; flex: 1 1 auto; }
.pool-card__format[b-uxhjfvgwu6] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pool-accent);
}
.pool-card__name[b-uxhjfvgwu6] {
    margin: 3px 0 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status pill (shared with the detail hero visual language). */
.pool-status[b-uxhjfvgwu6] {
    flex: 0 0 auto;
    align-self: flex-start;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.pool-status--open[b-uxhjfvgwu6] { background: rgba(var(--mud-palette-success-rgb), .16); color: var(--mud-palette-success); }
.pool-status--active[b-uxhjfvgwu6] { background: rgba(var(--mud-palette-info-rgb), .16); color: var(--mud-palette-info); }
.pool-status--closed[b-uxhjfvgwu6] { background: var(--mud-palette-background-grey); color: var(--mud-palette-text-secondary); }

.pool-card__tagline[b-uxhjfvgwu6] {
    font-size: .84rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* Stat strip: entries / alive / season / weeks. */
.pool-card__stats[b-uxhjfvgwu6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 6px;
    background: rgba(var(--pool-accent-rgb), .06);
    border: 1px solid rgba(var(--pool-accent-rgb), .16);
    border-radius: 12px;
    padding: 10px 8px;
}
.pool-stat[b-uxhjfvgwu6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
    text-align: center;
}
.pool-stat__v[b-uxhjfvgwu6] {
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.pool-stat__k[b-uxhjfvgwu6] {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mud-palette-text-secondary);
}

/* Your-entry ribbon. */
.pool-card__mine[b-uxhjfvgwu6] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 10px;
}
.pool-card__mine.in[b-uxhjfvgwu6] { background: rgba(var(--mud-palette-success-rgb), .12); color: var(--mud-palette-success); }
.pool-card__mine.out[b-uxhjfvgwu6] { background: rgba(var(--mud-palette-error-rgb), .12); color: var(--mud-palette-error); }

.pool-card__actions[b-uxhjfvgwu6] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto; /* pin CTAs to the bottom so cards line up in the grid */
    padding-top: 2px;
}

/* Empty state (no pools this season). Reuses the ff-* empty-state feel, self-contained. */
.pool-empty[b-uxhjfvgwu6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 40px 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
}
.pool-empty__ico[b-uxhjfvgwu6] { color: var(--mud-palette-primary); opacity: .5; line-height: 0; }
.pool-empty__t[b-uxhjfvgwu6] { font-size: 1.05rem; font-weight: 700; }
.pool-empty__d[b-uxhjfvgwu6] {
    font-size: .86rem;
    color: var(--mud-palette-text-secondary);
    max-width: 380px;
    line-height: 1.5;
}
/* /Pages/Public/Contact.razor.rz.scp.css */
/* Phase 26B: scoped styles for the public contact page. Mobile-first single column of channel
   cards. Colours ride MudBlazor's --mud-palette-* for light/dark; accent keys off --ff-brand.

   Wave 3 (owner walkthrough): the two-column layout used to switch to a row at the same 600px
   breakpoint as the rest of the chrome, but the page container itself was capped at MaxWidth.Small
   (600px), so the row never had enough width to hold both cards and "Before you write" crushed
   down to a sliver (its paragraph/links wrapping one word per line). Fixed two ways: the container
   is now MaxWidth.Medium (Contact.razor) so there is real room to work with, and the row switch
   plus per-card min-width below are pushed out so a card is never asked to be narrower than it can
   comfortably render. flex-wrap is a safety net, not the primary mechanism. */

.ff-contact[b-jyawfhx3uf] {
    padding-top: 8px;
    padding-bottom: 8px;
}

.ff-contact-head[b-jyawfhx3uf] {
    text-align: center;
    padding: 32px 0 8px;
}

.ff-contact-eyebrow[b-jyawfhx3uf] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ff-brand);
    background: rgba(248, 91, 1, .1);
    border: 1px solid rgba(248, 91, 1, .28);
}

.ff-contact-eyebrow[b-jyawfhx3uf]  .mud-icon-root { font-size: 1rem; }

.ff-contact-head h1[b-jyawfhx3uf] {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 12px 0 0;
    color: var(--mud-palette-text-primary);
}

.ff-contact-lede[b-jyawfhx3uf] {
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    margin: 14px auto 0;
    max-width: 42ch;
}

.ff-contact-cards[b-jyawfhx3uf] {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}

.ff-contact-card[b-jyawfhx3uf] {
    padding: 28px 24px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ff-contact-card:hover[b-jyawfhx3uf] {
    transform: translateY(-4px);
    border-color: rgba(248, 91, 1, .45);
    box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .55);
}

.ff-contact-card__icon[b-jyawfhx3uf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    margin-bottom: 4px;
    background: rgba(248, 91, 1, .12);
    border: 1px solid rgba(248, 91, 1, .22);
}

.ff-contact-card__icon[b-jyawfhx3uf]  .mud-icon-root { font-size: 1.7rem; }

.ff-contact-card h2[b-jyawfhx3uf] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 10px 0 6px;
    color: var(--mud-palette-text-primary);
}

.ff-contact-card p[b-jyawfhx3uf] {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 16px;
}

/* The support address is long; FullWidth keeps it from ever overflowing a narrow card, and letting
   the label wrap (Mud's default is nowrap) means it degrades to two centered lines instead of
   spilling past the card edge if the card is ever narrower than the address. */
.ff-contact-card__cta[b-jyawfhx3uf]  .mud-button-label {
    white-space: normal;
    text-align: center;
}

.ff-contact-links[b-jyawfhx3uf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.ff-contact-note[b-jyawfhx3uf] {
    text-align: center;
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
    margin: 24px auto 0;
    max-width: 40ch;
}

/* ---- on-load entrance (header) ---- */
.ff-anim-load > *[b-jyawfhx3uf] {
    animation: ffFadeUp .6s cubic-bezier(.22, .61, .36, 1) both;
}
.ff-anim-load .ff-contact-eyebrow[b-jyawfhx3uf] { animation-delay: .04s; }
.ff-anim-load h1[b-jyawfhx3uf] { animation-delay: .12s; }
.ff-anim-load .ff-contact-lede[b-jyawfhx3uf] { animation-delay: .2s; }

@media (min-width: 600px) {
    .ff-contact-head h1[b-jyawfhx3uf] { font-size: 2.4rem; }
}

/* Side-by-side only once there is genuinely enough room for both cards; below this the column
   layout (with each card at full width) reads far better than a squeezed row. min-width on the
   card is the load-bearing part: it stops a card from ever being compressed into a sliver, and
   flex-wrap lets a card drop to its own line rather than crush if the math is ever tight. */
@media (min-width: 700px) {
    .ff-contact-cards[b-jyawfhx3uf] { flex-direction: row; }
    .ff-contact-card[b-jyawfhx3uf] {
        flex: 1 1 260px;
        min-width: 260px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ff-contact-card[b-jyawfhx3uf] { transition: none; }
}
/* /Pages/Public/Features.razor.rz.scp.css */
/* Phase 26B + wave 2 redesign: scoped styles for the public features tour. Mobile-first single
   column; the detail rows gain an icon gutter with an ordinal motif and alternate their surface tint
   at wider breakpoints. Colours ride MudBlazor's --mud-palette-* so light/dark both read; accents key
   off --ff-brand (app.css). */

.ff-features[b-eko0i2769h] {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* ---- intro ---- */
.ff-features-intro[b-eko0i2769h] {
    padding: 40px 0 12px;
    max-width: 62ch;
}

.ff-features-eyebrow[b-eko0i2769h] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ff-brand);
    background: rgba(248, 91, 1, .1);
    border: 1px solid rgba(248, 91, 1, .28);
}

.ff-features-eyebrow[b-eko0i2769h]  .mud-icon-root { font-size: 1rem; }

.ff-features-intro h1[b-eko0i2769h] {
    font-size: 2.1rem;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.025em;
    margin: 16px 0 0;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
}

.ff-features-lede[b-eko0i2769h] {
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    margin: 16px 0 0;
}

.ff-features-intro__cta[b-eko0i2769h] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.ff-features-cta[b-eko0i2769h] {
    box-shadow: 0 8px 22px -8px rgba(248, 91, 1, .6);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ff-features-cta:hover[b-eko0i2769h] {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(248, 91, 1, .75);
}

/* ---- detail rows ---- */
.ff-features-list[b-eko0i2769h] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 36px 0 8px;
}

.ff-feature-row[b-eko0i2769h] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    background: var(--mud-palette-surface);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Brand accent rail down the leading edge, widening on hover. */
.ff-feature-row[b-eko0i2769h]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ff-brand), #ff8a3d);
    opacity: .85;
    transition: width .22s ease;
}

.ff-feature-row:hover[b-eko0i2769h] {
    transform: translateY(-3px);
    border-color: rgba(248, 91, 1, .45);
    box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .55);
}

.ff-feature-row:hover[b-eko0i2769h]::before { width: 7px; }

.ff-feature-row__icon[b-eko0i2769h] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: rgba(248, 91, 1, .12);
    border: 1px solid rgba(248, 91, 1, .22);
    flex: 0 0 auto;
}

.ff-feature-row__icon[b-eko0i2769h]  .mud-icon-root { font-size: 1.9rem; }

/* Big ghost ordinal behind the icon tile — editorial, sporty rhythm. */
.ff-feature-row__num[b-eko0i2769h] {
    position: absolute;
    top: -18px;
    right: -14px;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--ff-brand);
    opacity: .16;
    pointer-events: none;
}

.ff-feature-row__body h2[b-eko0i2769h] {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 8px;
    color: var(--mud-palette-text-primary);
}

.ff-feature-row__body p[b-eko0i2769h] {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.ff-feature-row__points[b-eko0i2769h] {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ff-feature-row__points li[b-eko0i2769h] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .9rem;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
}

/* ---- closing band ---- */
.ff-features-band[b-eko0i2769h] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 44px 0 16px;
    padding: 48px 24px;
    border-radius: 22px;
    text-align: center;
    color: #ffffff;
    background:
        radial-gradient(120% 160% at 50% 0%, rgba(248, 91, 1, .26) 0%, rgba(248, 91, 1, 0) 60%),
        linear-gradient(135deg, #14142c 0%, #1a1a2e 50%, #0e1030 100%);
    border: 1px solid rgba(248, 91, 1, .3);
}

.ff-features-band__glow[b-eko0i2769h] {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(60% 120% at 50% 120%, rgba(255, 122, 46, .28), transparent 70%);
}

.ff-features-band h2[b-eko0i2769h] {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 8px;
    color: #ffffff;
}

.ff-features-band p[b-eko0i2769h] {
    color: rgba(255, 255, 255, .82);
    margin: 0 0 22px;
}

.ff-features-band__cta[b-eko0i2769h] {
    box-shadow: 0 10px 26px -8px rgba(248, 91, 1, .7);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ff-features-band__cta:hover[b-eko0i2769h] {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -8px rgba(248, 91, 1, .85);
}

/* ---- on-load entrance (intro) ---- */
.ff-anim-load > *[b-eko0i2769h] {
    animation: ffFadeUp .6s cubic-bezier(.22, .61, .36, 1) both;
}
.ff-anim-load .ff-features-eyebrow[b-eko0i2769h] { animation-delay: .04s; }
.ff-anim-load h1[b-eko0i2769h] { animation-delay: .12s; }
.ff-anim-load .ff-features-lede[b-eko0i2769h] { animation-delay: .2s; }
.ff-anim-load .ff-features-intro__cta[b-eko0i2769h] { animation-delay: .28s; }

/* ---- breakpoints ---- */
@media (min-width: 600px) {
    .ff-features-intro h1[b-eko0i2769h] { font-size: 2.6rem; }

    .ff-feature-row[b-eko0i2769h] {
        flex-direction: row;
        align-items: flex-start;
        gap: 22px;
        padding: 30px 30px 30px 34px;
    }
}

@media (min-width: 960px) {
    .ff-feature-row--alt[b-eko0i2769h] {
        background: var(--mud-palette-background-grey, var(--mud-palette-surface));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ff-feature-row[b-eko0i2769h],
    .ff-feature-row[b-eko0i2769h]::before,
    .ff-features-cta[b-eko0i2769h],
    .ff-features-band__cta[b-eko0i2769h] { transition: none; }
}
/* /Pages/Public/JoinLanding.razor.rz.scp.css */
/* Wake the Rails B6: scoped styles for the branded invite landing (/join/{code}).

   Mobile first and single column at every width, because the overwhelming case is a member tapping a
   link out of a group chat on a phone. Nothing here sets a fixed width, so the card fills a 360px
   viewport with room to spare; the container's MaxWidth.Small caps it on desktop.

   Colours ride MudBlazor's --mud-palette-* so light and dark both work; the accent keys off --ff-brand
   exactly like the sibling public pages (Landing / Contact / Pricing). */

.ff-join[b-xoyazwirgm] {
    padding-top: 8px;
    padding-bottom: 24px;
}

.ff-join-boot[b-xoyazwirgm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 72px 0;
    color: var(--mud-palette-text-secondary);
}

.ff-join-boot p[b-xoyazwirgm] {
    margin: 0;
    font-size: .95rem;
}

.ff-join-card[b-xoyazwirgm] {
    margin-top: 24px;
    padding: 24px 20px 26px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.ff-join-eyebrow[b-xoyazwirgm] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ff-brand);
    background: rgba(248, 91, 1, .1);
    border: 1px solid rgba(248, 91, 1, .28);
}

.ff-join-eyebrow[b-xoyazwirgm]  .mud-icon-root { font-size: 1rem; }

.ff-join-title[b-xoyazwirgm] {
    font-size: 1.6rem;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 16px 0 0;
    /* League names can be long and unbroken; never let one push the card wider than the phone. */
    overflow-wrap: anywhere;
    color: var(--mud-palette-text-primary);
}

.ff-join-lede[b-xoyazwirgm] {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    margin: 12px 0 0;
}

.ff-join-host[b-xoyazwirgm] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 0;
    font-size: .95rem;
    color: var(--mud-palette-text-secondary);
}

.ff-join-host[b-xoyazwirgm]  .mud-icon-root { font-size: 1.05rem; }

.ff-join-seats[b-xoyazwirgm] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 18px;
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
}

.ff-join-seats__count[b-xoyazwirgm] {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--mud-palette-text-primary);
}

.ff-join-seats__label[b-xoyazwirgm] {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.ff-join-remaining[b-xoyazwirgm] {
    margin: 10px 0 0;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ff-brand);
}

.ff-join-blurb[b-xoyazwirgm] {
    margin: 18px 0 0;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.ff-join-alert[b-xoyazwirgm] {
    margin-top: 16px;
}

.ff-join-actions[b-xoyazwirgm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}

.ff-join-cta[b-xoyazwirgm] {
    font-weight: 700;
}

.ff-join-note[b-xoyazwirgm] {
    margin: 4px 0 0;
    text-align: center;
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
}

@media (min-width: 600px) {
    .ff-join-card[b-xoyazwirgm] {
        padding: 32px 32px 34px;
    }

    .ff-join-title[b-xoyazwirgm] {
        font-size: 1.9rem;
    }
}
/* /Pages/Public/Landing.razor.rz.scp.css */
/* Wave 2 redesign: scoped styles for the public landing. Bold, sporty, game-day energy. The hero is
   a deliberately DARK, orange-accented band in BOTH themes (the logo's football + motion-streak
   motif), so the white-text lockup language carries through; the sections below ride MudBlazor's
   --mud-palette-* so they read in light and dark. Accents key off --ff-brand (app.css). Mobile-first:
   single column that grows to a two-column hero and multi-up grids at wider breakpoints. */

.ff-landing-boot[b-t72onsbiku] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.ff-landing[b-t72onsbiku] {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* ==========================================================================================
   HERO
   ========================================================================================== */
.ff-landing-hero[b-t72onsbiku] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 16px;
    padding: 44px 24px 48px;
    border-radius: 22px;
    background:
        radial-gradient(120% 140% at 85% 0%, rgba(248, 91, 1, .22) 0%, rgba(248, 91, 1, 0) 55%),
        linear-gradient(135deg, #14142c 0%, #1a1a2e 48%, #0e1030 100%);
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .65);
    color: #ffffff;
}

/* ---- decorative backdrop (speed streaks + orb glow) ---- */
.ff-hero-bg[b-t72onsbiku] {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.ff-hero-orb[b-t72onsbiku] {
    position: absolute;
    top: -30%;
    right: -12%;
    width: 60%;
    height: 120%;
    background: radial-gradient(circle at center, rgba(255, 122, 46, .35) 0%, rgba(255, 122, 46, 0) 65%);
    filter: blur(6px);
    animation: ffHeroOrb-b-t72onsbiku 9s ease-in-out infinite;
}

.ff-hero-streak[b-t72onsbiku] {
    position: absolute;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(248, 91, 1, 0) 0%, rgba(248, 91, 1, .85) 55%, rgba(255, 176, 122, .95) 100%);
    transform: rotate(-18deg);
    opacity: .55;
    animation: ffHeroStreak-b-t72onsbiku 4.5s cubic-bezier(.4, 0, .2, 1) infinite;
}

.ff-hero-streak--1[b-t72onsbiku] { top: 22%; left: -20%; width: 45%; animation-delay: .0s; }
.ff-hero-streak--2[b-t72onsbiku] { top: 52%; left: -25%; width: 60%; opacity: .32; animation-delay: 1.1s; }
.ff-hero-streak--3[b-t72onsbiku] { top: 78%; left: -15%; width: 38%; opacity: .22; animation-delay: 2.2s; }

@keyframes ffHeroStreak-b-t72onsbiku {
    0%   { transform: translateX(0) rotate(-18deg); opacity: 0; }
    18%  { opacity: .6; }
    60%  { opacity: .5; }
    100% { transform: translateX(190%) rotate(-18deg); opacity: 0; }
}

@keyframes ffHeroOrb-b-t72onsbiku {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .9; }
    50%      { transform: translate3d(-3%, 4%, 0) scale(1.06); opacity: 1; }
}

/* ---- hero copy ---- */
.ff-landing-hero__copy[b-t72onsbiku] { position: relative; z-index: 1; }

.ff-landing-eyebrow[b-t72onsbiku] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #ffd9c2;
    background: rgba(248, 91, 1, .16);
    border: 1px solid rgba(248, 91, 1, .4);
}

.ff-landing-eyebrow[b-t72onsbiku]  .mud-icon-root { font-size: 1rem; color: var(--ff-brand); }

.ff-landing-hero__copy h1[b-t72onsbiku] {
    font-size: 2.2rem;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.025em;
    margin: 16px 0 0;
    color: #ffffff;
    text-wrap: balance;
}

.ff-landing-lede[b-t72onsbiku] {
    font-size: 1.06rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    margin: 16px 0 0;
    max-width: 46ch;
}

.ff-landing-cta[b-t72onsbiku] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.ff-landing-cta__primary[b-t72onsbiku] {
    min-width: 180px;
    box-shadow: 0 8px 24px -6px rgba(248, 91, 1, .55);
    transition: transform .18s ease, box-shadow .18s ease;
}

.ff-landing-cta__primary:hover[b-t72onsbiku] {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -6px rgba(248, 91, 1, .7);
}

/* The ghost "Log in" sits on the dark hero, so force a legible light border + text regardless of
   theme (the default outlined-primary is fine, but this guarantees contrast on the dark panel). */
.ff-landing-cta__ghost[b-t72onsbiku]  .mud-button-label { color: #ffffff; }
.ff-landing-cta__ghost[b-t72onsbiku] {
    border-color: rgba(255, 255, 255, .5) !important;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.ff-landing-cta__ghost:hover[b-t72onsbiku] {
    transform: translateY(-2px);
    border-color: var(--ff-brand) !important;
    background-color: rgba(248, 91, 1, .12) !important;
}

.ff-landing-note[b-t72onsbiku] {
    font-size: .82rem;
    color: rgba(255, 255, 255, .6);
    margin: 16px 0 0;
}

/* ---- hero art (football + streak) ---- */
.ff-landing-hero__art[b-t72onsbiku] {
    display: none;
    position: relative;
    z-index: 1;
    justify-content: center;
    align-items: center;
}

.ff-hero-ball[b-t72onsbiku] {
    position: relative;
    display: inline-flex;
    animation: ffHeroFloat-b-t72onsbiku 5.5s ease-in-out infinite;
}

.ff-hero-ball[b-t72onsbiku]::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 8%;
    width: 150%;
    height: 12px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(248, 91, 1, .9) 0%, rgba(248, 91, 1, 0) 100%);
    filter: blur(4px);
    border-radius: 12px;
    z-index: -1;
}

.ff-landing-hero__glyph[b-t72onsbiku] {
    font-size: 13rem;
    color: var(--ff-brand);
    filter: drop-shadow(0 12px 30px rgba(248, 91, 1, .5));
}

@keyframes ffHeroFloat-b-t72onsbiku {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50%      { transform: translateY(-14px) rotate(-8deg); }
}

/* ==========================================================================================
   SECTIONS
   ========================================================================================== */
.ff-landing-section[b-t72onsbiku] { padding: 48px 0 8px; }

.ff-landing-h2[b-t72onsbiku] {
    position: relative;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 24px;
    padding-left: 14px;
    color: var(--mud-palette-text-primary);
}

/* Brand accent bar to the left of section headings. */
.ff-landing-h2[b-t72onsbiku]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 5px;
    border-radius: 5px;
    background: linear-gradient(180deg, var(--ff-brand), #ff8a3d);
}

/* ---- value prop cards ---- */
.ff-landing-card[b-t72onsbiku] {
    height: 100%;
    position: relative;
    overflow: hidden;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 22px 20px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Orange top rule that widens on hover, echoing the streak motif. */
.ff-landing-card[b-t72onsbiku]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 34%;
    background: linear-gradient(90deg, var(--ff-brand), #ff8a3d);
    transition: width .25s ease;
}

.ff-landing-card:hover[b-t72onsbiku] {
    transform: translateY(-6px);
    border-color: rgba(248, 91, 1, .5);
    box-shadow: 0 18px 34px -20px rgba(0, 0, 0, .55);
}

.ff-landing-card:hover[b-t72onsbiku]::before { width: 100%; }

.ff-landing-card__icon[b-t72onsbiku] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(248, 91, 1, .12);
    border: 1px solid rgba(248, 91, 1, .22);
}

.ff-landing-card h3[b-t72onsbiku] {
    font-size: 1.06rem;
    font-weight: 700;
    margin: 14px 0 6px;
    color: var(--mud-palette-text-primary);
}

.ff-landing-card p[b-t72onsbiku] {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

/* ---- how it works ---- */
.ff-landing-step[b-t72onsbiku] {
    height: 100%;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid transparent;
    transition: border-color .2s ease, background-color .2s ease;
}

.ff-landing-step:hover[b-t72onsbiku] {
    border-color: var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.ff-landing-step__num[b-t72onsbiku] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, var(--ff-brand), #ff8a3d);
    box-shadow: 0 8px 18px -8px rgba(248, 91, 1, .8);
}

.ff-landing-step h3[b-t72onsbiku] {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 6px 0 6px;
    color: var(--mud-palette-text-primary);
}

.ff-landing-step p[b-t72onsbiku] {
    font-size: .9rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

/* ---- closing band ---- */
.ff-landing-band[b-t72onsbiku] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 56px 0 16px;
    padding: 52px 24px;
    border-radius: 22px;
    text-align: center;
    color: #ffffff;
    background:
        radial-gradient(120% 160% at 50% 0%, rgba(248, 91, 1, .28) 0%, rgba(248, 91, 1, 0) 60%),
        linear-gradient(135deg, #16163020 0%, #1a1a2e 50%, #0e1030 100%);
    border: 1px solid rgba(248, 91, 1, .3);
}

.ff-landing-band__glow[b-t72onsbiku] {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(60% 120% at 50% 120%, rgba(255, 122, 46, .3), transparent 70%);
}

.ff-landing-band h2[b-t72onsbiku] {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 8px;
    color: #ffffff;
}

.ff-landing-band p[b-t72onsbiku] {
    color: rgba(255, 255, 255, .82);
    margin: 0 0 22px;
}

.ff-landing-band__cta[b-t72onsbiku] {
    box-shadow: 0 10px 26px -8px rgba(248, 91, 1, .7);
    transition: transform .18s ease, box-shadow .18s ease;
}

.ff-landing-band__cta:hover[b-t72onsbiku] {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -8px rgba(248, 91, 1, .85);
}

/* ==========================================================================================
   ON-LOAD ENTRANCE (hero) — staggered fade-up, plays once.
   ========================================================================================== */
.ff-anim-load .ff-landing-hero__copy > *[b-t72onsbiku] {
    animation: ffFadeUp .6s cubic-bezier(.22, .61, .36, 1) both;
}
.ff-anim-load .ff-landing-eyebrow[b-t72onsbiku] { animation-delay: .05s; }
.ff-anim-load .ff-landing-hero__copy h1[b-t72onsbiku] { animation-delay: .13s; }
.ff-anim-load .ff-landing-lede[b-t72onsbiku] { animation-delay: .21s; }
.ff-anim-load .ff-landing-cta[b-t72onsbiku] { animation-delay: .29s; }
.ff-anim-load .ff-landing-note[b-t72onsbiku] { animation-delay: .37s; }
.ff-anim-load .ff-landing-hero__art[b-t72onsbiku] { animation: ffFadeUp .7s cubic-bezier(.22, .61, .36, 1) .3s both; }

/* ==========================================================================================
   BREAKPOINTS
   ========================================================================================== */
@media (min-width: 600px) {
    .ff-landing-hero[b-t72onsbiku] { padding: 56px 40px 60px; }
    .ff-landing-hero__copy h1[b-t72onsbiku] { font-size: 2.9rem; }
}

@media (min-width: 960px) {
    .ff-landing-hero[b-t72onsbiku] {
        flex-direction: row;
        align-items: center;
        gap: 40px;
        padding: 68px 56px;
    }
    .ff-landing-hero__copy[b-t72onsbiku] { flex: 1 1 56%; }
    .ff-landing-hero__art[b-t72onsbiku] { display: flex; flex: 1 1 44%; }
    .ff-landing-hero__copy h1[b-t72onsbiku] { font-size: 3.4rem; }
}

/* Motion off: kill the ambient hero animations (the reveal + on-load are handled in app.css). */
@media (prefers-reduced-motion: reduce) {
    .ff-hero-orb[b-t72onsbiku],
    .ff-hero-streak[b-t72onsbiku],
    .ff-hero-ball[b-t72onsbiku] { animation: none !important; }
    .ff-landing-card[b-t72onsbiku],
    .ff-landing-step[b-t72onsbiku],
    .ff-landing-cta__primary[b-t72onsbiku],
    .ff-landing-cta__ghost[b-t72onsbiku],
    .ff-landing-band__cta[b-t72onsbiku] { transition: none; }
}
/* /Pages/Public/Legal/LegalDocument.razor.rz.scp.css */
/* Phase 26B: scoped styles for the shared legal-page shell. The document sections come from the
   consuming page as ChildContent, so their h2/p/ul are reached with ::deep. Mobile-first; colours
   ride MudBlazor's --mud-palette-* for light/dark; accent keys off --ff-brand. */

.ff-legal[b-0f5pksq4rp] {
    padding-top: 8px;
    padding-bottom: 24px;
}

.ff-legal-head[b-0f5pksq4rp] {
    padding: 32px 0 8px;
}

.ff-legal-eyebrow[b-0f5pksq4rp] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ff-brand);
    background: rgba(248, 91, 1, .1);
    border: 1px solid rgba(248, 91, 1, .28);
}

.ff-legal-head h1[b-0f5pksq4rp] {
    font-size: 1.9rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 10px 0 6px;
    color: var(--mud-palette-text-primary);
}

.ff-legal-dates[b-0f5pksq4rp] {
    font-size: .85rem;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.ff-legal-draft[b-0f5pksq4rp] {
    margin: 16px 0 8px;
}

/* ---- document body (ChildContent) ---- */
.ff-legal-body[b-0f5pksq4rp] {
    margin-top: 8px;
}

.ff-legal-body[b-0f5pksq4rp]  section {
    margin-top: 28px;
}

.ff-legal-body[b-0f5pksq4rp]  h2 {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 10px;
    color: var(--mud-palette-text-primary);
}

.ff-legal-body[b-0f5pksq4rp]  p {
    font-size: .95rem;
    line-height: 1.65;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 12px;
}

.ff-legal-body[b-0f5pksq4rp]  ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.ff-legal-body[b-0f5pksq4rp]  li {
    font-size: .95rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

.ff-legal-body[b-0f5pksq4rp]  .ff-legal-placeholder {
    font-style: italic;
    color: var(--mud-palette-text-disabled, var(--mud-palette-text-secondary));
}

.ff-legal-foot[b-0f5pksq4rp] {
    margin-top: 36px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: .9rem;
    color: var(--mud-palette-text-secondary);
}

@media (min-width: 600px) {
    .ff-legal-head h1[b-0f5pksq4rp] { font-size: 2.2rem; }
}
/* /Pages/Public/Pricing.razor.rz.scp.css */
/* Phase 26B + wave 2 redesign: scoped styles for the public pricing page. Single-SKU model, so one
   premium centred plan card rather than a tier grid. Mobile-first; colours ride MudBlazor's
   --mud-palette-* for light/dark, accents key off --ff-brand (app.css). */

.ff-pricing[b-b0htmyyzix] {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* ---- header ---- */
.ff-pricing-head[b-b0htmyyzix] {
    text-align: center;
    padding: 40px 0 8px;
}

.ff-pricing-eyebrow[b-b0htmyyzix] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ff-brand);
    background: rgba(248, 91, 1, .1);
    border: 1px solid rgba(248, 91, 1, .28);
}

.ff-pricing-eyebrow[b-b0htmyyzix]  .mud-icon-root { font-size: 1rem; }

.ff-pricing-head h1[b-b0htmyyzix] {
    font-size: 2.1rem;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.025em;
    margin: 16px 0 0;
    color: var(--mud-palette-text-primary);
    text-wrap: balance;
}

.ff-pricing-lede[b-b0htmyyzix] {
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    margin: 16px auto 0;
    max-width: 46ch;
}

/* ---- plan card (featured) ---- */
.ff-pricing-card[b-b0htmyyzix] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: 480px;
    margin: 34px auto 0;
    padding: 34px 28px 26px;
    border: 2px solid var(--ff-brand);
    border-radius: 22px;
    background: var(--mud-palette-surface);
    text-align: center;
    box-shadow: 0 26px 60px -30px rgba(248, 91, 1, .55);
}

/* Soft brand glow bleeding up from the base of the card. */
.ff-pricing-card__glow[b-b0htmyyzix] {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(90% 60% at 50% -5%, rgba(248, 91, 1, .16), transparent 60%);
}

/* Corner ribbon calling out the all-inclusive value. */
.ff-pricing-card__ribbon[b-b0htmyyzix] {
    position: absolute;
    top: 20px;
    right: -46px;
    transform: rotate(45deg);
    width: 180px;
    padding: 5px 0;
    text-align: center;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(135deg, var(--ff-brand), #ff8a3d);
    box-shadow: 0 6px 14px -6px rgba(248, 91, 1, .7);
}

.ff-pricing-card__badge[b-b0htmyyzix] {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ff-brand);
    background: rgba(248, 91, 1, .12);
    border: 1px solid rgba(248, 91, 1, .3);
    padding: 5px 14px;
    border-radius: 999px;
}

.ff-pricing-card__price[b-b0htmyyzix] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 20px 0 4px;
}

.ff-pricing-card__amount[b-b0htmyyzix] {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--mud-palette-text-primary);
}

.ff-pricing-card__cadence[b-b0htmyyzix] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.ff-pricing-card__sub[b-b0htmyyzix] {
    font-size: .95rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 10px auto 0;
    max-width: 34ch;
}

.ff-pricing-included[b-b0htmyyzix] {
    list-style: none;
    margin: 22px 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.ff-pricing-included li[b-b0htmyyzix] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .92rem;
    line-height: 1.4;
    color: var(--mud-palette-text-primary);
}

.ff-pricing-card__cta[b-b0htmyyzix] {
    margin-top: 4px;
    box-shadow: 0 10px 26px -8px rgba(248, 91, 1, .65);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ff-pricing-card__cta:hover[b-b0htmyyzix] {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -8px rgba(248, 91, 1, .82);
}

.ff-pricing-card__note[b-b0htmyyzix] {
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    margin: 14px 0 0;
}

/* ---- free-to-play callout ---- */
.ff-pricing-free[b-b0htmyyzix] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    max-width: 640px;
    margin: 30px auto 0;
    padding: 22px 24px;
    border-radius: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.ff-pricing-free__icon[b-b0htmyyzix] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    flex: 0 0 auto;
    background: rgba(248, 91, 1, .12);
    border: 1px solid rgba(248, 91, 1, .22);
}

.ff-pricing-free h2[b-b0htmyyzix] {
    font-size: 1.08rem;
    font-weight: 700;
    margin: 2px 0 6px;
    color: var(--mud-palette-text-primary);
}

.ff-pricing-free p[b-b0htmyyzix] {
    font-size: .9rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

/* ---- FAQ ---- */
.ff-pricing-faq[b-b0htmyyzix] {
    margin: 48px auto 16px;
    max-width: 720px;
}

.ff-pricing-h2[b-b0htmyyzix] {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 18px;
    text-align: center;
    color: var(--mud-palette-text-primary);
}

.ff-pricing-faq__a[b-b0htmyyzix] {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.ff-pricing-faq__more[b-b0htmyyzix] {
    text-align: center;
    font-size: .9rem;
    color: var(--mud-palette-text-secondary);
    margin: 22px 0 0;
}

/* ---- on-load entrance (header) ---- */
.ff-anim-load > *[b-b0htmyyzix] {
    animation: ffFadeUp .6s cubic-bezier(.22, .61, .36, 1) both;
}
.ff-anim-load .ff-pricing-eyebrow[b-b0htmyyzix] { animation-delay: .04s; }
.ff-anim-load h1[b-b0htmyyzix] { animation-delay: .12s; }
.ff-anim-load .ff-pricing-lede[b-b0htmyyzix] { animation-delay: .2s; }

/* ---- breakpoints ---- */
@media (min-width: 600px) {
    .ff-pricing-head h1[b-b0htmyyzix] { font-size: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ff-pricing-card__cta[b-b0htmyyzix] { transition: none; }
}
/* /Pages/StatSearch.razor.rz.scp.css */
/* Slice F (#84) — mobile-clean stat search.
   Owns: markdown-table horizontal scroll, recent/follow-up chip rows, and the chart container.
   Everything reaches MudBlazor / MarkupString children through an authored ancestor + ::deep,
   because child-component roots never carry this scope.

   P6 (2026-07-30, PD-18): the ask input's layout is NOT owned here any more. The shared <AiAskBar>
   styles its own row in AiAskBar.razor.css, and the phone rules that stacked a full-width Search
   button under the field went with the button itself (ratified D5). */

/* ---- Markdown tables ----
   MarkdownLite emits every pipe table as <div class="ff-md-table"><table>…</table></div>. The
   wrapper scrolls horizontally inside its own box so a wide table (the "Last 6 recent games"
   case) never pushes the page body sideways on a phone. */
.ff-md[b-0qtgcw0k8t]  .ff-md-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin: 0 0 10px;
}
.ff-md[b-0qtgcw0k8t]  .ff-md-table:last-child { margin-bottom: 0; }
.ff-md[b-0qtgcw0k8t]  .ff-md-table table {
    border-collapse: collapse;
    width: auto;
    font-size: .9rem;
}
.ff-md[b-0qtgcw0k8t]  .ff-md-table th,
.ff-md[b-0qtgcw0k8t]  .ff-md-table td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
}
.ff-md[b-0qtgcw0k8t]  .ff-md-table th {
    background: var(--mud-palette-background-grey);
    font-weight: 700;
}

/* ---- Chip rows (recent + follow-up): smooth touch scroll, no scrollbar clutter on phones ---- */
.ff-chip-row[b-0qtgcw0k8t] {
    scrollbar-width: none;              /* Firefox */
    -webkit-overflow-scrolling: touch;
}
.ff-chip-row[b-0qtgcw0k8t]::-webkit-scrollbar { height: 0; width: 0; display: none; }

/* The Clear affordance must stay reachable at the end of the scrollable recent row. */
.ff-recent-row[b-0qtgcw0k8t]  .ff-recent-clear { flex: 0 0 auto; }

/* Recent chips ellipsize so one long past query can't blow out the row; full text is on the
   chip's title attribute (hover + long-press safe). flex: 0 0 auto is load-bearing (punch
   2026-07-25, P-7): without it a full row of recents SHRINKS every chip to an unreadable sliver
   instead of overflowing into the horizontal scroll this row is built for. */
.ff-recent-row[b-0qtgcw0k8t]  .ff-recent-chip { max-width: 200px; flex: 0 0 auto; }
.ff-recent-row[b-0qtgcw0k8t]  .mud-chip-content {
    display: inline-block;
    max-width: 168px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Follow-up chips WRAP (they are whole questions, not tags) and a single long chip ellipsizes
   instead of forcing the row wider than the panel at 360px; the full text rides the chip's title
   attribute (hover + long-press safe). Mirrors Assistant.razor.css's chip rules, scoped to the
   follow-up row so the horizontally scrolling recent row above keeps its own nowrap chips
   (owner triage 2026-07-28: an unclamped follow-up was cut off on mobile). */
.ff-followup-row[b-0qtgcw0k8t]  .mud-chip { max-width: 100%; }
.ff-followup-row[b-0qtgcw0k8t]  .mud-chip-content {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* ---- Chart: fill the card width, scroll only if a wide bar set needs it ---- */
.ff-chart-scroll[b-0qtgcw0k8t] { -webkit-overflow-scrolling: touch; }
.ff-chart-scroll[b-0qtgcw0k8t]  .ff-chart { width: 100%; max-width: 100%; }

/* ---- Ask bar: keep the reading measure sane on a wide desktop ----
   The bar itself is full width on a phone (AiAskBar.razor.css); this only stops the field from
   stretching to a 1200px line on a desktop, which is what the old inline max-width:560px did. */
.ff-toolbar[b-0qtgcw0k8t]  .ff-ask-field { max-width: 560px; }

/* ---- P7 (2026-07-30, PD-17 / PD-18): the empty state's example chips ----
   This page's .ff-chip-row above only adds touch-scroll polish (the recent row sets its own display
   inline), so the example row declares its own flex box. It WRAPS rather than scrolling: these are
   whole questions and a horizontal scroller in a centered empty state advertises nothing. A single
   long example ellipsizes instead of widening the card, with the full text on the chip's title. */
.ff-example-row[b-0qtgcw0k8t] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
}
.ff-example-row[b-0qtgcw0k8t]  .mud-chip { max-width: 100%; }
.ff-example-row[b-0qtgcw0k8t]  .mud-chip-content {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* ---- 375px sweep ---- */
@media (max-width: 600px) {
    .ff-recent-row[b-0qtgcw0k8t]  .mud-chip-content { max-width: 128px; }

    /* PD-18: ff-empty-state's 34px of vertical padding is generous for a card that now carries three
       chips and is the whole screen under the ask bar on a phone. */
    .ff-ai-empty[b-0qtgcw0k8t] { padding: 16px 20px; }
}
/* /Pages/Welcome.razor.rz.scp.css */
/* Phase 30A + PD-21 (polish batch 2026-07-30 §4.10, decisions D10 / D17): scoped styling for the
   welcome / no-league landing. Mobile-first: at 360px the hero is a single column and the explore tiles
   sit two per row; from 600px the countdown and the primary CTA share a row and the three how-it-works
   steps go across; from 960px the explore grid is three up and the page stops growing at 1040px.

   Everything lives here rather than in app.css (D10): app.css is P9's and Phase 35's this round, and
   reusing .ff-league-hero outright would drag in its phone rules (app.css:785-788), which force every
   button in the row to flex:1 for a three-button league action row this page does not have. So the hero
   BORROWS that class's language (16px radius, the primary gradient, white text, white-on-gradient
   filled button) instead of the class itself.

   Selector note: Blazor CSS isolation stamps the scope id on the elements authored in Welcome.razor.
   Rules aimed at markup rendered by a MudBlazor component (MudButton's <button>, MudPaper's <div>, the
   SeasonCountdown <span>) therefore hang off an AUTHORED ancestor plus ::deep, which is the same idiom
   StatSearch.razor.css and Assistant.razor.css already use. */

/* Desktop stops stretching a single explore tile to ~790px. */
.ff-welcome-page[b-8532gnlpas] {
    max-width: 1040px;
    margin-inline: auto;
}

/* ==========================================================================================
   HERO
   ========================================================================================== */
.ff-w-hero[b-8532gnlpas] {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 20px 18px 22px;
    color: #fff;
    /* Same gradient as .ff-league-hero (app.css:764-767) plus a soft top-right highlight for depth.
       White on the brand gradient in BOTH themes, so the hero reads identically light and dark. */
    background:
        radial-gradient(115% 140% at 88% 0%, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-darken, #C74A00));
    box-shadow: 0 16px 40px -26px rgba(0, 0, 0, .65);
}

.ff-w-eyebrow[b-8532gnlpas] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.35;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .34);
}

.ff-w-eyebrow[b-8532gnlpas]  .mud-icon-root {
    font-size: .95rem;
}

.ff-w-title[b-8532gnlpas] {
    margin: 12px 0 0;
    font-size: 1.6rem;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    text-wrap: balance;
}

.ff-w-sub[b-8532gnlpas] {
    margin: 10px 0 0;
    max-width: 48ch;
    font-size: .93rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
}

/* Countdown + primary CTA. One column on a phone (countdown above the button, so both clear the fold
   at 360px), one row from 600px. */
.ff-w-hero-actions[b-8532gnlpas] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}

.ff-w-countdown[b-8532gnlpas] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .22);
}

.ff-w-days[b-8532gnlpas] {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.ff-w-days-num[b-8532gnlpas] {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ff-w-days-unit[b-8532gnlpas] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .84);
}

/* SeasonCountdown renders its own <span>, so it is reached through the authored countdown panel. */
.ff-w-countdown[b-8532gnlpas]  .ff-w-countdown-line {
    flex: 1 1 16ch;
    min-width: 0;
    font-size: .83rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .92);
}

.ff-w-cta[b-8532gnlpas]  .mud-button-root {
    width: 100%;
    min-height: 46px;
    font-weight: 700;
}

/* A primary-coloured button on a primary-coloured gradient would vanish, so the CTA goes white with
   brand text, exactly as .ff-league-hero does in app.css:777. */
.ff-w-cta[b-8532gnlpas]  .mud-button-filled {
    background-color: #fff;
    color: var(--mud-palette-primary);
}

.ff-w-cta[b-8532gnlpas]  .mud-button-filled:hover {
    background-color: rgba(255, 255, 255, .88);
}

/* Create is one quiet line under the primary action, not a card with equal weight. */
.ff-w-create[b-8532gnlpas] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 2px;
    margin-top: 10px;
    font-size: .87rem;
    color: rgba(255, 255, 255, .88);
}

.ff-w-create[b-8532gnlpas]  .mud-button-root {
    min-height: 38px;
    font-weight: 700;
    text-decoration: underline;
    color: #fff;
}

.ff-w-create[b-8532gnlpas]  .mud-button-root:hover {
    background-color: rgba(255, 255, 255, .14);
}

/* The flag-off branch is a disabled text button; MudBlazor's disabled grey is unreadable on the
   gradient, so it keeps white at a lower opacity. */
.ff-w-create[b-8532gnlpas]  .mud-button-root:disabled {
    color: rgba(255, 255, 255, .72) !important;
    text-decoration: none;
}

/* ==========================================================================================
   HOW IT WORKS
   ========================================================================================== */
.ff-w-steps[b-8532gnlpas] {
    display: block;
    margin-top: 28px;
}

.ff-w-h2[b-8532gnlpas] {
    position: relative;
    margin: 0 0 12px;
    padding-left: 12px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--mud-palette-text-primary);
}

.ff-w-h2[b-8532gnlpas]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 4px;
    background: var(--ff-brand, var(--mud-palette-primary));
}

.ff-w-step[b-8532gnlpas] {
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 2px;
}

.ff-w-step-num[b-8532gnlpas] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    background: var(--ff-brand, var(--mud-palette-primary));
}

.ff-w-step-body[b-8532gnlpas] {
    min-width: 0;
}

.ff-w-step h3[b-8532gnlpas] {
    margin: 5px 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.ff-w-step p[b-8532gnlpas] {
    margin: 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

/* ==========================================================================================
   EXPLORE
   ========================================================================================== */
.ff-welcome-explore[b-8532gnlpas] {
    margin-top: 28px;
}

/* #51: the explore tiles are whole-surface links, so they need to read as clickable. A resting
   transparent border reserves the space so the hover border does not shift layout; cursor:pointer, a
   hover tint, a coloured border and a subtle lift give a clear affordance on desktop, and PD-21 adds a
   real press state for touch. The tile stacks (disc above text) so two fit per row at 360px. */
.ff-welcome-explore[b-8532gnlpas]  .ff-welcome-explore-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    padding: 1rem .95rem;
    height: 100%;
    cursor: pointer;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: box-shadow 120ms ease, transform 120ms ease,
                background-color 120ms ease, border-color 120ms ease;
}

/* Keep the caption from forcing the tile wider than its grid cell at 360px (no horizontal scroll). */
.ff-welcome-explore[b-8532gnlpas]  .ff-welcome-explore-tile > div {
    min-width: 0;
}

.ff-welcome-explore[b-8532gnlpas]  .ff-welcome-explore-tile:hover,
.ff-welcome-explore[b-8532gnlpas]  .ff-welcome-explore-tile:focus-visible {
    background-color: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
    transform: translateY(-1px);
    outline: none;
}

.ff-welcome-explore[b-8532gnlpas]  .ff-welcome-explore-tile:active {
    transform: translateY(0) scale(.985);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* Tinted brand disc behind the tile icon. The rgba line is the fallback for engines without
   color-mix; both resolve to the same 14 percent brand tint. */
.ff-w-tile-icon[b-8532gnlpas] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(248, 91, 1, .14);
    background: color-mix(in srgb, var(--ff-brand, #F85B01) 14%, transparent);
}

/* ==========================================================================================
   BREAKPOINTS
   ========================================================================================== */
@media (min-width: 600px) {
    .ff-w-hero[b-8532gnlpas] {
        padding: 30px 30px 32px;
    }

    .ff-w-title[b-8532gnlpas] {
        font-size: 2.05rem;
    }

    .ff-w-sub[b-8532gnlpas] {
        font-size: 1rem;
    }

    /* Countdown and CTA share a row; the button stops being full bleed. */
    .ff-w-hero-actions[b-8532gnlpas] {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 18px;
        margin-top: 20px;
    }

    .ff-w-countdown[b-8532gnlpas] {
        flex: 1 1 320px;
    }

    .ff-w-cta[b-8532gnlpas]  .mud-button-root {
        width: auto;
        min-width: 210px;
    }

    .ff-welcome-explore[b-8532gnlpas]  .ff-welcome-explore-tile {
        padding: 1.15rem 1.2rem;
        gap: .7rem;
    }
}

@media (min-width: 960px) {
    .ff-w-hero[b-8532gnlpas] {
        padding: 38px 40px 40px;
    }

    .ff-w-title[b-8532gnlpas] {
        font-size: 2.4rem;
    }
}

/* Motion off: the tiles keep their colour changes and lose the movement. */
@media (prefers-reduced-motion: reduce) {
    .ff-welcome-explore[b-8532gnlpas]  .ff-welcome-explore-tile {
        transition: background-color 120ms ease, border-color 120ms ease;
    }

    .ff-welcome-explore[b-8532gnlpas]  .ff-welcome-explore-tile:hover,
    .ff-welcome-explore[b-8532gnlpas]  .ff-welcome-explore-tile:focus-visible,
    .ff-welcome-explore[b-8532gnlpas]  .ff-welcome-explore-tile:active {
        transform: none;
    }
}
/* /Shared/Ai/AiAskBar.razor.rz.scp.css */
/* Polish batch P6 (PD-16 / PD-18, plan §4.6) — the shared AI ask bar's own layout.

   The field and the send button share ONE row at every width, which is the whole point of D5: stat
   search used to stack a full-width labeled "Search" slab under the field and spend ~56px of phone
   height on it. Everything below the host div is a MudBlazor child root, so it carries no scope id
   and has to be reached through ::deep, the idiom Assistant.razor.css and StatSearch.razor.css use. */

.ff-ask-bar[b-bd2r0134st] {
    display: flex;
    /* flex-end, not center: the field GROWS upward to three lines, and the send button must stay on
       the bar's baseline instead of drifting to the middle of a tall textarea. */
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    max-width: 100%;
}

/* min-width:0 is load-bearing. A flex item's default min-width is auto, so without it a long
   unbroken question would push the field wider than the panel at 360px instead of scrolling. */
.ff-ask-bar[b-bd2r0134st]  .ff-ask-field {
    flex: 1 1 auto;
    min-width: 0;
}

/* The textarea AutoGrow renders: no manual resize grip (the component owns the height, 1 to 3 lines,
   and a drag handle inside a chat row is a mis-tap target on a phone). */
.ff-ask-bar[b-bd2r0134st]  .ff-ask-field textarea {
    resize: none;
}

/* 44px minimum on both axes is the phone tap-target floor from the batch's breakpoint matrix.
   flex:0 0 auto keeps the button its own size while the field absorbs the remaining width. */
.ff-ask-bar[b-bd2r0134st]  .ff-ask-send {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
}
/* /Shared/BrandMark.razor.rz.scp.css */
/* Scoped styling for the single-source brand mark. The mark is height-driven: the HTML height
   attribute sets the box, and width:auto lets the wide 3:2 lockup keep its natural aspect. */

.ff-brandmark[b-20p40oacw6] {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.ff-brandmark__img[b-20p40oacw6] {
    display: block;
    width: auto;         /* follow the asset's aspect from the height */
    max-width: 100%;     /* never force horizontal overflow of the bar it sits in */
}

/* Wave 2 legibility (owner feedback): the wide, detailed wordmark lockup must stay READABLE on
   phones, not shrink to a smear. Cap it to a sensible floor (30px) rather than the old 24px so the
   text is legible at a glance; width follows the aspect. The HTML height attr is the larger desktop
   size and wins above this breakpoint. */
@media (max-width: 599.98px) {
    .ff-brandmark--lockup .ff-brandmark__img[b-20p40oacw6] {
        height: 40px;
    }
}

@media (max-width: 359.98px) {
    .ff-brandmark--lockup .ff-brandmark__img[b-20p40oacw6] {
        height: 36px;
    }
}

/* The square icon variant reads as a tile; soften its corners. */
.ff-brandmark--icon .ff-brandmark__img[b-20p40oacw6] {
    border-radius: 6px;
}
/* /Shared/CountStepper.razor.rz.scp.css */
.ff-count-stepper[b-vl50j1yuui] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 44px is the minimum comfortable touch target; touch-action: manipulation removes the browser's
   double-tap-to-zoom gesture on these controls so a fast second tap steps again instead of zooming. */
.ff-count-stepper[b-vl50j1yuui]  .ff-count-stepper-btn {
    min-width: 44px;
    width: 44px;
    height: 44px;
    touch-action: manipulation;
    flex: 0 0 auto;
}

.ff-count-stepper[b-vl50j1yuui]  .ff-count-stepper-field {
    flex: 1 1 auto;
    min-width: 0;
}

.ff-count-stepper[b-vl50j1yuui]  .ff-count-stepper-field input {
    text-align: center;
    font-variant-numeric: tabular-nums;
    touch-action: manipulation;
}
/* /Shared/Draft/DraftRoomSegment.razor.rz.scp.css */
/* #55: keep the "Best available" position filters (ALL/QB/RB/WR/DEF) on ONE line on phones. Before,
   the label + MudSpacer + chips shared a single wrapping flex row, so on a narrow screen DEF spilled
   onto a second line. Now the label and the chip group are the two flex children: they may wrap to two
   ROWS relative to each other, but the chip group itself never wraps and scrolls horizontally as a last
   resort, so the five chips always read as one tidy line. */

.ff-ba-head[b-5utwbz5vsc] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ff-ba-filters[b-5utwbz5vsc] {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    /* Right-align the chips on a wide row (replaces the old MudSpacer); when the head wraps, this row
       takes the full width on its own line. */
    margin-left: auto;
    min-width: 0;
    max-width: 100%;
    /* Last-resort horizontal scroll instead of wrapping a chip to a second line. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Hide the scrollbar; the chips read as a compact single row. */
    scrollbar-width: none;
    padding-bottom: 1px;
}

.ff-ba-filters[b-5utwbz5vsc]::-webkit-scrollbar {
    display: none;
}

/* Each chip keeps its natural size and never shrinks (the row scrolls instead). Tight padding so all
   five fit at 375px without needing to scroll. */
.ff-ba-filters[b-5utwbz5vsc]  .mud-button-root {
    flex: 0 0 auto;
    min-width: 0;
    padding: 1px 11px;
}
/* /Shared/NoLeagueState.razor.rz.scp.css */
/* 2026-07-31 (owner, uniform-polish pass): the shared no-league funnel, restyled in the welcome
   hero's language (Welcome.razor.css) so a league-less member sees the same brand face on every
   league-gated surface. The rules hang off the AUTHORED <section> and its literal children; MudBlazor
   markup (buttons, the icon, the link) is reached via ::deep, the same idiom Welcome.razor.css uses.
   Mobile-first: buttons stack full width at 360px, sit inline from 600px. */

.ff-no-league[b-bbkth5n6m2] {
    position: relative;
    overflow: hidden;
    text-align: center;
    max-width: 38rem;
    margin: 1.5rem auto;
    padding: 26px 20px 24px;
    border-radius: 16px;
    color: #fff;
    /* The welcome hero's gradient plus its soft top-right highlight, so the funnel and the landing
       read as one system. White on the brand gradient in BOTH themes. */
    background:
        radial-gradient(115% 140% at 88% 0%, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-darken, #C74A00));
    box-shadow: 0 16px 40px -26px rgba(0, 0, 0, .65);
}

/* Translucent white disc behind the icon, the hero eyebrow's surface treatment. */
.ff-nl-icon[b-bbkth5n6m2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .34);
}

.ff-nl-icon[b-bbkth5n6m2]  .mud-icon-root {
    color: #fff;
}

.ff-nl-title[b-bbkth5n6m2] {
    margin: 14px 0 0;
    font-size: 1.35rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.015em;
    color: #fff;
    text-wrap: balance;
}

.ff-nl-message[b-bbkth5n6m2] {
    margin: 10px auto 0;
    max-width: 46ch;
    font-size: .9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
}

.ff-no-league-actions[b-bbkth5n6m2] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
    margin-top: 18px;
}

.ff-no-league-actions[b-bbkth5n6m2]  .mud-button-root {
    width: 100%;
    min-height: 46px;
    font-weight: 700;
}

/* A primary-coloured button on the primary gradient would vanish, so Join goes white with brand
   text, exactly as the welcome hero's CTA does. */
.ff-no-league-actions[b-bbkth5n6m2]  .mud-button-filled {
    background-color: #fff;
    color: var(--mud-palette-primary);
}

.ff-no-league-actions[b-bbkth5n6m2]  .mud-button-filled:hover {
    background-color: rgba(255, 255, 255, .88);
}

/* Create is the quieter twin: white outline on the gradient. */
.ff-no-league-actions[b-bbkth5n6m2]  .mud-button-outlined {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.ff-no-league-actions[b-bbkth5n6m2]  .mud-button-outlined:hover {
    background-color: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .8);
}

/* The flag-off branch is a disabled outlined button; MudBlazor's disabled grey is unreadable on the
   gradient, so it keeps white at a lower opacity (the welcome hero's disabled rule). */
.ff-no-league-actions[b-bbkth5n6m2]  .mud-button-root:disabled {
    color: rgba(255, 255, 255, .72) !important;
    border-color: rgba(255, 255, 255, .3) !important;
}

.ff-no-league-welcome[b-bbkth5n6m2] {
    margin-top: 1.1rem;
    font-size: 0.85rem;
}

/* MudLink paints itself with the primary palette class, which is the gradient's own colour, so
   without the !important the link disappears into the background. */
.ff-no-league-welcome[b-bbkth5n6m2]  .mud-link {
    color: rgba(255, 255, 255, .92) !important;
    text-decoration: underline;
}

.ff-no-league-welcome[b-bbkth5n6m2]  .mud-link:hover {
    color: #fff !important;
}

@media (min-width: 600px) {
    .ff-no-league[b-bbkth5n6m2] {
        padding: 32px 32px 28px;
    }

    .ff-nl-title[b-bbkth5n6m2] {
        font-size: 1.55rem;
    }

    /* Inline from 600px; wrap the ROW (not the label) when the flag-off button's long caption
       squeezes its neighbor, so a button never breaks onto two text lines. */
    .ff-no-league-actions[b-bbkth5n6m2] {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .ff-no-league-actions[b-bbkth5n6m2]  .mud-button-root {
        width: auto;
        min-width: 180px;
        white-space: nowrap;
    }
}
/* /Shared/PickemPickPanel.razor.rz.scp.css */
/* Phase 28 punch (#47): a designed empty state for the pick'em slate, matching the pool
   detail's join/empty panels. Info accent stays within the MudBlazor palette. */
.pickem-empty[b-9jyrmlatq2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 32px 22px;
}
.pickem-empty[b-9jyrmlatq2]  .mud-icon-root {
    font-size: 2.2rem;
    color: var(--mud-palette-info);
    opacity: .5;
}
.pickem-empty__t[b-9jyrmlatq2] { font-weight: 700; font-size: 1rem; }
.pickem-empty__d[b-9jyrmlatq2] {
    font-size: .84rem;
    color: var(--mud-palette-text-secondary);
    max-width: 340px;
    line-height: 1.5;
}
/* /Shared/SeasonCompleteBanner.razor.rz.scp.css */
/* Phase 30C: scoped styling for the season-complete recap banner. Mobile-first and theme-aware via
   MudBlazor palette variables (so light/dark both read correctly). app.css is off-limits this wave, so
   this rides Blazor CSS isolation, same as the 30A/30B additions. */

.ff-season-complete[b-cnkk38wm58] {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.ff-sc-head[b-cnkk38wm58] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.ff-sc-trophy[b-cnkk38wm58] {
    color: var(--mud-palette-warning);
    font-size: 2.5rem;
    flex: 0 0 auto;
}

.ff-sc-title[b-cnkk38wm58] {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
}

.ff-sc-champ[b-cnkk38wm58] {
    margin-top: 0.15rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.95rem;
}

.ff-sc-champ-pts[b-cnkk38wm58] {
    margin-left: 0.4rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
}

.ff-sc-standings[b-cnkk38wm58] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ff-sc-row[b-cnkk38wm58] {
    display: grid;
    grid-template-columns: 1.75rem 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
}

.ff-sc-row.champ[b-cnkk38wm58] {
    background: var(--mud-palette-primary-hover);
    font-weight: 600;
}

.ff-sc-rank[b-cnkk38wm58] {
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.ff-sc-name[b-cnkk38wm58] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ff-sc-crown[b-cnkk38wm58] {
    color: var(--mud-palette-warning);
}

.ff-sc-pts[b-cnkk38wm58] {
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.ff-sc-actions[b-cnkk38wm58] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.ff-sc-actions[b-cnkk38wm58]  .mud-button-root {
    width: 100%;
}

@media (min-width: 600px) {
    .ff-sc-actions[b-cnkk38wm58] {
        flex-direction: row;
    }

    .ff-sc-actions[b-cnkk38wm58]  .mud-button-root {
        width: auto;
    }
}
/* /Shared/SiteFooter.razor.rz.scp.css */
/* Phase 26F: scoped styling for the single site-wide footer. Mobile-first: at 375px everything
   stacks and centres so there is never horizontal overflow; the link row and copyright spread out as
   width grows (600px, 960px per the plan's breakpoint matrix). Colours track the MudBlazor theme
   tokens, so the footer reads correctly in both light and dark with no dark-class override. */

.ff-sitefooter[b-ge7n53f5wb] {
    border-top: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-surface);
    /* Belt-and-braces against horizontal overflow on narrow phones. */
    overflow-x: hidden;
    /* Owner walkthrough (authed footer too big): trimmed from 1.25rem/2rem so the band reads as a
       tight strip, not a tall sparse block. */
    padding: 1rem 1rem;
    margin-top: 1.5rem;
}

/* App-shell mount only: extra bottom room so the fixed bottom-right ScrollToTopButton FAB
   (Size.Small MudFab, ~2.5rem tall) and the PwaInstallPrompt clear the last footer row when a short
   authed page is scrolled to the bottom. The FAB is only in the app shell, so the public layout
   never pays this. Owner walkthrough feedback: the old flat 4.5rem read as a big empty block below
   the footer text, so this is now sized to the FAB's own two breakpoints instead of one oversized
   constant - bottom offset (1.5rem desktop / 1rem phone, see .ff-scroll-top) + its ~2.5rem height,
   plus a small buffer. */
.ff-sitefooter--appshell[b-ge7n53f5wb] {
    padding-bottom: 4rem;
}

@media (max-width: 599.98px) {
    .ff-sitefooter--appshell[b-ge7n53f5wb] {
        padding-bottom: 3.5rem;
    }
}

.ff-sitefooter__inner[b-ge7n53f5wb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Tighter vertical rhythm on phones so the brand, links and copyright read as one compact block
       rather than a tall sparse column (#53). */
    gap: 0.85rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.ff-sitefooter__brand[b-ge7n53f5wb] {
    display: inline-flex;
    align-items: center;
}

/* #53 / #71 follow-up: BrandMark's own scoped sheet caps the lockup on phones (illegible for the
   detailed wordmark). We render the footer lockup at 54px (desktop) and override the phone cap up to a
   still-legible 44px (item 71 bump from 32px). The ::deep reach into BrandMark plus the anchor on the
   footer's scope attribute gives this higher specificity than BrandMark's own mobile rule, so it wins
   without editing BrandMark. */
@media (max-width: 599.98px) {
    .ff-sitefooter[b-ge7n53f5wb]  .ff-brandmark--lockup .ff-brandmark__img {
        height: 44px;
    }
}

/* Mobile-first (#53): the legal / support links sit in ONE centred, wrapping row instead of a tall
   plain vertical column. At 375px the four short links fit on a single line; if a longer set ever wraps
   it forms a tidy centred 2-up grid rather than a stack. The row-gap keeps wrapped rows readable. */
.ff-sitefooter__links[b-ge7n53f5wb] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
}

.ff-sitefooter__copy[b-ge7n53f5wb] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* 600px: widen the inter-link spacing now that there is more room. */
@media (min-width: 600px) {
    .ff-sitefooter__links[b-ge7n53f5wb] {
        gap: 0.5rem 1.5rem;
    }
}

/* 960px: full-width inline row, brand left, links centred, copyright right. */
@media (min-width: 960px) {
    .ff-sitefooter__inner[b-ge7n53f5wb] {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        gap: 1.5rem;
    }

    .ff-sitefooter__links[b-ge7n53f5wb] {
        flex: 1 1 auto;
        justify-content: center;
    }

    .ff-sitefooter__copy[b-ge7n53f5wb] {
        white-space: nowrap;
    }
}