/* ===========================================================================
   Collab-DAW — studio chassis
   ---------------------------------------------------------------------------
   One system, derived from hardware: a warm graphite chassis, recessed wells
   for anything you put material into, machined edges, and silkscreened mono
   labels. Chrome is deliberately desaturated — in a DAW the track colour is
   DATA (which lane is this?), so it must be the only saturated thing on screen.
   The one lit element is the session cell, treated as an illuminated launch
   button: recessed when empty, lit when loaded, ringed when playing.
   =========================================================================== */

:root {
  /* surfaces — warm graphite, not black; black reads as a void, chassis reads as a device */
  --chassis:  #15171c;
  --panel:    #1b1e25;
  --panel-hi: #222732;
  --well:     #0e1014;   /* recessed: lanes, empty slots, inputs */
  --edge:     #2b313c;
  --edge-hi:  #3c4453;

  /* ink */
  --ink:      #e8ebf1;
  --ink-dim:  #8892a4;   /* silkscreen */
  --ink-mute: #59616f;

  /* indicators — the only non-track colour allowed */
  --live: #7ee787;
  --rec:  #ff5f56;
  --warn: #ffc857;

  /* legacy aliases, so any stray older selector still resolves */
  --bg: var(--chassis);
  --line: var(--edge);
  --text: var(--ink);
  --dim: var(--ink-dim);
  --accent: #4ea1ff;

  /* geometry: small radii read as machined; pills read as consumer software */
  --r-sm: 3px;
  --r:    5px;
  --r-lg: 8px;

  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;  --s5: 24px;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* mono carries every number and label — tabular figures stop digits jittering
     as the playhead counts, and it is the rack-label voice of the subject */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --px-per-bar: 96px;
  --px-per-beat: 24px;   /* set from JS: bar width / beats per bar */
  --head-w: 200px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--chassis);
  color: var(--ink);
  font: 13px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

body {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 0 1fr 300px;
  grid-template-areas: "transport transport transport" "left stage side";
  height: 100vh; overflow: hidden;
  transition: grid-template-columns .16s ease;
}
/* The browser column collapses to zero rather than being display:none, so the
   timeline reflows smoothly instead of jumping. */
body.browser-open { grid-template-columns: 232px 1fr 300px; }

/* The `hidden` attribute must actually hide. The UA rule `[hidden]{display:none}`
   loses on ORIGIN to any author rule setting display, which once left the join
   overlay painted over a fully-connected session. */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--live);
  outline-offset: 1px;
  border-radius: var(--r-sm);
}

/* ── Join ─────────────────────────────────────────────────────────────────── */
.join-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background:
    radial-gradient(1100px 520px at 50% -8%, #202634, transparent 70%),
    var(--chassis);
}
.join-card {
  width: min(400px, calc(100vw - 32px));
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
}
.join-card h1 { margin: 0 0 var(--s1); font-size: 20px; letter-spacing: -.01em; }
.join-card .sub { margin: 0 0 var(--s5); color: var(--ink-dim); font-size: 12px; }
.join-card label {
  display: block; margin-bottom: var(--s3);
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink-dim);
}
.join-card label input {
  display: block; width: 100%; margin-top: var(--s1);
  background: var(--well); border: 1px solid var(--edge);
  border-radius: var(--r); padding: 9px 11px;
  font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--ink);
}
.join-card label input:focus { border-color: var(--edge-hi); outline: none; }
#joinBtn {
  width: 100%; margin-top: var(--s2); padding: 10px;
  background: var(--live); color: #0d1117; font-weight: 650;
  border: 0; border-radius: var(--r);
}
#joinBtn:hover:not(:disabled) { filter: brightness(1.08); }
#joinBtn:disabled { opacity: .5; cursor: default; }
.recent { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s4); }
.recent button {
  background: var(--well); border: 1px solid var(--edge); color: var(--ink-dim);
  border-radius: var(--r-sm); padding: 4px 8px; font-size: 11px; font-family: var(--mono);
}
.recent button:hover { color: var(--ink); border-color: var(--edge-hi); }

/* ── Transport ────────────────────────────────────────────────────────────── */
.transport {
  grid-area: transport;
  display: flex; align-items: center; gap: var(--s5);
  padding: 0 var(--s4); height: 60px;
  background: linear-gradient(var(--panel), #191c22);
  border-bottom: 1px solid var(--edge);
}
.tp-left, .tp-mid, .tp-right { display: flex; align-items: center; gap: var(--s2); }
.tp-right { margin-left: auto; gap: var(--s4); }

.tp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 34px; height: 32px; padding: 0 10px;
  background: var(--panel-hi); border: 1px solid var(--edge);
  border-radius: var(--r); color: var(--ink-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: color .12s, border-color .12s, background .12s;
}
.tp-btn:hover { color: var(--ink); border-color: var(--edge-hi); }
.tp-btn.small { font-size: 11px; height: 30px; }
.tp-btn.play.playing { color: var(--live); border-color: #35533c; }
.tp-btn.stop { font-size: 10px; }
.tp-btn.rec { font-size: 15px; }
.tp-btn.rec.armed { color: var(--rec); border-color: #5c2f2d; animation: blink 1s steps(2) infinite; }
.tp-btn.metro.active, .tp-btn.midi.active { color: var(--live); border-color: #35533c; }
.tp-btn.midi.warn { color: var(--warn); border-color: #5c4a24; }
@keyframes blink { 50% { opacity: .45 } }

.position {
  display: flex; align-items: baseline; gap: 6px;
  margin-left: var(--s2); padding: 4px 10px;
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r);
  font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums;
  color: var(--live);
}
.position small {
  font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute);
  font-family: var(--mono);
}

.tempo {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink-mute);
}
.tempo input, .tempo select {
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r-sm);
  padding: 4px 6px; color: var(--ink);
  font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
  text-transform: none; letter-spacing: 0;
}
.tempo input { width: 62px; }
.tempo input:focus, .tempo select:focus { border-color: var(--edge-hi); outline: none; }

.presence { display: flex; gap: 4px; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 700; color: #0d1117;
  border: 1px solid rgba(0,0,0,.4);
}
.menu { display: flex; gap: 6px; }

/* ── Arrangement ──────────────────────────────────────────────────────────── */
#stage { grid-area: stage; overflow: auto; background: var(--chassis); }
.ruler-wrap { display: flex; position: sticky; top: 0; z-index: 6; background: var(--chassis); }
.track-head-spacer { width: var(--head-w); flex: 0 0 var(--head-w); border-right: 1px solid var(--edge); }
.ruler { position: relative; height: 26px; border-bottom: 1px solid var(--edge); }
.bar-mark {
  position: absolute; top: 0; height: 100%;
  padding-left: 5px; border-left: 1px solid var(--edge);
  font-family: var(--mono); font-size: 9px; color: var(--ink-mute); line-height: 26px;
}

.lanes { position: relative; }
.track { display: flex; border-bottom: 1px solid var(--edge); }
.track-head {
  width: var(--head-w); flex: 0 0 var(--head-w);
  padding: var(--s2); background: var(--panel);
  border-right: 1px solid var(--edge);
  display: flex; flex-direction: column; gap: 5px;
}
.track-head .name { display: flex; align-items: center; gap: 6px; }
.swatch { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.track-head .name input {
  background: none; border: 0; color: var(--ink); font-size: 12px; width: 100%; padding: 0;
}
.track-head .name input:focus { outline: none; border-bottom: 1px solid var(--edge-hi); }
.track-head .controls { display: flex; gap: 4px; align-items: center; }
.track-head .controls button {
  width: 22px; height: 20px;
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r-sm);
  color: var(--ink-mute); font-family: var(--mono); font-size: 10px;
}
.track-head .controls button:hover { color: var(--ink); }
.track-head .arm.on { color: var(--rec); border-color: #5c2f2d; }
.track-head .mute.on { color: var(--warn); border-color: #5c4a24; }
.track-head .instr select {
  width: 100%; background: var(--well); border: 1px solid var(--edge);
  border-radius: var(--r-sm); padding: 3px 5px; font-size: 11px; color: var(--ink-dim);
}

/* Bars bright, beats faint — the same grid language as the piano roll and the
   sample editor, so a beat looks like a beat everywhere in the app. */
.lane {
  position: relative; height: 78px;
  background:
    repeating-linear-gradient(90deg, var(--edge) 0 1px, transparent 1px var(--px-per-bar)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px var(--px-per-beat)),
    var(--well);
}

.clip {
  position: absolute; top: 5px; bottom: 5px;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-sm);
  overflow: hidden; cursor: grab; user-select: none;
}
.clip.dragging { cursor: grabbing; z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.clip-label {
  display: flex; justify-content: space-between; gap: 4px;
  padding: 2px 5px; font-family: var(--mono); font-size: 10px;
  background: rgba(0,0,0,.35); white-space: nowrap;
}
.clip-label .x { opacity: 0; cursor: pointer; }
.clip:hover .clip-label .x { opacity: .65; }
.clip-label .x:hover { opacity: 1; color: var(--rec); }
.clip canvas { display: block; width: 100%; }
.clip .notes { position: absolute; inset: 16px 0 2px; }
.clip .note { position: absolute; height: 3px; background: rgba(255,255,255,.85); border-radius: 1px; }

.playhead { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--live); pointer-events: none; z-index: 4; }
.remote-cursor { position: absolute; top: 0; bottom: 0; width: 1px; opacity: .55; pointer-events: none; }

/* ── Session view ─────────────────────────────────────────────────────────────
   The signature. Cells are launch buttons: a recessed well when empty, a lit
   raised panel in the track's colour when loaded, an LED ring when playing. */
#session { grid-area: stage; overflow: auto; padding: var(--s4); }
.session-grid { display: grid; gap: 5px; align-content: start; min-width: max-content; }

.sg-corner, .sg-head, .sg-scene, .sg-cell, .sg-launch, .sg-stop, .sg-stopall {
  display: flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 6px 9px; border-radius: var(--r);
}
.sg-corner { background: none; }
.sg-dim, .sg-scenehead {
  font-family: var(--mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink-mute);
}
.sg-scenehead { justify-content: center; }

.sg-head {
  background: var(--panel); border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  font-weight: 600;
}
.sg-swatch { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.sg-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-lock { background: none; border: 0; padding: 2px; font-size: 12px; opacity: .35; }
.sg-lock:hover { opacity: .9; }
.sg-lock.mine { opacity: 1; }
.sg-lock.theirs { opacity: 1; cursor: not-allowed; }

.sg-scene { background: var(--panel); border: 1px solid var(--edge); }
.sg-scene-name {
  width: 100%; background: none; border: 0; padding: 0;
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
}
.sg-scene-name:focus { outline: none; color: var(--ink); }
.sg-addscene {
  width: 100%; padding: 3px 8px;
  background: none; border: 1px dashed var(--edge); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 10px; color: var(--ink-mute);
}
.sg-addscene:hover { color: var(--ink); border-color: var(--edge-hi); }

.sg-cell { border: 1px solid var(--edge); cursor: pointer; overflow: hidden; position: relative; }
.sg-cell.empty {
  background: var(--well); border-style: dashed; justify-content: center; gap: var(--s2);
}
.sg-rec, .sg-up {
  width: 22px; height: 22px; border-radius: var(--r-sm);
  background: none; border: 1px solid transparent; color: var(--ink-mute);
  font-size: 10px; line-height: 1; opacity: 0; transition: opacity .12s, color .12s;
}
.sg-cell.empty:hover .sg-rec, .sg-cell.empty:hover .sg-up,
.sg-cell.empty:focus-within .sg-rec, .sg-cell.empty:focus-within .sg-up { opacity: 1; }
.sg-rec:hover { color: var(--rec); border-color: #5c2f2d; }
.sg-up:hover { color: var(--ink); border-color: var(--edge-hi); }

.sg-cliplabel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.sg-tri { font-size: 8px; opacity: .5; }
.sg-cell.has-clip { box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.sg-cell.playing { box-shadow: inset 0 0 0 1px var(--live), 0 0 14px -4px var(--live); }
.sg-cell.playing .sg-tri { opacity: 1; color: var(--live); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

.sg-x { opacity: 0; padding: 0 2px; font-size: 10px; }
.sg-cell:hover .sg-x { opacity: .55; }
.sg-x:hover { opacity: 1 !important; color: var(--rec); }

/* Held by someone else: visibly inert, rather than silently swallowing clicks. */
.sg-cell.locked-out, .sg-stop.locked-out { cursor: not-allowed; opacity: .35; filter: saturate(.25); }
.sg-cell.drop-over { border-style: solid; border-color: var(--live); background: rgba(126,231,135,.09); }

.sg-launch, .sg-stop, .sg-stopall {
  justify-content: center;
  background: var(--panel); border: 1px solid var(--edge);
  color: var(--ink-mute); font-size: 10px;
}
.sg-launch:hover { color: var(--live); border-color: #35533c; }
.sg-stop:hover:not(.locked-out), .sg-stopall:hover { color: var(--ink); border-color: var(--edge-hi); }

/* ── Side panel ───────────────────────────────────────────────────────────── */
.side {
  grid-area: side; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--edge); min-height: 0;
}
.side-head {
  padding: var(--s3) var(--s4);
  font-family: var(--mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink-mute);
  border-bottom: 1px solid var(--edge);
}
.log { flex: 1; overflow-y: auto; padding: var(--s3) var(--s4); font-size: 12px; }
.log .entry { margin-bottom: 7px; color: var(--ink-dim); word-wrap: break-word; }
.chat-form { padding: var(--s2) var(--s3); border-top: 1px solid var(--edge); }
.chat-form input {
  width: 100%; padding: 7px 10px;
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r);
  color: var(--ink); font-size: 12px;
}
.chat-form input:focus { border-color: var(--edge-hi); outline: none; }

/* ── Input activity ───────────────────────────────────────────────────────────
   Two indicators, both answering "is the signal even arriving?" before you go
   looking for a cable. The LED flashes on MIDI; the meter is dBFS-mapped, since
   linear RMS sits on the floor and reads as silence at normal playing levels. */
.io {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 9px; height: 32px;
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r);
}
.io-led {
  font-family: var(--mono); font-size: 8px;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-mute);
  padding: 2px 5px; border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: color .06s, background .06s, border-color .06s;
}
.io-led.on {
  color: #0d1117; background: var(--live); border-color: var(--live);
}
.io-meter {
  position: relative; width: 54px; height: 6px;
  background: #05070a; border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7);
}
.io-meter > i {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: linear-gradient(90deg, var(--live), #b8f0a8);
  transition: width .05s linear;
}
.io-meter > i.hot { background: linear-gradient(90deg, var(--warn), var(--rec)); }
.io-meter.blocked { box-shadow: inset 0 0 0 1px #5c2f2d; }

/* ── On-screen keyboard ───────────────────────────────────────────────────────
   White keys tile edge to edge; black keys are an overlay straddling the seams,
   which is the only way the geometry stays right across octaves. */
.kbd {
  position: fixed; left: 0; right: 300px; bottom: 0; z-index: 8;
  height: 0; overflow: hidden; transition: height .18s ease;
  background: linear-gradient(#20242c, #171a20);
  border-top: 1px solid var(--edge);
}
.kbd.open { height: 104px; }
.kbd-inner { position: relative; height: 100%; padding: var(--s2) var(--s3) var(--s3); }
.kbd-whites { display: flex; height: 100%; gap: 0; }
.kbd-blacks { position: absolute; inset: var(--s2) var(--s3) auto; height: 62%; pointer-events: none; }

.key { cursor: pointer; user-select: none; transition: background .04s; }
.key.white {
  position: relative;
  background: linear-gradient(#f4f6fa, #d9dee7);
  border: 1px solid #0b0d11; border-top: 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: inset 0 -6px 8px -6px rgba(0,0,0,.4);
}
.key.white + .key.white { border-left: 0; }
.key.black {
  position: absolute; top: 0; height: 100%;
  background: linear-gradient(#2b313c, #14171d);
  border: 1px solid #05070a; border-top: 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: 0 3px 6px rgba(0,0,0,.55);
  pointer-events: auto;
}
.key.white.down { background: linear-gradient(#a9e8b0, var(--live)); }
.key.black.down { background: linear-gradient(#4a8a55, #2f6b3c); }
.key-label {
  position: absolute; bottom: 5px; left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: 8px; color: #6b7382; pointer-events: none;
}

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; background: rgba(6,8,11,.72);
}
.modal-card {
  width: min(460px, calc(100vw - 32px));
  max-height: min(84vh, 680px); overflow: auto;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-lg);
  box-shadow: 0 28px 70px rgba(0,0,0,.6);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4); border-bottom: 1px solid var(--edge);
}
.modal-head h3 { margin: 0; font-size: 14px; }
.icon-btn { background: none; border: 0; color: var(--ink-mute); font-size: 14px; padding: 2px 6px; }
.icon-btn:hover { color: var(--ink); }

.stabs { display: flex; gap: 2px; padding: var(--s3) var(--s4) 0; border-bottom: 1px solid var(--edge); }
.stab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 6px 10px 9px;
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute);
}
.stab:hover { color: var(--ink-dim); }
.stab.active { color: var(--ink); border-bottom-color: var(--live); }

.spane { padding: var(--s4); }
.shint { margin: 0 0 var(--s4); font-size: 11px; color: var(--ink-dim); }
.srow {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--s3);
  align-items: center; margin-bottom: var(--s3);
}
.srow > label { font-size: 11px; color: var(--ink-dim); }
.srow input, .srow select, .srow textarea {
  width: 100%; padding: 7px 9px;
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r);
  color: var(--ink); font-size: 12px;
}
.srow textarea { font-family: var(--mono); font-size: 11px; resize: vertical; }
.srow input:focus, .srow select:focus, .srow textarea:focus { border-color: var(--edge-hi); outline: none; }
.sinline { display: flex; align-items: center; gap: var(--s2); }
.sinline input[type="checkbox"] { width: auto; accent-color: var(--live); }
.ssub {
  margin: -4px 0 var(--s4) 122px;
  font-family: var(--mono); font-size: 10px; color: var(--ink-mute); line-height: 1.45;
}
.ssub.inline { margin: 0; }
.slink { color: var(--live); font-size: 12px; text-decoration: none; }
.slink:hover { text-decoration: underline; }
.sbtn {
  padding: 5px 10px; background: var(--panel-hi);
  border: 1px solid var(--edge); border-radius: var(--r);
  font-size: 11px; color: var(--ink-dim);
}
.sbtn:hover { color: var(--ink); border-color: var(--edge-hi); }

.pill {
  padding: 3px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid var(--edge); color: var(--ink-mute);
}
.pill.ok   { color: var(--live); border-color: #35533c; background: rgba(126,231,135,.08); }
.pill.warn { color: var(--warn); border-color: #5c4a24; background: rgba(255,200,87,.07); }
.pill.bad  { color: var(--rec);  border-color: #5c2f2d; background: rgba(255,95,86,.07); }

.modal-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s5); }
.modal-actions button {
  padding: 8px 14px; border-radius: var(--r); border: 0;
  background: var(--live); color: #0d1117; font-weight: 620; font-size: 12px;
}
.modal-actions button:hover { filter: brightness(1.08); }
.modal-actions .ghost { background: none; border: 1px solid var(--edge); color: var(--ink-dim); font-weight: 400; }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
  padding: 9px 15px;
  background: var(--panel-hi); border: 1px solid var(--edge-hi); border-radius: var(--r);
  font-size: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  body, body.browser-open { grid-template-columns: 1fr; grid-template-areas: "transport" "stage"; }
  .leftpanel { display: none; }
  .side { display: none; }
  .kbd { right: 0; }
  .transport { gap: var(--s3); overflow-x: auto; }
  :root { --head-w: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Clip tools ───────────────────────────────────────────────────────────────
   Ableton's Clip View: a bar for whatever clip is selected. It shows only the
   tool that can act on that clip — quantise for MIDI, slicing for audio. */
.clipbar {
  position: fixed; left: 0; right: 300px; bottom: 0; z-index: 9;
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s2) var(--s3);
  background: linear-gradient(#21252d, #191c22);
  border-top: 1px solid var(--edge);
  overflow-x: auto;
}
.kbd.open ~ .clipbar { bottom: 104px; }
.cb-title { display: flex; align-items: center; gap: var(--s2); min-width: 170px; }
.cb-kind {
  font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .09em;
  padding: 2px 5px; border-radius: var(--r-sm);
  background: var(--well); border: 1px solid var(--edge); color: var(--ink-mute);
}
.cb-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.cb-meta, .cb-readout {
  font-family: var(--mono); font-size: 10px; color: var(--ink-mute); white-space: nowrap;
}
.cb-tool { display: flex; align-items: center; gap: var(--s2); }
.cb-label {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-dim);
}
.cb-tool select {
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r-sm);
  padding: 3px 6px; font-family: var(--mono); font-size: 11px; color: var(--ink);
}
.cb-slider {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-mute);
}
.cb-slider input[type="range"] { width: 76px; accent-color: var(--live); }
.cb-slider b { color: var(--ink-dim); font-weight: 400; min-width: 30px; }
.cb-chk {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-mute);
}
.cb-chk input { accent-color: var(--live); }
.cb-go {
  padding: 5px 11px; border-radius: var(--r); border: 1px solid #35533c;
  background: rgba(126,231,135,.12); color: var(--live);
  font-size: 11px; font-weight: 600;
}
.cb-go:hover { background: rgba(126,231,135,.22); }
#cbClose { margin-left: auto; }

.clip.sel { outline: 1px solid var(--live); outline-offset: -1px; }
.sg-cell.sel { outline: 1px solid var(--live); outline-offset: -1px; }

/* ── Spectrum ─────────────────────────────────────────────────────────────── */
.specpanel {
  position: fixed; right: 314px; bottom: 14px; z-index: 40;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(0,0,0,.6); overflow: hidden;
}
.spec-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s2) var(--s3);
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-mute);
  border-bottom: 1px solid var(--edge);
}
#specCanvas { display: block; background: var(--well); }
.spec-scale {
  display: flex; justify-content: space-between;
  padding: 3px var(--s2) 5px;
  font-family: var(--mono); font-size: 8px; color: var(--ink-mute);
}

/* ── Diagnostics ──────────────────────────────────────────────────────────── */
.diag {
  margin: 0 0 var(--s4);
  padding: var(--s2) var(--s3);
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r);
  font-family: var(--mono); font-size: 10px; line-height: 1.7; color: var(--ink-dim);
  word-break: break-all;
}
.diag b {
  display: inline-block; min-width: 62px;
  color: var(--ink-mute); font-weight: 400; text-transform: uppercase; letter-spacing: .06em;
}
.diag i { color: var(--warn); font-style: normal; }

/* Octave navigation sits over the keyboard rather than beside it, so the keys
   keep the full width — a 48-key range needs every pixel it can get. */
.kbd-nav {
  position: absolute; top: 2px; right: var(--s3); z-index: 3;
  display: flex; align-items: center; gap: 6px;
}
.kbd-oct {
  width: 20px; height: 16px; padding: 0;
  background: var(--panel-hi); border: 1px solid var(--edge); border-radius: var(--r-sm);
  color: var(--ink-mute); font-size: 8px; line-height: 1;
}
.kbd-oct:hover { color: var(--ink); border-color: var(--edge-hi); }
.kbd-range {
  font-family: var(--mono); font-size: 8px; letter-spacing: .06em;
  color: var(--ink-mute); min-width: 52px; text-align: center;
}

/* ── Synth editor ─────────────────────────────────────────────────────────── */
.synthpanel {
  position: fixed; right: 314px; top: 74px; z-index: 41; width: 300px;
  max-height: calc(100vh - 200px); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(0,0,0,.6); overflow: hidden;
}
.synth-body { overflow-y: auto; padding: var(--s2) var(--s3) var(--s3); }
.sy-sec { margin-bottom: var(--s3); }
.sy-title {
  font-family: var(--mono); font-size: 8px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-mute);
  padding-bottom: 3px; margin-bottom: 5px; border-bottom: 1px solid var(--edge);
}
.sy-row { display: grid; grid-template-columns: 52px 1fr 46px; align-items: center; gap: 7px; margin-bottom: 3px; }
.sy-lab { font-family: var(--mono); font-size: 9px; color: var(--ink-dim); }
.sy-row input[type="range"] { width: 100%; accent-color: var(--live); height: 14px; }
.sy-row select {
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r-sm);
  padding: 2px 4px; font-family: var(--mono); font-size: 10px; color: var(--ink);
}
.sy-val { font-family: var(--mono); font-size: 9px; color: var(--ink-mute); text-align: right; font-weight: 400; }

/* ── Piano roll ───────────────────────────────────────────────────────────── */
.rollpanel {
  position: fixed; left: var(--s4); bottom: 58px; z-index: 41;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(0,0,0,.6); overflow: hidden;
}
.kbd.open ~ .rollpanel { bottom: 162px; }
.roll-wrap { background: var(--well); }
#rollCanvas { display: block; cursor: crosshair; max-width: min(72vw, 720px); height: auto; }
.roll-hint {
  padding: 4px var(--s3) 6px;
  font-family: var(--mono); font-size: 9px; color: var(--ink-mute);
  border-top: 1px solid var(--edge);
}
.spec-head select {
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r-sm);
  padding: 2px 5px; font-family: var(--mono); font-size: 10px; color: var(--ink);
}
.spec-head > div { display: flex; align-items: center; gap: 6px; }

/* ── Tools: device browser + track rack ───────────────────────────────────── */
.fxpanel {
  position: fixed; right: 314px; top: 74px; z-index: 42; width: 470px;
  max-height: calc(100vh - 190px); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(0,0,0,.6); overflow: hidden;
}
.fx-body { display: grid; grid-template-columns: 168px 1fr; min-height: 0; flex: 1; }
.fx-browser { border-right: 1px solid var(--edge); overflow-y: auto; }
.fx-browser-head {
  padding: var(--s2) var(--s3);
  font-family: var(--mono); font-size: 8px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-mute);
  border-bottom: 1px solid var(--edge);
}
.fx-item {
  display: block; width: 100%; text-align: left;
  padding: 7px var(--s3); background: none; border: 0;
  border-bottom: 1px solid rgba(43,49,60,.5);
}
.fx-item:hover { background: var(--panel-hi); }
.fx-item-name { display: block; font-size: 12px; color: var(--ink); }
.fx-item-hint { display: block; font-size: 10px; color: var(--ink-mute); margin-top: 1px; }

.fx-rack { overflow-y: auto; padding: var(--s2) var(--s3) var(--s3); }
.fx-trackpick {
  width: 100%; margin-bottom: var(--s2); padding: 5px 7px;
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r);
  font-size: 11px; color: var(--ink);
}
.fx-empty {
  padding: var(--s4) 0; text-align: center;
  font-family: var(--mono); font-size: 10px; color: var(--ink-mute);
}
.fx-card {
  margin-bottom: var(--s2); padding: var(--s2);
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r);
}
.fx-card.off { opacity: .45; }
.fx-card-head { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.fx-card-name {
  flex: 1; font-family: var(--mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim);
}
.fx-card-head button {
  background: none; border: 0; color: var(--ink-mute); font-size: 10px; padding: 1px 3px;
}
.fx-card-head button:hover { color: var(--ink); }
.fx-power { color: var(--live) !important; }
.fx-card.off .fx-power { color: var(--ink-mute) !important; }
.fx-del:hover { color: var(--rec) !important; }

.instr { display: flex; gap: 4px; align-items: center; }
.instr-edit {
  flex: 0 0 auto; width: 20px; height: 20px;
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r-sm);
  color: var(--ink-mute); font-size: 10px; line-height: 1;
}
.instr-edit:hover { color: var(--ink); border-color: var(--edge-hi); }
#waveCanvas { display: block; cursor: ew-resize; max-width: min(72vw, 720px); height: auto; }

/* ── Left navigator ───────────────────────────────────────────────────────── */
.leftpanel {
  grid-area: left; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--edge);
}
.lp-tabs { padding: var(--s2) var(--s2) 0; }
.lp-pane { flex: 1; overflow-y: auto; min-height: 0; }
.lp-head {
  display: flex; align-items: center; gap: 5px;
  padding: var(--s2) var(--s3);
  font-family: var(--mono); font-size: 8px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-mute);
  border-bottom: 1px solid var(--edge);
  position: sticky; top: 0; background: var(--panel); z-index: 2;
}
.lp-head .fx-trackpick { margin: 0; flex: 1; padding: 2px 4px; font-size: 10px; }

.clip-item {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 6px var(--s3); background: none; border: 0;
  border-bottom: 1px solid rgba(43,49,60,.5); text-align: left;
}
.clip-item:hover { background: var(--panel-hi); }
.clip-item.sel { background: rgba(126,231,135,.10); }
.clip-item .ci-dot { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }
.clip-item .ci-name { flex: 1; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-item .ci-meta { font-family: var(--mono); font-size: 9px; color: var(--ink-mute); }

/* ── Track reordering + cross-lane clip drag ──────────────────────────────── */
.track-head .grip {
  cursor: grab; color: var(--ink-mute); font-size: 10px;
  padding: 0 2px; user-select: none; letter-spacing: -1px;
}
.track-head .grip:active { cursor: grabbing; }
.track.drag-src { opacity: .45; }
.track.drop-above { box-shadow: inset 0 2px 0 var(--live); }
.track.drop-below { box-shadow: inset 0 -2px 0 var(--live); }
.lane.drop-target { background-color: rgba(126,231,135,.06); }

/* Bar ticks inside clips, so length is readable in bars without counting pixels. */
.clip .bars { position: absolute; inset: 0; pointer-events: none; }
.clip .bar-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,.34); }
.clip .bar-tick.beat { background: rgba(0,0,0,.16); }
.clip .bar-num {
  position: absolute; bottom: 1px; font-family: var(--mono); font-size: 7px;
  color: rgba(255,255,255,.5); padding-left: 2px;
}

/* Trim handles: a grab zone at each end of a clip. Visible on hover only, so
   clips stay clean until you reach for an edge. */
.clip::before, .clip::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 7px;
  opacity: 0; transition: opacity .1s; pointer-events: none;
  background: linear-gradient(var(--live), var(--live));
}
.clip::before { left: 0; }
.clip::after { right: 0; }
.clip:hover::before, .clip:hover::after { opacity: .35; }
.clip.trimming { z-index: 6; }
.clip.trimming::before, .clip.trimming::after { opacity: .8; }

/* ── Browser drag-to-track ────────────────────────────────────────────────────
   Dragging an instrument or effect onto a track is how Ableton works, and it
   removes the "which track is selected?" question entirely — you point at it. */
.fx-item { cursor: grab; }
.fx-item:active { cursor: grabbing; }
body.dragging-item .track-head,
body.dragging-item .lane,
body.dragging-item .track-item { outline: 1px dashed rgba(126,231,135,.22); outline-offset: -2px; }
.track-head.item-over,
.lane.item-over,
.track-item.item-over { outline: 1px solid var(--live); outline-offset: -2px; background-color: rgba(126,231,135,.10); }

/* ── Tracks tab ───────────────────────────────────────────────────────────── */
.track-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px var(--s3); cursor: pointer;
  border-bottom: 1px solid rgba(43,49,60,.5);
}
.track-item:hover { background: var(--panel-hi); }
.track-item.sel { background: rgba(126,231,135,.10); }
.track-item button {
  width: 20px; height: 18px; flex: 0 0 auto;
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r-sm);
  color: var(--ink-mute); font-family: var(--mono); font-size: 9px;
}
.track-item button:hover { color: var(--ink); }
.track-item .ti-arm.on { color: var(--rec); border-color: #5c2f2d; }
.track-item .ti-mute.on { color: var(--warn); border-color: #5c4a24; }
.lp-head .sbtn { margin-left: auto; padding: 2px 7px; font-size: 10px; }

/* Inline analyser inside a Spectrum device card. */
.fx-scope {
  display: block; width: 100%; height: auto; margin: 4px 0 6px;
  background: #05070a; border-radius: var(--r-sm);
}

/* ── Track volume ─────────────────────────────────────────────────────────── */
.track-head .vol { display: grid; grid-template-columns: 1fr 30px; gap: 4px 6px; align-items: center; }
.vol-fader { width: 100%; accent-color: var(--live); height: 12px; }
.vol-val {
  font-family: var(--mono); font-size: 9px; color: var(--ink-mute);
  text-align: right; font-variant-numeric: tabular-nums;
}
.vol-meter {
  grid-column: 1 / -1; position: relative; height: 4px;
  background: #05070a; border-radius: 999px; overflow: hidden;
}
.vol-meter > i {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: linear-gradient(90deg, var(--live), #b8f0a8);
  transition: width .06s linear;
}
.vol-meter > i.hot { background: var(--rec); }

/* ── Drilldown: Clip / Devices ────────────────────────────────────────────── */
.dp-head { gap: var(--s3); }
.dp-tabs { padding: 0; border: 0; }
.dp-tabs .stab { padding: 4px 9px 6px; }
.dp-title {
  flex: 1; font-family: var(--mono); font-size: 10px; color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-right { display: flex; align-items: center; gap: 6px; }
.dp-pane { max-height: 300px; overflow-y: auto; }
.dp-devices { min-width: 420px; padding: var(--s2) var(--s3) var(--s3); }
.dp-chainhead {
  display: flex; align-items: center; gap: 6px; margin-bottom: var(--s2);
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-mute);
}
.dp-chainhead .fx-trackpick { width: auto; margin: 0; padding: 3px 6px; font-size: 10px; text-transform: none; letter-spacing: 0; }
.dp-chainhint { text-transform: none; letter-spacing: 0; opacity: .7; }
.dp-devices .fx-rack { padding: 0; overflow: visible; }

/* ── Sample library ───────────────────────────────────────────────────────── */
.lib-filters {
  position: sticky; top: 0; z-index: 2;
  padding: var(--s2) var(--s3);
  background: var(--panel); border-bottom: 1px solid var(--edge);
  display: flex; flex-direction: column; gap: 5px;
}
.lib-filters input[type="text"], #libSearch {
  width: 100%; padding: 5px 8px;
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r);
  color: var(--ink); font-size: 11px;
}
#libSearch:focus { border-color: var(--edge-hi); outline: none; }
.lib-row { display: flex; gap: 5px; align-items: center; }
.lib-row select {
  flex: 1; min-width: 0; padding: 3px 5px;
  background: var(--well); border: 1px solid var(--edge); border-radius: var(--r-sm);
  color: var(--ink-dim); font-size: 10px;
}
.lib-row .cb-chk { white-space: nowrap; }
.lib-count {
  font-family: var(--mono); font-size: 9px; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: .06em;
}

.lib-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px var(--s3); cursor: grab;
  border-bottom: 1px solid rgba(43,49,60,.4);
}
.lib-item:hover { background: var(--panel-hi); }
.lib-item:active { cursor: grabbing; }
.li-kind {
  width: 12px; flex: 0 0 auto; text-align: center;
  font-size: 10px; color: var(--ink-mute);
}
/* Loops and one-shots are the two things you sort for, so they get a glyph
   rather than a word — the list is narrow and the distinction is constant. */
.li-kind.loop { color: var(--live); }
.li-name {
  flex: 1; min-width: 0; font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.li-meta {
  font-family: var(--mono); font-size: 9px; color: var(--ink-mute);
  white-space: nowrap; flex: 0 0 auto;
}