* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); color: var(--ink); font-family: var(--font); }
body { margin: 0; }
.hosted-gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.hosted-gate .card { width: min(100%, 440px); padding: 28px; }
.hosted-gate .lede { margin: 16px 0 24px; }
.button-link { display: inline-block; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--orange); color: var(--on-accent); font-weight: 750; text-decoration: none; }
.button-link:hover { background: var(--orange-hover); }
.button-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button, input, select { font: inherit; }
button, select, input { min-height: 34px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font-size: 13px; }
/* One dropdown look everywhere: native arrow off, one chevron at a fixed
   inset on the right. */
select {
  appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px;
}
button { padding: 5px 12px; border-color: var(--orange); background: var(--orange); color: var(--on-accent); font-weight: 760; cursor: pointer; }
button:hover { background: var(--orange-hover); }
button.secondary, button.quiet { border-color: var(--line-strong); background: var(--panel); color: var(--ink); }
button.quiet { border-color: transparent; background: transparent; color: var(--muted); }
button.danger { color: var(--red); }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 55%, transparent); outline-offset: 2px; }
[hidden] { display: none !important; }
/* ------------------------------------------------------------- shell */
.app-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 22px;
  padding: 18px 12px; background: var(--arena); color: var(--on-arena); overflow-y: auto;
}
.brand-lockup { display: flex; align-items: center; gap: 10px; padding: 0 6px; white-space: nowrap; }
.brand-lockup div { display: grid; }
.brand-lockup strong { font-size: 15px; letter-spacing: -.01em; }
.brand-lockup span { color: var(--on-arena); opacity: .7; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.brand-mark { display: block; flex-shrink: 0; width: 27px; height: 27px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-tab {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 10px;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--on-arena);
  font-size: 13px; font-weight: 650; text-align: left; opacity: .78;
}
.nav-tab:hover { background: rgb(255 255 255 / 7%); color: var(--on-arena); opacity: 1; }
.nav-tab.active { background: rgb(255 255 255 / 12%); opacity: 1; }
.count { display: inline-grid; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px; place-items: center; border-radius: 999px; background: rgb(255 255 255 / 14%); color: var(--on-arena); font-size: 11px; }
.league-card { margin-top: auto; display: grid; gap: 3px; padding: 12px; border-radius: var(--radius-lg); background: rgb(255 255 255 / 7%); font-size: 12px; }
.league-card .eyebrow { color: var(--on-arena); opacity: .7; margin: 0; }
.league-card strong { font-size: 13px; }
.league-card > span { opacity: .8; }
.league-facts { display: grid; gap: 2px; margin: 8px 0 0; font-size: 11px; }
.league-facts div { display: flex; justify-content: space-between; gap: 8px; }
.league-facts dt { opacity: .65; }
.league-facts dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { min-width: 0; padding: 22px clamp(14px, 2.4vw, 32px) 40px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.view-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.eyebrow { margin: 0 0 4px; color: var(--orange); font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
h1, h2 { margin: 0; letter-spacing: -.03em; }
h1 { font-size: 26px; }
h2 { font-size: 18px; }
.lede { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.view-actions { display: flex; gap: 7px; }
.control-panel { display: grid; grid-template-columns: minmax(180px, 1.5fr) repeat(4, minmax(125px, .7fr)); gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); }
/* With the two playoff controls the wide layout needs six columns so every
   dropdown stays on one row (Leon, 2026-09-29). Narrower layouts keep their
   own column counts below. */
@media (min-width: 1081px) {
  .control-panel.with-playoff { grid-template-columns: minmax(170px, 1.2fr) repeat(5, minmax(0, .7fr)); }
}
label, .control-panel fieldset { display: grid; gap: 5px; min-width: 0; }
label > span, legend { color: var(--faint); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
input, select { width: 100%; padding: 6px 9px; }
select { padding-right: 28px; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; padding: 0; accent-color: var(--orange); }
.control-panel fieldset { grid-column: 1 / -1; margin: 0; padding: 9px 0 0; border: 0; border-top: 1px solid var(--line); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills label { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 750; cursor: pointer; }
.pills input { width: auto; min-height: auto; accent-color: var(--orange); }
.bulk-bar { position: sticky; top: 8px; z-index: 8; display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 10px auto -48px; padding: 7px 9px 7px 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--arena); color: var(--on-arena); box-shadow: var(--shadow); }
.bulk-bar select { min-width: 180px; }
.table-shell { max-height: calc(100vh - 330px); min-height: 320px; margin-top: 14px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); scrollbar-gutter: stable; }
table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { height: 34px; padding: 4px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); font-size: 12px; white-space: nowrap; }
th { position: sticky; top: 0; z-index: 3; border-bottom-color: var(--line-strong); background: var(--surface); color: var(--faint); font-size: 11px; letter-spacing: .07em; text-align: right; text-transform: uppercase; }
th button { min-height: 28px; padding: 2px; border: 0; background: transparent; color: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; }
th button:hover { background: transparent; color: var(--ink); }
th:first-child, td:first-child { position: sticky; left: 0; z-index: 2; width: 42px; min-width: 42px; text-align: center; background: var(--panel); }
th:nth-child(2), td:nth-child(2) { position: sticky; left: 42px; z-index: 2; width: 210px; min-width: 210px; text-align: left; background: var(--panel); box-shadow: 8px 0 12px -12px rgb(16 24 40 / 35%); }
thead th:first-child, thead th:nth-child(2) { z-index: 5; background: var(--surface); }
td { text-align: right; }
tbody tr:hover td { background-color: var(--orange-soft); }
.player-name { display: block; overflow: hidden; font-weight: 780; text-overflow: ellipsis; }
.player-meta { color: var(--faint); font-size: 11px; }
.delta-up { color: var(--green); font-weight: 800; }
.delta-down { color: var(--red); font-weight: 800; }
/* Same continuous gradient as the side panel (see board.css): tint from the
   server's magnitude, capped for readable ink text; bold marks positive. */
.board-table, table { --signal-tint-max: 0.42; }
.stat-positive { color: var(--ink); font-weight: 700; background: rgb(var(--green-rgb) / calc(var(--magnitude, 0.5) * var(--signal-tint-max))); }
.stat-negative { color: var(--ink); background: rgb(var(--red-rgb) / calc(var(--magnitude, 0.5) * var(--signal-tint-max))); }
/* The Big Board carries 21 columns: headers may wrap to two lines and cells
   are tighter, so the scores fit at 1440 and stay near the left edge below. */
#boardScroller th, #boardScroller td { padding: 4px 5px; }
#boardScroller th { white-space: normal; line-height: 1.15; letter-spacing: .04em; vertical-align: bottom; }
#boardScroller th button { white-space: normal; text-align: inherit; width: min-content; margin-left: auto; }
#boardScroller th:first-child, #boardScroller td:first-child { width: 32px; min-width: 32px; }
#boardScroller th:nth-child(2), #boardScroller td:nth-child(2) { left: 32px; width: 170px; min-width: 170px; max-width: 170px; }
#boardScroller td.punted, #boardScroller th.punted { color: var(--faint); }
#boardScroller th.punted button { text-decoration: line-through; }
.table-summary { margin: 8px 2px; color: var(--faint); font-size: 11px; }
.sub-nav { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.sub-tab { min-height: 36px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 750; }
.sub-tab:hover { background: var(--surface); color: var(--ink); }
.sub-tab.active { border-bottom-color: var(--orange); color: var(--ink); }
.depth-layout { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.depth-teams { display: grid; gap: 2px; align-content: start; max-height: calc(100vh - 330px); overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.depth-teams button { min-height: 32px; padding: 0 10px; border-color: transparent; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; text-align: left; }
.depth-teams button:hover { background: var(--surface); color: var(--ink); }
.depth-teams button[aria-pressed="true"] { background: var(--orange-soft); color: var(--ink); }
.depth-card { min-height: 320px; }
.depth-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.depth-column { display: grid; gap: 8px; align-content: start; }
.depth-position-head { padding-bottom: 6px; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.depth-slot { display: grid; gap: 5px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.depth-slot-name { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 750; }
.depth-slot-name span:last-child { color: var(--faint); font-weight: 600; white-space: nowrap; }
.depth-slot-bar { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.depth-slot-bar span { display: block; height: 100%; background: var(--orange); }
.depth-slot-meta { display: flex; justify-content: space-between; color: var(--faint); font-size: 11px; }
.depth-empty-slot { padding: 8px 0; color: var(--faint); font-size: 11px; font-style: italic; }
.split-layout { display: grid; grid-template-columns: minmax(230px, 310px) minmax(0, 1fr); gap: 16px; min-height: 520px; }
.collection-pane, .detail-pane, .card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); }
.collection-pane { padding: 8px; }
.list-cards { display: grid; gap: 5px; }
.list-card { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; width: 100%; padding: 11px; border-color: transparent; background: transparent; color: var(--ink); text-align: left; }
.list-card:hover, .list-card.active { border-color: var(--line); background: var(--surface); }
.list-card strong { overflow: hidden; text-overflow: ellipsis; }
.list-card small { grid-column: 1; color: var(--faint); font-weight: 600; }
.kind-tag { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--blue); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.detail-pane { min-width: 0; padding: clamp(14px, 2vw, 24px); }
.detail-head, .card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.stale-guide { margin: 14px 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-radius: var(--radius); background: var(--amber-soft); color: var(--amber); }
.stale-guide p { margin: 3px 0 9px; font-size: 12px; }
.stale-guide div { display: flex; flex-wrap: wrap; gap: 5px; }
.row-actions { display: flex; justify-content: end; gap: 3px; }
.row-actions button { min-width: 34px; min-height: 32px; padding: 4px 7px; }

/* Ranking list detail (decision 13): the pilot's drag-reorder editor,
 * reusing this page's own table/delta conventions (.delta-up/.delta-down,
 * already used by the research board's rank-change column) rather than
 * the design pilot's lw-* classes -- decision 17's token-only migration
 * applies to every real stylesheet, not just the ones already shipped. */
.ranking-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; margin-top: 14px; }
.ranking-table-wrap { overflow-x: auto; }
.ranking-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ranking-table th:first-child, .ranking-table td:first-child { width: 28px; min-width: 28px; max-width: 28px; padding-inline: 4px; }
.ranking-table th, .ranking-table td { padding: 7px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); font-size: 12px; text-align: left; white-space: nowrap; }
.ranking-table th { color: var(--faint); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ranking-table th.num, .ranking-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ranking-table tr:hover td { background-color: var(--orange-soft); }
.ranking-table tr[data-dragging="true"] { opacity: .55; }
.ranking-table tr[data-drag-over="true"] td { box-shadow: inset 0 2px 0 0 var(--orange); }
.drag-grip { display: flex; align-items: center; justify-content: center; width: 28px; color: var(--faint); font-size: 13px; letter-spacing: -2px; cursor: grab; touch-action: none; }
.drag-grip:active { cursor: grabbing; }
.ranking-side .card h3 { margin: 0 0 6px; color: var(--faint); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.changes-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.changes-list li { display: flex; justify-content: space-between; gap: 8px; }
.changes-list li span:last-child { font-weight: 800; font-variant-numeric: tabular-nums; }
.changes-empty { color: var(--faint); font-size: 12px; }
.ranking-side .card button.wide { width: 100%; margin-top: 10px; }

/* Preserve enough room for the table's fixed reorder grip at common laptop
 * widths. Keep the summary below the table until the full 1600px layout is
 * available. */
@media (max-width: 1599px) {
  .ranking-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Shortlist detail (decision 13): membership only, no ranking -- a
 * deliberately different, simpler shape from the ranking table above,
 * since order carries no meaning for a shortlist. */
.shortlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 14px; }
.shortlist-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.shortlist-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.shortlist-item button { min-width: 28px; min-height: 28px; padding: 0 8px; }
.league-grid { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(320px, .9fr); gap: 16px; }
.card { padding: clamp(14px, 2vw, 22px); }
.card-heading select { width: auto; max-width: 240px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.form-grid .wide { grid-column: 1 / -1; }
.slot-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.slot-picker legend { padding: 0; margin-bottom: 6px; font-size: 11px; font-weight: 700; color: var(--muted); }
.slot-total { font-weight: 400; color: var(--faint); }
/* Each picker keeps room for its number: one row of nine when the card is
   wide, wrapping when the card is half width beside Session analysis (the
   War Room just above 1080px, as with the side panel open). */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: 6px; }
.slot-pick { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.slot-pick span { font-size: 11px; font-weight: 700; text-align: center; color: var(--ink); }
.slot-pick select { width: 100%; min-width: 0; padding-left: 10px; padding-right: 24px; text-align: center; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.empty-state { display: grid; min-height: 220px; place-content: center; color: var(--muted); text-align: center; }
.empty-state p { max-width: 440px; margin: 5px auto; font-size: 12px; }
.analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; margin-top: 14px; }
.analysis-metric { padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.analysis-metric strong { display: block; font-size: 18px; }
.analysis-metric span { color: var(--faint); font-size: 11px; }
.mock-launch { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(220px, 360px) auto; align-items: end; gap: 18px; }
.mock-summary { grid-column: 2 / -1; margin: -8px 0 0; color: var(--muted); font-size: 12px; }
.mock-new-league { grid-column: 2 / -1; display: grid; gap: 8px; margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); }
.mock-new-league legend { padding: 0; margin-bottom: 6px; }
.mock-new-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; }
.mock-new-league .mock-summary { margin: 0; }
.session-list-card { margin-top: 16px; }
.session-list { display: grid; gap: 7px; margin-top: 12px; }
.session-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px; border-radius: var(--radius); }
.session-row.most-recent { background: var(--orange-soft); }
.session-identity { display: grid; gap: 2px; min-width: 0; }
.session-identity strong { font-size: 14px; }
.session-row.most-recent .session-identity strong { color: var(--orange-hover); }
.session-identity span { display: block; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.session-actions { display: flex; align-items: center; gap: 10px; }
.session-link { color: var(--blue); font-size: 12px; font-weight: 750; }
.status-active { border-color: var(--orange); color: var(--orange-hover); }
.status-complete { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.status-good { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.status-attention { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }
.account-card { grid-column: 1 / -1; }
/* No text-transform: its content is JS-authored sentence case already
 * ("Action incomplete"), and GLOSSARY.md requires sentence case throughout. */
.status-pill { padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 800; }
.sync-facts { display: flex; gap: 24px; margin: 12px 0; }
.sync-facts div { display: grid; gap: 2px; }
.sync-facts dt { color: var(--faint); font-size: 11px; text-transform: uppercase; }
.sync-facts dd { margin: 0; font-weight: 780; }
.sync-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.sync-toggle input { width: auto; accent-color: var(--orange); }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.account-options { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.account-options summary { width: fit-content; cursor: pointer; font-size: 12px; font-weight: 750; }
.account-options .account-actions { margin-top: 12px; }
.account-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.account-error { color: var(--red); font-size: 13px; line-height: 1.5; }
.conflict-panel { margin-top: 14px; padding: 12px; border: 1px solid var(--amber); border-radius: var(--radius); background: var(--amber-soft); }
.conflict-panel p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
.import-preview { max-height: 240px; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 12px; }
.import-preview p { overflow-wrap: anywhere; }
.import-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.import-preview ul { padding-left: 20px; }
button:disabled { opacity: .55; cursor: default; }
#accountDialogDetail { line-height: 1.5; overflow-wrap: anywhere; }
dialog { width: min(460px, calc(100vw - 24px)); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); color: var(--ink); box-shadow: 0 24px 80px rgb(0 0 0 / 30%); }
dialog::backdrop { background: rgb(8 13 23 / 62%); }
dialog form { display: grid; gap: 15px; padding: 20px; }
.dialog-heading, .dialog-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.icon-button { width: 36px; min-height: 36px; padding: 0; border-color: transparent; background: transparent; color: var(--muted); font-size: 22px; }
dialog fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.radio { display: grid; grid-template-columns: auto 1fr; align-items: center; color: var(--ink); font-size: 12px; }
.radio input { width: auto; accent-color: var(--orange); }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 20; max-width: min(420px, calc(100vw - 36px)); padding: 11px 14px; border-radius: var(--radius); background: var(--arena); color: var(--on-arena); font-size: 12px; font-weight: 700; opacity: 0; transform: translateY(8px); transition: opacity var(--motion) var(--ease), transform var(--motion) var(--ease); pointer-events: none; }
.toast.show { opacity: 1; transform: none; }

@media (forced-colors: active) {
  .stat-positive, .stat-negative { color: CanvasText; background: Canvas; }
  .stat-positive { border-bottom: 3px solid Highlight; }
  .stat-negative { border-bottom: 3px dashed Highlight; }
}

@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 10; height: auto; flex-direction: row; align-items: center; gap: 12px; padding: 8px 12px; overflow-x: auto; }
  .side-nav { flex-direction: row; }
  .nav-tab { width: auto; white-space: nowrap; }
  .league-card { display: none; }
  .control-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search-field { grid-column: span 2; }
  .league-grid { grid-template-columns: 1fr; }
  .mock-launch { grid-template-columns: 1fr; align-items: stretch; }
}
@media (max-width: 760px) {
  main { padding: 18px 10px 32px; }
  .view-heading { align-items: start; }
  .view-actions { display: none; }
  .control-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-field, .control-panel fieldset { grid-column: 1 / -1; }
  .table-shell { max-height: calc(100vh - 420px); min-height: 300px; }
  .split-layout { grid-template-columns: 1fr; }
  .depth-layout { grid-template-columns: 1fr; }
  .depth-teams { max-height: 160px; }
  .depth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranking-layout { grid-template-columns: 1fr; }
  .collection-pane { max-height: 210px; overflow-y: auto; }
  .league-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: 1; }
  .bulk-bar { border-radius: var(--radius); }
}
@media (max-width: 480px) {
  .control-panel { grid-template-columns: 1fr; }
  .search-field, .control-panel fieldset { grid-column: 1; }
  .bulk-bar { flex-wrap: wrap; }
  .bulk-bar label { flex: 1; }
}

/* ------------------------------------------------ rankings and starring */
.star { min-height: 26px; width: 26px; padding: 0; border: 0; background: transparent; color: var(--line-strong); font-size: 15px; line-height: 1; }
.star:hover { background: transparent; color: var(--orange); }
.star.on { color: var(--orange); }
th:first-child .sr-only + *, th:first-child { color: var(--faint); }
.ranking-page { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.ranking-main { padding: 16px 18px; min-width: 0; }
.ranking-main .ranking-table-wrap { max-height: calc(100vh - 220px); overflow: auto; margin-top: 10px; }
.ranking-main .ranking-table th { position: sticky; top: 0; z-index: 3; background: var(--panel); }
.ranking-table th, .ranking-table td { padding: 4px 8px; height: 32px; }
.ranking-table tr.out-of-pool td { color: var(--faint); }
.ranking-table tr.out-of-pool .player-name { text-decoration: line-through; }
.ranking-aside { display: grid; gap: 12px; position: sticky; top: 16px; }
.ranking-tool { padding: 14px 16px; }
.ranking-tool h3 { margin: 0; color: var(--faint); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.ranking-tool .card-heading { padding-bottom: 8px; margin-bottom: 8px; }
.ranking-tool .lede { font-size: 12px; margin: 4px 0 8px; }
.build-pills { margin: 0 0 8px; padding: 0; border: 0; }
.build-pills label { padding: 4px 7px; }
.starred-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12px; max-height: 220px; overflow-y: auto; }
.starred-list li { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.starred-list button { min-height: 22px; padding: 0 6px; }
.changes-list { max-height: 220px; overflow-y: auto; }
.ranking-aside button.wide { width: 100%; }
.nudge { min-width: 28px !important; min-height: 26px !important; padding: 0 6px !important; }
.inline-field { display: block; min-width: 220px; }
@media (max-width: 1080px) { .ranking-page { grid-template-columns: 1fr; } .ranking-aside { position: static; } }
/* The ranking table is its own layout: none of the Big Board's sticky
   first-two-column rules apply (they clipped player names). */
.ranking-table th, .ranking-table td { position: static; left: auto; width: auto; min-width: 0; box-shadow: none; background: var(--panel); }
.ranking-table th:first-child, .ranking-table td:first-child { width: 28px; min-width: 28px; }
.ranking-table th:nth-child(2), .ranking-table td:nth-child(2) { width: 40px; text-align: right; }
.ranking-main .ranking-table thead th { position: sticky; top: 0; z-index: 3; }

.ranking-find { max-width: 220px; margin-left: auto; }
.ranking-table tr.found td { background: var(--orange-soft); }
.ranking-table tr.found .player-name { color: var(--orange-hover); }

/* Keep table cells as table cells. Flex/block layout belongs inside them,
   otherwise Chrome creates anonymous cells with mismatched row borders. */
.ranking-table td { vertical-align: middle; }
.ranking-table td:nth-child(3) { min-width: 150px; max-width: 260px; }
.ranking-table td:nth-child(3) .player-name { line-height: 1.35; }
.ranking-table tr:not([draggable="true"]) .drag-grip { cursor: default; opacity: .4; }
.ranking-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.ranking-toolbar .ranking-find { margin-left: 0; flex: 1; }
.filter-toggle { white-space: nowrap; }
button.filter-toggle[aria-pressed="true"] { background: var(--orange-soft); border-color: var(--orange); color: var(--ink); }
td.table-empty, #boardScroller td.table-empty { position: static; padding: 24px 12px; text-align: center; white-space: normal; color: var(--muted); }
.view-actions { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.score-help { position: relative; font-size: 12px; }
.score-help summary { cursor: pointer; color: var(--muted); padding: 8px 4px; white-space: nowrap; }
.score-help summary:hover { color: var(--ink); }
.score-help summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.score-help-copy { position: absolute; right: 0; top: 100%; z-index: 12; width: min(390px, calc(100vw - 40px)); padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); color: var(--ink); box-shadow: var(--shadow); line-height: 1.5; }

/* Depth charts use the viewport rather than the board table's short scroll
   allowance. Teams and the chart scroll independently; both stay reachable. */
.depth-workspace { height: 100dvh; min-height: 0; }
.depth-workspace main { display: flex; flex-direction: column; min-height: 0; padding-bottom: 16px; }
.depth-workspace #boardView { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.depth-workspace .view-heading { flex-shrink: 0; }
.depth-workspace #depthSubView { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.depth-workspace .depth-layout { flex: 1; min-height: 0; margin-top: 0; grid-template-columns: 100px minmax(0, 1fr); }
.depth-workspace .depth-teams { min-height: 0; max-height: none; scrollbar-gutter: stable; }
.depth-workspace .depth-teams button { min-height: 28px; }
.depth-workspace .depth-card { min-height: 0; overflow: auto; }
.depth-card .card-heading { flex-wrap: wrap; gap: 6px; }
.depth-card .card-heading .lede { font-size: 12px; }
.depth-slot-name { flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.depth-slot-name span:last-child { font-size: 11px; }
.depth-team-stats { margin: 16px 0 20px; }
.depth-team-stats h3 { margin: 0 0 8px; font-size: 13px; }
.depth-team-stats h3 span { color: var(--muted); font-weight: 400; }
.team-stats { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; margin: 0; }
.team-stat { padding: 8px 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-align: center; }
.team-stat dt { color: var(--muted); font-size: 11px; font-weight: 700; }
.team-stat dd { margin: 4px 0 0; font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; }
@media (max-width: 1080px) {
  .depth-workspace { grid-template-rows: auto minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .view-heading { flex-wrap: wrap; gap: 12px; }
  .view-actions { display: flex; justify-content: flex-start; }
  .score-help-copy { right: auto; left: 0; }
  .depth-workspace .depth-layout { grid-template-columns: 66px minmax(0, 1fr); gap: 8px; }
  .depth-workspace .depth-teams { padding: 4px; }
  .depth-workspace .depth-teams button { padding-inline: 4px; }
  .depth-card { padding: 12px; }
  .team-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}