/*
 * Caption Studio — mobile visual system (PRD section 4).
 * Tokens are the PRD's proposed palette; every status also carries text or an
 * icon with an accessible name, so colour is never the sole indication.
 */

:root {
  /* Colour (PRD 4.1) */
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --text: #111827;
  --text-2: #4B5563;
  --primary: #1D4ED8;
  --primary-text: #FFFFFF;
  --selected: #EFF6FF;
  --stage: #111318;
  --divider: #E5E7EB;
  --boundary: #6B7280;
  --success: #166534;
  --success-bg: #F0FDF4;
  --warning: #92400E;
  --warning-bg: #FFFBEB;
  --error: #B91C1C;
  --error-bg: #FEF2F2;

  /* Spacing scale (PRD 4.2) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px;
  --gutter: 16px;
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-sheet: 20px;

  /* Touch targets */
  --tap: 44px;
  --primary-h: 52px;
  --secondary-h: 44px;
  --field-h: 52px;
  --bar-h: 56px;
  --nav-h: 64px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --motion: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --shadow-1: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 3px rgba(17, 24, 39, 0.08);
  --shadow-2: 0 4px 12px rgba(17, 24, 39, 0.10);
  --shadow-sheet: 0 -8px 32px rgba(17, 24, 39, 0.18);
}

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

* { box-sizing: border-box; }

/* The hidden attribute is the plain way to say "not now" in this codebase, and
   any component that sets its own display would otherwise quietly ignore it. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", "Tamil Sangam MN", "Devanagari Sangam MN", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Never force orientation; always allow scrolling when the viewport is short. */
#app { min-height: 100%; display: flex; flex-direction: column; }

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 24px; line-height: 32px; }
h2 { font-size: 18px; line-height: 26px; }
h3 { font-size: 16px; line-height: 24px; }
p { margin: 0 0 var(--s3); }
small, .meta { font-size: 14px; line-height: 20px; color: var(--text-2); }

a { color: var(--primary); }

/* Focus: 2px primary outline with 2px offset (PRD 4.1) */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.stage :focus-visible, .dark :focus-visible { outline-color: #93C5FD; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--surface); padding: var(--s3) var(--s4);
  border-radius: var(--radius-control); box-shadow: var(--shadow-2);
}
.skip-link:focus { top: calc(var(--safe-top) + var(--s2)); }

/* ---------------------------------------------------------------- layout */

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.appbar {
  position: sticky; top: 0; z-index: 20;
  min-height: var(--bar-h);
  padding-top: var(--safe-top);
  display: flex; align-items: center; gap: var(--s2);
  padding-left: var(--s2); padding-right: var(--s2);
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}
.appbar h1, .appbar h2 { flex: 1; min-width: 0; font-size: 18px; line-height: 26px; }
.appbar .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.content {
  flex: 1;
  padding: var(--s4) var(--gutter);
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--s8));
  min-height: 0;
}
.content.flush { padding-left: 0; padding-right: 0; }
.content.no-nav { padding-bottom: calc(var(--safe-bottom) + var(--s6)); }

@media (max-width: 359px) { :root { --gutter: 12px; } }

/* Bottom navigation: icons AND visible labels (PRD 3.1) */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex;
  min-height: var(--nav-h);
  padding-bottom: var(--safe-bottom);
  background: var(--surface);
  border-top: 1px solid var(--divider);
}
.bottom-nav a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: var(--nav-h);
  color: var(--text-2);
  text-decoration: none;
  font-size: 12px; font-weight: 500;
}
.bottom-nav a[aria-current="page"] {
  color: var(--primary);
  font-weight: 600;
  box-shadow: inset 0 2px 0 var(--primary);
  background: var(--selected);
}
.bottom-nav svg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- controls */

button { font: inherit; color: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--secondary-h);
  padding: 0 var(--s4);
  border-radius: var(--radius-control);
  border: 1px solid var(--boundary);
  background: var(--surface);
  color: var(--text);
  font-size: 16px; font-weight: 500;
  cursor: pointer;
  transition: background var(--motion) var(--ease), border-color var(--motion) var(--ease);
}
.btn:hover:not(:disabled) { background: #F3F4F6; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* A label acting as a button: show focus when the control inside it is focused. */
.btn:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
label.btn { cursor: pointer; }

.btn-primary {
  min-height: var(--primary-h);
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: #1E40AF; }

.btn-danger { color: var(--error); border-color: var(--error); }
.btn-danger:hover:not(:disabled) { background: var(--error-bg); }
.btn-quiet { border-color: transparent; background: transparent; }
.btn-quiet:hover:not(:disabled) { background: #EEF0F3; }
.btn-block { width: 100%; }
/* Still visually smaller than a primary button, but a real 44px target: the
   product rule is 44px and a 36px control is genuinely hard to hit on a phone.
   The extra height is padding, so the button does not look bigger. */
.btn-sm { min-height: var(--tap); padding: 0 var(--s3); font-size: 14px; }

/* Icon buttons keep a 44x44 interactive area even with a 20-24px glyph. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  min-width: var(--tap); min-height: var(--tap);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  cursor: pointer;
  flex: none;
}
.icon-btn:hover { background: #EEF0F3; }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn.on { background: var(--selected); color: var(--primary); }

.field { display: block; margin-bottom: var(--s4); }
.field > .label { display: block; font-size: 14px; font-weight: 600; margin-bottom: var(--s1); }
.field .help, .field .error { font-size: 14px; line-height: 20px; margin-top: var(--s1); }
.field .help { color: var(--text-2); }
.field .error { color: var(--error); }

input[type="text"], input[type="email"], input[type="number"], input[type="search"], textarea, select {
  width: 100%;
  min-height: var(--field-h);
  padding: var(--s3);
  font: inherit;
  font-size: 16px; /* never below 16px: prevents iOS zoom on focus */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--boundary);
  border-radius: var(--radius-control);
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--primary); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }

.tnum { font-variant-numeric: tabular-nums; font-size: 14px; }

/* Segmented control (mode selector) — selected state is more than colour. */
.segmented {
  display: flex; gap: var(--s1);
  padding: var(--s1);
  background: #EDEFF3;
  border-radius: var(--radius-control);
}
.segmented button {
  flex: 1;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.segmented button[aria-pressed="true"] {
  background: var(--surface);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
  box-shadow: var(--shadow-1);
}

.chips { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s1); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  min-height: var(--tap);
  padding: 0 var(--s3);
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip[aria-pressed="true"] {
  background: var(--selected); border-color: var(--primary); color: var(--primary); font-weight: 600;
}

/* ---------------------------------------------------------------- surfaces */

.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  padding: var(--s4);
  margin-bottom: var(--s3);
}
.card.tight { padding: var(--s3); }
.stack > * + * { margin-top: var(--s3); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row.tight { gap: var(--s2); }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  border: 1px solid transparent;
}
.status svg { width: 14px; height: 14px; flex: none; }
.status.success { color: var(--success); background: var(--success-bg); border-color: #BBF7D0; }
.status.warning { color: var(--warning); background: var(--warning-bg); border-color: #FDE68A; }
.status.error   { color: var(--error);   background: var(--error-bg);   border-color: #FECACA; }
.status.neutral { color: var(--text-2);  background: #F3F4F6;           border-color: var(--divider); }
.status.working { color: var(--primary); background: var(--selected);   border-color: #BFDBFE; }

.banner {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3);
  border-radius: var(--radius-control);
  border: 1px solid;
  margin-bottom: var(--s3);
  font-size: 15px;
}
.banner svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.banner.info    { background: var(--selected);   border-color: #BFDBFE; color: #1E3A8A; }
.banner.success { background: var(--success-bg); border-color: #BBF7D0; color: var(--success); }
.banner.warning { background: var(--warning-bg); border-color: #FDE68A; color: var(--warning); }
.banner.error   { background: var(--error-bg);   border-color: #FECACA; color: var(--error); }
.banner .banner-body { flex: 1; min-width: 0; }
.banner .banner-actions { display: flex; gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap; }

.empty { text-align: center; padding: var(--s8) var(--s4); }
.empty h2 { margin-bottom: var(--s2); }
.empty p { color: var(--text-2); margin-bottom: var(--s4); }

/* Skeletons match final geometry so nothing jumps (PRD 12) */
.skeleton {
  background: linear-gradient(90deg, #EEF0F3 25%, #E4E7EB 37%, #EEF0F3 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.skeleton-card { height: 104px; margin-bottom: var(--s3); border-radius: var(--radius-card); }

.progress {
  height: 8px; border-radius: 999px; background: #E5E7EB; overflow: hidden;
}
.progress > div { height: 100%; background: var(--primary); transition: width var(--motion) var(--ease); }
.progress.indeterminate > div { width: 40%; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

.meter { margin-bottom: var(--s4); }
.meter .progress { margin-top: 6px; }
.meter .progress > div.over { background: var(--warning); }

/* ---------------------------------------------------------------- sheets */

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(17, 19, 24, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: 100%; max-width: 640px;
  max-height: 88vh;
  background: var(--surface);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: var(--shadow-sheet);
  display: flex; flex-direction: column;
  padding-bottom: var(--safe-bottom);
  animation: sheet-in var(--motion) var(--ease);
}
@keyframes sheet-in { from { transform: translateY(12px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.sheet-head {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  border-bottom: 1px solid var(--divider);
}
.sheet-head h2 { flex: 1; font-size: 17px; }
.sheet-body { padding: var(--s4); overflow-y: auto; flex: 1; }
.sheet-foot {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--divider);
  display: flex; gap: var(--s2);
}
.sheet-foot .btn { flex: 1; }

@media (min-width: 768px) {
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: var(--radius-sheet); max-height: 82vh; }
}

/* Toasts never cover the keyboard Done action or export controls. */
.toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--s3));
  z-index: 60;
  width: min(560px, calc(100vw - var(--s6)));
  display: flex; flex-direction: column; gap: var(--s2);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: #1F2937; color: #fff;
  border-radius: var(--radius-control);
  padding: var(--s3) var(--s4);
  box-shadow: var(--shadow-2);
  display: flex; align-items: center; gap: var(--s3);
  font-size: 15px;
}
.toast button { color: #93C5FD; background: none; border: none; font-weight: 600; cursor: pointer; min-height: 32px; }
.toast.error { background: #7F1D1D; }
.toast.success { background: #14532D; }

/* ---------------------------------------------------------------- editor */

.editor { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.stage {
  background: var(--stage);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  flex: none;
  overflow: hidden;
}
.stage-inner { position: relative; max-width: 100%; max-height: 100%; }
.stage video { display: block; max-width: 100%; max-height: 100%; background: #000; }
.stage canvas.captions {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.stage .expand {
  position: absolute; right: var(--s2); top: var(--s2);
  background: rgba(17, 19, 24, 0.62); color: #fff;
  border-radius: 10px;
}
.stage .expand:hover { background: rgba(17, 19, 24, 0.8); }

.playback {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  flex: none;
  min-height: var(--tap);
}
.scrubber { flex: 1; display: flex; align-items: center; height: var(--tap); }
/* The scrubber is dragged with a thumb, so it gets a full-size target; the
   track it draws stays thin. */
.scrubber input[type="range"] { width: 100%; margin: 0; min-height: var(--tap); }

.mode-bar { padding: var(--s2) var(--gutter); background: var(--surface); border-bottom: 1px solid var(--divider); flex: none; }

.panel { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; padding: var(--s3) var(--gutter); }
.panel::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 4px; }

.context-actions {
  flex: none;
  padding: var(--s2) var(--gutter);
  padding-bottom: calc(var(--s2) + var(--safe-bottom));
  background: var(--surface);
  border-top: 1px solid var(--divider);
  display: flex; gap: var(--s2);
}
.context-actions .btn { flex: 1; }

/* Caption cards */
.cap {
  border: 1px solid var(--divider);
  border-left: 3px solid transparent;
  border-radius: var(--radius-control);
  background: var(--surface);
  padding: var(--s3);
  margin-bottom: var(--s2);
  cursor: pointer;
}
.cap[aria-selected="true"] { border-color: var(--primary); border-left-color: var(--primary); background: var(--selected); }
.cap.playing { border-left-color: var(--primary); }
.cap-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: 4px; }
.cap-time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-2); }
.cap-text { font-size: 16px; line-height: 24px; word-break: break-word; }
.cap-text:empty::before { content: "Add the words for this part"; color: var(--text-2); font-style: italic; }
.cap-actions { display: flex; gap: var(--s2); margin-top: var(--s2); }
.cap textarea { font-size: 16px; line-height: 24px; }

.word-chip {
  display: inline-block;
  padding: 2px 6px;
  margin: 2px;
  border-radius: 6px;
  border: 1px solid var(--divider);
  background: var(--surface);
  font-size: 15px;
  cursor: pointer;
  min-height: 30px;
}
.word-chip[aria-pressed="true"] { background: var(--selected); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.word-chip.unaligned { border-style: dashed; color: var(--warning); }

.waveform { width: 100%; height: 72px; display: block; background: #0F1115; border-radius: 10px; touch-action: none; }

/* Style presets: two-column grid (PRD S10) */
.preset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.preset {
  border: 1px solid var(--divider);
  border-radius: var(--radius-control);
  background: var(--surface);
  padding: 0; overflow: hidden;
  cursor: pointer;
  text-align: left;
}
.preset[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--selected); }
.preset canvas { display: block; width: 100%; height: auto; background: var(--stage); }
.preset .preset-meta { padding: var(--s2) var(--s3); display: flex; align-items: center; gap: 6px; }
.preset .preset-name { font-size: 14px; font-weight: 600; flex: 1; }

.swatches { display: flex; gap: var(--s2); flex-wrap: wrap; }
.swatch { width: 36px; height: 36px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--selected); }

/* Full-screen preview */
.fullscreen {
  position: fixed; inset: 0; z-index: 70;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  padding-top: var(--safe-top); padding-bottom: var(--safe-bottom);
}
.fullscreen .controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s4) var(--gutter) calc(var(--s4) + var(--safe-bottom));
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  display: flex; align-items: center; gap: var(--s3);
  color: #fff;
}
.fullscreen .controls .icon-btn { color: #fff; }
.fullscreen .top { position: absolute; top: calc(var(--safe-top) + var(--s2)); right: var(--s2); display: flex; gap: var(--s2); }

/* ---------------------------------------------------------------- responsive */

@media (min-width: 768px) {
  .content { max-width: 720px; margin: 0 auto; width: 100%; padding-left: var(--s6); padding-right: var(--s6); }
  .preset-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .editor.wide {
    display: grid;
    grid-template-columns: 1fr 400px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "stage panel" "playback panel" "actions panel";
    height: 100%;
  }
  .editor.wide .stage { grid-area: stage; }
  .editor.wide .playback { grid-area: playback; }
  .editor.wide .mode-bar { grid-area: actions; }
  .editor.wide .panel { grid-area: panel; border-left: 1px solid var(--divider); }
  .content { max-width: 960px; }
}

/* Short viewports: shrink the preview first, keep everything reachable. */
@media (max-height: 680px) {
  .stage { max-height: 34vh; }
}
.keyboard-open .stage { display: none; }
.keyboard-open .mode-bar { display: none; }
.keyboard-open .panel { padding-bottom: var(--s12); }

.dark { background: var(--stage); color: #F9FAFB; }

/* ---------------------------------------------------------------------------
 * The studio (S30).
 *
 * Dark by design: a video editor's job is to show the picture, and a light
 * surround changes how the footage reads. The layout is a single column of
 * fixed-height rows around one flexible preview, so it survives a short phone
 * in landscape, a tall phone, and a desktop window without a media query per
 * device.
 * ------------------------------------------------------------------------- */

.studio {
  --studio-bg: #0E0F13;
  --studio-surface: #191B21;
  --studio-line: #2A2D36;
  --studio-text: #F3F4F6;
  --studio-text-2: #9CA3AF;
  --studio-accent: #4F8DFF;

  position: fixed;
  inset: 0;
  display: grid;
  /* Phone first: header, preview, transport, prompt, timeline, tools — one
     column, in the order a thumb travels. The desktop layout below renames the
     same areas rather than restating the markup. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
  grid-template-areas:
    'header'
    'stage'
    'transport'
    'cta'
    'timeline'
    'toolbar';
  background: var(--studio-bg);
  color: var(--studio-text);
  overflow: hidden;
}

.studio-header {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: calc(var(--safe-top) + var(--s2)) var(--s3) var(--s2);
  border-bottom: 1px solid var(--studio-line);
}

.studio-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.studio .icon-btn { color: var(--studio-text); }
.studio .icon-btn:disabled { opacity: 0.4; }

.studio-stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: var(--s3);
  background: #000;
}

.studio-canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  /* The checker is only visible where the composition is transparent, which is
     a truthful signal that there is a hole rather than a black frame. */
  background:
    repeating-conic-gradient(#1b1d23 0% 25%, #15171c 0% 50%) 50% / 16px 16px;
}

.studio-transport {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--studio-line);
}

.studio-readout {
  flex: 1;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--studio-text-2);
  text-align: center;
  white-space: nowrap;
}

.studio-time { color: var(--studio-text); }

.icon-btn.studio-play {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--studio-accent);
  color: #fff;
}

/* ----- timeline ----- */

.studio-timeline {
  position: relative;
  height: 168px;
  border-bottom: 1px solid var(--studio-line);
  background: var(--studio-bg);
}

.studio-scroller {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* The strip is dragged horizontally; letting the browser also pan vertically
     makes scrubbing fight the page. */
  touch-action: pan-x pinch-zoom;
  overscroll-behavior-x: contain;
}

.studio-scroller::-webkit-scrollbar { display: none; }

.studio-tracks {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding-top: var(--s2);
}

/* The playhead is fixed at the centre and the film moves past it, so the frame
   being edited is always under the thumb rather than at a screen edge. */
.studio-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--studio-accent);
  pointer-events: none;
}

.studio-playhead::before {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--studio-accent);
}

.studio-ruler {
  position: relative;
  height: 16px;
  flex: none;
}

.studio-tick {
  position: absolute;
  top: 0;
  font-size: 10px;
  color: var(--studio-text-2);
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
}

.studio-track {
  position: relative;
  height: 46px;
  flex: none;
}

.studio-track[data-kind='text'],
.studio-track[data-kind='sticker'],
.studio-track[data-kind='audio'],
.studio-track[data-kind='overlay'] { height: 28px; }

.studio-clip {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--s2);
  border: 2px solid transparent;
  border-radius: 8px;
  background: #2F3340;
  color: var(--studio-text);
  font-size: 11px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
}

.studio-track[data-kind='text'] .studio-clip { background: #3B3160; }
.studio-track[data-kind='audio'] .studio-clip { background: #1E4038; }
.studio-track[data-kind='overlay'] .studio-clip { background: #3A3145; }

.studio-clip.is-selected {
  border-color: var(--studio-accent);
  z-index: 2;
}

.studio-clip-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.studio-clip-badge {
  flex: none;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 9px;
}

/* Trim handles are deliberately wider than they look: the visible bar is 8px,
   the touch area is a full 44px tap target. */
.studio-trim {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 22px;
  display: block;
  cursor: ew-resize;
  touch-action: none;
}

.studio-trim[data-edge='start'] { left: -2px; }
.studio-trim[data-edge='end'] { right: -2px; }

.studio-trim::after {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 8px;
  border-radius: 4px;
  background: var(--studio-accent);
}

.studio-trim[data-edge='start']::after { left: 2px; }
.studio-trim[data-edge='end']::after { right: 2px; }

.studio-transition {
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--studio-accent);
  color: #fff;
  z-index: 3;
}

.studio-empty {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: var(--studio-text-2);
  font-size: 12px;
}

/* ----- tool row ----- */

.studio-toolbar {
  display: flex;
  gap: var(--s1);
  padding: var(--s2) var(--s2) calc(var(--safe-bottom) + var(--s2));
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--studio-surface);
}

.studio-toolbar::-webkit-scrollbar { display: none; }

.studio-tool {
  flex: none;
  width: 68px;
  min-height: var(--tap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: var(--s2) 0;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--studio-text);
  font-size: 10px;
}

.studio-tool:disabled { opacity: 0.35; }
.studio-tool:active { background: rgba(255, 255, 255, 0.08); }

/* ----- panels inside the sheet ----- */

.studio-panel { display: flex; flex-direction: column; gap: var(--s3); }

.studio-group {
  margin: var(--s2) 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.studio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.studio-chip {
  min-height: var(--secondary-h);
  padding: 0 var(--s3);
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}

.studio-chip.is-active {
  border-color: var(--primary);
  background: var(--selected);
  color: var(--primary);
  font-weight: 600;
}

.studio-field {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: var(--s3);
  font-size: 13px;
}

.studio-slider { width: 100%; min-height: var(--tap); }

.studio-readout-value {
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.studio-check {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  font-size: 14px;
}

.studio-note { margin: 0; color: var(--text-2); font-size: 13px; }
.studio-note.is-error { color: var(--error); }

.studio-textarea { width: 100%; min-height: 88px; }

.studio-list { display: flex; flex-direction: column; gap: var(--s1); }

.studio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--divider);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  text-align: left;
}

.studio-row-meta { color: var(--text-2); font-size: 12px; }



/* Captions inside the studio: their own row on the strip, and stacked fields in
   the panels where a label above the control reads better than beside it. */
.studio-track.studio-captions { height: 38px; }

.studio-caption {
  position: absolute;
  top: 2px;
  bottom: 2px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  border: none;
  border-left: 3px solid #7DD3A0;
  border-radius: 5px;
  background: #24402F;
  color: var(--studio-text);
  font-size: 10px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
}

/* A caption without word timing cannot drive a highlight style, so it looks
   different rather than pretending to be equivalent. */
.studio-caption.is-phrase {
  border-left-color: #C9A227;
  background: #3A3422;
}

.studio-caption-text { overflow: hidden; text-overflow: ellipsis; }

.studio-caption-empty {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  min-height: 26px;
  padding: 0 var(--s2);
  border: 1px dashed var(--studio-line);
  border-radius: 6px;
  background: transparent;
  color: var(--studio-text-2);
  font-size: 11px;
}

.studio-field.is-stacked {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s1);
}

.studio-field.is-stacked > span { font-weight: 600; }
.studio-field.is-stacked select { min-height: var(--field-h); }

/* The "no captions yet" prompt. Present only while that is true, so it cannot
   become permanent furniture. */
.studio-cta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--studio-line);
  background: #1B2436;
}

.studio-cta-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--studio-text);
}

.studio-cta .btn { flex: none; }

/* -------------------------------------------------------------------------
 * Studio layout areas and the desktop edit bay.
 *
 * The phone layout is the base: one column, panels as sheets. From 1024px the
 * same nodes are rearranged into the four-pane shape a desktop editor uses —
 * media library, stage, inspector, and a full-width timeline under a tool row.
 * Nothing is duplicated in the markup; only the placement changes.
 * ---------------------------------------------------------------------- */

.studio-header { grid-area: header; }
.studio-stage { grid-area: stage; }
.studio-transport { grid-area: transport; }
.studio-cta { grid-area: cta; }
.studio-timeline { grid-area: timeline; }
.studio-toolbar { grid-area: toolbar; }
.studio-library { grid-area: library; }
.studio-inspector { grid-area: inspector; }

/* Off on a phone: there is no room, and every panel they hold is one tap away
   as a sheet. */
.studio-library,
.studio-inspector,
.studio-trackheads { display: none; }

.studio-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.studio-heading .studio-title { flex: none; }

.studio-save {
  font-size: 11px;
  line-height: 1;
  color: var(--studio-text-2);
}
.studio-save[data-state='error'] { color: #F0A6A6; }

.studio-header-tools { display: flex; align-items: center; gap: var(--s1); flex: none; }

.studio-hchip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--s2);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--studio-text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.studio-hchip.is-on { color: var(--studio-accent); }
.studio-hchip:hover { background: rgba(255, 255, 255, 0.06); }
.studio-hchip span { display: none; }

/* A phone header holds a back button, the project name and Export, and that is
   all that fits. Canvas and caption visibility live in their own panels there,
   one tap away, rather than squeezing the title or pushing Export off screen. */
.studio-header-tools { display: none; }

/* ----- library and inspector shells ----- */

.studio-library,
.studio-inspector {
  min-height: 0;
  flex-direction: column;
  background: var(--studio-surface);
}
.studio-library { border-right: 1px solid var(--studio-line); overflow-y: auto; padding: var(--s3); gap: var(--s3); }
.studio-inspector { border-left: 1px solid var(--studio-line); }

.studio-side-head {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--studio-text-2);
}

.studio-media,
.studio-tracklist { display: flex; flex-direction: column; gap: var(--s1); }

.studio-media-item,
.studio-tracklist-item {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 40px;
  padding: 0 var(--s2);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--studio-text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.studio-media-item:hover,
.studio-tracklist-item:hover { background: rgba(255, 255, 255, 0.05); }
.studio-media-item.is-selected,
.studio-tracklist-item.is-active {
  border-color: var(--studio-accent);
  background: rgba(79, 141, 255, 0.12);
}

.studio-media-thumb {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  flex: none;
  border-radius: 7px;
  background: var(--studio-clip, #2F3340);
  color: var(--studio-text);
}
.studio-media-thumb[data-kind='audio'] { background: #1E4038; color: #7DD3A0; }
.studio-media-thumb[data-kind='text'] { background: #3B3160; }
.studio-media-thumb[data-kind='caption'] { background: #24402F; color: #7DD3A0; }

.studio-media-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-media-meta { flex: none; font-size: 11px; color: var(--studio-text-2); font-variant-numeric: tabular-nums; }

.studio-side-actions { display: flex; gap: var(--s2); }
.studio-side-actions .btn { flex: 1; padding: 0 var(--s2); }

.studio-inspector-head {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 52px;
  padding: 0 var(--s3);
  border-bottom: 1px solid var(--studio-line);
}
.studio-inspector-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.studio-inspector-title strong { font-size: 13px; font-weight: 600; }
.studio-inspector-title span { font-size: 11px; color: var(--studio-text-2); font-variant-numeric: tabular-nums; }

.studio-inspector-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.studio-props { display: flex; flex-direction: column; gap: var(--s1); }

.studio-prop {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 42px;
  padding: 0 var(--s3);
  border: 1px solid var(--studio-line);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--studio-text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.studio-prop:hover { border-color: var(--studio-accent); background: rgba(79, 141, 255, 0.08); }
.studio-prop-icon { display: flex; flex: none; color: var(--studio-text-2); }
.studio-prop-label { flex: 1; }
.studio-prop-value {
  flex: none;
  max-width: 48%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px;
  color: var(--studio-text-2);
}

.studio-inspector-foot {
  display: flex;
  gap: var(--s2);
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--studio-line);
}
.studio-inspector-foot .btn { flex: 1; min-height: 36px; padding: 0 var(--s2); font-size: 13px; }

/* Panel bodies were written for a light sheet; inside the dark inspector they
   take the studio's own palette rather than punching white holes in it. */
.studio-library .btn,
.studio-inspector .btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--studio-line);
  color: var(--studio-text);
}
.studio-library .btn:hover:not(:disabled),
.studio-inspector .btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.studio-inspector .btn-primary,
.studio-library .btn-primary {
  background: var(--studio-accent);
  border-color: var(--studio-accent);
  color: #fff;
}
.studio-inspector .btn-primary:hover:not(:disabled) { background: #3D79E8; }
.studio-inspector .btn-danger { color: #F0A6A6; border-color: rgba(240, 166, 166, 0.4); }
.studio-inspector .btn-danger:hover:not(:disabled) { background: rgba(240, 166, 166, 0.12); }
.studio-inspector .studio-chip {
  border-color: var(--studio-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--studio-text);
}
.studio-inspector .studio-chip.is-active {
  border-color: var(--studio-accent);
  background: rgba(79, 141, 255, 0.14);
  color: var(--studio-accent);
}
.studio-inspector .studio-group { color: var(--studio-text-2); }
.studio-inspector .studio-note { color: var(--studio-text-2); }
.studio-inspector .studio-row {
  background: transparent;
  border-color: var(--studio-line);
  color: var(--studio-text);
}
.studio-inspector .input,
.studio-inspector select,
.studio-inspector textarea {
  background: var(--studio-bg);
  border-color: var(--studio-line);
  color: var(--studio-text);
}

/* ----- the track-name column beside the strip ----- */

.studio-trackheads {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 172px;
  flex-direction: column;
  gap: var(--s1);
  padding-top: var(--s2);
  background: var(--studio-bg);
  border-right: 1px solid var(--studio-line);
}

.studio-trackhead {
  display: flex; align-items: center; gap: var(--s2);
  height: 46px;
  flex: none;
  padding: 0 var(--s3);
  color: var(--studio-text);
  font-size: 11px;
  font-weight: 600;
}
.studio-trackhead.is-ruler { height: 16px; padding: 0; }
.studio-trackhead[data-kind='text'],
.studio-trackhead[data-kind='sticker'],
.studio-trackhead[data-kind='audio'],
.studio-trackhead[data-kind='overlay'] { height: 28px; }
.studio-trackhead[data-kind='caption'] { height: 30px; }
.studio-trackhead-icon { display: flex; flex: none; color: var(--studio-text-2); }
.studio-trackhead-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----- pointer refinements: a desktop has hover, a phone does not ----- */

@media (hover: hover) {
  .studio-tool:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
  .studio .icon-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
  .studio-clip:hover { border-color: rgba(79, 141, 255, 0.5); }
  .studio-caption:hover { filter: brightness(1.25); }
}

/* From a tablet up there is room for the tool row to read as a toolbar rather
   than a row of phone-sized tiles. */
@media (min-width: 720px) {
  .studio-header-tools { display: flex; }
  .studio-hchip span { display: inline; }

  .studio-toolbar { padding: var(--s2) var(--s3); gap: var(--s2); }
  .studio-tool {
    flex-direction: row;
    width: auto;
    /* Width is not the question a touch target asks. A tablet is 820px wide and
       still driven by a thumb, so the 44px rule holds here; only a fine pointer
       earns the compact row, below. */
    min-height: var(--tap);
    gap: var(--s2);
    padding: 0 var(--s3);
    font-size: 12px;
  }
}

/* A mouse can hit a smaller control accurately; a finger cannot. */
@media (min-width: 720px) and (pointer: fine) {
  .studio-tool { min-height: 36px; }
}

/* The desktop edit bay. */
@media (min-width: 1024px) {
  .studio {
    grid-template-columns: 288px minmax(0, 1fr) 320px;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto 300px;
    grid-template-areas:
      'header    header    header'
      'library   stage     inspector'
      'library   transport inspector'
      'library   cta       inspector'
      'toolbar   toolbar   toolbar'
      'timeline  timeline  timeline';
  }

  .studio-library,
  .studio-inspector,
  .studio-trackheads { display: flex; }

  .studio-header { padding: var(--s2) var(--s4); }
  .studio-title { font-size: 14px; }

  .studio-stage { padding: var(--s4); }

  .studio-toolbar {
    padding: var(--s2) var(--s4);
    border-top: 1px solid var(--studio-line);
    border-bottom: 1px solid var(--studio-line);
  }

  .studio-timeline { height: auto; }

  /* The strip starts after the name column, and the playhead stays over the
     middle of the strip rather than the middle of the window. */
  .studio-scroller { margin-left: 172px; }
  .studio-playhead { left: calc(50% + 86px); }

  .studio-transport { padding: var(--s2) var(--s4); }
  .studio-readout { text-align: left; padding-left: var(--s2); }
}

/* A tall desktop can afford a taller strip; a short one keeps the preview. */
@media (min-width: 1024px) and (min-height: 900px) {
  .studio { grid-template-rows: auto minmax(0, 1fr) auto auto auto 340px; }
}

/* ---------------------------------------------------------------------------
 * Controls that are a target, not just a graphic.
 *
 * A range track is a few pixels tall and a checkbox is 13px by default. Both
 * are perfectly visible and almost impossible to hit accurately with a thumb,
 * so the interactive box is enlarged without changing how they read.
 * ------------------------------------------------------------------------- */

input[type='range'] {
  min-height: var(--tap);
  width: 100%;
  /* The track is drawn small; the element that receives the touch is not. */
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--divider);
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: var(--shadow-1);
}

input[type='range']::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--divider);
}

input[type='range']::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
}

input[type='checkbox'],
input[type='radio'] {
  width: 22px;
  height: 22px;
  accent-color: var(--primary);
  flex: none;
}

/* A checkbox is almost always inside a label. Making the whole row the target
   is both easier to hit and what a person expects to be able to tap. */
label:has(> input[type='checkbox']),
label:has(> input[type='radio']) {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  cursor: pointer;
}

/* The readout must shrink before it clips: a cut-off duration reads as a bug,
   not as a tight layout. */
.studio-readout {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On a narrow phone the header carries back, title, undo, redo and Export. The
   title is the one thing that can give up space. */
.studio-heading { min-width: 0; }

/* ---------------------------------------------------------------------------
 * A pinned action bar.
 *
 * For long review pages where the decision is the point of the screen. The
 * content keeps its own scroll and gets bottom padding so nothing hides behind
 * the bar.
 * ------------------------------------------------------------------------- */

.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  /* Its own gutter, because it sits outside the scrolling content rather than
     inside it. No negative-margin bleed: that depends on the parent's padding
     matching the gutter exactly, and where it did not the bar hung 16px off
     both edges. */
  padding: var(--s3) var(--gutter) calc(var(--safe-bottom) + var(--s3));
  background: var(--bg);
  border-top: 1px solid var(--divider);
}

/* Side by side once there is width for it. */
@media (min-width: 600px) {
  .action-bar { flex-direction: row; }
  .action-bar > .btn { flex: 1; }
}