/* The two ways to look at a Tellie script: the marked-up source you would
   type, and that same script sitting in the prompter exactly as it looks
   before you start. A toggle, not a wipe, so both halves stay scrollable and
   selectable, and the scroll position carries across.

   Paired with /script-views.js, which needs /stagehand-demo.{css,js} for the
   prompter half. Self-contained colors on purpose (like stagehand-demo.css):
   this component drops into pages with different variable sets. */

.sv { --sv-line: #e5e5e7; --sv-warm: #fffaf2; --sv-soft: #f5f5f7;
  --sv-must: #d96400; --sv-key: #6d3f7d; --sv-ink: #3c3d45; --sv-faint: #86868b; }

/* Hidden until the script wires it: with JS off the source is the whole page,
   and a toggle that cannot toggle would be a lie. */
.sv-tog { display: none; gap: 2px; padding: 3px; margin: 0 0 12px;
  background: var(--sv-soft); border-radius: 11px; }
.sv.sv-on .sv-tog, .sv-tog[data-standalone] { display: inline-flex; }
.sv-tog button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 650;
  color: var(--sv-faint); padding: 7px 13px; border-radius: 8px; cursor: pointer; }
.sv-tog button[aria-selected="true"] { background: #fff; color: #1d1d1f; box-shadow: 0 1px 3px rgba(0,0,0,.10); }

.sv-src { margin: 0; background: var(--sv-warm); border: 1px solid var(--sv-line); border-radius: 12px;
  padding: 16px 18px; overflow: auto; font: 13px/1.75 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap; color: var(--sv-ink); }
.sv-src .mk { color: var(--sv-must); font-weight: 700; }
.sv-src .ky { color: var(--sv-key); font-weight: 700; }

/* The prompter half is a still, not a take: no auto-scroll, no reading
   highlight, and the chin is not a control here. */
.sv-live .sh-demo { margin: 0; }
.sv-live .sh-stage { padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.13); }
.sv-live .sh-frame { overflow-y: auto; }
.sv-live .sh-reading { transform: none !important; transition: none !important; padding: 18px 0 22px; }
.sv-live .sh-xray { display: none; }
.sv-live .sh-nav, .sv-live .sh-pip { pointer-events: none !important; cursor: default !important; }
.sv-empty { display: grid; place-items: center; text-align: center; border: 1px dashed var(--sv-line);
  border-radius: 14px; padding: 26px; color: var(--sv-faint); font-size: 15px; line-height: 1.5; }