/* ==========================================================================
   DynastyRoster design system
   Principles: content first · one primary action per view · progressive disclosure
   · consistent grid (4pt) · semantic color · motion that explains, never decorates.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Type: system faces so the UI feels native on every platform; scale is a ~1.2 ratio */
  --font: "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  --font-display: "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --t-xs: .75rem; --t-sm: .8125rem; --t-base: .9375rem; --t-md: 1.0625rem; --t-lg: 1.375rem; --t-xl: 1.875rem; --t-2xl: 2.75rem;

  /* Space: 4pt grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  /* Shape + depth */
  --r1: 8px; --r2: 12px; --r3: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .06), 0 1px 1px rgb(0 0 0 / .04);
  --shadow-2: 0 8px 24px rgb(0 0 0 / .12), 0 2px 6px rgb(0 0 0 / .08);
  --shadow-3: 0 24px 64px rgb(0 0 0 / .28), 0 4px 12px rgb(0 0 0 / .12);

  /* Motion */
  --ease: cubic-bezier(.2, 0, 0, 1); --ease-spring: cubic-bezier(.3, 1.2, .4, 1);
  --d1: 120ms; --d2: 220ms; --d3: 360ms;

  /* Light theme (semantic roles, not raw colors) */
  --bg: #f6f6f3; --surface: #ffffff; --surface-2: #f1f1ed; --surface-3: #e9e9e4;
  --line: rgb(20 22 28 / .09); --line-strong: rgb(20 22 28 / .16);
  --text: #15171c; --text-2: #4a505b; --text-3: #666c77;
  --accent: #2b50d8; --accent-ink: #ffffff; --accent-weak: rgb(43 80 216 / .09); --accent-text: #2043c4;
  --pos: #0e7a55; --pos-weak: rgb(14 122 85 / .1); --neg: #c4382a; --neg-weak: rgb(196 56 42 / .1); --warn: #9a6200; --warn-weak: rgb(154 98 0 / .11);
  /* Position hues: validated as a categorical set (CVD ΔE ≥ 15, ≥ 3:1 on surface); always shown with a text label */
  --p-qb: #81315c; --p-rb: #0a9aa1; --p-wr: #0e74dc; --p-te: #c15d11; --p-k: #6a55b8; --p-pick: #5d6472;
  --neutral: #a3a8b1; --grid: rgb(20 22 28 / .07);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0c0d10; --surface: #15171c; --surface-2: #1b1e24; --surface-3: #242830;
  --line: rgb(255 255 255 / .08); --line-strong: rgb(255 255 255 / .15); --text: #f2f3f5; --text-2: #b0b6c1; --text-3: #8e95a2;
  --accent: #7b97ff; --accent-ink: #0b1230; --accent-weak: rgb(123 151 255 / .14); --accent-text: #9db1ff;
  --pos: #49d49c; --pos-weak: rgb(73 212 156 / .13); --neg: #ff7f6e; --neg-weak: rgb(255 127 110 / .13); --warn: #f2b84a; --warn-weak: rgb(242 184 74 / .13);
  --p-qb: #c73751; --p-rb: #0baa92; --p-wr: #297ab6; --p-te: #d67523; --p-k: #9b82e8; --p-pick: #8e96a6;
  --neutral: #5d6470; --grid: rgb(255 255 255 / .06);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4); --shadow-2: 0 10px 30px rgb(0 0 0 / .5); --shadow-3: 0 30px 80px rgb(0 0 0 / .65); color-scheme: dark; } }
:root[data-theme="dark"] { --bg: #0c0d10; --surface: #15171c; --surface-2: #1b1e24; --surface-3: #242830;
  --line: rgb(255 255 255 / .08); --line-strong: rgb(255 255 255 / .15); --text: #f2f3f5; --text-2: #b0b6c1; --text-3: #8e95a2;
  --accent: #7b97ff; --accent-ink: #0b1230; --accent-weak: rgb(123 151 255 / .14); --accent-text: #9db1ff;
  --pos: #49d49c; --pos-weak: rgb(73 212 156 / .13); --neg: #ff7f6e; --neg-weak: rgb(255 127 110 / .13); --warn: #f2b84a; --warn-weak: rgb(242 184 74 / .13);
  --p-qb: #c73751; --p-rb: #0baa92; --p-wr: #297ab6; --p-te: #d67523; --p-k: #9b82e8; --p-pick: #8e96a6;
  --neutral: #5d6470; --grid: rgb(255 255 255 / .06);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4); --shadow-2: 0 10px 30px rgb(0 0 0 / .5); --shadow-3: 0 30px 80px rgb(0 0 0 / .65); color-scheme: dark; }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--t-base)/1.5 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, ul { margin: 0; } ul { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-weak); }
.num, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: -64px; background: var(--accent); color: var(--accent-ink); padding: var(--s2) var(--s4); border-radius: var(--r1); z-index: 100; transition: top var(--d2) var(--ease); } .skip:focus { top: var(--s2); }

/* ---------- Type roles ---------- */
.t-title { font: 700 var(--t-2xl)/1.05 var(--font-display); letter-spacing: -.03em; }
.t-h1 { font: 700 var(--t-xl)/1.15 var(--font-display); letter-spacing: -.02em; }
.t-h2 { font: 650 var(--t-lg)/1.25 var(--font-display); letter-spacing: -.015em; }
.t-h3 { font: 600 var(--t-md)/1.3 var(--font); letter-spacing: -.005em; }
.t-label { font: 600 var(--t-xs)/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.t-sm { font-size: var(--t-sm); } .t-xs { font-size: var(--t-xs); }
.muted { color: var(--text-3); } .sub { color: var(--text-2); }
.pos { color: var(--pos); } .neg { color: var(--neg); } .warn { color: var(--warn); } .accent { color: var(--accent-text); }

/* ---------- App frame ---------- */
.bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s6); height: 60px; padding: 0 max(var(--s6), calc((100vw - 1180px) / 2)); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.6) blur(20px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: var(--s2); font: 700 var(--t-md)/1 var(--font-display); letter-spacing: -.01em; flex: none; }
.brand-mark { width: 24px; height: 24px; border-radius: 7px; background: var(--text); position: relative; } .brand-mark::after { content: "D"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--bg); font: 700 16px/1 var(--font-display); }
.tabs { display: flex; gap: var(--s1); margin: 0 auto 0 var(--s4); }
.tab { position: relative; display: inline-flex; align-items: center; padding: var(--s2) var(--s3); border-radius: var(--r1); color: var(--text-2); font-weight: 550; font-size: var(--t-base); transition: color var(--d1), background var(--d1); }
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab[aria-current="page"] { color: var(--text); } .tab[aria-current="page"]::after { content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: -13px; height: 2px; background: var(--text); border-radius: 2px; }
.tab .badge { margin-left: 6px; }
.bar-end { display: flex; align-items: center; gap: var(--s2); flex: none; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r1); color: var(--text-2); transition: background var(--d1), color var(--d1); } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .icon-btn svg { width: 18px; height: 18px; }
.search-btn { display: flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s3); min-width: 220px; border-radius: var(--r1); background: var(--surface-2); color: var(--text-3); font-size: var(--t-sm); transition: background var(--d1); } .search-btn:hover { background: var(--surface-3); } .search-btn svg { width: 16px; height: 16px; } .search-btn kbd { margin-left: auto; }
kbd { font: 500 var(--t-xs)/1 var(--font); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line-strong); color: var(--text-3); background: var(--surface); }
main { padding: var(--s8) max(var(--s6), calc((100vw - 1180px) / 2)) var(--s16); outline: none; }
.page > * + * { margin-top: var(--s8); }
.page { animation: enter var(--d3) var(--ease) both; } @keyframes enter { from { opacity: 0; transform: translateY(8px); } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }
.page-head .lead { color: var(--text-2); font-size: var(--t-md); max-width: 62ch; margin-top: var(--s2); text-wrap: pretty; }
.tabbar { display: none; }

/* ---------- Controls ---------- */
.seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; gap: 2px; background: var(--surface-3); border-radius: 10px; }
.seg button { padding: 6px 14px; border-radius: 8px; font-size: var(--t-sm); font-weight: 550; color: var(--text-2); transition: all var(--d1) var(--ease); white-space: nowrap; min-height: 30px; }
.seg a { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 8px; font-size: var(--t-sm); font-weight: 550; color: var(--text-2); min-height: 30px; transition: all var(--d1) var(--ease); white-space: nowrap; } .seg a:hover { color: var(--text); } .seg a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.slot { display: inline-flex; align-items: center; gap: 6px; width: 64px; flex: none; font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; color: var(--text-2); }
.seg button:hover { color: var(--text); } .seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s4); border-radius: 10px; background: var(--surface); border: 1px solid var(--line-strong); font-weight: 600; font-size: var(--t-base); transition: all var(--d1) var(--ease); }
.btn:hover { background: var(--surface-2); } .btn:active { transform: scale(.98); } .btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); } .btn.primary:hover { filter: brightness(1.08); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--accent-text); padding: 0 var(--s2); } .btn.quiet:hover { background: var(--accent-weak); }
.btn.sm { min-height: 32px; padding: 0 var(--s3); font-size: var(--t-sm); border-radius: 8px; }
.btn:disabled { opacity: .45; pointer-events: none; }
.input, .select { height: 40px; padding: 0 var(--s3); border-radius: 10px; background: var(--surface); border: 1px solid var(--line-strong); min-width: 0; transition: border-color var(--d1), box-shadow var(--d1); }
.input:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.input::placeholder { color: var(--text-3); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.toolbar .grow { flex: 1 1 220px; }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font: 700 11px/1 var(--font); }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 var(--s2); border-radius: 6px; font-size: var(--t-xs); font-weight: 600; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.tag.pos { background: var(--pos-weak); color: var(--pos); } .tag.neg { background: var(--neg-weak); color: var(--neg); } .tag.warn { background: var(--warn-weak); color: var(--warn); } .tag.accent { background: var(--accent-weak); color: var(--accent-text); }

/* ---------- Surfaces + lists (grouped, inset: lines instead of nested cards) ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--shadow-1); }
.card.pad { padding: var(--s6); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding: 0 var(--s1) var(--s3); }
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--shadow-1); overflow: hidden; }
.row { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s5); min-height: 56px; border-top: 1px solid var(--line); transition: background var(--d1); }
.row:first-child { border-top: 0; }
a.row:hover, button.row:hover, .row.click:hover { background: var(--surface-2); } button.row, a.row { width: 100%; cursor: pointer; }
.row .main { flex: 1; min-width: 0; } .row .title { font-weight: 600; } .row .detail { color: var(--text-2); font-size: var(--t-sm); }
.row .end { text-align: right; flex: none; }
.row .chev { color: var(--text-3); width: 16px; height: 16px; flex: none; }
.list-head { display: flex; justify-content: space-between; padding: var(--s2) var(--s5); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cols { display: grid; gap: var(--s6); } .cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols.main-side { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); align-items: start; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { padding: var(--s2) var(--s6) var(--s2) 0; } .stat + .stat { padding-left: var(--s6); border-left: 1px solid var(--line); }
.stat .v { font: 700 var(--t-xl)/1.1 var(--font-display); letter-spacing: -.02em; margin: var(--s1) 0; } .stat .d { font-size: var(--t-sm); color: var(--text-2); }

/* ---------- Domain atoms ---------- */
.pdot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--text-3)); }
.pos-lab { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; color: var(--text-2); min-width: 42px; }
.who { display: flex; align-items: center; gap: var(--s3); min-width: 0; text-align: left; }
.who .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } button.who:hover .nm { color: var(--accent-text); }
.who .meta { font-size: var(--t-sm); color: var(--text-2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { flex: none; width: var(--s, 28px); height: var(--s, 28px); border-radius: 50%; display: grid; place-items: center; font: 700 calc(var(--s, 28px) * .4)/1 var(--font); color: #fff; background: var(--c); overflow: hidden; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.inj { font-size: var(--t-xs); font-weight: 700; color: var(--neg); } .inj.q { color: var(--warn); }
.mu { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--text-2); white-space: nowrap; }
.pts { font: 650 var(--t-lg)/1 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.star { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--text-3); } .star:hover { background: var(--surface-3); color: var(--text); } .star svg { width: 16px; height: 16px; } .star[aria-pressed="true"] { color: var(--warn); } .star[aria-pressed="true"] svg { fill: currentColor; }
.bar-h { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; } .bar-h > i { display: block; height: 100%; width: calc(var(--w) * 1%); background: var(--c, var(--accent)); border-radius: 2px; transition: width var(--d3) var(--ease); }
.rank-cell { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .rank-cell small { font-size: var(--t-xs); color: var(--text-3); }
.heat-n { display: inline-block; min-width: 38px; padding: 2px 8px; border-radius: 6px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: var(--s3) var(--s4); font: 600 var(--t-xs)/1.2 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
th.sortable { cursor: pointer; user-select: none; } th.sortable:hover, th[aria-sort] { color: var(--text); }
td { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); vertical-align: middle; }
tbody tr:first-child td { border-top: 0; } tbody tr { transition: background var(--d1); } tbody tr:hover { background: var(--surface-2); } tr.me { background: var(--accent-weak); } tr.me:hover { background: var(--accent-weak); }
th.r, td.r { text-align: right; }
.range { position: relative; height: 16px; min-width: 96px; } .range::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--surface-3); border-radius: 2px; }
.range i { position: absolute; top: 5px; height: 6px; border-radius: 3px; background: var(--accent-weak); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); min-width: 4px; }
.range b { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent); left: calc(var(--m) * 1%); border: 2px solid var(--surface); }

/* ---------- Charts ---------- */
.chart text { font-family: var(--font); fill: var(--text-3); font-size: 12px; } .chart g text { fill: var(--text-2); } .chart .strong { fill: var(--text); font-weight: 600; font-size: 13px; } .chart .tick { font-size: 11px; font-variant-numeric: tabular-nums; }
.outlook { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--s1); align-items: end; height: 176px; }
.outlook div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; font-size: var(--t-xs); color: var(--text-3); text-align: center; }
.outlook b { font-weight: 650; font-size: var(--t-sm); color: var(--text); font-variant-numeric: tabular-nums; } .outlook i { width: 100%; max-width: 28px; border-radius: 4px 4px 2px 2px; background: var(--c); height: calc(var(--h) * 1%); min-height: 3px; transform-origin: bottom; animation: grow-y var(--d3) var(--ease) both; animation-delay: calc(var(--i) * 25ms); } @keyframes grow-y { from { transform: scaleY(0); } }
.diverge { display: grid; gap: var(--s2); } .dv { display: grid; grid-template-columns: 48px 1fr 56px; align-items: center; gap: var(--s3); font-size: var(--t-sm); } .dv-track { position: relative; height: 16px; } .dv-track::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-strong); } .dv-axis .axis { position: relative; height: 14px; } .dv-axis { margin-top: -2px; } .dv-track i { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; min-width: 2px; background: var(--c); }
.ring-lg { width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-3) 0); display: grid; place-items: center; position: relative; flex: none; } .ring-lg::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); } .ring-lg b { position: relative; font-size: var(--t-sm); }

/* ---------- Trade ---------- */
.pick-row { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4); min-height: 56px; border-top: 1px solid var(--line); transition: background var(--d1); } .pick-row:first-child { border-top: 0; } .pick-row:hover { background: var(--surface-2); }
.check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; flex: none; transition: all var(--d1) var(--ease); } .check svg { width: 12px; height: 12px; stroke-width: 3; color: var(--accent-ink); opacity: 0; transform: scale(.6); transition: all var(--d2) var(--ease-spring); }
.pick-row[aria-checked="true"] { background: var(--accent-weak); } .pick-row[aria-checked="true"] .check { background: var(--accent); border-color: var(--accent); } .pick-row[aria-checked="true"] .check svg { opacity: 1; transform: none; }
.scroll-list { max-height: 440px; overflow-y: auto; overscroll-behavior: contain; }
.summary { position: sticky; bottom: var(--s4); z-index: 10; display: flex; align-items: center; gap: var(--s6); padding: var(--s4) var(--s5); border-radius: var(--r3); background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(1.6) blur(20px); border: 1px solid var(--line-strong); box-shadow: var(--shadow-2); }
.balance { flex: 1; min-width: 0; } .balance-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-3); margin: var(--s2) 0; gap: 2px; } .balance-bar i { display: block; transition: width var(--d3) var(--ease); } .balance-bar .a { background: var(--text-3); border-radius: 3px 0 0 3px; } .balance-bar .b { background: var(--accent); border-radius: 0 3px 3px 0; }
.verdict { display: flex; align-items: center; gap: var(--s4); } .verdict-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--c-weak); color: var(--c); animation: pop var(--d3) var(--ease-spring) both; flex: none; } .verdict-icon svg { width: 28px; height: 28px; stroke-width: 2.4; } @keyframes pop { from { transform: scale(.6); opacity: 0; } }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); } .fact { padding: var(--s4) var(--s5); } .fact + .fact { border-left: 1px solid var(--line); } .fact .v { font: 650 var(--t-lg)/1.1 var(--font-display); margin: var(--s1) 0; font-variant-numeric: tabular-nums; }
details.disc { border-top: 1px solid var(--line); } details.disc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s5); font-weight: 600; } details.disc summary::-webkit-details-marker { display: none; } details.disc summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform var(--d2) var(--ease); margin-right: 4px; } details.disc[open] summary::after { transform: rotate(-135deg); } details.disc > .body { padding: 0 var(--s5) var(--s5); }
.factor { display: grid; grid-template-columns: 96px 1fr 56px; gap: var(--s3); align-items: baseline; padding: var(--s2) 0; font-size: var(--t-sm); }
.idea { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s4) var(--s5); border-top: 1px solid var(--line); } .idea:first-child { border-top: 0; } .idea .swap { color: var(--text-3); width: 20px; height: 20px; }

/* ---------- Overlays ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / .4); backdrop-filter: blur(2px); animation: fade var(--d2) both; } @keyframes fade { from { opacity: 0; } }
.sheet { position: fixed; z-index: 41; top: var(--s4); right: var(--s4); bottom: var(--s4); width: min(520px, calc(100vw - 32px)); background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-3); border: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; transform: translateX(calc(100% + 32px)); transition: transform var(--d3) var(--ease); visibility: hidden; }
.sheet.open { transform: none; visibility: visible; }
.sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding: var(--s6) var(--s6) var(--s4); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.sheet-body { padding: var(--s6); display: grid; gap: var(--s8); }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; } .kv div { background: var(--surface); padding: var(--s3) var(--s4); } .kv span { display: block; font-size: var(--t-xs); color: var(--text-3); } .kv b { font: 650 var(--t-md)/1.3 var(--font-display); font-variant-numeric: tabular-nums; }
.palette { position: fixed; z-index: 50; left: 50%; top: 14vh; width: min(620px, calc(100vw - 24px)); transform: translateX(-50%); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow-3); overflow: hidden; animation: drop var(--d2) var(--ease) both; } @keyframes drop { from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.98); } }
.pal-input { width: 100%; height: 56px; padding: 0 var(--s6); border: 0; border-bottom: 1px solid var(--line); background: none; font-size: var(--t-md); } .pal-input:focus { outline: none; }
.pal-list { max-height: 50vh; overflow-y: auto; padding: var(--s2); } .pal-item { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s2) var(--s3); min-height: 48px; border-radius: 10px; } .pal-item[aria-selected="true"] { background: var(--accent-weak); } .pal-item .kind { margin-left: auto; font-size: var(--t-xs); color: var(--text-3); }
.toast { position: fixed; z-index: 60; left: 50%; bottom: var(--s8); transform: translate(-50%, 16px); opacity: 0; padding: var(--s3) var(--s5); border-radius: var(--r-pill); background: var(--text); color: var(--bg); font-weight: 600; font-size: var(--t-sm); transition: all var(--d2) var(--ease); pointer-events: none; box-shadow: var(--shadow-2); } .toast.on { transform: translate(-50%, 0); opacity: 1; }
.boot { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--bg); transition: opacity var(--d3); } .boot.done { opacity: 0; pointer-events: none; } .spinner { width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--surface-3); border-top-color: var(--text); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.empty { padding: var(--s10) var(--s6); text-align: center; color: var(--text-3); }
.callout { padding: var(--s4) var(--s5); border-radius: var(--r2); background: var(--surface-2); color: var(--text-2); font-size: var(--t-sm); border-left: 3px solid var(--warn); }
.graph-box { overflow: auto; max-height: 560px; border-radius: var(--r2); background: var(--surface-2); border: 1px solid var(--line); }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) { .hide-md { display: none !important; } }
@media (max-width: 1000px) { .cols.main-side, .cols.two { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; row-gap: var(--s5); } .stat:nth-child(3) { padding-left: 0; border-left: 0; } .search-btn { min-width: 0; width: 36px; padding: 0; justify-content: center; } .search-btn span:not(#search-icon), .search-btn kbd { display: none; } }
@media (max-width: 760px) {
  .tabs { display: none; } .bar { gap: var(--s2); padding: 0 var(--s3); } .bar-end { margin-left: auto; gap: var(--s1); } .bar .seg button { padding: 6px 10px; } .brand span:last-child { font-size: var(--t-base); } main { padding: var(--s6) var(--s4) calc(96px + env(safe-area-inset-bottom)); }
  .tabbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.6) blur(20px); border-top: 1px solid var(--line); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; min-height: 52px; font-size: 11px; font-weight: 600; color: var(--text-3); } .tabbar a svg { width: 22px; height: 22px; } .tabbar a[aria-current="page"] { color: var(--accent-text); }
  .t-title { font-size: 2.125rem; } .t-h1 { font-size: 1.5rem; }
  .row { padding: var(--s3) var(--s4); } .facts { grid-template-columns: 1fr; } .fact + .fact { border-left: 0; border-top: 1px solid var(--line); } .idea { grid-template-columns: 1fr; gap: var(--s2); } .idea .swap { transform: rotate(90deg); }
  .summary { flex-wrap: wrap; bottom: calc(68px + env(safe-area-inset-bottom)); gap: var(--s3); } .summary .balance { flex-basis: 100%; }
  .sheet { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; transform: translateY(105%); } .sheet.open { transform: none; }
  .hide-sm { display: none !important; }
}
@media (pointer: coarse) { .btn, .seg button, .input, .select { min-height: 44px; } .star { width: 44px; height: 44px; } .icon-btn { width: 44px; height: 44px; } }
@media (max-width: 420px) { .bar { padding: 0 var(--s2); gap: var(--s1); } .brand { gap: 6px; } .brand span:last-child { font-size: var(--t-sm); } .bar .seg button { padding: 6px 7px; font-size: var(--t-xs); } }
@media (max-width: 360px) { .brand-mark { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; } }
@media print { .bar, .tabbar, .summary { display: none; } }

/* ---------- Photos ---------- */
.ph { position: relative; flex: none; display: grid; place-items: center; width: var(--s, 40px); height: var(--s, 40px); border-radius: 50%; background: var(--surface-3); color: var(--text-3); font: 700 calc(var(--s, 40px) * .32)/1 var(--font); box-shadow: 0 0 0 2px var(--c, var(--line-strong)); overflow: hidden; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; background: var(--surface-3); opacity: 0; transition: opacity var(--d2) var(--ease); } .ph img.ok { opacity: 1; }
.ph.pick { border-radius: 10px; box-shadow: none; background: var(--surface-3); color: var(--text-2); } .ph.pick b { text-align: center; line-height: 1.05; font-size: calc(var(--s, 40px) * .3); } .ph.pick small { display: block; font-size: .78em; font-weight: 600; color: var(--text-3); }
.avatar + .who, .who { gap: var(--s3); }

/* ---------- Lineup formation ---------- */
.weekbar { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--s1) * -1); padding: 2px var(--s1); }
.weekbar { margin-top: var(--s2); border-bottom: 1px solid var(--line); gap: 0; }
.weekbar button { flex: 1 0 46px; display: grid; justify-items: center; gap: 1px; padding: 6px 4px 8px; color: var(--text-3); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--d1) var(--ease), border-color var(--d1) var(--ease); min-height: 44px; }
.weekbar button span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.weekbar button b { font: 650 var(--t-md)/1.1 var(--font-display); } .weekbar button:hover { color: var(--text); }
.weekbar button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--accent); }
.pitch { position: relative; padding: var(--s5); border-radius: var(--r3); border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--pos) 7%, var(--surface)), var(--surface) 70%), repeating-linear-gradient(0deg, transparent 0 63px, color-mix(in srgb, var(--pos) 9%, transparent) 63px 64px); box-shadow: var(--shadow-1); }
.pitch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.pitch-total { font: 700 var(--t-xl)/1.1 var(--font-display); letter-spacing: -.02em; margin-top: var(--s1); }
.pitch-opp { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.25; transition: border-color var(--d1); } .pitch-opp:hover { border-color: var(--line-strong); } .pitch-opp .chev { width: 14px; height: 14px; color: var(--text-3); }
.pitch-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); } .pitch-row::before { content: attr(data-label); grid-column: 1 / -1; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.slotcard { position: relative; display: grid; justify-items: center; gap: 2px; padding: var(--s3) var(--s2) var(--s3); border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: center; min-width: 0; transition: transform var(--d2) var(--ease), border-color var(--d1), box-shadow var(--d2); box-shadow: var(--shadow-1); }
button.slotcard:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.slotcard.empty { border-style: dashed; background: transparent; box-shadow: none; }
.slot-name { justify-self: start; font: 700 10px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--s1) 2px; }
.sc-name { max-width: 100%; margin-top: var(--s2); font-weight: 600; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-pts { font: 700 var(--t-lg)/1.1 var(--font-display); letter-spacing: -.01em; }
.sc-mu { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--text-3); }
.benchgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); }
.benchcard { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); text-align: left; min-width: 0; transition: border-color var(--d1), transform var(--d2) var(--ease); } .benchcard:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.benchcard .nm { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .benchcard .meta { display: block; font-size: var(--t-xs); color: var(--text-3); }

/* ---------- Matchup ---------- */
.matchup-strip { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); transition: border-color var(--d1); } .matchup-strip:hover { border-color: var(--line-strong); } .matchup-strip .chev { width: 16px; height: 16px; color: var(--text-3); }
.ms-side { display: flex; align-items: center; gap: var(--s3); min-width: 0; } .ms-side.right { justify-content: flex-end; text-align: right; } .ms-side b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ms-pts { font: 700 var(--t-lg)/1.1 var(--font-display); }
.ms-mid { display: grid; justify-items: center; gap: 2px; text-align: center; }
.board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4); padding: var(--s6); }
.board-team { display: flex; align-items: center; gap: var(--s3); min-width: 0; } .board-team.right { justify-content: flex-start; text-align: right; flex-direction: row-reverse; } .board-team b { font: 650 var(--t-md)/1.2 var(--font-display); }
.board-mid { text-align: center; padding: 0 var(--s4); } .board-score { display: flex; gap: var(--s3); align-items: baseline; justify-content: center; font: 700 var(--t-2xl)/1 var(--font-display); letter-spacing: -.03em; }
.board-prob { grid-column: 1 / -1; margin-top: var(--s2); }
.mrow { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch; border-top: 1px solid var(--line); } .mrow:first-of-type { border-top: 0; }
.mslot { display: grid; place-items: center; font: 700 var(--t-xs)/1 var(--font); letter-spacing: .06em; color: var(--text-3); background: var(--surface-2); }
.mside { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); min-width: 0; text-align: left; transition: background var(--d1); } button.mside:hover { background: var(--surface-2); } .mside .mname { flex: 1; min-width: 0; } .mside .nm { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mside .meta { display: block; font-size: var(--t-xs); color: var(--text-3); }
.mside.win { background: var(--pos-weak); } .mside:last-child { flex-direction: row-reverse; text-align: right; }

/* ---------- Players list ---------- */
.ptable { display: block; }
.prow { display: grid; grid-template-columns: var(--cols); align-items: center; gap: var(--s3); padding: var(--s2) var(--s4) var(--s2) var(--s1); min-height: 60px; border-top: 1px solid var(--line); transition: background var(--d1); } .prow:hover { background: var(--surface-2); }
.prow.head { min-height: 40px; background: var(--surface-2); border-top: 0; border-bottom: 1px solid var(--line); font: 600 var(--t-xs)/1.2 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); padding-block: 0; } .prow.head:hover { background: var(--surface-2); }
.hcell { cursor: pointer; user-select: none; } .hcell:hover, .hcell.on { color: var(--text); }
.pc-metric { display: grid; justify-items: end; line-height: 1.2; } .show-sm { display: none !important; }

/* ---------- Player card ---------- */
.sh2 { align-items: center; padding-bottom: var(--s5); }
.sh2 .ph { --s: 80px; }
.sh-id { flex: 1; min-width: 0; } .sh-id h2 { font: 700 1.625rem/1.1 var(--font-display); letter-spacing: -.02em; text-wrap: balance; } .sh-id .sub { margin-top: var(--s1); } .sh-tags { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s2); } .sh-actions { display: flex; gap: var(--s1); align-self: flex-start; }
.sheet-body:has(.ktiles) { gap: var(--s6); }
.ktiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; }
.kt { display: grid; gap: 2px; align-content: start; padding: var(--s3) var(--s4) var(--s4); background: var(--surface); min-width: 0; }
.kt > b { font: 700 1.75rem/1.1 var(--font-display); letter-spacing: -.02em; margin-top: 2px; }
.kt-foot { display: grid; gap: 6px; justify-items: start; font-size: var(--t-sm); line-height: 1.3; }
.gpill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 7px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; } .gpill i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--neutral)); flex: none; }
.sheet-tabs { display: flex; width: 100%; } .sheet-tabs button { flex: 1; min-height: 36px; font-size: var(--t-base); }
.ps-stack { display: grid; gap: var(--s8); }
.ps { display: grid; gap: var(--s3); min-width: 0; }
.ps-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } .ps-head h3 { font: 650 var(--t-md)/1.3 var(--font-display); } .ps-head span { font-size: var(--t-sm); color: var(--text-3); }
.dur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }

/* ---------- Chart primitives ---------- */
figure { margin: 0; } figcaption { font-size: var(--t-xs); color: var(--text-3); line-height: 1.4; }
.lg { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--t-xs); color: var(--text-2); } .lg span { display: inline-flex; align-items: center; gap: 6px; }
.lg-sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c); } .lg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); } .lg-line { width: 14px; height: 0; border-top: 2px solid var(--c); } .lg-dash { width: 16px; height: 0; border-top: 1.5px dashed var(--c); } .lg-band { width: 14px; height: 10px; border-radius: 2px; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pos) 35%, transparent); }
.axis { position: relative; height: 16px; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; } .axis > span { position: absolute; left: calc(var(--x) * 1%); transform: translateX(-50%); white-space: nowrap; line-height: 16px; } .axis > span:first-child { transform: none; } .axis > span:last-child { transform: translateX(-100%); }
.gl { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 1%); height: 0; border-top: 1px solid var(--grid); } .gl[style*="--y:0.00"] { border-top-color: var(--line-strong); }

/* Weekly projection columns */
.wk { display: grid; gap: var(--s3); }
.wk-grid { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: 168px auto; column-gap: var(--s2); position: relative; margin-top: var(--s4); }
.wk-y { position: relative; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; } .wk-y span { position: absolute; right: 0; bottom: calc(var(--y) * 1%); transform: translateY(50%); line-height: 1; }
.wk-ytitle { position: absolute; left: 0; top: -2px; transform: translateY(-100%); font-size: 11px; font-weight: 600; color: var(--text-3); }
.wk-plot { position: relative; }
.avg { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 1%); border-top: 1.5px dashed var(--text-2); z-index: 2; pointer-events: none; } .avg span { position: absolute; right: 0; bottom: 3px; padding: 0 4px; border-radius: 4px; font-size: 11px; font-weight: 650; color: var(--text); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.wk-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.wk-col { position: relative; display: flex; align-items: flex-end; justify-content: center; border-radius: 6px; outline-offset: 0; }
.wk-col > i { position: relative; width: 100%; max-width: 24px; height: calc(var(--h) * 1%); min-height: 3px; border-radius: 4px 4px 1px 1px; background: color-mix(in srgb, var(--c) 82%, var(--surface)); transform-origin: bottom; animation: grow-y var(--d3) var(--ease) both; animation-delay: calc(var(--i) * 25ms); }
.wk-col > i span { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -3px); font-size: 11px; font-weight: 650; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wk-col.now > i span { color: var(--text); font-weight: 750; }
.wk-col.bye > i { height: 100%; max-width: 30px; border-radius: 4px; background: repeating-linear-gradient(135deg, var(--surface-3) 0 3px, transparent 3px 7px); animation: none; }
.wk-col:hover, .wk-col:focus-visible { background: var(--surface-2); }
.wk-col[data-tip]:hover::after, .wk-col[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; z-index: 5; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: pre; padding: 6px 10px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: var(--t-xs); font-weight: 600; line-height: 1.4; box-shadow: var(--shadow-2); pointer-events: none; }
.wk-col:first-child[data-tip]:hover::after, .wk-col:first-child[data-tip]:focus-visible::after { left: 0; transform: none; } .wk-col:last-child[data-tip]:hover::after, .wk-col:last-child[data-tip]:focus-visible::after { left: auto; right: 0; transform: none; }
.wk-x { grid-column: 2; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; padding-top: var(--s2); border-top: 1px solid var(--line-strong); margin-top: -1px; }
.wk-x span { display: grid; justify-items: center; line-height: 1.25; min-width: 0; } .wk-x b { font-size: 11px; font-weight: 650; color: var(--text-2); } .wk-x small { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%; }
.wk-x .now b, .wk-x .now small { color: var(--text); }

/* Outcome range */
.oc { display: grid; gap: var(--s2); }
.oc-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); } .oc-keys div { display: grid; gap: 0; } .oc-keys .mid { text-align: center; } .oc-keys .hi { text-align: right; } .oc-keys span { font-size: var(--t-xs); color: var(--text-3); font-weight: 600; letter-spacing: .02em; } .oc-keys b { font: 700 var(--t-lg)/1.2 var(--font-display); } .oc-keys .mid b { color: var(--accent-text); }
.oc-track { position: relative; height: 24px; margin-top: var(--s1); } .oc-track::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; border-radius: 2px; background: var(--surface-3); }
.oc-track i { position: absolute; top: 5px; height: 14px; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); border-radius: 7px; background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.oc-track b { position: absolute; top: 2px; left: calc(var(--m) * 1%); width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }

/* Percentile table */
.pt { display: grid; } .pt-row { display: grid; grid-template-columns: minmax(0, 1.25fr) 64px minmax(0, 1.6fr); gap: var(--s3); align-items: center; min-height: 40px; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.pt-row.head { min-height: 28px; border-top: 0; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); } .pt-row.foot { min-height: 22px; border-top: 0; }
.pt-row .r { text-align: right; } .pt-row > b { font-weight: 650; font-size: var(--t-base); }
.pt-cell { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: var(--s2); } .pt-cell em { font-style: normal; font-size: var(--t-xs); font-weight: 650; color: var(--text-2); text-align: right; }
.pt-track { position: relative; height: 8px; border-radius: 4px; background: var(--surface-3); } .pt-track::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 0; border-left: 1.5px dashed var(--text-3); }
.pt-track i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 1%); min-width: 4px; border-radius: 4px; background: var(--accent); }

/* Diverging single value */
.dva { display: grid; gap: var(--s1); } .dva-ends { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--text-2); font-weight: 600; }
.dva-track { position: relative; height: 34px; } .dva-track::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 8px; border-radius: 4px; background: var(--surface-3); } .dva-track::after { content: ""; position: absolute; left: 50%; top: 14px; height: 20px; border-left: 1.5px solid var(--text-3); }
.dva-track i { position: absolute; top: 20px; height: 8px; border-radius: 4px; background: var(--c); }
.dva-track b { position: absolute; top: 0; left: calc(var(--m) * 1%); transform: translateX(-50%); font-size: var(--t-sm); font-weight: 700; white-space: nowrap; }

/* Factor bars */
.yb { display: grid; } .yb-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 48px; gap: var(--s3); align-items: center; padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: var(--t-sm); } .yb-row:first-child { border-top: 0; }
.yb-k { display: grid; min-width: 0; font-weight: 650; } .yb-k small { font-size: var(--t-xs); font-weight: 400; color: var(--text-3); } .yb-row > b { text-align: right; font-weight: 650; }
.yb-track { position: relative; height: 14px; border-radius: 0 4px 4px 0; background: var(--surface-2); } .yb-track i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 1%); min-width: 2px; border-radius: 0 4px 4px 0; background: var(--accent); }
@media (max-width: 520px) { .kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Source dots */
.sd { display: grid; gap: var(--s2); } .sd-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 48px; gap: var(--s3); align-items: center; min-height: 28px; font-size: var(--t-sm); } .sd-row.foot { min-height: 16px; }
.sd-k { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sd-v { text-align: right; font-weight: 600; }
.sd-track { position: relative; height: 20px; } .sd-track::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--surface-3); border-radius: 1px; } .sd-track::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--c) * 1%); border-left: 2px solid var(--text-2); }
.sd-track b { position: absolute; top: 4px; left: calc(var(--m) * 1%); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); z-index: 1; }

/* Age curve */
.ac { display: grid; gap: var(--s3); }
.ac-grid { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: 132px auto; column-gap: var(--s2); position: relative; margin-top: var(--s3); } .ac-grid > .axis { grid-column: 2; margin-top: var(--s1); }
.ac-plot { position: relative; border-bottom: 1px solid var(--line-strong); }
.ac-peak { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); background: var(--pos-weak); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--pos) 35%, transparent), inset -1px 0 0 color-mix(in srgb, var(--pos) 35%, transparent); }
.ac-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ac-plot path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; } .ac-all { stroke: var(--text-3); stroke-width: 2; } .ac-next { stroke: var(--accent); stroke-width: 5; }
.ac-dot { position: absolute; left: calc(var(--x) * 1%); bottom: calc(var(--y) * 1%); width: 12px; height: 12px; margin: 0 0 -6px -6px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px var(--surface); z-index: 2; } .ac-dot span { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--surface); }
.takeaways { display: grid; gap: var(--s3); list-style: none; padding: 0; } .takeaways li { position: relative; padding-left: var(--s5); font-size: var(--t-base); color: var(--text-2); line-height: 1.5; text-wrap: pretty; } .takeaways li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.fold { border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; } .fold details.disc:first-child { border-top: 0; }

@media (max-width: 760px) {
  .show-sm { display: grid !important; } .pc-metric.show-sm { display: grid !important; }
  .prow { grid-template-columns: 44px minmax(0, 1fr) auto; padding-right: var(--s3); min-height: 64px; } .prow.head { display: none; } .pc-player { min-width: 0; }
  .select.show-sm { display: block !important; }
  .matchup-strip { grid-template-columns: 1fr auto 1fr; padding: var(--s4); } .matchup-strip .chev { display: none; } .ms-side .num { font-size: var(--t-md); } .ms-side { flex-direction: column; align-items: flex-start; gap: var(--s2); } .ms-side.right { flex-direction: column-reverse; align-items: flex-end; }
  .board { grid-template-columns: 1fr 1fr; padding: var(--s5); } .board-mid { grid-column: 1 / -1; grid-row: 1; } .board-team { flex-direction: column; align-items: flex-start; } .board-team.right { flex-direction: column; align-items: flex-end; } .board-score { font-size: 2.25rem; }
  .mrow { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); } .mside { flex-direction: column; align-items: flex-start; gap: var(--s2); padding: var(--s3) var(--s2); } .mside:last-child { flex-direction: column; align-items: flex-end; } .mside .ph { --s: 32px !important; } .mside .pts { font-size: var(--t-md); }
  .pitch { padding: var(--s4) var(--s3); } .pitch-row { gap: var(--s2); } .slotcard { padding: var(--s2) 4px var(--s3); } .sc-name { font-size: var(--t-xs); } .sc-pts { font-size: var(--t-md); } .slotcard .ph { --s: 52px !important; }
  .benchgrid { grid-template-columns: 1fr 1fr; gap: var(--s2); } .benchcard { flex-wrap: wrap; padding: var(--s2); } .benchcard .pts { font-size: var(--t-md); margin-left: auto; }
  .sh2 .ph { --s: 52px !important; } .sh-id h2 { font-size: 1.25rem; } .sh-id .sub { font-size: var(--t-xs); } .sh-tags { margin-top: 6px; } .sh-tags .tag { height: 20px; } .sheet-head.sh2 { padding: var(--s5) var(--s4) var(--s4); gap: var(--s3); } .sheet-body { padding: var(--s5) var(--s4); }
  .kt { padding: var(--s3) var(--s3) var(--s3); } .kt > b { font-size: 1.375rem; } .kt-foot { font-size: var(--t-xs); } .gpill { padding: 2px 6px; font-size: 11px; white-space: normal; }
  .wk-cols, .wk-x { gap: 3px; } .wk-grid { grid-template-columns: 22px minmax(0, 1fr); column-gap: 6px; } .wk-col > i span, .wk-x b, .wk-x small { font-size: 10px; }
  .pt-row { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1.1fr); gap: var(--s2); } .pt-cell { grid-template-columns: minmax(0, 1fr) 34px; }
  .fx-row { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) 40px; gap: var(--s2); } .sd-row { grid-template-columns: 84px minmax(0, 1fr) 44px; gap: var(--s2); }
  .page-head .toolbar { width: 100%; } .page-head .toolbar .select { flex: 1; }
}

/* ---------- Sleeper-style lineup rows ---------- */
.lu-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s1) var(--s3); }
.lu-total { font: 700 var(--t-xl)/1.1 var(--font-display); letter-spacing: -.02em; margin-top: var(--s1); }
.lu { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; box-shadow: var(--shadow-1); }
.lrow { display: grid; grid-template-columns: 42px 44px minmax(0, 1fr) auto 52px; align-items: center; gap: var(--s3); width: 100%; padding: var(--s2) var(--s4) var(--s2) var(--s3); min-height: 62px; text-align: left; border-top: 1px solid var(--line); transition: background var(--d1); }
.lrow:first-child { border-top: 0; } button.lrow:hover { background: var(--surface-2); }
.lrow.empty { color: var(--text-3); }
.slotchip { display: grid; place-items: center; height: 28px; border-radius: 8px; font: 700 var(--t-xs)/1 var(--font); letter-spacing: .04em; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.lr-main { min-width: 0; display: block; } .lr-main .nm { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lr-main .meta { display: flex; gap: var(--s2); align-items: center; font-size: var(--t-xs); color: var(--text-3); white-space: nowrap; }
.lr-mu { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--text-2); white-space: nowrap; }
.lr-pts { text-align: right; font: 650 var(--t-md)/1 var(--font-display); } .lr-pts .muted { font: 500 var(--t-sm)/1 var(--font); }
.gtag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; color: var(--text-2); background: color-mix(in srgb, var(--c) 13%, transparent); }
.gtag i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
/* team sidebar: position strength */
.strength { padding: var(--s2) var(--s4) var(--s3); }
.str-row { padding: var(--s3) 0; border-top: 1px solid var(--line); } .str-row:first-child { border-top: 0; }
.str-top { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: 8px; } .str-top > .t-xs { flex: 1; }
.str-top b { font: 650 var(--t-md)/1 var(--font-display); } .str-top b small { font: 500 var(--t-xs) var(--font); color: var(--text-3); }
.str-top .rk { min-width: 62px; text-align: right; font-size: var(--t-xs); font-weight: 650; color: var(--c); }
.str-bar { position: relative; height: 8px; border-radius: 4px; background: var(--surface-2); }
.str-bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 1%); border-radius: 4px; background: var(--c); }
.str-bar em { position: absolute; top: -3px; bottom: -3px; left: calc(var(--x) * 1%); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); }
.str-cap { margin-top: var(--s2); font-size: var(--t-xs); color: var(--text-3); line-height: 1.45; }
.str-key { display: inline-block; width: 2px; height: 11px; background: var(--text); vertical-align: -1px; margin: 0 2px 0 4px; }
/* age histogram */
.hist { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2); align-items: end; margin: 0; }
.hist-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-height: 112px; }
.hist-col > span { font-size: var(--t-xs); font-weight: 650; color: var(--text-2); }
.hist-col i { align-self: end; width: 100%; max-width: 28px; height: max(2px, calc(var(--h) * .76px)); border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--accent) 78%, var(--surface)); }
.hist-col small { font-size: 11px; color: var(--text-3); white-space: nowrap; border-top: 1px solid var(--line-strong); width: 100%; text-align: center; padding-top: 4px; }
.hist figcaption { grid-column: 1 / -1; margin-top: var(--s2); }
/* draft capital chips */
.picks { padding: var(--s2) var(--s4); }
.pk-year { display: grid; grid-template-columns: 44px 1fr; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-top: 1px solid var(--line); } .pk-year:first-child { border-top: 0; }
.pk-year > .num { font-size: var(--t-sm); font-weight: 650; color: var(--text-2); }
.pk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pk { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); font-size: var(--t-sm); }
.pk b { font-weight: 650; } .pk small { font-size: var(--t-xs); color: var(--text-3); }
.pk.r1 { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
@media (max-width: 760px) {
  .lrow { grid-template-columns: 36px 40px minmax(0, 1fr) 44px; gap: var(--s2); padding: var(--s2) var(--s3) var(--s2) var(--s2); min-height: 58px; }
  .lrow .ph { --s: 40px !important; }
  .lr-mu { display: none; }
  .lu-head { padding-inline: 0; }
}
@media (max-width: 760px) {
  .board { padding: var(--s4); row-gap: var(--s2); } .board-team, .board-team.right { flex-direction: row; align-items: center; gap: var(--s2); } .board-team.right { flex-direction: row-reverse; } .board-team .avatar { --s: 32px !important; } .board-team .t-sm { display: none; } .board-score { font-size: 1.9rem; }
  .mrow { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); }
  .mside, .mside:last-child { flex-direction: row; align-items: center; gap: 6px; padding: 8px 6px 8px 8px; }
  .mside:last-child { flex-direction: row-reverse; text-align: right; padding: 8px 8px 8px 6px; }
  .mside .ph { --s: 34px !important; flex: none; } .mside .meta { display: none; } .mside .nm { font-size: 12.5px; } .mside .pts { font-size: var(--t-sm); flex: none; }
}

.hist-col.out i { background: var(--surface-3); }
.hist-col.out span { color: var(--text-3); }
.cut-list { display: grid; gap: 8px; margin-top: 16px; max-height: 240px; overflow: auto; }
.cut-option { display: flex; align-items: center; gap: 10px; font-size: 13px; min-height: 32px; }
.cut-option span { flex: 1; min-width: 0; }
.cut-option input { accent-color: var(--accent); }
.callout p + p { margin-top: 8px; }

/* Profile connection and league-wide trade builder. */
.onboarding { min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; }
.setup-card { width: min(100%, 640px); display: grid; gap: 20px; }
.setup-brand { margin-bottom: 12px; }
.setup-card form { display: grid; gap: 12px; }
.setup-card .input { width: 100%; min-height: 46px; }
.setup-leagues { display: grid; gap: 10px; }
.setup-league { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line-strong); border-radius: var(--r2); padding: 16px; text-align: left; }
.setup-league:hover { border-color: var(--accent); background: var(--accent-weak); }
.setup-league small { display: block; margin-top: 6px; color: var(--text-3); }
.setup-league svg { width: 20px; height: 20px; flex: none; }
.setup-progress { display: grid; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
.profile-context { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px max(16px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid var(--line); font-size: var(--t-sm); flex-wrap: wrap; }
.deal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; }
.deal-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.deal-team { min-width: 0; }
.deal-team .section-head { gap: 8px; flex-wrap: wrap; }
.deal-team .select { max-width: 100%; }
.deal-search { padding: 12px; border-bottom: 1px solid var(--line); }
.deal-search .input { width: 100%; }
.deal-assets { max-height: 420px; overflow-y: auto; }
.deal-asset { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.deal-asset input { accent-color: var(--accent); width: 18px; height: 18px; }
.deal-asset .who { min-width: 0; }
.deal-asset .nm { white-space: normal; }
.deal-asset .select { grid-column: 2/-1; width: 100%; }
.deal-incoming { padding: 14px; background: var(--surface-2); }
.deal-incoming p { margin-top: 8px; }
.deal-team .cut-list { margin-top: 0; }
@media (max-width: 960px) { .deal-grid.three { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .deal-grid { grid-template-columns: 1fr; } .profile-context { padding-inline: 16px; } }

.history-price-summary { display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;padding:10px 12px;background:var(--surface-2);border-radius:var(--r1);font-size:var(--t-sm); }
.history-prices { margin-top:8px; }

.profile-context > span, .setup-league > span { min-width:0;overflow-wrap:anywhere; }
.deal-team .section-head .who { min-width:0;flex:1; }

.onboarding.has-overview { display:block;padding:0 20px 40px; }
.league-overview { max-width:1100px;margin:0 auto; }
.overview-header { min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line); }
.overview-intro { padding:32px 0 24px;display:grid;gap:10px; }
.overview-analysis { display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px; }
.overview-analysis strong { display:block;margin-bottom:6px; }
.overview-analysis .btn { flex:none; }
.overview-tabs { display:inline-flex;margin-bottom:18px; }
.overview-roster-head { display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px;border-bottom:1px solid var(--line); }
.overview-roster-head h2 { margin-bottom:6px; }
.overview-player-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
.overview-player { display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);min-width:0; }
.overview-player > div { flex:1;min-width:0;overflow-wrap:anywhere; }
.overview-player p { margin-top:4px; }
.overview-position { display:grid;place-items:center;min-width:38px;height:34px;border-radius:8px;background:var(--surface-2);font-weight:650;font-size:12px; }
.overview-table { overflow:auto; }
.overview-table table { width:100%; }
.overview-table td small { display:block;margin-top:4px; }
.overview-footnote { margin-top:20px; }
.league-overview .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
@media(max-width:650px){.overview-player-list{grid-template-columns:1fr}.overview-analysis{align-items:stretch;flex-direction:column;gap:14px}.overview-roster-head{align-items:stretch;flex-direction:column}.overview-roster-head select{width:100%}.overview-intro{padding-top:24px}.overview-player{padding:14px 16px}}