/* Docking only changes the workspace. Project data and transport stay in place. */
#studio { min-height: 600px; grid-template-rows: 40px minmax(0,1fr) auto; }
.transport-bar { padding: 0 8px; gap: 8px; font-size: var(--font-secondary); }
.transport-right > button { height: 26px; padding: 0 9px; font-size: var(--font-secondary); }
.transport-left, .transport-right { min-width: 0; gap: 7px; }
.transport-left .project-actions { gap: 2px; margin-right: 5px; }
.project-actions button { height: 26px; font-size: var(--font-secondary); padding: 0 7px; }
#save-state { display: inline-block; width: 5px; height: 5px; margin: 0 1px 2px 3px; border-radius: 50%; background: var(--dim); font-size: 0; }
#save-state[data-state=saving] { background: var(--text); }
#save-state[data-state=error] { background: var(--live); }
.file-menu .file-project { padding: 7px 9px 12px; border-bottom: 1px solid var(--line-soft); }
.file-project small { display: block; font-size: var(--font-meta); color: var(--muted); margin-bottom: 5px; }
.file-project #project-name { max-width: 100%; white-space: normal; text-align: left; padding: 2px 0; font-size: var(--font-control); }
.file-menu .wiki-link { display: block; margin: 0; padding: 10px; border: 0; font-size: var(--font-control); }
.file-menu #help-button { width: auto; height: auto; border: 0; border-radius: 3px; padding: 10px; font-size: var(--font-control); }
.status-footer { display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-height: var(--panel-header-height); padding: 2px var(--panel-padding); border-top: var(--panel-rule); background: var(--bg); color: var(--muted); line-height: 16px; position: sticky; bottom: 0; z-index: 20; }
.status-footer > #toast { flex: 0 1 28%; margin-left: auto; }
.status-footer:has(#audio-status[hidden]) > #toast { flex: 1; margin-left: 0; }
.panel-diagnostics { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-soft); padding: 10px 8px 4px; color: var(--muted); font-size: var(--font-secondary); }
.panel-diagnostics #performance { font-size: var(--font-secondary); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dock-workspace { display: block; min-width: 0; min-height: 0; overflow: hidden; padding: 6px; background: var(--field); }
.dock-tree { display: flex; height: 100%; min-height: 0; min-width: 0; }
.dock-tree > * { flex: 1; }
.dock-split { display: flex; min-width: 0; min-height: 0; overflow: hidden; }
.dock-split[data-axis=y] { flex-direction: column; }
.dock-divider { flex: 0 0 6px; position: relative; outline-offset: -2px; touch-action: none; cursor: col-resize; background: var(--field); }
[data-axis=y] > .dock-divider { cursor: row-resize; }
.dock-divider::after { content: ''; position: absolute; border-radius: 3px; background: var(--line); inset: calc(50% - 18px) 2px; }
[data-axis=y] > .dock-divider::after { inset: 2px calc(50% - 18px); }
.dock-divider:hover::after, .dock-divider:focus-visible::after { background: var(--text); }
.dock-divider:focus-visible { outline: 1px solid var(--text); }
.dock-resizing { user-select: none; }
/* Groups have no frame: the 6 px of --field between them is the separation; the header carries one soft rule inside its 24 px. */
.dock-group { display: flex; flex-direction: column; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); container-type: inline-size; }
.dock-header { display: flex; align-items: stretch; justify-content: space-between; flex: 0 0 auto; min-height: var(--panel-header-height); min-width: 0; background: var(--bg); border-bottom: var(--panel-rule); }
.dock-preview-tools { display: flex; align-items: center; margin-left: auto; padding: 0 6px; }
.dock-preview-tools .segmented button { min-height: 20px; padding: 0 6px; font-size: var(--font-secondary); }
.dock-tabs { display: flex; align-items: stretch; gap: 1px; min-width: 0; overflow: auto; scrollbar-width: none; }
.dock-tab { position: relative; display: flex; align-items: center; padding: 0 10px; border-radius: 0; border: 0; font-size: var(--font-secondary); color: var(--muted); cursor: grab; }
/* The drag glyph sits in the tab's left padding and shows on hover, so it adds no width. */
.dock-tab::before { content: '⠿'; position: absolute; left: 1px; color: var(--dim); font-size: var(--font-meta); opacity: 0; }
.dock-tab:hover::before, .dock-tab:focus-visible::before { opacity: 1; }
.dock-tab:active { cursor: grabbing; }
.dock-tab[aria-selected=true] { color: var(--hue, var(--text)); font-weight: var(--font-weight); }
/* The selected title and body tint carry the panel identity. No dots or underlines. */
.dock-body { --bg: color-mix(in srgb, var(--hue, transparent) 14%, var(--ground)); background: var(--bg); }
#dock-tab-library, #dock-content-library { --hue: var(--hue-library); }
#dock-tab-input, #dock-content-input { --hue: var(--hue-input); }
#dock-tab-output, #dock-content-output { --hue: var(--hue-output); }
#dock-tab-sequencer, #dock-content-sequencer { --hue: var(--hue-sequencer); }
#dock-tab-inspector, #dock-content-inspector { --hue: var(--hue-inspector); }
.dock-actions { display: flex; flex-shrink: 0; align-items: center; padding: 0 3px; gap: 1px; }
.dock-actions button { width: 20px; height: 20px; padding: 0; font-size: var(--font-control); color: var(--muted); }
.dock-actions .dock-options { font-size: var(--font-meta); letter-spacing: 1px; }
.dock-body { display: flex; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.dock-body > [data-panel] { width: 100%; height: 100%; flex: 1; min-height: 0; min-width: 0; }
.dock-group[data-collapsed=true][data-parent-axis=x] .dock-header { flex: 1; flex-direction: column; align-items: center; }
.dock-group[data-collapsed=true][data-parent-axis=x] .dock-tabs { writing-mode: vertical-rl; flex: 1; }
.dock-group[data-collapsed=true][data-parent-axis=x] .dock-tab { padding: 9px 4px; border: 0; }
.dock-group[data-collapsed=true][data-parent-axis=x] .dock-tab::before { display: none; }
.dock-group[data-collapsed=true][data-parent-axis=x] .dock-actions { flex-direction: column; padding: 4px 0; }
.dock-group[data-collapsed=true] .dock-focus { display: none; }
.dock-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); gap: 10px; }
.dock-empty button { border: 1px solid var(--line); }
.dock-body .browser { border: 0; }
.dock-body .browser > .panel-heading { display: none; }
.dock-body .browser-bottom { padding: 8px 12px; }
.dock-body .browser-bottom p { margin-bottom: 6px; }
.dock-body .browser-bottom a { display: none; }
.dock-body .browser-bottom, .browser-section-title { display: none; }
.preset > span { gap: 0; }
.preset small { display: none; }
.preset { padding: 3px 5px; gap: 8px; min-height: 30px; }
.preset svg { width: 22px; height: 22px; }
.search { margin: 8px; padding: 3px 6px; }
.browser-nav { padding: 0 6px 6px; margin-bottom: 4px; }
.browser-nav button { min-height: 22px; padding: 4px 6px; }
.browser-import { padding: 4px 6px; }
.canvas-corner { display: none; }
#arrangement-hint:not(.contextual-hint) { display: none; }
.source-badge { justify-content: flex-end; }
.source-badge #source-state:not([hidden]) { margin-right: auto; }
.dock-body .preview-panel > .panel-heading { display: none; }
.preview-footer { min-height: 24px; padding: 3px 8px; }
#playback-mode, #manual-tone { min-width: 0; max-width: 100px; padding: 2px 4px; font-size: var(--font-secondary); }
.output-panel .preview-footer { flex-wrap: wrap; gap: 4px 8px; }
.output-panel .scan-readout { margin-left: auto; }
.manual-playing #input-canvas:focus, .manual-playing #output-canvas:focus { outline: 2px solid var(--text); outline-offset: -2px; }
.manual-playing #input-canvas, .manual-playing #output-canvas { touch-action: none; cursor: pointer; }
.dock-body .preview-panel > .panel-heading > span { display: none; }
.dock-body .device-area { display: flex; flex-direction: column; overflow: hidden; flex-shrink: 1; }
/* Three open internal panels. The Voice header owns its name and actions. */
.dock-body .device-chain { height: auto; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); grid-template-rows: minmax(var(--inspector-voice-height),auto) minmax(var(--inspector-stages-height),1fr); gap: var(--panel-gap); overflow: auto; background: var(--field); }
.inspector-panel { min-width: 0; min-height: 0; border: var(--panel-border); background: var(--bg); }
.voice-panel { grid-column: 1 / -1; display: flex; flex-direction: column; }
.dock-body .device-toolbar { flex: 0 0 var(--panel-header-height); height: var(--panel-header-height); gap: var(--space-3); padding: 0 var(--panel-padding); grid-template-columns: auto minmax(0,1fr) auto; background: var(--field); }
.inspector-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; margin: 0; color: var(--text); font-size: var(--panel-font-size); line-height: 14px; font-weight: var(--font-weight); }
.inspector-heading small { color: var(--muted); font-size: var(--font-meta); }
.device-toolbar #rename-track { flex: 1; width: 100%; min-width: 0; height: var(--target-min); padding: 0 var(--space-1); border: 1px solid transparent; border-radius: 0; background: transparent; font-size: var(--panel-font-size); }
.device-toolbar #rename-track:hover:not(:disabled), .device-toolbar #rename-track:focus { border-color: var(--line); }
.device-toolbar #voice-menu-button { padding: 0 4px; }
#library-drive h3 { display: flex; align-items: center; justify-content: space-between; }
#drive-count { color: var(--dim); margin-left: var(--space-1); }
#library-drive h3 button, .drive-entry > button, .drive-audition > button:not(.now-title) { min-width: var(--target-min); min-height: var(--target-min); padding: 0 var(--space-1); }
.drive-entry { display: flex; align-items: center; min-width: 0; gap: var(--space-1); }
.drive-entry > [data-drive-preview] { flex: 1; display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: var(--space-1); text-align: left; }
.drive-play { flex: none; color: var(--muted); }
.drive-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-title small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.drive-entry [aria-pressed=true] .drive-play { color: var(--text); }
.drive-audition { display: flex; align-items: center; gap: var(--space-1); padding: 0 var(--panel-gap) var(--panel-gap); }
.drive-audition .now-title { flex: 0 1 45%; display: flex; align-items: center; gap: var(--space-1); min-width: 0; color: var(--text); text-align: left; }
.drive-audition .now-title [data-drive-now] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-now { flex: none; }
.library-reference label { display: flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.library-reference .now-mark { color: var(--dim); }
.library-reference.active .now-mark, .library-reference.active label { color: var(--text); }
#reference-locate { min-width: var(--target-min); min-height: var(--target-min); padding: 0 var(--space-1); color: var(--muted); }
#reference-stage { flex: none; min-height: var(--target-min); padding: 0 var(--space-1); color: var(--muted); white-space: nowrap; }
#reference-stage[aria-pressed="true"] { color: var(--text); background: var(--field); }
/* One marking for "this is the reference" and "this is playing" wherever the track appears: a filled row and full-white text, no border colour. */
.drive-entry.is-reference, .shortlist-entry.is-reference, .drive-entry.is-preview, .shortlist-entry.is-preview, #library-audio .preset[aria-current=true] { background: var(--field); }
.is-reference .drive-title, .is-preview .drive-title { color: var(--text); }
.is-reference .drive-title::before { content: '● '; }
.is-preview .drive-play { color: var(--text); }
.located { outline: 1px solid var(--text); outline-offset: -1px; }
#library-shortlist h3 output, #shortlist-count { color: var(--dim); margin-left: var(--space-1); }
#library-shortlist h4 { margin: var(--space-1) 6px 0; font-size: var(--font-meta); font-weight: var(--font-weight); color: var(--muted); }
.shortlist-entry { display: flex; align-items: center; min-width: 0; gap: var(--space-1); }
.shortlist-entry > [data-drive-preview] { flex: 1; display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: var(--space-1); text-align: left; }
.shortlist-entry > button { min-width: var(--target-min); min-height: var(--target-min); padding: 0 var(--space-1); }
.shortlist-entry small { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); }
.shortlist-reading { flex: none; }
.energy { flex: 1; min-width: 24px; max-width: 72px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
[data-drive-level] { color: var(--dim); }
[data-drive-level].tagged { color: var(--text); }
.drive-audition input { flex: 1; min-width: var(--target-min); }
.drive-audition output { color: var(--muted); }
#audio-status { display: flex; align-items: center; flex-wrap: wrap; flex: 1; min-width: 0; gap: 0 var(--space-2); }
.audio-status-heading { display: contents; }
.audio-status-state { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
[data-audio-name] { flex: 0 1 28%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
[data-audio-dismiss] { order: 3; flex: none; min-width: var(--target-min); min-height: var(--target-min); padding: 0; }
[data-audio-cancel] { order: 3; flex: none; min-height: var(--target-min); padding: 0 var(--space-2); }
.audio-status-state, [data-audio-detail] { color: var(--muted); }
[data-audio-detail] { flex: 1 1 220px; margin: 0; overflow-wrap: anywhere; }
[data-audio-value] { flex: none; }
#audio-status[data-phase=error] [data-audio-phase], #audio-status[data-phase=recording] [data-audio-phase], #audio-status[data-phase=recording] [data-audio-value] { color: var(--live); }
[data-audio-progress] { order: 2; display: block; flex: none; width: 64px; height: var(--space-1); margin: 0; border: 0; appearance: none; background: var(--line); accent-color: var(--text); }
[data-audio-progress]::-webkit-progress-bar { background: var(--line); }
[data-audio-progress]::-webkit-progress-value { background: var(--text); }
[data-audio-progress]::-moz-progress-bar { background: var(--text); }
.voice-devices { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr) minmax(0,1.35fr) minmax(0,1fr); gap: var(--panel-gap); padding: var(--panel-gap); background: var(--field); }
.voice-devices > .device { padding: 0; border: var(--panel-border); background: var(--bg); }
/* Float the legend into the fieldset's flow so the header spans the panel above its controls. */
.voice-devices > .device > legend { float: left; min-height: var(--device-header-height); align-items: center; padding: var(--panel-header-padding); margin: 0; border-bottom: var(--panel-rule); background: var(--field); color: var(--text); letter-spacing: 0; text-transform: none; }
.voice-devices > .device > .device-body { clear: both; padding: var(--panel-body-padding); gap: var(--panel-gap); }
.voice-devices .effect-thumb { height: var(--effect-preview-height); }
.voice-devices .effect-card + .effect-card { padding-top: var(--panel-gap); }
.device-chain > .device { padding: 0; overflow: hidden; }
.device-chain > .device > .inspector-heading { flex: 0 0 var(--panel-header-height); padding: 0 var(--panel-padding); border-bottom: var(--panel-rule); background: var(--field); }
.device-chain > .device > .device-body { padding: calc(var(--panel-gap) + 2px) var(--panel-padding); }
.level-device .level-table { table-layout: fixed; font-size: var(--font-secondary); }
.level-device .level-table th, .level-device .level-table td { padding: 0 3px; height: 20px; }
.level-device .level-table th:first-child { width: 94px; }
.level-device .level-table th:nth-child(2) { width: 25px; }
.level-device:not(.keyboard-level-device) .level-table th:nth-last-child(-n+2) { width: 44px; }
.level-device .level-table tr.transition-row td:first-child { padding-left: 8px; font-size: var(--font-meta); }
.level-device .level-table select, .level-device .level-table input[type=number] { min-width: 0; width: 100%; height: 18px; min-height: 18px; padding: 0 2px; font-size: var(--font-secondary); }
.level-device .level-progress { margin: 0; gap: 8px; font-size: var(--font-secondary); }
.level-device .level-progress input { height: 14px; max-width: 140px; }
.device-chain .cell { width: 31px; }
.device-chain .matrix tbody th { padding-right: 5px; }
.device-chain .matrix thead th { height: 24px; font-size: var(--font-meta); }
.device-chain .matrix thead output { display: none; }
.device-chain .matrix-hint { display: none; }
.keyboard-level-device > legend { display: flex; }
.preset-list section + section { margin-top: 20px; }
.preset-list h3 { margin: 6px; font-size: var(--font-meta); font-weight: var(--font-weight); color: var(--muted); letter-spacing: 0; text-transform: none; }
.preset-list .empty-library { padding: 4px 6px; margin: 0; font-size: var(--font-secondary); }
.browser-nav { display: none; }
.sequencer-content { display: flex; flex: 1; min-height: 0; min-width: 0; }
.sequencer-content > .arrangement { flex: 1; min-width: 0; }
.dock-body .sequencer-content > .session { flex: 0 0 286px; display: flex; flex-direction: column; gap: 0; padding: 0 5px; border-left: 1px solid var(--line-soft); }
.session-column, .session-master { display: grid; grid-template-columns: minmax(0,1fr) repeat(8,24px); gap: 2px; align-items: center; flex-shrink: 0; }
.session-column { height: 34px; }
.session-master { height: 28px; padding: 0; font-size: var(--font-meta); color: var(--muted); }
.session-title { padding: 0; border: 0; font-size: var(--font-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-column.off .session-title { color: var(--dim); }
.session-clip, .session-clip.active, .scene-launch { justify-content: center; height: 24px; padding: 0; border: 0; background: transparent; font-size: var(--font-meta); }
.session-clip { color: var(--color); }
.session-clip.active { color: var(--color); background: var(--field); outline: 1px solid var(--line); outline-offset: -1px; }
.session-clip.disabled { color: var(--muted); opacity: 1; text-decoration: none; }
.scene-launch { text-align: center; }
.sequencer-toolbar .view-switch { display: none; }
@container (max-width: 960px) {
  .dock-body .device-chain { display: flex; flex-direction: column; }
  .voice-panel { flex: none; }
  .voice-devices { flex: none; min-height: auto; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .voice-devices > .device { overflow: visible; }
  .device-chain > .device { flex: none; height: 260px; }
}
@container (max-width: 480px) {
  .voice-devices { display: flex; flex-direction: column; }
  .voice-devices > .device { flex: none; }
  .device-chain .matrix-wrap, .device-chain .level-table-wrap { overflow: auto; }
  .device-chain .level-table { min-width: 480px; }
  .sequencer-content { overflow: auto; }
  body[data-mode=advanced] .sequencer-content > .arrangement { flex: 1 0 280px; }
}
.dock-body .sequencer { min-height: 0; }
.dock-body .sequencer-toolbar { height: auto; min-height: 28px; flex-wrap: wrap; gap: 2px 10px; padding: 2px 8px; }
.dock-body .sequencer-footer { flex-shrink: 0; height: 24px; }
.timeline-navigation { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-top: var(--panel-rule); }
.timeline-navigation .timeline-zoom { padding: 0; border: 0; gap: var(--space-1); }
.timeline-navigation button { min-width: var(--target-min); min-height: var(--target-min); padding: 0 var(--space-1); border: 0; color: var(--muted); }
#timeline-position { flex: 1; min-width: var(--target-min); width: 0; margin: 0; }
#timeline-range { flex: none; color: var(--muted); }
/* All voices is a list setting, not a zoom: it sits apart at the row's end, and pressed it is underlined in white, as Guides is, so hover
   (a --field fill) never reads as pressed. */
#timeline-all-voices { margin-left: var(--space-2); }
#timeline-all-voices[aria-pressed=true] { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
/* A voice listed in a stage it does not play in (the selection, a soloed voice, or All voices) is dimmed: its name and subtitle in the
   greys, its colour bar and lane below a muted lane's .5, and its meter empty, since it draws nothing here. M and S keep their
   contrast: a lit S there is why a stage is dark. */
.track-header.off .track-name span { color: var(--muted); } .track-header.off .track-name small { color: var(--dim); }
.track-header.off:before, .track-header.off .track-meter, .track-lane.off { opacity: .35; }
/* A stage lists a few voices: the rows share the Timeline's height, never below 34 px, and scroll past that. Session's rows follow the same
   rule under its 28 px header, as the lanes do under the ruler, so the two stay in line. */
.track-headers, .track-lanes { display: flex; flex-direction: column; }
.track-header, .track-lane, .dock-body .session-column { flex: 1 0 34px; height: auto; min-height: 34px; }
.track-lane canvas { height: 100%; }
.dock-body .session { min-height: 0; flex: 1; overflow: auto; }
.audio-spectrum { height: 40px; }
.source-device, .envelope-device, .drawing-device, .effects-device { display: block; }
.live-midi-hint { margin: 0; color: var(--muted); font-size: var(--font-secondary); line-height: 1.6; }
.live-midi-hint button { padding: 0; text-decoration: underline; color: var(--text); font-size: inherit; }
.panel-menu { width: 286px; }
.panel-menu strong { font-size: var(--font-control); font-weight: var(--font-weight); padding: 5px 8px; color: var(--text); }
.dock-move { border-top: 1px solid var(--line-soft); padding: 10px 8px; }
.dock-move summary { cursor: pointer; font-size: var(--font-secondary); }
.dock-move label { display: flex; flex-direction: column; gap: 5px; font-size: var(--font-secondary); margin: 12px 0; }
#dock-apply { background: var(--text); color: var(--bg); width: 100%; }
.dock-drop-hint { display: none; position: absolute; z-index: 20; align-items: center; justify-content: center; pointer-events: none; border: 2px solid var(--text); background: color-mix(in srgb,var(--bg) 85%,transparent); font-size: var(--font-control); color: var(--text); }
.workspace-tools, .workspace-control-group { display: flex; align-items: center; gap: 1px; }
.workspace-tools { gap: 5px; flex: none; }
.workspace-control-group + .workspace-control-group { border-left: 1px solid var(--line-soft); padding-left: 5px; }
.workspace-tools button { position: relative; display: grid; place-items: center; width: 24px; height: 26px; padding: 3px; border-radius: 0; }
.workspace-tools svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.workspace-tools button[aria-pressed=true] { color: var(--text); }
.workspace-tools button[aria-pressed=false] { color: var(--muted); }
.workspace-tools button::after { content: attr(aria-label); display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; padding: 5px 7px; color: var(--text); background: var(--bg); border: 1px solid var(--line); font-size: var(--font-secondary); pointer-events: none; }
.workspace-tools button:hover::after, .workspace-tools button:focus-visible::after { display: block; }
@media(max-width:1200px) {
  #studio { grid-template-rows: 64px minmax(0,1fr) auto; }
  .transport-bar { position: relative; padding-bottom: 28px; }
  .workspace-tools { position: absolute; left: 8px; bottom: 1px; height: 26px; }
}
.dock-group[data-drop] > .dock-drop-hint { display: flex; }
.dock-group[data-drop=join] > .dock-drop-hint { inset: 24% 24%; }
.dock-group[data-drop=left] > .dock-drop-hint { inset: 0 50% 0 0; }
.dock-group[data-drop=right] > .dock-drop-hint { inset: 0 0 0 50%; }
.dock-group[data-drop=above] > .dock-drop-hint { inset: 0 0 50%; }
.dock-group[data-drop=below] > .dock-drop-hint { inset: 50% 0 0; }
.dock-dragging .dock-group { outline: 1px solid var(--line); outline-offset: -1px; }
@container (max-width: 820px) {
  .level-switch small, .sequencer-footer #arrangement-hint { display: none; }
}
@container (max-width: 480px) {
  .dock-header:has(.dock-preview-tools) { flex-wrap: wrap; }
  .dock-header:has(.dock-preview-tools) > .dock-tabs { flex: 1; min-height: 24px; }
  .dock-preview-tools { order: 3; width: 100%; min-height: 24px; justify-content: flex-end; }
}
@container (max-width: 170px) {
  .browser-import { gap: 0; }
  .browser-import button>span { display: none; }
}
@container (max-width: 350px) {
  .device { padding: 12px; }
  .canvas-corner { font-size: var(--font-meta); }
  .scan-readout meter { display: none; }
  .preview-footer { flex-wrap: wrap; gap: 3px; font-size: var(--font-meta); }
  .segmented button { padding: 4px 6px; font-size: var(--font-secondary); }
  .view-switch span { display: none; }
}
@media(max-width:850px) {
  .transport-bar { padding: 0 5px; gap: 6px; }
  .transport-left, .transport-right { gap: 5px; }
  .transport-right > button { padding: 0 6px; }
  .transport-right > .mode-toggle { padding: 0 3px; }
}
@media(max-width:700px) {
  #studio { height: auto; min-height: 100dvh; grid-template-rows: 96px minmax(0,1fr) auto; }
  .status-footer { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .status-footer > #toast { flex: none; margin-left: 0; }
  .transport-bar { position: relative; padding: 30px 6px 28px; gap: 5px; }
  .transport-right > button { padding: 0 8px; }
  .mode-toggle { position: absolute; top: 4px; right: 40px; height: 22px; padding: 0 8px; }
  .help-toggle { right: 8px; }
  .transport-left .project-actions { position: absolute; left: 8px; right: 8px; top: 2px; height: 26px; margin: 0; border-bottom: 1px solid var(--line-soft); }
  .transport-left .project-actions button { height: 24px; }
  .dock-workspace { min-height: 600px; }
  .dock-tree, .dock-split { display: flex; height: auto; flex-direction: column; overflow: visible; gap: 6px; }
  .dock-split > *, .dock-tree > * { flex: none !important; }
  .dock-divider { display: none; }
  .dock-group { flex: none !important; height: 330px; width: 100%; }
  .dock-group[data-active-panel=inspector] { height: 460px; }
  .dock-group[data-active-panel=library] { height: 260px; }
  .dock-group[data-collapsed=true] { height: 24px; }
  .dock-group[data-collapsed=true][data-parent-axis=x] .dock-header { flex-direction: row; }
  .dock-group[data-collapsed=true][data-parent-axis=x] .dock-tabs { writing-mode: horizontal-tb; }
  .dock-group[data-collapsed=true][data-parent-axis=x] .dock-tab { padding: 0 10px; }
  .dock-group[data-collapsed=true][data-parent-axis=x] .dock-actions { flex-direction: row; padding: 0 3px; }
  .dock-focused .dock-group { height: calc(100dvh - 110px); min-height: 400px; }
  .project-actions .wiki-link { display: none; }
}

.keyboard-level-device .level-table th, .keyboard-level-device .level-table td { padding: 3px 5px; }
.keyboard-level-device .level-table th { font-size: var(--font-label); }
.keyboard-level-device .level-table select { min-height: 24px; padding: 2px 5px; font-size: var(--font-secondary); }
.keyboard-level-device .level-progress { padding-top: 3px; }
.keyboard-level-device > legend { display: flex; }
.keyboard-level-device .level-table td { padding: 2px 5px; }

#microphone-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
#microphone-controls[hidden] { display: none; }
#microphone-controls select { min-width: 0; max-width: 150px; padding: 2px 4px; font-size: var(--font-secondary); }
#microphone-controls button { padding: 2px 6px; font-size: var(--font-secondary); }
#microphone-controls label { display: flex; align-items: center; gap: 4px; font-size: var(--font-secondary); }
#microphone-meter { width: 42px; height: 8px; }
#microphone-threshold { width: 54px; }
#microphone-controls { flex: 0 1 350px; max-width: 100%; }

body[data-mode=simple] .device > legend small { display: none; }

.device-chain .level-table input[type=checkbox] { margin: 0; vertical-align: middle; }
.device-chain .keyboard-level-device .level-table th, .device-chain .keyboard-level-device .level-table td { padding: 0 3px; height: 20px; white-space: nowrap; }
.device-chain .keyboard-level-device .level-table select { min-height: 18px; height: 18px; padding: 0 2px; }
.device-chain .keyboard-level-device .level-progress { padding: 0; }
.device-chain .matrix td .more { left: auto; right: 1px; bottom: 1px; width: 12px; height: 10px; padding: 0; font-size: var(--font-meta); line-height: 9px; }

.keyboard-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.keyboard-controls > .inspector-field { grid-column: 1 / -1; }

/* The semantic scale is shared by docked panels, direct controls and canvas text. */
body[data-mode=simple] { --inspector-height: 580px; --inspector-voice-height: 250px; --inspector-stages-height: 300px; }
.stage-scene-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); font-size: var(--font-secondary); }
.stage-scene-row label { white-space: nowrap; color: var(--muted); }
.stage-scene-row select { flex: 1; min-width: 0; padding: 2px var(--space-1); height: var(--control-height); font-size: var(--font-secondary); }
.stage-scene-row button { min-height: var(--control-height); padding: 0 var(--space-1); }
.device-chain .level-table th, .device-chain .level-table td,
.device-chain .keyboard-level-device .level-table th, .device-chain .keyboard-level-device .level-table td { height: var(--target-min); }
.device-chain .level-table select, .device-chain .level-table input[type=number],
.device-chain .keyboard-level-device .level-table select { height: var(--target-min); min-height: var(--target-min); font-size: var(--font-secondary); }
.level-device .level-table th:first-child { width: 126px; }
.level-device .level-table tr.transition-row td:first-child { padding-left: 3px; font-size: var(--font-secondary); }
.stage-row-select { width: 100%; text-align: left; padding: 0; min-height: var(--target-min); font-size: var(--font-secondary); }
.stage-row-select[aria-pressed=true] { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.inspector-field > span, .device legend, .matrix th, .browser-section-title { color: var(--muted); }
.dock-actions button { min-width: var(--target-min); min-height: var(--target-min); }
.dock-preview-tools .segmented button, .pill { min-height: var(--target-min); }
.device-chain .effect-actions button { min-width: var(--target-min); min-height: var(--target-min); color: var(--muted); }
.device-chain label.readout input { min-height: var(--target-min); }
.session-title { font-size: var(--font-meta); }
@container (max-width: 960px) {
  .dock-body .device-toolbar { height: auto; min-height: var(--panel-header-height); flex-basis: auto; grid-template-columns: auto minmax(0,1fr) auto; }
  .device-chain > .device { height: 330px; }
}

.voice-devices .midi-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
#levels-heading .level-progress { font-weight: var(--font-weight); font-size: var(--font-meta); gap: var(--space-1); }
#levels-heading .level-progress input { width: 64px; }