@import url("fonts.css");

/* One Yes Later, the script room.
 *
 * A reviewer is handed a script, not logged into a tool. So: paper, one measure,
 * one margin, proofreader's marks. No nav chrome, no cards, no panels, no dashboard.
 *
 * Two layers, and the first one is the point. The read is the default: the local
 * script runs continuously and nothing is rendered between the lines, so a reviewer
 * can read a whole film top to bottom the way the film plays. The desk opens in
 * place on the line they touch, and closing it heals the script back to a read.
 *
 * The type is the campaign's own, measured off the After Effects project: Poppins on
 * 1,169 text layers, every card and every lockup, and Inter on 271, the chat and the
 * app's own text. So Poppins speaks, and it speaks only where the film speaks: the
 * title, the script lines, the lockup as the artwork sets it. Inter does the work of
 * the room: notes, margins, cues, tables, controls. Two families and no third, which
 * is why the cue face is Inter in caps rather than a compact grotesk nobody in this
 * campaign has ever set. Light and Regular do the reading; Bold appears once, on the
 * lockup, because that is the one place the artwork is bold.
 *
 * Ink near black on warm white, tabular figures for timings, and a single accent,
 * printer's red, spent only on mark-up: the struck original, the reviewer's own
 * words, their notes, their tick, where a line stands, and the one place the
 * guardrail says a line will not fit.
 */

:root {
  --paper: #0b0b0f;
  --panel: #131319;
  --surface: #1a1a22;
  --surface-raised: #22222c;
  --ink: #ece7d8;
  --ink-soft: #bcb5a7;
  --mute: #8a857a;
  --faint: #827d73;
  --rule: #26252e;
  --rule-firm: #34333d;
  --active: #7f77d6;
  --focus: #9a92e6;
  --mark: #d58b83;
  --mark-wash: rgb(213 139 131 / 14%);
  /* the campaign's voice: titles, script lines, cards, the lockup */
  --display: "Poppins", "Futura", "Century Gothic", "Avenir Next", sans-serif;
  /* the room's workhorse: everything that is not the film speaking */
  --text: "Switzer", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* cues, slugs and labels: the workhorse in caps, one system not three */
  --cue: var(--text);
  /* the lifted ground: fields, panels, options, the plate a lockup sits on */
  --lift: var(--surface);
  --measure: 33rem;
  --margin-w: 14.5rem;
  --gap: 2.25rem;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  max-width: 100%;
  overflow-x: clip;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

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

a { color: inherit; text-decoration-color: var(--rule-firm); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--mark); }

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

/* ── the sheet ─────────────────────────────────────────────────────────────── */

.sheet {
  max-width: calc(var(--measure) + 6rem);
  margin: 0 auto;
  padding: 3.25rem 3rem 7rem;
}

/* One measure, centred, at every width.
 *
 * The cue layer is gone by the design contract, so the second column carried
 * almost nothing while every rule still ran the full grid: the page read as a
 * left column against a dead band, with two different right edges on one screen.
 * What the margin still holds (the row's one question, a saved note, a recurring
 * count) sits under the row it belongs to, which is where the phone always put it.
 */
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.row > .body { grid-column: 1; min-width: 0; }
.row > .margin { grid-column: 1; }

.margin {
  font-family: var(--cue);
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: -0.002em;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  padding-top: 0.42rem;
}

/* ── running head ──────────────────────────────────────────────────────────── */

/* The letterhead. The mark and the wordmark are set on one optical centre line, by
 * flex rather than by a nudged baseline: the mark's cap height and the wordmark's are
 * not the same and aligning their baselines put the mark low at every size. Judged by
 * eye at both viewports, which is the only way this can be judged.
 */
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--cue);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--mute);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}
.head .where {
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  min-width: 0;
}
.head nav { display: flex; gap: 1.1rem; letter-spacing: 0.1em; }
.head a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.head a:hover { border-color: var(--mark); color: var(--mark); }
/* which link this is. Two rounds read the same room and only one of them writes. */
.head .role {
  color: var(--mark);
  border: 1px solid var(--mark);
  border-radius: 2px;
  padding: 0.2em 0.45em;
  letter-spacing: 0.12em;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* ── the steps ─────────────────────────────────────────────────────────────────
 *
 * The reviewer is not part of the campaign, so the app says what the steps are and
 * where she is in them. Columns of rules, which is the grammar the rest of the page
 * is already drawn in: a firm rule over the step she is on, a hairline over the
 * others. No dots, no chips, no bar filling up. It takes the navigation's job with
 * it, because each step IS a place, and a row of links beside it would be the same
 * places said twice. Four for the first read, three for the second.
 */
.rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 1.1rem;
  margin: 0 0 2.6rem;
}
.rail[data-steps="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rail[data-steps="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rail .step {
  display: block;
  text-decoration: none;
  color: var(--mute);
  border-top: 1px solid var(--rule);
  padding: 0.5rem 0 0;
}
.rail .n,
.rail .what,
.rail .how {
  display: block;
  font-family: var(--cue);
  font-variant-numeric: tabular-nums;
}
.rail .n {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 0.24rem;
}
.rail .what {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--mute);
}
.rail .how {
  font-size: 0.63rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin-top: 0.2rem;
  color: var(--ink-soft);
}
.rail .step:hover .what { color: var(--mark); }
/* where she is: the rule goes firm and the name goes to ink */
.rail[data-here="1"] .step[data-step="1"],
.rail[data-here="2"] .step[data-step="2"],
.rail[data-here="3"] .step[data-step="3"],
.rail[data-here="4"] .step[data-step="4"] { border-top: 2px solid var(--ink); padding-top: 0.49rem; }
.rail[data-here="1"] .step[data-step="1"] .what,
.rail[data-here="2"] .step[data-step="2"] .what,
.rail[data-here="3"] .step[data-step="3"] .what,
.rail[data-here="4"] .step[data-step="4"] .what { color: var(--ink); }
.rail[data-here="1"] .step[data-step="1"] .n,
.rail[data-here="2"] .step[data-step="2"] .n,
.rail[data-here="3"] .step[data-step="3"] .n,
.rail[data-here="4"] .step[data-step="4"] .n { color: var(--ink); }
.rail[data-here="1"] .step[data-step="1"] .how,
.rail[data-here="2"] .step[data-step="2"] .how,
.rail[data-here="3"] .step[data-step="3"] .how,
.rail[data-here="4"] .step[data-step="4"] .how { color: var(--mute); }
/* a step she has finished carries her own tick, in her own colour */
.rail .step[data-done="1"] .how {
  color: var(--mark);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.rail .step[data-done="1"] .how::before { content: "✓ "; }

/* ── titles ────────────────────────────────────────────────────────────────── */

.slug {
  font-family: var(--cue);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mark);
  margin: 0 0 0.55rem;
}

h1 {
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1.06;
  font-weight: 300;
  letter-spacing: -0.035em;
  margin: 0 0 0.85rem;
  text-wrap: balance;
}
h1.quiet { font-size: 1.95rem; }

.standfirst {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mute);
  font-style: normal;
  letter-spacing: -0.003em;
  margin: 0 0 0.35rem;
  max-width: 30rem;
}
.standfirst strong { font-style: normal; font-weight: 500; color: var(--ink); }

.label {
  font-family: var(--cue);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 0.55rem;
}
.quiet-note { font-family: var(--cue); font-size: 0.8rem; color: var(--mute); margin: 0; }

/* what to do here, in the room's own voice: one line, never a paragraph, never a
 * word about the app itself. It sits under the title or under a label and it is the
 * only instruction on the page, so it is set plainly and gets out of the way. */
.task {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--mute);
  margin: 0.55rem 0 0;
  max-width: 30rem;
}
.task:empty { display: none; }

.voice-script {
  margin-top: 2.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.8rem;
}
.voice-script summary {
  cursor: pointer;
  width: fit-content;
  font-family: var(--cue);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.voice-script[open] summary { color: var(--ink); }
.voice-script .script { margin-top: 1.5rem; }
.step-of {
  font-family: var(--cue);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.4rem;
}

/* ── the reference block ───────────────────────────────────────────────────────
 *
 * David: "Should the english script not just sit next to the film?" The film and the
 * whole English script, side by side, at the top, across the full sheet including the
 * width the margin column used to hold empty on every film page in every market. It
 * is the first thing under the title because it is the first thing the job needs:
 * watch it, read what it says, then judge how we have said it.
 *
 * The script side is unmistakably subordinate and unmistakably readable: italic, in
 * the room's face rather than the film's, down a reference rule. Nobody confuses it
 * with a line under review, and nobody has to leave the page to read the source.
 */

/* David, 31 Jul: the film stands as tall as the script beside it. It was a small
 * poster over a column of dead space, which made the delivered film look like an
 * illustration of the page rather than the thing the page is about. The two columns
 * share a height now and the 9:16 frame fills its own, within a sane cap so a long
 * script cannot stretch it up the wall.
 */
.ref {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: start;
  margin: 2.1rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-firm);
}
/* The column is as wide as the frames need to stand tall in it. One cut takes the
 * width of one 9:16 frame; two take the width of two. The alternative was a column
 * fixed in advance and frames letterboxed inside it, which puts black bars on a
 * delivered film in front of the person we are asking to judge it.
 */
/* The one step left, on whatever page she finished on. It sits at the foot of the
 * window rather than in the flow, because the moment it becomes true she may be
 * anywhere, and it must not push the line she is reading. */
.nudge {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 40;
  max-width: calc(100vw - 2rem);
  padding: 0.72rem 1.1rem;
  border-radius: 999px;
  background: var(--ink, #191919);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.35;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}
.nudge[hidden] { display: none; }
.nudge a {
  color: #fff;
  font-weight: 600;
  text-underline-offset: 0.18em;
}
@media (max-width: 40rem) {
  .nudge { left: 1rem; right: 1rem; transform: none; max-width: none; text-align: center; }
}

.ref .label { margin-bottom: 0.7rem; }
/* Why the English is on the page at all, said beside it. Quiet: it is a standing
 * note, not a new instruction each time she opens a film. */
.ref-script .label { margin-bottom: 0.25rem; }
.ref-note {
  color: var(--mute);
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0 0 0.7rem;
  max-width: 26rem;
}
.ref-film { display: flex; flex-direction: column; }
.reference-cut-switch { display: inline-flex; align-self: flex-start; gap: 0.3rem; margin: 0 0 0.7rem; padding: 0.22rem; border: 1px solid var(--rule-firm); border-radius: 9px; background: var(--surface); }
.reference-cut-switch button { min-height: 2.4rem; padding: 0.45rem 0.85rem; border: 0; border-radius: 7px; background: transparent; color: var(--ink-soft); font-family: var(--cue); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.reference-cut-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.reference-cut-switch button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ref-script { border-left: 1px solid var(--rule); padding-left: var(--gap); }

/* The English script as a script: one line per spoken line, the delivery's own
 * divisions kept, on-screen items labelled. The reviewer maps each English line to
 * the local line below.
 */
.escript {
  font-style: italic;
  color: var(--mute);
  font-size: 0.97rem;
  line-height: 1.55;
  max-width: 34rem;
}
.escript p { margin: 0 0 0.55rem; }
.escript p:last-child { margin-bottom: 0; }
.escript .ecard { font-style: normal; margin-top: 0.75rem; }
.escript .ecard .card {
  font-style: normal;
  font-family: var(--cue);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  display: block;
  margin-bottom: 0.06rem;
}

/* the delivered film: a poster plate that hands its native controls back the moment
 * it is actually playing, so the picture can be paused and scrubbed */
.reel-strip { display: flex; gap: 0.7rem; margin: 0; align-items: flex-start; }
.reel { margin: 0; flex: 1 1 0; min-width: 0; }

/* the plate carries the delivered master's own shape, so the frame fills it exactly
 * and nothing is cropped, stretched or set in black bars */
.reel-plate {
  position: relative;
  background: #100f0d;
  border: 1px solid var(--rule-firm);
  line-height: 0;
  aspect-ratio: 9 / 16;
}
.reel video,
.reel-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #100f0d;
}
.reel-still { display: none; }
.reel video { cursor: pointer; }

/* the play mark: on the frame, bottom left, the way a slate sits in a corner */
.reel-go {
  position: absolute;
  left: 0.4rem;
  bottom: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(16, 15, 13, 0.72);
  border: 1px solid rgba(247, 245, 239, 0.5);
  color: #f7f5ef;
  font-family: var(--cue);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.42rem 0.6rem;
  cursor: pointer;
}
.reel-go:hover { background: var(--mark); border-color: var(--mark); }
.reel-go .tri {
  width: 0;
  height: 0;
  border-left: 0.42rem solid currentColor;
  border-top: 0.27rem solid transparent;
  border-bottom: 0.27rem solid transparent;
}
.reel-go[data-playing="1"] .tri {
  border: 0;
  width: 0.4rem;
  height: 0.5rem;
  background: currentColor;
}
.reel-go[hidden] { display: none; }
.reel-plate[data-playing="1"] .reel-go { opacity: 0.35; }
.reel-plate[data-playing="1"]:hover .reel-go { opacity: 1; }

.reel figcaption {
  margin-top: 0.42rem;
  font-family: var(--cue);
  font-size: 0.66rem;
  line-height: 1.34;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

.m-label {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  font-size: 0.63rem;
}

/* one word, set in the margin's own type, in place of a grey browser widget */
.play {
  background: none;
  border: 0;
  padding: 0.1rem 0;
  margin-top: 0.18rem;
  font-family: var(--cue);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  cursor: pointer;
  border-bottom: 1px solid var(--rule-firm);
}
.play:hover { color: var(--mark); border-bottom-color: var(--mark); }
.play[data-playing="1"] { color: var(--mark); border-bottom-color: var(--mark); }
.play[hidden] { display: none; }

/* ── the voice: three recordings, plainly presented ────────────────────────────
 *
 * David, 31 Jul, explicitly: this block must be well presented. So three numbered
 * cards, each saying what it is in words a person recognises, with a play button
 * that says Play and a pick button that says what picking does. The chosen one is
 * filled in the reviewer's own colour and its button reads pressed, so which voice
 * is selected is never a matter of noticing a tint.
 *
 * A hairline fills under a card while it plays. That is the whole of the transport:
 * no waveform, no scrubber, no player chrome.
 */

.reads-row { margin-top: 2.4rem; }
.reads-row[hidden] { display: none; }
.reads { padding-top: 1.6rem; border-top: 1px solid var(--rule); }

.voices { display: grid; gap: 0.6rem; margin-top: 1.1rem; }

.voice {
  position: relative;
  background: var(--lift);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.85rem 0.9rem 0.9rem;
}
.voice-n {
  font-family: var(--cue);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.22rem;
  font-variant-numeric: tabular-nums;
}
.voice-what {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
/* The native reviewer's recommendation, shown to the client approver on the voice
 * card. The same small-caps eyebrow the room uses for every kind label, in the
 * proof-correction red so it reads as a mark, not decoration. */
.voice-rec {
  font-family: var(--cue);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mark);
  margin: 0.15rem 0 0;
}
.voice .acts { margin-top: 0.7rem; }
/* with no script running the native element is the control, and it works */
.voice audio { width: 100%; max-width: 20rem; height: 2.1rem; margin-top: 0.7rem; display: block; }
.voice audio[data-hidden="1"] { display: none; }

/* the transport, drawn in the page's own hairline: one rule that fills */
.voice-bar {
  --at: 0%;
  height: 2px;
  margin-top: 0.75rem;
  background: var(--rule);
  display: none;
}
.voice[data-playing="1"] .voice-bar { display: block; }
.voice-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 120ms linear;
}

.voice[data-picked="1"] {
  border-color: var(--mark);
  background: var(--mark-wash);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.voice[data-picked="1"] .voice-n { color: var(--mark); }

/* ── the read: the body of the script ──────────────────────────────────────── */

.script { margin-top: 2.9rem; }

.beat {
  border-top: 1px solid var(--rule-firm);
  padding-top: 0.95rem;
  margin-top: 2.2rem;
  break-inside: avoid;
}
.beat:first-child { margin-top: 0; }

/* A plain word and its timing, or the timing alone. The empty span holds the clock
 * to the right edge on a beat we are not willing to name in front of a reviewer. */
.beat-head {
  font-family: var(--cue);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.beat-head > span:first-child { white-space: nowrap; }
.beat-head .clock {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.07em;
  font-weight: 500;
}

/* ── one row ───────────────────────────────────────────────────────────────────
 *
 * The same anatomy on every page and for every kind of line: what it is, the
 * wording, one gloss, three buttons. That sameness is what makes a page of them read
 * as connected script rather than as a scatter of blocks, and it is the fix for the
 * unvoiced page, whose labels floated in a column of air beside oceans of whitespace.
 * Rows are separated by a hairline, not by a void: a rule joins, a gap scatters.
 */

.item {
  position: relative;
  border-top: 1px solid var(--rule);
  padding: 0.85rem 0 0.95rem;
}
.beat .item:first-of-type { border-top: 0; padding-top: 0.1rem; }

/* ── what this row is ──────────────────────────────────────────────────────────
 *
 * One short tag, in one piece, at the row's own left edge, on the row's own grid.
 * David, 31 Jul, screenshotted what it replaces: "ON SCREEN" broken over two lines,
 * right-aligned in a gutter column of its own, sitting off the baseline of the line
 * it was supposed to be naming. A label that needs its own column is not a label,
 * it is furniture, and a label that wraps has stopped being a tag.
 */
.eyebrow {
  font-family: var(--cue);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.32rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the reviewer's own mark, drawn in the gutter so it costs the read no space at all:
 * a tick where they have said a line sounds right, a point where they left a note. */
.gmark { display: block; position: relative; height: 0; line-height: 0; }
[data-item][data-accepted="1"] .gmark::before,
[data-item][data-noted="1"]:not([data-accepted="1"]) .gmark::before {
  position: absolute;
  left: -1.15rem;
  top: 0.1em;
  font-family: var(--cue);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mark);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
[data-item][data-accepted="1"] .gmark::before { content: "✓"; }
[data-item][data-noted="1"]:not([data-accepted="1"]) .gmark::before { content: "•"; }
/* the second read's own mark, in the same gutter and the same hand */
[data-item][data-wrong="1"] .gmark::before {
  content: "✗";
  position: absolute;
  left: -1.15rem;
  top: 0.1em;
  font-family: var(--cue);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mark);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* the line as the film says it, in the face the film is set in */
.line-text {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
[data-item][data-changed="1"] .line-text { color: var(--mark); }

/* ── the pieces of a design, at the artwork's own scale ────────────────────────
 *
 * A headline is display type in the campaign's face; a chat thread reads as a
 * thread in the app's face; app chrome is small; a menu bar is one compact line;
 * a button wears a button's shape. The English sits under each piece once, in the
 * same arrangement.
 */
.piece-display {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.18;
}
.piece-lead { font-size: 1.2rem; font-weight: 500; }
.piece-chat {
  display: inline-block;
  font-family: var(--text);
  font-size: 0.95rem;
  line-height: 1.4;
  background: var(--lift);
  border: 1px solid var(--rule);
  border-radius: 14px 14px 14px 4px;
  padding: 0.48rem 0.8rem;
  max-width: 24rem;
}
.piece-chrome { font-family: var(--text); font-size: 0.87rem; line-height: 1.45; }
.piece-menubar { font-family: var(--text); font-size: 0.87rem; line-height: 1.5; white-space: normal; }
.piece-button {
  display: inline-block;
  font-family: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--rule-firm);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  background: var(--lift);
}

/* the one plain line under each family heading on the designs list */
.family-line {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--mute);
  margin: 0.3rem 0 0.2rem;
  max-width: 30rem;
}
.design-line { grid-template-columns: minmax(0, 1fr) auto; }

/* a design's artwork beside its words, where the delivery carries artwork */
.design { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); column-gap: var(--gap); align-items: start; }
.design-art { margin: 2rem 0 0; }
.design-art img { max-width: 100%; height: auto; display: block; border: 1px solid var(--rule-firm); }

.struck {
  font-family: var(--display);
  color: var(--mute);
  text-decoration: line-through;
  text-decoration-color: var(--mark);
  text-decoration-thickness: 1px;
  letter-spacing: -0.008em;
  margin: 0 0 0.15rem;
  font-size: 0.98rem;
}
.struck[hidden] { display: none; }

/* One gloss, never two. The page used to stack the English source and the
 * back-reading, near-identical sentences a reviewer had to tell apart. */
.gloss {
  font-style: italic;
  color: var(--mute);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0.28rem 0 0;
  max-width: 30rem;
}
.gloss[hidden] { display: none; }

/* what the machine has to say about the line, in words, where the reviewer is
 * looking. It was in the margin, which on a phone is somewhere else entirely. */
.say {
  font-family: var(--text);
  font-size: 0.79rem;
  line-height: 1.45;
  color: var(--mute);
  margin: 0.3rem 0 0;
}
.say[hidden] { display: none; }
.say[data-tone="over"] { color: var(--mark); font-weight: 500; }
[data-item][data-open="1"] .row-say { display: none; }

/* ── the three actions ─────────────────────────────────────────────────────────
 *
 * Always visible, always labelled, one tap each. David, 31 Jul: "the Good and Note
 * and Close actions are some of the worst UI I have ever seen", and before that a
 * line lit up white, then took a grey hover, and only gave up its options on a
 * second click. Nothing here is revealed and nothing waits. Buttons that look like
 * buttons, in the paper's own hairline weight, with the glyph drawn to the same
 * stroke as every rule on the page.
 */

.acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.68rem;
}

.act {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  background: var(--lift);
  border: 1px solid var(--rule-firm);
  border-radius: 2px;
  padding: 0.5rem 0.8rem;
  min-height: 2.35rem;
  font-family: var(--cue);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  cursor: pointer;
  transition: color 90ms linear, border-color 90ms linear, background 90ms linear;
}
.act .g {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--faint);
}
.act:hover { border-color: var(--ink); color: var(--ink); }
.act:hover .g { color: var(--ink); }

/* a mark she has made: the reviewer's own colour, filled, and it stays revertible */
.act[aria-pressed="true"] {
  border-color: var(--mark);
  color: var(--mark);
  background: var(--mark-wash);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.act[aria-pressed="true"] .g { color: var(--mark); }

/* a panel she has opened: ink, unfilled, plainly a different state from a mark */
.act[aria-expanded="true"] {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper);
}
.act[aria-expanded="true"] .g { color: var(--ink); }

.act-wide { padding-left: 1.05rem; padding-right: 1.05rem; }

/* A row that has other wordings says so on the button, and the button is drawn
 * as an offer rather than a repair. Ink, not grey: it is the one thing on the
 * row a reviewer might not know is there.
 */
.act-ways { border-color: var(--ink); color: var(--ink); }
.act-ways .g { color: var(--ink); }

/* The film's own verdict, which is the weightiest thing on the page.
 *
 * Drawn like the line buttons it sat among, it read as a fourth small option
 * rather than the moment a reviewer approves a whole film. It takes the
 * primary weight the room gives a way forward, and keeps the marked state.
 */
.act-wide[data-approve-film] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  padding: 1.05rem 1.35rem;
  margin-top: 0.5rem;
}
.act-wide[data-approve-film] .g { color: var(--paper); }
.act-wide[data-approve-film][aria-pressed="true"] {
  background: var(--mark);
  border-color: var(--mark);
  color: var(--paper);
}
.act-wide[data-approve-film][aria-pressed="true"] .g { color: var(--paper); }

/* The voice the first read chose, named on the card in the second read. It is a
 * statement and not a control, so it is not drawn as one.
 */
.chosen {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  padding: 0.5rem 0;
  font-family: var(--cue);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mark);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.chosen[hidden] { display: none; }
.voice-acts { margin-top: 1.1rem; }
.voice-acts[hidden] { display: none; }

/* ── the panels ────────────────────────────────────────────────────────────────
 *
 * One honest panel per action. A real field carrying the line as it stands, the
 * English beside it, the alternatives under it, and buttons that name what they do.
 * The note field is one of these too: it was "terrible design, absolutely terrible"
 * as a raw red-ringed textarea floating under a row, and it is a framed field on a
 * labelled panel now, in the same hand as everything else on the page.
 */

.panel {
  margin-top: 0.55rem;
  background: var(--lift);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.85rem 0.9rem 0.9rem;
}
.panel[hidden] { display: none; }

.panel-label {
  display: block;
  font-family: var(--cue);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 0.38rem;
}
.opts + .panel-label,
.panel-src + .panel-label { margin-top: 0.9rem; }

.field {
  display: block;
  width: 100%;
  background: #fff;
  border: 1px solid var(--rule-firm);
  border-radius: 2px;
  padding: 0.72rem 0.8rem;
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--ink);
  /* no drag handle and no inner scroll: the field grows with what is written, and
   * a corner grip on a script page is a browser widget, the one thing this room
   * has none of */
  resize: none;
  overflow: hidden;
  min-height: 3rem;
}
/* Focus goes to ink, not to the mark. The mark is printer's red and it means
 * something is wrong or something has been struck; a red ring drawn around the box
 * the reviewer is typing into reads as a rejection of what she is typing. */
.field:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(27, 26, 23, 0.08);
}
/* The reviewer's own words, in the proof-correction colour, in a proper field.
 *
 * David, 31 Jul, on the second pass: the note field is designed, not defaulted. It
 * carries its own label, it has room to write in, it is set in the room's own hand at
 * a comfortable size, it does not offer a drag handle, and it keeps the panel pattern:
 * Save and Cancel, named, under it.
 */
.field-note {
  font-family: var(--text);
  font-style: italic;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--mark);
  min-height: 4.6rem;
  background: #fff;
}
.field-note::placeholder { color: var(--faint); font-style: italic; }

.panel-src {
  font-family: var(--text);
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--mute);
  margin: 0.5rem 0 0;
}
.panel-src .k {
  display: block;
  font-style: normal;
  font-family: var(--cue);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.1rem;
}

/* ── the alternatives, with their differences lit ──────────────────────────────
 *
 * They differ from the line by a word or two, and that difference IS the decision.
 * A flat pile of near identical lines behind tiny OR tags asked the reviewer to
 * diff them in her head. So each option sits back in mute, and only the words that
 * actually change come forward in ink on the mark's own wash. The eye lands on the
 * choice before it has finished reading the line.
 */

.opts { display: grid; gap: 0.35rem; margin-top: 0.4rem; }
.opt {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.52rem 0.62rem;
  font: inherit;
  cursor: pointer;
}
.opt:hover { border-color: var(--rule-firm); }
.opt-line {
  display: block;
  font-family: var(--display);
  font-size: 0.99rem;
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--mute);
}
.opt-line .d {
  color: var(--ink);
  font-weight: 500;
  background: var(--mark-wash);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.08em 0.16em;
  margin: 0 -0.02em;
  border-radius: 1px;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.opt-gloss {
  display: block;
  font-style: italic;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--faint);
  margin-top: 0.22rem;
}

/* the consequence, said where the change is made and nowhere else */
.panel-warn {
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink);
  border-left: 2px solid var(--mark);
  padding-left: 0.62rem;
  margin: 0.85rem 0 0;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.panel-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.85rem;
}

.btn-go {
  font-family: var(--cue);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 0.55rem 0.95rem;
  min-height: 2.35rem;
  cursor: pointer;
}
.btn-go:hover { background: var(--mark); border-color: var(--mark); }

.btn-quiet {
  font-family: var(--cue);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0.55rem 0;
  color: var(--mute);
  cursor: pointer;
}
.btn-quiet:hover { color: var(--ink); border-bottom-color: var(--ink); }
.btn-quiet[hidden] { display: none; }

/* ── a repeated line, decided on the step ──────────────────────────────────────
 *
 * Set as it will appear, with one sentence saying where it was decided and a link to
 * where it can be changed. What used to sit here instead: a device the step had no
 * entry for explaining that it had no entry, the brand mark explaining that it never
 * changes, and the campaign line explaining itself under every instance in every
 * film in every market.
 */
.lockup {
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  padding: 0.42rem 0.65rem;
  border: 1px solid var(--rule-firm);
  background: var(--lift);
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.status {
  font-family: var(--text);
  font-size: 0.84rem;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--mute);
  border-left: 1px solid var(--rule-firm);
  padding-left: 0.68rem;
  margin: 0.5rem 0 0;
  max-width: 30rem;
}
.status a { color: var(--ink); }

/* ── the campaign line, all three routes ───────────────────────────────────────
 *
 * The one block on the step that is not a decision. Three routes, presented level,
 * each set the way the card would set it, with what it does in a sentence. Her tap
 * is an opinion and the last line says so.
 */
.campaign { margin-top: 2.4rem; }
.campaign .funnel-head { margin-top: 0; }
.routes { display: grid; gap: 0.6rem; margin-top: 0.95rem; }
.route {
  background: var(--lift);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.85rem 0.9rem 0.9rem;
}
.route-line {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: 0.05em;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.route-en {
  font-style: italic;
  font-size: 0.82rem;
  color: var(--mute);
  margin: 0.32rem 0 0;
}
.route-does {
  font-size: 0.89rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0.5rem 0 0;
  max-width: 30rem;
}
.route .act { margin-top: 0.75rem; }
.route[data-picked="1"] {
  border-color: var(--mark);
  background: var(--mark-wash);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.campaign-final {
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--mute);
  border-left: 1px solid var(--rule-firm);
  padding-left: 0.7rem;
  margin: 1.05rem 0 0;
  max-width: 30rem;
}

/* ── the statics sheet ─────────────────────────────────────────────────────────
 *
 * A copy sheet from a studio, grouped the way the client's own workbook groups it.
 * Same rows, same buttons, same panels. What is absent is the point of it: there is
 * no clock in this margin, because a poster is not cut to a beat.
 */

.statics .artwork { margin-top: 2rem; }
.statics .beat-head .clock { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.66rem; }
/* a piece drawn on several lines keeps its returns, on screen and on paper */
.statics-item .line-text,
.statics-item .gloss,
.echo-line { white-space: pre-wrap; }

/* a repeated row. A cross reference to where it is set, never a second field. */
.echo {
  border-top: 1px solid var(--rule);
  padding: 0.8rem 0 0.85rem 0.9rem;
  border-left: 1px solid var(--rule);
  color: var(--mute);
}
.echo-line { font-family: var(--display); font-size: 0.94rem; letter-spacing: -0.008em; margin: 0; color: var(--mute); }
.echo-note {
  font-family: var(--cue);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--faint);
  margin: 0.28rem 0 0;
}
.echo-note a { color: var(--mute); }

/* ── the margin, under the contract ────────────────────────────────────────────
 *
 * At most one question from us, and the reviewer's own note. Nothing else lives
 * here any more: no timings, no meters, no editor notes, no states of the work.
 */

.m-block + .m-block { margin-top: 0.62rem; }
.m-cue { color: var(--mute); }

/* A question, and the only thing on these pages that keeps the red mark, because it
 * is the only thing that wants an answer from the reviewer. */
.m-query { color: var(--ink); }
.m-query::before {
  content: "?";
  color: var(--mark);
  font-weight: 600;
  margin-right: 0.3rem;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.m-note {
  color: var(--mark);
  font-family: var(--text);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0;
  line-height: 1.4;
}
.m-note[hidden] { display: none; }

/* ── step one: the repeated lines ────────────────────────────────────────────
 *
 * The same row as a script line, with the English it stands for as the eyebrow and
 * its reach in the margin. The two headings it used to be split under are gone with
 * the spoken entries that made them necessary.
 */

.recurring .line-text { font-size: 1.16rem; }
.recurring:first-of-type { border-top-color: var(--rule-firm); }

.step-finish { margin-top: 3rem; border-top: 2px solid var(--ink); padding-top: 1.4rem; }
.step-finish .sign-btn[hidden] { display: none; }

/* ── the welcome ───────────────────────────────────────────────────────────────
 *
 * What the market link opens, once. The shortest way to say what we are asking a
 * native speaker is to show it, so the page opens on one real line from her own
 * market, set the way the film sets it, with its English under it and the question
 * under that: artefact, then evidence, then the ask, reading down and getting
 * smaller. Everything below is quiet, because that block is where the boldness went.
 */

.specimen {
  margin: 1.9rem 0 0;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--rule);
}
.spec-line {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.6rem, 6vw, 2.3rem);
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.spec-en {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--mute);
  margin: 0.6rem 0 0;
  max-width: 28rem;
}
.welcome h1 {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.32;
  letter-spacing: -0.022em;
  margin: 0;
  max-width: 24rem;
}
.lede {
  font-size: 1rem;
  line-height: 1.58;
  color: var(--ink);
  max-width: 30rem;
  margin: 0.8rem 0 0;
}
.welcome-note { margin-top: 0.75rem; }

/* the steps are a second movement, so they start on their own air */
.welcome .label { margin-top: 2.7rem; }
.wstep { margin-top: 1.15rem; }
.wstep-go {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  column-gap: 0.6rem;
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--rule-firm);
  padding-top: 0.62rem;
}
.wstep-go .n {
  grid-column: 1;
  font-family: var(--cue);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.wstep-go .what {
  grid-column: 2;
  font-family: var(--cue);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.wstep-go .cost {
  grid-column: 2;
  font-family: var(--cue);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  color: var(--mute);
  margin-top: 0.2rem;
}
.wstep-go:hover .what { color: var(--mark); }
.wstep .says {
  margin: 0.42rem 0 0 2.5rem;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--mute);
  max-width: 27rem;
}

.wstart { margin-top: 2.1rem; }
a.sign-btn { display: inline-block; text-decoration: none; }
.wstart .after {
  font-family: var(--cue);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--mute);
  margin: 0.95rem 0 0;
}

/* ── the films ─────────────────────────────────────────────────────────────── */

.films { margin-top: 2.2rem; }
/* One rule between groups, never two.
 *
 * A list row closes with its own rule, so a section head that also draws one puts
 * two rules a gap apart and the list reads as if something is missing between them.
 * The head keeps its air and drops its rule; the first head needs neither.
 */
.films .funnel-head { border-top: 0; padding-top: 0; margin-top: 2.1rem; }
.films > .row:first-child .funnel-head { margin-top: 0; }
.funnel-head {
  font-family: var(--cue);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  color: var(--mark);
  border-top: 1px solid var(--rule-firm);
  padding-top: 0.8rem;
  margin: 2.3rem 0 0.35rem;
}
.contents-line {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.contents-line:hover .title { color: var(--mark); }
/* design rows carry no code: the name owns the wide column, the state sits right */
.design-line { grid-template-columns: minmax(0, 1fr) auto; }
.design-line .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contents-line .no {
  font-family: var(--cue);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.contents-line .title { font-size: 1.06rem; line-height: 1.35; }
.contents-line .state {
  font-family: var(--cue);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  color: var(--mute);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.contents-line .state:empty { display: none; }
.contents-line .state[data-done="1"] { color: var(--ink); font-weight: 600; }

/* sign-off */

.signoff {
  margin-top: 3.4rem;
  border-top: 2px solid var(--ink);
  padding-top: 1.2rem;
}
.signoff h2 {
  font-family: var(--cue);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  margin: 0 0 0.7rem;
}
.signoff p { font-size: 1rem; line-height: 1.5; max-width: 31rem; margin: 0 0 0.7rem; color: var(--mute); }
/* The client approver's two sign-offs each carry one line above the button saying
 * what the approval means. Same measure and colour as the signoff paragraph. */
.approve-hint { font-size: 1rem; line-height: 1.5; max-width: 31rem; margin: 0 0 0.7rem; color: var(--mute); }
/* The client approver's name and email, captured on the sign-off for attribution. */
.approver-fields { margin: 0.5rem 0 1rem; max-width: 31rem; }
.approver-label { display: block; font-family: var(--cue); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.6rem; }
.field-approver { display: block; width: 100%; font-family: var(--text); font-size: 1rem; padding: 0.6rem 0.7rem; border: 1px solid var(--rule-firm); border-radius: 2px; background: var(--lift); margin-top: 0.3rem; }
.field-approver:focus { outline: none; border-color: var(--ink); }
.approver-note { font-size: 0.85rem; color: var(--mute); margin: 0.4rem 0 0; }
/* Round 3 line notes: small, quiet note button after each script line */
.act-line-note { font-size: 0.58rem; padding: 0.3rem 0.5rem; margin-top: 0.3rem; min-height: auto; opacity: 0.5; }
.act-line-note:hover { opacity: 1; }
.pline .panel, .pcard .panel { margin-top: 0.4rem; }

/* The voice gate's one line: the reviewer's own unfinished work, the films named as
 * links. Each link clears a thumb's height without breaking the sentence.
 */
.gate-line {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink);
  border-left: 2px solid var(--mark);
  padding-left: 0.7rem;
  margin: 0.2rem 0 1rem;
  max-width: 31rem;
}
.gate-line[hidden] { display: none; }
.gate-line a {
  display: inline-block;
  font-family: var(--cue);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* inline-block padding and the tracking on the last glyph both push the comma
   * and the closing stop off the word; the tap area comes from vertical padding */
  /* codes read as chips, so they are spaced rather than punctuated: commas fight
   * the tracking and a closing stop orphans itself after the last one */
  margin-right: 0.45em;
  padding: 0.72rem 0;
  margin-top: -0.62rem;
  margin-bottom: -0.62rem;
}

.sign-btn {
  font-family: var(--cue);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: none;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.7rem 1.3rem;
  cursor: pointer;
}
.sign-btn:hover { background: var(--ink); color: var(--paper); }
.sign-btn[disabled] { opacity: 0.4; cursor: default; }
.sign-btn[disabled]:hover { background: none; color: var(--ink); }

/* a finished thing, not an alarm */
.signed {
  font-family: var(--cue);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-top: 0.7rem;
}
.signed[hidden] { display: none; }

/* ── foot ──────────────────────────────────────────────────────────────────── */

.foot {
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--cue);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--mute);
  line-height: 1.6;
}
.foot:empty { display: none; }
.foot a { color: var(--mute); }

.open-items { margin-top: 2.8rem; }
.open-items .label { color: var(--mute); }
.open-items .task { margin: 0 0 0.7rem; }
.open-items ul { margin: 0; padding: 0; list-style: none; }
.open-items li {
  font-size: 0.95rem;
  line-height: 1.45;
  padding: 0.3rem 0 0.3rem 0.9rem;
  border-left: 2px solid var(--rule-firm);
  margin-bottom: 0.3rem;
  color: var(--ink);
}
.open-items li .named {
  font-family: var(--cue);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--mute);
}

/* saving state, quiet, never a toast */
.pulse {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--mark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease, opacity 400ms ease;
  opacity: 0;
  z-index: 5;
}
.pulse[data-state="busy"] { transform: scaleX(0.4); opacity: 1; }
.pulse[data-state="done"] { transform: scaleX(1); opacity: 0; }
.pulse[data-state="fail"] { transform: scaleX(1); opacity: 1; background: var(--ink); }

.trouble {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--cue);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.7rem 1.2rem;
  z-index: 6;
}
.trouble[hidden] { display: none; }

/* ── phone: the margin comes under the row, the measure never breaks ───────────
 *
 * Scoped to screen on purpose. A4 measures 794 CSS px across, so an unscoped width
 * query matches the printed page too and would take the margin's cues and queries
 * off the paper. Print is the honesty test; it gets the whole margin.
 */

@media screen and (max-width: 900px) {
  body { font-size: 19px; }
  .sheet { padding: 1.6rem 1.15rem 5rem; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .row > .margin { grid-column: 1; }
  /* A film's title is its opening English line and some of them run three lines at
   * 2rem, which spent the whole first screen before the reviewer saw the film. */
  h1 { font-size: 1.62rem; }
  h1.quiet { font-size: 1.5rem; }
  .welcome h1 { font-size: 1.42rem; }

  /* three steps still read as three columns on a handset: they are three short
   * names and putting them under each other would cost the whole first screen */
  .rail { gap: 0 0.7rem; margin-bottom: 2.1rem; }
  .rail .what { font-size: 0.6rem; letter-spacing: 0.085em; }
  .rail .how, .rail .n { font-size: 0.6rem; }

  /* the reference block stacks, film first, and both labels still sit on content */
  .ref { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; margin-top: 1.7rem; }
  .ref-script { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.3rem; }
  .ref[data-cuts="2"] { grid-template-columns: minmax(0, 1fr); }
  .reel-strip { gap: 0.6rem; }
  .reel-strip[data-films="1"] .reel { flex: 0 1 58vw; max-width: 58vw; }

  /* the margin belongs to its row, so on a phone it arrives under it, ruled to it */
  .item > .margin {
    padding-top: 0;
    margin-top: 0.7rem;
    border-left: 2px solid var(--rule);
    padding-left: 0.75rem;
  }
  .row > .margin:empty { display: none; }
  [data-item][data-accepted="1"] .gmark::before,
  [data-item][data-noted="1"]:not([data-accepted="1"]) .gmark::before { left: -0.85rem; }

  /* Thumbs, not cursors: every control on the page clears 44px, measured on the
   * deployed pages rather than assumed. Cancel came in at 35, the sign-off at 38 and
   * the play mark on the film at 25, which is a fingernail.
   */
  .act { font-size: 0.63rem; letter-spacing: 0.08em; padding: 0.6rem 0.72rem; min-height: 2.75rem; }
  .btn-go { min-height: 2.75rem; padding: 0.65rem 1rem; }
  .btn-quiet { min-height: 2.75rem; padding: 0.65rem 0; }
  .sign-btn { min-height: 2.75rem; padding: 0.85rem 1.3rem; }
  .reel-go { min-height: 2.75rem; padding: 0 0.8rem; }
  .panel { padding: 0.9rem 0.9rem 0.95rem; }
  .field { min-height: 3.4rem; font-size: 1.05rem; }
  /* the note is written in, not filled in: it keeps its room on a phone too */
  .field-note { min-height: 5.4rem; }

  .voice audio { max-width: none; }
  .contents-line { grid-template-columns: 3.2rem minmax(0, 1fr); row-gap: 0.15rem; padding: 0.7rem 0; }
  .contents-line .state { grid-column: 2; }
  .design-line { grid-template-columns: minmax(0, 1fr); }
  .design { grid-template-columns: minmax(0, 1fr); }

}

/* German voice comparison. It inherits the Caliba shell and keeps the task as one
 * uninterrupted listening list. The two recordings are columns, not cards, so the
 * choice remains the content rather than the container. */
.voice-compare {
  --measure: 58rem;
  max-width: 64rem;
  padding-bottom: 8rem;
}

.voice-compare .head .where { width: min(100%, 960px); }

.compare-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin: 3.75rem 0 4.5rem;
}

.compare-intro h1 {
  max-width: none;
  margin-bottom: 0.55rem;
  font-size: clamp(2.5rem, 7vw, 4.7rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.compare-intro .standfirst { margin: 0; color: var(--ink-soft); }

.compare-progress {
  flex: none;
  margin: 0 0 0.35rem;
  color: var(--ink-soft);
  font-size: 0.83rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.compare-list { border-top: 1px solid var(--rule-firm); }

.compare-item {
  padding: 2.8rem 0 3.1rem;
  border-bottom: 1px solid var(--rule-firm);
}

.compare-item-head {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 1.55rem;
}

.compare-item-head h2 {
  margin: 0;
  max-width: 36rem;
  font-family: var(--display);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.18;
  text-wrap: balance;
}

.compare-count {
  color: var(--mute);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.compare-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-left: 5.2rem;
  border: 1px solid var(--rule-firm);
  border-radius: 14px;
  overflow: hidden;
}

.compare-option {
  min-width: 0;
  padding: 1.25rem;
  background: var(--panel);
  transition: background 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.compare-option + .compare-option { border-left: 1px solid var(--rule-firm); }
.compare-option[data-chosen="1"] { background: var(--mark-wash); box-shadow: inset 0 -3px 0 var(--mark); }

.compare-options[data-single="true"] {
  display: block;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.compare-options[data-single="true"] .compare-option {
  max-width: 32rem;
  padding: 0;
  background: transparent;
}

.compare-options[data-single="true"] audio { margin-bottom: 0; }

.compare-label {
  margin: 0 0 0.8rem;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 600;
}

.compare-option audio {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  margin: 0 0 0.9rem;
  color-scheme: dark;
}

.compare-pick,
.compare-note-toggle,
.compare-note-save,
.compare-note-cancel {
  min-height: 2.75rem;
  border-radius: 8px;
  font-family: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.compare-pick {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule-firm);
  background: var(--surface-raised);
  color: var(--ink);
}

.compare-pick:hover { border-color: var(--ink-soft); }
.compare-pick[aria-pressed="true"] { border-color: var(--mark); background: var(--mark); color: var(--paper); }

.compare-pick:disabled,
.compare-note-toggle:disabled,
.compare-note-save:disabled,
.compare-note-cancel:disabled { cursor: wait; opacity: 0.56; }

.compare-note-row,
.compare-note-panel,
.compare-status { margin-left: 5.2rem; }

.compare-note-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.95rem;
}

.compare-note-toggle,
.compare-note-cancel {
  padding: 0.55rem 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--rule-firm);
  text-underline-offset: 4px;
}

.compare-note-toggle:hover,
.compare-note-cancel:hover { color: var(--ink); text-decoration-color: var(--ink); }

.compare-saved-note {
  margin: 0;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.5;
}

.compare-note-panel {
  margin-top: 0.8rem;
  max-width: 35rem;
}

.compare-note-panel label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 600;
}

.compare-note-panel textarea {
  display: block;
  width: 100%;
  min-height: 7rem;
  resize: vertical;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--rule-firm);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
}

.compare-note-panel textarea::placeholder { color: var(--mute); opacity: 1; }

.compare-note-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.65rem; }

.compare-note-save {
  padding: 0.65rem 1rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.compare-status {
  margin-top: 0.55rem;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.compare-status[data-state="error"],
.compare-status[data-state="pending"] { color: var(--mark); }

@media (max-width: 720px) {
  .voice-compare { padding-right: 1.25rem; padding-left: 1.25rem; }
  .compare-intro { display: block; margin: 2.6rem 0 3.1rem; }
  .compare-progress { margin-top: 1.25rem; }
  .compare-item { padding: 2.25rem 0 2.6rem; }
  .compare-item-head { grid-template-columns: 1fr; gap: 0.35rem; }
  .compare-options { grid-template-columns: 1fr; margin-left: 0; }
  .compare-option + .compare-option { border-top: 1px solid var(--rule-firm); border-left: 0; }
  .compare-option { padding: 1rem; }
  .compare-note-row,
  .compare-note-panel,
  .compare-status { margin-left: 0; }
  .compare-note-row { display: block; }
  .compare-saved-note { margin-top: 0.35rem; }
}

/* ── the proof: the finished scripts ───────────────────────────────────────────
 *
 * Every other page in this room is a working surface: a measure, a margin, and marks
 * in it. This one is the document those pages were for, so it drops the margin
 * entirely and becomes what it will be on paper: a set of sheets, one per film, each
 * headed and each read straight through.
 *
 * The leaf is the whole idea. On screen it is a sheet of the lifted stock lying on the
 * paper ground, and in print it IS the page: the border goes, the ground goes, and
 * what is left is exactly what was on the screen. That is the honesty test the spec
 * sets, taken literally: the screen shows the print.
 */

.proof { max-width: 46rem; }

.leaf {
  background: var(--lift);
  border: 1px solid var(--rule);
  padding: 2.9rem 3rem 3.2rem;
  margin: 0 0 2.4rem;
}
.leaf:last-of-type { margin-bottom: 0; }

/* the head every sheet carries, so a page found on a desk says what it is */
.leaf-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--cue);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.6rem;
  margin-bottom: 1.9rem;
}
.leaf-head span:last-child { text-align: right; }

.leaf h1 { font-size: 2.1rem; margin-bottom: 0.7rem; }
.leaf .slug { margin-bottom: 0.5rem; }
.leaf .task { max-width: 28rem; margin-top: 0.2rem; }

/* what the reviewer chose, said once, at the front and never again */
.proof-choice {
  font-family: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  border-left: 2px solid var(--mark);
  padding-left: 0.7rem;
  margin: 1.5rem 0 0;
  max-width: 30rem;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.proof-choice[hidden] { display: none; }

/* the credits: what this film runs to, and whose voice reads it */
.credits {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.6rem;
  margin: 1.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.credits dt {
  font-family: var(--cue);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.18rem;
}
.credits dd {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.leaf .label { margin: 2.4rem 0 0.8rem; }

.proof-contents { list-style: none; margin: 0; padding: 0; }
.proof-contents li { border-top: 1px solid var(--rule); }
.proof-contents li:last-child { border-bottom: 1px solid var(--rule); }
.proof-contents a {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: baseline;
  padding: 0.6rem 0;
  text-decoration: none;
}
.proof-contents .n {
  font-family: var(--cue);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  letter-spacing: 0.06em;
}
.proof-contents .t {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.02rem;
  letter-spacing: -0.018em;
  color: var(--ink);
  line-height: 1.3;
}
.proof-contents .v {
  font-family: var(--cue);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: right;
}
.proof-contents a:hover .t { color: var(--mark); }

.leaf-go { margin: 2.2rem 0 0; font-family: var(--cue); font-size: 0.63rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.leaf-go a { color: var(--mute); text-decoration: none; border-bottom: 1px solid var(--rule-firm); padding-bottom: 2px; }
.leaf-go a:hover { color: var(--mark); border-color: var(--mark); }

/* the read itself: nothing between the lines, nothing to press on any of them */
.proof-script { margin-top: 2.1rem; }
.short-vo-proof { margin-top: 2.8rem; padding-top: 1.3rem; border-top: 1px solid var(--rule-firm); }
.short-vo-proof .proof-script { margin-top: 1.2rem; }
.pbeat { border-top: 1px solid var(--rule-firm); padding-top: 0.9rem; margin-top: 1.9rem; break-inside: avoid; }
.pbeat:first-child { margin-top: 0; }
.pbeat .beat-head { color: var(--mute); margin-bottom: 0.85rem; }

.pline { margin: 0 0 0.95rem; }
.pline:last-child { margin-bottom: 0; }
.pline .proof-text {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.14rem;
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* what the film shows rather than says: the same script, one rule in from it */
.pcard {
  margin: 0 0 0.95rem;
  border-left: 1px solid var(--rule-firm);
  padding-left: 0.95rem;
}
.pcard:last-child { margin-bottom: 0; }
.pcard .eyebrow { color: var(--faint); margin-bottom: 0.22rem; }
.pcard .proof-text {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.4;
  letter-spacing: 0.012em;
  color: var(--ink);
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.pitem { margin: 0 0 0.95rem; }
.pitem .eyebrow { color: var(--faint); }

.proof .signoff { margin-top: 3rem; }

/* ── moving on, and getting back ───────────────────────────────────────────────
 *
 * Real boxed buttons at the foot of every page, labelled with actions, the film
 * code as the destination (David's ruling, 31 Jul). Next is the primary box; Back
 * and the list are quiet boxes in the room's cancel weight.
 */
.onward {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.7rem;
  align-items: center;
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule-firm);
}
.onward-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  background: var(--lift);
  border: 1px solid var(--rule-firm);
  border-radius: 2px;
  font-family: var(--cue);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
  white-space: nowrap;
}
.onward-btn:hover { border-color: var(--ink); color: var(--ink); }
.onward .onward-back { justify-self: start; }
.onward .onward-list { justify-self: center; }
.onward .onward-next {
  justify-self: end;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.onward .onward-next:hover { background: var(--mark); border-color: var(--mark); color: var(--paper); }

/* the record copy's own furniture: the way in on the cover, the bar on the page */
.print-line { margin: 2.2rem 0 0; }
.printbar { display: flex; gap: 0.7rem; margin: 0 0 1.8rem; }
.proof-stands {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--mute);
  margin: 0.45rem 0 0;
  max-width: 30rem;
}
.proof-stands[hidden] { display: none; }

@media screen and (max-width: 900px) {
  .proof { max-width: none; }
  .leaf { padding: 1.6rem 1.3rem 2rem; margin-bottom: 1.4rem; }
  .leaf h1 { font-size: 1.62rem; }
  .leaf-head { font-size: 0.55rem; letter-spacing: 0.14em; }
  .proof-contents a { grid-template-columns: 2rem minmax(0, 1fr); row-gap: 0.1rem; }
  .proof-contents .v { grid-column: 2; text-align: left; }
}

/* ── print is the honesty test ─────────────────────────────────────────────────
 *
 * The body prints as the script and the margin carries the furniture. Controls come
 * off; content never does. The gloss prints now, because it is the English beside
 * the beat that the spec asks a printed page to carry, and it lives on the row
 * rather than inside something that had to be opened.
 */

@media print {
  @page { margin: 15mm 13mm 16mm; }
  html, body { background: #fff; }
  body { font-size: 10.5pt; line-height: 1.4; }
  :root { --measure: 118mm; --margin-w: 44mm; --gap: 7mm; }
  .sheet { max-width: none; padding: 0; }

  /* controls come off; content never does */
  .acts, .pulse, .trouble, .head nav, .sign-btn, .reel-go, .play, .btn-go, .btn-quiet,
  .onward, .printbar, .print-line, .gate-line { display: none !important; }
  p { orphans: 2; widows: 2; }
  /* a panel is screen work. What the reviewer put INTO one is not, so a note she
   * has written prints, framed the way a margin note is framed. */
  .panel { display: none !important; }
  .panel[data-notepanel][data-has-text="1"] {
    display: block !important;
    background: none;
    border: 0;
    border-left: 2px solid var(--mark);
    padding: 0.2rem 0 0.2rem 0.5rem;
    margin-top: 0.4rem;
  }
  .panel[data-notepanel][data-has-text="1"] .field {
    border: 0;
    background: none;
    padding: 0;
    min-height: 0;
  }
  .route:not([data-picked="1"]) .act { display: none !important; }
  [data-item] .struck { display: block !important; }
  [data-item] .struck:empty { display: none !important; }
  /* every margin block prints, whatever the paper width computed to */
  [data-item] > .margin { display: block !important; }
  .margin { border: 0 !important; padding-left: 0 !important; }
  .margin .m-block { display: block !important; }
  /* the film prints as the frame itself, so the look of it is on the paper too */
  .reel video { display: none; }
  .reel-still { display: block; position: static; height: auto; }
  .reel-plate { border-color: #999; position: static; aspect-ratio: auto; }
  .ref-film { min-height: 0; max-height: none; display: block; }
  .voice audio, .voice-bar { display: none !important; }

  /* The proof prints as what it is. Every leaf is a page: the sheet's border and its
   * lifted ground come off, because on paper the page IS the sheet, and what is left
   * on the paper is exactly what was on the screen.
   */
  .proof { max-width: none; }
  /* the leaf carries its own head, so the app's letterhead is a second one on the
   * same sheet saying the same thing */
  .proof .head, .proof .rail, .leaf-go, .proof .signoff .sign-btn { display: none !important; }
  .leaf {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    break-before: page;
    max-width: none;
  }
  .leaf:first-of-type { break-before: auto; }
  .leaf-head { margin-bottom: 5mm; }
  .leaf h1 { font-size: 17pt; }
  .pbeat, .pline, .pcard, .pitem, .credits { break-inside: avoid; }
  /* a leaf that runs past its page breaks between beats, never leaving the closing
   * block alone on a near-blank page */
  .proof-script { margin-top: 1.2rem; }
  .pbeat { padding-top: 0.55rem; margin-top: 1.1rem; }
  .pline, .pcard, .pitem { margin-bottom: 0.55rem; }
  .credits { margin-top: 0.9rem; padding-top: 0.6rem; }
  .proof-script .pbeat:last-child { break-before: avoid-page; }
  /* no orphaned contents row and no lone block on a near-blank page */
  .proof-contents a { padding: 1.4mm 0; }
  .proof-contents li { break-inside: avoid; }
  .proof-contents { break-before: avoid; }
  .leaf .label { break-after: avoid; }
  .pbeat .beat-head { break-after: avoid; }

  .beat, .item, .recurring, .voice, .reads, .ref, .route { break-inside: avoid; }
  .echo { break-inside: avoid; }
  .statics-item { margin-bottom: 4mm; }
  h1, .beat-head { break-after: avoid; }
  /* room for a pen */
  .item { padding-bottom: 6mm; }
  .voice[data-picked="1"], .route[data-picked="1"], .opt-line .d { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  a { text-decoration: none; }
  .foot { page-break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Hostelworld letterhead. One spacing, from the flex gap on .head .where, and the
 * mark set as a block so its own box is the box that is centred. */
.hw-mark { height: 20px; width: auto; display: block; }
.hw-landing { width: 132px; height: auto; display: block; margin: 0 0 28px; }
.ov-row { margin: 10px 0; }
.ov-row a { text-decoration: underline; text-underline-offset: 3px; }
@media print { .hw-mark { height: 18px; } }


/* The landing poster: the campaign lockup, centred, and one line */
.poster { min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 24px; }
.poster-lockup { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pl-bubble { font-family: Poppins, sans-serif; font-weight: 700; font-size: clamp(28px, 6vw, 56px); letter-spacing: 0.02em; line-height: 1; padding: 0.42em 0.85em; border-radius: 999px; position: relative; }
.pl-white { background: #fff; color: #7D2FCA; box-shadow: 0 1px 0 rgba(0,0,0,0.04); }
.pl-orange { background: #EF531F; color: #fff; }
.pl-bubble::after { content: ""; position: absolute; bottom: -8px; width: 16px; height: 16px; background: inherit; border-bottom-right-radius: 999px; transform: skewX(-18deg); }
.pl-white::after { left: 14%; }
.pl-orange::after { right: 14%; }
.poster-pill { width: 108px; height: auto; margin: 52px 0 0; }
.poster-line { font-family: var(--cue); color: var(--mute, #8a8578); font-size: 15px; margin-top: 18px; }
@media (max-width: 600px) { .poster { min-height: 88vh; } }

/* ── controls clear a thumb, on every viewport ─────────────────────────────────
 *
 * The contract: every control 44px. This block sits last in the file on purpose,
 * so no component rule above it can quietly undercut a hit area. Visual size can
 * stay; padding does the work.
 */
.act,
.btn-go,
.btn-quiet,
.sign-btn,
.reel-go,
.onward-btn { min-height: 2.75rem; }
.contents-line { padding: 0.72rem 0; }
.proof-contents a { padding: 0.75rem 0; }
.status a,
.echo-note a,
.leaf-go a,
.signed a {
  display: inline-block;
  /* the tap area is vertical only: side padding pushes the sentence's own full
   * stop off the link and reads as a typing slip */
  padding: 0.95rem 0;
  margin: -0.78rem 0;
}
.gate-line a { padding: 0.95rem 0; margin: -0.78rem 0.45em -0.78rem 0; }

@media screen and (max-width: 900px) {
  .act, .btn-go, .btn-quiet, .sign-btn, .reel-go, .onward-btn { min-height: 2.75rem; }
  .contents-line { padding: 0.7rem 0; }
  .proof-contents a { padding: 0.72rem 0; }

  /* the foot stacks, the way on first, every button full width */
  .onward { grid-template-columns: 1fr; }
  .onward .onward-next { order: -1; justify-self: stretch; }
  .onward .onward-back { justify-self: stretch; }
  .onward .onward-list { justify-self: stretch; }
}


/* Since you were last here. Sits above the work, reads as a note from the room
 * and not as an alarm: rule, small caps head, two sentences, two ways in.
 */
.revisit { border-top: 1px solid var(--rule); padding-top: .6rem; margin: .2rem 0 1.8rem; }
.revisit-head { font: 500 .6rem/1.1 var(--display); letter-spacing: .12em; color: var(--mute);
  text-transform: uppercase; margin: 0 0 .4rem; }
.revisit-item { margin: 0 0 .3rem; font: 400 .86rem/1.5 var(--text); }
.revisit-item:last-child { margin-bottom: 0; }
.revisit-go { white-space: nowrap; font-weight: 500; text-decoration: none;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 1px; }
.act-new { font: 500 .62rem/1 var(--display); letter-spacing: .09em; text-transform: uppercase;
  font-style: normal; margin-left: .45rem; padding: .2rem .3rem .16rem;
  background: var(--ink); color: var(--paper); border-radius: 2px; }

/* Caliba studio shell */
.skip-link {
  position: fixed;
  z-index: 100;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  padding: 9px 12px;
  border-radius: 7px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - max(8px, env(safe-area-inset-top))));
  transition: transform 120ms ease;
}
.skip-link:focus-visible { outline-color: var(--paper); outline-offset: -3px; transform: translateY(0); }

.sheet { max-width: calc(var(--measure) + 6rem); padding-top: 0; }
.head {
  position: sticky;
  z-index: 30;
  top: 0;
  width: 100vw;
  min-height: calc(56px + env(safe-area-inset-top));
  margin-right: calc(50% - 50vw);
  margin-bottom: 2.5rem;
  margin-left: calc(50% - 50vw);
  padding: env(safe-area-inset-top) max(22px, env(safe-area-inset-right)) 0 max(22px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: blur(14px);
}
.head .where {
  display: grid;
  width: min(100%, 920px);
  min-height: 56px;
  margin: 0 auto;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
}
.caliba-brand { display: inline-flex; width: 54px; height: 18px; align-items: center; color: var(--ink); }
.caliba-mark { display: block; width: 54px; height: 16px; fill: currentColor; }
.project-name,
.review-context {
  min-width: 0;
  overflow: hidden;
  color: var(--mute);
  font-family: var(--text);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.review-context { justify-self: end; color: var(--ink-soft); }
.head .role { border-color: var(--active); color: var(--focus); border-radius: 7px; }

.rail .step:hover .what { color: var(--focus); }
.rail[data-here="1"] .step[data-step="1"],
.rail[data-here="2"] .step[data-step="2"],
.rail[data-here="3"] .step[data-step="3"],
.rail[data-here="4"] .step[data-step="4"] { border-top-color: var(--active); }
.rail[data-here="1"] .step[data-step="1"] .n,
.rail[data-here="2"] .step[data-step="2"] .n,
.rail[data-here="3"] .step[data-step="3"] .n,
.rail[data-here="4"] .step[data-step="4"] .n { color: var(--focus); }

.voice,
.panel,
.field,
.field-approver,
.leaf,
.route { border-radius: 9px; }
.voice,
.panel,
.field,
.field-approver { background: var(--surface); border-color: var(--rule-firm); color: var(--ink); }
.voice:hover { border-color: var(--rule-firm); background: var(--surface-raised); }
.voice audio { color-scheme: dark; }
.act,
.btn-go,
.btn-quiet,
.onward-btn { border-radius: 9px; }
.act { background: transparent; color: var(--ink-soft); }
.proof-script .act-line-note { color: var(--ink-soft); opacity: 1; }
.proof-script .eyebrow { color: var(--mute); }
.act:hover,
.btn-quiet:hover { border-color: var(--rule-firm); background: var(--surface-raised); color: var(--ink); }
.act[aria-expanded="true"] { background: var(--surface-raised); }
.btn-go,
.sign-btn,
.onward .onward-next {
  border-color: var(--ink);
  border-radius: 9px;
  background: var(--ink);
  color: var(--paper);
}
.btn-go:hover,
.sign-btn:hover,
.onward .onward-next:hover { border-color: var(--focus); background: var(--focus); color: var(--paper); }
.sign-btn[disabled]:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.gate-line { border-left-color: var(--mark); }
.pline,
.pcard,
.voice,
.signoff { scroll-margin-top: calc(72px + env(safe-area-inset-top)); }

.save-state {
  margin: 0.65rem 0 0;
  color: var(--mute);
  font-family: var(--text);
  font-size: 0.78rem;
  line-height: 1.45;
}
.save-state[hidden] { display: none; }
.save-state[data-state="saving"] { color: var(--focus); }
.save-state[data-state="saved"] { color: var(--ink-soft); }
.save-state[data-state="pending"],
.save-state[data-state="error"] { color: var(--mark); }
.shownote { padding: 0.7rem 0; color: var(--ink-soft); font-size: 0.9rem; }
.client-statics-confirm { margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--rule); }
.trouble,
.nudge { border-color: var(--rule-firm); border-radius: 9px; background: var(--surface-raised); color: var(--ink-soft); }
.client-readonly { max-width: 34rem; margin: 1rem auto 2rem; padding: 0.85rem 1rem; }
.pulse[data-state="busy"] { background: var(--active); }
.pulse[data-state="done"] { background: var(--ink-soft); }
.pulse[data-state="fail"] { background: var(--mark); }

@media screen and (max-width: 600px) {
  .sheet { padding-right: 1rem; padding-left: 1rem; }
  .head { margin-bottom: 2rem; padding-right: max(16px, env(safe-area-inset-right)); padding-left: max(16px, env(safe-area-inset-left)); }
  .head .where { gap: 0.6rem; }
  .project-name { max-width: 7.2rem; }
  .review-context { max-width: 5.7rem; }
  .head .role { padding: 0.25rem 0.4rem; font-size: 0.56rem; }
  .rail { gap: 0 0.6rem; }
  .rail .what { white-space: normal; }
}

@media print {
  .skip-link { display: none !important; }
  .head { position: static; width: auto; min-height: 0; margin-right: 0; margin-left: 0; padding: 0 0 0.7rem; background: none; backdrop-filter: none; }
}