.workbench {
  --wb-cols: 272px minmax(0, 1.3fr) minmax(0, 1fr);
  --wb-cols-lg: 252px minmax(0, 1.2fr) minmax(0, 1fr);
  --wb-cols-md: minmax(0, 1fr) minmax(0, 1fr);
}

/* Rig: the space the clips are written in folds away under the drop. */
.rig-space > summary { cursor: pointer; list-style: none; }
.rig-space > summary::-webkit-details-marker { display: none; }
.rig-space > summary h3::before { content: "▸ "; color: var(--dim); }
.rig-space[open] > summary h3::before { content: "▾ "; }
.transform-grid { margin-bottom: var(--sp-3); }
.axes-field { margin-bottom: var(--sp-2); }
.axes-field input { font-family: var(--font-mono); }
.axes-field input:read-only { color: var(--muted); }
.axes-field.is-error input { border-color: var(--error); color: var(--error); }
#sourceOnly:disabled { opacity: .55; }

/* Clips: one row per take, the radio picks it, the dot says how it is. */
.clip-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: 6px; }
.clip-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 6px 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--well); cursor: pointer; }
.clip-row input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.clip-row:has(input:checked) { border-color: var(--accent); background: var(--panel-2); }
.clip-row:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.clip-name { display: grid; min-width: 0; }
.clip-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.clip-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-2xs); }
.clip-row .btn { position: relative; z-index: 1; }
.status-dot.is-busy { background: var(--accent); }
.status-dot.is-stale { background: var(--warn); }
.status-dot.is-error { background: var(--error); }
#clipControls:disabled { opacity: .55; }
/* The frame-rate field shows only when the rate is set by hand. */
.fps-field { display: none; }
#clipControls:has(input[name="fpsMode"][value="custom"]:checked) .fps-field { display: grid; }
.range-grid { margin-top: var(--sp-2); }
#detectLoop { margin-top: var(--sp-2); }

/* The transport under the preview, and the timeline under that. */
.transport { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.transport .seg { margin-top: 0; margin-left: auto; }
.transport-time { flex: 1; min-width: 96px; color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-xs); white-space: nowrap; }
.timeline-block { padding: 0 12px 12px; border-top: 0; background: var(--panel-2); }
#timeline { display: block; width: 100%; height: 84px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--well); touch-action: none; cursor: ew-resize; }
#timeline:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Report: four sections, the tabs pick one. */
.report-pane:has(input[name="report"][value="summary"]:checked) [data-report="summary"],
.report-pane:has(input[name="report"][value="events"]:checked) [data-report="events"],
.report-pane:has(input[name="report"][value="health"]:checked) [data-report="health"],
.report-pane:has(input[name="report"][value="header"]:checked) [data-report="header"] { display: block; }
@supports not selector(:has(*)) {
  [data-report="summary"] { display: block; }
}
.event-add { display: grid; gap: 6px; margin-bottom: var(--sp-3); }
.event-table td { padding: 2px 4px; }
.event-table input { min-height: var(--control-h-xs); padding: 0 6px; font-family: var(--font-mono); font-size: var(--fs-xs); }
.event-table input[data-field="time"], .event-table input[data-field="id"] { width: 7em; }
.event-table tr.is-error input { border-color: var(--error); }