/* style.css — SPECTRUM suite core.
   Palette lives in :root as generic role tokens (the "Ember"/Spectrum theme) so
   future modules reskin by swapping values, not rewriting rules. */
/* GRAPHITE structure + SPECTRUM colors (v0.12.1, Dustin's call): the chrome
   stays flat charcoal — 0 radius, no glow, dense — but the default palette is
   the ORIGINAL vivid identity (blue accent, pink drums, cyan synth) applied
   as highlights. The v0.12.0 mono+signal palette lives on as the Graphite
   theme in ui/themes.js; themes override color tokens only, layout stays here. */
:root {
  --bg: #191a1c;
  --panel: #202124;
  --panel-2: #28292c;
  --line: #2f3033;
  --text: #d9dbde;
  --muted: #75787e;
  --accent: #3da9ff;      /* the SPECTRUM blue — highlights only, never chrome */
  --accent-dim: #16456e;  /* hover/border step */
  --glow: #5cbcff;        /* legacy token — lighter accent, no actual glow */
  --multi: #5cbcff;       /* multi-selection highlight (Arrange) */
  --drum: #e0a458;   /* amber (Dustin, 2026-07-05: pink was too bright/contrasty) */
  --synth: #2fe0ff;
  --cell: #1d1e20;
  --cell-beat: #232426;
  --radius: 0px;
  --ondark: #041018;      /* text sitting ON an accent/identity fill */
  font-size: 15px;
}

* { box-sizing: border-box; }
/* Full-screen DAW shell: the app fills the viewport; panes scroll internally, the
   page never does. */
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}
.hidden { display: none !important; }

/* ---- toolbar v2 ---- */
/* ONE ROW, NEVER WRAP. Two compressible springs (.tb-spring) keep the readout
   roughly centered and collapse FIRST as the window tightens; the readout +
   transport hold their size. overflow-x:auto is the last-resort safety valve. */
.topbar {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0.45rem;
  height: 52px; padding: 0 0.7rem; flex: 0 0 auto; z-index: 5;
  overflow-x: auto; overflow-y: hidden;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.tb-spring { flex: 1 1 4px; min-width: 0; }   /* the compressible gaps */

/* brand — never shrinks: when the toolbar tightens, the springs/groups give
   way instead (a shrinking brand let the view-tabs paint over the badge) */
.brand { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.brand-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.14rem; }
/* wordmark: quiet static type — the trailing M carries the accent (no glow,
   no animation; the graphite rule is "color = information") */
.logo { color: var(--accent); font-size: 1.05rem; line-height: 1; flex: 0 0 auto; }
.name { font-weight: 800; letter-spacing: 0.14em; font-size: 0.9rem; color: var(--text); white-space: nowrap; }
.ver {
  flex: 0 0 auto; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--muted); line-height: 1; white-space: nowrap;
}
.ver:empty { display: none; }   /* hide until ./VERSION resolves — no empty pill flash */

/* a control group, divider on its left */
.tb-grp { display: flex; align-items: center; gap: 0.32rem; flex: 0 0 auto; min-width: 0; }
.tb-grp + .tb-grp, .readout + .tb-grp { padding-left: 0.45rem; border-left: 1px solid var(--line); }

/* base toolbar button — overrides the global button rule with a tighter box */
.tb-btn {
  font: inherit; cursor: pointer; flex: 0 0 auto; white-space: nowrap;
  height: 30px; min-width: 30px; padding: 0 0.5rem; border-radius: 0;
  border: 1px solid transparent; background: var(--panel-2); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  transition: background 0.12s, border-color 0.12s;
}
.tb-btn:hover { background: color-mix(in srgb, var(--text) 8%, var(--panel-2)); }
.tb-btn.icon { padding: 0; width: 32px; font-size: 0.95rem; }
.tb-btn.play { width: 40px; font-size: 1.02rem; font-weight: 700;
  background: var(--accent); color: var(--ondark); border-color: var(--accent); }
.tb-btn.play:hover { filter: brightness(1.06); }
.tb-btn.play.active { background: color-mix(in srgb, var(--accent) 78%, var(--bg)); }
.tb-btn.rec { color: #ff5f6e; font-size: 0.7rem; font-weight: 700; }
.tb-btn.rec.armed { background: #3a0d12; border-color: #ff5f6e; color: #ff8b96; }
.tb-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.tb-btn[disabled]:hover { background: var(--panel-2); border-color: var(--line); }
/* "on" state shared by loop / follow / metronome toggles */
.tb-btn.on { border-color: var(--accent); color: var(--ondark); background: var(--accent); }
.tb-btn.export { color: var(--text); }

/* the dual readout — BAR·BEAT window + TIME window */
.readout { display: flex; align-items: stretch; flex: 0 0 auto; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg); }
.readout .seg { display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0.18rem 0.7rem; border-right: 1px solid var(--line); }
.readout .seg:last-child { border-right: 0; }
.readout .big { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 1.05rem;
  font-weight: 600; line-height: 1; letter-spacing: 0.03em; }
.readout .big.time { color: var(--glow); }
.readout .cap { font-size: 0.46rem; letter-spacing: 0.18em; color: var(--muted);
  margin-top: 0.18rem; text-transform: uppercase; }

/* compact numeric fields (tempo / sig / snap) — no sliders */
.tb-field { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto;
  height: 30px; padding: 0 0.4rem; border: 1px solid var(--line); border-radius: 0; background: var(--panel-2); }
.tb-field .k { font-size: 0.44rem; letter-spacing: 0.13em; color: var(--muted); text-transform: uppercase; margin-top: 1px; }
.tb-field .v { font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; font-weight: 600; line-height: 1; }
.tb-field input[type=number] { width: 2.5rem; border: 0; background: transparent; color: var(--text);
  font-family: ui-monospace, Menlo, monospace; font-size: 0.82rem; font-weight: 600; text-align: center;
  -moz-appearance: textfield; }
.tb-field input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tb-field select { border: 0; background: transparent; color: var(--text);
  font-family: ui-monospace, Menlo, monospace; font-size: 0.76rem; font-weight: 600; text-align: center; }
.tb-field.is-disabled { opacity: 0.5; }

/* master volume + output meter */
.tb-grp.master { gap: 0.4rem; }
.tb-meter { display: block; border-radius: 0; background: var(--bg); border: 1px solid var(--line); }
.topbar input[type=range] { accent-color: var(--accent); width: 66px; flex: 0 1 66px; min-width: 32px; }

/* save state pill */
.save-status { font-size: 0.8rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.save-status.dirty { color: #cfa85e; }
.save-status.clean { color: #8fbc8b; }

/* view switcher */
.view-tabs { display: flex; gap: 0.2rem; flex: 0 0 auto; background: var(--bg); border: 1px solid var(--line);
  border-radius: 0; padding: 0.12rem; }
.view-tab { padding: 0.22rem 0.7rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
  background: transparent; border: 0; border-radius: 0; color: var(--muted); white-space: nowrap; }
.view-tab:hover { color: var(--text); }
.view-tab.active { color: var(--ondark); background: var(--accent); }

/* keep the global button rule available for the rest of the app (editor, lanes) */
button { font: inherit; cursor: pointer; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  padding: 0.45rem 0.9rem; transition: background 0.12s, border-color 0.12s; }
button:hover { border-color: var(--accent-dim); }
.play { background: var(--accent); color: var(--ondark); font-weight: 700; border-color: var(--accent); }
.ghost { color: var(--muted); }
.mini { padding: 0.25rem 0.55rem; font-size: 0.72rem; }
.export { color: var(--glow); border-color: var(--accent-dim); }

/* ---- main / stage / views ---- */
main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.view-hint { display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--muted); font-size: 0.85rem; }

/* ============================ ARRANGE VIEW ============================ */
.arrange { flex: 1 1 auto; min-height: 0; display: flex; --barw: 156px; --headw: 196px; }
.arr-scroll { flex: 1; overflow: auto; }
.arr-row { display: flex; }
/* the whole song header (cycle strip + bar numbers + playhead) sticks to the top */
.arr-header { position: sticky; top: 0; z-index: 5; }

/* cycle / loop strip — click a bar to loop it, drag across bars for a range */
.cycle-row { display: flex; height: 16px; background: var(--panel-2); }
.cycle-corner {
  flex: 0 0 var(--headw); width: var(--headw); position: sticky; left: 0; z-index: 6;
  display: flex; align-items: center; padding: 0 0.7rem;
  font-size: 0.52rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  background: var(--panel-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cycle-seg { flex: 0 0 var(--barw); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  cursor: pointer; }
.cycle-seg:hover { background: var(--accent-dim); }
.cycle-seg.in-loop { background: var(--accent); cursor: grab; }
.cycle-seg.in-loop.loop-edge { cursor: ew-resize; }   /* region edges resize; middle moves */
.cycle-seg.add { cursor: default; }
.cycle-seg.add:hover { background: transparent; }

.arr-corner {
  flex: 0 0 var(--headw); width: var(--headw); position: sticky; left: 0; z-index: 6;
  display: flex; align-items: center; padding: 0 0.7rem;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  background: var(--panel-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.bar-head {
  flex: 0 0 var(--barw); display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.32rem 0.5rem; cursor: pointer; background: var(--panel-2);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.bar-head:hover { background: var(--cell-beat); }
/* active clip's ruler head: lit NUMBER, no underline — an underline hugging the
   lane boundary read as a highlight on the first lane's cell */
.bar-head.active .bar-num { color: var(--accent); }
.bar-num { font-size: 0.72rem; font-weight: 700; color: var(--text); }
.bar-name { font-size: 0.54rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.bar-head.add { align-items: center; justify-content: center; color: var(--muted); font-size: 1.05rem; }
.bar-head.add:hover { color: var(--accent); }

.arr-lane { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); position: relative; }
.arr-lane .lane-head {
  flex: 0 0 var(--headw); width: var(--headw); position: sticky; left: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  gap: 0.28rem; padding: 0.35rem 0.55rem; cursor: pointer;
  background: var(--panel); border-right: 1px solid var(--line);
}
/* head row 1: badge + FULL name; row 2: M/S + display-mode segments */
.lh-top { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.lh-top .tl-badge { width: 24px; height: 24px; font-size: 0.54rem; border-radius: 0; }
.lh-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; }
.mode-seg { display: flex; }
.mode-btn { width: 21px; height: 18px; padding: 0; cursor: pointer; font-size: 0.56rem;
  font-weight: 700; background: var(--panel-2); color: var(--muted);
  border: 1px solid transparent; border-right-width: 0; }
.mode-btn:first-child { border-radius: 0; }
.mode-btn:last-child { border-radius: 0; border-right-width: 1px; }
.mode-btn:hover { color: var(--text); border-color: var(--accent-dim); }
.mode-btn.on { color: var(--ondark); background: var(--accent); }
.arr-lane .lane-head:hover { background: var(--panel-2); }
/* Selected track: the WHOLE lane reads selected — lit head, accent frame top
   and bottom across the full lane, and a visible wash over the lane body.
   NOTE: the head gradient mixes against TRANSPARENT on purpose — clips scrolling
   under the sticky header show through on the selected track. Happy accident,
   kept as a feature (2026-07-05). Don't "fix" by making it opaque. */
.arr-lane.selected .lane-head {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  box-shadow: inset 3px 0 0 var(--accent); }
/* The frame + wash live on an OVERLAY (::after), not the lane's own background:
   bar-cells are opaque positioned boxes that paint over the lane background, so
   an inset box-shadow there gets buried under every clip ("the top of the clip
   cuts it off"). The overlay paints ABOVE the cells (z5, under nothing but the
   playhead, which is a later sibling) and clicks pass through it. */
.arr-lane.selected::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
}
.arr-lane.selected .lane-name { }
.lane-meta { flex: 1; min-width: 0; }
.lane-name { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arr-lane[data-type="drum"] .lane-name { color: var(--drum); }
.arr-lane[data-type="synth"] .lane-name { color: var(--synth); }
.lane-ms { display: flex; gap: 0.25rem; }
/* Lane height rides a per-lane --laneh var (set inline from track.height) so
   each track can be resized independently — 76px is the fallback/default.
   min-height + auto (not a fixed height): the cells STRETCH to the lane's real
   height, so when the lane bottoms out at its head's natural height the clips
   can never end up shorter than the track (beta find, 2026-07-05). */
.bar-cell { flex: 0 0 var(--barw); min-height: var(--laneh, 76px); height: auto;
  cursor: pointer; position: relative;
  background: var(--cell); border-right: 1px solid var(--line); overflow: hidden; }
.bar-cell:hover { background: var(--cell-beat); }
/* the active clip's column-mates get NO highlight at all — only the ONE cell
   you picked pops (.selected below); the ruler number marks the column. */
.bar-cell.selected { background: var(--cell-beat);
  box-shadow: inset 0 0 0 2px var(--accent); z-index: 1; }
.bar-cell.add { cursor: default; background: transparent; }
.lane-svg { display: block; }

/* Multi-selection (batch delete / group move): the theme's lighter glow-blue —
   reads as "several picked" next to the deeper accent of the single-select. */
.bar-head.multi-sel, .bar-cell.multi-sel {
  box-shadow: inset 0 0 0 2px var(--multi); background: color-mix(in srgb, var(--multi) 10%, transparent); z-index: 1; }

/* GAP slots — a deleted bar holding its position: dashed, muted, obviously empty */
.bar-head.gap, .bar-cell.gap {
  background: transparent; border: 1px dashed var(--line); opacity: 0.75; }
.bar-head.gap .bar-name { color: var(--muted); font-style: italic; }
.bar-head.gap:hover, .bar-cell.gap:hover { border-color: var(--accent-dim); opacity: 1; }

/* Lane bottom boundary — drag to resize track height (⌥ = all tracks,
   2×click = reset). Sits over the lane's bottom edge, full width incl. the
   sticky head (z6 > head z4), like Ableton's split line. */
.lane-resize { position: absolute; left: 0; right: 0; bottom: -3px; height: 7px;
  cursor: ns-resize; z-index: 6; }
.lane-resize:hover { background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 45%, transparent)); }

/* Clip right-edge grip — drag to resize the clip's length in bars. The bracket
   glow only shows on cell hover so lanes stay clean. */
.cell-grip { position: absolute; top: 0; right: 0; bottom: 0; width: 9px;
  cursor: ew-resize; z-index: 2; }
.bar-cell:hover .cell-grip { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 30%, transparent));
  box-shadow: inset -2px 0 0 var(--accent); }

/* drag-to-move a clip in the song */
.bar-head[draggable="true"] { cursor: grab; }
.bar-head.drop-target, .bar-cell.drop-target {
  box-shadow: inset 3px 0 0 var(--glow); }
/* drop a clip on the add-track row → new track (hint chip appears mid-drag) */
.arr-addrow.drop-target { outline: 1px dashed var(--accent); outline-offset: -2px;
  background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 0; }
.newtrack-hint { align-self: center; margin-left: 1rem; font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--glow);
  pointer-events: none; }

/* shared instrument badge (lane heads) */
.tl-badge {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em;
  background: var(--panel-2); border: 1px solid var(--line);
}
.arr-lane[data-type="drum"] .tl-badge { color: var(--drum); border-color: var(--drum); }
.arr-lane[data-type="synth"] .tl-badge { color: var(--synth); border-color: var(--synth); }

/* ============================ SESSION VIEW ============================ */
.session { flex: 1 1 auto; min-height: 0; overflow: auto; }
.sess-grid { display: grid; gap: 1px; background: var(--line); }
.sess-corner, .sess-thead, .sess-scene, .sess-cell, .sess-addscene { background: var(--panel); }
.sess-corner {
  position: sticky; left: 0; top: 0; z-index: 4; padding: 0.5rem 0.7rem;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  background: var(--panel-2);
}
.sess-thead { position: sticky; top: 0; z-index: 2; padding: 0.5rem 0.6rem; background: var(--panel-2); }
.sess-tname { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; }
.sess-thead[data-type="drum"] .sess-tname { color: var(--drum); }
.sess-thead[data-type="synth"] .sess-tname { color: var(--synth); }
.sess-scene {
  position: sticky; left: 0; z-index: 1; display: flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.6rem; cursor: pointer;
}
.sess-scene:hover { background: var(--panel-2); }
.sess-scene.active { box-shadow: inset 3px 0 0 var(--accent); }
/* playing-progress sweep: a soft fill that tracks the looping clip's position */
.sess-scene.playing::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--prog, 0%); background: var(--accent-dim); pointer-events: none;
}
.sess-scene.playing .sess-play { }
.sess-play { color: var(--accent); font-size: 0.72rem; }
.sess-sname { font-size: 0.74rem; font-weight: 600; }
.sess-cell { cursor: pointer; min-height: 54px; position: relative; overflow: hidden; }
.sess-cell:hover { background: var(--panel-2); }
.sess-cell.selected { box-shadow: inset 0 0 0 2px var(--accent-dim); }
.sess-addscene { padding: 0.5rem; text-align: center; color: var(--muted); cursor: pointer; }
.sess-addscene:hover { color: var(--text); background: var(--panel-2); }

/* ============================ MIX VIEW ============================ */
.mixer { display: flex; flex-wrap: wrap; align-content: flex-start;
  flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--panel-2); }
.mx-strip {
  /* fixed basis + min-width:0 on the sliders below = uniform strips (a bare
     range input's intrinsic min-width would otherwise stretch some strips) */
  flex: 0 0 128px; width: 128px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  padding: 0.9rem 0.5rem; background: var(--panel); border-right: 1px solid var(--line);
}
.mx-strip.selected { background: var(--panel-2); box-shadow: inset 0 3px 0 var(--accent); }
.mx-name { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px; }
.mx-strip[data-type="drum"] .mx-name { color: var(--drum); }
.mx-strip[data-type="synth"] .mx-name { color: var(--synth); }
.mx-strip[data-kind="bus"] .mx-name { color: var(--accent); }
.mx-strip.master { background: var(--panel-2); border-left: 1px solid var(--line); }
.mx-strip.master .mx-name { color: var(--text); letter-spacing: 0.12em; }
.mx-fader {
  -webkit-appearance: slider-vertical; appearance: slider-vertical;
  writing-mode: vertical-lr; direction: rtl;
  width: 26px; height: 150px; accent-color: var(--accent);
}
.mx-vol { font-size: 0.68rem; color: var(--muted); min-height: 0.9rem; }
.mx-btns { display: flex; gap: 0.3rem; }

/* fader + per-strip meter, side by side */
.mx-fmrow { display: flex; align-items: center; gap: 0.35rem; }
.mx-meter { width: 10px; height: 150px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 0; }

/* pan — small horizontal slider + C/L%/R% readout (dblclick = re-center) */
.mx-pan-row { display: flex; align-items: center; gap: 0.35rem; width: 100%; }
.mx-pan { flex: 1 1 auto; width: 0; min-width: 0; height: 14px; accent-color: var(--accent); }
.mx-pan-val { font-size: 0.62rem; color: var(--muted); min-width: 22px; text-align: right; }

/* sends — one compact row per bus: name · level · PRE pill */
.mx-sends { display: flex; flex-direction: column; gap: 0.25rem; width: 100%;
  padding: 0.3rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mx-send { display: flex; align-items: center; gap: 0.25rem; opacity: 0.55; }
.mx-send.live { opacity: 1; }
.mx-send-name { flex: 0 0 30px; font-size: 0.58rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-send-lvl { flex: 1 1 auto; width: 0; min-width: 0; height: 12px; accent-color: var(--accent); }
.mx-pre { flex: 0 0 auto; padding: 1px 3px; font-size: 0.52rem; font-weight: 800;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); border-radius: 0; }
.mx-pre.on { background: var(--accent); color: var(--ondark); border-color: var(--accent); }

/* output assign — opens the shared context menu (never a raw dropdown) */
.mx-out { width: 100%; padding: 0.25rem 0.3rem; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.04em; background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--line); border-radius: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-out:hover:not(:disabled) { color: var(--text); border-color: var(--accent-dim); }
.mx-out:disabled { opacity: 0.5; }

/* + BUS tile */
.mx-addbus { flex: 0 0 72px; display: flex; align-items: flex-start; justify-content: center;
  padding: 0.9rem 0.4rem; }
.mx-addbus-btn { width: 100%; padding: 0.5rem 0.2rem; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.08em; color: var(--muted); background: transparent;
  border: 1px dashed var(--line); border-radius: 0; cursor: pointer; }
.mx-addbus-btn:hover { color: var(--accent); border-color: var(--accent-dim); }

/* shared M/S pill toggles */
.mini-toggle {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0; font-size: 0.66rem; font-weight: 800;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); border-radius: 0;
}
.mini-toggle:hover { color: var(--text); }
.mini-toggle.m.on { background: var(--drum); color: var(--ondark); border-color: var(--drum); }
.mini-toggle.s.on { background: var(--synth); color: var(--ondark); border-color: var(--synth); }

/* ============================ ADD TRACK BOX (bottom-left of the timeline) ============================ */
.arr-addrow { display: flex; }
.add-box {
  position: sticky; left: 0; z-index: 3;
  flex: 0 0 var(--headw); width: var(--headw);
  display: flex; flex-direction: column; gap: 0.45rem; padding: 0.6rem;
  background: var(--panel-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.add-box-title { font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.add-box-btns { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.addbtn { padding: 0.34rem 0.7rem; font-size: 0.74rem; font-weight: 700; }
.addbtn.drum { color: var(--drum); border-color: var(--drum); }
.addbtn.synth { color: var(--synth); border-color: var(--synth); }
.addbtn.drum:hover { background: color-mix(in srgb, var(--drum) 12%, transparent); border-color: var(--drum); }
.addbtn.synth:hover { background: color-mix(in srgb, var(--synth) 12%, transparent); border-color: var(--synth); }

/* the scrollable arrange content */
.arr-content { position: relative; display: flex; flex-direction: column; width: max-content; min-width: 100%; }
/* CONTINUOUS playhead — one line through the ruler AND every lane (lives in
   .arr-content, full height, so it glides across clip boundaries instead of
   resetting in the header). Driven by xOf(globalStep) — same time model as the
   ruler + the toolbar readout, so they can't drift. */
.arr-playhead {
  position: absolute; top: 0; bottom: 0; width: 2px; z-index: 5; display: none;
  background: var(--glow);
  pointer-events: auto; cursor: ew-resize;   /* the line is grabbable — drag to scrub */
}
/* invisible hit pad so the 2px line is actually catchable */
.arr-playhead::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -4px; right: -4px;
}
.arr-playhead::after {
  content: ""; position: absolute; top: 0; left: -5px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 8px solid var(--glow);   /* downward triangle cap at the top */
}
.bar-link { color: var(--accent); font-weight: 700; margin-left: 2px; }

/* ---- dock resize splitter (drag to size the editor) ---- */
.dock-resize {
  flex: 0 0 auto; height: 7px; cursor: row-resize; background: var(--panel-2);
  border-top: 1px solid var(--line); position: relative;
}
.dock-resize::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 3px; border-radius: 0; background: var(--line);
}
.dock-resize:hover::after { background: var(--accent); }

/* ============================ EDITOR DOCK ============================ */
.editor {
  flex: 0 0 auto; height: 42vh; overflow: auto; padding: 0.8rem 0.95rem;
  background: var(--panel); border-top: 1px solid var(--line);
}
/* FOCUS view (E) — hide the stage, let the dock take the whole main area.
   !important beats the splitter's inline height; leaving focus restores it. */
body.focus .stage { display: none; }
body.focus .dock-resize { display: none; }
body.focus .editor { flex: 1 1 auto; height: auto !important; border-top: none; }
.editor-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.8rem; flex-wrap: wrap; }
.editor-head h2 { margin: 0; font-size: 0.82rem; letter-spacing: 0.14em; color: var(--text); }
.editor-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.editor-actions select { background: var(--cell); color: var(--text); border: 1px solid var(--line);
  border-radius: 0; padding: 0.25rem 0.4rem; font-size: 0.74rem; }

/* ---- editor-head TAB STRIP + flat action buttons (D2 console) ----------- */
/* Groove/Engine/Arp are TABS (the panels are mutually exclusive); Draw/
   Humanize are flat glyph-free actions. Same .on language as everything else. */
.editor-head .d-tabs { margin-right: auto; display: flex; gap: 1px; }
.d-tab { padding: 0.32rem 0.75rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; background: var(--panel-2); color: var(--muted);
  border: 0; border-radius: 0; cursor: pointer; }
.d-tab:hover { color: var(--text); }
.d-tab.on { background: var(--accent); color: var(--ondark); }
.d-btn { height: 26px; padding: 0 0.55rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; background: var(--panel-2); color: var(--muted);
  border: 0; border-radius: 0; cursor: pointer; }
.d-btn:hover { color: var(--text); }
.d-btn.on { background: var(--accent); color: var(--ondark); }

/* Engine / Groove / Arp are flat SECTIONS of the instrument, not floating
   cards: they bleed to the dock edges and separate with hairlines, like the
   control strip across the top of a hardware drum machine or synth. */
.sub-panel { margin: -0.3rem -0.95rem 0.6rem; padding: 0.55rem 0.95rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), color-mix(in srgb, var(--accent) 1%, transparent));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* console panels carry their padding per-section */
.sub-panel.console { padding: 0; }

/* ---- D2 CONSOLE ROW (GROOVE LAB + CASCADE, 2026-07-05) ------------------ */
/* One fixed-height hardware row: sections split by hairlines, vertical
   mini-faders with 3-letter codes (Elektron/Maschine lineage), segs for
   fixed option sets, chips for styles. No dead space by construction. */
.console-row { display: flex; align-items: stretch; height: 106px; overflow-x: auto; }
.csec { display: flex; align-items: stretch; gap: 0.55rem; padding: 0.45rem 0.7rem;
  border-right: 1px solid var(--line); flex: 0 0 auto; }
.csec:last-child { border-right: 0; }
.chips-sec { flex-direction: column; justify-content: center; gap: 2px; }
.chiprow { display: flex; gap: 2px; }
.chip { background: var(--panel-2); color: var(--muted); border: 0; border-radius: 0;
  padding: 0.18rem 0.45rem; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer; white-space: nowrap; }
.chip:hover { color: var(--text); }
.chip.on { color: var(--ondark); background: var(--accent); }

/* XY groove pad — X = density, Y = complexity; fills the row height. */
.pad-sec { padding: 0.45rem 0.6rem; }
.xy-pad { position: relative; width: 132px; flex-shrink: 0; align-self: stretch;
  border: 1px solid var(--line); border-radius: 0; cursor: crosshair; touch-action: none;
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px) 0 0 / 25% 100%,
    var(--bg); }
.xy-pad:hover { border-color: var(--accent-dim); }
.xy-puck { position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: var(--accent); pointer-events: none; }
.xy-x-label, .xy-y-label { position: absolute; font-size: 0.44rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); pointer-events: none; user-select: none; }
.xy-x-label { right: 5px; bottom: 3px; }
.xy-y-label { left: 3px; bottom: 6px; writing-mode: vertical-rl; transform: rotate(180deg); }

/* vertical mini-fader column: CODE on top, native vertical range (same
   pattern as .mx-fader in the mixer), live value under. */
.fader-sec { gap: 0.15rem; }
.pcol { display: flex; flex-direction: column; align-items: center; gap: 0.22rem;
  width: 42px; cursor: pointer; }
.pcol .code, .scol .code { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.pcol:hover .code { color: var(--text); }
.pcol input[type=range] {
  -webkit-appearance: slider-vertical; appearance: slider-vertical;
  writing-mode: vertical-lr; direction: rtl;
  width: 18px; flex: 1 1 auto; min-height: 0; margin: 0; accent-color: var(--accent);
}
.pcol .val { font-size: 0.54rem; min-width: 0; color: var(--text);
  font-variant-numeric: tabular-nums; }

/* seg / key columns — stacked labeled segments */
.seg-sec, .key-sec { flex-direction: column; justify-content: center; gap: 0.5rem; }
.scol { display: flex; flex-direction: column; gap: 0.24rem; }

/* the ✦ die + take browser (deterministic seeds = free take history) */
.take-sec { flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; }
.die { width: 34px; height: 34px; font-size: 1.05rem; cursor: pointer;
  background: var(--panel-2); color: var(--accent); border: 0; border-radius: 0;
  transition: background 0.12s, transform 0.08s; }
.die:hover { background: var(--accent); color: var(--ondark); }
.die:active { transform: scale(0.92); }
.take-nav { display: flex; align-items: center; gap: 0.25rem; }
.t-nav { width: 20px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.55rem; cursor: pointer; background: var(--panel-2); color: var(--muted);
  border: 0; border-radius: 0; }
.t-nav:hover { color: var(--text); }
.t-num { font-size: 0.55rem; color: var(--muted); min-width: 3.6em; text-align: center;
  letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* position:relative — the grid is the marquee's positioning context */
.editor-grid { display: flex; flex-direction: column; gap: 0.25rem; position: relative; }
/* ✏ Draw mode: pencil-ish crosshair on the roll + a lit toolbar toggle (same
   .on language as the tb/mode/choke buttons). */
.editor-grid.draw .erow-cells { cursor: crosshair; }
.erow { display: flex; align-items: center; gap: 0.35rem; }
.erow-label { width: 86px; flex-shrink: 0; text-align: right; padding-right: 0.6rem;
  font-size: 0.72rem; color: var(--muted); }
.erow-synth .erow-label { color: var(--synth); }
/* UX1-2: drum rows carry tight Roland-lineage codes (BD/SD/CH…) — bold and
   tracked like a hardware panel legend; the full name is the tooltip. */
.erow-drum .erow-label { color: var(--drum); font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.08em; }

.cell { flex: 1; min-width: 0; height: 34px; padding: 0; border: 1px solid var(--line);
  background: var(--cell); border-radius: 0; position: relative; overflow: hidden; }
.cell.beat { background: var(--cell-beat); }
.cell:hover { border-color: var(--accent-dim); }
.cell.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--fill, 80%); background: var(--drum); opacity: 0.92; }
.erow-synth .cell.on::after { background: var(--synth); }
.cell.playing { box-shadow: inset 0 0 0 2px var(--text); }

/* Engine rack — collapsible (⚙ Engine / ⛁ Kit); same flat full-bleed section
   treatment as .sub-panel above — a strip of the instrument, not a card. */
.rack { margin: -0.3rem -0.95rem 0.6rem; padding: 0.55rem 0.95rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), color-mix(in srgb, var(--accent) 1%, transparent));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rack h3 { margin: 0 0 0.5rem; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--synth); }
.knobs { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.ctl { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; color: var(--muted); }
.ctl input[type="range"] { width: 88px; accent-color: var(--accent); }
.val { color: var(--text); font-variant-numeric: tabular-nums; min-width: 3.1em; }

/* ---- DRUM kit rack: kit picker + per-voice knob rows (built by app.js) ---- */
#drum-rack { flex-direction: column; gap: 0; }
.kit-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem;
  font-size: 0.82rem; color: var(--text); margin-bottom: 0.5rem; }
.kit-pick select { background: var(--cell); color: var(--text); border: 1px solid var(--line);
  border-radius: 0; padding: 0.18rem 0.45rem; }
/* "(edited)" flag — live kit no longer matches the saved preset. */
.kit-edited { color: var(--accent); font-size: 0.72rem; font-style: italic; }
/* compact picker action buttons (Save as… / Delete) */
.mini-btn { background: var(--cell); color: var(--text); border: 1px solid var(--line);
  border-radius: 0; padding: 0.16rem 0.5rem; font-size: 0.74rem; }
.mini-btn:hover { border-color: var(--accent-dim); }
.voice-knobs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.8rem;
  padding: 0.34rem 0; border-bottom: 1px solid var(--line); }
.voice-knobs:last-child { border-bottom: none; }
/* Generic segmented toggle — joined buttons, glow on the active one, matching
   the loop/follow/metronome toggle aesthetic (no dropdowns). Used by the drum
   choke groups and the GROOVE LAB rhythm picker; reuse it anywhere a small
   fixed set of exclusive options replaces a <select>. */
.seg { display: inline-flex; }
.seg-btn { background: var(--cell); color: var(--muted); border: 1px solid var(--line);
  border-right-width: 0; padding: 0.1rem 0.42rem; font-size: 0.72rem; min-width: 22px;
  border-radius: 0; }
.seg-btn:first-child { border-radius: 0; }
.seg-btn:last-child { border-radius: 0; border-right-width: 1px; }
.seg-btn:hover { color: var(--text); border-color: var(--accent-dim); }
.seg-btn.on { border-color: var(--accent); color: var(--ondark); background: var(--accent); z-index: 1; }
.voice-knobs-label { width: 102px; flex-shrink: 0; font-size: 0.64rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--drum); }

.hint { color: var(--muted); font-size: 0.76rem; margin: 0.9rem 0 0; }

/* ---- right-click context menu ---- */
.ctx-menu { position: fixed; z-index: 50; min-width: 160px;
  display: flex; flex-direction: column; gap: 0.1rem; padding: 0.25rem;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.85); }
.ctx-item { text-align: left; width: 100%; padding: 0.4rem 0.7rem; background: transparent;
  border: none; border-radius: 0; font-size: 0.8rem; color: var(--text); }
.ctx-item:hover { background: var(--accent-dim); border: none; }
.ctx-item.danger { color: var(--drum); }
.ctx-item.danger:hover { background: color-mix(in srgb, var(--drum) 18%, transparent); }
.ctx-item:disabled { color: var(--muted); opacity: 0.5; cursor: not-allowed; background: transparent; }

/* ---- editor-head compact field (Grid / Bars / Note / Scale / Root) ---- */
.mini-field { display: flex; align-items: center; gap: 0.3rem; font-size: 0.6rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mini-field select { background: var(--cell); color: var(--text); border: 1px solid var(--line);
  border-radius: 0; padding: 0.18rem 0.3rem; font-size: 0.72rem; text-transform: none; }

/* ============================ NOTE GRID INTERACTION ============================ */
.erow-cells { position: relative; flex: 1; min-width: 0; display: flex; gap: 3px; }
/* bar gridline (resolution-aware — class set by the editor; .cell.beat lives
   with the base .cell rules above) */
.cell.bar { box-shadow: inset 2px 0 0 var(--accent-dim); }
.cell.selected { box-shadow: inset 0 0 0 2px var(--accent); }
.cell.bar.selected { box-shadow: inset 2px 0 0 var(--accent-dim), inset 0 0 0 2px var(--accent); }

/* PIANO ROLL: zero-gap grid so absolutely-positioned note bars line up exactly. */
.editor-grid.piano .erow { align-items: stretch; }
.editor-grid.piano .erow-cells { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
.editor-grid.piano .cell { height: 20px; border: none; border-radius: 0; background: transparent;
  box-shadow: inset -1px 0 0 var(--line); }
.editor-grid.piano .cell.beat { background: rgba(255,255,255,0.022); }
.editor-grid.piano .cell.bar { box-shadow: inset -1px 0 0 var(--line), inset 2px 0 0 var(--accent-dim); }
.editor-grid.piano .cell.on::after { display: none; }   /* synth uses note bars, not cell fill */
.editor-grid.piano .erow-label { font-size: 0.6rem; }

/* ---- PIANO KEY column (UX1-3) — real black/white keys down the left edge.
   Keys are literal black/white on purpose (like the white bars ruler): a
   keyboard reads as a keyboard in every theme. White key = full width; black
   key = shorter (62%), the flat two-tone painted with a hard-stop gradient so
   there's no extra element. Click = audition (wired in ui/editor.js). ---- */
.editor-grid.piano .erow-label.key { cursor: pointer; position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.55); padding-right: 0.35rem; }
.editor-grid.piano .erow-label.key.white { background: #cfd3d8; color: #2a2e34;
  font-weight: 700; }
.editor-grid.piano .erow-label.key.black {
  background: linear-gradient(to right, #101318 0 62%, #cfd3d8 62%); }
.editor-grid.piano .erow-label.key:hover { filter: brightness(1.12); }
.editor-grid.piano .erow-label.key:active { filter: brightness(0.9); }
/* the scale ROOT gets the strongest mark — an accent tick on the key's edge */
.editor-grid.piano .erow-label.key.root::after { content: ""; position: absolute;
  left: 0; top: 15%; bottom: 15%; width: 3px; background: var(--accent); }
/* grid rows shade to match the keys (FL documents this; Live/Logic do it too) */
.editor-grid.piano .erow.row-black .cell { background: rgba(0,0,0,0.22); }
.editor-grid.piano .erow.row-black .cell.beat { background: rgba(0,0,0,0.16); }

/* dim rows that fall outside the selected scale */
.erow.out-scale .erow-label { opacity: 0.35; }
.editor-grid.piano .erow.out-scale .cell { background: rgba(0,0,0,0.35); }

/* a synth note = an absolutely-positioned bar spanning its `len` steps.
   pointer-events:none so a click lands on the cell beneath (erase/select);
   only the resize handle is interactive. */
.note { position: absolute; top: 2px; height: calc(100% - 4px); border-radius: 0;
  background: var(--synth); opacity: 0.92; pointer-events: none; }
.note.selected { outline: 2px solid var(--text); outline-offset: -1px; z-index: 3; }
.note-resize { position: absolute; right: 0; top: 0; width: 7px; height: 100%;
  pointer-events: auto; cursor: ew-resize; border-radius: 0; }
.note-resize:hover { background: rgba(255,255,255,0.4); }

/* marquee selection rectangle */
.marquee { position: absolute; z-index: 12; pointer-events: none;
  border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 0; }

/* ---- velocity lane (per focused row) ---- */
.vel-lane { display: flex; align-items: flex-end; gap: 0.35rem; margin-top: 0.5rem;
  padding-top: 0.4rem; border-top: 1px solid var(--line); }
.vel-lane-label { width: 86px; flex-shrink: 0; text-align: right; padding-right: 0.6rem;
  font-size: 0.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.vel-cells { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.vel-bar { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 0; cursor: ns-resize; position: relative; height: 100%; }
.vel-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--v, 0%); background: var(--accent); opacity: 0.7; border-radius: 0; }
.vel-bar.off { opacity: 0.25; cursor: default; }
.vel-bar.off::after { display: none; }

/* ============================ BARS RULER (Arrange) ============================ */
/* Musical, bars-primary: bar lines + numbers, faint beat ticks, faintest snap
   sub-grid ticks, with absolute mm:ss under each bar line. Click anywhere to
   scrub. All marks are placed by the SAME xOf(globalStep) the playhead uses, so
   the ruler can never drift from the playhead or the toolbar readout. */
/* White strip with black text — high contrast so the timecode reads against the
   dark UI (matches the old time ruler). Marks are dark lines at decreasing
   strength: bar > beat > snap sub-grid. */
/* Slim strip — same height as the loop (.cycle-row) strip above it, so the two
   read as one compact header. No room for a second text line at this height:
   the per-bar mm:ss labels are gone (the toolbar TIME readout is the one clock). */
.bars-row { display: flex; height: 16px; background: #ffffff; }
.bars-corner { flex: 0 0 var(--headw); width: var(--headw); position: sticky; left: 0; z-index: 6;
  display: flex; align-items: center; padding: 0 0.7rem; background: #ffffff;
  font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: #000;
  border-right: 1px solid #c8ccd4; border-bottom: 1px solid #c8ccd4; }
.bars-track { position: relative; background: #ffffff; border-bottom: 1px solid #c8ccd4; cursor: text; }
.bars-track:hover { background: #f4f6fa; }
.bar-mark { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,0.45); }
.beat-mark { position: absolute; top: 7px; bottom: 0; width: 1px; background: rgba(0,0,0,0.22); }
.sub-mark  { position: absolute; top: 10px; bottom: 0; width: 1px; background: rgba(0,0,0,0.10); }
.bar-label { position: absolute; top: 1px; font-size: 0.56rem; font-weight: 700; color: #000;
  font-family: ui-monospace, Menlo, monospace; padding-left: 4px; white-space: nowrap; pointer-events: none; }

@media (max-width: 640px) {
  .erow-label { width: 56px; font-size: 0.62rem; padding-right: 0.35rem; }
  .editor-grid:not(.piano) .cell { height: 40px; }
  .vel-lane-label { width: 56px; }
  .arrange { --headw: 132px; --barw: 120px; }
}

/* ============================ SETTINGS OVERLAY (ⓘ) ============================ */
/* The app's settings surface — shortcuts today, themes and more later. A fixed
   dimmed backdrop + one centered panel in the house style (no raw dropdowns —
   future controls in here follow the glowing-toggle language). */
.settings-overlay { position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.66); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; }
.settings-panel { width: min(680px, 92vw); max-height: 84vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  padding: 1rem 1.25rem 1.25rem; }
.settings-head { display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; margin-bottom: 0.8rem; }
.settings-head h2 { margin: 0; font-size: 0.95rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
  }
.settings-close { background: transparent; border: 1px solid var(--line);
  border-radius: 0; color: var(--muted); padding: 0.2rem 0.55rem; }
.settings-close:hover { color: var(--text); border-color: var(--accent-dim); }
.settings-section h3 { margin: 1rem 0 0.45rem; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.settings-section .soon { color: var(--muted); font-size: 0.8rem; font-style: italic; }
.sc-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.32rem 1rem;
  font-size: 0.82rem; align-items: baseline; }
.sc-grid .keys { white-space: nowrap; text-align: right; }
kbd { display: inline-block; min-width: 1.4em; text-align: center;
  padding: 0.08rem 0.4rem; border-radius: 0; font-size: 0.72rem;
  font-family: ui-monospace, Menlo, monospace; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); }

/* ---- theme picker (shared by the launch screen + ⓘ settings) ---- */
/* Swatch pills in the house glowing-toggle language: three dots (accent /
   drum / synth) + the theme name; the active one wears the accent frame. */
.theme-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.theme-btn { display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.34rem 0.7rem; font-size: 0.74rem; font-weight: 600;
  border: 1px solid var(--line); border-radius: 0;
  background: var(--panel-2); color: var(--muted); }
.theme-btn:hover { color: var(--text); border-color: var(--accent-dim); }
.theme-btn.active { color: var(--ondark); border-color: var(--accent); background: var(--accent); }
.theme-dots { display: inline-flex; gap: 3px; }
.theme-dots i { width: 9px; height: 9px; border-radius: 50%; }

/* ---- launch screen ---- */
/* Full-viewport gate shown on page open — above everything (settings is 50).
   Not .hidden by default: it IS the first paint; js/ui/launch.js fills it. */
.launch-overlay { position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%,
    color-mix(in srgb, var(--accent) 9%, #000) 0%, #000 68%); }
.launch-panel { display: flex; flex-direction: column; align-items: center;
  gap: 0.4rem; padding: 2rem; max-width: min(760px, 96vw); text-align: center; }
/* the 3D wordmark lockup — wide stage above the tagline; drag it to orbit */
.launch-canvas { width: min(700px, 92vw); height: 260px; display: block;
  border-radius: 0; cursor: grab; }
.launch-logo { font-size: 2.4rem; color: var(--accent);
 
  }
.launch-name { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.3em;
  padding-left: 0.3em; /* optically recenter the letter-spaced word */
  color: var(--text);
 
  }
.launch-tag { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.4rem; }
.launch-actions { display: flex; flex-direction: column; gap: 0.5rem;
  width: min(340px, 86vw); margin-bottom: 1.6rem; }
.launch-btn { display: flex; flex-direction: column; align-items: center; gap: 0.14rem;
  padding: 0.62rem 1rem; border: 1px solid var(--line); border-radius: 0;
  background: var(--panel); color: var(--text); }
.launch-btn:hover { border-color: var(--accent-dim);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.launch-btn.primary { border-color: var(--accent); }
.launch-btn.primary .lb-label { color: var(--text); }
.launch-btn .lb-label { font-size: 0.9rem; font-weight: 700; }
.launch-btn .lb-sub { font-size: 0.66rem; color: var(--muted); }
.launch-theme-cap { font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem; }
.launch-overlay .theme-grid { justify-content: center; }

/* ===================== Inline rename (dblclick a track/clip name) ===================== */
/* Swaps in over the name span — inherits the row's type/size, glows like every
   other focused control (theme-token accent, no hardcoded color). */
.rename-input {
  width: 100%;
  min-width: 4.5rem;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 0;
  color: var(--text);
  font: inherit;
  padding: 1px 4px;
  outline: none;
}

/* ===================== W2 — insert FX (Mix strips + the floating FX editor) ===================== */
/* Strip section: one slim slot per insert + the "+ FX" picker. Slots read as
   the app's glow-toggle language — lit dot = in the chain, dim = bypassed. */
.mx-fx { display: flex; flex-direction: column; gap: 0.22rem; width: 100%; }
.fx-slot {
  display: flex; align-items: center; gap: 0.3rem;
  padding: 0.18rem 0.3rem; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 0;
}
.fx-slot:hover { border-color: var(--accent-dim); }
.fx-slot.off .fx-slot-name { color: var(--muted); text-decoration: line-through; }
.fx-slot-name { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-dot {
  flex: 0 0 auto; width: 8px; height: 8px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); cursor: pointer;
}
.fx-dot.on { background: var(--accent); border-color: var(--accent); }
.fx-add {
  width: 100%; padding: 0.16rem 0.3rem; font-size: 0.56rem; font-weight: 800;
  letter-spacing: 0.06em; color: var(--muted); background: transparent;
  border: 1px dashed var(--line); border-radius: 0; cursor: pointer;
}
.fx-add:hover { color: var(--accent); border-color: var(--accent-dim); }

/* The floating FX editor — a small console surface anchored by its slot. */
.fx-panel {
  /* Under the context menu (50) and overlays — a menu opened over the panel must win. */
  position: fixed; z-index: 40; width: 400px; max-height: 82vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  padding: 0.55rem 0.65rem 0.65rem;
}
.fx-panel.bypassed .fx-sec, .fx-panel.bypassed .fx-eq-curve { opacity: 0.4; }
.fx-panel-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.45rem; }
.fx-panel-title { flex: 1 1 auto; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em;
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-byp {
  padding: 2px 7px; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.05em;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
  border-radius: 0; cursor: pointer;
}
.fx-byp.on { background: var(--accent); color: var(--ondark); border-color: var(--accent); }
.fx-close {
  padding: 1px 7px; font-size: 0.7rem; background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 0; cursor: pointer;
}
.fx-close:hover { color: var(--text); border-color: var(--accent-dim); }
.fx-eq-curve { width: 100%; height: 90px; display: block; margin-bottom: 0.45rem;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 0; }

/* Schema sections + the UX #2 control rows (label / slider / click-to-type value). */
.fx-sec { padding: 0.3rem 0 0.15rem; border-top: 1px solid var(--line); }
.fx-sec:first-of-type { border-top: 0; }
.fx-sec-label { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.14em;
  color: var(--muted); margin-bottom: 0.2rem; }
.fx-ctl { display: flex; align-items: center; gap: 0.4rem; padding: 0.12rem 0; }
.fx-ctl-label { flex: 0 0 38px; font-size: 0.6rem; color: var(--muted); }
.fx-ctl-slider { flex: 1 1 auto; width: 0; min-width: 0; height: 14px; accent-color: var(--accent); }
.fx-ctl-val { flex: 0 0 52px; font-size: 0.6rem; color: var(--text); text-align: right;
  cursor: text; border-bottom: 1px dotted transparent; }
.fx-ctl-val:hover { border-bottom-color: var(--accent-dim); }
.fx-typein {
  flex: 0 0 52px; width: 52px; box-sizing: border-box; font-size: 0.6rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--accent);
  border-radius: 0; padding: 0 2px; outline: none; text-align: right;
}