/* Commish Hub -- one stylesheet, mobile first.
   Dark by design: the recap card gets screenshotted into a group chat and a
   dark card reads well in both Sleeper themes. Each league sets --accent. */

:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222b;
  --line: #2a2f3a;
  --text: #e8eaf0;
  --muted: #9aa3b2;
  --faint: #6b7381;
  --good: #5ad38a;
  --bad: #ff6b6b;
  --warn: #f0b84a;
  --accent: #e8b04b;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 var(--font);
}
a { color: var(--accent); }
button { font: inherit; }
[hidden] { display: none !important; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 14px; }

/* ---------- header ---------- */
.top { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
.brand-name { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.brand-sub { color: var(--muted); font-size: 12.5px; }
.pickers { display: flex; gap: 8px; }
.pick { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pick select {
  margin-top: 2px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; font-size: 15px; min-width: 96px;
}
/* The season-totals toggle, sized to sit level with the two selects beside it.
   It is the only signpost to the cumulative views and it has to look pressable
   rather than like a label. */
.viewtog {
  margin-top: 2px; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px;
  font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 33px;
}
.viewtog.on { background: var(--accent); color: #111; border-color: var(--accent); }
.pick select:disabled { opacity: .45; }

.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 14px 10px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; background: transparent; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tab.active { color: #111; background: var(--accent); border-color: var(--accent); }

/* ---------- status ---------- */
.status { color: var(--muted); padding: 18px 0; font-size: 14px; }
.status.err { color: var(--bad); }

/* ---------- recap card ---------- */
#card-wrap { margin-top: 16px; }
.card {
  --pad: 22px;
  background: linear-gradient(160deg, #1a1e27 0%, #12151b 100%);
  border: 1px solid var(--line); border-top: 5px solid var(--accent);
  border-radius: var(--radius); padding: var(--pad); color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.card.exporting { width: 720px; max-width: none; border-radius: 18px; }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card-league { color: var(--accent); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 12.5px; }
.card-week { color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.card-head { margin: 8px 0 12px; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.015em; }
.card-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fact { flex: 1 1 140px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.fact .k { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.fact .v { font-weight: 700; font-size: 15px; margin-top: 2px; overflow-wrap: anywhere; }
.card-body p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; }
.card-body p:last-child { margin-bottom: 0; }
.card-body b { color: var(--accent); }
.card-body .none { color: var(--muted); font-style: italic; }
.card-foot { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11.5px; }
.card-foot .prov { color: var(--warn); font-weight: 700; }
.card-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.hint { color: var(--faint); font-size: 12px; flex: 1 1 100%; }
.btn {
  background: var(--accent); color: #111; border: 0; border-radius: 10px; padding: 10px 16px;
  font-weight: 700; cursor: pointer; font-size: 14px;
}
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- evidence panels ---------- */
#evidence { margin-top: 22px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.panel h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: -0.01em; }
.panel .dek { color: var(--muted); font-size: 12.5px; margin-bottom: 10px; }
.panel .empty { color: var(--faint); font-style: italic; font-size: 14px; }
/* Save image / Preview on every panel. Hidden in the export, and the header and
   footer that only the export carries (.ex-only) are hidden on the page. */
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.btn.sm { padding: 8px 14px; font-size: 13px; min-height: 36px; }
.ex-only { display: none !important; }
.panel.exporting { max-width: none; padding: 26px; border-top: 5px solid var(--accent);
  background: linear-gradient(160deg, #1a1e27 0%, #12151b 100%); border-radius: 18px; margin: 0; }
.panel.exporting .ex-only { display: flex !important; }
.panel.exporting .sc-top { margin-bottom: 6px; }
.panel.exporting h3 { font-size: 21px; margin-bottom: 6px; }
.panel.exporting .panel-actions { display: none; }
.panel.exporting .tbl-wrap,
.panel.exporting .gridwrap { overflow: visible; margin: 0; padding: 0; }
.panel.exporting .grid th.gname,
.panel.exporting .grid .gtotal { position: static; }
.panel.exporting .dek,
.panel.exporting .empty { max-width: 680px; }
.panel .prov { color: var(--warn); font-weight: 700; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.hl-bad td { background: rgba(255,107,107,.10); }
tr.hl-good td { background: rgba(90,211,138,.10); }
tr.hl-warn td { background: rgba(240,184,74,.10); }
tr.dim td { color: var(--faint); }
.sub { color: var(--muted); font-size: 12px; }
.pill { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.pill.bad { background: var(--bad); color: #111; }
.pill.good { background: var(--good); color: #111; }
.pill.warn { background: var(--warn); color: #111; }
.pill.gray { background: var(--line); color: var(--text); }
.good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); } .muted { color: var(--muted); }

/* the chop-seat story list */
.story { list-style: none; margin: 0; padding: 0; }
.story li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.story li:last-child { border-bottom: 0; }
.story .when { color: var(--muted); font-size: 12.5px; font-weight: 600; padding-top: 2px; }

/* Kings Justice Death Recap */
.panel.death { border-top: 3px solid var(--bad); }
.dr-lead { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.dr-how { color: var(--muted); font-size: 14px; margin-top: 2px; }
.dr-note { color: var(--warn); font-size: 12.5px; font-weight: 600; margin-top: 6px; }
.dr-epitaph { margin: 12px 0 0; padding: 8px 12px; border-left: 3px solid var(--accent); color: var(--text); font-style: italic; font-size: 14.5px; }
.dr-h { margin: 18px 0 8px; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.dr-earn { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dr-earn b { font-size: 30px; color: var(--good); font-variant-numeric: tabular-nums; }
.dr-earn span { color: var(--muted); font-size: 13px; }
.dr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-chip { flex: 0 0 auto; min-width: 74px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; }
.dr-chip .k { color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.dr-chip .v { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.dr-chip .r { color: var(--muted); font-size: 11.5px; }
.dr-chip.hi { border-color: var(--good); }
.dr-chip.hi .v { color: var(--good); }
.dr-chip.dead { border-color: var(--bad); background: rgba(255,107,107,.10); }
.dr-chip.dead .v { color: var(--bad); }
.dr-p { font-size: 14.5px; line-height: 1.5; margin-top: 8px; }
.panel.exporting .dr-p,
.panel.exporting .dr-how { max-width: 680px; }

/* matchup cards */
.match { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--panel-2); }
.match .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.match .who { font-weight: 700; }
.match .pts { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 18px; }
.match .row.lose .who, .match .row.lose .pts { color: var(--muted); font-weight: 600; }
.match .meta { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.match .tags { margin-top: 6px; }

/* pick grid */
.picks { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--line); }
.chip.win { background: rgba(90,211,138,.22); color: var(--good); }
.chip.loss { background: rgba(255,107,107,.22); color: var(--bad); }
.chip.lonely { outline: 2px solid var(--accent); }

/* ---------- overlay ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 50; overflow: auto; padding: 14px; }
.overlay-inner { max-width: 760px; margin: 0 auto; }
.overlay-bar { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13px; margin-bottom: 10px; gap: 10px; }
.overlay-btns { display: flex; gap: 8px; flex: none; }
.overlay img { width: 100%; height: auto; border-radius: 12px; display: block; }

.foot { color: var(--faint); font-size: 12px; padding: 24px 0 40px; }
.foot a { color: var(--muted); }

@media (min-width: 600px) {
  .card { --pad: 28px; }
  .card-head { font-size: 28px; }
}

/* ---------- season: cumulative grids ----------
   A .sharecard is a panel that gets screenshotted on its own, so it repeats the
   league name and season the way the recap card does -- posted to a chat with
   no page around it, the image has to say what it is. */
.sharecard-wrap { margin-bottom: 22px; }
.sharecard {
  background: linear-gradient(160deg, #1a1e27 0%, #12151b 100%);
  border: 1px solid var(--line); border-top: 5px solid var(--accent);
  border-radius: var(--radius); padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
/* Widening on export is what makes an 18-week grid come out whole rather than
   cropped to the phone viewport: the scroller is unclipped and the card grows
   to its own content instead of the column width. */
.sharecard.exporting { width: max-content; max-width: none; padding: 26px; }
.sharecard.exporting .gridwrap { overflow: visible; margin: 0; padding: 0; }
/* Every control above a grid, the $0 button included, stays out of the image. */
.sharecard.exporting .gctl { display: none; }
/* The picks image keeps only the top rows (PICKS_IN_IMAGE in hub.js) and says so. */
.sharecard.exporting tr.ex-cut { display: none; }
/* The season prizes, at the top of the picks card and in its image. */
.stakes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.stake { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.stake-medal { font-size: 20px; line-height: 1; }
.stake-place { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.stake-amt { font-size: 20px; color: var(--accent); }
.stake-when { color: var(--faint); font-size: 12px; background: none; border-style: dashed; }
.sharecard.exporting .ex-only { display: inline !important; }
/* The card grows to the grid's width, which for 18 weeks is ~1500px. Prose set
   that wide is unreadable in a chat image, so the text blocks keep a measure. */
.sharecard.exporting .sc-dek,
.sharecard.exporting .sc-note { max-width: 760px; }
.sharecard.exporting .grid th.gname,
.sharecard.exporting .grid .gtotal { position: static; }
.sc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sc-league { color: var(--accent); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 12.5px; }
.sc-season { color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sc-head { margin: 6px 0 8px; font-size: 21px; line-height: 1.2; font-weight: 800; letter-spacing: -0.015em; }
.sc-dek { color: var(--muted); font-size: 12.5px; margin-bottom: 12px; }
.sc-dek b { color: var(--warn); }
.sc-note { color: var(--faint); font-size: 12px; margin-top: 10px; }
.sc-note b { color: var(--warn); }
.sc-foot { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11.5px; }

/* The grid itself. The name column is sticky so a row stays identifiable while
   the weeks scroll; the total column is separated by a rule, because it is the
   answer and the weeks are the working. */
/* No bleed to the card edge here, unlike .tbl-wrap. `right: 0` on the sticky
   total column resolves against the scrollport, so a negative margin would pin
   the total 18px outside the card and let the next week's column show in the
   gap beside it. */
.gridwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.grid { border-collapse: separate; border-spacing: 0; width: auto; min-width: 100%; font-size: 13.5px; }
table.grid th, table.grid td { padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.grid thead th { color: var(--muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; text-align: right; }
table.grid th.gname {
  position: sticky; left: 0; z-index: 2; text-align: left; font-weight: 700;
  background: #171a21; min-width: 108px; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis;
}
table.grid thead th.gname { background: #1e222b; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* The total is the answer and the weeks are the working, so it is pinned to the
   right the way the name is pinned to the left. Without this the one column
   anybody reads first is the one off the edge of a phone. */
table.grid .gtotal {
  position: sticky; right: 0; z-index: 2;
  border-left: 2px solid var(--line); padding-left: 10px; background: #171a21;
}
table.grid thead th.gtotal { background: #1e222b; }
table.grid tbody tr:nth-child(even) .gtotal { background: #1b1f27; }
table.grid tbody tr.hl-good .gtotal { background: #1d2a23; }
table.grid tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }
table.grid tbody tr:nth-child(even) th.gname { background: #1b1f27; }
table.grid tbody tr.hl-good th.gname { background: #1d2a23; }
table.grid tbody tr.dim td, table.grid tbody tr.dim th { color: var(--faint); }
table.grid .v { font-weight: 700; }
table.grid .v.win { color: var(--good); }
table.grid .z { color: #3d434f; }             /* an empty cell, visible but quiet */
table.grid .sub { font-size: 10.5px; line-height: 1.25; }
table.grid th.soft, table.grid td.soft { background: rgba(240,184,74,.05); }

/* A trophy is dotted-outlined while it is only where things stand -- same
   "this is modeled, not settled" cue the other sites use for a projection. */
.trophy { font-size: 15px; margin-left: 3px; }
.trophy.proj { opacity: .55; }
.sub.proj { color: var(--warn); opacity: .8; }

/* The controls above a grid. Wraps on a phone rather than shrinking the tap
   targets; everything in here stays >=34px tall with the label's line box. */
.gctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.gtoggle { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.gt { background: transparent; color: var(--muted); border: 0; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; }
.gt.on { background: var(--accent); color: #111; }
/* The $0 filter is its own standalone button, not a third segment of the
   per-week/running pair -- it answers a different question and the two must not
   look like one three-way choice. */
.gt.zt { border: 1px solid var(--line); border-radius: 9px; }
.gt.zt.on { background: var(--panel-2); color: var(--text); border-color: var(--muted); }

/* ---------- waivers: best & worst ---------- */
.awards { display: grid; grid-template-columns: 1fr; gap: 10px; }
.award { background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 12px; }
.aw-label { color: var(--accent); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.aw-who { font-weight: 800; font-size: 16px; margin-top: 2px; }
.aw-val { font-size: 13.5px; margin-top: 2px; }
.aw-dek { color: var(--faint); font-size: 12px; margin-top: 2px; }

@media (min-width: 560px) {
  .awards { grid-template-columns: 1fr 1fr; }
  .sharecard { padding: 22px; }
  .sc-head { font-size: 24px; }
}