/* DevOpser Videos. One stylesheet, no framework, strict-CSP friendly.

   The production office. Every page is a sheet from the producer's binder:
   Your series is the index, the series page is the call sheet, Add to cast
   is the casting form, the character page is the review room, the guides
   are the hand-off memo. The brand supplies the stationery: ink navy as the
   desk (flat, no wash, no grid), Saira Condensed caps as the printed form
   headings, JetBrains Mono for the data a filmmaker reads (cast numbers,
   view counts, file names, dates, status words), Public Sans for everything
   a person reads, and the pink spent on one action per page. Surfaces step
   up by tone (desk, sheet, raised, selected); nothing casts a shadow. The
   only curve on the character page is the ring around the circled take. */

@font-face {
  font-family: "Saira Condensed";
  src: url("/static/css/fonts/saira-condensed-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saira Condensed";
  src: url("/static/css/fonts/saira-condensed-latin-900-normal.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/static/css/fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/css/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* Surfaces, brand tokens (devopser-2026.css), in order of lightness. */
  --ink: #0a0e1a;      /* the desk: page background */
  --ink-2: #0f1424;    /* the sheet: series header, cast list, viewer well, paste blocks */
  --ink-3: #161d33;    /* raised: inputs, chips, frames at rest, series cards, the pack */
  --ink-4: #1c2541;    /* selected and hovered surface */
  --rule: #1f2940;     /* rules inside sheets */
  --rule-2: #2d3858;   /* the sheet's outer edge, secondary button border */
  /* Accent: fill only, never text. */
  --pink: #ED166C;
  --pink-3: #ff3d8b;   /* hover fill, and the only pink that may touch text (5.0:1 on --ink-3) */
  /* Semantic: one meaning each. */
  --hi: #fde047;       /* the circled take: the ring and the word Circled */
  --good: #34d399;     /* the word ready */
  --fault: #ff8a80;    /* refused, failed, delete (8.4:1 on the desk) */
  --cyc: #8C8C8C;      /* the generator's backdrop, behind every image */
  /* Text. */
  --text: #f7f8fb;
  --text-2: #aab2c7;
  --text-3: #6b7388;   /* decoration and disabled 19px condensed only */
  --focus: #f7f8fb;
  --font-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --wrap: 1120px;
  --sweep: 1.4s;
  --tone: 120ms;
}

* { box-sizing: border-box; }
html { font-size: 16px; background: var(--ink); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
a:hover { color: var(--pink-3); }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.15; }
/* Printed form headings: condensed caps. Never a sentence. */
h1 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 2rem; line-height: 1; letter-spacing: -0.005em; overflow-wrap: anywhere; }
h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; letter-spacing: .04em; margin-top: 2.5rem; }
h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
p { margin: 0 0 1rem; max-width: 62ch; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }
li { margin-bottom: .35rem; }
.display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem); line-height: .92; letter-spacing: -0.01em; max-width: 14ch; margin-bottom: 0; }
/* The brand's headline device: a 4px by 56px pink rule, only under the display heading. */
.display.small { font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem); max-width: none; }
.display + .rule-pink, .rule-pink { display: block; width: 56px; height: 4px; background: var(--pink); margin: 1rem 0 1.25rem; }
.lead { color: var(--text-2); font-size: 1.125rem; line-height: 1.5; }
.meta, .fineprint, .hint { color: var(--text-2); font-size: .875rem; line-height: 1.45; }
/* The legend: condensed caps 14px, tracking .08em, on the sheet's labels. */
.legend, legend, .table th, .form legend { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: .875rem; letter-spacing: .08em; color: var(--text-2); line-height: 1.3; }
/* Mono is the data column: values a filmmaker reads, never labels or prose. */
.mono, code { font-family: var(--font-mono); font-weight: 400; font-size: .8125rem; line-height: 1.4; }
.mono.status, .status-word { font-weight: 500; }
.status-word[data-status="ready"] { color: var(--good); }
.status-word[data-status="refused"], .status-word[data-status="failed"] { color: var(--fault); }
.eyebrow { font-family: var(--font-mono); font-weight: 400; font-size: .8125rem; color: var(--text-2); letter-spacing: .02em; }
.paste { background: var(--ink-2); color: var(--text); font: inherit; font-size: .9375rem; line-height: 1.55; padding: 1rem 1.1rem; margin: 0 0 1.25rem; white-space: pre-wrap; word-break: break-word; }
.paste.small { font-size: .875rem; color: var(--text-2); }
pre.stack { background: var(--ink-2); color: var(--text-2); padding: 1rem; overflow: auto; font-size: .8rem; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.hidden { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.wrap.narrow { max-width: 760px; }
.site-main { padding: 1.5rem 0 4rem; min-height: 60vh; }
.site-main > section.wrap + section.wrap { margin-top: 1rem; }

/* Header: the wordmark lockup left, three links right. */
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: .75rem 2rem; flex-wrap: wrap; padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.lockup { display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none; color: var(--text); white-space: nowrap; }
.lockup:hover { color: var(--text); }
.wordmark { display: block; height: 28px; width: auto; max-width: 160px; color: var(--text); align-self: center; }
.wordmark .wordmark-loop { fill: var(--pink); }
.lockup-word { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.125rem; letter-spacing: .06em; line-height: 1; align-self: center; }
.site-nav { display: flex; align-items: center; gap: .25rem 1.25rem; flex-wrap: wrap; }
.site-nav a { text-decoration: none; font-size: .9375rem; font-weight: 600; padding: .2rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--pink-3); }
.site-nav a.active { border-bottom-color: var(--text); }
.site-nav a.nav-cta { border: 1px solid var(--rule-2); padding: .4rem .8rem; border-radius: 3px; }
.site-nav a.nav-cta:hover { background: var(--ink-3); color: var(--text); }
.site-footer .wrap { border-top: 1px solid var(--rule); padding-top: 1.5rem; padding-bottom: 2rem; color: var(--text-2); font-size: .875rem; display: grid; gap: .75rem; }
.site-footer .wordmark { height: 18px; color: var(--text-2); }
.site-footer .wordmark .wordmark-loop { fill: var(--text-2); }
.site-footer p { max-width: none; margin: 0; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-links li { margin: 0; }
.skip { position: absolute; left: 16px; top: -3rem; padding: .5rem .8rem; background: var(--text); color: var(--ink); z-index: 50; }
.skip:focus { top: 8px; }

/* Buttons. The primary is the brand's pink condensed-caps button at 19px, which
   is large-scale text, so white on pink (4.26:1) passes AA; it has no small
   size. Secondary buttons share the type with a --rule-2 border; small
   buttons are Public Sans 600 14px and never pink. Hover is a tone change. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: 12px 20px; border: 1px solid var(--rule-2); border-radius: 3px; background: transparent; color: var(--text); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.1875rem; line-height: 1; letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background var(--tone) linear; }
.btn:hover { background: var(--ink-3); color: var(--text); text-decoration: none; }
.btn-primary, .btn-primary.btn-lg { background: var(--pink); color: #ffffff; border-color: var(--pink); padding: 12px 20px; font-size: 1.1875rem; }
.btn-primary:hover { background: var(--pink-3); border-color: var(--pink-3); color: #ffffff; }
.btn-lg { padding: 12px 20px; font-size: 1.1875rem; }
.btn-sm { padding: .35rem .7rem; font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .875rem; line-height: 1.3; }
.btn-text { border: 0; background: none; padding: 0; font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .9375rem; text-decoration: underline; text-underline-offset: .14em; }
.btn-text:hover { background: none; color: var(--pink-3); }
.btn-danger { color: var(--fault); }
.btn-danger:hover { color: var(--fault); text-decoration-thickness: 2px; }
.btn.disabled, .btn[disabled], .btn[aria-disabled="true"] { background: var(--ink-3); color: var(--text-2); border-color: var(--rule-2); pointer-events: none; cursor: default; }
.cta-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin: 1.25rem 0 .5rem; max-width: none; }
.hero { padding-top: 1.5rem; }
.hero .fineprint { margin-bottom: 0; }

/* Notes and errors: a left rule, coral for faults, green for success. */
.notice { border-left: 2px solid var(--text-2); padding: .4rem .9rem; margin: 1rem 0; max-width: none; color: var(--text-2); font-size: .875rem; }
.notice.good { border-left-color: var(--good); color: var(--text); }
.notice a { color: var(--text); }
.alert { border-left: 2px solid var(--fault); color: var(--fault); padding: .4rem .9rem; margin: 0 0 1rem; max-width: none; }
.alert ul { margin: 0; }
.alert a { color: inherit; }
.empty { color: var(--text-2); }

/* The sheet: a document laid on the desk. One step lighter, no border. */
.sheet { background: var(--ink-2); padding: 1.25rem 1.5rem 1.35rem; }
.crumb { margin: 0 0 .75rem; }
.crumb a { text-decoration: none; color: var(--text-2); }
.crumb a:hover { color: var(--pink-3); }

/* The production header: eyebrow, title with the pink rule, logline, the
   GENRE / STYLE / WORLD row with legends over mono values. */
.prod { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem 2rem; align-items: start; }
.prod .display { margin-top: .25rem; }
.prod-actions { display: grid; justify-items: end; gap: .5rem; }
.prod-logline { font-size: 1.125rem; line-height: 1.5; color: var(--text); max-width: 62ch; margin: 0 0 1rem; }
.prod-row { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.prod-row li, .prod-row > div { margin: 0; min-width: 0; }
.prod-row dt, .prod-row .legend { display: block; margin-bottom: .2rem; }
.prod-row dd { margin: 0; overflow-wrap: anywhere; }
.prod-row dd.mono { font-size: .875rem; }
.prod-logline.plain { color: var(--text-2); }
.prod-row dd.plain { color: var(--text-2); font-size: .9375rem; }
.sheet .details { margin-top: 1rem; }
.details > summary { cursor: pointer; list-style: none; display: inline-flex; }
.details > summary::-webkit-details-marker { display: none; }
.details[open] > summary { margin-bottom: .75rem; }

/* Stage sections: 02 / CAST, 03 / EPISODES, 04 / SCENES. The numbered eyebrow
   labels a true sequence; nothing here is a stepper. */
.stage { margin-top: 2.25rem; }
.stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.stage-head h2 { margin: 0; }
.stage-head .eyebrow { margin-right: .5rem; }
.stage-head .mono { color: var(--text-2); }
.stage-head .stage-action { margin-left: auto; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.stage-note { margin: .5rem 0 0; max-width: none; }

/* The call-sheet legend for the stages that are not in this build: the
   column headings a real call sheet carries, then one honest sentence. */
.sheet-legend { list-style: none; margin: 0; padding: .6rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; gap: .5rem 2rem; flex-wrap: wrap; }
.sheet-legend li { margin: 0; }
.stage-sentence { color: var(--text-2); margin: .75rem 0 0; max-width: 62ch; }

/* The cast list: a ruled call-sheet list, one row per character. Each row
   leads with the hero in a 2:3 frame, then the four other views as a small
   strip, then the name and role, then the data column in mono. The whole
   row is the link. */
.cast { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.cast > li { margin: 0; border-bottom: 1px solid var(--rule); }
.cast-row { display: grid; grid-template-columns: 56px 140px minmax(0, 1fr) auto; grid-template-areas: "num hero main data"; gap: .75rem 1.25rem; align-items: start; padding: 1rem 0; text-decoration: none; color: var(--text); transition: background var(--tone) linear; }
a.cast-row:hover { background: var(--ink-4); color: var(--text); }
a.cast-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.cast-num { grid-area: num; font-family: var(--font-display); font-weight: 900; font-size: 2.5rem; line-height: 1; letter-spacing: -0.01em; padding-top: .1rem; }
.cast-hero { grid-area: hero; }
.cast-main { grid-area: main; min-width: 0; display: grid; gap: .6rem; align-content: start; }
.cast-data { grid-area: data; display: grid; gap: .25rem; justify-items: end; text-align: right; min-width: 7.5rem; }
.cast-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1; letter-spacing: -0.005em; overflow-wrap: anywhere; margin: 0; }
.cast-name small { display: block; font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .9375rem; color: var(--text-2); margin-top: .35rem; line-height: 1.3; }
.cast-name.is-empty { color: var(--text-2); font-family: var(--font-body); font-weight: 400; text-transform: none; font-size: 1rem; line-height: 1.5; letter-spacing: 0; }
.cast-strip { display: grid; grid-template-columns: repeat(4, 48px); gap: 6px; margin: 0; padding: 0; list-style: none; }
.cast-strip .frame-cap { font-size: .6875rem; }
.cast-data .mono { color: var(--text-2); }
.cast-data .mono.caps { text-transform: uppercase; letter-spacing: .04em; color: var(--text); }
.cast-data .status-word { color: var(--text-2); }
.cast-data .status-word[data-status="ready"] { color: var(--good); }
.cast-data .status-word[data-status="refused"], .cast-data .status-word[data-status="failed"] { color: var(--fault); }

/* Frames: every image stands on the generator's grey cyc; an empty frame is
   a raised tone box carrying the view name; a frame being made carries the
   sweep bar. Square. */
.frame { display: block; position: relative; aspect-ratio: 2 / 3; background: var(--ink-3); overflow: hidden; min-width: 0; }
.frame[data-aspect="1:1"] { aspect-ratio: 1 / 1; }
.frame[data-aspect="16:9"] { aspect-ratio: 16 / 9; }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--cyc); }
.frame.has-img { background: var(--cyc); }
.frame[data-state="generating"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: var(--text); animation: sweep var(--sweep) linear infinite; }
.frame[data-state="refused"], .frame[data-state="failed"] { outline: 1px solid var(--fault); outline-offset: -1px; }
.frame-cap { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: .3rem; text-align: center; color: var(--text-2); font-size: .8125rem; line-height: 1.25; overflow-wrap: anywhere; }
.frame[data-state="refused"] .frame-cap, .frame[data-state="failed"] .frame-cap { color: var(--fault); }
.frame-cap.ring-mark { color: var(--hi); }

/* Series cards: the one Flow-like grid, 8px radius, the whole card a link. */
.series-grid { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem 1.25rem; }
.series-grid li { margin: 0; }
.series-card { display: block; text-decoration: none; color: var(--text); }
.series-card:hover { color: var(--text); }
.series-card-band { aspect-ratio: 16 / 9; background: var(--ink-3); border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; overflow: hidden; transition: background var(--tone) linear; }
.series-card:hover .series-card-band { background: var(--ink-4); }
.series-card-band .frame { width: 22%; max-width: 110px; }
.series-card-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1; margin: .75rem 0 .3rem; overflow-wrap: anywhere; }
.series-card .mono { color: var(--text-2); white-space: pre-wrap; display: block; }
.series-card-new { aspect-ratio: 16 / 9; background: var(--ink-3); border-radius: 8px; display: grid; place-items: center; padding: 1rem; }
.series-card-new.wide { aspect-ratio: auto; min-height: 220px; }
.legacy-strip { margin-top: 2rem; }

/* Forms: the casting form and the production form. Numbered legends only
   where the steps are a sequence. */
.form fieldset { border: 0; border-top: 1px solid var(--rule); padding: .9rem 0 .4rem; margin: 0 0 .75rem; min-width: 0; }
.form legend { padding: 0 .6rem 0 0; }
.form legend .eyebrow { color: var(--text-2); margin-right: .35rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span { display: inline-block; padding: .4rem .8rem; background: var(--ink-3); border-radius: 3px; cursor: pointer; font-size: .9375rem; line-height: 1.25; transition: background var(--tone) linear; }
.chip span:hover { background: var(--ink-4); }
.chip input:checked + span { background: var(--text); color: var(--ink); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.chip.disabled span { opacity: .4; cursor: not-allowed; }
.chips.locked .chip span { cursor: default; }
.chips.locked .chip span:hover { background: var(--text); }
.field { margin-bottom: .9rem; }
.field label { display: block; font-weight: 600; margin-bottom: .25rem; font-size: .9375rem; }
/* Inputs carry their own edge (text-2 on raised is 7.9:1); a rule is never a control's only boundary. */
.field input[type=text], .field input[type=email], .field select, .field textarea { width: 100%; padding: .55rem .7rem; border: 1px solid var(--text-2); border-radius: 3px; background: var(--ink-3); color: var(--text); font: inherit; font-size: 1rem; line-height: 1.4; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.field .hint { margin: .25rem 0 0; }
.field.is-invalid input, .field.is-invalid .photo-well { border-color: var(--fault); }
.field .hint.fault { color: var(--fault); }
.submit-row { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; margin-top: 1.25rem; }
.submit-row .meta { margin: 0; }
.create-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem 3rem; align-items: start; }

/* The two ways in: From phrases and Cast yourself, as two large chips. */
.doors { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.doors li { margin: 0; }
.doors a { display: inline-block; padding: .6rem 1rem; background: var(--ink-3); border-radius: 3px; text-decoration: none; font-weight: 600; font-size: 1rem; line-height: 1.25; transition: background var(--tone) linear; }
.doors a:hover { background: var(--ink-4); color: var(--text); }
.doors a[aria-current="page"] { background: var(--text); color: var(--ink); }
.doors a[aria-current="page"]:hover { background: var(--text); color: var(--ink); }

/* The photo well: a raised drop zone at 8px radius wrapping the file input. */
.photo-well { position: relative; background: var(--ink-3); border: 1px solid var(--text-2); border-radius: 8px; padding: 1rem; display: grid; gap: .75rem; justify-items: start; max-width: 420px; }
.photo-well input[type=file] { font: inherit; font-size: .9375rem; color: var(--text); max-width: 100%; }
.photo-well input[type=file]::file-selector-button { font-family: var(--font-body); font-weight: 600; font-size: .875rem; padding: .35rem .7rem; border: 1px solid var(--rule-2); border-radius: 3px; background: transparent; color: var(--text); cursor: pointer; margin-right: .75rem; }
.photo-well input[type=file]::file-selector-button:hover { background: var(--ink-4); }
.photo-preview { width: 160px; aspect-ratio: 2 / 3; background: var(--cyc); overflow: hidden; }
.photo-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; margin: 1rem 0 .25rem; max-width: 62ch; font-size: .9375rem; line-height: 1.45; }
.consent input { margin: .3rem 0 0; width: 1.1rem; height: 1.1rem; accent-color: var(--text); }

/* The cast sheet preview beside the casting form. */
.slate-aside { position: sticky; top: 1rem; background: var(--ink-2); padding: 1rem 1.1rem 1.1rem; }
.slate-aside .legend { display: block; margin: 0 0 .75rem; border-bottom: 1px solid var(--rule); padding-bottom: .4rem; }
.slate-aside .cast-num { display: block; margin-bottom: .35rem; }
.slate-aside .cast-name { margin-bottom: .75rem; }
.slate-aside dl { margin: 0 0 .9rem; display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; font-size: .875rem; }
.slate-aside dt { color: var(--text-2); }
.slate-aside dd { margin: 0; overflow-wrap: anywhere; }
.slate-sentence { background: var(--ink-3); padding: .75rem .85rem; font-size: .9375rem; line-height: 1.5; margin: 0 0 .6rem; min-height: 3.2rem; overflow-wrap: anywhere; }
.slate-aside .meta { margin: 0; }
.slate-inline { display: none; }
.preview-sheet { background: var(--ink-2); padding: 1rem 1.1rem 1.1rem; position: sticky; top: 1rem; }
.preview-sheet .display { font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem); }
.preview-sheet .rule-pink { margin: .75rem 0 1rem; }
.preview-sheet .prod-logline { font-size: 1rem; color: var(--text-2); }

/* Character page: the slate becomes the character's own cast row, full
   width on the sheet surface. */
.slate { background: var(--ink-2); padding: 1rem 1.25rem 1.1rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "num main actions"; gap: .75rem 1.5rem; align-items: start; margin: 1rem 0; }
.slate.no-num { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main actions"; }
.slate .cast-num { grid-area: num; font-size: 1.75rem; padding-top: .15rem; min-width: 1.5ch; }
.slate-main { grid-area: main; min-width: 0; }
.slate h1 { margin-bottom: .75rem; font-size: 2rem; }
.slate-rows { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 0 0 .75rem; padding: 0; }
.slate-rows > div { display: grid; gap: .15rem; min-width: 0; }
.slate-rows dt { display: block; }
.slate-rows dd { margin: 0; overflow-wrap: anywhere; }
.slate .status { margin: 0; max-width: none; }
.slate[data-state="failed"] .status { color: var(--fault); }
.slate[data-state="ready"] .status { color: var(--good); }
.slate-actions { grid-area: actions; display: grid; justify-items: end; gap: .4rem; text-align: right; }
.slate-actions .hint { margin: 0; }
.guest-line { margin: 0 0 1rem; max-width: none; }

/* The take board: hero takes on the sheet, one gets circled. */
.board { margin: 1.5rem 0 0; }
.board h2 { margin-top: 0; }
.takes-wrap { display: flex; gap: clamp(12px, 2vw, 24px); align-items: start; background: var(--ink-2); padding: clamp(12px, 2vw, 24px); margin: 0 0 .75rem; }
.takes-wrap .takes { flex: 1 1 auto; padding: 0; margin: 0; background: transparent; }
.takes { list-style: none; margin: 0 0 .75rem; padding: clamp(12px, 2vw, 24px); background: var(--ink-2); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(12px, 2vw, 24px); align-items: start; }
.board[data-mode="pick"] .takes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.board[data-mode="row"] .takes { grid-template-columns: repeat(auto-fill, 140px); }
.take { margin: 0; }
.take-label { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: .875rem; letter-spacing: .08em; color: var(--text-2); line-height: 1.3; margin: 0 0 .4rem; max-width: none; }
.take-box { position: relative; aspect-ratio: 2 / 3; background: var(--ink-3); overflow: visible; }
.take-box img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--cyc); }
.take-note { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 1rem; text-align: center; color: var(--text-2); font-size: .875rem; max-width: none; }
.take[data-state="refused"] .take-note, .take[data-state="failed"] .take-note { color: var(--fault); }
.take-foot { margin-top: .5rem; min-height: 1.8rem; }
.take-circled { margin: 0; color: var(--hi); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1rem; letter-spacing: .06em; line-height: 1.3; padding: .3rem 0; }
/* Siblings dim by their footage only, so a refused, failed or making note stays readable. */
.takes--circled .take:not([data-circled="1"]) .take-box img { opacity: .55; transition: opacity 200ms ease-out; }
/* The ring: marker yellow over a 2px ink under-stroke so --hi (2.55:1 on the grey cyc) stays legible. */
.ring { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; overflow: visible; pointer-events: none; }
.ring ellipse { fill: none; stroke: var(--hi); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transform-box: fill-box; transform-origin: center; transform: rotate(-4deg); }
.ring ellipse.ring-under { stroke: var(--ink-2); stroke-width: 7; }
.take--draw .ring ellipse { animation: ring-draw 600ms ease-out both; }
@keyframes ring-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.board-row { display: flex; align-items: center; gap: .75rem 1.5rem; flex-wrap: wrap; }
.board-row .meta { margin: 0; }
/* The source photo: a labelled 2:3 non-take at the end of the takes row, only while it exists. */
.source-photo { flex: 0 0 140px; margin: 0; }
.board[data-mode="pick"] .source-photo { flex-basis: 180px; }
.source-photo .frame { aspect-ratio: 2 / 3; }
.source-photo figcaption { margin-top: .4rem; }
.source-photo .meta { margin: .25rem 0 0; }

/* The room: hidden radios, the viewer well, the caption bar, the strip. */
.room { margin: 1.25rem 0 1rem; border: 0; padding: 0; min-width: 0; }
.strip-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px; overflow: hidden; pointer-events: none; }
.viewer { background: var(--ink-2); padding: clamp(12px, 2vw, 24px) clamp(12px, 2vw, 24px) 0; }
.pane { display: none; }
.pane-box { position: relative; height: min(68vh, 600px); aspect-ratio: 2 / 3; margin: 0 auto; max-width: 100%; background: var(--ink-2); overflow: hidden; }
.pane[data-aspect="1:1"] .pane-box { aspect-ratio: 1 / 1; }
.pane-box img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--cyc); }
.pane[data-state="empty"] .pane-box, .pane[data-state="waiting"] .pane-box, .pane[data-state="generating"] .pane-box, .pane[data-state="refused"] .pane-box, .pane[data-state="failed"] .pane-box { background: var(--ink-3); }
.pane[data-state="empty"] .pane-box { background: var(--ink-2); outline: 1px solid var(--rule-2); outline-offset: -1px; }
.pane-note { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; gap: .75rem; padding: 1rem; text-align: center; color: var(--text-2); font-size: 1.0625rem; line-height: 1.35; max-width: none; overflow: auto; }
.pane[data-state="refused"] .pane-note, .pane[data-state="failed"] .pane-note { color: var(--fault); }
.pane-note .btn { justify-self: center; }
.caption { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; flex-wrap: wrap; padding: .6rem 0 .75rem; min-height: 2.6rem; }
.cap { display: none; margin: 0; max-width: none; font-size: .875rem; line-height: 1.3; }
.cap .cap-label { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .875rem; }
.cap span + span { margin-left: 1rem; color: var(--text-2); }
.cap .cap-file, .cap .cap-aspect, .cap .cap-slot { font-family: var(--font-mono); font-size: .8125rem; }
.cap .cap-fallback { display: block; margin: .25rem 0 0; color: var(--text-2); }
.cap .cap-fallback.hidden { display: none; }
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); margin-top: clamp(8px, 1.2vw, 16px); }
.slot { display: block; cursor: pointer; min-width: 0; }
.slot-box { display: block; position: relative; aspect-ratio: 2 / 3; background: var(--ink-3); overflow: hidden; }
.slot[data-aspect="1:1"] .slot-box { aspect-ratio: 1 / 1; }
.slot-box img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--cyc); }
.slot[data-state="empty"] .slot-box { background: var(--ink-2); outline: 1px solid var(--rule-2); outline-offset: -1px; }
.slot-note { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: .4rem; text-align: center; color: var(--text-2); font-size: .8125rem; line-height: 1.3; }
.slot[data-state="refused"] .slot-note, .slot[data-state="failed"] .slot-note { color: var(--fault); }
.slot-cap { display: block; margin-top: .4rem; padding-top: .35rem; border-top: 2px solid transparent; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .875rem; line-height: 1.3; overflow-wrap: anywhere; }
.slot-cap small { display: block; color: var(--text-2); font-family: var(--font-mono); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .75rem; margin-top: .1rem; }
.room-tools { display: flex; justify-content: flex-end; }
.room-tools .btn { margin-top: .75rem; }
.room-foot { margin: 1rem 0 0; color: var(--text-2); font-size: .875rem; max-width: none; }
/* The checked radio chooses the pane, the caption and the underlined thumbnail; focus lands on the thumbnail. */
.strip-radio[value="hero"]:checked ~ .viewer :is(.pane, .cap)[data-view="hero"],
.strip-radio[value="three_quarter"]:checked ~ .viewer :is(.pane, .cap)[data-view="three_quarter"],
.strip-radio[value="profile"]:checked ~ .viewer :is(.pane, .cap)[data-view="profile"],
.strip-radio[value="back"]:checked ~ .viewer :is(.pane, .cap)[data-view="back"],
.strip-radio[value="closeup"]:checked ~ .viewer :is(.pane, .cap)[data-view="closeup"] { display: block; }
.strip-radio[value="hero"]:checked ~ .strip .slot[data-view="hero"] .slot-cap,
.strip-radio[value="three_quarter"]:checked ~ .strip .slot[data-view="three_quarter"] .slot-cap,
.strip-radio[value="profile"]:checked ~ .strip .slot[data-view="profile"] .slot-cap,
.strip-radio[value="back"]:checked ~ .strip .slot[data-view="back"] .slot-cap,
.strip-radio[value="closeup"]:checked ~ .strip .slot[data-view="closeup"] .slot-cap { border-top-color: var(--text); }
.strip-radio[value="hero"]:focus-visible ~ .strip .slot[data-view="hero"],
.strip-radio[value="three_quarter"]:focus-visible ~ .strip .slot[data-view="three_quarter"],
.strip-radio[value="profile"]:focus-visible ~ .strip .slot[data-view="profile"],
.strip-radio[value="back"]:focus-visible ~ .strip .slot[data-view="back"],
.strip-radio[value="closeup"]:focus-visible ~ .strip .slot[data-view="closeup"] { outline: 2px solid var(--focus); outline-offset: 3px; }

/* The sweep bar: any slot, pane, take or frame that is queued or generating. */
.slot[data-state="generating"] .slot-box::after, .pane[data-state="generating"] .pane-box::after, .take[data-state="generating"] .take-box::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: var(--text); animation: sweep var(--sweep) linear infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Character page: bible and pack. */
.bible-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem 3rem; align-items: start; margin-top: 2.5rem; }
.bible-grid h2 { margin-top: 0; }
.bible-grid h3 { margin-top: .5rem; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: .875rem; letter-spacing: .08em; color: var(--text-2); }
.copy-row { display: flex; gap: .75rem; flex-wrap: wrap; margin: 0 0 .5rem; }
.pack { background: var(--ink-3); padding: 1rem 1.1rem 1.1rem; }
.pack .legend { display: block; margin: 0 0 .75rem; }
.pack img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--cyc); margin-bottom: .75rem; }
.pack .file-list { list-style: none; padding: 0; margin: 0 0 .9rem; font-family: var(--font-mono); font-size: .8125rem; line-height: 1.5; color: var(--text-2); }
.pack .file-list li { margin: 0; border-bottom: 1px solid var(--rule); padding: .2rem 0; }
.pack .btn { width: 100%; }
.pack .hint { margin: .4rem 0 0; }
.next-row { margin-top: 2.5rem; max-width: none; }
.danger-row { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }

/* Plain text structures: ruled lists, the files list, the capability table. */
.index { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem 2rem; }
.index li { margin: 0; }
.index a { font-weight: 600; text-decoration: none; }
.index a:hover { text-decoration: underline; }
.index p { margin: .15rem 0 0; }
.ruled { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--rule); }
.ruled li { margin: 0; padding: .7rem 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(140px, 1fr) 3fr; gap: .25rem 1.5rem; align-items: baseline; }
.ruled li > a { font-weight: 600; text-decoration: none; }
.ruled li > a:hover { text-decoration: underline; }
.ruled li > span { color: var(--text-2); font-size: .9375rem; }
.ruled li > b { font-weight: 500; }
.ruled li > .mono { color: var(--text); font-size: .8125rem; }
.ruled.three li { grid-template-columns: minmax(140px, 1fr) 3fr minmax(60px, auto); }
.ruled.stages li { grid-template-columns: 11rem minmax(0, 1fr); }
.ruled.stages .stage-word { color: var(--text); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; letter-spacing: .04em; line-height: 1.1; }
.ruled.stages .stage-word.next { color: var(--text-2); }
.ruled.stages .stage-word .eyebrow { margin-right: .4rem; }
.files { grid-template-columns: minmax(180px, 1fr) 3fr; }
.files li { align-items: center; }
.files .file { display: flex; align-items: center; gap: .75rem; font-family: var(--font-mono); font-size: .8125rem; min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.files .mask { flex: none; width: 28px; aspect-ratio: 2 / 3; background: var(--ink-3); outline: 1px solid var(--rule-2); outline-offset: -1px; }
.files .mask[data-aspect="1:1"] { aspect-ratio: 1 / 1; }
.files .mask[data-aspect="16:9"] { width: 40px; aspect-ratio: 16 / 9; }
.files .mask[data-aspect="text"] { background: transparent; }
.files li.is-first .mask { outline: 2px solid var(--text); outline-offset: -2px; }
.steps li { margin-bottom: .6rem; }
.gallery-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.25rem 1rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.gallery-strip li { margin: 0; }
.gallery-strip a { text-decoration: none; display: block; }
.gallery-strip a:hover { color: var(--text); }
.gallery-strip img, .gallery-strip .placeholder { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--cyc); }
.gallery-strip .placeholder { background: var(--ink-3); color: var(--text-2); display: grid; place-items: center; font-size: .875rem; text-align: center; padding: .5rem; }
.gallery-strip p { margin: .4rem 0 0; max-width: none; }
.gallery-strip p b { font-weight: 600; }
.gallery-strip .meta { display: block; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th { text-align: left; border-bottom: 1px solid var(--text); padding: .4rem .5rem .5rem; white-space: nowrap; }
.table td { border-bottom: 1px solid var(--rule); padding: .6rem .5rem; vertical-align: top; }
.table td.mono { font-size: .8125rem; }
.table td.yes { color: var(--text); }
.table td.no { color: var(--text-2); }
.table td:first-child { padding-left: 0; } .table th:first-child { padding-left: 0; }
.table td a { font-weight: 600; text-decoration: none; }
.table td a:hover { text-decoration: underline; }
.panel { background: var(--ink-3); padding: 1rem 1.25rem 1.1rem; margin-bottom: 1rem; }
.panel h2 { margin-top: 0; }

/* Account: three ruled sections, legends over mono values. No pink. */
.account-section { border-top: 1px solid var(--rule); padding: 1.25rem 0 1.5rem; }
.account-section h2 { margin-top: 0; }
.account-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); gap: 1rem 2.5rem; margin: 0 0 1rem; }
.account-rows > div { display: grid; gap: .2rem; }
.account-rows dd { margin: 0; overflow-wrap: anywhere; }
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(10, 14, 26, .78); z-index: 100; align-items: center; justify-content: center; padding: 16px; }
.modal-backdrop.show { display: flex; }
.delete-modal { background: var(--ink-2); border: 1px solid var(--rule-2); width: 100%; max-width: 440px; padding: 1.25rem 1.4rem 1.4rem; }
.delete-modal h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; letter-spacing: .04em; margin-bottom: .75rem; }
.delete-modal .warning-text { color: var(--fault); margin-bottom: 1rem; }
.delete-modal label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .25rem; }
.delete-modal input[type=text] { width: 100%; padding: .55rem .7rem; border: 1px solid var(--text-2); border-radius: 3px; background: var(--ink-3); color: var(--text); font: inherit; font-family: var(--font-mono); letter-spacing: .1em; }
.delete-modal-footer { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: flex-end; margin-top: 1.25rem; }
.delete-modal-footer form { margin: 0; }
.btn-delete-confirm { color: var(--fault); border-color: var(--fault); }
.btn-delete-confirm:hover { background: var(--ink-3); color: var(--fault); }

/* Sign in: a narrow sheet, the pink Send code, the six-digit code in mono. */
.auth-sheet { max-width: 420px; margin: 1rem auto 0; background: var(--ink-2); padding: 1.5rem 1.5rem 1.6rem; }
.auth-sheet h1 { margin-bottom: 1rem; }
.auth-sheet .btn { width: 100%; }
.auth-sheet .btn + .btn, .auth-sheet .button-group { margin-top: .75rem; }
.auth-sheet .button-group { display: flex; gap: .75rem; flex-wrap: wrap; }
.auth-sheet .button-group .btn { width: auto; }
.auth-sheet .fineprint { margin: .75rem 0 0; }
.auth-or { display: flex; align-items: center; gap: .75rem; color: var(--text-2); font-size: .875rem; margin: 1rem 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--rule-2); }
.google-mark { width: 18px; height: 18px; flex: none; }
.magic-code-input { font-family: var(--font-mono); font-weight: 500; font-size: 1.5rem; letter-spacing: .3em; text-align: center; }
.field input.magic-code-input { font-family: var(--font-mono); font-weight: 500; font-size: 1.5rem; letter-spacing: .3em; text-align: center; }
#magic-link-code-step { display: none; }
#magic-link-code-step.show { display: block; }
#magic-link-email-step.hide { display: none; }
.flash { display: none; border-left: 2px solid var(--text-2); padding: .4rem .9rem; margin: .75rem 0 0; font-size: .9375rem; max-width: none; }
.flash.show { display: block; }
.flash.error { border-left-color: var(--fault); color: var(--fault); }
.flash.success, .flash.info { border-left-color: var(--good); color: var(--text); }
.code-instruction { margin-bottom: .25rem; overflow-wrap: anywhere; }
.code-instruction strong { font-family: var(--font-mono); font-weight: 500; font-size: .9375rem; }
.code-hint { margin-bottom: .75rem; }

@media (max-width: 960px) {
  .create-grid { grid-template-columns: minmax(0, 1fr); }
  .slate-aside, .preview-sheet { position: static; }
  .bible-grid { grid-template-columns: minmax(0, 1fr); }
  .slate { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num main" "actions actions"; }
  .slate.no-num { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "actions"; }
  .slate-actions { justify-items: start; text-align: left; }
  .prod { grid-template-columns: minmax(0, 1fr); }
  .prod-actions { justify-items: start; }
}
@media (max-width: 720px) {
  .lockup-word { font-size: 1rem; }
  .site-nav { gap: .25rem .9rem; }
  .ruled li { grid-template-columns: minmax(0, 1fr); }
  .ruled.three li { grid-template-columns: minmax(0, 1fr); }
  .ruled.stages li { grid-template-columns: minmax(0, 1fr); }
  .files li { grid-template-columns: minmax(0, 1fr); }
  .slate-aside, .preview-sheet { display: none; }
  .slate-inline { display: block; width: 100%; background: var(--ink-2); padding: .75rem .85rem; font-size: .9375rem; line-height: 1.5; margin: 0 0 .5rem; max-width: none; }
  .site-header .wrap { padding-top: .9rem; padding-bottom: .6rem; }
  .sheet { padding: 1rem 16px 1.1rem; margin-left: -16px; margin-right: -16px; }
  /* Footage takes the whole screen width; text keeps the 16px gutter. */
  .viewer, .takes, .takes-wrap { margin-left: -16px; margin-right: -16px; }
  .takes-wrap { flex-direction: column; }
  .takes-wrap .takes { margin: 0; width: 100%; }
  .source-photo { flex-basis: auto; width: 96px; }
  .pane-box { height: auto; width: 100%; }
  .board[data-mode="pick"] .takes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board[data-mode="row"] .takes { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .take-label, .take-circled { font-size: .8125rem; }
  .strip { gap: 6px; }
  .slot-cap { font-size: .6875rem; margin-top: .25rem; letter-spacing: .04em; }
  .slot-cap small { display: none; }
  .slot-note { font-size: .6875rem; padding: .2rem; }
  /* Cast rows on a phone: number and name on one line, the hero at 96px with
     the strip beside it, the mono data line last. */
  .cast-row { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "num main" "hero strip" "data data"; gap: .6rem .75rem; align-items: start; }
  .cast-num { font-size: 2rem; }
  .cast-main { display: contents; }
  .cast-name { grid-area: main; font-size: 1.25rem; }
  .cast-row .cast-strip { grid-area: strip; align-self: start; grid-template-columns: repeat(4, minmax(0, 48px)); }
  .cast-data { justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; gap: .25rem 1rem; min-width: 0; }
  .series-card-band .frame { width: 24%; }
  .account-rows { grid-template-columns: minmax(0, 1fr); }
  .auth-sheet { padding: 1.25rem 16px 1.4rem; margin-left: -16px; margin-right: -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .take--draw .ring ellipse { animation: none; }
  .takes--circled .take:not([data-circled="1"]) .take-box img { transition: none; }
  .slot[data-state="generating"] .slot-box::after, .pane[data-state="generating"] .pane-box::after, .take[data-state="generating"] .take-box::after, .frame[data-state="generating"]::after { animation: none; width: 50%; }
  .btn, .chip span, .doors a, .series-card-band, a.cast-row { transition: none; }
}

/* Cast yourself: the consent attestation under the photo field. */
.field.consent label { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; font-size: .9375rem; line-height: 1.45; cursor: pointer; }
.field.consent input[type=checkbox] { flex: none; margin-top: .25rem; width: 1rem; height: 1rem; accent-color: var(--text); }
.field.consent input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }