/* Candela, "the screen". Three materials only: the room, the light, and the customer's brand.
   Two rooms switched by data-theme on <html>: the screening room (dark, default) and the
   daylight studio (light). One typeface, Archivo, across its width axis: condensed for the
   desk, full width at black weight for title cards, expanded for the name.
   See docs/design-proposal-v2-the-screen-2026-10-12.md. Every colour is a token below;
   nothing outside this block names a hex.
   Archivo loads from Google Fonts; self-hosting the woff2 under crates/api/ui/assets/
   comes with the enterprise tier. */
:root, [data-theme="dark"] {
  /* Softened for long reading: a warm charcoal room instead of black, and a muted candle for
     text, about 14:1 instead of 19:1, so letters don't glare or bleed. The secondary greys are
     lifted so they stay comfortably readable (the faintest is now 5.8:1, was 4.1:1). */
  --room: #151412; --room-rgb: 21 20 18;
  --light: #EAE2D2; --light-rgb: 234 226 210;           /* the colour temperature of a candle */
  --glow-rgb: 255 241 214;                              /* what halos are made of */
  --light-70: rgb(var(--light-rgb) / .8); --light-45: rgb(var(--light-rgb) / .6); --line: rgb(var(--light-rgb) / .14);
  --alarm: #FF4A3D;
  --badge-ink: rgb(var(--glow-rgb));                    /* small badges ("Suggested"): 15:1 */
  --beam-a: rgb(var(--light-rgb) / .9); --beam-b: rgb(var(--light-rgb) / .05); --cone: rgb(var(--light-rgb) / .09);
  --screen-shadow: 0 0 140px rgb(var(--glow-rgb) / .07);
  --note-bg: rgb(var(--room-rgb) / .88);
  /* The projector: what Candela draws over the customer's picture (hints, pins, the sheet),
     the same in both rooms because the picture is the same in both rooms. */
  --candle: #FFF1D6; --candle-rgb: 255 241 214; --black: #050505; --black-rgb: 5 5 5;
  /* The Studio's stage: the wall behind the frame and its controls (studio.css). */
  --stage: #050505; --stage-line: rgb(var(--light-rgb) / .18);
  --ticket: #FFB040;                                    /* the golden ticket in the waiting-room arcade */
  /* A screen with no kit yet. A real screen sets these from the kit inline. */
  --brand: #0F1B2D; --brand-2: #E4572E; --brand-text: #F7F5F0;
  --face: "Archivo", system-ui, sans-serif;
  color-scheme: dark;
}
[data-theme="light"] {
  --room: #F3F3F1; --room-rgb: 243 243 241;             /* a neutral studio white, not cream */
  --light: #111110; --light-rgb: 17 17 16;              /* ink takes the role of the light */
  --glow-rgb: 255 176 64;                               /* halos stay the colour of a candle */
  --light-70: rgb(var(--light-rgb) / .72); --light-45: rgb(var(--light-rgb) / .5); --line: rgb(var(--light-rgb) / .16);
  --alarm: #C8281C;
  --badge-ink: #8A4B00;                                 /* a candle's amber that reads: 6:1 */
  --beam-a: rgb(var(--light-rgb) / .55); --beam-b: rgb(var(--light-rgb) / .03); --cone: rgb(var(--light-rgb) / .05);
  --screen-shadow: 0 30px 90px rgb(var(--light-rgb) / .18);
  --note-bg: rgb(var(--room-rgb) / .94);
  --stage: #E6E3DC; --stage-line: rgb(var(--light-rgb) / .18);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Always keep the scrollbar's room, so a short page (Brand kits) and a long one (Crew) put the
   centred layout at the same place instead of jumping by half a scrollbar. */
html { background: var(--room); scrollbar-gutter: stable; }
body { margin: 0; min-height: 100vh; background: var(--room); color: var(--light); font-family: var(--face); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.room { background: var(--room); color: var(--light); }
a { color: var(--light); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links to Dafin, who make Candela, read as links within the copy. */
a[href^="https://www.dafin.ai"] { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 1px solid var(--light); outline-offset: 2px; }
::selection { background: var(--light); color: var(--room); }
h1, h2, h3, p { margin: 0; }
img, video, iframe { display: block; max-width: 100%; }

/* structure */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; width: 100%; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.line { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.grow { flex: 1 1 auto; }
.center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.figures > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.figures .card { text-transform: none; }
.acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.acts > div { display: flex; flex-direction: column; gap: 14px; }

/* type: one face across its width */
.wide { font-stretch: 125%; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; font-size: 15px; }
.narrow { font-stretch: 75%; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 15px; color: var(--light-70); }
.tc { font-stretch: 75%; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .06em; font-size: 16px; color: var(--light-70); }
.card { font-stretch: 100%; font-weight: 900; letter-spacing: -.035em; line-height: .9; text-transform: uppercase; margin: 0; }
.copy { font-stretch: 100%; font-weight: 400; font-size: 19px; line-height: 1.55; color: var(--light-70); max-width: 620px; }
.copy.small { font-size: 17px; }
.ptitle { font-stretch: 100%; font-weight: 800; font-size: 26px; letter-spacing: -.02em; line-height: 1; margin: 0; text-transform: none; }
a.narrow:hover, a.tc:hover { color: var(--light); }

/* intensity, the state language: always paired with a word */
.dim { opacity: .45; }
.lit { color: var(--light); text-shadow: 0 0 18px rgb(var(--glow-rgb) / .55); }
.alarm { color: var(--alarm); }

/* the beam: a hairline of light down to the top of the screen. A .beam element is the
   gap above the screen (or above the field on sign in); the screen under it is .main. */
.beam { position: relative; }
.beam::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: linear-gradient(var(--beam-a), var(--beam-b)); transform: translateX(-50%); transform-origin: top; pointer-events: none; opacity: var(--beam-on, 1); }
.cone { background: radial-gradient(ellipse 48% 100% at 50% 0%, var(--cone), rgb(var(--light-rgb) / 0) 70%) no-repeat; background-size: 100% 900px; }

/* the top line */
.top { min-height: 56px; display: flex; align-items: center; gap: 12px 32px; flex-wrap: wrap; padding: 8px 0; }
.top .grow { flex: 1 1 auto; }
.top [data-switch] { margin-inline-start: auto; }
.top button.narrow { background: none; border: 0; padding: 0; font-family: var(--face); cursor: pointer; }
.meter { display: flex; align-items: center; gap: 10px; }
.meter i { display: block; width: 80px; height: 1px; background: var(--line); position: relative; }
.meter i b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--light); box-shadow: 0 0 8px rgb(var(--glow-rgb) / .8); }
.switch { display: inline-flex; border: 1px solid var(--line); }
[data-switch]:empty { display: inline-block; width: 100px; height: 29px; }  /* its room before screen.js draws it */
.switch button { background: none; border: 0; font-family: var(--face); font-stretch: 75%; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; padding: 10px 14px; color: var(--light-70); cursor: pointer; }
.switch button[aria-pressed="true"] { background: var(--light); color: var(--room); }
/* the language switcher (i18n.rs): EN FR DE, the current one lit like the room switch */
.langs { display: inline-flex; border: 1px solid var(--line); }
.langs a, .langs button { background: none; border: 0; font-family: var(--face); font-stretch: 75%; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; padding: 10px 10px; color: var(--light-70); cursor: pointer; text-decoration: none; line-height: 1; }
.langs a:hover, .langs button:hover { color: var(--light); text-decoration: none; }
.langs [aria-current="true"], .langs [aria-pressed="true"] { background: var(--light); color: var(--room); }

/* the screen: the film, in the customer's brand */
.screen { aspect-ratio: 16 / 9; background: var(--brand); color: var(--brand-text); position: relative; overflow: hidden; box-shadow: var(--screen-shadow); display: block; width: 100%; }
.screen.tall { aspect-ratio: 9 / 16; }
.screen.square { aspect-ratio: 1 / 1; }
.screen > iframe, .screen > video, .screen > img.fill { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: var(--black); }
.screen .mark { position: absolute; left: 4%; top: 6%; font-stretch: 125%; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; font-size: 12px; opacity: .9; }
.screen .head { position: absolute; left: 4%; right: 4%; bottom: 30%; font-stretch: 100%; font-weight: 800; font-size: clamp(28px, 4.6vw, 64px); letter-spacing: -.02em; line-height: 1; margin: 0; }
.screen .cap { position: absolute; left: 4%; right: 4%; bottom: 9%; font-size: clamp(13px, 1.4vw, 19px); font-weight: 500; opacity: .92; max-width: 70%; }
.screen .tco { position: absolute; right: 3%; bottom: 4%; font-stretch: 75%; font-size: 15px; letter-spacing: .12em; opacity: .75; font-variant-numeric: tabular-nums; }
.screen .hint { position: absolute; inset-inline-end: 4%; top: 6%; font-stretch: 75%; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--candle); background: rgb(var(--black-rgb) / .65); padding: 8px 12px; max-width: 60%; }
.screen .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.screen.drop { outline: 1px dashed var(--candle); outline-offset: -8px; }
.caret { display: inline-block; width: 3px; height: .85em; background: currentColor; vertical-align: -.08em; margin-inline-start: 3px; }

/* the desk: the projectionist's bench under the screen */
.desk { border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px 24px; padding: 14px 0; flex-wrap: wrap; }
.desk .grow { flex: 1 1 auto; }
.key { background: none; border: 1px solid var(--line); color: var(--light); font-family: var(--face); font-stretch: 75%; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 15px; padding: 0 20px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.key:hover { border-color: var(--light); text-decoration: none; }
.key.lit { background: var(--light); color: var(--room); border-color: var(--light); box-shadow: 0 0 30px rgb(var(--glow-rgb) / var(--halo, .4)); text-shadow: none; }
.key.dim, .key:disabled { opacity: .45; }
.key:disabled { cursor: default; }
.key:disabled:hover { border-color: var(--line); }
.key.lit:disabled:hover { border-color: var(--light); }
.key.on { border-color: var(--light); }
/* The keys that stop something: red, so they are found at once on a busy desk. */
.key.alarm { border-color: var(--alarm); color: var(--alarm); }
.key.alarm:hover { background: var(--alarm); border-color: var(--alarm); color: #fff; }
.key.alarm:disabled:hover { background: none; color: var(--alarm); border-color: var(--alarm); }
.key.next { border-style: dashed; }
.key.sm { min-height: 40px; padding: 0 14px; }
.keys { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.scrub { height: 2px; background: var(--line); position: relative; margin: 4px 0; }
.scrub.live { cursor: pointer; padding: 7px 0; background-clip: content-box; height: 16px; margin: -3px 0; }
.scrub i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--light); box-shadow: 0 0 12px rgb(var(--glow-rgb) / .8); }
.scrub.live i { top: 7px; bottom: 7px; }
.scrub b { position: absolute; top: -5px; width: 1px; height: 12px; background: var(--light); }
.scrub .mark { position: absolute; top: -7px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--light); background: var(--room); color: var(--light); transform: translateX(-50%); font-family: var(--face); font-size: 9px; display: flex; align-items: center; justify-content: center; font-weight: 700; padding: 0; cursor: pointer; }
.scrub.live .mark { top: 0; }
.seg { display: flex; gap: 2px; height: 2px; }
.seg i { display: block; height: 100%; background: var(--line); min-width: 2px; }
.seg i.done { background: var(--light); }
.seg i.live { background: var(--light); box-shadow: 0 0 12px rgb(var(--glow-rgb) / .9); }

/* steps on one line */
.steps { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; }
.steps span { font-stretch: 75%; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 15px; padding-inline-end: 18px; color: var(--light-70); }
.steps span::after { content: "—"; margin-inline-start: 18px; opacity: .35; }
.steps span:last-child::after { content: ""; }
.steps .done { color: var(--light); }
.steps .live { color: var(--light); text-shadow: 0 0 18px rgb(var(--glow-rgb) / .7); }
.steps .next { opacity: .4; }
.steps .fail { color: var(--alarm); }

/* pins on the frame */
.pin { position: absolute; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--candle); display: flex; align-items: center; justify-content: center; font-family: var(--face); font-size: 13px; font-weight: 800; background: rgb(var(--black-rgb) / .6); color: var(--candle); box-shadow: 0 0 18px rgb(var(--candle-rgb) / .55); transform: translate(-50%, -50%); padding: 0; cursor: pointer; z-index: 2; }
.pin.dim { opacity: .45; }
.note { position: absolute; background: var(--note-bg); border: 1px solid var(--line); padding: 12px 14px; max-width: 320px; font-size: 17px; line-height: 1.45; color: var(--light); z-index: 3; }
.note .tc { display: block; margin-top: 8px; }
.note textarea { width: 260px; max-width: 100%; min-height: 64px; resize: vertical; }

/* programme rows */
.prow { display: grid; grid-template-columns: 112px 1fr 90px 90px 140px 90px; gap: 24px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); color: var(--light); }
.prow:last-child { border-bottom: 1px solid var(--line); }
a.prow:hover { text-decoration: none; }
a.prow:hover .ptitle { text-decoration: underline; text-decoration-thickness: 1px; }
.prow .screen { box-shadow: none; width: 112px; }
.prow .screen.tall, .prow .screen.square { width: 63px; justify-self: center; }
.prow .screen.failed { background: var(--room); outline: 1px solid var(--alarm); }
.prow .r { text-align: end; }
.prow.notes { grid-template-columns: 112px 1fr 70px 110px 90px 90px; }
.prow.notes.resolved { opacity: .45; }
.prow.notes.resolved .body { text-decoration: line-through; }
.prow.plain { grid-template-columns: 1fr 140px 120px auto; }
.prow .body { font-size: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* frames inside the screen while it assembles */
.sheet { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--black); }
.sheet i { display: block; background: rgb(var(--candle-rgb) / .04); background-repeat: no-repeat; }
.sheet i.on { background-color: var(--brand); }
.sheet i.live { outline: 1px solid var(--candle); outline-offset: -1px; box-shadow: inset 0 0 24px rgb(var(--candle-rgb) / .35); }

/* the wait, readable: the review rounds' real frames fill the sheet, a projector light plays
   in the gate while nothing exists yet, the "now" line says what is happening in words */
.sheet.frames { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr)); }
.sheet i { position: relative; overflow: hidden; }
.sheet i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .7s ease; }
.sheet i img.in { opacity: 1; }
.sheet.frames i { opacity: .55; transition: opacity .4s; }
.sheet.frames i.on { opacity: 1; background-color: var(--black); }
.sheet i[data-t]::after { content: attr(data-t); position: absolute; left: 4px; bottom: 3px; font-stretch: 75%; font-size: 13px; letter-spacing: .06em; color: var(--candle); text-shadow: 0 0 3px var(--black); font-variant-numeric: tabular-nums; }
#player .tco:not(:empty) { background: rgb(var(--black-rgb) / .65); color: var(--candle); padding: 3px 6px; opacity: 1; z-index: 1; }
.gate { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; transition: opacity .8s; }
.gate.off { opacity: 0; }
@keyframes step-glow { from { text-shadow: 0 0 10px rgb(var(--glow-rgb) / .35); } to { text-shadow: 0 0 22px rgb(var(--glow-rgb) / .9); } }
.steps .live { animation: step-glow 1.6s ease-in-out infinite alternate; }
.now { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; min-height: 52px; }
.now .ptitle { font-size: 26px; }
.now-bar { width: min(560px, 100%); }
.rounds { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; padding-top: 18px; }
.round { display: flex; flex-direction: column; gap: 6px; }
.round .bars { display: flex; gap: 3px; align-items: flex-end; height: 32px; position: relative; }
.round .bars::before { content: ""; position: absolute; left: 0; right: 0; bottom: var(--bar-line, 60%); border-top: 1px dashed var(--line); }
.round .bars i { display: block; width: 7px; background: var(--light-45); }
.round .bars i.ok { background: var(--light); box-shadow: 0 0 8px rgb(var(--glow-rgb) / .6); }
.round .bars i.low { opacity: .45; }
.round .axes { display: flex; gap: 3px; }
.round .axes span { width: 8px; text-align: center; font-size: 12px; font-stretch: 75%; color: var(--light-45); text-transform: uppercase; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 18px; padding: 1px 0 0 1px; }
.cards > div { border: 1px solid var(--line); margin: -1px 0 0 -1px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: box-shadow .4s; }
.cards > div.live { box-shadow: inset 0 0 0 1px var(--light), 0 0 24px rgb(var(--glow-rgb) / .25); }
.cards .body { font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
details.log { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 10px; }
details.log summary { cursor: pointer; display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; list-style: none; }
details.log summary::-webkit-details-marker { display: none; }
details.log summary .narrow::before { content: "+ "; }
details.log[open] summary .narrow::before { content: "− "; }
details.log ol { list-style: none; margin: 10px 0 0; padding: 0; max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
details.log li { white-space: pre-wrap; overflow-wrap: anywhere; }
/* focus pull: the game plays on the screen itself */
.game { position: absolute; inset: 0; z-index: 4; background: var(--black); touch-action: none; user-select: none; -webkit-user-select: none; }
.game canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
.game .close { position: absolute; right: 8px; top: 8px; z-index: 1; color: var(--candle); border-color: rgb(var(--candle-rgb) / .4); background: rgb(var(--black-rgb) / .6); }
.game #raid-canvas { cursor: crosshair; image-rendering: pixelated; }
.game-keys { position: absolute; right: 8px; top: 8px; z-index: 1; display: flex; gap: 8px; }
.game-keys .close { position: static; }
.game .sound { color: var(--candle); border-color: rgb(var(--candle-rgb) / .4); background: rgb(var(--black-rgb) / .6); }
.game .sound[aria-pressed="false"] { text-decoration: line-through; opacity: .7; }
.game .sound[aria-pressed="true"] { border-color: var(--candle); }
/* the game picker: two keys on the dark screen, the same in both rooms */
.game-pick { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4%; padding: 56px 16px 16px; color: var(--candle); }
.game-pick .narrow { color: rgb(var(--candle-rgb) / .8); }
.game-pick-row { display: flex; gap: 12px; width: 100%; max-width: 640px; }
.game-choice { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: start; padding: 14px 16px; background: rgb(var(--candle-rgb) / .05); border: 1px solid rgb(var(--candle-rgb) / .35); color: var(--candle); font-family: var(--face); cursor: pointer; }
.game-choice:hover, .game-choice:focus-visible { border-color: var(--candle); background: rgb(var(--candle-rgb) / .1); outline: 2px solid var(--candle); outline-offset: 2px; }
.game-choice b { font-size: clamp(15px, 3.2vw, 24px); font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; line-height: 1.05; }
.game-choice.raid b { font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; letter-spacing: .06em; color: var(--ticket); text-shadow: 2px 2px 0 rgb(var(--black-rgb)); }
.game-choice span { font-size: 14px; line-height: 1.3; color: rgb(var(--candle-rgb) / .8); }
@media (max-width: 560px) {
  .game-pick { padding: 52px 10px 10px; gap: 6px; }
  .game-pick .narrow { display: none; }
  .game-pick-row { gap: 8px; }
  .game-choice { padding: 8px 10px; gap: 2px; }
  .game-choice span { font-size: 12px; }
  .game-keys { top: 6px; right: 6px; gap: 6px; }
  .game .sound, .game .close { padding: 0 10px; font-size: 13px; letter-spacing: .06em; }
}
.progress { height: 2px; background: var(--line); position: relative; width: 100%; max-width: 420px; }
.progress i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--light); box-shadow: 0 0 10px rgb(var(--glow-rgb) / .8); transition: width .2s; }
/* Candela.progress (ui/progress.js): every wait on every page. The bar is the Studio's
   (.st-bar): a line of light that fills, or a beam that runs while the total is unknown. */
.ck-progress { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 560px; min-width: 0; }
.ck-progress-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.ck-progress-label { color: var(--light); font-size: 16px; overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0; }
.ck-progress-meta { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ck-progress.compact { gap: 4px; max-width: 420px; }
.ck-progress.compact .ck-progress-label { font-size: 15px; }
.ck-progress.compact .ck-bar { height: 4px; }
.ck-progress.bare .ck-progress-row { display: none; }
.ck-progress.done .ck-progress-label::before { content: "\2713\00a0"; }
.ck-progress.done .ck-bar i { box-shadow: none; }
.ck-progress-err { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ck-bar, .st-bar { position: relative; height: 8px; background: rgb(var(--light-rgb) / .14); overflow: hidden; }
.ck-bar i, .st-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--light); box-shadow: 0 0 12px rgb(var(--glow-rgb) / .8); transition: width .6s ease; }
.ck-progress.indeterminate .ck-bar i, .st-bar.indeterminate i { width: 30%; animation: ck-slide 1.6s ease-in-out infinite; }
@keyframes ck-slide { from { left: -30%; } to { left: 100%; } }
/* A play key while its sample loads. */
.key.ck-loading { position: relative; opacity: .75; }
.key.ck-loading::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 3px; height: 2px; background: currentColor; animation: ck-load 1s ease-in-out infinite alternate; transform-origin: left; }
@keyframes ck-load { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  /* No moving beam: a still, faint full bar; the words and the clock still change. */
  .ck-progress.indeterminate .ck-bar i, .st-bar.indeterminate i { animation: none; left: 0; width: 100%; opacity: .35; }
  .ck-bar i, .st-bar i { transition: none; }
  .key.ck-loading::after { animation: none; transform: none; opacity: .5; }
}

/* fields: a line of light to write on */
.field { background: rgb(var(--light-rgb, 245 240 230) / .04); border: 1px solid var(--line); border-radius: 4px; color: var(--light); font-family: var(--face); font-size: 18px; line-height: 1.4; padding: 12px 16px; width: 100%; box-sizing: border-box; }
.field:focus { outline: 2px solid var(--candle); outline-offset: 1px; border-color: var(--light); }
/* Chrome autofill paints its own background; keep the field's padding and colours readable. */
.field:-webkit-autofill, .field:-webkit-autofill:hover, .field:-webkit-autofill:focus { -webkit-text-fill-color: var(--light); box-shadow: 0 0 0 1000px var(--room) inset; caret-color: var(--light); transition: background-color 9999s; }
.field::placeholder { color: var(--light-45); }
textarea.field { resize: vertical; min-height: 64px; line-height: 1.45; }
/* Dropdowns: the field's own look, a native select (keyboard, screen readers, phone pickers),
   and a chevron drawn in the text colour (two gradients on currentColor, so it follows the room). */
select.field, select.sel, .field[role="combobox"] { -webkit-appearance: none; appearance: none; cursor: pointer; padding-inline-end: 44px; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 24px center, right 18px center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
[dir="rtl"] select.field, [dir="rtl"] select.sel, [dir="rtl"] .field[role="combobox"] { background-position: left 18px center, left 24px center; }
select.field::-ms-expand { display: none; }
select.field option, select.field optgroup { background: var(--room); color: var(--light); }
/* The open list in the Candela look where the browser allows it (customizable select: Chrome
   and Edge 135+); elsewhere the native list stays, in the room's colours (above). */
@supports (appearance: base-select) {
  select.field, select.sel, select.field::picker(select), select.sel::picker(select) { -webkit-appearance: base-select; appearance: base-select; }
  select.field::picker-icon, select.sel::picker-icon { display: none; }
  select.field::picker(select), select.sel::picker(select) { background: var(--room); color: var(--light); border: 1px solid var(--light-45); border-radius: 4px; padding: 4px 0; margin-block: 4px; box-shadow: 0 12px 32px rgb(0 0 0 / .35); }
  select.field option, select.sel option { background: transparent; color: var(--light); font-family: var(--face); font-size: 16px; line-height: 1.4; padding: 10px 16px; cursor: pointer; }
  select.field option:hover, select.field option:focus-visible, select.sel option:hover, select.sel option:focus-visible { background: rgb(var(--light-rgb) / .1); outline: none; }
  select.field option:checked, select.sel option:checked { font-weight: 600; }
  select.field option::checkmark, select.sel option::checkmark { display: none; }
}
/* Suggestions under a free-text field (screen.js turns each <input list> into this). */
.combo { position: relative; }
.field[role="combobox"] { cursor: text; padding-inline-end: 44px; }
.combo-list { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); margin: 0; padding: 4px 0; list-style: none; max-height: 280px; overflow-y: auto; background: var(--room); border: 1px solid var(--light-45); border-radius: 4px; box-shadow: 0 12px 32px rgb(0 0 0 / .35); }
.combo-list[hidden] { display: none; }
.combo-list li { padding: 10px 16px; font-family: var(--face); font-size: 16px; line-height: 1.4; color: var(--light); cursor: pointer; }
.combo-list li:hover, .combo-list li[aria-selected="true"] { background: rgb(var(--light-rgb) / .1); }
.field:disabled { opacity: .5; cursor: not-allowed; }
.field:focus-visible { outline: 2px solid var(--candle); outline-offset: 1px; border-color: var(--light); }
[data-theme="light"] .field:focus, [data-theme="light"] .field:focus-visible { outline-color: var(--light); }
label.narrow { display: block; }
.fields { display: flex; flex-direction: column; gap: 22px; width: 100%; }
.fields > div { display: flex; flex-direction: column; gap: 8px; text-align: start; }

/* writing on the screen: the brief typed where it plays. The overlay is laid out in the
   composition's own pixels and type (the template's Inter, served with GSAP) and scaled
   with the frame, so the words sit where the film puts them. */
@font-face { font-family: "Candela Screen"; src: url("/ui/assets/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Candela Screen"; src: url("/ui/assets/inter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
.write { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; align-items: start; }
.ticks { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; }
.ticks button { background: none; border: 0; padding: 0; text-align: start; cursor: pointer; font-family: var(--face); line-height: 1.5; }
.write .screen.tall, .write .screen.square, #player.tall, #player.square { width: auto; height: min(72vh, 760px); margin: 0 auto; }
.screen > iframe.back { visibility: hidden; }
.edit { position: absolute; left: 0; top: 0; transform-origin: 0 0; font-family: "Candela Screen", system-ui, sans-serif; color: transparent; z-index: 1; }
.edit .inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.edit .kick { font-size: 26px; font-weight: 600; letter-spacing: .18em; margin-bottom: 28px; visibility: hidden; }
.edit .eh { font-weight: 700; letter-spacing: -.03em; line-height: 1.04; outline: none; caret-color: var(--brand-text); pointer-events: auto; cursor: text; min-height: 1em; }
.edit .bar { height: 8px; margin-top: 40px; }
.edit .capw { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; pointer-events: none; }
.edit .ec { padding: 14px 28px; border-radius: 14px; font-weight: 600; line-height: 1.3; text-align: center; outline: none; caret-color: var(--brand-text); pointer-events: auto; cursor: text; min-width: 320px; }
.edit [contenteditable]:empty::before { content: attr(data-placeholder); color: var(--brand-text); opacity: .45; }
.edit.on { color: var(--brand-text); }
.edit.on .ec { background: rgb(var(--black-rgb) / .55); }
.edit.on [contenteditable]:focus { box-shadow: 0 0 0 3px rgb(var(--candle-rgb) / .5); border-radius: 6px; }
.drawer { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; padding: 14px 0; border-top: 1px solid var(--line); }
.drawer > div { display: flex; flex-direction: column; gap: 4px; }
.swatch { width: 40px; height: 28px; padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; }
.shots { display: flex; flex-direction: column; }
.shots .prow { grid-template-columns: 90px 120px minmax(0, 1fr) 200px; }

/* the footer line, on public pages */
.foot { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; padding-top: 112px; padding-bottom: 48px; }
.foot .copy { font-size: 17px; max-width: 600px; }
/* The running build ({{build}}), quiet beside the company line. */
.build { opacity: .6; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 900px) {
  .wrap { padding: 0 16px; }
  .prow, .prow.notes, .prow.plain { grid-template-columns: 80px minmax(0, 1fr) auto; gap: 16px; }
  .prow > .opt, .top .opt { display: none; }
  .write { grid-template-columns: 1fr; gap: 12px; }
  .screen .hint { display: none; }
  .ticks { flex-direction: row; overflow-x: auto; gap: 18px; padding: 0; }
  .shots .prow { grid-template-columns: 70px minmax(0, 1fr); }
  .prow .screen { width: 80px; }
  .prow .screen.tall, .prow .screen.square { width: 45px; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acts { grid-template-columns: 1fr; }
  .foot { padding-top: 72px; }
  /* Fingers, not pointers: every key at least 44 px tall. */
  .key.sm { min-height: 44px; }
  /* The language and room switches share a row on a phone: smaller letters and padding, the
     same 44 px to tap. */
  .switch button, .langs a, .langs button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 9px; font-size: 13px; letter-spacing: .08em; }
}

/* The page's own confirm dialog (Candela.confirm in screen.js), never the browser's. */
.ck-dialog { background: var(--room); color: var(--light); border: 1px solid var(--line); padding: 0; width: min(520px, calc(100vw - 32px)); box-sizing: border-box; box-shadow: var(--screen-shadow); }
.ck-dialog::backdrop { background: rgb(var(--room-rgb) / .78); }
.ck-dialog-body { padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 24px; }
.ck-dialog .copy { margin: 0; font-size: 18px; line-height: 1.45; }
.ck-dialog .keys { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.ck-dialog .key.lit.alarm { background: var(--alarm); border-color: var(--alarm); color: #fff; box-shadow: none; }

/* "Before we start" (ui/setup.js): one screen before the build, every field prefilled. */
.ck-dialog.setup { width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.setup-body { padding: 28px 28px 20px; display: flex; flex-direction: column; gap: 22px; }
.setup-head { display: flex; flex-direction: column; gap: 6px; }
.setup-h { margin: 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.setup-head .copy { margin: 0; max-width: 760px; }
.setup-material { margin: 4px 0 0; max-width: 760px; border-left: 2px solid rgb(var(--glow-rgb) / .7); padding: 4px 0 4px 12px; }
.setup-material-add { background: none; border: 0; padding: 0; min-height: 32px; font: inherit; color: var(--light); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.setup-sec { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.setup-sec > legend { padding: 0; margin-bottom: 8px; }
.setup-title, .setup-voice, .setup-music, .setup-langs { grid-column: 1 / -1; }
.setup-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.setup-row { position: relative; display: flex; align-items: stretch; border: 1px solid var(--line); min-width: 0; }
.setup-row.on { border-color: var(--light); box-shadow: 0 0 24px rgb(var(--glow-rgb) / .12); }
.setup-row input[type="radio"], .setup-segitem input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.setup-row:focus-within { outline: 2px solid var(--candle); outline-offset: 1px; }
.setup-pick { flex: 1; min-width: 0; min-height: 48px; padding: 6px 12px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.setup-pick b { font-weight: 700; font-size: 17px; }
.setup-pick b::before { content: "○ "; color: var(--light-45); }
.setup-row.on .setup-pick b::before { content: "● "; color: rgb(var(--glow-rgb)); }
.setup-pick span { font-size: 14px; color: var(--light-70); overflow: hidden; text-overflow: ellipsis; }
.setup-badge { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--badge-ink); border: 1px solid currentColor; padding: 1px 6px; margin-inline-start: 4px; vertical-align: 2px; }
.setup-play { border: 0; border-inline-start: 1px solid var(--line); min-width: 48px; min-height: 48px; padding: 0; }
.setup-play[aria-pressed="true"] { color: rgb(var(--glow-rgb)); }
.setup-status { margin: 0; min-height: 1.4em; }
.setup-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.setup-formats .setup-pick { align-items: flex-start; }
.setup-formats .setup-pick b::before { content: ""; }
.setup-shape { display: block; height: 28px; border: 1.5px solid var(--light-70); margin-bottom: 4px; }
.setup-row.on .setup-shape { border-color: rgb(var(--glow-rgb)); }
.setup-style { grid-column: 1 / -1; }
.setup-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.setup-styles .setup-pick { padding: 10px 12px; }
.setup-styles .setup-pick span { overflow: visible; }
.setup-length { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 6px; }
.setup-length input[type="range"] { width: 100%; }
.setup-brand-line { display: flex; gap: 10px; align-items: center; }
.setup-pages { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.setup-pages .setup-check { align-items: center; }
.setup-swatch { display: inline-flex; flex: none; border: 1px solid var(--line); }
.setup-swatch i { display: block; width: 14px; height: 36px; }
.setup-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); width: fit-content; }
.setup-segitem { position: relative; display: flex; }
.setup-segkey { font-stretch: 75%; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 14px; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; color: var(--light-70); cursor: pointer; }
.setup-segkey.on { background: var(--light); color: var(--room); }
.setup-segitem:focus-within { outline: 2px solid var(--candle); outline-offset: 1px; z-index: 1; }
.setup-sizes { border: 0; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.setup-sizes > legend { padding: 0; margin-bottom: 6px; }
.setup-sizes:disabled { opacity: .45; }
.setup-sizes:disabled .setup-segkey { cursor: default; }
.setup-note { margin: 0; }
.setup-preview { margin: 6px 0 0; }
.setup-frame { position: relative; margin: 0 auto; overflow: hidden; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.setup-frame-title { font-weight: 700; letter-spacing: -.03em; line-height: 1.05; text-align: center; padding: 0 8%; opacity: .9; }
.setup-frame-cap { position: absolute; left: 50%; transform: translateX(-50%); max-width: 68%; width: max-content; padding: .36em .7em; border-radius: .36em; background: rgba(0, 0, 0, .62); color: #fff; font-weight: 600; line-height: 1.28; text-align: center; }
.setup-frame-chip { position: absolute; display: flex; align-items: baseline; gap: .42em; max-width: 80%; padding: .36em .62em; border-radius: .36em; background: rgba(14, 16, 20, .92); color: #fff; font-weight: 700; line-height: 1.2; text-align: left; }
.setup-frame-chip b { flex: none; font-size: .83em; }
.setup-check { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.setup-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.setup-langs { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 14px; }
.setup-foot { position: sticky; bottom: -20px; background: var(--room); border-top: 1px solid var(--line); padding: 14px 0 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.setup-total { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.setup-total b { font-size: 22px; }
.setup-foot .keys { display: flex; gap: 12px; flex-wrap: wrap; }
.setup-foot .alarm { flex: 1 1 100%; margin: 0; }
.setup-foot .alarm:empty { display: none; }
@media (max-width: 760px) {
  .ck-dialog.setup { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; }
  .setup-body { padding: 20px 16px 16px; }
  .setup-grid, .setup-list, .setup-styles { grid-template-columns: minmax(0, 1fr); }
  .setup-formats .setup-pick span { display: none; }
  .setup-foot { bottom: -16px; }
  .setup-foot .keys { width: 100%; }
  .setup-foot .keys .key { flex: 1; }
}
/* The voice picker (ui/voice-picker.js): the Write page's Voice drawer, the brand kit
   editor and "Before we start". The current choice, two tabs (Candela's voices, the shared
   library), filters and search, one row per voice with its ▶ sample. */
.vp { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vp-current { margin: 0; font-size: 16px; color: var(--light); border-inline-start: 2px solid rgb(var(--glow-rgb) / .7); padding: 2px 0 2px 10px; }
.vp-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.vp-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--light-70); font-family: var(--face); font-stretch: 75%; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; min-height: 44px; padding: 0 14px; cursor: pointer; }
.vp-tab.on { color: var(--light); border-bottom-color: rgb(var(--glow-rgb)); }
.vp-tab:focus-visible, .vp-pick:focus-visible { outline: 2px solid var(--candle); outline-offset: -2px; }
.vp-filters { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; align-items: end; }
.vp-filter { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vp-filter[hidden] { display: none; }
.vp-filter .tc { font-size: 13px; }
.vp-filters .field { padding: 8px 10px; font-size: 16px; min-height: 44px; }
.vp-count, .vp-status, .vp-note { margin: 0; }
.vp-status { min-height: 1.4em; }
.vp-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; max-height: 470px; overflow: auto; padding: 2px; }
.vp-row { display: flex; align-items: stretch; border: 1px solid var(--line); min-width: 0; }
.vp-row.on { border-color: var(--light); box-shadow: 0 0 24px rgb(var(--glow-rgb) / .12); }
.vp-pick { flex: 1; min-width: 0; min-height: 56px; background: none; border: 0; color: var(--light); font-family: var(--face); text-align: start; padding: 8px 12px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.vp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.vp-head b { font-weight: 700; font-size: 17px; }
.vp-head b::before { content: "○ "; color: var(--light-45); }
.vp-row.on .vp-head b::before { content: "● "; color: rgb(var(--glow-rgb)); }
.vp-badge { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--badge-ink); border: 1px solid currentColor; padding: 0 5px; }
.vp-badge.dim { color: var(--light-45); }
.vp-desc { font-size: 14px; color: var(--light-70); }
.vp-more-desc { font-size: 13px; color: var(--light-45); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vp-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.vp-tags i { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line); padding: 0 5px; color: var(--light-70); }
.vp-play { border: 0; border-inline-start: 1px solid var(--line); min-width: 52px; min-height: 52px; padding: 0; }
.vp-play[aria-pressed="true"] { color: rgb(var(--glow-rgb)); }
.vp-play.loading { opacity: .7; }
.vp-more { align-self: flex-start; }
.vp-advanced .field { max-width: 360px; }
.vp-advanced > div { display: flex; flex-direction: column; gap: 6px; }
.vp-admin > summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.vp-admin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; border-top: 1px solid var(--line); padding: 8px 0; }
@media (max-width: 520px) {
  .vp-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-search { grid-column: 1 / -1; }
  .vp-list { grid-template-columns: minmax(0, 1fr); max-height: none; }
}
/* The Studio's captions control (ui/film-captions.js), under the player. */
.film-captions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.film-captions .setup-seg { flex-wrap: nowrap; }
.film-captions .setup-segkey { padding: 0 12px; min-height: 40px; }
/* Voice and music (ui/film-sound.js): the edit panel's controls, under the Studio's player
   and under the film on the film page. */
.film-sound { border-top: 1px solid var(--line); padding: 4px 0 8px; min-width: 0; }
.film-sound > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.film-sound > summary .fs-now { color: var(--light-70); overflow-wrap: anywhere; }
.film-sound .fs-lede { margin: 2px 0 10px; max-width: 680px; }
.fs-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.fs-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--light-70); font-family: var(--face); font-stretch: 75%; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; min-height: 44px; padding: 0 14px; cursor: pointer; }
.fs-tab.on { color: var(--light); border-bottom-color: rgb(var(--glow-rgb)); }
.fs-tab:focus-visible { outline: 2px solid var(--candle); outline-offset: -2px; }
.fs-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fs-pane[hidden] { display: none; }
.fs-pick { min-width: 0; max-height: 520px; overflow: auto; overscroll-behavior: contain; }
.fs-apply { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.fs-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; max-width: 520px; }
.fs-price b { font-stretch: 75%; letter-spacing: .06em; color: var(--light); }
.fs-off { margin: 0; border-inline-start: 2px solid var(--light-45); padding: 2px 0 2px 10px; }
.fs-status { margin: 0; min-height: 1.45em; }
.fs-status.alarm { color: var(--alarm); }
.fs-progress:empty { display: none; }
/* "No voice" above the voice picker, and the picker dimmed while it is ticked. */
.fs-novoice { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0 12px; cursor: pointer; }
.fs-novoice input { margin-top: 4px; }
.fs-novoice[hidden] { display: none; }
.fs-dim { opacity: .4; }
/* Cut & mute: the ends' trim and the muted parts. */
.fs-manual { display: flex; flex-direction: column; gap: 8px; max-width: 680px; }
.fs-manual > p { margin: 0; }
.fs-manual .fs-sub { margin-top: 8px; }
.fs-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 8px; }
.fs-field { display: flex; flex-direction: column; gap: 2px; }
.fs-sec { width: 7.5em; }
.fs-mutes { display: flex; flex-direction: column; gap: 8px; }
.fs-mute { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.fs-track { min-height: 40px; }
@media (max-width: 520px) {
  .fs-apply { flex-direction: column; align-items: stretch; }
  .fs-apply .keys { justify-content: stretch; }
  .fs-apply .keys .key { flex: 1 1 auto; }
  .fs-pick { max-height: none; }
  .fs-sec { width: 6em; }
}
/* Renaming a film in place (CandelaRename in index.html): the film page's kicker and the
   Studio's top bar. */
.rn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rn-name { cursor: text; border-bottom: 1px dashed transparent; }
.rn-name:hover { color: var(--light); border-bottom-color: var(--light-45); }
.rn-name.rn-invite { color: var(--light); border-bottom-color: var(--candle); }
.rn-pencil { background: none; border: 1px solid transparent; border-radius: 4px; color: var(--light-70); font-family: var(--face); font-stretch: 75%; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; min-height: 32px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rn-pencil:hover, .rn-pencil:focus-visible { color: var(--light); border-color: var(--line); }
.rn-pencil .rn-glyph { font-size: 15px; letter-spacing: 0; }
.rn-input { text-transform: none; letter-spacing: .01em; background: rgb(var(--light-rgb, 245 240 230) / .04); border: 1px solid var(--light); border-radius: 4px; color: var(--light); padding: 4px 8px; max-width: 100%; box-sizing: border-box; }
.rn-input:focus { outline: 2px solid var(--candle); outline-offset: 1px; }
.rn-status:empty { display: none; }
.rn-note { margin: 6px 0 0; max-width: 620px; font-size: 14px; flex-basis: 100%; text-transform: none; letter-spacing: .02em; }
.rn-note[hidden] { display: none; }

/* The play cue over a poster (the landing film, its sample strip and showcase, /samples):
   centred on the frame and above the poster image, which is absolutely positioned. */
.cue { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; display: inline-flex; align-items: center; gap: 14px; padding: 14px 22px 14px 14px; border: 1px solid rgb(var(--candle-rgb) / .6); background: rgb(var(--black-rgb) / .55); color: var(--candle); font-family: var(--face); font-stretch: 75%; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 15px; cursor: pointer; z-index: 2; box-shadow: 0 0 40px rgb(var(--candle-rgb) / .25); }
.cue i { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--candle); align-items: center; justify-content: center; font-style: normal; font-size: 16px; padding-inline-start: 3px; }
.cue:hover { background: rgb(var(--black-rgb) / .78); }
@media (max-width: 900px) {
  .cue { font-size: 13px; padding: 8px 14px 8px 8px; gap: 10px; }
  .cue i { width: 34px; height: 34px; }
}