/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — WR SCORE · SPORT PAGES
   One page per sport (/en/sports/<sport>/): the live board with its
   scorekeeper pad, how the sport is scored, the Virtual Board, the stream,
   the league, the camera, plans, questions. One layout, 49 sports.
   ============================================================================ */

/* ── Opening (centred) ── */
.sch-spt-top { padding: clamp(128px, 10vh + 64px, 184px) var(--wr-pad-x) 48px; }
.sch-spt-top__col { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.sch-spt-top .sch-h1 { max-width: 1120px; text-wrap: balance; }
.sch-spt-top .sch-body { max-width: 720px; }
.sch-spt-top .sch-actions { justify-content: center; }

/* ── Two-column rows ── */
.sch-spt-row { display: grid; gap: clamp(40px, 5vw, 80px); align-items: center; }
.sch-spt-row--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sch-spt-row--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sch-spt-row--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.sch-spt-links { display: flex; flex-wrap: wrap; gap: 16px 32px; }

/* ── Stage: the board on the hall screen + the pad that drives it ── */
.sch-spt-stage { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 16px; align-items: stretch; }
.sch-spt-stage__plate {
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 32px;
  padding: clamp(24px, 3vw, 48px);
  border-radius: var(--wr-radius-card);
  min-height: clamp(480px, 34vw, 640px);
}
.sch-spt-stage__veil { position: absolute; inset: 0; background: linear-gradient(180deg, var(--wr-hero-72), var(--wr-hero-50)); }
.sch-spt-stage__plate > .sch-plate__label { position: relative; top: auto; left: auto; color: var(--wr-white-65); min-height: 18px; }
.sch-spt-stage__board { position: relative; }
.sch-spt-stage__foot { min-height: 18px; }
.sch-spt-pad { background: transparent; padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 32px; }
.sch-spt-group { display: flex; flex-direction: column; gap: 12px; }
.sch-spt-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.sch-spt-key { background: transparent; color: var(--wr-black); border: 1px solid var(--wr-black-15); }
.sch-spt-key:active { transform: scale(0.97); }

/* ── The board ── */
.sch-spt-board {
  --sch-spt-big: clamp(64px, 5vw, 96px);
  --sch-spt-clock: clamp(36px, 2.8vw, 52px);
  --sch-spt-sub: clamp(24px, 2vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}
.sch-spt-board--vb { --sch-spt-big: clamp(48px, 3.6vw, 72px); --sch-spt-clock: clamp(28px, 2.2vw, 40px); --sch-spt-sub: clamp(20px, 1.6vw, 28px); gap: 24px; }
.sch-spt-board--wide { --sch-spt-big: clamp(48px, 3.8vw, 72px); }
.sch-spt-board--vb.sch-spt-board--wide { --sch-spt-big: clamp(40px, 3vw, 56px); }
.sch-spt-main { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 2vw, 32px); }
.sch-spt-side,
.sch-spt-mid { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; text-align: center; }
.sch-spt-mid { gap: 12px; }
.sch-spt-mark { min-height: 18px; display: flex; justify-content: center; }
.sch-spt-flag { display: inline-flex; align-items: center; gap: 8px; }
.sch-spt-flag[hidden] { display: none; }
.sch-spt-segs { gap: 8px; }
.sch-spt-segs--big { height: var(--sch-spt-big); }
.sch-spt-segs--clock { height: var(--sch-spt-clock); }
.sch-spt-segs--sub { height: var(--sch-spt-sub); }
.sch-spt-board--stage .sch-spt-lbl { color: var(--wr-white-65); }
.sch-spt-board--stage .sch-spt-lbl--name { color: var(--wr-white); }
.sch-spt-lbl--name { color: var(--wr-black); }
.sch-spt-hist {
  display: grid;
  grid-template-columns: auto repeat(var(--cols, 3), minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 10px 12px;
  padding-top: 24px;
  border-top: 1px solid var(--wr-black-10);
}
.sch-spt-board--stage .sch-spt-hist { border-top-color: var(--wr-white-10); }
.sch-spt-hist__name { justify-self: start; }
.sch-spt-cell { font-size: var(--sch-t-body); min-height: 18px; color: var(--wr-black); }
.sch-spt-board--stage .sch-spt-cell { color: var(--wr-white); }
.sch-spt-cell.is-now { color: var(--wr-orange); }
.sch-spt-count { display: flex; align-items: center; gap: 6px; }
.sch-spt-count .sch-spt-lbl { width: 16px; }
.sch-spt-lamps { display: flex; gap: 6px; }
.sch-spt-lamp { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--wr-black-10); }
.sch-spt-board--stage .sch-spt-lamp { background: var(--wr-white-10); }
.sch-spt-lamp.is-on { background: var(--wr-grad); }

/* ── Photo that eases in (the problem) ── */
.sch-spt-photo { border-radius: var(--wr-radius-card); aspect-ratio: 4 / 3; }
.sch-spt-photo .sch-zoom__img { padding: 16px; }

/* ── The printed sheets ── */
.sch-spt-sheets { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; align-items: center; }
.sch-spt-sheet {
  aspect-ratio: 1 / 1.414;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transform: rotate(var(--r, 0deg));
}
.sch-spt-sheet svg { width: 100%; height: auto; }
.sch-spt-sheets-photo { border-radius: var(--wr-radius-card); aspect-ratio: 4 / 5; padding: 16px; }

/* ── The Virtual Board card: score, held or sponsors ── */
.sch-spt-vb { display: flex; flex-direction: column; gap: 24px; }
.sch-spt-vb__frame { aspect-ratio: 16 / 9; padding: clamp(24px, 3vw, 40px); display: grid; }
.sch-spt-swap {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  transition: opacity 0.32s var(--wr-ease-out);
}
.sch-spt-swap--sponsor { align-items: center; }
.sch-spt-swap.is-off { opacity: 0; visibility: hidden; }
.sch-spt-held { min-height: 18px; display: flex; justify-content: center; }
.sch-spt-held > span { display: inline-flex; align-items: center; gap: 8px; }
.sch-spt-held > span[hidden] { display: none; }
.sch-spt-screens { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ── On the stream: the picture with its scorebug ── */
.sch-spt-stream { border-radius: var(--wr-radius-card); aspect-ratio: 16 / 10; overflow: hidden; }
.sch-spt-onair { position: absolute; top: clamp(1rem, 2vw, 1.5rem); right: clamp(1rem, 2vw, 1.5rem); display: inline-flex; align-items: center; gap: 8px; color: var(--wr-black); }
.sch-spt-bug {
  position: absolute;
  left: 24px;
  bottom: 24px;
  border-radius: var(--wr-radius-pill);
  box-shadow: var(--wr-shadow-md);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
}
.sch-spt-bug__team { display: inline-flex; align-items: center; gap: 12px; }
.sch-spt-bug__team .sch-strong { text-transform: uppercase; font-weight: 800; }

/* ── The league table ── */
.sch-spt-league { padding: 32px 40px 16px; display: flex; flex-direction: column; gap: 8px; }
.sch-spt-table { width: 100%; border-collapse: collapse; }
.sch-spt-table th,
.sch-spt-table td { padding: 16px 0 16px 16px; border-bottom: 1px solid var(--wr-black-10); text-align: right; font-weight: inherit; }
.sch-spt-table th:first-child,
.sch-spt-table td:first-child { padding-left: 0; text-align: left; width: 10%; }
.sch-spt-table th:nth-child(2),
.sch-spt-table td:nth-child(2) { text-align: left; }
.sch-spt-table tbody tr:last-child td { border-bottom: 0; }

/* ── A row of pictures ── */
.sch-spt-breather { display: grid; grid-template-columns: 4fr 3fr 5fr 3fr; gap: 16px; height: clamp(240px, 22vw, 400px); }
.sch-spt-breather > .sch-plate { border-radius: var(--wr-radius-card); padding: 16px; }

/* ── The camera ── */
.sch-spt-cam__icon { width: 24px; height: 24px; color: var(--wr-black); }
.sch-spt-cam { border-radius: var(--wr-radius-card); aspect-ratio: 16 / 9; overflow: hidden; }
.sch-spt-cam__read { display: flex; align-items: center; gap: 24px; }
.sch-spt-zone { border: 1.5px dashed var(--wr-orange); border-radius: var(--wr-radius-sm); padding: 16px 20px; }
.sch-spt-zone .sch-segs { height: clamp(48px, 4vw, 72px); gap: 8px; }

/* ── Plans: the trial days in pill digits ── */
.sch-spt-plans {
  padding: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.sch-spt-plans__days { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.sch-spt-plans__days .sch-segs { height: clamp(120px, 11vw, 200px); gap: 20px; }
.sch-spt-plans .sch-actions { align-items: center; gap: 16px 32px; }

/* ── Also in WR Score ── */
.sch-spt-also { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; }
.sch-spt-also .sch-pill { text-decoration: none; }

/* ── Breakpoints ── */
@media (max-width: 1260px) {
  .sch-spt-stage { grid-template-columns: minmax(0, 1fr); }
  .sch-spt-pad { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
}
@media (max-width: 1024px) {
  .sch-spt-row--5-7,
  .sch-spt-row--7-5,
  .sch-spt-row--even,
  .sch-spt-plans { grid-template-columns: minmax(0, 1fr); }
  .sch-spt-breather { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(160px, 30vw, 260px); height: auto; }
}
@media (max-width: 768px) {
  .sch-spt-board { --sch-spt-big: clamp(40px, 11vw, 64px); --sch-spt-clock: clamp(24px, 6vw, 36px); --sch-spt-sub: clamp(18px, 4.5vw, 26px); gap: 20px; }
  .sch-spt-board--vb { --sch-spt-big: clamp(32px, 8vw, 48px); --sch-spt-clock: clamp(20px, 5vw, 28px); --sch-spt-sub: clamp(16px, 4vw, 22px); gap: 12px; }
  .sch-spt-main { gap: 10px; }
  .sch-spt-segs { gap: 5px; }
  .sch-spt-hist { gap: 6px 6px; padding-top: 16px; }
  .sch-spt-cell { font-size: 13px; }
  .sch-spt-stage__plate { min-height: 0; padding: 20px 16px; gap: 20px; }
  .sch-spt-stage__plate > .sch-plate__label { display: none; }
  .sch-spt-pad { padding: 24px; flex-direction: column; }
  .sch-spt-vb__frame { aspect-ratio: auto; min-height: 220px; padding: 20px 12px; }
  .sch-spt-sheets { gap: 8px; }
  .sch-spt-sheet { padding: 10px; gap: 10px; }
  .sch-spt-sheet .sch-label { font-size: 9px; letter-spacing: 0.08em; }
  .sch-spt-bug { left: 12px; right: 12px; bottom: 12px; gap: 12px; padding: 10px 16px; flex-wrap: wrap; }
  .sch-spt-stream > .sch-plate__label { display: none; }
  .sch-spt-league { padding: 24px 24px 8px; }
  .sch-spt-zone { padding: 10px 12px; }
  .sch-spt-cam > .sch-plate__label { display: none; }
}
@media (max-width: 480px) {
  .sch-spt-sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sch-spt-breather { grid-template-columns: minmax(0, 1fr); }
  .sch-spt-breather > :nth-child(n+3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sch-spt-key:active { transform: none; }
  .sch-spt-swap { transition: none; }
}
@media (max-width: 768px) {
  .sch-spt-board .sch-label { letter-spacing: 0.08em; }
}
@media (max-width: 480px) {
  .sch-spt-row .wr-btn--link { white-space: normal; text-align: left; }
}

/* Ruled boxes on the blank scoresheet */
.sch-spt-rule { fill: none; stroke: var(--wr-black-15); }
.sch-link { color: var(--wr-orange); text-decoration: underline; text-underline-offset: 3px; }