:root {
  /* ---- War Room base (deep stadium night) ---- */
  --page: #0A0E16;
  --field-night: #0A0E16;
  --panel: #121826;
  --deck: #121826;
  --panel-soft: #18202F;
  --deck-raised: #18202F;
  --ink: #EAEEF5;
  --chalk: #EAEEF5;
  --muted: #8A94A6;
  --chalk-muted: #8A94A6;
  --line: #232C3D;
  --hash: #232C3D;
  --head: #F3F6FB;

  /* ---- Semantic accents (used sparingly, with intent) ---- */
  --accent: #5B9DF9;            /* model intelligence */
  --signal: #5B9DF9;
  --accent-2: #8FC0FF;
  --accent-soft: rgba(91, 157, 249, 0.14);
  --signal-soft: rgba(91, 157, 249, 0.14);

  --good: #36C28B;             /* value / model-loves */
  --turf: #36C28B;
  --turf-soft: rgba(54, 194, 139, 0.13);

  --warn: #F2B441;             /* draft-clock urgency */
  --clock: #F2B441;
  --clock-soft: rgba(242, 180, 65, 0.13);

  --bad: #EC6A60;              /* true risk / avoid only */
  --alert: #EC6A60;
  --alert-soft: rgba(236, 106, 96, 0.12);

  --keeper: #C9A24B;           /* elite keeper / dynasty asset */
  --keeper-soft: rgba(201, 162, 75, 0.13);

  --focus: rgba(91, 157, 249, 0.55);

  /* ---- Type system ---- */
  --font-sans: "Inter", "Segoe UI", Arial, sans-serif;
  --font-display: "Archivo", "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", "Consolas", monospace;

  --shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.30);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, Segoe UI, Arial, sans-serif;
  color: var(--ink);
  background: var(--page);
}

.topbar {
  position: relative;
  z-index: 95;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  padding: 24px 28px 22px;
  background: #ffffff;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; letter-spacing: 0; }
h2 { font-size: 16px; letter-spacing: 0; }
.topbar p { margin-top: 6px; color: var(--muted); font-size: 13px; }
.headerActions { min-width: 340px; }
.headerActions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.chatToggle {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 14px;
  background: #182235;
  color: #E5E7EB;
  cursor: pointer;
  font-weight: 850;
}

button, input, select {
  font: inherit;
}
input, select {
  width: 100%;
  border: 1px solid #cbd8df;
  border-radius: 8px;
  padding: 10px 11px;
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
input:focus, select:focus, button:focus {
  outline: 2px solid rgba(15, 118, 110, 0.22);
  outline-offset: 2px;
}

.tabs {
  position: relative;
  z-index: 95;
  display: flex;
  gap: 8px;
  padding: 12px 26px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.myRanksPanel { overflow: hidden; }
.myRanksHeaderActions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.myRanksStats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.myRanksStats > div { background: rgba(18, 27, 43, .82); border: 1px solid rgba(117, 145, 180, .22); border-radius: 10px; padding: 12px; }
.myRanksStats span { display: block; color: #8ea5c4; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.myRanksStats strong { display: block; margin-top: 5px; color: #eef5ff; font-size: 14px; }
.myRanksControls { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; padding: 12px; border: 1px solid rgba(117, 145, 180, .22); border-radius: 10px; background: rgba(10, 16, 27, .72); position: sticky; top: 0; z-index: 3; }
.myRanksBaseContext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.myRanksBaseContext > div { display: grid; gap: 4px; padding: 11px 12px; border: 1px solid rgba(96, 165, 250, .28); border-radius: 9px; background: rgba(15, 31, 54, .65); }
.myRanksBaseContext strong { color: #dbeafe; font-size: 11px; }
.myRanksBaseContext span { color: var(--muted); font-size: 11px; }
.myRanksScenarioBadge { display: inline-block; margin-left: 6px; padding: 3px 6px; border: 1px solid rgba(196, 181, 253, .45); border-radius: 5px; color: #ddd6fe; font-size: 10px; }
.rankLineage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft, var(--panel)); }
.rankLineage div { display: grid; gap: 3px; }
.rankLineage span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.rankLineage strong { font-size: 18px; }
.rankLineageExplanation { margin: -6px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.myRanksControls label { display: grid; gap: 5px; color: #9db2ce; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.myRanksControlGroup { display: grid; gap: 5px; min-width: 300px; }
.myRanksControlLabel { color: #9db2ce; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.myRanksControls small { display: block; color: #7389a5; font-size: 10px; line-height: 1.3; text-transform: none; letter-spacing: 0; max-width: 230px; }
.myRanksControlGroup small { max-width: 300px; }
.myRanksControls input, .myRanksControls select, .myRanksTable input, .myRanksTable select { background: #111b2b; color: #eaf2ff; border: 1px solid #30435f; border-radius: 6px; padding: 6px 8px; }
.myRanksControls input[type="range"] { accent-color: #a855f7; }
.myRanksSearch { min-width: 210px; }
.myRanksMode { display: flex; gap: 4px; }
.myRanksMode button { border: 1px solid #30435f; background: #111b2b; color: #b6c8df; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.myRanksMode button.active { background: #6d35a5; color: white; border-color: #b277ed; }
.myRanksNotice { color: #9db2ce; margin: 12px 0; }
.myRanksOnboarding { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: 12px 0 16px; padding: 14px; border: 1px solid rgba(168, 85, 247, .35); border-radius: 10px; background: rgba(74, 34, 110, .22); }
.myRanksOnboarding strong { color: #f1e8ff; }
.myRanksOnboarding p { margin: 4px 0 0; color: #b5a8c9; font-size: 12px; }
.myRanksOnboardingActions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.myRanksOnboardingActions button, .myRanksPresets button { border: 1px solid #6e4d91; background: #25163a; color: #e3d5f5; border-radius: 6px; padding: 7px 9px; cursor: pointer; font-size: 11px; }
.myRanksOpinionSummary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.myRanksOpinionSummary > div { padding: 11px; border-radius: 9px; background: rgba(18, 27, 43, .82); border: 1px solid rgba(117, 145, 180, .22); }
.myRanksOpinionSummary span { display: block; color: #8ea5c4; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.myRanksOpinionSummary strong { display: block; color: #eef5ff; margin-top: 4px; }
.myRanksOpinionSummary em { color: #a78bfa; font-size: 11px; font-style: normal; }
.myRanksBlendControl { display: grid; gap: 6px; min-width: 290px; }
.blendEnds { display: flex; justify-content: space-between; color: #c4b5fd; font-size: 10px; }
.myRanksBlendControl output { display: block; color: #d8c8ed; font-size: 11px; }
.myRanksPresets { display: flex; gap: 4px; flex-wrap: wrap; }
.myRankDragHandle { display: inline-block; color: #a78bfa; cursor: grab; font-size: 18px; line-height: 1; padding: 4px; }
.myRanksTable tr[draggable="true"] { cursor: default; }
.myRankMoveButtons { display: inline-flex; flex-direction: column; margin-left: 4px; opacity: .35; transition: opacity .15s; }
.myRanksTable tr:hover .myRankMoveButtons, .myRankInput:focus + .myRankMoveButtons { opacity: 1; }
.myRankMoveButtons button { border: 0; background: transparent; color: #9fb6d4; cursor: pointer; padding: 0 3px; line-height: 1; }
.myRankInput:focus, .myRankNote:focus, .myRanksTable select:focus { outline: 2px solid rgba(168, 85, 247, .8); outline-offset: 1px; }
.myRanksTableWrap { max-height: calc(100vh - 390px); }
.myRanksTable { min-width: 1120px; }
.myRanksTable th { position: sticky; top: 0; z-index: 2; }
.myRanksTable td { vertical-align: middle; }
.myRankInput { width: 68px; }
.myRankNote { width: 150px; }
.myRankUp { color: #4ade80; font-weight: 700; }
.myRankDown { color: #fb7185; font-weight: 700; }
.myRankNeutral { color: #94a3b8; }
.myRankFallback { color: #7f91aa; font-style: italic; }
.myRankBadge { color: #fbbf24; font-size: 10px; margin-left: 4px; }
.communityRanksCard { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; gap: 10px 18px; align-items: center; margin: 14px 0; padding: 14px; border: 1px solid rgba(96, 165, 250, .24); border-radius: 10px; background: rgba(15, 31, 54, .72); }
.communityRanksCard > summary { grid-column: 1 / -1; cursor: pointer; color: #dbeafe; font-weight: 700; }
.communityRanksCard > summary span { display: block; margin-top: 4px; color: #8ea5c4; font-size: 11px; font-weight: 400; }
.communityDetails { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; gap: 10px 18px; align-items: center; grid-column: 1 / -1; }
.communityRanksCard h3 { margin: 3px 0; color: #eaf2ff; }
.communityRanksCard p { margin: 0; color: #91a8c4; font-size: 12px; line-height: 1.4; max-width: 700px; }
.communityOptIn { color: #c9d8ec; font-size: 12px; white-space: nowrap; }
.communityOptIn input { accent-color: #60a5fa; margin-right: 6px; }
.communityCollectionNotice { margin: 0; color: #c9d8ec; font-size: 12px; line-height: 1.45; max-width: 58ch; }
.communityStatus, .communitySummary { color: #8ea5c4; font-size: 11px; }
.communitySummary { grid-column: 1 / -1; }
.communityLeaders { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.communityLeaders strong { grid-column: 1 / -1; color: #b7c9df; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.communityLeaders span { display: grid; grid-template-columns: 1fr auto; gap: 4px; padding: 7px 9px; border-radius: 6px; background: rgba(9, 19, 34, .72); color: #dce8f8; font-size: 11px; }
.communityLeaders b { color: #a78bfa; }
.communityLeaders em { grid-column: 1 / -1; color: #7890ad; font-size: 10px; font-style: normal; }
@media (max-width: 800px) { .communityRanksCard { grid-template-columns: 1fr; } .communitySummary, .communityLeaders { grid-column: auto; } .communityLeaders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .myRanksStats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .myRanksControls { position: static; } }
@media (max-width: 800px) { .myRanksBaseContext { grid-template-columns: 1fr; } .rankLineage { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .myRanksOnboarding { display: block; } .myRanksOnboardingActions { justify-content: flex-start; margin-top: 10px; } }
@media (max-width: 800px) { .myRanksOpinionSummary { grid-template-columns: 1fr; } }
.tab {
  border: 0;
  border-radius: 9px 9px 0 0;
  padding: 11px 15px;
  background: transparent;
  color: #405160;
  cursor: pointer;
  font-weight: 700;
}
.tab.active {
  background: #f3f4f6;
  color: var(--ink);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.8);
}

.tab.sleeperLocked {
  color: var(--muted);
  opacity: 0.68;
}

.tab.sleeperLocked .tabLabel::after {
  content: "  🔒";
  font-size: 0.82em;
}

.sleeperLockedCard {
  display: grid;
  justify-items: center;
  gap: 9px;
  min-height: 230px;
  margin: 8px;
  padding: 48px 24px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(96, 165, 250, 0.055);
  text-align: center;
}

.sleeperLockedCard h3 {
  margin: 0;
  color: var(--head);
  font-family: var(--font-display);
}

.sleeperLockedCard p {
  max-width: 480px;
  margin: 0 0 8px;
  color: var(--muted);
  line-height: 1.55;
}

.sleeperLockIcon {
  font-size: 28px;
}

main { padding: 20px 26px 32px; }
.draftControls {
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.draftControls .settingsPanel,
.draftControls .filters,
.draftControls .kpis {
  padding: 14px;
}
.draftControls .settingsPanel,
.draftControls .filters {
  margin-bottom: 0;
}
.draftControls .kpis {
  margin-bottom: 0;
  border-top: 1px solid var(--line);
}
.settingsPanel, .filters, .kpis {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}
.settingsPanel {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  align-items: center;
}
.weightBlock,
.boardOrderBlock {
  grid-column: span 2;
}
.settingBlock, .rosterText {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  box-shadow: var(--shadow-soft);
}
.settingBlock label, .filters label, .assistantControls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.weightControl {
  display: grid;
  grid-template-columns: 28px minmax(120px, 1fr) 28px 58px;
  gap: 8px;
  align-items: center;
}
.weightControl button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0B1220;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
}
.weightControl button:hover {
  border-color: var(--accent);
  background: #132039;
}
.weightControl input[type="range"] {
  min-width: 0;
}
.weightNumber {
  height: 30px;
  padding: 6px 8px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.boardOrderBlock {
  min-width: 300px;
}
.boardOrderBlock label {
  align-items: center;
  grid-template-columns: auto 18px;
  justify-content: start;
}
.settingHelp {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.rosterText { color: var(--muted); font-size: 13px; }
.filters {
  grid-template-columns: repeat(7, minmax(120px, 1fr)) auto;
  align-items: end;
}
.resetButton {
  height: 41px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 16px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}
.resetButton:hover {
  background: var(--accent-soft);
  border-color: #9ccbc3;
}
.kpis { grid-template-columns: repeat(5, 1fr); }
.kpis button, .panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.kpis button {
  position: relative;
  overflow: hidden;
  padding: 16px 16px 15px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.kpis button:hover,
.kpis button:focus-visible {
  border-color: var(--accent-2);
  transform: translateY(-1px);
  outline: none;
}
.kpis button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: #9ca3af;
}
.kpis button:nth-child(2)::before { background: var(--good); }
.kpis button:nth-child(3)::before { background: var(--accent-2); }
.kpis button:nth-child(4)::before { background: var(--bad); }
.kpis button:nth-child(5)::before { background: #6b7280; }
.kpis span, .metric span, .panelHeader span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.kpis strong { display: block; margin-top: 8px; font-size: 30px; line-height: 1; }

.view { display: none; }
.view.active { display: block; }
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 18px;
  align-items: start;
}
.draftBoardOnly {
  grid-template-columns: minmax(0, 1fr);
}
.draftDetailHidden {
  display: none;
}
.assistantLayout, .auditLayout {
  grid-template-columns: 1fr 1fr;
}
.panelHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  border-radius: 8px 8px 0 0;
}
.panelHeader h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.panelHeader h2::before {
  content: "";
  display: none;
}
.tableWrap { overflow: auto; max-height: calc(100vh - 340px); }
.boardPanel {
  min-height: 0;
  min-width: 0;
}
.boardPanel .tableWrap {
  height: calc(100vh - 410px);
  min-height: 420px;
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  border-radius: 0 0 8px 8px;
}
.boardPanel table {
  width: max-content;
  min-width: 1120px;
}
.tableWrap.small { max-height: 360px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
th, td {
  padding: 10px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
td:nth-child(3) span {
  display: inline-block;
  max-width: 360px;
  margin-top: 3px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f9fafb;
  color: #374151;
  font-size: 11px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0;
  box-shadow: inset 0 -1px 0 #cbd8df;
}
td {
  background: #fff;
}
tbody tr:nth-child(even) td {
  background: #f9fbfc;
}
tbody tr:nth-child(even) td {
  background: #f8fafc;
}
tbody tr:hover td {
  background: #eef4ff;
}
tbody tr.selected td {
  background: #e8f0ff;
  box-shadow: inset 0 1px 0 #9db8f6, inset 0 -1px 0 #9db8f6;
}
.boardPanel th:nth-child(1),
.boardPanel td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 5;
  min-width: 88px;
  box-shadow: 1px 0 0 var(--line);
}
.boardPanel th:nth-child(2),
.boardPanel td:nth-child(2) {
  position: sticky;
  left: 88px;
  z-index: 5;
  min-width: 64px;
  box-shadow: 1px 0 0 var(--line);
}
.boardPanel th:nth-child(3),
.boardPanel td:nth-child(3) {
  position: sticky;
  left: 152px;
  z-index: 5;
  min-width: 275px;
  box-shadow: 1px 0 0 var(--line);
}
.boardPanel th:nth-child(1),
.boardPanel th:nth-child(2),
.boardPanel th:nth-child(3) {
  z-index: 6;
}
.boardPanel td:nth-child(2) {
  color: var(--ink);
  font-weight: 800;
  font-size: 17px;
}
.boardPanel td[data-col="adp"],
.boardPanel td[data-col="market"],
.boardPanel td[data-col="model"] {
  font-variant-numeric: tabular-nums;
}

/* Sources and Methodology workspace navigation */
.detailInsightDrawer.sourcesOpen > .playerDrawerClose { display: none !important; }
.methodologyShell { position: relative; padding: 0 !important; overflow: visible; }
.methodologyFixedHeader { position: sticky; top: 0; z-index: 80; display: grid; grid-template-columns: minmax(185px, .8fr) minmax(260px, 1.8fr) auto auto auto; align-items: center; gap: 9px; min-height: 70px; padding: 12px 14px; border-bottom: 1px solid rgba(148, 163, 184, .2); background: linear-gradient(180deg, rgba(11, 18, 32, .98), rgba(11, 18, 32, .94)); backdrop-filter: blur(14px); }
.methodologyFixedTitle { min-width: 0; }
.methodologyFixedTitle > span { color: #60A5FA; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.methodologyFixedTitle h2 { margin: 3px 0 0; color: #F8FAFC; font-size: 16px; }
.methodologyHeaderSearch input { width: 100%; min-height: 35px; box-sizing: border-box; padding: 8px 10px; border: 1px solid rgba(96, 165, 250, .28); border-radius: 8px; background: rgba(7, 17, 31, .88); color: #E2E8F0; }
.methodologyIndexToggle, .methodologyViewToggle button, .methodologyHeaderClose, .methodologyHeaderSearch input, .methodologyPrimaryFilters select, .methodologyPrimaryFilters button, .methodologyAdvancedFilters select, .methodologyAdvancedFilters button, .methodologySearchToolbar button, .methodologySourceActions button, .methodologyPageCard footer button, .methodologySectionNav button, .methodologyBackToTop { font: inherit; }
.methodologyIndexToggle, .methodologyViewToggle button, .methodologyHeaderClose { min-height: 34px; padding: 7px 10px; border: 1px solid rgba(148, 163, 184, .25); border-radius: 7px; background: rgba(15, 23, 42, .85); color: #CBD5E1; font-size: 10px; font-weight: 800; cursor: pointer; }
.methodologyHeaderClose { border-color: rgba(248, 113, 113, .45); color: #FECACA; }
.methodologyIndexToggle:hover, .methodologyViewToggle button:hover, .methodologyHeaderClose:hover { border-color: #60A5FA; color: #F8FAFC; }
.methodologyViewToggle { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid rgba(148, 163, 184, .2); border-radius: 8px; background: rgba(7, 17, 31, .7); }
.methodologyViewToggle button[aria-pressed="true"] { background: #2563EB; color: #fff; border-color: #60A5FA; }
.methodologyWorkspace { display: grid; grid-template-columns: 238px minmax(0, 1fr); align-items: start; gap: 16px; padding: 16px; }
.methodologyIndex { position: sticky; top: 84px; max-height: calc(100vh - 112px); overflow: auto; padding: 10px; border: 1px solid rgba(148, 163, 184, .2); border-radius: 10px; background: rgba(7, 17, 31, .72); scrollbar-width: thin; }
.methodologyIndexHeader { display: grid; gap: 3px; margin-bottom: 12px; padding: 2px 4px 9px; border-bottom: 1px solid rgba(148, 163, 184, .16); }
.methodologyIndexHeader strong { color: #F8FAFC; font-size: 12px; }
.methodologyIndexHeader span, .methodologyIndexGroup h3 { color: #7F91AA; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.methodologyIndexGroup { margin: 0 0 13px; }
.methodologyIndexGroup h3 { margin: 0 4px 5px; color: #60A5FA; }
.methodologyIndexGroup > div { display: grid; gap: 2px; }
.methodologyIndexLink { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 6px 7px; border-left: 2px solid transparent; border-radius: 5px; color: #B8C7D9; font-size: 10px; line-height: 1.25; text-decoration: none; }
.methodologyIndexLink small { color: #64748B; font-size: 8px; text-align: right; }
.methodologyIndexLink:hover, .methodologyIndexLink:focus-visible { background: rgba(37, 99, 235, .15); color: #E0F2FE; outline: none; }
.methodologyIndexLink.is-active { border-left-color: #38BDF8; background: rgba(37, 99, 235, .22); color: #F8FAFC; }
.methodologyContent { min-width: 0; scroll-behavior: smooth; }
.methodologyContent > section, .methodologyContent > .sourceFamilyGrid, .methodologyContent > .sourcePageCoverage, .methodologyContent > .sourceDatasetList, .methodologyContent > .methodologySearchResults { scroll-margin-top: 86px; }
.methodologyIntro { scroll-margin-top: 86px; }
.methodologyShell .methodologySourceList { display: grid; gap: 8px; }
.methodologyShell .methodologySourceCard { scroll-margin-top: 86px; }
.methodologySourceCompact { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 3px 9px; max-width: 560px; color: #93C5FD; font-size: 9px; line-height: 1.3; }
.methodologySourceCompact small { display: block; min-width: 0; }
.methodologySourceCompact b { color: #7F91AA; font-size: 8px; text-transform: uppercase; }
.methodologySourceActions { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 11px; }
.methodologySourceActions button, .methodologyPageCard footer button { padding: 5px 7px; border: 1px solid rgba(96, 165, 250, .25); border-radius: 5px; background: rgba(30, 64, 175, .16); color: #BFDBFE; font-size: 9px; cursor: pointer; }
.methodologySourceActions button:hover, .methodologyPageCard footer button:hover { border-color: #60A5FA; background: rgba(37, 99, 235, .28); color: #fff; }
.methodologySourceAtoJ { scroll-margin-top: 86px; }
.methodologyShell .sourceAuditSearch, .methodologyShell [data-source-audit-mode] { display: none; }
.methodologyPrimaryFilters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 7px; }
.methodologyPrimaryFilters > span { color: #60A5FA; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.methodologyPrimaryFilters select, .methodologyPrimaryFilters button, .methodologyAdvancedFilters select, .methodologyAdvancedFilters button { min-height: 30px; padding: 6px 8px; border: 1px solid rgba(148, 163, 184, .25); border-radius: 6px; background: #0B1628; color: #CBD5E1; font-size: 10px; }
.methodologyPrimaryFilters button, .methodologyAdvancedFilters button { cursor: pointer; }
.methodologyAdvancedFilters { margin: 0 0 10px; border: 1px solid rgba(148, 163, 184, .17); border-radius: 8px; background: rgba(7, 17, 31, .45); }
.methodologyAdvancedFilters > summary { padding: 8px 10px; color: #93C5FD; font-size: 10px; font-weight: 800; cursor: pointer; }
.methodologyAdvancedFilters > summary span { margin-left: 8px; color: #64748B; font-weight: 500; }
.methodologyAdvancedFilters[open] > summary { border-bottom: 1px solid rgba(148, 163, 184, .15); }
.methodologyAdvancedFilters .sourceAuditControls { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px; }
.methodologyActiveFilterChips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.methodologyFilterChip { padding: 4px 7px; border: 1px solid rgba(96, 165, 250, .3); border-radius: 999px; background: rgba(30, 64, 175, .18); color: #BFDBFE; font-size: 9px; cursor: pointer; }
.methodologyActiveFilterChips > button:last-child { padding: 4px 7px; border: 0; background: transparent; color: #94A3B8; font-size: 9px; cursor: pointer; }
.methodologySearchResults { margin: 10px 0 16px; padding: 11px; border: 1px solid rgba(96, 165, 250, .25); border-radius: 10px; background: rgba(7, 17, 31, .72); }
.methodologySearchToolbar { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.methodologySearchToolbar strong { color: #F8FAFC; font-size: 11px; }
.methodologySearchToolbar > span { color: #7F91AA; font-size: 9px; }
.methodologySearchToolbar > div { display: flex; gap: 4px; }
.methodologySearchToolbar button { padding: 5px 7px; border: 1px solid rgba(148, 163, 184, .22); border-radius: 5px; background: rgba(15, 23, 42, .8); color: #BFDBFE; font-size: 9px; cursor: pointer; }
.methodologySearchResults > p { color: #94A3B8; font-size: 10px; }
.methodologySearchGroup { margin-top: 10px; }
.methodologySearchGroup h4 { display: flex; justify-content: space-between; margin: 0 0 5px; color: #60A5FA; font-size: 10px; text-transform: uppercase; }
.methodologySearchGroup h4 small { color: #7F91AA; }
.methodologySearchResult { display: grid; width: 100%; gap: 3px; margin: 3px 0; padding: 7px 8px; border: 1px solid transparent; border-radius: 6px; background: rgba(15, 23, 42, .7); color: #CBD5E1; text-align: left; cursor: pointer; }
.methodologySearchResult:hover, .methodologySearchResult.is-selected { border-color: rgba(96, 165, 250, .42); background: rgba(30, 64, 175, .2); }
.methodologySearchResult strong { color: #F8FAFC; font-size: 10px; }
.methodologySearchResult span { color: #94A3B8; font-size: 9px; line-height: 1.35; }
.methodologySearchResult mark { background: rgba(250, 204, 21, .35); color: #FEF3C7; }
.methodologySelectedSourceSummary { margin: 10px 0 16px; padding: 12px; border: 1px solid rgba(56, 189, 248, .38); border-radius: 10px; background: linear-gradient(135deg, rgba(14, 47, 78, .7), rgba(7, 17, 31, .82)); scroll-margin-top: 86px; box-shadow: 0 12px 28px rgba(2, 6, 23, .2); }
.methodologySelectedSourceSummary > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(148, 163, 184, .16); }
.methodologySelectedSourceSummary > header span:first-child { color: #38BDF8; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.methodologySelectedSourceSummary h3 { margin: 3px 0 2px; color: #F8FAFC; font-size: 16px; }
.methodologySelectedSourceSummary > header p { margin: 0; color: #93C5FD; font-size: 9px; }
.methodologySelectedSourceLead { margin: 9px 0; color: #E2E8F0; font-size: 10px; line-height: 1.45; }
.methodologySelectedSourceGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.methodologySelectedSourceGrid > div { min-width: 0; padding: 7px; border-radius: 6px; background: rgba(7, 17, 31, .52); }
.methodologySelectedSourceGrid span { display: block; color: #60A5FA; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.methodologySelectedSourceGrid strong { display: block; margin-top: 3px; color: #CBD5E1; font-size: 9px; line-height: 1.35; }
.methodologySelectedSourceActions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.methodologySelectedSourceActions button { padding: 5px 7px; border: 1px solid rgba(96, 165, 250, .3); border-radius: 5px; background: rgba(30, 64, 175, .2); color: #BFDBFE; font: inherit; font-size: 9px; cursor: pointer; }
.methodologySelectedSourceActions button:hover { border-color: #60A5FA; background: rgba(37, 99, 235, .3); color: #fff; }
.methodologyGroupedCalculations { display: grid; }
.methodologyCalculationSection { display: none; }
.methodologyCalculationCategory { margin: 0 0 8px; border: 1px solid rgba(148, 163, 184, .2); border-radius: 9px; background: rgba(15, 23, 42, .48); scroll-margin-top: 86px; }
.methodologyCalculationCategory > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(148, 163, 184, .15); }
.methodologyCalculationCategory > header span { color: #60A5FA; font-size: 8px; letter-spacing: .1em; }
.methodologyCalculationCategory > header h4 { margin: 3px 0; color: #F8FAFC; font-size: 12px; }
.methodologyCalculationCategory > header small { color: #7F91AA; font-size: 9px; }
.methodologyCalculationCategory > header button { padding: 5px 7px; border: 1px solid rgba(96, 165, 250, .25); border-radius: 5px; background: rgba(30, 64, 175, .15); color: #BFDBFE; font-size: 9px; cursor: pointer; }
.methodologyCalculationCategory .methodologyCalculationGrid { padding: 8px; }
.methodologyCalculationCategory .methodologyCalculationCard { scroll-margin-top: 86px; }
.methodologyView-simple .methodologyCalculationLayer2, .methodologyView-simple .methodologyCalculationLayer3, .methodologyView-simple .methodologySourceAtoJ, .methodologyView-simple .methodologySourceDatasets, .methodologyView-simple .methodologyTechnicalWorkspace { display: none; }
.methodologyView-full .methodologyCalculationLayer2, .methodologyView-full .methodologyCalculationLayer3 { display: block; }
.methodologyView-full .methodologySourceAtoJ, .methodologyView-full .methodologySourceDatasets, .methodologyView-full .methodologyTechnicalWorkspace { display: grid; }
.methodologyView-full .methodologyTechnicalWorkspace { display: block; }
.methodologyPageCardGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.methodologyPageCard { min-width: 0; padding: 11px; border: 1px solid rgba(148, 163, 184, .2); border-radius: 9px; background: rgba(15, 23, 42, .55); scroll-margin-top: 86px; }
.methodologyPageCard > header { display: flex; justify-content: space-between; gap: 8px; align-items: start; padding-bottom: 8px; border-bottom: 1px solid rgba(148, 163, 184, .14); }
.methodologyPageCard > header span { color: #60A5FA; font-size: 8px; letter-spacing: .1em; }
.methodologyPageCard h4 { margin: 3px 0 0; color: #F8FAFC; font-size: 13px; }
.methodologyPageCard > header > strong { color: #86EFAC; font-size: 10px; }
.methodologyPageGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.methodologyPageGrid > div { min-width: 0; padding: 7px; border-radius: 6px; background: rgba(7, 17, 31, .5); }
.methodologyPageGrid span, .methodologyQualityGrid h4, .methodologyTechnicalCards h4 { color: #93C5FD; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.methodologyPageGrid p, .methodologyQualityGrid p, .methodologyTechnicalCards p { margin: 4px 0 0; color: #B8C7D9; font-size: 9px; line-height: 1.4; }
.methodologyPageCard footer { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.methodologyQualityWorkspace { display: block; }
.methodologyFreshnessSummary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.methodologyFreshnessSummary .methodologyRefreshCard { min-height: 110px; }
.methodologyFreshnessSummary .methodologyRefreshCard p { margin: 4px 0 0; color: #94A3B8; font-size: 9px; line-height: 1.35; }
.methodologyFreshnessSummary .methodologyRefreshCard p b { color: #CBD5E1; }
.methodologyQualityGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.methodologyQualityGrid > article { padding: 10px; border: 1px solid rgba(148, 163, 184, .17); border-radius: 8px; background: rgba(7, 17, 31, .52); scroll-margin-top: 86px; }
.methodologyCoverageMiniGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.methodologyCoverageMiniGrid button { display: grid; gap: 2px; padding: 6px; border: 1px solid rgba(96, 165, 250, .18); border-radius: 5px; background: rgba(30, 64, 175, .12); color: #CBD5E1; text-align: left; cursor: pointer; }
.methodologyCoverageMiniGrid button:hover { border-color: #60A5FA; }
.methodologyCoverageMiniGrid strong { color: #F8FAFC; font-size: 9px; }
.methodologyCoverageMiniGrid span { color: #94A3B8; font-size: 8px; line-height: 1.3; }
.methodologyCoverageMiniGrid b { color: #86EFAC; font-size: 10px; }
.methodologyQualityGrid button:not(.methodologyCoverageMiniGrid button) { margin-top: 7px; padding: 6px 8px; border: 1px solid rgba(96, 165, 250, .25); border-radius: 5px; background: rgba(30, 64, 175, .16); color: #BFDBFE; font-size: 9px; cursor: pointer; }
.methodologyQualityStatus { display: inline-block; margin-top: 8px; color: #86EFAC; font-size: 9px; }
.methodologyTechnicalCards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.methodologyTechnicalCards > article { padding: 9px; border: 1px solid rgba(148, 163, 184, .17); border-radius: 7px; background: rgba(7, 17, 31, .5); scroll-margin-top: 86px; }
.methodologySectionNav { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, .16); }
.methodologySectionNav button, .methodologyBackToTop { padding: 7px 9px; border: 1px solid rgba(96, 165, 250, .25); border-radius: 6px; background: rgba(30, 64, 175, .15); color: #BFDBFE; font-size: 9px; cursor: pointer; }
.methodologyBackToTop { position: fixed; right: 34px; bottom: 34px; z-index: 90; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.methodologyQuickAnswers > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.methodologyQuickAnswers details { border: 1px solid rgba(148, 163, 184, .17); border-radius: 7px; background: rgba(7, 17, 31, .5); }
.methodologyQuickAnswers summary { display: flex; justify-content: space-between; gap: 8px; padding: 8px; color: #E2E8F0; font-size: 10px; cursor: pointer; }
.methodologyQuickAnswers summary span { color: #60A5FA; font-size: 8px; white-space: nowrap; }
.methodologyQuickAnswers details > div { padding: 0 8px 8px; }
.methodologyQuickAnswers p { margin: 0 0 5px; color: #B8C7D9; font-size: 9px; line-height: 1.4; }
.methodologyQuickAnswers a { color: #93C5FD; font-size: 9px; }
.methodologyIndexToggle { display: inline-flex; }
@media (max-width: 980px) {
  .methodologyFixedHeader { grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.5fr) auto auto; }
  .methodologyHeaderClose { grid-column: 4; }
  .methodologyWorkspace { grid-template-columns: 1fr; }
  .methodologyIndex { position: fixed; top: 68px; left: 0; bottom: 0; z-index: 120; width: min(290px, 86vw); max-height: none; border-radius: 0 12px 12px 0; transform: translateX(-110%); transition: transform .2s ease; }
  .methodologyShell.methodologyIndexOpen .methodologyIndex { transform: translateX(0); }
  .methodologyPageCardGrid { grid-template-columns: 1fr; }
  .methodologyTechnicalCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .methodologyFreshnessSummary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .methodologyFixedHeader { grid-template-columns: 1fr auto auto; gap: 6px; padding: 9px 10px; }
  .methodologyFixedTitle h2 { font-size: 13px; }
  .methodologyHeaderSearch { grid-column: 1 / -1; grid-row: 2; }
  .methodologyIndexToggle { grid-column: 2; grid-row: 1; }
  .methodologyViewToggle { grid-column: 3; grid-row: 1; }
  .methodologyHeaderClose { grid-column: 1; grid-row: 3; justify-self: start; }
  .methodologyWorkspace { padding: 10px; }
  .methodologySourceCompact { grid-template-columns: 1fr; }
  .methodologySelectedSourceGrid { grid-template-columns: 1fr; }
  .methodologyPageGrid, .methodologyQuickAnswers > div:last-child, .methodologyQualityGrid { grid-template-columns: 1fr; }
  .methodologyFreshnessSummary, .methodologyTechnicalCards { grid-template-columns: 1fr; }
  .methodologySearchToolbar { grid-template-columns: 1fr; }
  .methodologySearchToolbar > div { justify-content: flex-start; }
  .methodologyAdvancedFilters > summary span { display: block; margin: 4px 0 0; }
  .methodologyBackToTop { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .methodologyContent { scroll-behavior: auto; }
  .methodologyIndex { transition: none; }
}

/* Shared information tooltip: short hover/focus copy plus a pinned
   explanation for click/tap and keyboard users. */
.appInfoTooltip {
  max-height: calc(100vh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
}

.appInfoTooltip strong {
  display: block;
  margin-bottom: 6px;
  color: #ffffff;
  font-size: 0.82rem;
  line-height: 1.25;
}

.appInfoTooltip p {
  margin: 0;
}

.appInfoTooltip dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.appInfoTooltip dl div { display: grid; gap: 2px; }
.appInfoTooltip dt {
  color: #9fb8d4;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.appInfoTooltip dd { margin: 0; color: #e4edf8; font-weight: 520; }
.appInfoTooltip.isPinned { pointer-events: auto; }
.infoTooltipActions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.infoTooltipActions button {
  border: 1px solid rgba(147, 197, 253, 0.42);
  border-radius: 6px;
  padding: 5px 8px;
  background: rgba(37, 99, 235, 0.2);
  color: #dbeafe;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 760;
}
.infoTooltipActions button:hover,
.infoTooltipActions button:focus-visible { background: rgba(37, 99, 235, 0.38); }

/* Draft board header hierarchy: keep the controls quiet, but make the
   table's scan structure obvious against the player data below it. */
.boardPanel #draftTable thead {
  background: #eef3f8;
}
.boardPanel #draftTable thead th {
  min-height: 40px;
  padding: 10px 8px;
  color: #aebbd0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  background: #142238;
  border-bottom: 1px solid rgba(130, 155, 190, .22);
  box-shadow: none;
}
.boardPanel #draftTable thead th.is-sorted {
  color: #f1f5fb;
  background: #192b45;
}
.boardPanel #draftTable .sort-arrow {
  display: inline-block;
  margin-left: 4px;
  color: var(--good);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.boardPanel #draftTable .header-info {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  color: #71839a;
  font-size: 9px;
  opacity: .45;
  transform: scale(.9);
  transition: opacity .15s ease, color .15s ease;
}
.boardPanel #draftTable th:hover .header-info,
.boardPanel #draftTable th:focus-within .header-info {
  color: #3f6fa8;
  opacity: .85;
}

/* Keep board definitions beside the icon instead of dropping them over the
   player rows. The final signal columns open to the left so their tooltips
   remain inside the horizontally scrollable table. */
.boardPanel #draftTable .infoIcon::after {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}
.boardPanel #draftTable .infoIcon::before {
  left: calc(100% + 2px);
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #102331;
}
.boardPanel #draftTable th:nth-child(n + 14) .infoIcon::after {
  right: calc(100% + 8px);
  left: auto;
}
.boardPanel #draftTable th:nth-child(n + 14) .infoIcon::before {
  right: calc(100% + 2px);
  left: auto;
  border-right-color: transparent;
  border-left-color: #102331;
}

/* Major scan groups: Player | Market and Model | Draft Decision | Signals. */
.boardPanel #draftTable th:nth-child(6),
.boardPanel #draftTable td:nth-child(6),
.boardPanel #draftTable th:nth-child(10),
.boardPanel #draftTable td:nth-child(10),
.boardPanel #draftTable th:nth-child(14),
.boardPanel #draftTable td:nth-child(14) {
  border-left: 1px solid rgba(130, 155, 190, .1);
}

/* Keep numeric/status columns aligned with the values in their cells. */
.boardPanel #draftTable th:nth-child(2),
.boardPanel #draftTable td:nth-child(2),
.boardPanel #draftTable th:nth-child(4),
.boardPanel #draftTable td:nth-child(4),
.boardPanel #draftTable th:nth-child(5),
.boardPanel #draftTable td:nth-child(5),
.boardPanel #draftTable th:nth-child(6),
.boardPanel #draftTable td:nth-child(6),
.boardPanel #draftTable th:nth-child(7),
.boardPanel #draftTable td:nth-child(7),
.boardPanel #draftTable th:nth-child(8),
.boardPanel #draftTable td:nth-child(8),
.boardPanel #draftTable th:nth-child(14),
.boardPanel #draftTable td:nth-child(14),
.boardPanel #draftTable th:nth-child(15),
.boardPanel #draftTable td:nth-child(15),
.boardPanel #draftTable th:nth-child(16),
.boardPanel #draftTable td:nth-child(16) {
  text-align: center;
}
.boardPanel #draftTable th:nth-child(1),
.boardPanel #draftTable td:nth-child(1),
.boardPanel #draftTable th:nth-child(3),
.boardPanel #draftTable td:nth-child(3),
.boardPanel #draftTable th:nth-child(9),
.boardPanel #draftTable td:nth-child(9),
.boardPanel #draftTable th:nth-child(10),
.boardPanel #draftTable td:nth-child(10),
.boardPanel #draftTable th:nth-child(11),
.boardPanel #draftTable td:nth-child(11),
.boardPanel #draftTable th:nth-child(12),
.boardPanel #draftTable td:nth-child(12),
.boardPanel #draftTable th:nth-child(13),
.boardPanel #draftTable td:nth-child(13),
.boardPanel #draftTable th:nth-child(17),
.boardPanel #draftTable td:nth-child(17) {
  text-align: left;
}
.infoIcon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border: 1px solid #91a5b2;
  border-radius: 50%;
  color: #405160;
  background: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
  text-transform: none;
}
.draftRankInfoIcon { flex: 0 0 16px; color: #203b52; background: #dbeafe; border-color: #8fa8bd; }
.infoIcon::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  display: none;
  width: 240px;
  max-width: 70vw;
  padding: 8px 9px;
  border-radius: 8px;
  background: #102331;
  color: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  z-index: 20;
  pointer-events: none;
}
.infoIcon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translateX(-50%);
  display: none;
  border: 6px solid transparent;
  border-bottom-color: #102331;
  z-index: 21;
}
.infoIcon:hover::after,
.infoIcon:focus::after,
.infoIcon:hover::before,
.infoIcon:focus::before {
  display: block;
}
tbody tr { cursor: pointer; }

.detailPanel { position: sticky; top: 14px; }
.detail, .recommendation, .assistantControls, .rosterGrid, .compareControls, .compareGrid, .auditGrid, .warningList, .teamGrid {
  padding: 18px;
}
.detail h3 { font-size: 24px; margin-bottom: 5px; }
.subline { color: var(--muted); margin-bottom: 13px; }
.metricGrid, .compareGrid, .rosterGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.compareGrid {
  align-items: start;
  gap: 16px;
}

.comparePlayerCard {
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.comparePlayerCard header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.comparePlayerCard header h3 {
  margin: 0;
  font-size: 24px;
}

.comparePlayerCard header > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #0B1220;
  color: #F8FAFC;
  font-size: 20px;
}

.compareCoreGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.compareCoreGrid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.compareInsightBlock,
.compareHistoryBlock {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: #0B1220;
}

.compareInsightBlock h4,
.compareStatTable h4 {
  color: var(--ink);
  font-size: 13px;
}

.compareInsightBlock p {
  color: #CBD5E1;
  line-height: 1.5;
}

.compareStatTable {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #111827;
}

.compareStatTable h4 {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}

.compareStatTable table {
  min-width: 520px;
  width: 100%;
}
.metric {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(23, 33, 43, 0.03);
}
.metric strong { font-size: 16px; color: #20313e; }
.metric span {
  text-transform: uppercase;
  letter-spacing: 0;
}
.draftGradeVerdictLine {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 8px;
  background: rgba(20, 83, 45, 0.18);
  color: #DCFCE7;
  font-weight: 750;
}
.draftGradeVerdictLine strong {
  color: #86EFAC;
}
.draftGradeDetailHeader {
  display: grid;
  gap: 8px;
  padding: 2px 46px 2px 0;
}
.draftGradeDetailHeader > span {
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.draftGradeDetailHeader h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.08;
}
.draftGradeMetricGrid {
  align-items: stretch;
}
.draftGradeMetric {
  min-height: 72px;
  background: rgba(15, 23, 42, 0.38);
}
.draftGradeMetric strong {
  color: var(--ink-strong);
  font-size: 21px;
}
.draftGradeMetric span {
  font-weight: 900;
}
.draftGradeMetric.score {
  border-color: rgba(96, 165, 250, 0.54);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.30), rgba(15, 23, 42, 0.40));
}
.draftGradeMetric.score span,
.draftGradeMetric.score strong {
  color: #BFDBFE;
}
.draftGradeMetric.score strong {
  font-size: 24px;
}
.draftGradeMetric.value {
  border-color: rgba(34, 197, 94, 0.38);
  background: rgba(20, 83, 45, 0.22);
}
.draftGradeMetric.value span,
.draftGradeMetric.value strong {
  color: #86EFAC;
}
.draftGradeMetric.reach {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(127, 29, 29, 0.24);
}
.draftGradeMetric.reach span,
.draftGradeMetric.reach strong {
  color: #FCA5A5;
}
.draftGradeMetric.fair {
  border-color: rgba(245, 158, 11, 0.36);
  background: rgba(120, 53, 15, 0.18);
}
.draftGradeMetric.fair span,
.draftGradeMetric.fair strong {
  color: #FCD34D;
}
.draftGradeMetric.projection {
  border-color: rgba(56, 189, 248, 0.32);
  background: rgba(12, 74, 110, 0.20);
}
.draftGradeMetric.projection span,
.draftGradeMetric.projection strong {
  color: #7DD3FC;
}
.draftGradeMetric.secondary {
  opacity: .82;
}
.explain {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #dbe6eb;
  border-radius: 8px;
  background: #fafafa;
  color: #334155;
  line-height: 1.45;
}
.richExplain h3 {
  margin-bottom: 10px;
  font-size: 18px;
}
.explainSubsection {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 12px;
}
.explainSubsection:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.explainSubsection h4 {
  margin: 0 0 6px;
  font-size: 13px;
  color: #12312f;
}
.explainSubsection p {
  margin: 0;
}
.driverList { margin: 8px 0 0; padding-left: 18px; }
.driverList li + li {
  margin-top: 5px;
}
.qualitativeList {
  list-style: none;
  padding-left: 0;
}
.qualitativeList li {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0B1220;
}
.qualitativeList li strong,
.qualitativeList li span {
  display: block;
}
.qualitativeList li strong {
  color: #F8FAFC;
}
.qualitativeList li span {
  margin-top: 4px;
  color: #CBD5E1;
  font-size: 12px;
  line-height: 1.45;
}
.contributionList {
  display: grid;
  gap: 8px;
}
.contributionList div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: #fff;
}
.contributionList strong,
.contributionList span {
  display: block;
}
.contributionList span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.contributionExplainBlock {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.28);
}

.contributionExplainHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.contributionExplainHeader span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.contributionExplainHeader h5 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.contributionExplainHeader > strong {
  color: var(--ink);
  font-size: 22px;
}

.contributionExplainRow {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.72);
}

.contributionExplainText {
  display: grid;
  gap: 4px;
}

.contributionExplainText strong {
  color: var(--ink);
  font-size: 12px;
}

.contributionExplainText span,
.contributionExplainText em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.contributionSummaryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.contributionSummaryGrid article,
.contributionReadGrid section {
  min-width: 0;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 10px;
  padding: 12px;
  background: rgba(11, 18, 32, 0.74);
}

.contributionSummaryGrid span {
  display: block;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contributionSummaryGrid strong {
  display: block;
  margin-top: 5px;
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.25;
}

.contributionReadGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.contributionReadGrid h5 {
  margin: 0 0 9px;
  color: #f8fafc;
  font-size: 12px;
}

.contributionReadGrid ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contributionReadGrid li {
  display: grid;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.contributionReadGrid li:first-child {
  padding-top: 0;
  border-top: 0;
}

.contributionReadGrid li strong {
  color: #e5e7eb;
  font-size: 12px;
}

.contributionReadGrid li span {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.4;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  margin-right: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}
.good { background: #e6f4ee; color: var(--good); }
.bad { background: #fbe9e9; color: var(--bad); }
.warn { background: #f6efe1; color: var(--warn); }
.neutral { background: #f1f3f5; color: #374151; }
.blue { background: #eaf1ff; color: #1d4ed8; }

.draftHealth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}
.draftHealthMain {
  display: grid;
  gap: 10px;
}
.liveDraftTitle {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.liveDraftTitle strong {
  font-size: 14px;
}
.liveDraftTitle span,
.liveDraftMetrics span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.liveDraftMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.liveDraftMetrics div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #0B1220;
}
.liveDraftMetrics strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 13px;
}
.healthCards {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 10px;
}
.healthCard {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.healthCard strong {
  color: var(--ink);
  font-size: 14px;
}
.healthCard span,
.healthCard button {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.healthCard button {
  width: fit-content;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.healthCard button:hover,
.healthCard button:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.healthWarnings {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 260px;
}
.healthCard button.active {
  border: 1px solid rgba(52, 211, 153, 0.62);
  border-radius: 6px;
  padding: 3px 7px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.24), rgba(16, 185, 129, 0.16));
  color: #d1fae5;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.08);
}
.healthCard button.active:hover,
.healthCard button.active:focus-visible {
  color: #ecfdf5;
  text-decoration: none;
  border-color: rgba(147, 197, 253, 0.78);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.32), rgba(16, 185, 129, 0.22));
}
.healthWarnings span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f6efe1;
  color: var(--warn);
  font-size: 12px;
  font-weight: 800;
}

.draftHealthFocusPanel {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 10px;
  padding: 16px;
  background: #0B1220;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.draftHealthFocusHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.draftHealthFocusHeader h3 {
  color: #F8FAFC;
  font-size: 17px;
  line-height: 1.2;
}

.draftHealthFocusHeader p {
  max-width: 780px;
  margin-top: 5px;
  color: #AAB8CB;
  font-size: 12px;
  line-height: 1.45;
}

.draftHealthCloseButton,
.draftHealthOpenButton {
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 8px;
  background: rgba(96, 165, 250, 0.12);
  color: #DBEAFE;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.draftHealthCloseButton {
  flex: 0 0 auto;
  padding: 7px 10px;
}

.draftHealthOpenButton {
  align-self: center;
  justify-self: end;
  padding: 8px 12px;
}

.draftHealthCloseButton:hover,
.draftHealthCloseButton:focus-visible,
.draftHealthOpenButton:hover,
.draftHealthOpenButton:focus-visible {
  border-color: rgba(147, 197, 253, 0.68);
  background: rgba(96, 165, 250, 0.2);
}

.draftHealthFocusMetrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}

.draftHealthMetric {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 82px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: 11px 12px;
  background: #111827;
}

.draftHealthMetric span,
.draftHealthFocusRead span {
  color: #93C5FD;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.draftHealthMetric strong {
  color: #F8FAFC;
  font-size: 20px;
  line-height: 1.1;
}

.draftHealthMetric em {
  color: #94A3B8;
  font-size: 11px;
  font-style: normal;
  line-height: 1.25;
}

.draftHealthFocusRead {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 8px;
  padding: 12px;
  background: rgba(52, 211, 153, 0.08);
}

.draftHealthFocusRead p {
  color: #D1FAE5;
  font-size: 13px;
  line-height: 1.45;
}

.draftHealthLimitNote {
  color: #CBD5E1;
  font-size: 12px;
  font-weight: 750;
}

.draftHealthFocusList {
  display: grid;
  gap: 10px;
}

.draftHealthPlayer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 1fr) minmax(260px, 1.4fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  padding: 12px;
  background: #111827;
}

.draftHealthPlayerIdentity,
.draftHealthPlayerDecision {
  min-width: 0;
}

.draftHealthPlayerIdentity strong {
  display: block;
  color: #F8FAFC;
  font-size: 14px;
  line-height: 1.25;
}

.draftHealthPlayerIdentity span {
  display: block;
  margin-top: 4px;
  color: #94A3B8;
  font-size: 11.5px;
  font-weight: 750;
}

.draftHealthPlayerStats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.draftHealthPlayerStats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  max-width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(148, 163, 184, 0.1);
  color: #CBD5E1;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.draftHealthPlayerStats strong {
  color: #F8FAFC;
  font-size: 11px;
}

.draftHealthPlayerDecision strong {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
}

.draftHealthPlayerDecision strong.decisionTarget {
  border: 1px solid rgba(52, 211, 153, 0.34);
  background: rgba(52, 211, 153, 0.12);
  color: #A7F3D0;
}

.draftHealthPlayerDecision strong.decisionHold {
  border: 1px solid rgba(96, 165, 250, 0.34);
  background: rgba(96, 165, 250, 0.12);
  color: #BFDBFE;
}

.draftHealthPlayerDecision strong.decisionCaution {
  border: 1px solid rgba(251, 191, 36, 0.36);
  background: rgba(251, 191, 36, 0.12);
  color: #FDE68A;
}

.draftHealthPlayerDecision strong.decisionAvoid {
  border: 1px solid rgba(248, 113, 113, 0.38);
  background: rgba(248, 113, 113, 0.12);
  color: #FCA5A5;
}

.draftHealthPlayerDecision p {
  margin-top: 6px;
  color: #CBD5E1;
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .draftHealthFocusHeader,
  .draftHealthPlayer {
    grid-template-columns: 1fr;
  }

  .draftHealthFocusHeader {
    display: grid;
  }

  .draftHealthCloseButton,
  .draftHealthOpenButton {
    justify-self: start;
  }

  .draftHealthOpenButton {
    width: 100%;
    max-width: 220px;
  }
}
.valueCell,
.marketModelCell {
  display: grid;
  gap: 3px;
  min-width: 112px;
  padding: 6px 8px;
  border-radius: 6px;
}
.valueCell strong,
.marketModelCell strong {
  font-size: 14px;
}
.valueCell span,
.marketModelCell span,
.scoreDelta {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.boardHeaderActions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.boardSearchInput {
  width: min(280px, 34vw);
  min-width: 190px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #0B1220;
  color: var(--ink);
  font-weight: 750;
}

.draftedButton {
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(37, 99, 235, 0.12);
  color: #BFDBFE;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.draftedButton:hover {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(37, 99, 235, 0.22);
}

.tableLinkButton {
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(96, 165, 250, 0.08);
  color: #BFDBFE;
  font-weight: 850;
  cursor: pointer;
}

.tableLinkButton:hover,
.tableLinkButton:focus-visible {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.18);
  outline: none;
}

.scoreExplainButton {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.scoreExplainButton:hover .valueCell,
.scoreExplainButton:focus-visible .valueCell,
.scoreExplainButton:hover .marketModelCell,
.scoreExplainButton:focus-visible .marketModelCell {
  outline: 1px solid rgba(96, 165, 250, 0.55);
}

.scoreExplainButton:focus-visible {
  outline: none;
}

.signalBadgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.signalBadge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
  font-size: 12px;
  font-weight: 850;
}

.signalBadge.good {
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(52, 211, 153, 0.13);
  color: #A7F3D0;
}

.signalBadge.bad {
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.13);
  color: #FCA5A5;
}

.signalBadge.warn {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.13);
  color: #FCD34D;
}

.assistantSearch {
  grid-column: 1 / -1;
}

.assistantRecommendationHero,
.assistantPlayerCard {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0B1220;
}

.assistantRecommendationHero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.assistantRecommendationHero span,
.assistantPlayerCard span,
.assistantAnalysisGrid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.assistantRecommendationHero h3,
.assistantPlayerCard h3 {
  margin-top: 4px;
}

.assistantRecommendationHero p,
.assistantPlayerCard p {
  margin-top: 6px;
  color: #CBD5E1;
}

.assistantScoreBox {
  min-width: 130px;
  text-align: right;
}

.assistantScoreBox strong {
  display: block;
  margin-top: 4px;
  font-size: 30px;
}

.assistantAnalysisGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.assistantAnalysisGrid article {
  min-height: 112px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #111827;
}
.assistantAnalysisGrid article.goodPanel {
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(52, 211, 153, 0.08);
}
.assistantAnalysisGrid article.badPanel {
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.08);
}

.assistantAnalysisGrid p {
  margin-top: 8px;
  color: #E5E7EB;
  line-height: 1.5;
}

.assistantSearchResults {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.assistantSearchResults button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #101826;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.assistantSearchResults button:hover {
  border-color: #315174;
  background: #12263A;
}

.assistantSearchResults strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boardIntelPanel {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.boardIntelHero,
.pressureGrid {
  display: grid;
  gap: 10px;
}

.boardIntelHero article,
.pressureGrid article,
.boardIntelCard {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: #0B1220;
}

.boardIntelHero article.goodPanel,
.pressureGrid article.goodPanel {
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(52, 211, 153, 0.08);
}

.boardIntelHero article.badPanel,
.pressureGrid article.badPanel {
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.08);
}

.boardIntelHero span,
.pressureGrid span,
.boardIntelCard h4 {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.boardIntelHero strong,
.pressureGrid strong {
  display: block;
  margin-top: 5px;
  color: #F8FAFC;
  font-size: 18px;
}

.boardIntelHero em,
.pressureGrid em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.boardIntelCard {
  display: grid;
  gap: 10px;
}

.boardIntelCard h4 {
  margin: 0;
}

.boardIntelBar {
  display: grid;
  gap: 6px;
}

.boardIntelBar div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.boardIntelBar span,
.boardIntelBar em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.boardIntelBar strong {
  color: #E5E7EB;
}

.boardIntelBar i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #1F2937;
}

.boardIntelBar b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #60A5FA;
}

.pressureGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.assistantActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workbookStatGrid {
  display: grid;
  gap: 12px;
}

.leaderStrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.leaderStrip article,
.leaderStrip button {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #0B1220;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.leaderStrip strong,
.leaderStrip span,
.leaderStrip em {
  display: block;
}

.leaderStrip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderStrip span {
  margin-top: 8px;
  color: var(--accent-2);
  font-size: 22px;
  font-weight: 900;
}

.leaderStrip em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.leaderStrip button:hover,
.leaderStrip button:focus-visible {
  border-color: var(--accent-2);
  outline: none;
}

.workbookStatGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workbookStatGrid article {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #0B1220;
}

.workbookStatGrid article > span {
  display: block;
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.workbookStatGrid p {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  color: var(--muted);
}

.workbookStatGrid strong {
  color: var(--ink);
}
.valueStrong { background: #e6f4ee; color: var(--good); }
.valueGood { background: #eef8f3; color: #166534; }
.valueNeutral { background: #f1f3f5; color: #425466; }
.valueBad { background: #fbe9e9; color: var(--bad); }
.badgeRail {
  display: flex;
  align-items: center;
  gap: 4px;
}
.signalStack {
  display: inline-flex;
  gap: 4px;
}
.signalPill {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9.8px;
  font-weight: 850;
  white-space: nowrap;
}

.snapshotCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.snapshotRanks {
  display: flex;
  gap: 10px;
}
.snapshotRanks div {
  min-width: 68px;
  padding: 9px 11px;
  border-radius: 6px;
  background: #f8fafc;
  text-align: center;
}
.snapshotRanks span,
.coreMetrics span,
.visualCardTitle span,
.visualBar span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.snapshotRanks strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}
.snapshotTags {
  grid-column: 1 / -1;
}
.coreMetrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.coreMetrics div {
  padding: 14px;
  border-radius: 8px;
  background: #f8fafc;
}
.coreMetrics div.valueStrong { background: #e6f4ee; color: var(--good); }
.coreMetrics div.valueGood { background: #eef8f3; color: #166534; }
.coreMetrics div.valueNeutral { background: #f1f3f5; color: #425466; }
.coreMetrics div.valueBad { background: #fbe9e9; color: var(--bad); }
.coreMetrics strong {
  display: block;
  margin-top: 7px;
  font-size: 24px;
}
.coreMetrics em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.detailSection {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.detailSection h4 {
  margin: 0 0 10px;
  font-size: 14px;
}
.detailSection p {
  color: #374151;
  line-height: 1.5;
}
.decisionSignalGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.decisionSignalGrid.compact {
  grid-template-columns: 1fr;
  margin: 8px 0 0;
}
.decisionSignal {
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid #64748b;
  border-radius: 6px;
  background: #f8fafc;
}
.decisionSignal.good { border-left-color: var(--good); background: #eef8f3; }
.decisionSignal.bad { border-left-color: var(--bad); background: #fff1f2; }
.decisionSignal.warn { border-left-color: #f59e0b; background: #fffbeb; }
.decisionSignal span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.decisionSignal p {
  margin: 6px 0 0;
  color: #253142;
  font-size: 12px;
  line-height: 1.45;
}
.decisionSignal p strong {
  display: inline;
  margin-right: 5px;
  color: #111827;
  font-size: 11px;
  text-transform: uppercase;
}

.detailSectionHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.detailSectionHeader h4 {
  margin: 0;
}

.kpiPlayerSearchInput {
  width: min(260px, 42vw);
  height: 34px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  padding: 7px 10px;
  background: #0B1220;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
}

.kpiPlayerSearchGroup {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kpiPlayerSearchInput {
  width: min(260px, 42vw);
  height: 34px;
}

.quantSummary,
.marketQuantSummary {
  margin: 0 18px 14px;
}
.quantGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.quantGrid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.quantCard {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid #64748b;
  border-radius: 6px;
  background: #f8fafc;
}
.quantCard.good { border-left-color: var(--good); background: #eef8f3; }
.quantCard.bad { border-left-color: var(--bad); background: #fff1f2; }
.quantCard.warn { border-left-color: #f59e0b; background: #fffbeb; }
.quantCard span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.quantCard strong {
  display: block;
  margin-top: 5px;
  color: #111827;
  font-size: 18px;
  line-height: 1.1;
}
.quantCard p {
  margin-top: 8px;
  color: #253142;
  font-size: 12px;
  line-height: 1.35;
}
.quantCard em {
  display: block;
  margin-top: 8px;
  color: #475569;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.compareQuantContext {
  grid-column: 1 / -1;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

/* Compact player-thesis cards beneath the Quant Comparison summary. */
.compareThesisCard { gap: 11px; border-top-width: 3px; }
.compareThesisCard.playerA { border-top-color: #60a5fa; }
.compareThesisCard.playerB { border-top-color: #34d399; }
.compareThesisCard.playerA header > strong { border-color: rgba(96, 165, 250, .45); color: #bfdbfe; }
.compareThesisCard.playerB header > strong { border-color: rgba(52, 211, 153, .45); color: #a7f3d0; }
.compareBoardRank { flex-direction: column; gap: 0; line-height: 1; }
.compareBoardRank span { color: #91a5bf; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.compareBoardRank b { margin-top: 2px; font-size: 14px; }
.compareProfileIdentity { margin: 7px 0 0; color: #c2d0e2; font-size: 12px; line-height: 1.35; }
.compareKeeperBadge { display: inline-flex; margin-left: 7px; padding: 2px 6px; border: 1px solid rgba(251, 191, 36, .35); border-radius: 999px; color: #fcd34d; font-size: 10px; font-weight: 800; }
.compareThesisTags { display: flex; flex-wrap: wrap; gap: 6px; }
.compareThesisTags span { padding: 4px 7px; border: 1px solid rgba(148, 163, 184, .2); border-radius: 999px; color: #c7d7eb; font-size: 10px; font-weight: 750; }
.compareThesisTags .warning { border-color: rgba(251, 146, 60, .32); color: #fdba74; }
.comparePrimaryEdge { display: flex; gap: 7px; align-items: baseline; padding: 8px 10px; border-left: 2px solid rgba(96, 165, 250, .7); background: rgba(59, 130, 246, .07); }
.compareThesisCard.playerB .comparePrimaryEdge { border-left-color: rgba(52, 211, 153, .7); background: rgba(16, 185, 129, .06); }
.comparePrimaryEdge span { color: #8fa2bb; font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.comparePrimaryEdge strong { color: #e8f1fb; font-size: 12px; }
.compareMetricSection { padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, .12); }
.compareMetricSection h4 { margin: 0 0 7px; color: #91a5bf; font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.compareThesisMetrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.compareThesisMetrics > div { min-width: 0; padding: 7px 0; }
.compareThesisMetrics span { display: block; color: #8fa2bb; font-size: 10px; font-weight: 750; }
.compareThesisMetrics .infoIcon { display: inline-flex; color: #c7d7eb; font-size: 9px; font-weight: 700; }
.compareThesisMetrics strong { display: block; margin-top: 3px; color: #f1f6fd; font-size: 15px; line-height: 1.2; }
.compareThesisMetrics.supporting strong { font-size: 12px; }
.compareThesisMetrics em { display: block; margin-top: 3px; color: #9eb2c9; font-size: 10px; font-style: normal; }
.compareDraftThesis { padding: 9px 10px; }
.compareDraftThesis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.compareDraftThesis h4 { grid-column: 1 / -1; }
.compareDraftThesis > div { display: grid; gap: 2px; }
.compareDraftThesis > div > span { color: #8fa2bb; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.compareDraftThesis p { margin: 0; font-size: 12px; line-height: 1.35; }
.compareBestFor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 9px 10px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 7px; background: rgba(15, 23, 42, .38); }
.compareBestFor > div { min-width: 0; }
.compareBestFor span { color: #8fa2bb; font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.compareBestFor strong { display: block; margin-top: 3px; color: #e6eef9; font-size: 12px; }
.compareSupportingDetails { margin-top: 2px; }
.compareSupportingDetails summary { color: #b9c9dc; font-size: 11px; font-weight: 750; }
.compareSupportingData { display: grid; gap: 10px; margin-top: 11px; }

/* Decision-first Compare quant summary. The legacy .quantCard grid remains
   available for other dashboards; this layout is specific to player Compare. */
.compareQuantGuidance {
  display: block;
  gap: 10px;
  margin: 10px 0;
  padding: 11px 14px;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(30, 64, 175, 0.18), rgba(15, 23, 42, 0.42));
}
.compareQuantGuidance > div > span,
.compareQuantGroup > h4 {
  display: block;
  margin: 0 0 5px;
  color: #9fb7d9;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.compareQuantGuidance h4 { margin: 0; color: #f8fbff; font-size: 17px; }
.compareQuantVerdict > b { display: block; margin-top: 4px; color: #93c5fd; font-size: 11px; }
.compareQuantGuidance p { margin: 4px 0 0; color: #c7d3e3; font-size: 12px; line-height: 1.35; }
.compareQuantLensPills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.compareQuantLensPills span { display: inline-flex; gap: 6px; align-items: center; padding: 5px 8px; border: 1px solid rgba(148, 163, 184, .2); border-radius: 999px; color: #d4dfed; font-size: 11px; }
.compareQuantLensPills b { color: #90a5bf; font-size: 10px; text-transform: uppercase; }
.compareQuantCalls { display: grid; align-content: center; gap: 4px; }
.compareQuantCalls p { margin: 0; }
.compareQuantCalls strong { color: #f8fbff; }
.compareQuantGroups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.compareQuantGroup { min-width: 0; padding: 12px; border: 1px solid rgba(148, 163, 184, .16); border-radius: 10px; background: rgba(8, 17, 31, .32); }
.compareQuantGroup > h4 { margin-bottom: 10px; color: #e7effc; font-size: 11px; }
.compareQuantGroup > h4::after { content: ""; display: block; width: 24px; height: 2px; margin-top: 6px; border-radius: 999px; background: #60a5fa; }
.compareQuantMetric + .compareQuantMetric { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, .12); }
.compareQuantMetricHeader { display: flex; justify-content: space-between; gap: 8px; }
.compareQuantMetricHeader strong { display: block; color: #eef5ff; font-size: 12px; }
.compareQuantMetricHeader span { display: block; margin-top: 2px; color: #92a5bf; font-size: 10px; line-height: 1.3; }
.compareQuantMetricHeader em { align-self: start; padding: 3px 6px; border: 1px solid rgba(148, 163, 184, .2); border-radius: 999px; color: #b9c6d8; font-size: 9px; font-style: normal; font-weight: 800; text-align: right; white-space: nowrap; }
.compareQuantMetric.a .compareQuantMetricHeader em { border-color: rgba(96, 165, 250, .45); color: #93c5fd; }
.compareQuantMetric.b .compareQuantMetricHeader em { border-color: rgba(52, 211, 153, .45); color: #6ee7b7; }
.compareQuantValues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.compareQuantValues div { min-width: 0; padding: 3px 0 2px; border-radius: 0; background: transparent; }
.compareQuantValues div.playerA { box-shadow: none; background: transparent; }
.compareQuantValues div.playerB { box-shadow: none; background: transparent; }
.compareQuantValues span { display: block; overflow: hidden; color: #aebdd0; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.compareQuantValues b { display: block; margin-top: 3px; color: #d9e5f4; font-size: 13px; font-variant-numeric: tabular-nums; }
.compareQuantValues .winner b { color: #fff; }
.compareQuantMetric > p { margin: 7px 0 0; color: #99abc2; font-size: 10px; line-height: 1.35; }
.compareQuantMetric > p strong { color: #d8e5f5; }
.compareQuantDifferential { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 3px 5px; margin-top: 7px; }
.compareQuantDifferential span { overflow: hidden; color: #95a8c0; font-size: 9px; font-weight: 750; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.compareQuantDifferential i { display: block; min-width: 8px; height: 3px; border-radius: 999px; }
.compareQuantDifferential i.playerA { background: #60a5fa; }
.compareQuantDifferential i.playerB { background: #34d399; }
.compareQuantDifferential span.playerA { color: #93c5fd; background: transparent; }
.compareQuantDifferential span.playerB { color: #6ee7b7; background: transparent; }
.compareQuantDecisionGroup { display: grid; align-content: start; gap: 9px; }
.compareQuantContextRow { display: grid; gap: 3px; padding: 8px; border-radius: 7px; background: rgba(148, 163, 184, .07); }
.compareQuantContextRow span { color: #90a5bf; font-size: 10px; text-transform: uppercase; }
.compareQuantContextRow strong { color: #ecf4ff; font-size: 12px; }
.compareQuantContextRow.muted { border: 1px dashed rgba(148, 163, 184, .2); background: transparent; }
.compareQuantContextRow.muted strong { color: #b3c0d0; font-size: 11px; font-weight: 650; }
.compareQuantMissing { display: grid; gap: 3px; margin-top: 12px; padding: 9px 12px; border: 1px dashed rgba(148, 163, 184, .28); border-radius: 8px; background: rgba(148, 163, 184, .05); }
.compareQuantMissing strong { color: #c8d4e4; font-size: 11px; }
.compareQuantMissing span,
.compareQuantMissing p { margin: 0; color: #91a1b7; font-size: 10px; line-height: 1.35; }

@media (max-width: 1100px) {
  .compareQuantGuidance,
  .compareQuantGroups { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .compareQuantGuidance { padding: 12px; }
  .compareQuantMetricHeader { display: grid; }
  .compareQuantMetricHeader em { justify-self: start; text-align: left; }
  .compareThesisMetrics { grid-template-columns: 1fr; }
  .compareDraftThesis,
  .compareBestFor { grid-template-columns: 1fr; }
}
.visualGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.visualCard {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
button.visualCard {
  width: 100%;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.detailNode {
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.detailNode:hover,
.detailNode:focus {
  border-color: rgba(96, 165, 250, 0.55);
  background: #12263A;
  outline: none;
}
.coreMetrics .detailNode:hover,
.coreMetrics .detailNode:focus {
  transform: translateY(-1px);
}
.visualCardTitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.visualCardTitle strong {
  font-size: 15px;
}
.visualBar + .visualBar {
  margin-top: 12px;
}
.visualBar > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.visualBar strong {
  font-size: 12px;
}
.barTrack,
.splitTrack {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef0f2;
}
.barTrack span,
.splitTrack span,
.splitTrack b {
  display: block;
  height: 100%;
}
.barTrack .positive { background: var(--good); }
.barTrack .negative { background: var(--bad); }
.barTrack .info { background: var(--accent); }
.barTrack .neutral { background: #9ca3af; }
.splitTrack {
  display: flex;
}
.splitTrack span { background: var(--accent); }
.splitTrack b { background: #9ca3af; }
.miniLine,
.svgChart {
  width: 100%;
  height: 120px;
  color: var(--accent);
  background: transparent;
  border-radius: 8px;
}
.interactiveChart,
.chartCard {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.28);
}
.chartHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.chartHeader > b {
  color: var(--ink);
  font-size: 13px;
}
.chartTitle {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.chartTitle strong {
  font-size: 12px;
  line-height: 1.2;
}
.chartTitle p {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}
.chartControls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.chartBody {
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
}
.chartToggle,
.chartLegendItem,
.chartOpenButton {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(15, 23, 42, 0.04);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
}
.chartToggle.active,
.chartLegendItem:not(.inactive) {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.14);
  color: var(--ink);
}
.chartLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.chartLegendItem {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.chartLegendItem.inactive {
  opacity: .48;
}
.legendSwatch {
  width: 12px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}
.legendSwatch::before {
  display: none;
}
.legendSwatch.trend {
  background: #FBBF24;
  border-top: 1px dashed #FBBF24;
}
.legendSwatch.mean {
  background: #94A3B8;
}
.chartTypeSelector {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}
.chartTypeSelector select {
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 2px 22px 2px 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 10px;
  font-weight: 850;
}
.chartGridline {
  stroke: rgba(148, 163, 184, 0.13);
  stroke-width: .28;
}
.chartGridline.vertical {
  stroke-opacity: .25;
}
.chartActualLine {
  stroke: #60A5FA;
  stroke-width: 2.2;
}
.chartTrendLine {
  stroke: rgba(251, 191, 36, 0.72);
  stroke-width: 1.45;
  stroke-dasharray: 4 3;
}
.chartMeanLine {
  stroke: rgba(148, 163, 184, 0.55);
  stroke-width: .9;
  stroke-dasharray: 2 3;
}
.meanLine {
  stroke: rgba(148, 163, 184, 0.55);
}
.chartStdBand {
  fill: rgba(248, 113, 113, 0.18);
}
.bandArea {
  fill: rgba(248, 113, 113, 0.18);
}
.chartPoint {
  fill: #BFDBFE;
  stroke: #0F172A;
  stroke-width: .22;
  cursor: crosshair;
}
.chartBar {
  fill: #60A5FA;
  opacity: .78;
  cursor: crosshair;
}
.chartAxisLabel,
.chartTickLabel {
  fill: var(--muted);
  font-size: 2.6px;
  letter-spacing: 0;
}
.chartAxisLabel {
  display: none;
  font-weight: 800;
  text-transform: uppercase;
}
/* Compare: matched chart cards */
.compareChartGrid {
  align-items: stretch;
}

.compareChartGrid .chartFrame {
  display: grid;
  grid-template-rows: 58px minmax(330px, 1fr) auto;
  min-height: 438px;
  padding: 0;
  overflow: hidden;
}

.compareChartGrid .chartHeader {
  display: flex;
  align-items: flex-start;
  min-height: 58px;
  padding: 13px 14px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.11);
  background: rgba(8, 17, 31, 0.36);
}

.compareChartGrid .chartTitle {
  display: grid;
  gap: 4px;
}

.compareChartGrid .chartTitle strong {
  color: #f8fbff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.compareChartGrid .chartTitle p {
  margin: 0;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}

.compareChartGrid .chartBody {
  display: grid;
  align-items: center;
  min-height: 330px;
  padding: 14px 16px 12px;
  border-radius: 0;
}

.compareChartGrid .chartTakeaway {
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.11);
  color: #c2cede;
  font-size: 11px;
  line-height: 1.45;
}

/* Decision Signal Bars layout */
.compareDecisionBarsCard .groupedBarChart,
.compareBarsCard .groupedBarChart,
.assistantDecisionBarsCard .groupedBarChart {
  display: grid;
  gap: 12px;
  width: 100%;
}

.compareDecisionBarsCard .groupedLegend,
.compareBarsCard .groupedLegend,
.assistantDecisionBarsCard .groupedLegend {
  align-self: start;
  margin: 0 0 8px;
  color: #cbd5e1;
  font-size: 10.5px;
  font-weight: 800;
}

.compareDecisionBarsCard .groupedBarRow,
.compareBarsCard .groupedBarRow,
.assistantDecisionBarsCard .groupedBarRow {
  grid-template-columns: minmax(86px, 0.42fr) minmax(240px, 1.9fr) minmax(70px, auto);
  gap: 12px;
  min-height: 29px;
}

.compareDecisionBarsCard .groupedBarRow > div,
.compareBarsCard .groupedBarRow > div,
.assistantDecisionBarsCard .groupedBarRow > div {
  gap: 5px;
}

.compareDecisionBarsCard .groupedBarRow > div,
.compareBarsCard .groupedBarRow > div,
.assistantDecisionBarsCard .groupedBarRow > div {
  min-width: 0;
}

.comparisonBarTrack {
  position: relative;
  display: block;
  overflow: hidden;
}
.comparisonBarTrack i {
  display: block;
}
.comparisonBarTrack em {
  position: absolute;
  right: 6px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  color: #f8fbff;
  font-size: 10px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}
.compareDecisionBarsCard .groupedBarRow small,
.compareBarsCard .groupedBarRow small,
.assistantDecisionBarsCard .groupedBarRow small {
  align-self: center;
  color: var(--chart-axis);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.compareDecisionBarsCard .groupedBarRow b,
.compareBarsCard .groupedBarRow b,
.assistantDecisionBarsCard .groupedBarRow b {
  height: 10px;
  background: rgba(148, 163, 184, 0.16);
}

.compareDecisionBarsCard .groupedBarRow span,
.compareBarsCard .groupedBarRow span,
.assistantDecisionBarsCard .groupedBarRow span {
  color: #cbd6e5;
  font-size: 10.5px;
  font-weight: 850;
}

/* Scatter should use the same chart card shell instead of its own header/body offsets */
.compareScatterCard {
  min-width: 0;
}

.compareScatterCard .chartHeader {
  margin: 0;
  border-radius: 0;
}

.compareScatterCard .chartBody {
  align-items: stretch;
}

.compareScatterWrap {
  display: grid;
  grid-template-rows: minmax(250px, 1fr) auto;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
}

.compareScatterSvg {
  width: 100%;
  height: 100%;
  min-height: 250px;
  overflow: visible;
  border: 1px solid rgba(148, 163, 184, 0.11);
  border-radius: 10px;
  background: rgba(4, 11, 22, 0.28);
}

.compareScatterCard {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(17, 28, 46, 0.88), rgba(8, 17, 31, 0.82));
  box-shadow: var(--shadow-soft);
}

.compareScatterWrap {
  display: grid;
  gap: 10px;
  padding: 12px 13px 10px;
  background: rgba(8, 17, 31, 0.18);
}

.compareScatterSvg {
  width: 100%;
  min-height: 230px;
  overflow: visible;
  border: 1px solid rgba(148, 163, 184, 0.11);
  border-radius: 10px;
  background: rgba(4, 11, 22, 0.28);
}

.chartAxisLine {
  stroke: rgba(203, 213, 225, 0.34);
  stroke-width: 1;
}

.compareScatterCard .chartGridLine {
  stroke: rgba(148, 163, 184, 0.14);
  stroke-width: 0.6;
}

.compareScatterCard .chartTickLabel {
  fill: #8fa2bb;
  font-size: 10px;
  font-weight: 700;
}

.compareScatterCard .compareScatterAxisLabel {
  display: block;
  fill: #cbd5e1;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.compareScatterPoint circle {
  stroke-width: 2;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28));
}

.compareScatterPoint text {
  fill: #e5eefc;
  font-size: 11px;
  font-weight: 900;
}

.compareScatterPoint.playerA circle {
  fill: #7c5cff;
  stroke: #c4b5fd;
}

.compareScatterPoint.playerB circle {
  fill: #22c55e;
  stroke: #86efac;
}

.compareScatterPoint.average circle {
  fill: rgba(148, 163, 184, 0.38);
  stroke: rgba(203, 213, 225, 0.78);
  stroke-dasharray: 3 2;
}

.compareScatterPoint.average circle {
  fill: rgba(148, 163, 184, 0.38);
  stroke: rgba(203, 213, 225, 0.78);
  stroke-dasharray: 3 2;
}

/* Makes Risk vs Projected Return scatter points feel clickable */
.clickableScatterPoint {
  cursor: pointer;
}

.clickableScatterPoint circle {
  transition: stroke .16s ease, filter .16s ease, transform .16s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.clickableScatterPoint:hover circle,
.clickableScatterPoint:focus-visible circle {
  stroke: #ffffff;
  filter: drop-shadow(0 0 8px rgba(147, 197, 253, 0.72));
  transform: scale(1.12);
}

.clickableScatterPoint:focus-visible {
  outline: none;
}

.compareScatterLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-inline: 4px;
}

.compareScatterLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-inline: 4px;
}

.compareScatterLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 850;
}

.compareScatterLegend span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.compareScatterLegend .playerA::before {
  background: #7c5cff;
}

.compareScatterLegend .playerB::before {
  background: #22c55e;
}

.compareScatterLegend .average::before {
  background: rgba(148, 163, 184, 0.7);
}

.compareScatterCard .chartTakeaway {
  margin: 0;
  padding: 9px 11px;
  border-top: 1px solid rgba(148, 163, 184, 0.11);
  color: #c2cede;
  font-size: 0.78125rem;
  line-height: 1.45;
}

.compareScatterWrap {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.compareScatterSvg {
  width: 100%;
  min-height: 260px;
  overflow: visible;
}

.chartAxisLine {
  stroke: rgba(203, 213, 225, 0.34);
  stroke-width: 1;
}

.compareScatterPoint circle {
  stroke-width: 2;
}

.compareScatterPoint text {
  fill: #e5eefc;
  font-size: 11px;
  font-weight: 900;
}

.compareScatterPoint.playerA circle {
  fill: #7c5cff;
  stroke: #c4b5fd;
}

.compareScatterPoint.playerB circle {
  fill: #22c55e;
  stroke: #86efac;
}

.compareScatterPoint.average circle {
  fill: rgba(148, 163, 184, 0.38);
  stroke: rgba(203, 213, 225, 0.78);
  stroke-dasharray: 3 2;
}

.compareScatterLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-inline: 4px;
}

.compareScatterLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 850;
}

.compareScatterLegend span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.compareScatterLegend .playerA::before {
  background: #7c5cff;
}

.compareScatterLegend .playerB::before {
  background: #22c55e;
}

.compareScatterLegend .average::before {
  background: rgba(148, 163, 184, 0.7);
}
.chartTooltip {
  position: fixed;
  z-index: 1200;
  max-width: 240px;
  pointer-events: none;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  padding: 9px 11px;
  background: rgba(8, 17, 31, 0.96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .32);
  color: #F8FAFC;
  font-size: 12px;
  line-height: 1.35;
}
.chartTooltip span {
  color: #CBD5E1;
}
.chartOpenButton {
  justify-self: start;
  margin-top: 2px;
}
.chartTakeaway {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.compareChartGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.modernBarChart,
.groupedBarChart {
  display: grid;
  gap: 9px;
}
.modernBarRow,
.groupedBarRow {
  display: grid;
  grid-template-columns: minmax(74px, .8fr) minmax(120px, 1.8fr) 48px;
  gap: 10px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.modernBarRow b,
.groupedBarRow b {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
}
.modernBarRow i,
.groupedBarRow i {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
}
.modernBarRow em,
.groupedBarRow em {
  color: var(--ink);
  font-style: normal;
  text-align: right;
}
.modernBarRow .good,
.groupedBarRow .a {
  background: #60A5FA;
}
.modernBarRow .bad {
  background: #F87171;
}
.modernBarRow .warn,
.groupedBarRow .b {
  background: #34D399;
}
.modernBarRow .info {
  background: #A78BFA;
}
.groupedBarRow > div {
  display: grid;
  gap: 4px;
}
.groupedLegend {
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.groupedLegend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 3px;
  margin-right: 5px;
  border-radius: 999px;
  vertical-align: middle;
}
.groupedLegend .a::before { background: #60A5FA; }
.groupedLegend .b::before { background: #34D399; }
.scatterChart {
  height: 180px;
}
.scatterPoint.warn {
  fill: #FBBF24;
}
.distributionChart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(18px, 1fr);
  align-items: end;
  gap: 6px;
  height: 132px;
  padding: 12px 4px 0;
}
.distributionBin {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: 6px;
  height: 100%;
  min-width: 0;
}
.distributionBin i {
  display: block;
  width: 100%;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #60A5FA, #2563EB);
  opacity: .8;
}
.distributionBin span {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chartLabels {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}
.chartLabels.fullRange {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  overflow: hidden;
  padding: 0 2px 1px;
}
.chartLabels.fullRange span {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  text-overflow: clip;
}
.chartLabels.fullRange span.skip {
  visibility: hidden;
}
.polishedRoundStacks {
  gap: 9px;
  margin-top: 10px;
}
.advancedDetails {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.advancedDetails summary {
  cursor: pointer;
  font-weight: 800;
}
.advancedDetails .metricGrid {
  margin-top: 14px;
}

.sleeperPanel {
  padding-bottom: 18px;
}
.sleeperStatus {
  margin: 16px 18px 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.historyGrid {
  display: grid;
  gap: 16px;
  padding: 18px;
}
.inlineSelect {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.inlineSelect select {
  min-width: 210px;
  padding: 9px 34px 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-transform: none;
}
.historyHero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.historyHero div,
.managerCard {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.historyHero span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.historyHero strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
}
.managerCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.managerCard h3 {
  margin: 0 0 12px;
}
.posBars {
  margin-top: 14px;
}
.leagueDnaCard {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.leagueDnaCard.compact {
  padding: 18px;
}
.leagueDnaHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.leagueDnaHeader span,
.insightCards span,
.recordCard span,
.championCard span,
.managerSummaryCard span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.leagueDnaHeader h3 {
  margin-top: 6px;
  font-size: 22px;
}
.leagueDnaHeader p {
  max-width: 420px;
  color: var(--muted);
  line-height: 1.45;
}
.dnaGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.dnaItem {
  min-height: 116px;
  padding: 14px;
  border-radius: 10px;
  background: #f8fafc;
}
.dnaItem div:first-child {
  min-height: 43px;
}
.dnaItem strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
}
.dnaItem em {
  display: block;
  min-height: 32px;
  margin: 10px 0 11px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}
.barTrack .muted {
  background: #9ca3af;
}
.insightCards,
.recordCards,
.championCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.insightCards article,
.recordCard,
.championCard,
.managerSummaryCard {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.insightCards strong,
.recordCard strong,
.championCard strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
}
.insightCards em,
.recordCard em,
.championCard em {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}
.takeaway {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.secondaryTable {
  opacity: .96;
}
.secondaryTable .tableWrap {
  max-height: 420px;
}
.managerFocus {
  display: grid;
  grid-template-columns: minmax(290px, .9fr) minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 14px;
  align-items: stretch;
}
.managerSummaryCard h3 {
  margin-top: 8px;
  font-size: 26px;
}
.managerSummaryCard p {
  margin: 10px 0 14px;
  color: #374151;
  line-height: 1.45;
}
.managerProfilesIntro {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.managerProfilesIntro span,
.draftSignalList span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.managerProfilesIntro h3 {
  margin-top: 6px;
  font-size: 28px;
}
.managerProfilesIntro p {
  margin-top: 8px;
  max-width: 680px;
  color: var(--muted);
  line-height: 1.5;
}
.managerProfileAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid #334155;
  border-radius: 50%;
  background: linear-gradient(135deg, #1D4ED8, #14B8A6);
  color: #F8FAFC;
  font-size: 18px;
  font-weight: 900;
}
.managerProfileLayout {
  display: grid;
  grid-template-columns: minmax(320px, .85fr) minmax(360px, 1.15fr);
  gap: 16px;
}
.managerProfileCard {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.managerProfileHeader {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.managerProfileHeader h3 {
  font-size: 18px;
}
.managerProfileHeader p {
  margin-top: 3px;
  color: var(--muted);
}
.managerAnalysis {
  margin: 16px 0;
  color: #E5E7EB;
  line-height: 1.62;
}
.managerMetricGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.managerProfileStack {
  display: grid;
  gap: 14px;
}
.draftSignalGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.draftSignalList {
  display: grid;
  gap: 9px;
}
.draftSignalList div,
.draftSignalList p {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #162033;
}
.draftSignalList strong,
.draftSignalList em {
  display: block;
}
.draftSignalList em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.draftHistoryControls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.segmentedControl {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0B1220;
}
.segmentedControl button {
  border: 0;
  border-radius: 7px;
  padding: 8px 14px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 850;
}
.segmentedControl button.active {
  background: #1A2333;
  color: #F8FAFC;
}
.draftGradesPanel {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.draftGradesIntro {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.draftGradesIntro h3 {
  font-size: 26px;
}
.draftGradesIntro p {
  max-width: 860px;
  margin-top: 10px;
  color: #BFDBFE;
  line-height: 1.55;
}
.draftGradesIntro > strong {
  color: #F8FAFC;
  font-size: 18px;
  white-space: nowrap;
}
.draftGradeGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.draftGradeCard {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 86px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #F8FAFC;
  cursor: pointer;
  transition: border-color .16s ease, filter .16s ease;
}
.draftGradeCard:hover,
.draftGradeCard:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  filter: brightness(1.03);
  outline: none;
}
.draftGradeCard.gradeA { background: #14532D; }
.draftGradeCard.gradeB { background: #155E75; }
.draftGradeCard.gradeC { background: #854D0E; }
.draftGradeCard.gradeD { background: #7F1D1D; }
.draftPlayerAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.38);
  color: #E5E7EB;
  font-weight: 900;
}
.draftGradeCard strong,
.draftGradeCard span,
.draftGradeCard em {
  display: block;
}
.draftGradeCard span {
  margin-top: 3px;
  color: #F8FAFC;
  font-size: 13px;
  font-weight: 750;
}
.draftGradeCard em {
  margin-top: 5px;
  color: #E0F2FE;
  font-size: 12px;
  font-style: normal;
}
.draftGradeCard b {
  font-size: 20px;
}
.playersShell {
  position: relative;
  display: grid;
  gap: 16px;
  overflow: hidden;
  padding: var(--space-lg, 16px);
  border: 1px solid var(--color-border, var(--line));
  border-radius: var(--radius-feature, 12px);
  background: var(--color-surface, var(--panel));
}

.playersShellFx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.playersToolbar,
.playersShell > #playersContent {
  position: relative;
  z-index: 1;
}
.playersToolbar {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 120px 130px minmax(260px, 420px) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.playersToolbar > div:first-child span,
.playersToolbar label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.playersToolbar h2 {
  margin-top: 4px;
  font-size: 20px;
}
.playersToolbar label {
  display: grid;
  gap: 6px;
}
.playersQuickFilters {
  display: inline-flex;
  gap: 6px;
}
.playersQuickFilters button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #0B1220;
  color: var(--muted);
  cursor: pointer;
  font-weight: 850;
}
.playersQuickFilters button.active,
.playersQuickFilters button:hover {
  color: #F8FAFC;
  border-color: #334155;
  background: #1A2333;
}
.playersBoard {
  display: grid;
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  gap: 0;
  overflow: auto;
  min-height: 720px;
  max-height: calc(100vh - 245px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0B1220;
}
.playerColumn {
  min-width: 270px;
  padding: 14px 12px;
  border-right: 1px solid var(--line);
}
.playerColumn:last-child {
  border-right: 0;
}
.playerColumn h3 {
  margin-bottom: 10px;
  color: #FBBF24;
  font-size: 13px;
}
.playerColumn:nth-child(2) h3 { color: #34D399; }
.playerColumn:nth-child(3) h3 { color: #38BDF8; }
.playerColumn:nth-child(4) h3 { color: #A78BFA; }
.playerListItem {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 42px 60px;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 8px;
  background: transparent;
  color: #E5E7EB;
  cursor: pointer;
  text-align: left;
}
.playerListItem:hover,
.playerListItem.active {
  background: #12263A;
}
.playerListItem span,
.playerListItem em,
.playerListItem b {
  color: var(--muted);
  font-style: normal;
  font-weight: 750;
}
.playerListItem strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.playerListItem b {
  text-align: right;
}
.playerProfile {
  display: grid;
  gap: 16px;
}
.playerDetailPopup {
  width: min(1320px, 100%);
  margin: 0 auto;
}
.popupDraftDetail {
  display: grid;
  gap: 16px;
}
.popupSectionHeader {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  padding: 4px 2px 2px;
}
.popupSectionHeader span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.popupSectionHeader h2 {
  margin-top: 4px;
  color: var(--ink);
  font-size: 28px;
}
.popupSectionHeader strong {
  color: #CBD5E1;
  font-size: 13px;
}
.playerProfileSubsection {
  margin-top: 8px;
}
.playerNameButton {
  display: inline;
  border: 0;
  padding: 0;
  background: transparent;
  color: #F8FAFC;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.playerNameButton strong {
  color: inherit;
}
.playerNameButton:hover strong,
.playerNameButton:focus-visible strong {
  color: #93C5FD;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.playerNameButton:focus-visible {
  outline: 2px solid #60A5FA;
  outline-offset: 3px;
  border-radius: 4px;
}
.playerDrawerBackdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(2, 6, 23, 0.58);
  backdrop-filter: blur(2px);
}
.playerDrawer {
  position: fixed;
  top: 16px;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 90;
  width: auto;
  height: auto;
  padding: 54px 18px 18px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0B1220;
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
  transform: translateX(105%);
  transition: transform .22s ease;
}
.playerDrawer.open {
  transform: translateX(0);
}
.playerDrawerClose {
  position: absolute;
  top: 14px;
  right: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  background: #111827;
  color: #E5E7EB;
  cursor: pointer;
  font-weight: 850;
}
.playerHero,
.playerChartCard,
.playerSeasonCard,
.playerTabsCard {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.playerHero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 24px;
}
.playerInitials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.14);
  color: #FBBF24;
  font-size: 18px;
  font-weight: 900;
}
.playerHero h2 {
  font-size: 26px;
}
.playerHero p,
.playerHeroScore span {
  margin-top: 6px;
  color: var(--muted);
}
.playerHeroScore {
  text-align: right;
}
.playerHeroScore strong {
  display: block;
  font-size: 34px;
}
.playerProfileGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(240px, 1fr) minmax(260px, 1fr);
  gap: 16px;
}
.playerChartCard,
.playerRadarCard,
.playerSeasonCard,
.playerTabsCard {
  padding: 18px;
}
.playerRadarCard .compareRadarBody {
  display: flex;
  justify-content: center;
}
.playerStatGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.playerStatGrid div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #162033;
}
.playerStatGrid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.playerStatGrid strong {
  display: block;
  margin-top: 8px;
  font-size: 22px;
}
.playerYearTabs,
.playerSubTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.playerYearTabs button,
.playerSubTabs button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 16px;
  background: #0B1220;
  color: var(--muted);
  font-weight: 850;
}
.playerYearTabs button.active,
.playerSubTabs button.active {
  background: #E5E7EB;
  color: #111827;
}
.playerYearTabs button.muted:not(.active) {
  opacity: .55;
}
.playerTabContent {
  margin-top: 14px;
}

.ppgLineChart {
  display: grid;
  gap: 10px;
  min-height: 220px;
  padding: 16px 10px 10px;
}

.ppgLineChart svg {
  width: 100%;
  height: 150px;
  color: #93C5FD;
}

.ppgLineChart line {
  stroke: rgba(148, 163, 184, 0.22);
  stroke-width: .6;
}

.ppgLineChart polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  vector-effect: non-scaling-stroke;
}

.ppgLineChart circle {
  fill: #34D399;
  stroke: #0F172A;
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

.ppgPointLabels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ppgPointLabels span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: rgba(15, 23, 42, 0.62);
  text-align: center;
}

.ppgPointLabels strong,
.ppgPointLabels em {
  display: block;
}

.ppgPointLabels strong {
  color: #F8FAFC;
  font-size: 16px;
}

.ppgPointLabels em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.playerNewsList {
  display: grid;
  gap: 16px;
}
.playerNewsList article {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.playerNewsList article:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.playerNewsList header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #F8FAFC;
}
.playerNewsList header span {
  color: var(--muted);
  font-size: 12px;
}
.playerNewsList p {
  margin-top: 8px;
  color: #E5E7EB;
  line-height: 1.55;
}
.playerNewsList article div {
  margin-top: 10px;
  padding: 12px;
  border-radius: 8px;
  background: #1F2937;
  color: #CBD5E1;
  line-height: 1.45;
}
.playerNewsList article div span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.playerTeamList {
  display: grid;
  gap: 18px;
}
.playerTeamList section {
  display: grid;
  gap: 8px;
}
.playerTeamList h4 {
  color: var(--muted);
  font-size: 12px;
}
.playerTeamList button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 50px 70px;
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  background: transparent;
  color: #E5E7EB;
  cursor: pointer;
  text-align: left;
}
.playerTeamList button:hover,
.playerTeamList button.active {
  background: #2A2F38;
}
.playerTeamList button span {
  color: #38BDF8;
  font-weight: 850;
}
.playerTeamList button em,
.playerTeamList button b {
  color: var(--muted);
  font-style: normal;
  text-align: right;
}
.playerContract {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.gameLogSummary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.gameLogSummary article {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #101826;
}
.gameLogSummary span,
.gameLogSummary em {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.gameLogSummary strong {
  display: block;
  margin: 5px 0;
  font-size: 24px;
}
.playerWeeklyTable {
  max-height: 430px;
}
.playerWeeklyTable table {
  min-width: 1160px;
}
.scoreHot {
  color: #6EE7B7;
  font-weight: 900;
}
.playerStatsPanel {
  display: grid;
  gap: 14px;
}
.playerStatsBlock {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #0B1220;
}
.playerStatsBlock h4 {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.playerStatsBlock table {
  min-width: 780px;
}
.chatPanel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 2200;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(960px, 100vw);
  border-left: 1px solid var(--line);
  background: #0B1220;
  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.42);
  transform: translateX(105%);
  transition: transform .22s ease;
}
.chatPanel.open {
  transform: translateX(0);
}
.chatHeader {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.chatHeader span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.chatHeader h2 {
  margin-top: 4px;
  font-size: 24px;
}
.chatHeader div:last-child {
  display: flex;
  gap: 8px;
}
.chatHeaderActions {
  align-self: start;
}
.chatHeader button,
.chatForm button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  background: #182235;
  color: #E5E7EB;
  cursor: pointer;
  font-weight: 850;
}
.chatHeader .chatCloseButton {
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 1px 6px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted, var(--muted));
  font-size: 18px;
  line-height: 1;
}
.chatHeader .chatCloseButton:hover,
.chatHeader .chatCloseButton:focus-visible {
  border-color: var(--color-accent, var(--accent));
  background: transparent;
  color: var(--color-accent-strong, var(--accent-2));
}
.chatModeLabel {
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(20, 184, 166, 0.08);
  color: #A7F3D0;
  font-size: 12px;
  font-weight: 850;
}
.chatChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}
.chatChips button {
  border: 1px solid #263448;
  border-radius: 999px;
  padding: 8px 11px;
  background: #111827;
  color: #CBD5E1;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
.chatMessages {
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: auto;
  padding: 24px 22px;
}
.chatMessage {
  display: flex;
  min-width: 0;
}
.chatMessage > .chatMessageBody {
  max-width: 78%;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #E5E7EB;
  line-height: 1.5;
}
.chatMessage.assistant {
  justify-content: flex-start;
}
.chatMessage.assistant > .chatMessageBody {
  width: 100%;
  max-width: 100%;
  background: #111827;
  border-bottom-left-radius: 5px;
}
.chatMessage.user {
  justify-content: flex-end;
}
.chatMessage.user > .chatMessageBody {
  max-width: min(78%, 640px);
  background: #1D4ED8;
  border-color: rgba(147, 197, 253, 0.25);
  border-bottom-right-radius: 5px;
}
.chatPlayerLinks,
.chatMetricBadges,
.chatFollowUps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.chatPlayerLinks {
  padding-top: 11px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}
.chatPlayerLinks button {
  min-width: 132px;
  display: grid;
  gap: 2px;
  text-align: left;
  border: 1px solid #314158;
  border-radius: 6px;
  padding: 8px 10px;
  color: #E5E7EB;
  background: #0B1220;
  cursor: pointer;
}
.chatPlayerLinks button:hover,
.chatPlayerLinks button:focus-visible {
  border-color: #60A5FA;
  background: #111C30;
}
.chatPlayerLinks strong {
  color: #F8FAFC;
  font-size: 12px;
}
.chatPlayerLinks span {
  color: #93C5FD;
  font-size: 10px;
  font-weight: 800;
}
.chatMetricBadges span {
  border: 1px solid #314158;
  border-radius: 999px;
  padding: 3px 7px;
  color: #CBD5E1;
  background: #0B1220;
  font-size: 10px;
  font-weight: 800;
}
.chatMetricBadges span.good {
  border-color: rgba(52, 211, 153, 0.4);
  color: #6EE7B7;
}
.chatMetricBadges span.warn {
  border-color: rgba(251, 191, 36, 0.42);
  color: #FCD34D;
}
.chatFollowUps {
  padding-top: 11px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}
.chatFollowUps::before {
  width: 100%;
  content: "Follow-up questions";
  color: #94A3B8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.chatFollowUps button {
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 7px 9px;
  background: #172033;
  color: #BFDBFE;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
}
.chatFollowUps button:hover,
.chatFollowUps button:focus-visible {
  border-color: #60A5FA;
  color: #EFF6FF;
}
.chatMessageBody a {
  color: #7DD3FC;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chatLoading {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #263448;
  border-radius: 6px;
  padding: 9px 11px;
  background: #111827;
  color: #94A3B8;
}
.chatLoading span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #60A5FA;
  animation: chatLoadingPulse 900ms ease-in-out infinite;
}
.chatLoading span:nth-child(2) {
  animation-delay: 120ms;
}
.chatLoading span:nth-child(3) {
  animation-delay: 240ms;
}
.chatLoading strong {
  margin-left: 3px;
  font-size: 11px;
}
@keyframes chatLoadingPulse {
  0%, 100% { opacity: 0.28; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .chatLoading span {
    animation: none;
    opacity: 0.8;
  }
}
.chatQueueCard {
  width: min(78%, 560px);
  border: 1px solid #263448;
  border-radius: 8px;
  background: #0f172a;
  color: #e5e7eb;
  padding: 12px;
  display: grid;
  gap: 10px;
}
.chatQueueHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #93c5fd;
  font-weight: 850;
}
.chatQueueHeader strong {
  color: #f8fafc;
  text-transform: none;
}
.chatQueueList {
  display: grid;
  gap: 8px;
}
.chatQueueList button {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 4px 10px;
  text-align: left;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
  background: #111827;
  color: #e5e7eb;
  padding: 9px 10px;
  cursor: pointer;
}
.chatQueueList button span {
  color: #93c5fd;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.chatQueueList button strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.chatQueueList button em {
  grid-column: 2;
  color: #94a3b8;
  font-style: normal;
  font-size: 12px;
}
.chatQueueActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chatQueueActions button {
  border: 1px solid #263448;
  border-radius: 999px;
  background: #111827;
  color: #cbd5e1;
  font-weight: 800;
  font-size: 12px;
  padding: 7px 10px;
  cursor: pointer;
}
.chatEmpty {
  margin: 20vh auto 0;
  max-width: 430px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}
.chatForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 16px 22px 20px;
  border-top: 1px solid var(--line);
  background: #0B1220;
}
.chatForm textarea {
  resize: none;
  min-height: 44px;
  max-height: 140px;
  border: 1px solid #263448;
  border-radius: 12px;
  padding: 12px 13px;
  background: #111827;
  color: #E5E7EB;
  font: inherit;
}
.chatForm textarea:focus {
  outline: 2px solid rgba(96, 165, 250, 0.35);
}
.roundStacks {
  display: grid;
  gap: 12px;
}
.roundStack,
.managerPreference {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.managerPreference {
  grid-template-columns: 150px minmax(0, 1fr);
  margin-top: 12px;
}
.roundStack > span,
.managerPreference strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.stackTrack {
  display: flex;
  height: 24px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef0f2;
}
.stackTrack span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.stackTrack button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  border: 0;
  padding: 0;
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.stackTrack button:hover,
.stackTrack button:focus-visible {
  filter: brightness(1.18);
  outline: 1px solid rgba(255, 255, 255, 0.65);
  outline-offset: -2px;
}
.pos-QB { background: #2563eb; }
.pos-RB { background: #059669; }
.pos-WR { background: #0ea5e9; }
.pos-TE { background: #7c3aed; }
.pos-DST { background: #64748b; }
.pos-K { background: #d97706; }
.pos-UNK { background: #9ca3af; }
.inlinePopoutLink {
  display: inline;
  border: 0;
  border-radius: 4px;
  padding: 0;
  background: transparent;
  color: #93C5FD;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  text-align: left;
}
.inlinePopoutLink:hover,
.inlinePopoutLink:focus-visible {
  color: #BFDBFE;
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}
.inlinePopoutLink.position {
  color: #C4B5FD;
}
.inlinePopoutLink.team {
  color: #7DD3FC;
}
.wrappedWide {
  grid-column: 1 / -1;
}

.leagueHistoryHero {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(300px, 560px);
  gap: 24px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.leagueHistoryHero span,
.leagueLeadersCard span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.leagueHistoryHero h3 {
  margin-top: 6px;
  font-size: 24px;
}
.leagueHistoryHero p {
  max-width: 560px;
  color: var(--muted);
  line-height: 1.5;
}
.leagueStandingsWrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0B1220;
  box-shadow: var(--shadow-soft);
}
.leagueStandingsTable {
  min-width: 900px;
}
.leagueStandingsTable th {
  padding: 18px 24px;
  background: #1A2333;
  color: #F8FAFC;
  font-size: 12px;
}
.leagueStandingsTable td {
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 750;
}
.teamNameCell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
}
.teamAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid #334155;
  border-radius: 50%;
  background: linear-gradient(135deg, #1D4ED8, #14B8A6);
  color: #F8FAFC;
  font-size: 11px;
  font-weight: 900;
}
.positiveText {
  color: #60A5FA;
}
.negativeText {
  color: #F87171;
}
.leagueNewsCard,
.leagueLeadersCard {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.leagueNewsCard {
  padding: 22px 24px;
}
.leagueNewsCard h3 {
  margin-bottom: 14px;
  font-size: 22px;
}
.leagueNewsList {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.leagueNewsList li {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: #E5E7EB;
  line-height: 1.55;
}
.leagueNewsList li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.leagueNewsList strong {
  color: #F8FAFC;
}
.leagueLeadersCard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 20px 22px;
}
.leagueLeadersCard div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: end;
}
.leagueLeadersCard span,
.leagueLeadersCard strong {
  grid-column: 1;
}
.leagueLeadersCard strong {
  font-size: 16px;
}
.leagueLeadersCard em {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: #F8FAFC;
  font-style: normal;
  font-weight: 850;
  text-align: right;
}
.winPctChart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  padding: 16px;
  border-radius: 10px;
  background: #0B1220;
}
.winPctRow {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #111827;
}
.winPctName {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #E5E7EB;
  font-weight: 750;
}
.winPctBars {
  display: grid;
  gap: 7px;
}
.winPctBars label {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 46px;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.winPctBars b {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #263448;
}
.winPctBars i {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
}
.winPctBars em {
  color: #E5E7EB;
  font-style: normal;
  text-align: right;
}
.winPctBars .actual,
.chartLegend .actual::before {
  background: #F97316;
}
.winPctBars .allplay,
.chartLegend .allplay::before {
  background: #22C55E;
}
.winPctBars .median,
.chartLegend .median::before {
  background: #0EA5E9;
}
.chartLegend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 12px;
  color: #E5E7EB;
  font-size: 12px;
  font-weight: 750;
}
.chartLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chartLegend span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.leagueHistorySection,
.managerCompareCard,
.recordsBoard {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.seasonChip {
  display: inline-flex;
  margin-right: 8px;
  color: #60A5FA;
  font-size: 12px;
  text-decoration: underline;
}
.h2hWrap {
  overflow-x: auto;
}
.h2hTable {
  min-width: 1040px;
}
.h2hTable th,
.h2hTable td {
  text-align: center;
  white-space: normal;
}
.h2hTable th:first-child,
.h2hTable td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 190px;
  text-align: left;
  background: #111827;
}
.h2hTable th:first-child {
  background: #162033;
}
.h2hTable .selfCell {
  color: #2563EB;
}
.managerCompareCard h3,
.recordsBoard h3 {
  margin-bottom: 16px;
  font-size: 24px;
}
.compareManagerHeader,
.managerCompareRow {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr;
  gap: 14px;
  align-items: center;
}
.compareManagerHeader {
  padding: 14px 18px;
  border-radius: 8px;
  background: #1A2333;
}
.compareManagerHeader > span,
.managerCompareRow strong,
.compareRecent > span {
  color: #F8FAFC;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}
.compareManagerHeader label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.managerCompareRow {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.managerCompareRow span {
  font-weight: 800;
}
.compareRecent {
  padding: 18px;
}
.dualRecentGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 14px;
}
.recordsBoards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.recordsBoard {
  overflow: hidden;
}
.recordsBoard table th,
.recordsBoard table td {
  white-space: nowrap;
}
.matchupRecordCards {
  display: grid;
  gap: 14px;
}
.matchupRecordCards article {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1A2333;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.matchupRecordCards article:hover,
.matchupRecordCards article:focus-visible {
  border-color: #3B82F6;
  background: #1E2D45;
  outline: none;
  transform: translateY(-1px);
}
.matchupRecordCards article header {
  grid-column: 1 / -1;
  color: #F8FAFC;
  font-weight: 850;
}
.matchupDiff {
  grid-row: span 2;
}
.matchupDiff span {
  display: block;
  font-size: 24px;
  font-weight: 850;
}
.matchupDiff em {
  display: block;
  color: var(--muted);
  font-style: normal;
}
.matchupTeams {
  display: grid;
  gap: 7px;
}
.matchupRecordCards p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: #E5E7EB;
}
.matchupRecordCards p strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.matchupRecordCards b {
  color: #60A5FA;
}

.matchupDetailScoreboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.matchupDetailScoreboard article {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  background: #111827;
}

.matchupDetailScoreboard article.winner {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.08);
}

.matchupDetailScoreboard span,
.matchupDetailScoreboard strong,
.matchupDetailScoreboard em {
  display: block;
}

.matchupDetailScoreboard span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.matchupDetailScoreboard strong {
  margin-top: 8px;
  color: #F8FAFC;
  font-size: 34px;
}

.matchupDetailScoreboard em {
  margin-top: 5px;
  color: #9CA3AF;
  font-style: normal;
}

.matchupWeekList {
  display: grid;
  gap: 8px;
}

.matchupWeekList div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #111827;
}

.matchupWeekList div.highlight {
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.08);
}

.matchupWeekList span {
  color: #CBD5E1;
  font-weight: 750;
}

.matchupWeekList strong {
  color: #60A5FA;
}

.matchupLineupsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lineupBreakdownCard {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: #0B1220;
}

.lineupRows {
  display: grid;
  gap: 7px;
}

.lineupRows div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #111827;
}

.lineupRows span {
  min-width: 0;
  overflow: hidden;
  color: #CBD5E1;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lineupRows strong {
  color: #F8FAFC;
}

.benchBreakdown {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #101826;
}

.benchBreakdown summary {
  color: var(--muted);
  cursor: pointer;
  font-weight: 850;
}

.wrappedShell {
  display: grid;
  gap: 18px;
}
.wrappedHero {
  padding: 34px;
  border-radius: 12px;
  background: #111827;
  color: #fff;
  box-shadow: var(--shadow);
}
.wrappedHero span {
  display: block;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.wrappedHero h2 {
  margin-top: 8px;
  font-size: 42px;
}
.wrappedHero p {
  margin-top: 8px;
  color: #d1d5db;
}
.wrappedGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.wrappedCard {
  min-height: 220px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
}
.wrappedCard > span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.wrappedCard h3 {
  margin-top: 8px;
  font-size: 22px;
}
.wrappedCard p {
  margin-top: 14px;
  color: var(--muted);
  line-height: 1.45;
}
.wrappedBig {
  margin-top: 18px;
  font-size: 42px;
  font-weight: 850;
  color: var(--ink);
}
.wrappedStatRow {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.wrappedStatRow b {
  font-size: 24px;
}
.wrappedStatRow span {
  color: var(--muted);
  font-weight: 700;
}
.wrappedBars {
  margin-top: 18px;
}
.wrappedMiniList {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.wrappedMiniList div {
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
}
.wrappedMiniList strong,
.wrappedMiniList span {
  display: block;
}
.wrappedMiniList span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.assistantControls, .compareControls {
  display: grid;
  gap: 12px;
}
.assistantControls {
  grid-template-columns: repeat(3, 1fr);
}
.compareControls {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.compareControls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

/* Top row: Position and Age range split evenly */
.compareControls > label:nth-child(1),
.compareControls > label:nth-child(2) {
  grid-column: span 6;
}

/* Player A search + dropdown split evenly */
.compareControls > label:nth-child(3),
.compareControls > label:nth-child(4) {
  grid-column: span 6;
}

/* Player B search + dropdown split evenly */
.compareControls > label:nth-child(5),
.compareControls > label:nth-child(6) {
  grid-column: span 6;
}

.comparePlayerSelect {
  grid-column: span 6;
}

.compareControls input,
.compareControls select {
  width: 100%;
  min-height: 42px;
}

.comparePlayerSearch {
  min-height: 42px;
}
.recommendation h3 { font-size: 24px; margin-bottom: 5px; }
.reasonList { margin: 12px 0 0; padding-left: 18px; line-height: 1.5; }
.auditLayout { display: grid; gap: 15px; }
.auditGrid, .teamGrid { display: grid; gap: 10px; }
.auditCard, .teamCard, .warning {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.warning strong { display: block; margin-bottom: 4px; }
.emptyState { padding: 16px; color: var(--muted); }

.teamDashboard,
.teamDetailProfile {
  display: grid;
  gap: 16px;
}

.teamHeroCard,
.teamVisualCard,
.teamTrendCard,
.teamRosterCard {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.teamHeroCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
}

/* Shared team identity treatment. The Draft Board team drawer sits outside
   #teamsView, so these sizing rules must apply to both surfaces. */
.teamIdentity {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  vertical-align: middle;
}
.teamIdentity img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex: 0 0 auto;
}
.teamIdentity > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.teamIdentity strong {
  color: var(--head, #F3F6FB);
  font-weight: 750;
}
.teamIdentity em {
  color: var(--muted, #8A94A6);
  font-size: 9px;
  font-style: normal;
  letter-spacing: .08em;
}
.teamIdentity-hero img { width: 42px; height: 42px; }
.teamIdentity-tile img { width: 25px; height: 25px; }
.teamIdentity-tile strong { font-size: 12px; }
.teamIdentity-row img { width: 22px; height: 22px; }
.teamIdentity-row strong {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.teamHeroHeading { margin: 0; }

.teamLogo {
  display: inline-block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 auto;
  vertical-align: middle;
}
.teamLogo-compact { width: 22px; height: 22px; }
.teamLogo-hero { width: 42px; height: 42px; }
.teamLogo-tile { width: 25px; height: 25px; }
.teamLogo-row { width: 22px; height: 22px; }
.teamLogo-micro { width: 18px; height: 18px; }
.playerHeadshot {
  display: inline-block;
  width: 26px;
  height: 26px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(148,163,184,.35);
  flex: 0 0 auto;
  vertical-align: middle;
}
.playerHeadshot-tiny { width: 22px; height: 22px; }
.playerHeadshot-small { width: 34px; height: 34px; }
.playerHeadshot-detail { width: 72px; height: 72px; border-width: 2px; }
.playerHeadshot-hero { width: 96px; height: 96px; border-width: 2px; }
.playerInlineIdentity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.playerInlineIdentity strong { min-width: 0; }
.playerTableIdentity { display: inline-flex; align-items: center; gap: 6px; }
.playerDetailHeading { display: flex; align-items: center; min-height: 76px; }
.playerTeamIdentity,
.compareTeamIdentity,
.cmpCaseTeamIdentity,
.asstTeamIdentity,
.newsTeamIdentity,
.teamOffenseBubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.teamOffenseBubble { white-space: nowrap; }
.newsTeamIdentity { vertical-align: middle; }
.myRanksTeamCell { vertical-align: middle; white-space: nowrap; }
.myRanksTeamCell .teamLogo { margin-right: 4px; }

.teamHeroCard span,
.teamRosterGroup h4,
.teamTrendCard p {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.teamHeroCard h2,
.teamHeroCard h3 {
  margin-top: 4px;
  font-size: 28px;
}

.teamHeroCard p {
  max-width: 780px;
  margin-top: 8px;
  color: #CBD5E1;
  line-height: 1.55;
}

.teamMetricRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.teamContextOverview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.teamContextScore,
.teamContextTakeaway {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.teamContextScore div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.teamContextScore span,
.teamContextTakeaway span,
.teamRankControls label,
.teamRankWeakness span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.teamContextScore strong {
  color: var(--ink);
  font-size: 22px;
}

.teamContextScore p,
.teamContextTakeaway p,
.teamRankTakeaway {
  margin-top: 10px;
  color: #CBD5E1;
  line-height: 1.45;
}

.teamContextScore p small {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 750;
}

.teamStatCard small {
  display: block;
  margin-top: 5px;
  color: #94A3B8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.teamContextScore.positive strong {
  color: #6EE7B7;
}

.teamContextScore.negative strong {
  color: #FCA5A5;
}

.teamContextTakeaway {
  grid-column: 1 / -1;
}

.teamContextTakeaway strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 18px;
}

.teamVisualGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.teamVisualCard,
.teamTrendCard,
.teamRosterCard {
  padding: 16px;
}

.teamTrendCard {
  width: 100%;
  color: inherit;
  text-align: left;
}

.teamTrendCard:hover,
.teamTrendCard:focus-visible,
.teamStatCard:hover,
.teamStatCard:focus-visible {
  border-color: var(--accent-2);
  outline: none;
}

.teamTrendCard.positive {
  color: #86EFAC;
}

.teamTrendCard.negative {
  color: #FCA5A5;
}

.teamRosterGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.teamRosterGroup {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.teamRosterGroup button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 10px;
  background: #101826;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.teamRosterGroup button:hover {
  border-color: #315174;
  background: #12263A;
}

.teamRosterGroup strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamRosterGroup span,
.teamRosterGroup em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.teamHistoryHeader {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.teamHistoryHeader p {
  color: var(--muted);
  line-height: 1.45;
}

.teamYearSelect {
  min-width: 160px;
}

.teamHistoricalGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.teamInsightBlock {
  display: grid;
  gap: 12px;
  margin: 12px 0 16px;
}

.calloutRail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calloutRail span {
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(37, 99, 235, 0.12);
  color: #BFDBFE;
  font-size: 12px;
  font-weight: 850;
}

.teamInsightGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.teamInsightGrid article {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.62);
}

.teamInsightGrid h4 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 12px;
  text-transform: uppercase;
}

.teamInsightGrid ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 17px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.teamStatCard {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #0B1220;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.teamStatCard span,
.teamStatCard strong,
.teamStatCard em {
  display: block;
}

.teamStatCard span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.teamStatCard strong {
  margin-top: 8px;
  font-size: 24px;
}

.teamStatCard em {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.teamStatCard.positive strong {
  color: #6EE7B7;
}

.teamStatCard.negative strong {
  color: #FCA5A5;
}

.teamRankingsPanel {
  display: grid;
  gap: 14px;
}

.teamRankControls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.teamRankControls label {
  display: grid;
  gap: 6px;
  min-width: 160px;
}

.teamRankControls select {
  min-height: 38px;
  border: 1px solid #273449;
  border-radius: 8px;
  background: #0B1220;
  color: var(--ink);
}

.teamRankGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.teamRankCard {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px;
  background: #0B1220;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.teamRankCard span,
.teamRankCard strong,
.teamRankCard em {
  position: relative;
  z-index: 1;
  display: block;
}

.teamRankCard span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.teamRankCard strong {
  margin-top: 8px;
  font-size: 24px;
}

.teamRankCard em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.teamRankCard i {
  display: block;
  height: 4px;
  margin-top: 12px;
  border-radius: 999px;
  background: #64748B;
}

.teamRankCard.positive strong,
.teamRankCard.positive i {
  color: #6EE7B7;
  background: #34D399;
}

.teamRankCard.negative strong,
.teamRankCard.negative i {
  color: #FCA5A5;
  background: #F87171;
}

.teamRankCard:hover,
.teamRankCard:focus-visible {
  border-color: var(--accent-2);
  outline: none;
}

.teamRankWeakness {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.teamRankWeakness button {
  border: 1px solid rgba(248, 113, 113, 0.22);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(248, 113, 113, 0.09);
  color: #FCA5A5;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.teamTiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.teamTile {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.teamTile:hover,
.teamTile.active {
  border-color: #315174;
  background: #12263A;
}

.teamTile.ppg-elite {
  border-color: rgba(52, 211, 153, 0.38);
  background: rgba(16, 185, 129, 0.13);
}

.teamTile.ppg-good {
  border-color: rgba(96, 165, 250, 0.32);
  background: rgba(37, 99, 235, 0.12);
}

.teamTile.ppg-neutral {
  border-color: rgba(148, 163, 184, 0.20);
}

.teamTile.ppg-bad {
  border-color: rgba(248, 113, 113, 0.30);
  background: rgba(127, 29, 29, 0.12);
}

.teamTile.ppg-elite span { color: #A7F3D0; }
.teamTile.ppg-good span { color: #BFDBFE; }
.teamTile.ppg-bad span { color: #FCA5A5; }

.teamTile div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.teamTile .teamIdentity {
  width: 100%;
  min-width: 0;
  align-items: flex-start;
}

.teamTile .teamIdentity > span {
  min-width: 0;
  flex: 1 1 auto;
}

.teamTile strong {
  font-size: 16px;
  display: block;
  min-width: 0;
  line-height: 1.15;
}

.teamTile .teamIdentityLine {
  display: block;
  min-width: 0;
  overflow-wrap: normal;
  white-space: nowrap;
  color: var(--head, #F3F6FB);
  font-size: inherit;
  line-height: 1.15;
}

.teamTile span,
.teamTile em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.teamDrawer {
  width: auto;
}

.detailInsightDrawer {
  width: auto;
}

.insightProfile {
  display: grid;
  gap: 16px;
}

.insightProfile > span {
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.insightProfile h2 {
  font-size: 28px;
}

.insightProfile > p {
  color: var(--muted);
}

.insightChart,
.insightBigNumber {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.insightChart .miniLine {
  height: 300px;
}

.insightChart .chartCard {
  padding: 16px;
}

.insightChart .chartBody {
  min-height: 340px;
}

.insightChart .chartDataTable {
  margin-top: 16px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.insightChart .chartDataTable table {
  margin-top: 0;
}

.insightBigNumber strong {
  display: block;
  font-size: 44px;
  color: var(--ink);
}

.insightBigNumber span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.teamContextComponentList {
  display: grid;
  gap: 14px;
}

.teamContextComponent {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.24);
}

.teamContextComponent p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.miniPlayerButton {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #162033;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.miniPlayerButton:hover,
.miniPlayerButton:focus-visible {
  border-color: var(--accent-2);
  outline: none;
}

.miniPlayerButton span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.draftPriceCompList {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.draftPriceCompRow {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(260px, 2fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111827;
  color: #F8FAFC;
  text-align: left;
  cursor: pointer;
}
.draftPriceCompRow:hover,
.draftPriceCompRow:focus-visible {
  border-color: var(--accent-2);
  outline: none;
}
.draftPriceCompRow strong {
  min-width: 0;
  overflow: hidden;
  color: #F8FAFC;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draftPriceCompRow span {
  min-width: 0;
  overflow: hidden;
  color: #CBD5E1;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keeperManager {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.keeperManagerHeader {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.keeperManagerHeader p {
  margin-top: 5px;
  color: var(--muted);
}

.keeperSearch {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.keeperManagerGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.keeperManagerGrid h5 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 13px;
  text-transform: uppercase;
}

.keeperList {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}

.keeperList article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0B1220;
}

.keeperList span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.keeperList button {
  border: 1px solid #273449;
  border-radius: 8px;
  padding: 7px 10px;
  background: #182235;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.keeperList button:hover,
.keeperList button:focus-visible {
  border-color: var(--accent-2);
  outline: none;
}

/* Institutional dark theme consolidation */
.topbar,
.tabs,
.panelHeader,
.draftHealth {
  background: #111827;
  border-color: var(--line);
}

.topbar {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}

main {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 28rem),
    var(--page);
}

input,
select,
.inlineSelect select {
  border-color: #253247;
  background: #0B1220;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.settingsPanel select {
  border-color: #2B405B;
  background: linear-gradient(180deg, #102038, #0B1424);
}

.filters select {
  border-color: #1F4B5C;
  background: linear-gradient(180deg, #0C2330, #081625);
}

.assistantControls select {
  border-color: #374151;
  background: linear-gradient(180deg, #172033, #0D1424);
}

.compareControls select {
  border-color: #3E4C7A;
  background: linear-gradient(180deg, #151D35, #0D1325);
}

.inlineSelect select,
.draftHistoryControls select {
  border-color: #3B315F;
  background: linear-gradient(180deg, #1A1834, #0E1022);
}

.inlineSelect select {
  border-color: #31435F;
  background: linear-gradient(180deg, #111E31, #0B1322);
}

.teamRankControls select,
.teamYearSelect {
  border-color: #275247;
  background: linear-gradient(180deg, #0E251F, #081711);
}

.playersToolbar select,
.playersToolbar input {
  border-color: #2A4D63;
  background: linear-gradient(180deg, #0E2030, #081321);
}

#scoringFormat {
  border-color: #365078;
}

#rankMode {
  border-color: #4B3F72;
  min-width: 100%;
}

#boardType {
  border-color: #7C5B2A;
  background: linear-gradient(180deg, #241B0E, #111827);
}

select:hover {
  border-color: #3B5373;
  background: #132039;
}

select:focus {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

input::placeholder {
  color: #64748B;
}

input:focus,
select:focus,
button:focus {
  outline-color: rgba(96, 165, 250, 0.35);
}

.tab {
  color: #94A3B8;
}

.tab:hover {
  color: var(--ink);
  background: rgba(148, 163, 184, 0.08);
}

.tab.active {
  background: #162033;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.settingBlock,
.rosterText,
.kpis button,
.panel,
.metric,
.snapshotCard,
.snapshotRanks div,
.coreMetrics div,
.detailSection,
.visualCard,
.advancedDetails,
.historyHero div,
.managerCard,
.leagueDnaCard,
.dnaItem,
.insightCards article,
.recordCard,
.championCard,
.managerSummaryCard,
.wrappedCard,
.wrappedMiniList div,
.auditCard,
.teamCard,
.warning,
.contributionList div {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}

.settingBlock,
.panel,
.visualCard,
.leagueDnaCard,
.wrappedCard,
.managerSummaryCard,
.recordCard,
.championCard,
.insightCards article {
  border-radius: 12px;
}

.resetButton {
  border-color: #273449;
  background: #182235;
  color: var(--ink);
}

.resetButton:hover {
  background: #1D2A44;
  border-color: #385276;
}

th {
  background: #162033;
  color: #CBD5E1;
  box-shadow: inset 0 -1px 0 var(--line);
}

td {
  background: #111827;
  color: #D1D5DB;
}

th,
td {
  padding-top: 12px;
  padding-bottom: 12px;
}

tbody tr:nth-child(even) td,
tbody tr:nth-child(even) td {
  background: #131E31;
}

tbody tr:hover td {
  background: #1B2A44;
}

tbody tr.selected td {
  background: #1E3A5F;
  box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.5), inset 0 -1px 0 rgba(147, 197, 253, 0.5);
}

.boardPanel th:nth-child(1),
.boardPanel th:nth-child(2),
.boardPanel th:nth-child(3) {
  background: #162033;
}

.boardPanel td:nth-child(1),
.boardPanel td:nth-child(2),
.boardPanel td:nth-child(3) {
  background: #111827;
}

.boardPanel tbody tr:nth-child(even) td:nth-child(1),
.boardPanel tbody tr:nth-child(even) td:nth-child(2),
.boardPanel tbody tr:nth-child(even) td:nth-child(3) {
  background: #131E31;
}

.boardPanel tbody tr:hover td:nth-child(1),
.boardPanel tbody tr:hover td:nth-child(2),
.boardPanel tbody tr:hover td:nth-child(3) {
  background: #1B2A44;
}

.boardPanel tbody tr.selected td:nth-child(1),
.boardPanel tbody tr.selected td:nth-child(2),
.boardPanel tbody tr.selected td:nth-child(3) {
  background: #1E3A5F;
}

.boardPanel td:nth-child(2) {
  color: #F8FAFC;
}

.infoIcon {
  border-color: #475569;
  background: #0B1220;
  color: #CBD5E1;
}

.infoIcon::after {
  background: #020617;
  color: var(--ink);
  border: 1px solid #334155;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.infoIcon::before {
  border-bottom-color: #334155;
}

.infoIcon[data-tip]::after,
.infoIcon[data-tip]::before {
  display: none !important;
}

.appInfoTooltip {
  position: fixed;
  z-index: 100000;
  max-width: min(360px, calc(100vw - 24px));
  padding: 10px 11px;
  border: 1px solid var(--chart-tooltip-border, rgba(199, 210, 254, 0.22));
  border-radius: 8px;
  background: var(--chart-tooltip-bg, rgba(12, 18, 30, 0.98));
  color: var(--ink);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
  font-size: var(--font-size-helper, 0.75rem);
  font-weight: 640;
  line-height: 1.45;
  white-space: normal;
  pointer-events: none;
}

.appInfoTooltip[hidden] {
  display: none;
}

.helpText,
.pageHelp,
.sectionHelp {
  color: var(--color-text-muted, var(--muted));
  font-size: var(--font-size-helper, 0.75rem);
  font-weight: var(--font-weight-subtitle, 640);
  line-height: 1.45;
}

.helpPanel {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
}

.helpPanel summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 850;
}

.helpPanel p {
  margin-top: 8px;
  color: var(--color-text-muted, var(--muted));
  font-size: var(--font-size-helper, 0.75rem);
  line-height: 1.45;
}

.metric strong,
.healthCard strong,
.wrappedBig,
.historyHero strong,
.snapshotRanks strong,
.coreMetrics strong,
.insightCards strong,
.recordCard strong,
.championCard strong,
.managerSummaryCard h3,
.leagueDnaHeader h3,
.dnaItem strong,
.wrappedCard h3,
.detail h3,
.detailSection h4,
.explainSubsection h4 {
  color: var(--ink);
}

.detailSection p,
.explain,
.managerSummaryCard p {
  color: #CBD5E1;
}

.explain {
  border-color: var(--line);
  background: #0B1220;
}

.sleeperStatus,
.healthCard,
.valueCell,
.snapshotRanks div,
.coreMetrics div,
.dnaItem,
.wrappedMiniList div {
  background: #162033;
}

.good {
  background: rgba(52, 211, 153, 0.14);
  color: #6EE7B7;
}

.bad {
  background: rgba(248, 113, 113, 0.14);
  color: #FCA5A5;
}

.warn,
.healthWarnings span {
  background: rgba(251, 191, 36, 0.14);
  color: #FCD34D;
}

.neutral {
  background: rgba(148, 163, 184, 0.14);
  color: #CBD5E1;
}

.blue {
  background: rgba(96, 165, 250, 0.14);
  color: #93C5FD;
}

.valueStrong,
.coreMetrics div.valueStrong {
  background: rgba(52, 211, 153, 0.16);
  color: #6EE7B7;
}

.valueGood,
.coreMetrics div.valueGood {
  background: rgba(52, 211, 153, 0.11);
  color: #A7F3D0;
}

.valueNeutral,
.coreMetrics div.valueNeutral {
  background: rgba(148, 163, 184, 0.12);
  color: #CBD5E1;
}

.valueBad,
.coreMetrics div.valueBad {
  background: rgba(248, 113, 113, 0.13);
  color: #FCA5A5;
}

.barTrack,
.splitTrack,
.stackTrack {
  background: #273449;
}

.barTrack .positive {
  background: #34D399;
}

.barTrack .negative {
  background: #F87171;
}

.barTrack .info,
.splitTrack span {
  background: #60A5FA;
}

.barTrack .neutral,
.barTrack .muted,
.splitTrack b {
  background: #64748B;
}

.miniLine {
  color: #93C5FD;
  background: transparent;
  border: 0;
}

.decisionSignal {
  background: #101827;
  border-color: #273449;
}
.decisionSignal.good { background: rgba(52, 211, 153, 0.08); }
.decisionSignal.bad { background: rgba(248, 113, 113, 0.08); }
.decisionSignal.warn { background: rgba(251, 191, 36, 0.08); }
.decisionSignal p,
.decisionSignal p strong {
  color: #E5E7EB;
}
.quantCard,
.compareQuantContext {
  background: #101827;
  border-color: #273449;
}
.quantCard.good { background: rgba(52, 211, 153, 0.08); }
.quantCard.bad { background: rgba(248, 113, 113, 0.08); }
.quantCard.warn { background: rgba(251, 191, 36, 0.08); }
.quantCard strong,
.quantCard p {
  color: #E5E7EB;
}
.quantCard em {
  color: #CBD5E1;
}

.chartLabels {
  color: #94A3B8;
}

.interactiveChart .chartLegend {
  justify-content: flex-start;
  gap: 6px;
  margin-top: 0;
}

.chartToggle,
.chartLegendItem,
.chartOpenButton,
.chartTypeSelector select {
  background: #101827;
  border-color: #273449;
  color: #CBD5E1;
}

.chartToggle.active,
.chartLegendItem:not(.inactive) {
  background: rgba(96, 165, 250, 0.16);
  color: #F8FAFC;
}

.chartOpenButton:hover,
.chartOpenButton:focus-visible,
.chartToggle:hover,
.chartToggle:focus-visible,
.chartLegendItem:hover,
.chartLegendItem:focus-visible {
  border-color: rgba(96, 165, 250, 0.65);
  outline: none;
}

.pos-QB { background: #3B82F6; }
.pos-RB { background: #10B981; }
.pos-WR { background: #38BDF8; color: #082F49; }
.pos-TE { background: #8B5CF6; }
.pos-DST { background: #64748B; }
.pos-K { background: #F59E0B; color: #111827; }
.pos-UNK { background: #94A3B8; color: #111827; }

.warning {
  background: rgba(251, 191, 36, 0.08);
}

.emptyState {
  color: var(--muted);
}

@media (max-width: 1100px) {
  .settingsPanel, .filters, .kpis, .layout, .assistantLayout, .auditLayout, .assistantControls, .compareControls {
    grid-template-columns: 1fr;
  }
  .topbar { align-items: stretch; flex-direction: column; }
  .headerActions { min-width: 0; }
  .detailPanel { position: static; }
  .dnaGrid,
  .managerFocus,
  .managerProfileLayout,
  .draftSignalGrid,
  .decisionSignalGrid,
  .quantGrid,
  .visualGrid,
  .compareChartGrid {
    grid-template-columns: 1fr;
  }
  .managerProfilesIntro {
    align-items: flex-start;
    flex-direction: column;
  }
  .leagueDnaHeader {
    display: grid;
    gap: 10px;
  }
  .managerPreference {
    grid-template-columns: 1fr;
  }
  .leagueHistoryHero,
  .leagueLeadersCard {
    grid-template-columns: 1fr;
    display: grid;
  }
  .leagueLeadersCard div {
    grid-template-columns: 1fr;
  }
  .leagueLeadersCard em {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }
  .compareManagerHeader,
  .managerCompareRow,
  .dualRecentGrid,
  .matchupLineupsGrid,
  .matchupDetailScoreboard,
  .recordsBoards,
  .draftGradeGrid,
  .playersToolbar,
  .playerProfileGrid,
  .playerHero,
  .liveDraftMetrics,
  .assistantRecommendationHero,
  .assistantAnalysisGrid,
  .workbookStatGrid,
  .teamMetricRow,
  .teamVisualGrid,
  .teamRosterGrid {
    grid-template-columns: 1fr;
  }
  .draftHealth {
    grid-template-columns: 1fr;
  }
  .healthWarnings {
    justify-content: flex-start;
    max-width: none;
  }
  .assistantScoreBox {
    text-align: left;
  }
  .teamHeroCard {
    align-items: flex-start;
    flex-direction: column;
  }
  .playersBoard {
    grid-template-columns: repeat(4, 270px);
  }
  .playerContract {
    grid-template-columns: 1fr;
  }
  .playerHeroScore {
    text-align: left;
  }
  .draftHistoryControls,
  .draftGradesIntro {
    align-items: stretch;
    flex-direction: column;
  }
  .winPctChart,
  .winPctRow {
    grid-template-columns: 1fr;
  }
  .wrappedGrid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Professional UI Cleanup Pass
   Purpose: unify theme, reduce visual clutter, improve draft-room usability
   Safe: CSS-only overrides; no ranking/model logic changes
   ========================================================= */

/* ---------- Design tokens ---------- */

:root {
  --page: #07111f;
  --page-2: #0b1628;
  --panel: #101a2b;
  --panel-soft: #142033;
  --panel-raised: #17243a;
  --surface: #0f1b2d;
  --surface-2: #162338;

  --ink: #eef4ff;
  --ink-strong: #f8fbff;
  --muted: #9aa9bd;
  --muted-2: #6f8198;

  --line: rgba(148, 163, 184, 0.18);
  --line-strong: rgba(148, 163, 184, 0.32);

  --accent: #60a5fa;
  --accent-2: #93c5fd;
  --accent-soft: rgba(96, 165, 250, 0.14);

  --good: #34d399;
  --good-soft: rgba(52, 211, 153, 0.12);
  --bad: #fb7185;
  --bad-soft: rgba(251, 113, 133, 0.12);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.12);
  --blue-soft: rgba(96, 165, 250, 0.12);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow: 0 20px 50px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.24);
}

/* ---------- Base ---------- */

html {
  background: var(--page);
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.12), transparent 32rem),
    linear-gradient(180deg, var(--page-2) 0%, var(--page) 42%, #050b14 100%);
  font-family: Inter, Segoe UI, Arial, sans-serif;
}

main {
  padding: 18px 24px 32px;
}

/* ---------- App shell ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  align-items: center;
  padding: 18px 24px;
  background: rgba(7, 17, 31, 0.92);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.topbar h1 {
  color: var(--ink-strong);
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.topbar p {
  color: var(--muted);
}

.headerActions {
  min-width: min(440px, 48vw);
}

.tabs {
  position: sticky;
  top: 74px;
  z-index: 99;
  gap: 6px;
  padding: 10px 24px 0;
  background: rgba(7, 17, 31, 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.tab {
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  padding: 10px 13px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.tab:hover {
  color: var(--ink);
  background: rgba(148, 163, 184, 0.08);
}

.tab.active {
  color: var(--ink-strong);
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}

/* ---------- Forms and buttons ---------- */

button,
input,
select {
  font: inherit;
}

input,
select {
  background: #0b1424;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

input::placeholder {
  color: var(--muted-2);
}

input:focus,
select:focus,
button:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.34);
  outline-offset: 2px;
  border-color: rgba(147, 197, 253, 0.72);
}

.chatToggle,
.resetButton,
.weightControl button,
.playerDrawerClose,
.teamDrawerClose,
.detailInsightClose,
.chatClose,
.chartToggle,
.chartTypeSelector select {
  border: 1px solid var(--line-strong);
  background: #0b1424;
  color: var(--ink);
  box-shadow: none;
}

.chatToggle,
.resetButton {
  height: 40px;
  border-radius: var(--radius-sm);
  font-weight: 800;
}

.chatToggle:hover,
.resetButton:hover,
.weightControl button:hover {
  border-color: rgba(147, 197, 253, 0.72);
  background: rgba(96, 165, 250, 0.12);
}

/* ---------- Shared panels/cards ---------- */

.panel,
.draftControls,
.settingBlock,
.rosterText,
.metric,
.comparePlayerCard,
.playerHero,
.playerChartCard,
.playerSeasonCard,
.playerTabsCard,
.keeperManager,
.boardIntelCard,
.boardIntelHero article,
.pressureGrid article,
.assistantAnalysisGrid article {
  background: linear-gradient(180deg, var(--panel-raised), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.panelHeader {
  min-height: 54px;
  padding: 14px 16px;
  background: rgba(15, 27, 45, 0.96);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.panelHeader h2 {
  color: var(--ink-strong);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.panelHeader span {
  color: var(--muted);
}

.metric {
  background: #0b1424;
}

.metric strong {
  color: var(--ink-strong);
}

/* ---------- Draft controls ---------- */

.draftControls {
  overflow: hidden;
  margin-bottom: 16px;
}

.draftControls .settingsPanel,
.draftControls .filters,
.draftControls .kpis {
  padding: 12px 14px;
}

.settingsPanel {
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  align-items: stretch;
}

.settingBlock,
.rosterText {
  padding: 11px;
  border-radius: var(--radius-sm);
  background: rgba(11, 20, 36, 0.72);
}

.settingBlock label,
.filters label,
.assistantControls label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.weightBlock {
  grid-column: span 2;
}

.boardOrderBlock {
  grid-column: span 2;
}

.rosterText {
  display: flex;
  align-items: center;
  color: var(--muted);
  line-height: 1.35;
}

.settingHelp {
  color: var(--muted-2);
}

.weightControl {
  grid-template-columns: 30px minmax(100px, 1fr) 30px 62px;
}

.weightControl input[type="range"] {
  accent-color: var(--accent);
}

.advancedModelControls { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(11, 20, 36, .72); overflow: hidden; }
.advancedModelControlsToggle { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.advancedModelControlsToggle strong { display: block; font-size: 13px; }
.advancedModelControlsToggle small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.advancedModelStatus { color: #c4b5fd; font-size: 10px; font-weight: 800; line-height: 1.35; max-width: 56%; text-align: right; }
.advancedModelChevron { color: var(--muted); font-size: 18px; }
.advancedModelControlsBody { padding: 0 14px 14px; border-top: 1px solid var(--line); }
.advancedModelIntro { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; color: var(--muted); font-size: 11px; }
.advancedModelIntro strong { color: var(--ink); }
.advancedModelIntro strong.invalid { color: #fb7185; }
.advancedModelPresets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.advancedModelPresets button { padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: #0b1220; color: var(--muted); cursor: pointer; font-size: 11px; }
.advancedModelPresets button.active, .advancedModelPresets button:hover { border-color: var(--accent); color: var(--ink); background: #132039; }
.advancedModelPresetExplanation { margin: -4px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.advancedModelComponents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.advancedModelComponent { padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: rgba(5, 11, 22, .45); }
.advancedModelComponent.changed { border-color: rgba(196, 181, 253, .6); }
.advancedModelComponent.locked { border-color: rgba(96, 165, 250, .7); }
.advancedModelComponentHead { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: start; }
.advancedModelComponentHead label:first-child { color: var(--ink); font-size: 12px; font-weight: 800; }
.advancedModelComponentDescription { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.advancedModelComponent output { color: var(--ink); font-size: 20px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.modelComponentSlider { width: 100%; margin: 9px 0 3px; accent-color: var(--accent); }
.advancedModelComponent small { color: var(--muted-2); font-size: 10px; }
.advancedModelDefault, .advancedModelEffective { display: block; }
.advancedModelEffective { margin-top: 3px; color: #c4b5fd !important; }
.advancedModelActions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.modelResetAll { padding: 6px 2px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; text-decoration: underline; }
.modelResetAll:hover, .modelResetAll:focus-visible { color: var(--ink); }
.scenarioImpactCard { background: rgba(39, 31, 68, .42); border-color: rgba(196, 181, 253, .48); }
.scenarioImpactTitle { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; color: var(--ink); font-size: 12px; font-weight: 850; }
.scenarioImpactTitle strong { color: #c4b5fd; font-size: 11px; }
.scenarioImpactGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.scenarioImpactGrid span, .scenarioImpactLeaders span { color: var(--muted); font-size: 10px; }
.scenarioImpactGrid strong { display: block; margin-top: 2px; color: var(--ink); font-size: 15px; }
.scenarioImpactLeaders { display: grid; gap: 4px; margin-top: 10px; }
.scenarioImpactLeaders strong { color: var(--ink); font-weight: 750; }
.scenarioImpactCard > small { display: block; margin-top: 10px; color: var(--muted-2); font-size: 10px; line-height: 1.35; }
.customScenarioStatus { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; margin: 0 14px 12px; padding: 9px 12px; border: 1px solid rgba(251, 191, 36, .55); border-radius: 7px; background: rgba(120, 74, 12, .22); color: #fde68a; }
.customScenarioStatus strong { font-size: 11px; letter-spacing: .08em; }
.customScenarioStatus span { color: #fef3c7; font-size: 11px; }
.advancedModelNote { margin: 10px 0 0; color: var(--muted-2); font-size: 10px; line-height: 1.4; }
.modelMovementSummary { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.modelMovementSummary summary { color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 800; }
.modelMovementStats { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0; color: var(--muted); font-size: 11px; }
.modelMovementStats b, .modelMovementLists b { color: var(--ink); }
.modelMovementLists { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; color: var(--muted); font-size: 11px; }
.modelMovementLists strong { display: block; margin-bottom: 4px; color: var(--ink); }
.modelMovementLists span { display: flex; justify-content: space-between; padding: 2px 0; }
.scenarioRankNote { display: block; color: var(--muted-2); font-size: 9px; white-space: nowrap; }

@media (max-width: 650px) {
  .advancedModelControlsToggle { grid-template-columns: minmax(0, 1fr) auto; }
  .advancedModelStatus { grid-column: 1; grid-row: 2; }
  .advancedModelStatus { max-width: 100%; text-align: left; }
  .advancedModelChevron { grid-column: 2; grid-row: 1 / span 2; }
  .advancedModelIntro { display: block; }
  .advancedModelIntro span { display: block; margin-bottom: 4px; }
  .advancedModelComponents { grid-template-columns: 1fr; }
  .modelMovementLists { grid-template-columns: 1fr; }
}

@media (min-width: 651px) and (max-width: 980px) {
  .advancedModelComponents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.filters {
  grid-template-columns: repeat(7, minmax(110px, 1fr)) auto;
  gap: 10px;
  border-top: 1px solid var(--line);
}

.kpis {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
}

.kpis button {
  border-radius: var(--radius-sm);
  background: rgba(11, 20, 36, 0.82);
  box-shadow: none;
}

.kpis button:hover,
.kpis button:focus-visible {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(147, 197, 253, 0.56);
  transform: translateY(-1px);
}

.kpis span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.kpis strong {
  color: var(--ink-strong);
  font-size: 28px;
}

/* ---------- Board header ---------- */

.boardHeaderActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.boardSearchInput {
  min-width: 240px;
}

#rowCount {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

/* ---------- Tables ---------- */

.tableWrap {
  background: #08111f;
}

.boardPanel .tableWrap {
  height: calc(100vh - 410px);
  min-height: 430px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

table {
  font-size: 12.25px;
}

th {
  top: 0;
  background: #0d1829;
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: none;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

td {
  background: #0a1322;
  color: var(--ink);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

tbody tr:nth-child(even) td {
  background: #0c1728;
}

tbody tr:hover td {
  background: #12233a;
}

tbody tr.selected td {
  background: rgba(96, 165, 250, 0.16);
  box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.42), inset 0 -1px 0 rgba(147, 197, 253, 0.42);
}

th,
td {
  padding: 9px 10px;
}

.boardPanel th:nth-child(1),
.boardPanel td:nth-child(1),
.boardPanel th:nth-child(2),
.boardPanel td:nth-child(2),
.boardPanel th:nth-child(3),
.boardPanel td:nth-child(3) {
  background: #0d1829;
}

.boardPanel tbody tr:nth-child(even) td:nth-child(1),
.boardPanel tbody tr:nth-child(even) td:nth-child(2),
.boardPanel tbody tr:nth-child(even) td:nth-child(3) {
  background: #0f1b2d;
}

.boardPanel tbody tr:hover td:nth-child(1),
.boardPanel tbody tr:hover td:nth-child(2),
.boardPanel tbody tr:hover td:nth-child(3) {
  background: #152741;
}

.boardPanel td:nth-child(2) {
  color: var(--ink-strong);
  font-size: 16px;
  font-weight: 900;
}

td:nth-child(3) strong,
td:nth-child(3) b {
  color: var(--ink-strong);
}

td:nth-child(3) span {
  color: var(--muted);
}

/* ---------- Pills, badges, status ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 4px 2px 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(148, 163, 184, 0.09);
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.pill.good {
  color: #86efac;
  background: var(--good-soft);
  border-color: rgba(52, 211, 153, 0.36);
}

.pill.bad {
  color: #fda4af;
  background: var(--bad-soft);
  border-color: rgba(251, 113, 133, 0.36);
}

.pill.warn {
  color: #fde68a;
  background: var(--warn-soft);
  border-color: rgba(251, 191, 36, 0.36);
}

.pill.blue {
  color: var(--accent-2);
  background: var(--signal-soft);
  border-color: rgba(91, 157, 249, 0.36);
}

.pill.neutral {
  color: var(--muted);
}

/* ---------- Market/model/value cells ---------- */

.marketModelCell,
.valueCell,
.statScoreCell,
.riskCell,
.upsideCell {
  border-radius: 8px;
  padding: 7px 9px;
  background: rgba(148, 163, 184, 0.08);
}

.marketModelCell strong,
.valueCell strong,
.statScoreCell strong,
.riskCell strong,
.upsideCell strong {
  color: var(--ink-strong);
}

.valueStrong,
.goodPanel {
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(52, 211, 153, 0.09);
}

.valueBad,
.badPanel {
  border-color: rgba(251, 113, 133, 0.28);
  background: rgba(251, 113, 133, 0.09);
}

.valueGood {
  border-color: rgba(96, 165, 250, 0.28);
  background: rgba(96, 165, 250, 0.09);
}

.valueNeutral {
  border-color: var(--line);
  background: rgba(148, 163, 184, 0.08);
}

/* ---------- Charts ---------- */

.chartCard,
.interactiveChart {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(20, 32, 51, 0.96), rgba(11, 20, 36, 0.96));
  box-shadow: var(--shadow-soft);
}

.chartHeader {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px 0;
}

.chartTitle strong {
  color: var(--ink-strong);
  font-size: 13px;
  font-weight: 850;
}

.chartTitle p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.chartHeader b {
  color: var(--ink-strong);
  font-size: 18px;
}

.chartControls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px 0;
}

.chartToggle {
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.chartToggle.active {
  color: var(--ink-strong);
  background: rgba(96, 165, 250, 0.16);
  border-color: rgba(147, 197, 253, 0.52);
}

.chartToggle.inactive {
  opacity: 0.66;
}

.chartTypeSelector select {
  height: 28px;
  min-width: 76px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
}

.chartBody {
  padding: 8px 12px 12px;
}

.svgChart {
  width: 100%;
  min-height: 150px;
}

.chartGridLine {
  stroke: rgba(148, 163, 184, 0.16);
  stroke-width: 0.5;
}

.chartActualLine {
  stroke: var(--accent-2);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2.5px rgba(96, 165, 250, 0.45));
}

/* Gradient area fill beneath the actual line (fill set inline per chart). */
.chartArea {
  stroke: none;
}

.chartTrendLine {
  stroke: var(--warn);
  stroke-width: 1.35;
  stroke-dasharray: 3 3;
  stroke-linecap: round;
  opacity: 0.92;
}

.chartMeanLine {
  stroke: rgba(238, 244, 255, 0.42);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

/* Clean accent-tinted spread band (was a muddy red rgba(248,113,113)). */
.chartStdBand {
  fill: rgba(96, 165, 250, 0.10);
}

/* Point markers stay hidden at rest (they distort under the stretched
   viewBox) and reveal crisply on hover/focus for tooltips. */
.chartPoint {
  fill: var(--ink-strong);
  stroke: var(--accent);
  stroke-width: 0.4;
  opacity: 0;
  transition: opacity .12s ease;
}
.interactiveChart:hover .chartPoint,
.chartCard:hover .chartPoint,
.chartPoint:hover,
.chartPoint:focus-visible {
  opacity: 1;
}

.chartBar {
  fill: rgba(147, 197, 253, 0.7);
}

.chartLabels {
  color: var(--muted-2);
  font-size: 10px;
}

/* ---------- Drawers and overlays ---------- */

.playerDrawer,
.teamDrawer,
.detailInsightDrawer,
.chatPanel {
  background: #08111f;
  border-color: var(--line);
  box-shadow: 24px 0 70px rgba(0, 0, 0, 0.5);
}

.chatPanel {
  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.5);
}

.playerDrawerBackdrop,
.teamDrawerBackdrop,
.detailInsightBackdrop {
  background: rgba(0, 0, 0, 0.54);
  backdrop-filter: blur(3px);
}

.playerHero {
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.16), transparent 24rem),
    linear-gradient(180deg, var(--panel-raised), var(--panel));
}

.playerInitials {
  background: rgba(96, 165, 250, 0.14);
  color: var(--accent-2);
}

/* ---------- Empty states and explain blocks ---------- */

.emptyState,
.explain,
.takeaway,
.sleeperStatus {
  color: var(--muted);
  background: rgba(11, 20, 36, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.explain {
  color: var(--ink);
}

/* ---------- Scrollbars ---------- */

.tableWrap,
.keeperList,
.tabs,
.playerDrawer,
.teamDrawer,
.detailInsightDrawer,
.chatPanel {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.38) transparent;
}

.tableWrap::-webkit-scrollbar,
.keeperList::-webkit-scrollbar,
.tabs::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.tableWrap::-webkit-scrollbar-thumb,
.keeperList::-webkit-scrollbar-thumb,
.tabs::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.34);
  border-radius: 999px;
}

.tableWrap::-webkit-scrollbar-track,
.keeperList::-webkit-scrollbar-track,
.tabs::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- Responsive cleanup ---------- */

@media (max-width: 1200px) {
  .settingsPanel {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }

  .filters {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }

  .kpis {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .assistantLayout,
  .auditLayout,
  .compareGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .topbar {
    position: static;
    display: grid;
    gap: 12px;
    padding: 16px;
  }

  .headerActions {
    min-width: 0;
    width: 100%;
  }

  .tabs {
    position: static;
    padding-inline: 16px;
  }

  main {
    padding: 14px 16px 24px;
  }

  .settingsPanel,
  .filters,
  .kpis {
    grid-template-columns: 1fr;
  }

  .weightBlock,
  .boardOrderBlock {
    grid-column: span 1;
  }

  .boardHeaderActions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .boardSearchInput {
    min-width: 100%;
  }

  .boardPanel .tableWrap {
    height: calc(100vh - 360px);
    min-height: 360px;
  }
}

/* Simplified header after removing share and saved-view controls. */
.headerActions {
  grid-template-columns: auto minmax(240px, 1fr);
  min-width: min(430px, 44vw);
}

@media (max-width: 900px) {
  .headerActions {
    grid-template-columns: auto minmax(220px, 1fr);
    min-width: 0;
  }

  .headerActions #searchInput {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .headerActions {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .chatToggle,
  .headerActions #searchInput {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 480px) {
  .headerActions {
    grid-template-columns: 1fr;
  }

  .chatToggle,
  .headerActions #searchInput {
    grid-column: 1;
  }
}

/* =========================================================
   Laws of UX Decision-Flow Pass
   Scope: cognitive load, progressive disclosure, workflow feedback
   ========================================================= */

.decisionHint,
.uxGuide p,
.activeFilterSummary,
.toast span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.panelHeader .decisionHint {
  max-width: 760px;
  margin: 6px 0 0;
}

.panelDecisionHint {
  margin: -6px 16px 14px;
}

.inlineDecisionHint {
  margin: 7px 0 0;
}

.uxDisclosure {
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--surface-section, var(--color-surface)) 72%, transparent);
}

.uxDisclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 12px 14px;
  color: var(--color-text-strong);
  font-size: var(--font-size-sm);
  font-weight: 780;
  cursor: pointer;
  list-style-position: inside;
}

.uxDisclosure > summary span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 640;
  text-transform: none;
  letter-spacing: 0;
}

.uxDisclosure[open] > summary {
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 64%, transparent);
}

.draftAdvancedControls {
  margin: 0;
  border-inline: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--color-surface-subtle) 70%, transparent);
}

.draftAdvancedControls > .settingsPanel {
  padding-top: 12px;
}

.activeFilterSummary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border-subtle, rgba(148, 163, 184, 0.12));
  background: color-mix(in srgb, var(--color-surface-subtle) 78%, transparent);
}

.activeFilterSummary span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface-elevated) 58%, transparent);
  white-space: nowrap;
}

.activeFilterSummary .filterSummaryLabel {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  font-weight: 780;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.activeFilterSummary b {
  color: var(--color-text-strong);
  font-weight: 760;
}

.uxGuide {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--color-border) 64%, transparent);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--surface-section, var(--color-surface)) 76%, transparent);
}

.uxGuide span {
  display: block;
  margin-bottom: 4px;
  color: var(--color-text-subtle);
  font-size: var(--font-size-xs);
  font-weight: 780;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.uxGuide p {
  margin: 0;
}

.marketDecisionGuide {
  margin: 0 0 var(--space-md);
}

.teamDecisionGuide {
  grid-column: 1 / -1;
}

.assistantSupportDetails {
  margin-top: var(--space-md);
}

.assistantSupportDetails .decisionHint {
  margin: 0;
  padding: 10px 14px 0;
}

.assistantSupportDetails .tableWrap {
  margin: 12px 14px 14px;
}

.playerProfileSubsection > .decisionHint {
  margin: 0;
  padding: 10px 14px 0;
}

.playerDetailFallback {
  display: grid;
  gap: 6px;
  min-height: 160px;
  place-content: center;
  text-align: center;
}

.playerDetailFallback strong {
  color: var(--color-text-strong);
}

.toastRegion {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1400;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--color-border-strong) 80%, transparent);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--chart-tooltip-bg, #0c121e) 94%, transparent);
  box-shadow: var(--shadow-card);
  transform: translateY(0);
  opacity: 1;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.good {
  border-left-color: var(--color-positive);
}

.toast.warn {
  border-left-color: var(--color-warning);
}

.toast.leaving {
  opacity: 0;
  transform: translateY(6px);
}

.toast strong {
  color: var(--color-text-strong);
  font-size: var(--font-size-sm);
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}

@media (max-width: 760px) {
  .uxDisclosure > summary {
    display: grid;
  }

  .activeFilterSummary {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .toastRegion {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }
}
/* =========================================================
   UI Polish Pass 2
   Purpose: reduce density, improve hierarchy, polish draft-night usability
   Safe: CSS-only overrides
   ========================================================= */

/* ---------- Global readability ---------- */

body {
  font-size: 13px;
  line-height: 1.45;
}

.appShell {
  max-width: 1920px;
  margin: 0 auto;
}

h1,
h2,
h3,
h4,
strong {
  letter-spacing: -0.01em;
}

/* ---------- Slightly tighter top navigation ---------- */

.tabs {
  min-height: 40px;
  padding-top: 6px;
}

.tab {
  padding: 8px 12px;
  font-size: 12px;
}

.tab.active {
  background: rgba(20, 32, 51, 0.96);
}

/* ---------- Draft controls: cleaner and less tall ---------- */

.draftControls .panelHeader {
  min-height: 46px;
  padding: 11px 14px;
}

.draftControls .settingsPanel,
.draftControls .filters,
.draftControls .kpis {
  padding: 10px 14px;
}

.settingBlock,
.rosterText {
  min-height: 64px;
  padding: 9px 10px;
}

.settingBlock label,
.filters label,
.assistantControls label {
  font-size: 10px;
}

.weightControl {
  grid-template-columns: 26px minmax(90px, 1fr) 26px 54px;
  gap: 7px;
}

.weightControl button {
  width: 26px;
  height: 26px;
}

.weightNumber {
  height: 28px;
  font-size: 12px;
}

.filters {
  gap: 8px;
}

.filters select,
.filters input {
  height: 34px;
  padding: 7px 9px;
  font-size: 12px;
}

.resetButton {
  height: 34px;
  padding: 0 13px;
  font-size: 12px;
}

/* ---------- KPI cards: more premium, less bulky ---------- */

.kpis button {
  min-height: 62px;
  padding: 12px 14px;
}

.kpis span {
  font-size: 10px;
}

.kpis strong {
  margin-top: 5px;
  font-size: 24px;
}

/* ---------- Main board polish ---------- */

.boardPanel .panelHeader {
  min-height: 48px;
}

.boardPanel .tableWrap {
  height: calc(100vh - 380px);
  min-height: 460px;
}

.boardSearchInput {
  height: 32px;
  font-size: 12px;
}

#rowCount {
  font-size: 11px;
}

table {
  font-size: 11.75px;
}

th,
td {
  padding: 7px 9px;
}

th {
  font-size: 9.8px;
  letter-spacing: 0.05em;
}

.boardPanel td:nth-child(2) {
  font-size: 15px;
}

td:nth-child(3) span {
  max-width: 300px;
  font-size: 10.5px;
  line-height: 1.3;
}

.draftedButton,
.tableLinkButton {
  padding: 4px 8px;
  font-size: 10.5px;
}

.valueCell,
.marketModelCell,
.statScoreCell,
.riskCell,
.upsideCell {
  min-width: 96px;
  padding: 5px 7px;
}

.valueCell strong,
.marketModelCell strong {
  font-size: 12px;
}

.valueCell span,
.marketModelCell span,
.scoreDelta {
  font-size: 10px;
}

/* Badges are currently useful but a little busy in dense rows */
.pill {
  min-height: 19px;
  padding: 3px 7px;
  font-size: 9.8px;
  font-weight: 850;
}

/* ---------- Live draft snapshot ---------- */

.draftHealth {
  padding: 10px 12px;
}

.liveDraftTitle strong {
  font-size: 13px;
}

.liveDraftMetrics {
  gap: 8px;
}

.liveDraftMetrics div,
.healthCard {
  padding: 8px 10px;
}

.healthCards {
  gap: 8px;
}

/* ---------- Player profile polish ---------- */

.playerHero {
  padding: 20px;
}

.playerHero h2,
.playerHero h3 {
  font-size: 22px;
}

.playerInitials {
  width: 52px;
  height: 52px;
  font-size: 15px;
}

.playerScoreHero strong,
.assistantScoreBox strong {
  font-size: 28px;
}

.playerProfileGrid,
.playerMetricGrid,
.compareCoreGrid,
.metricGrid {
  gap: 10px;
}

.playerSeasonCard,
.playerTabsCard,
.playerChartCard {
  border-radius: 14px;
}

/* ---------- Assistant page polish ---------- */

.recommendation {
  padding: 18px;
}

.recommendation h3 {
  font-size: 21px;
}

.assistantAnalysisGrid {
  gap: 9px;
}

.assistantAnalysisGrid article {
  min-height: 100px;
  padding: 12px;
}

.boardIntelPanel {
  padding: 14px;
}

.boardIntelHero article,
.pressureGrid article,
.boardIntelCard {
  padding: 12px;
}

/* ---------- Chart readability ---------- */

.chartHeader {
  padding: 11px 13px 0;
}

.chartTitle strong {
  font-size: 12px;
}

.chartTitle p {
  font-size: 11px;
}

.chartHeader b {
  font-size: 16px;
}

.chartControls {
  padding: 8px 13px 0;
}

.chartToggle {
  min-height: 25px;
  padding: 4px 9px;
  font-size: 10px;
}

.chartBody {
  padding: 8px 12px 10px;
}

.svgChart {
  min-height: 165px;
}

.chartLabels {
  font-size: 10.5px;
  color: #8fa2bb;
}

/* ---------- Team page / stat card cleanup ---------- */

.teamContextHero,
.teamContextSection,
.teamStatRankings,
.teamTrendGrid {
  border-radius: 14px;
}

.teamContextHero p,
.teamContextSection p,
.teamStatRankings p {
  max-width: 900px;
  color: #c6d3e3;
  line-height: 1.55;
}

.teamContextCard,
.teamStatCard {
  padding: 13px;
}

/* ---------- Make yellow/red numeric callouts less harsh ---------- */

.bad,
.valueBad {
  color: #fda4af;
}

.warn {
  color: #fde68a;
}

/* ---------- Wide-screen table usefulness ---------- */

@media (min-width: 1400px) {
  .boardPanel table {
    min-width: 1380px;
  }

  .boardPanel .tableWrap {
    height: calc(100vh - 365px);
  }
}

/* ---------- Small screen cleanup ---------- */

@media (max-width: 900px) {
  .topbar {
    gap: 10px;
  }

  .settingsPanel,
  .filters,
  .kpis {
    grid-template-columns: 1fr 1fr;
  }

  .kpis {
    grid-template-columns: 1fr;
  }

  .assistantAnalysisGrid,
  .compareCoreGrid.compact {
    grid-template-columns: 1fr;
  }
}/* Use more screen width on dashboard views */
.appShell {
  max-width: none;
  width: 100%;
  padding-left: 14px;
  padding-right: 14px;
}

@media (min-width: 1200px) {
  main.appShell {
    padding-left: 12px;
    padding-right: 12px;
  }
}/* Give the live draft table more vertical room */
.boardPanel .tableWrap {
  height: calc(100vh - 335px);
  min-height: 500px;
}/* Improve player readability in the main board */
.boardPanel td:nth-child(3) {
  min-width: 330px;
}

.boardPanel td:nth-child(3) strong,
.boardPanel td:nth-child(3) b {
  font-size: 12.5px;
}

.boardPanel td:nth-child(3) span {
  font-size: 11px;
  color: #aab8cb;
}/* Player detail should feel like a dashboard, not a narrow article */
.playerProfile,
.playerDetailView,
#playerDetail {
  max-width: 1680px;
  width: calc(100% - 48px);
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   Draft Night Mode
   Purpose: live-draft command-center view
   Safe: visual-only mode controlled by body.draftNightMode
   ========================================================= */

.draftNightToggle {
  height: 34px;
  border: 1px solid rgba(96, 165, 250, 0.46);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(96, 165, 250, 0.12);
  color: #dbeafe;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.draftNightToggle:hover {
  border-color: rgba(147, 197, 253, 0.8);
  background: rgba(96, 165, 250, 0.22);
}

.draftNightMode .draftNightToggle {
  border-color: rgba(52, 211, 153, 0.85);
  background: linear-gradient(180deg, #22c55e, #16a34a);
  color: #ecfdf5;
  box-shadow:
    0 8px 20px rgba(34, 197, 94, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Make the draft page feel more like a command center */
.draftNightMode main.appShell {
  padding-top: 8px;
}

.draftNightMode .topbar {
  display: none;
}

.draftNightMode .tabs {
  top: 0;
  min-height: 34px;
  padding-top: 4px;
}

.draftNightMode .tab {
  padding: 7px 11px;
  font-size: 11px;
}

/* Collapse the setup-heavy controls but keep filters/KPIs visible */
.draftNightMode #draftView .draftControls > .panelHeader {
  min-height: 38px;
  padding: 8px 12px;
}

.draftNightMode #draftView .draftControls > .panelHeader span {
  display: none;
}

.draftNightMode #draftView .settingsPanel {
  display: none;
}

.draftNightMode #draftView .filters {
  grid-template-columns: repeat(7, minmax(100px, 1fr)) auto;
  padding: 8px 10px;
}

.draftNightMode #draftView .filters label {
  font-size: 9.5px;
}

.draftNightMode #draftView .filters select,
.draftNightMode #draftView .filters input {
  height: 31px;
  font-size: 11px;
  padding: 6px 8px;
}

.draftNightMode #draftView .kpis {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  padding: 8px 10px;
  gap: 8px;
}

.draftNightMode #draftView .kpis button {
  min-height: 50px;
  padding: 9px 12px;
}

.draftNightMode #draftView .kpis strong {
  font-size: 22px;
}

/* Board gets the priority */
.draftNightMode .boardPanel .panelHeader {
  min-height: 42px;
  padding: 9px 12px;
}

.draftNightMode .boardSearchInput {
  height: 30px;
  width: min(320px, 28vw);
}

.draftNightMode .boardPanel .tableWrap {
  height: calc(100vh - 230px);
  min-height: 620px;
}

/* Make the live snapshot more compact */
.draftNightMode .draftHealth {
  padding: 8px 10px;
}

.draftNightMode .liveDraftSnapshot,
.draftNightMode .healthCards,
.draftNightMode .liveDraftMetrics {
  gap: 7px;
}

.draftNightMode .liveDraftMetrics div,
.draftNightMode .healthCard {
  padding: 7px 9px;
}

/* Make table scan faster */
.draftNightMode table {
  font-size: 12px;
}

.draftNightMode th,
.draftNightMode td {
  padding: 7px 8px;
}

.draftNightMode .boardPanel td:nth-child(2) {
  font-size: 17px;
  color: #f8fbff;
}

.draftNightMode .boardPanel td:nth-child(3) {
  min-width: 360px;
}

.draftNightMode .boardPanel td:nth-child(3) strong,
.draftNightMode .boardPanel td:nth-child(3) b {
  font-size: 13px;
}

.draftNightMode .boardPanel td:nth-child(3) span {
  max-width: 330px;
  font-size: 10.5px;
  opacity: 0.8;
}

.draftNightMode .draftedButton {
  padding: 5px 10px;
  font-size: 11px;
  border-color: rgba(96, 165, 250, 0.48);
}

/* Hide lower-priority table content in draft mode */
.draftNightMode .boardPanel th:nth-child(9),
.draftNightMode .boardPanel td:nth-child(9),
.draftNightMode .boardPanel th:nth-child(10),
.draftNightMode .boardPanel td:nth-child(10) {
  display: none;
}

/* Keep the most important badges, but reduce clutter */
.draftNightMode .pill {
  font-size: 9.5px;
  padding: 3px 6px;
}

.draftNightMode .boardPanel td:nth-child(13) .pill:nth-child(n + 4) {
  display: none;
}

/* Make key score cells easier to read */
.draftNightMode .valueCell,
.draftNightMode .marketModelCell,
.draftNightMode .riskCell,
.draftNightMode .upsideCell {
  min-width: 88px;
  padding: 5px 7px;
}

.draftNightMode .valueCell strong,
.draftNightMode .marketModelCell strong {
  font-size: 13px;
}

/* Prevent mode from harming non-draft views */
.draftNightMode .view:not(#draftView) {
  padding-top: 8px;
}

@media (max-width: 1100px) {
  .draftNightMode #draftView .filters {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .draftNightMode #draftView .kpis {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .draftNightMode .boardPanel .tableWrap {
    height: calc(100vh - 300px);
    min-height: 460px;
  }
}

.draftNightMode #draftView .draftControls > .panelHeader h2 {
  font-size: 0;
}

.draftNightMode #draftView .draftControls > .panelHeader h2::after {
  content: "Draft Night Filters";
  font-size: 13px;
}

/* =========================================================
   Draft Read + Draft Action
   Purpose: make player detail more actionable during live draft
   ========================================================= */

.decisionSnapshotCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.decisionSnapshotMain {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.draftReadBadge {
  min-width: 170px;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  background: rgba(148, 163, 184, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.draftReadBadge span,
.draftActionSummary span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.draftReadBadge strong {
  display: block;
  margin-top: 4px;
  color: var(--ink-strong);
  font-size: 17px;
  line-height: 1.1;
}

.draftReadBadge.good {
  border-color: rgba(52, 211, 153, 0.44);
  background: rgba(52, 211, 153, 0.12);
}

.draftReadBadge.bad {
  border-color: rgba(251, 113, 133, 0.44);
  background: rgba(251, 113, 133, 0.12);
}

.draftReadBadge.warn {
  border-color: rgba(251, 191, 36, 0.44);
  background: rgba(251, 191, 36, 0.10);
}

.draftReadBadge.blue {
  border-color: rgba(96, 165, 250, 0.44);
  background: rgba(96, 165, 250, 0.12);
}

.draftActionSummary {
  grid-column: 1 / -1;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(96, 165, 250, 0.08);
}

.draftActionSummary strong {
  display: block;
  margin-top: 5px;
  color: #f8fbff;
  font-size: 14px;
  line-height: 1.45;
}

.decisionSnapshotCard .snapshotTags {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .decisionSnapshotCard {
    grid-template-columns: 1fr;
  }

  .decisionSnapshotMain {
    display: grid;
  }

  .draftReadBadge {
    min-width: 0;
    width: 100%;
    text-align: center;
  }
}

/* Polish Draft Read + Draft Action layout */
.decisionSnapshotCard {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.decisionSnapshotMain {
  align-items: center;
}

.draftReadBadge {
  align-self: center;
}

.draftActionSummary {
  margin-top: 2px;
  border-color: rgba(96, 165, 250, 0.3);
  background: rgba(96, 165, 250, 0.1);
}

.draftActionSummary span {
  margin-bottom: 3px;
}

.draftActionSummary strong {
  font-size: 13px;
  line-height: 1.4;
}

.decisionSnapshotCard .snapshotTags {
  margin-top: 2px;
}

/* =========================================================
   Alternative to Consider
   Purpose: add a quick pivot option inside player detail
   ========================================================= */

.alternativeCard {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(147, 197, 253, 0.28);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(15, 27, 45, 0.92);
}

.alternativeCard > div:first-child {
  min-width: 0;
}

.alternativeCard span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.alternativeCard strong {
  display: block;
  margin-top: 3px;
  color: #f8fbff;
  font-size: 15px;
}

.alternativeCard p {
  margin-top: 3px;
  color: #aab8cb;
  font-size: 11px;
  line-height: 1.35;
}

.alternativeSignals {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.alternativeReason {
  min-width: 220px;
  max-width: 340px;
}

.alternativeOpenButton {
  height: 32px;
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(96, 165, 250, 0.12);
  color: #dbeafe;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.alternativeOpenButton:hover {
  border-color: rgba(147, 197, 253, 0.8);
  background: rgba(96, 165, 250, 0.2);
}

.mutedAlternative {
  opacity: 0.75;
}

@media (max-width: 1000px) {
  .alternativeCard {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .alternativeSignals {
    justify-content: flex-start;
  }

  .alternativeReason {
    max-width: none;
  }

  .alternativeOpenButton {
    width: fit-content;
  }
}

/* Cleaner Alternative to Consider layout */
.alternativeCard {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.alternativeSignals {
  grid-column: 2;
  grid-row: 1;
}

.alternativeReason {
  grid-column: 1 / -1;
  max-width: none;
  margin-top: 2px;
}

.alternativeOpenButton {
  grid-column: 1 / -1;
  width: min(420px, 100%);
}

/* =========================================================
   Player Detail Mark Drafted Button
   Purpose: complete live-draft action flow from player detail
   ========================================================= */

.detailDraftedButton {
  min-width: 118px;
  height: 42px;
  border: 1px solid rgba(52, 211, 153, 0.55);
  border-radius: 12px;
  padding: 0 14px;
  background: rgba(52, 211, 153, 0.14);
  color: #bbf7d0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.detailDraftedButton:hover {
  border-color: rgba(52, 211, 153, 0.85);
  background: rgba(52, 211, 153, 0.22);
  transform: translateY(-1px);
}

.detailDraftedButton.disabled,
.detailDraftedButton:disabled {
  cursor: not-allowed;
  border-color: rgba(148, 163, 184, 0.25);
  background: rgba(148, 163, 184, 0.08);
  color: #94a3b8;
  transform: none;
}

.decisionSnapshotCard .snapshotRanks {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================================================
   Recently Drafted + Undo
   Purpose: recover from accidental draft tracking clicks
   ========================================================= */

.recentDraftedPanel {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(147, 197, 253, 0.22);
  border-radius: 12px;
  padding: 10px;
  background: rgba(11, 20, 36, 0.72);
}

.recentDraftedHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.recentDraftedHeader strong {
  display: block;
  color: #f8fbff;
  font-size: 12px;
}

.recentDraftedHeader span {
  display: block;
  margin-top: 2px;
  color: #8fa2bb;
  font-size: 10.5px;
}

.undoLastDraftedButton,
.recentDraftedItem button {
  border: 1px solid rgba(147, 197, 253, 0.34);
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.1);
  color: #dbeafe;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
}

.undoLastDraftedButton {
  height: 28px;
  padding: 0 10px;
}

.recentDraftedList {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 7px;
}

.recentDraftedItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  padding: 8px 9px;
  background: rgba(15, 27, 45, 0.88);
}

.recentDraftedItem strong {
  display: block;
  color: #f8fbff;
  font-size: 11.5px;
  line-height: 1.15;
}

.recentDraftedItem span {
  display: block;
  margin-top: 2px;
  color: #9aa9bd;
  font-size: 10px;
}

.recentDraftedItem button {
  height: 26px;
  padding: 0 9px;
}

.recentDraftedItem button:hover,
.undoLastDraftedButton:hover {
  border-color: rgba(147, 197, 253, 0.72);
  background: rgba(96, 165, 250, 0.18);
}

.emptyRecentDrafted {
  opacity: 0.76;
}

/* In Draft Night Mode, keep it compact */
.draftNightMode .recentDraftedPanel {
  padding: 8px;
}

.draftNightMode .recentDraftedList {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

@media (max-width: 1200px) {
  .recentDraftedList,
  .draftNightMode .recentDraftedList {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 700px) {
  .recentDraftedHeader {
    align-items: flex-start;
  }

  .recentDraftedList,
  .draftNightMode .recentDraftedList {
    grid-template-columns: 1fr;
  }
}

/* Compact Recently Drafted in Draft Night Mode */
.draftNightMode .recentDraftedPanel {
  gap: 6px;
  padding: 7px 8px;
}

.draftNightMode .recentDraftedHeader {
  min-height: 24px;
}

.draftNightMode .recentDraftedHeader strong {
  font-size: 11px;
}

.draftNightMode .recentDraftedHeader span {
  display: none;
}

.draftNightMode .recentDraftedList {
  gap: 6px;
}

.draftNightMode .recentDraftedItem {
  min-height: 34px;
  padding: 6px 8px;
}

.draftNightMode .recentDraftedItem strong {
  font-size: 10.75px;
}

.draftNightMode .recentDraftedItem span {
  font-size: 9.5px;
}

.draftNightMode .recentDraftedItem button {
  height: 23px;
  padding: 0 8px;
  font-size: 9.5px;
}

.draftNightMode .undoLastDraftedButton {
  height: 24px;
  padding: 0 9px;
  font-size: 9.5px;
}

/* =========================================================
   Roster Construction Tracker
   Purpose: show live roster build from marked drafted players
   ========================================================= */

.rosterConstructionPanel {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 12px;
  padding: 10px;
  background: rgba(11, 20, 36, 0.72);
}

.rosterConstructionHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.rosterConstructionHeader strong {
  display: block;
  color: #f8fbff;
  font-size: 12px;
}

.rosterConstructionHeader span {
  display: block;
  margin-top: 2px;
  color: #8fa2bb;
  font-size: 10.5px;
}

.rosterConstructionTotals {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rosterConstructionTotals span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid rgba(147, 197, 253, 0.24);
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(96, 165, 250, 0.08);
  color: #dbeafe;
  font-size: 10px;
  font-weight: 900;
}

.rosterSlotGrid {
  display: grid;
  grid-template-columns: repeat(8, minmax(90px, 1fr));
  gap: 7px;
}

.rosterSlot {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  padding: 8px 9px;
  background: rgba(15, 27, 45, 0.88);
}

.rosterSlot > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.rosterSlot span {
  color: #8fa2bb;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rosterSlot strong {
  color: #f8fbff;
  font-size: 12px;
}

.rosterSlotBar {
  overflow: hidden;
  height: 5px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}

.rosterSlotBar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.78);
}

.rosterSlot.complete {
  border-color: rgba(52, 211, 153, 0.38);
  background: rgba(52, 211, 153, 0.09);
}

.rosterSlot.complete .rosterSlotBar i {
  background: rgba(52, 211, 153, 0.86);
}

.rosterSlot.partial {
  border-color: rgba(96, 165, 250, 0.28);
}

.rosterSlot.empty {
  opacity: 0.82;
}

/* Draft Night Mode: keep roster tracker compact */
.draftNightMode .rosterConstructionPanel {
  padding: 8px;
  gap: 6px;
}

.draftNightMode .rosterConstructionHeader strong {
  font-size: 11px;
}

.draftNightMode .rosterConstructionHeader > div:first-child span {
  display: none;
}

.draftNightMode .rosterSlotGrid {
  grid-template-columns: repeat(8, minmax(76px, 1fr));
  gap: 6px;
}

.draftNightMode .rosterSlot {
  padding: 6px 7px;
}

.draftNightMode .rosterSlot span {
  font-size: 9px;
}

.draftNightMode .rosterSlot strong {
  font-size: 11px;
}

@media (max-width: 1200px) {
  .rosterSlotGrid,
  .draftNightMode .rosterSlotGrid {
    grid-template-columns: repeat(4, minmax(90px, 1fr));
  }
}

@media (max-width: 700px) {
  .rosterConstructionHeader {
    align-items: flex-start;
  }

  .rosterSlotGrid,
  .draftNightMode .rosterSlotGrid {
    grid-template-columns: repeat(2, minmax(90px, 1fr));
  }
}

/* Mine / Other draft action buttons */
.draftActionCell {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.draftedButton.minePick,
.detailDraftedButton.minePick {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(52, 211, 153, 0.14);
  color: #bbf7d0;
}

.draftedButton.otherPick,
.detailDraftedButton.otherPick {
  border-color: rgba(147, 197, 253, 0.36);
  background: rgba(96, 165, 250, 0.1);
  color: #dbeafe;
}

.detailDraftActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.detailDraftActions .detailDraftedButton {
  min-width: 124px;
}

/* Fix Player Detail draft action contrast after Mine / Other updates */
.draftActionSummary {
  border-color: rgba(96, 165, 250, 0.3) !important;
  background: rgba(96, 165, 250, 0.1) !important;
  color: #f8fbff !important;
}

.draftActionSummary span {
  color: #93a7c0 !important;
}

.draftActionSummary strong {
  color: #f8fbff !important;
}

.detailDraftActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.detailDraftActions .detailDraftedButton {
  min-width: 124px;
}

.detailDraftedButton.minePick {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(52, 211, 153, 0.14);
  color: #bbf7d0;
}

.detailDraftedButton.otherPick {
  border-color: rgba(147, 197, 253, 0.36);
  background: rgba(96, 165, 250, 0.1);
  color: #dbeafe;
}

/* =========================================================
   Roster Need / Position Pressure
   Purpose: visually connect board choices to current roster needs
   ========================================================= */

.rosterNeedPanel {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 12px;
  padding: 10px;
  background: rgba(11, 20, 36, 0.72);
}

.rosterNeedHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.rosterNeedHeader strong {
  display: block;
  color: #f8fbff;
  font-size: 12px;
}

.rosterNeedHeader span {
  display: block;
  margin-top: 2px;
  color: #8fa2bb;
  font-size: 10.5px;
}

.rosterNeedGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(90px, 1fr));
  gap: 7px;
}

.rosterNeedCard {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  padding: 8px 9px;
  background: rgba(15, 27, 45, 0.88);
}

.rosterNeedCard span {
  display: block;
  color: #8fa2bb;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rosterNeedCard strong {
  display: block;
  margin-top: 3px;
  color: #f8fbff;
  font-size: 15px;
}

.rosterNeedCard.need {
  border-color: rgba(52, 211, 153, 0.38);
  background: rgba(52, 211, 153, 0.1);
}

.rosterNeedCard.fit {
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(96, 165, 250, 0.1);
}

.rosterNeedCard.depth {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}

.rosterNeedCard.filled {
  opacity: 0.72;
}

.pressureBadge {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(148, 163, 184, 0.08);
  color: #cbd5e1;
  font-size: 9.5px;
  font-weight: 900;
  white-space: nowrap;
}

.pressureBadge.need {
  border-color: rgba(52, 211, 153, 0.42);
  background: rgba(52, 211, 153, 0.14);
  color: #bbf7d0;
}

.pressureBadge.fit {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(96, 165, 250, 0.13);
  color: #dbeafe;
}

.pressureBadge.depth {
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(251, 191, 36, 0.1);
  color: #fde68a;
}

.pressureBadge.filled {
  opacity: 0.62;
}

.boardPanel tbody tr.positionPressureNeed td:first-child {
  box-shadow: inset 3px 0 0 rgba(52, 211, 153, 0.7);
}

.boardPanel tbody tr.positionPressureFit td:first-child {
  box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.65);
}

.boardPanel tbody tr.positionPressureDepth td:first-child {
  box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.55);
}

/* Draft Night Mode: keep the need panel compact */
.draftNightMode .rosterNeedPanel {
  padding: 8px;
  gap: 6px;
}

.draftNightMode .rosterNeedHeader strong {
  font-size: 11px;
}

.draftNightMode .rosterNeedHeader span {
  font-size: 10px;
}

.draftNightMode .rosterNeedGrid {
  grid-template-columns: repeat(6, minmax(74px, 1fr));
  gap: 6px;
}

.draftNightMode .rosterNeedCard {
  padding: 6px 7px;
}

.draftNightMode .rosterNeedCard span {
  font-size: 8.75px;
}

.draftNightMode .rosterNeedCard strong {
  font-size: 12px;
}

@media (max-width: 1200px) {
  .rosterNeedGrid,
  .draftNightMode .rosterNeedGrid {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
  }
}

@media (max-width: 700px) {
  .rosterNeedGrid,
  .draftNightMode .rosterNeedGrid {
    grid-template-columns: repeat(2, minmax(90px, 1fr));
  }
}

/* =========================================================
   Draft Decision Intelligence
   Purpose: turn board ranks into compact draft-room actions
   ========================================================= */

.onClockPanel,
.tierCliffPanel {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 12px;
  padding: 10px;
  background: rgba(11, 20, 36, 0.74);
}

.onClockHeader,
.tierCliffHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.onClockHeader strong,
.tierCliffHeader strong {
  display: block;
  color: #f8fbff;
  font-size: 12px;
}

.onClockHeader span,
.tierCliffHeader span {
  display: block;
  margin-top: 2px;
  color: #8fa2bb;
  font-size: 10.5px;
}

.onClockGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 8px;
}

.onClockCard {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  padding: 9px;
  background: rgba(15, 27, 45, 0.9);
}

.onClockCard.good { border-color: rgba(52, 211, 153, 0.36); }
.onClockCard.warn { border-color: rgba(251, 191, 36, 0.34); }
.onClockCard.bad { border-color: rgba(248, 113, 113, 0.34); }

.onClockCard > span {
  color: #8fa2bb;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.onClockCard button {
  border: 0;
  padding: 0;
  background: transparent;
  color: #f8fbff;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 900;
}

.onClockCard button:hover {
  color: #bfdbfe;
}

.onClockCard em,
.onClockCard small {
  color: #94a3b8;
  font-size: 10.5px;
  font-style: normal;
}

.onClockCard p {
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.35;
}

.onClockMetrics,
.onClockBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.onClockMetrics strong {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  padding: 3px 6px;
  background: rgba(148, 163, 184, 0.08);
  color: #e5e7eb;
  font-size: 9.5px;
}

.decisionBadge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 20px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(148, 163, 184, 0.08);
  color: #dbeafe;
  font-size: 9.5px;
  font-weight: 900;
  white-space: normal;
}

.decisionBadge.compact {
  min-height: 18px;
  padding: 2px 6px;
  font-size: 9px;
}

.decisionBadge.good,
.decisionMiniCell.good {
  border-color: rgba(52, 211, 153, 0.38);
  background: rgba(52, 211, 153, 0.11);
  color: #bbf7d0;
}

.decisionBadge.warn,
.decisionMiniCell.warn {
  border-color: rgba(251, 191, 36, 0.36);
  background: rgba(251, 191, 36, 0.1);
  color: #fde68a;
}

.decisionBadge.bad,
.decisionMiniCell.bad {
  border-color: rgba(248, 113, 113, 0.36);
  background: rgba(248, 113, 113, 0.1);
  color: #fecaca;
}

.decisionReason {
  max-width: 150px;
  margin-top: 4px;
  color: #8fa2bb;
  font-size: 10px;
  line-height: 1.25;
}

.decisionMiniCell {
  display: grid;
  gap: 2px;
  min-width: 118px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  padding: 6px 7px;
  background: rgba(148, 163, 184, 0.07);
}

.decisionMiniCell strong {
  color: inherit;
  font-size: 10.5px;
  font-weight: 900;
}

.decisionMiniCell span {
  color: #8fa2bb;
  font-size: 9.5px;
  line-height: 1.2;
}

.mutedCell {
  color: #64748b;
  font-size: 11px;
}

.tierCliffTable {
  display: grid;
  gap: 4px;
}

.tierCliffRow {
  display: grid;
  grid-template-columns: 76px 1.1fr 90px 96px 1.8fr;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  padding: 7px 8px;
  background: rgba(15, 27, 45, 0.82);
  color: #cbd5e1;
  font-size: 11px;
}

.tierCliffRow.header {
  border: 0;
  background: transparent;
  color: #8fa2bb;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tierCliffRow.high {
  border-color: rgba(248, 113, 113, 0.3);
}

.tierCliffRow.medium {
  border-color: rgba(251, 191, 36, 0.28);
}

.tierCliffRow.low {
  border-color: rgba(52, 211, 153, 0.24);
}

.tierStatusCell {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.tierPlayerList {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tierPlayerList button {
  max-width: 132px;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(96, 165, 250, 0.08);
  color: #dbeafe;
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tierPlayerList button:hover,
.tierPlayerList button:focus-visible {
  border-color: rgba(147, 197, 253, 0.55);
  background: rgba(96, 165, 250, 0.16);
}

@media (max-width: 1200px) {
  .onClockGrid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .tierCliffRow {
    grid-template-columns: 60px 1fr 78px 86px;
  }

  .tierCliffRow span:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .onClockGrid,
  .tierCliffRow {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Draft Board Risk / Return Scatter
   Purpose: show next available player pools without changing board logic
   ========================================================= */

.draftRiskReturnPanel {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 12px;
  padding: 10px;
  background: rgba(11, 20, 36, 0.72);
}

.draftRiskReturnHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.draftRiskReturnHeader strong {
  display: block;
  color: #f8fbff;
  font-size: 12px;
}

.draftRiskReturnHeader span {
  display: block;
  margin-top: 2px;
  color: #8fa2bb;
  font-size: 10.5px;
}

.draftRiskReturnGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 10px;
}

.draftRiskScatterCard {
  min-height: 0;
  overflow: visible;
}

.draftRiskScatterCard .chartHeader {
  align-items: flex-start;
  gap: 10px;
}

.draftScatterFilter {
  display: inline-grid;
  gap: 4px;
  min-width: min(190px, 100%);
  color: var(--color-text-muted);
  font-size: var(--font-size-kpi-label);
  font-weight: var(--font-weight-label);
}

.draftScatterUndoButton {
  min-height: 30px;
  border: 1px solid rgba(251, 191, 36, 0.42);
  border-radius: 7px;
  padding: 4px 10px;
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
  cursor: pointer;
  font-size: var(--font-size-chart-legend);
  font-weight: var(--font-weight-label);
  line-height: var(--line-height-compact);
}

.draftScatterUndoButton:hover,
.draftScatterUndoButton:focus-visible {
  border-color: rgba(251, 191, 36, 0.72);
  background: rgba(251, 191, 36, 0.2);
  color: #ffffff;
}

.draftScatterFilter span {
  font-size: var(--font-size-kpi-label);
  line-height: var(--line-height-compact);
}

.draftScatterFilter select {
  min-height: 30px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 7px;
  padding: 4px 28px 4px 9px;
  background: rgba(8, 17, 31, 0.82);
  color: var(--color-text);
  font-size: var(--font-size-chart-legend);
  font-weight: var(--font-weight-label);
}

.draftRiskScatterSizeLegend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 14px;
  padding: 0 4px;
  color: #8fa2bb;
  font-size: var(--font-size-chart-legend);
  font-weight: var(--font-weight-label);
}

.draftRiskScatterSizeSwatch {
  display: inline-block;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.55);
  border: 1px solid rgba(203, 213, 225, 0.6);
  vertical-align: middle;
  margin-right: 2px;
}

.draftRiskScatterSizeSwatch.small {
  width: 7px;
  height: 7px;
}

.draftRiskScatterSizeSwatch.big {
  width: 15px;
  height: 15px;
}

.draftRiskScatterWrap {
  min-height: 240px;
}

.draftRiskScatterSvg {
  min-height: 210px;
}

.draftRiskReturnChartContainer {
  min-height: 260px;
  width: 100%;
}

.draftRiskReturnChartContainer .highcharts-container {
  overflow: visible !important;
}

.draftRiskScatterPoint.draftPlayer circle:not(.draftRiskHitArea) {
  fill: var(--draft-point-color, var(--chart-purple));
  stroke: color-mix(in srgb, var(--draft-point-color, var(--chart-purple)) 42%, #ffffff);
}

.draftRiskScatterPoint[data-open-player] {
  cursor: pointer;
}

.draftRiskHitArea {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}

.draftRiskScatterPoint.average circle {
  fill: rgba(148, 163, 184, 0.4);
  stroke: rgba(203, 213, 225, 0.82);
  stroke-dasharray: 3 2;
}

.draftRiskScatterPoint.average .draftRiskHitArea,
.draftRiskScatterPoint.draftPlayer .draftRiskHitArea {
  fill: transparent;
  stroke: transparent;
  stroke-dasharray: none;
}

.draftRiskScatterPoint text {
  font-size: 10px;
}

.draftScatterLegend {
  padding-inline: 2px;
}

.draftScatterPlayerList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 0 4px;
}

.draftScatterPlayerList button {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 24px;
  border: 1px solid color-mix(in srgb, var(--draft-point-color, var(--chart-purple)) 48%, transparent);
  border-radius: 999px;
  padding: 4px 8px 4px 6px;
  background: color-mix(in srgb, var(--draft-point-color, var(--chart-purple)) 11%, transparent);
  color: #dbeafe;
  cursor: pointer;
  font-size: var(--font-size-chart-legend);
  font-weight: var(--font-weight-label);
  line-height: var(--line-height-compact);
}

.draftScatterPlayerList button:hover,
.draftScatterPlayerList button:focus-visible {
  border-color: var(--draft-point-color, var(--chart-purple));
  background: color-mix(in srgb, var(--draft-point-color, var(--chart-purple)) 22%, transparent);
  color: #ffffff;
}

.draftScatterPlayerList i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--draft-point-color, var(--chart-purple));
}

.draftScatterPlayerList span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.draftRiskScatterCard .chartTakeaway {
  font-size: var(--font-size-caption);
}

.draftNightMode .draftRiskReturnPanel {
  padding: 8px;
}

.draftNightMode .draftRiskReturnGrid {
  gap: 8px;
}

@media (max-width: 1180px) {
  .draftRiskReturnGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .draftRiskReturnHeader,
  .draftRiskScatterCard .chartHeader {
    display: grid;
  }

  .draftScatterFilter {
    min-width: 0;
    width: 100%;
  }

  .draftRiskScatterWrap {
    min-height: 220px;
  }
}

/* Assistant roster-aware recommendation card */
.assistantAnalysisGrid article.warnPanel {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}

/* Emphasize Assistant Roster Fit card */
.assistantAnalysisGrid article span {
  letter-spacing: 0.06em;
}

.assistantAnalysisGrid article strong {
  display: block;
  margin: 4px 0 6px;
  color: #f8fbff;
  font-size: 15px;
}

/* =========================================================
   Assistant Decision Summary
   Purpose: final plain-English read for the recommended pick
   ========================================================= */

.assistantDecisionSummary {
  margin-top: 12px;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 12px;
  padding: 13px 15px;
  background: rgba(96, 165, 250, 0.09);
}

.assistantDecisionSummary span {
  display: block;
  color: #93a7c0;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.assistantDecisionSummary strong {
  display: block;
  margin-top: 5px;
  color: #f8fbff;
  font-size: 14px;
  line-height: 1.45;
}

.assistantTransparency {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
  padding: 13px 15px;
  background: rgba(15, 23, 42, 0.72);
}

.assistantTransparency > span {
  color: #93a7c0;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.assistantTransparency p {
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.45;
}

.assistantTransparency > strong {
  color: #f8fbff;
  font-size: 13px;
  line-height: 1.45;
}

.assistantDecisionLanes {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.assistantDecisionLanes article,
.assistantWhyNotNext,
.detailDecisionNarrative article,
.detailComparableGrid button {
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(15, 35, 62, 0.94), rgba(10, 23, 41, 0.92));
  box-shadow: inset 0 1px 0 rgba(148, 197, 255, 0.06);
}

.assistantDecisionLanes article {
  display: grid;
  gap: 7px;
  padding: 11px;
}

.assistantDecisionLanes article.active {
  border-color: rgba(96, 165, 250, 0.48);
  background: linear-gradient(180deg, rgba(23, 54, 94, 0.98), rgba(12, 32, 57, 0.96));
}

.assistantDecisionLanes span,
.assistantWhyNotNext h4,
.detailDecisionNarrative span,
.detailComparableGrid span {
  color: #93c5fd;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.assistantDecisionLanes button,
.detailComparableGrid button {
  padding: 0;
  border: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.assistantDecisionLanes button:disabled {
  cursor: default;
  opacity: 0.65;
}

.assistantDecisionLanes strong,
.detailComparableGrid strong {
  display: block;
  color: #f8fbff;
  font-size: 14px;
  line-height: 1.2;
}

.assistantDecisionLanes em,
.detailComparableGrid em,
.detailComparableGrid small {
  display: block;
  color: #b6c7dc;
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.assistantDecisionLanes p {
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.42;
}

.assistantWhyNotNext {
  grid-column: 1 / -1;
  padding: 12px;
}

.assistantMiniCompare,
.detailNarrativeGrid,
.detailComparableGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.assistantMiniCompare {
  margin-top: 10px;
}

.assistantMiniCompare div {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: 10px;
  background: rgba(2, 12, 27, 0.42);
}

.assistantMiniCompare span,
.assistantMiniCompare em {
  display: block;
  color: #a9bbd1;
  font-size: 11px;
  font-style: normal;
}

.assistantMiniCompare strong {
  display: block;
  margin: 3px 0;
  color: #f8fbff;
}

.assistantDebugDetails {
  margin-top: 3px;
}

.assistantDebugDetails table th,
.assistantDebugDetails table td {
  white-space: normal;
}

/* =========================================================
   Market Command Center
   Purpose: make market tab actionable and easier to scan
   ========================================================= */

.marketCommandHero {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.marketCommandCard,
.marketBucket,
.marketGapPanel {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  padding: 12px;
  background: rgba(15, 27, 45, 0.88);
}

.marketCommandCard span,
.marketBucketHeader span,
.marketGapHeader span {
  display: block;
  color: #8fa2bb;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.marketCommandCard strong {
  display: block;
  margin-top: 6px;
  color: #f8fbff;
  font-size: 16px;
}

.marketCommandCard p {
  margin-top: 5px;
  color: #c7d2e3;
  font-size: 11px;
  line-height: 1.35;
}

.marketCommandCard.good {
  border-color: rgba(52, 211, 153, 0.32);
  background: rgba(52, 211, 153, 0.09);
}

.marketCommandCard.bad {
  border-color: rgba(251, 113, 133, 0.32);
  background: rgba(251, 113, 133, 0.08);
}

.marketCommandCard.warn {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.08);
}

.marketChartGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
  gap: 12px;
  margin-bottom: 12px;
}

.marketGapHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.marketGapHeader strong {
  color: #f8fbff;
  font-size: 13px;
}

.marketGapList {
  display: grid;
  gap: 8px;
  max-height: 620px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.marketGapList article {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 54px;
  gap: 10px;
  align-items: center;
}

.marketGapList article strong {
  color: #f8fbff;
  font-size: 11px;
}

.marketGapList article span {
  display: block;
  color: #8fa2bb;
  font-size: 10px;
}

.marketGapList article b {
  color: #f8fbff;
  text-align: right;
  font-size: 11px;
}

.marketGapBar {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}

.marketGapBar i {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.marketGapBar.good i {
  background: rgba(52, 211, 153, 0.86);
}

.marketGapBar.bad i {
  background: rgba(251, 113, 133, 0.82);
}

.marketActionBuckets {
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.marketBucketHeader {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.marketBucketHeader strong {
  color: #f8fbff;
  font-size: 15px;
}

.marketBucket.good {
  border-color: rgba(52, 211, 153, 0.28);
}

.marketBucket.bad {
  border-color: rgba(251, 113, 133, 0.28);
}

.marketBucket.warn {
  border-color: rgba(251, 191, 36, 0.28);
}

.marketBucketList {
  display: grid;
  gap: 6px;
}

.marketBucketList button {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 9px;
  padding: 8px;
  background: rgba(11, 20, 36, 0.7);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.marketBucketList button:hover {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(96, 165, 250, 0.1);
}

.marketBucketList strong {
  display: block;
  color: #f8fbff;
  font-size: 11px;
}

.marketBucketList span,
.marketBucketList p {
  display: block;
  margin-top: 2px;
  color: #8fa2bb;
  font-size: 10px;
}

.marketAgreementBadge,
.marketActionBadge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.marketAgreementBadge.good,
.marketActionBadge.good {
  border: 1px solid rgba(52, 211, 153, 0.38);
  background: rgba(52, 211, 153, 0.12);
  color: #bbf7d0;
}

.marketAgreementBadge.bad,
.marketActionBadge.bad {
  border: 1px solid rgba(251, 113, 133, 0.38);
  background: rgba(251, 113, 133, 0.12);
  color: #fecdd3;
}

.marketAgreementBadge.warn,
.marketActionBadge.warn {
  border: 1px solid rgba(251, 191, 36, 0.34);
  background: rgba(251, 191, 36, 0.1);
  color: #fde68a;
}

.marketAgreementBadge.neutral,
.marketActionBadge.neutral {
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(148, 163, 184, 0.08);
  color: #cbd5e1;
}

.goodText {
  color: #86efac;
  font-weight: 900;
}

.badText {
  color: #fda4af;
  font-weight: 900;
}

#marketView tbody tr {
  cursor: pointer;
}

#marketView tbody tr:hover td {
  background: rgba(96, 165, 250, 0.1);
}

@media (max-width: 1300px) {
  .marketCommandHero,
  .marketActionBuckets {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .marketChartGrid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Market Intelligence Dashboard
   Purpose: premium finance-style Market tab
   Safe: Market tab only
   ========================================================= */

#marketView .marketShell {
  display: grid;
  gap: 14px;
}

.marketHeroHeader {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.18), transparent 28rem),
    linear-gradient(135deg, rgba(15, 27, 45, 0.96), rgba(8, 17, 31, 0.98));
  box-shadow: var(--shadow-soft);
}

.marketHeroHeader span,
.marketControls label,
.marketSectionHeader span {
  display: block;
  color: #8fa2bb;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.marketHeroHeader h2 {
  margin-top: 5px;
  color: #f8fbff;
  font-size: 26px;
  letter-spacing: -0.03em;
}

.marketHeroHeader p {
  margin-top: 7px;
  max-width: 780px;
  color: #c6d3e3;
  font-size: 13px;
  line-height: 1.5;
}

.marketHeroBadge {
  min-width: 180px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 14px;
  padding: 13px 15px;
  background: rgba(96, 165, 250, 0.10);
  text-align: right;
}

.marketHeroBadge strong {
  display: block;
  margin-top: 4px;
  color: #dbeafe;
  font-size: 15px;
}

.marketControls {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(160px, 0.75fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(15, 27, 45, 0.78);
  box-shadow: var(--shadow-soft);
}

.marketControls label {
  display: grid;
  gap: 6px;
}

.marketControls input,
.marketControls select {
  height: 35px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  padding: 7px 10px;
  background: rgba(8, 17, 31, 0.92);
  color: #eef4ff;
  box-shadow: none;
}

.marketControls .resetButton {
  height: 35px;
  border-radius: 10px;
  background: rgba(96, 165, 250, 0.10);
  color: #dbeafe;
}

.marketQuantSummary {
  display: grid;
  gap: 14px;
}

.marketCommandHero {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 10px;
  margin: 0;
}

.marketStatCard {
  min-height: 112px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  padding: 13px;
  background: rgba(15, 27, 45, 0.88);
  box-shadow: var(--shadow-soft);
}

.marketStatCard span {
  display: block;
  color: #8fa2bb;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.marketStatCard strong {
  display: block;
  margin-top: 8px;
  color: #f8fbff;
  font-size: 24px;
  line-height: 1;
}

.marketStatCard p {
  margin-top: 8px;
  color: #c6d3e3;
  font-size: 11px;
  line-height: 1.35;
}

.marketStatCard.good {
  border-color: rgba(52, 211, 153, 0.34);
  background: rgba(52, 211, 153, 0.09);
}

.marketStatCard.bad {
  border-color: rgba(251, 113, 133, 0.34);
  background: rgba(251, 113, 133, 0.08);
}

.marketStatCard.warn {
  border-color: rgba(251, 191, 36, 0.34);
  background: rgba(251, 191, 36, 0.08);
}

.marketChartGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(500px, 0.95fr);
  gap: 14px;
  align-items: start;
}

.marketDistributionPanel,
.marketGapPanel,
.marketHeatmapPanel,
.marketTablePanel,
.marketBucket {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(15, 27, 45, 0.88);
  box-shadow: var(--shadow-soft);
}

.marketDistributionPanel,
.marketGapPanel,
.marketHeatmapPanel {
  padding: 14px;
}

.marketSectionHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.marketSectionHeader strong,
.marketGapHeader strong {
  display: block;
  margin-top: 3px;
  color: #f8fbff;
  font-size: 14px;
}

.marketSectionHeader em {
  color: #8fa2bb;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.marketDistBars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
  align-items: end;
  min-height: 180px;
  padding: 12px 4px 4px;
  border-radius: 12px;
  background:
    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    rgba(8, 17, 31, 0.42);
  background-size: 100% 34px;
}

.marketDistBars article {
  display: grid;
  grid-template-rows: 44px 1fr;
  gap: 8px;
  height: 170px;
  min-width: 0;
}

.marketDistBars article div {
  text-align: center;
}

.marketDistBars strong {
  display: block;
  color: #f8fbff;
  font-size: 18px;
}

.marketDistBars span {
  display: block;
  margin-top: 2px;
  color: #8fa2bb;
  font-size: 10px;
  font-weight: 850;
}

.marketDistBars i {
  align-self: end;
  display: block;
  width: 100%;
  min-height: 6px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  opacity: 0.84;
}

.marketTakeaway {
  margin-top: 11px;
  color: #9fb0c5;
  font-size: 11px;
  line-height: 1.45;
}

.marketGapHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.marketGapHeader span {
  color: #8fa2bb;
  font-size: 11px;
  font-weight: 750;
}

.marketGapList {
  display: grid;
  gap: 8px;
  max-height: 620px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.marketGapList button {
  display: grid;
  grid-template-columns: 220px minmax(120px, 1fr) 58px;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  padding: 10px;
  background: rgba(8, 17, 31, 0.52);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.marketGapList button > div:first-child {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 30px;
}

.marketGapList button:hover,
.marketPlayerButton:hover {
  border-color: rgba(96, 165, 250, 0.52);
  background: rgba(96, 165, 250, 0.10);
}

.marketGapList strong,
.marketPlayerButton strong {
  display: block;
  color: #f8fbff;
  font-size: 12px;
  line-height: 1.1;
}

.marketGapList span,
.marketPlayerButton span {
  display: block;
  margin-top: 0;
  color: #8fa2bb;
  font-size: 10.5px;
  line-height: 1.15;
}

.marketGapList .marketGapMeta {
  transform: translateY(-1px);
}

.marketGapList b {
  color: #f8fbff;
  font-size: 12px;
  text-align: right;
}

.marketGapBar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
}

.marketGapBar i {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
}

.marketGapBar.good i {
  background: #34d399;
}

.marketGapBar.bad i {
  background: #fb7185;
}

.marketHeatmapGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.marketHeatmapCard {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 13px;
  background: rgba(8, 17, 31, 0.48);
}

.marketHeatmapCard span {
  display: block;
  color: #8fa2bb;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.marketHeatmapCard strong {
  display: block;
  margin-top: 5px;
  color: #f8fbff;
  font-size: 20px;
}

.marketHeatmapCard em {
  display: block;
  margin-top: 3px;
  color: #c6d3e3;
  font-size: 11px;
  font-style: normal;
}

.marketHeatStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.marketHeatStats p {
  padding: 8px;
  border-radius: 9px;
  background: rgba(15, 27, 45, 0.74);
}

.marketHeatStats b {
  display: block;
  color: #f8fbff;
  font-size: 15px;
}

.marketHeatStats span {
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.marketHeatBar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
}

.marketHeatBar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #60a5fa;
}

.marketBucketGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  gap: 10px;
  align-items: start;
}

.marketBucket {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 220px;
  padding: 13px;
}

.marketBucket.good {
  border-color: rgba(52, 211, 153, 0.28);
}

.marketBucket.bad {
  border-color: rgba(251, 113, 133, 0.28);
}

.marketBucket.warn {
  border-color: rgba(251, 191, 36, 0.28);
}

.marketBucketHeader {
  display: grid;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.marketBucketHeader div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: end;
}

.marketBucketHeader span {
  color: #8fa2bb;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.marketBucketHeader strong {
  color: #f8fbff;
  font-size: 24px;
}

.marketBucketHeader p,
.marketEmpty {
  color: #9fb0c5;
  font-size: 11px;
  line-height: 1.4;
}

.marketBucketList {
  display: grid;
  gap: 7px;
}

.marketPlayerButton {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  padding: 9px;
  background: rgba(8, 17, 31, 0.48);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.marketPlayerButton em {
  color: #dbeafe;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.marketTablePanel {
  overflow: hidden;
}

.marketTablePanel .marketSectionHeader {
  margin-bottom: 0;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.marketTableWrap {
  max-height: 460px;
}

#marketView table {
  min-width: 1040px;
}

#marketView th {
  background: rgba(8, 17, 31, 0.96);
  color: #93a7c0;
  box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.18);
}

#marketView td {
  background: rgba(15, 27, 45, 0.78);
  color: #dce8f7;
}

#marketView tbody tr:nth-child(even) td {
  background: rgba(13, 24, 40, 0.88);
}

#marketView tbody tr:hover td {
  background: rgba(96, 165, 250, 0.10);
}

.marketTablePlayer {
  border: 0;
  padding: 0;
  background: transparent;
  color: #f8fbff;
  cursor: pointer;
  font: inherit;
}

.marketTablePlayer:hover strong {
  color: #93c5fd;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.marketGapText.good {
  color: #86efac;
  font-weight: 900;
}

.marketGapText.bad {
  color: #fda4af;
  font-weight: 900;
}

.marketGapText.neutral {
  color: #cbd5e1;
  font-weight: 800;
}

.marketActionBadge,
.marketAgreementBadge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.marketActionBadge.good,
.marketAgreementBadge.good {
  border: 1px solid rgba(52, 211, 153, 0.34);
  background: rgba(52, 211, 153, 0.12);
  color: #bbf7d0;
}

.marketActionBadge.bad,
.marketAgreementBadge.bad {
  border: 1px solid rgba(251, 113, 133, 0.34);
  background: rgba(251, 113, 133, 0.12);
  color: #fecdd3;
}

.marketActionBadge.warn,
.marketAgreementBadge.warn {
  border: 1px solid rgba(251, 191, 36, 0.34);
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
}

.marketActionBadge.neutral,
.marketAgreementBadge.neutral {
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(148, 163, 184, 0.10);
  color: #cbd5e1;
}

@media (max-width: 1350px) {
  .marketCommandHero {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
  }

  .marketBucketGrid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }

  .marketHeatmapGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .marketChartGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .marketHeroHeader,
  .marketControls {
    grid-template-columns: 1fr;
  }

  .marketHeroHeader {
    display: grid;
  }

  .marketHeroBadge {
    text-align: left;
  }

  .marketCommandHero,
  .marketBucketGrid,
  .marketHeatmapGrid {
    grid-template-columns: 1fr;
  }

  .marketGapList button {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Market Decision Pockets
   Replaces standard deviation bucket chart with draft insight
   ========================================================= */

.marketDecisionPanel {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  padding: 14px;
  background: rgba(15, 27, 45, 0.88);
  box-shadow: var(--shadow-soft);
}

.marketPocketGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: 9px;
  min-width: 0;
}

.marketPocketCard {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 340px;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  background: rgba(8, 17, 31, 0.48);
}

.marketPocketTop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.marketPocketTop span,
.marketPocketRead span,
.marketPocketBars span {
  display: block;
  color: #8fa2bb;
  font-size: 9.5px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.marketPocketTop strong {
  display: block;
  margin-top: 5px;
  color: #f8fbff;
  font-size: 20px;
}

.marketPocketTop p {
  margin-top: 5px;
  color: #9fb0c5;
  font-size: 10.5px;
  line-height: 1.35;
}

.marketPocketTop em {
  min-width: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.10);
  color: #dbeafe;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

.marketPocketRead {
  padding: 10px;
  border-radius: 11px;
  background: rgba(96, 165, 250, 0.08);
}

.marketPocketRead strong {
  display: block;
  margin-top: 4px;
  color: #f8fbff;
  font-size: 13px;
}

.marketPocketBars {
  display: grid;
  gap: 8px;
}

.marketPocketBars div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 24px;
  gap: 7px;
  align-items: center;
}

.marketPocketBars b {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
}

.marketPocketBars i {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: inherit;
}

.marketPocketBars i.good {
  background: #34d399;
}

.marketPocketBars i.bad {
  background: #fb7185;
}

.marketPocketBars i.warn {
  background: #fbbf24;
}

.marketPocketBars i.neutral {
  background: #60a5fa;
}

.marketPocketBars em {
  color: #dbeafe;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.marketPocketPlayers {
  display: grid;
  gap: 7px;
  margin-top: 2px;
}

.marketPocketPlayers button {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 9px;
  padding: 8px;
  background: rgba(15, 27, 45, 0.72);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.marketPocketPlayers button:hover {
  border-color: rgba(96, 165, 250, 0.48);
  background: rgba(96, 165, 250, 0.10);
}

.marketPocketPlayers strong {
  display: block;
  color: #f8fbff;
  font-size: 11px;
}

.marketPocketPlayers span,
.marketPocketPlayers p {
  display: block;
  margin-top: 3px;
  color: #9fb0c5;
  font-size: 10px;
  line-height: 1.35;
}

@media (max-width: 1500px) {
  .marketPocketGrid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
}

@media (max-width: 950px) {
  .marketPocketGrid {
    grid-template-columns: 1fr;
  }
}

.marketDecisionPanel {
  min-width: 0;
  overflow: hidden;
}

.marketPocketCard,
.marketPocketTop,
.marketPocketPlayers button {
  min-width: 0;
}

.marketPocketTop strong,
.marketPocketTop p,
.marketPocketPlayers strong,
.marketPocketPlayers span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.marketPocketPlayers button {
  max-width: 100%;
}

.marketGapSelect select {
  width: 210px;
  height: 30px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 9px;
  padding: 5px 9px;
  background: rgba(8, 17, 31, 0.92);
  color: #eef4ff;
  font-size: 11px;
  font-weight: 850;
}

.marketActiveFilter {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(96, 165, 250, 0.26);
  border-radius: 14px;
  background: rgba(96, 165, 250, 0.10);
}

.marketActiveFilter span {
  display: block;
  color: #8fa2bb;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.marketActiveFilter strong {
  display: block;
  margin-top: 3px;
  color: #f8fbff;
  font-size: 14px;
}

.marketActiveFilter button {
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(8, 17, 31, 0.72);
  color: #dbeafe;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.marketPocketCard {
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.marketPocketCard:hover {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(96, 165, 250, 0.08);
  transform: translateY(-1px);
}

/* =========================================================
   Market Active Zone Decision Brief
   ========================================================= */

.marketZoneInsightPanel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(15, 27, 45, 0.88);
  box-shadow: var(--shadow-soft);
}

.marketZoneInsightPanel.good {
  border-color: rgba(52, 211, 153, 0.28);
}

.marketZoneInsightPanel.bad {
  border-color: rgba(251, 113, 133, 0.28);
}

.marketZoneInsightPanel.warn {
  border-color: rgba(251, 191, 36, 0.28);
}

.marketZoneInsightHeader {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.marketZoneInsightHeader span,
.marketZoneInsightGrid span {
  display: block;
  color: #8fa2bb;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.marketZoneInsightHeader strong {
  display: block;
  margin-top: 5px;
  color: #f8fbff;
  font-size: 18px;
}

.marketZoneInsightHeader p {
  margin-top: 6px;
  max-width: 900px;
  color: #c6d3e3;
  font-size: 12px;
  line-height: 1.45;
}

.marketZoneInsightHeader em {
  min-width: 78px;
  padding: 8px 10px;
  border: 1px solid rgba(96, 165, 250, 0.26);
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.10);
  color: #dbeafe;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

.marketZoneInsightGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
}

.marketZoneInsightGrid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  background: rgba(8, 17, 31, 0.48);
}

.marketZoneInsightGrid article.good {
  border-color: rgba(52, 211, 153, 0.24);
}

.marketZoneInsightGrid article.bad {
  border-color: rgba(251, 113, 133, 0.24);
}

.marketZoneInsightGrid article.warn {
  border-color: rgba(251, 191, 36, 0.24);
}

.marketZoneInsightGrid button {
  display: grid;
  gap: 4px;
  width: 100%;
  margin-top: 8px;
  border: 0;
  border-radius: 10px;
  padding: 9px;
  background: rgba(15, 27, 45, 0.84);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.marketZoneInsightGrid button:hover {
  background: rgba(96, 165, 250, 0.12);
}

.marketZoneInsightGrid strong {
  color: #f8fbff;
  font-size: 12px;
}

.marketZoneInsightGrid em,
.marketZoneInsightGrid p {
  color: #9fb0c5;
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .marketZoneInsightGrid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 700px) {
  .marketZoneInsightGrid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Assistant: Next Pick Decision Board
   Replaces chart-heavy range context with decision cards
   ========================================================= */

.nextPickDecisionBoard {
  display: grid;
  gap: 14px;
}

.nextPickDecisionHeader {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.nextPickDecisionHeader span,
.nextPickDecisionCard span,
.nextPickRangeStats span {
  display: block;
  color: #8fa2bb;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.nextPickDecisionHeader strong {
  display: block;
  margin-top: 5px;
  color: #f8fbff;
  font-size: 17px;
}

.nextPickDecisionHeader p {
  margin-top: 6px;
  color: #c6d3e3;
  font-size: 12px;
  line-height: 1.45;
}

.nextPickDecisionHeader em {
  min-width: 74px;
  padding: 8px 10px;
  border: 1px solid rgba(96, 165, 250, 0.26);
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.10);
  color: #dbeafe;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

.nextPickDecisionGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
}

.nextPickDecisionCard {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  background: rgba(8, 17, 31, 0.48);
}

.nextPickDecisionCard.good {
  border-color: rgba(52, 211, 153, 0.26);
}

.nextPickDecisionCard.bad {
  border-color: rgba(251, 113, 133, 0.28);
}

.nextPickDecisionCard.warn {
  border-color: rgba(251, 191, 36, 0.28);
}

.nextPickDecisionCard.info {
  border-color: rgba(96, 165, 250, 0.26);
}

.nextPickDecisionCard > strong {
  display: block;
  margin-top: 8px;
  color: #f8fbff;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.nextPickDecisionCard button {
  display: grid;
  gap: 4px;
  width: 100%;
  margin-top: 8px;
  border: 0;
  border-radius: 10px;
  padding: 9px;
  background: rgba(15, 27, 45, 0.84);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.nextPickDecisionCard button:hover {
  background: rgba(96, 165, 250, 0.12);
}

.nextPickDecisionCard button strong {
  color: #f8fbff;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.nextPickDecisionCard em,
.nextPickDecisionCard p {
  color: #9fb0c5;
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.nextPickDecisionCard p {
  margin-top: 8px;
}

.nextPickRangeStats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.nextPickRangeStats article {
  padding: 11px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 11px;
  background: rgba(15, 27, 45, 0.68);
}

.nextPickRangeStats strong {
  display: block;
  margin-top: 5px;
  color: #f8fbff;
  font-size: 20px;
}

@media (max-width: 1100px) {
  .nextPickDecisionGrid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 700px) {
  .nextPickDecisionGrid,
  .nextPickRangeStats {
    grid-template-columns: 1fr;
  }
}

.nextPickDecisionCard.good span {
  color: #a7f3d0;
}

.nextPickDecisionCard.bad span {
  color: #fecdd3;
}

.nextPickDecisionCard.warn span {
  color: #fde68a;
}

.nextPickDecisionCard.info span {
  color: #bfdbfe;
}

.nextPickRangeStats article:first-child {
  border-color: rgba(52, 211, 153, 0.26);
  background: rgba(52, 211, 153, 0.08);
}

/* =========================================================
   Premium Dashboard Polish Pass
   Scope: design tokens, semantics-aware styling, accessibility
   Safe: visual and accessibility-only overrides
   ========================================================= */

/* 1. Design Tokens */

:root {
  color-scheme: dark;

  --bs-primary: #4f8cff;
  --bs-secondary: #94a3b8;
  --bs-success: #22c55e;
  --bs-warning: #f59e0b;
  --bs-danger: #ef4444;
  --bs-body-bg: #07111f;
  --bs-body-color: #eef4ff;
  --bs-border-color: rgba(148, 163, 184, 0.22);
  --bs-card-bg: #101a2b;
  --bs-muted: #9aa9bd;

  --color-bg: var(--bs-body-bg);
  --color-bg-soft: #0b1628;
  --color-surface: #101a2b;
  --color-surface-elevated: #17243a;
  --color-surface-subtle: #0b1424;
  --color-text: var(--bs-body-color);
  --color-text-strong: #f8fbff;
  --color-text-muted: var(--bs-muted);
  --color-text-subtle: #7f90a7;
  --color-border: var(--bs-border-color);
  --color-border-strong: rgba(191, 219, 254, 0.34);
  --color-accent: var(--bs-primary);
  --color-accent-strong: #93c5fd;
  --color-positive: var(--bs-success);
  --color-negative: var(--bs-danger);
  --color-warning: var(--bs-warning);

  --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.28);
  --shadow-card-soft: 0 10px 28px rgba(0, 0, 0, 0.20);
  --radius-card: 10px;
  --radius-control: 8px;
  --radius-pill: 999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  --font-sans: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-md: 0.9375rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --font-size-page-title: 1.375rem;
  --font-size-section-title: 1.125rem;
  --font-size-card-title: 0.9375rem;
  --font-size-chart-title: 0.8125rem;
  --font-size-chart-subtitle: 0.75rem;
  --font-size-chart-axis-title: 0.6875rem;
  --font-size-chart-axis-tick: 0.6875rem;
  --font-size-chart-legend: 0.6875rem;
  --font-size-kpi-label: 0.71875rem;
  --font-size-kpi-value: 1.55rem;
  --font-size-helper: 0.75rem;
  --font-size-caption: 0.75rem;
  --font-size-table-header: 0.6875rem;
  --font-size-table-body: 0.78125rem;
  --font-weight-title: 820;
  --font-weight-subtitle: 640;
  --font-weight-label: 760;
  --font-weight-body: 500;
  --letter-spacing-label: 0;
  --line-height-title: 1.25;
  --line-height-body: 1.5;
  --line-height-compact: 1.35;
  --line-tight: 1.15;
  --line-base: 1.5;
  --line-relaxed: 1.65;

  --page: var(--color-bg);
  --page-2: var(--color-bg-soft);
  --panel: var(--color-surface);
  --panel-soft: #142033;
  --panel-raised: var(--color-surface-elevated);
  --surface: #0f1b2d;
  --surface-2: #162338;
  --ink: var(--color-text);
  --ink-strong: var(--color-text-strong);
  --muted: var(--color-text-muted);
  --muted-2: var(--color-text-subtle);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --accent: var(--color-accent);
  --accent-2: var(--color-accent-strong);
  --accent-soft: rgba(79, 140, 255, 0.14);
  --good: #34d399;
  --good-soft: rgba(34, 197, 94, 0.14);
  --bad: #fb7185;
  --bad-soft: rgba(239, 68, 68, 0.14);
  --warn: #fbbf24;
  --warn-soft: rgba(245, 158, 11, 0.14);
  --blue-soft: rgba(79, 140, 255, 0.14);
  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-card);
  --radius-lg: 14px;
  --shadow: var(--shadow-card);
  --shadow-soft: var(--shadow-card-soft);
}

body.lightMode,
body[data-theme="light"] {
  color-scheme: light;
  --bs-body-bg: #f6f8fb;
  --bs-body-color: #172033;
  --bs-border-color: rgba(15, 23, 42, 0.14);
  --bs-card-bg: #ffffff;
  --bs-muted: #516174;
  --color-bg-soft: #eef3f8;
  --color-surface: #ffffff;
  --color-surface-elevated: #f8fafc;
  --color-surface-subtle: #eef3f8;
  --color-text-strong: #0f172a;
  --color-text-subtle: #64748b;
  --color-border-strong: rgba(37, 99, 235, 0.32);
}

/* 2. Base / Reset */

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  min-height: 34px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

/* 3. Typography */

h1,
h2,
h3,
h4 {
  color: var(--color-text-strong);
  letter-spacing: 0;
  line-height: var(--line-tight);
}

h1 {
  font-size: clamp(1.55rem, 1.3rem + 0.7vw, var(--font-size-2xl));
  font-weight: 860;
}

h2 {
  font-size: var(--font-size-lg);
  font-weight: 820;
}

h3 {
  font-size: var(--font-size-md);
  font-weight: 780;
}

p,
li {
  color: color-mix(in srgb, var(--color-text) 88%, var(--color-text-muted));
  line-height: var(--line-relaxed);
}

small,
em,
.settingHelp,
.subline,
.takeaway {
  color: var(--color-text-muted);
}

.panelHeader span,
.marketHeroHeader span,
.wrappedHero span,
.playersToolbar > div:first-child span,
.visualCardTitle span,
.chartTitle p,
.metric span,
.kpis span {
  font-size: var(--font-size-xs);
  font-weight: 760;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

/* 4. Layout */

.appShell {
  width: min(100%, 1920px);
  margin-inline: auto;
  padding: var(--space-lg) var(--space-xl) var(--space-2xl);
}

.layout {
  gap: var(--space-xl);
}

.view[hidden] {
  display: none !important;
}

.view.active {
  animation: viewFadeIn 180ms ease-out;
}

@keyframes viewFadeIn {
  from {
    opacity: 0.8;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 5. Navigation / Header */

.topbar {
  background:
    linear-gradient(90deg, rgba(9, 20, 36, 0.98), rgba(12, 25, 45, 0.94)),
    var(--color-bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035);
}

.topbar p {
  max-width: 72ch;
  font-size: var(--font-size-sm);
}

.headerActions {
  align-items: stretch;
}

.tabs {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.38) transparent;
}

.tab {
  position: relative;
  min-height: 38px;
  color: var(--color-text-muted);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.tab::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: transparent;
}

.tab.active,
.tab[aria-selected="true"] {
  color: var(--color-text-strong);
  border-color: var(--color-border);
}

.tab.active::after,
.tab[aria-selected="true"]::after {
  background: var(--color-accent);
}

.tab.leagueDataDisabled,
.tab.leagueDataDisabled:hover {
  color: rgba(148, 163, 184, 0.48);
  border-color: transparent;
  background: rgba(15, 23, 42, 0.35);
  cursor: not-allowed;
}

.tab.leagueDataDisabled::after {
  background: transparent;
}

/* 6. Cards */

.panel,
.draftControls,
.marketTablePanel,
.marketDistributionPanel,
.marketGapPanel,
.marketHeatmapPanel,
.marketDecisionPanel,
.marketBucket,
.wrappedCard,
.leagueDnaCard,
.managerCard,
.managerProfileCard,
.leagueLeadersCard,
.leagueNewsCard,
.recordsBoard,
.teamRosterCard,
.teamHeroCard,
.playerTabsCard,
.playerChartCard,
.playerSeasonCard,
.chartCard,
.interactiveChart {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-elevated) 92%, #ffffff 3%), var(--color-surface));
  box-shadow: var(--shadow-card-soft);
}

.panelHeader,
.marketSectionHeader,
.chartHeader,
.visualCardTitle,
.recentDraftedHeader,
.rosterConstructionHeader,
.rosterNeedHeader,
.nextPickDecisionHeader {
  border-bottom: 1px solid var(--color-border);
}

.panelHeader {
  align-items: center;
  gap: var(--space-md);
  min-height: 56px;
  padding: var(--space-md) var(--space-lg);
}

.panelHeader h2::before {
  background: var(--color-accent);
}

.emptyState {
  color: var(--color-text-muted);
  border: 1px dashed color-mix(in srgb, var(--color-border) 72%, transparent);
  border-radius: var(--radius-card);
  background: rgba(148, 163, 184, 0.05);
}

/* 7. Buttons */

.chatToggle,
.resetButton,
.draftNightToggle,
.draftedButton,
.detailDraftedButton,
.chartOpenButton,
.alternativeOpenButton,
.marketActiveFilter button,
.segmentedControl button,
.playersQuickFilters button,
.playerSubTabs button,
.playerYearTabs button,
.chatHeader button,
.chatForm button {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.chatToggle,
.draftedButton,
.detailDraftedButton.minePick,
.chatForm button {
  background: linear-gradient(180deg, var(--color-accent), #2563eb);
  border-color: rgba(147, 197, 253, 0.42);
  color: #ffffff;
}

.resetButton,
.draftNightToggle,
.chartOpenButton,
.alternativeOpenButton,
.chatHeader button {
  background: rgba(148, 163, 184, 0.08);
  color: var(--color-text);
}

.resetButton:hover,
.draftNightToggle:hover,
.chartOpenButton:hover,
.alternativeOpenButton:hover,
.playersQuickFilters button:hover,
.segmentedControl button:hover,
.playerSubTabs button:hover,
.playerYearTabs button:hover {
  border-color: var(--color-border-strong);
  background: rgba(79, 140, 255, 0.13);
  color: var(--color-text-strong);
}

.chartToggle.active,
.segmentedControl button.active,
.playersQuickFilters button.active,
.playerSubTabs button.active,
.playerYearTabs button.active {
  border-color: rgba(147, 197, 253, 0.55);
  background: rgba(79, 140, 255, 0.18);
  color: var(--color-text-strong);
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.16);
}

.draftNightToggle[aria-pressed="true"],
body.draftNightMode .draftNightToggle {
  border-color: rgba(52, 211, 153, 0.85);
  background: linear-gradient(180deg, #22c55e, #16a34a);
  color: #ecfdf5;
  box-shadow:
    0 8px 20px rgba(34, 197, 94, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.draftNightToggle[aria-pressed="true"]:hover,
body.draftNightMode .draftNightToggle:hover {
  border-color: rgba(134, 239, 172, 0.95);
  background: linear-gradient(180deg, #34d399, #22c55e);
  color: #ffffff;
}

.detailDraftedButton.otherPick {
  background: rgba(148, 163, 184, 0.10);
  color: var(--color-text);
}

/* 8. Forms / Filters */

input,
select,
textarea {
  min-height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--color-text-muted) 80%, transparent);
}

label,
.settingBlock label,
.filters label,
.assistantControls label,
.compareControls label,
.marketControls label,
.inlineSelect {
  color: var(--color-text-muted);
  font-weight: 720;
}

.settingsPanel,
.filters,
.assistantControls,
.compareControls,
.marketControls,
.draftHistoryControls {
  gap: var(--space-md);
}

.settingBlock,
.rosterText {
  border-color: var(--color-border);
}

.weightControl button {
  color: var(--color-text-strong);
}

input[type="range"] {
  accent-color: var(--color-accent);
}

/* 9. Tables */

.tableWrap {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}

table {
  font-variant-numeric: tabular-nums;
}

caption {
  color: var(--color-text-muted);
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0d1829;
  color: #b9c6d7;
  font-size: 0.6875rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

td {
  vertical-align: middle;
}

td:nth-child(2),
td:nth-child(6),
td:nth-child(8),
.marketGapText,
.metric strong,
.quantCard strong,
.marketStatCard strong {
  font-variant-numeric: tabular-nums;
}

.playerNameButton,
.marketTablePlayer,
.inlinePopoutLink {
  color: var(--color-text-strong);
}

.tableLinkButton {
  border-color: var(--color-border);
  background: rgba(148, 163, 184, 0.08);
}

/* 10. Badges / Pills */

.pill,
.signalBadge,
.marketActionBadge,
.marketAgreementBadge,
.draftReadBadge,
.pressureBadge {
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* One semantic badge palette shared by every badge family, matched to the
   war-room tokens (turf/alert/clock) so green/red/yellow read identically
   on the board, market, and scouting views. */
.pill.good,
.signalPill.good,
.signalBadge.good,
.marketActionBadge.good,
.marketAgreementBadge.good,
.draftReadBadge.good {
  color: #9be7c6;
  background: var(--turf-soft);
  border-color: rgba(54, 194, 139, 0.34);
}

.pill.bad,
.signalPill.bad,
.signalBadge.bad,
.marketActionBadge.bad,
.marketAgreementBadge.bad,
.draftReadBadge.bad {
  color: #f6b1ab;
  background: var(--alert-soft);
  border-color: rgba(236, 106, 96, 0.38);
}

.pill.warn,
.signalPill.warn,
.signalBadge.warn,
.marketActionBadge.warn,
.marketAgreementBadge.warn,
.draftReadBadge.warn {
  color: #f2ce86;
  background: var(--clock-soft);
  border-color: rgba(242, 180, 65, 0.36);
}

.goodText,
.positiveText {
  color: #8fe3c0;
}

.badText,
.negativeText {
  color: #fbb4ae;
}

/* 11. Charts */

.chartCard,
.interactiveChart {
  padding: var(--space-md);
}

.chartHeader {
  align-items: flex-start;
  padding-bottom: var(--space-sm);
}

.chartTitle strong {
  color: var(--color-text-strong);
  font-size: var(--font-size-sm);
}

.chartControls {
  gap: var(--space-sm);
  margin-block: var(--space-sm);
}

.chartBody {
  border-radius: var(--radius-control);
  background: rgba(3, 7, 18, 0.22);
}

.chartGridline,
.chartGridLine {
  stroke: rgba(148, 163, 184, 0.18);
}

.chartActualLine {
  stroke: var(--color-accent-strong);
}

.chartTrendLine {
  stroke: #a7f3d0;
}

.chartMeanLine {
  stroke: #fde68a;
}

/* 12. Player Detail / Draft Components */

.teamContextWithAverages .visualBar,
.teamContextWithAverages .splitBar {
  margin-top: 8px;
}

.teamContextWithAverages .visualBar:nth-of-type(even),
.teamContextWithAverages .splitBar:nth-of-type(even) {
  opacity: 0.78;
}

.playerDrawer,
.teamDrawer,
.detailInsightDrawer,
.chatPanel {
  background: linear-gradient(180deg, var(--color-surface-elevated), var(--color-surface));
  border-left: 1px solid var(--color-border);
  box-shadow: -24px 0 64px rgba(0, 0, 0, 0.36);
}

.playerDrawerBackdrop.open,
.teamDrawerBackdrop.open,
.detailInsightBackdrop.open {
  background: rgba(2, 6, 23, 0.64);
  backdrop-filter: blur(4px);
}

.playerDrawerClose {
  background: rgba(148, 163, 184, 0.10);
  color: var(--color-text-strong);
}

.snapshotCard,
.decisionSnapshotCard,
.assistantPlayerCard,
.boardIntelCard,
.rosterNeedPanel,
.rosterConstructionPanel,
.recentDraftedPanel,
.nextPickDecisionBoard {
  border-color: var(--color-border);
  background: rgba(15, 27, 45, 0.74);
}

.detailDecisionNarrative,
.detailComparableSection,
.playerDrawer .detailSection,
.playerDrawer .snapshotCard {
  border-color: rgba(96, 165, 250, 0.18);
  background: linear-gradient(180deg, rgba(13, 31, 56, 0.92), rgba(8, 20, 36, 0.9));
}

.detailNarrativeGrid {
  margin-top: 10px;
}

.detailDecisionNarrative article {
  padding: 12px;
}

.detailDecisionNarrative p {
  color: #d7e3f1;
  font-size: 13px;
  line-height: 1.46;
}

.detailComparableGrid {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  margin-top: 10px;
}

.detailComparableGrid button {
  padding: 11px;
}

.detailComparableGrid button:hover,
.detailComparableGrid button:focus-visible,
.assistantDecisionLanes button:hover,
.assistantDecisionLanes button:focus-visible {
  outline: none;
  border-color: rgba(96, 165, 250, 0.52);
  background: linear-gradient(180deg, rgba(25, 61, 106, 0.98), rgba(11, 33, 59, 0.96));
}

.playerDrawer .decisionSnapshotCard {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(12, 35, 66, 0.98), rgba(7, 21, 39, 0.96));
}

.draftActionCell,
.detailDraftActions {
  gap: var(--space-sm);
}

/* 13. Utilities */

.visuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.textMuted {
  color: var(--color-text-muted) !important;
}

/* 14. Responsive Breakpoints */

@media (max-width: 1100px) {
  .appShell {
    padding-inline: var(--space-lg);
  }

  .topbar {
    align-items: flex-start;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .detailPanel {
    position: static;
  }

  .marketHeroHeader,
  .marketControls,
  .playersToolbar {
    grid-template-columns: 1fr;
  }

  .assistantDecisionLanes,
  .detailComparableGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .appShell {
    padding: var(--space-md) var(--space-md) var(--space-xl);
  }

  .topbar {
    padding: var(--space-lg);
  }

  .headerActions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tabs {
    padding-inline: var(--space-md);
  }

  .panelHeader,
  .marketSectionHeader,
  .chartHeader,
  .nextPickDecisionHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .kpis,
  .settingsPanel,
  .filters,
  .assistantControls,
  .compareControls {
    grid-template-columns: 1fr;
  }

  .boardHeaderActions {
    width: 100%;
  }

  .playerDrawer,
  .teamDrawer,
  .detailInsightDrawer {
    width: min(100vw, 460px);
  }

  .chatPanel {
    width: 100vw;
  }

  .assistantDecisionLanes,
  .assistantMiniCompare,
  .detailNarrativeGrid,
  .detailComparableGrid {
    grid-template-columns: 1fr;
  }
}

/* 15. Accessibility / Reduced Motion */

:where(a, button, input, select, textarea, [tabindex], [role="button"]):focus-visible {
  outline: 3px solid rgba(147, 197, 253, 0.74);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(79, 140, 255, 0.18);
}

.infoIcon:focus-visible {
  outline: 3px solid rgba(147, 197, 253, 0.74);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================
   Targeted Visual QA Polish Pass
   Scope: consistency, density, visual layering
   Safe: CSS-only overrides
   ========================================================= */

/* Header and navigation */

:root {
  --color-border-subtle: rgba(148, 163, 184, 0.14);
  --color-surface-inner: rgba(8, 17, 31, 0.54);
  --font-size-label: 0.71875rem;
}

.topbar {
  gap: var(--space-lg);
  padding: 14px 24px;
}

.topbar h1 {
  font-size: 1.375rem;
  letter-spacing: 0;
}

.topbar p {
  margin-top: 5px;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.headerActions {
  min-width: min(420px, 46vw);
}

.chatToggle {
  padding-inline: 15px;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.18);
}

.tabs {
  top: 74px;
  min-height: 42px;
  gap: 4px;
  padding: 7px 24px 0;
  background: rgba(6, 14, 26, 0.88);
}

.tab {
  min-height: 36px;
  border-radius: 8px 8px 0 0;
  padding: 8px 13px;
  color: #a8b6c8;
  font-size: 0.765rem;
  font-weight: 760;
}

.tab:hover {
  color: var(--color-text-strong);
  background: rgba(148, 163, 184, 0.075);
}

.tab.active,
.tab[aria-selected="true"] {
  background: linear-gradient(180deg, rgba(31, 44, 68, 0.92), rgba(17, 28, 46, 0.98));
  border-color: rgba(147, 197, 253, 0.28);
}

.tab.active::after,
.tab[aria-selected="true"]::after {
  right: 10px;
  left: 10px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-strong));
  box-shadow: 0 -4px 16px rgba(79, 140, 255, 0.28);
}

/* Typography consistency */

.panelHeader h2,
.marketSectionHeader strong,
.visualCardTitle strong,
.chartTitle strong,
.recentDraftedHeader strong,
.rosterConstructionHeader strong,
.rosterNeedHeader strong {
  font-size: 0.9375rem;
  font-weight: 820;
  line-height: 1.25;
}

.panelHeader span,
.marketHeroHeader span,
.marketControls label,
.marketSectionHeader span,
.wrappedHero span,
.wrappedCard > span,
.playersToolbar > div:first-child span,
.metric span,
.kpis span,
.settingBlock label,
.filters label,
.assistantControls label,
.compareControls label {
  font-size: var(--font-size-label);
  letter-spacing: 0.047em;
  line-height: 1.35;
}

.settingHelp,
.rosterText,
.chartTitle p,
.marketHeroHeader p,
.wrappedHero p,
.marketStatCard p,
.wrappedCard p {
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Cards and section layering */

.panel,
.draftControls,
.marketTablePanel,
.marketDistributionPanel,
.marketGapPanel,
.marketHeatmapPanel,
.marketDecisionPanel,
.marketBucket,
.wrappedCard,
.leagueDnaCard,
.managerCard,
.managerProfileCard,
.leagueLeadersCard,
.leagueNewsCard,
.recordsBoard,
.teamRosterCard,
.teamHeroCard,
.playerTabsCard,
.playerChartCard,
.playerSeasonCard,
.chartCard,
.interactiveChart {
  border-color: var(--color-border-subtle);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.20);
}

.panelHeader {
  min-height: 50px;
  padding: 12px 15px;
  background: rgba(13, 24, 41, 0.82);
}

.panelHeader h2::before {
  width: 3px;
  opacity: 0.88;
}

.draftControls .settingsPanel,
.draftControls .filters,
.draftControls .kpis {
  padding: 12px 14px;
}

.settingBlock,
.rosterText,
.quantCard,
.metric,
.coreMetrics div,
.assistantAnalysisGrid article,
.boardIntelCard,
.pressureGrid article,
.marketPocketTop,
.marketPocketPlayers button,
.nextPickDecisionCard,
.nextPickRangeStats article {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-inner);
  box-shadow: none;
}

.settingBlock,
.rosterText {
  min-height: 62px;
}

.draftControls .filters {
  border-top-color: var(--color-border-subtle);
}

.kpis button {
  min-height: 74px;
  border-color: var(--color-border-subtle);
  background: rgba(8, 17, 31, 0.62);
}

.kpis button::before {
  width: 3px;
  opacity: 0.9;
}

.kpis strong {
  margin-top: 7px;
  font-size: 1.55rem;
  font-weight: 850;
}

/* Buttons and form controls */

input,
select,
textarea {
  min-height: 38px;
  border-color: rgba(148, 163, 184, 0.24);
}

.resetButton,
.draftNightToggle,
.chartOpenButton,
.alternativeOpenButton,
.chatHeader button,
.segmentedControl button,
.playersQuickFilters button,
.playerSubTabs button,
.playerYearTabs button {
  font-size: 0.8125rem;
  font-weight: 760;
}

.draftedButton,
.detailDraftedButton {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 800;
}

.draftActionCell {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(48px, 1fr));
}

.boardActionCell,
.nextPickCell {
  display: grid;
  gap: 4px;
  min-width: 150px;
}

.boardActionCell small,
.nextPickCell span {
  color: var(--color-text-muted);
  font-size: 0.68rem;
  line-height: 1.25;
}

.nextPickCell {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 7px 8px;
  background: rgba(15, 23, 42, 0.36);
}

.nextPickCell strong {
  font-size: 0.72rem;
  line-height: 1.15;
}

.nextPickCell.bad {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(127, 29, 29, 0.16);
}

.nextPickCell.warn {
  border-color: rgba(250, 204, 21, 0.4);
  background: rgba(113, 63, 18, 0.16);
}

.nextPickCell.good {
  border-color: rgba(45, 212, 191, 0.38);
  background: rgba(20, 83, 45, 0.14);
}

.nextPickCell.info {
  border-color: rgba(96, 165, 250, 0.28);
  background: rgba(30, 64, 175, 0.10);
}

.draftedButton.minePick,
.detailDraftedButton.minePick {
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.16);
}

.draftedButton.otherPick,
.detailDraftedButton.otherPick {
  border-color: rgba(148, 163, 184, 0.26);
  background: rgba(148, 163, 184, 0.09);
}

/* Draft board and tables */

.boardPanel .panelHeader {
  position: relative;
  z-index: 3;
}

.boardHeaderActions {
  gap: 9px;
}

#rowCount {
  color: #b7c5d8;
  font-size: 0.75rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.tableWrap {
  border-color: var(--color-border-subtle);
}

table {
  font-size: 0.765rem;
  line-height: 1.35;
}

th {
  padding: 9px 10px;
  background: linear-gradient(180deg, #101d31, #0b1627);
  color: #aebed2;
  border-bottom-color: rgba(191, 219, 254, 0.16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035), 0 8px 16px rgba(0, 0, 0, 0.18);
}

td {
  padding: 8px 10px;
  border-bottom-color: rgba(148, 163, 184, 0.10);
}

tbody tr:nth-child(even) td {
  background: rgba(12, 23, 40, 0.86);
}

tbody tr:hover td {
  background: rgba(34, 52, 82, 0.84);
}

.boardPanel tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 rgba(79, 140, 255, 0.72);
}

.playerNameButton {
  line-height: 1.25;
}

.playerNameButton strong,
.marketTablePlayer strong {
  font-size: 0.875rem;
  font-weight: 840;
}

td:nth-child(3) span {
  font-size: 0.75rem;
  line-height: 1.35;
}

.marketModelCell strong,
.valueCell strong,
.upsideCell strong {
  font-size: 0.8125rem;
}

/* Badges and data colors */

.pill,
.signalBadge,
.marketActionBadge,
.marketAgreementBadge,
.draftReadBadge,
.pressureBadge {
  padding-block: 4px;
  border-color: rgba(148, 163, 184, 0.20);
  font-size: 0.6875rem;
}

.marketStatCard.good,
.marketBucket.good,
.quantCard.good {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.095), rgba(8, 17, 31, 0.62));
}

.marketStatCard.bad,
.marketBucket.bad,
.quantCard.bad {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.09), rgba(8, 17, 31, 0.62));
}

.marketStatCard.warn,
.marketBucket.warn,
.quantCard.warn {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), rgba(8, 17, 31, 0.62));
}

/* Chart cards */

.chartCard,
.interactiveChart {
  padding: 13px;
  background: rgba(15, 27, 45, 0.72);
}

.chartHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: start;
  padding-bottom: 9px;
}

.chartHeader b {
  align-self: start;
  min-width: 56px;
  border-color: rgba(147, 197, 253, 0.22);
  background: rgba(79, 140, 255, 0.10);
}

.chartControls {
  gap: 6px;
  margin: 7px 0 9px;
}

.chartToggle,
.chartLegendItem,
.chartOpenButton {
  min-height: 28px;
  padding: 5px 8px;
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.055);
  font-size: 0.71875rem;
  font-weight: 740;
}

.chartToggle.active {
  background: rgba(79, 140, 255, 0.14);
}

.chartBody {
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, 0.08);
  background: rgba(2, 6, 23, 0.16);
}

.chartOpenButton {
  justify-self: start;
}

/* Market and wrapped spacing */

#marketView .marketShell,
.wrappedShell {
  display: grid;
  gap: 14px;
}

.marketHeroHeader {
  min-height: 118px;
  padding: 20px;
  background: linear-gradient(90deg, rgba(23, 36, 58, 0.96), rgba(13, 24, 41, 0.72));
}

.marketHeroHeader h2 {
  font-size: 1.55rem;
}

.marketControls {
  padding: 14px;
}

.marketStatCard {
  min-height: 112px;
  padding: 15px;
}

.marketStatCard strong {
  margin-top: 8px;
  font-size: 1.45rem;
  line-height: 1;
}

.marketPocketGrid,
.marketBucketGrid,
.marketHeatmapGrid,
.nextPickDecisionGrid,
.nextPickRangeStats {
  align-items: stretch;
}

.wrappedHero {
  min-height: 0;
  padding: 30px 34px;
  background: linear-gradient(90deg, rgba(16, 26, 43, 0.98), rgba(16, 26, 43, 0.72));
}

.wrappedHero h2 {
  max-width: 12ch;
  font-size: clamp(2rem, 1.5rem + 1.2vw, 2.7rem);
  line-height: 1.02;
}

.wrappedHero p {
  max-width: 58ch;
}

.wrappedGrid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.wrappedCard {
  min-height: 0;
  padding: 18px;
}

.wrappedCard h3 {
  margin-top: 9px;
  font-size: 1.05rem;
  line-height: 1.25;
}

.leagueDnaCard,
.managerProfilesIntro,
.draftGradesIntro,
.leagueHistoryHero,
.leagueLeadersCard {
  padding: 18px;
}

.dnaGrid,
.championCards,
.managerCards,
.draftGradeGrid,
.recordsBoards {
  gap: 14px;
}

/* Responsive refinements */

@media (max-width: 1100px) {
  .topbar {
    padding: 13px 18px;
  }

  .tabs {
    top: 70px;
    padding-inline: 18px;
  }

  .marketHeroHeader,
  .wrappedHero {
    padding: 22px;
  }

  .filters {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .kpis {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 760px) {
  .topbar {
    gap: 10px;
    padding: 14px 16px;
  }

  .topbar h1 {
    font-size: 1.25rem;
  }

  .topbar p {
    font-size: 0.78125rem;
  }

  .headerActions {
    grid-template-columns: minmax(74px, 92px) minmax(0, 1fr);
    align-items: stretch;
  }

  .chatToggle {
    width: 100%;
  }

  .tabs {
    min-height: 42px;
    padding: 6px 12px 0;
  }

  .tab {
    min-height: 35px;
    padding-inline: 11px;
  }

  .panelHeader {
    min-height: 0;
    gap: 5px;
  }

  .settingBlock,
  .rosterText {
    min-height: 58px;
  }

  .kpis button {
    min-height: 64px;
  }

  .boardPanel .tableWrap,
  .marketTableWrap,
  .tableWrap {
    max-width: 100%;
    overflow-x: auto;
  }

  .draftActionCell {
    grid-template-columns: 1fr;
  }

  .marketHeroHeader,
  .wrappedHero {
    padding: 20px;
  }

  .wrappedHero h2 {
    max-width: none;
  }
}

@media (max-width: 360px) {
  .headerActions {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Mixpanel-Inspired Analytics System Pass
   Scope: chart frames, share-state controls, report structure
   Safe: visual and interaction polish only
   ========================================================= */

:root {
  --chart-purple: #7c5cff;
  --chart-blue: #55b7ff;
  --chart-green: #54d6a1;
  --chart-red: #ff6b7a;
  --chart-yellow: #f7c95f;
  --chart-muted: #6f7f96;
  --chart-grid: rgba(185, 198, 216, 0.14);
  --chart-axis: #9fb0c5;
  --chart-tooltip-bg: rgba(12, 18, 30, 0.98);
  --chart-tooltip-border: rgba(199, 210, 254, 0.22);
  --surface-page: #070d18;
  --surface-section: #101a2b;
  --surface-card: #111c2e;
  --surface-chart: #0a1220;
  --surface-elevated: #17243a;
}

body {
  background:
    radial-gradient(circle at top right, rgba(85, 183, 255, 0.07), transparent 34rem),
    linear-gradient(180deg, var(--surface-section) 0%, var(--surface-page) 44%, #050812 100%);
}

.headerActions {
  grid-template-columns: auto auto minmax(220px, 1fr);
  min-width: min(520px, 52vw);
}

.copyViewButton {
  min-height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--radius-control);
  padding: 0 13px;
  background: rgba(148, 163, 184, 0.075);
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 780;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.copyViewButton:hover,
.copyViewButton.copied {
  border-color: rgba(124, 92, 255, 0.45);
  background: rgba(124, 92, 255, 0.14);
  color: var(--color-text-strong);
}

.toolbarCopy,
.dashboardNarrative p {
  margin-top: 5px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.dashboardNarrative {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: var(--radius-card);
  background: rgba(8, 17, 31, 0.58);
}

.dashboardNarrative span {
  color: #b9c6d8;
  font-size: var(--font-size-label);
  font-weight: 850;
  letter-spacing: 0.052em;
  text-transform: uppercase;
}

.marketCommandHero,
.kpis,
.quantGrid {
  align-items: stretch;
}

.kpis button,
.marketStatCard,
.quantCard,
.wrappedCard {
  display: grid;
  align-content: start;
  gap: 6px;
}

.kpis strong,
.marketStatCard strong,
.quantCard strong {
  letter-spacing: 0;
}

.chartFrame {
  display: grid;
  gap: 9px;
  border-color: rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(17, 28, 46, 0.88), rgba(8, 17, 31, 0.82));
}

.chartFrame .chartHeader {
  margin: -1px -1px 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: 12px 13px 10px;
  background: rgba(8, 17, 31, 0.36);
}

.chartFrame .chartBody {
  min-height: 150px;
  overflow: auto;
}

.chartFrame .chartTakeaway {
  margin: 0;
  padding: 9px 11px;
  border-top: 1px solid rgba(148, 163, 184, 0.11);
  color: #c2cede;
  font-size: 0.78125rem;
}

.chartControls {
  align-items: center;
}

.chartToggle,
.chartLegendItem,
.chartTypeSelector select,
.chartOpenButton {
  border-radius: 7px;
  text-transform: none;
}

.chartToggle.active,
.chartLegendItem:not(.inactive) {
  border-color: rgba(124, 92, 255, 0.45);
  background: rgba(124, 92, 255, 0.16);
}

.chartActualLine,
.groupedLegend .a::before,
.groupedBarRow .a,
.modernBarRow .info,
.barTrack .info {
  stroke: var(--chart-purple);
  background: var(--chart-purple);
}

.chartPoint,
.chartBar {
  fill: var(--chart-purple);
}

.chartTrendLine {
  stroke: var(--chart-green);
}

.chartMeanLine {
  stroke: var(--chart-yellow);
}

.chartGridline,
.chartGridLine {
  stroke: var(--chart-grid);
}

.chartAxisLabel,
.chartTickLabel {
  fill: var(--chart-axis);
}

.modernBarRow {
  min-height: 30px;
}

.modernBarRow span,
.distributionBin span,
.groupedBarRow span {
  color: #cbd6e5;
}

.modernBarRow em,
.groupedBarRow em {
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
}

.modernBarRow i.good,
.distributionBin i,
.marketGapBar.good i {
  background: var(--chart-green);
}

/* Team Opportunity Shape chart colors */
.modernBarRow i.team {
  background: linear-gradient(90deg, #7c5cff, #a78bfa);
  box-shadow: 0 0 12px rgba(124, 92, 255, 0.22);
}

.modernBarRow i.nflAvg {
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.38), rgba(203, 213, 225, 0.58));
}

.modernBarRow:has(i.nflAvg) span,
.modernBarRow:has(i.nflAvg) em {
  color: #8fa2bb;
}

.modernBarRow i.bad,
.marketGapBar.bad i {
  background: var(--chart-red);
}

.chartEmptyState {
  display: grid;
  min-height: 140px;
  place-items: center;
  padding: 18px;
  color: var(--color-text-muted);
  text-align: center;
}

.chartTooltip {
  max-width: 288px;
  border: 1px solid var(--chart-tooltip-border);
  border-radius: 10px;
  padding: 0;
  background: var(--chart-tooltip-bg);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.44);
}

.chartTooltipCard {
  display: grid;
  gap: 8px;
  padding: 10px 12px 10px 14px;
  border-left: 3px solid var(--chart-purple);
}

.chartTooltipCard.good {
  border-left-color: var(--chart-green);
}

.chartTooltipCard.bad {
  border-left-color: var(--chart-red);
}

.chartTooltipCard.warn {
  border-left-color: var(--chart-yellow);
}

.chartTooltipCard > strong {
  color: #ffffff;
  font-size: 0.8125rem;
}

.chartTooltipRow {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-top: 4px;
  color: #aebed2;
  font-size: 0.75rem;
}

.chartTooltipRow strong {
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.chartTooltipCard p {
  margin: 0;
  color: #c6d3e3;
  font-size: 0.75rem;
  line-height: 1.35;
}

.marketGapPanel,
.marketHeatmapPanel,
.marketDecisionPanel,
.marketTablePanel {
  background: rgba(13, 22, 37, 0.76);
}

.marketDecisionPanel.chartFrame,
.marketGapPanel.chartFrame,
.marketHeatmapPanel.chartFrame,
.marketDistributionPanel.chartFrame {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.marketDecisionPanel.chartFrame .marketSectionHeader,
.marketHeatmapPanel.chartFrame .marketSectionHeader,
.marketDistributionPanel.chartFrame .marketSectionHeader,
.marketGapPanel.chartFrame .marketGapHeader {
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.11);
}

.marketBucket.chartFrame,
.wrappedCard.chartFrame {
  border-color: rgba(148, 163, 184, 0.13);
  background: var(--surface-chart);
  box-shadow: none;
}

.marketPocketCard,
.marketHeatmapCard {
  background: rgba(8, 17, 31, 0.45);
  border-color: rgba(148, 163, 184, 0.12);
}

.marketPocketBars b[data-chart-tooltip],
.marketGapBar[data-chart-tooltip],
.marketHeatBar[data-chart-tooltip],
.marketDistBars article[data-chart-tooltip] {
  cursor: help;
}

.marketGapList button,
.marketPlayerButton,
.teamRankCard,
.playerListItem {
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.marketGapList button:hover,
.marketPlayerButton:hover,
.teamRankCard:hover,
.playerListItem:hover {
  border-color: rgba(124, 92, 255, 0.32);
  background: rgba(124, 92, 255, 0.095);
}

.tableWrap {
  scrollbar-color: rgba(148, 163, 184, 0.48) rgba(8, 17, 31, 0.52);
}

@media (max-width: 900px) {
  .headerActions {
    grid-template-columns: auto auto minmax(0, 1fr);
    min-width: 0;
  }

  .copyViewButton {
    padding-inline: 10px;
  }
}

@media (max-width: 760px) {
  .headerActions {
    grid-template-columns: minmax(70px, 88px) minmax(94px, 110px);
  }

  .headerActions #searchInput {
    grid-column: 1 / -1;
  }

  .copyViewButton {
    width: 100%;
  }

  .chartFrame .chartHeader {
    display: grid;
  }
}

@media (max-width: 760px) {
  .tabs {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .tab {
    flex: 0 0 auto;
  }

  #draftView .filters,
  #draftView .kpis {
    grid-template-columns: 1fr;
  }

  #draftView .filters > *,
  #draftView .kpis > *,
  .draftHealth,
  .draftHealth > *,
  .draftHealthMain,
  .draftHealthMain > *,
  .liveDraftMetrics,
  .liveDraftMetrics > *,
  .healthCards,
  .healthCards > *,
  .rosterConstructionPanel,
  .rosterConstructionPanel > *,
  .rosterNeedPanel,
  .rosterNeedPanel > *,
  .rosterSlotGrid,
  .rosterNeedGrid {
    min-width: 0;
    max-width: 100%;
  }

  .liveDraftTitle {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .liveDraftTitle span {
    width: 100%;
  }

  .liveDraftMetrics {
    grid-template-columns: 1fr;
  }

  .healthCards,
  .rosterSlotGrid,
  .draftNightMode .rosterSlotGrid,
  .rosterNeedGrid,
  .draftNightMode .rosterNeedGrid {
    grid-template-columns: 1fr;
  }

  .rosterConstructionHeader,
  .rosterNeedHeader {
    display: grid;
    gap: 9px;
  }

  .rosterConstructionTotals {
    justify-content: flex-start;
  }
}

/* Chart Interaction and Saved View Polish */

.headerActions {
  grid-template-columns: auto auto minmax(136px, 180px) auto auto minmax(220px, 1fr);
  min-width: min(820px, 68vw);
}

.presetSelectLabel {
  min-width: 0;
}

.presetSelectLabel select,
.presetButton {
  min-height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--radius-control);
  background: rgba(8, 17, 31, 0.76);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 760;
}

.presetSelectLabel select {
  width: 100%;
  padding: 0 32px 0 11px;
}

.presetButton {
  padding: 0 11px;
  cursor: pointer;
}

.presetButton.subtle {
  color: var(--color-text-muted);
}

.presetButton:hover:not(:disabled),
.presetButton:focus-visible,
.presetSelectLabel select:focus-visible {
  border-color: rgba(124, 92, 255, 0.48);
  background: rgba(124, 92, 255, 0.13);
  color: var(--color-text-strong);
}

.presetButton:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.chartHeaderActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

[data-chart-key],
[data-chart-detail] {
  outline-offset: 3px;
}

[data-chart-key]:focus-visible,
[data-chart-detail]:focus-visible {
  outline: 2px solid rgba(124, 92, 255, 0.75);
}

.chartLinkedActive {
  border-color: rgba(124, 92, 255, 0.58) !important;
  box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.26), 0 10px 30px rgba(0, 0, 0, 0.18);
}

circle.chartLinkedActive,
rect.chartLinkedActive {
  stroke: #ffffff;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 5px rgba(124, 92, 255, 0.72));
}

.modernBarRow.chartLinkedActive,
.groupedBarRow b.chartLinkedActive,
.distributionBin.chartLinkedActive,
.marketGapBar.chartLinkedActive,
.marketHeatBar.chartLinkedActive,
.marketDistBars article.chartLinkedActive,
.marketPocketBars b.chartLinkedActive {
  background: rgba(124, 92, 255, 0.12);
}

.chartTableLinked td {
  background: rgba(124, 92, 255, 0.13) !important;
}

.chartTableLinked .marketTablePlayer strong {
  color: #ffffff;
}

.chartDrilldownMetrics {
  margin: 14px 0;
}

.drilldownTable {
  max-height: 58vh;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: var(--radius-card);
}

.drilldownTable table {
  margin: 0;
}

@media (max-width: 1120px) {
  .headerActions {
    grid-template-columns: auto auto minmax(130px, 1fr) auto auto;
    min-width: 0;
  }

  .headerActions #searchInput {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .headerActions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .presetSelectLabel,
  .headerActions #searchInput {
    grid-column: 1 / -1;
  }

  .presetSelectLabel {
    grid-row: 2;
  }

  .headerActions #searchInput {
    grid-row: 3;
  }

  .chatToggle {
    grid-column: 1;
    grid-row: 1;
  }

  .copyViewButton {
    grid-column: 2;
    grid-row: 1;
  }

  #saveReportPreset {
    grid-column: 3;
    grid-row: 1;
  }

  #deleteReportPreset {
    grid-column: 4;
    grid-row: 1;
  }

  .presetButton,
  .copyViewButton,
  .chatToggle {
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding-inline: 7px;
    font-size: 0.75rem;
  }

  .presetSelectLabel select,
  .headerActions #searchInput {
    min-height: 38px;
  }

  .chartHeaderActions {
    justify-content: flex-start;
  }

  .marketShell > *,
  .marketHeroHeader,
  .marketControls,
  .marketTablePanel,
  .marketDecisionPanel,
  .marketGapPanel,
  .marketHeatmapPanel,
  .marketDistributionPanel,
  .marketBucket {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }
}

/* =========================================================
   App-wide Typography and Chart Label System
   Scope: shared text hierarchy, chart labels, controls, captions
   Safe: CSS typography/style normalization only
   ========================================================= */

:root {
  --font-size-page-title: 1.375rem;
  --font-size-section-title: 1.125rem;
  --font-size-card-title: 0.9375rem;
  --font-size-chart-title: 0.8125rem;
  --font-size-chart-subtitle: 0.75rem;
  --font-size-chart-axis-title: 0.6875rem;
  --font-size-chart-axis-tick: 0.6875rem;
  --font-size-chart-legend: 0.6875rem;
  --font-size-kpi-label: 0.71875rem;
  --font-size-kpi-value: 1.55rem;
  --font-size-helper: 0.75rem;
  --font-size-caption: 0.75rem;
  --font-size-table-header: 0.6875rem;
  --font-size-table-body: 0.78125rem;
  --font-weight-title: 820;
  --font-weight-subtitle: 640;
  --font-weight-label: 760;
  --font-weight-body: 500;
  --letter-spacing-label: 0;
  --line-height-title: 1.25;
  --line-height-body: 1.5;
  --line-height-compact: 1.35;
  --chart-control-actual: var(--chart-purple);
  --chart-control-trend: var(--chart-green);
  --chart-control-mean: var(--chart-yellow);
  --chart-control-band: var(--chart-red);
}

.page-title,
.topbar h1 {
  color: var(--color-text-strong);
  font-size: var(--font-size-page-title);
  font-weight: var(--font-weight-title);
  letter-spacing: 0;
  line-height: var(--line-height-title);
}

.page-subtitle,
.topbar p {
  color: var(--color-text-muted);
  font-size: var(--font-size-helper);
  font-weight: var(--font-weight-body);
  letter-spacing: 0;
  line-height: var(--line-height-compact);
}

.section-title,
.panelHeader h2,
.marketHeroHeader h2,
.wrappedHero h2,
.playersToolbar h2,
.recommendation h3 {
  color: var(--color-text-strong);
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-title);
  letter-spacing: 0;
  line-height: var(--line-height-title);
}

.section-subtitle,
.decisionHint,
.toolbarCopy,
.marketHeroHeader p,
.wrappedHero p {
  color: var(--color-text-muted);
  font-size: var(--font-size-helper);
  font-weight: var(--font-weight-subtitle);
  letter-spacing: 0;
  line-height: var(--line-height-body);
}

.card-title,
.visualCardTitle strong,
.marketBucketHeader strong,
.marketPocketTop strong,
.marketPocketRead strong,
.teamRosterCard strong,
.leagueDnaCard strong,
.managerCard strong,
.managerProfileCard strong,
.leagueLeadersCard strong,
.leagueNewsCard strong,
.recordsBoard strong {
  color: var(--color-text-strong);
  font-size: var(--font-size-card-title);
  font-weight: var(--font-weight-title);
  letter-spacing: 0;
  line-height: var(--line-height-title);
}

.card-subtitle,
.visualCardTitle span,
.marketBucketHeader p,
.marketPocketTop p,
.marketStatCard p,
.wrappedCard p,
.teamRosterCard p,
.managerCard p,
.managerProfileCard p {
  color: var(--color-text-muted);
  font-size: var(--font-size-helper);
  font-weight: var(--font-weight-subtitle);
  letter-spacing: 0;
  line-height: var(--line-height-compact);
  text-transform: none;
}

.chartTitle,
.chart-title {
  min-width: 0;
}

.chart-title,
.chartTitle strong,
.chartFrame .chartTitle strong,
.compareChartGrid .chartTitle strong,
.marketSectionHeader strong,
.marketGapHeader strong {
  color: var(--color-text-strong);
  font-size: var(--font-size-chart-title);
  font-weight: var(--font-weight-title);
  letter-spacing: 0;
  line-height: var(--line-height-title);
}

.chart-subtitle,
.chartTitle p,
.chartTitle span,
.chartFrame .chartTitle p,
.compareChartGrid .chartTitle p,
.marketSectionHeader span,
.marketGapHeader span {
  display: block;
  margin: 3px 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-chart-subtitle);
  font-weight: var(--font-weight-subtitle);
  letter-spacing: 0;
  line-height: var(--line-height-compact);
  text-transform: none;
}

.chart-helper,
.helper-text,
.chartEmptyState {
  color: var(--color-text-muted);
  font-size: var(--font-size-helper);
  font-weight: var(--font-weight-subtitle);
  letter-spacing: 0;
  line-height: var(--line-height-body);
}

.muted-text {
  color: var(--color-text-muted);
}

.chart-caption,
.chartTakeaway,
.chartFrame .chartTakeaway,
.marketTakeaway,
.table-caption,
caption {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-subtitle);
  letter-spacing: 0;
  line-height: var(--line-height-body);
  text-transform: none;
}

.chartControls {
  align-items: center;
  gap: 6px;
}

.chartToggle,
.chartLegendItem,
.chartOpenButton,
.chartTypeSelector select,
.marketGapSelect select {
  min-height: 28px;
  font-size: var(--font-size-chart-legend);
  font-weight: var(--font-weight-label);
  letter-spacing: 0;
  line-height: var(--line-height-compact);
  text-transform: none;
}

.chartToggle[data-chart-toggle="actual"] {
  --chart-toggle-color: var(--chart-control-actual);
}

.chartToggle[data-chart-toggle="trend"] {
  --chart-toggle-color: var(--chart-control-trend);
}

.chartToggle[data-chart-toggle="mean"] {
  --chart-toggle-color: var(--chart-control-mean);
}

.chartToggle[data-chart-toggle="band"] {
  --chart-toggle-color: var(--chart-control-band);
}

.chartToggle[data-chart-toggle="top10"] {
  --chart-toggle-color: #38bdf8;
}

.chartToggle[data-chart-toggle] {
  border-color: color-mix(in srgb, var(--chart-toggle-color, var(--chart-purple)) 48%, transparent);
  background: color-mix(in srgb, var(--chart-toggle-color, var(--chart-purple)) 10%, transparent);
  color: color-mix(in srgb, var(--chart-toggle-color, var(--chart-purple)) 72%, var(--color-text-muted));
}

.chartToggle[data-chart-toggle].active,
.chartToggle[data-chart-toggle][aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--chart-toggle-color, var(--chart-purple)) 78%, transparent);
  background: color-mix(in srgb, var(--chart-toggle-color, var(--chart-purple)) 24%, transparent);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-toggle-color, var(--chart-purple)) 22%, transparent);
}

.chartToggle[data-chart-toggle]:hover,
.chartToggle[data-chart-toggle]:focus-visible {
  border-color: var(--chart-toggle-color, var(--chart-purple));
  background: color-mix(in srgb, var(--chart-toggle-color, var(--chart-purple)) 30%, transparent);
  color: #ffffff;
}

.chartLegend,
.chart-legend,
.compareScatterLegend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.chartLegendItem,
.chartLegend span,
.chart-legend span,
.compareScatterLegend span {
  color: var(--color-text-muted);
  font-size: var(--font-size-chart-legend);
  font-weight: var(--font-weight-label);
  letter-spacing: 0;
  line-height: var(--line-height-compact);
  text-transform: none;
}

.legendSwatch,
.compareScatterLegend span::before,
.chartLegend span::before {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.svgChart .chart-axis-title,
.svgChart .chartAxisLabel {
  fill: var(--chart-axis);
  font-size: 3px;
  font-weight: var(--font-weight-label);
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.svgChart .chart-axis-tick,
.svgChart .chartTickLabel {
  fill: var(--chart-axis);
  font-size: 2.75px;
  font-weight: var(--font-weight-body);
  letter-spacing: 0;
  line-height: 1;
}

.compareScatterSvg .chart-axis-title,
.compareScatterSvg .chartAxisLabel,
.compareScatterCard .compareScatterAxisLabel {
  display: block;
  fill: var(--chart-axis);
  font-size: var(--font-size-chart-axis-title);
  font-weight: var(--font-weight-label);
  letter-spacing: 0;
  text-transform: none;
}

.compareScatterSvg .chart-axis-tick,
.compareScatterSvg .chartTickLabel,
.compareScatterCard .chartTickLabel {
  fill: var(--chart-axis);
  font-size: var(--font-size-chart-axis-tick);
  font-weight: var(--font-weight-body);
  letter-spacing: 0;
}

.compareScatterPoint text {
  fill: var(--color-text-strong);
  font-size: var(--font-size-chart-legend);
  font-weight: var(--font-weight-title);
  letter-spacing: 0;
}

.kpi-label,
.kpis span,
.metric span,
.marketStatCard span,
.quantCard span {
  color: var(--color-text-muted);
  font-size: var(--font-size-kpi-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--letter-spacing-label);
  line-height: var(--line-height-compact);
  text-transform: none;
}

.kpi-value,
.kpis strong,
.metric strong,
.marketStatCard strong,
.quantCard strong {
  color: var(--color-text-strong);
  font-size: var(--font-size-kpi-value);
  font-weight: var(--font-weight-title);
  letter-spacing: 0;
  line-height: 1;
}

.kpi-subtitle,
.metric p,
.quantCard p {
  color: var(--color-text-muted);
  font-size: var(--font-size-helper);
  font-weight: var(--font-weight-subtitle);
  line-height: var(--line-height-compact);
}

.table-header-label,
th,
thead th {
  color: var(--color-text-muted);
  font-size: var(--font-size-table-header);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--letter-spacing-label);
  line-height: var(--line-height-compact);
  text-transform: none;
}

table,
tbody td {
  font-size: var(--font-size-table-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-compact);
}

.eyebrow-label,
.settingBlock label,
.filters label,
.assistantControls label,
.compareControls label,
.marketControls label,
.playersToolbar label,
.badge,
.pill,
.tag,
.valueFlag,
.statusPill {
  font-size: var(--font-size-kpi-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--letter-spacing-label);
  line-height: var(--line-height-compact);
  text-transform: none;
}

.chartTooltip,
.chartTooltipCard {
  font-size: var(--font-size-helper);
  line-height: var(--line-height-compact);
}

.chartTooltipTitle,
.chartTooltipCard > strong {
  color: #ffffff;
  font-size: var(--font-size-chart-title);
  font-weight: var(--font-weight-title);
  letter-spacing: 0;
  line-height: var(--line-height-title);
}

.chartTooltipRow {
  color: #aebed2;
  font-size: var(--font-size-helper);
  font-weight: var(--font-weight-body);
  letter-spacing: 0;
  line-height: var(--line-height-compact);
}

.chartTooltipCard p {
  color: #c6d3e3;
  font-size: var(--font-size-helper);
  font-weight: var(--font-weight-subtitle);
  letter-spacing: 0;
  line-height: var(--line-height-body);
}

.compareChartGrid .chartFrame {
  grid-template-rows: auto minmax(330px, 1fr) auto;
}

.compareChartGrid .chartHeader,
.chartFrame .chartHeader {
  min-height: 58px;
}

.compareControls label:nth-child(1),
.compareControls label:nth-child(2) {
  grid-column: span 3;
}

.compareControls .comparePlayerSelect {
  grid-column: span 3;
}

@media (max-width: 900px) {
  .compareControls {
    grid-template-columns: 1fr;
  }

  .compareControls label,
  .compareControls .comparePlayerSelect {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  :root {
    --font-size-page-title: 1.25rem;
    --font-size-section-title: 1rem;
    --font-size-card-title: 0.875rem;
    --font-size-kpi-value: 1.35rem;
  }

  .chartHeader,
  .chartFrame .chartHeader,
  .compareChartGrid .chartHeader {
    min-height: auto;
  }
}

/* Compare controls final layout override
   Row 1: Position | Age range
   Row 2: Player A | Player A search
   Row 3: Player B | Player B search
*/
@media (min-width: 901px) {
  .compareControls {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: end !important;
  }

  .compareControls label {
    min-width: 0;
  }

  .compareControls label:has(#comparePosition) {
    grid-column: 1 / 7 !important;
    grid-row: 1 !important;
  }

  .compareControls label:has(#compareAgeRange) {
    grid-column: 7 / 13 !important;
    grid-row: 1 !important;
  }

  .compareControls label:has(#compareA) {
    grid-column: 1 / 7 !important;
    grid-row: 2 !important;
  }

  .compareControls label:has(#compareASearch) {
    grid-column: 7 / 13 !important;
    grid-row: 2 !important;
  }

  .compareControls label:has(#compareB) {
    grid-column: 1 / 7 !important;
    grid-row: 3 !important;
  }

  .compareControls label:has(#compareBSearch) {
    grid-column: 7 / 13 !important;
    grid-row: 3 !important;
  }

  .compareControls input,
  .compareControls select {
    width: 100%;
    min-height: 42px;
  }
}

@media (max-width: 900px) {
  .compareControls {
    grid-template-columns: 1fr !important;
  }

  .compareControls label {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

.playerDetailBackBar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  padding: 10px 14px 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.72));
}

.playerDetailBackBar button {
  min-height: 34px;
  border: 1px solid rgba(147, 197, 253, 0.34);
  border-radius: 999px;
  padding: 0 13px;
  background: rgba(96, 165, 250, 0.12);
  color: #dbeafe;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.playerDetailBackBar button:hover {
  border-color: rgba(147, 197, 253, 0.74);
  background: rgba(96, 165, 250, 0.2);
}

.rosterSlot {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.rosterSlot:hover,
.rosterSlot:focus-visible {
  border-color: rgba(147, 197, 253, 0.62);
  background: rgba(96, 165, 250, 0.13);
  transform: translateY(-1px);
}

.rosterSlotInsight {
  display: grid;
  gap: 14px;
}

.rosterSlotInsightSummary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rosterSlotInsightSummary div {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  padding: 12px;
  background: rgba(15, 27, 45, 0.86);
}

.rosterSlotInsightSummary span {
  display: block;
  color: #8fa2bb;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.rosterSlotInsightSummary strong {
  display: block;
  margin-top: 4px;
  color: #f8fbff;
  font-size: 22px;
}

.rosterSlotInsightList {
  display: grid;
  gap: 8px;
}

.rosterSlotInsightItem {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  padding: 10px 11px;
  background: rgba(15, 27, 45, 0.88);
}

.rosterSlotInsightItem strong {
  display: block;
  color: #f8fbff;
  font-size: 13px;
}

.rosterSlotInsightItem span {
  display: block;
  margin-top: 3px;
  color: #9aa9bd;
  font-size: 11px;
}

.rosterSlotInsightItem button {
  min-height: 30px;
  border: 1px solid rgba(147, 197, 253, 0.34);
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(96, 165, 250, 0.1);
  color: #dbeafe;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.rosterSlotInsightItem button:hover {
  border-color: rgba(147, 197, 253, 0.72);
  background: rgba(96, 165, 250, 0.18);
}

.marketStatCard {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 118px;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  padding: 12px;
  background: rgba(15, 27, 45, 0.78);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.marketStatCard:hover,
.marketStatCard:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(147, 197, 253, 0.58);
  background: rgba(30, 45, 70, 0.88);
  outline: none;
}

.marketStatCard span {
  color: #9fb0c6;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.marketStatCard strong {
  color: #f8fbff;
  font-size: 22px;
  line-height: 1;
}

.marketStatCard p {
  margin: 0;
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.3;
}

.marketStatCard em {
  display: block;
  color: #8fa2bb;
  font-size: 10.5px;
  font-style: normal;
  line-height: 1.35;
}

.marketStatCard small {
  margin-top: auto;
  color: #93c5fd;
  font-size: 10px;
  font-weight: 850;
}

.marketStatCard.good {
  border-color: rgba(52, 211, 153, 0.26);
  background: rgba(20, 83, 45, 0.18);
}

.marketStatCard.bad {
  border-color: rgba(251, 113, 133, 0.28);
  background: rgba(127, 29, 29, 0.18);
}

.marketStatCard.warn {
  border-color: rgba(251, 191, 36, 0.30);
  background: rgba(113, 63, 18, 0.18);
}

.marketSummaryInsight {
  display: grid;
  gap: 14px;
}

.marketSummaryInsightGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.marketSummaryInsightGrid div {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  padding: 12px;
  background: rgba(15, 27, 45, 0.86);
}

.marketSummaryInsightGrid span {
  display: block;
  color: #8fa2bb;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.marketSummaryInsightGrid strong {
  display: block;
  margin-top: 4px;
  color: #f8fbff;
  font-size: 24px;
}

.marketSummaryInsightGrid em {
  display: block;
  margin-top: 3px;
  color: #9aa9bd;
  font-size: 11px;
  font-style: normal;
}

.marketSummaryPlayerList {
  display: grid;
  gap: 8px;
}

.marketSummaryPlayerList button {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  padding: 10px 11px;
  background: rgba(15, 27, 45, 0.88);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}

.marketSummaryPlayerList button:hover {
  border-color: rgba(147, 197, 253, 0.58);
  background: rgba(30, 45, 70, 0.88);
}

.marketSummaryPlayerList strong {
  color: #f8fbff;
  font-size: 13px;
}

.marketSummaryPlayerList span {
  color: #9aa9bd;
  font-size: 11px;
}

.dataSyncPanel,
.draftQaChecklist {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  padding: 12px;
  background: rgba(10, 22, 38, 0.78);
}

.syncPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.syncPanelHeader strong,
.draftQaChecklist summary {
  color: #f8fbff;
  font-size: 13px;
  font-weight: 900;
}

.syncPanelHeader span,
.draftQaChecklist summary span {
  color: #34d399;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.syncMetricGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.syncMetricGrid div {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  padding: 8px;
  background: rgba(15, 27, 45, 0.72);
}

.syncMetricGrid span,
.draftQaChecklist em {
  display: block;
  color: #8fa2bb;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.syncMetricGrid strong {
  display: block;
  margin-top: 3px;
  color: #f8fbff;
  font-size: 13px;
}

.draftQaChecklist details {
  display: grid;
  gap: 10px;
}

.draftQaChecklist summary {
  cursor: pointer;
}

.draftQaChecklist ul,
.assistantDecisionQuality ul {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.draftQaChecklist li {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  padding: 8px;
  background: rgba(15, 27, 45, 0.62);
}

.draftQaChecklist li span {
  color: #34d399;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.draftQaChecklist li.review span {
  color: #fbbf24;
}

.draftQaChecklist li strong {
  color: #f8fbff;
  font-size: 12px;
}

.assistantDecisionQuality {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.assistantDecisionQuality div {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  padding: 10px;
  background: rgba(15, 27, 45, 0.78);
}

.assistantDecisionQuality h4 {
  margin: 0 0 6px;
  color: #f8fbff;
  font-size: 12px;
}

.assistantDecisionQuality p,
.assistantDecisionQuality li {
  color: #b8c7da;
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .syncMetricGrid,
  .assistantDecisionQuality {
    grid-template-columns: 1fr;
  }

  .draftQaChecklist li {
    grid-template-columns: 1fr;
  }
}

/* Draft History: season/manager controls */
.draftHistoryControls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.draftHistoryControls .inlineSelect {
  min-width: 210px;
}

.draftHistoryControls .segmentedControl {
  margin-left: auto;
}

@media (max-width: 800px) {
  .draftHistoryControls {
    align-items: stretch;
  }

  .draftHistoryControls .inlineSelect,
  .draftHistoryControls .segmentedControl {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
}

/* Players: universe board headers and sortable metric clarity */
.playerColumnHeader {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 4px 2px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.playerColumnHeader h3 {
  margin: 0;
}

.playerColumnHeader span {
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: 760;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.playerListHeader,
.playerListItem {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 60px 58px;
  gap: 8px;
  align-items: center;
}

.playersPlayerIdentity,
.playersTeamIdentity {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 5px;
}

.playersPlayerIdentity {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.playersPlayerIdentity .playerHeadshot-tiny,
.playersTeamIdentity .teamLogo-micro {
  flex: 0 0 auto;
}

.playersTeamIdentity {
  white-space: nowrap;
}

.playerListHeader {
  min-height: 24px;
  padding: 6px 4px;
  color: var(--color-text-muted);
  font-size: 0.625rem;
  font-weight: 820;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.playerListHeader strong,
.playerListHeader em,
.playerListHeader b {
  color: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
}

.playerListItem span,
.playerListHeader span {
  text-align: left;
}

.playerListItem em,
.playerListHeader em {
  text-align: left;
}

.playerListItem b,
.playerListHeader b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Player detail: metric comparable tables */
.metricComparableTable table {
  min-width: 1120px;
}

.metricComparableTable .selectedComparableRow td {
  background: rgba(96, 165, 250, 0.16);
}

.metricComparableTable .selectedComparableRow strong {
  color: #bfdbfe;
}

.sourceRankTable table {
  min-width: 520px;
}

/* Player Detail: clickable advanced metric cards */
.detailMetricButton {
  width: 100%;
  min-height: 104px;
  border: 1px solid rgba(96, 165, 250, 0.20);
  border-radius: 8px;
  padding: 10px 11px;
  background: rgba(15, 27, 45, 0.84);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 20px rgba(2, 6, 23, 0.18);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.detailMetricButton span,
.detailMetricButton strong,
.detailMetricButton small,
.detailMetricButton em {
  display: block;
}

.detailMetricButton span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.detailMetricButton strong {
  margin-top: 4px;
  color: #f8fafc;
  font-size: 17px;
  line-height: 1.15;
}

.detailMetricButton small {
  margin-top: 6px;
  color: #aab8cb;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.detailMetricButton em {
  margin-top: 7px;
  color: #93c5fd;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.detailMetricButton:hover,
.detailMetricButton:focus-visible {
  border-color: rgba(96, 165, 250, 0.65);
  background: rgba(17, 42, 73, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(96, 165, 250, 0.16), 0 12px 26px rgba(2, 6, 23, 0.22);
  transform: translateY(-1px);
  outline: none;
}

@media (max-width: 760px) {
  .contributionSummaryGrid,
  .contributionReadGrid {
    grid-template-columns: 1fr;
  }
}

/* Keep primary navigation reachable when a detail drawer is open. */
.topbar,
.tabs {
  z-index: 130;
}

/* Player Detail drawer should start below the nav, not underneath it */
.playerDrawer {
  top: 64px;
  padding-top: 22px;
  max-height: calc(100vh - 80px);
}

.playerDrawerClose {
  position: sticky;
  top: 16px;
  z-index: 25;
  margin-left: auto;
  margin-right: 8px;
  margin-bottom: 22px;
  display: flex;
  width: fit-content;
}

#playerDrawerContent {
  padding-top: 4px;
}

.playerDetailPopup {
  padding-top: 4px;
}

/* When the full player drawer is open, keep the primary page tabs fixed below
   the topbar and start the drawer below both bars so its enlarged headshot
   cannot be covered by navigation while the detail content scrolls. */
body.playerDetailOpen .tabs {
  position: fixed;
  top: 74px;
  left: 0;
  right: 0;
  z-index: 130;
}
body.playerDetailOpen .playerDrawer {
  top: 122px;
  max-height: calc(100vh - 138px);
}

.popupSectionHeader {
  padding-top: 8px;
}

.popupSectionHeader h2 {
  line-height: 1.08;
  word-break: break-word;
}

/* =========================================================
   Player Detail: Workbook Stat Trend Cards
   Replaces static workbook stat cards with line-chart cards
   ========================================================= */

.workbookTrendSection {
  display: grid;
  gap: 14px;
}

.workbookTrendSectionHeader {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.workbookTrendSectionHeader h4 {
  margin: 0;
}

.workbookTrendSectionHeader p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.workbookTrendSectionHeader > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 30px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.10);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 950;
}

.workbookTrendGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.workbookTrendCard {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(96, 165, 250, 0.20);
  border-radius: 14px;
  padding: 13px;
  background: rgba(11, 18, 32, 0.78);
  box-shadow: var(--shadow-soft);
}

.workbookTrendHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.workbookTrendHeader span {
  display: block;
  color: #93c5fd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workbookTrendHeader strong {
  display: block;
  margin-top: 3px;
  color: #f8fafc;
  font-size: 14px;
}

.workbookTrendHeader b {
  color: #f8fafc;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.workbookTrendCard .chartFrame {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.52);
  box-shadow: none;
}

.workbookTrendCard .chartControls {
  padding: 6px 8px 0;
}

.workbookTrendCard .chartBody {
  padding: 6px 8px 8px;
}

.workbookTrendCard .svgChart {
  min-height: 132px;
}

.workbookTrendCard .chartLabels {
  margin-top: 4px;
  font-size: 9.5px;
}

.workbookTrendStats,
.workbookTrendBenchmarks {
  display: grid;
  gap: 7px;
}

.workbookTrendStats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workbookTrendBenchmarks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workbookTrendStats div,
.workbookTrendBenchmarks div {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  padding: 8px;
  background: rgba(15, 23, 42, 0.62);
}

.workbookTrendStats span,
.workbookTrendBenchmarks span {
  display: block;
  color: #94a3b8;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.workbookTrendStats strong,
.workbookTrendBenchmarks strong {
  display: block;
  margin-top: 3px;
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.workbookTrendCard p {
  color: #aab8cb;
  font-size: 11.5px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .workbookTrendGrid {
    grid-template-columns: 1fr;
  }

  .workbookTrendStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   Player Detail: Workbook Stat Trend Cards v2
   - collapsible section
   - no top-right stat
   - actual / trend / mean / std band / position avg / top-10 position avg
   ========================================================= */

.workbookTrendSection {
  display: grid;
  gap: 14px;
}

.workbookTrendSection[open] {
  padding-bottom: 14px;
}

.workbookTrendSectionHeader {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  cursor: pointer;
  list-style: none;
}

.workbookTrendSectionHeader::-webkit-details-marker {
  display: none;
}

.workbookTrendSectionHeader::before {
  content: "▾";
  margin-top: 1px;
  color: #93c5fd;
  font-size: 12px;
  font-weight: 900;
}

.workbookTrendSection:not([open]) .workbookTrendSectionHeader::before {
  content: "▸";
}

.workbookTrendSectionHeader h4 {
  margin: 0;
}

.workbookTrendSectionHeader p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.workbookTrendGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.workbookTrendCard {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(96, 165, 250, 0.20);
  border-radius: 14px;
  padding: 13px;
  background: rgba(11, 18, 32, 0.78);
  box-shadow: var(--shadow-soft);
}

.workbookTrendHeader {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  align-items: start;
}

.workbookTrendHeader span {
  display: block;
  color: #93c5fd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workbookTrendHeader strong {
  display: block;
  margin-top: 3px;
  color: #f8fafc;
  font-size: 14px;
}

.workbookTrendHeader b {
  display: none;
}

.workbookBenchmarkChart {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.52);
  box-shadow: none;
}

.workbookBenchmarkChart .chartControls {
  padding: 8px 13px 0;
}

.workbookBenchmarkChart .chartBody {
  padding: 8px 12px 10px;
}

.workbookBenchmarkChart .svgChart {
  height: 120px;
  min-height: 120px;
}

.workbookTrendStats,
.workbookTrendBenchmarks {
  display: grid;
  gap: 7px;
}

.workbookTrendStats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workbookTrendBenchmarks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workbookTrendStats div,
.workbookTrendBenchmarks div {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  padding: 8px;
  background: rgba(15, 23, 42, 0.62);
}

.workbookTrendStats span,
.workbookTrendBenchmarks span {
  display: block;
  color: #94a3b8;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.workbookTrendStats strong,
.workbookTrendBenchmarks strong {
  display: block;
  margin-top: 3px;
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.workbookTrendCard p {
  color: #aab8cb;
  font-size: 11.5px;
  line-height: 1.45;
}

.chartTop10Line {
  stroke: #34d399;
  stroke-width: 1.35;
  stroke-dasharray: 1 2;
  opacity: 0.9;
}

.workbookBenchmarkChart .chartTrendLine {
  stroke: #fbbf24;
  stroke-width: 1.35;
  stroke-dasharray: 3 3;
  opacity: 0.95;
}

.workbookBenchmarkChart .chartMeanLine {
  stroke: rgba(238, 244, 255, 0.58);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.workbookBenchmarkChart .chartStdBand {
  fill: rgba(248, 113, 113, 0.16);
}

@media (max-width: 980px) {
  .workbookTrendGrid {
    grid-template-columns: 1fr;
  }

  .workbookTrendStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   Player Detail: Player Stats chart cleanup v3
   ========================================================= */

.workbookTrendSection {
  display: block;
  padding: 0;
  overflow: hidden;
}

.workbookTrendSection[open] {
  padding-bottom: 14px;
}

.workbookTrendSectionSummary,
.detailSectionSummary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-strong, #f8fafc);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.workbookTrendSectionSummary::-webkit-details-marker,
.detailSectionSummary::-webkit-details-marker {
  display: none;
}

.workbookTrendSectionSummary::before,
.detailSectionSummary::before {
  content: "▾";
  color: #93c5fd;
  font-size: 11px;
  font-weight: 900;
}

.workbookTrendSection:not([open]) .workbookTrendSectionSummary::before,
details:not([open]) > .detailSectionSummary::before {
  content: "▸";
}

.workbookTrendGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.workbookTrendCard {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(96, 165, 250, 0.20);
  border-radius: 14px;
  padding: 13px;
  background: rgba(11, 18, 32, 0.78);
  box-shadow: var(--shadow-soft);
}

.workbookTrendHeader {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  align-items: start;
}

.workbookTrendHeader span {
  display: block;
  color: #93c5fd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workbookTrendHeader strong {
  display: block;
  margin-top: 3px;
  color: #f8fafc;
  font-size: 14px;
}

.workbookTrendHeader b {
  display: none !important;
}

.workbookBenchmarkChart {
  padding: 0;
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.52);
  box-shadow: none;
}

.workbookChartControls {
  padding: 10px 12px 0;
}

.workbookChartBody {
  padding: 8px 12px 12px;
}

.workbookSvgChart {
  width: 100%;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  overflow: visible;
}

.workbookAxisTick,
.workbookBenchmarkChart .chartTickLabel,
.workbookBenchmarkChart .chart-axis-tick {
  fill: var(--chart-axis);
  font-size: var(--font-size-chart-axis-tick);
  font-weight: var(--font-weight-label);
  letter-spacing: 0;
}

.workbookBenchmarkChart .chartGridLine {
  stroke: rgba(148, 163, 184, 0.14);
  stroke-width: 0.7;
}

.workbookBenchmarkChart .chartActualLine {
  stroke: #7c5cff;
  stroke-width: 2.25;
}

.workbookBenchmarkChart .chartTrendLine {
  stroke: #34d399;
  stroke-width: 1.45;
  stroke-dasharray: 5 4;
  opacity: 0.95;
}

.workbookBenchmarkChart .chartMeanLine {
  stroke: #fbbf24;
  stroke-width: 1.25;
  stroke-dasharray: 6 6;
  opacity: 0.95;
}

.workbookBenchmarkChart .chartStdBand {
  fill: rgba(248, 113, 113, 0.16);
}

.workbookBenchmarkChart .chartPositionAvgLine {
  stroke: #38bdf8;
  stroke-width: 1.55;
  stroke-dasharray: 4 4;
  opacity: 0.95;
}

.workbookBenchmarkChart .chartTop10Line,
.chartTop10Line {
  stroke: #38bdf8;
  stroke-width: 1.55;
  stroke-dasharray: 4 4;
  opacity: 0.95;
}

.workbookBenchmarkChart .chartPoint {
  fill: #60a5fa;
  stroke: #0f172a;
  stroke-width: 1;
}

.workbookTrendStats,
.workbookTrendBenchmarks {
  display: grid;
  gap: 7px;
}

.workbookTrendStats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workbookTrendBenchmarks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workbookTrendStats div,
.workbookTrendBenchmarks div {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  padding: 8px;
  background: rgba(15, 23, 42, 0.62);
}

.workbookTrendStats span,
.workbookTrendBenchmarks span {
  display: block;
  color: #94a3b8;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.workbookTrendStats strong,
.workbookTrendBenchmarks strong {
  display: block;
  margin-top: 3px;
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.workbookTrendCard p {
  color: #aab8cb;
  font-size: 11.5px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .workbookTrendGrid {
    grid-template-columns: 1fr;
  }

  .workbookTrendStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Player Stats should use the exact same accordion shell as Advanced Player Detail */
.workbookStatsSection > .workbookTrendGrid {
  margin-top: 14px;
  padding: 0;
}

/* =========================================================
   Final Player Detail Polish
   Fixes drawer/header collision and centers Draft Read badge
   ========================================================= */

.playerDrawer {
  top: 64px;
  bottom: 16px;
  padding: 22px 18px 18px;
  max-height: calc(100vh - 80px);
}

#playerDrawerContent {
  padding-top: 2px;
}

.playerDrawerClose {
  position: sticky;
  top: 0;
  z-index: 25;
  margin-left: auto;
  margin-bottom: 14px;
  display: flex;
  width: fit-content;
}

.popupSectionHeader {
  align-items: flex-start;
  padding-top: 8px;
}

.popupSectionHeader h2 {
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.draftReadBadge {
  min-width: 170px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 18px;
  text-align: center;
}

.draftReadBadge span,
.draftReadBadge strong {
  width: 100%;
  text-align: center;
}

@media (max-width: 900px) {
  .playerDrawer {
    top: 58px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-height: calc(100vh - 68px);
  }

  .draftReadBadge {
    width: 100%;
    min-width: 0;
  }
}

/* Final close button positioning for Player Detail drawer */
.playerDrawer .playerDrawerClose {
  position: sticky;
  top: 18px;
  z-index: 40;
  margin-left: auto;
  margin-right: 10px;
  margin-bottom: 24px;
  transform: translateY(10px);
}

/* The topbar/tabs are intentionally kept above the drawer (z-index 130,
   see "Keep primary navigation reachable" above) so nav stays clickable
   while a drawer is open. That means this button, stuck near the top of
   the drawer's own scroll box, was rendering mostly underneath the tabs
   bar with only a sliver visible. Push it down to clear both sticky bars
   instead of touching z-index (which would fight that intentional
   layering everywhere else the drawer is open). */
.playerDrawer .playerDrawerClose {
  top: 68px;
  transform: none;
}

/* Keep the sub-tab bar reachable regardless of how tall the analysis
   content above it is -- same sticky-in-scroll-box technique as
   .playerDrawerClose above. Scoped to .playerDrawer .playerSubTabs only,
   since .playerSubTabs/.playerYearTabs share base rules elsewhere and
   .playerYearTabs (season-year picker) should NOT become sticky. */
.playerDrawer .playerSubTabs {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #0B1220;
  padding: 10px 0;
}

/* Insight/Draft Grade drawer: one intentional close control, aligned with the drawer content. */
.detailInsightDrawer .playerDrawerClose {
  position: sticky;
  top: 68px;
  z-index: 45;
  margin: 0 0 18px auto;
  transform: none;
}

.detailInsightDrawer #detailInsightContent {
  padding-top: 0;
}

/* =========================================================
   Assistant recommendation next/previous controls
   ========================================================= */

.assistantRecommendationNav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: rgba(11, 18, 32, 0.72);
}

.assistantRecommendationNav span {
  display: block;
  color: var(--color-text-muted, #94a3b8);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.assistantRecommendationNav strong {
  display: block;
  margin-top: 3px;
  color: var(--color-text-strong, #f8fafc);
  font-size: 15px;
}

.assistantNextControls {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.assistantNextControls button {
  min-height: 34px;
  border: 1px solid rgba(147, 197, 253, 0.34);
  border-radius: 999px;
  padding: 7px 13px;
  background: rgba(79, 140, 255, 0.14);
  color: var(--color-text-strong, #f8fafc);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.assistantNextControls button:hover:not(:disabled) {
  border-color: rgba(147, 197, 253, 0.7);
  background: rgba(79, 140, 255, 0.24);
}

.assistantNextControls button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.assistantActiveRow td {
  background: rgba(96, 165, 250, 0.16) !important;
}

.assistantActiveRow td:first-child {
  color: #bfdbfe;
  font-weight: 900;
}

@media (max-width: 700px) {
  .assistantRecommendationNav {
    align-items: stretch;
    flex-direction: column;
  }

  .assistantNextControls {
    width: 100%;
  }

  .assistantNextControls button {
    flex: 1;
  }
}

/* =========================================================
   Roster Construction Detail Buttons + Player List
   ========================================================= */

.rosterConstructionTotals {
  align-items: center;
}

.rosterConstructionTotals .rosterFocusButton {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 6px;
  align-items: center;
  min-height: 28px;
  border: 1px solid rgba(147, 197, 253, 0.24);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(96, 165, 250, 0.08);
  color: #dbeafe;
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}

.rosterConstructionTotals .rosterFocusButton span {
  margin: 0;
  color: #93a7c0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.rosterConstructionTotals .rosterFocusButton strong {
  color: #f8fbff;
  font-size: 11px;
}

.rosterConstructionTotals .rosterFocusButton:hover,
.rosterConstructionTotals .rosterFocusButton.active {
  border-color: rgba(52, 211, 153, 0.52);
  background: rgba(52, 211, 153, 0.12);
}

.rosterFocusPanel {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  border: 1px solid rgba(147, 197, 253, 0.18);
  border-radius: 12px;
  padding: 12px;
  background: rgba(8, 17, 31, 0.54);
}

.rosterFocusHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.rosterFocusHeader strong {
  display: block;
  color: #f8fbff;
  font-size: 13px;
}

.rosterFocusHeader span {
  display: block;
  margin-top: 3px;
  color: #93a7c0;
  font-size: 11px;
  line-height: 1.35;
}

.rosterFocusMetrics {
  display: grid;
  grid-template-columns: repeat(8, minmax(86px, 1fr));
  gap: 7px;
}

.rosterFocusMetric {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  padding: 8px 9px;
  background: rgba(15, 27, 45, 0.74);
}

.rosterFocusMetric span {
  display: block;
  color: #8fa2bb;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.rosterFocusMetric strong {
  display: block;
  margin-top: 4px;
  color: #f8fbff;
  font-size: 15px;
}

.rosterFocusMetric em {
  display: block;
  margin-top: 2px;
  color: #7f91a8;
  font-size: 10px;
  font-style: normal;
}

.rosterFocusFit {
  border: 1px solid rgba(96, 165, 250, 0.14);
  border-radius: 10px;
  padding: 9px 10px;
  background: rgba(96, 165, 250, 0.06);
}

.rosterFocusFit strong {
  display: block;
  color: #f8fbff;
  font-size: 11px;
}

.rosterFocusFit p {
  margin-top: 3px;
  color: #cbd5e1;
  font-size: 11px;
}

.rosterFocusList {
  display: grid;
  gap: 8px;
}

.rosterFocusPlayer {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(240px, 1.15fr) minmax(260px, 1.45fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  padding: 10px 11px;
  background: rgba(15, 27, 45, 0.74);
}

.rosterFocusPlayerMain strong {
  display: block;
  color: #f8fbff;
  font-size: 13px;
}

.rosterFocusPlayerMain span {
  display: block;
  margin-top: 3px;
  color: #93a7c0;
  font-size: 10.5px;
}

.rosterFocusPlayerStats {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.rosterFocusPlayerStats span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid rgba(147, 197, 253, 0.18);
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(96, 165, 250, 0.08);
  color: #dbeafe;
  font-size: 10px;
  font-weight: 850;
}

.rosterFocusPlayer p {
  margin: 0;
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.35;
}

.rosterFocusPlayer button {
  min-height: 30px;
  border: 1px solid rgba(147, 197, 253, 0.34);
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(96, 165, 250, 0.1);
  color: #dbeafe;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.rosterFocusPlayer button:hover {
  border-color: rgba(147, 197, 253, 0.72);
  background: rgba(96, 165, 250, 0.18);
}

.draftNightMode .rosterFocusPanel {
  display: none;
}

@media (max-width: 1200px) {
  .rosterFocusMetrics {
    grid-template-columns: repeat(4, minmax(86px, 1fr));
  }

  .rosterFocusPlayer {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 700px) {
  .rosterConstructionHeader {
    flex-direction: column;
  }

  .rosterConstructionTotals {
    justify-content: flex-start;
  }

  .rosterFocusMetrics {
    grid-template-columns: repeat(2, minmax(86px, 1fr));
  }
}

/* =========================================================
   Assistant: Decision Summary Lane Polish
   Fixes grey player blocks + improves spacing/readability
   ========================================================= */

#assistantView .assistantDecisionSummary {
  margin: 0 0 14px;
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 14px;
  padding: 14px 16px;
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(20, 45, 78, 0.92), rgba(10, 24, 43, 0.94));
  box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.08);
}

#assistantView .assistantDecisionSummary span {
  color: #93c5fd;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

#assistantView .assistantDecisionSummary strong {
  margin-top: 7px;
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.45;
}

#assistantView .assistantDecisionLanes {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

#assistantView .assistantDecisionLanes article {
  position: relative;
  overflow: hidden;
  align-content: start;
  min-height: 172px;
  padding: 13px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(16, 39, 70, 0.96), rgba(8, 21, 39, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(147, 197, 253, 0.08),
    0 12px 26px rgba(2, 6, 23, 0.20);
}

#assistantView .assistantDecisionLanes article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: rgba(96, 165, 250, 0.72);
}

#assistantView .assistantDecisionLanes article.active {
  border-color: rgba(147, 197, 253, 0.56);
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.20), transparent 42%),
    linear-gradient(180deg, rgba(22, 55, 96, 0.98), rgba(9, 28, 53, 0.98));
}

#assistantView .assistantDecisionLanes article:nth-child(1)::before {
  background: #60a5fa;
}

#assistantView .assistantDecisionLanes article:nth-child(2)::before {
  background: #34d399;
}

#assistantView .assistantDecisionLanes article:nth-child(3)::before {
  background: #a7f3d0;
}

#assistantView .assistantDecisionLanes article:nth-child(4)::before {
  background: #fbbf24;
}

#assistantView .assistantDecisionLanes article:nth-child(5)::before {
  background: #c084fc;
}

#assistantView .assistantDecisionLanes span {
  color: #93c5fd;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#assistantView .assistantDecisionLanes button {
  display: grid;
  gap: 4px;
  width: 100%;
  margin-top: 7px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 11px;
  padding: 10px 11px;
  background:
    linear-gradient(180deg, rgba(15, 34, 61, 0.98), rgba(9, 23, 42, 0.98));
  color: inherit;
  box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.06);
  cursor: pointer;
  text-align: left;
}

#assistantView .assistantDecisionLanes button:hover,
#assistantView .assistantDecisionLanes button:focus-visible {
  border-color: rgba(147, 197, 253, 0.54);
  background:
    linear-gradient(180deg, rgba(28, 67, 114, 0.98), rgba(12, 36, 66, 0.98));
  transform: translateY(-1px);
}

#assistantView .assistantDecisionLanes button strong {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}

#assistantView .assistantDecisionLanes button em {
  color: #93c5fd;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.25;
}

#assistantView .assistantDecisionLanes p {
  margin-top: 2px;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.45;
}

#assistantView .assistantDecisionLanes button:disabled {
  opacity: 0.72;
  cursor: default;
}

@media (max-width: 1200px) {
  #assistantView .assistantDecisionLanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  #assistantView .assistantDecisionLanes {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   League History: Weekly Points Comparison
   ========================================================= */

.compareRecent {
  margin-top: 16px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 14px;
  padding: 14px;
  background: rgba(8, 17, 31, 0.54);
}

.weeklyScoreGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.weeklyScoreCard {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  padding: 12px;
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.10), transparent 42%),
    rgba(11, 18, 32, 0.82);
}

.weeklyScoreHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.weeklyScoreHeader span {
  display: block;
  color: #93c5fd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.weeklyScoreHeader strong {
  display: block;
  margin-top: 3px;
  color: #f8fafc;
  font-size: 14px;
}

.weeklyScoreHeader em {
  color: #94a3b8;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.weeklyScoreCard .chartFrame,
.weeklyScoreCard .chartCard {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.44);
  box-shadow: none;
}

.weeklyScoreCard .svgChart {
  height: 130px;
  min-height: 130px;
}

.weeklyScoreCard .chartLabels {
  margin-top: 4px;
  font-size: 9.5px;
}

@media (max-width: 900px) {
  .weeklyScoreGrid {
    grid-template-columns: 1fr;
  }

  .weeklyScoreHeader {
    display: grid;
  }

  .weeklyScoreHeader em {
    white-space: normal;
  }
}

.wrappedTransactions {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.transactionSummaryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
}

.transactionStatusSummary {
  margin-top: 10px;
}

.transactionFilters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 10px;
  align-items: end;
}

.transactionFilters label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.transactionFilters select,
.transactionFilters input[type="search"] {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 9px 10px;
  background: rgba(8, 17, 31, 0.72);
  color: #e5e7eb;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.transactionToggle {
  grid-template-columns: auto 1fr;
  align-items: center;
  align-self: stretch;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  padding: 9px 10px;
  background: rgba(8, 17, 31, 0.42);
}

.transactionToggle input {
  margin: 0;
}

.transactionClear {
  min-height: 38px;
}

.transactionSummaryGrid article {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  padding: 12px;
  background: rgba(8, 17, 31, 0.48);
}

.transactionSummaryGrid span {
  display: block;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.transactionSummaryGrid strong {
  display: block;
  margin-top: 5px;
  color: #f8fafc;
  font-size: 22px;
}

.transactionHelp {
  color: #9fb0c5;
  font-size: 12px;
  line-height: 1.45;
}

.transactionList {
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.transactionRow {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 13px;
  padding: 12px;
  background: rgba(8, 17, 31, 0.58);
}

.transactionRow.good {
  border-color: rgba(52, 211, 153, 0.28);
}

.transactionRow.warn {
  border-color: rgba(251, 191, 36, 0.26);
}

.transactionRow.bad {
  border-color: rgba(251, 113, 133, 0.28);
}

.transactionRow.neutral {
  border-color: rgba(148, 163, 184, 0.18);
}

.transactionDiagnostics {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(8, 17, 31, 0.42);
}

.transactionDiagnostics summary {
  cursor: pointer;
  padding: 10px 12px;
  color: #dbeafe;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.transactionDiagnostics div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
}

.transactionDiagnostics span {
  min-width: 0;
  color: #9fb0c5;
  font-size: 11px;
  line-height: 1.35;
}

.transactionDiagnostics b {
  color: #f8fafc;
}

.transactionGrade {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 62px;
  border-radius: 12px;
  background: rgba(15, 27, 45, 0.9);
}

.transactionGrade strong {
  color: #f8fafc;
  font-size: 24px;
  line-height: 1;
}

.transactionGrade span {
  margin-top: 5px;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 850;
  text-transform: uppercase;
}

.transactionMain {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.transactionMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.transactionMeta span,
.transactionMeta em {
  color: #94a3b8;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.transactionMeta b {
  color: #f8fafc;
  font-size: 13px;
}

.transactionStatusLine {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.transactionStatusLine span {
  padding: 3px 7px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(15, 27, 45, 0.72);
  color: #b8c7da;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.transactionPlayers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.transactionPlayers > div {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  padding: 9px;
  background: rgba(15, 27, 45, 0.62);
}

.transactionPlayers span {
  display: block;
  margin-bottom: 4px;
  color: #93c5fd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.transactionPlayers strong {
  display: block;
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}

.transactionPlayerLine {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.transactionPlayerLine + .transactionPlayerLine {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.transactionPlayerLine.unresolved strong {
  color: #fca5a5;
}

.transactionPlayerLine small {
  color: #94a3b8;
  font-size: 10.5px;
  line-height: 1.35;
}

.transactionRow p {
  color: #aab8cb;
  font-size: 11.5px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .transactionSummaryGrid,
  .transactionDiagnostics div,
  .transactionPlayers {
    grid-template-columns: 1fr;
  }

  .transactionRow {
    grid-template-columns: 1fr;
  }

  .transactionGrade {
    justify-items: start;
    padding: 10px;
  }
}

/* =====================================================================
   WAR ROOM DESIGN UPGRADE  (v1, 2026-06-27)
   A focused identity layer appended last so it wins equal-specificity
   ties. Recolors via tokens above; this layer handles typography, the
   product nav, the signature On-the-Clock scouting cards, badge
   semantics, table scannability, and shared component polish.
   ===================================================================== */

/* ---- 1. Type system ------------------------------------------------ */
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3,
.panelHeader h2,
.marketHeroHeader h2,
.wrappedHero h2 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
h1#appTitle {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}
/* Eyebrows / section labels read like a terminal header */
.panelHeader span,
.marketHeroHeader > div > span,
.marketSectionHeader span,
.wrappedHero > span,
.onClockCard > span,
.tierCliffRow.header,
.kpis span {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* All quantitative readouts share the mono data face + aligned figures.
   Board number columns: 2 Board Rank, 6 Sleeper ADP, 7 Market Anchor,
   8 Model Rank. (Cols 9/13 are qualitative text and 16 is Badges — they
   were previously mono'd by a stale column map and are now excluded.) */
.kpis strong,
.onClockMetrics strong,
.weightNumber,
.boardPanel td[data-col="rank"],
.boardPanel td[data-col="adp"],
.boardPanel td[data-col="market"],
.boardPanel td[data-col="model"],
.valueCell strong,
.statScoreCell strong,
.riskCell strong,
.upsideCell strong,
.marketModelCell strong,
output#marketWeightLabel,
output#modelWeightLabel {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- 2. Topbar + product navigation -------------------------------- */
.topbar {
  background: linear-gradient(180deg, #0D1320 0%, var(--field-night) 100%);
  border-bottom: 1px solid var(--hash);
  align-items: center;
}
.topbar p#refreshText {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--chalk-muted);
}
.tabs {
  background: var(--field-night);
  border-bottom: 1px solid var(--hash);
  gap: 2px;
  padding: 0 22px;
  scrollbar-width: thin;
}
.tabs .tab {
  position: relative;
  border-radius: 0;
  padding: 13px 15px 12px;
  background: transparent;
  color: var(--chalk-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  transition: color .15s ease, background .15s ease;
}
.tabs .tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background .15s ease;
}
.tabs .tab:hover {
  color: var(--chalk);
  background: rgba(255, 255, 255, 0.025);
}
.tabs .tab.active {
  background: transparent;
  color: var(--chalk);
  box-shadow: none;
}
.tabs .tab.active::after {
  background: var(--signal);
}
.tabs .tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* ---- 3. Inputs, selects, buttons: unified war-room controls -------- */
input, select, textarea {
  background: #0E1421;
  border: 1px solid var(--hash);
  color: var(--chalk);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #5C6678; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--focus);
}
.resetButton, .draftNightToggle, .chatToggle {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 8px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.chatToggle {
  background: var(--signal-soft);
  border: 1px solid rgba(91, 157, 249, 0.4);
  color: var(--accent-2);
}
.chatToggle:hover { background: rgba(91, 157, 249, 0.2); }

/* ---- 4. Panels + KPI strip ---------------------------------------- */
.panel, .kpis button {
  border-radius: 10px;
  border-color: var(--hash);
}
.panelHeader {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-bottom: 1px solid var(--hash);
}
.kpis button { background: var(--deck); }
.kpis button:hover, .kpis button:focus-visible {
  border-color: var(--signal);
}
.kpis strong { font-weight: 700; }

/* ---- 5. SIGNATURE: On-the-Clock GM scouting draft cards ------------ */
.onClockPanel {
  border: 1px solid rgba(91, 157, 249, 0.26);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(91, 157, 249, 0.06), transparent 60%),
    var(--deck);
  border-radius: 12px;
  padding: 12px;
}
.onClockHeader strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12.5px;
  color: var(--chalk);
}
.onClockHeader strong::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--clock);
  box-shadow: 0 0 0 3px var(--clock-soft);
  vertical-align: middle;
}
.onClockCard {
  position: relative;
  overflow: hidden;
  gap: 7px;
  padding: 13px 12px 11px;
  border: 1px solid var(--hash);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--deck-raised), #10172300);
  background-color: var(--deck-raised);
}
/* The yard-line marker: subtle field hash-marks across the card top */
.onClockCard::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background-image:
    linear-gradient(90deg, var(--card-accent, var(--signal)) 0 100%),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(10,14,22,0.85) 13px 15px);
  opacity: 0.92;
}
.onClockCard.good { --card-accent: var(--turf); border-color: rgba(54, 194, 139, 0.3); }
.onClockCard.warn { --card-accent: var(--clock); border-color: rgba(242, 180, 65, 0.3); }
.onClockCard.bad  { --card-accent: var(--alert); border-color: rgba(236, 106, 96, 0.3); }
.onClockCard.neutral { --card-accent: var(--signal); }
.onClockCard > span {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--card-accent, var(--accent-2));
}
.onClockCard button {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.onClockCard em {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--chalk-muted);
}
.onClockMetrics strong {
  border: 1px solid var(--hash);
  border-radius: 6px;
  padding: 4px 7px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--chalk);
  font-size: 10px;
  letter-spacing: 0.01em;
}
.onClockCard p { color: #B9C4D4; }
.onClockCard small {
  font-family: var(--font-mono);
  color: var(--chalk-muted);
}
@media (prefers-reduced-motion: no-preference) {
  .onClockCard {
    animation: warroomCardReveal .42s cubic-bezier(.2,.7,.2,1) both;
  }
  .onClockCard:nth-child(2) { animation-delay: .05s; }
  .onClockCard:nth-child(3) { animation-delay: .10s; }
  .onClockCard:nth-child(4) { animation-delay: .15s; }
  .onClockCard:nth-child(5) { animation-delay: .20s; }
  @keyframes warroomCardReveal {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---- 6. Badge semantics: quiet by default, urgency pops ------------ */
.decisionBadge {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 6px;
  border-color: var(--hash);
  background: rgba(255, 255, 255, 0.04);
  color: var(--chalk-muted);
}
.decisionBadge.good {
  border-color: rgba(54, 194, 139, 0.32);
  background: var(--turf-soft);
  color: #8FE3C0;
}
.decisionBadge.warn {
  border-color: rgba(242, 180, 65, 0.34);
  background: var(--clock-soft);
  color: #F2CE86;
}
/* "Take Now" style urgency is the one badge allowed to shout */
.decisionBadge.bad {
  border-color: rgba(236, 106, 96, 0.45);
  background: rgba(236, 106, 96, 0.16);
  color: #FBB4AE;
}

/* ---- 7. Tier Cliff Watch ------------------------------------------ */
.tierCliffPanel {
  border: 1px solid var(--hash);
  background: var(--deck);
  border-radius: 12px;
  padding: 12px;
}
.tierCliffHeader strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 12.5px;
  color: var(--chalk);
}
.tierCliffRow {
  border-color: var(--hash);
  background: var(--deck-raised);
  border-radius: 8px;
}
.tierCliffRow strong { font-family: var(--font-mono); color: var(--chalk); }
.tierCliffRow.high   { border-left: 3px solid var(--alert); }
.tierCliffRow.medium { border-left: 3px solid var(--clock); }
.tierCliffRow.low    { border-left: 3px solid var(--turf); }

/* ---- 8. Roster construction / position pressure ------------------- */
.rosterConstructionPanel {
  border-color: var(--hash);
  border-radius: 12px;
}
.rosterConstructionHeader strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.positionPressureNeed  { box-shadow: inset 3px 0 0 var(--alert); }
.positionPressureFit   { box-shadow: inset 3px 0 0 var(--turf); }
.positionPressureDepth { box-shadow: inset 3px 0 0 var(--clock); }

/* ---- 9. Board table scannability ---------------------------------- */
.boardPanel thead th {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.boardPanel td:nth-child(2) {
  font-size: 13px;
  font-weight: 700;
  color: var(--chalk);
}
.boardPanel td:nth-child(3) .playerNameButton strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.005em;
}
.boardPanel tbody tr:hover td { background: rgba(91, 157, 249, 0.05); }
.boardPanel tbody tr.selected td {
  background: rgba(91, 157, 249, 0.1);
  box-shadow: inset 0 0 0 9999px rgba(91, 157, 249, 0.04);
}
.draftActionCell .minePick {
  border-color: rgba(54, 194, 139, 0.4);
  color: #8FE3C0;
}
.draftActionCell .minePick:hover { background: var(--turf-soft); }

/* ---- 10. Drawers / modals ----------------------------------------- */
.playerDrawer {
  background: var(--deck);
  border-left: 1px solid var(--hash);
  box-shadow: var(--shadow);
}
.playerDrawerBackdrop { backdrop-filter: blur(2px); background: rgba(5, 8, 13, 0.55); }
.chatPanel { background: var(--deck); border-left: 1px solid var(--hash); }

/* ---- 11. Empty states: specific, instructive ---------------------- */
.emptyState {
  border: 1px dashed var(--hash);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
  color: var(--chalk-muted);
  line-height: 1.5;
}

/* ---- 12. Accessibility + motion discipline ------------------------ */
:focus-visible { outline-color: var(--focus); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   WAR ROOM DESIGN UPGRADE  (v2, 2026-06-27)
   Pass 2: sticky next-pick rail, scouting-card language across the
   research tabs, and quiet position-colored accents.
   ===================================================================== */

/* ---- Position color tokens (reuse existing hues as named tokens) --- */
:root {
  --pos-qb: #3B82F6;
  --pos-rb: #10B981;
  --pos-wr: #38BDF8;
  --pos-te: #8B5CF6;
  --pos-k:  #F59E0B;
  --pos-dst:#64748B;
}

/* ---- A. Sticky war-room rail (next-pick urgency) ------------------- */
.warRoomRail {
  position: sticky;
  top: 6px;
  z-index: 20;
  margin-bottom: 12px;
}
.warRoomRailInner {
  display: grid;
  grid-template-columns: minmax(130px, max-content) minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1px;
  border: 1px solid rgba(91, 157, 249, 0.28);
  border-radius: 10px;
  background: var(--hash);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.railModule {
  display: grid;
  gap: 2px;
  align-content: center;
  padding: 9px 13px;
  background: linear-gradient(180deg, #101A2C, var(--deck));
  min-width: 0;
}
.railModule > span {
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-muted);
}
.railModule > strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--chalk);
}
.railClock > strong {
  font-family: var(--font-mono);
  font-weight: 700;
}
.railClock {
  border-left: 3px solid var(--clock);
}
.railClock > em,
.railTarget > em,
.railUrgency > em {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--chalk-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.railUrgency > strong i {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 5px;
  vertical-align: middle;
}
.railUrgency.bad  { border-left: 3px solid var(--alert); }
.railUrgency.bad  > strong i { background: var(--alert-soft); color: #FBB4AE; }
.railUrgency.warn { border-left: 3px solid var(--clock); }
.railUrgency.warn > strong i { background: var(--clock-soft); color: #F2CE86; }
.railUrgency.good { border-left: 3px solid var(--turf); }
.railUrgency.good > strong i { background: var(--turf-soft); color: #8FE3C0; }
.railTarget { border-left: 3px solid var(--signal); }
.railTarget > button {
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent-2);
}
.railTarget > button:hover { color: var(--chalk); }
/* position-tinted left edge on the target module */
.railTarget[data-position="QB"] { border-left-color: var(--pos-qb); }
.railTarget[data-position="RB"] { border-left-color: var(--pos-rb); }
.railTarget[data-position="WR"] { border-left-color: var(--pos-wr); }
.railTarget[data-position="TE"] { border-left-color: var(--pos-te); }
.railTarget[data-position="K"]  { border-left-color: var(--pos-k); }
.railTarget[data-position="DST"]{ border-left-color: var(--pos-dst); }
@media (max-width: 900px) {
  .warRoomRailInner { grid-template-columns: 1fr; }
}

/* ---- B. Quiet position accents: board Pos pill + scouting cards ---- */
.tableLinkButton[data-pos-popup]::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--pos-dot, var(--pos-dst));
}
.tableLinkButton[data-pos-popup="QB"] { --pos-dot: var(--pos-qb); }
.tableLinkButton[data-pos-popup="RB"] { --pos-dot: var(--pos-rb); }
.tableLinkButton[data-pos-popup="WR"] { --pos-dot: var(--pos-wr); }
.tableLinkButton[data-pos-popup="TE"] { --pos-dot: var(--pos-te); }
.tableLinkButton[data-pos-popup="K"]  { --pos-dot: var(--pos-k); }
.tableLinkButton[data-pos-popup="DST"]{ --pos-dot: var(--pos-dst); }
/* position dot inside On-the-Clock scouting cards */
.posDot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: middle;
}

/* ---- C. Scouting-card language for research tabs ------------------- */
/* Shared eyebrow + headline pattern used across History / Manager tabs */
.visualCard,
.leagueLeadersCard,
.leagueNewsCard,
.leagueStandingsWrap,
.leagueHistorySection,
.managerProfilesIntro,
.teamDashboard,
.playerColumn {
  border: 1px solid var(--hash);
  border-radius: 12px;
  background: var(--deck-raised);
}
.visualCardTitle span,
.playerColumnHeader span,
.leagueLeadersCard > div span {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--chalk-muted);
}
.visualCardTitle strong,
.leagueLeadersCard > div strong {
  font-family: var(--font-display);
  letter-spacing: -0.005em;
  color: var(--chalk);
}
.leagueLeadersCard > div strong { font-family: var(--font-mono); }
.leagueLeadersCard > div em {
  font-family: var(--font-mono);
  color: var(--chalk-muted);
}
/* Players tab columns read as position scouting cards */
.playerColumnHeader h3 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}
.playerListItem {
  border-radius: 8px;
  transition: background .14s ease, box-shadow .14s ease;
}
.playerListItem span { font-family: var(--font-mono); }
.playerListItem strong { font-family: var(--font-display); font-weight: 700; }
.playerListItem b { font-family: var(--font-mono); }
.playerListItem:hover {
  background: rgba(91, 157, 249, 0.07);
  box-shadow: inset 3px 0 0 var(--signal);
}
/* Team grid tiles inherit the card shell + quiet hover lift */
.teamTile {
  border-radius: 10px;
  transition: border-color .14s ease, transform .14s ease;
}
.teamTile:hover { transform: translateY(-1px); }
.teamTile strong { font-family: var(--font-display); }
.teamTile span, .teamTile em { font-family: var(--font-mono); }
/* Hero blocks across tabs share the display eyebrow */
.leagueHistoryHero span,
.managerProfilesIntro span {
  font-family: var(--font-display);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* =====================================================================
   WAR ROOM DESIGN UPGRADE  (v3, 2026-06-27)  — palette + surface reconcile
   Earlier "cleanup" passes left a second, brighter semantic palette
   (--good/--bad/--warn/--accent = Tailwind hues) competing with the
   war-room palette (--turf/--alert/--clock/--signal). This appended layer
   folds the legacy tokens onto the war-room hues so the whole app uses one
   green, one red, one amber, one blue — and aligns the Draft Board Controls
   cluster to the same border/surface system as the panels beside it.
   Visual only: no markup, IDs, classes, or app logic touched.
   ===================================================================== */
:root {
  --good: var(--turf);
  --good-soft: var(--turf-soft);
  --bad: var(--alert);
  --bad-soft: var(--alert-soft);
  --warn: var(--clock);
  --warn-soft: var(--clock-soft);
  --accent: var(--signal);
  --accent-soft: var(--signal-soft);
  --blue-soft: var(--signal-soft);
}

/* Draft Board Controls: same border + surface recipe as the board panel.
   Replaces the faint rgba(148,163,184,0.14) borders and near-flat
   rgba(8,17,31,0.54) fills so the controls card visibly belongs with the
   board and KPI cards it sits next to. */
.settingBlock,
.rosterText {
  border-color: var(--hash);
  background: var(--deck);
}
.draftControls .filters,
.activeFilterSummary,
.dataSyncPanel,
.draftQaChecklist,
.draftHealth {
  border-color: var(--hash);
}

/* One badge weight everywhere (a later --font-weight-label:760 rule was
   pulling the badge families off the war-room 700). */
.pill,
.signalBadge,
.marketActionBadge,
.marketAgreementBadge,
.draftReadBadge,
.pressureBadge {
  font-weight: 700;
}
/* Both search fields share the canonical control surface (the global input
   rule sets #0E1421 + --hash; the board search had a divergent override). */
#boardSearchInput {
  background: #0E1421;
  border-color: var(--hash);
}

/* =====================================================================
   WAR ROOM DESIGN UPGRADE  (v4, 2026-06-27)
   Three system-level passes:
   (1) Badge shape tiers: round pills = passive descriptors; squared
       badges = active draft verdicts.
   (2) One radius scale + one weight ramp (earlier passes defined these
       tokens 2-3x with conflicting values, same disease the colors had).
   (3) Numeric typography: figures are mono, tabular, and right-aligned.
   Visual only: no markup, IDs, classes, or app logic touched.
   ===================================================================== */

/* ---- (2) Canonical radius scale + weight ramp (de-duplicated) ------- */
:root {
  --radius-pill: 999px;
  --radius-control: 8px;   --radius-sm: 8px;   /* inputs, buttons, chips */
  --radius-card: 10px;     --radius-md: 10px;  /* panels, list cards     */
  --radius-feature: 12px;  --radius-lg: 12px;  /* signature feature cards */

  --font-weight-body: 400;
  --font-weight-subtitle: 600;  /* was 640 */
  --font-weight-label: 700;     /* was 760 — also folds badge/tag weights */
  --font-weight-title: 800;     /* was 820 */
  --weight-body: 400;
  --weight-control: 600;
  --weight-emphasis: 700;
  --weight-display: 800;
}
/* Cap heading weight to one display weight so stray 850/900 headings
   stop reading heavier than their neighbors. */
h1, h2, h3,
.panelHeader h2,
.marketHeroHeader h2,
.wrappedHero h2,
.leagueHistoryHero h2 {
  font-weight: var(--weight-display);
}

/* ---- (1) Badge shape tiers ---------------------------------------- */
/* Active draft VERDICTS read as squared, uppercase chips (matching the
   On-the-Clock decisionBadge); passive DESCRIPTORS stay round pills. */
.marketActionBadge,
.draftReadBadge {
  border-radius: var(--radius-control);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Passive descriptors keep the round pill shape. */
.pill,
.signalBadge,
.marketAgreementBadge,
.pressureBadge {
  border-radius: var(--radius-pill);
}

/* ---- (3) Numeric typography: mono, tabular, right-aligned ---------- */
/* Keyed to data-col (set on every board th/td) so this follows column
   MEANING, not position — a moved column can no longer silently
   mis-style a text column as a number. */
.boardPanel thead th[data-col="rank"],
.boardPanel thead th[data-col="adp"],
.boardPanel thead th[data-col="market"],
.boardPanel thead th[data-col="model"],
.boardPanel td[data-col="rank"],
.boardPanel td[data-col="adp"],
.boardPanel td[data-col="market"],
.boardPanel td[data-col="model"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* Numbers inside rich cells align the same way. */
.valueCell strong,
.statScoreCell strong,
.riskCell strong,
.upsideCell strong,
.marketModelCell strong,
.kpis strong,
.onClockMetrics strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* =====================================================================
   WAR ROOM DESIGN UPGRADE  (v5, 2026-06-27)  — accessibility + states
   One visible focus ring across every interactive control, one disabled
   treatment, and a muted-text floor that clears WCAG AA on the dark
   surfaces. Visual/a11y only; no markup or logic touched.
   ===================================================================== */

/* One focus ring everywhere (rings previously drifted per section).
   Inputs/selects keep their own ring from the controls layer above. */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
.infoIcon:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}

/* One disabled treatment for every control. */
button:disabled,
button[disabled],
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Muted-text floor: nudge the dimmest greys up so secondary copy clears
   WCAG AA (4.5:1) on --page/--deck instead of sitting just under it. */
:root {
  --muted: #9aa9bd;     /* ~7:1 on the page — comfortably AA */
  --muted-2: #8696ac;   /* was #6f8198 (~4.0:1, failed) -> ~5.3:1 */
}
input::placeholder,
textarea::placeholder {
  color: #76839a;       /* was #5C6678 (~3:1) -> ~4.5:1 */
}

/* =====================================================================
   ELEVATED WAR ROOM  (v6, 2026-06-29)  — visual polish layer
   Goal: take the existing dark "war room" system from functional to
   custom/premium. Adds depth, a signature accent, refined chrome,
   elevated stat tiles, and table rhythm. CSS-only; no markup/logic
   changes, and all a11y (focus rings, AA muted-text floor) preserved.
   ===================================================================== */

/* ---- Additive structural tokens (do not weaken a11y tokens) -------- */
:root {
  /* Slightly deeper page so raised panels read as elevated. */
  --page: #060d18;
  --page-2: #0a1322;

  /* Refined hairlines + a top "light catch" highlight for surfaces. */
  --line: rgba(148, 163, 184, 0.16);
  --line-strong: rgba(148, 163, 184, 0.30);
  --hairline-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Signature accent gradient (model intelligence) + interaction glow. */
  --brand-grad: linear-gradient(135deg, #60a5fa 0%, #818cf8 55%, #38bdf8 100%);
  --accent-edge: rgba(96, 165, 250, 0.55);
  --glow: 0 0 0 1px rgba(96, 165, 250, 0.35), 0 8px 26px rgba(56, 132, 255, 0.22);
  --ring: 0 0 0 3px rgba(96, 165, 250, 0.30);

  /* Elevated surface gradients used across cards/tiles. */
  --elev-1: linear-gradient(180deg, #15233a 0%, #101a2b 100%);
  --elev-2: linear-gradient(180deg, #1a2c47 0%, #131f33 100%);

  /* Deeper, more dimensional shadows. */
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.30);
}

/* ---- Ambient page backdrop: subtle stadium-night depth ------------- */
body {
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(96, 165, 250, 0.14), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(129, 140, 248, 0.10), transparent 55%),
    linear-gradient(180deg, var(--page-2) 0%, var(--page) 46%, #04080f 100%);
  background-attachment: fixed;
}

/* ---- Topbar: signature brand strip + display title ----------------- */
.topbar {
  background: linear-gradient(180deg, rgba(12, 22, 40, 0.96), rgba(7, 14, 26, 0.92));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--brand-grad);
  opacity: 0.9;
}
.topbar h1 {
  font-family: var(--font-display, "Archivo", Inter, sans-serif);
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(180deg, #ffffff, #c7d6ec);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#refreshText {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.01em;
}

/* ---- Tabs: quiet segmented control with active accent bar ---------- */
.tabs {
  background: linear-gradient(180deg, rgba(9, 17, 31, 0.92), rgba(7, 14, 26, 0.86));
}
.tab {
  position: relative;
  transition: color .16s ease, background .16s ease;
}
.tab.active {
  background: linear-gradient(180deg, var(--panel-raised, #17243a), var(--panel, #101a2b));
}
/* Enhance the existing bottom active-indicator with the brand gradient +
   a soft glow. Scoped under .tabs to match the highest-specificity
   existing rule (.tabs .tab.active::after) so the gradient wins. */
.tabs .tab.active::after,
.tabs .tab[aria-selected="true"]::after {
  background: var(--brand-grad);
  height: 3px;
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.55);
}

/* ---- Inputs & selects: glow focus + custom caret ------------------- */
input,
select,
textarea {
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus,
select:focus,
textarea:focus {
  box-shadow: var(--ring);
  border-color: var(--accent-edge);
}
select:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 52%,
    calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ---- Primary action (Chat toggle): branded fill -------------------- */
/* Scoped to .headerActions so the branded fill + dark label win cleanly
   over the several earlier .chatToggle color rules in this file. */
.headerActions .chatToggle {
  background: var(--brand-grad);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #08111f;
  font-weight: 850;
  box-shadow: 0 8px 20px rgba(56, 132, 255, 0.28);
}
.headerActions .chatToggle:hover {
  background: var(--brand-grad);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* ---- Shared panels/cards: depth + top light-catch ------------------ */
.panel,
.draftControls,
.comparePlayerCard,
.playerHero,
.playerChartCard,
.playerSeasonCard,
.playerTabsCard {
  background: var(--elev-1);
  box-shadow: var(--shadow-soft), var(--hairline-top);
}
.playerProfileSubsection > .playerSubTabs {
  margin: 12px 0;
}

.playerProfileNewsSection {
  margin: 14px 0 20px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--elev-1);
}
.playerProfileNewsSection .visualCardTitle {
  margin-bottom: 12px;
}
.panelHeader {
  background: linear-gradient(180deg, rgba(22, 36, 58, 0.96), rgba(13, 23, 40, 0.96));
}
.panelHeader h2 {
  font-family: var(--font-display, "Archivo", Inter, sans-serif);
  letter-spacing: 0.005em;
}

/* ---- KPI stat tiles: BI-style, elevated, glowing accent edge ------- */
.kpis button {
  position: relative;
  overflow: hidden;
  background: var(--elev-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft), var(--hairline-top);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kpis button::before {
  width: 3px;
  box-shadow: 0 0 14px 1px currentColor;
  opacity: 0.95;
}
.kpis button:hover,
.kpis button:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent-edge);
  box-shadow: var(--shadow), 0 0 0 1px rgba(96, 165, 250, 0.22);
}
.kpis strong {
  font-family: var(--font-display, "Archivo", Inter, sans-serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff, #cfdcef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Tables: header gradient + row hover accent rail --------------- */
thead th {
  background: linear-gradient(180deg, #122036, #0d1829);
  border-bottom: 1px solid var(--line-strong);
}
tbody tr td {
  transition: background .12s ease;
}
tbody tr:hover td {
  background: #14263f;
}
/* Quiet accent rail on the hovered/selected row's first cell. */
.boardPanel tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--accent), 1px 0 0 var(--line);
}
.boardPanel tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--good), 1px 0 0 var(--line);
}
/* Board rank reads as a confident, mono display figure. */
.boardPanel td[data-col="rank"] {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-weight: 700;
  color: var(--ink-strong);
}

/* ---- Scrollbars: slim, on-theme ------------------------------------ */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 165, 250, 0.32) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.38), rgba(96, 165, 250, 0.22));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 165, 250, 0.5);
  background-clip: padding-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Text selection on theme -------------------------------------- */
::selection {
  background: rgba(96, 165, 250, 0.32);
  color: #fff;
}

/* =====================================================================
   CHART VISUALS  (v6) — scatter polish (Compare risk/return, draft risk)
   Glowing player markers + hover lift to match the modernized line charts.
   Visual-only; chart-scoped so it stands apart from the chrome layer.
   ===================================================================== */
.compareScatterPoint circle,
.draftRiskScatterPoint circle {
  transition: transform .14s ease, filter .14s ease;
}
.compareScatterPoint.playerA circle {
  filter: drop-shadow(0 0 5px rgba(124, 92, 255, 0.65));
}
.compareScatterPoint.playerB circle {
  filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.6));
}
.clickableScatterPoint { cursor: pointer; }
.clickableScatterPoint:hover circle,
.clickableScatterPoint:focus-visible circle {
  transform: scale(1.18);
}
/* Slightly crisper, less heavy axes and gridlines on the scatter. */
.compareScatterSvg .chartAxisLine {
  stroke: rgba(148, 163, 184, 0.32);
}
.compareScatterSvg .chartGridLine {
  stroke: rgba(148, 163, 184, 0.12);
  stroke-dasharray: 2 3;
}

/* =====================================================================
   TREND-CHART SERIES HIERARCHY  (v6) — FactSet/Bloomberg discipline
   Problem: trend charts rendered five fully-saturated series at once
   (purple actual / green trend / cyan benchmark / amber mean / red band),
   so nothing read first. Fix: ONE bright hero (the player's own line),
   every reference muted to recede. Driven from shared tokens so the
   legend chips stay in sync with the lines. Visual-only.
   ===================================================================== */
:root {
  --series-actual: #5ba6ff;                  /* hero: the player's line  */
  --series-benchmark: #45c08a;               /* Top-10 / position elite  */
  --series-trend: #e0a23c;                   /* directional trend        */
  --series-ref: rgba(165, 181, 201, 0.45);   /* mean / quiet references  */
  --series-band: rgba(248, 113, 113, 0.18);  /* ±1σ context band         */

  /* Keep the toggle/legend chips matched to the line palette above. */
  --chart-control-actual: var(--series-actual);
  --chart-control-trend: var(--series-trend);
  --chart-control-mean: #9fb0c5;
  --chart-control-band: #f87171;
}
.chartToggle[data-chart-toggle="top10"] {
  --chart-toggle-color: var(--series-benchmark);
}

/* Hero: the actual series — bold, luminous, owns the chart.
   Kept thin: with dense weekly data the polyline zigzags often, and a
   thick stroke-width with round joins bulges into dot-like blobs at every
   peak/valley — that read as oversized markers even though .chartPoint
   itself is invisible until hover. */
.chartActualLine,
.workbookBenchmarkChart .chartActualLine {
  stroke: var(--series-actual);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(91, 166, 255, 0.32));
}

/* Benchmark (Top 10 / position avg): a quiet elite reference, not a star. */
.chartTop10Line,
.workbookBenchmarkChart .chartTop10Line,
.workbookBenchmarkChart .chartPositionAvgLine {
  stroke: var(--series-benchmark);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
  opacity: 0.8;
}

/* Trend: directional only — thin, muted amber. */
.chartTrendLine,
.workbookBenchmarkChart .chartTrendLine {
  stroke: var(--series-trend);
  stroke-width: 1.3;
  stroke-dasharray: 5 4;
  opacity: 0.78;
}

/* Mean: the quietest reference — a faint grey rule, not amber dashes. */
.chartMeanLine,
.workbookBenchmarkChart .chartMeanLine {
  stroke: var(--series-ref);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 1;
}

/* ±1σ band: barely-there neutral context (was an alarming red). */
.chartStdBand,
.workbookBenchmarkChart .chartStdBand {
  fill: var(--series-band);
}

/* Mini-line chart labels follow the SVG's actual 12%–92% point domain. */
.chartLabels.fullRange.chartLabelsPlotAligned {
  position: relative;
  display: block;
  height: 15px;
  margin-top: 2px;
  padding: 0;
  overflow: visible;
}

.chartLabels.fullRange.chartLabelsPlotAligned span {
  position: absolute;
  top: 0;
  width: 44px;
  margin-left: -22px;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  transform: none;
}

/* Plot area frame: a quiet rounded boundary around the grid (Highcharts-
   style plotBorderColor/plotBorderRadius), drawn behind the gridlines. */
.chartPlotBorder {
  fill: none;
  stroke: rgba(148, 163, 184, 0.16);
  stroke-width: 1;
}

/* =====================================================================
   BAR & DISTRIBUTION FILLS  (v6) — gradient depth + cohesive palette
   The horizontal bars and distribution histogram are HTML/CSS (div
   widths/heights), so this is pure styling: flat fills -> directional
   gradients with a soft glow, and Compare A/B unified with the scatter
   (A = blue, B = green).
   ===================================================================== */
.modernBarRow b,
.groupedBarRow b {
  background: rgba(148, 163, 184, 0.12);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.06);
}

/* Positive / good */
.modernBarRow i.good,
.modernBarRow i.warn,
.groupedBarRow .b,
.marketGapBar.good i {
  background: linear-gradient(90deg, #2ea27a, #45c08a);
  box-shadow: 0 0 10px rgba(69, 192, 138, 0.30);
}

/* Negative / bad */
.modernBarRow i.bad,
.marketGapBar.bad i {
  background: linear-gradient(90deg, #e0556a, #fb7185);
  box-shadow: 0 0 10px rgba(251, 113, 133, 0.28);
}

/* Compare player A (blue hero) / generic info */
.groupedBarRow .a,
.modernBarRow i.info {
  background: linear-gradient(90deg, #3b82f6, #5ba6ff);
  box-shadow: 0 0 10px rgba(91, 166, 255, 0.30);
}

/* Legend swatches follow the same A = blue / B = green pairing. */
.groupedLegend .a::before { background: #5ba6ff; }
.groupedLegend .b::before { background: #45c08a; }

/* Distribution histogram: vertical accent gradient + lift on hover. */
.distributionBin i {
  background: linear-gradient(180deg, #5ba6ff 0%, #2f6fd6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  opacity: 0.92;
  transition: opacity .12s ease, transform .12s ease;
  transform-origin: bottom;
}
.distributionBin:hover i {
  opacity: 1;
  transform: scaleY(1.03);
}

/* =====================================================================
   COMPARE PALETTE UNIFICATION + PROFILE RADAR  (v6)
   One A/B pairing across the whole Compare tab — scatter, bars, radar,
   legends — so the two players read consistently. A = blue, B = green.
   ===================================================================== */
:root {
  --cmp-a: #5ba6ff;   /* Player A */
  --cmp-b: #45c08a;   /* Player B */
}

/* Scatter: move Player A off the off-brand purple onto the shared blue. */
.compareScatterPoint.playerA circle {
  fill: var(--cmp-a);
  stroke: #cfe4ff;
}
.compareScatterPoint:focus circle,
.compareScatterPoint:focus-visible circle {
  stroke: #ffffff;
  stroke-width: 2.4;
}
.compareScatterPoint.playerA circle { filter: drop-shadow(0 0 5px rgba(91, 166, 255, 0.6)); }
.compareScatterLegend .playerA::before { background: var(--cmp-a); }

/* ---- Profile radar -------------------------------------------------- */
.compareRadarBody {
  padding: 6px 12px 12px;
  display: grid;
  justify-items: center;
  gap: 6px;
}
.compareRadarSvg {
  width: 100%;
  max-width: 430px;
  height: auto;
  overflow: visible;
}
.radarGrid {
  fill: rgba(148, 163, 184, 0.04);
  stroke: rgba(148, 163, 184, 0.16);
  stroke-width: 1;
}
.radarGridOuter {
  fill: none;
  stroke: rgba(148, 163, 184, 0.28);
}
.radarSpoke {
  stroke: rgba(148, 163, 184, 0.16);
  stroke-width: 1;
}
.radarAxisLabel {
  fill: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.radarArea {
  stroke-width: 2;
  stroke-linejoin: round;
  fill-opacity: 0.12;
}
.radarArea.playerA { stroke: var(--cmp-a); fill: var(--cmp-a); filter: drop-shadow(0 0 6px rgba(91, 166, 255, 0.35)); }
.radarArea.playerB { stroke: var(--cmp-b); fill: var(--cmp-b); }
.radarDot { stroke: #0a1322; stroke-width: 1; }
.radarDot[tabindex] { cursor: pointer; }
.radarDot:focus,
.radarDot.chartLinkedActive { stroke: #ffffff; stroke-width: 2; }
.radarDot.playerA { fill: var(--cmp-a); }
.radarDot.playerB { fill: var(--cmp-b); }
.compareRadarLegend {
  display: flex;
  gap: 16px;
  font-size: 11px;
  font-weight: 850;
}
.compareRadarLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}
.compareRadarLegend span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.compareRadarLegend .playerA { color: #dcebff; }
.compareRadarLegend .playerA::before { background: var(--cmp-a); }
.compareRadarLegend .playerB { color: #c4f0db; }
.compareRadarLegend .playerB::before { background: var(--cmp-b); }

/* ---- Projected Outcome Range --------------------------------------- */
.compareRangeBody {
  padding: 10px 18px 12px;
}
.radarRingLabel {
  fill: rgba(159, 176, 197, 0.7);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}
.rangeDefinition {
  margin: 0 0 2px;
  color: var(--chart-axis);
  font-size: var(--font-size-chart-subtitle);
  font-weight: var(--font-weight-subtitle);
  text-align: center;
}
.compareRadarTakeaway {
  width: 100%;
  margin: 0;
  text-align: center;
}
.compareRangeSvg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.rangeGrid {
  stroke: rgba(148, 163, 184, 0.16);
  stroke-dasharray: 3 4;
}
.rangeTick {
  fill: var(--chart-axis);
  font-size: var(--font-size-chart-axis-tick);
  font-weight: var(--font-weight-body);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
/* Contested zone where both players' outcome ranges overlap. */
.rangeOverlap {
  fill: rgba(226, 232, 240, 0.05);
  stroke: rgba(226, 232, 240, 0.14);
  stroke-dasharray: 3 3;
  rx: 6;
}
.rangeBar {
  fill-opacity: 0.18;
  stroke-width: 1.6;
}
.rangeRow.playerA .rangeBar { fill: var(--cmp-a); stroke: var(--cmp-a); }
.rangeRow.playerB .rangeBar { fill: var(--cmp-b); stroke: var(--cmp-b); }
.rangeCap {
  stroke-width: 1.6;
  opacity: 0.7;
}
.rangeRow.playerA .rangeCap { stroke: var(--cmp-a); }
.rangeRow.playerB .rangeCap { stroke: var(--cmp-b); }
.rangeProj {
  stroke: #0a1322;
  stroke-width: 1.5;
}
.rangeRow.playerA .rangeProj { fill: var(--cmp-a); filter: drop-shadow(0 0 4px rgba(91, 166, 255, 0.6)); }
.rangeRow.playerB .rangeProj { fill: var(--cmp-b); filter: drop-shadow(0 0 4px rgba(69, 192, 138, 0.55)); }
.rangeName {
  fill: var(--color-text-strong);
  font-size: var(--font-size-chart-legend);
  font-weight: var(--font-weight-label);
  letter-spacing: 0;
  text-anchor: end;
}
.rangeProjLabel {
  fill: var(--chart-axis);
  font-size: var(--font-size-chart-axis-tick);
  font-weight: var(--font-weight-label);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.rangeFootnote {
  display: none;
}
.compareRangeLegend {
  margin-top: 4px;
}
.rangeValueSummary {
  fill: var(--chart-axis);
  font-size: var(--font-size-chart-axis-tick);
  font-weight: var(--font-weight-body);
  font-variant-numeric: tabular-nums;
}
.rangeAxisLabel {
  margin-top: -4px;
  color: var(--chart-axis);
  font-size: var(--font-size-chart-axis-title);
  font-weight: var(--font-weight-label);
  text-align: center;
}
.compareRangeLegend .playerA { color: #dcebff; }
.compareRangeLegend .playerB { color: #c4f0db; }
.compareRangeLegend .playerA::before { background: var(--cmp-a); }
.compareRangeLegend .playerB::before { background: var(--cmp-b); }

/* =====================================================================
   MARKET DASHBOARD POLISH  (v6) — BI stat tiles + heat bars
   The Market view is already a dashboard; this brings its KPI stat cards
   and heatmap bars in line with the elevated tiles/charts elsewhere:
   a tone-colored glowing accent edge, display-font numerals, hover lift,
   and gradient heat fills. Visual-only.
   ===================================================================== */
.marketStatCard {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft), var(--hairline-top);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.marketStatCard::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  color: var(--accent);
  background: currentColor;
  box-shadow: 0 0 14px 1px currentColor;
  opacity: 0.9;
}
.marketStatCard.good::before { color: var(--good); }
.marketStatCard.bad::before  { color: var(--bad); }
.marketStatCard.warn::before { color: var(--warn); }
.marketStatCard strong {
  font-family: var(--font-display, "Archivo", Inter, sans-serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.marketStatCard:hover,
.marketStatCard:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent-edge);
  box-shadow: var(--shadow), 0 0 0 1px rgba(96, 165, 250, 0.18);
  outline: none;
}

/* Heatmap "trustable market" bars: flat blue -> accent gradient. */
.marketHeatBar i {
  background: linear-gradient(90deg, #3b82f6, #5ba6ff);
  box-shadow: 0 0 8px rgba(91, 166, 255, 0.32);
}

/* =====================================================================
   LEAGUE HISTORY VISUALS  (v6)
   Inline Power BI-style data bars in the standings, a win-rate heatmap
   on the H2H matrix, and gradient win% bars. Visual-only; numbers and
   records are unchanged.
   ===================================================================== */
/* Standings: a soft data bar behind the points value (Excel/Power BI). */
.leagueStandingsTable .standBar {
  position: relative;
  display: block;
  min-width: 78px;
  padding: 3px 7px;
  border-radius: 5px;
  overflow: hidden;
}
.leagueStandingsTable .standBar i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  min-width: 4px;
  border-radius: 5px;
  opacity: 0.42;
}
.leagueStandingsTable .standBar.pf i { background: linear-gradient(90deg, #2ea27a, #45c08a); }
.leagueStandingsTable .standBar.pa i { background: linear-gradient(90deg, #e0556a, #fb7185); }
.leagueStandingsTable .standBar span {
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* H2H matrix: win-rate heatmap (background set inline per cell). */
.h2hTable .h2hCell {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}
.h2hTable .h2hCell.selfCell {
  background: rgba(148, 163, 184, 0.10);
  color: var(--muted-2);
}

/* Win% comparison bars: flat -> gradient (matches the chart palette). */
.winPctBars .actual  { background: linear-gradient(90deg, #ea6a12, #f9a14e); }
.winPctBars .allplay { background: linear-gradient(90deg, #1f9d57, #45c08a); }
.winPctBars .median  { background: linear-gradient(90deg, #0a87c9, #38bdf8); }

/* =====================================================================
   SHARED INLINE BAR HELPERS  (v6)
   visualBar / splitBar fills are reused across Teams, Manager Tendencies,
   League Wrapped, and Draft History. Flat fills -> directional gradients
   so every one of those tabs upgrades together.
   ===================================================================== */
.barTrack .positive { background: linear-gradient(90deg, #2ea27a, #45c08a); }
.barTrack .negative { background: linear-gradient(90deg, #e0556a, #fb7185); }
.barTrack .info,
.splitTrack span    { background: linear-gradient(90deg, #3b82f6, #5ba6ff); }
.barTrack .neutral,
.barTrack .muted,
.splitTrack b       { background: linear-gradient(90deg, #56647a, #7c8aa0); }
.barTrack .team,
.splitTrack .team   { background: linear-gradient(90deg, #7c5cff, #9b7cff); }
.barTrack .nflAvg,
.splitTrack .nflAvg { background: linear-gradient(90deg, #617086, #9aa6b8); }
.barTrack span,
.splitTrack span,
.splitTrack b {
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ---- Sleeper movement table: directional Net + Trend pill ---------- */
.sleeperUp { color: #45c08a; font-weight: 800; font-variant-numeric: tabular-nums; }
.sleeperDown { color: #fb7185; font-weight: 800; font-variant-numeric: tabular-nums; }
.sleeperFlat { color: var(--muted-2); }
.sleeperTrend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.sleeperTrend.sleeperUp   { background: rgba(69, 192, 138, 0.14); border: 1px solid rgba(69, 192, 138, 0.34); }
.sleeperTrend.sleeperDown { background: rgba(251, 113, 133, 0.14); border: 1px solid rgba(251, 113, 133, 0.32); }
.sleeperTrend.sleeperFlat { background: rgba(148, 163, 184, 0.10); border: 1px solid rgba(148, 163, 184, 0.20); color: var(--muted); }

/* =====================================================================
   ASSISTANT DECISION SNAPSHOT  (v6)
   At-a-glance draft-decision visuals for the recommended player:
   a take-now/wait survival meter, opportunity-cost readout, and a
   best-vs-next profile radar.
   ===================================================================== */
.assistantSnapshot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin: 14px 0;
  align-items: stretch;
}
@media (max-width: 900px) {
  .assistantSnapshot { grid-template-columns: 1fr; }
}
.assistantSnapshotLeft {
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;
  align-content: start;
}

/* Survival meter ----------------------------------------------------- */
.survivalMeter {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  background: var(--elev-1, linear-gradient(180deg, #15233a, #101a2b));
  box-shadow: var(--shadow-soft), var(--hairline-top);
}
.survivalHead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.survivalHead span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.survivalHead strong {
  font-family: var(--font-display, "Archivo", Inter, sans-serif);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.survivalTrack {
  position: relative;
  height: 9px;
  margin: 9px 0 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  overflow: hidden;
}
.survivalTrack i {
  display: block;
  height: 100%;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.survivalMeter.good .survivalTrack i { background: linear-gradient(90deg, #2ea27a, #45c08a); }
.survivalMeter.warn .survivalTrack i { background: linear-gradient(90deg, #d8932f, #f2b441); }
.survivalMeter.bad  .survivalTrack i { background: linear-gradient(90deg, #e0556a, #fb7185); }
.survivalMeter.good .survivalHead strong { color: #69d6a6; }
.survivalMeter.warn .survivalHead strong { color: #f6c662; }
.survivalMeter.bad  .survivalHead strong { color: #fb8a98; }
.survivalMeter p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Opportunity cost --------------------------------------------------- */
.oppCost {
  position: relative;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  background: var(--elev-1, linear-gradient(180deg, #15233a, #101a2b));
  box-shadow: var(--shadow-soft), var(--hairline-top);
  overflow: hidden;
}
.oppCost::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--warn);
}
.oppCost.good::before { background: var(--good); }
.oppCost.bad::before  { background: var(--bad); }
.oppCost span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.oppCost strong {
  display: block;
  margin-top: 3px;
  color: var(--ink-strong);
  font-size: 16px;
  font-weight: 800;
}
.oppCost em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.oppCost .oppDelta { color: var(--ink-strong); font-weight: 850; }
.oppCost.bad .oppDelta { color: #fb8a98; }
.oppCost.good .oppDelta { color: #69d6a6; }

/* Best-vs-next radar wrapper ----------------------------------------- */
.assistantSnapshotRadar {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  background: var(--elev-1, linear-gradient(180deg, #15233a, #101a2b));
  box-shadow: var(--shadow-soft), var(--hairline-top);
  overflow: hidden;
}
.snapshotRadarLabel {
  padding: 11px 14px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.assistantSnapshotRadar .compareRadarCard {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* =====================================================================
   ASSISTANT RIGHT-RAIL MODULES  (v6)
   Roster construction board, positional tier cliffs, best-by-position,
   and value-falling watch list. Position accents use the --pos-* tokens.
   ===================================================================== */

/* Roster construction board ----------------------------------------- */
.asstRosterGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.asstSlot {
  display: grid;
  gap: 1px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--pos-dot, var(--muted-2));
  border-radius: 8px;
  background: rgba(11, 20, 36, 0.6);
  min-width: 0;
}
.asstSlot[data-pos="QB"]  { --pos-dot: var(--pos-qb); }
.asstSlot[data-pos="RB"]  { --pos-dot: var(--pos-rb); }
.asstSlot[data-pos="WR"]  { --pos-dot: var(--pos-wr); }
.asstSlot[data-pos="TE"]  { --pos-dot: var(--pos-te); }
.asstSlot[data-pos="FLEX"]{ --pos-dot: #8aa0bd; }
.asstSlot[data-pos="DST"] { --pos-dot: var(--pos-dst); }
.asstSlot[data-pos="K"]   { --pos-dot: var(--pos-k); }
.asstSlot span {
  color: var(--muted-2);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.asstSlot strong {
  color: var(--ink-strong);
  font-size: 12.5px;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asstSlot.open { background: rgba(148, 163, 184, 0.05); border-style: dashed; }
.asstSlot.open strong { color: var(--muted); font-weight: 700; }
.asstSlot.target {
  border-style: solid;
  border-color: var(--accent-edge);
  background: rgba(96, 165, 250, 0.10);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.22);
}
.asstSlot.target strong { color: var(--accent-2); font-weight: 850; }
.rosterBenchRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}
.rosterBenchRow span {
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.benchPips { display: flex; gap: 3px; flex: 1; }
.benchPips i {
  flex: 1;
  height: 7px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.16);
}
.benchPips i.filled { background: linear-gradient(90deg, #3b82f6, #5ba6ff); }
.rosterBenchRow em {
  color: var(--ink-strong);
  font-style: normal;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Positional tier cliffs -------------------------------------------- */
.tierCliffList { display: grid; gap: 8px; margin-top: 6px; }
.tierCliffRow { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; }
.tcPos { font-weight: 850; font-size: 12px; color: var(--ink-strong); }
.tierCliffRow[data-pos="RB"] .tcPos { color: var(--pos-rb); }
.tierCliffRow[data-pos="WR"] .tcPos { color: var(--pos-wr); }
.tierCliffRow[data-pos="TE"] .tcPos { color: var(--pos-te); }
.tierCliffRow[data-pos="QB"] .tcPos { color: var(--pos-qb); }
.tcBar { height: 9px; border-radius: 999px; background: rgba(148, 163, 184, 0.14); overflow: hidden; }
.tcBar i { display: block; height: 100%; border-radius: 999px; }
.tierCliffRow.good .tcBar i { background: linear-gradient(90deg, #2ea27a, #45c08a); }
.tierCliffRow.warn .tcBar i { background: linear-gradient(90deg, #d8932f, #f2b441); }
.tierCliffRow.bad  .tcBar i { background: linear-gradient(90deg, #e0556a, #fb7185); }
.tierCliffRow em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.tierCliffRow.good em { color: #69d6a6; }
.tierCliffRow.warn em { color: #f6c662; }
.tierCliffRow.bad  em { color: #fb8a98; }

/* Best available by position ---------------------------------------- */
.bestByPosList { display: grid; gap: 6px; margin-top: 4px; }
.bestByPosRow {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(11, 20, 36, 0.5);
}
.bbpPos {
  font-weight: 850;
  font-size: 11px;
  text-align: center;
  color: var(--ink-strong);
}
.bestByPosRow[data-pos="RB"] .bbpPos { color: var(--pos-rb); }
.bestByPosRow[data-pos="WR"] .bbpPos { color: var(--pos-wr); }
.bestByPosRow[data-pos="TE"] .bbpPos { color: var(--pos-te); }
.bestByPosRow[data-pos="QB"] .bbpPos { color: var(--pos-qb); }
.bbpMain { min-width: 0; }
.bbpMain strong { display: block; font-size: 12.5px; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbpMain em { font-style: normal; font-size: 11px; color: var(--muted); }
.bbpTag {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.bbpTag.good { background: rgba(69, 192, 138, 0.15); color: #69d6a6; }
.bbpTag.warn { background: rgba(242, 180, 65, 0.15); color: #f6c662; }
.bbpTag.bad  { background: rgba(251, 113, 133, 0.15); color: #fb8a98; }
.bbpTag.neutral { background: rgba(148, 163, 184, 0.14); color: var(--muted); }

/* Value falling to you ---------------------------------------------- */
.valueFallingList { display: grid; gap: 6px; margin-top: 4px; }
.valueFallingRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--pos-dot, var(--muted-2));
  border-radius: 8px;
  background: rgba(11, 20, 36, 0.5);
}
.valueFallingRow[data-pos="RB"] { --pos-dot: var(--pos-rb); }
.valueFallingRow[data-pos="WR"] { --pos-dot: var(--pos-wr); }
.valueFallingRow[data-pos="TE"] { --pos-dot: var(--pos-te); }
.valueFallingRow[data-pos="QB"] { --pos-dot: var(--pos-qb); }
.vfMain { min-width: 0; }
.vfMain strong { display: block; font-size: 12.5px; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vfMain em { font-style: normal; font-size: 11px; color: var(--muted); }
.vfStat { text-align: right; white-space: nowrap; }
.vfStat span { display: block; font-size: 10px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.vfStat b { color: #69d6a6; font-size: 12px; font-weight: 850; font-variant-numeric: tabular-nums; }

/* =====================================================================
   VISUAL POLISH PASS (appended — wins on source order)
   Design-only changes: filter bars, unified headers, semantic color,
   frozen identity block, position color coding, sleeper movement.
   ===================================================================== */

/* --- 1. Horizontal filter bars (Market + Players) -------------------- */
#marketView .marketControls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  align-items: end;
}
#playersView .playersToolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: end;
}

/* --- 2. Unified hero-style section headers -------------------------- */
.panelHeader.sectionHero {
  align-items: flex-end;
  min-height: 0;
  padding: 18px 18px 15px;
  background: linear-gradient(90deg, rgba(23, 36, 58, 0.96), rgba(13, 24, 41, 0.72));
}
.sectionHeroText { display: grid; gap: 2px; }
.panelHeader.sectionHero .heroEyebrow {
  display: block;
  color: #8fa2bb;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.panelHeader.sectionHero h2 {
  margin-top: 3px;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #f8fbff;
}
.panelHeader.sectionHero .heroSub {
  margin-top: 5px;
  max-width: 78ch;
  color: #c6d3e3;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}

/* --- 4. Reserve red for risk: neutralize team stat magnitudes ------- */
.teamContextScore.positive strong,
.teamContextScore.negative strong {
  color: var(--ink);
}

/* --- Position color coding on the board Pos cell -------------------- */
.boardPanel td[data-col="pos"] .tableLinkButton { font-weight: 800; }
.boardPanel .tableLinkButton[data-pos-popup="QB"]  { color: var(--pos-qb); }
.boardPanel .tableLinkButton[data-pos-popup="RB"]  { color: var(--pos-rb); }
.boardPanel .tableLinkButton[data-pos-popup="WR"]  { color: var(--pos-wr); }
.boardPanel .tableLinkButton[data-pos-popup="TE"]  { color: var(--pos-te); }
.boardPanel .tableLinkButton[data-pos-popup="K"]   { color: var(--pos-k); }
.boardPanel .tableLinkButton[data-pos-popup="DST"] { color: #94a3b8; }

/* Draft Board team bubbles: continuous offensive-strength signal.
   The score is already normalized to 0-100 in team context, so the bubble
   uses five readable steps from green (best) through pale red to red. */
.boardPanel td[data-col="team"] .teamOffenseBubble {
  --team-bubble-bg: rgba(248, 113, 113, 0.11);
  --team-bubble-border: rgba(248, 113, 113, 0.28);
  --team-bubble-ink: #FECACA;
  border-color: var(--team-bubble-border);
  background: var(--team-bubble-bg);
  color: var(--team-bubble-ink);
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, filter 140ms ease;
}
.boardPanel td[data-col="team"] .teamOffenseBubble.offenseElite {
  --team-bubble-bg: rgba(1, 45, 35, 0.96);
  --team-bubble-border: #10B981;
  --team-bubble-ink: #FDE047;
}
.boardPanel td[data-col="team"] .teamOffenseBubble.offenseGood {
  --team-bubble-bg: rgba(22, 163, 74, 0.30);
  --team-bubble-border: #4ADE80;
  --team-bubble-ink: #DCFCE7;
}
.boardPanel td[data-col="team"] .teamOffenseBubble.offenseNeutral {
  --team-bubble-bg: rgba(134, 239, 172, 0.16);
  --team-bubble-border: #86EFAC;
  --team-bubble-ink: #BBF7D0;
}
.boardPanel td[data-col="team"] .teamOffenseBubble.offenseWeak {
  --team-bubble-bg: rgba(239, 68, 68, 0.34);
  --team-bubble-border: #F87171;
  --team-bubble-ink: #FECACA;
}
.boardPanel td[data-col="team"] .teamOffenseBubble.offenseBad {
  --team-bubble-bg: rgba(69, 10, 10, 0.96);
  --team-bubble-border: #F87171;
  --team-bubble-ink: #FDE047;
}
.boardPanel td[data-col="team"] .teamOffenseBubble:hover,
.boardPanel td[data-col="team"] .teamOffenseBubble:focus-visible {
  border-color: var(--team-bubble-ink);
  filter: brightness(1.12);
  outline: none;
}

/* --- Frozen identity block: fixed widths + correct sticky offsets ---
   Existing offsets (88/152) were smaller than real column widths, so
   Tracker/Rank/Player overlapped when scrolled. Pin Tracker, Rank,
   Player, Pos, Team with deterministic widths and cumulative offsets. */
.boardPanel th:nth-child(1), .boardPanel td:nth-child(1) {
  left: 0; width: 140px; min-width: 140px; max-width: 140px; overflow: hidden;
}
.boardPanel th:nth-child(2), .boardPanel td:nth-child(2) {
  left: 140px; width: 74px; min-width: 74px; max-width: 74px;
}
.boardPanel th:nth-child(3), .boardPanel td:nth-child(3) {
  left: 214px; width: 238px; min-width: 238px; max-width: 238px; overflow: hidden;
}
.boardPanel th:nth-child(4), .boardPanel td:nth-child(4) {
  position: sticky; left: 452px; z-index: 5;
  width: 72px; min-width: 72px; max-width: 72px;
  box-shadow: 1px 0 0 var(--line);
}
.boardPanel th:nth-child(5), .boardPanel td:nth-child(5) {
  position: sticky; left: 524px; z-index: 5;
  width: 72px; min-width: 72px; max-width: 72px;
  box-shadow: 6px 0 12px -6px rgba(0, 0, 0, 0.55), 1px 0 0 var(--line);
}
.boardPanel th:nth-child(4), .boardPanel th:nth-child(5) { z-index: 6; }
/* keep the pinned Pos/Team cells opaque across every row state */
.boardPanel th:nth-child(4), .boardPanel td:nth-child(4),
.boardPanel th:nth-child(5), .boardPanel td:nth-child(5) { background: #0d1829; }
.boardPanel tbody tr:nth-child(even) td:nth-child(4),
.boardPanel tbody tr:nth-child(even) td:nth-child(5) { background: #0f1b2d; }
.boardPanel tbody tr:hover td:nth-child(4),
.boardPanel tbody tr:hover td:nth-child(5) { background: #152741; }
.boardPanel tbody tr.selected td:nth-child(4),
.boardPanel tbody tr.selected td:nth-child(5) { background: rgba(96, 165, 250, 0.16); }
/* truncate long identity content instead of spilling past the frozen block */
.boardPanel td:nth-child(3) .playerNameButton {
  display: inline-block; max-width: 214px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
}
.boardPanel td:nth-child(3) span { max-width: 214px; }

/* --- Sleeper movement: dim zero/empty so real movers stand out ------ */
.sleeperZero { color: var(--muted); opacity: 0.5; }

/* --- Board header: keep "Sleeper ADP" + info icon on one line -------
   The header text and its info icon could wrap onto two lines when the
   column got squeezed (e.g. detail panel open, narrower window). Group
   them in an explicit non-wrapping flex row, and give the column a
   little extra breathing room. */
.boardPanel th[data-col="adp"] {
  min-width: 118px;
}

/* Keep the row-level Next Pick verdict compact so the later badge columns
   remain visible in the draft-board scan. */
.boardPanel th[data-col="nextpick"],
.boardPanel td[data-col="nextpick"] {
  width: 158px;
  min-width: 158px;
  max-width: 158px;
  white-space: normal;
}
.boardPanel td[data-col="nextpick"] .nextPickCell {
  width: 100%;
  min-width: 0;
  gap: 2px;
  padding: 5px 6px;
}
.boardPanel td[data-col="nextpick"] .nextPickCell strong {
  font-size: 0.67rem;
  line-height: 1.1;
}
.boardPanel td[data-col="nextpick"] .nextPickCell span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.61rem;
  line-height: 1.15;
}
.thLabelRow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.thLabelRow .infoIcon {
  flex-shrink: 0;
}

/* --- Use more of wide / ultrawide screens (was capped at 1920px) ----- */
main.appShell {
  width: 100%;
  max-width: 2600px;
}

/* --- Compare "Team/Position Context" cards: readable rank numbers ----
   The rank number had light-colored text sitting on a same-hue fill
   (e.g. light-red on red), which was hard to read. Drop the fill and use
   neutral ink; the bar underneath still carries the good/bad direction. */
.teamRankCard strong,
.teamRankCard.positive strong,
.teamRankCard.negative strong {
  background: none;
  color: var(--ink);
}

/* --- Manager Tendencies: standardize the magnitude bar charts -------
   The shared .info fill is a gradient sized to each bar's own width, so
   short bars render dark-blue and full bars render light-blue — the same
   chart looks inconsistent bar-to-bar. Use one flat fill so every bar in
   the position-mix and average-round charts reads identically. (The
   stacked-rounds chart uses .stackTrack, so it is intentionally left as
   its position-colored segments.) */
.managerProfileStack .barTrack span,
.managerProfileStack .barTrack .info,
.managerProfileStack .barTrack .neutral,
.managerProfileStack .barTrack .positive,
.managerProfileStack .barTrack .negative {
  background: var(--accent);
}
/* .managerSubStat's "Record vs. all-play" bar uses .positive/.negative
   for a real directional signal (ahead of / behind all-play win rate),
   unlike .managerProfileStack above where those tones never actually
   occur. Flatten the length-dependent gradient the same way, but keep
   the semantic green/red instead of collapsing everything to blue. */
.managerSubStat .barTrack span,
.managerSubStat .barTrack .info,
.managerSubStat .barTrack .neutral {
  background: var(--accent);
}
.managerSubStat .barTrack .positive { background: var(--good); }
.managerSubStat .barTrack .negative { background: var(--bad); }

/* --- Header/tabs: stop stretching into dead space on wide screens ---
   A stale rule from an older header layout ("Chart Interaction and Saved
   View Polish", .presetSelectLabel/.presetButton no longer exist in the
   markup) was still setting `.headerActions { min-width: min(820px,
   68vw) }`, which forced the search box to ~880px wide on large
   monitors with a huge gap before it. Also: the topbar/tabs bars are
   full-bleed (background spans edge to edge, keep that), but their
   *content* shouldn't stretch to fill an ultra-wide window — center it
   within a comfortable max width via padding, same idea as .appShell's
   own centering, so it doesn't fight the wide data panels below it. */
.headerActions {
  min-width: 0;
  max-width: 460px;
  flex: 0 1 auto;
}
#searchInput {
  max-width: 300px;
}
.globalSearch {
  position: relative;
  min-width: 0;
  width: min(300px, 100%);
  z-index: 140;
}
/* The tab bar is a later sibling and intentionally sits above most content.
   Keep the topbar stacking context one level higher so the search menu can
   extend over the tabs instead of being painted behind them. */
.topbar { z-index: 131; }
.tabs { z-index: 130; }
.globalSearch #searchInput {
  width: 100%;
}
.globalSearch:focus-within #searchInput { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96, 165, 250, .18); outline: none; }
.globalSearchDropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 280px;
  max-height: min(520px, calc(100vh - 120px));
  overflow-y: auto;
  padding: 7px;
  border: 1px solid #30435f;
  border-radius: 10px;
  background: #101a2b;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .48);
  z-index: 300;
}
.globalSearchSection {
  padding: 7px 9px 4px;
  color: #8fa4c0;
  font-family: var(--font-display, Inter, sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.globalSearchResult {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #eaf2ff;
  cursor: pointer;
  text-align: left;
}
.globalSearchResult:hover,
.globalSearchResult.is-highlighted { background: rgba(96, 165, 250, .16); }
.globalSearchResult strong { font-size: 12px; }
.globalSearchResult span { color: #91a4bf; font-size: 10.5px; }
.globalSearchEmpty { padding: 14px 10px; color: #aab8cb; font-size: 12px; }
@media (max-width: 480px) {
  .globalSearch, .globalSearchDropdown { width: 100%; min-width: 0; }
  .globalSearchDropdown { position: fixed; top: 118px; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 136px); }
}
.topbar,
.tabs {
  /* Constant is in pre-zoom local units (body has zoom:1.2 below), so
     divide the intended ~2000px visual cap by 1.2 to get ~1667px here. */
  padding-left: max(26px, calc((100% - 1667px) / 2));
  padding-right: max(26px, calc((100% - 1667px) / 2));
}

/* Align the product title with the Sleeper connection header below it. */
.topbar {
  padding-left: 22px;
}

/* TrueFocus-style treatment for the Auto Draft product mark. */
.trueFocus {
  position: relative;
  width: fit-content;
  user-select: none;
}

.trueFocusWords {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
}

.trueFocusWord {
  position: relative;
  cursor: default;
  filter: blur(0);
  transition: filter 500ms ease;
}

.trueFocusWord.isUnfocused {
  filter: blur(4px);
}

.trueFocusOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  transition: transform 500ms ease, width 500ms ease, height 500ms ease;
}

.trueFocusCorner {
  position: absolute;
  width: 5px;
  height: 6px;
  border-color: #60A5FA;
  border-style: solid;
  filter: drop-shadow(0 0 4px rgba(96, 165, 250, 0.9));
}

.trueFocusCornerTl {
  top: -2px;
  left: 0;
  border-width: 1.5px 0 0 1.5px;
  border-radius: 3px 0 0 0;
}

.trueFocusCornerTr {
  top: -2px;
  right: 0;
  border-width: 1.5px 1.5px 0 0;
  border-radius: 0 3px 0 0;
}

.trueFocusCornerBl {
  bottom: -2px;
  left: 0;
  border-width: 0 0 1.5px 1.5px;
  border-radius: 0 0 0 3px;
}

.trueFocusCornerBr {
  right: 0;
  bottom: -2px;
  border-width: 0 1.5px 1.5px 0;
  border-radius: 0 0 3px 0;
}

@media (prefers-reduced-motion: reduce) {
  .trueFocusWord,
  .trueFocusOverlay {
    transition: none;
  }
}
/* Padding insets the bar, but the tab row still left-aligns inside that
   inset, leaving nearly all the slack trailing on the right. Center the
   tabs themselves too — scoped to desktop widths only, since at narrow
   widths tabs need to overflow-scroll (flex-start) rather than center,
   which can clip the start of scrollable content in some engines. */
@media (min-width: 1300px) {
  .tabs { justify-content: center; }
}

/* --- Draft Board: single roster-pressure notice, not a per-row badge -
   See rosterPressureBadge()/renderBoard() in script.js: the per-row
   "Select Team" badge was suppressed when no team is selected, and this
   one banner takes its place above the table. */
.rosterPressureNotice {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid rgba(91, 157, 249, 0.3);
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.5;
}
.rosterPressureNotice strong { color: var(--ink-strong); }

/* --- Market/Model weight sliders: gradient fill instead of flat blue -
   accent-color only accepts a solid <color>, not a gradient, so the fill
   is repainted manually. --fill (a % custom property) is kept in sync by
   setWeights() in script.js on every update path (drag, +/-, number
   input, initial load). The intermediate color stop is expressed as
   half of --fill so it stays valid at any fill amount (a fixed % stop
   would break monotonic-stop rules once fill drops below it). Firefox
   gets the simpler native ::-moz-range-progress fill, no JS needed. */
.weightControl input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.weightControl input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #60a5fa 0%,
    #818cf8 calc(var(--fill, 50%) * 0.5),
    #38bdf8 var(--fill, 50%),
    rgba(148, 163, 184, 0.28) var(--fill, 50%),
    rgba(148, 163, 184, 0.28) 100%
  );
}
.weightControl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #0b1220;
  background: #dbeafe;
  box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.weightControl input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.28);
}
.weightControl input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #60a5fa 0%, #818cf8 55%, #38bdf8 100%);
}
.weightControl input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #0b1220;
  background: #dbeafe;
  box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* --- Jump-to-section nav (Market, League History) --------------------
   Sticks just below the sticky topbar+tabs (74px + ~56px tall) so it
   doesn't overlap them. Rebuilt by buildJumpNav() in script.js. */
.jumpNav {
  position: sticky;
  top: 132px;
  z-index: 8;
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(10, 14, 22, 0.92);
  backdrop-filter: blur(6px);
  overflow-x: auto;
}
.jumpNavPill {
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.jumpNavPill:hover {
  border-color: rgba(129, 140, 248, 0.4);
  color: var(--ink);
}
.jumpNavPill.active {
  border-color: rgba(129, 140, 248, 0.55);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.22) 0%, rgba(129, 140, 248, 0.22) 55%, rgba(56, 189, 248, 0.22) 100%);
  color: var(--ink-strong);
}

/* Shared internal page index. League History is the visual reference for
   every long-form workspace index. */
.pageIndex {
  position: sticky;
  top: 132px;
  z-index: 8;
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(10, 14, 22, 0.94);
  backdrop-filter: blur(6px);
  overflow-x: auto;
}
.pageIndex .jumpNavPill {
  flex: none;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: #B9C9DD;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.pageIndex .jumpNavPill:hover {
  border-color: rgba(96, 165, 250, .48);
  background: rgba(96, 165, 250, .12);
  color: #F1F7FF;
}
.pageIndex .jumpNavPill:focus-visible {
  border-color: #38BDF8;
  background: rgba(56, 189, 248, .14);
  color: #F8FCFF;
  outline: 2px solid #38BDF8;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .14);
}
.pageIndex .jumpNavPill.active {
  border-color: rgba(96, 165, 250, .9);
  background: var(--lh-info, #60A5FA);
  color: #08111F;
  font-weight: 600;
}

#teamsView .teamDashboard {
  padding-bottom: min(45vh, 360px);
}

[data-jump-anchor] {
  scroll-margin-top: 168px;
}

/* Tab-style page indexes swap the selected content panel in place. */
.pageIndexPanelHidden { display: none !important; }

/* --- Player Detail drawer: cut the repeated identity + status noise --
   1) The drawer's own header already shows name + position/team, so the
      snapshot card's inner name heading (still needed as the ONLY name
      display in the non-drawer aside "Player Detail" panel usage of the
      same markup) is hidden only when nested inside the drawer.
   2) "Unavailable" was a disabled <button> styled identically to the
      real Mark My Pick / Mark Other Pick actions, next to non-interactive
      stat chips — it read as a broken control. It's now a plain chip. */
.playerDrawer .decisionSnapshotMain h3 {
  display: none;
}
.detailStatusChip {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.08);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}

/* --- Players list rows: faded brand gradient on hover/select --------
   Same treatment as the tab hover and jump-nav pills: a low-opacity
   version of the blue -> indigo -> sky gradient instead of a flat blue
   tint, so hover/selection states read as one consistent theme. */
.playerListItem:hover {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.14) 0%, rgba(129, 140, 248, 0.14) 55%, rgba(56, 189, 248, 0.14) 100%);
  box-shadow: inset 3px 0 0 rgba(129, 140, 248, 0.55);
}
.playerListItem.active {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.22) 0%, rgba(129, 140, 248, 0.22) 55%, rgba(56, 189, 248, 0.22) 100%);
  box-shadow: inset 3px 0 0 #818cf8;
}

/* --- Draft Board rows: same gradient treatment, kept fully opaque ----
   Same blue -> indigo -> sky family as tabs/scrollbars/players list, but
   as solid pre-blended hex stops rather than translucent rgba: the
   frozen identity columns (Tracker/Rank/Player/Pos/Team) must stay
   fully opaque so they keep occluding the stat columns scrolling behind
   them (see the frozen-column block above) — a semi-transparent overlay
   there would let the scrolling columns show through. */
.boardPanel tbody tr:hover td,
.boardPanel tbody tr:hover td:first-child,
.boardPanel tbody tr:hover td:nth-child(1),
.boardPanel tbody tr:hover td:nth-child(2),
.boardPanel tbody tr:hover td:nth-child(3),
.boardPanel tbody tr:hover td:nth-child(4),
.boardPanel tbody tr:hover td:nth-child(5) {
  background: linear-gradient(90deg, #16233c, #1a2645, #12303f);
}
.boardPanel tbody tr.selected td,
.boardPanel tbody tr.selected td:first-child,
.boardPanel tbody tr.selected td:nth-child(1),
.boardPanel tbody tr.selected td:nth-child(2),
.boardPanel tbody tr.selected td:nth-child(3),
.boardPanel tbody tr.selected td:nth-child(4),
.boardPanel tbody tr.selected td:nth-child(5) {
  background: linear-gradient(90deg, #1c3357, #223060, #14384f);
  box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.42), inset 0 -1px 0 rgba(147, 197, 253, 0.42);
}

/* --- Manager Tendencies: fill the empty left column ------------------
   The left profile card only had a short narrative + metric grid, while
   the right stack has 4 dense cards — grid default align-items:stretch
   forced the left card to match the right's height, leaving a large
   empty void below its content. Added two real analysis blocks (using
   data the render function already computed but never displayed:
   activity vs league average, and record vs all-play "luck check"), and
   stopped forcing the stretch so any remaining gap isn't a visible
   empty box. */
.managerProfileLayout {
  align-items: start;
}
.managerSubStat {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.managerSubStat .visualBar + .visualBar {
  margin-top: 8px;
}
.managerSubStat .takeaway {
  margin-top: 10px;
}

/* --- Manager Tendencies: position-color the lower lists --------------
   "Recent drafted players" and "Potential values/reaches" showed every
   position label in the same flat purple (positionPopoutLink's default
   .inlinePopoutLink.position color), losing the QB/RB/WR/TE color
   coding used everywhere else (board Pos cell, position-mix bars).
   Scoped to just these two lists so the global flat-purple link color
   elsewhere in the app is untouched. */
.wrappedMiniList [data-open-position],
.draftSignalList [data-open-position] {
  font-weight: 800;
}
.wrappedMiniList [data-open-position="QB"],
.draftSignalList [data-open-position="QB"] { color: var(--pos-qb); }
.wrappedMiniList [data-open-position="RB"],
.draftSignalList [data-open-position="RB"] { color: var(--pos-rb); }
.wrappedMiniList [data-open-position="WR"],
.draftSignalList [data-open-position="WR"] { color: var(--pos-wr); }
.wrappedMiniList [data-open-position="TE"],
.draftSignalList [data-open-position="TE"] { color: var(--pos-te); }
.wrappedMiniList [data-open-position="K"],
.draftSignalList [data-open-position="K"] { color: var(--pos-k); }
.wrappedMiniList [data-open-position="DST"],
.draftSignalList [data-open-position="DST"] { color: var(--pos-dst); }

/* --- Tab hover: faded brand gradient instead of flat gray ------------ */
.tabs .tab:hover {
  color: var(--ink-strong);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.16) 0%, rgba(129, 140, 248, 0.16) 55%, rgba(56, 189, 248, 0.16) 100%);
}

/* --- Global UI scale ------------------------------------------------
   The app uses fixed px font sizes throughout, which read very small on
   large / high-resolution monitors. Scale the entire UI up uniformly
   (fonts, spacing, layout) instead of hand-editing hundreds of rules.
   Bump or lower this single number to taste (1.0 = original size). */
body {
  zoom: 1.2;
}

/* --- Branded scrollbars (match the Chat button gradient) ------------
   The gradient runs ALONG each bar's length so the full blue->indigo->sky
   range is visible: top->bottom on vertical bars, left->right on
   horizontal ones (e.g. the wide Draft Board table). A diagonal gradient
   on a thin bar only shows the middle color, which read as flat purple. */
/* IMPORTANT: any standard `scrollbar-color` value makes Chromium ignore
   the ::-webkit-scrollbar gradient rules below. Several rules (incl.
   .tableWrap) hard-set a gray scrollbar-color, which is why the Draft
   Board bars showed gray. Force scrollbar-color back to auto on every
   element so the webkit gradient wins. (Firefox falls back to default
   bars — it can't render gradient scrollbars anyway.) */
*,
.tableWrap,
.keeperList,
.tabs,
.playerDrawer,
.teamDrawer,
.detailInsightDrawer,
.chatPanel {
  scrollbar-color: auto;
  scrollbar-width: auto;
}
*::-webkit-scrollbar { width: 14px; height: 14px; }

/* vertical bars: gradient top -> bottom */
*::-webkit-scrollbar-thumb:vertical,
.tableWrap::-webkit-scrollbar-thumb:vertical,
.keeperList::-webkit-scrollbar-thumb:vertical,
.tabs::-webkit-scrollbar-thumb:vertical {
  background: linear-gradient(180deg, #60a5fa 0%, #818cf8 55%, #38bdf8 100%);
  background-clip: padding-box;
}
/* horizontal bars (Draft Board table, tab strip): gradient left -> right */
*::-webkit-scrollbar-thumb:horizontal,
.tableWrap::-webkit-scrollbar-thumb:horizontal,
.keeperList::-webkit-scrollbar-thumb:horizontal,
.tabs::-webkit-scrollbar-thumb:horizontal {
  background: linear-gradient(90deg, #60a5fa 0%, #818cf8 55%, #38bdf8 100%);
  background-clip: padding-box;
}
/* shared thumb shape (fallback fill for either orientation) */
*::-webkit-scrollbar-thumb,
.tableWrap::-webkit-scrollbar-thumb,
.keeperList::-webkit-scrollbar-thumb,
.tabs::-webkit-scrollbar-thumb {
  background: var(--brand-grad);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover,
.tableWrap::-webkit-scrollbar-thumb:hover,
.keeperList::-webkit-scrollbar-thumb:hover,
.tabs::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.14);
}
*::-webkit-scrollbar-track,
.tableWrap::-webkit-scrollbar-track,
.keeperList::-webkit-scrollbar-track,
.tabs::-webkit-scrollbar-track { background: rgba(148, 163, 184, 0.08); }
*::-webkit-scrollbar-corner { background: transparent; }

/* --- Compare: match the two charts in the row to the same size ------
   Both SVGs previously rendered at their own aspect-ratio height
   (scatter ~477px, range ~500px+), so the row grew tall and the wide
   300x152 range viewBox upscaled its text/bars ~2x vs the scatter.
   Pin both to one height so the cards match and neither looks oversized. */
.compareScatterSvg,
.compareRangeSvg {
  width: 100%;
  height: 320px;
  min-height: 0;
}

@media (max-width: 720px) {
  .compareChartGrid .chartFrame {
    min-height: 400px;
    grid-template-rows: 58px minmax(292px, 1fr) auto;
  }
  .compareChartGrid .chartBody {
    min-height: 292px;
    padding: 10px 10px 8px;
  }
  .compareScatterSvg,
  .compareRangeSvg {
    height: 270px;
  }
  .compareRadarSvg {
    max-width: 360px;
  }
  .compareDecisionBarsCard .groupedBarRow,
  .compareBarsCard .groupedBarRow,
  .assistantDecisionBarsCard .groupedBarRow {
    grid-template-columns: minmax(68px, .42fr) minmax(130px, 1.9fr);
  }
  .compareDecisionBarsCard .groupedBarRow small,
  .compareBarsCard .groupedBarRow small,
  .assistantDecisionBarsCard .groupedBarRow small {
    grid-column: 2;
    margin-top: -6px;
  }
  .rangeValueSummary {
    font-size: 8.5px;
  }
}

/* --- News tab: filter row + card grid ------------------------------- */

.newsControls {
  display: grid;
  /* auto-fit rather than a fixed column count -- this row grew from 3
     filters to filters + freshness/source/topic/confidence/alignment/
     availability/min-mentions/sort, so a hardcoded column list would badly
     misalign once more than 4 controls exist. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(15, 27, 45, 0.78);
  box-shadow: var(--shadow-soft);
}

.newsControls label:first-child {
  grid-column: span 2;
}

.newsPresets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}

.newsDraftRelevance {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}

.newsDraftRelevance.good {
  color: var(--good);
}

.newsControls label {
  display: grid;
  gap: 6px;
  color: #8fa2bb;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.newsControls input,
.newsControls select {
  height: 35px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  padding: 7px 10px;
  background: rgba(8, 17, 31, 0.92);
  color: #eef4ff;
  box-shadow: none;
}

.newsControls .resetButton {
  height: 35px;
  border-radius: 10px;
  background: rgba(96, 165, 250, 0.10);
  color: #dbeafe;
}

.newsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.newsCard {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease;
}

.newsCard:hover,
.newsCard:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent-2);
  outline: none;
}

.newsCard header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.newsCard header span {
  color: var(--muted);
  font-size: 11px;
}

/* Compact grid card body -- a scan layer, not the full analysis. See
   newsCompactCardHtml() in script.js. */
.newsCompactVerdict {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.newsCompactTakeaway {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.4;
}

.newsActiveTags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.newsCompactMeta {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11.5px;
}

.newsCardActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.newsCardActionBtn {
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  padding: 5px 10px;
  background: rgba(15, 27, 45, 0.6);
  color: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.newsCardActionBtn:hover,
.newsCardActionBtn:focus-visible {
  border-color: var(--accent-2);
  outline: none;
}

.newsBookmarkBtn.active,
#newsBookmarkedOnlyToggle.active {
  border-color: var(--warn);
  color: var(--warn);
  background: rgba(245, 158, 11, 0.1);
}

/* Detail-view header hierarchy: primary verdict (the conclusion) -> supporting
   status (evidence quality, secondary) -> draft context (ranking context) --
   three different kinds of information, no longer one flat badge row. */
.newsPrimaryVerdict {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.newsVerdictHeadline {
  margin: 0;
  color: #e5e7eb;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.newsSupportingStatus {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.newsDraftContextRow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  font-size: 12px;
  color: var(--muted);
}

.newsDraftContextItem b {
  color: #e5e7eb;
  font-weight: 700;
  margin-right: 3px;
}

.newsKeywords,
.newsSignalTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.newsTakeaway {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.newsExecSummary {
  margin: 8px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent-2);
  border-radius: 0 8px 8px 0;
  background: rgba(96, 165, 250, 0.08);
}

.newsExecSummary span {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.newsExecSummary p {
  margin: 0;
  color: #e5e7eb;
  font-size: 13px;
  line-height: 1.5;
}

.newsSourceLink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
  color: var(--muted);
  font-size: 11px;
  text-decoration: none;
}

.newsSourceLink:hover {
  color: var(--accent-2);
  text-decoration: underline;
}

/* --- News tab: dashboard front page (KPI row + leaderboard panels) --- */

.newsKpiRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.newsLeaderboardGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.newsLeaderboardPanel {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  padding: 12px;
  background: rgba(15, 27, 45, 0.88);
}

.newsLeaderboardPanel h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.newsLeaderboardSortLabel {
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}

.newsLeaderboardMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.newsSentimentLegend,
.newsLeaderboardCounts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.newsSentimentLegend {
  margin: 6px 0 14px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.newsLeaderboardCounts {
  margin-top: 4px;
}

.newsNetSentiment {
  font-weight: 850;
}

.newsNetSentiment.good,
.newsSentimentLegend .good {
  color: var(--good);
}

.newsNetSentiment.bad,
.newsSentimentLegend .bad {
  color: var(--bad);
}

.newsNetSentiment.neutral,
.newsSentimentLegend .neutral {
  color: var(--muted);
}

.newsLeaderboardBar {
  display: flex;
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}

.newsLeaderboardBar i {
  display: block;
  min-width: 0;
}

.newsLeaderboardBar .good { background: var(--good); }
.newsLeaderboardBar .bad { background: var(--bad); }
.newsLeaderboardBar .neutral { background: var(--muted); }

.newsSentimentCount {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: help;
}

/* .miniPlayerButton span { display: block } (styles.css ~5378) is a
   compound selector (class+tag) that outranks the single-class flex rules
   above by CSS specificity regardless of source order, so every <span> in
   these leaderboard rows -- the meta line, the counts row, the bar segments
   -- was silently collapsing to one-per-line block stacking instead of the
   intended inline row. Re-declaring display here under a two-class selector
   restores the intended layout without touching the unrelated rule these
   other list items still rely on. */
.miniPlayerButton .newsLeaderboardMeta,
.miniPlayerButton .newsLeaderboardCounts {
  display: flex;
}

.miniPlayerButton .newsLeaderboardBar {
  display: flex;
}

.newsSentimentCount.good {
  color: var(--good);
}

.newsSentimentCount.bad {
  color: var(--bad);
}

.newsSentimentCount.neutral {
  color: var(--muted);
}

@media (max-width: 900px) {
  .newsKpiRow {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}

/* Secondary/operational metrics (players covered, active signal tags, cards
   with commentary) -- demoted below the decision-relevant KPI row above so
   pipeline-ish counts don't compete visually with what changed and matters. */
.newsKpiRowSecondary {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 2px 0 16px;
  padding: 8px 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(15, 27, 45, 0.5);
}

.newsKpiMini {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.newsKpiMini strong {
  font-size: 15px;
}

.newsKpiMini span {
  color: var(--muted);
  font-size: 11.5px;
}

/* Scored-sentiment context block -- makes the denominator of any "% positive"
   headline explicit (non-neutral scored mentions only) instead of an
   unlabeled ratio that can misread as "95% of all coverage." */
.newsWhatChangedDashboard {
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  background: rgba(15, 27, 45, 0.88);
}

.newsWhatChangedDashboard h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.newsWhatChangedDashboard h3 span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}

.newsWhatChangedEmpty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.newsSentimentContext {
  margin-bottom: 18px;
}

.newsSentimentContext h3 {
  margin: 0 0 4px;
  font-size: 14px;
}

.newsSentimentHeadline {
  margin: 0 0 6px;
  font-size: 13px;
}

.newsSentimentHeadline strong {
  font-size: 16px;
}

.newsSentimentSubnote {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11.5px;
  max-width: 640px;
}

.newsSentimentSegments {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}

.newsSentimentSegments .good { color: var(--good); }
.newsSentimentSegments .bad { color: var(--bad); }
.newsSentimentSegments .neutral { color: var(--muted); }
.newsSentimentSegments .unscored { color: var(--muted); cursor: help; }

.newsSentimentBar4 {
  display: flex;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}

.newsSentimentBar4 i { display: block; min-width: 0; }
.newsSentimentBar4 .good { background: var(--good); }
.newsSentimentBar4 .bad { background: var(--bad); }
.newsSentimentBar4 .neutral { background: var(--muted); }
.newsSentimentBar4 .unscored { background: rgba(148, 163, 184, 0.35); }

/* Confidence tier + actionable-reason chips on leaderboard rows */
.newsConfidenceBadge {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 800;
  cursor: help;
}

.newsConfidenceBadge.good {
  border-color: rgba(52, 211, 153, 0.45);
  color: var(--good);
}

.newsConfidenceBadge.warn {
  border-color: rgba(245, 158, 11, 0.45);
  color: var(--warn);
}

.newsConfidenceBadge.neutral {
  color: var(--muted);
}

.newsActionReasonBadge {
  border: 1px solid rgba(110, 168, 254, 0.4);
  border-radius: 999px;
  padding: 1px 7px;
  color: var(--accent-2, #6ea8fe);
  font-size: 10px;
  font-weight: 800;
}

/* --- Per-player raw mention feed (focused news view + drawer News tab) --- */

.newsMentionFeed {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.newsMentionNeutralNote {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11.5px;
}

.newsMentionList {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.newsMentionList[hidden],
.newsMentionRow[hidden] {
  display: none !important;
}

.newsMentionRow {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.newsMentionSentimentDot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--muted);
}

.newsMentionSentimentDot.good { background: var(--good); }
.newsMentionSentimentDot.bad { background: var(--bad); }

.newsMentionMeta {
  color: var(--muted);
  font-size: 11px;
}

.newsMentionRow p {
  margin: 3px 0;
  color: #e5e7eb;
  font-size: 12.5px;
  line-height: 1.45;
}

.newsMentionRow a {
  font-size: 11px;
}

.newsShowAllButton {
  margin-top: 10px;
}

/* Evidence hierarchy: Direct Evidence tier is visually first and slightly
   emphasized; Analyst Interpretation and Other/Passing sit below it with a
   quieter treatment, so source directness reads at a glance. */
.newsEvidenceTier {
  margin-top: 16px;
}

.newsEvidenceTierLabel {
  margin: 0;
  color: #e5e7eb;
  font-size: 12.5px;
  font-weight: 800;
}

.newsEvidenceTierLabel span {
  color: var(--muted);
  font-weight: 700;
}

.newsEvidenceTier-direct {
  padding: 10px 12px;
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 10px;
  background: rgba(52, 211, 153, 0.05);
}

.newsEvidenceTier-analyst,
.newsEvidenceTier-other {
  opacity: 0.92;
}

.newsMentionDupNote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -4px 0 4px 16px;
  color: var(--muted);
  font-size: 11px;
}

.newsMentionDupToggle {
  border: none;
  background: none;
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.newsMentionDupList {
  margin-left: 16px;
}

/* --- Structured analyst commentary: Analyst Read / What Matters / Draft Impact --- */

.newsAnalystSummary {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent-2);
  border-radius: 0 8px 8px 0;
  background: rgba(96, 165, 250, 0.06);
}

.newsAnalystSectionLabel {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.newsAnalystReadText {
  margin: 0;
  color: #e5e7eb;
  font-size: 12.5px;
  line-height: 1.5;
}

.newsWhatMatters ul {
  margin: 0;
  padding-left: 18px;
}

.newsWhatMatters li {
  margin-bottom: 4px;
  color: #e5e7eb;
  font-size: 12.5px;
  line-height: 1.5;
}

.newsDraftImpact {
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.newsDraftImpact p {
  margin: 0;
  color: #e5e7eb;
  font-size: 12.5px;
  line-height: 1.5;
}

.newsDraftImpact strong {
  color: var(--accent-2);
}

/* Grouped metric strip (Draft context / Player profile / News evidence). */
.newsMetricGroups {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.newsMetricGroupLabel {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.newsMetricStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.newsMetricStrip .metric {
  flex: 1 1 100px;
  min-width: 90px;
}

.newsMetricDetails {
  margin-top: 6px;
}

.newsMetricDetails summary {
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.newsMetricDetails .newsMetricStrip {
  margin-top: 6px;
}

.newsWhatChanged {
  margin: 8px 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.newsSourceCardList {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.newsSourceCard {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 27, 45, 0.6);
}

.newsSourceCard header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.newsRecencyBadge {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
}

.newsRecencyBadge.fresh { color: var(--good); border-color: var(--good); }
.newsRecencyBadge.recent { color: var(--accent-2); border-color: var(--accent-2); }
.newsRecencyBadge.stale { color: var(--bad); border-color: var(--bad); }

.newsSourceCardDate {
  color: var(--muted);
  font-size: 11px;
  margin-left: auto;
}

.newsWhyItMatters {
  margin: 6px 0 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.4;
}

.newsSourceCardText {
  margin: 4px 0;
  color: #e5e7eb;
  font-size: 13px;
  line-height: 1.5;
}

.newsSourceCardSources {
  margin-top: 4px;
}

.newsStaleNote {
  margin: 4px 0 0;
  color: var(--bad);
  font-size: 11px;
  font-style: italic;
}

/* --- News commentary refinement pass: header, badges, pulse, filters, mention types --- */

.newsAnalystSummaryTitle {
  margin: 0 0 8px;
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.newsRankingSignalBadge {
  font-weight: 800;
  border-width: 2px;
}

.newsCoveragePulse {
  margin: 10px 0;
}

.newsCoveragePulseHeader {
  margin-bottom: 6px;
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 700;
}

.newsMentionFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.newsMentionFilters .pill {
  cursor: pointer;
  border: 1px solid var(--line);
  background: transparent;
}

.newsMentionFilters .pill.active {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.newsMentionMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.newsMentionTypeBadge {
  font-size: 10px;
  padding: 1px 8px;
}

.newsMentionStale {
  opacity: 0.6;
}

/* =========================================================
   Home view: landing hero (DotField) + quick-link cards (ShapeGrid)
   ========================================================= */

.homeView {
  display: grid;
  gap: var(--space-xl, 24px);
  padding-bottom: 28px;
}

.homeHero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  align-items: start;
  gap: 28px;
  min-height: 380px;
  padding: var(--space-2xl, 32px);
  border: 1px solid var(--color-border, var(--line));
  border-radius: var(--radius-feature, 12px);
  background: linear-gradient(160deg, var(--color-surface-elevated, #17243a), var(--color-bg, #07111f));
  box-shadow: var(--shadow-card, var(--shadow));
}

.homeHeroFx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.homeHeroFxCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.homeHeroWavesDot {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-strong, #93c5fd);
  box-shadow: 0 0 12px 3px rgba(96, 165, 250, 0.55);
  will-change: transform;
}

.homeHeroContent {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.homeDevelopmentPanel {
  position: relative;
  z-index: 1;
  align-self: start;
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 19px 20px;
  border: 1px solid rgba(96, 165, 250, .32);
  border-radius: 12px;
  background: linear-gradient(155deg, rgba(16, 35, 61, .88), rgba(7, 17, 31, .8));
  box-shadow: inset 0 1px 0 rgba(191, 219, 254, .08), 0 12px 28px rgba(0, 0, 0, .16);
}

.homeDevelopmentPanel .heroEyebrow { color: var(--color-accent-strong, var(--accent-2)); }
.homeDevelopmentPanel h3 {
  margin: 0;
  color: var(--color-text-strong, var(--head));
  font-family: var(--font-display, inherit);
  font-size: clamp(20px, 2vw, 27px);
  letter-spacing: -.02em;
}
.homeDevelopmentIntro,
.homeDevelopmentList p,
.homeDevelopmentLater p {
  margin: 0;
  color: var(--color-text-muted, var(--muted));
  font-size: 12px;
  line-height: 1.45;
}
.homeDevelopmentSectionLabel {
  margin-top: 4px;
  color: var(--color-accent-strong, var(--accent-2));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.homeDevelopmentList { display: grid; gap: 8px; margin-top: 0; }
.homeDevelopmentList article {
  padding: 10px 12px;
  border-left: 2px solid rgba(96, 165, 250, .64);
  border-radius: 0 8px 8px 0;
  background: rgba(96, 165, 250, .06);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.homeDevelopmentList article:hover { border-color: #93c5fd; background: rgba(96, 165, 250, .13); }
.homeDevelopmentItemMeta { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.homeDevelopmentItemMeta b { color: var(--color-text-strong, var(--head)); font-size: 11px; font-variant-numeric: tabular-nums; }
.homeDevelopmentItemMeta span { color: #93c5fd; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.homeDevelopmentItemMeta i { display: grid; place-items: center; width: 16px; height: 16px; margin-left: auto; color: #93c5fd; font-size: 14px; font-style: normal; line-height: 1; opacity: .82; }
.homeDevelopmentList strong { display: block; margin-bottom: 2px; color: var(--color-text-strong, var(--head)); font-size: 12px; }
.homeDevelopmentLater { margin-top: 1px; }
.homeDevelopmentLater { margin-top: 5px; padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, .18); }
.homeDevelopmentLater summary { color: var(--color-text-strong, var(--head)); font-size: 11px; font-weight: 700; cursor: pointer; }
.homeDevelopmentLaterGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 9px; }
.homeDevelopmentLaterGrid > span { display: grid; gap: 3px; min-height: 56px; padding: 8px 9px; border: 1px solid rgba(148, 163, 184, .14); border-radius: 7px; background: rgba(255, 255, 255, .025); }
.homeDevelopmentLaterGrid strong { color: var(--color-text-strong, var(--head)); font-size: 10.5px; }
.homeDevelopmentLaterGrid small { color: #aebed1; font-size: 10px; line-height: 1.4; }
.homeDevelopmentPanel > small { margin-top: 2px; color: var(--color-text-muted, var(--muted)); font-size: 10px; line-height: 1.4; }

.homeHeroContent > .heroEyebrow,
.homeHeroContent > h2,
.homeHeroContent > .heroSub,
.homeHeroContent > .homeHeroActions { max-width: 640px; }

.homeHeroContent > .homeHeroAbout { max-width: min(100%, 900px); }

.homeHeroAbout {
  display: grid;
  gap: 10px;
}

.homeHeroContent .homeHeroAbout .heroSub { max-width: none; }

.homeHeroAboutTitle {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: var(--font-size-lg, 17px);
  font-weight: var(--weight-emphasis, 700);
  letter-spacing: -0.01em;
  color: var(--color-text-strong, var(--head));
}

.homeHeroContent .heroEyebrow {
  display: block;
  color: var(--color-accent-strong, var(--accent-2));
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--weight-emphasis, 700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.homeHeroContent h2 {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.02em;
  color: var(--color-text-strong, var(--head));
}

.homeHeroContent .heroSub {
  margin: 0;
  max-width: 62ch;
  color: var(--color-text-muted, var(--muted));
  font-size: var(--font-size-md, 15px);
  line-height: 1.55;
}

.homeHeroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.projectEffortDashboard {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: var(--radius-feature, 12px);
  background: linear-gradient(145deg, rgba(20, 39, 67, 0.94), rgba(9, 20, 36, 0.96));
  box-shadow: var(--shadow-card, var(--shadow));
}
.projectEffortDashboard::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 88% 10%, rgba(96, 165, 250, 0.15), transparent 34%);
}
.projectEffortHeader,
.projectEffortGrid,
.projectEffortDisclaimer { position: relative; z-index: 1; }
.projectEffortHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  margin-bottom: 10px;
}
.projectEffortHeader h3 { margin: 4px 0 5px; color: var(--color-text-strong, var(--head)); font-size: clamp(20px, 2.4vw, 28px); }
.projectEffortHeader p { margin: 0; color: var(--color-text-muted, var(--muted)); font-size: 13px; line-height: 1.45; }
.projectEffortGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; width: 100%; min-width: 0; }
.projectEffortMetric {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 14px 8px 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  background: rgba(7, 17, 31, 0.55);
}
.projectEffortMetric::before,
.projectEffortMetric::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--electric-border-color, #60A5FA);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.projectEffortMetric::before { opacity: 0.6; filter: blur(1px); }
.projectEffortMetric::after { filter: blur(4px); }
.projectEffortMetric > :not(.electricBorderCanvas):not(.electricBorderGlow) { position: relative; z-index: 2; }
.electricBorderGlow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scale(1.08);
  opacity: 0.3;
  filter: blur(32px);
  pointer-events: none;
  z-index: -1;
}
.electricBorderCanvas {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.projectEffortMetricHours { border-color: rgba(96, 165, 250, 0.42); }
.projectEffortMetricTokens { border-color: rgba(168, 85, 247, 0.42); }
.projectEffortMetricLabel { color: #CBD5E1; font-size: 10px; font-weight: 750; }
.projectEffortMetric strong { color: #F8FAFC; font-family: var(--font-mono, monospace); font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.04em; line-height: 1; }
.projectEffortMetricHours strong { color: #93C5FD; }
.projectEffortMetricTokens strong { color: #D8B4FE; }
.projectEffortMetric em { color: #94A3B8; font-size: 11px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.projectEffortMetric small { margin-top: 3px; color: #94A3B8; font-size: 8px; line-height: 1.3; }
.projectEffortDisclaimer { margin: 10px 0 0; color: #94A3B8; font-size: 9px; line-height: 1.4; }

@media (max-width: 760px) {
  .projectEffortHeader { flex-direction: column; }
  .projectEffortGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .projectEffortDashboard { padding: 12px; }
  .projectEffortGrid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .electricBorderCanvas, .electricBorderGlow { display: none; }
}

.homeSecondaryButton {
  padding: 11px 20px;
  border-radius: var(--radius-control, 8px);
  font: inherit;
  font-weight: var(--weight-emphasis, 700);
  font-size: var(--font-size-sm, 13px);
  cursor: pointer;
  transition: transform 120ms ease, background 160ms ease, border-color 160ms ease;
  border: 1px solid var(--color-border-strong, var(--line));
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text, var(--ink));
}

.homeSecondaryButton:hover {
  transform: translateY(-1px);
  border-color: var(--color-accent, var(--accent));
  color: var(--color-accent-strong, var(--accent-2));
}

/* StarBorder (Svelte Bits) port: orbiting gradient sweeps peeking out from
   behind a solid inner surface, using the app's blue accent pair. */
.homeEnterButton.starBorder {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  padding: 4px;
  border: none;
  border-radius: var(--radius-feature, 12px);
  background: transparent;
  cursor: pointer;
  transition: transform 120ms ease;
}

.homeEnterButton.starBorder:hover {
  transform: translateY(-1px);
}

.starBorderSweep {
  position: absolute;
  z-index: 0;
  width: 160%;
  height: 60%;
  border-radius: var(--radius-pill, 999px);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 4s;
}

.starBorderSweepBottom {
  right: -110%;
  bottom: -30%;
  /* Matches --brand-grad's trailing stop so the sweep reads as part of
     the same blue/indigo/cyan gradient used across the app's controls. */
  background: radial-gradient(circle, #38bdf8, transparent 20%);
  animation-name: starMovementBottom;
}

.starBorderSweepTop {
  top: -30%;
  left: -110%;
  /* Matches --brand-grad's leading stop (see the other end in the bottom sweep). */
  background: radial-gradient(circle, #60a5fa, transparent 20%);
  animation-name: starMovementTop;
}

@keyframes starMovementBottom {
  0% { transform: translate(0%, 0%); opacity: 1; }
  100% { transform: translate(-100%, 0%); opacity: 0; }
}

@keyframes starMovementTop {
  0% { transform: translate(0%, 0%); opacity: 1; }
  100% { transform: translate(100%, 0%); opacity: 0; }
}

.starBorderSurface {
  position: relative;
  z-index: 1;
  display: block;
  padding: 11px 20px;
  border-radius: var(--radius-feature, 12px);
  border: 1px solid var(--color-border-strong, var(--line));
  background: linear-gradient(160deg, var(--color-surface-elevated, #17243a), var(--color-bg, #07111f));
  color: var(--color-text-strong, var(--head));
}

/* Nav tabs: reuse the same star-border sweeps, but only the active tab
   shows/animates them (they replace the old underline indicator). */
.tab {
  overflow: hidden;
}

.tab .starBorderSweep {
  display: none;
}

.tab.active .starBorderSweep,
.tab[aria-selected="true"] .starBorderSweep {
  display: block;
}

.tab .tabLabel {
  position: relative;
  z-index: 1;
}

.tab.active::after,
.tab[aria-selected="true"]::after {
  background: transparent !important;
}

/* Filter dropdowns: same sweeps, always-on, wrapping the native <select>
   (which can't hold child markup itself, hence the wrapper span). */
.filterSelectWrap {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 3px;
  border-radius: var(--radius-control, 8px);
}

.filterSelectWrap select {
  position: relative;
  z-index: 1;
  width: 100%;
}

.homeCardsSection {
  position: relative;
  overflow: hidden;
  padding: var(--space-xl, 24px);
  border: 1px solid var(--color-border, var(--line));
  border-radius: var(--radius-feature, 12px);
  background: var(--color-surface, var(--panel));
}

.homeCardsFxCanvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.homeCardsHeader {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}

.homeCardsHeader h3 {
  margin: 0 0 4px;
  font-size: var(--font-size-lg, 18px);
  color: var(--color-text-strong, var(--head));
}

.homeCardsHeader p {
  margin: 0;
  color: var(--color-text-muted, var(--muted));
  font-size: var(--font-size-sm, 13px);
}

.homeCardsGrid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.homeCard {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--color-border, var(--line));
  border-radius: var(--radius-card, 10px);
  background: rgba(11, 22, 40, 0.72);
  backdrop-filter: blur(2px);
  color: var(--color-text, var(--ink));
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, border-color 160ms ease, background 160ms ease;
}

.homeCard:hover,
.homeCard:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-accent, var(--accent));
  background: rgba(11, 22, 40, 0.92);
  outline: none;
}

.homeCardTitle {
  font-weight: var(--weight-emphasis, 700);
  font-size: var(--font-size-md, 15px);
  color: var(--color-text-strong, var(--head));
}

.homeCardDesc {
  color: var(--color-text-muted, var(--muted));
  font-size: var(--font-size-sm, 12.5px);
  line-height: 1.45;
}

@media (max-width: 720px) {
  .homeHero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: var(--space-xl, 24px);
  }

  .homeDevelopmentLaterGrid { grid-template-columns: 1fr; }

  .homeCardsGrid {
    grid-template-columns: 1fr;
  }
}

/* Clerk account control */
body.authPending,
body.authSignedOut {
  zoom: 1;
}

.authGate {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 36px 20px;
  background:
    linear-gradient(rgba(91, 157, 249, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 157, 249, 0.055) 1px, transparent 1px),
    #0A0E16;
  background-size: 32px 32px;
}

.authGatePanel {
  width: min(100%, 430px);
  text-align: center;
}

.authGatePanel > .heroEyebrow {
  display: block;
  margin-bottom: 10px;
}

.authGatePanel > h1 {
  color: var(--head);
  font-family: var(--font-display);
  font-size: 32px;
}

.authGatePanel > p {
  margin: 10px auto 22px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.authGatePanel > p.authGateError {
  max-width: 360px;
  color: var(--bad);
}

.signInActions {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.signInActions button {
  min-height: 48px;
  border: 1px solid rgba(143, 192, 255, 0.62);
  border-radius: 8px;
  padding: 12px 18px;
  background: #5B9DF9;
  color: #08111F;
  cursor: pointer;
  font-weight: 850;
  box-shadow: 0 14px 32px rgba(91, 157, 249, 0.24);
}

.signInActions button:hover,
.signInActions button:focus-visible {
  background: #8FC0FF;
}

.signInActions button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.signInActions .guestButton {
  border-color: rgba(143, 192, 255, 0.3);
  background: transparent;
  color: var(--head);
  box-shadow: none;
}

.signInActions .guestButton:hover,
.signInActions .guestButton:focus-visible {
  border-color: rgba(143, 192, 255, 0.7);
  background: rgba(143, 192, 255, 0.08);
}

.signInActions span {
  color: var(--muted);
  font-size: 11px;
}

.authenticatedApp[hidden],
.authGate[hidden],
.signInActions[hidden] {
  display: none !important;
}

.headerActions {
  max-width: 590px;
}

.authControls {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 72px;
  min-height: 36px;
  align-items: center;
  justify-content: flex-end;
}

.authStatus {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.authSignInButton {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel-raised);
  color: var(--ink-strong);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.authSignInButton:hover,
.authSignInButton:focus-visible {
  border-color: var(--accent);
  color: var(--accent-2);
}

.authControlsError .authStatus {
  color: var(--bad);
}

.userButton {
  width: 36px;
  height: 36px;
}

.authControls [hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .topbar {
    align-items: stretch;
  }

  .headerActions {
    max-width: none;
    flex-wrap: wrap;
  }

  #searchInput {
    flex: 1 1 190px;
  }
}

/* Page-wide Waves backdrop: sits behind the whole app (every view, not just
   Home) at z-index -1, so it only shows through in the empty gutters beside
   the centered .appShell content — everything else has its own opaque
   background and simply paints over it. */
.pageWavesBg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--color-bg, var(--page, #07111f));
}

/* Let the Players board's Waves backdrop show through the actual rows, not
   just the panel's outer padding. .playerColumn otherwise gets a fully
   opaque background from a later, unrelated card-styling rule that also
   covers league/manager cards, so this is scoped narrowly under .playersBoard
   rather than changing that shared rule. */
.playersBoard {
  background: rgba(11, 18, 32, 0.6);
}

.playersBoard .playerColumn {
  background: rgba(23, 36, 58, 0.45);
}

/* Sleeper table sortable column headers */
#sleeperHead .sortableHeader {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

#sleeperHead .tableSortButton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 3px 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
}

#sleeperHead .tableSortButton span {
  min-width: 10px;
  color: var(--muted);
  font-size: 9px;
}

#sleeperHead .tableSortButton:hover,
#sleeperHead .tableSortButton:focus-visible,
#sleeperHead .tableSortButton.active {
  color: var(--head);
}

#sleeperHead .tableSortButton.active span {
  color: var(--accent-2);
}

/* Sleeper view: WebGL Dither backdrop (Svelte Bits <Dither />, ported to
   vanilla three.js) behind the risers/fallers table. Row backgrounds are
   loosened from their normal near-opaque values so the effect shows through
   the actual rows, scoped to #sleeperView only since striping/hover rules
   are shared with every other table in the app. */
#sleeperView .panel {
  position: relative;
  overflow: hidden;
}

.sleeperDitherFx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#sleeperView .panelHeader,
#sleeperView .tableWrap {
  position: relative;
  z-index: 1;
}

#sleeperView tbody tr:nth-child(even) td {
  background: rgba(12, 23, 40, 0.18);
}

#sleeperView tbody tr:hover td {
  background: rgba(34, 52, 82, 0.35);
}

@media (max-width: 900px) {
  .methodologyPipelineGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .methodologyPipelineStep:nth-child(3)::after { display: none; }
  .methodologyRoleGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .methodologySourceFacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .methodologyRefreshGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .methodologyShell .sourceAuditStats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .chatMessages {
    padding: 18px 14px;
  }

  .chatMessage > .chatMessageBody,
  .chatQueueCard {
    max-width: 94%;
    width: 94%;
  }

  .chatPlayerLinks button {
    min-width: min(100%, 128px);
    flex: 1 1 128px;
  }

  .chatFollowUps button {
    flex: 1 1 100%;
  }
}

/* Universal assistant additions */
.chatContextLabel { display:block; margin-top:5px; color:#93C5FD; font-size:11px; font-weight:700; }
.chatEmpty { margin: 8vh auto 0; max-width: 460px; text-align:left; }
.chatEmpty h3 { margin:0 0 6px; color:#F8FAFC; font-size:24px; }
.chatEmpty p { margin:0 0 18px; color:#94A3B8; }
.chatCategoryGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.chatCategoryGrid button { display:grid; gap:4px; text-align:left; padding:11px 12px; border:1px solid #263448; border-radius:10px; background:#111827; color:#E5E7EB; cursor:pointer; }
.chatCategoryGrid button:hover, .chatCategoryGrid button:focus-visible { border-color:#60A5FA; background:#172033; outline:2px solid rgba(96,165,250,.25); }
.chatCategoryGrid strong { font-size:12px; color:#F8FAFC; }
.chatCategoryGrid span { font-size:11px; color:#93C5FD; }
.chatActions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chatActions button { border:1px solid #3B82F6; border-radius:999px; padding:7px 10px; background:rgba(30,64,175,.2); color:#BFDBFE; cursor:pointer; font-weight:800; font-size:11px; }
.chatActions button:hover, .chatActions button:focus-visible { background:rgba(59,130,246,.3); outline:2px solid rgba(96,165,250,.25); }
@media (min-width: 1000px) { .chatPanel { width:min(500px,100vw); } }
@media (max-width: 600px) { .chatCategoryGrid { grid-template-columns:1fr; } .chatEmpty { margin-top:4vh; } }

/* Shared source attribution */
.sourcesToggle,
.supportToggle {
  border: 1px solid rgba(96, 165, 250, 0.42);
  border-radius: 9px;
  padding: 9px 12px;
  background: rgba(30, 64, 175, 0.18);
  color: #DBEAFE;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
}

.sourceLine {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
  color: var(--muted-2);
  font-size: 11px;
  line-height: 1.35;
}
.sourceLine > span:first-child { color: #CBD5E1; font-weight: 800; }
.sourceInspectButton,
.sourceBadge {
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.56);
  color: #BFDBFE;
  cursor: pointer;
  font: inherit;
}
.sourceInspectButton { width: 20px; height: 20px; padding: 0; margin-left: 3px; font-family: Arial, sans-serif; font-style: normal; line-height: 18px; }
.sourceBadge { padding: 3px 7px; font-size: 11px; font-weight: 750; }
.sourceInspectButton:hover,
.sourceInspectButton:focus-visible,
.sourceBadge:hover,
.sourceBadge:focus-visible,
.sourcesToggle:hover,
.sourcesToggle:focus-visible,
.supportToggle:hover,
.supportToggle:focus-visible { border-color: #60A5FA; outline: 2px solid rgba(96, 165, 250, 0.25); outline-offset: 2px; }

.sourceDetailsProfile { padding-bottom: 24px; }
.sourceDetailsGrid { display: grid; gap: 10px; margin-top: 16px; }
.sourceDetailCard {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.62);
}
.sourceDetailHeader { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sourceDetailHeader strong { color: #F8FAFC; }
.sourceDetailCard p { margin: 7px 0 10px; color: #CBD5E1; font-size: 12px; line-height: 1.45; }
.sourceTypeTag { border-radius: 999px; padding: 3px 7px; background: rgba(96, 165, 250, 0.14); color: #BFDBFE; font-size: 10px; font-weight: 800; }
.sourceTypeTag.raw { background: rgba(34, 197, 94, 0.14); color: #BBF7D0; }
.sourceTypeTag.derived, .sourceTypeTag.blended { background: rgba(168, 85, 247, 0.16); color: #E9D5FF; }
.sourceTypeTag.app-state { background: rgba(245, 158, 11, 0.15); color: #FDE68A; }
.sourceDetailList { display: grid; gap: 5px; margin: 0; }
.sourceDetailList div { display: grid; grid-template-columns: 76px 1fr; gap: 8px; font-size: 11px; }
.sourceDetailList dt { color: #94A3B8; font-weight: 750; }
.sourceDetailList dd { margin: 0; color: #E2E8F0; }
.sourceExternalLink { display: inline-block; margin-top: 10px; color: #93C5FD; font-size: 11px; font-weight: 750; }

/* Field-level source audit drawer */
.sourceAuditShell {
  width: 100%;
  max-width: none;
}
.sourceAuditStats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.sourceAuditStats > div { display: grid; gap: 3px; min-width: 0; padding: 9px 10px; border: 1px solid rgba(96, 165, 250, 0.2); border-radius: 8px; background: rgba(15, 29, 50, 0.72); }
.sourceAuditStats strong { color: #F8FAFC; font-family: var(--font-mono, monospace); font-size: 18px; }
.sourceAuditStats span { color: #94A3B8; font-size: 10px; }
.sourceAuditStats small { color: #7F91AA; font-size: 9px; line-height: 1.3; }
.sourceAuditControls { display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(130px, .85fr) auto repeat(4, minmax(110px, 1fr)) auto; gap: 7px; margin-top: 14px; }
.sourceAuditSearch input,
.sourceAuditControls select { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 7px; background: rgba(7, 17, 31, 0.82); color: #E2E8F0; font-size: 11px; }
.sourceAuditReset { border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 7px; padding: 7px 9px; background: rgba(15, 23, 42, 0.72); color: #BFDBFE; cursor: pointer; font: inherit; font-size: 11px; }
.sourceAuditMode { border: 1px solid rgba(168, 85, 247, 0.38); border-radius: 7px; padding: 7px 9px; background: rgba(88, 28, 135, 0.12); color: #E9D5FF; cursor: pointer; font: inherit; font-size: 11px; }
.sourceFamilyGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.sourceFamilyCard { display: grid; gap: 3px; min-width: 0; padding: 9px; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px; background: rgba(15, 23, 42, 0.62); color: #E2E8F0; cursor: pointer; text-align: left; }
.sourceFamilyCard:hover, .sourceFamilyCard.active { border-color: rgba(96, 165, 250, 0.7); background: rgba(30, 64, 175, 0.18); }
.sourceFamilyCard strong { font-size: 11px; }
.sourceFamilyCard span { color: #93C5FD; font-size: 10px; }
.sourceFamilyCard small { color: #94A3B8; font-size: 9px; line-height: 1.35; }
.sourcePageCoverage { margin-top: 14px; padding: 10px; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 8px; background: rgba(7, 17, 31, 0.38); }
.sourcePageCoverageHeader { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #CBD5E1; font-size: 10px; }
.sourcePageCoverageHeader span { color: #7F91AA; font-size: 9px; text-align: right; }
.sourcePageCoverageGrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.sourcePageCoverageGrid > div { display: grid; gap: 2px; min-width: 0; }
.sourcePageCoverageGrid span { overflow: hidden; color: #94A3B8; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sourcePageCoverageGrid strong { color: #93C5FD; font-family: var(--font-mono, monospace); font-size: 13px; }
.sourcePageCoverageGrid small { color: #71839A; font-size: 8px; }
.sourceAuditLegend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; color: #7F91AA; font-size: 10px; line-height: 1.35; }
.sourceDatasetList { display: grid; gap: 8px; margin-top: 14px; }
.sourceDatasetAccordion { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 9px; background: rgba(15, 23, 42, 0.64); overflow: hidden; }
.sourceDatasetAccordion > summary,
.sourceFieldRow > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; cursor: pointer; }
.sourceDatasetAccordion > summary::-webkit-details-marker,
.sourceFieldRow > summary::-webkit-details-marker { display: none; }
.sourceDatasetAccordion > summary { padding: 10px 12px; }
.sourceDatasetAccordion > summary > span:first-child,
.sourceFieldRow > summary > span:first-child { display: grid; gap: 3px; min-width: 0; }
.sourceDatasetAccordion > summary small,
.sourceFieldRow > summary small { overflow: hidden; color: #7F91AA; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sourceDatasetSummary, .sourceFieldBadges { display: flex; align-items: center; flex: 0 0 auto; gap: 6px; color: #94A3B8; font-size: 10px; }
.sourceDatasetSummary .sourceTypeTag.mixed { background: rgba(96, 165, 250, 0.12); color: #BFDBFE; }
.sourceFreshness { border-radius: 999px; padding: 3px 6px; font-size: 9px; font-weight: 800; }
.sourceFreshness.current { background: rgba(34, 197, 94, 0.12); color: #BBF7D0; }
.sourceFreshness.aging { background: rgba(245, 158, 11, 0.14); color: #FDE68A; }
.sourceFreshness.stale, .sourceFreshness.unknown { background: rgba(239, 68, 68, 0.12); color: #FCA5A5; }
.sourceFreshness.session { background: rgba(168, 85, 247, 0.14); color: #E9D5FF; }
.sourceDatasetBody { padding: 0 12px 12px; border-top: 1px solid rgba(148, 163, 184, 0.12); }
.sourceDatasetBody > p { margin: 10px 0; color: #CBD5E1; font-size: 11px; line-height: 1.4; }
.sourceDatasetMeta { margin-bottom: 12px; }
.sourceDatasetMeta div { grid-template-columns: 82px 1fr; }
.sourceFieldTableHeader { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 10px 0 6px; color: #CBD5E1; font-size: 11px; }
.sourceFieldTableHeader span { color: #7F91AA; font-size: 9px; text-align: right; }
.sourceFieldTable { display: grid; gap: 5px; }
.sourceFieldRow { border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 7px; background: rgba(7, 17, 31, 0.55); }
.sourceFieldRow > summary { padding: 7px 9px; }
.sourceFieldRow > summary strong { color: #F8FAFC; font-size: 10px; }
.sourceViewLineage { color: #93C5FD; font-size: 9px; font-style: normal; white-space: nowrap; }
.sourceFieldBody { padding: 0 9px 9px; border-top: 1px solid rgba(148, 163, 184, 0.1); }
.sourceFieldBody > p { margin: 8px 0; color: #CBD5E1; font-size: 10px; line-height: 1.4; }
.sourcePartialReason { color: #FDE68A !important; }
.sourceLineagePath { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 8px 0; color: #BFDBFE; font-size: 9px; line-height: 1.35; }
.sourceLineagePath span { padding: 3px 5px; border: 1px solid rgba(96, 165, 250, 0.25); border-radius: 999px; background: rgba(30, 64, 175, 0.12); }
.sourceLineagePath b { color: #A855F7; font-weight: 800; }
.sourceFieldMeta { gap: 4px; }
.sourceFieldMeta div { grid-template-columns: 72px 1fr; font-size: 10px; }
.sourceFieldMeta code { color: #C4B5FD; font-family: var(--font-mono, monospace); font-size: 9px; }
.sourceCoverageTag { border-radius: 999px; padding: 3px 6px; font-size: 9px; font-weight: 800; }
.sourceCoverageTag.mapped { background: rgba(34, 197, 94, 0.12); color: #BBF7D0; }
.sourceCoverageTag.partial { background: rgba(245, 158, 11, 0.14); color: #FDE68A; }
.sourceCoverageTag.missing { background: rgba(239, 68, 68, 0.14); color: #FCA5A5; }
.sourceWhereUsed { display: flex; flex-wrap: wrap; gap: 4px; }
.sourceWhereUsed button { border: 1px solid rgba(96, 165, 250, 0.22); border-radius: 999px; padding: 2px 5px; background: rgba(30, 64, 175, 0.08); color: #BFDBFE; cursor: pointer; font: inherit; font-size: 9px; }
.sourceWhereUsed button:hover, .sourceWhereUsed button:focus-visible { border-color: #60A5FA; outline: 2px solid rgba(96, 165, 250, 0.22); outline-offset: 1px; }
.sourceTechnicalKey { display: block; margin-top: 3px; color: #71839A; font-family: var(--font-mono, monospace); font-size: 9px; line-height: 1.35; }
.sourceAuditShell:not(.sourceModeTechnical) .sourceTechnicalKey,
.sourceAuditShell:not(.sourceModeTechnical) .sourceTechnicalDetails { display: none; }
.sourceFieldActions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.sourceFieldActions button { border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 6px; padding: 5px 7px; background: rgba(15, 23, 42, 0.7); color: #BFDBFE; cursor: pointer; font: inherit; font-size: 9px; }
.sourceFieldActions button:hover, .sourceFieldActions button:focus-visible { border-color: #60A5FA; outline: 2px solid rgba(96, 165, 250, 0.2); outline-offset: 1px; }
.sourceTechnicalDetails { display: grid; gap: 3px; margin-top: 8px; padding: 7px 8px; border-left: 2px solid #A855F7; background: rgba(88, 28, 135, 0.1); color: #E9D5FF; font-size: 10px; }
.sourceTechnicalDetails span, .sourceTechnicalDetails small { color: #C4B5FD; line-height: 1.4; }

/* Sources and methodology redesign */
.methodologyShell { color: #E2E8F0; }
.methodologyShell > h2 { margin-bottom: 5px; }
.methodologySubtitle { max-width: 820px; color: #CBD5E1; font-size: 13px; line-height: 1.55; }
.methodologyIntro { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .85fr); gap: 10px; margin-top: 16px; }
.methodologyIntro > div { padding: 13px 14px; border: 1px solid rgba(96, 165, 250, .22); border-radius: 10px; background: linear-gradient(135deg, rgba(30, 64, 175, .18), rgba(15, 23, 42, .62)); }
.methodologyIntro strong { color: #F8FAFC; font-size: 12px; }
.methodologyIntro p { margin: 6px 0 0; color: #AFC0D5; font-size: 11px; line-height: 1.5; }
.methodologyNotice { border-color: rgba(245, 158, 11, .35) !important; background: rgba(120, 53, 15, .14) !important; }
.methodologyNotice strong { color: #FDE68A; }
.methodologyPipeline, .methodologySectionBlock { margin-top: 18px; }
.methodologySectionHeading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 9px; }
.methodologySectionHeading > div { min-width: 0; }
.methodologySectionHeading span { color: #60A5FA; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.methodologySectionHeading h3 { margin: 3px 0 0; color: #F8FAFC; font-size: 15px; }
.methodologySectionHeading p { max-width: 520px; margin: 0; color: #7F91AA; font-size: 10px; line-height: 1.4; text-align: right; }
.methodologyPipeline { padding: 14px; border: 1px solid rgba(96, 165, 250, .22); border-radius: 11px; background: rgba(7, 17, 31, .5); }
.methodologyPipelineGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.methodologyPipelineStep { position: relative; min-width: 0; padding: 10px; border: 1px solid rgba(148, 163, 184, .17); border-radius: 8px; background: rgba(15, 23, 42, .7); }
.methodologyPipelineStep:not(:last-child)::after { content: "→"; position: absolute; top: 35px; right: -10px; z-index: 1; color: #60A5FA; font-weight: 900; }
.methodologyPipelineStep > span { display: inline-grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: rgba(37, 99, 235, .35); color: #DBEAFE; font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 900; }
.methodologyPipelineStep strong { display: block; margin-top: 8px; color: #F8FAFC; font-size: 11px; }
.methodologyPipelineStep p { margin: 5px 0 0; color: #94A3B8; font-size: 10px; line-height: 1.4; }
.methodologyShell .sourceAuditStats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.methodologyShell .sourceAuditStats > div { min-height: 73px; }
.methodologyRoleGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.methodologyRoleCard { min-width: 0; padding: 11px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 9px; background: rgba(15, 23, 42, .55); }
.methodologyRoleCard strong { color: #F8FAFC; font-size: 11px; }
.methodologyRoleCard p { min-height: 33px; margin: 6px 0 9px; color: #94A3B8; font-size: 10px; line-height: 1.4; }
.methodologyRoleCard > div, .methodologyCalculationSources > div { display: flex; flex-wrap: wrap; gap: 4px; }
.methodologyBadge { display: inline-block; padding: 3px 6px; border: 1px solid rgba(96, 165, 250, .24); border-radius: 999px; background: rgba(30, 64, 175, .13); color: #BFDBFE; font-size: 9px; font-weight: 800; }
.methodologySourceList, .methodologyCalculationGrid, .methodologyInfoGrid { display: grid; gap: 7px; }
.methodologySourceCard, .methodologyCalculationCard, .methodologyInfoCard { overflow: hidden; border: 1px solid rgba(148, 163, 184, .2); border-radius: 10px; background: rgba(15, 23, 42, .64); }
.methodologySourceCard > summary, .methodologyCalculationCard > summary, .methodologyInfoCard > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; list-style: none; cursor: pointer; }
.methodologySourceCard > summary::-webkit-details-marker, .methodologyCalculationCard > summary::-webkit-details-marker, .methodologyInfoCard > summary::-webkit-details-marker { display: none; }
.methodologySourceCard > summary { padding: 12px 13px; }
.methodologySourceTitle, .methodologyCalculationCard summary > span { display: grid; gap: 4px; min-width: 0; }
.methodologySourceTitle strong, .methodologyCalculationCard summary strong, .methodologyInfoCard summary strong { color: #F8FAFC; font-size: 12px; }
.methodologySourceTitle small, .methodologyCalculationCard summary small { color: #7F91AA; font-size: 10px; }
.methodologySourceSummary { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.methodologyBadges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.methodologySourceSummary em, .methodologyCalculationCard summary em, .methodologyInfoCard summary em { color: #93C5FD; font-size: 9px; font-style: normal; white-space: nowrap; }
.methodologySourceBody, .methodologyCalculationBody, .methodologyInfoBody { padding: 13px; border-top: 1px solid rgba(148, 163, 184, .13); }
.methodologySourceLead { max-width: 860px; margin: 0 0 12px; color: #CBD5E1; font-size: 11px; line-height: 1.5; }
.methodologySourceFacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-bottom: 12px; }
.methodologySourceFacts > div, .methodologyCalculationMeta > div { display: grid; gap: 3px; min-width: 0; padding: 8px; border-radius: 7px; background: rgba(7, 17, 31, .55); }
.methodologySourceFacts span, .methodologyCalculationMeta span, .methodologyCalculationSources > span { color: #7F91AA; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.methodologySourceFacts strong, .methodologyCalculationMeta strong { color: #D8E5F4; font-size: 10px; line-height: 1.35; }
.methodologyDetailGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.methodologyDetailItem { padding: 9px; border-left: 2px solid rgba(96, 165, 250, .45); background: rgba(7, 17, 31, .4); }
.methodologyDetailItem span { color: #93C5FD; font-size: 9px; font-weight: 900; }
.methodologyDetailItem p { margin: 5px 0 0; color: #B8C7D9; font-size: 10px; line-height: 1.45; }
.methodologySourceDatasets { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, .13); color: #94A3B8; font-size: 10px; }
.methodologySourceDatasets > div { display: flex; flex-wrap: wrap; gap: 4px; }
.methodologySourceDatasets span { padding: 4px 6px; border: 1px solid rgba(148, 163, 184, .17); border-radius: 999px; color: #BFDBFE; }
.methodologyCalculationCard > summary, .methodologyInfoCard > summary { padding: 11px 13px; }
.methodologyCalculationBody { display: grid; gap: 8px; }
.methodologyFormulaLayer { padding: 9px 10px; border-left: 2px solid #22C55E; background: rgba(22, 101, 52, .11); }
.methodologyFormulaLayer:nth-child(2) { border-left-color: #F59E0B; background: rgba(120, 53, 15, .12); }
.methodologyFormulaLayer:nth-child(3) { border-left-color: #A855F7; background: rgba(88, 28, 135, .12); }
.methodologyFormulaLayer > span { color: #BBF7D0; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.methodologyFormulaLayer:nth-child(2) > span { color: #FDE68A; }
.methodologyFormulaLayer:nth-child(3) > span { color: #E9D5FF; }
.methodologyFormulaLayer p { margin: 4px 0 0; color: #D8E5F4; font-size: 10px; line-height: 1.45; }
.methodologyFormula { color: #FEF3C7 !important; font-family: var(--font-mono, monospace); }
.methodologyTechnicalOnly { display: none; }
.sourceModeTechnical .methodologyTechnicalOnly { display: block; }
.methodologyCalculationMeta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.methodologyCalculationSources { display: grid; gap: 5px; }
.methodologyInfoGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.methodologyInfoCard:last-child { grid-column: 1 / -1; }
.methodologyInfoBody p { margin: 0; color: #B8C7D9; font-size: 11px; line-height: 1.5; }
.methodologyInfoBody ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 11px 0 0; padding: 0; list-style: none; counter-reset: methodology-step; }
.methodologyInfoBody li { counter-increment: methodology-step; padding: 8px 9px 8px 28px; border-radius: 7px; background: rgba(7, 17, 31, .5); color: #CBD5E1; font-size: 10px; line-height: 1.35; position: relative; }
.methodologyInfoBody li::before { content: counter(methodology-step); position: absolute; left: 9px; top: 8px; color: #60A5FA; font-family: var(--font-mono, monospace); font-weight: 900; }
.methodologyRefreshGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.methodologyRefreshCard { min-height: 57px; padding: 9px; border: 1px solid rgba(148, 163, 184, .16); border-radius: 8px; background: rgba(15, 23, 42, .52); }
.methodologyRefreshCard strong { color: #F8FAFC; font-size: 10px; }
.methodologyRefreshCard p { margin: 5px 0 0; color: #94A3B8; font-size: 9px; line-height: 1.35; }
.methodologyCoverageNote { display: flex; align-items: baseline; gap: 9px; margin-top: 9px; padding: 9px 10px; border-left: 2px solid #F59E0B; background: rgba(120, 53, 15, .12); }
.methodologyCoverageNote strong { color: #FDE68A; font-size: 10px; white-space: nowrap; }
.methodologyCoverageNote span { color: #B8C7D9; font-size: 10px; line-height: 1.4; }

@media (max-width: 600px) {
  .sourceLine { font-size: 10px; }
  .sourceDetailHeader { align-items: flex-start; flex-direction: column; }
  .sourceDetailList div { grid-template-columns: 66px 1fr; }
  .sourceAuditStats, .sourceFamilyGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sourcePageCoverageGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sourceAuditControls { grid-template-columns: 1fr 1fr; }
  .sourceAuditSearch { grid-column: 1 / -1; }
  .sourceAuditReset { grid-column: 1 / -1; }
  .sourceDatasetSummary { align-items: flex-end; flex-direction: column; }
  .sourceFieldTableHeader { align-items: flex-start; flex-direction: column; }
  .sourceFieldTableHeader span { text-align: left; }
  .sourcePageCoverageHeader { align-items: flex-start; flex-direction: column; }
  .sourcePageCoverageHeader span { text-align: left; }
  .methodologyIntro, .methodologyDetailGrid, .methodologyInfoGrid, .methodologyCalculationMeta { grid-template-columns: 1fr; }
  .methodologySectionHeading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .methodologySectionHeading p { max-width: none; text-align: left; }
  .methodologyPipelineGrid, .methodologyRoleGrid, .methodologyRefreshGrid, .methodologyShell .sourceAuditStats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .methodologyPipelineStep:nth-child(2)::after, .methodologyPipelineStep:nth-child(4)::after { display: none; }
  .methodologyPipelineStep:nth-child(3)::after { display: block; }
  .methodologySourceCard > summary, .methodologyCalculationCard > summary, .methodologyInfoCard > summary { align-items: flex-start; flex-direction: column; gap: 8px; }
  .methodologySourceSummary { justify-content: flex-start; }
  .methodologyBadges { justify-content: flex-start; }
  .methodologyInfoBody ol { grid-template-columns: 1fr; }
  .methodologyCoverageNote { align-items: flex-start; flex-direction: column; gap: 4px; }
}

.contributionAnalystRead {
  margin: 12px 0;
  padding: 13px 14px;
  border-left: 3px solid #38bdf8;
  border-radius: 10px;
  background: rgba(14, 116, 144, 0.16);
}

.contributionAnalystRead > span,
.contributionDataState {
  color: #7dd3fc;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.contributionAnalystRead p {
  margin: 5px 0 0;
  color: #e0f2fe;
  font-size: 13px;
  line-height: 1.55;
}

.contributionProfileGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.contributionProfileGrid section {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 10px;
  background: rgba(11, 18, 32, 0.74);
}

.contributionProfileGrid h5 {
  margin: 0 0 9px;
  color: #f8fafc;
  font-size: 12px;
}

.contributionProfileGrid ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contributionProfileGrid li {
  display: grid;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.contributionProfileGrid li:first-child {
  padding-top: 0;
  border-top: 0;
}

.contributionProfileGrid li strong {
  color: #e5e7eb;
  font-size: 12px;
}

.contributionProfileGrid li span {
  color: #94a3b8;
  font-size: 11px;
}

.contributionDataState {
  margin: 10px 0 2px;
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}

.contributionDataState.isUnavailable,
.contributionExplainRow.isUnavailable {
  color: #fbbf24;
}

.contributionUnavailableValue {
  padding: 8px 10px;
  border: 1px dashed rgba(251, 191, 36, 0.36);
  border-radius: 8px;
  color: #fbbf24;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.contributionAuditDetails {
  margin-top: 16px;
}

.contributionAuditDetails > summary {
  color: #cbd5e1;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 600px) {
  .contributionSummaryGrid,
  .contributionProfileGrid,
  .contributionReadGrid {
    grid-template-columns: 1fr;
  }
}

.sleeperConnectionForm {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 0.8fr) minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(96, 165, 250, 0.06);
}

.sleeperConnectBar {
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.7fr);
  gap: 16px;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(17, 24, 39, 0.96);
}

.sleeperConnectBarHeader {
  display: grid;
  gap: 3px;
}

.sleeperConnectBarHeader h2 {
  margin: 0;
  color: var(--head);
  font-family: var(--font-display);
  font-size: 18px;
}

.sleeperConnectBarHeader p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.sleeperConnectBar .sleeperConnectionForm {
  grid-template-columns: minmax(140px, 1fr) minmax(200px, 1.4fr) auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.sleeperConnectionStatus {
  grid-column: 2;
  min-height: 16px;
  color: var(--muted);
  font-size: 11px;
}

.sleeperConnectionStatus:empty {
  display: none;
}

@media (max-width: 900px) {
  .sleeperConnectBar { grid-template-columns: 1fr; }
  .sleeperConnectionStatus { grid-column: auto; }
}

@media (max-width: 600px) {
  .sleeperConnectBar .sleeperConnectionForm { grid-template-columns: 1fr; }
}

.sleeperConnectionCopy {
  display: grid;
  gap: 5px;
  color: var(--head);
  font-size: 12px;
}

.sleeperConnectionCopy span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.sleeperConnectionForm label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sleeperConnectionForm input {
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--head);
}

@media (max-width: 980px) {
  .sleeperConnectionForm { grid-template-columns: 1fr 1fr; }
  .sleeperConnectionCopy { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .sleeperConnectionForm { grid-template-columns: 1fr; }
  .sleeperConnectionCopy { grid-column: auto; }
  .sleeperConnectionForm .resetButton { width: 100%; }
}



/* ==========================================================================
   ASSISTANT COMMAND CENTER
   --------------------------------------------------------------------------
   Appended last so it wins on source order over the earlier layered themes.
   Scoped to #assistantView throughout.

   Four visual priority levels, so the page can be read by weight alone:
     L1 .asstHero        primary decision   -- raised surface, accent edge
     L2 .asstSection     evidence + alts    -- panel surface, no hard border
     L3 .asstRailCard    supporting signals -- flat, hairline separation
     L4 .asstDeep        deep analysis      -- recessed, collapsed by default

   Color is semantic and reserved: green = true value/favorable, amber = wait
   or tier pressure, red = real risk or avoid, blue = the recommended action.
   ========================================================================== */

#assistantView {
  --asst-l1: #1A2233;
  --asst-l2: #151C2A;
  --asst-l3: #121826;
  --asst-l4: #0E141F;
  --asst-hairline: rgba(255, 255, 255, 0.07);
  --asst-text: #E8EDF6;
  /* Lifted from --muted #8A94A6 for legibility on the darker surfaces. */
  --asst-dim: #A3ADBF;
  --asst-gap: 18px;
}

/* ---- Command header ---------------------------------------------------- */

#assistantView .asstCommandBar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: var(--asst-gap);
  background: linear-gradient(180deg, rgba(18, 24, 38, 0.98), rgba(18, 24, 38, 0.94));
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

#assistantView .asstCommandHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

#assistantView .asstTitleBlock {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 0 0 auto;
}
#assistantView .asstTitleBlock h2 {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.1;
  color: var(--head);
  letter-spacing: -0.01em;
}
#assistantView .asstTitleBlock span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--asst-dim);
}

#assistantView .asstStatusRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
}

#assistantView .asstStatusChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--asst-hairline);
  border-radius: 999px;
  background: var(--asst-l4);
  color: var(--asst-text);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#assistantView .asstStatusChip em,
#assistantView .asstStatusChip i {
  font-style: normal;
  font-weight: 600;
  color: var(--asst-dim);
}
#assistantView .asstStatusChip.accent {
  border-color: rgba(91, 157, 249, 0.4);
  background: var(--accent-soft);
  color: var(--accent-2);
}
#assistantView .asstStatusChip.muted { color: var(--asst-dim); font-weight: 600; }
#assistantView .asstStatusChip.undo {
  cursor: pointer;
  border-color: rgba(242, 180, 65, 0.35);
  color: var(--warn);
}
#assistantView .asstStatusChip.undo:hover { background: var(--clock-soft); }
/* Status dot: the only place a bare colored pip is used. */
#assistantView .asstStatusChip > b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--asst-dim);
}
#assistantView .asstStatusChip.good > b { background: var(--good); box-shadow: 0 0 0 3px var(--turf-soft); }
#assistantView .asstStatusChip.warn > b { background: var(--warn); box-shadow: 0 0 0 3px var(--clock-soft); }

#assistantView .asstHowItWorks { flex: 0 0 auto; font-size: 12px; }
#assistantView .asstHowItWorks > summary {
  cursor: pointer;
  list-style: none;
  padding: 4px 10px;
  border: 1px solid var(--asst-hairline);
  border-radius: 999px;
  color: var(--asst-dim);
  font-weight: 700;
}
#assistantView .asstHowItWorks > summary::-webkit-details-marker { display: none; }
#assistantView .asstHowItWorks > summary:hover { color: var(--asst-text); }
#assistantView .asstHowItWorks p {
  max-width: 62ch;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--asst-l4);
  color: var(--asst-dim);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---- Control bar ------------------------------------------------------- */

#assistantView .asstControlBar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
#assistantView .asstControlBar > label {
  display: grid;
  gap: 4px;
  flex: 1 1 170px;
  min-width: 0;
  max-width: 260px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--asst-dim);
}
#assistantView .asstControlBar select,
#assistantView .asstControlBar input {
  height: 34px;
  width: 100%;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--asst-l4);
  color: var(--asst-text);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
#assistantView .asstControlBar .assistantSearch { flex: 2 1 240px; max-width: 340px; }

#assistantView .asstAdvancedControls { flex: 0 0 auto; }
#assistantView .asstAdvancedControls > summary {
  cursor: pointer;
  list-style: none;
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--asst-l4);
  color: var(--asst-dim);
  font-size: 12px;
  font-weight: 700;
}
#assistantView .asstAdvancedControls > summary::-webkit-details-marker { display: none; }
#assistantView .asstAdvancedControls > div {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 9px;
  background: var(--asst-l4);
}
#assistantView .asstAdvancedControls label {
  display: grid;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--asst-dim);
}
#assistantView .asstResetControls { height: 34px; flex: 0 0 auto; }

/* ---- Layout: 62/38 ----------------------------------------------------- */

#assistantView .assistantLayout {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  align-items: start;
  gap: var(--asst-gap);
}
#assistantView .asstMainPanel,
#assistantView .asstRailPanel {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
#assistantView .asstRailPanel { position: sticky; top: 128px; }
#assistantView .asstRailPanel .panelHeader {
  padding: 0 0 8px;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--asst-hairline);
}
#assistantView .asstRailPanel .panelHeader h2 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--asst-dim);
}
#assistantView .recommendation,
#assistantView .boardIntelPanel {
  display: grid;
  gap: var(--asst-gap);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* ---- Shared primitives ------------------------------------------------- */

#assistantView .asstPos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 19px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #08111F;
  background: var(--asst-dim);
}
#assistantView .asstPos.qb  { background: var(--pos-qb); }
#assistantView .asstPos.rb  { background: var(--pos-rb); }
#assistantView .asstPos.wr  { background: var(--pos-wr); }
#assistantView .asstPos.te  { background: var(--pos-te); color: #F5F3FF; }
#assistantView .asstPos.k   { background: var(--pos-k); }
#assistantView .asstPos.dst { background: var(--pos-dst); color: #F1F5F9; }

#assistantView .asstChipRow { display: flex; flex-wrap: wrap; gap: 6px; }
#assistantView .asstChip {
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--asst-hairline);
  background: var(--asst-l4);
  color: var(--asst-dim);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
#assistantView .asstChip.good { border-color: rgba(54, 194, 139, 0.38); background: var(--turf-soft); color: var(--good); }
#assistantView .asstChip.warn { border-color: rgba(242, 180, 65, 0.38); background: var(--clock-soft); color: var(--warn); }
#assistantView .asstChip.bad  { border-color: rgba(236, 106, 96, 0.38); background: var(--alert-soft); color: var(--bad); }

#assistantView .asstPrimaryButton {
  height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 9px;
  background: var(--accent);
  color: #06101F;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
#assistantView .asstPrimaryButton:hover { filter: brightness(1.08); transform: translateY(-1px); }
#assistantView .asstPrimaryButton.small { height: 32px; padding: 0 14px; font-size: 12.5px; }

#assistantView .asstGhostButton {
  height: 42px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--asst-dim);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}
#assistantView .asstGhostButton:hover { border-color: var(--accent); color: var(--asst-text); }
#assistantView .asstGhostButton.small { height: 30px; padding: 0 11px; font-size: 12px; }

#assistantView button:focus-visible,
#assistantView summary:focus-visible,
#assistantView select:focus-visible,
#assistantView input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

#assistantView .asstEmpty,
#assistantView .asstRailNote {
  margin: 0;
  color: var(--asst-dim);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---- L1: On the Clock hero --------------------------------------------- */

#assistantView .asstHero {
  display: grid;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 14px;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(91, 157, 249, 0.10), transparent 58%),
    var(--asst-l1);
  border: 1px solid var(--asst-hairline);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow);
  animation: asstHeroIn 0.28s ease both;
}
/* The left edge carries the action, so the whole card reads at a glance. */
#assistantView .asstHero[data-action="now"]    { border-left-color: var(--bad); }
#assistantView .asstHero[data-action="target"] { border-left-color: var(--warn); }
#assistantView .asstHero[data-action="wait"]   { border-left-color: var(--good); }
#assistantView .asstHero[data-action="pass"]   { border-left-color: var(--bad); }

@keyframes asstHeroIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #assistantView .asstHero { animation: none; }
  #assistantView * { scroll-behavior: auto !important; }
}

#assistantView .asstHeroMain {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}
#assistantView .asstEyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-2);
}
#assistantView .asstHeroIdentity h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.03;
  letter-spacing: -0.022em;
  color: var(--head);
}
#assistantView .asstHeroMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--asst-dim);
}
#assistantView .asstHeroMeta b { color: var(--asst-text); font-variant-numeric: tabular-nums; }

#assistantView .asstHeroAction { text-align: right; margin-left: auto; }
#assistantView .asstActionVerb {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent);
}
#assistantView .asstActionVerb.good { color: var(--good); }
#assistantView .asstActionVerb.warn { color: var(--warn); }
#assistantView .asstActionVerb.bad  { color: var(--bad); }
#assistantView .asstActionVerb.small {
  font-size: 14px;
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid currentColor;
}
#assistantView .asstHeroAction em {
  display: block;
  max-width: 34ch;
  margin-top: 6px;
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--asst-dim);
}

#assistantView .asstHeadline {
  max-width: 76ch;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--asst-text);
}

#assistantView .asstHeroEvidence {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 12px;
}

/* Survival meter -- the single most decision-relevant number on the page. */
#assistantView .asstSurvival,
#assistantView .asstConfidence {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 13px 15px;
  border-radius: 11px;
  background: var(--asst-l4);
  border: 1px solid var(--asst-hairline);
}
#assistantView .asstSurvivalHead,
#assistantView .asstConfidenceHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
#assistantView .asstSurvivalHead span,
#assistantView .asstConfidenceHead span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--asst-dim);
}
#assistantView .asstSurvivalHead strong,
#assistantView .asstConfidenceHead strong {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--head);
  white-space: nowrap;
}
#assistantView .asstSurvivalHead strong b,
#assistantView .asstConfidenceHead strong b {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#assistantView .asstSurvivalTrack,
#assistantView .asstConfidenceTrack,
#assistantView .asstDriverTrack {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
#assistantView .asstSurvivalTrack i,
#assistantView .asstConfidenceTrack i,
#assistantView .asstDriverTrack i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.32s ease;
}
#assistantView .asstSurvival.good  .asstSurvivalTrack i { background: var(--good); }
#assistantView .asstSurvival.warn  .asstSurvivalTrack i { background: var(--warn); }
#assistantView .asstSurvival.bad   .asstSurvivalTrack i { background: var(--bad); }
#assistantView .asstSurvival.good  .asstSurvivalHead strong b { color: var(--good); }
#assistantView .asstSurvival.warn  .asstSurvivalHead strong b { color: var(--warn); }
#assistantView .asstSurvival.bad   .asstSurvivalHead strong b { color: var(--bad); }
#assistantView .asstSurvival.good  { border-color: rgba(54, 194, 139, 0.28); }
#assistantView .asstSurvival.warn  { border-color: rgba(242, 180, 65, 0.28); }
#assistantView .asstSurvival.bad   { border-color: rgba(236, 106, 96, 0.30); }
#assistantView .asstSurvival p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--asst-text); }
#assistantView .asstConfidence p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--asst-dim); }
#assistantView .asstConfidence.low .asstConfidenceTrack i { background: var(--warn); }

#assistantView .asstSurvivalMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 2px 0 0;
}
#assistantView .asstSurvivalMeta div { display: grid; gap: 1px; }
#assistantView .asstSurvivalMeta dt {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--asst-dim);
}
#assistantView .asstSurvivalMeta dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--asst-text);
}

#assistantView .asstHeroActions { display: flex; flex-wrap: wrap; gap: 9px; }
#assistantView .asstHeroActions.compact { gap: 7px; }

/* ---- L2: evidence sections --------------------------------------------- */

#assistantView .asstSection {
  display: grid;
  gap: 13px;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--asst-l2);
  border: 1px solid var(--asst-hairline);
}
#assistantView .asstSectionHead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--asst-hairline);
}
#assistantView .asstSectionHead h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--head);
}
#assistantView .asstSectionHead span { font-size: 12px; color: var(--asst-dim); }

/* Why this pick */
#assistantView .asstDriverGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 11px;
}
#assistantView .asstDriver {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 13px;
  border-radius: 10px;
  background: var(--asst-l4);
  border-top: 2px solid var(--asst-hairline);
}
#assistantView .asstDriver.good { border-top-color: var(--good); }
#assistantView .asstDriver.warn { border-top-color: var(--warn); }
#assistantView .asstDriver.bad  { border-top-color: var(--bad); }
#assistantView .asstDriver > span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--asst-dim);
}
#assistantView .asstDriver > strong {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--head);
}
#assistantView .asstDriver.good > strong { color: var(--good); }
#assistantView .asstDriver.bad  > strong { color: var(--bad); }
#assistantView .asstDriver.good .asstDriverTrack i { background: var(--good); }
#assistantView .asstDriver.warn .asstDriverTrack i { background: var(--warn); }
#assistantView .asstDriver.bad  .asstDriverTrack i { background: var(--bad); }
#assistantView .asstDriver p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--asst-dim); }

#assistantView .asstDecisionSummary {
  margin: 0;
  padding: 12px 14px;
  border-radius: 9px;
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--asst-text);
}

/* Comparison matrix */
#assistantView .asstCompareSummary {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--asst-text);
}
#assistantView .asstMatrix { display: grid; gap: 3px; }
#assistantView .asstMatrixHead,
#assistantView .asstMatrixRow {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr) 92px;
  align-items: center;
  gap: 10px;
}
#assistantView .asstMatrixHead {
  padding-bottom: 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--asst-dim);
}
#assistantView .asstMatrixHead .a { color: var(--accent-2); }
#assistantView .asstMatrixHead .b { color: var(--asst-dim); }
#assistantView .asstMatrixHead span:last-child,
#assistantView .asstMatrixEdge { text-align: right; }
#assistantView .asstMatrixRow {
  padding: 7px 8px;
  border-radius: 8px;
  background: var(--asst-l4);
}
#assistantView .asstMatrixLabel { font-size: 12.5px; font-weight: 700; color: var(--asst-text); }
#assistantView .asstMatrixBar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 20px;
}
#assistantView .asstMatrixBar i {
  display: block;
  height: 9px;
  min-width: 2px;
  border-radius: 999px;
  transition: width 0.32s ease;
}
#assistantView .asstMatrixBar.a i { background: var(--accent); }
#assistantView .asstMatrixBar.b i { background: #5A6577; }
#assistantView .asstMatrixBar b {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--asst-dim);
  white-space: nowrap;
}
#assistantView .asstMatrixRow.win-a .asstMatrixBar.a b { color: var(--accent-2); }
#assistantView .asstMatrixRow.win-b .asstMatrixBar.b b { color: var(--asst-text); }
#assistantView .asstMatrixEdge {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--asst-text);
  white-space: nowrap;
}
#assistantView .asstMatrixRow.even .asstMatrixEdge { color: var(--asst-dim); font-weight: 600; }
#assistantView .asstMatrixEdge em { font-style: normal; }

#assistantView .asstWhyPreferred {
  display: grid;
  gap: 9px;
  padding: 13px 15px;
  border-radius: 10px;
  background: var(--asst-l4);
  border-left: 2px solid var(--warn);
}
#assistantView .asstWhyPreferred h5 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--head);
}
#assistantView .asstWhyPreferred p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--asst-dim); }
#assistantView .asstRankLabels { display: flex; flex-wrap: wrap; gap: 8px; }
#assistantView .asstRankLabel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--asst-hairline);
}
#assistantView .asstRankLabel em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--asst-dim);
}
#assistantView .asstRankLabel b {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--asst-text);
}
#assistantView .asstRankLabel.accent { border-color: rgba(91, 157, 249, 0.4); background: var(--accent-soft); }
#assistantView .asstRankLabel.accent b { color: var(--accent-2); }

/* Alternatives */
#assistantView .asstAltGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 11px;
}
#assistantView .asstAltCard {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 13px;
  border-radius: 10px;
  background: var(--asst-l4);
  border: 1px solid var(--asst-hairline);
  cursor: pointer;
  transition: border-color 0.14s ease, transform 0.14s ease;
}
#assistantView .asstAltCard:hover { border-color: var(--accent); transform: translateY(-2px); }
#assistantView .asstAltCard.current { border-color: rgba(91, 157, 249, 0.45); background: var(--accent-soft); }
#assistantView .asstAltLabels { display: flex; flex-wrap: wrap; gap: 5px; }
#assistantView .asstAltCard > strong {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--head);
}
#assistantView .asstAltCard > em {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 11.5px;
  color: var(--asst-dim);
}
#assistantView .asstAltCard > p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--asst-dim); }
#assistantView .asstAltSurvival {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--asst-dim);
}
#assistantView .asstAltSurvival.good { color: var(--good); }
#assistantView .asstAltSurvival.warn { color: var(--warn); }
#assistantView .asstAltSurvival.bad  { color: var(--bad); }
#assistantView .asstAltActions { display: flex; gap: 6px; margin-top: 2px; }

/* Falling to you */
#assistantView .asstFallList { display: grid; gap: 6px; }
#assistantView .asstFallRow {
  display: grid;
  grid-template-columns: 300px repeat(4, minmax(0, 1fr)) 140px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--asst-l4);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease;
}
#assistantView .asstFallRow:hover { border-color: var(--accent); }
#assistantView .asstFallName { display: grid; gap: 2px; min-width: 0; }
#assistantView .asstFallName strong { font-size: 13.5px; font-weight: 700; color: var(--asst-text); }
#assistantView .asstFallName em {
  display: flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 11px;
  color: var(--asst-dim);
}
#assistantView .asstFallStat { display: grid; gap: 1px; min-width: 0; justify-items: start; }
#assistantView .asstFallStat em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--asst-dim);
}
#assistantView .asstFallStat b {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--asst-text);
}
#assistantView .asstFallStat.gain b { color: var(--good); }
#assistantView .asstFallStat b.good { color: var(--good); }
#assistantView .asstFallStat b.warn { color: var(--warn); }
#assistantView .asstFallStat b.bad  { color: var(--bad); }
#assistantView .asstFallTrend { justify-self: end; width: 140px; overflow: hidden; font-size: 11px; font-weight: 700; color: var(--good); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 820px) {
  #assistantView .asstFallTrend { justify-self: start; width: auto; overflow: visible; text-align: left; }
}

/* Player lookup */
#assistantView .asstLookupCard { display: grid; gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--asst-l4); }
#assistantView .asstLookupHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#assistantView .asstLookupHead strong { display: block; font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--head); }
#assistantView .asstLookupHead em {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-style: normal;
  font-size: 12px;
  color: var(--asst-dim);
}
#assistantView .asstLookupCase { margin: 0; font-size: 13px; line-height: 1.6; color: var(--asst-dim); }
#assistantView .asstLookupSurvival { margin: 0; font-size: 13px; color: var(--asst-dim); }
#assistantView .asstLookupSurvival b { font-size: 15px; font-weight: 800; }
#assistantView .asstLookupSurvival.good b { color: var(--good); }
#assistantView .asstLookupSurvival.warn b { color: var(--warn); }
#assistantView .asstLookupSurvival.bad  b { color: var(--bad); }

#assistantView .asstEmptyState { text-align: center; padding: 40px 20px; justify-items: center; }
#assistantView .asstEmptyState h4 { margin: 0; font-size: 17px; color: var(--head); }
#assistantView .asstEmptyState p { margin: 0; max-width: 46ch; color: var(--asst-dim); font-size: 13px; line-height: 1.6; }

/* ---- L3: right-rail supporting modules --------------------------------- */

#assistantView .asstRailCard {
  display: grid;
  gap: 10px;
  padding: 14px 15px;
  border-radius: 11px;
  background: var(--asst-l3);
  border: 1px solid var(--asst-hairline);
}
#assistantView .asstRailCard > h4,
#assistantView .asstRailCard > summary h4 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--asst-dim);
}

#assistantView .asstPocketCounts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}
#assistantView .asstPocketCount {
  display: grid;
  gap: 3px;
  padding: 9px 4px;
  border: 1px solid var(--asst-hairline);
  border-radius: 8px;
  background: var(--asst-l4);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.14s ease;
}
#assistantView .asstPocketCount:hover:not(:disabled) { border-color: var(--accent); }
#assistantView .asstPocketCount:disabled { opacity: 0.42; cursor: default; }
#assistantView .asstPocketCount strong {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--asst-text);
}
#assistantView .asstPocketCount span {
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--asst-dim);
}
#assistantView .asstPocketCount.good strong { color: var(--good); }
#assistantView .asstPocketCount.warn strong { color: var(--warn); }
#assistantView .asstPocketCount.bad  strong { color: var(--bad); }

#assistantView .asstPosList { display: grid; gap: 7px; }
#assistantView .asstPosRow {
  display: grid;
  gap: 6px;
  padding: 10px 11px;
  border-radius: 9px;
  background: var(--asst-l4);
  border-left: 2px solid var(--asst-hairline);
}
#assistantView .asstPosRow.good { border-left-color: var(--good); }
#assistantView .asstPosRow.warn { border-left-color: var(--warn); }
#assistantView .asstPosRow.bad  { border-left-color: var(--bad); }
#assistantView .asstPosHead { display: flex; align-items: center; gap: 9px; }
#assistantView .asstPosPlayer {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
#assistantView .asstPosPlayer strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--asst-text);
}
#assistantView .asstPosPlayer:hover strong { color: var(--accent-2); }
#assistantView .asstPosPlayer em { font-style: normal; font-size: 11px; color: var(--asst-dim); }
#assistantView .asstPosAction {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
#assistantView .asstPosAction.good { background: var(--turf-soft); color: var(--good); }
#assistantView .asstPosAction.warn { background: var(--clock-soft); color: var(--warn); }
#assistantView .asstPosAction.bad  { background: var(--alert-soft); color: var(--bad); }
#assistantView .asstPosBar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
#assistantView .asstPosBar i { display: block; height: 100%; border-radius: 999px; background: var(--asst-dim); }
#assistantView .asstPosRow.good .asstPosBar i { background: var(--good); }
#assistantView .asstPosRow.warn .asstPosBar i { background: var(--warn); }
#assistantView .asstPosRow.bad  .asstPosBar i { background: var(--bad); }
#assistantView .asstPosMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 11px;
  margin: 0;
  font-size: 11px;
  color: var(--asst-dim);
}
#assistantView .asstPosMeta .urgent { color: var(--warn); font-weight: 700; }
#assistantView .asstPosNote { font-style: normal; font-size: 11.5px; line-height: 1.45; color: var(--asst-dim); }
#assistantView .asstShowAllPos { justify-self: start; }

#assistantView .asstRosterPriority {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 6px;
}
#assistantView .asstRosterPriority p {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--asst-l4);
}
#assistantView .asstRosterPriority em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--asst-dim);
}
#assistantView .asstRosterPriority strong { font-size: 15px; font-weight: 800; color: var(--asst-text); }
#assistantView .asstRosterPriority p:first-child strong { color: var(--warn); }

#assistantView .asstRosterGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 5px;
  margin-top: 9px;
}
#assistantView .asstSlot {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 7px;
  background: var(--asst-l4);
  border-left: 2px solid var(--asst-hairline);
}
#assistantView .asstSlot span {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--asst-dim);
}
#assistantView .asstSlot strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--asst-text);
}
#assistantView .asstSlot.filled { border-left-color: var(--good); }
#assistantView .asstSlot.open strong { color: var(--asst-dim); }
#assistantView .asstSlot.target { border-left-color: var(--warn); background: var(--clock-soft); }
#assistantView .asstSlot.target strong { color: var(--warn); }
#assistantView .asstSlot[data-pos="QB"]  { --slot-hue: var(--pos-qb); }
#assistantView .asstSlot[data-pos="RB"]  { --slot-hue: var(--pos-rb); }
#assistantView .asstSlot[data-pos="WR"]  { --slot-hue: var(--pos-wr); }
#assistantView .asstSlot[data-pos="TE"]  { --slot-hue: var(--pos-te); }
#assistantView .asstSlot[data-pos="K"]   { --slot-hue: var(--pos-k); }
#assistantView .asstSlot[data-pos="DST"] { --slot-hue: var(--pos-dst); }
#assistantView .asstSlot.filled[data-pos] { border-left-color: var(--slot-hue, var(--good)); }

#assistantView .asstAlertList { display: grid; gap: 6px; }
#assistantView .asstAlert {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--asst-hairline);
  background: var(--asst-l4);
  text-align: left;
  cursor: pointer;
}
#assistantView .asstAlert:hover { border-color: var(--accent); }
#assistantView .asstAlert span {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#assistantView .asstAlert.good span { color: var(--good); }
#assistantView .asstAlert.warn span { color: var(--warn); }
#assistantView .asstAlert.bad  span { color: var(--bad); }
#assistantView .asstAlert strong { font-size: 13px; font-weight: 700; color: var(--asst-text); }
#assistantView .asstAlert em { font-style: normal; font-size: 11.5px; line-height: 1.45; color: var(--asst-dim); }

/* ---- L4: deep analysis (recessed, collapsed) --------------------------- */

#assistantView .asstDeep {
  border-radius: 11px;
  background: var(--asst-l4);
  border: 1px solid rgba(255, 255, 255, 0.045);
}
#assistantView details.asstSection.asstDeep { display: block; padding: 0; }
#assistantView .asstDeep > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 12px;
  padding: 13px 18px;
  cursor: pointer;
  list-style: none;
  color: var(--asst-dim);
}
#assistantView .asstDeep > summary::-webkit-details-marker { display: none; }
#assistantView .asstDeep > summary::before {
  content: "▸";
  font-size: 11px;
  color: var(--asst-dim);
  transition: transform 0.16s ease;
}
#assistantView .asstDeep[open] > summary::before { transform: rotate(90deg); }
#assistantView .asstDeep > summary h4 {
  display: inline;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--asst-text);
}
#assistantView .asstDeep > summary span { font-size: 11.5px; color: var(--asst-dim); }
#assistantView .asstDeep > summary:hover h4 { color: var(--accent-2); }
#assistantView details.asstSection.asstDeep > *:not(summary) { padding: 0 18px 18px; }
#assistantView .asstCompare .asstDeep { margin-top: 2px; }

#assistantView .asstListFilters { display: flex; flex-wrap: wrap; gap: 6px; }
#assistantView .asstFilterChip {
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--asst-hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--asst-dim);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
#assistantView .asstFilterChip:hover { color: var(--asst-text); }
#assistantView .asstFilterChip.active {
  border-color: rgba(91, 157, 249, 0.45);
  background: var(--accent-soft);
  color: var(--accent-2);
}

#assistantView .asstTableWrap { overflow-x: auto; margin-top: 10px; }
#assistantView .asstTable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#assistantView .asstTable th {
  position: sticky;
  top: 0;
  padding: 7px 9px;
  text-align: left;
  white-space: nowrap;
  background: var(--asst-l3);
  border-bottom: 1px solid var(--asst-hairline);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--asst-dim);
}
#assistantView .asstTable td {
  padding: 7px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--asst-text);
  white-space: nowrap;
}
#assistantView .asstTable tbody tr { cursor: pointer; }
#assistantView .asstTable tbody tr:hover { background: rgba(91, 157, 249, 0.07); }
#assistantView .asstTable tbody tr.asstActiveRow { background: var(--accent-soft); }
#assistantView .asstTable tbody tr[hidden] { display: none; }

#assistantView .asstBoardGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
#assistantView .asstBoardCard {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 12px;
  border-radius: 9px;
  background: var(--asst-l3);
  border: 1px solid var(--asst-hairline);
}
#assistantView .asstBoardCard > .asstChip { justify-self: start; }
#assistantView .asstBoardCard button {
  display: grid;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
#assistantView .asstBoardCard button strong { font-size: 15px; font-weight: 800; color: var(--head); }
#assistantView .asstBoardCard button:hover strong { color: var(--accent-2); }
#assistantView .asstBoardCard button em {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 11px;
  color: var(--asst-dim);
}
#assistantView .asstBoardCard p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--asst-dim); }

#assistantView .assistantSearchResults { display: grid; gap: 5px; }
#assistantView .assistantSearchResults h4 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--asst-dim);
}

/* Nothing inside the tab may push the page sideways. */
#assistantView .tableWrap,
#assistantView .asstMatrix,
#assistantView .asstRosterGrid { max-width: 100%; }
#assistantView img, #assistantView svg { max-width: 100%; }

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 1180px) {
  #assistantView .assistantLayout { grid-template-columns: minmax(0, 1fr); }
  #assistantView .asstRailPanel { position: static; }
  #assistantView .asstHeroEvidence { grid-template-columns: minmax(0, 1fr); }
  #assistantView .asstAltGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  #assistantView .asstCommandBar { padding: 10px 12px; }
  #assistantView .asstHero { padding: 18px 16px; }
  #assistantView .asstHeroAction { text-align: left; margin-left: 0; }
  #assistantView .asstHeroAction em { max-width: none; }
  #assistantView .asstSection { padding: 15px 14px; }
  #assistantView .asstMatrixHead { display: none; }
  /* Stack each matrix row into label / two bars / edge so nothing overflows. */
  #assistantView .asstMatrixRow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label edge" "bara bara" "barb barb";
    gap: 5px 10px;
  }
  #assistantView .asstMatrixLabel { grid-area: label; }
  #assistantView .asstMatrixEdge  { grid-area: edge; }
  #assistantView .asstMatrixBar.a { grid-area: bara; }
  #assistantView .asstMatrixBar.b { grid-area: barb; }
  #assistantView .asstFallRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 12px;
  }
  #assistantView .asstFallName { grid-column: 1 / -1; }
  #assistantView .asstFallTrend { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  #assistantView { --asst-gap: 12px; }
  /* Controls collapse into a drawer so the recommendation owns the fold. */
  #assistantView .asstControlBar {
    display: none;
    width: 100%;
  }
  #assistantView .asstCommandBar.controlsOpen .asstControlBar { display: flex; }
  #assistantView .asstControlBar > label,
  #assistantView .asstControlBar .assistantSearch { flex: 1 1 100%; max-width: none; }
  #assistantView .asstControlsToggle { display: inline-flex; }
  #assistantView .asstHeroIdentity h3 { font-size: 27px; }
  #assistantView .asstHeroActions { display: grid; grid-template-columns: 1fr 1fr; }
  #assistantView .asstHeroActions .asstPrimaryButton { grid-column: 1 / -1; }
  #assistantView .asstAltGrid { grid-template-columns: minmax(0, 1fr); }
  #assistantView .asstDriverGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #assistantView .asstPocketCounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #assistantView .asstFallRow { grid-template-columns: minmax(0, 1fr); }
}

/* Toggle button is injected only where the drawer exists. */
#assistantView .asstControlsToggle {
  display: none;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--asst-l4);
  color: var(--asst-dim);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

#assistantView .asstSurvivalBasis {
  font-style: normal;
  font-size: 11px;
  line-height: 1.45;
  color: var(--asst-dim);
}

/* ---- Fold tuning ------------------------------------------------------
   The shared app chrome (topbar + Sleeper bar + tabs) already consumes
   ~310px before the tab starts, so the command header and hero are tuned
   to keep the decision -- player, action, survival, confidence, draft
   button -- inside a 720px viewport.
   ---------------------------------------------------------------------- */
#assistantView .asstCommandBar { padding: 9px 14px; gap: 8px; margin-bottom: 14px; }
#assistantView .asstCommandHead { gap: 8px 14px; }
#assistantView .asstTitleBlock h2 { font-size: 17px; }
#assistantView .asstControlBar select,
#assistantView .asstControlBar input,
#assistantView .asstAdvancedControls > summary,
#assistantView .asstResetControls { height: 31px; }

#assistantView .asstHero { padding: 16px 20px; gap: 12px; }
#assistantView .asstHeroIdentity h3 { font-size: clamp(24px, 2.9vw, 33px); }
#assistantView .asstHeroMeta { margin-top: 6px; }
#assistantView .asstHeadline { font-size: 14.5px; line-height: 1.5; }
#assistantView .asstSurvival,
#assistantView .asstConfidence { padding: 11px 13px; gap: 6px; }
#assistantView .asstSurvivalHead strong,
#assistantView .asstConfidenceHead strong { font-size: 21px; }
#assistantView .asstHeroActions .asstPrimaryButton,
#assistantView .asstHeroActions .asstGhostButton { height: 38px; }

/* Below ~860px tall the meta list and basis note are the first things the
   decision can live without. */
@media (min-width: 641px) and (max-height: 860px) {
  #assistantView .asstSurvivalBasis { display: none; }
  #assistantView .asstSurvivalMeta { gap: 4px 16px; }
}

/* Keep the status row to a single line at desktop widths so the header does
   not eat the fold the hero needs. */
#assistantView .asstStatusChip { height: 24px; padding: 0 8px; font-size: 11.5px; }
#assistantView .asstHowItWorks > summary,
#assistantView .asstControlsToggle { padding: 3px 9px; font-size: 11.5px; }
#assistantView .asstControlBar > label { font-size: 10px; }

/* The base .asstControlsToggle rule (display:none) is declared after the
   640px block, so it was winning on source order and hiding the only way to
   reach the controls on mobile. Re-assert the mobile state last. */
@media (max-width: 640px) {
  #assistantView .asstControlsToggle { display: inline-flex; }
}

/* ---- Stray inherited fills -------------------------------------------
   Bare global rules `.good` / `.warn` / `.bad` / `.neutral` (styles.css
   ~960 and ~6218) each set a background tint. Anything using those words
   as a tone class inherits the fill, which painted a red band behind the
   block-level DRAFT NOW verb -- wider than the text and left-aligned,
   because the strong fills its column while the text is right-aligned.

   In this tab tone is carried by text color and meters, not fills. Strip
   the inherited fill wherever the fill was never intended. Elements that
   DO want one (chips, pocket counts, position actions, survival cards)
   set it at higher specificity and are unaffected.
   ---------------------------------------------------------------------- */
#assistantView .asstActionVerb,
#assistantView .asstAltSurvival,
#assistantView .asstLookupSurvival,
#assistantView .asstFallStat b,
#assistantView .asstMatrixEdge,
#assistantView .asstSurvivalHead strong b,
#assistantView .asstConfidenceHead strong b {
  background: none;
}

/* ---- Disclosure summary alignment -------------------------------------
   Pre-existing `.uxDisclosure` summaries justify their children apart,
   which centered each title and pushed the subtitle to the far edge, so
   the collapsed sections did not line up with each other or with the
   content column. Pack every summary left instead.
   ---------------------------------------------------------------------- */
#assistantView .uxDisclosure > summary {
  justify-content: flex-start;
  text-align: left;
}
#assistantView .uxDisclosure > summary > * {
  flex: 0 1 auto;
}

/* ==========================================================================
   ASSISTANT REFINEMENT PASS
   Hero three-column split, availability confidence, price cells, sticky
   summary, and the position-outlook fact rows.
   ========================================================================== */

/* ---- Hero: identity | availability | decision -------------------------- */
#assistantView .asstHeroGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 18px;
  align-items: start;
}
#assistantView .asstHeroCol { display: grid; gap: 10px; align-content: start; min-width: 0; }
#assistantView .asstHeroIdentityCol > * { margin: 0; }
#assistantView .asstHeroDecisionCol { gap: 12px; }

#assistantView .asstHeroActionBox {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--asst-l4);
  border: 1px solid var(--asst-hairline);
  text-align: left;
}
/* Only DRAFT NOW gets a filled treatment. The point of the scarcity cap is
   that this styling stays rare enough to still mean something. */
#assistantView .asstHeroActionBox.now {
  background: rgba(236, 106, 96, 0.16);
  border-color: rgba(236, 106, 96, 0.5);
}
#assistantView .asstHeroActionBox .asstActionVerb { font-size: clamp(19px, 2.1vw, 25px); }
#assistantView .asstHeroActionBox em {
  display: block;
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
  color: var(--asst-dim);
}
#assistantView .asstHeroIdentityCol h3 { font-size: clamp(27px, 3.2vw, 37px); }

/* ---- Availability estimate confidence ---------------------------------- */
#assistantView .asstEstConfidence {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--asst-hairline);
  background: rgba(255, 255, 255, 0.03);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--asst-dim);
  cursor: help;
}
#assistantView .asstEstConfidence b { color: var(--asst-text); }
#assistantView .asstEstConfidence.low b { color: var(--warn); }
#assistantView .asstEstConfidence.high b { color: var(--good); }
/* A low-confidence estimate should not render as a crisp deterministic bar. */
#assistantView .asstSurvivalTrack.fuzzy i {
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.22) 0 5px, transparent 5px 10px);
}

/* ---- Price cells and signal rows --------------------------------------- */
#assistantView .asstPriceCell {
  font-weight: 700;
  white-space: nowrap;
  cursor: help;
  color: var(--asst-dim);
}
#assistantView .asstPriceCell.good { color: var(--good); }
#assistantView .asstPriceCell.warn { color: var(--warn); }
#assistantView .asstPriceCell.bad  { color: var(--bad); }

#assistantView .asstAltSignals,
#assistantView .asstBoardSignals { display: flex; flex-wrap: wrap; gap: 5px; }

#assistantView .asstAltSurvival {
  display: grid;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}
#assistantView .asstAltSurvival em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--asst-dim);
}
#assistantView .asstAltSurvival b {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
#assistantView .asstAltSurvival i { font-style: normal; font-size: 10.5px; color: var(--asst-dim); }

/* ---- Pocket pool definition -------------------------------------------- */
#assistantView .asstPocketPool {
  margin: 0;
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--asst-text);
}
#assistantView .asstPocketActionable {
  margin: 0;
  font-size: 12px;
  color: var(--asst-dim);
}
#assistantView .asstPocketActionable b {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-2);
}

/* ---- Position outlook: tier and price as separate facts ---------------- */
#assistantView .asstPosFacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  margin: 0;
}
#assistantView .asstPosFacts div { display: grid; gap: 1px; min-width: 0; }
#assistantView .asstPosFacts dt {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--asst-dim);
}
#assistantView .asstPosFacts dd {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--asst-text);
}
#assistantView .asstPosFacts dd.good { color: var(--good); }
#assistantView .asstPosFacts dd.warn { color: var(--warn); }
#assistantView .asstPosFacts dd.bad  { color: var(--bad); }
/* Amber, not red: tier pressure is urgency, not danger. */
#assistantView .asstPosAction.neutral { background: rgba(255,255,255,0.05); color: var(--asst-dim); }

/* ---- Comparison: mute the losing bar ----------------------------------- */
#assistantView .asstMatrixBar.muted i { opacity: 0.34; }
#assistantView .asstMatrixBar.muted b { opacity: 0.6; }
#assistantView .asstMatrixLabel abbr {
  text-decoration: none;
  border-bottom: 1px dotted var(--asst-hairline);
  cursor: help;
}

/* ---- Table draft button ------------------------------------------------ */
#assistantView .asstDraftCell {
  height: 25px;
  padding: 0 11px;
  border: 1px solid rgba(91, 157, 249, 0.45);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
#assistantView .asstDraftCell:hover { background: var(--accent); color: #06101F; }
#assistantView .asstDraftCell.done {
  border-color: rgba(54, 194, 139, 0.45);
  background: var(--turf-soft);
  color: var(--good);
}

/* ---- Falling trend chip ------------------------------------------------ */
#assistantView .asstFallTrend.neutral { color: var(--asst-dim); }
#assistantView .asstFallTrend.good { color: var(--good); }

/* ---- Sticky live-draft summary ----------------------------------------- */
#assistantView .asstSticky {
  position: sticky;
  top: 96px;
  z-index: 26;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: -6px;
  padding: 9px 14px;
  border-radius: 11px;
  border: 1px solid var(--asst-hairline);
  border-left: 3px solid var(--accent);
  background: rgba(26, 34, 51, 0.97);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
  animation: asstStickyIn 0.18s ease both;
}
#assistantView .asstSticky[hidden] { display: none; }
@keyframes asstStickyIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #assistantView .asstSticky { animation: none; }
}
#assistantView .asstStickyPick {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--asst-dim);
  white-space: nowrap;
}
#assistantView .asstStickyPlayer { display: flex; align-items: center; gap: 7px; min-width: 0; }
#assistantView .asstStickyPlayer strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 800;
  color: var(--head);
}
#assistantView .asstStickyAction {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.05);
  color: var(--asst-dim);
}
#assistantView .asstStickyAction.bad  { background: var(--alert-soft); color: var(--bad); }
#assistantView .asstStickyAction.warn { background: var(--clock-soft); color: var(--warn); }
#assistantView .asstStickyAction.good { background: var(--turf-soft); color: var(--good); }
#assistantView .asstStickyOdds {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--asst-dim);
}
#assistantView .asstStickyOdds.good { color: var(--good); }
#assistantView .asstStickyOdds.warn { color: var(--warn); }
#assistantView .asstStickyOdds.bad  { color: var(--bad); }
#assistantView .asstStickyActions { display: flex; gap: 6px; margin-left: auto; }
#assistantView .asstStickyActions .asstPrimaryButton,
#assistantView .asstStickyActions .asstGhostButton { height: 28px; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1180px) {
  #assistantView .asstHeroGrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #assistantView .asstHeroIdentityCol { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  #assistantView .asstHeroGrid { grid-template-columns: minmax(0, 1fr); }
  #assistantView .asstHeroIdentityCol { grid-column: auto; }
  #assistantView .asstPosFacts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #assistantView .asstSticky {
    top: 60px;
    gap: 6px 10px;
    padding: 8px 11px;
  }
  #assistantView .asstStickyPick { width: 100%; }
  #assistantView .asstStickyActions { margin-left: 0; width: 100%; }
  #assistantView .asstStickyActions button { flex: 1 1 auto; }
  #assistantView .asstPocketCounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Assistant visual finish ------------------------------------------
   Align the assistant with the app's navy surfaces, blue action color,
   purple model accent, and restrained green/amber semantic signals. */
#assistantView {
  --asst-l1: #132743;
  --asst-l2: #102039;
  --asst-l3: #0D1B31;
  --asst-l4: #091629;
  --asst-hairline: rgba(96, 165, 250, 0.18);
  --asst-text: #EFF6FF;
  --asst-dim: #9FB3CC;
}

#assistantView .asstCommandBar {
  background: linear-gradient(135deg, rgba(18, 39, 68, 0.98), rgba(10, 24, 45, 0.97));
  border-color: rgba(96, 165, 250, 0.28);
  box-shadow: 0 12px 30px rgba(2, 10, 24, 0.28), inset 0 1px 0 rgba(147, 197, 253, 0.08);
}
#assistantView .asstStatusChip,
#assistantView .asstHowItWorks > summary,
#assistantView .asstAdvancedControls > summary {
  border-color: rgba(96, 165, 250, 0.2);
}
#assistantView .asstStatusChip.accent {
  border-color: rgba(96, 165, 250, 0.52);
  background: rgba(37, 99, 235, 0.16);
}
#assistantView .asstControlBar select,
#assistantView .asstControlBar input {
  border-color: rgba(96, 165, 250, 0.22);
  box-shadow: inset 0 1px 2px rgba(2, 10, 24, 0.28);
}
#assistantView .asstControlBar select:hover,
#assistantView .asstControlBar input:hover {
  border-color: rgba(147, 197, 253, 0.48);
}

#assistantView .asstHero {
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(96, 165, 250, 0.2), transparent 58%),
    radial-gradient(60% 120% at 100% 100%, rgba(168, 85, 247, 0.12), transparent 62%),
    linear-gradient(145deg, #172F50, #0B1A31 72%);
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 18px 38px rgba(2, 10, 24, 0.3), inset 0 1px 0 rgba(191, 219, 254, 0.08);
}
#assistantView .asstHeroCol + .asstHeroCol {
  padding-left: 18px;
  border-left: 1px solid rgba(147, 197, 253, 0.16);
}
#assistantView .asstEyebrow { color: #A5B4FC; }
#assistantView .asstPrimaryButton {
  background: linear-gradient(135deg, #60A5FA, #818CF8);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
}
#assistantView .asstGhostButton {
  border-color: rgba(147, 197, 253, 0.25);
  background: rgba(7, 17, 31, 0.28);
}
#assistantView .asstGhostButton:hover {
  border-color: #60A5FA;
  background: rgba(37, 99, 235, 0.13);
}

#assistantView .asstSection {
  background: linear-gradient(145deg, rgba(16, 32, 57, 0.98), rgba(10, 23, 42, 0.98));
  border-color: rgba(96, 165, 250, 0.17);
  box-shadow: 0 10px 26px rgba(2, 10, 24, 0.16);
}
#assistantView .asstSectionHead {
  border-bottom-color: rgba(96, 165, 250, 0.18);
}
#assistantView .asstSectionHead h4,
#assistantView .asstRailCard > h4,
#assistantView .asstRailCard > summary h4 {
  color: #DBEAFE;
}
#assistantView .asstDriver,
#assistantView .asstAltCard,
#assistantView .asstFallRow,
#assistantView .asstRailCard,
#assistantView .asstLookupCard,
#assistantView .asstMatrixRow {
  background: rgba(6, 18, 34, 0.72);
  border-color: rgba(96, 165, 250, 0.14);
}
#assistantView .asstDriver:hover,
#assistantView .asstAltCard:hover,
#assistantView .asstFallRow:hover {
  border-color: rgba(96, 165, 250, 0.62);
  box-shadow: 0 7px 18px rgba(2, 10, 24, 0.2);
}
#assistantView .asstDecisionSummary {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.16), rgba(168, 85, 247, 0.1));
  border-left-color: #818CF8;
}
#assistantView .asstRankLabel.accent,
#assistantView .asstAltCard.current {
  border-color: rgba(129, 140, 248, 0.58);
  background: rgba(79, 70, 229, 0.14);
}
#assistantView .asstMatrixBar.a i,
#assistantView .asstDriverTrack i,
#assistantView .asstConfidenceTrack i {
  background: linear-gradient(90deg, #60A5FA, #A78BFA);
}

@media (max-width: 820px) {
  #assistantView .asstHeroCol + .asstHeroCol {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(147, 197, 253, 0.16);
    padding-top: 14px;
  }
}

/* =========================================================================
   MARKET RESEARCH WORKSPACE
   -------------------------------------------------------------------------
   Colour language for this tab (Section 16 of the Market rebuild):
     green  -> model ranks earlier / favourable model divergence
     red    -> market ranks earlier / model caution (a market premium, NEVER
               a statement that the player is bad)
     blue   -> neutral market research and structure
     amber  -> thin, uncertain, or incomplete evidence
   Cards deliberately avoid uniform borders: research groups are separated by
   background weight and spacing so the eye reads hierarchy, not a grid of
   equally important boxes.
   ========================================================================= */

#marketView {
  --mkt-model-early: var(--good);
  --mkt-market-early: var(--bad);
  --mkt-neutral: var(--accent);
  --mkt-uncertain: var(--warn);
  --mkt-surface: rgba(255, 255, 255, 0.022);
  --mkt-surface-raised: rgba(255, 255, 255, 0.045);
  --mkt-hairline: rgba(255, 255, 255, 0.07);
}

#marketView .mktDim { color: var(--muted); }
#marketView .mktGood, #marketView .mkt-good { color: var(--mkt-model-early); }
#marketView .mktBad, #marketView .mkt-bad { color: var(--mkt-market-early); }
#marketView .mkt-warn { color: var(--mkt-uncertain); }
#marketView .mkt-neutral { color: var(--ink); }

/* ---- Section 1: header + disclosure + status row ---------------------- */

#marketView .mktHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 28px;
}
#marketView .mktHeaderText { max-width: 62ch; }
#marketView .mktHeaderText p { margin-top: 6px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

#marketView .mktDisclosure {
  flex: 0 1 340px;
  border: 1px solid var(--mkt-hairline);
  border-radius: 10px;
  background: var(--mkt-surface);
  font-size: 12px;
}
#marketView .mktDisclosure > summary {
  cursor: pointer;
  padding: 9px 13px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.02em;
}
#marketView .mktDisclosure[open] > summary { color: var(--ink); border-bottom: 1px solid var(--mkt-hairline); }
#marketView .mktDisclosureBody { padding: 11px 13px 13px; }
#marketView .mktDisclosureLine { color: var(--muted); line-height: 1.55; }
#marketView .mktDisclosureLine + .mktDisclosureLine { margin-top: 9px; }
#marketView .mktDisclosureLine strong { color: var(--ink); }
#marketView .mktDisclosureSources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 4px 10px;
  margin: 10px 0;
  padding: 0;
  list-style: none;
}
#marketView .mktDisclosureSources li { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
#marketView .mktDisclosureSources strong { color: var(--ink); font-weight: 600; }

#marketView .mktStatusRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 16px 0 18px;
  border-radius: 12px;
  background: var(--mkt-hairline);
  overflow: hidden;
}
#marketView .mktStatusCell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  background: var(--panel);
}
#marketView .mktStatusCell span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
#marketView .mktStatusCell strong { color: var(--head); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
#marketView .mktStatusCell em { color: var(--muted); font-size: 11.5px; font-style: normal; }

/* ---- Section 3: research filters -------------------------------------- */

#marketView .mktFilters {
  margin-bottom: 26px;
  padding: 14px 16px;
  border: 1px solid var(--mkt-hairline);
  border-radius: 12px;
  background: var(--mkt-surface);
}
#marketView .mktFilterBasics,
#marketView .mktFilterAdvancedGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 14px;
}
#marketView .mktFilters label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#marketView .mktFilters input,
#marketView .mktFilters select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
#marketView .mktAdvanced { margin-top: 14px; }
#marketView .mktAdvanced > summary {
  cursor: pointer;
  padding: 6px 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
#marketView .mktAdvanced[open] > summary { margin-bottom: 10px; }

#marketView .mktFilterFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--mkt-hairline);
}
#marketView .mktChips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
#marketView .mktChipsEmpty { color: var(--muted); font-size: 12px; }
#marketView .mktChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid rgba(91, 157, 249, 0.35);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--ink);
  cursor: pointer;
  font-size: 11.5px;
}
#marketView .mktChip span { color: var(--muted); }
#marketView .mktChip strong { font-weight: 700; }
#marketView .mktChip em { color: var(--muted); font-style: normal; font-weight: 800; }
#marketView .mktChip:hover { border-color: var(--accent); }
#marketView .mktFilterMeta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
#marketView .mktFilterMeta em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 700; }

/* ---- section frame ---------------------------------------------------- */

#marketView .mktSection { margin: 0 0 42px; }
#marketView .mktSectionHead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mkt-hairline);
}
#marketView .mktSectionHeadSub { margin-top: 26px; }
#marketView .mktSectionHead span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
#marketView .mktSectionHead h3 { margin: 2px 0 0; color: var(--head); font-size: 17px; font-weight: 800; }
#marketView .mktSectionHead p { flex: 1 1 320px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
#marketView .mktSectionFoot { margin-top: 10px; font-size: 11.5px; }
#marketView .mktSubHead { margin: 16px 0 8px; color: var(--head); font-size: 12.5px; font-weight: 800; }

#marketView .mktEmpty { color: var(--muted); font-size: 12.5px; padding: 10px 0; }
#marketView .mktEmptyState {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px;
  border: 1px dashed var(--mkt-hairline);
  border-radius: 12px;
  background: var(--mkt-surface);
}
#marketView .mktEmptyState strong { color: var(--ink); font-size: 13.5px; }
#marketView .mktEmptyState span { color: var(--muted); font-size: 12.5px; }
#marketView .mktUnavailable {
  margin-top: 14px;
  padding: 12px 15px;
  border-left: 3px solid var(--mkt-uncertain);
  border-radius: 0 8px 8px 0;
  background: var(--clock-soft);
}
#marketView .mktUnavailable strong { color: var(--warn); font-size: 12px; font-weight: 800; letter-spacing: 0.03em; }
#marketView .mktUnavailable ul { margin: 7px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ---- Section 4: overview cards ---------------------------------------- */

#marketView .mktOverviewGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: 10px;
}
#marketView .mktOverviewCard {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 14px 12px;
  border: 0;
  border-top: 2px solid var(--mkt-neutral);
  border-radius: 4px 4px 10px 10px;
  background: var(--mkt-surface-raised);
  color: inherit;
  text-align: left;
  font: inherit;
}
#marketView button.mktOverviewCard { cursor: pointer; }
#marketView button.mktOverviewCard:hover { background: rgba(255, 255, 255, 0.07); }
#marketView .mktOverviewCard.good { border-top-color: var(--mkt-model-early); }
#marketView .mktOverviewCard.bad { border-top-color: var(--mkt-market-early); }
#marketView .mktOverviewCard.warn { border-top-color: var(--mkt-uncertain); }
#marketView .mktOverviewCard.active { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(91, 157, 249, 0.4); }
#marketView .mktCardLabel { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
#marketView .mktCardValue { color: var(--head); font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
#marketView .mktCardPct { color: var(--ink); font-size: 11.5px; font-weight: 600; }
#marketView .mktCardDef { margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
#marketView .mktCardCompare { margin-top: 5px; color: var(--accent-2); font-size: 11px; font-style: normal; font-weight: 700; }
#marketView .mktCardAction { margin-top: 7px; color: var(--muted); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---- stacked market-quality distribution bar -------------------------- */

#marketView .mktStackWrap { margin: 12px 0; }
#marketView .mktStackBar {
  display: flex;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
#marketView .mktStackBar i { height: 100%; }
#marketView .mktStackBar i.mktStack-clean { background: var(--mkt-model-early); }
#marketView .mktStackBar i.mktStack-divided { background: var(--mkt-market-early); }
#marketView .mktStackBar i.mktStack-thin { background: var(--mkt-uncertain); }
#marketView .mktStackBar i.mktStack-noisy { background: var(--muted); }
#marketView .mktStackKey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
#marketView .mktStackKey li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  padding-left: 9px;
  border-left: 2px solid currentColor;
  font-size: 11px;
}
#marketView .mktStackKey li.mktStack-clean { color: var(--mkt-model-early); }
#marketView .mktStackKey li.mktStack-divided { color: var(--mkt-market-early); }
#marketView .mktStackKey li.mktStack-thin { color: var(--mkt-uncertain); }
#marketView .mktStackKey li.mktStack-noisy { color: var(--muted); }
#marketView .mktStackKey span { color: var(--muted); }
#marketView .mktStackKey strong { color: var(--ink); font-variant-numeric: tabular-nums; }
#marketView .mktStackKey em { font-style: normal; }

/* ---- Section 5: draft ranges ------------------------------------------ */

#marketView .mktRangeGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 12px;
}
#marketView .mktRangeCard {
  padding: 15px 16px;
  border-radius: 12px;
  background: var(--mkt-surface-raised);
}
#marketView .mktRangeCard.active { box-shadow: inset 0 0 0 1px rgba(91, 157, 249, 0.45); background: var(--accent-soft); }
#marketView .mktRangeHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#marketView .mktRangeTitle,
#marketView .mktPositionTitle,
#marketView .mktInterpretationTitle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
#marketView .mktRangeTitle span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
#marketView .mktRangeTitle strong { color: var(--head); font-size: 16px; font-weight: 800; }
#marketView .mktRangeTitle:hover strong { color: var(--accent-2); }
#marketView .mktRangeHead em { color: var(--muted); font-size: 11.5px; font-style: normal; white-space: nowrap; }

#marketView .mktRangeStats,
#marketView .mktPositionStats,
#marketView .mktPanelStats,
#marketView .mktSignalList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px 12px;
  margin: 12px 0 0;
}
#marketView .mktRangeStats > div,
#marketView .mktPositionStats > div,
#marketView .mktPanelStats > div,
#marketView .mktSignalList > div { display: flex; flex-direction: column; gap: 1px; }
#marketView .mktRangeStats dt,
#marketView .mktPositionStats dt,
#marketView .mktPanelStats dt,
#marketView .mktSignalList dt { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
#marketView .mktRangeStats dd,
#marketView .mktPositionStats dd,
#marketView .mktPanelStats dd,
#marketView .mktSignalList dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

#marketView .mktRangeRead {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--mkt-neutral);
  border-radius: 0 8px 8px 0;
  background: rgba(91, 157, 249, 0.07);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.55;
}
#marketView .mktRangeLeaders,
#marketView .mktPositionLeaders { display: grid; gap: 8px; margin-top: 12px; }
#marketView .mktRangeLeaders { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
#marketView .mktRangeLeaders > div > span,
#marketView .mktPositionLeaders > div > span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#marketView .mktPlayerChip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-left: 2px solid var(--muted);
  border-radius: 0 7px 7px 0;
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
#marketView .mktPlayerChip:hover { background: rgba(255, 255, 255, 0.075); }
#marketView .mktPlayerChip.good { border-left-color: var(--mkt-model-early); }
#marketView .mktPlayerChip.bad { border-left-color: var(--mkt-market-early); }
#marketView .mktPlayerChip strong { color: var(--ink); font-size: 12.5px; font-weight: 700; }
#marketView .mktPlayerChip span { color: var(--muted); font-size: 11px; }
#marketView .mktPlayerChip.empty { color: var(--muted); font-size: 11.5px; padding: 7px 0; background: none; border: 0; }

#marketView .mktRangeDetails { margin-top: 12px; }
#marketView .mktRangeDetails > summary { cursor: pointer; color: var(--accent); font-size: 11.5px; font-weight: 700; }
#marketView .mktRangeActionList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; margin: 9px 0; padding: 0; list-style: none; }
#marketView .mktRangeActionList li { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11.5px; }
#marketView .mktRangeActionList strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- Section 6: positions --------------------------------------------- */

#marketView .mktPositionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 12px;
}
#marketView .mktPositionCard { padding: 15px 16px; border-radius: 12px; background: var(--mkt-surface-raised); }
#marketView .mktPositionCard.active { box-shadow: inset 0 0 0 1px rgba(91, 157, 249, 0.45); background: var(--accent-soft); }
#marketView .mktPositionHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#marketView .mktPositionTitle strong { color: var(--head); font-size: 20px; font-weight: 800; letter-spacing: 0.02em; }
#marketView .mktPositionTitle span { color: var(--muted); font-size: 11.5px; }
#marketView .mktPositionTitle:hover strong { color: var(--accent-2); }
#marketView .mktPositionHead em { color: var(--muted); font-size: 10.5px; font-style: normal; text-align: right; }
#marketView .mktOptionalPositions { margin-top: 14px; }
#marketView .mktOptionalPositions > summary { cursor: pointer; padding: 7px 0; color: var(--accent); font-size: 12px; font-weight: 700; }
#marketView .mktOptionalPositions[open] > summary { margin-bottom: 10px; }

/* ---- view pills (sources, divergences, queue) ------------------------- */

#marketView .mktSourceControls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
#marketView .mktViewPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
}
#marketView .mktViewPill em { color: var(--ink); font-style: normal; font-variant-numeric: tabular-nums; }
#marketView .mktViewPill:hover { border-color: rgba(91, 157, 249, 0.45); color: var(--ink); }
#marketView .mktViewPill.active { border-color: rgba(91, 157, 249, 0.6); background: var(--accent-soft); color: var(--ink); }
#marketView .mktSourceLegend {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-left: 2px solid var(--mkt-neutral);
  border-radius: 0 8px 8px 0;
  background: rgba(91, 157, 249, 0.06);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
#marketView .mktSourceLegend strong { color: var(--ink); }

/* ---- dense research tables -------------------------------------------- */

#marketView .mktSourceTableWrap { max-height: 520px; overflow: auto; border-radius: 10px; }
#marketView .mktDenseTable { width: 100%; border-collapse: collapse; font-size: 12px; }
#marketView .mktDenseTable caption { text-align: left; }
#marketView .mktDenseTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
#marketView .mktDenseTable tbody th,
#marketView .mktDenseTable tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  color: var(--ink);
  text-align: left;
  font-weight: 500;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
#marketView .mktDenseTable tbody tr:hover td,
#marketView .mktDenseTable tbody tr:hover th { background: rgba(255, 255, 255, 0.03); }
#marketView .mktInlinePlayer {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
#marketView .mktInlinePlayer:hover { color: var(--accent-2); text-decoration: underline; }
#marketView .mktInlinePlayer.strong { display: flex; flex-direction: column; gap: 1px; font-weight: 700; }
#marketView .mktInlinePlayer.strong span { color: var(--muted); font-size: 10.5px; font-weight: 500; }
#marketView .mktOutlierCell { display: flex; flex-wrap: wrap; gap: 4px 10px; }
#marketView .mktOutlierCell .mktInlinePlayer { font-size: 11.5px; }
#marketView .mktOutlierCell em { font-style: normal; font-weight: 700; }

#marketView .mktQualityTag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
#marketView .mktQualityTag.good { background: var(--turf-soft); color: var(--good); }
#marketView .mktQualityTag.bad { background: var(--alert-soft); color: var(--bad); }
#marketView .mktQualityTag.warn { background: var(--clock-soft); color: var(--warn); }

#marketView .mktGapCell { min-width: 190px; }
#marketView .mktGapPhrase { display: block; font-weight: 700; font-size: 11.5px; }
#marketView .mktGapTrack {
  display: block;
  height: 4px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
#marketView .mktGapTrack i { display: block; height: 100%; background: var(--muted); }
#marketView .mktGapTrack i.mkt-good { background: var(--mkt-model-early); }
#marketView .mktGapTrack i.mkt-bad { background: var(--mkt-market-early); }
#marketView .mktGapTrack i.mkt-neutral { background: var(--mkt-neutral); }

/* ---- Section 11: research queue --------------------------------------- */

#marketView .mktQueueList { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
#marketView .mktQueueRow {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 15px;
  border-radius: 11px;
  background: var(--mkt-surface-raised);
}
#marketView .mktQueueScore {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 9px;
  background: rgba(91, 157, 249, 0.1);
}
#marketView .mktQueueScore strong { color: var(--accent-2); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
#marketView .mktQueueScore span { color: var(--muted); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; }
#marketView .mktQueueTitle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
#marketView .mktQueueTags { display: flex; flex-wrap: wrap; gap: 5px; }
#marketView .mktQueueTag {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}
#marketView .mktQueueTag.primary { background: var(--clock-soft); color: var(--warn); }
#marketView .mktQueueWhy,
#marketView .mktQueueReview { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.55; }
#marketView .mktQueueWhy strong,
#marketView .mktQueueReview strong { color: var(--ink); }
#marketView .mktQueueActions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

#marketView .mktGhostButton {
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
}
#marketView .mktGhostButton:hover { border-color: rgba(91, 157, 249, 0.45); color: var(--ink); }

/* ---- Section 13: interpretations -------------------------------------- */

#marketView .mktInterpretationGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 12px;
}
#marketView .mktInterpretationCard { padding: 15px 16px; border-radius: 12px; background: var(--mkt-surface); }
#marketView .mktInterpretationCard.active { box-shadow: inset 0 0 0 1px rgba(91, 157, 249, 0.45); }
#marketView .mktInterpretationCard > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 10px; }
#marketView .mktInterpretationTitle { flex-direction: row; align-items: baseline; gap: 9px; }
#marketView .mktInterpretationTitle strong { color: var(--head); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
#marketView .mktInterpretationCard > header p { flex: 1 1 200px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
#marketView .mktInterpretationBadge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
#marketView .mktInterpretationBadge.good { background: var(--turf-soft); color: var(--good); }
#marketView .mktInterpretationBadge.bad { background: var(--alert-soft); color: var(--bad); }
#marketView .mktInterpretationBadge.warn { background: var(--clock-soft); color: var(--warn); }
/* Inside the table the badge must not out-shout the underlying market data. */
#marketView .mktInterpretationBadge.subtle {
  padding: 1px 7px;
  background: none;
  box-shadow: inset 0 0 0 1px currentColor;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.78;
}
#marketView .mktReasonCell { max-width: 320px; white-space: normal; color: var(--muted); font-size: 11px; line-height: 1.5; }

/* ---- Section 14: consensus table -------------------------------------- */

#marketView .mktTablePanel { margin-bottom: 42px; }
#marketView .mktTableControls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 12px 0; }
#marketView .mktTableControls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#marketView .mktTableControls select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--page);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
#marketView .mktColumnPanel {
  margin-bottom: 12px;
  padding: 13px 15px;
  border: 1px solid var(--mkt-hairline);
  border-radius: 10px;
  background: var(--mkt-surface);
}
#marketView .mktColumnGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 5px 12px;
  margin: 10px 0;
}
#marketView .mktColumnOption { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 12px; cursor: pointer; }
#marketView .mktColumnOption.locked { color: var(--muted); cursor: default; }
#marketView .mktColumnActions { display: flex; gap: 8px; }

#marketView .mktTableWrap { max-height: 640px; overflow: auto; }
#marketView .mktTableWrap table { border-collapse: separate; border-spacing: 0; font-size: 12px; width: max-content; min-width: 100%; }
#marketView .mktTableWrap thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  white-space: nowrap;
}
#marketView .mktTableWrap thead th.mktFrozenCol { z-index: 5; }
#marketView .mktSortButton {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
#marketView .mktSortButton:hover { color: var(--ink); }
#marketView .mktTableWrap thead th.sorted .mktSortButton { color: var(--accent-2); }
#marketView .mktSortButton em { font-style: normal; }
#marketView .mktTableWrap tbody td {
  padding: 7px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  color: var(--ink);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#marketView .mktTableWrap .mktNumCell { text-align: right; }
#marketView .mktTableWrap .mktFrozenCol {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel);
  box-shadow: 1px 0 0 var(--mkt-hairline);
}
#marketView .mktTableWrap tbody tr:hover .mktFrozenCol { background: #1a2130; }
#marketView .mktTableWrap tbody tr.mktRowExpanded .mktFrozenCol,
#marketView .mktTableWrap tbody tr.mktRowExpanded td { background: rgba(91, 157, 249, 0.08); }
#marketView .mktTableWrap .marketTablePlayer { text-align: left; }
#marketView .mktRowDetailRow td { padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.045); white-space: normal; }
#marketView .mktRowToggle {
  width: 18px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
}
#marketView .mktRowToggle:hover { color: var(--accent-2); }
#marketView .mktTableWrap .mktFrozenCol { display: table-cell; }
#marketView .mktTableWrap tbody .mktFrozenCol .marketTablePlayer { display: inline-block; vertical-align: middle; }
#marketView .mktRowDetail {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  padding: 12px 14px 16px;
  background: rgba(0, 0, 0, 0.22);
}
#marketView .mktRowDetail > button { grid-column: 1 / -1; justify-self: start; }

/* ---- Section 8: source dot plot --------------------------------------- */

#marketView .mktDotPlot { margin: 10px 0 14px; }
#marketView .mktDotTrack {
  position: relative;
  height: 54px;
  margin: 0 10px;
  border-radius: 8px;
  background: linear-gradient(to bottom, transparent 0, transparent 46%, rgba(255, 255, 255, 0.09) 46%, rgba(255, 255, 255, 0.09) calc(46% + 1px), transparent calc(46% + 1px));
}
#marketView .mktDot {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(10, 14, 22, 0.85);
  cursor: help;
}
#marketView .mktDot:hover, #marketView .mktDot:focus-visible { background: var(--accent-2); transform: scale(1.25); outline: none; }
#marketView .mktDot.sleeper { background: var(--keeper); box-shadow: 0 0 0 2px rgba(10, 14, 22, 0.85), 0 0 0 4px rgba(201, 162, 75, 0.35); }
#marketView .mktDotGuide {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 0;
  border-left: 2px dashed var(--muted);
}
#marketView .mktDotGuide em {
  position: absolute;
  top: -3px;
  left: 4px;
  color: var(--muted);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
#marketView .mktDotGuide.consensus { border-left-color: var(--ink); }
#marketView .mktDotGuide.consensus em { color: var(--ink); }
#marketView .mktDotGuide.median { border-left-color: var(--muted); }
#marketView .mktDotGuide.model { border-left-color: var(--mkt-model-early); }
#marketView .mktDotGuide.model em { color: var(--mkt-model-early); top: auto; bottom: -3px; }
#marketView .mktDotScale { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; color: var(--muted); font-size: 10.5px; }
#marketView .mktDotLegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 9px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 10.5px; }
#marketView .mktDotLegend li { display: flex; align-items: center; gap: 5px; }
#marketView .mktDotLegend li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
#marketView .mktDotLegend li.consensus { color: var(--ink); }
#marketView .mktDotLegend li.median { color: var(--muted); }
#marketView .mktDotLegend li.model { color: var(--mkt-model-early); }
#marketView .mktDotLegend li.sleeper { color: var(--keeper); }

#marketView .mktShapeCallout {
  margin: 12px 0;
  padding: 11px 13px;
  border-left: 3px solid var(--mkt-neutral);
  border-radius: 0 9px 9px 0;
  background: rgba(91, 157, 249, 0.07);
}
#marketView .mktShapeCallout.good { border-left-color: var(--mkt-model-early); background: var(--turf-soft); }
#marketView .mktShapeCallout.bad { border-left-color: var(--mkt-market-early); background: var(--alert-soft); }
#marketView .mktShapeCallout.warn { border-left-color: var(--mkt-uncertain); background: var(--clock-soft); }
#marketView .mktShapeCallout strong { display: block; margin-bottom: 3px; color: var(--head); font-size: 13px; font-weight: 800; }
#marketView .mktShapeCallout p { color: var(--muted); font-size: 12px; line-height: 1.55; }
#marketView .mktSourceMini { margin-top: 10px; }
#marketView .mktSourceMini .mktSleeperRow th { color: var(--keeper); }

/* ---- Section 10: gap decomposition ------------------------------------ */

#marketView .mktDecomposition { margin: 10px 0; }
#marketView .mktDecompRow {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1.6fr) 74px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
#marketView .mktDecompRow.base,
#marketView .mktDecompRow.final { border-top: 1px solid var(--mkt-hairline); }
#marketView .mktDecompLabel { color: var(--muted); font-size: 11.5px; }
#marketView .mktDecompRow.base .mktDecompLabel,
#marketView .mktDecompRow.final .mktDecompLabel { color: var(--ink); font-weight: 700; }
#marketView .mktDecompBarCell { position: relative; height: 15px; }
#marketView .mktDecompAxis { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255, 255, 255, 0.14); }
#marketView .mktDecompBar { position: absolute; top: 3px; height: 9px; border-radius: 2px; }
#marketView .mktDecompBar.good { background: var(--mkt-model-early); }
#marketView .mktDecompBar.bad { background: var(--mkt-market-early); }
#marketView .mktDecompBase { color: var(--muted); font-size: 10px; font-style: normal; letter-spacing: 0.05em; text-transform: uppercase; }
#marketView .mktDecompRow strong { text-align: right; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
#marketView .mktDecompNote { margin-top: 4px; font-size: 11px; }
#marketView .mktDecompReason { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.55; }
#marketView .mktDecompReason strong { color: var(--ink); }

/* ---- player research panel -------------------------------------------- */

#marketView .mktPlayerBackdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(5, 8, 14, 0.62);
  backdrop-filter: blur(2px);
}
#marketView .mktPlayerPanel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  width: min(560px, 100vw);
  border-left: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  transform: translateX(100%);
  transition: transform 180ms ease;
  visibility: hidden;
}
#marketView .mktPlayerPanel.open { transform: translateX(0); visibility: visible; }
#marketView .mktPlayerPanelContent { height: 100%; overflow-y: auto; padding: 20px 22px 40px; }
#marketView .mktPanelHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mkt-hairline);
}
#marketView .mktPanelHeader span { color: var(--accent); font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
#marketView .mktPanelHeader h3 { margin: 3px 0 2px; color: var(--head); font-size: 20px; font-weight: 800; }
#marketView .mktPanelHeader p { color: var(--muted); font-size: 12px; }
#marketView .mktPanelClose {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
#marketView .mktPanelClose:hover { color: var(--ink); border-color: var(--accent); }
#marketView .mktPanelSection { padding: 18px 0; border-bottom: 1px solid var(--mkt-hairline); }
#marketView .mktPanelSection:last-child { border-bottom: 0; }
#marketView .mktPanelSection h4 { margin-bottom: 4px; color: var(--head); font-size: 13.5px; font-weight: 800; }
#marketView .mktPanelSection p { color: var(--muted); font-size: 12px; line-height: 1.55; }
#marketView .mktPanelSection p + p { margin-top: 6px; }
#marketView .mktPanelSection .mktGhostButton { margin-top: 10px; }

/* ---- Section 15: methodology ------------------------------------------ */

#marketView .mktMethodology { margin-bottom: 30px; }
#marketView .mktMethodology > details {
  border: 1px solid var(--mkt-hairline);
  border-radius: 12px;
  background: var(--mkt-surface);
}
#marketView .mktMethodology > details > summary {
  cursor: pointer;
  padding: 13px 16px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}
#marketView .mktMethodology > details[open] > summary { border-bottom: 1px solid var(--mkt-hairline); }
#marketView .mktMethodologyBody { padding: 14px 16px 18px; }
#marketView .mktMethodologyList { display: grid; gap: 11px; margin: 0 0 12px; }
#marketView .mktMethodologyList dt { color: var(--head); font-size: 12.5px; font-weight: 800; }
#marketView .mktMethodologyList dd { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ---- responsive ------------------------------------------------------- */

@media (max-width: 1180px) {
  #marketView .mktInterpretationGrid { grid-template-columns: minmax(0, 1fr); }
  #marketView .mktRowDetail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  #marketView .mktHeader { flex-direction: column; }
  #marketView .mktDisclosure { flex: 1 1 auto; width: 100%; }
  #marketView .mktStatusRow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #marketView .mktStackKey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #marketView .mktQueueRow { grid-template-columns: minmax(0, 1fr); }
  #marketView .mktQueueScore { flex-direction: row; gap: 7px; padding: 6px 0; }
  #marketView .mktPlayerPanel { width: 100vw; border-left: 0; }
  #marketView .mktSourceTableWrap, #marketView .mktTableWrap { max-height: none; }
}
@media (max-width: 640px) {
  #marketView .mktStatusRow { grid-template-columns: minmax(0, 1fr); }
  #marketView .mktOverviewGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #marketView .mktCardValue { font-size: 21px; }
  #marketView .mktFilterMeta { margin-left: 0; width: 100%; justify-content: space-between; }
  #marketView .mktDecompRow { grid-template-columns: minmax(0, 1fr) 68px; }
  #marketView .mktDecompBarCell { display: none; }
}

/* ---- Drill-in: every player count is a button ------------------------- */

#marketView .mktSectionLead {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-left: 2px solid var(--mkt-neutral);
  border-radius: 0 9px 9px 0;
  background: rgba(91, 157, 249, 0.06);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
  max-width: 105ch;
}
#marketView .mktSectionLead strong { color: var(--ink); font-weight: 700; }
#marketView .mktSectionLead em { color: var(--ink); font-style: normal; font-weight: 600; }

#marketView .mktCountButton {
  padding: 0;
  border: 0;
  border-bottom: 1px dashed rgba(143, 192, 255, 0.55);
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
#marketView .mktCountButton:hover,
#marketView .mktCountButton:focus-visible {
  color: var(--accent-2);
  border-bottom-color: var(--accent-2);
  outline: none;
}
#marketView .mktCountButton.empty { border-bottom: 0; color: var(--muted); cursor: default; }
#marketView .mktCountInline { font-weight: 700; }
#marketView .mktCountPill {
  padding: 6px 12px;
  border: 1px dashed rgba(143, 192, 255, 0.45);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11.5px;
}
#marketView .mktCountPill:hover { border-style: solid; }

/* Overview card: the headline number opens the list, filtering is separate. */
#marketView .mktCardValue .mktCountButton {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  border-bottom-width: 2px;
}
#marketView .mktCardActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--mkt-hairline);
}
#marketView .mktCardHint {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}
#marketView .mktCardFilterButton,
#marketView .mktPositionFilterButton {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
#marketView .mktCardFilterButton:hover,
#marketView .mktPositionFilterButton:hover { border-color: rgba(91, 157, 249, 0.5); color: var(--ink); }
#marketView .mktCardFilterButton.active,
#marketView .mktPositionFilterButton.active {
  border-color: rgba(91, 157, 249, 0.65);
  background: var(--accent-soft);
  color: var(--ink);
}
#marketView .mktCardListButton {
  padding: 4px 10px;
  border: 1px dashed rgba(143, 192, 255, 0.45);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}
#marketView .mktCardListButton:hover { border-style: solid; }

#marketView .mktStackKey .mktCountButton { color: var(--ink); font-weight: 700; }
#marketView .mktRangeActionList .mktCountButton { color: var(--ink); font-weight: 700; }
#marketView .mktRangeHead em .mktCountButton { color: var(--muted); font-size: 11.5px; }
#marketView .mktPositionIdentity { display: flex; flex-direction: column; gap: 2px; }
#marketView .mktPositionIdentity strong { color: var(--head); font-size: 20px; font-weight: 800; letter-spacing: 0.02em; }
#marketView .mktPositionIdentity .mktCountButton { color: var(--muted); font-size: 11.5px; align-self: flex-start; }
#marketView .mktInterpretationCard > header .mktCardFilterButton { margin-left: auto; }

/* ---- Drill-in panel: cohort list mode --------------------------------- */

#marketView .mktPanelBack {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
}
#marketView .mktPanelBack:hover { border-color: rgba(91, 157, 249, 0.5); color: var(--ink); }
#marketView .mktPanelActions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
#marketView .mktCohortTableWrap { margin-top: 12px; }
#marketView .mktCohortTable { font-size: 11.5px; }
#marketView .mktCohortTable thead th { background: var(--panel); }
#marketView .mktCohortTable tbody th,
#marketView .mktCohortTable tbody td { padding: 6px 8px; vertical-align: middle; }
#marketView .mktCohortTable .mktInlinePlayer.strong { font-size: 12px; }
#marketView .mktPanelFoot { margin-top: 12px; font-size: 11px; }

/* Count-tile insights use a centered modal so their player lists stay readable
   instead of collapsing into a narrow right-edge drawer. */
.detailInsightDrawer {
  top: 76px;
  right: auto;
  bottom: 24px;
  left: 50%;
  /* Keep the insight/sources layer above the sticky topbar and tabs. */
  z-index: 1401;
  width: min(1180px, calc(100vw - 48px));
  max-width: 1180px;
  box-sizing: border-box;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 16px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, 105%);
}

.detailInsightDrawer.open {
  transform: translate(-50%, 0);
}

/* Sources opens in the same centered insight drawer, but the app has two
   sticky navigation rows. Start this panel below both rows so the tab strip
   stays frozen and never paints over the source catalog or its close button. */
.detailInsightDrawer.sourcesOpen {
  top: 136px;
  bottom: 24px;
  max-height: calc(100vh - 160px);
}

.detailInsightDrawer.sourcesOpen .playerDrawerClose {
  top: 18px;
}

.detailInsightBackdrop {
  /* The shared drawer backdrop defaults below the app navigation. Sources
     should dim the navigation too while its catalog is open. */
  z-index: 1400;
}

/* Closed drawers must never create an invisible click-blocking layer. */
.playerDrawerBackdrop[hidden],
.teamDrawerBackdrop[hidden],
.detailInsightBackdrop[hidden] {
  display: none !important;
}

.playerDrawer:not(.open),
.teamDrawer:not(.open),
.detailInsightDrawer:not(.open) {
  pointer-events: none;
}

.playerDrawer.open,
.teamDrawer.open,
.detailInsightDrawer.open {
  pointer-events: auto;
}

@media (max-width: 760px) {
  .detailInsightDrawer {
    top: 60px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    transform: translateY(105%);
  }

  .detailInsightDrawer.open {
    transform: translateY(0);
  }

  .detailInsightDrawer.sourcesOpen {
    top: 112px;
    bottom: 12px;
    max-height: calc(100vh - 124px);
  }
}

/* Market count links use their own research panel. Keep it centered too. */
#marketView .mktPlayerPanel {
  top: 76px;
  right: auto;
  bottom: 24px;
  left: 50%;
  width: min(1180px, calc(100vw - 48px));
  box-sizing: border-box;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, 105%);
}

#marketView .mktPlayerPanel.open {
  transform: translate(-50%, 0);
}

@media (max-width: 760px) {
  #marketView .mktPlayerPanel {
    top: 60px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    transform: translateY(105%);
  }

  #marketView .mktPlayerPanel.open {
    transform: translateY(0);
  }
}

/* --- Support / tip modal ------------------------------------------------ */

/* A class selector beats the [hidden] UA rule, so .supportModal's display:flex
   would otherwise keep a full-screen fixed layer over the page swallowing every
   click while closed. Keep this ahead of the display rules below. */
.supportBackdrop[hidden],
.supportModal[hidden] {
  display: none;
}

.supportBackdrop {
  position: fixed;
  inset: 0;
  /* Sit above the sticky topbar/tabs so the page is fully covered while
     support is open. The dialog itself is one layer above this backdrop. */
  z-index: 1400;
  background: rgba(3, 7, 15, 0.66);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 160ms ease;
}

.supportBackdrop.open {
  opacity: 1;
}

.supportModal {
  position: fixed;
  inset: 0;
  z-index: 1401;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 160ms ease;
}

.supportModal.open {
  opacity: 1;
}

.supportModalCard {
  position: relative;
  box-sizing: border-box;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 26px 28px 22px;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 16px;
  background: var(--color-surface, var(--panel));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);
  transform: translateY(8px);
  transition: transform 180ms ease;
}

.supportModal.open .supportModalCard {
  transform: translateY(0);
}

.supportModalClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted, var(--muted));
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.supportModalClose:hover {
  border-color: var(--color-accent, var(--accent));
  color: var(--color-accent-strong, var(--accent-2));
}

.supportModalCard h3 {
  margin: 0 34px 8px 0;
  font-family: var(--font-display, inherit);
  font-size: var(--font-size-xl, 20px);
  color: var(--color-text-strong, var(--head));
}

.supportModalIntro {
  margin: 0 0 18px;
  color: var(--color-text-muted, var(--muted));
  font-size: var(--font-size-sm, 13px);
  line-height: 1.55;
}

.supportModalBody {
  display: grid;
  gap: 12px;
}

.supportMethod {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 12px;
  background: var(--panel-soft, rgba(255, 255, 255, 0.02));
}

/* 132px keeps a 29-module code at ~3.5px per module, which phones scan reliably. */
.supportMethodQr {
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  padding: 8px;
  border-radius: 8px;
  background: #ffffff;
}

.supportQrSvg {
  display: block;
  width: 100%;
  height: 100%;
}

.supportMethodInfo {
  min-width: 0;
  display: grid;
  gap: 6px;
  justify-items: start;
}

.supportMethodName {
  margin: 0;
  font-size: var(--font-size-md, 15px);
  font-weight: var(--weight-emphasis, 700);
  color: var(--color-text-strong, var(--head));
}

.supportMethodHandle {
  margin: 0;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-muted, var(--muted));
  overflow-wrap: anywhere;
}

.supportMethodButton {
  margin-top: 2px;
  padding: 9px 16px;
  border: 1px solid var(--color-border-strong, var(--line));
  border-radius: var(--radius-control, 8px);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text, var(--ink));
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--weight-emphasis, 700);
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease;
}

.supportMethodButton:hover {
  border-color: var(--color-accent, var(--accent));
  color: var(--color-accent-strong, var(--accent-2));
}

.supportNotice {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--color-border-strong, var(--line));
  border-radius: 12px;
  color: var(--color-text-muted, var(--muted));
  font-size: var(--font-size-sm, 13px);
  line-height: 1.55;
}

.supportModalFinePrint {
  margin: 16px 0 0;
  color: var(--color-text-muted, var(--muted));
  font-size: var(--font-size-xs, 12px);
  line-height: 1.5;
  opacity: 0.85;
}

/* Keep the support dialog useful on desktop-sized screens without making
   users scroll through the issue form before reaching payment options. */
@media (min-width: 861px) {
  .supportModalCard {
    width: min(1040px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    column-gap: 28px;
    padding: 24px 26px 20px;
  }

  .supportModalCard > h3 {
    grid-column: 1 / -1;
  }

  .supportSection + .supportSection {
    margin-top: 0;
    padding-top: 0;
    padding-left: 28px;
    border-top: 0;
    border-left: 1px solid var(--color-border, var(--line));
  }

  .supportSectionNote {
    margin-bottom: 12px;
  }

  .supportIssueForm {
    gap: 9px;
  }

  .supportField textarea {
    min-height: 76px;
  }

  .supportContactLine {
    margin-top: 11px;
  }

  .supportModalFinePrint {
    margin-top: 12px;
  }
}

body.supportModalOpen {
  overflow: hidden;
}

/* Phones deep-link straight into the payment apps, so the codes only clutter. */
@media (max-width: 620px) {
  .supportMethodQr {
    display: none;
  }

  .supportMethod {
    align-items: flex-start;
  }

  .supportModalCard {
    padding: 22px 18px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .supportBackdrop,
  .supportModal,
  .supportModalCard {
    transition: none;
  }
}

/* =====================================================================
   RESPONSIVE MOBILE FOUNDATION
   ---------------------------------------------------------------------
   One shared state, one shared action layer. Phone widths swap only the
   presentation of dense draft surfaces; the desktop table remains intact
   above the phone breakpoint and the existing filters/actions stay the
   source of truth.
   ===================================================================== */

:root {
  --page-padding: clamp(12px, 2vw, 28px);
  --section-gap: clamp(12px, 1.6vw, 24px);
  --card-padding: clamp(12px, 1.8vw, 20px);
  --header-height: 74px;
  --bottom-nav-height: 66px;
  --touch-target: 44px;
  --drawer-width: min(100vw, 560px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

html,
body,
#authenticatedApp {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

.view,
.panel,
.draftControls,
.appShell,
.layout,
.panelHeader,
.boardPanel,
.mobileBoard,
.mobilePlayerCard {
  min-width: 0;
}

.mobileDraftToolbar,
.mobileDraftTray,
.mobileBoard,
.mobileBottomNav,
.mobileDraftContext,
.mobileDraftActionBar,
.mobileMoreMenu,
.mobileDraftOverlay,
.mobileDraftFiltersClose {
  display: none;
}

@media (max-width: 899px) {
  .appShell {
    padding-inline: var(--page-padding);
  }

  .settingsPanel,
  .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .boardPanel .tableWrap {
    height: auto;
    min-height: 420px;
  }

  .tableWrap {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .playersToolbar,
  .newsControls,
  .marketHeroHeader,
  .marketControls,
  .compareControls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px), (max-height: 600px) and (orientation: landscape) and (max-width: 900px) {
  html {
    min-width: 0;
  }

  body {
    zoom: 1;
    font-size: 14px;
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));
  }

  button,
  input,
  select,
  textarea {
    min-height: var(--touch-target);
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .topbar {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: calc(10px + var(--safe-top)) 12px 10px;
  }

  .topbar > div:first-child {
    min-width: 0;
  }

  .topbar h1 {
    font-size: 1.25rem;
  }

  .topbar p#refreshText {
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .headerActions {
    display: grid;
    grid-template-columns: repeat(3, auto) minmax(0, 1fr) auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    gap: 6px;
    align-items: stretch;
  }

  .headerActions .chatToggle,
  .headerActions .sourcesToggle,
  .headerActions .supportToggle,
  .authSignInButton {
    min-height: var(--touch-target);
    padding: 0 9px;
    font-size: 11px;
  }

  .globalSearch {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }

  .globalSearch #searchInput {
    width: 100%;
    min-height: var(--touch-target);
  }

  .authControls {
    min-width: 0;
    max-width: 64px;
    overflow: hidden;
  }

  .authStatus,
  .userButton {
    display: none !important;
  }

  .globalSearchDropdown {
    position: fixed;
    top: 116px;
    right: 10px;
    left: 10px;
    width: auto;
    min-width: 0;
    max-height: min(55vh, 520px);
    z-index: 2000;
  }

  .tabs {
    display: none !important;
  }

  .sleeperConnectBar {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .sleeperConnectBarHeader h2 {
    font-size: 16px;
  }

  .sleeperConnectBarHeader p {
    font-size: 11px;
  }

  .sleeperConnectBar .sleeperConnectionForm,
  .sleeperConnectionForm {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0;
    padding: 0;
  }

  .sleeperConnectionForm input {
    min-height: var(--touch-target);
  }

  .sleeperConnectionStatus {
    grid-column: auto;
  }

  main,
  .appShell {
    padding: 12px 12px calc(24px + var(--bottom-nav-height) + var(--safe-bottom));
  }

  .draftControls {
    margin-bottom: 12px;
  }

  .draftControls > .panelHeader {
    display: block;
    padding: 12px;
  }

  .draftControls > .panelHeader h2 {
    margin-bottom: 5px;
    font-size: 16px;
  }

  .draftControls > .panelHeader .decisionHint {
    font-size: 11px;
    line-height: 1.4;
  }

  .mobileDraftToolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr);
    gap: 7px;
    padding: 10px;
    border-bottom: 1px solid var(--line);
    background: rgba(11, 20, 36, 0.92);
  }

  .mobileToolbarButton,
  .mobileSortControl select {
    min-width: 0;
    min-height: var(--touch-target);
    padding: 0 7px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-radius: 9px;
    background: rgba(20, 34, 57, 0.94);
    color: var(--ink-strong, #f8fbff);
    font-size: 11px !important;
    font-weight: 800;
  }

  .mobileToolbarButton:focus-visible,
  .mobileSortControl select:focus-visible {
    outline: 3px solid rgba(147, 197, 253, 0.62);
    outline-offset: 1px;
  }

  .mobileToolbarCount {
    display: inline-grid;
    min-width: 18px;
    min-height: 18px;
    place-items: center;
    margin-left: 2px;
    border-radius: 999px;
    background: var(--accent, #5b9df9);
    color: #07111f;
    font-size: 10px;
  }

  .mobileSortControl {
    display: grid;
    min-width: 0;
    gap: 3px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .mobileSortControl select {
    width: 100%;
    padding-right: 23px;
  }

  #draftSettings,
  #draftFilters {
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
  }

  .draftControls #draftSettings,
  .draftControls #draftFilters {
    display: none;
  }

  body.mobileDraftSetupOpen #draftSettings,
  body.mobileDraftFiltersOpen #draftFilters {
    position: fixed;
    right: 10px;
    bottom: calc(10px + var(--safe-bottom));
    left: 10px;
    z-index: 1501;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: min(78dvh, 680px);
    overflow-y: auto;
    padding: 14px;
    border: 1px solid rgba(147, 197, 253, 0.36);
    border-radius: 16px;
    background: linear-gradient(180deg, #17243a, #0d1829);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.58);
  }

  body.mobileDraftFiltersOpen #draftFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mobileDraftSetupOpen #draftSettings {
    grid-template-columns: 1fr;
  }

  body.mobileDraftSetupOpen #draftSettings .weightBlock {
    grid-column: auto;
  }

  .mobileDraftFiltersClose {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    min-height: var(--touch-target);
    background: var(--brand-grad, linear-gradient(135deg, #60a5fa, #818cf8));
    color: #08111f;
  }

  .mobileDraftOverlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(3px);
  }

  .draftControls .filters label,
  .draftControls .settingsPanel label {
    min-width: 0;
  }

  .draftControls .filters select,
  .draftControls .settingsPanel select,
  .draftControls .settingsPanel input {
    min-width: 0;
    width: 100%;
  }

  .draftControls .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .draftControls .kpis button {
    min-height: 70px;
    padding: 10px;
  }

  .draftControls .kpis strong {
    font-size: 22px;
  }

  .boardPanel .panelHeader {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  .boardPanel .panelHeader h2 {
    font-size: 17px;
  }

  .boardHeaderActions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    gap: 7px;
  }

  .boardSearchInput {
    grid-column: 1 / -1;
    width: 100%;
    min-height: var(--touch-target);
    font-size: 16px !important;
  }

  .boardHeaderActions .draftNightToggle,
  .boardHeaderActions .resetButton {
    min-height: var(--touch-target);
    padding: 0 9px;
  }

  .boardPanel .tableWrap {
    display: none;
  }

  .mobileBoard {
    display: grid;
    gap: 8px;
    padding: 10px;
    background: rgba(5, 12, 23, 0.68);
  }

  .mobilePlayerCard {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(20, 34, 57, 0.98), rgba(12, 23, 40, 0.98));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }

  .mobilePlayerCard.selected {
    border-color: rgba(96, 165, 250, 0.72);
  }

  .mobilePlayerSummary {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 10px;
    cursor: pointer;
    list-style: none;
  }

  .mobilePlayerSummary::-webkit-details-marker {
    display: none;
  }

  .mobilePlayerRank {
    display: grid;
    min-height: 42px;
    place-items: center;
    border-radius: 10px;
    background: rgba(96, 165, 250, 0.18);
    color: #dbeafe;
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 800;
  }

  .mobilePlayerIdentity {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  .mobilePlayerIdentity strong {
    overflow: hidden;
    color: #f8fbff;
    font-family: var(--font-display);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobilePlayerIdentity > span {
    overflow: hidden;
    color: #9fb0c8;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobileStatus {
    font-style: normal;
    font-weight: 800;
  }

  .mobileStatus.available { color: var(--good, #34d399); }
  .mobileStatus.keeper { color: var(--keeper, #fbbf24); }
  .mobileStatus.drafted { color: var(--bad, #fb7185); }

  .mobilePlayerChevron {
    display: grid;
    min-height: 32px;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    color: #c7d6ec;
    font-size: 18px;
    transition: transform 160ms ease;
  }

  .mobilePlayerCard[open] .mobilePlayerChevron {
    transform: rotate(180deg);
  }

  .mobilePlayerCardBody {
    display: grid;
    gap: 10px;
    padding: 0 10px 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
  }

  .mobilePlayerReadout,
  .mobilePlayerSignals,
  .mobilePlayerDeepMetrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 10px 0 0;
  }

  .mobilePlayerReadout span,
  .mobileSignal,
  .mobilePlayerDeepMetrics div {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background: rgba(7, 16, 29, 0.48);
    color: #e5eefc;
    font-size: 12px;
  }

  .mobilePlayerReadout b,
  .mobileSignal b,
  .mobilePlayerDeepMetrics dt {
    color: #8fa4c0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .mobilePlayerDeepMetrics dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #eaf2ff;
    font-family: var(--font-mono);
    font-size: 11px;
  }

  .mobilePlayerActions {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .mobilePlayerActions button {
    min-width: 0;
    min-height: var(--touch-target);
    padding: 0 7px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(17, 31, 52, 0.92);
    color: #dbeafe;
    font-size: 10px;
    font-weight: 850;
  }

  .mobilePlayerActions .mobilePrimaryAction {
    border-color: rgba(96, 165, 250, 0.62);
    background: rgba(30, 64, 175, 0.32);
  }

  .mobilePlayerActions button:disabled {
    opacity: 0.42;
  }

  .mobileDraftActionBar {
    position: fixed;
    right: 0;
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));
    left: 0;
    z-index: 1440;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 6px 8px;
    border-top: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(7, 14, 26, 0.96);
    backdrop-filter: blur(12px);
  }

  body.mobileDraftActive .mobileDraftActionBar {
    display: grid;
  }

  .mobileDraftActionBar button {
    min-height: 42px;
    padding: 0 4px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    background: rgba(20, 34, 57, 0.94);
    color: #dbeafe;
    font-size: 10px;
    font-weight: 850;
  }

  .mobileDraftActionBar button:last-child {
    border-color: rgba(96, 165, 250, 0.64);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.92), rgba(129, 140, 248, 0.92));
    color: #07111f;
  }

  .mobileBottomNav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1450;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: var(--bottom-nav-height);
    padding: 5px 6px var(--safe-bottom);
    border-top: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(7, 14, 26, 0.98);
    box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.26);
  }

  .mobileDraftContext:not([hidden]) {
    position: fixed;
    right: 8px;
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 56px);
    left: 8px;
    z-index: 1435;
    display: block;
  }

  .mobileDraftContextButton {
    display: grid;
    grid-template-columns: minmax(82px, 1.1fr) repeat(3, minmax(0, 1fr)) 18px;
    gap: 5px;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 6px 8px;
    border: 1px solid rgba(96, 165, 250, 0.46);
    border-radius: 11px;
    background: rgba(12, 27, 48, 0.97);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    color: #dbeafe;
    text-align: left;
  }

  .mobileDraftContextButton > span:not(.mobileDraftContextLead) {
    min-width: 0;
    overflow: hidden;
    color: #b9c9dd;
    font-size: 10px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobileDraftContextLead {
    display: grid;
    gap: 1px;
  }

  .mobileDraftContextLead strong {
    color: #f8fbff;
    font-size: 12px;
    line-height: 1.1;
  }

  .mobileDraftContextLead small {
    color: #80b7f5;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .mobileDraftContextChevron {
    color: #80b7f5;
    font-size: 22px;
    line-height: 1;
    text-align: right;
  }

  .mobileDraftContextButton:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
  }

  .mobileBottomNavAssistant {
    border-color: rgba(129, 140, 248, 0.48) !important;
    background: rgba(67, 56, 202, 0.18) !important;
  }

  .mobileBottomNavAssistant > span:first-child {
    color: #c4b5fd !important;
    font-size: 18px !important;
  }

  .mobileBottomNav button {
    display: grid;
    min-width: 0;
    min-height: 52px;
    place-items: center;
    align-content: center;
    gap: 2px;
    padding: 3px 2px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #8fa2bb;
    font-size: 10px;
    font-weight: 800;
  }

  .mobileBottomNav button > span:first-child {
    color: #9fc4ff;
    font-size: 16px;
    line-height: 1;
  }

  .mobileBottomNav button.active,
  .mobileBottomNav button[aria-current="page"] {
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(30, 64, 175, 0.24);
    color: #f8fbff;
  }

  .mobileMoreMenu {
    position: fixed;
    right: 10px;
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 8px);
    left: 10px;
    z-index: 1460;
    padding: 12px;
    border: 1px solid rgba(147, 197, 253, 0.34);
    border-radius: 14px;
    background: linear-gradient(180deg, #17243a, #0d1829);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.54);
  }

  .mobileMoreMenu:not([hidden]) {
    display: block;
  }

  .mobileMoreMenuHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
    color: #f8fbff;
    font-family: var(--font-display);
  }

  .mobileMoreMenuHeader button {
    min-width: 40px;
    min-height: 40px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 8px;
    background: transparent;
    color: #dbeafe;
    font-size: 20px;
  }

  .mobileMoreMenuGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    max-height: min(52vh, 420px);
    overflow-y: auto;
  }

  .mobileMoreMenuGrid button {
    min-height: 44px;
    padding: 0 8px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    background: rgba(8, 17, 31, 0.62);
    color: #cbdaf0;
    font-size: 11px;
    font-weight: 750;
    text-align: left;
  }

  .playerDrawer,
  .teamDrawer,
  .detailInsightDrawer,
  #marketView .mktPlayerPanel {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh;
    max-height: none !important;
    border: 0;
    border-radius: 0;
    transform: translateY(105%);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(10px + var(--safe-top)) 12px calc(20px + var(--safe-bottom));
  }

  .playerDrawer.open,
  .teamDrawer.open,
  .detailInsightDrawer.open,
  #marketView .mktPlayerPanel.open {
    transform: translateY(0);
  }

  .playerDrawerClose {
    position: sticky;
    top: 0;
    z-index: 25;
    min-height: var(--touch-target);
    margin: 0 0 10px auto;
    padding: 0 12px;
  }

  .playerDrawer * {
    min-width: 0;
    max-width: 100%;
  }

  .playerDrawer .playerProfileGrid,
  .playerDrawer .playerMetricGrid,
  .playerDrawer .detailComparableGrid,
  .playerDrawer .detailNarrativeGrid,
  .playerDrawer .contributionProfileGrid,
  .playerDrawer .detailDecisionNarrative,
  .playerDrawer .decisionSnapshotCard {
    grid-template-columns: 1fr !important;
  }

  .playerDrawer .tableWrap {
    max-width: 100%;
    overflow-x: auto;
  }

  .playerDrawer table {
    min-width: 560px;
  }

  .playerDrawer svg,
  .playerDrawer canvas,
  .playerDrawer img {
    max-width: 100%;
  }

  .chatPanel {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0;
    padding-bottom: var(--safe-bottom);
  }

  .chatHeader,
  .chatForm {
    padding-inline: 12px;
  }

  .chatMessages {
    min-height: 0;
    padding-inline: 12px;
  }

  .chatForm {
    position: sticky;
    bottom: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: calc(8px + var(--safe-bottom));
  }

  .chatForm textarea {
    font-size: 16px !important;
  }

  .myRanksControls,
  .myRanksBaseContext,
  .myRanksOpinionSummary,
  .communityLeaders {
    grid-template-columns: 1fr !important;
  }

  .myRanksControls {
    position: static;
    align-items: stretch;
  }

  .myRanksControlGroup,
  .myRanksBlendControl,
  .myRanksSearch {
    min-width: 0;
  }

  .myRanksTableWrap {
    max-height: none;
    overflow: visible;
  }

  .myRanksTable {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .myRanksTable thead {
    display: none;
  }

  .myRanksTable tbody {
    display: grid;
    gap: 10px;
  }

  .myRanksTable tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: rgba(15, 27, 45, 0.78);
  }

  .myRanksTable td {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 4px;
    border: 0;
    white-space: normal;
  }

  .myRanksTable td::before {
    color: #8fa4c0;
    content: attr(data-mobile-label);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .myRanksTable td:nth-child(1)::before { content: "Drag"; }
  .myRanksTable td:nth-child(2)::before { content: "My rank"; }
  .myRanksTable td:nth-child(3)::before { content: "Player"; }
  .myRanksTable td:nth-child(4)::before { content: "Pos"; }
  .myRanksTable td:nth-child(5)::before { content: "Team"; }
  .myRanksTable td:nth-child(6)::before { content: "Tier"; }
  .myRanksTable td:nth-child(7)::before { content: "Base board"; }
  .myRanksTable td:nth-child(8)::before { content: "Market"; }
  .myRanksTable td:nth-child(9)::before { content: "Vs base"; }
  .myRanksTable td:nth-child(10)::before { content: "Personalized"; }
  .myRanksTable td:nth-child(11)::before { content: "Note"; }
  .myRanksTable td:nth-child(12)::before { content: "Actions"; }

  .myRanksTable td:nth-child(3),
  .myRanksTable td:nth-child(11),
  .myRanksTable td:nth-child(12) {
    grid-column: 1 / -1;
  }

  .myRanksTable td input,
  .myRanksTable td select {
    min-width: 0;
    width: 100%;
    min-height: 40px;
  }

  .myRanksTable td:nth-child(1) {
    display: none;
  }

  .compareCoreGrid,
  .compareChartGrid,
  .assistantAnalysisGrid,
  .assistantDecisionLanes,
  .homeCardsGrid,
  .projectEffortGrid,
  .teamGrid,
  .newsGrid,
  .marketQuantSummary,
  .marketDecisionGrid,
  .marketPocketGrid,
  .transactionSummaryGrid,
  .sourceAuditStats,
  .sourceFamilyGrid {
    grid-template-columns: 1fr !important;
  }

  .compareControls,
  .playersToolbar,
  .newsControls,
  .mktFilterBasics,
  .mktFilterAdvancedGrid,
  .mktTableControls {
    grid-template-columns: 1fr !important;
  }

  .panelHeader,
  .marketSectionHeader,
  .chartHeader,
  .nextPickDecisionHeader,
  .sectionHero {
    align-items: flex-start;
    flex-direction: column;
  }

  .panel,
  .draftControls,
  .marketTablePanel,
  .wrappedShell,
  .playersShell,
  .sleeperPanel,
  .lwShell {
    width: 100%;
    overflow-x: clip;
  }

  .tableWrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
  }

  table {
    max-width: none;
  }

  .sourceAuditControls,
  .sourcePageCoverageGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sourceAuditSearch,
  .sourceAuditReset {
    grid-column: 1 / -1;
  }

  .supportModal {
    align-items: end;
    padding: 0;
  }

  .supportModalCard {
    width: 100%;
    max-height: calc(100dvh - var(--safe-top));
    border-radius: 16px 16px 0 0;
    padding: 22px 16px calc(18px + var(--safe-bottom));
  }
}

@media (max-width: 379px) {
  .topbar {
    padding-inline: 9px;
  }

  .headerActions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr);
  }

  .authControls {
    grid-column: 1 / -1;
    max-width: none;
  }

  .authSignInButton {
    width: 100%;
  }

  .mobileDraftToolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobileSortControl {
    grid-column: 1 / -1;
  }

  .mobilePlayerActions {
    grid-template-columns: 1fr 1fr;
  }

  .mobilePlayerActions .mobilePrimaryAction {
    grid-column: 1 / -1;
  }
}

/* --- Chat modal ---------------------------------------------------------
   Chat uses the same centered overlay treatment as Support so the three
   header actions open consistent, interruptive dialogs. */
.chatBackdrop[hidden] {
  display: none;
}

.chatBackdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(3, 7, 15, 0.66);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 160ms ease;
}

.chatBackdrop.open {
  opacity: 1;
}

.chatPanel {
  position: fixed;
  inset: 24px;
  z-index: 1401;
  width: min(1000px, calc(100vw - 48px));
  height: min(820px, calc(100vh - 48px));
  margin: auto;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 16px;
  background: linear-gradient(180deg, var(--color-surface-elevated), var(--color-surface));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);
  transform: translateY(8px) scale(.98);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, transform 180ms ease;
}

.chatPanel.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.chatModalOpen {
  overflow: hidden;
}

@media (max-width: 620px) {
  .chatPanel {
    inset: 12px;
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chatBackdrop,
  .chatPanel {
    transition: none;
  }
}

/* ============================================================================
   LEAGUE WRAPPED — historical league intelligence tab
   Appended last so it wins on source order without editing the layered theme.
   Semantic colour contract used throughout this tab:
     blue   = neutral history      green = value / positive result
     red    = reach / negative     amber = uncertainty or review needed
     purple = trades and manager-specific overlays
   ========================================================================== */

#wrappedView {
  --lw-history: var(--accent, #5B9DF9);
  --lw-good: var(--good, #36C28B);
  --lw-bad: var(--bad, #EC6A60);
  --lw-warn: var(--warn, #F2B441);
  --lw-trade: #A78BFA;
  --lw-gap: 18px;
  --lw-radius: 14px;
  --lw-card: var(--panel-soft, #18202F);
  --lw-line: var(--line, #232C3D);
}

#wrappedView .lwShell {
  display: block;
  padding: 0;
  background: none;
  border: 0;
}

#wrappedView .lwFlow {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 100%;
}

/* Manager identity colours. The same index is used in every chart, chip,
   avatar and bar on this tab so a manager never changes colour. */
#wrappedView .mc-0 { --mc: #5B9DF9; }
#wrappedView .mc-1 { --mc: #36C28B; }
#wrappedView .mc-2 { --mc: #F2B441; }
#wrappedView .mc-3 { --mc: #EC6A60; }
#wrappedView .mc-4 { --mc: #A78BFA; }
#wrappedView .mc-5 { --mc: #38BDF8; }
#wrappedView .mc-6 { --mc: #F472B6; }
#wrappedView .mc-7 { --mc: #FB923C; }
#wrappedView .mc-8 { --mc: #4ADE80; }
#wrappedView .mc-9 { --mc: #94A3B8; }

/* Position colours reuse the board's tokens so the whole app agrees. */
#wrappedView .pos-qb  { --pc: var(--pos-qb, #3B82F6); }
#wrappedView .pos-rb  { --pc: var(--pos-rb, #10B981); }
#wrappedView .pos-wr  { --pc: var(--pos-wr, #38BDF8); }
#wrappedView .pos-te  { --pc: var(--pos-te, #8B5CF6); }
#wrappedView .pos-k   { --pc: var(--pos-k, #F59E0B); }
#wrappedView .pos-dst { --pc: var(--pos-dst, #64748B); }
#wrappedView .pos-unk { --pc: #64748B; }

#wrappedView .tone-positive { color: var(--lw-good); }
#wrappedView .tone-caution { color: var(--lw-bad); }
#wrappedView .tone-warn { color: var(--lw-warn); }
#wrappedView .tone-info { color: var(--lw-history); }
#wrappedView .tone-trade { color: var(--lw-trade); }

/* ---------------------------------------------------------------- Section 1 */

#wrappedView .lwHero {
  display: grid;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--lw-line);
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(91, 157, 249, 0.16), transparent 55%),
    radial-gradient(90% 120% at 100% 0%, rgba(167, 139, 250, 0.12), transparent 60%),
    var(--panel, #121826);
}

#wrappedView .lwHeroTop {
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(300px, 1.35fr);
  gap: 22px;
  align-items: center;
}

#wrappedView .lwEyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #8A94A6);
  margin-bottom: 6px;
}

#wrappedView .lwHeroTitle h2 {
  font-family: var(--font-display, inherit);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--head, #F3F6FB);
}

#wrappedView .lwIdentity {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink, #EAEEF5);
  border-left: 3px solid var(--lw-history);
  padding-left: 10px;
}

#wrappedView .lwHeroStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0;
}

#wrappedView .lwHeroStats div {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--lw-line);
}

#wrappedView .lwHeroStats dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwHeroStats dd {
  margin: 3px 0 0;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--head, #F3F6FB);
}

/* Hero metrics: use the same signal-card language as League History while
   giving Wrapped its own data-story accents. */
#wrappedView .lwHeroStats div {
  --stat-accent: var(--lw-history);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 50px;
  padding: 9px 11px 10px;
  border-color: color-mix(in srgb, var(--stat-accent) 24%, var(--lw-line));
  background:
    radial-gradient(120% 115% at 100% 0%, color-mix(in srgb, var(--stat-accent) 18%, transparent), transparent 68%),
    linear-gradient(145deg, color-mix(in srgb, var(--stat-accent) 8%, transparent), rgba(255, 255, 255, 0.018) 72%),
    color-mix(in srgb, var(--lw-card) 88%, #0B1120);
  box-shadow: 0 5px 14px rgba(3, 7, 15, 0.16);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
#wrappedView .lwHeroStats div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--stat-accent), transparent);
  opacity: 0.9;
}
#wrappedView .lwHeroStats div::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 58px;
  height: 58px;
  right: -23px;
  bottom: -28px;
  border-radius: 50%;
  background: var(--stat-accent);
  opacity: 0.08;
  filter: blur(2px);
}
#wrappedView .lwHeroStats div:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--stat-accent) 48%, var(--lw-line));
  box-shadow: 0 9px 20px rgba(3, 7, 15, 0.25);
}
#wrappedView .lwHeroStats div:nth-child(1) { --stat-accent: #5B9DF9; }
#wrappedView .lwHeroStats div:nth-child(2) { --stat-accent: #38BDF8; }
#wrappedView .lwHeroStats div:nth-child(3) { --stat-accent: #A78BFA; }
#wrappedView .lwHeroStats div:nth-child(4) { --stat-accent: #F472B6; }
#wrappedView .lwHeroStats div:nth-child(5) { --stat-accent: #36C28B; }
#wrappedView .lwHeroStats div:nth-child(6) { --stat-accent: #F2B441; }
#wrappedView .lwHeroStats dt { color: color-mix(in srgb, var(--stat-accent) 76%, var(--muted, #8A94A6)); }
#wrappedView .lwHeroStats dd { color: var(--stat-accent); text-shadow: 0 0 16px color-mix(in srgb, var(--stat-accent) 20%, transparent); }

#wrappedView .lwHighlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#wrappedView .lwHighlight {
  display: grid;
  gap: 2px;
  align-content: start;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--lw-card);
  border: 1px solid var(--lw-line);
  border-top: 2px solid var(--hl, var(--lw-history));
}

#wrappedView .lwHighlight.tone-positive { --hl: var(--lw-good); }
#wrappedView .lwHighlight.tone-caution { --hl: var(--lw-bad); }
#wrappedView .lwHighlight.tone-trade { --hl: var(--lw-trade); }
#wrappedView .lwHighlight.tone-info { --hl: var(--lw-history); }

#wrappedView .lwHighlight span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwHighlight strong {
  font-size: 16px;
  color: var(--head, #F3F6FB);
  line-height: 1.2;
}

#wrappedView .lwHighlight b {
  font-size: 13px;
  color: var(--hl, var(--lw-history));
  font-variant-numeric: tabular-nums;
}

#wrappedView .lwHighlight em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted, #8A94A6);
  line-height: 1.35;
}

#wrappedView .lwHeroDisclosures {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#wrappedView .lwDisclosure {
  flex: 1 1 260px;
  border: 1px solid var(--lw-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 12px;
  font-size: 12px;
}

#wrappedView .lwDisclosure summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink, #EAEEF5);
  list-style: revert;
}

#wrappedView .lwDisclosure p,
#wrappedView .lwDisclosure ul {
  margin: 8px 0 2px;
  color: var(--muted, #8A94A6);
  line-height: 1.5;
}

#wrappedView .lwDisclosure ul { padding-left: 16px; }
#wrappedView .lwDisclosure li { margin-bottom: 5px; }
#wrappedView .lwDisclosure code {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--lw-warn);
}

/* ------------------------------------------------------------ shared shells */

#wrappedView .lwSection {
  padding: 18px 20px;
  border: 1px solid var(--lw-line);
  border-radius: var(--lw-radius);
  background: var(--panel, #121826);
}

#wrappedView .lwSectionHead {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lw-line);
}

#wrappedView .lwSectionHead h3 {
  font-family: var(--font-display, inherit);
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--head, #F3F6FB);
}

#wrappedView .lwSectionHead > div > p {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #8A94A6);
  max-width: 88ch;
}

#wrappedView .lwSectionActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

#wrappedView .lwSubhead {
  margin: 22px 0 10px;
  font-size: 14px;
  color: var(--head, #F3F6FB);
}

#wrappedView .lwFootnote {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwCaveat {
  margin: 8px 0 12px;
  padding: 9px 12px;
  border-left: 3px solid var(--lw-warn);
  border-radius: 0 8px 8px 0;
  background: rgba(242, 180, 65, 0.08);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink, #EAEEF5);
}

#wrappedView .lwSampleWarning {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-left: 3px solid var(--lw-warn);
  border-radius: 0 8px 8px 0;
  background: rgba(242, 180, 65, 0.09);
  font-size: 12px;
  color: var(--lw-warn);
}

#wrappedView .lwUnavailable {
  margin: 6px 0;
  padding: 9px 12px;
  border: 1px dashed var(--lw-line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwSelect {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwSelect select {
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid var(--lw-line);
  background: var(--lw-card);
  color: var(--ink, #EAEEF5);
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
}

#wrappedView .lwGhostButton {
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--lw-line);
  background: var(--lw-card);
  color: var(--ink, #EAEEF5);
  font-size: 12px;
  cursor: pointer;
}

#wrappedView .lwGhostButton:hover {
  border-color: var(--lw-history);
  color: var(--lw-history);
}

#wrappedView .lwSegmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--lw-line);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.22);
}

#wrappedView .lwSegmented button {
  padding: 6px 11px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted, #8A94A6);
  font-size: 12px;
  cursor: pointer;
}

#wrappedView .lwSegmented button.active {
  background: var(--lw-history);
  color: #08111F;
  font-weight: 600;
}

/* Stacked position bars ---------------------------------------------------- */

#wrappedView .lwStack {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

#wrappedView .lwStack.empty { opacity: 0.35; }

#wrappedView .lwStackSeg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pc, #64748B);
  min-width: 2px;
  transition: filter 0.15s ease;
}

#wrappedView .lwStackSeg:hover { filter: brightness(1.2); }

#wrappedView .lwStackSeg b {
  font-size: 10px;
  font-weight: 700;
  color: rgba(6, 12, 22, 0.86);
}

#wrappedView .lwLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwLegendItem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#wrappedView .lwLegendItem i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--pc, #64748B);
}

#wrappedView .lwLegendItem i.segAdds { background: var(--lw-good); }
#wrappedView .lwLegendItem i.segDrops { background: var(--lw-bad); }
#wrappedView .lwLegendItem i.segTrades { background: var(--lw-trade); }

#wrappedView .lwBarTrack {
  position: relative;
  height: 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

#wrappedView .lwBarTrack > span {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--lw-history);
}

#wrappedView .lwBarTrack > span.tone-positive { background: var(--lw-good); }
#wrappedView .lwBarTrack > span.tone-caution { background: var(--lw-bad); }
#wrappedView .lwBarTrack > span.tone-info { background: var(--lw-history); }
#wrappedView .lwBarTrack > span.tone-neutral { background: var(--muted, #8A94A6); }
#wrappedView .lwBarTrack > span.tone-trade { background: var(--lw-trade); }

#wrappedView .lwPosPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #08111F;
  background: var(--pc, #64748B);
}

#wrappedView .lwPosPill.tone-trade { background: var(--lw-trade); }

#wrappedView .lwManagerChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink, #EAEEF5);
  background: color-mix(in srgb, var(--mc, #5B9DF9) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--mc, #5B9DF9) 42%, transparent);
}

#wrappedView .lwManagerChip:hover {
  background: color-mix(in srgb, var(--mc, #5B9DF9) 28%, transparent);
}

#wrappedView .lwManagerChip em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwManagerAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #08111F;
  background: var(--mc, #5B9DF9);
  flex: none;
}

/* Tables ------------------------------------------------------------------- */

#wrappedView .lwTableScroll {
  overflow-x: auto;
  border: 1px solid var(--lw-line);
  border-radius: 10px;
}

#wrappedView .lwTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  white-space: nowrap;
}

#wrappedView .lwTable th,
#wrappedView .lwTable td {
  padding: 8px 11px;
  text-align: left;
  border-bottom: 1px solid var(--lw-line);
  font-variant-numeric: tabular-nums;
}

#wrappedView .lwTable thead th {
  position: sticky;
  top: 0;
  background: var(--lw-card);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #8A94A6);
  z-index: 1;
}

#wrappedView .lwTable thead th em {
  display: block;
  font-style: normal;
  font-size: 10px;
  opacity: 0.75;
  text-transform: none;
  letter-spacing: 0;
}

#wrappedView .lwTable tbody tr:hover { background: rgba(255, 255, 255, 0.028); }
#wrappedView .lwTable tbody th { font-weight: 600; color: var(--ink, #EAEEF5); }
#wrappedView .lwTable code { font-family: var(--font-mono, monospace); font-size: 11px; }

/* ---------------------------------------------------------------- Section 2 */

#wrappedView .lwDnaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 12px;
}

#wrappedView .lwDnaCard {
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--lw-card);
  border: 1px solid var(--lw-line);
  border-left: 3px solid var(--hl, var(--lw-history));
}

#wrappedView .lwDnaCard.tone-positive { --hl: var(--lw-good); }
#wrappedView .lwDnaCard.tone-caution { --hl: var(--lw-bad); }
#wrappedView .lwDnaCard.tone-trade { --hl: var(--lw-trade); }
#wrappedView .lwDnaCard.tone-neutral { --hl: var(--muted, #8A94A6); }

#wrappedView .lwDnaCard header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

#wrappedView .lwDnaCard header span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwDnaCard header strong {
  font-size: 15px;
  color: var(--hl, var(--lw-history));
}

#wrappedView .lwDnaNumber {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink, #EAEEF5);
}

#wrappedView .lwDnaNumber b { font-variant-numeric: tabular-nums; color: var(--head, #F3F6FB); }

#wrappedView .lwDnaScale { margin: 9px 0; }
#wrappedView .lwDnaSub {
  font-size: 11.5px;
  color: var(--muted, #8A94A6);
  margin-bottom: 6px;
}
#wrappedView .lwDnaSub b { color: var(--ink, #EAEEF5); }

#wrappedView .lwDnaRange {
  font-size: 11px;
  color: var(--muted, #8A94A6);
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
}

#wrappedView .lwDnaRange span {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.72;
  margin-bottom: 2px;
}

#wrappedView .lwDnaRead {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--lw-line);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted, #8A94A6);
}

/* ---------------------------------------------------------------- Section 3 */

#wrappedView .lwRecordGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
}

#wrappedView .lwRecordCard {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 14px;
  border-radius: 12px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--hl, var(--lw-history)) 12%, transparent), transparent 62%),
    var(--lw-card);
  border: 1px solid var(--lw-line);
}

#wrappedView .lwRecordCard.tone-positive { --hl: var(--lw-good); }
#wrappedView .lwRecordCard.tone-caution { --hl: var(--lw-bad); }
#wrappedView .lwRecordCard.tone-trade { --hl: var(--lw-trade); }
#wrappedView .lwRecordCard.tone-info { --hl: var(--lw-history); }

#wrappedView .lwRecordLabel {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwRecordValue {
  font-family: var(--font-display, inherit);
  font-size: 25px;
  line-height: 1.1;
  color: var(--hl, var(--lw-history));
  font-variant-numeric: tabular-nums;
}

#wrappedView .lwRecordUnit {
  font-size: 11.5px;
  color: var(--ink, #EAEEF5);
}

#wrappedView .lwRecordCard footer {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--lw-line);
}

#wrappedView .lwRecordCard footer em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwRecordDetail {
  margin-top: 5px;
  font-size: 11px;
  color: var(--muted, #8A94A6);
}

/* ---------------------------------------------------------------- Section 4 */

#wrappedView .lwProfileRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

#wrappedView .lwProfileCard {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--lw-card);
  border: 1px solid var(--lw-line);
  border-top: 3px solid var(--hl, var(--lw-history));
}

#wrappedView .lwProfileCard.tone-positive { --hl: var(--lw-good); }
#wrappedView .lwProfileCard.tone-caution { --hl: var(--lw-bad); }

#wrappedView .lwProfileCard header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

#wrappedView .lwProfileCard header span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hl, var(--lw-history));
  font-weight: 700;
}

#wrappedView .lwProfileCard header strong {
  font-size: 11.5px;
  color: var(--muted, #8A94A6);
  font-weight: 500;
}

#wrappedView .lwProfileCard ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

#wrappedView .lwProfileCard li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink, #EAEEF5);
}

#wrappedView .lwProfileCard li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--hl, var(--lw-history));
}

#wrappedView .lwCompareTable th[scope="col"].tone-positive { color: var(--lw-good); }
#wrappedView .lwCompareTable th[scope="col"].tone-caution { color: var(--lw-bad); }
#wrappedView .lwCompareTable th[scope="col"].tone-info { color: var(--lw-history); }

/* ---------------------------------------------------------------- Section 5 */

#wrappedView .lwManagerGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

#wrappedView .lwManagerCard {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  border-radius: 12px;
  background: var(--lw-card);
  border: 1px solid var(--lw-line);
  border-left: 3px solid var(--mc, #5B9DF9);
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease;
}

#wrappedView .lwManagerCard:hover,
#wrappedView .lwManagerCard:focus-visible {
  transform: translateY(-2px);
  border-color: var(--mc, #5B9DF9);
  outline: none;
}

#wrappedView .lwManagerCard header {
  display: flex;
  align-items: center;
  gap: 10px;
}

#wrappedView .lwManagerCard header strong {
  display: block;
  font-size: 15px;
  color: var(--head, #F3F6FB);
}

#wrappedView .lwManagerCard header em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted, #8A94A6);
  font-variant-numeric: tabular-nums;
}

#wrappedView .lwTitleBadge {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--keeper, #C9A24B);
  background: rgba(201, 162, 75, 0.14);
  border: 1px solid rgba(201, 162, 75, 0.35);
}

#wrappedView .lwArchetypeTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#wrappedView .lwTag {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--hl, var(--lw-history));
  background: color-mix(in srgb, var(--hl, var(--lw-history)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hl, var(--lw-history)) 34%, transparent);
}

#wrappedView .lwTag.tone-positive { --hl: var(--lw-good); }
#wrappedView .lwTag.tone-caution { --hl: var(--lw-bad); }
#wrappedView .lwTag.tone-trade { --hl: var(--lw-trade); }
#wrappedView .lwTag.tone-info { --hl: var(--lw-history); }
#wrappedView .lwTag.tone-neutral { --hl: var(--muted, #8A94A6); }

#wrappedView .lwTag em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 10.5px;
  opacity: 0.82;
  margin-top: 2px;
}

#wrappedView .lwManagerStats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px 6px;
  margin: 0;
}

#wrappedView .lwManagerStats div { min-width: 0; }

#wrappedView .lwManagerStats dt {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #8A94A6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#wrappedView .lwManagerStats dd {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink, #EAEEF5);
  font-variant-numeric: tabular-nums;
}

#wrappedView .lwManagerMix span,
#wrappedView .lwMixLabel {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwMixLabel { margin: 10px 0 5px; }

#wrappedView .lwManagerSummary {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted, #8A94A6);
  padding-top: 9px;
  border-top: 1px solid var(--lw-line);
}

/* ---------------------------------------------------------------- Section 6 */

#wrappedView .lwRoundList { display: grid; gap: 10px; }

#wrappedView .lwRoundRow {
  display: grid;
  grid-template-columns: 120px minmax(160px, 1fr) minmax(240px, 1.15fr);
  gap: 14px;
  align-items: center;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--lw-card);
  border: 1px solid var(--lw-line);
}

#wrappedView .lwRoundRow.isTotal {
  background: rgba(91, 157, 249, 0.07);
  border-color: color-mix(in srgb, var(--lw-history) 32%, var(--lw-line));
}

#wrappedView .lwRoundLabel strong {
  display: block;
  font-size: 13px;
  color: var(--head, #F3F6FB);
}

#wrappedView .lwRoundLabel em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwRoundMetrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
}

#wrappedView .lwRoundMetrics div { display: flex; align-items: baseline; gap: 5px; }

#wrappedView .lwRoundMetrics dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pc, var(--muted, #8A94A6));
}

#wrappedView .lwRoundMetrics .lwRoundExtra dt { color: var(--muted, #8A94A6); text-transform: uppercase; }
#wrappedView .lwRoundMetrics .lwRoundExtra.tone-caution dt { color: var(--lw-bad); }
#wrappedView .lwRoundMetrics .lwRoundExtra.tone-positive dt { color: var(--lw-good); }

#wrappedView .lwRoundMetrics dd {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #EAEEF5);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Section 7 */

#wrappedView .lwMarketGrid {
  display: grid;
  grid-template-columns: minmax(320px, 1.5fr) minmax(240px, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

#wrappedView .lwMarketChart h4,
#wrappedView .lwTxChart h4,
#wrappedView .lwTxManagers h4,
#wrappedView .lwPerfChart h4 {
  font-size: 13px;
  color: var(--head, #F3F6FB);
  margin-bottom: 10px;
}

#wrappedView .lwDivergeList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

#wrappedView .lwDivergeList li {
  display: grid;
  grid-template-columns: 44px 1fr 168px;
  gap: 10px;
  align-items: center;
}

#wrappedView .lwDivergeLabel {
  font-size: 11px;
  font-weight: 700;
  color: var(--pc, var(--ink));
}

#wrappedView .lwDivergeTrack {
  position: relative;
  height: 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.045);
}

#wrappedView .lwDivergeAxis {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--muted, #8A94A6);
  opacity: 0.55;
}

#wrappedView .lwDivergeFill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 3px;
}

#wrappedView .lwDivergeFill.isEarly { background: var(--lw-bad); }
#wrappedView .lwDivergeFill.isLate { background: var(--lw-good); }

#wrappedView .lwDivergeValue {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#wrappedView .lwMarketCallouts,
#wrappedView .lwCalloutRow {
  display: grid;
  gap: 10px;
}

#wrappedView .lwCalloutRow {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: 12px;
}

#wrappedView .lwCallout {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--lw-card);
  border: 1px solid var(--lw-line);
  border-left: 3px solid var(--hl, var(--lw-history));
}

#wrappedView .lwCallout.tone-positive { --hl: var(--lw-good); }
#wrappedView .lwCallout.tone-caution { --hl: var(--lw-bad); }
#wrappedView .lwCallout.tone-info { --hl: var(--lw-history); }
#wrappedView .lwCallout.tone-trade { --hl: var(--lw-trade); }

#wrappedView .lwCallout span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwCallout strong {
  font-size: 16px;
  color: var(--head, #F3F6FB);
}

#wrappedView .lwCallout b {
  font-size: 13px;
  color: var(--hl, var(--lw-history));
  font-variant-numeric: tabular-nums;
}

#wrappedView .lwCallout p {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted, #8A94A6);
}

/* ---------------------------------------------------------------- Section 8 */

#wrappedView .lwRunSummary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

#wrappedView .lwRunCard {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--lw-card);
  border: 1px solid var(--lw-line);
  border-top: 2px solid var(--hl, var(--lw-history));
}

#wrappedView .lwRunCard.tone-positive { --hl: var(--lw-good); }
#wrappedView .lwRunCard.tone-caution { --hl: var(--lw-bad); }
#wrappedView .lwRunCard.tone-neutral { --hl: var(--muted, #8A94A6); }

#wrappedView .lwRunCard span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwRunCard strong {
  display: block;
  font-size: 17px;
  color: var(--hl, var(--lw-history));
  font-variant-numeric: tabular-nums;
}

#wrappedView .lwRunCard em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwRunChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

#wrappedView .lwRunChip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pc, var(--ink));
  background: color-mix(in srgb, var(--pc, #64748B) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc, #64748B) 38%, transparent);
}

#wrappedView .lwRunChip em {
  font-style: normal;
  font-weight: 400;
  opacity: 0.78;
}

#wrappedView .lwTimelineScroll {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 6px;
}

#wrappedView .lwTimeline {
  display: grid;
  gap: 5px;
  width: 100%;
  min-width: 620px;
}

#wrappedView .lwTimelineRound {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: center;
}

#wrappedView .lwTimelineRoundLabel {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted, #8A94A6);
  font-variant-numeric: tabular-nums;
}

#wrappedView .lwTimelineRow {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
}

#wrappedView .lwPick {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 24px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--pc, #64748B) 78%, #050A12);
  cursor: default;
  flex: none;
}

#wrappedView .lwPick.isReach { box-shadow: inset 0 0 0 2px var(--lw-bad); }
#wrappedView .lwPick.isValue { box-shadow: inset 0 0 0 2px var(--lw-good); }

#wrappedView .lwPick b {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
}

#wrappedView .lwPickTip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  width: 208px;
  padding: 9px 11px;
  border-radius: 9px;
  background: #060B14;
  border: 1px solid var(--lw-line);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.62);
  z-index: 40;
  text-align: left;
  pointer-events: none;
}

#wrappedView .lwPick:hover .lwPickTip,
#wrappedView .lwPick:focus-visible .lwPickTip { display: block; }

/* The first rows sit directly below the section content, so an upward tooltip
   is clipped by the horizontal timeline scroller. Open the first five rows
   below the pick instead. */
#wrappedView .lwTimelineRound:nth-child(-n + 5) .lwPickTip {
  top: calc(100% + 7px);
  bottom: auto;
}

#wrappedView .lwPickTip strong {
  display: block;
  font-size: 12.5px;
  color: var(--head, #F3F6FB);
}

#wrappedView .lwPickTip em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--pc, var(--muted));
  margin-bottom: 4px;
}

#wrappedView .lwPickTip i {
  display: block;
  font-style: normal;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted, #8A94A6);
}

/* ---------------------------------------------------------------- Section 9 */

#wrappedView .lwChampionList { display: grid; gap: 10px; }

#wrappedView .lwChampionCard {
  border-radius: 12px;
  background: var(--lw-card);
  border: 1px solid var(--lw-line);
  overflow: hidden;
}

#wrappedView .lwChampionCard[open] {
  border-color: color-mix(in srgb, var(--keeper, #C9A24B) 42%, var(--lw-line));
}

#wrappedView .lwChampionCard summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: revert;
}

#wrappedView .lwChampionSeason {
  font-family: var(--font-display, inherit);
  font-size: 18px;
  color: var(--keeper, #C9A24B);
  font-variant-numeric: tabular-nums;
}

#wrappedView .lwChampionName {
  font-size: 15px;
  font-weight: 700;
  color: var(--head, #F3F6FB);
}

#wrappedView .lwChampionRecord {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted, #8A94A6);
  font-variant-numeric: tabular-nums;
}

#wrappedView .lwChampionBody {
  padding: 0 15px 15px;
  border-top: 1px solid var(--lw-line);
}

#wrappedView .lwChampionNarrative {
  margin: 13px 0;
  padding: 10px 13px;
  border-left: 3px solid var(--keeper, #C9A24B);
  border-radius: 0 8px 8px 0;
  background: rgba(201, 162, 75, 0.08);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink, #EAEEF5);
}

#wrappedView .lwChampionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 16px;
}

#wrappedView .lwChampionBlock h5 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwSpacedHead { margin-top: 14px !important; }

#wrappedView .lwMiniStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}

#wrappedView .lwMiniStats.wide { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

#wrappedView .lwMiniStats dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwMiniStats dd {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #EAEEF5);
  font-variant-numeric: tabular-nums;
}

#wrappedView .lwKeyList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

#wrappedView .lwKeyList li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
  font-size: 12px;
}

#wrappedView .lwKeyList strong { color: var(--ink, #EAEEF5); }

#wrappedView .lwKeyList em {
  font-style: normal;
  margin-left: auto;
  font-size: 11px;
  color: var(--muted, #8A94A6);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#wrappedView .lwHitCard {
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.028);
  border-left: 3px solid var(--hl, var(--lw-history));
  margin-bottom: 8px;
}

#wrappedView .lwHitCard.tone-positive { --hl: var(--lw-good); }
#wrappedView .lwHitCard.tone-caution { --hl: var(--lw-bad); }

#wrappedView .lwHitCard span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwHitCard strong { display: block; font-size: 13.5px; color: var(--head, #F3F6FB); }
#wrappedView .lwHitCard em { font-style: normal; font-size: 11px; color: var(--muted, #8A94A6); }

#wrappedView .lwPath {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

#wrappedView .lwPath li {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 12px;
  border-left: 3px solid var(--muted, #8A94A6);
  background: rgba(255, 255, 255, 0.026);
}

#wrappedView .lwPath li.won { border-left-color: var(--lw-good); }
#wrappedView .lwPath li.lost { border-left-color: var(--lw-bad); }

#wrappedView .lwPath span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #8A94A6);
  white-space: nowrap;
}

#wrappedView .lwPath strong { color: var(--ink, #EAEEF5); font-weight: 600; }

/* ------------------------------------------------------------ Sections 10-11 */

#wrappedView .lwTxGrid,
#wrappedView .lwPerfGrid {
  display: grid;
  grid-template-columns: minmax(320px, 1.45fr) minmax(260px, 1fr);
  gap: 18px;
  margin-top: 14px;
}

#wrappedView .lwPerfGrid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

#wrappedView .lwWeekChart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 148px;
  padding: 8px 4px 0;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--lw-line);
  overflow-x: auto;
}

#wrappedView .lwWeekCol {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-width: 13px;
  flex: 1 0 13px;
}

#wrappedView .lwWeekStack {
  display: flex;
  flex-direction: column-reverse;
  width: 78%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

#wrappedView .lwWeekStack span { display: block; width: 100%; min-height: 0; }
#wrappedView .lwWeekStack .segAdds { background: var(--lw-good); }
#wrappedView .lwWeekStack .segDrops { background: var(--lw-bad); }
#wrappedView .lwWeekStack .segTrades { background: var(--lw-trade); }

#wrappedView .lwWeekCol em {
  font-style: normal;
  font-size: 8.5px;
  color: var(--muted, #8A94A6);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

#wrappedView .lwBarList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

#wrappedView .lwBarList li {
  display: grid;
  grid-template-columns: 128px 1fr 52px;
  gap: 10px;
  align-items: center;
}

#wrappedView .lwBarLabel {
  font-size: 11.5px;
  color: var(--ink, #EAEEF5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid var(--mc, #5B9DF9);
  padding-left: 7px;
}

#wrappedView .lwGroupedBar {
  display: flex;
  gap: 2px;
  height: 15px;
  align-items: stretch;
}

#wrappedView .lwGroupedBar span { border-radius: 3px; min-width: 1px; }
#wrappedView .lwGroupedBar .segAdds { background: var(--lw-good); }
#wrappedView .lwGroupedBar .segDrops { background: var(--lw-bad); }
#wrappedView .lwGroupedBar .segTrades { background: var(--lw-trade); }

#wrappedView .lwBarValue {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink, #EAEEF5);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- Section 12 */

#wrappedView .lwFinishTrack { display: flex; gap: 4px; }

#wrappedView .lwFinishDot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted, #8A94A6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--lw-line);
}

#wrappedView .lwFinishDot.isPlayoff {
  color: var(--lw-history);
  background: rgba(91, 157, 249, 0.16);
  border-color: color-mix(in srgb, var(--lw-history) 42%, transparent);
}

#wrappedView .lwFinishDot.isChamp {
  color: #08111F;
  background: var(--keeper, #C9A24B);
  border-color: var(--keeper, #C9A24B);
}

/* --------------------------------------------------------------- Section 13 */

#wrappedView .lwCompareHead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

#wrappedView .lwCompareWho {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--mc, #5B9DF9) 10%, var(--lw-card));
  border: 1px solid color-mix(in srgb, var(--mc, #5B9DF9) 34%, transparent);
}

#wrappedView .lwCompareWho:last-child { flex-direction: row-reverse; text-align: right; }
#wrappedView .lwCompareWho strong { display: block; font-size: 15px; color: var(--head, #F3F6FB); }
#wrappedView .lwCompareWho em { font-style: normal; font-size: 11px; color: var(--muted, #8A94A6); }

#wrappedView .lwCompareVs { text-align: center; }

#wrappedView .lwCompareVs span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwCompareVs em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--lw-history);
}

#wrappedView .lwCompareList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

#wrappedView .lwCompareList li {
  display: grid;
  grid-template-columns: 132px 1fr 132px;
  gap: 12px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

#wrappedView .lwCompareValue {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #EAEEF5);
  font-variant-numeric: tabular-nums;
}

#wrappedView .lwCompareValue.left { text-align: right; }

#wrappedView .lwCompareBars {
  display: grid;
  grid-template-columns: 1fr 190px 1fr;
  gap: 9px;
  align-items: center;
}

#wrappedView .lwCompareLabel {
  font-size: 11px;
  text-align: center;
  color: var(--muted, #8A94A6);
}

#wrappedView .lwCompareBarWrap {
  height: 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
}

#wrappedView .lwCompareBarWrap.left { justify-content: flex-end; }
#wrappedView .lwCompareBarWrap span { display: block; height: 100%; border-radius: 5px; background: var(--mc, #5B9DF9); }

#wrappedView .lwCompareMix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

/* --------------------------------------------------------------- Section 14 */

#wrappedView .lwTakeawaySection {
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(54, 194, 139, 0.09), transparent 60%),
    var(--panel, #121826);
}

#wrappedView .lwTakeawayList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  counter-reset: lwTakeaway;
}

#wrappedView .lwTakeawayList li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--lw-card);
  border: 1px solid var(--lw-line);
  border-left: 3px solid var(--hl, var(--lw-history));
}

#wrappedView .lwTakeawayList li.tone-positive { --hl: var(--lw-good); }
#wrappedView .lwTakeawayList li.tone-caution { --hl: var(--lw-bad); }
#wrappedView .lwTakeawayList li.tone-info { --hl: var(--lw-history); }

#wrappedView .lwTakeawayIndex {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #08111F;
  background: var(--hl, var(--lw-history));
}

#wrappedView .lwTakeawayList strong {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--head, #F3F6FB);
  margin-bottom: 4px;
}

#wrappedView .lwTakeawayList p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, #8A94A6);
}

/* ------------------------------------------------------------ Sections 15-16 */

#wrappedView .lwDataReview { background: rgba(10, 14, 22, 0.72); }

#wrappedView .lwTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 14px 0;
  padding: 4px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid var(--lw-line);
}

#wrappedView .lwTabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted, #8A94A6);
  font-size: 12.5px;
  cursor: pointer;
}

#wrappedView .lwTabs button.active {
  background: var(--lw-history);
  color: #08111F;
  font-weight: 600;
}

#wrappedView .lwTabs button em {
  font-style: normal;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

#wrappedView .lwTabs button.active em { background: rgba(8, 17, 31, 0.22); }

#wrappedView .lwReviewSubhead {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 9px;
}

#wrappedView .lwReviewSubhead h4 { font-size: 13px; color: var(--head, #F3F6FB); }

#wrappedView .lwMethod h4 {
  font-size: 13px;
  color: var(--head, #F3F6FB);
  margin: 14px 0 8px;
}

#wrappedView .lwMethod h4:first-child { margin-top: 0; }

#wrappedView .lwMethod ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

#wrappedView .lwMethod li {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted, #8A94A6);
}

/* Keep the raw transaction list from dominating the page. */
#wrappedView .lwDataReview .transactionList {
  max-height: 680px;
  overflow-y: auto;
  padding-right: 4px;
}

/* ------------------------------------------------------------ manager drawer */

#wrappedView .lwDrawerBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 14, 0.66);
  backdrop-filter: blur(2px);
  z-index: 120;
}

#wrappedView .lwDrawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 94vw);
  display: flex;
  flex-direction: column;
  background: var(--panel, #121826);
  border-left: 1px solid var(--lw-line);
  box-shadow: -24px 0 68px rgba(0, 0, 0, 0.56);
  z-index: 121;
}

#wrappedView .lwDrawerHead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--lw-line);
  background: color-mix(in srgb, var(--mc, #5B9DF9) 12%, transparent);
}

#wrappedView .lwDrawerHead strong { display: block; font-size: 17px; color: var(--head, #F3F6FB); }
#wrappedView .lwDrawerHead em { font-style: normal; font-size: 12px; color: var(--muted, #8A94A6); }

#wrappedView .lwDrawerClose {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--lw-line);
  background: var(--lw-card);
  color: var(--ink, #EAEEF5);
  font-size: 12px;
  cursor: pointer;
}

#wrappedView .lwDrawerBody {
  padding: 16px 18px 26px;
  overflow-y: auto;
  display: grid;
  gap: 12px;
  align-content: start;
}

#wrappedView .lwDrawerBody h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #8A94A6);
  margin: 6px 0 0;
}

/* ---------------------------------------------------------------- Section 18 */

@media (max-width: 1180px) {
  #wrappedView .lwHeroTop { grid-template-columns: 1fr; }
  #wrappedView .lwHighlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #wrappedView .lwMarketGrid,
  #wrappedView .lwTxGrid { grid-template-columns: 1fr; }
  #wrappedView .lwRoundRow { grid-template-columns: 108px minmax(140px, 1fr); }
  #wrappedView .lwRoundMetrics { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  #wrappedView .lwManagerGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #wrappedView .lwManagerStats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #wrappedView .lwHeroStats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #wrappedView .lwCompareBars { grid-template-columns: 1fr 130px 1fr; }
  #wrappedView .lwCompareList li { grid-template-columns: 92px 1fr 92px; }
}

@media (max-width: 720px) {
  #wrappedView .lwSection { padding: 14px 13px; }
  #wrappedView .lwHero { padding: 16px 14px; }
  #wrappedView .lwHighlights { grid-template-columns: 1fr; }
  #wrappedView .lwManagerGrid { grid-template-columns: 1fr; }
  #wrappedView .lwRoundRow { grid-template-columns: 1fr; }
  #wrappedView .lwSectionHead { align-items: flex-start; flex-direction: column; }

  /* Mobile order: hero, then takeaways, then the rest; raw review stays last. */
  #wrappedView .lwFlow { display: flex; flex-direction: column; }
  #wrappedView #lwTakeaways { order: -1; }
  #wrappedView .lwHero { order: -2; }

  #wrappedView .lwCompareList li { grid-template-columns: 1fr; gap: 4px; }
  #wrappedView .lwCompareValue.left { text-align: left; }
  #wrappedView .lwCompareBars { grid-template-columns: 1fr; }
  #wrappedView .lwCompareBarWrap.left { justify-content: flex-start; }
  #wrappedView .lwCompareHead { grid-template-columns: 1fr; }
  #wrappedView .lwCompareWho:last-child { flex-direction: row; text-align: left; }
  #wrappedView .lwChampionGrid { grid-template-columns: 1fr; }
  #wrappedView .lwDivergeList li { grid-template-columns: 36px 1fr; }
  #wrappedView .lwDivergeValue { grid-column: 2; text-align: left; }
  #wrappedView .lwBarList li { grid-template-columns: 92px 1fr 42px; }

  /* Raw transaction review collapses on mobile so analysis stays reachable. */
  #wrappedView .lwDataReview .transactionList { max-height: 420px; }
  #wrappedView .lwPickTip { width: 172px; }
}

@media (prefers-reduced-motion: reduce) {
  #wrappedView .lwManagerCard { transition: none; }
  #wrappedView .lwManagerCard:hover { transform: none; }
}

/* Keeper picks are recorded by Sleeper in the final draft rounds. They are
   marked distinctly so they never read as late-round draft value. */
#wrappedView .lwRoundRow.isKeeper {
  background: rgba(201, 162, 75, 0.07);
  border-color: color-mix(in srgb, var(--keeper, #C9A24B) 34%, var(--lw-line));
}

#wrappedView .lwPick.isKeeperPick {
  box-shadow: inset 0 0 0 2px var(--keeper, #C9A24B);
  opacity: 0.85;
}

/* --- Support modal: issue intake form ----------------------------------- */

.supportSection + .supportSection {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border, var(--line));
}

.supportSectionTitle {
  margin: 0 0 4px;
  font-size: var(--font-size-md, 15px);
  font-weight: var(--weight-emphasis, 700);
  color: var(--color-text-strong, var(--head));
}

.supportSectionNote {
  margin: 0 0 14px;
  color: var(--color-text-muted, var(--muted));
  font-size: var(--font-size-sm, 13px);
  line-height: 1.55;
}

.supportIssueForm {
  display: grid;
  gap: 12px;
}

.supportField {
  display: grid;
  gap: 5px;
}

.supportFieldLabel {
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--weight-emphasis, 700);
  letter-spacing: 0.02em;
  color: var(--color-text, var(--ink));
}

.supportFieldLabel em {
  margin-left: 4px;
  font-style: normal;
  font-weight: 500;
  color: var(--color-text-muted, var(--muted));
  opacity: 0.8;
}

.supportField input,
.supportField select,
.supportField textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--color-border, var(--line));
  border-radius: var(--radius-control, 8px);
  background: rgba(8, 15, 28, 0.55);
  color: var(--color-text, var(--ink));
  font: inherit;
  font-size: var(--font-size-sm, 13px);
}

.supportField textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.5;
}

.supportField input:focus-visible,
.supportField select:focus-visible,
.supportField textarea:focus-visible {
  border-color: #60A5FA;
  outline: 2px solid rgba(96, 165, 250, 0.25);
  outline-offset: 1px;
}

.supportCheck {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-text-muted, var(--muted));
  font-size: var(--font-size-xs, 12px);
  line-height: 1.45;
  cursor: pointer;
}

.supportCheck input {
  margin-top: 1px;
  width: auto;
  flex: 0 0 auto;
  accent-color: #60A5FA;
}

.supportDiagnostics {
  border: 1px solid var(--color-border, var(--line));
  border-radius: 10px;
  padding: 9px 11px;
  background: rgba(8, 15, 28, 0.4);
}

.supportDiagnostics summary {
  cursor: pointer;
  color: var(--color-text-muted, var(--muted));
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--weight-emphasis, 700);
}

.supportDiagnostics pre {
  margin: 9px 0 0;
  max-height: 150px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--color-text-muted, var(--muted));
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  line-height: 1.5;
}

.supportIssueStatus {
  margin: 0;
  font-size: var(--font-size-xs, 12px);
  line-height: 1.45;
}

.supportIssueStatus:empty {
  display: none;
}

.supportIssueStatus.isError {
  color: #FCA5A5;
}

.supportIssueStatus.isOk {
  color: #86EFAC;
}

.supportIssueActions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.supportPrimaryButton,
.supportGhostButton {
  padding: 9px 15px;
  border-radius: var(--radius-control, 8px);
  font: inherit;
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--weight-emphasis, 700);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.supportPrimaryButton {
  border: 1px solid rgba(96, 165, 250, 0.42);
  background: rgba(30, 64, 175, 0.28);
  color: #DBEAFE;
}

.supportPrimaryButton:hover {
  border-color: #60A5FA;
  background: rgba(30, 64, 175, 0.4);
}

.supportGhostButton {
  border: 1px solid var(--color-border-strong, var(--line));
  background: transparent;
  color: var(--color-text-muted, var(--muted));
}

.supportGhostButton:hover {
  border-color: var(--color-accent, var(--accent));
  color: var(--color-accent-strong, var(--accent-2));
}

.supportContactLine {
  margin: 14px 0 0;
  color: var(--color-text-muted, var(--muted));
  font-size: var(--font-size-xs, 12px);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.supportContactLine a {
  color: var(--color-accent-strong, var(--accent-2));
}

.supportInlineCopy {
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted, var(--muted));
  font: inherit;
  font-size: 11px;
  font-weight: var(--weight-emphasis, 700);
  cursor: pointer;
}

.supportInlineCopy:hover {
  border-color: var(--color-accent, var(--accent));
  color: var(--color-accent-strong, var(--accent-2));
}


/* ============================================================================
   MANAGER TENDENCIES — opponent scouting report
   Appended last so it wins on source order without editing the layered theme.
   Colour contract (Section 20):
     positions  RB green · WR cyan · TE purple · QB blue · DST slate · K amber
     outcomes   positive green · caution/reach red · uncertainty amber
   Position colours are never reused for performance metrics.
   ========================================================================== */

#managerTendenciesView {
  --mt-good: var(--good, #36C28B);
  --mt-bad: var(--bad, #EC6A60);
  --mt-warn: var(--warn, #F2B441);
  --mt-info: var(--accent, #5B9DF9);
  --mt-trade: #A78BFA;
  --mt-line: var(--line, #232C3D);
  --mt-card: var(--panel-soft, #18202F);
  --mt-radius: 14px;
}

#managerTendenciesView .mtPanel {
  padding: 0;
  background: none;
  border: 0;
}

#managerTendenciesView .mtFlow {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Position tokens, shared with the rest of the app. */
#managerTendenciesView .pos-qb  { --pc: var(--pos-qb, #3B82F6); }
#managerTendenciesView .pos-rb  { --pc: var(--pos-rb, #10B981); }
#managerTendenciesView .pos-wr  { --pc: var(--pos-wr, #38BDF8); }
#managerTendenciesView .pos-te  { --pc: var(--pos-te, #8B5CF6); }
#managerTendenciesView .pos-k   { --pc: var(--pos-k, #F59E0B); }
#managerTendenciesView .pos-dst { --pc: var(--pos-dst, #64748B); }
#managerTendenciesView .pos-unk { --pc: #64748B; }

/* Manager identity colours, matched to the League Wrapped palette so a manager
   keeps one colour everywhere in the app. */
#managerTendenciesView .mc-0 { --mc: #5B9DF9; }
#managerTendenciesView .mc-1 { --mc: #36C28B; }
#managerTendenciesView .mc-2 { --mc: #F2B441; }
#managerTendenciesView .mc-3 { --mc: #EC6A60; }
#managerTendenciesView .mc-4 { --mc: #A78BFA; }
#managerTendenciesView .mc-5 { --mc: #38BDF8; }
#managerTendenciesView .mc-6 { --mc: #F472B6; }
#managerTendenciesView .mc-7 { --mc: #FB923C; }
#managerTendenciesView .mc-8 { --mc: #4ADE80; }
#managerTendenciesView .mc-9 { --mc: #94A3B8; }
#managerTendenciesView .mcLeague { --mc: #8A94A6; }

#managerTendenciesView .tone-positive { color: var(--mt-good); }
#managerTendenciesView .tone-caution { color: var(--mt-bad); }
#managerTendenciesView .tone-warn { color: var(--mt-warn); }
#managerTendenciesView .tone-info { color: var(--mt-info); }
#managerTendenciesView .tone-trade { color: var(--mt-trade); }
#managerTendenciesView .tone-muted { color: var(--muted, #8A94A6); }

/* Stacked position bars reused from the League Wrapped helpers. */
#managerTendenciesView .lwStack {
  display: flex;
  height: 20px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
#managerTendenciesView .lwStackSeg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pc, #64748B);
  min-width: 2px;
}
#managerTendenciesView .lwStackSeg b { font-size: 10px; font-weight: 700; color: rgba(6, 12, 22, 0.86); }
#managerTendenciesView .lwLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted, #8A94A6);
}
#managerTendenciesView .lwLegendItem { display: inline-flex; align-items: center; gap: 5px; }
#managerTendenciesView .lwLegendItem i { width: 10px; height: 10px; border-radius: 3px; background: var(--pc, #64748B); }

/* ----------------------------------------------------------- Sections 1 & 2 */

#managerTendenciesView .mtHero {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--mt-line);
  border-radius: 18px;
  background:
    radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--mc, #5B9DF9) 16%, transparent), transparent 58%),
    var(--panel, #121826);
}

#managerTendenciesView .mtHeroTop {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

#managerTendenciesView .mtHeroWho {
  display: flex;
  gap: 13px;
  align-items: center;
  min-width: 0;
}

#managerTendenciesView .mtAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 700;
  color: #08111F;
  background: var(--mc, #5B9DF9);
  flex: none;
}

#managerTendenciesView .mtEyebrow {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #8A94A6);
  margin-bottom: 3px;
}

#managerTendenciesView .mtHeroWho h2 {
  font-family: var(--font-display, inherit);
  font-size: clamp(22px, 2.8vw, 31px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--head, #F3F6FB);
}

#managerTendenciesView .mtYouTag {
  font-style: normal;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
  color: var(--mt-info);
  background: rgba(91, 157, 249, 0.16);
  border: 1px solid rgba(91, 157, 249, 0.4);
}

#managerTendenciesView .mtScopeLine {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--muted, #8A94A6);
}
#managerTendenciesView .mtScopeLine b { color: var(--ink, #EAEEF5); }

#managerTendenciesView .mtControls {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: flex-end;
}

#managerTendenciesView .mtSelect {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #8A94A6);
}

#managerTendenciesView .mtSelect select {
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid var(--mt-line);
  background: var(--mt-card);
  color: var(--ink, #EAEEF5);
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
}

#managerTendenciesView .mtRead {
  margin: 0;
  padding: 11px 14px;
  border-left: 3px solid var(--mc, var(--mt-info));
  border-radius: 0 9px 9px 0;
  background: rgba(255, 255, 255, 0.03);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink, #EAEEF5);
}
#managerTendenciesView .mtRead.compact { font-size: 12.5px; padding: 9px 12px; margin-bottom: 10px; }

#managerTendenciesView .mtHeroBottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

#managerTendenciesView .mtHeroStats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  flex: 1 1 420px;
}

#managerTendenciesView .mtHeroStats div {
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--mt-line);
}
#managerTendenciesView .mtHeroStats dt {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #8A94A6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#managerTendenciesView .mtHeroStats dd {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--head, #F3F6FB);
  font-variant-numeric: tabular-nums;
}

/* Hero metrics: turn the manager snapshot into six distinct signals while
   preserving the compact single-row layout on wider screens. */
#managerTendenciesView .mtHeroStats div {
  --stat-accent: var(--mt-info);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 45px;
  padding: 8px 10px 9px;
  border-color: color-mix(in srgb, var(--stat-accent) 24%, var(--mt-line));
  background:
    radial-gradient(120% 115% at 100% 0%, color-mix(in srgb, var(--stat-accent) 18%, transparent), transparent 68%),
    linear-gradient(145deg, color-mix(in srgb, var(--stat-accent) 8%, transparent), rgba(255, 255, 255, 0.018) 72%),
    color-mix(in srgb, var(--mt-card) 88%, #0B1120);
  box-shadow: 0 5px 14px rgba(3, 7, 15, 0.16);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
#managerTendenciesView .mtHeroStats div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--stat-accent), transparent);
  opacity: 0.9;
}
#managerTendenciesView .mtHeroStats div::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 54px;
  height: 54px;
  right: -21px;
  bottom: -27px;
  border-radius: 50%;
  background: var(--stat-accent);
  opacity: 0.08;
  filter: blur(2px);
}
#managerTendenciesView .mtHeroStats div:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--stat-accent) 48%, var(--mt-line));
  box-shadow: 0 9px 20px rgba(3, 7, 15, 0.25);
}
#managerTendenciesView .mtHeroStats div:nth-child(1) { --stat-accent: #5B9DF9; }
#managerTendenciesView .mtHeroStats div:nth-child(2) { --stat-accent: #A78BFA; }
#managerTendenciesView .mtHeroStats div:nth-child(3) { --stat-accent: #36C28B; }
#managerTendenciesView .mtHeroStats div:nth-child(4) { --stat-accent: #F2B441; }
#managerTendenciesView .mtHeroStats div:nth-child(5) { --stat-accent: #C084FC; }
#managerTendenciesView .mtHeroStats div:nth-child(6) { --stat-accent: #38BDF8; }
#managerTendenciesView .mtHeroStats dt { color: color-mix(in srgb, var(--stat-accent) 76%, var(--muted, #8A94A6)); }
#managerTendenciesView .mtHeroStats dd { color: var(--stat-accent); text-shadow: 0 0 16px color-mix(in srgb, var(--stat-accent) 20%, transparent); }

#managerTendenciesView .mtChips { display: flex; flex-wrap: wrap; gap: 6px; }

#managerTendenciesView .mtChip {
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hl, var(--mt-info));
  background: color-mix(in srgb, var(--hl, var(--mt-info)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hl, var(--mt-info)) 34%, transparent);
}
#managerTendenciesView .mtChip em { font-style: normal; font-weight: 400; opacity: 0.8; margin-left: 5px; }
#managerTendenciesView .mtChip.tone-positive { --hl: var(--mt-good); }
#managerTendenciesView .mtChip.tone-caution { --hl: var(--mt-bad); }
#managerTendenciesView .mtChip.tone-warn { --hl: var(--mt-warn); }
#managerTendenciesView .mtChip.tone-info { --hl: var(--mt-info); }
#managerTendenciesView .mtChip.tone-trade { --hl: var(--mt-trade); }
#managerTendenciesView .mtChip.tone-muted { --hl: var(--muted, #8A94A6); }
#managerTendenciesView .mtChip.tone-rb { --hl: var(--pos-rb, #10B981); }
#managerTendenciesView .mtChip.tone-wr { --hl: var(--pos-wr, #38BDF8); }
#managerTendenciesView .mtChip.tone-qb { --hl: var(--pos-qb, #3B82F6); }
#managerTendenciesView .mtChip.tone-te { --hl: var(--pos-te, #8B5CF6); }

/* --------------------------------------------------------- section scaffold */

#managerTendenciesView .mtSection {
  padding: 16px 18px;
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius);
  background: var(--panel, #121826);
}

#managerTendenciesView .mtSectionHead {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--mt-line);
}
#managerTendenciesView .mtSectionHead h3 {
  font-family: var(--font-display, inherit);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--head, #F3F6FB);
}
#managerTendenciesView .mtSectionHead > div > p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, #8A94A6);
  max-width: 86ch;
}
#managerTendenciesView .mtSectionActions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

#managerTendenciesView .mtSubhead {
  margin: 16px 0 9px;
  font-size: 12.5px;
  color: var(--head, #F3F6FB);
}

#managerTendenciesView .mtNote {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted, #8A94A6);
}

#managerTendenciesView .mtEmpty {
  margin: 6px 0;
  padding: 9px 12px;
  border: 1px dashed var(--mt-line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted, #8A94A6);
}

#managerTendenciesView .mtDim { color: var(--muted, #8A94A6); font-style: normal; }

#managerTendenciesView .mtTwoCol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
#managerTendenciesView .mtCol { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

#managerTendenciesView .mtGhostButton {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--mt-line);
  background: var(--mt-card);
  color: var(--ink, #EAEEF5);
  font-size: 11.5px;
  cursor: pointer;
}
#managerTendenciesView .mtGhostButton:hover { border-color: var(--mt-info); color: var(--mt-info); }
#managerTendenciesView .mtGhostButton.active { border-color: var(--mt-info); color: var(--mt-info); background: rgba(91, 157, 249, 0.12); }

#managerTendenciesView .mtSegmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--mt-line);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.22);
}
#managerTendenciesView .mtSegmented button {
  padding: 5px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted, #8A94A6);
  font-size: 11.5px;
  cursor: pointer;
}
#managerTendenciesView .mtSegmented button.active { background: var(--mt-info); color: #08111F; font-weight: 600; }
#managerTendenciesView .mtSegmented button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Confidence chips */
#managerTendenciesView .mtConf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--hl, var(--muted));
  background: color-mix(in srgb, var(--hl, var(--muted, #8A94A6)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--hl, var(--muted, #8A94A6)) 32%, transparent);
}
#managerTendenciesView .mtConf i { width: 6px; height: 6px; border-radius: 50%; background: var(--hl, var(--muted)); }
#managerTendenciesView .mtConf em { font-style: normal; font-weight: 400; opacity: 0.82; }
#managerTendenciesView .mtConf.tone-positive { --hl: var(--mt-good); }
#managerTendenciesView .mtConf.tone-info { --hl: var(--mt-info); }
#managerTendenciesView .mtConf.tone-warn { --hl: var(--mt-warn); }
#managerTendenciesView .mtConf.tone-muted { --hl: var(--muted, #8A94A6); }

/* Bars */
#managerTendenciesView .mtBarTrack {
  position: relative;
  height: 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  flex: 1;
}
#managerTendenciesView .mtBarTrack > span { display: block; height: 100%; border-radius: 5px; background: var(--mt-info); }
#managerTendenciesView .mtBarTrack > span.tone-positive { background: var(--mt-good); }
#managerTendenciesView .mtBarTrack > span.tone-caution { background: var(--mt-bad); }
#managerTendenciesView .mtBarTrack > span.tone-warn { background: var(--mt-warn); }
#managerTendenciesView .mtBarTrack > span.tone-info { background: var(--mt-info); }
#managerTendenciesView .mtBarTrack > span.tone-neutral { background: var(--muted, #8A94A6); }
#managerTendenciesView .mtPosBar { background: var(--pc, var(--mt-info)); }

#managerTendenciesView .mtPosBarWrap { position: relative; display: flex; align-items: center; }
#managerTendenciesView .mtPosBarWrap.tall .mtBarTrack { height: 13px; }

/* The comparison marker is what turns a bare bar into a comparison. */
#managerTendenciesView .mtCompareMark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--head, #F3F6FB);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(8, 17, 31, 0.6);
  pointer-events: none;
}
#managerTendenciesView .mtCompareKey,
#managerTendenciesView .mtLegendLine i { display: inline-block; width: 2px; height: 11px; background: var(--head, #F3F6FB); vertical-align: middle; margin-right: 5px; }
#managerTendenciesView .mtLegendLine { margin-top: 9px; font-size: 11px; color: var(--muted, #8A94A6); }

#managerTendenciesView .mtPosPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #08111F;
  background: var(--pc, #64748B);
}

/* ---------------------------------------------------------------- Section 3 */

#managerTendenciesView .mtTakeawayRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
  gap: 10px;
}
#managerTendenciesView .mtTakeaway {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 13px;
  border-radius: 11px;
  background: var(--mt-card);
  border: 1px solid var(--mt-line);
  border-top: 2px solid var(--hl, var(--mt-info));
}
#managerTendenciesView .mtTakeaway.tone-rb { --hl: var(--pos-rb, #10B981); }
#managerTendenciesView .mtTakeaway.tone-wr { --hl: var(--pos-wr, #38BDF8); }
#managerTendenciesView .mtTakeaway.tone-qb { --hl: var(--pos-qb, #3B82F6); }
#managerTendenciesView .mtTakeaway.tone-te { --hl: var(--pos-te, #8B5CF6); }
#managerTendenciesView .mtTakeaway.tone-warn { --hl: var(--mt-warn); }
#managerTendenciesView .mtTakeaway.tone-info { --hl: var(--mt-info); }
#managerTendenciesView .mtTakeaway.tone-positive { --hl: var(--mt-good); }
#managerTendenciesView .mtTakeaway.tone-caution { --hl: var(--mt-bad); }
#managerTendenciesView .mtTakeawayTitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hl, var(--mt-info));
}
#managerTendenciesView .mtTakeaway p { font-size: 12.5px; line-height: 1.45; color: var(--ink, #EAEEF5); }
#managerTendenciesView .mtTakeaway footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--mt-line);
}
#managerTendenciesView .mtTakeaway footer em { font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }

/* ---------------------------------------------------------------- Section 4 */

#managerTendenciesView .mtStatGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 9px;
}
#managerTendenciesView .mtStatGrid.compact { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
#managerTendenciesView .mtStat {
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--mt-card);
  border: 1px solid var(--mt-line);
}
#managerTendenciesView .mtStat dt {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #8A94A6);
}
#managerTendenciesView .mtStat dd {
  margin: 3px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--head, #F3F6FB);
  font-variant-numeric: tabular-nums;
}
#managerTendenciesView .mtStat em { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }

#managerTendenciesView .mtLuck {
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: 11px;
  background: var(--mt-card);
  border: 1px solid var(--mt-line);
}
#managerTendenciesView .mtLuckRows { display: grid; gap: 9px; }
#managerTendenciesView .mtLuckRows > div { display: grid; grid-template-columns: 128px 62px 1fr; gap: 10px; align-items: center; }
#managerTendenciesView .mtLuckRows span { font-size: 11.5px; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtLuckRows b { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--head, #F3F6FB); }
#managerTendenciesView .mtLuckDelta { margin-top: 10px; font-size: 12.5px; color: var(--muted, #8A94A6); }

/* ---------------------------------------------------------------- Section 5 */

#managerTendenciesView .mtPredTop { display: flex; gap: 15px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
#managerTendenciesView .mtPredDial {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  flex: none;
  border: 3px solid currentColor;
  background: rgba(255, 255, 255, 0.03);
}
#managerTendenciesView .mtPredDial strong { font-size: 26px; line-height: 1; font-family: var(--font-display, inherit); }
#managerTendenciesView .mtPredDial span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; }
#managerTendenciesView .mtPredVerdict strong { display: block; font-size: 16px; margin-bottom: 4px; }
#managerTendenciesView .mtPredVerdict p { font-size: 12px; line-height: 1.5; color: var(--muted, #8A94A6); }

#managerTendenciesView .mtPredParts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 11px; }
#managerTendenciesView .mtPredPartHead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
#managerTendenciesView .mtPredPartHead span { font-size: 11.5px; color: var(--ink, #EAEEF5); }
#managerTendenciesView .mtPredPartHead b { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--head, #F3F6FB); }
#managerTendenciesView .mtPredPart em { display: block; margin-top: 5px; font-style: normal; font-size: 10.5px; line-height: 1.4; color: var(--muted, #8A94A6); }

/* ---------------------------------------------------------------- Section 6 */

#managerTendenciesView .mtIdentityGrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
#managerTendenciesView .mtIdentityBars { display: grid; gap: 8px; align-content: start; }
#managerTendenciesView .mtPosRow { display: grid; grid-template-columns: 34px 1fr 44px 62px; gap: 9px; align-items: center; }
#managerTendenciesView .mtPosName { font-size: 11.5px; font-weight: 700; color: var(--pc, var(--ink)); }
#managerTendenciesView .mtPosValue { font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--head, #F3F6FB); }
#managerTendenciesView .mtPosCount { font-size: 10.5px; text-align: right; color: var(--muted, #8A94A6); }

#managerTendenciesView .mtIdentitySide { display: grid; gap: 10px; align-content: start; }
#managerTendenciesView .mtMiniBlock h4 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #8A94A6);
  margin-bottom: 5px;
}
#managerTendenciesView .mtMiniBlock h4 em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.8; }
#managerTendenciesView .mtMiniStats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; }
#managerTendenciesView .mtMiniStats dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtMiniStats dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--ink, #EAEEF5); font-variant-numeric: tabular-nums; }

#managerTendenciesView .mtOpening { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--mt-line); }
#managerTendenciesView .mtOpening h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6); margin-bottom: 8px; }
#managerTendenciesView .mtOpeningSeq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#managerTendenciesView .mtOpenSlot { display: inline-flex; align-items: center; gap: 2px; }
#managerTendenciesView .mtOpeningSeq b,
#managerTendenciesView .mtOpeningRows b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #08111F;
  background: var(--pc, #64748B);
}
#managerTendenciesView .mtOpenSlot i { font-style: normal; color: var(--muted, #8A94A6); font-size: 11px; }
#managerTendenciesView .mtArrow { font-style: normal; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtOpeningRows { display: grid; gap: 6px; margin-top: 10px; }
#managerTendenciesView .mtOpeningRows > div { display: flex; align-items: center; gap: 6px; }
#managerTendenciesView .mtOpeningRows > div > span { font-size: 11px; color: var(--muted, #8A94A6); min-width: 38px; }
#managerTendenciesView .mtOpeningRows i { font-style: normal; color: var(--muted, #8A94A6); font-size: 11px; }

/* ---------------------------------------------------------------- Section 7 */

#managerTendenciesView .mtTimingList { display: grid; gap: 10px; }
#managerTendenciesView .mtTimingRow {
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--mt-card);
  border: 1px solid var(--mt-line);
  border-left: 3px solid var(--pc, var(--mt-info));
}
#managerTendenciesView .mtTimingHead { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 9px; }
#managerTendenciesView .mtTimingHead strong { font-size: 12.5px; color: var(--ink, #EAEEF5); flex: 1; min-width: 180px; }
#managerTendenciesView .mtTimingStats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 9px 0 0; }
#managerTendenciesView .mtTimingStats div { display: flex; gap: 5px; align-items: baseline; }
#managerTendenciesView .mtTimingStats dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtTimingStats dd { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink, #EAEEF5); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Section 8 */

#managerTendenciesView .mtRoundList { display: grid; gap: 8px; }
#managerTendenciesView .mtRoundRow {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 200px;
  gap: 12px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--mt-card);
  border: 1px solid var(--mt-line);
}
#managerTendenciesView .mtRoundLabel strong { display: block; font-size: 13px; color: var(--head, #F3F6FB); }
#managerTendenciesView .mtRoundLabel em { font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtRoundBars { display: grid; gap: 5px; min-width: 0; }
#managerTendenciesView .mtRoundBarLine { position: relative; }
#managerTendenciesView .mtRoundBarLine.muted { opacity: 0.55; }
#managerTendenciesView .mtBarTag {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(8, 17, 31, 0.72);
  pointer-events: none;
}
#managerTendenciesView .mtRoundMeta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: flex-end; font-size: 11px; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtRoundMeta em { font-style: normal; }

#managerTendenciesView .mtRoundSeasonGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
#managerTendenciesView .mtRoundSeason h4 { font-size: 12px; color: var(--head, #F3F6FB); margin-bottom: 7px; }
#managerTendenciesView .mtRoundLine { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
#managerTendenciesView .mtRoundLine > span { font-size: 10.5px; color: var(--muted, #8A94A6); min-width: 26px; }
#managerTendenciesView .mtRoundLine b {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; padding: 2px 7px; border-radius: 5px;
  font-size: 11px; font-weight: 700; color: #08111F; background: var(--pc, #64748B);
}
#managerTendenciesView .mtRoundLine.empty em { font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); opacity: 0.6; }

/* ---------------------------------------------------------------- Section 9 */

#managerTendenciesView .mtRunGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 11px; }
#managerTendenciesView .mtRunCard {
  padding: 12px 13px;
  border-radius: 11px;
  background: var(--mt-card);
  border: 1px solid var(--mt-line);
  border-top: 2px solid var(--pc, var(--mt-info));
}
#managerTendenciesView .mtRunCard.insufficient { opacity: 0.72; border-top-style: dashed; }
#managerTendenciesView .mtRunCard header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 9px; }
#managerTendenciesView .mtRunCard header strong { font-size: 13px; color: var(--head, #F3F6FB); }
#managerTendenciesView .mtRunStats { display: flex; flex-wrap: wrap; gap: 5px 13px; margin: 9px 0 0; }
#managerTendenciesView .mtRunStats div { display: flex; gap: 5px; align-items: baseline; }
#managerTendenciesView .mtRunStats dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtRunStats dd { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink, #EAEEF5); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Section 10 */

#managerTendenciesView .mtImpactGrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
#managerTendenciesView .mtImpactMain { display: grid; gap: 7px; align-content: start; }
#managerTendenciesView .mtImpactRow {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 11px;
  align-items: center;
  padding: 8px 11px;
  border-radius: 9px;
  background: var(--mt-card);
  border: 1px solid var(--mt-line);
}
#managerTendenciesView .mtImpactRow > span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtImpactRow > strong { font-size: 13.5px; color: var(--head, #F3F6FB); display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
#managerTendenciesView .mtImpactRow b {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 2px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 700; color: #08111F; background: var(--pc, #64748B);
}
#managerTendenciesView .mtImpactRow b.faded { opacity: 0.42; }
#managerTendenciesView .mtImpactNote { font-size: 11.5px !important; font-weight: 400; color: var(--muted, #8A94A6) !important; }
#managerTendenciesView .mtImpactSide { display: grid; gap: 10px; align-content: start; }
#managerTendenciesView .mtImpactSide > h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtBoardList { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
#managerTendenciesView .mtBoardList li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; background: rgba(255, 255, 255, 0.03); font-size: 12px; }
#managerTendenciesView .mtBoardList strong { color: var(--ink, #EAEEF5); }
#managerTendenciesView .mtBoardList em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }

/* --------------------------------------------------------------- Section 11 */

#managerTendenciesView .mtArchRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); gap: 10px; }
#managerTendenciesView .mtArchCard {
  display: grid; gap: 5px; align-content: start;
  padding: 11px 12px; border-radius: 10px;
  background: var(--mt-card); border: 1px solid var(--mt-line);
}
#managerTendenciesView .mtArchCard > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtArchCard strong { font-size: 14px; color: var(--head, #F3F6FB); }
#managerTendenciesView .mtArchCard em { font-style: normal; font-size: 11px; color: var(--muted, #8A94A6); line-height: 1.4; }

#managerTendenciesView .mtUnavailableBlock {
  margin-top: 15px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px dashed var(--mt-line);
  background: rgba(255, 255, 255, 0.02);
}
#managerTendenciesView .mtUnavailableBlock h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--mt-warn); margin-bottom: 6px; }
#managerTendenciesView .mtUnavailableBlock p { font-size: 11.5px; line-height: 1.55; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtUnavailableBlock code { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--ink, #EAEEF5); }

/* --------------------------------------------------------------- Section 12 */

#managerTendenciesView .mtWarnBanner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 11px 13px;
  margin-bottom: 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--mt-warn) 40%, transparent);
  background: rgba(242, 180, 65, 0.1);
}
#managerTendenciesView .mtWarnBanner strong { color: var(--mt-warn); font-size: 12.5px; }
#managerTendenciesView .mtWarnBanner span { font-size: 12px; line-height: 1.5; color: var(--ink, #EAEEF5); }
#managerTendenciesView .mtWarnBanner b { color: var(--head, #F3F6FB); }

#managerTendenciesView .mtRetroGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; margin-top: 15px; }
#managerTendenciesView .mtPickList { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
#managerTendenciesView .mtPickList li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px;
}
#managerTendenciesView .mtPickList strong { color: var(--ink, #EAEEF5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#managerTendenciesView .mtPickList em { grid-column: 2; grid-row: 2; font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtPickList b { grid-column: 3; grid-row: 1 / span 2; font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: right; }

/* --------------------------------------------------------------- Section 14 */

#managerTendenciesView .mtChartWrap { position: relative; }
#managerTendenciesView .mtChart {
  width: 100%;
  height: 190px;
  overflow: visible;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--mt-line);
}
#managerTendenciesView .mtSdBand { fill: rgba(91, 157, 249, 0.11); }
#managerTendenciesView .mtLeagueLine { stroke: var(--muted, #8A94A6); stroke-width: 0.5; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
#managerTendenciesView .mtMeanLine { stroke: var(--mt-info); stroke-width: 0.5; stroke-dasharray: 4 2; vector-effect: non-scaling-stroke; }
#managerTendenciesView .mtSeasonBreak { stroke: var(--mt-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
#managerTendenciesView .mtPlayoffMark { fill: rgba(201, 162, 75, 0.16); }
#managerTendenciesView .mtScoreLine { fill: none; stroke: var(--mt-info); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#managerTendenciesView .mtRollLine { fill: none; stroke: var(--mt-good); stroke-width: 1.4; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
#managerTendenciesView .mtDot { fill: var(--mt-info); }
#managerTendenciesView .mtDot.isHigh { fill: var(--mt-good); r: 1.8; }
#managerTendenciesView .mtDot.isLow { fill: var(--mt-bad); r: 1.8; }

#managerTendenciesView .mtChartAxis { position: relative; height: 16px; margin-top: 4px; }
#managerTendenciesView .mtChartAxis span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--muted, #8A94A6);
  white-space: nowrap;
}
#managerTendenciesView .mtChartAxis span.isSeason { color: var(--ink, #EAEEF5); font-weight: 700; }

#managerTendenciesView .mtChartLegend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 10.5px; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtChartLegend span { display: inline-flex; align-items: center; gap: 5px; }
#managerTendenciesView .mtChartLegend i { width: 13px; height: 2px; border-radius: 2px; }
#managerTendenciesView .mtKeyScore { background: var(--mt-info); }
#managerTendenciesView .mtKeyRoll { background: var(--mt-good); }
#managerTendenciesView .mtKeyMean { background: var(--mt-info); opacity: 0.6; }
#managerTendenciesView .mtKeyLeague { background: var(--muted, #8A94A6); }
#managerTendenciesView .mtKeyBand { background: rgba(91, 157, 249, 0.4); height: 9px !important; border-radius: 3px; }
#managerTendenciesView .mtKeyPlayoff { background: rgba(201, 162, 75, 0.5); height: 9px !important; border-radius: 3px; }

/* --------------------------------------------------------- Sections 15 + 18 */

#managerTendenciesView .mtTableScroll { overflow-x: auto; border: 1px solid var(--mt-line); border-radius: 10px; }
#managerTendenciesView .mtTable { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
#managerTendenciesView .mtTable th,
#managerTendenciesView .mtTable td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--mt-line); font-variant-numeric: tabular-nums; }
#managerTendenciesView .mtTable thead th {
  position: sticky; top: 0;
  background: var(--mt-card);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted, #8A94A6); z-index: 1;
}
#managerTendenciesView .mtTable tbody tr:hover { background: rgba(255, 255, 255, 0.028); }

#managerTendenciesView .mtLandscape { display: grid; gap: 6px; }
#managerTendenciesView .mtLandscapeRow {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr) 112px;
  gap: 11px;
  align-items: center;
  padding: 6px 9px;
  border-radius: 9px;
  border: 1px solid transparent;
}
#managerTendenciesView .mtLandscapeRow.isLeague {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--mt-line);
}
#managerTendenciesView .mtLandscapeRow.isLeague .mtLandscapeName { color: var(--muted, #8A94A6); font-style: italic; }
#managerTendenciesView .mtLandscapeRow.isSelected {
  background: color-mix(in srgb, var(--mc, #5B9DF9) 15%, transparent);
  border-color: var(--mc, #5B9DF9);
}
#managerTendenciesView .mtLandscapeName {
  font-size: 12px;
  color: var(--ink, #EAEEF5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid var(--mc, transparent);
  padding-left: 8px;
}
#managerTendenciesView .mtLandscapeRow.isSelected .mtLandscapeName { font-weight: 700; color: var(--head, #F3F6FB); }
#managerTendenciesView .mtLandscapeName em { font-style: normal; font-size: 10px; color: var(--mt-info); }
#managerTendenciesView .mtLandscapeValue { font-size: 11px; text-align: right; color: var(--muted, #8A94A6); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Section 16 */

#managerTendenciesView .mtOverlapTop { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 14px; }
#managerTendenciesView .mtOverlapScore {
  padding: 12px 15px;
  border-radius: 11px;
  background: var(--mt-card);
  border: 1px solid var(--mt-line);
  min-width: 190px;
}
#managerTendenciesView .mtOverlapScore > span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtOverlapScore strong { display: block; font-size: 30px; font-family: var(--font-display, inherit); color: var(--mt-info); }
#managerTendenciesView .mtOverlapScore strong em { font-style: normal; font-size: 13px; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtOverlapFacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 9px; flex: 1; }
#managerTendenciesView .mtOverlapFacts > div { padding: 8px 10px; border-radius: 9px; background: var(--mt-card); border: 1px solid var(--mt-line); }
#managerTendenciesView .mtOverlapFacts dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtOverlapFacts dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--head, #F3F6FB); }

#managerTendenciesView .mtOverlapBars { display: grid; gap: 7px; }
#managerTendenciesView .mtOverlapRow { display: grid; grid-template-columns: 34px minmax(0, 1fr) 92px; gap: 10px; align-items: center; }
#managerTendenciesView .mtDualBar { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
#managerTendenciesView .mtDualSide { height: 11px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); display: flex; }
#managerTendenciesView .mtDualSide.left { justify-content: flex-end; }
#managerTendenciesView .mtDualSide span { display: block; height: 100%; border-radius: 4px; }
#managerTendenciesView .mtDualSide.left span { background: var(--pc, var(--mt-info)); }
#managerTendenciesView .mtDualSide.right span { background: color-mix(in srgb, var(--pc, var(--mt-info)) 45%, #8A94A6); }
#managerTendenciesView .mtOverlapValue { font-size: 11px; text-align: right; color: var(--muted, #8A94A6); font-variant-numeric: tabular-nums; }
#managerTendenciesView .mtKeyThem { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--mt-info); vertical-align: middle; margin-right: 4px; }
#managerTendenciesView .mtKeyYou { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: #8A94A6; vertical-align: middle; margin-right: 4px; }

/* --------------------------------------------------------------- Section 17 */

#managerTendenciesView .mtCompareHead { display: grid; grid-template-columns: 1fr auto 1fr; gap: 13px; align-items: center; margin-bottom: 13px; }
#managerTendenciesView .mtCompareWho {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 11px;
  background: color-mix(in srgb, var(--mc, #5B9DF9) 11%, var(--mt-card));
  border: 1px solid color-mix(in srgb, var(--mc, #5B9DF9) 34%, transparent);
}
#managerTendenciesView .mtCompareWho:last-child { flex-direction: row-reverse; text-align: right; }
#managerTendenciesView .mtCompareWho strong { font-size: 14px; color: var(--head, #F3F6FB); }
#managerTendenciesView .mtCompareWho .mtAvatar { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
#managerTendenciesView .mtCompareVs { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted, #8A94A6); }

#managerTendenciesView .mtCompareList { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#managerTendenciesView .mtCompareList li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 88px;
  gap: 11px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
#managerTendenciesView .mtCompareValue { font-size: 11.5px; font-weight: 600; color: var(--ink, #EAEEF5); font-variant-numeric: tabular-nums; }
#managerTendenciesView .mtCompareValue.left { text-align: right; }
#managerTendenciesView .mtCompareBars { display: grid; grid-template-columns: 1fr 168px 1fr; gap: 8px; align-items: center; }
#managerTendenciesView .mtCompareLabel { font-size: 11px; text-align: center; color: var(--muted, #8A94A6); }
#managerTendenciesView .mtCompareBarWrap { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.05); display: flex; }
#managerTendenciesView .mtCompareBarWrap.left { justify-content: flex-end; }
#managerTendenciesView .mtCompareBarWrap span { display: block; height: 100%; border-radius: 5px; background: var(--mc, #5B9DF9); }
#managerTendenciesView .mtCompareMix { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; margin-top: 14px; }
#managerTendenciesView .mtMixLabel { display: block; margin-bottom: 5px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6); }

/* --------------------------------------------------------------- Section 19 */

#managerTendenciesView .mtSummarySection {
  background:
    radial-gradient(85% 130% at 100% 0%, rgba(54, 194, 139, 0.08), transparent 60%),
    var(--panel, #121826);
}
#managerTendenciesView .mtSummaryList { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
#managerTendenciesView .mtSummaryList li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--mt-card);
  border: 1px solid var(--mt-line);
  border-left: 3px solid var(--hl, var(--mt-info));
}
#managerTendenciesView .mtSummaryList li.tone-rb { --hl: var(--pos-rb, #10B981); }
#managerTendenciesView .mtSummaryList li.tone-wr { --hl: var(--pos-wr, #38BDF8); }
#managerTendenciesView .mtSummaryList li.tone-qb { --hl: var(--pos-qb, #3B82F6); }
#managerTendenciesView .mtSummaryList li.tone-te { --hl: var(--pos-te, #8B5CF6); }
#managerTendenciesView .mtSummaryList li.tone-positive { --hl: var(--mt-good); }
#managerTendenciesView .mtSummaryList li.tone-caution { --hl: var(--mt-bad); }
#managerTendenciesView .mtSummaryList li.tone-warn { --hl: var(--mt-warn); }
#managerTendenciesView .mtSummaryList li.tone-info { --hl: var(--mt-info); }
#managerTendenciesView .mtSummaryIndex {
  display: flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; color: #08111F;
  background: var(--hl, var(--mt-info));
}
#managerTendenciesView .mtSummaryList strong { display: block; font-size: 13.5px; line-height: 1.4; color: var(--head, #F3F6FB); margin-bottom: 3px; }
#managerTendenciesView .mtSummaryList p { font-size: 11.5px; line-height: 1.5; color: var(--muted, #8A94A6); }

/* --------------------------------------------------------------- Section 22 */

@media (max-width: 1200px) {
  #managerTendenciesView .mtTwoCol { grid-template-columns: 1fr; }
  #managerTendenciesView .mtIdentityGrid,
  #managerTendenciesView .mtImpactGrid { grid-template-columns: 1fr; }
  #managerTendenciesView .mtHeroStats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  #managerTendenciesView .mtRoundRow { grid-template-columns: 78px minmax(0, 1fr); }
  #managerTendenciesView .mtRoundMeta { grid-column: 1 / -1; justify-content: flex-start; }
  #managerTendenciesView .mtCompareBars { grid-template-columns: 1fr 116px 1fr; }
  #managerTendenciesView .mtLandscapeRow { grid-template-columns: 116px minmax(0, 1fr) 84px; }
  #managerTendenciesView .mtTableScroll { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 720px) {
  #managerTendenciesView .mtSection { padding: 13px 12px; }
  #managerTendenciesView .mtHero { padding: 15px 13px; }
  #managerTendenciesView .mtHeroStats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #managerTendenciesView .mtControls { width: 100%; }
  #managerTendenciesView .mtSelect { flex: 1 1 132px; }
  #managerTendenciesView .mtSectionHead { flex-direction: column; align-items: flex-start; }

  /* Mobile order: hero and summary first, deep analysis after. */
  #managerTendenciesView .mtFlow { display: flex; flex-direction: column; }
  #managerTendenciesView .mtHero { order: -3; }
  #managerTendenciesView #mtSummary { order: -2; }
  #managerTendenciesView #mtTakeaways { order: -1; }

  #managerTendenciesView .mtCompareList li { grid-template-columns: 1fr; gap: 3px; }
  #managerTendenciesView .mtCompareValue.left { text-align: left; }
  #managerTendenciesView .mtCompareBars { grid-template-columns: 1fr; }
  #managerTendenciesView .mtCompareBarWrap.left { justify-content: flex-start; }
  #managerTendenciesView .mtCompareHead { grid-template-columns: 1fr; }
  #managerTendenciesView .mtCompareWho:last-child { flex-direction: row; text-align: left; }
  #managerTendenciesView .mtLuckRows > div { grid-template-columns: 96px 54px 1fr; }
  #managerTendenciesView .mtLandscapeRow { grid-template-columns: 92px minmax(0, 1fr); }
  #managerTendenciesView .mtLandscapeValue { display: none; }
  #managerTendenciesView .mtPosRow { grid-template-columns: 30px 1fr 40px; }
  #managerTendenciesView .mtPosCount { display: none; }

  /* Deep detail collapses so the scouting read stays reachable on a phone. */
  #managerTendenciesView #mtPicks .mtTableScroll,
  #managerTendenciesView #mtOverlap .mtTableScroll { max-height: 340px; overflow-y: auto; }
  #managerTendenciesView .mtChart { height: 150px; }
}


/* ============================================================================
   LEAGUE HISTORY — the record book
   Appended last so it wins on source order without editing the layered theme.
   Colour contract (Section 25):
     green favourable · red unfavourable · blue neutral history
     amber incomplete or uncertain · purple championships and playoff marks
   Rivalry cells use a muted win/loss tint rather than strong green/red, because
   a head-to-head result is not a judgement on manager quality.
   ========================================================================== */

#leagueHistoryView {
  --lh-good: var(--good, #36C28B);
  --lh-bad: var(--bad, #EC6A60);
  --lh-warn: var(--warn, #F2B441);
  --lh-info: var(--accent, #5B9DF9);
  --lh-title: #A78BFA;
  --lh-line: var(--line, #232C3D);
  --lh-card: var(--panel-soft, #18202F);
}

#leagueHistoryView .lhPanel { padding: 0; background: none; border: 0; }
#leagueHistoryView .lhFlow { display: flex; flex-direction: column; gap: 16px; }
#leagueHistoryView .sleeperStatus { margin-bottom: 10px; font-size: 12px; }

#leagueHistoryView .mc-0 { --mc: #5B9DF9; }
#leagueHistoryView .mc-1 { --mc: #36C28B; }
#leagueHistoryView .mc-2 { --mc: #F2B441; }
#leagueHistoryView .mc-3 { --mc: #EC6A60; }
#leagueHistoryView .mc-4 { --mc: #A78BFA; }
#leagueHistoryView .mc-5 { --mc: #38BDF8; }
#leagueHistoryView .mc-6 { --mc: #F472B6; }
#leagueHistoryView .mc-7 { --mc: #FB923C; }
#leagueHistoryView .mc-8 { --mc: #4ADE80; }
#leagueHistoryView .mc-9 { --mc: #94A3B8; }

#leagueHistoryView .tone-positive { color: var(--lh-good); }
#leagueHistoryView .tone-caution { color: var(--lh-bad); }
#leagueHistoryView .tone-warn { color: var(--lh-warn); }
#leagueHistoryView .tone-info { color: var(--lh-info); }
#leagueHistoryView .tone-title { color: var(--lh-title); }
#leagueHistoryView .tone-muted { color: var(--muted, #8A94A6); }

/* ----------------------------------------------------------- Sections 1-3 */

#leagueHistoryView .lhHero {
  display: grid;
  gap: 13px;
  padding: 17px 19px;
  border: 1px solid var(--lh-line);
  border-radius: 17px;
  background:
    radial-gradient(115% 150% at 0% 0%, rgba(91, 157, 249, 0.14), transparent 56%),
    radial-gradient(90% 130% at 100% 0%, rgba(167, 139, 250, 0.11), transparent 60%),
    var(--panel, #121826);
}

#leagueHistoryView .lhHeroTop {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

#leagueHistoryView .lhEyebrow {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #8A94A6);
  margin-bottom: 4px;
}

#leagueHistoryView .lhHeroTitle h2 {
  font-family: var(--font-display, inherit);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--head, #F3F6FB);
}

#leagueHistoryView .lhSummaryLine {
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink, #EAEEF5);
  border-left: 3px solid var(--lh-info);
  padding-left: 10px;
  max-width: 80ch;
}

#leagueHistoryView .lhHeroActions { display: grid; gap: 5px; justify-items: end; }
#leagueHistoryView .lhRefreshNote { font-size: 10.5px; color: var(--muted, #8A94A6); }

#leagueHistoryView .lhHeroStats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}
#leagueHistoryView .lhHeroStats div {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--lh-line);
}
#leagueHistoryView .lhHeroStats dt {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted, #8A94A6);
}
#leagueHistoryView .lhHeroStats dd {
  margin: 3px 0 0; font-size: 16px; font-weight: 700;
  color: var(--head, #F3F6FB); font-variant-numeric: tabular-nums;
}

/* Hero metrics: make the record-book summary feel like a set of signals,
   rather than six interchangeable utility boxes. */
#leagueHistoryView .lhHeroStats div {
  --stat-accent: var(--lh-info);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 52px;
  padding: 9px 11px 10px;
  border-color: color-mix(in srgb, var(--stat-accent) 24%, var(--lh-line));
  background:
    radial-gradient(120% 115% at 100% 0%, color-mix(in srgb, var(--stat-accent) 18%, transparent), transparent 68%),
    linear-gradient(145deg, color-mix(in srgb, var(--stat-accent) 8%, transparent), rgba(255, 255, 255, 0.018) 72%),
    color-mix(in srgb, var(--lh-card) 88%, #0B1120);
  box-shadow: 0 5px 14px rgba(3, 7, 15, 0.16);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
#leagueHistoryView .lhHeroStats div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--stat-accent), transparent);
  opacity: 0.9;
}
#leagueHistoryView .lhHeroStats div::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 58px;
  height: 58px;
  right: -23px;
  bottom: -28px;
  border-radius: 50%;
  background: var(--stat-accent);
  opacity: 0.08;
  filter: blur(2px);
}
#leagueHistoryView .lhHeroStats div:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--stat-accent) 48%, var(--lh-line));
  box-shadow: 0 9px 20px rgba(3, 7, 15, 0.25);
}
#leagueHistoryView .lhHeroStats div:nth-child(1) { --stat-accent: #5B9DF9; }
#leagueHistoryView .lhHeroStats div:nth-child(2) { --stat-accent: #38BDF8; }
#leagueHistoryView .lhHeroStats div:nth-child(3) { --stat-accent: #A78BFA; }
#leagueHistoryView .lhHeroStats div:nth-child(4) { --stat-accent: #36C28B; }
#leagueHistoryView .lhHeroStats div:nth-child(5) { --stat-accent: #F2B441; }
#leagueHistoryView .lhHeroStats div:nth-child(6) { --stat-accent: #F472B6; }
#leagueHistoryView .lhHeroStats dt { color: color-mix(in srgb, var(--stat-accent) 76%, var(--muted, #8A94A6)); }
#leagueHistoryView .lhHeroStats dd { color: var(--stat-accent); text-shadow: 0 0 16px color-mix(in srgb, var(--stat-accent) 20%, transparent); }

#leagueHistoryView .lhDisclosure {
  border: 1px solid var(--lh-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 12px;
  font-size: 12px;
}
#leagueHistoryView .lhDisclosure summary { cursor: pointer; font-weight: 600; color: var(--ink, #EAEEF5); list-style: revert; }
#leagueHistoryView .lhDisclosure ul { margin: 8px 0 2px; padding-left: 17px; color: var(--muted, #8A94A6); line-height: 1.55; }
#leagueHistoryView .lhDisclosure li { margin-bottom: 5px; }
#leagueHistoryView .lhDisclosure p { margin: 7px 0 2px; color: var(--muted, #8A94A6); line-height: 1.55; }
#leagueHistoryView .lhDisclosure code { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--lh-warn); }
#leagueHistoryView .lhDisclosure.compact { margin-top: 12px; }
#leagueHistoryView .lhDisclosure.dataQuality { margin-top: 16px; border-color: color-mix(in srgb, var(--lh-warn) 34%, var(--lh-line)); }
#leagueHistoryView .lhDisclosure.dataQuality summary { color: var(--lh-warn); }

/* Sticky internal navigation */
#leagueHistoryView .lhTabs {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 11px;
  background: rgba(10, 14, 22, 0.94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--lh-line);
  overflow-x: auto;
}
#leagueHistoryView .lhTabs button {
  padding: 8px 15px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted, #8A94A6);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
#leagueHistoryView .lhTabs button.active { background: var(--lh-info); color: #08111F; font-weight: 600; }

#leagueHistoryView .lhFilters {
  padding: 11px 13px;
  border: 1px solid var(--lh-line);
  border-radius: 11px;
  background: var(--lh-card);
}
#leagueHistoryView .lhFilterRow { display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end; }
#leagueHistoryView .lhSelect {
  display: inline-flex; flex-direction: column; gap: 4px;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted, #8A94A6);
}
#leagueHistoryView .lhSelect select {
  padding: 6px 9px; border-radius: 8px;
  border: 1px solid var(--lh-line); background: var(--panel, #121826);
  color: var(--ink, #EAEEF5); font-size: 12.5px; text-transform: none; letter-spacing: 0;
}
#leagueHistoryView .lhToggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink, #EAEEF5); cursor: pointer;
}
#leagueHistoryView .lhFilterScope {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--lh-line);
  font-size: 11.5px; color: var(--muted, #8A94A6);
}
#leagueHistoryView .lhFilterChip {
  padding: 2px 9px; border-radius: 999px; font-size: 11px;
  background: rgba(91, 157, 249, 0.14);
  border: 1px solid rgba(91, 157, 249, 0.36);
  color: var(--lh-info);
}
#leagueHistoryView .lhFilterChip.tone-warn {
  background: rgba(242, 180, 65, 0.13);
  border-color: rgba(242, 180, 65, 0.38);
  color: var(--lh-warn);
}

/* --------------------------------------------------------- section scaffold */

#leagueHistoryView .lhSection {
  padding: 16px 18px;
  border: 1px solid var(--lh-line);
  border-radius: 14px;
  background: var(--panel, #121826);
}

#leagueHistoryView .lhSectionHead {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 14px; padding-bottom: 11px;
  border-bottom: 1px solid var(--lh-line);
}
#leagueHistoryView .lhSectionHead h3 {
  font-family: var(--font-display, inherit);
  font-size: 17px; letter-spacing: -0.01em; color: var(--head, #F3F6FB);
}
#leagueHistoryView .lhSectionHead > div > p {
  margin-top: 4px; font-size: 12px; line-height: 1.5;
  color: var(--muted, #8A94A6); max-width: 88ch;
}
#leagueHistoryView .lhSectionActions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }

#leagueHistoryView .lhSubhead { margin: 18px 0 9px; font-size: 13px; color: var(--head, #F3F6FB); }
#leagueHistoryView .lhInlineNote {
  font-style: normal; font-size: 10.5px; font-weight: 400;
  color: var(--muted, #8A94A6); margin-left: 6px;
}
#leagueHistoryView .lhNote { margin-top: 9px; font-size: 11.5px; line-height: 1.5; color: var(--muted, #8A94A6); }
#leagueHistoryView .lhEmpty {
  margin: 6px 0; padding: 9px 12px;
  border: 1px dashed var(--lh-line); border-radius: 8px;
  font-size: 12px; color: var(--muted, #8A94A6);
}
#leagueHistoryView .lhWarnLine {
  margin-bottom: 11px; padding: 8px 12px;
  border-left: 3px solid var(--lh-warn); border-radius: 0 8px 8px 0;
  background: rgba(242, 180, 65, 0.09);
  font-size: 12px; color: var(--ink, #EAEEF5);
}

#leagueHistoryView .lhGhostButton {
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--lh-line); background: var(--lh-card);
  color: var(--ink, #EAEEF5); font-size: 12px; cursor: pointer;
}
#leagueHistoryView .lhGhostButton:hover { border-color: var(--lh-info); color: var(--lh-info); }
#leagueHistoryView .lhGhostButton.small { padding: 3px 9px; font-size: 11px; }

#leagueHistoryView .lhSegmented {
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--lh-line); border-radius: 9px;
  background: rgba(0, 0, 0, 0.22);
}
#leagueHistoryView .lhSegmented button {
  padding: 5px 11px; border: 0; border-radius: 7px; background: none;
  color: var(--muted, #8A94A6); font-size: 11.5px; cursor: pointer;
}
#leagueHistoryView .lhSegmented button.active { background: var(--lh-info); color: #08111F; font-weight: 600; }

#leagueHistoryView .lhBarTrack {
  position: relative; height: 9px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.07); overflow: hidden; flex: 1;
}
#leagueHistoryView .lhBarTrack > span { display: block; height: 100%; border-radius: 5px; background: var(--mc, var(--lh-info)); }
#leagueHistoryView .lhBarTrack > span.tone-info { background: var(--lh-info); }
#leagueHistoryView .lhBarTrack > span.tone-neutral { background: #7C8899; }
#leagueHistoryView .lhBarTrack > span.tone-muted { background: #5A6472; }

#leagueHistoryView .lhManagerChip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; cursor: pointer;
  color: var(--ink, #EAEEF5);
  background: color-mix(in srgb, var(--mc, #5B9DF9) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--mc, #5B9DF9) 40%, transparent);
}
#leagueHistoryView .lhManagerChip:hover { background: color-mix(in srgb, var(--mc, #5B9DF9) 28%, transparent); }
#leagueHistoryView .lhManagerChip em { font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }

#leagueHistoryView .lhRowName {
  display: inline-block; padding-left: 8px;
  border-left: 3px solid var(--mc, transparent);
  font-weight: 600; color: var(--ink, #EAEEF5); white-space: nowrap;
}
#leagueHistoryView .lhTitleMark {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; padding: 1px 6px; border-radius: 5px;
  font-size: 11px; font-weight: 700; color: #08111F;
  background: var(--lh-title);
}
#leagueHistoryView .lhTag {
  padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 600;
  color: var(--hl, var(--lh-info));
  background: color-mix(in srgb, var(--hl, var(--lh-info)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hl, var(--lh-info)) 34%, transparent);
}
#leagueHistoryView .lhTag.tone-positive { --hl: var(--lh-good); }
#leagueHistoryView .lhTag.tone-caution { --hl: var(--lh-bad); }
#leagueHistoryView .lhTag.tone-info { --hl: var(--lh-info); }

#leagueHistoryView .lhQuality {
  padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap;
  color: var(--hl, var(--lh-good));
  background: color-mix(in srgb, var(--hl, var(--lh-good)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--hl, var(--lh-good)) 32%, transparent);
}
#leagueHistoryView .lhQuality.tone-positive { --hl: var(--lh-good); }
#leagueHistoryView .lhQuality.tone-warn { --hl: var(--lh-warn); }
#leagueHistoryView .lhQuality.tone-caution { --hl: var(--lh-bad); }

/* Tables */
#leagueHistoryView .lhTableScroll {
  overflow-x: auto; border: 1px solid var(--lh-line); border-radius: 10px;
}
#leagueHistoryView .lhTable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; white-space: nowrap; }
#leagueHistoryView .lhTable th,
#leagueHistoryView .lhTable td {
  padding: 7px 10px; text-align: left;
  border-bottom: 1px solid var(--lh-line);
  font-variant-numeric: tabular-nums;
}
#leagueHistoryView .lhTable thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--lh-card);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted, #8A94A6);
}
#leagueHistoryView .lhTable tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
#leagueHistoryView .lhTable.lhCompact { font-size: 11.5px; }
#leagueHistoryView .lhTable .lhRank { width: 26px; color: var(--muted, #8A94A6); font-weight: 700; }

/* Year-by-year draft archive shown at the bottom of League History. */
#leagueHistoryView .lhDraftYearGrid { display: grid; gap: 9px; }
#leagueHistoryView .lhDraftYear {
  border: 1px solid var(--lh-line); border-radius: 10px;
  background: color-mix(in srgb, var(--lh-card) 72%, transparent);
  overflow: hidden;
}
#leagueHistoryView .lhDraftYear summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer; list-style: none;
}
#leagueHistoryView .lhDraftYear summary::-webkit-details-marker { display: none; }
#leagueHistoryView .lhDraftYear summary::before { content: "▸"; color: var(--lh-info); font-size: 12px; }
#leagueHistoryView .lhDraftYear[open] summary::before { content: "▾"; }
#leagueHistoryView .lhDraftYearTitle { color: var(--head, #F3F6FB); font-weight: 700; font-size: 14px; }
#leagueHistoryView .lhDraftYearMeta { color: var(--muted, #8A94A6); font-size: 11px; }
#leagueHistoryView .lhDraftYear > .lhTableScroll { margin: 0 10px 10px; }
#leagueHistoryView .lhDraftYear .lhTable th,
#leagueHistoryView .lhDraftYear .lhTable td { padding: 6px 9px; }

#leagueHistoryView .lhNewsList { display: grid; gap: 9px; }
#leagueHistoryView .lhNewsItem {
  display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px;
  padding: 12px 14px; border: 1px solid var(--lh-line); border-left: 3px solid var(--lh-info);
  border-radius: 10px; background: var(--lh-card);
}
#leagueHistoryView .lhNewsItem.tone-positive { border-left-color: var(--lh-good); }
#leagueHistoryView .lhNewsItem.tone-neutral { border-left-color: #7C8899; }
#leagueHistoryView .lhNewsDate strong { display: block; color: var(--lh-info); font-size: 16px; }
#leagueHistoryView .lhNewsDate span { display: block; margin-top: 3px; color: var(--muted, #8A94A6); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
#leagueHistoryView .lhNewsItem h4 { margin: 0 0 3px; color: var(--head, #F3F6FB); font-size: 13px; }
#leagueHistoryView .lhNewsItem p { margin: 0; color: var(--muted, #8A94A6); font-size: 11.5px; line-height: 1.45; }

/* Frozen manager column */
#leagueHistoryView .lhSticky {
  position: sticky; left: 0; z-index: 1;
  background: var(--panel, #121826);
}
#leagueHistoryView .lhTable thead .lhSticky { z-index: 3; background: var(--lh-card); }
#leagueHistoryView .lhTable tbody tr:hover .lhSticky { background: #182031; }
#leagueHistoryView .lhStandingsTable tbody tr { cursor: pointer; }

#leagueHistoryView .lhCellBar {
  position: relative; display: flex; align-items: center;
  min-width: 74px; height: 17px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.05); overflow: hidden;
}
#leagueHistoryView .lhCellBar span { position: absolute; inset: 0 auto 0 0; background: rgba(54, 194, 139, 0.28); }
#leagueHistoryView .lhCellBar b { position: relative; padding-left: 6px; font-weight: 600; }

/* --------------------------------------------------------- cards and grids */

#leagueHistoryView .lhCardGrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); gap: 11px;
}
#leagueHistoryView .lhCardGrid.compact { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }

#leagueHistoryView .lhStatCard {
  display: grid; gap: 3px; align-content: start;
  padding: 12px 13px; border-radius: 11px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--hl, var(--lh-info)) 11%, transparent), transparent 62%),
    var(--lh-card);
  border: 1px solid var(--lh-line);
}
#leagueHistoryView .lhStatCard.tone-positive { --hl: var(--lh-good); }
#leagueHistoryView .lhStatCard.tone-caution { --hl: var(--lh-bad); }
#leagueHistoryView .lhStatCard.tone-warn { --hl: var(--lh-warn); }
#leagueHistoryView .lhStatCard.tone-info { --hl: var(--lh-info); }
#leagueHistoryView .lhStatCard.tone-title { --hl: var(--lh-title); }

#leagueHistoryView .lhCardLabel {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted, #8A94A6);
}
#leagueHistoryView .lhCardValue {
  font-family: var(--font-display, inherit);
  font-size: 22px; line-height: 1.12;
  color: var(--hl, var(--lh-info)); font-variant-numeric: tabular-nums;
}
#leagueHistoryView .lhCardUnit { font-size: 11px; color: var(--ink, #EAEEF5); }
#leagueHistoryView .lhStatCard footer {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--lh-line);
}
#leagueHistoryView .lhStatCard footer em { font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }

#leagueHistoryView .lhHeadlineGrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 11px;
}
#leagueHistoryView .lhHeadline {
  display: grid; gap: 7px; align-content: start;
  padding: 13px 14px; border-radius: 11px;
  background: var(--lh-card); border: 1px solid var(--lh-line);
  border-left: 3px solid var(--hl, var(--lh-info));
}
#leagueHistoryView .lhHeadline.tone-positive { --hl: var(--lh-good); }
#leagueHistoryView .lhHeadline.tone-caution { --hl: var(--lh-bad); }
#leagueHistoryView .lhHeadline.tone-warn { --hl: var(--lh-warn); }
#leagueHistoryView .lhHeadline.tone-info { --hl: var(--lh-info); }
#leagueHistoryView .lhHeadline.tone-title { --hl: var(--lh-title); }
#leagueHistoryView .lhHeadlineKicker {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--hl, var(--lh-info));
}
#leagueHistoryView .lhHeadline p { font-size: 12.5px; line-height: 1.5; color: var(--ink, #EAEEF5); }

/* ----------------------------------------------------------- power ranking */

#leagueHistoryView .lhPowerList { display: grid; gap: 7px; }
#leagueHistoryView .lhPowerRow {
  display: grid; grid-template-columns: 32px 1fr; gap: 11px; align-items: center;
  padding: 9px 11px; border-radius: 10px;
  background: var(--lh-card); border: 1px solid var(--lh-line);
  border-left: 3px solid var(--mc, var(--lh-info));
  cursor: pointer;
}
#leagueHistoryView .lhPowerRow:hover { border-color: var(--mc, var(--lh-info)); }
#leagueHistoryView .lhPowerRank {
  display: flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 8px;
  font-size: 13px; font-weight: 700; color: #08111F;
  background: var(--mc, var(--lh-info));
}
#leagueHistoryView .lhPowerName { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
#leagueHistoryView .lhPowerName strong { font-size: 13.5px; color: var(--head, #F3F6FB); }
#leagueHistoryView .lhPowerName b { font-size: 14px; color: var(--mc, var(--lh-info)); font-variant-numeric: tabular-nums; }
#leagueHistoryView .lhPowerBody em { display: block; margin-top: 5px; font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }

/* -------------------------------------------------------------- champions */

#leagueHistoryView .lhChampionGrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 12px;
}
#leagueHistoryView .lhChampionCard {
  display: grid; gap: 10px; align-content: start;
  padding: 14px 15px; border-radius: 13px;
  background:
    linear-gradient(160deg, rgba(167, 139, 250, 0.12), transparent 58%),
    var(--lh-card);
  border: 1px solid color-mix(in srgb, var(--lh-title) 28%, var(--lh-line));
}
#leagueHistoryView .lhChampionCard header { display: flex; align-items: baseline; gap: 10px; }
#leagueHistoryView .lhChampionSeason {
  font-family: var(--font-display, inherit); font-size: 19px;
  color: var(--lh-title); font-variant-numeric: tabular-nums;
}
#leagueHistoryView .lhChampionCard header strong { font-size: 15px; color: var(--head, #F3F6FB); }
#leagueHistoryView .lhChampionStats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0;
}
#leagueHistoryView .lhChampionStats dt {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted, #8A94A6);
}
#leagueHistoryView .lhChampionStats dd {
  margin: 2px 0 0; font-size: 13px; font-weight: 600;
  color: var(--ink, #EAEEF5); font-variant-numeric: tabular-nums;
}
#leagueHistoryView .lhChampionFinal {
  padding: 9px 11px; border-radius: 9px;
  background: rgba(167, 139, 250, 0.1);
  border-left: 3px solid var(--lh-title);
}
#leagueHistoryView .lhChampionFinal span {
  display: block; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted, #8A94A6);
}
#leagueHistoryView .lhChampionFinal strong {
  display: block; font-size: 16px; color: var(--head, #F3F6FB); font-variant-numeric: tabular-nums;
}
#leagueHistoryView .lhChampionFinal em { font-style: normal; font-size: 11px; color: var(--muted, #8A94A6); }
#leagueHistoryView .lhChampionNote { font-size: 11.5px; color: var(--muted, #8A94A6); }
#leagueHistoryView .lhChampionActions { display: flex; flex-wrap: wrap; gap: 7px; }

/* --------------------------------------------------------------- timeline */

#leagueHistoryView .lhTimeline { display: grid; gap: 10px; }
#leagueHistoryView .lhTimelineRow {
  display: grid; grid-template-columns: 62px 1fr; gap: 13px; align-items: start;
  padding: 11px 13px; border-radius: 11px;
  background: var(--lh-card); border: 1px solid var(--lh-line);
}
#leagueHistoryView .lhTimelineSeason {
  font-family: var(--font-display, inherit); font-size: 19px;
  color: var(--lh-info); font-variant-numeric: tabular-nums;
}
#leagueHistoryView .lhTimelineEvents {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
#leagueHistoryView .lhTimelineEvents li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--lh-line);
  font-size: 11.5px; color: var(--ink, #EAEEF5);
}
#leagueHistoryView .lhTimelineEvents i { font-style: normal; }

/* ------------------------------------------------------- expected performance */

#leagueHistoryView .lhExpectedList { display: grid; gap: 9px; }
#leagueHistoryView .lhExpectedRow {
  display: grid; grid-template-columns: 168px minmax(0, 1fr) 260px; gap: 14px; align-items: center;
  padding: 11px 13px; border-radius: 11px;
  background: var(--lh-card); border: 1px solid var(--lh-line);
  border-left: 3px solid var(--mc, var(--lh-info));
}
#leagueHistoryView .lhExpectedName strong { display: block; font-size: 13.5px; color: var(--head, #F3F6FB); margin-bottom: 4px; }
#leagueHistoryView .lhExpectedBars { display: grid; gap: 5px; }
#leagueHistoryView .lhExpBar { display: grid; grid-template-columns: 62px 1fr 52px; gap: 9px; align-items: center; }
#leagueHistoryView .lhExpBar span { font-size: 10.5px; color: var(--muted, #8A94A6); }
#leagueHistoryView .lhExpBar b { font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink, #EAEEF5); }
#leagueHistoryView .lhExpectedNums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#leagueHistoryView .lhExpectedNums dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6); }
#leagueHistoryView .lhExpectedNums dd { margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ink, #EAEEF5); font-variant-numeric: tabular-nums; }

#leagueHistoryView .lhDeltaRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
#leagueHistoryView .lhDelta {
  padding: 9px 11px; border-radius: 9px;
  background: var(--lh-card); border: 1px solid var(--lh-line);
}
#leagueHistoryView .lhDelta span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #8A94A6); }
#leagueHistoryView .lhDelta strong { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
#leagueHistoryView .lhDelta em { font-style: normal; font-size: 10px; color: var(--muted, #8A94A6); }

/* ------------------------------------------------------------------ charts */

#leagueHistoryView .lhChartWrap { position: relative; }
#leagueHistoryView .lhChart {
  width: 100%; height: 210px; overflow: visible;
  border-radius: 10px; background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--lh-line);
}
#leagueHistoryView .lhPlayoffShade { fill: rgba(167, 139, 250, 0.08); }
#leagueHistoryView .lhPlayoffDivider { stroke: var(--lh-title); stroke-width: 0.6; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
#leagueHistoryView .lhSeasonBreak { stroke: var(--lh-line); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
#leagueHistoryView .lhLeagueLine { stroke: #8A94A6; stroke-width: 0.5; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
#leagueHistoryView .lhMeanLine { stroke: var(--lh-info); stroke-width: 0.5; stroke-dasharray: 4 2; vector-effect: non-scaling-stroke; }
#leagueHistoryView .lhLineA { fill: none; stroke: var(--lh-info); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#leagueHistoryView .lhLineB { fill: none; stroke: #F472B6; stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#leagueHistoryView .lhRollLine { fill: none; stroke: var(--lh-good); stroke-width: 1.3; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
#leagueHistoryView .lhDot { fill: var(--lh-info); }
#leagueHistoryView .lhDot.isFlagged { fill: #0A0E16; stroke: var(--lh-warn); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
#leagueHistoryView .lhDot.isHigh { fill: var(--lh-good); }
#leagueHistoryView .lhDot.isLow { fill: var(--lh-bad); }

#leagueHistoryView .lhChartAxis { position: relative; height: 16px; margin-top: 4px; }
#leagueHistoryView .lhChartAxis span {
  position: absolute; transform: translateX(-50%);
  font-size: 9px; color: var(--muted, #8A94A6); white-space: nowrap;
}
#leagueHistoryView .lhChartAxis span.isSeason { color: var(--ink, #EAEEF5); font-weight: 700; }
#leagueHistoryView .lhChartLegend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 10.5px; color: var(--muted, #8A94A6); }
#leagueHistoryView .lhChartLegend span { display: inline-flex; align-items: center; gap: 5px; }
#leagueHistoryView .lhChartLegend i { width: 13px; height: 2px; border-radius: 2px; }
#leagueHistoryView .lhKeyA { background: var(--lh-info); }
#leagueHistoryView .lhKeyB { background: #F472B6; }
#leagueHistoryView .lhKeyRoll { background: var(--lh-good); }
#leagueHistoryView .lhKeyMean { background: var(--lh-info); opacity: 0.6; }
#leagueHistoryView .lhKeyLeague { background: #8A94A6; }
#leagueHistoryView .lhKeyPlayoff { background: rgba(167, 139, 250, 0.45); height: 9px !important; border-radius: 3px; }
#leagueHistoryView .lhKeyFlag { background: transparent; border: 1.5px solid var(--lh-warn); height: 9px !important; width: 9px !important; border-radius: 50%; }

/* --------------------------------------------------------- finish and misc */

#leagueHistoryView .lhFinishDot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700;
  color: var(--muted, #8A94A6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--lh-line);
}
#leagueHistoryView .lhFinishDot.isPlayoff {
  color: var(--lh-info); background: rgba(91, 157, 249, 0.16);
  border-color: color-mix(in srgb, var(--lh-info) 42%, transparent);
}
#leagueHistoryView .lhFinishDot.isChamp {
  color: #08111F; background: var(--lh-title); border-color: var(--lh-title);
}

#leagueHistoryView .lhMiniStats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 9px; margin: 0 0 12px;
}
#leagueHistoryView .lhMiniStats dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6); }
#leagueHistoryView .lhMiniStats dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--ink, #EAEEF5); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- comparison */

#leagueHistoryView .lhCompareHead { display: grid; grid-template-columns: 1fr auto 1fr; gap: 13px; align-items: center; margin-bottom: 12px; }
#leagueHistoryView .lhCompareWho {
  padding: 10px 13px; border-radius: 11px;
  background: color-mix(in srgb, var(--mc, #5B9DF9) 12%, var(--lh-card));
  border: 1px solid color-mix(in srgb, var(--mc, #5B9DF9) 36%, transparent);
}
#leagueHistoryView .lhCompareWho:last-child { text-align: right; }
#leagueHistoryView .lhCompareWho strong { font-size: 15px; color: var(--head, #F3F6FB); }
#leagueHistoryView .lhCompareVs { text-align: center; }
#leagueHistoryView .lhCompareVs span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted, #8A94A6); }
#leagueHistoryView .lhCompareVs strong { display: block; font-size: 17px; color: var(--head, #F3F6FB); font-variant-numeric: tabular-nums; }
#leagueHistoryView .lhCompareVs em { font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }
#leagueHistoryView .lhCompareSummary {
  margin-bottom: 12px; padding: 10px 13px;
  border-left: 3px solid var(--lh-info); border-radius: 0 9px 9px 0;
  background: rgba(91, 157, 249, 0.08);
  font-size: 12.5px; line-height: 1.5; color: var(--ink, #EAEEF5);
}
#leagueHistoryView .lhCompareList { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#leagueHistoryView .lhCompareList li {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) 84px; gap: 11px; align-items: center;
  padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
#leagueHistoryView .lhCompareValue { font-size: 11.5px; font-weight: 600; color: var(--ink, #EAEEF5); font-variant-numeric: tabular-nums; }
#leagueHistoryView .lhCompareValue.left { text-align: right; }
#leagueHistoryView .lhCompareBars { display: grid; grid-template-columns: 1fr 172px 1fr; gap: 8px; align-items: center; }
#leagueHistoryView .lhCompareLabel { font-size: 11px; text-align: center; color: var(--muted, #8A94A6); }
#leagueHistoryView .lhCompareBarWrap { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.05); display: flex; }
#leagueHistoryView .lhCompareBarWrap.left { justify-content: flex-end; }
#leagueHistoryView .lhCompareBarWrap span { display: block; height: 100%; border-radius: 5px; background: var(--mc, #5B9DF9); }

/* -------------------------------------------------------------- rivalries */

#leagueHistoryView .lhMatrixScroll { overflow: auto; max-height: 620px; border: 1px solid var(--lh-line); border-radius: 10px; }
#leagueHistoryView .lhMatrix { border-collapse: separate; border-spacing: 0; font-size: 11.5px; }
#leagueHistoryView .lhMatrix th,
#leagueHistoryView .lhMatrix td {
  padding: 6px 9px; border-bottom: 1px solid var(--lh-line);
  text-align: center; font-variant-numeric: tabular-nums;
}
#leagueHistoryView .lhMatrix thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--lh-card);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted, #8A94A6);
}
#leagueHistoryView .lhMatrix thead th span { display: inline-block; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#leagueHistoryView .lhMatrix tbody th { text-align: left; }
#leagueHistoryView .lhMatrix .lhSticky { position: sticky; left: 0; z-index: 1; background: var(--panel, #121826); }
#leagueHistoryView .lhMatrix thead .lhSticky { z-index: 3; background: var(--lh-card); }
#leagueHistoryView .lhMatrix tbody tr:hover td,
#leagueHistoryView .lhMatrix tbody tr:hover th { background: rgba(255, 255, 255, 0.045); }
#leagueHistoryView .lhMatrix tr.isHighlight td,
#leagueHistoryView .lhMatrix tr.isHighlight th { background: rgba(91, 157, 249, 0.11); }
#leagueHistoryView .lhMatrix td.isHighlight,
#leagueHistoryView .lhMatrix th.isHighlight { background: rgba(91, 157, 249, 0.11); }

#leagueHistoryView .lhMatrixCell { cursor: pointer; }
/* Muted tints: a head-to-head edge is a result, not a verdict on quality. */
#leagueHistoryView .lhMatrixCell.isWin { background: rgba(54, 194, 139, 0.13); color: #8FE3C0; }
#leagueHistoryView .lhMatrixCell.isLoss { background: rgba(236, 106, 96, 0.11); color: #F2A9A3; }
#leagueHistoryView .lhMatrixCell.isEven { background: rgba(255, 255, 255, 0.05); }
#leagueHistoryView .lhMatrixCell.isSelf { background: rgba(255, 255, 255, 0.02); color: #4C5566; cursor: default; }
#leagueHistoryView .lhMatrixCell.isEmpty { color: #4C5566; cursor: default; }

#leagueHistoryView .lhRivalryTop {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center;
  padding: 13px; border-radius: 12px;
  background: var(--lh-card); border: 1px solid var(--lh-line);
  margin-bottom: 13px;
}
#leagueHistoryView .lhRivalryScore {
  text-align: center; padding: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--mc, #5B9DF9) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--mc, #5B9DF9) 34%, transparent);
}
#leagueHistoryView .lhRivalryScore span { display: block; font-size: 11.5px; color: var(--ink, #EAEEF5); }
#leagueHistoryView .lhRivalryScore strong {
  display: block; font-family: var(--font-display, inherit); font-size: 32px;
  color: var(--mc, var(--lh-info)); line-height: 1.1;
}
#leagueHistoryView .lhRivalryMid { text-align: center; display: grid; gap: 3px; justify-items: center; }
#leagueHistoryView .lhRivalryMid span { font-size: 13px; color: var(--head, #F3F6FB); font-variant-numeric: tabular-nums; }
#leagueHistoryView .lhRivalryMid em { font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }

#leagueHistoryView .lhRivalryTimeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#leagueHistoryView .lhRivalryTimeline li {
  display: grid; grid-template-columns: 92px auto 1fr; gap: 11px; align-items: baseline;
  padding: 7px 11px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--muted, #8A94A6);
}
#leagueHistoryView .lhRivalryTimeline li.won { border-left-color: var(--lh-good); }
#leagueHistoryView .lhRivalryTimeline li.lost { border-left-color: var(--lh-bad); }
#leagueHistoryView .lhRivalryTimeline span { font-size: 11px; color: var(--muted, #8A94A6); }
#leagueHistoryView .lhRivalryTimeline strong { font-size: 13px; color: var(--head, #F3F6FB); font-variant-numeric: tabular-nums; }
#leagueHistoryView .lhRivalryTimeline em { font-style: normal; font-size: 11px; color: var(--muted, #8A94A6); }

#leagueHistoryView .lhH2HList { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
#leagueHistoryView .lhH2HList li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
  padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); font-size: 12px;
}
#leagueHistoryView .lhH2HList b { font-variant-numeric: tabular-nums; }
#leagueHistoryView .lhH2HList em { font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }

/* ---------------------------------------------------------------- records */

#leagueHistoryView .lhRecordSplit {
  display: grid; grid-template-columns: minmax(220px, 0.85fr) minmax(0, 2fr); gap: 13px; align-items: start;
}
#leagueHistoryView .lhTwoUp { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 13px; }
#leagueHistoryView .lhFeatured {
  display: grid; gap: 4px; align-content: start;
  padding: 15px 16px; border-radius: 12px;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--hl, var(--lh-info)) 15%, transparent), transparent 62%),
    var(--lh-card);
  border: 1px solid color-mix(in srgb, var(--hl, var(--lh-info)) 26%, var(--lh-line));
}
#leagueHistoryView .lhFeatured.tone-positive { --hl: var(--lh-good); }
#leagueHistoryView .lhFeatured.tone-caution { --hl: var(--lh-bad); }
#leagueHistoryView .lhFeatured.tone-warn { --hl: var(--lh-warn); }
#leagueHistoryView .lhFeatured.tone-info { --hl: var(--lh-info); }
#leagueHistoryView .lhFeatured.tone-title { --hl: var(--lh-title); }
#leagueHistoryView .lhFeaturedValue {
  font-family: var(--font-display, inherit);
  font-size: 32px; line-height: 1.06;
  color: var(--hl, var(--lh-info)); font-variant-numeric: tabular-nums;
}
#leagueHistoryView .lhFeatured footer {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lh-line);
  font-size: 11px;
}
#leagueHistoryView .lhFeatured footer em { font-style: normal; font-weight: 600; color: var(--ink, #EAEEF5); }
#leagueHistoryView .lhFeatured footer span { color: var(--muted, #8A94A6); }
#leagueHistoryView .lhDQBody p { font-size: 12px; line-height: 1.55; color: var(--muted, #8A94A6); }
#leagueHistoryView .lhDQBody b { color: var(--ink, #EAEEF5); }

/* ----------------------------------------------------------------- drawer */

#leagueHistoryView .lhDrawerBackdrop {
  position: fixed; inset: 0; background: rgba(4, 8, 14, 0.66);
  backdrop-filter: blur(2px); z-index: 120;
}
#leagueHistoryView .lhDrawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(620px, 95vw);
  display: flex; flex-direction: column;
  background: var(--panel, #121826);
  border-left: 1px solid var(--lh-line);
  box-shadow: -24px 0 68px rgba(0, 0, 0, 0.56);
  z-index: 121;
}
#leagueHistoryView .lhDrawerHead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--lh-line);
  background: color-mix(in srgb, var(--mc, #5B9DF9) 13%, transparent);
}
#leagueHistoryView .lhDrawerHead strong { display: block; font-size: 17px; color: var(--head, #F3F6FB); }
#leagueHistoryView .lhDrawerHead em { font-style: normal; font-size: 12px; color: var(--muted, #8A94A6); }
#leagueHistoryView .lhDrawerBody { padding: 16px 18px 26px; overflow-y: auto; display: grid; gap: 12px; align-content: start; }
#leagueHistoryView .lhDrawerBody h4 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted, #8A94A6); margin: 6px 0 0;
}
#leagueHistoryView .lhDrawerActions { margin-top: 8px; }

/* ---------------------------------------------------------------- Section 26 */

@media (max-width: 1200px) {
  #leagueHistoryView .lhHeroStats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #leagueHistoryView .lhExpectedRow { grid-template-columns: 1fr; }
  #leagueHistoryView .lhRecordSplit { grid-template-columns: 1fr; }
  #leagueHistoryView .lhChampionStats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  #leagueHistoryView .lhCompareBars { grid-template-columns: 1fr 118px 1fr; }
  #leagueHistoryView .lhTimelineRow { grid-template-columns: 1fr; }
  #leagueHistoryView .lhRivalryTop { grid-template-columns: 1fr; }
  #leagueHistoryView .lhExpectedNums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #leagueHistoryView .lhNewsItem { grid-template-columns: 1fr; gap: 5px; }
}

@media (max-width: 720px) {
  #leagueHistoryView .lhSection { padding: 13px 12px; }
  #leagueHistoryView .lhHero { padding: 15px 13px; }
  #leagueHistoryView .lhHeroStats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #leagueHistoryView .lhSectionHead { flex-direction: column; align-items: flex-start; }
  #leagueHistoryView .lhHeroActions { justify-items: start; }

  /* Filters collapse to a scrollable strip on a phone. */
  #leagueHistoryView .lhFilterRow { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  #leagueHistoryView .lhSelect { flex: 0 0 auto; }

  /* The matrix is unusable at phone width; the rivalry detail below covers it. */
  #leagueHistoryView .lhMatrixScroll { max-height: 340px; }
  #leagueHistoryView .lhMatrix thead th span { max-width: 40px; }

  #leagueHistoryView .lhCompareList li { grid-template-columns: 1fr; gap: 3px; }
  #leagueHistoryView .lhCompareValue.left { text-align: left; }
  #leagueHistoryView .lhCompareBars { grid-template-columns: 1fr; }
  #leagueHistoryView .lhCompareBarWrap.left { justify-content: flex-start; }
  #leagueHistoryView .lhCompareHead { grid-template-columns: 1fr; }
  #leagueHistoryView .lhCompareWho:last-child { text-align: left; }
  #leagueHistoryView .lhChampionGrid { grid-template-columns: 1fr; }
  #leagueHistoryView .lhTwoUp { grid-template-columns: 1fr; }
  #leagueHistoryView .lhChart { height: 165px; }
  #leagueHistoryView .lhExpBar { grid-template-columns: 52px 1fr 46px; }
}


/* ============================================================================
   COMPARE — decision-first workspace
   Player A and Player B keep one colour across every visual on the page:
   bars, matrix, scatter, range chart, trend lines, radar and cards.
   ========================================================================== */

#compareView {
  --cmp-a: #5B9DF9;
  --cmp-b: #F2B441;
  --cmp-good: var(--good, #36C28B);
  --cmp-bad: var(--bad, #EC6A60);
  --cmp-warn: var(--warn, #F2B441);
  --cmp-line: var(--line, #232C3D);
  --cmp-card: var(--panel-soft, #18202F);
}

#compareView .cmpFlow { display: flex; flex-direction: column; gap: 15px; }
#compareView .cmpResearchDetail { display: flex; flex-direction: column; gap: 15px; }
#compareView .playerA { color: var(--cmp-a); }
#compareView .playerB { color: var(--cmp-b); }
#compareView .tone-positive { color: var(--cmp-good); }
#compareView .tone-caution { color: var(--cmp-bad); }
#compareView .tone-warn { color: var(--cmp-warn); }
#compareView .tone-keeper { color: var(--keeper, #C9A24B); }
#compareView .tone-muted { color: var(--muted, #8A94A6); }

#compareView .cmpEyebrow {
  display: block; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted, #8A94A6); margin-bottom: 4px;
}
#compareView .cmpNote { margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--muted, #8A94A6); }
#compareView .cmpEmpty {
  margin: 6px 0; padding: 9px 12px; border: 1px dashed var(--cmp-line);
  border-radius: 8px; font-size: 12px; color: var(--muted, #8A94A6);
}

/* ---------------------------------------------------------------- Section 1 */

#compareView .cmpControls {
  display: grid; gap: 9px;
  padding: 11px 13px; border-radius: 12px;
  background: var(--cmp-card); border: 1px solid var(--cmp-line);
}
#compareView .cmpControlMain {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 11px; align-items: end;
}
#compareView .cmpPlayerControl { display: grid; gap: 4px; min-width: 0; }
#compareView .cmpPlayerLabel {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #8A94A6);
}
#compareView .cmpPlayerControl.side-A .cmpPlayerLabel { color: var(--cmp-a); }
#compareView .cmpPlayerControl.side-B .cmpPlayerLabel { color: var(--cmp-b); }
#compareView .cmpPlayerSearch,
#compareView .cmpPlayerControl select {
  width: 100%; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--cmp-line); background: var(--panel, #121826);
  color: var(--ink, #EAEEF5); font-size: 13px;
}
#compareView .cmpPlayerControl.side-A select { border-left: 3px solid var(--cmp-a); }
#compareView .cmpPlayerControl.side-B select { border-left: 3px solid var(--cmp-b); }
#compareView .cmpSwap {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--cmp-line); background: var(--panel, #121826);
  color: var(--ink, #EAEEF5); font-size: 17px; line-height: 1;
}
#compareView .cmpSwap:hover { border-color: var(--cmp-a); color: var(--cmp-a); }
#compareView .cmpControlSecondary {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
  padding-top: 8px; border-top: 1px solid var(--cmp-line);
}
#compareView .cmpSelect {
  display: inline-flex; flex-direction: column; gap: 3px;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6);
}
#compareView .cmpSelect select {
  padding: 5px 9px; border-radius: 8px; border: 1px solid var(--cmp-line);
  background: var(--panel, #121826); color: var(--ink, #EAEEF5);
  font-size: 12px; text-transform: none; letter-spacing: 0;
}
#compareView .cmpGhostButton {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--cmp-line);
  background: var(--panel, #121826); color: var(--ink, #EAEEF5); font-size: 12px; cursor: pointer;
}
#compareView .cmpGhostButton:hover:not(:disabled) { border-color: var(--cmp-a); color: var(--cmp-a); }
#compareView .cmpGhostButton:disabled { opacity: 0.45; cursor: not-allowed; }
#compareView .cmpGhostButton.small { padding: 4px 10px; font-size: 11px; }
#compareView .cmpPrimaryButton {
  padding: 7px 15px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--cmp-a); color: #08111F; font-size: 12.5px; font-weight: 600;
}

/* ------------------------------------------------------------- Sections 2-3 */

#compareView .cmpHero {
  display: grid; gap: 13px;
  padding: 17px 19px; border-radius: 17px;
  border: 1px solid var(--cmp-line);
  background:
    radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--cmp-win, var(--cmp-a)) 16%, transparent), transparent 58%),
    var(--panel, #121826);
}
#compareView .cmpHero.winA { --cmp-win: var(--cmp-a); }
#compareView .cmpHero.winB { --cmp-win: var(--cmp-b); }
#compareView .cmpHero.winNone { --cmp-win: #8A94A6; }

#compareView .cmpUnavailableBanner {
  display: grid; gap: 3px; padding: 10px 13px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--keeper, #C9A24B) 40%, transparent);
  background: rgba(201, 162, 75, 0.11);
}
#compareView .cmpUnavailableBanner strong { color: var(--keeper, #C9A24B); font-size: 13px; }
#compareView .cmpUnavailableBanner span { font-size: 12px; line-height: 1.5; color: var(--ink, #EAEEF5); }

#compareView .cmpHeroTop { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: 18px; }
#compareView .cmpHeroVerdict h2 {
  font-family: var(--font-display, inherit);
  font-size: clamp(21px, 2.6vw, 30px); line-height: 1.08;
  letter-spacing: -0.02em; color: var(--head, #F3F6FB);
}
#compareView .cmpHeroLevels { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 12px; }
#compareView .cmpEdge { font-weight: 700; color: var(--cmp-win, var(--cmp-a)); }
#compareView .cmpDot { color: var(--muted, #8A94A6); }
#compareView .cmpConfidence { color: var(--muted, #8A94A6); }
#compareView .cmpConfidence.conf-high { color: var(--cmp-good); }
#compareView .cmpConfidence.conf-moderate { color: var(--cmp-warn); }
#compareView .cmpConfidence.conf-low { color: var(--cmp-bad); }
#compareView .cmpMarket { color: var(--muted, #8A94A6); }
#compareView .cmpMarket.agrees { color: var(--cmp-good); }
#compareView .cmpMarket.disagrees { color: var(--cmp-warn); }
#compareView .cmpHeroExplain {
  margin-top: 9px; font-size: 13.5px; line-height: 1.55; color: var(--ink, #EAEEF5);
  border-left: 3px solid var(--cmp-win, var(--cmp-a)); padding-left: 11px; max-width: 76ch;
}
#compareView .cmpMyRanksNote {
  margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--cmp-warn);
}

#compareView .cmpHeroSide { display: grid; gap: 8px; align-content: start; }
#compareView .cmpSourceChip {
  padding: 8px 11px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--cmp-line);
}
#compareView .cmpSourceChip span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6); }
#compareView .cmpSourceChip strong { font-size: 12.5px; color: var(--ink, #EAEEF5); }
#compareView .cmpAvailRow {
  display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center;
  padding: 8px 11px; border-radius: 9px;
  background: var(--cmp-card); border: 1px solid var(--cmp-line);
}
#compareView .cmpAvailRow.playerA { border-left: 3px solid var(--cmp-a); }
#compareView .cmpAvailRow.playerB { border-left: 3px solid var(--cmp-b); }
#compareView .cmpAvailRow strong { font-size: 12.5px; color: var(--head, #F3F6FB); }
#compareView .cmpAvailRow em { grid-column: 1 / -1; font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }
#compareView .cmpAvailTag {
  padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap;
  color: var(--hl, var(--muted));
  background: color-mix(in srgb, var(--hl, var(--muted, #8A94A6)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hl, var(--muted, #8A94A6)) 34%, transparent);
}
#compareView .cmpAvailTag.tone-positive { --hl: var(--cmp-good); }
#compareView .cmpAvailTag.tone-caution { --hl: var(--cmp-bad); }
#compareView .cmpAvailTag.tone-keeper { --hl: var(--keeper, #C9A24B); }
#compareView .cmpAvailTag.tone-muted { --hl: var(--muted, #8A94A6); }

#compareView .cmpDecisionCards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#compareView .cmpDecisionCard {
  display: grid; gap: 2px; padding: 11px 13px; border-radius: 11px;
  background: var(--cmp-card); border: 1px solid var(--cmp-line);
  border-top: 2px solid var(--hl, var(--cmp-a));
}
#compareView .cmpDecisionCard.tone-primary { --hl: var(--cmp-win, var(--cmp-a)); }
#compareView .cmpDecisionCard.tone-positive { --hl: var(--cmp-good); }
#compareView .cmpDecisionCard.tone-upside { --hl: var(--cmp-b); }
#compareView .cmpDecisionCard.tone-neutral { --hl: #8A94A6; }
#compareView .cmpDecisionCard span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #8A94A6); }
#compareView .cmpDecisionCard strong { font-size: 15px; color: var(--head, #F3F6FB); line-height: 1.2; }
#compareView .cmpDecisionCard em { font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }

#compareView .cmpHeroActions { display: flex; flex-wrap: wrap; gap: 8px; }

#compareView .cmpDisclosure {
  border: 1px solid var(--cmp-line); border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
#compareView .cmpDisclosure summary {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 13px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  color: var(--ink, #EAEEF5); list-style: revert;
}
#compareView .cmpDisclosure summary em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--muted, #8A94A6); }
#compareView .cmpDisclosureBody { padding: 4px 13px 13px; }

#compareView .cmpWeightList { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
#compareView .cmpWeightList li { display: grid; grid-template-columns: 150px 1fr 42px; gap: 10px; align-items: center; font-size: 12px; }
#compareView .cmpWeightList b { text-align: right; font-variant-numeric: tabular-nums; }

#compareView .cmpBarTrack {
  position: relative; height: 8px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.07); overflow: hidden;
}
#compareView .cmpBarTrack > span { display: block; height: 100%; border-radius: 5px; background: var(--cmp-a); }
#compareView .cmpBarTrack > span.playerA { background: var(--cmp-a); }
#compareView .cmpBarTrack > span.playerB { background: var(--cmp-b); }

/* --------------------------------------------------------- section scaffold */

#compareView .cmpSection {
  padding: 15px 17px; border-radius: 13px;
  border: 1px solid var(--cmp-line); background: var(--panel, #121826);
}
#compareView .cmpSectionHead {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: space-between;
  margin-bottom: 13px; padding-bottom: 10px; border-bottom: 1px solid var(--cmp-line);
}
#compareView .cmpSectionHead h3 { font-family: var(--font-display, inherit); font-size: 16px; color: var(--head, #F3F6FB); }
#compareView .cmpSectionHead > div > p { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--muted, #8A94A6); max-width: 88ch; }
#compareView .cmpTwoCol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; align-items: start; }

#compareView .cmpSegmented {
  display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--cmp-line);
  border-radius: 9px; background: rgba(0, 0, 0, 0.22);
}
#compareView .cmpSegmented button {
  padding: 5px 11px; border: 0; border-radius: 7px; background: none;
  color: var(--muted, #8A94A6); font-size: 11.5px; cursor: pointer;
}
#compareView .cmpSegmented button.active { background: var(--cmp-a); color: #08111F; font-weight: 600; }

/* ---------------------------------------------------------------- Section 4 */

#compareView .cmpMatrix { display: grid; gap: 6px; }
#compareView .cmpMatrixHead,
#compareView .cmpMatrixRow {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 12px; align-items: center;
}
#compareView .cmpMatrixHead {
  padding: 0 12px 5px; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted, #8A94A6);
}
#compareView .cmpMatrixRow {
  padding: 10px 12px; border-radius: 10px;
  background: var(--cmp-card); border: 1px solid var(--cmp-line);
  border-left: 3px solid transparent;
}
#compareView .cmpMatrixRow.winA { border-left-color: var(--cmp-a); }
#compareView .cmpMatrixRow.winB { border-left-color: var(--cmp-b); }
#compareView .cmpMatrixRow.isEven { border-left-color: #6B7688; }
#compareView .cmpMatrixRow.isLimited { opacity: 0.62; border-left-style: dashed; border-left-color: var(--cmp-warn); }
#compareView .cmpMatrixLabel strong { display: block; font-size: 13px; color: var(--head, #F3F6FB); }
#compareView .cmpMatrixLabel em { font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }
#compareView .cmpMatrixValue { display: grid; gap: 5px; }
#compareView .cmpMatrixValue b { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink, #EAEEF5); }
#compareView .cmpMatrixValue.isWinner b { color: var(--head, #F3F6FB); font-weight: 700; }
#compareView .cmpMatrixEdge { display: grid; gap: 3px; }
#compareView .cmpEdgeTag {
  justify-self: start; padding: 2px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
#compareView .cmpEdgeTag.a { background: color-mix(in srgb, var(--cmp-a) 18%, transparent); color: var(--cmp-a); }
#compareView .cmpEdgeTag.b { background: color-mix(in srgb, var(--cmp-b) 18%, transparent); color: var(--cmp-b); }
#compareView .cmpEdgeTag.even { background: rgba(255, 255, 255, 0.07); color: var(--muted, #8A94A6); }
#compareView .cmpEdgeTag.limited { background: rgba(242, 180, 65, 0.14); color: var(--cmp-warn); }
#compareView .cmpMatrixEdge em { font-style: normal; font-size: 11px; color: var(--muted, #8A94A6); }

/* --------------------------------------------------------------- charts */

#compareView .cmpChartCard {
  padding: 11px; border-radius: 11px;
  background: rgba(0, 0, 0, 0.18); border: 1px solid var(--cmp-line);
}
#compareView .cmpScatterSvg, #compareView .cmpRangeSvg, #compareView .cmpTrendSvg { width: 100%; height: auto; overflow: visible; }
#compareView .cmpQuadLine { stroke: var(--cmp-line); stroke-width: 1; stroke-dasharray: 4 3; }
#compareView .cmpQuadLabel { font-size: 9px; fill: #6B7688; text-transform: uppercase; letter-spacing: 0.06em; }
#compareView .cmpQuadLabel.isGood { fill: var(--cmp-good); }
#compareView .cmpQuadLabel.isBad { fill: var(--cmp-bad); }
#compareView .cmpPreferArrow { stroke: var(--cmp-good); stroke-width: 1.4; opacity: 0.6; }
#compareView .cmpArrowHead { fill: var(--cmp-good); opacity: 0.6; }
#compareView .cmpAxisTitle { font-size: 10px; fill: var(--muted, #8A94A6); }
#compareView .cmpScatterPoint circle { stroke: #0A0E16; stroke-width: 2; }
#compareView .cmpScatterPoint.playerA circle { fill: var(--cmp-a); }
#compareView .cmpScatterPoint.playerB circle { fill: var(--cmp-b); }
#compareView .cmpScatterPoint text { font-size: 11px; font-weight: 600; fill: var(--ink, #EAEEF5); }
#compareView .cmpScatterAvg circle { fill: #6B7688; opacity: 0.75; }
#compareView .cmpScatterAvg text { font-size: 9.5px; fill: var(--muted, #8A94A6); }

#compareView .cmpRangeScale {
  display: flex; justify-content: space-between; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #8A94A6); margin-bottom: 6px;
}
#compareView .cmpRangeSummary {
  margin-bottom: 11px; padding: 9px 12px; border-radius: 9px;
  background: rgba(91, 157, 249, 0.08); border-left: 3px solid var(--cmp-a);
  font-size: 12.5px; line-height: 1.5; color: var(--ink, #EAEEF5);
}
#compareView .cmpRangeGrid { stroke: rgba(255, 255, 255, 0.06); }
#compareView .cmpRangeTick { font-size: 9px; fill: var(--muted, #8A94A6); }
#compareView .cmpRangeOverlap { fill: rgba(255, 255, 255, 0.05); }
#compareView .cmpRangeRow.playerA .cmpRangeBar { fill: color-mix(in srgb, var(--cmp-a) 42%, transparent); }
#compareView .cmpRangeRow.playerB .cmpRangeBar { fill: color-mix(in srgb, var(--cmp-b) 42%, transparent); }
#compareView .cmpRangeRow.playerA .cmpRangeCap { stroke: var(--cmp-a); stroke-width: 2; }
#compareView .cmpRangeRow.playerB .cmpRangeCap { stroke: var(--cmp-b); stroke-width: 2; }
#compareView .cmpRangeRow.playerA .cmpRangeProj { fill: var(--cmp-a); }
#compareView .cmpRangeRow.playerB .cmpRangeProj { fill: var(--cmp-b); }
#compareView .cmpRangeName { font-size: 11.5px; font-weight: 600; fill: var(--ink, #EAEEF5); }
#compareView .cmpRangeVal { font-size: 9.5px; fill: var(--muted, #8A94A6); }
#compareView .cmpAxisLabel { text-align: center; font-size: 10px; color: var(--muted, #8A94A6); margin-top: 4px; }

#compareView .cmpStatRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 9px; margin-top: 11px; }
#compareView .cmpStat { padding: 8px 10px; border-radius: 9px; background: var(--cmp-card); border: 1px solid var(--cmp-line); }
#compareView .cmpStat dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6); }
#compareView .cmpStat dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--head, #F3F6FB); font-variant-numeric: tabular-nums; }
#compareView .cmpStat em { font-style: normal; font-size: 10px; color: var(--muted, #8A94A6); }

#compareView .cmpChartLegend { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 8px; font-size: 11px; }
#compareView .cmpChartLegend span { display: inline-flex; align-items: center; gap: 5px; }
#compareView .cmpChartLegend span::before { content: ""; width: 11px; height: 3px; border-radius: 2px; background: currentColor; }
#compareView .cmpChartLegend .cmpKeyMean { color: var(--muted, #8A94A6); }

/* ---------------------------------------------------------------- Section 5 */

#compareView .cmpRadarWrap { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
#compareView .cmpRadarSvg { width: 100%; height: auto; }
#compareView .cmpRadarGrid { fill: none; stroke: rgba(255, 255, 255, 0.07); }
#compareView .cmpRadarGrid.isOuter { stroke: rgba(255, 255, 255, 0.16); }
#compareView .cmpRadarSpoke { stroke: rgba(255, 255, 255, 0.08); }
#compareView .cmpRadarAxis { font-size: 10px; fill: var(--muted, #8A94A6); }
#compareView .cmpRadarArea { fill-opacity: 0.16; stroke-width: 2; }
#compareView .cmpRadarArea.playerA { fill: var(--cmp-a); stroke: var(--cmp-a); }
#compareView .cmpRadarArea.playerB { fill: var(--cmp-b); stroke: var(--cmp-b); }
#compareView .cmpRadarDot.playerA { fill: var(--cmp-a); }
#compareView .cmpRadarDot.playerB { fill: var(--cmp-b); }

/* ---------------------------------------------------------------- Section 8 */

#compareView .cmpCaseGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
#compareView .cmpCase {
  display: grid; gap: 11px; align-content: start;
  padding: 14px 15px; border-radius: 12px;
  background: var(--cmp-card); border: 1px solid var(--cmp-line);
  border-top: 3px solid var(--hl);
}
#compareView .cmpCase.playerA { --hl: var(--cmp-a); }
#compareView .cmpCase.playerB { --hl: var(--cmp-b); }
#compareView .cmpCase.isWinner { box-shadow: 0 0 0 1px color-mix(in srgb, var(--hl) 40%, transparent); }
#compareView .cmpCase header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
#compareView .cmpCase header strong { display: block; font-size: 16px; color: var(--head, #F3F6FB); }
#compareView .cmpCase header em { font-style: normal; font-size: 11.5px; color: var(--muted, #8A94A6); }
#compareView .cmpRanks, #compareView .cmpKeyMetrics, #compareView .cmpMiniStats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin: 0;
}
#compareView .cmpRanks dt, #compareView .cmpKeyMetrics dt, #compareView .cmpMiniStats dt {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6);
}
#compareView .cmpRanks dd, #compareView .cmpKeyMetrics dd, #compareView .cmpMiniStats dd {
  margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--ink, #EAEEF5); font-variant-numeric: tabular-nums;
}
#compareView .cmpCaseBody { display: grid; gap: 7px; }
#compareView .cmpCaseBody p { font-size: 12.5px; line-height: 1.45; color: var(--ink, #EAEEF5); }
#compareView .cmpCaseBody span {
  display: block; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted, #8A94A6); margin-bottom: 2px;
}
#compareView .cmpCaseActions { display: flex; gap: 7px; flex-wrap: wrap; }

/* --------------------------------------------------------------- Section 11 */

#compareView .cmpSeasonBreak { stroke: var(--cmp-line); stroke-width: 1.4; }
#compareView .cmpZeroLine { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
#compareView .cmpTrendLine { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
#compareView .cmpTrendLine.playerA { stroke: var(--cmp-a); }
#compareView .cmpTrendLine.playerB { stroke: var(--cmp-b); }
#compareView .cmpTrendPoint { stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
#compareView .cmpTrendPoint.playerA { stroke: var(--cmp-a); }
#compareView .cmpTrendPoint.playerB { stroke: var(--cmp-b); }
#compareView .cmpTrendDot.playerA { fill: var(--cmp-a); }
#compareView .cmpTrendDot.playerB { fill: var(--cmp-b); }
#compareView .cmpMeanLine { stroke-dasharray: 4 3; stroke-width: 1; opacity: 0.55; }
#compareView .cmpMeanLine.playerA { stroke: var(--cmp-a); }
#compareView .cmpMeanLine.playerB { stroke: var(--cmp-b); }
#compareView .cmpDiffBar.isA { fill: var(--cmp-a); }
#compareView .cmpDiffBar.isB { fill: var(--cmp-b); }
#compareView .cmpProjMark.playerA circle { fill: var(--cmp-a); }
#compareView .cmpProjMark.playerB circle { fill: var(--cmp-b); }
#compareView .cmpProjMark text { font-size: 9px; fill: var(--muted, #8A94A6); }
#compareView .cmpTrendAxis { position: relative; height: 15px; margin-top: 3px; }
#compareView .cmpTrendAxis span {
  position: absolute; transform: translateX(-50%); font-size: 9px;
  color: var(--muted, #8A94A6); white-space: nowrap;
}
#compareView .cmpTrendAxis span.isSeason { color: var(--ink, #EAEEF5); font-weight: 700; }
#compareView .cmpSplitCharts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
#compareView .cmpSplitChart h5 { font-size: 12px; color: var(--head, #F3F6FB); margin-bottom: 5px; }
#compareView .cmpSplitSvg { width: 100%; height: 90px; background: rgba(0, 0, 0, 0.18); border-radius: 8px; border: 1px solid var(--cmp-line); }
#compareView .cmpSplitChart em { display: block; margin-top: 5px; font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }

/* --------------------------------------------------------------- Section 13 */

#compareView .cmpTeamTotals {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 13px; align-items: center;
  padding: 11px 13px; border-radius: 11px; background: var(--cmp-card);
  border: 1px solid var(--cmp-line); margin-bottom: 12px;
}
#compareView .cmpTeamTotals > div { text-align: center; }
#compareView .cmpTeamTotals span { display: block; font-size: 11.5px; color: var(--ink, #EAEEF5); }
#compareView .cmpTeamTotals strong { display: block; font-family: var(--font-display, inherit); font-size: 26px; }
#compareView .cmpTeamTotals .playerA strong { color: var(--cmp-a); }
#compareView .cmpTeamTotals .playerB strong { color: var(--cmp-b); }
#compareView .cmpTeamTotals em { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6); }
#compareView .cmpTeamParts { display: grid; gap: 8px; }
#compareView .cmpTeamPart {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 13px; align-items: center;
  padding: 9px 12px; border-radius: 9px; background: var(--cmp-card); border: 1px solid var(--cmp-line);
}
#compareView .cmpTeamPartLabel strong { display: block; font-size: 12.5px; color: var(--head, #F3F6FB); }
#compareView .cmpTeamPartLabel em { font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }
#compareView .cmpTeamPartBars { display: grid; gap: 5px; }
#compareView .cmpTeamPartBars > div { display: grid; grid-template-columns: 46px 1fr; gap: 9px; align-items: center; }
#compareView .cmpTeamPartBars b { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink, #EAEEF5); }

/* --------------------------------------------------------------- Section 14 */

#compareView .cmpSharedPos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 13px; margin-bottom: 13px; }
#compareView .cmpSharedPosBlock { padding: 12px 14px; border-radius: 11px; background: var(--cmp-card); border: 1px solid var(--cmp-line); }
#compareView .cmpSharedPosBlock h5 { font-size: 13px; color: var(--head, #F3F6FB); margin-bottom: 8px; }
#compareView .cmpMiniLabel { display: block; margin: 10px 0 5px; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6); }
#compareView .cmpTopList { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#compareView .cmpTopList li { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: baseline; font-size: 11.5px; color: var(--ink, #EAEEF5); }
#compareView .cmpTopList b { color: var(--muted, #8A94A6); font-variant-numeric: tabular-nums; }
#compareView .cmpTopList em { font-style: normal; font-size: 10px; color: var(--muted, #8A94A6); }
#compareView .cmpPosSpecific { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
#compareView .cmpPosCard { padding: 12px 14px; border-radius: 11px; background: var(--cmp-card); border: 1px solid var(--cmp-line); border-top: 3px solid var(--hl); }
#compareView .cmpPosCard.playerA { --hl: var(--cmp-a); }
#compareView .cmpPosCard.playerB { --hl: var(--cmp-b); }
#compareView .cmpPosCard strong { display: block; font-size: 13.5px; color: var(--head, #F3F6FB); margin-bottom: 8px; }
#compareView .cmpDeepCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 13px; margin-top: 11px; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  #compareView .cmpTwoCol { grid-template-columns: 1fr; }
  #compareView .cmpHeroTop { grid-template-columns: 1fr; }
  #compareView .cmpDecisionCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #compareView .cmpRadarWrap { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  #compareView .cmpMatrixHead { display: none; }
  #compareView .cmpMatrixRow { grid-template-columns: 1fr 1fr; gap: 8px; }
  #compareView .cmpMatrixLabel, #compareView .cmpMatrixEdge { grid-column: 1 / -1; }
  #compareView .cmpCaseGrid, #compareView .cmpPosSpecific, #compareView .cmpSplitCharts { grid-template-columns: 1fr; }
  #compareView .cmpTeamPart { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  #compareView .cmpSection { padding: 12px 12px; }
  #compareView .cmpHero { padding: 14px 13px; }
  #compareView .cmpControlMain { grid-template-columns: 1fr; }
  #compareView .cmpSwap { justify-self: center; width: 100%; height: 32px; }
  #compareView .cmpDecisionCards { grid-template-columns: 1fr; }
  #compareView .cmpTeamTotals { grid-template-columns: 1fr; }
  #compareView .cmpWeightList li { grid-template-columns: 110px 1fr 38px; }
  #compareView .cmpControlSecondary { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
}


/* ============================================================================
   COMPARE — refinement pass
   ----------------------------------------------------------------------------
   ROOT CAUSE of the stretched-chip bug: .comparePlayerCard is `display: grid`
   with only implicit auto rows. When it sat inside a grid container that left
   `align-items` at its default of `stretch`, the shorter card was stretched to
   the taller sibling height; grid default `align-content: stretch` then
   distributed that leftover height equally across EVERY row, including the chip
   row. That is why chips became tall capsules and Primary Edge / Draft Read
   grew hundreds of pixels of dead space. The old .compareGrid had
   `align-items: start`, which is why the bug only appeared in the new layout.
   Both halves are pinned below so the pattern cannot come back.
   ========================================================================== */

#compareView .cmpDeepCards,
#compareView .cmpCaseGrid,
#compareView .cmpPosSpecific,
#compareView .cmpSplitCharts,
#compareView .cmpTwoCol {
  align-items: start;
}

/* Defensive: even if a card is stretched by an ancestor, its rows stay
   content-sized instead of absorbing the leftover height. */
#compareView .comparePlayerCard,
#compareView .cmpCase,
#compareView .cmpPosCard {
  align-content: start;
  align-self: start;
  height: auto;
  min-height: 0;
}
#compareView .comparePlayerCard > *,
#compareView .cmpCase > * { min-height: 0; }
#compareView .compareThesisTags { align-items: center; }
#compareView .compareThesisTags span { align-self: center; height: auto; }

/* ------------------------------------------------------- chart sizing -------
   Weekly chart before: 220-unit viewBox in an unconstrained card that grew to
   roughly a full viewport. After: plot capped at 250px, card near 360px. */
#compareView .cmpTrendSvg { height: 250px; max-height: 250px; }
#compareView .cmpScatterSvg { height: 268px; max-height: 268px; }
#compareView .cmpRangeSvg { height: 200px; max-height: 200px; }
#compareView .cmpChartCard { padding: 9px 10px; }
#compareView .cmpProjDot.playerA { fill: var(--cmp-a); }
#compareView .cmpProjDot.playerB { fill: var(--cmp-b); }
#compareView .cmpQuadLabel { font-size: 8px; }
#compareView .cmpTrendDot { opacity: 0.85; }

#compareView [data-cmp-disclosure="trends"] .cmpSectionHead { padding-bottom: 8px; margin-bottom: 10px; }
#compareView [data-cmp-disclosure="trends"] .cmpChartLegend { margin-top: 6px; font-size: 10px; }

/* ------------------------------------------------------ hero density -------- */

#compareView .cmpHero { gap: 11px; padding: 15px 17px; }
#compareView .cmpUnavailableBanner {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  padding: 7px 11px; font-size: 11.5px;
}
#compareView .cmpUnavailableBanner strong { font-size: 12px; }
#compareView .cmpUnavailableBanner span { font-size: 11.5px; }
#compareView .cmpDecisionCard { padding: 9px 11px; gap: 1px; }
#compareView .cmpDecisionCard strong { font-size: 14px; }
#compareView .cmpHeroActions { gap: 7px; }
#compareView .cmpSourceChip em {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 10.5px; line-height: 1.4; color: var(--cmp-warn);
}
#compareView .cmpBoardConflict {
  margin-top: 8px; padding: 8px 11px; border-radius: 8px;
  background: rgba(242, 180, 65, 0.09); border-left: 3px solid var(--cmp-warn);
  font-size: 12px; line-height: 1.5; color: var(--ink, #EAEEF5);
}
#compareView .cmpReconcile {
  margin-bottom: 11px; padding: 9px 12px; border-radius: 9px;
  background: rgba(91, 157, 249, 0.08); border-left: 3px solid var(--cmp-a);
  font-size: 12.5px; line-height: 1.5; color: var(--ink, #EAEEF5);
}

/* ------------------------------------------------- research disclosure bar -- */

#compareView .cmpResearchBar {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 2px; margin-top: 6px;
}
#compareView .cmpResearchBar > span {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted, #8A94A6); margin-right: auto;
}

/* Profile shape: 35 / 65 split instead of a small chart in a wide empty box. */
#compareView .cmpRadarWrap { grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); gap: 18px; }
#compareView .cmpRadarSvg { max-width: 300px; }

/* --------------------------------------------- detailed statistical compare -- */

#compareView .cmpStatTabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
#compareView .cmpStatTabs button {
  padding: 5px 11px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--cmp-line); background: var(--panel, #121826);
  color: var(--muted, #8A94A6); font-size: 11.5px;
}
#compareView .cmpStatTabs button.active { background: var(--cmp-a); border-color: var(--cmp-a); color: #08111F; font-weight: 600; }
#compareView .cmpStatSummary {
  margin-bottom: 10px; padding: 9px 12px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.03); border-left: 3px solid var(--cmp-a);
  font-size: 12.5px; line-height: 1.5; color: var(--ink, #EAEEF5);
}
#compareView .cmpStatTableWrap { overflow-x: auto; border: 1px solid var(--cmp-line); border-radius: 10px; }
#compareView .cmpStatTable { width: 100%; border-collapse: collapse; font-size: 12px; }
#compareView .cmpStatTable th,
#compareView .cmpStatTable td {
  padding: 7px 11px; border-bottom: 1px solid var(--cmp-line);
  font-variant-numeric: tabular-nums; text-align: right;
}
#compareView .cmpStatTable thead th {
  position: sticky; top: 0; background: var(--cmp-card);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted, #8A94A6);
}
#compareView .cmpStatTable th[scope="row"],
#compareView .cmpStatTable thead th:first-child { text-align: left; color: var(--ink, #EAEEF5); font-weight: 500; }
#compareView .cmpStatTable thead th.playerA { color: var(--cmp-a); }
#compareView .cmpStatTable thead th.playerB { color: var(--cmp-b); }
#compareView .cmpStatTable td.isWinner { font-weight: 700; color: var(--head, #F3F6FB); }
#compareView .cmpStatTable tbody tr:hover { background: rgba(255, 255, 255, 0.028); }
#compareView .cmpStatTable .cmpEdgeCell { text-align: left; }
#compareView .cmpStatTable .cmpEdgeCell em { font-style: normal; color: var(--muted, #8A94A6); }
#compareView .cmpStatActions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }

/* Position market context: compact table, no stranded far-right team codes. */
#compareView .cmpTopTable { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-top: 4px; }
#compareView .cmpTopTable th,
#compareView .cmpTopTable td { padding: 4px 7px; border-bottom: 1px solid var(--cmp-line); text-align: left; }
#compareView .cmpTopTable th { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6); }
#compareView .cmpTopTable td:first-child, #compareView .cmpTopTable th:first-child { width: 42px; color: var(--muted, #8A94A6); font-variant-numeric: tabular-nums; }
#compareView .cmpTopTable td:last-child, #compareView .cmpTopTable th:last-child { width: 52px; color: var(--muted, #8A94A6); }
#compareView .cmpSharedPos { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
#compareView .cmpSharedPosBlock { padding: 11px 12px; }

/* ---------------------------------------------------------- lower spacing --- */

#compareView .cmpFlow { gap: 14px; }
#compareView .cmpSection { padding: 14px 16px; }
#compareView .cmpDisclosureBody { padding: 2px 13px 12px; }
#compareView .cmpSectionHead { margin-bottom: 12px; padding-bottom: 9px; }
#compareView .cmpStatRow { margin-top: 10px; }

@media (max-width: 900px) {
  #compareView .cmpRadarWrap { grid-template-columns: 1fr; }
  #compareView .cmpRadarSvg { max-width: 260px; margin: 0 auto; }
}

@media (max-width: 720px) {
  /* Charts scroll horizontally rather than growing tall on a phone. */
  #compareView .cmpChartCard { overflow-x: auto; }
  #compareView .cmpTrendSvg { min-width: 560px; height: 200px; }
  #compareView .cmpScatterSvg { min-width: 520px; height: 230px; }
  #compareView .cmpRangeSvg { min-width: 520px; }
  #compareView .cmpStatTabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
  #compareView .cmpStatTabs button { white-space: nowrap; }
}


/* ============================================================================
   COMPARE — weekly trend chart width fix
   ----------------------------------------------------------------------------
   The plot previously occupied only the middle third of its container. The SVG
   was `width: 100%; height: 250px` with the default preserveAspectRatio of
   `xMidYMid meet`: a 720x250 viewBox (aspect 2.88) inside a ~1950x250 box
   (aspect 7.8) scales to fit the HEIGHT, so the drawing rendered 720px wide and
   centred, leaving ~615px dead on each side. The HTML axis labels meanwhile
   positioned against the full container width, so labels and data sat on
   different scales. The SVG now uses preserveAspectRatio="none" to fill the
   width; strokes hold their weight through vector-effect, and every circle has
   been replaced with a stroke or a hit rect so nothing distorts.
   ========================================================================== */

#compareView .cmpTrendSvg {
  width: 100%;
  height: 250px;
  max-height: 250px;
  display: block;
}

/* Uniform stroke weights under non-uniform scaling. */
#compareView .cmpTrendLine,
#compareView .cmpMeanLine,
#compareView .cmpSeasonBreak,
#compareView .cmpZeroLine {
  vector-effect: non-scaling-stroke;
}

#compareView .cmpSeasonBand { fill: rgba(255, 255, 255, 0.022); }
#compareView .cmpSeasonBreak { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }

/* Invisible per-week hover columns carry the tooltip. */
#compareView .cmpTrendHit { fill: transparent; }
#compareView .cmpTrendHit:hover { fill: rgba(255, 255, 255, 0.05); }

/* Two-row axis: week ticks, then centred season names. */
#compareView .cmpTrendAxis { position: relative; height: 14px; margin-top: 2px; }
#compareView .cmpTrendAxis span {
  position: absolute; transform: translateX(-50%);
  font-size: 9px; color: var(--muted, #8A94A6); white-space: nowrap;
}
#compareView .cmpTrendSeasons { position: relative; height: 16px; margin-top: 1px; }
#compareView .cmpTrendSeasons span {
  position: absolute; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink, #EAEEF5); white-space: nowrap;
}

@media (max-width: 720px) {
  #compareView .cmpTrendSvg { min-width: 560px; height: 200px; max-height: 200px; }
}

/* Optimistic draft acknowledgement. The row is marked the moment the pick is
   clicked; the authoritative board pass follows on the next frame. */
#boardBody tr.isDraftedPending {
  opacity: 0.55;
  transition: opacity 120ms ease-out;
}
#boardBody tr.isDraftedPending .draftedButton[disabled] {
  cursor: default;
  pointer-events: none;
  filter: grayscale(1);
}

/* Final mobile cascade: this intentionally sits after page-specific polish
   so the shared phone shell is the last word at narrow widths. */
@media (max-width: 599px), (max-height: 600px) and (orientation: landscape) and (max-width: 900px) {
  body { zoom: 1 !important; overflow-x: hidden !important; }
  body.mobileDraftActive { padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 116px) !important; }
  .pageIndex {
    top: 116px !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 10px !important;
  }
  .pageIndex .jumpNavPill {
    min-height: 44px !important;
    padding: 8px 13px !important;
    font-size: 12px !important;
  }
  .tabs { display: none !important; }
  .mobileDraftToolbar { display: grid !important; }
  .draftControls #draftSettings,
  .draftControls #draftFilters { display: none !important; }
  body.mobileDraftSetupOpen #draftSettings,
  body.mobileDraftFiltersOpen #draftFilters {
    display: grid !important;
    position: fixed !important;
    z-index: 1501 !important;
    right: 10px !important;
    bottom: calc(10px + var(--safe-bottom)) !important;
    left: 10px !important;
    max-height: min(78dvh, 680px) !important;
    overflow-y: auto !important;
  }
  body.mobileDraftSetupOpen #draftSettings { grid-template-columns: 1fr !important; }
  body.mobileDraftFiltersOpen #draftFilters { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .boardPanel .tableWrap { display: none !important; }
  .mobileBoard { display: grid !important; }
  .mobileDraftOverlay { display: none; }
  body.mobileDraftFiltersOpen .mobileDraftOverlay,
  body.mobileDraftSetupOpen .mobileDraftOverlay { display: block !important; }
  .mobileBottomNav { display: grid !important; }
  body.mobileDraftActive .mobileDraftActionBar { display: grid !important; }
  .mobileSortControl select { font-size: 16px !important; }
  .mobileLoadMore {
    width: 100% !important;
    min-height: 44px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 10px !important;
    background: #182131 !important;
    color: var(--ink, #EAEEF5) !important;
    font-weight: 700 !important;
  }
  .mobileMoreMenu:not([hidden]) { display: block !important; }
  .globalSearch { grid-column: 1 / -1 !important; width: 100% !important; }
  .globalSearchDropdown { position: fixed !important; top: 116px !important; right: 10px !important; left: 10px !important; width: auto !important; }
  .playerDrawer,
  .teamDrawer,
  .detailInsightDrawer,
  #marketView .mktPlayerPanel {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: min(92dvh, 840px) !important;
    max-height: 92dvh !important;
    border-radius: 18px 18px 0 0 !important;
    padding-top: calc(22px + var(--safe-top)) !important;
    padding-bottom: calc(20px + var(--safe-bottom)) !important;
    overflow-y: auto !important;
    z-index: 2000 !important;
    box-shadow: 0 -24px 60px rgba(0, 0, 0, .48) !important;
  }
  .playerDrawer::before,
  .teamDrawer::before,
  .detailInsightDrawer::before,
  #marketView .mktPlayerPanel::before {
    position: absolute;
    top: 9px;
    left: 50%;
    width: 42px;
    height: 4px;
    border-radius: 99px;
    background: rgba(191, 219, 254, .5);
    content: "";
    transform: translateX(-50%);
  }
  .playerDrawerBackdrop { z-index: 1990 !important; }
  .playerDrawer.open,
  .teamDrawer.open,
  .detailInsightDrawer.open,
  #marketView .mktPlayerPanel.open { transform: translateY(0) !important; }
  .chatPanel { inset: 0 !important; width: 100vw !important; height: 100dvh !important; border-radius: 0 !important; }
  .myRanksTable { min-width: 0 !important; width: 100% !important; display: block !important; }
  .myRanksTable thead { display: none !important; }
  .myRanksTable tbody { display: grid !important; gap: 10px !important; }
  .myRanksTable tr { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .myRanksTable td { white-space: normal !important; }
  .myRanksTable td:nth-child(1) { display: grid !important; min-width: 54px !important; }
  .tableWrap { max-width: 100% !important; overflow-x: auto !important; }
  .panel, .draftControls, .playersShell, .sleeperPanel, .lwShell { max-width: 100% !important; overflow-x: clip !important; }
input, select, textarea { font-size: 16px !important; }
}

/* ============================================================================
   MOBILE TEXT-FIT SAFETY PASS
   Component-scoped wrapping and min-width rules for release-blocking narrow
   layouts. Desktop typography and table sizing remain unchanged.
   ============================================================================ */
@media (max-width: 599px), (max-height: 600px) and (orientation: landscape) and (max-width: 900px) {
  .topbar,
  .topbar > *,
  .headerActions,
  .sleeperConnectBar,
  .sleeperConnectBar > *,
  main,
  .appShell,
  .view,
  .panel,
  .panelHeader,
  .panelHeader > *,
  .sectionHero,
  .sectionHero > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Supporting refresh metadata may wrap; it is not a primary action label. */
  .topbar p#refreshText {
    height: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  /* Give the native sort select a full row so its selected label is readable. */
  .mobileDraftToolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .mobileDraftToolbar .mobileSortControl {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .mobileDraftToolbar [data-mobile-action="setup"] {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .mobileSortControl select {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  /* Critical player identity/status text wraps instead of disappearing. */
  .mobilePlayerCard,
  .mobilePlayerCardBody,
  .mobilePlayerIdentity,
  .mobilePlayerActions,
  .mobilePlayerReadout,
  .mobilePlayerSignals,
  .mobilePlayerDeepMetrics {
    min-width: 0 !important;
  }

  .mobilePlayerCard { overflow: visible !important; }
  .mobilePlayerSummary { align-items: start !important; }

  .mobilePlayerIdentity strong,
  .mobilePlayerIdentity > span {
    overflow: visible !important;
    overflow-wrap: normal !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: normal !important;
  }

  .mobilePlayerActions button,
  .mobileDraftActionBar button {
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  /* Keep the primary home action inside its card at every phone width. */
  .homeEnterButton {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 52px !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  .homeEnterButton .starBorderSurface {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  .panelHeader,
  .sectionHero,
  .marketHeroHeader,
  .marketSectionHeader,
  .chartHeader,
  .nextPickDecisionHeader {
    flex-wrap: wrap !important;
  }

  /* Players: replace the four fixed desktop columns with a vertical flow. */
  #playersView .playersShell,
  #playersView .playersToolbar,
  #playersView .playersBoard,
  #playersView .playerColumn,
  #playersView .playerColumn > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #playersView .playersShell { overflow: visible !important; }
  #playersView .playersToolbar { grid-template-columns: 1fr !important; }
  #playersView .playersBoard {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #playersView .playerColumn {
    width: 100% !important;
    min-width: 0 !important;
  }

  #playersView .playerListItem,
  #playersView .playerListHeader {
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: 30px minmax(0, 1fr) 60px 42px !important;
    gap: 6px !important;
  }

  #playersView .playerColumn strong,
  #playersView .playerColumn span {
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  /* Shared jump navigation is an intentional horizontal scroller, not page overflow. */
  .jumpNav {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  /* Compare: keep charts/tables inside their own scroll surfaces. */
  #compareView .cmpFlow,
  #compareView .cmpFlow > *,
  #compareView .cmpTwoCol,
  #compareView .cmpTwoCol > *,
  #compareView .cmpSection,
  #compareView .cmpSection > *,
  #compareView .cmpChartCard,
  #compareView .cmpRadarWrap,
  #compareView .cmpSharedPos {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #compareView .cmpFlow,
  #compareView .cmpTwoCol { overflow: visible !important; }

  #compareView .cmpChartCard,
  #compareView .cmpStatTableWrap,
  #compareView .cmpTopTableWrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  #compareView .cmpSection h3,
  #compareView .cmpChartCard h3,
  #compareView .cmpStatSummary {
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  /* Assistant cards and narrative columns must not leave a narrow text rail. */
  #assistantView,
  #assistantView > *,
  #assistantView .assistantGrid,
  #assistantView .assistantGrid > *,
  #assistantView .assistantDecisionLanes > *,
  #assistantView .assistantAnalysisGrid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #assistantView p,
  #assistantView .asstStatusChip,
  #assistantView .asstFallTrend {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  #assistantView .asstHowItWorks {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #assistantView .asstHowItWorks p {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow-wrap: normal !important;
  }

  #assistantView .asstTitleBlock {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #assistantView .asstTitleBlock h2,
  #assistantView .asstTitleBlock span {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #assistantView .asstHeroGrid,
  #assistantView .asstHeroGrid > *,
  #assistantView .asstHeroCol,
  #assistantView .asstHeroCol > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #assistantView .asstHeroCol > * {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #assistantView .asstConfidenceHead,
  #assistantView .asstSurvivalHead {
    min-width: 0 !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  #assistantView .asstConfidenceHead span,
  #assistantView .asstSurvivalHead span {
    min-width: 0 !important;
    flex: 1 1 120px !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #assistantView .radarAxisLabel { font-size: 8px !important; }

  /* Market: stack cards and keep only data-dense tables horizontally scrollable. */
  #marketView .marketShell,
  #marketView .marketShell > *,
  #marketView .marketQuantSummary,
  #marketView .marketQuantSummary > *,
  #marketView .marketCommandHero > *,
  #marketView .marketPocketGrid > *,
  #marketView .marketDecisionGrid > *,
  #marketView .marketTablePanel,
  #marketView .marketTablePanel > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #marketView .marketShell { overflow: visible !important; }
  #marketView .marketQuantSummary,
  #marketView .marketCommandHero,
  #marketView .marketPocketGrid,
  #marketView .marketDecisionGrid {
    grid-template-columns: 1fr !important;
  }

  #marketView .mktRangeGrid,
  #marketView .mktPositionGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #marketView .mktRangeGrid > *,
  #marketView .mktPositionGrid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #marketView .marketTablePanel .tableWrap,
  #marketView .marketTablePanel .mktTableWrap,
  #marketView .marketDecisionPanel .tableWrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  #marketView table { min-width: 560px; }

  /* My Ranks community controls stack rather than creating a 642px row. */
  #myRanksView .communityDetails {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }

  #myRanksView .communityOptIn {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 4px !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  #myRanksView .communityDetails button {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  #myRanksView .myRanksStats span {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  /* Teams: allow long metric labels and history controls to stack. */
  #teamsView,
  #teamsView > *,
  #teamsView .teamGrid,
  #teamsView .teamGrid > *,
  #teamsView .teamDashboard,
  #teamsView .teamDashboard > *,
  #teamsView #team-history,
  #teamsView #team-history > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #teamsView .teamGrid,
  #teamsView .teamDashboard { overflow: visible !important; }

  #teamsView .teamInsightGrid {
    grid-template-columns: 1fr !important;
  }

  #teamsView .teamInsightGrid,
  #teamsView .teamInsightGrid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #teamsView .teamHistoryHeader {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  #teamsView .inlineSelect {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  #teamsView .teamYearSelect,
  #teamsView .inlineSelect select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #teamsView .teamRosterGroup strong,
  #teamsView .teamRosterGroup span,
  #teamsView .teamRosterGroup em {
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #teamsView .teamRosterGroup button {
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 6px !important;
  }

  #teamsView .teamRankCard span {
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #teamsView .teamStatCard span {
    overflow: visible !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  #teamsView .modernBarRow {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #teamsView .modernBarRow > span {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #teamsView .modernBarRow > b {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #teamsView .modernBarRow > em {
    grid-column: 2 !important;
    grid-row: 1 !important;
    white-space: nowrap !important;
  }

  /* News filters: one readable control per row on a phone. */
  #newsView .newsControls {
    grid-template-columns: 1fr !important;
  }

  #newsView .newsControls label:first-child {
    grid-column: auto !important;
  }

  #newsView .newsControls label,
  #newsView .newsControls input,
  #newsView .newsControls select,
  #newsView .newsControls .resetButton {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Manager Tendencies: keep the league-average label readable in its
     compact landscape summary while preserving the dense chart/value layout. */
  #managerTendenciesView .mtLandscapeRow {
    grid-template-columns: minmax(108px, 1fr) minmax(0, 1fr) !important;
  }

  #managerTendenciesView .mtLandscapeName {
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  /* Manager Tendencies: release the intrinsic width of the impact cards at
     the narrowest phone breakpoint; only its dense data tables may scroll. */
  #managerTendenciesView,
  #managerTendenciesView > *,
  #managerTendenciesView .mtPanel,
  #managerTendenciesView .mtFlow,
  #managerTendenciesView .mtFlow > *,
  #managerTendenciesView .mtSection,
  #managerTendenciesView .mtSection > *,
  #managerTendenciesView .mtImpactGrid,
  #managerTendenciesView .mtImpactGrid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #managerTendenciesView .mtPanel,
  #managerTendenciesView .mtFlow {
    overflow: visible !important;
  }

  #managerTendenciesView .mtImpactGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #managerTendenciesView .mtRetroGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #managerTendenciesView .mtRetroGrid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #managerTendenciesView .mtBoardList strong {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #managerTendenciesView .mtPickList strong {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #managerTendenciesView .mtImpactMain,
  #managerTendenciesView .mtImpactRow,
  #managerTendenciesView .mtImpactRow > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #managerTendenciesView .mtImpactMain {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #managerTendenciesView .mtImpactRow {
    grid-template-columns: minmax(82px, 0.8fr) minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #managerTendenciesView .mtImpactRow > * {
    overflow-wrap: anywhere !important;
  }

  #managerTendenciesView .mtImpactRow .mtConf {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #managerTendenciesView .mtImpactRow .mtConf em {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #managerTendenciesView .lwStackSeg b {
    font-size: 8px !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
  }

  #managerTendenciesView .mtTableScroll {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  /* League Wrapped and Draft History keep dense tables in local scrollers. */
  #wrappedView .lwShell,
  #wrappedView .lwFlow,
  #wrappedView .lwFlow > *,
  #wrappedView .lwSection,
  #wrappedView .lwTxGrid,
  #draftHistoryView,
  #draftHistoryView > *,
  #draftHistoryView .historyGrid,
  #draftHistoryView .historyGrid > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #wrappedView .lwShell,
  #wrappedView .lwFlow,
  #draftHistoryView .sleeperPanel { overflow: visible !important; }

  #wrappedView .lwSection,
  #draftHistoryView .historyGrid .tableWrap,
  #draftHistoryView .historyGrid .historyTableWrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  #draftHistoryView .historyGrid,
  #draftHistoryView .historyGrid > *,
  #draftHistoryView .draftHistoryControls,
  #draftHistoryView .draftHistoryControls > *,
  #draftHistoryView .inlineSelect,
  #draftHistoryView .segmentedControl {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #draftHistoryView .draftHistoryControls {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #draftHistoryView .draftHistoryControls .inlineSelect,
  #draftHistoryView .draftHistoryControls .segmentedControl {
    width: 100% !important;
    margin-left: 0 !important;
  }

  #draftHistoryView .draftHistoryControls .inlineSelect select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #draftHistoryView .draftGradeCard {
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
  }

  #draftHistoryView .draftGradeCard strong,
  #draftHistoryView .draftGradeCard span,
  #draftHistoryView .draftGradeCard em {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #wrappedView .lwDnaGrid,
  #wrappedView .lwProfileRow {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #wrappedView .lwDnaGrid > *,
  #wrappedView .lwProfileRow > *,
  #wrappedView .lwSectionHead,
  #wrappedView .lwSectionHead > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #wrappedView .lwSectionHead h3,
  #wrappedView .lwSectionHead p {
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #wrappedView .lwSectionActions,
  #wrappedView .lwSegmented {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #wrappedView .lwSegmented {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  #wrappedView .lwSegmented button {
    min-width: 0 !important;
    flex: 1 1 84px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #wrappedView .lwManagerStats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #wrappedView .lwManagerStats dt {
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #wrappedView .lwCompareTable { max-width: none !important; }
}
/* ============================================================================
   WEEKLY RANKINGS — in-season decision-center foundation
   ========================================================================== */

#weeklyRankingsView {
  padding: 30px 0 42px;
}

.weeklyBoardModeTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.weeklyBoardModeTabs button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #30435f;
  border-radius: 8px;
  background: #101c2d;
  color: #a9bdd8;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.weeklyBoardModeTabs button.active,
.weeklyBoardModeTabs button:hover {
  border-color: rgba(96, 165, 250, 0.72);
  background: rgba(41, 86, 139, 0.48);
  color: #eaf3ff;
}

.weeklyHistoricalBadge {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(96, 165, 250, 0.12);
  color: #b9d8ff;
}

.weeklyHistoricalSection,
.weeklyHistoricalNote {
  padding: 16px;
}

.weeklyHistoricalShell .weeklySummaryGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.weeklyHistoricalSection .weeklySubsectionHeader {
  align-items: end;
}

.weeklyHistoricalSection .weeklyPositionTabs {
  margin-left: auto;
}

.weeklyActualPoints {
  color: #9fe4c1;
  font-family: var(--font-mono);
  font-weight: 800;
  text-align: right;
}

.weeklyHistoricalSearch {
  display: grid;
  gap: 6px;
  min-width: 190px;
  color: #b8c9de;
  font-size: 11px;
  font-weight: 700;
}

.weeklySortControl {
  display: grid;
  gap: 6px;
  color: #b8c9de;
  font-size: 11px;
  font-weight: 700;
}

.weeklySortControl select {
  min-height: 38px;
  border: 1px solid #30435f;
  border-radius: 8px;
  background: #101c2d;
  color: #eaf2ff;
}

.weeklyControlMuted {
  opacity: 0.62;
}

.weeklyHistoricalSearch input {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #30435f;
  border-radius: 8px;
  background: #101c2d;
  color: #eaf2ff;
}

.weeklyHistoricalSection .weeklyPositionTabs button[aria-selected="true"] {
  border-color: rgba(96, 165, 250, 0.9);
  background: rgba(67, 126, 202, 0.55);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.18);
}

.weeklyHistoricalSection .weeklyTableScroll {
  max-height: none;
  overflow: visible;
}

.weeklyHistoricalSection .weeklyRankingsTable {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
}

.weeklyHistoricalWeekSection .weeklyRankingsTable th:nth-child(1),
.weeklyHistoricalWeekSection .weeklyRankingsTable td:nth-child(1) { width: 10%; }
.weeklyHistoricalWeekSection .weeklyRankingsTable th:nth-child(2),
.weeklyHistoricalWeekSection .weeklyRankingsTable td:nth-child(2) { width: 14%; }
.weeklyHistoricalWeekSection .weeklyRankingsTable th:nth-child(3),
.weeklyHistoricalWeekSection .weeklyRankingsTable td:nth-child(3) { width: 24%; }
.weeklyHistoricalWeekSection .weeklyRankingsTable th:nth-child(4),
.weeklyHistoricalWeekSection .weeklyRankingsTable td:nth-child(4) { width: 12%; }
.weeklyHistoricalWeekSection .weeklyRankingsTable th:nth-child(5),
.weeklyHistoricalWeekSection .weeklyRankingsTable td:nth-child(5) { width: 16%; }
.weeklyHistoricalWeekSection .weeklyRankingsTable th:nth-child(6),
.weeklyHistoricalWeekSection .weeklyRankingsTable td:nth-child(6) { width: 23%; }

.weeklyHistoricalSection .weeklyRankingsTable tbody th,
.weeklyHistoricalSection .weeklyRankingsTable tbody td {
  position: static;
}

.weeklyHistoricalSection .weeklyRankingsTable td:nth-child(n + 5),
.weeklyHistoricalSection .weeklyRankingsTable th:nth-child(n + 5) {
  text-align: right;
}

.weeklyHistoricalWeekSection .weeklyTableScroll {
  max-height: none;
  overflow: visible;
}

.weeklyHistoricalSection table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #13233a;
}

.weeklyHistoricalSection table tbody tr:nth-child(even) {
  background: rgba(26, 46, 75, 0.24);
}

.weeklyHistoricalSection table tbody tr:hover {
  background: rgba(64, 112, 174, 0.24);
}

.weeklyHistoricalPlayer {
  padding: 0;
  border: 0;
  background: transparent;
  color: #d9eaff;
  cursor: pointer;
  font-weight: 800;
  text-align: left;
}

.weeklyHistoricalPlayer:hover {
  color: #8fc5ff;
  text-decoration: underline;
}

@media (max-width: 820px) {
  .weeklyBoardModeTabs {
    width: 100%;
    margin-left: 0;
  }

  .weeklyBoardModeTabs button {
    flex: 1 1 30%;
  }

  .weeklyHistoricalSection .weeklySubsectionHeader {
    align-items: start;
    flex-direction: column;
  }

  .weeklyHistoricalSection .weeklyPositionTabs {
    margin-left: 0;
  }

  .weeklyHistoricalShell .weeklySummaryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.weeklyRankingsShell {
  display: grid;
  gap: 14px;
  max-width: 1680px;
  margin: 0 auto;
}

.weeklyPageHero,
.weeklyToolbar,
.weeklySubsection {
  border: 1px solid rgba(117, 145, 180, 0.24);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(18, 29, 48, 0.96), rgba(8, 17, 31, 0.96));
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

.weeklyPageHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 24px;
  align-items: center;
  padding: 24px 26px;
  background:
    radial-gradient(circle at 90% 0%, rgba(91, 157, 249, 0.17), transparent 34%),
    linear-gradient(145deg, rgba(18, 29, 48, 0.98), rgba(8, 17, 31, 0.98));
}

.weeklyEyebrow,
.weeklyControlLabel {
  display: block;
  color: #8ea5c4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.weeklyTitleLine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 6px 0 8px;
}

.weeklyPageHero h2 {
  color: #f1f6ff;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.03em;
}

.weeklyPageHeroText > p,
.weeklyHeroHelp p,
.weeklySectionIntro,
.weeklyFilterNote,
.weeklyMethodologyBody p {
  color: #9eb0c7;
  font-size: 12px;
  line-height: 1.55;
}

.weeklyPreseasonBadge,
.weeklyFilterState,
.weeklyTableMeta,
.weeklyStatusDot {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(242, 180, 65, 0.42);
  border-radius: 999px;
  background: rgba(242, 180, 65, 0.12);
  color: #f7cf78;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.weeklyHeroHelp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 13px 14px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 10px;
  background: rgba(15, 31, 54, 0.68);
}

.weeklyHeroHelpIcon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(147, 197, 253, 0.62);
  border-radius: 50%;
  color: #cfe3ff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
}

.weeklyHeroHelp .infoIcon {
  margin-top: 1px;
}

.weeklyToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: end;
  padding: 14px 16px;
  background: rgba(11, 20, 36, 0.94);
}

.weeklyToolbarGroup,
.weeklySeasonControl {
  display: grid;
  gap: 6px;
}

.weeklyWeekStepper {
  display: flex;
  gap: 7px;
  align-items: end;
}

.weeklyWeekStepper label,
.weeklySeasonControl {
  color: #b8c9de;
  font-size: 11px;
  font-weight: 700;
}

.weeklyWeekStepper select,
.weeklySeasonControl select,
.weeklyFilterGrid input,
.weeklyFilterGrid select {
  min-height: 38px;
  border: 1px solid #30435f;
  border-radius: 8px;
  background: #101c2d;
  color: #eaf2ff;
  box-shadow: none;
}

.weeklyWeekStepper select,
.weeklySeasonControl select {
  min-width: 132px;
  margin-top: 5px;
}

.weeklySeasonControl select {
  min-width: 118px;
}

.weeklyWeekStepper button,
.weeklyDetailsButton,
.weeklyTextButton,
.weeklySortButton,
.weeklyEdgeTabs button {
  border: 1px solid #30435f;
  border-radius: 8px;
  background: #101c2d;
  color: #cfe3ff;
  cursor: pointer;
  font-weight: 800;
}

.weeklyWeekStepper button {
  width: 38px;
  height: 38px;
  font-size: 18px;
}

.weeklyWeekStepper button:disabled,
.weeklyFilterGrid :disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.weeklySelectionStatus {
  display: grid;
  gap: 3px;
  min-width: min(390px, 100%);
  margin-left: auto;
  color: #8ea5c4;
  font-size: 11px;
  line-height: 1.4;
}

.weeklySelectionStatus strong {
  color: #dbeafe;
  font-family: var(--font-mono);
  font-size: 12px;
}

.weeklySummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.weeklySummaryCard {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid rgba(117, 145, 180, 0.24);
  border-radius: 12px;
  background: rgba(13, 24, 42, 0.92);
}

.weeklySummaryHeader,
.weeklySubsectionHeader,
.weeklyMobileCardHeader,
.weeklyMobileCardMeta,
.weeklyDrawerLead {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.weeklySummaryHeader > span:first-child {
  color: #8ea5c4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.weeklySummaryCard > strong {
  display: block;
  margin-top: 10px;
  color: #f3f7ff;
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1;
}

.weeklySummaryCard > p {
  margin-top: 8px;
  color: #7f94af;
  font-size: 10px;
  line-height: 1.35;
}

.weeklySubsection {
  min-width: 0;
  padding: 16px;
}

.weeklySubsectionHeader {
  align-items: flex-start;
  margin-bottom: 12px;
}

.weeklySubsectionHeader h3 {
  margin-top: 4px;
  color: #edf4ff;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.01em;
}

.weeklyFilterGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
}

.weeklyFilterGrid label {
  display: grid;
  gap: 5px;
  color: #9eb0c7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.weeklyCheckboxLabel {
  display: flex !important;
  min-height: 38px;
  align-items: center;
  gap: 7px !important;
  padding: 0 10px;
  border: 1px solid rgba(117, 145, 180, 0.24);
  border-radius: 8px;
  background: rgba(15, 31, 54, 0.52);
  letter-spacing: 0 !important;
  line-height: 1.25;
  text-transform: none !important;
}

.weeklyCheckboxLabel input {
  width: auto;
  min-height: auto;
  accent-color: #60a5fa;
}

.weeklyFilterNote {
  margin-top: 11px;
  color: #7489a5;
  font-size: 10px;
}

.weeklyTableScroll {
  max-width: 100%;
  overflow: auto;
  border: 1px solid rgba(117, 145, 180, 0.20);
  border-radius: 10px;
  scrollbar-gutter: stable both-edges;
}

.weeklyRankingsTable {
  width: max-content;
  min-width: 1500px;
  border-collapse: separate;
  border-spacing: 0;
  color: #dce8f8;
  font-size: 11px;
}

.weeklyRankingsTable th,
.weeklyRankingsTable td {
  min-width: 80px;
  padding: 10px 11px;
  border-bottom: 1px solid rgba(117, 145, 180, 0.18);
  background: #0b1627;
  white-space: nowrap;
}

.weeklyRankingsTable thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #15243b;
  color: #a7c1e0;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.weeklyRankingsTable tbody tr:nth-child(even) td,
.weeklyRankingsTable tbody tr:nth-child(even) th {
  background: #0e1b2e;
}

.weeklyRankingsTable tbody tr:hover td,
.weeklyRankingsTable tbody tr:hover th {
  background: rgba(47, 87, 137, 0.34);
}

.weeklyRankingsTable th:nth-child(1),
.weeklyRankingsTable td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 4;
  min-width: 92px;
}

.weeklyRankingsTable th:nth-child(2),
.weeklyRankingsTable td:nth-child(2) {
  position: sticky;
  left: 92px;
  z-index: 4;
  min-width: 220px;
}

.weeklyRankingsTable thead th:nth-child(1),
.weeklyRankingsTable thead th:nth-child(2) {
  z-index: 7;
}

.weeklyRankingsTable td:nth-child(1),
.weeklyRankingsTable td:nth-child(7),
.weeklyRankingsTable td:nth-child(8),
.weeklyRankingsTable td:nth-child(9),
.weeklyRankingsTable td:nth-child(10),
.weeklyRankingsTable td:nth-child(15) {
  color: #dbeafe;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.weeklyPriorityRank {
  color: #93c5fd !important;
  font-weight: 800;
}

.weeklyPlayerButton {
  padding: 0;
  border: 0;
  background: transparent;
  color: #f0f6ff;
  cursor: pointer;
  font-weight: 800;
  text-align: left;
}

.weeklySortButton {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
}

.weeklyDetailsButton,
.weeklyTextButton {
  padding: 6px 9px;
  font-size: 10px;
}

.weeklyDetailsButton:hover,
.weeklyTextButton:hover,
.weeklyWeekStepper button:hover,
.weeklyEdgeTabs button:hover,
.weeklySortButton:hover {
  border-color: rgba(147, 197, 253, 0.75);
  background: rgba(96, 165, 250, 0.16);
}

.weeklyDifferenceFlag {
  color: #f7cf78 !important;
  font-weight: 800;
}

.weeklyPill {
  display: inline-flex;
  max-width: 150px;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid rgba(148, 163, 184, 0.30);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.10);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.weeklyPill-must-start,
.weeklyPill-start { border-color: rgba(54, 194, 139, 0.48); background: rgba(54, 194, 139, 0.13); color: #8ff0c5; }
.weeklyPill-lean-start { border-color: rgba(96, 165, 250, 0.45); background: rgba(96, 165, 250, 0.13); color: #b9d8ff; }
.weeklyPill-toss-up,
.weeklyPill-monitor { border-color: rgba(242, 180, 65, 0.44); background: rgba(242, 180, 65, 0.12); color: #f7cf78; }
.weeklyPill-lean-sit,
.weeklyPill-sit,
.weeklyPill-injury-dependent { border-color: rgba(236, 106, 96, 0.42); background: rgba(236, 106, 96, 0.12); color: #ffaaa3; }
.weeklyMatchup-strong,
.weeklyMatchup-favorable { border-color: rgba(54, 194, 139, 0.42); color: #8ff0c5; }
.weeklyMatchup-difficult,
.weeklyMatchup-very-difficult { border-color: rgba(236, 106, 96, 0.42); color: #ffaaa3; }

.weeklyMuted {
  color: #667a96;
  font-family: var(--font-mono);
}

.weeklyTableEmpty,
.weeklyEmptyState {
  display: grid;
  gap: 6px;
  min-height: 92px;
  align-content: center;
  padding: 18px;
  border: 1px dashed rgba(117, 145, 180, 0.32);
  border-radius: 10px;
  background: rgba(15, 31, 54, 0.45);
  color: #9eb0c7;
  line-height: 1.45;
  white-space: normal;
}

.weeklyTableEmpty strong,
.weeklyEmptyState strong {
  color: #dbeafe;
  font-size: 12px;
}

.weeklyTableEmpty span,
.weeklyEmptyState span {
  font-size: 11px;
}

.weeklyTableEmpty .weeklyTextButton {
  justify-self: start;
  margin-top: 4px;
}

.weeklyMobileCards {
  display: none;
}

.weeklyTwoColumn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.weeklyTwoColumn > .weeklySubsection {
  min-width: 0;
}

.weeklyEdgeTabs {
  display: flex;
  gap: 7px;
  margin-bottom: 12px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.weeklyEdgeTabs button {
  min-height: 34px;
  padding: 7px 10px;
  color: #9eb0c7;
  font-size: 10px;
  white-space: nowrap;
}

.weeklyEdgeTabs button[aria-selected="true"] {
  border-color: rgba(96, 165, 250, 0.68);
  background: rgba(96, 165, 250, 0.18);
  color: #dbeafe;
}

.weeklyMetricList {
  display: grid;
  gap: 0;
  margin: 0;
}

.weeklyMetricList > div {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) minmax(0, 1.4fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(117, 145, 180, 0.16);
}

.weeklyMetricList > div:last-child {
  border-bottom: 0;
}

.weeklyMetricList dt {
  color: #7f94af;
  font-size: 10px;
}

.weeklyMetricList dd {
  margin: 0;
  color: #d7e5f8;
  font-size: 11px;
  overflow-wrap: anywhere;
  text-align: right;
}

.weeklyDataStatus .weeklySubsectionHeader {
  margin-bottom: 4px;
}

.weeklyMethodology {
  padding: 0;
  overflow: hidden;
}

.weeklyMethodology > summary {
  display: flex;
  min-height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  color: #edf4ff;
  cursor: pointer;
  list-style: none;
}

.weeklyMethodology > summary::-webkit-details-marker {
  display: none;
}

.weeklyMethodology > summary strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 16px;
}

.weeklyMethodologyBody {
  display: grid;
  gap: 10px;
  padding: 0 16px 16px;
}

.weeklyMethodologyBody p strong {
  color: #f7cf78;
}

.weeklyDrawerBackdrop {
  z-index: 140;
}

#weeklyPlayerDrawer.weeklyPlayerDrawer {
  top: 64px;
  right: 16px;
  bottom: 16px;
  left: auto;
  width: min(600px, calc(100vw - 32px));
  padding: 22px 20px 28px;
  overflow: auto;
  transform: translateX(105%);
  z-index: 150;
}

#weeklyPlayerDrawer.weeklyPlayerDrawer.open {
  transform: translateX(0);
}

.weeklyDrawerHeader {
  display: grid;
  gap: 4px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(117, 145, 180, 0.22);
}

.weeklyDrawerHeader h2 {
  color: #f1f6ff;
  font-family: var(--font-display);
  font-size: 24px;
}

.weeklyDrawerHeader p {
  color: #8ea5c4;
  font-size: 11px;
}

.weeklyDrawerSection {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 10px;
  background: rgba(13, 31, 56, 0.62);
}

.weeklyDrawerSection h3 {
  color: #dbeafe;
  font-size: 12px;
}

.weeklyDrawerLead {
  justify-content: flex-start;
}

.weeklyDrawerLead strong {
  margin-left: auto;
  color: #93c5fd;
  font-family: var(--font-mono);
  font-size: 12px;
}

.weeklyDrawerCopy {
  color: #a9b9ce;
  font-size: 11px;
  line-height: 1.5;
}

#weeklyRankingsView :is(button, input, select, summary):focus-visible,
#weeklyPlayerDrawer :is(button, input, select):focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.88);
  outline-offset: 2px;
}

@media (max-width: 1120px) {
  .weeklyPageHero {
    grid-template-columns: 1fr;
  }

  .weeklyFilterGrid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
}

@media (max-width: 820px) {
  .weeklySummaryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weeklyTwoColumn {
    grid-template-columns: 1fr;
  }

  .weeklySelectionStatus {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 700px) {
  #weeklyRankingsView {
    padding-top: 8px;
  }

  .weeklyPageHero,
  .weeklyToolbar,
  .weeklySubsection {
    border-radius: 11px;
  }

  .weeklyPageHero {
    padding: 18px 16px;
  }

  .weeklyToolbar {
    display: grid;
    gap: 13px;
  }

  .weeklyFilterGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weeklyTableScroll {
    display: none;
  }

  .weeklyMobileCards {
    display: grid;
    gap: 9px;
  }

  .weeklyMobileCard {
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(117, 145, 180, 0.24);
    border-radius: 10px;
    background: rgba(11, 22, 39, 0.88);
  }

  .weeklyMobileCardHeader {
    justify-content: flex-start;
  }

  .weeklyMobileCardHeader .weeklyPlayerButton {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .weeklyMobileRank,
  .weeklyMobilePoints {
    color: #93c5fd;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  .weeklyMobilePoints {
    color: #dbeafe;
  }

  .weeklyMobileCardMeta {
    justify-content: flex-start;
    color: #8ea5c4;
    font-size: 10px;
  }

  .weeklyMobileCard .weeklyDetailsButton {
    justify-self: start;
  }
}

@media (max-width: 520px) {
  .weeklySummaryGrid,
  .weeklyFilterGrid {
    grid-template-columns: 1fr;
  }

  .weeklyHeroHelp {
    grid-template-columns: auto 1fr;
  }

  .weeklyHeroHelp > .infoIcon {
    grid-column: 2;
  }

  .weeklyMetricList > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .weeklyMetricList dd {
    text-align: left;
  }

  #weeklyPlayerDrawer.weeklyPlayerDrawer {
    top: 52px;
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
    padding-inline: 14px;
  }
}


/* ============================================================================
   COMPARE — season-average markers in the weekly chart
   ----------------------------------------------------------------------------
   When the weekly export stops before the most recent completed season, the
   board's season average (market_historical_2025_eos_ppg) appears as a labelled
   marker in a zone at the right, separated from the weekly area. Once weekly
   rows are available, that season is plotted normally.
   ========================================================================== */

#compareView .cmpMarkerDivider {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

/* Real, observed season average: solid. */
#compareView .cmpEosTick {
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
#compareView .cmpEosTick.playerA { stroke: var(--cmp-a); }
#compareView .cmpEosTick.playerB { stroke: var(--cmp-b); }

#compareView .cmpTrendSeasons span.isMarker {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--muted, #8A94A6);
  letter-spacing: 0;
}

/* ============================================================================
   WEEKLY RANKINGS — position-based ranking foundation overrides
   ========================================================================== */

#weeklyRankingsView .weeklyPageHeroCompact {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding: 15px 20px 16px;
}

#weeklyRankingsView .weeklyPageHeroCompact .weeklyTitleLine {
  margin: 3px 0 5px;
}

#weeklyRankingsView .weeklyPageHeroCompact h2 {
  font-size: clamp(23px, 2.4vw, 31px);
}

#weeklyRankingsView .weeklyPageHeroCompact .weeklyPageHeroText > p {
  max-width: 940px;
  margin: 0;
}

#weeklyRankingsView .weeklyPageHeroCompact .infoIcon {
  display: inline-grid;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  vertical-align: middle;
}

#weeklyRankingsView .weeklyToolbar {
  align-items: end;
}

.weeklyToolbarStatus {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr);
  gap: 4px 18px;
  min-width: min(540px, 100%);
  margin-left: auto;
  color: #9eb0c7;
  font-size: 11px;
}

.weeklyToolbarStatus > div {
  display: grid;
  gap: 5px;
  align-content: start;
}

.weeklyToolbarStatus > div:first-child {
  min-width: 135px;
}

.weeklyToolbarStatus strong {
  color: #dbeafe;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.weeklyToolbarStatus p {
  grid-column: 1 / -1;
  color: #7f94af;
  font-size: 10px;
  line-height: 1.4;
}

.weeklyBoardControls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: end;
  margin-bottom: 10px;
}

.weeklyPositionTabs {
  display: flex;
  min-width: 0;
  flex: 1 1 620px;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 5px;
  scrollbar-width: thin;
}

.weeklyPositionTabs button,
.weeklyCountControl select,
.weeklyObjectiveControl select {
  min-height: 34px;
  border: 1px solid #30435f;
  border-radius: 8px;
  background: #101c2d;
  color: #9eb0c7;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.weeklyPositionTabs button {
  min-width: 58px;
  padding: 7px 11px;
}

.weeklyPositionTabs button[aria-selected="true"] {
  border-color: rgba(96, 165, 250, 0.76);
  background: rgba(96, 165, 250, 0.19);
  color: #e8f2ff;
}

.weeklyCountControl,
.weeklyObjectiveControl {
  display: grid;
  flex: 0 0 auto;
  gap: 5px;
  color: #9eb0c7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.weeklyCountControl select,
.weeklyObjectiveControl select {
  min-width: 118px;
  padding: 0 10px;
  text-transform: none;
}

.weeklyBoardNotes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  color: #7f94af;
  font-size: 10px;
}

.weeklyBoardNotes > span:first-child {
  padding: 5px 8px;
  border: 1px solid rgba(117, 145, 180, 0.24);
  border-radius: 999px;
  color: #b9c9dd;
  font-family: var(--font-mono);
}

.weeklySupportDetails {
  min-width: 180px;
  border: 1px solid rgba(117, 145, 180, 0.20);
  border-radius: 8px;
  background: rgba(15, 31, 54, 0.45);
}

.weeklySupportDetails summary {
  padding: 7px 9px;
  color: #b9c9dd;
  cursor: pointer;
  font-weight: 800;
}

.weeklySupportDetails > p {
  max-width: 640px;
  padding: 0 10px 8px;
  color: #8ea5c4;
  font-size: 10px;
  line-height: 1.45;
}

.weeklyPillRow {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 10px 8px;
}

.weeklySupportNote {
  border-top: 1px solid rgba(117, 145, 180, 0.16);
  padding-top: 8px;
}

.weeklyRankingsTable {
  min-width: 1760px;
}

.weeklyRankingsTable th:nth-child(1),
.weeklyRankingsTable td:nth-child(1) {
  left: 0;
  min-width: 92px;
}

.weeklyRankingsTable th:nth-child(2),
.weeklyRankingsTable td:nth-child(2) {
  left: 92px;
  min-width: 108px;
}

.weeklyRankingsTable th:nth-child(3),
.weeklyRankingsTable td:nth-child(3) {
  left: 200px;
  min-width: 220px;
}

.weeklyRankingsTable td:nth-child(2),
.weeklyRankingsTable td:nth-child(8),
.weeklyRankingsTable td:nth-child(9),
.weeklyRankingsTable td:nth-child(10),
.weeklyRankingsTable td:nth-child(11),
.weeklyRankingsTable td:nth-child(12),
.weeklyRankingsTable td:nth-child(13),
.weeklyRankingsTable td:nth-child(14),
.weeklyRankingsTable td:nth-child(16) {
  color: #dbeafe;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.weeklyRankingsTable thead th:nth-child(3) {
  z-index: 7;
}

.weeklyPriorityFinalRank {
  color: #f4f8ff !important;
  font-weight: 900;
}

.weeklyTierStack,
.weeklyDetailsStack,
.weeklyMobileActions {
  display: grid;
  gap: 5px;
  justify-items: start;
}

.weeklyRecommendationSub {
  color: #8196b0;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
}

.weeklyTier-elite-start { border-color: rgba(147, 197, 253, 0.72); background: rgba(96, 165, 250, 0.24); color: #e5f0ff; }
.weeklyTier-strong-start { border-color: rgba(54, 194, 139, 0.56); background: rgba(54, 194, 139, 0.15); color: #9af3c8; }
.weeklyTier-standard-start { border-color: rgba(148, 163, 184, 0.42); color: #cbd5e1; }
.weeklyTier-flex-start { border-color: rgba(167, 139, 250, 0.56); background: rgba(167, 139, 250, 0.14); color: #ddd1ff; }
.weeklyTier-matchup-play { border-color: rgba(45, 212, 191, 0.52); background: rgba(45, 212, 191, 0.12); color: #9ef4e9; }
.weeklyTier-emergency-start { border-color: rgba(242, 180, 65, 0.52); background: rgba(242, 180, 65, 0.13); color: #f7cf78; }
.weeklyTier-bench { border-color: rgba(148, 163, 184, 0.32); color: #9caabd; }
.weeklyTier-avoid { border-color: rgba(236, 106, 96, 0.52); background: rgba(236, 106, 96, 0.12); color: #ffaaa3; }
.weeklyTier-injury-dependent { border-color: rgba(251, 146, 60, 0.58); background: rgba(251, 146, 60, 0.13); color: #ffc28f; }

.weeklyTrend {
  display: inline-flex;
  min-width: 38px;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 900;
}

.weeklyTrend-up { color: #8ff0c5; }
.weeklyTrend-down { color: #ffaaa3; }
.weeklyTrend-flat { color: #b9c9dd; }

.weeklyTierBreak th {
  position: static !important;
  padding: 7px 11px !important;
  border-top: 2px solid rgba(96, 165, 250, 0.42);
  background: rgba(96, 165, 250, 0.10) !important;
  color: #b9d8ff;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.weeklyTierCliff td {
  padding: 5px 11px !important;
  border-bottom: 1px solid rgba(242, 180, 65, 0.30) !important;
  background: rgba(242, 180, 65, 0.06) !important;
  color: #cdb66e;
  font-size: 10px;
}

.weeklyTierCliff span {
  margin-right: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.weeklyCompareCheck {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8ea5c4;
  font-size: 9px;
  font-weight: 700;
  text-transform: none;
}

.weeklyCompareCheck input {
  min-height: auto;
  accent-color: #60a5fa;
}

.weeklyMobilePriorityGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.weeklyMobilePriorityGrid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(117, 145, 180, 0.18);
  border-radius: 7px;
  background: rgba(15, 31, 54, 0.45);
}

.weeklyMobilePriorityGrid small {
  color: #7f94af;
  font-size: 9px;
  text-transform: uppercase;
}

.weeklyMobilePriorityGrid strong {
  overflow: hidden;
  color: #dbeafe;
  font-family: var(--font-mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weeklyMobileSecondary {
  border-top: 1px solid rgba(117, 145, 180, 0.18);
  padding-top: 7px;
}

.weeklyMobileSecondary summary {
  color: #9eb0c7;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.weeklyMobileSecondary .weeklyMetricList {
  margin-top: 6px;
}

.weeklyMobileActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.weeklyObjectiveControl {
  min-width: 122px;
  text-transform: none;
}

.weeklySourceTable {
  display: grid;
  gap: 0;
  border: 1px solid rgba(117, 145, 180, 0.18);
  border-radius: 8px;
  overflow: hidden;
  color: #b9c9dd;
  font-size: 10px;
}

.weeklySourceTable > div {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 70px minmax(80px, 0.9fr);
  gap: 8px;
  padding: 7px 8px;
  border-bottom: 1px solid rgba(117, 145, 180, 0.14);
}

.weeklySourceTable > div:last-child {
  border-bottom: 0;
}

.weeklySourceTableHeader {
  background: rgba(96, 165, 250, 0.10);
  color: #dbeafe;
  font-weight: 800;
}

.weeklySourceTable span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 820px) {
  .weeklyToolbarStatus {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
}

@media (max-width: 700px) {
  #weeklyRankingsView .weeklyPageHeroCompact {
    padding: 13px 14px 14px;
  }

  .weeklyBoardControls {
    align-items: stretch;
  }

  .weeklyPositionTabs {
    flex-basis: 100%;
  }

  .weeklyCountControl {
    width: 100%;
  }

  .weeklyCountControl select {
    width: 100%;
  }

  .weeklyMobilePriorityGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .weeklyToolbarStatus {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .weeklyToolbarStatus p {
    grid-column: auto;
  }

  .weeklyMobilePriorityGrid {
    grid-template-columns: 1fr;
  }

  .weeklyMobilePriorityGrid span {
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: center;
  }

  .weeklySupportDetails {
    width: 100%;
  }

  .weeklySourceTable > div {
    grid-template-columns: minmax(0, 1fr) 54px;
  }

  .weeklySourceTable > div span:last-child {
    grid-column: 1 / -1;
    color: #8ea5c4;
  }
}


/* ============================================================================
   TEAMS — tabbed team workspace
   Colour contract: green strength · red weakness · blue neutral context
   amber caution · purple opportunity/volume · position colours for players.
   Colour is always paired with text.
   ========================================================================== */

#teamsView {
  --tm-good: var(--good, #36C28B);
  --tm-bad: var(--bad, #EC6A60);
  --tm-warn: var(--warn, #F2B441);
  --tm-info: var(--accent, #5B9DF9);
  --tm-purple: #A78BFA;
  --tm-line: var(--line, #232C3D);
  --tm-card: var(--panel-soft, #18202F);
}

#teamsView .tmFlow { display: flex; flex-direction: column; gap: 14px; }
#teamsView .tone-good { color: var(--tm-good); }
#teamsView .tone-bad { color: var(--tm-bad); }
#teamsView .tone-warn { color: var(--tm-warn); }
#teamsView .tone-info { color: var(--tm-info); }
#teamsView .tone-purple { color: var(--tm-purple); }
#teamsView .tone-muted { color: var(--muted, #8A94A6); }

#teamsView .pos-qb { --pc: var(--pos-qb, #3B82F6); }
#teamsView .pos-rb { --pc: var(--pos-rb, #10B981); }
#teamsView .pos-wr { --pc: var(--pos-wr, #38BDF8); }
#teamsView .pos-te { --pc: var(--pos-te, #8B5CF6); }
#teamsView .pos-k { --pc: var(--pos-k, #F59E0B); }
#teamsView .pos-dst { --pc: var(--pos-dst, #64748B); }

#teamsView .tmEyebrow {
  display: block; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted, #8A94A6); margin-bottom: 4px;
}
#teamsView .tmNote { margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--muted, #8A94A6); }
#teamsView .tmEmpty {
  margin: 6px 0; padding: 9px 12px; border: 1px dashed var(--tm-line);
  border-radius: 8px; font-size: 12px; color: var(--muted, #8A94A6);
}
#teamsView .tmRead { white-space: normal; color: var(--muted, #8A94A6); max-width: 42ch; }

/* ------------------------------------------------------------------- hero -- */

#teamsView .tmHero {
  display: grid; gap: 12px; padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--tm-line);
  background:
    radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--hl, var(--tm-info)) 15%, transparent), transparent 58%),
    var(--panel, #121826);
}
#teamsView .tmHero.tone-good { --hl: var(--tm-good); }
#teamsView .tmHero.tone-bad { --hl: var(--tm-bad); }
#teamsView .tmHero.tone-info { --hl: var(--tm-info); }

#teamsView .tmHeroTop { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 18px; }
#teamsView .tmHeroTop h2 {
  font-family: var(--font-display, inherit);
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.06;
  letter-spacing: -0.02em; color: var(--head, #F3F6FB);
}
#teamsView .tmClassification { margin-top: 5px; font-size: 12.5px; color: var(--hl, var(--tm-info)); font-weight: 600; }
#teamsView .tmHeroRead {
  margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--ink, #EAEEF5);
  border-left: 3px solid var(--hl, var(--tm-info)); padding-left: 11px; max-width: 76ch;
}
#teamsView .tmFitFlags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
#teamsView .tmFitFlags dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #8A94A6); }
#teamsView .tmFitFlags dd { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--ink, #EAEEF5); line-height: 1.35; }

#teamsView .tmHeroCards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
#teamsView .tmMetricCard {
  display: grid; gap: 1px; padding: 9px 11px; border-radius: 10px;
  background: var(--tm-card); border: 1px solid var(--tm-line);
  border-top: 2px solid var(--mh, var(--tm-info));
}
#teamsView .tmMetricCard.tone-good { --mh: var(--tm-good); }
#teamsView .tmMetricCard.tone-bad { --mh: var(--tm-bad); }
#teamsView .tmMetricCard.tone-warn { --mh: var(--tm-warn); }
#teamsView .tmMetricCard.tone-info { --mh: var(--tm-info); }
#teamsView .tmMetricCard.tone-purple { --mh: var(--tm-purple); }
#teamsView .tmMetricCard.tone-muted { --mh: var(--muted, #8A94A6); }
#teamsView .tmMetricCard span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6); }
#teamsView .tmMetricCard strong { font-size: 17px; color: var(--head, #F3F6FB); font-variant-numeric: tabular-nums; }
#teamsView .tmMetricCard em { font-style: normal; font-size: 10px; color: var(--muted, #8A94A6); }

/* ------------------------------------------------------------------- tabs -- */

#teamsView .tmTabs {
  /* Keep the internal index below the sticky product header and global tabs
     while the restored Overview sections are being scrolled. */
  position: sticky; top: 126px; z-index: 30;
  display: flex; gap: 4px; padding: 5px; border-radius: 11px;
  background: rgba(10, 14, 22, 0.94); backdrop-filter: blur(6px);
  border: 1px solid var(--tm-line); overflow-x: auto;
}
#teamsView .tmTabs button { 
  padding: 8px 15px; border: 0; border-radius: 8px; background: none;
  color: var(--muted, #8A94A6); font-size: 13px; cursor: pointer; white-space: nowrap;
}
#teamsView .tmTabs button.active { background: var(--tm-info); color: #08111F; font-weight: 600; }
#teamsView .tmTabBlurb { font-size: 11.5px; color: var(--muted, #8A94A6); margin: -4px 2px 0; }

/* Compact workbook header: the Teams overview keeps the dense, scan-first
   format of the original page while using the current dashboard palette. */
#teamsView .tmCompactHero { display: grid; gap: 10px; }
#teamsView .tmCompactPanel {
  padding: 11px 14px; border: 1px solid var(--tm-line); border-radius: 10px;
  background: var(--panel, #121826);
}

#teamsView .tmTeamHeading { margin: 0 0 4px; }
#teamsView .teamIdentity-hero strong { font-size: inherit; }
#teamsView .teamIdentity-micro img { width: 18px; height: 18px; }
#teamsView .tmInterpretation p,
#teamsView .tmWorkbookContext p,
#teamsView .tmDraftContext p {
  color: var(--muted, #8A94A6); font-size: 11.5px; line-height: 1.45;
}
#teamsView .tmInterpretation p { margin: 0; }
#teamsView .tmWorkbookContext h2 {
  margin: 0 0 3px; color: var(--head, #F3F6FB);
  font-family: var(--font-display, inherit); font-size: 20px; line-height: 1;
}
#teamsView .tmWorkbookContext p { max-width: 105ch; margin: 0; color: var(--ink, #EAEEF5); }
#teamsView .tmCompactMetrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
#teamsView .tmCompactMetric {
  display: grid; align-content: start; gap: 3px; min-height: 74px; padding: 8px 10px;
  border: 1px solid var(--tm-line); border-top: 2px solid var(--mh, var(--tm-info));
  border-radius: 8px; background: var(--tm-card);
}
#teamsView .tmCompactMetric.tone-good { --mh: var(--tm-good); }
#teamsView .tmCompactMetric.tone-bad { --mh: var(--tm-bad); }
#teamsView .tmCompactMetric.tone-warn { --mh: var(--tm-warn); }
#teamsView .tmCompactMetric.tone-info { --mh: var(--tm-info); }
#teamsView .tmCompactMetric span,
#teamsView .tmDraftContext .tmEyebrow { font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #8A94A6); }
#teamsView .tmCompactMetric strong { color: var(--head, #F3F6FB); font-size: 16px; line-height: 1.1; font-variant-numeric: tabular-nums; }
#teamsView .tmCompactMetric small { display: block; margin-top: 1px; color: var(--tm-info, #5B9DF9); font-size: 9px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
#teamsView .tmCompactMetric em { font-style: normal; color: var(--muted, #8A94A6); font-size: 9.5px; line-height: 1.3; }
#teamsView .tmDraftContext { padding-block: 9px; }
#teamsView .tmDraftContext h3 { margin: 1px 0 3px; color: var(--head, #F3F6FB); font-size: 13px; }
#teamsView .tmDraftContext p { margin: 0; }

@media (max-width: 1180px) {
  #teamsView .tmCompactMetrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  #teamsView .tmCompactMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #teamsView .tmCompactPanel { padding: 10px 12px; }
}

#teamsView .tmSection {
  padding: 15px 17px; border-radius: 13px;
  border: 1px solid var(--tm-line); background: var(--panel, #121826);
}
#teamsView .tmSectionHead {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--tm-line);
}
#teamsView .tmSectionHead h3 { font-family: var(--font-display, inherit); font-size: 16px; color: var(--head, #F3F6FB); }
#teamsView .tmSectionHead > div > p { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--muted, #8A94A6); max-width: 88ch; }

#teamsView .tmGhostButton {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--tm-line);
  background: var(--tm-card); color: var(--ink, #EAEEF5); font-size: 12px; cursor: pointer;
}
#teamsView .tmGhostButton:hover { border-color: var(--tm-info); color: var(--tm-info); }
#teamsView .tmGhostButton.small { padding: 4px 10px; font-size: 11px; }
#teamsView .tmSegmented {
  display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px;
  border: 1px solid var(--tm-line); border-radius: 9px; background: rgba(0, 0, 0, 0.22);
}
#teamsView .tmSegmented button {
  padding: 5px 10px; border: 0; border-radius: 7px; background: none;
  color: var(--muted, #8A94A6); font-size: 11.5px; cursor: pointer;
}
#teamsView .tmSegmented button.active { background: var(--tm-info); color: #08111F; font-weight: 600; }
#teamsView .tmSelect {
  display: inline-flex; flex-direction: column; gap: 3px;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6);
}
#teamsView .tmSelect select {
  padding: 5px 9px; border-radius: 8px; border: 1px solid var(--tm-line);
  background: var(--panel, #121826); color: var(--ink, #EAEEF5); font-size: 12px;
  text-transform: none; letter-spacing: 0;
}

/* --------------------------------------------------------------- concepts -- */

#teamsView .tmConceptGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 11px; }
#teamsView .tmConcept {
  padding: 12px 14px; border-radius: 11px; background: var(--tm-card);
  border: 1px solid var(--tm-line); border-left: 3px solid var(--ch, var(--tm-info));
}
#teamsView .tmConcept.tone-good { --ch: var(--tm-good); }
#teamsView .tmConcept.tone-info { --ch: var(--tm-info); }
#teamsView .tmConcept.tone-purple { --ch: var(--tm-purple); }
#teamsView .tmConcept header { margin-bottom: 9px; }
#teamsView .tmConcept header strong { display: block; font-size: 13.5px; color: var(--head, #F3F6FB); }
#teamsView .tmConcept header em { font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }
#teamsView .tmConcept dl { display: grid; gap: 6px; margin: 0; }
#teamsView .tmConcept dl > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
#teamsView .tmConcept dt { font-size: 11.5px; color: var(--muted, #8A94A6); }
#teamsView .tmConcept dd { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink, #EAEEF5); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- takeaway -- */

#teamsView .tmTakeaway {
  padding: 14px 16px; border-radius: 12px; background: var(--tm-card);
  border: 1px solid var(--tm-line); border-left: 3px solid var(--th, var(--tm-info));
}
#teamsView .tmTakeaway.tone-good { --th: var(--tm-good); }
#teamsView .tmTakeaway.tone-bad { --th: var(--tm-bad); }
#teamsView .tmTakeaway.tone-info { --th: var(--tm-info); }
#teamsView .tmTakeawayTop { display: flex; flex-wrap: wrap; gap: 9px; align-items: baseline; margin-bottom: 8px; }
#teamsView .tmTakeawayAction { font-size: 14px; font-weight: 700; color: var(--th, var(--tm-info)); }
#teamsView .tmTakeawayConf { font-size: 11px; color: var(--muted, #8A94A6); }
#teamsView .tmTakeawayMain { font-size: 13px; line-height: 1.55; color: var(--ink, #EAEEF5); }
#teamsView .tmTakeawayMeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 11px 0 0; }
#teamsView .tmTakeawayMeta dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #8A94A6); }
#teamsView .tmTakeawayMeta dd { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted, #8A94A6); }

/* ----------------------------------------------------------------- tables -- */

#teamsView .tmTableScroll { overflow-x: auto; border: 1px solid var(--tm-line); border-radius: 10px; }
#teamsView .tmTable { width: 100%; border-collapse: collapse; font-size: 12px; }
#teamsView .tmTable th, #teamsView .tmTable td {
  padding: 8px 11px; text-align: left; border-bottom: 1px solid var(--tm-line);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#teamsView .tmTable thead th {
  position: sticky; top: 0; background: var(--tm-card); z-index: 1;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #8A94A6);
}
#teamsView .tmTable tbody th { color: var(--ink, #EAEEF5); font-weight: 600; }
#teamsView .tmTable tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
#teamsView .tmTable tbody tr[data-tm="openPlayer"] { cursor: pointer; }

#teamsView .tmPosPill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 2px 7px; border-radius: 5px;
  font-size: 10.5px; font-weight: 700; color: #08111F; background: var(--pc, #64748B);
}
#teamsView .tmFitTag {
  padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 600; white-space: nowrap;
  color: var(--ft, var(--tm-info));
  background: color-mix(in srgb, var(--ft, var(--tm-info)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ft, var(--tm-info)) 34%, transparent);
}
#teamsView .tmFitTag.tone-good { --ft: var(--tm-good); }
#teamsView .tmFitTag.tone-bad { --ft: var(--tm-bad); }
#teamsView .tmFitTag.tone-warn { --ft: var(--tm-warn); }
#teamsView .tmFitTag.tone-info { --ft: var(--tm-info); }
#teamsView .tmFitTag.tone-purple { --ft: var(--tm-purple); }
#teamsView .tmFitTag.tone-muted { --ft: var(--muted, #8A94A6); }

/* Opportunity shape as compact rows, capped well under 350px. */
#teamsView .tmBarRows { display: grid; gap: 8px; max-height: 340px; overflow-y: auto; }
#teamsView .tmBarRow { display: grid; grid-template-columns: 150px minmax(0, 1fr) 62px 62px; gap: 10px; align-items: center; }
#teamsView .tmBarLabel { font-size: 11.5px; color: var(--ink, #EAEEF5); }
#teamsView .tmBarTrack {
  position: relative; height: 10px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.07); overflow: visible;
}
#teamsView .tmBarTrack.small { height: 7px; }
#teamsView .tmBarFill { display: block; height: 100%; border-radius: 5px; background: var(--tm-purple); }
#teamsView .tmBarMark {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--head, #F3F6FB); border-radius: 2px;
}
#teamsView .tmBarMarkKey { display: inline-block; width: 2px; height: 11px; background: var(--head, #F3F6FB); vertical-align: middle; margin-right: 5px; }
#teamsView .tmBarValue, #teamsView .tmBarDiff { font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- strengths / trends */

#teamsView .tmSWGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
#teamsView .tmSWGrid h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 7px; }
#teamsView .tmChipRow { display: flex; flex-wrap: wrap; gap: 6px; }
#teamsView .tmMetricChip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer; font-size: 11.5px;
  color: var(--ink, #EAEEF5);
  background: color-mix(in srgb, var(--ct, var(--tm-info)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ct, var(--tm-info)) 34%, transparent);
}
#teamsView .tmMetricChip.tone-good { --ct: var(--tm-good); }
#teamsView .tmMetricChip.tone-bad { --ct: var(--tm-bad); }
#teamsView .tmMetricChip b { color: var(--ct, var(--tm-info)); font-variant-numeric: tabular-nums; }

#teamsView .tmTrendCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
#teamsView .tmTrendCard {
  display: grid; gap: 2px; padding: 11px 13px; border-radius: 11px; cursor: pointer;
  background: var(--tm-card); border: 1px solid var(--tm-line);
  border-left: 3px solid var(--tt, var(--tm-info));
}
#teamsView .tmTrendCard.tone-good { --tt: var(--tm-good); }
#teamsView .tmTrendCard.tone-bad { --tt: var(--tm-bad); }
#teamsView .tmTrendCard.tone-warn { --tt: var(--tm-warn); }
#teamsView .tmTrendCard.tone-info { --tt: var(--tm-info); }
#teamsView .tmTrendCard.tone-muted { --tt: var(--muted, #8A94A6); }
#teamsView .tmTrendCard span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6); }
#teamsView .tmTrendCard strong { font-size: 15px; color: var(--tt, var(--tm-info)); }
#teamsView .tmTrendCard em { font-style: normal; font-size: 11px; color: var(--muted, #8A94A6); line-height: 1.4; }

/* Trend charts capped so they cannot dominate the page. */
#teamsView .tmTrendGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
#teamsView .tmDetailedStatsTrendGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#teamsView .tmTrendGrid .teamTrendCard, #teamsView .tmTrendGrid > article { max-height: 300px; overflow: hidden; }
#teamsView .tmTrendGrid svg { max-height: 210px; }
#teamsView .tmVisualGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
#teamsView .tmVisualCard {
  padding: 12px 14px; border-radius: 11px;
  background: var(--tm-card); border: 1px solid var(--tm-line);
}

/* --------------------------------------------------------------- neighbours */

#teamsView .tmNeighbourList { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; counter-reset: none; }
#teamsView .tmNeighbourList li button {
  display: grid; grid-template-columns: 34px minmax(110px, 1.35fr) minmax(0, 1fr) 54px auto;
  gap: 10px; align-items: center; width: 100%; cursor: pointer;
  padding: 7px 10px; border-radius: 9px; text-align: left;
  background: var(--tm-card); border: 1px solid var(--tm-line); color: var(--ink, #EAEEF5);
}
#teamsView .tmNeighbourList li.isSelf button {
  border-color: var(--tm-info); background: color-mix(in srgb, var(--tm-info) 13%, var(--tm-card));
}
#teamsView .tmNeighbourRank { font-size: 11px; color: var(--muted, #8A94A6); font-variant-numeric: tabular-nums; }
#teamsView .tmNeighbourName { font-size: 12.5px; font-weight: 600; }
#teamsView .tmNeighbourScore { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ defence note -- */

#teamsView .tmDefNote {
  padding: 11px 13px; margin-bottom: 12px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--tm-info) 30%, var(--tm-line));
  background: rgba(91, 157, 249, 0.07);
}
#teamsView .tmDefNote strong { display: block; font-size: 12px; color: var(--tm-info); margin-bottom: 5px; }
#teamsView .tmDefNote ul { margin: 0; padding-left: 17px; }
#teamsView .tmDefNote li { font-size: 11.5px; line-height: 1.55; color: var(--muted, #8A94A6); }
#teamsView .tmDefNote b { color: var(--ink, #EAEEF5); }

/* ------------------------------------------------------------------ roster -- */

#teamsView .tmRosterSummary { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 9px; margin-bottom: 12px; }
#teamsView .tmRosterStat {
  padding: 9px 11px; border-radius: 10px; background: var(--tm-card);
  border: 1px solid var(--tm-line); border-top: 2px solid var(--rs, var(--tm-info));
}
#teamsView .tmRosterStat.tone-good { --rs: var(--tm-good); }
#teamsView .tmRosterStat.tone-bad { --rs: var(--tm-bad); }
#teamsView .tmRosterStat.tone-warn { --rs: var(--tm-warn); }
#teamsView .tmRosterStat.tone-info { --rs: var(--tm-info); }
#teamsView .tmRosterStat.tone-purple { --rs: var(--tm-purple); }
#teamsView .tmRosterStat dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6); }
#teamsView .tmRosterStat dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; color: var(--head, #F3F6FB); font-variant-numeric: tabular-nums; }
#teamsView .tmRosterControls { display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end; margin-bottom: 12px; }

#teamsView .tmPlayerGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; align-items: start; }
#teamsView .tmPlayerCard {
  display: grid; gap: 8px; align-content: start;
  padding: 12px 13px; border-radius: 11px;
  background: var(--tm-card); border: 1px solid var(--tm-line);
  border-left: 3px solid var(--pc, var(--tm-info));
}
#teamsView .tmPlayerCard header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
#teamsView .tmPlayerCard header strong { font-size: 13.5px; color: var(--head, #F3F6FB); }
#teamsView .tmPlayerMeta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 11px; color: var(--muted, #8A94A6); }
#teamsView .tmBadgeRow { display: flex; flex-wrap: wrap; gap: 5px; }
#teamsView .tmBadge {
  padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 600;
  color: var(--bt, var(--tm-info));
  background: color-mix(in srgb, var(--bt, var(--tm-info)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--bt, var(--tm-info)) 32%, transparent);
}
#teamsView .tmBadge.tone-good { --bt: var(--tm-good); }
#teamsView .tmBadge.tone-bad { --bt: var(--tm-bad); }
#teamsView .tmBadge.tone-warn { --bt: var(--tm-warn); }
#teamsView .tmBadge.tone-info { --bt: var(--tm-info); }
#teamsView .tmBadge.tone-purple { --bt: var(--tm-purple); }
#teamsView .tmAvail {
  padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap;
  color: var(--at, var(--muted));
  background: color-mix(in srgb, var(--at, var(--muted, #8A94A6)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--at, var(--muted, #8A94A6)) 32%, transparent);
}
#teamsView .tmAvail.tone-positive { --at: var(--tm-good); }
#teamsView .tmAvail.tone-caution { --at: var(--tm-bad); }
#teamsView .tmAvail.tone-keeper { --at: var(--keeper, #C9A24B); }
#teamsView .tmAvail.tone-muted { --at: var(--muted, #8A94A6); }

/* -------------------------------------------------------------- responsive -- */

@media (max-width: 1180px) {
  #teamsView .tmHeroTop { grid-template-columns: 1fr; }
  #teamsView .tmHeroCards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  #teamsView .tmBarRow { grid-template-columns: 118px minmax(0, 1fr) 54px; }
  #teamsView .tmBarDiff { display: none; }
  #teamsView .tmNeighbourList li button { grid-template-columns: 30px 46px minmax(0, 1fr) 46px; }
  #teamsView .tmNeighbourList .tmFitTag { display: none; }
}

@media (max-width: 720px) {
  #teamsView .tmSection { padding: 12px 12px; }
  #teamsView .tmHero { padding: 14px 13px; }
  #teamsView .tmHeroCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #teamsView .tmFitFlags { grid-template-columns: 1fr; }
  #teamsView .tmConceptGrid, #teamsView .tmPlayerGrid, #teamsView .tmTrendGrid, #teamsView .tmVisualGrid { grid-template-columns: 1fr; }
  #teamsView .tmRosterControls { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  #teamsView .tmSegmented { flex-wrap: nowrap; }
  #teamsView .tmSegmented button { white-space: nowrap; }
}


/* ============================================================================
   DRAFT HISTORY — archive and evaluation workspace
   Colour contract: green clear value · red clear reach · blue neutral/aligned
   amber uncertainty or low confidence · purple retrospective outcome
   grey insufficient pricing. Colour is never used alone; every accent is
   paired with a text badge. Fully filled red is not used at all here, because
   no evaluation on this page reaches the confidence such emphasis implies.
   ========================================================================== */

#draftHistoryView {
  --dh-good: var(--good, #36C28B);
  --dh-bad: var(--bad, #EC6A60);
  --dh-warn: var(--warn, #F2B441);
  --dh-info: var(--accent, #5B9DF9);
  --dh-purple: #A78BFA;
  --dh-line: var(--line, #232C3D);
  --dh-card: var(--panel-soft, #18202F);
}

#draftHistoryView .dhFlow { display: flex; flex-direction: column; gap: 14px; }
#draftHistoryView .tone-good { color: var(--dh-good); }
#draftHistoryView .tone-bad { color: var(--dh-bad); }
#draftHistoryView .tone-warn { color: var(--dh-warn); }
#draftHistoryView .tone-info { color: var(--dh-info); }
#draftHistoryView .tone-purple { color: var(--dh-purple); }
#draftHistoryView .tone-muted { color: var(--muted, #8A94A6); }

#draftHistoryView .pos-qb { --pc: var(--pos-qb, #3B82F6); }
#draftHistoryView .pos-rb { --pc: var(--pos-rb, #10B981); }
#draftHistoryView .pos-wr { --pc: var(--pos-wr, #38BDF8); }
#draftHistoryView .pos-te { --pc: var(--pos-te, #8B5CF6); }
#draftHistoryView .pos-k { --pc: var(--pos-k, #F59E0B); }
#draftHistoryView .pos-dst { --pc: var(--pos-dst, #64748B); }

#draftHistoryView .dhEyebrow {
  display: block; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted, #8A94A6); margin-bottom: 4px;
}
#draftHistoryView .dhNote { margin-top: 8px; font-size: 11.5px; line-height: 1.55; color: var(--muted, #8A94A6); }
#draftHistoryView .dhEmpty {
  margin: 6px 0; padding: 9px 12px; border: 1px dashed var(--dh-line);
  border-radius: 8px; font-size: 12px; color: var(--muted, #8A94A6);
}
#draftHistoryView .dhRead { white-space: normal; color: var(--muted, #8A94A6); max-width: 44ch; }
#draftHistoryView .dhDim { font-style: normal; color: var(--muted, #8A94A6); opacity: 0.8; }
#draftHistoryView .dhSubhead { margin: 16px 0 9px; font-size: 13px; color: var(--head, #F3F6FB); display: flex; align-items: center; gap: 8px; }

/* -------------------------------------------------------------------- hero */

#draftHistoryView .dhHero {
  display: grid; gap: 12px; padding: 16px 18px; border-radius: 16px;
  border: 1px solid var(--dh-line);
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(242, 180, 65, 0.10), transparent 58%),
    var(--panel, #121826);
}
#draftHistoryView .dhHeroTop { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; }
#draftHistoryView .dhHeroTop h2 {
  font-family: var(--font-display, inherit);
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.06;
  letter-spacing: -0.02em; color: var(--head, #F3F6FB);
}
#draftHistoryView .dhHeroSub { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--muted, #8A94A6); max-width: 74ch; }

/* The data-basis badge is deliberately prominent, not small print. */
#draftHistoryView .dhBasisBadge {
  display: grid; gap: 2px; padding: 11px 14px; border-radius: 11px; max-width: 380px;
  border: 1px solid color-mix(in srgb, var(--bb, var(--dh-warn)) 42%, transparent);
  background: color-mix(in srgb, var(--bb, var(--dh-warn)) 11%, transparent);
}
#draftHistoryView .dhBasisBadge.tone-warn { --bb: var(--dh-warn); }
#draftHistoryView .dhBasisBadge.tone-good { --bb: var(--dh-good); }
#draftHistoryView .dhBasisBadge span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #8A94A6); }
#draftHistoryView .dhBasisBadge strong { font-size: 14px; color: var(--bb, var(--dh-warn)); }
#draftHistoryView .dhBasisBadge em { font-style: normal; font-size: 11px; line-height: 1.45; color: var(--ink, #EAEEF5); }

#draftHistoryView .dhHeroStats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin: 0; }
#draftHistoryView .dhHeroStats div { padding: 8px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--dh-line); }
#draftHistoryView .dhHeroStats dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #8A94A6); }
#draftHistoryView .dhHeroStats dd { margin: 3px 0 0; font-size: 15px; font-weight: 700; color: var(--head, #F3F6FB); font-variant-numeric: tabular-nums; }

/* Hero metrics: make the draft-history snapshot read as a set of signals,
   with coverage and provenance metrics visually distinct from draft volume. */
#draftHistoryView .dhHeroStats div {
  --stat-accent: var(--dh-info);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 46px;
  padding: 8px 10px 9px;
  border-color: color-mix(in srgb, var(--stat-accent) 24%, var(--dh-line));
  background:
    radial-gradient(120% 115% at 100% 0%, color-mix(in srgb, var(--stat-accent) 18%, transparent), transparent 68%),
    linear-gradient(145deg, color-mix(in srgb, var(--stat-accent) 8%, transparent), rgba(255, 255, 255, 0.018) 72%),
    color-mix(in srgb, var(--dh-card) 88%, #0B1120);
  box-shadow: 0 5px 14px rgba(3, 7, 15, 0.16);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
#draftHistoryView .dhHeroStats div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--stat-accent), transparent);
  opacity: 0.9;
}
#draftHistoryView .dhHeroStats div::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 54px;
  height: 54px;
  right: -21px;
  bottom: -27px;
  border-radius: 50%;
  background: var(--stat-accent);
  opacity: 0.08;
  filter: blur(2px);
}
#draftHistoryView .dhHeroStats div:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--stat-accent) 48%, var(--dh-line));
  box-shadow: 0 9px 20px rgba(3, 7, 15, 0.25);
}
#draftHistoryView .dhHeroStats div:nth-child(1) { --stat-accent: #5B9DF9; }
#draftHistoryView .dhHeroStats div:nth-child(2) { --stat-accent: #A78BFA; }
#draftHistoryView .dhHeroStats div:nth-child(3) { --stat-accent: #F2B441; }
#draftHistoryView .dhHeroStats div:nth-child(4) { --stat-accent: #36C28B; }
#draftHistoryView .dhHeroStats div:nth-child(5) { --stat-accent: #38BDF8; }
#draftHistoryView .dhHeroStats div:nth-child(6) { --stat-accent: #EC6A60; }
#draftHistoryView .dhHeroStats dt { color: color-mix(in srgb, var(--stat-accent) 76%, var(--muted, #8A94A6)); }
#draftHistoryView .dhHeroStats dd { color: var(--stat-accent); text-shadow: 0 0 16px color-mix(in srgb, var(--stat-accent) 20%, transparent); }

#draftHistoryView .dhControls { display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end; }
#draftHistoryView .dhSelect {
  display: inline-flex; flex-direction: column; gap: 3px;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6);
}
#draftHistoryView .dhSelect select, #draftHistoryView .dhSearch {
  padding: 6px 9px; border-radius: 8px; border: 1px solid var(--dh-line);
  background: var(--panel, #121826); color: var(--ink, #EAEEF5); font-size: 12.5px;
  text-transform: none; letter-spacing: 0;
}
#draftHistoryView .dhSearch { min-width: 220px; }
#draftHistoryView .dhGhostButton {
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--dh-line);
  background: var(--dh-card); color: var(--ink, #EAEEF5); font-size: 12px; cursor: pointer;
}
#draftHistoryView .dhGhostButton:hover { border-color: var(--dh-info); color: var(--dh-info); }
#draftHistoryView .dhGhostButton.small { padding: 4px 10px; font-size: 11px; }
#draftHistoryView .dhSegmented {
  display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px;
  border: 1px solid var(--dh-line); border-radius: 9px; background: rgba(0, 0, 0, 0.22);
}
#draftHistoryView .dhSegmented button {
  padding: 5px 10px; border: 0; border-radius: 7px; background: none;
  color: var(--muted, #8A94A6); font-size: 11.5px; cursor: pointer;
}
#draftHistoryView .dhSegmented button.active { background: var(--dh-info); color: #08111F; font-weight: 600; }

/* Unsupported grade bases are visibly disabled rather than hidden. */
#draftHistoryView .dhBasisPicker {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px;
  border: 1px solid var(--dh-line); border-radius: 9px; background: rgba(0, 0, 0, 0.22);
}
#draftHistoryView .dhBasisPicker > span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6); margin-right: 3px; }
#draftHistoryView .dhBasisOption {
  padding: 4px 9px; border-radius: 7px; border: 0; background: none;
  color: var(--muted, #8A94A6); font-size: 11px; cursor: pointer;
}
#draftHistoryView .dhBasisOption:disabled { opacity: 0.38; cursor: not-allowed; text-decoration: line-through; }
#draftHistoryView .dhBasisOption.active { background: var(--dh-warn); color: #08111F; font-weight: 600; }

#draftHistoryView .dhScopeLine { font-size: 11.5px; color: var(--muted, #8A94A6); }
#draftHistoryView .dhScopeLine b { color: var(--ink, #EAEEF5); }

#draftHistoryView .dhKeeperNote {
  display: grid; gap: 3px; padding: 10px 13px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--dh-info) 30%, var(--dh-line));
  background: rgba(91, 157, 249, 0.07);
}
#draftHistoryView .dhKeeperNote strong { font-size: 12px; color: var(--dh-info); }
#draftHistoryView .dhKeeperNote span { font-size: 11.5px; line-height: 1.55; color: var(--muted, #8A94A6); }
#draftHistoryView .dhKeeperNote b { color: var(--ink, #EAEEF5); }

#draftHistoryView .dhTabs {
  position: sticky; top: 0; z-index: 30;
  display: flex; gap: 4px; padding: 5px; border-radius: 11px;
  background: rgba(10, 14, 22, 0.94); backdrop-filter: blur(6px);
  border: 1px solid var(--dh-line); overflow-x: auto;
}
#draftHistoryView .dhTabs button {
  padding: 8px 14px; border: 0; border-radius: 8px; background: none;
  color: var(--muted, #8A94A6); font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
#draftHistoryView .dhTabs button.active { background: var(--dh-info); color: #08111F; font-weight: 600; }

#draftHistoryView .dhSection {
  padding: 15px 17px; border-radius: 13px;
  border: 1px solid var(--dh-line); background: var(--panel, #121826);
}
#draftHistoryView .dhSectionHead {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--dh-line);
}
#draftHistoryView .dhSectionHead h3 { font-family: var(--font-display, inherit); font-size: 16px; color: var(--head, #F3F6FB); }
#draftHistoryView .dhSectionHead > div > p { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--muted, #8A94A6); max-width: 90ch; }
#draftHistoryView .dhSectionActions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }

/* ------------------------------------------------------------------ badges */

#draftHistoryView .dhPosPill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 2px 7px; border-radius: 5px;
  font-size: 10.5px; font-weight: 700; color: #08111F; background: var(--pc, #64748B);
}
#draftHistoryView .dhRetroBadge {
  padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 600; white-space: nowrap;
  color: var(--rb, var(--dh-info));
  background: color-mix(in srgb, var(--rb, var(--dh-info)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--rb, var(--dh-info)) 34%, transparent);
}
#draftHistoryView .dhRetroBadge.tone-purple { --rb: var(--dh-purple); }
#draftHistoryView .dhRetroBadge.tone-warn { --rb: var(--dh-warn); }
#draftHistoryView .dhRetroBadge.tone-info { --rb: var(--dh-info); }
#draftHistoryView .dhRetroBadge.tone-muted { --rb: var(--muted, #8A94A6); }
#draftHistoryView .dhConf {
  padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap;
  color: var(--cf, var(--muted));
  background: color-mix(in srgb, var(--cf, var(--muted, #8A94A6)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--cf, var(--muted, #8A94A6)) 32%, transparent);
}
#draftHistoryView .dhConf.tone-warn { --cf: var(--dh-warn); }
#draftHistoryView .dhConf.tone-muted { --cf: var(--muted, #8A94A6); }
#draftHistoryView .dhBasisTag { font-size: 10px; color: var(--muted, #8A94A6); }

/* ------------------------------------------------------------------ tables */

#draftHistoryView .dhTableScroll { overflow: auto; max-height: 620px; border: 1px solid var(--dh-line); border-radius: 10px; }
#draftHistoryView .dhTable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
#draftHistoryView .dhTable th, #draftHistoryView .dhTable td {
  padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--dh-line);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#draftHistoryView .dhTable thead th {
  position: sticky; top: 0; z-index: 2; background: var(--dh-card);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #8A94A6);
}
#draftHistoryView .dhTable tbody th { color: var(--ink, #EAEEF5); font-weight: 600; }
#draftHistoryView .dhTable tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
#draftHistoryView .dhTable tr.isMissing { opacity: 0.6; }
#draftHistoryView .dhTable tr.isKeeper { background: rgba(201, 162, 75, 0.07); }
#draftHistoryView .dhSticky { position: sticky; left: 0; z-index: 1; background: var(--panel, #121826); }
#draftHistoryView .dhSticky2 { position: sticky; left: 78px; z-index: 1; background: var(--panel, #121826); }
#draftHistoryView .dhTable thead .dhSticky, #draftHistoryView .dhTable thead .dhSticky2 { z-index: 3; background: var(--dh-card); }

#draftHistoryView .dhStatGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; }
#draftHistoryView .dhStat { padding: 9px 11px; border-radius: 9px; background: var(--dh-card); border: 1px solid var(--dh-line); }
#draftHistoryView .dhStat dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6); }
#draftHistoryView .dhStat dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--head, #F3F6FB); font-variant-numeric: tabular-nums; }

#draftHistoryView .dhMixRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
#draftHistoryView .dhMixLabel { display: block; margin-bottom: 5px; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6); }
#draftHistoryView .dhMixLine { margin: 8px 0 10px; }
#draftHistoryView .dhSequence, #draftHistoryView .dhCounts { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
#draftHistoryView .dhSequence b, #draftHistoryView .dhCounts span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 3px 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 700; color: #08111F; background: var(--pc, #64748B);
}
#draftHistoryView .dhSequence i { font-style: normal; color: var(--muted, #8A94A6); }

/* ------------------------------------------------------------------ awards */

#draftHistoryView .dhAwardGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 11px; }
#draftHistoryView .dhAward {
  display: grid; gap: 3px; align-content: start; padding: 12px 13px; border-radius: 11px;
  background: var(--dh-card); border: 1px solid var(--dh-line);
  border-left: 3px solid var(--aw, var(--dh-info));
}
#draftHistoryView .dhAward.tone-good { --aw: var(--dh-good); }
#draftHistoryView .dhAward.tone-bad { --aw: var(--dh-bad); }
#draftHistoryView .dhAward.tone-warn { --aw: var(--dh-warn); }
#draftHistoryView .dhAward.tone-info { --aw: var(--dh-info); }
#draftHistoryView .dhAward.tone-purple { --aw: var(--dh-purple); }
#draftHistoryView .dhAwardLabel { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #8A94A6); }
#draftHistoryView .dhAward strong { font-size: 14px; color: var(--head, #F3F6FB); }
#draftHistoryView .dhAward em { font-style: normal; font-size: 11.5px; color: var(--aw, var(--dh-info)); }
#draftHistoryView .dhAward footer {
  display: grid; gap: 2px; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--dh-line); font-size: 10px; color: var(--muted, #8A94A6);
}

/* ------------------------------------------------------------------- recap */

#draftHistoryView .dhRecapTop { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.4fr); gap: 14px; margin-bottom: 14px; }
#draftHistoryView .dhTeamRead {
  display: grid; gap: 3px; align-content: start; padding: 13px 15px; border-radius: 12px;
  background: var(--dh-card); border: 1px solid var(--dh-line);
  border-left: 3px solid var(--tr, var(--dh-info));
}
#draftHistoryView .dhTeamRead.tone-good { --tr: var(--dh-good); }
#draftHistoryView .dhTeamRead.tone-bad { --tr: var(--dh-bad); }
#draftHistoryView .dhTeamRead.tone-warn { --tr: var(--dh-warn); }
#draftHistoryView .dhTeamRead.tone-info { --tr: var(--dh-info); }
#draftHistoryView .dhTeamRead.tone-muted { --tr: var(--muted, #8A94A6); }
#draftHistoryView .dhTeamRead > span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #8A94A6); }
#draftHistoryView .dhTeamRead strong { font-size: 15px; color: var(--tr, var(--dh-info)); line-height: 1.25; }
#draftHistoryView .dhTeamRead em { font-style: normal; font-size: 11.5px; color: var(--muted, #8A94A6); }
#draftHistoryView .dhRecapStats { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 9px; margin: 0; }
#draftHistoryView .dhRecapStats > div { padding: 8px 10px; border-radius: 9px; background: var(--dh-card); border: 1px solid var(--dh-line); }
#draftHistoryView .dhRecapStats dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6); }
#draftHistoryView .dhRecapStats dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--head, #F3F6FB); }
#draftHistoryView .dhRecapCards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 11px; }
#draftHistoryView .dhRecapCard {
  display: grid; gap: 3px; padding: 12px 13px; border-radius: 11px;
  background: var(--dh-card); border: 1px solid var(--dh-line);
  border-top: 2px solid var(--rc, var(--dh-info));
}
#draftHistoryView .dhRecapCard.tone-purple { --rc: var(--dh-purple); }
#draftHistoryView .dhRecapCard.tone-warn { --rc: var(--dh-warn); }
#draftHistoryView .dhRecapCard.tone-muted { --rc: var(--muted, #8A94A6); }
#draftHistoryView .dhRecapCard span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6); }
#draftHistoryView .dhRecapCard strong { font-size: 14px; color: var(--head, #F3F6FB); }
#draftHistoryView .dhRecapCard em { font-style: normal; font-size: 11px; color: var(--muted, #8A94A6); line-height: 1.45; }

/* ----------------------------------------------------------- construction */

#draftHistoryView .dhConstructionList { display: grid; gap: 9px; }
#draftHistoryView .dhConstructionRow {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 11px 13px; border-radius: 11px;
  background: var(--dh-card); border: 1px solid var(--dh-line);
  border-left: 3px solid var(--mc, var(--dh-info));
}
#draftHistoryView .dhRank {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  font-size: 13px; font-weight: 700; color: #08111F; background: var(--mc, var(--dh-info));
}
#draftHistoryView .dhConstructionName { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
#draftHistoryView .dhConstructionName strong { font-size: 14px; color: var(--head, #F3F6FB); }
#draftHistoryView .dhConstructionName b { font-size: 15px; color: var(--mc, var(--dh-info)); font-variant-numeric: tabular-nums; }
#draftHistoryView .dhBarTrack { height: 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
#draftHistoryView .dhBarTrack > span { display: block; height: 100%; border-radius: 5px; background: var(--mc, var(--dh-info)); }
#draftHistoryView .dhConstructionStats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 7px; margin: 9px 0 0; }
#draftHistoryView .dhConstructionStats dt { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6); }
#draftHistoryView .dhConstructionStats dd { margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ink, #EAEEF5); font-variant-numeric: tabular-nums; }
#draftHistoryView .dhGaps { margin-top: 8px; font-size: 11px; color: var(--muted, #8A94A6); display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
#draftHistoryView .dhGaps span {
  padding: 1px 7px; border-radius: 5px; font-size: 10px; font-weight: 700;
  color: #08111F; background: var(--pc, #64748B);
}

#draftHistoryView .dhDisclosure {
  margin-top: 12px; padding: 9px 13px; border-radius: 10px;
  border: 1px solid var(--dh-line); background: rgba(255, 255, 255, 0.02);
}
#draftHistoryView .dhDisclosure summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink, #EAEEF5); }
#draftHistoryView .dhDisclosure p { margin-top: 8px; font-size: 11.5px; line-height: 1.55; color: var(--muted, #8A94A6); }

/* ------------------------------------------------------------- pick cards --
   Neutral card with a coloured left edge and text badges. No full fills. */

#draftHistoryView .dhPhase {
  margin-bottom: 10px; border-radius: 11px;
  border: 1px solid var(--dh-line); background: rgba(255, 255, 255, 0.02);
}
#draftHistoryView .dhPhase summary {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  padding: 10px 13px; cursor: pointer;
}
#draftHistoryView .dhPhaseName { font-size: 13px; font-weight: 700; color: var(--head, #F3F6FB); }
#draftHistoryView .dhPhaseMeta { font-size: 11px; color: var(--muted, #8A94A6); margin-right: auto; }
#draftHistoryView .dhPhaseMix { font-size: 11px; color: var(--dh-info); }
#draftHistoryView .dhPhaseBody { padding: 0 13px 13px; }

#draftHistoryView .dhPickGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; align-items: start; }
#draftHistoryView .dhPickCard {
  display: grid; gap: 8px; align-content: start; cursor: pointer;
  padding: 12px 13px; border-radius: 11px;
  background: var(--dh-card); border: 1px solid var(--dh-line);
  border-left: 3px solid var(--pk, var(--muted, #8A94A6));
}
#draftHistoryView .dhPickCard.tone-purple { --pk: var(--dh-purple); }
#draftHistoryView .dhPickCard.tone-warn { --pk: var(--dh-warn); }
#draftHistoryView .dhPickCard.tone-info { --pk: var(--dh-info); }
#draftHistoryView .dhPickCard.tone-muted { --pk: var(--muted, #8A94A6); opacity: 0.85; border-left-style: dashed; }
#draftHistoryView .dhPickCard:hover { border-color: var(--pk, var(--dh-info)); }
#draftHistoryView .dhPickCard header { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: flex-start; }
#draftHistoryView .dhPickCard header > div:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#draftHistoryView .dhPickCard header strong { font-size: 13.5px; color: var(--head, #F3F6FB); }
#draftHistoryView .dhPickBadges { display: flex; flex-wrap: wrap; gap: 5px; }
#draftHistoryView .dhPickFields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; }
#draftHistoryView .dhPickFields dt { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6); }
#draftHistoryView .dhPickFields dd { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--ink, #EAEEF5); font-variant-numeric: tabular-nums; }
#draftHistoryView .dhPickWhy { font-size: 11.5px; line-height: 1.5; color: var(--muted, #8A94A6); }
#draftHistoryView .dhPickBasis { font-size: 10px; line-height: 1.45; color: var(--muted, #8A94A6); opacity: 0.85; padding-top: 7px; border-top: 1px solid var(--dh-line); }

/* -------------------------------------------------------------- board grid */

#draftHistoryView .dhBoardScroll { overflow: auto; max-height: 640px; border: 1px solid var(--dh-line); border-radius: 10px; }
#draftHistoryView .dhBoard { border-collapse: separate; border-spacing: 0; font-size: 11px; }
#draftHistoryView .dhBoard th, #draftHistoryView .dhBoard td { padding: 5px 7px; border-bottom: 1px solid var(--dh-line); }
#draftHistoryView .dhBoard thead th {
  position: sticky; top: 0; z-index: 2; background: var(--dh-card);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6);
  white-space: nowrap;
}
#draftHistoryView .dhBoard .dhSticky { position: sticky; left: 0; z-index: 1; background: var(--panel, #121826); text-align: center; }
#draftHistoryView .dhBoard thead .dhSticky { z-index: 3; background: var(--dh-card); }
#draftHistoryView .dhCell {
  min-width: 96px; border-radius: 4px; cursor: default;
  background: color-mix(in srgb, var(--pc, #64748B) 22%, transparent);
}
#draftHistoryView .dhCell b { display: block; font-size: 11px; color: var(--ink, #EAEEF5); font-weight: 600; }
#draftHistoryView .dhCell em { font-style: normal; font-size: 9px; color: var(--muted, #8A94A6); }
#draftHistoryView .dhCell.isEmpty { background: none; }
#draftHistoryView .dhCell.retro-purple { background: color-mix(in srgb, var(--dh-purple) 20%, transparent); }
#draftHistoryView .dhCell.retro-warn { background: color-mix(in srgb, var(--dh-warn) 18%, transparent); }
#draftHistoryView .dhCell.retro-info { background: color-mix(in srgb, var(--dh-info) 16%, transparent); }
#draftHistoryView .dhCell.retro-muted { background: rgba(255, 255, 255, 0.035); }
#draftHistoryView .dhLegend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; font-size: 11px; color: var(--muted, #8A94A6); }
#draftHistoryView .dhLegend span { display: inline-flex; align-items: center; gap: 5px; }
#draftHistoryView .dhLegend span::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
#draftHistoryView .dhLegend .retro-purple::before { background: color-mix(in srgb, var(--dh-purple) 45%, transparent); }
#draftHistoryView .dhLegend .retro-warn::before { background: color-mix(in srgb, var(--dh-warn) 45%, transparent); }
#draftHistoryView .dhLegend .retro-info::before { background: color-mix(in srgb, var(--dh-info) 45%, transparent); }

/* --------------------------------------------------------------------- runs */

#draftHistoryView .dhRunGroup { margin-bottom: 14px; }
#draftHistoryView .dhRunList { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; }
#draftHistoryView .dhRunCard {
  padding: 12px 13px; border-radius: 11px;
  background: var(--dh-card); border: 1px solid var(--dh-line);
  border-left: 3px solid var(--pc, var(--dh-info));
}
#draftHistoryView .dhRunHead strong { display: block; font-size: 13px; color: var(--head, #F3F6FB); }
#draftHistoryView .dhRunHead em { font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }
#draftHistoryView .dhRunStats { display: grid; gap: 5px; margin: 9px 0 0; }
#draftHistoryView .dhRunStats > div { display: flex; gap: 8px; align-items: baseline; }
#draftHistoryView .dhRunStats dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6); min-width: 92px; }
#draftHistoryView .dhRunStats dd { margin: 0; font-size: 11.5px; color: var(--ink, #EAEEF5); }
#draftHistoryView .dhRunPicks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
#draftHistoryView .dhRunPicks span {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 7px; border-radius: 5px; font-size: 10.5px;
  background: rgba(255, 255, 255, 0.05); color: var(--ink, #EAEEF5);
}
#draftHistoryView .dhRunPicks i { font-style: normal; font-size: 9px; color: var(--muted, #8A94A6); }

/* --------------------------------------------------------------- methodology */

#draftHistoryView .dhMethod h4 { margin: 16px 0 8px; font-size: 13px; color: var(--head, #F3F6FB); }
#draftHistoryView .dhMethod h4:first-child { margin-top: 0; }
#draftHistoryView .dhMethod p, #draftHistoryView .dhMethod li { font-size: 12px; line-height: 1.6; color: var(--muted, #8A94A6); }
#draftHistoryView .dhMethod b { color: var(--ink, #EAEEF5); }
#draftHistoryView .dhMethod ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
#draftHistoryView .dhMethod .dhTable { margin-bottom: 6px; }
#draftHistoryView .dhMethod .dhTable td { white-space: normal; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  #draftHistoryView .dhHeroStats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #draftHistoryView .dhRecapTop { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  #draftHistoryView .dhPickFields { grid-template-columns: 1fr; }
  #draftHistoryView .dhSticky2 { position: static; }
}

@media (max-width: 720px) {
  #draftHistoryView .dhSection { padding: 12px 12px; }
  #draftHistoryView .dhHero { padding: 14px 13px; }
  #draftHistoryView .dhHeroStats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #draftHistoryView .dhBasisBadge { max-width: none; }
  #draftHistoryView .dhControls { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  #draftHistoryView .dhPickGrid, #draftHistoryView .dhRunList, #draftHistoryView .dhMixRow { grid-template-columns: 1fr; }
  #draftHistoryView .dhSticky { position: static; }
}


/* ============================================================================
   DRAFT HISTORY — interpretation layer
   Basis and confidence are visible badges, never small print, because the whole
   point of the page is that two very different kinds of claim sit side by side.
   Green = draft record (exact) · amber = current-price proxy (hindsight)
   grey = no comparable price. Colour never carries meaning alone.
   ========================================================================== */

#draftHistoryView .dhInfo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 5px; padding: 0;
  border-radius: 50%; border: 1px solid var(--dh-line);
  background: rgba(255, 255, 255, 0.06); color: var(--muted, #8A94A6);
  font-size: 9px; font-style: italic; font-weight: 700; line-height: 1;
  cursor: help; vertical-align: middle; flex: 0 0 auto;
}
#draftHistoryView .dhInfo:hover, #draftHistoryView .dhInfo:focus-visible {
  border-color: var(--dh-info); color: var(--dh-info); background: rgba(91, 157, 249, 0.14);
}

#draftHistoryView .dhConfBadge, #draftHistoryView .dhBasisChip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 600; line-height: 1.5;
  color: var(--cb, var(--muted, #8A94A6));
  background: color-mix(in srgb, var(--cb, var(--muted, #8A94A6)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--cb, var(--muted, #8A94A6)) 34%, transparent);
}
#draftHistoryView .dhConfBadge.tone-good, #draftHistoryView .dhBasisChip.tone-good { --cb: var(--dh-good); }
#draftHistoryView .dhConfBadge.tone-warn, #draftHistoryView .dhBasisChip.tone-warn { --cb: var(--dh-warn); }
#draftHistoryView .dhConfBadge.tone-muted, #draftHistoryView .dhBasisChip.tone-muted { --cb: var(--muted, #8A94A6); }
#draftHistoryView .dhBasisChip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#draftHistoryView .dhAwardBadges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

/* Verdict labels are text first; the colour is a supporting cue only. */
#draftHistoryView .dhVerdict {
  display: inline-block; padding: 2px 9px; border-radius: 6px; white-space: nowrap;
  font-size: 10.5px; font-weight: 600;
  color: var(--vd, var(--dh-info));
  background: color-mix(in srgb, var(--vd, var(--dh-info)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--vd, var(--dh-info)) 36%, transparent);
}
#draftHistoryView .dhVerdict.tone-good { --vd: var(--dh-good); }
#draftHistoryView .dhVerdict.tone-warn { --vd: var(--dh-warn); }
#draftHistoryView .dhVerdict.tone-bad { --vd: var(--dh-bad); }
#draftHistoryView .dhVerdict.tone-info { --vd: var(--dh-info); }
#draftHistoryView .dhVerdict.tone-purple { --vd: var(--dh-purple); }
#draftHistoryView .dhVerdict.tone-muted { --vd: var(--muted, #8A94A6); }
#draftHistoryView .dhVerdictLegend {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
  padding: 9px 11px; border-radius: 9px; border: 1px dashed var(--dh-line);
}

#draftHistoryView .dhCountPill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 1px 6px; margin-right: 3px; border-radius: 5px;
  font-size: 10px; font-weight: 700; color: #08111F; background: var(--pc, #64748B);
}
#draftHistoryView .dhRankPill {
  display: inline-block; padding: 2px 8px; border-radius: 6px; white-space: nowrap;
  font-size: 11px; font-weight: 600;
  color: var(--rp, var(--muted, #8A94A6));
  background: color-mix(in srgb, var(--rp, var(--muted, #8A94A6)) 14%, transparent);
}
#draftHistoryView .dhRankPill.tone-good { --rp: var(--dh-good); }
#draftHistoryView .dhRankPill.tone-warn { --rp: var(--dh-warn); }
#draftHistoryView .dhRankPill.tone-info { --rp: var(--dh-info); }

/* ------------------------------------------------------------- position mix */

#draftHistoryView .dhPosMixGrid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
  margin: 6px 0 14px; align-items: start;
}
#draftHistoryView .dhPosMixCard {
  display: grid; gap: 2px; align-content: start; padding: 9px 10px;
  border-radius: 10px; background: var(--dh-card);
  border: 1px solid var(--dh-line); border-top: 3px solid var(--pc, #64748B);
}
#draftHistoryView .dhPosMixCard.isZero { opacity: 0.5; }
#draftHistoryView .dhPosMixPos { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--pc, #64748B); }
#draftHistoryView .dhPosMixCard b { font-size: 19px; font-weight: 700; color: var(--head, #F3F6FB); font-variant-numeric: tabular-nums; line-height: 1.1; }
#draftHistoryView .dhPosMixCard em { font-style: normal; font-size: 10.5px; color: var(--muted, #8A94A6); }
#draftHistoryView .dhPosMixCard i { font-style: normal; font-size: 9.5px; color: var(--muted, #8A94A6); opacity: 0.75; }

/* ------------------------------------------------------------ keeper impact */

#draftHistoryView .dhKeeperSummary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px;
}
#draftHistoryView .dhKeeperStat {
  display: grid; gap: 3px; align-content: start; padding: 11px 13px; border-radius: 11px;
  background: var(--dh-card); border: 1px solid var(--dh-line); border-left: 3px solid var(--dh-info);
}
#draftHistoryView .dhKeeperStat span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6); }
#draftHistoryView .dhKeeperStat strong { font-size: 17px; color: var(--head, #F3F6FB); font-variant-numeric: tabular-nums; }
#draftHistoryView .dhKeeperStat em { font-style: normal; font-size: 11px; line-height: 1.45; color: var(--muted, #8A94A6); }

/* -------------------------------------------------------------- draft story */

#draftHistoryView .dhStoryBadges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; }
#draftHistoryView .dhStory {
  display: grid; gap: 12px; padding: 16px 18px; border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 70%), var(--dh-card);
  border: 1px solid var(--dh-line); border-left: 3px solid var(--dh-info);
}
#draftHistoryView .dhStory p {
  font-size: 14px; line-height: 1.72; color: var(--ink, #EAEEF5); max-width: 78ch;
}
#draftHistoryView .dhStory p:first-child { font-size: 15px; color: var(--head, #F3F6FB); }

#draftHistoryView .dhMoments { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
#draftHistoryView .dhMoment {
  display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: 11px;
  background: var(--dh-card); border: 1px solid var(--dh-line);
  border-left: 3px solid var(--mm, var(--dh-info));
}
#draftHistoryView .dhMoment.tone-good { --mm: var(--dh-good); }
#draftHistoryView .dhMoment.tone-warn { --mm: var(--dh-warn); }
#draftHistoryView .dhMoment.tone-bad { --mm: var(--dh-bad); }
#draftHistoryView .dhMoment.tone-info { --mm: var(--dh-info); }
#draftHistoryView .dhMoment.tone-purple { --mm: var(--dh-purple); }
#draftHistoryView .dhMomentJump {
  padding: 5px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--mm, var(--dh-info)) 40%, transparent);
  background: color-mix(in srgb, var(--mm, var(--dh-info)) 12%, transparent);
  color: var(--mm, var(--dh-info)); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
#draftHistoryView .dhMomentJump:hover { background: color-mix(in srgb, var(--mm, var(--dh-info)) 24%, transparent); }
#draftHistoryView .dhMoment strong { display: block; font-size: 13.5px; color: var(--head, #F3F6FB); margin-bottom: 3px; }
#draftHistoryView .dhMoment p { font-size: 12px; line-height: 1.55; color: var(--ink, #EAEEF5); }
#draftHistoryView .dhMoment .dhMomentWhy { color: var(--muted, #8A94A6); margin-top: 3px; }

#draftHistoryView .dhRecapTable td.dhRead { white-space: normal; min-width: 220px; }

/* ----------------------------------------------------------------- timeline */

#draftHistoryView .dhTimeline { display: grid; gap: 6px; }
#draftHistoryView .dhRoundRow {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 6px 8px; border-radius: 9px; border: 1px solid transparent;
}
#draftHistoryView .dhRoundRow:nth-child(odd) { background: rgba(255, 255, 255, 0.018); }
#draftHistoryView .dhRoundHead { display: grid; gap: 3px; align-content: start; padding-top: 3px; }
#draftHistoryView .dhRoundNo { font-size: 12px; font-weight: 700; color: var(--head, #F3F6FB); font-variant-numeric: tabular-nums; }
#draftHistoryView .dhRoundRuns { display: grid; gap: 2px; }
#draftHistoryView .dhRoundRuns i { font-style: normal; font-size: 9px; font-weight: 700; color: var(--pc, #64748B); }
#draftHistoryView .dhTileRow { display: flex; flex-wrap: wrap; gap: 4px; }
#draftHistoryView .dhTile {
  display: grid; gap: 1px; width: 78px; padding: 5px 6px; cursor: pointer; text-align: left;
  border-radius: 7px; border: 1px solid transparent;
  background: color-mix(in srgb, var(--pc, #64748B) 26%, transparent);
  transition: opacity 120ms ease, transform 120ms ease;
}
#draftHistoryView .dhTile:hover { border-color: var(--pc, #64748B); transform: translateY(-1px); }
#draftHistoryView .dhTile.isDim { opacity: 0.22; }
#draftHistoryView .dhTile.isMine { box-shadow: inset 0 0 0 1px var(--pc, #64748B); }
#draftHistoryView .dhTile.isFlash { animation: dhFlash 1.6s ease-out 1; }
@keyframes dhFlash { 0%, 40% { box-shadow: 0 0 0 2px var(--dh-warn); } 100% { box-shadow: 0 0 0 0 transparent; } }
#draftHistoryView .dhTilePick { font-size: 9px; color: var(--muted, #8A94A6); font-variant-numeric: tabular-nums; }
#draftHistoryView .dhTileName { font-size: 10.5px; font-weight: 600; color: var(--head, #F3F6FB); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#draftHistoryView .dhTilePos { font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--pc, #64748B); }

@media (prefers-reduced-motion: reduce) {
  #draftHistoryView .dhTile { transition: none; }
  #draftHistoryView .dhTile.isFlash { animation: none; box-shadow: 0 0 0 2px var(--dh-warn); }
}

/* ------------------------------------------------------------- archetypes */

#draftHistoryView .dhArcheGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; align-items: start; }
#draftHistoryView .dhArche {
  display: grid; gap: 5px; align-content: start; padding: 12px 14px; border-radius: 11px;
  background: var(--dh-card); border: 1px solid var(--dh-line); border-left: 3px solid var(--ar, var(--dh-info));
}
#draftHistoryView .dhArche.tone-good { --ar: var(--dh-good); }
#draftHistoryView .dhArche.tone-warn { --ar: var(--dh-warn); }
#draftHistoryView .dhArche.tone-info { --ar: var(--dh-info); }
#draftHistoryView .dhArche strong { font-size: 14px; color: var(--ar, var(--dh-info)); }
#draftHistoryView .dhArche p { font-size: 11.5px; line-height: 1.55; color: var(--muted, #8A94A6); }

/* ----------------------------------------------------- versus league table */

#draftHistoryView .dhVsTable td.dhRead { white-space: normal; min-width: 240px; }
#draftHistoryView .dhInterpret {
  display: grid; gap: 6px; margin: 10px 0 0; padding: 11px 14px 11px 30px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--dh-info) 26%, var(--dh-line));
  background: rgba(91, 157, 249, 0.06);
}
#draftHistoryView .dhInterpret li { font-size: 12.5px; line-height: 1.6; color: var(--ink, #EAEEF5); }

/* -------------------------------------------------------------- build map */

#draftHistoryView .dhBuildMap { display: grid; gap: 8px; margin-bottom: 12px; }
#draftHistoryView .dhBuildPhase {
  display: grid; grid-template-columns: minmax(140px, auto) minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 9px 11px; border-radius: 10px; background: var(--dh-card); border: 1px solid var(--dh-line);
}
#draftHistoryView .dhBuildPhaseName { font-size: 11.5px; font-weight: 600; color: var(--ink, #EAEEF5); }
#draftHistoryView .dhBuildPhaseName i { font-style: normal; font-size: 10px; color: var(--muted, #8A94A6); }
#draftHistoryView .dhBuildRow { display: flex; flex-wrap: wrap; gap: 5px; }
#draftHistoryView .dhBuildTile {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 4px 9px; border-radius: 7px;
  font-size: 11.5px; font-weight: 700; color: #08111F; background: var(--pc, #64748B);
}
#draftHistoryView .dhBuildTile i { font-style: normal; font-size: 9px; opacity: 0.72; }
#draftHistoryView .dhBuildStats { margin-bottom: 4px; }
#draftHistoryView .dhBuildStats dd { font-size: 12.5px; }
#draftHistoryView .dhConstructionRow.isSelected {
  border-color: color-mix(in srgb, var(--dh-info) 55%, var(--dh-line));
  background: linear-gradient(90deg, rgba(91, 157, 249, 0.08), transparent 60%), var(--dh-card);
}
#draftHistoryView .dhYouTag {
  padding: 1px 6px; border-radius: 5px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--dh-info); background: rgba(91, 157, 249, 0.16);
}

/* ---------------------------------------------------------- pick analysis */

#draftHistoryView .dhPickCard { cursor: default; }
#draftHistoryView .dhPickCard:hover { transform: none; }
#draftHistoryView .dhPickAlts {
  padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--dh-line); background: rgba(0, 0, 0, 0.16);
}
#draftHistoryView .dhPickAlts summary { cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--ink, #EAEEF5); }
#draftHistoryView .dhAltFields { display: grid; gap: 6px; margin: 9px 0 0; }
#draftHistoryView .dhAltFields > div { display: grid; gap: 1px; }
#draftHistoryView .dhAltFields dt { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #8A94A6); }
#draftHistoryView .dhAltFields dd { margin: 0; font-size: 11.5px; color: var(--ink, #EAEEF5); }
#draftHistoryView .dhAltFields dd i { font-style: normal; font-size: 10px; color: var(--muted, #8A94A6); }
#draftHistoryView .dhPickCard > .dhGhostButton { justify-self: start; }

/* --------------------------------------------------------------- run map */

#draftHistoryView .dhRunMap {
  display: grid; gap: 5px; margin-bottom: 16px; padding: 12px 14px;
  border-radius: 11px; background: var(--dh-card); border: 1px solid var(--dh-line);
}
#draftHistoryView .dhRunMapRow { display: grid; grid-template-columns: 76px minmax(0, 1fr) 62px; gap: 9px; align-items: center; }
#draftHistoryView .dhRunMapLabel { font-size: 10.5px; font-weight: 700; color: var(--pc, #64748B); }
#draftHistoryView .dhRunMapTrack { position: relative; height: 13px; border-radius: 4px; background: rgba(255, 255, 255, 0.045); }
#draftHistoryView .dhRunMapBar { position: absolute; top: 0; height: 100%; border-radius: 4px; background: var(--pc, #64748B); }
#draftHistoryView .dhRunMapMeta { font-size: 10px; color: var(--muted, #8A94A6); text-align: right; font-variant-numeric: tabular-nums; }
#draftHistoryView .dhRunMapAxis { display: flex; justify-content: space-between; margin-top: 3px; font-size: 9.5px; color: var(--muted, #8A94A6); }

#draftHistoryView .dhRunRole {
  display: grid; gap: 2px; margin: 9px 0; padding: 8px 10px; border-radius: 9px;
  background: color-mix(in srgb, var(--rr, var(--dh-info)) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--rr, var(--dh-info)) 30%, transparent);
}
#draftHistoryView .dhRunRole.tone-good { --rr: var(--dh-good); }
#draftHistoryView .dhRunRole.tone-warn { --rr: var(--dh-warn); }
#draftHistoryView .dhRunRole.tone-bad { --rr: var(--dh-bad); }
#draftHistoryView .dhRunRole.tone-info { --rr: var(--dh-info); }
#draftHistoryView .dhRunRole.tone-muted { --rr: var(--muted, #8A94A6); }
#draftHistoryView .dhRunRole > span { font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6); }
#draftHistoryView .dhRunRole strong { font-size: 12.5px; color: var(--rr, var(--dh-info)); }
#draftHistoryView .dhRunRole em { font-style: normal; font-size: 11px; line-height: 1.5; color: var(--muted, #8A94A6); }
#draftHistoryView .dhRunPicks span.role-started { box-shadow: inset 0 0 0 1px var(--dh-warn); }
#draftHistoryView .dhRunPicks span.role-late { opacity: 0.72; }

/* --------------------------------------------------------------- lessons */

#draftHistoryView .dhLessonGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; align-items: start; }
#draftHistoryView .dhLesson {
  display: grid; gap: 5px; align-content: start; padding: 13px 15px; border-radius: 11px;
  background: var(--dh-card); border: 1px solid var(--dh-line); border-left: 3px solid var(--ls, var(--dh-info));
}
#draftHistoryView .dhLesson.tone-good { --ls: var(--dh-good); }
#draftHistoryView .dhLesson.tone-warn { --ls: var(--dh-warn); }
#draftHistoryView .dhLesson.tone-info { --ls: var(--dh-info); }
#draftHistoryView .dhLesson.tone-purple { --ls: var(--dh-purple); }
#draftHistoryView .dhLesson strong { font-size: 13.5px; color: var(--head, #F3F6FB); }
#draftHistoryView .dhLesson p { font-size: 12px; line-height: 1.6; color: var(--muted, #8A94A6); }
#draftHistoryView .dhLimits { display: grid; gap: 6px; margin: 0; padding-left: 20px; }
#draftHistoryView .dhLimits li { font-size: 12px; line-height: 1.6; color: var(--muted, #8A94A6); }

#draftHistoryView .dhMethod .dhBasisChip { font-size: 10px; }
#draftHistoryView .dhMethod th[scope="row"] { white-space: nowrap; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  #draftHistoryView .dhPosMixGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #draftHistoryView .dhVsTable td.dhRead, #draftHistoryView .dhRecapTable td.dhRead { min-width: 180px; }
}

@media (max-width: 900px) {
  #draftHistoryView .dhBuildPhase { grid-template-columns: 1fr; gap: 7px; }
  #draftHistoryView .dhRunMapRow { grid-template-columns: 66px minmax(0, 1fr) 54px; }
}

@media (max-width: 720px) {
  #draftHistoryView .dhPosMixGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #draftHistoryView .dhStory { padding: 13px 14px; }
  #draftHistoryView .dhStory p, #draftHistoryView .dhStory p:first-child { font-size: 13px; }
  #draftHistoryView .dhMoment { grid-template-columns: 1fr; gap: 8px; }
  #draftHistoryView .dhMomentJump { justify-self: start; }
  #draftHistoryView .dhRoundRow { grid-template-columns: 1fr; gap: 5px; }
  #draftHistoryView .dhRoundHead { grid-auto-flow: column; justify-content: start; gap: 8px; align-items: center; }
  #draftHistoryView .dhRoundRuns { grid-auto-flow: column; gap: 7px; }
  #draftHistoryView .dhTile { width: calc(33.333% - 3px); }
  #draftHistoryView .dhLessonGrid, #draftHistoryView .dhArcheGrid, #draftHistoryView .dhKeeperSummary { grid-template-columns: 1fr; }
}
/* Shared first-box treatment across all indexed pages. Page-specific content
   remains intact, but the overview hierarchy, disclosure rows, spacing and
   responsive behavior now use one visual contract. */
.page-overview-header {
  box-sizing: border-box;
  display: grid;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  margin: 12px 0 16px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(24, 32, 48, .98), rgba(15, 23, 38, .98));
}
.page-overview-header > .page-overview-eyebrow,
.page-overview-eyebrow {
  display: block;
  margin: 0 0 3px;
  color: var(--accent-2, #8db7ff);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.25;
  text-transform: uppercase;
}
.page-overview-header > h2,
.page-overview-header .page-overview-title {
  margin: 0;
  color: var(--head, #f3f6fb);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.1;
}
.page-overview-header > p,
.page-overview-header .decisionHint,
.page-overview-header .weeklyHeroHelp,
.page-overview-header .page-overview-summary {
  max-width: 78ch;
  margin: 0;
  color: var(--muted, #9aa7ba);
  font-size: 13px;
  line-height: 1.5;
}
.page-overview-header > .page-overview-disclosure,
.page-overview-header > .page-overview-disclosures,
.page-overview-header .page-overview-disclosures {
  display: grid;
  gap: 7px;
  width: 100%;
}
.page-overview-header details.page-overview-disclosure,
.page-overview-header .page-overview-disclosures details {
  margin: 0;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
}
.page-overview-header details.page-overview-disclosure > summary,
.page-overview-header .page-overview-disclosures details > summary {
  min-height: 34px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 8px 11px;
  color: var(--head, #f3f6fb);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  list-style: none;
}
.page-overview-header details.page-overview-disclosure > summary::-webkit-details-marker,
.page-overview-header .page-overview-disclosures details > summary::-webkit-details-marker { display: none; }
.page-overview-header details.page-overview-disclosure > summary::before,
.page-overview-header .page-overview-disclosures details > summary::before {
  content: '▸';
  margin-right: 8px;
  color: var(--accent-2, #8db7ff);
}
.page-overview-header details[open] > summary::before { content: '▾'; }
.page-overview-header details.page-overview-disclosure > p,
.page-overview-header .page-overview-disclosures details > p,
.page-overview-header .page-overview-disclosures details > ul {
  margin: 0;
  padding: 0 12px 11px 28px;
  color: var(--muted, #9aa7ba);
  font-size: 12px;
  line-height: 1.5;
}
/* Legacy hero internals keep their data-driven cards/controls, while the
   outer container owns the shared first-box surface. */
.page-overview-header .lwHero,
.page-overview-header .mtHero,
.page-overview-header .lhHero,
.page-overview-header .dhHero { margin: 0; }

@media (max-width: 720px) {
  .page-overview-header { padding: 15px 14px; margin-top: 10px; gap: 12px; }
  .page-overview-header > h2 { font-size: 24px; }
  .page-overview-header .page-overview-disclosures,
  .page-overview-header > .page-overview-disclosures { grid-template-columns: 1fr; }
}

/* Keep the shared contract authoritative over older page-specific hero rules. */
.page-overview-header {
  background: linear-gradient(135deg, rgba(24, 32, 48, .98), rgba(15, 23, 38, .98)) !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
}
.page-overview-header details.page-overview-disclosure,
.page-overview-header .page-overview-disclosures details {
  border: 1px solid rgba(148, 163, 184, .2) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .025) !important;
}
@media (max-width: 720px) {
  .page-overview-header { padding: 15px 14px !important; }
}

/* Focused consistency pass: normalize the two remaining legacy paths. */
.page-overview-header,
.page-overview-header .page-overview-intro {
  min-height: 0 !important;
}
.page-overview-header .page-overview-intro {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.page-overview-header .page-overview-intro > span,
.page-overview-header .page-overview-eyebrow {
  margin: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.page-overview-header .page-overview-intro > h2,
.page-overview-header > h2 {
  margin: 0 !important;
  font-size: clamp(24px, 2.2vw, 30px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
}
.page-overview-header .page-overview-summary,
.page-overview-header .page-overview-intro > p,
.page-overview-header .decisionHint {
  margin: 0 !important;
  max-width: 78ch !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
.page-overview-header .page-overview-disclosures {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.page-overview-header .page-overview-disclosure,
.page-overview-header .page-overview-disclosures > details {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.page-overview-header .page-overview-disclosure > summary,
.page-overview-header .page-overview-disclosures > details > summary {
  min-height: 34px !important;
  margin: 0 !important;
  padding: 8px 11px !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}
.page-overview-header .page-overview-source-footer,
.page-overview-header > .page-overview-source-footer {
  display: block !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
  color: var(--muted, #9aa7ba) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}
.page-overview-source-footer > span:first-child { font-weight: 650; }
.page-overview-source-footer,
.page-overview-source-footer > span {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}
.page-overview-source-footer > span:first-child { font-weight: 650 !important; }
.page-overview-header .page-overview-source-footer .sourceInspectButton { display: none; }

#assistantView .asstCommandHead {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 10px 14px !important;
}
#assistantView .asstCommandHead .page-overview-intro {
  display: grid !important;
  grid-column: 1 / -1;
  grid-template-columns: 1fr !important;
  align-items: start !important;
}
#assistantView .page-overview-intro > span,
#assistantView .page-overview-intro > h2,
#assistantView .page-overview-intro > p { grid-column: 1; }
#assistantView .asstTitleBlock > span {
  margin: 0 0 3px !important;
  color: var(--accent-2, #8FC0FF) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}
#assistantView .asstTitleBlock > h2 {
  margin: 0 !important;
  color: var(--head, #F3F6FB) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: clamp(24px, 2.2vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  line-height: 1.1 !important;
}
#assistantView .asstTitleBlock > p {
  max-width: 78ch !important;
  margin: 0 !important;
  color: var(--muted, #9AA7BA) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
#assistantView .asstStatusRow { align-self: center; }
#assistantView .asstControlBar { width: 100%; }
#assistantView .page-overview-disclosures {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  width: 510px !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
#assistantView .page-overview-disclosure {
  width: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}
#marketView .marketHeroHeader { display: grid !important; grid-template-columns: 1fr !important; }
#marketView .mktHeaderText > .page-overview-eyebrow {
  margin: 0 0 3px !important;
  color: var(--accent-2, #8FC0FF) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}
#marketView .mktHeaderText > h2 {
  margin: 0 !important;
  color: var(--head, #F3F6FB) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: clamp(24px, 2.2vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  line-height: 1.1 !important;
}
#marketView .mktHeaderText > .page-overview-summary {
  max-width: 78ch !important;
  margin: 0 !important;
  color: var(--muted, #9AA7BA) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
#marketView .page-overview-disclosure {
  width: 510px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#marketView .page-overview-disclosure > summary {
  color: var(--head, #f3f6fb) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
}
#marketView .mktHeaderText > span:not(.page-overview-eyebrow) { display: none; }
#marketView .mktDisclosure .mktDisclosureBody { font-size: 12px; line-height: 1.5; font-weight: 400; }
#marketView .page-overview-source-footer .sourceInspectButton { display: none; }
#newsView .sectionHeroText > .page-overview-eyebrow,
#sleeperView .sectionHeroText > .page-overview-eyebrow,
#myRanksView .sectionHeroText > .page-overview-eyebrow {
  color: var(--accent-2, #8FC0FF) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}
#wrappedView .page-overview-disclosures {
  width: 510px !important;
  max-width: 100% !important;
}
#wrappedView .page-overview-disclosures .lwDisclosure {
  width: 100% !important;
  box-sizing: border-box !important;
}
#wrappedView .page-overview-disclosures .lwDisclosure > summary {
  font-weight: 700 !important;
}
#wrappedView .lwHeroTitle > .lwEyebrow {
  margin: 0 0 3px !important;
  color: var(--accent-2, #8FC0FF) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}
#wrappedView .lwHeroTitle > h2 {
  margin: 0 !important;
  color: var(--head, #F3F6FB) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: clamp(24px, 2.2vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  line-height: 1.1 !important;
}
#wrappedView .lwHeroTitle > .lwIdentity {
  max-width: 78ch !important;
  margin: 0 !important;
  color: var(--muted, #9AA7BA) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
#leagueHistoryView .lhHeroTitle > .lhEyebrow {
  margin: 0 0 3px !important;
  color: var(--accent-2, #8FC0FF) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}
#leagueHistoryView .lhHeroTitle > h2 {
  margin: 0 !important;
  color: var(--head, #F3F6FB) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: clamp(24px, 2.2vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  line-height: 1.1 !important;
}
#leagueHistoryView .lhHeroTitle > .lhSummaryLine {
  max-width: 78ch !important;
  margin: 0 !important;
  color: var(--muted, #9AA7BA) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
#draftHistoryView .dhHeroTitle > .dhEyebrow,
#weeklyRankingsView .weeklyPageHeroText > .weeklyEyebrow {
  margin: 0 0 3px !important;
  color: var(--accent-2, #8FC0FF) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}
#draftHistoryView .dhHeroTitle > h2,
#weeklyRankingsView .weeklyTitleLine > h2 {
  margin: 0 !important;
  color: var(--head, #F3F6FB) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: clamp(24px, 2.2vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  line-height: 1.1 !important;
}
#draftHistoryView .dhHeroTitle > .dhHeroSub,
#weeklyRankingsView .weeklyPageHeroText > .page-overview-summary {
  max-width: 78ch !important;
  margin: 0 !important;
  color: var(--muted, #9AA7BA) !important;
  font-family: var(--font-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
#leagueHistoryView .page-overview-disclosures,
#managerTendenciesView .page-overview-disclosures,
#draftHistoryView .page-overview-disclosures,
#weeklyRankingsView .page-overview-disclosures {
  width: 510px !important;
  max-width: 100% !important;
}
#leagueHistoryView .page-overview-disclosures > details,
#managerTendenciesView .page-overview-disclosures > details,
#draftHistoryView .page-overview-disclosures > details,
#weeklyRankingsView .page-overview-disclosures > details {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
#leagueHistoryView .page-overview-disclosures > details.lhDisclosure {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
#leagueHistoryView .page-overview-disclosures > details.lhDisclosure > summary {
  list-style: none !important;
}
#leagueHistoryView .page-overview-disclosures > details > summary,
#managerTendenciesView .page-overview-disclosures > details > summary,
#draftHistoryView .page-overview-disclosures > details > summary,
#weeklyRankingsView .page-overview-disclosures > details > summary {
  color: var(--head, #f3f6fb) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
}

@media (max-width: 720px) {
  #assistantView .asstCommandHead { grid-template-columns: 1fr !important; }
  #assistantView .asstStatusRow,
  #assistantView .asstControlsToggle { width: 100%; }
  #assistantView .asstControlBar { display: grid !important; grid-template-columns: 1fr !important; }
  #assistantView .page-overview-disclosures { width: 100% !important; }
  #marketView .page-overview-disclosure { width: 100% !important; }
  #marketView .marketHeroHeader { padding: 15px 14px !important; }
  #wrappedView .page-overview-disclosures { width: 100% !important; }
  #leagueHistoryView .page-overview-disclosures,
  #managerTendenciesView .page-overview-disclosures,
  #draftHistoryView .page-overview-disclosures,
  #weeklyRankingsView .page-overview-disclosures { width: 100% !important; }
}


/* ----------------------------------------------------------------------------
   DRAFT HISTORY — two override corrections found during verification.

   1. A global `button { min-height: 34px }` tap-target rule beat the 14px
      information affordance, stretching it to 34px tall inside a 14px box.
      Height alone cannot win against a min-height, so min-height is reset here.

   2. `.dhKeeperStat span` is a descendant selector and therefore outranks
      `.dhConfBadge`, which repainted the confidence badge inside a keeper card
      in muted grey while its background stayed green. Restricting that rule to
      the direct-child label fixes the cause; the badge colours are also pinned
      with a slightly higher specificity so no future descendant rule can
      silently decouple a badge's text colour from its basis again.
   -------------------------------------------------------------------------- */

#draftHistoryView .dhInfo {
  min-height: 0; min-width: 0; line-height: 1;
}

#draftHistoryView .dhKeeperStat span:not(.dhConfBadge):not(.dhBasisChip) {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted, #8A94A6);
}
#draftHistoryView .dhKeeperStat em .dhConfBadge { text-transform: none; letter-spacing: 0; }

#draftHistoryView span.dhConfBadge, #draftHistoryView span.dhBasisChip {
  color: var(--cb, var(--muted, #8A94A6));
  text-transform: none; letter-spacing: 0;
}
#draftHistoryView span.dhConfBadge.tone-good, #draftHistoryView span.dhBasisChip.tone-good { --cb: var(--dh-good); }
#draftHistoryView span.dhConfBadge.tone-info, #draftHistoryView span.dhBasisChip.tone-info { --cb: var(--dh-info); }
#draftHistoryView span.dhConfBadge.tone-warn, #draftHistoryView span.dhBasisChip.tone-warn { --cb: var(--dh-warn); }
#draftHistoryView span.dhConfBadge.tone-muted, #draftHistoryView span.dhBasisChip.tone-muted { --cb: var(--muted, #8A94A6); }

/* Chat answer evidence strip. Compact enough to sit under a decision headline
   during a live draft, and wraps rather than scrolling sideways on mobile. */
.chatFactRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 2px;
  max-width: 100%;
}
.chatFactRow .chatFact {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 4px 9px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.08);
}
.chatFactRow .chatFact small {
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8fa2bb;
  white-space: nowrap;
}
.chatFactRow .chatFact strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink, #EAEEF5);
  overflow-wrap: anywhere;
}
.chatFactRow .chatFact.good { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.1); }
.chatFactRow .chatFact.warn { border-color: rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.1); }

@media (max-width: 600px) {
  .chatFactRow { gap: 5px; }
  .chatFactRow .chatFact { padding: 3px 7px; }
  .chatFactRow .chatFact small { font-size: 9px; }
}


/* ============================================================================
   MY RANKS — presentation
   Purple is the My Ranks accent, but spent deliberately: the active board mode,
   the progress fill, and the edited-row edge. Everything else stays neutral so
   those three actually read as signal. No rule here changes data or order.
   ========================================================================== */

#myRanksView {
  --mr-accent: #A855F7;
  --mr-accent-soft: rgba(168, 85, 247, 0.16);
  --mr-line: rgba(117, 145, 180, 0.22);
  --mr-card: rgba(18, 27, 43, 0.82);
  --mr-up: #4ADE80;
  --mr-down: #FBBF24;
  --mr-row-pad: 6px 10px;
}
#myRanksView .mrFlow.density-comfortable { --mr-row-pad: 11px 12px; }

#myRanksView .mrFlow { display: flex; flex-direction: column; gap: 14px; }
#myRanksView .mrLabel {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: #9DB2CE;
}

/* -------------------------------------------------------------- header area */

#myRanksView .myRanksHeaderActions { gap: 6px; }
#myRanksView .mrPrivacyTag {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, 0.42); background: var(--mr-accent-soft);
  color: #DDD6FE; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}

/* Board Tools is a menu, not a row of peers to the ranking actions. */
#myRanksView .mrBoardTools { position: relative; }
#myRanksView .mrBoardTools > summary {
  display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
  padding: 7px 12px; border-radius: 8px;
  border: 1px solid #30435F; background: #111B2B; color: #B6C8DF; font-size: 12px;
}
#myRanksView .mrBoardTools > summary::-webkit-details-marker { display: none; }
#myRanksView .mrBoardTools > summary::after { content: "â–¾"; font-size: 10px; opacity: 0.7; }
#myRanksView .mrBoardTools > summary:hover { border-color: var(--mr-accent); color: #E9D5FF; }
#myRanksView .mrBoardToolsMenu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  display: grid; gap: 4px; min-width: 210px; padding: 7px;
  border: 1px solid #30435F; border-radius: 10px;
  background: #0D1524; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
}
#myRanksView .mrBoardToolsMenu button {
  width: 100%; text-align: left; padding: 8px 10px; border-radius: 7px;
  border: 1px solid transparent; background: transparent; color: #D8E3F3; font-size: 12px; cursor: pointer;
}
#myRanksView .mrBoardToolsMenu button:hover { background: rgba(255, 255, 255, 0.05); border-color: #30435F; }
/* Destructive styling only inside the menu, never in the page header. */
#myRanksView .mrBoardToolsMenu #myRanksReset {
  color: #FCA5A5; margin-top: 3px; border-top: 1px solid var(--mr-line); border-radius: 0 0 7px 7px;
}
#myRanksView .mrBoardToolsMenu #myRanksReset:hover { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); }
#myRanksView .mrBoardToolsHint { padding: 4px 10px 2px; color: #7389A5; font-size: 10px; line-height: 1.4; }

/* ------------------------------------------------------------- status cards */

#myRanksView .mrStatus {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; align-items: stretch;
}
#myRanksView .mrStatusCard {
  display: grid; gap: 2px; align-content: start; padding: 10px 12px;
  border: 1px solid var(--mr-line); border-radius: 10px; background: var(--mr-card);
}
#myRanksView .mrStatusCard span { color: #8EA5C4; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
#myRanksView .mrStatusCard strong { color: #EEF5FF; font-size: 15px; font-variant-numeric: tabular-nums; }
#myRanksView .mrStatusCard em {
  font-style: normal; color: #7389A5; font-size: 10.5px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* -------------------------------------------------------------- board mode */

#myRanksView .mrModeBlock {
  display: grid; gap: 9px; padding: 12px 14px;
  border: 1px solid var(--mr-line); border-radius: 11px; background: rgba(10, 16, 27, 0.6);
}
#myRanksView .mrModeRow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#myRanksView .mrSegmented {
  display: inline-flex; padding: 3px; gap: 3px;
  border: 1px solid #30435F; border-radius: 10px; background: #0B1220;
}
#myRanksView .mrSegmented button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 0; border-radius: 8px;
  background: transparent; color: #93A9C6; font-size: 12.5px; cursor: pointer;
  transition: background 130ms ease, color 130ms ease;
}
#myRanksView .mrSegmented button .mrSegDot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid currentColor; background: transparent;
}
/* The active mode is carried by fill, weight, a filled dot and a ring — not by
   a border shade alone. */
#myRanksView .mrSegmented button.active {
  background: var(--mr-accent); color: #14061F; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(233, 213, 255, 0.55), 0 4px 12px rgba(168, 85, 247, 0.32);
}
#myRanksView .mrSegmented button.active .mrSegDot { background: #14061F; border-color: #14061F; }
#myRanksView .mrSegmented button:not(.active):hover { background: rgba(255, 255, 255, 0.05); color: #DCE7F6; }
#myRanksView .mrModeExplain { margin: 0; color: #9DB2CE; font-size: 12px; line-height: 1.55; max-width: 92ch; }

#myRanksView .mrBlend {
  display: grid; gap: 8px; padding: 11px 12px; margin-top: 2px;
  border: 1px solid rgba(168, 85, 247, 0.28); border-radius: 10px; background: rgba(74, 34, 110, 0.16);
}
#myRanksView .mrBlendLabel { display: grid; gap: 5px; color: #9DB2CE; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; }
#myRanksView .mrBlendEnds { display: flex; justify-content: space-between; color: #D8C8ED; font-size: 11px; text-transform: none; letter-spacing: 0; }
#myRanksView .mrBlend input[type="range"] { accent-color: var(--mr-accent); width: 100%; }
#myRanksView .mrBlend output { color: #D8C8ED; font-size: 11px; text-transform: none; letter-spacing: 0; }
#myRanksView .mrPresets { display: flex; gap: 5px; flex-wrap: wrap; }
#myRanksView .mrPresets button {
  border: 1px solid #6E4D91; background: #25163A; color: #E3D5F5;
  border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 11px;
}
#myRanksView .mrPresets button:hover { border-color: var(--mr-accent); }

#myRanksView .mrBaseContext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; }
#myRanksView .mrBaseContext > div {
  display: grid; gap: 3px; padding: 9px 12px;
  border: 1px solid rgba(96, 165, 250, 0.24); border-radius: 9px; background: rgba(15, 31, 54, 0.55);
}
#myRanksView .mrBaseContext strong { color: #DBEAFE; font-size: 11px; }
#myRanksView .mrBaseContext span { color: var(--muted); font-size: 11px; }

/* --------------------------------------------------------------- onboarding */

#myRanksView .mrOnboard {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px;
  padding: 15px 16px; border-radius: 12px;
  border: 1px solid rgba(168, 85, 247, 0.32);
  background: linear-gradient(135deg, rgba(74, 34, 110, 0.3), rgba(20, 12, 34, 0.2));
}
#myRanksView .mrOnboard h3 { margin: 0 0 9px; color: #F1E8FF; font-size: 14px; }
#myRanksView .mrPrimaryAction {
  display: grid; gap: 4px; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 11px; border: 1px solid rgba(233, 213, 255, 0.5);
  background: linear-gradient(135deg, var(--mr-accent), #7C3AED); color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.32);
}
#myRanksView .mrPrimaryAction:hover { filter: brightness(1.08); }
#myRanksView .mrPrimaryAction strong { font-size: 14.5px; }
#myRanksView .mrPrimaryAction span { font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
#myRanksView .mrOnboardSecondary { display: grid; gap: 7px; align-content: start; }
#myRanksView .mrSecondaryAction {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  padding: 9px 12px; border-radius: 9px;
  border: 1px solid rgba(110, 77, 145, 0.55); background: rgba(37, 22, 58, 0.55); color: #E3D5F5;
}
#myRanksView .mrSecondaryAction:hover { border-color: var(--mr-accent); background: rgba(37, 22, 58, 0.85); }
#myRanksView .mrSecondaryAction strong { font-size: 12px; }
#myRanksView .mrSecondaryAction span { font-size: 10.5px; line-height: 1.45; color: #B5A8C9; }

/* ----------------------------------------------------------------- progress */

#myRanksView .mrProgress { display: grid; gap: 6px; }
#myRanksView .mrProgressTop { display: flex; flex-wrap: wrap; gap: 9px; justify-content: space-between; align-items: baseline; }
#myRanksView .mrProgressCount { color: #DCE7F6; font-size: 12.5px; font-variant-numeric: tabular-nums; }
#myRanksView .mrProgressStage {
  padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
  color: var(--ps, #9DB2CE);
  background: color-mix(in srgb, var(--ps, #9DB2CE) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--ps, #9DB2CE) 32%, transparent);
}
#myRanksView .mrProgressStage.tone-idle { --ps: #8EA5C4; }
#myRanksView .mrProgressStage.tone-start { --ps: #60A5FA; }
#myRanksView .mrProgressStage.tone-core { --ps: #A855F7; }
#myRanksView .mrProgressStage.tone-strong { --ps: #C084FC; }
#myRanksView .mrProgressStage.tone-near { --ps: #34D399; }
#myRanksView .mrProgressStage.tone-done { --ps: #4ADE80; }
#myRanksView .mrProgressTrack { height: 7px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
#myRanksView .mrProgressTrack > span {
  display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #7C3AED, var(--mr-accent));
  transition: width 220ms ease;
}

/* ------------------------------------------------------------------ toolbar */

#myRanksView .mrToolbar {
  position: sticky; top: 0; z-index: 6;
  display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end;
  padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--mr-line); background: rgba(9, 14, 24, 0.95);
  backdrop-filter: blur(7px);
}
#myRanksView .mrField {
  display: grid; gap: 4px;
  color: #9DB2CE; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
}
#myRanksView .mrField select,
#myRanksView .mrField input {
  height: 34px; padding: 0 9px; border-radius: 7px;
  border: 1px solid #30435F; background: #111B2B; color: #EAF2FF;
  font-size: 12.5px; text-transform: none; letter-spacing: 0;
}
#myRanksView .mrFieldSearch { flex: 1 1 200px; min-width: 170px; }
#myRanksView .mrSearchWrap { position: relative; display: block; }
#myRanksView .mrSearchWrap input { width: 100%; padding-right: 28px; }
#myRanksView .mrSearchClear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: #9DB2CE; font-size: 15px; line-height: 1; cursor: pointer;
}
#myRanksView .mrSearchClear:hover { background: rgba(255, 255, 255, 0.08); color: #EAF2FF; }

#myRanksView .mrQuickActions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
#myRanksView .mrGhost {
  height: 34px; padding: 0 11px; border-radius: 7px; cursor: pointer;
  border: 1px solid #30435F; background: #111B2B; color: #C3D3E8; font-size: 11.5px;
}
#myRanksView .mrGhost:hover { border-color: var(--mr-accent); color: #E9D5FF; }
#myRanksView .mrGhost.active { background: var(--mr-accent-soft); border-color: var(--mr-accent); color: #E9D5FF; font-weight: 600; }
#myRanksView .mrJump { display: inline-flex; gap: 4px; align-items: center; }
#myRanksView .mrJump input {
  width: 72px; height: 34px; padding: 0 8px; border-radius: 7px;
  border: 1px solid #30435F; background: #111B2B; color: #EAF2FF; font-size: 12px;
}
#myRanksView .mrDensity {
  display: inline-flex; padding: 2px; gap: 2px; border: 1px solid #30435F; border-radius: 8px; background: #0B1220;
}
#myRanksView .mrDensity button {
  height: 28px; padding: 0 9px; border: 0; border-radius: 6px;
  background: transparent; color: #93A9C6; font-size: 11px; cursor: pointer;
}
#myRanksView .mrDensity button.active { background: rgba(255, 255, 255, 0.1); color: #EAF2FF; font-weight: 600; }

#myRanksView .mrNotice { margin: 0; color: #9DB2CE; font-size: 12px; }
#myRanksView .mrOpinion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
#myRanksView .mrOpinion > div { padding: 10px 12px; border-radius: 9px; background: var(--mr-card); border: 1px solid var(--mr-line); }
#myRanksView .mrOpinion span { display: block; color: #8EA5C4; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
#myRanksView .mrOpinion strong { display: block; color: #EEF5FF; margin-top: 3px; font-size: 13px; }
#myRanksView .mrOpinion em { color: #A78BFA; font-size: 11px; font-style: normal; }

/* -------------------------------------------------------------------- table */

#myRanksView .myRanksTableWrap { max-height: calc(100vh - 300px); position: relative; }
#myRanksView .myRanksTable { min-width: 980px; }
#myRanksView .myRanksTable thead th {
  position: sticky; top: 0; z-index: 3;
  background: #0E1626; color: #9DB2CE;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
#myRanksView .myRanksTable th[title] { cursor: help; text-decoration: underline dotted rgba(157, 178, 206, 0.5); text-underline-offset: 3px; }
#myRanksView .myRanksTable td { vertical-align: middle; padding: var(--mr-row-pad); }
#myRanksView .myRanksTable tbody tr { transition: background 120ms ease; }
#myRanksView .myRanksTable tbody tr:hover { background: rgba(255, 255, 255, 0.028); }

/* Edited rows: a thin purple edge and a slightly brighter field. Never a full
   bright fill, and never applied to untouched App Board fallback rows. */
#myRanksView .myRanksTable tr.mrEditedRow > td:first-child { box-shadow: inset 3px 0 0 var(--mr-accent); }
#myRanksView .myRanksTable tr.mrEditedRow { background: rgba(168, 85, 247, 0.055); }
#myRanksView .myRanksTable tr.mrEditedRow:hover { background: rgba(168, 85, 247, 0.09); }
#myRanksView .myRanksTable tr.mrJumpFlash { background: rgba(96, 165, 250, 0.16); }

/* Drag handle, rank entry and player name read as one workflow: the first three
   cells are tightened together rather than spaced like independent columns. */
#myRanksView .mrDragCell { width: 26px; padding-right: 0; }
#myRanksView .mrRankCell { width: 108px; padding-left: 4px; white-space: nowrap; }
#myRanksView .mrPlayerCell { padding-left: 4px; }

#myRanksView .mrDragHandle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 26px; padding: 0; border-radius: 5px;
  color: #6E8099; cursor: grab; transition: color 120ms ease, background 120ms ease;
}
#myRanksView .mrDragHandle svg { width: 10px; height: 16px; fill: currentColor; }
#myRanksView .mrDragHandle:hover { color: var(--mr-accent); background: var(--mr-accent-soft); }
#myRanksView .mrDragHandle:focus-visible { outline: 2px solid var(--mr-accent); outline-offset: 1px; color: #E9D5FF; }
#myRanksView .mrDragHandle:active { cursor: grabbing; }

#myRanksView .mrRankStack { display: grid; gap: 2px; }
#myRanksView .mrRankInput {
  width: 58px; height: 30px; padding: 0 7px; border-radius: 6px;
  border: 1px solid #30435F; background: #111B2B; color: #EAF2FF;
  font-size: 13px; font-variant-numeric: tabular-nums; text-align: center;
}
#myRanksView .mrRankInput::placeholder { color: #5C6E86; }
#myRanksView .mrRankInput.isSet {
  border-color: rgba(168, 85, 247, 0.55); background: rgba(168, 85, 247, 0.1);
  color: #F3E8FF; font-weight: 700;
}
#myRanksView .mrRankInput:focus { outline: 2px solid rgba(168, 85, 247, 0.85); outline-offset: 1px; }

#myRanksView .mrFallbackNote { color: #6B7D95; font-size: 9.5px; line-height: 1.3; cursor: help; }
#myRanksView .mrMove { display: inline-flex; align-items: baseline; gap: 4px; font-size: 10px; font-weight: 700; cursor: help; }
#myRanksView .mrMove i { font-style: normal; font-weight: 400; font-size: 9px; color: #7389A5; }
#myRanksView .mrMoveUp { color: var(--mr-up); }
#myRanksView .mrMoveDown { color: var(--mr-down); }
#myRanksView .mrMoveEven { color: #94A3B8; }

#myRanksView .mrMoveButtons { display: inline-flex; flex-direction: column; margin-left: 3px; vertical-align: middle; opacity: 0.3; transition: opacity 130ms ease; }
#myRanksView .myRanksTable tr:hover .mrMoveButtons,
#myRanksView .mrMoveButtons:focus-within { opacity: 1; }
#myRanksView .mrMoveButtons button {
  border: 0; background: transparent; color: #9FB6D4; cursor: pointer;
  padding: 0 3px; min-height: 0; line-height: 1.1; font-size: 11px;
}
#myRanksView .mrMoveButtons button:hover { color: var(--mr-accent); }
#myRanksView .mrMoveButtons button:focus-visible { outline: 2px solid var(--mr-accent); outline-offset: 1px; border-radius: 3px; }

#myRanksView .mrPlayerButton { padding: 0; text-align: left; }
#myRanksView .mrPlayerText { display: grid; gap: 1px; line-height: 1.25; }
#myRanksView .mrPlayerName { color: #EEF5FF; font-size: 13px; font-weight: 600; }
#myRanksView .mrPlayerMeta { color: #7E93AF; font-size: 10px; }
#myRanksView .mrPlayerMeta .mrPos { font-style: normal; font-weight: 700; color: var(--pc, #7E93AF); }
#myRanksView .mrPlayerMeta .pos-qb { --pc: #3B82F6; }
#myRanksView .mrPlayerMeta .pos-rb { --pc: #10B981; }
#myRanksView .mrPlayerMeta .pos-wr { --pc: #38BDF8; }
#myRanksView .mrPlayerMeta .pos-te { --pc: #8B5CF6; }
#myRanksView .mrPlayerMeta .pos-k { --pc: #F59E0B; }
#myRanksView .mrPlayerMeta .pos-dst { --pc: #64748B; }
#myRanksView .mrRowBadges { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
#myRanksView .mrBadge {
  padding: 1px 6px; border-radius: 5px; font-size: 9px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
#myRanksView .mrBadgeManual { color: #E9D5FF; background: var(--mr-accent-soft); border: 1px solid rgba(168, 85, 247, 0.42); }
#myRanksView .mrBadgeKeeper { color: #FBBF24; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.35); margin-left: 0; }
#myRanksView .mrBadgeDrafted { color: #94A3B8; background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.3); margin-left: 0; }

#myRanksView .mrNum { font-variant-numeric: tabular-nums; color: #C3D3E8; }
#myRanksView .mrPersonalized { color: #EEF5FF; font-weight: 600; }
#myRanksView .mrPosCell, #myRanksView .mrTeamCell { color: #9DB2CE; font-size: 11.5px; }

#myRanksView .mrTierSelect {
  height: 28px; padding: 0 6px; border-radius: 6px; font-size: 11.5px;
  border: 1px solid #30435F; background: #111B2B; color: #93A9C6;
}
/* A set tier reads as a coloured badge; "No tier" stays quiet. */
#myRanksView .mrTierSet .mrTierSelect { color: #0B1220; font-weight: 700; border-color: transparent; background: var(--tier, #64748B); }
#myRanksView .mrTier1 { --tier: #F87171; } #myRanksView .mrTier2 { --tier: #FB923C; }
#myRanksView .mrTier3 { --tier: #FBBF24; } #myRanksView .mrTier4 { --tier: #4ADE80; }
#myRanksView .mrTier5 { --tier: #38BDF8; } #myRanksView .mrTier6 { --tier: #A78BFA; }

/* An empty note is a 30px affordance, not a 150px input on every row. */
#myRanksView .mrNoteCell { position: relative; width: 42px; }
#myRanksView .mrNote {
  width: 30px; height: 28px; padding: 0 6px; border-radius: 6px;
  border: 1px dashed #35496A; background: transparent; color: #EAF2FF; font-size: 11.5px;
  transition: width 140ms ease, background 140ms ease, border-color 140ms ease;
}
#myRanksView .mrNoteCell[data-filled="true"] .mrNote {
  width: 120px; border-style: solid; border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.08);
}
#myRanksView .mrNote:focus {
  width: 220px; border-style: solid; background: #111B2B;
  outline: 2px solid rgba(168, 85, 247, 0.85); outline-offset: 1px; position: relative; z-index: 2;
}
#myRanksView .mrNote::placeholder { color: transparent; }
#myRanksView .mrNote:focus::placeholder { color: #5C6E86; }
#myRanksView .mrNoteIcon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #5C6E86; font-size: 11px; }
#myRanksView .mrNoteCell[data-filled="true"] .mrNoteIcon,
#myRanksView .mrNote:focus + .mrNoteIcon { display: none; }

#myRanksView .mrActionsCell { white-space: nowrap; }
#myRanksView .mrResetPlayer { color: #9DB2CE; font-size: 11px; }
#myRanksView .mrResetPlayer:hover { color: #FCA5A5; }
#myRanksView .mrNoAction { color: #33445E; font-size: 11px; }

/* ------------------------------------------------------------- empty states */

#myRanksView .mrEmpty {
  display: grid; gap: 6px; justify-items: start; margin: 12px; padding: 18px 20px;
  border: 1px dashed var(--mr-line); border-radius: 11px; background: rgba(10, 16, 27, 0.5);
}
#myRanksView .mrEmpty strong { color: #EEF5FF; font-size: 13.5px; }
#myRanksView .mrEmpty span { color: #8EA5C4; font-size: 12px; }
#myRanksView .mrEmpty .mrGhost { margin-top: 4px; }

/* ------------------------------------------------------------------ a11y/motion */

#myRanksView .mrSegmented button:focus-visible,
#myRanksView .mrGhost:focus-visible,
#myRanksView .mrPrimaryAction:focus-visible,
#myRanksView .mrSecondaryAction:focus-visible,
#myRanksView .mrBoardTools > summary:focus-visible,
#myRanksView .mrBoardToolsMenu button:focus-visible {
  outline: 2px solid #E9D5FF; outline-offset: 2px;
}
/* A focused row must never sit under the sticky toolbar or table header. */
#myRanksView .myRanksTable tbody tr:focus-within { scroll-margin-top: 96px; }
#myRanksView .myRanksTable tbody tr:focus-within > td:first-child { box-shadow: inset 3px 0 0 #E9D5FF; }

@media (prefers-reduced-motion: reduce) {
  #myRanksView .mrProgressTrack > span,
  #myRanksView .mrNote,
  #myRanksView .mrMoveButtons,
  #myRanksView .myRanksTable tbody tr { transition: none; }
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  #myRanksView .mrStatus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #myRanksView .mrOnboard { grid-template-columns: 1fr; }
  #myRanksView .mrOpinion { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  #myRanksView .mrQuickActions { margin-left: 0; }
  #myRanksView .mrBaseContext { grid-template-columns: 1fr; }
}

/* Card layout. The previous mobile labels were index-based nth-child rules,
   which silently mislabel every cell after a removed column. They are replaced
   with the data-mobile-label the markup now carries. */
@media (max-width: 599px), (max-height: 600px) and (orientation: landscape) and (max-width: 900px) {
  #myRanksView .mrStatus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #myRanksView .mrToolbar { position: static; }
  #myRanksView .mrFieldSearch { flex: 1 1 100%; }
  #myRanksView .mrQuickActions { width: 100%; }
  #myRanksView .mrSegmented { width: 100%; }
  #myRanksView .mrSegmented button { flex: 1; justify-content: center; padding: 10px 6px; font-size: 12px; }

  #myRanksView .myRanksTable td::before { content: attr(data-mobile-label); }
  #myRanksView .myRanksTable td[data-mobile-label="Player"] { grid-column: 1 / -1; }
  #myRanksView .myRanksTable td[data-mobile-label="My rank"] { grid-column: 1 / -1; }
  #myRanksView .myRanksTable td[data-mobile-label="Actions"] { grid-column: 1 / -1; }
  #myRanksView .myRanksTable td[data-mobile-label="Note"] { grid-column: 1 / -1; }
  #myRanksView .myRanksTable td[data-mobile-label="Drag"] { display: grid; width: auto; }

  /* Primary workflow first: player, my rank, personalized. Everything else is
     ordered after it in the same card, so no horizontal scrolling is needed. */
  #myRanksView .myRanksTable td[data-mobile-label="Player"] { order: 1; }
  #myRanksView .myRanksTable td[data-mobile-label="My rank"] { order: 2; }
  #myRanksView .myRanksTable td[data-mobile-label="Personalized"] { order: 3; }
  #myRanksView .myRanksTable td[data-mobile-label="Base board"] { order: 4; }
  #myRanksView .myRanksTable td[data-mobile-label="Market"] { order: 5; }
  #myRanksView .myRanksTable td[data-mobile-label="Tier"] { order: 6; }
  #myRanksView .myRanksTable td[data-mobile-label="Pos"] { order: 7; }
  #myRanksView .myRanksTable td[data-mobile-label="Team"] { order: 8; }
  #myRanksView .myRanksTable td[data-mobile-label="Note"] { order: 9; }
  #myRanksView .myRanksTable td[data-mobile-label="Drag"] { order: 10; }
  #myRanksView .myRanksTable td[data-mobile-label="Actions"] { order: 11; }

  #myRanksView .mrRankCell, #myRanksView .mrNoteCell, #myRanksView .mrDragCell { width: auto; }
  #myRanksView .mrRankInput { width: 100%; height: 44px; font-size: 16px; }
  #myRanksView .mrNote { width: 100%; height: 44px; border-style: solid; }
  #myRanksView .mrNote::placeholder { color: #5C6E86; }
  #myRanksView .mrNoteIcon { display: none; }
  #myRanksView .mrTierSelect { width: 100%; min-height: 44px; }
  #myRanksView .mrDragHandle { width: 44px; height: 44px; border: 1px solid #30435F; }
  #myRanksView .mrMoveButtons { flex-direction: row; gap: 6px; opacity: 1; margin-left: 0; }
  #myRanksView .mrMoveButtons button { min-height: 40px; min-width: 40px; font-size: 15px; }
  #myRanksView .myRanksTable tr.mrEditedRow { border-left: 3px solid var(--mr-accent); }
  #myRanksView .myRanksTable tr.mrEditedRow > td:first-child { box-shadow: none; }
}

/* ----------------------------------------------------------------------------
   `.myRanksPanel { overflow: hidden }` (styles.css:118) makes the panel the
   nearest scroll container for anything inside it. Two consequences, both
   pre-existing: a sticky toolbar can never engage, because that container
   never scrolls; and an absolutely positioned menu is clipped at the panel
   edge. Scoped to this view so the rule keeps applying everywhere else.
   -------------------------------------------------------------------------- */
#myRanksView .myRanksPanel { overflow: visible; }

/* ----------------------------------------------------------------------------
   MY RANKS — three layout corrections found by measuring the rendered table.

   1. Rows measured 90px in "compact". The My Rank cell held a block-level
      .mrRankStack followed by an inline .mrMoveButtons, so the two stacked
      (52 + 24 + 12 padding) instead of sitting side by side. Laying the cell
      out as a flex row is what makes the drag handle, rank entry and player
      name read as one workflow rather than three stacked controls.

   2. Global `button/input/select { min-height: 34-38px }` tap-target rules beat
      the declared heights on the compact in-table controls, so a 28px select
      still occupied 38px. min-height is reset only for these table controls;
      the mobile block below restores 44px targets for touch.

   3. The Board Tools menu is right-anchored, but its trigger sits at the LEFT
      of the header on wide layouts, which pushed a 210px menu to x=-41.
      Anchoring to the trigger's start edge keeps it on screen either way.
   -------------------------------------------------------------------------- */

#myRanksView .mrRankCell {
  display: flex; align-items: center; gap: 4px;
}
#myRanksView .mrRankStack { flex: 0 0 auto; }
#myRanksView .mrMoveButtons { margin-left: 0; flex: 0 0 auto; }

#myRanksView .mrRankInput,
#myRanksView .mrNote,
#myRanksView .mrTierSelect,
#myRanksView .mrDragHandle,
#myRanksView .mrMoveButtons button,
#myRanksView .mrResetPlayer {
  min-height: 0;
}
#myRanksView .mrGhost,
#myRanksView .mrJump input,
#myRanksView .mrField select,
#myRanksView .mrField input { min-height: 34px; }
#myRanksView .mrDensity button { min-height: 28px; }

#myRanksView .mrBoardToolsMenu { right: auto; left: 0; max-width: calc(100vw - 24px); }

@media (max-width: 599px), (max-height: 600px) and (orientation: landscape) and (max-width: 900px) {
  #myRanksView .mrRankCell { display: grid; }
  #myRanksView .mrRankInput,
  #myRanksView .mrNote,
  #myRanksView .mrTierSelect { min-height: 44px; }
  #myRanksView .mrDragHandle { min-height: 44px; }
  #myRanksView .mrMoveButtons button { min-height: 40px; }
}

/* Chat attachments ------------------------------------------------------- */
.chatForm {
  grid-template-columns: 1fr;
  gap: 9px;
}

.chatComposer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.chatAttachButton {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #263448;
  border-radius: 12px;
  background: #111827;
  color: #94A3B8;
  cursor: pointer;
}

.chatAttachButton svg,
.chatAttachmentAction svg,
.chatAttachmentMedia svg {
  width: 19px;
  height: 19px;
}

.chatAttachButton:hover,
.chatAttachButton:focus-visible,
.chatForm.isDropTarget .chatAttachButton {
  border-color: #60A5FA;
  color: #BFDBFE;
  background: #172033;
  outline: 2px solid rgba(96, 165, 250, .2);
}

.chatAttachmentGroup {
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 2px 1px 4px;
  scrollbar-width: thin;
}

.chatAttachmentGroup[hidden] {
  display: none;
}

.chatAttachment {
  min-width: 0;
  flex: 0 0 min(270px, 78vw);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid #263448;
  border-radius: 12px;
  background: #111827;
  color: #E5E7EB;
}

.chatAttachmentMedia {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #334155;
  border-radius: 8px;
  background: #0B1220;
  color: #93C5FD;
}

.chatAttachmentMedia.isImage {
  border-color: rgba(96, 165, 250, .45);
}

.chatAttachmentMedia img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.chatAttachmentContent {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.chatAttachmentTitle,
.chatAttachmentDescription {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatAttachmentTitle {
  color: #F8FAFC;
  font-size: 12px;
  font-weight: 850;
}

.chatAttachmentDescription {
  color: #93C5FD;
  font-size: 10px;
  font-weight: 750;
}

.chatAttachmentActions {
  align-self: start;
}

.chatAttachmentAction {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #94A3B8;
  cursor: pointer;
}

.chatAttachmentAction:hover,
.chatAttachmentAction:focus-visible {
  border-color: rgba(248, 113, 113, .45);
  background: rgba(127, 29, 29, .25);
  color: #FCA5A5;
  outline: none;
}

.chatAttachmentHint {
  margin: -2px 0 0 52px;
  color: #64748B;
  font-size: 10px;
}

.chatMessageAttachments {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(148, 163, 184, .18);
}

.chatMessageAttachments .chatAttachment {
  width: min(100%, 360px);
  flex-basis: auto;
  background: #0B1220;
}

.chatMessage.user .chatMessageAttachments .chatAttachment {
  border-color: rgba(191, 219, 254, .3);
  background: rgba(15, 23, 42, .32);
}

@media (max-width: 620px) {
  .chatComposer {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .chatComposer > button[type="submit"] {
    grid-column: 1 / -1;
    width: 100%;
  }

  .chatAttachmentHint {
    margin-left: 0;
  }
}

/* Chat markers ----------------------------------------------------------- */
.chatMarker {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #94A3B8;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.chatMarkerIcon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  color: #60A5FA;
}

.chatMarkerIcon svg {
  width: 16px;
  height: 16px;
}

.chatMarkerContent {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chatAttachmentMarkers {
  min-width: 0;
  display: grid;
  gap: 8px;
  margin: 12px 0 2px;
}

.chatAttachmentMarkers .chatMarker {
  max-width: 100%;
}

.chatMarker.border {
  width: 100%;
  padding: 0 0 9px;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.chatMarker.separator {
  width: 100%;
  display: flex;
  gap: 10px;
  margin: 20px 0 14px;
  color: #64748B;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.chatMarker.separator::before,
.chatMarker.separator::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(148, 163, 184, .18);
}

.chatMarker.separator::before,
.chatMarker.separator::after {
  align-self: center;
}

.chatMarkerSpinner {
  border: 2px solid rgba(96, 165, 250, .22);
  border-top-color: #60A5FA;
  border-radius: 50%;
  animation: chatMarkerSpin 800ms linear infinite;
}

.chatMarkerContent.shimmer {
  background: linear-gradient(100deg, #94A3B8 20%, #E0F2FE 45%, #94A3B8 70%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: chatMarkerShimmer 1.6s ease-in-out infinite;
}

.chatLoading {
  width: auto;
  display: inline-flex;
  justify-self: start;
  margin: 0 22px 10px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.chatLoading .chatMarkerIcon {
  width: 20px;
  height: 20px;
  background: transparent;
  border-radius: 50%;
}

.chatLoading .chatMarkerContent {
  font-size: 12px;
}

.chatQueueCard > .chatMarker {
  margin-bottom: 10px;
}

@keyframes chatMarkerSpin {
  to { transform: rotate(360deg); }
}

@keyframes chatMarkerShimmer {
  0%, 100% { background-position: 150% 0; }
  50% { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chatMarkerSpinner,
  .chatMarkerContent.shimmer {
    animation: none;
  }
}

@media (max-width: 699px) {
  .chatAttachmentMarkers {
    gap: 7px;
    margin-top: 10px;
  }

  .chatAttachmentMarkers .chatMarker.separator {
    margin: 14px 0 10px;
  }
}

/* Board/chat integration ------------------------------------------------- */
@media (min-width: 700px) {
  .chatBackdrop {
    background: rgba(3, 7, 15, 0.18);
    backdrop-filter: none;
  }

  .chatPanel {
    inset: 16px 16px 16px auto;
    width: min(520px, calc(100vw - 32px));
    height: calc(100dvh - 32px);
    margin: 0;
    transform: translateX(18px) scale(.99);
  }

  .chatPanel.open {
    transform: translateX(0) scale(1);
  }
}

.chatBoardLink {
  border-color: rgba(96, 165, 250, .5) !important;
  background: rgba(30, 64, 175, .24) !important;
  color: #DBEAFE !important;
}

.chatBoardLink:hover,
.chatBoardLink:focus-visible {
  border-color: #60A5FA !important;
  background: rgba(37, 99, 235, .38) !important;
  outline: 2px solid rgba(96, 165, 250, .22);
}

.chatContextLabel {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #93C5FD;
}

.chatFocusRow {
  position: relative;
  z-index: 1;
  animation: chatFocusRowPulse 1.8s ease-out;
}

@keyframes chatFocusRowPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px transparent; }
  18%, 58% { box-shadow: inset 0 0 0 2px #60A5FA, 0 0 22px rgba(96, 165, 250, .34); }
}

@media (max-width: 699px) {
  .chatHeaderActions { flex-wrap: wrap; justify-content: flex-end; }
  .chatBoardLink { display: none; }
}

/* Keep the transcript as the only scrolling region. The chat panel is a
   fixed grid, so the message row must be allowed to shrink before its own
   overflow can take over—especially when a restored conversation is long. */
.chatPanel {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.chatMessages {
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.chatForm {
  min-height: 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 699px) {
  .chatMessages {
    padding-bottom: calc(18px + var(--safe-bottom));
  }
}

/* Keep the drawer viewport fixed while allowing the transcript itself to
   consume the remaining height. This prevents long answers from pushing the
   composer and follow-up questions below the visible chat window. */
.chatPanel {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.chatPanel > .chatHeader,
.chatPanel > .chatModeLabel,
.chatPanel > .chatChips,
.chatPanel > .chatForm {
  flex: 0 0 auto;
}

.chatMessages,
.chatForm {
  min-width: 0;
}

.chatMessages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scroll-padding-block: 14px;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 700px) {
  .chatPanel {
    top: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    left: auto !important;
    width: min(520px, calc(100vw - 24px)) !important;
    height: auto !important;
    max-height: none !important;
  }
}

@media (max-width: 699px) {
  .chatPanel {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

/* Stabilization pass: reserve the mobile navigation band for the chat
   composer, and let tablet navigation scroll as a single row instead of
   compressing labels until they become unreadable. */
@media (max-width: 699px) {
  .chatPanel {
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom)) !important;
  }

  .chatForm {
    margin-bottom: 0 !important;
  }
}

/* Compact native-style mobile navigation. Keep this final so page-specific
   polish cannot reintroduce the oversized Assistant dock treatment. */
@media (max-width: 599px), (max-height: 600px) and (orientation: landscape) and (max-width: 900px) {
  :root {
    --bottom-nav-height: 64px;
  }

  body {
    padding-bottom: calc(78px + var(--safe-bottom)) !important;
  }

  body.mobileDraftActive {
    padding-bottom: calc(78px + var(--safe-bottom) + 116px) !important;
  }

  .mobileBottomNav {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1450 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px !important;
    min-height: var(--bottom-nav-height) !important;
    padding: 6px 10px calc(6px + var(--safe-bottom)) !important;
    border-top: 1px solid rgba(125, 154, 205, 0.18) !important;
    background: rgba(5, 12, 24, 0.96) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  .mobileBottomNav button,
  .mobileBottomNav button.active,
  .mobileBottomNav button[aria-current="page"],
  .mobileBottomNavAssistant {
    display: flex !important;
    min-width: 0 !important;
    min-height: 52px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 4px 2px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #7888a4 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }

  .mobileBottomNav button > span:first-child,
  .mobileBottomNavAssistant > span:first-child {
    color: currentColor !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  .mobileBottomNav button.active,
  .mobileBottomNav button[aria-current="page"] {
    border-color: transparent !important;
    background: rgba(93, 130, 255, 0.1) !important;
    color: #78aaff !important;
  }

  .mobileBottomNav button:focus-visible {
    outline: 2px solid #78aaff !important;
    outline-offset: -2px !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .tabs .tab {
    flex: 0 0 auto !important;
    min-width: max-content;
    white-space: nowrap;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

.chatSourceControl {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 7px;
  align-items: baseline;
  margin-bottom: 10px;
  padding: 6px 8px;
  border: 1px solid rgba(96, 165, 250, .25);
  border-radius: 8px;
  background: rgba(15, 31, 54, .52);
  color: #8fa2bb;
  font-size: 10px;
  line-height: 1.35;
}

.chatSourceControl strong { color: #dbeafe; font-size: 11px; }
.chatSourceControl small { grid-column: 1 / -1; color: #7890ad; font-size: 10px; }

.dataHealthPanel {
  display: grid;
  gap: 14px;
  margin: 20px 0 24px;
  padding: 16px;
  border: 1px solid rgba(96, 165, 250, .24);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(15, 31, 54, .9), rgba(9, 18, 32, .86));
}

.dataHealthHeader { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.dataHealthHeader h2 { margin: 3px 0 4px; color: #f8fbff; font-size: 17px; }
.dataHealthHeader p, .dataHealthEmpty { margin: 0; color: #91a8c4; font-size: 12px; line-height: 1.45; }
.dataHealthBadge { white-space: nowrap; padding: 5px 8px; border: 1px solid rgba(74, 222, 128, .35); border-radius: 999px; color: #bbf7d0; background: rgba(22, 101, 52, .2); font-size: 10px; font-weight: 800; }
.dataHealthBadge.is-running { border-color: rgba(251, 191, 36, .4); color: #fde68a; background: rgba(120, 53, 15, .22); }
.dataHealthBadge.is-error { border-color: rgba(248, 113, 113, .45); color: #fecaca; background: rgba(127, 29, 29, .25); }
.dataHealthBadge.is-muted { border-color: rgba(148, 163, 184, .25); color: #94a3b8; background: rgba(51, 65, 85, .22); }
.dataHealthGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dataHealthGrid > div { min-width: 0; display: grid; gap: 4px; padding: 10px; border: 1px solid rgba(148, 163, 184, .16); border-radius: 9px; background: rgba(7, 14, 26, .42); }
.dataHealthGrid span { color: #7890ad; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.dataHealthGrid strong { min-width: 0; overflow-wrap: anywhere; color: #eaf2ff; font-size: 13px; }
.dataHealthGrid small { color: #91a8c4; font-size: 10px; }
.dataHealthErrors, .dataHealthHealthy { display: flex; flex-wrap: wrap; gap: 6px; color: #fca5a5; font-size: 11px; }
.dataHealthHealthy { color: #86efac; }

@media (max-width: 700px) {
  .dataHealthHeader { display: grid; }
  .dataHealthGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .dataHealthGrid { grid-template-columns: 1fr; }
}

/* Shadcn-inspired line chart system -------------------------------------
   The app uses inline SVG rather than Recharts, so these tokens and rules
   provide the same visual language without changing the data layer. */
:root {
  --chart-1: #60a5fa;
  --chart-2: #a78bfa;
  --chart-grid: rgba(148, 163, 184, 0.18);
  --chart-axis: #94a3b8;
  --chart-card: rgba(15, 23, 42, 0.72);
  --chart-dot: #a78bfa;
}

[data-chart-style="shadcn"] {
  --chart-line: var(--chart-1);
  --chart-trend: var(--chart-2);
  background: var(--chart-card) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden;
  padding: 0 !important;
}

[data-chart-style="shadcn"] .chartHeader {
  padding: 16px 16px 0 !important;
}

[data-chart-style="shadcn"] .chartTitle strong {
  font-size: 13px;
  letter-spacing: -0.01em;
}

[data-chart-style="shadcn"] .chartTitle p {
  color: var(--chart-axis);
  margin-top: 4px;
}

[data-chart-style="shadcn"] .chartControls {
  margin: 12px 0 0;
  padding: 0 16px;
}

[data-chart-style="shadcn"] .chartBody {
  background: transparent !important;
  padding: 14px 16px 16px !important;
}

[data-chart-style="shadcn"] .svgChart {
  min-height: 180px;
}

[data-chart-style="shadcn"] .chartPlotBorder {
  display: none;
}

[data-chart-style="shadcn"] .chartGridline,
[data-chart-style="shadcn"] .chartGridLine {
  stroke: var(--chart-grid);
  stroke-width: 0.55;
  stroke-dasharray: 3 3;
}

[data-chart-style="shadcn"] .chartGridline.vertical {
  display: none;
}

[data-chart-style="shadcn"] .chartActualLine {
  stroke: var(--chart-line) !important;
  stroke-width: 1.8 !important;
  filter: none !important;
}

[data-chart-style="shadcn"] .chartTrendLine {
  stroke: var(--chart-trend) !important;
  stroke-width: 1.25 !important;
  stroke-dasharray: 4 3;
  opacity: 0.75;
}

[data-chart-style="shadcn"] .chartPoint {
  fill: var(--chart-dot) !important;
  stroke: var(--chart-card);
  stroke-width: 0.8;
  opacity: 0.92;
  transition: opacity 0.12s ease, r 0.12s ease;
}

[data-chart-style="shadcn"] .chartPoint:hover,
[data-chart-style="shadcn"] .chartPoint:focus-visible,
[data-chart-style="shadcn"]:hover .chartPoint {
  opacity: 1;
}

[data-chart-style="shadcn"] .chartValueLabel {
  fill: var(--color-text-strong, #f8fafc);
  font-size: 3.1px;
  font-weight: 600;
}

[data-chart-style="shadcn"] .chartLabels {
  color: var(--chart-axis);
}

[data-chart-style="shadcn"] .chartSourceLine {
  opacity: 0.7;
}

/* Specialized SVG charts use the same palette, grid, card, and line hierarchy. */
#managerTendenciesView .mtChart,
#leagueHistoryView .lhChart,
#compareView .cmpTrendSvg,
#compareView .cmpSplitSvg {
  background: var(--chart-card);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
}

#managerTendenciesView .mtScoreLine,
#leagueHistoryView .lhLineA,
#compareView .cmpTrendLine.playerA {
  stroke: var(--chart-1);
  stroke-width: 1.8;
  filter: none;
}

#managerTendenciesView .mtRollLine,
#leagueHistoryView .lhRollLine {
  stroke: var(--chart-2);
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
  opacity: 0.75;
}

#leagueHistoryView .lhLineB,
#compareView .cmpTrendLine.playerB {
  stroke: #f472b6;
  stroke-width: 1.6;
}

#managerTendenciesView .mtLeagueLine,
#managerTendenciesView .mtMeanLine,
#leagueHistoryView .lhLeagueLine,
#leagueHistoryView .lhMeanLine,
#compareView .cmpMeanLine {
  stroke: var(--chart-axis);
  opacity: 0.7;
  stroke-dasharray: 3 3;
}

#managerTendenciesView .mtDot,
#leagueHistoryView .lhDot,
#compareView .cmpTrendDot {
  stroke: var(--chart-card);
  stroke-width: 0.8;
  opacity: 0.95;
}

#managerTendenciesView .mtDot:not(.isHigh):not(.isLow),
#leagueHistoryView .lhDot:not(.isHigh):not(.isLow):not(.isFlagged),
#compareView .cmpTrendDot {
  fill: var(--chart-dot) !important;
}

@media (max-width: 720px) {
  [data-chart-style="shadcn"] .chartHeader {
    padding: 13px 13px 0 !important;
  }

  [data-chart-style="shadcn"] .chartBody {
    padding: 12px 13px 13px !important;
  }
}

/* Mobile foundation v1 --------------------------------------------------
   Responsive-only layout work. Desktop geometry and application behavior
   remain unchanged; these rules make the existing views easier to use with
   a narrow viewport and touch input. */
@media (max-width: 760px) {
  html,
  body {
    min-width: 320px;
    overflow-x: hidden;
  }

  main {
    padding: 12px 12px 24px;
  }

  .appShell {
    width: 100%;
    padding: 12px 12px 24px;
  }

  .topbar {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
    padding: 12px !important;
  }

  .topbar > div:first-child {
    min-width: 0;
  }

  .topbar h1 {
    font-size: 20px;
  }

  .topbar p {
    max-width: none;
    font-size: 11px;
    line-height: 1.35;
  }

  .headerActions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    min-width: 0 !important;
    gap: 7px;
  }

  .headerActions > button {
    min-height: 42px;
    padding-inline: 8px;
  }

  .globalSearch {
    grid-column: 1 / -1;
    width: 100%;
    order: 4;
  }

  .globalSearch #searchInput {
    min-height: 42px;
  }

  .authControls {
    grid-column: 1 / -1;
    justify-content: flex-end;
    min-width: 0;
    order: 5;
  }

  .sleeperConnectBar {
    margin-inline: 0;
    padding: 14px;
  }

  .sleeperConnectionForm {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sleeperConnectionForm button,
  .sleeperConnectionForm input {
    min-height: 42px;
  }

  .tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 12px 0 !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .tab {
    flex: 0 0 auto;
    min-height: 42px;
    padding-inline: 12px;
    scroll-snap-align: start;
  }

  .layout,
  .assistantLayout,
  .auditLayout,
  .visualGrid,
  .playerProfileGrid,
  .wrappedGrid,
  .homeHero,
  .projectEffortGrid,
  .kpis,
  .filters,
  .settingsPanel,
  .compareControls {
    grid-template-columns: 1fr !important;
  }

  .homeHero,
  .wrappedHero {
    padding: 16px;
  }

  .panelHeader,
  .marketSectionHeader,
  .chartHeader,
  .nextPickDecisionHeader {
    gap: 8px;
  }

  .panelHeader button,
  .marketSectionHeader button,
  .chartToggle,
  .chartTypeSelector select,
  .resetButton,
  .infoButton,
  .detailNode,
  .chartOpenButton {
    min-height: 40px;
  }

  .chartControls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .tableWrap,
  .marketTableWrap,
  .mtTableScroll,
  .lhTableScroll,
  .cmpTableScroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .playerDrawer,
  .teamDrawer,
  .detailInsightDrawer {
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    border-radius: 0 !important;
  }

  .playerDrawerClose,
  .teamDrawerClose,
  .detailInsightClose {
    min-width: 42px;
    min-height: 42px;
  }

  .cmpTrendSvg,
  .cmpSplitSvg {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .appShell,
  main {
    padding-inline: 9px;
  }

  .headerActions {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .headerActions > button {
    font-size: 11px;
  }

  .topbar h1 {
    font-size: 18px;
  }

  .tabs {
    padding-inline: 9px !important;
  }

  [data-chart-style="shadcn"] .chartControls {
    padding-inline: 12px;
  }
}

/* Mobile data-view pass: Market, News, Sleeper, My Ranks, Teams, Weekly. */
@media (max-width: 760px) {
  #marketView .marketHeroHeader,
  #marketView .marketControls,
  #newsView .newsKpiRow,
  #newsView .newsKpiRowSecondary,
  #newsView .newsLeaderboardGrid,
  #newsView .newsGrid,
  #myRanksView .myRanksStats,
  #myRanksView .myRanksOpinionSummary,
  #teamsView .visualGrid,
  #weeklyRankingsView .weeklyPageHero,
  #weeklyRankingsView .weeklyBoardControls {
    grid-template-columns: 1fr !important;
  }

  #marketView .marketHeroHeader {
    display: grid;
    gap: 10px;
    padding: 16px;
  }

  #marketView .marketControls {
    display: grid;
    gap: 9px;
    padding: 12px;
  }

  #marketView .marketControls input,
  #marketView .marketControls select,
  #marketView .marketControls button,
  #newsView .newsFilters input,
  #newsView .newsFilters select,
  #newsView .newsFilters button,
  #myRanksView .myRanksControls input,
  #myRanksView .myRanksControls select,
  #myRanksView .myRanksControls button {
    min-height: 42px;
    width: 100%;
  }

  #newsView .newsLeaderboardGrid,
  #newsView .newsGrid {
    gap: 10px;
  }

  #newsView .newsCard header,
  #newsView .newsCardActions,
  #newsView .newsLeaderboardRow {
    flex-wrap: wrap;
    gap: 7px;
  }

  #newsView .newsCard,
  #newsView .newsLeaderboardPanel {
    min-width: 0;
  }

  #myRanksView .myRanksControls {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #myRanksView .myRanksControlGroup,
  #myRanksView .myRanksBlendControl,
  #myRanksView .myRanksSearch {
    min-width: 0;
    width: 100%;
  }

  #myRanksView .myRanksOnboarding {
    display: block;
  }

  #myRanksView .myRanksOnboardingActions {
    justify-content: flex-start;
    margin-top: 10px;
  }

  #myRanksView .myRanksTableWrap,
  #teamsView .tableWrap,
  #weeklyRankingsView .weeklyTableScroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #weeklyRankingsView .weeklyPageHero {
    display: grid;
    gap: 12px;
  }

  #weeklyRankingsView .weeklyBoardModeTabs,
  #weeklyRankingsView .weeklyPositionTabs {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
  }

  #weeklyRankingsView .weeklyBoardModeTabs > *,
  #weeklyRankingsView .weeklyPositionTabs > * {
    flex: 0 0 auto;
    min-height: 42px;
  }

  #weeklyRankingsView .weeklyMobileCards {
    display: grid;
    gap: 9px;
  }

  #sleeperView .sleeperPanel,
  #sleeperView .sleeperStatus,
  #sleeperView .sleeperLockedCard {
    min-width: 0;
  }
}

/* Mobile history pass: League Wrapped, League History, Manager Tendencies,
   Draft History, and chart-heavy sections. */
@media (max-width: 760px) {
  #wrappedView .wrappedGrid,
  #wrappedView .dnaGrid,
  #wrappedView .championCards,
  #wrappedView .managerCards,
  #wrappedView .draftGradeGrid,
  #wrappedView .recordsBoards,
  #leagueHistoryView .lhCardGrid,
  #leagueHistoryView .lhTwoCol,
  #managerTendenciesView .mtTwoCol,
  #managerTendenciesView .mtStatGrid,
  #draftHistoryView .draftHistoryGrid,
  #draftHistoryView .draftGradeGrid {
    grid-template-columns: 1fr !important;
  }

  #leagueHistoryView .lhControls,
  #managerTendenciesView .mtControls,
  #draftHistoryView .draftHistoryControls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  #leagueHistoryView .lhControls select,
  #managerTendenciesView .mtControls select,
  #draftHistoryView .draftHistoryControls select {
    width: 100%;
    min-height: 42px;
  }

  #leagueHistoryView .lhChartWrap,
  #managerTendenciesView .mtChartWrap,
  #draftHistoryView .chartFrame {
    min-width: 0;
    max-width: 100%;
  }

  #leagueHistoryView .lhTableScroll,
  #managerTendenciesView .mtTableScroll,
  #draftHistoryView .draftHistoryTableWrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #leagueHistoryView .lhChartAxis,
  #managerTendenciesView .mtChartAxis {
    overflow: hidden;
  }

  #leagueHistoryView .lhChartLegend,
  #managerTendenciesView .mtChartLegend,
  #compareView .cmpChartLegend {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 10px;
  }

  #leagueHistoryView .lhChart,
  #managerTendenciesView .mtChart {
    min-height: 190px;
  }
}

@media (max-width: 480px) {
  #leagueHistoryView .lhChart,
  #managerTendenciesView .mtChart {
    min-height: 170px;
  }
}

/* Mobile workflow pass: Draft Board, Player Details, Compare, Assistant. */
@media (max-width: 760px) {
  #draftView .draftControls,
  #draftView .settingsPanel,
  #draftView .filters,
  #draftView .kpis,
  #playersView .playersToolbar,
  #compareView .compareGrid,
  #compareView .compareCoreGrid,
  #compareView .compareQuantGroups,
  #assistantView .assistantAnalysisGrid,
  #assistantView .assistantDecisionLanes {
    grid-template-columns: 1fr !important;
  }

  #draftView .boardHeaderActions,
  #playersView .playersToolbar,
  #assistantView .assistantActions,
  #assistantView .assistantSearch,
  #assistantView .assistantControls {
    width: 100%;
  }

  #draftView .boardHeaderActions,
  #playersView .playersToolbar,
  #assistantView .assistantActions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  #draftView .boardHeaderActions > *,
  #playersView .playersToolbar > *,
  #assistantView .assistantActions > * {
    flex: 1 1 150px;
    min-width: 0;
  }

  #draftView .boardPanel,
  #playersView .playerProfile,
  #compareView .compareGrid,
  #assistantView .assistantRecommendation,
  #assistantView .assistantRail {
    min-width: 0;
  }

  #draftView .boardPanel .tableWrap,
  #playersView .playerStatsBlock,
  #playersView .playerGameLog,
  #compareView .compareStatTable,
  #assistantView .assistantDecisionBoard {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #compareView .compareThesisMetrics,
  #compareView .compareBestFor,
  #compareView .compareDraftThesis {
    grid-template-columns: 1fr !important;
  }

  #compareView .compareQuantGroups {
    gap: 9px;
  }

  #compareView .compareQuantGroup,
  #assistantView .assistantPlayerCard,
  #assistantView .assistantAnalysisGrid article {
    padding: 12px;
  }

  #assistantView .assistantSearch input,
  #assistantView .assistantSearch select,
  #assistantView .assistantSearch button {
    width: 100%;
    min-height: 42px;
  }

  #assistantView .assistantSearchResults button {
    width: 100%;
    min-height: 52px;
    text-align: left;
  }

  #playersView .playerHero {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  #playersView .playerHeroScore {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: left;
  }

  #playersView .playerTabsCard,
  #playersView .playerChartCard,
  #playersView .playerSeasonCard {
    min-width: 0;
  }

  #playersView .playerYearTabs,
  #playersView .playerTabButtons {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
  }

  #playersView .playerYearTabs > *,
  #playersView .playerTabButtons > * {
    flex: 0 0 auto;
  }
}

@media (max-width: 480px) {
  #playersView .playerHero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  #playersView .playerHeroScore {
    text-align: center;
  }

  #draftView .boardHeaderActions > *,
  #playersView .playersToolbar > *,
  #assistantView .assistantActions > * {
    flex-basis: 100%;
  }
}

/* Mobile draft tray and header cleanup. This is intentionally scoped to the
   phone breakpoints so the desktop shell and draft behavior remain intact. */
@media (max-width: 599px), (max-height: 600px) and (orientation: landscape) and (max-width: 900px) {
  :root {
    --bottom-nav-height: 60px;
    --mobile-draft-tray-collapsed-height: 60px;
    --mobile-draft-tray-expanded-height: 120px;
  }

  html,
  body {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom)) !important;
  }

  body.mobileDraftActive {
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--mobile-draft-tray-collapsed-height)) !important;
  }

  body.mobileDraftActive.mobileDraftTrayOpen {
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--mobile-draft-tray-expanded-height)) !important;
  }

  main.appShell,
  .appShell {
    padding-bottom: 24px !important;
  }

  .topbar {
    gap: 7px !important;
    padding: calc(9px + var(--safe-top)) 12px 8px !important;
  }

  .headerActions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 42px !important;
    gap: 5px !important;
    row-gap: 6px !important;
    align-items: center !important;
  }

  .headerActions > button {
    min-width: 0 !important;
    width: 100% !important;
    padding-inline: 4px !important;
    font-size: 10px !important;
    white-space: nowrap;
  }

  .globalSearch {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    order: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .globalSearch #searchInput {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .authControls {
    grid-column: 4 !important;
    grid-row: 1 !important;
    order: initial !important;
    width: 42px !important;
    max-width: 42px !important;
    min-width: 42px !important;
    min-height: 44px !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .authControls .authStatus {
    display: none !important;
  }

  .authControls .userButton:not([hidden]),
  .authControls .authSignInButton:not([hidden]) {
    display: flex !important;
  }

  .authControls .userButton:not([hidden]) {
    width: 36px !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .authControls .authSignInButton:not([hidden]) {
    min-width: 42px !important;
    min-height: 40px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
  }

  .sleeperConnectBar {
    gap: 8px !important;
    padding: 10px 12px 12px !important;
  }

  .sleeperConnectBarHeader p {
    line-height: 1.3 !important;
  }

  .sleeperConnectBar .sleeperConnectionForm,
  .sleeperConnectionForm {
    width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
  }

  .sleeperConnectionForm label,
  .sleeperConnectionForm input,
  .sleeperConnectionForm button {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .sleeperConnectionForm input {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The tray replaces the old independently stacked context/action layers. */
  .mobileDraftTray {
    display: none !important;
  }

  body.mobileDraftActive .mobileDraftTray {
    position: fixed !important;
    right: 8px !important;
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 6px) !important;
    left: 8px !important;
    z-index: 1440 !important;
    display: block !important;
    min-width: 0 !important;
    border: 1px solid rgba(96, 165, 250, 0.28) !important;
    border-radius: 13px !important;
    background: rgba(7, 14, 26, 0.97) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    overflow: hidden !important;
  }

  .mobileDraftContext:not([hidden]) {
    position: static !important;
    display: block !important;
    min-width: 0 !important;
  }

  .mobileDraftTraySummary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    min-height: var(--mobile-draft-tray-collapsed-height) !important;
  }

  .mobileDraftContextButton {
    display: grid !important;
    grid-template-columns: minmax(68px, 0.8fr) minmax(0, 1.15fr) minmax(0, 0.9fr) !important;
    gap: 6px !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: var(--mobile-draft-tray-collapsed-height) !important;
    padding: 7px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #dbeafe !important;
    text-align: left !important;
  }

  .mobileDraftContextButton > span,
  .mobileDraftTrayMetric {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobileDraftContextLead,
  .mobileDraftTrayMetric {
    display: grid !important;
    gap: 2px !important;
  }

  .mobileDraftContextLead strong,
  .mobileDraftTrayMetric strong {
    min-width: 0;
    overflow: hidden;
    color: #f8fbff;
    font-size: 11px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobileDraftContextLead small,
  .mobileDraftTrayMetric small {
    overflow: hidden;
    color: #7894b6;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobileDraftTrayToggle {
    display: grid !important;
    min-width: 42px !important;
    min-height: 44px !important;
    place-items: center !important;
    border: 0 !important;
    border-left: 1px solid rgba(125, 154, 205, 0.18) !important;
    border-radius: 0 !important;
    background: rgba(30, 64, 175, 0.12) !important;
    color: #78aaff !important;
    font-size: 21px !important;
    line-height: 1 !important;
  }

  .mobileDraftTrayToggle span {
    display: block;
    transition: transform 140ms ease;
  }

  .mobileDraftTray.is-expanded .mobileDraftTrayToggle span {
    transform: rotate(180deg);
  }

  body.mobileDraftActive .mobileDraftActionBar,
  .mobileDraftActionBar {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: none !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    min-width: 0 !important;
    padding: 6px !important;
    border-top: 1px solid rgba(125, 154, 205, 0.16) !important;
    background: rgba(5, 12, 24, 0.78) !important;
    backdrop-filter: none !important;
  }

  .mobileDraftActionBar button {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 3px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  body.mobileDraftActive .mobileDraftTray.is-expanded .mobileDraftActionBar {
    display: grid !important;
  }

  .mobileBottomNav {
    min-height: var(--bottom-nav-height) !important;
    padding: 5px 8px calc(5px + var(--safe-bottom)) !important;
  }

  .mobileBottomNav button,
  .mobileBottomNav button.active,
  .mobileBottomNav button[aria-current="page"],
  .mobileBottomNavAssistant {
    min-height: 44px !important;
    gap: 2px !important;
    padding: 3px 2px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: #9aabc1 !important;
    font-size: 10px !important;
    font-weight: 650 !important;
  }

  .mobileBottomNav button > span:first-child,
  .mobileBottomNavAssistant > span:first-child {
    color: currentColor !important;
    font-size: 15px !important;
  }

  .mobileBottomNav button.active,
  .mobileBottomNav button[aria-current="page"] {
    background: rgba(93, 130, 255, 0.1) !important;
    color: #78aaff !important;
  }
}