@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/timeline.css

@@ -0,0 +1,754 @@
+/* The timeline's FRAME: the dock grid and its cells, the head (transport, clock, view tools,
+   zoom), the ruler, the playhead and the overlay drawn through the tracks, the label-column
+   corner. The Rows mode's row kinds are in timeline-rows.css, the Graph mode's pane in
+   timeline-graph.css and the transport's volume popover in timeline-meters.css, imported
+   right after this file in the same layer. */
+
+/* ---- timeline dock ------------------------------------------------------ */
+/* THE BOTTOM ROW, edge to edge under all three columns, its seam on top. The
+   row's height is the dock's height: `--dock-row-h`, written by App.tsx from
+   the dragged size through `fitShell`, its head when collapsed and 0 with no
+   Project open.
+
+   A SUBGRID OF THE SHELL'S THREE COLUMN TRACKS: the name column under the
+   left column, the lane under the canvas and the right column. Sound mode
+   gives the right column to its mixer (`.dock-body.has-side`).
+   A collapsed column keeps its track, so collapse and Video never move a bar.
+   The head row is the dock head LESS the 1px seam above it, so a collapsed
+   row (exactly `DOCK_HEAD_H`) holds the whole head and clips nothing. */
+.timeline-dock {
+  grid-column: edge-l / edge-r;
+  grid-row: main-b / edge-b;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-template-rows: calc(var(--dock-head-h) - 1px) minmax(0, 1fr);
+  overflow: hidden;
+  /* THE PANEL GREY (founder call 2026-10-18, as the editor in the landing
+     hero draws it): the head band, the label column, the ruler and the lanes
+     sit on the columns' own ground. Timeline option A (Paper page 02) put
+     them on the stage's black well, and the editor read as all black. Every
+     opaque cover in the dock (the sticky label cells, the ruler, its corner)
+     and every hollow mark paints this same ground. */
+  background: var(--surface-panel);
+  border-top: 1px solid var(--line);
+  /* The trim handles' width, and the room the shot bar's open button leaves
+     for its handle. Optical geometry: a 7px target on a 1px edge. */
+  --dock-trim-w: 7px;
+  /* NOTHING IN THIS BOX IS TEXT TO SELECT. Every gesture in the dock is a drag
+     (the ruler scrub, a bar, a trim handle, a marker) and each one's
+     compatibility mousedown plants a selection anchor and then drags the focus
+     end with the pointer, so a scrub painted the ticks, the frame readout and
+     the layer names blue instead of seeking. `Ruler` cancels its own press,
+     which fixes the ruler; this covers every other drag in the dock and the
+     scene bar's double-click besides.
+     SCOPED HERE AND NOT ON `body`: the rail, the inspector and the agent
+     transcript hold prose an author copies. The dock's inputs are the Sound
+     tab's file picker (`hidden`) and range inputs, and a range input has no
+     selectable content, so nothing here needs a `user-select: text` hatch. */
+  user-select: none;
+}
+
+/* A crash card takes the whole cell, not the first grid cell it lands in. */
+.timeline-dock > .panel-crash {
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+}
+
+/* The head spans all three tracks and is a subgrid of them too, so each of
+   its cells stands over its own column. */
+.dock-head {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  display: grid;
+  grid-template-columns: subgrid;
+  border-bottom: 1px solid var(--line-soft);
+}
+
+/* THE HEAD'S CHIPS ARE `.btn`: collapse, go to start, loop, Fit, + Shot, the
+   zoom steps and the speaker. The house recipe draws them, and nothing here
+   restates it. Play is the one exception, below. The glyphs are the shot
+   family's 24-grid strokes (icons.tsx), which carry no size of their own; the
+   transport's own three (start, play, the speaker) are the ui set's solid
+   12-grid glyphs, drawn at their 12px so they stay on the pixel grid. */
+.dock-transport svg,
+.dock-tools svg {
+  flex: none;
+  width: 16px;
+  height: 16px;
+}
+
+/* THE LEFT CELL, under the label column: the collapse chevron and the view
+   switch on one band, 12 in from the seam and 8 apart. The panel's name is
+   gone: the switch says what this is. Its border continues the left column's
+   seam. */
+.dock-title {
+  grid-column: 1;
+  container: dock-title / inline-size;
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  min-width: 0;
+  padding: 0 var(--space-6);
+  border-right: 1px solid var(--line);
+}
+
+.dock-title .dock-collapse {
+  flex: none;
+  width: 24px;
+  height: 24px;
+  color: var(--ink-2);
+}
+
+.dock-title svg {
+  flex: none;
+  width: 14px;
+  height: 14px;
+}
+
+/* ROWS | GRAPH | SOUND: THE ONE SEGMENTED CONTROL (ui/widgets.css), track,
+   chips, hover, active tile and focus ring all shared. Only the chip width is
+   this column's: each chip sits at its words' width with 8px a side, so the
+   three and the chevron fit the 224px column. */
+.dock-modes {
+  justify-self: start;
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.dock-modes .segmented-item,
+.dock-modes .segmented-item:first-child,
+.dock-modes .segmented-item:last-child {
+  flex: 0 1 auto;
+  min-width: 0;
+  padding: 0 var(--space-4);
+}
+
+/* A RAIL UNDER 224px (its floor is 168) cannot hold the chips at the house
+   inset, so the chevron moves to 6 from the seam and the gap drops to 4. A
+   container never styles itself, so the inset comes back as negative margins
+   on its children. Under 200px the chips give up their side padding too, and
+   share what is left: still wider than "Sound" at 500 down to the floor. */
+@container dock-title (width < 224px) {
+  .dock-title .dock-collapse {
+    margin-inline-start: calc(var(--space-3) - var(--space-6));
+  }
+
+  .dock-title .dock-modes {
+    margin-inline-start: calc(var(--space-2) - var(--space-4));
+  }
+}
+
+@container dock-title (width < 200px) {
+  .dock-modes .segmented-item,
+  .dock-modes .segmented-item:first-child,
+  .dock-modes .segmented-item:last-child {
+    padding: 0 var(--space-1);
+  }
+}
+
+/* THE VIEW, under the canvas, in three bands: the lead (Sound's tempo), the
+   transport in the middle, the view tools at the end. Grid and not flex, so
+   the transport sits on the CELL's centre whatever the two sides hold, and a
+   side never shrinks below its own content: when the cell is too narrow to
+   centre, the middle slides instead of a button being squeezed.
+
+   ONE LINE, ALWAYS. An inline-size container, because the canvas can be as
+   narrow as 640px: the container queries below take pieces away before
+   anything wraps, and `overflow: hidden` is only the backstop. */
+.dock-view {
+  grid-column: 2 / -1;
+  container: dock-view / inline-size;
+  display: grid;
+  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
+  align-items: center;
+  column-gap: var(--space-6);
+  min-width: 0;
+  padding: 0 var(--space-6);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.dock-lead {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+  min-width: 0;
+}
+
+/* THE TRANSPORT: go to start, play, the speaker, the Project's loop, the
+   clock. 12 apart, the boards' transport. */
+.dock-transport {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6);
+}
+
+.dock-transport .dock-start {
+  color: var(--ink-2);
+}
+
+.dock-transport .dock-start svg,
+.dock-transport .dock-mute svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* PLAY, the head's one filled control: a 28px ink disc with the glyph cut out
+   in the dock's ground (the panel), so the verb an author reaches for most is the one
+   that stands out of the strip. Pause and a queued Play's cancel wear the same
+   disc (PlayButton.tsx). Hover and press mix the disc toward the ground, so
+   the states hold in both themes. Positioned, for a queued Play's ring. */
+.dock-transport .dock-play {
+  position: relative;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: var(--ink-1);
+  color: var(--surface-panel);
+  transition:
+    background var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease);
+}
+
+.dock-transport .dock-play:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--ink-1) 82%, var(--surface-panel));
+}
+
+.dock-transport .dock-play:active:not(:disabled) {
+  background: color-mix(in srgb, var(--ink-1) 68%, var(--surface-panel));
+  transform: scale(0.94);
+}
+
+.dock-transport .dock-play:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+
+/* The glyph, a child: the ring's own svg sits inside `.play-ring`. */
+.dock-transport .dock-play > svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* The triangle's mass sits left of its box (its centroid is at 5.5 of 12),
+   so on the disc it reads off-centre. One pixel right puts it on the optical
+   centre. Pause and the cancel cross are symmetric and stay put. A refused
+   Play is idle too, only disabled. */
+.dock-transport .dock-play[data-state="idle"] > svg {
+  transform: translateX(1px);
+}
+
+/* THE QUEUED PLAY'S RING, on both play controls (PlayButton.tsx): the font
+   field's ring (`.font-field-ring`, inspector-object.css, which turns it and
+   stills it for reduced motion) laid over the control, where each context
+   places it. It holds back 300ms, so a start that is ready at once never
+   flashes it, then lands the way a status chip does (`status-chip-in`): a
+   fade, or a plain step where motion is not wanted. It takes no press: the
+   control's own box is the target. */
+.play-ring {
+  position: absolute;
+  pointer-events: none;
+  animation: status-chip-in 0s 300ms both;
+}
+
+.play-ring > .font-field-ring {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .play-ring {
+    animation-duration: var(--dur-fast);
+    animation-timing-function: var(--ease);
+  }
+}
+
+/* On the dock, 4px outside the disc: 36px across, the ring's own grid, so
+   its 1.5 stroke draws 1.5px. The 40px head holds it. */
+.dock-transport .dock-play .play-ring {
+  inset: -4px;
+}
+
+/* THE CLOCK, the chrome's one playhead readout: always padded ("00:02.20"),
+   in the mono face, so it is a fixed slot that never jitters sideways on a
+   frame. The muted suffix says what it is measured against: the frame inside
+   a shot ("66 f"), the Project's length, or Sound's bar and beat. */
+.dock-time {
+  display: flex;
+  align-items: baseline;
+  min-width: 0;
+  white-space: nowrap;
+  font: var(--type-md)/var(--leading-xs) var(--font-mono);
+  font-variant-numeric: var(--numeric);
+  color: var(--ink-1);
+}
+
+/* The suffix opens on its own space (kept by `pre`), so the text reads as
+   words to a screen reader and the gap is the mono face's one space. */
+.dock-time-frame {
+  white-space: pre;
+  color: var(--ink-3);
+}
+
+/* THE VIEW TOOLS, at the end: Fit, + Shot, the zoom. 10 apart. */
+.dock-tools {
+  justify-self: end;
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+}
+
+/* Fit is a word, not a chip: plain 12 secondary on no ground. */
+.dock-tools .dock-fit {
+  height: auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-size: var(--type-md);
+  font-weight: var(--weight-regular);
+  color: var(--ink-2);
+}
+
+.dock-tools .dock-fit:hover:not(:disabled) {
+  background: transparent;
+  color: var(--ink-1);
+}
+
+/* The container measures the CONTENT box: the canvas less 24px of padding.
+   The Project and shot heads: below 860px the clock drops its suffix, below
+   760px the zoom keeps only its track. Sound's head carries the tempo, the
+   bar and beat, Library and Generate besides, so it gives the same pieces up
+   sooner, then Fit (its key, \, stays), then the zoom altogether. */
+@container dock-view (width < 860px) {
+  .dock-time-frame {
+    display: none;
+  }
+}
+
+@container dock-view (width < 760px) {
+  .dock-zoom-step {
+    display: none;
+  }
+}
+
+@container dock-view (width < 1040px) {
+  .dock-view.is-sound .dock-time-frame {
+    display: none;
+  }
+}
+
+@container dock-view (width < 960px) {
+  .dock-view.is-sound .dock-zoom-step {
+    display: none;
+  }
+}
+
+@container dock-view (width < 880px) {
+  .dock-view.is-sound .dock-fit {
+    display: none;
+  }
+}
+
+@container dock-view (width < 800px) {
+  .dock-view.is-sound .dock-zoom-group {
+    display: none;
+  }
+}
+
+/* The lane: the body row's full width, or its two left tracks while Sound
+   mode's mixer (or its Generate drawer) holds the right one. */
+.dock-body {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.dock-body.has-side {
+  grid-column: 1 / 3;
+}
+
+/* THE `hidden` ATTRIBUTE ONLY WORKS IF THIS RULE EXISTS. `[hidden]
+   { display: none }` is a USER-AGENT rule and the author `display: flex`
+   above outranks it, so a collapsed dock kept every row laid out.
+   `dockCollapse.test.tsx` asserts the attribute; sourceHygiene reads this. */
+.dock-body[hidden] {
+  display: none;
+}
+
+.dock-scroll {
+  overflow: auto;
+  min-height: 0;
+  padding-bottom: var(--space-3);
+}
+
+/* STICKY, because the dock scrolls vertically now: shot rows follow the
+   playhead up and down, and a time ruler that leaves with them takes the
+   answer to "where are we" with it. Above `.dock-overlay` (3) and the sticky
+   label cells (4); the playhead inside it keeps its own local stacking. */
+/* A FLEX ROW, because the label column's corner is a real child rather than
+   `padding-left`: it is sticky-left like every label cell under it, so it
+   cannot be absolutely positioned inside a padding. */
+.dock-ruler {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background: var(--surface-panel);
+  height: 28px;
+  display: flex;
+}
+
+/* ── THE RULER'S OWN RULES ───────────────────────────────────────────────
+ *
+ * `Ruler` comes from @dailies-studio/timeline but its CSS lives in
+ * canvas-editor's LOCAL stylesheet, so this chrome rendered the component
+ * with no rules at all: every tick stacked at x=0 and the ruler read as the
+ * single run-on number "0102030405060". Restated here rather than moved into
+ * the shared sheet, because this lane's timeline is a BLOCK timeline and its
+ * ruler is shorter and quieter than the canvas dope sheet's. */
+.tl-ruler {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  cursor: ew-resize;
+}
+
+.tl-tick {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  padding-left: var(--space-3);
+  font: var(--type-micro)/var(--leading-none) var(--font-sans);
+  font-variant-numeric: var(--numeric);
+  font-size: var(--type-micro);
+  line-height: 20px;
+  color: var(--ink-3);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.tl-tick::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 4px;
+  width: 1px;
+  height: 6px;
+  background: var(--line);
+}
+
+/* The stretch past the document's duration, which `Ruler` draws unconditionally
+   (`left` inline, from `durationFrames`). It was the one rule the restatement
+   above missed, so it laid out as an unstyled zero-size div and the region that
+   WILL NOT EXPORT looked exactly like the region that will. On this lane the
+   master strip runs to the last block, which is routinely past the end.
+   The ruler sits on the well, the darkest ground there is, so nothing can
+   fall back from it: the stretch past the end LIFTS toward the panel grey
+   instead, the colour of the chrome that is not the work. */
+.tl-overhang {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: color-mix(in srgb, var(--surface-panel) 60%, transparent);
+  pointer-events: none;
+}
+
+/* Isolation's lane is fitted to the object, so the shot's range can start
+   inside it: the stretch BEFORE the shot lifts the same way (`width` inline). */
+.tl-overhang.is-before {
+  left: 0;
+  right: auto;
+}
+
+/* ISOLATION'S MARKERS, as ruler ticks: their lane is hidden there, and a beat
+   to time against is still worth having. The marker lane's diamond, smaller,
+   just above the ruler's floor. A press falls through to the ruler's seek
+   (it bubbles to `.tl-ruler`); the pointer stays for the label's title. */
+.dock-marker-tick {
+  position: absolute;
+  bottom: var(--space-2);
+  width: 6px;
+  height: 6px;
+  margin-left: -3px;
+  background: var(--marker-pin);
+  transform: rotate(45deg);
+}
+
+/* THE DOCK'S TICKS (`dockRulerTicks`): three tiers on a seconds ladder, a
+   zero-width box per tick whose hairline stands up off the ruler's floor, 10,
+   6 and 3px tall by tier, in every context: the 28px ruler has no room for the
+   Project's old taller set. Only the major tier is labelled, 4px down, so the
+   label clears the major hairline beside it. `.tl-tick` above is the package
+   dope sheet's. */
+.dock-tick {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  pointer-events: none;
+}
+
+.dock-tick::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 1px;
+  height: 10px;
+  background: var(--line);
+}
+
+.dock-tick[data-tier="1"]::before {
+  height: 6px;
+}
+
+.dock-tick[data-tier="2"]::before {
+  height: 3px;
+}
+
+.dock-tick-label {
+  position: absolute;
+  top: 4px;
+  left: var(--space-2);
+  font: var(--type-md)/var(--leading-xs) var(--font-numeric);
+  font-variant-numeric: var(--numeric);
+  color: var(--ink-3);
+  white-space: nowrap;
+}
+
+/* The last label reads INTO the lane from its tick, so it never runs off the
+   end of the strip it labels. */
+.dock-tick-label.is-end {
+  left: auto;
+  right: var(--space-2);
+}
+
+/* THE PLAYHEAD IS A 1px ACCENT LINE, on the ruler and through the tracks, at
+   its frame by `translate` (`PlayheadLine`). It shared the cut marker's rule
+   once, which drew it as a 9px rotated square. */
+.dock-playhead {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 1px;
+  background: var(--playhead);
+  pointer-events: none;
+  z-index: 4;
+}
+
+/* THE RULER COPY WEARS THE HEAD (`.tl-playhead-chip`, @dailies-studio/
+   timeline's playhead.css): the line starts 5px down, so the 18px pill sits
+   5px off both edges of the 28px ruler and the line runs on below it. */
+.dock-ruler .dock-playhead {
+  top: 5px;
+}
+
+.dock-tracks {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+/* One overlay for everything drawn THROUGH the tracks: the scene boundaries,
+   the snap guide and the playhead. It starts where the time area does and takes
+   no pointer events, so a boundary line can never eat a bar's drag. */
+.dock-overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  pointer-events: none;
+  z-index: 3;
+}
+
+.dock-boundary {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--line);
+}
+
+/* Isolation's shot range through the rows: the ruler's overhang wash, carried
+   down, so a key the film never reaches is tinted where it sits. */
+.dock-bounds-shade {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: color-mix(in srgb, var(--surface-panel) 40%, transparent);
+}
+
+/* THE WORK AREA, over the ruler: the window a press of Space will loop.
+   `WorkAreaBracket` (Header.tsx) says why the numbers come off `playbackWindow`
+   and not off `state.workArea`.
+
+   A BRACKET AND NOT A HIGHLIGHT. Two solid edges with a barely-there wash
+   between them, because the thing an author is checking is WHERE THE EDGES ARE
+   — they were just set with ⌥I and ⌥O — and a filled band over the ticks makes
+   the timecodes inside it harder to read than the ones outside, which is the
+   opposite of what a bracket is for.
+
+   POINTER-TRANSPARENT. `.tl-ruler` carries the seek-and-drag handler and this
+   sits on top of the stretch an author scrubs most; taking the press would make
+   the ruler dead exactly inside the region they are working in. */
+.dock-work-area {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-left: 2px solid var(--accent);
+  border-right: 2px solid var(--accent);
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+  pointer-events: none;
+  /* Under the playhead (4) and over the ticks. */
+  z-index: 2;
+}
+
+/* The snap guide is the accent, and it only exists while a drag is ON a target
+   — a guide that showed for a drag that merely rounded would teach the author
+   that snapping is always on top of them. */
+.dock-snap-guide {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--accent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+
+/* ---- the dock's label-column corner ------------------------------------- */
+/* The ruler's first `labelWidth` pixels, over the label column: it NAMES what
+   the column lists (the entered shot, or the open definition), and in the
+   scene context it is the expand-all over the shots. The one way back out
+   lives in the canvas bar.
+
+   Sticky-left like every label cell below it, so it stays put while the lanes
+   scroll under the ruler, and on the same seam. */
+.dock-corner {
+  position: sticky;
+  left: 0;
+  z-index: 6;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  min-width: 0;
+  padding: 0 var(--space-7);
+  background-color: var(--surface-panel);
+  border-right: 1px solid var(--line);
+}
+
+/* The column's caps label: a shot's or a definition's name, cut short rather
+   than pushed past the seam. The same 11/16 caps as the Project's TRACKS. */
+.dock-corner-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ink-3);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-caps);
+  font: var(--weight-semibold) var(--type-sm)/var(--leading-xs) var(--font-sans);
+}
+
+/* In isolation the corner names the object: its kind's glyph, then its label
+   in the same caps. The glyph takes the label's ink. */
+.dock-corner-iso {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  color: var(--ink-3);
+}
+
+.dock-corner-iso svg {
+  flex: none;
+  width: 12px;
+  height: 12px;
+}
+
+/* The Project's TRACKS head and the expand-all over the shots: the same caps
+   label, with the disclosure chevron every row under it uses. Quiet like a
+   column head, not a chip. */
+.dock-summary {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  font: var(--weight-semibold) var(--type-sm)/var(--leading-xs) var(--font-sans);
+  letter-spacing: var(--tracking-caps);
+  text-transform: uppercase;
+  color: var(--ink-3);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+
+.dock-summary:hover,
+.dock-summary[aria-expanded="true"] {
+  color: var(--ink-1);
+}
+
+/* ---- re-homed here from other region files (the component that renders
+   these lives in this region) ------------------------------------------ */
+
+/* Narrow, because what it conveys is a POSITION in a range rather than a
+   precise value, and the wheel is still there for anyone who wants to land
+   on a number. `flex: none` so a narrow canvas squeezes the verbs, not the
+   one track. */
+.dock-zoom {
+  width: 96px;
+  flex: none;
+}
+
+/* In the dock head it is a short track between its two ends (minus, track,
+   plus), 10 apart, and the ends step a tenth of the range. The track is a 2px
+   hairline and the thumb a 10px ink dot: a zoom is a position to glance at,
+   so it is drawn quieter than the shared scrub recipe (controls.css). */
+.dock-zoom-group > .dock-zoom {
+  width: 72px;
+}
+
+.dock-zoom-group > .dock-zoom::-webkit-slider-runnable-track {
+  height: 2px;
+  background: var(--line);
+}
+
+.dock-zoom-group > .dock-zoom::-webkit-slider-thumb {
+  width: 10px;
+  height: 10px;
+  margin-top: calc(-1 * var(--space-2));
+  background: var(--ink-1);
+  box-shadow: none;
+}
+
+.dock-zoom-group > .dock-zoom::-moz-range-track {
+  height: 2px;
+  background: var(--line);
+}
+
+.dock-zoom-group > .dock-zoom::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  background: var(--ink-1);
+}
+
+.dock-zoom-group {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+}
+
+/* The two ends: ghost icon buttons, smaller than the head's 28 so the three
+   read as one control. */
+.dock-zoom-group .dock-zoom-step {
+  width: 24px;
+  height: 24px;
+  color: var(--ink-2);
+}