/* ==========================================================================
   hi-recap.css — "Last night around the league", the live-day desk.
   --------------------------------------------------------------------------
   Three objects, in this order, because that is the order a reader wants a
   night in:

     1. THE SCORES RAIL. One compact card per game: both crests, the score,
        an OT/SO badge, the winning goalie. Hovering or focusing a card
        FILTERS the boards beneath it to that game.
     2. THE BOARDS. Ten five-deep mini-tables in a 5x2 grid, each a single
        published count with a mug (monogram floor).
     3. THE NIGHT. Two figures (goals per game, shots per game) and the
        one-line superlatives.

   HOUSE LAW OBSERVED HERE
     - NO COLOUR ON A RESULT. A win is not "good". The OT/SO badge is ink on
       card, the winning side is marked with weight and a rule, never mint.
       Mint appears once, on the filter chip, to say "a filter is active" —
       that is a state, not a judgement.
     - NO ITALICS anywhere; every <em>/<i> is reset upright.
     - NO GOLD. The gold clock glyph belongs to the host page's .asof.
     - NO COUNT-UP. Figures paint final.
     - Contrast: labels read the canonical --hi-muted, not today.css's own
       --muted (#7d8fa6 measures ~3.0:1 on this card).

   Tokens read the host page's local names first and fall through to the
   canonical --hi- token, the same cascade hi-states.css and
   hi-milestones.css use. Load AFTER hi-tokens.css and the page's own sheet.
   ========================================================================== */
:root{
  --rc-ink:    var(--ink,      var(--hi-ink, #0d1f3c));
  --rc-ink-2:  var(--ink2,     var(--hi-ink-2, #28405f));
  --rc-muted:  var(--hi-muted, #556a80);
  --rc-hair:   var(--hairline, var(--hi-hair, #e4dac7));
  --rc-line:   var(--border,   var(--hi-line, #d7cbb7));
  --rc-card:   var(--card,     var(--hi-surface-1, #fffaf1));
  --rc-card-2: var(--card2,    var(--hi-surface-2, #f7f1e2));
  --rc-blue:   var(--blue,     var(--hi-blue, #1f5fbf));
  --rc-blue-soft: var(--blue-soft, var(--hi-blue-soft, #e5edfb));
  --rc-mint:   var(--mint,     var(--hi-mint, #23705a));
  --rc-serif:  var(--serif,    var(--hi-serif, 'Newsreader', Georgia, serif));
  --rc-sans:   var(--sans,     var(--hi-sans, 'Source Sans 3', system-ui, sans-serif));
  --rc-mono:   var(--mono,     var(--hi-mono, 'JetBrains Mono', ui-monospace, monospace));
}

.hi-rc{display:block}
.hi-rc em,.hi-rc i,.hi-rc cite{font-style:normal}

/* --- the state / toggle bar ---------------------------------------------- */
.hi-rc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 14px}
.hi-rc-when{font-family:var(--rc-serif);font-weight:700;font-size:1.02rem;line-height:1.2;
  color:var(--rc-ink);margin:0}
.hi-rc-when small{display:block;font-family:var(--rc-mono);font-size:.55rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--rc-muted);margin-top:3px}

.hi-rc-seg{display:inline-flex;border:1px solid var(--rc-line);border-radius:999px;
  background:var(--rc-card);overflow:hidden;margin-left:auto}
.hi-rc-seg button{appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--rc-mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rc-ink-2);padding:8px 14px;
  transition:background-color .16s,color .16s}
.hi-rc-seg button + button{border-left:1px solid var(--rc-line)}
.hi-rc-seg button[aria-pressed="true"]{background:var(--rc-ink);color:var(--rc-card)}
.hi-rc-seg button:focus-visible{outline:2px solid var(--rc-blue);outline-offset:-2px}

/* --- the scores rail ----------------------------------------------------- */
.hi-rc-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(214px,1fr);
  gap:12px;overflow-x:auto;padding:2px 2px 12px;scroll-snap-type:x proximity;
  overscroll-behavior-x:contain}
.hi-rc-rail::-webkit-scrollbar{height:8px}
.hi-rc-rail::-webkit-scrollbar-thumb{background:var(--rc-line);border-radius:999px}

.hi-rc-game{scroll-snap-align:start;text-align:left;appearance:none;cursor:pointer;
  border:1px solid var(--rc-line);border-radius:13px;background:var(--rc-card);
  padding:11px 12px 10px;display:grid;gap:7px;position:relative;overflow:hidden;
  color:inherit;font-family:var(--rc-sans);transition:border-color .16s,background-color .16s}
.hi-rc-game:hover,.hi-rc-game:focus-visible{border-color:var(--rc-blue);
  background:var(--rc-blue-soft)}
.hi-rc-game:focus-visible{outline:2px solid var(--rc-blue);outline-offset:2px}
.hi-rc-game[aria-pressed="true"]{border-color:var(--rc-mint);
  box-shadow:inset 0 0 0 1px var(--rc-mint)}

.hi-rc-gtop{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hi-rc-gk{font-family:var(--rc-mono);font-size:.5rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--rc-muted)}
/* OT / SO in INK. A game reaching overtime is not a good or a bad thing. */
.hi-rc-badge{font-family:var(--rc-mono);font-size:.5rem;font-weight:700;letter-spacing:.12em;
  color:var(--rc-ink);background:var(--rc-card-2);border:1px solid var(--rc-line);
  border-radius:999px;padding:2px 7px}

.hi-rc-side{display:grid;grid-template-columns:22px 1fr auto;gap:9px;align-items:center}
.hi-rc-crest{width:22px;height:22px;display:block}
.hi-rc-side img{width:22px;height:22px;object-fit:contain}
.hi-rc-side b{font-family:var(--rc-sans);font-size:.82rem;font-weight:700;color:var(--rc-ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hi-rc-side s{font-family:var(--rc-serif);font-weight:700;font-size:1.16rem;line-height:1;
  color:var(--rc-ink-2);text-decoration:none;font-variant-numeric:tabular-nums}
/* the winning side carries WEIGHT, not colour */
.hi-rc-side.is-win b{font-weight:900;color:var(--rc-ink)}
.hi-rc-side.is-win s{color:var(--rc-ink)}
.hi-rc-gfoot{font-family:var(--rc-mono);font-size:.5rem;font-weight:600;letter-spacing:.06em;
  color:var(--rc-muted);border-top:1px solid var(--rc-hair);padding-top:6px;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The card and its game-page link share one rail cell. The link sits
   OUTSIDE the button because a link cannot nest inside one. */
.hi-rc-gwrap{display:grid;grid-template-rows:1fr auto;gap:5px;align-content:start}
.hi-rc-gplink{font-family:var(--rc-mono);font-size:.5rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--rc-blue);
  text-decoration:none;padding:3px 2px;border-bottom:1px solid transparent}
.hi-rc-gplink:hover,.hi-rc-gplink:focus-visible{border-bottom-color:var(--rc-blue)}

/* --- last games on file: the /games/ route, reachable in the offseason --- */
.hi-rc-games{margin:0 0 18px}
.hi-rc-gpnote{margin:0 0 8px;font-family:var(--rc-mono);font-size:.5rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--rc-muted)}
.hi-rc-gplist{display:flex;flex-wrap:wrap;gap:7px}
.hi-rc-gpchip{font-family:var(--rc-mono);font-size:.55rem;font-weight:700;letter-spacing:.06em;
  color:var(--rc-ink);text-decoration:none;border:1px solid var(--rc-line);border-radius:999px;
  background:var(--rc-card);padding:5px 11px}
.hi-rc-gpchip:hover,.hi-rc-gpchip:focus-visible{border-color:var(--rc-blue);color:var(--rc-blue)}

/* --- the filter notice --------------------------------------------------- */
.hi-rc-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:2px 0 14px;
  font-family:var(--rc-mono);font-size:.56rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rc-muted)}
.hi-rc-filter.is-on{color:var(--rc-mint)}
.hi-rc-filter button{appearance:none;border:1px solid var(--rc-line);border-radius:999px;
  background:var(--rc-card);cursor:pointer;font:inherit;letter-spacing:.1em;
  color:var(--rc-ink-2);padding:4px 10px}
.hi-rc-filter button:focus-visible{outline:2px solid var(--rc-blue);outline-offset:2px}

/* --- the two night figures ---------------------------------------------- */
.hi-rc-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;
  margin:0 0 16px}
.hi-rc-fig{border:1px solid var(--rc-line);border-radius:13px;background:var(--rc-card);
  padding:13px 14px;display:grid;gap:2px}
.hi-rc-fig b{font-family:var(--rc-serif);font-weight:700;font-size:2rem;line-height:1;
  color:var(--rc-ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hi-rc-fig span{font-family:var(--rc-sans);font-size:.8rem;font-weight:700;color:var(--rc-ink-2)}
.hi-rc-fig small{font-family:var(--rc-mono);font-size:.52rem;font-weight:600;letter-spacing:.08em;
  color:var(--rc-muted);line-height:1.5}

/* --- the superlatives, one line each ----------------------------------- */
.hi-rc-facts{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:0;
  border:1px solid var(--rc-line);border-radius:13px;background:var(--rc-card);overflow:hidden}
.hi-rc-facts li{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:baseline;
  padding:10px 14px;border-bottom:1px solid var(--rc-hair)}
.hi-rc-facts li:last-child{border-bottom:0}
.hi-rc-facts i{font-family:var(--rc-mono);font-size:.52rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--rc-muted)}
.hi-rc-facts b{font-family:var(--rc-sans);font-size:.86rem;font-weight:700;color:var(--rc-ink);
  line-height:1.4}
.hi-rc-facts b span{font-weight:400;color:var(--rc-ink-2)}

/* --- the 5x2 board grid ------------------------------------------------- */
.hi-rc-boards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1180px){ .hi-rc-boards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .hi-rc-boards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:430px){ .hi-rc-boards{grid-template-columns:1fr} }

.hi-rc-board{border:1px solid var(--rc-line);border-radius:13px;background:var(--rc-card);
  padding:12px 11px 8px;position:relative;overflow:hidden;min-width:0}
.hi-rc-board h4{margin:0;font-family:var(--rc-serif);font-weight:700;font-size:.92rem;
  line-height:1.15;color:var(--rc-ink)}
.hi-rc-board p.hi-rc-bsub{margin:3px 0 9px;font-family:var(--rc-mono);font-size:.5rem;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--rc-muted)}
.hi-rc-wm{position:absolute;right:9px;top:0;font-family:var(--rc-serif);font-weight:700;
  font-size:3.2rem;line-height:1;color:var(--rc-ink);opacity:.05;pointer-events:none;
  user-select:none}

.hi-rc-row{display:grid;grid-template-columns:12px 26px 1fr auto;gap:7px;align-items:center;
  padding:6px 2px;border-bottom:1px solid var(--rc-hair);color:inherit;text-decoration:none;
  border-radius:8px;position:relative;z-index:1;transition:background-color .16s}
.hi-rc-row:last-child{border-bottom:0}
.hi-rc-row:hover,.hi-rc-row:focus-visible{background-color:var(--rc-blue-soft)}
.hi-rc-row:focus-visible{outline:2px solid var(--rc-blue);outline-offset:1px}
.hi-rc-rk{font-family:var(--rc-mono);font-size:.55rem;font-weight:700;color:var(--rc-muted);
  font-style:normal}

/* the mug. Monogram first; the portrait is preloaded off-DOM by hi-recap.js
   and appended only once it loads, because this site deletes any <img> that
   404s. The initials are the floor, never a grey box. */
.hi-rc-mug{width:26px;height:26px;border-radius:50%;position:relative;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--rc-tc, #1f5fbf) 24%, var(--rc-card));
  border:1px solid color-mix(in srgb, var(--rc-tc, #1f5fbf) 52%, transparent)}
@supports not (background:color-mix(in srgb,red 20%,blue)){
  .hi-rc-mug{background:var(--rc-card-2);border:1px solid var(--rc-line)}
}
.hi-rc-mug em{font-family:var(--rc-mono);font-style:normal;font-size:.46rem;font-weight:700;
  color:var(--rc-ink)}
.hi-rc-mug img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:50%;background:var(--rc-card-2)}

.hi-rc-who{min-width:0;display:flex;flex-direction:column;gap:1px}
.hi-rc-who strong{font-family:var(--rc-sans);font-size:.76rem;font-weight:800;line-height:1.2;
  color:var(--rc-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hi-rc-row:hover .hi-rc-who strong{color:var(--rc-blue)}
.hi-rc-who small{font-family:var(--rc-mono);font-size:.48rem;font-weight:600;letter-spacing:.06em;
  color:var(--rc-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hi-rc-val{font-family:var(--rc-serif);font-weight:700;font-size:1.02rem;line-height:1;
  color:var(--rc-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.hi-rc-val small{font-family:var(--rc-mono);font-size:.44rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rc-muted);margin-left:3px}

.hi-rc-bempty{margin:4px 2px 10px;font-family:var(--rc-sans);font-size:.74rem;
  color:var(--rc-muted);line-height:1.4}
.hi-rc-foot{margin:14px 2px 0;font-family:var(--rc-mono);font-size:.52rem;font-weight:600;
  letter-spacing:.06em;color:var(--rc-muted);line-height:1.6}

@media (max-width:600px){
  .hi-rc-facts li{grid-template-columns:1fr;gap:3px}
  .hi-rc-seg{margin-left:0}
  .hi-rc-rail{grid-auto-columns:minmax(196px,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .hi-rc-game,.hi-rc-row,.hi-rc-seg button{transition:none}
  .hi-rc-rail{scroll-behavior:auto;scroll-snap-type:none}
}

/* --- the angles: tonight's checkable player facts ------------------------
   Hometown return/visit, former team (folds in drafted-by), DNP last game.
   Narrows with the same hovered/pinned state as the boards. No colour on
   the type — mint/coral only means "filter active" elsewhere on this desk,
   and a former team is not good or bad, so every chip is ink-on-card. */
.hi-rc-angles{margin:0 0 16px}
.hi-rc-angle-h{margin:0 0 8px;font-family:var(--rc-serif);font-weight:700;font-size:.98rem;
  color:var(--rc-ink);display:flex;align-items:baseline;gap:8px}
.hi-rc-angle-h small{font-family:var(--rc-mono);font-size:.5rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rc-muted)}
.hi-rc-angle-rail{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.hi-rc-angle{display:grid;grid-template-columns:auto auto;gap:2px 7px;align-items:baseline;
  border:1px solid var(--rc-line);border-radius:10px;background:var(--rc-card);
  padding:6px 10px;color:inherit;text-decoration:none;font-family:var(--rc-sans);
  max-width:100%;transition:border-color .16s,background-color .16s}
.hi-rc-angle:hover,.hi-rc-angle:focus-visible{border-color:var(--rc-blue);background:var(--rc-blue-soft)}
.hi-rc-angle:focus-visible{outline:2px solid var(--rc-blue);outline-offset:2px}
.hi-rc-angle i{grid-column:1/3;font-style:normal;font-family:var(--rc-mono);font-size:.46rem;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--rc-muted)}
.hi-rc-angle b{font-weight:800;font-size:.78rem;color:var(--rc-ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:150px}
.hi-rc-angle small{font-family:var(--rc-mono);font-size:.5rem;font-weight:600;letter-spacing:.05em;
  color:var(--rc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.hi-rc-angle-empty{margin:0 0 10px;font-family:var(--rc-sans);font-size:.76rem;
  color:var(--rc-muted);line-height:1.45}
.hi-rc-angle-board{border:1px solid var(--rc-line);border-radius:13px;background:var(--rc-card);
  padding:11px 13px;display:inline-grid;gap:5px;min-width:220px;margin:0 0 8px}
.hi-rc-angle-board h5{margin:0 0 2px;font-family:var(--rc-serif);font-weight:700;font-size:.8rem;
  color:var(--rc-ink)}
.hi-rc-angle-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-family:var(--rc-sans);font-size:.72rem;color:var(--rc-ink-2)}
.hi-rc-angle-row b{font-family:var(--rc-serif);font-weight:700;color:var(--rc-ink);
  font-variant-numeric:tabular-nums}
.hi-rc-angle-total{margin:2px 0 0;font-family:var(--rc-mono);font-size:.5rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--rc-muted)}
.hi-rc-angle-receipt{margin:2px 2px 0;font-family:var(--rc-mono);font-size:.5rem;font-weight:600;
  letter-spacing:.05em;color:var(--rc-muted);line-height:1.6}
@media (max-width:600px){
  .hi-rc-angle b,.hi-rc-angle small{max-width:120px}
}

/* the league's box — opens under the rail when a score card is pinned */
.hi-rc-box{margin:12px 0 0;padding:14px 16px;border:1px solid var(--hi-line);border-radius:14px;background:var(--hi-surface-1)}
.hi-rc-bx-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;margin:0 0 10px;padding:0 0 8px;border-bottom:1px solid var(--hi-hair)}
.hi-rc-bx-t{font-family:var(--hi-serif);font-size:1.02rem;font-weight:600;color:var(--hi-ink)}
.hi-rc-bx-src{font-family:var(--hi-mono);font-size:.55rem;letter-spacing:.06em;color:var(--hi-muted)}
.hi-rc-bx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 22px}
.hi-rc-bx-k{margin:0 0 6px;font-family:var(--hi-mono);font-size:.55rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hi-blue)}
.hi-rc-bx-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--hi-hair);font-size:.76rem;color:var(--hi-ink)}
.hi-rc-bx-row:last-child{border-bottom:0}
.hi-rc-bx-row small{color:var(--hi-muted);font-family:var(--hi-mono);font-size:.58rem;letter-spacing:.06em}
.hi-rc-bx-row em{font-style:normal;font-family:var(--hi-mono);font-size:.7rem;font-weight:700;color:var(--hi-ink);white-space:nowrap;text-align:right}
.hi-rc-bx-row em i{font-style:normal;color:var(--hi-muted);padding:0 2px}
.hi-rc-bx-row em a{color:var(--hi-blue);text-decoration:none;border-bottom:1px solid currentColor}
.hi-rc-bx-row em a:hover,.hi-rc-bx-row em a:focus-visible{background:var(--hi-blue);color:#fff;border-color:transparent;outline:none;padding:0 4px;border-radius:3px}
.hi-rc-noclip{color:var(--hi-muted);font-weight:600}
.hi-rc-star,.hi-rc-per{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--hi-ink);color:var(--hi-surface-1);font-family:var(--hi-mono);font-size:.55rem;font-weight:800}
.hi-rc-per{background:var(--hi-surface-2);color:var(--hi-ink)}
.hi-rc-bx-wait,.hi-rc-bx-none{margin:0;font-size:.78rem;color:var(--hi-muted)}
@media (max-width:820px){.hi-rc-bx-grid{grid-template-columns:minmax(0,1fr)}}