:root {
/* Deep aubergine base with burnished gold accents — velvet-rope sportsbook feel */
--bg: #120a18; /* deep aubergine — darker, richer */
--bg-elev: #1c1224; /* first elevation */
--bg-elev-2: #241830; /* card surface */
--bg-lift: #2e1f3d; /* hover surface */
--bg-glass: rgba(28, 18, 36, 0.7);
--border: #3d2a4d; /* warmer border */
--border-soft: #251734;
--border-hover: #553a6b;
--text: #f5ede4; /* warm ivory — no lavender tint */
--text-muted: #9d8ca8; /* warm muted plum-gray */
--text-dim: #5e4c6b; /* deeper muted */
--accent: #d4a84b; /* burnished gold — richer, deeper */
--accent-soft: #e0bb6a; /* hover */
--accent-deep: #a8842f; /* pressed */
--accent-2: #a04050; /* burgundy / oxblood */
--accent-2-soft: #b85565;
--warn: #d48c4a; /* rich amber */
--danger: #c24a5a; /* deep garnet */
--success: #7fa878; /* muted sage */
/* Position colors — deeper and more saturated */
--qb: #c24a5a; /* deep garnet */
--rb: #7fa878; /* muted sage */
--wr: #6090b8; /* steel blue */
--te: #d4a84b; /* gold (matches accent) */
--pick: #a080c0; /* richer lavender */
/* Effects */
--glow: 0 0 28px rgba(212, 168, 75, 0.3);
--glow-2: 0 0 28px rgba(160, 64, 80, 0.22);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.3);
--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
/* Radii */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
--r-full: 999px;
/* Transitions */
--ease: cubic-bezier(0.32, 0.72, 0, 1);
/* === Phase A: unified design tokens for the redesign pass ===
* Page-level density: every primary card uses panel-padding with consistent
* inner spacing. New tokens give the redesigned pages the same breathing
* room as the All Leagues cards Owen called out as the visual reference.
*/
--panel-pad: 22px; /* matches league-card padding — primary surface */
--panel-pad-tight: 16px; /* secondary surfaces (sub-panels inside panels) */
--panel-gap: 14px; /* between sibling panels in a column */
--stat-gap: 18px; /* between stat blocks inside a panel */
--num-feature: 'tnum' 1, 'lnum' 1; /* tabular numerals for stat consistency */
/* === UI refresh (June 2026) — layout & surface system === */
/* App views use full viewport width on desktop; landing keeps its own max-width */
--app-pad-x: clamp(24px, 3vw, 48px);
--surface-top: rgba(255, 255, 255, 0.06);
--surface-card: linear-gradient(165deg, rgba(46, 31, 61, 0.45) 0%, rgba(28, 18, 36, 0.92) 55%, rgba(18, 10, 24, 0.98) 100%);
--surface-card-hover: linear-gradient(165deg, rgba(58, 40, 74, 0.55) 0%, rgba(36, 24, 48, 0.95) 55%, rgba(22, 14, 30, 1) 100%);
--chrome-glass: rgba(18, 10, 24, 0.82);
--focus-ring: 0 0 0 3px rgba(212, 168, 75, 0.22);
}
/* === Phase A: reusable section pattern ===
* Every "spruced" page section uses .section-card. Replaces the dozen
* one-off card classes that drift visually over time. Hover lift matches
* .league-card pattern for consistency. */
.section-card {
background: var(--surface-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: var(--panel-pad);
box-shadow: var(--shadow-sm);
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.section-card.interactive { cursor: pointer; }
.section-card.interactive:hover {
background: var(--surface-card-hover);
border-color: var(--border-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.section-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-soft);
}
.section-card-title {
font-family: 'Fraunces', serif;
font-weight: 500;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--text);
}
.section-card-title em {
font-style: italic;
color: var(--accent);
}
.section-card-sub {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}
.section-card-sub.save-pulse {
color: var(--accent);
transition: color 0.2s var(--ease);
}
/* Per-league notes textarea — free-text scratchpad persisted in localStorage */
.league-notes-card { margin-top: 16px; }
.league-notes-input {
width: 100%;
min-height: 92px;
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
color: var(--text);
font-family: inherit;
font-size: 13px;
line-height: 1.55;
resize: vertical;
transition: border-color 0.12s var(--ease);
}
.league-notes-input:focus {
outline: none;
border-color: var(--accent);
background: var(--bg-elev-2);
}
.league-notes-input::placeholder {
color: var(--text-dim);
font-style: italic;
}
/* Stat blocks — used for portfolio totals, league stats headers, owner
* profile records, etc. Vertical pairs of (large number / small label). */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: var(--stat-gap);
}
.stat-block {
display: flex;
flex-direction: column;
gap: 2px;
}
.stat-block-num {
font-family: 'Fraunces', serif;
font-weight: 500;
font-size: 26px;
line-height: 1.1;
color: var(--text);
font-feature-settings: var(--num-feature);
letter-spacing: -0.01em;
}
.stat-block-num.accent { color: var(--accent); }
.stat-block-num.muted { color: var(--text-muted); }
.stat-block-denom {
font-size: 14px;
color: var(--text-dim);
font-weight: 400;
margin-left: 2px;
}
/* Portfolio Standing — compact horizontal stat row. Four cells fit on one
* line within the snapshot tile, no wrap to second row. Number above its
* short label; cells separated by natural gap. */
.ps-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.ps-cell {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.ps-num {
font-family: 'Fraunces', serif;
font-weight: 500;
font-size: 22px;
color: var(--text);
font-feature-settings: var(--num-feature);
letter-spacing: -0.01em;
}
.ps-num.accent { color: var(--accent); }
.ps-num.muted { color: var(--text-muted); }
.ps-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
margin-top: 2px;
}
.stat-block-label {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
}
.stat-block-sub {
font-family: 'Roboto Mono', monospace;
font-size: 11px;
color: var(--text-muted);
margin-top: 1px;
}
@media (max-width: 700px) {
.stat-grid { gap: 12px; }
.stat-block-num { font-size: 22px; }
}
/* Common empty state for any panel that has no data. Replaces the various
* grey "no items" boxes scattered across the file with one consistent look. */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 40px 24px;
text-align: center;
color: var(--text-dim);
}
.empty-state-icon {
font-size: 24px;
opacity: 0.5;
}
.empty-state-title {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 16px;
color: var(--text-muted);
}
.empty-state-sub {
font-size: 12px;
color: var(--text-dim);
max-width: 360px;
line-height: 1.55;
}
/* Player silhouette — fallback when player photo is missing. Used in
* Picks & Draft tab where rookies don't have headshots yet. */
.player-silhouette {
width: 100%;
height: 100%;
background:
radial-gradient(circle at 50% 35%, var(--text-dim) 0 8px, transparent 10px),
radial-gradient(ellipse at 50% 78%, var(--text-dim) 0 14px, transparent 18px);
background-color: var(--bg-elev-2);
opacity: 0.4;
}
/* Live-status pulse — used for "Drafting now" badge later. Defined now
* so the CSS exists when Phase 2 lights up. */
@keyframes taco-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.live-pulse {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--success);
animation: taco-pulse 1.5s ease-in-out infinite;
margin-right: 6px;
vertical-align: middle;
}
/* === Phase C3: position section header — section-card pattern + stat strip === */
.pos-section { padding: 0 !important; overflow: hidden; }
.pos-section-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px var(--panel-pad);
background: var(--bg-elev-2);
border-bottom: 1px solid var(--border-soft);
gap: 16px;
}
.pos-section-title {
font-family: 'Fraunces', serif;
font-size: 16px;
font-weight: 500;
color: var(--text);
letter-spacing: -0.01em;
}
.pos-section-sub {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
.pos-section-stats {
display: flex;
gap: 18px;
align-items: center;
}
.pos-stat { text-align: right; }
.pos-stat-num {
font-family: 'Fraunces', serif;
font-weight: 500;
font-size: 18px;
color: var(--text);
font-feature-settings: var(--num-feature);
letter-spacing: -0.01em;
}
.pos-stat-lbl {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
margin-top: 1px;
}
@media (max-width: 700px) {
.pos-section-head { padding: 12px 14px; gap: 8px; }
.pos-section-stats { gap: 12px; }
.pos-stat-num { font-size: 15px; }
}
.news-tab-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.news-tab-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px;
background: var(--bg);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
text-decoration: none;
color: inherit;
transition: border-color 0.12s var(--ease), background 0.12s var(--ease);
}
.news-tab-row:hover {
border-color: var(--accent);
background: var(--bg-elev-2);
}
.news-tab-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--r-full);
background: var(--bg-elev);
border: 1px solid var(--border-soft);
font-size: 11px;
font-weight: 600;
color: var(--text);
flex-shrink: 0;
margin-top: 2px;
cursor: pointer;
transition: border-color 0.12s var(--ease);
}
.news-tab-pill:hover { border-color: var(--accent); }
.news-tab-pill-pos {
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
padding: 2px 5px;
border-radius: var(--r-sm);
background: var(--bg-lift);
}
.news-tab-pill.qb .news-tab-pill-pos { background: rgba(194, 74, 90, 0.2); color: var(--qb); }
.news-tab-pill.rb .news-tab-pill-pos { background: rgba(127, 168, 120, 0.2); color: var(--rb); }
.news-tab-pill.wr .news-tab-pill-pos { background: rgba(96, 144, 184, 0.2); color: var(--wr); }
.news-tab-pill.te .news-tab-pill-pos { background: rgba(212, 168, 75, 0.2); color: var(--te); }
.news-tab-pill-name { color: var(--text); white-space: nowrap; }
.news-tab-body { flex: 1; min-width: 0; }
.news-tab-title { font-size: 14px; color: var(--text); line-height: 1.4; margin-bottom: 2px; }
.news-tab-meta { font-family: 'Roboto Mono', monospace; font-size: 10px; color: var(--text-dim); }
@media (max-width: 700px) {
.news-tab-row { padding: 10px; gap: 8px; }
.news-tab-pill { font-size: 10px; padding: 3px 8px; }
.news-tab-title { font-size: 13px; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
/* Lock the viewport horizontally. Without overflow-x: hidden on html,
Chrome on Android lets the entire page pan side-to-side when any
inner element (sub-nav tab strip, wide table) exceeds viewport width.
Both html AND body need it to fully block the gesture. */
overflow-x: hidden;
width: 100%;
max-width: 100%;
}
body {
font-family: 'Inter', 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
font-feature-settings: 'cv11' 1, 'ss01' 1;
background: var(--bg);
color: var(--text);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Warmer atmosphere — mesh glow + subtle top highlight */
background-color: var(--bg);
background-image:
radial-gradient(ellipse 1000px 720px at 12% -8%, rgba(212, 168, 75, 0.11) 0%, transparent 58%),
radial-gradient(ellipse 880px 640px at 92% 105%, rgba(160, 64, 80, 0.09) 0%, transparent 55%),
radial-gradient(ellipse 600px 400px at 50% 0%, rgba(160, 128, 192, 0.04) 0%, transparent 70%),
linear-gradient(180deg, rgba(28, 18, 36, 0.35) 0%, transparent 28%, rgba(18, 10, 24, 0.65) 100%);
background-attachment: fixed;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: 'tnum' 1, 'cv11' 1; }
.serif { font-family: 'Fraunces', Georgia, serif; }
a { color: var(--accent); text-decoration: none; transition: color 0.15s var(--ease); }
a:hover { color: var(--accent-soft); }
::selection { background: rgba(212, 168, 75, 0.35); color: var(--text); }
/* ============================================================
PLAYER DRAWER (floats over everything, slides in from right)
============================================================ */
.drawer-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s var(--ease);
z-index: 90;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
/* ===== Glossary modal — same animation/overlay pattern as drawer ===== */
.glossary-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s var(--ease);
z-index: 90;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.glossary-overlay.open { opacity: 1; pointer-events: auto; }
/* ===== Profile modal — opens from user badge click ===== */
.profile-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s var(--ease);
/* Z-index must be ABOVE the sticky masthead (100). Without this the
masthead renders on top of the modal, hiding the × close button —
which is exactly the bug Owen hit. */
z-index: 1099;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.profile-overlay.open { opacity: 1; pointer-events: auto; }
.profile-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.96);
opacity: 0;
pointer-events: none;
width: min(620px, 92vw);
max-height: 88vh;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
/* Above the masthead (100), above the overlay (1099). */
z-index: 1100;
transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
overflow: hidden;
display: flex;
flex-direction: column;
}
.profile-modal.open {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
/* On mobile, give the modal more room — masthead is ~100px tall + a
mobile-bottom-nav at the bottom (~80px), so 88vh felt cramped.
Push close button into a clear, large tap target. */
@media (max-width: 600px) {
.profile-modal {
width: 94vw;
max-height: 86vh;
}
.profile-close {
width: 40px;
height: 40px;
font-size: 26px;
top: 8px;
right: 8px;
}
}
.profile-close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
border: none;
background: transparent;
color: var(--text-muted);
font-size: 22px;
line-height: 1;
cursor: pointer;
border-radius: 6px;
transition: background 0.15s var(--ease), color 0.15s var(--ease);
z-index: 2;
}
.profile-close:hover {
background: rgba(212, 168, 75, 0.1);
color: var(--accent);
}
.profile-content {
padding: 32px 32px 24px;
overflow-y: auto;
flex: 1;
}
/* Header — avatar + name */
.profile-header {
display: flex;
align-items: center;
gap: 18px;
padding-bottom: 22px;
border-bottom: 1px solid var(--border-soft);
margin-bottom: 22px;
}
.profile-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
background: var(--bg);
border: 1px solid var(--border);
flex: 0 0 auto;
}
.profile-avatar-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Fraunces', serif;
font-size: 28px;
font-weight: 600;
color: var(--accent);
}
.profile-name {
font-family: 'Fraunces', serif;
font-size: 26px;
font-weight: 600;
color: var(--text);
line-height: 1.1;
margin-bottom: 4px;
}
.profile-handle {
font-family: 'Roboto Mono', monospace;
font-size: 13px;
color: var(--text-muted);
}
/* Section structure */
.profile-section {
margin-bottom: 22px;
}
.profile-section:last-of-type { margin-bottom: 0; }
.profile-section-label {
font-family: 'Roboto Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
/* Stat grid — used for portfolio + standings */
.profile-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
}
.profile-stat {
background: var(--bg);
border: 1px solid var(--border-soft);
border-radius: 8px;
padding: 12px 14px;
transition: border-color 0.15s var(--ease);
}
.profile-stat:hover { border-color: var(--border); }
.profile-stat-num {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 600;
color: var(--text);
line-height: 1.1;
margin-bottom: 4px;
}
.profile-stat-label {
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.3px;
}
/* Format pill row */
.profile-format-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.profile-format-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
background: var(--bg);
border: 1px solid var(--border-soft);
border-radius: 999px;
font-size: 12px;
color: var(--text-dim);
}
.profile-format-pill strong {
color: var(--accent);
font-weight: 600;
font-family: 'Roboto Mono', monospace;
}
/* Action row */
.profile-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.profile-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-dim);
font-family: 'Inter', sans-serif;
font-size: 13px;
cursor: pointer;
transition: all 0.15s var(--ease);
}
.profile-action-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.profile-action-btn.danger:hover {
border-color: #c0392b;
color: #e74c3c;
}
/* Footer link row */
.profile-foot-links {
display: flex;
gap: 16px;
flex-wrap: wrap;
padding-top: 18px;
margin-top: 22px;
border-top: 1px solid var(--border-soft);
}
.profile-foot-links a {
font-size: 12px;
color: var(--text-muted);
text-decoration: none;
transition: color 0.15s var(--ease);
}
.profile-foot-links a:hover { color: var(--accent); }
/* Loading state for async-filled stats */
.profile-stat-pending {
color: var(--text-muted);
font-style: italic;
font-size: 14px;
font-family: 'Inter', sans-serif;
}
/* Make the user-badge in the masthead feel clickable */
.user-badge {
cursor: pointer;
transition: background 0.15s var(--ease);
}
.user-badge:hover {
background: rgba(212, 168, 75, 0.06);
}
@media (max-width: 600px) {
.profile-content { padding: 24px 18px 18px; }
.profile-name { font-size: 22px; }
.profile-avatar { width: 56px; height: 56px; }
}
.glossary-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.96);
opacity: 0;
pointer-events: none;
width: min(640px, 92vw);
max-height: 85vh;
background: var(--bg);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
z-index: 100;
overflow: hidden;
display: flex;
flex-direction: column;
transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.glossary-modal.open {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
.glossary-inner {
overflow-y: auto;
padding: 0;
}
.glossary-head {
padding: 22px 28px 18px;
border-bottom: 1px solid var(--border-soft);
background: var(--bg-elev);
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
}
.glossary-title {
font-family: 'Fraunces', serif;
font-size: 24px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--text);
}
.glossary-subtitle {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
font-weight: 500;
}
.glossary-section {
padding: 18px 28px;
border-bottom: 1px solid var(--border-soft);
}
.glossary-section:last-child { border-bottom: none; }
.glossary-section-head {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
margin-bottom: 12px;
}
.glossary-row {
padding: 10px 0;
border-top: 1px solid var(--border-soft);
display: grid;
grid-template-columns: 130px 1fr;
gap: 14px;
align-items: baseline;
}
.glossary-row:first-child { border-top: none; padding-top: 0; }
.glossary-term {
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 13px;
color: var(--accent);
letter-spacing: -0.01em;
}
.glossary-def {
font-size: 13px;
color: var(--text);
font-weight: 400;
line-height: 1.55;
}
@media (max-width: 600px) {
.glossary-row { grid-template-columns: 1fr; gap: 4px; }
.glossary-section { padding: 14px 18px; }
.glossary-head { padding: 18px 18px 14px; }
}
.drawer {
position: fixed;
top: 0;
right: 0;
height: 100vh;
/* Desktop drawer width bumped from 460 → 580 for breathing room. The
* drawer is content-heavy (hero, sources, exposure rows, similar
* players, stats, news) and the prior width forced cramped wrapping on
* the sources card. Mobile breakpoint below collapses to full-width. */
width: min(580px, 100vw);
background: var(--bg);
border-left: 1px solid var(--border-soft);
box-shadow: -24px 0 48px rgba(0, 0, 0, 0.4);
transform: translateX(100%);
transition: transform 0.3s var(--ease);
z-index: 100;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.drawer.open { transform: translateX(0); }
.drawer-inner { padding: 0; }
.drawer-close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s var(--ease);
z-index: 2;
}
.drawer-close:hover {
color: var(--accent);
border-color: var(--accent);
}
.drawer-hero {
padding: 30px 24px 20px;
background: linear-gradient(180deg, var(--bg-elev), var(--bg));
border-bottom: 1px solid var(--border-soft);
position: relative;
}
.drawer-hero-row {
display: flex;
align-items: center;
gap: 16px;
}
.drawer-hero .avatar {
width: 72px;
height: 72px;
font-size: 20px;
}
.drawer-hero-ident {
min-width: 0;
flex: 1;
}
.drawer-hero-name {
font-family: 'Fraunces', serif;
font-size: 26px;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--text);
}
.drawer-hero-meta {
font-size: 13px;
color: var(--text-muted);
margin-top: 6px;
font-weight: 500;
}
.drawer-hero-tags {
margin-top: 10px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.drawer-tag {
padding: 3px 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: var(--r-full);
background: var(--bg-elev-2);
color: var(--text-muted);
border: 1px solid var(--border-soft);
}
.drawer-tag.rookie { color: var(--accent); border-color: rgba(212, 168, 75, 0.3); background: rgba(212, 168, 75, 0.08); }
.drawer-tag.injured { color: #c24a5a; border-color: rgba(194, 74, 90, 0.3); background: rgba(194, 74, 90, 0.08); }
.drawer-value-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
border-top: 1px solid var(--border-soft);
background: var(--bg-elev);
}
.drawer-value-cell {
padding: 14px 16px;
border-right: 1px solid var(--border-soft);
text-align: center;
}
.drawer-value-cell:last-child { border-right: none; }
.drawer-value-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.drawer-value-num {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--text);
margin-top: 4px;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.015em;
}
.drawer-value-num.accent { color: var(--accent); }
.drawer-value-num.trend-up { color: #7fa878; }
.drawer-value-num.trend-down { color: #c24a5a; }
.drawer-value-num.small { font-size: 14px; }
.drawer-section {
padding: 18px 24px;
border-bottom: 1px solid var(--border-soft);
}
.drawer-section:last-child { border-bottom: none; }
.drawer-section-head {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
margin-bottom: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.drawer-section-count {
color: var(--accent);
font-weight: 700;
}
/* ===== Value trend section (line chart of FC value over time) ===== */
.drawer-trend-meta {
font-size: 10px;
color: var(--text-muted);
text-transform: none;
letter-spacing: 0;
font-weight: 500;
}
.drawer-trend-delta { font-weight: 700; font-feature-settings: 'tnum' 1; }
.drawer-trend-delta.up { color: #97c890; }
.drawer-trend-delta.down { color: #d27582; }
.drawer-trend-delta.flat { color: var(--accent); }
.drawer-trend-chart {
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 8px 10px;
overflow: hidden;
}
.drawer-trend-foot {
margin-top: 8px;
font-size: 11px;
color: var(--text-dim);
font-weight: 500;
text-align: center;
}
.drawer-trend-empty {
padding: 16px 14px;
text-align: center;
background: var(--bg-elev-2);
border: 1px dashed var(--border-soft);
border-radius: var(--r-md);
color: var(--text-muted);
font-size: 12px;
font-style: italic;
line-height: 1.5;
}
/* ===== Sources panel — per-source value breakdown in player drawer ===== */
.drawer-sources-section { background: var(--bg-elev-2); border-radius: var(--r-md); }
.src-confidence {
font-size: 9px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
background: rgba(180, 145, 90, 0.10);
padding: 2px 6px;
border-radius: var(--r-sm);
}
.src-confidence-high { color: #97c890; background: rgba(127, 168, 120, 0.12); }
.src-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.src-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0;
border-bottom: 1px solid var(--border-soft);
}
.src-row:last-child { border-bottom: none; }
.src-label {
font-size: 12px;
font-weight: 600;
color: var(--text);
}
.src-meta {
font-size: 9px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
margin-left: 4px;
}
.src-ecr {
font-size: 10px;
color: var(--text-muted);
font-weight: 500;
margin-left: 6px;
}
.src-value {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--text);
font-feature-settings: 'tnum' 1;
}
/* Divergence callout — when FC and DP disagree by >10% */
.src-divergence {
margin: 8px 0;
padding: 8px 10px;
border-radius: var(--r-sm);
font-size: 11px;
line-height: 1.45;
background: rgba(180, 145, 90, 0.06);
border-left: 2px solid var(--accent);
color: var(--text-muted);
}
.src-divergence strong { color: var(--accent); font-weight: 700; }
.src-div-strong {
background: rgba(212, 168, 75, 0.10);
border-left-color: var(--accent);
}
.src-composite {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 8px;
border-top: 1px solid var(--border-soft);
}
.src-composite-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
.src-composite-value {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--accent);
font-feature-settings: 'tnum' 1;
}
.src-quad {
margin: 10px 0 8px;
padding: 10px 12px;
border-radius: var(--r-sm);
background: rgba(255,255,255,0.02);
border: 1px solid var(--border-soft);
}
.src-quad-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
}
.src-quad-spread { font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--text-muted); }
.src-quad-row { display: grid; grid-template-columns: 52px 1fr 56px; gap: 8px; align-items: center; margin-bottom: 5px; }
.src-quad-label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.src-quad-bar-wrap { height: 6px; background: var(--bg-elev); border-radius: 3px; overflow: hidden; }
.src-quad-bar { height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(212,168,75,0.5), var(--accent)); }
.src-quad-bar.implied { background: linear-gradient(90deg, rgba(151,200,144,0.45), #97c890); }
.src-quad-val { font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 600; text-align: right; color: var(--text); }
/* ===== Backend-supplied Sources panel additions ===== */
/* Per-source rank badge (e.g. "#8") shown next to value when backend provides it */
.src-value-cell {
display: flex;
align-items: baseline;
gap: 8px;
}
.src-rank {
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 700;
color: var(--text-dim);
background: var(--bg-elev-2);
padding: 2px 6px;
border-radius: var(--r-sm);
letter-spacing: 0.02em;
}
/* Real-trades row gets distinct treatment as the proprietary signal */
.src-row-market {
background: rgba(212, 168, 75, 0.04);
border-left: 2px solid var(--accent);
padding-left: 8px;
margin-left: -8px;
}
.src-meta-market {
color: var(--accent) !important;
}
/* Tag pills (market_cold, contested, rising, etc.) */
.src-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.src-tag {
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 3px 8px;
border-radius: var(--r-sm);
background: var(--bg-elev-2);
color: var(--text-muted);
border: 1px solid var(--border-soft);
}
.src-tag.tag-hot { color: #d27582; border-color: rgba(210, 117, 130, 0.4); background: rgba(194, 74, 90, 0.08); }
.src-tag.tag-cold { color: #6fa8d8; border-color: rgba(111, 168, 216, 0.4); background: rgba(74, 130, 194, 0.08); }
.src-tag.tag-contested { color: var(--accent); border-color: rgba(212, 168, 75, 0.4); background: rgba(212, 168, 75, 0.08); }
.src-tag.tag-rising { color: #97c890; border-color: rgba(151, 200, 144, 0.4); background: rgba(127, 168, 120, 0.08); }
.src-tag.tag-falling { color: #d4a674; border-color: rgba(212, 166, 116, 0.4); background: rgba(180, 145, 90, 0.08); }
.src-tag.tag-stable { color: var(--text-dim); }
.src-tag.tag-lowdata { color: var(--text-dim); border-style: dashed; }
/* Meta rows (agreement, range, momentum) — small label/value pairs below source rows */
.src-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
font-size: 11px;
color: var(--text-muted);
}
.src-meta-label {
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
font-size: 9px;
color: var(--text-dim);
}
.src-agreement {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
font-feature-settings: 'tnum' 1;
}
.src-agreement.agree-high { color: #97c890; }
.src-agreement.agree-low { color: #d27582; }
.src-agreement.agree-mid { color: var(--accent); }
.src-range {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--text);
font-feature-settings: 'tnum' 1;
}
.src-momentum {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
font-feature-settings: 'tnum' 1;
}
.src-momentum.mom-up { color: #97c890; }
.src-momentum.mom-down { color: #d27582; }
.src-momentum.mom-flat { color: var(--text-dim); }
/* Confidence badge — extends existing styles */
.src-confidence-low { color: #d27582; background: rgba(194, 74, 90, 0.10); }
/* ===== News section (drawer + global) ===== */
.drawer-news-loading {
font-size: 12px;
color: var(--text-muted);
text-align: center;
padding: 14px 0;
font-style: italic;
}
.drawer-news-empty {
padding: 14px 12px;
background: var(--bg-elev-2);
border: 1px dashed var(--border-soft);
border-radius: var(--r-md);
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
text-align: center;
}
.drawer-news-list { display: flex; flex-direction: column; gap: 8px; }
.drawer-news-item {
display: block;
padding: 10px 12px;
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
text-decoration: none;
color: inherit;
transition: border-color 0.12s var(--ease), background 0.12s var(--ease);
}
.drawer-news-item:hover {
border-color: var(--accent);
background: var(--bg-elev);
}
.drawer-news-head {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
.drawer-news-source { color: var(--accent); }
.drawer-news-time { color: var(--text-dim); }
.drawer-news-title {
font-size: 13px;
font-weight: 600;
color: var(--text);
line-height: 1.35;
letter-spacing: -0.005em;
}
.drawer-news-summary {
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.drawer-news-foot {
margin-top: 8px;
text-align: center;
font-size: 11px;
color: var(--text-dim);
font-style: italic;
}
.drawer-section-meta-light {
color: var(--text-dim);
text-transform: none;
letter-spacing: 0;
font-weight: 500;
font-size: 10px;
}
/* News strip on the league overview — surfaces fresh news on YOUR roster */
.news-strip-placeholder { /* lives in DOM until items load; collapses if empty */ }
.news-strip {
margin-bottom: 16px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
padding: 14px 18px;
box-shadow: var(--shadow-sm);
}
.news-strip-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
.news-strip-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.news-strip-count {
font-size: 10px;
color: var(--accent);
font-weight: 700;
}
.news-strip-items { display: flex; flex-direction: column; gap: 6px; }
.news-strip-item {
padding: 8px 10px;
background: var(--bg-elev-2);
border-radius: var(--r-sm);
transition: all 0.12s var(--ease);
}
.news-strip-item-clickable { cursor: pointer; }
.news-strip-item-clickable:hover {
background: var(--bg-elev);
box-shadow: 0 0 0 1px var(--accent);
}
.news-strip-meta {
display: flex;
gap: 8px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
margin-bottom: 3px;
}
.news-strip-source { color: var(--accent); }
.news-strip-time { color: var(--text-dim); }
.news-strip-tag-yours {
background: var(--accent);
color: var(--bg);
padding: 1px 6px;
border-radius: var(--r-sm);
font-size: 9px;
letter-spacing: 0.08em;
}
.news-strip-item-roster {
border-left: 2px solid var(--accent);
padding-left: 8px;
}
.news-strip-error {
border-color: rgba(194, 74, 90, 0.3);
}
.news-strip-quiet {
border-style: dashed;
}
.news-strip-empty-msg {
padding: 12px 14px;
background: var(--bg-elev-2);
border-radius: var(--r-sm);
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
.news-strip-player {
color: var(--text-muted);
margin-left: auto;
text-transform: none;
letter-spacing: 0;
font-weight: 600;
font-size: 11px;
}
.news-strip-title {
font-size: 13px;
font-weight: 600;
color: var(--text);
line-height: 1.35;
letter-spacing: -0.005em;
}
/* ===== Owner drawer ===== */
.drawer-tag {
display: inline-block;
padding: 3px 8px;
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
margin-right: 4px;
letter-spacing: 0.02em;
}
.drawer-value-num.good { color: #97c890; }
.drawer-value-num.bad { color: #d27582; }
/* Verdict bar — stacked horizontal, win/fair/loss color-coded */
.owner-verdict-bar {
display: flex;
height: 14px;
border-radius: var(--r-sm);
overflow: hidden;
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
}
.owner-verdict-seg { height: 100%; transition: width 0.3s var(--ease); }
.vd-win { background: #7fa878; }
.vd-fair { background: var(--accent); }
.vd-loss { background: #c24a5a; }
.vd-multi { background: var(--text-dim); }
.owner-verdict-legend {
display: flex;
gap: 14px;
margin-top: 8px;
font-size: 11px;
color: var(--text-muted);
font-weight: 500;
flex-wrap: wrap;
}
.vd-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 5px;
vertical-align: middle;
}
/* Position activity grid: in (gold) bar over out (dim) bar, net delta on right */
.owner-pos-grid { display: flex; flex-direction: column; gap: 8px; }
/* Roster snapshot — independent of trade history, shown for any owner */
.owner-roster-stats {
display: flex;
flex-direction: column;
gap: 12px;
}
.owner-roster-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.owner-roster-stat {
display: flex;
flex-direction: column;
gap: 1px;
text-align: left;
}
.owner-roster-num {
font-family: 'Fraunces', serif;
font-weight: 500;
font-size: 18px;
color: var(--text);
line-height: 1.1;
font-feature-settings: 'tnum' 1;
}
.owner-roster-num.accent { color: var(--accent); }
.owner-roster-lbl {
font-family: 'Inter', sans-serif;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
font-weight: 600;
}
.owner-roster-pos {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
padding-top: 10px;
border-top: 1px solid var(--border-soft);
}
.owner-roster-pos-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 4px;
background: var(--bg);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
}
.owner-roster-pos-letter {
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
padding: 2px 6px;
border-radius: var(--r-sm);
background: var(--bg-elev-2);
}
.owner-roster-pos-letter.qb { color: var(--qb); background: rgba(194, 74, 90, 0.15); }
.owner-roster-pos-letter.rb { color: var(--rb); background: rgba(127, 168, 120, 0.15); }
.owner-roster-pos-letter.wr { color: var(--wr); background: rgba(96, 144, 184, 0.15); }
.owner-roster-pos-letter.te { color: var(--te); background: rgba(212, 168, 75, 0.15); }
.owner-roster-pos-val {
font-family: 'Roboto Mono', monospace;
font-size: 11px;
color: var(--text);
font-weight: 600;
}
.owner-roster-pos-rank {
font-family: 'Inter', sans-serif;
font-size: 10px;
color: var(--text-muted);
}
.owner-roster-archetype {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
border-top: 1px solid var(--border-soft);
}
.owner-roster-archetype-lbl {
font-family: 'Inter', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
font-weight: 600;
}
.owner-roster-archetype-val {
font-family: 'Fraunces', serif;
font-size: 14px;
color: var(--accent);
font-weight: 500;
}
@media (max-width: 700px) {
.owner-roster-num { font-size: 16px; }
}
.owner-pos-row {
display: grid;
grid-template-columns: 32px 1fr 60px;
gap: 10px;
align-items: center;
}
.owner-pos-label {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-align: center;
}
.owner-pos-bars {
position: relative;
height: 18px;
}
.owner-pos-bar {
position: absolute;
top: 0;
left: 0;
height: 7px;
border-radius: 2px;
}
.owner-pos-in { background: var(--accent); top: 1px; }
.owner-pos-out { background: rgba(180, 145, 90, 0.3); top: 10px; }
.owner-pos-net {
font-size: 12px;
font-weight: 700;
text-align: right;
font-feature-settings: 'tnum' 1;
}
.pos-net-pos { color: #97c890; }
.pos-net-neg { color: #d27582; }
.pos-net-flat { color: var(--text-muted); }
.owner-pos-foot {
margin-top: 12px;
text-align: center;
font-size: 11px;
color: var(--text-dim);
font-style: italic;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.owner-pick-row {
display: flex;
justify-content: space-between;
font-size: 13px;
color: var(--text);
font-weight: 500;
flex-wrap: wrap;
gap: 10px;
}
.owner-pick-row strong { font-weight: 700; color: var(--text); }
/* Top-acquired players list */
.owner-top-players { display: flex; flex-direction: column; gap: 6px; }
.owner-top-player {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 13px;
padding: 6px 0;
border-bottom: 1px solid var(--border-soft);
}
.owner-top-player:last-child { border-bottom: none; }
/* Phase E2: trade-block players are clickable — open the player drawer */
.owner-block-player {
cursor: pointer;
transition: background 0.12s var(--ease);
margin: 0 -8px;
padding-left: 8px;
padding-right: 8px;
border-radius: var(--r-sm);
}
.owner-block-player:hover {
background: var(--bg-elev-2);
}
.owner-block-player:hover .owner-top-name {
color: var(--accent);
}
.owner-top-name { font-weight: 600; color: var(--text); }
.owner-top-count {
font-size: 11px;
color: var(--accent);
font-weight: 700;
font-feature-settings: 'tnum' 1;
}
/* Vs-me block: 4 stat tiles + a foot summarizing net value */
.owner-vsme {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 10px;
}
.owner-vsme-stat {
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 10px 6px;
text-align: center;
}
.owner-vsme-num {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--text);
font-feature-settings: 'tnum' 1;
}
.owner-vsme-num.win { color: #97c890; }
.owner-vsme-num.loss { color: #d27582; }
.owner-vsme-lbl {
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
margin-top: 2px;
}
.owner-vsme-foot {
text-align: center;
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}
.owner-vsme-foot strong { color: var(--text); }
.owner-empty-mini {
text-align: center;
color: var(--text-dim);
font-size: 12px;
font-style: italic;
padding: 12px 0;
}
/* Trade CTA button — full-width, distinctive */
.drawer-action-btn {
width: 100%;
padding: 12px;
background: var(--accent);
color: var(--bg);
border: none;
border-radius: var(--r-md);
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.02em;
transition: background 0.12s var(--ease);
}
.drawer-action-btn:hover { background: #c89a55; }
/* ===== Profile section (height/weight/college/depth + injury) ===== */
.drawer-profile-bits {
font-size: 13px;
color: var(--text);
font-weight: 500;
line-height: 1.55;
}
.drawer-injury {
margin-top: 12px;
padding: 12px 14px;
background: rgba(194, 74, 90, 0.08);
border-left: 3px solid #c24a5a;
border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.drawer-injury-status {
font-size: 12px;
font-weight: 700;
color: #c24a5a;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.drawer-injury-body {
font-size: 12px;
color: var(--text);
margin-top: 4px;
font-weight: 600;
}
.drawer-injury-notes {
font-size: 12px;
color: var(--text-muted);
margin-top: 6px;
line-height: 1.45;
}
.drawer-injury-practice {
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
font-weight: 600;
}
/* News-recency meta — Sleeper has no public news feed, but news_updated
timestamp is in the player object. Surface staleness as a recency tag. */
.drawer-news-meta {
margin-top: 10px;
padding: 6px 10px;
background: var(--bg-elev-2);
border-radius: var(--r-sm);
font-size: 11px;
color: var(--text-muted);
font-weight: 500;
text-align: center;
letter-spacing: 0.02em;
}
.drawer-news-meta.fresh { color: #97c890; background: rgba(127, 168, 120, 0.08); }
.drawer-news-meta.stale { color: var(--text-dim); }
/* ===== Stats section ===== */
.drawer-stats-loading,
.drawer-stats-empty,
.drawer-stats-recent-loading {
font-size: 12px;
color: var(--text-muted);
text-align: center;
padding: 14px 0;
font-style: italic;
}
.drawer-stats-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
margin-bottom: 14px;
}
.drawer-stats-label {
font-size: 12px;
color: var(--text-muted);
font-weight: 600;
}
.drawer-stats-league {
font-size: 11px;
color: var(--text-dim);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 60%;
}
.drawer-stats-seasons {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
margin-bottom: 16px;
}
.drawer-stat-season {
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 12px 10px;
text-align: center;
transition: all 0.12s var(--ease);
}
/* When a season tile is clickable (has data), bump the cursor + add hover.
Picked tile gets the gold ring to match the active game-log tab. */
.drawer-stat-season[onclick] { cursor: pointer; }
.drawer-stat-season[onclick]:hover {
border-color: var(--accent);
background: var(--bg-elev);
}
.drawer-stat-season.active {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
background: var(--bg-elev);
}
.drawer-stat-season.no-data { opacity: 0.45; }
.drawer-stat-season-year {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.07em;
font-weight: 700;
}
.drawer-stat-season.active .drawer-stat-season-year { color: var(--accent); }
.drawer-stat-season-pts {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--accent);
margin-top: 4px;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.015em;
}
.drawer-stat-season.no-data .drawer-stat-season-pts {
color: var(--text-dim);
}
.drawer-stat-season-meta {
font-size: 10px;
color: var(--text-muted);
margin-top: 3px;
font-weight: 500;
}
.drawer-stats-subhead {
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.07em;
font-weight: 700;
margin: 6px 0 8px;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
}
/* Right-aligned summary on the subhead row, e.g. "2024 · 17 gm · 18.4 ppg" */
.drawer-stats-subhead-meta {
color: var(--text-muted);
text-transform: none;
font-weight: 500;
letter-spacing: 0;
font-size: 11px;
}
/* Season-tab strip: pills above the game log to switch which season's
per-game data is shown. Mirrors the season-tile selection so users have
two paths to the same action. */
.drawer-stats-tabs {
display: flex;
gap: 4px;
margin: 4px 0 10px;
padding: 3px;
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
width: fit-content;
}
.drawer-stats-tab {
appearance: none;
background: transparent;
border: none;
color: var(--text-muted);
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
padding: 5px 12px;
border-radius: var(--r-full);
cursor: pointer;
transition: all 0.12s var(--ease);
font-feature-settings: 'tnum' 1;
}
.drawer-stats-tab:hover { color: var(--text); }
.drawer-stats-tab.active {
background: var(--accent);
color: var(--bg);
}
.drawer-stats-table {
border-top: 1px solid var(--border-soft);
}
.drawer-stats-row {
display: grid;
grid-template-columns: 78px 1fr 50px auto;
gap: 10px;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--border-soft);
font-size: 12px;
}
.drawer-stats-row:last-child { border-bottom: none; }
.drawer-stats-week {
color: var(--text-muted);
font-weight: 600;
}
.drawer-stats-line {
color: var(--text);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Snap%/usage cell — small, dim, right-aligned. Empty cells reserve space
so the rows align even when usage data is missing for some weeks. */
.drawer-stats-usage {
font-size: 11px;
color: var(--text-muted);
font-weight: 600;
font-feature-settings: 'tnum' 1;
text-align: right;
letter-spacing: -0.01em;
}
.drawer-stats-pts {
font-family: 'Inter', sans-serif;
font-weight: 700;
color: var(--accent);
font-feature-settings: 'tnum' 1;
min-width: 44px;
text-align: center;
padding: 3px 8px;
border-radius: var(--r-sm);
background: rgba(212, 168, 75, 0.08);
}
/* Game-by-game tier coloring on points cells.
Mimics Sleeper's green/yellow/red treatment from screenshot 2. */
.drawer-stats-pts.tier-great { background: rgba(127, 168, 120, 0.22); color: #a8d6a0; }
.drawer-stats-pts.tier-good { background: rgba(127, 168, 120, 0.10); color: #97c890; }
.drawer-stats-pts.tier-mid { background: rgba(212, 168, 75, 0.10); color: var(--accent); }
.drawer-stats-pts.tier-poor { background: rgba(194, 74, 90, 0.12); color: #d27582; }
.drawer-stats-label strong { color: var(--accent); font-weight: 700; }
.drawer-exposure-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 10px;
align-items: center;
padding: 10px 0;
border-top: 1px solid var(--border-soft);
cursor: pointer;
transition: background 0.1s;
margin: 0 -24px;
padding-left: 24px;
padding-right: 24px;
}
/* Page 12: one-line opponent summary. Replaces the long "Owned by opponents"
* list — popular players generated 20+ rows of context the user didn't ask
* for. Quiet single-fact treatment between drawer sections. */
.drawer-opponent-summary {
display: flex;
align-items: center;
gap: 8px;
margin: 16px -24px 0;
padding: 12px 24px;
border-top: 1px solid var(--border-soft);
font-size: 12px;
color: var(--text-muted);
font-style: italic;
}
.drawer-opp-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--text-dim);
}
.drawer-exposure-row:hover { background: var(--bg-elev-2); }
.drawer-exposure-row:first-child { border-top: none; }
.drawer-exposure-name {
font-size: 13px;
font-weight: 600;
color: var(--text);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.drawer-exposure-sub {
font-size: 10px;
color: var(--text-muted);
margin-top: 2px;
font-weight: 500;
}
.drawer-exposure-tag {
font-size: 10px;
padding: 2px 8px;
border-radius: var(--r-full);
background: var(--bg-elev-2);
color: var(--text-muted);
font-weight: 600;
letter-spacing: 0.02em;
}
.drawer-exposure-tag.mine {
background: rgba(212, 168, 75, 0.12);
color: var(--accent);
border: 1px solid rgba(212, 168, 75, 0.3);
}
.drawer-exposure-tag.available {
background: rgba(127, 168, 120, 0.12);
color: #7fa878;
}
.drawer-market-pro {
background: linear-gradient(135deg, rgba(180, 145, 90, 0.08) 0%, rgba(90, 60, 120, 0.06) 100%);
border: 1px solid rgba(180, 145, 90, 0.22);
border-radius: var(--r-md);
padding: 12px 14px;
}
.drawer-pro-pill {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
background: rgba(180, 145, 90, 0.15);
padding: 2px 7px;
border-radius: var(--r-sm);
}
.drawer-market-note {
font-size: 12px;
color: var(--text-muted);
line-height: 1.45;
margin: 8px 0 6px;
}
.drawer-market-stat {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.market-radar-panel {
margin: 0 0 20px;
padding: 16px 18px;
border-radius: 12px;
border: 1px solid var(--border-soft);
background: linear-gradient(135deg, rgba(26, 16, 36, 0.95), rgba(18, 10, 24, 0.88));
}
.market-radar-panel-page { margin-top: 12px; }
.market-radar-format-picker {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.market-radar-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 12px;
gap: 12px;
}
.market-radar-title {
font-family: 'Fraunces', serif;
font-size: 18px;
font-weight: 600;
color: var(--text);
}
.market-radar-sub {
font-size: 11px;
color: var(--text-dim);
font-family: 'Roboto Mono', monospace;
letter-spacing: 0.04em;
}
.market-radar-rows { display: flex; flex-direction: column; gap: 6px; }
.market-radar-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
align-items: center;
width: 100%;
text-align: left;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid transparent;
background: rgba(255,255,255,0.02);
color: var(--text);
cursor: pointer;
font: inherit;
}
.market-radar-row:hover { border-color: var(--border); background: var(--bg-elev-2); }
.market-radar-name { font-weight: 600; font-size: 14px; }
.market-radar-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.market-radar-delta { font-family: 'Roboto Mono', monospace; font-size: 12px; font-weight: 600; }
.market-radar-delta.up { color: #97c890; }
.market-radar-delta.down { color: #d27582; }
.market-radar-implied { font-family: 'Roboto Mono', monospace; font-size: 12px; color: var(--text-muted); }
.mate-activity-panel {
margin: 0 0 20px;
padding: 16px 18px;
border-radius: 12px;
border: 1px solid var(--border-soft);
background: linear-gradient(135deg, rgba(22, 14, 30, 0.95), rgba(18, 10, 24, 0.88));
}
.mate-activity-row {
display: block;
width: 100%;
text-align: left;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid transparent;
background: rgba(255,255,255,0.02);
color: var(--text);
cursor: pointer;
font: inherit;
margin-bottom: 6px;
}
.mate-activity-row:hover { border-color: var(--border); background: var(--bg-elev-2); }
.mate-activity-row.mine { border-left: 2px solid rgba(212, 168, 75, 0.4); }
.mate-activity-league { font-size: 11px; color: var(--accent); font-weight: 600; }
.mate-activity-summary { font-size: 13px; font-weight: 600; margin-top: 3px; line-height: 1.35; }
.mate-activity-meta { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.negotiation-pack-card {
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 14px 16px;
margin-bottom: 12px;
background: var(--bg-elev-2);
}
.negotiation-pack-target { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.negotiation-pack-hint { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; line-height: 1.4; }
.negotiation-variant {
padding: 10px 12px;
border-radius: 8px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border-soft);
margin-bottom: 8px;
}
.negotiation-variant-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.negotiation-variant-body { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
/* ===== Live draft room — fixed sidebar during active Sleeper drafts ===== */
.live-draft-room {
position: fixed;
top: 72px;
right: 0;
bottom: 0;
width: min(360px, 92vw);
z-index: 1200;
background: linear-gradient(180deg, rgba(28, 18, 36, 0.98), rgba(18, 10, 24, 0.99));
border-left: 1px solid var(--border-soft);
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: row;
transform: translateX(0);
transition: transform 0.25s var(--ease);
overflow: hidden;
}
.live-draft-room.collapsed { transform: translateX(calc(100% - 48px)); }
.live-draft-rail {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 48px;
z-index: 3;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 4px;
border: none;
border-right: 1px solid rgba(212, 168, 75, 0.35);
background: linear-gradient(180deg, rgba(36, 22, 48, 0.99), rgba(22, 12, 30, 0.99));
color: var(--accent);
cursor: pointer;
font: inherit;
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.35);
}
.live-draft-room.collapsed .live-draft-rail { display: flex; }
.live-draft-rail:hover {
background: linear-gradient(180deg, rgba(44, 28, 58, 1), rgba(28, 16, 36, 1));
border-right-color: rgba(212, 168, 75, 0.55);
}
.live-draft-rail-icon {
font-size: 14px;
line-height: 1;
flex-shrink: 0;
}
.live-draft-rail-label {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1;
}
.live-draft-rail-status {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-dim);
flex-shrink: 0;
}
.live-draft-rail-status.live {
background: #97c890;
box-shadow: 0 0 8px rgba(151, 200, 144, 0.65);
animation: liveDraftPulse 1.6s ease-in-out infinite;
}
.live-draft-panel {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
margin-left: 0;
}
.live-draft-room.collapsed .live-draft-panel {
visibility: hidden;
pointer-events: none;
}
.live-draft-room-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding: 14px 14px 10px;
border-bottom: 1px solid var(--border-soft);
flex-shrink: 0;
}
.live-draft-room-title {
font-family: 'Fraunces', serif;
font-size: 17px;
font-weight: 600;
color: var(--text);
line-height: 1.2;
}
.live-draft-room-sub {
font-size: 11px;
color: var(--text-dim);
margin-top: 4px;
line-height: 1.35;
}
.live-draft-room-actions { display: flex; gap: 6px; flex-shrink: 0; }
.live-draft-room-btn {
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid var(--border-soft);
background: var(--bg-elev-2);
color: var(--text-muted);
cursor: pointer;
font-size: 14px;
line-height: 1;
}
.live-draft-room-btn:hover { border-color: var(--border); color: var(--accent); }
.live-draft-room-body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
padding: 12px 14px 14px;
}
.live-draft-body-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding-right: 2px;
scrollbar-gutter: stable;
}
.live-draft-needs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 4px;
}
.live-draft-need-chip {
font-size: 10px;
font-weight: 600;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid var(--border-soft);
background: rgba(255, 255, 255, 0.03);
color: var(--text-muted);
font-family: 'Roboto Mono', monospace;
}
.live-draft-need-chip.need-hot {
border-color: rgba(210, 117, 130, 0.45);
color: #e8a0aa;
background: rgba(210, 117, 130, 0.1);
}
.live-draft-need-chip.need-mid {
border-color: rgba(212, 140, 74, 0.4);
color: #d8b07a;
background: rgba(212, 140, 74, 0.08);
}
.live-draft-need-chip.need-ok {
border-color: rgba(151, 200, 144, 0.35);
color: #a8d4a2;
background: rgba(151, 200, 144, 0.08);
}
.live-draft-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.live-draft-filter-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.live-draft-filter-btn {
font-size: 10px;
font-weight: 600;
padding: 4px 8px;
border-radius: 6px;
border: 1px solid var(--border-soft);
background: transparent;
color: var(--text-dim);
cursor: pointer;
font-family: 'Roboto Mono', monospace;
}
.live-draft-filter-btn:hover { border-color: var(--border); color: var(--text-muted); }
.live-draft-filter-btn.active {
border-color: rgba(212, 168, 75, 0.45);
color: var(--accent);
background: rgba(212, 168, 75, 0.08);
}
.live-draft-sort {
font-size: 11px;
padding: 5px 8px;
border-radius: 8px;
border: 1px solid var(--border-soft);
background: var(--bg-elev-2);
color: var(--text-muted);
max-width: 130px;
}
.live-draft-bpa-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.live-draft-fit-tag {
display: inline-block;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 1px 5px;
border-radius: 4px;
margin-left: 4px;
vertical-align: middle;
}
.live-draft-fit-tag.fit-need {
color: #e8a0aa;
background: rgba(210, 117, 130, 0.12);
border: 1px solid rgba(210, 117, 130, 0.25);
}
.live-draft-fit-tag.fit-depth {
color: #d8b07a;
background: rgba(212, 140, 74, 0.1);
border: 1px solid rgba(212, 140, 74, 0.22);
}
.live-draft-footnote {
font-size: 10px;
color: var(--text-dim);
line-height: 1.4;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--border-soft);
flex-shrink: 0;
}
.live-draft-status {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-muted);
margin-bottom: 12px;
}
.live-draft-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: #97c890;
box-shadow: 0 0 8px rgba(151, 200, 144, 0.6);
animation: liveDraftPulse 1.6s ease-in-out infinite;
}
@keyframes liveDraftPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
.live-draft-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.live-draft-tab {
font-size: 11px;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid var(--border-soft);
background: transparent;
color: var(--text-muted);
cursor: pointer;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.live-draft-tab.active {
border-color: rgba(212, 168, 75, 0.45);
color: var(--accent);
background: rgba(212, 168, 75, 0.08);
}
.live-draft-section-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim);
margin: 14px 0 8px;
}
.live-draft-bpa-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 8px;
align-items: center;
width: 100%;
text-align: left;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid transparent;
background: rgba(255,255,255,0.02);
color: var(--text);
cursor: pointer;
font: inherit;
margin-bottom: 6px;
}
.live-draft-bpa-row:hover { border-color: var(--border); background: var(--bg-elev-2); }
.live-draft-bpa-rank {
font-family: 'Roboto Mono', monospace;
font-size: 11px;
color: var(--text-dim);
width: 18px;
}
.live-draft-bpa-name { font-weight: 600; font-size: 13px; }
.live-draft-bpa-meta { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.live-draft-bpa-val {
font-family: 'Roboto Mono', monospace;
font-size: 12px;
font-weight: 600;
color: var(--accent);
}
.live-draft-warn {
display: inline-block;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 4px;
margin-top: 4px;
margin-right: 4px;
}
.live-draft-warn.exposure {
color: #d48c4a;
background: rgba(212, 140, 74, 0.12);
border: 1px solid rgba(212, 140, 74, 0.25);
}
.live-draft-warn.steal {
color: #97c890;
background: rgba(151, 200, 144, 0.1);
border: 1px solid rgba(151, 200, 144, 0.22);
}
.live-draft-warn.reach {
color: #d27582;
background: rgba(210, 117, 130, 0.1);
border: 1px solid rgba(210, 117, 130, 0.22);
}
.live-draft-pick-chip {
font-size: 11px;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid var(--border-soft);
background: var(--bg-elev-2);
color: var(--text-muted);
margin-bottom: 6px;
}
.live-draft-pick-chip.mine {
border-color: rgba(212, 168, 75, 0.35);
color: var(--accent);
}
@media (max-width: 900px) {
.live-draft-room {
top: auto;
bottom: 56px;
left: 0;
right: 0;
width: 100%;
height: min(52vh, 420px);
border-left: none;
border-top: 1px solid var(--border-soft);
flex-direction: column;
}
.live-draft-room.collapsed { transform: translateY(calc(100% - 44px)); }
.live-draft-rail {
position: relative;
width: 100%;
height: 44px;
flex-direction: row;
padding: 0 16px;
border-right: none;
border-bottom: 1px solid rgba(212, 168, 75, 0.35);
}
.live-draft-rail-label {
writing-mode: horizontal-tb;
transform: none;
letter-spacing: 0.06em;
}
.live-draft-panel { flex: 1; min-height: 0; }
}
.drawer-market-fine {
font-size: 11px;
color: var(--text-dim);
margin: 8px 0 0;
line-height: 1.4;
}
.drawer-exposure-val {
font-size: 13px;
font-weight: 700;
color: var(--accent);
font-feature-settings: 'tnum' 1;
min-width: 50px;
text-align: right;
}
.drawer-similar-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 0;
cursor: pointer;
transition: opacity 0.1s;
}
.drawer-similar-row:hover { opacity: 0.8; }
.drawer-similar-row .avatar { width: 30px; height: 30px; font-size: 10px; }
.drawer-similar-name {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.drawer-similar-meta {
font-size: 11px;
color: var(--text-muted);
margin-top: 1px;
font-weight: 500;
}
.drawer-similar-val {
font-size: 13px;
font-weight: 700;
color: var(--accent);
font-feature-settings: 'tnum' 1;
min-width: 50px;
text-align: right;
}
.drawer-actions {
padding: 18px 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.drawer-action {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
color: var(--text);
font-size: 13px;
font-weight: 600;
font-family: 'Inter', sans-serif;
border-radius: var(--r-md);
cursor: pointer;
transition: all 0.15s var(--ease);
}
.drawer-action:hover {
border-color: var(--accent);
color: var(--accent);
}
.drawer-action.primary {
background: var(--accent);
border-color: var(--accent);
color: var(--bg);
}
.drawer-action.primary:hover {
background: transparent;
color: var(--accent);
}
/* Make player rows visibly clickable */
.player-row { cursor: pointer; }
/* ===== Tooltips =====
Tooltips are portaled to via JS so they escape parent overflow,
wrap to multiple lines for paragraph definitions, and tap-to-toggle on
touch devices. The CSS-only [data-tooltip]::after fallback is gone — long
glossary strings would clip and break cards. */
.fo-tooltip {
position: fixed;
max-width: 280px;
padding: 9px 12px;
background: var(--bg);
color: var(--text);
border: 1px solid var(--border-soft);
border-radius: var(--r-sm);
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1.45;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(212, 168, 75, 0.05);
z-index: 200;
pointer-events: none;
opacity: 0;
transform: translateY(2px);
transition: opacity 0.12s ease-out, transform 0.12s ease-out;
white-space: normal;
word-wrap: break-word;
}
.fo-tooltip.visible {
opacity: 1;
transform: translateY(0);
}
/* Cursor hint that an element has tooltip content (subtle) */
[data-tooltip] { cursor: help; }
[data-tooltip].clickable, [data-tooltip][onclick] { cursor: pointer; }
@media (max-width: 600px) {
.drawer { width: 100vw; }
.drawer-hero { padding: 28px 20px 16px; }
.drawer-hero-name { font-size: 22px; }
.drawer-section { padding: 16px 20px; }
.drawer-exposure-row { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
}
/* ============================================================
MASTHEAD
============================================================ */
.masthead {
border-bottom: 1px solid rgba(212, 168, 75, 0.12);
padding: 14px clamp(20px, 4vw, 40px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
background: var(--chrome-glass);
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: saturate(140%) blur(18px);
-webkit-backdrop-filter: saturate(140%) blur(18px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 32px rgba(0, 0, 0, 0.35);
}
.brand {
display: flex;
align-items: center;
gap: 14px;
}
.brand-mark {
font-family: 'Fraunces', serif;
font-size: 26px;
letter-spacing: -0.04em;
color: var(--text);
line-height: 1.15;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.brand-mark-icon {
width: 34px;
height: 34px;
flex-shrink: 0;
display: block;
object-fit: contain;
object-position: center;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}
.brand-mark-text {
display: inline-flex;
align-items: baseline;
gap: 1px;
}
/* "The Armchair" — heavier serif weight, white */
.brand-mark-front {
font-weight: 600;
font-style: normal;
color: var(--text);
}
/* "Office" — italic, gold; the visual emphasis */
.brand-mark-office {
font-weight: 500;
font-style: italic;
color: var(--accent);
/* extra breathing room for italic ascenders so top isn't clipped */
padding-top: 1px;
}
/* Subtle subtitle next to the wordmark on wide screens — kills negative space */
.brand-subtitle {
font-family: 'Inter', sans-serif;
font-size: 11px;
color: var(--text-dim);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-left: 14px;
padding-left: 14px;
border-left: 1px solid var(--border-soft);
line-height: 1.3;
}
@media (max-width: 700px) {
.brand-mark { font-size: 22px; gap: 8px; line-height: 1.15; }
.brand-mark-icon { width: 26px; height: 26px; }
.brand-subtitle { display: none; }
}
/* Mobile masthead: badge stats (Dynasty since / Avg / Oldest) are now
available via the profile drawer (tap the badge to open). The badge
here on mobile is only a compact identity marker — avatar + name.
The full stats panel doesn't belong in a cramped masthead anyway.
Layout:
Row 1: brand on left, user-badge on right
Row 2: status indicator + synced timestamp + refresh button
This is much tighter than the 4-stacked-row version. */
@media (max-width: 600px) {
.masthead:not(.site-header) {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px 14px;
}
.masthead-top-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.brand { gap: 8px; flex-shrink: 1; min-width: 0; }
.brand-mark { font-size: 18px; line-height: 1.15; }
.brand-mark-icon { width: 22px; height: 22px; }
.status-bar {
gap: 10px;
font-size: 11px;
flex-wrap: nowrap;
width: 100%;
}
.user-badge {
font-size: 11px;
padding: 3px 10px 3px 3px;
flex-shrink: 1;
min-width: 0;
max-width: 50%;
}
.user-badge-text { min-width: 0; overflow: hidden; }
.user-badge-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Hide the inline portfolio stats on mobile — they live in the profile
drawer now (tap the badge). Keeps the badge compact and one-line. */
.user-badge-meta { display: none; }
}
/* Landing-page padding fix: 40px is too much on a phone — eats 80px of
viewport, leaving cramped content. 20px is the right minimum. */
@media (max-width: 600px) {
.landing { padding: 32px 20px 40px; }
.landing-hero-panel { padding: 32px 20px 48px; }
.landing-hero-badge { margin-bottom: 20px; font-size: 14px; }
.landing-hero-lede { font-size: 16px; }
}
/* Legacy classes kept for backward-compat in any cached markup */
.brand-mark em { color: var(--accent); font-style: italic; font-weight: 500; }
.brand-dot { display: none; }
.brand-tag {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
padding: 4px 10px;
background: var(--bg-elev);
border-radius: var(--r-full);
border: 1px solid var(--border-soft);
}
.status-bar {
display: flex;
align-items: center;
gap: 16px;
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
/* Phase F: user badge in masthead — Sleeper avatar + display name + portfolio
* roll-up. Shown only after a successful Sleeper login + league load. */
.user-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 4px 12px 4px 4px;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
font-size: 12px;
transition: border-color 0.12s var(--ease);
}
.user-badge:hover { border-color: var(--accent); }
.user-badge-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg-elev-2);
object-fit: cover;
display: inline-block;
}
.user-badge-avatar-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: var(--bg);
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 600;
font-size: 14px;
}
.user-badge-text {
display: inline-flex;
flex-direction: column;
gap: 1px;
line-height: 1.15;
}
.user-badge-name {
color: var(--text);
font-weight: 600;
font-size: 13px;
}
.user-badge-meta {
color: var(--text-dim);
font-family: 'Roboto Mono', monospace;
font-size: 10px;
}
@media (max-width: 700px) {
.user-badge { padding-right: 8px; gap: 6px; }
.user-badge-avatar { width: 24px; height: 24px; }
.user-badge-meta { display: none; }
}
.status-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--text-dim);
display: inline-block;
margin-right: 8px;
transition: all 0.3s var(--ease);
}
.status-dot.live {
background: var(--success);
box-shadow: 0 0 10px rgba(127, 168, 120, 0.7);
}
/* Refresh + last-sync controls in masthead.
Visible after initial load. Time chip shows relative freshness;
button triggers a re-pull of leagues + news without page reload. */
.status-refresh {
display: inline-flex;
align-items: center;
gap: 8px;
padding-left: 16px;
border-left: 1px solid var(--border-soft);
}
.status-sync-time {
font-family: 'Roboto Mono', monospace;
font-size: 11px;
color: var(--text-dim);
letter-spacing: 0.02em;
}
.status-refresh-btn {
background: transparent;
border: 1px solid var(--border-soft);
color: var(--text-muted);
width: 26px; height: 26px;
border-radius: var(--r-full);
cursor: pointer;
font-size: 14px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s var(--ease);
}
.status-refresh-btn:hover {
border-color: var(--accent);
color: var(--accent);
transform: rotate(60deg);
}
.status-refresh-btn.spinning {
animation: status-spin 0.9s linear infinite;
color: var(--accent);
border-color: var(--accent);
}
@keyframes status-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (max-width: 700px) {
.status-refresh { padding-left: 10px; gap: 6px; }
.status-sync-time { font-size: 10px; }
}
/* ============================================================
LANDING PAGE (June 2026 refresh — matches app chrome)
============================================================ */
body.page-landing .site-header-actions,
body.page-setup .site-header-actions {
display: none;
}
.landing {
width: 100%;
padding: 0 0 72px;
}
.landing-hero-panel {
padding: 48px var(--app-pad-x) 64px;
border-bottom: 1px solid var(--border-soft);
background:
radial-gradient(ellipse 80% 60% at 20% 0%, rgba(212, 168, 75, 0.1) 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 90% 20%, rgba(160, 64, 80, 0.08) 0%, transparent 50%);
}
.landing-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
gap: clamp(32px, 5vw, 64px);
align-items: center;
max-width: 1280px;
margin: 0 auto;
}
@media (max-width: 960px) {
.landing-hero-grid {
grid-template-columns: 1fr;
text-align: center;
}
.landing-hero-copy .landing-hero-cta,
.landing-hero-copy .trust-strip,
.landing-hero-copy .format-strip { justify-content: center; }
.landing-hero-copy .format-strip { flex-direction: column; align-items: center; }
}
.landing-hero-copy { min-width: 0; }
.landing-hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 10px;
margin-bottom: 28px;
background: rgba(212, 168, 75, 0.1);
border: 1px solid rgba(212, 168, 75, 0.28);
border-radius: var(--r-full);
font-family: 'Fraunces', serif;
font-size: 15px;
color: var(--text-muted);
}
.landing-hero-badge em {
font-style: italic;
color: var(--accent);
}
.landing-hero-badge-icon {
width: 30px;
height: 30px;
flex-shrink: 0;
object-fit: contain;
object-position: center;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.landing-hero-title {
font-family: 'Fraunces', serif;
font-weight: 600;
font-size: clamp(44px, 6vw, 80px);
line-height: 1.02;
letter-spacing: -0.04em;
color: var(--text);
margin: 0 0 24px;
text-align: left;
}
@media (max-width: 960px) {
.landing-hero-title { text-align: center; }
}
.landing-hero-title em {
font-style: italic;
color: var(--accent);
font-weight: 600;
}
.landing-hero-lede {
font-size: clamp(16px, 1.6vw, 19px);
line-height: 1.65;
color: var(--text-muted);
max-width: 640px;
margin: 0 0 32px;
text-align: left;
}
@media (max-width: 960px) {
.landing-hero-lede { margin-left: auto; margin-right: auto; text-align: center; }
}
.landing-hero-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 20px;
margin-bottom: 8px;
}
.landing-hero-cta .cta-primary {
font-size: 16px;
padding: 16px 36px;
}
.landing-hero-cta .cta-meta {
font-size: 13px;
color: var(--text-dim);
font-weight: 500;
}
.landing-hero-visual { min-width: 0; }
.landing-preview-card {
background: var(--surface-card);
border: 1px solid rgba(212, 168, 75, 0.22);
border-radius: var(--r-xl);
padding: 24px 26px;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.landing-preview-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0.7;
}
.landing-preview-head {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 18px;
}
.landing-preview-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 22px;
}
.landing-preview-stat .n {
display: block;
font-family: 'Fraunces', serif;
font-size: 28px;
font-weight: 500;
color: var(--text);
line-height: 1.1;
font-feature-settings: var(--num-feature);
}
.landing-preview-stat .l {
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
margin-top: 4px;
}
.landing-preview-demo {
font-family: 'Roboto Mono', monospace;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 10px;
}
.landing-preview-exposure {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
}
.landing-preview-exposure-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
margin-right: 4px;
}
.landing-preview-exposure-chip {
font-size: 11px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(212, 168, 75, 0.12);
border: 1px solid rgba(212, 168, 75, 0.28);
color: var(--text-muted);
}
.landing-preview-exposure-chip strong {
color: var(--accent);
font-weight: 700;
}
.landing-preview-foot {
font-size: 11px;
line-height: 1.45;
color: var(--text-muted);
margin-top: 10px;
padding-top: 0;
border-top: none;
}
.tool-card-featured {
border-color: rgba(212, 168, 75, 0.45);
background: linear-gradient(165deg, rgba(212, 168, 75, 0.08), rgba(18, 10, 24, 0.4));
}
.landing-preview-league-card {
padding: 12px 14px;
background: rgba(18, 10, 24, 0.55);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
}
.landing-preview-league-card + .landing-preview-league-card {
margin-top: 8px;
}
.lpc-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.lpc-format {
font-family: 'Roboto Mono', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--accent);
text-transform: uppercase;
}
.lpc-rank {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
}
.lpc-rank-basis {
font-size: 8px;
letter-spacing: 0.06em;
margin-right: 4px;
color: var(--text-dim);
}
.lpc-name {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.lpc-arch {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: var(--r-full);
border: 1px solid var(--border-soft);
}
.lpc-arch.contender {
color: var(--accent);
border-color: rgba(212, 168, 75, 0.35);
background: rgba(212, 168, 75, 0.08);
}
.lpc-arch.rebuild {
color: #d27582;
border-color: rgba(194, 74, 90, 0.35);
background: rgba(194, 74, 90, 0.08);
}
.inside-tier {
display: inline-block;
font-family: 'Roboto Mono', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 10px;
}
.inside-tier.account {
color: var(--text-dim);
}
.landing-preview-leagues {
display: flex;
flex-direction: column;
gap: 8px;
}
.landing-preview-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
background: rgba(18, 10, 24, 0.45);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
font-size: 13px;
}
.landing-preview-row strong { color: var(--text); font-weight: 600; }
.landing-preview-row span { color: var(--text-muted); font-size: 12px; }
.landing-preview-pill {
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: var(--r-full);
background: rgba(127, 168, 120, 0.15);
color: var(--success);
border: 1px solid rgba(127, 168, 120, 0.3);
}
.landing-preview-pill.rebuild {
background: rgba(212, 168, 75, 0.12);
color: var(--accent);
border-color: rgba(212, 168, 75, 0.3);
}
/* Section frames — shared by why / inside */
.landing-section {
max-width: 1280px;
margin: 0 auto;
padding: 72px var(--app-pad-x) 0;
}
@media (max-width: 600px) {
.landing-section { padding-top: 56px; }
}
.landing-section-eyebrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 12px;
}
.landing-section-eyebrow::before {
content: '';
width: 24px;
height: 1px;
background: var(--accent);
}
.landing-section-title {
font-family: 'Fraunces', serif;
font-weight: 600;
font-size: 48px;
line-height: 1.1;
letter-spacing: -0.8px;
color: var(--text);
margin: 0 0 32px;
}
.landing-section-title em {
font-style: italic;
color: var(--accent);
font-weight: 600;
}
@media (max-width: 700px) {
.landing-section-title { font-size: 36px; }
}
/* WHY section — card panel */
.landing-why-card {
background: var(--surface-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-xl);
padding: clamp(28px, 4vw, 40px);
box-shadow: var(--shadow-md);
}
.landing-why-body {
max-width: none;
}
.landing-why-body p {
font-size: 17px;
line-height: 1.7;
color: var(--text-muted);
margin: 0 0 20px;
}
.landing-why-body p:last-child { margin-bottom: 0; }
/* INSIDE section — 2x2 grid of feature blocks */
.landing-inside-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-top: 12px;
}
@media (max-width: 800px) {
.landing-inside-grid { grid-template-columns: 1fr; gap: 16px; }
}
.inside-block {
padding: 26px 28px;
background: var(--surface-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.inside-block:hover {
background: var(--surface-card-hover);
border-color: rgba(212, 168, 75, 0.28);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.inside-block h3 {
font-family: 'Fraunces', serif;
font-weight: 600;
font-size: 22px;
color: var(--text);
margin: 0 0 12px;
letter-spacing: -0.3px;
}
.inside-block h3::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
margin-right: 10px;
vertical-align: middle;
box-shadow: 0 0 12px rgba(212, 168, 75, 0.55);
}
.inside-block p {
font-size: 15px;
line-height: 1.65;
color: var(--text-muted);
margin: 0;
}
/* METHODOLOGY and ABOUT sections were moved to standalone pages
(/methodology.html, /about.html). Their in-page CSS was removed
with this redesign. */
.landing-cta-band {
max-width: 1280px;
margin: 72px auto 0;
padding: 0 var(--app-pad-x);
}
.landing-cta-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 32px 36px;
background: var(--surface-card);
border: 1px solid rgba(212, 168, 75, 0.25);
border-radius: var(--r-xl);
box-shadow: var(--shadow-md);
}
.landing-cta-inner h2 {
font-family: 'Fraunces', serif;
font-size: clamp(24px, 3vw, 32px);
font-weight: 500;
letter-spacing: -0.02em;
margin: 0;
color: var(--text);
}
.landing-cta-inner h2 em {
font-style: italic;
color: var(--accent);
}
.landing-cta-inner p {
margin: 8px 0 0;
font-size: 14px;
color: var(--text-muted);
}
/* FOOTER — quiet */
.landing-footer-new {
max-width: 1280px;
margin: 48px auto 0;
padding: 36px var(--app-pad-x) 40px;
border-top: 1px solid var(--border-soft);
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.landing-footer-mark {
font-family: 'Fraunces', serif;
font-size: 16px;
color: var(--text-dim);
}
.landing-footer-mark em {
font-style: italic;
color: var(--accent);
}
.landing-footer-tag {
font-family: 'Roboto Mono', monospace;
font-size: 11px;
color: var(--text-muted);
letter-spacing: 1.5px;
text-transform: uppercase;
}
.landing-footer-links {
display: flex;
gap: 24px;
}
.landing-footer-new .footer-link {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--text-muted);
text-decoration: none;
cursor: pointer;
transition: color 0.15s var(--ease);
}
.landing-footer-new .footer-link:hover {
color: var(--accent);
}
.site-build-version {
flex-basis: 100%;
width: 100%;
margin-top: 10px;
font-family: 'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.06em;
opacity: 0.9;
}
/* ============================================================
UNIVERSAL APP FOOTER
Same pattern as landing footer, but lives outside the .landing
wrapper so it appears at the bottom of every in-app view.
============================================================ */
.app-footer {
width: 100%;
margin-top: 60px;
padding: 32px 40px;
border-top: 1px solid var(--border-soft);
background: var(--bg);
}
.app-footer-inner {
max-width: 1320px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.app-footer-mark {
font-family: 'Fraunces', serif;
font-size: 16px;
color: var(--text-dim);
}
.app-footer-mark em {
font-style: italic;
color: var(--accent);
}
.app-footer-tag {
font-family: 'Roboto Mono', monospace;
font-size: 11px;
color: var(--text-muted);
letter-spacing: 1.5px;
text-transform: uppercase;
}
.app-footer-links {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
.app-footer-links .footer-link {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--text-muted);
text-decoration: none;
cursor: pointer;
transition: color 0.15s var(--ease);
}
.app-footer-links .footer-link:hover {
color: var(--accent);
}
.app-footer-inner .site-build-version {
flex-basis: 100%;
width: 100%;
margin-top: 10px;
font-family: 'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;
font-size: 10px;
color: var(--text-muted);
letter-spacing: 0.06em;
opacity: 0.9;
}
@media (max-width: 600px) {
.app-footer { padding: 24px 16px; }
.app-footer-inner { gap: 12px; }
}
/* ============================================================
LANDING — LEGACY STYLES (kept as dead code; no markup uses them
in v1.4+; safe to remove in a future cleanup pass)
============================================================ */
.landing-grid {
display: grid;
/* Text column = 1fr, screenshot column = 1.3fr — screenshot is now the
dominant visual on the page. The screenshot is the "money shot" for
a tool whose value is visible portfolio density; selling it small
defeated the purpose. */
grid-template-columns: 1fr 1.3fr;
gap: 64px;
align-items: start;
margin-bottom: 120px;
}
@media (max-width: 900px) {
.landing { padding: 40px 24px; }
.landing-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 60px; }
}
.landing-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--accent);
margin-bottom: 28px;
font-weight: 600;
padding: 6px 14px;
background: rgba(212, 168, 75, 0.08);
border: 1px solid rgba(212, 168, 75, 0.2);
border-radius: var(--r-full);
}
.landing-eyebrow::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
}
.landing-title {
font-family: 'Fraunces', serif;
font-weight: 400;
font-size: 68px;
line-height: 0.98;
letter-spacing: -0.04em;
margin-bottom: 32px;
color: var(--text);
}
@media (max-width: 1100px) {
.landing-title { font-size: 56px; }
}
@media (max-width: 900px) {
.landing-title { font-size: 56px; }
}
@media (max-width: 600px) {
.landing-title { font-size: 44px; }
}
.landing-title em {
font-style: italic;
font-weight: 500;
color: var(--accent);
font-feature-settings: 'ss01' 1;
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.landing-lede {
font-size: 19px;
line-height: 1.55;
color: var(--text-muted);
max-width: 560px;
margin-bottom: 44px;
font-weight: 400;
}
.landing-cta-row {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.cta-meta {
font-size: 13px;
color: var(--text-dim);
font-weight: 500;
}
.landing-sidebar {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 60px;
}
.landing-stat-block {
padding: 22px 24px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
position: relative;
border-radius: var(--r-lg);
transition: all 0.25s var(--ease);
box-shadow: var(--shadow-sm);
}
.landing-stat-block:hover {
border-color: var(--border-hover);
transform: translateX(6px);
box-shadow: var(--shadow-md);
}
.landing-stat-num {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 28px;
color: var(--accent);
line-height: 1;
margin-bottom: 10px;
font-weight: 500;
}
.landing-stat-label {
font-size: 16px;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
letter-spacing: -0.005em;
}
.landing-stat-hint {
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
/* ===== Hero preview frame (right column) =====
Replaces the old 01/02/03 sidebar in the hero.
Has a real ![]()
slot for assets/portfolio-preview.png with a
stylized abstract fallback when the image is missing.
The fallback is intentionally NOT fake real-looking data — it's
gold gradient bars on aubergine that say "screenshot incoming"
without lying about what the product shows. */
.landing-preview {
padding-top: 40px;
display: flex;
flex-direction: column;
gap: 14px;
}
@media (max-width: 900px) {
.landing-preview { padding-top: 0; }
}
.preview-frame {
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
background: var(--bg-elev);
overflow: hidden;
box-shadow: var(--shadow-lg);
position: relative;
}
.preview-frame::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--r-lg);
pointer-events: none;
box-shadow: var(--shadow-inset);
}
.preview-chrome {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: var(--bg);
border-bottom: 1px solid var(--border-soft);
}
.preview-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--border);
}
.preview-url {
margin-left: 14px;
font-family: 'Roboto Mono', monospace;
font-size: 11px;
color: var(--text-dim);
letter-spacing: 0.02em;
}
.preview-shot {
/* Aspect ratio sized for a typical 16:9-ish screenshot. Keeps the
whole image visible (object-fit: contain) so nothing crops. */
aspect-ratio: 16 / 9;
background: var(--bg);
position: relative;
overflow: hidden;
}
.preview-shot img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
/* Crisper rendering on hi-DPI displays when the source isn't a perfect 2x */
image-rendering: -webkit-optimize-contrast;
}
/* Fallback: stylized abstract treatment shown only when the img fails.
No fake numbers, no fake team names — just brand-consistent shape. */
.preview-shot-placeholder {
position: absolute;
inset: 0;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 18px;
padding: 32px;
background:
radial-gradient(circle at 30% 20%, rgba(212, 168, 75, 0.08), transparent 60%),
radial-gradient(circle at 70% 80%, rgba(160, 64, 80, 0.06), transparent 60%),
var(--bg);
}
.preview-shot-fallback .preview-shot-placeholder { display: flex; }
.placeholder-mark {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 14px;
color: var(--accent);
letter-spacing: 0.02em;
opacity: 0.85;
}
.placeholder-bars {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 360px;
}
.placeholder-bar {
height: 8px;
border-radius: var(--r-full);
background: linear-gradient(90deg,
rgba(212, 168, 75, 0.35) 0%,
rgba(212, 168, 75, 0.12) 100%);
}
.placeholder-bar:nth-child(1) { width: 92%; }
.placeholder-bar:nth-child(2) { width: 78%; }
.placeholder-bar:nth-child(3) { width: 64%; }
.placeholder-bar:nth-child(4) { width: 86%; }
.placeholder-bar:nth-child(5) { width: 52%; }
.placeholder-note {
font-size: 11px;
color: var(--text-dim);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.preview-caption {
font-size: 12px;
color: var(--text-dim);
text-align: center;
font-family: 'Fraunces', serif;
font-style: italic;
}
/* ===== Format pills strip — answers "will it work for my weird league" =====
Sits below the CTA row in the hero. */
.format-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 24px;
padding-top: 0;
border-top: none;
}
.format-strip-label {
font-size: 11px;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.1em;
align-self: center;
margin-right: 8px;
}
.format-pill {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
padding: 6px 14px;
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
background: rgba(18, 10, 24, 0.35);
transition: all 0.18s var(--ease);
}
.format-pill:hover {
color: var(--accent);
border-color: rgba(212, 168, 75, 0.35);
}
/* ===== Trust strip — replaces the duplicated "no accounts" feature card.
Sits inline beneath the CTA. Compact, factual, no preachiness. */
.trust-strip {
display: flex;
flex-wrap: wrap;
gap: 14px 22px;
margin-top: 16px;
font-size: 12px;
color: var(--text-muted);
font-weight: 600;
}
.trust-strip span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.trust-strip span::before {
content: '✓';
color: var(--accent);
font-weight: 700;
}
/* ===== How it works — moved out of the hero sidebar.
Sits below the features grid, where the visitor sees it
after deciding they want in. */
.landing-howitworks {
margin-top: 80px;
padding-top: 64px;
border-top: 1px solid var(--border-soft);
}
.landing-howitworks-head {
text-align: center;
margin-bottom: 40px;
}
.howitworks-eyebrow {
font-size: 13px;
color: var(--accent);
font-weight: 600;
display: inline-block;
padding: 5px 12px;
background: rgba(212, 168, 75, 0.08);
border: 1px solid rgba(212, 168, 75, 0.2);
border-radius: var(--r-full);
margin-bottom: 16px;
}
.howitworks-title {
font-family: 'Fraunces', serif;
font-weight: 400;
font-size: 36px;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--text);
}
.howitworks-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 32px;
}
@media (max-width: 700px) {
.howitworks-grid { grid-template-columns: 1fr; }
.howitworks-title { font-size: 28px; }
}
.howitworks-step {
padding: 24px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
transition: all 0.25s var(--ease);
}
.howitworks-step:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.howitworks-num {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 28px;
color: var(--accent);
line-height: 1;
margin-bottom: 12px;
font-weight: 500;
}
.howitworks-label {
font-size: 17px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.howitworks-hint {
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
font-weight: 500;
}
.landing-features {
border-top: 1px solid var(--border-soft);
padding-top: 80px;
}
.landing-features-head {
margin-bottom: 48px;
max-width: 720px;
}
.landing-features-eyebrow {
font-size: 13px;
color: var(--accent);
margin-bottom: 20px;
font-weight: 600;
display: inline-block;
padding: 5px 12px;
background: rgba(212, 168, 75, 0.08);
border: 1px solid rgba(212, 168, 75, 0.2);
border-radius: var(--r-full);
text-transform: none;
letter-spacing: 0;
}
.landing-features-title {
font-family: 'Fraunces', serif;
font-weight: 400;
font-size: 48px;
line-height: 1.02;
letter-spacing: -0.03em;
color: var(--text);
}
/* H2 italic stays plain ivory — keeping the gold-gradient emphasis
reserved for the H1 wordmark and "armchair" so it doesn't flatten
from repetition. */
.landing-features-title em {
font-style: italic;
color: var(--text);
font-weight: 500;
opacity: 0.9;
}
/* Sub-headline under the section title that frames why these features exist */
.landing-features-lede {
font-size: 16px;
color: var(--text-muted);
line-height: 1.6;
max-width: 640px;
margin-top: 18px;
font-weight: 400;
}
@media (max-width: 700px) {
.landing-features-title { font-size: 32px; }
.landing-features-lede { font-size: 14px; }
}
.landing-features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
background: transparent;
border: none;
}
.feature-card {
background: var(--bg-elev);
padding: 28px 24px;
transition: all 0.2s var(--ease);
border-radius: var(--r-lg);
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-sm);
}
.feature-card:hover {
background: var(--bg-elev-2);
border-color: var(--border-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.feature-num {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 24px;
color: var(--accent);
margin-bottom: 16px;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
}
.feature-title {
font-family: 'Fraunces', serif;
font-weight: 500;
font-size: 22px;
letter-spacing: -0.015em;
margin-bottom: 10px;
color: var(--text);
}
.feature-text {
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
}
.landing-footer {
margin-top: 80px;
padding-top: 32px;
border-top: 1px solid var(--border-soft);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
flex-wrap: wrap;
}
.footer-mark {
font-family: 'Fraunces', serif;
font-weight: 700;
font-size: 18px;
letter-spacing: -0.025em;
}
.footer-mark em {
color: var(--accent);
font-style: italic;
font-weight: 500;
}
.footer-fine {
font-size: 13px;
color: var(--text-muted);
max-width: 700px;
line-height: 1.6;
}
.landing-footer-left {
display: flex;
flex-direction: column;
gap: 10px;
}
.landing-footer-right {
display: flex;
gap: 18px;
align-items: center;
}
.footer-link {
color: var(--text-muted);
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: color 0.12s var(--ease);
}
.footer-link:hover { color: var(--accent); }
/* ===== Info modal (About, Privacy) — full-screen overlay with centered card ===== */
.info-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s var(--ease);
}
.info-overlay.open {
opacity: 1;
pointer-events: auto;
}
.info-modal {
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 32px 36px;
max-width: 640px;
width: 100%;
max-height: calc(100vh - 48px);
overflow-y: auto;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
position: relative;
}
.info-close {
position: absolute;
top: 18px;
right: 18px;
background: transparent;
border: none;
color: var(--text-muted);
font-size: 22px;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: var(--r-sm);
transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.info-close:hover {
background: var(--bg-elev-2);
color: var(--text);
}
.info-eyebrow {
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
margin-bottom: 6px;
}
.info-title {
font-family: 'Fraunces', serif;
font-size: 32px;
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.1;
margin-bottom: 22px;
color: var(--text);
}
.info-body {
font-size: 14px;
line-height: 1.65;
color: var(--text);
}
.info-body p {
margin-bottom: 14px;
}
.info-body h3 {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
margin-top: 24px;
margin-bottom: 10px;
}
.info-body ul {
margin: 0 0 14px 20px;
padding: 0;
}
.info-body li {
margin-bottom: 6px;
}
.info-body code {
background: var(--bg-elev-2);
padding: 1px 6px;
border-radius: var(--r-sm);
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--accent);
}
.info-body strong { color: var(--text); font-weight: 700; }
/* Screenshot figures inside the About modal. Default state shows a
* placeholder (visible until an image is dropped at the corresponding
* assets/ path). When the image loads, it fills the frame; when it 404s,
* the onerror handler removes the ![]()
and the placeholder remains. */
.info-figure {
margin: 24px 0;
padding: 0;
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
overflow: hidden;
background: var(--bg);
position: relative;
}
.info-figure img {
display: block;
width: 100%;
height: auto;
}
.info-figure-placeholder {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 56px 24px;
background: linear-gradient(135deg, var(--bg-elev), var(--bg));
color: var(--text-dim);
text-align: center;
}
/* Show placeholder by default. When a real ![]()
is present and loads,
* it visually covers the placeholder. When the image 404s, onerror adds
* .info-figure-empty which reveals the placeholder via flex display. */
.info-figure:not(:has(img)) .info-figure-placeholder,
.info-figure-empty .info-figure-placeholder {
display: flex;
}
.info-figure-mark {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.info-figure-sub {
font-family: 'Roboto Mono', monospace;
font-size: 11px;
color: var(--text-dim);
opacity: 0.8;
}
.info-figure figcaption {
padding: 10px 16px;
font-size: 13px;
color: var(--text-muted);
background: var(--bg-elev);
border-top: 1px solid var(--border-soft);
font-style: italic;
}
@media (max-width: 600px) {
.info-modal { padding: 24px 22px; }
.info-title { font-size: 26px; }
.info-figure-placeholder { padding: 36px 16px; }
}
/* ============================================================
SETUP VIEW (login / Sleeper username — June 2026 refresh)
============================================================ */
.setup {
width: 100%;
padding: 20px var(--app-pad-x) 40px;
display: none;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
.setup.is-visible {
display: flex;
}
/* Instant connect screen on /connect — only while body is still on setup (not loading/app) */
html.route-connect body.page-setup #landingView {
display: none !important;
}
html.route-connect body.page-setup #setupView.setup {
display: flex !important;
}
.setup-shell {
width: min(100%, 640px);
margin: 0 auto;
}
.setup-topbar {
margin-bottom: 12px;
}
.back-to-landing {
appearance: none;
background: var(--bg-lift);
border: 1px solid var(--border-soft);
color: var(--text-muted);
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 8px 14px;
border-radius: var(--r-full);
transition: all 0.15s var(--ease);
box-shadow: none;
}
.back-to-landing:hover {
color: var(--accent);
border-color: rgba(212, 168, 75, 0.35);
background: rgba(212, 168, 75, 0.08);
transform: translateX(-2px);
}
.setup-card {
border: 1px solid rgba(212, 168, 75, 0.28);
background: var(--surface-card);
padding: 32px 32px 28px;
width: 100%;
position: relative;
border-radius: var(--r-xl);
box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.setup-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(212, 168, 75, 0.4), transparent 42%, rgba(160, 64, 80, 0.18));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* Progress stepper — visual path, not the tiny pill grid */
.setup-stepper {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
margin: 22px 0 26px;
padding: 0 8px;
}
.setup-stepper-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 72px;
text-align: center;
}
.setup-stepper-num {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
font-weight: 700;
border: 2px solid var(--border);
color: var(--text-muted);
background: var(--bg);
transition: all 0.2s var(--ease);
}
.setup-stepper-step.is-active .setup-stepper-num {
border-color: var(--accent);
color: #120a18;
background: linear-gradient(135deg, var(--accent-soft), var(--accent-deep));
box-shadow: var(--glow);
}
.setup-stepper-step.is-next .setup-stepper-num {
border-color: rgba(212, 168, 75, 0.35);
color: var(--accent);
}
.setup-stepper-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
line-height: 1.2;
}
.setup-stepper-step.is-active .setup-stepper-label {
color: var(--accent);
}
.setup-stepper-connector {
flex: 1;
min-width: 24px;
max-width: 80px;
height: 2px;
margin-top: 18px;
background: linear-gradient(90deg, var(--accent), var(--border-soft));
opacity: 0.65;
}
.setup-stepper-connector.is-dim {
background: var(--border-soft);
opacity: 1;
}
.setup-form-panel {
background: rgba(18, 10, 24, 0.55);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 20px 20px 18px;
margin-bottom: 4px;
}
.setup-field-label {
display: block;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-dim);
margin-bottom: 8px;
}
.setup-field-hint {
font-size: 12px;
color: var(--text-muted);
margin: -4px 0 14px;
line-height: 1.45;
}
.setup-field-grid {
display: grid;
grid-template-columns: 1fr 148px;
gap: 14px;
align-items: end;
}
@media (max-width: 520px) {
.setup-field-grid { grid-template-columns: 1fr; }
.setup-card { padding: 24px 20px 20px; }
.setup-stepper-step { min-width: 64px; }
}
.setup-form input[type="text"],
.setup-form select {
width: 100%;
max-width: none;
font-size: 16px;
padding: 13px 16px;
}
.setup-form select {
font-weight: 600;
cursor: pointer;
}
.setup-action {
margin-top: 18px;
padding-top: 0;
border-top: none;
}
.setup-action .row {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
@media (max-width: 480px) {
.setup-action .row { flex-direction: column; align-items: stretch; }
.setup-action .cta-primary { width: 100%; }
}
.setup-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--accent);
margin-bottom: 18px;
font-weight: 600;
padding: 5px 12px;
background: rgba(212, 168, 75, 0.08);
border: 1px solid rgba(212, 168, 75, 0.2);
border-radius: var(--r-full);
text-transform: none;
letter-spacing: 0;
}
.setup-title {
font-family: 'Fraunces', serif;
font-weight: 500;
font-size: 34px;
line-height: 1.05;
letter-spacing: -0.03em;
margin-bottom: 8px;
color: var(--text);
}
.setup-title em {
font-style: italic;
font-weight: 500;
color: var(--accent);
}
.setup-lede {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 0;
line-height: 1.5;
}
.setup-step {
border-top: none;
padding: 0;
}
.setup-step.setup-action { padding: 0; border-top: none; }
.step-label {
font-size: 13px;
color: var(--accent);
margin-bottom: 8px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
font-family: 'Inter', sans-serif;
}
.step-optional {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
font-size: 10px;
font-weight: 600;
color: var(--text-dim);
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
text-transform: uppercase;
letter-spacing: 0.04em;
vertical-align: middle;
}
.step-title {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.015em;
margin-bottom: 8px;
color: var(--text);
}
.step-hint {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 16px;
line-height: 1.55;
}
.step-hint a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* ============================================================
FORM ELEMENTS
============================================================ */
input[type="text"], select {
background: var(--bg-elev);
border: 1px solid var(--border);
color: var(--text);
padding: 13px 16px;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
width: 280px;
outline: none;
border-radius: var(--r-md);
transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
}
input[type="text"]::placeholder {
color: var(--text-dim);
font-weight: 400;
}
input[type="text"]:hover, select:hover {
border-color: var(--border-hover);
}
input[type="text"]:focus, select:focus {
border-color: var(--accent);
background: var(--bg-elev-2);
box-shadow: var(--focus-ring);
}
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* ============================================================
BUTTONS
============================================================ */
button {
background: var(--bg-lift);
color: var(--text);
border: 1px solid var(--border);
padding: 10px 18px;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
border-radius: var(--r-md);
transition: all 0.15s var(--ease);
box-shadow: var(--shadow-sm), var(--shadow-inset);
}
button:hover {
background: var(--bg-elev-2);
border-color: var(--border-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md), var(--shadow-inset);
}
button:active { transform: translateY(0); }
button:disabled {
background: var(--bg-elev);
color: var(--text-dim);
border-color: var(--border-soft);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.cta-primary,
button.cta-primary,
a.cta-primary {
background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--accent-deep) 100%);
color: #120a18;
border: 1px solid rgba(168, 132, 47, 0.9);
padding: 14px 28px;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.005em;
border-radius: var(--r-full);
box-shadow: var(--glow), 0 2px 0 rgba(255, 255, 255, 0.15) inset;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.12s var(--ease), box-shadow 0.15s var(--ease);
}
.cta-primary:hover,
button.cta-primary:hover,
a.cta-primary:hover {
background: linear-gradient(135deg, #e8c978 0%, var(--accent-soft) 50%, var(--accent) 100%);
border-color: var(--accent-soft);
transform: translateY(-2px);
box-shadow: 0 10px 36px rgba(212, 168, 75, 0.45), 0 2px 0 rgba(255, 255, 255, 0.2) inset;
}
button.cta-primary:disabled,
a.cta-primary:disabled {
background: var(--border);
color: var(--text-dim);
border-color: var(--border);
box-shadow: none;
transform: none;
}
button.ghost {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
box-shadow: none;
}
button.ghost:hover {
background: var(--bg-elev);
border-color: var(--border-hover);
}
button.small { padding: 8px 14px; font-size: 12px; border-radius: var(--r-sm); }
/* ============================================================
FILE DROP
============================================================ */
.file-drop {
display: block;
border: 1.5px dashed var(--border);
padding: 28px 24px;
font-size: 14px;
color: var(--text-muted);
background: var(--bg-elev);
transition: all 0.2s var(--ease);
cursor: pointer;
border-radius: var(--r-lg);
font-weight: 500;
text-align: center;
}
.file-drop:hover {
border-color: var(--accent);
color: var(--text);
background: var(--bg-elev-2);
transform: translateY(-1px);
}
.file-drop.loaded {
border-color: var(--accent);
border-style: solid;
color: var(--text);
background: linear-gradient(180deg, rgba(212, 168, 75, 0.08) 0%, var(--bg-elev-2) 100%);
}
.file-drop input { display: none; }
/* ============================================================
PILLS / TAGS
============================================================ */
.pill {
display: inline-flex;
align-items: center;
padding: 5px 12px;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
border: 1px solid var(--border);
color: var(--text-muted);
background: var(--bg-elev);
border-radius: var(--r-full);
}
.pill.live {
border-color: var(--accent);
color: var(--accent);
background: rgba(212, 168, 75, 0.1);
}
/* Main layout */
.app-shell { display: none; }
.app-shell.active { display: block; }
.mode-bar {
padding: 10px clamp(20px, 4vw, 40px) 0;
border-bottom: none;
background: var(--bg-elev);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
max-width: 100%;
}
.key-button {
appearance: none;
background: var(--bg);
border: 1px solid var(--border-soft);
color: var(--text-muted);
padding: 7px 14px;
border-radius: var(--r-full);
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
transition: all 0.15s var(--ease);
}
.key-button:hover {
color: var(--accent);
border-color: var(--accent);
}
.key-button-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--bg-elev-2);
font-size: 11px;
font-weight: 700;
}
.key-button:hover .key-button-icon {
background: var(--accent);
color: var(--bg);
}
@media (max-width: 700px) {
.mode-bar { padding: 8px 20px; }
}
.sub-nav {
border-bottom: 1px solid var(--border-soft);
padding: 8px clamp(20px, 4vw, 40px) 16px;
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
background: var(--bg-elev);
box-shadow: inset 0 1px 0 var(--surface-top);
/* On desktop: no overflow constraint so the league-picker popover
(position: absolute, anchored here) isn't clipped. Tabs fit in
any desktop viewport so this is fine. */
}
/* On mobile: scope the overflow fix here. When the strip exceeds
viewport width (long league names, many tabs), it scrolls INSIDE
the strip instead of pushing the page wider. Popover clipping is
a lesser issue on mobile and can be addressed separately. */
@media (max-width: 700px) {
.sub-nav {
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
max-width: 100%;
}
.sub-nav::-webkit-scrollbar { display: none; }
}
.nav-tab {
padding: 10px 18px;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
border: 1px solid transparent;
border-radius: var(--r-full);
transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
white-space: nowrap;
margin-bottom: 0;
letter-spacing: -0.01em;
}
.nav-tab:hover {
color: var(--text);
background: var(--bg-lift);
border-color: var(--border-soft);
}
.nav-tab.active {
color: var(--text);
background: linear-gradient(180deg, rgba(212, 168, 75, 0.22) 0%, rgba(212, 168, 75, 0.08) 100%);
border-color: rgba(212, 168, 75, 0.38);
box-shadow: 0 2px 14px rgba(212, 168, 75, 0.12);
}
/* League nav tab wrapper — holds the tab itself, the picker chevron, and
* the dropdown popover. Relative positioning anchors the popover below. */
.nav-tab-league-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.nav-tab-league-wrap .nav-tab {
padding-right: 6px;
}
.nav-tab-league-chevron {
background: var(--bg-lift);
border: 1px solid var(--border-soft);
color: var(--text-muted);
font-size: 11px;
cursor: pointer;
padding: 10px 12px;
border-radius: var(--r-full);
font-family: inherit;
transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
margin-bottom: 0;
margin-left: -2px;
}
.nav-tab-league-chevron:hover {
color: var(--accent);
border-color: rgba(212, 168, 75, 0.35);
background: rgba(212, 168, 75, 0.08);
}
/* League picker — body-level centered modal (works when sidebar is hidden) */
.league-picker-popover {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
pointer-events: none;
}
.league-picker-popover[hidden] { display: none !important; }
body.league-picker-open { overflow: hidden; }
.league-picker-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 1099;
}
.league-picker-sheet {
pointer-events: auto;
position: relative;
z-index: 1101;
width: min(400px, 100%);
max-height: min(82vh, 640px);
display: flex;
flex-direction: column;
background: var(--bg-elev);
border: 1px solid rgba(212, 168, 75, 0.22);
border-radius: var(--r-lg);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
overflow: hidden;
}
.league-picker-head {
position: relative;
padding: 18px 18px 12px;
border-bottom: 1px solid var(--border-soft);
flex-shrink: 0;
}
.league-picker-title {
font-family: 'Fraunces', serif;
font-size: 20px;
font-weight: 500;
color: var(--text);
margin: 0 36px 6px 0;
}
.league-picker-sub {
font-size: 13px;
line-height: 1.45;
color: var(--text-muted);
margin: 0;
padding-right: 28px;
}
.league-picker-close {
position: absolute;
top: 14px;
right: 12px;
width: 40px;
height: 40px;
border: none;
border-radius: var(--r-full);
background: var(--bg-lift);
color: var(--text-muted);
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.league-picker-close:hover { color: var(--text); }
.league-picker-input {
width: 100%;
padding: 14px 16px;
background: transparent;
border: none;
border-bottom: 1px solid var(--border-soft);
color: var(--text);
font-family: 'Inter', sans-serif;
font-size: 16px;
outline: none;
flex-shrink: 0;
}
.league-picker-input::placeholder { color: var(--text-dim); }
.league-picker-input:focus { border-bottom-color: var(--accent); }
.league-picker-list {
flex: 1;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.league-picker-item {
width: 100%;
text-align: left;
appearance: none;
padding: 14px 16px;
cursor: pointer;
border: none;
border-bottom: 1px solid var(--border-soft);
background: transparent;
transition: background 0.1s;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.league-picker-item:last-child { border-bottom: none; }
.league-picker-item:hover,
.league-picker-item:active { background: var(--bg-elev-2); }
.league-picker-item.active { background: rgba(212, 168, 75, 0.08); }
.league-picker-item-name {
font-size: 14px;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.league-picker-item-tag {
font-family: 'Roboto Mono', monospace;
font-size: 10px;
color: var(--text-muted);
flex-shrink: 0;
}
.league-picker-empty {
padding: 18px 14px;
text-align: center;
font-size: 12px;
color: var(--text-dim);
}
/* ===== Mobile bottom tab bar — only visible <700px ===== */
.mobile-bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 90;
background: var(--chrome-glass);
border-top: 1px solid rgba(212, 168, 75, 0.15);
padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
backdrop-filter: saturate(140%) blur(16px);
-webkit-backdrop-filter: saturate(140%) blur(16px);
}
.mobile-nav-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 8px 4px;
color: var(--text-dim);
cursor: pointer;
transition: color 0.12s var(--ease), background 0.12s var(--ease);
gap: 2px;
border-radius: var(--r-md);
margin: 0 2px;
-webkit-tap-highlight-color: transparent;
}
.mobile-nav-tab:active { color: var(--accent); }
.mobile-nav-tab.active {
color: var(--accent);
background: rgba(212, 168, 75, 0.1);
}
.mobile-nav-icon {
font-size: 20px;
line-height: 1;
font-weight: 400;
}
.mobile-nav-label {
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
}
@media (max-width: 700px) {
.mobile-bottom-nav {
display: flex;
}
/* Padding at the bottom of the page so content isn't hidden behind the
fixed bottom nav (which is ~90px tall). The longhand value here is
critical — using `padding: 24px 20px` shorthand below would reset
padding-bottom to 24px and let the nav cover the last ~70px of every
page (real bug from a previous edit). */
.view {
padding: 24px 20px 110px;
}
.sub-nav { padding: 0 20px; }
}
.view {
padding: 40px var(--app-pad-x) 48px;
display: none;
width: 100%;
max-width: none;
margin: 0;
box-sizing: border-box;
}
.view.active { display: block; }
/* Desktop: restore comfortable type scale in chrome (mobile stays compact) */
@media (min-width: 900px) {
.nav-tab { font-size: 14px; padding: 11px 20px; }
.overview-title { font-size: 44px; }
.team-tab { font-size: 14px; padding: 10px 18px; }
}
/* League overview */
.overview-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 28px;
padding-bottom: 0;
border-bottom: none;
}
.overview-title {
font-family: 'Fraunces', serif;
font-size: 44px;
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--text);
}
@media (max-width: 700px) {
.overview-title { font-size: 32px; }
}
.overview-title em {
font-style: italic;
color: var(--accent);
font-weight: 500;
}
.overview-sub {
font-size: 14px;
color: var(--text-muted);
margin-top: 10px;
font-weight: 500;
}
.overview-meta {
display: flex;
gap: 28px;
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--text-muted);
}
/* ===== Snapshot panel ===== */
.snapshot-panel {
display: flex;
flex-wrap: wrap;
/* Cards size to their content rather than filling the row equally. Old
* grid (auto-fit minmax 280px, 1fr) stretched 3 cards to ~565px each on
* a 1700px container, producing acres of empty canvas inside cards that
* only had 2-3 short stats. Flex-wrap lets each card claim only the
* width it needs and wrap to the next line if too many to fit. */
gap: 14px;
margin-bottom: 24px;
}
/* ===== Stat strip — finance-dashboard pattern ===== */
/* Single horizontal container with thin vertical dividers between stat
* groups. Replaces the multi-card snapshot panels on All Leagues and
* Assets. No per-card framing, no height-balancing problem — everything
* lives in one strip.
*
* width: fit-content makes the strip size to its content width rather
* than stretching to fill its parent. Works whether the parent is a
* normal block or a flex container — fixes the "strip too wide for
* its content" problem that block/flex stretching kept producing. */
.stat-strip {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 24px;
padding: 16px 22px;
background: var(--surface-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
width: fit-content;
max-width: 100%;
}
.stat-strip-group {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.stat-strip-grouplabel {
font-family: 'Inter', sans-serif;
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.stat-strip-subnote {
/* Same font family/case/weight as the group label so they read as a
* related pair, not two different label systems shoulder-to-shoulder. */
font-family: 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
color: var(--text-muted);
margin-left: 8px;
font-size: 9px;
}
.stat-strip-cells {
display: flex;
gap: 18px;
align-items: flex-start;
/* Thin divider lines between individual cells within a group — keeps
* 4 numbers from blurring into a single wall. Subtle: 1px @ ~25% alpha. */
}
.stat-strip-cell {
display: flex;
flex-direction: column;
line-height: 1.05;
padding-right: 18px;
border-right: 1px solid var(--border-soft);
}
.stat-strip-cell:last-child {
padding-right: 0;
border-right: none;
}
.stat-strip-num {
font-family: 'Fraunces', serif;
font-weight: 500;
font-size: 22px;
color: var(--text);
font-feature-settings: var(--num-feature);
letter-spacing: -0.01em;
}
.stat-strip-num.accent { color: var(--accent); }
.stat-strip-num.muted { color: var(--text-muted); }
.stat-strip-label {
font-family: 'Inter', sans-serif;
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
margin-top: 3px;
}
.stat-strip-sub {
font-family: 'Roboto Mono', monospace;
font-size: 10px;
color: var(--text-muted);
margin-top: 2px;
}
.stat-strip-divider {
/* Stronger contrast than --border-soft so the group separator actually
* reads against the dark elevated card background. */
width: 1px;
background: var(--border-hover);
align-self: stretch;
}
.stat-strip-arch-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.stat-strip-arch-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.stat-strip-footnote {
font-size: 12px;
line-height: 1.5;
color: var(--text-muted);
margin: -12px 0 20px;
max-width: 720px;
}
@media (max-width: 700px) {
.stat-strip { gap: 16px; padding: 12px 14px; }
.stat-strip-divider { display: none; }
.stat-strip-group { width: 100%; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.stat-strip-group:last-child { border-bottom: none; padding-bottom: 0; }
}
.snapshot-tile {
background: var(--surface-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
/* Tighter padding for snapshot tiles — they carry 3 small stats each,
* full section-card padding (22px) made them feel cavernous. */
padding: 12px 14px;
box-shadow: var(--shadow-sm);
min-width: 0;
/* Critical: stop the snapshot-panel grid from stretching every card to
* match the tallest cell. Without this, tightening padding/fonts on the
* smaller cards has no visible effect because they're vertically locked
* to whichever card has the most content (typically Archetype Mix). */
align-self: start;
}
/* Snapshot tiles get a more compact header treatment — less air between
* title and stats, since these cards are summary glances, not deep
* sections that need visual hierarchy. */
.snapshot-tile .section-card-head {
margin-bottom: 8px;
padding-bottom: 8px;
}
/* Smaller stat numbers + tighter sub-text inside snapshot tiles. The
* big section-card stat-block treatment (26px num, gap stack) is right
* for a focused section but oversized for a 3-stat summary row. */
.snapshot-tile .stat-block-num {
font-size: 22px;
line-height: 1.05;
}
.snapshot-tile .stat-block-sub {
font-size: 10px;
margin-top: 0;
}
/* Snapshot tiles use a tighter stat layout — stats sit left-aligned with
* fixed horizontal gap rather than expanding to fill the row, eliminating
* the trailing empty space that made 3-stat cards feel cavernous. */
.snapshot-tile .stat-grid {
display: flex;
flex-wrap: wrap;
gap: 22px;
}
.snapshot-tile .stat-block {
flex: 0 0 auto;
}
/* Segmented toggle on the Portfolio Value snapshot card — switches between
* full-roster value and starting-lineup-only value. Same control reused for
* the league grid sort toggle. */
.snapshot-toggle {
display: inline-flex;
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
padding: 2px;
gap: 0;
flex-shrink: 0;
}
.snapshot-toggle-btn {
background: none;
border: none;
color: var(--text-dim);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 5px 12px;
border-radius: var(--r-full);
cursor: pointer;
transition: background 160ms var(--ease), color 160ms var(--ease);
}
.snapshot-toggle-btn:hover { color: var(--text); }
.snapshot-toggle-btn.active {
background: var(--accent);
color: var(--bg);
}
/* League grid sort toggle bar — sits above the league cards on All Leagues */
.league-grid-sort {
display: flex;
justify-content: flex-end;
margin: 0 0 12px 0;
}
.snapshot-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
margin-bottom: 8px;
}
.snapshot-big {
font-family: 'Fraunces', serif;
font-size: 32px;
font-weight: 500;
color: var(--text);
letter-spacing: -0.02em;
line-height: 1;
font-feature-settings: 'tnum' 1;
}
.snapshot-sub {
font-size: 12px;
color: var(--text-muted);
margin-top: 6px;
font-weight: 500;
}
.snapshot-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border-soft);
}
.snapshot-pair-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.snapshot-pair-value {
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--text);
margin-top: 3px;
font-feature-settings: 'tnum' 1;
}
.snapshot-pair-pct {
font-size: 11px;
color: var(--accent);
font-weight: 600;
margin-top: 1px;
}
.snapshot-chart-wrap {
margin-top: 8px;
padding: 4px 0;
}
.snapshot-chart-foot {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
}
.snapshot-chart-bookend {
min-width: 0;
text-align: center;
}
.snapshot-chart-bookend:first-child { text-align: left; }
.snapshot-chart-bookend:last-child { text-align: right; }
.snapshot-chart-bookend-label {
font-size: 9px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.snapshot-chart-bookend-name {
font-size: 11px;
color: var(--text-muted);
font-weight: 500;
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.snapshot-chart-bookend-val {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--text);
font-weight: 700;
margin-top: 2px;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.015em;
}
.snapshot-chart-bookend-val.accent { color: var(--accent); }
/* Archetype mix — inline pills, not stacked rows. Stacking 5+ postures
* vertically made this card 2x the height of its siblings; horizontal
* flow keeps it compact and matches snapshot-tile heights. */
.snapshot-arch-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.snapshot-arch-row {
display: inline-flex;
align-items: center;
gap: 5px;
/* Subtle bg chip so pill+count read as a single unit */
padding-right: 2px;
}
.snapshot-arch-pill {
padding: 3px 10px;
font-size: 11px;
font-weight: 700;
border-radius: var(--r-full);
letter-spacing: 0.02em;
white-space: nowrap;
}
.snapshot-arch-count {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--text);
font-feature-settings: 'tnum' 1;
}
@media (max-width: 900px) {
.snapshot-panel > .snapshot-tile { flex: 1 1 100%; }
.snapshot-tile-wide { order: -1; }
}
/* ===== Cross-league injury strip ===== */
/* Sits below the snapshot panel on All Leagues. Collapses entirely when
nobody is hurt. When visible, lists each injured player rostered in any
of your leagues, what their status is, and which leagues they're on.
Goal: you don't have to dive into each league's roster to find lineup
problems for the week. */
.portfolio-exposure-hero {
margin-bottom: 20px;
}
.exposure-hero {
padding: 18px 20px;
border: 1px solid rgba(212, 168, 75, 0.28);
background: linear-gradient(165deg, rgba(212, 168, 75, 0.07), rgba(18, 10, 24, 0.5));
border-radius: var(--r-lg);
}
.exposure-hero-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.exposure-hero-title {
font-family: 'Fraunces', serif;
font-size: 20px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--text);
}
.exposure-hero-sub {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
.exposure-hero-cta {
font-size: 12px;
font-weight: 600;
color: var(--accent);
background: transparent;
border: 1px solid rgba(212, 168, 75, 0.35);
border-radius: 999px;
padding: 8px 14px;
cursor: pointer;
white-space: nowrap;
}
.exposure-hero-cta:hover {
border-color: var(--accent);
background: rgba(212, 168, 75, 0.08);
}
.exposure-hero-body {
display: grid;
grid-template-columns: 1.4fr 1fr auto;
gap: 18px;
align-items: start;
}
@media (max-width: 900px) {
.exposure-hero-body { grid-template-columns: 1fr; }
}
.exposure-hero-col-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 10px;
}
.exposure-hero-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.exposure-hero-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px 6px 6px;
border-radius: 999px;
border: 1px solid var(--border-soft);
background: rgba(18, 10, 24, 0.55);
cursor: pointer;
color: inherit;
font: inherit;
}
.exposure-hero-chip:hover {
border-color: rgba(212, 168, 75, 0.45);
}
.exposure-hero-chip-risk {
border-color: rgba(212, 100, 74, 0.45);
background: rgba(212, 100, 74, 0.08);
}
.exposure-hero-chip .avatar {
width: 28px;
height: 28px;
min-width: 28px;
}
.exposure-hero-chip-name {
font-size: 12px;
font-weight: 600;
color: var(--text);
}
.exposure-hero-chip-count {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--accent);
font-weight: 700;
}
.exposure-hero-pos-row {
display: grid;
grid-template-columns: 28px 1fr 36px;
gap: 8px;
align-items: center;
margin-bottom: 6px;
}
.exposure-hero-pos-label {
font-size: 10px;
font-weight: 700;
color: var(--text-dim);
}
.exposure-hero-pos-track {
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
}
.exposure-hero-pos-fill {
height: 100%;
border-radius: 999px;
background: var(--accent);
opacity: 0.85;
}
.exposure-hero-pos-pct {
font-size: 10px;
font-family: 'JetBrains Mono', monospace;
color: var(--text-muted);
text-align: right;
}
.exposure-hero-tilt {
font-size: 11px;
color: var(--text-muted);
margin-top: 10px;
line-height: 1.45;
}
.exposure-hero-stats {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 120px;
}
.exposure-hero-stat {
padding: 10px 12px;
border-radius: var(--r-md);
border: 1px solid var(--border-soft);
background: rgba(18, 10, 24, 0.45);
}
.exposure-hero-stat-num {
font-family: 'JetBrains Mono', monospace;
font-size: 22px;
font-weight: 700;
color: var(--accent);
line-height: 1;
}
.exposure-hero-stat-lbl {
font-size: 10px;
color: var(--text-dim);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.exposure-hero-rookies {
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
line-height: 1.4;
}
.exposure-hero-rookies span {
cursor: pointer;
color: var(--accent);
}
.player-value-wrap {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
min-width: 72px;
}
.value-trust-chip {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--border-soft);
background: rgba(18, 10, 24, 0.5);
cursor: help;
}
.drawer-value-why {
margin: 0 20px 16px;
padding: 12px 14px;
border-radius: var(--r-md);
border: 1px solid rgba(212, 168, 75, 0.22);
background: rgba(212, 168, 75, 0.05);
}
.drawer-value-why-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 6px;
}
.drawer-value-why p {
font-size: 12px;
line-height: 1.5;
color: var(--text-muted);
margin: 0;
}
.value-trust-footnote {
font-size: 11px;
line-height: 1.45;
color: var(--text-dim);
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border-soft);
}
.injury-strip {
margin-bottom: 20px;
padding: 16px 20px;
border: 1px solid rgba(212, 140, 74, 0.25);
background: linear-gradient(180deg, rgba(212, 140, 74, 0.06), transparent 80%);
border-radius: var(--r-lg);
}
.league-injury-report.injury-strip {
margin: 0 0 20px;
}
.injury-strip-head-inline {
margin-bottom: 10px;
justify-content: flex-end;
}
.injury-strip-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.injury-strip-title {
font-family: 'Fraunces', serif;
font-size: 18px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--text);
display: flex;
align-items: center;
gap: 10px;
}
.injury-strip-title-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--warn);
box-shadow: 0 0 8px rgba(212, 140, 74, 0.6);
}
.injury-strip-count {
font-family: 'Roboto Mono', monospace;
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.injury-strip-rows {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 8px;
}
.injury-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
cursor: pointer;
transition: all 0.15s var(--ease);
}
.injury-row:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.injury-row-pos {
font-family: 'Roboto Mono', monospace;
font-size: 10px;
font-weight: 700;
padding: 3px 6px;
border-radius: var(--r-full);
background: var(--bg-elev-2);
color: var(--text-muted);
letter-spacing: 0.04em;
}
.injury-row-main { flex: 1; min-width: 0; }
.injury-row-name {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.injury-row-meta {
font-size: 11px;
color: var(--text-dim);
margin-top: 2px;
}
.injury-row-status {
font-family: 'Roboto Mono', monospace;
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: var(--r-full);
border: 1px solid;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.injury-row-status.status-out { color: var(--accent-2); border-color: rgba(194, 74, 90, 0.4); background: rgba(194, 74, 90, 0.08); }
.injury-row-status.status-doubtful { color: var(--warn); border-color: rgba(212, 140, 74, 0.4); background: rgba(212, 140, 74, 0.08); }
.injury-row-status.status-questionable { color: var(--accent); border-color: rgba(212, 168, 75, 0.35); background: rgba(212, 168, 75, 0.08); }
.injury-row-status.status-ir { color: var(--accent-2); border-color: rgba(194, 74, 90, 0.4); background: rgba(194, 74, 90, 0.1); }
.injury-row-status.status-other { color: var(--text-dim); border-color: var(--border-soft); }
.injury-strip-toggle {
background: transparent;
border: 1px solid var(--border-soft);
color: var(--text-muted);
font-size: 11px;
padding: 5px 12px;
border-radius: var(--r-full);
cursor: pointer;
font-weight: 600;
letter-spacing: 0.03em;
transition: all 0.15s var(--ease);
}
.injury-strip-toggle:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 700px) {
.injury-strip { padding: 12px 14px; }
.injury-strip-rows { grid-template-columns: 1fr; }
}
/* Portfolio sort controls */
.overview-controls {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.overview-sort-group {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.overview-sort-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-dim);
font-weight: 600;
}
.overview-sort-picker {
position: relative;
display: inline-flex;
align-items: center;
}
.overview-sort-picker::after {
content: '▾';
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--text-muted);
font-size: 10px;
}
.overview-select {
appearance: none;
-webkit-appearance: none;
padding: 7px 30px 7px 14px;
font-size: 13px;
font-weight: 600;
font-family: 'Inter', sans-serif;
color: var(--text);
background: var(--bg-lift);
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
cursor: pointer;
transition: all 0.15s var(--ease);
min-width: 170px;
}
.overview-select:hover { border-color: var(--border-hover); background: var(--bg-elev-2); }
.overview-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.overview-sort-dir {
appearance: none;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
color: var(--text);
padding: 7px 14px 7px 11px;
font-size: 13px;
font-weight: 600;
font-family: 'Inter', sans-serif;
border-radius: var(--r-full);
cursor: pointer;
transition: all 0.15s var(--ease);
display: inline-flex;
align-items: center;
gap: 6px;
}
.overview-sort-dir:hover { border-color: var(--accent); color: var(--accent); }
#portfolioSortDirIcon {
font-size: 14px;
line-height: 1;
}
@media (max-width: 700px) {
.overview-controls { justify-content: flex-start; }
.overview-sort-group { width: 100%; }
.overview-select { flex: 1; }
}
.overview-meta strong {
color: var(--text);
font-weight: 500;
font-size: 20px;
display: block;
}
.league-grid {
display: grid;
/* Scale columns with viewport — fills wide monitors without a narrow content column */
grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
gap: 18px;
width: 100%;
}
@media (min-width: 1600px) {
.league-grid {
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 20px;
}
}
/* ===== League list (row-based portfolio view) =====
Replaces the old grid card layout for portfolio density. At 28 leagues
the grid was overwhelming — 5 cards per row × 6 rows + scrolling. The list
view shows ~10 dense rows per screenful with the same data. */
.league-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.league-row {
display: grid;
/* rank | identity | format/archetype stack | position pills | stats group | chevron
Wider columns, more breathing room. The stats group fills the right side
so we don't have wasted whitespace on desktop. */
grid-template-columns: 64px minmax(0, 1.6fr) 130px minmax(0, 1.2fr) minmax(0, 2fr) 24px;
gap: 18px;
align-items: center;
padding: 16px 20px;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
cursor: pointer;
transition: all 0.18s var(--ease);
box-shadow: var(--shadow-sm);
}
.league-row:hover {
background: var(--bg-elev-2);
border-color: var(--border-hover);
transform: translateX(2px);
box-shadow: var(--shadow-md);
}
.league-row-rank {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 14px;
color: var(--text-muted);
text-align: center;
line-height: 1.1;
}
.league-row-rank strong {
display: block;
font-size: 28px;
color: var(--text);
font-style: italic;
font-weight: 500;
line-height: 1;
margin-bottom: 2px;
}
.league-row-rank.top strong { color: var(--accent); }
.league-row-identity {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.league-row-identity-text { min-width: 0; }
.league-row-name {
font-family: 'Fraunces', serif;
font-weight: 500;
font-size: 17px;
color: var(--text);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.league-row-meta {
font-size: 12px;
color: var(--text-muted);
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Format chip + archetype label stacked vertically — saves horizontal space
for the more-important stats group on the right. */
.league-row-tags {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
}
.league-row-format {
font-family: 'Roboto Mono', monospace;
font-size: 11px;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.06em;
background: rgba(212, 168, 75, 0.08);
border: 1px solid rgba(212, 168, 75, 0.2);
padding: 4px 9px;
border-radius: var(--r-sm);
white-space: nowrap;
}
.league-row-archetype {
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: var(--r-full);
border: 1px solid var(--border-soft);
color: var(--text-muted);
white-space: nowrap;
}
/* Position pills column — restored from the old grid card layout. Compact
row of QB/RB/WR/TE/players counts so users can spot positional shape
of each roster at a glance without drilling in. */
.league-row-posrow {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.league-row-posrow .pos-pill {
font-family: 'Roboto Mono', monospace;
font-size: 11px;
padding: 3px 8px;
border-radius: var(--r-sm);
font-weight: 600;
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
display: inline-flex;
align-items: center;
gap: 4px;
}
.league-row-posrow .pos-pill span {
font-size: 9px;
color: var(--text-dim);
letter-spacing: 0.05em;
text-transform: uppercase;
font-weight: 700;
}
.league-row-posrow .pos-pill.pos-qb { color: var(--qb); }
.league-row-posrow .pos-pill.pos-rb { color: var(--rb); }
.league-row-posrow .pos-pill.pos-wr { color: var(--wr); }
.league-row-posrow .pos-pill.pos-te { color: var(--te); }
.league-row-posrow .pos-pill.pos-pick { color: var(--pick); }
/* Stats group — Team value is the visual hero (large, accent), other stats
are smaller supporting context. Five stats: Team / Starters / Picks /
Avg FC / Avg age. */
.league-row-stats {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 14px;
align-items: center;
}
.lr-stat {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 0;
}
.lr-stat-label {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-dim);
font-weight: 700;
}
.lr-stat-value {
font-family: 'Roboto Mono', monospace;
font-size: 14px;
color: var(--text);
font-weight: 600;
}
/* Hero stat — team value gets bigger, gold treatment so it pops */
.lr-stat.lr-stat-hero .lr-stat-value {
font-size: 20px;
color: var(--accent);
font-weight: 700;
}
.league-row-chevron {
font-size: 22px;
color: var(--text-dim);
text-align: center;
line-height: 1;
}
.league-row:hover .league-row-chevron { color: var(--accent); }
/* Tablet — collapse position pills out to keep the row legible. */
@media (max-width: 1100px) {
.league-row {
grid-template-columns: 56px minmax(0, 1.6fr) 110px minmax(0, 2fr) 22px;
gap: 14px;
}
.league-row-posrow { display: none; }
}
/* Mobile: stack everything inside the identity column. */
@media (max-width: 700px) {
.league-row {
grid-template-columns: 48px 1fr 20px;
gap: 12px;
padding: 12px 14px;
}
.league-row-tags,
.league-row-stats {
grid-column: 2 / 3;
}
.league-row-tags {
flex-direction: row;
flex-wrap: wrap;
margin-top: 6px;
}
.league-row-stats {
grid-template-columns: repeat(3, 1fr);
margin-top: 8px;
gap: 10px;
}
.lr-stat-value { font-size: 13px; }
.lr-stat.lr-stat-hero .lr-stat-value { font-size: 16px; }
.league-row-chevron { grid-column: 3 / 4; }
}
.league-list-empty {
padding: 24px;
text-align: center;
color: var(--text-muted);
font-style: italic;
font-family: 'Fraunces', serif;
}
/* Divider between Draft Capital list and Rookie Draft suggestions in the
merged Picks & Draft tab. Subtle gold gradient line — same energy as the
section headers elsewhere in the app. */
.picks-rookies-divider {
height: 1px;
margin: 32px 0 24px;
background: linear-gradient(90deg, transparent, var(--border), transparent);
}
/* ===== League search input (top of overview) ===== */
.overview-search-wrap {
display: flex;
align-items: center;
flex: 1;
min-width: 240px;
position: relative;
}
.overview-search {
width: 100%;
padding: 8px 14px;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
color: var(--text);
font-size: 13px;
font-family: inherit;
transition: all 0.18s var(--ease);
}
.overview-search:focus {
outline: none;
border-color: var(--accent);
background: var(--bg-elev-2);
box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.1);
}
.overview-search::placeholder { color: var(--text-dim); }
/* Unified search dropdown — appears below the input when player matches
* are found. Click row to open the player drawer with cross-league context. */
.unified-search-results {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
z-index: 50;
max-height: 380px;
overflow-y: auto;
}
.usr-section-head {
padding: 10px 14px 6px;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
border-bottom: 1px solid var(--border-soft);
}
.usr-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
cursor: pointer;
border-bottom: 1px solid var(--border-soft);
transition: background 0.12s var(--ease);
}
.usr-row:last-child { border-bottom: none; }
.usr-row:hover { background: var(--bg-elev-2); }
.usr-row-main { display: flex; flex-direction: column; gap: 2px; }
.usr-row-name {
font-weight: 600;
font-size: 14px;
color: var(--text);
}
.usr-row-meta {
font-size: 11px;
color: var(--text-muted);
}
.usr-row-value {
display: flex;
align-items: center;
gap: 12px;
}
.usr-row-exposure {
font-family: 'Roboto Mono', monospace;
font-size: 11px;
color: var(--accent);
font-weight: 600;
}
.usr-row-num {
font-family: 'Fraunces', serif;
font-size: 17px;
color: var(--text);
}
/* ===== Excluded leagues note (shown when redraft/keeper hidden) ===== */
.excluded-leagues-note {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: rgba(212, 168, 75, 0.05);
border: 1px solid rgba(212, 168, 75, 0.18);
border-radius: var(--r-md);
margin-bottom: 12px;
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
.excluded-note-icon {
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(212, 168, 75, 0.15);
color: var(--accent);
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 600;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.excluded-note-text { flex: 1; }
/* One-league empty state — accent-colored, friendly. Tells single-league
* users what still works without the cross-league framing. */
.one-league-note {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: rgba(212, 168, 75, 0.06);
border: 1px solid rgba(212, 168, 75, 0.25);
border-radius: var(--r-md);
margin: 12px 0 16px;
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
}
.one-league-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(212, 168, 75, 0.2);
color: var(--accent);
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.one-league-text { flex: 1; }
.one-league-text strong { color: var(--text); font-weight: 700; }
/* ===== Trade Calc subtab context bar ===== */
.trade-subtab-leaguebar {
padding: 10px 14px;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
margin-bottom: 6px;
font-size: 12px;
color: var(--text-muted);
}
.trade-subtab-context strong {
color: var(--accent);
font-weight: 600;
}
.league-card {
background: var(--surface-card);
padding: 22px;
cursor: pointer;
transition: all 0.2s var(--ease);
display: flex;
flex-direction: column;
border-radius: var(--r-lg);
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
/* Gold accent stripe at top of each card */
.league-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(212, 168, 75, 0.5), transparent);
opacity: 0.35;
transition: opacity 0.2s var(--ease);
}
.league-card:hover {
background: var(--surface-card-hover);
border-color: rgba(212, 168, 75, 0.32);
transform: translateY(-3px);
box-shadow: var(--shadow-md), 0 0 24px rgba(212, 168, 75, 0.08);
}
.league-card:hover::before {
opacity: 1;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.league-card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
}
/* Dual rank chips in card corner — VALUE rank (by total team value) and
* START rank (by starting lineup value). Both visible always so users can
* see both metrics at a glance regardless of which one they're sorting by.
* The "stat-active" highlight was dropped because highlighting a rank chip
* looked visually wrong when sorting by rank. */
.league-card-rankbox {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
}
.league-card-rank .rank-basis {
font-family: 'Inter', sans-serif;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--text-dim);
margin-right: 5px;
vertical-align: middle;
}
.league-card-rank {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 13px;
color: var(--text-dim);
letter-spacing: 0.02em;
white-space: nowrap;
line-height: 1;
}
.league-card-rank strong {
font-size: 32px;
color: var(--text-muted);
font-weight: 500;
vertical-align: -6px;
margin-right: 2px;
}
.league-card-rank.top strong { color: var(--accent); }
/* Pre-startup badge — shown when a league hasn't drafted yet. Rosters are
* empty so rank/value/archetype don't apply; this surface communicates
* status instead of pretending to rank. */
.league-card-prestartup {
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--text-dim);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-soft);
padding: 5px 10px;
border-radius: var(--r-full);
text-transform: uppercase;
}
.league-format {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.05em;
white-space: nowrap;
padding: 4px 10px;
background: rgba(212, 168, 75, 0.1);
border: 1px solid rgba(212, 168, 75, 0.3);
border-radius: var(--r-full);
}
.league-card-identity {
display: flex;
align-items: center;
gap: 12px;
margin-top: 12px;
}
.league-card-identity-text {
min-width: 0;
flex: 1;
}
.league-name {
font-size: 17px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.league-teams-line {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.league-archetype {
display: inline-flex;
align-items: center;
margin-top: 14px;
padding: 5px 12px;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid;
border-radius: var(--r-full);
align-self: flex-start;
background: rgba(255, 255, 255, 0.02);
}
/* 8-label archetype palette — deep and rich, harmonized with aubergine+gold */
.arch-dynasty-core { color: #d4a84b; border-color: rgba(212, 168, 75, 0.4); background: rgba(212, 168, 75, 0.1) !important; } /* burnished gold — top tier */
.arch-contender { color: #8fb883; border-color: rgba(127, 168, 120, 0.4); background: rgba(127, 168, 120, 0.1) !important; } /* sage */
.arch-win-now-window { color: #d48c4a; border-color: rgba(212, 140, 74, 0.4); background: rgba(212, 140, 74, 0.1) !important; } /* rich amber */
.arch-ascending { color: #6090b8; border-color: rgba(96, 144, 184, 0.4); background: rgba(96, 144, 184, 0.1) !important; } /* steel blue */
.arch-young-rebuild { color: #a080c0; border-color: rgba(160, 128, 192, 0.4); background: rgba(160, 128, 192, 0.1) !important; } /* lavender */
.arch-rebuild { color: #b85565; border-color: rgba(160, 64, 80, 0.5); background: rgba(160, 64, 80, 0.12) !important; } /* oxblood */
.arch-aging-middle { color: #c08090; border-color: rgba(192, 128, 144, 0.4); background: rgba(192, 128, 144, 0.1) !important; } /* muted mauve */
.arch-middle-tier { color: #9d8ca8; border-color: rgba(157, 140, 168, 0.35); background: rgba(157, 140, 168, 0.08) !important; } /* muted plum-gray */
.league-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--border-soft);
}
.stat {
min-width: 0;
padding: 8px 6px;
border-radius: var(--r-md);
transition: all 0.15s var(--ease);
/* Clip overflow so a long stat value doesn't visually spill into the
* adjacent grid cell — was the root cause of the highlight looking
* like it overlapped with neighboring text. */
overflow: hidden;
}
.stat-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
display: flex;
align-items: center;
gap: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stat-sort-mark {
color: var(--accent);
font-size: 9px;
line-height: 1;
}
.stat-value {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
margin-top: 3px;
white-space: nowrap;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.02em;
}
.stat-value.accent { color: var(--accent); }
/* The tile corresponding to the currently-active sort key gets a soft gold ring
+ label highlight so the user can verify the sort is actually applied. */
.stat.stat-active {
background: rgba(212, 168, 75, 0.12);
box-shadow: inset 0 0 0 1px rgba(212, 168, 75, 0.35);
}
.stat.stat-active .stat-label { color: var(--accent); }
.stat.stat-active .stat-value { color: var(--accent); }
.league-card-rank.stat-active {
background: rgba(212, 168, 75, 0.18);
color: var(--accent);
}
.league-archetype.stat-active {
box-shadow: 0 0 0 2px rgba(212, 168, 75, 0.45);
}
@media (max-width: 600px) {
.league-stats {
grid-template-columns: repeat(5, 1fr);
gap: 4px;
}
.stat { padding: 6px 3px; }
.stat-value { font-size: 13px; }
.stat-label { font-size: 9px; letter-spacing: 0.04em; }
}
.league-posrow {
display: flex;
gap: 8px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--border-soft);
}
.pos-pill {
display: inline-flex;
align-items: baseline;
gap: 5px;
padding: 5px 10px;
font-size: 13px;
font-weight: 700;
border-radius: var(--r-sm);
letter-spacing: -0.01em;
font-feature-settings: 'tnum' 1;
}
.pos-pill span {
font-size: 10px;
font-weight: 600;
opacity: 0.8;
letter-spacing: 0.04em;
}
.pos-pill.pos-qb { background: rgba(194, 74, 90, 0.12); color: var(--qb); border: 1px solid rgba(194, 74, 90, 0.25); }
.pos-pill.pos-rb { background: rgba(127, 168, 120, 0.12); color: var(--rb); border: 1px solid rgba(127, 168, 120, 0.25); }
.pos-pill.pos-wr { background: rgba(96, 144, 184, 0.12); color: var(--wr); border: 1px solid rgba(96, 144, 184, 0.25); }
.pos-pill.pos-te { background: rgba(212, 168, 75, 0.12); color: var(--te); border: 1px solid rgba(212, 168, 75, 0.25); }
/* Team detail view */
.team-detail { }
.back-link {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--text-muted);
text-decoration: none;
cursor: pointer;
margin-bottom: 24px;
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 500;
padding: 6px 10px;
border-radius: var(--r-sm);
transition: all 0.15s var(--ease);
}
.back-link:hover {
color: var(--accent);
transform: translateX(-2px);
background: var(--bg-elev);
}
.team-head {
padding-bottom: 28px;
margin-bottom: 28px;
border-bottom: 1px solid var(--border-soft);
}
.team-head-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
flex-wrap: wrap;
}
.team-head-identity {
display: flex;
align-items: center;
gap: 18px;
min-width: 0;
flex: 1;
}
.team-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.league-switcher {
appearance: none;
-webkit-appearance: none;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
color: var(--text);
padding: 7px 32px 7px 12px;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
border-radius: var(--r-md);
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='%23888' d='M6 7L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 9px 5px;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
.league-switcher:hover { border-color: var(--accent); }
.league-switcher:focus { outline: none; border-color: var(--accent); }
.team-title {
font-family: 'Fraunces', serif;
font-size: 42px;
font-weight: 500;
letter-spacing: -0.028em;
line-height: 1.02;
color: var(--text);
}
.team-subtitle {
font-size: 14px;
color: var(--text-muted);
margin-top: 10px;
font-weight: 500;
}
.team-summary {
display: flex;
gap: 32px;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--border-soft);
flex-wrap: wrap;
}
.summary-stat { min-width: 100px; }
.summary-label {
font-size: 12px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
margin-bottom: 6px;
}
.summary-value {
font-family: 'Inter', sans-serif;
font-size: 30px;
font-weight: 600;
line-height: 1;
letter-spacing: -0.025em;
font-feature-settings: 'tnum' 1;
}
.summary-value.accent { color: var(--accent); }
/* ===== Team needs strip — sits in team-head, persistent across subtabs.
Wraps the position flags row with a small "Position read" label for
context, since the flags are read cold without one. */
/* League scoring fingerprint — how this league's lineup + bonuses differ */
.league-scoring-panel {
margin-top: 16px;
padding: 14px 16px;
background: rgba(18, 10, 24, 0.45);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
}
.league-scoring-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.league-scoring-title {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
}
.league-scoring-profile {
font-family: 'Fraunces', serif;
font-size: 15px;
font-weight: 500;
color: var(--text);
font-style: italic;
}
.league-scoring-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.league-scoring-chip {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
padding: 5px 11px;
border-radius: var(--r-full);
border: 1px solid var(--border-soft);
background: var(--bg-lift);
}
.league-scoring-chip.emphasis-rb { border-color: rgba(127, 168, 120, 0.45); color: var(--rb); }
.league-scoring-chip.emphasis-te { border-color: rgba(212, 168, 75, 0.45); color: var(--te); }
.league-scoring-chip.emphasis-wr { border-color: rgba(96, 144, 184, 0.45); color: var(--wr); }
.league-scoring-note {
font-size: 12px;
color: var(--text-dim);
margin-top: 10px;
line-height: 1.45;
}
.league-scoring-rules {
margin-top: 12px;
max-height: 240px;
overflow-y: auto;
padding-right: 4px;
border-top: 1px solid var(--border-soft);
padding-top: 10px;
}
.league-scoring-cat {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin: 10px 0 6px;
}
.league-scoring-cat:first-child { margin-top: 0; }
.league-scoring-rule {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 11px;
line-height: 1.4;
padding: 3px 0;
color: var(--text-muted);
}
.league-scoring-rule span:last-child {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-weight: 600;
color: var(--text);
flex-shrink: 0;
}
.league-scoring-rule.positive span:last-child { color: var(--accent-soft); }
.league-scoring-rule.negative span:last-child { color: #d27582; }
/* One footer on marketing views — hide universal app footer on landing/setup */
body.page-landing .app-footer,
body.page-setup .app-footer {
display: none;
}
/* Free account gate */
.account-gate {
max-width: 520px;
margin: 32px auto;
padding: 36px 32px;
text-align: center;
background: var(--surface-card);
border: 1px solid rgba(212, 168, 75, 0.28);
border-radius: var(--r-xl);
box-shadow: var(--shadow-lg);
}
.account-gate-icon {
font-size: 36px;
margin-bottom: 12px;
opacity: 0.85;
}
.account-gate h2 {
font-family: 'Fraunces', serif;
font-size: 28px;
font-weight: 500;
margin-bottom: 10px;
letter-spacing: -0.02em;
}
.account-gate h2 em { font-style: italic; color: var(--accent); }
.account-gate p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.55;
margin-bottom: 20px;
}
.account-gate-list {
text-align: left;
margin: 0 auto 22px;
max-width: 320px;
font-size: 13px;
color: var(--text-muted);
line-height: 1.6;
}
.account-gate-list li { margin-bottom: 6px; }
.masthead-signin {
appearance: none;
background: linear-gradient(135deg, rgba(212, 168, 75, 0.22), rgba(212, 168, 75, 0.08));
border: 1px solid rgba(212, 168, 75, 0.4);
color: var(--accent-soft);
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
padding: 8px 16px;
border-radius: var(--r-full);
cursor: pointer;
box-shadow: none;
}
.masthead-signin:hover {
color: var(--text);
border-color: var(--accent);
}
.account-modal-overlay {
position: fixed;
inset: 0;
z-index: 120;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.account-modal-overlay.open { display: flex; }
.account-modal {
width: min(100%, 420px);
padding: 32px 28px;
background: var(--bg-elev-2);
border: 1px solid var(--border-hover);
border-radius: var(--r-xl);
box-shadow: var(--shadow-lg);
position: relative;
}
.account-modal-close {
position: absolute;
top: 12px;
right: 14px;
background: none;
border: none;
color: var(--text-muted);
font-size: 22px;
cursor: pointer;
box-shadow: none;
padding: 4px 8px;
}
.account-modal h2 {
font-family: 'Fraunces', serif;
font-size: 26px;
margin-bottom: 8px;
}
.account-auth-google {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 10px;
background: #fff;
color: #1a1024;
border: 1px solid rgba(212, 168, 75, 0.35);
font-weight: 600;
}
.account-auth-google:hover { filter: brightness(0.97); }
.account-auth-google svg { flex-shrink: 0; }
.account-auth-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 14px 0;
font-size: 11px;
color: var(--text-dim);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.account-auth-divider::before,
.account-auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-soft);
}
.account-auth-email {
width: 100%;
background: transparent;
color: var(--text);
border: 1px solid var(--border);
font-weight: 500;
}
.account-auth-email:hover {
border-color: var(--accent);
color: var(--accent);
}
.account-modal-pending {
text-align: center;
padding: 8px 0 4px;
font-size: 14px;
color: var(--text-muted);
line-height: 1.55;
}
.account-modal input[type="email"] {
width: 100%;
margin: 16px 0 12px;
}
.account-modal-error {
font-size: 13px;
color: #e07a7a;
margin: 10px 0 0;
line-height: 1.4;
}
.team-needs-strip {
display: flex;
align-items: center;
gap: 14px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border-soft);
flex-wrap: wrap;
}
/* On mobile: stack label above chips, give chips full row width so they
wrap properly. Without this fix the chips can overflow horizontally on
narrow screens (only the rightmost chip ends up visible). */
@media (max-width: 700px) {
.team-needs-strip {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.team-needs-strip .needs-flags-row {
width: 100%;
}
}
.team-needs-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-dim);
font-weight: 700;
flex-shrink: 0;
}
.needs-flags-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* Each chip = position color + severity treatment. Position color stays
consistent (so QB chip is always blue regardless of severity); severity
is shown via opacity, weight, and a dot for critical. */
.need-flag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
border: 1px solid;
border-radius: var(--r-full);
transition: all 0.15s var(--ease);
}
.need-flag-pos {
font-family: 'Roboto Mono', monospace;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.06em;
opacity: 0.9;
}
.need-flag-label {
font-weight: 600;
}
.need-flag-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 6px currentColor;
}
/* Position colors — match the existing position color tokens used
elsewhere in the app for consistency. */
.need-flag.pos-qb { color: var(--qb); border-color: rgba(194, 74, 90, 0.4); background: rgba(194, 74, 90, 0.08); }
.need-flag.pos-rb { color: var(--rb); border-color: rgba(127, 168, 120, 0.4); background: rgba(127, 168, 120, 0.08); }
.need-flag.pos-wr { color: var(--wr); border-color: rgba(96, 144, 184, 0.4); background: rgba(96, 144, 184, 0.08); }
.need-flag.pos-te { color: var(--te); border-color: rgba(212, 168, 75, 0.4); background: rgba(212, 168, 75, 0.08); }
/* Severity overlays — applied on top of position color. */
.need-flag.sev-critical { font-weight: 700; }
.need-flag.sev-warn { opacity: 0.95; }
.need-flag.sev-good { opacity: 0.85; }
.need-flag.sev-ok { opacity: 0.65; }
/* Roster sections */
.roster-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 24px;
}
@media (max-width: 900px) {
.roster-grid { grid-template-columns: 1fr; }
}
.pos-section {
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.pos-head {
padding: 16px 20px;
border-bottom: 1px solid var(--border-soft);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--bg-elev-2);
}
.pos-head-left {
display: flex;
align-items: center;
gap: 12px;
}
.pos-letter {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 700;
font-size: 24px;
line-height: 1;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
}
.pos-letter.qb { color: var(--qb); background: rgba(194, 74, 90, 0.1); }
.pos-letter.rb { color: var(--rb); background: rgba(127, 168, 120, 0.1); }
.pos-letter.wr { color: var(--wr); background: rgba(96, 144, 184, 0.1); }
.pos-letter.te { color: var(--te); background: rgba(212, 168, 75, 0.1); }
.pos-letter.pick { color: var(--pick); background: rgba(160, 128, 192, 0.1); }
.pos-count {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text);
font-weight: 600;
letter-spacing: -0.005em;
}
.pos-total {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--accent);
font-weight: 600;
font-feature-settings: 'tnum' 1;
}
/* ===== Picks Summary (on Overview tab) ===== */
/* === Phase C1: Draft Capital panel — replaces old picks-summary with
* per-pick chips for current season + aggregate bubbles for future seasons.
* Owen feedback: "Draft pick box is large and empty. List owned picks for
* the current season, and then list value of picks for further seasons."
* Old .picks-summary CSS is preserved for any legacy callers but the
* primary surface uses .draft-capital + .dc-* now. */
.draft-capital {
margin: 16px 0;
}
.dc-section {
margin-top: 14px;
}
.dc-section + .dc-section {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border-soft);
}
.dc-section-label {
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-dim);
margin-bottom: 8px;
}
.dc-pick-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dc-pick-chip {
background: var(--bg);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 8px 12px;
min-width: 80px;
transition: border-color 0.12s var(--ease);
}
.dc-pick-chip:hover {
border-color: var(--accent);
}
.dc-pick-slot {
font-family: 'Fraunces', serif;
font-size: 17px;
font-weight: 500;
color: var(--text);
letter-spacing: -0.01em;
font-feature-settings: var(--num-feature);
}
.dc-pick-meta {
font-family: 'Roboto Mono', monospace;
font-size: 10px;
color: var(--text-muted);
margin-top: 1px;
}
.dc-future-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.dc-future-bubble {
background: var(--bg);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 10px 14px;
min-width: 96px;
}
.dc-future-year {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.dc-future-num {
font-family: 'Fraunces', serif;
font-size: 19px;
font-weight: 500;
color: var(--accent);
margin-top: 2px;
font-feature-settings: var(--num-feature);
}
.dc-future-meta {
font-family: 'Roboto Mono', monospace;
font-size: 10px;
color: var(--text-dim);
}
.dc-cta {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
text-align: right;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
transition: color 0.12s var(--ease);
}
.draft-capital:hover .dc-cta {
color: var(--accent);
}
@media (max-width: 700px) {
.dc-pick-chip { min-width: 72px; padding: 6px 10px; }
.dc-future-bubble { min-width: 88px; padding: 8px 12px; }
.dc-future-num { font-size: 17px; }
}
/* Page 2.4: Flattened Draft Capital pattern. Replaces nested .dc-section
* boxes inside .draft-capital with a single horizontal row. Less visual
* weight on Overview where this is just a glanceable summary. The full
* Picks tab is the deep dive. */
.draft-capital-flat {
margin: 16px 0 0;
}
.dc-flat-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 8px 0 4px;
}
.dc-flat-year {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
margin-right: 4px;
padding: 4px 0;
}
.dc-flat-chip {
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 6px 10px;
min-width: 76px;
text-align: center;
line-height: 1.15;
}
.dc-flat-slot {
font-family: var(--num-feature, 'Inter'), monospace;
font-variant-numeric: tabular-nums;
font-size: 13px;
font-weight: 700;
color: var(--text);
}
.dc-flat-val {
font-size: 11px;
color: var(--text-dim);
margin-top: 2px;
}
.dc-flat-divider {
width: 1px;
height: 28px;
background: var(--border-soft);
margin: 0 6px;
}
.dc-flat-future {
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 6px 12px;
min-width: 84px;
text-align: center;
line-height: 1.15;
}
.dc-flat-future-year {
font-size: 10px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.dc-flat-future-val {
font-family: var(--num-feature, 'Inter'), monospace;
font-variant-numeric: tabular-nums;
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-top: 1px;
}
.dc-flat-future-meta {
font-size: 10px;
color: var(--text-dim);
margin-top: 1px;
}
/* Page 2.5: Team stats card — current-season record/standing/PF on Overview */
.team-stats-card {
margin: 0 0 16px;
}
/* Image 1 fix: pair Team Stats + Draft Capital side-by-side so neither card
* has a giant empty horizontal canvas when sparse (e.g. offseason with no
* record yet, or only future picks owned). Stacks on narrower viewports. */
.overview-top-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 16px;
}
.overview-top-row > .section-card {
margin: 0;
width: fit-content;
max-width: 100%;
}
@media (max-width: 900px) {
.overview-top-row > .section-card { width: 100%; }
}
/* Old picks-summary CSS — kept for backward-compat with any legacy paths */
.picks-summary {
margin: 20px 0 24px;
padding: 18px 20px;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
cursor: pointer;
transition: all 0.15s var(--ease);
box-shadow: var(--shadow-sm);
}
.picks-summary:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.picks-summary-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 12px;
}
.picks-summary-title {
font-family: 'Fraunces', serif;
font-size: 18px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--text);
}
.picks-summary-total {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--accent);
font-feature-settings: 'tnum' 1;
letter-spacing: -0.02em;
}
.picks-summary-body {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.picks-year-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--bg);
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
font-size: 12px;
font-feature-settings: 'tnum' 1;
}
.picks-year-label {
color: var(--text-muted);
font-weight: 600;
}
.picks-year-count {
color: var(--text);
font-weight: 700;
}
.picks-year-value {
color: var(--accent);
font-weight: 600;
}
.picks-summary-cta {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
text-align: right;
letter-spacing: 0.02em;
}
/* ===== Pick Simulator (dedicated tab, above Draft Capital panel) ===== */
.pick-sim-panel {
border: 1px solid rgba(212, 168, 75, 0.25);
background: linear-gradient(135deg, rgba(212, 168, 75, 0.05), rgba(212, 168, 75, 0.01));
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
}
.pick-sim-head {
padding: 18px 20px;
border-bottom: 1px solid rgba(212, 168, 75, 0.18);
}
.pick-sim-title {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
}
.pick-sim-sub {
font-size: 13px;
color: var(--text-muted);
margin-top: 4px;
font-weight: 500;
}
.draft-room-panel {
border: 1px solid rgba(151, 200, 144, 0.28);
background: linear-gradient(135deg, rgba(127, 168, 120, 0.08), rgba(18, 10, 24, 0.4));
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
}
.draft-room-panel-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
padding: 18px 20px;
border-bottom: 1px solid rgba(151, 200, 144, 0.18);
}
.draft-room-status {
font-family: 'Roboto Mono', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--border-soft);
color: var(--text-muted);
flex-shrink: 0;
}
.draft-room-status.live { color: #97c890; border-color: rgba(151, 200, 144, 0.35); }
.draft-room-status.prep { color: var(--accent); border-color: rgba(212, 168, 75, 0.35); }
.draft-room-preview {
padding: 14px 20px 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.draft-room-preview-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim);
}
.draft-room-preview-rows { display: flex; flex-direction: column; gap: 6px; }
.draft-room-preview-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 10px;
border-radius: 8px;
background: rgba(255,255,255,0.02);
border: 1px solid transparent;
cursor: pointer;
font: inherit;
color: var(--text);
text-align: left;
width: 100%;
}
.draft-room-preview-row:hover { border-color: var(--border-soft); background: var(--bg-elev-2); }
.draft-room-preview-name { font-weight: 600; font-size: 13px; }
.draft-room-preview-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.draft-room-preview-val { font-family: 'Roboto Mono', monospace; font-size: 12px; color: var(--accent); font-weight: 600; }
.draft-room-open-btn {
align-self: flex-start;
margin-top: 4px;
padding: 10px 18px;
border-radius: 8px;
border: none;
background: var(--accent);
color: var(--bg);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: filter 0.15s var(--ease);
}
.draft-room-open-btn:hover { filter: brightness(1.08); }
.draft-room-slots {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.draft-room-slot-chip {
font-size: 11px;
padding: 5px 10px;
border-radius: 6px;
border: 1px solid var(--border-soft);
color: var(--text-muted);
background: var(--bg-elev-2);
}
.sim-impact {
padding: 14px 20px;
background: rgba(212, 168, 75, 0.06);
border-bottom: 1px solid rgba(212, 168, 75, 0.18);
}
.sim-impact-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.sim-stat {
padding: 8px 10px;
}
.sim-stat-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.sim-stat-value {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 700;
margin-top: 4px;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.015em;
color: var(--text);
}
.sim-stat-hero .sim-stat-value { font-size: 22px; }
.sim-delta-pos { color: #7fa878; }
.sim-delta-neg { color: #c24a5a; }
.sim-delta-zero { color: var(--text-muted); }
.sim-arch-change { color: var(--accent); }
.sim-arch-from {
font-size: 10px;
color: var(--text-dim);
font-weight: 500;
margin-left: 4px;
letter-spacing: 0.02em;
}
.sim-reset-wrap {
margin-top: 12px;
text-align: right;
}
.sim-reset-btn {
appearance: none;
background: transparent;
border: 1px solid var(--border-soft);
color: var(--text-muted);
padding: 6px 12px;
font-size: 11px;
font-weight: 600;
font-family: 'Inter', sans-serif;
border-radius: var(--r-full);
cursor: pointer;
transition: all 0.15s var(--ease);
}
.sim-reset-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.pick-sim-rows {
padding: 8px 12px;
}
.pick-sim-row {
display: grid;
grid-template-columns: minmax(120px, 180px) 1fr;
gap: 14px;
align-items: center;
padding: 10px 8px;
border-top: 1px solid rgba(212, 168, 75, 0.1);
}
.pick-sim-row:first-child { border-top: none; }
.pick-sim-pick-label {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--accent);
font-feature-settings: 'tnum' 1;
}
.pick-sim-pick-meta {
font-size: 11px;
color: var(--text-muted);
margin-top: 3px;
font-weight: 500;
}
.pick-sim-select-wrap {
min-width: 0;
}
.pick-sim-select {
width: 100%;
appearance: none;
-webkit-appearance: none;
padding: 8px 32px 8px 12px;
font-size: 13px;
font-family: 'Inter', sans-serif;
color: var(--text);
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='%23888' d='M6 7L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 10px 6px;
}
.pick-sim-select:focus {
outline: none;
border-color: var(--accent);
}
.pick-sim-selected-card {
display: inline-flex;
align-items: baseline;
gap: 8px;
margin-top: 6px;
padding: 4px 10px;
background: rgba(212, 168, 75, 0.12);
border: 1px solid rgba(212, 168, 75, 0.3);
border-radius: var(--r-full);
font-size: 12px;
}
.pick-sim-selected-name {
font-weight: 700;
color: var(--text);
}
.pick-sim-selected-meta {
color: var(--text-muted);
font-weight: 500;
font-size: 11px;
}
@media (max-width: 600px) {
.sim-impact-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sim-stat-value { font-size: 16px; }
.sim-stat-hero .sim-stat-value { font-size: 18px; }
.pick-sim-row {
grid-template-columns: 1fr;
gap: 6px;
}
}
/* ===== Picks Panel (dedicated tab) ===== */
.picks-panel {
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.picks-panel-head {
padding: 18px 20px;
background: var(--bg-elev-2);
border-bottom: 1px solid var(--border-soft);
}
.picks-panel-title {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
}
.picks-panel-sub {
font-size: 13px;
color: var(--text-muted);
margin-top: 4px;
font-weight: 500;
}
.picks-year-section {
border-top: 1px solid var(--border-soft);
}
.picks-year-section:first-of-type { border-top: none; }
.picks-year-head {
padding: 12px 20px;
background: var(--bg-elev-2);
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 12px;
letter-spacing: 0.02em;
border-bottom: 1px solid var(--border-soft);
}
.picks-year-name {
font-weight: 700;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 11px;
}
.picks-year-meta {
color: var(--text-muted);
font-feature-settings: 'tnum' 1;
}
.player-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
padding: 10px 16px;
border-top: 1px solid var(--border-soft);
gap: 12px;
font-size: 14px;
transition: background 0.1s;
}
.player-row:hover {
background: rgba(212, 168, 75, 0.06);
box-shadow: inset 3px 0 0 var(--accent);
}
.player-row:first-of-type { border-top: none; }
.player-id-block {
min-width: 0;
overflow: hidden;
}
.player-name {
font-weight: 600;
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.player-meta {
font-size: 11px;
color: var(--text-dim);
display: block;
margin-top: 2px;
font-weight: 500;
}
/* Deprecated columns kept in case old markup lingers */
.player-age, .player-rank { display: none; }
/* ===== Avatars ===== */
.avatar {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 12px;
color: var(--text-muted);
letter-spacing: 0.02em;
flex-shrink: 0;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
/* Sleeper headshots have white backgrounds — blend in by tinting */
background: var(--bg-elev-2);
}
.avatar-initials {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
pointer-events: none;
}
/* Show initials only if image failed (fallback class added by onerror handler) */
.avatar:not(.avatar-fallback) .avatar-initials { display: none; }
/* Player-position tint on the avatar border */
.avatar-player.pos-qb { box-shadow: inset 0 0 0 2px rgba(212, 168, 75, 0.5); }
.avatar-player.pos-rb { box-shadow: inset 0 0 0 2px rgba(110, 167, 125, 0.5); }
.avatar-player.pos-wr { box-shadow: inset 0 0 0 2px rgba(120, 155, 190, 0.5); }
.avatar-player.pos-te { box-shadow: inset 0 0 0 2px rgba(186, 125, 140, 0.5); }
/* Pick avatar: no image, shows round·slot with accent treatment */
.avatar-pick {
background: rgba(212, 168, 75, 0.1);
border: 1px solid rgba(212, 168, 75, 0.4);
color: var(--accent);
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0;
position: relative;
/* Phase C5: layered football silhouette behind the round.slot label so
* picks visually read as "this is a player slot waiting for a player"
* even before the rookie is drafted. Owen feedback: "look crazy without
* the Player pictures. Just put a silhouette of a football player in there." */
overflow: hidden;
}
.avatar-pick::before {
content: '🏈';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
opacity: 0.12;
pointer-events: none;
}
.avatar-pick .avatar-initials {
position: relative;
z-index: 1;
}
.player-row-pick { cursor: default; }
.player-row-pick:hover { background: transparent; }
.avatar-sm { width: 28px; height: 28px; font-size: 10px; }
.avatar-lg { width: 56px; height: 56px; font-size: 16px; }
/* ===== Icons ===== */
.icon {
display: inline-block;
vertical-align: -2px;
flex-shrink: 0;
}
.icon + * { margin-left: 4px; }
/* ===== Sparkbar (inline bar chart) ===== */
.sparkbar {
display: block;
max-width: 100%;
}
.player-value {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
min-width: 72px;
text-align: right;
font-feature-settings: 'tnum' 1;
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.2;
gap: 2px;
}
.player-value.hi { color: var(--accent); }
.player-value.none { color: var(--text-dim); }
.trend {
font-size: 10px;
font-weight: 600;
font-feature-settings: 'tnum' 1;
letter-spacing: 0;
white-space: nowrap;
}
.trend-up { color: #7fa878; } /* sage green */
.trend-down { color: #c24a5a; } /* oxblood */
.rookie-mark {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 700;
background: var(--accent);
color: var(--bg);
padding: 2px 7px;
margin-left: 8px;
letter-spacing: 0.02em;
vertical-align: middle;
border-radius: var(--r-full);
}
.starter-mark {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
border: 1px solid var(--text-dim);
color: var(--text-muted);
padding: 2px 7px;
margin-left: 8px;
letter-spacing: 0.02em;
vertical-align: middle;
border-radius: var(--r-full);
}
/* Page 3: injury indicator badges on roster + lineup rows. Color-coded by
* severity. OUT/IR get hard red because they're definitely missing the
* game; Doubtful gets warning amber because they're probably out;
* Questionable gets soft amber because game-time decision. PUP/SUS and
* other catch-all get neutral. */
.injury-mark {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 700;
padding: 2px 6px;
margin-left: 8px;
letter-spacing: 0.05em;
vertical-align: middle;
border-radius: var(--r-full);
border: 1px solid;
}
.injury-mark-out,
.injury-mark-ir {
background: rgba(210, 117, 130, 0.18);
color: #e89aa8;
border-color: rgba(210, 117, 130, 0.45);
}
.injury-mark-doubtful {
background: rgba(212, 153, 75, 0.18);
color: #e6b878;
border-color: rgba(212, 153, 75, 0.45);
}
.injury-mark-questionable {
background: rgba(212, 168, 75, 0.14);
color: #d4a84b;
border-color: rgba(212, 168, 75, 0.35);
}
.injury-mark-other {
background: rgba(160, 160, 170, 0.12);
color: var(--text-muted);
border-color: rgba(160, 160, 170, 0.35);
}
.pick-source-tag {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 700;
background: rgba(212, 168, 75, 0.15);
color: var(--accent);
border: 1px solid rgba(212, 168, 75, 0.35);
padding: 1px 6px;
margin-left: 6px;
letter-spacing: 0.04em;
vertical-align: middle;
border-radius: var(--r-full);
}
/* Loading */
.loader {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 60px 20px 40px;
}
.loader-mark {
font-family: 'Fraunces', serif;
font-size: 28px;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--text);
margin-bottom: 8px;
}
/* Logo above the loader wordmark, twice the icon size for impact during
the initial cold load. Subtle pulse so the user knows we're working. */
.loader-logo {
width: 72px;
height: 72px;
margin-bottom: 4px;
object-fit: contain;
object-position: center;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
animation: loader-pulse 2s ease-in-out infinite;
}
@keyframes loader-pulse {
0%, 100% { opacity: 0.85; transform: scale(1); }
50% { opacity: 1.00; transform: scale(1.04); }
}
.loader-mark em {
color: var(--accent);
font-style: italic;
font-weight: 500;
}
.loader-bar {
width: 280px;
height: 3px;
background: var(--border-soft);
overflow: hidden;
position: relative;
border-radius: var(--r-full);
}
.loader-bar::after {
content: '';
position: absolute;
left: -40%;
width: 40%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
animation: slide 1.4s infinite ease-in-out;
border-radius: var(--r-full);
}
@keyframes slide {
0% { left: -40%; }
100% { left: 100%; }
}
.loader-text {
font-family: 'Fraunces', serif;
font-size: 18px;
color: var(--text);
font-weight: 500;
letter-spacing: -0.01em;
}
/* ===== Loading skeletons ===== */
.skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 16px;
padding: 0 40px 40px;
max-width: 1200px;
margin: 0 auto;
}
.skeleton-card {
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 20px;
box-shadow: var(--shadow-sm);
}
.skeleton-line {
height: 12px;
background: var(--bg-elev-2);
border-radius: 3px;
margin-bottom: 12px;
position: relative;
overflow: hidden;
}
.skeleton-line::after {
content: '';
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(212, 168, 75, 0.08), transparent);
animation: shimmer 1.6s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.skeleton-line-short { width: 30%; height: 9px; }
.skeleton-line-wide { width: 70%; height: 18px; }
.skeleton-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--border-soft);
}
.skeleton-stat {
height: 32px;
background: var(--bg-elev-2);
border-radius: var(--r-sm);
position: relative;
overflow: hidden;
}
.skeleton-stat::after {
content: '';
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(212, 168, 75, 0.08), transparent);
animation: shimmer 1.6s infinite;
animation-delay: 0.3s;
}
/* Drawer-specific skeleton layout — used in player drawer Stats/News
sections while async fetches are in flight. Shimmer style matches the
initial-load skeletons for visual continuity. */
.drawer-skel-row {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 14px;
}
.drawer-skel-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.drawer-stats-loading,
.drawer-news-loading {
padding: 4px 0;
}
@media (max-width: 700px) {
.skeleton-grid { padding: 0 20px 20px; }
}
.error {
border: 1px solid rgba(194, 74, 90, 0.3);
background: rgba(194, 74, 90, 0.08);
padding: 14px 18px;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--danger);
margin-top: 16px;
border-radius: var(--r-md);
}
.error-title {
font-weight: 700;
font-size: 14px;
margin-bottom: 4px;
}
.error-hint {
font-size: 12px;
font-weight: 500;
color: rgba(212, 168, 75, 0.85);
line-height: 1.5;
}
.hint-box {
border-left: 3px solid var(--accent);
padding: 12px 16px;
background: var(--bg-elev-2);
font-size: 13px;
color: var(--text-muted);
margin-top: 12px;
border-radius: 0 var(--r-md) var(--r-md) 0;
}
/* Cross-team search */
.cross-search {
max-width: 800px;
}
.cross-search-input {
width: 100%;
font-size: 17px;
padding: 16px 20px;
font-weight: 500;
}
.cross-results {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 8px;
}
.cross-result-row {
display: grid;
grid-template-columns: 1fr auto auto;
padding: 14px 18px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
align-items: center;
gap: 16px;
border-radius: var(--r-md);
transition: all 0.15s var(--ease);
}
.cross-result-row:hover {
border-color: var(--border-hover);
background: var(--bg-elev-2);
}
.cross-result-name {
font-weight: 600;
font-size: 14px;
}
.cross-result-league {
font-size: 13px;
color: var(--text-muted);
margin-top: 3px;
}
/* ===== League context bar (breadcrumb on global league-scoped views) ===== */
.league-context-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding: 12px 16px;
margin-bottom: 20px;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
}
.league-context-bar:empty { display: none; }
.lcb-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.lcb-back {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--border-soft);
color: var(--text-muted);
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.15s var(--ease);
flex-shrink: 0;
}
.lcb-back:hover { color: var(--accent); border-color: var(--accent); }
.lcb-league {
font-family: 'Fraunces', serif;
font-size: 16px;
font-weight: 500;
color: var(--text);
letter-spacing: -0.015em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lcb-sep {
color: var(--text-dim);
font-size: 14px;
}
.lcb-current {
font-size: 13px;
color: var(--text-muted);
font-weight: 600;
}
.lcb-pivots {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.lcb-pivot {
appearance: none;
background: transparent;
border: 1px solid var(--border-soft);
color: var(--text-muted);
padding: 5px 12px;
font-size: 12px;
font-weight: 600;
font-family: 'Inter', sans-serif;
border-radius: var(--r-full);
cursor: pointer;
transition: all 0.15s var(--ease);
}
.lcb-pivot:hover {
color: var(--accent);
border-color: var(--accent);
}
/* ===== League View (all 12 teams in a league) ===== */
.league-view-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 28px;
border-bottom: 1px solid var(--border-soft);
padding-bottom: 24px;
}
.league-picker {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.league-picker select {
min-width: 280px;
}
.team-strip {
border: 1px solid var(--border-soft);
background: var(--bg-elev);
margin-bottom: 8px;
transition: all 0.15s var(--ease);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.team-strip.me {
border-left: 3px solid var(--accent);
}
.team-strip-head {
display: grid;
grid-template-columns: 40px 1fr repeat(4, 60px) 90px 60px;
align-items: center;
padding: 14px 18px;
gap: 12px;
cursor: pointer;
}
.team-strip-head:hover { background: var(--bg-elev-2); }
@media (max-width: 900px) {
.team-strip-head {
grid-template-columns: 36px 1fr 80px 40px;
gap: 8px;
}
.team-strip-pos { display: none; }
}
.strip-rank {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 500;
font-size: 22px;
color: var(--text-muted);
line-height: 1;
}
.strip-rank.me { color: var(--accent); }
.strip-owner {
min-width: 0;
}
.strip-owner-name {
font-weight: 600;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.strip-owner-name.me { color: var(--accent); }
.strip-owner-team {
font-size: 12px;
color: var(--text-dim);
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
}
.team-strip-pos {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: var(--text-muted);
text-align: center;
font-weight: 500;
}
.team-strip-pos strong {
display: block;
color: var(--text);
font-size: 14px;
font-weight: 700;
margin-bottom: 2px;
font-feature-settings: 'tnum' 1;
}
.team-strip-pos.weak strong { color: var(--warn); }
.team-strip-pos.strong strong { color: var(--accent); }
.team-strip-value {
font-family: 'Inter', sans-serif;
font-size: 17px;
font-weight: 700;
text-align: right;
color: var(--accent);
font-feature-settings: 'tnum' 1;
letter-spacing: -0.02em;
}
.team-strip-expand {
font-family: 'Inter', sans-serif;
font-size: 16px;
color: var(--text-dim);
text-align: right;
transition: transform 0.2s var(--ease);
}
.team-strip.expanded .team-strip-expand {
color: var(--accent);
transform: rotate(180deg);
}
.team-strip-body {
display: none;
border-top: 1px solid var(--border-soft);
padding: 18px;
background: var(--bg);
}
.team-strip.expanded .team-strip-body { display: block; }
.strip-pos-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 900px) {
.strip-pos-grid { grid-template-columns: repeat(2, 1fr); }
}
.strip-pos-col {
min-width: 0;
}
.strip-pos-col-head {
font-size: 12px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
display: flex;
justify-content: space-between;
font-weight: 600;
}
.strip-pos-col-head strong { color: var(--text); font-weight: 700; font-feature-settings: 'tnum' 1; }
.strip-player {
display: flex;
justify-content: space-between;
padding: 6px 0;
font-size: 13px;
border-top: 1px solid var(--border-soft);
gap: 8px;
}
.strip-player:first-of-type { border-top: none; }
.strip-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.strip-player-clickable { cursor: pointer; transition: color 0.1s; }
.strip-player-clickable:hover .strip-player-name { color: var(--accent); }
.strip-player-val {
font-family: 'Inter', sans-serif;
color: var(--text-muted);
flex-shrink: 0;
font-weight: 600;
font-feature-settings: 'tnum' 1;
}
.heatmap-legend {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--text-dim);
margin-bottom: 14px;
font-weight: 500;
}
.heatmap-swatch {
display: inline-block;
width: 14px;
height: 10px;
border-radius: 2px;
}
/* ===== Trade Calculator ===== */
.trade-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 20px;
}
@media (max-width: 900px) {
.trade-layout { grid-template-columns: 1fr; gap: 12px; }
}
/* Mobile-specific tightening for trade calc — side padding shrinks,
asset chips get larger touch targets, verdict bar resizes for narrow
viewports. The calc was previously desktop-first and felt cramped on
phones; this pass makes it usable as a primary surface. */
@media (max-width: 700px) {
.trade-layout { margin-top: 12px; }
.trade-side { padding: 14px; min-height: 0; }
.trade-side-head { margin-bottom: 10px; padding-bottom: 10px; }
.trade-side-owner { font-size: 18px; }
.trade-side-total { font-size: 20px; }
.asset-chip {
padding: 10px 14px; /* bigger touch target */
font-size: 14px;
min-height: 36px;
}
.asset-chip .val { font-size: 12px; }
.asset-pool { gap: 8px; }
.trade-verdict { margin-top: 16px; padding: 16px; }
.verdict-bar { height: 28px; margin: 12px 0; }
}
.trade-side {
border: 1px solid var(--border-soft);
background: var(--bg-elev);
padding: 20px;
min-height: 200px;
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.trade-side-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-soft);
}
.trade-side-label {
font-size: 12px;
color: var(--text-dim);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.trade-side-owner {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 500;
line-height: 1.1;
margin-top: 4px;
letter-spacing: -0.015em;
color: var(--text);
}
.trade-side-total {
font-family: 'Inter', sans-serif;
font-size: 24px;
color: var(--accent);
font-weight: 700;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.02em;
}
/* Phase C7: per-side player search input */
.trade-side-search {
width: 100%;
margin-top: 10px;
padding: 9px 14px 9px 36px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-md);
color: var(--text);
font-size: 13px;
font-family: inherit;
transition: border-color 0.12s var(--ease), background 0.12s var(--ease);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 11px center;
background-size: 14px;
}
.trade-side-search:focus {
outline: none;
border-color: var(--accent);
background-color: var(--bg-elev-2);
box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.08);
}
.trade-side-search::placeholder { color: var(--text-dim); }
.asset-pool {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
}
.asset-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
font-size: 13px;
font-weight: 500;
cursor: pointer;
border-radius: var(--r-full);
transition: all 0.15s var(--ease);
}
.asset-chip:hover {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-1px);
}
.asset-chip.selected {
background: var(--accent);
color: #120a18;
border-color: var(--accent);
font-weight: 600;
}
.asset-chip .val {
font-size: 11px;
opacity: 0.75;
font-weight: 500;
font-feature-settings: 'tnum' 1;
}
.trade-verdict {
margin-top: 24px;
padding: 24px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.verdict-bar {
height: 36px;
display: flex;
margin: 16px 0;
overflow: hidden;
background: var(--bg);
border: 1px solid var(--border-soft);
position: relative;
border-radius: var(--r-md);
}
.verdict-bar-left {
background: linear-gradient(90deg, var(--accent-deep), var(--accent));
transition: width 0.3s var(--ease);
}
.verdict-bar-right {
background: linear-gradient(90deg, var(--accent-2), var(--accent-2-soft));
transition: width 0.3s var(--ease);
}
.verdict-bar-center {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: var(--text);
opacity: 0.3;
}
.verdict-numbers {
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 500;
}
.verdict-summary {
margin-top: 16px;
padding: 14px 16px;
background: var(--bg);
border-left: 3px solid var(--accent);
font-size: 14px;
line-height: 1.6;
border-radius: 0 var(--r-md) var(--r-md) 0;
}
.verdict-summary strong { color: var(--accent); }
/* Trade share button row — at the bottom of the trade verdict.
Copy-link affordance for sending the trade analysis to a leaguemate. */
.trade-share-row {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--border-soft);
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.trade-share-row button.copied {
background: rgba(127, 168, 120, 0.15);
border-color: #97c890;
color: #97c890;
}
.trade-share-hint {
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
flex: 1;
min-width: 200px;
}
/* ===== Fit Analysis Panel ===== */
.fit-panel {
margin-top: 24px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.fit-panel-head {
padding: 18px 20px;
border-bottom: 1px solid var(--border-soft);
background: var(--bg-elev-2);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.fit-panel-title {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
}
.fit-panel-hint {
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
.fit-sides {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--border-soft);
}
@media (max-width: 900px) {
.fit-sides { grid-template-columns: 1fr; }
}
.fit-side {
padding: 20px;
background: var(--bg-elev);
}
.fit-side-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-soft);
gap: 10px;
}
.fit-side-name {
font-weight: 600;
font-size: 15px;
letter-spacing: -0.005em;
}
.fit-side-archetype {
font-family: 'Inter', sans-serif;
font-size: 11px;
color: var(--accent);
font-weight: 700;
letter-spacing: 0.02em;
padding: 3px 10px;
background: rgba(212, 168, 75, 0.1);
border: 1px solid rgba(212, 168, 75, 0.25);
border-radius: var(--r-full);
}
.fit-verdict {
padding: 12px 14px;
margin-bottom: 14px;
font-size: 13px;
line-height: 1.55;
border-left: 3px solid;
border-radius: 0 var(--r-md) var(--r-md) 0;
background: var(--bg);
}
.fit-verdict.good { border-left-color: var(--accent); color: var(--text); }
.fit-verdict.ok { border-left-color: var(--warn); color: var(--text); }
.fit-verdict.bad { border-left-color: var(--danger); color: var(--text); }
.fit-verdict strong {
display: block;
font-family: 'Inter', sans-serif;
font-size: 12px;
letter-spacing: 0.02em;
text-transform: uppercase;
margin-bottom: 4px;
font-weight: 700;
}
.fit-verdict.good strong { color: var(--accent); }
.fit-verdict.ok strong { color: var(--warn); }
.fit-verdict.bad strong { color: var(--danger); }
.fit-pos-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.fit-pos-row {
display: grid;
grid-template-columns: 36px 1fr;
gap: 12px;
align-items: start;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-soft);
}
.fit-pos-row:last-child { border-bottom: none; padding-bottom: 0; }
.fit-pos-label {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 700;
font-size: 22px;
line-height: 1;
padding-top: 2px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
}
.fit-pos-label.qb { color: var(--qb); background: rgba(194, 74, 90, 0.1); }
.fit-pos-label.rb { color: var(--rb); background: rgba(127, 168, 120, 0.1); }
.fit-pos-label.wr { color: var(--wr); background: rgba(96, 144, 184, 0.1); }
.fit-pos-label.te { color: var(--te); background: rgba(212, 168, 75, 0.1); }
.fit-pos-lines {
display: flex;
flex-direction: column;
gap: 6px;
}
.fit-pos-line {
display: grid;
grid-template-columns: 110px 1fr auto;
gap: 10px;
align-items: baseline;
font-size: 13px;
}
.fit-pos-line-label {
font-size: 11px;
color: var(--text-dim);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 600;
}
.fit-pos-line-vals {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--text);
font-weight: 500;
font-feature-settings: 'tnum' 1;
}
.fit-pos-arrow {
color: var(--text-dim);
font-size: 12px;
margin: 0 6px;
}
.fit-pos-delta {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
text-align: right;
min-width: 70px;
white-space: nowrap;
font-feature-settings: 'tnum' 1;
}
.fit-pos-delta.up { color: var(--accent); }
.fit-pos-delta.down { color: var(--danger); }
.fit-pos-delta.flat { color: var(--text-dim); }
.fit-pos-rank {
color: var(--text-muted);
}
.fit-pos-rank b { color: var(--text); font-weight: 500; }
.fit-metric-row {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 12px;
padding: 8px 0;
border-top: 1px solid var(--border-soft);
font-size: 12px;
align-items: center;
}
.fit-metric-row:first-of-type { border-top: none; }
.fit-metric-label {
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.fit-starter-impact {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
}
.fit-starter-item {
font-size: 12px;
color: var(--text-muted);
padding: 3px 0;
font-weight: 500;
}
.fit-starter-item b { color: var(--text); font-weight: 600; }
.fit-starter-item.promoted b { color: var(--accent); }
.fit-starter-item.demoted b { color: var(--danger); }
/* Exposure */
.fit-exposure {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
}
.fit-exposure-head {
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 10px;
font-weight: 600;
}
.fit-exposure-player {
margin-bottom: 12px;
}
.fit-exposure-name {
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.fit-exposure-leagues {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.exposure-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
font-family: 'Inter', sans-serif;
font-size: 11px;
background: var(--bg);
border: 1px solid var(--border-soft);
color: var(--text-muted);
border-radius: var(--r-full);
font-weight: 500;
}
.exposure-chip.none {
color: var(--text-dim);
border-style: dashed;
}
.exposure-total {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: var(--text);
font-weight: 700;
margin-left: 6px;
font-feature-settings: 'tnum' 1;
}
/* Team picker for trade */
.team-picker-row {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
flex-wrap: wrap;
}
.team-picker-row label {
font-size: 13px;
color: var(--text-muted);
font-weight: 600;
min-width: 80px;
}
/* On mobile, stack the label above the picker and let the select expand
full-width. Side-by-side cramps the select to ~60% of the screen. */
@media (max-width: 700px) {
.team-picker-row {
flex-direction: column;
align-items: stretch;
gap: 4px;
margin-bottom: 12px;
}
.team-picker-row label { min-width: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.team-picker-row select { width: 100%; font-size: 15px; padding: 10px 12px; }
}
/* ===== Team Needs Panel ===== */
.needs-panel {
margin-top: 24px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.needs-panel-head {
padding: 18px 20px 14px;
border-bottom: 1px solid var(--border-soft);
font-family: 'Fraunces', serif;
font-size: 18px;
font-weight: 500;
color: var(--text);
letter-spacing: -0.01em;
background: var(--bg-elev-2);
}
.needs-table {
width: 100%;
}
.needs-row {
display: grid;
grid-template-columns: 40px 1fr 120px 140px 1fr;
padding: 14px 20px;
gap: 14px;
border-top: 1px solid var(--border-soft);
align-items: center;
}
.needs-row:first-child { border-top: none; }
@media (max-width: 900px) {
.needs-row {
grid-template-columns: 40px 1fr 80px;
gap: 10px;
}
.needs-row .needs-age,
.needs-row .needs-recommendation { grid-column: 1 / -1; padding-left: 54px; }
.needs-row .needs-age { padding-top: 4px; }
}
.needs-pos-letter {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 700;
font-size: 26px;
line-height: 1;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
}
.needs-pos-letter.qb { color: var(--qb); background: rgba(194, 74, 90, 0.1); }
.needs-pos-letter.rb { color: var(--rb); background: rgba(127, 168, 120, 0.1); }
.needs-pos-letter.wr { color: var(--wr); background: rgba(96, 144, 184, 0.1); }
.needs-pos-letter.te { color: var(--te); background: rgba(212, 168, 75, 0.1); }
.needs-value-cell { }
.needs-value-num {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--accent);
font-feature-settings: 'tnum' 1;
letter-spacing: -0.02em;
}
.needs-sub {
font-size: 12px;
color: var(--text-dim);
font-weight: 500;
margin-top: 3px;
}
.needs-rank {
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 700;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.02em;
}
.needs-rank.top { color: var(--accent); }
.needs-rank.mid { color: var(--text); }
.needs-rank.bot { color: var(--warn); }
.needs-rank.critical { color: var(--danger); }
.needs-rank-of {
font-size: 12px;
color: var(--text-dim);
font-weight: 500;
}
.needs-age {
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
.needs-age-val {
font-size: 17px;
color: var(--text);
font-weight: 700;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.02em;
}
.needs-age-val.young { color: var(--accent); }
.needs-age-val.old { color: var(--warn); }
.needs-age-val.very-old { color: var(--danger); }
.needs-recommendation {
font-size: 13px;
color: var(--text);
line-height: 1.55;
}
.needs-recommendation strong {
display: block;
font-family: 'Inter', sans-serif;
font-size: 11px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 4px;
font-weight: 700;
}
.needs-recommendation.good strong { color: var(--accent); }
.needs-recommendation.warn strong { color: var(--warn); }
.needs-recommendation.critical strong { color: var(--danger); }
.team-archetype {
padding: 16px 20px;
border-top: 1px solid var(--border-soft);
background: var(--bg-elev-2);
display: flex;
gap: 24px;
align-items: center;
flex-wrap: wrap;
}
.archetype-label {
font-size: 12px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.archetype-value {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 22px;
font-weight: 500;
color: var(--accent);
letter-spacing: -0.01em;
}
.archetype-holes {
padding: 16px 20px;
border-top: 1px solid var(--border-soft);
}
.archetype-hole {
display: grid;
grid-template-columns: 50px 1fr;
gap: 12px;
padding: 4px 0;
font-size: 12px;
align-items: baseline;
}
.archetype-hole .hole-pos {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
}
.archetype-hole.critical .hole-pos { color: var(--danger); }
.archetype-hole.major .hole-pos { color: var(--warn); }
.archetype-hole .hole-detail {
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
}
/* ===== Team Detail Tabs ===== */
.team-tabs {
display: flex;
gap: 4px;
margin: 20px 0 28px;
padding: 5px;
background: rgba(18, 10, 24, 0.55);
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
box-shadow: var(--shadow-sm), inset 0 1px 0 var(--surface-top);
overflow-x: auto;
/* CRITICAL on mobile: pan-x lets the user scroll the tab strip horizontally
but vertical pan gestures still bubble up to scroll the page. Without
this, the tab strip's overflow-x can swallow vertical scroll attempts
and the user can't scroll the page at all. */
touch-action: pan-x;
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
.team-tabs::-webkit-scrollbar { display: none; }
.team-tab {
flex: 1 1 auto;
padding: 9px 16px;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
border-radius: var(--r-full);
border: 1px solid transparent;
transition: all 0.15s var(--ease);
white-space: nowrap;
text-align: center;
min-width: max-content;
letter-spacing: -0.01em;
}
.team-tab:hover {
color: var(--text);
background: var(--bg-lift);
border-color: var(--border-soft);
}
.team-tab.active {
color: #120a18;
background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 55%, var(--accent-deep) 100%);
border-color: rgba(168, 132, 47, 0.65);
font-weight: 700;
box-shadow: var(--glow), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.team-tab-content {
min-height: 200px;
}
.team-tab-content > *:first-child {
margin-top: 0;
}
.tab-empty {
padding: 48px 32px;
text-align: center;
color: var(--text-muted);
font-size: 14px;
line-height: 1.55;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
max-width: 520px;
margin: 24px auto;
position: relative;
}
.tab-empty::before {
content: '';
display: block;
width: 40px;
height: 40px;
margin: 0 auto 14px;
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: 50%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='5'/%3E%3Cpath d='M8 5v3M8 11h0'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
@media (max-width: 700px) {
.team-tabs {
flex-wrap: nowrap;
overflow-x: auto;
}
.team-tab {
font-size: 13px;
padding: 9px 12px;
}
}
/* ===== Proposed Lineup Panel ===== */
.lineup-panel {
margin-top: 24px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.lineup-panel-head {
padding: 18px 20px;
border-bottom: 1px solid var(--border-soft);
background: var(--bg-elev-2);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
}
.lineup-title {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
}
.lineup-sub {
font-size: 13px;
color: var(--text-muted);
margin-top: 4px;
font-weight: 500;
}
.lineup-totals {
display: flex;
gap: 24px;
}
.lineup-total-stat { text-align: right; }
.lineup-total-label {
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.lineup-total-value {
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 700;
margin-top: 4px;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.02em;
}
.lineup-total-value.accent { color: var(--accent); }
.lineup-rows { }
.lineup-row {
display: grid;
grid-template-columns: 56px 1fr auto 50px 80px;
gap: 14px;
padding: 10px 18px;
border-top: 1px solid var(--border-soft);
align-items: center;
font-size: 13px;
}
.lineup-row:first-child { border-top: none; }
.lineup-row.empty { opacity: 0.6; }
.lineup-slot {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
text-align: center;
padding: 5px 8px;
border: 1px solid var(--border);
letter-spacing: 0.02em;
color: var(--text-muted);
background: var(--bg);
border-radius: var(--r-sm);
}
/* Position-themed slot colors */
.lineup-slot.qb { color: var(--qb); border-color: rgba(194, 74, 90, 0.4); background: rgba(194, 74, 90, 0.08); }
.lineup-slot.rb { color: var(--rb); border-color: rgba(127, 168, 120, 0.4); background: rgba(127, 168, 120, 0.08); }
.lineup-slot.wr { color: var(--wr); border-color: rgba(96, 144, 184, 0.4); background: rgba(96, 144, 184, 0.08); }
.lineup-slot.te { color: var(--te); border-color: rgba(212, 168, 75, 0.4); background: rgba(212, 168, 75, 0.08); }
.lineup-slot.flex,
.lineup-slot.rec_flex,
.lineup-slot.wrrb_flex { color: var(--pick); border-color: rgba(160, 128, 192, 0.4); background: rgba(160, 128, 192, 0.08); }
.lineup-slot.super_flex { color: var(--accent); border-color: rgba(212, 168, 75, 0.4); background: rgba(212, 168, 75, 0.1); }
.lineup-player-name {
font-weight: 600;
letter-spacing: -0.005em;
}
.lineup-true-pos {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
color: var(--text-dim);
background: var(--bg-elev-2);
padding: 2px 7px;
margin-left: 8px;
letter-spacing: 0.02em;
vertical-align: middle;
border-radius: var(--r-full);
}
/* Below-startable flag — applied when a slot is filled but the player's
* value is below the league-relative threshold for their position. They're
* starting (best option), but they're an upgrade target. */
.lineup-flag {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 700;
color: var(--warn);
background: rgba(212, 140, 74, 0.12);
border: 1px solid rgba(212, 140, 74, 0.3);
padding: 2px 8px;
margin-left: 8px;
letter-spacing: 0.02em;
border-radius: var(--r-full);
text-transform: uppercase;
cursor: help;
}
.lineup-row.below-startable {
background: linear-gradient(90deg, rgba(212, 140, 74, 0.04), transparent 40%);
}
.lineup-player-meta {
font-size: 12px;
color: var(--text-dim);
font-weight: 500;
}
.lineup-player-age {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--text-muted);
text-align: right;
font-feature-settings: 'tnum' 1;
font-weight: 500;
}
.lineup-player-value {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
text-align: right;
font-feature-settings: 'tnum' 1;
}
.lineup-player-value.hi { color: var(--accent); }
.lineup-player-value.none { color: var(--text-dim); }
@media (max-width: 700px) {
.lineup-row {
grid-template-columns: 52px 1fr 70px;
gap: 10px;
}
.lineup-player-meta, .lineup-player-age { display: none; }
}
/* ===== Rookie Draft Panel ===== */
.rookie-panel {
margin-top: 24px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.rookie-panel-head {
padding: 18px 20px;
border-bottom: 1px solid var(--border-soft);
background: var(--bg-elev-2);
}
.rookie-panel-title {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
}
.rookie-panel-sub {
font-size: 13px;
color: var(--text-muted);
margin-top: 4px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
.rookie-pick-block {
border-bottom: 1px solid var(--border-soft);
padding: 14px 18px;
}
.rookie-pick-block:last-of-type { border-bottom: none; }
.rookie-pick-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.rookie-pick-label {
font-family: 'Fraunces', serif;
font-size: 17px;
font-weight: 500;
color: var(--accent);
letter-spacing: -0.01em;
}
.rookie-pick-meta {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
font-weight: 500;
}
.rookie-pick-tbd {
font-size: 11px;
color: var(--text-muted);
font-weight: 600;
padding: 3px 10px;
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
}
.rookie-rows { padding: 4px 20px; }
.rookie-row {
display: grid;
grid-template-columns: 28px 36px 1fr 80px;
gap: 12px;
padding: 11px 0;
border-top: 1px solid var(--border-soft);
align-items: center;
font-size: 14px;
}
/* Rookie avatar — Sleeper headshot when available, football silhouette
* fallback for prospects without photos yet. */
.rookie-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
background: var(--bg-elev-2);
flex-shrink: 0;
position: relative;
}
.rookie-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rookie-avatar.silhouette::before {
content: '🏈';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
opacity: 0.4;
}
.rookie-row:first-child { border-top: none; }
.rookie-row-clickable { cursor: pointer; transition: opacity 0.1s; }
.rookie-row-clickable:hover .rookie-name { color: var(--accent); }
.rookie-row.top {
background: linear-gradient(90deg, rgba(212, 168, 75,0.06), transparent);
padding-left: 8px;
padding-right: 8px;
margin-left: -8px;
margin-right: -8px;
}
.rookie-rank {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--text-dim);
text-align: center;
font-weight: 600;
}
.rookie-row.top .rookie-rank { color: var(--accent); font-weight: 700; }
.rookie-main { min-width: 0; }
.rookie-name {
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
}
.rookie-meta {
font-size: 12px;
color: var(--text-dim);
margin-top: 4px;
font-weight: 500;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.rookie-meta-pos,
.rookie-meta-team {
font-family: 'Roboto Mono', monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
}
.rookie-meta-pos { color: var(--text-muted); }
.rookie-meta-team { color: var(--text-dim); }
.rookie-meta-adp {
font-size: 11px;
}
/* Fit tag — replaces the long-form fit sentence. Single semantic word that
reads instantly. Hover/tap shows the longer reasoning via tooltip. */
.rookie-fit-tag {
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: var(--r-full);
border: 1px solid;
cursor: help;
}
.rookie-fit-tag.fit-need { color: var(--success); border-color: rgba(127, 168, 120, 0.4); background: rgba(127, 168, 120, 0.1); }
.rookie-fit-tag.fit-depth { color: var(--accent); border-color: rgba(212, 168, 75, 0.4); background: rgba(212, 168, 75, 0.08); }
.rookie-fit-tag.fit-bpa { color: var(--text-muted); border-color: var(--border-soft); background: var(--bg-elev-2); }
.rookie-fit-tag.fit-stocked { color: var(--text-dim); border-color: var(--border-soft); background: transparent; opacity: 0.7; }
.rookie-value {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--accent);
text-align: right;
font-feature-settings: 'tnum' 1;
}
.rookie-badge {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 10px;
background: var(--accent);
color: var(--bg);
padding: 2px 8px;
margin-left: 8px;
letter-spacing: 0.02em;
vertical-align: middle;
font-weight: 700;
border-radius: var(--r-full);
}
/* Value-gap badge: shows whether a rookie is "on value" for the slot,
or a reach (UP) or value spot (DOWN). */
.rookie-gap-badge {
display: inline-block;
font-family: 'Roboto Mono', monospace;
font-size: 10px;
padding: 2px 7px;
margin-left: 8px;
letter-spacing: 0.02em;
vertical-align: middle;
font-weight: 600;
border-radius: var(--r-full);
border: 1px solid;
}
.rookie-gap-badge.gap-on {
color: var(--accent);
border-color: rgba(212, 168, 75, 0.35);
background: rgba(212, 168, 75, 0.08);
}
.rookie-gap-badge.gap-up {
/* Rookie's value is HIGHER than the pick — surfacing a steal at this slot */
color: var(--success);
border-color: rgba(127, 168, 120, 0.35);
background: rgba(127, 168, 120, 0.08);
}
.rookie-gap-badge.gap-down {
/* Rookie's value is LOWER than the pick — would be a reach */
color: var(--warn);
border-color: rgba(212, 140, 74, 0.35);
background: rgba(212, 140, 74, 0.08);
}
.rookie-adp {
color: var(--accent);
font-family: 'Roboto Mono', monospace;
font-size: 11px;
font-weight: 600;
}
.rookie-adp-n {
color: var(--text-dim);
font-weight: 500;
}
.rookie-panel-foot {
padding: 14px 20px;
border-top: 1px solid var(--border-soft);
font-size: 12px;
color: var(--text-dim);
line-height: 1.6;
background: var(--bg-elev-2);
font-weight: 500;
}
/* Mobile tightening — desktop sizes were eating too much vertical room */
@media (max-width: 700px) {
.rookie-panel-head { padding: 14px 16px; }
.rookie-panel-title { font-size: 18px; }
.rookie-panel-sub { font-size: 11px; line-height: 1.4; }
.rookie-rows { padding: 0 12px; }
.rookie-pick-block { padding: 12px 14px; }
.rookie-row { gap: 10px; padding: 9px 0; grid-template-columns: 22px 32px 1fr 70px; }
.rookie-avatar { width: 32px; height: 32px; }
.rookie-name { font-size: 13px; }
.rookie-meta { font-size: 11px; gap: 5px; }
.rookie-value { font-size: 13px; }
.rookie-panel-foot { padding: 10px 14px; font-size: 11px; }
}
/* ===== Power Rankings panel (within-league team leaderboard) ===== */
.pr-panel {
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.pr-head {
padding: 18px 22px;
border-bottom: 1px solid var(--border-soft);
background: var(--bg-elev-2);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
flex-wrap: wrap;
}
.pr-title {
font-family: 'Fraunces', serif;
font-size: 24px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--text);
}
.pr-sub {
font-size: 13px;
color: var(--text-muted);
margin-top: 4px;
font-weight: 500;
}
.pr-stats {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.pr-stat {
text-align: right;
min-width: 70px;
}
.pr-stat-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.07em;
font-weight: 700;
}
.pr-stat-val {
font-family: 'Inter', sans-serif;
font-size: 17px;
font-weight: 700;
margin-top: 4px;
color: var(--text);
font-feature-settings: 'tnum' 1;
letter-spacing: -0.015em;
}
.pr-stat-val.accent { color: var(--accent); }
.pr-list { }
.pr-row {
display: grid;
grid-template-columns: 38px 1fr 1fr 110px 110px 24px;
gap: 14px;
align-items: center;
padding: 12px 22px;
border-top: 1px solid var(--border-soft);
cursor: pointer;
transition: background 0.1s;
}
.pr-row:hover { background: var(--bg-elev-2); }
.pr-row-mine {
background: rgba(212, 168, 75, 0.06);
border-left: 3px solid var(--accent);
padding-left: 19px;
}
.pr-row-mine:hover { background: rgba(212, 168, 75, 0.12); }
.pr-rank {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 500;
color: var(--text-muted);
text-align: center;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.02em;
}
.pr-row:nth-child(1) .pr-rank,
.pr-row:nth-child(2) .pr-rank,
.pr-row:nth-child(3) .pr-rank { color: var(--accent); }
.pr-team {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.pr-team-text {
min-width: 0;
flex: 1;
}
.pr-team-name {
font-size: 14px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pr-mine-tag {
font-size: 9px;
font-weight: 700;
color: var(--accent);
background: rgba(212, 168, 75, 0.15);
padding: 2px 6px;
border-radius: var(--r-full);
margin-left: 4px;
text-transform: uppercase;
letter-spacing: 0.06em;
vertical-align: middle;
}
/* Inline owner-profile trigger next to team name. Subtle until hover. */
.pr-owner-btn {
appearance: none;
background: transparent;
border: none;
color: var(--text-dim);
cursor: pointer;
font-size: 12px;
padding: 0 2px;
margin-left: 2px;
border-radius: var(--r-sm);
line-height: 1;
vertical-align: middle;
transition: color 0.12s var(--ease);
}
.pr-owner-btn:hover { color: var(--accent); }
.pr-team-meta {
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
line-height: 1.3;
}
.pr-archetype-pill {
padding: 2px 8px;
font-size: 10px;
font-weight: 700;
border-radius: var(--r-full);
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
/* ===== Per-team rank chip row — green/yellow/red rank within league ===== */
.pr-chips {
display: flex;
gap: 4px;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.pr-chip {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 38px;
padding: 4px 6px;
border-radius: var(--r-sm);
font-family: 'Inter', sans-serif;
line-height: 1.1;
cursor: help;
}
.pr-chip-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.75;
}
.pr-chip-rank {
font-size: 12px;
font-weight: 700;
margin-top: 1px;
font-feature-settings: 'tnum' 1;
}
/* Mobile: chips must squeeze into ~340px wide cards. Shrink min-width,
* tighten padding, and allow the chip group to wrap to a second row if
* needed. Without this, chips overflow horizontally on phones. */
@media (max-width: 700px) {
.pr-chips {
gap: 3px;
justify-content: flex-start;
flex-wrap: wrap;
}
.pr-chip {
min-width: 32px;
padding: 3px 4px;
}
.pr-chip-label { font-size: 8px; }
.pr-chip-rank { font-size: 11px; }
}
/* Tier coloring — three steps, designed to read as a heatmap. */
.pr-chip-good {
background: rgba(127, 168, 120, 0.18);
color: #97c890;
}
.pr-chip-mid {
background: rgba(160, 160, 160, 0.10);
color: var(--text-muted);
}
.pr-chip-poor {
background: rgba(194, 74, 90, 0.16);
color: #d27582;
}
/* Inline mini chip for the legend (no rank, just label) */
.pr-chip-mini {
flex-direction: row;
gap: 4px;
min-width: 0;
padding: 2px 8px;
}
.pr-chip-mini .pr-chip-label,
.pr-chip-mini .pr-chip-rank {
font-size: 10px;
margin: 0;
text-transform: none;
letter-spacing: 0.02em;
}
.pr-values {
text-align: right;
}
.pr-value-main {
font-family: 'Inter', sans-serif;
font-size: 17px;
font-weight: 700;
color: var(--accent);
font-feature-settings: 'tnum' 1;
letter-spacing: -0.015em;
}
.pr-value-sub {
font-size: 10px;
color: var(--text-dim);
margin-top: 3px;
font-weight: 500;
}
.pr-vs-cell {
text-align: right;
}
.pr-vs {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: var(--r-full);
background: var(--bg-elev-2);
color: var(--text-muted);
white-space: nowrap;
font-feature-settings: 'tnum' 1;
}
.pr-vs-pos { color: #7fa878; background: rgba(127, 168, 120, 0.1); }
.pr-vs-neg { color: #c24a5a; background: rgba(194, 74, 90, 0.1); }
.pr-vs-self {
color: var(--accent);
background: rgba(212, 168, 75, 0.15);
border: 1px solid rgba(212, 168, 75, 0.3);
}
.pr-foot {
padding: 14px 22px;
background: var(--bg-elev-2);
border-top: 1px solid var(--border-soft);
font-size: 11px;
color: var(--text-muted);
line-height: 1.5;
}
/* Toolbar above the rows: expand/collapse all + legend */
.pr-toolbar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
background: var(--bg-elev-2);
border-bottom: 1px solid var(--border-soft);
flex-wrap: wrap;
}
.pr-toolbar-spacer { flex: 1; }
.pr-toolbar-legend {
font-size: 11px;
color: var(--text-muted);
font-weight: 500;
}
.pr-toolbar-legend strong {
color: var(--text);
font-weight: 700;
}
.pr-toolbar-legend-bar {
padding: 6px 22px 8px;
background: var(--bg-elev-2);
border-bottom: 1px solid var(--border-soft);
}
/* Sort selector — pill-style toggle group inside the toolbar.
* Lets users reorder rows by total/starters/QB/RB/WR/TE/picks. */
.pr-sort-group {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px;
background: var(--bg);
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
}
.pr-sort-label {
font-size: 11px;
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0 8px 0 6px;
}
.pr-sort-btn {
appearance: none;
border: none;
background: transparent;
color: var(--text-muted);
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
padding: 5px 12px;
border-radius: var(--r-full);
cursor: pointer;
transition: all 0.12s var(--ease);
}
.pr-sort-btn:hover {
color: var(--text);
background: var(--bg-elev);
}
.pr-sort-btn.active {
background: var(--accent);
color: var(--bg);
box-shadow: var(--shadow-sm);
}
@media (max-width: 700px) {
.pr-sort-group { flex-wrap: wrap; }
.pr-sort-btn { padding: 4px 9px; font-size: 11px; }
.pr-sort-label { padding: 0 4px; font-size: 10px; }
}
/* Row wrap groups summary + expandable body so they collapse together */
.pr-row-wrap {
border-top: 1px solid var(--border-soft);
}
.pr-row-wrap:first-child { border-top: none; }
.pr-row {
border-top: none !important;
}
.pr-row-wrap .pr-row {
border-top: none;
}
/* Expand chevron — rotates when expanded */
.pr-expand-icon {
color: var(--text-dim);
font-size: 14px;
transition: transform 0.2s var(--ease);
text-align: center;
width: 16px;
}
.pr-row-wrap.expanded .pr-expand-icon {
transform: rotate(180deg);
color: var(--accent);
}
/* Expandable body */
.pr-row-body {
display: none;
padding: 16px 22px 20px;
background: var(--bg);
border-top: 1px dashed var(--border-soft);
}
.pr-row-wrap.expanded .pr-row-body {
display: block;
}
.pr-expand-actions {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
display: flex;
justify-content: flex-end;
}
@media (max-width: 1000px) {
.pr-row {
grid-template-columns: 36px 1fr 1fr 90px 24px;
gap: 10px;
}
.pr-vs-cell { display: none; }
.pr-chip { min-width: 32px; padding: 3px 4px; }
.pr-chip-label { font-size: 8px; }
.pr-chip-rank { font-size: 11px; }
}
@media (max-width: 800px) {
.pr-row {
grid-template-columns: 28px 1fr 90px 18px;
gap: 8px;
padding: 10px 14px;
}
.pr-row-mine { padding-left: 11px; }
.pr-rank { font-size: 18px; }
.pr-chips { display: none; }
.pr-vs-cell { display: none; }
.pr-stats { gap: 10px; }
.pr-stat-val { font-size: 14px; }
.pr-row-body { padding: 14px; }
}
@media (max-width: 500px) {
.pr-row { grid-template-columns: 24px 1fr 80px 18px; }
.pr-vs-cell { display: none; }
.pr-value-sub { display: none; }
}
/* ===== Rankings Panel ===== */
.rankings-panel {
margin-top: 24px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.rankings-panel-head {
padding: 18px 20px;
border-bottom: 1px solid var(--border-soft);
background: var(--bg-elev-2);
}
.rankings-panel-title {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
}
.rankings-panel-sub {
font-size: 13px;
color: var(--text-muted);
margin-top: 4px;
font-weight: 500;
}
.rankings-filters {
display: flex;
gap: 6px;
padding: 14px 20px;
border-bottom: 1px solid var(--border-soft);
flex-wrap: wrap;
}
.rankings-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
background: var(--bg);
border: 1px solid var(--border-soft);
cursor: pointer;
border-radius: var(--r-full);
transition: all 0.15s var(--ease);
letter-spacing: -0.005em;
}
.rankings-pill:hover {
color: var(--text);
border-color: var(--border-hover);
}
.rankings-pill.active {
color: var(--bg);
background: var(--accent);
border-color: var(--accent);
}
.rankings-pill-count {
font-size: 11px;
opacity: 0.7;
font-weight: 500;
font-feature-settings: 'tnum' 1;
}
.rankings-pill.active .rankings-pill-count { opacity: 0.8; }
/* Inline divider between position filters and the rookies-only toggle. */
.rankings-filter-divider {
width: 1px;
height: 22px;
background: var(--border-soft);
margin: 0 6px;
align-self: center;
}
/* Toggle-style pill (rookies-only). Same look as filter pills but with a
subtle accent on the leading edge to communicate it's a separate axis. */
.rankings-pill-toggle {
border-style: dashed;
}
.rankings-pill-toggle.active {
border-style: solid;
}
.rankings-pill-toggle.disabled {
opacity: 0.35;
cursor: not-allowed;
}
.rankings-pill-toggle.disabled:hover {
color: var(--text-muted);
border-color: var(--border-soft);
}
.rankings-table { }
.rankings-header {
display: grid;
grid-template-columns: 48px 1fr 80px 1fr 90px;
padding: 12px 20px;
gap: 14px;
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
background: var(--bg-elev-2);
border-bottom: 1px solid var(--border-soft);
}
.rankings-header .rankings-rank { text-align: center; }
.rankings-header .rankings-value { text-align: right; }
.rankings-row {
display: grid;
grid-template-columns: 48px 1fr 80px 1fr 90px;
padding: 11px 20px;
gap: 14px;
border-top: 1px solid var(--border-soft);
align-items: center;
font-size: 14px;
transition: background 0.1s;
}
.rankings-row:hover { background: var(--bg-elev-2); }
.rankings-row:first-of-type { border-top: none; }
.rankings-row-clickable { cursor: pointer; }
.rankings-row-clickable:hover .rankings-name { color: var(--accent); }
.rankings-row.is-me {
background: linear-gradient(90deg, rgba(212, 168, 75, 0.08), transparent);
}
.rankings-row.is-me:hover {
background: linear-gradient(90deg, rgba(212, 168, 75, 0.12), var(--bg-elev-2));
}
.rankings-row.is-fa { }
.rankings-rank {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--text-dim);
text-align: center;
font-feature-settings: 'tnum' 1;
}
.rankings-row.is-me .rankings-rank { color: var(--accent); }
.rankings-main { min-width: 0; }
.rankings-name {
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rankings-meta {
font-size: 12px;
color: var(--text-dim);
margin-top: 3px;
font-weight: 500;
}
.rankings-posrank {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
.rankings-owner {
font-size: 13px;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rankings-owner-me {
color: var(--accent);
font-weight: 600;
}
.rankings-owner-other {
color: var(--text-muted);
font-weight: 500;
}
.rankings-owner-fa {
color: var(--text-dim);
font-style: italic;
font-weight: 500;
}
.rankings-value {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--text);
text-align: right;
font-feature-settings: 'tnum' 1;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.rankings-row.is-me .rankings-value { color: var(--accent); }
.rankings-momentum {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
}
.rankings-momentum.mom-up { color: #97c890; }
.rankings-momentum.mom-down { color: #d27582; }
.rankings-momentum.mom-flat { color: var(--text-dim); }
/* Ad slots — dormant until TACO_ADS.enabled + publisherId in ads-config.js */
.taco-ad-slot {
margin: 0 auto;
max-width: 728px;
border-radius: var(--r-md);
overflow: hidden;
}
.taco-ad-slot--dormant { display: none !important; }
.taco-ad-slot--live {
display: block;
margin: 16px auto 8px;
padding: 8px 0;
border: 1px dashed var(--border-soft);
background: rgba(28, 18, 36, 0.35);
}
.taco-ad-overview { margin-bottom: 8px; }
.rankings-tag {
display: inline-block;
font-size: 9px;
padding: 2px 6px;
margin-left: 4px;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: var(--r-full);
vertical-align: middle;
}
.rankings-tag.start { background: var(--accent); color: var(--bg); }
.rankings-tag.ir { background: var(--danger); color: var(--bg); }
.rankings-tag.taxi { background: var(--text-dim); color: var(--bg); }
.rankings-truncated {
padding: 14px 20px;
border-top: 1px solid var(--border-soft);
font-size: 12px;
color: var(--text-dim);
text-align: center;
background: var(--bg-elev-2);
font-weight: 500;
}
@media (max-width: 700px) {
.rankings-header,
.rankings-row {
grid-template-columns: 36px 1fr 80px;
gap: 10px;
}
.rankings-header .rankings-owner,
.rankings-row .rankings-owner,
.rankings-header .rankings-posrank,
.rankings-row .rankings-posrank {
display: none;
}
}
/* ===== Trade History View ===== */
.th-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-soft);
}
.th-title {
font-family: 'Fraunces', serif;
font-size: 36px;
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1;
color: var(--text);
}
.th-sub {
font-size: 14px;
color: var(--text-muted);
margin-top: 10px;
font-weight: 500;
}
.th-filters {
display: flex;
gap: 6px;
margin-bottom: 20px;
flex-wrap: wrap;
align-items: center;
}
.th-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
background: var(--bg-elev);
border: 1px solid var(--border-soft);
cursor: pointer;
border-radius: var(--r-full);
transition: all 0.15s var(--ease);
}
.th-pill:hover { color: var(--text); border-color: var(--border-hover); }
.th-pill.active {
color: var(--bg);
background: var(--accent);
border-color: var(--accent);
}
.th-pill-count {
font-size: 11px;
opacity: 0.75;
font-weight: 500;
font-feature-settings: 'tnum' 1;
}
.th-league-picker {
position: relative;
display: inline-flex;
align-items: center;
}
.th-league-picker::after {
content: '▾';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--text-muted);
font-size: 11px;
}
.th-league-select {
appearance: none;
-webkit-appearance: none;
padding: 7px 32px 7px 14px;
font-size: 13px;
font-weight: 600;
font-family: 'Inter', sans-serif;
color: var(--text-muted);
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
cursor: pointer;
transition: all 0.15s var(--ease);
max-width: 260px;
text-overflow: ellipsis;
}
.th-league-select:hover {
color: var(--text);
border-color: var(--border-hover);
}
.th-league-select:focus {
outline: none;
border-color: var(--accent);
}
.th-league-select.active {
color: var(--bg);
background: var(--accent);
border-color: var(--accent);
}
.th-league-select.active + .th-league-picker::after,
.th-league-picker:has(.th-league-select.active)::after {
color: var(--bg);
}
.th-list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* ===== Trader Card panel — global "you are a [tier] trader" verdict ===== */
.trader-card {
margin-bottom: 18px;
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 22px 24px;
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
/* Tier-specific accent gradients — subtle background tint communicates verdict */
.trader-card-sharp {
background: linear-gradient(135deg, var(--bg-elev), rgba(212, 168, 75, 0.08));
border-color: var(--accent);
}
.trader-card-edge {
background: linear-gradient(135deg, var(--bg-elev), rgba(127, 168, 120, 0.06));
}
.trader-card-even {
background: var(--bg-elev);
}
.trader-card-swingy {
background: linear-gradient(135deg, var(--bg-elev), rgba(181, 138, 168, 0.06));
}
.trader-card-slight-l {
background: linear-gradient(135deg, var(--bg-elev), rgba(180, 145, 90, 0.05));
}
.trader-card-soft {
background: linear-gradient(135deg, var(--bg-elev), rgba(194, 74, 90, 0.06));
}
.trader-card-head { margin-bottom: 16px; }
.trader-card-tier-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
margin-bottom: 4px;
}
/* Scope label under the tier name — tells the user whether the rating is
across all leagues or scoped to a single league. Italic to feel like
a subtitle, not a stat. */
.trader-card-scope {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 13px;
color: var(--text-muted);
margin-top: 2px;
margin-bottom: 8px;
letter-spacing: 0.01em;
}
.trader-card-tier {
font-family: 'Fraunces', serif;
font-size: 36px;
font-weight: 500;
color: var(--text);
letter-spacing: -0.025em;
line-height: 1.05;
margin-bottom: 6px;
}
.trader-card-sharp .trader-card-tier { color: var(--accent); }
.trader-card-edge .trader-card-tier { color: #97c890; }
.trader-card-soft .trader-card-tier { color: #d27582; }
.trader-card-blurb {
font-size: 13px;
color: var(--text-muted);
line-height: 1.45;
max-width: 540px;
}
.trader-card-stats {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.trader-card-stat {
text-align: center;
padding: 10px 6px;
background: rgba(0, 0, 0, 0.15);
border-radius: var(--r-md);
}
.trader-card-stat-num {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--text);
font-feature-settings: 'tnum' 1;
letter-spacing: -0.01em;
}
.trader-card-stat-num.win { color: #97c890; }
.trader-card-stat-num.loss { color: #d27582; }
.trader-card-stat-lbl {
font-size: 9px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
margin-top: 3px;
}
.trader-card-foot {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
}
.trader-card-fact {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 12px;
}
.trader-card-fact-lbl {
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
font-size: 10px;
}
.trader-card-fact-val {
color: #97c890;
font-weight: 700;
font-feature-settings: 'tnum' 1;
}
.trader-card-fact-val.loss { color: #d27582; }
.trader-card-fact-meta {
color: var(--text-muted);
font-size: 11px;
font-weight: 500;
}
@media (max-width: 700px) {
.trader-card { padding: 18px 16px; }
.trader-card-tier { font-size: 28px; }
.trader-card-stats { grid-template-columns: repeat(3, 1fr); }
}
/* ===== Trade Patterns analysis panel ===== */
.tp-panel {
margin-bottom: 18px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
padding: 16px 18px;
box-shadow: var(--shadow-sm);
}
.tp-panel-head {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
margin-bottom: 14px;
display: flex;
justify-content: space-between;
align-items: center;
}
.tp-panel-meta {
color: var(--text-muted);
text-transform: none;
letter-spacing: 0;
font-weight: 500;
font-size: 11px;
}
.tp-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.tp-tile {
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 10px 12px;
text-align: center;
}
.tp-tile-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
.tp-tile-num {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--text);
margin-top: 4px;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.01em;
}
.tp-tile-meta {
font-size: 10px;
color: var(--text-muted);
margin-top: 3px;
font-weight: 500;
}
/* Position mix horizontal bar — reads like a pie chart but flat */
.tp-mix { margin-bottom: 14px; }
.tp-mix-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
margin-bottom: 6px;
}
.tp-mix-bar {
display: flex;
height: 22px;
border-radius: var(--r-sm);
overflow: hidden;
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
}
.tp-mix-seg {
display: flex;
align-items: center;
justify-content: center;
color: var(--bg);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
cursor: help;
transition: opacity 0.12s var(--ease);
}
.tp-mix-seg:hover { opacity: 0.85; }
.tp-mix-qb { background: #d4a84b; }
.tp-mix-rb { background: #7fa878; }
.tp-mix-wr { background: #6c8eb8; }
.tp-mix-te { background: #b58aa8; }
/* Hot players row */
.tp-hot { margin-bottom: 0; }
/* Two-column layout when filter is me-centric (acquired vs sent away) */
.tp-hot-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 600px) {
.tp-hot-grid { grid-template-columns: 1fr; gap: 12px; }
}
.tp-hot-col {
padding: 12px 14px;
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
}
.tp-hot-label-acquired { color: var(--success); }
.tp-hot-label-acquired em {
color: var(--success);
font-style: italic;
font-family: 'Fraunces', serif;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
font-size: 12px;
}
.tp-hot-label-sent { color: var(--danger); }
.tp-hot-label-sent em {
color: var(--danger);
font-style: italic;
font-family: 'Fraunces', serif;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
font-size: 12px;
}
.tp-hot-empty {
font-style: italic;
font-size: 12px;
color: var(--text-dim);
}
.tp-hot-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
margin-bottom: 6px;
}
.tp-hot-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tp-hot-chip {
padding: 4px 10px;
background: var(--bg-elev-2);
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
font-size: 12px;
font-weight: 600;
color: var(--text);
}
.tp-hot-chip-clickable {
cursor: pointer;
transition: all 0.12s var(--ease);
}
.tp-hot-chip-clickable:hover {
background: var(--bg-elev);
border-color: var(--accent);
color: var(--accent);
}
.tp-hot-count {
color: var(--accent);
font-weight: 700;
font-feature-settings: 'tnum' 1;
margin-left: 4px;
font-size: 11px;
}
.th-row {
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
padding: 16px 18px;
box-shadow: var(--shadow-sm);
transition: border-color 0.15s var(--ease);
}
.th-row:hover { border-color: var(--border-hover); }
.th-row.mine { border-left: 3px solid var(--accent); }
.th-row-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.th-row-league {
font-size: 15px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
}
.th-row-meta {
font-size: 12px;
color: var(--text-dim);
margin-top: 3px;
font-weight: 500;
}
.th-verdict {
font-size: 11px;
padding: 4px 10px;
font-weight: 700;
letter-spacing: 0.02em;
border-radius: var(--r-full);
white-space: nowrap;
align-self: flex-start;
border: 1px solid;
}
.th-verdict.fair { color: var(--accent); border-color: rgba(212, 168, 75, 0.4); background: rgba(212, 168, 75, 0.1); }
.th-verdict.me-won { color: var(--success); border-color: rgba(127, 168, 120, 0.4); background: rgba(127, 168, 120, 0.1); }
.th-verdict.me-lost { color: var(--danger); border-color: rgba(194, 74, 90, 0.4); background: rgba(194, 74, 90, 0.1); }
.th-verdict.other { color: var(--text-muted); border-color: var(--border-soft); background: var(--bg-elev-2); }
.th-sides {
display: grid;
grid-template-columns: 1fr 30px 1fr;
gap: 12px;
align-items: stretch;
}
@media (max-width: 700px) {
.th-sides { grid-template-columns: 1fr; }
.th-arrow { display: none; }
}
.th-side {
background: var(--bg);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 12px 14px;
}
.th-side.won { border-color: rgba(212, 168, 75, 0.35); background: rgba(212, 168, 75, 0.04); }
.th-side-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-soft);
gap: 10px;
}
.th-side-head strong {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
}
.th-side-me { color: var(--accent); }
.th-side-clickable {
cursor: pointer;
transition: color 0.12s var(--ease);
text-decoration: underline;
text-decoration-color: transparent;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.th-side-clickable:hover {
color: var(--accent);
text-decoration-color: var(--accent);
}
.th-side-total {
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--accent);
font-feature-settings: 'tnum' 1;
}
.th-assets {
display: flex;
flex-direction: column;
gap: 5px;
}
.th-asset {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
font-size: 13px;
padding: 3px 0;
font-weight: 500;
}
.th-asset-clickable {
cursor: pointer;
margin: 0 -6px;
padding-left: 6px;
padding-right: 6px;
border-radius: var(--r-sm);
transition: background 0.1s;
}
.th-asset-clickable:hover { background: var(--bg-elev-2); color: var(--accent); }
.th-asset.th-pick {
color: var(--pick);
}
.th-asset.empty {
color: var(--text-dim);
font-style: italic;
}
.th-asset-val {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--accent);
font-feature-settings: 'tnum' 1;
}
.th-arrow {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
font-size: 20px;
}
/* ===== My Assets View ===== */
.ma-head {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-soft);
}
.ma-title {
font-family: 'Fraunces', serif;
font-size: 36px;
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1;
color: var(--text);
}
.ma-sub {
font-size: 14px;
color: var(--text-muted);
margin-top: 10px;
font-weight: 500;
}
/* Top-3 most-exposed avatar strip — sits in the "Most exposed" stat-grid
* cell as a replacement for the single-name treatment. Each item is
* clickable (opens player drawer). Compact horizontal layout fits within
* a single stat-grid cell on desktop, wraps on narrow. */
.ma-top-exposed-block {
min-width: 240px;
}
/* Top-3 most-exposed strip on Assets. Horizontal layout so the strip
* height matches the short Inventory group sitting next to it in the
* stat-strip — vertical column made the whole strip card 3x taller than
* Inventory's content, producing empty horizontal canvas. */
.ma-top-exposed-strip {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 14px;
margin-top: 2px;
}
.ma-top-exposed-item {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
border-radius: var(--r-sm);
cursor: pointer;
transition: background 0.12s var(--ease);
}
.ma-top-exposed-item:hover { background: var(--bg-elev-2); }
.ma-top-exposed-item .avatar { width: 28px; height: 28px; flex-shrink: 0; }
.ma-top-exposed-item .avatar-initials { font-size: 10px; }
.ma-top-exposed-meta { min-width: 0; flex: 1; line-height: 1.15; }
.ma-top-exposed-name {
font-size: 12px;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ma-top-exposed-count {
font-size: 10px;
color: var(--text-muted);
font-family: 'Roboto Mono', monospace;
}
.ma-top-exposed-empty {
font-size: 14px;
color: var(--text-dim);
padding: 8px 4px;
}
/* Single-row filter layout: position pills on left, sort dropdown on right.
* Replaces an earlier dual-pill-row design that competed visually. */
.ma-filters-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 0 0 12px;
}
.ma-sort-control {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
@media (max-width: 700px) {
.ma-sort-control { margin-left: 0; width: 100%; }
.ma-sort-control .overview-select { flex: 1; }
}
/* Avatar leading on Assets rows — 40px headshot, slightly larger than
* Roster (36px) since Assets has more horizontal room and benefits from
* the extra visual weight. Falls back to position-colored initials if the
* Sleeper CDN doesn't have a headshot for this player. */
.ma-row .avatar { width: 40px; height: 40px; }
.ma-row .avatar-initials { font-size: 13px; }
/* Search-result empty state when the player isn't on any of your rosters */
.search-result-empty {
padding: 18px 20px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
background: var(--bg-elev);
border: 1px dashed var(--border-soft);
border-radius: var(--r-md);
}
/* Search bar at top of Assets view */
.assets-search-wrap {
position: relative;
margin: 0 0 20px 0;
}
.assets-search-input {
width: 100%;
padding: 14px 44px 14px 18px;
font-size: 16px;
font-family: 'Inter', sans-serif;
color: var(--text);
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
outline: none;
transition: border-color 0.15s var(--ease);
-webkit-appearance: none;
}
.assets-search-input:focus {
border-color: var(--accent);
}
.assets-search-input::placeholder {
color: var(--text-dim);
}
.assets-search-clear {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border: none;
background: var(--bg-elev-2);
color: var(--text-muted);
border-radius: var(--r-full);
font-size: 18px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.1s;
}
.assets-search-clear:hover {
background: var(--accent);
color: var(--bg);
}
/* Search result group */
.search-result-group {
margin-bottom: 24px;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
overflow: hidden;
}
.search-result-head {
padding: 14px 16px;
background: var(--bg-elev-2);
border-bottom: 1px solid var(--border-soft);
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 12px;
align-items: center;
}
/* Avatar in search-result head — matches main list (40px) so search and
* browse views feel like the same page. */
.search-result-head .avatar { width: 40px; height: 40px; }
.search-result-head .avatar-initials { font-size: 13px; }
/* Clickable name + meta block opens the player drawer. */
.search-result-headmain {
cursor: pointer;
min-width: 0;
border-radius: var(--r-sm);
padding: 2px 4px;
margin: -2px -4px;
transition: background 0.1s;
}
.search-result-headmain:hover { background: rgba(212, 168, 75, 0.06); }
.search-result-headmain:hover .search-result-name { color: var(--accent); }
.search-result-name {
font-family: 'Fraunces', serif;
font-size: 20px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
}
.search-result-meta {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
font-weight: 500;
}
.search-result-counts {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.search-count-pill {
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
background: var(--bg);
color: var(--text-muted);
border-radius: var(--r-full);
letter-spacing: 0.02em;
}
.search-count-pill.mine {
background: rgba(212, 168, 75, 0.12);
color: var(--accent);
border: 1px solid rgba(212, 168, 75, 0.3);
}
.search-result-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
align-items: center;
padding: 12px 16px;
border-top: 1px solid var(--border-soft);
cursor: pointer;
transition: background 0.1s;
}
.search-result-row:first-child { border-top: none; }
.search-result-row:hover {
background: var(--bg-elev-2);
}
.search-result-row.mine {
background: rgba(212, 168, 75, 0.05);
}
.search-result-row.mine:hover {
background: rgba(212, 168, 75, 0.12);
}
.search-result-league {
font-size: 14px;
font-weight: 600;
color: var(--text);
min-width: 0;
}
.search-result-subline {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
font-weight: 500;
}
.search-result-rank {
font-size: 12px;
color: var(--text-muted);
font-weight: 600;
}
.search-result-value {
font-size: 14px;
color: var(--accent);
font-weight: 700;
font-feature-settings: 'tnum' 1;
min-width: 50px;
text-align: right;
}
/* ===== Waiver Wire view ===== */
.ww-hot-strip {
background: linear-gradient(135deg, rgba(212, 168, 75, 0.08), rgba(212, 168, 75, 0.02));
border: 1px solid rgba(212, 168, 75, 0.25);
border-radius: var(--r-md);
padding: 14px 16px;
margin-bottom: 18px;
/* Size to content (5 chips) instead of stretching the full row width.
* Same fix used on .stat-strip. */
width: fit-content;
max-width: 100%;
}
.ww-hot-label {
font-size: 11px;
font-weight: 700;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.ww-hot-list {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 2px;
}
.ww-hot-list::-webkit-scrollbar { display: none; }
.ww-hot-chip {
flex: 0 0 auto;
min-width: 180px;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 10px 12px;
cursor: pointer;
transition: all 0.15s var(--ease);
}
.ww-hot-chip:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.ww-hot-name {
font-weight: 600;
font-size: 13px;
color: var(--text);
margin-bottom: 4px;
}
.ww-hot-meta {
font-size: 10px;
color: var(--text-muted);
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.ww-deemphasis {
margin: 0 0 16px;
font-size: 13px;
color: var(--text-dim);
line-height: 1.5;
}
.league-record {
color: var(--text-muted);
font-feature-settings: 'tnum' 1;
}
.ww-row {
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
margin-bottom: 12px;
overflow: hidden;
transition: border-color 0.2s;
}
.ww-row-highlight {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.2);
}
.ww-row-head {
padding: 14px 16px;
background: var(--bg-elev-2);
border-bottom: 1px solid var(--border-soft);
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
cursor: pointer;
transition: background 0.1s;
}
.ww-row-head:hover { background: var(--bg); }
.ww-row-avatar { flex: 0 0 auto; }
.ww-row-main {
min-width: 0;
flex: 1;
}
.ww-row-name {
font-family: 'Fraunces', serif;
font-size: 18px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.ww-row-meta {
font-size: 12px;
color: var(--text-muted);
margin-top: 3px;
font-weight: 500;
}
.ww-row-rationale {
font-size: 12px;
color: var(--text-muted);
margin-top: 5px;
line-height: 1.45;
font-weight: 500;
}
.ww-row-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 5px;
}
.ww-tag {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: var(--r-full);
border: 1px solid var(--border-soft);
color: var(--text-dim);
background: var(--bg);
}
.ww-tag-hot { color: #d27582; border-color: rgba(210, 117, 130, 0.4); background: rgba(194, 74, 90, 0.08); }
.ww-tag-trend { color: var(--success); border-color: rgba(74, 158, 110, 0.35); background: rgba(74, 158, 110, 0.08); }
.ww-tag-need { color: var(--accent); border-color: rgba(212, 168, 75, 0.35); background: rgba(212, 168, 75, 0.08); }
.ww-tag-scarce { color: #9b8ec4; border-color: rgba(155, 142, 196, 0.35); background: rgba(155, 142, 196, 0.08); }
.ww-row-rank {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--text-dim);
min-width: 22px;
text-align: center;
flex: 0 0 auto;
}
.ww-row-rank.top { color: var(--accent); }
.ww-row-stats {
display: flex;
align-items: center;
gap: 18px;
}
.ww-row-count {
text-align: center;
}
.ww-row-count strong {
display: block;
font-family: 'Inter', sans-serif;
font-size: 15px;
color: var(--accent);
font-weight: 700;
font-feature-settings: 'tnum' 1;
}
.ww-row-count span {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.ww-row-value {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--accent);
font-feature-settings: 'tnum' 1;
letter-spacing: -0.015em;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.ww-row-leagues {
padding: 0;
}
.ww-avail-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
align-items: center;
padding: 10px 16px;
border-top: 1px solid var(--border-soft);
cursor: pointer;
transition: background 0.1s;
}
.ww-avail-row:hover { background: var(--bg-elev-2); }
.ww-avail-row.mine { background: rgba(212, 168, 75, 0.06); }
.ww-avail-league {
font-size: 13px;
font-weight: 600;
color: var(--text);
min-width: 0;
}
.ww-avail-meta {
font-size: 11px;
color: var(--text-muted);
font-weight: 500;
}
.ww-avail-value {
font-size: 13px;
color: var(--text);
font-weight: 700;
font-feature-settings: 'tnum' 1;
min-width: 50px;
text-align: right;
}
.ww-avail-free .ww-avail-value { color: var(--accent); }
.ww-avail-rostered { opacity: 0.65; }
.ww-avail-rostered.mine { opacity: 0.9; }
.ww-avail-rostered:hover { opacity: 1; }
.ww-avail-tag {
display: inline-block;
padding: 1px 6px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
border-radius: 3px;
vertical-align: middle;
margin-left: 2px;
}
.ww-avail-tag.available {
background: rgba(127, 168, 120, 0.18);
color: #7fa878;
}
.ww-injury-tag {
display: inline-block;
padding: 2px 7px;
font-size: 10px;
font-weight: 700;
background: rgba(194, 74, 90, 0.18);
color: #c24a5a;
border-radius: var(--r-full);
letter-spacing: 0.02em;
}
.ww-trunc-note,
.ww-truncated-note {
padding: 16px;
text-align: center;
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}
@media (max-width: 600px) {
.ww-row-head { padding: 12px; }
.ww-row-stats { gap: 12px; }
.ww-row-value { font-size: 16px; }
.ww-avail-meta { font-size: 10px; }
}
.ma-filters {
display: flex;
gap: 6px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.ma-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
background: var(--bg-elev);
border: 1px solid var(--border-soft);
cursor: pointer;
border-radius: var(--r-full);
transition: all 0.15s var(--ease);
}
.ma-pill:hover { color: var(--text); border-color: var(--border-hover); }
.ma-pill.active {
color: var(--bg);
background: var(--accent);
border-color: var(--accent);
}
.ma-pill-count {
font-size: 11px;
opacity: 0.75;
font-weight: 500;
font-feature-settings: 'tnum' 1;
}
.ma-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.ma-row {
display: grid;
grid-template-columns: 40px 1fr 90px 2fr;
gap: 16px;
padding: 14px 18px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
align-items: center;
box-shadow: var(--shadow-sm);
transition: border-color 0.15s var(--ease);
}
.ma-row:hover { border-color: var(--border-hover); }
@media (max-width: 900px) {
.ma-row {
grid-template-columns: 40px 1fr;
gap: 10px;
}
}
.ma-main { min-width: 0; }
.ma-main-clickable {
cursor: pointer;
border-radius: var(--r-sm);
padding: 4px 6px;
margin: -4px -6px;
transition: background 0.1s;
}
.ma-main-clickable:hover { background: var(--bg-elev-2); }
.ma-name {
font-weight: 600;
font-size: 15px;
letter-spacing: -0.005em;
}
.ma-meta {
font-size: 12px;
color: var(--text-dim);
margin-top: 3px;
font-weight: 500;
}
.ma-exposure-count {
text-align: center;
padding: 6px 8px;
background: var(--bg);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
}
.ma-exposure-count strong {
display: block;
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 700;
color: var(--accent);
line-height: 1;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.02em;
}
.ma-exposure-denom {
font-size: 14px;
font-weight: 500;
color: var(--text-dim);
letter-spacing: 0;
}
.ma-exposure-count span {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
display: block;
margin-top: 3px;
}
.ma-exposures {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ma-exposure {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: 12px;
background: var(--bg);
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
max-width: 280px;
transition: all 0.15s var(--ease);
}
.ma-exposure.clickable {
cursor: pointer;
}
.ma-exposure.clickable:hover {
background: var(--bg-elev-2);
border-color: var(--accent);
transform: translateY(-1px);
}
.ma-exposure.clickable:hover .ma-exposure-league {
color: var(--text);
}
.ma-exposure-league {
color: var(--text-muted);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
.ma-exposure-val {
color: var(--accent);
font-weight: 700;
font-feature-settings: 'tnum' 1;
}
.ma-exposure-tag {
font-size: 9px;
background: var(--accent);
color: var(--bg);
padding: 1px 6px;
border-radius: var(--r-full);
font-weight: 700;
letter-spacing: 0.04em;
}
/* ===== League Leaderboards + Fleecerboard (inside Trade History) ===== */
.lb-panel, .fb-panel {
margin-bottom: 24px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.lb-panel-head, .fb-panel-head {
padding: 16px 20px;
border-bottom: 1px solid var(--border-soft);
background: var(--bg-elev-2);
}
.lb-panel-title, .fb-panel-title {
font-family: 'Fraunces', serif;
font-size: 20px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
}
.lb-panel-sub, .fb-panel-sub {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
font-weight: 500;
}
.lb-rows, .fb-rows {
display: flex;
flex-direction: column;
}
.lb-row {
display: grid;
grid-template-columns: 40px 1.8fr 1fr 1fr 1fr;
gap: 14px;
padding: 12px 20px;
border-top: 1px solid var(--border-soft);
align-items: center;
transition: background 0.1s;
}
.lb-row:first-child { border-top: none; }
.lb-row:hover { background: var(--bg-elev-2); }
.lb-row.mine {
background: linear-gradient(90deg, rgba(212, 168, 75, 0.1), transparent);
border-left: 3px solid var(--accent);
padding-left: 17px;
}
.lb-rank {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--text-dim);
text-align: center;
font-feature-settings: 'tnum' 1;
}
.lb-row.mine .lb-rank { color: var(--accent); }
.lb-team { min-width: 0; }
.lb-team-name {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lb-team-meta {
font-size: 11px;
color: var(--text-dim);
margin-top: 2px;
font-weight: 500;
}
.lb-stat {
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--text);
text-align: right;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.01em;
}
.lb-stat-label {
display: block;
font-size: 10px;
color: var(--text-dim);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-top: 2px;
}
.lb-gain-pos { color: var(--success, #7fa878); }
.lb-gain-neg { color: var(--danger, #c24a5a); }
.fb-row {
display: grid;
grid-template-columns: 40px 1fr;
gap: 14px;
padding: 14px 20px;
border-top: 1px solid var(--border-soft);
align-items: start;
transition: background 0.1s;
}
.fb-row:first-child { border-top: none; }
.fb-row:hover { background: var(--bg-elev-2); }
.fb-row.mine {
background: linear-gradient(90deg, rgba(212, 168, 75, 0.08), transparent);
border-left: 3px solid var(--accent);
padding-left: 17px;
}
.fb-rank {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--text-dim);
text-align: center;
font-feature-settings: 'tnum' 1;
padding-top: 2px;
}
.fb-body { min-width: 0; }
.fb-headline {
font-size: 14px;
letter-spacing: -0.005em;
margin-bottom: 6px;
line-height: 1.4;
}
.fb-winner { color: var(--success, #7fa878); }
.fb-loser { color: var(--danger, #c24a5a); }
.fb-advantage {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
font-size: 11px;
font-weight: 700;
background: rgba(212, 168, 75, 0.15);
color: var(--accent);
border: 1px solid rgba(212, 168, 75, 0.3);
border-radius: var(--r-full);
font-feature-settings: 'tnum' 1;
letter-spacing: 0.02em;
vertical-align: baseline;
}
.fb-detail {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}
.fb-gain, .fb-gave {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fb-gain::before { content: ''; }
.fb-val {
color: var(--accent);
font-weight: 700;
font-feature-settings: 'tnum' 1;
margin-left: 3px;
}
.lb-empty {
padding: 16px 20px;
font-size: 13px;
color: var(--text-dim);
text-align: center;
font-style: italic;
}
@media (max-width: 800px) {
.lb-row {
grid-template-columns: 32px 1fr 1fr;
gap: 10px;
}
.lb-row .lb-stat:nth-child(5) { display: none; }
.fb-detail { font-size: 11px; }
}
/* ===== Waiver Panel ===== */
.waiver-panel {
margin-top: 24px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.waiver-panel-head {
padding: 18px 20px;
border-bottom: 1px solid var(--border-soft);
background: var(--bg-elev-2);
}
.waiver-panel-title {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text);
}
.waiver-panel-sub {
font-size: 13px;
color: var(--text-muted);
margin-top: 4px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
.waiver-rows { padding: 4px 20px; }
.waiver-row {
display: grid;
grid-template-columns: 28px 1fr 80px;
gap: 14px;
padding: 12px 0;
border-top: 1px solid var(--border-soft);
align-items: center;
font-size: 14px;
}
.waiver-row:first-child { border-top: none; }
.waiver-row.top {
background: linear-gradient(90deg, rgba(212, 168, 75,0.06), transparent);
padding-left: 8px;
padding-right: 8px;
margin-left: -8px;
margin-right: -8px;
}
.waiver-rank {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--text-dim);
text-align: center;
font-weight: 600;
}
.waiver-row.top .waiver-rank { color: var(--accent); font-weight: 700; }
.waiver-main { min-width: 0; }
.waiver-name {
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
}
.waiver-meta {
font-size: 12px;
color: var(--text-dim);
margin-top: 3px;
font-weight: 500;
}
.waiver-rationale {
font-size: 12px;
color: var(--text-muted);
margin-top: 5px;
line-height: 1.45;
font-weight: 500;
}
.waiver-signal {
display: inline-block;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: var(--r-full);
margin-left: 6px;
vertical-align: middle;
}
.waiver-signal-hot { background: rgba(194, 74, 90, 0.15); color: #d27582; border: 1px solid rgba(210, 117, 130, 0.35); }
.waiver-signal-trend { background: rgba(74, 158, 110, 0.12); color: var(--success); border: 1px solid rgba(74, 158, 110, 0.3); }
.waiver-value {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--accent);
text-align: right;
font-feature-settings: 'tnum' 1;
}
.waiver-badge {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 10px;
background: var(--accent);
color: var(--bg);
padding: 2px 8px;
margin-left: 8px;
letter-spacing: 0.02em;
vertical-align: middle;
font-weight: 700;
border-radius: var(--r-full);
}
.waiver-ir-tag {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 10px;
background: var(--danger);
color: var(--bg);
padding: 2px 8px;
margin-left: 6px;
letter-spacing: 0.02em;
vertical-align: middle;
font-weight: 700;
border-radius: var(--r-full);
}
/* ===== Trade Suggestions Panel ===== */
.suggest-panel {
margin-top: 24px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.suggest-panel-head {
padding: 18px 20px;
border-bottom: 1px solid var(--border-soft);
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 500;
color: var(--text);
letter-spacing: -0.015em;
background: var(--bg-elev-2);
}
.suggest-panel-head strong {
color: var(--accent);
font-weight: 500;
font-style: italic;
}
.suggest-source-note {
display: block;
font-family: 'Roboto Mono', monospace;
font-size: 10px;
font-weight: 400;
color: var(--text-dim);
margin-top: 6px;
font-style: normal;
}
.suggest-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--border-soft);
}
@media (max-width: 900px) {
.suggest-grid { grid-template-columns: 1fr; }
}
.suggest-col {
padding: 20px;
background: var(--bg-elev);
}
.suggest-col-head {
padding-bottom: 12px;
border-bottom: 1px solid var(--border-soft);
margin-bottom: 10px;
}
.suggest-col-label {
display: block;
font-family: 'Fraunces', serif;
font-size: 16px;
font-weight: 500;
letter-spacing: -0.01em;
margin-bottom: 3px;
}
.suggest-col-hint {
display: block;
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}
.suggest-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 14px;
padding: 12px 0;
border-top: 1px solid var(--border-soft);
}
.suggest-item:first-of-type { border-top: none; }
.suggest-clickable {
cursor: pointer;
margin: 0 -10px;
padding-left: 10px;
padding-right: 10px;
border-radius: var(--r-sm);
transition: background 0.1s;
}
.suggest-clickable:hover { background: var(--bg-elev-2); }
.suggest-clickable:hover .suggest-player-name { color: var(--accent); }
.suggest-item-main {
min-width: 0;
}
.suggest-player-name {
font-weight: 600;
font-size: 14px;
display: block;
letter-spacing: -0.005em;
}
.suggest-pick-tag {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 10px;
background: var(--pick);
color: var(--bg);
padding: 2px 8px;
margin-left: 6px;
letter-spacing: 0.02em;
vertical-align: middle;
font-weight: 700;
border-radius: var(--r-full);
}
.suggest-player-meta {
font-size: 12px;
color: var(--text-dim);
display: block;
margin-top: 3px;
font-weight: 500;
}
.suggest-item-value {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--accent);
white-space: nowrap;
font-feature-settings: 'tnum' 1;
}
.suggest-item-reason {
grid-column: 1 / -1;
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
padding-top: 2px;
}
.suggest-implied-hint {
margin-top: 6px;
font-size: 12px;
color: var(--accent);
opacity: 0.9;
}
.suggest-empty {
padding: 16px 0 4px;
font-size: 13px;
color: var(--text-dim);
line-height: 1.55;
}
.suggest-empty strong { color: var(--text-muted); font-weight: 600; }
/* Proposed Trades section (below the two suggestion columns) */
.proposals-section {
border-top: 1px solid var(--border-soft);
padding: 20px;
background: var(--bg);
}
.proposals-head {
margin-bottom: 14px;
}
.proposals-label {
display: block;
font-family: 'Fraunces', serif;
font-size: 20px;
font-weight: 500;
letter-spacing: -0.015em;
}
.proposals-hint {
display: block;
font-size: 13px;
color: var(--text-muted);
margin-top: 4px;
font-weight: 500;
}
.proposal-card {
border: 1px solid var(--border-soft);
background: var(--bg-elev);
padding: 16px 18px;
margin-bottom: 12px;
border-radius: var(--r-lg);
transition: all 0.15s var(--ease);
box-shadow: var(--shadow-sm);
}
.proposal-card:hover { border-color: var(--border-hover); }
.proposal-card:last-child { margin-bottom: 0; }
.proposal-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 14px;
gap: 12px;
}
.proposal-partner {
font-size: 14px;
color: var(--text-muted);
font-weight: 500;
}
.proposal-partner strong {
color: var(--text);
font-weight: 600;
letter-spacing: -0.005em;
}
.proposal-partner-arch {
font-size: 12px;
color: var(--text-dim);
margin-top: 4px;
font-weight: 500;
}
.proposal-badge {
font-family: 'Inter', sans-serif;
font-size: 11px;
padding: 4px 10px;
border: 1px solid;
letter-spacing: 0.02em;
white-space: nowrap;
align-self: flex-start;
font-weight: 700;
border-radius: var(--r-full);
}
.proposal-badge.fair { color: var(--accent); border-color: rgba(212, 168, 75, 0.4); background: rgba(212, 168, 75, 0.1); }
.proposal-badge.favors-them { color: var(--warn); border-color: rgba(212, 140, 74, 0.4); background: rgba(212, 140, 74, 0.08); }
.proposal-badge.favors-me { color: var(--rb); border-color: rgba(127, 168, 120, 0.4); background: rgba(127, 168, 120, 0.08); }
.proposal-sides {
display: grid;
grid-template-columns: 1fr 30px 1fr;
gap: 14px;
align-items: stretch;
}
@media (max-width: 700px) {
.proposal-sides { grid-template-columns: 1fr; }
.proposal-arrow { display: none; }
}
.proposal-side {
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
}
.proposal-side-label {
font-size: 11px;
color: var(--text-dim);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 10px;
font-weight: 600;
}
.proposal-asset {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 5px 0;
font-size: 13px;
gap: 8px;
}
.proposal-asset-clickable {
cursor: pointer;
margin: 0 -8px;
padding-left: 8px;
padding-right: 8px;
border-radius: var(--r-sm);
transition: background 0.1s;
}
.proposal-asset-clickable:hover { background: var(--bg-elev-2); }
.proposal-asset-clickable:hover .proposal-asset-name { color: var(--accent); }
.proposal-asset-name { font-weight: 600; letter-spacing: -0.005em; }
.proposal-asset-meta {
font-size: 11px;
color: var(--text-dim);
font-weight: 500;
margin-left: 4px;
}
.proposal-asset-value {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--accent);
font-weight: 700;
white-space: nowrap;
font-feature-settings: 'tnum' 1;
}
.proposal-side-total {
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid var(--border-soft);
font-size: 12px;
color: var(--text-muted);
font-weight: 600;
}
.proposal-side-total strong {
color: var(--text);
font-weight: 700;
font-feature-settings: 'tnum' 1;
}
.proposal-eff {
color: var(--text-dim);
font-size: 11px;
margin-left: 4px;
font-weight: 500;
}
.proposal-arrow {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
font-size: 20px;
}
.proposal-why {
margin-top: 12px;
padding: 10px 14px;
background: var(--bg);
border-left: 3px solid var(--accent);
font-size: 13px;
color: var(--text-muted);
line-height: 1.55;
border-radius: 0 var(--r-md) var(--r-md) 0;
}
.proposal-actions {
margin-top: 12px;
display: flex;
justify-content: flex-end;
}
/* Trade index trust strip (landing + in-app) */
.trade-index-strip,
.trade-index-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
margin-top: 14px;
padding: 10px 14px;
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
background: var(--bg-elev);
font-size: 12px;
color: var(--text-dim);
}
.trade-index-banner { margin: 0 0 16px; }
.trade-index-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ok);
flex-shrink: 0;
}
.trade-index-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
font-weight: 600;
}
.trade-index-value { color: var(--text); font-weight: 600; }
.trade-index-cadence { color: var(--text-muted); font-size: 11px; }
/* Playoff odds in league rankings */
.pr-playoff {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 999px;
border: 1px solid var(--border-soft);
}
.pr-playoff-in { color: var(--ok); border-color: rgba(151, 200, 144, 0.35); }
.pr-playoff-bubble { color: var(--warn); border-color: rgba(212, 140, 74, 0.35); }
.pr-playoff-out { color: var(--text-muted); }
/* Start / sit panel */
.start-sit-panel { margin-bottom: 16px; }
.start-sit-row {
display: grid;
grid-template-columns: 52px 1fr auto;
gap: 8px 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border-soft);
align-items: center;
}
.start-sit-slot {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
}
.start-sit-swap { font-size: 13px; }
.start-sit-sit { color: var(--text-muted); text-decoration: line-through; }
.start-sit-arrow { color: var(--accent); margin: 0 6px; }
.start-sit-start { font-weight: 600; }
.start-sit-delta {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--ok);
font-weight: 700;
}
.start-sit-reason {
grid-column: 2 / -1;
font-size: 11px;
color: var(--text-muted);
}
.start-sit-bench-block {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--border-soft);
}
.start-sit-bench-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin-bottom: 8px;
}
.start-sit-bench {
display: flex;
justify-content: space-between;
font-size: 12px;
padding: 4px 0;
}
.start-sit-bench-val { color: var(--accent); font-weight: 600; }
/* Redzone trade ticker */
.redzone-trades {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
}
.redzone-trades-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin-bottom: 8px;
}
.redzone-trade-row {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: none;
padding: 8px 0;
cursor: pointer;
border-bottom: 1px solid var(--border-soft);
}
.redzone-trade-row:hover .redzone-trade-league { color: var(--accent); }
.redzone-trade-league { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.redzone-trade-summary { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* Player drawer trade search */
.drawer-trade-head {
font-size: 11px;
color: var(--text-muted);
margin: 10px 0 6px;
}
.drawer-trade-row {
padding: 8px 0;
border-bottom: 1px solid var(--border-soft);
}
.drawer-trade-league { font-size: 12px; font-weight: 600; }
.drawer-trade-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.drawer-trade-empty { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
/* Assets 2.0 exposure bars */
.ma-exposure-bars {
display: grid;
gap: 6px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
}
.ma-exposure-bar {
display: grid;
grid-template-columns: 28px 1fr 36px;
gap: 8px;
align-items: center;
font-size: 11px;
}
.ma-exposure-bar-label { color: var(--text-muted); font-weight: 600; }
.ma-exposure-bar-track {
height: 6px;
background: var(--bg);
border-radius: 999px;
overflow: hidden;
}
.ma-exposure-bar-fill {
height: 100%;
background: var(--accent);
border-radius: 999px;
opacity: 0.85;
}
.ma-exposure-bar-pct {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-dim);
text-align: right;
}
.stat-strip-num.warn { color: var(--warn); }
/* ============================================================
SITE SHELL v2 — FantasyPros-style web chrome (TACO flavor)
============================================================ */
:root {
--bg-chrome: #0c0610;
--bg-page: #14101c;
--site-max: 1320px;
--header-h: 64px;
}
body {
background: var(--bg-chrome);
}
body.page-app {
background: linear-gradient(180deg, var(--bg-chrome) 0%, #0e0814 120px, var(--bg-page) 280px);
}
/* Header — full-width bar, contained inner */
.site-header.masthead {
padding: 0;
display: block;
background: var(--bg-chrome);
border-bottom: 1px solid rgba(212, 168, 75, 0.14);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}
.site-header-inner {
max-width: var(--site-max);
margin: 0 auto;
padding: 10px clamp(16px, 3vw, 40px);
min-height: var(--header-h);
display: flex;
align-items: center;
gap: 16px;
flex-wrap: nowrap;
}
.site-logo {
text-decoration: none;
color: inherit;
flex-shrink: 0;
min-width: 0;
}
.site-logo .brand-subtitle { display: none; }
.site-logo .brand-mark-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: min(420px, 46vw);
}
.site-logo .brand-mark {
line-height: 1.15;
}
.site-header-end {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
margin-left: auto;
}
/* Marketing nav — pill links, centered in remaining space */
.site-nav-marketing {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex: 1 1 auto;
min-width: 0;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.site-nav-marketing::-webkit-scrollbar { display: none; }
.site-nav-marketing[hidden] { display: none !important; }
.chrome-app .site-nav-marketing { display: none !important; }
.site-nav-link {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
text-decoration: none;
padding: 9px 16px;
border-radius: var(--r-full);
border: 1px solid transparent;
background: transparent;
cursor: pointer;
transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
white-space: nowrap;
letter-spacing: -0.01em;
}
.site-nav-link:hover {
color: var(--text);
background: var(--bg-lift);
border-color: var(--border-soft);
}
.site-nav-link.is-active {
color: var(--text);
background: linear-gradient(180deg, rgba(212, 168, 75, 0.22) 0%, rgba(212, 168, 75, 0.08) 100%);
border-color: rgba(212, 168, 75, 0.38);
box-shadow: 0 2px 14px rgba(212, 168, 75, 0.12);
}
.site-nav-link-btn { font: inherit; }
.site-header-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 1;
min-width: 0;
}
.chrome-marketing .site-header-actions {
display: none;
}
body.page-app .site-header-actions {
display: flex;
}
.site-status-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-muted);
padding: 6px 10px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-soft);
}
.site-status-chip {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#statusText {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.site-cta.pill-cta {
appearance: none;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
padding: 11px 22px;
border-radius: var(--r-full);
border: 1px solid rgba(168, 132, 47, 0.9);
background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--accent-deep) 100%);
color: #120a18;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
box-shadow: var(--glow), 0 2px 0 rgba(255, 255, 255, 0.15) inset;
transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.12s var(--ease), box-shadow 0.15s var(--ease);
flex-shrink: 0;
}
.site-cta.pill-cta:hover {
background: linear-gradient(135deg, #e8c978 0%, var(--accent-soft) 50%, var(--accent) 100%);
border-color: var(--accent-soft);
transform: translateY(-1px);
box-shadow: 0 8px 28px rgba(212, 168, 75, 0.4), 0 2px 0 rgba(255, 255, 255, 0.2) inset;
}
.site-menu-btn {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 8px;
border: 1px solid var(--border-soft);
border-radius: 8px;
background: transparent;
cursor: pointer;
}
.site-menu-btn span {
display: block;
height: 2px;
background: var(--text);
border-radius: 1px;
}
.site-mobile-drawer {
position: fixed;
top: var(--header-h);
left: 0;
right: 0;
z-index: 99;
background: var(--bg-chrome);
border-bottom: 1px solid var(--border-soft);
padding: 12px 20px 20px;
display: flex;
flex-direction: column;
gap: 4px;
box-shadow: var(--shadow-lg);
}
.site-mobile-drawer[hidden] { display: none !important; }
.site-drawer-link {
font-size: 15px;
font-weight: 600;
color: var(--text);
text-decoration: none;
padding: 12px 8px;
border: none;
background: transparent;
text-align: left;
cursor: pointer;
border-bottom: 1px solid var(--border-soft);
}
.site-drawer-cta {
margin-top: 12px;
padding: 14px;
font-weight: 700;
background: var(--accent);
color: var(--bg-chrome);
border: none;
border-radius: 8px;
cursor: pointer;
}
@media (max-width: 900px) {
.site-header-inner {
padding: 8px 14px;
gap: 10px;
}
.site-nav-marketing { display: none !important; }
.site-logo .brand-mark-text { max-width: min(240px, 44vw); }
.site-logo .brand-mark { font-size: 20px; line-height: 1.15; }
.site-logo .brand-mark-icon { width: 26px; height: 26px; }
.site-menu-btn { display: flex; }
.site-header-end { gap: 8px; }
.site-header-actions { gap: 6px; }
.site-cta.pill-cta {
font-size: 12px;
padding: 9px 14px;
}
.site-status-chip { display: none; }
.user-badge { max-width: 120px; }
.user-badge-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 72px;
}
}
@media (max-width: 600px) {
.site-header.masthead { flex-direction: row; }
.site-logo .brand-mark-front { display: none; }
.site-logo .brand-mark-text { max-width: none; }
}
/* App quick nav — horizontal pill tabs (mobile / narrow) */
.app-quick-nav.sub-nav {
align-items: center;
gap: 8px;
flex-wrap: nowrap;
padding: 10px clamp(16px, 3vw, 24px) 14px;
margin: 0;
background: var(--bg-elev);
border-bottom: 1px solid var(--border-soft);
box-shadow: inset 0 1px 0 var(--surface-top);
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.app-quick-nav.sub-nav::-webkit-scrollbar { display: none; }
.app-quick-nav .nav-tab {
text-decoration: none;
color: var(--text-muted);
}
.app-quick-nav .nav-tab.active {
color: var(--text);
}
/* Page frame — contained content like a real site */
.page-frame {
max-width: var(--site-max);
margin: 0 auto;
padding: 0 clamp(16px, 3vw, 40px) 48px;
}
.page-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
padding: 16px 0 8px;
font-size: 13px;
color: var(--text-muted);
}
.bc-link {
background: none;
border: none;
padding: 0;
font: inherit;
color: var(--text-dim);
cursor: pointer;
text-decoration: none;
}
.bc-link:hover { color: var(--accent); text-decoration: underline; }
.bc-sep { color: var(--text-dim); margin: 0 6px; opacity: 0.6; }
.bc-current { color: var(--text); font-weight: 600; }
body.page-app .page-body {
background: var(--bg-page);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
body.page-app .view {
padding: 32px clamp(20px, 3vw, 36px) 40px;
}
body.page-app .overview-title {
font-size: 32px;
font-weight: 600;
}
/* Landing stats ribbon */
.landing-stats-ribbon {
background: var(--bg-chrome);
border-bottom: 1px solid var(--border-soft);
border-top: 1px solid var(--border-soft);
}
.landing-stats-inner {
max-width: var(--site-max);
margin: 0 auto;
padding: 20px clamp(16px, 3vw, 40px);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
text-align: center;
}
@media (max-width: 700px) {
.landing-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.landing-stat-num {
display: block;
font-family: 'Fraunces', serif;
font-size: 28px;
font-weight: 600;
color: var(--accent);
line-height: 1.1;
}
.landing-stat-label {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-top: 4px;
font-weight: 600;
}
/* Tools showcase grid */
.landing-tools {
padding: 56px clamp(16px, 3vw, 40px) 64px;
background: var(--bg-page);
border-bottom: 1px solid var(--border-soft);
}
.landing-tools-inner {
max-width: var(--site-max);
margin: 0 auto;
}
.landing-tools-title {
font-family: 'Fraunces', serif;
font-size: clamp(32px, 4vw, 44px);
font-weight: 600;
letter-spacing: -0.03em;
margin: 0 0 12px;
}
.landing-tools-title em { font-style: italic; color: var(--accent); }
.landing-tools-lede {
font-size: 16px;
color: var(--text-muted);
max-width: 640px;
margin: 0 0 32px;
line-height: 1.6;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 960px) {
.tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.tools-grid { grid-template-columns: 1fr; }
}
.tool-card {
appearance: none;
text-align: left;
width: 100%;
padding: 22px 22px 20px;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
cursor: pointer;
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
font-family: inherit;
color: inherit;
}
.tool-card:hover {
border-color: rgba(212, 168, 75, 0.45);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.tool-card-kicker {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
}
.tool-card-title {
font-family: 'Fraunces', serif;
font-size: 20px;
font-weight: 600;
margin: 8px 0 8px;
color: var(--text);
}
.tool-card-desc {
font-size: 13px;
line-height: 1.55;
color: var(--text-muted);
margin: 0 0 14px;
}
.tool-card-link {
font-size: 12px;
font-weight: 600;
color: var(--accent);
}
/* League subtabs — match site underline pattern */
.team-tabs {
gap: 0 !important;
border-bottom: 2px solid var(--border-soft) !important;
padding-bottom: 0 !important;
}
.team-tab {
border-radius: 0 !important;
border-bottom: 3px solid transparent !important;
margin-bottom: -2px !important;
background: transparent !important;
padding: 12px 16px !important;
}
.team-tab.active {
border-bottom-color: var(--accent) !important;
color: var(--accent) !important;
background: transparent !important;
box-shadow: none !important;
}
.mode-bar { display: none !important; }
/* Player drawer cross-league exposure */
.drawer-exposure-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
padding: 0 20px 12px;
}
.drawer-exposure-pill {
font-size: 11px;
font-weight: 600;
color: var(--text-dim);
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--border-soft);
background: var(--bg-elev);
}
.drawer-exposure-risk {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--warn);
}
/* App shell spacing */
.app-shell.active {
padding: 24px 0 0;
}
/* App layout — sidebar panel + main column */
.app-layout {
display: grid;
grid-template-columns: 252px minmax(0, 1fr);
gap: 28px;
max-width: var(--site-max);
margin: 0 auto;
padding: 0 clamp(20px, 3vw, 40px) 40px;
align-items: start;
}
.app-main {
min-width: 0;
}
.tools-sidebar {
position: sticky;
top: calc(var(--header-h) + 20px);
align-self: start;
padding: 18px 14px 20px;
/* anchor league picker popover */
isolation: isolate;
background: var(--bg-elev);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
max-height: calc(100vh - var(--header-h) - 40px);
overflow-y: auto;
}
.tools-sidebar-head {
padding: 0 6px 14px;
border-bottom: 1px solid var(--border-soft);
margin-bottom: 6px;
}
.tools-sidebar-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
.tools-sidebar-group {
padding: 10px 0 6px;
}
.tools-sidebar-group + .tools-sidebar-group {
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.tools-sidebar-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim);
padding: 0 8px 10px;
}
.tools-sidebar-league-row {
display: flex;
align-items: center;
gap: 6px;
padding: 0 4px 10px 4px;
}
.tools-sidebar-league-name {
flex: 1;
font-size: 12px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 8px 12px;
background: var(--bg-lift);
border: 1px solid var(--border-soft);
border-radius: var(--r-full);
}
.tools-sidebar-league-switch {
appearance: none;
border: 1px solid var(--border-soft);
background: var(--bg-lift);
color: var(--text-muted);
border-radius: var(--r-full);
width: 32px;
height: 32px;
cursor: pointer;
font-size: 12px;
line-height: 1;
flex-shrink: 0;
transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.tools-sidebar-league-switch:hover {
color: var(--accent);
border-color: rgba(212, 168, 75, 0.35);
background: rgba(212, 168, 75, 0.08);
}
.tools-sidebar-link {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
text-decoration: none;
padding: 9px 14px;
margin: 2px 0;
border-radius: var(--r-full);
border: 1px solid transparent;
transition: color 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.tools-sidebar-link:hover {
color: var(--text);
background: var(--bg-lift);
border-color: var(--border-soft);
}
.tools-sidebar-link.active {
color: var(--text);
background: linear-gradient(180deg, rgba(212, 168, 75, 0.22) 0%, rgba(212, 168, 75, 0.08) 100%);
border-color: rgba(212, 168, 75, 0.38);
box-shadow: 0 2px 14px rgba(212, 168, 75, 0.12);
}
a.tool-card {
text-decoration: none;
color: inherit;
}
a.back-to-landing {
text-decoration: none;
color: var(--text-muted);
}
a.site-drawer-cta {
text-decoration: none;
display: block;
text-align: center;
border-radius: var(--r-full);
background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--accent-deep) 100%);
border: 1px solid rgba(168, 132, 47, 0.9);
box-shadow: var(--glow);
}
.mobile-nav-tab {
text-decoration: none;
color: inherit;
}
body.page-app .page-frame {
padding: 0;
max-width: none;
margin: 0;
}
body.page-app .page-breadcrumb {
padding: 0 0 12px;
}
body.page-app .page-body {
margin-top: 0;
}
body.page-app .view {
padding: 28px clamp(22px, 2.5vw, 32px) 36px;
}
@media (max-width: 960px) {
.app-shell.active { padding-top: 12px; }
.app-layout {
grid-template-columns: 1fr;
gap: 0;
padding: 0;
}
.tools-sidebar { display: none; }
.app-quick-nav.sub-nav {
padding: 0 clamp(12px, 3vw, 20px) 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.app-quick-nav.sub-nav::-webkit-scrollbar { display: none; }
.app-main .page-frame {
padding: 0 clamp(12px, 3vw, 20px) calc(80px + env(safe-area-inset-bottom, 0px));
}
body.page-app .view {
padding: 20px 0 100px;
}
.overview-head {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
/* One workspace nav: sidebar (desktop) or bottom bar (mobile) — never both quick-nav + bottom */
body:not(.page-app) .app-quick-nav.sub-nav,
body:not(.page-app) .mobile-bottom-nav {
display: none !important;
}
.app-quick-nav.sub-nav {
display: none !important;
}
@media (max-width: 960px) {
body.page-app .mobile-bottom-nav {
display: flex;
}
}
/* Desktop: per-league navigation lives in the left sidebar, so the inline team-tab
bar is redundant — hide it above the sidebar breakpoint. It returns at <=960px,
where the sidebar is hidden and the inline tabs are the only league nav. */
@media (min-width: 961px) {
.team-tabs { display: none !important; }
}
/* ============================================================
Mobile experience v2 - June 2026
One coordinated mobile pass: restores the side gutter that
page-frame zeroing clobbered, compacts the chrome, docks the
in-league tab strip under the masthead, upgrades the bottom
nav to five destinations, and enforces tap-friendly sizing.
Scoped to the app shell; the landing keeps its own system.
============================================================ */
@media (max-width: 960px) {
/* --- Horizontal rhythm ---------------------------------------
body.page-app .page-frame { padding: 0 } (specificity 0,2,1)
was beating the gutter rule .app-main .page-frame (0,2,0),
so app views ran edge-to-edge. Match the specificity and
restore one consistent gutter for every view. */
body.page-app .app-main .page-frame {
padding: 0 clamp(14px, 4vw, 20px) calc(84px + env(safe-area-inset-bottom, 0px));
}
body.page-app .view {
padding: 14px 0 calc(96px + env(safe-area-inset-bottom, 0px));
}
/* Breadcrumb row is redundant chrome on phones: the bottom nav
carries global context and every league view has a back link. */
body.page-app .page-breadcrumb { display: none; }
/* --- Compact masthead ---------------------------------------- */
.site-header-inner {
padding: 8px 14px;
padding-top: max(8px, env(safe-area-inset-top, 0px));
gap: 10px;
}
.masthead .status-sync-time { display: none; }
.site-status-chip { display: none; }
/* --- In-league tab strip: docked, scrollable, thumb-sized ----
Sticks just below the masthead while you read a long tab,
scrolls horizontally with snap stops and no scrollbar. */
body.page-app .team-tabs {
position: sticky;
top: 0;
z-index: 60;
margin: 0 calc(-1 * clamp(14px, 4vw, 20px)) 18px;
padding: 8px clamp(14px, 4vw, 20px) 0 !important;
background: linear-gradient(180deg, rgba(18, 10, 24, 0.97) 0%, rgba(18, 10, 24, 0.92) 100%);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
scroll-snap-type: x proximity;
scroll-padding-left: clamp(14px, 4vw, 20px);
}
body.page-app .team-tab {
flex: 0 0 auto;
scroll-snap-align: start;
min-height: 44px;
display: inline-flex;
align-items: center;
font-size: 13px;
}
/* --- Team header: tighter identity, full-width controls ------ */
.team-title { font-size: 30px; }
.team-head { padding-bottom: 18px; margin-bottom: 18px; }
.team-head-identity { gap: 12px; }
.team-head-identity img { width: 44px; height: 44px; }
.team-actions { width: 100%; }
.team-actions .league-switcher { flex: 1 1 auto; min-width: 0; min-height: 42px; }
.team-actions .ghost.small { min-height: 42px; min-width: 44px; }
/* --- Overview: heading + sort controls breathe --------------- */
.overview-head { margin-bottom: 18px; }
.overview-sub { font-size: 13px; }
.overview-controls { gap: 10px; }
.overview-select { min-height: 42px; }
/* --- Stat strips: two clean columns instead of a squeeze ----- */
.stat-strip { gap: 14px 18px; }
.stat-strip .stat-label { white-space: nowrap; }
/* --- Generic tap targets in app views ------------------------ */
body.page-app .view button,
body.page-app .view select {
min-height: 38px;
}
body.page-app .view input[type="text"],
body.page-app .view input[type="search"] {
min-height: 42px;
font-size: 16px; /* prevents iOS zoom-on-focus */
}
}
/* --- Bottom nav v2: five destinations, indicator, safe area ---- */
.mobile-bottom-nav {
padding-bottom: env(safe-area-inset-bottom, 0px);
-webkit-backdrop-filter: saturate(140%) blur(18px);
backdrop-filter: saturate(140%) blur(18px);
box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.4);
}
.mobile-nav-tab {
gap: 3px;
min-height: 54px;
position: relative;
transition: color 0.15s var(--ease);
}
.mobile-nav-tab.active {
background: transparent;
}
.mobile-nav-tab.active::before {
content: '';
position: absolute;
top: 0;
left: 22%;
right: 22%;
height: 2px;
border-radius: var(--r-full);
background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.mobile-nav-icon { font-size: 18px; }
.mobile-nav-label { font-size: 9.5px; letter-spacing: 0.04em; }
/* In-app mobile masthead: the marketing CTA and hamburger have no job
once you are inside the app - the bottom nav owns navigation. */
@media (max-width: 960px) {
body.page-app #siteEnterCta,
body.page-app .site-menu-btn { display: none; }
}
/* .page-body { overflow: hidden } creates a scroll container that defeats
position: sticky on the docked tab strip. clip gives the same visual
containment without becoming a scroller, so sticky tracks the body. */
@media (max-width: 960px) {
body.page-app .page-body { overflow: clip; }
}
/* One sticky element per edge on phones: the masthead scrolls away with
the page (bottom nav owns navigation in-app), so the docked league tab
strip gets the top edge instead of hiding behind the masthead. */
@media (max-width: 960px) {
body.page-app .masthead { position: static; }
}
/* Long single-word team names (e.g. HeadyWorld) cannot wrap, so they
overflowed the squeezed identity box and ran under the header actions
at narrow desktop widths. Let them break instead of overlap. */
.team-head-identity > div { min-width: 0; }
.team-title { overflow-wrap: anywhere; }