:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  background: #081426;
  color: #edf5ff;
  --surface: #0e2035;
  --stripe: #11253d;
  --muted: #9bb0c6;
  --line: #233d57;
  --accent: #60d9f0;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, select, input { font: inherit; }
button, select, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button, select, summary { cursor: pointer; }
a:focus-visible, select:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.draft-page { max-width: 1760px; margin: 0 auto; padding: 22px 24px 18px; }
.page-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.heading-group { min-width: 0; flex: 1; }
h1 { display: flex; align-items: center; gap: 8px; font-size: 20px; line-height: 1.3; font-weight: 650; letter-spacing: -.025em; margin: 0; }
.brand-mark { flex: 0 0 24px; border-radius: 5px; }
.league-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-year { color: #8ba9c7; font-size: 18px; font-weight: 450; }
.page-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; color: var(--muted); font-size: 12px; line-height: 1.4; margin: 5px 0 0 32px; }
.meta-dot { margin: 0 7px; color: #63849f; }
.refresh-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border: 1px solid #2c4b68; border-radius: 6px; background: #132a44; padding: 0 10px; font-size: 13px; font-weight: 550; }
.refresh-button:hover { background: #1a3855; border-color: #5284a2; }
.refresh-button svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.metric-control { display: flex; flex-shrink: 0; align-items: center; gap: 8px; min-width: 0; }
.metric-control label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.metric-control select { min-width: 0; max-width: 100%; min-height: 36px; padding: 0 26px 0 10px; color: #e0f4ff; font-size: 13px; border: 1px solid #2c4b68; border-radius: 6px; background: #132a44; }
.metric-control select:disabled { opacity: 1; color: #e0f4ff; cursor: default; }
.league-finder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 20px; padding: 18px; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.league-finder.has-leagues { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lookup-form, .league-choice { min-width: 0; }
.league-finder label { display: block; margin-bottom: 8px; color: #b6ccdf; font-size: 13px; font-weight: 550; }
.lookup-input-row { display: flex; gap: 8px; }
.lookup-input-row input, .league-choice select { min-width: 0; width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid #2c4b68; border-radius: 6px; background: #091a2e; color: #edf5ff; font-size: 14px; }
.lookup-input-row input { flex: 1; }
.lookup-input-row input::placeholder { color: #849eb7; }
.lookup-input-row button { flex-shrink: 0; min-height: 40px; white-space: nowrap; background: #60d9f0; color: #082237; border-color: #60d9f0; }
.lookup-input-row button:hover { background: #93e6f6; }
.lookup-input-row button:disabled { color: #3f657c; cursor: wait; }
.league-choice option:disabled { color: #737d86; }
.lookup-status { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.lookup-status:empty { display: none; }
.lookup-status.is-error { color: #ffb6ba; }
.draft-board, .stats-board { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.scoring-notice { background: #142e48; border-bottom: 1px solid var(--line); padding: 8px 12px; color: #c1d6e8; }
.scoring-notice p { font-size: 12px; line-height: 1.5; margin: 0; }
.board-scroll, .stats-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: #436d8a #0b1a2c; scrollbar-width: thin; }
.pick-matrix { width: 100%; min-width: calc(var(--team-count) * 96px); table-layout: fixed; border-collapse: separate; border-spacing: 3px; font-variant-numeric: tabular-nums; }
.team-heading { height: 72px; padding: 6px 3px; text-align: center; vertical-align: bottom; font-weight: 500; }
.team-heading-content { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.team-heading .team-picture { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 2px var(--owner-color, #2a4965); }
.team-heading .owner-name { width: 100%; color: var(--owner-color, #b4d3ea); font-size: 12px; }
.pick-cell { height: 44px; padding: 3px 6px; border: 1px solid var(--owner-color, #79c7dc); border-radius: 4px; vertical-align: middle; background: var(--owner-color, #79c7dc); color: #102638; }
.pick-cell:hover { filter: brightness(1.15); }
.pick-content { position: relative; display: flex; flex-direction: column; min-width: 0; }
.pick-number { align-self: flex-end; font-size: 10px; font-weight: 550; line-height: 14px; color: #203448; }
.pick-content .owner-name { font-size: 12px; line-height: 18px; }
.trade-arrow { position: absolute; top: 0; left: 0; color: #102638; font-size: 13px; line-height: 14px; }
.owner-cell { display: flex; align-items: center; gap: 7px; min-width: 0; }
.team-picture { display: block; width: 20px; height: 20px; flex: 0 0 auto; object-fit: cover; border-radius: 4px; background: #19334e; }
.owner-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; line-height: 18px; }
.board-footer { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 16px; }
.stats-board { margin-top: 16px; }
.board-toolbar { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; list-style: none; }
.board-toolbar::-webkit-details-marker, .method-details summary::-webkit-details-marker { display: none; }
.board-toolbar:hover { background: #132c45; }
.board-toolbar h2 { margin: 0; font-size: 14px; font-weight: 600; }
.stats-season { color: var(--muted); font-size: 12px; }
.table-scroll-hint { display: none; color: var(--muted); font-size: 11px; }
.stats-toggle { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; color: #a5d9ea; font-size: 12px; }
.stats-board[open] .when-closed, .stats-board:not([open]) .when-open { display: none; }
.disclosure-arrow { display: inline-block; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; width: 6px; height: 6px; transform: rotate(45deg); margin: 0 2px 3px 0; }
[open] > summary .disclosure-arrow { transform: rotate(225deg); margin-bottom: -2px; }
.draft-table { width: 100%; min-width: 560px; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.pick-counts-table { min-width: calc(272px + var(--round-count) * 88px); }
.pick-count-column { width: 88px; }
.pick-total-column { width: 92px; }
.record-column { width: 86px; }
.metric-column { width: 98px; }
.draft-table thead { background: #132e48; }
.draft-table thead th { height: 30px; padding: 5px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid #34556f; text-align: left; color: #aec6dc; font-size: 12px; font-weight: 500; }
.stats-table thead th { padding: 0; }
.stat-sort { display: flex; align-items: center; gap: 5px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; background: transparent; color: inherit; font-size: 12px; line-height: 15px; text-align: left; }
.numeric .stat-sort { justify-content: flex-end; text-align: right; }
.sort-label { white-space: normal; }
.sort-direction { flex: 0 0 10px; color: #8eabc4; font-size: 13px; }
.stat-sort:hover:not(:disabled) { background: #60d9f012; color: #edf5ff; }
.stat-sort:focus-visible { outline-offset: -3px; }
.stat-sort:disabled { cursor: default; opacity: 1; }
.stat-sort:disabled .sort-direction { display: none; }
[aria-sort] .sort-direction { color: #83e5f7; }
.draft-table tbody th, .draft-table tbody td { height: 32px; padding: 5px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; font-weight: 400; }
.draft-table tbody tr { --row-background: var(--surface); background: var(--row-background); }
.draft-table tbody tr:nth-child(even) { --row-background: var(--stripe); }
.draft-table tbody tr:hover { --row-background: #18334e; }
.draft-table tbody tr:last-child > * { border-bottom: 0; }
.draft-table .numeric { text-align: right; white-space: nowrap; }
.stats-table .owner-cell .team-picture { box-shadow: 0 0 0 2px var(--owner-color, #2a4965); }
.stats-table th[scope="row"] { box-shadow: inset 3px 0 var(--owner-color, #2a4965); position: sticky; left: 0; z-index: 1; background: var(--row-background); }
.stats-table thead th:first-child { position: sticky; left: 0; z-index: 2; background: #132e48; }
.draft-table .pick-count { color: #bfdde9; }
.draft-table .zero-picks { color: #8199b1; }
.draft-table .pick-total { color: var(--owner-color, #83e5f7); font-weight: 600; border-right: 1px solid var(--line); }
.record-value { color: #b0c7db; }
.draft-table .metric-value { color: #d3e4f3; }
.draft-table .selected-stat { color: #83e5f7; background: #60d9f009; }
.draft-table .heat-cell { background: hsl(var(--heat) 38% 24%); color: hsl(var(--heat) 80% 88%); box-shadow: inset 0 0 0 1px #08142633; }
.draft-table td.unavailable { color: #839db5; }
.method-details { border-bottom: 1px solid var(--line); }
.method-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 12px 1px; font-size: 12px; color: #a8c4dd; list-style: none; }
.method-content { max-width: 800px; color: var(--muted); font-size: 13px; line-height: 1.6; padding-bottom: 6px; }
.method-content h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #edf5ff; }
.method-content p { margin: 0 0 10px; }
.page-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; color: #819eb9; font-size: 11px; padding-top: 12px; }
.error-panel { padding: 40px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-align: center; }
.error-symbol { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #3d2940; color: #ffb6ba; }
.error-panel h2 { font-size: 20px; font-weight: 550; }
.error-panel p { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.empty-state { text-align: center; color: var(--muted); padding: 24px 16px; font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 901px) {
  .stats-table col:first-child { width: 32%; }
  .stats-table .record-column, .stats-table .metric-column, .stats-table .pick-count-column, .stats-table .pick-total-column { width: auto; }
}
@media (max-width: 900px) {
  .draft-page { padding: 16px; }
  .page-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 10px; }
  .heading-group { grid-column: 2 / -1; }
  .heading-group:first-child { grid-column: 1 / -1; }
  .metric-control { grid-column: 1 / 3; justify-content: flex-start; }
  #refresh { grid-column: 3; }
  .page-meta { margin-left: 0; font-size: 11px; gap: 3px 9px; }
  h1 { font-size: 18px; }
  .draft-year { font-size: 16px; }
  .refresh-button, .metric-control select, .lookup-input-row input, .lookup-input-row button, .league-choice select { min-height: 44px; }
  .metric-control select, .lookup-input-row input, .league-choice select { font-size: 16px; }
  .stats-board[open].has-overflow .table-scroll-hint { display: inline; }
  .stats-board[open].has-overflow .stats-season { display: none; }
}
@media (max-width: 600px) {
  .draft-page { padding: 14px max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .page-header { grid-template-columns: auto minmax(0, 1fr) 44px; gap: 12px 8px; }
  .heading-group { grid-column: 1 / -1; grid-row: 1; }
  h1 { align-items: flex-start; flex-wrap: wrap; gap: 4px 8px; }
  .league-title { flex: 1 1 calc(100% - 28px); white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .draft-year { margin-left: 28px; }
  .home-button { grid-column: 1; grid-row: 2; width: 72px; padding: 0 6px; gap: 4px; }
  .metric-control { grid-column: 2; grid-row: 2; }
  #refresh { grid-column: 3; grid-row: 2; width: 44px; padding: 0; }
  #refresh svg { width: 18px; height: 18px; }
  .refresh-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .league-finder, .league-finder.has-leagues { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .metric-control { gap: 6px; }
  .metric-control label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .metric-control select { width: 100%; padding-left: 8px; padding-right: 4px; }
  .brand-mark { width: 20px; height: 20px; flex-basis: 20px; }
  .board-footer { flex-wrap: wrap; gap: 0 8px; }
  .stats-board { margin-top: 12px; }
  .board-toolbar { gap: 8px; padding: 10px; }
  .board-toolbar h2 { font-size: 13px; white-space: nowrap; }
  .stats-season { font-size: 11px; white-space: nowrap; }
  .draft-table { min-width: 470px; }
  .stats-table col:first-child { width: 128px; }
  .record-column { width: 72px; }
  .metric-column { width: 90px; }
  .pick-counts-table { min-width: calc(220px + var(--round-count) * 80px); }
  .pick-count-column { width: 80px; }
  .draft-table tbody th, .draft-table tbody td { padding: 5px 8px; }
  .stat-sort { padding: 6px 8px; gap: 3px; }
  .stats-table .owner-cell { gap: 6px; }
  .stats-table .team-picture { width: 18px; height: 18px; }
  .method-content { font-size: 14px; }
}
@media (max-width: 420px) {
  .lookup-input-row { flex-direction: column; }
  .lookup-input-row button { width: 100%; }
}
@media (pointer: coarse) {
  .refresh-button, .metric-control select, .lookup-input-row input, .lookup-input-row button, .league-choice select { min-height: 44px; }
}