/* episode-script.css — 25 Oct 2026. The Script page of every project except Paradise Found (src/EpisodeScript.jsx).
   Its own escr-* classes only (never ep-*, which Edit Plan's stylesheet also uses). Colours are tokens; the recap
   cards have fixed line counts so nothing below them moves.
   26 Oct 2026 — Hugo (a reels project, Greek skin): "if I go into script, same, I can't read anything because it's so
   transparent, every card ... Make sure the script is easy [to read]. It's very messy." The page now reads like a
   two-column shooting script, painted from the separation ladder (tokens.css / skin-glass.css): every reel is a
   PANEL (--sep-panel-fill), its hook / twist / cliffhanger and its shots are CARDS on it (--sep-card-fill). A shot is
   one row: the shot and its place | what we SEE | what is SAID | ON SCREEN, each column at a reading width; the
   column names sit once at the top of the reel. In a reel under 1500 px ON SCREEN goes under SEE, under 1000 px SAY
   too, and every cell then carries its own name (the phone: one column). */
.escr-page .escr-scroll { display: flex; flex-direction: column; gap: 18px; padding-bottom: 40px; }

/* ── the recap: the hero, the logline, one card per reel ── */
.escr-recap { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px; border-radius: var(--r-md); }
.escr-recap-meta { font-size: var(--fs-11); font-weight: var(--fw-semi); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--ink-muted); }
.escr-logline { margin-top: 8px; max-width: 1040px; font-size: var(--fs-17); line-height: 1.5; color: var(--ink); }

.escr-reelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.escr-reelcard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 12px 14px 13px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--sep-card-fill);
  border: 0;
  border-left: 3px solid var(--leaf);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.escr-reelcard:hover { background: var(--sep-row-fill-hover); }
.escr-reelcard-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; height: 22px; white-space: nowrap; overflow: hidden; }
.escr-reelcard-num { flex-shrink: 0; font-family: var(--font-display); font-size: var(--fs-18); letter-spacing: var(--track-005); }
.escr-reelcard-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-14); font-weight: var(--fw-semi); }
.escr-reelcard-secs { flex-shrink: 0; margin-left: auto; font-size: var(--fs-11-5); color: var(--ink-muted); }
.escr-reelcard-line {
  font-size: var(--fs-12-5);
  line-height: 1.45;
  height: calc(2 * 1.45em);
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.escr-reelcard-line b { margin-right: 5px; font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-08); text-transform: uppercase; color: var(--ink-muted); }

/* ── a reel: a panel with its head, its beats and its shots ── */
.escr-reel {
  container: escr-reel / inline-size;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px 20px;
  background: var(--sep-panel-fill);
  border-radius: var(--r-md);
  scroll-margin-top: 12px;
}
.escr-reel-head { display: flex; align-items: baseline; gap: 14px; min-width: 0; padding: 0 2px 4px; }
.escr-reel-num { flex-shrink: 0; font-family: var(--font-display); font-size: var(--fs-26); line-height: 1; letter-spacing: var(--track-005); color: var(--ink); }
.escr-reel-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-18); font-weight: var(--fw-semi); color: var(--ink); }
.escr-reel-secs { flex-shrink: 0; margin-left: auto; font-size: var(--fs-12-5); color: var(--ink-muted); white-space: nowrap; }

/* hook / twist / cliffhanger / leaves open: one card each, side by side */
.escr-craft { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.escr-beat { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 10px 14px 12px; background: var(--sep-card-fill); border-left: 3px solid var(--leaf); border-radius: var(--r-sm); }
.escr-beat b { font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--ink-muted); }
.escr-beat span { font-size: var(--fs-13-5); line-height: 1.5; color: var(--ink); }
/* 26 Oct 2026 — Hugo (a reels project): the beats colour-coded, one clear colour each (tokens.css --beat-*): the chip's
   edge in the colour, its label on a tint of it, the label's text in --ink so it reads on any card. */
.escr-bk--hook { --escr-beat-c: var(--beat-hook); }
.escr-bk--twist { --escr-beat-c: var(--beat-twist); }
.escr-bk--cliff { --escr-beat-c: var(--beat-cliff); }
.escr-bk--open { --escr-beat-c: var(--beat-open); }
.escr-bk b {
  align-self: flex-start;
  padding: 1px 7px;
  color: var(--ink);
  background: color-mix(in srgb, var(--escr-beat-c) 26%, transparent);
  border-radius: var(--r-xs);
}
.escr-beat.escr-bk { border-left-color: var(--escr-beat-c); }

/* the shot rows: one grid for the column names and every shot, so the columns line up down the reel. Each text
   column stops at a reading width (about 90 characters for SEE, 70 for SAY). */
.escr-cols,
.escr-shot {
  display: grid;
  grid-template-columns: 170px minmax(0, 700px) minmax(0, 560px) minmax(0, 320px);
  column-gap: 28px;
  justify-content: start;
}
.escr-cols { margin-top: 6px; padding: 0 16px; }
.escr-cols span { font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--ink-muted); }
.escr-shot { align-items: start; padding: 14px 16px 15px; background: var(--sep-card-fill); border-radius: var(--r-sm); }
.escr-shot-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.escr-shot-n { font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--ink-muted); }
.escr-shot-code { align-self: flex-start; padding: 0; font: inherit; font-family: var(--font-display); font-size: var(--fs-20); line-height: 1.1; letter-spacing: var(--track-005); color: var(--ink); background: none; border: 0; cursor: pointer; }
.escr-shot-code:hover { text-decoration: underline; }
.escr-shot-type,
.escr-shot-place { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-12); line-height: 1.4; color: var(--ink-muted); }
.escr-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.escr-k { display: none; font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--ink-muted); }
.escr-see { font-size: var(--fs-14); line-height: 1.6; color: var(--ink); white-space: pre-line; }
.escr-say { display: flex; flex-direction: column; gap: 8px; }
.escr-line { display: flex; flex-direction: column; gap: 2px; }
.escr-who { font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--ink-muted); }
.escr-note { font-weight: var(--fw-med); letter-spacing: var(--track-04); text-transform: none; }
.escr-text { font-size: var(--fs-15); line-height: 1.55; color: var(--ink); }
.escr-screen { padding-left: 10px; border-left: 2px solid var(--leaf); font-size: var(--fs-13-5); line-height: 1.5; font-style: italic; color: var(--ink); }
.escr-none { font-size: var(--fs-13); color: var(--ink-muted); }

/* a medium reel: ON SCREEN under SEE, the names in the cells */
@container escr-reel (max-width: 1500px) {
  .escr-cols { display: none; }
  .escr-shot { grid-template-columns: 160px minmax(0, 1.2fr) minmax(0, 1fr); row-gap: 10px; }
  .escr-cell--screen { grid-column: 2; grid-row: 2; }
  .escr-cell--say { grid-column: 3; grid-row: 1 / span 2; }
  .escr-cell--screen.is-empty { display: none; }
  .escr-k { display: block; }
}
/* a narrow reel: SAY and ON SCREEN under SEE */
@container escr-reel (max-width: 1000px) {
  .escr-shot { grid-template-columns: 140px minmax(0, 1fr); row-gap: 12px; }
  .escr-cell--say { grid-column: 2; grid-row: auto; }
  .escr-cell--screen { grid-column: 2; grid-row: auto; }
}

.escr-empty { padding: 18px 20px; border-radius: var(--r-md); font-size: var(--fs-13); color: var(--ink-muted); }
.escr-written { padding: 24px 28px; border-radius: var(--r-md); }
.escr-filetabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.escr-filetab { padding: 5px 10px; font-size: var(--fs-12); color: var(--ink); background: var(--sep-card-fill); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: var(--r-xs); cursor: pointer; }
.escr-filetab.is-active { background: color-mix(in srgb, var(--leaf) 18%, var(--sep-card-fill)); border-color: var(--leaf); }
.escr-md { max-width: 860px; font-size: var(--fs-15); line-height: 1.65; color: var(--ink); }
.escr-md .agent-md-h { margin: 20px 0 8px; font-weight: var(--fw-semi); color: var(--ink); }
.escr-md .agent-md-h:first-child { margin-top: 0; }
.escr-md .agent-md-h[data-level="1"] { font-size: var(--fs-24); }
.escr-md .agent-md-h[data-level="2"] { font-size: var(--fs-18); }
.escr-md .agent-md-h[data-level="3"] { font-size: var(--fs-16); }
.escr-md .agent-md-p { margin: 0 0 12px; }
.escr-md .agent-md-quote { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid color-mix(in srgb, var(--leaf) 60%, transparent); font-style: italic; }
.escr-md .agent-md-hr { margin: 20px 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.escr-pre { white-space: pre-wrap; font-family: inherit; }

/* ── the written script (26 Oct 2026) ─────────────────────────────────────────────────────────────────────────────
   Hugo (Princesses): "I want it to be formatted like a proper script, when it's centered, the text is centered,
   scene one, what it is, location. I want to be able to read it like a real script" and "some things that are
   important needs to be big". The chips name versions, never files ("Current (v6)", "v5" …), each row one line so a
   switch never moves what is below. Then one centred column: the title big, the lesson / rule / word block (the
   lesson's key words biggest), the scenes on a script PAGE (a card of the separation ladder, the screenplay font:
   slug lines bold capitals with the time on the right; action across the page; the CHARACTER centred; dialogue in a
   narrow centred column; parentheticals centred in italics; transitions on the right), the Shorts as small cards, and
   the document's other sections after it. */
.escr-filebar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.escr-filebar .escr-filetabs { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 0; scrollbar-width: none; }
.escr-filebar .escr-filetab { flex-shrink: 0; white-space: nowrap; font-family: inherit; }

.escr-sp { display: flex; flex-direction: column; gap: 24px; max-width: 940px; margin: 0 auto; color: var(--ink); }
.escr-sp-head { text-align: center; }
.escr-sp-kicker { font-size: var(--fs-12-5); font-weight: var(--fw-bold); letter-spacing: var(--track-14); text-transform: uppercase; color: var(--ink-muted); }
.escr-sp-title { margin: 10px 0 0; font-family: var(--font-display); font-size: var(--fs-48); font-weight: inherit; line-height: 1.04; letter-spacing: var(--track-005); color: var(--ink); }
.escr-sp-runtime { margin-top: 10px; font-size: var(--fs-13); font-weight: var(--fw-semi); letter-spacing: var(--track-06); color: var(--ink-muted); }
.escr-sp-k { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-14); text-transform: uppercase; color: var(--ink-muted); }
.escr-sp-logline { max-width: 760px; margin: 0 auto; text-align: center; }
.escr-sp-logline p { margin: 8px 0 0; font-size: var(--fs-18); line-height: 1.55; color: var(--ink); }

/* the lesson block: the lesson across, its key words the biggest thing on the page; the rule and the word beside */
.escr-sp-facts { display: flex; flex-direction: column; gap: 14px; padding: 24px 28px 26px; background: var(--sep-card-fill); border-radius: var(--r-md); }
.escr-sp-big { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px 28px; }
.escr-sp-bigfact { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-left: 16px; border-left: 3px solid var(--leaf); }
.escr-sp-bigfact--lesson { grid-column: 1 / -1; }
.escr-sp-theme { font-size: var(--fs-18); font-weight: var(--fw-semi); color: var(--ink); }
.escr-sp-keywords { font-family: var(--font-display); font-size: var(--fs-38); line-height: 1.12; letter-spacing: var(--track-005); text-transform: uppercase; color: var(--ink); }
.escr-sp-bigv { font-size: var(--fs-24); font-weight: var(--fw-semi); line-height: 1.3; color: var(--ink); }
.escr-sp-bigfact--rule .escr-sp-bigv { font-style: italic; }
.escr-sp-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 28px; margin: 6px 0 0; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.escr-sp-dlrow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.escr-sp-dlrow dt { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--ink-muted); }
.escr-sp-dlrow dd { margin: 0; font-size: var(--fs-15); line-height: 1.5; color: var(--ink); }
.escr-sp-asides { display: flex; flex-direction: column; gap: 8px; }
.escr-sp-lead { max-width: none; }

/* the script page */
.escr-sp-page { padding: 44px 64px 52px; font-family: var(--font-mono); font-size: var(--fs-15); line-height: 1.7; color: var(--ink); background: var(--sep-card-fill); border-radius: var(--r-md); }
.escr-sp-scene + .escr-sp-scene { margin-top: 40px; }
.escr-sp-slug { display: flex; align-items: baseline; gap: 18px; margin: 0 0 16px; font-weight: var(--fw-bold); letter-spacing: var(--track-04); text-transform: uppercase; }
.escr-sp-slug-t { min-width: 0; }
.escr-sp-slug-time { flex-shrink: 0; margin-left: auto; font-size: var(--fs-12-5); font-weight: var(--fw-semi); letter-spacing: var(--track-04); text-transform: none; color: var(--ink-muted); }
.escr-sp-part { margin: 8px 0 36px; text-align: center; font-weight: var(--fw-bold); letter-spacing: var(--track-10); text-transform: uppercase; }
.escr-sp-part:not(:first-child) { margin-top: 48px; }
.escr-sp-action { margin: 0 0 16px; }
.escr-sp-action--note { font-style: italic; color: var(--ink-muted); }
.escr-sp-dlg { width: min(100%, 36em); margin: 0 auto 16px; }
.escr-sp-char { text-align: center; font-weight: var(--fw-bold); text-transform: uppercase; }
.escr-sp-ext { font-weight: var(--fw-semi); }
.escr-sp-paren { width: min(100%, 26em); margin: 0 auto; text-align: center; font-style: italic; color: var(--ink-muted); }
.escr-sp-line { margin: 0; }
.escr-sp-song { width: min(100%, 36em); margin: 0 auto 18px; text-align: center; }
.escr-sp-char--song { margin-top: 6px; }
.escr-sp-lyric { font-style: italic; }
.escr-sp-gap { height: 0.85em; }
.escr-sp-cue { margin: 4px 0 16px; text-align: center; font-weight: var(--fw-bold); letter-spacing: var(--track-08); text-transform: uppercase; color: var(--ink-muted); }
.escr-sp-tag { margin: 0 0 16px; }
.escr-sp-tag-k { margin-right: 10px; font-weight: var(--fw-bold); letter-spacing: var(--track-04); text-transform: uppercase; }
.escr-sp-tag--meta,
.escr-sp-tag--sound { color: var(--ink-muted); }
.escr-sp-asides .escr-sp-tag { margin: 0; font-size: var(--fs-14); line-height: 1.55; }
.escr-sp-trans { margin: 8px 0 18px; text-align: right; font-weight: var(--fw-bold); letter-spacing: var(--track-04); text-transform: uppercase; }
.escr-sp-shot { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 10px; font-weight: var(--fw-bold); letter-spacing: var(--track-04); text-transform: uppercase; }
.escr-sp-shot-n { flex-shrink: 0; }
.escr-sp-mark { flex-shrink: 0; padding: 0 8px; font-size: var(--fs-11); line-height: 1.7; letter-spacing: var(--track-10); border: 1px solid var(--leaf); border-radius: var(--r-xs); }
.escr-sp-page .escr-craft { margin: 0 0 18px; font-family: var(--font-body); }
.escr-sp-md { margin: 0 0 16px; max-width: none; font-family: var(--font-body); }

/* the Shorts and the document's other sections */
.escr-sp-sec-title { margin: 0 0 12px; font-family: var(--font-display); font-size: var(--fs-26); line-height: 1.1; letter-spacing: var(--track-005); color: var(--ink); }
.escr-sp-shorts,
.escr-sp-section { padding: 22px 26px 24px; background: var(--sep-card-fill); border-radius: var(--r-md); }
.escr-sp-section .escr-md { max-width: none; }
.escr-sp-shortgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: stretch; }
.escr-sp-short { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 16px 16px; background: var(--sep-panel-fill); border-left: 3px solid var(--leaf); border-radius: var(--r-sm); font-size: var(--fs-13-5); line-height: 1.5; }
.escr-sp-short-head { display: flex; align-items: baseline; gap: 10px; }
.escr-sp-short-label { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--ink-muted); }
.escr-sp-short-time { margin-left: auto; font-size: var(--fs-11-5); color: var(--ink-muted); }
.escr-sp-short-title { font-size: var(--fs-16); font-weight: var(--fw-semi); line-height: 1.35; }
.escr-sp-srows { display: flex; flex-direction: column; gap: 6px; }
.escr-sp-srow { display: flex; flex-direction: column; gap: 3px; }
.escr-sp-srow-h { display: flex; align-items: baseline; gap: 8px; }
.escr-sp-srow-t { font-size: var(--fs-11); color: var(--ink-muted); }
.escr-sp-shorts > .escr-sp-lead { font-size: var(--fs-13-5); color: var(--ink-muted); }
.escr-sp-srow b { font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--ink-muted); }
.escr-sp-short :is(.escr-sp-action, .escr-sp-tag, .escr-sp-dlg, .escr-sp-song, .escr-sp-cue, .escr-sp-trans, .escr-sp-md) { width: auto; margin: 0; text-align: left; }
.escr-sp-short :is(.escr-sp-char, .escr-sp-paren) { width: auto; text-align: left; }
.escr-sp-short .escr-sp-shot { margin: 4px 0 0; }

/* the phone: the page fills the width, the dialogue column keeps an indent */
body[data-ui-tier="s"] .escr-sp { gap: 16px; }
body[data-ui-tier="s"] .escr-sp-title { font-size: var(--fs-32); }
body[data-ui-tier="s"] .escr-sp-keywords { font-size: var(--fs-26); }
body[data-ui-tier="s"] .escr-sp-bigv { font-size: var(--fs-18); }
body[data-ui-tier="s"] .escr-sp-big { grid-template-columns: minmax(0, 1fr); }
body[data-ui-tier="s"] :is(.escr-sp-facts, .escr-sp-shorts, .escr-sp-section) { padding: 16px; }
body[data-ui-tier="s"] .escr-sp-page { padding: 20px 16px 24px; font-size: var(--fs-13-5); }
body[data-ui-tier="s"] :is(.escr-sp-dlg, .escr-sp-song) { width: auto; margin-left: 12%; margin-right: 6%; }
body[data-ui-tier="s"] .escr-sp-paren { width: auto; }

/* the phone: one column, the labels in the cells */
body[data-ui-tier="s"] .escr-recap,
body[data-ui-tier="s"] .escr-written { padding: 14px 16px; }
body[data-ui-tier="s"] .escr-reel { padding: 12px; }
body[data-ui-tier="s"] .escr-reel-head { flex-wrap: wrap; row-gap: 2px; }
body[data-ui-tier="s"] .escr-reel-title { flex: 1 1 100%; order: 3; white-space: normal; }
body[data-ui-tier="s"] .escr-cols { display: none; }
body[data-ui-tier="s"] .escr-shot { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 12px; }
body[data-ui-tier="s"] :is(.escr-cell--say, .escr-cell--screen) { grid-column: auto; grid-row: auto; }
body[data-ui-tier="s"] .escr-cell--screen.is-empty { display: none; }
body[data-ui-tier="s"] .escr-k { display: block; }