/* Trade Value v2 — design language from Figma frame 17 (V3 · Design language). */
:root {
  --v2-canvas: #F3F7F7;
  --v2-surface: #FFFFFF;
  --v2-ink: #142B25;
  --v2-muted: #64736F;
  --v2-border: #DEE5E2;
  --v2-action: #087F5B;
  --v2-action-ink: #FFFFFF;
  --v2-positive: #E9F5EF;
  --v2-negative: #B33F50;
  --v2-older: #A56320;
  --v2-nav: #142B25;
  --v2-rank-tint: #EEF6F2; --v2-rank-sub: #506360; --v2-ddf: #A84410;
  --v2-focus: #087F5B;
  --v2-hover: #F7FAF9;
  --v2-hover-rank: #E3F1EA;
  --v2-index-bg: #EAF1FB;
  --v2-index-border: #C9D9F1;
  --v2-index-ink: #1F5FBF;
  --v2-action-strong: #066B4C;   /* action text on a tint: 4.5:1 on --v2-positive */
  --v2-tint-border: #CFE7DB;
  --v2-brush-fill: #D7EEE3;
  --v2-radius-card: 12px;
  --v2-radius-btn: 8px;
  /* Compact density tokens (JEG-470), shared by every tab. Fluid between phone and 1440 px. */
  --v2-pad-card: clamp(8px, 0.4vw + 4px, 14px);        /* card padding, block */
  --v2-pad-card-x: clamp(14px, 0.8vw + 6px, 20px);     /* card padding, inline */
  --v2-pad-section: clamp(24px, 2vw + 12px, 48px);     /* space under a tab's last block */
  --v2-gap: clamp(8px, 0.5vw + 4px, 12px);             /* between cards and toolbar rows */
  --v2-title-1: clamp(22px, 1vw + 13px, 28px);         /* page title (h1): 26–28 px at desktop */
  --v2-title-2: clamp(16px, 0.3vw + 13px, 18px);       /* card title (h2) */
  --v2-row-h: clamp(32px, 0.4vw + 26px, 34px);         /* compact table row */
  --v2-cell-pad-x: clamp(6px, 0.15vw + 4px, 7px);       /* table cell padding, inline: fits 6 value columns at 1440 */
  --v2-group-h: 22px;                                  /* grouped table header row */
  /* Main chart, brushes included: the viewport under the shared header and the toolbar, 280 px to 42vh. */
  --v2-chart-h: clamp(280px, calc(100vh - 490px), 42vh);
  /* JEG-477: the "taller" toggle's height, at any width. Large screens also get a taller default (1680 x 960 rule below). */
  --v2-chart-h-expanded: clamp(320px, calc(100vh - 220px), 75vh);   /* the "taller" toggle, any width */
  /* Heatmap tint (Player values table): pale enough that ink keeps AA on every step. */
  --v2-heat-up-1: #F1F8F4; --v2-heat-up-2: #E3F2EA; --v2-heat-up-3: #D2EADF;
  --v2-heat-down-1: #FBF3F4; --v2-heat-down-2: #F7E6E9; --v2-heat-down-3: #F1D6DB;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --v2-canvas: #0E1714; --v2-surface: #15211D; --v2-ink: #E4EEEA; --v2-muted: #93A39E;
    --v2-border: #2A3833; --v2-action: #2FA57B; --v2-positive: #183329; --v2-negative: #E07A8A;
    --v2-older: #D9944E; --v2-nav: #0A110F; --v2-rank-tint: #1A2E26; --v2-rank-sub: #90A6A0; --v2-ddf: #F28C5B;
    --v2-hover: #1B2A25; --v2-hover-rank: #21382F; --v2-index-bg: #17253A; --v2-index-border: #2C4466; --v2-index-ink: #8DB4F0;
    --v2-action-ink: #06140F; --v2-action-strong: #5CCB9F; --v2-tint-border: #2C5A47; --v2-brush-fill: #1F4536;
    --v2-heat-up-1: #172720; --v2-heat-up-2: #1B3127; --v2-heat-up-3: #213B2F;
    --v2-heat-down-1: #261C20; --v2-heat-down-2: #302127; --v2-heat-down-3: #3A262D;
  }
}
:root[data-theme="dark"] {
  --v2-canvas: #0E1714; --v2-surface: #15211D; --v2-ink: #E4EEEA; --v2-muted: #93A39E;
  --v2-border: #2A3833; --v2-action: #2FA57B; --v2-positive: #183329; --v2-negative: #E07A8A;
  --v2-older: #D9944E; --v2-nav: #0A110F; --v2-rank-tint: #1A2E26; --v2-rank-sub: #90A6A0; --v2-ddf: #F28C5B;
    --v2-hover: #1B2A25; --v2-hover-rank: #21382F; --v2-index-bg: #17253A; --v2-index-border: #2C4466; --v2-index-ink: #8DB4F0;
    --v2-action-ink: #06140F; --v2-action-strong: #5CCB9F; --v2-tint-border: #2C5A47; --v2-brush-fill: #1F4536;
    --v2-heat-up-1: #172720; --v2-heat-up-2: #1B3127; --v2-heat-up-3: #213B2F;
    --v2-heat-down-1: #261C20; --v2-heat-down-2: #302127; --v2-heat-down-3: #3A262D;
}

body.v2 { margin: 0; background: var(--v2-canvas); color: var(--v2-ink); }
body.v2 > :not(.v2-app):not(script):not(.legacy-engine) { display: none !important; }

/* The engine keeps running but is never laid out or painted (page weight, 2026-10-08): its 16,000+
   nodes cost about 3 s of layout on a slowed phone. Its values are identical either way. */
.legacy-engine { display: none !important; }

.v2-app, .v2-app * { box-sizing: border-box; }
/* The off-screen engine's stylesheet targets bare elements; keep v2 on its own type. */
.v2-app table, .v2-app th, .v2-app td, .v2-app button, .v2-app input, .v2-app select, .v2-app label, .v2-app h1, .v2-app h2, .v2-app h3 {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: normal; text-transform: none;
}
.v2-app { font: 400 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--v2-ink); min-height: 100vh; }
.v2-app h1, .v2-app h2, .v2-app p { margin: 0; font-family: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
.v2-app button, .v2-app input, .v2-app select { font: inherit; color: inherit; }
.v2-app :focus-visible { outline: 2px solid var(--v2-focus); outline-offset: 2px; }
.v2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v2-wrap { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
.v2-meta { color: var(--v2-muted); font-size: 12px; }
.v2-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-muted); }

/* Nav */
.v2-nav { background: var(--v2-nav); color: #fff; }
.v2-nav-inner { max-width: 1440px; margin: 0 auto; padding: 0 48px; display: flex; align-items: center; gap: 32px; min-height: 64px; }
.v2-brand { color: #fff; text-decoration: none; font-size: 22px; font-weight: 700; white-space: nowrap; }
.v2-tabs { display: flex; gap: 4px; flex: 1 0 auto; overflow-x: auto; scrollbar-width: none; }
.v2-tab { color: rgba(255,255,255,.78); text-decoration: none; padding: 8px 16px; border-radius: var(--v2-radius-btn); white-space: nowrap; min-height: 36px; display: inline-flex; align-items: center; }
.v2-tab.is-active { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.v2-tab.is-soon { color: rgba(255,255,255,.45); cursor: not-allowed; }
.v2-tab.is-soon::after { content: "soon"; font-size: 10px; margin-left: 6px; padding: 1px 6px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; }
.v2-freshness { background: none; border: 0; color: rgba(255,255,255,.85); font-size: 12px; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; min-height: 44px; white-space: nowrap; }
/* JEG-675: with seven tabs the long "prior week" label squeezed the tab row, and Research slid under the freshness
   button. The tabs keep their width; the label gives way with an ellipsis. */
.v2-freshness { flex: 0 1 auto; min-width: 0; }
.v2-freshness #v2FreshnessLabel { overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) { .v2-nav-inner { gap: 24px; } .v2-tab { padding: 8px 12px; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .v2-nav-inner { padding: 0 24px; gap: 16px; } .v2-brand { font-size: 18px; } .v2-tab { padding: 8px 8px; }
}
.v2-dot { width: 8px; height: 8px; border-radius: 50%; background: #9BE3C1; display: inline-block; }
.v2-freshness.is-older .v2-dot { background: var(--v2-older); }

/* League bar */
.v2-league { background: var(--v2-surface); border-bottom: 1px solid var(--v2-border); }
.v2-league-inner { display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; }

/* Buttons and fields */
.v2-app .v2-btn { border: 1px solid var(--v2-border); background: var(--v2-surface); border-radius: var(--v2-radius-btn); padding: 10px 16px; min-height: 44px; cursor: pointer; font-weight: 600; }
.v2-app .v2-btn-primary { background: var(--v2-action); border-color: var(--v2-action); color: var(--v2-action-ink); padding: 10px 24px; }
.v2-btn-primary:hover { filter: brightness(1.08); }
.v2-link { background: none; border: 0; color: var(--v2-action); cursor: pointer; font-weight: 500; min-height: 44px; padding: 0 6px; }
.v2-select, .v2-field select, .v2-search input {
  border: 1px solid var(--v2-border); background: var(--v2-surface); border-radius: var(--v2-radius-btn);
  padding: 10px 14px; min-height: 44px; cursor: pointer; text-align: left;
}
.v2-select::after { content: " ⌄"; color: var(--v2-muted); }
.v2-select[aria-pressed]::after { content: ""; }
.v2-select[aria-pressed="true"] { background: var(--v2-positive); border-color: var(--v2-action); color: var(--v2-action); }
.v2-search input { cursor: text; width: 100%; }
.v2-field { display: inline-flex; align-items: center; }
.v2-field-rank { background: var(--v2-positive); border: 1px solid var(--v2-tint-border); border-radius: var(--v2-radius-btn); padding-left: 14px; color: var(--v2-action); }
.v2-field-rank select { border: 0; background: transparent; color: var(--v2-action); font-weight: 600; }
.v2-field-label { font-size: 13px; white-space: nowrap; }

/* Methods row */
.v2-methods { background: var(--v2-canvas); border-bottom: 1px solid var(--v2-border); padding: 12px 0 10px; }
.v2-methods-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v2-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.v2-source-chips { flex: 1; }
.v2-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--v2-border); background: var(--v2-surface); border-radius: 999px; padding: 5px 14px; font-size: 12px; min-height: 32px; cursor: pointer; white-space: nowrap; }
.v2-chip.is-on { background: var(--v2-positive); border-color: var(--v2-tint-border); color: var(--v2-action); }
.v2-chip.is-indexed.is-on { background: var(--v2-index-bg); border-color: var(--v2-index-border); color: var(--v2-index-ink); }
.v2-chip.is-older { border-color: var(--v2-older); color: var(--v2-older); }
.v2-chip[disabled] { opacity: .5; cursor: not-allowed; }
.v2-hint { color: var(--v2-muted); font-size: 11px; margin-top: 8px !important; }
.v2-sym { font-size: 11px; line-height: 1; }

/* League bar actions (JEG-498, revising JEG-462): Edit league is the primary button, Position weights the secondary one; no ↗ on in-page dialogs. */
.v2-league-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.v2-app .v2-btn-adjust { background: var(--v2-surface); border: 1px solid var(--v2-border); color: var(--v2-ink); font-weight: 600; min-height: 44px; padding: 8px 16px; }
.v2-app .v2-btn-adjust:hover { border-color: var(--v2-action); color: var(--v2-action-strong); }
@media (max-width: 767px) {
  .v2-league-actions { margin-left: 0; flex-basis: 100%; }
  .v2-league-actions .v2-btn { flex: 1 1 0; }
}

/* "Showing" bar (JEG-466 / JEG-474): one line, a legend that reads as a legend, one Customize control. */
.v2-methods-row { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.v2-showing { margin: 0; font-size: 13px; }
.v2-showing-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; flex: 1 1 320px; font-size: 12px; color: var(--v2-muted); }
.v2-showing-legend li { display: inline-flex; align-items: center; gap: 4px; }
.v2-methods-row #v2EditSources { margin-left: auto; }
.v2-wk { margin-left: 6px; }  /* the shared .v2-prior-badge, spaced inside a legend or row */
/* Customize panel: grouped by type, every group explained. */
.v2-cgroup { border-top: 1px solid var(--v2-border); padding: 12px 0 6px; }
.v2-cgroup-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.v2-cgroup-head h3 { margin: 0; font-size: 15px; font-weight: 700; display: inline; }
details.v2-cgroup > summary { cursor: pointer; min-height: 44px; }
.v2-cgroup > .v2-meta { margin: 2px 0 6px !important; }
.v2-crow { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--v2-border); cursor: pointer; }
.v2-crow input { width: 18px; height: 18px; accent-color: var(--v2-action); }
.v2-crow-name { flex: 1; }
.v2-crow.is-disabled { color: var(--v2-muted); cursor: not-allowed; }
.v2-app .v2-call { min-height: 32px; padding: 0 4px; font-size: 12px; position: relative; }
.v2-app .v2-call::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* DDF Value inputs inside Customize (JEG-466): a nested list under the DDF Value row. */
.v2-ddf-inputs { border: 0; margin: 4px 0 8px; padding: 0 0 0 28px; }
.v2-ddf-inputs legend { padding: 0; font-size: 12px; font-weight: 700; color: var(--v2-muted); }
.v2-ddf-inputs .v2-crow { min-height: 40px; }

/* Main */
.v2-main { padding-top: 28px; padding-bottom: 48px; }
.v2-title h1 { font-size: 34px; line-height: 1.15; font-weight: 800; }
.v2-title p { color: var(--v2-muted); margin-top: 6px; font-size: 15px; }
.v2-filters { display: flex; gap: 12px; margin: 24px 0 8px; flex-wrap: wrap; align-items: center; }
.v2-search { flex: 1 1 240px; max-width: 320px; }
.v2-filters .v2-link { margin-left: auto; }
.v2-filter-note { color: var(--v2-muted); font-size: 12px; margin-bottom: 8px !important; }

.v2-card { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-card); padding: 20px 24px; margin-top: 16px; }
.v2-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.v2-card-head h2 { font-size: 20px; font-weight: 700; }
.v2-card-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.v2-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--v2-muted); }
.v2-legend span { display: inline-flex; gap: 6px; align-items: center; }
.v2-legend svg { overflow: visible; }
.v2-seg { display: inline-flex; gap: 6px; }
.v2-seg button { border: 1px solid var(--v2-border); background: var(--v2-surface); border-radius: var(--v2-radius-btn); padding: 8px 16px; min-height: 40px; cursor: pointer; }
.v2-seg button.is-on { background: var(--v2-action); border-color: var(--v2-action); color: var(--v2-action-ink); font-weight: 600; }

.v2-chart { position: relative; height: 340px; margin-top: 8px; outline: none; }
.v2-chart-small { height: 220px; }
.v2-chart svg { display: block; width: 100%; height: 100%; }
.v2-chart .grid line { stroke: var(--v2-border); }
.v2-chart .axis text { fill: var(--v2-muted); font-size: 11px; }
.v2-chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.v2-chart .series.is-indexed { stroke-dasharray: 6 4; }
.v2-chart .series.is-vorp { stroke-dasharray: 1.5 4; stroke-width: 2.4; }
.v2-chart .series.is-older { opacity: .85; }
.v2-chart .series.is-ddf { stroke-width: 3.5; }
.v2-chart .crosshair { stroke: var(--v2-action); stroke-dasharray: 3 3; }
.v2-chart .hover-dot { stroke: var(--v2-surface); stroke-width: 2; }
.v2-chart .name-label { font-size: 10px; fill: var(--v2-muted); }

.v2-brush { margin-top: 4px; }
.v2-brush-track { position: relative; height: 44px; }
.v2-brush-track::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 16px; background: var(--v2-canvas); border: 1px solid var(--v2-border); border-radius: 4px; }
.v2-brush-fill { position: absolute; top: 14px; height: 16px; background: var(--v2-brush-fill); border: 1px solid var(--v2-action); border-radius: 4px; }
.v2-brush-track input[type=range] { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 44px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.v2-brush-track input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 14px; height: 30px; border-radius: 4px; background: var(--v2-action); border: 2px solid var(--v2-surface); cursor: ew-resize; }
.v2-brush-track input[type=range]::-moz-range-thumb { pointer-events: auto; width: 12px; height: 28px; border-radius: 4px; background: var(--v2-action); border: 2px solid var(--v2-surface); cursor: ew-resize; }
.v2-brush-track input[type=range]::-webkit-slider-runnable-track { background: none; }
.v2-brush-track input[type=range]::-moz-range-track { background: none; }

/* Table */
.v2-table-wrap { overflow-x: auto; margin-top: 12px; }
.v2-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.v2-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--v2-muted); padding: 10px 12px; border-bottom: 1px solid var(--v2-border); white-space: nowrap; background: var(--v2-surface); }
.v2-table th button { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; color: inherit; min-height: 32px; }
.v2-table th button::after { content: " ↕"; opacity: .5; }
.v2-table th[aria-sort="descending"] button::after { content: " ↓"; opacity: 1; }
.v2-table th[aria-sort="ascending"] button::after { content: " ↑"; opacity: 1; }
.v2-table td { padding: 12px; border-bottom: 1px solid var(--v2-border); vertical-align: top; white-space: nowrap; }
.v2-table tr { cursor: pointer; }
.v2-table tbody tr:hover td { background: var(--v2-hover); }
.v2-table tbody tr:hover td.is-rank { background: var(--v2-hover-rank); }
.v2-table .num { text-align: right; font-weight: 700; font-size: 15px; }
.v2-table th.num { text-align: right; }
.v2-table .is-rank { background: var(--v2-rank-tint); color: var(--v2-action); }
.v2-table th.is-rank { color: var(--v2-action); }
.v2-table .player { font-weight: 700; }
.v2-table .player-sub { display: none; font-weight: 400; font-size: 11px; color: var(--v2-muted); margin-top: 2px; }
.v2-table .missing { color: var(--v2-muted); font-weight: 400; }
.v2-table .delta { display: block; font-size: 11px; font-weight: 500; color: var(--v2-muted); }
.v2-table .delta.up { color: var(--v2-action); }
.v2-table .delta.down { color: var(--v2-negative); }
.v2-table .rank { color: var(--v2-muted); width: 40px; }
.v2-table-foot { display: flex; justify-content: center; margin-top: 12px; }
.v2-footnote { color: var(--v2-muted); font-size: 12px; margin-top: 20px !important; }
.v2-brandline { margin-top: 4px !important; font-weight: 600; }

/* Tooltip */
.v2-tip { position: fixed; z-index: 50; background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(20,43,37,.14); padding: 12px 14px; min-width: 220px; pointer-events: none; font-size: 13px; }
.v2-tip h3 { margin: 0 0 2px; font-size: 16px; }
.v2-tip .v2-meta { display: block; margin-bottom: 6px; }
.v2-tip .row { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-weight: 600; }
.v2-tip .row .val { margin-left: auto; font-variant-numeric: tabular-nums; }
.v2-tip .row .val .why { font-size: 11px; font-weight: 400; color: var(--v2-muted); }
.v2-tip .row.is-rank { color: var(--v2-action); }

/* Drawer and popover */
.v2-scrim { position: fixed; inset: 0; background: rgba(10,20,17,.35); z-index: 60; }
.v2-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--v2-surface); z-index: 61; box-shadow: -8px 0 32px rgba(0,0,0,.18); padding: 24px; overflow-y: auto; }
.v2-drawer h2 { font-size: 24px; font-weight: 800; }
.v2-drawer .close { position: absolute; top: 14px; right: 14px; }
.v2-drawer dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 20px 0; }
.v2-drawer dt { display: flex; gap: 8px; align-items: center; }
.v2-drawer dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.v2-drawer dd .missing { color: var(--v2-muted); font-weight: 400; }
.v2-drawer .v2-note { color: var(--v2-muted); font-size: 12px; }
.v2-popover { position: fixed; z-index: 62; background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-card); box-shadow: 0 12px 32px rgba(20,43,37,.18); padding: 18px 20px; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.v2-popover h2 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.v2-popover .group { margin-top: 14px; }
.v2-popover .group h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-muted); }
.v2-popover label.opt { display: flex; gap: 10px; align-items: center; min-height: 40px; cursor: pointer; }
.v2-popover label.opt.is-disabled { opacity: .5; cursor: not-allowed; }
.v2-popover .reason { font-size: 11px; color: var(--v2-muted); margin-left: auto; text-align: right; }
.v2-popover .reason.is-older { color: var(--v2-older); }
.v2-popover .row2 { display: flex; gap: 12px; margin-top: 12px; }
.v2-popover .row2 label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--v2-muted); }
.v2-popover input[type=number], .v2-popover select { border: 1px solid var(--v2-border); border-radius: var(--v2-radius-btn); padding: 10px 12px; min-height: 44px; background: var(--v2-surface); }
.v2-popover input[type=range] { width: 100%; accent-color: var(--v2-action); min-height: 44px; }
.v2-popover .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.v2-popover .weights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.v2-popover .weights div { border: 1px solid var(--v2-border); border-radius: var(--v2-radius-btn); padding: 8px 10px; }
.v2-popover .weights b { display: block; font-size: 16px; }

.v2-status { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--v2-ink); color: var(--v2-canvas); padding: 10px 18px; border-radius: 999px; font-size: 13px; z-index: 70; }
.v2-status[hidden] { display: none; }
.v2-status.is-error { background: var(--v2-negative); }

/* Trade targets (frames 03 / 04). Review fixes (JEG-456/458/459/461/464): both lists at once,
   side by side from 1280 px and stacked below; one compact filter row; the table fits the window
   from 1024 px without sideways scrolling (fluid padding and type, two-line headers). */
.v2-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: var(--v2-muted); cursor: pointer; }
.v2-check input { width: 18px; height: 18px; accent-color: var(--v2-action); }
#v2Targets.v2-main { padding-top: clamp(16px, 2vw, 28px); }
#v2Targets .v2-ttitle h1 { font-size: clamp(26px, 2.3vw, 34px); }
#v2Targets .v2-ttitle p { margin-top: 4px !important; }
.v2-tfilters { margin: 14px 0 0; gap: 8px 12px; }
.v2-tfilters .v2-search { flex: 1 1 160px; max-width: 280px; }
/* The pickers size to their longest option ("DDF Value, built from player projections only"), which pushed the
   Compare control onto a second filter row at 1440 and 1366. Cap them; the selected text is short (JEG-675). */
@media (min-width: 768px) { #v2Targets .v2-tfilters .v2-field-rank select { max-width: 200px; text-overflow: ellipsis; } }
.v2-tcompare { display: inline-flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.v2-tcaption { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--v2-muted); white-space: nowrap; }
.v2-tlists { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; align-items: start; }
.v2-tlist { margin-top: 14px; padding: 14px clamp(12px, 1.6vw, 24px) 12px; min-width: 0; }
.v2-tlist-head h2 { font-size: 18px; font-weight: 700; }
#v2TSellTitle > span { color: var(--v2-action); }
#v2TBuyTitle > span { color: var(--v2-negative); }
.v2-tlist-head .v2-meta { margin-top: 2px !important; }
.v2-tlist .v2-table-wrap { margin-top: 2px; padding-top: 4px; }
.v2-tlist-foot { display: flex; gap: 8px; margin-top: 8px; }
.v2-tlist-foot .v2-tmore { flex: 1 1 auto; }
.v2-tlist-foot .v2-tless { flex: 0 0 auto; }
.v2-tnote { margin-top: 12px !important; }

.v2-ttable th, .v2-ttable td { padding: 8px clamp(6px, .8vw, 12px); }
.v2-ttable th { vertical-align: bottom; white-space: normal; line-height: 1.25; }
.v2-ttable .th-line { display: inline-flex; align-items: center; gap: 2px; }
.v2-table .th-sub { display: block; font-size: 11px; font-weight: 400; color: var(--v2-muted); margin-top: 2px; }
.v2-ttable td.player { white-space: normal; }
.v2-ttable .player-sub { display: block; }
.v2-ttable .num { font-size: clamp(13px, 1.1vw, 15px); }
/* JEG-455: DDF Value's "from N sources" under our value. */
.v2-ttable td[data-ours] .t-count { display: block; font-size: 11px; font-weight: 400; color: var(--v2-muted); white-space: nowrap; }
.v2-tcards .vals .ours .t-count { font-weight: 400; color: var(--v2-muted); }
/* Low-confidence DDF Value (one source): symbol + label, note in the tooltip. */
.v2-lowconf { display: inline-block; margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--v2-older, var(--v2-muted)); white-space: nowrap; }
.v2-ttable td[data-ours] .v2-lowconf, .v2-table td .v2-lowconf, .v2-dmatrix td .v2-lowconf, .v2-dhero-value .v2-lowconf { display: block; margin-left: 0; }
/* Estimated value (VP-11, JEG-541): "≈ estimated", the engine's reason in the tooltip. */
.v2-estimated { display: inline-block; margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--v2-muted); white-space: nowrap; }
.v2-ttable td[data-ours] .v2-estimated, .v2-table td .v2-estimated, .v2-dmatrix td .v2-estimated, .v2-dhero-value .v2-estimated { display: block; margin-left: 0; }
.v2-ttable .t-detail .t-native { color: var(--v2-muted); font-weight: 400; }
/* JEG-504: market average beside our value; the difference is symbol + sign, never colour alone. */
.v2-ttable td.t-avg .t-count, .v2-ttable td.t-avg .t-equal { display: block; font-size: 11px; font-weight: 400; color: var(--v2-muted); white-space: nowrap; }
/* JEG-456: "median of 2 · 1 left out" may wrap, or the one row that has it widens the column and the 1024 table scrolls. */
.v2-ttable td.t-avg .t-count { white-space: normal; }
.v2-ttable td.t-avg .t-diff { display: inline; margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--v2-muted); white-space: nowrap; }
.v2-tcards .vals .avg .why { display: inline; font-weight: 400; color: var(--v2-muted); }
.v2-tcards .vals .avg .t-diff { font-weight: 600; }
.v2-ttable td.best { font-size: clamp(14px, 1.15vw, 16px); }
.v2-ttable td.best.up { color: var(--v2-action); }
.v2-ttable td.best.down { color: var(--v2-negative); }
.v2-ttable td.best .t-who { color: var(--v2-muted); white-space: normal; }
.t-dots { display: flex; gap: 2px; justify-content: flex-end; font-size: 9px; line-height: 1; vertical-align: middle; }
.t-dot.above { color: var(--v2-action); }
.t-dot.below { color: var(--v2-negative); }
.t-dot.level { color: var(--v2-muted); }
.v2-ttable td.t-expand, .v2-ttable th.t-expand { width: 44px; padding: 4px 0; vertical-align: middle; }
.v2-texpand { width: 44px; height: 44px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-btn); background: none; color: var(--v2-muted); cursor: pointer; font-size: 14px; }
.v2-texpand:hover, .v2-texpand[aria-expanded="true"] { border-color: var(--v2-tint-border); color: var(--v2-action); background: var(--v2-positive); }
.v2-ttable tr.t-detail { cursor: default; }
.v2-ttable tr.t-detail td { padding-top: 0; white-space: normal; background: var(--v2-hover); }
.v2-table .missing .why, .v2-tcards .missing .why { display: block; font-size: 11px; font-weight: 400; }
.v2-table .at-waiver { display: block; font-size: 11px; font-weight: 400; color: var(--v2-muted); }
.v2-tcards .at-waiver { color: var(--v2-muted); }
/* Two-column layout: a compact column set per card; each row opens its per-chart values. */
@media (min-width: 1024px) {
  .v2-tlists { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .v2-ttable .t-chart { display: none; }
}
/* The half-width card at 1024 to 1279 px is about 420 px of table: tighter cell padding keeps it from scrolling (JEG-456, JEG-675). */
@media (min-width: 1024px) and (max-width: 1279px) { .v2-ttable th, .v2-ttable td { padding-inline: 4px; } }
@media (max-width: 1023px) {
  .v2-ttable .t-expand, .v2-ttable tr.t-detail { display: none; }
  .v2-ttable th, .v2-ttable td { padding-inline: clamp(4px, .55vw, 8px); }
}

/* Shared: the prior-week badge (JEG-459) and the ⓘ "indexed" button (JEG-458). */
/* Source divergence chip (JEG-609): the same slot and size as the prior-week badge; amber for Check, green for Reviewed. */
.v2-div-chip { display: inline-flex; align-items: center; padding: 0 5px; border: 1px solid var(--v2-older); border-radius: 4px; background: var(--v2-surface); color: var(--v2-older); font-size: 11px; font-weight: 600; line-height: 1.45; white-space: nowrap; vertical-align: baseline; text-decoration: none; }
.v2-tdiv { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
/* Source links and the indexed-value math (JEG-457). */
.v2-srclink { color: inherit; text-decoration: underline; text-decoration-color: var(--v2-border); text-underline-offset: 2px; }
.v2-srclink:hover, .v2-srclink:focus-visible { text-decoration-color: currentColor; }
.v2-srclink-head { font-size: 11px; margin-left: 2px; color: var(--v2-muted); text-decoration: none; padding: 0 3px; }
.v2-srclink-open { font-size: 12px; margin-left: 8px; }
.has-math { cursor: help; text-decoration: underline dotted var(--v2-muted); text-underline-offset: 3px; }
.has-math:focus-visible { outline: 2px solid var(--v2-focus); outline-offset: 2px; }
.v2-mathtip { min-width: 260px; max-width: min(360px, calc(100vw - 16px)); }
.v2-mathtip .val.is-published { font-size: 16px; color: var(--v2-action-strong); }
/* Our names (JEG-490): */ the info button beside "On the chart", the primaries on How values work. */
.v2-showing .v2-info { vertical-align: middle; }
.v2-how-names { margin-top: 16px; }
.v2-how-primaries { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; max-width: 70ch; }
.v2-how-primaries b { margin-right: 6px; }
.v2-how-sub { font-size: 14px; color: var(--v2-muted); margin: 20px 0 0; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.v2-info-text p { margin: 0 0 6px; }
/* Position weights: the bench-share readout; Your league: the Advanced disclosure (JEG-537). */
.v2-pbenchread { margin: 4px 0 8px; }
.v2-pbig-text { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.v2-padv { margin-top: 16px; border-top: 1px solid var(--v2-border); padding-top: 8px; }
.v2-padv > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.v2-padv .v2-check { min-height: 44px; display: flex; align-items: center; gap: 8px; }
/* Compare a trade: the rule-based deal read (JEG-487). */
.v2-deal { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--v2-border); }
.v2-deal-label { font-size: 12px; color: var(--v2-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
.v2-deal-read { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.v2-deal-text { margin: 0 0 4px; font-size: 13px; }
.v2-deal-more { margin-top: 4px; font-size: 13px; }
.v2-deal-more summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.v2-deal-nets { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.v2-deal-nets li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.v2-deal-name { color: var(--v2-muted); font-size: 13px; }
.v2-deal-net { font-variant-numeric: tabular-nums; }
.v2-deal-net[data-side="win"] { color: var(--v2-action-strong); }
.v2-deal-net[data-side="lose"] { color: var(--v2-negative); }
.v2-deal-def { flex-basis: 100%; max-width: 46ch; }
.v2-deal-grid { border-collapse: separate; border-spacing: 4px; width: 100%; max-width: 640px; font-size: 12px; table-layout: fixed; }
.v2-deal-grid th { font-weight: 600; color: var(--v2-muted); text-align: left; padding: 2px 4px; }
.v2-deal-grid td { border: 1px solid var(--v2-border); border-radius: 6px; padding: 6px; background: var(--v2-surface); vertical-align: top; }
.v2-deal-grid td.is-current { border: 2px solid var(--v2-action); background: var(--v2-positive); font-weight: 700; }
.v2-div-chip.is-reviewed { border-color: var(--v2-tint-border); color: var(--v2-action-strong); }
.v2-div-chip.is-excluded { border-color: var(--v2-older); color: var(--v2-older); opacity: 0.7; }
a.v2-div-chip:hover { text-decoration: underline; }
.v2-prior-badge { display: inline-flex; align-items: center; padding: 0 5px; border: 1px solid var(--v2-older); border-radius: 4px; background: var(--v2-surface); color: var(--v2-older); font-size: 11px; font-weight: 600; line-height: 1.45; white-space: nowrap; vertical-align: baseline; }
.v2-info { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: -10px -4px -10px -10px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--v2-muted); cursor: pointer; font-size: 15px; font-weight: 400; line-height: 1; }
.v2-info:hover, .v2-info[aria-expanded="true"] { color: var(--v2-action); }
.v2-tcompare .v2-info { margin: 0 -8px; }
/* Not a sort button: no sort arrow, and its own 44 px box is the hit area. */
.v2-table th .v2-info::after, .v2-table th .v2-info::before { content: none; }
.v2-popover.v2-info-pop { width: min(360px, calc(100vw - 32px)); }
.v2-popover.v2-info-pop h2 { font-size: 16px; }
.v2-info-text { font-size: 13px; margin-top: 6px !important; }
.v2-info-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.v2-info-foot .v2-link { display: inline-flex; align-items: center; text-decoration: none; padding: 0; }

.v2-tcards { display: none; list-style: none; margin: 8px 0 0; padding: 0; }
.v2-tcards li { border-top: 1px solid var(--v2-border); padding: 12px 0; cursor: pointer; }
.v2-tcards .top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.v2-tcards .top b { display: block; font-size: 15px; }
.v2-tcards .big { text-align: right; font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2-tcards .big.up { color: var(--v2-action); }
.v2-tcards .big.down { color: var(--v2-negative); }
.v2-tcards .big .v2-meta { display: block; font-weight: 500; }
.v2-tcards .vals, .v2-ttable .t-detail .vals { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.v2-tcards .vals > span, .v2-ttable .t-detail .vals > span { display: inline-flex; gap: 4px; align-items: baseline; }
.v2-tcards .vals .ours { font-weight: 700; color: var(--v2-action); }
.v2-tcards .vals .val, .v2-ttable .t-detail .val { font-weight: 700; }
.v2-tcards .gap, .v2-ttable .t-detail .gap { display: inline; font-size: 12px; font-weight: 600; color: var(--v2-muted); }
.v2-tcards .gap.up, .v2-ttable .t-detail .gap.up { color: var(--v2-action); }
.v2-tcards .gap.down, .v2-ttable .t-detail .gap.down { color: var(--v2-negative); }
.v2-tcards .missing, .v2-ttable .t-detail .missing { color: var(--v2-muted); display: inline-flex; gap: 4px; }
.v2-tcards .missing .why, .v2-ttable .t-detail .missing .why { display: inline; }
.v2-ttable .t-detail .at-waiver { display: inline; }
.v2-t-empty { margin-top: 12px !important; }
/* GAP-025: ESPN projects 0 (injured/out). Label + symbol, not color alone. */
.v2-espn-zero { display: inline-flex; gap: 4px; align-items: center; margin-left: 8px; padding: 1px 6px; border: 1px solid var(--v2-negative); border-radius: 4px; color: var(--v2-negative); background: var(--v2-surface); font-size: 11px; font-weight: 700; line-height: 1.4; white-space: nowrap; vertical-align: middle; }
.v2-espn-zero-note { font-size: 12px; color: var(--v2-muted); margin: 12px 0 0; }
.v2-espn-zero-note .v2-espn-zero { margin-left: 0; margin-right: 4px; }
@media (max-width: 767px) {
  .v2-t-desktop { display: none; }
  .v2-tcards { display: block; }
  #v2Targets .v2-filters .v2-field-rank, #v2Targets .v2-tcompare { flex-basis: 100%; }
  #v2Targets .v2-field-rank { min-width: 0; max-width: 100%; }
  #v2Targets .v2-tcompare .v2-field-rank { flex: 1 1 100%; }
  #v2Targets .v2-field-rank select { flex: 1 1 0; width: 0; min-width: 0; }
  #v2Targets .v2-field select { width: 100%; min-width: 0; }
  .v2-tcaption { white-space: normal; }
  .v2-popover.v2-info-pop { left: 16px !important; top: 50% !important; transform: translateY(-50%); width: calc(100vw - 32px); height: auto; max-height: calc(100vh - 32px); border-radius: var(--v2-radius-card); }
}

/* Mobile 390 (frame 02): 16px margins, stacked controls, full-screen settings. */
@media (max-width: 767px) {
  .v2-wrap, .v2-nav-inner { padding: 0 16px; }
  .v2-nav-inner { flex-wrap: wrap; gap: 8px 16px; padding-top: 10px; }
  .v2-brand { font-size: 18px; }
  .v2-tabs { order: 3; flex-basis: 100%; }
  .v2-tab { padding: 8px 10px; font-size: 13px; }
  .v2-freshness { margin-left: auto; }
  .v2-league-inner { gap: 8px 12px; padding: 10px 16px; }
  .v2-title h1 { font-size: 28px; }
  .v2-search { max-width: none; flex-basis: 100%; }
  .v2-filters > * { flex: 1 1 calc(50% - 6px); }
  .v2-filters .v2-link { margin-left: 0; }
  .v2-card { padding: 16px; }
  .v2-card-tools { align-items: flex-start; }
  .v2-chart { height: 260px; }
  .v2-table td:nth-child(2), .v2-table th:nth-child(2) { position: sticky; left: 0; background: var(--v2-surface); z-index: 1; box-shadow: 1px 0 0 var(--v2-border); }
  .v2-table .rank, .v2-table .col-meta { display: none; }
  .v2-table .player-sub { display: block; }
  .v2-table td.player { white-space: normal; min-width: 132px; }
  .v2-popover { left: 0 !important; top: 0 !important; width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
}

/* Compare a trade (frames 07 / 08): two sides, then one row per source. */
.v2-trade-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.v2-trade-side { margin-top: 0; position: relative; }
.v2-trade-side h2 { font-size: 20px; font-weight: 700; margin-bottom: 12px !important; }
.v2-trade-side .v2-search { display: block; max-width: none; }
.v2-trade-results { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; left: 24px; right: 24px; z-index: 20; background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-btn); box-shadow: 0 8px 24px rgba(20, 43, 37, .12); }
.v2-trade-results button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 10px 12px; min-height: 44px; cursor: pointer; }
.v2-trade-results button:hover, .v2-trade-results button:focus-visible { background: var(--v2-positive); }
.v2-trade-results .is-empty { padding: 10px 12px; }
.v2-trade-players { list-style: none; margin: 12px 0 0; padding: 0; }
.v2-trade-players li { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--v2-border); padding: 8px 0; }
.v2-trade-players li b { display: block; }
.v2-trade-players li.is-empty { display: block; padding: 12px 0; }
.v2-ctable tr { cursor: default; }
.v2-ctable td.player { white-space: normal; }
.v2-ctable td.player .th-sub { display: block; font-size: 11px; font-weight: 400; color: var(--v2-muted); }
/* JEG-467: the DDF Value row decides the verdict: first, a brand-orange edge, bold name and a worded tag. */
.v2-ctable tr.is-verdict td.player { font-weight: 700; box-shadow: inset 4px 0 0 var(--v2-ddf); padding-left: 12px; }
.v2-ctable .v2-cverdict-tag { display: block; font-size: 11px; font-weight: 700; color: var(--v2-ddf); }
/* JEG-466: the shared series picker keeps a 44 px target on every tab. */
.v2-app select.v2-series-picker { min-height: 44px; }
#v2Compare .v2-field-rank select.v2-series-picker { min-height: 44px; }
.v2-ctable td[data-col="net"] .missing .why { display: block; font-size: 11px; font-weight: 400; white-space: normal; max-width: 260px; margin-left: auto; }
@media (max-width: 767px) {
  .v2-trade-sides { grid-template-columns: 1fr; }
  .v2-trade-results { left: 16px; right: 16px; }
  /* Each source becomes a card: name on top, then give / get / net with their labels. */
  .v2-ctable thead { display: none; }
  .v2-ctable, .v2-ctable tbody { display: block; }
  .v2-ctable tr { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--v2-border); padding: 10px 0; }
  .v2-ctable td { border: 0; padding: 4px 0; white-space: normal; }
  .v2-ctable td:nth-child(2) { position: static; box-shadow: none; background: transparent; }
  .v2-ctable td.player { grid-column: 1 / -1; min-width: 0; }
  .v2-ctable td.num { text-align: left; }
  .v2-ctable td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 500; color: var(--v2-muted); }
  .v2-ctable tr.is-rank td { background: transparent; }
  .v2-ctable td[data-col="net"] .missing .why { margin-left: 0; }
}
/* The ranking source keeps its tint, but the net's color comes from its sign, not the tint. */
.v2-ctable tr.is-rank { color: var(--v2-ink); }

/* How values work (frames 15 / 16): the three views side by side, stacked below 768 px. */
.v2-how-league p { margin-top: 8px !important; }
.v2-how-views { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.v2-how-views > li { margin-top: 0; display: flex; flex-direction: column; gap: 10px; }
.v2-how-views h2 { font-size: 20px; font-weight: 700; }
.v2-how-views h3 { font-size: 12px; font-weight: 600; color: var(--v2-muted); margin: 6px 0 0; text-transform: uppercase; letter-spacing: .06em; }
.v2-how-step { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; background: var(--v2-positive); color: var(--v2-action); font-weight: 700; }
.v2-how-line { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: var(--v2-muted); }
.v2-how-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.v2-how-sources li[data-available="false"] { color: var(--v2-muted); }
.v2-how-sources .is-older { color: var(--v2-older); }
.v2-how-rules { margin: 12px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.v2-how-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px !important; }
.v2-how-links .v2-link { display: inline-flex; align-items: center; text-decoration: none; padding: 0; }
@media (max-width: 767px) {
  .v2-how-views { grid-template-columns: 1fr; }
}

/* Frame 18 states: loading, failed, and filters that leave no player. */
.v2-state-wrap { padding-top: 28px; }
.v2-state-wrap[hidden] { display: none; }
.v2-state { display: flex; gap: 16px; align-items: flex-start; margin-top: 0; }
.v2-state h2 { font-size: 20px; font-weight: 700; }
.v2-state .v2-meta { margin-top: 6px !important; font-size: 14px; }
.v2-state .v2-btn { margin-top: 16px; }
.v2-state-sym { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--v2-positive); color: var(--v2-action); }
.v2-state[data-state="loading"] .v2-state-sym { animation: v2-spin 1.2s linear infinite; }
.v2-state[data-state="failed"] { border-color: var(--v2-negative); }
.v2-state[data-state="failed"] .v2-state-sym { background: var(--v2-negative); color: #fff; }
@keyframes v2-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .v2-state[data-state="loading"] .v2-state-sym { animation: none; } }
.v2-empty { padding: 32px 0; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.v2-empty[hidden], .v2-brush[hidden], .v2-chart[hidden], .v2-card[hidden] { display: none; }

/* Player detail: right-hand drawer (frame 13), full screen below 768 px (frame 14). */
.v2-dhead { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--v2-border); }
.v2-dhead .v2-meta { font-size: 13px; margin-top: 4px !important; }
.v2-app .v2-drawer .close { position: static; flex: none; width: 44px; padding: 0; font-size: 16px; }
.v2-dhero { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--v2-positive); border: 1px solid var(--v2-tint-border); border-radius: var(--v2-radius-card); padding: 16px; margin-top: 16px; }
.v2-dhero .v2-eyebrow { color: var(--v2-action); }
.v2-app .v2-dhero-value { font-size: 40px; font-weight: 800; line-height: 1.1; color: var(--v2-action); font-variant-numeric: tabular-nums; margin-top: 4px !important; }
.v2-dhero-value .missing { font-size: 20px; color: var(--v2-muted); }
.v2-dhero-value .missing .why { display: block; font-size: 12px; font-weight: 400; }
.v2-dhero-range p:last-child { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 8px !important; }
.v2-dsection { margin-top: 20px; }
.v2-dsection h3 { margin: 0; font-size: 18px; font-weight: 700; }
.v2-dsection > p { margin-top: 6px !important; }
.v2-dmatrix-wrap { overflow-x: auto; margin-top: 10px; }
.v2-dmatrix { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.v2-dmatrix th, .v2-dmatrix td { padding: 10px 8px; border-bottom: 1px solid var(--v2-border); text-align: left; vertical-align: top; }
.v2-dmatrix thead th { font-size: 12px; font-weight: 600; color: var(--v2-muted); white-space: nowrap; }
.v2-dmatrix th.player { font-weight: 700; min-width: 128px; }
.v2-dmatrix th.player.is-older { color: var(--v2-older); }
.v2-dmatrix .th-sub { display: block; font-size: 11px; font-weight: 400; color: var(--v2-muted); }
.v2-dmatrix td.num { font-weight: 700; white-space: nowrap; }
.v2-dmatrix .missing { color: var(--v2-muted); font-weight: 400; }
.v2-dmatrix .missing .why { display: block; font-size: 10px; }
.v2-dmatrix .v2-dadd { padding: 0; min-height: 32px; font-size: 12px; position: relative; }
.v2-dmatrix .v2-dadd::after { content: ""; position: absolute; inset: 50% 0 auto; height: 44px; transform: translateY(-50%); }
.v2-dmatrix .v2-dadd.is-older { color: var(--v2-older); }
.v2-dnews { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v2-dnews a { color: var(--v2-action); }
.v2-dmenu { display: flex; gap: 8px; flex-basis: 100%; }
.v2-dmenu[hidden] { display: none; }
.v2-dmenu .v2-btn { flex: 1; }
.v2-app .v2-btn-soft { background: var(--v2-positive); border-color: var(--v2-action); color: var(--v2-action); }
@media (max-width: 767px) {
  .v2-drawer { inset: 0; width: 100vw; height: 100vh; max-height: none; border-radius: 0; padding: 16px; box-shadow: none; }
  .v2-drawer h2 { font-size: 22px; }
}

/* Player detail → Compare a trade. */
.v2-drawer-trade { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.v2-drawer-trade .v2-btn { flex: 1 1 160px; }
.v2-drawer-trade .v2-link { display: inline-flex; align-items: center; text-decoration: none; }
.v2-trade-players .v2-trade-name { display: block; background: none; border: 0; padding: 0; font-weight: 700; cursor: pointer; text-align: left; min-height: 24px; text-decoration: underline; text-decoration-color: var(--v2-border); text-underline-offset: 3px; }

/* Below 768 px every tab stays on screen: the tabs wrap instead of scrolling sideways. */
@media (max-width: 767px) {
  .v2-tabs { flex-wrap: wrap; overflow: visible; gap: 4px; padding-bottom: 8px; }
  .v2-tab { min-height: 44px; }
}

/* UX pass (2026-10-08): touch targets, tablet navigation. Frame 17: every action has a 44 × 44 px
   hit area. Compact chips and sort buttons keep their look; an invisible box grows the hit area. */
.v2-tab { min-height: 44px; }
.v2-chip, .v2-table th button { position: relative; }
.v2-chip::after, .v2-table th button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.v2-trade-players .v2-trade-name { min-height: 44px; display: inline-flex; align-items: center; }
.v2-brand { min-height: 44px; display: inline-flex; align-items: center; }
/* Tablet (768–1023 px): the tabs move to their own row instead of running off screen. */
@media (min-width: 768px) and (max-width: 1023px) {
  .v2-nav-inner { flex-wrap: wrap; gap: 0 24px; padding-top: 8px; }
  .v2-tabs { order: 3; flex-basis: 100%; flex-wrap: wrap; overflow: visible; padding-bottom: 8px; }
  .v2-freshness { margin-left: auto; }
}
.v2-chip-row { row-gap: 12px; }
.v2-seg button { min-height: 44px; }
/* Tablet: the source chips get their own full row instead of a one-chip-wide column. */
@media (max-width: 1023px) {
  .v2-source-chips { flex-basis: 100%; order: 2; }
  .v2-methods-row #v2EditSources { order: 3; }
}

/* Risers & fallers (frames 05 / 06): two cards side by side, stacked below 768 px.
   Each row: name, before → after, signed Δ with ▲/▼, and a bar on one shared scale. */
.v2-rmeta { margin-top: 4px !important; }
.v2-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.v2-movers .v2-card { margin-top: 12px; }
.v2-mhead { font-size: 22px; font-weight: 800; }
.v2-mhead.up { color: var(--v2-action); }
.v2-mhead.down { color: var(--v2-negative); }
.v2-mlist { list-style: none; margin: 12px 0 0; padding: 0; }
.v2-mlist li { border-top: 1px solid var(--v2-border); padding: 12px 0; cursor: pointer; }
.v2-mlist li:hover { background: var(--v2-hover); }
.v2-mlist .m-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.v2-mlist .m-top b { display: block; font-size: 15px; }
.v2-mlist .big { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2-mlist .big.up { color: var(--v2-action); }
.v2-mlist .big.down { color: var(--v2-negative); }
.v2-mlist .m-bottom { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.v2-mlist .m-vals { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 96px; }
.v2-mlist .m-bar { flex: 1; max-width: 300px; height: 6px; border-radius: 3px; background: var(--v2-border); overflow: hidden; }
.v2-mlist .m-bar > span { display: block; height: 100%; border-radius: 3px; }
.v2-mlist .m-bar.up > span { background: var(--v2-action); }
.v2-mlist .m-bar.down > span { background: var(--v2-negative); }
@media (max-width: 767px) {
  .v2-movers { grid-template-columns: 1fr; gap: 0; }
  #v2Risers .v2-filters .v2-field-rank, #v2Risers .v2-filters .v2-field { flex-basis: 100%; }
  #v2Risers .v2-field-rank { min-width: 0; max-width: 100%; }
  #v2Risers .v2-field-rank select { flex: 1 1 0; width: 0; min-width: 0; }
  #v2Risers .v2-field select { width: 100%; min-width: 0; }
}

/* Compare a trade: share. */
.v2-ctools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.v2-cshare { margin-top: 8px !important; word-break: break-all; color: var(--v2-action); }

/* Compare a trade (frames 07 / 08 / 24): values per player, side totals, story, bars, breakdown. */
.v2-ctoolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.v2-trade-players li { display: grid; grid-template-columns: 1fr auto 44px; }
.v2-trade-value { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; text-align: right; }
.v2-trade-value .missing, .v2-side-total .missing { color: var(--v2-muted); font-weight: 400; font-size: 13px; }
.v2-trade-value .missing .why, .v2-side-total .missing .why { display: block; font-size: 11px; }
.v2-remove { min-width: 44px; font-size: 16px; color: var(--v2-muted); }
.v2-side-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--v2-border); margin-top: 4px !important; padding-top: 14px; }
.v2-side-total[hidden] { display: none; }
.v2-side-total b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.v2-trade-results button { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.v2-trade-results button:disabled { cursor: default; opacity: .75; }
.v2-trade-results button:disabled:hover { background: none; }
.v2-added { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--v2-action); background: var(--v2-positive); border-radius: 999px; padding: 2px 10px; }
.v2-cstory { border-left: 4px solid var(--v2-action); }
.v2-cstory[data-story="split"], .v2-cstory[data-story="contrast"] { border-left-color: var(--v2-older); }
.v2-cstory h2 { font-size: 20px; font-weight: 700; }
.v2-cstory p { margin-top: 6px !important; color: var(--v2-muted); }
.v2-ctable th.bar { text-align: center; }
.v2-ctable td.bar { width: 32%; vertical-align: middle; }
.v2-dbar { position: relative; display: block; height: 8px; }
.v2-dbar::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; border-left: 1px solid var(--v2-muted); }
.v2-dbar-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--v2-muted); }
.v2-dbar-fill.up { background: var(--v2-action); }
.v2-dbar-fill.down { background: var(--v2-negative); }
.v2-ctable td[data-col="net"] .delta.up, .v2-ctable td[data-col="net"] .delta.down { font-weight: 600; }
.v2-cexpand { display: block; padding: 0; min-height: 32px; font-size: 12px; position: relative; }
.v2-cexpand::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.v2-ctable tr.v2-cbreak td { background: var(--v2-canvas); white-space: normal; }
.v2-cbreak-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v2-cbreak-grid p { margin: 2px 0 0 !important; }
.v2-cbreak-grid .missing { color: var(--v2-muted); font-weight: 400; }
.v2-cbreak-total { font-weight: 700; border-top: 1px solid var(--v2-border); padding-top: 6px; margin-top: 6px !important; }
.v2-cbreak-net { font-weight: 700; font-size: 16px; margin-top: 10px !important; }
.v2-cbreak-net.up { color: var(--v2-action); }
.v2-cbreak-net.down { color: var(--v2-negative); }
@media (max-width: 767px) {
  .v2-ctoolbar .v2-field-rank { flex-basis: 100%; min-width: 0; }
  .v2-ctoolbar .v2-field-rank select { flex: 1 1 0; width: 0; min-width: 0; }
  .v2-ctable td.bar { grid-column: 1 / -1; width: auto; padding: 8px 0; order: 5; }
  .v2-ctable td.bar[data-label]::before { content: none; }
  .v2-ctable tr.v2-cbreak { display: block; }
  .v2-ctable tr.v2-cbreak td { display: block; }
  .v2-cbreak-grid { grid-template-columns: 1fr; }
}
.v2-trade-players li > div > .v2-meta { display: block; }
.v2-app .v2-cexpand { color: var(--v2-action); font-weight: 500; }

/* How values work (frames 15 / 16): method pills, league card, evidence. */
.v2-narrow { display: none; }
@media (max-width: 767px) { .v2-wide { display: none; } .v2-narrow { display: inline; } }
.v2-pill { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--v2-positive); color: var(--v2-action); }
.v2-pill.is-indexed { background: var(--v2-index-bg); color: var(--v2-index-ink); }
.v2-pill.is-vorp { background: var(--v2-canvas); color: var(--v2-muted); border: 1px solid var(--v2-border); }
.v2-how-league h2 { font-size: 22px; font-weight: 700; }
.v2-how-league .v2-btn { margin-top: 14px; }
.v2-how-evidence { margin-top: 28px; }
.v2-how-evidence h2 { font-size: 24px; font-weight: 800; }

/* Frame 18 states: skeleton while loading, notices, per-filter clear actions. */
.v2-skel { display: flex; flex-direction: column; gap: 12px; }
.v2-state[data-state="failed"] ~ .v2-skel { display: none; }
.v2-skel-bar { display: block; height: 14px; border-radius: 4px; background: var(--v2-border); }
.v2-skel-bar.is-title { width: 40%; height: 20px; }
.v2-skel-chart { display: block; height: 220px; border-radius: 8px; background: linear-gradient(180deg, var(--v2-canvas), var(--v2-border)); }
@media (prefers-reduced-motion: no-preference) { .v2-skel > span { animation: v2-pulse 1.4s ease-in-out infinite; } }
@keyframes v2-pulse { 50% { opacity: .55; } }
.v2-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid var(--v2-older); background: var(--v2-surface); border-radius: var(--v2-radius-card); padding: 10px 16px; margin-top: 8px; }
.v2-notice[hidden] { display: none; }
.v2-notice p::before { content: "! "; font-weight: 800; color: var(--v2-older); }
.v2-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.v2-empty-actions [hidden] { display: none; }

/* Below 768 px the tabs use short labels on one row (frames 02 / 04 / 06 / 08 / 16). */
@media (max-width: 767px) {
  .v2-tabs { flex-wrap: nowrap; justify-content: space-between; gap: 2px; }
  /* 7 px side padding leaves slack in the 358 px row, so the shortest tab can keep a 44 px hit area (JEG-607). */
  /* Seven tabs since Research (JEG-543): 12 px type and 2 px padding keep the row inside 358 px even in a
     wide fallback face (DejaVu Sans, which hosts without Inter use); at 13 px the row ran 6 to 15 px over (JEG-675). */
  .v2-tab { padding: 8px 2px; min-width: 44px; flex: 1 1 auto; justify-content: center; font-size: 12px; }
  .v2-tab .v2-tab-full { display: none; }
  .v2-tab::before { content: attr(data-short); }
}

/* Overlay panels (frames 09–12, 20, 21): centered over a scrim; full screen below 768 px. */
.v2-popover.is-panel { left: 50% !important; top: 40px !important; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 80px); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.v2-popover.is-panel[hidden] { display: none; }
.v2-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 24px 14px; border-bottom: 1px solid var(--v2-border); }
.v2-popover .v2-panel-head h2 { font-size: 24px; font-weight: 800; margin: 0; }
.v2-panel-head .v2-meta { margin-top: 4px !important; font-size: 13px; }
.v2-app .v2-panel-close { width: 44px; padding: 0; flex: none; font-size: 16px; }
.v2-panel-body { padding: 8px 24px 16px; overflow-y: auto; flex: 1; }
.v2-panel-body .v2-eyebrow { margin: 18px 0 8px; display: block; }
.v2-popover .v2-panel-foot { margin: 0; padding: 14px 24px; border-top: 1px solid var(--v2-border); background: var(--v2-surface); }
.v2-panel-foot .v2-preset, .v2-panel-foot .v2-btn-soft { margin-right: auto; }
.v2-pseg { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-pseg button { flex: 1 1 0; min-width: 88px; min-height: 44px; border: 1px solid var(--v2-border); background: var(--v2-surface); border-radius: var(--v2-radius-btn); cursor: pointer; padding: 8px 12px; }
.v2-pseg button.is-on { background: var(--v2-positive); border-color: var(--v2-action); color: var(--v2-action); font-weight: 700; }
.v2-psummary { display: flex; flex-direction: column; gap: 2px; background: var(--v2-positive); border: 1px solid var(--v2-tint-border); border-radius: var(--v2-radius-btn); padding: 12px 14px; margin-top: 10px; color: var(--v2-action); }
.v2-pblock { border-bottom: 1px solid var(--v2-border); padding: 14px 0; }
.v2-pblock-top { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: baseline; }
.v2-pblock-top h3 { margin: 0; font-size: 16px; font-weight: 700; }
.v2-pblock-top .v2-meta:last-child { grid-column: 1 / -1; }
.v2-pweek.is-older { color: var(--v2-older); }
.v2-ppairs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.v2-ppair { min-width: 120px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-btn); background: var(--v2-surface); cursor: pointer; font-weight: 600; text-align: left; }
.v2-ppair.is-on { background: var(--v2-action); border-color: var(--v2-action); color: var(--v2-action-ink); }
.v2-ppair:disabled { background: var(--v2-canvas); color: var(--v2-muted); cursor: not-allowed; font-weight: 400; }
.v2-polder { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: var(--v2-radius-btn); border: 1px solid var(--v2-older); cursor: pointer; }
.v2-polder input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--v2-action); }
.v2-polder b { color: var(--v2-older); }
.v2-perror { color: var(--v2-negative) !important; font-weight: 600; margin-top: 8px !important; }
.v2-perror[hidden] { display: none; }
.v2-pstep { display: flex; justify-content: space-between; align-items: center; min-height: 52px; border-bottom: 1px solid var(--v2-border); }
.v2-stepper { display: inline-flex; align-items: center; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-btn); }
.v2-stepper button { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; font-size: 18px; color: var(--v2-ink); }
.v2-stepper button:disabled { color: var(--v2-border); cursor: not-allowed; }
.v2-stepper output { min-width: 40px; text-align: center; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.v2-pbench { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.v2-pbench label { display: flex; flex-direction: column; gap: 2px; }
.v2-pbench b { font-size: 18px; }
.v2-pbig { font-size: 28px; font-weight: 800; color: var(--v2-action); font-variant-numeric: tabular-nums; }
.v2-psplit { display: flex; flex-direction: column; gap: 2px; background: var(--v2-positive); border-radius: var(--v2-radius-btn); padding: 12px 14px; margin-top: 12px; color: var(--v2-action); }
.v2-psplit b { font-size: 18px; }
.v2-pshare { display: grid; grid-template-columns: 40px 1fr 64px; gap: 12px; align-items: center; min-height: 40px; }
.v2-pshare > span:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.v2-pshare-bar { height: 6px; background: var(--v2-border); border-radius: 3px; overflow: hidden; }
.v2-pshare-bar > span { display: block; height: 100%; background: var(--v2-action); }
.v2-pbanner { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--v2-older); background: var(--v2-surface); border-radius: var(--v2-radius-btn); padding: 12px 14px; margin-top: 10px; }
.v2-pbanner b { color: var(--v2-older); }
.v2-ptable-wrap { overflow-x: auto; }
.v2-ptable { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.v2-ptable th, .v2-ptable td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--v2-border); vertical-align: top; }
.v2-ptable thead th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-muted); }
.v2-ptable .th-sub { display: block; font-size: 11px; font-weight: 400; color: var(--v2-muted); }
.v2-ptable .is-ok { color: var(--v2-action); }
.v2-ptable .is-older { color: var(--v2-older); }
.v2-ptable .is-bad { color: var(--v2-negative); }
.v2-ptable .v2-link { padding: 0; min-height: 32px; }
.v2-pcheck { display: flex; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-btn); padding: 0 12px; margin-top: 8px; color: var(--v2-ink); }
.v2-dual { position: relative; height: 44px; margin-top: 12px; }
.v2-dual::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 4px; border-radius: 2px; background: var(--v2-border); }
.v2-dual input[type=range] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; min-height: 44px; }
.v2-dual input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--v2-surface); border: 2px solid var(--v2-action); cursor: ew-resize; }
.v2-dual input[type=range]::-moz-range-thumb { pointer-events: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--v2-surface); border: 2px solid var(--v2-action); cursor: ew-resize; }
@media (max-width: 767px) {
  .v2-popover.is-panel { transform: none; width: 100vw; height: 100vh; max-height: none; top: 0 !important; left: 0 !important; border-radius: 0; }
  .v2-panel-head, .v2-panel-body, .v2-popover .v2-panel-foot { padding-left: 16px; padding-right: 16px; }
  .v2-pseg button { min-width: 0; }
}

/* Rank navigator (frame 24): overview line under the handles. Exact ranks moved to More (JEG-475). */
.v2-brush-overview { position: absolute; left: 0; right: 0; top: 14px; width: 100%; height: 16px; overflow: visible; }
.v2-brush-overview .overview { fill: none; stroke-width: 1.5; opacity: .8; }
.v2-popover .row2[hidden] { display: none; }

/* UX pass 2 (2026-10-08): action text on tints uses the stronger green (4.5:1 in both themes). */
.v2-chip.is-on, .v2-field-rank, .v2-field-rank select, .v2-psummary, .v2-psplit, .v2-dhero .v2-eyebrow, .v2-pseg button.is-on,
.v2-app .v2-btn-soft, .v2-added, .v2-pill, .v2-app .v2-dhero-value, .v2-pbig { color: var(--v2-action-strong); }
.v2-skip { position: absolute; left: 16px; top: -60px; z-index: 80; background: var(--v2-surface); color: var(--v2-ink); border: 2px solid var(--v2-focus); border-radius: var(--v2-radius-btn); padding: 10px 16px; font-weight: 600; text-decoration: none; }
.v2-skip:focus { top: 8px; }

/* Plain chip labels are longer: source chips take their own row at every width; Edit sources stays on the first row. */
.v2-methods-row .v2-source-chips { flex-basis: 100%; order: 2; }
.v2-methods-row #v2EditSources { order: 1; margin-left: auto; }

/* Weights & bench: editable position shares (frame 11, JEG-452). */
.v2-pshare { grid-template-columns: 40px 1fr 96px 56px; }
.v2-pshare label { font-weight: 700; }
.v2-pshare-field { display: inline-flex; align-items: center; gap: 2px; }
.v2-pshare-field input { width: 72px; min-height: 44px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-btn); padding: 8px; background: var(--v2-surface); color: var(--v2-ink); text-align: right; }
.v2-pshare > span[data-weight] { text-align: right; }

/* Compare a trade: compact layout, verdict and waterfall (JEG-468 / JEG-469). */
#v2Compare {
  --v2-wf-give: #F7DFE3; --v2-wf-give-edge: #B33F50; --v2-wf-receive: #DDF0E6; --v2-wf-receive-edge: #087F5B;
  --v2-cgap: clamp(10px, 1.1vw, 16px);
  padding-top: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #v2Compare { --v2-wf-give: #3D2128; --v2-wf-give-edge: #E07A8A; --v2-wf-receive: #183A2D; --v2-wf-receive-edge: #2FA57B; }
}
:root[data-theme="dark"] #v2Compare { --v2-wf-give: #3D2128; --v2-wf-give-edge: #E07A8A; --v2-wf-receive: #183A2D; --v2-wf-receive-edge: #2FA57B; }
#v2Compare .v2-card { padding: clamp(14px, 1.2vw, 16px); margin-top: var(--v2-cgap); }
#v2Compare .v2-card-head h2, #v2Compare .v2-trade-side h2 { font-size: 16px; }
.v2-chead { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
/* Compare card head only: the verdict's headline rows (.v2-cheads > .v2-chead, JEG-505) share the class name and must flow as text. */
.v2-chead .v2-title h1 { font-size: 27px; }
.v2-chead .v2-title p { margin-top: 2px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#v2Compare.has-trade .v2-chead .v2-title p { display: none; }
.v2-chead .v2-ctoolbar { margin-top: 0; justify-content: flex-end; flex: 0 1 auto; }
.v2-cexample { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin-top: 8px !important; font-size: 13px; color: var(--v2-muted); }
.v2-cexample[hidden] { display: none; }
.v2-cexample .v2-pill, .v2-cverdict.is-example .v2-eyebrow { color: var(--v2-older); }
.v2-cexample .v2-pill { background: var(--v2-surface); border: 1px solid var(--v2-older); }
#v2Compare.is-example .v2-trade-side { border-style: dashed; }

/* Inputs side by side with the verdict (>= 1280), the verdict as a strip below them (768–1279). */
#v2Compare .v2-trade-sides { margin-top: var(--v2-cgap); gap: var(--v2-cgap); align-items: stretch; }
#v2Compare .v2-trade-side { display: flex; flex-direction: column; }
#v2Compare .v2-trade-side h2 { margin-bottom: 8px !important; }
#v2Compare .v2-search { padding: 4px 0; margin: -4px 0; }
#v2Compare .v2-search input { min-height: 36px; padding: 6px 12px; }
#v2Compare .v2-field-rank select { min-height: 36px; }
#v2Compare .v2-field-rank { position: relative; }
#v2Compare .v2-field-rank::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); pointer-events: none; }
#v2Compare .v2-trade-results { left: 14px; right: 14px; }
#v2Compare .v2-trade-players { margin-top: 6px; }
#v2Compare .v2-trade-players li { padding: 0; min-height: 44px; gap: 8px; }
#v2Compare .v2-trade-players li > div { min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; }
#v2Compare .v2-trade-players li > div > .v2-meta { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#v2Compare .v2-trade-players .v2-trade-name, #v2Compare .v2-trade-players li > div > b { white-space: nowrap; flex: none; }
#v2Compare .v2-trade-value { font-size: 15px; }
#v2Compare .v2-side-total { margin-top: auto !important; padding-top: 10px; }
#v2Compare .v2-side-total b { font-size: 20px; }
.v2-cverdict { border-left: 4px solid var(--v2-border); display: flex; flex-direction: column; gap: 6px; }
#v2Compare .v2-cverdict { margin-top: 0; }
.v2-cverdict[data-verdict="win"] { border-left-color: var(--v2-action); }
.v2-cverdict[data-verdict="lose"] { border-left-color: var(--v2-negative); }
.v2-cverdict[data-verdict="incomplete"] { border-left-color: var(--v2-older); }
/* JEG-505: the two headline answers above the verdict. */
.v2-cheads { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 6px; }
#v2Compare .v2-cheads .v2-chead { display: block; margin: 0 !important; font-size: 15px; font-weight: 400; }
.v2-chead .q { font-weight: 700; }
.v2-chead .a, .v2-chead .c { font-weight: 800; white-space: nowrap; }
.v2-chead .c { font-weight: 600; }
.v2-chead .why { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--v2-muted); }
.v2-cverdict h2 { font-size: 20px; font-weight: 800; line-height: 1.25; }
.v2-cverdict[data-verdict="win"] .v2-cverdict-sym { color: var(--v2-action-strong); }
.v2-cverdict[data-verdict="lose"] .v2-cverdict-sym { color: var(--v2-negative); }
.v2-cverdict > div > p { margin-top: 6px !important; font-size: 14px; }
#v2Compare .v2-cstory { border: 0; border-top: 1px solid var(--v2-border); padding-top: 8px; margin-top: 2px; }
#v2Compare .v2-cstory[hidden] { display: none; }
#v2Compare .v2-cstory summary { font-size: 13px; font-weight: 700; cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 6px; }
#v2Compare .v2-cstory summary::after { content: "▾"; color: var(--v2-muted); font-weight: 400; }
#v2Compare .v2-cstory[open] summary::after { content: "▴"; }
#v2Compare .v2-cstory summary::-webkit-details-marker { display: none; }
#v2Compare .v2-cstory summary { list-style: none; }
#v2Compare .v2-trade-side .v2-search { flex: none; }
#v2Compare .v2-cstory p { margin-top: 2px !important; font-size: 13px; color: var(--v2-muted); }
@media (min-width: 1280px) {
  #v2Compare .v2-trade-sides { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(420px, 1.6fr); }
  /* With the two headline answers (JEG-505) the verdict card must still end above the fold at 1366x768. */
  #v2Compare .v2-cverdict { gap: 3px; }
  #v2Compare .v2-cverdict .v2-cheads { gap: 4px; margin-bottom: 2px; }
  #v2Compare .v2-cverdict > div > p { margin-top: 4px !important; font-size: 13px; line-height: 1.4; }
  #v2Compare .v2-cverdict h2 { font-size: 18px; }
  #v2Compare .v2-cstory summary { min-height: 28px; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  #v2Compare .v2-cverdict { grid-column: 1 / -1; }
}
/* Short viewports (1366x768): keep the trade sides + verdict above the fold. */
@media (min-width: 1280px) and (max-height: 800px) {
  #v2Compare .v2-trade-sides { margin-top: 4px; }
  #v2Compare .v2-card { padding: 8px 14px; }
  #v2Compare .v2-trade-players li { min-height: 34px; }
  #v2Compare .v2-trade-players { margin-top: 2px; }
  #v2Compare .v2-trade-side h2 { margin-bottom: 2px !important; }
  #v2Compare .v2-search input { min-height: 30px; padding: 4px 10px; }
  #v2Compare .v2-side-total { padding-top: 4px; }
  #v2Compare .v2-side-total b { font-size: 17px; }
  .v2-chead .v2-title h1 { font-size: 23px; }
  .v2-main { padding-top: 16px; }
  #v2Compare .v2-cverdict { gap: 2px; }
  #v2Compare .v2-cverdict .v2-cheads { gap: 2px; margin-bottom: 0; }
  #v2Compare .v2-cverdict > div > p { margin-top: 2px !important; }
  #v2Compare .v2-cverdict h2 { font-size: 16px; }
  #v2Compare .v2-deal { margin-top: 4px; padding-top: 4px; }
  #v2Compare .v2-cstory { padding-top: 4px; margin-top: 0; }
}

/* Waterfall: one row of steps per lane (give, receive, result), on the table's one scale. */
#v2Compare .v2-ctable td.bar { width: 44%; min-width: 220px; padding-top: 6px; padding-bottom: 6px; }
#v2Compare .v2-ctable th.bar { text-align: left; }
.v2-wf { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 2px 0; min-width: 0; }
.v2-wf-lane { position: relative; height: 18px; }
.v2-wf-zero { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px solid var(--v2-ink); z-index: 1; }
.v2-wf-link { position: absolute; top: 12px; height: 16px; width: 0; border-left: 1px dashed var(--v2-muted); }
.v2-wf-step, .v2-wf-land { position: absolute; top: 0; height: 18px; border-radius: 3px; overflow: hidden; outline-offset: 1px; cursor: default; }
.v2-wf-step.give { background: var(--v2-wf-give); box-shadow: inset 0 0 0 1px var(--v2-wf-give-edge); }
.v2-wf-step.receive { background: var(--v2-wf-receive); box-shadow: inset 0 0 0 1px var(--v2-wf-receive-edge); }
.v2-wf-step.is-missing { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--v2-border) 4px 6px); border: 1px dashed var(--v2-muted); }
.v2-wf-label { display: block; padding: 0 4px; font-size: 11px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--v2-ink); }
.v2-wf-step.is-missing .v2-wf-label { display: inline-block; max-width: 100%; background: var(--v2-surface); color: var(--v2-ink); font-weight: 500; }
.v2-wf-land { top: 3px; height: 12px; background: var(--v2-muted); }
.v2-wf-land.up { background: var(--v2-action); }
.v2-wf-land.down { background: var(--v2-negative); }
.v2-wf-net { position: absolute; top: 0; line-height: 18px; font-size: 12px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-wf-net.up { color: var(--v2-action-strong); }
.v2-wf-net.down { color: var(--v2-negative); }
.v2-wf-none { position: absolute; left: 0; line-height: 18px; font-size: 11px; color: var(--v2-muted); white-space: nowrap; }
#v2Compare .v2-ctable td { vertical-align: middle; }
#v2Compare .v2-ctable td.player, #v2Compare .v2-ctable td.num { padding-top: 6px; padding-bottom: 6px; }

/* Phone: the verdict headline stays at the bottom once both sides have a player. */
.v2-cverdict-bar { display: none; }
@media (max-width: 767px) {
  #v2Compare .v2-chead .v2-ctoolbar { flex-basis: 100%; }
  #v2Compare .v2-ctable td.bar { min-width: 0; width: auto; }
  .v2-cverdict-bar:not([hidden]) { display: block; position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 30; min-height: 48px; padding: 10px 14px;
    border-radius: var(--v2-radius-card); border: 1px solid var(--v2-border); border-left: 4px solid var(--v2-border); background: var(--v2-surface); color: var(--v2-ink);
    font-weight: 700; font-size: 15px; text-align: left; box-shadow: 0 -4px 20px rgba(20, 43, 37, .18); cursor: pointer; }
  .v2-cverdict-bar[data-verdict="win"] { border-left-color: var(--v2-action); }
  .v2-cverdict-bar[data-verdict="lose"] { border-left-color: var(--v2-negative); }
  #v2Compare.has-verdict-bar { padding-bottom: 96px; }
}
#v2Compare .v2-trade-sides > .v2-card { margin-top: 0; }
#v2Compare .v2-ctable td.player .th-sub { display: inline; margin-right: 8px; }
#v2Compare .v2-ctable td.player .v2-cexpand { display: inline-flex; align-items: center; min-height: 24px; vertical-align: baseline; }
#v2Compare .v2-ctable td.player > .v2-sym + * { display: inline; }
.v2-cverdict-fall { margin-top: 4px; }
.v2-cverdict-fall[hidden] { display: none; }
#v2Compare .v2-cverdict-fall .v2-meta { margin-bottom: 4px !important; font-size: 12px; }
/* Side cards: title and search share the first row from 1024 up. */
@media (min-width: 1024px) {
  #v2Compare .v2-trade-side { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 12px; align-items: center; }
  #v2Compare .v2-trade-side h2 { margin-bottom: 0 !important; white-space: nowrap; }
  #v2Compare .v2-trade-side > .v2-trade-players, #v2Compare .v2-trade-side > .v2-side-total { grid-column: 1 / -1; align-self: start; }
  #v2Compare .v2-trade-side > .v2-side-total { align-self: end; }
  #v2Compare .v2-trade-results { top: 52px; }
}

/* Player values: toolbar, brushes, table fit (JEG-470 / 472 / 473 / 475).
   Density comes from the shared tokens in :root; other tabs can adopt them the same way. */
#v2Main { padding-top: 8px; padding-bottom: var(--v2-pad-section); }
#v2Main .v2-card { padding: var(--v2-pad-card) var(--v2-pad-card-x); margin-top: var(--v2-gap); }
#v2Main .v2-card-head h2 { font-size: var(--v2-title-2); }
.v2-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
#v2Main .v2-title h1 { font-size: var(--v2-title-1); line-height: 1.2; }
#v2Main .v2-title p { margin: 0; font-size: 14px; }

/* One toolbar, sticky while the page scrolls into the table (768 px and up). */
#v2Main .v2-toolbar { margin: var(--v2-gap) 0 0; gap: 8px; align-items: center; }
.v2-toolbar .v2-search { flex: 1 1 150px; max-width: 260px; }
.v2-toolbar .v2-field-label { margin-right: 2px; }
.v2-field-show { background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-btn); padding-left: 12px; color: var(--v2-muted); }
.v2-field-show select { border: 0; background: transparent; color: var(--v2-ink); font-weight: 600; padding-left: 6px; }
.v2-toolbar .v2-field-rank select { padding-left: 6px; max-width: 240px; }
.v2-app .v2-reset { margin-left: auto; padding: 10px 14px; }
#v2More[aria-expanded="true"], #v2Columns[aria-expanded="true"] { border-color: var(--v2-action); }
@media (min-width: 768px) {
  #v2Main .v2-toolbar { position: sticky; top: 0; z-index: 25; background: var(--v2-canvas); padding: 4px 0; margin-top: 2px; }
}

/* Chart card: title and legend on one line, the line-style key inside the legend. */
.v2-chart-head { align-items: center; justify-content: flex-start; gap: 0 14px; flex-wrap: wrap; }
/* The legend items flow on after the title; "Set exact values" ends the last line. */
.v2-chart-head h2 { line-height: 22px; margin-right: 4px; }
/* JEG-675: the legend is its own wrapping box, so only its rows get a 22 px gap: 44 px between row centres gives each wrapped
   toggle its own 44 px hit area (22 px items + 22 px gap) without opening a gap between the title, legend and button lines. */
.v2-chart-head .v2-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 14px; margin: 0; }
.v2-chart-head .v2-legend > span { font-size: 12px; color: var(--v2-muted); line-height: 22px; }
.v2-chart-head .v2-legend svg { width: 16px; }

.v2-legend .v2-legend-key { color: var(--v2-muted); }
/* "Set exact values" (JEG-483): a full 44 px control at the end of the chart card's title line. */
.v2-app .v2-yexact { margin-left: auto; min-height: 44px; padding: 8px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.v2-yexact::after, #v2ExpandTable::after { content: none; }

/* The plot: Y value brush | chart, X rank brush underneath. Height includes both brushes. */
.v2-plot { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 44px;
  height: var(--v2-chart-h); margin-top: 6px; }
.v2-plot[hidden] { display: none; }
.v2-plot-main { grid-column: 2; grid-row: 1; position: relative; min-height: 0; }
#v2Main .v2-plot-main .v2-chart { height: 100%; margin: 0; }
#v2Main .v2-plot .v2-brush { grid-column: 2; grid-row: 2; margin: 0; }
.v2-zoom { position: absolute; top: 2px; right: 2px; display: flex; gap: 4px; }
.v2-zoom button { width: 44px; height: 44px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-btn);
  background: var(--v2-surface); color: var(--v2-ink); font-size: 18px; line-height: 1; cursor: pointer; opacity: .92; }
.v2-zoom button:hover { border-color: var(--v2-action); opacity: 1; }

/* Thumb labels: small pills beside each handle. */
.v2-thumb-label { position: absolute; pointer-events: none; font-size: 10px; font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: 4px; background: var(--v2-surface); border: 1px solid var(--v2-border); color: var(--v2-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
#v2XLoLabel { top: 14px; margin-left: 10px; }
#v2XHiLabel { top: 14px; transform: translateX(calc(-100% - 10px)); }

/* JEG-472 Y value brush: mirrors the X brush (track, fill, thumbs, overview), vertical. */
.v2-ybrush { grid-column: 1; grid-row: 1; position: relative; margin: 12px 0 var(--v2-plot-pad-b, 46px); }
.v2-ybrush::before { content: ""; position: absolute; top: 0; bottom: 0; left: 29px; width: 16px; background: var(--v2-canvas);
  border: 1px solid var(--v2-border); border-radius: 4px; }
.v2-ybrush-overview { position: absolute; top: 0; bottom: 0; left: 29px; width: 16px; height: 100%; overflow: visible; }
.v2-ybrush-overview .overview-bar { opacity: .6; }
/* Both brushes: overview above the fill, handles above the overview, labels on top. */
.v2-ybrush-overview, #v2Main .v2-brush-overview { z-index: 1; }
.v2-ybrush input[type=range], #v2Main .v2-brush-track input[type=range] { z-index: 2; }
.v2-thumb-label { z-index: 3; }
.v2-ybrush-fill { position: absolute; left: 29px; width: 16px; background: var(--v2-brush-fill); border: 1px solid var(--v2-action); border-radius: 4px; opacity: .8; }
.v2-ybrush .v2-ylabel { left: 0; max-width: 28px; transform: translateY(-50%); padding: 2px 2px; letter-spacing: -.02em; }
.v2-ybrush input[type=range] { position: absolute; top: 0; left: 15px; width: 44px; height: 100%; margin: 0; padding: 0;
  writing-mode: vertical-lr; direction: rtl; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.v2-ybrush input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 30px; height: 14px;
  border-radius: 4px; background: var(--v2-action); border: 2px solid var(--v2-surface); cursor: ns-resize; }
.v2-ybrush input[type=range]::-moz-range-thumb { pointer-events: auto; width: 28px; height: 12px; border-radius: 4px;
  background: var(--v2-action); border: 2px solid var(--v2-surface); cursor: ns-resize; }
.v2-ybrush input[type=range]::-webkit-slider-runnable-track { background: none; }
.v2-ybrush input[type=range]::-moz-range-track { background: none; }

/* Layout: chart left, table right from 1280 px, so both are above the fold at 1366 × 768 and 1440 × 900. */
@media (min-width: 1280px) {
  .v2-values-grid { display: grid; grid-template-columns: minmax(420px, 1fr) fit-content(66%); gap: var(--v2-gap);
    align-items: stretch; margin-top: 6px; }
  #v2Main .v2-values-grid > .v2-card { margin-top: 0; min-width: 0; }
  /* The table card takes the chart card's height (it adds nothing to the row) and scrolls inside. */
  .v2-values-grid > .v2-table-card { height: 0; min-height: 100%; display: flex; flex-direction: column; }
  .v2-values-grid > .v2-table-card .v2-table-wrap { flex: 1 1 0; min-height: 0; }
  .v2-values-grid > .v2-table-card[hidden] { display: none; }
  /* JEG-500: a collapsed chart no longer sets the row's height, so the table keeps its own. */
  .v2-values-grid:has(> .v2-chart-card[data-collapsed="true"]) > .v2-table-card { height: auto; min-height: 0; }
  .v2-values-grid:has(> .v2-chart-card[data-collapsed="true"]) > .v2-table-card .v2-table-wrap { flex: none; max-height: calc(100vh - 220px); }
}

/* JEG-473 table fit. */
.v2-table-head { align-items: center; flex-wrap: nowrap; gap: 4px 12px; }
.v2-table-head h2 { flex: none; line-height: 1.3; }
/* Phone: the buttons stay on the card and the title gives way, in any fallback face (JEG-675). */
@media (max-width: 767px) { .v2-table-head h2 { flex: 0 1 auto; min-width: 0; } }
.v2-table-head .v2-meta { flex: 1 1 auto; min-width: 0; }
.v2-app #v2Columns { flex: none; position: relative; min-height: 30px; min-width: 44px; padding: 4px 12px; font-size: 13px; }
#v2Columns::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
#v2Main .v2-table-foot { position: sticky; left: 0; padding: 8px 0; margin: 0; }
#v2Main .v2-table-foot:has(> [hidden]) { display: none; }
.v2-heat-key { margin-top: 6px !important; font-size: 11px; }
#v2Main .v2-table-wrap { position: relative; margin-top: 8px; overflow: auto; }   /* contains the screen-reader spans */
@media (min-width: 768px) and (max-width: 1279px) {
  #v2Main .v2-table-wrap { max-height: calc(100vh - 120px); }
  #v2Main { --v2-chart-h: clamp(280px, 36vh, 400px); }   /* stacked: the table follows under the chart */
}
/* JEG-470 laptop fold: at 1366x768 the chart card must end within the viewport.
   The default rule (clamp 280 px / 100vh-490 / 42vh) already floors the plot at 280 px on short viewports.
   PR 713 overrode this to 248 px (100vh-520) to fit the fold, but that broke JEG-470's 280 px floor.
   Trimming the chart-head gaps, card padding and plot margin recovers the ~32 px instead. */
@media (min-width: 1280px) and (max-height: 800px) {
  #v2Main .v2-chart-card { padding-top: 4px; padding-bottom: 4px; }
  .v2-chart-head { gap: 0 8px; }
  .v2-chart-head .v2-legend { gap: 8px 8px; }
  .v2-plot { margin-top: 2px; }
}
/* JEG-477: from 1680 x 960 the chart is taller by default and keeps scaling with the viewport (530 px = the page above the
   plot at 1920, so the card still ends at the fold at 1080); laptops never match, so the JEG-470 fold is unchanged; the toggle (#v2ChartSize) switches to the expanded height. */
@media (min-width: 1680px) and (min-height: 960px) { :root { --v2-chart-h: clamp(420px, calc(100vh - 530px), 60vh); } }
#v2Main[data-chart-size="tall"] { --v2-chart-h: var(--v2-chart-h-expanded); }
#v2ChartSize[aria-pressed="true"] { border-color: var(--v2-action); }

.v2-vtable th, .v2-vtable td { padding: 4px var(--v2-cell-pad-x); }
.v2-vtable td { height: var(--v2-row-h); vertical-align: middle; }
.v2-vtable .num { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.v2-vtable td.player { font-size: 13px; line-height: 1.25; padding-top: 2px; padding-bottom: 2px; }
.v2-vtable .player-sub { display: block; margin-top: 0; font-size: 11px; line-height: 1.2; }
.v2-vtable .rank { width: 34px; min-width: 34px; font-size: 12px; }
.v2-vtable .delta { font-size: 10px; line-height: 1.2; }
.v2-vtable .v2-espn-zero { margin-left: 4px; padding: 0 4px; font-size: 10px; }
/* Two-line headers: publisher, then the method in small caps. Sort arrow on line 1. */
.v2-vtable th { vertical-align: bottom; line-height: 1.2; }
.v2-vtable th button { display: inline-flex; flex-direction: column; align-items: flex-start; text-align: left; min-height: 32px; min-width: 44px; justify-content: flex-end; }
.v2-vtable th.num button { align-items: flex-end; text-align: right; }
.v2-vtable th button::after, .v2-vtable th[aria-sort] button::after { content: none; }
.v2-vtable .th-1 { white-space: nowrap; font-size: 12px; }
/* Unsorted columns show their sort arrow on hover or focus only, so headers stay narrow. */
.v2-vtable .th-1::after { content: ""; font-size: 10px; }
.v2-vtable th button:hover .th-1::after, .v2-vtable th button:focus-visible .th-1::after { content: " ↕"; opacity: .45; }
.v2-vtable th[aria-sort="descending"] .th-1::after { content: " ↓"; opacity: 1; }
.v2-vtable th[aria-sort="ascending"] .th-1::after { content: " ↑"; opacity: 1; }
.v2-vtable .th-2 { font-size: 11px; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: .02em; white-space: nowrap; }
.v2-vtable .th-2 .is-older { color: var(--v2-older); }
/* Grouped top row. */
.v2-vtable .v2-group-row th { height: var(--v2-group-h); padding: 2px var(--v2-cell-pad-x); font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; text-align: center; border-bottom: 1px solid var(--v2-border); white-space: nowrap; }
.v2-vtable .v2-group-row th + th { box-shadow: inset 1px 0 0 var(--v2-border); }
.v2-vtable .v2-group-row th.is-rank { color: var(--v2-action-strong); }
/* Sticky header rows and Player column (768 px and up; mobile keeps its own sticky Player column). */
@media (min-width: 768px) {
  .v2-vtable thead th { position: sticky; z-index: 3; background: var(--v2-surface); }
  .v2-vtable .v2-group-row th { top: 0; }
  .v2-vtable .v2-head-row th { top: var(--v2-group-h); box-shadow: 0 1px 0 var(--v2-border); }
  .v2-vtable .v2-head-row th.is-rank, .v2-vtable .v2-group-row th.is-rank { background: var(--v2-rank-tint); }
  /* The hidden engine page styles a global .rank as flex; keep the # column a real table cell. */
  .v2-vtable th.rank, .v2-vtable td.rank { display: table-cell; }
  .v2-vtable td.rank, .v2-vtable td.player { position: sticky; z-index: 1; background: var(--v2-surface); }
  .v2-vtable td.rank, .v2-vtable .v2-head-row th.rank { left: 0; }
  .v2-vtable td.player, .v2-vtable .v2-head-row th.player { left: 34px; box-shadow: 1px 0 0 var(--v2-border); }
  .v2-vtable .v2-head-row th.rank, .v2-vtable .v2-head-row th.player { position: sticky; z-index: 4; }
  .v2-vtable td.player { max-width: 172px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 767px) {
  .v2-vtable .v2-group-row { display: none; }
}
/* Heatmap tint against the row's ranking value: colour only, the direction is in each cell's title too. */
.v2-vtable td.heat-up-1 { background: var(--v2-heat-up-1); }
.v2-vtable td.heat-up-2 { background: var(--v2-heat-up-2); }
.v2-vtable td.heat-up-3 { background: var(--v2-heat-up-3); }
.v2-vtable td.heat-down-1 { background: var(--v2-heat-down-1); }
.v2-vtable td.heat-down-2 { background: var(--v2-heat-down-2); }
.v2-vtable td.heat-down-3 { background: var(--v2-heat-down-3); }
.v2-vtable .missing { cursor: help; }

/* Below 768 px: the numeric value range ("Set exact values") replaces the Y brush; the rest stays as before. */
@media (max-width: 767px) {
  .v2-plot { grid-template-columns: minmax(0, 1fr); height: auto; }
  .v2-ybrush { display: none; }
  .v2-plot-main, #v2Main .v2-plot .v2-brush { grid-column: 1; }
  .v2-plot-main { height: 260px; }
  .v2-toolbar .v2-search { max-width: none; }
  .v2-app .v2-reset { margin-left: 0; }
}

/* JEG-483: active filter chips, Reset zoom, expanded chart and table. */
.v2-fchips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 6px 0 2px; }
.v2-fchips[hidden] { display: none; }
.v2-fchip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px 4px 12px;
  border: 1px solid var(--v2-tint-border); border-radius: 999px; background: var(--v2-positive); color: var(--v2-action-strong);
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.v2-fchip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.v2-fchip:hover { border-color: var(--v2-action); }
.v2-zoom .v2-zoom-reset { width: auto; padding: 0 10px; font-size: 13px; font-weight: 600; color: var(--v2-action-strong); }
.v2-zoom .v2-zoom-reset[hidden] { display: none; }
#v2ExpandChart { font-size: 20px; }
.v2-app #v2ExpandTable { flex: none; position: relative; min-height: 30px; min-width: 44px; padding: 4px 12px; font-size: 13px; }
#v2ExpandTable::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
body.v2-expand-open { overflow: hidden; }
.v2-expand { position: fixed; inset: 0; z-index: 58; background: rgba(10,20,17,.35); display: flex; align-items: flex-start; justify-content: center; padding: 24px; }
.v2-expand[hidden] { display: none; }
.v2-expand-box { display: flex; flex-direction: column; width: min(1600px, 100%); max-height: calc(100vh - 48px); background: var(--v2-surface);
  border: 1px solid var(--v2-border); border-radius: var(--v2-radius-card); box-shadow: 0 12px 32px rgba(20,43,37,.22); overflow: hidden; }
.v2-expand-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 20px 10px; border-bottom: 1px solid var(--v2-border); }
.v2-expand-head h2 { font-size: 20px; font-weight: 800; margin: 0; }
.v2-expand-head .v2-meta { margin-top: 2px !important; font-size: 12px; }
.v2-expand-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 20px 0; }
.v2-expand-tools[hidden] { display: none; }
.v2-expand-tools .v2-legend { margin: 0; flex: 1 1 320px; }
.v2-xshow { display: inline-flex; gap: 6px; }
.v2-xshow button { min-width: 64px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius-btn);
  background: var(--v2-surface); color: var(--v2-ink); cursor: pointer; font-weight: 600; }
.v2-xshow button.is-on { background: var(--v2-positive); border-color: var(--v2-action); color: var(--v2-action-strong); }
.v2-expand-body { flex: 1 1 auto; min-height: 0; padding: 8px 20px 16px; display: flex; flex-direction: column; }
.v2-expand[data-kind="chart"] .v2-expand-body .v2-plot { height: 75vh; margin-top: 4px; }
.v2-expand #v2ExpandChart { display: none; }
.v2-expand[data-kind="table"] .v2-expand-box { height: calc(100vh - 48px); }
#v2Main .v2-expand .v2-table-wrap { flex: 1 1 0; min-height: 0; max-height: none; margin-top: 0; }
@media (max-width: 767px) {
  .v2-expand { padding: 0; }
  .v2-expand-box, .v2-expand[data-kind] .v2-expand-box { width: 100vw; height: 100vh; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .v2-expand-head, .v2-expand-tools { padding-left: 16px; padding-right: 16px; }
  .v2-expand-body { padding: 8px 16px 12px; overflow-y: auto; }
  .v2-xshow { width: 100%; }
  .v2-xshow button { min-width: 0; flex: 1 1 0; padding: 6px 4px; white-space: nowrap; }
  /* Full screen there is room for the Y brush again. */
  .v2-expand[data-kind="chart"] .v2-expand-body .v2-plot { grid-template-columns: 56px minmax(0, 1fr); height: 70vh; }
  .v2-expand .v2-ybrush { display: block; }
  .v2-expand .v2-plot-main { grid-column: 2; height: auto; }
  #v2Main .v2-expand .v2-plot .v2-brush { grid-column: 2; }
}
body.v2-expand-open .v2-tip { z-index: 59; }   /* the hover card shows over the expanded chart */

/* Manifesto (2026-10-09): plain long-form text inside the v2 shell, one column of about 70 characters. */
#v2Manifesto { padding-top: clamp(20px, 2vw + 8px, 40px); padding-bottom: 64px; }
.v2-mf-text { max-width: 70ch; margin: 0 auto; font-size: 17px; line-height: 1.7; }
.v2-mf-text p, .v2-mf-text ul { margin: 0 0 1em; }
.v2-mf-text ul { padding-left: 1.4em; }
.v2-mf-text li + li { margin-top: .35em; }
.v2-mf-text strong { font-weight: 700; }
.v2-mf-text .v2-mf-eyebrow { color: var(--v2-action-strong); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px !important; }
.v2-mf-text h1 { font-size: clamp(30px, 2vw + 20px, 44px); line-height: 1.12; font-weight: 800; margin: 0 0 28px; }
.v2-mf-sec { margin-top: 48px; padding-top: 4px; }
.v2-mf-text h2 { font-size: clamp(21px, .6vw + 17px, 26px); line-height: 1.3; font-weight: 800; margin: 0 0 16px; }
@media (max-width: 767px) {
  .v2-mf-text { font-size: 16px; line-height: 1.65; }
  .v2-mf-sec { margin-top: 36px; }
}

/* Research (JEG-543): the index and posts reuse the Manifesto's reading column. */
#v2Research { padding-top: clamp(20px, 2vw + 8px, 40px); padding-bottom: 64px; }
.v2-mf-text a { color: var(--v2-action-strong); }
.v2-rs-list { list-style: none; margin: 28px 0 0; padding: 0; }
.v2-rs-list li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--v2-border); }
.v2-rs-link { font-size: 19px; font-weight: 700; text-decoration: none; }
.v2-rs-link:hover { text-decoration: underline; }
.v2-rs-date, .v2-rs-meta { color: var(--v2-muted, #5b6472); font-size: 14px; }
.v2-mf-text .v2-mf-eyebrow a { color: inherit; text-decoration: none; }
.v2-rs-back { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--v2-border); }

/* JEG-502: players no source prices, listed only in search results. */
.v2-unpriced { margin: 0 0 12px; padding: 10px 14px; border: 1px dashed var(--v2-border); border-radius: var(--v2-radius-btn); background: var(--v2-surface); }
.v2-unpriced-head { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.v2-unpriced-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.v2-unpriced-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 13px; }
.v2-unpriced-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.v2-unpriced-why { flex-basis: 100%; }
.v2-trade-results .v2-unpriced-why { flex-basis: 100%; font-size: 12px; }

/* JEG-500 (GL-17, GL-18): every module card expands and collapses. modules.js adds the controls. */
.v2-mod { position: relative; }
.v2-mod-ctl { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; z-index: 2; }
.v2-mod-btn { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--v2-muted, inherit); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; border-radius: 8px; }
.v2-mod-btn:hover { background: var(--v2-border); }
.v2-mod-btn[hidden] { display: none; }
.v2-mod-chevron span { display: inline-block; transition: transform .15s; }
.v2-mod[data-collapsed="true"] .v2-mod-chevron span { transform: rotate(-90deg); }
.v2-mod > .v2-mod-head { padding-right: 96px; }
.v2-mod-sum { margin: 4px 0 0; padding-right: 96px; }
.v2-mod-sum:empty { display: none; }
.v2-mod[data-collapsed="true"] > :not(.v2-mod-ctl):not(.v2-mod-head):not(.v2-mod-sum) { display: none !important; }
.v2-mod[data-collapsed="true"] { align-self: start; }
.v2-mod[data-collapsed="true"] > .v2-mod-head .v2-meta { display: none !important; }
.v2-mod[data-collapsed="true"] > .v2-mod-head > :not(h2):not(.v2-eyebrow):not(:has(h2)) { display: none !important; }
.v2-mod[data-xl="true"] { grid-column: 1 / -1; }
.v2-mod[data-xl="true"] .v2-table-wrap { max-height: none; }

/* Trade targets: two numbered checks (JEG-476, JEG-489). */
.v2-tcheck { margin: 4px 0 8px; }
.v2-tcheck h2, .v2-weight h2 { font-size: var(--v2-title-2); margin: 0; }
.v2-tcheck p { margin: 2px 0 0; max-width: 72ch; }
.v2-weight { margin-top: 24px; padding: var(--v2-pad-card) var(--v2-pad-card-x); }
.v2-weight > p { max-width: 72ch; margin: 4px 0; }
.v2-weight-headline { font-weight: 600; margin: 10px 0 !important; }
.v2-weight .v2-table-wrap { overflow-x: auto; max-width: 100%; position: relative; }
.v2-wtable td, .v2-wtable th { white-space: nowrap; }
.v2-wtable tr.is-tier td.player { padding-left: 22px; font-weight: 400; color: var(--v2-muted); }
.v2-wtable tr.is-pos td.player { font-weight: 700; }
.v2-wtable td.w-gap.h-up-1 { background: var(--v2-heat-up-1); } .v2-wtable td.w-gap.h-up-2 { background: var(--v2-heat-up-2); } .v2-wtable td.w-gap.h-up-3 { background: var(--v2-heat-up-3); }
.v2-wtable td.w-gap.h-down-1 { background: var(--v2-heat-down-1); } .v2-wtable td.w-gap.h-down-2 { background: var(--v2-heat-down-2); } .v2-wtable td.w-gap.h-down-3 { background: var(--v2-heat-down-3); }
.v2-wsignal { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 600; }
.v2-wsignal.is-sell { color: var(--v2-action-strong); }
.v2-wsignal.is-buy { color: var(--v2-negative); }
.v2-wsignal.is-fair { color: var(--v2-muted); }
.v2-wtable tr.w-detail td { white-space: normal; background: var(--v2-hover); padding: 6px; }
.v2-wplayers { width: 100%; }
.v2-weight-how { margin-top: 10px; font-size: 13px; max-width: 72ch; }
.v2-weight-how summary { cursor: pointer; min-height: 32px; }

/* JEG-481: Find a trade (finder.js). */
.v2-find-side { position: relative; }
.v2-find-side h3 { font-size: 18px; font-weight: 700; margin: 0 0 12px; }
.v2-find-side .v2-trade-results { left: 0; right: 0; }
#v2Find .v2-trade-sides { margin-top: 12px; }
#v2Find .v2-ctoolbar { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#v2FindOut { margin-top: 12px; }
.v2-find-list { list-style: none; margin: 8px 0 0; padding: 0; }
.v2-find-list li { display: grid; gap: 4px; border-top: 1px solid var(--v2-border); padding: 12px 0; }

/* Player values chart: Starter / Bench / Waiver lines and labels, draggable brush fill, legend toggles (JEG-503). */
.v2-chart .zone-line { stroke: var(--v2-muted); stroke-width: 1; opacity: .55; }
.v2-chart .zone-line.approx { stroke-dasharray: 4 4; }
.v2-chart .zone-label { fill: var(--v2-muted); font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; opacity: .75; pointer-events: none; }
.v2-brush-fill, .v2-ybrush-fill { cursor: grab; touch-action: none; }
.v2-brush-fill.is-dragging, .v2-ybrush-fill.is-dragging { cursor: grabbing; }
.v2-brush-fill:focus-visible, .v2-ybrush-fill:focus-visible { outline: 2px solid var(--v2-focus); outline-offset: 2px; }
.v2-brush-overview, .v2-ybrush-overview { pointer-events: none; }
.v2-legend .v2-legend-item { display: inline-flex; gap: 6px; align-items: center; background: none; border: 0; padding: 0 2px; margin: 0; font: inherit; color: inherit; cursor: pointer; min-height: 22px; }
.v2-legend .v2-legend-item:disabled { cursor: default; }
.v2-legend .v2-legend-item.is-off { opacity: .55; text-decoration: line-through; }
.v2-legend .v2-legend-item:focus-visible { outline: 2px solid var(--v2-focus); outline-offset: 2px; }
.v2-legend-mark { font-size: 13px; line-height: 1; }
.v2-chart-head .v2-legend > .v2-legend-item { font-size: 12px; color: var(--v2-muted); line-height: 22px; }
.v2-legend .v2-legend-item { position: relative; min-height: 22px; padding: 0 2px; }
.v2-legend-item::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }   /* a 44 px hit area (JEG-675, Jeremy 2026-10-16) without a taller row */

/* JEG-571: Start / Hold / Stash / Drop chips (text plus colour, never colour alone). */
.v2-tag { display: inline-block; margin-left: 8px; padding: 1px 6px; border: 1px solid var(--v2-border); border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 1.4; white-space: nowrap; vertical-align: middle; background: var(--v2-surface); color: var(--v2-muted); }
.v2-tag-start { border-color: var(--v2-tint-border); background: var(--v2-positive); color: var(--v2-action-strong); }
.v2-tag-stash { border-color: var(--v2-index-border); background: var(--v2-index-bg); color: var(--v2-index-ink); }
.v2-tag-drop { border-color: var(--v2-negative); color: var(--v2-negative); }

/* JEG-579: side by side from 1024 px (the fold is the module chevron); an expanded list stays in its own column, capped at about 60vh and scrolling inside. */
@media (min-width: 1024px) {
  .v2-tlist .v2-t-desktop { max-height: 60vh; overflow: auto; }
}

/* JEG-579: overall and position rank sub-labels, 1200 px and wider only. */
.v2-srank, .v2-prank { display: none; }
@media (min-width: 1200px) {
  .v2-srank, .v2-prank { display: block; font-size: 11px; font-weight: 400; line-height: 1.2; color: var(--v2-rank-sub, var(--v2-muted)); white-space: nowrap; }
}
/* A chip on a sub-line stays compact (JEG-470: rows no taller than needed). */
.v2-subrow { display: flex; align-items: baseline; flex-wrap: wrap; }
.v2-subrow .v2-tag, .player-sub .v2-tag, .v2-meta .v2-tag { margin-left: 4px; padding: 0 5px; font-size: 10px; line-height: 1.3; }

/* JEG-481: Find a trade, league import and lineup checks. */
.v2-find-import { margin-top: 12px; }
.v2-find-import summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--v2-action); }
.v2-find-import-body { display: grid; gap: 8px; }
.v2-find-import-body input[type="text"], .v2-find-import-body textarea, .v2-find-import-body select {
  border: 1px solid var(--v2-border); background: var(--v2-surface); color: inherit; border-radius: var(--v2-radius-btn);
  padding: 10px 14px; min-height: 44px; width: 100%; font: inherit; box-sizing: border-box;
}
.v2-find-import-body .v2-field { display: flex; flex-wrap: wrap; gap: 8px; }
#v2Find .v2-ctoolbar { flex-wrap: wrap; gap: 8px 16px; align-items: center; }
#v2Find .v2-ctoolbar input[type="checkbox"] { width: 20px; height: 20px; }
#v2Find .v2-ctoolbar label.v2-field { min-height: 44px; }