/* Reelsmith — "edit bay" design system. Warm grey paper, dark cinema strips, dot-matrix display, mono timecodes,
   one red playhead accent. Track colours encode where a choice lives: film (terracotta) → scene (sage) → shot (powder). */
@font-face { font-family: "Doto"; src: url("/static/fonts/doto.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/static/fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/static/fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/static/fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --paper: #E9E7E1;
  --sheet: #F5F4F0;
  --white: #FFFFFF;
  --ink: #131313;
  --muted: #64625C;
  --hair: #D3D0C8;
  --cinema: #101010;
  --cinema-2: #1D1D1C;
  --cinema-line: #2E2E2C;
  --cinema-text: #E9E7E1;
  --head: #E0442C;          /* playhead: primary action, selection */
  --head-ink: #FFFFFF;
  --film: #D07A57;
  --scene: #7FA587;
  --shot: #93B4DB;
  --signal: #3CCB75;
  --danger: #B42318;
  --dot: "Doto", "Courier New", monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 10px;
  --wrap: 1200px;
  --ink-2: #3A3935;         /* secondary body text */
  --on-track: #131313;      /* text on track colours (film/scene/shot chips) — same in both themes */
  --ok-ink: #1C7C45;
  --bar: rgba(233, 231, 225, .92);
  --ring: rgba(224, 68, 44, .18);
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .06);
  color-scheme: light;
  /* shot-script lanes: keyword ink on the light sheet, bar fills on the cinema strip */
  --dialogue-ink: #3F7351; --sound-ink: #6B41BC; --camera-ink: #3A6B97; --pause-ink: #A9761A; --place-ink: #B85C12;
  --off-ink: #6F6D68;
  --director: #7C4DCC; --director-ink: #FFFFFF; --director-hover: #6339B0;   /* everything the AI Director does */
  --director-on-cinema: #B48BFF;      /* Director purple on the always-dark cinema surfaces, both themes */
  --cinema-muted: #9C9A93;            /* secondary text on cinema surfaces, both themes */
  --action-bar: #BFBCB4; --dialogue-bar: #8FC09C; --sound-bar: #B48BFF; --camera-bar: #93B4DB; --pause-bar: #E7B65C;
}
/* Dark: the edit bay with the lights off. Cinema strips stay black; paper becomes graphite. */
:root[data-theme="dark"] {
  --paper: #161615; --sheet: #1F1F1D; --white: #292826; --ink: #ECEAE4; --ink-2: #C9C7C0; --muted: #A3A199;
  --hair: #393835; --cinema: #0A0A09; --cinema-2: #1D1D1C; --cinema-line: #2E2E2C; --head: #E9573E; --danger: #F0624F;
  --ok-ink: #4CC583; --bar: rgba(22, 22, 21, .9); --ring: rgba(233, 87, 62, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35); color-scheme: dark;
  --dialogue-ink: #8FC09C; --sound-ink: #B48BFF; --camera-ink: #93B4DB; --pause-ink: #E7B65C; --place-ink: #F29A55;
  --off-ink: #8D8B85;
  --director: #B48BFF; --director-ink: #131313; --director-hover: #C9A9FF;
  --action-bar: #BFBCB4; --dialogue-bar: #8FC09C; --sound-bar: #B48BFF; --camera-bar: #93B4DB; --pause-bar: #E7B65C;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161615; --sheet: #1F1F1D; --white: #292826; --ink: #ECEAE4; --ink-2: #C9C7C0; --muted: #A3A199;
    --hair: #393835; --cinema: #0A0A09; --cinema-2: #1D1D1C; --cinema-line: #2E2E2C; --head: #E9573E; --danger: #F0624F;
    --ok-ink: #4CC583; --bar: rgba(22, 22, 21, .9); --ring: rgba(233, 87, 62, .3);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35); color-scheme: dark;
    --dialogue-ink: #8FC09C; --sound-ink: #B48BFF; --camera-ink: #93B4DB; --pause-ink: #E7B65C; --place-ink: #F29A55;
    --off-ink: #8D8B85;
  --director: #B48BFF; --director-ink: #131313; --director-hover: #C9A9FF;
    --action-bar: #BFBCB4; --dialogue-bar: #8FC09C; --sound-bar: #B48BFF; --camera-bar: #93B4DB; --pause-bar: #E7B65C;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); }
img, video { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--head); }
:focus-visible { outline: 2px solid var(--head); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.1; margin: 0 0 .5em; font-weight: 700; }
h1 { font: 800 clamp(2rem, 5vw, 3.4rem)/1 var(--dot); text-transform: uppercase; letter-spacing: -.01em; }
h2 { font: 800 clamp(1.5rem, 3.4vw, 2.3rem)/1.05 var(--dot); text-transform: uppercase; }
h3 { font-size: 1.05rem; }
em, .serif { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; }
h1 em, h2 em { font-size: 1.12em; }
p { margin: 0 0 1em; }
code, .mono { font-family: var(--mono); font-size: .88em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only:focus { position: static; width: auto; height: auto; clip: auto; }
[hidden] { display: none !important; }   /* the attribute wins over component display rules */
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.between { justify-content: space-between; }
ul.row { list-style: none; padding: 0; margin: 0; }
.label, .kicker, .eyebrow { font: 500 .72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.kicker { display: block; margin-bottom: .8rem; }
.count::before { content: "( "; } .count::after { content: " )"; }

/* ---------- buttons & forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px;
  border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink);
  font: 500 .8rem var(--mono); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-primary { background: var(--head); border-color: var(--head); color: var(--head-ink); }
.btn-primary:hover { background: #C2361F; border-color: #C2361F; color: #fff; }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-small { min-height: 34px; padding: 0 12px; font-size: .72rem; }
.btn-director { border-color: var(--director); color: var(--director); }
.btn-director:hover { background: var(--director); border-color: var(--director); color: var(--director-ink); }
.btn-director:disabled:hover { background: transparent; color: var(--director); }
.btn-director-solid { background: var(--director); color: var(--director-ink); }
.btn-director-solid:hover { background: var(--director-hover); border-color: var(--director-hover); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: var(--ink); }
.btn-primary:disabled:hover { background: var(--head); color: #fff; }
.link-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.text-link { font: 500 .8rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
label { display: block; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 .4em; }
.hint { display: block; text-transform: none; letter-spacing: 0; font: .82rem/1.4 var(--sans); color: var(--muted); margin-top: .25em; }
.field { margin-bottom: 1rem; min-width: 0; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  width: 100%; min-height: 42px; padding: .55em .75em; border: 1px solid var(--hair); border-radius: 8px;
  background: var(--white); color: var(--ink); font: 1rem var(--sans); }
select { appearance: none; padding-right: 2.2em;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px var(--ring); }
input[type=file] { font: .85rem var(--sans); }
.check { display: flex; gap: 10px; align-items: flex-start; font: .95rem/1.4 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.check input { margin-top: .25em; accent-color: var(--head); width: 18px; height: 18px; flex: none; }
.error { color: var(--danger); font-weight: 700; }
.notice { padding: .75em 1em; border-left: 3px solid var(--ink); background: var(--sheet); border-radius: 0 8px 8px 0; margin: 0 0 1rem; }
/* Sound cue cheat sheet (common.js soundField): click a cue to add it to the script. */
.cues { margin-top: 10px; border: 1px solid var(--hair); border-radius: 8px; padding: 10px 12px; background: var(--sheet); }
.cues > summary { color: var(--ink-2); }
.cue-group { margin-top: 12px; }
.cue-group .label { margin: 0 0 6px; }
.cue-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cue-group li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cue { font: .84rem/1.35 var(--mono); text-align: left; color: var(--ink); background: var(--white); border: 1px solid var(--hair);
  border-radius: 6px; padding: .3em .6em; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.cue:hover { border-color: var(--ink); }
.cue:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.cue-what { font: .82rem/1.4 var(--sans); color: var(--muted); }
/* Voice extract consent (characters.js realVoice). */
.consent-who { border: 0; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.consent-who legend { width: 100%; margin-bottom: 8px; }
.consent { display: grid; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 8px; background: var(--sheet); }
.consent:empty { display: none; }
.sect-body audio { width: 100%; margin-bottom: 8px; }
/* Model guide + plan notes (common.js modelGuide / fitNotes). */
.guide { margin: 8px 0 16px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 8px; background: var(--sheet); }
.guide ul, .fit-notes ul { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 6px; font: .86rem/1.45 var(--sans); color: var(--ink-2); }
.fit-notes { margin: 10px 0 16px; }
.fit-notes .label { margin: 0; }
.fit-notes.director-said { margin-top: 0; padding-left: 12px; border-left: 3px solid var(--head); }
.fit-notes.director-said .label { color: var(--head); }
.fit-notes.director-said > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px; }
.fit-notes.director-said > summary::-webkit-details-marker { display: none; }
.fit-notes.director-said > summary::before { content: "▸"; font-size: .9em; transition: transform .12s; }
.fit-notes.director-said[open] > summary::before { transform: rotate(90deg); }
.fit-notes li.warn, .fit-notes li.error { color: var(--ink); }
.fit-notes li.error::marker { color: var(--danger); }
.fit-notes li.warn::marker { color: #D99A1E; }
.notice.warn { border-color: #D99A1E; } .notice.err { border-color: var(--danger); } .notice.ok { border-color: var(--signal); }
.tag { display: inline-block; font: 500 .66rem var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: .2em .55em; border: 1px solid currentColor; border-radius: 999px; }
.tag.done { color: var(--ok-ink); } .tag.failed { color: var(--danger); } .tag.running, .tag.queued { color: var(--head); } .tag.cancelled { color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--tabbar, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: .7em 1.2em;
  border-radius: 999px; z-index: 60; max-width: calc(100% - 32px); font: .9rem var(--sans); }
.toast.err { background: var(--danger); color: #fff; }

/* ---------- chrome ---------- */
.topbar, .site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bar); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hair); }
.topbar .wrap, .site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.brand { font: 800 1.25rem var(--dot); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; color: var(--ink); }
.brand span { color: var(--head); }
.topbar nav, .site-head nav { display: flex; gap: 18px; align-items: center; font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.topbar nav a, .site-head nav a:not(.btn) { text-decoration: none; }
.topbar nav a[aria-current=page] { color: var(--head); }
@media (max-width: 680px) { .hide-sm { display: none; } .topbar nav, .site-head nav { gap: 12px; } }
.site-foot { border-top: 1px solid var(--hair); margin-top: 64px; padding: 28px 0 40px; font-size: .85rem; color: var(--muted); }
.cols-foot { display: grid; gap: 18px; }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
@media (min-width: 800px) { .cols-foot { grid-template-columns: 2fr 1fr 1fr; } }
.crumbs { font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 10px; }
.crumbs a { text-decoration: none; }

/* ---------- generic app blocks ---------- */
.app { padding-block: 28px 20px; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 22px; }
.page-head h1 { margin: 0; }
.card, .panel { background: var(--sheet); border: 1px solid var(--hair); border-radius: var(--r); padding: 20px; }
.card + .card { margin-top: 16px; }
.cols { display: grid; gap: 16px; }
@media (min-width: 960px) { .cols { grid-template-columns: 3fr 2fr; } }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.list { list-style: none; padding: 0; margin: 0; }
.list > li { border-bottom: 1px solid var(--hair); padding: 12px 0; }
.empty { text-align: center; padding: 36px 16px; border: 1px dashed var(--muted); border-radius: var(--r); color: var(--muted); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
th { font: 500 .68rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
pre { white-space: pre-wrap; word-break: break-word; }
.auth-box { max-width: 440px; margin: 48px auto; background: var(--sheet); border: 1px solid var(--hair); border-radius: var(--r); padding: 30px; }
.auth-box h1 { font-size: 2rem; }
.auth-box .btn { width: 100%; }
.or { text-align: center; margin: 14px 0; font: 500 .7rem var(--mono); text-transform: uppercase; color: var(--muted); }
.doc { max-width: 760px; } .doc h2 { font-size: 1.4rem; margin-top: 1.6em; } .stamp { font: .78rem var(--mono); color: var(--muted); }
.todo { background: #FFE9A8; color: var(--on-track); padding: 0 .2em; }
.qr { background: #fff; padding: 8px; border-radius: 8px; }
details > summary { cursor: pointer; font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .07em; }

/* ---------- film strip (projects, scenes, shots) ---------- */
.sprockets { position: relative; background: var(--cinema); border-radius: var(--r); padding: 22px 0; }
.sprockets::before, .sprockets::after { content: ""; position: absolute; left: 10px; right: 10px; height: 8px;
  background: repeating-linear-gradient(90deg, #3A3936 0 10px, transparent 10px 22px); border-radius: 2px; }
.sprockets::before { top: 7px; } .sprockets::after { bottom: 7px; }
.sprockets-v { padding: 14px 18px; }
.sprockets-v::before, .sprockets-v::after { top: 10px; bottom: 10px; left: auto; right: auto; width: 8px; height: auto;
  background: repeating-linear-gradient(180deg, #3A3936 0 10px, transparent 10px 22px); }
.sprockets-v::before { left: 5px; } .sprockets-v::after { right: 5px; }

.projects { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.project-card { text-decoration: none; color: inherit; display: block; }
.project-card .sprockets { padding: 20px 10px; transition: transform .15s ease; }
.project-card:hover .sprockets { transform: translateY(-3px); }
.project-card .shot-frame { aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--cinema-2); display: grid; place-items: center; }
.project-card .shot-frame img { width: 100%; height: 100%; object-fit: cover; }
.project-card .shot-frame span { font: 800 1.6rem var(--dot); color: var(--cinema-text); text-transform: uppercase; padding: 0 12px; text-align: center; }
.project-card h3 { margin: 12px 0 2px; font-size: 1.1rem; }
.project-card .meta { font: .74rem var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.project-card.new .sprockets { background: transparent; border: 1px dashed var(--muted); }
.project-card.new .sprockets::before, .project-card.new .sprockets::after { background: repeating-linear-gradient(90deg, var(--hair) 0 10px, transparent 10px 22px); }
.project-card.new .shot-frame { background: transparent; }
.project-card.new .shot-frame span { color: var(--ink); font-size: 1.3rem; }

/* The reel: a horizontal strip with arrows; the selected frame opens a panel below. */
.reel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.reel-head > :last-child { margin-left: auto; }   /* stays right when the heading is screen-reader only */
.reel { display: flex; align-items: center; gap: 8px; }
.reel-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 14px; flex: 1; scrollbar-width: none; }
.reel-track::-webkit-scrollbar { display: none; }
.reel-arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cinema-line); background: var(--cinema-2); color: var(--cinema-text); cursor: pointer; font: 1rem var(--mono); margin: 0 6px; }
.reel-arrow:hover { border-color: var(--head); color: var(--head); }
.frame { position: relative; flex: none; scroll-snap-align: center; }
.frame-btn { flex: none; width: 200px; scroll-snap-align: center; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--cinema-text); }
.frame-btn .win { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--cinema-2); display: grid; place-items: center; border: 2px solid transparent; }
.frame-btn .win img { width: 100%; height: 100%; object-fit: cover; }
.frame-btn .win .name { font: 800 1.05rem/1.05 var(--dot); text-transform: uppercase; padding: 0 10px; text-align: center; }
.frame-btn .tc { position: absolute; left: 5px; top: 5px; font: 500 .62rem var(--mono); background: rgba(16, 16, 16, .78); padding: .15em .45em; border-radius: 3px; }
.frame-btn .role { position: absolute; right: 5px; top: 5px; font: 500 .58rem var(--mono); text-transform: uppercase; padding: .15em .45em; border-radius: 3px; background: var(--shot); color: var(--on-track); }
.frame-btn .role.frame { background: var(--head); color: #fff; }
.frame-btn .role.take { background: var(--ink); color: var(--paper); }
.frame-btn .cap { display: block; margin-top: 6px; font: 500 .7rem var(--mono); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .75; }
.frame-btn[aria-current=true] .win { border-color: var(--head); box-shadow: 0 -6px 0 -2px var(--head), 0 6px 0 -2px var(--head); }
.frame-btn[aria-current=true] .cap { opacity: 1; color: #fff; }
.frame-btn.add .win { border: 1px dashed #4A4945; background: transparent; }
.frame-btn.add .win .name { font-size: 1.6rem; }
@media (max-width: 600px) { .frame-btn { width: 160px; } .reel-arrow { display: none; } }

.callout { position: relative; margin-top: 14px; background: var(--sheet); border: 1px solid var(--hair); border-radius: var(--r); padding: 20px; }
.callout::before { content: ""; position: absolute; top: -9px; left: var(--notch, 50%); width: 16px; height: 16px; background: var(--sheet);
  border-left: 1px solid var(--hair); border-top: 1px solid var(--hair); transform: translateX(-50%) rotate(45deg); }
.callout h2 { font-size: 1.5rem; margin-bottom: .3em; }
.actions { display: flex; flex-direction: column; gap: 10px; }
.actions .btn { width: 100%; }
.pair { display: grid; gap: 0 12px; grid-template-columns: 1fr 1fr; }
.trio { display: grid; gap: 0 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) { .trio { grid-template-columns: 1fr; } }

/* ---------- direction controls ---------- */
.lvl { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--film); flex: none; }
.lvl.scene { background: var(--scene); } .lvl.shot { background: var(--shot); }
.tabs { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.tabs button { border: 0; background: transparent; padding: 8px 16px; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .07em; cursor: pointer; color: var(--ink); }
.tabs button[aria-pressed=true] { background: var(--ink); color: var(--paper); }
.drop { display: grid; place-items: center; aspect-ratio: 16 / 9; border: 1px dashed var(--muted); border-radius: 8px; background: var(--white); overflow: hidden; margin-bottom: 1rem; text-align: center; padding: 10px; }
.drop.has { padding: 0; }
.drop img { width: 100%; height: 100%; object-fit: cover; }

/* The prompt stack: where each piece of the final prompt comes from, as timeline tracks. */
.stack { background: var(--cinema); color: var(--cinema-text); border-radius: var(--r); padding: 14px; }
.stack .track { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: start; margin-bottom: 8px; }
.stack .track > span { font: 500 .62rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: #9C9A93; padding-top: 5px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font: .72rem var(--mono); padding: .3em .6em; border-radius: 6px; color: var(--on-track); background: var(--film); }
.chip.scene { background: var(--scene); } .chip.shot { background: var(--shot); } .chip.ghost { background: var(--cinema-2); color: #9C9A93; }
.stack pre { margin: 10px 0 0; font: .74rem/1.5 var(--mono); color: #C9C7C0; max-height: 220px; overflow: auto; border-top: 1px solid var(--cinema-line); padding-top: 10px; }
/* Settings panels (film, scene, shot): fixed main block, then groups of collapsible sections, one per category. */
.settings-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.settings-head h2 { margin: 0; font-size: 1.5rem; }
.settings-head .kicker { margin-bottom: .3rem; }
.settings-head .tabs { margin-bottom: 0; }
/* Shot panel: Advise/Enhance centred between the title and Save/Delete */
.settings-head.head-centre { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; }
.head-director { display: flex; gap: 8px; }
.head-centre > .head-acts { justify-self: end; }
@media (max-width: 680px) { .settings-head.head-centre { display: flex; } .head-centre > .head-acts { margin-left: 0; } }
.reserve { visibility: hidden; }
.shot-mode { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.shot-mode .mode-hint { margin: 0; text-align: right; }
@media (max-width: 600px) { .shot-mode { align-items: flex-start; } .shot-mode .mode-hint { text-align: left; } }
.settings-main { display: grid; gap: 0 20px; }
@media (min-width: 860px) { .settings-main { grid-template-columns: 1.5fr 1fr; } }
.sect-group { margin-top: 22px; }
.group-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.group-head .label { display: flex; align-items: center; gap: 8px; }
.group-head select { width: auto; min-width: 210px; min-height: 34px; font-size: .9rem; }
.sect { border-top: 1px solid var(--hair); }
.sect:last-child { border-bottom: 1px solid var(--hair); }
.sect > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 2px; list-style: none; font: 700 1rem var(--sans); text-transform: none; letter-spacing: 0; }
.sect > summary::-webkit-details-marker { display: none; }
.sect > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 6px 4px 0; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); transition: transform .15s ease; }
.sect[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.sect > summary:hover .sect-name { color: var(--head); }
.sect > summary:focus-visible { outline: 2px solid var(--head); outline-offset: 2px; border-radius: 4px; }
.sect-name { flex: none; margin-right: auto; }
.ico { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-texture, .ico-palette { stroke-width: 2.4; }
/* Thematic icon colours: warm light, wood furniture, cool camera blues. */
.ico-lighting { color: #E3B505; } .ico-dressing { color: #A9713F; } .ico-set { color: #8C7B6B; } .ico-atmosphere { color: #7FA0BC; }
.ico-palette { color: #D07A57; } .ico-mood { color: #C9708F; } .ico-rendering { color: #D07A57; } .ico-tradition { color: #A0784E; }
.ico-world { color: #4E9C8C; } .ico-place { color: #5E9A5A; } .ico-characters { color: #C77D5B; } .ico-genre { color: #8E6FB5; } .ico-motion { color: #5E9AB5; }
.ico-texture { color: #9A8F7D; } .ico-sound, .ico-audio { color: #7E8FD1; } .ico-vfx { color: #E07B39; } .ico-director { color: #B47FE0; } .ico-trash { color: var(--danger); }
.ico-shot, .ico-angle, .ico-movement, .ico-lens, .ico-composition, .ico-speed { color: #5B8FCB; }
.ico-look { color: #4E9C8C; } .ico-photos, .ico-card { color: #D07A57; } .ico-personality { color: #E3B505; } .ico-behaviour { color: #C77D5B; }
.ico-wardrobe { color: #5E9AB5; } .ico-voice { color: #7E8FD1; } .ico-prompt { color: var(--muted); }
.sect-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: .78rem var(--mono); color: var(--muted); }
.sect-val.set { color: var(--ink); font-weight: 500; }
.sect-tools { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin: 0 0 10px; }
.sect-tools .hint { margin: 0; }
.sect-body { padding-bottom: 16px; }
.picker { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-template-rows: auto; grid-auto-rows: 1fr; padding-bottom: 18px; }
.pick { position: relative; display: flex; flex-direction: column; margin: 0; border: 1px solid var(--hair); border-radius: 8px; background: var(--white); overflow: hidden; cursor: pointer;
  font: .9rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.pick input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.pick picture, .opt picture { display: block; }
.pick img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--cinema-2); }
.pick .swatch { display: flex; height: 12px; } .pick .swatch i { flex: 1; }
.pick-name { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin: 0; padding: 8px 10px 0; font: 700 .9rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
/* Two lines of description; longer text drifts slowly up and back (driftLongText sets --drift). */
.pick-blurb { display: block; height: 2.7em; margin: 2px 10px 9px; overflow: hidden; font-size: .78rem; line-height: 1.35; color: var(--muted); }
.pick-blurb > span { display: block; }
.pick-blurb.drifts > span { animation: drift var(--drift-time, 6s) ease-in-out infinite alternate; }
.pick:hover .pick-blurb.drifts > span { animation-play-state: paused; }
@keyframes drift { 0%, 18% { transform: translateY(0); } 82%, 100% { transform: translateY(var(--drift, 0)); } }
@media (prefers-reduced-motion: reduce) { .pick-blurb.drifts > span { animation: none; } }
/* Head row above the cards: Not set · Extract from · Custom (own words, widest). */
.pick-head { grid-column: 1 / -1; display: flex; gap: 10px; }
.pick-head > .pick { flex: 1 1 0; min-width: 0; }
.pick-head > .pick.custom { flex: 3 1 0; }
.pick.custom { cursor: default; border-style: dashed; background: transparent; }
.pick.custom .pick-name { cursor: pointer; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pick.custom textarea { flex: 1; min-height: 84px; margin: 6px 10px 10px; width: auto; font-size: .92rem; resize: vertical; }
.pick.custom:has(input:checked) .pick-name { color: var(--head); }
.pick:hover { border-color: var(--ink); }
.pick:has(input:checked) { border-color: var(--head); box-shadow: 0 0 0 2px var(--head); }
.pick:has(input:checked)::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--head); color: var(--head-ink); font: 700 .75rem var(--sans); }
.pick:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
/* "Not set": no value at this level (inherit, or leave it to the model). */
.pick.unset, .pick.extract { border-style: dashed; background: transparent; }
.pick.extract { cursor: default; }
.pick.extract .pick-blurb { height: auto; }
.extract-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 10px 10px; }
.pick.unset .pick-name, .pick.extract .pick-name { padding-top: 12px; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pick.unset:has(input:checked) .pick-name { color: var(--head); }
/* Inspiration-only categories: own words on top, display-only cards below. */
.pick.describe { grid-column: 1 / -1; }
.picker:has(> .ref-note) { grid-template-rows: auto auto; }   /* description + note rows hug content; card rows stay equal */
.pick.describe .pick-name { cursor: default; }
.pick.ref { cursor: default; }
.pick.ref:hover { border-color: var(--hair); }
.pick.ref.on { border-color: var(--head); box-shadow: 0 0 0 2px var(--head); }
.ref-note { grid-column: 1 / -1; margin: 0; padding: 9px 12px; border-left: 3px solid var(--head); background: var(--sheet); font-size: .82rem; color: var(--ink-2); }
@media (max-width: 600px) { .picker { grid-template-columns: repeat(2, 1fr); gap: 8px; } .pick-head { flex-wrap: wrap; gap: 8px; } .pick-head > .pick.custom { flex-basis: 100%; } }
.push { margin-left: auto; }
.estimate { font: .8rem var(--mono); }
.estimate strong { font-size: 1.1rem; }

/* presets */
.presets { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.preset { flex: none; width: 148px; border: 1px solid var(--hair); border-radius: 8px; background: var(--white); padding: 0; overflow: hidden; cursor: pointer; text-align: left; color: var(--ink); }
.preset img, .preset .ph { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--cinema-2); }
.preset span { display: block; padding: 7px 9px; font: 500 .7rem var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.preset[aria-pressed=true] { border-color: var(--head); box-shadow: 0 0 0 2px var(--head); }

/* renders */
/* Renders: video cards in a grid that adds columns as the window grows. */
.renders-h { margin: 28px 0 12px; }
.render-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.render-card { min-width: 0; }
.render-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--cinema); }
.render-thumb video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.render-thumb > .tag { position: absolute; top: 8px; left: 8px; background: rgba(16, 16, 16, .78); border-color: transparent; pointer-events: none; }
.render-thumb > .tag.done { display: none; }
.render-thumb > .tag.final { color: var(--ok-ink); }
.render-card.is-final .render-thumb { outline: 2px solid var(--ok-ink); outline-offset: 2px; }
.render-card.markable { cursor: pointer; padding: 6px; margin: -6px; border-radius: 14px; transition: background .15s; }
.render-card.markable:hover { background: var(--hair); }
.render-card.markable:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
.render-card.markable video { cursor: auto; }
.render-thumb > .frame-del { top: 6px; right: 6px; bottom: auto; }
.render-card:hover .frame-del, .render-card:focus-within .frame-del { opacity: 1; }
.render-ph { display: grid; place-content: center; gap: 10px; height: 100%; padding: 0 18%; text-align: center; color: var(--cinema-text); font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.render-ph.failed { color: #F0624F; } .render-ph.cancelled { color: #9C9A93; }
.render-body { padding: 10px 2px 0; }
.render-title { margin: 0; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.render-meta { margin: 2px 0 0; font: .74rem var(--mono); color: var(--muted); }
.render-edit { margin: 4px 0 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Re-Render with words (render.js editBox) */
.render-edit-toggle { margin-left: auto; }
.take-edit { margin-top: 8px; display: grid; gap: 6px; }
.take-edit .take-edit-text { min-height: 0; resize: vertical; }
.take-edit select { width: 100%; min-width: 0; }
.take-edit .btn { justify-self: center; }
.render-body .row { margin-top: 8px; }
.render-body .error { margin: 6px 0 0; }
.render-empty { grid-column: 1 / -1; }
progress { width: 100%; accent-color: var(--head); }

/* ---------- storage bar (Settings) ---------- */
.storage-use { margin: 14px 0 18px; }
.storage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.storage-bar { height: 10px; margin-top: 6px; border-radius: 999px; background: var(--hair); overflow: hidden; }
.storage-bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ink-2); transition: width .3s ease; }
.storage-bar.near > span { background: var(--head); }
.storage-bar.full > span { background: var(--danger); }
.storage-use .hint { margin-top: 6px; }

/* ---------- library ---------- */
.lib { display: grid; gap: 24px; } .lib > * { min-width: 0; }
@media (min-width: 900px) { .lib { grid-template-columns: 260px 1fr; } }
.lib-nav { position: sticky; top: 80px; align-self: start; }
.lib-nav ol { list-style: none; padding: 0; margin: 0 0 18px; }
.lib-nav button, .lib-nav a { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; border-left: 2px solid var(--hair); padding: 7px 12px; text-align: left; cursor: pointer; font: .95rem var(--sans); color: var(--ink); }
.lib-nav button[aria-current=true], .lib-nav a[aria-current=true] { border-color: var(--head); font-weight: 700; }
.lib-nav a { text-decoration: none; }
.lib-nav .count { margin-left: auto; font: .7rem var(--mono); color: var(--muted); }
@media (max-width: 899px) { .lib-nav { position: static; } .lib-nav ol { display: flex; overflow-x: auto; gap: 4px; } .lib-nav li { flex: none; } .lib-nav button, .lib-nav a { border-left: 0; border-bottom: 2px solid var(--hair); white-space: nowrap; } }
.options { columns: 3 220px; column-gap: 14px; }
.opt { break-inside: avoid; margin-bottom: 14px; background: var(--white); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.opt img { display: block; width: 100%; height: auto; }
.opt .swatch { display: flex; height: 70px; } .opt .swatch i { flex: 1; } .opt img + .swatch { height: 12px; }
.opt .body { padding: 11px 14px 13px; }
.opt .name { font: 700 1rem var(--sans); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 0 0 2px; }
.opt .blurb { margin: 0; color: var(--muted); font-size: .88rem; }
.opt .credit { margin: 6px 0 0; font: .64rem/1.3 var(--mono); color: var(--muted); }
.options .ref-note { column-span: all; margin: 0 0 16px; }
.lib-cat + .lib-cat { margin-top: 40px; } .lib.one-at-a-time .lib-cat + .lib-cat { margin-top: 0; }
.lib-cat .ref-note { margin: 0 0 16px; }
.lib-cat { scroll-margin-top: 80px; }
.opt-cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--head); }

/* ---------- landing ---------- */
.hero { padding-block: 56px 32px; }
.hero h1 { font-size: clamp(2.6rem, 9vw, 6.4rem); line-height: .92; margin-bottom: .35em; }
.lede { font-size: 1.15rem; max-width: 56ch; color: var(--ink-2); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 22px 0 10px; }
.cta-note { font: .74rem var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.hero-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.05fr 1fr; } }
.hero-shot { margin: 0; }
.hero-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--shadow); background: var(--cinema); }

/* Signature: the edit timeline. A playhead runs across film/scene/shot tracks and reads out the composed prompt. */
.timeline { background: var(--sheet); border: 1px solid var(--hair); border-radius: 14px; padding: 14px 14px 12px; position: relative; overflow: hidden; }
.tl-ruler { display: flex; justify-content: space-between; font: .6rem var(--mono); color: var(--muted); padding-left: 72px; margin-bottom: 8px; }
.tl-row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; margin-bottom: 7px; }
.tl-row > span { font: 500 .62rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tl-lane { position: relative; height: 34px; }
.tl-clip { position: absolute; top: 0; bottom: 0; border-radius: 7px; padding: 0 8px; display: flex; align-items: center; font: .66rem var(--mono); color: var(--on-track); white-space: nowrap; overflow: hidden; }
.tl-film { background: var(--film); } .tl-scene { background: var(--scene); } .tl-shot { background: var(--shot); }
.tl-audio { background: #B9C9B2; background-image: repeating-linear-gradient(90deg, rgba(19, 19, 19, .35) 0 2px, transparent 2px 5px); }
.tl-head { position: absolute; top: 30px; height: 166px; left: 86px; width: 2px; background: var(--head); z-index: 2; pointer-events: none; }
.tl-head::before { content: ""; position: absolute; top: -6px; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--head); }
.tl-read { display: grid; gap: 4px; border-top: 1px solid var(--hair); padding-top: 10px; margin-top: 6px; font: .72rem/1.45 var(--mono); }
.tl-read b { color: var(--head); font-weight: 500; }
.tl-read output { color: var(--ink-2); min-height: 4.4em; }

.models { border-block: 1px solid var(--hair); padding: 14px 0; font: .74rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
section.band { padding: 72px 0; }
section.band.alt { background: var(--sheet); border-block: 1px solid var(--hair); }
section.band.dark { background: var(--cinema); color: var(--cinema-text); }
section.band.dark .muted, section.band.dark .label, section.band.dark .kicker, section.band.dark th { color: var(--cinema-muted); }
.byok { display: grid; gap: 32px; }
@media (min-width: 900px) { .byok { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.problem-cards { margin-top: 20px; }
.problem-answer { margin: 22px 0 0; max-width: 62ch; font-size: 1.1rem; font-weight: 600; }
.providers-table th[scope=row] { font: .85rem var(--mono); text-align: left; vertical-align: top; white-space: nowrap; }
.providers-table th[scope=row] a { color: inherit; }
.model-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.model-list li { display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.model-list .mono { font-size: .78rem; opacity: .75; }
@media (max-width: 600px) {
  .providers-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .providers-table tr, .providers-table th[scope=row], .providers-table td { display: block; }
  .providers-table th[scope=row] { padding-bottom: 4px; border-bottom: 0; }
  .providers-table td { padding-top: 0; }
}
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: 14px; }
.steps li::before { content: "0" counter(step); font: 800 2rem var(--dot); color: var(--head); display: block; margin-bottom: 6px; }
@media (min-width: 700px) { .steps-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .steps-5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .steps-5 { grid-template-columns: repeat(5, 1fr); } }
.features { display: grid; gap: 14px; }
@media (min-width: 700px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature { background: var(--sheet); border: 1px solid var(--hair); border-radius: var(--r); padding: 18px; }
.feature h3 { margin-bottom: .35em; }
.feature p { margin: 0; color: var(--muted); font-size: .95rem; }
.features.get { margin-top: 20px; }
.feature-director { grid-column: 1 / -1; border-color: var(--director); }
.feature-director h3 { color: var(--director); }
.feature-director ul { margin: 12px 0 0; padding-left: 1.1em; display: grid; gap: 8px 32px; color: var(--ink-2); font-size: .95rem; }
@media (min-width: 860px) { .feature-director ul { grid-template-columns: 1fr 1fr; } }
.feature-director li strong { color: var(--director); }
.feature-shot { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: calc(var(--r) - 4px); border: 1px solid var(--hair); margin-bottom: 14px; background: var(--hair); }
.levels { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 800px) { .levels { grid-template-columns: repeat(3, 1fr); } }
.level { border-radius: var(--r); padding: 16px 18px; color: var(--on-track); }
.level.film { background: var(--film); } .level.scene { background: var(--scene); } .level.shot { background: var(--shot); }
.level h3 { font: 800 1.3rem var(--dot); text-transform: uppercase; margin-bottom: 6px; }
.level p { margin: 0; font-size: .92rem; }
.levels + .timeline { margin: 18px 0 0; }
.keys-table td:first-child { font-family: var(--mono); font-size: .85rem; }
.pricing { display: grid; gap: 14px; margin: 22px 0 14px; }
@media (min-width: 860px) { .pricing { grid-template-columns: repeat(3, 1fr); } }
.tier { background: var(--sheet); border: 1px solid var(--hair); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.tier.featured { background: var(--cinema); color: var(--cinema-text); border-color: var(--cinema); }
.tier.featured .price small { color: var(--cinema-muted); }
.tier ul { padding-left: 1.1em; margin: 0; }
.tier-features { flex: 1; }                 /* grows so every card's specs line up below it */
.tier .tier-specs { border-top: 1px solid var(--hair); padding-top: 12px; margin-bottom: 4px; }
.tier.featured .tier-specs { border-color: var(--cinema-line); }
.tier-director { color: var(--director); font-weight: 700; }
.tier.featured .tier-director { color: var(--director-on-cinema); }
.price { font: 800 2.4rem var(--dot); margin: 0; }
.price small { font: .8rem var(--mono); color: var(--muted); }
.price-year { margin: -6px 0 0; font: .8rem var(--mono); color: var(--muted); }
.tier.featured .price-year { color: var(--cinema-muted); }
.faq details { border-bottom: 1px solid var(--hair); padding: 14px 0; }
.faq summary { font: 700 1.02rem var(--sans); text-transform: none; letter-spacing: 0; }
.faq details p { margin: 10px 0 0; color: var(--ink-2); }
.final { text-align: center; }
.final h2 { font-size: clamp(2rem, 6vw, 3.6rem); }

/* Pinterest boards */
.board-more { margin-top: 28px; }
.board-title { display: flex; align-items: center; gap: 10px; margin: 32px 0 14px; font: 500 .78rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
/* Landing look boards: 2 rows of 6 equal cards (12 per board, direction.FEATURED_*). */
.board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
@media (max-width: 1080px) { .board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pin { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: var(--shadow); }
.pin img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.pin-body { flex: 1; display: flex; flex-direction: column; padding: 8px 10px 9px; }
.board .look-name { font-size: .88rem; margin-bottom: 3px; }
.board .look-tag { display: none; }
.board .look-blurb { font-size: .76rem; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.board .pin .label { font-size: .6rem; margin-bottom: 4px; }
.board .pin-credit { margin-top: auto; padding-top: 6px; overflow-wrap: anywhere; }
/* Each card is a "Start a film with this look" link: the name's link stretches over the card; the credit link sits above it. */
.board .pin { position: relative; transition: transform .15s ease, box-shadow .15s ease; }
.board .pin-link { color: inherit; text-decoration: none; }
.board .pin-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.board .pin-link:focus-visible { outline: none; }
.board .pin:has(.pin-link:focus-visible) { outline: 2px solid var(--head); outline-offset: 3px; }
.board .pin:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--head), var(--shadow); }
.board .pin:hover .pin-link { text-decoration: underline; }
.board .pin-credit a { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .board .pin { transition: none; } .board .pin:hover { transform: none; } }
.look-name { margin: 0 0 2px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.look-tag { font: 500 .6rem var(--mono); text-transform: uppercase; color: var(--muted); border: 1px solid var(--hair); border-radius: 999px; padding: .15em .5em; }
.look-blurb { margin: 0; font-size: .88rem; color: var(--muted); }
.pin-credit { margin: 6px 0 0; font: .6rem/1.3 var(--mono); color: var(--muted); }
.pin-credit a { color: inherit; }
@media (max-width: 640px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .pin { border-radius: 10px; } .pin-body { padding: 6px 8px 8px; }
  .board .look-name { font-size: .74rem; line-height: 1.25; margin: 0; } .board .look-tag, .look-blurb, .board .look-blurb, .pin-credit, .board .pin-credit { display: none; } }

.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--cinema); color: var(--cinema-text); font: .74rem var(--mono); text-transform: uppercase;
  transform: translateY(100%); transition: transform .2s ease; }
.sticky-cta.show { transform: none; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 560px; background: var(--cinema); color: var(--cinema-text); border-radius: 14px; padding: 18px; font-size: .92rem; }
.cookie-bar a { color: inherit; }
.cookie-bar .btn { border-color: var(--cinema-text); color: var(--cinema-text); }
.cookie-bar .btn:hover { background: var(--cinema-text); color: var(--cinema); }
.cookie-bar .btn-primary { border-color: var(--head); color: #fff; }
.cookie-bar .check { color: var(--cinema-text); }
.cookie-prefs { margin: 10px 0; display: grid; gap: 8px; }

.mt { margin-top: 28px; } .mt-s { margin-top: 14px; }
.topbar nav .link-btn, .site-head nav .link-btn { text-decoration: none; text-transform: inherit; letter-spacing: inherit; }
.frame-btn .win .name.beat { font: 500 .72rem/1.4 var(--mono); text-transform: none; text-align: left; padding: 22px 10px 8px; align-self: start; }
@media (max-width: 640px) { .pin .label { display: none; } }

/* drag-to-reorder */
.frame[data-id] .frame-btn { cursor: grab; touch-action: pan-x; -webkit-touch-callout: none; user-select: none; }
/* Bin in the frame's corner: shown on hover/focus (always on touch screens). */
.frame-del { position: absolute; right: 5px; bottom: 30px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 6px; background: rgba(16, 16, 16, .78); color: #F0624F; cursor: pointer; opacity: 0; transition: opacity .12s; }
.frame-del .ico { width: 18px; height: 18px; color: inherit; }
.frame:hover .frame-del, .frame:focus-within .frame-del, .frame-del:focus-visible { opacity: 1; }
.frame-del:hover { background: var(--danger); color: #fff; }
.frame-del:focus-visible { outline: 2px solid #fff; }
@media (hover: none) { .frame-del { opacity: .9; } }
.frame-btn img { -webkit-user-drag: none; pointer-events: none; }
.reel-track.sorting { scroll-snap-type: none; cursor: grabbing; }
.reel-track.sorting .frame-btn { cursor: grabbing; }
.frame.dragging { opacity: .55; transform: scale(.97); }
.frame.dragging .win { border: 2px dashed var(--head); }
.frame.dragging .frame-del { display: none; }

/* account square in the header */
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: var(--ink); color: var(--paper);
  font: 800 1rem var(--dot); text-decoration: none; letter-spacing: 0; }
.avatar:hover, .avatar[aria-current=page] { background: var(--head); color: #fff; }
.topbar nav .avatar[aria-current=page], .topbar nav .avatar:hover { color: #fff; }

/* API keys: add row + table */
.key-add { display: grid; gap: 0 12px; grid-template-columns: 1fr; align-items: end; margin: 6px 0 14px; }
@media (min-width: 640px) { .key-add { grid-template-columns: minmax(180px, 1fr) 2fr auto; } .key-add .btn { margin-bottom: 1rem; } }
.key-add label .hint { display: inline; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.key-table td { vertical-align: middle; }
.cols > * { min-width: 0; }
.key-table td.mono { white-space: nowrap; }

/* ---------- Studio shell: side rail (desktop) / bottom tab bar (phones) instead of the top nav ---------- */
/* Studio work uses the whole width next to the rail; the 1200 px measure is for reading pages. */
body[data-studio] .wrap { max-width: none; padding-inline: clamp(16px, 2.5vw, 36px); }
.theme-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--hair); border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; }
.theme-btn:hover { border-color: var(--ink); }
.theme-btn .ico { width: 18px; height: 18px; }
.rail { position: fixed; z-index: 35; background: var(--sheet); }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail a { text-decoration: none; color: var(--ink); }
.rail li a { display: flex; align-items: center; gap: 12px; border-radius: 8px; font: 500 .74rem var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.rail li a .ico { color: var(--muted); }
.rail li a:hover { background: var(--paper); }
.rail li a[aria-current=page] { background: var(--ink); color: var(--paper); }
.rail li a[aria-current=page] .ico { color: var(--head); }
.rail li a.rail-director, .rail li a.rail-director .ico { color: var(--director); }
.rail li a.rail-director[aria-current=page] { background: var(--director); color: var(--director-ink); }
.rail li a.rail-director[aria-current=page] .ico { color: var(--director-ink); }
/* Admin (admins only): first in the rail, always filled in the playhead orange */
.rail li a.rail-admin, .rail li a.rail-admin:hover { background: var(--head); color: var(--head-ink); }
.rail li a.rail-admin .ico { color: var(--head-ink); }
.rail li a.rail-admin[aria-current=page] { box-shadow: inset 0 0 0 2px var(--head-ink); }
.rail .brand { display: block; }
/* Feedback box (common.js feedbackBox): quiet until used. */
.fb { display: flex; flex-direction: column; gap: 6px; opacity: .6; transition: opacity .15s; }
.fb:hover, .fb:focus-within { opacity: 1; }
.fb-label { font: 500 .66rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.fb-text { flex: 1 1 auto; min-height: 72px; resize: none; padding: 8px 9px; border: 1px dashed var(--hair); border-radius: 8px;
  background: transparent; color: var(--muted); font: .8rem/1.45 var(--sans); }
.fb-text::placeholder { color: var(--muted); opacity: .75; }
.fb-text:focus { outline: none; border-style: solid; border-color: var(--muted); color: var(--ink-2); }
.fb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fb-note { margin: 0; font: .7rem/1.3 var(--sans); color: var(--muted); }
.fb-note:empty { display: none; }
.fb .fb-send { min-height: 0; padding: .3em .8em; font-size: .6rem; color: var(--muted); }
.fb-page .fb-text { min-height: 110px; }
.fb-page-card:empty { display: none; }
@media (min-width: 900px) { .fb-page-card { display: none; } }
/* API reference (/developers/api): Swagger UI keeps its own light styling on a paper card in both themes. */
.swagger-wrap { margin-top: 18px; padding: 8px 16px 16px; border-radius: var(--r); background: #fff; color: #3b4151; color-scheme: light; overflow-x: auto; }
.swagger-wrap .swagger-ui .wrapper { padding: 0; max-width: none; }
.swagger-wrap .swagger-ui .info { margin: 18px 0; }
.api-steps { margin: 12px 0 0; padding-left: 1.3em; display: grid; gap: 4px; color: var(--ink-2); }
.api-steps code { font: .84rem var(--mono); overflow-wrap: anywhere; }
/* Admin page (static/js/admin.js) */
.admin-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.admin-sugg { padding: 12px 14px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--sheet); }
.admin-sugg p { margin: 6px 0 0; }
.admin-sugg-head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.admin-sugg-head input { width: 18px; height: 18px; accent-color: var(--head); flex: none; }
.admin-sugg-title { flex: 1; font-weight: 700; }
.tag.prio-high { color: var(--danger); } .tag.prio-medium { color: var(--head); } .tag.prio-low { color: var(--muted); }
.admin-sugg details { margin-top: 8px; } .admin-sugg summary { cursor: pointer; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.admin-prompt { width: 100%; font: .78rem/1.5 var(--mono); }
.admin-sugg pre { margin: 6px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; font: .76rem/1.5 var(--mono); color: var(--ink-2); background: var(--paper); border-radius: 8px; padding: 10px 12px; max-height: 40vh; overflow: auto; }
.admin-summary { white-space: pre-wrap; }
.admin-quotes { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 4px; font: .82rem/1.45 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
.admin-feedback { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.admin-feedback li { padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.admin-feedback p { margin: 0; } .admin-fb-text { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  body[data-studio] { --rail: 224px; }
  body[data-studio] .topbar { display: none; }
  body[data-studio] main, body[data-studio] .site-foot { margin-left: var(--rail); }
  .rail { top: 0; bottom: 0; left: 0; width: var(--rail); display: flex; flex-direction: column; gap: 22px; padding: 20px 14px; border-right: 1px solid var(--hair); }
  .rail .brand { padding: 4px 10px 6px; }
  .rail li a { padding: 11px 10px; }
  .rail-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 0 4px; }
  .rail-account { display: flex; align-items: center; gap: 10px; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .07em; min-width: 0; }
  .rail-account .avatar { flex: none; }
  .rail-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-account[aria-current=page] .avatar { background: var(--head); color: #fff; }
  body[data-studio] .cookie-bar { left: calc(var(--rail) + 16px); }
  .fb-rail { flex: 0 1 30%; min-height: 150px; margin-top: auto; }
  .fb-rail + .rail-foot { margin-top: 0; }
  .fb-page { display: none; }
}
@media (max-width: 899px) {
  body[data-studio] { --tabbar: calc(60px + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--tabbar); }
  .rail { left: 0; right: 0; bottom: 0; height: var(--tabbar); padding-bottom: env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--hair); }
  .rail .brand, .rail-foot, .fb-rail { display: none; }
  .rail ul { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 60px; }
  .rail li a { flex-direction: column; justify-content: center; gap: 4px; height: 100%; border-radius: 0; font-size: .56rem; letter-spacing: .02em; text-align: center; overflow-wrap: anywhere; padding: 0 2px; }
  .rail li a[aria-current=page] { background: transparent; color: var(--head); }
  .rail li a.rail-director[aria-current=page], .rail li a.rail-director[aria-current=page] .ico { background: transparent; color: var(--director); }
  .rail li a.rail-admin, .rail li a.rail-admin[aria-current=page] { background: var(--head); color: var(--head-ink); box-shadow: none; }
  .rail li a.rail-admin .ico { color: var(--head-ink); }
  body[data-studio] .cookie-bar { bottom: calc(16px + var(--tabbar)); }
}

/* Confirmation dialog */
.dialog { max-width: min(420px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); }
.dialog::backdrop { background: rgba(10, 10, 9, .55); }
.dialog h2 { margin: 0 0 .4em; font-size: 1.35rem; }
.dialog p { margin: 0 0 18px; color: var(--ink-2); }
.dialog .row { justify-content: flex-end; }
.dialog .choice { margin: 0 0 14px; cursor: pointer; }
.dialog .choice > span { display: grid; gap: 2px; }
.dialog p[role=status]:empty { display: none; }
.dialog p.error { color: var(--danger); }
/* A plain modal for a picture or a longer read (common.js sheet / lightbox). */
.sheet { max-width: min(860px, calc(100vw - 32px)); }
.sheet .label { margin: 14px 0 2px; }
.sheet .label:first-of-type { margin-top: 0; }
.sheet pre { margin: 0 0 14px; white-space: pre-wrap; font: .78rem/1.5 var(--mono); color: var(--ink-2);
  background: var(--track); border-radius: 8px; padding: 10px 12px; max-height: 40vh; overflow: auto; }
.lightbox-img { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: contain;
  border-radius: 8px; background: var(--cinema-2); margin-bottom: 14px; }
/* Zoomable picture popup (common.js zoomView). */
.zoom-view { width: min(1200px, calc(100vw - 32px)); max-width: none; height: min(92vh, 1000px); padding: 0; overflow: hidden; }
.zoom-view[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.zoom-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-bottom: 1px solid var(--hair); }
.zoom-bar h2 { flex: 1 1 12em; min-width: 0; margin: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoom-tools { display: flex; align-items: center; gap: 4px; }
.zoom-tools .icon-btn { width: 36px; height: 36px; }
.zoom-tools .icon-btn .ico { width: 18px; height: 18px; }
.zoom-tools .icon-btn:disabled { opacity: .4; cursor: default; border-color: var(--hair); color: var(--ink-2); }
.zoom-one { font: 600 .72rem var(--mono); }
.zoom-pct { min-width: 5ch; text-align: center; font: .78rem var(--mono); color: var(--ink-2); }
.zoom-stage { position: relative; overflow: hidden; background: var(--cinema-2); touch-action: none; cursor: grab; user-select: none; }
.zoom-stage.dragging { cursor: grabbing; }
.zoom-stage:focus-visible { outline: 2px solid var(--head); outline-offset: -2px; }
.zoom-img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
/* Two buttons that read as one control. */
.btn-pair { display: flex; }
.btn-pair > .btn { flex: 1 1 0; min-width: 0; border-radius: 0; margin: 0 0 0 -1px; }
.btn-pair > .btn:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.btn-pair > .btn:last-child { border-radius: 0 8px 8px 0; }
.btn-pair > .btn:hover, .btn-pair > .btn:focus-visible { position: relative; z-index: 1; }
/* A square button that is only an icon. */
.icon-btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 6px;
  border: 1px solid var(--hair); background: var(--sheet); color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { border-color: var(--head); color: var(--head); }
.icon-btn .ico { width: 15px; height: 15px; }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: #8F1C13; border-color: #8F1C13; color: #fff; }
.btn-danger-solid .ico { width: 16px; height: 16px; color: inherit; }

/* @mention suggestions under a script field */
.has-mentions { position: relative; }
.mention-list { position: absolute; z-index: 20; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--white); border: 1px solid var(--hair); border-radius: 8px; box-shadow: var(--shadow); max-height: 260px; overflow: auto; }
.mention-list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: .92rem; }
.mention-list li strong { font: 500 .85rem var(--mono); }
.mention-list li[aria-selected=true] { background: var(--paper); }
.mention-list .empty-opt { cursor: default; color: var(--muted); }

/* Character Studio */
.cast-intro { max-width: 46ch; margin: 0; }
.label-like { display: block; margin: 0 0 .4em; font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.photo-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.photo { position: relative; margin: 0; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--cinema-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .frame-del { top: 6px; right: 6px; bottom: auto; }
.photo:hover .frame-del, .photo:focus-within .frame-del { opacity: 1; }
.photo-add { display: grid; place-content: center; justify-items: center; gap: 6px; margin: 0; border: 1px dashed var(--muted); background: transparent; cursor: pointer;
  font: 500 .66rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.photo-add:hover, .photo-add:focus-within { border-color: var(--ink); color: var(--ink); }
.photo-add.busy { opacity: .5; pointer-events: none; }
.sheet-block { display: grid; gap: 16px 24px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--hair); }
@media (min-width: 860px) { .sheet-block { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.card-sheet { position: relative; display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--hair); background: var(--white); }
.pic-dl { position: absolute; top: 8px; right: 8px; z-index: 2; }
.pic-tools { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 6px; }
.pic-tools .pic-dl { position: static; }
.pic-dl, .pic-view { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; cursor: pointer;
  border-radius: 6px; background: rgba(16, 16, 16, .78); color: #fff; }
.pic-dl .ico, .pic-view .ico { width: 18px; height: 18px; color: inherit; }
.pic-dl:hover, .pic-view:hover { background: var(--ink); color: var(--white); }
.pic-dl:focus-visible, .pic-view:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.card-sheet img { display: block; width: 100%; height: auto; }
.empty-sheet { display: grid; place-content: center; justify-items: center; gap: 8px; min-height: 180px; border-style: dashed; background: transparent; color: var(--muted); font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.empty-sheet .ico { width: 34px; height: 34px; }
.sheet-make .small { margin: 0 0 12px; }
.sheet-make .btn { width: 100%; }

/* Screening Room + landing "Now showing" (services/showcase.py cards). Each film sits in a strip of film stock:
   perforations top and bottom, the picture letterboxed inside — the frame stays 16:9 whatever the film's shape. */
.band.dark .btn:not(.btn-primary) { border-color: var(--cinema-text); color: var(--cinema-text); }
.screening h1 { color: var(--cinema-text); }
.screening .lede { color: #9C9A93; }
.screen-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 28px 22px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 900px) { .screen-grid { grid-template-columns: repeat(3, 1fr); } }
.screen-frame { padding: 13px 0; border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--cinema-text) 32%, transparent) 0 8px, transparent 8px 17px) top 4px left 7px / calc(100% - 14px) 5px no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--cinema-text) 32%, transparent) 0 8px, transparent 8px 17px) bottom 4px left 7px / calc(100% - 14px) 5px no-repeat,
    var(--cinema-2); }
.screen-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--cinema); }
.screen-body { padding: 12px 2px 0; }
.screen-body h3 { margin: 0; font: 400 1.45rem/1.15 var(--serif); color: var(--cinema-text); }
.screen-body p { margin: 6px 0 0; font-size: .92rem; color: #9C9A93; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.screen-body h3 a { color: inherit; text-decoration: none; } .screen-body h3 a:hover { text-decoration: underline; }
.screen-proof, .screen-body .screen-proof { font: 500 .72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--film); -webkit-line-clamp: unset; }
.film-detail h1 { color: var(--cinema-text); margin: 10px 0 6px; }
.film-detail .crumbs { font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: #9C9A93; }
.film-detail .crumbs a { color: var(--cinema-text); }
.film-player { margin: 18px 0; max-width: 980px; }
.film-detail .lede { color: #9C9A93; }
.film-detail .row { gap: 18px; align-items: center; flex-wrap: wrap; }
.screen-report { display: inline-block; margin-top: 8px; font: 500 .7rem var(--mono); text-transform: uppercase; letter-spacing: .07em; color: #9C9A93; }
.screen-empty { grid-column: 1 / -1; padding: 40px 16px; text-align: center; border: 1px dashed var(--cinema-line); border-radius: var(--r); color: #9C9A93; }

/* Sliding switch (input[role=switch] inside label.switch) — used for a film's Public setting. */
.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; font: 500 .95rem var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--muted); transition: background .15s ease; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow); transition: transform .15s ease; }
.switch input:checked + .switch-track { background: var(--signal); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--ring); }
.switch input:disabled + .switch-track { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .switch-track, .switch-track::after { transition: none; } }
.publish { padding: 12px 14px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--sheet); }
.publish .hint { margin: 6px 0 0; }

/* AI Director page: the draft script under review */
.script-scene, .script-foot { margin-top: 16px; }
.script-shots { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.script-shot { display: grid; gap: 0 12px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 8px; background: var(--paper); }
.script-shot-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.script-shot-head label { display: flex; align-items: center; gap: 8px; margin: 0; }
.script-shot-head input { width: 5.5em; min-height: 34px; padding-block: 4px; }
.chip-x { border: 0; cursor: pointer; }
.import-errors { margin: .4em 0 0; padding-left: 1.2em; max-height: 22rem; overflow: auto; overflow-wrap: anywhere; }
.import-errors li + li { margin-top: .3em; }
.dev-secret { overflow-wrap: anywhere; user-select: all; padding: .3em .5em; border-radius: 6px; background: var(--paper); }
.chip-x:hover, .chip-x:focus-visible { text-decoration: line-through; }
@media (min-width: 900px) {
  .script-shot { grid-template-columns: 1fr 1fr; }
  .script-shot-head, .script-shot .chips { grid-column: 1 / -1; }
}

/* Shot script field (static/js/shotscript.js): a transparent textarea over a highlighted mirror, with a computed
   timecode gutter and a read-only lane strip. The two text layers must keep identical box metrics. */
.ss-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ss-head label { margin: 0; }
.ss-head .ss-tally { margin-left: 0; }
/* 2 — the tag hints are the summary of "what each tag does", between the script and the lanes */
.ss-box > .ss-help { margin: 0; border: 0; border-top: 1px solid var(--hair); border-radius: 0;
  padding: 7px 10px; }
.ss-box > .ss-help > summary::-webkit-details-marker { display: none; }
.ss-box > .ss-help > summary { list-style: none; cursor: pointer; }
.ss-box > .ss-help[open] > summary { margin-bottom: 8px; }
.ss-box > .ss-help > summary:hover .ss-t, .ss-box > .ss-help > summary:focus-visible .ss-t { opacity: .75; }
.ss-tags { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; font: 500 .7rem var(--mono); }
.ss-t.action { color: var(--ink-2); } .ss-t.dialogue { color: var(--dialogue-ink); }
.ss-t.sound { color: var(--sound-ink); } .ss-t.camera { color: var(--camera-ink); }
.ss-t.pause { color: var(--pause-ink); } .ss-t.tie { color: var(--head); }
.ss-t.place, .ss-k.place { color: var(--place-ink); text-decoration: underline dotted; text-underline-offset: 3px; }
.ss-box { border: 1px solid var(--hair); border-radius: 8px; background: var(--sheet); overflow: hidden; }
.ss-box:focus-within { border-color: var(--head); box-shadow: 0 0 0 3px var(--ring); }
.ss-editor { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr);
  background: var(--sheet); border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; }
.ss-editor:focus-within { border-color: var(--head); box-shadow: 0 0 0 3px var(--ring); }
.ss-box > .ss-editor, .ss-box > .ss-editor:focus-within { border: 0; border-radius: 0; box-shadow: none; }
.ss-box > .ss-stripwrap { margin: 0; border-top: 1px solid var(--hair); }
.ss-box .ss-strip { border-radius: 0; }
/* Clicking a line's timecode offers a frame at that moment; hovering rules the line across the text. */
.ss-mark { pointer-events: none; position: absolute; right: 7px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: 500 .7rem/1.55 var(--mono); font-variant-numeric: tabular-nums; color: var(--head); white-space: nowrap;
  transform: translateY(-50%); }
.ss-mark.pinned { font-weight: 600; }
.ss-mark.cont { opacity: .4; }
.ss-mark:hover, .ss-mark:focus-visible { color: var(--head); opacity: 1; text-decoration: underline; }
.ss-mark.tick { right: 7px; width: 5px; height: 1px; padding: 0; background: var(--hair); }
.ss-mark.tick:hover, .ss-mark.tick:focus-visible { background: var(--head); }
.ss-gutter b.tick { right: 7px; width: 5px; height: 1px; background: var(--hair); }
.ss-stamp { position: absolute; left: 0; transform: translateY(-50%); z-index: 2; pointer-events: none;
  font: 500 .62rem var(--mono); color: var(--head-ink); background: var(--head); padding: 1px 5px;
  border-radius: 0 3px 3px 0; }
.ss-gutter.pickable { cursor: pointer; }
.ss-rule { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--head); pointer-events: none; }
.ss-gutter { position: relative; border-right: 1px solid var(--hair); padding-block: 12px; overflow: hidden; }
.ss-gutter b { position: absolute; right: 7px; font: 500 .7rem/1.55 var(--mono); font-variant-numeric: tabular-nums;
  color: var(--head); white-space: nowrap; transform: translateY(-50%); }
.ss-gutter b.pinned { font-weight: 600; }
.ss-gutter b.cont { opacity: .4; }
.ss-pane { position: relative; min-width: 0; }
.ss-mirror, .ss-field textarea {
  font: 400 14px/1.55 var(--mono); padding: 12px 14px; margin: 0; border: 0;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; tab-size: 2;
}
.ss-mirror { position: relative; pointer-events: none; color: var(--ink-2); min-height: 210px; }
.ss-mirror .ss-ln { display: block; min-height: 1.55em; }
.ss-mirror .ss-ln.ss-ignored { opacity: .45; text-decoration: line-through; }   /* acted shot: the video replaces it */
.ss-field textarea { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; background: transparent;
  color: transparent; caret-color: var(--head); overflow: hidden; display: block; }
.ss-field textarea:focus { outline: none; }
.ss-ts { color: var(--head); font-weight: 600; }
.ss-tag { color: var(--sound-ink); font-weight: 600; }
.ss-cam { color: var(--camera-ink); font-weight: 600; }
.ss-who { color: var(--dialogue-ink); font-weight: 600; }
.handle-tag { color: var(--head); font-family: var(--mono); font-weight: 600; }   /* @handle / #handle in studio hints */
.ss-place { color: var(--place-ink); font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; }
.ss-say { color: var(--ink); }
.ss-how { color: var(--muted); font-style: italic; }
.ss-pause { color: var(--pause-ink); font-weight: 600; }
.ss-and { color: var(--head); font-weight: 700; }
.ss-bad { color: var(--danger); font-weight: 600; text-decoration: underline wavy; text-underline-offset: 3px; }
.ss-tally { margin-left: auto; font: 500 .72rem var(--mono); color: var(--muted); }
.ss-legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ss-legend li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ss-k { font: 500 .74rem var(--mono); padding: 2px 7px; border-radius: 999px; border: 1px solid var(--hair); }
.ss-k.action { color: var(--ink-2); } .ss-k.dialogue { color: var(--dialogue-ink); }
.ss-k.sound { color: var(--sound-ink); } .ss-k.camera { color: var(--camera-ink); }
.ss-k.pause { color: var(--pause-ink); } .ss-k.tie { color: var(--head); }
.ss-stripwrap { display: grid; gap: 6px; margin-top: 14px; }
.ss-strip { background: var(--cinema); border-radius: 8px; padding: 12px; display: grid; gap: 6px; }
.ss-ruler { position: relative; height: 15px; }
.ss-lanes { overflow-x: auto; }
.ss-track { --name-w: 112px; display: grid; gap: 6px;
  width: calc(var(--name-w) + (100% - var(--name-w)) * var(--span, 1)); }
.ss-ruler em { position: absolute; bottom: 0; font: 500 .6rem var(--mono); font-style: normal; color: var(--head);
  transform: translateX(-50%); }
.ss-ruler em:first-child { transform: none; }
.ss-lanerow { display: grid; grid-template-columns: var(--name-w) minmax(0, 1fr); align-items: center; }
.ss-lanename { font: 500 .66rem var(--mono); text-transform: uppercase; letter-spacing: .07em;
  color: var(--off-ink); text-align: right; position: sticky; left: 0; z-index: 1; align-self: stretch;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; background: var(--cinema); }
.ss-lanebox { position: relative; height: 26px; background: var(--cinema-2); border-radius: 4px; overflow: hidden; }
.ss-cue { position: absolute; top: 4px; height: 18px; border-radius: 3px; display: flex; align-items: center;
  padding: 0 5px; font: 500 .6rem var(--mono); color: #0b0f0c; white-space: nowrap; overflow: hidden; min-width: 4px; }
.ss-cue.dot { width: 8px; height: 8px; top: 9px; padding: 0; border-radius: 50%; }
.ss-cue.action { background: var(--action-bar); }
.ss-cue.dialogue { background: var(--dialogue-bar); }
.ss-cue.sound { background: var(--sound-bar); }
.ss-cue.camera { background: var(--camera-bar); }
.ss-cue.pause { background: var(--pause-bar); }
@media (max-width: 680px) {
  .ss-editor { grid-template-columns: 50px minmax(0, 1fr); }
  .ss-track { --name-w: 0px; }
  .ss-lanerow { grid-template-columns: 1fr; gap: 2px; }
  .ss-lanename { justify-self: start; justify-content: flex-start; padding-right: 6px; }
  .ss-rulerrow .ss-lanename { display: none; }
}

/* The shot panel: stills rail · script · a thin beat/sketch/frame column. */
.shot-main { gap: 0 18px; }
@media (min-width: 860px) { .shot-main { grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr); } .shot-rail { grid-column: 1 / -1; } }
@media (min-width: 1040px) { .shot-main { grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr) minmax(0, .5fr); } .shot-rail { grid-column: auto; } }
.shot-col { min-width: 0; }
/* Length · how the model works, under the lanes. */
.shot-timing { display: grid; gap: 10px 16px; margin-top: 16px; }
/* Act it yourself: the user's own performance drives the shot (scene.js performBox) — Director purple */
.perform { margin-top: 12px; padding: 8px 12px; border: 1.5px solid var(--director); border-radius: 8px; }
.perform > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 32px;
  color: var(--director); font-weight: 700; }
.perform > summary::-webkit-details-marker { display: none; }
.perform > summary::before { content: "▸"; content: "▸" / ""; font-size: .9em; transition: transform .12s; }
.perform[open] > summary::before { transform: rotate(90deg); }
.perform[open] > summary { margin-bottom: 6px; }
.perform-tag { font: .74rem var(--mono); font-weight: 400; color: var(--muted); }
.perform-video { display: block; width: 100%; max-height: 280px; margin: 6px 0 8px; border-radius: 6px; background: var(--cinema); }
/* Lip-sync & dub (scene.js lipsyncBox): reuses .perform; its video and audio parts, and the shot it locks */
.own-part { margin: 10px 0; }
.own-part > .label { display: block; margin-bottom: 4px; }
.own-audio { display: block; width: 100%; margin: 4px 0 8px; }
.own-off { opacity: .45; }
.shot-timing > * { min-width: 0; }
.shot-timing .field, .shot-timing .guide { margin: 0; }
.shot-timing .hint { margin-top: 4px; }
@media (min-width: 720px) { .shot-timing { grid-template-columns: minmax(120px, .7fr) minmax(0, 2fr); align-items: start; } }
/* Shot-level look lives below the save bar, as a hint rather than a main setting. */
.shot-extras { margin: 18px -20px -20px; padding: 20px; display: grid; gap: 8px;
  background: var(--paper); border-top: 1px solid var(--hair); border-radius: 0 0 var(--r) var(--r); }
.shot-extras-head .hint { margin: 0; }
.shot-extras .sect-group { margin-top: 0; }
/* The camera sections read as reference material, so they sit in two columns. */
@media (min-width: 860px) { .shot-extras-body [data-scope=hs] { display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 18px; align-content: start; } }

/* The prompt stack sits with the script, under the lanes: always open, never a section to unfold. */
.shot-stack { margin-top: 14px; }
.shot-stack .group-head { display: flex; justify-content: flex-start; align-items: center; gap: 8px; margin-bottom: 8px; }
.shot-stack .stack { margin: 0; }

/* Stills inside a shot (services/storyboard_frames.py): a reel of proposed → approved → rendered pictures. */
.frames-group .group-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.frames-reel { margin-top: 8px; }
.frames-track { display: flex; gap: 12px; overflow-x: auto; padding: 4px; scroll-snap-type: x proximity; }
.frame-card { flex: 0 0 240px; scroll-snap-align: start; display: grid; gap: 8px; align-content: start;
  background: var(--sheet); border: 1px solid var(--hair); border-radius: 8px; padding: 10px; text-align: left; }
.frame-card.suggested { border-style: dashed; }
.frame-card.rendered { border-color: var(--ok-ink); }
.frame-card.ref { border-style: dotted; border-color: var(--director); }
.frame-card .frame-refs { margin: 0; font: .72rem/1.35 var(--sans); color: var(--ink-2); }
.frame-plan { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--director); font: .82rem/1.45 var(--sans);
  color: var(--ink-2); }
.frame-plan .label { display: block; margin-bottom: 2px; color: var(--director); }
.frame-plan p { margin: 0; }
.frame-plan .row { margin-top: 6px; gap: 8px; align-items: center; flex-wrap: wrap; }
/* a Director task is running (scene.js thinking()): the plan and its notes say so until they're redrawn */
body[data-director-thinking] .frame-plan > .label::after,
body[data-director-thinking] .director-said > summary::after { content: " · thinking…"; font-weight: 400; color: var(--director); }
.frame-card .win { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 4px; background: var(--cinema-2); }
.frame-card .win img { width: 100%; height: 100%; object-fit: cover; }
.frame-card .win .name { font: 500 .74rem var(--mono); color: var(--off-ink); }
.frame-card .win .tc { position: absolute; left: 4px; bottom: 4px; font: 500 .62rem var(--mono);
  color: #fff; background: rgba(0,0,0,.6); padding: 2px 5px; border-radius: 3px; }
.frame-card .win .role { position: absolute; right: 4px; top: 4px; font: 500 .58rem var(--mono);
  text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: 999px; color: #fff; }
.frame-card .win .role.suggested { background: var(--muted); }
.frame-card .win .role.approved { background: var(--head); }
.frame-card .win .role.rendered { background: var(--ok-ink); color: #06230f; }
.frame-card .cap { display: block; }
/* Before it is rendered the screen holds the wording; after, the picture with two corner buttons. */
.frame-card .win:has(.frame-desc) { place-items: stretch; }
.frame-card .win .frame-desc { width: 100%; height: 100%; margin: 0; padding: 8px 9px; border: 0; border-radius: 4px;
  background: transparent; color: var(--cinema-text); font: .78rem/1.4 var(--sans); resize: none; overflow: auto;
  min-height: 0; }
.frame-card .win .frame-desc:focus { outline: none; box-shadow: inset 0 0 0 2px var(--head); }
.frame-card .win .frame-desc::placeholder { color: var(--off-ink); }
.frame-tools { position: absolute; top: 4px; left: 4px; display: flex; gap: 4px; }
/* Bin in a still's top-right corner (always shown; the reel's .frame-del is hover-only). */
.still-del { position: absolute; top: 4px; right: 4px; z-index: 2; width: 26px; height: 26px;
  background: rgba(10, 10, 9, .66); border-color: transparent; }
.still-del .ico { width: 15px; height: 15px; color: #F0624F; }
.still-del:hover { background: var(--danger); border-color: var(--danger); }
.still-del:hover .ico { color: #fff; }
.frame-card .win:has(.still-del) .frame-desc { padding-right: 36px; }
.frame-card .win:has(.frame-tools) .frame-desc { padding-top: 34px; }
/* A Rethink waiting for Approve / Reject: its wording fills the screen. */
.frame-proposal { align-self: stretch; justify-self: stretch; overflow: auto; padding: 34px 10px 8px; font: .8rem/1.45 var(--sans);
  color: var(--cinema-text); border: 2px dashed var(--director); border-radius: 4px; }
.frame-proposal-tag { display: block; margin-bottom: 4px; font: 600 .6rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--director); }
.frame-card.proposed { border-color: var(--director); }
/* ‹ n/m › — which render of this still the clip uses */
.still-variants { position: absolute; right: 4px; bottom: 4px; z-index: 2; display: flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: 6px; background: rgba(10, 10, 9, .72); color: #fff; }
.still-variants .icon-btn { width: 24px; height: 24px; background: transparent; border-color: transparent; color: #fff; font: 700 1rem/1 var(--sans); }
.still-variants .icon-btn:hover { background: var(--head); color: var(--head-ink); }
.still-variants-n { min-width: 3ch; text-align: center; font: 500 .62rem var(--mono); }
/* frame prompt popup */
.sheet-edit { width: 100%; margin: 4px 0 6px; font: .86rem/1.45 var(--sans); }
.dialog.sheet input.sheet-at { width: 8rem; margin: 4px 0 2px; }
.sheet-prompt { font: .78rem/1.5 var(--mono); }
.frame-tools .icon-btn { width: 24px; height: 24px; background: rgba(10, 10, 9, .66); border-color: transparent;
  color: #fff; }
.frame-tools .icon-btn:hover { background: var(--head); color: var(--head-ink); }
.frame-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px;
  font: 500 .62rem var(--mono); color: var(--muted); }
.frame-meta .tc, .frame-meta .role { position: static; background: none; padding: 0; color: inherit; }
.frame-meta .role { text-transform: uppercase; letter-spacing: .06em; }
.frame-card.suggested .frame-meta .role { color: var(--muted); }
.frame-card.approved .frame-meta .role { color: var(--head); }
.frame-card.rendered .frame-meta .role { color: var(--ok-ink); }

/* The shot's reference pictures (services/shot_images.py): @image-1, @image-2, … */
.refs { min-width: 0; }
.refs .guide { margin-top: 12px; }
.refs .group-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px; }
.refs input[type=file] { display: none; }
.ref-grid { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.ref-card { position: relative; border: 1px solid var(--hair); border-radius: 8px; overflow: hidden;
  background: var(--cinema-2); }
.ref-shot { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ref-shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ref-name { position: absolute; left: 4px; bottom: 4px; font: 500 .6rem var(--mono); color: #fff;
  background: rgba(10, 10, 9, .66); padding: 2px 5px; border-radius: 3px; }
.ref-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
  background: rgba(10, 10, 9, .66); border-color: transparent; color: #fff; }
.ref-del:hover { background: var(--danger); color: #fff; border-color: transparent; }
.ref-add { display: grid; place-items: center; aspect-ratio: 16 / 9; border-style: dashed; cursor: pointer;
  background: transparent; color: var(--muted); }
.ref-add:hover { border-color: var(--head); color: var(--head); }
.ref-plus { font: 400 1.5rem var(--mono); line-height: 1; }
.ref-add .ref-name { background: none; color: inherit; }

.frame-desc { width: 100%; font: .82rem/1.45 var(--sans); resize: vertical; }
.frame-why { margin: 0; font-style: italic; }
.frame-acts { gap: 6px; flex-wrap: wrap; align-items: center; }
.frames-empty { flex: 1 1 100%; margin: 0; }
/* As the shot panel's left rail: the same cards, stacked and narrow. */
.frames-rail { margin-top: 0; }
/* Grows with its frames; past five it scrolls (scene.js framesPanel sets max-height to the fifth card's bottom). */
.frames-rail .frames-track { flex-direction: column; overflow-x: visible; overflow-y: auto; padding: 2px; }
.frames-rail .frames-reel { margin-top: 6px; }
.frames-rail .frame-card { flex: 0 0 auto; width: 100%; gap: 6px; padding: 8px; }
.frames-rail .frame-desc { font-size: .76rem; }
.frames-rail .frames-acts { gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.frames-rail .frames-acts .btn { width: 100%; }
.frames-carry { width: 100%; margin-bottom: 8px; color: var(--cinema-text); border-color: var(--cinema-line); }
.frames-carry:hover:not(:disabled) { background: var(--cinema-text); border-color: var(--cinema-text); color: var(--cinema); }
.frames-carry:disabled:hover { background: transparent; color: var(--cinema-text); }
.frames-rail .hint { margin-top: 8px; }

/* Model at a glance (RS.modelGuide): frames it takes, reference pictures feeding back, sound, clip length. */
.gg { display: grid; gap: 12px; margin: 10px 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.gg-cap { font: 500 .72rem var(--sans); color: var(--ink-2); }
.gg-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gg-frame { display: grid; gap: 4px; justify-items: center; opacity: .35; }
.gg-pic { width: 100%; aspect-ratio: 16 / 10; border: 2px solid var(--hair); border-radius: 4px; }
.gg-frame.on { opacity: 1; }
.gg-frame.on .gg-pic { border-color: var(--head); background: var(--ring); }
.gg-frame.on .gg-cap { color: var(--head); font-weight: 700; }
.gg-refs, .gg-sound { display: flex; align-items: center; gap: 10px; opacity: .35; }
.gg-refs.on, .gg-sound.on, .gg-sound.voice { opacity: 1; }
.gg-svg { width: 44px; height: 36px; flex: none; }
.gg-refs .gg-svg { width: 44px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-2); }
.gg-refs.on .gg-svg { color: var(--head); }
.gg-sound .gg-svg { fill: currentColor; color: var(--ink-2); }
.gg-sound.off { opacity: .8; }
.gg-sound.off .gg-svg rect { opacity: .35; }
.gg-x { stroke: var(--danger); stroke-width: 3; stroke-linecap: round; fill: none; }
.gg-sound.on .gg-svg rect, .gg-sound.voice .gg-svg rect { transform-box: fill-box; transform-origin: center;
  animation: gg-wave 1s ease-in-out infinite alternate; }
.gg-sound.voice .gg-svg { color: var(--head); }
.gg-sound.voice .gg-cap { color: var(--head); font-weight: 700; }
.gg-svg rect:nth-child(2n) { animation-delay: .15s !important; } .gg-svg rect:nth-child(3n) { animation-delay: .3s !important; }
.gg-svg rect:nth-child(5n) { animation-delay: .45s !important; }
@keyframes gg-wave { from { transform: scaleY(.35); } to { transform: scaleY(1.25); } }
.gg-len { margin: 0; font: .86rem/1.4 var(--sans); color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .gg-sound .gg-svg rect { animation: none !important; } }
.gg-note { margin: -6px 0 0 54px; font: .78rem/1.4 var(--sans); color: var(--ink-2); }
.ss-strip { position: relative; }
.ss-refonly { position: absolute; left: 12px; top: 10px; z-index: 2; display: grid; font: 500 .56rem/10px var(--mono);
  text-transform: uppercase; letter-spacing: .07em; color: var(--off-ink); pointer-events: none; }
@media (max-width: 680px) { .ss-refonly { display: none; } }

/* Save + Delete next to a panel's name (RS.saveDelete): Save looks like Delete until something changes. */
.head-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.head-acts > .head-acts { margin-left: 0; }
.head-acts [data-status] { flex-basis: 100%; margin: 0; text-align: right; }
.head-acts [data-status]:empty { display: none; }
@media (max-width: 680px) { .head-acts { justify-content: flex-start; margin-left: 0; } .head-acts [data-status] { text-align: left; } }

/* Shot panel reference groups (Camera, Lighting, Visual effects): each folds as a whole. */
.ref-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.ref-group > summary::-webkit-details-marker { display: none; }
.ref-group > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); transition: transform .15s; }
.ref-group[open] > summary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .ref-group > summary::after { transition: none; } }
.sect-flat { padding: 4px 0 12px; }
.sect-flat > .hint { margin: 0 0 10px; }
/* A label with a value at its right end (the video-model price above every model picker). */
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75em; }
.label-price { color: var(--ink); text-transform: none; white-space: nowrap; }

/* How it works (/how-it-works): numbered steps, each text + screenshots of the studio (static/img/how/*.webp, dark UI). */
.how-hero { padding-bottom: 40px; }
.how-hero h1 { max-width: 16ch; }
.how-paths { display: grid; gap: 12px; margin: 26px 0 0; max-width: 760px; }
@media (min-width: 640px) { .how-paths { grid-template-columns: 1fr 1fr; } }
.how-path { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--sheet);
  color: var(--ink); text-decoration: none; }
.how-path:hover { border-color: var(--ink); }
.how-path strong { font: 800 1.35rem/1.1 var(--dot); text-transform: uppercase; }
.how-path span:last-child { color: var(--ink-2); font-size: .92rem; }
.how-path-director, .how-path-director .label { color: var(--director); }
.how-path-director:hover { border-color: var(--director); }
.how-toc ol { list-style: none; counter-reset: toc; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.how-toc li { counter-increment: toc; font: 500 .78rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.how-toc li::before { content: "0" counter(toc) " "; color: var(--ink); }
.how-toc li.how-toc-or { counter-increment: none; } .how-toc li.how-toc-or::before { content: none; }
.how-toc-or a { color: var(--director); }
.how-step { scroll-margin-top: 64px; }
.how-num { display: block; font: 800 2.4rem/1 var(--dot); color: var(--head); margin-bottom: 8px; }
.how-num-director { color: var(--director); }
.how-sub { font: 700 1.15rem/1.2 var(--sans); margin: 1.6em 0 .5em; scroll-margin-top: 64px; }
.how-text { max-width: 68ch; }
.how-text ul { padding-left: 1.1em; display: grid; gap: 6px; }
.how-text code, .how-tags code { font: .86em var(--mono); background: var(--paper); border: 1px solid var(--hair); border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
section.band.dark .how-text code { background: var(--cinema-2); border-color: var(--cinema-line); }
.how-tags { max-width: 860px; margin: 8px 0 18px; }
.how-tags td:first-child { width: 42%; }
.how-fig { margin: 22px 0 30px; }
.how-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--shadow); background: var(--cinema); }
section.band.dark .how-fig img { border-color: var(--cinema-line); }
section.band.dark .how-fig figcaption, section.band.dark .how-text .small { color: var(--cinema-muted); }
section.band.dark .how-text a { color: var(--cinema-text); }
.how-fig figcaption { margin-top: 8px; font-size: .86rem; color: var(--muted); }
.how-fig-mid { max-width: 900px; }
.how-split { display: grid; gap: 8px 36px; margin-top: 10px; align-items: start; }
.how-split .how-fig { margin: 22px 0 0; }
.how-fig-tall { max-width: 260px; }
.how-pair { display: grid; gap: 0 24px; align-items: start; }
.how-pair .how-fig { margin-bottom: 0; }
.how-pair + .how-text { margin-top: 26px; }
@media (min-width: 760px) { .how-pair { grid-template-columns: 1fr 1fr; } }
.how-fig-perform { max-width: 420px; }
@media (min-width: 960px) { .how-split.how-split-wide { grid-template-columns: 420px minmax(0, 1fr); } }
@media (min-width: 760px) { .how-split { grid-template-columns: 260px minmax(0, 1fr); } }
.how-more { margin: 26px 0 0; }
.how-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 26px 0 0; }
.how-zoom { display: block; cursor: zoom-in; }
@media (max-width: 639px) {
  .how-tags thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .how-tags tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--hair); }
  .how-tags td, .how-tags td:first-child { display: block; width: auto; padding: 2px 0; border: 0; }
  .how-tags code { white-space: normal; }
}