/* fuxe, "Edit bay" (redesign PR 1: tokens and shell; see docs/REDESIGN_SPEC.md).
   The app is a dark edit bay: slate page, raised panels told apart by fill rather than by
   borders, one cyan for what you can press or what is selected, lime for numbers and cards,
   Okabe-Ito colours for clip lanes. Interface type is Archivo; page titles use its narrow
   width. Literata is kept for the script only, still marked up with a red pencil for cuts and
   a highlighter for caption emphasis. The player sits on true black.
   Shell: phones (and any viewport under 900 px, or a touch screen) get a slim top bar and a
   bottom tab bar; a desktop with a mouse gets a left nav rail. Pure media queries. */

@font-face { font-family: "Archivo"; src: url(fonts/Archivo-latin.woff2?v=08e2f373) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Literata"; src: url(fonts/Literata-latin.woff2?v=a7ad7aea) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Literata"; src: url(fonts/Literata-Italic-latin.woff2?v=567bcd5e) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins Caption"; src: url(fonts/Poppins-ExtraBold.ttf?v=dd3b4a76) format("truetype"); font-weight: 800; font-display: swap; }

:root {
  /* surfaces, darkest to lightest */
  --deep: #151B26;        /* nav rail, tab bar, wells behind segmented switches */
  --bay: #1B2230;         /* page */
  --panel: #242D3D;       /* raised surfaces: lists, sheets, drawers, popovers */
  --panel-2: #2C3648;     /* fields and controls on a panel, hover */
  --panel-3: #364259;     /* pressed, the selected segment */
  --rule: #36425A;        /* hairlines, field borders */
  /* text */
  --tx: #E6EAF2;
  --tx-2: #9CA7BC;        /* secondary */
  --tx-3: #8B96AB;        /* tertiary: timestamps, placeholders (4.5:1 on a panel) */
  /* accents */
  --cyan: #56B4E9;        /* primary actions, current tab, focus, selection */
  --cyan-2: #7CC6F0;      /* primary hover */
  --on-cyan: #0F1A24;     /* text on cyan (and on lime, yellow) */
  --lime: #C8F25A;        /* cards and numbers */
  /* Okabe-Ito, for clip lanes and anything colour-coded */
  --orange: #E69F00; --sky: #56B4E9; --green: #2FB38A; --yellow: #F0E442; --blue: #8EA3C9; --verm: #E8743B; --pink: #CC79A7;
  /* script marks */
  --pencil: #FF6B6B;      /* cuts, errors */
  --highlight: #FFD43B;   /* caption emphasis, matches the burned-in captions */
  --broll: #6FA8F0;
  --zoom: #A98BFF;
  --gfx: #E37DB8;
  /* states */
  --ok: #2FB38A;
  --warn: #E6A23C;
  --bad: #FF6B6B;
  --screen: #000000;      /* behind footage */
  --scrim: rgba(6, 9, 15, .62);
  --shadow: 0 14px 36px rgba(0, 0, 0, .45);
  /* roles (what page CSS should use) */
  --accent: var(--cyan); --on-accent: var(--on-cyan); --focus: var(--cyan);
  /* the old light palette's names, now pointing at the bay; existing page CSS reads these */
  --paper: var(--bay);
  --sheet: var(--panel);
  --ink: var(--tx);       /* text; also the light "inverse" fill of tooltips and the toast */
  --ink-2: var(--tx-2);
  --ink-3: var(--tx-3);
  --line: var(--rule);
  --wash: var(--panel-2);
  /* type */
  --ui: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Literata", "Iowan Old Style", Georgia, serif;
  --caption: "Poppins Caption", "Poppins", var(--ui);
  /* scale: 13 / 15 / 17 / 21 / 28 */
  --fs-s: 0.8125rem; --fs-m: 0.9375rem; --fs-l: 1.0625rem; --fs-xl: 1.3125rem; --fs-xxl: 1.75rem;
  --radius: 10px;         /* panels and sheets */
  --radius-s: 6px;        /* buttons, fields, chips */
  /* shell geometry: phone defaults, the desktop rail overrides them below */
  --bar-h: 64px;                                                 /* the editor's action bar */
  --topbar-h: calc(52px + env(safe-area-inset-top, 0px));       /* what sticks at the top */
  --tabbar-h: calc(58px + env(safe-area-inset-bottom, 0px));    /* the bottom tab bar */
  --rail-w: 0px;                                                 /* the desktop nav rail */
  --safe-b: 0px;                                                 /* the tab bar already pads for the home indicator */
  --chrome-b: calc(var(--tabbar-h) + var(--safe-b));             /* fixed chrome under everything at the bottom */
  /* motion: strong curves (the built-in ease-out is too weak to read as a response); UI stays under 300 ms */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* things entering, press feedback */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* something on screen moving from A to B */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* sheets coming up from the bottom (iOS-like) */
  color-scheme: dark;
  accent-color: var(--cyan);
}
/* Desktop: a wide window with a mouse. The nav moves into a rail on the left; nothing is fixed at the bottom. */
@media (min-width: 900px) and (pointer: fine) {
  :root { --topbar-h: 0px; --tabbar-h: 0px; --rail-w: 184px; --safe-b: env(safe-area-inset-bottom, 0px); }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bay); scrollbar-color: var(--panel-3) var(--bay); }
body { margin: 0; min-height: 100dvh; background: var(--bay); color: var(--tx); font: 400 var(--fs-m)/1.5 var(--ui);
  font-variant-numeric: tabular-nums; display: flex; flex-direction: column; padding-left: var(--rail-w); padding-bottom: var(--tabbar-h); }
button, select, input, textarea { font: inherit; color: inherit; }
input, select, textarea { accent-color: var(--cyan); }
::placeholder { color: var(--tx-3); opacity: 1; }
::selection { background: color-mix(in srgb, var(--cyan) 40%, transparent); color: var(--tx); }
a { color: var(--cyan); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.005em; text-wrap: balance; }
h3 { font-size: var(--fs-m); margin: 18px 0 8px; }
code { font-size: 0.9em; background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
.muted { color: var(--tx-2); }
.spacer { flex: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* thin dark scrollbars wherever something scrolls (Chromium, Safari) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #44516B; }

/* form fields: one look everywhere, page CSS may restyle */
input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), select, textarea {
  background-color: var(--panel-2); border-color: var(--rule); color: var(--tx); }
select option { background: var(--panel); color: var(--tx); }

/* buttons: primary is cyan, secondary a raised panel, ghost bare, danger the red pencil */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--radius-s); background: var(--panel-2); color: var(--tx); font-weight: 650;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .12s, border-color .12s, color .12s, scale 160ms var(--ease-out); }
.btn:hover:not(:disabled) { background: var(--panel-3); }
.btn:active:not(:disabled) { background: #3E4B64; scale: .97; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--cyan); border-color: var(--cyan); color: var(--on-cyan); }
.btn.primary:hover:not(:disabled) { background: var(--cyan-2); border-color: var(--cyan-2); }
.btn.primary:active:not(:disabled) { background: #3FA3DC; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--tx-2); }
.btn.ghost:hover:not(:disabled) { background: var(--panel-2); color: var(--tx); border-color: transparent; }
.btn.danger { background: transparent; color: var(--pencil); border-color: color-mix(in srgb, var(--pencil) 45%, transparent); }
.btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--pencil) 12%, transparent); }
.btn.danger.solid { background: var(--pencil); border-color: var(--pencil); color: var(--on-cyan); }
.btn.small { min-height: 32px; padding: 0 12px; font-size: var(--fs-s); }
.btn.big { min-height: 48px; padding: 0 26px; font-size: var(--fs-l); }

/* ---------------------------------------------------------------- the shell
   One <header class="topbar"> holds the brand, the five-page nav, the account dot and New.
   Phone: the header is a slim bar at the top and its <nav> is a tab bar fixed at the bottom.
   Desktop: the header is the left rail; the nav runs down it, New and the account at its foot. */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 6px;
  height: var(--topbar-h); padding: env(safe-area-inset-top, 0px) 12px 0; background: var(--bay); border-bottom: 1px solid var(--deep); }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--tx); text-decoration: none; white-space: nowrap;
  font-weight: 800; font-stretch: 75%; font-size: 1.375rem; letter-spacing: .01em; }
.mark { width: 14px; height: 18px; border-radius: 3px; background: var(--tx); position: relative; flex: none; }
.mark::after { content: ""; position: absolute; left: 2px; right: 2px; top: 8px; height: 2px; background: var(--pencil); }
.nav { display: flex; min-width: 0; }
.navlink { flex: none; border: 0; background: none; color: var(--tx-2); font-weight: 600; cursor: pointer; white-space: nowrap; }
.navlink:hover { color: var(--tx); }
.navlink[aria-current="page"] { color: var(--cyan); font-weight: 700; }
.status-dot { flex: none; position: relative; width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; color: var(--tx); cursor: pointer; }
.status-dot::after { content: ""; position: absolute; left: 15px; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.status-dot[data-level="warn"]::after { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 25%, transparent); }
.status-dot[data-level="bad"]::after { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 25%, transparent); }
.status-dot:hover, .status-dot[aria-expanded="true"], .status-dot[aria-current="page"] { background: var(--panel); }
.acct-text { display: none; }
.topbar .btn.primary { min-height: 36px; padding: 0 14px; gap: 0; }
.topbar .nb-more { margin-left: .28em; }

/* phone: the tab bar. Five equal thumb-sized targets; the current one gets a cyan rule on top. */
@media (max-width: 899.98px), (pointer: coarse), (pointer: none) {
  .topbar .nb-more { display: none; }   /* "New video" reads "New" */
  .nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--deep); border-top: 1px solid #0E131C; }
  .navlink { flex: 1 1 0; min-width: 0; position: relative; display: grid; place-items: center; padding: 0 2px;
    font-size: 0.8125rem; letter-spacing: .01em; }
  .navlink[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 32px; margin-left: -16px; height: 2px;
    border-radius: 0 0 2px 2px; background: var(--cyan); }
  .navlink:active { background: var(--bay); }
}

/* desktop: the rail */
@media (min-width: 900px) and (pointer: fine) {
  .topbar { position: fixed; inset: 0 auto 0 0; width: var(--rail-w); height: auto; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 18px 10px 12px; background: var(--deep); border: 0; }
  .brand { font-size: 1.5rem; margin: 0 8px 18px; }
  .nav { flex-direction: column; gap: 2px; }
  .navlink { text-align: left; padding: 9px 12px; border-radius: var(--radius-s); font-size: var(--fs-m); }
  .navlink:hover { background: var(--bay); }
  .navlink[aria-current="page"] { background: var(--panel); }
  #newBtn { order: 1; width: 100%; margin-bottom: 6px; }
  .status-dot { order: 2; width: 100%; height: auto; min-height: 48px; display: flex; align-items: center; padding: 6px 10px 6px 34px;
    border-radius: var(--radius-s); text-align: left; }
  .status-dot::after { left: 13px; }
  .acct-text { display: grid; min-width: 0; line-height: 1.25; }
  .acct-text b { font-weight: 650; font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acct-text small { color: var(--tx-2); font-size: 0.75rem; }
}

/* the account popover: under the dot on a phone, beside it on the rail */
.popover { position: absolute; z-index: 31; right: 12px; top: calc(100% + 6px); width: min(320px, calc(100vw - 24px)); background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; max-height: calc(100dvh - var(--topbar-h) - var(--tabbar-h) - 16px); overflow: auto; }
@media (min-width: 900px) and (pointer: fine) {
  .popover { right: auto; top: auto; left: calc(100% + 8px); bottom: 12px; max-height: calc(100dvh - 24px); }
}
.pop-row { display: grid; grid-template-columns: 10px 1fr; gap: 4px 10px; padding: 10px; align-items: baseline; }
.pop-row + .pop-row { border-top: 1px solid var(--rule); }
.pop-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); align-self: center; }
.pop-row i.warn { background: var(--warn); } .pop-row i.bad { background: var(--bad); }
.pop-row span { grid-column: 2; font-size: var(--fs-s); color: var(--tx-2); }
.pop-account { display: grid; gap: 10px; padding: 10px; border-bottom: 1px solid var(--rule); }
.pop-account .pop-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pop-admin { display: flex; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--rule); background: var(--panel-2); border-radius: var(--radius-s); margin: 6px 0; }
.pop-admin > div { display: grid; gap: 2px; flex: 1; }
.pop-admin span { font-size: var(--fs-s); color: var(--tx-2); }
.pop-trial { color: var(--tx-2); font-size: var(--fs-s); font-weight: 600; }

/* ---------------------------------------------------------------- page area
   Every page is a <main class="page"> to the right of the rail (desktop) or between the bars (phone).
   Later PRs split a page into panes: <div class="panes"> with .pane children (list, detail,
   inspector). On a phone the panes stack; on the desktop they sit side by side. */
.panes { display: grid; gap: 8px; min-height: 0; }
.pane { background: var(--panel); border-radius: var(--radius); padding: 12px; min-width: 0; min-height: 0; }
@media (min-width: 900px) and (pointer: fine) {
  .panes.two { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
  .panes.three { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) minmax(260px, 320px); }
}

/* ---------------------------------------------------------------- pages: empty state, videos and b-roll */
/* empty state */
.empty { flex: 1; display: grid; place-items: center; padding: 24px 16px calc(24px + var(--safe-b)); }
.drop { width: min(520px, 100%); padding: 40px 24px; text-align: center; cursor: pointer; display: grid; gap: 8px; justify-items: center;
  background: var(--panel); border: 1.5px dashed #4A5670; border-radius: 14px; transition: border-color .15s; }
.drop:hover, .drop.over { border-color: var(--cyan); }
.drop h1 { font-size: 2rem; font-weight: 800; font-stretch: 75%; letter-spacing: .005em; margin-top: 8px; }
.drop p { margin: 0; color: var(--ink-2); max-width: 36ch; }
.drop .btn { margin-top: 12px; }
.drop-frame { width: 40px; height: 68px; border: 2px solid var(--ink); border-radius: 8px; display: grid; place-items: end center; padding: 0 6px 10px; }
.drop-frame span { width: 100%; height: 4px; background: var(--highlight); border-radius: 2px; }

/* pages: videos and b-roll */
.page { flex: 1; min-width: 0; padding: 20px 16px calc(40px + var(--safe-b)); }
@media (min-width: 900px) and (pointer: fine) { .page { padding: 28px 28px calc(48px + var(--safe-b)); } }
.page-head, .page > .sheet { width: min(860px, 100%); margin-inline: auto; }
.page.wide .page-head, .page.wide .broll-grid { width: min(1100px, 100%); }
/* page titles: Archivo at its narrow width, the shell's one loud typographic note */
.page-head h1 { font-size: 2rem; font-weight: 800; font-stretch: 75%; letter-spacing: .005em; line-height: 1.08; }
.page-head p { margin: 4px 0 18px; max-width: 64ch; }
.vid-switch { margin: 12px 0 4px; }
.vid-switch-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 12px 0 4px; }
.vid-switch-row .vid-switch { margin: 0; }
.empty { align-content: center; gap: 14px; }
.page-head.split { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.sheet { background: var(--panel); border: 0; border-radius: var(--radius); overflow: hidden; }
.rows { list-style: none; margin: 0; padding: 0; }
.lib-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 14px 16px; }
.lib-row + .lib-row { border-top: 1px solid var(--line); }
.lib-row.current { background: color-mix(in srgb, var(--cyan) 8%, var(--panel)); box-shadow: inset 3px 0 0 var(--cyan); }
.lib-row.current .lib-name::after { content: "Open now"; margin-left: 10px; font-size: var(--fs-s); font-weight: 600; color: var(--ink-2); }
.lib-name { font-weight: 650; overflow-wrap: anywhere; }
.lib-meta { color: var(--ink-2); font-size: var(--fs-s); display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; align-items: center; }
.lib-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lib-confirm { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--pencil) 7%, var(--sheet)); }
.lib-confirm p { margin: 0; flex: 1 1 240px; }
/* state pills: a coloured square and a word on a raised chip */
.state { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 7px; border-radius: 4px; background: var(--panel-2);
  font-size: var(--fs-s); font-weight: 650; color: var(--tx-2); line-height: 1.5; white-space: nowrap; }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.state.final { color: var(--ok); }
.state.preview { color: var(--cyan); }
.state.running { color: var(--orange); }
.state.error { color: var(--pencil); }
.state.trial { color: var(--warn); }
@media (max-width: 560px) { .lib-row { grid-template-columns: 1fr; } .lib-actions { justify-content: flex-start; } }

.broll-grid { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 12px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 700px) { .broll-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.broll-card { background: var(--panel); border: 0; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.broll-thumb { aspect-ratio: 9 / 16; max-height: 300px; width: 100%; background: var(--screen); display: block; object-fit: contain; }
.broll-body { padding: 10px 12px 12px; display: grid; gap: 6px; min-width: 0; }
.broll-name { font-weight: 650; overflow-wrap: anywhere; font-size: var(--fs-s); }
.broll-meta, .broll-note, .broll-used { color: var(--ink-2); font-size: var(--fs-s); overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.broll-used.yes { color: var(--ink); }
.broll-card .lib-actions { justify-content: flex-start; }
.broll-card .lib-confirm p { flex-basis: 100%; font-size: var(--fs-s); }
.src { font-weight: 600; }
.src.stock { color: var(--broll); }

/* ---- the editor (redesign PR 2, REDESIGN_SPEC.md)
   Phone, direction B "Edit bay": the video's name and timecode, the player on a monitor, the tool
   chips, a compact multi-lane timeline, then the open tool's settings; the action bar is fixed
   above the tab bar. Desktop, W1 "Classic editor": one screen where only the panes scroll: the
   script on the left, the player in the middle, the inspector on the right, and the tool chips
   over a full multi-lane timeline across the bottom. */
.workspace { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  grid-template-areas: "head" "stage" "tools" "tl" "insp"; padding-bottom: calc(var(--bar-h) + var(--safe-b)); }
.ed-head { grid-area: head; position: relative; display: flex; align-items: center; gap: 8px 10px; min-width: 0; padding: 10px 16px 6px; }
.ed-name { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.ed-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-xl); font-weight: 800; font-stretch: 75%; letter-spacing: .01em; line-height: 1.15; }
.ed-state { flex: none; border: 0; font: 600 var(--fs-s)/1.4 var(--ui); cursor: pointer; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.ed-state:hover { background: var(--panel-3); }
.ed-tc { font-size: var(--fs-s); color: var(--tx-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ed-tc-player { display: none; }
.ed-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--panel-2); overflow: hidden; }
.ed-progress > div { height: 100%; background: var(--orange); transition: width .4s; }
.ed-progress.indeterminate > div { width: 35%; animation: slide 1.2s ease-in-out infinite; }
.cut-slot { flex: none; }
.cut-switch button { min-height: 30px; padding: 0 10px; font-size: var(--fs-s); }
#tabBody .pc-switch { display: none; }   /* the header's switch is the one */
@media (max-width: 899.98px), (pointer: coarse), (pointer: none) {
  .ed-head { flex-wrap: wrap; }
  .cut-slot { order: 5; flex: 1 0 auto; }   /* phone: a second row, above the player, with the timecode */
  .ed-name { flex-basis: 100%; }
  .ed-head:has(.cut-slot:not([hidden])) .ed-tc-head { order: 6; }
  .cut-switch { display: flex; }
  .cut-switch button { flex: 1; }
}
.script-pane { display: none; grid-area: script; }

.stage { grid-area: stage; padding: 4px 12px 0; display: grid; gap: 8px; justify-items: center; min-width: 0; }
/* the monitor: footage on black, the 9:16 player as large as the box allows */
.monitor { position: relative; width: 100%; height: clamp(200px, min(40dvh, 100dvh - 470px), 460px); display: grid; place-items: center;
  background: #0F141D; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--panel-2); container-type: size; }
.player-wrap { position: relative; width: min(100cqw, 100cqh * 9 / 16); aspect-ratio: 9 / 16;
  background: var(--screen); border-radius: 6px; overflow: hidden; }
.player-wrap video { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--screen); }
.stage > .mode-switch { display: none; }   /* phone: the timeline's own Edited / Original switch does it */

/* tool chips: sticky under the top bar so they stay at hand while the settings scroll */
.tools { grid-area: tools; position: sticky; top: var(--topbar-h); z-index: 6; display: flex; gap: 6px; padding: 10px 12px 8px;
  overflow-x: auto; scrollbar-width: none; background: var(--bay); }
.tools::-webkit-scrollbar { display: none; }
.tools button { flex: none; min-height: 34px; border: 0; background: var(--panel); padding: 0 11px; border-radius: var(--radius-s); cursor: pointer;
  color: var(--tx-2); font-weight: 700; font-size: var(--fs-s); white-space: nowrap; }
.tools button:hover { color: var(--tx); }
.tools button[aria-selected="true"] { background: var(--cyan); color: var(--on-cyan); }
.tools .n { margin-left: 5px; font-weight: 600; opacity: .7; }
.workspace.ov-editing .tools { position: static; }

.tl-dock { grid-area: tl; min-width: 0; padding: 0 12px 4px; display: grid; gap: 6px; }
.tl-dock .cliprow { display: none; }
.workspace[data-tool="clips"] .tl-dock .cliprow:not([hidden]) { display: grid; }

/* the open tool: a panel under the timeline (phone), the inspector (desktop) */
.desk { grid-area: insp; min-width: 0; display: flex; flex-direction: column; }
.insp-head { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 14px 16px 0; min-height: 44px; }
.insp-head h2 { font-size: var(--fs-xl); font-weight: 800; font-stretch: 75%; letter-spacing: .01em; margin-right: auto; }
.insp-when { color: var(--tx-2); font-size: var(--fs-s); }
/* a picked lane item: its tool's row, alone */
.tab-body.picking > :not(:has(.is-picked)):not(.is-picked) { display: none; }
.tab-body.picking .items > :not(.is-picked), .tab-body.picking .cards-list > :not(.is-picked) { display: none; }
.tab-body.picking .is-picked { border-top: 0; }
.part-facts { margin: 0 0 10px; color: var(--tx-2); }
.part-facts b { color: var(--tx); }
.part-clip { display: inline-flex; align-items: center; gap: 6px; color: var(--tx); overflow-wrap: anywhere; }
.part-clip::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--clip); flex: none; }
.part-words { font: 400 var(--fs-l)/1.7 var(--script); margin: 0 0 14px; padding: 12px 14px; background: var(--panel-2); border-radius: var(--radius-s); }
.part-words.cut { color: var(--tx-3); text-decoration: line-through 2px var(--pencil); }
.part-how { margin-top: 12px; }

/* opening a video: the layout, empty and shimmering, while it loads */
.workspace.loading :is(.stage, .tools, .tl-dock, .desk, .script-pane) > * { visibility: hidden; }
.workspace.loading :is(.monitor, .tl-dock, .desk, .script-pane) { position: relative; }
.workspace.loading .monitor { visibility: visible; }
.workspace.loading .monitor > * { visibility: hidden; }
.workspace.loading :is(.monitor, .tl-dock, .desk, .script-pane)::after { content: ""; position: absolute; inset: 0; border-radius: 8px; visibility: visible;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--panel-3) 45%, transparent) 50%, transparent 70%) 0 0 / 300% 100% no-repeat;
  animation: ed-shimmer 1.4s linear infinite; }
.workspace.loading .tl-dock { min-height: 150px; }
.workspace.loading .tl-dock::before { content: ""; position: absolute; inset: 8px 12px; visibility: visible; border-radius: 6px;
  background: repeating-linear-gradient(var(--panel) 0 22px, transparent 22px 28px); }
.workspace.loading .desk { min-height: 200px; }
.workspace.loading .action-bar { opacity: .5; pointer-events: none; }
@keyframes ed-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (min-width: 900px) and (pointer: fine) {
  body:has(> #projectView:not([hidden])) { height: 100dvh; }
  .workspace { min-height: 0; height: 100dvh; padding: 8px 10px calc(8px + var(--safe-b)); column-gap: 8px; align-content: stretch;
    grid-template-columns: minmax(280px, 1.15fr) minmax(260px, 1fr) minmax(320px, 380px);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "head head head" "script stage insp" "tools tools tools" "tl tl tl"; }
  body.acting .workspace { height: auto; flex: 1 1 0; }
  .ed-head { padding: 2px 4px 10px; gap: 10px 14px; }
  .ed-title { font-size: 1.5rem; }
  .ed-tc-head { display: none; }
  .ed-tc-player { display: block; position: absolute; left: 10px; bottom: 8px; pointer-events: none; }
  .ed-progress { left: 4px; right: 4px; bottom: 4px; border-radius: 1px; }
  .script-pane, .desk { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-radius: var(--radius); }
  .script-pane { grid-area: script; }
  .pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px 6px; }
  .pane-head h2 { font-size: var(--fs-l); font-weight: 800; font-stretch: 75%; letter-spacing: .01em; }
  .pane-meta { font-size: var(--fs-s); color: var(--tx-2); }
  .pane-body { flex: 1; min-height: 0; overflow: auto; padding: 0 16px 20px; }
  .script-pane .hint-more { margin: 0 0 8px; }
  .script-pane .transcript { background: none; border-radius: 0; padding: 4px 4px 12px 50px; font-size: var(--fs-l); line-height: 1.85; max-width: none; }
  .script-pane .ts { left: -50px; top: 6px; width: 40px; }
  .script-pane .transcript p.has-broll::before { left: -10px; }
  .stage { padding: 0; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
  .monitor { height: 100%; min-height: 0; }
  /* under the monitor, one row: Edited / Original, then platforms.js's Preview as Off / Reels / TikTok */
  .stage { grid-template-columns: 1fr auto auto 1fr; column-gap: 6px; row-gap: 8px; }
  .monitor { grid-column: 1 / -1; }
  .stage > .mode-switch { display: inline-flex; grid-column: 2; }
  .stage > .pf-switch { grid-column: 3; }
  .stage > .mode-switch button, .stage > .pf-switch button { min-height: 30px; padding: 0 10px; font-size: var(--fs-s); }
  .stage .pf-switch-label { display: none; }
  .desk { overflow: auto; container: insp / inline-size; }   /* narrow: tool rows stack as on a phone (@container insp) */
  .insp-head { position: sticky; top: 0; z-index: 3; background: var(--panel); padding: 12px 16px 8px; border-bottom: 1px solid var(--rule); }
  .tools { position: static; margin-top: 8px; padding: 8px 210px 6px 10px; background: var(--panel); border-radius: var(--radius) var(--radius) 0 0; }
  .tools .tool-script { display: none; }
  .tools button { min-height: 30px; padding: 0 9px; }
  .tl-dock { position: relative; padding: 0 10px 8px; background: var(--panel); border-radius: 0 0 var(--radius) var(--radius); gap: 4px; }
  .desk .run-card, .desk .tab-body { padding: 14px 16px 24px; }
}
@media (min-width: 1360px) and (pointer: fine) { .stage .pf-switch-label { display: inline; white-space: nowrap; } }
@media (max-width: 1099.98px) and (min-width: 900px) and (pointer: fine) {
  .stage { grid-template-columns: 1fr auto 1fr; grid-template-rows: minmax(0, 1fr) auto auto; }
  .stage > .pf-switch { grid-column: 2; }
}
.player-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: #C9CFDA; background: var(--screen); }
/* segmented switch: a dark well, the chosen segment raised and cyan */
.mode-switch { display: inline-flex; gap: 2px; background: var(--deep); border-radius: 8px; padding: 3px; }
.mode-switch button { border: 0; background: none; min-height: 34px; padding: 0 14px; border-radius: 6px; cursor: pointer; color: var(--tx-2); font-weight: 650; }
.mode-switch button:hover:not(:disabled) { color: var(--tx); }
.mode-switch button[aria-selected="true"] { background: var(--panel-3); color: var(--cyan); }
.mode-switch button:disabled { opacity: .45; cursor: default; }

.legend { display: flex; gap: 6px 14px; flex-wrap: wrap; justify-content: center; font-size: var(--fs-s); color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* the edit: header card, tabs, body */
.run-card { padding: 16px 16px 12px; display: grid; gap: 10px; }
@media (min-width: 900px) { .run-card { padding: 22px 28px 14px; } }
.run-facts { display: flex; gap: 4px 16px; flex-wrap: wrap; color: var(--ink-2); font-size: var(--fs-s); }
.run-facts b { color: var(--ink); font-weight: 650; }
.run-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.files { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--ok) 10%, var(--panel)); box-shadow: inset 3px 0 0 var(--ok); }
.files strong { margin-right: 4px; color: var(--ok); }
.progress { height: 6px; border-radius: 3px; background: var(--wash); overflow: hidden; }
.progress > div { height: 100%; background: var(--cyan); transition: width .4s; }
.progress.indeterminate > div { width: 35%; animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.notice { padding: 10px 12px; border-radius: 10px; background: var(--wash); color: var(--ink); font-size: var(--fs-s); }
.notice.error { background: color-mix(in srgb, var(--pencil) 12%, var(--panel)); color: #FF8A8A; box-shadow: inset 3px 0 0 var(--pencil); }
.notice.split { display: flex; gap: 8px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.notice.dirty { background: color-mix(in srgb, var(--highlight) 14%, var(--panel)); box-shadow: inset 3px 0 0 var(--highlight); }
/* "Notify me when it's ready" under a running job (notify.js): one quiet line, a full-height tap target */
.notify-row { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 40px; margin: -6px 0;
  font-size: var(--fs-s); color: var(--ink-2); cursor: pointer; }
.notify-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.notify-row:has(input:checked) { color: var(--ink); }
.hint.notify-note { margin: 0; }
details.log summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-s); }
pre.logtext { max-height: 200px; overflow: auto; background: var(--deep); border: 1px solid var(--panel-2); border-radius: 8px; padding: 10px;
  font: 12px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; margin: 6px 0 0; }
.hint { color: var(--ink-2); font-size: var(--fs-s); margin: 0 0 14px; max-width: 64ch; }
.hint-more summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-s); }
.hint-more ul { margin: 6px 0 14px; padding-left: 18px; color: var(--ink-2); font-size: var(--fs-s); display: grid; gap: 4px; }

.tab-body { padding: 18px 16px 32px; }
@media (min-width: 900px) { .tab-body { padding: 24px 28px 48px; } }

/* the script */
.transcript { font-family: var(--script); font-size: 1.25rem; line-height: 1.75; max-width: 34em; user-select: none; -webkit-user-select: none;
  background: var(--panel); border: 0; border-radius: var(--radius); padding: 18px 20px 18px 28px; }
@media (min-width: 900px) { .transcript { font-size: 1.375rem; padding: 32px 40px 32px 72px; } }
.transcript p { margin: 0 0 14px; position: relative; }
.transcript p:last-child { margin-bottom: 0; }
.transcript p.has-broll::before { content: ""; position: absolute; left: -16px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--broll); }
@media (min-width: 900px) { .transcript p.has-broll::before { left: -16px; } }
.ts { font: 500 var(--fs-s)/1 var(--ui); color: var(--ink-3); cursor: pointer; margin-right: 10px; vertical-align: 2px; }
@media (min-width: 900px) { .ts { position: absolute; left: -72px; top: 8px; width: 44px; text-align: right; margin: 0; } }
.ts:hover { color: var(--ink); }
.w { border-radius: 3px; cursor: text; position: relative; }
.w:hover { background: var(--wash); }
.w.cut { color: var(--ink-3); text-decoration: line-through 2px var(--pencil); }
.w.emph { font-family: var(--caption); font-weight: 800; font-size: 0.88em; letter-spacing: 0.01em; text-transform: uppercase;
  background: var(--highlight); color: #16213A; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.w.zoom { box-shadow: inset 0 -2px 0 var(--zoom); }
.w.broll { background: color-mix(in srgb, var(--broll) 11%, transparent); }
.w.gfx::after { content: ""; position: absolute; right: -2px; top: 0.1em; width: 6px; height: 6px; border-radius: 50%; background: var(--gfx); }
.w.edited { text-decoration: underline dotted 2px var(--ink-3); text-underline-offset: 5px; }
.w.hidden-cap { color: var(--ink-3); font-style: italic; }
.w.sel { background: color-mix(in srgb, var(--cyan) 30%, transparent); }
.w.now { background: color-mix(in srgb, var(--cyan) 18%, transparent); box-shadow: 0 2px 0 var(--cyan); }
.clip-divider { font: 600 var(--fs-s)/1.4 var(--ui); color: var(--ink-2); margin: 18px 0 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.clip-divider:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* lists of edits: one sheet, rows inside */
.items { background: var(--panel); border: 0; border-radius: var(--radius); overflow: hidden; }
.item { display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 14px; }
.item + .item { border-top: 1px solid var(--line); }
.item.off .main { opacity: .5; }
.item .time { color: var(--ink-3); cursor: pointer; font-weight: 500; }
.item .time:hover { color: var(--ink); }
.item .main { min-width: 0; display: grid; gap: 2px; }
.item .main .t { overflow-wrap: anywhere; }
.item .main .r { font-size: var(--fs-s); color: var(--ink-2); overflow-wrap: anywhere; }
.item .ctl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.item select, .item input[type=text], .field select, .field input { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; min-width: 0; min-height: 34px; }
.item select { max-width: 220px; text-overflow: ellipsis; }
.item input[type=text] { width: 100%; font-family: var(--caption); font-weight: 800; text-transform: uppercase; }
.badge { font-size: var(--fs-s); color: var(--ink-3); }
.badge.human { color: var(--ink); font-weight: 600; }
.switch { appearance: none; width: 40px; height: 24px; border-radius: 999px; background: var(--panel-3); position: relative; cursor: pointer; margin: 0; flex: none; transition: background .15s; }
.switch::after { content: ""; position: absolute; width: 20px; height: 20px; top: 2px; left: 2px; border-radius: 50%; background: var(--tx-2); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: transform .15s; }
.switch:checked { background: var(--cyan); }
.switch:checked::after { background: var(--on-cyan); }
.switch:checked::after { transform: translateX(16px); }
.status-ok { color: var(--ok); } .status-miss { color: var(--pencil); }
@media (max-width: 560px) {
  .item { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "toggle main time" ". ctl ctl"; padding: 12px; }
  .item > :nth-child(1) { grid-area: toggle; } .item > :nth-child(2) { grid-area: time; } .item .main { grid-area: main; } .item .ctl { grid-area: ctl; justify-content: flex-start; }
  .item .ctl:empty { display: none; }
}

/* music */
.music-list .item { grid-template-columns: auto minmax(0, 1fr) auto; cursor: pointer; }
.music-list .item.chosen { background: color-mix(in srgb, var(--cyan) 8%, var(--panel)); box-shadow: inset 3px 0 0 var(--cyan); }
.music-list input[type=radio] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.music-opts { display: grid; gap: 10px; margin-top: 16px; padding: 14px 16px; background: var(--panel); border: 0; border-radius: var(--radius); }
.music-opts .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.music-add { display: grid; gap: 10px; margin-top: 16px; }
.music-add p { margin: 0; }
.music-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) { .music-list .item { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: none; } .music-list .item > * { grid-area: auto !important; } }

/* clips */
.clip-drop { margin-top: 12px; padding: 16px; border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--ink-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.clip-drop.over { border-color: var(--cyan); }

/* settings drawer: bottom sheet on phones, side sheet on desktop */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); }
.drawer { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; max-height: 88dvh; overflow: auto; background: var(--sheet);
  border-radius: 14px 14px 0 0; box-shadow: var(--shadow); padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (min-width: 900px) { .drawer { left: auto; top: 0; width: 420px; max-height: none; border-radius: 0; box-shadow: -12px 0 32px rgba(0, 0, 0, .4); } }
.drawer-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--sheet); border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 1.5rem; font-weight: 800; font-stretch: 75%; }
.drawer-body { padding: 4px 18px 24px; }
.group { padding: 14px 0; }
.group + .group { border-top: 1px solid var(--line); }
.group h3 { margin: 0 0 2px; }
.group > p { margin: 0 0 10px; color: var(--ink-2); font-size: var(--fs-s); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; cursor: pointer; }
.toggle-row span small { display: block; color: var(--ink-2); font-size: var(--fs-s); }
.script-row { display: flex; gap: 8px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: var(--fs-s); color: var(--ink-2); }
.script-row b { color: var(--ink); font-weight: 650; }
.script-text { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-s); line-height: 1.5; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; resize: vertical; }
.script-pick li + li { border-top: 1px solid var(--line); }
.script-pick li.muted { padding: 6px 0; font-size: var(--fs-s); }
.script-pick .pick { display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 0; background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; }
.script-pick .pick small { color: var(--ink-2); }
.script-pick .pick:hover b { text-decoration: underline; }
.field { display: grid; gap: 4px; padding: 8px 0; }
.field label { font-weight: 600; }
.field select { width: 100%; }
.key-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.key-row input { flex: 1; min-width: 180px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; min-height: 36px; }

/* action bar: fixed, one row, never over the video because the page reserves its height.
   Phone: with a part of the timeline picked, Split (at the playhead) takes Ask AI's place.
   Desktop: it sits in the editor's header instead, right of the video's name. */
.action-bar { position: fixed; z-index: 25; left: var(--rail-w); right: 0; bottom: var(--tabbar-h); min-height: var(--bar-h); display: flex; gap: 8px; align-items: center;
  padding: 10px 12px calc(10px + var(--safe-b)); background: color-mix(in srgb, var(--bay) 94%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--panel); }
.dirty-note { flex: 1; min-width: 0; color: var(--ink-2); font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dirty-note.dirty { color: var(--ink); font-weight: 600; }
.dirty-note.dirty::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--highlight); margin-right: 8px; box-shadow: 0 0 0 1px var(--warn); }
@media (max-width: 899.98px), (pointer: coarse), (pointer: none) { .workspace.part-sel .action-bar .ask-jump { display: none; } }
@media (min-width: 900px) and (pointer: fine) {
  .ed-head .action-bar { position: static; flex: 1 1 auto; min-height: 0; padding: 0; background: none; backdrop-filter: none; border: 0; justify-content: flex-end; }
  .ed-head .action-bar .dirty-note { flex: 0 1 auto; margin-right: auto; }
  .ed-head .action-bar .split-jump { display: none; }
}
@media (max-width: 420px) {
  .action-bar .btn { padding: 0 14px; }
  .action-bar .ab-more { display: none; }   /* "Render final" reads "Render" */
  /* no room for words: unsaved changes show as the yellow dot alone (text stays for screen readers) */
  .dirty-note { flex: 0 0 auto; width: 18px; color: transparent; }
  .dirty-note.dirty { color: transparent; }
  .dirty-note:not(.dirty) { width: 0; }
}

/* floating bits: selection menu, upload panel, toast */
.sel-menu { position: fixed; z-index: 35; display: flex; flex-wrap: wrap; gap: 2px; max-width: calc(100vw - 16px); background: var(--panel-3); color: var(--tx);
  border: 1px solid #46536E; border-radius: 10px; padding: 4px; box-shadow: var(--shadow); }
.sel-menu button { border: 0; background: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; font-weight: 650; color: var(--tx); }
.sel-menu button:hover { background: rgba(255, 255, 255, .12); }
.sel-menu button i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.edit-input { background: var(--panel-2); color: var(--tx); border: 0; border-radius: 10px; padding: 8px 10px; min-width: 200px; font-size: var(--fs-l); }
.upload-panel { position: fixed; z-index: 45; left: calc(50% + var(--rail-w) / 2); bottom: calc(var(--bar-h) + 12px + var(--chrome-b)); transform: translateX(-50%);
  width: min(460px, calc(100vw - 24px)); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow), inset 3px 0 0 var(--cyan); display: grid; gap: 8px; }
.up-row { display: flex; align-items: center; gap: 10px; }
.up-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-bar { height: 8px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.up-fill { height: 100%; width: 0; background: var(--cyan); transition: width .2s; }
.up-detail { font-size: var(--fs-s); }
.up-detail.warn { color: var(--warn); font-weight: 600; }
.up-note { font-size: var(--fs-s); color: var(--ink-2); }
/* the toast is the one light surface: it has to be seen over footage and panels alike */
.toast { position: fixed; z-index: 50; left: calc(50% + var(--rail-w) / 2); bottom: calc(var(--bar-h) + 12px + var(--chrome-b)); transform: translateX(-50%);
  max-width: calc(100vw - 24px); background: var(--tx); color: var(--on-cyan); font-weight: 600; padding: 10px 16px; border-radius: 8px; box-shadow: var(--shadow); }
.toast.error { background: var(--pencil); color: var(--on-cyan); }
/* Enter from the bottom edge they sit on, leave the same way (app.js adds .out before hiding the toast).
   Transitions, not keyframes: a second toast while one shows retargets instead of restarting. */
@media (prefers-reduced-motion: no-preference) {
  .toast, .upload-panel { transition: opacity 220ms var(--ease-out), translate 220ms var(--ease-out); }
  @starting-style { .toast:not([hidden]), .upload-panel:not([hidden]) { opacity: 0; translate: 0 100%; } }
  .toast.out { opacity: 0; translate: 0 100%; transition-duration: 160ms; }
}
/* "fuxe was updated": a revision slip. Script revisions come back on blue pages, so the slip
   carries a blue margin rule; it sits under the top bar, clear of the toast and the upload panel. */
.update-note { position: fixed; z-index: 40; top: calc(var(--topbar-h, 57px) + 8px); right: 12px; width: min(360px, calc(100vw - 24px));
  display: grid; gap: 10px; padding: 12px 12px 12px 26px; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow); }
.update-note::before { content: ""; position: absolute; left: 12px; top: 12px; bottom: 12px; width: 2px; border-radius: 1px; background: var(--broll); }
.update-note p { margin: 0; font-weight: 500; text-wrap: pretty; }
.update-actions { display: flex; justify-content: flex-end; gap: 8px; }
.stock-key { margin-top: 16px; padding: 14px; border: 0; border-radius: var(--radius); background: var(--panel); }
.stock-key .hint { margin-bottom: 8px; }

/* --- admin: users page, temporary password slip, "viewing someone's videos" banner.
   The banner is a strip of highlighter under the top bar: the one loud thing, because
   working in another person's account must never be mistaken for your own. */
.acting-banner { position: sticky; top: var(--topbar-h, 57px); z-index: 29; display: flex; align-items: center; gap: 8px 12px;
  flex-wrap: wrap; padding: 8px 12px 8px 16px; background: var(--highlight); color: #16213A; font-size: var(--fs-s);
  border-bottom: 1px solid #C9A21C; }
.acting-banner span { flex: 1 1 220px; }
.acting-banner .btn { background: #16213A; border-color: #16213A; color: #FFFFFF; min-height: 32px; }

.add-user { width: min(860px, 100%); margin: 0 auto 14px; display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; padding: 14px 16px; }
.add-user label { display: grid; gap: 4px; font-size: var(--fs-s); font-weight: 600; color: var(--ink-2); }
.add-user input, .add-user select { min-height: 40px; padding: 0 12px; background: var(--panel-2); border: 1px solid var(--rule); border-radius: var(--radius-s);
  color: var(--tx); font-weight: 500; font-size: var(--fs-m); }
.add-user input:focus, .add-user select:focus { border-color: var(--ink-3); outline: none; }
.add-user input:focus-visible, .add-user select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.au-name { flex: 1 1 200px; }
.au-role { flex: 0 0 auto; }
@media (max-width: 420px) { .au-role { flex: 1 1 auto; } .add-user .btn { flex: 1 1 100%; } }

.pw-slip { width: min(860px, 100%); margin: 0 auto 14px; padding: 14px 16px 16px; background: var(--panel); border: 0;
  border-left: 4px solid var(--highlight); border-radius: var(--radius); display: grid; gap: 10px; }
.slip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.slip-pw { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pw { font-family: var(--script); font-size: var(--fs-xl); font-weight: 500; letter-spacing: 0.06em; padding: 0 2px; user-select: all; -webkit-user-select: all;
  background: var(--highlight); color: #16213A; padding: 0 6px; border-radius: 3px; overflow-wrap: anywhere; }
.pw-slip p { margin: 0; color: var(--ink-2); font-size: var(--fs-s); max-width: 60ch; }

.user-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* a trial's three extra actions wrap onto a second line instead of squeezing the details */
.user-row .lib-actions { max-width: 500px; }
.role-tag { font-size: var(--fs-s); font-weight: 600; color: var(--zoom); }
.you { font-size: var(--fs-s); font-weight: 500; color: var(--ink-3); }
.user-row.off .user-name { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--pencil); text-decoration-thickness: 2px; }
.usage { display: inline-flex; align-items: center; gap: 8px; }
.meter { width: 56px; height: 4px; border-radius: 2px; background: var(--wash); overflow: hidden; display: inline-block; }
.meter i { display: block; height: 100%; background: var(--ink-2); }
.meter.full i { background: var(--pencil); }
.lib-confirm.calm { background: var(--panel-2); }
.lib-confirm .check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-s); flex: 1 1 100%; }
.lib-confirm .check input { width: 18px; height: 18px; margin: 0; accent-color: var(--pencil); }
@media (max-width: 560px) { .user-row .lib-actions { gap: 4px; } .user-row .lib-actions .btn.ghost { padding: 0 9px; } }

/* caption style picker: each tile is a small dark "phone" strip playing its style */
.cap-styles { margin-bottom: 18px; }
.cap-styles h3 { margin: 0 0 8px; }
.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cap-tile { display: grid; gap: 2px; text-align: left; padding: 8px 8px 10px; background: var(--panel); border: 1px solid var(--panel-2); border-radius: var(--radius); color: var(--tx); font: inherit; cursor: pointer; }
.cap-tile b { font-weight: 650; margin-top: 6px; }
.cap-tile small { color: var(--ink-2); font-size: var(--fs-s); line-height: 1.3; }
.cap-tile:hover { border-color: var(--ink-3); }
.cap-tile[aria-checked="true"] { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.cap-sample { display: flex; justify-content: center; align-items: center; gap: .28em; height: 52px; border-radius: 8px; background: var(--screen);
  font: 800 15px/1 var(--caption); color: #fff; -webkit-text-stroke: 0; text-shadow: 0 1px 0 #000, 0 0 3px #000; overflow: hidden; }
.cap-sample span { display: inline-block; }
/* the spoken word moves through the line: 4 words, 0.45 s each, then a short rest. The highlight has no
   fill mode, so words waiting for their turn stay white; Word by word fills backwards so they stay hidden. */
@keyframes cap-hi { 0%, 22% { color: var(--highlight); } 23%, 100% { color: #fff; } }
@keyframes cap-grow { 0% { color: var(--highlight); transform: scale(1.3); } 10%, 22% { color: var(--highlight); transform: scale(1.15); } 23%, 100% { color: #fff; transform: scale(1); } }
@keyframes cap-appear { 0% { opacity: 0; transform: scale(.6); } 5%, 100% { opacity: 1; transform: scale(1); } }
@keyframes cap-pop { 0% { transform: scale(.7); } 6% { transform: scale(1.08); } 10%, 100% { transform: scale(1); } }
@keyframes cap-rise { 0% { opacity: 0; transform: translateY(8px); } 9%, 100% { opacity: 1; transform: none; } }
.cap-tile:is(:hover, :focus-visible, [aria-checked="true"]) .m-classic span,
.cap-tile:is(:hover, :focus-visible, [aria-checked="true"]) .m-pop span,
.cap-tile:is(:hover, :focus-visible, [aria-checked="true"]) .m-rise span { animation: cap-hi 2s calc(var(--i) * .45s) infinite none; }
.cap-tile:is(:hover, :focus-visible, [aria-checked="true"]) .m-bounce span { animation: cap-grow 2s calc(var(--i) * .45s) infinite none; }
.cap-tile:is(:hover, :focus-visible, [aria-checked="true"]) .m-word span { animation: cap-appear 2s calc(var(--i) * .45s) infinite backwards, cap-hi 2s calc(var(--i) * .45s) infinite none; }
.cap-tile:is(:hover, :focus-visible, [aria-checked="true"]) .m-pop { animation: cap-pop 2s infinite; }
.cap-tile:is(:hover, :focus-visible, [aria-checked="true"]) .m-rise { animation: cap-rise 2s infinite; }
.m-classic span:first-child, .m-pop span:first-child, .m-rise span:first-child, .m-bounce span:first-child { color: var(--highlight); }
@media (prefers-reduced-motion: reduce) { .cap-tile .cap-sample, .cap-tile .cap-sample span { animation: none !important; } }

/* checks on the final render */
.qa.ok { margin: 0; color: var(--ok); font-size: var(--fs-s); }
.notice.qa ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.linklike { background: none; border: 0; padding: 0; color: var(--cyan); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* --- tell the AI what to change: a note to the editor in the run card.
   The creator's words are set in the script face with a red-pencil margin rule (a note on the
   manuscript); what the AI changed is listed with the same marks the timeline uses, so a change
   reads as the edit it made, not as chat. */
.ask { display: grid; gap: 10px; padding: 12px 14px 14px; background: var(--panel); border: 0; border-radius: var(--radius); }
.ask-form { display: grid; gap: 8px; }
.ask-label { font-weight: 650; }
.ask-input { width: 100%; resize: vertical; min-height: 64px; padding: 10px 12px; font: 400 1.0625rem/1.5 var(--script); color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--rule); border-radius: var(--radius-s); }
.ask-input::placeholder { color: var(--ink-3); font-style: italic; }
.ask-input:focus { outline: none; border-color: var(--cyan); }
.ask-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ask-input:disabled { color: var(--ink-2); }
.ask-row { display: flex; gap: 8px; align-items: flex-start; }
.ask-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ask-row > .btn { flex: none; min-width: 72px; }
.chip { border: 1px solid transparent; background: var(--panel-2); color: var(--tx-2); border-radius: var(--radius-s); padding: 5px 11px;
  font-size: var(--fs-s); font-weight: 600; cursor: pointer; min-height: 32px; }
.chip:hover { color: var(--tx); background: var(--panel-3); }
.chip:active { background: #3E4B64; }
.ask-wait { display: grid; gap: 6px; font-size: var(--fs-s); color: var(--ink-2); }
.ask-result { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.ask-result p { margin: 0; }
.ask-said { font: italic 400 var(--fs-m)/1.45 var(--script); color: var(--ink-2); padding-left: 10px; border-left: 3px solid var(--pencil); overflow-wrap: anywhere; }
.ask-said::before { content: "“"; } .ask-said::after { content: "”"; }
.ask-reply { overflow-wrap: anywhere; }
.ask-reply.error { color: var(--pencil); }
.ask-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ask-change { position: relative; padding-left: 24px; overflow-wrap: anywhere; }
.ask-change::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 14px; height: 6px; border-radius: 2px; background: var(--ink-3); }
.ask-change.k-cut::before { background: repeating-linear-gradient(135deg, var(--pencil) 0 2px, transparent 2px 4px); }
.ask-change.k-restore::before { background: none; outline: 1.5px dashed var(--pencil); outline-offset: -1px; }
.ask-change.k-emphasis::before { background: var(--highlight); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 50%, transparent); }
.ask-change.k-zoom::before { background: var(--zoom); }
.ask-change.k-broll::before { background: var(--broll); }
.ask-change.k-graphic::before { background: var(--gfx); }
.ask-change.k-caption::before { background: none; border-bottom: 2px dotted var(--ink-2); border-radius: 0; height: 4px; }
.ask-change.k-music::before { background: var(--ok); }
.ask-change.undone { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.ask-skipped { font-size: var(--fs-s); color: var(--ink-2); }
.ask-after { display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; font-size: var(--fs-s); }
.ask-history summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-s); }
.ask-history ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.ask-history li { display: grid; gap: 2px; font-size: var(--fs-s); }
.ask-history .ask-said { font-size: var(--fs-s); }
.action-bar .ask-jump { color: var(--ink); }
@media (max-width: 420px) { .action-bar .ask-jump { padding: 0 10px; } }
@media (max-width: 560px) {
  /* one row of suggestions that scrolls sideways, so the Ask button stays beside them */
  .ask-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-block: -2px; padding-block: 2px;
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  .ask-chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}

/* the same, in a narrow inspector (the desktop editor's right column; app.css .desk) */
@container insp (max-width: 560px) {
  .item { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "toggle main time" ". ctl ctl"; padding: 12px; }
  .item > :nth-child(1) { grid-area: toggle; } .item > :nth-child(2) { grid-area: time; } .item .main { grid-area: main; } .item .ctl { grid-area: ctl; justify-content: flex-start; }
  .item .ctl:empty { display: none; }
 .music-list .item { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: none; } .music-list .item > * { grid-area: auto !important; } 
  /* one row of suggestions that scrolls sideways, so the Ask button stays beside them */
  .ask-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-block: -2px; padding-block: 2px;
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  .ask-chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}

/* copySheet() (app.js): when a phone won't let the page copy, the text is shown selected for its own Copy. */
.copy-sheet { width: min(520px, calc(100vw - 24px)); border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--panel); color: var(--tx); padding: 20px; box-shadow: var(--shadow); }
.copy-sheet::backdrop { background: rgb(0 0 0 / .55); }
.copy-sheet h2 { margin: 0 0 6px; font-size: 1.125rem; }
.copy-sheet p { margin: 0 0 12px; font-size: .875rem; line-height: 1.45; }
.copy-sheet-text { width: 100%; font: inherit; font-size: 16px; line-height: 1.45; color: var(--tx); background: var(--bay);
  border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; resize: vertical; -webkit-user-select: text; user-select: text; }
.copy-sheet-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.cr-copy { justify-self: start; margin-top: 2px; }