/* RTS Tracker: "Box Score" theme, matching the Ottoneu tracker (2026-09-04).
   The sports page: cool white paper, pine-green accent, hairline rows, my row lit
   in scoreboard amber, condensed Barlow headings, squarer corners, no shadows.
   ALL color flows from these tokens; light is the :root default, explicit
   [data-theme] blocks win over the OS media-query fallback in both directions. */
:root, :root[data-theme="light"] {
  --bg: #f4f5f1; --surface: #ffffff; --surface2: #eef1ea; --line: #d7ddd3; --rowline: #e6eae3;
  --ink: #15251d; --mut: #5d6b62;
  --accent: #1f5d43; --accent-ink: #ffffff; --accent2: #1f7a55;
  --teal: #1f7a55; --grape: #35507a; --danger: #b9382a; --gold: #b8730a; --chip-ink: #15251d;
  --accent-tint: #e3f0e8; --good-tint: #e3f0e8; --bad-tint: #f7e4e0; --warn-tint: #fbefd7; --grape-tint: #e5ebf4;
  --banner: #1f5d43; --banner-ink: #ffffff; --th-bg: #1f5d43; --th-ink: #d9ebe1; --me: #fff2d2;
  --shadow: none; --glass: rgba(244, 245, 241, .88); --rad: 8px;
  --font: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --head: "Barlow Semi Condensed", "Arial Narrow", "Barlow", "Segoe UI", sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0e1613; --surface: #151f1a; --surface2: #1c2822; --line: #27382f; --rowline: #223229;
  --ink: #e8efe9; --mut: #98aa9f;
  --accent: #56cf95; --accent-ink: #0b1a12; --accent2: #56cf95;
  --teal: #56cf95; --grape: #8fb0e8; --danger: #ff7b6e; --gold: #efb54a; --chip-ink: #ffffff;
  --accent-tint: #163127; --good-tint: #163127; --bad-tint: #3a221f; --warn-tint: #33291a; --grape-tint: #1f2a3a;
  --banner: #143f2e; --banner-ink: #ffffff; --th-bg: #1e3a2c; --th-ink: #bfe4d0; --me: #2b3121;
  --shadow: none; --glass: rgba(14, 22, 19, .88);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1613; --surface: #151f1a; --surface2: #1c2822; --line: #27382f; --rowline: #223229;
    --ink: #e8efe9; --mut: #98aa9f; --accent: #56cf95; --accent-ink: #0b1a12; --accent2: #56cf95;
    --teal: #56cf95; --grape: #8fb0e8; --danger: #ff7b6e; --gold: #efb54a; --chip-ink: #ffffff;
    --accent-tint: #163127; --good-tint: #163127; --bad-tint: #3a221f; --warn-tint: #33291a; --grape-tint: #1f2a3a;
    --banner: #143f2e; --banner-ink: #ffffff; --th-bg: #1e3a2c; --th-ink: #bfe4d0; --me: #2b3121;
    --glass: rgba(14, 22, 19, .88); color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font);
  font-variant-numeric: tabular-nums; overflow: hidden; -webkit-font-smoothing: antialiased;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
[hidden] { display: none !important; }
a { color: var(--accent2); font-weight: 600; }
button { font: inherit; }

/* ---------- app frame: banner + tab bar fixed, scrolling middle ---------- */
#app { display: grid; grid-template-rows: 1fr auto; height: 100dvh; max-height: 100dvh; position: relative; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.seg button { border: 0; background: transparent; color: var(--mut); padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--head); letter-spacing: .04em; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
main { overflow: auto; -webkit-overflow-scrolling: touch; padding: calc(12px + env(safe-area-inset-top)) 12px 12px; overscroll-behavior: contain; }
nav.tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--glass); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
nav.tabs button { border: 0; background: transparent; color: var(--mut); font-family: var(--head); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 4px 2px; border-radius: 999px; cursor: pointer; display: grid; justify-items: center; gap: 2px; }
nav.tabs button .ic { font-size: 19px; line-height: 1; }
nav.tabs button.on { color: var(--accent-ink); background: var(--accent); }
@media (max-width: 560px) {
  .seg button { padding: 4px 7px; }
  h1.page { font-size: 20px; }
  .stat { min-width: 84px; padding: 8px 10px; }
  .stat b { font-size: 18px; }
  main { padding: calc(10px + env(safe-area-inset-top)) 10px 10px; }
  nav.tabs button { font-size: 10px; }
  nav.tabs button.on { background: transparent; color: var(--accent); }
}
@media (min-width: 900px) {
  #app { grid-template-rows: 1fr; grid-template-columns: 200px 1fr; }
  nav.tabs { grid-row: 1; grid-column: 1; grid-auto-flow: row; grid-auto-columns: auto; align-content: start; border-top: 0; border-right: 1px solid var(--line); padding: 12px 8px; gap: 4px; background: var(--surface); }
  nav.tabs button { grid-template-columns: 28px 1fr; justify-items: start; align-items: center; font-size: 13.5px; padding: 8px 12px; }
  main { grid-row: 1; grid-column: 2; padding: calc(18px + env(safe-area-inset-top)) 22px 18px; }
}

/* ---------- views ---------- */
.view { display: none; }
.view.on { display: block; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad); box-shadow: var(--shadow); padding: 14px; min-width: 0; }
.card h2 { margin: 0 0 8px; font-family: var(--head); font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.card h2 .ic { font-size: 17px; }
.card h2 .right { margin-left: auto; font-family: var(--font); font-weight: 600; font-size: 12px; color: var(--mut); text-transform: none; letter-spacing: 0; }
.card.tall { max-height: calc(100dvh - 190px); overflow: auto; }
.mut { color: var(--mut); }
.small { font-size: 12.5px; }
.tiny { font-size: 11.5px; }
h1.page { font-family: var(--head); font-size: 24px; margin: 2px 0 10px; letter-spacing: .02em; text-transform: uppercase; font-weight: 800; }
h1.page .small, h1.page .mut { font-family: var(--font); text-transform: none; letter-spacing: 0; font-weight: 500; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stat { display: grid; gap: 2px; padding: 10px 12px; background: var(--surface2); border: 1px solid var(--line); border-radius: var(--rad); min-width: 96px; border-left: 5px solid var(--accent); }
.stat b { font-family: var(--head); font-size: 22px; font-weight: 800; }
.stat span { font-size: 10.5px; color: var(--mut); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.hero { background: linear-gradient(180deg, var(--accent-tint), var(--surface)); }
.callout { border-left: 5px solid var(--accent); padding: 8px 12px; background: var(--accent-tint); border-radius: var(--rad); }
.callout.teal { border-color: var(--teal); background: var(--good-tint); }
.callout.danger { border-color: var(--danger); background: var(--bad-tint); }
.prose p { margin: 0 0 8px; }

/* ---------- collapse-by-default: long text on a card is capped and tap-to-expand
   (measured by initClamps, not guessed from character count) ---------- */
.clampable { position: relative; overflow: hidden; max-height: var(--clamp-h, 110px); }
.clampable.open { max-height: none; }
.clampable:not(.open)::after { content: ""; position: absolute; inset: auto 0 0 0; height: 26px; background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; }
.clamp-toggle { display: block; margin: 4px 0 0; }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-family: var(--head); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--chip-ink); background: color-mix(in srgb, var(--hue, var(--mut)) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--hue, var(--mut)) 30%, var(--surface)); white-space: nowrap; }
.pos-QB { --hue: var(--grape); } .pos-RB { --hue: var(--accent2); } .pos-WR { --hue: var(--gold); } .pos-TE { --hue: #7a4f9e; } .pos-K { --hue: var(--mut); } .pos-DEF { --hue: var(--danger); }
.chip.keep { --hue: var(--teal); } .chip.toss { --hue: var(--gold); } .chip.cut { --hue: var(--danger); } .chip.inel { --hue: var(--mut); }
.chip.gone-likely { --hue: var(--danger); } .chip.gone-maybe { --hue: var(--gold); } .chip.gone-safe { --hue: var(--teal); }
.chip.inj { --hue: var(--danger); }

/* ---------- buttons ---------- */
.btn { border: 1px solid transparent; border-radius: 999px; padding: 9px 15px; font-family: var(--head); font-weight: 700; font-size: 14px; letter-spacing: .03em; cursor: pointer; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; gap: 6px; }
.btn.sec { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.teal { background: var(--accent2); color: #fff; }
.btn.grape { background: var(--grape); color: #fff; }
.btn.sm { padding: 5px 11px; font-size: 12.5px; }
.btn.xs { padding: 3px 8px; font-size: 11px; }
.btn:disabled { opacity: .55; cursor: wait; }
.btn.danger { background: var(--danger); color: #fff; }
.icon-btn { border: 1px solid var(--line); background: var(--surface); color: var(--mut); border-radius: 4px; padding: 2px 6px; font-size: 11px; cursor: pointer; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.icon-btn:hover { color: var(--accent); }

/* ---------- tables: pine header bar, hairline rows, my row in amber ---------- */
.tbl-wrap { overflow: auto; max-width: 100%; border-radius: var(--rad); border: 1px solid var(--line); }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); }
table.t th, table.t td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--rowline); white-space: nowrap; vertical-align: middle; }
table.t th { font-family: var(--head); color: var(--th-ink); background: var(--th-bg); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; position: sticky; top: 0; z-index: 1; cursor: pointer; border-bottom: 0; }
table.t td.num, table.t th.num { text-align: right; }
table.t tbody tr:hover td { background: var(--surface2); }
table.t tr.me td { background: var(--me); }
table.t tr.dim td { opacity: .5; }
table.t tr.sel td { background: var(--good-tint); }
table.t td.name { white-space: normal; min-width: 150px; font-weight: 700; }
table.t td.wrap { white-space: normal; }
.avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--surface2); vertical-align: middle; margin-right: 6px; }
.avatar.sm { width: 24px; height: 24px; }

/* ---------- forms ---------- */
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad); padding: 8px 10px; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
textarea { width: 100%; min-height: 80px; resize: vertical; }
label.f { display: grid; gap: 4px; font-size: 11px; font-weight: 700; color: var(--mut); text-transform: uppercase; letter-spacing: .05em; font-family: var(--head); }
.drop { border: 2px dashed var(--line); border-radius: var(--rad); padding: 16px; text-align: center; color: var(--mut); cursor: pointer; }
.drop.over { border-color: var(--accent); background: var(--accent-tint); }
details { border: 1px solid var(--line); border-radius: var(--rad); padding: 8px 12px; background: var(--surface); }
details + details { margin-top: 8px; }
summary { cursor: pointer; font-family: var(--head); font-weight: 800; font-size: 14.5px; letter-spacing: .02em; }
summary .small, summary .mut { font-family: var(--font); font-weight: 500; letter-spacing: 0; }
details .card { box-shadow: none; border: 0; padding: 6px 0 0; }

/* ---------- draft layout ---------- */
.draft-layout { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .draft-layout { grid-template-columns: 1.4fr 1fr; } }
.picks-strip { display: flex; gap: 6px; overflow: auto; padding-bottom: 4px; }
.picks-strip .pk { flex: 0 0 auto; padding: 4px 8px; border-radius: 4px; background: var(--surface2); border: 1px solid var(--line); font-family: var(--head); font-size: 11.5px; font-weight: 800; color: var(--mut); }
.picks-strip .pk.mine { background: var(--me); color: var(--ink); }
.picks-strip .pk.next { outline: 2px solid var(--accent); }
.picks-strip .pk.done { opacity: .45; text-decoration: line-through; }
.board { display: grid; gap: 3px; grid-template-columns: repeat(14, minmax(58px, 1fr)); font-size: 10px; }
.board .cell { background: var(--surface2); border: 1px solid var(--rowline); border-radius: 4px; padding: 3px 4px; min-height: 30px; overflow: hidden; }
.board .cell.mine { background: var(--me); }
.board .cell.kept { outline: 1px dashed var(--grape); }
.board .cell b { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board .hdr { font-family: var(--head); font-weight: 800; color: var(--th-ink); background: var(--th-bg); border-radius: 4px; padding: 2px 3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .03em; }

/* ---------- chat ---------- */
.chat { display: grid; gap: 8px; }
.msg { padding: 10px 12px; border-radius: 12px; max-width: 92%; white-space: pre-wrap; }
.msg.u { background: var(--grape); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.msg.a { background: var(--surface2); border-bottom-left-radius: 4px; }

/* ---------- toast + gate ---------- */
#toast { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; font-family: var(--head); font-weight: 700; font-size: 13.5px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 50; max-width: 92vw; }
#toast.show { opacity: 1; }
#gate { position: fixed; inset: 0; overflow: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--bg); display: grid; place-items: center; z-index: 40; }
#gate .box { width: min(340px, 90vw); text-align: center; }
#gate h2 { font-family: var(--head); text-transform: uppercase; letter-spacing: .04em; }
#gate .logo-big { width: 92px; height: 92px; border-radius: 20px; display: block; margin: 0 auto 12px; border: 1px solid var(--line); }
.pin-gate{--pk-s:clamp(56px,min(10vh,22vw),84px);--pk-ink:var(--ink);--pk-muted:var(--mut);--pk-line:var(--line);--pk-surface:var(--surface);--pk-accent:var(--accent);--pk-accent-ink:var(--accent-ink);--pk-bad:var(--danger);
  display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.5vh,22px);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.pin-gate[hidden]{display:none}
.pin-dots{display:flex;gap:10px}
.pin-dots span{width:14px;height:14px;border-radius:50%;border:2px solid var(--pk-ink);box-sizing:border-box}
.pin-dots span.on{background:var(--pk-ink)}
.pin-gate.busy .pin-dots span.on{animation:pinpulse .9s ease-in-out infinite}
@keyframes pinpulse{50%{opacity:.35}}
.pin-gate.bad .pin-dots{animation:pinshake .35s}
@keyframes pinshake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pin-msg{min-height:1.3em;font-size:16px;line-height:1.3;color:var(--pk-muted);text-align:center;font-weight:700}
.pin-gate.bad .pin-msg{color:var(--pk-ink)}
.pin-pad{touch-action:manipulation;display:grid;grid-template-columns:repeat(3,var(--pk-s));gap:clamp(10px,2vh,16px)}
.pin-pad button{height:var(--pk-s);width:var(--pk-s);border-radius:50%;border:1px solid var(--pk-line);background:var(--pk-surface);color:var(--pk-ink);
  font-family:inherit;font-weight:700;font-size:clamp(26px,4vh,32px);line-height:1;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
.pin-pad button:active{background:var(--pk-accent);color:var(--pk-accent-ink)}
.pin-pad button:disabled{opacity:.5}
.pin-pad .pin-del{border:none;background:transparent;font-size:24px}
@media (max-height:600px){.pin-gate{--pk-s:56px;gap:8px}.pin-pad{gap:8px}}
#gate .pin-gate { margin-top: clamp(6px, 1.5vh, 12px); }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: rtsspin .8s linear infinite; }
@keyframes rtsspin { to { transform: rotate(360deg); } }

/* ---------- draft dashboard: fits the viewport on wide screens, panels scroll inside ---------- */
.clock-strip { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 2px solid var(--accent); border-radius: var(--rad); background: var(--accent-tint); }
.clock-strip.live { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.clock-left { flex: 1; min-width: 0; }
.clock-label { font-family: var(--head); font-weight: 800; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.clock-name { font-family: var(--head); font-size: 28px; font-weight: 800; line-height: 1.05; margin-top: 2px; }
.clock-pos { font-size: 14px; font-weight: 600; color: var(--mut); }
.clock-why { font-size: 13px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clock-fallback { font-size: 12.5px; margin-top: 2px; }
.clock-right { flex: 0 0 auto; text-align: right; }
.dash-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; margin-top: 8px; }
.dash-status .ds { white-space: nowrap; color: var(--mut); }
.dash-status .ds b { color: var(--ink); font-family: var(--head); font-size: 14px; }
.dash-status .needs .chip { margin-left: 3px; }
.dash .picks-strip { margin-top: 6px; padding-bottom: 0; }
.dash .picks-strip .pk { font-size: 10.5px; padding: 2px 6px; }
.dash-col { display: flex; flex-direction: column; min-height: 0; padding: 10px 12px; }
.dash-col h2 { margin-bottom: 6px; }
.dash-col .scroll { overflow: auto; min-height: 0; flex: 1; }
.dash-col .tbl-wrap.scroll { max-height: none; }
.dash-col table.t { font-size: 12px; }
.dash-col table.t th, .dash-col table.t td { padding: 4px 6px; }
.dash-col table.t td.name { min-width: 120px; }
.dash-bottom { display: flex; flex-direction: column; min-height: 0; padding: 8px 12px; }
.dash-tabs { align-self: flex-start; margin-bottom: 6px; }
.dash-pane { overflow: auto; min-height: 0; flex: 1; }
/* the dashboard fills whatever height main has (the app frame already pins header + nav), so no chrome math */
#view-offseason.on { height: 100%; }
#keepBox > summary { font-family: var(--head); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
@media (min-width: 760px) {
  /* the dashboard is a fixed-height grid, so the collapsed box takes its own row
     and the board keeps whatever is left rather than pushing itself off-screen */
  #view-offseason.on { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
  #view-offseason #keepBox { flex: none; max-height: 62%; overflow: auto; }
  #view-offseason #view-draft { flex: 1; min-height: 0; }
}
.dash .picks-strip { flex-wrap: wrap; overflow: visible; }
.queue-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 12px; }
.queue-strip .ql { font-family: var(--head); font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); margin-right: 2px; }
.queue-strip .qc { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 8px; border-radius: 999px; background: var(--good-tint); border: 1px solid var(--line); font-weight: 600; }
.queue-strip .qc.gone { opacity: .5; text-decoration: line-through; }
.queue-strip .qc .icon-btn { padding: 0 6px; font-size: 11px; }
.queue-strip .empty { color: var(--mut); }
.dash-col #adviceList ol { gap: 3px; }
.dash-col #adviceList li { font-size: 13px; line-height: 1.35; }
.dash-col #adviceList li .tiny { font-size: 11.5px; }
@media (min-width: 760px) {
  .dash { display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(90px, 16%); gap: 8px; height: 100%; }
  .dash-top { min-height: 0; }
  /* two columns: the advisor owns the full left height; engine ranking above best available on the right */
  .dash-main { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; min-height: 0; }
  .dash-main #adviceCard { grid-row: 1 / 3; }
  .clock-name { font-size: 24px; }
}
@media (min-width: 1400px) {
  .dash-main { grid-template-columns: 1.2fr 0.95fr 1.25fr; grid-template-rows: minmax(0, 1fr); }
  .dash-main #adviceCard { grid-row: auto; }
  .clock-name { font-size: 28px; }
}
@media (max-width: 759px) {
  .dash-main { display: grid; gap: 10px; }
  .dash-col .scroll { max-height: 55dvh; }
  .dash-pane { max-height: 50dvh; }
  .clock-name { font-size: 22px; }
  .clock-why { white-space: normal; }
}

/* trade evaluator + bell-cow watch */
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick-list { max-height: 280px; overflow: auto; border: 1px solid var(--border); border-radius: var(--rad); padding: 4px 8px; margin-top: 4px; }
.pick-list label { display: flex; gap: 6px; align-items: center; padding: 3px 0; cursor: pointer; }
.pick-list label .name { font-weight: 600; }
tr.bc-claim td { background: var(--bad-tint); }
tr.bc-watch td, tr.bc-taken td { background: var(--accent-tint); }
tr.bc-mine td { background: var(--good-tint); }
@media (max-width: 640px) { .trade-cols { grid-template-columns: 1fr; } .pick-list { max-height: 200px; } }

/* claim planner */
tr.plan-row > td { background: var(--surface-2, var(--surface)); padding: 8px 10px; }
.plan .callout ul li { margin: 2px 0; }
.plan-slot:empty { display: none; }

/* projected standings */
.dash-status .ds b.good { color: var(--accent); }
.dash-status .ds b.bad { color: var(--danger); }

/* back-to-back pick plan */
.pair-card { margin-top: 6px; padding: 6px 10px; border: 1px solid var(--accent); border-radius: var(--rad); background: var(--accent-tint); }
.pair-head { font-size: 12px; margin-bottom: 4px; }
.pair-table td, .pair-table th { padding: 2px 6px; font-size: 12px; }
.pair-table tr[data-branch] { cursor: pointer; }
.pair-table tr[data-branch]:hover td { background: var(--me); }

/* Nothing in the draft dashboard may push the page sideways. Grid and flex children
   default to min-width:auto, so a long team name or a run of chips can force the
   track wider than the viewport: pin them to zero and let the rows wrap instead. */
.view { min-width: 0; }
.dash, .dash > * { min-width: 0; max-width: 100%; }
.dash-top { min-width: 0; overflow-x: clip; }
.clock-strip { flex-wrap: wrap; min-width: 0; }
.clock-left { min-width: 12rem; }
.clock-right { margin-left: auto; }
.dash-status { min-width: 0; max-width: 100%; }
.dash-status .ds { white-space: normal; }
.dash-status .needs { display: flex; flex-wrap: wrap; gap: 2px; }
.pair-card { max-width: 100%; overflow: hidden; }
.pair-table { width: 100%; table-layout: fixed; }
.pair-table td { white-space: normal; word-break: normal; overflow-wrap: anywhere; }
.queue-strip { max-width: 100%; }

.pair-rec { font-size: 12.5px; padding: 4px 8px; margin-bottom: 4px; border-radius: 6px; background: var(--good-tint); border: 1px solid var(--accent); }
.pair-table tr.pair-warn td { background: var(--bad-tint); }
.pair-table .bad { color: var(--danger); }

/* an advisor entry that has since been drafted must not read as a live suggestion */
li.adv-gone { opacity: .4; }
li.adv-gone b { text-decoration: line-through; }
li.adv-gone .icon-btn, li.adv-gone .chip.keep, li.adv-gone .chip.gone-likely, li.adv-gone .chip.gone-maybe { display: none; }

/* scaled-back draft view: one list plus who picks before me */
.dash-main2 { display: grid; gap: 10px; min-height: 0; }
@media (min-width: 760px) { .dash-main2 { grid-template-columns: 1.7fr 1fr; } }
ol.picklist { margin: 0; padding-left: 22px; display: grid; gap: 7px; }
ol.picklist li { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
ol.picklist li.pinned { background: var(--good-tint); border-radius: 6px; padding: 4px 6px 6px; }
.pl-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pl-act { margin-left: auto; display: flex; gap: 4px; white-space: nowrap; }
.pl-then { color: var(--accent2); }
.before-row { padding: 4px 0; border-bottom: 1px solid var(--line); }

/* free window list */
ol.fw-list { margin: 0; padding-left: 20px; display: grid; gap: 5px; }
ol.fw-list li { padding-bottom: 4px; border-bottom: 1px solid var(--line); }
ol.fw-list li.hot { background: var(--me); border-radius: 6px; padding: 3px 6px 4px; }
ol.fw-list li.done { opacity: .72; }
ol.fw-list li.done .fw-top b { text-decoration: line-through; text-decoration-thickness: 1px; }
b.good { color: var(--accent); }
.fw-top { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.fw-gain { margin-left: auto; font-family: var(--head); font-weight: 800; white-space: nowrap; }

/* ---------- team art (uploaded to RTS, served from their CDN) ---------- */
.tlogo, .tinit { width: 22px; height: 22px; border-radius: 6px; margin-right: 7px; vertical-align: -6px; border: 1px solid var(--line); background: var(--surface2); flex: none; }
.tlogo { object-fit: cover; }
.tinit { display: inline-flex; align-items: center; justify-content: center; font-family: var(--head); font-size: 10px; font-weight: 800; letter-spacing: .02em; color: var(--mut); overflow: hidden; }
.team-hero { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; min-width: 0; }
.team-hero .tlogo, .team-hero .tinit { width: 58px; height: 58px; border-radius: 14px; margin: 0; vertical-align: 0; font-size: 18px; }
.team-hero h1.page { margin: 0; line-height: 1.05; }
.team-hero .sub { color: var(--mut); font-size: 12px; margin-top: 3px; }
.team-hero .txt { min-width: 0; }
summary .tlogo, summary .tinit { width: 20px; height: 20px; }
.rts-mark { height: 15px; width: auto; vertical-align: -3px; margin-right: 5px; border-radius: 2px; }
@media (max-width: 480px) {
  .team-hero .tlogo, .team-hero .tinit { width: 46px; height: 46px; border-radius: 12px; font-size: 15px; }
}

/* ---------- agency artwork ---------- */
/* the plaque photo carries a white margin; the frame crops it back to the brass */
#gate .plaque-wrap { width: min(280px, 76vw, calc(22vh * 1.335)); aspect-ratio: 259 / 194; margin: 0 auto 14px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
#gate .plaque-wrap img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); display: block; }
.card-art { margin: -14px -14px 10px; overflow: hidden; border-radius: calc(var(--rad) - 1px) calc(var(--rad) - 1px) 0 0; border-bottom: 1px solid var(--line); background: var(--surface2); }
.card-art img { display: block; width: 100%; height: 92px; object-fit: cover; }
/* the yellow dress sits at 75-79% down the cover; this centers the crop on her */
.card-art.brief img { object-position: center 80%; }
/* the cover is portrait, so it hangs like a poster rather than being cropped to a strip */
.ask-art { width: min(190px, 52%); margin: 0 auto 12px; overflow: hidden; border-radius: var(--rad); border: 1px solid var(--line); background: var(--surface2); }
.ask-art img { display: block; width: 100%; height: auto; }
@media (max-width: 480px) { .card-art img { height: 78px; } }
/* the cover is only 292px wide, so a full-bleed strip on a wide card magnifies it
   more than three times. Past phone width it becomes a bounded plate instead. */
@media (min-width: 760px) {
  .card-art { max-width: 520px; margin: 2px auto 12px; border: 1px solid var(--line); border-radius: var(--rad); }
  .card-art img { height: 120px; }
}

/* ---------- build badge ----------
   Top-left, in main's top padding (the Ask button owns top-right). There is no fixed
   header: the view scrolls straight under this corner, past cards and green table heads,
   so the badge carries its own opaque --bg chip and is always read against that.
   Measured: --mut on --bg is 5.12:1 light, 7.51:1 dark (the PIN gate paints --bg too).
   Failure: --danger on --bg, 5.24:1 light, 7.27:1 dark. */
.app-version {
  position: fixed; z-index: 250; pointer-events: none;   /* above the PIN gate (40) and toast (50) */
  top: calc(env(safe-area-inset-top, 0px) + 1px);
  left: calc(env(safe-area-inset-left, 0px) + 6px);
  padding: 0 4px; border-radius: 3px; background: var(--bg);
  font: 500 9px/9px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .2px; color: var(--mut); white-space: nowrap;
}
.app-version.fail { color: var(--danger); font-weight: 700; }

/* ---------- Ask, pinned to the top right of whatever view is showing ---------- */
.ask-fab {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--head); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.ask-fab .ic { font-size: 15px; line-height: 1; }
.ask-fab.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* keep titles clear of it rather than letting them run underneath */
.team-hero, h1.page, #keepBox > summary { padding-right: 96px; }
@media (max-width: 560px) { .ask-fab { top: calc(10px + env(safe-area-inset-top)); right: 10px; } }
@media (min-width: 900px) { .ask-fab { top: calc(18px + env(safe-area-inset-top)); right: 22px; } }

/* on a narrow phone the reserved gutter pushed the team name onto two lines, so
   the button drops to its icon and the gutter shrinks to match */
@media (max-width: 430px) {
  .ask-fab .lbl { display: none; }
  .ask-fab { padding: 8px 10px; }
  .ask-fab .ic { font-size: 16px; }
  .team-hero, h1.page, #keepBox > summary { padding-right: 52px; }
}

/* a net gain that is zero or negative is not an opportunity; read it as muted */
.fw-gain.nil { color: var(--mut); font-weight: 700; }

/* IR check on the waiver card: one line per injured player */
.ir-check { display: grid; gap: 4px; margin: 6px 0 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surface2); }
.ir-check > div { overflow-wrap: anywhere; }

/* Playoff odds card (Home). Up/down text uses --accent (8.6:1 light on #fff, 9.8:1 dark on #151f1a)
   and --danger (5.9:1 light, 7.1:1 dark), both over the 4.5 bar. */
.po-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.po-big { font-family: var(--head); font-size: clamp(34px, 9vw, 46px); line-height: 1; color: var(--accent); }
.po-meta { flex: 1 1 180px; min-width: 0; }
.po-up { color: var(--accent); font-weight: 700; }
.po-down { color: var(--danger); font-weight: 700; }
.po-seeds { display: flex; align-items: flex-end; gap: 2px; height: 34px; flex: 0 1 140px; min-width: 100px; }
.po-seeds i { flex: 1; background: var(--line); border-radius: 2px 2px 0 0; min-height: 2px; }
.po-seeds i.in { background: var(--accent); }
.po-league summary { cursor: pointer; margin-top: 6px; }
.po-league table.t th, .po-league table.t td { padding: 6px; }
.po-league table.t td.name { white-space: normal; }

/* Weeks ahead strip (Home). The hole marker is --danger, the weak one --gold; both are shapes,
   not text. Week numbers use --mut (5.9:1 light on #fff, 7.0:1 dark on #151f1a). */
/* one row for the whole season, however narrow: every week shares the width */
.wk-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.wk { display: grid; grid-template-rows: auto 34px auto 6px; justify-items: center; gap: 2px; padding: 4px 0; border-radius: 6px; background: var(--surface2); min-width: 0; }
.wk.po { background: var(--grape-tint); }
.wk-n { font-size: 11px; color: var(--mut); font-weight: 700; }
.wk-p { font-size: 11px; font-variant-numeric: tabular-nums; }
.wk-bar { width: 70%; height: 100%; display: flex; align-items: flex-end; }
.wk-bar i { display: block; width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; }
.wk-dot { width: 6px; height: 6px; border-radius: 50%; }
.wk.hole .wk-dot, .wk-key.hole { background: var(--danger); }
.wk.weak .wk-dot, .wk-key.weak { background: var(--gold); }
.wk-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.trade-idea { border: 1px solid var(--line); border-radius: var(--rad); padding: 8px 10px; margin: 6px 0; }
.trade-idea button { margin-top: 6px; }
/* how likely the other owner says yes. Computed contrast, light / dark: win-win 6.62 / 7.16,
   hard sell 4.68 / 5.82, even 14.0 / 13.05. */
.chip.sell-win-win { background: var(--good-tint); color: var(--accent); }
.chip.sell-even { background: var(--surface2); color: var(--ink); }
.chip.sell-hard-sell { background: var(--bad-tint); color: var(--danger); }
@media (max-width: 359px) { .wk-strip { grid-auto-flow: row; grid-template-columns: repeat(7, minmax(0, 1fr)); } }
/* Roster efficiency tags. Computed contrast, light / dark: never starts (danger on bad-tint)
   4.68 / 5.82, rising (accent on good-tint) 6.62 / 7.16, bye cover (ink on warn-tint) 14+ both. */
.chip.eff-bad { background: var(--bad-tint); color: var(--danger); }
.chip.eff-good { background: var(--good-tint); color: var(--accent); }
.chip.eff-warn { background: var(--warn-tint); color: var(--ink); }
/* League race with the Title column: five columns fit 293px of an iPhone card (measured) */
.po-league table.t { font-size: 12px; }
.po-league table.t th { letter-spacing: 0; font-size: 10.5px; }
.po-league table.t th, .po-league table.t td { padding: 5px 4px; }
/* Home on wide screens (2026-10-05): cards stack in columns at their natural height instead of
   stretching to the tallest card in a grid row, which left the lineup, playoff and weeks cards
   mostly empty and pushed half the page below the fold at 1925x1415. Starters spans every column
   underneath. Narrower screens keep the regular grid. */
@media (min-width: 1100px) {
  .home-grid { display: block; column-width: 360px; column-gap: 12px; }
  .home-grid > .card { break-inside: avoid; margin: 0 0 12px; }
  .home-grid > .span-all { column-span: all; }
}
.home-grid > .span-all:not(:first-child) { margin-top: 0; }
details.ir-check > summary { cursor: pointer; }
/* below 1100px Home is a regular grid: Starters takes the full row, as it did outside the grid */
.home-grid > .span-all { grid-column: 1 / -1; }
/* Roster tab (2026-10-06). Phones: one column, lineup check, then the tables, then the tools (the
   wrappers dissolve with display: contents, so the order stays what it was). From 1100px: the
   roster tables on the left, the lineup check and the tools stacked on the right, each at its
   natural height, instead of seven full-width cards 3,075px tall at 1925x1415. */
.roster-layout { display: flex; flex-direction: column; gap: 12px; }
.roster-layout > div { display: contents; }
.roster-layout .roster-side:first-child > * { order: 0; }
.roster-layout .roster-main > * { order: 1; }
.roster-layout .roster-tools > * { order: 2; }
@media (min-width: 1100px) {
  .roster-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "main side1" "main tools"; grid-template-rows: auto 1fr; align-items: start; }
  .roster-layout > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .roster-layout .roster-main { grid-area: main; }
  .roster-layout .roster-side:first-child { grid-area: side1; }
  .roster-layout .roster-tools { grid-area: tools; }
}
/* the trade evaluator's pick lists scroll inside themselves; on wide screens they are shorter so
   the Roster tab fits one screen at 1925x1415 (measured: 1505px tall with 280px lists, 1421 at 180) */
@media (min-width: 1100px) { .roster-tools .pick-list { max-height: 170px; } }
/* at 1440 wide the roster tables ran 6px past their column (measured); slightly tighter cells fit */
@media (min-width: 1100px) { .roster-main table.t th, .roster-main table.t td { padding: 7px 5px; } }
/* Players table: sortable headers (2026-10-06) */
th.sortable { cursor: pointer; user-select: none; }
th.sorted { text-decoration: underline; text-underline-offset: 3px; }
.players-t td.num { white-space: nowrap; }
@media (max-width: 640px) { .players-t .hide-sm { display: none; } .players-t td.name .mut.tiny { display: block; } }