/* ============================================================
   Dynasty Draft Board — the board itself.
   Design tokens live in tokens.css, which every page loads first
   so the site and the app can never drift apart.
   ============================================================ */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

/* Author display rules (.btn { display:inline-flex } etc.) silently beat the
   UA stylesheet's [hidden] — without this, .hidden = true is a no-op on them. */
[hidden] { display: none !important; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
.grow { flex: 1; }
.muted { color: var(--ink-3); font-weight: 400; }
.hint { color: var(--ink-3); font-size: 12px; margin: 4px 0 12px; line-height: 1.55; }
code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); padding: 1px 4px; border-radius: 3px; }
svg { display: block; }

/* ─────────────────────────────────────────── top bar */

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 18px; height: 50px; flex: none;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.brand h1 { font-family: var(--serif); font-size: 18px; letter-spacing: -.015em; white-space: nowrap; }
.brand h1 a { color: inherit; text-decoration: none; }
.brand h1 a:hover { color: var(--ink-2); }
.brand p {
  margin: 0; font-size: 12px; color: var(--ink-3);
  cursor: pointer; /* opens Settings — it shows the league, so it edits the league */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.board-picker { display: flex; align-items: center; gap: 2px; }
.divider { width: 1px; height: 17px; background: var(--line); margin: 0 6px; }

/* ─────────────────────────────────────────── controls */

.btn {
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-2); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius);
  padding: 5px 10px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .12s, color .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.btn.bordered { border-color: var(--line); background: var(--surface); }
.btn.bordered:hover { background: var(--surface-2); }
.btn.primary { background: var(--btn-fill); border-color: var(--btn-fill); color: var(--btn-ink); }
.btn.primary:hover {
  /* Swap the fill, never fade the whole button — a translucent label on the
     most-clicked control reads as cheap. */
  background: color-mix(in srgb, var(--btn-fill) 85%, var(--surface));
  border-color: color-mix(in srgb, var(--btn-fill) 85%, var(--surface));
  color: var(--btn-ink);
}
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.btn.btn-icon { padding: 6px; min-width: 28px; color: var(--ink-3); }
.btn.btn-icon:hover { color: var(--ink); }
.btn.btn-sm { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.btn.on { background: var(--btn-fill); color: var(--btn-ink); }

input[type="text"], input[type="number"], input[type="search"], select {
  font: inherit; font-size: 13px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 5px 9px;
  outline: none; min-width: 0;
  transition: border-color .12s, box-shadow .12s;
}
input::placeholder { color: var(--ink-3); }
input:focus, select:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 14%, transparent);
}
select {
  appearance: none; padding-right: 24px; cursor: pointer;
  /* A real SVG chevron, matching the 1.5px-stroke icon set — the old
     gradient-triangle trick smudges at Windows fractional scaling. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%2374726a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: calc(100% - 8px) 52%;
  background-size: 10px 10px; background-repeat: no-repeat;
}
html[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%238b8996' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="file"] {
  font-size: 13px; color: var(--ink-2); width: 100%;
  padding: 16px; border: 1px dashed var(--line);
  border-radius: var(--radius); background: var(--surface-2);
}

/* ─────────────────────────────────────────── toolbar */

.toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 18px; flex: none; flex-wrap: wrap;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.tool-group { display: flex; align-items: center; gap: 4px; }
.tool-group.grow { flex: 1 1 180px; min-width: 150px; }
.tool-group.grow input { width: 100%; }

.source-group { gap: 6px; padding-right: 12px; border-right: 1px solid var(--line); }
.src-label { font-size: 12px; color: var(--ink-3); }
#rankSource { max-width: 200px; font-weight: 500; }
#btnSourceInfo { font-family: var(--serif); font-style: italic; font-size: 13px; }
.src-flag {
  font-size: 10px; font-weight: 600; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 3px; cursor: help;
  background: color-mix(in srgb, var(--warn) var(--tint), transparent);
  color: var(--warn);
}
.src-flag[hidden] { display: none; }
.src-flag.lock {
  background: var(--surface-3); color: var(--ink-3);
}

/* A published list is somebody else's data: no reorder affordances. Hide the
   CONTENTS, never the grid cells — removing a cell shifts every later cell
   into the wrong column track. */
.readonly-src .col-drag { opacity: 0 !important; cursor: default; }
.readonly-src .mv,
.readonly-src .tier-tools { display: none !important; }
.readonly-src .tier-head,
.readonly-src .row { cursor: default; }

.cutoff { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.cutoff input { width: 56px; text-align: center; font-variant-numeric: tabular-nums; }

.chk { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); cursor: pointer; user-select: none; }
.chk input { accent-color: var(--btn-fill); }

.chip {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: var(--radius);
  border: 1px solid transparent; background: transparent;
  color: var(--ink-3); cursor: pointer;
  transition: background .12s, color .12s;
}
.chip:hover { background: var(--surface-2); color: var(--ink); }
.chip.on { background: var(--surface-3); }
.chip[data-pos="QB"].on { color: var(--pos-QB); }
.chip[data-pos="RB"].on { color: var(--pos-RB); }
.chip[data-pos="WR"].on { color: var(--pos-WR); }
.chip[data-pos="TE"].on { color: var(--pos-TE); }
.chip[data-pos="K"].on  { color: var(--pos-K); }
.chip[data-pos="DST"].on{ color: var(--pos-DST); }
.chip[data-tag].on { color: var(--accent-ink); }
.chip[data-tag="A"].on { background: var(--tag-A); }
.chip[data-tag="S"].on { background: var(--tag-S); }
.chip[data-tag="T"].on { background: var(--tag-T); }
.chip[data-tag="V"].on { background: var(--tag-V); }
.chip[data-tag="B"].on { background: var(--tag-B); }
.chip[data-tag="I"].on { background: var(--tag-I); }

/* ─────────────────────────────────────────── layout */

.layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 290px; min-height: 0; }
.board-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); }

/* ─────────────────────────────────────────── board */

.board-head, .row {
  display: grid;
  grid-template-columns:
    32px 28px 14px 20px minmax(140px, 1.7fr) 42px 44px 32px 74px minmax(80px, 2fr) 70px;
  align-items: center; gap: 7px; padding: 0 16px;
}
.board-head {
  height: 27px; flex: none;
  font-size: 11px; color: var(--ink-3);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.board-head .col-rank, .board-head .col-age, .board-head .col-delta { text-align: center; }
.board { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 28vh; }

.comparing .board-head, .comparing .row {
  grid-template-columns:
    32px 28px 14px 20px minmax(118px, 1.2fr) 42px 42px 30px 74px minmax(190px, 2.7fr) 70px;
}

/* tier header */
.tier-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px 0 0; height: 29px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 3;
  cursor: grab; user-select: none;
}
.tier-head:first-child { border-top: none; }
.tier-head:hover { background: var(--surface-3); }
.tier-head:active { cursor: grabbing; }
.tier-head.dragging { opacity: .4; }
.tier-head.drop-above { box-shadow: inset 0 2px 0 var(--focus); }
.tier-head.drop-below { box-shadow: inset 0 -2px 0 var(--focus); }
.tier-accent { width: 4px; align-self: stretch; flex: none; }

/* a SITE's own tiers: display-only — no grab cursor, no tools, muted accent */
.tier-head.site { cursor: default; }
.tier-head.site .tier-accent { background: var(--ink-3); opacity: .5; }
.tier-head.site .tier-name { color: var(--ink-2); font-style: italic; font-weight: 500; }
.tier-grip { color: var(--ink-3); opacity: 0; margin-left: 4px; }
.tier-head:hover .tier-grip { opacity: .5; }
.tier-name { font-size: 12px; font-weight: 600; }
.tier-meta { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tier-tools { margin-left: auto; display: flex; gap: 2px; opacity: 0; }
.tier-head:hover .tier-tools { opacity: 1; }
.tier-tools .btn { padding: 2px 7px; font-size: 11px; }

/* player row */
.row {
  height: var(--row-h);
  border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid transparent;
  position: relative;
}
.row:hover { background: var(--surface-2); }
.row.focused { background: color-mix(in srgb, var(--focus) 7%, transparent); }
.row[data-pos="QB"] { border-left-color: var(--pos-QB); }
.row[data-pos="RB"] { border-left-color: var(--pos-RB); }
.row[data-pos="WR"] { border-left-color: var(--pos-WR); }
.row[data-pos="TE"] { border-left-color: var(--pos-TE); }
.row[data-pos="K"]  { border-left-color: var(--pos-K); }
.row[data-pos="DST"]{ border-left-color: var(--pos-DST); }

.row.drafted { opacity: .36; }
.row.drafted .pname { text-decoration: line-through; text-decoration-thickness: 1px; }
.row.mine { opacity: 1; background: color-mix(in srgb, var(--ok) 9%, transparent); }
.row.mine .pname { text-decoration: none; }
.row.past-cutoff { opacity: .3; }
.row.dragging { opacity: .35; }
.row.drop-above { box-shadow: inset 0 2px 0 var(--focus); }
.row.drop-below { box-shadow: inset 0 -2px 0 var(--focus); }

.col-rank { font-size: 12px; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.row.mine .col-rank { color: var(--ok); font-weight: 600; }
.col-delta { font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.col-delta.up { color: var(--ok); }
.col-delta.down { color: var(--warn); }
.col-delta.new { opacity: .35; }

.col-drag { color: var(--ink-3); cursor: grab; opacity: 0; display: flex; justify-content: center; user-select: none; }
.row:hover .col-drag { opacity: .45; }
.col-drag:active { cursor: grabbing; }

.col-move { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mv {
  width: 20px; height: 12px; padding: 0;
  display: none; align-items: center; justify-content: center;
  border: none; border-radius: 3px; background: transparent;
  color: var(--ink-3); cursor: pointer;
}
.row:hover .mv, .row.focused .mv { display: flex; }
.mv:hover { background: var(--surface-3); color: var(--ink); }
.mv:disabled { opacity: .2; pointer-events: none; }

.col-player { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.pname { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prookie {
  /* Neutral ink stamp — rookie is a fact, and borrowing the TE amber made
     an R on a WR row read as a TE association. */
  font-size: 10px; font-weight: 700; letter-spacing: .03em; flex: none;
  color: var(--rookie-ink);
  background: var(--rookie-bg);
  border-radius: 2px; padding: 1px 3px;
}

.pos-pill {
  display: inline-block; min-width: 34px; text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 2px; border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.pos-pill[data-pos="QB"] { color: var(--pos-QB); background: color-mix(in srgb, var(--pos-QB) var(--tint), transparent); }
.pos-pill[data-pos="RB"] { color: var(--pos-RB); background: color-mix(in srgb, var(--pos-RB) var(--tint), transparent); }
.pos-pill[data-pos="WR"] { color: var(--pos-WR); background: color-mix(in srgb, var(--pos-WR) var(--tint), transparent); }
.pos-pill[data-pos="TE"] { color: var(--pos-TE); background: color-mix(in srgb, var(--pos-TE) var(--tint), transparent); }
.pos-pill[data-pos="K"]  { color: var(--pos-K);  background: color-mix(in srgb, var(--pos-K)  var(--tint), transparent); }
.pos-pill[data-pos="DST"]{ color: var(--pos-DST);background: color-mix(in srgb, var(--pos-DST) var(--tint), transparent); }

.col-team { font-size: 11px; color: var(--ink-2); }
.col-age { text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.col-age.age-warn { color: var(--warn); }
.col-age.age-young { color: var(--ok); }

.col-tag { display: flex; gap: 2px; }
.tagbtn {
  width: 19px; height: 18px; padding: 0;
  font: inherit; font-size: 10px; font-weight: 600;
  border-radius: 3px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-3);
  cursor: pointer; display: none;
  transition: background .1s, color .1s, border-color .1s;
}
.row:hover .tagbtn, .row.focused .tagbtn { display: block; }
.tagbtn:hover { color: var(--ink); border-color: var(--ink-3); }
.tagbtn.on { display: block; border-color: transparent; color: var(--accent-ink); }
.tagbtn[data-tag="A"].on { background: var(--tag-A); }
.tagbtn[data-tag="S"].on { background: var(--tag-S); }
.tagbtn[data-tag="T"].on { background: var(--tag-T); }
.tagbtn[data-tag="V"].on { background: var(--tag-V); }
.tagbtn[data-tag="B"].on { background: var(--tag-B); }
.tagbtn[data-tag="I"].on { background: var(--tag-I); }

.col-tail { min-width: 0; }
.col-note { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.col-note:hover { color: var(--ink-2); }
.col-note input { width: 100%; font-size: 12px; padding: 2px 6px; }

.cmp { display: flex; gap: 3px; }
.cmp-cell {
  flex: 1 1 0; min-width: 0; text-align: center;
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--ink-2); padding: 2px 0; border-radius: 3px; white-space: nowrap;
}
.cmp-cell.none { color: var(--ink-3); opacity: .35; }
.cmp-cell.hi { background: color-mix(in srgb, var(--ok) var(--tint), transparent); color: var(--ok); }
.cmp-cell.lo { background: color-mix(in srgb, var(--warn) var(--tint), transparent); color: var(--warn); }
.cmp-cell.me { background: var(--surface-3); color: var(--ink); font-weight: 600; }
.board-head .cmp-cell { font-size: 10px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.board-head .cmp-cell:hover { color: var(--ink); }
.board-head .cmp-cell.off { opacity: .3; text-decoration: line-through; }

.col-act { display: flex; gap: 3px; justify-content: flex-end; align-items: center; }
.col-act .btn { display: none; padding: 2px 7px; font-size: 11px; border: 1px solid var(--line); }
.row:hover .col-act .btn, .row.focused .col-act .btn { display: block; }
.row.drafted .col-act .btn.undo { display: block; }
.drafted-by { font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.cutoff-line {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px; position: sticky; top: 0; z-index: 2;
  font-size: 11px; color: var(--ink-3);
  background: var(--surface-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cutoff-line::after {
  content: ""; flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 8px);
}

.empty-state { padding: 56px 20px; text-align: center; color: var(--ink-3); }
.empty-state p { margin: 0 0 14px; }

/* ─────────────────────────────────────────── sidebar */

.side-pane {
  background: var(--surface);
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.side-tabs {
  display: flex; gap: 2px; flex: none;
  padding: 7px 14px 0;
  border-bottom: 1px solid var(--line);
}
.stab {
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 5px 11px 7px; border: none; background: transparent;
  color: var(--ink-3); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.stab:hover { color: var(--ink); }
.stab.active { color: var(--ink); border-bottom-color: var(--btn-fill); font-weight: 600; }

.side-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px 12px; }
.side-body[hidden] { display: none; }

.side-sec { margin-top: 9px; }
.side-sec:first-child { margin-top: 0; }
.side-sec h2 {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  margin-bottom: 7px; display: flex; align-items: baseline; gap: 6px;
}
.side-sec h2 .muted { font-size: 11px; }

/* collapsible sections — click the header, the chevron shows state */
.side-sec[data-sec] > h2 { cursor: pointer; user-select: none; }
.side-sec[data-sec] > h2:hover { color: var(--ink); }
.sec-chev { align-self: center; }
.sec-chev::before {
  content: ""; display: block;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform .12s;
}
.side-sec.collapsed .sec-chev::before { transform: rotate(-45deg); }
.side-sec.collapsed > :not(h2) { display: none; }
.side-sec.collapsed > h2 { margin-bottom: 0; }

.pick-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pick-now { display: flex; align-items: baseline; gap: 9px; }
.pick-now-label { font-size: 11px; color: var(--ink-3); }
.pick-now-value { display: flex; align-items: baseline; gap: 6px; }
.pick-now-value b { font-family: var(--serif); font-size: 25px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pick-now-value small { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pick-controls { display: flex; gap: 4px; }

.pick-list { display: flex; flex-wrap: wrap; gap: 2px; }
.pick-pill {
  font-size: 10px; padding: 1.5px 5px; border-radius: 3px;
  background: var(--surface-2); color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.pick-pill.next { background: var(--btn-fill); color: var(--btn-ink); font-weight: 600; }
.pick-pill.gone { opacity: .28; text-decoration: line-through; }

/* two columns so ten starting slots never force a scroll */
.lineup { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.lineup .sug-none { grid-column: 1 / -1; }
.slot {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 28px;
  align-items: center; gap: 6px;
  height: 22px; font-size: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.slot:nth-last-child(-n+2) { border-bottom: none; }
.slot-label { font-size: 10px; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }
.slot-player { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot.vacant .slot-player { color: var(--ink-3); }
.slot-pos { font-size: 10px; font-weight: 700; text-align: center; border-radius: 2px; padding: 1px 0; }
.slot-pos[data-pos="QB"] { color: var(--pos-QB); background: color-mix(in srgb, var(--pos-QB) var(--tint), transparent); }
.slot-pos[data-pos="RB"] { color: var(--pos-RB); background: color-mix(in srgb, var(--pos-RB) var(--tint), transparent); }
.slot-pos[data-pos="WR"] { color: var(--pos-WR); background: color-mix(in srgb, var(--pos-WR) var(--tint), transparent); }
.slot-pos[data-pos="TE"] { color: var(--pos-TE); background: color-mix(in srgb, var(--pos-TE) var(--tint), transparent); }
.slot-pos[data-pos="K"]  { color: var(--pos-K);  background: color-mix(in srgb, var(--pos-K)  var(--tint), transparent); }
.slot-pos[data-pos="DST"]{ color: var(--pos-DST);background: color-mix(in srgb, var(--pos-DST) var(--tint), transparent); }

.bench { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; }
.bench:empty { display: none; }
.bench-chip {
  font-size: 11px; padding: 2px 7px; border-radius: 3px;
  background: var(--surface-2); border-left: 2px solid var(--line);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.bench-chip[data-pos="QB"] { border-left-color: var(--pos-QB); }
.bench-chip[data-pos="RB"] { border-left-color: var(--pos-RB); }
.bench-chip[data-pos="WR"] { border-left-color: var(--pos-WR); }
.bench-chip[data-pos="TE"] { border-left-color: var(--pos-TE); }
.bench-chip[data-pos="K"]  { border-left-color: var(--pos-K); }
.bench-chip[data-pos="DST"]{ border-left-color: var(--pos-DST); }

.runs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.run-cell { display: flex; flex-direction: column; gap: 4px; }
.run-top { display: flex; align-items: baseline; justify-content: space-between; }
.run-label { font-size: 10px; font-weight: 700; }
.run-label[data-pos="QB"] { color: var(--pos-QB); }
.run-label[data-pos="RB"] { color: var(--pos-RB); }
.run-label[data-pos="WR"] { color: var(--pos-WR); }
.run-label[data-pos="TE"] { color: var(--pos-TE); }
.run-track { height: 3px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.run-fill { height: 100%; border-radius: 2px; transition: width .2s; }
.run-n { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 600; }

.scarcity { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; }
.scarce-item { font-size: 12px; line-height: 1.45; color: var(--ink-2); padding-left: 9px; border-left: 2px solid var(--warn); }
.scarce-item b { color: var(--ink); font-weight: 600; }
.scarce-item.calm { border-left-color: var(--line); color: var(--ink-3); }

.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.legend li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; }
.legend .lkey { width: 18px; height: 17px; border-radius: 3px; font-size: 10px; font-weight: 600; color: var(--accent-ink); display: grid; place-items: center; }
.legend .ltext { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.legend .ltext b { color: var(--ink); display: block; font-size: 12px; font-weight: 600; }
.legend-wide { margin: 14px 0; }

.intel-tabs { display: flex; gap: 2px; margin-bottom: 9px; }
.itab { font: inherit; font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: var(--radius); border: none; background: transparent; color: var(--ink-3); cursor: pointer; }
.itab:hover { color: var(--ink); }
.itab.active { background: var(--surface-3); color: var(--ink); }
/* pick suggestions */
.suggest { display: flex; flex-direction: column; gap: 3px; }
/* Two rows: identity on top, reason underneath. A 290px sidebar cannot fit
   name + position + odds + reason + button on one line without truncating
   the part that actually explains the pick. */
.sug {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) 30px 34px;
  grid-template-areas:
    "rank name pos surv"
    "why  why  why why";
  align-items: center; gap: 0 6px;
  padding: 3px 8px 4px; border-radius: var(--radius);
  border: 1px solid var(--line-soft); cursor: pointer;
  position: relative;
}
.sug:hover { background: var(--surface-2); border-color: var(--line); }
.sug.best { border-color: var(--line); background: var(--surface-2); }

.sug-rank { grid-area: rank; font-size: 11px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.sug-name {
  grid-area: name; min-width: 0;
  font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sug .pos-pill { grid-area: pos; min-width: 0; width: 100%; }
.sug .surv { grid-area: surv; }
.sug-why {
  grid-area: why; padding-left: 21px;
  font-size: 10px; color: var(--ink-3); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sug-why:empty { display: none; }
/* Floats over the row on hover so it never steals width from the content. */
.sug-take {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  padding: 2px 9px; font-size: 11px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-3); color: var(--ink);
  display: none; box-shadow: 0 0 10px 6px var(--surface-2);
}
.sug:hover .sug-take { display: block; }
.sug-none { font-size: 12px; color: var(--ink-3); }
.sug-none b { color: var(--ink-2); }

/* pager — three at a time keeps the panel glanceable; arrows go deeper */
.sug-pager {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line-soft);
  font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.sug-pager .btn { padding: 1px 6px; min-width: 22px; color: var(--ink-3); }
.sug-pager .btn:hover:not(:disabled) { color: var(--ink); }

/* survival chip — will they make it back to your pick? */
.surv {
  font-size: 10px; font-weight: 700; text-align: center;
  padding: 2px 0; border-radius: 3px; font-variant-numeric: tabular-nums;
}
.surv.safe  { color: var(--ok); background: color-mix(in srgb, var(--ok) var(--tint), transparent); }
.surv.risky { color: var(--warn); background: color-mix(in srgb, var(--warn) var(--tint), transparent); }
.surv.gone  { color: var(--tag-B); background: color-mix(in srgb, var(--tag-B) var(--tint), transparent); }
.surv.none  { color: var(--ink-3); opacity: .4; }

/* queue — same two-row shell as suggestions, tools float over it on hover */
.qrow .q-tools {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: none; gap: 2px;
  background: var(--surface-3); border-radius: var(--radius);
  padding: 2px; box-shadow: 0 0 10px 6px var(--surface-2);
}
.qrow:hover .q-tools { display: flex; }
.q-tools .btn { padding: 1px 6px; font-size: 11px; border: 1px solid var(--line); }
.qrow.qgone { opacity: .45; }
.qrow.qgone .sug-name { text-decoration: line-through; }

/* pick log */
.log { display: flex; flex-direction: column; }
.log-row {
  display: grid; grid-template-columns: 34px 44px minmax(0, 1fr) auto;
  align-items: center; gap: 7px;
  padding: 3px 2px; font-size: 12px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.log-row:last-child { border-bottom: none; }
.log-row:hover { background: var(--surface-2); }
.log-row.arming { background: color-mix(in srgb, var(--focus) 10%, transparent); }
.log-pick { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.log-round { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.log-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-name.log-mine { color: var(--ok); font-weight: 600; }
.log-row .q-tools { display: none; }
.log-row:hover .q-tools { display: flex; }

/* league rosters */
.league { display: flex; flex-direction: column; }
.lg-row {
  display: grid; grid-template-columns: 34px repeat(4, 1fr);
  align-items: center; gap: 4px;
  padding: 2px 4px; font-size: 11px;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 3px;
}
.lg-row.lg-head { border-bottom: 1px solid var(--line); }
.lg-row.lg-me { background: color-mix(in srgb, var(--ok) 8%, transparent); font-weight: 600; }
.lg-row.lg-soon { background: var(--surface-2); }
.lg-slot { font-size: 10px; font-weight: 600; color: var(--ink-3); }
.lg-me .lg-slot { color: var(--ok); }
.lg-n { text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.lg-n.lg-h { font-size: 10px; font-weight: 700; }
.lg-h[data-pos="QB"] { color: var(--pos-QB); }
.lg-h[data-pos="RB"] { color: var(--pos-RB); }
.lg-h[data-pos="WR"] { color: var(--pos-WR); }
.lg-h[data-pos="TE"] { color: var(--pos-TE); }
.lg-n.lg-needy { color: var(--tag-B); font-weight: 700; }
.league .scarce-item { margin-top: 8px; }

/* roster plan + build window */
.plan-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.plan-pills:empty { display: none; }
.plan-pill {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) var(--tint), transparent);
}
.plan-pill.bad { color: var(--tag-B); background: color-mix(in srgb, var(--tag-B) var(--tint), transparent); }

.win-meter { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.win-meter:empty { display: none; }
.wm-bar { flex: 1; height: 5px; border-radius: 3px; overflow: hidden; display: flex; }
.wm-bar span { height: 100%; }
.wm-y { background: var(--ok); }
.wm-p { background: var(--ink-3); }
.wm-d { background: var(--warn); }
.wm-label { font-size: 11px; color: var(--ink-2); white-space: nowrap; }

/* on-the-clock posture */
.pick-strip { border: 1px solid transparent; border-radius: var(--radius); padding: 2px 4px; margin: -2px -4px; }
.pick-strip.your-turn {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  animation: clockpulse 1.6s ease-in-out infinite;
}
.pick-strip.your-turn .pick-now-label { color: var(--ok); font-weight: 700; }
@keyframes clockpulse {
  50% { background: color-mix(in srgb, var(--ok) 16%, transparent); }
}

/* the wait line — players below probably survive to your pick */
.return-line {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 16px;
  font-size: 11px; color: var(--ok);
  background: color-mix(in srgb, var(--ok) 6%, transparent);
  border-top: 1px dashed color-mix(in srgb, var(--ok) 45%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--ok) 45%, transparent);
}

/* trending heat */
.hot { color: var(--tag-B); font-size: 10px; font-weight: 700; flex: none; cursor: help; }

/* live sync */
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); margin-left: 2px;
}
.live-dot.on { background: var(--ok); animation: livepulse 2s ease-in-out infinite; }
.live-dot.err { background: var(--tag-B); }
@keyframes livepulse { 50% { opacity: .35; } }

.live-find { display: flex; gap: 6px; margin: 12px 0 10px; }
.live-find input { flex: 1; font-size: 13px; }

.live-drafts { display: flex; flex-direction: column; gap: 5px; }
.live-drafts:empty { display: none; }
.live-draft-row {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 10px;
  align-items: center; text-align: left; width: 100%;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  cursor: pointer; font: inherit; font-size: 13px;
  transition: border-color .12s, background .12s;
}
.live-draft-row:hover { background: var(--surface-2); border-color: var(--focus); }
.live-draft-row.connecting { opacity: .5; pointer-events: none; }
.ld-name { font-weight: 600; }
.ld-meta { grid-column: 1 / -1; font-size: 11px; color: var(--ink-3); }
.live-draft-row .pill {
  font-size: 10px; padding: 2px 8px; border-radius: 3px;
  background: var(--surface-3); color: var(--ink-3);
}
.live-draft-row .pill.good {
  background: color-mix(in srgb, var(--ok) var(--tint), transparent); color: var(--ok);
}
.live-draft-row .pill.muted { opacity: .6; }

.live-diag {
  font-size: 12px; line-height: 1.55; color: var(--ink-2);
  margin: 12px 0; padding: 10px 12px;
  background: var(--surface-2); border-left: 2px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.live-diag b { color: var(--ink); }

#btnLiveSync.spinning svg { animation: spin .5s linear; }
@keyframes spin { to { transform: rotate(360deg); } }

.status-live { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.status-live:empty { display: none; }
/* "not saved" must not read like the quiet Saved-at timestamp it replaces */
#statusSaved.save-bad { color: var(--danger); font-weight: 600; }

/* account chip: initials when signed in, so it is obvious whose boards these are */
#btnAccount.acct-on {
  background: var(--surface-3); color: var(--ink-2);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; border-radius: 50%;
  width: 26px; height: 26px; min-width: 26px; padding: 0;
}
#btnAccount.acct-on:hover { color: var(--ink); }

.branch-name { grid-column: 2; margin-top: 6px; width: 100%; }

/* the star marks the order you will draft from */
#btnStarOrder svg { fill: none; }
#btnStarOrder.starred { color: var(--tag-I); }
#btnStarOrder.starred svg { fill: currentColor; }

.live-msg { font-size: 12px; margin: 10px 0 0; color: var(--ink-3); min-height: 16px; }
.live-msg.ok { color: var(--ok); }
.live-msg.err { color: var(--danger); }
.live-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }

/* rookie filter chip */
.chip-rookie { font-weight: 700; }
.chip-rookie.on {
  background: var(--rookie-bg);
  color: var(--rookie-ink);
  border-color: var(--ink-3);
}

/* statusbar update offer */
.update-link {
  font-size: 11px; color: var(--focus);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.update-link[hidden] { display: none; }

.intel-body ul { margin: 0; padding-left: 14px; }
.intel-body li { font-size: 12px; color: var(--ink-2); margin-bottom: 8px; line-height: 1.5; }
.intel-title { display: block; color: var(--ink); font-size: 12px; font-weight: 600; }

/* ─────────────────────────────────────────── status bar */

.statusbar {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 0 18px; height: 27px;
  background: var(--surface); border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-3);
}
.statusbar .pcount { font-variant-numeric: tabular-nums; }
.statusbar .pcount b { color: var(--ink-2); font-weight: 600; }
.sdot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* ─────────────────────────────────────────── modals */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; padding: 24px;
  /* Paper over paper dims what's below — it doesn't frost it. A deeper scrim
     replaces the blur (which was also a repaint on every modal open). */
  background: color-mix(in srgb, var(--paper) 40%, rgba(0, 0, 0, .55));
  display: grid; place-items: center;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  width: min(540px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px 24px;
}
.modal.narrow { width: min(400px, 100%); }
.modal[hidden] { display: none; }
.modal h3 { font-family: var(--serif); font-size: 17px; letter-spacing: -.01em; }
.modal h4 { font-size: 12px; margin: 18px 0 2px; color: var(--ink-2); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 14px 0; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-3); }
.form-grid label.span2 { grid-column: 1 / -1; }
.form-grid label.chk-row {
  flex-direction: row; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-2); cursor: pointer;
}
.form-grid label.chk-row input { accent-color: var(--btn-fill); }
.form-grid input[readonly] { opacity: .55; cursor: not-allowed; }

.radio-set { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.radio-set label {
  display: grid; grid-template-columns: 15px 1fr; gap: 2px 11px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.radio-set label:hover { background: var(--surface-2); }
.radio-set label:has(input:checked) { border-color: var(--focus); background: color-mix(in srgb, var(--focus) 5%, transparent); }
.radio-set input { accent-color: var(--btn-fill); grid-row: span 2; align-self: center; }
.radio-set b { font-size: 13px; font-weight: 600; }
.radio-set small { font-size: 12px; color: var(--ink-3); line-height: 1.45; }

.modal-actions { display: flex; gap: 8px; margin-top: 20px; align-items: center; }

.slot-editor { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; }
.slot-edit-row { display: grid; grid-template-columns: 1fr 70px 28px; gap: 8px; align-items: center; }
.slot-edit-row select { width: 100%; }

.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 24px; height: 24px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; }
.swatch.on { border-color: var(--ink); }

.import-preview {
  max-height: 170px; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 12px; padding: 11px; color: var(--ink-2);
  background: var(--surface-2); line-height: 1.6;
}
.import-preview:empty { display: none; }
.import-preview .warn { color: var(--warn); }
.import-preview .good { color: var(--ok); }

.src-meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; }
.src-meta .pill { font-size: 11px; padding: 3px 9px; border-radius: 3px; background: var(--surface-2); color: var(--ink-2); }
.src-meta .pill.warn { background: color-mix(in srgb, var(--warn) var(--tint), transparent); color: var(--warn); }
.src-meta .pill.good { background: color-mix(in srgb, var(--ok) var(--tint), transparent); color: var(--ok); }
.src-detail {
  font-size: 12px; line-height: 1.6; color: var(--ink-2);
  padding: 0 0 0 13px; margin: 0; border-left: 2px solid var(--line);
  white-space: pre-wrap;
}
.src-table { display: flex; flex-direction: column; margin-top: 6px; }
.src-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 2px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--line-soft);
}
.src-row:last-child { border-bottom: none; }
.src-row.active { font-weight: 600; }
.src-row .n { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.src-row .kind { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; }
.src-row .kind.dyn { background: color-mix(in srgb, var(--ok) var(--tint), transparent); color: var(--ok); }
.src-row .kind.red { background: color-mix(in srgb, var(--warn) var(--tint), transparent); color: var(--warn); }

.vsec { margin-top: 16px; }
.vsec h4 { margin: 0 0 6px; font-size: 12px; color: var(--ink-2); }
.vlist { /* scrolls with the modal, not inside it */ }
.vrow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding: 5px 0; font-size: 12px; border-bottom: 1px solid var(--line-soft); }
.vrow:last-child { border-bottom: none; }
.vname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vchange { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vchange s { color: var(--ink-3); }
.vchange b { font-weight: 600; color: var(--ink); }

.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 14px 0; }
.keys > div { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ink-2); }
.keys span { margin-left: 5px; }
kbd { font-family: var(--mono); font-size: 11px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; padding: 2px 5px; color: var(--ink); }

/* ─────────────────────────────────────────── toast */

.toast {
  position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
  background: var(--btn-fill); color: var(--btn-ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 9px 15px; font-size: 13px; z-index: 200; animation: rise .16s ease-out;
}
.toast[hidden] { display: none; }
.toast .undo-link { margin-left: 12px; cursor: pointer; font-weight: 600; text-decoration: underline; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ─────────────────────────────────────────── scrollbars */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
/* Firefox equivalent — the board and sidebar scroll permanently. */
.board, .side-body, .modal { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* player card */
.card-actions { display: flex; gap: 6px; margin: 12px 0 4px; flex-wrap: wrap; }
.card-tags { display: flex; gap: 4px; }
.card-tags .tagbtn { display: block; width: 26px; height: 24px; font-size: 11px; }
.card-note {
  width: 100%; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 10px; resize: vertical;
}
.card-note:focus { outline: none; border-color: var(--focus); }
.pname { cursor: pointer; }
.pname:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ink-3); }

/* draft mode: prep tools tuck away, the pick strip carries the accent */
#btnDraftMode.on { background: var(--ok); border-color: var(--ok); color: var(--accent-ink); }
/* Compare stays available — checking a run against the other sites' ranks is
   a draft-day question, not a prep-only one. */
body.draft-mode #btnVerify, body.draft-mode #btnImport, body.draft-mode #btnExport,
body.draft-mode #btnPrint, body.draft-mode .board-picker,
body.draft-mode .cutoff, body.draft-mode #btnCutoffMode,
body.draft-mode #btnAddPlayer,
body.draft-mode #btnRenameBoard { display: none !important; }
body.draft-mode .topbar { border-bottom: none; }

/* the ticker bar IS draft mode: pick clock, the room's last picks, best move */
.draft-bar {
  display: flex; align-items: center; gap: 20px;
  padding: 8px 18px; flex: none;
  background: color-mix(in srgb, var(--ok) 7%, var(--surface));
  border-bottom: 2px solid color-mix(in srgb, var(--ok) 50%, var(--line));
}
.draft-bar[hidden] { display: none; }
.db-clock { display: flex; align-items: baseline; gap: 9px; flex: none; }
.db-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--ink-2); }
.db-num {
  font-family: var(--serif); font-size: 30px; font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1;
}
.db-round { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.draft-bar.on-clock { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); animation: clockpulse 1.6s ease-in-out infinite; }
.draft-bar.on-clock .db-label, .draft-bar.on-clock .db-num { color: var(--ok); }

.db-last { flex: 1; min-width: 0; display: flex; gap: 6px; overflow: hidden; }
.db-pick {
  font-size: 11px; white-space: nowrap; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 3px 10px;
  font-variant-numeric: tabular-nums;
}
.db-pick b { color: var(--ink); font-weight: 600; }
.db-pick.mine { border-color: var(--ok); color: var(--ok); }

.db-sug { display: flex; align-items: center; gap: 8px; flex: none; }
.db-sug .db-best { font-size: 13px; }
.db-sug .db-best b { font-weight: 600; }
.db-sug .btn { border: 1px solid var(--ok); color: var(--ok); font-weight: 600; }
.db-sug .btn:hover { background: var(--ok); color: var(--accent-ink); }

@media (max-width: 700px) {
  .db-last { display: none; }
}

.draft-tools { margin-top: 8px; }
#btnBell.on { color: var(--tag-I); }
#btnMock.on { background: var(--tag-I); border-color: var(--tag-I); color: var(--accent-ink); }

.alias-input { width: 150px; font-size: 12px; padding: 3px 7px; }

.pos-toggles { display: flex; gap: 6px; margin-top: 6px; }
.pos-toggle {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; text-transform: none; letter-spacing: 0;
}
.pos-toggle input { accent-color: var(--btn-fill); }
.pos-toggle.locked { opacity: .55; cursor: default; }

/* ─────────────────────────────────────────── responsive */

@media (max-width: 1080px) {
  .layout { grid-template-columns: 1fr; }
  .side-pane { border-top: 1px solid var(--line); max-height: 42vh; }
  .board-head, .row { grid-template-columns: 30px 26px 0 20px minmax(118px,1.7fr) 40px 42px 30px 74px 0 66px; }
  .col-tail, .col-drag { display: none; }
  .comparing .board-head, .comparing .row { grid-template-columns: 30px 0 0 20px minmax(96px,1.2fr) 38px 0 0 0 minmax(150px,2fr) 0; }
  .comparing .col-tail { display: block; }
  .source-group { border-right: none; }
}

/* phone: a second-screen draft companion. No hover exists, so everything a
   fingertip needs is either always visible or one tap away (the player card). */
@media (max-width: 700px) {
  body { font-size: 14px; }
  .topbar { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .topbar-actions { flex-wrap: wrap; margin-left: 0; }
  .brand p { display: none; }
  .toolbar { padding: 6px 12px; gap: 8px; }
  #rankSource { max-width: 150px; }

  :root { --row-h: 44px; }
  .board-head, .row {
    grid-template-columns: 26px 0 0 0 minmax(0, 1fr) 44px 0 30px 0 0 84px;
    gap: 6px; padding: 0 10px;
  }
  .col-delta, .col-drag, .col-move, .col-team, .col-tag, .col-tail { display: none; }
  .pname { font-size: 14px; }
  .pos-pill { min-width: 40px; font-size: 11px; padding: 4px 2px; }
  /* touch has no hover: draft buttons are always on the row */
  .col-act .btn { display: block; padding: 6px 10px; font-size: 13px; }
  .row.drafted .col-act .drafted-by { font-size: 11px; }

  .tier-head { height: 34px; }
  .side-pane { max-height: 55vh; }
  .side-body { padding: 10px 12px; }
  .sug { padding: 8px 10px; }
  .sug-name { font-size: 14px; }
  .sug-take { display: block; position: static; transform: none; grid-area: surv; margin-top: 4px; }
  .sug .surv { display: none; }
  .slot { height: 28px; font-size: 13px; }
  .pick-controls .btn { padding: 8px 12px; }
  .lineup { grid-template-columns: 1fr; }

  .modal { padding: 16px; max-height: 92vh; }
  .keys { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════ printable cheat sheet
   The screen UI is far too sparse to print. This is a separate, purpose-built
   document: three dense columns, tier rules, tags as letters. */

.print-sheet { display: none; }

@media print {
  @page { margin: 10mm 9mm; size: portrait; }

  html, body {
    height: auto; overflow: visible;
    background: #fff; color: #000;
    display: block; font-size: 8.4pt;
  }
  .topbar, .toolbar, .layout, .statusbar, .modal-backdrop, .toast { display: none !important; }

  .print-sheet { display: block; }

  .ps-head {
    display: flex; align-items: baseline; gap: 10px;
    border-bottom: 1.5pt solid #000; padding-bottom: 4pt; margin-bottom: 7pt;
  }
  .ps-head h1 { font-family: var(--serif); font-size: 15pt; letter-spacing: -.01em; }
  .ps-head .ps-sub { font-size: 8pt; color: #444; }
  .ps-head .ps-key { margin-left: auto; font-size: 7.4pt; color: #333; }
  .ps-head .ps-key b { font-weight: 700; }

  .ps-cols { column-count: 3; column-gap: 7mm; column-rule: .5pt solid #ccc; }

  .ps-tier {
    break-inside: avoid; break-after: avoid;
    font-size: 7.6pt; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: 3pt 0 1.5pt; margin-top: 4pt;
    border-bottom: .75pt solid #000;
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .ps-tier:first-child { margin-top: 0; }
  .ps-tier span { font-weight: 400; color: #666; letter-spacing: 0; text-transform: none; }

  .ps-row {
    break-inside: avoid;
    display: grid; grid-template-columns: 13pt 1fr 15pt 17pt 11pt 9pt;
    gap: 3pt; align-items: baseline;
    padding: 1.1pt 0; border-bottom: .25pt solid #e6e6e6;
    font-size: 8.2pt; line-height: 1.25;
  }
  .ps-rank { text-align: right; color: #777; font-variant-numeric: tabular-nums; }
  .ps-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ps-name .r { font-size: 6.4pt; font-weight: 700; color: #b06a10; margin-left: 2pt; }
  .ps-pos { font-weight: 700; font-size: 7.2pt; }
  .ps-pos.QB { color: #a8203c; } .ps-pos.RB { color: #16694a; }
  .ps-pos.WR { color: #1c47a0; } .ps-pos.TE { color: #8d5410; }
  .ps-pos.K  { color: #573f85; } .ps-pos.DST{ color: #555; }
  .ps-team { color: #444; font-size: 7.4pt; }
  .ps-age { text-align: right; color: #666; font-variant-numeric: tabular-nums; font-size: 7.4pt; }
  .ps-tag {
    text-align: center; font-weight: 700; font-size: 7pt;
    border: .5pt solid #000; border-radius: 1.5pt;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .ps-tag:empty { border: none; }
  .ps-row.is-mine { background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ps-row.is-drafted { color: #aaa; text-decoration: line-through; }

  .ps-foot { margin-top: 6pt; padding-top: 3pt; border-top: .5pt solid #999; font-size: 7pt; color: #555; }
}