/* ============================================================================
   BROADCAST CONTROL-ROOM SKIN — Live Broadcast capability page only.
   The page behaves like the program monitor in a broadcast truck:
   fixed LIVE tally w/ running timecode (click = LIVE ⇄ STANDBY),
   viewfinder corner brackets, cue-chip rundown labels, SMPTE-bar
   preview monitors for incoming video, signal-flow pulse.
   Scoped to .bcast so nothing leaks into the base system.
   ========================================================================== */

.bcast { --rec: #E5484D; --rec-glow: color-mix(in srgb, #E5484D 45%, transparent); }

/* ---- LIVE tally (injected by broadcast.js) -------------------------------- */
.bcast-tally {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  padding: 11px 15px;
  background: color-mix(in srgb, var(--ink-950) 80%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rec-glow);
  border-radius: var(--radius);
  box-shadow: 0 0 28px -8px var(--rec-glow);
  cursor: pointer;
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: var(--tracking-label); text-align: left;
  transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
}
.bcast-tally:hover { border-color: var(--rec); box-shadow: 0 0 36px -6px var(--rec-glow); }
.bcast-tally__row { display: flex; align-items: center; gap: 9px; }
.bcast-tally__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--rec); box-shadow: 0 0 10px var(--rec);
  animation: bcast-blink 1.1s steps(1) infinite;
}
@keyframes bcast-blink { 50% { opacity: 0.22; } }
.bcast-tally__state { font-size: 0.75rem; font-weight: 700; color: #fff; }
.bcast-tally__tc { font-size: 0.6875rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bcast-tally__cue { font-size: 0.625rem; color: var(--text-tertiary); }

.is-standby .bcast-tally { border-color: var(--line); box-shadow: none; }
.is-standby .bcast-tally__dot { background: var(--text-tertiary); box-shadow: none; animation: none; }
.is-standby .bcast-tally__state { color: var(--text-secondary); }

/* ---- viewfinder corner brackets + REC vignette ---------------------------- */
.bcast-vf {
  position: fixed;
  inset: calc(var(--wp-admin--admin-bar--height, 0px) + 82px) 14px 14px;
  pointer-events: none; z-index: 80;
  box-shadow: inset 0 0 140px color-mix(in srgb, var(--rec) 6%, transparent);
  transition: box-shadow var(--t-slow) var(--ease);
}
.bcast-vf i {
  position: absolute; width: 26px; height: 26px;
  border: 2px solid color-mix(in srgb, var(--rec) 55%, transparent);
  transition: border-color var(--t-slow) var(--ease);
}
.bcast-vf i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.bcast-vf i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.bcast-vf i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.bcast-vf i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.is-standby .bcast-vf { box-shadow: none; }
.is-standby .bcast-vf i { border-color: color-mix(in srgb, #fff 16%, transparent); }
@media (max-width: 760px) {
  .bcast-vf { inset: calc(var(--wp-admin--admin-bar--height, 0px) + 72px) 8px 8px; }
  .bcast-vf i { width: 18px; height: 18px; }
  .bcast-tally { right: 12px; bottom: 12px; padding: 9px 12px; }
  .bcast-tally__cue { display: none; }
}

/* ---- hero: program-monitor chrome ----------------------------------------- */
.bcast-hero { position: relative; overflow: hidden; }
.bcast-hero .hero-img { position: absolute; inset: 0; z-index: 0; }
.bcast-hero .hero-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.bcast-hero .hero-img::after { content: ""; position: absolute; inset: 0; background: var(--scrim-hero); }
.bcast-hero__safe {
  position: absolute; inset: 7.5rem 4vw 5vh; z-index: 1;
  border: 1px solid color-mix(in srgb, #fff 9%, transparent);
  pointer-events: none;
}
.bcast-hero__meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.bcast-hero__bug { color: #fff; }
.bcast-hero__bug::before {
  content: "●"; margin-right: 8px; color: var(--rec);
  text-shadow: 0 0 10px var(--rec);
  animation: bcast-blink 1.1s steps(1) infinite;
}
.is-standby .bcast-hero__bug::before { color: var(--text-tertiary); text-shadow: none; animation: none; }

/* ---- cue chips (rundown labels on each section) --------------------------- */
.cue-chip {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: #ff9a9e;
  padding: 3px 9px; border-radius: 3px;
  border: 1px solid var(--rec-glow);
  background: color-mix(in srgb, var(--rec) 10%, transparent);
  margin-right: 12px;
  transition: opacity var(--t-slow) var(--ease);
}
.is-standby .cue-chip { opacity: 0.4; }

/* ---- preview monitors (video slots until footage arrives) ----------------- */
.mon {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--ink-950);
}
.mon__bar {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px;
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink-900) 85%, transparent);
}
.mon__bar i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ffb224; box-shadow: 0 0 8px color-mix(in srgb, #ffb224 60%, transparent);
}
.mon--live .mon__bar i { background: var(--rec); box-shadow: 0 0 8px var(--rec); animation: bcast-blink 1.1s steps(1) infinite; }
.mon__screen { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; }
.mon__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mon--bars .mon__screen {
  background:
    linear-gradient(color-mix(in srgb, var(--ink-950) 78%, transparent), color-mix(in srgb, var(--ink-950) 78%, transparent)),
    linear-gradient(90deg, #bfbfbf 0 14.28%, #b8b810 0 28.57%, #0fb8b8 0 42.85%,
                    #0fb80f 0 57.14%, #b80fb8 0 71.42%, #b81414 0 85.71%, #1414b8 0 100%);
  transition: filter var(--t-slow) var(--ease);
}
.is-standby .mon--bars .mon__screen { filter: grayscale(1); }
.mon__await {
  font-family: var(--font-mono); font-size: var(--mono-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-secondary); text-align: center; padding: var(--space-2);
  animation: bcast-blink 1.6s steps(1) infinite;
}
.is-standby .mon__await { animation: none; }

/* ---- signal chain + traveling pulse ---------------------------------------- */
.sig-track {
  position: relative; height: 2px; overflow: hidden;
  background: color-mix(in srgb, #fff 10%, transparent);
  margin-bottom: var(--space-3);
}
.sig-track::after {
  content: ""; position: absolute; top: -3px; left: -60px;
  width: 60px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--rec));
  animation: bcast-sig 3.4s linear infinite;
}
@keyframes bcast-sig { to { left: 100%; } }
.is-standby .sig-track::after { animation-play-state: paused; opacity: 0.3; }

.signal-chain { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.signal-chain > div { background: var(--ink-900); padding: var(--space-3) var(--space-2); transition: background var(--t-micro) var(--ease); }
.signal-chain > div:hover { background: color-mix(in srgb, var(--ink-900) 70%, var(--ink-950)); }
.signal-chain strong {
  display: block; font-family: var(--font-mono); font-size: var(--mono-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--space-1);
}
.signal-chain p { font-size: 0.875rem; color: var(--text-secondary); }
@media (max-width: 860px) { .signal-chain { grid-template-columns: 1fr; } }

/* ---- contact band: incoming transmission ----------------------------------- */
.bcast .contact-band { border-block: 0; }
.bcast-form { border-top: 2px solid var(--rec); padding: var(--space-3); }
.bcast-form__head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-secondary);
}
.bcast-form__head i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rec); box-shadow: 0 0 8px var(--rec);
  animation: bcast-blink 1.1s steps(1) infinite;
}
.is-standby .bcast-form__head i { animation: none; background: var(--text-tertiary); box-shadow: none; }

/* ---- motion discipline ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .bcast-tally__dot, .bcast-hero__bug::before, .mon--live .mon__bar i,
  .mon__await, .bcast-form__head i { animation: none; }
  .sig-track::after { animation: none; display: none; }
}

/* ---- v1.7.6: control-room atmosphere ---------------------------------------
   Fills the blank backgrounds: faint scanlines + vignette across the whole
   page (reads as monitor glass, sits over photos too), red signal glows
   behind key sections, duotone photo bands, glass cards. */
.bcast::before {
  content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: repeating-linear-gradient(180deg,
    rgba(255, 255, 255, 0.027) 0 1px, transparent 1px 4px);
}
.bcast::after {
  content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 38%, transparent 58%, rgba(3, 5, 8, 0.55) 100%);
}
.bcast.is-standby::before {
  background: repeating-linear-gradient(180deg,
    rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px);
}

/* alt sections go translucent so the atmosphere reads through */
.bcast .section--alt { background: color-mix(in srgb, var(--ink-900) 45%, transparent); }

/* red signal glow behind the flagship monitor + contact band */
.bcast #edc {
  background: radial-gradient(58% 62% at 70% 58%,
    color-mix(in srgb, var(--rec) 7%, transparent), transparent 72%);
}
.bcast .contact-band {
  background:
    radial-gradient(70% 95% at 76% 18%, color-mix(in srgb, var(--rec) 9%, transparent), transparent 62%),
    var(--ink-950);
}

/* duotone photo bands — crowd/laser photos pushed toward the tally red */
.bcast-band {
  position: relative;
  background:
    linear-gradient(180deg, var(--ink-950) 0%, color-mix(in srgb, var(--ink-950) 62%, transparent) 18%,
                    color-mix(in srgb, var(--ink-950) 62%, transparent) 82%, var(--ink-950) 100%),
    linear-gradient(180deg, color-mix(in srgb, #3a070c 42%, transparent), color-mix(in srgb, #0d040a 55%, transparent)),
    var(--bcast-band-img, none) center / cover no-repeat fixed,
    var(--ink-950);
}
@media (max-width: 900px) { .bcast-band { background-attachment: scroll; } }

/* glass cards over the bands */
.bcast .card {
  background: color-mix(in srgb, var(--ink-900) 70%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
  transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease);
}
.bcast .card:hover {
  transform: translateY(-4px);
  border-color: var(--rec-glow);
  box-shadow: 0 0 34px -8px var(--rec-glow);
}

/* signal-chain cells pick up the glass treatment too */
.bcast .signal-chain > div {
  background: color-mix(in srgb, var(--ink-900) 78%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ---- v1.7.7: hero drone layer ----------------------------------------------
   The FPV GoPro turntable render floats faded over the hero photo,
   idle ping-pong rotation + drag to rotate (fleet.js engine).
   screen blend drops the render's dark background into the photo. */
.bcast-hero__drone {
  position: absolute; right: -3vw; bottom: 4vh; z-index: 1;
  width: min(50vw, 720px);
  opacity: 0.55;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(68% 68% at 50% 50%, #000 52%, transparent 78%);
  mask-image: radial-gradient(68% 68% at 50% 50%, #000 52%, transparent 78%);
  transition: opacity var(--t-slow) var(--ease);
}
.bcast-hero__drone img { display: block; width: 100%; height: auto; }
.bcast-hero__drone canvas { display: block; cursor: grab; }
.bcast-hero__drone canvas:active { cursor: grabbing; }
.bcast-hero__drone:has(canvas) img { display: none; }
.is-standby .bcast-hero__drone { opacity: 0.22; }
@media (max-width: 900px) {
  .bcast-hero__drone { width: 78vw; right: -22vw; bottom: 2vh; opacity: 0.4; }
}

/* ---- v1.7.9: monitor sizing + sound toggle + signal-chain drone ------------ */
#edc .mon { max-width: min(1080px, 74%); margin-inline: auto; }
@media (max-width: 900px) { #edc .mon { max-width: 100%; } }

.mon__sound {
  margin-left: auto; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--line); border-radius: 3px;
  padding: 3px 9px;
  transition: color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.mon__sound:hover { color: #fff; border-color: var(--text-tertiary); }
.mon__sound.is-on {
  color: #ff9a9e;
  border-color: var(--rec-glow);
  background: color-mix(in srgb, var(--rec) 10%, transparent);
}

/* faded interactive drone behind a section (signal chain: sub-250 cinewhoop) */
.bcast-dronezone { position: relative; overflow: hidden; }
.bcast-dronezone > .container { position: relative; z-index: 1; }
.bcast-dronezone__drone {
  position: absolute; right: -3vw; top: 50%; transform: translateY(-50%);
  width: min(38vw, 560px); z-index: 0;
  opacity: 0.45;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(68% 68% at 50% 50%, #000 52%, transparent 78%);
  mask-image: radial-gradient(68% 68% at 50% 50%, #000 52%, transparent 78%);
  transition: opacity var(--t-slow) var(--ease);
}
.bcast-dronezone__drone img { display: block; width: 100%; height: auto; }
.bcast-dronezone__drone canvas { display: block; cursor: grab; }
.bcast-dronezone__drone canvas:active { cursor: grabbing; }
.bcast-dronezone__drone:has(canvas) img { display: none; }
.is-standby .bcast-dronezone__drone { opacity: 0.2; }
@media (max-width: 900px) { .bcast-dronezone__drone { display: none; } }

/* ---- v1.8.0: program source switcher + drone position ----------------------- */
.mon-src {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  max-width: min(1080px, 74%); margin: var(--space-2) auto 0;
}
@media (max-width: 900px) { .mon-src { max-width: 100%; } }
.mon-src__btn {
  flex: 0 1 210px; cursor: pointer; padding: 0; text-align: left;
  background: var(--ink-950);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease);
}
.mon-src__btn:hover { transform: translateY(-2px); border-color: var(--text-tertiary); }
.mon-src__btn img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: 0.75; transition: opacity var(--t-micro) var(--ease); }
.mon-src__btn span {
  display: flex; align-items: center; gap: 7px; padding: 7px 11px;
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-secondary);
  border-top: 1px solid var(--line);
}
.mon-src__btn span i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); }
.mon-src__btn.is-active { border-color: var(--rec); box-shadow: 0 0 22px -6px var(--rec-glow); }
.mon-src__btn.is-active img { opacity: 1; }
.mon-src__btn.is-active span { color: #fff; }
.mon-src__btn.is-active span i { background: var(--rec); box-shadow: 0 0 8px var(--rec); animation: bcast-blink 1.1s steps(1) infinite; }
.is-standby .mon-src__btn.is-active span i { animation: none; }

/* signal-chain drone sits over 04 · Show Control */
.bcast-dronezone__drone { right: 14vw; }

/* v1.8.8: switcher thumbs keep dark chrome while posters load */
.mon-src__btn img { background: var(--ink-950); }