/* Design system tokens — the whole UI derives from these. Rules: black and gold, one accent, AA contrast,
   no gradients, no emoji in chrome. docs/DESIGN.md explains each group and how to extend;
   node tools/contrast.js measures every pair below. */
:root {
  /* surfaces: true near-black, warmed a hair so the gold sits in it; each step one notch lighter
     (bg → panel → panel3) */
  --bg: #0b0b0a; --panel: #141412; --panel2: #0f0f0e; --panel3: #1d1c19;
  --line: #282622; --line2: #383530; /* hairlines around and between cards: decoration, no minimum */
  --field-line: #706a5f; /* the edge of a text field, select or date input: its only outline, so 3:1 on every surface */
  /* text: warm white and greys (ratios in tools/contrast.js, all AA on every surface) */
  --text: #f4f1ea; --muted: #aba497; --subtle: #8c8679;
  /* the one accent: gold. --accent for links, icons, active states and selection on dark; --accent-strong
     fills the primary button and draws the mark, always with --accent-ink (black) on it; --accent-soft /
     --accent-line tint selected cards and chips. --accent-deep is the gold for text on a light surface
     (the press kit, the brand page's light tile): bright gold on white fails contrast. */
  --accent: #e2bf6e; --accent-strong: #d4aa50; --accent-hover: #e3bd67; --accent-ink: #0b0b0a;
  --accent-deep: #85631c;
  --accent-rgb: 212, 170, 80; --accent-soft: rgba(212, 170, 80, .12); --accent-line: rgba(212, 170, 80, .5);
  --accent2: var(--accent); /* legacy alias: the old amber second accent — same colour now */
  --grad: var(--accent-strong); /* legacy alias: gradients are gone; anything asking for one gets the flat accent */
  /* semantic: one hue each, never for decoration. --warn is a burnt orange, darker than the gold, so it stays
     apart from it for protan and deutan eyes too (ΔE00 in tools/contrast.js) */
  --ok: #34d399; --ok-line: rgba(52, 211, 153, .4); --ok-soft: rgba(52, 211, 153, .1);
  --warn: #d86c10; --warn-line: rgba(216, 108, 16, .5); --warn-soft: rgba(216, 108, 16, .1);
  --error: #f87171; --error-line: rgba(248, 113, 113, .4); --error-soft: rgba(248, 113, 113, .1);
  --live: #ef4444; --twitch: #9146ff; --twitch-ink: #ffffff; --focus: #f0d590;
  --chart-2: #d6d1c6; /* the second data series (audio); the first is --accent */
  /* spacing scale (4-pt) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 40px; --s7: 64px; --s8: 96px;
  /* type scale: xs 12 · sm 14 · md 16 · lg 18 · xl 24 · 2xl display */
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.5rem; --fs-2xl: clamp(2.125rem, 1.35rem + 3.2vw, 3.5rem);
  /* radius · elevation · motion */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 12px 32px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04);
  --ring: 0 0 0 3px var(--accent-soft);
  --dur: .15s; --ease: cubic-bezier(.2, .7, .2, 1);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--text); min-height: 100vh; line-height: 1.5;
  background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01'; /* Inter: single-storey a / open digits read better at small sizes */
}
a { color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s3); font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); letter-spacing: -.01em; }
p { margin: 0 0 var(--s3); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.error { color: var(--error); }
.ok { color: var(--ok); }
.grad { color: var(--text); } /* legacy: gradient text is retired; the span keeps its emphasis as plain text */
.num { font-variant-numeric: tabular-nums; }
/* icons: one stroke set (24-grid, 1.75 stroke, round joins), sized by context, coloured by currentColor */
.icon { width: 1.125em; height: 1.125em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.icon.sm { width: 1em; height: 1em; }
.icon.lg { width: 1.5em; height: 1.5em; }
.btn .icon, .chip .icon, .pill .icon { vertical-align: 0; }
h1 > .icon, h2 > .icon, h3 > .icon { margin-right: .4em; vertical-align: -.12em; color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Focus: one visible ring everywhere (keyboard only). */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* the outline follows each element's own radius */

/* ---------- layout ---------- */
header.top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  max-width: 1200px; margin: 0 auto; padding: var(--s4);
}
/* logo: the mark (a black tile with the gold cut-frame glyph, lib/mark.js) + the wordmark (first word 600, rest 400) */
.logo {
  display: inline-flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 400; letter-spacing: -.01em; text-decoration: none; color: var(--text);
}
.logo .mark { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; } /* the gold hairline that keeps the black tile visible on the black page is in the file (lib/mark.js) */
.logo .mark svg { width: 26px; height: 26px; display: block; }
.logo .word { color: var(--text); white-space: nowrap; }
.logo .word b { font-weight: 600; }
.logo .word-img, .foot-brand .word-img { display: block; flex: none; } /* lib/mark.js D, E, F: the outlined wordmark, at the size in its file */
.nav-right { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; justify-content: flex-end; }
.nav-login .short { display: none; } /* [qa8] the phone label (below) */
.navlink { color: var(--muted); text-decoration: none; padding: 6px 4px; font-size: var(--fs-sm); font-weight: 500; border-radius: var(--r-sm); transition: color var(--dur); }
.navlink:hover, .navlink[aria-current=page] { color: var(--text); }
.navlink[aria-current=page] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.nav-account { position: relative; }
.nav-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 230px; display: grid; gap: 4px; padding: var(--s2);
  background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-md); box-shadow: var(--shadow);
}
.menu-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s2) var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.menu-head strong { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-group { display: grid; gap: 2px; padding-top: 4px; }
.menu-group + .menu-group { border-top: 1px solid var(--line); margin-top: 2px; }
.menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font: inherit; font-size: var(--fs-sm); padding: 8px 10px; border-radius: var(--r-sm); text-decoration: none; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--panel3); }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-item[aria-current=page] { color: var(--accent); }
.menu-item.danger { color: var(--error); }
.menu-primary { display: none; }
.avatar-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: var(--panel); color: var(--text); padding: 0; overflow: hidden; cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.avatar-btn:hover { border-color: var(--subtle); }
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }

main { max-width: 1200px; margin: 0 auto; padding: var(--s2) var(--s4) var(--s7); }
main.narrow { max-width: 640px; }
main.mid { max-width: 820px; }
.back { display: inline-block; color: var(--muted); text-decoration: none; font-size: var(--fs-sm); margin-bottom: var(--s3); }
.back:hover { color: var(--text); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.page-head h1 { margin: 0; }
.page-head .lead { margin: var(--s1) 0 0; color: var(--muted); max-width: 60ch; }

/* ---------- buttons (primary / secondary / danger / twitch) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  background: var(--accent-strong); border: 1px solid transparent; color: var(--accent-ink);
  font: inherit; font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; padding: 10px 16px; border-radius: var(--r-md); cursor: pointer; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: background var(--dur), border-color var(--dur), color var(--dur), transform .1s, opacity var(--dur);
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; transform: none; }
.btn.secondary, .btn.ghost { background: var(--panel); color: var(--text); border-color: var(--line2); box-shadow: none; }
.btn.secondary:hover, .btn.ghost:hover { background: var(--panel3); border-color: var(--subtle); }
.btn.danger { background: transparent; color: var(--error); border-color: var(--error-line); box-shadow: none; }
.btn.danger:hover { background: var(--error-soft); }
.btn.twitch { background: var(--twitch); color: var(--twitch-ink); }
.btn.twitch:hover { background: #7d33f0; }
.btn.small { padding: 6px 10px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn.large { padding: 13px 22px; font-size: var(--fs-md); border-radius: var(--r-md); }
/* [onboarding] On a phone a long label (and German or French ones are long) wraps instead of pushing the
   page wider than the screen; the Studio loaded zoomed out at 360 px because of one such button. */
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; max-width: 100%; } }
.btn.block { width: 100%; }
.btn .spin { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { color: var(--text); }
/* arrow links ("See plans →") are an icon, not a character */
.arrow::after { content: ''; display: inline-block; width: .55em; height: .55em; margin-left: .3em; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); vertical-align: .05em; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.row-actions.end { justify-content: flex-end; }
.row-actions .grow { flex: 1; }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line2); color: var(--muted); font: inherit; font-weight: 500;
  padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer; font-size: var(--fs-sm); line-height: 1.3;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.chip:hover { color: var(--text); border-color: var(--subtle); }
a.chip { text-decoration: none; }
.chip.on { color: var(--text); background: var(--accent-soft); border-color: var(--accent-line); }
.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 var(--s4); }

/* ---------- badges / pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 500; line-height: 1.4; padding: 2px 8px; border-radius: var(--r-pill); background: var(--panel2); border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; }
.pill .icon { width: 12px; height: 12px; }
.pill.done, .pill.ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.pill.error { color: var(--error); border-color: var(--error-line); background: var(--error-soft); }
.pill.warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.pill.accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.pill.live { color: var(--text); border-color: rgba(239, 68, 68, .45); }
.pill.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(239, 68, 68, .2); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { color: var(--muted); text-transform: uppercase; font-size: .7rem; letter-spacing: .06em; font-weight: 600; }

/* ---------- panels / forms ---------- */
.panel, form.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); display: grid; gap: var(--s4); }
.section { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: grid; gap: var(--s3); }
.section > h3 { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.section .step-no { width: 22px; height: 22px; border-radius: 50%; background: var(--panel3); border: 1px solid var(--line2); color: var(--text); font-size: var(--fs-xs); font-weight: 600; display: inline-grid; place-items: center; flex: none; font-variant-numeric: tabular-nums; }
.section .hint { margin: -4px 0 0; color: var(--muted); font-size: var(--fs-sm); }
label { display: grid; gap: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
label .opt { color: var(--subtle); font-weight: 400; }
input[type=text], input[type=url], input[type=number], input[type=search], input[type=email], select, textarea {
  width: 100%; min-width: 0; background: var(--panel2); border: 1px solid var(--field-line); color: var(--text); border-radius: var(--r-sm);
  padding: 10px 12px; font: inherit; font-size: var(--fs-md); transition: border-color var(--dur), box-shadow var(--dur);
}
input::placeholder, textarea::placeholder { color: var(--subtle); } /* 4.6:1 on --panel2 */
input:hover, select:hover, textarea:hover { border-color: var(--subtle); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
select { appearance: auto; }
/* [qa8] Sliders are gold like every other control (the brand kit's opacity slider was the browser's blue). */
input[type=range] { accent-color: var(--accent-strong); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.check { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: var(--fs-md); cursor: pointer; font-weight: 400; }
.check input { margin: 4px 0 0; accent-color: var(--accent-strong); width: 16px; height: 16px; flex: none; }
.check .sub { display: block; color: var(--muted); font-size: var(--fs-sm); }
.drop { display: flex; gap: 10px; }
.drop input { flex: 1; min-width: 0; }
.status { color: var(--muted); min-height: 1.5em; font-size: var(--fs-sm); display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.status.error { color: var(--error); }
.status:empty { min-height: 0; } /* [onboarding] the dashboard's status line sits under the link box now */
.notice { background: var(--panel); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: var(--s3) var(--s4); margin: var(--s3) 0; display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; font-size: var(--fs-sm); }
.notice.info { border-color: var(--line2); border-left-color: var(--subtle); }
.notice .grow { flex: 1; min-width: 200px; }

/* ---------- progress ---------- */
.bar { height: 6px; background: var(--panel3); border-radius: var(--r-pill); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width .4s var(--ease); }
.bar.indeterminate > span { width: 40%; animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* ---------- skeletons & empty states ---------- */
.skeleton { background: linear-gradient(90deg, var(--panel) 25%, var(--panel3) 37%, var(--panel) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm); border: 1px solid var(--line); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.skeleton.card { aspect-ratio: 16 / 10; border-radius: var(--r-lg); }
.skeleton.row { height: 76px; border-radius: var(--r-md); }
.skeleton.line { height: 14px; }
/* empty state: a 44px icon disc, one bold line, one sentence, one action */
.empty { text-align: center; padding: var(--s6) var(--s4); color: var(--muted); display: grid; gap: var(--s2); justify-items: center; }
.empty > .icon { width: 44px; height: 44px; border-radius: 50%; background: var(--panel3); border: 1px solid var(--line2); display: grid; place-items: center; color: var(--muted); font-size: 1rem; line-height: 1; margin-bottom: var(--s1); }
.empty > .icon > svg { width: 20px; height: 20px; border: 0; background: none; border-radius: 0; margin: 0; }
.empty > .icon.error { color: var(--error); border-color: var(--error-line); background: var(--error-soft); }
.empty strong, .empty h1 { color: var(--text); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
.empty h1 { margin: 0; } /* [qa8] the 404 page (views/notfound.html) titles its empty state as the page heading */
.empty p { max-width: 44ch; margin: 0; }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 50%; bottom: var(--s4); transform: translateX(-50%); display: grid; gap: var(--s2); z-index: 100; width: min(480px, calc(100% - 32px)); pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; gap: var(--s3); align-items: flex-start; background: var(--panel3); border: 1px solid var(--line2); border-left: 3px solid var(--subtle); color: var(--text);
  padding: var(--s3) var(--s4); border-radius: var(--r-md); box-shadow: var(--shadow); font-size: var(--fs-sm); animation: toast-in .2s var(--ease);
}
.toast.error { border-left-color: var(--error); }
.toast.success { border-left-color: var(--ok); }
.toast .body { flex: 1; }
.toast .body a, .toast .body button { color: var(--accent); }
.toast .x { background: none; border: 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0 2px; }
.toast .x:hover { color: var(--text); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- modal (confirm + facecam) ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(5, 5, 4, .76); backdrop-filter: blur(4px); display: grid; place-items: center; padding: var(--s4); z-index: 50; }
.modal { background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-xl); padding: var(--s5); width: min(760px, 100%); display: grid; gap: var(--s3); max-height: 95vh; overflow: auto; box-shadow: var(--shadow); }
.modal.sm { width: min(420px, 100%); }
.modal h2 { margin: 0; }
.modal p { margin: 0; }
.modal .confirm-list { display: grid; gap: var(--s2); } /* [plans2] the trial dialog's "Everything in Free, plus:" */
.modal .confirm-lead { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.modal .confirm-list ul { margin: 0; padding-left: 0; padding-inline-start: 18px; display: grid; gap: 4px; color: var(--muted); font-size: var(--fs-sm); }
.fc-stage { position: relative; aspect-ratio: 16 / 9; background: #000 repeating-linear-gradient(45deg, #111 0 10px, #161616 10px 20px); border-radius: var(--r-md); overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; }
.fc-img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.fc-img:not([src]) { visibility: hidden; }
.fc-box { position: absolute; border: 2px solid var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5); pointer-events: none; }

/* ---------- format picker (one form: where → framing → extras) ---------- */
.format-picker { display: grid; gap: var(--s4); }
.fp-step { display: grid; gap: var(--s2); }
/* [ux8] One run of text, not flex items: on a phone the title and its "— recommended" wrap together as a line
   of text, the next line starting under the step number, instead of squeezing into side-by-side columns.
   The circle hangs from the top of the first line, centred in its 1.5 line-height (baseline alignment sat it low). */
.fp-label { display: block; font-weight: 600; font-size: var(--fs-sm); line-height: 1.5; color: var(--text); }
.fp-label .step-no { width: 20px; height: 20px; border-radius: 50%; background: var(--panel3); border: 1px solid var(--line2); color: var(--muted); font-size: var(--fs-xs); line-height: 1; display: inline-grid; place-items: center; vertical-align: top; margin-block-start: calc((1.5 * var(--fs-sm) - 20px) / 2); margin-inline-end: var(--s2); font-variant-numeric: tabular-nums; }
.fp-label .opt { color: var(--muted); font-weight: 400; margin-inline-start: .3em; }
.ratio-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--s2); }
.ratio-tile {
  display: grid; justify-items: center; gap: 4px; padding: var(--s3) var(--s2); cursor: pointer; position: relative;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: var(--r-md); color: var(--text); font: inherit; text-align: center;
  transition: border-color var(--dur), background var(--dur);
}
.ratio-tile:hover { border-color: var(--subtle); }
.ratio-tile .muted { font-size: var(--fs-xs); }
.ratio-tile.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.ratio-tile .rec { position: absolute; top: 6px; right: 6px; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 600; }
.ratio-icon { display: block; border: 2px solid var(--muted); border-radius: 3px; margin: 2px 0 4px; }
.ratio-tile.on .ratio-icon { border-color: var(--accent); background: var(--accent-soft); }
.fit-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.fit-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); }
.fit-card {
  display: grid; gap: 6px; padding: var(--s3); cursor: pointer; text-align: left;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: var(--r-md); color: var(--text); font: inherit;
  transition: border-color var(--dur), background var(--dur);
}
.fit-card:hover { border-color: var(--subtle); }
.fit-card.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.fit-card strong { font-size: var(--fs-sm); }
.fit-card .muted { font-size: var(--fs-xs); }
.fit-card svg, .fit-ill { width: 100%; height: 64px; display: block; }
.picker-note { font-size: var(--fs-sm); color: var(--muted); }
.extras { display: grid; gap: var(--s3); }
.cap-sample { font-weight: 800; letter-spacing: .02em; }
.cap-bold { text-transform: uppercase; font-family: 'Arial Black', system-ui, sans-serif; }
.cap-neon { text-transform: uppercase; font-family: 'Arial Black', system-ui, sans-serif; text-shadow: 0 0 6px #ff3db4; }
.cap-boxed { background: #000c; color: #fff; }
.cap-clean { font-family: Arial, system-ui, sans-serif; }
.cam-choice { display: grid; gap: var(--s2); padding: var(--s3); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md); }
.cam-choice .check { font-size: var(--fs-sm); }
.cam-choice input[type=radio] { margin: 3px 0 0; accent-color: var(--accent-strong); width: 16px; height: 16px; flex: none; }
.rec-tag { margin-left: 6px; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 600; }
.summary { font-size: var(--fs-sm); color: var(--muted); padding: var(--s3); border: 1px dashed var(--line2); border-radius: var(--r-md); display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.summary strong { color: var(--text); }

/* ---------- onboarding checklist ---------- */
.onboard { background: var(--panel); border: 1px solid var(--line2); border-left: 3px solid var(--accent); border-radius: var(--r-lg); padding: var(--s4) var(--s5); margin-bottom: var(--s4); display: grid; gap: var(--s3); }
.onboard h2 { margin: 0; font-size: var(--fs-lg); }
.onboard ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.onboard li { display: flex; gap: var(--s3); align-items: flex-start; }
.onboard .n { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line2); display: inline-grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.onboard .n svg { width: 13px; height: 13px; stroke-width: 2.5; }
.onboard li.done .n { background: var(--ok); border-color: var(--ok); color: #06281a; }
.onboard li.done .t { text-decoration: line-through; color: var(--muted); }
.onboard .t { font-weight: 600; }
.onboard .d { color: var(--muted); font-size: var(--fs-sm); }
/* [onboarding] getting-started strip: header with a dismiss, the current step's disc in the accent */
.onboard-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.onboard .x { background: none; border: 0; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 var(--s1); min-width: 32px; min-height: 32px; }
.onboard .x:hover { color: var(--text); }
.onboard li.now .n { border-color: var(--accent); color: var(--accent); }
#onboard-after .onboard { margin: var(--s5) 0 0; }
@media (pointer: coarse) { .onboard .x { min-width: 44px; min-height: 44px; } }

/* ---------- public streamer page (views/streamer.html; markup partly built by the server) ---------- */
.streamer-head { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding: var(--s4) 0 var(--s2); }
.streamer-head h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.streamer-head .who { flex: 1; min-width: 200px; }
.streamer-head .who p { margin: 4px 0 0; }
.streamer-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.8rem; font-weight: 800; }
.streamer-page .featured { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); margin: var(--s3) 0 var(--s5); display: grid; gap: var(--s3); }
.streamer-page .featured video { max-height: 70vh; }
.streamer-page .featured h2 { margin: 0; font-size: var(--fs-lg); }
.streamer-page .featured .actions { margin-top: 0; }
.cta-band { text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6) var(--s4); margin-top: var(--s6); }
.cta-band h2 { margin: 0 0 var(--s2); }
.cta-band p { color: var(--muted); max-width: 60ch; margin: 0 auto var(--s4); }
.pager { text-align: center; margin: var(--s5) 0; }
.pager:empty { display: none; }

/* ---------- GTA 6 landing (views/gta6.html): the landing sections plus the comparison table ---------- */
.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--panel); }
.compare th, .compare td { text-align: left; padding: var(--s3) var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { color: var(--muted); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; background: var(--panel3); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td { color: var(--muted); }
.compare td:first-child { color: var(--text); font-weight: 500; min-width: 160px; }
/* our column: a neutral lift and two gold hairlines, never a gold fill (a 12% gold tint over this much area reads khaki) */
.compare .us { color: var(--text); font-weight: 600; background: var(--panel3); border-left: 1px solid var(--accent-line); border-right: 1px solid var(--accent-line); }
.compare thead .us { color: var(--accent); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line2); border-radius: var(--r-lg); }
.honest-list { max-width: 760px; margin: 0 auto; }
.fine { color: var(--subtle); font-size: var(--fs-xs); text-align: center; max-width: 60ch; margin: var(--s5) auto 0; }
.cta-band .fine { margin-bottom: 0; }

/* dashboard invite card (growth.js) */
.invite-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); display: grid; gap: var(--s2); font-size: var(--fs-sm); }

/* ---------- invite & settings ---------- */
.settings { display: grid; gap: var(--s4); }
.linkrow { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.linkrow input { flex: 1; min-width: 0; }
.linkrow > a { overflow-wrap: anywhere; }
.ref-stats { display: flex; gap: var(--s5); flex-wrap: wrap; color: var(--muted); font-size: var(--fs-sm); }
.ref-stats strong { color: var(--text); font-size: var(--fs-lg); display: block; }
.radio-list { display: grid; gap: var(--s2); }
.radio-list input[type=radio] { margin: 4px 0 0; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.status.ok { color: var(--ok); }
@media (max-width: 560px) { .linkrow input { flex-basis: 100%; } }

/* ---------- Studio "Post it" ---------- */
.section p { margin: 0; }
#post-it .chip:disabled { opacity: .5; cursor: not-allowed; }
.post-list { display: grid; gap: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s3); }
.post-row { display: grid; gap: 4px; font-size: var(--fs-sm); }
.fit-row.indent { padding-left: 26px; }
input[type=datetime-local], input[type=date], input[type=time] {
  width: 100%; min-width: 0; background: var(--panel2); border: 1px solid var(--field-line); color: var(--text); border-radius: var(--r-sm);
  padding: 10px 12px; font: inherit; font-size: var(--fs-md); color-scheme: dark;
}

/* ---------- connected accounts / posts ---------- */
.acct .name { font-size: var(--fs-md); }
.notice.error-notice { border-color: var(--error-line); color: var(--error); }
.post-item { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.post-thumb { aspect-ratio: 16 / 9; border-radius: var(--r-sm); background: #000 center / cover no-repeat; border: 1px solid var(--line); }
.post-body { display: grid; gap: 6px; min-width: 0; }
.post-caption { color: var(--muted); font-size: var(--fs-sm); white-space: pre-wrap; max-height: 4.5em; overflow: hidden; }
@media (max-width: 560px) { .post-item { grid-template-columns: minmax(0, 1fr); } .post-thumb { display: none; } }

/* ---------- live clipping ---------- */
.live-row .name a { text-decoration: none; }
.live-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3); margin-top: var(--s2); }
.live-clips .clip-card .media { min-height: 120px; }
.live-clips .clip-card .media video { max-height: 300px; }
.live-hint { grid-column: 1 / -1; margin: 0; }
/* [afterstream] a channel row's settings (sensitivity, the "After each stream" switch) and its "Last stream" card (public/live.js) */
.live-settings { display: grid; gap: var(--s3); }
.switch { display: flex; align-items: flex-start; gap: var(--s3); cursor: pointer; font-size: var(--fs-sm); color: var(--text); position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } /* the track draws it; the input stays for the keyboard and screen readers */
.switch .track { flex: none; width: 36px; height: 20px; margin-top: 1px; border-radius: var(--r-pill); background: var(--panel3); border: 1px solid var(--field-line); position: relative; transition: background-color var(--dur), border-color var(--dur); }
.switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform var(--dur) var(--ease), background-color var(--dur); }
.switch input:checked + .track { background: var(--accent-soft); border-color: var(--accent-line); } /* on: the gold tint and line, the thumb stays white */
.switch input:checked + .track::after { transform: translateX(16px); background: var(--text); }
.switch input:focus-visible + .track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled + .track { opacity: .5; }
.switch.off { cursor: default; }
.switch-text { display: grid; gap: 2px; min-width: 0; }
.switch-text strong { font-weight: 500; }
.switch-text .sub { color: var(--muted); font-size: var(--fs-sm); }
.recap { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--accent-line); border-radius: var(--r-md); padding: var(--s3) var(--s4); display: grid; gap: var(--s1); font-size: var(--fs-sm); }
.recap p { margin: 0; }
.recap-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.recap-head strong { font-size: var(--fs-md); }
.recap-pass { display: grid; gap: var(--s1); margin-top: var(--s1); padding-top: var(--s2); border-top: 1px solid var(--line); }
.recap-pass .bar { margin: 2px 0; }
.recap .cta { color: var(--accent); font-weight: 600; text-decoration: none; justify-self: start; min-height: 32px; display: inline-flex; align-items: center; }
.recap .cta:hover { text-decoration: underline; }
.clip-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
code { background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: .9em; }

/* ---------- dashboard: three ways in ---------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-bottom: var(--s3); }
.way {
  display: grid; gap: 2px; justify-items: start; text-align: left; padding: var(--s3); cursor: pointer; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text); font: inherit;
}
.way:hover { border-color: var(--line2); }
.way[aria-selected=true] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.way svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; color: var(--accent); }
.way strong { font-size: var(--fs-sm); }
.way .muted { font-size: var(--fs-xs); }
.ways-more { margin: var(--s3) 0 0; }
/* [onboarding2] a returning streamer's dashboard: no intro line, the three ways as one small row, their VODs
   right under the link box */
.returning .page-head .lead { display: none; }
.returning .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.returning .way { padding: var(--s2); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; }
.returning .way svg { margin: 0; }
.returning .way strong { font-size: var(--fs-xs); line-height: 1.25; }
.returning .way .muted { display: none; }
#vods-more:not(:empty) { margin-top: var(--s3); }
#onboard-after .onboard { margin: var(--s4) 0 0; }
.list-head { margin-top: var(--s5); }
/* [onboarding2] the format picker: one summary line when closed; "More options" for the rarer settings */
.fp-summary-row { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); }
.fp-summary-row .grow { flex: 1 1 200px; min-width: 0; }
.fp-summary-row strong { color: var(--text); }
.format-picker.compact { gap: var(--s3); }
.fp-body { display: grid; gap: var(--s4); }
.fp-body[hidden] { display: none; }
.fp-more { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2); padding: var(--s2) var(--s3); }
.fp-more > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); padding: 6px 0; min-height: 32px; }
.fp-more-body { display: grid; gap: var(--s3); padding: var(--s2) 0 var(--s1); }
.cam-choice .link-btn { justify-self: start; }
@media (max-width: 480px) { .fit-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fit-card svg, .fit-ill { height: 52px; } }
.list-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.list-head h2 { margin: 0; }
.list-head .filters { margin: 0; }
.dropzone {
  display: grid; gap: 4px; justify-items: center; text-align: center; padding: var(--s5) var(--s4); cursor: pointer;
  border: 2px dashed var(--line2); border-radius: var(--r-md); background: var(--panel2);
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); }
.dropzone.chosen { border-style: solid; border-color: var(--accent); }
.dropzone .file-name { color: var(--accent); overflow-wrap: anywhere; }
#upload-actions { margin-top: var(--s3); }
@media (max-width: 560px) { .ways { grid-template-columns: minmax(0, 1fr); } .way { grid-template-columns: auto 1fr; column-gap: var(--s2); align-items: center; } .way svg { grid-row: span 2; margin: 0; } }

/* [choice] "What do you want from this stream?": one segmented control (a radio group), never gold buttons —
   the picked segment is tinted like a selected chip; the box's own button stays the area's one gold button */
.want { display: grid; gap: var(--s2); }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); padding: var(--s1); background: var(--panel2); border: 1px solid var(--line2); border-radius: var(--r-md); }
.seg-opt {
  display: grid; gap: 2px; align-content: center; justify-items: start; text-align: start; min-width: 0; min-height: 44px; padding: var(--s2) var(--s3);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--muted); font: inherit; cursor: pointer;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.seg-opt strong { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); color: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.seg-hint { font-size: var(--fs-xs); line-height: 1.4; color: var(--subtle); }
.seg-opt:hover { color: var(--text); background: var(--panel3); }
.seg-opt.on { color: var(--text); background: var(--accent-soft); border-color: var(--accent-line); }
.seg-opt.on .seg-hint { color: var(--muted); }
.seg-opt.locked { cursor: help; }
.seg-opt.locked:hover { background: transparent; color: var(--muted); }
.seg-tag { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); font-weight: 500; color: var(--subtle); white-space: nowrap; }
.seg.labels-only .seg-opt { justify-items: center; text-align: center; padding: var(--s2); }
.want-note { color: var(--muted); line-height: 1.5; min-height: 1.5em; }
.want-note strong { color: var(--text); }
.want-note.tried strong { color: var(--warn); } /* tapped a locked option: the why stands out, the rest stays calm */
.hero-want { max-width: 560px; margin: var(--s3) 0 0; text-align: start; }
.hero-want .fp-label { font-weight: 500; color: var(--muted); }
@media (max-width: 560px) { .seg-hint { display: none; } .seg-opt { justify-items: center; text-align: center; padding: var(--s2) var(--s1); } .seg-opt strong { justify-content: center; } }
/* [choice] the VOD page: what was asked for, and where the episode is */
.choice-card { display: grid; gap: var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); margin: var(--s3) 0 0; }
.choice-card .choice-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.choice-card h2 { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: var(--fs-md); }
.choice-card h2 .icon { color: var(--accent); }
.choice-card .grow { flex: 1 1 220px; min-width: 0; }
.choice-card p { margin: 0; }

/* ---------- dashboard ---------- */
.usage { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; color: var(--muted); margin: var(--s3) 0 var(--s5); font-size: var(--fs-sm); }
.usage .grow { flex: 1; min-width: 220px; }
.list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin-top: var(--s3); }
.vod-row { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); display: grid; gap: var(--s2); text-decoration: none; min-width: 0; grid-template-columns: minmax(0, 1fr); transition: border-color .12s; }
.vod-row:hover { border-color: var(--accent); }
.vod-row.flash { border-color: var(--accent); }
.vod-row .top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.vod-row .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.vod-row .sub { color: var(--muted); font-size: var(--fs-sm); }
.vod-row .cta { color: var(--accent); font-weight: 600; font-size: var(--fs-sm); }

/* ---------- feed ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; display: block; transition: border-color .12s; }
.card:hover { border-color: var(--accent); }
.thumb { aspect-ratio: 16/9; background: #000 center/cover no-repeat; position: relative; }
.thumb .dur { position: absolute; right: 8px; bottom: 8px; background: #000c; padding: 2px 6px; border-radius: 4px; font-size: var(--fs-xs); }
.card .meta { padding: 10px 12px; display: grid; gap: 4px; }
.card .title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .sub { color: var(--muted); font-size: var(--fs-xs); display: flex; justify-content: space-between; }

/* ---------- VOD results ---------- */
.vod-head { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.vod-head .meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; color: var(--muted); font-size: var(--fs-sm); }
/* [onboarding2] results: the facts fold into "About these clips", the actions are one compact bar */
.vod-about { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); padding: var(--s2) var(--s3); }
.vod-about > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; padding: 6px 0; }
.vod-about > summary .muted { font-weight: 400; }
.vod-about-body { display: grid; gap: var(--s2); padding: var(--s2) 0 var(--s1); }
.vod-about .notice { margin: 0; }
.vod-about .pill { flex-wrap: wrap; white-space: normal; max-width: 100%; } /* [ux5] the language select fits on a phone */
/* [fx-ui] the language pill and its compact "Change" select side by side (the select was a full-size field inside the pill) */
.lang-fact { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; max-width: 100%; }
select.lang-change { width: auto; max-width: min(9em, 100%); padding: 3px 8px; font-size: var(--fs-xs); border-radius: var(--r-sm); background: var(--panel); }
.vod-bar { display: grid; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.vod-bar-main { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.vod-bar .counts { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--fs-sm); }
.vod-bar-more { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.vod-bar-more .jumps { flex-basis: 100%; }
.vod-bar-toggle { display: none; }
/* [ux5] results: weak moments kept to fill out a quiet stream, closed under the good ones */
.maybe-section { grid-column: 1 / -1; border: 1px dashed var(--line2); border-radius: var(--r-lg); background: var(--panel2); padding: var(--s3) var(--s4); }
.maybe-section > summary { cursor: pointer; padding: 2px 0; }
.maybe-head { display: inline-flex; align-items: center; gap: var(--s2); }
.maybe-why { display: block; margin-top: 4px; }
.maybe-section[open] > summary { margin-bottom: var(--s3); }
.maybe-section > .clips-grid { margin: 0; }
.maybe-all { grid-column: 1 / -1; margin: 0; }
@media (max-width: 700px) {
  .vod-bar-toggle { display: inline-flex; }
  .vod-bar:not(.open) .vod-bar-more { display: none; }
  .vod-bar .counts { flex-basis: 100%; }
  .vod-bar .review-link { flex: 1; min-height: 44px; }
  .vod-head h1 { font-size: var(--fs-lg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .vod-head { gap: var(--s2); margin-bottom: var(--s3); }
  .vod-head .keys { display: none; }
  .back { margin-bottom: var(--s2); }
}
.processing { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.processing .stage { font-weight: 600; }
/* [onboarding] what happens while a VOD processes: four steps, the current one in the accent */
.proc-steps { list-style: none; margin: var(--s1) 0 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--fs-sm); color: var(--subtle); }
.proc-steps li { display: flex; align-items: center; gap: var(--s2); }
.proc-steps .dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line2); display: inline-grid; place-items: center; flex: none; }
.proc-steps .dot svg { width: 10px; height: 10px; stroke-width: 3; }
.proc-steps li.done { color: var(--muted); }
.proc-steps li.done .dot { background: var(--ok); border-color: var(--ok); color: #06281a; }
.proc-steps li.now { color: var(--text); font-weight: 500; }
.proc-steps li.now .dot { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--accent-soft); }
/* [onboarding] the plan offer under a VOD's clips, and the jump links to search / episodes */
.plan-offer { margin-top: var(--s5); align-items: center; flex-wrap: wrap; gap: var(--s3); }
.plan-offer h3 { margin: 0 0 var(--s1); }
.plan-offer p { margin: 0; }
.plan-offer .grow { flex: 1 1 240px; min-width: 0; }
.jumps:empty { display: none; }
.jumps { margin-top: var(--s1); }
/* Keyboard shortcuts mean nothing on a touch screen */
@media (hover: none) and (pointer: coarse) { .keys { display: none; } }
.clips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s4); }
.clip-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.clip-card .media { background: #000; display: flex; justify-content: center; align-items: center; min-height: 160px; }
.clip-card .media video { max-height: 420px; width: auto; max-width: 100%; border-radius: 0; }
.clip-card .media .pending { padding: var(--s5); text-align: center; color: var(--muted); display: grid; gap: var(--s2); justify-items: center; }
.clip-card .body { padding: var(--s3); display: grid; gap: var(--s2); }
.clip-card .sub { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); font-size: var(--fs-xs); color: var(--muted); }
.clip-card .row-actions .btn { flex: 0 0 auto; }
.title-input { width: 100%; background: transparent; border: 1px solid transparent; color: var(--text); font: inherit; font-weight: 600; font-size: var(--fs-md); padding: 4px 6px; border-radius: 6px; }
.title-input:hover, .title-input:focus { border-color: var(--field-line); background: var(--panel2); } /* inline edit: no edge at rest, a field on hover/focus */
.title-input:focus-visible { border-color: var(--accent); }
.hype { font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.hype .icon { width: 12px; height: 12px; color: var(--muted); }
.format-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.format-tabs .chip { padding: 3px 10px; font-size: var(--fs-xs); }
.format-tabs .chip.err { border-color: var(--error-line); color: var(--error); }
select.add-format { width: auto; padding: 6px 10px; font-size: var(--fs-sm); border-radius: var(--r-sm); background: var(--panel); } /* border, hover and focus from the field rule */
/* highlight reels */
.pill.reel { color: var(--accent-ink); background: var(--accent-strong); border-color: transparent; font-weight: 700; }
.reel-timeline { display: flex; gap: 2px; padding: 6px var(--s3) 0; }
.reel-seg {
  min-width: 18px; height: 22px; border: 0; border-radius: 4px; cursor: pointer; font: 700 var(--fs-xs) / 1 var(--font); color: var(--accent-ink);
  background: var(--accent);
}
.reel-seg:nth-child(even) { background: var(--accent); }
.reel-seg:hover { filter: brightness(1.15); }
.reel-seg:disabled { cursor: default; opacity: .6; }
.reel-pick { font-size: var(--fs-sm); color: var(--muted); }
.reel-pick .pick-no { color: var(--accent); font-weight: 700; }
.reel-form { display: grid; gap: var(--s3); }
.section .reel-timeline { padding: 0; }
.reel-list { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.clip-card.focused { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.vod-head .keys { margin-top: -4px; }
/* lightbox: big preview of one clip with its actions beside it */
.lightbox { padding: var(--s3); }
.lightbox-body { background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-lg); width: min(1100px, 100%); max-height: 95vh; display: grid; grid-template-columns: minmax(0, 1fr) 320px; overflow: hidden; box-shadow: var(--shadow); }
.lightbox-media { background: #000; display: flex; align-items: center; justify-content: center; min-height: 240px; }
.lightbox-media video { max-height: 92vh; max-width: 100%; width: auto; border-radius: 0; }
.lightbox-side { padding: var(--s4); display: grid; gap: var(--s3); align-content: start; overflow: auto; }
.lightbox-side h2 { margin: 0; font-size: var(--fs-md); }
.why-slot { display: grid; gap: var(--s2); min-width: 0; }
.why-slot:empty { display: none; }
@media (max-width: 800px) {
  .lightbox-body { grid-template-columns: minmax(0, 1fr); max-height: 95vh; overflow: auto; }
  .lightbox-media video { max-height: 55vh; }
}

/* ---------- studio ---------- */
.studio { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }
.studio-preview { display: grid; gap: var(--s3); justify-items: center; }
.studio-preview .stage { width: 100%; background: #000; border-radius: var(--r-md); display: flex; justify-content: center; align-items: center; min-height: 200px; border: 1px solid var(--line); overflow: hidden; }
.studio-preview video { max-height: 70vh; width: auto; max-width: 100%; border-radius: 0; }
/* Live caption / hook preview over the poster frame. Mirrors lib/captions.js STYLES and the position
   rules; sizes come from --fw (the video's rendered width, set by the page). Hidden while playing. */
.stage-frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.stage-frame video { display: block; }
.cap-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; line-height: 1.2; }
.cap-hook {
  position: absolute; left: 6%; right: 6%; top: 5%; text-align: center; font-family: 'Arial Black', Arial, sans-serif; font-weight: 900;
  text-transform: uppercase; color: #111; background: #fff; padding: .2em .5em; border-radius: .15em; font-size: calc(var(--fw, 300px) * .055); line-height: 1.15;
}
.cap-line { position: absolute; left: 6%; right: 6%; text-align: center; font-weight: 900; font-size: calc(var(--fw, 300px) * .072); color: #fff; overflow-wrap: anywhere; }
.cap-line.pos-top { top: 12%; }
.cap-line.pos-middle { top: 50%; transform: translateY(-50%); }
.cap-line.pos-bottom { bottom: var(--cap-bottom, 20%); }
.cap-line.pos-seam { top: var(--cap-seam, 36%); transform: translateY(-50%); }
.cap-line.pos-hud { top: var(--cap-top, 12%); bottom: auto; transform: none; } /* [ux6] moved off the game's HUD (lib/hud.js) */
.cap-line .w { display: inline-block; margin: 0 .12em; }
.cap-line .w.on { transform: scale(1.08); }
.cap-line.style-bold { font-family: 'Arial Black', Arial, sans-serif; text-transform: uppercase; -webkit-text-stroke: .045em #000; paint-order: stroke fill; }
.cap-line.style-bold .w.on { color: #ffd400; }
.cap-line.style-clean { font-family: Arial, sans-serif; font-weight: 700; -webkit-text-stroke: .025em #000; paint-order: stroke fill; text-shadow: .06em .08em 0 #000a; }
.cap-line.style-clean .w.on { color: #9eff80; }
.cap-line.style-boxed { font-family: Arial, sans-serif; font-weight: 700; }
.cap-line.style-boxed .w { background: rgba(0, 0, 0, .7); padding: .05em .2em; border-radius: .12em; }
.cap-line.style-boxed .w.on { color: #ffd400; }
.cap-line.style-neon { font-family: 'Arial Black', Arial, sans-serif; text-transform: uppercase; -webkit-text-stroke: .05em #ff3db4; paint-order: stroke fill; text-shadow: 0 0 .3em #ff3db4; }
.cap-line.style-neon .w.on { color: #3dffff; }
.cap-seam { position: absolute; left: 0; right: 0; top: var(--cap-seam, 36%); border-top: 2px dashed rgba(var(--accent-rgb), .75); }
/* guide labels sit on a black plate: gold straight on a bright frame drops to 1.8:1; on the plate it is 7:1 on any frame */
.cap-seam::after { content: 'cam ↑ · gameplay ↓'; position: absolute; right: 6px; top: 4px; font: 600 calc(var(--fw, 300px) * .034) / 1.3 var(--font); color: var(--accent); background: #000c; padding: 0 .4em; border-radius: 3px; }
.cap-chat {
  position: absolute; left: 0; right: 0; bottom: 0; background: #0e0e10; color: #e9e6f2; overflow: hidden; display: grid; align-content: end; gap: .2em;
  padding: .4em .6em; font: 600 calc(var(--fw, 300px) * .036) / 1.25 var(--font); border-top: 1px solid #ffffff1a;
}
.cap-chat b { font-weight: 800; }
.cap-cam-band {
  position: absolute; left: 0; right: 0; top: 0; background: rgba(0, 0, 0, .35); border-bottom: 2px dashed rgba(var(--accent-rgb), .75);
  display: grid; place-items: center; color: var(--accent); font: 600 calc(var(--fw, 300px) * .036) / 1.3 var(--font);
}
.cap-cam-band span { background: #000c; padding: 0 .45em; border-radius: 3px; }
.cap-note { position: absolute; left: 0; right: 0; bottom: 0; background: #000b; color: #fff; font: 400 var(--fs-xs) / 1.3 var(--font); text-align: center; padding: 4px 8px; }
.studio-preview .meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; color: var(--muted); font-size: var(--fs-xs); }
.studio-panel { display: grid; gap: var(--s4); min-width: 0; }
.savebar { position: sticky; bottom: 0; z-index: 5; background: rgba(29, 28, 25, .92); backdrop-filter: blur(10px); border: 1px solid var(--line2); border-radius: var(--r-md); padding: var(--s3) var(--s4); display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; box-shadow: var(--shadow); }
.savebar .grow { flex: 1; min-width: 160px; font-size: var(--fs-sm); color: var(--muted); }
.savebar .eta { color: var(--text); font-weight: 600; }
.trim-row { display: grid; grid-template-columns: 48px 1fr; gap: var(--s2); align-items: center; }
.trim-row .time { text-align: center; font-variant-numeric: tabular-nums; min-width: 64px; font-weight: 600; }
/* [onboarding] 360 px phones: the Studio's Start/End rows (−1s −0.1s time +0.1s +1s) were 19 px too wide */
@media (max-width: 380px) {
  .trim-row { grid-template-columns: 40px minmax(0, 1fr); }
  main #tl-cut .trim-row .chip { padding: 4px 6px; }
}
.transcript { display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.transcript input { width: 100%; background: var(--panel2); border: 1px solid var(--field-line); color: var(--text); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: var(--fs-sm); }
/* fields whose own rule resets the border get the shared hover and focus states back */
.transcript input:hover, input[type=datetime-local]:hover, input[type=date]:hover, input[type=time]:hover { border-color: var(--subtle); }
.transcript input:focus-visible, input[type=datetime-local]:focus-visible, input[type=date]:focus-visible, input[type=time]:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.post { display: grid; gap: 6px; }
.post textarea { min-height: 64px; resize: vertical; font-size: var(--fs-sm); }
.post-head { display: flex; justify-content: space-between; align-items: center; }
.keys { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); color: var(--muted); font-size: var(--fs-xs); }
kbd { font-family: inherit; font-size: .72rem; background: var(--panel2); border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: var(--text); }
@media (min-width: 900px) {
  .studio { grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); }
  .studio-preview { position: sticky; top: var(--s4); }
}

/* ---------- phone review (review.html): one card, swipe / keys / big buttons ---------- */
main.review { max-width: 520px; padding-bottom: 150px; }
.rv-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.rv-top .back { margin: 0; }
.rv-progress { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.rv-bar { height: 4px; background: var(--panel2); border-radius: var(--r-pill); overflow: hidden; margin-bottom: var(--s3); border: 1px solid var(--line); }
.rv-bar span { display: block; height: 100%; background: var(--accent-strong); transition: width .25s; }
.rv-deck { position: relative; min-height: 280px; }
.rv-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; position: relative;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: transform .18s ease-out, opacity .18s; will-change: transform;
}
.rv-card.dragging { transition: none; cursor: grabbing; }
.rv-card.fly-right { transform: translateX(120%) rotate(12deg); opacity: 0; }
.rv-card.fly-left { transform: translateX(-120%) rotate(-12deg); opacity: 0; }
.rv-card .media { background: #000; display: flex; justify-content: center; align-items: center; min-height: 200px; }
.rv-card .media video { width: auto; max-width: 100%; max-height: 60vh; border-radius: 0; }
.rv-card .media .pending { padding: var(--s5); text-align: center; color: var(--muted); display: grid; gap: var(--s2); justify-items: center; }
.rv-card .body { padding: var(--s3) var(--s4) var(--s4); display: grid; gap: var(--s2); }
.rv-card h2 { margin: 0; font-size: var(--fs-md); }
.rv-stamp { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.rv-stamp span {
  position: absolute; top: 18px; font-family: 'Arial Black', system-ui, sans-serif; font-size: 1.5rem; letter-spacing: .08em;
  padding: 2px 12px; border: 3px solid; border-radius: 8px; background: #000a;
}
.rv-stamp .keep { left: 16px; color: var(--ok); border-color: var(--ok); opacity: var(--keep, 0); transform: rotate(-12deg); }
.rv-stamp .skip { right: 16px; color: var(--error); border-color: var(--error); opacity: var(--skip, 0); transform: rotate(12deg); }
/* [qa8] The bar is fixed, so nothing in it may be wider than the screen (Spanish at 360 px cut "Conservar"
   and the hint off with no way to scroll to them): the columns can shrink (minmax(0, …)), labels wrap, and
   under 480 px Share is its icon (its name stays for screen readers), Skip takes the width its label needs and
   Keep the rest (German "Überspringen" broke in two in a fixed 1 : 1.4 split), at 14 px. Solid from where the buttons start, so
   the page behind doesn't show between them; the fade is only the padding above. */
.rv-actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); justify-items: center;
  padding: var(--s4) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--bg) var(--s4));
}
.rv-actions:empty { display: none; }
.rv-actions .row-actions { width: min(520px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); gap: var(--s2); }
.rv-actions .btn { min-height: 52px; font-size: var(--fs-md); min-width: 0; overflow-wrap: anywhere; }
.rv-hint { font-size: var(--fs-xs); color: var(--muted); text-align: center; max-width: min(520px, 100%); }
@media (max-width: 480px) {
  .rv-actions .row-actions { grid-template-columns: minmax(0, auto) auto minmax(0, 1fr); }
  .rv-actions .btn { padding-inline: var(--s3); gap: var(--s1); font-size: var(--fs-sm); }
  .rv-share .rv-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.rv-summary { text-align: center; display: grid; gap: var(--s3); justify-items: center; padding: var(--s5) 0; }
.rv-summary .icon { font-size: 2rem; line-height: 1; }
.rv-summary h2 { margin: 0; }
.rv-summary p { margin: 0; }
.rv-kept { display: grid; gap: var(--s2); width: 100%; text-align: left; }
.kept-row { display: flex; gap: var(--s3); align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s2); min-width: 0; }
.kept-row img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); background: #000; flex: none; }
.kept-row .grow { flex: 1; min-width: 0; }
.kept-row .name { font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* [qa8] On a phone the fixed bar sits over the end of the page: the footer keeps the bar's height free under
   its last line (review.html measures the bar into --rv-bar), so the © line and the language select stay
   reachable. */
@media (max-width: 560px) {
  main.review { padding-bottom: var(--s5); }
  main.review ~ .foot { padding-bottom: calc(var(--s6) + var(--rv-bar, 150px)); }
}
@media (min-width: 561px) {
  main.review { padding-bottom: var(--s7); }
  .rv-actions { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 40%); padding: var(--s4) 0 var(--s3); }
}
/* Results page: the review link is the primary action on a phone ([onboarding2] it lives in .vod-bar) */
.review-link .mob { display: none; }
@media (max-width: 560px) {
  .review-link .desk { display: none; }
  .review-link .mob { display: inline; }
}

/* ---------- "why this clip" chart (Studio trim + results lightbox) ---------- */
.why-chart { margin: 0; display: grid; gap: 6px; min-width: 0; }
.why-plot { position: relative; height: 160px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.why-plot.compact { height: 130px; }
.why-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.why-plot .base { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.why-plot .audio, .why-plot .chat { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.why-plot .audio { stroke: var(--chart-2); }
.why-plot .chat { stroke: var(--accent); }
.why-window { position: absolute; top: 0; bottom: 0; background: rgba(var(--accent-rgb), .12); border-left: 1px solid rgba(var(--accent-rgb), .5); border-right: 1px solid rgba(var(--accent-rgb), .5); }
.why-peak { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--accent); pointer-events: none; }
.why-peak span { position: absolute; bottom: 4px; left: 4px; font-size: .68rem; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.why-msg {
  position: absolute; font-size: var(--fs-xs); line-height: 1.5; background: rgba(15, 15, 14, .92); border: 1px solid var(--line2); color: var(--text);
  border-radius: var(--r-pill); padding: 0 8px; white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.why-msg.mid { transform: translateX(-50%); }
.why-msg.right { transform: translateX(-100%); }
.why-msg b { color: var(--accent); font-weight: 700; }
.why-handle { position: absolute; top: 0; bottom: 0; width: 28px; margin-left: -14px; cursor: ew-resize; touch-action: none; z-index: 2; }
.why-handle::before { content: ''; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--focus); }
.why-handle::after { content: ''; position: absolute; left: 7px; top: 50%; width: 14px; height: 28px; margin-top: -14px; border-radius: 5px; background: var(--focus); box-shadow: 0 0 0 2px var(--panel2); }
.why-handle.dragging::after, .why-handle:hover::after { background: #fff; }
.why-handle:focus-visible { outline: none; }
.why-handle:focus-visible::after { box-shadow: 0 0 0 2px var(--panel2), 0 0 0 4px var(--focus); }
.why-axis { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.why-chart figcaption { font-size: var(--fs-sm); color: var(--muted); }
.why-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; margin-right: 6px; font-size: var(--fs-xs); }
.why-legend .sw { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.why-legend .sw.chat { background: var(--accent); }
.why-legend .sw.audio { background: var(--chart-2); }
.why-legend .sw.clip { height: 10px; background: rgba(var(--accent-rgb), .25); border: 1px solid rgba(var(--accent-rgb), .6); }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.plan { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); position: relative; }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.plan .tag { position: absolute; top: -10px; left: var(--s5); background: var(--bg); padding: 0 6px; color: var(--accent); }
.plan .price { font-size: 2.2rem; font-weight: 600; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: var(--fs-md); color: var(--muted); font-weight: 400; }
.plan ul { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 6px; flex: 1; align-content: start; font-size: var(--fs-sm); } /* [ux8] short lists stay tight at the top; the buttons still line up at the bottom */
/* [annual] Monthly / Yearly chips above the plans, and the "2 months free · $8.33 a month" line under a yearly price */
.interval-toggle { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin: var(--s5) 0 0; }
.interval-toggle[hidden] { display: none; }
.interval-toggle .chip { min-height: 40px; padding: 8px 16px; }
.interval-toggle .pill { margin-left: 2px; }
.plan .per-year { margin: calc(-1 * var(--s1)) 0 0; line-height: 1.5; }
.plan .per-year .pill { vertical-align: 1px; }
/* [plans2] "Everything in Pro, plus:" and only what's new (lib/plans.js adds); the rest behind "See N more" in the card */
.plan .plan-list { flex: 1; display: grid; gap: var(--s2); align-content: start; }
.plan .plan-list ul { flex: none; padding-left: 0; padding-inline-start: 18px; }
.plan .plan-builds { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.plan .plan-more > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 500; color: var(--accent); min-height: 32px; display: inline-flex; align-items: center; gap: var(--s1); }
.plan .plan-more[open] > summary { margin-bottom: var(--s2); }
.plan .plan-more > summary::-webkit-details-marker { display: none; }
.plan .plan-more > summary { list-style: none; }
.plan .plan-more > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur); margin-inline-start: 4px; }
.plan .plan-more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
/* [plans2] "Compare every feature": collapsed under the cards; the table scrolls inside its own box, row names stay put */
.plan-compare { margin-top: var(--s6); }
.plan-compare[hidden] { display: none; }
.plan-compare > summary { cursor: pointer; list-style: none; display: flex; justify-content: center; align-items: center; gap: var(--s2); min-height: 44px; padding: var(--s2) var(--s4); font-weight: 600; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-md); }
.plan-compare > summary::-webkit-details-marker { display: none; }
.plan-compare > summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform var(--dur); }
.plan-compare[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.plan-compare[open] > summary { margin-bottom: var(--s4); }
.plan-compare .table-wrap { position: relative; } /* keeps the .sr-only cells (position: absolute) inside the scroll box */
.plan-table { width: 100%; min-width: 760px; } /* fills the box on a desktop; below ~800 px it scrolls inside its box */
.plan-table th, .plan-table td { text-align: start; }
.plan-table th[scope=row], .plan-table thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--panel); min-width: 140px; max-width: 200px; color: var(--text); font-weight: 500; box-shadow: inset -1px 0 0 var(--line); }
.plan-table thead th:first-child { background: var(--panel3); color: var(--muted); font-weight: 600; }
.plan-table td { font-variant-numeric: tabular-nums; }
[dir=rtl] .plan-table th[scope=row], [dir=rtl] .plan-table thead th:first-child { box-shadow: inset 1px 0 0 var(--line); }
.plan-compare .compare-hint { text-align: center; margin: 0 0 var(--s2); }
@media (min-width: 800px) { .plan-compare .compare-hint { display: none; } }
.plan-table td svg { width: 18px; height: 18px; color: var(--accent); vertical-align: -4px; }

/* ---------- landing (public/index.html) ---------- */
.landing main { padding-top: var(--s4); }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-xs); font-weight: 600; margin: 0 0 var(--s3); }
/* .hero: centred on app pages (pricing, logged-out dashboard); left-aligned, two columns on the landing pages */
.hero { padding: var(--s5) 0 var(--s6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); text-align: center; }
.hero h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin: 0 auto var(--s4); max-width: 14ch; text-wrap: balance; }
.hero .sub { color: var(--muted); font-size: var(--fs-lg); max-width: 56ch; margin: 0 auto var(--s5); line-height: 1.55; }
.hero .cta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: center; }
.hero .reassure { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--s3); }
.landing .hero { text-align: left; }
.landing .hero h1, .landing .hero .sub { margin-left: 0; margin-right: 0; }
.landing .hero .cta { justify-content: flex-start; }
.hero-copy { max-width: 640px; }
.hero-paste { display: flex; gap: var(--s2); max-width: 600px; }
.hero-paste input { flex: 1; min-width: 0; padding: 13px 16px; font-size: var(--fs-md); border-radius: var(--r-md); background: var(--panel); }
.hero-paste .btn { flex: none; }
.hero #hero-status { min-height: 0; margin-top: var(--s2); }
.hero #hero-status:empty { display: none; }
@media (max-width: 560px) { .hero-paste { flex-direction: column; } .hero-paste .btn { width: 100%; } }
/* trust strip: five plain promises, stroke icons, no badges */
.trust { list-style: none; margin: var(--s5) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--line); max-width: 640px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s3) var(--s4); color: var(--muted); font-size: var(--fs-sm); }
.trust li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.trust .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.trust strong { color: var(--text); font-weight: 600; }
.trust-link { color: var(--muted); font-size: var(--fs-sm); margin: var(--s3) 0 0; }
.trust-link a { color: var(--muted); text-decoration: none; }
.trust-link a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .landing .hero:not(.single) { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); align-items: center; gap: var(--s7); padding-top: var(--s6); }
}
.hero.single { padding-bottom: var(--s5); }
.hero.single .hero-copy { max-width: 720px; }
.hero.single h1 { max-width: 18ch; }

/* the product frame: a window that holds real components with placeholder frames (no footage) */
.product { margin: 0; display: grid; gap: var(--s3); min-width: 0; }
.product-bar { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s4); background: var(--panel3); border: 1px solid var(--line2); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.product-bar .dots { display: inline-flex; gap: 5px; }
.product-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); }
.product-body { background: var(--panel); border: 1px solid var(--line2); border-radius: 0 0 var(--r-lg) var(--r-lg); padding: var(--s4); display: grid; gap: var(--s4); box-shadow: var(--shadow); }
.product-bar + .product-body { margin-top: calc(-1 * var(--s3)); }
.product figcaption { text-align: center; }
.mock-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: var(--fs-sm); color: var(--muted); }
.mock-head strong { color: var(--text); }
.mock-head .pill { gap: 4px; }
/* [ux8] Outlined: it's a picture of a button, and a solid gold one right under the real "Clip my VOD" read as a second CTA on phones. */
.mock-btn { margin-inline-start: auto; font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line2); color: var(--text); }
.mock-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.mock-clip { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.mock-clip.episode { grid-column: 1 / -1; }
.mock-meta { padding: var(--s3); display: grid; gap: 8px; align-content: start; min-width: 0; }
.mock-title { font-weight: 600; font-size: var(--fs-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-meta .badges { gap: 4px; }
.mock-meta .director-note { font-size: var(--fs-xs); }
.mock-curve { width: 100%; height: 44px; display: block; }
.mock-curve .c { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.mock-curve .a { fill: none; stroke: var(--chart-2); stroke-width: 1.5; opacity: .8; }
.mock-curve .w { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: 1; }
.mock-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--muted); }
.mock-chapters .time { display: inline-block; min-width: 44px; color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; }
.mock-clip.episode .ep-bar { height: 18px; }
/* placeholder frames: abstract on purpose — a grey "gameplay" area and a neutral camera band */
.mock-frame { position: relative; background: #0a0a09; overflow: hidden; }
.mock-frame.tall { aspect-ratio: 9 / 12; }
.mock-frame.wide { aspect-ratio: 16 / 9; }
.mf-game { position: absolute; inset: 0; background: linear-gradient(160deg, #2a2824, #1a1916 60%, #131210); }
.mf-game::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 255, 255, .025) 14px 15px); }
.mf-cam { position: absolute; left: 0; right: 0; top: 0; height: 34%; background: #1f1e1b; border-bottom: 1px solid var(--accent-line); z-index: 1; }
.mf-cam i { position: absolute; left: 50%; bottom: 0; width: 46%; height: 70%; transform: translateX(-50%); border-radius: 40% 40% 0 0 / 60% 60% 0 0; background: #33312c; }
.mf-cam i::before { content: ''; position: absolute; left: 50%; top: -34%; width: 44%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #423f38; }
.mf-cam ~ .mf-game { top: 34%; }
.mf-hook { position: absolute; left: 8%; right: 8%; top: 37%; z-index: 2; text-align: center; font-family: 'Arial Black', Arial, sans-serif; font-weight: 900; text-transform: uppercase; font-size: .62rem; color: #111; background: #fff; padding: 3px 4px; border-radius: 3px; }
.mf-cap { position: absolute; left: 6%; right: 6%; bottom: 14%; z-index: 2; text-align: center; font-family: 'Arial Black', Arial, sans-serif; font-weight: 900; text-transform: uppercase; font-size: .9rem; letter-spacing: .01em; color: #fff; -webkit-text-stroke: .04em #000; paint-order: stroke fill; text-shadow: 0 2px 0 #000; }
.mf-cap b { color: #ffd400; }
.mf-cap.small { font-size: .75rem; bottom: 10%; }
.mf-cap.static { position: static; display: inline-block; font-size: 1.1rem; }
@media (max-width: 560px) { .mock-meta .director-note { display: none; } .product-body { padding: var(--s3); } }

/* sections */
.land { padding: var(--s7) 0; border-top: 1px solid var(--line); }
.land h2 { text-align: center; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; margin-bottom: var(--s2); text-wrap: balance; }
.land .lead { text-align: center; color: var(--muted); max-width: 56ch; margin: 0 auto var(--s6); }
.center { text-align: center; margin-top: var(--s4); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s4); }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); display: grid; gap: var(--s2); align-content: start; }
.step .n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); letter-spacing: .08em; font-weight: 600; }
.step h3 { margin: var(--s1) 0 0; }
.step p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s4); }
.offer { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); display: grid; gap: var(--s2); grid-template-rows: auto auto 1fr auto; min-width: 0; }
.offer > .icon { width: 24px; height: 24px; color: var(--accent); margin-bottom: var(--s1); }
.offer h3 { margin: 0; }
.offer p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }
.offer-vis { margin-top: var(--s3); min-height: 40px; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.offer-vis .ep-bar { width: 100%; height: 14px; }
.offer-vis.formats i { display: block; border: 2px solid var(--muted); border-radius: 3px; background: var(--accent-soft); }
.offer-vis.formats .f-wide { width: 48px; height: 27px; }
.offer-vis.formats .f-tall { width: 22px; height: 39px; border-color: var(--accent); }
.offer-vis.formats .f-square { width: 30px; height: 30px; }
.offer-vis.formats .f-portrait { width: 28px; height: 35px; }
.offer-vis.caption { background: #0a0a09; border-radius: var(--r-sm); justify-content: center; padding: var(--s3); }
.offer-vis .pill.director { font-size: var(--fs-xs); }
/* "How we pick clips": the two signals over a stream, with the picked peaks */
.why { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.curve { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: grid; gap: var(--s3); min-width: 0; }
.curve svg { width: 100%; height: auto; display: block; }
.curve .grid line { stroke: var(--line); stroke-width: 1; }
.curve .pick { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: 1; }
.curve .audio { fill: none; stroke: var(--chart-2); stroke-width: 2; stroke-linejoin: round; opacity: .85; }
.curve .chat { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.curve .marks circle { fill: var(--accent-strong); }
.curve .marks text { fill: var(--accent-ink); font-size: 11px; font-weight: 600; text-anchor: middle; font-family: var(--font); }
.curve .legend text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.curve .legend .chat, .curve .legend .audio { stroke-width: 3; }
.curve figcaption { color: var(--muted); font-size: var(--fs-sm); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.facts li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3) var(--s4); font-size: var(--fs-sm); color: var(--muted); }
.facts strong { color: var(--text); }
@media (min-width: 820px) { .why { grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr); } }
.teaser { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); max-width: 800px; margin: 0 auto; }
.teaser .t { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5) var(--s4); text-align: center; display: grid; gap: 6px; }
.teaser .t strong { font-size: var(--fs-md); font-weight: 600; }
.teaser .t.featured { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.teaser .t .muted { font-size: var(--fs-xs); }
.teaser .price { font-size: 2rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.teaser .price small { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); letter-spacing: 0; }
.cancel-line { text-align: center; color: var(--muted); font-size: var(--fs-sm); max-width: 60ch; margin: var(--s4) auto 0; }
.stats { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); justify-content: center; margin-top: var(--s5); color: var(--muted); font-size: var(--fs-sm); }
.stats strong { display: block; color: var(--text); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; }
/* FAQ: plain disclosure list */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: var(--s2); }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 var(--s4); }
.faq summary { cursor: pointer; font-weight: 600; padding: var(--s3) 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform var(--dur); flex: none; margin-right: 4px; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { color: var(--muted); margin: 0 0 var(--s4); font-size: var(--fs-sm); line-height: 1.55; }
/* community feed cards */
.card .sub .by { color: var(--text); text-decoration: none; }
.card .sub .votes { display: inline-flex; align-items: center; gap: 2px; }
.card .sub .votes .icon { width: 12px; height: 12px; }
.landing .cta-band { margin-top: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; background: transparent; padding: var(--s7) var(--s4) var(--s6); }
footer.foot { text-align: left; }

/* ---------- share page ---------- */
.media-box { background: #000; border-radius: var(--r-md); display: flex; justify-content: center; border: 1px solid var(--line); overflow: hidden; }
.media-box video { max-height: 75vh; width: auto; max-width: 100%; }
video { width: 100%; border-radius: var(--r-md); background: #000; max-height: 75vh; display: block; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s4); align-items: center; }
.clip-more { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s3); }
.clip-more:empty { display: none; }
.made-with { margin-top: var(--s6); padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; font-size: var(--fs-sm); color: var(--muted); }
.made-with a:not(.btn) { color: var(--text); }

/* ---------- responsive ---------- */
@media (max-width: 560px) {
  .drop { flex-direction: column; }
  .row { grid-template-columns: 1fr; }
  .nav-right .navlink { padding: 6px 2px; }
  .nav-right .navlink.primary { display: none; }
  .menu-primary { display: grid; }
  .logo { font-size: var(--fs-lg); }
  .logo .word { white-space: nowrap; } /* "Stream Studio" must not wrap next to the button + avatar */
  .nav-right .btn { padding: 8px 12px; font-size: var(--fs-sm); }
  /* [qa8] logged out: the mark and one button fit on one row in every language ("Log in with Twitch" and
     "Pricing" made two rows, three in Spanish); Pricing is on the home page, the FAQ and in the footer */
  .nav-right .nav-pricing { display: none; }
  .nav-login .long { display: none; }
  .nav-login .short { display: inline; }
  .page-head .row-actions { width: 100%; }
  .clips-grid { grid-template-columns: 1fr; }
  .hero { padding-top: var(--s5); }
  .land { padding: var(--s5) 0; }
  .panel, form.panel { padding: var(--s4); }
}

@media (max-width: 400px) { .logo { font-size: var(--fs-md); } header.top { gap: var(--s2); } }

/* footer: who makes it · product · community · legal, then the © / non-affiliation line + language slot */
.foot { max-width: 1200px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s6); display: grid; gap: var(--s5); font-size: var(--fs-sm); color: var(--muted); border-top: 1px solid var(--line); }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s5) var(--s4); }
.foot-who { grid-column: span 1; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot-col { display: grid; gap: 6px; align-content: start; justify-items: start; }
.foot-col strong { color: var(--text); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; font-weight: 600; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: var(--fs-md); }
.foot-brand .mark { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; }
.foot-brand .mark svg { width: 22px; height: 22px; display: block; }
.foot-brand .word b { font-weight: 600; }
.foot-tagline { color: var(--muted); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2) var(--s4); border-top: 1px solid var(--line); padding-top: var(--s4); }
.foot-line { font-size: var(--fs-xs); }
.foot-lang:empty { display: none; }

/* ---------- legal pages (content owned by the platform teammate; only the styling lives here) ---------- */
main.legal { max-width: 760px; line-height: 1.6; }
main.legal h1 { margin-bottom: var(--s2); }
main.legal h2 { margin-top: var(--s6); }
main.legal ul, main.legal ol { padding-left: 22px; display: grid; gap: var(--s2); margin: 0 0 var(--s3); }
main.legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--s3) 0; }
main.legal th, main.legal td { text-align: left; vertical-align: top; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
main.legal td:first-child { color: var(--text); }
main.legal th { color: var(--muted); font-weight: 600; }
main.legal code { background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: .9em; }
main.legal form.panel { margin: var(--s4) 0; }
main.legal form.panel label { color: var(--text); }
main.legal form.panel label.check { align-items: flex-start; color: var(--text); font-size: var(--fs-sm); }
main.legal textarea { min-height: 90px; resize: vertical; }
/* owner-to-fill placeholders in the legal text; styled so they can't be missed before launch */
.fill { background: var(--warn-soft); color: var(--warn); padding: 0 4px; border-radius: 4px; }

/* ---------- brand page (public/brand.html): the press kit ---------- */
.brand-section { margin-top: var(--s6); display: grid; gap: var(--s3); }
.brand-section h2 { margin: 0; }
.brand-about { color: var(--muted); line-height: 1.6; max-width: 70ch; }
.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s3); }
.brand-grid.marks { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.brand-tile { margin: 0; border: 1px solid var(--line2); border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-rows: 1fr auto; }
.brand-tile img { display: block; margin: auto; max-width: 100%; height: auto; padding: var(--s5); }
.brand-grid.marks img { padding: var(--s4); box-sizing: content-box; } /* the width/height attributes set each sample's size; the padding sits around it, so the 16 px sample is 16 px */
.brand-tile.dark { background: var(--bg); }
.brand-tile.light { background: #fff; }
.brand-tile figcaption { font-size: var(--fs-xs); color: var(--muted); padding: var(--s2) var(--s3); border-top: 1px solid var(--line2); background: var(--panel); display: flex; justify-content: space-between; gap: var(--s2); }
.downloads a { color: var(--accent); text-decoration: none; font-weight: 500; }
.downloads a:hover { text-decoration: underline; }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.swatches li { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: var(--s3); row-gap: 2px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); font-size: var(--fs-sm); }
.swatches .sw { grid-row: span 3; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line2); }
.swatches code { font-size: var(--fs-xs); width: max-content; }
.swatches .muted { font-size: var(--fs-xs); }
.type-sample { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); display: grid; gap: var(--s3); }
.type-sample p { margin: 0; }
.t-display { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.t-body { color: var(--muted); }
.t-mono { font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--fs-sm); }
.dodont { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s3); }
.dodont ul { margin: 0; padding: var(--s4) var(--s4) var(--s4) 36px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); display: grid; gap: var(--s2); font-size: var(--fs-sm); color: var(--muted); }
.dodont li::marker { color: var(--ok); }
.dodont .dont li::marker { color: var(--error); }
.verdict { display: grid; gap: var(--s2); margin-top: var(--s3); }
.verdict:empty { display: none; }

/* ---------- changelog (public/changelog.html): dated entries, newest first ---------- */
.log { display: grid; gap: var(--s4); }
.log-entry { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--line); }
.log-entry time { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; padding-top: 2px; }
.log-body { display: grid; gap: var(--s2); }
.log-body h2 { margin: 0; font-size: var(--fs-lg); }
.log-body p { margin: 0; color: var(--muted); font-size: var(--fs-sm); display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; }
.log-body .pill { flex: none; }
@media (max-width: 560px) { .log-entry { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } }

/* ---------- admin ---------- */
main.admin h2 { margin-top: var(--s6); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
main.admin h2.first { margin-top: var(--s2); }
.adm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); margin: var(--s3) 0 var(--s4); }
.adm-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); display: grid; gap: 4px; }
.adm-tile .n { font-size: var(--fs-xl); font-weight: 800; line-height: 1.1; }
.adm-tile .l { color: var(--muted); font-size: var(--fs-sm); }
.adm-tile.bad { border-color: var(--error); }
.adm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.adm-table th, .adm-table td { text-align: left; padding: var(--s2) 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm-table th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.adm-table .muted { font-size: var(--fs-xs); }
.adm-err { color: var(--error); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-xs); white-space: pre-wrap; word-break: break-word; }
.adm-report { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.adm-report.closed { opacity: .6; }
.adm-report .head { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.adm-report pre { white-space: pre-wrap; word-break: break-word; background: var(--panel2); padding: var(--s2) var(--s3); border-radius: var(--r-sm); margin: 0; font: inherit; font-size: var(--fs-sm); }
.adm-kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 10px; font-size: var(--fs-sm); }
.adm-kv b { color: var(--muted); font-weight: 600; }
.adm-search { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.adm-search input { flex: 1; }
@media (max-width: 560px) { .adm-kv { grid-template-columns: minmax(0, 1fr); } .adm-search { flex-direction: column; } }

/* ---------- [search] find a moment (public/search.js) + caption vocabulary / swear filter (studio) ---------- */
.find { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); margin-bottom: var(--s5); display: grid; gap: var(--s3); }
.find-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.find-head h2 { margin: 0; }
.find-form { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.find-form input[type=text] { flex: 1 1 260px; min-width: 0; }
.find-ai { align-items: center; font-size: var(--fs-sm); white-space: nowrap; }
.find-ai input { margin: 0; }
.find-coverage .link-btn { font-size: inherit; }
.find-upsell { color: var(--text); }
.find-upsell a { color: var(--accent); }
.find-status:empty { display: none; }
.find-results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.find-results:empty { display: none; }
.find-result { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); display: grid; gap: var(--s2); }
.find-top { display: flex; align-items: flex-start; gap: var(--s3); flex-wrap: wrap; }
.find-rank { width: 24px; height: 24px; border-radius: 50%; background: var(--panel3); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; display: inline-grid; place-items: center; flex: none; }
.find-what { flex: 1; min-width: 180px; }
.find-top .badges { display: flex; flex-wrap: wrap; gap: 4px; }
.find-snips { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-sm); }
.find-snip { display: flex; gap: var(--s2); align-items: baseline; min-width: 0; }
.find-snip .when { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; flex: none; min-width: 3.6em; }
.find-snip .who { flex: none; }
.find-snip .user { color: var(--accent); font-weight: 600; flex: none; }
.find-snip .text { overflow-wrap: anywhere; color: var(--text); }
.find-snip.chat .text { color: var(--muted); }
.find-snip mark { background: rgba(var(--accent-rgb), .22); color: var(--text); border-radius: 3px; padding: 0 2px; }
.clip-card.flash { outline: 2px solid var(--accent); outline-offset: 2px; transition: outline-color .3s; }
.vocab-box { display: grid; gap: var(--s2); }
.vocab-box textarea { min-height: 84px; font-size: var(--fs-sm); }
@media (max-width: 560px) { .find { padding: var(--s3); } .find-form .btn { flex: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Director (the AI judge): pick badge + notes, only on moments it scored ---------- */
.pill.director { color: var(--text); border-color: var(--accent-line); background: var(--accent-soft); font-weight: 600; cursor: help; }
.pill.director .director-mark { color: var(--accent); display: inline-flex; }
.pill.director .director-mark .icon { width: 13px; height: 13px; }
.director-note { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.director-note strong { color: var(--text); font-weight: 600; }
.director-note .director-kind { color: var(--accent); font-weight: 600; }
.director-claim { color: var(--muted); font-size: var(--fs-sm); margin: var(--s3) 0 0; }
.director-claim strong { color: var(--text); }

/* ---------- YouTube episodes (public/episodes.js): the card on the results page + episode.html ---------- */
.ep-card { display: grid; gap: var(--s3); }
.ep-head h2 { margin: 0 0 4px; }
.ep-head p { margin: 0; }
.ep-existing:empty { display: none; }
.ep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.ep-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3); background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-sm); }
.ep-item .grow { flex: 1; min-width: 160px; }
.ep-form { display: grid; gap: var(--s3); }
.ep-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s2); }
.ep-kind { display: grid; gap: 2px; justify-items: start; text-align: left; padding: var(--s3); cursor: pointer; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text); font: inherit; }
.ep-kind:hover { border-color: var(--line2); }
.ep-kind.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ep-kind .muted { font-size: var(--fs-xs); }
.ep-options { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2); }
.ep-options summary { cursor: pointer; padding: var(--s3); font-size: var(--fs-sm); list-style: none; display: flex; flex-wrap: wrap; gap: 4px var(--s2); align-items: center; }
.ep-options summary::-webkit-details-marker { display: none; }
.ep-options summary::before { content: '▸'; color: var(--muted); margin-right: 2px; }
.ep-options[open] summary::before { content: '▾'; }
.ep-options-body { display: grid; gap: var(--s4); padding: 0 var(--s3) var(--s3); }
.ep-estimate { margin: 0; }
.ep-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s2) var(--s4); }
.ep-checks .check { font-size: var(--fs-sm); }
.ep-nudge { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.ep-nudge strong { color: var(--text); }
/* episode.html */
main.episode { max-width: 900px; }
.ep-plan { display: grid; gap: var(--s4); margin-top: var(--s4); }
.ep-plan-title { margin: var(--s3) 0 0; }
.ep-totals { display: grid; gap: 6px; }
.ep-total-line { font-size: var(--fs-md); }
.warn-text { color: var(--warn); }
.bar.over > span { background: var(--warn); }
.warn-text > .icon { margin-right: .3em; vertical-align: -.12em; }
.ep-bar-wrap { display: grid; gap: 4px; }
.ep-bar { position: relative; height: 28px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.ep-bar-seg { position: absolute; top: 0; bottom: 0; }
.ep-bar-seg.keep { background: var(--accent-strong); }
.ep-bar-seg.cut { background: repeating-linear-gradient(135deg, var(--panel3) 0 6px, var(--panel) 6px 12px); }
.ep-axis { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.ep-section .hint { margin: 0; }
.ep-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.ep-row { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s2) var(--s3); display: grid; gap: var(--s2); }
.ep-row.open { border-color: var(--line2); }
.ep-row-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: var(--fs-sm); }
.ep-keep { font-size: var(--fs-sm); align-items: center; }
.ep-keep input { margin: 0; }
.ep-time { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ep-len { color: var(--muted); white-space: nowrap; }
.ep-reason { min-width: 160px; color: var(--muted); }
.ep-reason strong { color: var(--text); }
.ep-row.cut .ep-reason strong { color: var(--text); }
.ep-adjust { display: grid; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.ep-adjust .trim-row { grid-template-columns: 110px 1fr; }
.ep-adjust .trim-row .time { display: inline; min-width: 0; color: var(--text); margin-left: 4px; }
.ep-adjust .fit-row { gap: 6px; flex-wrap: nowrap; }
.ep-adjust .chip { padding-left: 10px; padding-right: 10px; }
.ep-adjust p { margin: 0; }
.ep-savebar { margin-top: var(--s2); }
.ep-savebar .status:empty { display: none; }
.ep-done { display: grid; gap: var(--s3); margin: var(--s3) 0; }
.ep-done .media-box video { max-height: 60vh; }
.ep-chapter-list { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; font-size: var(--fs-sm); }
.ep-chapter-list .time { display: inline-block; min-width: 64px; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.ep-chapters { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-sm); resize: vertical; }
.ep-publish:empty { display: none; }
@media (max-width: 560px) {
  .ep-row-main { gap: 6px var(--s2); }
  .ep-reason { flex-basis: 100%; }
  .ep-bar { height: 22px; }
  .ep-adjust .trim-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- installable app: "Install app" bar (public/pwa.js, phones only, dismissible) ---------- */
.install-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0 0 var(--s3); padding: var(--s3);
  background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-md); font-size: var(--fs-sm);
}
.install-bar .grow { flex: 1 1 200px; min-width: 0; }
.install-bar strong { display: block; }
.install-bar .sub { color: var(--muted); }
.install-bar .share-glyph { vertical-align: -3px; color: var(--text); }
/* in the installed app there's no browser chrome: keep the nav clear of the status bar / notch */
@media (display-mode: standalone) {
  header.top { padding-top: max(var(--s4), env(safe-area-inset-top, 0px)); }
}

/* ---------- touch screens: every control is at least 44×44 px (Apple HIG / WCAG 2.5.5) ----------
   Desktop keeps the compact sizes; inline links inside sentences are exempt. 16px text in fields
   stops iOS zooming the page when a field gets focus. */
@media (pointer: coarse) {
  .btn, .chip, .navlink, .menu-item, .link-btn:not(p .link-btn), .back, .logo, summary,
  .foot-col a, .clip-more a, .actions a:not(.btn), .invite-card a, .trust-link a, .picker-note a, .vod-head .meta a, .linkrow > a,
  input[type=text], input[type=url], input[type=number], input[type=search], input[type=email],
  input[type=datetime-local], input[type=date], input[type=time], select, .title-input, .transcript input {
    min-height: 44px;
  }
  .btn, .chip, .link-btn:not(p .link-btn), .menu-item { min-width: 44px; }
  .navlink, .back, .logo, .foot-col a, .clip-more a, .actions a:not(.btn), .invite-card a, .trust-link a, .picker-note a, .vod-head .meta a, .linkrow > a, .link-btn:not(p .link-btn) { display: inline-flex; align-items: center; }
  .foot-col a { min-width: 44px; }
  .btn.small { padding: 10px 14px; }
  .chip, .format-tabs .chip { padding: 10px 14px; }
  summary { display: flex; align-items: center; }
  .avatar-btn { width: 44px; height: 44px; }
  .toast .x { min-width: 44px; min-height: 44px; margin: -12px -12px -12px 0; }
  .check { min-height: 44px; align-items: center; }
  .check:has(.sub) { align-items: flex-start; }
  .check input, .cam-choice input[type=radio], .radio-list input[type=radio] { width: 22px; height: 22px; margin: 0; }
  .check:has(.sub) input { margin-top: 2px; }
  .reel-seg { min-height: 44px; min-width: 44px; }
  .why-handle { width: 44px; margin-left: -22px; }
  .why-handle::before { left: 21px; }
  .why-handle::after { left: 15px; }
  .foot-col { gap: 0; }
  input, select, textarea, .transcript input, .post textarea, select.add-format { font-size: 16px; }
}
/* ---- Atlas: Pro trial (nav chip, day-6 banner, pricing) and the "Clip that" settings ---- */
.trial-chip { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); border: 1px solid var(--accent-line); border-radius: var(--r-pill); padding: 3px 10px; text-decoration: none; white-space: nowrap; }
.trial-chip:hover { color: var(--text); border-color: var(--accent); }
.trial-banner { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; max-width: 1100px; margin: var(--s2) auto 0; padding: var(--s2) var(--s4); background: var(--panel); border: 1px solid var(--accent); border-radius: var(--r-md); font-size: var(--fs-sm); }
.trial-banner > span { flex: 1; min-width: 220px; }
.trial-banner .x { background: none; border: 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0 2px; }
.plan .trial-note { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s2); text-align: center; }
.hook-steps { margin: var(--s2) 0 0; padding-left: 1.2em; font-size: var(--fs-sm); color: var(--muted); display: grid; gap: 4px; }
.hook-steps code, .hook-url code { word-break: break-all; }
.hook-url { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s2) var(--s3); font-size: var(--fs-sm); }
@media (max-width: 560px) { .trial-chip { display: none; } .trial-banner { margin: var(--s2) var(--s3) 0; } }
.cost { margin-top: 6px; min-height: 1.2em; }
.cost:empty { min-height: 0; margin-top: 0; } /* [onboarding] */
.warn-text { color: var(--warn); }
.menu-usage { padding: 0 12px 8px; font-size: var(--fs-xs); color: var(--muted); }
.vod-window { border-color: var(--accent); }
/* ---- end Atlas ---- */
/* touch: the trial banner's close button gets the same 44px target as the toasts' */
@media (pointer: coarse) { .trial-banner .x { min-width: 44px; min-height: 44px; } }
/* [home] The short home page (public/index.html, <main class="home">): sections without a lead line keep
   room under their heading; the closing band's one quiet link (pricing). */
.home .land > h2 + .steps, .home .land > h2 + .offers { margin-top: var(--s5); }
.home .cta-band h2 { margin-bottom: var(--s4); }
.home .cta-band .cta-more { margin: var(--s4) auto 0; font-size: var(--fs-sm); }
.home .cta-band .cta-more a { color: var(--muted); text-underline-offset: 3px; }
.home .cta-band .cta-more a:hover { color: var(--text); }
/* Phones: the brand block gets its own row, so the support address never runs into the Product column. */
@media (max-width: 719px) { .foot-who { grid-column: 1 / -1; } }
/* ---- end [home] ---- */
/* [ux7] An outlined button is filled with the card's own colour (--panel), so its border is the only edge it has,
   and per-clip / per-row actions are outlined now (one gold button per area). So that edge is --field-line, like a
   text field's: 3:1 on bg, panel, panel2 and panel3 (tools/contrast.js), where --line2 was 1.5:1. Hover keeps
   the lighter --subtle (.btn.secondary:hover wins on specificity). */
.btn.secondary { border-color: var(--field-line); }
/* ---- end [ux7] ---- */

/* ---- [brief] the creative brief page (public/brief.html) ---- */
.brief-form { display: grid; gap: var(--s4); }
/* grid items default to min-width: auto, so a long channel name in the select (or a long chip row) widened the
   whole card past a 360 px screen: let them shrink to the column instead */
.brief-page .settings > *, .brief-form > .section, .brief-page .section > * { min-width: 0; }
.brief-for-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.brief-for-row .brief-for-label { display: inline; color: var(--text); font-size: var(--fs-md); font-weight: 600; }
.brief-for-row select { flex: 1 1 240px; width: auto; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.brief-add { display: grid; gap: var(--s2); }
.brief-add select { width: auto; flex: none; }
.brief-note { display: grid; gap: var(--s1); }
.brief-note textarea { min-height: 64px; resize: vertical; font-size: var(--fs-sm); }
.brief-count { justify-self: end; font-variant-numeric: tabular-nums; }
.brief-token { cursor: default; padding-inline-end: 4px; }
.brief-x { display: inline-grid; place-items: center; min-width: 28px; min-height: 28px; margin: -4px 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); font: inherit; font-size: var(--fs-md); line-height: 1; cursor: pointer; }
.brief-x:hover { color: var(--text); background: var(--panel3); }
.brief-tokens:empty { display: none; }
.brief-empty { border: 1px dashed var(--line2); border-radius: var(--r-lg); padding: var(--s4); display: grid; gap: var(--s1); }
.brief-empty strong { color: var(--text); font-size: var(--fs-lg); font-weight: 600; }
.brief-empty p, .brief-how { margin: 0; color: var(--muted); }
.brief-list { margin: 0; padding-inline-start: 1.2em; color: var(--text); display: grid; gap: var(--s1); font-size: var(--fs-sm); }
/* the save bar sits after the form, and pins to the bottom of the screen once something is unsaved */
.brief-bar { position: static; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s2); padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.brief-bar .grow { flex: 1; }
.brief-bar.pinned { position: sticky; }
@media (max-width: 480px) { .brief-bar { padding: var(--s2) var(--s3); } .brief-bar .grow { display: none; } .brief-bar .status:not(:empty) { flex-basis: 100%; } .brief-bar .btn:not(.small) { flex: 1; } .brief-for-row select { flex-basis: 100%; } }
@media (pointer: coarse) { .brief-x { min-width: 44px; min-height: 44px; } }
/* ---- end [brief] ---- */

/* ---- [managed] our editors' review of a clip (app.js reviewNote), the pricing page's "Done for you" ---- */
.review-note { display: grid; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--line2); border-radius: var(--r-md); background: var(--panel2); margin: var(--s2) 0; }
.review-note .review-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.review-note .review-msg { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-note textarea { width: 100%; }
.review-note .row-actions { align-items: center; }
.plans.managed-row { grid-template-columns: minmax(0, 520px); justify-content: center; }
.managed-form { display: grid; gap: var(--s3); }
.managed-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* ---- end [managed] ---- */
/* [feedback] "Good pick?" thumbs + reason chips (app.js feedbackThumbs): quiet outline buttons, gold only as the
   selected state's line and tint (never a gold fill); 36 px targets; wraps on a 360 px phone. */
.fb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.fb.fb-center { justify-content: center; }
.fb-q { margin-inline-end: var(--s1); }
.fb-thumb {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; font: inherit; cursor: pointer;
  background: transparent; border: 1px solid var(--line2); border-radius: var(--r-pill); color: var(--muted);
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.fb-thumb:hover { color: var(--text); border-color: var(--subtle); }
.fb-thumb.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.fb-thumb .icon { width: 18px; height: 18px; vertical-align: 0; }
.fb-reasons { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.fb.fb-center .fb-reasons { justify-content: center; }
.fb-reasons .chip { padding: 4px 10px; font-size: var(--fs-xs); }
.fb-thanks { flex-basis: 100%; }
.fb.fb-center .fb-thanks { text-align: center; }
/* [review-ux] "Skipped. Why?" above Keep / Skip for 3 s after a Skip (review.html): the bar grows upward, the card
   stays put; the chips wrap on a phone and are 36 px tall to tap. */
.rv-why { width: min(520px, 100%); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s1); animation: toast-in .18s var(--ease); }
.rv-why .chip { padding: 6px 10px; font-size: var(--fs-xs); min-height: 36px; }
/* [review-ux] "Rate your clips": the end card on the VOD page (app.js rateClipsCard). One gold rule, like a notice;
   gold only on the chosen thumb and the progress; 44 px rows for thumbs on a phone, the title clips with an ellipsis. */
.rate-card { display: grid; gap: var(--s3); background: var(--panel); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: var(--s3) var(--s4); margin: var(--s4) 0 0; }
.rate-card h3 { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: var(--fs-md); }
.rate-card h3 .icon { color: var(--accent); margin: 0; flex: none; }
.rate-card p { margin: 0; }
.rate-head { display: grid; gap: var(--s1); }
.rate-list { display: grid; gap: var(--s2); }
.rate-row, .rate-ask { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.rate-ask { flex-wrap: wrap; } /* the moment just thumbed down: its thumbs widget ("What was off?" + chips) on its own line under the title */
.rate-ask .fb { flex-basis: 100%; padding-inline-start: calc(44px + var(--s2)); }
.rate-thumb { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: var(--r-sm); background: #000; }
.rate-title { flex: 1; min-width: 0; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rate-votes { display: inline-flex; align-items: center; gap: var(--s1); flex: none; min-height: 44px; }
.rate-votes .fb-thumb { width: 44px; height: 44px; }