@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/timeline-rows.css

@@ -0,0 +1,1959 @@
+/* The timeline's ROWS mode: the sticky label column, every row kind (shots, lifespans, camera moves,
+   camera poses, channels, + property and its picker, audio, markers), the cut markers, the
+   rubber band and the group separators. Imported right after timeline.css (the dock frame), in
+   the same layer. A row rule and a frame rule never style one element at equal specificity, so
+   which of the two files comes first decides nothing; keep it that way. */
+
+/* ── THE DOCK'S LABEL COLUMN IS STICKY ────────────────────────────────────
+   Every row in the timeline is `[label cell | time area]` inside ONE
+   horizontally scrolling box, so the names used to scroll away with the bars.
+   That was survivable while the only way to scroll was a deliberate
+   shift+wheel pan. It is not survivable now that the lane FOLLOWS THE PLAYHEAD:
+   every playback slides the whole column off the left edge and leaves the
+   author watching a wall of anonymous bars.
+
+   Six cells, one rule, because they are one column — a per-component copy is
+   six places to forget the z-index.
+
+   OPAQUE, and that is the load-bearing part: a transparent sticky cell has bars
+   sliding visibly through the layer names. `--surface-panel` is the dock's own
+   surface (`.timeline-dock`, timeline.css), so the column reads as part of
+   the dock rather than as a card on top of it.
+
+   Sticky and NOT a separate fixed column beside the scroller: the rows already
+   own their own labels, and splitting them would mean two scroll containers
+   kept in vertical sync by hand — one more thing that can drift, for a layout
+   the browser does for free. */
+.shot-label-cell,
+.block-row-label-cell,
+.channel-label-cell,
+.lifespan-label-cell,
+.marker-label-cell,
+.audio-label-cell {
+  position: sticky;
+  left: 0;
+  /* Above the bars in the same row (a scene cut is 3) AND above
+     `.dock-overlay` (3: the playhead, the boundaries and the snap guide). The
+     overlay is a sibling of the rows in content coordinates, so once the lanes
+     scroll left its lines slide under this column; painted over it, a playhead
+     whose frame had scrolled out of view crossed the shot names instead. In
+     view, every line sits right of `labelWidth` and nothing is covered. */
+  z-index: 4;
+  background-color: var(--surface-panel);
+}
+
+/* THE LABEL COLUMN CONTINUES THE LEFT COLUMN'S SEAM. It is exactly the rail
+   track's width (labelWidth.ts), and the rail draws its border on its last
+   pixel, so the same 1px line runs from the top bar down through the ruler
+   corner and every row. A rule of its own because `.scene-audio-label` takes
+   the seam but not the sticky recipe above. */
+.shot-label-cell,
+.block-row-label-cell,
+.channel-label-cell,
+.lifespan-label-cell,
+.marker-label-cell,
+.audio-label-cell,
+.scene-audio-label {
+  border-right: 1px solid var(--line);
+}
+
+/* NO ROW TINTS. A selected or current row is said by its CLIP (the outline,
+   the solid live fill, `states.css`) and by its label's weight, never by an
+   `--accent-quiet` wash across the row: the wash fought the clip for the one
+   accent the lane has, and on a three-row dock it lit a third of the panel. */
+
+/* THE CLIP, option A, the one recipe every lane clip reads from: a top-down
+   accent wash 18% to 6% in oklab under a 1.5px accent edge at 45%, radius 6,
+   20 tall at 4 from the row's top, 11/400 accent ink inside. The shot clip
+   is the same at 22%/8% with a 60% edge. Tokens so `states.css` can name the
+   rest look when it lays the selected edge over it. */
+.timeline-dock {
+  --clip-rest: linear-gradient(
+    in oklab 180deg,
+    color-mix(in oklab, var(--accent) 18%, transparent),
+    color-mix(in oklab, var(--accent) 6%, transparent)
+  );
+  --clip-edge: color-mix(in oklab, var(--accent) 45%, transparent);
+  --clip-shot-rest: linear-gradient(
+    in oklab 180deg,
+    color-mix(in oklab, var(--accent) 22%, transparent),
+    color-mix(in oklab, var(--accent) 8%, transparent)
+  );
+  --clip-shot-edge: color-mix(in oklab, var(--accent) 60%, transparent);
+}
+
+/* The cut marker: a small diamond ON the seam, hollow for a hard cut and
+   filled when the shot before it blends. Centred by a half-width translate so
+   it sits on the boundary rather than after it. Below the playhead (z 4) so the
+   frame you are on always wins. */
+.scene-cut {
+  position: absolute;
+  top: 50%;
+  width: 9px;
+  height: 9px;
+  padding: 0;
+  transform: translate(-50%, -50%) rotate(45deg);
+  border: 1px solid var(--ink-3);
+  border-radius: var(--radius-2xs);
+  background: var(--surface-panel);
+  cursor: pointer;
+  z-index: 3;
+}
+
+.scene-cut:hover {
+  border-color: var(--ink-1);
+}
+
+.scene-cut.is-blend {
+  border-color: var(--accent);
+  background: var(--accent);
+}
+
+/* The blend's length, drawn forward from the cut into the incoming shot's
+   space — which is where `transitionAt` puts the window.
+
+   Accent at low alpha rather than a fill: the ribbon overhangs the row beneath
+   it, and a solid bar there would read as a shot that is not one. It sits
+   BELOW the diamond (z-index 2 against its 3) so the seam's own control stays
+   the top target, and it is pointer-transparent so only the handle inside it
+   takes a drag. */
+.scene-blend {
+  position: absolute;
+  top: 50%;
+  height: 9px;
+  transform: translateY(-50%);
+  border: 1px solid var(--accent);
+  border-left: none;
+  border-radius: 0 var(--radius-2xs) var(--radius-2xs) 0;
+  background: color-mix(in oklab, var(--accent) 22%, transparent);
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* The one thing in the ribbon that is a target. `.scene-trim` supplies the
+   7px column and the col-resize cursor; this only re-enables the pointer the
+   ribbon turned off. */
+.scene-blend .scene-trim {
+  pointer-events: auto;
+}
+
+/* THE RUBBER BAND, over the rows it is selecting.
+
+   AN EDGE AND A WASH, never a surface step. `--panel-raised` IS `--panel` in
+   the light appearance, so a band drawn as a lighter fill over the lane would
+   be invisible in exactly one of the two themes and perfect in the other. The
+   1px accent edge is what reads in both, and the 12% wash is there only to say
+   which side of the line is inside: it is the same pair the stage's own marquee
+   draws with (`Overlays.tsx`), so the two surfaces spell one gesture one way.
+
+   `--marquee` and not `--accent` directly: the token exists for this, and the
+   stage reads it from the same file (shotTokens.css).
+
+   Pointer-transparent, and level with the sticky label cells (4) but later in
+   the DOM, so it is drawn THROUGH them: a band that vanished behind the column
+   would stop halfway across its own box. Below the sticky ruler (5). */
+.dock-marquee {
+  position: absolute;
+  border: 1px solid var(--marquee);
+  background: color-mix(in srgb, var(--marquee) 12%, transparent);
+  border-radius: var(--radius-2xs);
+  pointer-events: none;
+  z-index: 4;
+}
+
+/* Groups are separated by the boundary line above; this is the horizontal half
+   of the same statement, for a reader scanning the label column.
+   A CLASS AND NOT AN ADJACENT SIBLING: past the virtual window's threshold a
+   spacer can sit between two groups, so `+` lost the line at a window edge
+   while `groupHeights` still counted it. The class follows the group's index,
+   which is what the prefix sum counts. */
+.dock-scene-group.has-separator {
+  border-top: 1px solid var(--line);
+}
+
+/* ---- shot rows ---------------------------------------------------------- */
+/* One row per shot, at the head of that shot's group. Taller than a block row
+   and quieter than a lifespan bar, because it is the thing all of them sit
+   INSIDE — and its bar and the boundary lines through the track area are the
+   same prefix sum, so nothing can move one without the other. */
+.shot-row {
+  display: flex;
+  align-items: stretch;
+  /* SHOT_ROW_H in model.ts, which the vertical follow and the group sums read.
+     A px literal so the row-metrics test can compare the two. */
+  height: 28px;
+  border-bottom: 1px solid var(--line-soft);
+  /* Same isolation boundary as .lifespan-row, same legality note. */
+  contain: layout paint;
+}
+
+/* THE SHOT LABEL: an accent 8px swatch, the name at 12/600 ink, and at the
+   end the fold: "N layers ›", which opens the shot's layer rows under it. */
+.shot-label-cell {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: 0 var(--space-7) 0 var(--space-7);
+  flex: none;
+  overflow: hidden;
+}
+
+.shot-swatch {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-2xs);
+  background: var(--accent);
+}
+
+.shot-disclosure {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-left: auto;
+  font: inherit;
+  font-size: var(--type-sm);
+  line-height: var(--leading-none);
+  color: var(--ink-3);
+  background: transparent;
+  border: 0;
+  padding: var(--space-2) 0;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.shot-disclosure:hover {
+  color: var(--ink-1);
+}
+
+.shot-fold-chevron {
+  flex: none;
+  width: 12px;
+  height: 12px;
+  transition: transform var(--dur-fast) var(--ease);
+}
+
+.shot-fold-chevron.is-open {
+  transform: rotate(90deg);
+}
+
+.shot-name {
+  font: inherit;
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+  color: var(--ink-1);
+  background: transparent;
+  border: 0;
+  padding: var(--space-1) 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.shot-rename {
+  font: inherit;
+  font-weight: 600;
+  color: var(--ink-1);
+  background: var(--fill-rest);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-xs);
+  padding: 1px var(--space-2);
+  min-width: 0;
+  flex: 1;
+}
+
+.shot-lane {
+  position: relative;
+  flex: 1;
+}
+
+/* THE SHOT CLIP, option A at its heavier step: the accent wash 22% to 8%
+   under a 1.5px accent edge at 60%, radius 6, 20 tall at 4 from the row's top
+   (the row is 28 with a 1px bottom border, so 3 stay clear under it). The name
+   at 11/600 accent ink, the length at the far end in mono 10. Solid accent
+   while the playhead is in it (`states.css`). */
+.shot-bar {
+  position: absolute;
+  top: 4px;
+  height: 20px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: 0 var(--space-4);
+  border-radius: var(--radius-sm);
+  background: var(--clip-shot-rest);
+  border: 1.5px solid var(--clip-shot-edge);
+  color: var(--accent-ink);
+  font-size: var(--type-sm);
+  line-height: var(--leading-none);
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.shot-bar-name {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: var(--weight-semibold);
+}
+
+/* The shot's length ("18.00s", `formatDuration`), pushed to the clip's far
+   end. Mono, so a column of lengths reads as numbers. */
+.shot-frames {
+  flex: none;
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: var(--type-micro);
+  font-variant-numeric: var(--numeric);
+  white-space: nowrap;
+}
+
+/* Reorder feedback: the line on the side the dragged shot lands, the outline's
+   `.layer-row.is-drop-*` recipe turned on its side. */
+.shot-bar.is-drop-before {
+  box-shadow: inset 2px 0 0 var(--ink-1);
+}
+
+.shot-bar.is-drop-after {
+  box-shadow: inset -2px 0 0 var(--ink-1);
+}
+
+/* THE WAY IN. Sits inside the clip after the length, left of the trim handle,
+   and is the only control on the row that changes what the whole chrome is
+   showing: an aimed target beside the double-click. The trim handle's width
+   stays reserved so the two never overlap. */
+.scene-open {
+  flex: none;
+  margin-right: var(--dock-trim-w);
+  font: inherit;
+  font-size: var(--type-lg);
+  line-height: var(--leading-none);
+  color: inherit;
+  opacity: 0.7;
+  background: transparent;
+  border: 0;
+  padding: 0 var(--space-1);
+  border-radius: var(--radius-2xs);
+  cursor: pointer;
+}
+
+.scene-open:hover {
+  opacity: 1;
+  background: color-mix(in srgb, currentColor 18%, transparent);
+}
+
+.scene-trim {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--dock-trim-w);
+  cursor: col-resize;
+}
+
+/* The grip, drawn only on the edge that really drags. The head of a shot is
+   not a handle (moving it is a reorder, not a trim), so it carries none: a grip
+   there would promise a drag that does nothing. A 2x12 grip in the clip's own
+   ink (accent at rest, white on the live fill): heavier than a lifespan bar's
+   grip because this edge moves every shot after it. */
+.scene-trim::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 2px;
+  height: 12px;
+  /* The ladder's first step: on a 2px-wide grip it clamps to fully round ends. */
+  border-radius: var(--radius-2xs);
+  transform: translate(-50%, -50%);
+  background: currentColor;
+  pointer-events: none;
+}
+
+
+/* ---- lifespan rows ------------------------------------------------------ */
+/* The layer's own bar: taller and quieter than a block bar, because it is the
+   thing a block sits INSIDE. Solid-ish fill rather than the block's outline,
+   so a row reads as one object with intervals on it rather than as a pile of
+   equal-weight rectangles. */
+.lifespan-row {
+  display: flex;
+  align-items: stretch;
+  height: 28px;
+  border-bottom: 1px solid var(--line-soft);
+  /* Fixed-height rows are isolation boundaries: a style change inside one
+     (a bar drag, a hover) must not invalidate layout or repaint outside it.
+     Legal here — the containment ban (styles.css:5) covers only ancestors of
+     the stage iframe, and the dock is its sibling. */
+  contain: layout paint;
+}
+
+/* A PICK ELSEWHERE REVEALED THIS ROW (Paper page 23, "6 · Reveal on select"):
+   one wash of the accent that settles back to the row's own ground, selected
+   or not, so the eye lands on it after the scroll. No fill mode: when it ends
+   the row is exactly what it was, and the dock takes the class back. */
+@keyframes row-revealed {
+  from { background-color: var(--accent-soft); }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .lifespan-row.is-revealed { animation: row-revealed 900ms var(--ease); }
+}
+
+.lifespan-label-cell {
+  /* `--mask-inset` makes room for the row's mask brackets (maskMarks.tsx),
+     which sit against this box like the outline's sit against its row. */
+  position: relative;
+  /* 32 in from the seam and 16 short of it, the boards' layer label, plus the
+     tree's indent and the mask brackets' room. */
+  padding-left: calc(var(--space-7) * 2 + var(--depth, 0) * var(--tree-indent) + var(--mask-inset, 0px));
+  padding-right: var(--space-7);
+  display: flex;
+  align-items: center;
+  flex: none;
+  overflow: hidden;
+}
+
+.lifespan-disclosure {
+  font: inherit;
+  font-size: var(--type-micro);
+  line-height: var(--leading-none);
+  color: var(--ink-3);
+  background: transparent;
+  border: 0;
+  padding: var(--space-2) var(--space-2);
+  cursor: pointer;
+  flex: none;
+}
+
+.lifespan-disclosure:hover {
+  color: var(--ink-1);
+}
+
+/* 12px secondary at rest. The row whose clip the playhead is in lifts its
+   name to 600 ink (`states.css`); selection does not, the clip says it. */
+.lifespan-name {
+  font: inherit;
+  font-size: var(--type-md);
+  color: var(--ink-2);
+  background: transparent;
+  border: 0;
+  text-align: left;
+  padding: 0 var(--space-3);
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.lifespan-lane {
+  position: relative;
+  flex: 1;
+}
+
+/* CLIP OPTION A AT REST: the accent wash under its 45% edge, radius 6, 20
+   tall at 4 under the row's top (3 clear of its 1px bottom border), 8 in, the
+   name at 11/400 accent ink. The tokens are on `.timeline-dock` above. */
+.lifespan-bar {
+  position: absolute;
+  top: 4px;
+  bottom: 3px;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-4);
+  border-radius: var(--radius-sm);
+  background: var(--clip-rest);
+  border: 1.5px solid var(--clip-edge);
+  color: var(--accent-ink);
+  font-size: var(--type-sm);
+  font-weight: var(--weight-regular);
+  cursor: grab;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.lifespan-bar:hover {
+  border-color: color-mix(in oklab, var(--accent) 70%, transparent);
+}
+
+/* A VIDEO CLIP keeps the hueless ground: its picture and its waveform fill the
+   box (the inline style drops the border and the padding), and an accent wash
+   under footage would tint the frames. */
+.lifespan-bar.is-video {
+  background: var(--bar-ground);
+  color: var(--ink-1);
+}
+
+/* SELECTED IS AN EDGE, never a fill: the fill says whether the clip is playing
+   now (states.css), and an author routinely has one clip selected and another
+   under the playhead. The full accent edge at 1.5px over the rest wash, the
+   name at 600, and white trim handles 3x12 at each end. Selected AND live is
+   the solid fill with the same handles. The video clip has no border of its
+   own, so its selection stays an outline. */
+.lifespan-bar.is-selected {
+  border-color: var(--accent);
+  padding-inline: calc(var(--space-3) / 2);
+}
+
+.lifespan-bar.is-selected .lifespan-bar-name {
+  font-weight: var(--weight-semibold);
+}
+
+.lifespan-bar.is-video.is-selected {
+  outline: 1.5px solid var(--accent);
+  outline-offset: -1.5px;
+}
+
+/* THE STAGGER (Paper page 23, "8 · Stagger"). A dashed ghost where each moving
+   bar started, an accent rule above it as long as the bar's shift, and the step
+   readout beside the grabbed bar. All three are drawn only while ⌥ drags a
+   selection, and none takes a pointer. The ghost is the bar's own box. */
+.stagger-ghost {
+  position: absolute;
+  top: 4px;
+  bottom: 5px;
+  border: 1px dashed var(--ink-3);
+  border-radius: var(--radius-2xs);
+  background: color-mix(in srgb, var(--wash-ink) 3%, transparent);
+  pointer-events: none;
+}
+
+.stagger-shift {
+  position: absolute;
+  top: calc(-1 * var(--space-3));
+  height: 1px;
+  background: var(--accent-ink);
+}
+
+.stagger-chip {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: var(--space-4);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-1) var(--space-4);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-sm);
+  background: var(--surface-panel);
+  box-shadow: var(--shadow-control);
+  font-size: var(--type-sm);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.stagger-chip-step {
+  color: var(--ink-1);
+  font-weight: var(--weight-semibold);
+  font-variant-numeric: var(--numeric);
+}
+
+.stagger-chip-key {
+  color: var(--ink-3);
+}
+
+/* ---- the stretch bracket (KeyStretch.tsx) --------------------------------
+   The selected keys' span: a guide through the rows at each end (in the
+   pointer-transparent overlay), in the key colour (never the accent), and in
+   the sticky ruler a band over the span with a grab tab just inside each end,
+   so it never scrolls away and survives the ruler's clip at frame 0. The
+   readout sits in the ruler beside the tab being dragged. */
+.dock-key-stretch-guide {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--kf-soft);
+  pointer-events: none;
+}
+
+.dock-key-stretch-handle {
+  position: absolute;
+  top: var(--space-1);
+  bottom: var(--space-1);
+  width: var(--space-4);
+  border: 1px solid var(--kf);
+  background: var(--surface-panel);
+  border-radius: var(--radius-2xs);
+  cursor: ew-resize;
+  pointer-events: auto;
+}
+
+.dock-key-stretch-band {
+  position: absolute;
+  top: var(--space-1);
+  bottom: var(--space-1);
+  background: var(--kf-soft);
+  border-radius: var(--radius-2xs);
+  pointer-events: none;
+}
+
+.dock-key-stretch-handle.is-right {
+  transform: translateX(-100%);
+}
+
+.dock-key-stretch-handle:hover {
+  background: var(--kf-soft);
+}
+
+.dock-key-stretch-chip {
+  z-index: 1;
+}
+
+.lifespan-bar-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+
+/* THE FULL NAME, OUTSIDE. A name that does not fit its clip is never cut: it
+   sits in the lane after the clip, or before it when the clip ends at the
+   track's end (`clipNamePlace`), at the inside name's size and ink. The 6px
+   gap and the side come from the row; this is only the type. */
+.lifespan-bar-name.is-outside {
+  position: absolute;
+  top: 7px;
+  width: max-content;
+  overflow: visible;
+  white-space: pre;
+  font-size: var(--type-sm);
+  line-height: var(--leading-tight);
+  color: var(--accent-ink);
+}
+
+/* A MASK'S BAR (gap 7, Paper page 25). Dashed in the accent ink, a pill, with
+   the mode beside the name: a mask draws nothing of its own, so its bar must
+   not read as a layer that paints. Its edge survives the live fill, see
+   states.css. */
+.lifespan-bar.is-mask {
+  gap: var(--space-3);
+  padding: 0 var(--space-4);
+  border: 1px dashed var(--accent-ink);
+  border-radius: var(--radius-full);
+}
+
+.lifespan-bar.is-mask .lifespan-bar-name {
+  color: var(--accent-ink);
+  font-size: var(--type-sm);
+}
+
+.lifespan-bar-mask {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: var(--type-micro);
+  color: var(--ink-2);
+  pointer-events: none;
+}
+
+.lifespan-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+}
+
+/* THE TRIM HANDLES, shown on a selected clip only: white 3x12 tabs, radius
+   2, centred in each 8px hit target. A hairline accent ring keeps the white
+   readable on the light wash; on the solid live fill it disappears into it.
+   The hit target is there at rest too, unmarked. Not on a video clip: its edges
+   are trims with their own picture under them, and a tab over the frames is
+   noise. */
+.lifespan-bar.is-selected:not(.is-video) .lifespan-handle::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 3px;
+  height: 12px;
+  border-radius: var(--radius-2xs);
+  transform: translate(-50%, -50%);
+  background: var(--on-accent);
+  box-shadow: 0 0 0 1px var(--accent);
+  pointer-events: none;
+}
+
+.lifespan-handle-in {
+  left: 0;
+}
+
+.lifespan-handle-out {
+  right: 0;
+}
+
+/* ---- the camera row ----------------------------------------------------- */
+/* 28, the row ruling, and `BLOCK_ROW_H` in model.ts: the camera row is counted
+   by the dock's height sums at that number. */
+.block-row {
+  display: flex;
+  align-items: stretch;
+  height: 28px;
+  border-bottom: 1px solid var(--line-soft);
+  /* Same isolation boundary as .lifespan-row, same legality note. */
+  contain: layout paint;
+}
+
+/* The label column: the name, and on the camera row a create button beside it.
+   Fixed width from the dock's label width, so the lanes of every row still
+   start on the same x as the ruler. */
+.block-row-label-cell {
+  display: flex;
+  align-items: stretch;
+  flex: none;
+  overflow: hidden;
+}
+
+/* 12px secondary, the lifespan label's recipe, so the camera row reads as part
+   of the same column. */
+.block-row-label {
+  align-self: stretch;
+  font: inherit;
+  font-size: var(--type-md);
+  color: var(--ink-2);
+  background: transparent;
+  border: 0;
+  text-align: left;
+  padding: 0;
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* THE CAMERA ROW'S LABEL: a hollow 8px square (the shot's own eye, not one of
+   its contents), "Camera" in the secondary ink, then at the end how many marks
+   it holds in mono accent and the add icon. 16 in from the seam, like the shot
+   and the sound rows it sits between. */
+.block-row.is-camera .block-row-label-cell {
+  align-items: center;
+  gap: var(--space-4);
+  padding: 0 var(--space-5) 0 var(--space-7);
+}
+
+.camera-swatch {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border: 1.5px solid var(--ink-2);
+  border-radius: var(--radius-2xs);
+}
+
+.camera-keyed {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: var(--type-micro);
+  font-variant-numeric: var(--numeric);
+  color: var(--accent-ink);
+  white-space: nowrap;
+}
+
+/* VISIBLE AT REST: the one place a camera move is created, and every dimmed
+   version of it read as a capability the editor does not have ("quiet is not
+   hidden"). A compact house icon button, 20 square with a 12px glyph. */
+.block-row-add {
+  flex: none;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  color: var(--ink-2);
+}
+
+.block-row-add svg {
+  width: 12px;
+  height: 12px;
+}
+
+.block-row-lane {
+  position: relative;
+  flex: 1;
+}
+
+/* THE CAMERA LANE IS A LINE WITH MARKS ON IT: a 1px hairline 13 from the top,
+   from 8 in, and the poses as diamonds on it. The moves are still bars (they
+   take the drag, the trim and the menu) but they draw nothing at rest, so the
+   lane reads as the boards' keyframe line; hovering or selecting a move shows
+   its extent as a clip edge, and its name. */
+.block-row.is-camera .block-row-lane::before {
+  content: "";
+  position: absolute;
+  top: 13px;
+  left: 8px;
+  right: 0;
+  height: 1px;
+  background: var(--line);
+  pointer-events: none;
+}
+
+.block-row.is-camera .block-bar {
+  background: transparent;
+  border-color: transparent;
+}
+
+.block-row.is-camera .block-bar .block-label,
+.block-row.is-camera .block-handle::after {
+  visibility: hidden;
+}
+
+.block-row.is-camera .block-bar:hover,
+.block-row.is-camera .block-bar.is-selected {
+  border-color: var(--clip-edge);
+}
+
+.block-row.is-camera .block-bar.is-selected {
+  border-color: var(--accent);
+  outline: 0;
+}
+
+.block-row.is-camera .block-bar:hover .block-label,
+.block-row.is-camera .block-bar.is-selected .block-label {
+  visibility: visible;
+}
+
+/* Dark fill, bright border, Raylight's clip. A solid bar per move turns a
+   busy row into a colour field where nothing is readable; an outline keeps
+   forty of them distinct and lets overlaps show through. */
+/* ── THE INSET LIVES ON THE LABEL, NOT ON THE BAR ─────────────────────────
+
+   `padding: 0 8px` here, under the global `box-sizing: border-box`, put a hard
+   FLOOR of 16px plus the border under every bar: a box cannot render narrower
+   than its own padding. So a bar the code sized at 9.9px for a one-frame move
+   drew 18px, nearly twice its length and most of it over the top of the next
+   block. The camera row this was found on has twenty-two moves, eight of them
+   one frame long, so eight bars overdrew their neighbour: both a lie about the
+   move's length and a theft of the neighbour's trim handle and click target.
+
+   Moving the same 8px onto `.block-label` keeps every wide bar looking exactly
+   as it did, and lets a narrow one be as narrow as the block really is. The
+   `Math.max(4, ...)` in BlockBarView stays the only floor, which is what it
+   was always meant to be. */
+.block-bar {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  display: flex;
+  align-items: center;
+  border-radius: var(--radius-sm);
+/* THE FILL SAYS WHEN, THE BORDER SAYS WHAT. At rest the fill is the house
+   control ground, the same as a lifetime bar's, and the live rule at the
+   overrides layer (states.css) paints it while the playhead is inside the bar.
+   The border and the label keep the move hue at all times: that hue is the one
+   fact a move has that a lifetime bar does not, so it takes the place of the
+   control edge here. */
+  background: var(--bar-ground);
+  border: 1px solid color-mix(in srgb, var(--block-during) 60%, transparent);
+  color: color-mix(in srgb, var(--block-during) 40%, var(--timeline-ink));
+  cursor: grab;
+  overflow: visible;
+  white-space: nowrap;
+  transition: background var(--dur-fast) var(--ease);
+}
+
+.block-bar:hover {
+  background: var(--bar-ground-hover);
+}
+
+/* Selected is the accent edge and the accent label, the lifetime bar's own
+   selection. An inset outline, so it sits on the border instead of a pixel
+   outside it, and survives the live rule repainting that border. */
+.block-bar.is-selected {
+  outline: 1px solid var(--accent);
+  outline-offset: -1px;
+}
+
+.block-bar.is-selected .block-label {
+  color: var(--accent-ink);
+}
+
+.block-label {
+  padding: 0 var(--space-4);
+  overflow: hidden;
+  /* A BACKSTOP, not the mechanism. `fitsBlockLabel` decides whether the label
+     is rendered at all, and it estimates the text's width rather than
+     measuring it, so this catches the case where the estimate runs a pixel
+     short instead of letting a word spill out of its bar. */
+  text-overflow: ellipsis;
+  pointer-events: none;
+  font-weight: 500;
+}
+
+/* ── A SHARE OF THE BAR, NOT A FIXED STRIP ───────────────────────────────
+
+   7px flat was safe only while `.block-bar` carried padding, because that put
+   an 18px floor under every bar and two 7px handles could never meet. With the
+   padding moved to the label a bar is as narrow as its block is short, and on a
+   one-frame move the two handles covered it end to end: the out handle is later
+   in DOM order, so it won every hit test and the body drag became unreachable.
+   On a narrow SPRING block it was worse, because that handle swallows the press
+   and does nothing, which left the bar completely inert.
+
+   `min(7px, 35%)` keeps the 7px target on any bar wide enough for it (20px and
+   up) and leaves at least 30% of a narrow bar for the body. Below about 8px the
+   handles are smaller than the pointer anyway; the bar can still be selected,
+   and trimming a block that thin is a zoom-in job either way. */
+.block-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: min(7px, 35%);
+  cursor: col-resize;
+}
+
+.block-handle-in {
+  left: -1px;
+}
+
+.block-handle-out {
+  right: -1px;
+}
+
+/* A 1x8 grip centred in each live handle, the lifetime bar's grip. */
+.block-handle:not(.is-disabled)::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 1px;
+  height: 8px;
+  transform: translate(-50%, -50%);
+  background: var(--bar-grip);
+  pointer-events: none;
+}
+
+/* The dead variant has to stop promising a resize on an edge that cannot
+   resize. That promise IS the defect, so it loses both the cursor and the
+   grip above. */
+.block-handle.is-disabled {
+  cursor: default;
+}
+
+/* A spring keeps moving past its own window. The tail says so, and the OUT
+   handle is drawn dead, with the reason in its title. */
+.block-spring-tail {
+  position: absolute;
+  right: -18px;
+  top: 50%;
+  width: 18px;
+  border-top: 1px dashed currentColor;
+  opacity: 0.6;
+}
+
+/* ---- camera poses on the camera row (P4) --------------------------------
+   THE CAMERA IS ALREADY A KEYFRAME SYSTEM, and this is its picture. What it
+   is NOT is a property lane: a move carries ONE ease for its whole window and
+   the gap after it is a hold, so these marks get their own glyph and their own
+   state rather than borrowing `.channel-key`'s. Drawing them alike would teach
+   an author that every diamond behaves alike, and the first right-click
+   expecting an ease menu would prove it wrong.
+
+   HOLLOW is the distinction, and it carries the meaning: a camera pose is
+   read-only here (it lives in `shot.from`/`shot.to`, which the inspector owns)
+   while a property keyframe is filled and draggable. */
+.camera-key {
+  position: absolute;
+  /* A 9x9 square turned 45deg, centred on its frame horizontally and on the
+     hairline (13.5) vertically. */
+  top: 9px;
+  width: 9px;
+  height: 9px;
+  box-sizing: border-box;
+  transform: translateX(-50%) rotate(45deg);
+  background: var(--accent);
+  border-radius: 1px;
+  /* A READING, not a control. Without this the mark would eat the press on a
+     bar's own trim handle, and every pose sits exactly on one. */
+  pointer-events: none;
+}
+
+/* CHAINED: the next move opens on the pose this one closed on, so the camera
+   passes through it. The other kind of mark: hollow, the dock's ground inside
+   a 1.5px accent edge. A filled diamond is a pose the camera stops on. */
+.camera-key.is-chained {
+  background: var(--surface-panel);
+  border: 1.5px solid var(--accent);
+}
+
+/* A PATH's interior waypoint: smaller, and quieter, because it is the one mark
+   here that is not an authorable endpoint at all. Still on the hairline. */
+.camera-key.is-waypoint {
+  top: 11px;
+  width: 5px;
+  height: 5px;
+  background: var(--surface-panel);
+  border: 1px solid var(--accent-ink);
+}
+
+/* THE RIG BREAK. The end of a zoom move that changes the zoom: `cameraRigAt`
+   pins the distance only INSIDE that window, so one frame later the distance
+   and the fov both jump and every layer at a non-zero depth pops.
+   Drawn SPLIT, a warm half-mark with a gap where the other half would be,
+   because an unbroken diamond would promise a continuity that is not there.
+   The warm hue is `--guide`'s family, this lane's "look at this" colour, and
+   deliberately not `--danger`: the document is legal and the render is
+   correct, it is the MOTION that has a step in it. */
+.camera-key.is-break {
+  background: linear-gradient(to right, var(--accent-warm) 0 45%, transparent 45%);
+  border: 1.5px dashed var(--accent-warm);
+}
+
+/* ---- channel rows (one animated property per row — the Lottie read) ------ */
+/* 28, the row ruling: `CHANNEL_ROW_H` in model.ts, the unit the dock's height
+   sums count channel rows in. */
+.channel-row {
+  display: flex;
+  align-items: stretch;
+  height: 28px;
+  border-bottom: 1px solid var(--line-soft);
+}
+
+.channel-label-cell {
+  padding-left: calc(var(--space-4) + var(--depth, 0) * var(--tree-indent));
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex: none;
+  overflow: hidden;
+}
+
+/* THE NAME TAKES THE SLACK, rather than the value claiming it with
+   `margin-left: auto`. A row can now have a value and a clear button, a clear
+   button alone (a tracked path with no block channel), or neither — and one
+   auto margin cannot right-pack all three cases, while a growing first child
+   can. */
+.channel-name {
+  flex: 1;
+  min-width: 0;
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The resolved value at the playhead. Tabular, so playback reads as a counter
+   rather than a word that keeps changing width. */
+.channel-value {
+  padding-right: var(--space-4);
+  color: var(--ink-2);
+  font-size: var(--type-micro);
+  font-variant-numeric: var(--numeric);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.channel-lane {
+  position: relative;
+  flex: 1;
+}
+
+/* SOLID diamonds, the Lottie/Figma mark, and this shape means a TRACK
+   KEYFRAME and nothing else.
+   `--kf` is the house token for exactly this and is not the accent: a keyframe
+   is a fact about the document, while the accent means selection and playhead.
+   An 8px diamond with a 1px corner, the boards' key. The radius is a literal
+   because the house radius scale starts at 2px, which rounds an 8px diamond
+   into a dot.
+
+   SELECTED KEEPS ITS HUE and grows: 12px with a 1px ink-1 edge. Whitening the
+   fill threw away the one thing the mark says (this is a keyframe) at the
+   moment the author is looking hardest at it; size and an edge say "this one"
+   without spending it. 12px turned 45deg is 17px across, inside the 20px row. */
+.channel-key {
+  position: absolute;
+  top: 50%;
+  width: 8px;
+  height: 8px;
+  transform: translate(-50%, -50%) rotate(45deg);
+  background: var(--kf);
+  border: 1px solid var(--surface-app);
+  border-radius: 1px;
+  cursor: col-resize;
+}
+
+.channel-key:hover {
+  background: color-mix(in srgb, var(--kf) 70%, var(--timeline-ink));
+}
+
+.channel-key.is-selected {
+  width: 12px;
+  height: 12px;
+  border-color: var(--ink-1);
+}
+
+/* A HOLD does not interpolate, so it is drawn hollow: the segment leaving it is
+   a step, and a filled mark would promise a ramp. A SPRING carries physics past
+   its own segment, and the ring says the motion does not stop at the next key.
+   Both are shape statements on the one mark, never a second hue. */
+.channel-key.ease-hold {
+  background: transparent;
+  border-color: var(--kf);
+}
+
+.channel-key.ease-hold:hover {
+  background: color-mix(in srgb, var(--kf) 30%, transparent);
+}
+
+.channel-key.ease-spring {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--spring) 45%, transparent);
+}
+
+/* Remove-animation, on the row that has a track. Visible at rest (a control
+   hidden until hover is one a touch user never finds), but quiet: --ink-3, and
+   red only under the pointer. */
+.channel-clear {
+  flex: none;
+  margin-right: var(--space-2);
+  padding: 0 var(--space-2);
+  border: 0;
+  background: none;
+  color: var(--ink-3);
+  font: inherit;
+  line-height: var(--leading-none);
+  cursor: pointer;
+}
+
+.channel-clear:hover {
+  color: var(--danger-ink);
+}
+
+/* The expanded-but-empty layer: say where the first keyframe comes from. The
+   same quiet lane text carries the selected-key status beside "+ property",
+   in mono there, because it is a readout of numbers. */
+.channel-empty-hint,
+.channel-add-status {
+  display: flex;
+  align-items: center;
+  padding-left: var(--space-5);
+  color: var(--ink-3);
+  font-size: var(--type-micro);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ---- + property --------------------------------------------------------- */
+/* The last row of a layer's expansion, and the timeline's own way into
+   keyframing. A BORDERED BUTTON, the boards' recipe: the strong edge, the
+   small radius, 12/18 500 in ink-1. Docked, so flat (no control shadow).
+
+   THE CLIP'S PLACE IN THE ROW: 20 tall at 4 under the row's top, 3 clear of
+   its 1px bottom border, where `.lifespan-bar` sits in the lane beside it.
+   At the row's own 28 (the 28 includes the border) its edge lay on both row
+   lines. 12/18 and the 1px edge make the 20 exactly. The ROW stays
+   `CHANNEL_ROW_H`, the unit `expandedLayerHeight` and `groupHeights` reserve
+   for it. Never a row override of its own: an 18px one once put every row
+   below an expanded layer 2px off its spacer. */
+.channel-add {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  align-self: flex-start;
+  height: 20px;
+  margin-top: var(--space-2);
+  font: inherit;
+  font-size: var(--type-md);
+  line-height: var(--leading-sm);
+  font-weight: 500;
+  color: var(--ink-1);
+  background: transparent;
+  border: 1px solid var(--line-strong);
+  padding: 0 var(--space-4);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.channel-add:hover {
+  background: var(--fill-rest);
+}
+
+/* OPEN, while its menu is up: the accent-quiet ground and the accent edge, so
+   the control the menu belongs to is the one that says so. */
+.channel-add[aria-expanded="true"] {
+  background: var(--accent-quiet);
+  border-color: var(--accent);
+}
+
+/* The status beside it is a readout, not a label. */
+.channel-add-status {
+  font-family: var(--font-mono);
+  font-variant-numeric: var(--numeric);
+}
+
+/* THE HOUSE MENU, restated rather than borrowed. `Popover` already draws the
+   panel ground, the strong edge, the radius and the popover shadow; the rows
+   below take `.menu-item`'s metrics (30 tall, 12/20, the small radius, the
+   accent-quiet hover) on their own class, because styling one element from two
+   sheets at equal specificity is the thing this codebase forbids. 320 wide, so
+   a name and its note sit on one line. */
+.property-pop {
+  width: 320px;
+  max-height: 340px;
+  overflow-y: auto;
+  padding: var(--space-3);
+}
+
+/* Sentence case, the house's group label: the caps-and-tracking version read as
+   a second heading level the menu does not have. */
+.property-group-label {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 var(--space-4);
+  font-size: var(--type-md);
+  line-height: var(--leading-md);
+  font-weight: 500;
+  color: var(--ink-3);
+}
+
+.property-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  width: 100%;
+  min-height: 30px;
+  font: inherit;
+  font-size: var(--type-md);
+  line-height: var(--leading-md);
+  text-align: left;
+  color: var(--ink-1);
+  background: transparent;
+  border: 0;
+  padding: 0 var(--space-4);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.property-item:hover:not(:disabled) {
+  background: var(--accent-quiet);
+}
+
+/* REFUSED, NOT HIDDEN. The reason rides beside the name — "why can I not
+   animate the stroke width" is answered where it is asked. */
+.property-item:disabled {
+  color: var(--ink-disabled);
+  cursor: default;
+}
+
+.property-item-note {
+  margin-left: auto;
+  /* The house menu's detail size (`.menu-detail`, `.menu-shortcut`). */
+  font-size: var(--type-sm);
+  color: var(--ink-3);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 55%;
+}
+
+/* A tracked property's name stays ink-1: the "animated" note beside it is the
+   mark. Tinting the name too said one fact twice, and spent the accent ink in a
+   menu where the accent means "you are on this row". */
+
+/* ---- audio lane --------------------------------------------------------- */
+/* A DISTINCT COLOURED BAND under the video rows. Taller than a block row,
+   because the waveform inside it is the thing the author is reading. 32 with
+   its seam, the boards' sound row: AUDIO_ROW_H in model.ts (AUDIO_LANE_H in
+   AudioLane.tsx is the same number), which the fitted dock height counts. */
+.audio-lane {
+  display: flex;
+  align-items: stretch;
+  position: relative;
+  height: 32px;
+  border-top: 1px solid var(--line);
+  background: color-mix(in srgb, var(--audio-clip) 4%, transparent);
+}
+
+/* A file dragged over the lane. The whole lane lights, not the row under the
+   pointer: the clip lands at the PLAYHEAD (see AudioLane), so highlighting a
+   position would promise a drop point the import does not honour. */
+.audio-lane.is-over {
+  background: color-mix(in srgb, var(--audio-clip) 14%, transparent);
+  outline: 1px dashed var(--audio-clip);
+  outline-offset: -1px;
+}
+
+/* Inset 16, the shot and camera rows' inset, so the three swatches stand in
+   one column. */
+.audio-label-cell {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  flex: none;
+  padding-left: var(--space-7);
+  overflow: hidden;
+}
+
+/* The sound row's mark, in both audio rows: a teal 8px square, the lane's own
+   hue, where the shot row wears the accent one. */
+.audio-swatch {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-2xs);
+  background: var(--audio-clip);
+}
+
+/* A SHOT'S OWN AUDIO, inside that shot's group. The master lane's height and
+   tint (`SHOT_AUDIO_ROW_H` is `AUDIO_LANE_H`), so the two read as one medium in
+   two places rather than two features. Inside a shot it is the only audio row,
+   32 tall. Its seam is an inset line rather than a border, so the row's box is
+   the whole 32 the group sums count. Its empty state is the same drop box as
+   the master lane's, below. */
+.scene-audio-row {
+  display: flex;
+  align-items: stretch;
+  position: relative;
+  height: 32px;
+  box-shadow: inset 0 1px 0 var(--line);
+  background: color-mix(in srgb, var(--audio-clip) 4%, transparent);
+}
+
+.scene-audio-row.is-over {
+  background: color-mix(in srgb, var(--audio-clip) 14%, transparent);
+  outline: 1px dashed var(--audio-clip);
+  outline-offset: -1px;
+}
+
+.scene-audio-label {
+  position: sticky;
+  left: 0;
+  z-index: 4; /* the sticky label column's layer (see the shared rule) */
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  flex: none;
+  /* 16 in, the swatch column the shot and camera rows share. */
+  padding-left: var(--space-7);
+  overflow: hidden;
+  background-color: var(--surface-panel);
+}
+
+/* "Sound", the row's name: 12/600 ink, a heading row like the shot's. */
+.scene-audio-name,
+.audio-lane-name {
+  font-size: var(--type-md);
+  font-weight: var(--weight-semibold);
+  color: var(--ink-1);
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.audio-add {
+  font: inherit;
+  color: var(--ink-2);
+  background: var(--fill-rest);
+  border: 0;
+  border-radius: var(--radius-xs);
+  padding: 1px var(--space-3);
+  margin-right: var(--space-3);
+  cursor: pointer;
+  flex: none;
+}
+
+.audio-add:hover:not(:disabled) {
+  color: var(--ink-1);
+  background: var(--fill-hover);
+}
+
+.audio-track {
+  position: relative;
+  flex: 1;
+  /* THE SHOT CONTEXT'S LEFT EDGE. This lane is master-timed and the shot view
+     re-zeros it on the shot, so a bed that started earlier is drawn from a
+     NEGATIVE x — which without this lands on top of the label cell. `clip` and
+     not `hidden`: hidden on one axis forces `auto` on the other, and the fade
+     corners and the gain band overflow vertically by design. The margin keeps
+     a bar that starts exactly at the shot's zero from losing its rounded end. */
+  overflow-x: clip;
+  overflow-clip-margin: 8px;
+}
+
+/* THE DROP BOX, the boards' empty audio row in both the master lane and a
+   shot's own row: a dashed line edge on the sunken ground, so it reads as a
+   place a file goes rather than as one more clip. The copy says the two ways
+   in, and the mono hint after it lists the formats the import accepts, built
+   from the same list the file input's `accept` is (AudioLane.tsx), so the box
+   cannot advertise a format the import refuses. Inert to the pointer: the
+   drop target is the whole row, and the box is only its label. */
+.audio-empty {
+  position: absolute;
+  left: var(--space-2);
+  right: var(--space-2);
+  max-width: 420px;
+  top: var(--space-2);
+  bottom: var(--space-2);
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  padding: 0 var(--space-5);
+  border: 1px dashed var(--line);
+  border-radius: var(--radius-xs);
+  background: var(--surface-sunken);
+  color: var(--ink-3);
+  font-size: var(--type-sm);
+  pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.audio-empty-copy {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.audio-empty-formats {
+  flex: none;
+  font-family: var(--font-mono);
+  font-size: var(--type-sm);
+  color: var(--ink-3);
+}
+
+/* Same quiet-fill/bright-border grammar as a block bar, in the lane's own hue.
+   The 4px inset is AUDIO_CLIP_INSET in AudioLane.tsx, which sizes the wave. */
+.audio-clip {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--audio-clip) 16%, transparent);
+  border: 1px solid color-mix(in srgb, var(--audio-clip) 65%, transparent);
+  color: color-mix(in srgb, var(--audio-clip) 35%, var(--timeline-ink));
+  cursor: grab;
+  overflow: hidden;
+}
+
+.audio-clip:hover {
+  background: color-mix(in srgb, var(--audio-clip) 26%, transparent);
+}
+
+/* A muted clip is KEPT and dimmed, never hidden: mute is a mix decision the
+   author has to be able to see in order to undo. */
+.audio-clip.is-muted {
+  opacity: 0.45;
+  border-style: dashed;
+}
+
+.audio-wave {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.audio-fade-curve {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.audio-fade-curve polyline {
+  stroke: var(--audio-line);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.audio-clip-name {
+  position: absolute;
+  left: 8px;
+  top: 1px;
+  pointer-events: none;
+  font-weight: 500;
+  max-width: calc(100% - 46px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* THE SOUND ROW'S CLIP, in the dock's two audio rows (Sound mode draws its
+   own, timeline-sound.css): 24 tall at 4 from the top (the base rule's inset),
+   the teal wash 18% to 6% under a 55% teal edge, radius 6. The waveform is
+   drawn in the same teal (`--audio-waveform` is `--audio-clip` in shotTokens.css;
+   the canvas reads it off itself) at 0.75. */
+.audio-lane .audio-clip,
+.scene-audio-row .audio-clip {
+  border-radius: var(--radius-sm);
+  background: linear-gradient(
+    in oklab 180deg,
+    color-mix(in oklab, var(--audio-clip) 18%, transparent),
+    color-mix(in oklab, var(--audio-clip) 6%, transparent)
+  );
+  border: 1px solid color-mix(in oklab, var(--audio-clip) 55%, transparent);
+}
+
+.audio-lane .audio-clip:hover,
+.scene-audio-row .audio-clip:hover {
+  border-color: color-mix(in oklab, var(--audio-clip) 80%, transparent);
+}
+
+.audio-lane .audio-wave,
+.scene-audio-row .audio-wave {
+  opacity: 0.75;
+}
+
+/* The clip's name as a chip on the wave: a dark teal tile with light teal
+   type, 11/600, radius 4, 16 tall, so the name reads over any waveform. */
+.audio-lane .audio-clip-name,
+.scene-audio-row .audio-clip-name {
+  top: 50%;
+  left: 4px;
+  transform: translateY(-50%);
+  /* Block, so the base rule's ellipsis works; the 16px line is the chip. */
+  display: block;
+  padding: 0 calc(var(--space-5) / 2);
+  border-radius: var(--radius-xs);
+  background: var(--audio-chip-bg);
+  color: var(--audio-chip-ink);
+  font-size: var(--type-sm);
+  font-weight: var(--weight-semibold);
+  line-height: 16px;
+}
+
+/* The rubber band. A hairline across the whole clip with a fat invisible grab
+   area, because a 1px drag target is a control nobody can hit. */
+.audio-gain-band {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 9px;
+  margin-bottom: calc(-1 * var(--space-2));
+  cursor: ns-resize;
+}
+
+.audio-gain-band::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 4px;
+  height: 1px;
+  background: var(--audio-line);
+  opacity: 0.8;
+}
+
+/* AUTOMATED: the flat line is gone (the envelope svg draws the level now) and
+   the band becomes an invisible full-height grab area for the key under the
+   playhead. Bottom 0 / top 0 rather than a level, because there is no single
+   level left to sit at. */
+.audio-gain-band.is-automated {
+  top: 0;
+  bottom: 0;
+  height: auto;
+  margin-bottom: 0;
+}
+
+.audio-gain-band.is-automated::after {
+  content: none;
+}
+
+/* The sampled envelope, through the SAME engine function the mixer uses. */
+.audio-gain-curve {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.audio-gain-curve polyline {
+  stroke: var(--audio-line);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+  opacity: 0.9;
+}
+
+/* The tail of an owned clip that runs past its shot: kept in the document,
+   absent from the mix. Hatched so it reads as "not this" rather than as a
+   different clip, and inert so every gesture still belongs to the bar. */
+.audio-overrun {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    -45deg,
+    color-mix(in srgb, var(--surface-app) 70%, transparent) 0 4px,
+    transparent 4px 8px
+  );
+  border-left: 1px solid var(--audio-line);
+}
+
+/* Centred on its point by `translate`, which composes with the rotation
+   rather than replacing it: `left` and `bottom` name the key's frame and gain
+   exactly. */
+.audio-gain-key {
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  translate: -50% 50%;
+  background: var(--audio-line);
+  transform: rotate(45deg);
+  pointer-events: none;
+}
+
+.audio-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 7px;
+  cursor: col-resize;
+}
+
+.audio-handle-in {
+  left: -1px;
+}
+
+.audio-handle-out {
+  right: -1px;
+}
+
+/* The fade corners ride ON the ramp's top end, so the handle is where the
+   author sees the fade finish rather than at the edge of the clip. Centred on
+   that x by `translate`. */
+.audio-fade {
+  position: absolute;
+  top: -1px;
+  width: 11px;
+  height: 11px;
+  translate: -50% 0;
+  border-radius: var(--radius-full);
+  cursor: ew-resize;
+  background: color-mix(in srgb, var(--audio-line) 70%, transparent);
+}
+
+.audio-clip-buttons {
+  position: absolute;
+  right: 2px;
+  top: 1px;
+  display: flex;
+  gap: var(--space-1);
+}
+
+.audio-clip-btn {
+  font: inherit;
+  font-size: var(--type-micro);
+  line-height: var(--leading-none);
+  color: var(--ink-2);
+  background: transparent;
+  border: 0;
+  padding: var(--space-1);
+  border-radius: var(--radius-xs);
+  cursor: pointer;
+}
+
+.audio-clip-btn:hover {
+  color: var(--ink-1);
+  background: var(--fill-rest);
+}
+
+/* DUCKING. The button is present whether or not the clip ducks (a
+   capability's only affordance stays visible at rest); armed is what changes,
+   and it uses the accent the rest of the chrome uses for an active tool. */
+.audio-duck {
+  position: relative;
+}
+
+.audio-clip-btn[aria-pressed="true"] {
+  color: var(--accent-ink);
+}
+
+.audio-duck-pop {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  /* Local to the dock (a stacking context): above the ruler (5) and the
+     resize edge (6). */
+  z-index: 7;
+  min-width: 190px;
+  margin-top: var(--space-2);
+  padding: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  background: var(--surface-raised);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
+}
+
+.audio-duck-title,
+.audio-duck-empty {
+  margin: 0 0 var(--space-1);
+  font-size: var(--type-sm);
+  color: var(--ink-2);
+}
+
+.audio-duck-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-size: var(--type-sm);
+  color: var(--ink-1);
+}
+
+.audio-duck-strength {
+  margin-top: var(--space-2);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--line);
+}
+
+.audio-duck-strength input[type="range"] {
+  flex: 1;
+  min-width: 0;
+}
+
+.audio-duck-db {
+  min-width: 40px;
+  text-align: right;
+  font-variant-numeric: var(--numeric);
+  color: var(--ink-2);
+}
+
+/* CLIP EFFECTS: the duck's popover, a stage per block. */
+.audio-fx-btn {
+  font: var(--weight-medium) var(--type-micro)/1 var(--font-sans);
+  letter-spacing: var(--tracking-caps);
+}
+
+.audio-fx-pop {
+  min-width: 260px;
+}
+
+.audio-fx-stage {
+  margin-top: var(--space-2);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--line);
+}
+
+.audio-fx-label {
+  min-width: 64px;
+}
+
+.audio-fx-slider input[type="range"] {
+  flex: 1;
+  min-width: 0;
+}
+
+.audio-fx-room {
+  margin-left: auto;
+}
+
+.audio-fx-foot {
+  margin-top: var(--space-2);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.audio-error {
+  position: absolute;
+  left: 8px;
+  bottom: 2px;
+  margin: 0;
+  color: var(--danger-ink);
+  pointer-events: none;
+}
+
+/* ---- marker lane -------------------------------------------------------- */
+/* A THIN ORANGE STRIP over the audio. Short on purpose: a marker carries no
+   duration, so there is nothing here that gets more readable with height —
+   every pixel it takes is a pixel off the tracks, which do. */
+.marker-lane {
+  display: flex;
+  align-items: stretch;
+  position: relative;
+  height: 20px;
+  border-top: 1px solid var(--line);
+  background: color-mix(in srgb, var(--marker) 10%, transparent);
+}
+
+.marker-label-cell {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex: none;
+  padding-left: var(--space-4);
+  overflow: hidden;
+}
+
+.marker-lane-name {
+  color: var(--ink-2);
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.marker-add {
+  font: inherit;
+  line-height: var(--leading-none);
+  color: var(--ink-2);
+  background: var(--fill-rest);
+  border: 0;
+  border-radius: var(--radius-xs);
+  padding: 1px var(--space-3);
+  margin-right: var(--space-3);
+  cursor: pointer;
+  flex: none;
+}
+
+.marker-add:hover {
+  color: var(--ink-1);
+  background: var(--fill-hover);
+}
+
+.marker-track {
+  position: relative;
+  flex: 1;
+  /* The audio track's rule, for the same reason: this lane is master-timed and
+     the shot view re-zeroes it, so a mark before the shot's start is drawn at a
+     NEGATIVE x and would land on the label cell. Clipping here rather than
+     filtering the list is what keeps a pin MOUNTED while it is being dragged
+     across that edge — the drag holds the pointer capture on the node. `clip`
+     and not `hidden`, so the hover label may still overflow vertically. */
+  overflow-x: clip;
+  overflow-clip-margin: 8px;
+}
+
+.marker-empty {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--ink-3);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* CENTRED ON ITS FRAME, which is why the pin is a zero-width anchor with the
+   diamond translated out of it: `left` is the frame's exact x, so a diamond
+   given a width would sit a few px late and drift further as the author zoomed
+   in — the one thing a marker must never do. */
+.marker-pin {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  display: flex;
+  align-items: center;
+  cursor: grab;
+}
+
+.marker-diamond {
+  width: 8px;
+  height: 8px;
+  margin-left: calc(-1 * var(--space-2));
+  background: var(--marker-pin);
+  border: 1px solid color-mix(in srgb, var(--marker) 70%, #000000);
+  transform: rotate(45deg);
+  flex: none;
+}
+
+.marker-pin.is-selected .marker-diamond {
+  background: var(--marker);
+  border-color: var(--marker-pin);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--marker) 45%, transparent);
+}
+
+.marker-pin.is-at-playhead .marker-diamond {
+  border-color: var(--playhead);
+}
+
+/* HOVER (and selection) only. Always-on labels turn a strip of beats into a
+   wall of overlapping text at any zoom the author actually works at. */
+.marker-pin-label {
+  display: none;
+  position: absolute;
+  left: 8px;
+  white-space: nowrap;
+  padding: 0 var(--space-2);
+  border-radius: var(--radius-2xs);
+  color: var(--ink-1);
+  background: var(--surface-panel);
+  border: 1px solid var(--line);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.marker-pin:hover .marker-pin-label,
+.marker-pin.is-selected .marker-pin-label {
+  display: block;
+}
+
+/* ---- three kinds of row, told apart ------------------------------------- */
+/* Every row carried the same hairline, the same label ink and (for layers) the
+   same hueless bar, so a shot header, its camera and its elements read as one
+   undifferentiated stack. The hierarchy is real; it just was not drawn.
+
+   Heights are UNTOUCHED. `SHOT_ROW_H`, `expandedLayerHeight` and
+   `groupHeights` mirror them in JS for virtualisation, and `dockFollow`'s
+   scroll maths asserts them — so this is colour and weight only. */
+/* NO GROUND STEP ON THE SHOT ROW. Every row sits on the dock's one ground,
+   split by the house divider `--line-soft`; a shot header is told from its
+   element rows by its accent swatch, its 12/600 name and its own clip, never
+   by a tint. */
+.shot-row {
+  position: relative;
+}
+
+/* THE LAST ROW HAS NO LINE. The last shot's last row sits on the marker or
+   Sound lane's own `--line` top edge, and two rules stacked read as a
+   double seam. The border goes TRANSPARENT rather than away, so the row keeps
+   its 1px and `groupHeights` still adds up. */
+.dock-scene-group:not(:has(~ .dock-scene-group))
+  > :is(.shot-row, .lifespan-row, .block-row, .channel-row):last-child {
+  border-bottom-color: transparent;
+}
+
+/* The element rows get the outliner's own kind glyph, so a row means the same
+   thing in both panels. `.layer-kind` is reused deliberately and NOT
+   re-coloured at rest: its neutral-with-an-accent-for-components rule is the
+   taxonomy, and any dock-scoped rest colour would outrank
+   `.layer-kind.is-component` on specificity and flatten it. */
+.lifespan-label-cell .layer-kind {
+  width: 16px;
+}
+
+.lifespan-label-cell .layer-kind svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* SELECTED, the glyph alone takes the accent ink, and the name stays ink: the
+   boards mark the selected layer with its kind icon and its bar label, not by
+   tinting a column of names. This flattens nothing, because a component's
+   glyph is already the accent ink. */
+.lifespan-row.is-selected .layer-kind {
+  color: var(--accent-ink);
+}
+
+/* The two row disclosures hold an inline <svg> where a text glyph used to
+   sit, so their line box still reserved the font's descender under it and the
+   icon rode ~1.5px high. `inline-flex` drops the baseline and centres the box
+   instead. (The head's chips are `.btn`, which is already this.) */
+.shot-disclosure,
+.lifespan-disclosure {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}