/* The program panel.
 *
 * The one inverted surface in the client. In zen that is sumi ink with paper
 * text, in the Deck a lit panel on a dark deck, in the Ledger dark vellum —
 * and it needs no new token, because it is built entirely from `--ink` and
 * `--paper` swapped. That is the whole reason the hierarchy is carried by
 * ground rather than by a bigger font: a programme monitor is physically a
 * different object from the paper around it, and this is the cheapest honest
 * way to say so.
 *
 * `--accent` appears here exactly once, on the on-air chip. Everything else is
 * hairline and mono. */

.cap-pg { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }

/* ── the panel ───────────────────────────────────────────────────────── */
.cap-pg-panel {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  flex: 1 1 auto; min-height: 0;
  padding: 14px 16px 13px; border-radius: var(--r, 16px);
  background: var(--ink); color: var(--paper);
  /* Depth is a real shadow with an offset and a blur — a panel sitting on a
     page, not a coloured halo. */
  box-shadow: var(--lift);
}

.cap-pg-top { display: flex; align-items: center; gap: 10px; }
.cap-pg-tag, .cap-pg-meta {
  font-family: var(--mono); font-size: .65625rem; letter-spacing: .14em;
  text-transform: uppercase;
}
.cap-pg-tag { color: color-mix(in oklab, var(--paper) 62%, transparent); }
.cap-pg-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cap-pg-q, .cap-pg-tc {
  padding: 3px 9px; border-radius: var(--r-pill, 100px);
  border: var(--rule) solid color-mix(in oklab, var(--paper) 22%, transparent);
  color: color-mix(in oklab, var(--paper) 72%, transparent);
}
.cap-pg-tc { font-variant-numeric: tabular-nums; }

/* ── the picture ─────────────────────────────────────────────────────── */
/* The picture fits the frame, it does not dictate it.
 *
 * With a width-driven 16:9 box the panel's height depended on its width, so a
 * tile the author pinned clipped as soon as it was dragged wider — and a tile
 * that fits itself is exactly what a console cannot have. Here the stage takes
 * the height that is left and the canvas letterboxes inside it, so the panel is
 * correct at any authored size and the picture keeps its shape. */
.cap-pg-stage {
  position: relative; flex: 1 1 auto; min-height: 96px;
  display: grid; place-items: center;
  border-radius: calc(var(--r, 16px) - 6px); overflow: hidden;
  background: color-mix(in oklab, var(--ink) 82%, black);
}
.cap-pg-stage canvas {
  display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; aspect-ratio: 16 / 9;
}
.cap-pg-empty {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; font-size: .8125rem;
  color: color-mix(in oklab, var(--paper) 55%, transparent);
}
.cap-pg-empty[hidden] { display: none; }

/* ── the lower third ─────────────────────────────────────────────────── */
/* The line being spoken, in the serif and at lede size. It is the second thing
   an operator looks at after their own face, so it is the second largest thing
   on the panel. */
.cap-pg-script { flex: none; min-height: 0; }
.cap-pg-scene {
  font-family: var(--serif); font-size: 1.375rem; line-height: 1.25;
  color: var(--paper);
}
.cap-pg-line {
  font-family: var(--serif); font-size: 1.125rem; line-height: 1.5; margin-top: 5px;
  color: color-mix(in oklab, var(--paper) 88%, transparent);
  max-width: 62ch;
}
.cap-pg-scene:empty, .cap-pg-line:empty { display: none; }

/* ── meters ──────────────────────────────────────────────────────────── */
/* A meter is a trough and a fill, not a row of bars.
 *
 * Scaling the bar itself was the right fix for the layout animation and the
 * wrong shape: at rest it gave sixteen identical ticks, which read as a dashed
 * rule rather than as an instrument with no signal. The trough stays put and the
 * fill scales inside it, so silence looks like a meter at zero — which is what
 * it is. */
.cap-pg-meters {
  display: flex; align-items: flex-end; gap: 3px; height: 26px;
}
.cap-pg-meters i {
  position: relative; flex: 1; height: 100%; border-radius: 2px;
  background: color-mix(in oklab, var(--paper) 11%, transparent);
  overflow: hidden;
}
.cap-pg-meters i::after {
  content: ''; position: absolute; inset: 0;
  transform: scaleY(0); transform-origin: bottom;
  background: var(--green, #6f8f6a); border-radius: 2px;
  transition: background 120ms linear, transform 110ms linear;
}
.cap-pg-meters i.on::after { transform: scaleY(.62); }
.cap-pg-meters i.hot::after { background: var(--gold, #b98a2e); transform: scaleY(1); }

/* ── foot: one state, one action ─────────────────────────────────────── */
.cap-pg-foot { display: flex; align-items: center; gap: 12px; }
.cap-pg-air {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 12px;
  border-radius: var(--r-pill, 100px);
  border: var(--rule) solid color-mix(in oklab, var(--paper) 26%, transparent);
  color: color-mix(in oklab, var(--paper) 66%, transparent);
}
.cap-pg-air i {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: currentColor;
}
/* The one accent in the console, and it is the only thing in the client that
   means on air. The breathe is the client's single authored loop. */
.cap-pg-air.on {
  color: var(--accent); border-color: color-mix(in oklab, var(--accent) 55%, transparent);
}
.cap-pg-air.on i { animation: cap-pg-breathe 3.2s ease-in-out infinite; }
/* Asked for and not on air: the state that costs a broadcast, so it has its own
   colour rather than sharing the resting grey. */
.cap-pg-air.warn {
  color: var(--gold, #b98a2e);
  border-color: color-mix(in oklab, var(--gold, #b98a2e) 55%, transparent);
}
@keyframes cap-pg-breathe { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

.cap-pg-live {
  margin-left: auto; padding: 7px 18px; border-radius: var(--r-pill, 100px);
  cursor: pointer; font: inherit; font-size: .8125rem; font-weight: 600;
  border: var(--rule) solid transparent;
  background: var(--paper); color: var(--ink);
  transition: background 170ms var(--ease, ease), color 170ms var(--ease, ease);
}
.cap-pg-live.on {
  background: transparent; color: var(--paper);
  border-color: color-mix(in oklab, var(--paper) 40%, transparent);
}
.cap-pg-live:hover { opacity: .88; }

.cap-pg-tele {
  font-family: var(--mono); font-size: .65625rem;
  color: color-mix(in oklab, var(--paper) 50%, transparent);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 40%;
}

/* ── tools, on paper ─────────────────────────────────────────────────── */
.cap-pg-tools {
  flex: none;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .75rem; color: var(--ink-2);
}
.cap-pg-pick { display: flex; align-items: center; gap: 7px; }
.cap-pg-pick > span {
  font-size: .625rem; font-weight: 600; letter-spacing: var(--label-track, .14em);
  text-transform: var(--label-case, uppercase); color: var(--label-ink, var(--ink-2));
}
.cap-pg-pick select, .cap-pg-share {
  padding: 5px 10px; border-radius: var(--r-sm, 8px); font: inherit; font-size: .75rem;
  border: var(--rule) solid var(--hairline);
  background: var(--card); color: var(--ink);
}
.cap-pg-pick select { max-width: 22ch; }
.cap-pg-share { cursor: pointer; }
.cap-pg-share:hover { border-color: var(--hairline-2); }
/* Sits quiet until there is something to say; a healthy console is silent. */
.cap-pg-warn {
  margin-left: auto; font-size: .75rem; color: var(--ink-2); text-align: right;
}
.cap-pg-warn[hidden] { display: none; }

@media (max-width: 700px) {
  .cap-pg-scene { font-size: 1.1875rem; }
  .cap-pg-line { font-size: .9375rem; }
  .cap-pg-tele { display: none; }
}

/* ── recording: the other half of the transport ──────────────────────── */
/* It sits beside the on-air chip and is deliberately *not* the same shape. A
   recording is not a broadcast: it goes to a file on this machine, nobody is
   watching, and a person who confuses the two has either lost a take or
   broadcast something they meant to keep. So the chip carries the word and the
   clock, and only ever one of the two states is lit. */
.cap-pg-rec {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 11px;
  border-radius: var(--r-pill, 100px);
  border: var(--rule) solid color-mix(in oklab, var(--accent) 55%, transparent);
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.cap-pg-rec[hidden] { display: none; }
.cap-pg-rec i {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none;
  animation: cap-pg-breathe 3.2s ease-in-out infinite;
}

.cap-pg-recbtn {
  padding: 6px 14px; border-radius: var(--r-pill, 100px); cursor: pointer;
  font: inherit; font-size: .75rem; font-weight: 600;
  border: var(--rule) solid color-mix(in oklab, var(--paper) 30%, transparent);
  background: transparent; color: color-mix(in oklab, var(--paper) 82%, transparent);
  transition: background 170ms var(--ease, ease), color 170ms var(--ease, ease);
}
.cap-pg-recbtn:hover { border-color: color-mix(in oklab, var(--paper) 55%, transparent); color: var(--paper); }
.cap-pg-recbtn.on {
  background: var(--accent); border-color: transparent; color: #fff;
}

/* The microphone switch. On is the resting state, so it is the quiet one; the
   muted state is the one that needs saying, because a muted mic is silent and
   silence is invisible. */
.cap-pg-mute {
  padding: 5px 11px; border-radius: var(--r-pill, 100px); cursor: pointer;
  font: inherit; font-size: .71875rem;
  border: var(--rule) solid var(--hairline); background: transparent; color: var(--ink-3);
}
.cap-pg-mute.on { color: var(--ink-2); }
.cap-pg-mute[aria-pressed="true"] {
  color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, transparent);
}