/* Rokey — the whole stylesheet.
 *
 * Moved out of layout-top.php's <style> block so it can be cached, and because the sheet
 * outgrew being inline the moment there was more than a table on a page. Every token name
 * and every class name that existed inline is kept verbatim: dashboard.php, job.php,
 * assets.php, channels.php and keys.php were written against .cards/.card/.pill/.ok/.bad/
 * .warn/.grid/.thumb/.sub/.muted/.alert, and none of them were touched.
 *
 * Served by nginx off try_files, so it never reaches the front controller. A same-origin
 * file satisfies default-src 'self' with no policy change.
 */

/* ============================================================== design tokens ==
 * Phase H, H2a. **One source for every value a page is allowed to use.**
 *
 * Before this the sheet had fifteen colour tokens and nothing else: sizes, spacing and
 * widths were typed in at each use, which is why the seventeen operator pages carried 454
 * inline `style=` attributes between them. Nothing below changes a layout. The scales are
 * written down so that the slices after this one have something to build against, and the
 * three colours H0 measured as failing are corrected.
 *
 * **The identity moved in Track C, Block 2.** The warm near-black and gold were the first
 * palette; the customer app now draws with the design system's tokens, as the operator app
 * does — one product, one palette, teal the action colour.
 * ============================================================================ */

:root {
  /* ---- colour: the design tokens (Track C, Block 2) --------------------------------------
   * The customer app's palette is the design system's now: `public/cutting-room/tokens.css`
   * (generated from `design/tokens.json`) defines every colour, loaded before this sheet, and
   * the names this sheet has always used are aliases of it. The colour-literal check covers
   * this file: a hex here fails the build, as it does in the operator app.
   *
   * `--panel`, `--accent`, `--accent-ink`, `--ok`, `--warn` and `--line` are the tokens'
   * own names and are not redefined. The contrast work H0 did on the old warm palette is
   * the token file's now: every text pair is 4.5:1 in both themes, checked by a test. */
  --bg: var(--surround);
  --fg: var(--ink);
  --muted: var(--ink-muted);
  --bad: var(--danger);

  /* ---- colour: surfaces ----------------------------------------------------- */
  --rail: var(--panel);
  --raise: var(--raised);
  --hover: var(--raised);
  --accent-dim: color-mix(in srgb, var(--accent) 55%, var(--surround));

  /* ---- colour: boundaries ---------------------------------------------------
   * `--line-control` bounds anything that *is* a control (WCAG 1.4.11, 3:1): the token
   * `line-strong`. `--line` is the token's own; `--line-soft` is quieter than it. */
  --line-control: var(--line-strong);
  --line-soft: color-mix(in srgb, var(--line) 70%, var(--surround));

  /* ---- type -----------------------------------------------------------------
   * 12 · 13 · 14 · 16 · 20 · 26 · 34, and three weights. Body stays 14, which is what the
   * sheet already set on `body`; nothing re-sizes by adopting these names. */
  --text-xs:12px;
  --text-sm:13px;
  --text-base:14px;
  --text-md:16px;
  --text-lg:20px;
  --text-xl:26px;
  --text-2xl:34px;
  --weight-normal:400;
  --weight-medium:500;
  --weight-semibold:600;

  /* ---- space ---------------------------------------------------------------- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;

  /* ---- layout ---------------------------------------------------------------- */
  --width-content:1160px;   /* the widest a page of anything should get */
  --width-reading:720px;    /* prose and forms a customer reads top to bottom */
  --gutter:24px;            /* narrowed to --gutter-tight below 820px */
  --gutter-tight:16px;
  --card-pad-y:16px;
  --card-pad-x:20px;

  /* ---- shape ---------------------------------------------------------------- */
  --radius:8px;
  --radius-lg:12px;
  --radius-xl:20px;
  --rail-w:256px;
}

/* **Numbers that sit under one another must line up.** Credits, money, durations, counts and
 * percentages are compared down a column far more often than they are read in a sentence, and
 * a proportional zero is half a character narrower than a proportional eight. Applied to the
 * places that are always numeric, plus a utility for the ones that are not. */
.tabular, td, th, .card .n, .pill, .counter, .mult, time {
  font-variant-numeric:tabular-nums;
}

/* **Honour a request not to animate.** The sheet has a handful of transitions — the quote's
 * carousel among them — and somebody who has asked their system for less motion has asked for
 * a reason. Kept to `.01ms` rather than `0` so anything listening for `transitionend` still
 * hears it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

* { box-sizing:border-box; }
html, body { height:100%; }

body {
  margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ---------------------------------------------------------------- the shell -- */

.shell { display:grid; grid-template-columns:var(--rail-w) 1fr; min-height:100dvh; }
.shell.collapsed { grid-template-columns:64px 1fr; }

.rail {
  background:var(--rail); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:10px; gap:2px;
  position:sticky; top:0; height:100dvh; overflow-y:auto; overflow-x:hidden;
}

.rail-brand { display:flex; align-items:center; gap:10px; height:44px; padding:0 6px; margin-bottom:10px; }
.rail-mark {
  width:26px; height:26px; border-radius:7px; flex:none;
  background:linear-gradient(140deg,var(--accent),var(--accent-hover));
  display:grid; place-items:center; color:var(--accent-ink); font-weight:800; font-size:13px;
}
.rail-word { font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:13px; }
.rail-collapse {
  margin-left:auto; background:none; border:0; color:var(--muted); cursor:pointer;
  padding:4px 6px; border-radius:6px; line-height:1;
}
.rail-collapse:hover { background:var(--hover); color:var(--fg); }

.rail-nav { display:flex; flex-direction:column; gap:2px; }
.rail-nav a {
  display:flex; align-items:center; gap:10px; height:36px; padding:0 10px;
  border-radius:var(--radius); color:var(--muted); font-size:13px;
  border:1px solid transparent; white-space:nowrap;
}
.rail-nav a:hover { background:var(--hover); color:var(--fg); text-decoration:none; }
.rail-nav a[aria-current="page"] { background:var(--panel); border-color:var(--line); color:var(--fg); }
.rail-nav .ico { width:18px; flex:none; text-align:center; opacity:.85; font-size:14px; }
.rail-cap { padding:14px 10px 4px; color:var(--muted); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.11em; }

.rail-group { margin-top:14px; }
.rail-group > summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px;
  padding:0 10px; height:28px; color:var(--muted);
  font-size:10.5px; text-transform:uppercase; letter-spacing:.11em;
}
.rail-group > summary::-webkit-details-marker { display:none; }
.rail-group > summary::after { content:"\25BE"; margin-left:auto; font-size:9px; }
.rail-month { padding:8px 10px 4px; color:var(--muted); font-size:11px; }
.rail-recent { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; }
.rail-recent:hover { background:var(--hover); text-decoration:none; }
.rail-recent img, .rail-recent .noimg {
  width:43px; height:25px; flex:none; border-radius:3px; object-fit:cover;
  background:var(--raise); border:1px solid var(--line);
}
.rail-recent .t { min-width:0; }
/* Two lines rather than one with an ellipsis and a tooltip. A film's name is what a customer
   recognises it by, and `-webkit-line-clamp` shows nearly all of them in full while keeping the
   rail's density: an entry is at most one line taller than it was. */
.rail-recent .t .rail-title {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-weight:500; font-size:12px; color:var(--fg); line-height:1.3;
}
.rail-recent .t span { font-size:11px; color:var(--muted); }
.rail-recent .t span strong { color:var(--fg); font-weight:600; }

.rail-slack { flex:1; min-height:20px; }

.rail-account {
  border:1px solid var(--line); border-radius:10px; background:var(--panel);
  padding:8px; display:flex; align-items:center; gap:9px;
}
.avatar {
  width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-weight:700; font-size:12px; color:var(--accent-ink);
  background:linear-gradient(140deg,var(--accent),var(--accent-hover));
}
.rail-account .who { min-width:0; flex:1; }
.rail-account .who b { display:block; font-size:12px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-account .who span { font-size:11px; color:var(--muted); }

.shell.collapsed .rail-word, .shell.collapsed .rail-nav a span:not(.ico),
.shell.collapsed .rail-group, .shell.collapsed .rail-cap,
.shell.collapsed .rail-account .who { display:none; }
.shell.collapsed .rail-account { justify-content:center; }

main { padding:28px 24px 64px; min-width:0; }
.wrap { max-width:1000px; margin-inline:auto; }
.wrap-narrow { max-width:720px; margin-inline:auto; }

/* -------------------------------------------------------------- typography -- */

h1 { font-size:22px; margin:0 0 4px; font-weight:600; letter-spacing:-.01em; }
h2 { font-size:12px; margin:30px 0 12px; font-weight:600; color:var(--muted);
     text-transform:uppercase; letter-spacing:.1em; }
h3 { font-size:15px; margin:0 0 6px; font-weight:600; }
.sub { color:var(--muted); margin:0 0 22px; }
.muted { color:var(--muted); }
.page-head { display:flex; align-items:flex-end; gap:16px; margin-bottom:18px; }
.page-head h1 { margin:0; }
.page-head .spacer { flex:1; }

/* The account menu hangs off the right edge of the rail rather than the left. The last
   inline style in the customer shell. */
.pop-right-edge { left:auto; right:0; }

/* **The three declarations that were 460 inline attributes.** The video page carried
   `font-size` 278 times, `white-space` 91 times and `text-align` 91 times — once per shot
   row, in the markup, in a page that was 86% shot rows. */
.text-xs { font-size:var(--text-xs); }
.nowrap { white-space:nowrap; }
.text-right { text-align:right; }
.dim { color:var(--line-control); }
hr.rule { border:0; border-top:1px solid var(--line); margin:18px 0; }

/* -------------------------------------------------------------- utilities -- */

/* A label that a screen reader announces and a sighted reader does not see. The composer's
   prompt had this as `style="position:absolute;left:-9999px"`; it is a rule, not a decoration,
   so it lives here. */
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.spacer { flex:1; }
.field-wide { width:100%; }
.note-fine { margin-top:var(--space-3); font-size:var(--text-xs); }
.dlg-label-loose { margin-top:18px; }
.discard-upload { margin-top:var(--space-2); }
.alert-loose { margin-top:var(--space-3); }
.qnote-loose { margin-top:var(--space-3); }
.btn-inline { margin-left:6px; }
.btn-lg { padding:10px 18px; font-size:var(--text-md); }

/* A brand profile's mark: its initial on a raised disc. It was one of twelve hues until
   Track C, Block 2 — the design system gives colour three jobs beyond the ladder, and telling
   profiles apart is not one of them. A letter tells them apart without spending colour. */
.dot { width:18px; height:18px; border-radius:50%; flex:none; display:inline-grid; place-items:center;
  background:var(--raised); color:var(--ink); border:1px solid var(--line-strong);
  font-size:10px; font-weight:600; line-height:1; text-transform:uppercase; }
.dot-sm { width:16px; height:16px; font-size:9px; }

/* ------------------------------------------------------------------ atoms -- */

button, select, input, textarea {
  font:inherit; background:var(--raise); color:var(--fg);
  /* WCAG 1.4.11: a control's boundary is what identifies it, and this was `#3a332c` at
     1.31:1 against the page. */
  border:1px solid var(--line-control); border-radius:6px; padding:7px 11px;
}
button { cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--accent); }
button:disabled { opacity:.45; cursor:not-allowed; }
textarea { resize:vertical; }

.btn { display:inline-flex; align-items:center; gap:7px; }
.btn-primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
.btn-primary:hover:not(:disabled) { filter:brightness(1.08); }
.btn-ghost { background:transparent; border-color:var(--line); color:var(--muted); }
.btn-ghost:hover { color:var(--fg); }
.btn-danger { color:var(--bad); border-color:color-mix(in srgb, var(--danger) 45%, var(--line)); background:transparent; }
.btn-sm { padding:4px 9px; font-size:12px; }

.pill { display:inline-block; padding:2px 8px; border-radius:10px; font-size:var(--text-xs);
        border:1px solid var(--line); white-space:nowrap; }
.ok { color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, var(--line)); }
.bad { color:var(--bad); border-color:color-mix(in srgb, var(--danger) 45%, var(--line)); }
.warn { color:var(--warn); border-color:color-mix(in srgb, var(--warn) 40%, var(--line)); }

.chip {
  display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 10px;
  border-radius:99px; background:var(--raise); border:1px solid transparent;
  color:var(--fg); font-size:12.5px; cursor:pointer;
}
.chip:hover { background:var(--raised); text-decoration:none; }
.chip .dot { width:16px; height:16px; border-radius:50%; flex:none; }
.chip.plain { background:none; border:0; color:var(--muted); cursor:default; }
.chip .mult { color:var(--muted); font-variant-numeric:tabular-nums; }

.cards { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
        padding:14px 18px; min-width:150px; }
.card .n { font-size:24px; font-weight:600; }
.card .k { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.09em; }

.alert { background:color-mix(in srgb, var(--danger) 12%, var(--surround)); border:1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); padding:11px 14px;
         border-radius:var(--radius); margin-bottom:10px; }
.alert.emergency { background:color-mix(in srgb, var(--danger) 22%, var(--surround)); border-color:color-mix(in srgb, var(--danger) 70%, var(--line)); }
.alert.note { background:var(--panel); border-color:var(--accent-dim); }

.empty { text-align:center; padding:56px 20px; color:var(--muted); }
.empty .big { font-size:30px; opacity:.5; margin-bottom:10px; }
.empty h3 { color:var(--fg); }

table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; color:var(--muted); font-weight:600; padding:8px 10px;
     border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:8px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
tr:hover td { background:var(--raised); }

pre { background:var(--sunken); border:1px solid var(--line); border-radius:6px; padding:11px;
      overflow-x:auto; font-size:12px; margin:0; white-space:pre-wrap; word-break:break-word; }
form.inline { display:inline; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.thumb { width:100%; border-radius:6px; border:1px solid var(--line); display:block; }

.login { max-width:360px; margin:12vh auto; }
/* Both fields were named by a placeholder alone, which vanishes as soon as somebody types and
   is deliberately faint. Visible labels: there are two fields and the page has room. */
.login label { display:block; font-size:var(--text-sm); color:var(--muted); margin-bottom:4px; }
.login input { width:100%; margin-bottom:var(--space-3); }
.login button { width:100%; }
.login-aside { margin-top:var(--space-4); }
.login .mark { width:40px; height:40px; border-radius:11px; margin-bottom:16px;
  background:linear-gradient(140deg,var(--accent),var(--accent-hover)); display:grid; place-items:center;
  color:var(--accent-ink); font-weight:800; }

/* --------------------------------------------------------------- popovers -- */

.pop { position:relative; display:inline-block; }
.pop > summary { list-style:none; cursor:pointer; }
.pop > summary::-webkit-details-marker { display:none; }
.pop-panel {
  position:absolute; z-index:40; min-width:220px; padding:6px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-float);
}
.pop-up   { bottom:calc(100% + 8px); left:0; }
.pop-down { top:calc(100% + 8px); left:0; }
.pop-right{ top:calc(100% + 8px); right:0; }
.pop-panel a, .pop-panel button {
  display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px;
  border:0; background:none; color:var(--fg); font-size:13px; border-radius:6px;
  text-align:left; cursor:pointer;
}
.pop-panel a:hover, .pop-panel button:hover { background:var(--hover); text-decoration:none; }
.pop-panel span[aria-disabled="true"] {
  display:flex; align-items:center; gap:9px; padding:8px 10px; font-size:13px;
  color:var(--muted); opacity:.55; cursor:not-allowed;
}
.pop-panel hr { border:0; border-top:1px solid var(--line-soft); margin:5px 2px; }
.pop-note { padding:7px 10px; font-size:11.5px; color:var(--muted); }

/* --------------------------------------------------------------- composer -- */

.composer-stage {
  position:relative; min-height:calc(100dvh - 92px);
  display:flex; flex-direction:column; justify-content:center;
}
.composer-stage::before {
  content:""; position:absolute; inset:-10% -20% 30%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 44% at 32% 22%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(34% 40% at 70% 16%, color-mix(in srgb, var(--ink) 6%, transparent), transparent 72%);
  filter:blur(38px);
}
/* Centred on the body, not on the pane right of the rail. The off-centre composition is
   the screen's signature and it disappears the moment you centre inside main. */
.composer-col { width:640px; max-width:100%; margin-left:max(0px, calc(50vw - var(--rail-w) - 320px)); }
.shell.collapsed .composer-col { margin-left:max(0px, calc(50vw - 64px - 320px)); }

.banner {
  display:flex; align-items:center; gap:10px; height:40px; padding:0 8px 0 14px;
  border-radius:var(--radius-lg); background:var(--accent); color:var(--accent-ink);
  font-size:13px; font-weight:600; margin-bottom:22px;
}
.banner button { margin-left:auto; background:none; border:0; color:inherit; opacity:.7; cursor:pointer; }

.composer { border:1px solid var(--line-strong); background:var(--panel); border-radius:var(--radius-xl); }
.composer-field { position:relative; padding:16px 18px 6px; }
.composer-field textarea {
  width:100%; border:0; background:none; padding:0; resize:none; min-height:74px;
  font-size:15px; line-height:1.55; outline:none;
}
.ghost {
  position:absolute; top:16px; left:18px; right:18px; pointer-events:none;
  font-size:15px; line-height:1.55; color:var(--muted);
}

.composer-bar {
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-top:1px solid var(--line);
}
.icon-btn {
  width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:var(--raise); border:1px solid transparent; color:var(--fg); font-size:17px;
  line-height:1; cursor:pointer; padding:0;
}
.icon-btn:hover { background:var(--raised); }
.submit-btn {
  width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); border:0; font-size:16px; cursor:pointer; padding:0;
}
.submit-btn:disabled { opacity:.35; cursor:not-allowed; }
.counter { font-size:11.5px; color:var(--muted); }
.counter.low { color:var(--warn); }

.attach { display:flex; align-items:center; gap:8px; margin:12px 2px 0; font-size:12.5px; }
.attach .tag { display:inline-flex; align-items:center; gap:8px; padding:4px 10px;
  border:1px solid var(--accent-dim); border-radius:99px; color:var(--fg); }
.attach .tag button { background:none; border:0; color:var(--muted); cursor:pointer; padding:0; }

.recent-head { display:flex; align-items:baseline; margin:34px 0 6px; }
.recent-head h2 { margin:0; }
.recent-head a { margin-left:auto; font-size:12.5px; }
.recent-row { display:flex; align-items:center; gap:12px; padding:9px 8px;
  border-radius:var(--radius); color:var(--fg); }
.recent-row:hover { background:var(--hover); text-decoration:none; }
.recent-row img, .recent-row .noimg {
  width:63px; height:41px; flex:none; border-radius:5px; object-fit:cover;
  background:var(--raise); border:1px solid var(--line);
}
.recent-row .t { flex:1; min-width:0; }
.recent-row .t b { display:block; font-weight:500; font-size:13.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recent-row .t span { font-size:12px; color:var(--muted); }
.pill.inverted { background:var(--ink); color:var(--surround); border-color:transparent; font-weight:600; }

/* ----------------------------------------------------------------- dialog -- */

dialog {
  border:1px solid var(--line); background:var(--panel); color:var(--fg);
  border-radius:16px; padding:0; width:580px; max-width:calc(100vw - 32px);
}
dialog::backdrop { background:color-mix(in srgb, var(--sunken) 75%, transparent); backdrop-filter:blur(8px); }
.dlg-head { display:flex; align-items:center; gap:10px; padding:16px 18px 12px; }
.dlg-head h3 { margin:0; flex:1; }
.dlg-head button { background:none; border:0; color:var(--muted); font-size:18px; cursor:pointer; }
.dlg-body { padding:0 18px 16px; }
.dlg-foot { display:flex; gap:9px; justify-content:flex-end; padding:14px 18px;
  border-top:1px solid var(--line); }
.callout { border:1px solid var(--accent-dim); background:var(--panel); border-radius:10px;
  padding:12px 14px; margin-bottom:14px; font-size:13px; }
.callout b { display:block; margin-bottom:6px; }
.callout ul { margin:0; padding-left:18px; color:var(--muted); }
.callout li { margin:2px 0; }
.dlg-label { display:flex; align-items:baseline; margin:0 0 7px; font-size:12.5px; }
.dlg-label .c { margin-left:auto; color:var(--muted); }
.dlg-label .c.low { color:var(--warn); }
.dlg-body textarea { width:100%; min-height:240px; font-size:13.5px; line-height:1.6; }
.dlg-body textarea.low { border-color:var(--warn); }

/* --------------------------------------------------------------- projects -- */

.toolbar { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:18px; }
.toolbar .spacer { flex:1; }
.search { display:flex; align-items:center; gap:8px; background:var(--raise);
  border:1px solid var(--line-control); border-radius:8px; padding:0 10px; height:34px; }
.search input { border:0; background:none; padding:0; height:32px; width:190px; outline:none; }
.seg { display:inline-flex; border:1px solid var(--line-control); border-radius:8px; overflow:hidden; }
/* `button` as well as `a`: the library's toggle submits the filter form, so that switching
   between grid and list carries whatever is in the search box rather than discarding it. */
.seg a, .seg button { padding:7px 12px; font-size:12.5px; color:var(--muted);
  background:var(--raise); border:0; cursor:pointer; font-family:inherit; }
.seg a:hover, .seg button:hover { color:var(--fg); text-decoration:none; }
.seg a[aria-current="true"], .seg button[aria-current="true"] {
  background:var(--panel); color:var(--fg); }
.filter { position:relative; }
.filter > summary { display:inline-flex; align-items:center; gap:7px; height:34px;
  padding:0 12px; border:1px solid var(--line-control); border-radius:8px; background:var(--raise);
  font-size:12.5px; list-style:none; cursor:pointer; }
.filter > summary::-webkit-details-marker { display:none; }
.filter.on > summary { border-color:var(--accent); color:var(--accent); }

/* A `<ul>` in the library, so a screen reader is told how many films are on the page, and a
   `<div>` on /profiles, which shares these cards. The resets cost nothing on a div. */
.proj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  list-style:none; margin:0; padding:0; }
@media (max-width:1000px) { .proj-grid { grid-template-columns:repeat(2,1fr); } }
.proj-card { border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--panel); position:relative; }
.proj-card:hover { border-color:var(--line-strong); }
.proj-card .shot { display:block; aspect-ratio:16/9; width:100%; object-fit:cover;
  background:var(--raise); }
.proj-card .body { padding:11px 13px 12px; }
/* `.proj-name` is the library's `<h2>`; `b` is what /profiles still uses. Same treatment,
   because the difference is semantic rather than visual. `h2`'s own rule in the type section
   is an uppercase section label, which is not what a film's name is. */
.proj-card .proj-name {
  display:block; font-size:13.5px; font-weight:500; margin:0 0 8px;
  color:var(--fg); text-transform:none; letter-spacing:normal;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.proj-card .proj-name a { color:inherit; display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.proj-card .proj-name a:hover { color:var(--accent); text-decoration:none; }
.proj-card .shot-link { display:block; }
.proj-card .body b { display:block; font-size:13.5px; font-weight:500; margin-bottom:8px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg); }
.proj-card .meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.proj-card .meta small { white-space:nowrap; font-variant-numeric:tabular-nums; }
.proj-card .meta .spacer { flex:1; }

/* **A real table.** This was six columns of anonymous `<div>`/`<span>` with a header row made
   of the same, so nothing connected a value to the column it belonged to: a screen reader read
   "3.5 min" with no way to say which heading it sat under. The columns are the same; only the
   elements changed, and `overflow-x:auto` keeps a wide table scrolling itself rather than the
   page. */
.proj-list { border:1px solid var(--line); border-radius:var(--radius-lg); overflow-x:auto; }
/* Fixed, so the widths below govern and a long title truncates instead of stretching the
   table. Under automatic layout a `max-width` on a cell is advisory and a browser sizes the
   column to its content, which is how an ellipsis rule silently does nothing. */
.proj-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.proj-table .cell-thumb { width:96px; }
.proj-table .cell-date { width:110px; }
.proj-table .cell-len { width:90px; }
.proj-table .cell-cr { width:100px; }
.proj-table th, .proj-table td {
  padding:8px 10px; text-align:left; font-weight:400; vertical-align:middle;
  border-bottom:1px solid var(--line-soft);
}
.proj-table thead th {
  background:var(--panel); color:var(--muted); font-size:var(--text-xs);
  text-transform:uppercase; letter-spacing:.08em; white-space:nowrap;
}
.proj-table tbody tr:last-child th, .proj-table tbody tr:last-child td { border-bottom:0; }
.proj-table tbody tr:hover { background:var(--hover); }
.proj-table .cell-menu { width:56px; text-align:right; }
.proj-table .cell-name { min-width:0; }
.proj-table .cell-name a { display:block; color:var(--fg); font-size:13.5px; margin-bottom:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.proj-table .cell-name a:hover { color:var(--accent); text-decoration:none; }
.proj-table img, .proj-table .noimg { width:84px; height:48px; border-radius:5px; object-fit:cover;
  background:var(--raise); border:1px solid var(--line); display:block; }
.proj-table .num { font-size:12.5px; color:var(--muted); white-space:nowrap; }

/* ---------------------------------------------------------------- the library -- */

/* The outer POST form is structure, not layout: it wraps the whole collection so that one
   CSRF token covers every row action. It must add no box of its own, which a plain block with
   no margin already does -- `display:contents` would do the same and costs an argument about
   whether it drops the element from the accessibility tree. */
.library-actions { margin:0; }

/* **At least 44x44.** The row menu carried `style="width:28px;height:28px"`, which made the
   tap target smaller than the stylesheet's own 34px and well under the guidance. Scoped to the
   library so the composer's own `+` control keeps the size H3 gave it. */
.library .icon-btn { width:44px; height:44px; font-size:16px; }

/* A select in the filter bar, labelled by a visually-hidden span rather than a placeholder. */
.field-inline { display:inline-flex; }
.field-inline select { font-size:12.5px; padding:7px 9px; }

.pager { display:flex; align-items:center; gap:12px; margin-top:18px; color:var(--muted);
  font-size:12.5px; }
.pager .spacer { flex:1; }

/* -------------------------------------------------------------- the video -- */

.player { width:100%; aspect-ratio:16/9; background:var(--sunken); border-radius:var(--radius-lg);
  border:1px solid var(--line); display:block; }

.stepper { list-style:none; margin:0; padding:0; }
.stepper li { display:flex; align-items:center; gap:12px; padding:9px 0; color:var(--muted); }
.stepper .bead { width:16px; height:16px; border-radius:50%; flex:none;
  border:2px solid var(--line); background:var(--bg); }
.stepper li.done { color:var(--fg); }
.stepper li.done .bead { background:var(--ok); border-color:var(--ok); }
.stepper li.now { color:var(--fg); font-weight:600; }
.stepper li.now .bead { border-color:var(--accent); background:var(--accent);
  animation:pulse 1.6s ease-in-out infinite; }
.stepper li .when { margin-left:auto; font-size:12px; color:var(--muted); font-weight:400; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }

/* A native `<progress>`: it announces itself without ARIA and takes its value as an
   attribute, so the page needs no `style="width:N%"` for a genuine runtime number. The
   vendor pseudo-elements are the only way to reach its two parts. */
.bar { display:block; width:100%; height:6px; margin:8px 0 22px; border:0; border-radius:3px;
  background:var(--raise); appearance:none; -webkit-appearance:none; overflow:hidden; }
.bar::-webkit-progress-bar { background:var(--raise); }
.bar::-webkit-progress-value { background:var(--accent); transition:width .6s ease; }
.bar::-moz-progress-bar { background:var(--accent); }

.spec { display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--muted);
  border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; }
.dl { display:flex; gap:9px; flex-wrap:wrap; }

.thumb-pick { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.thumb-pick label { display:block; cursor:pointer; position:relative; }
.thumb-pick img { width:100%; border-radius:8px; border:2px solid transparent; display:block; }
.thumb-pick input { position:absolute; opacity:0; pointer-events:none; }
.thumb-pick label:has(input:checked) img { border-color:var(--accent); }
.thumb-pick .cap { font-size:12px; color:var(--muted); margin-top:5px; text-align:center; }

.ledger-line { font-size:13px; color:var(--muted); margin-top:12px; }

@media (max-width:820px) {
  .shell, .shell.collapsed { grid-template-columns:1fr; }
  .rail { position:static; height:auto; flex-direction:row; align-items:center; overflow-x:auto; }
  .rail-group, .rail-slack { display:none; }
  .composer-col { margin-left:auto; margin-right:auto; }
  .proj-grid { grid-template-columns:1fr; }
  /* Three columns of six at this width. Hiding the header cell with its column keeps the
     table consistent rather than leaving a heading over nothing. */
  .proj-table .cell-date, .proj-table .cell-len, .proj-table .cell-cr { display:none; }
  .proj-table img, .proj-table .noimg { width:56px; height:32px; }
  .proj-table th, .proj-table td { padding:8px 6px; }
  /* The filter bar stacks rather than scrolling sideways. */
  .toolbar .search { flex:1 1 100%; }
}

/* ------------------------------------------------------------- the quote gate -- */

.bare-bar { display:flex; align-items:center; gap:10px; height:52px; padding:0 20px;
  border-bottom:1px solid var(--line); background:var(--rail); }
.bare-back { width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  color:var(--muted); font-size:16px; }
.bare-back:hover { background:var(--hover); color:var(--fg); text-decoration:none; }

.quote { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;
  max-width:1160px; margin:0 auto; padding-top:6vh; }
.quote-say h1 { font-size:44px; line-height:1.08; letter-spacing:-.025em; margin:18px 0 14px; }
.quote-say p { color:var(--muted); max-width:34ch; margin:0; }
.quote-badge { display:inline-flex; align-items:center; gap:8px; font-size:12px;
  color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:5px 11px; }

/* The step strip is real navigation: a passed step is a link, and the current one says so.
   VidRush styles inert list items to look like tabs, which is a lie the markup repeats. */
.qsteps { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.qsteps a, .qsteps span { display:flex; align-items:center; gap:7px; padding:9px 10px;
  font-size:12.5px; color:var(--muted); border-bottom:2px solid transparent;
  margin-bottom:-1px; white-space:nowrap; }
.qsteps a:hover { color:var(--fg); text-decoration:none; }
.qsteps [aria-current="step"] { color:var(--accent); border-bottom-color:var(--accent); }
.qsteps .n { width:18px; height:18px; border-radius:50%; display:grid; place-items:center;
  font-size:10.5px; border:1px solid currentColor; flex:none; }

/* Fixed height whether a panel holds eleven rows or two: the carousel must not resize
   under the pointer as you advance it. */
/* **The step is an attribute, not an inline style.** It was `style="transform:translateX(-353px)"`
   computed in PHP from a panel width typed in here — two copies of one number in two languages,
   and a carousel that could not be made to fit a phone without changing both. Three steps means
   three rules, and the page carries no style attribute at all. */
.qtrack { overflow:hidden; --qpanel-w:343px;
  mask-image:linear-gradient(to right, transparent 0, black 40px, black 100%); }
.qrow { display:flex; gap:var(--space-3); transition:transform .32s cubic-bezier(.4,0,.2,1); }
.qtrack[data-step="1"] .qrow { transform:translateX(0); }
.qtrack[data-step="2"] .qrow { transform:translateX(calc(-1 * (var(--qpanel-w) + var(--space-3)))); }
.qtrack[data-step="3"] .qrow { transform:translateX(calc(-2 * (var(--qpanel-w) + var(--space-3)))); }
.qpanel { flex:0 0 var(--qpanel-w); height:620px; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:opacity .32s; }
.qpanel[data-offset="0"] { opacity:1; }
.qpanel[data-offset="1"] { opacity:.55; }
.qpanel[data-offset="2"], .qpanel[data-offset="3"] { opacity:.18; }
.qpanel[data-offset="-1"], .qpanel[data-offset="-2"], .qpanel[data-offset="-3"] { opacity:.18; }
.qhead { padding:16px 16px 12px; border-bottom:1px solid var(--line-soft); }
.qhead h3 { margin:0 0 3px; font-size:15px; }
.qhead p { margin:0; font-size:12px; color:var(--muted); }
.qbody { padding:14px 16px; overflow-y:auto; flex:1; }
.qfoot { padding:12px 16px; border-top:1px solid var(--line-soft); display:flex; gap:8px; }
.qfoot .btn { flex:1; justify-content:center; }

.qfield { margin-bottom:14px; }
.qfield > label, .qlabel { display:block; font-size:11px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--muted); margin-bottom:5px; }
.qfield select, .qfield input[type=text] { width:100%; }
/* W3.1: the Instruction summary, editable on the Check panel. */
.qfield textarea.qsummary { width:100%; font-size:13.5px; line-height:1.55; min-height:92px; }
.qvalue { font-size:13.5px; }
.qro { font-size:13.5px; color:var(--fg); background:var(--raise); border-radius:6px;
  padding:8px 10px; border:1px solid var(--line-soft); }
.qprecis { font-size:12.5px; line-height:1.55; color:var(--muted); background:var(--raise);
  border:1px solid var(--line-soft); border-radius:6px; padding:10px; max-height:112px;
  overflow-y:auto; }
.qnote { font-size:12px; color:var(--muted); margin:10px 0 0; }
.qbanner { font-size:12px; color:var(--muted); background:var(--panel);
  border:1px solid var(--accent-dim); border-radius:8px; padding:9px 11px; margin-bottom:14px; }

.qcheck { display:flex; align-items:center; gap:9px; padding:7px 2px; font-size:13px; }
.qradio { display:block; border:1px solid var(--line); border-radius:9px; padding:10px 12px;
  margin-bottom:8px; cursor:pointer; }
.qradio:has(input:checked) { border-color:var(--accent); }
.qradio b { display:block; font-size:13px; font-weight:600; margin-bottom:2px; }
.qradio span { font-size:12px; color:var(--muted); }

/* ------------------------------------------------------- the brand profile -- */

/* A scrollable list of voices, each with its own player. A `<fieldset>` rather than a `<div>`
   because it is one choice made of many radios, and the legend names it. */
.pick-list {
  max-height:320px; overflow-y:auto; border:1px solid var(--line);
  border-radius:var(--radius); margin:0 0 var(--space-3); padding:0; min-width:0;
}
.pick-row { border-radius:0; cursor:pointer; }
.voice-preview { height:32px; }

/* The speed radios and the four blocklists: a row of choices that wraps. `margin-right` was
   the inline style on every one of them, in four loops, which is how 28 declarations in the
   file became 134 in the page. */
.check-inline { display:inline-flex; margin-right:var(--space-4); }
.radio-inline { margin-right:14px; }
.speed-pick { border:0; padding:0; margin:0 0 var(--space-3); min-width:0; }
.speed-pick legend { font-size:var(--text-sm); color:var(--muted); padding:0; }

.form-actions { margin-top:var(--space-5); }

/* The list's cards state three facts each. A description list says which is which without
   needing a colon in the text. */
.profile-facts { margin:0; font-size:var(--text-xs); color:var(--muted); line-height:1.6; }
.profile-facts dt { float:left; clear:left; width:7.5em; }
.profile-facts dd { margin:0 0 0 7.5em; color:var(--fg); }

.profile-add { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
.profile-add label { flex:1 1 100%; font-size:var(--text-sm); color:var(--muted); }
.profile-add input { flex:1 1 18rem; min-width:0; }

.qsource { border:1px solid var(--line); border-radius:9px; padding:11px 12px; margin-bottom:9px; }
.qsource b { display:block; font-size:13px; margin-bottom:3px; }
.qsource p { margin:0 0 6px; font-size:12px; color:var(--muted); }
.qsource .who { font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* Dotted leaders, with the verdict pill left of the number as VidRush places it. */
.qcost { list-style:none; margin:0; padding:0; }
.qcost li { display:flex; align-items:baseline; gap:8px; padding:7px 0; font-size:13px; }
.qcost .k { color:var(--muted); }
.qcost .lead { flex:1; border-bottom:1px dotted var(--line); transform:translateY(-3px); }
.qcost .v { font-variant-numeric:tabular-nums; }
.qcost li.total { border-top:1px solid var(--line); margin-top:6px; padding-top:12px;
  font-size:15px; font-weight:600; }

@media (max-width:960px) {
  .quote { grid-template-columns:1fr; gap:20px; padding-top:20px; }
  .quote-say h1 { font-size:30px; }
  .qtrack { mask-image:none; }
}

/* ---------------------------------------------------------------- replace a shot --
   The picker exists because the library finally has thumbnails: `assets.thumb_path`
   was declared in migration 004 and written by nothing until 7.16, so choosing a
   picture meant choosing from a list of filenames. */
.shot-thumb {
  width: 48px; height: 27px; object-fit: cover; border-radius: 3px;
  vertical-align: middle; margin-right: 8px; background: var(--raised);
}
.pick-grid {
  display: grid; gap: 14px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.pick {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px;
}
.pick .thumb {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 4px; background: var(--raised); display: block;
}
.pick .thumb.none {
  display: grid; place-items: center; color: var(--muted); font-size: 11.5px;
}
.pick b { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.pick .btn { margin-top: auto; }
.shot-current { display: flex; gap: 14px; align-items: flex-start; }
.shot-current .thumb {
  width: 160px; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 4px; background: var(--raised); flex: 0 0 auto;
}
.quote { font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
.btn.small { padding: 3px 9px; font-size: 11.5px; }

/* ------------------------------------------------------------------- revisions --
   Each render keeps its own master key, so an older film stays downloadable rather
   than being overwritten in place by the next one. */
.revisions .rows { width: 100%; border-collapse: collapse; margin: 10px 0 16px; }
.revisions .rows td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.revisions .rows tr:last-child td { border-bottom: 0; }
.rerender { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rerender p { margin: 0; }

/* ------------------------------------------------------------------ captions --
   H7. A hundred captions in one column, and the page is a list rather than a hundred
   cards: `<ol>` in the markup, so a screen reader is told how many there are and which
   one it is on, and one rule here instead of a border, a heading and a form apiece.

   `.sr-only` lived here for the old per-caption labels and is gone — `.visually-hidden`
   in the utilities block is the same rule and the only one the shell uses. */
.caption-list { list-style:none; margin:0; padding:0; }

.caption-row {
  padding:var(--space-3) 0 var(--space-4);
  border-bottom:1px solid var(--line-soft);
  /* The number and the timecode sit above the words, so a caption reads top to bottom
     at 360px without the column ever being narrower than the sentence in it. */
  display:flex; flex-direction:column; gap:var(--space-2);
}
.caption-row:last-child { border-bottom:0; }

/* The number and the timecode carry no classes of their own: at a hundred rows a utility
   class per span is a kilobyte of markup for a rule that a descendant selector states once. */
.caption-meta {
  display:flex; align-items:center; gap:var(--space-2);
  margin:0; font-size:var(--text-xs); color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.caption-meta span:first-child { min-width:3ch; }

/* A refused caption and an unbound one are marked on the row, not only in the note under
   it: at a hundred rows the note is below the fold of the reader's attention. The bar is
   inset so a marked row does not shift a pixel against its neighbours. */
.caption-row.is-bad { box-shadow:inset 3px 0 0 var(--bad); padding-left:var(--space-3); }
.caption-row.is-stale { box-shadow:inset 3px 0 0 var(--warn); padding-left:var(--space-3); }

.caption-row textarea {
  width:100%; resize:vertical; min-height:3.2em; font-size:var(--text-base);
  line-height:1.45;
}
.caption-row textarea[aria-invalid="true"] { border-color:var(--bad); }

.caption-note { margin:0; font-size:var(--text-xs); line-height:1.5; }
.caption-note q { color:var(--fg); }

/* The submit row is sticky because the form is a hundred captions long: a customer who
   has corrected caption 84 should not have to scroll to the end of the page to keep it.
   `position:sticky` needs no script and degrades to a normal block where it is not
   supported. */
.caption-actions {
  position:sticky; bottom:0; z-index:2;
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3);
  padding:var(--space-3) 0;
  margin-top:var(--space-4);
  background:var(--bg);
  border-top:1px solid var(--line);
}

@media (max-width:520px) {
  .caption-actions .btn { flex:1 1 auto; }
}


/* ------------------------------------------------------------------- home --
   H3a. The dashboard `/` became when the composer moved to `/create`. Built from the
   components that already existed — card, pill, empty, btn — rather than a new vocabulary. */

.home { max-width:var(--width-content); }

.home-head { display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--space-4); margin-bottom:var(--space-6); flex-wrap:wrap; }
.home-head h1 { margin:0 0 var(--space-1); font-size:var(--text-xl); }
.home-head .sub { margin:0; color:var(--muted); }

.home-section { margin-bottom:var(--space-6); }
.home-section h2 { font-size:var(--text-md); font-weight:var(--weight-semibold);
  margin:0 0 var(--space-3); }
.home-section-head { display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-3); margin-bottom:var(--space-3); }
.home-section-head h2 { margin:0; }

.home-row { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  margin-bottom:var(--space-2); color:var(--fg); }
a.home-row:hover { background:var(--hover); text-decoration:none; }
.home-row-bad { border-color:var(--bad); }
.home-row-mark { flex:none; width:24px; height:24px; border-radius:50%; display:grid;
  place-items:center; background:var(--bad); color:var(--accent-ink);
  font-weight:var(--weight-semibold); }
.home-row-thumb { flex:none; width:64px; height:36px; border-radius:4px; overflow:hidden;
  background:var(--raise); }
.home-row-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.home-row-text { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.home-row-text b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-row-text .muted { font-size:var(--text-xs); }

.home-grid { display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
.home-card { display:flex; flex-direction:column; gap:var(--space-2); color:var(--fg); }
.home-card:hover { text-decoration:none; }
.home-card:hover b { color:var(--accent); }
.home-card-thumb { aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  background:var(--raise); display:block; }
.home-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.home-card b { font-size:var(--text-sm); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.home-card .muted { font-size:var(--text-xs); }

.create-head { margin-bottom:var(--space-5); }
.create-head h1 { margin:0 0 var(--space-1); font-size:var(--text-xl); }
.create-head .sub { margin:0; color:var(--muted); max-width:var(--width-reading); }

.pop-row { display:flex; align-items:center; gap:9px; padding:var(--space-2) 10px;
  cursor:pointer; }

/* ------------------------------------------------- the quote on a small screen --
   Below this width there is no carousel. The current panel is the only one drawn, at its
   natural height and the width of the screen: a 343px card stepped by a transform cannot fit
   a 360px viewport without scrolling the page sideways, and the panel that decides whether to
   spend money is the worst one to hide off the edge.

   Every panel is still a real form and every earlier step is still a real link, so this is a
   change of presentation only — the flow works identically with JavaScript unavailable. */
@media (max-width:720px) {
  .qtrack { overflow:visible; mask-image:none; }
  .qrow { display:block; transform:none !important; }
  .qpanel { width:100%; height:auto; min-height:0; opacity:1 !important; }
  .qtrack[data-step="1"] .qpanel:not([data-panel="1"]),
  .qtrack[data-step="2"] .qpanel:not([data-panel="2"]),
  .qtrack[data-step="3"] .qpanel:not([data-panel="3"]) { display:none; }
  .qbody { overflow-y:visible; }
  .home-head .btn-lg { width:100%; justify-content:center; }
}


/* ------------------------------------------------------- the video page (H4) --
   Six regions, one architecture. The status region is the only part that varies by state;
   everything below it exists only when there is something to put in it. */

.video-head { margin-bottom:var(--space-5); }
.video-head h1 { margin:0 0 var(--space-1); font-size:var(--text-xl); overflow-wrap:anywhere; }
.video-head .sub { margin:0; color:var(--muted); font-size:var(--text-sm); }

.video .status { margin-bottom:var(--space-5); }
.video .card.status { padding:var(--card-pad-y) var(--card-pad-x); }
.video .status h2 { margin:0 0 var(--space-2); font-size:var(--text-md); }
.video .status p { margin:0 0 var(--space-2); }
.video .status p:last-child { margin-bottom:0; }
.status-action { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  margin-bottom:var(--space-5); }

/* H6. The stage a film is on, and the control that replaced the meta refresh. */
.now-stage { margin:0 0 var(--space-1); font-size:var(--text-md); }
.status-refresh { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  margin:var(--space-4) 0 0; }

.video h2 { font-size:var(--text-md); margin:var(--space-6) 0 var(--space-3); }
.video .spec { margin-top:var(--space-3); }

.inspect-head { border-top:1px solid var(--line); padding-top:var(--space-5); }

/* One shape for all four inspection blocks, whether a `<details>` or the shot list's
   link-driven equivalent. */
.inspect { border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); padding:var(--space-3) var(--card-pad-x);
  margin-bottom:var(--space-3); }
.inspect > summary { cursor:pointer; display:flex; align-items:baseline; gap:var(--space-2);
  flex-wrap:wrap; }
.inspect > summary::marker { color:var(--muted); }
.inspect-top { display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-3); flex-wrap:wrap; }
.inspect-top b { display:block; }
.inspect table { margin-top:var(--space-3); }
.inspect .rerender { margin-top:var(--space-4); }

.pager { display:flex; align-items:center; gap:var(--space-3); justify-content:center;
  margin-top:var(--space-3); flex-wrap:wrap; }

/* The shot table is the widest thing on the page by some way; it scrolls in its own box
   rather than pushing the document sideways. */
.shots { display:block; overflow-x:auto; white-space:normal; }

@media (max-width:720px) {
  .video h2 { margin-top:var(--space-5); }
  .video .dl .btn { flex:1 1 auto; justify-content:center; }
  .thumb-pick { grid-template-columns:1fr 1fr; }
  .video-head h1 { font-size:var(--text-lg); }
}