/* THE SPORTS ROOM — the Sports page (view-sports): the scoreboard strip, the
   row-and-tile scoreboard the drill-ins use, the countdown, the league tables
   and the game-beside-the-table panel. Moved out of app.css on 15 Oct as part
   of the rebuild; same pixels. Loaded straight after app.css (see room-css in
   index.html). What stays in app.css is what other rooms draw with too:
   .sport-row and .sport-badge (Home's tonight line and the Media band),
   .sport-story-img (the Follow story card), and the subject engine's own
   .subj-* classes, which the Follow page uses as well. No rule here carried
   !important, and none was stacked on another for the same selector, so the
   cleanup was the spacing: values that equalled a token now name it. */

  /* THE SPORTS PAGE. Built on the same .wl-card / .wl-panel / .wl-grid the
     watchlist already established for "a card in a grid, a heading above it" —
     one visual language for a card of facts rather than a second one invented
     for this page. */
  .sport-side{ display:flex; align-items:center; gap:var(--space-2); padding:var(--space-1) 0; }
  .sport-side.won .sport-team-name{ font-weight:700; color:var(--text); }
  .sport-logo{ width:22px; height:22px; object-fit:contain; flex:none; }
  .sport-team-name{ font-size:var(--type-body); color:var(--text-dim); flex:1; min-width:0; }
  .sport-score{ font-family:var(--font-mono); font-size:var(--type-lead); font-weight:700; color:var(--text); }
  .sport-live .wl-card-facts{ color:var(--green-text, var(--green)); }

  /* THE COUNTDOWN. Monospaced and tabular because it is a number that changes
     once a second, and proportional digits make the whole line jitter every
     time a 1 becomes a 4. Same reason the scores above it are mono. */
  .sport-count{ font-family:var(--font-mono); font-size:var(--type-title); font-weight:700;
    color:var(--text); letter-spacing:-.01em; margin:var(--space-2) 0 var(--space-hair); font-variant-numeric:tabular-nums; }
  .sport-count-live{ color:var(--green-text, var(--green)); }
  /* NOT AN ALARM. "No date yet" means ESPN has not published the fixture, which
     is ordinary — so it is quieter than a countdown, and never red. */
  .sport-count-none{ font-size:var(--type-lead); font-weight:600; color:var(--text-faint); }

  /* THE TABLE. Its own scroller, so a wide league in a narrow window scrolls
     the table and never the page. */
  .sport-table-wrap{ overflow-x:auto; margin-bottom:var(--space-4); border:1px solid var(--glass-border);
    border-radius:var(--radius-card); background:var(--glass-bg); }
  .sport-table{ width:100%; border-collapse:collapse; font-size:var(--type-body); }
  .sport-table th{ text-align:right; font-size:var(--type-label); font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--text-faint); padding:var(--space-3) var(--space-3);
    border-bottom:1px solid var(--glass-border); white-space:nowrap; }
  .sport-table td{ text-align:right; padding:var(--space-2) var(--space-3); color:var(--text-dim);
    font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap;
    border-bottom:1px solid var(--glass-border); }
  .sport-table tbody tr:last-child td{ border-bottom:0; }
  .sport-table th.sport-th-team, .sport-table td.sport-th-team{ text-align:left; width:99%;
    font-family:inherit; }
  .sport-table td.sport-th-team{ display:flex; align-items:center; gap:var(--space-2); }
  .sport-rank{ font-family:var(--font-mono); font-size:var(--type-label); color:var(--text-faint);
    min-width:18px; flex:none; }
  .sport-table-logo{ width:18px; height:18px; object-fit:contain; flex:none; }
  /* HIS OWN TEAM, PICKED OUT — by three channels rather than by colour alone,
     because several of the twelve themes are pale enough that a tint at this
     size is nearly invisible: a left bar, a heavier weight, and the tint. The
     tint is MIXED against the panel rather than stated as a colour, so it lands
     correctly on the paper themes and the dark ones from one rule. */
  .sport-table tr.sport-mine td{ background:color-mix(in srgb, var(--accent) 13%, transparent);
    color:var(--text); font-weight:650; }
  .sport-table tr.sport-mine td.sport-th-team{ box-shadow:inset 3px 0 0 var(--accent); }
  .sport-table tr.sport-mine .sport-team-name{ color:var(--text); font-weight:700; }

.sb-row{
  display:grid; align-items:center; gap:10px; padding:var(--space-2) var(--space-hair);
  grid-template-columns:110px 1fr 1fr 110px;
  border-bottom:1px solid var(--glass-border);
}
.sb-row:last-child{ border-bottom:0; }
.sb-league{ font-size:var(--type-label); color:var(--text-dim); }
.sb-team{ display:flex; align-items:center; gap:7px; min-width:0; }
.sb-logo{ width:20px; height:20px; object-fit:contain; flex:0 0 auto; }
.sb-name{ font-size:var(--type-body); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-score{ margin-left:auto; font-size:var(--type-lead); font-weight:600; color:var(--text); }
.sb-state{ font-size:var(--type-label); color:var(--text-dim); text-align:right; }
.sb-row.sb-live .sb-state{ color:var(--accent); font-weight:600; }

/* A phone has no room for four columns, and a scoreboard squeezed into one is
   unreadable rather than small. Two lines per game instead. */
@media (max-width: 640px){
  .sb-row{ grid-template-columns:1fr 1fr; row-gap:var(--space-hair); }
  .sb-league{ grid-column:1 / -1; }
  .sb-state{ grid-column:1 / -1; text-align:left; }
}

/* ==========================================================================
   THE SCOREBOARD STRIP — 25 September 2026

   "put each one in a tile like the top row in the image of ESPN. Maybe a
    header (NFL) and then each game, then (MLB) and the games. Not running
    down the page. I envision a carosel that slides to the left and circles
    around. Nothing clickable, just snapshot of scores on top."

   Three things this has to keep being true of it:

   1. IT RUNS ACROSS, NOT DOWN. One row, the height of one tile, scrolling
      sideways inside itself — the page must never gain a sideways scrollbar
      of its own because of it.
   2. THE THREE STATES STAY THREE STATES. A sport with nothing on gets a
      dashed, quiet tile; a sport whose feed never answered gets a solid tile
      in the warning colour with different words in it. House rule 211 is
      about being able to TELL, and a person tells at a glance.
   3. NOTHING IN HERE IS PRESSABLE. No cursor, no hover lift, no outline —
      and no element in the markup that could take a press or a Tab.
   ========================================================================== */
.sb-chips{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:0 0 10px;
}
.sb-chip{
  flex:0 0 auto; font:inherit; font-size:var(--type-label); line-height:1.2;
  padding:var(--space-1) 10px; border-radius:var(--radius-pill);
  border:1px solid var(--glass-border); background:transparent;
  color:var(--text-dim); cursor:pointer;
  transition:border-color .12s ease, color .12s ease;
}
.sb-chip:hover{ border-color:var(--accent); color:var(--text); }
.sb-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sb-chip.on{ border-color:var(--accent); color:var(--text); font-weight:650; }

/* The strip scrolls inside itself, which is what keeps the page from ever
   scrolling sideways. The scrollbar is hidden because the thing scrolls on
   its own; it is still draggable and still takes a wheel or a finger. */
.sb-strip{
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:var(--space-hair) 0 var(--space-1);
}
.sb-strip::-webkit-scrollbar{ height:0; width:0; }

.sb-track{
  display:flex; width:max-content;
  animation:sb-drift 60s linear infinite;
  will-change:transform;
}
/* Halfway is exactly one copy, which is why the seam does not show. */
@keyframes sb-drift{
  from{ transform:translate3d(0, 0, 0); }
  to{ transform:translate3d(-50%, 0, 0); }
}
.sb-strip:hover .sb-track, .sb-track.sb-hold{ animation-play-state:paused; }
/* Everything already fits, so there is nothing to drift past. */
.sb-track.sb-still{ animation:none; transform:none; }
.sb-track.sb-still .sb-copy + .sb-copy{ display:none; }
/* ASKED NOT TO MOVE THINGS, SO NOTHING MOVES. It can still be scrolled by
   hand — the strip keeps its overflow either way. */
@media (prefers-reduced-motion: reduce){
  .sb-track{ animation:none; transform:none; }
}
.sb-copy{ display:flex; align-items:stretch; }

.sb-group{ display:flex; align-items:stretch; gap:var(--space-2); padding-right:var(--space-3); }
.sb-head{
  display:flex; align-items:center; flex:0 0 auto;
  padding-left:var(--space-3); padding-right:var(--space-hair);
  border-left:1px solid var(--glass-border);
}
.sb-head-name{
  font-size:var(--type-label); font-weight:700; letter-spacing:.07em;
  color:var(--text-dim); text-transform:uppercase; white-space:nowrap;
}

/* ONE TILE. Fixed width so the strip is a rhythm rather than a ransom note,
   and a fixed shape so a game, a quiet sport and a dead feed are the same
   size as each other and differ only in the ways that mean something. */
.sb-tile{
  flex:0 0 auto; box-sizing:border-box; width:176px; min-height:84px;
  display:flex; flex-direction:column; align-items:stretch;
  justify-content:center; gap:5px;
  padding:9px 11px;
  border:1px solid var(--glass-border); border-radius:var(--radius-card);
  background:var(--glass-bg); color:var(--text);
  /* Not pressable, and not pretending to be. */
  cursor:default; user-select:none;
}
.sb-tile .sb-state{ text-align:left; }
.sb-tile .sb-logo{ width:16px; height:16px; }
.sb-tile .sb-name{ font-size:var(--type-body); }
.sb-tile .sb-score{ margin-left:auto; font-size:var(--type-lead); }
.sb-rec{ margin-left:auto; font-size:var(--type-label); color:var(--text-dim); }

/* The three tiles that are not games. Different words AND different drawing,
   because the sentence is only half of telling them apart. */
.sb-note{ justify-content:center; }
.sb-note-line{ font-size:var(--type-label); color:var(--text-dim); line-height:1.35; }
.sb-note-empty{ border-style:dashed; }
.sb-note-failed{ border-color:var(--cat-red, var(--accent)); border-style:solid; }
.sb-note-failed .sb-note-line{ color:var(--text); font-weight:600; }
.sb-note-waiting{ opacity:.72; border-style:dashed; }

/* A phone gets the same strip, a little tighter. It is already one line high
   and already scrolls sideways inside itself, so nothing has to be folded. */
@media (max-width: 640px){
  .sb-tile{ width:158px; min-height:80px; padding:var(--space-2) 10px; }
  .sb-group{ gap:7px; padding-right:10px; }
  .sb-head{ padding-left:9px; }
}

/* ==========================================================================
   THE GAME AND THE TABLE, SIDE BY SIDE.      (Worker UI, 25 September 2026)

   "The tables should actually fit next to the Next Up Game (to the right)."
   The countdown keeps a fixed column on the left and the standings grid takes
   everything else, which on his 1728px window is about 1,300 pixels that were
   previously blank. The test this is built against is his: the game, the whole
   table and the START OF THE ARTICLES visible without scrolling.

   IT WRAPS RATHER THAN SQUASHES. Below roughly 1,000px of panel there is no
   honest way to put four division blocks beside a countdown, so the grid drops
   under the card and the blocks reflow — which is the narrow-window layout the
   page had before, minus the sixteen-row tables.
   ========================================================================== */
.sport-top{ display:flex; gap:var(--space-5); align-items:flex-start; flex-wrap:wrap; }
.sport-top-game{ flex:0 0 200px; min-width:0; }
.sport-top-table{ flex:1 1 620px; min-width:0; }

/* The provenance line, in the size the shelf notes use. It is here because
   "From ESPN" has to sit with the numbers it is true of. */
.sport-top-h{ display:flex; align-items:baseline; gap:var(--space-3);
  font-size:var(--type-label); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:var(--space-2); }
.sport-top-h span{ font-weight:500; letter-spacing:0; text-transform:none; opacity:.75; }

.sport-confs{ display:flex; gap:var(--space-5); flex-wrap:wrap; align-items:flex-start; }
.sport-conf{ flex:1 1 300px; min-width:0; }
.sport-conf-name{ font-size:var(--type-label); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-dim); margin:0 0 var(--space-2); }

/* auto-fit rather than auto-fill: a conference with two divisions should fill
   the room it has, not sit in the left half of four empty columns. */
.sport-divs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--space-3); }

/* .sport-table-wrap brings a margin meant for a stack of full-width tables;
   inside the grid the gap already does that job. */
.sport-divs .sport-table-wrap{ margin-bottom:0; }
.sport-div{ border:1px solid var(--glass-border); border-radius:var(--radius-card);
  background:var(--glass-bg); padding:var(--space-2) var(--space-3) var(--space-1);
  min-width:0; }
.sport-div-name{ font-size:var(--type-label); font-weight:700; color:var(--text);
  padding-bottom:var(--space-1); margin-bottom:var(--space-1);
  border-bottom:1px solid var(--glass-border);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sport-mini{ width:100%; border-collapse:collapse; font-size:var(--type-label); }
.sport-mini th{ font-size:var(--type-label); font-weight:700; color:var(--text-dim);
  text-align:right; padding:0 0 var(--space-1) var(--space-2); opacity:.8; }
/* Tabular figures for the same reason the countdown has them: these sit in a
   column and proportional digits make the column ragged. */
.sport-mini td{ text-align:right; padding:var(--space-hair) 0 var(--space-hair) var(--space-2); color:var(--text-dim);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.sport-mini th.sport-mini-team, .sport-mini td.sport-mini-team{ text-align:left; width:99%;
  padding-left:0; }
.sport-mini td.sport-mini-team{ display:flex; align-items:center; gap:var(--space-2);
  min-width:0; color:var(--text); }
.sport-mini-rank{ color:var(--text-faint); font-variant-numeric:tabular-nums;
  min-width:10px; flex:none; }
.sport-mini-logo{ width:15px; height:15px; object-fit:contain; flex:none; }
.sport-mini-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* HIS ROW, IN THE SAME INK THE WIDE TABLE MARKS IT WITH. */
.sport-mini tr.sport-mine td{ background:color-mix(in srgb, var(--accent) 13%, transparent); }
.sport-mini tr.sport-mine td.sport-mini-team{ box-shadow:inset 3px 0 0 var(--accent);
  padding-left:var(--space-2); }
.sport-mini tr.sport-mine .sport-mini-name{ color:var(--text); font-weight:700; }

@media (max-width:900px){
  .sport-top-game{ flex:1 1 100%; }
  .sport-top-table{ flex:1 1 100%; }
}