/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — WR SCORE · SCOREBOARD OCR
   The Scoreboard OCR page (score.well.run/ocr): the camera stage over the read
   board, the reading cards, the sources, outputs and venue panels.
   Blocks .sch-ocr-* on top of score-core.css.
   ============================================================================ */

/* ── Camera stage ────────────────────────────────────────────────────────── */
.sch-ocr-stage { display: flex; flex-direction: column; }
.sch-ocr-stage__view {
  overflow: hidden;
  min-height: clamp(520px, 38vw, 720px);
  padding: 80px 64px;
  border-radius: var(--wr-radius-card);
  color: var(--wr-white);
}
.sch-ocr-stage__veil { position: absolute; inset: 0; background: var(--wr-hero-72); }
.sch-ocr-stage__bar {
  position: absolute;
  top: 32px;
  left: 88px;
  right: 88px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
}
.sch-ocr-stage__bar .sch-label { flex-shrink: 0; color: var(--wr-white); }
.sch-ocr-stage__bar .sch-ocr-stage__note { flex: 0 1 auto; min-width: 0; color: var(--wr-white-65); text-align: center; }
.sch-plate.is-photo .sch-ocr-stage__note { visibility: hidden; }

/* The board as read: three big fields over three small ones */
.sch-ocr-board {
  --sch-ocr-seg-lg: clamp(72px, 6vw, 112px);
  --sch-ocr-seg-sm: clamp(40px, 3vw, 56px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  place-items: end center;
  gap: 40px clamp(40px, 5vw, 80px);
}
.sch-ocr-zone { align-items: center; }
.sch-ocr-zone .sch-label { color: var(--wr-white-65); }
.sch-ocr-zone .sch-zone__box { padding: 16px 20px; }
.sch-ocr-zone .sch-segs { height: var(--sch-ocr-seg-lg); gap: clamp(5px, 0.8vw, 12px); }
.sch-ocr-zone--sm .sch-zone__box { padding: 12px 16px; }
.sch-ocr-zone--sm .sch-segs { height: var(--sch-ocr-seg-sm); }

/* The score on air, pinned under the frame */
.sch-ocr-air {
  position: relative;
  margin: -40px auto 0;
  width: min(100%, 760px);
  padding: 16px 32px;
  border-radius: var(--wr-radius-pill);
  box-shadow: var(--wr-shadow-md);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}
.sch-ocr-air__home { text-align: right; }

/* ── 2 · The board against the hand-typed score ─────────────────────────── */
.sch-ocr-cmp { padding: clamp(32px, 3vw, 48px); display: flex; flex-direction: column; gap: 32px; }
.sch-ocr-cmp__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.sch-ocr-cmp__board { display: flex; align-items: center; gap: clamp(24px, 3vw, 40px); }
.sch-ocr-cmp__board .sch-segs { height: clamp(48px, 5vw, 96px); gap: clamp(6px, 0.8vw, 12px); }
.sch-ocr-cmp__wrong { color: var(--wr-orange); }
.sch-ocr-state { max-width: 1040px; }

/* ── 3 · Fewer hands: three photo tiles ─────────────────────────────────── */
.sch-ocr-crew {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
  height: clamp(480px, 36vw, 640px);
}
.sch-ocr-crew__tile { display: flex; align-items: flex-end; border-radius: var(--wr-radius-card); }
.sch-ocr-crew__tile--tall { grid-row: span 2; }
.sch-ocr-crew .sch-next__info .sch-strong { color: var(--wr-white); }
.sch-ocr-crew__text { gap: 24px; }

/* ── 5 · Numbers that make sense: the reading card ──────────────────────── */
.sch-ocr-read { padding: 24px 32px; display: flex; flex-direction: column; }
.sch-ocr-read .sch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  padding: 16px 0;
}
.sch-ocr-read .sch-fig { font-size: var(--sch-t-h2); }
.sch-ocr-read__state { justify-self: end; text-align: right; }

/* ── 6 · Made for a live game ───────────────────────────────────────────── */
.sch-ocr-live { gap: 40px; }
.sch-ocr-live .sch-tile { align-items: flex-start; }
.sch-ocr-lamp { height: 24px; width: auto; flex-shrink: 0; }
.sch-ocr-lamp--lg { height: 48px; }
.sch-ocr-lamp .sch-seg--dead { fill: var(--wr-black-15); }

/* Photo strip */
.sch-ocr-strip {
  display: grid;
  grid-template-columns: 5fr 3fr 4fr 3fr 5fr;
  gap: 16px;
  height: clamp(240px, 22vw, 400px);
}
.sch-ocr-strip > .sch-plate { padding: 16px; border-radius: var(--wr-radius-card); }

/* ── 7 · Any device, any source ─────────────────────────────────────────── */
.sch-ocr-src { aspect-ratio: 1 / 1; padding: 16px; border-radius: var(--wr-radius-card); }

/* ── 8 · Two boards: who sends each field ───────────────────────────────── */
.sch-ocr-two b { color: var(--wr-black); font-weight: 700; }
.sch-ocr-feed { padding: 24px 32px; display: flex; flex-direction: column; }
.sch-ocr-feed .sch-row { padding: 16px 0; }

/* ── 9 · Numbers out ────────────────────────────────────────────────────── */
.sch-ocr-outs { display: flex; flex-direction: column; gap: 32px; }
.sch-ocr-out { padding: clamp(32px, 3vw, 48px); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.sch-ocr-out .wr-btn--link { margin-top: auto; }

/* ── 10 · Set up once per venue ─────────────────────────────────────────── */
.sch-ocr-venue { padding: 24px 32px; display: flex; flex-direction: column; }
.sch-ocr-venue .sch-row { padding: 24px 0; }
.sch-ocr-venue__fig { width: 55%; height: auto; flex-shrink: 0; }
.sch-ocr-venue__zone { fill: none; stroke: var(--wr-orange); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sch-ocr-venue__track { fill: var(--wr-black-10); }

/* ── 11 · Offline band ──────────────────────────────────────────────────── */
.sch-ocr-band__text { max-width: 720px; }

/* ── 13 · Who it is for ─────────────────────────────────────────────────── */
.sch-ocr-who { gap: 40px; }

/* ── 14 · Questions: a link inside an answer ────────────────────────────── */
.sch-ocr-inline {
  color: var(--wr-black);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--wr-orange);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ── Breakpoints (1260 · 1024 · 768 · 480) ──────────────────────────────── */
@media (max-width: 1024px) {
  .sch-ocr-board {
    --sch-ocr-seg-lg: clamp(34px, 7vw, 72px);
    --sch-ocr-seg-sm: clamp(24px, 4vw, 40px);
  }
  .sch-ocr-stage__view { padding: 88px 40px 80px; }
  .sch-ocr-stage__bar .sch-ocr-stage__note { display: none; }
  .sch-ocr-how .sch-shot { aspect-ratio: 16 / 9; }
  .sch-ocr-crew__text { order: -1; }
  .sch-ocr-crew { height: clamp(420px, 60vw, 560px); }
}
@media (max-width: 768px) {
  .sch-ocr-stage__view { min-height: 0; padding: 88px 24px 80px; }
  .sch-ocr-stage__bar { left: 80px; right: 80px; }
  .sch-ocr-stage__view .sch-vf__corner--bl,
  .sch-ocr-stage__view .sch-vf__corner--br { bottom: 48px; }
  .sch-ocr-board { gap: 32px 32px; }
  .sch-ocr-zone .sch-zone__box { padding: 12px 14px; }
  .sch-ocr-zone--sm .sch-zone__box { padding: 10px 12px; }
  .sch-ocr-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(140px, 30vw, 220px);
    height: auto;
  }
  .sch-ocr-strip > :first-child { grid-column: span 2; }
  .sch-ocr-src { aspect-ratio: 4 / 3; }
  .sch-ocr-read, .sch-ocr-feed, .sch-ocr-venue { padding: 16px 24px; }
}
@media (max-width: 480px) {
  .sch-ocr-stage__view { padding: 92px 12px 72px; }
  .sch-ocr-stage__view .sch-vf__corner { width: 24px; height: 24px; }
  .sch-ocr-stage__view .sch-vf__corner--tl { top: 12px; left: 12px; }
  .sch-ocr-stage__view .sch-vf__corner--tr { top: 12px; right: 12px; }
  .sch-ocr-stage__view .sch-vf__corner--bl { bottom: 40px; left: 12px; }
  .sch-ocr-stage__view .sch-vf__corner--br { bottom: 40px; right: 12px; }
  .sch-ocr-stage__bar { top: 44px; left: 16px; right: 16px; }
  .sch-ocr-board { gap: 24px 10px; }
  .sch-ocr-zone .sch-zone__box { padding: 8px; }
  .sch-ocr-zone--sm .sch-zone__box { padding: 6px 8px; }
  .sch-ocr-air { padding: 12px 18px; gap: 8px; margin-top: -32px; }
  .sch-ocr-crew {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: 200px;
    height: auto;
  }
  .sch-ocr-crew__tile--tall { grid-row: auto; }
  .sch-ocr-read .sch-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; }
  .sch-ocr-read .sch-row > :first-child { grid-column: 1 / -1; }
  .sch-ocr-read .sch-fig { font-size: 32px; }
  .sch-ocr-plans { padding: 40px 20px; }
  .sch-ocr-venue .sch-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sch-ocr-venue__fig { width: 100%; }
}