/* ── The Studio (templates/studio.html, static/inv-studio.js) ──
   Two monitors (the preview small, the program large), the transitions'
   bar, then the sources as tiles, the layers, the run of show and the
   recorder. Every control is drawn with the page and keeps its room, so
   nothing moves when the script comes or a recording ends. Mobile first;
   colours are the site's tokens. */

.studio {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  display: grid;
  gap: 1rem;
}
.studio-title { margin: 0 0 0.5rem; }
.studio-lede, .studio-note, .studio-empty, .studio-refused {
  margin: 0;
  max-width: 72ch;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}
.studio-refused { font-size: var(--step-0); color: var(--text); }

/* The monitors: the program takes two thirds where there is room. */
.studio-monitors {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .studio-monitors { grid-template-columns: 1fr 2fr; align-items: end; }
}
.studio-monitor { margin: 0; display: grid; gap: 0.35rem; }
.studio-monitor canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
  border-radius: var(--radius);
  border: 2px solid var(--border);
}
.studio-monitor--preview canvas { border-color: #2e9e4f; }
.studio-monitor--program canvas { border-color: #d0342c; }
.studio-monitor figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: var(--step--1);
  color: var(--text-muted);
  min-height: 1.6em;
}
.studio-tally {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: 0.3rem;
  color: #fff;
}
.studio-tally--preview { background: #23803f; }
.studio-tally--program { background: #b52a23; }
.studio-scene { overflow-wrap: anywhere; }
.studio-rec { display: inline-flex; gap: 0.35rem; align-items: center; color: var(--text); font-variant-numeric: tabular-nums; }
.studio-rec[hidden] { display: none; }
.studio-rec-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #d0342c; }
@media (prefers-reduced-motion: no-preference) {
  .studio-rec-dot { animation: studio-blink 1s steps(2, start) infinite; }
}
@keyframes studio-blink { to { visibility: hidden; } }

/* The transitions' bar: a remote's arrows move along it. */
.studio-switcher, .studio-add, .studio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.studio-switcher .btn, .studio-add .btn, .studio-row .btn, .studio-tile .btn { min-height: 44px; }
.studio-group { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.studio-choice[aria-pressed="true"], [data-act="lower"][aria-pressed="true"], .studio-tile [aria-pressed="true"] {
  background: var(--action);
  color: var(--on-action);
  border-color: var(--action);
}
/* Room kept for what it will say. */
.studio-status, .studio-licence, .studio-fabric {
  margin: 0;
  min-height: 2.9em;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 80ch;
}
.studio-fabric { color: var(--text-dim); }

.studio-panel {
  display: grid;
  gap: 0.6rem;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}
.studio-h { margin: 0; font-size: var(--step-0); font-weight: 700; }
.studio-label { font-size: var(--step--1); color: var(--text-muted); }
.studio-lower { display: grid; gap: 0.35rem; }
.studio-input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

/* The sources: one tile each, its own picture, its controls under it. */
.studio-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.studio-tiles:empty { display: none; }
.studio-empty[hidden] { display: none; }
.studio-tile {
  display: grid;
  gap: 0.4rem;
  padding: 0.5rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  align-content: start;
}
.studio-tile[data-on~="program"] { border-color: #d0342c; }
.studio-tile[data-on~="preview"]:not([data-on~="program"]) { border-color: #2e9e4f; }
.studio-tile[data-refused] { opacity: 0.75; }
.studio-face {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #ddd;
  font-size: var(--step--1);
}
.studio-face > video, .studio-face > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.studio-name { margin: 0; font-weight: 700; font-size: var(--step--1); overflow-wrap: anywhere; }
.studio-terms { margin: 0; font-size: 0.8rem; color: var(--text-muted); overflow-wrap: anywhere; }
.studio-terms a { color: var(--accent-text); }
.studio-tile .studio-row { gap: 0.3rem; }
.studio-tile .btn { padding-inline: 0.6rem; font-size: var(--step--1); }
.studio-fader { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem; align-items: center; font-size: 0.8rem; color: var(--text-muted); }
.studio-fader input { width: 100%; min-height: 32px; accent-color: var(--accent); }
.studio-meter { width: 100%; height: 0.4rem; }

.studio-cues { margin: 0; padding-left: 1.5rem; display: grid; gap: 0.4rem; }
.studio-cues:empty { display: none; }
.studio-cue { font-size: var(--step--1); }
.studio-cue[aria-current="step"] { font-weight: 700; }
.studio-cue .btn { min-height: 36px; margin-left: 0.4rem; }

.studio-done[hidden] { display: none; }
.studio-made { display: grid; gap: 0.6rem; }
.studio-made[hidden] { display: none; }
.studio-made video { width: 100%; max-height: 50vh; aspect-ratio: 16 / 9; background: var(--media-bg); border-radius: var(--radius); }
.studio-credits { margin: 0; padding-left: 1.5rem; font-size: var(--step--1); color: var(--text-muted); display: grid; gap: 0.3rem; overflow-wrap: anywhere; }
.studio-credits a { color: var(--accent-text); }

/* The sources' own elements, playing where nobody sees them unless a tile
   shows them: kept in the layout (not display: none) so the browser keeps
   decoding what the monitors draw. */
.studio-media { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* A voice, on request (static/inv-studio-voice.js): its label first, the
   maker's words, the three named dimensions, then the takes, each labelled
   with its tier. */
.studio-ai { margin: 0; max-width: 72ch; font-size: var(--step--1); line-height: 1.5; color: var(--text); }
/* A link inside a sentence is told apart by more than its colour (WCAG 1.4.1). */
.studio-ai a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.15em; }
.studio-tier {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 0.3rem;
  border: 1px solid var(--border-strong);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  background: var(--bg);
}
.studio-voice-make { display: grid; gap: 0.6rem; }
.studio-voice-make[hidden], [data-voice-first][hidden] { display: none; }
.studio-voice-text { min-height: 5.5rem; resize: vertical; }
.studio-dims { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.studio-dims .studio-fader { grid-template-columns: 5.5rem 1fr; }
.studio-ends { grid-column: 2; font-size: 0.75rem; color: var(--text-muted); }
.studio-takes { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.studio-takes:empty { display: none; }
.studio-take-item { display: grid; gap: 0.35rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.studio-take-head { margin: 0; font-size: var(--step--1); }
.studio-take-item audio { width: 100%; }
.studio-tile[data-generated] .studio-face { background: #1b1b1b; }

/* ── The editor (static/inv-edit.js): the viewer, the playhead, three tracks
   on one timeline (each clip as wide as it is long, the timeline scrolling
   inside its own box when zoomed or narrow), the selected clip's controls,
   what can be added, and the file. Mobile first. */
.studio-editor .studio-row .btn { min-height: 44px; }
.edit[hidden] { display: none; }
.edit { display: grid; gap: 0.75rem; min-width: 0; }
.edit-viewer { margin: 0; display: grid; gap: 0.35rem; max-width: 52rem; }
.edit-viewer canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
  border-radius: var(--radius);
  border: 2px solid var(--border);
}
.edit-viewer figcaption { display: flex; flex-wrap: wrap; gap: 0.6rem; font-size: var(--step--1); color: var(--text-muted); min-height: 1.6em; }
.edit-clock { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; }
.edit-now { overflow-wrap: anywhere; }
[data-edit-act="play"][aria-pressed="true"] { background: var(--action); color: var(--on-action); border-color: var(--action); }
.edit-playhead { display: grid; gap: 0.25rem; }
.edit-playhead input { width: 100%; min-height: 32px; accent-color: var(--accent); }

.edit-timeline {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 0.4rem 0;
}
.edit-lanes { --zoom: 1; --t: 0; position: relative; width: calc(100% * var(--zoom)); min-width: 100%; display: grid; gap: 0.35rem; }
.edit-track { display: grid; gap: 0.15rem; }
.edit-track-name {
  position: sticky;
  left: 0;
  justify-self: start;
  padding: 0 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}
.edit-lane { position: relative; height: 3.25rem; margin: 0 0.6rem; }
.edit-clips { position: absolute; inset: 0; }
.edit-clips[hidden], .edit-endcard[hidden], .edit-empty[hidden] { display: none; }
.edit-empty { margin: 0; position: sticky; left: 0; line-height: 3.25rem; font-size: var(--step--1); color: var(--text-dim); }
.edit-clip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--x) * 100%);
  width: calc(var(--w) * 100%);
  min-width: 2.75rem;
  box-sizing: border-box;
  display: grid;
  align-content: center;
  gap: 0.1rem;
  padding: 0.2rem 0.45rem;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  border-left-width: 5px;
  border-radius: calc(var(--radius) - 2px);
  background: var(--bg-raised);
  color: var(--text);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1.2;
}
.edit-clip[data-kind="library"] { border-left-color: #2e7fd0; }
.edit-clip[data-kind="recording"] { border-left-color: #d0342c; }
.edit-clip[data-kind="file"] { border-left-color: #2e9e4f; }
.edit-clip[data-kind="title"] { border-left-color: #a35ee0; }
/* A clip that mixes or wipes in: the overlap shaded at its start. */
.edit-clip[style*="--fade"] { background-image: linear-gradient(to right, color-mix(in srgb, var(--text) 18%, transparent) calc(var(--fade) * 100%), transparent 0); }
.edit-clip[aria-selected="true"] { border-color: var(--action); box-shadow: inset 0 0 0 2px var(--action); z-index: 1; }
.edit-clip:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; z-index: 2; }
/* A clip's sound as a waveform (InvEditCore.peaks), behind its name. */
.edit-wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.32; fill: currentColor; }
.edit-keymark { position: absolute; bottom: 2px; left: calc(var(--k) * 100%); width: 8px; height: 8px; margin-left: -4px; background: var(--action); transform: rotate(45deg); pointer-events: none; }
.edit-picture { border: 0; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.edit-picture[hidden], .edit-track[hidden] { display: none; }
.edit-clip-name, .edit-clip-time { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edit-clip-name { font-weight: 700; }
.edit-clip-time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.edit-endcard {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--x) * 100%);
  width: calc(var(--w) * 100%);
  min-width: 2.75rem;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 2px dashed var(--border-strong);
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.edit-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(0.6rem + var(--t) * (100% - 1.2rem));
  width: 2px;
  background: #d0342c;
  pointer-events: none;
  z-index: 3;
}

.edit-part { display: grid; gap: 0.5rem; padding-top: 0.6rem; border-top: 1px solid var(--border); min-width: 0; }
.edit-h { margin: 0; font-size: var(--step--1); font-weight: 700; }
.edit-fields { display: grid; gap: 0.6rem; }
.edit-fields[hidden] { display: none; }
.edit-field { display: grid; gap: 0.25rem; font-size: var(--step--1); color: var(--text-muted); }
.edit-field[hidden], .edit-fields .studio-row[hidden] { display: none; }
.edit-field .edit-show { color: var(--text); font-variant-numeric: tabular-nums; margin-left: 0.3em; }
.edit-field input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--accent); }

.edit-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.edit-source {
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  align-content: start;
}
.edit-source .btn { padding-inline: 0.6rem; font-size: var(--step--1); }
.edit-source-none { font-size: var(--step--1); color: var(--text-muted); }
.edit-progress { width: 100%; height: 0.5rem; accent-color: var(--accent); }
.edit-keys { font-size: var(--step--1); color: var(--text-muted); }
.edit-keys summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--text); }
.edit-keys dl { margin: 0.25rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 0.8rem; }
.edit-keys dt { font-weight: 700; color: var(--text); }
.edit-keys dd { margin: 0; }
@media (max-width: 480px) {
  .edit-keys dl { grid-template-columns: 1fr; }
  .edit-keys dd { margin-bottom: 0.3rem; }
}

/* A phone as a camera: the pairing panel on the studio (its QR code always
   dark on white, as scanners read it, in either theme), and the phone's own
   page. */
.studio-pair {
  display: grid;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.studio-pair[hidden] { display: none; }
.studio-pair-h { font-size: var(--step--1); }
.studio-pair-body { display: grid; gap: 0.9rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 640px) {
  .studio-pair-body { grid-template-columns: minmax(10rem, 14rem) 1fr; }
}
.studio-qr {
  width: 100%;
  max-width: 14rem;
  aspect-ratio: 1;
  background: #fff;
  border-radius: calc(var(--radius) - 2px);
}
.studio-qr svg { display: block; width: 100%; height: 100%; }
.studio-pair-text { display: grid; gap: 0.5rem; align-content: start; }
.studio-pair-text p { margin: 0; font-size: var(--step--1); line-height: 1.5; }
.studio-pair-code output {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
}
.studio-pair-text .btn { justify-self: start; min-height: 44px; }
.studio-guest-link input { flex: 1 1 14rem; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--step--1); }
.studio-live-meter { font-size: var(--step--1); color: var(--text); font-variant-numeric: tabular-nums; }
.studio-live .btn[hidden] { display: none; }
.studio-live input { max-width: 40rem; width: 100%; }

.studio-phone { max-width: 40rem; }
.studio-who { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; font-size: var(--step--1); line-height: 1.5; color: var(--text); }
.studio-phone-form { display: grid; gap: 0.6rem; }
.studio-phone-choices { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.studio-phone-choices legend { padding: 0; margin-bottom: 0.3rem; }
.studio-phone-choices label, .studio-phone-check {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  min-height: 44px;
  font-size: var(--step--1);
  color: var(--text);
}
.studio-phone-view[hidden] { display: none; }
.studio-phone-view video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); display: block; }
/* A button's own display would show it while hidden. */
.studio-phone .btn[hidden] { display: none; }
.edit-sources[hidden] { display: none; }