/* ============================================================================
   MLB Playoffs 2026 — the game list: series header, game row, details panel

   Shared by games.html (every game) and team.html (one team's games), so a
   game looks and behaves the same wherever it's shown. Drawn by mlb-games.js.
   Moved out of games.html on 29 Sep when the team page needed the same rows
   — a second copy would have been a fork (SHARED/components.md).
   ========================================================================== */
/* ── Round → series → game. Tennis grouped by round then day, because a
      tennis round is sixty-four unrelated matches. A baseball round is two
      or four SERIES, and a game only means something inside its series
      (Game 3 at 1–1 is a decider; at 2–0 it is never played). So the series
      is the group, with its state printed on its own header. */
#groups{margin-top:26px;}
.rgroup + .rgroup{margin-top:34px;}
.rtitle{display:block;text-align:center;padding:0 4px 10px;border-bottom:1px solid var(--line);margin-bottom:6px;}
.rtitle b{font-size:17px;font-weight:900;color:#fff;}
.rmeta{text-align:center;font-size:11px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:8px 0 14px;}
.sblock + .sblock{margin-top:18px;}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 7px;}
.shead-n{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);}
.shead-n b{color:#fff;letter-spacing:.04em;}
.shead-s{font-size:11.5px;font-weight:800;color:var(--gold);white-space:nowrap;}
.shead-s.done{color:var(--gold);}
.sblock.hl .grow{border-color:rgba(231,198,107,.3);}
.mlist{display:flex;flex-direction:column;gap:6px;}

/* ── The game row: the US Open's .mrow, a team per line instead of a player,
      runs instead of sets. Left border carries the state colour, as there. */
.grow{display:flex;flex-direction:column;background:rgba(255,255,255,.04);
 border:1px solid var(--line);border-left:3px solid rgba(255,255,255,.16);
 border-radius:10px;overflow:hidden;transition:.14s;scroll-margin-top:150px;}
.grow:hover{background:rgba(255,255,255,.07);border-color:rgba(231,198,107,.38);}
.grow.s-final{border-left-color:var(--gold);}
.grow.s-live{border-left-color:var(--red);border-color:rgba(224,20,43,.5);}
.grow.s-paused{border-left-color:var(--amber);}
.grow.target{box-shadow:0 0 0 2px rgba(231,198,107,.55);}
.g-top{display:flex;align-items:stretch;}
.g-body{flex:1;min-width:0;padding:9px 14px 9px 8px;}
.g-side{display:flex;align-items:center;gap:9px;padding:4px 0;min-width:0;}
.g-side + .g-side{border-top:1px solid rgba(255,255,255,.07);}
.g-seed{flex:none;width:18px;text-align:right;font-size:10px;font-weight:900;color:var(--gold);}
.g-name{flex:1;min-width:0;font-size:15px;font-weight:700;color:var(--mut);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.g-side.win .g-name,.s-live .g-name,.s-paused .g-name{color:#fff;}
.g-side.win .g-name{font-weight:900;}
.g-home{font-size:8.5px;font-weight:800;letter-spacing:.1em;color:var(--soft);margin-left:6px;text-transform:uppercase;}
.g-r{flex:none;width:30px;text-align:right;font-size:18px;font-weight:900;color:var(--soft);font-variant-numeric:tabular-nums;}
.s-live .g-r,.s-paused .g-r{color:#fff;}
.g-side.win .g-r{color:var(--gold);}
.nm-short{display:none;}
.g-meta{flex:none;width:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:4px;padding:8px 6px;border-left:1px solid var(--line);background:rgba(6,18,42,.35);text-align:center;}
.g-when{font-size:9.5px;font-weight:800;color:var(--soft);letter-spacing:.04em;}
.g-time{font-size:11.5px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;}
.g-meta .sit{flex-wrap:wrap;justify-content:center;gap:5px 6px;}
.g-meta .sit .inn{flex:0 0 100%;text-align:center;}
.g-no{font-size:8.5px;font-weight:800;letter-spacing:.05em;color:var(--soft);}
.g-open{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;cursor:pointer;
 background:rgba(231,198,107,.08);border:0;border-top:1px solid rgba(231,198,107,.22);
 color:var(--gold);padding:9px 12px;transition:.15s;}
.g-open span{font-size:9.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;line-height:1;}
.g-open svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .2s;}
.g-open[aria-expanded="true"] svg{transform:rotate(90deg);}
.g-open:hover,.grow:hover .g-open{background:rgba(231,198,107,.16);}
.g-open:hover{color:#fff;}
.g-open:focus-visible{outline:2px solid var(--gold);outline-offset:-3px;}
/* The details open DOWNWARD, into space nobody is pointing at — the row the
   reader pressed stays exactly where it was (design-principles §1). */
.g-more{padding:14px 14px 16px;border-top:1px solid var(--line);background:rgba(6,18,42,.4);}
.g-more[hidden]{display:none;}
.ls-wrap{overflow-x:auto;scrollbar-width:thin;}
.ls{border-collapse:collapse;margin:0 auto;font-variant-numeric:tabular-nums;}
.ls th,.ls td{padding:5px 0;width:26px;text-align:center;font-size:12px;}
.ls th{font-size:9.5px;font-weight:800;color:var(--soft);letter-spacing:.04em;}
.ls td{font-weight:700;color:var(--mut);border-top:1px solid rgba(255,255,255,.07);}
.ls .t{font-weight:900;color:#fff;width:30px;}
.ls th.t{color:var(--gold);}
.ls td.tm{width:46px;text-align:left;}
.ls tr.win .t:nth-last-child(3){color:var(--gold);}
.ls td.t:nth-last-child(3){border-left:1px solid var(--line);}
.facts-line{margin-top:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;
 font-size:11.5px;color:var(--mut);line-height:1.5;}
.facts-line b{color:#fff;font-weight:800;}
.facts-line .k{font-size:9px;font-weight:900;letter-spacing:.1em;color:var(--gold);margin-right:5px;}
.ghost{padding:14px 16px;border:1px dashed rgba(255,255,255,.14);border-radius:10px;text-align:center;
 font-size:12.5px;color:var(--soft);line-height:1.55;}
.ghost b{color:var(--mut);}
@media(max-width:560px){
 .g-body{padding:9px 10px 9px 6px;}
 .nm-full{display:none;} .nm-short{display:inline;}
 .g-name{font-size:13.5px;}
 .g-side{gap:6px;}
 .g-meta{width:84px;padding:6px 4px;}
 .g-home{display:none;}
 .shead{flex-direction:column;gap:3px;align-items:flex-start;}
 .ls th,.ls td{width:21px;font-size:11px;}
}