/* live.css — the /live page and the homepage strip that announces the stream.
   Everything here rides on the tokens in base.css: no new colours, no new
   radii, no new shadows. The one thing this file owns that the rest of the site
   does not is the "on air" state, which has to read as urgent without inventing
   a second accent — so it borrows --warn, the palette's only other saturated
   hue, and uses it exclusively for that state. */

/* ---- header ------------------------------------------------------------- */
.live-head{padding:150px 0 var(--s7)}
.live-head h1{font-size:clamp(34px,5vw,58px);line-height:1.15;margin-top:var(--s4)}
.live-head .sub{margin-top:var(--s4);font-size:17px;max-width:660px}

/* The status pill. Three states, one element. `data-state` is set from JS so a
   page rendered before the fetch resolves shows nothing rather than a wrong
   state. */
.live-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--card2);color:var(--mut);
  font-family:var(--mono);font-size:13px;letter-spacing:.02em}
.live-pill i{width:8px;height:8px;border-radius:50%;background:var(--mut);flex:none}
.live-pill[data-state="scheduled"]{border-color:rgba(var(--acc-rgb),.35);color:var(--acc)}
.live-pill[data-state="scheduled"] i{background:var(--acc);box-shadow:0 0 10px var(--acc)}
.live-pill[data-state="live"]{border-color:rgba(var(--warn-rgb),.45);color:var(--warn);
  background:rgba(var(--warn-rgb),.08)}
.live-pill[data-state="live"] i{background:var(--warn);box-shadow:0 0 12px var(--warn);
  animation:live-throb 1.6s var(--ease) infinite}
@keyframes live-throb{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

/* ---- countdown ---------------------------------------------------------- */
/* Digits are always LTR — under RTL an unforced clock reads 45:12:03:07. */
.countdown{display:flex;gap:var(--s3);margin-top:var(--s6);direction:ltr}
html[dir="rtl"] .countdown{justify-content:flex-end}
.cd-cell{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4) var(--s3);min-width:84px;text-align:center}
.cd-cell b{display:block;font-family:var(--mono);font-size:clamp(24px,3.4vw,34px);
  font-weight:700;line-height:1.1;color:var(--txt);font-variant-numeric:tabular-nums}
.cd-cell span{display:block;margin-top:6px;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut)}
.live-when{margin-top:var(--s4);color:var(--mut);font-size:14.5px}
.live-when b{color:var(--txt);font-weight:600}

.live-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.live-cta .btn svg{width:17px;height:17px;flex:none}

/* ---- player ------------------------------------------------------------- */
.live-stage{margin-top:var(--s8)}
.frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-2)}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Facade: the replay grid must not pull one YouTube player per card on load, so
   a card is a poster + button until it is clicked. */
.frame button.play{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  background:var(--card);display:grid;place-items:center}
.frame button.play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;
  transition:opacity .3s var(--ease),transform .5s var(--ease)}
.frame button.play:hover img{opacity:.75;transform:scale(1.03)}
.frame button.play .disc{position:relative;width:66px;height:66px;border-radius:50%;
  background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;
  box-shadow:0 12px 40px var(--glow);transition:transform .3s var(--ease)}
.frame button.play:hover .disc{transform:scale(1.1)}
.frame button.play .disc svg{width:24px;height:24px;margin-inline-start:3px}

/* The empty state — no stream id yet, or the session is over and nothing was
   published. A blank 16:9 box looks broken, so it says why it is blank. */
.frame .placeholder{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  gap:var(--s3);padding:var(--s5);text-align:center;color:var(--mut)}
.frame .placeholder svg{width:34px;height:34px;opacity:.5}
.frame .placeholder p{max-width:340px;font-size:14.5px}

/* ---- topics ------------------------------------------------------------- */
.live-topics{margin-top:var(--s8)}
.live-topics ol{list-style:none;margin-top:var(--s5);display:grid;gap:var(--s3)}
.live-topics li{display:flex;gap:var(--s4);align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s5);
  transition:border-color .25s,transform .25s var(--ease)}
.live-topics li:hover{border-color:rgba(var(--acc-rgb),.35);transform:translateY(-2px)}
.live-topics li b{font-family:var(--mono);color:var(--acc);font-size:14px;flex:none;
  padding-top:2px;direction:ltr}

/* ---- replays ------------------------------------------------------------ */
.replays{margin-top:var(--s9);padding-bottom:var(--s9)}
.replay-grid{display:grid;gap:var(--s5);margin-top:var(--s5);
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.replay h3{margin-top:var(--s4);font-size:18px;font-weight:600}
.replay time{display:block;margin-top:6px;color:var(--mut);font-family:var(--mono);
  font-size:12.5px;direction:ltr}

/* ---- homepage strip ----------------------------------------------------- */

@media (max-width:640px){
  .live-head{padding:120px 0 var(--s6)}
  .countdown{gap:var(--s2)}
  .cd-cell{min-width:0;flex:1;padding:var(--s3) var(--s2)}
}

@media (prefers-reduced-motion:reduce){
  .live-pill[data-state="live"] i{animation:none}
  .live-topics li:hover,.frame button.play:hover .disc,
  .frame button.play:hover img{transform:none}
}

/* ---- Series identity -------------------------------------------------------
   Added when /live became the home of Live Develop rather than a bare
   countdown. Same rule as everything above: tokens from base.css only, no new
   colours, radii or shadows. */

.live-series{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-bottom:var(--s3)}
.live-series b{font-family:var(--display);font-size:19px;font-weight:700;
  letter-spacing:-.01em}
.live-eyebrow{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--acc);padding:4px 10px;border:1px solid var(--line);
  border-radius:var(--r-pill)}
.live-count{color:var(--mut);font-family:var(--mono);font-size:13px;direction:ltr}

/* The episode number reads as a label, not a heading — it sits above the title
   and must not compete with it. */
.replay-ep{display:block;margin-top:var(--s3);color:var(--acc);
  font-family:var(--mono);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em}
.replay-ep + h3{margin-top:4px}

/* Replaces the old bare `.replay time` block: date and duration now share one
   row, so they need a flex parent rather than a display:block child. */
.replay-meta{display:flex;align-items:center;gap:var(--s3);margin-top:6px;
  color:var(--mut);font-family:var(--mono);font-size:12.5px;direction:ltr}
html[dir="rtl"] .replay-meta{justify-content:flex-end}
.replay-dur::before{content:"·";margin-inline-end:var(--s3);opacity:.6}

@media (max-width:640px){
  .live-series{gap:var(--s2)}
  .live-series b{font-size:17px}
}