/*
  The components. Requires tokens.css.
  Class names are prefixed sl- and written as blocks (sl-ticket) with elements
  (sl-ticket__stub) and modifiers (sl-cap--xl). State classes: is-mine, is-win,
  is-loss, is-dirty. Team colours arrive as inline custom properties:
  style="--c1:#25224f;--c2:#f2b632". The web app (web/src) writes this markup.
*/

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.gr {
  --rk-surface: var(--rk-paper-1);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* The ice: cool white, faint skate cuts across it. */
  background-color: var(--rk-paper-1);
  background-image:
    repeating-linear-gradient(-22deg, transparent 0 46px, var(--rk-skate-cut) 46px 47px, transparent 47px 120px),
    repeating-linear-gradient(17deg, transparent 0 80px, var(--rk-skate-cut-2) 80px 81px, transparent 81px 190px);
  font-variant-numeric: tabular-nums;
  color: var(--rk-ink-1);
  font: 400 var(--rk-fs-body)/var(--rk-lh-body) var(--rk-font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
b, strong { font-weight: 700; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--rk-blue-ink); }

:focus-visible { outline: 3px solid var(--rk-blue); outline-offset: 2px; }
.sl-board :focus-visible, .sl-masthead :focus-visible { outline-color: var(--rk-lamp); }

abbr[title] { text-decoration: none; cursor: help; }
.sl-nowrap { white-space: nowrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sl-skip {
  position: absolute; left: var(--rk-s3); top: -60px; z-index: 20;
  padding: var(--rk-s2) var(--rk-s3); background: var(--rk-lamp); color: var(--rk-ink-1);
  font: 700 var(--rk-fs-small)/1 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; text-decoration: none;
}
.sl-skip:focus { top: var(--rk-s3); }

/* ------------------------------------------------------------------ layout */
.sl-page {
  flex: 1;
  width: 100%;
  max-width: var(--rk-page-max);
  margin: 0 auto;
  padding: var(--rk-s5) var(--rk-gutter) var(--rk-s8);
  display: grid;
  gap: var(--rk-s7);
  align-content: start;
}
.sl-page--wide { max-width: var(--rk-page-wide); }

/* Grid children may shrink, so wide tables scroll inside their wrapper instead of widening the page. */
.sl-page > *, .sl-split > *, .sl-stack > *, .sl-box > *, .sl-standings-grid > *, .sl-press__items > *, .sl-books > *, .sl-player > *, .sl-scout__cols > * { min-width: 0; }
.sl-split { display: grid; gap: var(--rk-s6); align-items: start; }
.sl-stack { display: grid; gap: var(--rk-s5); align-content: start; }
.sl-stack--loose { gap: var(--rk-s7); }

@media (max-width: 999px) {
  /* On a phone the owner's next game (the thing to act on) comes before the league's finals. */
  .sl-split--home > .sl-ticket { order: -1; }
}

@media (min-width: 1000px) {
  .sl-split { grid-template-columns: minmax(0, 1fr) 380px; }
  .sl-split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
}

/* ------------------------------------------------------------------ masthead */
/* The navy boards with the yellow kickplate along their foot. */
.sl-masthead {
  position: relative;
  background: var(--rk-ink-1);
  color: var(--rk-chalk-1);
  border-bottom: 6px solid var(--rk-lamp);
  box-shadow: inset 0 -2px 0 var(--rk-kick-edge);
}

.sl-masthead__inner {
  max-width: var(--rk-page-max);
  margin: 0 auto;
  padding: var(--rk-s2) var(--rk-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--rk-s5);
  row-gap: var(--rk-s1);
  min-height: 60px;
}

.sl-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rk-chalk-1);
  font: 400 1.4rem/1 var(--rk-font-varsity);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.sl-wordmark__mark { width: 36px; height: 36px; flex: none; }
.sl-wordmark:hover { color: var(--rk-chalk-1); }

.sl-nav, .sl-nav__group { display: flex; gap: 2px; }
.sl-nav { flex-wrap: wrap; }          /* narrower than the page, the groups wrap rather than run off it */
/* a hairline between the groups of tabs: the games, running the club, the market, the admin */
.sl-nav__group + .sl-nav__group::before { content: ''; flex: none; align-self: center; width: 1px; height: 18px; margin: 0 4px; background: var(--rk-chalk-2); opacity: 0.35; }
.sl-nav a {
  display: block;
  flex: none;
  white-space: nowrap;
  padding: 12px 5px 9px;               /* fourteen tabs and the club's badge on one line at the page's width */
  color: var(--rk-chalk-2);
  font: 700 0.86rem/1 var(--rk-font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.sl-nav a:hover { color: var(--rk-chalk-1); }
.sl-nav a[aria-current='page'] { color: var(--rk-chalk-1); border-bottom-color: var(--rk-stitch); }
.sl-nav a.sl-nav__market, .sl-nav a.sl-nav__market:hover { color: var(--rk-lamp); }   /* the market, lit up */

.sl-club {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--rk-s2);
  padding: 4px 10px 4px 4px;
  border: 1px solid transparent;
  color: var(--rk-chalk-1);
  text-decoration: none;
}
.sl-club:hover { color: var(--rk-chalk-1); border-color: var(--rk-board-edge); }
.sl-club__abbr { font: 700 1.05rem/1 var(--rk-font-display); letter-spacing: 0.08em; }
.sl-club__rec { font: 600 var(--rk-fs-small)/1 var(--rk-font-data); color: var(--rk-chalk-2); font-variant-numeric: tabular-nums; }

/* The season's strip: white boards under the kickplate. */
.sl-strip {
  background: var(--rk-paper-0);
  color: var(--rk-ink-2);
  border-bottom: 1px solid var(--rk-rule-1);
  font: 700 0.86rem/1.2 var(--rk-font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sl-strip__inner {
  max-width: var(--rk-page-max);
  margin: 0 auto;
  padding: 7px var(--rk-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
/* The next game day: a blue dot; late, the goal light goes red (the banner under the strip says why);
   paused, an empty ring. */
.sl-strip__live { color: var(--rk-blue-ink); }
.sl-strip__live::before,
.sl-strip__paused::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin: 0 7px 1px 0;
  border-radius: 50%;
  background: var(--rk-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rk-blue) 18%, transparent);
}
.sl-strip__live.is-late { color: var(--rk-stitch-ink); }
.sl-strip__live.is-late::before { background: var(--rk-stitch); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rk-stitch) 18%, transparent); }
.sl-strip__onair { color: var(--rk-stitch-ink); text-decoration: none; }
.sl-strip__onair::before { content: ''; margin: 0 7px 1px 0; }
.sl-strip__paused { color: var(--rk-ink-1); }
.sl-strip__paused::before { background: none; box-shadow: inset 0 0 0 1.5px var(--rk-ink-3); }

/* Too narrow for the menu between the wordmark and the club: the menu takes a row of its own under them. */
@media (max-width: 1229px) {
  .sl-nav { order: 3; flex: 1 1 100%; }
}
@media (max-width: 719px) {
  .sl-masthead__inner { column-gap: var(--rk-s3); padding-top: var(--rk-s2); padding-bottom: 0; }
  .sl-wordmark { font-size: 1.5rem; }
  .sl-nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; margin: 0 calc(var(--rk-gutter) * -1); padding: 0 calc(var(--rk-gutter) - 12px); overflow-x: auto; scrollbar-width: none; }
  .sl-nav a { padding: 12px 12px 10px; }
  .sl-strip__inner { gap: 4px 12px; }
}

/* ------------------------------------------------------------------ type helpers */
.sl-eyebrow {
  font: 700 0.82rem/1.2 var(--rk-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rk-stitch-ink);
}
.sl-eyebrow a { text-decoration: none; }
.sl-eyebrow a:hover { text-decoration: underline; }

/* A page's title in sweater letters. */
.sl-title {
  font: 400 var(--rk-fs-h1)/0.95 var(--rk-font-varsity);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.sl-pagehead { display: grid; gap: var(--rk-s2); }
.sl-pagehead--split { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--rk-s5); }
.sl-pagehead--split > :not(.sl-ladder) { grid-column: 1; }
/* The ladder beside a level's name: its levels top first, this one lit, the rest a click away. */
.sl-ladder { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 6px; min-width: 128px; }
.sl-ladder ol { display: grid; gap: 4px; }
.sl-ladder__rung > a, .sl-ladder__rung > span {
  display: block;
  padding: 5px 10px 3px;
  background: var(--rk-paper-0);
  border: 2px solid var(--rk-rule-2);
  font: 700 0.86rem/1.2 var(--rk-font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--rk-ink-2);
}
.sl-ladder__rung > a:hover { border-color: var(--rk-ink-1); color: var(--rk-ink-1); }
.sl-ladder__rung.is-here > a { background: var(--rk-ink-1); border-color: var(--rk-ink-1); color: var(--rk-chalk-1); box-shadow: inset 0 -3px 0 var(--rk-lamp); }
.sl-ladder__rung.is-opening > span { border-style: dashed; color: var(--rk-ink-3); }
.sl-ladder__rung small { display: block; margin-top: 2px; font: 500 var(--rk-fs-label)/1.2 var(--rk-font-data); color: var(--rk-ink-3); text-align: center; }
.sl-ladder__all { font: 700 0.82rem/1.2 var(--rk-font-display); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; color: var(--rk-blue-ink); }
@media (max-width: 559px) { .sl-ladder { min-width: 104px; } }

/* A section's head: rink-board caps over the yellow kickplate. */
.sl-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rk-s1) var(--rk-s4);
  padding-bottom: 8px;
  margin-bottom: var(--rk-s4);
  border-bottom: 4px solid var(--rk-lamp);
}
.sl-section-head h2 {
  font: 800 var(--rk-fs-h2)/1 var(--rk-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sl-section-head__meta {
  font: 700 0.82rem/1.2 var(--rk-font-display);
  letter-spacing: var(--rk-track-caps);
  text-transform: uppercase;
  color: var(--rk-ink-3);
}
.sl-section-head__meta a { color: var(--rk-blue-ink); }

.sl-subhead {
  font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rk-ink-2);
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--rk-rule-2);
}

/* ------------------------------------------------------------------ team marks */
.sl-cap {
  --size: 26px;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--c1, var(--rk-ink-1));
  color: var(--c2, var(--rk-paper-0));
  /* the crest: a roundel in the sweater colour, the trim as its ring, the letter in varsity block */
  box-shadow: inset 0 0 0 max(1.5px, calc(var(--size) * 0.06)) var(--c2, var(--rk-paper-0)), 0 0 0 1px var(--rk-rule-2);
  font: 400 calc(var(--size) * 0.5)/1 var(--rk-font-varsity);
  text-transform: uppercase;
}
.sl-cap--sm { --size: 20px; }
.sl-cap--md { --size: 34px; }
.sl-cap--lg { --size: 52px; box-shadow: inset 0 0 0 3px var(--c2, var(--rk-paper-0)), var(--rk-shadow-magnet); }
.sl-cap--xl { --size: 92px; box-shadow: inset 0 0 0 4px var(--c2), inset 0 0 0 7px var(--c1), inset 0 0 0 8.5px var(--c2), var(--rk-shadow-lift); }
.sl-board .sl-cap { box-shadow: inset 0 0 0 max(1.5px, calc(var(--size) * 0.06)) var(--c2, var(--rk-paper-0)); }

.sl-teamlink {
  display: inline-flex;
  align-items: center;
  gap: var(--rk-s2);
  text-decoration: none;
  font-weight: 600;
  min-width: 0;
}
.sl-teamlink:hover .sl-teamlink__name { text-decoration: underline; }
.sl-teamlink__nick { font-weight: 400; color: var(--rk-ink-2); }

/* ------------------------------------------------------------------ scoreboard */
/* The scoreboard over center ice: black housing in a dark frame, lettering in cool white. */
.sl-board {
  --rk-surface: var(--rk-board-1);
  position: relative;
  color: var(--rk-chalk-1);
  background: var(--rk-board-1);
  border: 6px solid var(--rk-board-3);
  box-shadow: var(--rk-shadow-board);
  padding: var(--rk-s4) var(--rk-s4) var(--rk-s5);
}
.sl-board a { color: inherit; }

.sl-board__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rk-s1) var(--rk-s4);
  padding-bottom: var(--rk-s3);
  margin-bottom: var(--rk-s4);
  border-bottom: 2px solid var(--rk-board-3);
}
.sl-board__title {
  font: 800 1.45rem/1 var(--rk-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rk-chalk-1);
}
.sl-board__sub {
  font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rk-chalk-3);
}

/* A figure on the board: LED segments behind black glass, red when lit, amber for the clock. */
.sl-plate {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 1.7em;
  height: 1.7em;
  padding: 0.08em 0.22em 0;
  background: var(--rk-board-2);
  color: var(--rk-chalk-2);
  border: 1px solid var(--rk-board-3);
  font: 400 1.45rem/1 var(--rk-font-led);
  font-variant-numeric: tabular-nums;
}
.sl-plate.is-lit { color: var(--rk-led); text-shadow: var(--rk-led-glow); }
.sl-plate.is-blank { color: var(--rk-led-off); }
.sl-plate.is-dim { color: var(--rk-chalk-3); }

/* Yesterday's finals, laid out like an out-of-town scoreboard. */
.sl-finals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--rk-s3);
}
.sl-final__link {
  display: grid;
  gap: 5px;
  padding: 9px 10px 8px;
  background: var(--rk-board-2);
  border: 2px solid var(--rk-board-3);
  text-decoration: none;
  transition: border-color 0.15s var(--rk-ease);
}
.sl-final__link:hover { border-color: var(--rk-chalk-3); color: inherit; }
.sl-final__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.sl-final__abbr {
  font: 700 1.1rem/1 var(--rk-font-display);
  letter-spacing: 0.14em;
  color: var(--rk-chalk-2);
}
.sl-final__row.is-winner .sl-final__abbr { color: var(--rk-chalk-1); }
.sl-final__row .sl-plate { min-width: 1.75em; font-size: 1.3rem; background: var(--rk-board-1); }
.sl-final.is-live .sl-plate { color: var(--rk-led); text-shadow: var(--rk-led-glow); }
.sl-final__status {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 6px;
  white-space: nowrap;
  padding-top: 5px;
  border-top: 1px solid var(--rk-board-3);
  font: 700 var(--rk-fs-label)/1 var(--rk-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rk-chalk-3);
}
.sl-final__flag { color: var(--rk-amber); }
.sl-final.is-mine .sl-final__link { border-color: var(--rk-lamp); box-shadow: inset 3px 0 0 var(--rk-lamp); }

/* ------------------------------------------------------------------ tables */
.sl-table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* relative: holds in the visually hidden labels of forms in its cells */
.sl-table {
  width: 100%;
  border-collapse: collapse;
  font: 500 var(--rk-data-width) var(--rk-fs-data)/1.25 var(--rk-font-data);
  font-variant-numeric: tabular-nums lining-nums;
}
.sl-table caption { text-align: left; }
.sl-table th, .sl-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--rk-rule-1);
  text-align: right;
  white-space: nowrap;
  background: var(--row-bg, var(--rk-surface));
}
.sl-table thead th {
  padding-top: 6px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--rk-ink-1);
  font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display);
  letter-spacing: var(--rk-track-caps);
  text-transform: uppercase;
  color: var(--rk-ink-3);
  vertical-align: bottom;
}
.sl-table .l { text-align: left; }
.sl-table .c { text-align: center; }
.sl-table tbody th { font-weight: 600; }
.sl-table tbody tr:hover { --row-bg: var(--rk-paper-1); }
.sl-table tbody tr.is-mine { --row-bg: var(--rk-highlight); font-weight: 700; }
.sl-table tbody tr.is-mine:hover { --row-bg: var(--rk-highlight-hover); }
.sl-table tfoot td, .sl-table tfoot th { font-weight: 700; border-top: 2px solid var(--rk-ink-1); border-bottom: 0; }
.sl-table .div { border-left: 1px solid var(--rk-rule-2); }
.sl-table .muted { color: var(--rk-ink-3); }
.sl-table a { text-decoration: none; }
.sl-table a:hover { text-decoration: underline; }
.sl-table--sticky th:first-child, .sl-table--sticky td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 var(--rk-rule-1);
}
.sl-table--compact th, .sl-table--compact td { padding: 5px 6px; }
.sl-table tr.sl-table__group th {
  padding-top: var(--rk-s4);
  border-bottom: 1px solid var(--rk-ink-1);
  font: 800 0.86rem/1.2 var(--rk-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rk-ink-3);
  text-align: left;
}
.sl-table tr.sl-table__group:hover { --row-bg: var(--rk-surface); }

.sl-table-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--rk-s2);
  font: 800 var(--rk-fs-h3)/1.1 var(--rk-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--rk-s2);
}
.sl-table-title small {
  font: 700 var(--rk-fs-label)/1 var(--rk-font-display);
  letter-spacing: var(--rk-track-caps);
  color: var(--rk-ink-3);
}

/* Standings */
.sl-standings-grid { display: grid; gap: var(--rk-s6) var(--rk-s5); }
@media (min-width: 900px) { .sl-standings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The news (docs/life.md): a wire of short items, each with its kind. */
.sl-news { display: grid; gap: 0; }
.sl-news__item {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: var(--rk-s1) var(--rk-s3);
  align-items: baseline;
  padding: var(--rk-s2) 0;
  border-bottom: 1px solid var(--rk-rule-1);
}
.sl-news__kind { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }
.sl-news__item--champion .sl-news__kind, .sl-news__item--award .sl-news__kind, .sl-news__item--hall .sl-news__kind { color: var(--rk-win); }
.sl-news__item--record .sl-news__kind, .sl-news__item--milestone .sl-news__kind { color: var(--rk-caution); }
.sl-news__item--injury .sl-news__kind { color: var(--rk-stitch-ink); }
.sl-news__when { font: 400 var(--rk-data-width) var(--rk-fs-small)/1.2 var(--rk-font-data); color: var(--rk-ink-3); white-space: nowrap; }
@media (max-width: 559px) {
  .sl-news__item { grid-template-columns: minmax(0, 1fr); }
}
/* What an owner missed: a slip on top of the league page. */
.sl-digest {
  display: grid;
  gap: var(--rk-s2);
  padding: var(--rk-s4);
  background: var(--rk-paper-0);
  border: 1px solid var(--rk-rule-2);
  border-left: 4px solid var(--rk-lamp);
}
.sl-digest__head { display: flex; flex-wrap: wrap; gap: var(--rk-s3); align-items: center; justify-content: space-between; }
.sl-digest__head h2 { font: var(--rk-title-pose) 800 var(--rk-title-width) var(--rk-fs-h3)/1.1 var(--rk-font-display); text-transform: uppercase; }
/* Leaders: small boards side by side. */
.sl-leaders { display: grid; gap: var(--rk-s4) var(--rk-s5); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.sl-leaders__list { display: grid; gap: 0; counter-reset: place; }
/* A board's row (leaders.ts row): the place, the headshot, the name over the club, the number; every row
   the same height, so the board reads straight down. */
.sl-leaders__list li {
  display: grid;
  grid-template-columns: 1.5rem 40px minmax(0, 1fr) auto;
  grid-template-areas: "place face name value" "place face club value";
  column-gap: var(--rk-s3);
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--rk-rule-1);
  counter-increment: place;
}
.sl-leaders__list li::before { grid-area: place; content: counter(place); font: 700 var(--rk-data-width) var(--rk-fs-small)/1.2 var(--rk-font-data); color: var(--rk-ink-3); }
.sl-leaders__list--mine li { grid-template-columns: 2.5rem 40px minmax(0, 1fr) auto; }
.sl-leaders__list--mine li::before { content: attr(data-rank); }   /* My club: each one's place in the league */
.sl-leaders__face { grid-area: face; display: block; width: 40px; height: 40px; }
.sl-leaders__name { grid-area: name; align-self: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sl-leaders__club { grid-area: club; align-self: start; font-size: var(--rk-fs-small); color: var(--rk-ink-3); }
.sl-leaders__list b { grid-area: value; font: 700 var(--rk-data-width) var(--rk-fs-data)/1.2 var(--rk-font-data); font-variant-numeric: tabular-nums; }
/* A season's postseason and awards. */
.sl-series { display: grid; gap: 0; }
.sl-series li { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: var(--rk-s3); align-items: baseline; padding: var(--rk-s1) 0; border-bottom: 1px solid var(--rk-rule-1); }
.sl-series__round, .sl-series__won { font: 400 var(--rk-data-width) var(--rk-fs-small)/1.2 var(--rk-font-data); color: var(--rk-ink-3); }
@media (max-width: 559px) { .sl-series li { grid-template-columns: minmax(0, 1fr); } }
.sl-honours { display: grid; gap: var(--rk-s2); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.sl-honours dt { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }
.sl-honours small { display: block; color: var(--rk-ink-3); }
.sl-champion { font: var(--rk-title-pose) 800 var(--rk-title-width) var(--rk-fs-h3)/1.1 var(--rk-font-display); text-transform: uppercase; }
.sl-awards { display: flex; flex-wrap: wrap; gap: var(--rk-s2) var(--rk-s4); font: 700 var(--rk-data-width) var(--rk-fs-small)/1.3 var(--rk-font-data); color: var(--rk-win); }
/* The ladder page: a level a column, and every season's moves. */
.sl-ladder-grid { display: grid; gap: 0 var(--rk-s5); }
@media (min-width: 900px) { .sl-ladder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sl-moves { display: grid; gap: var(--rk-s4); }
.sl-moves p { margin-top: var(--rk-s1); }
.sl-moves small { color: var(--rk-ink-3); }
.sl-table--standings .rank {
  width: 30px;
  padding-left: 10px;
  text-align: left;
  color: var(--rk-ink-3);
  font-weight: 600;
}
.sl-table--standings tr.zone-playoff .rank { box-shadow: inset 4px 0 0 var(--rk-win); color: var(--rk-win); }
/* A club's place on the ladder, after its name: up, the relegation series, down. */
.sl-rung { margin-left: 6px; font-size: 0.7em; vertical-align: 1px; }
.sl-rung--up { color: var(--rk-win); }
.sl-rung--series { color: var(--rk-caution); }
.sl-rung--down { color: var(--rk-stitch-ink); }
.sl-table--standings tr.cutline td, .sl-table--standings tr.cutline th { border-bottom: 2px dashed var(--rk-rule-2); }
.sl-table--standings .team { width: 100%; }
.sl-table--standings .strk-w { color: var(--rk-win); font-weight: 600; }
.sl-table--standings .strk-l { color: var(--rk-stitch-ink); font-weight: 600; }
.sl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rk-s2) var(--rk-s4);
  margin-top: var(--rk-s4);
  font: 500 var(--rk-data-width) var(--rk-fs-small)/1.3 var(--rk-font-data);
  color: var(--rk-ink-2);
}
.sl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sl-legend i { width: 4px; height: 14px; background: var(--rk-rule-2); }
.sl-legend .zone-playoff i { background: var(--rk-win); }
.sl-legend .sl-rung { margin-left: 0; }
.sl-legend .zone-mine i { width: 18px; background: var(--rk-highlight); box-shadow: inset 0 0 0 1px var(--rk-rule-2); }

@media (max-width: 559px) {
  .sl-hide-sm { display: none; }
  .sl-teamlink__nick { display: none; }
  /* In the standings a phone shows nicknames: two Portlands and three Lakewoods share a league. */
  .sl-table--standings .sl-teamlink__name { display: none; }
  .sl-table--standings .sl-teamlink__nick { display: inline; font-weight: 600; color: var(--rk-ink-1); }
  /* Box-score titles keep the nickname too, or a same-city game has two identical headings. */
  .sl-table-title .sl-teamlink__nick { display: inline; }
}

/* ------------------------------------------------------------------ scouting grades */
.sl-grade {
  --g-bg: var(--rk-g50);
  --g-ink: var(--rk-g50-ink);
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 2.15em;
  height: 1.55em;
  padding: 0.05em 0.3em 0;
  border-radius: var(--rk-r-0);
  background: var(--g-bg);
  color: var(--g-ink);
  font: 700 var(--rk-fs-data)/1 var(--rk-font-data);
  font-variant-numeric: tabular-nums;
}
.sl-grade[data-g='20'] { --g-bg: var(--rk-g20); --g-ink: var(--rk-g20-ink); }
.sl-grade[data-g='25'] { --g-bg: var(--rk-g25); --g-ink: var(--rk-g25-ink); }
.sl-grade[data-g='30'] { --g-bg: var(--rk-g30); --g-ink: var(--rk-g30-ink); }
.sl-grade[data-g='35'] { --g-bg: var(--rk-g35); --g-ink: var(--rk-g35-ink); }
.sl-grade[data-g='40'] { --g-bg: var(--rk-g40); --g-ink: var(--rk-g40-ink); }
.sl-grade[data-g='45'] { --g-bg: var(--rk-g45); --g-ink: var(--rk-g45-ink); }
.sl-grade[data-g='50'] { --g-bg: var(--rk-g50); --g-ink: var(--rk-g50-ink); }
.sl-grade[data-g='55'] { --g-bg: var(--rk-g55); --g-ink: var(--rk-g55-ink); }
.sl-grade[data-g='60'] { --g-bg: var(--rk-g60); --g-ink: var(--rk-g60-ink); }
.sl-grade[data-g='65'] { --g-bg: var(--rk-g65); --g-ink: var(--rk-g65-ink); }
.sl-grade[data-g='70'] { --g-bg: var(--rk-g70); --g-ink: var(--rk-g70-ink); }
.sl-grade[data-g='75'] { --g-bg: var(--rk-g75); --g-ink: var(--rk-g75-ink); }
.sl-grade[data-g='80'] { --g-bg: var(--rk-g80); --g-ink: var(--rk-g80-ink); }
/* 80 and up: a star, red with the kickplate's ring. */
.sl-grade[data-g='80'] { box-shadow: var(--rk-g-star-ring); }
.sl-grade--lg { font-size: 1.35rem; min-width: 2.1em; height: 1.75em; }

/* ------------------------------------------------------------------ ticket */
.sl-ticket {
  /* the shadow follows the punched outline of the paper inside */
  filter: var(--rk-shadow-ticket);
}
/* Board stock with the kickplate along its foot and the red line down the perforation. */
.sl-ticket__paper {
  --rk-surface: var(--rk-ticket);
  --stub: 54px;
  --notch: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stub);
  background-color: var(--rk-ticket);
  border-bottom: 8px solid var(--rk-lamp);
  color: var(--rk-ink-1);
  border-radius: var(--rk-r-ticket);
  /* punched notches at each end of the perforation */
  -webkit-mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent calc(var(--notch) - 0.5px), #000 var(--notch)) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent calc(var(--notch) - 0.5px), #000 var(--notch)) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent calc(var(--notch) - 0.5px), #000 var(--notch)) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent calc(var(--notch) - 0.5px), #000 var(--notch)) bottom / 100% 51% no-repeat;
}
.sl-ticket__main { padding: var(--rk-s4) var(--rk-s5) var(--rk-s5); display: grid; gap: var(--rk-s3); min-width: 0; }
.sl-ticket__kicker { display: flex; justify-content: space-between; gap: var(--rk-s2); font: 700 0.82rem/1.2 var(--rk-font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rk-stitch-ink); }
.sl-ticket__title { display: grid; gap: 4px; font: 400 1.55rem/1 var(--rk-font-varsity); letter-spacing: 0.01em; }
.sl-ticket__title a { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.sl-ticket__title a:hover { color: var(--rk-blue-ink); text-decoration: underline; text-decoration-thickness: 2px; }
.sl-ticket__at { font: 700 0.86rem/1 var(--rk-font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rk-stitch-ink); padding-left: 44px; }
.sl-ticket__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rk-s2) var(--rk-s4); border-top: 1px solid var(--rk-rule-1); padding-top: var(--rk-s3); }
.sl-ticket__facts dt { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rk-ink-3); }
.sl-ticket__facts dd { font: 600 0.95rem/1.25 var(--rk-font-data); }
.sl-ticket__stub {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 2px dashed var(--rk-stitch);
}
.sl-ticket__stub span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 800 0.95rem/1 var(--rk-font-display);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rk-ink-2);
  white-space: nowrap;
}
.sl-ticket__actions { display: flex; flex-wrap: wrap; gap: var(--rk-s2); align-items: center; }
.sl-ticket__actions .sl-btn { padding-left: 14px; padding-right: 14px; }

.sl-probables { display: grid; gap: 6px; border-top: 1px solid var(--rk-rule-1); padding-top: var(--rk-s3); }
.sl-probable { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.sl-probable__name { font: 700 1rem/1.15 var(--rk-font-text); text-decoration: none; }
.sl-probable__name:hover { text-decoration: underline; }
.sl-probable__line { display: block; font: 500 var(--rk-fs-small)/1.3 var(--rk-font-data); color: var(--rk-ink-3); font-variant-numeric: tabular-nums; }
/* The line on the game (ui.ts lineBox), ruled off like the probables above it. */
.sl-line { display: grid; gap: 6px; border-top: 1px solid var(--rk-rule-1); padding-top: var(--rk-s3); }
.sl-line .sl-table th, .sl-line .sl-table td { padding: 5px 4px; }
.sl-line__total { font: 500 var(--rk-data-width) var(--rk-fs-small)/1.3 var(--rk-font-data); color: var(--rk-ink-2); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ buttons, tags */
.sl-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--rk-s2);
  padding: 10px 16px 8px;
  background: var(--rk-stitch);
  color: var(--rk-chalk-1);
  border: 0;
  border-radius: var(--rk-r-0);
  font: 800 0.95rem/1 var(--rk-font-display);
  letter-spacing: var(--rk-track-caps);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.sl-btn:hover { background: var(--rk-stitch-ink); color: var(--rk-chalk-1); }
.sl-btn:disabled { opacity: 0.45; cursor: default; }
.sl-btn:disabled:hover { background: var(--rk-stitch); }
.sl-btn--ghost { background: transparent; color: var(--rk-ink-1); box-shadow: inset 0 0 0 2px var(--rk-ink-1); }
.sl-btn--ghost:hover { background: var(--rk-ink-1); color: var(--rk-chalk-1); }
.sl-btn--ghost:disabled:hover { background: transparent; color: var(--rk-ink-1); }

.sl-tag {
  display: inline-block;
  padding: 3px 5px 2px;
  border: 1.5px solid currentColor;
  border-radius: var(--rk-r-0);
  font: 800 var(--rk-fs-label)/1 var(--rk-font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: 2px;
  white-space: nowrap;
}
.sl-tag--win { color: var(--rk-win); }
.sl-tag--loss { color: var(--rk-loss); }
.sl-tag--save { color: var(--rk-blue-ink); }
.sl-tag--soon { color: var(--rk-ink-2); border-style: dashed; }   /* a game still to play */
/* Tags in a row that wraps, inside a table cell too. */
.sl-chips { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.sl-chips .sl-tag { vertical-align: 0; }

/* ------------------------------------------------------------------ press box */
.sl-press__items { display: grid; gap: var(--rk-s5); }
@media (min-width: 700px) { .sl-press__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .sl-press__items { grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr)); gap: 0; }
  .sl-story { padding: 0 var(--rk-s5); }
  .sl-story:first-child { padding-left: 0; }
  .sl-story:last-child { padding-right: 0; }
  .sl-story + .sl-story { border-left: 1px solid var(--rk-rule-2); }
}
.sl-story { display: grid; gap: var(--rk-s2); align-content: start; }
.sl-story__kicker { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-stitch-ink); }
.sl-story__head { font: var(--rk-title-pose) 800 var(--rk-title-width) 1.45rem/1 var(--rk-font-display); text-transform: uppercase; letter-spacing: 0.01em; }
.sl-story:first-child .sl-story__head { font-size: 2rem; }
.sl-story__head a { text-decoration: none; }
.sl-story__head a:hover { color: var(--rk-ink-1); text-decoration: underline; text-decoration-thickness: 2px; }
.sl-story__deck { color: var(--rk-ink-2); font-size: 0.95rem; }
.sl-story__deck a { color: var(--rk-ink-1); }

/* ------------------------------------------------------------------ team page */
/* A club's head: center ice. The crest on the faceoff dot inside the red circle, the red line through
   it, a blue line each side, the nickname in sweater letters with the trim's drop shadow, the record
   on a banner hung from the rafters in the club's colours, the kickplate along the bottom. */
.sl-teamband {
  --dot: 70px;                         /* the faceoff dot: the crest's centre, from the left */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--rk-s5) 56px;
  padding: var(--rk-s5) var(--rk-s6) calc(var(--rk-s5) + 10px) var(--rk-s5);
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 calc(var(--dot) + 80px), var(--rk-blue) calc(var(--dot) + 80px) calc(var(--dot) + 90px), transparent 0),
    linear-gradient(90deg, transparent 0 calc(100% - 214px), var(--rk-blue) calc(100% - 214px) calc(100% - 204px), transparent 0),
    radial-gradient(circle at var(--dot) calc(50% - 5px), transparent 0 62px, var(--rk-stitch) 62px 65px, transparent 65px),
    linear-gradient(90deg, transparent 0 calc(var(--dot) - 3px), var(--rk-stitch) calc(var(--dot) - 3px) calc(var(--dot) + 3px), transparent 0),
    var(--rk-paper-0);
  color: var(--rk-ink-1);
  border: 1px solid var(--rk-rule-1);
  box-shadow: var(--rk-shadow-paper);
}
.sl-teamband::after {
  /* the kickplate */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 10px;
  background: var(--rk-lamp);
  border-top: 2px solid var(--rk-kick-edge);
  pointer-events: none;
}
.sl-teamband > * { position: relative; }
.sl-teamband__text { display: grid; gap: 6px; min-width: 0; }
.sl-teamband__city {
  width: fit-content;
  margin-left: -6px;
  padding: 2px 6px;
  background: var(--rk-paper-0);
  font: 700 0.82rem/1.2 var(--rk-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rk-stitch-ink);
}
.sl-teamband__nick {
  font: 400 clamp(2.2rem, 5vw, 3.6rem)/0.95 var(--rk-font-varsity);
  letter-spacing: 0.01em;
  color: var(--c1);
  text-shadow: 3px 3px 0 var(--c2), 4px 4px 0 var(--c1);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.sl-teamband__meta {
  width: fit-content;
  margin-left: -6px;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--rk-paper-0) 88%, transparent);
  font: 500 0.92rem/1.4 var(--rk-font-text);
  color: var(--rk-ink-2);
}
.sl-teamband .sl-cap--xl { filter: var(--rk-shadow-crest); }
/* The rafter banner: the club's colours, its trim as the edge, a swallowtail at the foot. */
.sl-teamband__record {
  margin: calc(var(--rk-s5) * -1) 0 0 auto;
  align-self: flex-start;
  display: grid;
  gap: 8px;
  width: 150px;
  padding: 18px 12px 34px;
  text-align: center;
  background: var(--c1);
  color: var(--c2);
  box-shadow: inset 0 0 0 3px var(--c2);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 22px), 0 100%);
}
.sl-teamband__record b { font: 400 1.9rem/1 var(--rk-font-varsity); }
.sl-teamband__record span { padding-top: 8px; border-top: 3px solid var(--c2); font: 700 0.76rem/1.25 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; }
@media (max-width: 759px) { .sl-teamband__record { display: none; } }
@media (max-width: 599px) {
  /* A phone: plain boards, the crest smaller; the lines would run through the name. */
  .sl-teamband { gap: var(--rk-s3); padding: var(--rk-s4) var(--rk-s4) calc(var(--rk-s4) + 10px); background: var(--rk-paper-0); }
  .sl-teamband .sl-cap--xl { --size: 58px; }
}

.sl-statline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  border-top: 2px solid var(--rk-ink-1);
  border-bottom: 1px solid var(--rk-rule-2);
}
.sl-statline > div { padding: var(--rk-s3) var(--rk-s3) var(--rk-s3) 0; }
.sl-statline > div + div { padding-left: var(--rk-s3); border-left: 1px solid var(--rk-rule-1); }
.sl-statline dt { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }
.sl-statline dd { font: 400 1.45rem/1.15 var(--rk-font-varsity); }
.sl-statline dd small { font: 600 var(--rk-data-width) var(--rk-fs-small)/1 var(--rk-font-data); color: var(--rk-ink-3); letter-spacing: 0.02em; }
@media (max-width: 599px) {
  .sl-statline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sl-statline > div:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .sl-statline > div:nth-child(n + 4) { border-top: 1px solid var(--rk-rule-1); }
  .sl-statline dd { font-size: 1.2rem; }
}

.sl-results { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sl-results > li { display: grid; }
.sl-result {
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 9px 8px 8px;
  background: var(--rk-paper-0);
  border: 1px solid var(--rk-rule-1);
  border-top: 4px solid var(--rk-rule-2);
  text-decoration: none;
  font: 600 var(--rk-data-width) var(--rk-fs-small)/1.15 var(--rk-font-data);
  color: var(--rk-ink-2);
  min-width: 0;
}
.sl-result:hover { border-color: var(--rk-ink-1); color: var(--rk-ink-1); }
.sl-result__wl { display: flex; align-items: baseline; gap: 8px; font: 800 1.6rem/1 var(--rk-font-display); color: var(--rk-ink-1); }
.sl-result__wl small { font: 800 1.6rem/1 var(--rk-font-display); color: var(--rk-ink-1); letter-spacing: 0.02em; }
.sl-result.is-win { border-top-color: var(--rk-win); }
.sl-result.is-win .sl-result__wl span { color: var(--rk-win); }
.sl-result.is-loss { border-top-color: var(--rk-stitch); }
.sl-result.is-loss .sl-result__wl span { color: var(--rk-loss); }
.sl-result__opp { font-weight: 700; color: var(--rk-ink-1); letter-spacing: 0.04em; }
.sl-result__flag { font-weight: 700; font-size: var(--rk-fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rk-stitch-ink); }
.sl-result__flag { white-space: nowrap; }
@media (max-width: 559px) {
  .sl-result { padding: 8px 6px 7px; }
  .sl-result__flag { letter-spacing: 0.02em; }
  .sl-result__wl { flex-direction: column; align-items: flex-start; gap: 2px; }
  .sl-result__wl small { font-size: 1.15rem; }
}

/* ------------------------------------------------------------------ finances */
.sl-books { display: grid; gap: var(--rk-s5); }
@media (min-width: 760px) { .sl-books { grid-template-columns: 240px minmax(0, 1fr); } }
.sl-tile { display: grid; gap: 4px; align-content: start; }
.sl-tile__label { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }
.sl-tile__value { font: 800 2.3rem/1 var(--rk-font-display); letter-spacing: 0.02em; }   /* money runs long: the condensed caps, not varsity */
.sl-tile__delta { font: 600 var(--rk-data-width) var(--rk-fs-small)/1.3 var(--rk-font-data); color: var(--rk-ink-2); }
.sl-tile__delta.is-up { color: var(--rk-win); }
.sl-tile__delta.is-down { color: var(--rk-stitch-ink); }
.sl-tiles { display: grid; gap: var(--rk-s5); align-content: start; }
.sl-spark-wrap { position: relative; margin-top: 8px; }
.sl-spark { width: 100%; height: 44px; overflow: visible; }
.sl-spark__dot { position: absolute; right: -4px; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--rk-stitch); box-shadow: 0 0 0 2px var(--rk-paper-0); }
.sl-spark__ends { display: flex; justify-content: space-between; margin-top: 4px; font: 600 var(--rk-data-width) var(--rk-fs-label)/1 var(--rk-font-data); letter-spacing: 0.06em; color: var(--rk-ink-3); }
.sl-spark__line { fill: none; stroke: var(--rk-blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sl-spark__area { fill: color-mix(in srgb, var(--rk-blue) 10%, transparent); }
.sl-meter { height: 8px; background: var(--rk-paper-2); overflow: hidden; margin-top: 6px; }
.sl-meter i { display: block; height: 100%; background: var(--rk-blue); }
/* The staff page's training (staff.ts): bars across, the weeks as columns, and which focus works what. */
.sl-hbars { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font: 500 var(--rk-data-width) var(--rk-fs-small)/1.2 var(--rk-font-data); }
.sl-hbars li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3.5rem; align-items: center; gap: var(--rk-s2); }
.sl-hbars .sl-meter { margin-top: 0; }
.sl-hbars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-hbars__value { text-align: right; font-variant-numeric: tabular-nums; color: var(--rk-ink-2); }
.sl-weekbars { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-left: 3rem; border-bottom: 1px solid var(--rk-rule-1); }
.sl-weekbars__top { position: absolute; top: 0; left: 0; width: 2.6rem; border-top: 1px dashed var(--rk-rule-1); font: 600 var(--rk-data-width) var(--rk-fs-label)/1.4 var(--rk-font-data); color: var(--rk-ink-3); font-variant-numeric: tabular-nums; }
.sl-weekbars__week { position: relative; flex: 0 1 22px; display: flex; align-items: flex-end; height: 100%; }
.sl-weekbars__week i { display: block; width: 100%; background: var(--rk-blue); }
.sl-weekbars__week b { position: absolute; bottom: -1.3em; left: 0; right: 0; text-align: center; font: 600 var(--rk-data-width) var(--rk-fs-label)/1 var(--rk-font-data); color: var(--rk-ink-3); }
.sl-trainingcharts { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--rk-s5); margin-top: var(--rk-s3); }
.sl-trainingchart { display: grid; gap: var(--rk-s3); margin: 0; align-content: start; }
.sl-trainingchart .sl-weekbars { margin-bottom: 1.4em; }
.sl-focusgrid tr.is-mine th, .sl-focusgrid tr.is-mine td { --row-bg: var(--rk-paper-2); font-weight: 700; }
.sl-focusgrid__main { color: var(--rk-blue-ink); }
.sl-focusgrid__side { color: var(--rk-ink-3); }

.sl-table--ledger { --rk-surface: transparent; }
.sl-table--ledger td, .sl-table--ledger th { padding: 6px 8px; }
.sl-table--ledger .bar { width: 38%; padding-right: 0; }
.sl-table--ledger .bar i { display: block; height: 10px; margin-left: auto; background: var(--rk-blue); }
.sl-table--ledger .is-exp .bar i { background: var(--rk-stitch); }
.sl-table--ledger .sect th { padding-top: var(--rk-s3); border-bottom: 1px solid var(--rk-ink-1); font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-2); text-align: left; }
.sl-table--ledger .net td, .sl-table--ledger .net th { border-top: 2px solid var(--rk-ink-1); border-bottom: 3px double var(--rk-ink-1); font-weight: 700; }
.sl-table--ledger .sub td, .sl-table--ledger .sub th { border-top: 1px solid var(--rk-ink-1); font-weight: 700; }   /* a part's total */
.sl-table--ledger tbody th.l { white-space: normal; }        /* a long line wraps; the amounts stay in view */
@media (max-width: 479px) { .sl-table--ledger .bar { display: none; } }

/* The banner a big moment earns (calls.ts): a homer as it clears the wall, a walk-off as it's won,
   across the bottom of the field in the lamp's gold, clear of the play; a walk-off's bigger, on a lit
   board. A run's number pops on the scoreboard as it crosses the plate. */

/* On the air: a red bulb that breathes. */

.sl-strip__onair::before {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--rk-stitch); box-shadow: 0 0 6px var(--rk-stitch); animation: sl-onair 1.6s ease-in-out infinite;
}
@keyframes sl-onair { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .sl-strip__onair::before { animation: none; } }

/* A game on the scoreboard while it's on the air. */
.sl-final.is-live .sl-final__status span:first-child::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 0; border-radius: 50%;
  background: var(--rk-stitch); box-shadow: 0 0 5px var(--rk-stitch);
}

/* ------------------------------------------------------------------ front office */
.sl-tiles--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.sl-toggle { display: inline-flex; align-items: center; gap: var(--rk-s2); font: 700 var(--rk-data-width) var(--rk-fs-small)/1.3 var(--rk-font-data); letter-spacing: 0.04em; cursor: pointer; }
.sl-toggle input { width: 18px; height: 18px; accent-color: var(--rk-blue); }
.sl-price { width: 6.5rem; padding: 6px 8px 5px; text-align: right; font-variant-numeric: tabular-nums; }
.sl-price:disabled { color: var(--rk-ink-3); background: transparent; border-color: transparent; }
.sl-workform__fields { display: grid; gap: var(--rk-s4); }
@media (min-width: 640px) { .sl-workform__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sl-workorder {
  display: grid;
  gap: var(--rk-s2);
  padding: var(--rk-s4);
  background: var(--rk-paper-0);
  border: 2px dashed var(--rk-rule-2);
  border-left: 6px solid var(--rk-caution);
}
.sl-workorder__kicker { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }
.sl-workorder__what { font: 700 1.25rem/1.3 var(--rk-font-text); }

/* ------------------------------------------------------------------ the market and the roster */
.sl-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--rk-s2) var(--rk-s4);
  padding: var(--rk-s3) var(--rk-s4);
  background: var(--rk-paper-2);
  border-left: 4px solid var(--rk-rule-2);
}
.sl-filters .sl-field { gap: 4px; }
.sl-filters .sl-input { width: auto; padding: 6px 8px 5px; }
.sl-filters input.sl-input { width: 7rem; text-align: right; font-variant-numeric: tabular-nums; }
.sl-btn--sm { padding: 7px 10px 5px; font-size: 0.85rem; letter-spacing: 0.08em; }
.sl-bid { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.sl-bid .sl-input { width: 7.5rem; padding: 6px 8px 5px; text-align: right; font-variant-numeric: tabular-nums; }
.sl-bid select.sl-input { width: auto; text-align: left; }
.sl-tag--lead { color: var(--rk-win); }
.sl-tag--out { color: var(--rk-loss); }
.sl-tag--fa { color: var(--rk-ink-2); }
/* The market's auctions (market.ts auctionTable): where each one's bidding stands on two lines, the
   price over who'd pay it or the viewer's place; the closing time and the bid form never wrap, so
   every row is the same height. */
.sl-bidding { display: inline-grid; justify-items: end; gap: 2px; white-space: nowrap; }
.sl-contract b { font-weight: 600; }
.sl-bidding b { font-weight: 700; }
.sl-bidding small { display: inline-flex; align-items: center; gap: 4px; font: 600 var(--rk-data-width) var(--rk-fs-small)/1.2 var(--rk-font-data); color: var(--rk-ink-3); }
/* The viewer's own bid: a filled pill, green leading, red outbid; an outbid row is marked in red. */
.sl-pill { display: inline-block; padding: 4px 9px 3px; font: 700 0.76rem/1 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; white-space: nowrap; color: var(--rk-chalk-1); }
.sl-pill--lead { background: var(--rk-win); }
.sl-pill--out { background: var(--rk-loss); }
.sl-table tbody tr.is-outbid { --row-bg: color-mix(in srgb, var(--rk-loss) 9%, var(--rk-surface)); }
.sl-table tbody tr.is-outbid > :first-child { box-shadow: inset 4px 0 0 var(--rk-loss); }
.sl-bidding .sl-cap { --size: 15px; }
/* The pill sits on the bids' line, no taller than it, so every auction row is the same height. */
.sl-bidding .sl-pill { padding: 2px 7px 1px; font-size: 0.7rem; }
/* An auction's bidding history: one line a bid, the latest first. */
.sl-bidlog { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sl-bidlog li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rk-s2); }
.sl-bidlog .sl-cap { --size: 15px; }
.sl-bidlog__when { min-width: 9rem; color: var(--rk-ink-3); }
/* The closing time on two lines, day over hour, so the bid box has room for seven digits and the
   auctions still fit the page with the Bid button (Rob: "missing the actual bid button", then "the
   10300 in the third row is cut off"). */
.sl-table--auctions .sl-closes { width: 5.5rem; color: var(--rk-ink-2); }
.sl-table--auctions .sl-bid { flex-wrap: nowrap; }
.sl-table--auctions .sl-bid .sl-input { width: 5.25rem; padding-inline: 6px; font-variant-numeric: tabular-nums; }
.sl-table--auctions .sl-bid input.sl-input { appearance: textfield; }
.sl-table--auctions .sl-bid input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.sl-table--auctions .sl-bid select.sl-input { width: 4.75rem; }
.sl-table tbody tr.sl-manage-row,
.sl-table tbody tr.sl-manage-row:hover { --row-bg: var(--rk-paper-0); }
.sl-manage { display: grid; gap: var(--rk-s4); padding: var(--rk-s2) 0 var(--rk-s3); white-space: normal; text-align: left; }
@media (min-width: 760px) { .sl-manage { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.sl-manage__block { display: grid; gap: var(--rk-s2); align-content: start; font: 500 var(--rk-data-width) var(--rk-fs-small)/1.35 var(--rk-font-data); }
.sl-manage__block .sl-bid { justify-content: flex-start; }
.sl-manage__title { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }

/* ------------------------------------------------------------------ depth: rest days and the injured list */
/* The lineup card's next game: who sits, and who stands in. */
.sl-today { display: grid; gap: var(--rk-s2); padding: var(--rk-s3) var(--rk-s4); background: var(--rk-paper-2); border-left: 4px solid var(--rk-lamp); }
.sl-today__title { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }
.sl-today__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font: 500 var(--rk-data-width) var(--rk-fs-small)/1.4 var(--rk-font-data); }

/* ------------------------------------------------------------------ the academy and the draft */
/* A prospect's potential: the scouts' estimate, and the range they give it. */
.sl-range { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sl-range small { font: 600 var(--rk-data-width) var(--rk-fs-small)/1 var(--rk-font-data); color: var(--rk-ink-3); font-variant-numeric: tabular-nums; }
.sl-actions { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 6px; }
/* The admin's owners (admin.ts ownersTab): one line an owner, plain text controls, "on" in ink. */
.sl-oneline td, .sl-oneline th { white-space: nowrap; }
.sl-oneline__cut { display: inline-block; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.sl-oneline .sl-linkbtn { color: var(--rk-ink-3); }
.sl-oneline .sl-linkbtn.is-on { color: var(--rk-ink-1); font-weight: 700; }
.sl-oneline .sl-linkbtn:hover { color: var(--rk-stitch-ink); }
.sl-oneline__ask { color: var(--rk-stitch-ink); font-weight: 700; }

/* ------------------------------------------------------------------ game page */

/* Win probability, one line against the even-money rule. */

.sl-box { display: grid; gap: var(--rk-s6); }
@media (min-width: 1000px) { .sl-box { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rk-s5); } }

/* Play-by-play: one row per inning, top and bottom halves side by side like a scorebook spread. */
.sl-pbp { display: grid; }

/* ------------------------------------------------------------------ player page */
.sl-player { display: grid; gap: var(--rk-s6); align-items: start; }
@media (min-width: 1000px) {
  .sl-player { grid-template-columns: 340px minmax(0, 1fr); }
  .sl-player__card { position: sticky; top: var(--rk-s5); }
}

/* Card front: white-bordered, die-cut corners; the player's portrait (web/src/portrait.ts) on his
   club's colour, lightened, under a halftone screen, his position on a plate in the corner. */
.sl-bbcard {
  position: relative;
  container-type: inline-size;
  width: min(100%, 340px);
  aspect-ratio: 5 / 7;
  margin: 0 auto;
  padding: 14px;
  background: var(--rk-paper-0);
  border: 1px solid var(--rk-rule-2);
  border-bottom: 10px solid var(--rk-lamp);
  border-radius: var(--rk-r-card);
  box-shadow: var(--rk-shadow-lift);
  transform: rotate(-1.2deg);
}
.sl-bbcard__art {
  position: absolute;
  inset: 14px 14px 82px;
  overflow: hidden;
  border-radius: var(--rk-r-2);
  background-color: color-mix(in srgb, var(--c1) 30%, var(--rk-paper-1));
  box-shadow: inset 0 -6px 0 var(--rk-stitch);
}
.sl-bbcard__art::before {
  /* halftone screen */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--c1) 1.2px, transparent 1.6px);
  background-size: 7px 7px;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
  mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
}
.sl-bbcard__ball {
  /* a giant baseball behind him: outline, seams and stitches in the club's colour */
  position: absolute;
  width: 118%;
  left: 8%;
  top: -12%;
  color: var(--c1);
  opacity: 0.08;
}
.sl-bbcard__art .sl-portrait { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-bbcard__pos {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 6px 8px 4px;
  font: 400 1.2rem/1 var(--rk-font-varsity);
  color: var(--c2);
  background: var(--c1);
  box-shadow: 0 0 0 2px var(--c2), 0 0 0 4px var(--c1);
}
.sl-bbcard__plate {
  position: absolute;
  left: 14px; right: 14px; bottom: 6px;
  height: 70px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  text-align: center;
}
.sl-bbcard__name { font: 400 min(1.6rem, 7.5cqi)/1 var(--rk-font-varsity); color: var(--rk-ink-1); white-space: nowrap; }
.sl-bbcard__team { font: 700 0.82rem/1 var(--rk-font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--rk-stitch-ink); }
.sl-bbcard__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--rk-ink-1);
  color: var(--rk-chalk-1);
  box-shadow: 0 0 0 3px var(--rk-lamp), var(--rk-shadow-magnet);
  text-align: center;
}
.sl-bbcard__badge b { display: block; font: 400 1.45rem/0.95 var(--rk-font-varsity); }
.sl-bbcard__badge small { display: block; font: 700 var(--rk-fs-label)/1 var(--rk-font-display); letter-spacing: 0.14em; color: var(--rk-lamp); }

/* A player's head in lists and on the broadcast (portrait.ts avatar): round, on his club's colour. */
.sl-face {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--c1) 30%, var(--rk-paper-1));
  box-shadow: 0 0 0 1.5px var(--c1);
}
.sl-face--sm { width: 28px; height: 28px; }
.sl-face--md { width: 40px; height: 40px; }
.sl-face--lg { width: 56px; height: 56px; }
.sl-face .sl-portrait { display: block; width: 100%; height: 100%; }
.sl-who { display: inline-flex; align-items: center; gap: 8px; }
/* An international signing's flag (flags.ts), beside his name. */
.sl-flag { display: inline-block; flex: none; width: 18px; height: 12px; vertical-align: -1px; border-radius: 1px; box-shadow: 0 0 0 1px var(--rk-rule-2); }
.sl-bbback__name .sl-flag { width: 27px; height: 18px; vertical-align: 0.1em; }
.sl-flags { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }

/* Card back: the boards, printed in navy and red. */
.sl-bbback {
  --rk-surface: var(--rk-paper-0);
  background-color: var(--rk-paper-0);
  border: 1px solid var(--rk-rule-1);
  border-radius: var(--rk-r-0);
  padding: var(--rk-s5);
  box-shadow: var(--rk-shadow-paper);
  display: grid;
  gap: var(--rk-s4);
  min-width: 0;
}
.sl-bbback__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--rk-s2) var(--rk-s4); padding-bottom: var(--rk-s3); border-bottom: 4px solid var(--rk-lamp); }
.sl-bbback__name { font: 400 2rem/1 var(--rk-font-varsity); letter-spacing: 0.01em; }
.sl-bbback__pos { font: 700 0.86rem/1.2 var(--rk-font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rk-stitch-ink); }
.sl-bio { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--rk-s2) var(--rk-s4); }
.sl-bio dt { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rk-ink-3); }
.sl-bio dd { font: 600 1rem/1.25 var(--rk-font-data); }
.sl-bbback .sl-table tbody tr:hover { --row-bg: var(--rk-paper-1); }
.sl-bbback__note { font: italic 500 0.975rem/1.45 var(--rk-font-text); color: var(--rk-ink-2); padding-top: var(--rk-s3); border-top: 1px solid var(--rk-rule-1); }
.sl-bbback__note b { font-style: normal; font: 700 var(--rk-fs-label)/1 var(--rk-font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rk-stitch-ink); margin-right: 6px; }

/* The scout's report: tools on the 20-80 scale. */
.sl-scout {
  --rk-surface: var(--rk-paper-0);
  background: var(--rk-paper-0);
  border: 1px solid var(--rk-rule-2);
  box-shadow: var(--rk-shadow-paper);
  padding: var(--rk-s5);
  display: grid;
  gap: var(--rk-s4);
}
.sl-scout__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--rk-s2); border-bottom: 4px solid var(--rk-lamp); padding-bottom: var(--rk-s2); }
.sl-scout__title { font: 800 var(--rk-fs-h2)/1 var(--rk-font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.sl-scout__cols { display: grid; gap: var(--rk-s5); }
@media (min-width: 700px) { .sl-scout__cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.sl-tools { display: grid; }
.sl-tool {
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: var(--rk-s3);
  padding: 8px 0;
  border-bottom: 1px solid var(--rk-rule-1);
}
.sl-tool__name { font: 600 var(--rk-data-width) 0.95rem/1.2 var(--rk-font-data); }
.sl-tool__name small { display: block; font: 500 var(--rk-data-width) var(--rk-fs-label)/1.2 var(--rk-font-data); color: var(--rk-ink-3); letter-spacing: 0.02em; }
.sl-tool .sl-grade { justify-self: end; }
/* The playoff bracket (league.ts bracket): the rounds left to right, each matchup's two clubs, the
   better seed on top; a club that's out greys, a series won lights its wins, the viewer's club is
   marked as in the standings. Sideways on a phone. */
.sl-bracket-wrap { overflow-x: auto; }
.sl-bracket { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: var(--rk-s4); min-width: 720px; }
.sl-bracket__round { display: grid; grid-template-rows: auto 1fr; gap: var(--rk-s3); }
.sl-bracket__games { display: grid; align-content: space-around; gap: var(--rk-s3); }
.sl-bracket__name { margin: 0; font: 700 var(--rk-fs-label)/1.3 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-2); }
.sl-bracket__name small { display: block; font-weight: 600; letter-spacing: 0.06em; color: var(--rk-ink-3); }
.sl-bracket__match { display: grid; border: 1px solid var(--rk-rule-1); border-radius: var(--rk-r-1); background: var(--rk-paper-1); }
.sl-bracket__team { display: flex; align-items: center; justify-content: space-between; gap: var(--rk-s2); min-height: 2.6em; padding: 6px 10px; }
.sl-bracket__team + .sl-bracket__team { border-top: 1px solid var(--rk-rule-1); }
.sl-bracket__team b { font: 700 var(--rk-data-width) 0.95rem/1 var(--rk-font-data); font-variant-numeric: tabular-nums; }
.sl-bracket__team b.is-won { color: var(--rk-win); }
.sl-bracket__team.is-out { opacity: 0.5; }
.sl-bracket__team.is-open { font: 500 var(--rk-data-width) var(--rk-fs-small)/1.2 var(--rk-font-data); color: var(--rk-ink-3); }
.sl-bracket__team.is-mine { box-shadow: inset 3px 0 0 var(--rk-lamp); }

/* A position he's never played (lineup.ts gloveChip): the grade he'd start at, faint, no chip. */

.sl-scale { position: relative; height: 14px; }
.sl-scale::before {
  /* the printed 0-100 ruler: a tick every 10 */
  content: '';
  position: absolute;
  inset: 3px 0;
  background:
    linear-gradient(90deg, var(--rk-rule-2) 1px, transparent 1px) 0 0 / calc(100% / 10 - 0.1px) 100% repeat-x,
    linear-gradient(var(--rk-rule-1), var(--rk-rule-1)) 0 50% / 100% 1px no-repeat;
  border-right: 1px solid var(--rk-rule-2);
}
.sl-scale i {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: calc(var(--g) * 1%);
  background: var(--rk-blue);
  border-radius: 0 2px 2px 0;
}
.sl-scale i::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -3px;
  bottom: -3px;
  width: 4px;
  background: var(--rk-ink-1);
  border-radius: 1px;
}
.sl-scale--legend { height: 16px; font: 600 var(--rk-data-width) var(--rk-fs-label)/1 var(--rk-font-data); color: var(--rk-ink-3); }
.sl-scale--legend::before { display: none; }
.sl-scale--legend span { position: absolute; transform: translateX(-50%); top: 2px; }
.sl-overall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rk-s3); }
.sl-overall > div { display: grid; gap: 6px; justify-items: start; padding: var(--rk-s3); background: var(--rk-paper-1); border: 1px solid var(--rk-rule-1); }
.sl-overall dt { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }
.sl-overall dd { display: flex; align-items: center; gap: 10px; font: 600 var(--rk-data-width) var(--rk-fs-small)/1.2 var(--rk-font-data); color: var(--rk-ink-2); }

/* ------------------------------------------------------------------ footer */
/* The footer: the navy boards again, the kickplate along their top. */
.sl-footer {
  border-top: 6px solid var(--rk-lamp);
  background: var(--rk-ink-1);
  color: var(--rk-chalk-2);
  font: 500 var(--rk-fs-small)/1.5 var(--rk-font-data);
}
.sl-footer a { color: var(--rk-chalk-1); }
.sl-footer a:hover { color: var(--rk-lamp); }
.sl-footer__inner { max-width: var(--rk-page-max); margin: 0 auto; padding: var(--rk-s5) var(--rk-gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rk-s2) var(--rk-s5); }
.sl-footer .sl-wordmark { font-size: 1.3rem; padding-bottom: 8px; }

/* ------------------------------------------------------------------ app frame */
.sl-app { display: flex; flex-direction: column; min-height: 100vh; }

/* A red stripe that runs along the kickplate while a page loads (after a beat, so quick loads don't flicker). */
.sl-loadbar { position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; overflow: hidden; pointer-events: none; }
.is-loading .sl-loadbar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 30%;
  background: var(--rk-stitch);
  animation: sl-load 1.1s var(--rk-ease) 0.15s infinite both;
}
@keyframes sl-load { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

.sl-club--empty { padding: 8px 12px 6px; border-color: var(--rk-board-edge); font: 800 0.95rem/1 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; }

.sl-strip__inner { align-items: center; }
.sl-strip__end { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sl-strip__who { color: var(--rk-ink-1); text-decoration: none; }
a.sl-strip__who:hover { color: var(--rk-blue-ink); text-decoration: underline; }
.sl-strip__btn {
  padding: 4px 8px 3px;
  background: none;
  border: 1.5px solid var(--rk-ink-1);
  border-radius: var(--rk-r-0);
  color: var(--rk-ink-1);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
  cursor: pointer;
}
.sl-strip__btn:hover { background: var(--rk-ink-1); color: var(--rk-chalk-1); }
.sl-strip__btn[disabled] { cursor: progress; opacity: 0.7; }
@media (max-width: 719px) { .sl-strip__end { margin-left: 0; } }

/* Local development only: the dev server saw new code and offers a reload. */
.sl-devnote {
  position: fixed;
  right: var(--rk-s4);
  bottom: calc(var(--rk-s4) + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  padding: 10px 14px 8px;
  background: var(--rk-lamp);
  color: var(--rk-ink-1);
  border: 0;
  border-radius: var(--rk-r-0);
  box-shadow: var(--rk-shadow-lift);
  font: 800 0.95rem/1 var(--rk-font-display);
  letter-spacing: var(--rk-track-caps);
  text-transform: uppercase;
  cursor: pointer;
}

/* Every error lands here, on the red line; confirmations on the navy boards with the kickplate's edge. */
.sl-banner-slot:empty { display: none; }
.sl-banner-slot { display: grid; gap: var(--rk-s2); margin-bottom: calc(var(--rk-s5) - var(--rk-s7)); }
.sl-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rk-s4);
  padding: var(--rk-s3) var(--rk-s4);
  background: var(--rk-stitch);
  color: var(--rk-chalk-1);
  border-radius: var(--rk-r-0);
  box-shadow: var(--rk-shadow-paper);
  font: 600 0.95rem/1.4 var(--rk-font-text);
}
.sl-banner a { color: inherit; }
.sl-banner--outbid { background: var(--rk-outbid); color: var(--rk-ink-1); }
.sl-banner--ok { background: var(--rk-ink-1); color: var(--rk-chalk-1); box-shadow: inset 6px 0 0 var(--rk-lamp), var(--rk-shadow-paper); }
.sl-banner__close {
  flex: none;
  padding: 5px 8px 4px;
  background: none;
  border: 1.5px solid currentColor;
  border-radius: var(--rk-r-0);
  color: inherit;
  font: 700 var(--rk-fs-label)/1 var(--rk-font-display);
  letter-spacing: var(--rk-track-caps);
  text-transform: uppercase;
  cursor: pointer;
}

.sl-lede { max-width: 62ch; font-size: 1.05rem; line-height: 1.5; color: var(--rk-ink-2); }
.sl-lede a { color: var(--rk-ink-1); }
.sl-empty { max-width: 62ch; padding: var(--rk-s4) 0; border-top: 1px solid var(--rk-rule-1); border-bottom: 1px solid var(--rk-rule-1); color: var(--rk-ink-2); }
.sl-title--with-cap { display: flex; align-items: center; gap: var(--rk-s4); }
.sl-board__empty { font: 600 var(--rk-data-width) 1rem/1.4 var(--rk-font-data); color: var(--rk-chalk-2); }
.sl-ticket__lede { font-size: 0.95rem; line-height: 1.45; color: var(--rk-ink-2); }

/* ------------------------------------------------------------------ forms */
.sl-form { display: grid; gap: var(--rk-s4); }
.sl-field { display: grid; align-content: start; gap: 6px; }   /* fields side by side keep their tops in line */
.sl-field__label { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-2); }
.sl-input {
  width: 100%;
  padding: 10px 12px 9px;
  background: var(--rk-paper-0);
  color: var(--rk-ink-1);
  border: 1px solid var(--rk-rule-2);
  border-bottom: 2px solid var(--rk-ink-1);
  border-radius: var(--rk-r-0);
  font: 500 1rem/1.3 var(--rk-font-text);
}
.sl-input:focus-visible { outline: 3px solid var(--rk-blue); outline-offset: 1px; }
/* A password box's eye (ui.ts passwordInput): shows what's been typed; the slash shows while it does. */
.sl-reveal { position: relative; display: block; }
.sl-reveal .sl-input { padding-right: 44px; }
.sl-reveal__btn {
  position: absolute; top: 0; right: 0; bottom: 2px; width: 42px;
  display: grid; place-items: center; padding: 0;
  background: none; border: 0; color: var(--rk-ink-2); cursor: pointer;
}
.sl-reveal__btn:hover { color: var(--rk-ink-1); }
.sl-reveal__btn:focus-visible { outline: 3px solid var(--rk-blue); outline-offset: -3px; }
.sl-reveal__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-reveal__slash { display: none; }
.sl-reveal.is-shown .sl-reveal__slash { display: inline; }
.sl-confirm .sl-reveal { display: inline-block; }
.sl-field__hint { font: 500 var(--rk-data-width) var(--rk-fs-small)/1.35 var(--rk-font-data); color: var(--rk-ink-3); }
.sl-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rk-s2) var(--rk-s4); font: 600 var(--rk-data-width) var(--rk-fs-small)/1.3 var(--rk-font-data); }
.sl-btn[disabled] { opacity: 0.55; cursor: default; }
.sl-btn[disabled]:hover { background: var(--rk-stitch); color: var(--rk-chalk-1); }
.sl-btn--ghost[disabled]:hover { background: transparent; color: var(--rk-ink-1); }

/* ------------------------------------------------------------------ the clubs */
.sl-clubgrid { display: grid; gap: var(--rk-s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); }
/* Six clubs a division: two rows of three. */
@media (min-width: 900px) { .sl-clubgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sl-clubcard {
  display: grid;
  gap: var(--rk-s3);
  align-content: start;
  padding: var(--rk-s3) var(--rk-s4) var(--rk-s4);
  background: var(--rk-paper-0);
  border: 1px solid var(--rk-rule-1);
  border-top: 6px solid var(--c1);
  box-shadow: var(--rk-shadow-paper);
}
.sl-clubcard.is-owned { background: transparent; box-shadow: none; }
.sl-clubcard.is-mine { background: var(--rk-highlight); }
.sl-clubcard__name { display: flex; align-items: center; gap: var(--rk-s3); min-width: 0; text-decoration: none; }
.sl-clubcard__name:hover .sl-clubcard__city { text-decoration: underline; }
.sl-clubcard__city { display: block; font: 400 1.15rem/1.05 var(--rk-font-varsity); letter-spacing: 0.01em; }
.sl-clubcard__nick { display: block; font: 600 var(--rk-data-width) var(--rk-fs-small)/1.2 var(--rk-font-data); color: var(--rk-ink-2); }
.sl-clubcard__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--rk-s2);
  padding-top: var(--rk-s2);
  border-top: 1px solid var(--rk-rule-1);
  font: 600 var(--rk-data-width) var(--rk-fs-label)/1.2 var(--rk-font-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rk-ink-3);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ getting a club, naming it, the first week */
.sl-placements { max-width: 62ch; gap: 0; }
.sl-placement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--rk-s3);
  align-items: start;
  padding: var(--rk-s3) 0;
  border-top: 1px solid var(--rk-rule-1);
  font: 500 var(--rk-data-width) var(--rk-fs-small)/1.4 var(--rk-font-data);
  color: var(--rk-ink-2);
  cursor: pointer;
}
.sl-placement input[type="radio"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--rk-blue); }
.sl-placement b { display: block; font: 700 var(--rk-data-width) var(--rk-fs-data)/1.3 var(--rk-font-data); color: var(--rk-ink-1); }
.sl-placement select { margin-top: var(--rk-s2); }
.sl-placements .sl-form__actions { padding-top: var(--rk-s4); border-top: 1px solid var(--rk-rule-1); }
.sl-naming__fields { display: grid; gap: var(--rk-s4); }
@media (min-width: 640px) { .sl-naming__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sl-swatches { display: flex; flex-wrap: wrap; gap: var(--rk-s2); margin: 0; padding: 0; border: 0; }
.sl-swatches legend { width: 100%; margin-bottom: var(--rk-s2); }
.sl-swatch { position: relative; cursor: pointer; }
.sl-swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sl-swatch span {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c1);
  color: var(--c2);
  box-shadow: inset 0 0 0 2px var(--c2);
  font: 400 1rem/1 var(--rk-font-varsity);
}
.sl-swatch input:checked + span { outline: 3px solid var(--rk-ink-1); outline-offset: 2px; }
.sl-swatch input:focus-visible + span { outline: 3px solid var(--rk-blue); outline-offset: 2px; }
.sl-checklist { display: grid; gap: var(--rk-s2); max-width: 70ch; margin: 0; padding-left: 1.4em; }
.sl-checklist li::marker { font: 700 var(--rk-data-width) var(--rk-fs-data)/1 var(--rk-font-data); color: var(--rk-stitch-ink); }

/* ------------------------------------------------------------------ running the league: the admin page */
.sl-adminbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rk-s2) var(--rk-s3); }
.sl-adminbar__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rk-s2); max-width: 44rem; }
.sl-adminbar__form .sl-input { flex: 1 1 14rem; width: auto; }
.sl-linkbox {
  display: grid;
  gap: var(--rk-s2);
  max-width: 44rem;
  padding: var(--rk-s3) var(--rk-s4);
  background: var(--rk-paper-0);
  border: 1px solid var(--rk-rule-2);
  border-left: 4px solid var(--rk-win);
  font: 500 var(--rk-data-width) var(--rk-fs-small)/1.4 var(--rk-font-data);
}
.sl-linkbox b { color: var(--rk-ink-1); }
.sl-linkbox__row { display: flex; gap: var(--rk-s2); }
.sl-linkbox__row .sl-input { flex: 1; min-width: 0; font-family: var(--rk-font-data); }
.sl-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; font: 600 var(--rk-data-width) var(--rk-fs-small)/1.35 var(--rk-font-data); white-space: normal; }
.sl-confirm .sl-input { width: 11rem; padding: 6px 8px 5px; }
/* One page in parts: the current part is underlined with the red line. */
.sl-tabs { display: flex; flex-wrap: wrap; gap: var(--rk-s1) var(--rk-s5); border-bottom: 2px solid var(--rk-ink-1); }
.sl-tabs a {
  margin-bottom: -2px;
  padding: var(--rk-s2) 0 var(--rk-s1);
  border-bottom: 4px solid transparent;
  color: var(--rk-ink-2);
  font: 800 1.05rem/1 var(--rk-font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.sl-tabs a:hover { color: var(--rk-ink-1); }
.sl-tabs a[aria-current="page"] { color: var(--rk-ink-1); border-bottom-color: var(--rk-stitch); }
/* Starting the league over: what goes, said in stitch red, around the button that does it. */
.sl-danger { display: grid; gap: var(--rk-s3); max-width: 62rem; padding: var(--rk-s4); background: var(--rk-paper-0); border: 2px solid var(--rk-stitch-ink); }
.sl-danger p { max-width: 75ch; }
.sl-danger b { color: var(--rk-stitch-ink); }
.sl-danger .sl-placements { max-width: none; }
.sl-danger .sl-adminbar__form { padding-top: var(--rk-s3); border-top: 1px solid var(--rk-rule-1); max-width: none; }
.sl-danger__title { font: var(--rk-title-pose) 800 var(--rk-title-width) var(--rk-fs-h3)/1 var(--rk-font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--rk-stitch-ink); }
.sl-btn--danger { background: var(--rk-stitch-ink); color: var(--rk-chalk-1); box-shadow: inset 0 0 0 2px var(--rk-ink-1); }
.sl-btn--danger:hover { background: var(--rk-ink-1); color: var(--rk-chalk-1); }
.sl-errorlog { display: grid; gap: var(--rk-s2); margin: 0; padding: 0; list-style: none; }
.sl-errorlog__item summary { cursor: pointer; font: 500 var(--rk-data-width) var(--rk-fs-small)/1.4 var(--rk-font-data); }
.sl-errorlog__item code { font: 700 var(--rk-data-width) var(--rk-fs-small)/1.4 var(--rk-font-data); }
.sl-errorlog__trace {
  max-height: 24rem;
  overflow: auto;
  margin: var(--rk-s2) 0 0;
  padding: var(--rk-s3);
  background: var(--rk-paper-2);
  font: 400 0.75rem/1.45 ui-monospace, Consolas, monospace;
  white-space: pre;
}

/* ------------------------------------------------------------------ lineup card editor */

.sl-editbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rk-s2) var(--rk-s4);
  padding: var(--rk-s3) var(--rk-s4);
  background: var(--rk-paper-2);
  border-left: 4px solid var(--rk-rule-2);
  box-shadow: var(--rk-shadow-paper);
}
.sl-editbar.is-dirty { background: var(--rk-highlight); border-left-color: var(--rk-stitch); }

.sl-editbar__buttons { display: flex; flex-wrap: wrap; gap: var(--rk-s2); }
.sl-editbar .sl-btn { padding: 9px 12px 7px; font-size: 0.9rem; }

/* Selects on the cards read as marker on the card, with a small caret. */

.sl-move {
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  background: var(--rk-paper-0);
  border: 1px solid var(--rk-rule-2);
  border-radius: var(--rk-r-1);
  color: var(--rk-ink-2);
  font: 700 var(--rk-data-width) 0.9rem/1 var(--rk-font-data);
  cursor: pointer;
}
.sl-move:hover { border-color: var(--rk-ink-1); color: var(--rk-ink-1); }
.sl-move[disabled] { opacity: 0.3; cursor: default; }
.sl-move[disabled]:hover { border-color: var(--rk-rule-2); color: var(--rk-ink-2); }
/* On a phone each batter takes two ruled lines: name and position, then grades and the move buttons. */
@media (max-width: 479px) {

  .sl-editbar { gap: var(--rk-s2); padding: var(--rk-s2) var(--rk-s3); }
  .sl-editbar .sl-btn { padding: 7px 8px 5px; font-size: 0.78rem; letter-spacing: 0.06em; }
  .sl-editbar__buttons { gap: 6px; }
}

/* Touch screens: every control a thumb can hit, about 40px, while a mouse keeps the desktop's density. */
@media (pointer: coarse) {
  .sl-btn, .sl-strip__btn, .sl-input { min-height: 40px; }
  .sl-btn--sm { min-height: 36px; padding-inline: 12px; }
  .sl-move { width: 2.4rem; height: 2.4rem; }

}

/* The pitching staff: the second card on the manager's clipboard. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------ help for newcomers (tips.ts) */
/* The home page's opening for a visitor: what this is, and the way in. */
.sl-intro {
  display: grid; gap: var(--rk-s3); padding: var(--rk-s5) var(--rk-s5) var(--rk-s5);
  background: var(--rk-ink-1); color: var(--rk-chalk-1);
  border-bottom: 10px solid var(--rk-lamp); box-shadow: var(--rk-shadow-lift);
}
.sl-intro .sl-eyebrow { color: var(--rk-lamp); }
.sl-intro__title { font: 400 var(--rk-fs-h1)/0.95 var(--rk-font-varsity); letter-spacing: 0.01em; text-wrap: balance; }
.sl-intro__lede { max-width: 68ch; font: 400 var(--rk-fs-body)/var(--rk-lh-body) var(--rk-font-text); color: var(--rk-chalk-2); }
.sl-intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rk-s2) var(--rk-s3); font: 600 var(--rk-fs-small)/1.3 var(--rk-font-data); }
.sl-intro .sl-btn--ghost { background: transparent; color: var(--rk-chalk-1); box-shadow: inset 0 0 0 2px var(--rk-chalk-2); }
.sl-intro .sl-btn--ghost:hover { background: var(--rk-chalk-1); color: var(--rk-ink-1); }
.sl-intro a:not(.sl-btn) { color: var(--rk-chalk-1); }
.sl-intro a:not(.sl-btn):hover { color: var(--rk-lamp); }
.sl-pagehead .sl-intro__actions { margin-top: var(--rk-s3); }
/* How it works. */
.sl-about p, .sl-about__list { max-width: 68ch; font: 400 var(--rk-fs-body)/var(--rk-lh-body) var(--rk-font-text); }
.sl-about__list { display: grid; gap: var(--rk-s2); margin: 0; padding-left: 1.2em; }
/* A page's hint, until its owner has got it. */
.sl-hint {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rk-s2) var(--rk-s4);
  padding: var(--rk-s3) var(--rk-s4); background: var(--rk-highlight); border-left: 4px solid var(--rk-lamp);
  border-radius: var(--rk-r-1);
}
.sl-hint__text { max-width: 72ch; font: 500 var(--rk-data-width) var(--rk-fs-small)/1.45 var(--rk-font-data); }
.sl-hint__text b { margin-right: 0.4em; font-family: var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-stitch-ink); }
.sl-hint__actions { display: flex; align-items: center; gap: var(--rk-s3); }
.sl-hint__off, .sl-linkbtn {
  padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}
.sl-hint__off { font: 600 var(--rk-data-width) var(--rk-fs-small)/1.3 var(--rk-font-data); color: var(--rk-ink-2); }
.sl-hint__off:hover, .sl-linkbtn:hover { color: var(--rk-stitch-ink); }
/* The tour: a card at a time over the page. */
.sl-tour {
  width: min(32rem, calc(100vw - 2 * var(--rk-gutter))); max-height: calc(100dvh - 2 * var(--rk-gutter)); padding: 0;
  background: var(--rk-paper-0); color: var(--rk-ink-1); border: 0; border-top: 6px solid var(--rk-lamp);
  border-radius: var(--rk-r-0); box-shadow: var(--rk-shadow-lift);
}
.sl-tour::backdrop { background: var(--rk-scrim); }
.sl-tour__card { display: grid; gap: var(--rk-s3); padding: var(--rk-s5) var(--rk-s5) var(--rk-s4); }
.sl-tour__title { font: var(--rk-title-pose) 800 var(--rk-title-width) var(--rk-fs-h2)/1 var(--rk-font-display); text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance; }
.sl-tour__body { font: 400 var(--rk-fs-body)/var(--rk-lh-body) var(--rk-font-text); }
.sl-tour__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rk-s3); margin-top: var(--rk-s2); }
.sl-tour__dots { display: flex; gap: 6px; }
.sl-tour__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--rk-rule-2); }
.sl-tour__dots span.is-on { background: var(--rk-stitch-ink); }
.sl-tour__actions { display: flex; flex-wrap: wrap; gap: var(--rk-s2); margin-left: auto; }

/* ------------------------------------------------------------------ panels, the club page's starters */
/* The boards: a white panel, square, its head over the yellow kickplate; tables inside take its surface. */
.sl-panel {
  --rk-surface: var(--rk-paper-0);
  min-width: 0;
  background: var(--rk-paper-0);
  border: 1px solid var(--rk-rule-1);
  border-radius: var(--rk-r-0);
  box-shadow: var(--rk-shadow-paper);
  overflow: hidden;
}
.sl-panel--pad { display: grid; gap: var(--rk-s4); padding: var(--rk-s4) var(--rk-s5) var(--rk-s5); }
@media (min-width: 720px) { .sl-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sl-starters { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sl-starters li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--rk-s2);
  padding: 5px 0;
  border-bottom: 1px solid var(--rk-rule-1);
  font: 600 var(--rk-data-width) var(--rk-fs-data)/1.2 var(--rk-font-data);
}
.sl-starters a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.sl-starters a:hover { text-decoration: underline; }
.sl-starters__pos { font: 800 var(--rk-fs-small)/1 var(--rk-font-display); letter-spacing: 0.14em; color: var(--rk-ink-3); }
.sl-result.is-tie { border-top-color: var(--rk-lamp); }
.sl-result.is-tie .sl-result__wl span { color: var(--rk-lamp-ink); }

/* ------------------------------------------------------------------ the depth chart */
/* A segmented switch, like the switches on the boards: the side showing filled in navy. */
.sl-seg { display: inline-flex; flex-wrap: wrap; width: fit-content; background: var(--rk-paper-0); border: 2px solid var(--rk-ink-1); }
.sl-seg button {
  padding: 7px 12px 5px;
  border: 0;
  background: transparent;
  color: var(--rk-ink-1);
  font: 700 0.86rem/1 var(--rk-font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.sl-seg button + button { border-left: 2px solid var(--rk-ink-1); }
.sl-seg button:hover { background: var(--rk-paper-2); }
.sl-seg button[aria-current='true'] { background: var(--rk-ink-1); color: var(--rk-chalk-1); }
.sl-editbar__note { margin-right: auto; font: 700 var(--rk-data-width) var(--rk-fs-small)/1.3 var(--rk-font-data); letter-spacing: 0.04em; color: var(--rk-ink-2); }
.sl-editbar.is-dirty .sl-editbar__note { color: var(--rk-stitch-ink); }

.sl-depth-top { display: grid; gap: var(--rk-s5); align-items: start; }
@media (min-width: 1000px) { .sl-depth-top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

/* The whiteboard: who starts, where they line up, a grade under each name, in the coach's marker. */
.sl-chalk { display: block; width: 100%; height: auto; }
.sl-chalk__turf { fill: var(--rk-paper-0); stroke: var(--rk-rule-2); stroke-width: 10; }
.sl-chalk__lines line { stroke: color-mix(in srgb, var(--rk-blue) 25%, transparent); stroke-width: 2; stroke-dasharray: 8 6; }
.sl-chalk__scrimmage { fill: var(--rk-stitch); opacity: 0.8; }
.sl-chalk__man circle { fill: var(--rk-paper-0); stroke: var(--rk-ink-hand); stroke-width: 2.5; }
.sl-chalk__man text { text-anchor: middle; font-family: var(--rk-font-data); }
.sl-chalk .sl-chalk__pos { fill: var(--rk-stitch-ink); font: 700 18px var(--rk-font-hand); }
.sl-chalk__name { fill: var(--rk-ink-1); font-size: 15px; font-weight: 700; }
.sl-chalk__grade { font-size: 13px; font-weight: 700; }
.sl-chalk__man rect[data-g='80'] { fill: var(--rk-g80); } .sl-chalk__man rect[data-g='80'] + text { fill: var(--rk-g80-ink); }
.sl-chalk__man rect[data-g='75'] { fill: var(--rk-g75); } .sl-chalk__man rect[data-g='75'] + text { fill: var(--rk-g75-ink); }
.sl-chalk__man rect[data-g='70'] { fill: var(--rk-g70); } .sl-chalk__man rect[data-g='70'] + text { fill: var(--rk-g70-ink); }
.sl-chalk__man rect[data-g='65'] { fill: var(--rk-g65); } .sl-chalk__man rect[data-g='65'] + text { fill: var(--rk-g65-ink); }
.sl-chalk__man rect[data-g='60'] { fill: var(--rk-g60); } .sl-chalk__man rect[data-g='60'] + text { fill: var(--rk-g60-ink); }
.sl-chalk__man rect[data-g='55'] { fill: var(--rk-g55); } .sl-chalk__man rect[data-g='55'] + text { fill: var(--rk-g55-ink); }
.sl-chalk__man rect[data-g='50'] { fill: var(--rk-g50); } .sl-chalk__man rect[data-g='50'] + text { fill: var(--rk-g50-ink); }
.sl-chalk__man rect[data-g='45'] { fill: var(--rk-g45); } .sl-chalk__man rect[data-g='45'] + text { fill: var(--rk-g45-ink); }
.sl-chalk__man rect[data-g='40'] { fill: var(--rk-g40); } .sl-chalk__man rect[data-g='40'] + text { fill: var(--rk-g40-ink); }
.sl-chalk__man rect[data-g='35'] { fill: var(--rk-g35); } .sl-chalk__man rect[data-g='35'] + text { fill: var(--rk-g35-ink); }
.sl-chalk__man rect[data-g='30'] { fill: var(--rk-g30); } .sl-chalk__man rect[data-g='30'] + text { fill: var(--rk-g30-ink); }
.sl-chalk__man rect[data-g='25'] { fill: var(--rk-g25); } .sl-chalk__man rect[data-g='25'] + text { fill: var(--rk-g25-ink); }
.sl-chalk__man rect[data-g='20'] { fill: var(--rk-g20); } .sl-chalk__man rect[data-g='20'] + text { fill: var(--rk-g20-ink); }

/* The coordinators' orders: a slider each, the two ends named under it. */
.sl-orders { display: grid; gap: var(--rk-s5); align-content: start; padding: var(--rk-s4) var(--rk-s5) var(--rk-s5); background: var(--rk-paper-0); border: 1px solid var(--rk-rule-1); border-radius: var(--rk-r-0); box-shadow: var(--rk-shadow-paper); }
.sl-orders h3 { font: 800 var(--rk-fs-h3)/1.1 var(--rk-font-display); letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: var(--rk-s2); border-bottom: 4px solid var(--rk-lamp); }
.sl-order { display: grid; gap: 6px; }
.sl-order__label { display: flex; justify-content: space-between; gap: var(--rk-s3); font: 700 var(--rk-fs-small)/1.2 var(--rk-font-data); }
.sl-order__label b { color: var(--rk-blue-ink); font-variant-numeric: tabular-nums; }
.sl-order__range { width: 100%; accent-color: var(--rk-blue); }
.sl-order__ends { display: flex; justify-content: space-between; gap: var(--rk-s3); font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }

/* The units: a grade for the unit, the line's cohesion, every position's order. */
.sl-units { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: var(--rk-s5); align-items: start; }
.sl-unit { --rk-surface: var(--rk-paper-0); min-width: 0; background: var(--rk-paper-0); border: 1px solid var(--rk-rule-1); border-radius: var(--rk-r-0); box-shadow: var(--rk-shadow-paper); overflow: hidden; }
.sl-unit__head { display: flex; align-items: center; justify-content: space-between; gap: var(--rk-s3); padding: var(--rk-s3) var(--rk-s4) 10px; border-bottom: 4px solid var(--rk-lamp); background: var(--rk-paper-0); }
.sl-unit__head h3 { font: 800 var(--rk-fs-h3)/1.1 var(--rk-font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.sl-unit__cohesion { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--rk-s3); padding: var(--rk-s2) var(--rk-s4); border-bottom: 1px solid var(--rk-rule-1); font: 700 var(--rk-data-width) var(--rk-fs-small)/1 var(--rk-font-data); }
.sl-unit__cohesion > span:first-child { font-size: var(--rk-fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rk-ink-3); }
.sl-unit__cohesion .sl-meter { margin-top: 0; }
.sl-unit__cohesion .sl-meter i { background: var(--rk-win); }
.sl-unit .sl-table-wrap { padding: 0 var(--rk-s2) var(--rk-s2); }
.sl-depth tr.sl-depth__pos th {
  padding-top: var(--rk-s3);
  border-bottom: 1px solid var(--rk-rule-2);
  font: 800 0.86rem/1.2 var(--rk-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rk-stitch-ink);
}
.sl-depth tr.sl-depth__pos:hover { --row-bg: var(--rk-surface); }
.sl-depth__n { width: 1.6rem; color: var(--rk-ink-3); }
.sl-depth__row.is-starter .sl-depth__n { color: var(--rk-stitch-ink); font-weight: 700; }
.sl-depth__row:not(.is-starter) th { font-weight: 500; color: var(--rk-ink-2); }
.sl-depth__row.is-out th a { text-decoration: line-through; text-decoration-color: var(--rk-loss); }
.sl-depth__out { margin-left: 6px; font: 700 var(--rk-fs-label)/1 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-loss); }
.sl-depth__move { display: flex; justify-content: flex-end; gap: 4px; }
.sl-depth__move .sl-btn { padding: 4px 8px 3px; font-style: normal; }
.sl-depth__move .sl-btn:disabled { opacity: 0.25; cursor: default; }

/* ------------------------------------------------------------------ the game page (mockup/game.html) */
.sl-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--rk-s3); padding: var(--rk-s3) var(--rk-s4) 10px; border-bottom: 4px solid var(--rk-lamp); background: var(--rk-paper-0); }
.sl-panel__head h2 { font: 800 var(--rk-fs-h2)/1 var(--rk-font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.sl-panel__head > span, .sl-panel__head > a { font: 700 0.82rem/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); text-decoration: none; }
.sl-panel__head > a { color: var(--rk-blue-ink); }
.sl-panel__head > a:hover { color: var(--rk-stitch-ink); }
.sl-panel__body { padding: var(--rk-s4); }
.sl-panel__note { padding: var(--rk-s4); color: var(--rk-ink-3); font-size: var(--rk-fs-small); }
.sl-linkbtn { padding: 0; border: 0; background: none; color: var(--rk-blue-ink); font: inherit; text-decoration: underline; cursor: pointer; }
.sl-linkbtn:hover { color: var(--rk-stitch-ink); }
.sl-tag--gold { background: var(--rk-lamp); border-color: var(--rk-lamp); color: var(--rk-ink-1); }   /* the power play's kickplate tag */

/* The scoreboard over center ice: each club's crest and name in cool white, the score in red LED,
   the period and clock in amber in the box between them. */
.sl-bug { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); overflow: hidden; background: var(--rk-board-1); border: 6px solid var(--rk-board-3); box-shadow: var(--rk-shadow-board); }
.sl-bug__team { position: relative; display: flex; align-items: center; gap: var(--rk-s4); min-width: 0; padding: var(--rk-s4) var(--rk-s5); }
.sl-bug__team::before { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: linear-gradient(90deg, var(--c1) 0 50%, var(--c2) 50%); }   /* the club's colours along the foot of its side */
.sl-bug__team--home { flex-direction: row-reverse; text-align: right; }
.sl-bug__team > * { position: relative; }
.sl-bug__name { display: grid; gap: 4px; min-width: 0; color: var(--rk-chalk-1); text-decoration: none; }
.sl-bug__name small { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--rk-chalk-3); }
.sl-bug__name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 clamp(1.05rem, 2.2vw, 1.4rem)/1.05 var(--rk-font-varsity); color: var(--rk-chalk-2); }
.sl-bug__score { margin-left: auto; font: 400 var(--rk-fs-hero)/0.9 var(--rk-font-led); color: var(--rk-led); text-shadow: var(--rk-led-glow); font-variant-numeric: tabular-nums; }
.sl-bug__team--home .sl-bug__score { margin-left: 0; margin-right: auto; }
.sl-bug__team.is-winner .sl-bug__name b { color: var(--rk-chalk-1); }
.sl-bug__mid { display: grid; align-content: center; justify-items: center; gap: var(--rk-s2); padding: var(--rk-s3) var(--rk-s5); background: var(--rk-board-2); border-inline: 2px solid var(--rk-board-3); }
.sl-bug__q { font: 400 1.9rem/1 var(--rk-font-led); letter-spacing: 0.04em; text-transform: uppercase; color: var(--rk-amber); text-shadow: var(--rk-amber-glow); }
.sl-bug__quarters { border-collapse: collapse; font: 400 1.15rem/1.1 var(--rk-font-led); font-variant-numeric: tabular-nums; color: var(--rk-chalk-2); }
.sl-bug__quarters th, .sl-bug__quarters td { padding: 3px 8px; text-align: center; }
.sl-bug__quarters thead th { font: 700 var(--rk-fs-label)/1 var(--rk-font-display); letter-spacing: 0.18em; color: var(--rk-chalk-3); }
.sl-bug__quarters tbody th { text-align: left; font: 700 0.86rem/1 var(--rk-font-display); letter-spacing: 0.12em; color: var(--rk-chalk-1); }
.sl-bug__quarters b { font-weight: 400; color: var(--rk-led); }
@media (max-width: 760px) {
  .sl-bug { grid-template-columns: 1fr 1fr; }
  .sl-bug__mid { grid-column: 1 / -1; grid-row: 2; border-inline: 0; border-top: 2px solid var(--rk-board-3); }
  .sl-bug__team { padding: var(--rk-s3); gap: var(--rk-s2); }
  .sl-bug__team .sl-cap { display: none; }
}

.sl-gamegrid { display: grid; gap: var(--rk-s5); align-items: start; }
@media (min-width: 1000px) { .sl-gamegrid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

/* The sheet, the play on it a lane at a time: the ice with its lines, plays in navy, passes in blue,
   dump-ins dotted, the red line for where play starts. */
svg.sl-field { display: block; width: 100%; height: auto; }   /* svg: the form's .sl-field shares the name */
.sl-field__turf1 { fill: var(--rk-paper-0); }
.sl-field__turf2 { fill: var(--rk-paper-1); }
.sl-field__ten { stroke: var(--rk-blue); stroke-width: 2.4; stroke-opacity: 0.6; }
.sl-field__five { stroke: var(--rk-rule-2); stroke-width: 1.4; stroke-opacity: 0.6; }
.sl-field__num { fill: var(--rk-ink-3); fill-opacity: 0.6; font: 400 34px var(--rk-font-varsity); text-anchor: middle; }
.sl-field__zone { font: 800 34px var(--rk-font-display); letter-spacing: 4px; text-anchor: middle; dominant-baseline: middle; }
.sl-field__los { fill: var(--rk-stitch); opacity: 0.9; }
.sl-field__dot { fill: var(--rk-paper-0); stroke: var(--rk-ink-1); stroke-width: 2.5; }
.sl-field__chalk { fill: var(--rk-ink-1); }
.sl-field__goldfill { fill: var(--rk-lamp); }
.sl-field__run { stroke: var(--rk-ink-1); stroke-width: 5; }
.sl-field__run.is-loss { stroke: var(--rk-loss); }
.sl-field__pass { fill: none; stroke: var(--rk-blue); stroke-width: 4.5; stroke-dasharray: 12 8; }
.sl-field__inc { fill: none; stroke: var(--rk-rule-2); stroke-width: 3.5; stroke-dasharray: 6 9; }
.sl-field__miss { stroke: var(--rk-loss); stroke-width: 4; }
.sl-field__kick { fill: none; stroke: var(--rk-ink-2); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
svg.sl-field .sl-field__label { fill: var(--rk-ink-1); font: 700 20px var(--rk-font-data); paint-order: stroke; stroke: var(--rk-paper-0); stroke-width: 4; }
.sl-field__flag { fill: var(--rk-lamp); }
.sl-field__flagtext { fill: var(--rk-ink-1); font: 800 17px var(--rk-font-display); letter-spacing: 1.5px; text-anchor: middle; }
.sl-drive__sum { padding: var(--rk-s3) var(--rk-s1) 0; font: 500 var(--rk-data-width) var(--rk-fs-small)/1.4 var(--rk-font-data); color: var(--rk-ink-2); }
.sl-drive__sum b { color: var(--rk-ink-1); }
.sl-drive__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: var(--rk-s2) var(--rk-s1) 0; font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }
.sl-drive__legend span { display: inline-flex; align-items: center; gap: 6px; }
.sl-drive__legend i { width: 22px; border-top: 3px solid var(--rk-ink-1); }
.sl-drive__legend i.is-pass { border-top: 3px dashed var(--rk-blue); }
.sl-drive__legend i.is-inc { border-top: 3px dashed var(--rk-rule-2); }
.sl-drive__legend i.is-kick { border-top: 3px dotted var(--rk-ink-2); }
.sl-drive__legend i.is-los { border-top: 3px solid var(--rk-stitch); }

/* Every drive, a row each: pick one to put it on the field. */
.sl-drives { display: grid; max-height: 340px; overflow-y: auto; margin: 0; padding: 0 0 var(--rk-s2); list-style: none; border-top: 1px solid var(--rk-rule-1); }
.sl-drives__row {
  display: grid; grid-template-columns: 5.5rem 2.4rem minmax(0, 1fr) auto; align-items: center; gap: var(--rk-s2);
  width: 100%; padding: 6px var(--rk-s4); border: 0; border-bottom: 1px solid var(--rk-rule-1); background: transparent;
  color: var(--rk-ink-2); font: 600 var(--rk-data-width) var(--rk-fs-small)/1.2 var(--rk-font-data); text-align: left; cursor: pointer;
}
.sl-drives__row:hover { background: var(--rk-paper-1); color: var(--rk-ink-1); }
.sl-drives__row.is-open { background: var(--rk-highlight); color: var(--rk-ink-1); box-shadow: inset 3px 0 0 var(--rk-stitch); }
.sl-drives__team { display: inline-flex; align-items: center; gap: 6px; color: var(--rk-ink-1); }
.sl-drives__q { color: var(--rk-ink-3); }
.sl-drives__end { font-weight: 700; }
.sl-drives__row.is-score .sl-drives__end { color: var(--rk-stitch-ink); }

/* Win probability: the home club's chance, its side shaded red, the visitors' in blue. */
.sl-wpnow { display: flex; align-items: baseline; justify-content: space-between; padding: var(--rk-s3) var(--rk-s4) 0; font: 700 var(--rk-fs-small)/1 var(--rk-font-data); }
.sl-wpnow span { display: inline-flex; align-items: center; gap: 6px; }
.sl-wpnow b { font: 800 2rem/1 var(--rk-font-display); }
.sl-wpchart { display: block; width: 100%; height: auto; padding: 0 var(--rk-s3) var(--rk-s3); }
.sl-wpchart__rule { stroke: var(--rk-rule-1); stroke-width: 1; }
.sl-wpchart__q, .sl-wpchart__side { fill: var(--rk-ink-3); font: 700 10px var(--rk-font-data); }
.sl-wpchart__even { stroke: var(--rk-rule-2); stroke-dasharray: 3 4; }
.sl-wpchart__away { fill: var(--rk-blue); opacity: 0.18; }
.sl-wpchart__home { fill: var(--rk-stitch); opacity: 0.22; }
.sl-wpchart__line { fill: none; stroke: var(--rk-ink-1); stroke-width: 2.2; stroke-linejoin: round; }

/* The team stats face to face, a bar each way. */
.sl-vs { display: grid; gap: var(--rk-s3); padding: var(--rk-s4); }
.sl-vs__row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem; align-items: center; gap: var(--rk-s2); font: 700 var(--rk-data-width) var(--rk-fs-data)/1.2 var(--rk-font-data); font-variant-numeric: tabular-nums; }
.sl-vs__row b:last-child { text-align: right; }
.sl-vs__mid { display: grid; gap: 5px; text-align: center; }
.sl-vs__mid > span { font-size: var(--rk-fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rk-ink-3); }
.sl-vs__bars { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.sl-vs__bars .sl-meter { display: block; height: 5px; margin-top: 0; }
.sl-meter--left { transform: scaleX(-1); }
.sl-vs__bars .sl-meter--left i { background: var(--rk-blue); }
.sl-vs__bars .sl-meter:not(.sl-meter--left) i { background: var(--rk-stitch); }

.sl-gameleaders { margin: 0; padding: 0; list-style: none; }
.sl-gameleaders li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--rk-s3); padding: var(--rk-s3) var(--rk-s4); border-bottom: 1px solid var(--rk-rule-1); }
.sl-gameleaders li:last-child { border-bottom: 0; }
.sl-gameleaders__cat { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }
.sl-gameleaders__who { display: grid; min-width: 0; line-height: 1.3; }
.sl-gameleaders__who a { font-weight: 700; text-decoration: none; }
.sl-gameleaders__who a:hover { text-decoration: underline; }
.sl-gameleaders__who small { color: var(--rk-ink-3); font-size: var(--rk-fs-small); }
.sl-gameleaders__num { text-align: right; font: 800 var(--rk-title-width) 1.25rem/1.1 var(--rk-font-display); }
.sl-gameleaders__num small { display: block; font: 600 var(--rk-data-width) var(--rk-fs-label)/1 var(--rk-font-data); color: var(--rk-ink-3); }
.sl-boxtable caption { display: table-caption; text-align: left; padding-bottom: var(--rk-s2); }
.sl-boxtable caption .sl-cap { margin-right: 6px; vertical-align: middle; }

/* Play by play, drive by drive. */
ol.sl-pbp { display: grid; gap: var(--rk-s5); margin: 0; padding: 0; list-style: none; }
.sl-pbpdrive__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--rk-s2); padding-bottom: var(--rk-s2); border-bottom: 2px solid var(--rk-rule-2); font: 700 var(--rk-data-width) var(--rk-fs-data)/1.2 var(--rk-font-data); }
.sl-pbpdrive__sum { margin-left: auto; font-weight: 500; font-size: var(--rk-fs-small); color: var(--rk-ink-2); }
.sl-pbpdrive__sum b { color: var(--rk-ink-1); }
.sl-pbplays { margin: 0; padding: 0; list-style: none; }
.sl-pbplays li { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) 3rem; align-items: start; gap: var(--rk-s3); padding: var(--rk-s2); border-bottom: 1px solid var(--rk-rule-1); }
.sl-pbplays li.is-big { background: color-mix(in srgb, var(--rk-stitch) 9%, var(--rk-paper-0)); box-shadow: inset 3px 0 0 var(--rk-stitch); }
.sl-pbplays__dd { font: 700 var(--rk-fs-label)/1.35 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-2); }
.sl-pbplays__dd small { display: block; font-weight: 600; color: var(--rk-ink-3); }
.sl-pbplays p { font-size: var(--rk-fs-small); color: var(--rk-ink-2); }
.sl-pbplays__score { margin-left: 6px; font-weight: 700; color: var(--rk-stitch-ink); white-space: nowrap; }
.sl-pbplays__yds { font: 700 var(--rk-fs-data)/1.35 var(--rk-font-data); text-align: right; color: var(--rk-ink-3); }
.sl-pbplays__yds.is-up { color: var(--rk-win); }
.sl-pbplays__yds.is-down { color: var(--rk-loss); }

/* ------------------------------------------------------------------ on the air (live/football.ts) */
/* The latest play, called in a line under the scoreboard on its black housing, the edge lit red when
   it's a goal. */
.sl-callbox { display: grid; gap: 4px; padding: var(--rk-s3) var(--rk-s4); background: var(--rk-board-1); border-left: 4px solid var(--rk-board-3); font: 600 1.05rem/1.35 var(--rk-font-data); color: var(--rk-chalk-1); }
.sl-callbox span { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--rk-chalk-3); }
.sl-callbox.is-big { border-left-color: var(--rk-led); background: linear-gradient(90deg, color-mix(in srgb, var(--rk-led) 18%, var(--rk-board-1)), var(--rk-board-1) 70%); }
.sl-feed { max-height: 520px; overflow-y: auto; }
.sl-replay { display: grid; gap: var(--rk-s4); }
.sl-replay__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rk-s2) var(--rk-s4); }
.sl-replay__speeds { display: inline-flex; flex-wrap: wrap; gap: var(--rk-s2); }
.sl-replay__speeds [aria-pressed='true'] { background: var(--rk-ink-1); color: var(--rk-chalk-1); }

/* ------------------------------------------------------------------ the lines: the dressing-room whiteboard */
/* The lines page (pages/lines.ts): the board on the left, the coach's orders, the scouting card and the
   bench on the right. Lines and pairs are rows of magnets with their ice time and chemistry at the end;
   the coach's hand (Kalam) writes the names and the note in the corner. */
.sl-wb-room { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--rk-s5); align-items: start; }
.sl-wb {
  position: relative;
  display: grid;
  gap: var(--rk-s4);
  margin-bottom: var(--rk-s5);
  padding: var(--rk-s5);
  border: 10px solid var(--rk-wb-frame);
  border-radius: var(--rk-r-2);
  background:
    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--rk-wb-face) 90%, transparent), transparent 60%),
    linear-gradient(135deg, var(--rk-wb-face), var(--rk-wb-face-2));
  box-shadow: inset 0 0 0 1px var(--rk-wb-tray), var(--rk-shadow-lift);
}
.sl-wb::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -24px; height: 12px; background: var(--rk-wb-tray); border-radius: 0 0 var(--rk-r-2) var(--rk-r-2); }
.sl-wb-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rk-s3); margin-top: var(--rk-s3); font: 700 1.9rem/1 var(--rk-font-hand); color: var(--rk-ink-hand); }
.sl-wb-title:first-of-type { margin-top: 0; }
.sl-wb-title small { font-size: 1.05rem; color: var(--rk-stitch-ink); }
.sl-wb-note {
  position: absolute; top: var(--rk-s4); right: var(--rk-s5); max-width: 13rem;
  transform: rotate(3deg); text-align: right; white-space: pre-line;
  font: 700 1.05rem/1.2 var(--rk-font-hand); color: var(--rk-stitch-ink);
}
.sl-wb-units { display: grid; gap: var(--rk-s3); }
.sl-wb-unit {
  display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) auto; align-items: center; gap: var(--rk-s3);
  padding-bottom: var(--rk-s3); border-bottom: 2px dashed color-mix(in srgb, var(--rk-blue) 25%, transparent);
}
.sl-wb-unit__name { font: 700 1.25rem/1 var(--rk-font-hand); color: var(--rk-stitch-ink); }
.sl-wb-unit__name small { display: block; margin-top: 2px; font-size: 0.9rem; color: var(--rk-ink-3); }
.sl-wb-unit__men { display: flex; flex-wrap: wrap; gap: 10px; }
.sl-wb-unit__toi { display: grid; justify-items: end; text-align: right; font: 700 1.05rem/1.1 var(--rk-font-hand); color: var(--rk-ink-hand); }
.sl-wb-unit__toi small { display: block; font: 600 var(--rk-fs-label)/1.2 var(--rk-font-data); color: var(--rk-ink-3); }
.sl-wb-pin { margin-top: 4px; font: 600 var(--rk-fs-label)/1.2 var(--rk-font-data); color: var(--rk-blue-ink); }

/* A magnet: a player on the board, his spot over his face and grade there, his name under. Picked (the
   first of a swap) he's ringed in the kickplate's yellow; playing out of position, his own position shows. */
.sl-wb-magnet {
  display: grid; justify-items: center; gap: 2px; min-width: 92px; padding: 6px 6px 5px;
  background: var(--rk-paper-0); color: var(--rk-ink-1); border: 1px solid var(--rk-rule-1); border-radius: var(--rk-r-1);
  box-shadow: var(--rk-shadow-magnet); cursor: grab; font: inherit;
  transition: transform 120ms var(--rk-ease), box-shadow 120ms var(--rk-ease);
}
.sl-wb-magnet:hover { transform: translateY(-1px); border-color: var(--rk-rule-2); }
.sl-wb-magnet:focus-visible { outline: 3px solid var(--rk-blue); outline-offset: 2px; }
.sl-wb-magnet.is-picked { box-shadow: 0 0 0 3px var(--rk-lamp), var(--rk-shadow-magnet); transform: translateY(-2px) rotate(-1deg); }
.sl-wb-magnet.is-empty { min-height: 72px; align-content: center; border-style: dashed; background: transparent; box-shadow: none; color: var(--rk-ink-3); }
.sl-wb-magnet.is-off { border-color: var(--rk-lamp-ink); border-style: dashed; }
.sl-wb-magnet__pos { font: 800 0.66rem/1 var(--rk-font-display); letter-spacing: 0.16em; color: var(--rk-ink-3); }
.sl-wb-magnet__pos small { font-size: inherit; color: var(--rk-lamp-ink); }
.sl-wb-magnet__row { display: flex; align-items: center; gap: 6px; }
.sl-wb-magnet__name { font: 700 0.86rem/1.1 var(--rk-font-data); white-space: nowrap; }

/* Chemistry: five bars, lit green as a line plays together. */
.sl-wb-chem { display: inline-flex; gap: 2px; margin-top: 3px; }
.sl-wb-chem i { width: 9px; height: 5px; background: var(--rk-rule-1); }
.sl-wb-chem i.is-on { background: var(--rk-win); }

/* The special teams: each unit boxed in red marker, its skaters picked from lists. */
.sl-wb-specials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rk-s4); }
.sl-wb-special { display: grid; gap: var(--rk-s2); align-content: start; padding: var(--rk-s3); border: 2px solid color-mix(in srgb, var(--rk-stitch) 35%, transparent); border-radius: 6px; }
.sl-wb-special h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rk-s2); font: 700 1.2rem/1 var(--rk-font-hand); color: var(--rk-stitch-ink); }
.sl-wb-special h3 small { font-size: 0.9rem; color: var(--rk-ink-3); }
.sl-wb-special__men { display: grid; gap: 6px; }
.sl-wb-mini { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; align-items: center; gap: var(--rk-s2); }
.sl-wb-pick {
  min-width: 0; padding: 4px 6px 3px; background: var(--rk-paper-0); color: var(--rk-ink-1);
  border: 1px solid var(--rk-rule-1); border-radius: var(--rk-r-1); box-shadow: var(--rk-shadow-magnet);
  font: 700 0.86rem/1.2 var(--rk-font-data);
}
.sl-wb-pick:focus-visible { outline: 3px solid var(--rk-blue); outline-offset: 1px; }

/* The coach's orders: segmented switches on the boards, the pressed one in navy. */
.sl-wb-orders { display: grid; }
.sl-wb-order { display: grid; gap: 6px; padding: var(--rk-s3) var(--rk-s4); border-bottom: 1px solid var(--rk-rule-1); }
.sl-wb-order:last-child { border-bottom: 0; }
.sl-wb-order__label { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }
.sl-wb-order small { font: 500 var(--rk-fs-small)/1.35 var(--rk-font-data); color: var(--rk-ink-3); }
.sl-wb-seg { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; border: 2px solid var(--rk-ink-1); }
.sl-wb-seg button {
  padding: 7px 10px 5px; background: var(--rk-paper-0); color: var(--rk-ink-1); border: 0; cursor: pointer;
  font: 700 0.86rem/1 var(--rk-font-display); letter-spacing: 0.1em; text-transform: uppercase;
}
.sl-wb-seg button + button { border-left: 2px solid var(--rk-ink-1); }
.sl-wb-seg button:hover { background: var(--rk-paper-2); }
.sl-wb-seg button[aria-pressed='true'] { background: var(--rk-ink-1); color: var(--rk-chalk-1); }
.sl-wb-seg button:focus-visible { outline: 3px solid var(--rk-blue); outline-offset: -3px; }
.sl-wb-ends { display: flex; justify-content: space-between; max-width: 22rem; font: 600 var(--rk-fs-label)/1.2 var(--rk-font-data); color: var(--rk-ink-2); }

/* The scouting card: the player picked last. */
.sl-wb-card { display: grid; gap: var(--rk-s3); padding: var(--rk-s4); }
.sl-wb-card__who { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--rk-s3); }
.sl-wb-card__who b { font: 400 1.3rem/1.05 var(--rk-font-varsity); }
.sl-wb-card__who small { display: block; font: 500 var(--rk-fs-small)/1.3 var(--rk-font-data); color: var(--rk-ink-3); }
.sl-wb-card__grades { display: flex; flex-wrap: wrap; gap: var(--rk-s2) var(--rk-s4); }
.sl-wb-card__grades > span { display: inline-flex; align-items: center; gap: 6px; }
.sl-wb-card__spot { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }
.sl-wb-card__season { font: 600 var(--rk-fs-small)/1.35 var(--rk-font-data); color: var(--rk-ink-2); }
.sl-wb-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--rk-s4); }
.sl-wb-tool { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; font: 600 var(--rk-fs-small)/1.2 var(--rk-font-data); }
.sl-wb-tool i { position: relative; grid-column: 1 / -1; height: 5px; background: var(--rk-paper-2); }
.sl-wb-tool i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--rk-blue); }

/* The bench: the dressed extras as magnets, the minors and the hurt as lists. */
.sl-wb-bench { display: grid; gap: var(--rk-s4); }
.sl-wb-bench__head { margin-bottom: var(--rk-s2); font: 800 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-2); }
.sl-wb-bench__head small { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--rk-ink-3); }
.sl-wb-bench .sl-panel__note { padding: 0; }
.sl-wb-bench__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font: 600 var(--rk-fs-data)/1.3 var(--rk-font-data); }
.sl-wb-bench__list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--rk-rule-1); }
.sl-wb-bench__pos { color: var(--rk-ink-3); }
.sl-wb-bench__what { flex-basis: 100%; font-weight: 500; font-size: var(--rk-fs-small); color: var(--rk-loss); }
.sl-wb-bench__what:empty { display: none; }

@media (max-width: 980px) {
  .sl-wb-room { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sl-wb { padding: var(--rk-s4) var(--rk-s3); border-width: 6px; }
  .sl-wb-note { position: static; max-width: none; transform: none; text-align: left; }
  .sl-wb-unit { grid-template-columns: minmax(0, 1fr); }
  .sl-wb-unit__toi { justify-items: start; text-align: left; }
  .sl-wb-magnet { min-width: 0; flex: 1 1 0; }
  .sl-wb-magnet__name { white-space: normal; overflow-wrap: anywhere; }
  .sl-wb-specials, .sl-wb-tools { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .sl-wb-seg button { min-height: 40px; }
  .sl-wb-pick { min-height: 40px; }
}

/* ------------------------------------------------------------------ the game center and the broadcast */
/* The game center (pages/game.ts) and the broadcast (live/hockey.ts, live/rink.ts), as mockup/game.html
   drew them: the scoreboard over center ice, the line score under it, the scoring summary, the shot map
   on a whole rink, the box score and the play by play; on the air, the call box, the rink with the puck,
   the goal horn's banner. Every class here starts sl-gc-. */

/* The scoreboard: black housing, the score in red LED, the period and the clock in amber. */
.sl-gc-final { display: grid; }
.sl-gc-board { color: var(--rk-chalk-1); background: var(--rk-board-1); border: 6px solid var(--rk-board-3); box-shadow: var(--rk-shadow-board); }
.sl-gc-final .sl-gc-board { border-bottom: 0; box-shadow: none; }
.sl-gc-board__main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--rk-s4); padding: var(--rk-s4) var(--rk-s5); }
.sl-gc-board__team { display: grid; justify-items: center; gap: 6px; min-width: 0; text-align: center; }
.sl-gc-board__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rk-chalk-2); text-decoration: none; font: 700 0.95rem/1 var(--rk-font-display); letter-spacing: 0.18em; text-transform: uppercase; }
.sl-gc-board__name:hover { color: var(--rk-chalk-1); }
.sl-gc-board__mid { display: grid; justify-items: center; gap: 4px; min-width: 9rem; padding: 6px 18px; background: var(--rk-board-2); border: 2px solid var(--rk-board-3); }
.sl-gc-board__label { font: 700 var(--rk-fs-label)/1 var(--rk-font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--rk-chalk-3); }
.sl-gc-board__note { font: 700 var(--rk-fs-label)/1 var(--rk-font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--rk-chalk-2); }
.sl-gc-board__pp { padding: 3px 7px 2px; background: var(--rk-amber); color: var(--rk-board-1); font: 800 var(--rk-fs-label)/1 var(--rk-font-display); letter-spacing: 0.2em; text-transform: uppercase; }
.sl-gc-board__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); border-top: 2px solid var(--rk-board-3); }
.sl-gc-board__row > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px var(--rk-s4); min-width: 0; }
.sl-gc-board__row > div:first-child { justify-content: flex-end; }
.sl-gc-board__row > div:nth-child(2) { justify-content: center; min-width: 9rem; border-inline: 2px solid var(--rk-board-3); }
.sl-gc-led { font: 400 var(--rk-fs-hero)/0.9 var(--rk-font-led); color: var(--rk-led); text-shadow: var(--rk-led-glow); font-variant-numeric: tabular-nums; }
.sl-gc-led--sm { font-size: 1.9rem; }
.sl-gc-led--amber { font-size: 2.6rem; color: var(--rk-amber); text-shadow: var(--rk-amber-glow); }
.sl-gc-led--status { font-size: 1.9rem; text-transform: uppercase; }
.sl-gc-led.is-scored { animation: sl-gc-horn-flash 0.5s steps(2, jump-none) 6; }
@keyframes sl-gc-horn-flash { 50% { color: var(--rk-chalk-1); background: var(--rk-horn-flash); } }
.sl-gc-pen { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--rk-board-3); }
.sl-gc-pen b { font: 700 0.86rem/1 var(--rk-font-display); letter-spacing: 0.1em; color: var(--rk-amber); }
.sl-gc-pen span { font: 400 1.5rem/1 var(--rk-font-led); color: var(--rk-led); text-shadow: var(--rk-led-glow); }
.sl-gc-pen.is-off b, .sl-gc-pen.is-off span { color: var(--rk-led-off); text-shadow: none; }

/* The line score under the board: periods across, then the shots, power plays and faceoffs. */
.sl-gc-periods-wrap { background: var(--rk-board-2); border: 6px solid var(--rk-board-3); border-top: 2px solid var(--rk-board-3); box-shadow: var(--rk-shadow-board); }
.sl-gc-periods { width: 100%; border-collapse: collapse; color: var(--rk-chalk-2); font: 400 1.35rem/1 var(--rk-font-led); font-variant-numeric: tabular-nums; }
.sl-gc-periods th { padding: 8px 10px 4px; font: 700 var(--rk-fs-label)/1 var(--rk-font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--rk-chalk-3); text-align: center; }
.sl-gc-periods thead th:first-child, .sl-gc-periods tbody th { text-align: left; }
.sl-gc-periods tbody th { font: 700 0.95rem/1 var(--rk-font-display); letter-spacing: 0.12em; color: var(--rk-chalk-1); }
.sl-gc-periods td, .sl-gc-periods tbody th { padding: 6px 10px; border-top: 1px solid var(--rk-board-3); }
.sl-gc-periods td { text-align: center; }
.sl-gc-periods .t { color: var(--rk-led); text-shadow: var(--rk-led-glow); }
.sl-gc-periods .s { font-size: 1.05rem; color: var(--rk-chalk-3); }
.sl-gc-periods abbr { text-decoration: none; }

/* The page in two columns: scoring, penalties and the box score; the map, the stars, the stats and the play by play. */
.sl-gc-grid { display: grid; gap: var(--rk-s5); align-items: start; }
.sl-gc-grid > * { min-width: 0; }
@media (min-width: 1000px) { .sl-gc-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

/* The scoring summary, period by period: the time, the crest, the scorer and his tags, the helpers, the score after. */
.sl-gc-goals h3 { padding: 12px var(--rk-s4) 6px; background: var(--rk-paper-1); border-bottom: 1px solid var(--rk-rule-1); font: 800 0.86rem/1 var(--rk-font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rk-ink-3); }
.sl-gc-goal { display: grid; grid-template-columns: 3.6rem auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px var(--rk-s4); border-bottom: 1px solid var(--rk-rule-1); }
.sl-gc-goal.is-none { display: block; color: var(--rk-ink-3); font-size: var(--rk-fs-small); }
.sl-gc-goal time { font: 600 0.9rem/1 var(--rk-font-data); color: var(--rk-ink-3); font-variant-numeric: tabular-nums; }
.sl-gc-goal b a { text-decoration: none; }
.sl-gc-goal b a:hover { text-decoration: underline; }
.sl-gc-goal small { display: block; font: 500 0.84rem/1.35 var(--rk-font-data); color: var(--rk-ink-3); }
.sl-gc-goal__score { padding: 4px 8px 2px; background: var(--rk-board-1); color: var(--rk-led); font: 400 1.25rem/1 var(--rk-font-led); text-shadow: var(--rk-led-glow); }
.sl-gc-tag { margin-left: 6px; padding: 3px 5px 2px; vertical-align: 2px; background: var(--rk-paper-2); color: var(--rk-ink-2); font: 800 var(--rk-fs-label)/1 var(--rk-font-display); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.sl-gc-tag--pp { background: var(--rk-lamp); color: var(--rk-ink-1); }
.sl-gc-tag--sh { background: var(--rk-blue); color: var(--rk-chalk-1); }
.sl-gc-tag--en { background: var(--rk-ink-3); color: var(--rk-chalk-1); }
.sl-gc-tag--gw { background: var(--rk-stitch); color: var(--rk-chalk-1); }
.sl-gc-club { display: inline-flex; align-items: center; gap: 6px; }

/* The sheet: the ice, the boards in navy, the red and blue lines, shots as rings, goals as red pucks. */
.sl-gc-rink { display: block; width: 100%; height: auto; }
.sl-gc-rink__ice { fill: var(--rk-paper-0); }
.sl-gc-rink__boards { fill: none; stroke: var(--rk-ink-1); stroke-width: 1.2; }
.sl-gc-rink__goal { stroke: var(--rk-stitch); stroke-width: 0.35; }
.sl-gc-rink__red { fill: var(--rk-stitch); }
.sl-gc-rink__blue { fill: var(--rk-blue); }
.sl-gc-rink__center { fill: none; stroke: var(--rk-blue); stroke-width: 0.35; }
.sl-gc-rink__cdot { fill: var(--rk-blue); }
.sl-gc-rink__circle { fill: none; stroke: var(--rk-stitch); stroke-width: 0.35; }
.sl-gc-rink__dot { fill: var(--rk-stitch); }
.sl-gc-rink__hash { stroke: var(--rk-stitch); stroke-width: 0.35; }
.sl-gc-rink__crease { fill: var(--rk-crease); stroke: var(--rk-stitch); stroke-width: 0.3; }
.sl-gc-rink__trap { stroke: var(--rk-stitch); stroke-width: 0.3; }
.sl-gc-rink__net { fill: none; stroke: var(--rk-ink-1); stroke-width: 0.5; }
.sl-gc-rink__shot { fill: color-mix(in srgb, var(--shot) 22%, transparent); stroke: var(--shot); stroke-width: 0.55; }
.sl-gc-rink__goalmark { fill: var(--rk-stitch); stroke: var(--rk-ink-1); stroke-width: 0.5; }
.sl-gc-rink__shot.is-fresh, .sl-gc-rink__goalmark.is-fresh { animation: sl-gc-fresh 0.9s var(--rk-ease) 2; transform-box: fill-box; transform-origin: center; }
@keyframes sl-gc-fresh { 0% { transform: scale(2.4); } 100% { transform: scale(1); } }
.sl-gc-rink__puck circle:last-child { fill: var(--rk-puck); }
.sl-gc-rink__puckring { fill: none; stroke: var(--rk-lamp); stroke-width: 0.7; animation: sl-gc-puck 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sl-gc-puck { 50% { transform: scale(1.35); opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .sl-gc-led.is-scored, .sl-gc-rink__shot.is-fresh, .sl-gc-rink__goalmark.is-fresh, .sl-gc-rink__puckring { animation: none; }
}
.sl-gc-mapbody { padding: var(--rk-s3) var(--rk-s3) 0; }
.sl-gc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px var(--rk-s4); border-top: 1px solid var(--rk-rule-1); font: 600 0.82rem/1 var(--rk-font-data); color: var(--rk-ink-2); }
.sl-gc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sl-gc-legend i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--shot); background: color-mix(in srgb, var(--shot) 22%, transparent); }
.sl-gc-legend i.is-goal { border-color: var(--rk-ink-1); background: var(--rk-stitch); }

/* The three stars. */
.sl-gc-stars li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); align-items: center; gap: 2px var(--rk-s3); padding: 10px var(--rk-s4); border-bottom: 1px solid var(--rk-rule-1); }
.sl-gc-stars li:last-child { border-bottom: 0; }
.sl-gc-stars__n { grid-row: span 2; color: var(--rk-lamp-ink); font-size: 0.95rem; letter-spacing: 1px; }
.sl-gc-stars .sl-who { font-weight: 700; text-decoration: none; }
.sl-gc-stars small { font: 500 var(--rk-fs-small)/1.3 var(--rk-font-data); color: var(--rk-ink-3); }

/* The clubs' stats face to face, the stat between them. */
.sl-gc-vs th.c { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }
.sl-gc-vs td { width: 30%; font-weight: 700; }
.sl-gc-vs thead th .sl-cap { vertical-align: middle; }

/* The box score: the skaters line by line under a head each, the goalies under them. */
.sl-gc-box th.l .sl-who { font-weight: 600; text-decoration: none; }
.sl-gc-up { color: var(--rk-win); }
.sl-gc-down { color: var(--rk-loss); }
.sl-gc-boxside + .sl-gc-boxside { padding-top: var(--rk-s3); border-top: 2px solid var(--rk-rule-2); }

/* The play by play: the time, the crest, what happened; goals lit red, penalties the kickplate's gold.
   The game center shows the shots, goals and penalties unless everything is asked for. */
.sl-gc-pbpwrap { max-height: 640px; overflow-y: auto; }
.sl-gc-filter { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--rk-s2); padding: var(--rk-s3) var(--rk-s4); background: var(--rk-paper-0); border-bottom: 1px solid var(--rk-rule-1); }
.sl-gc-filter [aria-pressed='true'] { background: var(--rk-ink-1); color: var(--rk-chalk-1); }
.sl-gc-pbpwrap[data-all='false'] .is-minor { display: none; }
.sl-gc-pbp__head { padding: 10px var(--rk-s4) 6px; background: var(--rk-paper-1); border-bottom: 1px solid var(--rk-rule-1); font: 800 0.86rem/1 var(--rk-font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rk-ink-3); }
.sl-gc-pbp__row { display: grid; grid-template-columns: 4.6rem 22px minmax(0, 1fr); align-items: start; gap: 8px; padding: 7px var(--rk-s4); border-bottom: 1px solid var(--rk-rule-1); font-size: 0.9rem; }
.sl-gc-pbp__row time { font: 600 0.84rem/1.5 var(--rk-font-data); color: var(--rk-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-gc-pbp__club { padding-top: 1px; }
.sl-gc-pbp__row.is-goal { background: color-mix(in srgb, var(--rk-stitch) 9%, var(--rk-paper-0)); box-shadow: inset 3px 0 0 var(--rk-stitch); font-weight: 700; }
.sl-gc-pbp__row.is-pen { background: color-mix(in srgb, var(--rk-lamp) 16%, var(--rk-paper-0)); }
.sl-gc-pbp__row.is-period { color: var(--rk-ink-3); font-style: italic; }
.sl-gc-pbp__row.is-minor { color: var(--rk-ink-2); }
.sl-gc-pbp__score { margin-left: 4px; color: var(--rk-stitch-ink); white-space: nowrap; }

/* On the air: the call box under the board, the rink beside the play by play, the lines under them. */
.sl-gc-cast { display: grid; gap: var(--rk-s4); }
.sl-gc-cast__grid { display: grid; gap: var(--rk-s4); align-items: start; }
.sl-gc-cast__grid > * { min-width: 0; }
@media (min-width: 1000px) { .sl-gc-cast__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.sl-gc-call { display: grid; gap: 4px; min-height: 4.4rem; padding: var(--rk-s3) var(--rk-s4); background: var(--rk-board-1); border-left: 4px solid var(--rk-board-3); color: var(--rk-chalk-1); font: 600 1.08rem/1.35 var(--rk-font-data); }
.sl-gc-call span { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--rk-chalk-3); }
.sl-gc-call.is-goal { border-left-color: var(--rk-led); background: linear-gradient(90deg, color-mix(in srgb, var(--rk-led) 22%, var(--rk-board-1)), var(--rk-board-1) 70%); }
.sl-gc-call.is-pen { border-left-color: var(--rk-amber); }
.sl-gc-call.is-save { border-left-color: var(--rk-blue); }
.sl-gc-sheet { position: relative; padding: var(--rk-s3) var(--rk-s3) var(--rk-s5); }
.sl-gc-sheet__end { position: absolute; bottom: 4px; font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }
.sl-gc-sheet__end--left { left: var(--rk-s4); }
.sl-gc-sheet__end--right { right: var(--rk-s4); }
.sl-gc-cast__feed { max-height: 520px; overflow-y: auto; }

/* The goal horn: a banner across the rink in the scoring club's colours while the goal holds the screen. */
.sl-gc-horn {
  position: absolute; left: 6%; right: 6%; top: 50%; transform: translateY(-50%);
  display: grid; justify-items: center; gap: 4px; padding: var(--rk-s3) var(--rk-s4) var(--rk-s4);
  background: var(--c1); color: var(--c2); box-shadow: inset 0 0 0 3px var(--c2), var(--rk-shadow-lift); text-align: center;
  animation: sl-gc-horn-in 0.45s var(--rk-ease);
}
.sl-gc-horn__word { font: 400 clamp(2.2rem, 7vw, 4rem)/0.95 var(--rk-font-varsity); letter-spacing: 0.04em; text-transform: uppercase; }
.sl-gc-horn__who { font: 800 clamp(1.1rem, 3vw, 1.6rem)/1.1 var(--rk-font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.sl-gc-horn__who small { font-size: 0.75em; }
.sl-gc-horn__how { font: 600 var(--rk-fs-small)/1.3 var(--rk-font-data); }
@keyframes sl-gc-horn-in { from { transform: translateY(-50%) scale(0.6); } }
@media (prefers-reduced-motion: reduce) { .sl-gc-horn { animation: none; } }

/* Each club's lines as they dressed. */
.sl-gc-lineups { display: grid; gap: var(--rk-s4); padding: var(--rk-s4); }
@media (min-width: 720px) { .sl-gc-lineups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sl-gc-lines h3 { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 3px solid var(--c1); font: 800 1rem/1.1 var(--rk-font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.sl-gc-lines li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--rk-rule-1); font: 600 var(--rk-fs-data)/1.3 var(--rk-font-data); }
.sl-gc-lines li span { font: 700 var(--rk-fs-label)/1.6 var(--rk-font-display); letter-spacing: var(--rk-track-caps); color: var(--rk-ink-3); }
.sl-gc-lines small { color: var(--rk-ink-3); }
.sl-gc-posted { padding: var(--rk-s3) var(--rk-s4); background: var(--rk-highlight); border-left: 4px solid var(--rk-lamp); font-weight: 600; }

@media (max-width: 640px) {
  .sl-gc-board__main { gap: var(--rk-s2); padding: var(--rk-s3); }
  .sl-gc-board__team .sl-cap { --size: 34px; }
  .sl-gc-board__mid { min-width: 0; padding: 6px 10px; }
  .sl-gc-board__row > div { padding: 6px var(--rk-s2); gap: 6px; }
  .sl-gc-board__row > div:nth-child(2) { min-width: 0; }
  .sl-gc-led { font-size: 3rem; }
  .sl-gc-led--amber { font-size: 1.9rem; }
  .sl-gc-led--sm, .sl-gc-led--status { font-size: 1.4rem; }
  .sl-gc-pen span { font-size: 1.15rem; }
  .sl-gc-goal { grid-template-columns: 3rem minmax(0, 1fr) auto; }
  .sl-gc-goal > .sl-cap { display: none; }
  .sl-gc-pbp__row { grid-template-columns: 4.2rem minmax(0, 1fr); }
  .sl-gc-pbp__club { display: none; }
}

/* ------------------------------------------------------------------ the club page (pages/team.ts, mockup/index.html) */
/* Two columns under center ice: the next game, the top line and pair and the division on the left; the
   club's leaders, the penalty box, the bids and the league wire on the right. One column on a phone. */
.sl-clubgrid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--rk-s5); align-items: start; }
.sl-clubgrid > * { min-width: 0; }
@media (max-width: 980px) { .sl-clubgrid { grid-template-columns: minmax(0, 1fr); } }

/* The next game on the scoreboard's housing: both clubs, the puck drop in amber LED between them. */
.sl-tonight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--rk-s4);
  padding: var(--rk-s5) var(--rk-s4);
  background: var(--rk-board-1);
  color: var(--rk-chalk-1);
}
.sl-tonight__side { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.sl-tonight__team { font: 400 1.2rem/1.05 var(--rk-font-varsity); color: var(--rk-chalk-1); text-decoration: none; overflow-wrap: anywhere; }
.sl-tonight__team:hover { color: var(--rk-lamp); }
.sl-tonight__rec { font: 700 0.8rem/1 var(--rk-font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rk-chalk-3); }
.sl-tonight__at { font: 700 var(--rk-fs-label)/1.3 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-chalk-3); text-align: center; }
.sl-tonight__clock {
  margin: 4px 0;
  padding: 2px 10px 0;
  background: var(--rk-board-2);
  border: 1px solid var(--rk-board-3);
  font: 400 2.6rem/1 var(--rk-font-led);
  color: var(--rk-amber);
  text-shadow: var(--rk-amber-glow);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 559px) {
  .sl-tonight { gap: var(--rk-s2); padding: var(--rk-s4) var(--rk-s3); }
  .sl-tonight__team { font-size: 1rem; }
  .sl-tonight__clock { font-size: 2rem; }
}

/* The two starting goalies under it, side by side; one over the other on a phone. */
.sl-goalies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--rk-rule-1); }
.sl-goalie { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: var(--rk-s3) var(--rk-s4); }
.sl-goalie + .sl-goalie { border-left: 1px solid var(--rk-rule-1); }
.sl-goalie a { text-decoration: none; }
.sl-goalie a:hover b { text-decoration: underline; }
.sl-goalie b { display: block; font: 700 var(--rk-fs-body)/1.2 var(--rk-font-text); }
.sl-goalie small { display: block; font: 500 var(--rk-fs-small)/1.3 var(--rk-font-data); color: var(--rk-ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 599px) {
  .sl-goalies { grid-template-columns: minmax(0, 1fr); }
  .sl-goalie + .sl-goalie { border-left: 0; border-top: 1px solid var(--rk-rule-1); }
}

/* The game's facts in a ruled row. */
.sl-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rk-rule-1); }
.sl-facts > div { display: grid; gap: 2px; padding: 10px var(--rk-s4); }
.sl-facts > div + div { border-left: 1px solid var(--rk-rule-1); }
.sl-facts span { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }
.sl-facts b { font: 600 var(--rk-data-width) 0.95rem/1.25 var(--rk-font-data); }
@media (max-width: 559px) {
  .sl-facts { grid-template-columns: minmax(0, 1fr); }
  .sl-facts > div + div { border-left: 0; border-top: 1px solid var(--rk-rule-1); }
}

/* A panel head's pill: the game's place in the season, on the red line. */
.sl-panel__head > .sl-clubpill {
  padding: 4px 9px 3px;
  background: var(--rk-stitch);
  color: var(--rk-chalk-1);
  font: 700 var(--rk-fs-label)/1 var(--rk-font-display);
  letter-spacing: var(--rk-track-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

/* The club's leaders: what each board is, in condensed caps. */
.sl-clublabel { font: 700 var(--rk-fs-label)/1.2 var(--rk-font-display); letter-spacing: var(--rk-track-caps); text-transform: uppercase; color: var(--rk-ink-3); }

/* The penalty box: each player hurt, with the days left on a red LED clock. */
.sl-sinbin { display: grid; margin: 0; padding: 0; list-style: none; }
.sl-sinbin li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px var(--rk-s4); border-bottom: 1px solid var(--rk-rule-1); }
.sl-sinbin li:last-child { border-bottom: 0; }
.sl-sinbin a { text-decoration: none; }
.sl-sinbin a:hover b { text-decoration: underline; }
.sl-sinbin small { display: block; font: 500 var(--rk-fs-small)/1.3 var(--rk-font-data); color: var(--rk-ink-3); }
.sl-sinbin__time {
  min-width: 64px;
  padding: 4px 8px 2px;
  background: var(--rk-board-1);
  font: 400 1.35rem/1 var(--rk-font-led);
  color: var(--rk-led);
  text-shadow: var(--rk-led-glow);
  text-align: center;
  white-space: nowrap;
}

/* The news inside a panel (the league wire) sits off the panel's edges. */
.sl-panel > .sl-news { padding: 0 var(--rk-s4); }

/* A club on the power play, on the scoreboards of the games on the air (ui.ts liveBoard). */
.sl-final__pp {
  padding: 1px 4px 0;
  background: var(--rk-lamp);
  color: var(--rk-ink-1);
  font: 800 0.66rem/1.2 var(--rk-font-display);
  letter-spacing: 0.1em;
  vertical-align: 2px;
}

/* The club page's statline: a record runs to three figures, so a cell keeps it on one line. */
@media (min-width: 600px) { .sl-statline { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } }
.sl-statline dd { white-space: nowrap; }