html, body {
font-family: 'Roboto', sans-serif;
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
/* ============================================================
Dashboard / panel layer (Path A visual pass).
Built on MudBlazor's own --mud-palette-* variables so every
surface adapts automatically to light/dark themes.
============================================================ */
.ff-page-head { margin-bottom: 20px; }
.ff-page-head h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; margin: 0; line-height: 1.15; }
.ff-page-sub { color: var(--mud-palette-text-secondary); font-size: .9rem; margin-top: 4px; }
/* Phase 21D: section divider heading on the rebuilt /stats league-history grid. Named distinctly from
.ff-records-section-head so the two pages' section counts never collide in tests. */
.ff-stats-section-head {
display: flex; align-items: center; gap: 8px;
margin: 20px 0 2px; font-size: 1.02rem; font-weight: 700;
}
/* KPI tiles */
.ff-tile {
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-lines-default);
border-radius: 14px;
padding: 16px 18px;
height: 100%;
display: flex;
flex-direction: column;
gap: 5px;
min-height: 104px;
}
.ff-tile-label {
font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
color: var(--mud-palette-text-secondary); font-weight: 600;
display: flex; align-items: center; gap: 6px;
}
.ff-tile-value {
font-size: 1.85rem; font-weight: 700; line-height: 1.05;
font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary);
}
.ff-tile-value .u { font-size: .95rem; font-weight: 500; color: var(--mud-palette-text-secondary); }
/* A date, not a number: it needs to wrap inside a half-width tile at 360px rather than run past the
tile edge, so it drops the big display size and is allowed to break between the date and the time. */
.ff-tile-value-date { font-size: 1.15rem; line-height: 1.2; overflow-wrap: break-word; }
@media (min-width: 600px) { .ff-tile-value-date { font-size: 1.25rem; } }
.ff-tile-sub { font-size: .76rem; color: var(--mud-palette-text-secondary); margin-top: auto; }
/* Section panels */
.ff-panel {
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-lines-default);
border-radius: 14px;
overflow: hidden;
}
.ff-panel-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 13px 16px; border-bottom: 1px solid var(--mud-palette-lines-default);
}
.ff-panel-head .ttl { font-size: .98rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ff-panel-body { padding: 6px; }
.ff-panel-body.pad { padding: 16px; }
/* Standings rows */
.ff-standing {
display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px;
padding: 9px 10px; border-radius: 9px;
}
.ff-standing.me { background: rgba(var(--mud-palette-primary-rgb), .13); }
.ff-standing .rank {
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);
}
.ff-standing.lead .rank { background: var(--mud-palette-primary); color: #fff; }
.ff-standing .who { font-weight: 600; font-size: .89rem; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ff-standing .who .who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ff-standing .who .metag { font-size: .68rem; font-weight: 700; color: var(--mud-palette-primary); margin-left: 6px; letter-spacing: .04em; }
/* Phase 15B: keep the scoreboard avatar compact so the row height doesn't grow. */
.ff-standing .ff-standing-av { width: 26px; height: 26px; min-width: 26px; font-size: .68rem; }
/* Phase 15B: the shared member chip (avatar + resolved team name), used across surfaces. */
.ff-member-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ff-member-chip .ff-member-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Batch B (B2): a linkified member chip stays visually quiet (inherits color/weight) and only
reveals its linkiness on hover, so dense member lists don't turn loud. */
.ff-member-chip.ff-link { color: inherit; font-weight: inherit; }
.ff-member-chip.ff-link:hover { text-decoration: none; }
.ff-member-chip.ff-link:hover .ff-member-chip-name { text-decoration: underline; color: var(--mud-palette-primary); }
/* Phase 15C: public profile + the Account-Settings public-profile editor. */
.ff-profile-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ff-profile-hero-text { min-width: 0; }
.ff-profile-name { margin: 0; font-size: 1.4rem; line-height: 1.2; }
.ff-profile-teams { display: flex; flex-direction: column; gap: 10px; }
.ff-profile-team { display: flex; flex-direction: column; }
.ff-profile-team-name { font-weight: 600; }
.ff-profile-avatar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ff-profile-avatar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ff-file-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 12px; border-radius: 8px;
border: 1px solid var(--mud-palette-lines-default); font-size: .85rem; font-weight: 500; }
.ff-file-btn:hover { background: rgba(var(--mud-palette-primary-rgb), .08); }
.ff-nick-list { display: flex; flex-direction: column; gap: 6px; }
.ff-nick-row { display: flex; align-items: center; gap: 8px; }
.ff-nick-row .ff-nick-player { font-weight: 600; }
.ff-nick-row .ff-nick-arrow { opacity: .6; }
.ff-nick-row .ff-nick-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-nick-add { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.ff-nick-add > * { flex: 1 1 160px; }
.ff-nick-add > button, .ff-nick-add .mud-button-root { flex: 0 0 auto; }
/* Phase 15D: Records Book + career pages. */
.ff-records-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .ff-records-grid { grid-template-columns: 1fr 1fr; } }
.ff-record-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.ff-record-row:last-child { border-bottom: none; }
.ff-record-row .ff-member-chip { flex: 1 1 auto; min-width: 0; }
.ff-record-meta { font-size: .78rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.ff-record-val { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 44px; text-align: right; }
/* Phase 21D: name cell for the merged record-performance rows (player/defense game lists). */
.ff-record-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .89rem; }
.ff-record-name .ff-record-sub { font-weight: 400; font-size: .78rem; color: var(--mud-palette-text-secondary); }
.ff-records-perf-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.05rem; font-weight: 800; }
.ff-stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ff-stat-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px;
background: var(--mud-palette-background-grey); }
.ff-stat-tile .v { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ff-stat-tile .k { font-size: .74rem; color: var(--mud-palette-text-secondary); }
.ff-career-table { width: 100%; border-collapse: collapse; }
.ff-career-table th, .ff-career-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--mud-palette-lines-default); white-space: nowrap; }
.ff-career-table th { font-size: .78rem; color: var(--mud-palette-text-secondary); font-weight: 600; }
/* Phase 15E: rivalry page + picker, and the activity feed. */
.ff-rivalry-head { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 8px 0 20px; flex-wrap: wrap; }
.ff-rivalry-side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.ff-rivalry-name { font-weight: 600; text-align: center; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-rivalry-wins { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.ff-rivalry-vs { font-size: 1.1rem; color: var(--mud-palette-text-secondary); font-weight: 600; }
.ff-rivalry-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ff-rivalry-picker > .mud-input-control { flex: 1 1 180px; min-width: 140px; }
.ff-feed { display: flex; flex-direction: column; gap: 12px; }
.ff-feed-item { display: flex; align-items: flex-start; gap: 10px; }
.ff-feed-item .ff-feed-icon { margin-top: 2px; flex: 0 0 auto; }
.ff-feed-item .ff-md { min-width: 0; }
/* Batch B (B2): a feed row that links to its week's scoreboard. */
a.ff-feed-item { color: inherit; text-decoration: none; border-radius: 6px; margin: -4px -6px; padding: 4px 6px; }
a.ff-feed-item:hover { background: rgba(var(--mud-palette-primary-rgb), .08); }
/* Batch B (B2): the shared linkified-entity affordance (names, week references). Theme-aware. */
.ff-link { color: var(--mud-palette-primary); text-decoration: none; font-weight: 600; cursor: pointer; }
.ff-link:hover { text-decoration: underline; }
/* ---- 18G: activity feed ---- */
/* Name-level links now render inline inside the entry (member → career, player → hub, week →
scoreboard) rather than the whole row being one link, so entries wrap and each link stays tappable
at 360px. break-word keeps a long player/team name from overflowing the narrow column. */
.ff-feed-body { overflow-wrap: break-word; }
.ff-feed-body .ff-feed-name { font-weight: 700; }
/* Phase 15F: co-manager surfaces. */
.ff-comanaged { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.ff-comanager-add { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.ff-comanager-add > .mud-input-control { flex: 1 1 180px; min-width: 140px; }
.ff-comanager-list { display: flex; flex-direction: column; gap: 6px; }
.ff-comanager-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.ff-comanager-row:last-child { border-bottom: none; }
/* T-23: league-settings time-zone picker rows. Friendly label on top, raw IANA id underneath, so the
commissioner recognizes the zone and can still see exactly what is stored. Stacked (not side by
side) so a long id wraps instead of pushing the row wide at 360px. */
.ff-tz-option { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ff-tz-label { font-weight: 600; font-size: .9rem; }
.ff-tz-id { font-size: .75rem; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.ff-tz-none { padding: 8px 12px; font-size: .85rem; color: var(--mud-palette-text-secondary); }
.ff-standing .pts { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9rem; }
/* Roster rows */
.ff-roster-row {
display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px;
padding: 11px 14px; border-bottom: 1px solid var(--mud-palette-lines-default);
}
.ff-roster-row:last-child { border-bottom: 0; }
.ff-roster-row.total { font-weight: 700; }
.ff-pos {
font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-align: center;
padding: 3px 0; border-radius: 6px; color: #fff; text-transform: uppercase;
}
.ff-pos.qb { background: #3b82f6; }
.ff-pos.rb { background: #10b981; }
.ff-pos.wr { background: #f59e0b; }
.ff-pos.flex { background: #8b5cf6; }
.ff-pos.def { background: #ef4444; }
.ff-roster-row .name { font-size: .89rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-roster-row .name.empty { color: var(--mud-palette-text-secondary); font-style: italic; }
.ff-roster-row .pt { font-variant-numeric: tabular-nums; font-weight: 600; }
/* Shared empty-state */
.ff-empty-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; gap: 8px; padding: 34px 20px; color: var(--mud-palette-text-secondary);
}
.ff-empty-state .mud-icon-root { opacity: .5; }
/* Rank medals for the top three */
.ff-standing.r1 .rank { background: #d4af37; color: #231d00; }
.ff-standing.r2 .rank { background: #aab2bd; color: #1b1f24; }
.ff-standing.r3 .rank { background: #cd7f4a; color: #fff; }
/* Page toolbar (year / week selectors etc.) */
.ff-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
/* Segmented control — the Draft hub's section switcher. Sticky under the page head, horizontally
scrollable/swipeable on phones with generous tap targets. */
.ff-segtabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 4px; border-radius: 12px;
background: var(--mud-palette-background-grey); position: sticky; top: 0; z-index: 3;
overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ff-segtabs::-webkit-scrollbar { display: none; }
.ff-segtab { display: inline-flex; align-items: center; gap: 6px; flex: 1 0 auto; justify-content: center;
min-height: 44px; padding: 6px 16px; border: none; border-radius: 9px; cursor: pointer;
background: transparent; color: var(--mud-palette-text-secondary); font-size: .9rem; font-weight: 600;
white-space: nowrap; transition: background .15s, color .15s; }
.ff-segtab:hover { color: var(--mud-palette-text-primary); }
.ff-segtab.active { background: var(--mud-palette-surface); color: var(--mud-palette-primary);
box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.ff-segtab-ico { flex: 0 0 auto; }
.ff-segtab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mud-palette-success);
animation: ff-seg-pulse 1.6s ease-in-out infinite; }
@keyframes ff-seg-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
.ff-seg-body { margin-top: 16px; }
/* Phone: full-width equal segments, tighter padding, label under nothing (icon + short label). */
@media (max-width: 640px) {
.ff-segtab { flex: 1 1 0; padding: 6px 8px; font-size: .82rem; gap: 4px; }
.ff-segtab-lbl { overflow: hidden; text-overflow: ellipsis; }
}
/* Two-column panel layout that stacks on narrow screens */
.ff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 960px) { .ff-cols { grid-template-columns: 1fr; } }
/* Draft pick rows */
.ff-pick-row {
display: grid; grid-template-columns: 40px 44px 1fr auto; align-items: center; gap: 12px;
padding: 10px 14px; border-bottom: 1px solid var(--mud-palette-lines-default);
}
.ff-pick-row:last-child { border-bottom: 0; }
.ff-pick-row .pick {
font-variant-numeric: tabular-nums; font-weight: 700; font-size: .8rem;
color: var(--mud-palette-text-secondary); text-align: center;
}
.ff-pick-row .pick-main { min-width: 0; }
.ff-pick-row .pick-main .nm { font-weight: 600; font-size: .9rem; }
.ff-pick-row .pick-sub {
font-size: .74rem; color: var(--mud-palette-text-secondary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ff-pick-row .pick-pts { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9rem; }
.ff-pos.inrow { display: inline-block; width: 100%; }
/* My Team reads as a capped column instead of a half-width grid that left the desktop right half empty. */
.ff-team-wrap { max-width: 720px; }
/* Board "by member" grid — one roster card per member, auto-fitting columns (1-up on phones). */
.ff-board-view { display: inline-flex; gap: 6px; }
.ff-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 16px; align-items: start; }
/* Phone tightening for the Board pick rows, the roster, and the Room's team strip. */
@media (max-width: 640px) {
.ff-pick-row { grid-template-columns: 28px 38px 1fr auto; gap: 8px; padding: 8px 4px; }
.ff-pick-row .pick-main .nm { font-size: .85rem; }
/* T-33: the chips wrap onto as many lines as the roster needs instead of squeezing five truncated
names onto one. Tighter gaps and padding so two or three still fit per line at 360px. */
.ff-teamstrip { gap: 5px 6px; padding: 6px 8px; }
.ff-teamstrip-slot { padding: 2px 7px 2px 3px; gap: 5px; }
.ff-teamstrip-slot .ff-pos { min-width: 28px; padding: 2px 5px; font-size: .6rem; }
.ff-teamstrip-name { font-size: .78rem; }
}
/* Detail-page title (position chip + name) */
.ff-detail-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ff-detail-title h1 { margin: 0; }
.ff-detail-title .ff-pos { width: auto; min-width: 46px; padding: 5px 12px; font-size: .78rem; }
/* Key/value rows (profile account info etc.) */
.ff-kv { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.ff-kv:last-child { border-bottom: 0; }
.ff-kv .k { color: var(--mud-palette-text-secondary); font-size: .85rem; }
.ff-kv .v { font-weight: 600; font-size: .9rem; }
/* ============================================================
Live Game Day layer (CFBD /scoreboard overlay).
============================================================ */
@keyframes ff-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* "LIVE" badge (page head / panel heads) */
.ff-live-badge {
display: inline-flex; align-items: center; gap: 6px;
background: #ef4444; color: #fff; font-size: .68rem; font-weight: 700;
letter-spacing: .09em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
}
.ff-live-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: ff-pulse 1.4s ease-in-out infinite; }
/* Game-day roster slot: pos chip | name + game chip | points */
.ff-gd-slot {
display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px;
padding: 11px 14px; border-bottom: 1px solid var(--mud-palette-lines-default);
}
.ff-gd-slot:last-child { border-bottom: 0; }
.ff-gd-slot.total { font-weight: 700; }
.ff-gd-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ff-gd-name { font-size: .89rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-gd-name.empty { color: var(--mud-palette-text-secondary); font-style: italic; font-weight: 400; }
.ff-gd-pts { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .95rem; }
/* Per-slot game chip */
.ff-gd-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: var(--mud-palette-text-secondary); min-width: 0; }
.ff-gd-chip .score { font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); font-weight: 700; }
.ff-gd-chip .opp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-gd-chip.live { color: #ef4444; }
.ff-gd-chip .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: ff-pulse 1.4s ease-in-out infinite; flex: none; }
.ff-gd-chip .poss { color: #10b981; font-weight: 700; } /* has the ball */
/* League board rows (expandable) */
.ff-gd-board-row {
display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px;
padding: 10px 12px; border-radius: 9px; cursor: pointer;
}
.ff-gd-board-row:hover { background: rgba(var(--mud-palette-primary-rgb), .06); }
.ff-gd-board-row.me { background: rgba(var(--mud-palette-primary-rgb), .13); }
.ff-gd-board-row .rk {
width: 28px; height: 28px; 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);
}
.ff-gd-board-row.r1 .rk { background: #d4af37; color: #231d00; }
.ff-gd-board-row.r2 .rk { background: #aab2bd; color: #1b1f24; }
.ff-gd-board-row.r3 .rk { background: #cd7f4a; color: #fff; }
.ff-gd-board-main { min-width: 0; }
.ff-gd-board-main .who { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-gd-board-main .who .metag { font-size: .68rem; font-weight: 700; color: var(--mud-palette-primary); margin-left: 6px; letter-spacing: .04em; }
.ff-gd-board-main .sub { font-size: .72rem; color: var(--mud-palette-text-secondary); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.ff-gd-board-main .sub .live { color: #ef4444; font-weight: 700; }
.ff-gd-board-row .pts { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .95rem; }
.ff-gd-board-slots { padding: 2px 6px 10px 40px; }
/* Player-hub form badge (hot / cold) + panel note */
.ff-form-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
padding: 3px 10px; border-radius: 999px; color: #fff;
}
.ff-form-badge.hot { background: #f97316; }
.ff-form-badge.cold { background: #3b82f6; }
.ff-form-badge .mud-icon-root { font-size: 1rem; }
.ff-panel-sub-note { font-size: .75rem; color: var(--mud-palette-text-secondary); }
.ff-splits-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); margin: 12px 0 4px; font-weight: 600; }
.ff-splits-label:first-child { margin-top: 0; }
/* Draft Board (Phase L2) */
.ff-rank-player { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ff-rank-player:hover .nm { text-decoration: underline; }
.ff-rank-player .nm { font-weight: 600; }
.ff-rank-player .muted { font-size: .8rem; }
.ff-tier { display: inline-block; font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; letter-spacing: .03em; }
.ff-tier.t1 { background: #d4af37; color: #231d00; }
.ff-tier.t2 { background: rgba(var(--mud-palette-primary-rgb), .18); color: var(--mud-palette-primary); }
.ff-tier.t3 { background: var(--mud-palette-background); color: var(--mud-palette-text-secondary); }
.ff-tier.t4, .ff-tier.t5 { background: var(--mud-palette-background); color: var(--mud-palette-text-secondary); opacity: .7; }
/* AI forecast (Phase L3) */
.ff-forecast { font-size: .92rem; line-height: 1.6; color: var(--mud-palette-text-primary); }
.ff-forecast strong { color: var(--mud-palette-primary); }
.ff-forecast-foot { margin-top: 12px; font-size: .72rem; color: var(--mud-palette-text-secondary); font-style: italic; }
/* Hub tiles (Phase 13C) — the Admin/Commissioner dashboards */
.ff-hub-tile { padding: 14px 16px; height: 100%; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.ff-hub-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
/* Weekly draft-conference chips (13F) — wrap cleanly at 360px */
.ff-conf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Platform settings console rows (Phase 13D) */
.ff-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; flex-wrap: wrap; }
.ff-setting-main { flex: 1 1 320px; min-width: 0; }
.ff-setting-editor { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
/* AI league content markdown (Phase 11D) — the MarkdownLite output on League Buzz */
.ff-md { font-size: .95rem; line-height: 1.65; color: var(--mud-palette-text-primary); }
.ff-md p { margin: 0 0 10px; }
.ff-md p:last-child { margin-bottom: 0; }
.ff-md h5 { margin: 12px 0 6px; font-size: 1rem; font-weight: 700; color: var(--mud-palette-primary); }
.ff-md h5:first-child { margin-top: 0; }
.ff-md ol, .ff-md ul { margin: 0 0 10px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.ff-md li { line-height: 1.55; }
.ff-md strong { color: var(--mud-palette-primary); }
/* Structured AI forecast (Phase L3 Part 2) */
.ff-fc-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.ff-fc-proj { display: flex; flex-direction: column; line-height: 1.1; }
.ff-fc-proj-val { font-size: 1.7rem; font-weight: 700; color: var(--mud-palette-primary); }
.ff-fc-proj-val.sm { font-size: 1.05rem; font-weight: 600; }
.ff-fc-proj-lbl { font-size: .7rem; color: var(--mud-palette-text-secondary); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.ff-fc-reason { font-size: .9rem; line-height: 1.55; color: var(--mud-palette-text-primary); margin-bottom: 10px; }
.ff-fc-drivers { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.ff-fc-drivers li { font-size: .88rem; line-height: 1.5; color: var(--mud-palette-text-primary); }
.ff-fc-drivers li::marker { color: var(--mud-palette-primary); }
/* In-draft intelligence (Phase 8) */
.ff-draft-intel { border-left: 3px solid var(--mud-palette-primary); }
.ff-draft-rec { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 8px;
background: var(--mud-palette-background-grey); flex-wrap: wrap; }
.ff-draft-rec-body { flex: 1 1 200px; min-width: 0; }
.ff-draft-rec-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mud-palette-text-secondary); }
.ff-draft-rec-name { font-size: 1.15rem; font-weight: 700; color: var(--mud-palette-text-primary); line-height: 1.2; }
.ff-draft-rec-meta { font-size: .8rem; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.ff-draft-slot { font-weight: 700; color: var(--mud-palette-primary); margin-right: 4px; }
.ff-draft-src { font-style: italic; }
.ff-draft-rec-reason { font-size: .82rem; color: var(--mud-palette-text-primary); margin-top: 4px; }
.ff-draft-board { display: flex; flex-direction: column; margin-top: 4px; }
/* Fixed grid tracks so tier / name / position / school / trend / value / action line up down
every row, regardless of how long a school name is. name + school flex; the rest are fixed. */
.ff-draft-row { display: grid; align-items: center; gap: 8px; padding: 4px 2px;
grid-template-columns: 30px minmax(0, 1.4fr) 46px minmax(0, 1fr) 46px 50px 84px;
border-bottom: 1px solid var(--mud-palette-lines-default); font-size: .85rem;
border-left: 2px solid transparent; }
.ff-draft-row:last-child { border-bottom: none; }
.ff-draft-row.sel { background: rgba(118, 120, 237, .12); border-left-color: var(--mud-palette-success); }
.ff-draft-pname { font-weight: 600; color: var(--mud-palette-text-primary); text-decoration: none;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-draft-pname:hover { color: var(--mud-palette-primary); text-decoration: underline; }
/* T-34: a row the viewer can no longer roster stays VISIBLE (the landscape is worth scanning) but its
controls are off and the reason is spelled out under the name — a title tooltip alone is invisible
on the phones members actually draft from. The name cell becomes a two-line stack for that. */
.ff-draft-nmcell { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.15; }
.ff-draft-why { font-size: .62rem; color: var(--mud-palette-text-secondary);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-draft-row.blocked .ff-draft-pname,
.ff-draft-row.blocked .ff-draft-pos,
.ff-draft-row.blocked .ff-draft-team,
.ff-draft-row.blocked .ff-draft-val { opacity: .6; }
.ff-draft-pos { font-weight: 700; color: var(--mud-palette-text-secondary); }
.ff-draft-team { color: var(--mud-palette-text-secondary);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-draft-trend { font-size: .66rem; font-weight: 700; text-transform: uppercase; text-align: center;
padding: 1px 0; border-radius: 4px; }
.ff-draft-trend.hot { color: var(--mud-palette-error); background: rgba(244, 67, 54, .14); }
.ff-draft-trend.cold { color: var(--mud-palette-info); background: rgba(33, 150, 243, .14); }
.ff-draft-trend:empty { background: none; }
.ff-draft-val { font-weight: 700; color: var(--mud-palette-primary); text-align: right; }
.ff-draft-action { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
/* 41: the action cell can hold the quick-add (+) and, on your turn, the select control. Tighten the
icon buttons so both fit the fixed track without widening the row. */
.ff-draft-action .mud-icon-button { padding: 4px; }
.ff-draft-recdot { color: #f2b807; font-size: .9rem; line-height: 1; }
.ff-draft-recbadge { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 10px;
font-size: .62rem; font-weight: 700; letter-spacing: .03em; color: #f2b807;
background: rgba(242, 184, 7, .14); vertical-align: middle; }
.ff-draft-reset { margin-top: 4px; text-transform: none; }
.ff-trend-short { display: none; }
.ff-back-btn { text-transform: none; }
/* Draft-pool typeahead options: fixed position chip, name, then muted school/conf · value. */
.ff-pool-opt { display: flex; align-items: baseline; gap: 8px; width: 100%; min-width: 0; }
.ff-pool-pos { flex: 0 0 34px; font-weight: 700; font-size: .72rem; color: var(--mud-palette-text-secondary); }
.ff-pool-name { font-weight: 600; color: var(--mud-palette-text-primary);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-pool-meta { margin-left: auto; padding-left: 8px; font-size: .78rem; white-space: nowrap;
color: var(--mud-palette-text-secondary); }
/* Autodraft opt-in row in the draft-intelligence card. */
.ff-autodraft-row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px;
padding: 4px 10px; border-radius: 8px; background: rgba(118, 120, 237, .06); }
/* "Your team so far" strip in the draft Room — the 5 slots filling as you draft.
T-33: each slot is a CHIP that sizes to its own content and wraps onto another line rather than
truncating a drafted name to "Devon...". No fixed name width any more; the only cap is the strip
itself, so a pathological surname ellipsizes instead of overflowing. */
.ff-teamstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 12px;
margin-bottom: 16px; border-radius: 10px; background: var(--mud-palette-background-grey); }
.ff-teamstrip-lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: var(--mud-palette-text-secondary); }
.ff-teamstrip-slot { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
padding: 2px 9px 2px 3px; border-radius: 999px; background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-lines-default); }
/* The position badge keeps its natural size inside the chip (the shared .ff-pos.inrow rule stretches
it to 100% for the fixed-grid rows it was written for). */
.ff-teamstrip-slot .ff-pos { flex: 0 0 auto; width: auto; min-width: 32px; padding: 2px 6px; }
.ff-teamstrip-name { font-size: .82rem; font-weight: 600; color: var(--mud-palette-text-primary);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-teamstrip-slot.empty { background: none; border-style: dashed; }
.ff-teamstrip-slot.empty .ff-teamstrip-name { color: var(--mud-palette-text-disabled); font-weight: 400; }
/* Mobile: keep every player on ONE row — smaller text, tighter columns, and H/C instead of HOT/COLD.
Name + position stay full-size priority; school truncates. */
@media (max-width: 640px) {
.ff-draft-row {
grid-template-columns: 24px minmax(0, 2fr) 30px minmax(0, 0.8fr) 20px 40px 64px;
gap: 5px; font-size: .78rem; padding: 5px 2px;
}
/* 41: keep the two action controls on one row at phone widths. */
.ff-draft-action { gap: 1px; }
.ff-draft-action .mud-icon-button { padding: 2px; }
.ff-draft-action .mud-icon-button .mud-icon-root { font-size: 1.05rem; }
.ff-draft-trend { padding: 0; }
.ff-trend-full { display: none; }
.ff-trend-short { display: inline; }
.ff-draft-row .ff-tier { padding: 1px 4px; font-size: .62rem; }
.ff-draft-why { font-size: .58rem; }
.ff-draft-rec { padding: 8px 10px; }
.ff-draft-rec-name { font-size: 1.05rem; }
}
.ff-kv .muted { color: var(--mud-palette-text-secondary); font-weight: 400; font-size: .74rem; }
/* Compact data tables (player hub game log / season summary) */
.ff-table-scroll { overflow-x: auto; }
.ff-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.ff-table th, .ff-table td { padding: 8px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--mud-palette-lines-default); }
.ff-table th { color: var(--mud-palette-text-secondary); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.ff-table td.num, .ff-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ff-table td.strong { font-weight: 700; }
.ff-table tbody tr:last-child td { border-bottom: 0; }
.ff-table tbody tr:hover { background: rgba(var(--mud-palette-primary-rgb), .05); }
/* ============================================================
Data-Viz Foundation — chart host.
============================================================ */
.ff-chart { position: relative; width: 100%; }
.ff-chart-empty {
display: flex; align-items: center; justify-content: center; height: 100%;
color: var(--mud-palette-text-secondary); font-size: .85rem; text-align: center; padding: 12px;
}
.ff-spark-empty { color: var(--mud-palette-text-secondary); }
.ff-table td.spark { width: 120px; padding-top: 2px; padding-bottom: 2px; }
/* League onboarding + switcher (Phase 9E1) */
.ff-league-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ff-league-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ff-league-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.ff-league-card { min-width: 0; }
.ff-league-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* .ff-league-empty removed 2026-07-31: the My Leagues empty card joined the shared NoLeagueState
funnel (scoped styling in NoLeagueState.razor.css). */
.ff-league-switcher { margin-left: 12px; min-width: 0; max-width: min(34vw, 280px); }
.ff-league-switcher .mud-button-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-onboarding { margin-top: 24px; }
.ff-wizard-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ff-wizard-steps span { color: var(--mud-palette-text-secondary); border: 1px solid var(--mud-palette-lines-default); border-radius: 999px; padding: 5px 11px; font-size: .78rem; }
.ff-wizard-steps span.active { color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); font-weight: 700; }
.ff-wizard-steps span.done { color: var(--mud-palette-success); border-color: var(--mud-palette-success); }
.ff-slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.ff-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.ff-review-grid div { display: flex; flex-direction: column; padding: 12px; border-radius: 9px; background: var(--mud-palette-background-grey); }
.ff-review-grid span { color: var(--mud-palette-text-secondary); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.ff-wizard-actions { padding: 0 16px 16px; }
.ff-unpaid-gate { max-width: 620px; }
.ff-invite-code { letter-spacing: .14em; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.ff-commissioner-dashboard { margin-bottom: 28px; }
.ff-league-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ff-league-stat-grid div { display: flex; flex-direction: column; padding: 10px; border-radius: 8px; background: var(--mud-palette-background-grey); }
.ff-league-stat-grid span { color: var(--mud-palette-text-secondary); font-size: .72rem; text-transform: uppercase; }
.ff-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ff-league-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ff-member-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.ff-member-card { min-width: 0; }
.ff-member-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ff-member-ident { display: flex; align-items: center; gap: 12px; min-width: 0; } /* Phase 15B: avatar + name */
.ff-member-ident > div { min-width: 0; }
.ff-member-badges { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.ff-member-actions { flex-wrap: wrap; }
.ff-invite-list { display: grid; gap: 10px; }
.ff-invite-row .mud-card-content { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 600px) {
.ff-app-title { display: none; }
.ff-league-switcher { margin-left: 2px; max-width: 42vw; }
.ff-onboarding { margin-top: 8px; padding-left: 0; padding-right: 0; }
.ff-league-actions { width: 100%; }
.ff-league-actions .mud-button-root { flex: 1; }
.ff-form-grid, .ff-league-admin-grid { grid-template-columns: 1fr; }
.ff-invite-row .mud-card-content { align-items: flex-start; flex-direction: column; }
}
/* ============================================================
Phase 18A — shared refresh kit: attribution rows, week-vs-average
strip, Player Detail hero total, and the MatchupChip label toggle.
============================================================ */
/* Attribution rows — the compact "stat · value · +pts" successor to the zero-tile wall.
Single column at every width; points column is fixed-width so the +/- signs line up. */
.ff-attr-list { margin: 4px 0 8px; }
.ff-attr-row {
display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 14px;
padding: 9px 2px; border-bottom: 1px solid var(--mud-palette-lines-default);
}
.ff-attr-row:last-child { border-bottom: 0; }
.ff-attr-stat { color: var(--mud-palette-text-secondary); font-size: .85rem; min-width: 0; }
.ff-attr-val { font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; text-align: right; }
.ff-attr-pts {
font-variant-numeric: tabular-nums; font-weight: 700; font-size: .85rem;
min-width: 62px; text-align: right; cursor: default;
}
.ff-attr-pts.pos { color: var(--mud-palette-success); }
.ff-attr-pts.neg { color: var(--mud-palette-error); }
/* Week-vs-season-average strip — three cells (this week / season avg / Δ), wrapping on phones. */
.ff-wva { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.ff-wva-cell {
flex: 1 1 92px; text-align: center; padding: 10px 12px; border-radius: 10px;
background: var(--mud-palette-background-grey); border: 1px solid var(--mud-palette-lines-default);
}
.ff-wva-cell .k {
display: block; color: var(--mud-palette-text-secondary); font-size: .68rem;
text-transform: uppercase; letter-spacing: .05em;
}
.ff-wva-cell .v { display: block; font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; margin-top: 4px; }
.ff-wva-cell .v.pos { color: var(--mud-palette-success); }
.ff-wva-cell .v.neg { color: var(--mud-palette-error); }
.ff-wva-note { color: var(--mud-palette-text-secondary); font-size: .82rem; margin: 12px 2px; }
/* Player Detail hero: the season total sits at the trailing edge of the title row. */
.ff-detail-total { margin-left: auto; text-align: right; line-height: 1.05; }
.ff-detail-total .n { display: block; font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ff-detail-total .l { display: block; color: var(--mud-palette-text-secondary); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
.ff-attr-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); font-weight: 600; margin: 18px 2px 2px; }
/* MatchupChip responsive label (the §2.3 fix): the full band word shows ≥600px, glyph+score below.
Without these rules both spans rendered together — the documented toggle was never wired. */
.ff-matchup-short { display: none; }
@media (max-width: 599.98px) {
.ff-matchup-full { display: none; }
.ff-matchup-short { display: inline; }
}
/* ============================================================
---- 18D: scoreboard ----
The league-race board (ScoreboardBoard.razor) across all three tabs: medal ranks + avatars +
linkified (career) names, a gap-to-leader + signed delta-vs-last-week caption, an expandable
lineup (Q7), a Season-tab sparkline, and a Total-Wins streak flame. Mobile-first at 360px:
one-line rows, tap-to-expand; the sparkline appears only ≥600px where the row has room. Built on
the MudBlazor palette vars so it auto-themes; medal + roster idioms mirror the ff-standing/
ff-roster-row layers this page used to render flat.
============================================================ */
.ff-sb-list { display: flex; flex-direction: column; gap: 3px; }
.ff-sb-row { border-radius: 10px; }
/* Row header: a flex line so the optional sparkline slots in without breaking alignment. */
.ff-sb-main {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 9px 10px; border-radius: 10px;
background: none; border: 0; text-align: left; color: inherit; font: inherit;
}
.ff-sb-main.clickable { cursor: pointer; }
.ff-sb-main.clickable:hover { background: rgba(var(--mud-palette-primary-rgb), .06); }
.ff-sb-main:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: -2px; }
.ff-sb-row.me .ff-sb-main { background: rgba(var(--mud-palette-primary-rgb), .13); }
.ff-sb-rank {
flex: 0 0 auto; 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);
}
/* Medals for the top three (same palette as the ff-standing medals). */
.ff-sb-rank.r1 { background: #d4af37; color: #231d00; }
.ff-sb-rank.r2 { background: #aab2bd; color: #1b1f24; }
.ff-sb-rank.r3 { background: #cd7f4a; color: #fff; }
.ff-sb-who { flex: 1 1 auto; display: flex; align-items: center; gap: 9px; min-width: 0; }
.ff-sb-av { width: 30px; height: 30px; min-width: 30px; font-size: .7rem; }
.ff-sb-whotext { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ff-sb-nameline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ff-sb-namewrap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-sb-name { font-weight: 600; font-size: .9rem; }
/* The name links to a career page but stays visually quiet in a dense list (Batch B convention). */
.ff-sb-name.ff-link { color: inherit; font-weight: 600; }
.ff-sb-name.ff-link:hover { color: var(--mud-palette-primary); }
.ff-sb-you { font-size: .62rem; font-weight: 700; color: var(--mud-palette-primary); letter-spacing: .04em; flex: 0 0 auto; }
.ff-sb-flame { font-size: .72rem; font-weight: 700; flex: 0 0 auto; white-space: nowrap; }
.ff-sb-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .72rem; color: var(--mud-palette-text-secondary); }
.ff-sb-delta { font-variant-numeric: tabular-nums; }
.ff-sb-delta.pos { color: var(--mud-palette-success); }
.ff-sb-delta.neg { color: var(--mud-palette-error); }
.ff-sb-spark { display: none; flex: 0 0 66px; width: 66px; }
.ff-sb-val { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .95rem; text-align: right; }
.ff-sb-chev { flex: 0 0 auto; display: flex; justify-content: center; width: 22px; color: var(--mud-palette-text-secondary); transition: transform .15s ease; }
.ff-sb-chev.open { transform: rotate(180deg); }
.ff-sb-chev-spacer { flex: 0 0 auto; width: 22px; }
/* Expanded lineup — indented under the row, reusing the ff-roster-row idiom. */
.ff-sb-panel { padding: 2px 8px 10px 44px; }
.ff-sb-lineup-loading { display: flex; justify-content: center; padding: 12px; }
.ff-sb-lineup-empty { padding: 10px 2px; color: var(--mud-palette-text-secondary); font-size: .85rem; }
/* The sparkline only earns its place where the row has width (matrix: rows + sparkline at ≥600px). */
@media (min-width: 600px) { .ff-sb-spark { display: block; } }
/* ---- 18E: leagues pages ---- */
/* Richer My Leagues cards + a hero on the League overview. Everything here is composed from data
already on the read DTOs (member fill, current-league identities, the current-week lock) — no new
server aggregates (§11 Q2). One self-contained block per CSS discipline. */
/* Membership card: stacked, evenly-spaced content so the meter/avatars/draft line breathe. */
.ff-league-card-rich .mud-card-content { display: flex; flex-direction: column; gap: 12px; }
.ff-league-card-current { border-color: var(--mud-palette-primary); }
.ff-lc-title { min-width: 0; }
.ff-lc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .8rem; margin-top: 2px; }
.ff-lc-sep { opacity: .55; }
.ff-lc-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Members-fill meter — MemberCount / MaxMembers straight off the DTO. */
.ff-lc-fill { display: flex; flex-direction: column; gap: 6px; }
.ff-lc-fill-head { display: flex; align-items: baseline; justify-content: space-between; }
.ff-lc-fill-head span { text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; }
.ff-lc-fill-head strong { font-size: .82rem; font-variant-numeric: tabular-nums; }
.ff-lc-bar { height: 6px; border-radius: 999px; background: var(--mud-palette-lines-default); overflow: hidden; }
.ff-lc-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--mud-palette-primary); transition: width .3s ease; }
.ff-lc-bar-lg { height: 8px; }
/* Overlapping avatar preview (current league only — identities are current-league-scoped). */
.ff-lc-avatars { display: flex; align-items: center; }
.ff-lc-av { margin-left: -6px; border: 2px solid var(--mud-palette-surface); }
.ff-lc-av:first-child { margin-left: 0; }
.ff-lc-av-more { margin-left: 8px; font-size: .75rem; color: var(--mud-palette-text-secondary); font-weight: 600; }
.ff-lc-draft { display: flex; align-items: center; gap: 6px; margin-top: auto; }
.ff-lc-draft-icon { font-size: 1rem !important; }
/* Overview hero — a primary gradient banner replacing the plain page head. */
.ff-league-hero {
border-radius: 16px; padding: 22px 24px; margin-bottom: 22px; color: #fff;
background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-darken, #C74A00));
}
.ff-league-hero-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ff-league-hero-id { min-width: 0; }
.ff-league-hero-name { color: #fff; font-weight: 700; letter-spacing: -.01em; }
.ff-league-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; color: rgba(255, 255, 255, .85); font-size: .9rem; }
.ff-league-hero-avatars { display: flex; align-items: center; margin-top: 14px; }
.ff-league-hero .ff-lc-av { border-color: rgba(255, 255, 255, .55); }
.ff-league-hero .ff-lc-av-more { color: rgba(255, 255, 255, .9); }
.ff-league-hero .ff-league-actions .mud-button-outlined { color: #fff; border-color: rgba(255, 255, 255, .55); }
/* White CTA reads clearly on the indigo gradient (primary-on-primary would vanish). */
.ff-league-hero .ff-league-actions .mud-button-filled { background: #fff; color: var(--mud-palette-primary); }
.ff-league-card-accent { border-color: var(--mud-palette-primary); }
/* Invite code + copy button on one line, wrapping on phones. */
.ff-invite-row2 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 2px; }
@media (max-width: 599.98px) {
.ff-league-hero { padding: 18px; }
.ff-league-hero-body { flex-direction: column; }
.ff-league-hero .ff-league-actions { width: 100%; }
.ff-league-hero .ff-league-actions .mud-button-root { flex: 1; }
}
/* ---- 18B: draft hub segments ---- */
/* My Team — the "your week" metrics panel below the lineup card (rank + delta, best/worst slot, season
sparkline). All theme-var driven; wraps to one column on phones. */
.ff-mt-week { max-width: 720px; margin-top: 16px; }
.ff-mt-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.ff-mt-tile {
flex: 1 1 120px; padding: 10px 12px; border-radius: 10px;
background: var(--mud-palette-background-grey); border: 1px solid var(--mud-palette-lines-default);
}
.ff-mt-tile .k {
display: block; color: var(--mud-palette-text-secondary); font-size: .68rem;
text-transform: uppercase; letter-spacing: .05em;
}
.ff-mt-tile .v { display: block; font-weight: 800; font-size: 1.35rem; font-variant-numeric: tabular-nums; margin-top: 2px; }
.ff-mt-tile .v .of { font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.ff-mt-tile .v.pos { color: var(--mud-palette-success); }
.ff-mt-tile .v.neg { color: var(--mud-palette-error); }
.ff-mt-tile .v.even { color: var(--mud-palette-text-secondary); }
.ff-mt-callouts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ff-mt-callout {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
font-size: .8rem; border: 1px solid var(--mud-palette-lines-default);
}
.ff-mt-callout .ff-pos { width: auto; min-width: 30px; padding: 2px 7px; font-size: .58rem; }
.ff-mt-callout b { font-variant-numeric: tabular-nums; }
.ff-mt-callout.best { background: rgba(76, 175, 80, .10); }
.ff-mt-callout.worst { background: rgba(244, 67, 54, .08); }
.ff-mt-spark { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.ff-mt-spark .k {
flex: 0 0 auto; color: var(--mud-palette-text-secondary); font-size: .68rem;
text-transform: uppercase; letter-spacing: .05em;
}
.ff-mt-spark-wrap { flex: 1 1 auto; min-width: 0; }
/* Queue — card rows: [drag] [pos pill] [name + meta (+ matchup chip)] [up / down / delete]. Queue
behavior is unchanged; this block only restyles the row (18B is visual-only for the queue). */
.ff-q-list { display: flex; flex-direction: column; gap: 8px; }
.ff-q-row {
display: grid; grid-template-columns: 22px 44px 1fr auto; align-items: center; gap: 10px;
padding: 8px 12px; border-radius: 10px; background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-lines-default);
}
.ff-q-drag { flex: 0 0 auto; cursor: grab; }
.ff-q-row > .ff-pos { min-width: 44px; }
.ff-q-main { min-width: 0; }
.ff-q-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-q-meta {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: .74rem; color: var(--mud-palette-text-secondary);
}
.ff-q-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ff-q-actions { display: inline-flex; align-items: center; flex: 0 0 auto; }
@media (max-width: 400px) {
.ff-q-row { grid-template-columns: 18px 38px 1fr auto; gap: 6px; padding: 8px 8px; }
.ff-mt-tile { flex-basis: 100px; }
}
/* ---- 18C: game day ----
The Game Day facelift (Phase 18.4). Layers over the existing .ff-gd-* live layer (§2.1): a league
mini-ticker, a rich pre-kickoff / off-season hero, rank-movement chips (§11 Q5), avatars on the
board rows, and a projected-vs-actual pace strip + per-slot "projected remaining" (research-on
only, §3.2/§3.4). All theme-var-driven; mobile-first (single column, chips wrap) at 360px. */
/* League mini-ticker — a compact strip of live/final/upcoming counts + the current leader. */
.ff-gd-ticker {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
margin: 0 0 18px; padding: 11px 14px; border-radius: 12px;
background: var(--mud-palette-background-grey); border: 1px solid var(--mud-palette-lines-default);
}
.ff-gd-ticker .tk {
display: inline-flex; align-items: center; gap: 6px;
font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ff-gd-ticker .tk em { font-style: normal; font-weight: 500; font-size: .78rem; color: var(--mud-palette-text-secondary); }
.ff-gd-ticker .tk .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mud-palette-text-disabled); }
.ff-gd-ticker .tk.live.on { color: #ef4444; }
.ff-gd-ticker .tk.live.on .dot { background: #ef4444; animation: ff-pulse 1.4s ease-in-out infinite; }
.ff-gd-ticker .tk.lead { margin-left: auto; font-weight: 500; font-size: .82rem; color: var(--mud-palette-text-secondary); }
.ff-gd-ticker .tk.lead strong { color: var(--mud-palette-text-primary); }
.ff-gd-ticker .tk.lead .mud-icon-root { font-size: 1.05rem; color: #d4af37; }
@media (max-width: 599.98px) {
.ff-gd-ticker .tk.lead { margin-left: 0; flex-basis: 100%; }
}
/* Pre-kickoff / off-season hero — the first-class case (most visits are non-gameday). */
.ff-gd-hero {
display: flex; gap: 18px; align-items: flex-start;
padding: 22px; border-radius: 16px; margin-bottom: 20px;
background: linear-gradient(135deg,
rgba(var(--mud-palette-primary-rgb), .12), rgba(var(--mud-palette-primary-rgb), .03));
border: 1px solid rgba(var(--mud-palette-primary-rgb), .22);
}
.ff-gd-hero-badge {
flex: none; width: 56px; height: 56px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
background: rgba(var(--mud-palette-primary-rgb), .16); color: var(--mud-palette-primary);
}
.ff-gd-hero-badge .mud-icon-root { font-size: 2rem; }
.ff-gd-hero.prekick .ff-gd-hero-badge { animation: ff-pulse 2s ease-in-out infinite; }
.ff-gd-hero-body { min-width: 0; }
.ff-gd-hero-body h2 { margin: 2px 0 6px; font-size: 1.25rem; font-weight: 800; }
.ff-gd-hero-body p { margin: 0; color: var(--mud-palette-text-secondary); font-size: .9rem; line-height: 1.5; }
.ff-gd-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.ff-gd-hero-hint { color: var(--mud-palette-text-secondary); font-size: .82rem; }
.ff-gd-hero-proj { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ff-gd-hero-proj span {
display: flex; flex-direction: column; gap: 2px; padding: 8px 16px; border-radius: 10px;
background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default);
}
.ff-gd-hero-proj em { font-style: normal; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mud-palette-text-secondary); }
.ff-gd-hero-proj b { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 599.98px) {
.ff-gd-hero { flex-direction: column; gap: 12px; padding: 18px; }
.ff-gd-hero-badge { width: 48px; height: 48px; }
}
/* Rank-movement chip (My Team head + board rows) — up/down/flat vs the last completed week. */
.ff-gd-rankwrap { display: inline-flex; align-items: center; gap: 6px; }
.ff-rankmove {
display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700;
font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 999px; line-height: 1.4;
}
.ff-rankmove.up { color: #10b981; background: rgba(16, 185, 129, .14); }
.ff-rankmove.down { color: #ef4444; background: rgba(239, 68, 68, .14); }
.ff-rankmove.flat { color: var(--mud-palette-text-secondary); background: var(--mud-palette-background-grey); }
/* My Team projected-vs-actual pace strip (research on): now / projected / on the field. */
.ff-gd-pace {
display: flex; gap: 10px; margin: 4px 14px 10px; padding-top: 12px;
}
.ff-gd-pace .cell {
flex: 1 1 0; text-align: center; padding: 8px 6px; border-radius: 10px;
background: var(--mud-palette-background-grey); border: 1px solid var(--mud-palette-lines-default);
}
.ff-gd-pace .cell.hi { background: rgba(var(--mud-palette-primary-rgb), .1); border-color: rgba(var(--mud-palette-primary-rgb), .28); }
.ff-gd-pace .cell .k { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mud-palette-text-secondary); }
.ff-gd-pace .cell .v { display: block; font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; margin-top: 3px; }
.ff-gd-pace .cell.hi .v { color: var(--mud-palette-primary); }
/* Per-slot points column: banked total, with projected-remaining beneath it when present. */
.ff-gd-ptcol { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ff-gd-proj { font-size: .66rem; font-weight: 600; color: var(--mud-palette-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Board rows gain an avatar column (rk | avatar | who/sub | pts). */
.ff-gd-board-row { grid-template-columns: 30px auto 1fr auto; }
.ff-gd-board-av { flex: none; }
.ff-gd-board-main .sub .proj { color: var(--mud-palette-primary); font-weight: 600; }
/* ---- end 18C ---- */
/* ---- 18H: league buzz ---- */
/* Member League Buzz is a week-at-a-time archive: a bounded week picker, then recap + power ranking
side-by-side on desktop (.ff-cols already stacks at <=960px), with the awards card beneath. */
.ff-buzz { max-width: 980px; }
.ff-buzz-nav {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.ff-buzz-count { margin-left: 4px; }
.ff-buzz-head { margin: 4px 0 12px; font-weight: 700; }
.ff-buzz-cols { margin-bottom: 16px; }
.ff-buzz-awards { max-width: 640px; }
.ff-buzz-card { height: 100%; display: flex; flex-direction: column; }
.ff-buzz-missing { padding: 8px 0; font-style: italic; }
.ff-buzz-loading { display: flex; justify-content: center; padding: 32px 0; }
/* ---- end 18H ---- */
/* ---- 18J: research surfaces ----
Breakouts (risers + decliners side-by-side on desktop, stacked at .ff-panel { height: 100%; display: flex; flex-direction: column; }
.ff-breakouts-cols > .ff-panel > .ff-panel-body { flex: 1 1 auto; }
/* Pool-changes scope banner — the week's draftable pool, stated on-page. */
.ff-scope-banner {
display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
margin: 0 0 16px; padding: 11px 14px; border-radius: 12px;
background: rgba(var(--mud-palette-primary-rgb), .09);
border: 1px solid rgba(var(--mud-palette-primary-rgb), .22);
font-size: .9rem; line-height: 1.4;
}
.ff-scope-banner .mud-icon-root { color: var(--mud-palette-primary); font-size: 1.15rem; flex: none; }
.ff-scope-banner .lbl { color: var(--mud-palette-text-secondary); }
.ff-scope-banner strong { font-weight: 700; }
/* One-line section explainer — sits between a panel head and its list. */
.ff-section-explainer {
padding: 8px 16px; font-size: .8rem; line-height: 1.45;
color: var(--mud-palette-text-secondary);
border-bottom: 1px solid var(--mud-palette-lines-default);
}
/* ---- end 18J ---- */
/* ---- 18K: draft board ---- */
/* The Draft Board overhaul (Phase 18.12): equal-height Top-N / movers panels, stronger
heating-up / cooling-off styling, and a virtualized, filterable, sortable rankings table.
Client-side only over the already-fetched board (0 new endpoints, §11 Q11). Mobile-first:
filters stack at 360px and the table keeps a horizontal scroll with a sticky first column. */
/* Equal-height top panels — the shorter of the two stretches to the row's tallest (MudGrid items
are align-items:stretch), so the chart and movers panels always match on desktop. */
.ff-18k-eqpanel { height: 100%; display: flex; flex-direction: column; }
.ff-18k-eqpanel > .ff-panel-body { flex: 1 1 auto; min-height: 0; }
.ff-18k-eqpanel .ff-chart { min-height: 320px; }
/* Risers & fallers — clear color-blocked headers separate the two sections from their rows. */
.ff-18k-movers { display: flex; flex-direction: column; gap: 14px; }
.ff-18k-mv { border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; overflow: hidden; }
.ff-18k-mv-head {
display: flex; align-items: center; gap: 7px;
padding: 8px 12px; font-size: .74rem; font-weight: 800;
text-transform: uppercase; letter-spacing: .05em;
}
.ff-18k-mv-head .mud-icon-root { font-size: 1.05rem; }
.ff-18k-mv.up .ff-18k-mv-head { color: #0f9d6b; background: rgba(16, 185, 129, .14); border-bottom: 1px solid rgba(16, 185, 129, .28); }
.ff-18k-mv.down .ff-18k-mv-head { color: #d64545; background: rgba(239, 68, 68, .13); border-bottom: 1px solid rgba(239, 68, 68, .26); }
.ff-18k-mv-rows { padding: 2px 12px; }
.ff-18k-mv-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 8px 0; border-bottom: 1px solid var(--mud-palette-lines-default); cursor: pointer;
}
.ff-18k-mv-row:last-child { border-bottom: 0; }
.ff-18k-mv-row:hover .who { text-decoration: underline; }
.ff-18k-mv-row .who { font-size: .86rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-18k-mv-row .who .muted { color: var(--mud-palette-text-secondary); font-weight: 400; font-size: .76rem; }
.ff-18k-mv-row .delta { font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; flex: none; }
.ff-18k-mv-row .delta.pos { color: var(--mud-palette-success); }
.ff-18k-mv-row .delta.neg { color: var(--mud-palette-error); }
.ff-18k-mv-empty { padding: 8px 0; color: var(--mud-palette-text-secondary); font-size: .8rem; font-style: italic; }
/* Filter toolbar — a row of controls that wraps, then stacks full-width on small screens. */
.ff-18k-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 6px 12px; }
.ff-18k-filters .ff-18k-f-search { flex: 2 1 220px; min-width: 160px; }
.ff-18k-filters .ff-18k-f-conf { flex: 1 1 170px; min-width: 150px; }
.ff-18k-filters .ff-18k-f-min { flex: 0 1 120px; min-width: 100px; }
.ff-18k-filters .ff-18k-f-reset { flex: none; text-transform: none; margin-left: auto; }
/* Bounded, scrollable table body so virtualization keeps the DOM small; header sticks on scroll. */
.ff-18k-tablewrap { max-height: 68vh; overflow: auto; border-top: 1px solid var(--mud-palette-lines-default); }
.ff-18k-table thead th {
position: sticky; top: 0; z-index: 2;
background: var(--mud-palette-surface);
box-shadow: inset 0 -1px 0 var(--mud-palette-lines-default);
}
.ff-18k-table th.sortable { cursor: pointer; user-select: none; }
.ff-18k-table th.sortable:hover { color: var(--mud-palette-text-primary); }
.ff-18k-table th.sortable.active { color: var(--mud-palette-primary); }
.ff-18k-table .ff-18k-ar { display: inline-block; width: 1em; margin-left: 2px; font-size: .7em; }
.ff-18k-noresults {
display: flex; align-items: center; gap: 8px; justify-content: center;
padding: 28px 12px; color: var(--mud-palette-text-secondary); font-size: .9rem;
}
/* 360px: table stays a clean horizontal scroll with a sticky first column so the name never
scrolls out of view; filters stack full-width. */
@media (max-width: 599.98px) {
.ff-18k-filters { gap: 8px; }
.ff-18k-filters .ff-18k-f-search,
.ff-18k-filters .ff-18k-f-conf,
.ff-18k-filters .ff-18k-f-min { flex: 1 1 100%; min-width: 0; }
.ff-18k-filters .ff-18k-f-reset { margin-left: 0; align-self: flex-end; }
.ff-18k-table thead th:first-child,
.ff-18k-table tbody td:first-child {
position: sticky; left: 0; z-index: 1; background: var(--mud-palette-surface);
}
.ff-18k-table thead th:first-child { z-index: 3; }
}
/* ---- end 18K ---- */
/* ---- 18F: member profile ---- */
/* Career teaser tiles — reuse the ff-stat-tile look but pack tighter (auto-fit, smaller min) so the
strip is 2-up at 360px and 4-up on desktop without a wall of whitespace. */
.ff-profile-teaser {
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;
}
.ff-profile-teaser .ff-stat-tile { padding: 10px 12px; }
/* A small "full career →" affordance on the teaser panel head (head is already space-between). */
.ff-profile-career-link { font-size: .82rem; font-weight: 600; color: var(--mud-palette-primary); white-space: nowrap; }
.ff-profile-career-link:hover { text-decoration: underline; }
/* Shared-league chips + badge chips share a wrapping flex row. */
.ff-profile-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* A shared-league chip: icon + team name + muted league name, wraps cleanly at 360px. */
.ff-profile-chip {
display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
padding: 6px 12px; border-radius: 999px;
background: var(--mud-palette-background-grey); border: 1px solid var(--mud-palette-lines-default);
}
.ff-profile-chip .mud-icon-root { color: var(--mud-palette-primary); flex: none; }
.ff-profile-chip-main { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ff-profile-chip-sub { font-size: .8rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* A badge chip: a real, career-derived accolade in the primary tint (never a fake placeholder). */
.ff-profile-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: .85rem;
color: var(--mud-palette-primary);
background: rgba(var(--mud-palette-primary-rgb), .1);
border: 1px solid rgba(var(--mud-palette-primary-rgb), .28);
}
.ff-profile-badge .mud-icon-root { color: var(--mud-palette-primary); flex: none; }
/* A badge that links (the career page's head-to-head edges) reads exactly like its static siblings. */
a.ff-profile-badge { text-decoration: none; }
a.ff-profile-badge:hover { border-color: rgba(var(--mud-palette-primary-rgb), .6); }
/* The career page's share menu: pinned to the end of the hero row, brand-tinted trigger. Colored
here rather than through a component parameter so the hero owns its own look. */
.ff-share-menu { margin-left: auto; flex: none; }
.ff-share-menu .mud-icon-button { color: var(--mud-palette-primary); }
/* ---- end 18F ---- */
/* ---- 18I: records first-season ----
The Records Book first-season experience (Phase 18.10): a warm empty state for a league with no
scored weeks, section headers separating "this season" from "all-time", and the head-to-head
picker's disabled/explained state when fewer than two members have scored. Mobile-first — the
welcome card and H2H explainer stack at 360px; theme-var driven. */
/* Section header above a records grid (only shown when both this-season and all-time blocks render). */
.ff-records-section + .ff-records-section { margin-top: 26px; }
.ff-records-section-head {
display: flex; align-items: center; gap: 8px;
margin: 0 0 12px; font-size: 1.05rem; font-weight: 800;
}
/* First-season welcome — replaces the bare "no records yet" line for a zero-scored-week league. */
.ff-first-season {
display: flex; gap: 18px; align-items: flex-start;
padding: 22px; border-radius: 16px; margin: 4px 0;
background: linear-gradient(135deg,
rgba(var(--mud-palette-primary-rgb), .12), rgba(var(--mud-palette-primary-rgb), .03));
border: 1px solid rgba(var(--mud-palette-primary-rgb), .22);
}
.ff-first-season-badge {
flex: none; width: 56px; height: 56px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
background: rgba(var(--mud-palette-primary-rgb), .16); color: var(--mud-palette-primary);
}
.ff-first-season-badge .mud-icon-root { font-size: 2rem; }
.ff-first-season-body { min-width: 0; }
.ff-first-season-body h2 { margin: 2px 0 6px; font-size: 1.25rem; font-weight: 800; }
.ff-first-season-body p { margin: 0; color: var(--mud-palette-text-secondary); font-size: .9rem; line-height: 1.5; }
.ff-first-season-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.ff-first-season-hint { color: var(--mud-palette-text-secondary); font-size: .82rem; }
@media (max-width: 599.98px) {
.ff-first-season { flex-direction: column; gap: 12px; padding: 18px; }
.ff-first-season-badge { width: 48px; height: 48px; }
}
/* Head-to-head picker disabled/explained state (fewer than two members with a scored week). */
.ff-h2h-empty { display: flex; gap: 14px; align-items: flex-start; }
.ff-h2h-empty > .mud-icon-root { flex: none; margin-top: 2px; }
.ff-h2h-empty-ttl { font-weight: 700; margin-bottom: 2px; }
/* ---- end 18I ---- */
/* ---- 21A: analytics fallback ---- */
/* Per-board chip shown when a scouting board falls back to an older cached year (offseason, the
selected year hasn't published yet). Sits above the board body; wraps its note on narrow phones
so 360px never overflows. */
.ff-fallback-chip { margin: 4px 8px 8px; }
.ff-fallback-chip .mud-chip { height: auto; max-width: 100%; white-space: normal; }
.ff-fallback-chip .mud-chip .mud-chip-content { white-space: normal; line-height: 1.3; padding-top: 3px; padding-bottom: 3px; }
/* ---- 21G/21H: new scouting boards (wepa value + projection accuracy) ---- */
/* The one-line explainer captions above each new board: muted, tight, and full-width so they wrap
cleanly at 360px instead of crowding the filters. */
.ff-wepa-explainer,
.ff-projacc-explainer {
font-size: .78rem;
line-height: 1.35;
color: var(--mud-palette-text-secondary);
}
/* ---- C1: tabs-native + scroll-top + chart host ---- */
/* #37: native touch scroll for MudTabs strips on phones (no prev/next chevrons).
Opt-in via Class="ff-tabs-native" on a MudTabs. MudBlazor clips the strip with
.mud-tabs-tabbar-content { overflow: hidden } and scrolls it by JS-translating
.mud-tabs-tabbar-wrapper through the (now hidden) arrows; hiding the arrows alone
would strand the overflow, so we also expose native overflow scroll and neutralize
the transform. The active-tab slider uses left, not transform, so it stays aligned. */
@media (max-width: 599.98px) {
.ff-tabs-native .mud-tabs-scroll-button { display: none; }
.ff-tabs-native .mud-tabs-tabbar-content {
overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */
}
.ff-tabs-native .mud-tabs-tabbar-content::-webkit-scrollbar { display: none; }
.ff-tabs-native .mud-tabs-tabbar-wrapper { transform: none !important; }
}
/* #40: the floating scroll-to-top FAB (ScrollToTopButton.razor). FF has no competing
FAB, so it stays bottom-right at every width; on phones it lifts a little to clear
the iOS Safari accessory strip. */
.ff-scroll-top {
position: fixed; right: 1.25rem; bottom: 1.5rem;
z-index: 1200; box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
@media (max-width: 599.98px) {
.ff-scroll-top { bottom: 1rem; }
}
/* #50: chart host reset. ECharts injects a wrapper div and a