/* styles/phone-script.css — the PHONE Script page (6 Oct 2026, src/PhoneScript.jsx). Hugo's mockup 04-script: SCRIPT
   eyebrow + the title big, Episodes / Screenplay / Shotlist, the episode card, the speaker tabs, the numbered
   paragraph cards (title + the scenes pill, speaker + Copy, the narration), "N more paragraphs".
   The desktop ScriptView (src/Views.jsx) renders inside .pscr-page; every rule is phone tier + .pscr-page only, so
   the desktop never changes. ONE scroller (the phone page). Skin tokens only; controls >= 40px. */

/* 8 Oct 2026 — this page's names are its own (pscr-). It shared .psc-page with the phone Schedule page, so each page's
   rules reached the other: this page's forest colour covered the Schedule's photo (Hugo: a flat dark green under the
   header). What the Schedule's rules gave THIS page stays, written here for it alone, so the Script looks exactly as
   before: the white words of a dark-glass skin, the veil over the photo behind the band, no sheen on the page column,
   the 7.3px foot. */
body[data-ui-tier="s"][data-skin-family="glass"] .pscr-page { --ink: var(--white); }
body[data-ui-tier="s"] .main-content > .pk-page.pscr-page { padding-bottom: 7.3px; }
body[data-ui-tier="s"][data-skin-family="glass"] .main-content:has(> .pscr-page) {
  background-image: linear-gradient(to bottom, transparent 0, transparent 40px, color-mix(in srgb, var(--shl-veil) 16%, transparent) 130px,
    color-mix(in srgb, var(--shl-veil) 36%, transparent) 240px, color-mix(in srgb, var(--shl-veil) 48%, transparent) 480px, color-mix(in srgb, var(--shl-veil) 62%, transparent) 100%);
}
body[data-ui-tier="s"] .main-content:has(> .pscr-page) { box-shadow: none; }

/* ════════ ONE COLUMN, ONE SCROLLER ════════ */
body[data-ui-tier="s"] .pscr-page .view-page {
  display: flex; flex-direction: column; gap: var(--pk-3); height: auto; min-height: 0; max-height: none; overflow: visible;
  padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-ui-tier="s"] .pscr-page .ep-list,
body[data-ui-tier="s"] .pscr-page .ep-row,
body[data-ui-tier="s"] .pscr-page .ep-body { height: auto; min-height: 0; max-height: none; overflow: visible; }

/* ════════ TITLE + TABS ════════ */
body[data-ui-tier="s"] .pscr-page .vp-head { display: flex; flex-direction: column; align-items: stretch; gap: var(--pk-2); padding: var(--pk-3) 0 0; margin: 0; border: 0; background: transparent; }
body[data-ui-tier="s"] .pscr-page .vp-head > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body[data-ui-tier="s"] .pscr-page .vp-eyebrow {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--pk-fs-small); font-weight: var(--fw-semi); letter-spacing: var(--track-16); text-transform: uppercase; color: var(--ink-muted);
}
body[data-ui-tier="s"] .pscr-page .vp-title {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--fs-38); line-height: 1; letter-spacing: var(--track-02); text-transform: uppercase; color: var(--ink);
}
body[data-ui-tier="s"] .pscr-page .vp-tabs { display: flex; gap: var(--pk-6); width: 100%; margin: 0; padding: 0; border-bottom: 1px solid var(--card-border); background: transparent; }
body[data-ui-tier="s"] .pscr-page .vp-tab {
  position: relative; min-height: 40px; padding: 0; margin: 0 0 -1px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent;
  font-family: var(--font-body); font-size: var(--pk-fs-control); font-weight: var(--fw-med); color: var(--ink-muted);
}
/* the active tab's underline is its bottom border (views-pages.css switches .vp-tab::after and box-shadow off, !important) */
body[data-ui-tier="s"] .pscr-page .vp-tab.is-active { color: var(--ink); font-weight: var(--fw-semi); border-bottom-color: var(--accent); }

/* ════════ THE EPISODE CARD ════════ */
body[data-ui-tier="s"] .pscr-page .ep-list { display: flex; flex-direction: column; gap: var(--pk-3); padding: 0; }
body[data-ui-tier="s"] .pscr-page .ep-row { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* EP 00 | title, meta, the version pill | chevron */
body[data-ui-tier="s"] .pscr-page .ep-row-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 32px; grid-template-rows: auto auto; align-items: center; column-gap: var(--pk-3); row-gap: var(--pk-2);
  width: 100%; min-height: 48px; padding: var(--pk-3) var(--pk-2) var(--pk-3) var(--pk-4); margin: 0; box-sizing: border-box; text-align: left;
  border: 1px solid var(--card-border); border-radius: var(--pk-radius-row); background: var(--card-bg-solid); color: var(--ink); box-shadow: none;
}
body[data-ui-tier="s"] .pscr-page .ep-num {
  grid-column: 1; grid-row: 1 / 3; align-self: stretch; display: flex; align-items: center; padding-right: var(--pk-3);
  border-right: 1px solid var(--card-border); font-family: var(--font-display); font-size: var(--fs-26); line-height: 1; color: var(--ink-muted); white-space: nowrap;
}
body[data-ui-tier="s"] .pscr-page .ep-title-block { grid-column: 2; grid-row: 1; min-width: 0; width: auto; display: flex; flex-direction: column; gap: 2px; }
body[data-ui-tier="s"] .pscr-page .ep-title { font-family: var(--font-display); font-size: var(--fs-18); line-height: 1.1; letter-spacing: var(--track-02); text-transform: uppercase; overflow-wrap: anywhere; }
body[data-ui-tier="s"] .pscr-page .ep-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--pk-2); font-family: var(--font-body); font-size: var(--pk-fs-meta); line-height: 1.35; color: var(--ink-muted); }
body[data-ui-tier="s"] .pscr-page .ep-status {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--pk-3); border-radius: var(--pk-radius-chip);
  background: color-mix(in srgb, var(--status-ok) 22%, transparent); color: var(--ink);
  font-size: var(--pk-fs-small); font-weight: var(--fw-semi); letter-spacing: var(--track-10); text-transform: uppercase;
}
body[data-ui-tier="s"] .pscr-page .ep-versions { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: var(--pk-1); min-width: 0; }
body[data-ui-tier="s"] .pscr-page .ep-ver-pill {
  min-height: 40px; padding: 0 var(--pk-3); border: 1px solid var(--card-border); border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 6px); background: transparent; color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-12); font-weight: var(--fw-med);
}
body[data-ui-tier="s"] .pscr-page .ep-ver-pill.is-active { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
body[data-ui-tier="s"] .pscr-page .ep-chev { grid-column: 3; grid-row: 1 / 3; justify-self: center; width: 18px; height: 18px; color: var(--ink-muted); }

/* ════════ SPEAKER FILTER ════════ */
body[data-ui-tier="s"] .pscr-page .ep-body { display: flex; flex-direction: column; gap: var(--pk-3); padding: var(--pk-3) 0 0; margin: 0; border: 0; background: transparent; }

/* ════════ PARAGRAPH CARDS ════════ */
/* 01 | TITLE · scenes pill / speaker · Copy / the narration */
body[data-ui-tier="s"] .pscr-page .script-scene {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: var(--pk-3); row-gap: var(--pk-2); align-items: start;
  padding: var(--pk-4) var(--pk-3); margin: 0; border: 1px solid var(--card-border); border-radius: var(--pk-radius-card);
  background: var(--card-bg-solid); box-shadow: none; opacity: 1;
}
body[data-ui-tier="s"] .pscr-page .script-scene-head,
body[data-ui-tier="s"] .pscr-page .script-beat { display: contents; }
body[data-ui-tier="s"] .pscr-page .script-scene-num { grid-column: 1; grid-row: 1 / 4; font-family: var(--font-display); font-size: var(--fs-28); line-height: 0.95; color: var(--ink); }
body[data-ui-tier="s"] .pscr-page .script-scene-heading {
  grid-column: 2; grid-row: 1; min-width: 0; align-self: center;
  font-family: var(--font-display); font-size: var(--fs-16); line-height: 1.15; letter-spacing: var(--track-04); text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere;
}
body[data-ui-tier="s"] .pscr-page .script-scene-seq {
  grid-column: 3; grid-row: 1; align-self: center; justify-self: end; display: inline-flex; align-items: center; max-width: 150px; min-height: 26px; padding: 2px var(--pk-2);
  border-radius: var(--pk-radius-chip); background: color-mix(in srgb, var(--status-ok) 22%, transparent); color: var(--ink); text-align: center;
  font-family: var(--font-body); font-size: var(--fs-11); font-weight: var(--fw-semi); line-height: 1.2; letter-spacing: var(--track-04); text-transform: uppercase;
}
body[data-ui-tier="s"] .pscr-page .script-para-copy {
  grid-column: 3; grid-row: 2; justify-self: end; min-height: 40px; min-width: 64px; padding: 0 var(--pk-3); margin: 0;
  border: 0; border-radius: var(--pk-radius-control); background: transparent; color: var(--ink-muted);
  font-family: var(--font-body); font-size: var(--fs-11); font-weight: var(--fw-semi); letter-spacing: var(--track-10); text-transform: uppercase;
}
body[data-ui-tier="s"] .pscr-page .script-para-copy.is-copied { background: color-mix(in srgb, var(--status-ok) 24%, transparent); }
body[data-ui-tier="s"] .pscr-page .script-speaker {
  grid-column: 2; grid-row: 2; align-self: center; margin: 0; padding: 0;
  font-family: var(--font-display); font-size: var(--fs-14); letter-spacing: var(--track-08); text-transform: uppercase; color: var(--ink-muted);
}
body[data-ui-tier="s"] .pscr-page .script-line { grid-column: 2 / 4; margin: 0; padding: 0; font-family: var(--font-body); font-size: var(--fs-14); line-height: 1.45; color: var(--ink); }
/* the per-line fallback (a project without the VO paragraph script): a beat = speaker over its line */
body[data-ui-tier="s"] .pscr-page .script-scene:not(.script-para) .script-speaker { grid-column: 2 / 4; grid-row: auto; }
body[data-ui-tier="s"] .pscr-page .script-scene:not(.script-para) .script-scene-num { grid-row: 1 / 99; }
body[data-ui-tier="s"] .pscr-page .ep-empty { padding: var(--pk-6) var(--pk-2); text-align: center; color: var(--ink-muted); font-size: var(--fs-14); }

/* the first paragraphs, then "N more paragraphs in this episode" (src/PhoneScript.jsx) */
body[data-ui-tier="s"] .pscr-page:not(.is-all) .ep-body > :nth-child(n + 8 of .script-scene) { display: none; }
body[data-ui-tier="s"] .pscr-page .pscr-more {
  display: flex; align-items: center; gap: var(--pk-3); width: 100%; min-height: 52px; padding: 0 var(--pk-3) 0 var(--pk-4); margin: 0; flex: 0 0 auto;
  border: 1px solid var(--card-border); border-radius: var(--pk-radius-control); background: var(--card-bg-solid); color: var(--ink); text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-15); font-weight: var(--fw-med);
}
body[data-ui-tier="s"] .pscr-page .pscr-more-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ════════ SCREENPLAY ════════ */
body[data-ui-tier="s"] .pscr-page .sp-page {
  height: auto; max-height: none; overflow: visible; padding: var(--pk-4); margin: 0;
  border: 1px solid var(--card-border); border-radius: var(--pk-radius-card); background: var(--card-bg-solid); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-ui-tier="s"] .pscr-page .sp-doc { max-width: none; padding: 0; margin: 0; font-size: var(--fs-14); }
body[data-ui-tier="s"] .pscr-page :is(.sp-character, .sp-dialogue, .sp-paren) { margin-left: 0; margin-right: 0; max-width: none; }
body[data-ui-tier="s"] .pscr-page .sp-empty { font-size: var(--fs-14); line-height: 1.5; color: var(--ink-muted); }
body[data-ui-tier="s"] .pscr-page .sp-empty-path code { overflow-wrap: anywhere; }

/* ════════ SHOTLIST: each row a card (thumb | id + title | status) ════════ */
body[data-ui-tier="s"] .pscr-page .shotlist-page { height: auto; max-height: none; overflow: visible; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-ui-tier="s"] .pscr-page .shotlist-grid { display: flex; flex-direction: column; gap: var(--pk-2); min-width: 0; width: auto; overflow: visible; }
body[data-ui-tier="s"] .pscr-page .shotlist-row--head { display: none; }
body[data-ui-tier="s"] .pscr-page .shotlist-row:not(.shotlist-row--head) {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "thumb id" "thumb title" "thumb status";
  column-gap: var(--pk-3); row-gap: 2px; align-items: center; min-width: 0; width: auto; min-height: 64px; padding: var(--pk-2);
  border: 1px solid var(--card-border); border-radius: var(--pk-radius-row); background: var(--card-bg-solid); color: var(--ink);
}
body[data-ui-tier="s"] .pscr-page .shotlist-row > * { display: none; }
body[data-ui-tier="s"] .pscr-page .shotlist-row > .shotlist-thumb { display: grid; place-items: center; grid-area: thumb; width: 104px; height: auto; border-radius: var(--pk-radius-small); overflow: hidden; font-size: var(--fs-11); }
body[data-ui-tier="s"] .pscr-page .shotlist-row > .shotlist-thumb img { width: 100%; height: 100%; object-fit: cover; }
body[data-ui-tier="s"] .pscr-page .shotlist-row > .shotlist-id { display: block; grid-area: id; font-size: var(--pk-fs-meta); font-weight: var(--fw-semi); color: var(--ink-muted); }
body[data-ui-tier="s"] .pscr-page .shotlist-row > :nth-child(4) { display: block; grid-area: title; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-14); font-weight: var(--fw-semi); }
body[data-ui-tier="s"] .pscr-page .shotlist-row > :nth-child(10) { display: block; grid-area: status; }

/* a narrow phone (< 400px): the scenes pill drops under the title, beside Copy, and the speaker under both, so the
   title keeps its width */
@media (max-width: 399px) {
  body[data-ui-tier="s"] .pscr-page .script-para .script-scene-heading { grid-column: 2 / 4; }
  body[data-ui-tier="s"] .pscr-page .script-para .script-scene-seq { grid-column: 2; grid-row: 2; justify-self: start; max-width: none; }
  body[data-ui-tier="s"] .pscr-page .script-para .script-speaker { grid-row: 3; grid-column: 2 / 4; }
  body[data-ui-tier="s"] .pscr-page .script-para .script-scene-num { grid-row: 1 / 5; }
}

/* ════════ DENSITY PASS (the mockup's proportions: its phone panel ÷ 412 ≈ 1.5) ════════
   body 13px, secondary 11-12px, labels 10-11px caps; pills 30-32px to see inside 40px taps; compact cards. */
body[data-ui-tier="s"] .pscr-page .view-page { gap: 10px; }
body[data-ui-tier="s"] .pscr-page .vp-head { gap: 4px; padding-top: 8px; }
body[data-ui-tier="s"] .pscr-page .vp-eyebrow { font-size: var(--fs-11); }
body[data-ui-tier="s"] .pscr-page .vp-title { font-size: var(--fs-36); }
body[data-ui-tier="s"] .pscr-page .vp-tabs { gap: var(--pk-4); }
body[data-ui-tier="s"] .pscr-page .vp-tab { font-size: var(--fs-14); }
/* the EP card: EP 00 | title, one meta line, Active + the version | chevron */
body[data-ui-tier="s"] .pscr-page .ep-row-head { padding: 10px 6px 10px 12px; column-gap: 12px; row-gap: 4px; border-radius: var(--pk-radius-row); }
body[data-ui-tier="s"] .pscr-page .ep-num { font-size: var(--fs-24); padding-right: 12px; }
body[data-ui-tier="s"] .pscr-page .ep-title { font-size: var(--fs-15); }
body[data-ui-tier="s"] .pscr-page .ep-meta { font-size: var(--fs-11-5); line-height: 1.35; gap: 4px 6px; }
body[data-ui-tier="s"] .pscr-page .ep-status { height: 20px; padding: 0 8px; font-size: var(--fs-10); }
body[data-ui-tier="s"] .pscr-page .ep-ver-pill { min-height: 40px; padding: 0 12px; border: 6px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--card-border); font-size: var(--fs-11-5); }
body[data-ui-tier="s"] .pscr-page .ep-ver-pill.is-active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }
body[data-ui-tier="s"] .pscr-page .ep-body { gap: 8px; padding-top: 8px; }
/* paragraph cards */
body[data-ui-tier="s"] .pscr-page .script-scene { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; padding: 12px 10px 12px 12px; border-radius: var(--pk-radius-card); }
body[data-ui-tier="s"] .pscr-page .script-scene-num { font-size: var(--fs-26); }
body[data-ui-tier="s"] .pscr-page .script-scene-heading { font-size: var(--fs-13); letter-spacing: var(--track-04); }
body[data-ui-tier="s"] .pscr-page .script-scene-seq { min-height: 20px; max-width: 132px; padding: 2px 8px; font-size: var(--fs-9-5); letter-spacing: var(--track-04); }
body[data-ui-tier="s"] .pscr-page .script-speaker { font-size: var(--fs-12); }
body[data-ui-tier="s"] .pscr-page .script-para-copy { min-height: 40px; min-width: 52px; padding: 0 8px; margin-right: -4px; font-size: var(--fs-10-5); }
body[data-ui-tier="s"] .pscr-page .script-line { font-size: var(--fs-13); line-height: 1.45; }
body[data-ui-tier="s"] .pscr-page .pscr-more { min-height: 44px; border-radius: var(--pk-radius-control); font-size: var(--fs-14); }
body[data-ui-tier="s"] .pscr-page .shotlist-row:not(.shotlist-row--head) { grid-template-columns: 88px minmax(0, 1fr); min-height: 52px; padding: 6px; border-radius: var(--pk-radius-row); }
body[data-ui-tier="s"] .pscr-page .shotlist-row > .shotlist-thumb { width: 88px; }
body[data-ui-tier="s"] .pscr-page .shotlist-row > .shotlist-id { font-size: var(--fs-11); }
body[data-ui-tier="s"] .pscr-page .shotlist-row > :nth-child(4) { font-size: var(--fs-13); }
body[data-ui-tier="s"] .pscr-page .sp-doc { font-size: var(--fs-13); }

/* the shell's project band names the page (SCRIPT) and the project: the script's own eyebrow + title would say it
   twice, so the head keeps only its tabs */
body[data-ui-tier="s"] .pscr-page .vp-head > div:first-child { display: none; }
body[data-ui-tier="s"] .pscr-page .vp-head { padding-top: 0; }

/* ════════════════ THE MOCKUP, MEASURED (6 Oct 2026, round 1 of the measured build) ════════════════
   Hugo's mockup 04-script at 412 CSS px wide, every size the spec's (ours / mockup within 0.95-1.05):
   - ONE page, the tabs + the open episode's card + the speaker chips PINNED (sticky, each under the one above it -
     src/PhoneScript.jsx measures their heights into --pscr-tabs-h / --pscr-head-h) while the paragraphs scroll under
     them; the gaps between the pinned parts are covered by the part above (it runs 8px under the next one);
   - 14px side margins; tabs Inter 15 with a 3.9px underline on a full-width hairline; the episode card 77.5 tall
     (EP 00 | the title Bebas 17 · the meta Inter 10.5 · ACTIVE + the version on one row); chips 24.5 tall, Inter 11;
     paragraph cards: the number Bebas 31 in a 44px column, the title Bebas 13 tracked, the scenes pill Bebas 9.5
     right (where the mockup's drag handle would be, its space kept), COPY pinned under it at the card's top right,
     the speaker Bebas 12, the narration Inter 12.5 / 16.4 in a 280px column; 8px between cards; the "N more" row 30.
   - the material (dark skins, the glass family): a flat near-black forest page, opaque dark green cards with a
     uniform 1px light rim and a near-black line just outside, flat deep-green scene pills, the active chip solid
     bright green with near-black text, no glows. A pale skin keeps its own card colours. */
body[data-ui-tier="s"] .pscr-page {
  --pscr-bg: color-mix(in srgb, var(--black) 5%, var(--card-bg-solid));
  --pscr-card: var(--card-bg-solid);
  --pscr-rim: var(--card-border);
  --pscr-out: transparent;
  --pscr-chip: transparent;
  --pscr-chip-rim: var(--card-border);
  --pscr-chip-on: var(--accent);
  --pscr-chip-on-ink: var(--ink-on-accent);
  --pscr-pill: color-mix(in srgb, var(--status-ok) 22%, transparent);
  --pscr-active: color-mix(in srgb, var(--status-ok) 22%, transparent);
  --pscr-active-rim: transparent;
  --pscr-line: var(--card-border);
  --pscr-under: var(--accent);
}
body[data-ui-tier="s"][data-skin-family="glass"] .pscr-page {
  --pscr-bg: color-mix(in srgb, var(--black) 70%, color-mix(in srgb, var(--bg) 55%, var(--accent)));     /* L* 7.3 */
  --pscr-card: color-mix(in srgb, var(--accent) 10%, color-mix(in srgb, var(--bg) 85%, var(--card-bg-solid)));   /* L* 13.8 */
  --pscr-rim: color-mix(in srgb, var(--accent) 5%, var(--card-bg-solid));                              /* L* 25 */
  --pscr-out: color-mix(in srgb, var(--black) 45%, transparent);
  --pscr-chip: color-mix(in srgb, var(--bg) 90%, color-mix(in srgb, var(--black) 15%, var(--accent)));   /* L* 9.6 */
  --pscr-chip-rim: color-mix(in srgb, var(--card-bg-solid) 86%, color-mix(in srgb, var(--accent) 15%, var(--ink-muted)));   /* L* 31 */
  --pscr-chip-on: color-mix(in oklab, var(--ok) 74%, var(--ink));                                       /* L* 77 */
  --pscr-chip-on-ink: var(--black);
  --pscr-pill: color-mix(in srgb, var(--black) 62%, var(--accent));                                     /* L* 27.6 */
  --pscr-active: color-mix(in srgb, var(--black) 50%, var(--accent));                                   /* L* 34.7 */
  --pscr-active-rim: color-mix(in srgb, var(--black) 38%, var(--accent));
  --pscr-line: color-mix(in srgb, var(--card-bg-solid) 46%, color-mix(in srgb, var(--black) 85%, var(--accent)));   /* L* 15.4 */
  --pscr-under: color-mix(in srgb, var(--ok) 88%, var(--ink));
}
body[data-ui-tier="s"] .main-content > .pk-page.pscr-page { background: var(--pscr-bg); }
body[data-ui-tier="s"] .pscr-page { padding: 0 13.8px; gap: 8px; }
/* the desktop page's flex: 1 (basis 0) capped the column at the screen and the cards ran over "N more": size to the
   content instead (the phone page is the one scroller) */
body[data-ui-tier="s"] .pscr-page :is(.view-page, .ep-list, .ep-row, .ep-body) { flex: 0 0 auto; }
body[data-ui-tier="s"] .pscr-page .view-page { gap: 0; }

/* ── the tabs (pinned): Episodes / Screenplay / Shotlist, Inter 15, the underline ON the hairline ── */
body[data-ui-tier="s"] .pscr-page .vp-head {
  position: sticky; top: 0; z-index: 3; gap: 0; width: auto; max-width: none; padding: 4.5px 13.8px 8px; margin: 0 -13.8px;
  background: var(--pscr-bg); box-shadow: 0 -8px 0 0 var(--pscr-bg);   /* (the scroller's top px row: what scrolls by never peeks over) */
}
body[data-ui-tier="s"] .pscr-page .vp-tabs { gap: 26px; padding: 0 0 0 3.2px; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--pscr-line); }
body[data-ui-tier="s"] .pscr-page .vp-tab {
  display: inline-flex; align-items: flex-start; height: 40px; min-height: 40px; padding: 8.6px 5.5px 0; margin: 0;
  border-bottom: 3.9px solid transparent; font-size: 15px; font-weight: 400; line-height: 18px; color: color-mix(in srgb, var(--ink) 82%, var(--black));
}
body[data-ui-tier="s"] .pscr-page .vp-tab.is-active { font-weight: var(--fw-med); color: var(--ink); border-bottom-color: var(--pscr-under); }

/* ── the episode card (pinned under the tabs): EP 00 | the title · the meta · ACTIVE + the version ── */
body[data-ui-tier="s"] .pscr-page :is(.ep-list, .ep-row) { gap: 0; }
body[data-ui-tier="s"] .pscr-page .ep-row-head {
  position: sticky; top: var(--pscr-tabs-h, 48px); z-index: 4;
  grid-template-columns: 71px minmax(0, 1fr) 22px; grid-template-rows: auto; column-gap: 0; row-gap: 0; align-items: start;
  min-height: 77.5px; height: 77.5px; padding: 0; margin: 0; overflow: visible;
  border: 0; border-radius: var(--pk-radius-card); background: var(--pscr-card);
  /* the rim, the near-black line outside it, then a page-coloured band over the 8px above (covers what scrolls by) */
  box-shadow: inset 0 0 0 1px var(--pscr-rim), 0 0 0 1px var(--pscr-out), 0 -4px 0 4px var(--pscr-bg);
}
body[data-ui-tier="s"] .pscr-page .ep-num {
  grid-row: 1; align-self: stretch; justify-content: flex-start; padding: 0 0 0 15px; margin: 8px 0; border-right: 2px solid var(--pscr-line);
  font-size: 25.5px; letter-spacing: 0.02em; color: color-mix(in srgb, var(--ink) 80%, var(--black));
}
body[data-ui-tier="s"] .pscr-page .ep-title-block { grid-column: 2; padding: 10.6px 0 0 13px; gap: 0; }
body[data-ui-tier="s"] .pscr-page .ep-title { font-size: 17px; line-height: 1; letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the meta line: the stylesheet shows it from data-pscr-meta (its trailing "·" gone), the status pill on the row under it */
body[data-ui-tier="s"] .pscr-page .ep-meta { display: block; margin-top: 6.2px; font-size: 0; line-height: 1; }
body[data-ui-tier="s"] .pscr-page .ep-meta::before {
  content: attr(data-pscr-meta); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px; line-height: 13px; color: color-mix(in srgb, var(--ink) 94%, transparent);
}
body[data-ui-tier="s"] .pscr-page .ep-status {
  display: inline-flex; align-items: center; justify-content: center; height: 20.4px; margin-top: 6.3px; padding: 0 10.5px; box-sizing: border-box;
  border-radius: var(--pk-radius-chip); background: var(--pscr-active); box-shadow: inset 0 0 0 1px var(--pscr-active-rim);
  font-size: 10.5px; font-weight: var(--fw-semi); letter-spacing: 0.04em; line-height: 1; color: var(--ink);
}
/* the version pill(s) beside ACTIVE (the status' width measured into --pscr-status-w) */
body[data-ui-tier="s"] .pscr-page .ep-row-head > .ep-versions {
  position: absolute; left: calc(84px + var(--pscr-status-w, 62px) + 11px); top: 41.5px; grid-column: auto; grid-row: auto;
  flex-wrap: nowrap; gap: 6px; max-width: calc(100% - 84px - var(--pscr-status-w, 62px) - 11px - 30px); overflow: hidden;
}
body[data-ui-tier="s"] .pscr-page .ep-ver-pill {
  height: 40px; min-height: 40px; padding: 0 15px; margin: 0; border: 10px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-chip) / calc(var(--pk-radius-chip) + 10px); background-color: transparent; box-shadow: inset 0 0 0 1px var(--pscr-chip-rim);
  font-size: 11.5px; font-weight: 400; color: var(--ink); white-space: nowrap;
}
body[data-ui-tier="s"] .pscr-page .ep-ver-pill.is-active { background-color: transparent; box-shadow: inset 0 0 0 1px var(--pscr-chip-rim); }
body[data-ui-tier="s"] .pscr-page .ep-chev { grid-column: 3; align-self: start; justify-self: start; width: 13px; height: 13px; margin: 31px 0 0 -5px; color: var(--ink); }

/* ── the speaker filter (pinned under the card). 8 Oct 2026 — Hugo: "Same thing with the pills, have them be tabs like on
   the desktop app." The desktop's own buttons wear the kit's tabs (src/PhoneScript.jsx adds pk-tabs / pk-tab / pk-tab-n;
   styles/phone-kit.css draws them - the same tabs as the Assets categories): ONE row that scrolls sideways, the open one
   underlined and scrolled into view, the same filter as before (the desktop's own clicks). ── */
body[data-ui-tier="s"] .pscr-page .ep-body { gap: 8px; padding: 0; }
body[data-ui-tier="s"] .pscr-page .script-filter-bar {
  position: sticky; top: calc(var(--pscr-tabs-h, 48px) + var(--pscr-head-h, 77.5px)); z-index: 3;
  width: auto; max-width: none; padding: 2px 13.8px 0; margin: 0 -13.8px; background: var(--pscr-bg);
}
/* the All tab: its count alone (the stylesheet shows data-pscr-n, "36", not "36 paragraphs") */
body[data-ui-tier="s"] .pscr-page .script-filter-pill:first-child .script-filter-count[data-pscr-n] { font-size: 0; }
body[data-ui-tier="s"] .pscr-page .script-filter-pill:first-child .script-filter-count[data-pscr-n]::after { content: attr(data-pscr-n); font-size: var(--pk-tab-n-fs); }

/* ── the paragraph cards ── */
body[data-ui-tier="s"] .pscr-page .script-scene {
  position: relative; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 0; row-gap: 0; align-items: start;
  padding: 12px 7px 12px 12px; border: 0; border-radius: var(--pk-radius-card); background: var(--pscr-card);
  box-shadow: inset 0 0 0 1px var(--pscr-rim), 0 0 0 1px var(--pscr-out);
}
body[data-ui-tier="s"] .pscr-page .script-scene-num { grid-row: 1 / 4; padding-top: 3px; font-size: 28px; line-height: 0.8; color: var(--ink); }
body[data-ui-tier="s"] .pscr-page .script-scene-heading {
  --pscr-title-fs: 14.8px; --pscr-title-ls: 0.065;
  grid-column: 2; grid-row: 1; align-self: start; padding: 2px 9px 0 0;
  font-size: var(--pscr-tfs, var(--pscr-title-fs)); line-height: 17px; letter-spacing: 0.065em; color: var(--ink);
}
body[data-ui-tier="s"] .pscr-page .script-scene-seq {
  grid-column: 3; grid-row: 1; align-self: start; justify-self: end; max-width: none; min-width: 108px; height: 20.4px; min-height: 0; margin: -2px 24px 0 0; padding: 0 8px; box-sizing: border-box; text-align: center;
  border: 0; border-radius: var(--pk-radius-chip); background: var(--pscr-pill); box-shadow: none; color: var(--ink);
  font-family: var(--font-display); font-size: 9.5px; font-weight: 400; line-height: 20.4px; letter-spacing: 0.1em; white-space: nowrap;
}
/* COPY: the right column, under the (mockup's) handle at the card's top right, whatever the title's lines */
body[data-ui-tier="s"] .pscr-page .script-para-copy {
  position: absolute; grid-area: auto; right: 0; top: 19px; width: 52px; min-width: 0; height: 40px; min-height: 40px; padding: 0 7px 0 0; margin: 0;
  display: flex; align-items: center; justify-content: flex-end; background: transparent; color: var(--ink);
  font-size: 8.3px; font-weight: var(--fw-semi); letter-spacing: 0.02em; line-height: 1;
}
body[data-ui-tier="s"] .pscr-page .script-speaker {
  grid-column: 2; grid-row: 2; align-self: start; margin-top: 7.5px;
  font-size: 12px; line-height: 12px; letter-spacing: 0.137em; color: var(--ink);
}
body[data-ui-tier="s"] .pscr-page .script-line {
  grid-column: 2 / 4; grid-row: 3; max-width: 280px; margin-top: 7px;
  font-size: 12.5px; line-height: 16.4px; color: color-mix(in srgb, var(--ink) 93%, transparent);
}
/* "29 more paragraphs in this episode": the card material, 30 tall to see (40 to tap) */
body[data-ui-tier="s"] .pscr-page .pscr-more {
  height: 40px; min-height: 40px; padding: 0 22px 0 18px; margin: -5px 0; gap: 17px;
  border: 5px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  border-radius: var(--pk-radius-card) / calc(var(--pk-radius-card) + 5px); background-color: var(--pscr-card);
  box-shadow: inset 0 0 0 1px var(--pscr-rim); font-size: 14.5px; font-weight: 400; line-height: 1;
}
body[data-ui-tier="s"] .pscr-page .pscr-more > svg:first-child { width: 17px; height: 17px; }
body[data-ui-tier="s"] .pscr-page .pscr-more > svg:last-child { width: 14px; height: 14px; }

/* ── the speakers in title case like the mockup ("Robin", "Twain VO": src/PhoneScript.jsx sets data-pscr-name; React keeps
   the text), drawn at the kit tab's size, the count after it like every tab ── */
body[data-ui-tier="s"] .pscr-page .script-filter-pill[data-pscr-name] { column-gap: 0; font-size: 0; }
body[data-ui-tier="s"] .pscr-page .script-filter-pill[data-pscr-name]::before { content: attr(data-pscr-name); margin-right: 6px; font-size: var(--pk-tab-fs); }
/* the mockup's greens are the forest's deep BLUE-green (#071910 page, #14251b cards, #1f4a22 scene pills, #0e1e15
   chips), not the accent's olive: tinted with the skin's status green instead */
body[data-ui-tier="s"][data-skin-family="glass"] .pscr-page {
  --pscr-bg: color-mix(in srgb, var(--black) 35%, color-mix(in srgb, var(--status-ok) 20%, var(--bg)));
  --pscr-card: color-mix(in srgb, var(--status-ok) 15%, color-mix(in srgb, var(--bg) 80%, var(--card-bg-solid)));
  --pscr-chip: color-mix(in srgb, var(--status-ok) 12%, var(--bg));
  --pscr-pill: color-mix(in srgb, var(--black) 48%, color-mix(in srgb, var(--accent) 30%, var(--status-ok)));
}
/* the active chip is the skin's own bright green (the mockup's #6fd369), the episode's Active pill the deep green */
body[data-ui-tier="s"][data-skin-family="glass"] .pscr-page {
  --pscr-chip-on: color-mix(in oklab, var(--ok) 95%, var(--ink));
  --pscr-active: color-mix(in srgb, var(--black) 38%, color-mix(in srgb, var(--accent) 35%, var(--status-ok)));
}
/* the scene pill at the mockup's mean width (122.9 for "SCENES 001–003 · 3 SHOTS"); COPY 40px under the card's top */
body[data-ui-tier="s"] .pscr-page .script-scene-seq { padding: 0 11.4px; }
body[data-ui-tier="s"] .pscr-page .script-para-copy { top: 24px; }
body[data-ui-tier="s"] .pscr-page .script-scene-seq { padding: 0 10px; }
body[data-ui-tier="s"] .pscr-page .script-scene-heading { padding-right: 5px; }
body[data-ui-tier="s"][data-skin-family="glass"] .pscr-page { --pscr-chip-on: color-mix(in oklch, color-mix(in oklch, var(--ok) 65%, var(--signal-green)) 90%, var(--white)); }

/* the mockup draws proportional digits ("01" narrower than "02", "SH1167", "(1)"): the skin's tabular digits off on this page */
body[data-ui-tier="s"] .pscr-page { font-feature-settings: "lnum"; }
/* the paragraph numbers: proportional figures ("01" narrower than "02", as the mockup draws them) spaced to the
   mockup's 21.0 / 25.0 wide numerals */
body[data-ui-tier="s"] .pscr-page .script-scene-num { font-feature-settings: "lnum", "pnum"; letter-spacing: 0.12em; }
/* ── ROUND 2 (after the measured shell) ── */
/* the paragraph titles a notch smaller (the mockup's 02 and 03 wrap at 14.5) */
body[data-ui-tier="s"] .pscr-page .script-scene-heading { --pscr-title-fs: 14.5px; }
/* the speaker: 13px, tracked 1.38 with the word gap 1.6 tighter (the mockup draws TWAIN VO 46.1 / AUDUBON 46.7 / TWAIN DIRECT
   65.7 in one style: AUDUBON wider per letter, the two-word names tighter) */
body[data-ui-tier="s"] .pscr-page .script-speaker { font-size: 13px; letter-spacing: 1.38px; word-spacing: -1.6px; }
/* the active tab's underline 3.9 drawn (Chrome lays a border out on whole device pixels) */
body[data-ui-tier="s"] .pscr-page .vp-tab { border-bottom-width: 4.6px; }
/* the episode card's chevron at the mockup's 10.5 x 6.6 */
body[data-ui-tier="s"] .pscr-page .ep-chev { width: 18.9px; height: 18.9px; margin: 28.05px 0 0 -4.45px; }
/* the "29 more paragraphs" row's list icon and chevron at the mockup's 17.7 x 13.8 / 7.9 x 13.1 */
body[data-ui-tier="s"] .pscr-page .pscr-more svg:first-child { width: 23.3px; height: 23.3px; }
body[data-ui-tier="s"] .pscr-page .pscr-more svg:last-child { width: 21.7px; height: 21.7px; }
/* the divider after EP 00: an etched line like the mockup's (a dark edge, then a lit one: L* 37 against the card) */
body[data-ui-tier="s"] .pscr-page .ep-num {
  border-right-width: 0;
  box-shadow: 1px 0 0 0 color-mix(in srgb, var(--black) 22%, var(--pscr-card)), 3px 0 0 0 color-mix(in srgb, var(--ink) 26%, var(--pscr-card));
}
/* (the larger glyphs keep the mockup's places: the list icon 16.4 in, the label 51.2, the chevron 15.8 from the right) */
body[data-ui-tier="s"] .pscr-page .pscr-more > svg:first-child { margin: 0 -2.5px 0 -4.6px; }
body[data-ui-tier="s"] .pscr-page .pscr-more > svg:last-child { margin-right: -12.5px; }