/*
 * Two themes, one set of names.
 *
 * Everything the theme touches is a variable here, and the rest of the
 * stylesheet names variables rather than colours — so light is a palette, not
 * a second stylesheet, and a rule added later can't be dark-only by accident.
 *
 * What is deliberately NOT themed: the game blocks. Those take their colour
 * from the teams playing, and their text colour is already chosen per team by
 * inkFor() against that colour, so a navy cap and a yellow one both stay
 * legible on either ground with nothing to special-case. Same reasoning as the
 * poster's themes. The scrims and insets drawn ON those blocks stay dark for
 * the same reason — they sit on team colour, never on the page.
 */
:root {
  --bg: #10141c;
  --panel: #182030;
  --panel-2: #1f2939;
  --rail: #0d1119;
  --line: #2b3648;
  --line-soft: #222c3c;
  --ink: #e8edf5;
  --ink-dim: #8d9bb1;
  --ink-faint: #5e6b80;     /* labels quieter than --ink-dim: tick halves, counts */
  --edge: #3d4b63;          /* hover borders, and rules that read as edges */
  --edge-strong: #4a5a75;
  --hover: #28344a;         /* the wash under a hovered control */
  --accent: #4c8dff;
  --accent-soft: #9dc0ff;
  --live: #ff4d4d;
  --hot: #ffb020;
  --wait: #e0c341;
  --fav: #f5c451;
  --off-bg: #3a4459;        /* postponed / cancelled tag */
  --off-ink: #c3ccdb;
  --warn-bg: #3a2a12;       /* the "couldn't reach ESPN" banner, and hints */
  --warn-line: #6b4a1c;
  --warn-ink: #f0d3a4;
  --warn-accent: #c79a4a;   /* the "· 3 hidden" counters */
  --hatch: rgba(255,255,255,.012);   /* empty week cells */
  --scrim: rgba(6,9,14,.72);         /* behind a modal */
  --shadow: rgba(0,0,0,.6);

  --rail-w: 84px;
  --crest-w: 44px;   /* keep in sync with CREST_MIN_W in app.js */
  --row-gap: 10px;
  --lane-h: 46px;
  --lane-gap: 4px;
}

/*
 * Light. Not an inversion — a grid of saturated team colours on white glares,
 * so the ground is a soft blue-grey and the rails are a step darker than the
 * field rather than a step lighter, keeping the same depth order as dark. The
 * accent darkens because #4c8dff on near-white fails contrast at small sizes;
 * the alert colours darken for the same reason.
 */
:root[data-theme="light"] {
  --bg: #eef1f6;
  --panel: #e3e8f0;
  --panel-2: #f6f8fb;
  --rail: #dde3ec;
  --line: #bcc6d5;
  --line-soft: #d2dae5;
  --ink: #121722;
  --ink-dim: #4f5a6d;
  --ink-faint: #6b7688;
  --edge: #94a2b6;
  --edge-strong: #7b8a9f;
  --hover: #d5dde8;
  --accent: #1d5fd8;
  --accent-soft: #17439a;
  --live: #d32020;
  --hot: #b4690a;
  --wait: #9a6b05;
  --fav: #b8860b;
  --off-bg: #c2cbd9;
  --off-ink: #2a3342;
  --warn-bg: #fdf0d6;
  --warn-line: #d9b168;
  --warn-ink: #5a3f11;
  --warn-accent: #8a5f13;
  --hatch: rgba(0,0,0,.035);
  --scrim: rgba(28,36,50,.45);
  --shadow: rgba(30,41,59,.22);
}

* { box-sizing: border-box; }

/* Must outrank any author `display` rule: the browser's own [hidden] style is
 * weaker than a class selector, so `.sheet { display: flex }` would otherwise
 * keep the modal on screen as a full-page click-blocking overlay. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body { display: flex; flex-direction: column; }

/* ---------- top bar ---------- */

.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

/* Both halves wrap internally, not just the bar between them. Without this
 * each half stays one unbreakable row: on a 408px phone the bar measured 559px
 * and the whole document drifted sideways under the thumb, which reads as a
 * broken site before anyone reaches the grid. `min-width: 0` lets a half be
 * narrower than its content wants, which is what allows the wrap to happen. */
.bar-left, .bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.bar h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Sits with the name and carries the explaining it no longer does. Quiet
   enough to ignore once you know the site, present enough to answer "what am
   I looking at" the first time. The negative margin pulls it back against the
   name, since the bar's 12px gap is meant for separate controls. */
.tagline {
  margin: 0 0 0 -5px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-dim);
  white-space: nowrap;
}

.datenav { display: flex; align-items: center; gap: 4px; }

input[type=date], select {
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
}

.ghost {
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}
.ghost:hover { background: var(--hover); }

.toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-dim); cursor: pointer; }
.toggle input { accent-color: var(--accent); }
.toggle em {
  font-style: normal;
  font-size: 11px;
  color: var(--warn-accent);
  white-space: nowrap;
}

.stamp { font-size: 11px; color: var(--ink-dim); min-width: 92px; }
.stamp .dot { color: var(--live); }

/* ---------- league chips ---------- */

.chips {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 6px 16px 8px;
  background: var(--rail);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Each league group is a column: heading, its chips, then any filter that
 * only applies to those leagues. Keeps a scoped toggle visibly attached to
 * what it acts on instead of floating in the global bar. */
.chipgroup {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chiprow { display: flex; gap: 6px; }
.chipsubs { display: flex; gap: 10px; padding-top: 1px; }

.subtoggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-dim);
  cursor: pointer;
  white-space: nowrap;
}
.subtoggle:hover { color: var(--ink); }
.subtoggle input {
  accent-color: var(--accent);
  width: 12px;
  height: 12px;
  margin: 0;
}
.subtoggle em {
  font-style: normal;
  font-size: 10px;
  color: var(--warn-accent);
}

.chip {
  flex: none;
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { color: var(--ink); border-color: var(--edge); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* "All" and "None" sit ahead of the groups and read as the master switches
 * they are: the two ends of the range, so they share a look. */
.chip-all, .chip-none {
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-color: var(--edge);
  color: var(--ink);
  margin-right: 2px;
}
.chip-all[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* "None" lights up muted rather than in the accent — an empty board is a state
 * you can be in, but not one to advertise as the good one. */
.chip-none[aria-pressed="true"] {
  background: var(--edge);
  border-color: var(--edge-strong);
  color: #fff;
}

.chip-group {
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-left: 2px;
}

/* ---------- grid ---------- */

.grid-wrap { flex: 1; overflow: auto; position: relative; }

.grid { position: relative; min-width: max-content; }

/* time header */
.timehead {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  background: var(--rail);
  border-bottom: 1px solid var(--line);
  height: 34px;
}
.timehead .corner {
  position: sticky;
  left: 0;
  z-index: 31;
  width: var(--rail-w);
  flex: none;
  background: var(--rail);
  border-right: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.timehead .ticks { position: relative; flex: 1; }
.tick {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--line);
  padding-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.tick.half { border-left-color: var(--line-soft); color: var(--ink-faint); font-weight: 400; }

/* league row */
.row { display: flex; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: none; }

.rowlabel {
  position: sticky;
  left: 0;
  z-index: 20;
  width: var(--rail-w);
  flex: none;
  background: var(--rail);
  border-right: 1px solid var(--line);
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rowlabel b { font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.rowlabel span { font-size: 10px; color: var(--ink-dim); }
.rowlabel button {
  margin-top: 2px;
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 10px;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.lanes { position: relative; flex: 1; padding: var(--row-gap) 0; }

.row.muted .rowlabel b { color: var(--ink-dim); }
.rowmsg {
  position: sticky;
  left: calc(var(--rail-w) + 14px);
  display: inline-block;
  padding: 9px 0;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* vertical gridlines behind blocks */
.gridlines { position: absolute; inset: 0; pointer-events: none; }
.gridlines i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-soft); }
.gridlines i.hour { background: var(--line); }

.nowline {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--live);
  z-index: 15;
  pointer-events: none;
}
.nowline::before {
  content: "";
  position: absolute;
  top: -3px; left: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--live);
}

/* ---------- game block ---------- */

.game {
  position: absolute;
  height: var(--lane-h);
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.55);
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
  display: flex;
  z-index: 5;
  transition: transform .08s ease, box-shadow .08s ease;
}

/* The two team bands. min-width:0 lets long names ellipsis instead of
 * pushing the status rail off the end of the block. */
.teams {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.game:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--shadow);
  z-index: 12;
}
.game.live { border-color: var(--live); }

/* A starred team. Gold edge only — the block keeps its place in time order
 * rather than floating to the top lane, so the grid still reads as a clock. */
.game.fav {
  border-color: var(--fav);
  box-shadow: 0 0 0 1px var(--fav), 0 1px 4px rgba(0, 0, 0, .5);
}
.wev.fav { border-left-color: var(--fav); box-shadow: inset 1px 0 0 var(--fav); }

/* Per-league "only my teams", in the row rail under the game count. */
.rowfav {
  margin-top: 3px;
  align-self: flex-start;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-faint);
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 6px;
  cursor: pointer;
  white-space: nowrap;
}
.rowfav:hover { color: var(--ink); border-color: var(--edge); }
.rowfav.on { background: var(--fav); border-color: var(--fav); color: #241a00; }

/* Close and late: the game you'd actually flip to. Amber rather than the
 * live red, so it reads as "better than merely live" instead of blending in
 * with every other in-progress block. */
.game.hot {
  border-color: var(--hot);
  box-shadow: 0 0 0 1px var(--hot), 0 0 14px rgba(255, 176, 32, .4);
  z-index: 9;
  animation: hotpulse 2.4s ease-in-out infinite;
}
@keyframes hotpulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--hot), 0 0 8px rgba(255, 176, 32, .28); }
  50%      { box-shadow: 0 0 0 1px var(--hot), 0 0 18px rgba(255, 176, 32, .6); }
}
@media (prefers-reduced-motion: reduce) {
  .game.hot { animation: none; }
}

.hotflag {
  font-size: 7.5px;
  letter-spacing: .08em;
  opacity: .85;
}
.game.tiny .hotflag { display: none; }

.hotcount { color: var(--hot); font-weight: 700; }
.waitcount { color: var(--wait); font-weight: 700; }

/* Delayed: waiting, not playing. Deliberately not the live red — a red block
 * that isn't being played is worse than no signal at all. */
.game.waiting {
  border-color: var(--wait);
  border-style: dashed;
  box-shadow: none;
}
.game.waiting .teams,
.game.waiting .crest { opacity: .75; }
.status.waittag { background: var(--wait); color: #221a00; }

/* Postponed or cancelled: not happening. */
.game.calledoff { border-color: var(--edge); opacity: .5; }
.game.calledoff .teams,
.game.calledoff .crest { filter: grayscale(1); }
.status.offtag { background: var(--off-bg); color: var(--off-ink); }

/* The stage, in the rail the network used to occupy. */
.railstage {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--accent);
}
/* A rail carrying only the stage stays quiet — it isn't a live signal. */
.status.stagerail { background: rgba(0, 0, 0, .5); }
.status.stagerail .railstage { color: var(--accent-soft); }
/* On live/final rails the stage sits above the clock, inheriting its colour. */
.status.livetag .railstage,
.status.hottag .railstage,
.status.waittag .railstage,
.status.offtag .railstage { color: inherit; opacity: .85; }


/* The original kickoff, on a block that has been shifted to "now". */
.wasat { font-size: 7px; opacity: .8; letter-spacing: .02em; }
.game.tiny .wasat { display: none; }

.side {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 5px;
  min-width: 0;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .01em;
}
/* A team's logo is drawn in that team's colours, so a team-coloured band is the
 * one background it's guaranteed to disappear against. ESPN's marks are made
 * for white, so give every logo its own white chip. The ring keeps the chip
 * itself readable when the band is a pale colour. */
.side img {
  width: 19px;
  height: 19px;
  flex: none;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
  padding: 1.5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .3);
}
.side .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- end crests ---------- */

/* A full-height panel of the team's colour at each end of the block, away on
 * the left and home on the right, carrying that team's mark at roughly twice
 * the size of the old inline chip. That size is the whole point: at a glance
 * down a row you recognise a crest long before you read a name.
 *
 * The cap is the same colour as that team's band, so the two merge along one
 * edge and meet the other team's band along the other — the divider is what
 * keeps that reading as a deliberate panel rather than a rendering seam. */
.crest {
  flex: none;
  width: var(--crest-w);
  display: flex;
  align-items: center;
  justify-content: center;
}
.crest.away { box-shadow: inset -1px 0 0 rgba(0, 0, 0, .34); }
.crest.home { box-shadow: inset 1px 0 0 rgba(0, 0, 0, .34); }
.crest img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  /* ESPN's marks are drawn for white backgrounds, and plenty of them are in
   * the team's own primary colour — a navy crest on a navy cap disappears
   * outright. A tight white halo lifts any mark off any cap while leaving the
   * colour showing, which a solid white chip at this size would not. */
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9))
          drop-shadow(0 0 2px rgba(255, 255, 255, .5));
}
/* Dimmer than the winner, but not as far down as the name band goes: a crest
 * that is already a dark mark on a dark colour (Rice, Utah State) stops being
 * readable at all if the losing side fades as hard here as it does there. */
.crest.loser { opacity: .7; }
/* Poll rank sits ahead of the name, as it does on a TV lower-third. */
.side .rk {
  flex: none;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .28);
  font-variant-numeric: tabular-nums;
}
.side[data-light] .rk { background: rgba(255, 255, 255, .32); }
.side .sc { margin-left: auto; font-size: 12px; font-weight: 800; flex: none; font-variant-numeric: tabular-nums; }
.side.loser { opacity: .62; }

/* Single-banner block: a race session or an unbilled fight card, which has no
 * two sides to put in two bands. */
.solo-main {
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.solo-sub {
  background: var(--panel-2);
  color: var(--ink-dim);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Status rail: its own column, so it can never sit on top of a score. */
.status {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0 5px;
  background: rgba(0,0,0,.55);
  color: #dbe4f2;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  /* Cap it so a long network name ("CBS Sports Network") can't squeeze the
   * team names down to nothing. */
  max-width: 66px;
}
.status span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.status.livetag { background: var(--live); color: #fff; }
.status.hottag  { background: var(--hot);  color: #241700; }

.game.tiny .side { font-size: 10px; gap: 3px; padding: 0 3px; }
.game.tiny .side img { width: 16px; height: 16px; padding: 1px; border-radius: 3px; }
.game.tiny .status { display: none; }

.empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--ink-dim);
}
.empty b { color: var(--ink); display: block; margin-bottom: 6px; font-size: 15px; }

.emptyhints {
  display: inline-block;
  margin-top: 18px;
  text-align: left;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.emptyrow {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 4px 0;
}
.emptyrow b {
  display: inline-block;
  margin: 0;
  min-width: 70px;
  font-size: 12px;
  color: var(--ink);
}
.emptyrow em {
  font-style: normal;
  font-size: 12px;
  color: var(--ink-dim);
}

.warn {
  margin: 10px 16px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
  font-size: 12px;
}

/* ---------- view tabs ---------- */

.viewtabs {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.viewtab {
  background: var(--panel-2);
  color: var(--ink-dim);
  border: none;
  padding: 5px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.viewtab + .viewtab { border-left: 1px solid var(--line); }
.viewtab:hover { color: var(--ink); }
.viewtab[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* ---------- week view ---------- */

.week { min-width: 860px; }

.wrow {
  display: grid;
  grid-template-columns: var(--rail-w) repeat(7, minmax(96px, 1fr));
  border-bottom: 1px solid var(--line);
}
.wrow:last-child { border-bottom: none; }

.whead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--rail);
}
.wcorner {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-dim);
  justify-content: center;
  text-align: center;
}
.wday {
  padding: 7px 8px;
  border-left: 1px solid var(--line);
  cursor: pointer;
  line-height: 1.25;
}
.wday:hover { background: var(--hover); }
.wday b { display: block; font-size: 12px; font-weight: 800; }
.wday span { font-size: 10px; color: var(--ink-dim); }
/* Today gets the accent so the week orients itself at a glance. */
.wday.istoday b { color: var(--accent); }
.wday.istoday { box-shadow: inset 0 2px 0 var(--accent); }

.wlabel {
  position: sticky;
  left: 0;
  z-index: 10;
  background: var(--rail);
  border-right: 1px solid var(--line);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wlabel b { font-size: 13px; font-weight: 800; }
.wlabel span { font-size: 10px; color: var(--ink-dim); }

.wcell {
  border-left: 1px solid var(--line);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.wcell.empty { background: repeating-linear-gradient(
  -45deg, transparent, transparent 7px, var(--hatch) 7px, var(--hatch) 14px); }

.wev {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 5px;
  border-radius: 4px;
  background: var(--panel-2);
  border-left: 2px solid var(--edge);
  cursor: pointer;
  font-size: 10.5px;
  line-height: 1.3;
  min-width: 0;
}
.wev:hover { background: var(--hover); }
.wev .wname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.wev .wname i { font-style: normal; color: var(--ink-dim); font-weight: 400; }
.wev .wname em { font-style: normal; font-size: 9px; font-weight: 800; color: var(--accent); }
.wev .wwhen { flex: none; font-size: 9.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

.wev.live { border-left-color: var(--live); }
.wev.live .wwhen { color: var(--live); font-weight: 800; }
.wev.hot { border-left-color: var(--hot); box-shadow: 0 0 0 1px rgba(255,176,32,.5); }
.wev.hot .wwhen { color: var(--hot); }
.wev.done { opacity: .62; }
.wev.waiting { border-left-color: var(--wait); }
.wev.waiting .wwhen { color: var(--wait); font-weight: 800; }

.wmore {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 10px;
  padding: 1px 4px;
  cursor: pointer;
  text-align: left;
}

/* ---------- share / poster view ---------- */

.sharewrap { padding: 16px; }
.sharebar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.sharebar .teaminput { width: 280px; margin: 0; }
.sharemeta { color: var(--ink-dim); font-size: 12px; margin-bottom: 14px; }

/* How much room the poster gives the day. */
.posterscale {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.posterscale select {
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  padding: 5px 6px;
  cursor: pointer;
}

/* The canvas is drawn at a fixed 1200px so the export never changes with the
 * window; this just scales the preview down to fit. */
.posterhold {
  display: inline-block;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.posterhold canvas { display: block; max-width: 100%; height: auto; }

/* ---------- team picker + favourite buttons ---------- */

.teaminput {
  width: 100%;
  margin-bottom: 10px;
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
}
.teamlist { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.teamnote { color: var(--ink-dim); font-size: 12px; padding: 8px 2px; }

.teamrow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 5px;
  padding: 5px 6px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.teamrow:hover { background: var(--panel-2); }
.teamrow img, .teamrow i {
  width: 20px; height: 20px; flex: none;
  object-fit: contain; background: #fff; border-radius: 4px; padding: 1px;
}
.teamrow span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teamrow b { color: var(--ink-dim); font-size: 14px; }
.teamrow.on b { color: var(--fav); }

.teammine {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.teammine b { font-size: 11px; color: var(--ink-dim); margin-right: 4px; }
.teamchip {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
}
.teamchip:hover { border-color: var(--fav); color: var(--fav); }

.favrow { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.favbtn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-dim);
  font: inherit;
  font-size: 11px;
  padding: 3px 9px;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.favbtn:hover { color: var(--ink); border-color: var(--edge); }
.favbtn.on { background: var(--fav); border-color: var(--fav); color: #241a00; font-weight: 700; }

/* ---------- detail sheet ---------- */

.sheet {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  width: min(430px, 100%);
  box-shadow: 0 20px 60px var(--shadow);
}
.card h2 { margin: 0 0 2px; font-size: 17px; }
.card .sub { color: var(--ink-dim); font-size: 12px; margin-bottom: 14px; }
.card dl { display: grid; grid-template-columns: 84px 1fr; gap: 7px 12px; margin: 0 0 16px; font-size: 13px; }
.card dt { color: var(--ink-dim); font-size: 12px; }
.card dd { margin: 0; }
/* Marks the Canada row as a league-level guide rather than this game's
 * actual listing — the distinction matters more than the space it costs. */
.card .hint {
  font-size: 10px;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 4px;
  white-space: nowrap;
}
.card .hint.warnhint { color: var(--warn-accent); border-color: var(--warn-line); }
.card dt { white-space: nowrap; }
.card .actions { display: flex; gap: 8px; justify-content: flex-end; }
.card a.ghost { text-decoration: none; }

/* ---------- stat panel ---------- */

/* Per-league box-score leaders, in the row rail under "★ mine". */
.rowstats {
  margin-top: 3px;
  align-self: flex-start;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-faint);
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 6px;
  cursor: pointer;
  white-space: nowrap;
}
.rowstats:hover { color: var(--ink); border-color: var(--edge); }

/* Wider than the game sheet: a statline is a name, a game and a stat line
   on one row, and wrapping any of them makes the column unreadable. */
.card.statcard { width: min(640px, 100%); }
.statcard .subtoggle { margin: 0 0 12px; }

/* "preseason" under a row's game count. Amber rather than grey: it is a
   caveat about what you're looking at, not more metadata about it. */
.pretag,
.freshtag {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--warn-accent);
}
/* A schedule checked recently is a note, not a warning — it only goes amber
   (.pretag) once it is old enough to be worth doubting. */
.freshtag { color: var(--ink-faint); font-weight: 600; }

/* The Sports panel: one row per sport, ticked when shown. */
.sportlist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.sportrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-dim);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
}
.sportrow:hover { border-color: var(--edge); color: var(--ink); }
.sportrow.on { color: var(--ink); border-color: var(--accent); }
/* Fixed width so the labels line up whether or not a row is ticked. */
.sportrow b { flex: none; width: 14px; color: var(--accent); font-size: 13px; }
.sportrow span { flex: 1; font-weight: 600; }
.sportrow em {
  flex: none;
  font-style: normal;
  font-size: 11px;
  color: var(--ink-faint);
}
/* An off sport reads as off at a glance, not just by the missing tick. */
.sportrow:not(.on) span { opacity: .6; }

/* Period picker: today, or any week the league has played. */
.statweek {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}
.statweek > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.statweek select {
  flex: 1;
  min-width: 0;          /* so a long option label can't stretch the card */
  font-size: 12.5px;
  padding: 5px 8px;
}
.statbody { max-height: min(62vh, 560px); overflow-y: auto; margin-bottom: 12px; }

.statsec { margin-bottom: 16px; }
.statsec:last-child { margin-bottom: 0; }
.statsec h3 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 4px;
}
/* The weights are a judgement call, so they're one hover away, not hidden. */
.statsec h3 em {
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ink-faint);
  border-bottom: 1px dotted var(--edge);
  cursor: help;
}

.statrow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 2px;
  border-bottom: 1px solid var(--line-soft);
}
.statrow:last-child { border-bottom: none; }
.statpos {
  width: 14px;
  flex: none;
  text-align: right;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-faint);
}
/* A white chip behind the crest, as on the grid blocks: college logos are
   drawn for light backgrounds and vanish on this panel without one. */
.statlogo {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  object-fit: contain;
  padding: 2px;
}
.statwho { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.statwho b {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.statwho em {
  font-style: normal;
  font-size: 10px;
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.statlive { color: var(--live); font-weight: 800; letter-spacing: .04em; }
.statline {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
/* An unfinished statline shouldn't read as a final one. */
.statrow.live .statline { color: var(--hot); }

/* The rating, at the end of the row where the eye lands last and can scan the
   column straight down. Tabular figures so 10.3 and 8.0 line up on the point
   rather than jittering against each other. */
.statrating {
  flex: none;
  min-width: 38px;
  padding: 3px 7px;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* Past 10 the scale has been broken rather than topped out, and that is worth
   seeing from across the list — roughly 25 performances in a season. */
.statrating.over {
  color: #fff;
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Full width so it reads as the foot of its own category rather than a stray
   control floating between two lists. */
.statmore {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: none;
  border: 1px dashed var(--line);
  border-radius: 5px;
  color: var(--ink-dim);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 0;
  cursor: pointer;
}
.statmore:hover { color: var(--ink); border-color: var(--edge); border-style: solid; }

/* Narrow screens: drop the stat line onto its own row.
 *
 * `.statline` never shrinks, so on a phone it takes what it needs and the name
 * pays for it — which since the quarterback and running-back lines grew a
 * second group ("18/23, 245 YDS, 4 TD · 2 CAR, 3 YDS") meant names rendering
 * as "Tre…" and "Bij…", and the line clipping mid-word anyway. Below the
 * breakpoint it wraps under the name instead, indented past the rank and
 * crest so the row still reads as one block. */
@media (max-width: 700px) {
  /* Once the bar wraps to four or five rows, its desktop spacing is paying for
     itself several times over — tighten it so the grid still starts near the
     top of the screen. */
  .bar { padding: 8px 10px; gap: 8px; }
  .bar-left, .bar-right { gap: 8px; row-gap: 8px; }
  .bar h1 { font-size: 13px; }

  .statrow { flex-wrap: wrap; row-gap: 2px; }
  .statline {
    flex: 0 0 100%;
    min-width: 0;
    /* Padding, not margin: the global border-box keeps the indent inside the
       100% basis, where a margin would sit on top of it and push every line
       past the edge of the card. */
    padding-left: 54px;           /* .statpos 14 + gap 9 + .statlogo 22 + gap 9 */
    white-space: normal;
  }
}

.statempty { color: var(--ink-dim); font-size: 13px; padding: 18px 2px; text-align: center; }
.statnote { font-size: 10px; color: var(--ink-faint); margin-bottom: 12px; }

/* ------------------------------------------------------------- carousel */

/* Wider than the stats card: the point of the sheet is seeing the slides, and
   three to a row is the most that stays legible on a laptop. */
.carcard { max-width: 920px; }
.carstrip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 2px;
}
.carslide { display: flex; flex-direction: column; gap: 4px; }
.carslide canvas {
  display: block;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.carslide em {
  font-size: 10px;
  font-style: normal;
  color: var(--ink-faint);
  letter-spacing: .03em;
}
.carnote {
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-dim);
}