/* Theme tokens. Light values here match the site's original (pre-dark-mode) hardcoded colors exactly, so light mode is unchanged. Dark values apply in two cases: (1) the visitor is in "auto" mode (the default — see ThemeToggleButton.razor/theme.js) and their OS prefers dark (`@media` block, guarded by `:not([data-theme="light"])` so an explicit light override still wins), or (2) theme.js has stamped `data-theme="dark"` on because the visitor picked "dark" (or "time" mode resolved to dark for the current hour) — persisted via the `dfl-theme-mode` cookie and re-applied server-side by App.razor on every request, so there's no flash of the wrong theme on load (except for "time" mode, which the server can't resolve — see App.razor's ThemeAttr). --dfl-on-brand is intentionally IDENTICAL in both themes: it's the text/icon color used on top of an already-colored chip/button/hero background (e.g. white text on the brand-blue button), never on the page's own background — those chip backgrounds (the standings hero gradient, header masthead, solid sport-accent pills) are fixed brand colors left unthemed, so the text sitting on them must stay constant too. --dfl-tint-mix / --dfl-accent-text-mix exist because per-sport (SportBranding.cs) and per-member (MemberBranding.cs) colors are set as INLINE custom properties per element (e.g. --sport-accent, --sport-accent-soft, --member-bg/-fg) — a stylesheet rule can never override a custom property an element already sets inline on itself, so app.css can't just redeclare --sport-accent-soft for dark mode the way it does --dfl-surface etc. Instead, every CONSUMING rule blends the inline color via color-mix() against one of these two ratios: --dfl-tint-mix controls how much of an inline "soft" pastel background survives after mixing toward the page surface (100% = untouched in light mode; a low percentage in dark mode mutes what would otherwise be a bright pastel patch on a dark page), and --dfl-accent-text-mix controls how much white gets blended into an inline accent color used as plain text (0% = untouched in light mode; darker sport accents are otherwise hard to read as text on a dark page — see SportBranding.cs's UEFACL comment for a case this ratio alone couldn't fix). Solid, non-soft accent fills (pills/buttons/borders paired with --dfl-on-brand text) are left unmixed, same reasoning as the hero gradient — EXCEPT --dfl-table-header-bg, used only for the "Overall"/"Money"/section-header table bars that sit directly beside the (now near-black) per-sport columns: the fully vivid brand blue read as too jarring/saturated next to them, so this one gets its own darker, muted-navy value in dark mode instead of either the vivid fixed blue or a full brighten. */ :root { --dfl-bg: #f4f6f8; --dfl-surface: #ffffff; --dfl-surface-alt: #eef4f9; --dfl-surface-hover: #f8fafc; --dfl-border: #e5e7eb; --dfl-border-strong: #cbd5e1; --dfl-table-header-bg: #1a5490; --dfl-text: #1f2937; --dfl-text-muted: #6b7280; --dfl-brand: #1a5490; --dfl-brand-dark: #0f3d6b; --dfl-on-brand: #ffffff; --dfl-on-brand-rgb: 255, 255, 255; --dfl-success: #15803d; --dfl-success-strong: #14532d; --dfl-success-bg: #dcfce7; --dfl-success-rgb: 21, 128, 61; --dfl-danger: #b91c1c; --dfl-danger-bg: #fee2e2; --dfl-danger-rgb: 220, 38, 38; --dfl-warning: #d97706; --dfl-warning-text: #92400e; --dfl-warning-bg: #fef3c7; --dfl-shadow-rgb: 0, 0, 0; --dfl-gold-rgb: 255, 215, 0; --dfl-silver-rgb: 192, 192, 192; --dfl-bronze-rgb: 205, 127, 50; --dfl-gold-bg: #fff7cc; --dfl-silver-bg: #f0f0f0; --dfl-bronze-bg: #f5e5d6; --dfl-info-bg: #dbeafe; --dfl-info-border: #bfdbfe; --dfl-info-text: #003e7e; --dfl-purple-bg: #ede9fe; --dfl-purple-text: #4c1d95; --dfl-purple-border: #7c3aed; --dfl-tint-mix: 100%; --dfl-accent-text-mix: 0%; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dfl-bg: #0e1116; --dfl-surface: #1a1f27; --dfl-surface-alt: #1c2a3a; --dfl-surface-hover: #232a35; --dfl-border: #2d333d; --dfl-border-strong: #3d4552; --dfl-text: #e5e7eb; --dfl-text-muted: #9aa4b2; --dfl-brand: #5b9bd5; --dfl-brand-dark: #7fb2e8; --dfl-success: #4ade80; --dfl-success-strong: #86efac; --dfl-success-bg: #14532d; --dfl-success-rgb: 74, 222, 128; --dfl-danger: #f87171; --dfl-danger-bg: #450a0a; --dfl-danger-rgb: 248, 113, 113; --dfl-warning: #fbbf24; --dfl-warning-text: #fde68a; --dfl-warning-bg: #451a03; --dfl-gold-rgb: 191, 149, 0; --dfl-silver-rgb: 148, 148, 148; --dfl-bronze-rgb: 153, 94, 37; --dfl-gold-bg: #4a3f10; --dfl-silver-bg: #3a3a3a; --dfl-bronze-bg: #4a3020; --dfl-info-bg: #1e3a5f; --dfl-info-border: #2f5a8a; --dfl-info-text: #93c5fd; --dfl-purple-bg: #3b2a5c; --dfl-purple-text: #c4b5fd; --dfl-purple-border: #8b5cf6; --dfl-table-header-bg: #14304a; --dfl-tint-mix: 0%; --dfl-accent-text-mix: 30%; /* Only defined for dark mode, deliberately absent from :root — every consuming rule below falls back to its own original light-mode opacity value via var(..., ), so light mode's "washed out" inactive-sport look is untouched. In dark mode this same reduced dimming applies everywhere uniformly instead of each rule's own (much lower) value, since opacity toward a dark page background reads as "too dim to see", not just "de-emphasized" the way it does against a light background. */ --dfl-inactive-opacity: 0.9; } } :root[data-theme="dark"] { --dfl-bg: #0e1116; --dfl-surface: #1a1f27; --dfl-surface-alt: #1c2a3a; --dfl-surface-hover: #232a35; --dfl-border: #2d333d; --dfl-border-strong: #3d4552; --dfl-text: #e5e7eb; --dfl-text-muted: #9aa4b2; --dfl-brand: #5b9bd5; --dfl-brand-dark: #7fb2e8; --dfl-success: #4ade80; --dfl-success-strong: #86efac; --dfl-success-bg: #14532d; --dfl-success-rgb: 74, 222, 128; --dfl-danger: #f87171; --dfl-danger-bg: #450a0a; --dfl-danger-rgb: 248, 113, 113; --dfl-warning: #fbbf24; --dfl-warning-text: #fde68a; --dfl-warning-bg: #451a03; --dfl-gold-rgb: 191, 149, 0; --dfl-silver-rgb: 148, 148, 148; --dfl-bronze-rgb: 153, 94, 37; --dfl-gold-bg: #4a3f10; --dfl-silver-bg: #3a3a3a; --dfl-bronze-bg: #4a3020; --dfl-info-bg: #1e3a5f; --dfl-info-border: #2f5a8a; --dfl-info-text: #93c5fd; --dfl-purple-bg: #3b2a5c; --dfl-purple-text: #c4b5fd; --dfl-purple-border: #8b5cf6; --dfl-table-header-bg: #14304a; --dfl-tint-mix: 0%; --dfl-accent-text-mix: 30%; --dfl-inactive-opacity: 0.9; } html, body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--dfl-bg, #f4f6f8); color: var(--dfl-text, #1f2937); overflow-x: clip; max-width: 100%; } /* Baseline for plain, unclassed tags (e.g. the Commissioner index's link table, inline prose links) — without this they fall back to the browser's default link-blue/visited-purple, which never adapts to the theme tokens above. Scoped to `:not([class])` deliberately, NOT just left as a bare `a, a:visited` — a *classed* button-styled anchor (e.g. .draft-link-btn, which sets white text via --dfl-on-brand) would otherwise still lose that fight once visited: `a:visited` carries an extra type-selector (a) on top of its pseudo-class, giving it higher specificity than a single class selector like `.draft-link-btn`, so it beat the button's own color rule for any link the browser considered visited (e.g. Commissioner dashboard "Manage"/"Scoring Math" links after you'd clicked them once) — text silently went from white to --dfl-brand's blue, in both themes. Any *classed* anchor now falls outside this rule entirely and keeps its own styling regardless of visited state. */ a:not([class]), a:visited:not([class]) { color: var(--dfl-brand, #1a5490); } /* Theme toggle button (Components/Shared/ThemeToggleButton.razor, mounted twice by HeaderNavPanel.razor). Lives here rather than HeaderNavPanel.razor.css because it's rendered by a separate child component — reaching into it from a CSS-isolated parent stylesheet would need ::deep on every rule for no benefit, since nothing else here is component-private. Sits on the colored header bar, so it uses --dfl-on-brand like the rest of the header's icons/text. */ .dfl-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; padding: 0; border: none; border-radius: 999px; background: rgba(var(--dfl-on-brand-rgb, 255, 255, 255), 0.12); color: var(--dfl-on-brand, #fff); cursor: pointer; flex-shrink: 0; } .dfl-theme-toggle:hover { background: rgba(var(--dfl-on-brand-rgb, 255, 255, 255), 0.22); } /* Only one icon shows at a time, directly naming the CURRENT mode (not the resolved light/dark appearance, and not what clicking will do next) — "A" for auto, sun for light, moon for dark, hourglass for time. Keyed off data-theme-mode, which theme.js always sets to one of these four explicit values (default "auto"), so this doesn't need the @media-query cascade the color tokens use — there's no ambiguity to resolve here. */ .dfl-theme-toggle__icon--auto, .dfl-theme-toggle__icon--sun, .dfl-theme-toggle__icon--moon, .dfl-theme-toggle__icon--time { display: none; } :root[data-theme-mode="auto"] .dfl-theme-toggle__icon--auto, :root[data-theme-mode="light"] .dfl-theme-toggle__icon--sun, :root[data-theme-mode="dark"] .dfl-theme-toggle__icon--moon, :root[data-theme-mode="time"] .dfl-theme-toggle__icon--time { display: block; } .dfl-theme-toggle-wrap { display: inline-flex; align-items: center; gap: 0.5rem; } /* Descriptor text next to the toggle, naming the current mode in words (icon-only isn't always obvious). Hidden on the desktop header — no room, and the icon alone carries the meaning there — shown only in the hamburger dropdown via the same 1900px breakpoint MainLayout.razor.css/ HeaderNavPanel.razor.css duplicate; keep this in sync with those if that breakpoint ever moves. */ .dfl-theme-toggle-label { display: none; } .dfl-theme-toggle-label span { display: none; } @media (max-width: 1900px) { .dfl-theme-toggle-label { display: inline-block; font-size: 0.8rem; opacity: 0.85; } } :root[data-theme-mode="auto"] .dfl-theme-toggle-label--auto, :root[data-theme-mode="light"] .dfl-theme-toggle-label--sun, :root[data-theme-mode="dark"] .dfl-theme-toggle-label--moon, :root[data-theme-mode="time"] .dfl-theme-toggle-label--time { display: inline; } h1, h2, h3 { color: var(--dfl-brand, #1a5490); } .dfl-card { background: var(--dfl-surface, #fff); border-radius: 8px; box-shadow: 0 1px 4px rgba(var(--dfl-shadow-rgb, 0, 0, 0), 0.08); padding: 1rem; margin-bottom: 1rem; } .dfl-banner { background: var(--dfl-surface-alt, #e8f4f8); border-left: 4px solid var(--dfl-brand, #1a5490); padding: 0.85rem 1rem; border-radius: 4px; margin-bottom: 1rem; } .dfl-banner.warn { background: var(--dfl-warning-bg, #fff8e1); border-left-color: var(--dfl-warning, #f59e0b); } .dfl-install-banner { display: none; position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 1000; align-items: center; gap: 0.75rem; background: var(--dfl-surface, #fff); border-radius: 10px; box-shadow: 0 4px 16px rgba(var(--dfl-shadow-rgb, 0, 0, 0), 0.2); padding: 0.75rem 1rem; max-width: 420px; margin: 0 auto; } .dfl-install-banner.is-visible { display: flex; } .dfl-install-banner__icon { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; } .dfl-install-banner__copy { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 0.85rem; } .dfl-install-banner__copy strong { color: var(--dfl-brand, #1a5490); } /* Fixed brand-blue fill in both themes — see .dfl-standings-hero's comment for why (this is the same "primary action" brand color used for buttons/badges/header-bars throughout the app, always paired with the theme-constant --dfl-on-brand text). */ .dfl-install-banner__install { background: #1a5490; color: var(--dfl-on-brand, #fff); border: none; border-radius: 6px; padding: 0.5rem 0.85rem; font-weight: 600; cursor: pointer; flex-shrink: 0; } .dfl-install-banner__dismiss { background: none; border: none; cursor: pointer; font-size: 0.9rem; padding: 0.25rem; flex-shrink: 0; color: var(--dfl-text-muted, #888); } .dfl-table-wrap { overflow-x: auto; } table.dfl-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } table.dfl-table th, table.dfl-table td { padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--dfl-border, #e5e7eb); text-align: left; white-space: nowrap; } table.dfl-table th { background: var(--dfl-surface-alt, #eef4f9); color: var(--dfl-brand-dark, #0f3d6b); font-weight: 600; } table.dfl-table tr:hover td { background: var(--dfl-surface-hover, #f9fbfd); } /* Shared delta coloring (MyTeams.razor, DraftBoardCore.razor history columns, etc.) — pair these ONLY with a sizing class that does NOT itself set `color` (e.g. a dedicated `__delta` class), never with an existing `__proj`/value class that sets color. Same-specificity CSS rules resolve by source order, not which class "sounds more specific" — a `color` rule defined later in this file (most component-specific rules are, since these three are declared near the top) wins over these regardless of which element also has score-positive/-negative/-inactive. */ .score-positive { color: var(--dfl-success, #15803d); } .score-negative { color: var(--dfl-danger, #b91c1c); } .score-inactive { color: var(--dfl-text-muted, #6b7280); } /* Standings heat-map shading for streak / last-10 columns */ .heat-pos-strong { background-color: rgba(var(--dfl-success-rgb, 22, 163, 74), 0.22); } .heat-pos-med { background-color: rgba(var(--dfl-success-rgb, 22, 163, 74), 0.13); } .heat-pos-weak { background-color: rgba(var(--dfl-success-rgb, 22, 163, 74), 0.07); } .heat-neg-strong { background-color: rgba(var(--dfl-danger-rgb, 220, 38, 38), 0.22); } .heat-neg-med { background-color: rgba(var(--dfl-danger-rgb, 220, 38, 38), 0.13); } .heat-neg-weak { background-color: rgba(var(--dfl-danger-rgb, 220, 38, 38), 0.07); } .sync-ok { color: var(--dfl-success, #15803d); font-size: 0.75rem; } .sync-fail { color: var(--dfl-danger, #b91c1c); font-size: 0.75rem; } .dfl-sport-nav { display: flex; gap: 0.35rem; padding: 0.65rem 1.5rem; background: var(--dfl-surface, #fff); border-bottom: 1px solid var(--dfl-border, #e5e7eb); overflow-x: auto; width: 100%; max-width: 100%; box-sizing: border-box; -webkit-overflow-scrolling: touch; } .dfl-sport-nav a { text-decoration: none; color: var(--dfl-brand-dark, #0f3d6b); font-size: 0.85rem; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--dfl-border, #d1d9e0); white-space: nowrap; } .dfl-sport-nav a:hover { background: var(--dfl-surface-alt, #eef4f9); } .dfl-sport-nav a.active { background: var(--sport-accent, var(--dfl-brand, #1a5490)); border-color: var(--sport-accent, var(--dfl-brand, #1a5490)); color: var(--sport-tab-text, var(--dfl-surface, #fff)); } .dfl-sport-nav a:not(.inactive):not(.active) { /* Unlike other --sport-accent-soft consumers in this file, this pill is deliberately NOT muted toward --dfl-surface in dark mode (--dfl-tint-mix overridden back to 100% here) — it's a small chip, same reasoning as the fixed-color header/hero chips in the top-of-file comment, so the pastel stays visible and matches light mode exactly (e.g. MLB stays light red). Text color is likewise pinned to the light-mode --dfl-brand-dark value instead of the token, which flips to a light blue in dark mode and would be unreadable on a light pastel chip. */ --dfl-tint-mix: 100%; background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); border-color: transparent; color: #0f3d6b; } .dfl-sport-nav a.inactive { opacity: var(--dfl-inactive-opacity, 0.45); } /* Wraps DflTicker + NewsTicker (see MainLayout.razor) so the pair sticks and scrolls as one unit below the header, instead of each .dfl-ticker fighting over the same sticky offset. */ .dfl-ticker-stack { position: sticky; top: 4.75rem; /* stick below the persistent site header (dfl-header), same offset draft-clock-card uses */ z-index: 1050; } @media (max-width: 1900px) { .dfl-ticker-stack { top: 3.75rem; /* matches dfl-header's mobile-shrink breakpoint in MainLayout.razor.css */ } } .dfl-ticker { overflow: hidden; background: linear-gradient(90deg, var(--dfl-surface-alt, #e8f0f8), var(--dfl-surface-alt, #f2f7fb)); color: var(--dfl-brand-dark, #0f3d6b); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--dfl-border, #e5e7eb); cursor: grab; touch-action: pan-y; /* let vertical page scroll pass through; ticker.js owns horizontal drag */ -webkit-user-select: none; user-select: none; } /* Set by ticker.js while a drag is in progress (see js/ticker.js) */ .dfl-ticker--dragging { cursor: grabbing; } /* Movement is entirely JS-driven (see js/ticker.js) so it can be paused/dragged/resumed — plain CSS animation can't be interrupted by a pointer gesture and smoothly resumed later. */ .dfl-ticker__track { display: flex; width: max-content; will-change: transform; } .dfl-ticker__text { display: inline-flex; align-items: center; padding: 0.45rem 2rem; white-space: nowrap; } .dfl-ticker__game { display: inline-flex; align-items: center; gap: 0.3rem; } /* NewsTicker.razor's per-headline equivalent of .dfl-ticker__game above. */ .dfl-ticker__headline { display: inline-flex; align-items: center; gap: 0.4rem; } .dfl-ticker__headline a { color: inherit; text-decoration: none; cursor: pointer; } .dfl-ticker__headline a:hover { text-decoration: underline; } /* Shown once per sport (see DflTicker.razor's IsFirstOfSport), not once per game — a visually distinct "sport change" marker rather than a label repeated on every entry. */ .dfl-ticker__sport-marker { color: #b45309; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.14em; margin: 0 0.6rem; } .dfl-ticker__sep { opacity: 0.55; } .dfl-ticker__status { font-size: 0.62rem; opacity: 0.8; margin-left: 0.1rem; } .dfl-ticker__status.is-live { color: var(--dfl-success, #15803d); opacity: 1; } .dfl-ticker__divider { opacity: 0.35; margin: 0 1rem; } .dfl-ticker .team-logo { width: 1.1rem; height: 1.1rem; vertical-align: middle; } .member-badge-link { display: inline-flex; color: inherit; text-decoration: none; } .member-badge { display: inline-flex; align-items: center; gap: 0.5rem; } .member-badge__avatar, .member-badge__photo { width: var(--member-badge-size, 36px); height: var(--member-badge-size, 36px); border-radius: 999px; flex-shrink: 0; box-sizing: border-box; border: 2.5px solid var(--member-chart-color, var(--member-bg, var(--dfl-border, #e5e7eb))); } .member-badge__avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--member-bg, var(--dfl-border, #e5e7eb)); color: var(--member-fg, var(--dfl-text, #1f2937)); font-size: calc(var(--member-badge-size, 36px) * 0.34); font-weight: 800; letter-spacing: 0.02em; } .member-badge__photo { display: block; object-fit: contain; object-position: center; background: var(--dfl-surface, #fff); image-rendering: auto; } .member-badge__name { font-weight: 600; } .team-logo-link { display: inline-flex; line-height: 0; } .team-logo { width: 1.75rem; height: 1.75rem; object-fit: contain; flex-shrink: 0; } .team-name-cell { display: flex; align-items: center; gap: 0.45rem; } .sport-banner { border-left-color: var(--sport-accent, var(--dfl-brand, #1a5490)); background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #e8f4f8)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); } .sport-banner__brand { display: flex; align-items: center; gap: 0.85rem; } .sport-banner__text { min-width: 0; } .sport-panel__title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; } .sport-panel__title h1 { margin: 0; font-size: 1.1rem; } .sport-panel h1, .sport-panel h2 { color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand, #1a5490))); } .sport-panel h2 { margin: 0 0 0.35rem; font-size: 1.1rem; } .dfl-card.sport-panel { padding: 0.6rem 0.75rem; margin-bottom: 0.65rem; } .dfl-banner.sport-banner--page { padding: 0.6rem 0.85rem; margin-bottom: 0.65rem; } .sport-panel__footnote { margin: 0.45rem 0 0; } .sport-panel .dfl-sheet-note { margin: 0 0 0.4rem; } .sport-panel table.dfl-table th, .sport-panel table.dfl-table td { padding: 0.28rem 0.45rem; line-height: 1.2; vertical-align: middle; text-align: right; } .sport-panel table.dfl-table .col-text { text-align: left; } /* flex (not inline vertical-align) so the logo/name/badges genuinely center as a group against taller neighboring cells (e.g. the Owner column's avatar) — inline vertical-align only aligns elements relative to each other on the line, not the line as a whole within a taller cell. Same technique already used successfully for .scoreboard-owner-cell/.scoreboard-opponent-cell. */ .sport-panel table.dfl-table td.team-name-cell { display: flex; align-items: center; line-height: normal; text-align: left; } .sport-panel table.dfl-table td.team-name-cell .team-logo { margin-right: 0.35rem; } .sport-panel table.dfl-table td.pick-list { line-height: normal; text-align: left; } .sport-panel table.dfl-table td:has(.member-badge), .sport-panel table.dfl-table td:has(.member-pick-logos) { line-height: normal; text-align: left; } .sport-panel .member-badge { gap: 0.35rem; vertical-align: middle; } .sport-panel .member-pick-logos { display: inline-flex; gap: 0.2rem; vertical-align: middle; align-items: center; } .sport-panel table.dfl-table .team-logo, .sport-panel table.dfl-table .member-badge__photo, .sport-panel table.dfl-table .member-badge__avatar { vertical-align: middle; } .sport-panel .scoring-detail-table td.tier-breakdown-cell { vertical-align: top; text-align: left; padding-top: 0.35rem; padding-bottom: 0.35rem; } /* Same display:flex-on- fix as .dfl-team-standings-table above — this table's Tier Breakdown column routinely wraps to multiple lines, making the row tall, and without this override the Team cell (flex, so no longer a real table-cell) stopped centering against that taller row. */ .sport-panel table.dfl-table.scoring-detail-table td.team-name-cell { display: table-cell; vertical-align: middle; } .scoring-detail-table .team-name-inner { display: flex; align-items: center; gap: 0.35rem; } .sport-panel .tier-breakdown-list { padding-left: 0.95rem; line-height: 1.25; } .sport-panel .tier-breakdown-list li + li { margin-top: 0.1rem; } table.dfl-table tr.sport-head th, .sport-panel table.dfl-table thead th { background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); } /* Deep muted navy in dark mode (--dfl-table-header-bg) rather than the vivid fixed brand blue used for buttons/badges elsewhere — see that token's comment above for why. */ .dfl-standings-table .section-overall, .dfl-standings-table .section-money { text-align: center; background: var(--dfl-table-header-bg, #1a5490); color: var(--dfl-on-brand, #fff); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; } .dfl-standings-table .section-sport { text-align: center; background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; } .dfl-standings-table .section-sport.is-inactive { opacity: var(--dfl-inactive-opacity, 0.55); } .section-sport__head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; } .dfl-sport-leader-card__sport { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } .dfl-standings-table tr.subhead th { font-size: 0.78rem; background: var(--dfl-surface-hover, #f8fafc); text-align: right; } .dfl-standings-table tr.subhead th:first-child { text-align: right; } .dfl-standings-table tr.subhead th.col-text { text-align: left; } .dfl-standings-table .score-cell strong { color: var(--dfl-brand-dark, #0f3d6b); } table.dfl-table.dfl-standings-table td { text-align: right; } table.dfl-table.dfl-standings-table tbody td.col-text { text-align: left; } /* Frozen leading columns for the site's scrollable data tables, so a row stays identifiable while scrolling right through stat columns on a narrow screen. `.freeze-col-1`/`.freeze-col-2` freeze a 2-column identity pair (e.g. Rk+Member, #+Team); `.freeze-col-solo` freezes a single leading column (e.g. just a Team or Member column). freeze-col-1 gets a fixed border-box width PLUS a matching min-width — table auto-layout treats a bare `width` as only a *preferred* size and will shrink the column toward its min-content width once the table overflows its container (exactly the narrow-screen/overflow-x:auto case this feature targets), which silently produces a real gap between freeze-col-1's shrunk right edge and freeze-col-2's `left` offset (still computed from the wider assumed width) — min-width is what actually holds the column at that width. Two width groups by known max content width: 2.5rem for 1-2 digit rank/AP-poll numbers (Home.razor Overall Standings, Sport.razor Member Scores, SportTeamStandingsTable.razor), 3rem for wider content (Home.razor Projection Trends' "Rk" up to 2 digits gets the same treatment for consistency; MyTeams.razor's "#" is an overall draft pick number up to DraftConstants.TotalPicks=210, genuinely needing the extra digit). In Home.razor's two tables (Overall Standings + Projection Trends) and Sport.razor's Member Scores table, freeze-col-2 holds ONLY the member avatar (`MemberBadge ShowName="false"`) — the member's name is a separate, deliberately unfrozen `.col-text` column right after it (`MemberBadge ShowAvatar="false"`) so the name scrolls away while the avatar stays pinned for row identification. Same split in SportTeamStandingsTable.razor and MyTeams.razor (one table per sport), but for the Team column instead of Member: freeze-col-2 holds only ``, and the team name/badges (formerly combined with the logo in one `.team-name-cell` / `.my-teams-team-name` cell) live in their own unfrozen `.col-text` column right after it. Don't recombine any of these back into one freeze-col-2 cell without re-checking that request. Home.razor's merged colspan=5 "Overall" header cell is split into a blank frozen colspan=2 segment (Rk+Avatar) + a blank unfrozen colspan=1 segment (Member name column) + a labeled colspan=3 segment, so the banner still reads as one continuous bar while only Rk+Avatar freeze; same trick for its tfoot "Total" label (colspan=2, exactly the frozen zone's width, followed by an empty td for the unfrozen name column). position:sticky on table cells doesn't composite cleanly against the collapsed-border layer (Chrome/Firefox both show a hairline see-through gap between sticky cells) — switch every frozen table to the separate border model so the sticky columns paint with solid edges. */ .dfl-standings-table--sheet, .dfl-trend-table, .dfl-member-scores-table, .dfl-team-standings-table, .dfl-my-teams-table, .dfl-sidebet-balances-table, .scoring-detail-table { border-collapse: separate; border-spacing: 0; } .dfl-standings-table--sheet .freeze-col-1, .dfl-standings-table--sheet .freeze-col-2, .dfl-trend-table .freeze-col-1, .dfl-trend-table .freeze-col-2, .dfl-member-scores-table .freeze-col-1, .dfl-member-scores-table .freeze-col-2, .dfl-team-standings-table .freeze-col-1, .dfl-team-standings-table .freeze-col-2, .dfl-my-teams-table .freeze-col-1, .dfl-my-teams-table .freeze-col-2, .freeze-col-solo, .section-overall--frozen, .standings-total-label--frozen { position: sticky; z-index: 1; } th.freeze-col-1, th.freeze-col-2, th.freeze-col-solo, .section-overall--frozen { z-index: 2; } .dfl-standings-table--sheet .freeze-col-1, .dfl-member-scores-table .freeze-col-1, .dfl-team-standings-table .freeze-col-1, .dfl-trend-table .freeze-col-1, .dfl-my-teams-table .freeze-col-1, .freeze-col-solo, .section-overall--frozen, .standings-total-label--frozen { left: 0; } .dfl-standings-table--sheet .freeze-col-1, .dfl-member-scores-table .freeze-col-1, .dfl-team-standings-table .freeze-col-1 { width: 2.5rem; min-width: 2.5rem; box-sizing: border-box; } .dfl-standings-table--sheet .freeze-col-2, .dfl-member-scores-table .freeze-col-2, .dfl-team-standings-table .freeze-col-2 { left: 2.5rem; } .dfl-trend-table .freeze-col-1, .dfl-my-teams-table .freeze-col-1 { width: 3rem; min-width: 3rem; box-sizing: border-box; } .dfl-trend-table .freeze-col-2, .dfl-my-teams-table .freeze-col-2 { left: 3rem; } .dfl-standings-table--sheet .freeze-col-1, .dfl-standings-table--sheet .freeze-col-2, .dfl-member-scores-table .freeze-col-1, .dfl-member-scores-table .freeze-col-2, .dfl-team-standings-table .freeze-col-1, .dfl-team-standings-table .freeze-col-2, .dfl-my-teams-table .freeze-col-1, .dfl-my-teams-table .freeze-col-2, .freeze-col-solo { background-color: var(--dfl-surface, #fff); } .standings-row-gold .freeze-col-1, .standings-row-gold .freeze-col-2 { background-color: var(--dfl-gold-bg, #fff7cc); } .standings-row-silver .freeze-col-1, .standings-row-silver .freeze-col-2 { background-color: var(--dfl-silver-bg, #f0f0f0); } .standings-row-bronze .freeze-col-1, .standings-row-bronze .freeze-col-2 { background-color: var(--dfl-bronze-bg, #f5e5d6); } /* Override .sport-panel table.dfl-table td.team-name-cell's display:flex (same fix as table.dfl-draft-pool-table's td.team-name-cell below) — a with display:flex stops being a table-cell, so it drops out of vertical-align:middle with its Rk/Logo/Owner row-siblings and the whole row looks shifted. Flex moves to this inner wrapper div instead; see the scoreboard-team-flex comment for the original diagnosis of this exact symptom. Selector must match that rule's specificity (.sport-panel + table.dfl-table + td.team-name-cell) or the override silently loses the cascade. */ .sport-panel table.dfl-table.dfl-team-standings-table td.team-name-cell { display: table-cell; vertical-align: middle; } .dfl-team-standings-table .team-name-inner { display: flex; align-items: center; gap: 0.45rem; } /* Fixed brand-blue gradient in both themes (same reasoning as .dfl-header's masthead gradient in MainLayout.razor.css) — tokenizing the stops to --dfl-brand/--dfl-brand-dark made this wash out to a pale, low-contrast blue in dark mode, since those tokens brighten for their more common role as readable text/accent color on a dark page. Only the on-top text color is themed (and it's a no-op: --dfl-on-brand is constant white). */ .dfl-standings-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1rem; padding: 1.25rem 1.5rem; border-radius: 12px; background: linear-gradient(135deg, #0f3d6b 0%, #1a5490 45%, #2563eb 100%); color: var(--dfl-on-brand, #fff); box-shadow: 0 8px 24px rgba(15, 61, 107, 0.25); } .dfl-standings-hero__text { display: flex; align-items: center; gap: 1.25rem; } .dfl-standings-hero__logo { display: block; flex-shrink: 0; height: 11rem; width: auto; object-fit: contain; } /* 1900px matches the header nav's hamburger breakpoint (MainLayout.razor.css / HeaderNavPanel.razor.css) — hide the hero logo once the site is in mobile-nav mode so the hero doesn't dominate the viewport on narrow screens. */ @media (max-width: 1900px) { .dfl-standings-hero__logo { display: none; } } .dfl-standings-hero__copy { display: flex; flex-direction: column; justify-content: center; } .dfl-standings-hero__eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; } .dfl-standings-hero__title { margin: 0.2rem 0 0; font-size: 1.85rem; color: var(--dfl-on-brand, #fff); } .dfl-standings-hero__phase { margin: 0.35rem 0 0; opacity: 0.9; font-size: 0.9rem; } .dfl-podium { display: flex; align-items: flex-end; gap: 0.6rem; } .dfl-podium__slot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 5.25rem; } /* The pedestal is now the tiered colored riser that contains the info inside the color */ .dfl-podium__pedestal { width: 100%; border-radius: 10px 10px 4px 4px; backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* data lives near the top of the colored riser */ padding: 0.4rem 0.3rem 0.3rem; gap: 0.12rem; text-align: center; box-sizing: border-box; } /* Tiered heights: 1st tallest/highest (gold), 2nd medium (silver), 3rd shortest/lowest (bronze). Content sits inside the colored areas (at the top). Gold and silver have extra riser height below the labels so they visibly rise higher than bronze (bronze is kept snug to fit its content without shrinking further). */ .dfl-podium__slot--1 .dfl-podium__pedestal { min-height: 12rem; background: rgba(var(--dfl-gold-rgb, 255, 215, 0), 0.52); box-shadow: inset 0 0 0 1px rgba(var(--dfl-gold-rgb, 255, 215, 0), 0.55); } .dfl-podium__slot--2 .dfl-podium__pedestal { min-height: 10rem; background: rgba(var(--dfl-silver-rgb, 192, 192, 192), 0.50); box-shadow: inset 0 0 0 1px rgba(var(--dfl-silver-rgb, 192, 192, 192), 0.55); } .dfl-podium__slot--3 .dfl-podium__pedestal { min-height: 8rem; background: rgba(var(--dfl-bronze-rgb, 205, 127, 50), 0.50); box-shadow: inset 0 0 0 1px rgba(var(--dfl-bronze-rgb, 205, 127, 50), 0.55); } .dfl-podium__medal { font-size: 1.05rem; font-weight: 900; line-height: 1; margin-bottom: 0.1rem; } .dfl-podium__name { font-size: 0.68rem; font-weight: 700; text-align: center; max-width: 5.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.05; } .dfl-podium__score { font-size: 1.0rem; font-weight: 800; line-height: 1; } .dfl-podium__delta { font-size: 0.68rem; font-weight: 700; line-height: 1; } /* True-phone breakpoint (matches .summary-hero__title's own 720px cutoff). The desktop podium's tiered risers (up to 12rem tall) are the whole space problem, not the layout — so below 720px this keeps the same stacked "text row, podium wrapped below" shape and 3-up row/DOM order as desktop, and just collapses every riser to one small flat height instead of restructuring into stacked rows (a stacked-rows-within-the-podium attempt read worse than the plain tall version — flattening each riser in place is the safer, smaller change). Rank tint backgrounds (.dfl-podium__slot--1/2/3 .dfl-podium__pedestal) are untouched so color still signals place without height doing it. Only .dfl-standings-hero's own vertical padding/gap is trimmed beyond that — text and podium chip sizes stay exactly as flattened above; the container's padding is the actual source of extra banner height, not the content inside it. */ @media (max-width: 720px) { .dfl-standings-hero { padding: 0.65rem 0.9rem; gap: 0.4rem; } .dfl-standings-hero__title { font-size: 1.3rem; } .dfl-podium { gap: 0.35rem; } .dfl-podium__slot { min-width: 0; flex: 1 1 0; } .dfl-podium__pedestal { padding: 0.5rem 0.3rem 0.55rem; gap: 0.05rem; border-radius: 8px; } /* The tiered min-height (12rem/10rem/8rem) is set on these higher-specificity .dfl-podium__slot--N .dfl-podium__pedestal selectors (2 classes), not on the bare .dfl-podium__pedestal rule above (1 class) — a min-height: 0 on the bare rule loses the cascade to these regardless of source order, so it must be overridden here directly. */ .dfl-podium__slot--1 .dfl-podium__pedestal, .dfl-podium__slot--2 .dfl-podium__pedestal, .dfl-podium__slot--3 .dfl-podium__pedestal { min-height: 0; } .dfl-podium__medal { font-size: 0.72rem; margin-bottom: 0; } .dfl-podium__pedestal .member-badge__avatar, .dfl-podium__pedestal .member-badge__photo { width: 24px !important; height: 24px !important; font-size: 0.55rem !important; } .dfl-podium__name { font-size: 0.58rem; max-width: 100%; } .dfl-podium__score { font-size: 0.78rem; } .dfl-podium__delta { font-size: 0.56rem; } } .dfl-standings-card__header { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.75rem; } .dfl-standings-card__header h2 { margin: 0; } .dfl-sheet-tag { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--dfl-surface-alt, #e8f4f8); color: var(--dfl-brand-dark, #0f3d6b); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .dfl-sheet-tag--live { background: var(--dfl-warning-bg, #fef3c7); color: var(--dfl-warning-text, #92400e); animation: dfl-live-pulse 2s ease-in-out infinite; } @keyframes dfl-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } .dfl-standings-card--proj { border-top: 4px solid var(--dfl-brand, #1a5490); } .dfl-standings-table--sheet .rank-cell { font-weight: 800; color: var(--dfl-brand-dark, #0f3d6b); } .dfl-standings-table--sheet th, .dfl-standings-table--sheet td { padding: 0.28rem 0.45rem; line-height: 1.2; vertical-align: middle; } /* Make data rows in overall standings match the compact sizing and row height used on individual sport pages (e.g. MLB standings inside .sport-panel + dfl-table-compact). This keeps text the same size (0.82rem from compact) and tight row height. */ .dfl-standings-table--sheet tbody td { padding: 0.28rem 0.45rem; line-height: 1.2; vertical-align: middle; font-size: 0.82rem; } .dfl-standings-table--sheet td:has(.member-badge) { line-height: normal; } .dfl-standings-table td.sport-col, .dfl-standings-table th.sport-col { background: color-mix(in srgb, var(--sc-bg, transparent) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); } .dfl-standings-table tr.subhead th.sport-col { background: color-mix(in srgb, var(--sc-bg, var(--dfl-surface-hover, #f8fafc)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sc-fg, var(--dfl-brand-dark, #0f3d6b))); } .standings-row-gold td { background: rgba(var(--dfl-gold-rgb, 255, 215, 0), 0.2); } .standings-row-gold td.sport-col { background: linear-gradient(rgba(var(--dfl-gold-rgb, 255, 215, 0), 0.3), rgba(var(--dfl-gold-rgb, 255, 215, 0), 0.3)), color-mix(in srgb, var(--sc-bg, white) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); } .standings-row-silver td { background: rgba(var(--dfl-silver-rgb, 192, 192, 192), 0.24); } .standings-row-silver td.sport-col { background: linear-gradient(rgba(var(--dfl-silver-rgb, 192, 192, 192), 0.35), rgba(var(--dfl-silver-rgb, 192, 192, 192), 0.35)), color-mix(in srgb, var(--sc-bg, white) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); } .standings-row-bronze td { background: rgba(var(--dfl-bronze-rgb, 205, 127, 50), 0.2); } .standings-row-bronze td.sport-col { background: linear-gradient(rgba(var(--dfl-bronze-rgb, 205, 127, 50), 0.3), rgba(var(--dfl-bronze-rgb, 205, 127, 50), 0.3)), color-mix(in srgb, var(--sc-bg, white) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); } .standings-total-row td { border-top: 2px solid var(--dfl-border-strong, #cbd5e1); background: var(--dfl-surface-hover, #f8fafc); font-size: 0.8rem; } .standings-total-label { font-weight: 700; text-align: left; } .sport-score-hot { font-weight: 700; color: var(--dfl-brand-dark, #0f3d6b); } .money-cell { font-weight: 700; color: var(--dfl-success-strong, #14532d); } .payout-balance--ok td { color: var(--dfl-success-strong, #14532d); } .payout-balance--warn td { color: var(--dfl-danger, #b91c1c); } .dfl-standings-footnote { margin-top: 0.75rem; } .dfl-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem 1rem; margin-bottom: 1rem; } .dfl-form-grid--single { grid-template-columns: minmax(12rem, 20rem); } .dfl-profile-avatar-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .dfl-profile-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .dfl-profile-nav a { color: var(--dfl-brand, #1a5490); text-decoration: none; font-weight: 600; font-size: 0.9rem; } .dfl-profile-nav a.active { color: var(--dfl-brand-dark, #0f3d6b); text-decoration: underline; } .dfl-form-grid label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; font-weight: 600; color: var(--dfl-brand-dark, #0f3d6b); } .dfl-input { padding: 0.4rem 0.55rem; border: 1px solid var(--dfl-border, #d1d9e0); border-radius: 4px; font-size: 0.9rem; } .dfl-input--narrow { max-width: 5.5rem; } .dfl-checkbox-label { flex-direction: row !important; align-items: center; gap: 0.45rem !important; } .dfl-file-input { font-size: 0.78rem; max-width: 10rem; } .member-inactive-row td { opacity: 0.55; } .commissioner-member-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; } .dfl-sport-leaders { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.65rem; margin-bottom: 1rem; } .dfl-sport-leader-card { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.75rem 0.5rem; border-radius: 10px; background: var(--dfl-surface, #fff); border: 2px solid var(--sport-accent-soft, var(--dfl-border, #e5e7eb)); box-shadow: 0 2px 8px rgba(15, 61, 107, 0.06); text-align: center; min-height: 6.5rem; } .dfl-sport-leader-card.is-active { border-color: var(--sport-accent, var(--dfl-brand, #1a5490)); background: linear-gradient(180deg, color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)), var(--dfl-surface, #fff) 55%); } .dfl-sport-leader-card.is-inactive { opacity: var(--dfl-inactive-opacity, 0.65); } .dfl-sport-leader-card__label { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); } .dfl-sport-leader-card__score { font-size: 1.15rem; font-weight: 800; color: var(--dfl-brand-dark, #0f3d6b); line-height: 1; } .dfl-sport-leader-card__caption { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dfl-text-muted, #6b7280); } .dfl-sport-leader-card__pending { font-size: 0.78rem; font-weight: 600; margin-top: 0.35rem; } /* Mobile: 7 sport cards at the desktop min-width (7.5rem each) wrap into 2-3 rows and eat a lot of vertical space. Below 720px, force a single row (flex nowrap on the outer list; overflow-x:auto is a safety net for a phone too narrow to fit all 7 cards at once, same pattern as .dfl-sport-nav) and shrink each card's own width down (min-width, padding, avatar/logo/font sizes) so 7 still fit — but keep the card's existing flex-column stacking (sport block, then the combined avatar+name MemberBadge, then score, then caption) as separate rows rather than packing them into side-by-side columns, so a card only grows taller, never wider. */ @media (max-width: 720px) { .dfl-sport-leaders { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 0.3rem; margin-bottom: 0.75rem; } .dfl-sport-leader-card { flex: 1 1 0; min-width: 2.9rem; min-height: 0; padding: 0.3rem 0.1rem; gap: 0.15rem; border-radius: 8px; border-width: 1.5px; } .dfl-sport-leader-card__sport { gap: 0.1rem; } .dfl-sport-leader-card__sport .sport-logo { width: 20px; height: 20px; } .dfl-sport-leader-card .sport-link--pill, .dfl-sport-leader-card__label { font-size: 0.5rem; padding: 0.05rem 0.25rem; } .dfl-sport-leader-card .member-badge { gap: 0.2rem; } .dfl-sport-leader-card .member-badge__avatar, .dfl-sport-leader-card .member-badge__photo { width: 16px !important; height: 16px !important; font-size: 0.4rem !important; } .dfl-sport-leader-card .member-badge__name { font-size: 0.52rem; max-width: 3.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dfl-sport-leader-card__score { font-size: 0.78rem; } .dfl-sport-leader-card__caption { font-size: 0.5rem; } .dfl-sport-leader-card__pending { font-size: 0.56rem; margin-top: 0.1rem; } } a.sport-link--pill { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--sport-accent, var(--dfl-brand, #1a5490)); color: var(--dfl-on-brand, #fff) !important; text-decoration: none; font-weight: 700; } a.sport-link--pill:hover { filter: brightness(1.08); text-decoration: none; } a.sport-link { color: var(--dfl-brand, #1a5490); text-decoration: none; } a.sport-link:hover { text-decoration: underline; } .dfl-table-compact th, .dfl-table-compact td { font-size: 0.82rem; } .dfl-pick-sheet-wrap { max-height: 70vh; } table.dfl-pick-sheet th.member-col, table.dfl-pick-sheet td.pick-cell { text-align: center; min-width: 2.25rem; padding-left: 0.35rem; padding-right: 0.35rem; } table.dfl-pick-sheet th.member-col { background: color-mix(in srgb, var(--member-bg, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--member-fg, var(--dfl-brand-dark, #0f3d6b))); font-weight: 800; font-size: 0.72rem; } table.dfl-pick-sheet th.member-col .member-badge { justify-content: center; margin: 0 auto; } table.dfl-pick-sheet td.pick-cell.picked { background: color-mix(in srgb, var(--member-bg, var(--dfl-success-bg, #dcfce7)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--member-fg, var(--dfl-success, #15803d))); font-weight: 800; } table.dfl-pick-sheet .sticky-col { position: sticky; left: 0; background: var(--dfl-surface, #fff); z-index: 1; box-shadow: 2px 0 4px rgba(var(--dfl-shadow-rgb, 0, 0, 0), 0.04); } table.dfl-pick-sheet thead .sticky-col { background: var(--dfl-surface-alt, #eef4f9); } .pick-list { white-space: normal; max-width: 8rem; } .member-pick-logos { display: flex; align-items: center; gap: 0.35rem; flex-wrap: nowrap; } .member-pick-logos .team-logo { width: 1.75rem; height: 1.75rem; } .sport-pill { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--sport-accent, var(--dfl-brand, #1a5490)); color: var(--dfl-on-brand, #fff); font-weight: 700; font-size: 0.82rem; } .seed-input { width: 4rem; padding: 0.2rem 0.35rem; } .winner-select { min-width: 12rem; max-width: 100%; } .tier-breakdown-list { margin: 0; padding-left: 1.1rem; font-size: 0.78rem; } .tier-breakdown-cell { min-width: 16rem; } .scoring-detail-table td { vertical-align: top; } .scoring-math-formulas { margin-bottom: 0.75rem; font-size: 0.85rem; color: var(--dfl-text, #374151); } .scoring-math-formulas p { margin: 0.25rem 0; } .scoring-math-table th { font-size: 0.72rem; white-space: nowrap; } .scoring-math-note-row td { font-size: 0.75rem; padding-top: 0; border-top: none; } .scoring-math-example { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--dfl-text, #374151); } .odds-source-details { margin: 0.5rem 0 0; padding-left: 1.25rem; font-size: 0.85rem; color: var(--dfl-text-muted, #4b5563); } .member-score-breakdown-table .member-totals-cell { font-size: 0.85rem; vertical-align: top; min-width: 7rem; } .member-score-breakdown-table .member-totals-cell div { margin-bottom: 0.2rem; } .league-scoring-table th.section-sport { font-size: 0.75rem; text-align: center; } .league-scoring-table th.section-overall { text-align: center; } .league-scoring-table td { text-align: right; font-size: 0.85rem; } .league-scoring-table td:first-child { text-align: left; } .dfl-sheet-note { margin-top: 0; color: var(--dfl-text-muted, #6b7280); font-size: 0.85rem; } .rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .rules-grid .dfl-card h3 { margin-top: 0; } #blazor-error-ui { background: var(--dfl-danger, #b32121); bottom: 0; box-shadow: 0 -1px 4px rgba(var(--dfl-shadow-rgb, 0, 0, 0), 0.2); display: none; left: 0; padding: 0.6rem 1.25rem; position: fixed; width: 100%; z-index: 1000; color: var(--dfl-on-brand, #fff); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.5rem; } .dfl-playoff-nav { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 1rem; } .playoff-nav-item { text-decoration: none; color: var(--dfl-brand-dark, #0f3d6b); font-size: 0.85rem; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--dfl-border, #d1d9e0); background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); } .playoff-nav-item.active { background: var(--sport-accent, var(--dfl-brand, #1a5490)); border-color: var(--sport-accent, var(--dfl-brand, #1a5490)); color: var(--dfl-on-brand, #fff); } .playoff-nav-item.inactive { opacity: var(--dfl-inactive-opacity, 0.45); } .playoff-panel h1 { margin-top: 0; } /* Scroll boundary for .bracket-tree — on narrow viewports the tree grows wider than the viewport (see the 900px media query below) instead of squeezing every column down to an illegible width; this wrapper is what turns that overflow into a swipeable scroll region instead of clipping it or spilling into the rest of the page. No-op on desktop, where the tree still fits at width:100% and never overflows this wrapper. */ .bracket-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .bracket-tree { --bracket-line: #94a3b8; --bracket-game-base: 3.25rem; display: flex; align-items: stretch; justify-content: center; gap: 0; overflow: visible; width: 100%; max-width: 100%; padding: 1rem 0.25rem 1.25rem; min-height: 18rem; } .bracket-tree__wing { display: flex; align-items: stretch; } .bracket-tree__wing--single { margin: 0 auto; } .bracket-col { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; max-width: 11rem; padding: 0 0.85rem; } .bracket-col__label { flex-shrink: 0; margin-bottom: 0.65rem; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--dfl-text-muted, #6b7280); text-align: center; min-height: 1.5rem; } .bracket-col__games { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; min-height: calc(var(--bracket-game-base) * max(var(--match-count, 2), 2) * 1.45); gap: 0.35rem; } .bracket-col__games--center { justify-content: center; min-height: 100%; } .bracket-game { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-height: var(--bracket-game-base); padding: 0.35rem 0; } .bracket-tree--nfl { --bracket-game-base: 4rem; min-height: 22rem; } .bracket-tree--nfl .bracket-col__games { min-height: calc(var(--bracket-game-base) * var(--match-count, 3) * 2.15); gap: 0.85rem; padding: 0.25rem 0; } .bracket-tree--nfl .bracket-game { min-height: calc(var(--bracket-game-base) + 0.5rem); padding: 0.55rem 0; } /* Reseed columns (currently only NFL's Wild Card round) have no fixed next-round slot to draw a connector to — see RoundTransition.Reseed in PlayoffBracketLayout.cs. Lay their games out evenly across the column instead of relying on bracket-pair bunching. */ .bracket-col--reseed .bracket-col__games { justify-content: space-between; } .bracket-tree--nba, .bracket-tree--nhl, .bracket-tree--ncaab, .bracket-tree--uefacl { --bracket-game-base: 4.25rem; min-height: 28rem; } .bracket-tree--nba .bracket-col__games, .bracket-tree--nhl .bracket-col__games, .bracket-tree--ncaab .bracket-col__games, .bracket-tree--uefacl .bracket-col__games { min-height: calc(var(--bracket-game-base) * var(--match-count, 4) * 2.35); gap: 1rem; padding: 0.35rem 0; } .bracket-tree--nba .bracket-game, .bracket-tree--nhl .bracket-game, .bracket-tree--ncaab .bracket-game, .bracket-tree--uefacl .bracket-game { min-height: calc(var(--bracket-game-base) + 0.65rem); padding: 0.6rem 0; flex-shrink: 0; } .bracket-tree--nba .bracket-pair, .bracket-tree--nhl .bracket-pair, .bracket-tree--ncaab .bracket-pair, .bracket-tree--uefacl .bracket-pair { flex: 1 1 auto; min-height: calc(var(--bracket-game-base) * 2 + 1.25rem); gap: 0.75rem; } .bracket-game--final { flex: 1; min-height: 6rem; } .bracket-pair { position: relative; flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-around; min-height: 0; } /* Connector lines — Merge columns (left wing): game → pair spine → next round. Two adjacent games in this round converge into one slot in the next column; see RoundTransition.Merge in PlayoffBracketLayout.cs. All three pieces below share ONE x-axis convention so they actually meet instead of leaving a gap: each piece starts exactly where the previous one ends. game stub: [0, 0.55rem] starts at the game's own right edge, goes right vertical spine: at 0.55rem catches both game stubs' outer tips continuation: [0.55rem, 1.65rem] picks up at the spine and keeps going right (An earlier version anchored the game stub and spine at `right:0`/`right:0.55rem` — both measured as offsets INTO the card from its own edge — which put the spine at x=-0.55rem while the continuation started at x=0, leaving a 0.55rem gap between the vertical spine and the line that's supposed to continue from it. Anchoring with `left:100%`/`right:-Nrem` instead puts every piece in gutter-space, all sharing the same zero point.) */ .bracket-col--merge.bracket-col--left:not(:last-child) .bracket-game::after { content: ""; position: absolute; top: 50%; left: 100%; width: 0.55rem; border-top: 2px solid var(--bracket-line); transform: translateY(-50%); pointer-events: none; } .bracket-col--merge.bracket-col--left:not(:last-child) .bracket-pair:has(.bracket-game:nth-child(2))::before { content: ""; position: absolute; top: 25%; bottom: 25%; right: -0.55rem; width: 2px; background: var(--bracket-line); pointer-events: none; } .bracket-col--merge.bracket-col--left:not(:last-child) .bracket-pair::after { content: ""; position: absolute; top: 50%; right: -1.65rem; width: 1.1rem; border-top: 2px solid var(--bracket-line); transform: translateY(-50%); pointer-events: none; } /* Connector lines — Merge columns (right wing), mirrored (gutter is to the left, not right) */ .bracket-col--merge.bracket-col--right:not(:first-child) .bracket-game::after { content: ""; position: absolute; top: 50%; right: 100%; width: 0.55rem; border-top: 2px solid var(--bracket-line); transform: translateY(-50%); pointer-events: none; } .bracket-col--merge.bracket-col--right:not(:first-child) .bracket-pair:has(.bracket-game:nth-child(2))::before { content: ""; position: absolute; top: 25%; bottom: 25%; left: -0.55rem; width: 2px; background: var(--bracket-line); pointer-events: none; } .bracket-col--merge.bracket-col--right:not(:first-child) .bracket-pair::after { content: ""; position: absolute; top: 50%; left: -1.65rem; width: 1.1rem; border-top: 2px solid var(--bracket-line); transform: translateY(-50%); pointer-events: none; } /* Connector lines — Direct columns: this round has the same game count as the next round, so each game advances 1:1 into a fixed slot (e.g. a wild-card winner joining a bye seed) at the same row position — no spine needed, just one straight line across the gap. See RoundTransition.Direct in PlayoffBracketLayout.cs. Same gutter-space convention as the Merge columns above (starts at the game's own edge via `left:100%`/`right:100%`, not inside the card) and the same total reach (1.65rem) so both connector styles read as one system. */ .bracket-col--direct.bracket-col--left:not(:last-child) .bracket-game::after { content: ""; position: absolute; top: 50%; left: 100%; width: 1.65rem; border-top: 2px solid var(--bracket-line); transform: translateY(-50%); pointer-events: none; } .bracket-col--direct.bracket-col--right:not(:first-child) .bracket-game::after { content: ""; position: absolute; top: 50%; right: 100%; width: 1.65rem; border-top: 2px solid var(--bracket-line); transform: translateY(-50%); pointer-events: none; } /* Reseed columns intentionally draw no connector at all — see RoundTransition.Reseed. */ .bracket-col--center { flex: 0 0 auto; min-width: 9.5rem; max-width: 11.5rem; padding: 0 1rem; z-index: 1; } .playoff-panel { overflow: visible; } .bracket-col--center .bracket-col__label { color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); font-size: 0.72rem; } .bracket-col--center .bracket-game--final::before, .bracket-col--center .bracket-game--final::after { content: ""; position: absolute; top: 50%; width: 1.25rem; border-top: 2px solid var(--bracket-line); pointer-events: none; } .bracket-tree--dual .bracket-col--center .bracket-game--final::before { left: -1.25rem; } .bracket-tree--dual .bracket-col--center .bracket-game--final::after { right: -1.25rem; } .bracket-tree--single .bracket-col--center .bracket-game--final::before { left: -1.25rem; } .bracket-match { width: 100%; display: grid; gap: 0.2rem; background: var(--dfl-surface, #fff); border: 1px solid var(--dfl-border, #d1d9e0); border-radius: 8px; padding: 0.3rem; box-shadow: 0 1px 3px rgba(15, 61, 107, 0.06); } .bracket-match--final { border-color: var(--sport-accent, var(--dfl-brand, #1a5490)); box-shadow: 0 2px 8px rgba(15, 61, 107, 0.12); background: linear-gradient(180deg, color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)), var(--dfl-surface, #fff) 70%); } .bracket-team { display: flex; align-items: center; gap: 0.4rem; background: var(--dfl-surface-hover, #f9fbfd); border: 1px solid var(--dfl-border, #e5e7eb); border-radius: 6px; padding: 0.35rem 0.45rem; min-height: 2.1rem; } .bracket-team .team-logo { width: 1.35rem; height: 1.35rem; } .bracket-team.is-winner { border-color: var(--dfl-success, #15803d); background: var(--dfl-success-bg, #f0fdf4); box-shadow: inset 0 0 0 1px rgba(var(--dfl-success-rgb, 21, 128, 61), 0.15); } .bracket-team.is-tbd { color: var(--dfl-text-muted, #9ca3af); font-style: italic; background: var(--dfl-surface-hover, #fafafa); } .bracket-team__seed { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; border-radius: 4px; background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); font-size: 0.68rem; font-weight: 800; flex-shrink: 0; } .bracket-team__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } .bracket-team__name { font-size: 0.76rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bracket-team__owner { font-size: 0.62rem; font-weight: 500; color: var(--dfl-text-muted, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Below 900px the bracket's column count (7-9 across the 7 sports) no longer fits any phone width even at a legible min-width, so it switches from "shrink columns to fit" to "keep columns full-size and let .bracket-scroll's overflow-x:auto carry the excess" — same pattern as .dfl-draft-board-wrap/table.dfl-draft-board. flex:0 0 auto (not the desktop 1 1 0) stops columns from being shrunk by the flex-shrink algorithm, and bracket-tree's own width switches from 100%/max-100% to fit-content so it actually grows to the sum of its columns' widths instead of staying pinned to (and thus compressing everything into) the viewport width. .bracket-col--center is untouched — it's already flex:0 0 auto with its own min/max-width. */ @media (max-width: 900px) { .bracket-col--left, .bracket-col--right { flex: 0 0 auto; min-width: 9rem; padding: 0 0.75rem; } .bracket-tree { width: fit-content; max-width: none; justify-content: flex-start; } } .draft-clock-card { position: sticky; top: 4.75rem; /* stick below the persistent site header (dfl-header) so it remains visible when scrolling the draft board */ z-index: 30; padding: 0.5rem 0.85rem; margin-bottom: 0.75rem; } @media (max-width: 899px) { .draft-clock-card { top: 3.75rem; /* shorter mobile header */ } } .draft-clock-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; } .draft-clock-card__who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.65rem; flex: 1 1 16rem; min-width: 0; } .draft-clock-card__label { font-size: 0.82rem; font-weight: 800; color: var(--dfl-brand, #1a5490); text-transform: uppercase; letter-spacing: 0.04em; } .draft-clock-card__member { font-weight: 700; font-size: 0.9rem; } .draft-clock-card__status { flex: 1 1 12rem; min-width: 0; font-size: 0.82rem; } .draft-your-turn { color: var(--dfl-success, #15803d); font-weight: 700; } .draft-clock-card--yours { border: 2px solid var(--dfl-success, #15803d); box-shadow: 0 0 0 3px rgba(var(--dfl-success-rgb, 21, 128, 61), 0.15); } .draft-live-tag { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--dfl-warning-bg, #fef3c7); color: var(--dfl-warning-text, #92400e); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .dfl-draft-room { display: flex; flex-direction: column; gap: 1rem; } .dfl-draft-card__header { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.35rem; } .dfl-draft-card__header h2 { margin: 0; } .draft-clock-card__pick { font-size: 0.78rem; font-weight: 700; color: var(--dfl-brand-dark, #0f3d6b); } .draft-last-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-top: 0.4rem; padding: 0.45rem 0.5rem; border-top: 1px solid var(--dfl-border, #e5e7eb); border-left: 3px solid var(--sport-accent, var(--dfl-border-strong, #cbd5e1)); border-radius: 0 4px 4px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface, #fff)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)) 0%, var(--dfl-surface, #fff) 65%); font-size: 0.78rem; } .draft-last-pick .team-logo { width: 1.35rem; height: 1.35rem; flex-shrink: 0; } .draft-last-pick__label, .draft-last-pick__member { color: var(--dfl-text-muted, #4b5563); } .draft-last-pick__pick, .draft-last-pick__sport, .draft-last-pick__team, .draft-last-pick__proj { font-weight: 700; color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); } .dfl-draft-chart-picks-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; margin-bottom: 1rem; } /* Draft History — the Recent Picks table has 2 more columns than the live-draft list, needs more room. */ .dfl-draft-chart-picks-row--history { grid-template-columns: 3fr 2fr; } .dfl-draft-teams-wrap { overflow-x: auto; } /* min-width:0 overrides the grid item's automatic (content-based) minimum width — without it, the nested chart's `min-width: 40rem` (.draft-roster-chart below) bubbles up through this card and inflates the `.dfl-draft-chart-picks-row` grid track instead of staying contained, which defeats `.dfl-draft-chart-scroll`'s overflow-x:auto and widens the whole page on mobile instead of just scrolling the chart. */ .dfl-draft-roster-chart-card { margin-bottom: 0; min-width: 0; } .dfl-draft-chart-scroll { overflow-x: auto; } .dfl-draft-recent-card { display: flex; flex-direction: column; } .draft-roster-chart { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) minmax(5.5rem, 7rem); gap: 0.75rem 1rem; align-items: stretch; margin-top: 1.1rem; padding-top: 0.65rem; min-width: 40rem; } .draft-roster-chart__y-axis { position: relative; height: 15rem; /* Must match .draft-roster-chart__grid's bottom inset and .draft-roster-chart__bars' margin-bottom — all three define the same 0-baseline distance from the bottom edge. Sized to fit the member name overflowing below the 0-line, plus (in dual/ShowCurrent mode) the Draft/Curr sublabels row that now also overflows below rather than sitting inside the fixed-height bar. */ margin-bottom: 2.75rem; } .draft-roster-chart__y-tick { position: absolute; right: 0; transform: translateY(50%); font-size: 0.68rem; font-weight: 600; color: var(--dfl-text-muted, #6b7280); line-height: 1; } .draft-roster-chart__plot { position: relative; min-width: 0; } .draft-roster-chart__grid { position: absolute; inset: 0 0 2.75rem; pointer-events: none; } .draft-roster-chart__grid-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--dfl-border, #e5e7eb); } .draft-roster-chart__bars { position: relative; display: flex; align-items: stretch; gap: 0.35rem; height: 15rem; margin-bottom: 2.75rem; padding: 0 0.25rem; border-left: 1px solid var(--dfl-text-muted, #9ca3af); border-bottom: 1px solid var(--dfl-text-muted, #9ca3af); } .draft-roster-chart__column { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; } .draft-roster-chart__bar-area { position: relative; flex: none; width: 100%; height: 15rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .draft-roster-chart__total { position: absolute; top: -1.1rem; left: 50%; transform: translateX(-50%); font-size: 0.62rem; font-weight: 800; color: var(--dfl-brand-dark, #0f3d6b); white-space: nowrap; } .draft-roster-chart__stack { width: 72%; max-width: 3.25rem; min-width: 1.35rem; display: flex; flex-direction: column-reverse; justify-content: flex-start; border-radius: 3px 3px 0 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(15, 61, 107, 0.08); } .draft-roster-chart__segment { width: 100%; min-height: 1px; box-sizing: border-box; } .draft-roster-chart__member { margin-top: 0.35rem; font-size: 0.68rem; font-weight: 700; color: var(--dfl-brand-dark, #0f3d6b); text-align: center; line-height: 1.15; word-break: break-word; max-width: 100%; } .draft-roster-chart__legend { display: flex; flex-direction: column; gap: 0.35rem; padding-top: 0.15rem; } .draft-roster-chart__legend-item { display: flex; align-items: center; gap: 0.4rem; } .draft-roster-chart__legend-swatch { width: 0.85rem; height: 0.85rem; border-radius: 2px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(var(--dfl-shadow-rgb, 0, 0, 0), 0.12); } .draft-roster-chart__legend-label { font-size: 0.74rem; font-weight: 700; line-height: 1.1; } /* Draft History page — two bars (Draft/Curr) per member instead of one. Gap here is intentionally tighter than .draft-roster-chart__bars' inter-member gap (0.35rem) so the Draft/Curr pair reads as one person's grouped bars, not two more columns. */ .draft-roster-chart__bar-pair { display: flex; gap: 0.15rem; justify-content: center; width: 100%; height: 100%; } .draft-roster-chart--dual .draft-roster-chart__bar-area { width: auto; flex: 1; min-width: 0; } /* Sublabels live below .bar-pair (a sibling, not nested inside the fixed-height bar-area) so "Draft"/"Curr" overflow below the chart's 0-line the same way .draft-roster-chart__member does, instead of being packed against the zero line inside the bar's own box. Gap matches .bar-pair so each label centers under its own bar. */ .draft-roster-chart__bar-sublabels { display: flex; gap: 0.15rem; justify-content: center; width: 100%; margin-top: 0.2rem; } .draft-roster-chart__bar-sublabel { flex: 1; text-align: center; font-size: 0.55rem; font-weight: 700; color: var(--dfl-text-muted, #6b7280); white-space: nowrap; } @media (max-width: 900px) { .draft-roster-chart { grid-template-columns: 2.25rem minmax(0, 1fr); } .draft-roster-chart__legend { grid-column: 1 / -1; flex-flow: row wrap; gap: 0.5rem 0.85rem; } } table.dfl-draft-teams-sheet { table-layout: fixed; width: 100%; min-width: 40rem; } table.dfl-draft-teams-sheet th.draft-sport-section { text-align: center; background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); font-size: 0.82rem; font-weight: 800; border-bottom: 2px solid var(--sport-accent, var(--dfl-border-strong, #cbd5e1)); } /* Draft History Teams table — Team/Draft/Curr/+/- sub-header row under each sport's spanned header. Column widths themselves are set via in the markup (Team via .draft-teams-col-team below, 2rem each numeric col) — 7 sports * (4.5rem + 3 * 2rem) + 6.5rem sticky Member col ≈ 80rem — wide, but this table already scrolls horizontally (.dfl-draft-teams-wrap), same as the Draft Board further down. Team names here always render via TeamName's ForceAbbreviated (see DraftBoardCore.razor), so this column stays narrow at every viewport width — no responsive jump needed. */ table.dfl-draft-teams-sheet--history { min-width: 80rem; } /* Team width in the history table — always narrow since TeamName.razor's ForceAbbreviated keeps this column showing only the short abbreviation regardless of viewport width. */ .draft-teams-col-team { width: 4.5rem; } /* Draft Results by Sport table's Team column — wider than .draft-teams-col-team above since every entry here also carries a "#NN" pick-number prefix AND the drafting member's avatar ahead of the logo + abbreviated name, neither of which the Teams table's stacked slots have; at the narrower 4.5rem width only 1 of the 3 abbreviation letters stayed visible. Also always narrow — see .draft-teams-col-team's comment above. */ .draft-teams-col-team-picks { width: 8rem; } th.draft-sport-subhead { text-align: center; font-size: 0.65rem; font-weight: 700; border-bottom: 2px solid var(--sport-accent, var(--dfl-border-strong, #cbd5e1)); } /* Higher-specificity redeclare of background/color/padding, matching the `table.dfl-draft-teams-sheet th.draft-sport-section` pattern above — needed because the generic `table.dfl-draft-teams-sheet th, td { padding; }` rule further down this file (and `table.dfl-table th { background; color; }` near the top) both have higher specificity than a bare `.draft-sport-subhead` class selector and would otherwise silently win, leaving this row a flat default blue instead of each column's sport accent. Also shrinks the generic cell padding so the narrow numeric sub-columns below have room to fit "+123"/"-123" on one line. */ table.dfl-draft-teams-sheet th.draft-sport-subhead { background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); padding: 0.15rem 0.2rem; } /* Column widths themselves come from the / elements in the markup, not from these th's — table-layout:fixed is only required to size columns from the FIRST row, and row 1 here is the colspan="4" sport-name row (no per-column width to give it), so relying on row 2's widths is unreliable across browsers. width is unambiguous regardless of what's in either header row (this is why the Draft Board below, which has only one non-spanning header row, never needed this — its th widths alone were always enough). */ th.draft-sport-subhead--team { text-align: left; } /* Shifts "Team" right to start above the name text, not the logo — same logo-width + gap offset as .draft-roster-pick's logo (1.25rem) + gap (0.35rem). Needs the `table.dfl-draft-teams-sheet` prefix to beat th.draft-sport-subhead's own padding shorthand above, same specificity fight already documented on that rule. */ table.dfl-draft-teams-sheet th.draft-sport-subhead--team { padding-left: calc(0.2rem + 1.25rem + 0.35rem); } table.dfl-draft-teams-sheet .sticky-col, table.dfl-draft-board .sticky-col { position: sticky; left: 0; background: var(--dfl-surface, #fff); z-index: 2; box-shadow: 2px 0 4px rgba(15, 61, 107, 0.06); } table.dfl-draft-teams-sheet thead .sticky-col, table.dfl-draft-board thead .sticky-col { background: var(--dfl-surface-alt, #eef4f9); z-index: 3; } table.dfl-draft-teams-sheet .sticky-col { width: 6.5rem; } td.draft-teams-member-cell { vertical-align: middle; padding: 0.35rem 0.4rem; background: var(--dfl-surface-alt, #eef4f9); color: var(--dfl-brand-dark, #0f3d6b); } .draft-teams-member { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; min-width: 5.5rem; } .draft-teams-member .member-badge { --member-badge-size: 32px; } .draft-teams-member__name { font-size: 0.8rem; font-weight: 800; line-height: 1.2; text-align: center; white-space: normal; word-break: break-word; color: var(--dfl-brand-dark, #0f3d6b); } table.dfl-draft-teams-sheet th, table.dfl-draft-teams-sheet td { padding: 0.35rem 0.4rem; white-space: normal; } /* More defined horizontal separators between member rows */ table.dfl-draft-teams-sheet tbody tr:not(:last-child) td { border-bottom: 2px solid var(--dfl-text-muted, #64748b); } /* Draft Results by Sport table's rows are pick positions, not members — the Teams table's thicker member-row separator above reads as an unwanted line between every pick here, so switch it off. Needs the extra .dfl-draft-sport-picks-sheet class to outrank the rule above (0,3,4 vs 0,2,4). */ table.dfl-draft-teams-sheet.dfl-draft-sport-picks-sheet tbody tr:not(:last-child) td { border-bottom: none; } .draft-roster-sport { min-width: 0; font-size: 0.76rem; vertical-align: top; padding: 0.15rem 0.45rem; background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-hover, #f9fbfd)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-text, #1f2937))); } /* Draft History Teams table — column widths are actually driven by the sub-header row under table-layout:fixed (see th.draft-sport-subhead above); this just needs to win the specificity fight against the generic `table.dfl-draft-teams-sheet th, td { padding: 0.35rem 0.4rem; }` rule elsewhere in this file so the narrow Draft/Curr/+/- columns keep the tight padding needed to fit "+123"/"-123" on one line — a bare `.draft-roster-sport--value` class selector would lose that fight regardless of source order (lower specificity), same trap as th.draft-sport-subhead above. */ table.dfl-draft-teams-sheet td.draft-roster-sport--value { padding: 0.1rem 0.35rem 0.1rem 0.05rem; text-align: right; } /* Matches --value's top/bottom padding above (keeping wider 0.45rem horizontal for the logo+name content) — without this, the Team column's padding (from the base .draft-roster-sport rule) would sit lower than Draft/Curr/+/- per slot, since each sport's 4 columns are separate s each independently stacking one .draft-roster-pick div per slot, not a single shared row — a per-td padding mismatch throws off every slot's alignment identically. */ table.dfl-draft-teams-sheet td.draft-roster-sport--team { padding: 0.1rem 0.45rem; } /* Right-aligned (was center) — a flex row's justify-content:center only matches the MIDPOINT of each number across rows, so "5" and "123" share a center but not a ones-place digit position, which is what actually reads as "lined up" for a numeric column. flex-end anchors the ones-place digit to the same edge every row regardless of value width. */ .draft-roster-sport--value .draft-roster-pick { justify-content: flex-end; } .draft-roster-pick { display: flex; align-items: center; gap: 0.3rem; min-width: 0; min-height: 1.4rem; line-height: 1.1; padding: 0.05rem 0; border-bottom: 1px solid color-mix(in srgb, var(--sport-accent, var(--dfl-border-strong, #cbd5e1)) 18%, transparent); } .draft-roster-pick:last-child { border-bottom: none; } .draft-roster-pick.empty { min-height: 1.4rem; } .draft-roster-pick .team-logo { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } /* Single-line, truncated with an ellipsis rather than wrapping — keeps every slot's row at a fixed, minimal height so rows stay as tight as possible (deliberately NOT the Draft Board's 2-line .draft-cell__name clamp further down this page — tried here once already and reverted). */ .draft-roster-slot__name { flex: 1; min-width: 0; font-weight: 700; color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-text, #1f2937))); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .draft-roster-slot__proj { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); opacity: 0.9; } /* Draft History Teams table +/- column — sizing-only twin of .draft-roster-slot__proj (no `color`) so .score-positive/-negative/-inactive (defined earlier in this file) aren't overridden by a later same-specificity `color` rule. */ .draft-roster-slot__delta { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; } .dfl-draft-board-wrap { overflow-x: auto; } table.dfl-draft-board thead .sticky-col, table.dfl-draft-board .sticky-col.draft-board-round, .draft-board-round { text-align: center; width: 1.5rem; min-width: 1.5rem; max-width: 1.5rem; padding: 0.25rem 0.15rem; font-size: 0.72rem; line-height: 1.1; } .draft-board-round__dir { display: block; font-size: 0.58rem; color: var(--dfl-text-muted, #6b7280); line-height: 1; } tr.draft-board-round--current .sticky-col { background: var(--dfl-warning-bg, #fef3c7); } /* Draft Results by Sport table (DraftHistory.razor only) — reuses the Teams table's sport-header/ sub-header/roster-pick styling (table.dfl-draft-teams-sheet, --history modifier) since it's the same "sport columns x Team/Draft/Curr/+/-" shape, just rows-are-pick-position instead of rows-are-member. Needs its own modifier class to narrow the sticky column from the Teams table's 6.5rem (sized for a member name) down to fit a bare 1-30 row index — must combine with `table.dfl-draft-teams-sheet` to beat that rule's own specificity (0,2,1), which a bare class alone (0,1,0) would silently lose. */ table.dfl-draft-teams-sheet.dfl-draft-sport-picks-sheet .sticky-col { width: 2.25rem; text-align: center; } /* Fixed width + right-align so "#7" and "#123" both leave the avatar/logo/name that follow starting at the same x position — tabular-nums keeps digit widths consistent within that fixed box too. 1.9rem fits the widest case, "#210" (DraftConstants.MemberCount * Rounds). display:inline-block is required for width to take effect at all on a span, which is inline by default. */ .draft-pick-number { flex-shrink: 0; display: inline-block; width: 1.9rem; text-align: right; font-variant-numeric: tabular-nums; font-size: 0.68rem; font-weight: 800; color: var(--dfl-text-muted, #6b7280); } .draft-cell__pick { display: block; font-size: 0.7rem; font-weight: 800; text-align: center; color: var(--dfl-text-muted, #6b7280); line-height: 1.15; } .draft-cell__proj { display: block; font-size: 0.58rem; font-weight: 700; color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); line-height: 1; opacity: 0.9; flex-shrink: 0; text-align: right; } /* Draft History Draft Board only (scoped to .draft-cell__team--history, set alongside ShowHistoryColumns — never touches the live/non-history Draft page, which reuses the same .draft-cell__proj class for its single always-shown proj value). Curr is the prominent one here since the live/current number is the more relevant one to read at a glance post-draft; Draft (the .draft-cell__proj span with no --curr modifier) is the muted one. .draft-cell__delta is a sizing-only twin of .draft-cell__proj (no `color`) so .score-positive/-negative/-inactive (defined earlier in this file) aren't overridden by a later same-specificity `color` rule. */ .draft-cell__team--history .draft-cell__proj:not(.draft-cell__proj--curr) { opacity: 0.65; } .draft-cell__team--history .draft-cell__proj--curr { opacity: 1; } .draft-cell__delta { display: block; font-size: 0.58rem; font-weight: 700; line-height: 1; flex-shrink: 0; text-align: right; } td.draft-cell.draft-cell--next { box-shadow: inset 0 0 0 2px var(--dfl-warning, #d97706); background: var(--dfl-warning-bg, #fffbeb); } /* Wraps the header + list together so one scrollbar covers both (matching .draft-recent-table-wrap below) — the sticky header then scrolls in lockstep with the rows under it instead of the list having its own separate, narrower-by-a-scrollbar-width scroll area that throws off column alignment under the header. */ .draft-recent-list-wrap { max-height: 34vh; overflow-y: auto; flex: 1; } .draft-recent-list__header { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: 2.5rem 1.4rem minmax(0, 1fr) auto; gap: 0.2rem 0.45rem; padding: 0.35rem 0.4rem; background: var(--dfl-surface-alt, #eef4f9); font-size: 0.68rem; font-weight: 700; white-space: nowrap; } .draft-recent-list { list-style: none; margin: 0; padding: 0; } .draft-recent-item { display: grid; grid-template-columns: 2.5rem 1.4rem minmax(0, 1fr) auto; gap: 0.2rem 0.45rem; align-items: start; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--dfl-border, #e5e7eb); font-size: 0.8rem; border-left: 3px solid var(--sport-accent, var(--dfl-border-strong, #cbd5e1)); background: linear-gradient(90deg, color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface, #fff)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)) 0%, var(--dfl-surface, #fff) 60%); } .draft-recent-item .team-logo { width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; } .draft-recent-item__pick { font-weight: 900; font-size: 0.76rem; color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); line-height: 1.15; align-self: center; } .draft-recent-item__body { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.2; } .draft-recent-item__player { font-weight: 700; white-space: normal; word-break: break-word; } .draft-recent-item__team { color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); font-size: 0.76rem; font-weight: 700; white-space: normal; word-break: break-word; } .draft-recent-item__proj { font-weight: 700; font-size: 0.76rem; color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); padding-left: 0.15rem; align-self: center; } /* Draft History Recent Picks — headered table (Pick/Team/Draft/Curr/+/-) replacing the plain
    . */ .draft-recent-table-wrap { max-height: 34vh; overflow-y: auto; flex: 1; } table.draft-recent-table { width: 100%; font-size: 0.78rem; } table.draft-recent-table th { position: sticky; top: 0; background: var(--dfl-surface-alt, #eef4f9); font-size: 0.68rem; font-weight: 700; white-space: nowrap; z-index: 1; } /* Background lives on the row (not each td) so it's one continuous gradient across Pick+Team, matching the single-gradient
  1. row in the pre/live-draft list — putting it on every td instead restarts the gradient per cell, which reads as duplicated/tiled backgrounds. The accent stripe stays on the first cell only, since a border on isn't reliably rendered. */ table.draft-recent-table tr { background: linear-gradient(90deg, color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface, #fff)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)) 0%, var(--dfl-surface, #fff) 60%); } table.draft-recent-table td { padding: 0.35rem 0.4rem; } table.draft-recent-table td:first-child { border-left: 3px solid var(--sport-accent, var(--dfl-border-strong, #cbd5e1)); } .draft-recent-table__pick { font-weight: 900; color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); white-space: nowrap; } /* Draft/Curr/+/- numeric cells — bold like the pre-draft .draft-recent-item__proj; --accent supplies the sport-color text for Draft/Curr, but +/- keeps its .score-positive/-negative color (applied via DeltaClass in the razor) instead of --accent. Right-aligned (not the `col-center` class also on these s, which never fires here — that rule is scoped to table.dfl-draft-pool-table, a class this table doesn't carry) so digits line up by place value instead of by left edge, which otherwise makes different-length numbers look randomly offset down the column. */ .draft-recent-table__num { font-weight: 700; text-align: right; } .draft-recent-table__num--accent { color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); } .draft-recent-table__team { display: flex; align-items: center; gap: 0.35rem; } /* This table has no colgroup/fixed layout — Team is the one flexible column among four narrow numeric ones (Pick/Draft/Curr/+/-), so it naturally claims most of the row. Player/team text already wraps (.draft-recent-item__player/__team are white-space:normal), so capping max-width below the TeamName.razor abbreviation breakpoint just tightens the column instead of truncating anything. */ @media (max-width: 1900px) { table.draft-recent-table td.draft-recent-table__team { max-width: 50%; } } .draft-recent-table__team .team-logo { width: 1.3rem; height: 1.3rem; flex-shrink: 0; } .dfl-draft-pool-card .dfl-table-wrap { overflow-y: auto; max-height: 60vh; } /* Draft-pool table styling below is scoped to table.dfl-draft-pool-table + tr.draft-pool-row — any new table reusing this look needs BOTH classes or it renders unstyled. */ table.dfl-draft-pool-table th { white-space: nowrap; font-size: 0.72rem; position: sticky; top: 0; z-index: 20; background: var(--dfl-surface-alt, #eef4f9); } table.dfl-draft-pool-table th.col-center, table.dfl-draft-pool-table td.col-center, table.dfl-draft-pool-table th.hist-score-col, table.dfl-draft-pool-table td.hist-score-col { text-align: center; } table.dfl-draft-pool-table tr.draft-pool-row td { background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-hover, #f9fbfd)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); font-weight: 600; } table.dfl-draft-pool-table th.col-team { white-space: nowrap; } /* Post-draft-only "Pick" column (round-position label + drafting member) — see _room.IsComplete gate in DraftBoardCore.razor. */ table.dfl-draft-pool-table .draft-pool-pick-cell { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.2; white-space: nowrap; } table.dfl-draft-pool-table .draft-pool-pick-cell__label { font-weight: 900; } table.dfl-draft-pool-table .draft-pool-pick-cell__by { font-weight: 600; color: var(--dfl-text, #374151); } /* Override global display:flex on .team-name-cell — puts flex layout inside a block child div so the td behaves as a normal table-cell. The inner div naturally sizes to its content; strong gets flex:1 so the name fills all available space and truncates with ellipsis. */ table.dfl-draft-pool-table td.team-name-cell { display: table-cell; vertical-align: middle; } table.dfl-draft-pool-table .team-name-inner { display: flex; align-items: center; gap: 0.35rem; overflow: hidden; white-space: nowrap; } table.dfl-draft-pool-table .team-name-inner strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); } table.dfl-draft-pool-table .draft-sport-badge { flex-shrink: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.1em 0.4em; border-radius: 3px; background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #e8f0f8)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); border: 1px solid color-mix(in srgb, var(--sport-accent, var(--dfl-brand-dark, #0f3d6b)) 25%, transparent); white-space: nowrap; } table.dfl-draft-pool-table th.col-team .team-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; } table.dfl-draft-pool-table th .draft-sport-badge--header { background: transparent; color: var(--dfl-text-muted, #5a7080); border-color: var(--dfl-border-strong, #b0c4d4); } table.dfl-draft-pool-table td.draft-division-cell { font-size: 0.72rem; white-space: nowrap; } table.dfl-draft-pool-table td.draft-division-cell img.conf-logo { display: block; margin: 0 auto; object-fit: contain; } table.dfl-draft-pool-table tr.draft-pool-row:hover td { background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-hover, #f9fbfd)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); filter: brightness(0.96); } table.dfl-draft-pool-table tr.draft-pool-row--drafted td { opacity: 0.38; } table.dfl-draft-pool-table tr.draft-pool-row--drafted:hover td { filter: none; } table.dfl-draft-board tr:hover td.draft-cell.filled { background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-hover, #f9fbfd)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-text, #1f2937))); } table.dfl-draft-teams-sheet tr:hover td.draft-roster-sport { background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-hover, #f9fbfd)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-text, #1f2937))); } @media (max-width: 1100px) { .dfl-draft-chart-picks-row { grid-template-columns: 1fr; } .draft-recent-list { max-height: 16rem; } } /* min-width is the floor this table won't shrink below on narrow/mobile viewports — width:100% lets it fill wider containers past that floor. Raised from 40rem so member/pick columns stay legible on phones instead of being squeezed to viewport width; .dfl-draft-board-wrap's overflow-x:auto handles the resulting horizontal scroll. */ table.dfl-draft-board { table-layout: fixed; width: 100%; min-width: 100rem; } table.dfl-draft-board th, table.dfl-draft-board td { padding: 0.35rem 0.4rem; white-space: normal; } table.dfl-draft-board th.member-col { text-align: center; min-width: 6.5rem; background: var(--dfl-surface-alt, #eef4f9); color: var(--dfl-brand-dark, #0f3d6b); vertical-align: bottom; padding: 0.4rem 0.35rem; } table.dfl-draft-board th.member-col .member-badge { flex-direction: column; gap: 0.25rem; justify-content: center; margin: 0 auto; } table.dfl-draft-board th.member-col .member-badge { --member-badge-size: 34px; } table.dfl-draft-board th.member-col .member-badge__name { display: block; font-size: 0.76rem; font-weight: 800; line-height: 1.15; text-align: center; white-space: normal; word-break: break-word; max-width: 100%; color: var(--dfl-brand-dark, #0f3d6b); } table.dfl-draft-board th.member-col.on-clock, table.dfl-draft-board td.draft-cell.on-clock { box-shadow: inset 0 0 0 2px var(--dfl-success, #15803d); } table.dfl-draft-board td.draft-cell { min-width: 5.5rem; vertical-align: middle; text-align: left; font-size: 0.76rem; padding: 0.25rem 0.3rem; overflow: visible; } table.dfl-draft-board td.draft-cell.filled { background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-hover, #f9fbfd)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-text, #1f2937))); } .draft-cell__team { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; } .draft-cell__team--compact { flex-direction: row; align-items: center; justify-content: space-between; } /* text-align: right (was left) restores the base .draft-cell__proj/.draft-cell__delta intent (see those rules above) that this higher-specificity override was accidentally cancelling. min-width gives each number a fixed-width box to right-align within — without it, a span sized to its own content has no slack for text-align to do anything, and packed flex siblings of varying content width (Draft/Curr/+/- can each be 1-5 characters) drift out of column regardless of text-align. */ .draft-cell__team--compact .draft-cell__proj, .draft-cell__team--compact .draft-cell__delta { font-size: inherit; gap: 0.25rem; text-align: right; min-width: 2.4em; } .draft-cell__logo-col { display: flex; flex-direction: column; align-items: center; gap: 0.08rem; flex-shrink: 0; width: 1.35rem; } .draft-cell__team--compact .team-logo { width: 1.25rem; height: 1.25rem; margin-top: 0; flex-shrink: 0; } .draft-cell__name { flex: 1; min-width: 0; font-weight: 700; line-height: 1.15; text-align: left; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-word; color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-text, #1f2937))); } .draft-cell__sport { font-size: 0.62rem; color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-text-muted, #6b7280))); font-weight: 700; } table.dfl-draft-board.stoch-roster-board td.draft-cell { min-width: 7rem; } .stoch-total-row td { border-top: 2px solid var(--dfl-border-strong, #cbd5e1); background: var(--dfl-surface-hover, #f8fafc); } .stoch-cell__stats { display: flex; flex-direction: column; gap: 0.05rem; margin-top: 0.2rem; font-size: 0.68rem; line-height: 1.2; } .stoch-cell__stat { display: block; } .draft-sport-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.65rem 0 0.85rem; } .draft-sport-pill { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); font-size: 0.72rem; font-weight: 700; border: 1px solid transparent; cursor: pointer; } .draft-sport-pill.active { border-color: var(--sport-accent, var(--dfl-brand-dark, #0f3d6b)); box-shadow: 0 0 0 1px var(--sport-accent, var(--dfl-brand-dark, #0f3d6b)); } /* Fixed brand-blue fill in both themes — see .dfl-standings-hero's comment for why. */ .draft-pick-btn, .draft-link-btn { display: inline-block; border: none; border-radius: 6px; background: #1a5490; color: var(--dfl-on-brand, #fff); font-size: 0.82rem; font-weight: 700; padding: 0.45rem 0.85rem; cursor: pointer; text-decoration: none; } .draft-pick-btn:hover, .draft-link-btn:hover { filter: brightness(1.08); } .draft-pick-btn:disabled { opacity: 0.5; cursor: not-allowed; } .draft-pick-btn.warn { background: var(--dfl-danger, #9a3412); } .commissioner-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } td .commissioner-actions { margin-top: 0; } .draft-pick-btn.small { padding: 0.3rem 0.55rem; font-size: 0.75rem; } .bonus-rank-list { list-style: none; padding: 0; margin: 1rem 0; } .bonus-rank-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0; border-bottom: 1px solid #e8edf2; } .bonus-rank-num { font-weight: 700; color: var(--dfl-brand, #1a5490); min-width: 1.5rem; } .bonus-rank-team { flex: 1; } /* ── Summary sheet (points model) ── */ .summary-sheet { display: flex; flex-direction: column; gap: 1rem; } /* Fixed gradient in both themes — see .dfl-standings-hero's comment above for why. */ .summary-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; padding: 1.35rem 1.5rem; border-radius: 12px; background: linear-gradient(135deg, #0f3d6b 0%, #1a5490 42%, #0d9488 100%); color: var(--dfl-on-brand, #fff); box-shadow: 0 8px 28px rgba(15, 61, 107, 0.28); } .summary-hero__eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.88; } .summary-hero__title { margin: 0.2rem 0 0; font-size: 1.75rem; color: var(--dfl-on-brand, #fff); line-height: 1.15; } .summary-hero__season { margin: 0.35rem 0 0; font-size: 0.9rem; opacity: 0.9; } .summary-hero__stats { display: flex; flex-wrap: wrap; gap: 0.55rem; } .summary-stat { display: flex; flex-direction: column; align-items: center; min-width: 4.75rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(4px); } .summary-stat__value { font-size: 1.05rem; font-weight: 800; line-height: 1.1; } .summary-stat__label { margin-top: 0.15rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.85; } .summary-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; } .summary-card__header { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.65rem; } .summary-card__header h2 { margin: 0; font-size: 1.1rem; } .summary-card__lead { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--dfl-text-muted, #4b5563); } .summary-card--matrix { border-top: 4px solid var(--dfl-brand, #1a5490); } .summary-card--payouts { border-top: 4px solid var(--dfl-success-strong, #14532d); } .summary-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-height: none; width: 100%; } .summary-matrix { width: max-content; min-width: 100%; font-size: 0.85rem; } .summary-matrix__corner { min-width: 9.5rem; background: var(--dfl-surface, #fff); border-right: 2px solid var(--dfl-border, #e5e7eb); } .summary-matrix__logo-row th { padding: 0.65rem 0.35rem 0.25rem; vertical-align: bottom; } .summary-matrix__sport-head { text-align: center; vertical-align: middle; background: color-mix(in srgb, var(--sport-accent-soft, var(--dfl-surface-alt, #eef4f9)) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); border-bottom: 3px solid var(--sport-accent, var(--dfl-brand, #1a5490)); min-width: 7.25rem; padding-left: 0.5rem; padding-right: 0.5rem; } .summary-matrix__sport-head .sport-logo { display: block; margin: 0 auto; object-fit: contain; max-height: 44px; width: auto; } .summary-matrix__label { text-align: left; font-weight: 700; color: var(--dfl-brand-dark, #0f3d6b); background: var(--dfl-surface-hover, #f8fafc); border-right: 2px solid var(--dfl-border, #e5e7eb); white-space: nowrap; } .summary-matrix__label.summary-matrix__sub { font-weight: 600; color: var(--dfl-text-muted, #4b5563); font-size: 0.74rem; padding-left: 1.35rem; } .summary-matrix__tier-label { display: flex; align-items: center; gap: 0.4rem; } /* Fixed brand-blue fill in both themes — see .dfl-standings-hero's comment for why. */ .summary-tier-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.65rem; padding: 0.1rem 0.3rem; border-radius: 999px; background: #1a5490; color: var(--dfl-on-brand, #fff); font-size: 0.62rem; font-weight: 800; } .summary-matrix__value, .summary-matrix__tier-name, .summary-matrix__money, .summary-matrix__pts { text-align: center; background: color-mix(in srgb, var(--sport-accent-soft, transparent) var(--dfl-tint-mix, 100%), var(--dfl-surface, #fff)); } table.dfl-table.summary-matrix th.summary-matrix__sport-head, table.dfl-table.summary-matrix td.summary-matrix__value, table.dfl-table.summary-matrix td.summary-matrix__tier-name, table.dfl-table.summary-matrix td.summary-matrix__money, table.dfl-table.summary-matrix td.summary-matrix__pts { text-align: center; } table.dfl-table.summary-matrix th.summary-matrix__label, table.dfl-table.summary-matrix th.summary-matrix__corner { text-align: left; } .summary-matrix__tier-name { font-weight: 600; font-size: 0.74rem; color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); line-height: 1.25; } .summary-matrix__pts { font-weight: 800; color: color-mix(in srgb, white var(--dfl-accent-text-mix, 0%), var(--sport-accent, var(--dfl-brand-dark, #0f3d6b))); } .summary-matrix__money { font-weight: 700; color: var(--dfl-success-strong, #14532d); } /* Deep muted navy in dark mode — see --dfl-table-header-bg's comment above for why. */ .summary-section-row th { text-align: left; background: var(--dfl-table-header-bg, #1a5490); color: var(--dfl-on-brand, #fff); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.45rem 0.75rem; } .summary-tier-block--6 td, .summary-tier-block--6 th.summary-matrix__label { border-top: 2px solid var(--dfl-border, #e5e7eb); } .summary-tier-block--last td, .summary-tier-block--last th { border-bottom: 1px solid #e8edf2; } .summary-matrix__max { font-weight: 800; font-size: 0.9rem; } .dfl-modal-backdrop { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 61, 107, 0.55); backdrop-filter: blur(3px); } .dfl-modal { width: min(28rem, 100%); padding: 1.25rem 1.35rem; border-radius: 12px; background: var(--dfl-surface, #fff); box-shadow: 0 16px 48px rgba(15, 61, 107, 0.28); } .dfl-modal__title { margin: 0 0 0.65rem; font-size: 1.15rem; color: var(--dfl-brand-dark, #0f3d6b); } .dfl-modal__body { margin: 0 0 1rem; color: var(--dfl-text-muted, #4b5563); line-height: 1.45; } .dfl-modal__actions { display: flex; justify-content: flex-end; gap: 0.55rem; flex-wrap: wrap; } .dfl-briefing-modal { width: min(42rem, 100%); max-height: 85vh; display: flex; flex-direction: column; } .dfl-briefing-modal__body { overflow-y: auto; margin: 0 0 1rem; color: var(--dfl-text, #1f2937); line-height: 1.5; } .dfl-briefing-modal__body table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.9rem; } .dfl-briefing-modal__body th, .dfl-briefing-modal__body td { border: 1px solid var(--dfl-border-strong, #d1d5db); padding: 0.35rem 0.6rem; text-align: left; } .dfl-briefing-modal__body th { background: var(--dfl-surface-hover, #f3f4f6); } .summary-rank-table__rank { font-weight: 800; color: var(--dfl-brand-dark, #0f3d6b); } .summary-rank-table__pro { background: var(--dfl-info-bg, #e8f0fa); color: var(--dfl-info-text, #003e7e); } .summary-rank-table__college { background: var(--dfl-success-bg, #d8ede4); color: var(--dfl-success-strong, #1b4332); } .summary-rank-table tbody tr:nth-child(even) td { background: var(--dfl-surface-hover, #fafbfc); } .summary-rank-table tbody tr:nth-child(even) td.summary-rank-table__rank { background: var(--dfl-surface-hover, #f3f6f9); } .summary-footnote { margin: 0.65rem 0 0; font-size: 0.75rem; color: var(--dfl-text-muted, #6b7280); } .summary-payout-grid { display: flex; flex-direction: column; gap: 0.85rem; } .summary-payout-block h3 { margin: 0 0 0.45rem; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dfl-brand-dark, #0f3d6b); } .summary-payout-list { list-style: none; margin: 0; padding: 0; } .summary-payout-list li { list-style: none; } .summary-payout-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.5rem 0.65rem; border-radius: 8px; background: var(--dfl-surface-hover, #f8fafc); border: 1px solid #eef2f6; font-size: 0.82rem; } .summary-payout-row + .summary-payout-row { margin-top: 0.35rem; } .summary-payout-row span { color: var(--dfl-text-muted, #4b5563); } .summary-payout-row strong { min-width: 4.5rem; text-align: right; color: var(--dfl-success-strong, #14532d); font-weight: 800; font-size: 0.95rem; } .summary-payout-total { display: flex; justify-content: space-between; align-items: center; margin-top: 0.45rem; padding: 0.5rem 0.65rem; border-radius: 8px; background: var(--dfl-success-bg, #ecfdf5); font-size: 0.82rem; font-weight: 700; } .summary-payout-total strong { color: var(--dfl-success-strong, #14532d); font-size: 0.95rem; } .summary-payout-block--accent { padding: 0.65rem 0.75rem; border-radius: 8px; background: linear-gradient(135deg, var(--dfl-warning-bg, #fffbeb), var(--dfl-warning-bg, #fef3c7)); border: 1px solid var(--dfl-warning, #fde68a); } .sport-logo { display: block; object-fit: contain; max-width: 100%; height: auto; } @media (max-width: 900px) { .summary-bottom { grid-template-columns: 1fr; } } @media (max-width: 720px) { .summary-hero__title { font-size: 1.35rem; } .summary-matrix { font-size: 0.8rem; } .summary-matrix__sport-head { min-width: 5.75rem; } } .dfl-chat { position: fixed; right: 1rem; bottom: 1rem; z-index: 1200; display: flex; flex-direction: column; align-items: flex-end; gap: 0.65rem; } /* Fixed gradient in both themes — see .dfl-standings-hero's comment above for why. */ .dfl-chat__toggle { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.9rem; border: none; border-radius: 999px; background: linear-gradient(135deg, #0f3d6b, #1a5490); color: var(--dfl-on-brand, #fff); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 8px 24px rgba(15, 61, 107, 0.35); } .dfl-chat__toggle:hover { filter: brightness(1.06); } .dfl-chat__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 999px; background: var(--dfl-danger, #dc2626); color: var(--dfl-on-brand, #fff); font-size: 0.68rem; font-weight: 800; } .dfl-chat__online-badge { display: inline-flex; align-items: center; gap: 0.3rem; height: 1.25rem; padding: 0 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.85); font-size: 0.68rem; font-weight: 600; } .dfl-chat__online-badge::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 999px; background: var(--dfl-success, #22c55e); flex-shrink: 0; } .dfl-chat__unread-indicators { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.45rem; max-width: min(22rem, calc(100vw - 2rem)); } .dfl-chat__unread-sender { position: relative; flex: 0 0 auto; } .dfl-chat__unread-sender-badge { position: absolute; top: -0.3rem; right: -0.3rem; display: inline-flex; align-items: center; justify-content: center; min-width: 1.05rem; height: 1.05rem; padding: 0 0.2rem; border-radius: 999px; background: var(--dfl-danger, #dc2626); color: var(--dfl-on-brand, #fff); font-size: 0.62rem; font-weight: 800; border: 2px solid var(--dfl-surface, #fff); box-shadow: 0 2px 6px rgba(15, 61, 107, 0.25); } .dfl-chat__panel { width: min(22rem, calc(100vw - 2rem)); height: min(28rem, calc(100vh - 6rem)); display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--dfl-surface, #fff); border: 1px solid #d7e0ea; box-shadow: 0 16px 40px rgba(15, 61, 107, 0.28); } /* Kept in the DOM while chat is minimized — see LeagueChatPanel.razor's comment on why (a live video call's