@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg: #eef0f2;
  --surface: #ffffff;
  --surface-2: #e4e7ec;
  --surface-3: #d8dce3;
  --border: #ccd2db;
  --ink: #171a21;
  --ink-dim: #5b6270;
  --ink-faint: #868d9b;
  --accent: #c8580a;
  --accent-ink: #ffffff;
  --accent-soft: #f5e2d0;
  --good: #1f8a55;
  --good-soft: #dcf0e4;
  --danger: #c62c3f;
  --danger-soft: #f8dfe2;
  --info: #2f6fd1;
  --info-soft: #dde8fb;
  --shadow: 0 1px 2px rgba(23,26,33,0.06), 0 4px 16px rgba(23,26,33,0.05);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161b; --surface: #1b1e25; --surface-2: #22262f; --surface-3: #2b303b;
    --border: #383e4b; --ink: #eceef2; --ink-dim: #9aa1b0; --ink-faint: #6c7382;
    --accent: #e8952e; --accent-ink: #1a1206; --accent-soft: #3a2c14;
    --good: #4fbb82; --good-soft: #163726; --danger: #e5606f; --danger-soft: #3a1e22;
    --info: #6d9df0; --info-soft: #1c2a42;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14161b; --surface: #1b1e25; --surface-2: #22262f; --surface-3: #2b303b;
  --border: #383e4b; --ink: #eceef2; --ink-dim: #9aa1b0; --ink-faint: #6c7382;
  --accent: #e8952e; --accent-ink: #1a1206; --accent-soft: #3a2c14;
  --good: #4fbb82; --good-soft: #163726; --danger: #e5606f; --danger-soft: #3a1e22;
  --info: #6d9df0; --info-soft: #1c2a42;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Public Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.tnum { font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: 'Big Shoulders Display', system-ui, sans-serif; text-wrap: balance; margin: 0; }
::selection { background: var(--accent-soft); }
button { font-family: inherit; cursor: pointer; }
input, select, button { font-family: 'Public Sans', system-ui, sans-serif; font-size: 13px; color: var(--ink); }
input, select { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 5px 8px; }
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
a { color: var(--accent); }

.shell { max-width: 1440px; margin: 0 auto; padding: 0 16px 40px; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); padding: 14px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.brand-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.brand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.brand .mark { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: 0.01em; color: var(--ink); }
.brand .mark em { font-style: normal; color: var(--accent); }
.brand .sub { color: var(--ink-faint); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.brand .sync-indicator { color: var(--ink-faint); font-size: 11px; letter-spacing: 0.04em; }
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.spectator-banner {
  background: var(--info-soft); color: var(--info); border: 1px solid var(--info);
  border-radius: 8px; padding: 8px 12px; font-size: 12.5px; font-weight: 600;
  margin-bottom: 12px;
}
.spectator-banner a { color: inherit; text-decoration: underline; }
.sync-error {
  display: none; background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger);
  border-radius: 8px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; margin-bottom: 12px;
}

.btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 6px;
  padding: 7px 12px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.health { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)) 1.4fr; gap: 10px; }
@media (max-width: 980px) { .health { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.stat .label { font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
.stat .value { font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 22px; }
.stat .value.good { color: var(--good); }
.stat .value.danger { color: var(--danger); }
.gauge-wrap { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.gauge-track { position: relative; height: 8px; border-radius: 5px; background: linear-gradient(90deg, var(--danger-soft), var(--surface-3) 50%, var(--good-soft)); border: 1px solid var(--border); overflow: visible; }
.gauge-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink-faint); opacity: 0.5; }
.gauge-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); transform: translate(-50%, -50%); transition: left 0.25s ease; }

.mobile-tabs { display: none; }

.layout { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) {
  /* A bare `1fr` track has an implicit auto-minimum equal to its widest
     unshrinkable content (the table's nowrap cells, in this case), which
     silently forces the column — and everything above it, including the
     header — wider than the viewport. minmax(0, 1fr) is what actually lets
     it shrink to fit; this is the same reason the desktop rule above uses
     minmax(0, 2.15fr) instead of a bare 2.15fr. */
  .layout { grid-template-columns: minmax(0, 1fr); }

  /* Below the point where the two columns collapse into one, showing every
     panel stacked means scrolling past all of them just to reach the last
     one. Tabs let you land on one section at a time instead; desktop keeps
     everything visible at once since there's room for it. */
  .mobile-tabs { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; }
  .mobile-tab {
    flex: 1 1 auto; text-align: center; white-space: nowrap;
    padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); color: var(--ink-dim); font-size: 12.5px; font-weight: 700;
  }
  .mobile-tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

  .layout [data-tab] { display: none; }
  .layout[data-active-tab="board"] [data-tab="board"],
  .layout[data-active-tab="team"] [data-tab="team"],
  .layout[data-active-tab="league"] [data-tab="league"],
  .layout[data-active-tab="log"] [data-tab="log"] { display: block; }
}
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.panel-head h2 { font-size: 19px; font-weight: 700; letter-spacing: 0.01em; }
.panel-body { padding: 12px 14px; }
.panel + .panel { margin-top: 16px; }

.board-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.search-input { width: 200px; max-width: 100%; }
.chip-row { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-dim); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.spacer { flex: 1; }
.check-label { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-dim); white-space: nowrap; }

/* Capped so a 200+ row board scrolls within itself — column headers stay
   pinned to this container's own scroll, not the page's — instead of
   pushing every other panel (and the page's own scrollbar) far below it. */
.table-wrap { overflow: auto; max-height: 62vh; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr { border-bottom: 1px solid var(--border); }
tbody tr.board-row { cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }
tbody tr.drafted { opacity: 0.45; }
tbody tr.drafted:hover { background: transparent; }
tbody tr.is-me-row { box-shadow: inset 3px 0 0 var(--accent); }
td { padding: 7px 10px; white-space: nowrap; }
td.name-cell { white-space: normal; min-width: 150px; padding-top: 0; padding-bottom: 0; }
/* display:block + full width + real padding, not just the tightly-wrapped
   inline text a bare <button> defaults to — otherwise the tappable area is
   only as wide as the name itself, and only a line-height tall, which is
   an easy miss for a real finger (especially inside a table that also
   scrolls horizontally, where any tap with a hint of drift reads as a pan). */
.player-name-btn { display: block; width: 100%; background: none; border: none; padding: 6px 0; font: inherit; color: inherit; cursor: pointer; text-align: left; touch-action: manipulation; }
.player-name-btn:hover .player-name, .player-name-btn:focus-visible .player-name { text-decoration: underline; }
.player-name { font-weight: 700; }
.player-name-btn .expand-hint { color: var(--ink-faint); font-size: 10px; margin-left: 3px; }
.player-meta { color: var(--ink-faint); font-size: 11.5px; }
.src-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--info-soft); color: var(--info); margin-left: 6px; white-space: nowrap; }
.detail-row td { background: var(--surface-2); padding: 10px 14px; white-space: normal; }
.detail-row .formula-line { font-size: 12.5px; color: var(--ink-dim); line-height: 1.6; }
.detail-row .formula-line b { color: var(--ink); font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; }
.detail-row .formula-final { margin-top: 4px; font-size: 13px; }
.pos-pill { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.03em; padding: 2px 6px; border-radius: 4px; background: var(--surface-3); color: var(--ink-dim); }
.pos-pill.QB { background: var(--info-soft); color: var(--info); }
.pos-pill.RB { background: var(--good-soft); color: var(--good); }
.pos-pill.WR { background: var(--accent-soft); color: var(--accent); }
.pos-pill.TE { background: var(--surface-3); color: var(--ink-dim); }
.pos-pill.DST, .pos-pill.K { background: var(--surface-3); color: var(--ink-faint); }
.note-flag { font-size: 11px; color: var(--danger); font-weight: 700; }
.val-cell { font-weight: 800; font-family: 'Big Shoulders Display', sans-serif; font-size: 15px; }
.val-cell.mkt { color: var(--accent); }
.drafted-tag { font-size: 11px; font-weight: 700; color: var(--ink-dim); }

.draft-row td { background: var(--surface-2); padding: 10px; }
.draft-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.draft-form input[type=number] { width: 80px; }
.draft-form select { min-width: 160px; }

.team-list { display: flex; flex-direction: column; gap: 6px; }
.team-row { display: grid; grid-template-columns: 20px 1fr auto auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 7px; background: var(--surface-2); }
.team-row.me { box-shadow: inset 3px 0 0 var(--accent); background: var(--accent-soft); }
.team-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); justify-self: center; }
.team-row .tname { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; background: transparent; border: none; padding: 2px 4px; width: 100%; color: var(--ink); }
.team-row .tname:hover, .team-row .tname:focus { background: var(--surface); border: 1px solid var(--border); }
.team-meta { font-size: 11px; color: var(--ink-faint); text-align: right; }
.team-budget { font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 16px; text-align: right; min-width: 54px; }

.slot-grid { display: flex; flex-direction: column; gap: 5px; }
.slot { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; border: 1px dashed var(--border); font-size: 12.5px; }
.slot.filled { border-style: solid; background: var(--surface-2); }
.slot .slot-label { font-weight: 800; color: var(--ink-faint); font-size: 11px; letter-spacing: 0.04em; }
.slot .slot-player { font-weight: 700; }
.slot .slot-empty { color: var(--ink-faint); font-style: italic; }
.slot .slot-price { font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; }

.rec-list { display: flex; flex-direction: column; gap: 6px; }
.rec-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 7px; background: var(--surface-2); }
.rec-item .why { color: var(--ink-faint); font-size: 11px; }
.rec-tabs { display: flex; gap: 4px; padding: 10px 14px 0; flex-wrap: wrap; }

.log-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.log-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; font-size: 12px; padding: 5px 8px; border-radius: 6px; }
.log-item:nth-child(odd) { background: var(--surface-2); }
.log-item .lp { color: var(--ink-faint); }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field label { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.field input, .field select { width: 100%; }
details.adv { margin-top: 10px; }
details.adv summary { cursor: pointer; font-size: 12px; color: var(--ink-dim); font-weight: 700; padding: 4px 0; }
.pos-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px,1fr)); gap: 8px; margin-top: 8px; }
.pos-mini-grid .field label { font-size: 10px; }

.empty-note { color: var(--ink-faint); font-size: 12.5px; padding: 6px 2px; }
.add-player-toggle { padding: 10px 14px; border-top: 1px solid var(--border); }
.add-player-form { display: none; grid-template-columns: repeat(auto-fit, minmax(100px,1fr)); gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--surface-2); }
.add-player-form.open { display: grid; }

.scarcity-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--border); }
.scarcity-chip { font-size: 11px; padding: 4px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); display: flex; gap: 5px; align-items: center; }
.scarcity-chip b { font-family: 'Big Shoulders Display', sans-serif; }
.scarcity-bar { width: 40px; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.scarcity-fill { height: 100%; background: var(--accent); }

footer.note { text-align: center; color: var(--ink-faint); font-size: 11.5px; padding: 24px 0 4px; }

/* Mobile: tighten density and give every control a real touch target.
   Font-size 16px on inputs also stops iOS Safari's auto-zoom-on-focus. */
@media (max-width: 640px) {
  input, select { font-size: 16px; }

  /* The full topbar (title, banner, 4 stat cards, gauge) is tall enough on a
     phone that pinning it via position:sticky eats most of the viewport and
     overlaps the content underneath as you scroll. Let it scroll away instead
     — there's no room to spare here like there is on desktop. */
  .topbar { position: static; }

  .shell { padding: 0 10px 28px; }
  .brand-row { row-gap: 8px; }
  .brand { row-gap: 4px; }
  .brand .mark { font-size: 22px; }
  .topbar-actions { width: 100%; }
  .topbar-actions .btn, .topbar-actions a.btn { flex: 1 1 auto; justify-content: center; padding: 9px 10px; }

  /* Four bordered cards plus a gauge, each on their own row, is the single
     biggest thing eating the screen before you reach any real content.
     Turn it into one short, swipeable strip of small chips instead. */
  .health { display: flex; grid-template-columns: none; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
  .stat { flex: 0 0 auto; min-width: 84px; padding: 6px 10px; }
  .stat .label { font-size: 8.5px; margin-bottom: 0; }
  .stat .value { font-size: 15px; }
  .health .gauge-wrap { flex: 0 0 auto; min-width: 150px; }
  .health .gauge-wrap .label { white-space: nowrap; }

  .panel-head { padding: 10px 12px; }
  .panel-body { padding: 10px 12px; }

  .board-controls { padding: 8px 12px; }
  .search-input { flex: 1 1 100%; }
  .chip { padding: 6px 12px; }
  #sortSelect { flex: 1 1 auto; }

  .draft-form { width: 100%; }
  .draft-form select { min-width: 0; flex: 1 1 100%; }
  .draft-form input[type=number] { flex: 0 0 72px; }
  .draft-form .btn { flex: 1 1 auto; justify-content: center; }

  thead th, td { padding: 7px 6px; }
  thead th:first-child, tbody td:first-child,
  thead th:nth-child(4), tbody td:nth-child(4) { display: none; } /* rank # and Proj: least useful columns on a phone */
  .val-cell { font-size: 14px; }
  .btn.small { padding: 7px 11px; }

  .team-row { grid-template-columns: 14px 1fr auto; }
  .team-meta { display: none; }

  .add-player-form { grid-template-columns: 1fr 1fr; }
}