/* Vanish · F · Pure White (v2, Apple HIG pass)
   Content first: the video and its timeline lead, chrome recedes into white,
   hairlines and space. One tint (--accent) marks only what is selected or
   being edited. Every colour, font, size, radius and shadow is a token here,
   so a single line switches the tint (e.g. back to the brand pink #D61F57). */

:root {
  /* ---- tint ---------------------------------------------------------- */
  --accent: #1d1d1f;               /* monochrome: Apple label black. Brand pink: #D61F57 */
  --accent-soft: rgba(0, 0, 0, 0.06); /* selected fills */
  --on-accent: #ffffff;            /* text and icons on --accent */
  --accent-hover: color-mix(in srgb, var(--accent) 86%, #fff);
  --focus: color-mix(in srgb, var(--accent) 62%, transparent);

  /* ---- overlays drawn ON the video (must read on dark and light footage) */
  --overlay: #ffffff;
  --overlay-ring: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
  --overlay-chip: rgba(255, 255, 255, 0.88);

  /* ---- HIG neutrals (light) ------------------------------------------ */
  --bg: #ffffff;
  --bg-2: #f5f5f7;                      /* grouped / secondary background */
  --separator: rgba(0, 0, 0, 0.08);     /* hairlines */
  --fill: rgba(120, 120, 128, 0.12);    /* control fill */
  --fill-thin: rgba(120, 120, 128, 0.08);
  --fill-thick: rgba(120, 120, 128, 0.16);
  --label: #1d1d1f;
  --label-2: rgba(60, 60, 67, 0.72);    /* HIG secondaryLabel is .60; raised to .72 for WCAG AA at 11–13px (4.7:1) */
  --label-3: rgba(60, 60, 67, 0.3);     /* tertiary: disabled and decorative only */
  --ok: #248a3d;                        /* status dot only */
  --danger: #d70015;                    /* errors only */
  --danger-soft: rgba(215, 0, 21, 0.06);
  --scrim: rgba(0, 0, 0, 0.2);          /* sheet backdrop */

  /* ---- type ---------------------------------------------------------- */
  --font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-title: 17px;     /* sheet title (macOS Title 2) */
  --fs-headline: 13px;  /* section headers, 600 */
  --fs-body: 13px;
  --fs-callout: 12px;
  --fs-footnote: 11px;
  --fs-caption: 10px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---- shape --------------------------------------------------------- */
  --r-1: 6px;   /* controls, menu rows */
  --r-2: 10px;  /* menus, tiles, filmstrip */
  --r-3: 14px;  /* viewport */
  --r-4: 20px;  /* sheet */
  --control-h: 28px;
  --shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06), 0 14px 36px -8px rgba(0, 0, 0, 0.2); /* floating layers only */
  --knob: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.12); /* switch/slider knobs and the selected segment, as Apple's own controls */

  /* ---- motion: one token set for every drag, press and glide ---------- */
  --dur-1: 120ms;  /* presses, menu close, small glides */
  --dur-2: 180ms;  /* glides, crossfades, menu open */
  --dur-3: 240ms;  /* springs: lifts, knobs */
  --dur-slide: 460ms; /* sliding selection thumbs (segments, rail) and the compare line */
  --ease-slide: cubic-bezier(.32, .72, 0, 1); /* Apple-like long ease-out, no bounce */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* damped spring (zeta .62), ~8% overshoot; same curve as motion.js */
  --spring: linear(0, 0.042, 0.146, 0.284, 0.435, 0.582, 0.715, 0.828, 0.919, 0.987, 1.035, 1.064, 1.079, 1.084, 1.08, 1.071, 1.059, 1.047, 1.034, 1.023, 1.014, 1.006, 1.001, 0.997, 1);
  --press: 0.97;
  --lift-shadow: 0 6px 14px -2px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.18);
  --ease: var(--ease-out);
  --dur: var(--dur-2);
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; background: var(--bg); }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.4;
  letter-spacing: -0.003em;
  color: var(--label);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: default; background: none; border: 0; padding: 0; }
svg { display: block; }
h2, h3, p, dl, dd, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.dim { color: var(--label-2); }
.mono { font-family: var(--font-mono); font-size: var(--fs-callout); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Icons: Hugeicons stroke-rounded, one weight (1.5 on the 24 grid), sizes 16/18/20 */
.i { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i16 { width: 16px; height: 16px; }
.i18 { width: 18px; height: 18px; }
.i20 { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ layout */
.app {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 288px;
  grid-template-rows: 52px minmax(0, 1fr) auto 32px;
  height: 100dvh;
  min-height: 620px;
}
.top { grid-column: 1 / -1; grid-row: 1; }
.rail { grid-column: 1; grid-row: 2 / 4; }
.view-area { grid-column: 2; grid-row: 2; }
.transport { grid-column: 2; grid-row: 3; }
.panel { grid-column: 3; grid-row: 2 / 4; }
.ledger { grid-column: 1 / -1; grid-row: 4; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--control-h); padding: 0 14px; border-radius: var(--r-1);
  font-size: var(--fs-body); font-weight: var(--fw-medium); white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur), box-shadow var(--dur-1) var(--ease-out), scale var(--dur-3) var(--spring);
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-bordered { background: var(--fill); color: var(--label); }
.btn-bordered:hover:not(:disabled) { background: var(--fill-thick); }
.btn-borderless { height: auto; padding: 2px 0; color: var(--accent); font-weight: var(--fw-medium); }
.btn-borderless:hover { opacity: 0.72; }
.btn-primary:active:not(:disabled) { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.14); }
.btn-bordered:active:not(:disabled) { background: rgba(120, 120, 128, 0.24); }
.btn:disabled { background: var(--fill-thin); color: var(--label-3); }
.btn.wide { width: 100%; }

.icon-btn {
  width: 28px; height: 28px; border-radius: var(--r-1);
  display: grid; place-items: center; color: var(--label-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover:not(:disabled) { background: var(--fill); color: var(--label); }
.icon-btn:active:not(:disabled) { background: var(--fill-thick); }

/* Press: every button-like control dips to 97% in 120 ms and springs back
   on release. `scale` is its own property, so it never fights a transform. */
:is(.btn, .icon-btn, .step, .popup, .clip, .tp-time, .seg button, .play) {
  transition-property: background, color, opacity, box-shadow, scale, font-weight;
  transition-duration: var(--dur-2), var(--dur-2), var(--dur-2), var(--dur-1), var(--dur-3), var(--dur-3);
  transition-timing-function: var(--ease-out), var(--ease-out), var(--ease-out), var(--ease-out), var(--spring), var(--ease-out);
}
:is(.btn, .icon-btn, .step, .popup, .clip, .tp-time):active:not(:disabled) {
  scale: var(--press);
  transition-duration: var(--dur-1);
  transition-timing-function: var(--ease-out);
}
.icon-btn:disabled { color: var(--label-3); }

/* ------------------------------------------------------------------ toolbar */
.top {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center; column-gap: 12px;
  padding: 0 16px 0 22px;
  border-bottom: 1px solid var(--separator);
}
.brand { display: grid; place-items: center; width: 28px; height: 28px; color: var(--accent); border-radius: var(--r-1); }
.brand svg { width: 20px; height: 20px; fill: none; stroke: currentColor; }
.brand svg .b-dash { stroke-dasharray: 2 1.6; stroke-width: 1.2; }
.brand svg circle { fill: currentColor; stroke: none; }
.doc { grid-column: 2; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.doc-title { font-size: var(--fs-headline); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 60%; }
.doc-sub { display: flex; gap: 8px; min-width: 0; font-size: var(--fs-callout); color: var(--label-2); white-space: nowrap; overflow: hidden; }
.doc-file { overflow: hidden; text-overflow: ellipsis; }
.doc-dims { font-variant-numeric: tabular-nums; }
.seg-top { grid-column: 3; }
.top-actions { grid-column: 5; justify-self: end; display: flex; align-items: center; gap: 4px; }
.top-actions .btn-primary { margin-left: 10px; }

/* ------------------------------------------------------------------ segmented control */
.seg {
  position: relative; isolation: isolate;
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 2px; gap: 2px; border-radius: var(--r-1); background: var(--fill);
}
.seg button {
  position: relative; z-index: 1;
  height: 24px; padding: 0 14px; border-radius: 5px;
  font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--label);
  white-space: nowrap;
}
/* the one sliding selection thumb (main.js places it) */
.seg-thumb {
  position: absolute; z-index: 0; left: 0; top: 2px; bottom: 2px; width: 0;
  border-radius: 5px; background: var(--bg); box-shadow: var(--knob);
  pointer-events: none; opacity: 0;
  transition: transform var(--dur-slide) var(--ease-slide), width var(--dur-slide) var(--ease-slide), scale var(--dur-1) var(--ease-out), opacity var(--dur-1);
}
.seg.has-thumb .seg-thumb { opacity: 1; }
.seg.seg-instant .seg-thumb { transition: none; }
.seg.has-thumb button[aria-pressed="true"], .seg.has-thumb button[aria-checked="true"] { background: transparent; box-shadow: none; }
.seg:has(button[aria-pressed="true"]:active, button[aria-checked="true"]:active) .seg-thumb { scale: 0.97; }
.seg button:active:not([aria-pressed="true"]):not([aria-checked="true"]) { background: var(--fill); }
.seg button .dim { transition: color var(--dur-2) var(--ease-out); }
.seg button:hover:not([aria-pressed="true"]):not([aria-checked="true"]) { background: var(--fill-thin); }
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] { background: var(--bg); box-shadow: var(--knob); font-weight: var(--fw-semibold); }
.seg .dim { font-weight: var(--fw-regular); }
.seg-phone { display: none; }

/* ------------------------------------------------------------------ rail */
.rail {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 0; border-right: 1px solid var(--separator);
}
.step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 56px; padding: 8px 0 6px; border-radius: var(--r-2);
  color: var(--label-2); font-size: var(--fs-footnote); font-weight: var(--fw-medium);
}
.step .i { transition: translate var(--dur-2) var(--ease-out); }
.step:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); color: var(--label); }
.step:hover:not(:disabled) .i { translate: 0 -1px; }
.step:active:not(:disabled) { background: rgba(0, 0, 0, 0.1); }
.step[aria-pressed="true"] { color: var(--accent); font-weight: var(--fw-semibold); }
.rail.has-mark .step[aria-pressed="true"] { background: transparent; }
.rail:not(.has-mark) .step[aria-pressed="true"] { background: var(--accent-soft); }
/* one selection that slides between rail items (main.js places it) */
.rail-mark {
  position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: var(--r-2);
  background: rgba(0, 0, 0, 0.06); pointer-events: none; opacity: 0;
  transition: transform var(--dur-slide) var(--ease-slide), width var(--dur-slide) var(--ease-slide), height var(--dur-slide) var(--ease-slide), opacity var(--dur-1);
}
.rail.has-mark .rail-mark { opacity: 1; }
.rail.rail-instant .rail-mark { transition: none; }
.step.pop .i { animation: icon-pop var(--dur-3) var(--ease-out); }
@keyframes icon-pop { 40% { scale: 1.08; } }
.ripple-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.ripple-free { left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; }

/* HIG tooltip: small, quiet, after a 400 ms hover */
.tooltip {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: var(--r-1);
  background: var(--bg); color: var(--label); box-shadow: var(--shadow);
  font-family: var(--font-ui); font-size: var(--fs-footnote); white-space: nowrap;
  opacity: 0; scale: 0.98; transition: opacity var(--dur-1) var(--ease-out), scale var(--dur-1) var(--ease-out);
}
.tooltip.on { opacity: 1; scale: 1; }
.tooltip.measuring { visibility: hidden; transition: none; }
.tooltip kbd { height: 18px; min-width: 18px; padding: 0 5px; font-size: var(--fs-caption); color: var(--label-2); }
.step-export { margin-top: 8px; position: relative; }
.step-export::before { content: ""; position: absolute; top: -6px; left: 12px; right: 12px; height: 1px; background: var(--separator); }
.step:disabled { color: var(--label-3); }

/* ------------------------------------------------------------------ inspector */
.panel {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 0; overflow: auto;
  padding: 18px 20px 20px;
  border-left: 1px solid var(--separator);
  background: var(--bg);
  scrollbar-width: thin;
}
.view { display: none; }
.app[data-view="open"] [data-view-pane="open"],
.app[data-view="box"] [data-view-pane="box"],
.app[data-view="fill"] [data-view-pane="fill"],
.app[data-view="compare"] [data-view-pane="compare"] { display: block; }
.view.leaving { display: block; position: absolute; left: 20px; right: 20px; pointer-events: none; }

/* inspector footer: a live After thumbnail and the file facts */
.panel-foot { margin-top: auto; padding-top: 20px; display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.panel-foot[hidden] { display: none; }
.foot-thumb { grid-row: 1 / 3; position: relative; width: 72px; aspect-ratio: var(--ar, 1.333); border-radius: var(--r-1); overflow: hidden; background: var(--bg-2); box-shadow: 0 0 0 1px var(--separator); }
.foot-thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.foot-chip { position: absolute; left: 4px; bottom: 4px; padding: 0 4px; border-radius: 4px; background: var(--overlay-chip); font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: 1.5; }
.foot-name { font-size: var(--fs-callout); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: end; }
.foot-facts { font-size: var(--fs-footnote); color: var(--label-2); font-variant-numeric: tabular-nums; align-self: start; }

.panel h2 { font-size: var(--fs-headline); font-weight: var(--fw-semibold); margin-bottom: 4px; }
.panel h3 { font-size: var(--fs-headline); font-weight: var(--fw-semibold); margin-bottom: 12px; }
.sub { color: var(--label-2); font-size: var(--fs-callout); line-height: 1.45; margin-bottom: 16px; }
.fine { color: var(--label-2); font-size: var(--fs-footnote); }
.fine.center { text-align: center; margin-top: 8px; }
.fair { margin-top: auto; padding-top: 16px; color: var(--label-2); font-size: var(--fs-footnote); }

/* fill tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-top: 12px; }
.tile { position: relative; display: flex; flex-direction: column; gap: 6px; }
.tile input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.tile canvas {
  width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-2); display: block;
  background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--separator), 0 0 0 0 transparent;
  transition: box-shadow var(--dur-3) var(--ease-out), scale var(--dur-3) var(--spring);
}
.tile:active canvas { scale: var(--press); transition-duration: var(--dur-1), var(--dur-1); transition-timing-function: var(--ease-out); }
.tile span { font-size: var(--fs-callout); color: var(--label-2); text-align: center; }
.tile:hover canvas { box-shadow: 0 0 0 1px var(--fill-thick), 0 0 0 0 transparent; }
.tile span { transition: color var(--dur-2) var(--ease-out); }
.tile input:checked ~ canvas { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.tile input:checked ~ span { color: var(--label); font-weight: var(--fw-semibold); }
.tile input:focus-visible ~ canvas { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 0 0 7px var(--focus); }
.desc { margin-top: 14px; font-size: var(--fs-callout); color: var(--label-2); line-height: 1.5; }

.finish { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--separator); }
.finish.flash h3 { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.slider {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) 32px;
  align-items: center; gap: 10px; min-height: 32px;
}
.slider-tint { grid-template-columns: 74px minmax(0, 1fr) 32px 20px; }
.slider > label:first-child { font-size: var(--fs-body); color: var(--label); }
.slider output { font-variant-numeric: tabular-nums; font-size: var(--fs-callout); color: var(--label-2); text-align: right; }
.app[data-method="cover"] .slider[data-when-not="cover"] { display: none; }
.app:not([data-method="cover"]) .slider[data-when="cover"] { display: none; }
.slider-cover { grid-template-columns: 74px auto 1fr; }

/* HIG slider: thin track, tint fill to the left, white round knob */
.track { position: relative; height: 20px; --p: 0.5; }
.track::before, .track::after {
  content: ""; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; pointer-events: none;
}
.track::before { right: 0; background: var(--fill-thick); }
.track::after { width: calc(10px + (100% - 20px) * var(--p)); background: var(--accent); }
.track input[type="range"] {
  -webkit-appearance: none; appearance: none;
  position: relative; z-index: 1; display: block; width: 100%; height: 20px; margin: 0;
  background: transparent; border-radius: 10px;
}
.track input::-webkit-slider-runnable-track { height: 20px; background: transparent; }
.track input::-moz-range-track { height: 20px; background: transparent; }
.track input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; border: 0;
  background: var(--bg); box-shadow: var(--knob), 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform var(--dur) var(--ease);
}
.track input::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: 0;
  background: var(--bg); box-shadow: var(--knob), 0 2px 6px rgba(0, 0, 0, 0.1);
}
.track input:active::-webkit-slider-thumb { transform: scale(1.08); }
.track input:focus-visible { outline-offset: 1px; }

.swatch {
  position: relative; width: 20px; height: 20px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); overflow: hidden; display: block;
}
.swatch.big { width: 28px; height: 28px; }
.swatch input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); border: 0; padding: 0; }
.swatch:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

/* open view */
.clips { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.clip {
  display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 12px;
  align-items: center; text-align: left; padding: 6px; border-radius: var(--r-2);
  transition: background var(--dur) var(--ease);
}
.clip canvas { grid-row: 1 / 3; width: 52px; height: 39px; border-radius: var(--r-1); background: var(--bg-2); }
.clip-t { font-size: var(--fs-body); align-self: end; }
.clip-s { font-size: var(--fs-callout); color: var(--label-2); align-self: start; }
.clip:hover { background: var(--fill-thin); }
.clip:active { background: var(--fill); }
.clip[aria-pressed="true"] { background: var(--accent-soft); }
.clip[aria-pressed="true"] .clip-t { font-weight: var(--fw-semibold); }

.meta-list { margin: 20px 0 14px; }
.meta-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--separator); }
.meta-list > div:first-child { border-top: 1px solid var(--separator); }
.meta-list dt { color: var(--label-2); font-size: var(--fs-callout); }
.meta-list dd { font-size: var(--fs-callout); font-variant-numeric: tabular-nums; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* box view */
.xywh { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.xywh label {
  display: flex; align-items: center; gap: 8px; height: var(--control-h); padding: 0 8px;
  border-radius: var(--r-1); background: var(--fill);
}
.xywh label:focus-within { outline: 3px solid var(--focus); outline-offset: 1px; }
.xywh span { color: var(--label-2); font-size: var(--fs-callout); width: 10px; }
.xywh input {
  width: 100%; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: var(--fs-body); font-variant-numeric: tabular-nums; text-align: right;
}
.keys { display: grid; gap: 8px; margin-bottom: 20px; }
.keys p { display: flex; align-items: center; gap: 4px; font-size: var(--fs-callout); color: var(--label-2); }
.keys span { margin-left: 6px; }
kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--r-1); background: var(--fill);
  font-family: var(--font-ui); font-size: var(--fs-footnote); color: var(--label);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), scale var(--dur-3) var(--spring);
}
/* the key you just pressed on the box lights up for a moment */
.keys kbd.lit { background: var(--accent); color: var(--on-accent); scale: 0.94; transition-duration: 60ms; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.t-title { display: block; font-size: var(--fs-body); }
.t-sub { display: block; font-size: var(--fs-callout); color: var(--label-2); }

/* HIG switch: 38×22, tint when on, white knob, 200ms */
.switch {
  position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: var(--fill-thick);
  transition: background var(--dur-2) var(--ease-out);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 9px; background: var(--bg);
  box-shadow: var(--knob), 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: transform var(--dur-3) var(--spring), width var(--dur-2) var(--ease-out);
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
/* pressed: the knob stretches toward the side it will travel to (iOS) */
.switch:active:not(:disabled)::after { width: 23px; }
.switch[aria-checked="true"]:active:not(:disabled)::after { transform: translateX(11px); }
.switch:disabled { opacity: 0.4; }

/* ------------------------------------------------------------------ viewport */
.view-area { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 16px 20px 0; }
.viewport {
  position: relative; flex: 1; min-height: 0;
  border-radius: var(--r-3); background: var(--bg-2);
  overflow: hidden;
}
.stage { position: absolute; border-radius: var(--r-1); overflow: hidden; touch-action: none; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.app[data-empty="true"] .stage { visibility: hidden; }

.side {
  position: absolute; top: 10px; padding: 2px 8px; border-radius: var(--r-1);
  background: var(--overlay-chip); color: var(--label); font-size: var(--fs-footnote); font-weight: var(--fw-medium);
  pointer-events: none; transition: opacity var(--dur);
}
.side-l { left: 10px; }
.side-r { right: 10px; }
.app[data-mode="source"] .side-r, .app[data-mode="result"] .side-l { opacity: 0; }

/* the box: white dashed line, white handles with a dark ring (Photos crop) */
.box {
  position: absolute; cursor: move; outline: none;
  border: 1.5px dashed var(--overlay);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  touch-action: none;
}
.box:focus-visible { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 0 4px var(--overlay), 0 0 0 5px rgba(0, 0, 0, 0.3); }
.handle {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--overlay); box-shadow: var(--overlay-ring);
  transform: translate(-50%, -50%);
  transition: scale var(--dur-3) var(--spring), box-shadow var(--dur-2) var(--ease-out);
}
.handle:hover { scale: 1.25; }
.handle.pressed { scale: 1.45; box-shadow: var(--overlay-ring), 0 3px 8px rgba(0, 0, 0, 0.35); }
.box { transition: box-shadow var(--dur-2) var(--ease-out); }
.box.pressed { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 8px 24px -6px rgba(0, 0, 0, 0.35); }
/* snap guides: a faint line on the frame edge or centre being snapped to */
.guide {
  position: absolute; z-index: 1; pointer-events: none; opacity: 0;
  background: var(--overlay); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
  transition: opacity var(--dur-2) var(--ease-out);
}
/* snap lines only ever sit at 0, 50 or 100%, so left/top change rarely */
.guide-v { top: 0; bottom: 0; width: 1px; left: clamp(0px, calc(var(--gx, 0%) - 0.5px), calc(100% - 1px)); }
.guide-h { left: 0; right: 0; height: 1px; top: clamp(0px, calc(var(--gy, 0%) - 0.5px), calc(100% - 1px)); }
.guide.on { opacity: 0.85; }
.handle::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.handle[data-handle="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.handle[data-handle="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.handle[data-handle="sw"] { left: 0; top: 100%; cursor: nesw-resize; }
.handle[data-handle="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.dims {
  position: absolute; left: -1px; top: -26px; will-change: translate; padding: 2px 7px; border-radius: var(--r-1);
  background: var(--accent); color: var(--on-accent); font-size: var(--fs-footnote); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
  white-space: nowrap; opacity: 0; transform: translateY(3px); transition: opacity var(--dur), transform var(--dur) var(--ease);
  pointer-events: none;
}
.box:focus-visible .dims, .app[data-dragging] .dims { opacity: 1; transform: none; }
.off-note {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 2px 8px; border-radius: var(--r-1); background: var(--overlay-chip); color: var(--label);
  font-size: var(--fs-footnote); white-space: nowrap; display: none; pointer-events: none;
}
.app[data-inrange="false"] .box { border-color: rgba(255, 255, 255, 0.55); }
.app[data-inrange="false"] .handle { opacity: 0.55; }
.app[data-inrange="false"] .off-note { display: block; }

.clone-src { position: absolute; border: 1px dashed var(--overlay); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); pointer-events: none; }
.clone-src span {
  position: absolute; left: 0; top: -19px; font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--overlay); white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.app[data-show-source="false"] .clone-src { display: none; }

/* compare line: thin white line with a white capsule grip */
.divider {
  position: absolute; top: 0; bottom: 0; width: 28px; cursor: ew-resize; touch-action: none; outline: none;
  left: 0 !important; /* the shared helper writes left; position comes from the transform */
  transform: translate3d(calc(var(--split-x, 50%) - 14px), 0, 0);
  transition: opacity var(--dur-3) var(--ease-out);
}
.app[data-glide-to] .divider { display: block; }
.app[data-glide-to="source"] .divider, .app[data-glide-to="result"] .divider { opacity: 0; }
.divider::before {
  content: ""; position: absolute; left: 13.25px; top: 0; bottom: 0; width: 1.5px; background: var(--overlay);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2);
}
.grip {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 40px; border-radius: 6px;
  transform: translate(-50%, -50%); background: var(--overlay); box-shadow: var(--overlay-ring);
  transition: scale var(--dur-3) var(--spring), box-shadow var(--dur-2) var(--ease-out);
}
.grip::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 14px; border-radius: 1px;
  transform: translate(-50%, -50%); background: var(--label-3);
}
.divider:hover .grip { scale: 1 1.15; }
.app[data-dragging="split"] .grip { scale: 1.2 1.25; box-shadow: var(--overlay-ring), 0 6px 16px rgba(0, 0, 0, 0.32); }
.divider:focus-visible .grip { box-shadow: var(--overlay-ring), 0 0 0 3px var(--overlay), 0 0 0 4px rgba(0, 0, 0, 0.35); }
.app[data-mode="source"] .divider, .app[data-mode="result"] .divider { display: none; }

/* empty + drop */
.empty, .drop { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; text-align: center; padding: 24px; }
.app[data-empty="true"] .empty { display: grid; }
.drop-ring {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); color: var(--label-2); margin-bottom: 14px; box-shadow: 0 0 0 1px var(--separator);
}
.empty-title { font-size: var(--fs-headline); font-weight: var(--fw-semibold); margin-bottom: 4px; }
.empty-copy { color: var(--label-2); max-width: 300px; margin-bottom: 16px; }
.empty-actions { display: flex; gap: 8px; }
.app[data-dragover="true"] .drop {
  display: grid; background: rgba(255, 255, 255, 0.92);
  outline: 1.5px dashed var(--accent); outline-offset: -10px; border-radius: var(--r-3);
}
.drop p { font-size: var(--fs-headline); font-weight: var(--fw-semibold); }
.drop .drop-sub { font-size: var(--fs-callout); font-weight: var(--fw-regular); color: var(--label-2); margin-top: 4px; }

.error {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 12px; border-radius: var(--r-2);
  background: var(--danger-soft); color: var(--label);
}
.error[hidden] { display: none; }
.error > .i { color: var(--danger); }
.error p { flex: 1; min-width: 180px; font-size: var(--fs-callout); }

/* ------------------------------------------------------------------ transport / range */
.transport { padding: 12px 20px 14px; min-width: 0; }
.t-row { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.t-play { display: flex; align-items: center; gap: 6px; }
.play {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; margin: 0 2px;
  background: var(--accent); color: var(--on-accent);
}
.play:hover { background: var(--accent-hover); }
.play:active { scale: 0.94; box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.14); transition-duration: var(--dur-1); transition-timing-function: var(--ease-out); }
.play .i-play { display: none; }
.app[data-playing="false"] .play .i-play { display: block; }
.app[data-playing="false"] .play .i-pause { display: none; }
.clock { margin-left: 8px; font-size: var(--fs-body); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock .dim { font-weight: var(--fw-regular); }
.kbd-hint { margin-left: auto; color: var(--label-2); }
.kbd-hint kbd { height: 18px; min-width: 0; padding: 0 5px; font-size: var(--fs-caption); color: var(--label-2); }

.t-range { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.t-label { font-size: var(--fs-callout); color: var(--label-2); margin-right: 2px; white-space: nowrap; }
.t-to { font-size: var(--fs-callout); color: var(--label-2); }
.time-btn {
  display: inline-flex; align-items: center; height: var(--control-h); padding: 0;
  border-radius: var(--r-1); background: var(--fill); font-size: var(--fs-body); font-variant-numeric: tabular-nums;
}
.tp-play {
  position: relative; display: grid; place-items: center; width: 26px; height: 100%; padding-left: 4px;
  border-radius: var(--r-1) 0 0 var(--r-1); color: var(--label);
  transition: background var(--dur-2) var(--ease-out);
}
.tp-play .i { transition: scale var(--dur-3) var(--spring); }
.tp-play:hover { background: var(--fill); }
.tp-play:active .i { scale: 0.84; transition-duration: var(--dur-1); transition-timing-function: var(--ease-out); }
.ripple {
  position: absolute; left: calc(50% + 2px); top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  background: var(--accent); pointer-events: none; opacity: 0;
  animation: ripple 420ms var(--ease-out);
}
@keyframes ripple { from { opacity: 0.2; transform: scale(0.35); } to { opacity: 0; transform: scale(1.45); } }
.tp-time {
  height: 100%; padding: 0 10px 0 4px; border-radius: 0 var(--r-1) var(--r-1) 0; cursor: text;
}
.tp-time:hover { background: var(--fill); }
.tp-input {
  height: 22px; margin: 0 3px 0 1px; padding: 0 6px; border: 0; border-radius: 4px;
  background: var(--bg); color: var(--label); font: inherit; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px var(--separator), 0 0 0 3px var(--focus); outline: none;
}
.tp-input[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--danger), 0 0 0 3px var(--danger-soft); }

.t-opts { display: flex; gap: 8px; }

/* ------------------------------------------------------------------ pop-up button + menu */
.popup {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
  height: var(--control-h); padding: 0 6px 0 10px; border-radius: var(--r-1);
  background: var(--fill); font-size: var(--fs-body); white-space: nowrap; text-align: left;
  transition: background var(--dur) var(--ease);
}
.popup:hover:not(:disabled), .popup[aria-expanded="true"] { background: var(--fill-thick); }
.popup:active:not(:disabled) { background: rgba(120, 120, 128, 0.24); }
.popup .i { color: var(--label-2); }
.popup:disabled { color: var(--label-3); background: var(--fill-thin); }
.popup:disabled .i { color: var(--label-3); }
.popup-form { min-width: 180px; }

.menu {
  position: fixed; inset: auto; margin: 0; z-index: 100;
  min-width: 160px; max-height: min(320px, calc(100dvh - 24px)); overflow: auto;
  padding: 5px; border: 0; border-radius: var(--r-2);
  background: var(--bg); color: var(--label); box-shadow: var(--shadow);
  font: inherit; font-size: var(--fs-body);
  outline: none;
  transform-origin: top center;
}
.menu[data-flip] { transform-origin: bottom center; }
.menu:popover-open, .menu.is-open { animation: menu-in 160ms var(--ease-out); }
.menu.closing { animation: menu-out var(--dur-1) var(--ease-out) forwards; pointer-events: none; }
@keyframes menu-in { from { opacity: 0; transform: scale(0.98); } }
@keyframes menu-out { to { opacity: 0; transform: scale(0.98); } }
/* one highlight that slides between rows */
.menu-hl {
  position: absolute; left: 5px; right: 5px; top: 0; height: 26px; border-radius: var(--r-1);
  background: var(--accent); pointer-events: none; opacity: 0;
  transition: transform var(--dur-1) var(--ease-out), height var(--dur-1) var(--ease-out), opacity var(--dur-1);
}
.menu-hl.on { opacity: 1; }
.menu.hl-instant .menu-hl { transition: none; }
.menu [role="option"] {
  display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 6px;
  position: relative; z-index: 1;
  height: 26px; padding: 0 12px 0 6px; border-radius: var(--r-1);
  white-space: nowrap; user-select: none;
  transition: color var(--dur-1) var(--ease-out);
}
.menu [role="option"] .i { visibility: hidden; }
.menu [role="option"][aria-selected="true"] .i { visibility: visible; }
.menu [role="option"].active { color: var(--on-accent); }
.menu [role="option"][aria-disabled="true"] { color: var(--label-3); }

/* ------------------------------------------------------------------ timeline */
.timeline { position: relative; margin-top: 12px; padding-top: 20px; --p: 0; --in: 0; --out: 1; }
.ruler { position: absolute; left: 0; right: 0; top: 0; height: 16px; }
.ruler .tk { position: absolute; top: 7px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--fill-thick); transition: opacity var(--dur-1) var(--ease-out); }
.ruler .lb { position: absolute; top: 0; transform: translateX(-50%); font-size: var(--fs-caption); color: var(--label-2); font-variant-numeric: tabular-nums; transition: opacity var(--dur-1) var(--ease-out); }
/* the label or dot the playhead knob is passing over steps aside */
.ruler .under { opacity: 0; }
.ruler .lb:first-child { transform: none; }

.strip { position: relative; height: 44px; }
.film { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--r-1); background: var(--bg-2); display: block; }
/* Range parts move by transform only: --in/--out are 0..1, --sw is the strip
   width in px (main.js). Nothing here transitions position, so a drag is 1:1. */
.shades { position: absolute; inset: 0; border-radius: var(--r-1); overflow: hidden; pointer-events: none; }
.shade { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: rgba(255, 255, 255, 0.66); }
.shade-l { transform: translateX(calc((var(--in) - 1) * var(--sw, 600px))); }
.shade-r { transform: translateX(calc(var(--out) * var(--sw, 600px))); }
.range-fill {
  position: absolute; inset: 0; transform-origin: 0 0; background: var(--accent); opacity: 0;
  transform: translateX(calc(var(--in) * var(--sw, 600px))) scaleX(calc(var(--out) - var(--in)));
  transition: opacity var(--dur-2) var(--ease-out);
}
.timeline:has(.grip-tab:hover) .range-fill { opacity: 0.04; }
.timeline[data-press] .range-fill { opacity: 0.1; }
.range-frame { position: absolute; top: -2px; bottom: -2px; left: 0; right: 0; pointer-events: none; }
.rf {
  position: absolute; left: 0; width: 100%; height: 2px; transform-origin: 0 0;
  transform: translateX(calc(var(--in) * var(--sw, 600px))) scaleX(calc(var(--out) - var(--in)));
}
.rf-t { top: 0; }
.rf-b { bottom: 0; }
.rf::before {
  content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: 50% 0;
  transition: transform var(--dur-2) var(--ease-out);
}
.rf-b::before { transform-origin: 50% 100%; }
.timeline[data-press] .rf::before { transform: scaleY(1.5); }
.scrub {
  -webkit-appearance: none; appearance: none; position: absolute; left: 0; right: 0; top: -20px; bottom: 0;
  width: 100%; height: calc(100% + 20px); margin: 0; background: transparent; opacity: 0; z-index: 1;
  pointer-events: none; /* keyboard only; the pointer goes to .scrub-hit */
}
.scrub-hit { position: absolute; inset: 0; z-index: 1; touch-action: none; }
.scrub-hit.near, .timeline.ph-active .scrub-hit { cursor: ew-resize; }
.scrub:focus-visible { opacity: 1; outline: none; }
.scrub::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 2px; height: 100%; background: transparent; }
.scrub::-moz-range-thumb { width: 2px; height: 100%; border: 0; background: transparent; }
.timeline:has(.scrub:focus-visible) .ph-dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--focus); }

.grip-tab {
  position: absolute; top: -2px; bottom: -2px; left: 0; width: 16px; z-index: 2;
  cursor: ew-resize; touch-action: none; outline: none; --rb: 0px;
}
.grip-tab[data-grip="in"] { transform: translateX(calc(var(--in) * var(--sw, 600px) + var(--rb))); border-radius: var(--r-1) 0 0 var(--r-1); }
.grip-tab[data-grip="out"] { transform: translateX(calc(var(--out) * var(--sw, 600px) - 16px + var(--rb))); border-radius: 0 var(--r-1) var(--r-1) 0; }
.grip-tab.pressed { z-index: 4; }
/* the face is what lifts, so the lift never touches the 1:1 position */
.grip-face {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
  background: var(--accent); color: var(--on-accent);
  transition: scale var(--dur-3) var(--spring), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.grip-face .i { opacity: 0.6; transition: opacity var(--dur-1) var(--ease-out); }
.grip-tab:hover .grip-face { background: var(--accent-hover); }
.grip-tab:hover .grip-face .i { opacity: 0.85; }
.grip-tab.pressed .grip-face { scale: 1.06; box-shadow: var(--lift-shadow); background: var(--accent); }
.grip-tab.pressed .grip-face .i { opacity: 1; }
.grip-tab::before { content: ""; position: absolute; inset: -4px -10px; }
.grip-tab:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--focus); }
.grip-tab.pressed:focus-visible { box-shadow: none; } /* the lift is the feedback while held */
.chip {
  position: absolute; bottom: calc(100% + 24px); left: 50%; transform: translate(-50%, 4px);
  padding: 2px 7px; border-radius: var(--r-1); background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-footnote); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0; transition: opacity var(--dur), transform var(--dur) var(--ease); pointer-events: none;
}
.grip-tab:focus-visible .chip, .grip-tab.pressed .chip, .grip-tab:hover .chip { opacity: 1; transform: translate(-50%, 0); }

.playhead { position: absolute; top: 4px; bottom: -6px; left: 0; width: 0; pointer-events: none; z-index: 3; transform: translateX(calc(var(--p) * var(--sw, 600px))); }
.playhead::before { content: ""; position: absolute; left: -0.75px; top: 9px; bottom: 0; width: 1.5px; background: var(--accent); border-radius: 1px; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.6); }
.ph-dot {
  position: absolute; left: -5.5px; top: 0; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--bg);
  transition: scale var(--dur-3) var(--spring), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1);
}
.timeline.ph-hover .ph-dot { scale: 1.15; }
.timeline.ph-active .ph-dot { scale: 1.35; background: var(--accent); box-shadow: var(--lift-shadow); }

/* ------------------------------------------------------------------ status bar */
.ledger {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: var(--fs-footnote); color: var(--label-2); padding: 0 16px 0 22px;
  border-top: 1px solid var(--separator);
}
.ledger p { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ledger b { color: var(--label); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.ledger .sep { color: var(--label-3); }
.ok-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 2px; }
.fair-foot { overflow: hidden; text-overflow: ellipsis; }
.app .panel .fair { display: none; }

/* ------------------------------------------------------------------ export sheet */
.sheet {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0;
  border: 0; border-radius: var(--r-4); background: var(--bg); color: var(--label);
  box-shadow: var(--shadow);
  overflow: visible;
}
.sheet::backdrop { background: var(--scrim); }
.sheet[open] { animation: sheet-rise 320ms var(--spring), fade-in var(--dur-2) var(--ease-out); }
.sheet[open]::backdrop { animation: fade-in var(--dur-2) var(--ease-out); }
.sheet.closing { animation: sheet-sink 160ms var(--ease-out) forwards; pointer-events: none; }
.sheet.closing::backdrop { animation: fade-out 160ms var(--ease-out) forwards; }
@keyframes sheet-rise { from { transform: translateY(8px) scale(0.98); } }
@keyframes sheet-sink { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.sheet-in { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.sheet-head { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 24px 6px; }
.sheet-head h2 { font-size: var(--fs-title); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.seg-sheet { width: 100%; max-width: 300px; }
.sheet-body { position: relative; padding: 8px 24px 4px; overflow: auto; min-height: 300px; }
.xpane.leaving { position: absolute; left: 24px; right: 24px; pointer-events: none; }
.xpane[hidden] { display: none; }
.xpane .sub { margin: 14px 0 0; }
.xrow {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--separator); margin: 0;
}
.xrow:last-child { border-bottom: 0; }
.xrow-stack { align-items: flex-start; }
.xrow-stack .xlabel { padding-top: 4px; }
.xlabel { font-size: var(--fs-body); color: var(--label); }
.xctl { display: grid; justify-items: end; gap: 6px; }
.xctl .fine { font-variant-numeric: tabular-nums; text-align: right; }
.seg-form button { padding: 0 12px; }
.meta-list.big dt, .meta-list.big dd { font-size: var(--fs-body); }
.xpane .meta-list { margin-top: 12px; }

.next-note { margin: 0 24px; font-size: var(--fs-callout); color: var(--label); }
.next-note:not(:empty) { margin-top: 10px; padding: 8px 12px; border-radius: var(--r-2); background: var(--bg-2); }
.sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px 20px; }
.local { display: flex; align-items: center; gap: 6px; font-size: var(--fs-footnote); color: var(--label-2); min-width: 0; }
.sheet-actions { display: flex; gap: 8px; flex: none; }
.sheet-actions .btn { min-width: 84px; }

.rail .step:active:not(:disabled) { scale: 0.96; }


/* ------------------------------------------------------------------ exporting + done
   The settings sheet morphs (size, then content) into these two views. Black
   and white only; the footage is the colour. One moving idea: your clip runs
   as a filmstrip through the box, the mark dissolves inside it, and the
   strip's position is the progress (shared/filmstrip.js). */
.sheet[data-phase="run"], .sheet[data-phase="done"] { width: min(640px, calc(100vw - 32px)); }
.sheet.morphing { overflow: hidden; }
.xview[hidden] { display: none !important; }
.xview { display: flex; flex-direction: column; min-height: 0; }
.xview-settings { display: contents; }

.xr-stage {
  position: relative; display: grid; place-items: center;
  height: min(46vh, 420px); margin: 20px 20px 0; border-radius: var(--r-3);
  background: var(--bg-2); overflow: hidden;
}
/* the filmstrip (shared/filmstrip.js): a 600×400 scene scaled to the stage */
.xr-film { position: absolute; left: 0; top: 0; width: 600px; height: 400px; transform-origin: 0 0; --fs-bg: var(--bg-2); }
.sheet[data-landed] .xr-pulse { display: none; }
.sheet[data-failed] .xr-film { opacity: 0.45; filter: grayscale(1); transition: opacity var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease-out); }
.sheet[data-failed] .fs-light, .sheet[data-failed] .fs-fx { display: none; }
.xr-info { padding: 18px 24px 2px; }
.xr-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.xr-title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-title); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.xr-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--label); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.22; transform: scale(0.78); } 50% { opacity: 1; transform: scale(1); } }
.xr-pct { font-family: var(--font-mono); font-size: 28px; font-weight: var(--fw-regular); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.xr-file { margin-top: 4px; font-size: var(--fs-callout); color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xr-bar { height: 3px; margin: 16px 0 10px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.xr-bar span { display: block; height: 100%; border-radius: inherit; background: var(--label); transform: scaleX(0); transform-origin: left center; }
.xr-meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: var(--fs-footnote); color: var(--label-2); font-variant-numeric: tabular-nums; }
.xr-meta span:last-child { text-align: right; }
.xr-hidden { margin-top: 12px; padding: 8px 12px; border-radius: var(--r-2); background: var(--bg-2); font-size: var(--fs-callout); color: var(--label); }
.xr-error { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: var(--r-2); background: var(--danger-soft); font-size: var(--fs-callout); line-height: 1.45; }
.xr-error .i { flex: none; color: var(--danger); margin-top: 1px; }
.xr-error strong { font-weight: var(--fw-semibold); }
.sheet[data-failed] .xr-pulse { animation: none; opacity: 1; background: var(--danger); }
.sheet[data-failed] .xr-bar span { background: var(--label-3); }
.xrun .sheet-foot, .xdone .sheet-foot { padding-top: 18px; }

.xd-head { display: flex; align-items: center; gap: 14px; padding: 24px 24px 0; min-width: 0; }
.xd-head > div { min-width: 0; }
.xd-head h2 { font-size: var(--fs-title); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.xd-name { margin-top: 2px; font-size: var(--fs-callout); color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xd-check { width: 40px; height: 40px; flex: none; }
.xd-check circle { fill: var(--label); transform-origin: 24px 24px; }
.xd-check path { fill: none; stroke: var(--on-accent); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 0; }
.sheet[data-phase="done"] .xd-check circle { animation: check-pop 420ms var(--spring) both; }
.sheet[data-phase="done"] .xd-check path { animation: check-draw 360ms var(--ease-out) 200ms both; }
@keyframes check-pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes check-draw { from { stroke-dashoffset: 30; } }

.xd-compare {
  --s: 50%;
  position: relative; align-self: center; margin: 18px 24px 0;
  width: min(calc(100% - 48px), calc(min(36vh, 330px) * var(--ar, 1.78))); aspect-ratio: var(--ar, 1.78);
  border-radius: var(--r-2); overflow: hidden; background: var(--bg-2);
  cursor: ew-resize; touch-action: pan-y; user-select: none;
}
.xd-compare canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.xd-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--s)); }
.xd-line { position: absolute; top: 0; bottom: 0; left: var(--s); width: 2px; margin-left: -1px; background: var(--overlay); box-shadow: var(--overlay-ring); pointer-events: none; }
.xd-knob { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--overlay); box-shadow: var(--knob), 0 2px 8px rgba(0, 0, 0, 0.2); translate: -50% -50%; transition: scale var(--dur-3) var(--spring); }
.xd-compare[data-drag] .xd-knob { scale: 1.15; }
.xd-tag { position: absolute; top: 10px; padding: 2px 8px; border-radius: var(--r-1); background: var(--overlay-chip); color: var(--label); font-size: var(--fs-footnote); font-weight: var(--fw-medium); pointer-events: none; }
.xd-tag-l { left: 10px; }
.xd-tag-r { right: 10px; }
.xd-compare:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.xd-facts { margin: 16px 24px 0; }
.xdone .sheet-foot .btn-borderless { padding: 0; }

@media (max-width: 640px) {
  .sheet[data-phase="run"], .sheet[data-phase="done"] { width: 100vw; }
  .xr-stage { height: 44vh; margin: 16px 16px 0; border-radius: var(--r-2); }
  .xr-info { padding: 16px 16px 2px; }
  .xr-pct { font-size: 24px; }
  .xr-meta { flex-direction: column; gap: 4px; }
  .xr-meta span:last-child { text-align: left; }
  .xview .sheet-foot { margin-top: auto; }
  .xd-head { padding: 20px 16px 0; }
  .xd-compare { margin: 16px 16px 0; width: min(calc(100% - 32px), calc(40vh * var(--ar, 1.78))); }
  .xd-facts { margin: 14px 16px 0; }
  .xdone .sheet-foot { flex-direction: column-reverse; }
  .xdone .sheet-foot .btn-borderless { height: 44px; align-self: center; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .app { grid-template-columns: 72px minmax(0, 1fr) 264px; }
  .hide-md { display: none !important; }
  .t-label { display: none; }
  .doc-sub { display: none; }
}

/* tablet: viewport first, inspector below, page scrolls */
@media (max-width: 1000px) {
  .app {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: 52px auto auto auto auto;
    height: auto; min-height: 100dvh;
  }
  .top { position: sticky; top: 0; z-index: 10; background: var(--bg); }
  .rail { grid-column: 1; grid-row: 2 / 5; position: sticky; top: 52px; align-self: start; border-right: 0; }
  .view-area { grid-column: 2; grid-row: 2; }
  .viewport { flex: none; height: auto; aspect-ratio: var(--ar, 1.333); max-height: 62vh; }
  .transport { grid-column: 2; grid-row: 3; }
  .panel { grid-column: 2; grid-row: 4; overflow: visible; border-left: 0; border-top: 1px solid var(--separator); margin: 4px 20px 0; padding: 18px 0 24px; }
  .ledger { grid-column: 1 / -1; grid-row: 5; padding: 12px 20px; flex-wrap: wrap; gap: 4px 16px; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .t-range { margin-left: 0; order: 3; }
  .t-opts { margin-left: auto; }
  .doc-title { max-width: 100%; flex: 0 1 auto; }
}

/* phone: rail becomes a bottom tab bar, view switch moves above the video */
@media (max-width: 640px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 52px auto auto auto auto;
    padding-bottom: 76px;
  }
  .top { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 12px 0 14px; column-gap: 8px; }
  .seg-top { display: none; }
  .top-actions { grid-column: 3; gap: 2px; }
  .top-actions .icon-btn { width: 36px; height: 36px; }
  .top-actions .btn-primary { margin-left: 6px; height: 32px; padding: 0 12px; }
  .rail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 20;
    flex-direction: row; justify-content: space-around; gap: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94); border-right: 0; border-top: 1px solid var(--separator);
    backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  }
  .step { width: auto; flex: 1; min-height: 48px; padding: 6px 0 4px; font-size: var(--fs-caption); }
  .step-export { margin: 0; }
  .step-export::before { display: none; }
  .view-area, .transport, .panel, .ledger { grid-column: 1; }
  .view-area { padding: 12px 16px 0; }
  .seg-phone { display: grid; margin-bottom: 10px; }
  .seg-phone button { height: 28px; }
  .hide-sm { display: none !important; }
  .viewport { max-height: none; border-radius: var(--r-2); }
  .transport { padding: 12px 16px 14px; }
  .t-row { gap: 10px 8px; }
  .t-play .icon-btn { width: 40px; height: 40px; }
  .play { width: 44px; height: 44px; }
  .clock { margin-left: 4px; }
  .t-range { width: 100%; }
  .t-range .time-btn { flex: 1; height: 36px; justify-content: center; }
  .t-opts { margin-left: 0; width: 100%; }
  .t-opts .popup { flex: 1; height: 36px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .panel { margin: 4px 16px 0; }
  .ledger { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px 8px; }
  .ledger p { white-space: normal; flex-wrap: wrap; }
  .menu [role="option"] { height: 36px; }
  .sheet { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .sheet-in { height: 100%; max-height: 100dvh; }
  .sheet-head { padding: 18px 16px 6px; }
  .sheet-body { padding: 8px 16px 4px; flex: 1; }
  .xrow-stack { flex-direction: column; align-items: stretch; gap: 8px; }
  .xctl { justify-items: stretch; }
  .xctl .fine { text-align: left; }
  .popup-form { min-width: 0; flex: 0 1 190px; height: 32px; }
  .next-note { margin: 0 16px; }
  .sheet-foot { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .local { justify-content: center; }
  .sheet-actions .btn { flex: 1; height: 44px; }
}

/* Reduced motion: tracking stays 1:1, but no springs, lifts, glides or
   ripples. States change instantly. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scale: none !important; }
  .timeline[data-press] .rf::before { transform: none; }
  .grip-tab.pressed .grip-face, .timeline.ph-active .ph-dot, .handle.pressed, .app[data-dragging="split"] .grip, .box.pressed { box-shadow: var(--overlay-ring); }
  .grip-tab.pressed .grip-face { box-shadow: none; }
  .switch:active:not(:disabled)::after { width: 18px; }
  .switch[aria-checked="true"]:active:not(:disabled)::after { transform: translateX(16px); }
}

/* no video: no range to show */
.app[data-empty="true"] :is(.range-frame, .grip-tab, .playhead, .shade) { display: none; }
.app[data-empty="true"] .doc-sub { display: none; }

/* Toolbar title: just the clip name. File, size and rate live in the Open pane and the inspector footer. */
.doc-sub { display: none; }
.doc-title { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* sound toggle in the transport */
.sound-btn .i-sound-off { display: none; }
.app[data-audio="off"] .sound-btn .i-sound-on { display: none; }
.app[data-audio="off"] .sound-btn .i-sound-off { display: block; }
.app[data-audio="off"] .sound-btn { color: var(--label-2, rgba(60,60,67,.72)); }

/* file facts: never push past the inspector edge; long names truncate */
.meta-list > div { min-width: 0; }
.meta-list dt { flex: none; }
.meta-list dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.inspector, .insp, aside { min-width: 0; overflow-x: clip; }
a.btn { text-decoration: none; }
.xview [hidden] { display: none !important; }
@media (max-width: 640px) { .xview:not(.xview-settings) { flex: 1; } }
.sheet[data-failed] :is(.xr-pct, .xr-meta, .xr-bar) { display: none; }

/* volume: speaker button + a slim slider that floats above it on hover/focus (no layout shift) */
.vol { position: relative; display: inline-flex; align-items: center; }
.vol[hidden] { display: none; }
.vol-range {
  -webkit-appearance: none; appearance: none; position: absolute; left: 50%; bottom: calc(100% + 10px);
  width: 112px; height: 32px; margin: 0; padding: 0 12px; box-sizing: border-box; cursor: pointer; --p: 1;
  background: var(--bg, #fff); border-radius: 10px;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
  opacity: 0; pointer-events: none; transform: translate(-50%, 4px) scale(.98); z-index: 20;
  transition: opacity var(--dur-2, 180ms) var(--ease-out, ease-out), transform var(--dur-2, 180ms) var(--ease-out, ease-out);
}
.vol:hover .vol-range, .vol:focus-within .vol-range { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.vol::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: 100%; height: 12px; } /* hover bridge */
.vol-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent) calc(var(--p) * 100%), var(--fill-thick, rgba(120,120,128,.16)) 0); }
.vol-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--fill-thick, rgba(120,120,128,.16)); }
.vol-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.vol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.25); }
.vol-range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.25); }
.vol-range:focus-visible { outline: 2px solid var(--focus, #1d1d1f); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vol-range { transition: none; } }

/* ------------------------------------------------------------------ plan: Free / Pro */
/* Toolbar: on Free, one black capsule that says what to do ("Upgrade"); its
   capsule shape keeps it apart from the squarer Export button. On Pro, a quiet
   chip with a check: the plan at a glance and the way to the licence details. */
.i14 { width: 14px; height: 14px; }
.plan-chip {
  position: relative; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 11px 0 9px; margin-right: 8px;
  border-radius: 12px; background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-callout); font-weight: var(--fw-semibold); letter-spacing: 0.005em; white-space: nowrap;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), scale var(--dur-3) var(--spring);
}
.plan-chip[hidden] { display: none; }
.plan-chip:hover { background: var(--accent-hover); }
.plan-chip:active { scale: var(--press); transition-duration: var(--dur-1); }
.plan-chip .pc-pro { display: none; }
.app[data-plan="pro"] .plan-chip { height: 22px; padding: 0 9px 0 7px; gap: 4px; background: var(--fill); color: var(--label); font-size: var(--fs-footnote); }
.app[data-plan="pro"] .plan-chip:hover { background: var(--fill-thick); }
.app[data-plan="pro"] .plan-chip .pc-free { display: none; }
.app[data-plan="pro"] .plan-chip .pc-pro { display: block; stroke-width: 2; }
/* a key that has run out (or is about to): one small dot, nothing louder */
.plan-chip[data-attention]::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--label); box-shadow: 0 0 0 2px var(--bg);
}
.app[data-plan="pro"] .plan-chip[data-attention]::after { background: var(--label-2); }

/* Rail: a black "Pro" sticker rests in the rail's empty foot, Free only. Its
   corner lifts now and then; on hover it peels back to show sharp footage
   underneath: Vanish's own idea, lifting what covers the picture.
   (Chosen from Design/dashboard/upgrade-lab, V2.) */
@property --peel { syntax: "<length>"; inherits: true; initial-value: 9px; }
.rail-pro {
  position: relative; z-index: 1; margin-top: auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 56px; padding: 8px 0 7px; border-radius: var(--r-2);
  color: var(--label); font-size: var(--fs-footnote); font-weight: var(--fw-semibold);
  transition: background var(--dur-2) var(--ease-out), scale var(--dur-3) var(--spring);
}
.rail-pro[hidden] { display: none; }
.rail-pro:hover, .rail-pro:focus-visible { background: rgba(0, 0, 0, 0.04); }
.rail-pro:active { scale: 0.96; transition-duration: var(--dur-1); }
.rp-sticker {
  position: relative; width: 44px; height: 44px; --peel: 9px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.22)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
  transition: --peel 520ms var(--spring);
  animation: rp-lift 7s ease-in-out 1.5s infinite;
}
@keyframes rp-lift { 0%, 86%, 100% { --peel: 9px; } 91% { --peel: 13px; } }
.rail-pro:hover .rp-sticker, .rail-pro:focus-visible .rp-sticker { --peel: 22px; animation: none; }
.rp-under { position: absolute; inset: 0; border-radius: 9px; overflow: hidden; }
.rp-under img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-face {
  position: absolute; inset: 0; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-size: var(--fs-body); font-weight: 650; letter-spacing: -0.01em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--peel)), calc(100% - var(--peel)) 100%, 0 100%);
}
.rp-face::after { content: ""; position: absolute; inset: 3px; border-radius: 6px; border: 1px dashed rgba(255, 255, 255, 0.28); }
.rp-flap {
  position: absolute; right: 0; bottom: 0; width: var(--peel); height: var(--peel);
  clip-path: polygon(0 0, 100% 0, 0 100%); border-radius: 0 0 0 2px;
  background: linear-gradient(135deg, #fbfbfc 0%, #e4e4e8 55%, #c9c9cf 100%);
}
.rp-label { line-height: 1.1; }
@media (prefers-reduced-motion: reduce) { .rp-sticker { animation: none; transition: none; } }

/* After a Free export: one plain line, with the way to Pro */
.xd-nudge { margin: 12px 24px 0; font-size: var(--fs-callout); line-height: 1.45; color: var(--label-2); text-wrap: pretty; }
.xd-nudge[hidden] { display: none; }
.xd-nudge-a { color: var(--accent); font-weight: var(--fw-semibold); border-radius: 3px; cursor: pointer; }
.xd-nudge-a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* "Pro" tag on options Free can't export. Small, neutral, never hidden. */
.pro-tag {
  display: inline-flex; align-items: center; height: 15px; padding: 0 5px; margin-left: 6px; border-radius: 4px;
  background: var(--fill-thick); color: var(--label-2);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: 0.02em; line-height: 1;
  vertical-align: 1px;
}
.pro-tag[hidden] { display: none; }
.pro-tag[data-tip] { cursor: help; }
.pro-tag-btn { margin-left: -2px; height: 18px; padding: 0 6px; transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.pro-tag-btn:hover { background: var(--accent); color: var(--on-accent); }
.seg button[data-locked="true"] { color: var(--label-2); }
.seg button[data-locked="true"][aria-checked="true"] { color: var(--label); }

/* Free: the from / to range is visible but doesn't move */
.app[data-gated="true"] .grip-tab .grip-face { opacity: 0.55; }
.app[data-gated="true"] .tp-time { color: var(--label-2); }

/* The limit, explained where you chose it, with the two ways forward */
.gate {
  margin: 10px 24px 0; padding: 12px 14px; border-radius: var(--r-2); background: var(--bg-2);
  display: grid; gap: 10px;
}
.gate[hidden] { display: none; }
.gate-text { font-size: var(--fs-callout); line-height: 1.45; color: var(--label-2); }
.gate-text strong { color: var(--label); font-weight: var(--fw-semibold); }
.gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gate-actions .btn { height: 26px; padding: 0 12px; font-size: var(--fs-callout); }
.gate-actions .btn-borderless { height: auto; padding: 2px 0; margin-left: 6px; }
.btn[data-export-file]:disabled { background: var(--fill-thin); color: var(--label-3); }

/* ------------------------------------------------------------------ Vanish Pro sheet */
.sheet.lic { width: min(440px, calc(100vw - 32px)); }
.lic-head { display: grid; gap: 6px; padding: 24px 24px 4px; text-align: center; }
.lic-head h2 { font-size: var(--fs-title); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.lic-why { font-size: var(--fs-callout); color: var(--label-2); max-width: 34ch; margin: 0 auto; text-wrap: balance; }
.lic-why[hidden] { display: none; }
.lic-body { padding: 14px 24px 0; overflow: auto; }
.lic-body[hidden] { display: none; }
.lic-perks { list-style: none; margin: 0 0 16px; padding: 12px 0; display: grid; gap: 7px; border-top: 1px solid var(--separator); border-bottom: 1px solid var(--separator); }
.lic-perks li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); }
.lic-perks .i { color: var(--label-2); }
.lic-lapsed, .lic-grace { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-2); background: var(--bg-2); font-size: var(--fs-callout); line-height: 1.45; }
.lic-lapsed[hidden], .lic-grace[hidden] { display: none; }
.lic-label { display: block; margin-bottom: 6px; font-size: var(--fs-body); font-weight: var(--fw-medium); }
.lic-input {
  display: block; width: 100%; resize: none; padding: 9px 11px; border: 0; border-radius: var(--r-2);
  background: var(--fill-thin); box-shadow: inset 0 0 0 1px var(--separator);
  font-family: var(--font-mono); font-size: var(--fs-callout); line-height: 1.5; color: var(--label);
  word-break: break-all; transition: box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.lic-input::placeholder { color: var(--label-3); }
.lic-input:focus { outline: none; background: var(--bg); box-shadow: inset 0 0 0 1px var(--label-3), 0 0 0 3px var(--focus); }
.lic-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--danger); }
.lic-input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent); }
.lic-status { display: flex; align-items: center; gap: 6px; min-height: 18px; margin-top: 6px; font-size: var(--fs-callout); color: var(--label-2); }
.lic-status[data-kind="error"] { color: var(--danger); }
.lic-spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--label-3); border-top-color: var(--label); animation: lic-spin 700ms linear infinite; flex: none; }
@keyframes lic-spin { to { transform: rotate(360deg); } }
.lic-buy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 14px; font-size: var(--fs-body); }
.lic-buy-q { color: var(--label-2); }
.lic-buy-a { color: var(--accent); font-weight: var(--fw-medium); text-decoration: none; border-radius: 3px; }
.lic-buy-a:hover { text-decoration: underline; text-underline-offset: 2px; }
.lic-buy-note { margin-top: 6px; }
.lic-buy-note.lic-note-on { color: var(--label); }
.lic[data-checking] .lic-input { opacity: 0.6; }

/* Free: the upgrade path first. Two plan rows (yearly default, as on the
   landing), one Get Pro, then the key field folded away. */
.lic-cur-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.lic-cur-label { font-size: var(--fs-callout); color: var(--label-2); }
.lic-cur button { min-width: 40px; padding: 0 12px; font-variant-numeric: tabular-nums; }
.lic-plans { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.lic-plan {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 56px; padding: 10px 14px; border-radius: var(--r-2); cursor: pointer;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--separator);
  transition: box-shadow var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.lic-plan:hover { background: var(--fill-thin); }
.lic-plan:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--bg); }
.lic-plan:has(input:focus-visible) { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 3px var(--focus); }
.lic-plan input {
  appearance: none; margin: 0; width: 18px; height: 18px; border-radius: 50%; flex: none; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--label-3); transition: box-shadow var(--dur-2) var(--ease-out);
}
.lic-plan input:checked { box-shadow: inset 0 0 0 5.5px var(--accent); }
.lic-plan input:focus-visible { outline: none; }
.lic-plan-text { display: grid; gap: 2px; min-width: 0; }
.lic-plan-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.lic-plan-tag { padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); font-size: var(--fs-footnote); font-weight: var(--fw-medium); color: var(--label); }
.lic-plan-sub { font-size: var(--fs-callout); color: var(--label-2); }
.lic-plan-price { text-align: right; font-size: var(--fs-body); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lic-plan-per { color: var(--label-2); font-weight: var(--fw-regular); }
.lic-get { height: 36px; font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.lic-free-body .lic-buy-note { margin: 8px 0 0; text-align: center; text-wrap: pretty; }
.lic-key { margin-top: 14px; border-top: 1px solid var(--separator); }
.lic-key-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 0;
  font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--label); cursor: pointer; border-radius: var(--r-1);
}
.lic-key-toggle:hover { color: var(--label-2); }
.lic-key-chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--label-2); transition: transform var(--dur-slide) var(--ease-slide); }
.lic-key-toggle[aria-expanded="true"] .lic-key-chev { transform: rotate(180deg); }
.lic-key-region { overflow: hidden; padding: 2px 3px 0; margin: 0 -3px; }
.lic-key-region[hidden] { display: none; }
.lic-key-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 8px; }
.lic-key-row .lic-status { margin-top: 5px; flex: 1; min-width: 0; }
.lic-key-row .btn { flex: none; }
.lic-note-free { margin-top: 14px; }
.lic[data-view="free"] .sheet-foot { padding-top: 14px; justify-content: flex-end; }
.lic-done { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-top: 6px; }
.lic-check { width: 44px; height: 44px; }
.lic[data-view="pro"] .lic-check circle { animation: check-pop 420ms var(--spring) both; }
.lic[data-view="pro"] .lic-check path { animation: check-draw 360ms var(--ease-out) 200ms both; }
.lic-done-title { margin: 10px 0 14px; font-size: var(--fs-title); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.lic-done .lic-grace { justify-self: stretch; text-align: left; }
/* the facts: two aligned columns, equal rows, values never push the sheet wider */
.lic-facts { width: 100%; margin: 0; text-align: left; }
.lic-facts > div { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); align-items: center; gap: 16px; min-height: 40px; padding: 0; }
.lic-facts dt, .lic-facts dd { line-height: 1.3; }
.lic-facts dd { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lic-facts dd.mono { font-family: var(--font-mono); letter-spacing: 0; }
.lic-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: var(--fs-footnote); color: var(--label-2); }
.lic-note .i { flex: none; }
/* confirm: an Apple-style alert in the same sheet */
.lic-confirm { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 28px 24px 4px; }
.lic-confirm-title { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-semibold); letter-spacing: -0.01em; text-wrap: balance; }
.lic-confirm-text { margin: 0; max-width: 34ch; font-size: var(--fs-body); line-height: 1.45; color: var(--label-2); text-wrap: pretty; }
.lic-confirm[hidden] { display: none; }
.lic .sheet-in { min-width: 0; overflow: hidden; }
.lic .sheet-foot { padding-top: 18px; }
.lic .sheet-foot [hidden], .lic .sheet-actions [hidden], .lic-head[hidden] { display: none; }
.lic[data-view="pro"] .sheet-foot { padding-top: 20px; }
.lic[data-view="confirm"] .sheet-actions { flex: 1; }
.lic[data-view="confirm"] .sheet-actions .btn { flex: 1; height: 32px; }
.lic[data-view="confirm"] .sheet-foot { padding-top: 20px; }
/* quiet destructive: grey fill, red label; and the filled red confirm */
.btn-destructive { color: var(--danger); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 88%, #000); }
.btn-danger:active:not(:disabled) { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.12); }
.btn-danger:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent); }
.lic[data-state="pro"] .lic-done { padding-top: 26px; }
.lic[data-state="pro"] .lic-head { padding-bottom: 0; }

@media (max-width: 1000px) and (min-width: 641px) {
  /* the rail is sticky here: give it the window's height so Go Pro rests at its foot */
  .rail { height: calc(100dvh - 52px); box-sizing: border-box; }
}
@media (max-width: 640px) {
  .plan-chip { height: 30px; padding: 0 10px 0 8px; gap: 4px; margin-right: 0; }
  .app[data-plan="pro"] .plan-chip { height: 28px; }
  .rail-pro { display: none; } /* the phone tab bar has no room; the toolbar's Upgrade covers it */
  .xd-nudge { margin: 12px 16px 0; }
  .xd-nudge-a { padding: 12px 4px; margin: -12px -4px; } /* a 44px tap target, same line */
  .gate { margin: 10px 16px 0; }
  .gate-actions .btn { height: 36px; }
  .sheet.lic { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; height: auto; max-height: 100dvh; margin: 0; border-radius: var(--r-4) var(--r-4) 0 0; }
  .xrow:has(> [data-chips="format"]), .xrow:has(> [data-chips="length"]) { flex-direction: column; align-items: stretch; gap: 8px; }
  .xrow > .seg-form[data-chips] { width: 100%; }
  .lic-head { padding: 20px 16px 4px; }
  .lic-body { padding: 12px 16px 0; }
  .lic-input { font-size: 16px; } /* no zoom on focus in iOS Safari */
  .lic-cur button { height: 36px; min-width: 52px; }
  .lic-confirm { padding: 26px 16px 4px; }
  .lic-get { height: 44px; }
  .lic-key-row .btn { height: 40px; }
  .lic-perks { gap: 5px; padding: 10px 0; margin-bottom: 12px; }
  /* Pro and confirm: two buttons side by side, 44px tall */
  .lic:is([data-view="pro"], [data-view="confirm"]) .sheet-foot { flex-direction: row; align-items: center; }
  .lic:is([data-view="pro"], [data-view="confirm"]) .sheet-foot > .btn,
  .lic:is([data-view="pro"], [data-view="confirm"]) .sheet-actions { flex: 1; }
  .lic .sheet-foot > .btn { height: 44px; }
}

/* The rail's Pro sticker is the upgrade entry on tablet and desktop, so the
   toolbar's black "Upgrade" pill is hidden there on Free. On phones the rail
   becomes the tab bar (no sticker), so the pill stays as the only way in.
   Pro users keep the small "Pro ✓" chip for their licence details. */
@media (min-width: 641px) {
  .app:not([data-plan="pro"]) .plan-chip { display: none; }
}

/* "Pro unlocked": a small confirmation after a key arrives from the thanks
   page (#key=). A manual popover, so it sits above the onboarding sheet. */
.pro-toast {
  position: fixed; inset: 16px auto auto 50%; margin: 0; z-index: 300;
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px); padding: 10px 10px 10px 14px; border: 0; border-radius: 999px;
  background: var(--bg); color: var(--label); box-shadow: var(--shadow);
  font: var(--fw-regular) var(--fs-body)/1.3 var(--font-ui);
  opacity: 0; transform: translate(-50%, -8px) scale(.98);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-slide) var(--ease-slide);
}
.pro-toast[hidden] { display: none; }
.pro-toast.on { opacity: 1; transform: translate(-50%, 0); }
.pro-toast .i { flex: none; color: var(--ok); }
.pro-toast[data-kind="bad"] .i { color: var(--danger); }
.pro-toast[data-kind="plain"] .i { color: var(--label-2); }
.pro-toast strong { font-weight: var(--fw-semibold); }
.pro-toast-sub { color: var(--label-2); }
.pro-toast-a { flex: none; height: var(--control-h); padding: 0 12px; border-radius: 999px; background: var(--fill-thin); color: var(--label); font-weight: var(--fw-medium); cursor: pointer; }
.pro-toast-a:hover { background: var(--fill); }
.pro-toast-a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) {
  .pro-toast { inset: 12px auto auto 50%; width: max-content; border-radius: 16px; padding: 8px 8px 8px 14px; }
  .pro-toast-sub { display: block; font-size: var(--fs-callout); }
  .pro-toast-a { min-height: 44px; margin: -8px -4px -8px 0; }
}
@media (prefers-reduced-motion: reduce) { .pro-toast { transition: none; transform: translate(-50%, 0); } }