/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — WR SCORE · BROADCAST GRAPHICS
   The graphics page: a live programme frame with the Live panel, the title
   package, the Studio, the hand-over, browser sources and Posts.
   Blocks .sch-gx-* · built on score-core.css (type atoms, shared components,
   sub-page layout) · behaviour in score-graphics.js.
   ============================================================================ */

/* ── Shared paint for the page's drawings ───────────────────────────────── */
.sch-gx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sch-gx-stop-a { stop-color: var(--wr-yellow); }
.sch-gx-stop-b { stop-color: var(--wr-orange); }
.sch-gx-art { display: block; width: 100%; height: auto; }
.sch-gx-ln { fill: none; stroke: var(--wr-black-15); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sch-gx-pl { fill: var(--wr-white); stroke: var(--wr-black-15); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sch-gx-ink { fill: var(--wr-black); }
.sch-gx-mid { fill: var(--wr-black-50); }
.sch-gx-mu { fill: var(--wr-black-15); }
.sch-gx-grid { fill: var(--wr-black-10); }
.sch-gx-g { fill: url(#schGxGrad); }
.sch-gx-odot { fill: var(--wr-orange); }
.sch-gx-lbl { right: 12px; }

/* ── 1 · Opening + programme frame ──────────────────────────────────────── */
.sch-gx-top { padding-bottom: var(--sch-pad-y); }
.sch-gx-top__head { display: flex; flex-direction: column; gap: 32px; align-items: center; text-align: center; }
.sch-gx-top__head .sch-h1 { max-width: 1120px; text-wrap: balance; }
.sch-gx-top__head .sch-body { max-width: 760px; }

.sch-gx-demo { display: flex; flex-direction: column; gap: 20px; margin-top: 48px; }
.sch-gx-demo__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }

/* The frame is the size reference: every title is drawn in em of 1.25cqi,
   so the whole programme scales as one picture. */
.sch-gx-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--wr-radius-card);
  container-type: inline-size;
}
.sch-gx-frame > .sch-plate__label { top: auto; bottom: 16px; left: 16px; right: 16px; text-align: right; }

.sch-gx-t {
  position: absolute;
  font-size: max(7px, 1.25cqi);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--wr-ease-out), transform 0.6s var(--wr-ease-spring);
}
.sch-gx-t.is-on { opacity: 1; transform: none; }
.sch-gx-t--bug { top: 5.5%; left: 5%; transform: translateY(-1.5em); }
.sch-gx-t--l3 { left: 5%; bottom: 11%; transform: translateX(-3em); }
.sch-gx-t--card { inset: 0; margin: auto; width: fit-content; height: fit-content; transform: scale(0.92); }
.sch-gx-t--lu { top: 0; bottom: 0; right: 5%; margin: auto 0; height: fit-content; transform: translateX(3em); }

.sch-gx-t .sch-label { font-size: 0.75em; }
.sch-gx-t .sch-strong { font-size: 1.125em; }
.sch-gx-t .sch-segs { gap: 0.25em; }
.sch-gx-ink-lbl { color: var(--wr-black); }

.sch-gx-plate { border-radius: 1.5em; box-shadow: var(--wr-shadow-md); text-align: left; }
.sch-gx-bug { display: flex; align-items: center; gap: 1em; padding: 0.75em 1.5em; border-radius: var(--wr-radius-pill); }
.sch-gx-bug .sch-segs { height: 1.5em; }
.sch-gx-bug .sch-gx-bug__clock { height: 1em; }
.sch-gx-bug__rule { width: 1px; align-self: stretch; background: var(--wr-black-10); }

.sch-gx-l3 { display: flex; align-items: stretch; gap: 1em; padding: 1em 2.5em 1em 1.25em; border-radius: 0.75em; }
.sch-gx-l3__text { display: flex; flex-direction: column; gap: 0.25em; }
.sch-gx-l3__tick {
  width: 0.25em;
  flex-shrink: 0;
  border-radius: var(--wr-radius-pill);
  background: var(--wr-grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--wr-ease-spring) 0.12s;
}
.sch-gx-t.is-on .sch-gx-l3__tick { transform: none; }

.sch-gx-card { display: flex; flex-direction: column; align-items: center; gap: 1em; padding: 1.5em 2.5em; }
.sch-gx-card__row { display: flex; align-items: center; gap: 1.5em; }
.sch-gx-card .sch-segs { height: 3em; gap: 0.5em; }

.sch-gx-lu { display: flex; flex-direction: column; gap: 0.75em; padding: 1.5em 2.5em 1.5em 2em; }
.sch-gx-lu > .sch-label { padding-bottom: 0.25em; }
.sch-gx-lu__row {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr);
  gap: 1em;
  align-items: baseline;
  opacity: 0;
  transform: translateX(1em);
  transition: opacity 0.3s var(--wr-ease-out), transform 0.5s var(--wr-ease-spring);
}
.sch-gx-t.is-on .sch-gx-lu__row { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 0.05s); }

/* Live panel: every title as a key */
.sch-gx-panel { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 12px; align-items: center; }
.sch-gx-panel > .sch-label { padding-right: 12px; }
.sch-gx-key {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 16px 20px;
  border-radius: var(--wr-radius-sm);
  border: 1px solid var(--wr-black-15);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s var(--wr-ease-out), border-color 0.2s var(--wr-ease-out);
}
.sch-gx-key::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 20px;
  right: 20px;
  height: 3px;
  border-radius: var(--wr-radius-pill);
  background: var(--wr-grad);
  transform: scaleX(0);
  transition: transform 0.4s var(--wr-ease-spring);
}
.sch-gx-key.is-on { border-color: var(--wr-orange); }
.sch-gx-key.is-on::before { transform: scaleX(1); }
.sch-gx-key__state { display: inline-flex; align-items: center; gap: 8px; }
.sch-gx-key.is-on .sch-gx-key__state { color: var(--wr-orange); }
.sch-gx-key__dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--wr-black-15); }
.sch-gx-key.is-on .sch-gx-key__dot { background: var(--wr-orange); border-color: var(--wr-orange); }
@media (hover: hover) and (pointer: fine) {
  .sch-gx-key:hover { transform: translateY(-1px); }
}

/* ── 2 · Made by broadcasters ───────────────────────────────────────────── */
.sch-gx-made { gap: clamp(40px, 5vw, 64px); }
.sch-gx-since {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.sch-gx-since__year { height: clamp(88px, 10vw, 176px); }
.sch-gx-claim { max-width: 1120px; }
.sch-gx-mark {
  margin: 0 -0.08em;
  padding: 0 0.16em;
  border-radius: var(--wr-radius-sm);
  background-image: var(--wr-grad-diag);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sch-gx-mark {
      animation: schGxMark linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 50%;
    }
  }
}
@keyframes schGxMark { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* ── 3 · One person ─────────────────────────────────────────────────────── */
.sch-gx-square { aspect-ratio: 1 / 1; border-radius: var(--wr-radius-card); }

/* ── 4 · The package ────────────────────────────────────────────────────── */
.sch-gx-pk-grid { list-style: none; gap: 48px 32px; }
.sch-gx-pk { display: flex; flex-direction: column; gap: 20px; }
.sch-gx-pk b { color: var(--wr-black); font-weight: 700; }
.sch-gx-pk__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--wr-card-border);
  border-radius: var(--wr-radius-sm);
}
.sch-gx-pk__frame svg { display: block; width: 100%; height: 100%; }
.sch-gx-pk__t { transform-box: fill-box; transform-origin: center; }
@media (hover: hover) and (pointer: fine) {
  .sch-gx-pk:hover .sch-gx-pk__t { animation: schGxTIn 0.7s var(--wr-ease-spring) both; }
}
@keyframes schGxTIn { from { opacity: 0; transform: var(--gx-from, translateY(8px)); } to { opacity: 1; transform: none; } }

/* Photo band: no veil here, so the label keeps the plate's ink */
.sch-gx-band > .sch-plate__label { color: var(--wr-black-72); }

/* ── 5 · Studio ─────────────────────────────────────────────────────────── */
.sch-gx-studio { display: flex; flex-direction: column; gap: 24px; }
.sch-gx-safe { fill: none; stroke: var(--wr-orange); stroke-width: 1; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; opacity: 0.7; }
.sch-gx-sel { fill: none; stroke: var(--wr-orange); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sch-gx-handle { fill: var(--wr-white); stroke: var(--wr-orange); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sch-gx-studio__t { transform: translate(40px, -26px); transition: transform 0.7s var(--wr-ease-spring); }
.sch-gx-studio:hover .sch-gx-studio__t { transform: none; }
.sch-gx-tl-wrap { display: grid; grid-template-columns: minmax(0, 32fr) minmax(0, 640fr) minmax(0, 8fr); }
.sch-gx-tl-wrap > * { grid-column: 2; display: flex; flex-direction: column; gap: 12px; }
.sch-gx-tl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 2fr); gap: 8px; }
.sch-gx-tl__bar { height: 8px; border-radius: var(--wr-radius-pill); }
.sch-gx-tl__bar--in { background: var(--wr-grad); }
.sch-gx-tl__bar--hold { background: var(--wr-black); }
.sch-gx-tl__bar--out { background: linear-gradient(90deg, var(--wr-orange), var(--wr-yellow)); }

/* ── 6 · Ours, yours, or made for you ───────────────────────────────────── */
.sch-gx-opts .sch-h2 { max-width: 960px; }
.sch-gx-opt { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding: 32px; }
.sch-gx-note { max-width: 880px; }

/* ── 7 · Hand-over ──────────────────────────────────────────────────────── */
.sch-gx-handover { width: 100%; max-width: 600px; margin: 0 auto; display: flex; gap: clamp(32px, 4vw, 64px); align-items: flex-end; justify-content: center; }
.sch-gx-qr { display: block; width: 40%; flex-shrink: 0; }
.sch-gx-phone-art { width: 44%; flex-shrink: 0; }
.sch-gx-phone { fill: none; stroke: var(--wr-black); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.sch-gx-pkey { fill: none; stroke: var(--wr-black-15); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sch-gx-pkey.is-on { fill: url(#schGxGrad); stroke: none; }
.sch-gx-pdot { fill: var(--wr-black-15); }
.sch-gx-pdot.is-on { fill: var(--wr-black); }
.sch-gx-pv { fill: url(#schGxGrad); opacity: 0; transition: opacity 0.3s var(--wr-ease-out); }
.sch-gx-pv.is-on { opacity: 1; }

/* ── 8 · Browser source ─────────────────────────────────────────────────── */
.sch-gx-src { display: flex; flex-direction: column; padding: 24px 32px; }
.sch-gx-src .sch-row { padding: 20px 0; }
.sch-gx-src .sch-row:first-child { padding: 16px 0; }
.sch-gx-src .sch-state { text-align: right; }

/* ── 9 · The score comes from anywhere ──────────────────────────────────── */
.sch-gx-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sch-gx-foot { align-items: flex-end; }
.sch-gx-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: var(--wr-radius-pill);
  box-shadow: var(--wr-shadow-md);
}
.sch-gx-links { column-gap: 32px; }

/* ── 10 · Posts ─────────────────────────────────────────────────────────── */
.sch-gx-posts { display: flex; gap: 16px; align-items: flex-end; }
.sch-gx-post { flex: 1 1 0; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sch-gx-post--45 { flex-grow: 0.8; }
.sch-gx-post--916 { flex-grow: 0.5625; }
.sch-gx-post--169 { flex-grow: 1.7778; }
.sch-gx-post__img {
  aspect-ratio: 1 / 1;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 16px;
  border-radius: var(--wr-radius-sm);
}
.sch-gx-post--45 .sch-gx-post__img { aspect-ratio: 4 / 5; }
.sch-gx-post--916 .sch-gx-post__img { aspect-ratio: 9 / 16; }
.sch-gx-post--169 .sch-gx-post__img { aspect-ratio: 16 / 9; }
.sch-gx-post__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--wr-radius-sm);
  box-shadow: var(--wr-shadow-md);
  text-align: left;
}
.sch-gx-post__score { display: flex; gap: 12px; }
.sch-gx-post__score .sch-segs { height: 24px; gap: 4px; }

/* ── Breakpoints (1260 · 1024 · 768 · 480) ──────────────────────────────── */
@media (max-width: 1024px) {
  .sch-gx-panel { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sch-gx-panel > .sch-label { grid-column: 1 / -1; padding-right: 0; }
  .sch-gx-since { grid-template-columns: minmax(0, 1fr); }
  /* Stacked splits: keep the stand-in pictures from towering */
  .sch-gx-square { aspect-ratio: 16 / 10; }
  .sch-gx-duo .sch-shot { aspect-ratio: 1 / 1; }
}
@media (max-width: 768px) {
  .sch-gx-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sch-gx-frame > .sch-plate__label { display: none; }
  .sch-gx-pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  /* Two rows that keep one height each, as the four sizes do side by side */
  .sch-gx-posts { flex-wrap: wrap; }
  .sch-gx-post--11 { flex: 0 0 calc((100% - 16px) / 1.8); }
  .sch-gx-post--45 { flex: 0 0 calc((100% - 16px) * 0.8 / 1.8); }
  .sch-gx-post--916 { flex: 0 0 calc((100% - 16px) * 0.5625 / 2.3403); }
  .sch-gx-post--169 { flex: 0 0 calc((100% - 16px) * 1.7778 / 2.3403); }
  .sch-gx-post__img { padding: 12px; }
  .sch-gx-src { padding: 16px 20px; }
}
@media (max-width: 480px) {
  .sch-gx-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sch-gx-key { padding: 14px 16px; }
  .sch-gx-pk-grid { gap: 32px 16px; }
  .sch-gx-pk { gap: 14px; }
  .sch-gx-pill { gap: 8px; padding: 10px 14px; }
  .sch-gx-pill > .sch-label { display: none; }
  .sch-gx-posts { justify-content: center; }
  .sch-gx-post--11,
  .sch-gx-post--45,
  .sch-gx-post--916 { flex-basis: calc(50% - 8px); }
  .sch-gx-post--169 { flex-basis: 100%; }
  .sch-gx-links { column-gap: 24px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sch-gx-t, .sch-gx-l3__tick, .sch-gx-lu__row, .sch-gx-key, .sch-gx-key::before,
  .sch-gx-studio__t, .sch-gx-pv { transition: none; }
  .sch-gx-pk:hover .sch-gx-pk__t, .sch-gx-mark { animation: none; }
}