/* =============================================================================
   tlrstudio.css — TLR Studio production suite (tlr-studio.html)
   -----------------------------------------------------------------------------
   The look is locked in MUSIC-LAB-BRIEF.md §4.2 — build to these values, do not
   re-interpret. One rounded container, overflow hidden: a LIGHT chrome zone
   (setup/reference) flows with no gap into a DARK Engine surface (the running
   suite). Two materials, one unit.

   Palette (locked):
     Light  surface #fbfbfd/#fff · page/well #eceef2 · hairline #e6e6ec
            text #1c1c22 / secondary #9a9aa2 / faint #b4b4bc
     Accent (single) #5e5ce6 indigo · soft #eceaff · playhead #7d7bff
     Dark   surface #272a32 · sub-cards #30343d/#343843 · step-off #31353f
            (beat #373b46) · hairline #353945 · text #e7e8ee / muted #8b8f9b
     Drum lanes (off-accent, fixed): kick #e23b5a · snare #e8870b
            hat #0ea5b7 · clap #2e9e4f
     Scale tiers: tonic #5e5ce6 (white label) · scale tone #e3e1fb/#c7c4f3
            (indigo label) · non-scale muted gray
============================================================================= */

.ml {
  /* ── Warm-graphite "studio rack" palette (redesign v3, 2026-07-04) ──────────
     A single-screen DAW. Warm graphite chassis (NOT blue-purple), matte panels,
     brushed transport, a green hardware LCD, and a FUNCTIONAL multi-hue accent
     system: harmony = indigo, drums = the RGB lane colors, presets = gold,
     spectrum = analyzer gradient. Legacy token names kept + remapped. */
  --ml-bg:       #18191d;   /* chassis base */
  --ml-bg-2:     #131417;   /* base foot */
  --ml-panel:    #222327;   /* matte section panel — ONE flat material */
  --ml-panel-hi: #26272c;   /* subtle panel top */
  --ml-raised:   #2d2e34;   /* raised control fill (the one button recipe) */
  /* remapped legacy names */
  --ml-surface:   var(--ml-panel);
  --ml-surface-2: #313339;
  --ml-well:      #1a1b1f;   /* recessed well — lighter, not a black pit */
  --ml-hair:      #34363d;
  --ml-text:      #eceef2;
  --ml-text-2:    #a2a5ad;
  --ml-faint:     #676a72;
  /* Theme system v2 ([RYDER-VERDICT] 2026-07-08, KB #285 — a desaturate-in-
     place pass read as "depressed"): ONE clear accent for state, content hues
     confined to content (drum lanes, genre dots), dark shadow-gap seams, one
     flat material, one button recipe. */
  --ml-accent:      #7e88ee;   /* THE accent — clear indigo-blue, state only */
  --ml-accent-2:    #5f68cf;
  --ml-accent-soft: #23263c;
  --ml-playhead:    #99a2f4;
  --ml-cyan:        #5fadc2;
  --ml-gold:        #c9a45e;   /* browser section tick only */
  --ml-green:       #5cb87e;   /* play / live */
  /* (green hardware-LCD tokens retired 2026-07-08 — screens are neutral
     graphite; do not reintroduce green-tinted surfaces) */
  /* engine tokens converge on the rack */
  --ml-d-surface:  var(--ml-panel);
  --ml-d-card:     #2c2f37;
  --ml-d-card-2:   #353942;
  --ml-d-step:     #14161b;
  --ml-d-step-beat:#1b1e25;
  --ml-d-hair:     #33373f;
  --ml-d-text:     #e9eaee;
  --ml-d-muted:    #9a9da6;
  /* drum lanes — content color, rich but not neon */
  --ml-kick:  #d16575;
  --ml-snare: #cf9b57;
  --ml-hat:   #5fadc2;
  --ml-clap:  #6fb089;
  --ml-perc:  #a48fd8;
  /* scale-tone dot on dark */
  --ml-tier-scale-fill: #2c2d4a;
  --ml-tier-scale-bd:   #514f92;
  /* seams are DARK shadow gaps (Logic-style), never light hairlines —
     [RYDER-VERDICT] 2026-07-08 "the weird white lines… looks strange" */
  --ml-divider: #0c0d10;
  --ml-frame:   #0a0b0d;
  /* depth helpers — flat/modern (Logic 11), not skeuomorphic bevels */
  --ml-bevel: inset 0 1px 0 rgba(255,255,255,.03);
  --ml-panel-shadow: 0 1px 2px rgba(0,0,0,.28);
  --ml-inset: inset 0 1px 3px rgba(0,0,0,.35);
  --ml-glow:  0 0 0 1px rgba(123,121,255,.4);
  /* dense/DAW spacing scale — tight, connected */
  --ml-px: 7px;
  --ml-gap: 6px;

  font-family: "Inter", system-ui, sans-serif;
  color: var(--ml-text);
  -webkit-font-smoothing: antialiased;
}

/* ── The single container ───────────────────────────────────────────────── */
/* Full-bleed — the production suite reaches both screen edges (no "module"
   margins). The breakout escapes <main>'s padding the same way Places does. */
#tlrstudio-mount { width: 100vw; margin-left: calc(-50vw + 50%); }
/* A full-screen DAW fills the viewport EXACTLY — nothing below it. Kill the
   section's padding (top AND bottom) and drop the marketing footer on this page,
   or the rack floats above a strip of page background (the recurring bottom
   gutter). [RYDER-VERDICT] "no random bottom gutter." */
main > section#tlr-studio { padding: 0; --tone: var(--tone-violet); }
body:has(#tlr-studio) #footer-mount { display: none; }
.ml-backlink {
  display: inline-block; margin: 0 0 .4rem var(--ml-px);
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .04em;
  color: var(--fg-mute, #9a9aa2); text-decoration: none;
}
.ml-backlink:hover { color: var(--fg, #1c1c22); }
/* ── One framed instrument. Regions abut with 1px hairline seams (like the
      Portal Dashboard's KPI strip) — connected, grounded, no floating cards.
      The frame's border + shadow + inner highlight give it dimension. ──────── */
.ml-container {
  height: calc(100dvh - var(--portal-chrome-h, 104px));
  min-height: 600px;
  /* Flush on ALL four sides — no side gutter, no bottom gutter. dvh (not vh) so
     it tracks the real viewport; zero margin so the rack meets the screen bottom
     with nothing beneath it. */
  margin: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 46px minmax(0, 1fr);
  gap: 1px;
  padding: 0;
  background: var(--ml-divider);   /* shows through the 1px seams */
  border: 1px solid var(--ml-frame);
  border-inline: 0;
  border-radius: 0;
  box-shadow: 0 14px 44px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.025);
}

/* ── Transport strip — brushed graphite chassis + green hardware LCD ─────── */
.ml-transport {
  display: flex; align-items: center; gap: 10px;
  padding: 0 11px;
  background: var(--ml-panel-hi);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  overflow: hidden;
}
.ml-tp-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .13em; font-size: 12px; white-space: nowrap; }
.ml-tp-glyph { width: 21px; height: 21px; border-radius: 3px; display: grid; place-items: center;
  background: var(--ml-accent); color: #fff; font-size: 12px; }
/* the transport display — neutral graphite screen ([RYDER-VERDICT] 2026-07-08:
   the green-LCD theme is out), values in white, key/tempo pop via weight */
.ml-lcd { font-family: "JetBrains Mono", monospace; background: #0d0e12; color: #b7bcc7;
  border-radius: 3px; padding: 5px 11px; border: 1px solid #23252c;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55);
  display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; }
.ml-lcd b { color: #fff; } .ml-lcd-sep { color: #40434c; }
.ml-tp-play { display: flex; gap: 4px; }
.ml-tp-btn { width: 32px; height: 28px; border-radius: 3px; border: 1px solid var(--ml-hair);
  background: var(--ml-raised); color: var(--ml-text);
  display: grid; place-items: center; font-size: 12px; cursor: pointer; }
.ml-tp-btn:hover { border-color: #4a4d55; background: #383b42; }
.ml-tp-btn.play { color: var(--ml-green); }
.ml-tp-btn.play.on { color: #0e1a12; background: var(--ml-green); border-color: var(--ml-green); }
.ml-tp-btn.loop.on { color: #fff; background: var(--ml-accent); border-color: var(--ml-accent); }
.ml-tp-tempo { display: flex; align-items: center; gap: 4px; background: var(--ml-well); border: 1px solid var(--ml-hair);
  border-radius: 4px; padding: 2px 4px; box-shadow: var(--ml-inset); }
.ml-tp-step { width: 19px; height: 22px; border: 0; border-radius: 3px; background: transparent; color: var(--ml-text-2); cursor: pointer; font-size: 14px; }
.ml-tp-step:hover { color: var(--ml-accent); background: var(--ml-raised); }
.ml-tp-read { display: inline-flex; align-items: baseline; gap: 3px; border: 0; background: transparent; cursor: ns-resize; touch-action: none;
  color: var(--ml-text); border-radius: 3px; padding: 2px 6px; }
.ml-tp-read:hover { background: var(--ml-raised); }
.ml-tp-read.on { background: var(--ml-accent); }
.ml-tp-read.on .ml-tp-readv, .ml-tp-read.on .ml-tp-tunit { color: #fff; }
.ml-tp-readv { font-size: 16px; font-weight: 700; }
.ml-tp-tval { width: 42px; text-align: center; background: var(--ml-raised); border: 1px solid var(--ml-hair); color: var(--ml-text); font-size: 13px; font-weight: 700; border-radius: 3px; padding: 2px; -moz-appearance: textfield; }
.ml-tp-tval:focus { outline: none; border-color: var(--ml-accent); }
.ml-tp-tval::-webkit-outer-spin-button, .ml-tp-tval::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ml-tp-tunit { font-size: 8px; color: var(--ml-faint); letter-spacing: .08em; }
.ml-tp-slider { width: 118px; height: 4px; accent-color: var(--ml-accent); margin-left: 4px; }
.ml-tp-tap { border: 1px solid var(--ml-hair); background: var(--ml-raised); color: var(--ml-text-2); border-radius: 3px; padding: 3px 9px; font-size: 10px; font-weight: 600; cursor: pointer; }
.ml-tp-tap:hover { color: var(--ml-text); border-color: var(--ml-accent); }
.ml-tp-spacer { flex: 1; }

/* ── Engine wrapper (2026-07-08): FULL-HEIGHT side rails, spectrum BETWEEN
      them under the sequencer only. [sidebar ‖ handle ‖ main(center+spectrum)
      ‖ right rail]. Seams: the handle carries its own hairlines; the right
      rail carries a left hairline. ──────────────────────────────────────── */
.ml-engine { min-height: 0; display: grid;
  grid-template-columns: var(--ml-side-w, 264px) 8px minmax(0, 1fr) 8px var(--ml-right-w, 226px); gap: 0;
  transition: opacity .25s ease, filter .25s ease; }
.ml-main { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1px;
  background: var(--ml-divider); }
.ml-engine.is-off { opacity: .55; filter: grayscale(.75); }
.ml-engine.is-off > * { pointer-events: none; }

/* the draggable sidebar seam — ONE seam (its own hairline borders) */
.ml-side-resize { cursor: col-resize; background: var(--ml-panel); position: relative; z-index: 4; touch-action: none;
  border-left: 1px solid var(--ml-divider); border-right: 1px solid var(--ml-divider); }
.ml-side-resize::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 38px;
  transform: translate(-50%, -50%); border-radius: 2px; background: var(--ml-hair);
}
.ml-side-resize:hover, .ml-side-resize.drag { background: #2b2d34; }
.ml-side-resize:hover::after, .ml-side-resize.drag::after { background: var(--ml-accent); }
.ml-col { min-height: 0; display: flex; flex-direction: column; gap: 1px; background: var(--ml-divider); }
.ml-grow { flex: 1; min-height: 0; display: flex; }
.ml-grow > .ml-sec { flex: 1; min-height: 0; }
/* Editor collapses to just its header until opened (user intent). */
.ml-col-c > #ml-seq-sec { flex: 1; min-height: 0; display: flex; }
.ml-col-c > #ml-seq-sec > .ml-sec { flex: 1; min-height: 0; }
.ml-col-c > #ml-editor-sec { flex: none; min-height: 0; display: flex; }
.ml-col-c > #ml-editor-sec.open { flex: 0.8; }
.ml-col-c > #ml-editor-sec > .ml-sec { flex: 1; min-height: 0; }
.ml-keytray-wrap { display: none; }
.ml-hide { display: none !important; }

/* ── Section-header language (consistent everywhere) ────────────────────── */
.ml-sec-head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 4px;
  flex: none;
}
.ml-tick {
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: var(--ml-accent);
  flex: none;
  opacity: .8;
}
.ml-sec-label {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ml-faint);
}
.ml-sec-head .ml-sec-aux { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* power toggle (⏻) — lives in the top bar; indigo gradient + glow when on. */
.ml-power {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--ml-hair);
  background: var(--ml-raised);
  color: var(--ml-text-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--ml-bevel);
  transition: all .2s ease;
}
.ml-power:hover { border-color: var(--ml-accent); color: var(--ml-text); }
.ml-power.is-on {
  color: #fff;
  border-color: var(--ml-accent);
  background: var(--ml-accent);
  box-shadow: 0 0 0 3px rgba(125, 128, 216, .16), 0 0 12px -3px var(--ml-accent);
}

/* ── Shared controls: segmented + chips (NO dropdowns, brief §4.2) ──────── */
.ml-seg {
  display: inline-flex;
  background: var(--ml-well);
  border-radius: 4px;
  padding: 2px;
  gap: 2px;
}
.ml-seg button {
  border: 0;
  background: transparent;
  color: var(--ml-text-2);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.ml-seg button:hover { color: var(--ml-text); }
.ml-seg button.active {
  background: var(--ml-surface-2);
  color: var(--ml-accent);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
/* dark-zone segmented */
.ml-engine .ml-seg { background: #22252c; }
.ml-engine .ml-seg button { color: var(--ml-d-muted); }
.ml-engine .ml-seg button:hover { color: var(--ml-d-text); }
.ml-engine .ml-seg button.active { background: var(--ml-d-card-2); color: #fff; }

.ml-chip {
  border: 1px solid var(--ml-hair);
  background: var(--ml-raised);
  color: var(--ml-text);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: var(--ml-bevel);
  transition: all .15s;
}
.ml-chip:hover { border-color: var(--ml-accent); color: #fff; }
.ml-chip.accent {
  background: var(--ml-accent);
  border-color: var(--ml-accent-2); color: #fff;
}
.ml-engine .ml-chip {
  background: var(--ml-d-card);
  border-color: var(--ml-d-hair);
  color: var(--ml-d-text);
}
.ml-engine .ml-chip:hover { border-color: var(--ml-accent); color: #fff; }

/* recessed well — depth, not flat bordered boxes (brief §4.2) */
.ml-well {
  background: var(--ml-well);
  border-radius: 4px;
  box-shadow: var(--ml-inset);
  padding: 7px;
}
.ml-engine .ml-well { background: var(--ml-well); box-shadow: var(--ml-inset); }

.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* ── §4.2 layout: section blocks, dividers, two-column reference & browser ── */
/* Each section is a raised, bevelled panel on the deep base — a rack of modules
   (the console's depth + structure). Panels carry a per-section color identity
   (Logic/FL channel-color style) on the tick + a soft top accent. */
.ml-sec {
  position: relative;
  --sec: var(--ml-accent);   /* per-section hue */
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ml-panel);
  border: 0; border-radius: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  padding: 6px 8px;
}
.ml-sec .ml-tick { background: var(--sec); width: 3px; height: 9px; }
.ml-sec .ml-sec-label { color: var(--ml-faint); }
/* section hues around the rack */
#ml-circle-sec     > .ml-sec { --sec: #7b79ff; }
#ml-chords-sec     > .ml-sec { --sec: #9a6bff; }
#ml-browser-sec    > .ml-sec { --sec: var(--ml-gold); }
#ml-seq-sec        > .ml-sec { --sec: #7b79ff; }
#ml-editor-sec     > .ml-sec { --sec: var(--ml-cyan); }
#ml-instrument-sec > .ml-sec { --sec: var(--ml-accent); }
#ml-spectrum-sec   > .ml-sec { --sec: var(--ml-cyan); }

/* CIRCLE | SCALE reference row */
.ml-ref-grid {
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr;
  gap: 12px;
  align-items: start;
}
@media (max-width: 760px) { .ml-ref-grid { grid-template-columns: 1fr; } }

/* PROGRESSIONS | DRUM PATTERNS browser row */
.ml-browser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}
@media (max-width: 700px) { .ml-browser-grid { grid-template-columns: 1fr; } }

/* a placeholder well used by §4.2 before a section is filled by 4.3–4.7 */
.ml-placeholder {
  min-height: 56px;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--ml-text-2);
  letter-spacing: .02em;
}
.ml-engine .ml-placeholder { color: var(--ml-d-muted); }

/* ── §4.3 Chords — one recessed track, 7 degrees divided by hairlines ────── */
.ml-chord-track { display: flex; padding: 0; overflow: hidden; }
.ml-chord-cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  transition: background .15s;
}
.ml-chord-cell + .ml-chord-cell { border-left: 1px solid var(--ml-hair); }
.ml-chord-cell.sel { background: var(--ml-accent-soft); }
.ml-chord-pick {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%;
}
.ml-chord-num {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 15px; line-height: 1.1;
  color: var(--ml-text);
}
.ml-chord-cell.sel .ml-chord-num { color: var(--ml-accent); }
.ml-chord-name { font-size: 11.5px; font-weight: 600; color: var(--ml-text); }
.ml-chord-notes {
  font-size: 9.5px; color: var(--ml-text-2); line-height: 1.3;
  word-break: break-word;
}
.ml-chord-ops { display: flex; gap: 4px; margin-top: 4px; }
.ml-chord-q, .ml-chord-send {
  border: 1px solid var(--ml-hair); background: var(--ml-surface-2);
  color: var(--ml-text-2); font: inherit; font-size: 10px; font-weight: 600;
  border-radius: 3px; padding: 2px 6px; cursor: pointer; transition: all .15s;
}
.ml-chord-q.has-override { border-color: var(--ml-accent); color: var(--ml-accent); }
.ml-chord-q:hover, .ml-chord-send:hover { border-color: var(--ml-accent); color: var(--ml-accent); }
.ml-chord-send { font-weight: 700; }

/* per-degree quality tray — the dropdown replacement (grouped chips) */
.ml-qtray {
  margin-top: 10px;
  background: var(--ml-surface-2);
  border: 1px solid var(--ml-hair);
  border-radius: 4px;
  padding: 10px 12px;
}
.ml-qtray-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 11px; color: var(--ml-text-2);
}
.ml-qtray-head b { color: var(--ml-text); font-weight: 700; }
.ml-qtray-close {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: var(--ml-text-2); font-size: 14px; line-height: 1;
}
.ml-qtray-group { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; }
.ml-qtray-group + .ml-qtray-group { border-top: 1px solid var(--ml-hair); }
.ml-qtray-cat {
  flex: none; width: 64px; font-size: 9px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ml-faint); padding-top: 4px;
}
.ml-qchips { display: flex; flex-wrap: wrap; gap: 5px; }
.ml-qchip {
  border: 1px solid var(--ml-hair); background: var(--ml-surface);
  color: var(--ml-text); font: inherit; font-size: 11px; font-weight: 600;
  border-radius: 3px; padding: 3px 8px; cursor: pointer; transition: all .12s;
}
.ml-qchip:hover { border-color: var(--ml-accent); }
.ml-qchip.active { background: var(--ml-accent); border-color: var(--ml-accent); color: #fff; }

/* ── §4.4 Circle of fifths — rebuilt 2026-07-08: neutral graphite wedges (no
      blue-navy tint), NO halo strokes (they read as blur/distortion), big flat
      type verified at RENDERED size, quiet neutral hub. Accent = state only. ── */
.ml-wheel-wrap { padding: 2px; }
.ml-wheel { width: 100%; height: auto; display: block; }
.ml-wh-seg {
  fill: #2d2f35; stroke: #191a1e; stroke-width: 1;
  cursor: pointer; transition: fill .15s;
}
.ml-wh-seg.inner { fill: #24262b; }
.ml-wh-seg:hover { fill: #3a3d45; }
.ml-wh-seg.fan { fill: #33353d; }
.ml-wh-seg.active { fill: var(--ml-accent); stroke: var(--ml-accent-2); stroke-width: 1; }
.ml-wh-lab {
  text-anchor: middle; dominant-baseline: central; pointer-events: none;
  font-family: "JetBrains Mono", monospace; fill: #eceef2;
}
.ml-wh-lab.maj { font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.ml-wh-lab.min { font-size: 18px; font-weight: 700; fill: #cdd1da; }
.ml-wh-lab.on { fill: #fff; }
.ml-wh-hub-key {
  text-anchor: middle; font-family: "JetBrains Mono", monospace;
  font-size: 40px; font-weight: 800; fill: #eceef2;
}
.ml-wh-hub-sub { text-anchor: middle; font-size: 13px; fill: #8b8f9b; letter-spacing: .14em; text-transform: uppercase; }

/* ── §4.4 Scale: 3-tier note coloring (locked palette) ──────────────────── */
.ml-board-wrap { padding: 6px; overflow-x: auto; }
.ml-neck, .ml-piano { display: block; min-width: 520px; }
.ml-piano { min-width: 360px; }

.ml-nk-fret { stroke: var(--ml-hair); stroke-width: 1; }
.ml-nk-nut { stroke: var(--ml-text-2); stroke-width: 3; }
.ml-nk-string { stroke: var(--ml-faint); }
.ml-nk-inlay { fill: var(--ml-faint); opacity: .5; }
.ml-nk-fretnum { text-anchor: middle; font-size: 9px; fill: var(--ml-faint); font-family: "JetBrains Mono", monospace; }
.ml-nk-window { fill: var(--ml-accent-soft); opacity: .55; }

.ml-nk-note, .ml-pk { cursor: pointer; }
.ml-nk-note text, .ml-pk text {
  text-anchor: middle; dominant-baseline: central; pointer-events: none;
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 600;
}
.ml-nk-note.dim { opacity: .32; }

/* tier: tonic = indigo / white label */
.t-tonic circle { fill: var(--ml-accent); stroke: var(--ml-playhead); stroke-width: 1; }
.t-tonic text { fill: #fff; }
/* tier: scale tone = tinted fill + border / indigo label */
.t-scale circle { fill: var(--ml-tier-scale-fill); stroke: var(--ml-tier-scale-bd); stroke-width: 1.2; }
.t-scale text { fill: var(--ml-accent); }
/* tier: non-scale = muted (piano keys without a dot) */
.ml-pk-white { fill: #fff; stroke: var(--ml-hair); stroke-width: 1; }
.ml-pk-black { fill: #2a2a30; stroke: #1c1c22; }
:root[data-theme="dark"] .ml-pk-white { fill: #d7d8de; stroke: #44464d; }
.ml-pk.t-off { opacity: .9; }
.ml-pk-oct { text-anchor: middle; font-size: 9px; fill: var(--ml-faint); font-family: "JetBrains Mono", monospace; }

.ml-tier-legend {
  display: flex; gap: 14px; padding: 8px 4px 0; font-size: 10px; color: var(--ml-text-2);
}
.ml-tier-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ml-tier-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.ml-tier-legend i.t-tonic { background: var(--ml-accent); }
.ml-tier-legend i.t-scale { background: var(--ml-tier-scale-fill); border: 1.2px solid var(--ml-tier-scale-bd); }
.ml-tier-legend i.t-off { background: var(--ml-faint); opacity: .5; }

/* (the v2 browser CSS — .ml-brz-bar, the 5-column .ml-brz-row.prog template,
   .ml-brz-head, .ml-brz-side — was removed 2026-07-08: the stale .prog row
   template was silently overriding the current two-line rows and truncating
   preset titles to ~8 characters. Browser v3 styles live near the end of the
   file. Mode toggle: */
.ml-brz-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; margin-bottom: 6px;
  background: var(--ml-well); border: 1px solid var(--ml-hair); border-radius: 4px; box-shadow: var(--ml-inset); flex: none; }
.ml-brz-mchip { font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-align: center;
  color: var(--ml-text-2); background: transparent; border: 0; border-radius: 3px;
  padding: 6px 0; cursor: pointer; transition: color .13s, background .13s; }
.ml-brz-mchip:hover { color: var(--ml-text); }
.ml-brz-mchip.active { color: #fff; background: var(--ml-accent); box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* ── §4.6 Sequencer ─────────────────────────────────────────────────────── */
.ml-seq-loaded { font-size: 10px; color: var(--ml-accent); font-weight: 600; }
.ml-seq-transport {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.ml-seq-spacer { flex: 1 1 auto; }
.ml-seq-tempo { display: inline-flex; align-items: center; gap: 5px; }
.ml-step-btn {
  width: 22px; height: 22px; border-radius: 3px; border: 1px solid var(--ml-d-hair);
  background: var(--ml-d-card); color: var(--ml-d-text); cursor: pointer; font-size: 13px; line-height: 1;
}
.ml-step-btn:hover { border-color: var(--ml-accent); }
.ml-tempo-val { font-size: 16px; font-weight: 700; color: var(--ml-d-text); min-width: 30px; text-align: center; }
.ml-tempo-unit { font-size: 9px; color: var(--ml-d-muted); }

/* The sequencer is the centerpiece — ruler (with loop strip), then tall lanes. */
.ml-seq-grid {
  position: relative; display: grid; gap: 3px;
  overflow-x: auto; padding-bottom: 4px;
  grid-template-rows: 24px 44px repeat(5, 34px);
}
/* Logic-style cycle/loop strip across the ruler + bar numbers tinted under it */
.ml-seq-loopstrip {
  align-self: start; height: 5px; margin-top: 2px; border-radius: 2px;
  background: var(--ml-accent); opacity: .6; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.ml-seq-bar.looped { color: var(--ml-playhead, #f5a623); }
.ml-seq-bar { align-self: end; }
/* equal-width synth voice selector, inline in the transport row */
.ml-synth-seg button { min-width: 52px; text-align: center; justify-content: center; }
.ml-seq-rowlab {
  grid-column: 1; display: flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ml-d-muted); padding-right: 6px; position: sticky; left: 0;
  background: var(--ml-d-surface); z-index: 2;
}
.ml-seq-rowlab .ml-tick { background: var(--ml-accent); }
.ml-lane-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* per-track mute / solo (DAW-style) */
.ml-lane-ms { display: inline-flex; gap: 2px; flex: none; }
.ml-ms {
  width: 15px; height: 15px; border-radius: 3px; border: 1px solid var(--ml-d-hair);
  background: var(--ml-d-card); color: var(--ml-d-muted); cursor: pointer;
  font-size: 9px; font-weight: 700; line-height: 1; display: grid; place-items: center; padding: 0;
}
.ml-ms:hover { color: var(--ml-d-text); border-color: var(--ml-d-muted); }
.ml-m.on { background: var(--ml-kick); border-color: var(--ml-kick); color: #fff; }
.ml-s.on { background: var(--ml-hat); border-color: var(--ml-hat); color: #10222a; }
.ml-seq-bar {
  display: flex; align-items: center; justify-content: flex-start; padding-left: 3px;
  font-size: 10px; color: var(--ml-d-muted); border-left: 1px solid var(--ml-d-hair);
}
.ml-lane-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.lane-kick  .ml-lane-dot { background: var(--ml-kick); }
.lane-snare .ml-lane-dot { background: var(--ml-snare); }
.lane-hat   .ml-lane-dot { background: var(--ml-hat); }
.lane-clap  .ml-lane-dot { background: var(--ml-clap); }
.lane-perc  .ml-lane-dot { background: var(--ml-perc); }
.ml-lane-dl {
  margin-left: auto; border: 0; background: transparent; color: var(--ml-d-muted);
  cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px;
}
.ml-lane-dl:hover { color: var(--ml-accent); }

/* chord lane */
.ml-seq-chord {
  display: flex; align-items: stretch; border-radius: 3px; overflow: hidden;
  background: var(--ml-d-card); border: 1px solid var(--ml-d-hair); min-width: 0;
}
.ml-seq-chord.empty {
  display: grid; place-items: center; color: var(--ml-d-muted);
  background: #1f2229; border-style: dashed; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.ml-seq-chord.empty:hover { color: var(--ml-accent); border-color: var(--ml-accent); }
.ml-seq-chord.editing { box-shadow: 0 0 0 2px var(--ml-playhead); border-color: var(--ml-playhead); }
.ml-seq-chord-core {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 2px 6px; gap: 0;
}
.ml-seq-chord-num { font-size: 13px; font-weight: 700; color: var(--ml-d-text); }
.ml-seq-chord-nm { font-size: 9px; color: var(--ml-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ml-seq-chord-x {
  flex: none; border: 0; background: transparent; color: var(--ml-d-muted);
  cursor: pointer; padding: 0 5px; font-size: 13px;
}
.ml-seq-chord-x:hover { color: var(--ml-kick); }
.ml-seq-chord[data-family="major"]   { border-left: 2px solid var(--ml-accent); }
.ml-seq-chord[data-family="minor"]   { border-left: 2px solid var(--ml-hat); }
.ml-seq-chord[data-family="major-alt"]{ border-left: 2px solid var(--ml-snare); }
.ml-seq-chord[data-family="other"]   { border-left: 2px solid var(--ml-clap); }

/* in-sequencer chord editor — a popover that expands from the clicked chord */
.ml-seq-sec-rel { position: relative; }
.ml-seq-pop {
  position: absolute; z-index: 20; width: 300px; max-width: 86vw;
  background: var(--ml-d-card); border: 1px solid var(--ml-playhead);
  border-radius: 4px; padding: 9px 10px; box-shadow: 0 14px 38px -10px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 7px;
}
.ml-pop-head { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ml-playhead); }
.ml-pop-acts { display: inline-flex; gap: 6px; }
.ml-pop-x { border: 0; background: transparent; color: var(--ml-d-muted); cursor: pointer; font-size: 10px; font-weight: 700; padding: 0; }
.ml-pop-x:hover { color: var(--ml-d-text); }
.ml-pop-row { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 6px; }
.ml-pop-lab { font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ml-d-muted); }
.ml-pop-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ml-pop-chips.degs { display: grid; grid-template-columns: repeat(7, 1fr); }
.ml-pop-chip {
  display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center;
  background: var(--ml-d-card-2); border: 1px solid var(--ml-d-hair); border-radius: 3px;
  padding: 4px 3px; cursor: pointer; font-size: 11px; color: var(--ml-d-text); transition: border-color .12s, background .12s;
}
.ml-pop-chip.sm { padding: 3px 7px; }
.ml-pop-chip:hover { border-color: var(--ml-accent); }
.ml-pop-chip.sel { border-color: var(--ml-playhead); background: var(--ml-accent-soft); }
.ml-pop-nm { font-size: 8px; color: var(--ml-d-muted); }
.ml-pop-chip[data-family="major"]    { border-left: 2px solid var(--ml-accent); }
.ml-pop-chip[data-family="minor"]    { border-left: 2px solid var(--ml-hat); }
.ml-pop-chip[data-family="major-alt"]{ border-left: 2px solid var(--ml-snare); }
.ml-pop-chip[data-family="other"]    { border-left: 2px solid var(--ml-clap); }

/* drum step cells */
.ml-cell {
  background: var(--ml-d-step); border-radius: 2px; cursor: pointer; min-width: 8px;
  transition: background .08s, box-shadow .08s;
}
.ml-cell.beat { background: var(--ml-d-step-beat); }
.ml-cell.barstart { box-shadow: inset 1px 0 0 var(--ml-d-hair); }
.ml-cell:hover { box-shadow: inset 0 0 0 1px var(--ml-d-muted); }
.ml-cell.lane-kick.on  { background: var(--ml-kick); }
.ml-cell.lane-snare.on { background: var(--ml-snare); }
.ml-cell.lane-hat.on   { background: var(--ml-hat); }
.ml-cell.lane-clap.on  { background: var(--ml-clap); }
.ml-cell.lane-perc.on  { background: var(--ml-perc); }
.ml-cell.on { opacity: .92; }
.ml-cell.acc { opacity: 1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); }

/* the single playhead */
.ml-playhead {
  position: absolute; top: 0; bottom: 4px; left: 0; width: 2px;
  background: var(--ml-playhead); box-shadow: 0 0 5px rgba(151,156,228,.55);
  pointer-events: none; opacity: 0; z-index: 3; will-change: transform;
}
.ml-seq-foot { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ── §4.7 Spectrum ──────────────────────────────────────────────────────── */
.ml-a4-lab { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--ml-d-muted); padding: 0 4px 0 2px; align-self: center; }
.ml-sp-formula { font-size: 10px; color: var(--ml-d-muted); }
/* Spectrum — drawn at its real pixel width (no stretch); frequency axis below. */
.ml-sp-wrap { position: relative; padding: 4px; overflow: hidden; }
.ml-spectrum { display: block; height: auto; }
.ml-sp-canvas { position: absolute; left: 4px; top: 4px; pointer-events: none; }
.ml-sp-oct { stroke: var(--ml-d-hair); stroke-width: 1; }
.ml-sp-axname { text-anchor: middle; font-size: 9px; fill: var(--ml-d-text); font-family: "JetBrains Mono", monospace; }
.ml-sp-hz { text-anchor: middle; font-size: 8px; fill: var(--ml-d-muted); font-family: "JetBrains Mono", monospace; }
.ml-sp-band { fill: #1f2229; }
.ml-sp-band.alt { fill: #23262e; }
.ml-sp-bandlab { text-anchor: middle; font-size: 8px; letter-spacing: .1em; fill: var(--ml-d-muted); }
.ml-sp-tick { stroke: var(--ml-d-muted); stroke-width: 1.2; cursor: pointer; }
.ml-sp-tick:hover { stroke: var(--ml-d-text); }
.ml-sp-tick.tonic { stroke: var(--ml-accent); stroke-width: 2; }
.ml-sp-tonic { text-anchor: middle; font-size: 9px; fill: var(--ml-accent); font-family: "JetBrains Mono", monospace; }

/* =============================================================================
   §141 TLR Studio upgrades — Circle-as-key (top-left), at-rest chord legibility,
   in-place chord editor (no overlay) + piano-roll, 4-method BPM tool.
============================================================================= */

/* ── B2 Circle top-left: two-column chrome (Circle | Chords palette) ──────── */
.ml-chrome-main {
  display: grid;
  grid-template-columns: minmax(210px, 264px) 1fr;
  gap: clamp(10px, 1.6vw, 16px);
  align-items: start;
}
@media (max-width: 720px) { .ml-chrome-main { grid-template-columns: 1fr; } }
.ml-chrome-left, .ml-chrome-right { min-width: 0; }
.ml-circle-tag {
  font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 600;
  letter-spacing: .04em; color: var(--ml-text-2);
}
.ml-circle-hint { margin: 7px 2px 0; font-size: 10px; line-height: 1.4; color: var(--ml-text-2); }
.ml-circle-hint b { color: var(--ml-accent); font-weight: 700; }

/* ── B5 at-rest chord legibility: inversion badge + slash-bass on the cell.
      2026-07-08: the badge is now a BUTTON (always visible, cycles the
      inversion on click) — the emphasized/accessible inversion control. ────── */
.ml-seq-chord { position: relative; }
.ml-seq-chord-inv {
  position: absolute; top: 2px; right: 17px; z-index: 2;
  font-family: "JetBrains Mono", monospace; font-size: 8.5px; font-weight: 700;
  line-height: 1; padding: 2px 4px; border-radius: 3px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--ml-playhead) 40%, transparent);
  background: color-mix(in srgb, var(--ml-playhead) 14%, transparent);
  color: var(--ml-d-muted); transition: all .12s;
}
.ml-seq-chord-inv:hover { color: #fff; border-color: var(--ml-playhead); }
.ml-seq-chord-inv.set { background: var(--ml-playhead); border-color: var(--ml-playhead); color: #14121f; }
.ml-seq-chord-slash { color: var(--ml-playhead); font-weight: 700; }

/* ── Chord REGIONS (2026-07-08) — Logic-style move/resize on the chord lane ── */
.ml-seq-chord:not(.empty) { cursor: grab; touch-action: none; }
.ml-seq-chord:not(.empty):active { cursor: grabbing; }
.ml-seq-chord.short .ml-seq-chord-nm { display: none; }   /* half-bar blocks stay legible */
.ml-seq-chord-rsz {
  position: absolute; top: 0; bottom: 0; right: 0; width: 8px; z-index: 2;
  cursor: ew-resize; border-radius: 0 3px 3px 0;
}
.ml-seq-chord-rsz::after {
  content: ""; position: absolute; top: 25%; bottom: 25%; right: 2.5px; width: 2px;
  border-radius: 2px; background: var(--ml-d-hair); opacity: .7;
}
.ml-seq-chord-rsz:hover::after { background: var(--ml-playhead); opacity: 1; }
.ml-seq-chord-x { margin-right: 8px; }

/* ── seq ↔ editor drag divider (2026-07-08) ─────────────────────────────── */
.ml-col-resize { display: none; flex: none; height: 7px; cursor: row-resize;
  background: var(--ml-panel); position: relative; z-index: 4; }
.ml-col-resize.active { display: block; }
.ml-col-resize.spec { display: block; height: auto; background: var(--ml-panel);
  border-top: 1px solid var(--ml-divider); border-bottom: 1px solid var(--ml-divider); }
.ml-col-resize::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 3px;
  transform: translate(-50%, -50%); border-radius: 2px; background: var(--ml-hair);
}
.ml-col-resize:hover::after, .ml-col-resize.drag::after { background: var(--ml-accent); }

/* ── B6 in-place chord editor — its OWN grid row; drums fall below it ──────── */
.ml-seq-editrow { min-width: 0; }
.ml-seq-editor {
  position: sticky; left: 0; z-index: 5;
  width: min(720px, 94vw); margin: 4px 0 2px;
  background: var(--ml-d-card); border: 1px solid var(--ml-playhead);
  border-radius: 4px; padding: 10px 12px 12px;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.55);
}
.ml-edit-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ml-edit-title { font-size: 11px; letter-spacing: .04em; color: var(--ml-d-text); }
.ml-edit-title b { color: var(--ml-playhead); font-weight: 800; }
.ml-edit-acts { display: inline-flex; gap: 8px; }
.ml-edit-axis + .ml-edit-axis, .ml-edit-split { margin-top: 10px; }
.ml-edit-axislab {
  display: block; margin-bottom: 5px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ml-d-muted);
}
.ml-edit-axislab em {
  font-style: normal; font-weight: 600; letter-spacing: .02em;
  color: var(--ml-faint); text-transform: none; margin-left: 5px;
}
.ml-edit-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ml-edit-chips.degs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ml-edit-split {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 14px; align-items: start;
}
@media (max-width: 560px) { .ml-edit-split { grid-template-columns: 1fr; } }
.ml-edit-side { display: flex; flex-direction: column; gap: 10px; }
.ml-edit-qtray { display: flex; flex-direction: column; gap: 3px; }
.ml-edit-qgroup { display: grid; grid-template-columns: 58px 1fr; align-items: baseline; gap: 7px; padding: 2px 0; }
.ml-edit-qgroup + .ml-edit-qgroup { border-top: 1px solid var(--ml-d-hair); }
.ml-edit-qcat {
  font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ml-faint); padding-top: 4px;
}
.ml-edit-qchips { display: flex; flex-wrap: wrap; gap: 4px; }
/* editor chips read on the dark engine surface */
.ml-seq-editor .ml-qchip { background: var(--ml-d-card-2); border-color: var(--ml-d-hair); color: var(--ml-d-text); }
.ml-seq-editor .ml-qchip:hover { border-color: var(--ml-accent); }
.ml-seq-editor .ml-qchip.active { background: var(--ml-accent); border-color: var(--ml-accent); color: #fff; }
.ml-qchip.sm { padding: 2px 7px; font-size: 10px; }
/* Inversion — the EMPHASIZED axis (2026-07-08): big chips, playhead identity,
   mirroring the always-visible cycle badge on the chord block itself. */
.ml-edit-inv .ml-qchip.inv { padding: 5px 14px; font-size: 11.5px; font-weight: 700; }
.ml-seq-editor .ml-qchip.inv.active {
  background: var(--ml-playhead); border-color: var(--ml-playhead); color: #14121f;
  box-shadow: none;
}

/* B7 inversion piano-roll — SEE the voicing (lit keys = chord tones, bass distinct) */
.ml-edit-roll { background: #1b1e24; border: 1px solid var(--ml-d-hair); border-radius: 4px; padding: 6px; overflow-x: auto; }
.ml-roll { display: block; height: 60px; width: auto; max-width: 100%; }
.ml-roll-w { fill: #d7d8de; stroke: #44464d; stroke-width: .75; }
.ml-roll-b { fill: #2a2a30; stroke: #14151a; stroke-width: .75; }
.ml-roll-w.on { fill: var(--ml-tier-scale-fill); stroke: var(--ml-accent); stroke-width: 1; }
.ml-roll-b.on { fill: var(--ml-accent); stroke: var(--ml-playhead); }
.ml-roll-w.bass { fill: var(--ml-accent); stroke: var(--ml-playhead); stroke-width: 1; }
.ml-roll-b.bass { fill: var(--ml-playhead); stroke: #fff; }
.ml-roll-lab { text-anchor: middle; pointer-events: none; font-family: "JetBrains Mono", monospace; font-size: 7px; font-weight: 700; fill: var(--ml-accent); }
.ml-roll-lab.blk, .ml-roll-lab.bass { fill: #fff; }

/* ── B8 four-method BPM tool: stepper + keyboard input + (expand) slider + tap ─ */
.ml-tempo-input {
  width: 46px; text-align: center;
  background: var(--ml-d-card); color: var(--ml-d-text);
  border: 1px solid var(--ml-d-hair); border-radius: 3px;
  font-size: 15px; font-weight: 700; padding: 2px; line-height: 1;
  -moz-appearance: textfield;
}
.ml-tempo-input:focus { outline: none; border-color: var(--ml-accent); }
.ml-tempo-input::-webkit-outer-spin-button,
.ml-tempo-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ml-tempo-expand {
  width: 24px; height: 22px; border-radius: 3px;
  border: 1px solid var(--ml-d-hair); background: var(--ml-d-card);
  color: var(--ml-d-muted); cursor: pointer; font-size: 13px; line-height: 1;
}
.ml-tempo-expand:hover { border-color: var(--ml-accent); color: var(--ml-d-text); }
.ml-tempo-expand.open { border-color: var(--ml-playhead); color: #fff; background: var(--ml-accent); }
.ml-tempo-panel {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -2px 0 8px; padding: 7px 12px;
  background: #1f2229; border: 1px solid var(--ml-d-hair); border-radius: 4px;
}
.ml-tempo-panel-lab { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ml-d-muted); }
.ml-tempo-slider { flex: 1 1 180px; min-width: 140px; accent-color: var(--ml-accent); height: 4px; }
.ml-tempo-slider-val { font-size: 13px; font-weight: 700; color: var(--ml-d-text); min-width: 30px; text-align: center; }
.ml-tempo-hint { font-size: 9px; color: var(--ml-d-muted); }

/* ============================================================================
   §v3 (2026-07-04) — single-screen DAW component styles. Later rules override
   the earlier (v1/v2) layout assumptions where reused.
============================================================================ */

/* ── Sequencer panel: header config segs + a scrolling grid area ─────────── */
.ml-seq-cfg { display: inline-flex; gap: 6px; align-items: center; }
.ml-seq-cfg .ml-seg button { font-size: 10px; padding: 3px 7px; }
.ml-seq-loaded { font-size: 10px; color: var(--ml-accent); font-weight: 600; margin-right: auto; }
.ml-seq-sec-rel .ml-sec-aux { flex-wrap: wrap; justify-content: flex-end; }
.ml-seq-scroll { flex: 1; min-height: 0; overflow: auto; margin-top: 2px; }
.ml-seq-foot { flex: none; }

/* ── Editor pane — collapses to just its header until opened ─────────────── */
.ml-editor-caret { border: 0; background: transparent; color: var(--ml-text-2); cursor: pointer; font-size: 11px; padding: 0 2px; line-height: 1; }
.ml-editor-caret:hover { color: var(--ml-text); }
.ml-editor-hint { margin-left: auto; font-size: 9px; color: var(--ml-faint); font-style: italic; }
.ml-editor-body { flex: 1; min-height: 0; display: flex; margin-top: 3px; }
.ml-editor-body > * { flex: 1; min-height: 0; }
#ml-roll-sec { overflow: hidden; }
.ml-roll-empty { display: grid; place-items: center; height: 100%; color: var(--ml-faint); font-size: 12px; text-align: center; padding: 20px; }
#ml-ref-sec { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* ── Real piano roll (HTML) — 130px keyboard gutter (= SEQ_LAB) so it aligns
      under the sequencer; notes are horizontal bars by pitch (Y) × time (X). ── */
.ml-pr { display: grid; grid-template-columns: 130px 1fr; height: 100%; background: var(--ml-well);
  border-radius: 4px; box-shadow: var(--ml-inset); overflow: hidden; }
.ml-pr-keys { display: flex; flex-direction: column; border-right: 1px solid #0c0d10; }
.ml-pr-key { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: flex-end;
  padding-right: 5px; font-family: "JetBrains Mono", monospace; font-size: 7px; font-weight: 700; }
.ml-pr-key.w { background: #cfd1d7; color: #14161a; box-shadow: inset 0 -1px 0 #a9abb2; }
.ml-pr-key.b { background: #23252b; color: #6a6d74; box-shadow: inset 0 -1px 0 #16171b; }
.ml-pr-body { position: relative; }
.ml-pr-lanes { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ml-pr-lane { flex: 1; min-height: 0; }
.ml-pr-lane.w { background: #202127; } .ml-pr-lane.b { background: #191a1f; }
.ml-pr-notes { position: absolute; inset: 0; }
.ml-pr-div { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.1); }
.ml-pr-note { position: absolute; background: var(--ml-accent); border: 1px solid #9a98ff; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.4); display: flex; align-items: center; overflow: hidden; box-sizing: border-box; }
.ml-pr-note.bass { background: var(--ml-cyan); border-color: #b6f2fa; }
.ml-pr-note span { font-family: "JetBrains Mono", monospace; font-size: 8px; font-weight: 700; color: #10121a; padding-left: 4px; }

/* ── Instrument — THE visual-priority panel ([RYDER-VERDICT] 2026-07-08):
      fills the right rail, big controls. Identity is indigo (the green-LCD
      look is out); screens are neutral graphite. ─────────────────────────── */
.ml-inst-wave { font-size: 8px; color: var(--ml-faint); text-transform: uppercase; letter-spacing: .12em; }
.ml-inst-panel { min-height: 0; }



/* the envelope screen — neutral graphite display, grows with the panel */
.ml-inst-screen { position: relative; flex: 1; min-height: 56px; max-height: none;
  background: #0d0e12; border: 1px solid #23252c; border-radius: 3px;
  margin-bottom: 8px; box-shadow: inset 0 1px 3px rgba(0,0,0,.55); overflow: hidden; }
.ml-inst-adsr { position: absolute; inset: 0; width: 100%; height: 100%; }
.ml-adsr-line { fill: none; stroke: var(--ml-playhead); stroke-width: 1.5; filter: drop-shadow(0 0 2px rgba(125,130,216,.3)); vector-effect: non-scaling-stroke; }
.ml-inst-screen-lab { position: absolute; top: 4px; left: 6px; font-size: 7.5px; letter-spacing: .12em; color: #4a4e59; }
/* knobs — big enough to actually use */
.ml-inst-knobs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 6px; align-content: start; flex: none; }
.ml-knob { display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: ns-resize; user-select: none; touch-action: none;
  padding: 6px 2px 5px; border-radius: 3px; background: var(--ml-well); box-shadow: var(--ml-inset); }
.ml-knob-svg { width: 48px; height: 43px; display: block; }
.ml-knob-track { fill: none; stroke: #3a3d45; stroke-width: 3; stroke-linecap: round; }
.ml-knob-val { fill: none; stroke: var(--ml-accent); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(125,130,216,.3)); }
.ml-knob-cap { fill: #212329; stroke: #0f1114; stroke-width: 1; }
.ml-knob-ptr { stroke: #eceef2; stroke-width: 1.6; stroke-linecap: round; }
.ml-knob-val-t { font-size: 10.5px; font-weight: 700; color: var(--ml-text); }
.ml-knob-lab { font-size: 8px; font-weight: 700; letter-spacing: .08em; color: var(--ml-faint); }
/* draggable roll notes */
.ml-pr-note { cursor: ns-resize; }
.ml-pr-note.dragging { z-index: 5; filter: brightness(1.15); }

/* ── Browser v3 (left rail, 2026-07-08) — Progressions | Patterns, search,
      MECE facet rows, genre-grouped list. Sized to be READ, not squinted at. ── */
.ml-browser-panel { }
.ml-brz-count { margin-left: auto; font-size: 8.5px; color: var(--ml-faint); }
/* search box */
.ml-brz-q { width: 100%; box-sizing: border-box; margin: 0 0 6px; padding: 5px 9px;
  font-size: 11.5px; color: var(--ml-text); background: var(--ml-well);
  border: 1px solid var(--ml-hair); border-radius: 4px; box-shadow: var(--ml-inset); }
.ml-brz-q:focus { outline: none; border-color: var(--ml-accent); box-shadow: var(--ml-inset), 0 0 0 2px color-mix(in srgb, var(--ml-accent) 22%, transparent); }
.ml-brz-q::placeholder { color: var(--ml-faint); }
/* MECE facet rows — GENRE (exclusive family) + MOOD/FEEL (orthogonal) */
.ml-brz-facets { display: flex; flex-direction: column; gap: 3px; margin: 0 0 7px; flex: none; }
.ml-brz-facet { display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; }
.ml-brz-facet-lab { flex: none; width: 32px; font-size: 7px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ml-faint); }
.ml-brz-fchip { font: inherit; font-size: 9.5px; font-weight: 600; color: var(--ml-text-2);
  background: transparent; border: 1px solid transparent; border-radius: 3px; padding: 2px 8px; cursor: pointer; transition: all .13s; }
.ml-brz-fchip:hover { color: var(--ml-text); background: rgba(255,255,255,.05); }
.ml-brz-fchip.active, .ml-brz-fchip.g.active, .ml-brz-fchip.o.active { color: #fff; background: var(--ml-accent); }
/* the list — larger rows, genre group headers, roomy scroll area */
.ml-brz-list { flex: 1; min-height: 120px; overflow-y: auto; overflow-x: hidden; padding: 3px; display: block; }
.ml-brz-genre { display: flex; align-items: center; gap: 5px; font-size: 7.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ml-faint); padding: 7px 7px 2px; }
.ml-brz-genre:first-child { padding-top: 3px; }
.ml-brz-none { padding: 14px 8px; font-size: 10.5px; color: var(--ml-faint); text-align: center; }
.ml-brz-gdot { flex: none; width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.ml-brz-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; column-gap: 7px;
  align-items: baseline; text-align: left; border: 0; background: transparent; color: var(--ml-text); font: inherit;
  padding: 5px 8px; border-radius: 3px; cursor: pointer; transition: background .1s; }
.ml-brz-row:hover { background: rgba(255,255,255,.055); }
.ml-brz-row.sel { background: rgba(125,130,216,.14); box-shadow: inset 2px 0 0 var(--ml-accent); }
.ml-brz-c-name { grid-column: 1; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-brz-row.prog .ml-brz-c-name { color: var(--ml-accent); font-size: 12px; letter-spacing: .02em; }
.ml-brz-row.live .ml-brz-c-name::after { content: "●"; margin-left: 5px; font-size: 7px; color: var(--ml-clap); vertical-align: 2px; }
.ml-brz-c-bpm { grid-column: 2; grid-row: 1; font-size: 10px; color: var(--ml-faint); }
.ml-brz-c-sub { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px;
  font-size: 8.5px; color: var(--ml-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Circle panel (top-left) + scale-mode tray ──────────────────────────── */
.ml-circle-panel { flex: none; }
.ml-wheel-wrap { padding: 3px; display: flex; justify-content: center; }
.ml-wheel { width: 100%; max-width: 188px; height: auto; display: block; }
.ml-circle-tag { font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 600; color: var(--ml-text-2); }

/* ── Scale bar (inside editor's Scale tab) ──────────────────────────────── */
.ml-scale-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: none; margin-bottom: 6px; }
.ml-scale-legend .ml-tier-legend { padding: 0; }
.ml-board-wrap { flex: 1; min-height: 0; overflow: auto; }

/* ── Chords panel (right rail) — a compact VERTICAL list of 7 diatonic chords ─ */
#ml-chords-sec .ml-sec { flex: 1; min-height: 0; }
#ml-chords-sec .ml-well { padding: 0; overflow: auto; flex: 1; min-height: 0; }
#ml-chords-sec .ml-chord-track { flex-direction: column; height: 100%; }
#ml-chords-sec .ml-chord-cell { flex: 1; min-height: 0; flex-direction: row; align-items: center; gap: 6px; padding: 4px 8px; text-align: left; }
#ml-chords-sec .ml-chord-cell + .ml-chord-cell { border-left: 0; border-top: 1px solid var(--ml-hair); }
#ml-chords-sec .ml-chord-pick { flex-direction: row; align-items: baseline; gap: 7px; width: auto; flex: 1; min-width: 0; }
#ml-chords-sec .ml-chord-num { font-size: 14px; min-width: 24px; }
#ml-chords-sec .ml-chord-name { font-size: 12px; }
#ml-chords-sec .ml-chord-notes { font-size: 8.5px; margin-left: auto; }
#ml-chords-sec .ml-chord-ops { margin-top: 0; flex: none; gap: 3px; }
#ml-chords-sec .ml-chord-q, #ml-chords-sec .ml-chord-send { padding: 2px 5px; font-size: 9px; }

/* ── Spectrum bridge (bottom) — taller, analyzer identity ───────────────── */
#ml-spectrum-sec { min-height: 0; display: flex; }
#ml-spectrum-sec > .ml-sec { flex: 1; min-height: 0; }
#ml-spectrum-sec .ml-sec { padding-bottom: 6px; }
.ml-sp-wrap { flex: 1; min-height: 0; padding: 0; overflow: hidden; }
.ml-spectrum { display: block; width: 100%; height: auto; }
.ml-sp-band { fill: rgba(255,255,255,.02); } .ml-sp-band.alt { fill: rgba(255,255,255,.035); }

/* ============================================================================
   §2026-07-08 control-surface polish pass — material, feedback, density.
============================================================================ */

/* thin, quiet scrollbars everywhere inside the rack */
.ml ::-webkit-scrollbar { width: 9px; height: 9px; }
.ml ::-webkit-scrollbar-track { background: transparent; }
.ml ::-webkit-scrollbar-thumb { background: #383b44; border-radius: 3px;
  border: 2.5px solid transparent; background-clip: padding-box; }
.ml ::-webkit-scrollbar-thumb:hover { background-color: #4a4e59; background-clip: padding-box; }
.ml ::-webkit-scrollbar-corner { background: transparent; }

/* section headers — a notch up from squint-size, still quiet */
.ml-sec .ml-sec-label { font-size: 8px; letter-spacing: .18em; }
.ml-sec .ml-tick { height: 10px; }

/* segmented controls press like hardware */
.ml-seg button:active { transform: translateY(0.5px); }
.ml-seg button.active { box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05); }
.ml-chip:active, .ml-qchip:active, .ml-brz-fchip:active, .ml-brz-mchip:active { transform: translateY(0.5px); }

/* chord regions — real material (top-light gradient) + hover affordance */
.ml-seq-chord:not(.empty) {
  background: #2e3037;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.03);
}
.ml-seq-chord:not(.empty):hover { border-color: #4a4e59; }
.ml-seq-chord.editing:not(.empty):hover { border-color: var(--ml-playhead); }
.ml-seq-chord.empty { transition: color .12s, border-color .12s, background .12s; }
.ml-seq-chord.empty:hover { background: #232732; }

/* the circle: sized for legible key letters — 27px majors / 18px minors at a
   240px render ≈ 16px / 11px effective, actually readable */
.ml-wheel { max-width: 240px; }

/* Right rail 2026-07-08: INSTRUMENT grows (visual priority); CHORDS is the
   compact bottom-right corner — dense rows, natural height, out of the line
   of sight. */
#ml-chords-sec { flex: none; }
#ml-chords-sec .ml-sec { flex: none !important; min-height: 0; }
#ml-chords-sec .ml-well { flex: none; overflow: visible; }
#ml-chords-sec .ml-chord-track { height: auto; }
#ml-chords-sec .ml-chord-cell { flex: none; padding: 4px 8px; gap: 6px; }
#ml-chords-sec .ml-chord-num { font-size: 12.5px; min-width: 28px; }
#ml-chords-sec .ml-chord-name { font-size: 11.5px; }
#ml-chords-sec .ml-chord-notes { font-size: 8.5px; }
#ml-chords-sec .ml-chord-q, #ml-chords-sec .ml-chord-send { padding: 2px 5px; font-size: 9px; }

/* chords quality-depth seg — its own full-width row under the header */
.ml-chords-ext { flex: none; margin: 1px 0 5px; }
.ml-chords-ext .ml-seg { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; }
.ml-chords-ext .ml-seg button { padding: 3px 1px; text-align: center; font-size: 9.5px; }

/* ── Instrument 2026-07-08: full A·D·S·R knob row · Serum-style OCT · level BAR ── */
.ml-inst-knobs.adsr { grid-template-columns: repeat(4, 1fr); gap: 5px; }
.ml-inst-knobs.adsr .ml-knob { padding: 3px 1px 3px; }
.ml-inst-knobs.adsr .ml-knob-svg { width: 38px; height: 35px; }
.ml-inst-bottom { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: stretch; margin-top: 7px; flex: none; }
/* small Serum-style knob: big flat cap, arc hugging it, edge-pointer */
.ml-knob.sm { padding: 4px 6px 3px; }
.ml-knob.sm .ml-knob-svg { width: 32px; height: 29px; }
.ml-knob.sm .ml-knob-cap { fill: #212329; stroke: #0f1114; }
.ml-knob.sm .ml-knob-track { stroke-width: 2.2; }
.ml-knob.sm .ml-knob-val { stroke-width: 2.2; }
.ml-knob.sm .ml-knob-ptr { stroke-width: 1.4; }
.ml-knob.sm .ml-knob-val-t { font-size: 9px; }
.ml-knob.sm .ml-knob-lab { font-size: 7px; }
/* level as a fader bar, not a knob — indigo fill (no green) */
.ml-inst-level { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 3px; background: var(--ml-well); box-shadow: var(--ml-inset);
  cursor: ew-resize; user-select: none; touch-action: none; }
.ml-inst-level-lab { font-size: 7.5px; font-weight: 700; letter-spacing: .08em; color: var(--ml-faint); }
.ml-inst-level-track { position: relative; height: 10px; border-radius: 2px; background: #14161b;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55); }
.ml-inst-level-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--ml-accent-2), var(--ml-accent)); box-shadow: 0 0 4px -1px rgba(125,130,216,.35); }
.ml-inst-level-zero { position: absolute; top: -2px; bottom: -2px; width: 1px; background: rgba(255,255,255,.3); }
.ml-inst-level-val { font-size: 10px; font-weight: 700; color: var(--ml-text); min-width: 38px; text-align: right; }

/* lane labels read whole — no ellipses (SEQ_LAB widened to fit them) */
.ml-seq-rowlab .ml-lane-name { overflow: visible; text-overflow: clip; }

/* ── TLR·1 — the user-tunable synth panel (KB #284) ─────────────────────── */
.ml-inst-init { margin-left: 6px; border: 1px solid var(--ml-hair); background: var(--ml-raised);
  color: var(--ml-text-2); font: inherit; font-size: 8px; font-weight: 700; letter-spacing: .1em;
  border-radius: 3px; padding: 2px 6px; cursor: pointer; transition: all .13s; }
.ml-inst-init:hover { color: var(--ml-text); border-color: var(--ml-accent); }
.ml-tlr-sec { flex: none; margin-top: 7px; }
.ml-tlr-lab { display: block; margin: 0 1px 4px; font-size: 7.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ml-faint); }
.ml-tlr-seg { display: grid; width: 100%; margin-bottom: 5px; }
.ml-tlr-seg.w4 { grid-template-columns: repeat(4, 1fr); }
.ml-tlr-seg.w3 { grid-template-columns: repeat(3, 1fr); }
.ml-tlr-seg button { padding: 4px 2px; text-align: center; font-size: 10px; }
.ml-inst-knobs.three { grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ml-inst-knobs.three .ml-knob-svg { width: 42px; height: 38px; }
.ml-inst-knobs.three .ml-knob { padding: 3px 1px 3px; }
.ml-inst-knobs.two { grid-template-columns: repeat(2, 1fr); gap: 5px; }
.ml-inst-knobs.two .ml-knob-svg { width: 42px; height: 38px; }
.ml-inst-knobs.two .ml-knob { padding: 3px 1px 3px; }
.ml-inst-screen { min-height: 44px; }
/* type-scale normalization (KB #285 — congruent controls) */
.ml-seg button { font-size: 10.5px; }
.ml-chip { font-size: 10.5px; }
.ml-knob-lab { font-size: 7.5px; }
.ml-knob-val-t { font-size: 10px; }

/* ── TLR·1 Serum-reference anatomy (KB #286) ────────────────────────────── */
/* the LED in the module header (tied to engine power) */
.ml-led { width: 7px; height: 7px; border-radius: 50%; background: #33363d;
  border: 1px solid #14151a; display: inline-block; }
.ml-led.on { background: var(--ml-green); box-shadow: 0 0 5px rgba(92,184,126,.6); }
/* the hero waveform waterfall display */
.ml-inst-screen.wt { flex: 1; min-height: 96px; max-height: 220px; margin: 5px 0 0; }
.ml-wt { position: absolute; inset: 0; width: 100%; height: 100%; }
.ml-wt-grid { stroke: #23262b; stroke-width: 1; }
.ml-wt-front { stroke: #dce27a; stroke-width: 1.8; filter: drop-shadow(0 0 3px rgba(220,226,122,.35)); }
.ml-wt-back { stroke: #74a862; stroke-width: 1.1; }
/* Serum-style draggable value cells: OCT | UNI | DET */
.ml-vcells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 5px 0 0; flex: none; }
.ml-vcell { display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 3px 8px; background: #0d0e12; border: 1px solid #23252c; border-radius: 3px;
  cursor: ns-resize; user-select: none; touch-action: none; }
.ml-vcell:hover { border-color: var(--ml-accent); }
.ml-vcell-k { font-size: 7.5px; font-weight: 700; letter-spacing: .1em; color: var(--ml-faint); }
.ml-vcell-v { font-size: 11px; font-weight: 700; color: var(--ml-text); }
/* knobs: big dark Serum caps, thin accent tick, quiet arc */
.ml-knob { background: transparent; box-shadow: none; }
.ml-knob-cap { fill: #1d1e23; stroke: #0b0c0e; stroke-width: 1.5; }
.ml-knob-track { stroke: #2c2e35; stroke-width: 2.4; }
.ml-knob-val { stroke: var(--ml-accent); stroke-width: 2.4; filter: none; }
.ml-knob-ptr { stroke: #dfe3ec; stroke-width: 1.8; }

/* wavetable bar — ◀ BASIC SHAPES · FRAME ▶ */
.ml-wtbar { display: grid; grid-template-columns: auto 1fr auto; gap: 4px; align-items: stretch; flex: none; }
.ml-wtbar-btn { border: 1px solid var(--ml-hair); background: var(--ml-raised); color: var(--ml-text-2);
  font: inherit; font-size: 9px; border-radius: 3px; padding: 4px 8px; cursor: pointer; transition: all .13s; }
.ml-wtbar-btn:hover { color: var(--ml-text); border-color: var(--ml-accent); }
.ml-wtbar-btn:active { transform: translateY(0.5px); }
.ml-wtbar-name { display: flex; align-items: center; justify-content: center;
  background: #0d0e12; border: 1px solid #23252c; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--ml-text-2); }
.ml-vcells.w4 { grid-template-columns: repeat(4, 1fr); }
.ml-vcells.w4 .ml-vcell { padding: 4px 6px; }
.ml-vcells.w4 .ml-vcell-v { font-size: 10px; }

.ml-vcells.w2 { grid-template-columns: repeat(2, 1fr); }
.ml-inst-knobs.osc { margin-top: 5px; }

/* ── bounded synth modules (Serum reference): header strip + inset body ── */
.ml-inst-panel { overflow-y: auto; }
.ml-tlr-mod { flex: none; margin-top: 5px; border: 1px solid #2e3036; border-radius: 3px;
  background: #1e1f23; overflow: hidden; }
.ml-tlr-mod-head { display: flex; align-items: center; padding: 2px 7px;
  background: #26272c; border-bottom: 1px solid #2e3036;
  font-size: 7.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ml-text-2); }
.ml-tlr-mod-body { padding: 4px 5px 5px; }
.ml-tlr-mod.grow { display: flex; flex-direction: column; flex: 1; min-height: max-content; }
.ml-tlr-mod.grow .ml-tlr-mod-body { flex: 1; display: flex; flex-direction: column; }
.ml-tlr-mod .ml-inst-screen.wt { margin: 4px 0 0; min-height: 76px; }
.ml-tlr-mod .ml-vcells { margin-top: 5px; }
.ml-tlr-mod .ml-inst-knobs { margin-top: 2px; }
.ml-tlr-mod .ml-tlr-seg { margin-bottom: 0; }
/* the filter's response display */
.ml-inst-screen.filt { flex: none; height: 56px; min-height: 56px; margin: 4px 0; }
.ml-flt-curve { stroke: #6fc3d8; stroke-width: 1.6; filter: drop-shadow(0 0 3px rgba(111,195,216,.3)); }
.ml-flt-fill { fill: rgba(111,195,216,.1); stroke: none; }
.ml-flt-env { stroke: #6fc3d8; stroke-width: 1; stroke-dasharray: 3 3; opacity: .45; }
.ml-flt-zero { stroke: #2c2f36; stroke-width: 1; }

/* chord editor: the stacking-depth seg lives on the Chord axis now */
.ml-edit-ext { float: right; }
.ml-edit-ext .ml-seg { padding: 1px; }
.ml-edit-ext .ml-seg button { font-size: 9px; padding: 2px 6px; }

/* spectrum hover crosshair — ruler intersection + frequency tag */
.ml-sp-cross { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.ml-sp-cross[hidden] { display: none; }
.ml-sp-cross-v { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(165,175,200,.5); }
.ml-sp-cross-h { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(165,175,200,.32); }
.ml-sp-cross-tag { position: absolute; padding: 2px 8px; background: #0d0e12;
  border: 1px solid #2c2e35; border-radius: 3px; font-size: 10px; font-weight: 700;
  color: #eceef2; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.45); }