/* Ivan studio surface. Satoshi is the shared website typeface. */

/* Official Fontshare variable webfont; weights 300–900. */
@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("https://cdn.fontshare.com/wf/NWBQYJIM7GCZ5XWD7D26ARB3VDY55ZRT/K63EV2KZIGKLE7RANQ2U42S6SVHU5RJ7/X6XYTKIVDUW7GZTZPZNN4EUM5KH54KHF.woff2") format("woff2");
}

/* Run-page reading and data; Newsreader includes optical sizes 6–72. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader.10fc876f9f21.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono.8af39dc3c10c.woff2") format("woff2");
}

/* The one signature face: the emphasised word of the landing headlines.
   Roman, weight 500, optical sizes 9–144 and the SOFT axis. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/fraunces.e646f6a42c12.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

.drawing-editor { width: min(1180px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); box-shadow: var(--sheet-shadow); overflow: auto; }
.drawing-editor::backdrop { background: rgba(0,0,0,.52); }
.drawing-editor > header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; }
.drawing-editor h2 { font: 500 28px/1.2 var(--serif); margin: 4px 0 0; }
.editor-eyebrow { font: 600 13.5px/1.4 var(--sans); letter-spacing: -.008em; color: var(--ink-2); margin: 0; }
.drawing-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 28px; align-items: start; }
.drawing-workspace { min-width: 0; }
.drawing-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; font: 12px/1.5 var(--sans); color: var(--ink-3); }
.drawing-toolbar span { flex: 1; }
.drawing-canvas { position: relative; aspect-ratio: var(--video-aspect); width: min(100%, calc((100dvh - 200px) * var(--video-aspect))); margin: 0 auto; background: #f4f1e7; border: 1px solid var(--line); overflow: hidden; touch-action: none; cursor: crosshair; }
.drawing-canvas img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.drawing-selection { position: absolute; border: 2px solid #4f6fd8; background: rgba(79,111,216,.05); box-shadow: 0 0 0 1px #ffffff99; pointer-events: none; box-sizing: border-box; }
.drawing-inspector { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.drawing-inspector label { display: block; font: 12px/1.5 var(--sans); color: var(--ink-2); }
.drawing-inspector input:not([type=checkbox]), .drawing-inspector select, .drawing-inspector textarea { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--ink); background: var(--paper-2); font: 13px/1.5 var(--sans); }
.drawing-inspector textarea { resize: vertical; min-height: 100px; }
.drawing-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.drawing-inspector .drawing-check { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.drawing-check input { accent-color: var(--oxide); }
.drawing-color { display: flex; gap: 10px; align-items: center; margin: 6px 0 16px; }
.drawing-color input[type=color] { width: 40px; height: 32px; padding: 2px; margin: 0; }
.drawing-apply { border-top: 1px solid var(--line); padding-top: 16px; }
.drawing-apply .revision-submit { width: 100%; }
.drawing-inspector #drawing-reset { margin-top: 12px; }
.drawing-editor button:disabled { opacity: .45; cursor: default; }
.estimate-price { margin: 24px 0 4px; font: 500 30px/1.2 var(--serif); }
.edit-estimate footer { display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
.video-update { padding: 12px 16px; margin-bottom: 20px; border: 1px solid var(--line-2); background: var(--paper-2); display: flex; gap: 20px; justify-content: space-between; align-items: center; font: 13px/1.5 var(--sans); }
.video-update[hidden] { display: none; }
.video-update p { margin: 0; }
@media (max-width: 760px) {
  .drawing-editor { width: calc(100vw - 16px); padding: 16px; max-height: calc(100dvh - 16px); }
  .drawing-editor-layout { grid-template-columns: 1fr; gap: 18px; }
  .drawing-editor > header { margin-bottom: 14px; }
  .drawing-editor h2 { font-size: 23px; }
  .drawing-toolbar { gap: 12px; }
  .drawing-inspector { padding-bottom: 8px; }
  .video-update { align-items: flex-start; }
}

/* The light palette stands alone first, so a browser without light-dark()
   (before the baseline in STUDIO_DESIGN 12) stays on paper in both schemes;
   the @supports block below pairs each token with its dark value. */
:root {
  color-scheme: light dark;
  --paper: #f6f2ea;
  --paper-2: #ece6da;
  --ink: #1c1a17;
  --ink-2: #5b5750;
  --ink-3: #6f6a60;
  --ink-4: #9a9488;
  --line: #ddd6c8;
  --line-2: #c6bdab;
  --film: #141210;
  --cream: #efe8da;
  --cream-2: #b8b0a2;
  --oxide: #9a3b2c;
  --selection: rgba(28, 26, 23, 0.12);
  --scrim: rgba(20, 18, 16, 0.14);
  --frame-edge: rgba(28, 26, 23, 0.1);
  --sheet-shadow: 0 0 0 1px var(--line-2), 0 24px 64px rgba(0, 0, 0, 0.16);
  --chip-bg: rgba(20, 18, 16, 0.72);
  --overlay-bg: rgba(20, 18, 16, 0.82);
  --serif: var(--sans);
  --sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif;
  --mono: var(--sans);
  --reading: "Newsreader", Georgia, "Times New Roman", serif;
  --data: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease-in: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.4, 0, 1, 1);
  --gutter: clamp(20px, 6vw, 120px);
  --col-max: 1200px;
  --bar-h: 52px;
  --script-w: 320px;
  --spread-gap: 48px;
  --frame-chrome: 300px;
  /* The run's frame shape: 16 / 9 unless the page is viewing a portrait
     run, when the root carries data-format="portrait". The spread column,
     the frame, the chapter thumbnail and the drawing canvas all read it. */
  --video-aspect: 16 / 9;
  --sheet-history-w: 360px;
  --sheet-inspect-w: 520px;
  --t-fast: 150ms;
  --t-chip: 200ms;
  --t-arrive: 320ms;
  --t-fade: 400ms;
  --t-sheet: 480ms;
  --t-spread: 600ms;
}

@supports (color: light-dark(#000, #fff)) {
  :root {
    --paper: light-dark(#f6f2ea, #161412);
    --paper-2: light-dark(#ece6da, #1e1b18);
    --ink: light-dark(#1c1a17, #ede7db);
    --ink-2: light-dark(#5b5750, #b3ac9f);
    --ink-3: light-dark(#6f6a60, #948d80);
    --ink-4: light-dark(#9a9488, #6b655b);
    --line: light-dark(#ddd6c8, #2c2823);
    --line-2: light-dark(#c6bdab, #3d3830);
    --film: light-dark(#141210, #0b0a09);
    --oxide: light-dark(#9a3b2c, #d9806c);
    --selection: light-dark(rgba(28, 26, 23, 0.12), rgba(237, 231, 219, 0.16));
    --frame-edge: light-dark(rgba(28, 26, 23, 0.1), #2c2823);
    --sheet-shadow: 0 0 0 1px var(--line-2), 0 24px 64px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.5));
  }
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

@media (min-width: 1800px) {
  :root { --col-max: 1320px; }
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  overflow-x: hidden;
}

::selection { background: var(--selection); }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

button { cursor: pointer; text-align: left; }

.author-options { margin: 12px 4px 0; color: var(--ink-3); font-size: 12px; }
.author-options summary { cursor: pointer; width: fit-content; }
.author-options-fields { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 12px; }
.author-options-fields label { display: grid; gap: 6px; flex: 1 1 150px; }
.author-options-fields input, .author-options-fields select { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; color: var(--ink); background: var(--paper); }
.author-options-fields input:focus-visible, .author-options-fields select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button:disabled { cursor: default; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.frame :focus-visible {
  outline-color: var(--cream);
  outline-offset: -3px;
}

/* Keyboard hints are machine values: the data face, never a word face. */
kbd { font-family: var(--data); font-weight: 400; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Machine values only: times, counts, scene numbers, raw JSON. */
.mono,
.elapsed,
.time,
.frame-count,
.count,
.scene-number,
.json,
.gantt-num,
.call-num,
.overview dd,
.rail-tip-num,
.rail-tip-time {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Words stay in the product's voice, whatever column they sit in. */
.chip,
.engine,
.status-word,
.row-meta {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 450;
  letter-spacing: -.008em;
}

.text-link {
  font: 500 13px/18px var(--sans);
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-in);
}

.text-link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-2);
  text-underline-offset: 0.16em;
}

.text-button {
  font: 500 14px/20px var(--sans);
  color: var(--ink);
  height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color var(--t-fast) var(--ease-in);
}

.text-button:hover { background: var(--paper-2); }
.text-button:active { opacity: 0.8; }
.text-button:disabled { color: var(--ink-4); }

/* The one action a stopped run wants first: filled like Explain, with its
   icon, so it cannot be mistaken for a secondary link. */
.text-button.is-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px 0 14px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}
.text-button.is-primary:hover { background: var(--ink); opacity: 0.9; }
.text-button.is-primary:disabled { background: var(--ink-4); color: var(--paper); opacity: 1; }
.text-button.is-primary svg { width: 16px; height: 16px; flex: none; }
.run-actions { align-items: center; }

/* ---------- Page and bar ---------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* A docked Inspect snaps the column to the remaining width: 24 px gutters
   either side of the 520 px sheet (1440 → 872, 1280 → 712), which keeps 1440
   well clear of the stacked threshold below. */
.page.is-docked { --gutter: 24px; }

.page.is-docked .bar,
.page.is-docked .main { padding-right: calc(var(--sheet-inspect-w) + var(--gutter)); }

.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  background: var(--paper);
  transition: box-shadow var(--t-fast) var(--ease-in);
}

/* The bar's content shares the column box with the title and the spread, so
   the wordmark sits on the question's left edge and the links end where the
   elapsed does; the bar itself stays full-bleed for the sticky hairline. */
.bar-inner {
  flex: 1;
  max-width: var(--col-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bar.is-scrolled { box-shadow: 0 1px 0 var(--line); }

.wordmark {
  font: 600 20px/24px var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
}

.bar-links {
  display: flex;
  gap: 24px;
}

/* Every link in the bar reads the same way: one line icon at the text's
   colour, then the word. The icon is decorative; the word is the label. */
.bar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 13px/18px var(--sans);
  color: var(--ink-2);
  padding: 4px 0;
  transition: color var(--t-fast) var(--ease-in);
}

.bar-link svg { flex: none; opacity: .85; }
.bar-link:hover svg { opacity: 1; }

.bar-link:hover { color: var(--ink); }

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter);
}

.composer,
.run {
  width: min(var(--col-max), 100%);
  margin: 0 auto;
}

/* ---------- Composer ---------- */

.composer {
  padding-top: calc(38vh - var(--bar-h));
  padding-bottom: 96px;
  transition: opacity 240ms var(--ease-out);
}

.composer.is-leaving { opacity: 0; }

.composer-form {
  width: min(680px, 100%);
}

.field-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.field {
  flex: 1;
  min-width: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  font-feature-settings: "kern", "liga";
  color: var(--ink);
  caret-color: var(--ink);
  padding: 6px 0 8px;
  resize: none;
  overflow: hidden;
  min-height: 46px;
  max-height: 270px;
  box-shadow: inset 0 -1px 0 var(--line-2);
  transition: box-shadow var(--t-fast) var(--ease-in);
  field-sizing: content;
}

.field.is-tall { overflow-y: auto; }
.field::placeholder { color: var(--ink-3); opacity: 1; }
.field:focus { box-shadow: inset 0 -1px 0 var(--ink); }
.field:focus-visible { outline: none; }

/* Dictate: a quiet mic beside the field; the oxide dot pulses while it listens. */
.dictate {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 1px;
  border-radius: 4px;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-in), background-color var(--t-fast) var(--ease-in);
}

.dictate:hover { color: var(--ink); }
.dictate:active { background: var(--line-2); }
.dictate:disabled { color: var(--ink-4); }
.dictate.is-busy { color: var(--ink-3); }
.dictate.is-recording { color: var(--ink); }

.dictate-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oxide);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--t-fast) var(--ease-in), transform var(--t-fast) var(--ease-in);
}

.dictate.is-recording .dictate-dot {
  opacity: 1;
  transform: none;
  animation: dictate-pulse 1.4s ease-in-out infinite;
}

@keyframes dictate-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.explain {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px 0 16px;
  margin-top: 1px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font: 500 14px/20px var(--sans);
  transition: opacity var(--t-fast) var(--ease-in);
}

.explain kbd {
  font-size: 12px;
  line-height: 16px;
  color: var(--paper);
  opacity: 0.6;
}

.explain:hover { opacity: 0.9; }
.explain:active { opacity: 0.8; }
.explain:disabled { background: var(--ink-4); opacity: 1; }
.explain.is-busy { opacity: 0.7; }

.composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  min-height: 28px;
}

.composer-left,
/* Two dot-separated groups (length, voice) sit side by side; the space
   between them is wider than the space within each. */
.composer-right {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.try {
  font: 400 13px/18px var(--sans);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-fast) var(--ease-in);
}

.try:hover { color: var(--ink); }

.count { color: var(--ink-3); }
.count.is-over { color: var(--oxide); }

.segmented {
  display: inline-flex;
  align-items: center;
  border: 0;
  padding: 0;
  margin: 0;
}

.segmented label {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.segmented label + label::before {
  content: "·";
  color: var(--ink-4);
  padding: 0 6px;
  font: 400 13px/18px var(--sans);
}

.segmented input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.segmented span {
  display: inline-block;
  padding: 5px 2px;
  font: 400 13px/18px var(--sans);
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease-in);
}

.segmented label:hover span { color: var(--ink-2); }
.segmented input:checked + span { color: var(--ink); }
.segmented input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.engine {
  margin: 16px 0 0;
  color: var(--ink-3);
  min-height: 16px;
}

.engine.is-missing { color: var(--oxide); font-family: var(--sans); font-size: 13px; line-height: 18px; }

.composer-error {
  margin: 8px 0 0;
  font: 400 13px/18px var(--sans);
  color: var(--oxide);
  min-height: 0;
}

.composer-error:empty { display: none; }

/* Recently */

.recently { margin-top: 64px; max-width: 680px; }

.recently-label {
  margin: 0 0 4px;
  font: 500 13px/18px var(--sans);
  color: var(--ink-3);
}

.row-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The Recently list is one grid: each item and its button are subgrids, so
   the question, the meta and the status word sit in columns shared by every
   row and the dates line up down the page. */
.recently .row-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.recently .row-list > li,
.recently .row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 0;
  width: 100%;
  min-height: 44px;
  padding: 10px 0;
  box-shadow: inset 0 -1px 0 var(--line);
  color: var(--ink);
  transition: background-color var(--t-fast) var(--ease-in);
}

.row:hover { background: var(--paper-2); }
.row.is-current { background: var(--paper-2); }

.row-question {
  font: 500 14px/20px var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-meta { color: var(--ink-3); white-space: nowrap; margin-left: 16px; }
.status-word { color: var(--ink-3); white-space: nowrap; }
.status-word.is-failed { color: var(--oxide); }
.status-word:empty { display: none; }

/* An empty status word keeps its cell so the shared column stays put, and the
   gap belongs to the word itself so a list with nothing to say ends flush
   with the column. */
.row .status-word:empty { display: block; }
.row .status-word:not(:empty) { margin-left: 16px; }

.all-runs { margin-top: 12px; }

/* ---------- Run: title block ---------- */

.run {
  padding-bottom: 16px;
  container-type: inline-size;
  container-name: column;
}

.title-block { padding-top: 64px; }

.question {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-feature-settings: "kern", "liga";
  color: var(--ink);
  overflow-wrap: anywhere;
  hanging-punctuation: first allow-end;
  transform-origin: 0 0;
  will-change: transform;
}

.question.is-lifting { transition: transform var(--t-sheet) var(--ease-in); }

.question.q-40 { font-size: 40px; line-height: 46px; font-weight: 400; letter-spacing: -0.006em; text-wrap: balance; }
.question.q-28 { font-size: 28px; line-height: 34px; font-weight: 450; letter-spacing: 0; text-wrap: balance; }
.question.q-19 {
  font-size: 19px;
  line-height: 26px;
  font-weight: 450;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.question.q-19.is-expanded { display: block; -webkit-line-clamp: none; overflow: visible; }

.read-all { margin-top: 4px; }

.running-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 8px;
  padding-bottom: 12px;
  box-shadow: inset 0 -1px 0 var(--line);
  transition: opacity var(--t-arrive) var(--ease-in);
}

/* Held back while the question lifts into the title: hidden at once, shown
   with the fade above. */
.running-row.is-arriving { opacity: 0; transition: none; }

.running {
  flex: 1;
  min-width: 0;
  margin: 0;
  font: 500 14px/20px var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.running.is-failed { color: var(--ink); }

.dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oxide);
  align-self: center;
}

.dot.is-ink { background: var(--ink); }

.reconnecting {
  font: 400 13px/18px var(--sans);
  color: var(--ink-2);
}

.elapsed {
  flex: none;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--ink-2);
  min-width: 4ch;
  text-align: right;
}

.failure { margin-top: 12px; }

.raw-error {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-height: 36px;
}

.raw-error.is-expanded {
  display: block;
  -webkit-line-clamp: none;
  max-height: none;
  overflow: visible;
}

.failure-actions {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}

.run-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* ---------- Spread ---------- */

/* The frame is sized from the viewport alone (spec section 4): the column
   less the script and its gap, or the 16:9 box that fits under 300 px of
   chrome, whichever is narrower. Nothing on the page resizes it; a taller
   title block or a failure block scrolls the page instead. The script track
   is fixed so its measure never changes between runs. */
.spread {
  margin-top: 12px;
  display: grid;
  grid-template-columns: min(100% - var(--script-w) - var(--spread-gap), max(320px, (100vh - var(--frame-chrome)) * var(--video-aspect))) var(--spread-gap) var(--script-w);
  align-items: stretch;
  transition: opacity var(--t-spread) var(--ease-in), transform var(--t-spread) var(--ease-in);
}

.spread.is-arriving { opacity: 0; transform: translateY(16px); }

.film {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.frame {
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--video-aspect);
  background: var(--film);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--frame-edge);
  color: var(--cream);
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--t-fade) var(--ease-in);
  pointer-events: none;
}

.layer.is-visible { opacity: 1; }

.video { object-fit: contain; background: var(--film); }

/* The first picture arrives over the drawing with the frame's fade; from the
   first swap on, every change of picture is a cut, as it is in final.mp4. */
.frame.is-cut .video { transition: none; }

/* The waiting frame is the product's stage, so it is composed like one: the
   stage rail across the top, the display line and its sub-line centred, the
   ink line under them, the counters along the foot. Everything is measured
   from the frame itself (cqi), so the same composition holds at 400 px and
   in fullscreen. */
.status-layer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(52px, 15cqi, 84px) clamp(18px, 6cqi, 44px);
  text-align: center;
}

.stage-rail {
  position: absolute;
  top: clamp(14px, 4.6cqi, 30px);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(430px, 84%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage-rail > li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 9px;
}

/* The track is drawn segment by segment, each from the dot before it to its
   own, so a finished stretch reads as one continuous line. */
.stage-rail > li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: -50%;
  right: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--cream) 16%, transparent);
}

.stage-rail > li:first-child::before { content: none; }
.stage-rail > li.is-done::before,
.stage-rail > li.is-active::before { background: color-mix(in srgb, var(--cream) 34%, transparent); }

.stage-dot {
  position: relative;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 20%, transparent);
  transition: background-color var(--t-fade) var(--polish-ease), box-shadow var(--t-fade) var(--polish-ease);
}

.stage-name {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: -.008em;
  color: color-mix(in srgb, var(--cream) 38%, transparent);
  transition: color var(--t-fade) var(--polish-ease);
}

.stage-rail > li.is-done .stage-dot { background: color-mix(in srgb, var(--cream) 52%, transparent); }
.stage-rail > li.is-done .stage-name { color: color-mix(in srgb, var(--cream) 52%, transparent); }
.stage-rail > li.is-active .stage-dot { background: var(--cream); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cream) 11%, transparent); }
.stage-rail > li.is-active .stage-name { color: var(--cream); }

.frame-title {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(19px, 4.6cqi, 32px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--cream);
  text-wrap: balance;
}

.frame-line {
  margin: 0;
  max-width: 46ch;
  font-family: var(--sans);
  font-size: clamp(12px, 1.9cqi, 14px);
  line-height: 1.5;
  color: color-mix(in srgb, var(--cream) 58%, transparent);
  text-wrap: pretty;
}

.frame-line:empty { display: none; }

/* The only figure on the frame: how much of the plan is standing.
   Tabular, so it does not shift as it counts. */
.frame-count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(14px, 4.6cqi, 30px);
  margin: 0;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--cream) 40%, transparent);
}

.frame-count:empty { display: none; }

.chip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--chip-bg);
  color: var(--cream-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-chip) var(--ease-in), visibility var(--t-chip);
  pointer-events: none;
}

.chip.is-shown { opacity: 1; visibility: visible; }

.play-big {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--cream);
  cursor: pointer;
}

/* The overlay sits over a white drawing or a paused frame as often as over
   film, so the ring and the label carry their own dark backing; cream on it
   reads at 6:1 or better whatever the picture. */
.play-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--chip-bg);
  box-shadow: inset 0 0 0 1px var(--cream);
  transition: background-color var(--t-fast) var(--ease-in);
}

.play-ring svg { margin-left: 3px; }
.play-big:hover .play-ring { background: var(--overlay-bg); }

.play-big-label {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--overlay-bg);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--cream);
}

/* A stall reads as the frame itself thinking, never a blank beat: a dark
   disc holding a cream arc, centred over whatever is paused underneath it,
   drawing or film. It never shows alongside the play-big overlay or the
   status layer, which are already the frame's own waiting UI. */
.buffering {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.buffering-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 12cqi, 64px);
  height: clamp(44px, 12cqi, 64px);
  border-radius: 50%;
  background: var(--chip-bg);
}

.buffering-ring::before {
  content: "";
  width: 56%;
  height: 56%;
  border-radius: 50%;
  border: clamp(2px, 0.9cqi, 3px) solid color-mix(in srgb, var(--cream) 24%, transparent);
  border-top-color: var(--cream);
  animation: buffering-spin 900ms linear infinite;
}

@keyframes buffering-spin { to { transform: rotate(360deg); } }

/* Controls */

/* Native caption cues sit low on the drawing in both schemes. */
video::cue {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.35;
  color: #f6f2ea;
  background: rgba(22, 20, 18, 0.82);
}

.controls {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
}

.control {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 40px;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-in);
}

.control.play { width: 44px; margin-left: -12px; }
.controls.is-inert .control,
.controls.is-inert .time { color: var(--ink-4); }
.controls.is-inert .control { pointer-events: none; }
.control:hover { color: var(--ink); }
.control[aria-pressed="true"] { color: var(--ink); }
.control .icon { display: block; }
.control.play .icon-pause,
.control.play.is-playing .icon-play { display: none; }
.control.play.is-playing .icon-pause { display: block; }
.control.mute .icon-muted,
.control.mute[aria-pressed="true"] .icon-sound { display: none; }
.control.mute[aria-pressed="true"] .icon-muted { display: block; }

.time {
  flex: none;
  color: var(--ink-2);
  padding: 0 8px 0 0;
  white-space: nowrap;
}

.time-now { display: inline-block; min-width: 4ch; text-align: right; }
.time-total { display: inline-block; min-width: 4ch; }
.time-sep { color: var(--ink-4); }

.rail {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 24px;
  cursor: pointer;
  touch-action: none;
}

.rail:focus-visible { outline-offset: 0; }

.rail-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 2px;
  display: flex;
  gap: 3px;
}

.chapter {
  flex: 1 1 0;
  height: 2px;
  background: var(--line);
  transition: background-color var(--t-chip) var(--ease-in), opacity var(--t-arrive) var(--ease-in);
  border-radius: 1px;
}

.chapter.is-ready { background: var(--ink); }
.chapter.is-failed { background: var(--oxide); }
.chapter.is-arriving { opacity: 0; }

.chapter.stub {
  background: repeating-linear-gradient(90deg, var(--line-2) 0 2px, transparent 2px 5px);
}

.playhead {
  position: absolute;
  top: 6px;
  left: 0;
  width: 1px;
  height: 12px;
  background: var(--ink);
  opacity: 0;
  transition: opacity var(--t-chip) var(--ease-in);
  will-change: transform;
}

.playhead.is-visible { opacity: 1; }

/* A scene names itself over the rail in type alone: its number, its heading
   and its length, never a picture of its board. */
.rail-tip {
  position: absolute;
  bottom: 26px;
  left: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 9px;
  max-width: min(300px, 60vw);
  padding: 7px 11px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  z-index: 3;
  transform: translateX(-50%);
}

.rail-tip-num,
.rail-tip-time { color: color-mix(in srgb, var(--paper) 62%, transparent); }

.rail-tip-text {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 17px;
  font-weight: 450;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.under-frame {
  min-height: 0;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

.under-frame .text-link { padding: 4px 0; }

/* Fullscreen: the frame container is requested so the bar and chip persist. */

.film:fullscreen {
  background: var(--film);
  display: block;
}

.film:fullscreen .frame {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

/* A portrait run: the same spread with a tall, narrow frame column. The
   chapter thumbnail keeps its height rather than its width.

   A 9:16 frame given the whole column would stand twice the height of the
   window, so the player is capped instead: about 70 % of the viewport, or
   the room left under the page header once the controls and the links
   under them are allowed for, whichever is smaller. The page measures that
   room exactly and writes it to --portrait-frame-h; the value here is what
   the first paint uses, and what a page without script keeps. */
:root[data-format="portrait"] {
  --video-aspect: 9 / 16;
  --portrait-frame-h: min(70vh, calc(100dvh - var(--bar-h) - 240px));
  --portrait-frame-w: min(100%, calc(var(--portrait-frame-h) * var(--video-aspect)));
}

/* The frame keeps its shape and centres in the column it no longer fills;
   the controls and the links under them centre on it, so the player reads
   as one object rather than a picture with a bar beside it. They keep a
   width of their own where the frame is narrower than the chapter rail can
   be read at, and follow the controls straight down the column rather than
   sinking to the foot of a card the script has made tall. */
:root[data-format="portrait"] .frame {
  width: var(--portrait-frame-w);
  margin-inline: auto;
}

:root[data-format="portrait"] .controls,
:root[data-format="portrait"] .under-frame {
  width: min(100%, max(var(--portrait-frame-w), 420px));
  margin-inline: auto;
}

:root[data-format="portrait"] .under-frame { margin-top: 0; }

/* Fullscreen has the whole screen to fill, so the cap is off there. */
:root[data-format="portrait"] .film:fullscreen .frame,
:root[data-format="portrait"] .film:fullscreen .controls { width: auto; }

.film:fullscreen .controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 16px;
  background: rgba(20, 18, 16, 0.82);
  color: var(--cream);
  transition: opacity var(--t-chip) var(--ease-in);
}

.film:fullscreen .control,
.film:fullscreen .time { color: var(--cream); }
.film:fullscreen .chapter { background: rgba(239, 232, 218, 0.3); }
.film:fullscreen .chapter.is-ready { background: var(--cream); }
.film:fullscreen .playhead { background: var(--cream); }
.film:fullscreen.is-idle .controls { opacity: 0; }
.film:fullscreen .under-frame { display: none; }

/* Script column */

.script {
  grid-column: 3;
  position: relative;
  min-width: 0;
  min-height: 0;
}

.script-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 24px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.script-scroll:focus-visible { outline-offset: -2px; }

.script-list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 16px;
  position: relative;
}

/* Logical inset: the scroll region takes its direction from the script, so
   the bar sits on the reading side for right-to-left languages too. */
.gutter-bar {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 2px;
  height: 100px;
  background: var(--ink);
  transform-origin: 0 0;
  opacity: 0;
  transition: transform var(--t-chip) var(--ease-in), opacity var(--t-chip) var(--ease-in);
  will-change: transform;
}

.gutter-bar.is-visible { opacity: 1; }

.scene { padding-bottom: 24px; }
.scene:last-child { padding-bottom: 0; }

.scene.is-arriving {
  animation: arrive var(--t-arrive) var(--ease-in) both;
  animation-delay: var(--stagger, 0ms);
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.scene-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 8px;
  width: 100%;
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  transition: color var(--t-fast) var(--ease-in);
}

.scene-heading:hover .scene-title { color: var(--ink-2); }
.scene-number { color: var(--ink-3); }
.scene-title { min-width: 0; overflow-wrap: anywhere; }
.scene-heading .status-word { color: var(--ink-3); }
.scene-heading .status-word.is-failed { color: var(--oxide); }

.beat {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  transition: color var(--t-fast) var(--ease-in);
}

/* Devanagari and the other stacking scripts carry marks above and below
   the line; give them room. Cyrillic and Latin are set at Latin leading. */
.script.is-tall .beat { line-height: 1.7; }
.script.is-playing .beat { color: var(--ink-2); }
.script.is-playing .beat.is-spoken { color: var(--ink); }

.follow {
  position: absolute;
  right: 0;
  bottom: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font: 500 12px/16px var(--mono);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-chip) var(--ease-in), visibility var(--t-chip);
}

.follow.is-shown { opacity: 1; visibility: visible; pointer-events: auto; }

/* Stacked spread: below 800 px of column width the script drops under the
   frame as a 240 px scroll block (docked Inspect at 1280, narrow windows). */

@container column (max-width: 799px) {
  .spread {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  .film { grid-column: 1; }
  .script { grid-column: 1; height: 240px; }
}

/* ---------- Sheets ---------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-sheet) var(--ease-in), visibility var(--t-sheet);
}

.scrim.is-visible { opacity: 1; visibility: visible; }

.sheet {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  box-shadow: var(--sheet-shadow);
  transition: transform var(--t-sheet) var(--ease-in);
  will-change: transform;
}

.sheet.history {
  left: 0;
  width: var(--sheet-history-w);
  transform: translateX(-100%);
}

.sheet.inspect {
  right: 0;
  width: var(--sheet-inspect-w);
  transform: translateX(100%);
}

.sheet.is-open { transform: none; }

.sheet.inspect.is-docked {
  z-index: 6;
  top: 0;
  box-shadow: -1px 0 0 var(--line);
  transition: none;
}

.sheet-header {
  flex: none;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: inset 0 -1px 0 var(--line);
}

.sheet-title {
  margin: 0;
  font: 500 14px/20px var(--sans);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-title.mono { font: 400 12px/16px var(--mono); color: var(--ink-2); }

.sheet-close {
  flex: none;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  font: 400 12px/16px var(--mono);
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease-in), background-color var(--t-fast) var(--ease-in);
}

.sheet-close:hover { color: var(--ink); background: var(--paper-2); }
.sheet-close .back { display: none; }

.sheet-filter {
  flex: none;
  padding: 12px 20px;
  box-shadow: inset 0 -1px 0 var(--line);
}

.filter {
  width: 100%;
  height: 28px;
  font: 400 14px/20px var(--sans);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.filter::placeholder { color: var(--ink-3); opacity: 1; }
.filter::-webkit-search-cancel-button { -webkit-appearance: none; }

.history-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  padding: 0 20px;
}

.history-list .row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  row-gap: 2px;
  padding: 12px 0;
}

.history-list .row-question {
  grid-column: 1 / -1;
  font-size: 15px;
  line-height: 20px;
  white-space: normal;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.history-list .row-meta {
  grid-column: 1;
  min-width: 0;
  margin-left: 0;
  white-space: normal;
}
.history-list .status-word { grid-column: 2; grid-row: 2; }

.history-empty,
.calls-empty {
  margin: 0;
  padding: 16px 20px;
  font: 400 13px/18px var(--sans);
  color: var(--ink-3);
}

.sheet-footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 8px 20px;
  box-shadow: inset 0 1px 0 var(--line);
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 13px/18px var(--sans);
  color: var(--ink-2);
  cursor: pointer;
}

.switch input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--ink);
}

/* Inspect body */

.sheet-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  padding: 16px 20px 32px;
}

.gantt { position: relative; }

.gantt-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.gantt-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 44px 56px 72px;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  height: 24px;
  color: var(--ink-2);
  font: 400 13px/18px var(--sans);
  font-variant-numeric: tabular-nums;
  border-radius: 4px;
  transition: background-color var(--t-fast) var(--ease-in);
}

.gantt-row:hover { background: var(--paper-2); }
.gantt-row[aria-pressed="true"] { background: var(--paper-2); color: var(--ink); }
.gantt-row.is-failed .gantt-word,
.gantt-row.is-failed .gantt-label { color: var(--oxide); }

.gantt-label { padding-left: 6px; }

.gantt-track {
  position: relative;
  height: 24px;
}

.gantt-bar {
  position: absolute;
  top: 9px;
  height: 6px;
  border-radius: 1px;
  background: var(--ink);
  min-width: 2px;
  left: 0;
  width: 0;
}

.gantt-bar.is-running { background: var(--ink-2); }
.gantt-bar.is-failed { background: var(--oxide); }
.gantt-bar.is-interrupted { background: var(--ink-4); }

.gantt-num { color: var(--ink-3); text-align: right; }
.gantt-word { color: var(--ink-3); font: 400 12px/16px var(--mono); text-align: right; padding-right: 6px; }

.narration-summary {
  margin: 16px 0 0;
  font: 400 13px/18px var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.narration-summary:empty { display: none; }

.calls { margin-top: 16px; }

.call-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.call-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px 64px;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  height: 32px;
  padding: 0 6px;
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 var(--line);
  color: var(--ink-2);
  font: 400 13px/18px var(--sans);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--t-fast) var(--ease-in);
}

.call-row:hover { background: var(--paper-2); }
.call-row[aria-pressed="true"] { background: var(--paper-2); color: var(--ink); }
.call-row .call-num { color: var(--ink-3); text-align: right; }
.call-row.is-failed .call-label { color: var(--oxide); }

.call-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail { margin-top: 24px; }

.tabs {
  display: flex;
  gap: 20px;
  box-shadow: inset 0 -1px 0 var(--line);
}

.tab {
  font: 500 13px/18px var(--sans);
  color: var(--ink-3);
  padding: 6px 0 8px;
  position: relative;
  transition: color var(--t-fast) var(--ease-in);
}

.tab:hover { color: var(--ink-2); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ink);
}

.panel { padding-top: 12px; }

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.panel-title {
  font: 500 13px/18px var(--sans);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview {
  margin: 0;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 0;
}

.overview:empty,
.json:empty,
.artifact-list:empty { display: none; }

.overview dt,
.overview dd {
  margin: 0;
  padding: 6px 0;
  box-shadow: inset 0 -1px 0 var(--line);
  font: 400 13px/18px var(--sans);
}

.overview dt { color: var(--ink-3); }
.overview dd { color: var(--ink); text-align: left; overflow-wrap: anywhere; }
.overview dd.is-oxide { color: var(--oxide); }

.json {
  margin: 0;
  padding: 12px;
  border-radius: 4px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.artifact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.artifact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  box-shadow: inset 0 -1px 0 var(--line);
  color: var(--ink);
  text-decoration: none;
  font: 400 13px/18px var(--sans);
  transition: color var(--t-fast) var(--ease-in);
}

.artifact:hover { color: var(--ink-2); }
.artifact .artifact-path { color: var(--ink-3); font: 400 12px/16px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artifact .artifact-label { flex: none; }

/* Shortcuts dialog */

.shortcuts {
  padding: 24px;
  border: 0;
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--sheet-shadow);
  width: min(360px, calc(100vw - 32px));
}

.shortcuts::backdrop { background: var(--scrim); }

.key-list {
  margin: 16px 0 0;
  display: grid;
  row-gap: 8px;
}

.key-list div {
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 16px;
  align-items: baseline;
}

.key-list dt { font: 400 12px/16px var(--mono); color: var(--ink-2); }
.key-list dd { margin: 0; font: 400 13px/18px var(--sans); color: var(--ink); }
.key-list kbd { padding: 1px 4px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2); }
.shortcuts form { margin-top: 20px; }

/* ---------- Responsive ---------- */

@media (max-width: 1279px) {
  .page.is-docked .bar,
  .page.is-docked .main { padding-right: var(--gutter); }
}

@media (max-width: 760px) {
  :root { --bar-h: 48px; }

  .composer { padding-top: calc(30vh - var(--bar-h)); }

  .spread {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .film {
    grid-column: 1;
    position: sticky;
    top: var(--bar-h);
    z-index: 3;
    background: var(--paper);
    padding-bottom: 4px;
  }

  /* On a phone the column sticks under the bar, so its room is measured
     from there; the frame itself is capped by the rule above. */
  :root[data-format="portrait"] {
    --portrait-frame-h: min(70vh, calc(100dvh - var(--bar-h) - 150px));
  }

  .script {
    grid-column: 1;
    height: auto;
    max-width: 620px;
  }

  .script-scroll {
    position: static;
    padding: 0;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .beat { font-size: 18px; line-height: 28px; }
  .follow { position: fixed; bottom: 16px; right: 16px; }

  .running-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .running { flex-basis: 100%; }
  .elapsed { text-align: left; }

  .rail { height: 44px; }
  .rail-track { top: 21px; }
  .playhead { top: 16px; }

  .control { width: 44px; height: 44px; }
  .controls { height: 44px; }
  .segmented span { padding: 13px 2px; }
  .bar-link,
  .text-link,
  .under-frame .text-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0;
  }

  .panel-head { align-items: center; }
  .row { min-height: 44px; }
  .run { padding-bottom: 32px; }

  .recently .row-list { grid-template-columns: minmax(0, 1fr) auto; }

  .recently .row {
    grid-template-rows: auto auto;
    row-gap: 2px;
    padding: 12px 0;
  }

  .recently .row-question {
    grid-column: 1 / -1;
    font-size: 15px;
    line-height: 20px;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .recently .row-meta {
    grid-column: 1;
    min-width: 0;
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .recently .status-word { grid-column: 2; grid-row: 2; }

  .sheet.history,
  .sheet.inspect { width: 100vw; }
  .sheet-close .esc { display: none; }
  .sheet-close .back { display: inline; }
  .sheet-close { box-shadow: none; font: 500 14px/20px var(--sans); color: var(--ink-2); }

  .gantt-row { grid-template-columns: 56px minmax(0, 1fr) 40px 56px 64px; column-gap: 8px; }
}

@media (max-width: 480px) {
  :root { --gutter: 16px; }

  .field { font-size: 22px; line-height: 30px; }
  .field-row { flex-wrap: wrap; }
  .explain { width: 100%; justify-content: center; margin-top: 12px; }
  .explain kbd { display: none; }
  .composer-row { flex-wrap: wrap; }
  .composer-right { width: 100%; justify-content: space-between; }

  .question.q-40 { font-size: 26px; line-height: 32px; }
  .question.q-28 { font-size: 21px; line-height: 28px; }
  .question.q-19 { font-size: 17px; line-height: 24px; }
  .beat { font-size: 16px; line-height: 24px; }

  .control.mute,
  .control.captions { display: none; }
  .control.play { margin-left: -14px; }
  .time { padding-right: 4px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 120ms !important;
    animation-duration: 120ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }

  .spread.is-arriving { transform: none; }
  .question.is-lifting { transition: none; }
  .sheet { transition: opacity 120ms var(--ease-in) !important; transform: none; opacity: 0; }
  .sheet.is-open { opacity: 1; }
  .scene.is-arriving { animation-name: arrive-still; }

  @keyframes arrive-still {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* A frozen arc reads as broken, not calm, so the spinner is the one
     exception to the blanket cap above: a slow, continuous turn instead.
     The full shorthand is required, not just duration/iteration-count: a
     later `animation: none !important` rule (below, on * and *::before)
     would otherwise win on animation-name alone, since this selector never
     contested that longhand and !important always beats a plain value
     regardless of specificity. Naming a class over the universal selector
     here outranks that rule once both sides carry !important. */
  .buffering-ring::before {
    animation: buffering-spin 1.6s linear infinite !important;
  }
}

.sign-in-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; margin: auto; padding: 0; overflow: auto; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 60px #0002; }
.sign-in-dialog::backdrop { background: #0006; }
.sign-in-dialog[open] { animation: create-dialog-enter 180ms var(--create-ease) both; }
.operator-auth { display: grid; padding: 28px; }
.operator-auth h2 { margin: 0; font: 600 22px/1.25 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.sign-in-lede { margin: 8px 0 0; font: 15px/1.5 var(--sans); color: var(--ink-2); }
.sign-in-label { margin-top: 22px; font: 500 13px/1.5 var(--sans); color: var(--ink-2); }
.sign-in-input { margin-top: 6px; width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); letter-spacing: .04em; }
.sign-in-input:focus { outline: none; border-color: var(--ink-4); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 14%, transparent); }
.sign-in-input[aria-invalid="true"] { border-color: var(--oxide); }
.sign-in-error { margin: 6px 0 0; font: 13px/20px var(--sans); color: var(--oxide); }
.sign-in-error:empty { display: none; }
.sign-in-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.sign-in-cancel, .sign-in-submit { min-height: 44px; padding: 0 18px; border: 0; border-radius: 8px; font: 600 15px/1 var(--sans); cursor: pointer; }
.sign-in-cancel { background: transparent; color: var(--ink-2); }
.sign-in-cancel:hover { background: var(--paper-2); color: var(--ink); }
.sign-in-submit { background: var(--ink); color: var(--paper); }
.sign-in-submit:hover { background: var(--ink); opacity: 0.9; }
.sign-in-cancel:disabled, .sign-in-submit:disabled { opacity: .6; cursor: progress; }
.sign-in-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font: 13px/1.5 var(--sans); color: var(--ink-3); }
.sign-in-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.sign-in-dialog :is(button, a):focus-visible { outline: 2px solid var(--sage-strong); outline-offset: 2px; }
@media (max-width: 560px) {
  .sign-in-dialog { margin: max(16px, 10dvh) auto auto; }
  .operator-auth { padding: 22px 20px 20px; }
  .sign-in-actions button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sign-in-dialog[open] { animation: none; }
}
.draining-banner { padding: 1rem; border: 1px solid var(--line-2); background: var(--paper-2); font: 14px/1.5 var(--sans); }
.degraded-chip { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; padding: 0.4rem 0.6rem; background: var(--paper); color: var(--ink); font-size: 0.8rem; }

/* September reference design: warm editorial typography, quiet framed surfaces. */
:root { --bar-h: 78px; --gutter: clamp(22px, 3.9vw, 68px); --col-max: 1600px; --sheet-history-w: 600px; --scrim: rgba(0,0,0,.66); }
html[data-theme="dark"] { --paper: #0c0c0b; --paper-2: #171614; --ink: #eee9df; --ink-2: #b5b0a6; --ink-3: #928d83; --ink-4: #706b62; --line: #292723; --line-2: #4c453a; --film: #10100f; --frame-edge: #36332e; }
body { background: var(--paper); }
.bar { border-bottom: 1px solid var(--line); }
.bar-inner { max-width: none; width: 100%; }
.wordmark { font-size: 30px; line-height: 36px; }
.bar-links { align-items: center; gap: 38px; }
.bar-link { font-size: 16px; }
.composer { max-width: 1100px; padding: 46px 0 40px; }
.home-intro { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.home-intro h1 { margin: 0; font: 400 clamp(38px,3.4vw,52px)/1.04 var(--serif); letter-spacing: -.025em; }
.home-intro p { margin: 12px 0 0; font: 400 16px/1.5 var(--sans); color: var(--ink-2); }
.composer-form { width: 100%; }
.composer-box { border: 1px solid var(--line-2); border-radius: 11px; background: color-mix(in srgb, var(--paper-2) 45%, var(--paper)); box-shadow: inset 0 1px 0 #ffffff06; }
/* The box: the question line with the mic at its end, so speaking is one
   reach from typing; upload and Explain sit on the line beneath. */
.field-row { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 28px; gap: 14px 22px; }
.field { grid-column: 1; grid-row: 1; font-size: 36px; line-height: 44px; box-shadow: none; min-height: 48px; padding: 0; margin-bottom: 8px; }
.field:focus { box-shadow: none; }
.dictate { grid-column: 2; grid-row: 1; align-self: start; margin: 2px 0 0; width: 48px; height: 48px; border-radius: 50%; color: var(--ink); background: color-mix(in srgb, var(--ink-2) 10%, transparent); }
.dictate:hover { background: color-mix(in srgb, var(--ink-2) 18%, transparent); }
.dictate.is-recording { background: color-mix(in srgb, var(--oxide) 16%, transparent); }
.dictate-dot { top: 8px; right: 8px; }
.upload { grid-column: 1; grid-row: 2; justify-self: start; display: inline-flex; align-items: center; cursor: pointer; color: var(--ink-2); font-size: 13px; height: 36px; }
.explain { grid-column: 2; grid-row: 2; justify-self: end; height: 50px; font-size: 17px; padding: 0 20px; border-radius: 6px; margin: 0; }
.home-lede { max-width: 640px; text-wrap: pretty; }
.new-question { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-left: auto; }
.new-question svg { flex: none; }
.composer-row { margin: 0; border-top: 1px solid var(--line); padding: 15px 28px; justify-content: start; }
.composer-left { display: none; }
.composer-right { gap: 12px; flex-wrap: wrap; }
.setting-label { font: 400 12px/20px var(--sans); color: var(--ink-2); margin-left: 22px; }
.setting-label:first-child { margin-left: 0; }
.segmented { border: 1px solid var(--line); border-radius: 6px; }
.segmented label + label::before { display: none; }
.segmented span { padding: 6px 15px; font-size: 12px; min-width: 58px; text-align: center; }
.segmented input:checked + span { border-radius: 5px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 0 10px #bda57c0c; }
.engine { margin: 18px 28px 0; font-size: 12px; }
.recently { max-width: none; margin-top: 52px; position: relative; }
.recently-label { font: 400 21px/26px var(--serif); color: var(--ink-2); margin-bottom: 16px; }
.all-runs { position: absolute; right: 12px; top: 0; margin: 0; }
.recently .row-list { display: block; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.recently .row-list > li { display: block; }
.recently .row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto 74px; gap: 16px; padding: 12px 22px; min-height: 55px; }
.row::before { content: '▷'; width: 29px; height: 29px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; color: var(--ink); font: 18px var(--sans); }
.row-question { text-align: left; font-size: 12px; font-weight: 450; }
.row-meta { font: 400 12px/20px var(--sans); color: var(--ink-3); }
.row .status-word { text-align: right; margin-left: 0; }
.row-list > li:last-child .row { box-shadow: none; }
.studio-footer { border-top: 1px solid var(--line); display: flex; align-items: center; gap: 30px; padding: 22px var(--gutter); font: 400 11px/20px var(--sans); color: var(--ink-2); }
.footer-themes { display: flex; gap: 24px; }
.footer-themes button { font-size: 24px; }
.title-block { padding-top: 44px; }
.question.q-40, .question.q-28 { font: 400 clamp(32px,3.3vw,52px)/1.14 var(--serif); text-wrap: initial; letter-spacing: -.015em; }
.running-row { margin-top: 20px; padding-bottom: 8px; box-shadow: none; align-items: center; }
.running { font-size: 16px; font-weight: 400; }
.elapsed { display: none; }
.spread { display: grid; grid-template-columns: minmax(290px,28%) minmax(0,1fr); gap: 22px; margin-top: 20px; }
.film, .script { border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb,var(--paper-2) 45%,var(--paper)); box-shadow: inset 0 1px 2px #ffffff06; }
.film { grid-column: 2; grid-row: 1; padding: 16px; }
.frame { border-radius: 7px; }
.controls { padding: 14px 0; }
.under-frame { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 24px; min-height: 74px; }
#download-final { border: 1px solid var(--line); border-radius: 6px; padding: 11px 16px; font-size: 14px; color: var(--ink); transition: border-color 140ms ease, background-color 140ms ease; }
#download-final::before { content: '↓'; margin-right: 10px; color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { #download-final:hover { border-color: var(--line-2); background: color-mix(in srgb, var(--ink-2) 6%, transparent); } }
.script { grid-column: 1; grid-row: 1; min-height: 420px; }
.script-header { display: flex; justify-content: space-between; padding: 23px 24px 16px; font: 400 16px/24px var(--sans); color: var(--ink-2); }
#scene-count { font-size: 12px; color: var(--ink-3); }
.script-scroll { inset: 64px 8px 14px 24px; padding: 0 14px 0 0; mask-image: none; -webkit-mask-image: none; }
.script-list { padding: 0; }
.scene, .scene:last-child { padding: 12px 0 15px; border-top: 1px solid var(--line); }
.scene-heading { position: relative; grid-template-columns: 36px minmax(0,1fr) auto; align-items: start; font: 400 13px/20px var(--sans); gap: 12px; text-align: left; }
.scene-number { display: grid; place-items: center; width: 36px; height: 35px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink); font: 500 14px var(--sans); }
.scene-heading .status-word { font: 450 10px/17px var(--sans); letter-spacing: .015em; white-space: nowrap; border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; color: var(--ink-3); transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease; }
.scene-heading .status-word.is-working { color: var(--ink); border-color: var(--line-2); background: color-mix(in srgb, var(--ink-2) 8%, transparent); }
.scene-duration { grid-column: 2; font: 400 11px/16px var(--mono); color: var(--ink-3); margin-top: -10px; }
.beat { margin: 4px 0 0 48px; font: 400 12px/20px var(--sans); color: var(--ink-3); }
.sheet.history { top: 28px; bottom: 24px; left: 28px; width: min(600px,calc(100vw - 56px)); border: 1px solid var(--line); border-radius: 12px; transform: translateX(calc(-100% - 32px)); background: var(--paper); }
.sheet.history.is-open { transform: none; }
.history .sheet-header { padding: 24px; height: 78px; box-shadow: none; }
.history .sheet-title { font: 400 30px/36px var(--serif); }
.history .sheet-close { height: 28px; font: 400 13px var(--sans); }
.history .sheet-filter { padding: 0 24px 20px; box-shadow: none; }
.history .filter { height: 46px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--paper-2); }
.history-list { padding: 0 14px; }
.history-list .row { grid-template-columns: 34px minmax(0,1fr) 68px; grid-template-rows: auto auto; gap: 4px 16px; padding: 16px 14px; }
.history-list .row::before { grid-column: 1; grid-row: 1/3; align-self: start; width: 32px; height: 32px; }
.history-list .row-question { grid-column: 2; grid-row: 1; font: 400 20px/23px var(--serif); }
.history-list .row-meta { grid-column: 2; grid-row: 2; font-size: 13px; }
.history-list .status-word { grid-column: 3; grid-row: 1/3; align-self: center; }
.history-list .row.is-current, .history-list .row:hover { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); }
.history .sheet-footer { min-height: 60px; margin: 0 14px; padding: 8px 10px; }
@container column (max-width: 799px) {
  .spread { grid-template-columns: minmax(0,1fr); }
  .film { grid-column: 1; grid-row: 1; }
  .script { grid-column: 1; grid-row: 2; height: 380px; min-height: 0; }
}
@media (max-width: 1050px) {
  .composer { padding-top: 36px; }
  .composer-right { gap: 8px; }
  .setting-label { margin-left: 8px; }
  .segmented span { padding: 6px 10px; min-width: 0; }
  .recently .row { grid-template-columns: 30px minmax(0,1fr) 70px; }
  .recently .row-meta { display: none; }
}
@media (max-width: 600px) {
  :root { --bar-h: 64px; --gutter: 20px; }
  .bar-links { gap: 20px; } .bar-link { font-size: 13px; }
  .home-intro { display: block; margin-bottom: 24px; }
  .home-intro h1 { font-size: 38px; }
  .home-intro p { font-size: 14px; } .desktop-break { display: none; }
  .field-row { padding: 20px 16px; gap: 12px; }
  .field { font-size: 28px; line-height: 34px; }
  .upload { font-size: 11px; padding: 0 8px; } .explain { height: 42px; font-size: 14px; padding: 0 12px; }
  .dictate { width: 28px; }
  .composer-row { padding: 16px; }
  .composer-right { display: grid; grid-template-columns: auto 1fr; width: 100%; gap: 12px; }
  .setting-label { margin: 0; } .segmented { justify-self: start; } .segmented span { padding: 6px 14px; }
  .engine { margin-left: 2px; font-size: 10px; }
  .recently { margin-top: 34px; } .recently .row { padding: 12px; gap: 10px; grid-template-columns: 28px minmax(0,1fr) 54px; }
  .row-question { white-space: normal; } .row .status-word { font-size: 10px; }
  .studio-footer { flex-wrap: wrap; gap: 16px; padding: 18px 20px; } .footer-themes { gap: 16px; }
  .title-block { padding-top: 28px; } .running { font-size: 12px; line-height: 20px; } .running-row { gap: 12px; }
  .film { padding: 10px; } .under-frame { min-height: 52px; padding-top: 10px; }
  .sheet.history { inset: 10px; width: auto; } .history .sheet-header { padding: 18px; }
  .history .sheet-filter { padding: 0 18px 14px; } .history-list { padding: 0 8px; }
  .history-list .row { grid-template-columns: 28px minmax(0,1fr) 56px; gap: 5px 10px; padding: 14px 8px; }
  .history-list .row-question { font-size: 18px; line-height: 22px; } .history-list .row-meta { font-size: 11px; }
  .history-list .row::before { width: 28px; height: 28px; }
  .history .sheet-footer { gap: 10px; } .history .segmented span { padding: 6px 10px; }
}
.profile { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--paper-2); color: var(--ink-2); font: 400 16px var(--sans); margin-left: 8px; }
.bar-link:disabled { opacity: .55; cursor: default; }
.row-list > li { position: relative; }
.recently .row { padding-right: 54px; grid-template-columns: 30px minmax(0,1fr) 330px 70px; }
.recently .row-meta { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 24px; margin: 0; text-align: left; }
.row-menu { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 1; }
.row-menu[open] { z-index: 3; }
.row-menu summary { display: grid; place-items: center; width: 24px; height: 32px; cursor: pointer; font: 21px var(--sans); color: var(--ink-2); list-style: none; border-radius: 4px; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu summary:hover { background: var(--paper-2); }
.row-menu-actions { position: absolute; right: 0; top: 32px; min-width: 160px; padding: 6px; display: grid; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 7px; box-shadow: 0 8px 24px #0006; }
.row-menu-actions button { text-align: left; padding: 9px; font: 12px var(--sans); }
.row-menu-actions button:hover { background: var(--paper); }
.recently .row-list { overflow: visible; }
.history-list .row { padding-right: 44px; }
.script-empty { margin: 0; padding: 4px 0 0; max-width: 30ch; font: 400 13px/21px var(--sans); color: var(--ink-3); text-wrap: pretty; }
.script-footer { position: absolute; bottom: 16px; left: 16px; right: 16px; display: flex; gap: 8px; }
.script-footer .text-button { height: 38px; }
.script-footer .text-button:first-child { flex: 1; }
.script-scroll { bottom: 66px; }
.scene-heading { grid-template-columns: 36px minmax(0,1fr) auto auto; column-gap: 9px; }
.scene-duration { grid-column: 3; grid-row: 1; margin-top: 2px; }
.scene-heading .status-word { grid-column: 4; grid-row: 1; }
.beat { margin-top: -10px; margin-right: 4px; }
.beat + .beat { margin-top: 4px; }
.scene { min-height: 84px; }
@media (max-width: 1200px) { .recently .row { grid-template-columns: 30px minmax(0,1fr) 210px 64px; } .recently .row-meta { gap: 10px; } .scene-heading { grid-template-columns: 32px minmax(0,1fr) auto; } .scene-duration { display: none; } .scene-heading .status-word { grid-column: 3; } }
@media (max-width: 1050px) { .recently .row { grid-template-columns: 30px minmax(0,1fr) 64px; } .recently .row-meta { display: none; } }
/* A phone has no room for three labelled links: the icons carry them, and
   the words stay in the page for anyone reading it aloud. */
@media (max-width: 600px) {
  .bar-link { gap: 0; justify-content: center; min-width: 36px; min-height: 36px; }
  .bar-link > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bar-link svg { width: 19px; height: 19px; }
}
@media (max-width: 600px) { .bar-links { gap: 14px; } .profile { width: 30px; height: 30px; margin-left: 0; font-size: 12px; } .recently .row { padding-right: 36px; grid-template-columns: 28px minmax(0,1fr) 48px; } .row-menu { right: 4px; } .history-list .row { padding-right: 30px; } .scene-heading { grid-template-columns: 36px minmax(0,1fr) auto auto; } .scene-duration { display: block; } .scene-heading .status-word { grid-column: 4; } }
.scene-heading { padding-left: 48px; grid-template-columns: minmax(0,1fr) auto auto; min-height: 22px; }
.scene-number { position: absolute; left: 0; top: 0; }
.scene-duration { grid-column: 2; }
.scene-heading .status-word { grid-column: 3; }
.beat { margin-top: 4px; }
@media (min-width: 601px) and (max-width: 1200px) { .scene-heading { grid-template-columns: minmax(0,1fr) auto; } .scene-heading .status-word { grid-column: 2; } }
.profile { display: grid; place-items: center; }
.recently .row-question { grid-column: 2; grid-row: 1; }
.recently .row-meta { grid-column: 3; grid-row: 1; }
.recently .status-word { grid-column: 4; grid-row: 1; }
@media (max-width: 1050px) { .recently .status-word { grid-column: 3; } }
@media (max-width: 600px) {
  .recently .row { grid-template-rows: auto; }
  .recently .row-question { grid-column: 2; grid-row: 1; font-size: 12px; line-height: 18px; }
  .recently .status-word { grid-column: 3; grid-row: 1; }
  .control.mute, .control.captions { display: inline-flex; }
  .controls { gap: 4px; } .control { width: 30px; min-width: 30px; } .control.play { margin-left: 0; }
}
.setting-label, .upload { display: inline-flex; align-items: center; gap: 10px; }
.setting-label svg { width: 22px; height: 22px; }
.upload svg { width: 16px; height: 16px; }
.script-scroll { position: absolute; overflow-y: auto; }
.script { max-width: none; }
.film { position: relative; top: auto; z-index: auto; }
.follow { position: absolute; bottom: 60px; right: 20px; }

/* Quiet motion: compositor-friendly entrances, tactile controls, no idle loop. */
:root {
  --t-sheet: 320ms;
  --t-spread: 360ms;
  --t-fade: 240ms;
  --polish-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-press: 90ms;
  --motion-fast: 120ms;
  --motion-menu: 140ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
}
@keyframes surface-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes menu-enter {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.composer:not([hidden]) .home-intro,
.composer:not([hidden]) .composer-form { animation: none; }
.composer:not([hidden]) .recently { animation: surface-enter 160ms var(--motion-ease) both; }
.sheet { transition-timing-function: var(--polish-ease); }
.composer-box { position: relative; isolation: isolate; }
.composer-box::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--ink-2) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-2) 7%, transparent);
  opacity: 0;
  transition: opacity 180ms ease;
}
.composer-box:focus-within::after { opacity: 1; }
.explain, .text-button, .profile, .control, .sheet-close {
  transition: transform 160ms var(--polish-ease), color 140ms ease, background-color 140ms ease;
}
:is(.page, .example-dialog) :is(button, summary, a.result-action, a.download) {
  -webkit-tap-highlight-color: transparent;
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease,
    opacity var(--motion-fast) ease, transform var(--motion-press) var(--motion-ease),
    scale var(--motion-press) var(--motion-ease);
}
:is(.page, .example-dialog) :where(button, summary, a.result-action, a.download):active:not(:disabled):not([aria-disabled="true"]) { scale: .98; }
:is(.page, .example-dialog) :where(button, summary, a.result-action, a.download):focus-visible { outline: 2px solid var(--sage-strong, var(--ink)); outline-offset: 3px; }
:is(.page, .example-dialog) :where(button:disabled, [aria-disabled="true"]) { scale: 1; }
@keyframes control-menu-enter {
  from { opacity: 0; translate: 0 var(--menu-enter-y, -3px); scale: .985; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.page, .example-dialog) :where(button, summary, a.result-action, a.download, .choice-panel, .choice-panel label, .choice-panel label::after, .choice-picker summary svg) {
    transition: none !important;
    animation: none !important;
    scale: 1 !important;
    translate: none !important;
  }
}
.explain kbd, .upload svg, #redraw svg {
  display: inline-block;
  transition: transform 180ms var(--polish-ease);
}
.segmented span { transition: color 140ms ease, background-color 140ms ease; }
.segmented label:active span { transform: scale(.97); }
.row::before { transition: transform 180ms var(--polish-ease), border-color 140ms ease; }
.row:active::before { transform: scale(.92); }
.row-menu[open] .row-menu-actions {
  transform-origin: top right;
  animation: menu-enter 180ms var(--polish-ease) both;
}
.scene { position: relative; isolation: isolate; }
.scene::before {
  content: "";
  position: absolute;
  inset: 0 -8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink-2) 7%, transparent);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.scene.is-current::before { opacity: 1; }
.scene.is-current .scene-number { border-color: var(--ink-3); }
/* The one moving thing on the waiting frame: a nib that draws a hairline
   across and lifts, once every few seconds. It says "still going", never how
   long is left. Standing still - reduced motion - it is simply the line. */
.frame-progress {
  position: relative;
  width: min(180px, 46cqi);
  height: 7px;
  margin-top: 6px;
  color: color-mix(in srgb, var(--cream) 46%, transparent);
}
.frame-progress span {
  position: absolute;
  inset: 3px 0 auto 0;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  animation: ink-draw 3400ms var(--polish-ease) infinite;
}
.frame-progress::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cream);
  opacity: 0;
  animation: ink-nib 3400ms var(--polish-ease) infinite;
}
@keyframes ink-draw {
  0% { transform: scaleX(0); }
  46% { transform: scaleX(1); }
  76% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes ink-nib {
  0% { left: 0; opacity: 0; }
  8% { opacity: 1; }
  46% { left: calc(100% - 5px); opacity: 1; }
  62% { left: calc(100% - 5px); opacity: 0; }
  100% { left: calc(100% - 5px); opacity: 0; }
}
.controls.is-inert .control.mute { pointer-events: auto; color: var(--ink-2); }
.control, .row-menu summary { border-radius: 5px; }
.text-button.is-copied { color: #a4ba99; }
@media (hover: hover) and (pointer: fine) {
  .explain:hover:not(:disabled) { transform: translateY(-1px); }
  .explain:hover kbd { transform: translateX(2px); }
  .upload:hover svg { transform: translateY(-1px); }
  #redraw:hover:not(:disabled) svg { transform: rotate(-40deg); }
  .row:hover::before { transform: scale(1.06); border-color: var(--ink-3); }
  .control:hover { background: color-mix(in srgb, var(--ink-2) 8%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.rail:focus-visible { outline: 1px solid var(--ink-3); outline-offset: 2px; border-radius: 4px; }

/* Revisions keep the player and script in the existing editorial workspace. */
.scene-editor h2 { margin: 0; font: 500 26px/1.15 var(--serif); }
.revision-note { margin: 8px 0 18px; color: var(--ink-2); font: 400 12px/1.6 var(--sans); }
#scene-editor-fields label { display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); font: 500 12px/1.4 var(--sans); }
#scene-editor-fields textarea, #scene-editor-fields select {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: 6px; padding: 12px;
  color: var(--ink); background: var(--paper); font: 400 14px/1.55 var(--sans);
}
#scene-editor-fields textarea { resize: vertical; min-height: 76px; }
.revision-submit { border: 1px solid var(--oxide); border-radius: 6px; padding: 13px 18px; color: var(--paper); background: var(--oxide); font: 500 13px/1.5 var(--sans); cursor: pointer; }
.revision-submit:disabled { opacity: .5; cursor: default; }
.scene, .scene:last-child { min-height: 0; padding: 14px 0; }
.scene-heading { min-height: 35px; align-items: center; }
.scene-heading .status-word.is-ready { color: #31845c; border: 0; background: color-mix(in srgb, #31845c 12%, transparent); border-radius: 50%; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; font: 700 14px/1 var(--sans); }
.scene-heading .status-word.is-failed { color: var(--oxide); border-color: color-mix(in srgb, var(--oxide) 35%, transparent); }
.scene-failure { display: flex; align-items: center; gap: 12px; margin: 5px 0 0 48px; color: var(--oxide); font: 400 11px/17px var(--sans); }
.scene-failure-copy { flex: 1; }
.scene-retry { border: 1px solid color-mix(in srgb, var(--oxide) 40%, transparent); padding: 6px 10px; border-radius: 5px; color: var(--oxide); font-weight: 600; }
.scene-card :focus-visible, .scene-chips :focus-visible, .scene-add:focus-visible, .scene-retry:focus-visible { outline: 2px solid var(--oxide); outline-offset: 3px; }
.scene-editor { width: min(620px, calc(100vw - 40px)); max-height: calc(100dvh - 64px); box-sizing: border-box; padding: 28px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink); background: var(--paper); box-shadow: var(--sheet-shadow); }
.scene-editor::backdrop { background: var(--scrim); backdrop-filter: blur(4px); }
.scene-editor header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.scene-editor header h2 { overflow-wrap: anywhere; }
#scene-editor-fields { display: grid; gap: 20px; }
.scene-editor footer { display: flex; justify-content: flex-end; margin-top: 24px; }
.scene-editor :focus-visible { outline: 2px solid var(--oxide); outline-offset: 3px; }
#revision-source { display: inline-block; margin-top: 16px; }
@media (max-width: 480px) {
  .scene-editor { padding: 20px; }
}