/* The editor. Loaded after style.css and reusing its tokens, so the editor
   looks like the rest of the site without redefining a palette.

   Two layouts, one document. Above 900px it is the familiar desktop shape:
   bin on the left, preview in the middle, inspector on the right, timeline
   across the bottom. Below that, or on any touch device, it becomes a phone
   editor: preview on top, timeline filling the space, and a context action
   bar in the thumb zone. The difference is a grid template and a couple of
   display rules, not a second set of components. */

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

body.ed-page main { padding: 0; }

.ed-shell {
  /* dvh, not vh: on iOS the address bar makes vh taller than the visible
     page, which would push the action bar under the chrome. The header
     height is measured and set by app.js rather than assumed - it changes
     with the viewport, and guessing it wrong pushes the action bar off the
     bottom of the screen where it cannot be reached at all. */
  height: calc(100dvh - var(--ed-header, 68px));
  min-height: 460px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 300px;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "bin stage inspector"
    "timeline timeline timeline";
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
@supports not (height: 100dvh) {
  .ed-shell { height: calc(100vh - var(--ed-header, 68px)); }
}

.ed-panel { background: var(--bg-soft); min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ed-bin { grid-area: bin; }
.ed-stage { grid-area: stage; background: var(--bg); }
.ed-inspector { grid-area: inspector; }
.ed-timeline-panel { grid-area: timeline; height: 300px; }

.ed-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); flex: 0 0 auto;
}
.ed-panel-head .ed-spacer { flex: 1; }
.ed-panel-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px; }

/* ---- boot and unsupported --------------------------------------------- */

.ed-boot {
  grid-area: stage; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 40px 20px;
}
.ed-boot-inner h1 { font-size: 1.6rem; margin: 0 0 8px; }
.ed-boot-inner p { color: var(--fg-dim); margin: 0; }
.ed-unsupported { max-width: 520px; margin: 0 auto; text-align: left; }
.ed-unsupported ul { color: var(--fg-dim); font-size: 0.9rem; }

/* ---- start screen ------------------------------------------------------ */

.ed-start {
  grid-column: 1 / -1; grid-row: 1 / -1;
  overflow-y: auto; background: var(--bg); padding: 32px 24px 60px;
}
.ed-start-inner { max-width: 900px; margin: 0 auto; }
.ed-start h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 6px; }
.ed-start .lead { color: var(--fg-dim); margin: 0 0 28px; font-size: 1rem; }
.ed-shape-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.ed-shape {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 12px; cursor: pointer; text-align: center; color: var(--fg);
  transition: border-color 0.15s, background 0.15s;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 112px; justify-content: center;
}
.ed-shape:hover, .ed-shape:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.ed-shape[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.ed-shape-box { border: 2px solid currentColor; border-radius: 3px; opacity: 0.75; }
.ed-shape-name { font-weight: 600; font-size: 0.85rem; }
.ed-shape-use { font-size: 0.72rem; color: var(--muted); }

.ed-project-list { display: grid; gap: 8px; margin-top: 10px; }
.ed-project-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.ed-project-row button.ed-open {
  flex: 1; text-align: left; background: none; border: 0; color: var(--fg);
  font: inherit; cursor: pointer; padding: 0; min-height: 32px;
}
.ed-project-row .ed-meta { color: var(--muted); font-size: 0.78rem; }

/* ---- bin -------------------------------------------------------------- */

.ed-dropzone {
  border: 1px dashed var(--border-strong); border-radius: 10px;
  padding: 18px 12px; text-align: center; cursor: pointer; color: var(--fg-dim);
  font-size: 0.85rem; transition: border-color 0.15s, background 0.15s;
}
.ed-dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ed-dropzone input[type=file] { display: none; }

.ed-asset {
  display: flex; gap: 10px; align-items: center; padding: 8px;
  border: 1px solid var(--border); border-radius: 10px; margin-top: 8px;
  background: var(--surface); cursor: grab;
}
.ed-asset:active { cursor: grabbing; }
.ed-asset-thumb {
  width: 64px; height: 40px; border-radius: 6px; background: #000;
  object-fit: cover; flex: 0 0 auto;
}
.ed-asset-info { min-width: 0; flex: 1; }
.ed-asset-name {
  font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ed-asset-sub { font-size: 0.72rem; color: var(--muted); font-family: var(--mono); }
.ed-asset-sub.working { color: var(--accent); }
.ed-asset-sub.failed { color: var(--error); }
.ed-asset-actions { display: flex; flex-direction: column; gap: 4px; }

/* ---- stage ------------------------------------------------------------ */

.ed-stage-inner {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 14px; min-height: 0; position: relative;
}
.ed-canvas-wrap { position: relative; max-width: 100%; max-height: 100%; }
#edCanvas {
  display: block; max-width: 100%; max-height: 100%;
  background: #000; border-radius: 8px; touch-action: none;
}
.ed-stage-hint {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--muted); font-size: 0.9rem;
  text-align: center; padding: 20px; pointer-events: none;
}

.ed-transport {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-top: 1px solid var(--border); flex: 0 0 auto; flex-wrap: wrap;
}
.ed-transport .ed-time {
  font-family: var(--mono); font-size: 0.8rem; color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.ed-icon-btn {
  min-width: 40px; min-height: 40px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); color: var(--fg);
  cursor: pointer; font-size: 0.95rem; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 10px;
}
.ed-icon-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ed-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ed-icon-btn.primary { background: var(--accent); color: #04131a; border-color: var(--accent); font-weight: 600; }

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

.ed-timeline-panel { display: flex; flex-direction: column; background: var(--bg-soft); }
.ed-timeline-tools {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-bottom: 1px solid var(--border); flex: 0 0 auto; overflow-x: auto;
}
.ed-timeline-scroll {
  flex: 1; overflow-x: auto; overflow-y: auto; position: relative;
  /* The gesture recogniser owns every pointer on this surface, so the
     browser must not also pan or zoom it. */
  touch-action: none;
  overscroll-behavior: contain;
}
.ed-timeline-inner { position: relative; min-width: 100%; }

.ed-ruler {
  position: sticky; top: 0; z-index: 3; height: 24px; display: block;
  background: var(--bg-soft); border-bottom: 1px solid var(--border);
}
.ed-track {
  position: relative; height: 64px; border-bottom: 1px solid var(--border);
  background: linear-gradient(var(--bg-soft), var(--bg-soft));
}
.ed-track[data-kind="audio"] { height: 48px; }
/* Sticky so it stays with you as the timeline scrolls, and above the clips
   so it is readable over a filmstrip rather than hidden behind one. */
.ed-track-label {
  position: sticky; left: 0; z-index: 6; float: left; width: 0; height: 0;
}
/* Along the bottom: clip names are drawn across the top, and at time zero a
   top-left label would land straight on the first one. */
.ed-track-label span {
  position: absolute; bottom: 3px; left: 5px; font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg-dim); pointer-events: none;
  background: rgba(8, 13, 24, 0.92); padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--border);
}

.ed-clip {
  position: absolute; top: 4px; bottom: 4px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  overflow: hidden; cursor: pointer; user-select: none;
  will-change: transform, width;
}
.ed-clip[data-kind="gap"] {
  background: repeating-linear-gradient(45deg, transparent, transparent 6px,
    rgba(148,163,184,0.07) 6px, rgba(148,163,184,0.07) 12px);
  border-style: dashed;
}
.ed-clip.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--accent-glow); z-index: 2; }
.ed-clip.dragging { opacity: 0.85; z-index: 4; }
.ed-clip canvas { display: block; width: 100%; height: 100%; }
.ed-clip-label {
  position: absolute; left: 6px; top: 4px; right: 6px;
  font-size: 0.68rem; color: var(--fg); text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.ed-clip-badge {
  position: absolute; right: 6px; bottom: 4px; font-family: var(--mono);
  font-size: 0.6rem; color: var(--fg-dim); text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  pointer-events: none;
}
.ed-clip[data-kind="title"] { background: linear-gradient(180deg, rgba(34,211,238,0.22), rgba(34,211,238,0.08)); }
.ed-clip[data-kind="audio"] { background: linear-gradient(180deg, rgba(52,211,153,0.16), rgba(52,211,153,0.06)); }

.ed-handle {
  position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize;
  background: linear-gradient(var(--accent), var(--accent)); opacity: 0;
  transition: opacity 0.12s;
}
.ed-clip.selected .ed-handle { opacity: 0.85; }
.ed-handle-in { left: 0; border-radius: 8px 0 0 8px; }
.ed-handle-out { right: 0; border-radius: 0 8px 8px 0; }
.ed-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 2px; height: 16px;
  background: rgba(4, 19, 26, 0.7); border-radius: 2px;
}

.ed-transition {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  z-index: 3; min-width: 26px; height: 26px; border-radius: 13px;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  color: var(--fg-dim); font-size: 0.7rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0 6px;
}
.ed-transition:hover, .ed-transition.active { border-color: var(--accent); color: var(--accent); }

.ed-playhead {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent);
  z-index: 5; pointer-events: none; box-shadow: 0 0 10px var(--accent-glow);
}
.ed-playhead::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 8px solid var(--accent);
}
.ed-snapline {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--warn); z-index: 4; pointer-events: none; opacity: 0.9;
}

/* ---- inspector -------------------------------------------------------- */

.ed-field { margin-bottom: 14px; }
.ed-field > label, .ed-field-label {
  display: block; font-size: 0.75rem; color: var(--fg-dim); margin-bottom: 5px;
  font-family: var(--mono); letter-spacing: 0.04em;
}
.ed-field input[type=range] { width: 100%; accent-color: var(--accent); min-height: 32px; }
.ed-field select, .ed-field input[type=text], .ed-field input[type=number], .ed-field textarea {
  width: 100%; background: var(--bg-elev); color: var(--fg);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  font: inherit; font-size: 0.86rem; min-height: 40px;
}
.ed-field textarea { min-height: 72px; resize: vertical; font-family: inherit; }
.ed-field input:focus, .ed-field select:focus, .ed-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.ed-field .ed-value { float: right; font-family: var(--mono); color: var(--accent); font-size: 0.75rem; }
.ed-row { display: flex; gap: 8px; }
.ed-row > * { flex: 1; min-width: 0; }
.ed-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-chip {
  padding: 7px 11px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--border); color: var(--fg-dim); cursor: pointer;
  font-size: 0.78rem; min-height: 34px;
}
.ed-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.ed-empty { color: var(--muted); font-size: 0.85rem; text-align: center; padding: 28px 10px; }

/* ---- action bar (touch) ----------------------------------------------- */

.ed-actionbar { display: none; }

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

.ed-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(4, 8, 16, 0.62);
  z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.18s;
}
.ed-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.ed-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--bg-elev); border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0; max-height: 78dvh; overflow-y: auto;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 0.22s ease;
}
.ed-sheet.open { transform: translateY(0); }
.ed-sheet-grip {
  width: 42px; height: 4px; border-radius: 2px; background: var(--border-strong);
  margin: 8px auto 12px;
}
.ed-sheet h3 { margin: 0 0 12px; font-size: 1rem; }
/* Sticky, but without overriding .btn's own background - the button has to
   stay readable, so the separation comes from a shadow instead. */
.ed-sheet-done {
  position: sticky; bottom: 0; width: 100%; margin-top: 16px;
  box-shadow: 0 -14px 18px var(--bg-elev);
}

/* ---- export ----------------------------------------------------------- */

.ed-export-progress { margin-top: 14px; }
.ed-export-note { font-size: 0.8rem; color: var(--muted); margin-top: 8px; }
.ed-export-result video { width: 100%; border-radius: 10px; background: #000; margin-bottom: 12px; }
.ed-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 70; background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 10px 16px; font-size: 0.85rem; color: var(--fg);
  max-width: min(92vw, 460px); box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.ed-toast.error { border-color: var(--error); color: var(--error); }
.ed-toast.success { border-color: var(--success); color: var(--success); }

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

@media (max-width: 899px), (pointer: coarse) and (max-width: 1100px) {
  /* The site header stacks into two rows at this width, and seven nav links
     wrap onto a second line. On an ordinary page that costs a little scroll;
     here it would eat a third of the editor. Keep it one row and let the
     links scroll sideways instead, so every destination is still reachable. */
  body.ed-page .site-header .container {
    flex-direction: row; align-items: center; height: 56px; padding: 0 12px;
  }
  body.ed-page .site-header nav {
    margin-top: 0; margin-left: auto; overflow-x: auto; white-space: nowrap;
    scrollbar-width: none; max-width: 58%;
  }
  body.ed-page .site-header nav::-webkit-scrollbar { display: none; }
  body.ed-page .site-header nav a { margin: 0 7px; }
  body.ed-page .logo { font-size: 0.95rem; }

  .ed-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "stage" "timeline" "actionbar";
  }
  /* The bin and inspector become sheets rather than columns. */
  .ed-bin, .ed-inspector { display: none; }
  .ed-bin.as-sheet, .ed-inspector.as-sheet { display: flex; }
  .ed-stage { max-height: 40dvh; }
  .ed-timeline-panel { height: auto; min-height: 0; }
  .ed-actionbar {
    grid-area: actionbar; display: flex; gap: 6px; overflow-x: auto;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--bg-elev); border-top: 1px solid var(--border);
    scrollbar-width: none;
  }
  .ed-actionbar::-webkit-scrollbar { display: none; }
  .ed-actionbar .ed-act {
    flex: 0 0 auto; min-width: 64px; min-height: 52px; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--border); color: var(--fg-dim);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; font-size: 0.66rem; cursor: pointer; padding: 4px 10px;
  }
  .ed-actionbar .ed-act .ed-act-icon { font-size: 1rem; line-height: 1; }
  .ed-actionbar .ed-act:disabled { opacity: 0.35; }
  .ed-actionbar .ed-act.primary { background: var(--accent); color: #04131a; border-color: var(--accent); }
  .ed-track { height: 56px; }
  .ed-track[data-kind="audio"] { height: 42px; }
  /* A finger is not a mouse pointer: the trim handles need a real target. */
  .ed-handle { width: 22px; opacity: 0; }
  .ed-clip.selected .ed-handle { opacity: 0.9; }

  /* The consent bar reserves space at the bottom of ordinary pages. Here the
     shell is already exactly the height of the viewport, so that padding
     would push the action bar off screen. Let the bar overlay instead. */
  body.ed-page.consent-open { padding-bottom: 0; }
}

/* On a wide screen the same sheet becomes a centred dialog. It used to be
   hidden here, which quietly made Export and Transitions unreachable on
   desktop - both of them open through it. */
@media (min-width: 900px) {
  .ed-sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(460px, calc(100vw - 48px));
    max-height: min(78vh, 720px);
    border: 1px solid var(--border-strong); border-radius: 14px;
    padding: 8px 20px 20px;
    transform: translate(-50%, -46%) scale(0.98);
    opacity: 0; pointer-events: none;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  }
  .ed-sheet.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; pointer-events: auto;
  }
  .ed-sheet-grip { display: none; }
  .ed-sheet-done { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ed-sheet, .ed-sheet-backdrop, .ed-clip, .ed-handle { transition: none; }
}

/* ---- tools ------------------------------------------------------------- */

.ed-toolset { display: inline-flex; gap: 2px; margin-right: 6px; }
.ed-tool {
  min-width: 34px; min-height: 34px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); color: var(--fg-dim);
  cursor: pointer; display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1; gap: 1px;
  font-size: 0.82rem; padding: 0 5px;
}
.ed-tool:hover { border-color: var(--accent); color: var(--accent); }
.ed-tool[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.ed-tool-key { font-family: var(--mono); font-size: 0.52rem; opacity: 0.75; }
.ed-snap[aria-pressed="false"] { opacity: 0.45; }

/* The cursor is half the feedback: it says what a drag is about to do. */
.ed-timeline-scroll[data-tool="blade"] .ed-clip { cursor: crosshair; }
.ed-timeline-scroll[data-tool="roll"] .ed-clip { cursor: col-resize; }
.ed-timeline-scroll[data-tool="slip"] .ed-clip,
.ed-timeline-scroll[data-tool="slide"] .ed-clip { cursor: ew-resize; }
.ed-timeline-scroll[data-tool="blade"] .ed-handle,
.ed-timeline-scroll[data-tool="roll"] .ed-handle,
.ed-timeline-scroll[data-tool="slip"] .ed-handle,
.ed-timeline-scroll[data-tool="slide"] .ed-handle { display: none; }

/* In and out marks on the timeline, the way a source monitor shows them. */
.ed-mark {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--warn); opacity: 0.85; z-index: 4; pointer-events: none;
}
.ed-mark::after {
  content: ""; position: absolute; top: 0; width: 8px; height: 8px;
  background: var(--warn);
}
.ed-mark-in::after { left: 0; }
.ed-mark-out::after { right: 0; }
.ed-marked-range {
  position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none;
  background: rgba(251, 191, 36, 0.09);
  border-top: 2px solid rgba(251, 191, 36, 0.5);
}

@media (max-width: 899px), (pointer: coarse) and (max-width: 1100px) {
  /* Tools are a pointer idea; a finger gets the action bar instead. */
  .ed-toolset, .ed-snap { display: none; }
}

/* ---- keyboard reference ------------------------------------------------ */

.ed-keylist { margin-bottom: 14px; }
.ed-keyrow {
  display: flex; align-items: baseline; gap: 12px; padding: 4px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}
.ed-keys { flex: 0 0 34%; display: flex; flex-wrap: wrap; gap: 3px; }
.ed-keys kbd {
  font-family: var(--mono); font-size: 0.68rem; padding: 2px 6px;
  border-radius: 5px; background: var(--surface-2);
  border: 1px solid var(--border-strong); color: var(--fg);
}
.ed-keylabel { font-size: 0.82rem; color: var(--fg-dim); }
.ed-asset.picked { border-color: var(--accent); background: var(--accent-soft); }
.ed-asset.missing { border-color: var(--error); }

/* ---- add tile and levelled action bar ---------------------------------- */

.ed-addtile {
  position: absolute; top: 4px; bottom: 4px; width: 46px;
  border-radius: 8px; border: 1px dashed var(--border-strong);
  background: var(--surface); color: var(--fg-dim);
  font-size: 1.2rem; cursor: pointer; z-index: 2;
}
.ed-addtile:hover { border-color: var(--accent); color: var(--accent); }

.ed-actionbar .ed-act-back {
  min-width: 52px; border-style: dashed;
}
.ed-actionbar[data-level="speed"] .ed-act,
.ed-actionbar[data-level="volume"] .ed-act {
  min-width: 62px; font-size: 0.78rem;
}

/* ---- compact phone transport ------------------------------------------- */

@media (max-width: 899px), (pointer: coarse) and (max-width: 1100px) {
  /* One row, not two. Every pixel the transport takes is a pixel off the
     preview, which is the thing people are actually looking at. */
  .ed-transport {
    flex-wrap: nowrap; gap: 5px; padding: 6px 8px; overflow-x: auto;
    scrollbar-width: none;
  }
  .ed-transport::-webkit-scrollbar { display: none; }
  .ed-transport .ed-icon-btn { min-width: 38px; min-height: 38px; padding: 0 8px; }
  .ed-transport .ed-time { font-size: 0.72rem; white-space: nowrap; }
  /* Export and the keyboard reference both live elsewhere on a phone: Export
     is the primary action in the bar below, and there is no keyboard. */
  .ed-transport [data-act="export"],
  .ed-transport [data-act="keys"] { display: none; }

  .ed-timeline-tools { padding: 4px 8px; gap: 4px; }
  .ed-timeline-tools .ed-icon-btn { min-width: 36px; min-height: 36px; }
  .ed-timeline-tools .ed-time { font-size: 0.78rem; }

  /* The tracks should sit at the top of the timeline, not float in the
     middle of a tall empty panel. */
  .ed-timeline-scroll { align-items: flex-start; }
  .ed-track-label span { font-size: 0.55rem; padding: 1px 5px; }
}

/* ---- effects and keyframes ---------------------------------------------
   The Look chips are the front door; the sliders live behind a <details> so
   the inspector does not become a wall of controls for someone who only
   wanted a warmer picture. */

.ed-fx {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 8px 0;
  background: var(--panel-2, rgba(255, 255, 255, 0.02));
}
.ed-fx > summary {
  cursor: pointer;
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  list-style: none;
}
.ed-fx > summary::-webkit-details-marker { display: none; }
.ed-fx > summary::before { content: '▸ '; opacity: 0.6; }
.ed-fx[open] > summary::before { content: '▾ '; }
.ed-fx-body { padding: 2px 10px 10px; }
.ed-fx-remove { margin-top: 6px; }
.ed-fx-add { width: 100%; }

/* The keyframe diamond. Filled means this property is animated; the slider
   then writes a key at the playhead instead of one value for the whole clip. */
.ed-kf {
  float: right;
  border: 0;
  background: none;
  color: var(--muted, #888);
  font-size: 0.72rem;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  opacity: 0.55;
}
.ed-kf:hover { opacity: 1; }
.ed-kf.on { color: var(--accent); opacity: 1; }

/* A clip carrying effects gets an accent edge, so it reads without the badge
   having to be legible at small zoom levels. */
.ed-clip[data-fx] { box-shadow: inset 2px 0 0 var(--accent); }

@media (pointer: coarse) {
  /* A 6px diamond is not a touch target. */
  .ed-kf { padding: 10px 12px; font-size: 0.9rem; }
}

/* ---- captions ----------------------------------------------------------
   The download note has to be readable before anyone commits to 45MB, so it
   is body text rather than a hint. */

.ed-note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted, #9aa);
  margin: 8px 0;
}
.ed-note strong { color: var(--text, #e8e8ea); }

.ed-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
  margin: 8px 0;
}
.ed-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.2s ease;
}

/* A keyframe on the selected clip. Only the selected clip shows these: a
   timeline covered in diamonds tells you nothing. */
.ed-kfmark {
  position: absolute;
  bottom: 1px;
  transform: translateX(-50%);
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 0.6rem;
  line-height: 1;
  padding: 2px 3px;
  cursor: pointer;
  z-index: 4;
  text-shadow: 0 0 2px #000;
}
.ed-kfmark:hover { transform: translateX(-50%) scale(1.3); }

@media (pointer: coarse) {
  .ed-kfmark { padding: 6px 8px; font-size: 0.7rem; }
}