/* Time Volume Studio — an uploader (after="summary") over a split: the viewer
   card on the left, the Frames / Look / Slit-scan inspector on the right
   (styles/components/form.css + uploader.css). Only the stage — the WebGL
   canvas, the slit-scan canvas and the message over them — and the camera
   buttons are this page's own. */

.tvs-title-icon {
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #a78bfa, #6d28d9);
}

/* ── the stage ───────────────────────────────────────────────── */
.tvs-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: min(72vh, 680px);
  overflow: hidden;
  background: #0e0e12;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}
/* Pointer gestures belong to the stage only while there is a stack to turn;
   otherwise a finger on it scrolls the page like anywhere else. */
.tvs-stage:is([data-state="ready"], [data-state="building"]) {
  cursor: grab;
  touch-action: none;
}
.tvs-stage.is-dragging { cursor: grabbing; }
.tvs-stage[data-view="slit"][data-state="ready"] { cursor: ew-resize; }
/* The ring is drawn above the canvases (an inset shadow on the stage itself
   would be painted underneath them). */
.tvs-stage:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 3px var(--accent);
  pointer-events: none;
}
.tvs-stage[data-bg="light"] { background: #f4f4f7; }
.tvs-stage[data-bg="transparent"] {
  background: repeating-conic-gradient(var(--checker-1) 0% 25%, var(--checker-2) 0% 50%) 0 0 / 20px 20px;
}

.tvs-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.tvs-canvas--slit { object-fit: contain; }

/* The decoding <video> has to stay in the document (some engines decode
   nothing for a detached element) but never shows. */
.tvs-source {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.tvs-source video { width: 1px; height: 1px; }

.tvs-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  text-align: center;
  pointer-events: none;
}
.tvs-overlay--cover { background: #0e0e12; }
.tvs-overlay__text {
  margin: 0;
  max-width: 38ch;
  font: 14px/1.45 var(--sans);
  color: rgba(255, 255, 255, 0.8);
}
.tvs-stage[data-bg="light"] .tvs-overlay:not(.tvs-overlay--cover) .tvs-overlay__text { color: rgba(0, 0, 0, 0.62); }
.tvs-stage[data-bg="transparent"] .tvs-overlay:not(.tvs-overlay--cover) .tvs-overlay__text { color: var(--text-dim); }

/* ── camera buttons ──────────────────────────────────────────── */
.tvs-camera-row { flex-wrap: wrap; }
.tvs-camera {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}
.tvs-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
}

.tvs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tvs-progress__label {
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .tvs-stage { aspect-ratio: 1 / 1; }
  /* On a phone the export pair takes its own full-width line under Options;
     when both don't fit side by side, each fills its own line instead of one
     hanging short under the other. */
  .tvs-actions { width: 100%; }
  .tvs-actions > .btn { flex: 1 1 auto; }
}