/* ytour-render — page-specific layout. base.css (copied verbatim from ytour,
   031 §4) supplies every token and primitive (.pill, .input, .chip, --s*,
   --r-*, --text*). Nothing here redefines a custom property. */

.render-shell {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: var(--s6) var(--s4) var(--s8);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.render-head {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}

.render-head__sub {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dim);
  -webkit-text-fill-color: var(--text-dim);
  background: none;
}

.render-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s5);
  border-radius: var(--r-panel);
  background: var(--surface);
  border: 1px solid var(--hairline);
}

/* Testing-round fix: `display: flex` above wins the cascade over the UA
   stylesheet's `[hidden] { display: none }`, so every panel — upload,
   confirm, permission-error, recording, done — was visible simultaneously,
   always, on every single load. `upload-screen.ts`'s state machine WAS
   toggling the `hidden` attribute correctly the whole time; nothing about
   it needed to change, only this. */
.render-panel[hidden] {
  display: none;
}

.render-message {
  font-size: 16px;
  line-height: 1.5;
  text-wrap: balance;
}

.render-summary {
  color: var(--text-dim);
  font-size: 14px;
}

.render-precopy {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
}

.render-precopy strong {
  color: var(--text);
}

.render-error {
  color: var(--spec-1);
  font-size: 14px;
  min-height: 1em;
}

.render-warning {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-row);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.render-progress {
  color: var(--text-dim);
  font-size: 14px;
}

.render-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.render-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 160px;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-panel);
  padding: var(--s5);
  text-align: center;
  color: var(--text-dim);
}

.render-drop--over {
  border-color: var(--text-dim);
  background: var(--surface-2);
}

.render-optional {
  color: var(--text-dim);
  font-size: 13px;
}

.render-optional summary {
  cursor: pointer;
  color: var(--text-dim);
}

.render-optional[open] summary {
  color: var(--text);
  margin-bottom: var(--s2);
}

.render-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: var(--r-row);
  overflow: hidden;
}

/*
 * Integrator fix (B6). `getDisplayMedia({video:true})` on "This Tab" captures
 * the tab's actual rendered content — every pixel of it, not just
 * `.render-stage`. The warning text and the live progress readout were
 * therefore burned into every exported recording, on top of the actual
 * video, for the entire time it was on screen. While `body.is-capturing` is
 * set (upload-screen.ts, for the exact span `startCapture` is live), the
 * stage fills the whole viewport and everything else on the page — the
 * wordmark, the warning, the progress paragraph — is hidden from the
 * rendered page, so none of it exists to be captured. Progress instead goes
 * to `document.title` (outside the page's rendered content, never
 * captured); `#render-stop` stays visible, since a person needs a way to
 * end a recording that is stuck or simply no longer wanted, and it renders
 * on top of the actual video content deliberately — that is a cost worth
 * paying for having an exit at all (M7), unlike a burned-in status line the
 * person never asked to see in their download.
 */
body.is-capturing .render-head,
body.is-capturing .render-warning,
body.is-capturing .render-progress {
  display: none;
}

body.is-capturing #render-recording {
  position: fixed;
  inset: 0;
  z-index: 1000;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: var(--ink);
}

body.is-capturing .render-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  aspect-ratio: unset;
  border-radius: 0;
}

body.is-capturing .render-stop {
  position: fixed;
  right: var(--s4);
  bottom: var(--s4);
  z-index: 1001;
}

.render-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Sound-clip hosts are audio-only by design (076 A-2) — present in the DOM so
   their iframes decode and play, never visible, and deliberately NOT
   display:none, which throttles/pauses a YouTube iframe in most browsers. */
.render-sound-hosts {
  position: fixed;
  width: 2px;
  height: 2px;
  overflow: hidden;
  left: -9999px;
  top: -9999px;
}