/* ── Resona ────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* FabFilter-inspired shell (docs/UI_DIRECTION.md): near-monochrome
     blue-charcoal chrome; vivid hues belong to the DATA layers only. */
  --bg:       #16181d;
  --display:  #101216;   /* visualiser wells — darkest surface */
  --surface:  #1c1f25;
  --surface2: #24272e;
  --border:   #2b2f37;
  --border2:  #363b45;
  --text:     #e8eaee;
  --text2:    #9aa0ab;
  --text3:    #5d636e;
  --accent:   #f5a623;
  --accent2:  #ffc768;
  /* Data-layer hues (match visualiser LAYER_COLORS in app.js) */
  --gen:      #f5a623;
  --acc:      #a0dc32;
  --surp:     #38bdf8;
  --rootc:    #8b7cf6;
  --blue:     #3b82f6;
  --green:    #22c55e;
  --red:      #ef4444;
  /* Stage identity hues (2026-07-08 redesign): each CHORDA stage owns a
     hue used for its card, glow, thumbnail stroke and data in the field. */
  --exc:      #e8994a;   /* excitor — amber-orange   */
  --res:      #3d9df6;   /* resonator — signal blue  */
  --bodyc:    #9d7bf0;   /* body — violet            */
  --eff:      #e5688f;   /* effects — rack rose       */
  --spc:      #4fc47f;   /* space — stage green      */
  --exc-dim:  #e8994a33;
  --res-dim:  #3d9df633;
  --bodyc-dim:#9d7bf033;
  --eff-dim:  #e5688f33;
  --spc-dim:  #4fc47f33;
  --radius:   10px;
  --radius-sm: 6px;
  --font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --mono:     'SF Mono', 'Fira Code', Consolas, monospace;
  font-size: 15px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ──────────────────────────────────────────────── */

#app {
  max-width: 820px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.view { animation: fadeIn 0.25s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Typography ──────────────────────────────────────────── */

h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 1rem; font-weight: 600; }
p  { color: var(--text2); }
.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.75rem; }
.text-muted { color: var(--text3); }
.text-accent { color: var(--accent); }
.text-center { text-align: center; }

/* ── Card / Panel ────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card + .card { margin-top: 1rem; }

/* ── Buttons ─────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.6rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
  text-decoration: none; white-space: nowrap;
}
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-primary {
  background: var(--accent); color: #000; border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) { background: var(--accent2); border-color: var(--accent2); }
.btn-secondary {
  background: var(--surface2); color: var(--text); border-color: var(--border2);
}
.btn-secondary:hover:not(:disabled) { background: var(--border); border-color: var(--border2); }
.btn-ghost {
  background: transparent; color: var(--text2); border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--surface2); }
.btn-lg { padding: 0.85rem 2rem; font-size: 1rem; border-radius: var(--radius); }
.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.8rem; }
.btn-block { width: 100%; }

/* ── Landing page ────────────────────────────────────────── */

.landing-header { text-align: center; margin-bottom: 2.5rem; padding-top: 3rem; }
.landing-header h1 { margin-bottom: 0.5rem; }
.landing-header p { max-width: 520px; margin: 0 auto; font-size: 1.05rem; }

.landing-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  max-width: 640px; margin: 0 auto;
}
/* Three balanced entry points read as a complete row rather than one lonely
   card floating on the left. */
.landing-cards-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 960px;
}
@media (max-width: 860px) { .landing-cards-3 { grid-template-columns: 1fr; max-width: 420px; } }
@media (max-width: 580px) { .landing-cards { grid-template-columns: 1fr; } }

/* The community card is the way in when locked — give it a quiet accent edge. */
.landing-card-featured { border-color: rgba(245,166,35,0.35); }
.landing-card-featured .badge { color: #000; background: var(--accent); border-color: var(--accent); }

.landing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none; color: inherit;
}
.landing-card:hover {
  border-color: var(--accent);
  background: var(--surface2);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.landing-card .icon { font-size: 2.2rem; margin-bottom: 0.75rem; display: block; }
.landing-card h2 { margin-bottom: 0.4rem; }
.landing-card p { font-size: 0.88rem; }
.landing-card .badge {
  display: inline-block; margin-top: 0.8rem;
  font-size: 0.75rem; color: var(--accent);
  background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.2);
  border-radius: 20px; padding: 0.2rem 0.8rem;
}

/* ── Progress bar (study) ────────────────────────────────── */

.progress-bar {
  display: flex; align-items: center; gap: 0.8rem;
  margin-bottom: 1.5rem; font-size: 0.82rem; color: var(--text2);
}
.progress-track {
  flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: var(--accent); border-radius: 2px;
  transition: width 0.3s ease-out;
}
.progress-label { white-space: nowrap; }

/* ── Study views ─────────────────────────────────────────── */

.study-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.study-header h2 { font-size: 1rem; color: var(--text2); }
.study-instruction {
  font-size: 1.15rem; color: var(--text); line-height: 1.5;
  margin-bottom: 1.5rem;
}

/* Consent / demographics form fields */
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-weight: 500; margin-bottom: 0.4rem; font-size: 0.9rem; }
.form-group .hint { font-size: 0.78rem; color: var(--text3); margin-top: 0.2rem; }

.form-input,
.form-select {
  width: 100%; padding: 0.55rem 0.75rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.9rem;
  transition: border-color 0.15s;
}
.form-input:focus, .form-select:focus {
  outline: none; border-color: var(--accent);
}
.form-select { cursor: pointer; }

.form-check {
  display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer;
}
.form-check input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; cursor: pointer;
  accent-color: var(--accent);
}
.form-check span { font-size: 0.88rem; line-height: 1.4; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 500px) { .form-row { grid-template-columns: 1fr; } }

/* ── Slider trial ────────────────────────────────────────── */

.trial-slider-wrap {
  padding: 1.5rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
}
.trial-slider-labels {
  display: flex; justify-content: space-between;
  font-size: 0.78rem; color: var(--text3); margin-top: 0.3rem;
}
.trial-slider-value {
  text-align: center; font-size: 1.6rem; font-weight: 700;
  color: var(--accent); margin-bottom: 0.75rem; font-family: var(--mono);
}

/* ── Pairwise trial ──────────────────────────────────────── */

.pairwise-row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem;
  align-items: center; margin-bottom: 1.5rem;
}
.pairwise-or { color: var(--text3); font-size: 0.85rem; text-align: center; }
.pairwise-option {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  transition: all 0.15s;
}
.pairwise-option.playing { border-color: var(--accent); }
.pairwise-option .label { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.6rem; }

.pairwise-choices {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}

/* ── Range slider (shared between study + explore) ───────── */

/* Thin precision sliders: monochrome widget, data-hued fill (set inline by
   updateSliderFill). The value readout is the star, not the thumb. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px;
  background: var(--border); border-radius: 2px;
  outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px;
  background: #cfd4dc; border-radius: 50%;
  border: 2px solid var(--bg);
  transition: box-shadow 0.12s, background 0.12s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  background: #eef0f4;
  box-shadow: 0 0 0 4px rgba(207,212,220,0.12);
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  background: #cfd4dc; border-radius: 50%;
  border: 2px solid var(--bg);
}
input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(207,212,220,0.22);
}

/* ── Explore mode ────────────────────────────────────────── */

.explore-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem;
}

.controls-grid { display: grid; gap: 0.9rem; }

.control-row {
  display: grid; grid-template-columns: 140px 1fr 60px;
  align-items: center; gap: 0.6rem;
}
.control-row .label { font-size: 0.85rem; color: var(--text2); }
.control-row output {
  font-family: var(--mono); font-size: 0.82rem;
  color: var(--accent); text-align: right;
  font-variant-numeric: tabular-nums;
}

.control-selects {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;
  margin-top: 0.5rem;
}
.control-selects label { font-size: 0.82rem; color: var(--text2); }
.control-selects select {
  width: 100%; margin-top: 0.3rem;
  padding: 0.4rem 0.5rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.85rem; cursor: pointer;
}
.control-selects select:focus { outline: none; border-color: var(--accent); }

/* Transport */
.transport {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 1rem 0;
}
.transport .spacer { flex: 1; }

/* Visualiser canvas */
.visualiser-wrap {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.visualiser-wrap canvas { display: block; width: 100%; height: 200px; }
.visualiser-badge {
  position: absolute; top: 8px; right: 10px;
  font-size: 0.7rem; color: var(--text3);
  background: rgba(0,0,0,0.4); border-radius: 4px; padding: 1px 6px;
}

/* Preset bar */
.preset-bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.8rem 0;
}
.preset-bar input[type="text"] {
  flex: 1; padding: 0.45rem 0.6rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.85rem;
}
.preset-bar input[type="text"]:focus { outline: none; border-color: var(--accent); }

/* Rating */
.rating-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.5rem 0;
}
.rating-row .label { font-size: 0.85rem; color: var(--text2); white-space: nowrap; }
.rating-row input[type="range"] { flex: 1; }
.rating-row output {
  font-family: var(--mono); font-size: 0.85rem; color: var(--accent);
  min-width: 2rem; text-align: right;
}

/* ── Library (presets) ───────────────────────────────────── */

.tabs {
  display: flex; gap: 0; margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.tab {
  padding: 0.5rem 1rem;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text3); font-family: inherit; font-size: 0.85rem; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.tab:hover { color: var(--text2); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.preset-list { min-height: 60px; }

.preset-item {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.preset-item:last-child { border-bottom: none; }
.preset-item .name { font-weight: 500; flex: 1; }
.preset-item .meta { color: var(--text3); font-size: 0.78rem; }
.preset-item .score {
  font-family: var(--mono); font-size: 0.78rem; color: var(--accent);
  min-width: 28px; text-align: right;
}
.preset-item .actions { display: flex; gap: 0.3rem; }

.empty-state {
  text-align: center; padding: 2rem 1rem;
  color: var(--text3); font-size: 0.88rem;
}

/* ── Contribution prompt ─────────────────────────────────── */

.contribute-prompt {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-top: 1rem;
}
.contribute-prompt h3 { margin-bottom: 0.5rem; }
.contribute-prompt p { font-size: 0.85rem; margin-bottom: 1rem; }
.contribute-fields { display: grid; gap: 0.75rem; }
.contribute-fields input,
.contribute-fields textarea {
  width: 100%; padding: 0.45rem 0.6rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.85rem;
}
.contribute-fields textarea { resize: vertical; min-height: 60px; }

/* ── Headphone check ─────────────────────────────────────── */

.headphone-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem;
  margin: 1.25rem 0;
}
.headphone-btn {
  padding: 1rem;
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text); font-family: inherit; font-size: 0.95rem; font-weight: 500;
  cursor: pointer; transition: all 0.15s; text-align: center;
}
.headphone-btn:hover { border-color: var(--blue); background: var(--border); }
.headphone-btn.correct { border-color: var(--green); background: rgba(34,197,94,0.08); }
.headphone-btn.wrong { border-color: var(--red); background: rgba(239,68,68,0.08); }

/* ── Study complete ──────────────────────────────────────── */

.complete-hero { text-align: center; padding: 3rem 1rem; }
.complete-hero .icon { font-size: 3rem; margin-bottom: 1rem; }
.complete-hero h1 { margin-bottom: 0.5rem; }

/* ── Info / consent boxes ────────────────────────────────── */

.info-box {
  background: var(--surface2);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.info-box p { font-size: 0.88rem; color: var(--text2); }

.consent-text {
  max-height: 260px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem; margin-bottom: 1rem;
  font-size: 0.85rem; color: var(--text2); line-height: 1.65;
}
.consent-text h3 { color: var(--text); margin: 0.75rem 0 0.25rem; font-size: 0.9rem; }
.consent-text ul { padding-left: 1.5rem; margin: 0.3rem 0; }

/* ── Utility ─────────────────────────────────────────────── */

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.hidden { display: none !important; }

/* ── Note grid ───────────────────────────────────────────── */

.note-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0.75rem 0;
}
.note-cell {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text3);
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
}
.note-cell:hover { border-color: var(--text3); background: var(--surface2); }
.note-cell.in-scale {
  border-color: var(--blue);
  color: var(--text);
  background: rgba(59, 130, 246, 0.1);
}
.note-cell.in-sub {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(245, 158, 11, 0.15);
  font-weight: 700;
}

.note-grid-legend {
  display: flex;
  gap: 1rem;
  font-size: 0.72rem;
  color: var(--text3);
  margin-top: 0.4rem;
}
.legend-item { display: flex; align-items: center; gap: 0.3rem; }
.legend-dot {
  width: 10px; height: 10px;
  border-radius: 2px;
  border: 2px solid;
}
.legend-dot.off { border-color: var(--border); }
.legend-dot.scale { border-color: var(--blue); background: rgba(59, 130, 246, 0.1); }
.legend-dot.sub { border-color: var(--accent); background: rgba(245, 158, 11, 0.15); }

/* ── Formant chips ───────────────────────────────────────── */

.formant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0.5rem 0;
}
.formant-chip {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--border2);
  border-radius: 20px;
  background: var(--bg);
  color: var(--text3);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
}
.formant-chip:hover { border-color: var(--text3); color: var(--text2); }
.formant-chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(245, 158, 11, 0.1);
}

/* ── Mode toggle buttons ─────────────────────────────────── */

.mode-btns {
  display: flex;
  gap: 4px;
  margin: 0.4rem 0;
}
.mode-btn {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text3);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
}
.mode-btn:hover { border-color: var(--text3); color: var(--text2); }
.mode-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(245, 158, 11, 0.1);
}

.mode-btn:disabled,
.formant-chip:disabled,
.param-select:disabled,
.mode-disabled input,
.mode-disabled select,
.mode-disabled button:not(.mode-btn) {
  cursor: not-allowed;
}

/* ── Dimension checkboxes ────────────────────────────────── */

.dimension-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  margin: 0.5rem 0;
}
.dim-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text2);
  cursor: pointer;
}
.dim-check input { accent-color: var(--accent); cursor: pointer; }

.feature-check {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text2);
  font-size: 0.72rem;
  cursor: pointer;
}

.feature-check input {
  accent-color: var(--accent);
}

.feature-surprise {
  margin-top: 0.34rem;
  padding-top: 0.32rem;
  border-top: 1px solid rgba(136,153,170,0.12);
}

.feature-surprise .control-row {
  margin-top: 0.22rem;
}

.micro-note {
  margin-top: 0.2rem;
  color: var(--text3);
  font-size: 0.58rem;
  line-height: 1.25;
}

.dist-canvas-tall,
.formant-canvas {
  width: 100%;
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.formant-weight-circle {
  display: block;
  width: 164px;
  height: 116px;
  margin: 0.4rem auto 0.1rem;
  overflow: visible;
}
.vowel-pad .vp-well {
  fill: var(--display);
  stroke: var(--border);
  stroke-width: 1;
}
.vowel-pad .vp-axis {
  fill: var(--text3);
  font-family: var(--mono);
  font-size: 5.5px;
  letter-spacing: 0.08em;
}
.vowel-pad .fw-poly {
  fill: none !important;
  stroke: rgba(154,160,171,0.25);
  stroke-width: 0.8;
  stroke-dasharray: 2 3;
}
.formant-weight-circle .fw-ring {
  fill: none;
  stroke: rgba(136,153,170,0.14);
  stroke-width: 0.6;
}
.formant-weight-circle .fw-spoke {
  stroke: rgba(136,153,170,0.18);
  stroke-width: 0.6;
}
.formant-weight-circle .fw-poly {
  fill: rgba(245,166,35,0.18);
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-linejoin: round;
  transition: points 0.08s linear;
}
.formant-weight-circle .fw-dot {
  fill: var(--accent);
}
.formant-weight-circle .fw-dot.inactive {
  fill: var(--text3);
  opacity: 0.4;
}
.formant-weight-circle .fw-label {
  fill: var(--text2);
  font-family: var(--mono);
  font-size: 8px;
  text-anchor: middle;
  dominant-baseline: middle;
}
.formant-weight-circle .fw-label.inactive {
  fill: var(--text3);
  opacity: 0.45;
}

.formant-weight-controls {
  display: grid;
  gap: 0.12rem;
  margin-top: 0.32rem;
}

.formant-weight {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 0.2rem;
  color: var(--text3);
  font-family: var(--mono);
  font-size: 0.58rem;
}

.formant-weight.disabled {
  opacity: 0.38;
}

.formant-weight output {
  color: var(--accent);
  text-align: right;
}

.formant-weight input[type="range"] {
  height: 3px;
}

.formant-axis-controls {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(136,153,170,0.12);
}

.formant-focus-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.24rem;
  margin-bottom: 0.32rem;
}

.formant-focus {
  min-width: 0;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text3);
  font-family: inherit;
  font-size: 0.64rem;
  font-weight: 650;
  padding: 0.18rem 0.24rem;
  cursor: pointer;
}

.formant-focus.active {
  border-color: var(--accent);
  color: var(--accent2);
  background: rgba(245,166,35,0.1);
}

.surprise-weight-list {
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(136,153,170,0.12);
}

.surprise-weight-head {
  color: var(--text3);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

/* ── Percussion layers ──────────────────────────────────── */

.perc-layers { display: grid; gap: 0.75rem; }
.perc-layer {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
}
.perc-header {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 0.5rem;
}
.perc-controls { display: grid; gap: 0.6rem; }
.perc-select {
  width: 100%;
  padding: 0.35rem 0.5rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.perc-select:focus { outline: none; border-color: var(--accent); }

/* ── Control descriptions ────────────────────────────────── */

.control-desc {
  font-size: 0.72rem;
  color: var(--text3);
  line-height: 1.4;
  padding: 0 0 0.3rem 0;
}
.controls-grid .control-desc {
  grid-column: 1 / -1;
  margin-top: -0.4rem;
  padding-left: 0;
}

/* ── Distribution displays ──────────────────────────────── */

.dist-display {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.dist-canvas {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  display: block;
}
.dist-label {
  font-size: 0.7rem;
  color: var(--text3);
  white-space: nowrap;
}

/* ── Root note grid ─────────────────────────────────────── */

.root-note-grid .note-grid { margin: 0.5rem 0; }
.root-card .root-note-grid .note-grid { margin: 0.25rem 0; }
.root-card .note-grid-legend { display: none; }
.note-cell.is-root,
.root-cell.is-root {
  border-color: var(--green);
  color: var(--green);
  background: rgba(34, 197, 94, 0.15);
  font-weight: 700;
}
.root-cell.disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.legend-dot.root {
  border-color: var(--green);
  background: rgba(34, 197, 94, 0.15);
}

/* ── Section label ───────────────────────────────────────── */

.section-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text3);
  margin-bottom: 0.6rem;
}

/* ── Engine state display ────────────────────────────────── */

.engine-state {
  display: flex;
  gap: 1.5rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  font-family: var(--mono);
  color: var(--text3);
  margin-bottom: 0.75rem;
}
.engine-state .stat { display: flex; gap: 0.3rem; }
.engine-state .stat-val { color: var(--accent); }

/* ── Scale options ───────────────────────────────────────── */

.scale-preset-row { margin: 0.5rem 0; }
.scale-preset-row label { font-size: 0.85rem; color: var(--text2); }
.scale-preset-row select { margin-left: 0.5rem; }

.edo-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.edo-input {
  width: 60px;
  padding: 0.35rem 0.5rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 0.85rem;
  text-align: center;
}
.edo-input:focus { outline: none; border-color: var(--accent); }

/* ── Explore dashboard: image-mockup-inspired compact view ── */

body.explore-mode {
  overflow: auto;
}

body.explore-mode #app {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 8px;
}

body.explore-mode .view {
  min-height: calc(100dvh - 16px);
  animation: none;
  /* Q12 QA: a flex child defaults to min-width auto, which let the grid's
     intrinsic width push the page into hidden horizontal overflow at
     ≤1280 px. Let the dashboard shrink to its column floors instead. */
  min-width: 0;
}

.explore-dashboard {
  min-height: calc(100dvh - 16px);
  display: grid;
  /* Q12: first column is user-resizable (drag the divider); floors keep
     every column readable */
  grid-template-columns: var(--dash-c1, 230px) repeat(4, minmax(210px, 1fr));
  grid-template-rows: 62px 210px minmax(360px, auto) minmax(250px, auto) minmax(190px, auto);
  gap: 8px;
  overflow: visible;
  position: relative;
}

/* Q12: panel dividers */
.dash-vsplit {
  position: absolute;
  top: 44px; /* below the transport row */
  bottom: 6px;
  left: calc(var(--dash-c1, 260px) - 2px);
  width: 7px;
  cursor: col-resize;
  z-index: 5;
  border-radius: 3px;
}
.dash-vsplit:hover { background: rgba(245,166,35,0.18); }
/* The dashboard column divider only maps to a real column boundary in the
   classic 5-column dashboard. The Macro / Sub-note / Scale-Lab workspaces are
   absolute overlay cards with their own rail+inspector layout, so here the
   divider resizes a hidden grid column (no visible effect) and its hover
   highlight merely paints a bar across the panels — hide it in those modes.
   (owner 2026-07-10) */
.macro2-workspace-mode .dash-vsplit,
.subnote-workspace-mode .dash-vsplit,
.scalelab-workspace-mode .dash-vsplit { display: none; }
.ch-vsplit {
  flex: none;
  width: 7px;
  margin: 0 -3px;
  cursor: col-resize;
  border-radius: 3px;
  z-index: 3;
}
.ch-vsplit:hover { background: rgba(245,166,35,0.18); }

.explore-dashboard .card {
  min-height: 0;
  min-width: 0; /* Q12 QA: grid items default min-width auto → page-wide overflow */
  padding: 0.58rem;
  overflow: auto;
  scrollbar-color: rgba(245,166,35,0.42) rgba(10,14,20,0.55);
}

.explore-dashboard .visual-card {
  min-height: 0;
  min-width: 0; /* Q12 QA: the full-row hero card was forcing 1440 px at a 1280 viewport */
  padding: 0.58rem;
  overflow: hidden;
}

.explore-dashboard .card::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.explore-dashboard .card::-webkit-scrollbar-track {
  background: rgba(10,14,20,0.55);
  border-radius: 8px;
}

.explore-dashboard .card::-webkit-scrollbar-thumb {
  background: rgba(245,166,35,0.42);
  border-radius: 8px;
}

.explore-dashboard .card + .card {
  margin-top: 0;
}

.explore-top {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  padding: 0 0.2rem;
}

.explore-top #backHome {
  display: none;
}

.explore-top h1 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.workspace-tabs {
  display: flex;
  /* Q12 QA: one row at full label width — the strip may overflow its grid
     cell into the free space before the transport buttons, which beats
     either overlapping labels (min-width 0) or clipped wrapping (the
     transport row is only 38 px tall) */
  flex-wrap: nowrap;
  width: max-content;
  position: relative;
  z-index: 4;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.workspace-tab {
  /* Q12 QA: never shrink below the label — squished tabs overlapped their
     neighbours at narrow transport widths */
  min-width: max-content;
  white-space: nowrap;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text3);
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 650;
  padding: 0.16rem 0.42rem;
  cursor: pointer;
}

.workspace-tab.active {
  border-color: var(--accent);
  background: rgba(245, 158, 11, 0.1);
  color: var(--accent2);
}

.transport-card {
  grid-column: 2 / 6;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(260px, 0.9fr) 175px;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0;
}

.transport-card .transport {
  padding: 0;
}

.transport-card .controls-grid {
  gap: 0;
}

.top-save-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
}

.top-save-bar input[type="text"] {
  width: 100%;
  min-height: 0;
  padding: 0.34rem 0.48rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.75rem;
}

.tempo-grid .control-row {
  grid-template-columns: 54px minmax(0, 1fr) 54px;
}

.explore-dashboard .controls-grid {
  gap: 0.32rem;
}

.visual-card {
  grid-column: 2 / 6;
  grid-row: 2;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.scale-card {
  grid-column: 1;
  grid-row: 2 / 4;
}

.melody-card {
  grid-column: 2;
  grid-row: 3;
}

.tuning-card {
  grid-column: 3;
  grid-row: 3;
}

.rhythm-card {
  grid-column: 4;
  grid-row: 3;
}

.dynamics-card {
  grid-column: 5;
  grid-row: 3;
}

.surprise-card {
  grid-column: 2 / 4;
  grid-row: 4;
}

.register-card {
  grid-column: 4;
  grid-row: 4;
}

.motif-card {
  grid-column: 5;
  grid-row: 4;
}

.percussion-card {
  grid-column: 1 / 4;
  grid-row: 5;
}

.rating-card {
  grid-column: 4;
  grid-row: 5;
}

.library-card {
  grid-column: 5;
  grid-row: 5;
}

.subnote-full-card {
  display: none;
}

.subnote-workspace-mode .subnote-full-card {
  /* Space audit 07-07: the sub-note workspace owns the ENTIRE plugin area
     below the transport row — previously it shared the grid with implicit
     rows (the bottom notes) and lost ~180px to them while empty space
     showed elsewhere. Absolute fill; a small bottom margin keeps the
     palette-edit / research-note strip visible. */
  display: block;
  position: absolute;
  top: 44px;
  left: 3px;
  right: 3px;
  bottom: 46px;
  z-index: 2;
  overflow: hidden;
}
/* …and the bottom strips pin to the reserved bottom band instead of
   floating into the vacated grid rows */
.subnote-workspace-mode .palette-edit-banner {
  position: absolute;
  left: 3px;
  bottom: 3px;
  z-index: 3;
  margin: 0;
  max-width: 60%;
  padding: 0.3rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.subnote-workspace-mode .research-note {
  position: absolute;
  right: 3px;
  bottom: 8px;
  z-index: 3;
  margin: 0;
}

.subnote-workspace-mode .visual-card,
.subnote-workspace-mode .scale-card,
.subnote-workspace-mode .melody-card,
.subnote-workspace-mode .root-card,
.subnote-workspace-mode .tuning-card,
.subnote-workspace-mode .dynamics-card,
.subnote-workspace-mode .register-card,
.subnote-workspace-mode .rhythm-card,
.subnote-workspace-mode .surprise-card,
.subnote-workspace-mode .motif-card,
.subnote-workspace-mode .percussion-card,
.subnote-workspace-mode .rating-card,
.subnote-workspace-mode .library-card {
  display: none;
}

#contributeArea {
  display: none;
}

#contributeArea:not(:empty) {
  display: block;
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 10;
  width: min(360px, calc(100vw - 16px));
  max-height: min(260px, calc(100dvh - 24px));
  min-height: 0;
  overflow: auto;
  box-shadow: 0 16px 50px rgba(0,0,0,0.42);
}

.subnote-workspace-mode #contributeArea:not(:empty) {
  display: none;
}

.explore-dashboard .section-label {
  margin-bottom: 0.32rem;
  color: var(--accent2);
}

.explore-dashboard .control-row {
  grid-template-columns: minmax(62px, 0.9fr) minmax(58px, 1fr) 36px;
  gap: 0.28rem;
  min-height: 19px;
}

.explore-dashboard .control-row .label,
.explore-dashboard .control-row output {
  font-size: 0.72rem;
}

.explore-dashboard input[type="range"] {
  height: 3px;
}

.explore-dashboard input[type="range"]::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
}

.explore-dashboard .btn {
  min-height: 0;
  padding: 0.3rem 0.58rem;
  font-size: 0.72rem;
}

.explore-dashboard .btn-sm {
  padding: 0.3rem 0.58rem;
}

.visualiser-wrap {
  height: calc(100% - 38px);
}

.visualiser-wrap canvas {
  height: 100%;
}

.engine-state {
  height: 30px;
  align-items: center;
  justify-content: center;
  margin: 6px 0 0;
  padding: 0;
}

.engine-state .stat {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.28rem 0.55rem;
}

.mode-btns {
  margin: 0.3rem 0;
}

.mode-btn,
.formant-chip {
  padding: 0.2rem 0.45rem;
  font-size: 0.68rem;
}

.scale-preset-row,
.edo-row {
  margin: 0.35rem 0;
}

.scale-preset-row label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.scale-preset-row select,
.edo-input,
.perc-select,
.param-select,
.preset-bar input[type="text"],
.contribute-fields input,
.contribute-fields textarea {
  min-height: 0;
  padding: 0.3rem 0.45rem;
  font-size: 0.75rem;
}

.explore-dashboard .scale-preset-row select {
  width: 108px !important;
  margin-left: 0 !important;
}

.note-grid {
  gap: 3px;
  margin: 0.45rem 0;
}

.note-cell {
  width: 25px;
  height: 23px;
  font-size: 0.6rem;
  border-width: 1px;
}

.note-grid-legend {
  gap: 0.42rem;
  font-size: 0.63rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-width: 1px;
}

.formant-chips {
  gap: 4px;
  margin: 0.35rem 0;
}

.dist-display {
  margin-top: 0.36rem;
  gap: 0;
}

.dist-display:has(.accuracy-canvas) {
  display: block;
}

.dist-canvas {
  width: 100%;
  max-width: none;
  height: 30px;
}

.accuracy-canvas {
  height: 220px !important;
  min-height: 190px;
}

.dist-label {
  display: none;
}

.melody-card .controls-grid {
  gap: 0.18rem;
}

.melody-card .control-row {
  min-height: 16px;
}

.melody-card .control-row .label,
.melody-card .control-row output {
  font-size: 0.66rem;
}

.melody-card .dist-display {
  margin-top: 0.2rem;
}

.melody-card #cvInterval {
  height: 22px;
}

.melody-card .accuracy-canvas {
  height: 220px !important;
}

.dimension-checks {
  gap: 0.35rem 0.65rem;
  margin: 0.42rem 0;
}

.dim-check {
  font-size: 0.7rem;
}

.subnote-full-layout {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 278px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.55rem;
}

.harmonic-stage,
.formant-stage {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The tone builder (chain + print) is taller than the old signature
   display — it scrolls within its row instead of spilling over the
   band-scoped editor strip below. */
.harmonic-stage {
  overflow-y: auto;
  overflow-x: hidden;
}
/* Space audit 07-07: the CHORDA stage FILLS its grid cell so the tone
   print + inspector take all remaining height — previously the stage
   sized to content and only looked right because the (since-moved)
   envelope block propped the inspector up. */
.harmonic-stage.chorda {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
/* the editors never collapse below usable — the stage scrolls instead */
.harmonic-stage.chorda .ch-main { min-height: 200px; }
.harmonic-editor {
  max-height: 170px;
  overflow-y: auto;
}

.formant-stage {
  grid-column: 1;
  grid-row: 1 / 3;
}

.subnote-full-card.is-formant-mode .harmonic-editor {
  display: none;
}

.formant-stage .formant-axis-controls {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(280px, 1fr);
  gap: 0.5rem 0.8rem;
  align-items: end;
  margin: 0 0 0.45rem;
  padding: 0;
  border-top: 0;
}

.formant-stage .formant-focus-row {
  grid-column: 1;
  margin: 0;
}

.formant-stage .feature-check {
  grid-column: 1;
  align-self: center;
}

.formant-stage .controls-grid {
  grid-column: 2;
  grid-row: 1 / 3;
  gap: 0.25rem;
}

.formant-stage .accuracy-canvas {
  flex: 1;
  min-height: 280px;
  height: 100% !important;
}

.subnote-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.35rem;
}

.subnote-head h2 {
  font-size: 1rem;
  color: var(--text);
  margin-top: -0.2rem;
}

.signature-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem 0.5rem;
  color: var(--text3);
  font-size: 0.66rem;
}

.signature-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.legend-line,
.legend-bar,
.legend-band {
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: 3px;
}

.legend-line.quiet { background: rgba(148,163,184,0.8); }
.legend-line.loud { background: rgba(34,197,94,0.85); }
.legend-line.mean { background: rgba(245,166,35,0.9); }
.legend-line.sample { background: rgba(34,197,94,0.9); }
.legend-line.acc { background: rgba(255,190,30,0.9); }
.legend-line.surp { background: rgba(56,189,248,0.9); }
.legend-bar.mean { height: 10px; width: 8px; background: rgba(245,166,35,0.72); }
.legend-band.spread { height: 10px; width: 8px; background: rgba(59,130,246,0.28); }
.signature-legend .legend-dot.sample {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: rgba(226,232,240,0.78);
}

#cvHarmonicSignature {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.subnote-side {
  grid-column: 2;
  /* row 1 only: a 1/3 span let this column's content inflate the auto row
     and steal ~150px from the stage — it scrolls internally instead */
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.25rem;
  scrollbar-color: rgba(245,166,35,0.42) rgba(10,14,20,0.55);
}

.sound-source-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.sound-source-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}

.sound-source-modes .mode-btn {
  justify-content: center;
  min-height: 24px;
}

.mode-disabled {
  opacity: 0.32;
  filter: grayscale(0.35) saturate(0.45);
}

.harmonic-stage.mode-disabled,
.harmonic-editor.mode-disabled,
.subnote-side-section.mode-disabled {
  position: relative;
}

.harmonic-stage.mode-disabled::after,
.harmonic-editor.mode-disabled::after,
.subnote-side-section.mode-disabled::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  pointer-events: none;
  background: rgba(10,14,20,0.18);
}

.subnote-side::-webkit-scrollbar,
.harmonic-editor::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.subnote-side::-webkit-scrollbar-track,
.harmonic-editor::-webkit-scrollbar-track {
  background: rgba(10,14,20,0.55);
  border-radius: 8px;
}

.subnote-side::-webkit-scrollbar-thumb,
.harmonic-editor::-webkit-scrollbar-thumb {
  background: rgba(245,166,35,0.42);
  border-radius: 8px;
}

.subnote-side .controls-grid {
  gap: 0.18rem;
}

.subnote-side .control-row {
  grid-template-columns: minmax(74px, 0.95fr) minmax(64px, 1fr) 42px;
  gap: 0.26rem;
  min-height: 17px;
}

.subnote-side .control-row .label,
.subnote-side .control-row output {
  font-size: 0.62rem;
}

.subnote-side-section {
  margin-top: 0.42rem;
  padding-top: 0.38rem;
  border-top: 1px solid var(--border);
}

.envelope-dist-controls {
  display: grid;
  gap: 0.12rem;
  margin-top: 0.22rem;
}

.env-dist-head,
.env-dist-row {
  display: grid;
  grid-template-columns: 48px minmax(42px, 1fr) 36px minmax(42px, 1fr) 36px;
  align-items: center;
  gap: 0.18rem;
  min-width: 0;
}

.env-dist-head {
  color: var(--text3);
  font-size: 0.56rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.env-dist-row {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--text3);
}

.env-param-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.env-dist-row output {
  color: var(--accent);
  text-align: right;
  white-space: nowrap;
}

.env-dist-row input[type="range"] {
  min-width: 0;
  height: 3px;
}

.env-dist-row input[type="range"]::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
}

.envelope-canvas {
  width: 100%;
  height: 104px;
  display: block;
  margin-top: 0.34rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.vibrato-canvas {
  width: 100%;
  height: 54px;
  display: block;
  margin-top: 0.28rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.harmonic-editor {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 0.24rem;
  overflow: auto;
  padding-right: 0.18rem;
  scrollbar-color: rgba(245,166,35,0.42) rgba(10,14,20,0.55);
}

.harmonic-control {
  min-width: 0;
  display: grid;
  grid-template-rows: auto repeat(4, minmax(0, 1fr));
  gap: 0.04rem;
  padding: 0.12rem 0.18rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text3);
  font-family: var(--mono);
  font-size: 0.55rem;
  line-height: 1.1;
}

.harmonic-control .h-head {
  display: flex;
  justify-content: space-between;
  color: var(--text3);
}

.harmonic-control .h-head span:first-child {
  color: var(--accent2);
  font-weight: 700;
}

.harmonic-control label {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) 27px;
  align-items: center;
  gap: 0.12rem;
}

.harmonic-control label span {
  color: var(--text3);
}

.harmonic-control output {
  color: var(--accent);
  text-align: right;
}

.harmonic-control input[type="range"] {
  height: 3px;
}

.harmonic-control input[type="range"]::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 1px rgba(245,166,35,0.18);
}

.perc-layers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.percussion-card {
  display: flex;
  flex-direction: column;
}

.performance-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}

.perf-tab {
  min-width: 0;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text3);
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 650;
  padding: 0.2rem 0.35rem;
  cursor: pointer;
}

.perf-tab.active {
  border-color: var(--accent);
  background: rgba(245, 158, 11, 0.1);
  color: var(--accent2);
}

.perf-panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.subnote-grid {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.perf-section {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.perf-section .section-label {
  margin-bottom: 0.28rem;
}

.perf-section .control-row {
  grid-template-columns: minmax(40px, 0.8fr) minmax(40px, 1fr) 32px;
  gap: 0.22rem;
  min-height: 18px;
}

.perf-section .control-row .label,
.perf-section .control-row output {
  font-size: 0.62rem;
}

.subnote-grid .controls-grid {
  gap: 0.16rem;
}

.subnote-grid .control-row {
  grid-template-columns: minmax(38px, 0.75fr) minmax(38px, 1fr) 34px;
  min-height: 15px;
}

.subnote-grid .control-row .label,
.subnote-grid .control-row output {
  font-size: 0.58rem;
}

.param-select {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 0.22rem;
}

.mini-canvas {
  display: block;
  width: 100%;
  height: 26px;
  margin-top: 0.22rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.perf-panel[data-panel="breaks"] .controls-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.24rem 0.42rem;
}

.perf-panel[data-panel="breaks"] .mini-canvas {
  height: 58px;
}

.perf-panel[data-panel="space"] .controls-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.24rem 0.42rem;
}

.perf-panel[data-panel="space"] .mini-canvas {
  height: 46px;
}

.percussion-section .perc-layers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.perc-layer {
  padding: 0.5rem;
}

.perc-header {
  font-size: 0.72rem;
  margin-bottom: 0.32rem;
}

.perc-controls {
  gap: 0.38rem;
}

.perc-layer .control-row {
  grid-template-columns: minmax(42px, 0.8fr) minmax(42px, 1fr) 30px;
  gap: 0.22rem;
}

.perc-layer .control-row .label,
.perc-layer .control-row output {
  font-size: 0.64rem;
}

.rating-row {
  gap: 0.45rem;
  padding: 0;
}

.rating-row .label {
  font-size: 0.72rem;
}

.preset-bar {
  padding: 0.45rem 0 0;
}

.tabs {
  margin-bottom: 0.35rem;
}

.tab {
  padding: 0.32rem 0.75rem;
  font-size: 0.76rem;
}

.preset-list {
  min-height: 0;
  max-height: 74px;
  overflow: auto;
}

.preset-item {
  padding: 0.42rem 0.35rem;
  font-size: 0.74rem;
}

.preset-item .meta {
  display: none;
}

.empty-state {
  padding: 0.65rem;
  font-size: 0.76rem;
}

.contribute-prompt {
  height: 100%;
  margin: 0;
  padding: 0.7rem;
}

.contribute-prompt p {
  display: none;
}

.contribute-fields {
  gap: 0.45rem;
}

.contribute-fields textarea {
  min-height: 42px;
}

/* ── Reworked instrument layout ───────────────────────────── */

body.explore-mode {
  overflow: hidden;
}

.explore-dashboard {
  width: 100%;
  max-width: 1440px;
  height: calc(100dvh - 16px);
  min-height: 640px;
  margin: 0 auto;
  grid-template-columns: minmax(205px, 235px) minmax(0, 1fr) minmax(260px, 320px);
  grid-template-rows: 62px 176px minmax(0, 1fr) 172px;
  gap: 8px;
  overflow: hidden;
}

.explore-top {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.transport-card {
  grid-column: 2 / 4;
  grid-row: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 0.62fr) minmax(190px, 0.78fr) minmax(170px, 0.66fr) 164px;
  gap: 0.5rem;
  align-items: center;
}

.transport-card .transport {
  min-width: 0;
  gap: 0.45rem;
}

.top-rating-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 0.35rem;
}

.top-rating-row .label,
.top-rating-row output {
  color: var(--text3);
  font-size: 0.68rem;
}

.visual-card {
  grid-column: 2 / 4;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.visual-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.visual-card-head .section-label {
  margin: 0;
}

.visual-card-head .visualiser-badge {
  position: static;
  white-space: nowrap;
}

.visualiser-wrap {
  flex: 1;
  height: auto;
  min-height: 0;
  border-radius: var(--radius-sm);
}

.visualiser-wrap canvas {
  height: 100%;
}

.visual-card.surprise-flash {
  animation: surprisePulse 560ms ease-out;
}

@keyframes surprisePulse {
  0% {
    border-color: rgba(96,165,250,0.95);
    box-shadow: 0 0 0 1px rgba(96,165,250,0.42), 0 0 32px rgba(96,165,250,0.34);
    background: linear-gradient(180deg, rgba(59,130,246,0.13), rgba(255,255,255,0.03));
  }
  100% {
    border-color: var(--border);
    box-shadow: none;
    background: var(--surface);
  }
}

.scale-card {
  grid-column: 1;
  grid-row: 2 / 4;
  min-width: 0;
}

.root-controls {
  margin-top: 0.65rem;
}

.macro-card {
  grid-column: 2;
  grid-row: 3 / 5;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.macro-card-head,
.production-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}

.macro-tabs {
  min-width: min(360px, 45%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
}

.macro-tab {
  min-width: 0;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text3);
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 650;
  padding: 0.24rem 0.28rem;
  cursor: pointer;
}

.macro-tab.active {
  border-color: var(--accent);
  background: rgba(245,166,35,0.1);
  color: var(--accent2);
}

.macro-panel {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
  gap: 0.65rem;
}
/* Owner 07-07: the preset bar was silently eating the first grid cell in
   the duration/dynamics panels, shunting the controls right and the
   distribution display to the wrong side. It spans the full row. */
.macro-panel > .panel-presets { grid-column: 1 / -1; }

.macro-controls {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding-right: 0.2rem;
}

.macro-controls .feature-surprise {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border);
}

.macro-monitor {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.macro-monitor .accuracy-canvas {
  width: 100%;
  flex: 1;
  min-height: 260px;
  height: auto !important;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.melody-monitor .accuracy-canvas {
  min-height: 230px;
}

.compact-dist {
  margin-top: 0;
}

.compact-dist .dist-canvas {
  height: 46px;
}

.register-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
}

.register-strip #cvRegister {
  width: 100%;
  height: 56px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.duration-monitor .accuracy-canvas {
  flex: 0 0 230px;
}

.breaks-block {
  min-height: 0;
  padding-top: 0.2rem;
  border-top: 1px solid var(--border);
}

.breaks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.2rem 0.45rem;
}

.breaks-grid .control-row {
  grid-template-columns: minmax(72px, 0.9fr) minmax(58px, 1fr) 42px;
}

.breaks-block .mini-canvas {
  height: 58px;
}

.structure-card {
  grid-column: 3;
  grid-row: 3;
  min-width: 0;
}

.sequence-divider {
  height: 1px;
  background: var(--border);
  margin: 0.65rem 0 0.5rem;
}

.structure-card .surprise-weight-list {
  margin-top: 0.5rem;
}

.production-card {
  grid-column: 3;
  grid-row: 4;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.production-head {
  margin-bottom: 0.35rem;
}

.production-tabs {
  width: 168px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.production-panel {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.production-panel .perc-layers {
  grid-template-columns: 1fr;
  gap: 0.35rem;
}

.production-panel .perc-layer {
  padding: 0.35rem;
}

.library-card {
  grid-column: 1;
  grid-row: 4;
  min-width: 0;
  min-height: 0;
}

.library-card .preset-list {
  max-height: 106px;
}

.subnote-workspace-mode .visual-card {
  display: none;
}

.subnote-workspace-mode .subnote-full-card {
  display: block;
  grid-column: 1 / -1;
  grid-row: 2 / 5;
  min-width: 0;
  min-height: 0;
}

.subnote-workspace-mode .scale-card,
.subnote-workspace-mode .macro-card,
.subnote-workspace-mode .structure-card,
.subnote-workspace-mode .production-card,
.subnote-workspace-mode .output-card,
.subnote-workspace-mode .library-card {
  display: none;
}

.subnote-full-layout {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 260px);
  grid-template-rows: minmax(0, 1fr) 150px;
  gap: 0.45rem;
}

.subnote-side {
  min-width: 0;
}

.harmonic-editor {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(68px, 1fr);
  gap: 0.2rem;
}

.harmonic-control {
  padding: 0.1rem 0.14rem;
  font-size: 0.5rem;
}

.harmonic-control label {
  grid-template-columns: 13px minmax(0, 1fr) 25px;
}

#cvHarmonicSignature {
  max-width: 100%;
}

@media (max-width: 1050px) {
  .explore-dashboard {
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) minmax(245px, 270px);
  }
  /* Q12: the resizable-column divider only matches the wide layout */
  .dash-vsplit { display: none; }
  .transport-card {
    grid-template-columns: minmax(160px, 0.8fr) minmax(170px, 1fr) minmax(150px, 0.8fr);
  }
  .tempo-grid {
    display: none;
  }
  .macro-panel {
    grid-template-columns: minmax(175px, 200px) minmax(0, 1fr);
  }
  .macro-tabs {
    min-width: 300px;
  }
  .subnote-full-layout {
    grid-template-columns: minmax(0, 1fr) 235px;
  }
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 600px) {
  #app { padding: 1.25rem 1rem 3rem; }
  h1 { font-size: 1.5rem; }
  .landing-header { padding-top: 1.5rem; }
  .control-row { grid-template-columns: 100px 1fr 50px; }
  .pairwise-row { grid-template-columns: 1fr; }
  .pairwise-or { display: none; }
  .headphone-grid { grid-template-columns: 1fr; }
  .note-cell { width: 32px; height: 32px; font-size: 0.65rem; }
  .engine-state { flex-wrap: wrap; gap: 0.75rem; }
}

/* ── Benchmark plugin skin ───────────────────────────────── */

body.explore-mode {
  margin: 0;
  padding: 0;
  background: #050810;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
}

body.explore-mode #app {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.explore-dashboard {
  width: 1440px;
  height: 790px;
  min-height: 790px;
  max-height: 790px;
  /* Q12: left column adjustable via the drag divider — the plugin canvas
     stays 1440 (scaled to the viewport), so widening the left column
     narrows the middle one */
  grid-template-columns: var(--dash-c1, 260px) 1fr 320px;
  grid-template-rows: 38px 148px 1fr 155px;
  gap: 3px;
  padding: 3px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(19,30,40,0.96), rgba(7,11,16,0.98)),
    radial-gradient(circle at 50% 0%, rgba(59,130,246,0.12), transparent 42%);
  border: 1px solid #1f3444;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 20px 70px rgba(0,0,0,0.48);
}

.explore-dashboard .card,
.visual-card {
  background:
    linear-gradient(180deg, rgba(18,29,38,0.96), rgba(9,15,21,0.98));
  border: 1px solid rgba(49,69,86,0.92);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    inset 0 -16px 38px rgba(0,0,0,0.13);
}

.explore-dashboard .section-label {
  color: #b6c0cb;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.section-subhead {
  margin: 0.25rem 0 0.2rem;
  color: #aab5c2;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.explore-top {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  background: transparent;
  border-right: 1px solid rgba(49,69,86,0.35);
  /* Must stay visible: the account dropdown hangs below this 46px strip.
     Width pressure is handled by letting the title/pill shrink instead. */
  overflow: visible;
  min-width: 0;
}

.explore-top .explore-title { min-width: 0; }
/* The pill never shrinks — the title's version tail truncates first
   (the handle is actionable; the build number is not). */
.explore-top .account-bar { flex-shrink: 0; }
.explore-top .acct-pill.signin {
  display: block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.explore-top h1 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e5e7eb;
  text-shadow: 0 0 18px rgba(226,232,240,0.22);
  white-space: nowrap;
  flex-shrink: 0;
}

.studio-subtitle {
  display: none;
}

/* ── Tone builder: the signal chain is the layout (tone v2 T6) ── */
.tone-chain {
  display: grid;
  grid-template-columns: 1.05fr 16px 1.15fr 16px 1fr 16px 0.7fr;
  align-items: stretch;
  gap: 0;
  margin: 0.5rem 0 0.65rem;
}
.tone-stage {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(10, 13, 17, 0.5);
  padding: 0.45rem 0.55rem 0.5rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.tone-stage.ts-active { border-color: #6b4c22; }
.ts-head { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.ts-n {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--gen, #f5a623);
  white-space: nowrap;
}
.tone-stage.ts-cool .ts-n { color: #4f8dd4; }
.ts-d { font-size: 0.58rem; color: var(--text3); }
.ts-flow { display: flex; align-items: center; justify-content: center; color: #3d4756; font-size: 0.85rem; }
.tone-stage-grid { margin-top: 0; }
.tone-stage .control-row label { min-width: 58px; }
.body-mini {
  width: 100%;
  height: 40px;
  display: block;
  background: var(--display);
  border: 1px solid var(--border);
  border-radius: 5px;
  margin-top: 0.25rem;
}
.ts-space-note { font-size: 0.68rem; color: var(--text2); }
.ts-space-link { font-size: 0.58rem; color: var(--text3); margin-top: auto; line-height: 1.4; }
@media (max-width: 1180px) {
  .tone-chain { grid-template-columns: 1fr 1fr; }
  .ts-flow { display: none; }
}

/* ── CHORDA tone designer (owner-chosen direction 2026-07-07) ── */
.chorda { gap: 0.35rem; }
.ch-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ch-readout { font-size: 0.68rem; color: var(--text3); font-variant-numeric: tabular-nums; }
.ch-readout b { color: var(--text); font-weight: 600; }

.ch-rail { display: flex; gap: 4px; align-items: stretch; }
.ch-sep { display: flex; align-items: center; color: #3d4756; font-size: 0.8rem; }
.ch-card {
  flex: 1;
  min-width: 0;
  background: rgba(10, 13, 17, 0.5);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 8px 4px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ch-card-head { display: flex; justify-content: space-between; align-items: center; }
.ch-card-n { font-size: 0.6rem; letter-spacing: 0.14em; color: var(--text2); }
.ch-dot { width: 6px; height: 6px; border-radius: 50%; }
.ch-excitor .ch-dot { background: #f5a623; }
.ch-resonator .ch-dot { background: #58a6ff; }
.ch-body .ch-dot { background: #b48ede; }
.ch-space .ch-dot { background: #58d6a9; }
.ch-excitor.active { border-color: #6b4c22; }
.ch-resonator.active { border-color: #2b5892; }
.ch-body.active { border-color: #5b3f80; }
.ch-space.active { border-color: #2b6e57; }
.ch-card.active .ch-card-n { color: var(--text); }
.ch-thumb { width: 100%; height: 34px; display: block; background: var(--display); border-radius: 4px; }
.ch-card-sum { font-size: 0.58rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

.ch-main { display: flex; gap: 0.5rem; min-height: 0; flex: 1; }
.ch-inspector {
  width: 218px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(10, 13, 17, 0.5);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  /* Q12: never clip — the inspector scrolls itself when short on height
     (the BODY inspector used to clip at 271 px) */
  min-height: 0;
  max-height: none;
}
.ch-inspector.ch-excitor { border-color: #4a3517; }
.ch-inspector.ch-resonator { border-color: #223f63; }
.ch-inspector.ch-body { border-color: #3f2d58; }
.ch-inspector.ch-space { border-color: #224d3e; }
.ch-ins-head { display: flex; flex-direction: column; gap: 1px; }
.ch-ins-d { font-size: 0.6rem; color: var(--text3); }
.ch-caption { font-size: 0.62rem; color: var(--text3); line-height: 1.5; margin-top: auto; }
.ch-inspector .body-mini { height: 46px; }
.ch-string {
  width: 100%;
  height: 46px;
  display: block;
  background: var(--display);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.ch-inspector .space-pad { width: 100%; height: 110px; }

.ch-field-wrap { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.ch-field-wrap::-webkit-scrollbar { width: 7px; }
.ch-field-wrap::-webkit-scrollbar-thumb { background: rgba(245,166,35,0.35); border-radius: 4px; }
.ch-field-pos { position: relative; }
.ch-focus-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.ch-focus-label, .ch-lens-label { font-size: 0.58rem; letter-spacing: 0.14em; color: var(--text3); margin-right: 2px; }
.ch-chip {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text3);
  font: inherit;
  font-size: 0.62rem;
  padding: 2px 8px;
  cursor: pointer;
}
.ch-chip.active { color: #5fd4c8; border-color: #2c5b56; background: rgba(95, 212, 200, 0.07); }
.ch-focus-sum { margin-left: auto; font-size: 0.62rem; color: var(--text2); font-variant-numeric: tabular-nums; }

#cvTonePrint { flex: none; }
.ch-pin {
  position: absolute;
  z-index: 5;
  min-width: 200px;
  max-width: 250px;
  background: rgba(14, 24, 34, 0.95);
  border: 1px solid #2c5b56;
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 0.64rem;
  line-height: 1.55;
  color: var(--text2);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.ch-pin b { color: var(--text); font-weight: 600; }
.ch-pin-head { color: #5fd4c8; font-size: 0.62rem; letter-spacing: 0.1em; margin-bottom: 2px; }
.ch-pin-head span { font-size: 0.54rem; background: rgba(95, 212, 200, 0.15); padding: 1px 5px; border-radius: 3px; margin-left: 4px; }

.ch-lens-row { display: flex; gap: 6px; align-items: center; flex: none; }
#cvLens { flex: 1; height: 26px; background: var(--display); border: 1px solid var(--border); border-radius: 5px; cursor: ew-resize; display: block; }

.ch-strip { display: flex; gap: 6px; overflow-x: auto; min-height: 30px; flex: none; padding-bottom: 2px; }
.harmonic-stage::-webkit-scrollbar { width: 7px; }
.harmonic-stage::-webkit-scrollbar-thumb { background: rgba(245,166,35,0.3); border-radius: 4px; }
.ch-ch {
  flex: 0 0 128px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(10, 13, 17, 0.55);
  padding: 5px 7px;
  font-size: 0.6rem;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}
.ch-ch.pinned { border-color: #2c5b56; }
.ch-ch-name { color: var(--text); font-size: 0.66rem; }
.ch-ch-name span { color: var(--text3); font-size: 0.58rem; margin-left: 3px; }
.ch-ch-hz { color: var(--text3); margin-bottom: 3px; }
.ch-ch-row { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.ch-ch-row input[type="range"] { flex: 1; min-width: 0; height: 10px; }
.ch-ch-row i {
  display: block; height: 3px; background: rgba(88, 166, 255, 0.6); border-radius: 2px; flex: none;
  max-width: 56px;
}
.ch-ch-row span { width: 20px; }
.ch-ch-row output { margin-left: auto; }
.ch-ch-link { margin-top: 3px; color: #5fd4c8; }
.ch-ch-link.muted { color: var(--text3); }

.ch-status {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.6rem; color: var(--text3); padding-top: 2px;
  border-top: 1px solid var(--border);
}
.ch-status b { color: var(--text2); font-weight: 600; }

/* ── Tone chain rotary knobs + segmented excite (T-Q5 polish) ── */
.knob-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: flex-start;
  justify-content: flex-start;
}
.knob-cell {
  width: 62px;
  text-align: center;
  cursor: ns-resize;
  user-select: none;
  padding: 2px 0 1px;
  border-radius: 6px;
}
.knob-cell:hover { background: rgba(255, 255, 255, 0.03); }
.knob-svg { width: 44px; height: 44px; display: block; margin: 0 auto; }
.knob-label {
  font-size: 0.56rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text2);
  margin-top: -2px;
  white-space: nowrap;
}
.knob-out {
  display: block;
  font-size: 0.6rem;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.seg-control {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  width: fit-content;
  margin-bottom: 0.2rem;
}
.seg-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text3);
  font: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  cursor: pointer;
}
.seg-btn:last-child { border-right: none; }
.seg-btn.active { color: var(--gen, #f5a623); background: rgba(245, 166, 35, 0.1); }
.ts-body-row { display: flex; gap: 10px; align-items: flex-start; }
.knob-col { display: flex; flex-direction: column; gap: 2px; }
.space-pad {
  flex: 1;
  min-width: 0;
  height: 96px;
  background: var(--display);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: crosshair;
}
.body-select { flex: 1; min-width: 0; }
.editor-hint {
  font-size: 0.66rem;
  color: var(--text3);
  padding: 0.5rem 0.2rem;
  line-height: 1.5;
}

/* ── T7 tone print ── */
#cvTonePrint {
  display: block;
  width: 100%;
  height: 150px;
  background: var(--display);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: crosshair;
}
.print-bands { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.print-hint { font-size: 0.58rem; color: var(--text3); margin-right: 6px; }
.print-band {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text3);
  font: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  cursor: pointer;
}
.print-band.active { color: var(--gen, #f5a623); border-color: #6b4c22; background: rgba(245,166,35,0.07); }
.print-readout {
  margin-top: 0.35rem;
  font-size: 0.68rem;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  min-height: 1.1em;
}

.build-tag {
  font-size: 0.62em;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text3, #64707e);
  vertical-align: 1px;
  white-space: nowrap;
}

.workspace-tabs {
  margin: 0;
  padding: 2px;
  background: #070c12;
  border: 1px solid rgba(49,69,86,0.86);
  border-radius: 4px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
  display: flex;
  gap: 0;
  flex-shrink: 1;
  min-width: 0;
}

.workspace-tab {
  min-height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #8c97a5;
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.workspace-tab.active {
  background: linear-gradient(180deg, rgba(245,166,35,0.20), rgba(245,166,35,0.07));
  box-shadow: inset 0 -2px 0 rgba(245,166,35,0.65), 0 0 18px rgba(245,166,35,0.13);
  color: var(--accent2);
}

.transport-card {
  grid-column: 2 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

.transport-card .tempo-grid {
  display: none;
}

.transport-card .transport {
  display: flex;
  align-items: center;
  gap: 6px;
}

.transport-round {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2b3d4d;
  border-radius: 50%;
  background: linear-gradient(180deg, #192531, #101216);
  color: #d6dde7;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 2px rgba(0,0,0,0.18);
  cursor: pointer;
  flex-shrink: 0;
}

.transport-play {
  width: 36px;
  height: 36px;
  border-color: rgba(72,187,120,0.82);
  color: #fff;
  box-shadow:
    0 0 0 2px rgba(34,197,94,0.22),
    0 0 12px rgba(245,166,35,0.22),
    inset 0 0 0 1px rgba(245,166,35,0.58);
}

.transport-stop {
  color: #9aa7b5;
}

/* Grouped transport + icon-only secondary actions (owner 2026-07-10): keeps the
   header compact. The play button is the single play/stop toggle. */
.transport-cluster { display: flex; align-items: center; gap: 5px; }
.tc-spacer { flex: 1 1 auto; min-width: 6px; }
.transport-icon {
  color: #aeb9c6;
  font-size: 0.92rem;
  font-weight: 600;
  text-transform: none;
}
.transport-icon:hover { color: #fff; border-color: var(--border2); }
.transport-icon.rand-icon { color: var(--blue); }
.transport-icon.rand-icon:hover { color: #cfe0ff; }
.transport-icon.studio-tour-btn { color: #9aa7b5; flex-shrink: 0; }
.transport-icon.studio-tour-btn:hover { color: var(--accent); }

.rand-btn {
  min-height: 28px;
  padding: 0 8px;
  border-color: #314252;
  border-radius: 4px;
  background: linear-gradient(180deg, #15212c, #101216);
  color: #b8c2cf;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rand-btn::before {
  content: "◇";
  color: var(--blue);
  font-size: 1rem;
}

.seed-box {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: #91a0af;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.seed-box #seedBtn {
  min-height: 24px;
  margin: 0;
  padding: 0 6px;
  border: 1px solid #314252;
  border-radius: 3px;
  background: #101216;
  color: #d7dee8;
  font-family: var(--mono);
  font-size: 0.68rem;
}

.top-save-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none; /* keep its own space in the crowded transport row (the row scrolls) */
}

.top-save-bar input[type="text"] {
  min-height: 26px;
  flex: none;       /* never squish the name field (owner 2026-07-09) */
  width: 130px;
  padding: 0 6px;
  border-color: #314252;
  border-radius: 3px;
  background: #101216;
  color: #d8e0ea;
  font-size: 0.65rem;
  font-weight: 650;
}

.top-save-bar #saveBtn {
  min-height: 26px;
  padding: 0 8px;
  background: transparent;
  color: var(--accent);
  border-color: #314252;
  border-radius: 3px;
  text-transform: uppercase;
  font-size: 0.6rem;
}

/* Save collapsed into a popover (owner 2026-07-10) — keeps the header compact */
.top-save { position: relative; flex: none; }
.top-save-toggle { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.top-save-toggle .caret { font-size: 0.6rem; opacity: 0.8; }
.save-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 70;
  min-width: 232px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 9px;
  background: rgba(12, 16, 22, 0.98); border: 1px solid var(--border2);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}
.save-pop[hidden] { display: none; }
.save-pop-row { display: flex; align-items: center; gap: 8px; }
.save-pop-row > span {
  flex: none; width: 54px; font-size: 0.58rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text3);
}
.save-pop-row input[type="text"], .save-pop-row select {
  flex: 1; min-width: 0; min-height: 28px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: #101216; color: var(--text); font-size: 0.72rem;
}
.save-pop #saveBtn { min-height: 30px; text-transform: none; }

.top-rating-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.top-rating-row .label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.56rem;
  white-space: nowrap;
}

.top-rating-row input[type="range"] {
  width: 50px;
}

.top-rating-row output {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.62rem;
}

.top-library-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.top-action-btn {
  min-height: 24px;
  padding: 0 6px;
  border: 1px solid #314252;
  border-radius: 3px;
  background: linear-gradient(180deg, #16222d, #0a1016);
  color: #aeb8c5;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.visual-card {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 260px;
  grid-template-rows: 1fr;
  align-items: stretch;
  gap: 8px;
  padding: 6px 10px;
}

.visual-status {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
  padding-top: 2px;
  color: #aeb8c5;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(34,197,94,0.8);
}

.surprise-status {
  color: var(--accent);
}

.surprise-status::before {
  content: "*";
  display: inline-block;
  margin-right: 7px;
}

/* Frequency-response view-mode switcher */
.vis-mode-switch {
  /* Owner 07-07: these stack vertically */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin-top: 3px;
  width: max-content;
}
.vis-mode-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 17px;
  padding: 1px 2px;
  border: 1px solid #2f4050;
  border-radius: 3px;
  background: #101216;
  color: #8f9baa;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.vis-mode-btn:hover { color: #c3cedb; border-color: #3d5366; }
.vis-mode-btn.active {
  background: rgba(245,166,35,0.14);
  color: var(--accent2, #f5a623);
  border-color: rgba(245,166,35,0.5);
  box-shadow: inset 0 0 0 1px rgba(245,166,35,0.22);
}

/* Lanes ⇄ Roll reads as ONE segmented switch (exactly one side is always on);
   Spec reads as an independent on/off toggle with an indicator dot — it
   underlays the chosen view rather than replacing it. */
.vis-seg { display: inline-flex; }
.vis-seg .vis-mode-btn { border-radius: 0; }
.vis-seg .vis-mode-btn:first-child { border-radius: 3px 0 0 3px; }
.vis-seg .vis-mode-btn:last-child { border-radius: 0 3px 3px 0; margin-left: -1px; }
.vis-spec-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 17px; padding: 1px 7px 1px 5px;
  border: 1px dashed #2f4050; border-radius: 999px; background: #101216;
  color: #8f9baa; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.vis-spec-dot { width: 6px; height: 6px; border-radius: 50%; background: #2f4050;
  transition: background 0.15s, box-shadow 0.15s; }
.vis-spec-toggle:hover { color: #c3cedb; border-color: #3d5366; }
.vis-spec-toggle.active { color: var(--accent2, #f5a623);
  border-color: rgba(245,166,35,0.5); border-style: solid; }
.vis-spec-toggle.active .vis-spec-dot { background: var(--accent2, #f5a623);
  box-shadow: 0 0 6px rgba(245,166,35,0.7); }
.m2-chips .vis-spec-toggle { margin-left: 4px; }

.visualiser-wrap {
  border: 0;
  border-radius: 0;
  background: #0b1219;
  box-shadow: inset 0 0 0 1px rgba(59,130,246,0.08);
}

.engine-state {
  height: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-left: 1px solid rgba(49,69,86,0.65);
}

.engine-state .stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-right: 1px solid rgba(49,69,86,0.42);
  border-radius: 0;
  background: transparent;
  color: #aeb8c5;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
}

.engine-state .stat-val {
  display: block;
  color: var(--blue);
  font-family: var(--mono);
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0 18px rgba(59,130,246,0.34);
}

.engine-state .stat:first-child .stat-val {
  color: var(--green);
  text-shadow: 0 0 18px rgba(34,197,94,0.30);
}

.engine-state .stat:last-child .stat-val {
  color: var(--accent);
  text-shadow: 0 0 18px rgba(245,166,35,0.30);
}

.scale-card {
  grid-column: 1;
  grid-row: 3;
  padding: 8px 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.mode-btns {
  padding: 2px;
  background: #101216;
  border: 1px solid #2f4050;
  border-radius: 4px;
}

.mode-btn {
  min-height: 24px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #8f9baa;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mode-btn.active {
  background: rgba(245,166,35,0.13);
  color: var(--accent2);
  box-shadow: inset 0 -2px 0 rgba(245,166,35,0.68);
}

.scale-preset-row select,
.param-select,
.perc-select {
  min-height: 26px;
  border-color: #2f4050;
  background: #101216;
  font-size: 0.65rem;
}

.note-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 6px 0;
}

.note-cell {
  width: 100%;
  height: 32px;
  border-color: #2f4050;
  border-radius: 4px;
  background: linear-gradient(180deg, #151f29, #0a1016);
  font-size: 0.72rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.note-cell.in-scale {
  background: linear-gradient(180deg, rgba(59,130,246,0.62), rgba(29,78,216,0.38));
  color: #dceaff;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,0.35), 0 0 16px rgba(59,130,246,0.14);
}

.note-cell.in-sub {
  background: linear-gradient(180deg, rgba(245,166,35,0.70), rgba(146,64,14,0.44));
  color: #fff7da;
}

.note-cell.is-root {
  background: linear-gradient(180deg, rgba(34,197,94,0.60), rgba(21,128,61,0.45));
  color: #e6ffe9;
}

.note-grid-legend {
  display: flex;
  justify-content: center;
}

.root-controls {
  margin-top: 0.35rem;
}

.scale-card #cvRoot {
  height: 50px;
  background: #101216;
  border: 1px solid #273747;
}

.macro-card {
  grid-column: 2;
  grid-row: 3;
  padding: 0;
  overflow: hidden;
}

.macro-card-head {
  min-height: 34px;
  margin: 0;
  border-bottom: 1px solid rgba(49,69,86,0.82);
}

.macro-card-head > div:first-child {
  display: flex;
  align-items: center;
  min-width: 180px;
  padding: 0 10px;
}

.macro-tabs {
  flex: 1;
  min-width: 0;
  height: 34px;
  gap: 0;
}

.macro-tab {
  border: 0;
  border-left: 1px solid rgba(49,69,86,0.6);
  border-radius: 0;
  background: rgba(13,20,28,0.6);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.macro-tab.active {
  background: linear-gradient(180deg, rgba(245,166,35,0.22), rgba(245,166,35,0.04));
  box-shadow: inset 0 -2px 0 rgba(245,166,35,0.9), 0 0 18px rgba(245,166,35,0.12);
}

.macro-panel {
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

.macro-controls {
  padding: 8px 10px;
  border-right: 1px solid rgba(49,69,86,0.78);
  overflow-y: auto;
}

.macro-controls .control-row,
.structure-card .control-row,
.production-card .control-row {
  grid-template-columns: minmax(80px, 1fr) minmax(60px, 0.7fr) 38px;
  min-height: 24px;
  gap: 4px;
}

.macro-controls .control-row .label,
.structure-card .control-row .label,
.production-card .control-row .label {
  color: #aeb8c5;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.macro-controls .control-row output,
.structure-card .control-row output,
.production-card .control-row output {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 4px;
  border: 1px solid rgba(49,69,86,0.72);
  border-radius: 3px;
  background: rgba(6,10,15,0.72);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.62rem;
}

.macro-monitor {
  padding: 8px 10px;
  overflow-y: auto;
}

.monitor-title {
  color: #aeb8c5;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.macro-monitor .accuracy-canvas {
  min-height: 0;
  border: 0;
  background: #0b1219;
  box-shadow: inset 0 0 0 1px rgba(59,130,246,0.08);
}

.melody-monitor .accuracy-canvas {
  min-height: 0;
  flex: 1;
}

.compact-dist,
.register-strip {
  display: none;
}

.prob-legend {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(49,69,86,0.72);
  border-radius: 6px;
  color: #aeb8c5;
  font-size: 0.68rem;
  display: grid;
  gap: 8px;
}

.prob-legend > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.legend-bracket {
  width: 36px;
  height: 8px;
  display: inline-block;
  border-bottom: 1px solid #aeb8c5;
  border-left: 1px solid #aeb8c5;
  border-right: 1px solid #aeb8c5;
}

.feature-check {
  min-height: 32px;
  color: #aeb8c5;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.structure-card {
  grid-column: 3;
  grid-row: 3;
  padding: 8px 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.structure-card .section-label:nth-of-type(2) {
  margin-top: 12px;
}

.surprise-weight-list {
  padding-top: 12px;
}

.production-card {
  grid-column: 1 / 3;
  grid-row: 4;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}

.production-head {
  min-height: 30px;
  margin: 0;
  padding-left: 10px;
  border-bottom: 1px solid rgba(49,69,86,0.82);
}

.production-head > div:first-child {
  display: flex;
  align-items: center;
}

.production-head .micro-note {
  display: none;
}

.production-tabs {
  width: 180px;
  height: 30px;
  gap: 0;
}

.perf-tab {
  border: 0;
  border-left: 1px solid rgba(49,69,86,0.62);
  border-radius: 0;
  background: rgba(13,20,28,0.72);
  color: #8f9baa;
  font-size: 0.56rem;
  text-transform: uppercase;
}

.perf-tab.active {
  background: linear-gradient(180deg, rgba(245,166,35,0.22), rgba(245,166,35,0.04));
  color: var(--accent2);
  box-shadow: inset 0 -2px 0 rgba(245,166,35,0.9);
}

.production-panel {
  padding: 4px 8px;
  overflow: auto;
}

/* Owner 07-08: Beat / Motif / Downbeat stack vertically — three columns
   squeezed the selects and sliders in the narrow inspector. */
.production-panel .perc-layers {
  grid-template-columns: 1fr;
  gap: 8px;
}

.production-panel .perc-layer {
  padding: 8px;
  border: 1px solid rgba(49,69,86,0.72);
  border-radius: 7px;
  background: rgba(8,14,20,0.55);
}

.perc-header {
  color: #aeb8c5;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.production-card .perc-select {
  min-height: 24px;
  font-size: 0.58rem;
}

.production-panel-split {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 14px;
  height: 100%;
  align-items: stretch;
}

.production-panel-split .perf-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.production-panel-split .space-section {
  border-right: 1px solid rgba(49,69,86,0.55);
  padding-right: 14px;
}

.perf-section-title {
  color: #aeb8c5;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.production-panel-split .space-section .param-select {
  margin-bottom: 2px;
  min-height: 22px;
}

.production-panel-split .space-section .controls-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 16px;
}

.production-panel-split .control-row {
  min-width: 0;
}

.production-panel-split .control-row input[type="range"] {
  min-width: 0;
}

.production-panel-split .space-section .mini-canvas {
  height: 20px;
  margin-top: 3px;
}

.production-panel-split .percussion-section .perc-layers {
  align-content: start;
}

.output-card {
  grid-column: 3;
  grid-row: 4;
  min-width: 0;
  min-height: 0;
  padding: 6px 8px;
  overflow: hidden;
}

.output-layout {
  height: calc(100% - 18px);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(55px, 1fr) minmax(50px, 0.78fr) minmax(42px, 0.55fr);
  gap: 6px;
  align-items: stretch;
}

.output-card .section-label {
  margin-bottom: 4px;
  font-size: 0.72rem;
}

.meter-stack {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-left: 24px;
}

.meter-pair {
  height: 100%;
  min-height: 72px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.meter-pair span {
  width: 16px;
  height: 88%;
  border-radius: 2px;
  background:
    linear-gradient(180deg, #f5a623 0 12%, #22c55e 12% 72%, #14532d 72% 100%);
  box-shadow: 0 0 12px rgba(34,197,94,0.24);
}

.meter-pair span:last-child {
  height: 96%;
}

.meter-labels {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #6f7b89;
  font-family: var(--mono);
  font-size: 0.62rem;
}

.master-strip,
.limiter-strip {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  border-left: 1px solid rgba(49,69,86,0.55);
}

.vertical-fader {
  width: 36px;
  height: 56px;
  position: relative;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 45%, #2f4050 45% 55%, transparent 55%);
}

.vertical-fader span {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 24px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(180deg, #cbd5e1, #6b7786);
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

.master-strip output {
  padding: 4px 7px;
  border: 1px solid rgba(49,69,86,0.72);
  border-radius: 5px;
  background: #101216;
  color: #dbe2ea;
  font-family: var(--mono);
}

.limiter-btn {
  min-width: 48px;
  min-height: 30px;
  margin-top: 10px;
  border: 1px solid rgba(49,69,86,0.72);
  border-radius: 6px;
  background: rgba(245,166,35,0.09);
  color: var(--accent2);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.library-card {
  display: none;
  position: fixed;
  right: 16px;
  top: 104px;
  z-index: 20;
  width: min(420px, calc(100vw - 32px));
  max-height: 380px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.62);
}

.library-card.is-open {
  display: block;
}

.explore-dashboard #contributeArea:not(:empty) {
  display: none;
}

/* ── VST Aesthetic Polish Layer ─────────────────────────── */

/* ─ Surface & depth treatment ─ */
.explore-dashboard {
  background:
    linear-gradient(180deg, rgba(13,20,30,0.97), rgba(8,12,18,0.99)),
    radial-gradient(ellipse at 50% 0%, rgba(245,166,35,0.04), transparent 60%);
  border: 1px solid rgba(30,44,58,0.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    0 0 0 1px rgba(0,0,0,0.5),
    0 24px 80px rgba(0,0,0,0.55);
}

.explore-dashboard .card,
.explore-dashboard .visual-card {
  background: linear-gradient(180deg, rgba(14,22,30,0.96) 0%, rgba(9,14,20,0.98) 100%);
  border: 1px solid rgba(35,50,65,0.75);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.025),
    0 1px 3px rgba(0,0,0,0.25);
  transition: border-color 0.2s;
}

/* ─ Precision slider tracks (filled via JS inline gradient) ─ */
.explore-dashboard input[type="range"] {
  height: 3px;
  background: rgba(43,47,55,0.95);
  border-radius: 2px;
  transition: box-shadow 0.12s;
}

/* ─ Neutral precision thumbs: chrome stays monochrome; the data-hued
   fill (generation/accuracy/surprise) carries the colour. ─ */
.explore-dashboard input[type="range"]::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  background: #cfd4dc;
  border: 2px solid var(--bg);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: box-shadow 0.12s, background 0.12s;
}

.explore-dashboard input[type="range"]::-webkit-slider-thumb:hover {
  background: #eef0f4;
  box-shadow: 0 0 0 4px rgba(207,212,220,0.12), 0 1px 3px rgba(0,0,0,0.4);
}

.explore-dashboard input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  background: #cfd4dc;
  border: 2px solid var(--bg);
  border-radius: 50%;
}

.explore-dashboard input[type="range"]:active::-webkit-slider-thumb {
  background: #ffffff;
  box-shadow: 0 0 0 5px rgba(207,212,220,0.18), 0 1px 3px rgba(0,0,0,0.4);
}

/* ─ LED-style checkboxes ─ */
.explore-dashboard input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  min-width: 14px;
  border: 1.5px solid rgba(45,62,78,0.9);
  border-radius: 3px;
  background: #0d0f13;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

.explore-dashboard input[type="checkbox"]:hover {
  border-color: rgba(245,166,35,0.35);
}

.explore-dashboard input[type="checkbox"]:checked {
  background: rgba(245,166,35,0.12);
  border-color: rgba(245,166,35,0.65);
  box-shadow:
    0 0 8px rgba(245,166,35,0.35),
    inset 0 0 4px rgba(245,166,35,0.15);
}

.explore-dashboard input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: radial-gradient(circle, #ffc768, #f5a623);
  border-radius: 1.5px;
  box-shadow: 0 0 4px rgba(245,166,35,0.6);
}

/* ─ Select dropdowns ─ */
.explore-dashboard select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #0d0f13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23667788'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  border: 1px solid rgba(40,55,70,0.85);
  border-radius: 4px;
  color: #c8d2dc;
  font-family: inherit;
  font-size: 0.72rem;
  transition: border-color 0.15s;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

.explore-dashboard select:hover {
  border-color: rgba(245,166,35,0.3);
}

.explore-dashboard select:focus {
  outline: none;
  border-color: rgba(245,166,35,0.55);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), 0 0 6px rgba(245,166,35,0.15);
}

/* ─ Text inputs ─ */
.explore-dashboard input[type="text"],
.explore-dashboard input[type="number"] {
  background: #0d0f13;
  border: 1px solid rgba(40,55,70,0.85);
  color: #d6dde7;
  border-radius: 4px;
  transition: border-color 0.15s;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

.explore-dashboard input[type="text"]:focus,
.explore-dashboard input[type="number"]:focus {
  outline: none;
  border-color: rgba(245,166,35,0.55);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), 0 0 6px rgba(245,166,35,0.15);
}

/* ─ Section labels ─ */
.explore-dashboard .section-label {
  color: #94a3b5;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  margin-bottom: 2px;
}

/* ─ Control row labels & outputs ─ */
.explore-dashboard .control-row .label {
  color: #8b99a8;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.explore-dashboard .control-row output {
  min-height: 18px;
  padding: 0 4px;
  border: 1px solid rgba(35,50,65,0.8);
  border-radius: 3px;
  background: rgba(5,8,12,0.85);
  color: #f5a623;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
  text-shadow: 0 0 8px rgba(245,166,35,0.3);
}

/* ─ Transport polish ─ */
.transport-play {
  width: 36px;
  height: 36px;
  background: linear-gradient(180deg, #1a3024 0%, #0b1a14 100%);
  border-color: rgba(34,197,94,0.7);
  color: #fff;
  font-weight: 800;
  box-shadow:
    0 0 0 2px rgba(34,197,94,0.18),
    0 0 12px rgba(34,197,94,0.2),
    inset 0 0 0 1px rgba(34,197,94,0.2),
    inset 0 1px 0 rgba(255,255,255,0.06);
  text-shadow: 0 0 8px rgba(34,197,94,0.5);
  transition: all 0.2s;
}

.transport-play:hover {
  box-shadow:
    0 0 0 3px rgba(34,197,94,0.25),
    0 0 28px rgba(34,197,94,0.35),
    0 0 50px rgba(34,197,94,0.12),
    inset 0 0 0 2px rgba(34,197,94,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08);
  border-color: rgba(34,197,94,0.9);
}

.transport-round {
  transition: all 0.15s;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.transport-round:hover {
  border-color: rgba(148,163,181,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 12px rgba(148,163,181,0.1);
}

.transport-stop:hover {
  color: #d6dde7;
}

/* ─ Randomise button ─ */
.rand-btn {
  font-weight: 700;
  font-size: 0.58rem;
  transition: all 0.15s;
  min-height: 28px;
  padding: 0 8px;
}

.rand-btn:hover {
  border-color: rgba(59,130,246,0.4);
  box-shadow: 0 0 10px rgba(59,130,246,0.12);
  color: #d6dde7;
}

/* ─ Title area ─ */
.explore-top h1 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #f0f2f5, #b8c4d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  white-space: nowrap;
  flex-shrink: 0;
  /* When the column is tight the version tail truncates; the brand never
     scrolls off-screen (the old overflow:hidden header could be shoved
     left by click-focus on the account pill). */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─ Workspace tabs ─ */
.workspace-tabs {
  background: rgba(5,8,12,0.85);
  border: 1px solid rgba(35,50,65,0.7);
  border-radius: 4px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.5);
  padding: 2px;
}

.workspace-tab {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-height: 22px;
  height: 22px;
  padding: 0 6px;
  transition: all 0.15s;
  border-radius: 3px;
  white-space: nowrap;
  /* buttons and the Producer LINK share identical metrics — the link used
     to float above its siblings (owner: "ugly and misaligned") */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
  vertical-align: middle;
}
.workspace-tabs { align-items: center; }

.workspace-tab:hover:not(.active) {
  color: #b8c4d0;
  background: rgba(255,255,255,0.03);
}

.workspace-tab.active {
  background: linear-gradient(180deg, rgba(245,166,35,0.18), rgba(245,166,35,0.06));
  box-shadow: inset 0 -2px 0 rgba(245,166,35,0.7), 0 0 12px rgba(245,166,35,0.1);
  color: #ffc768;
  text-shadow: 0 0 10px rgba(245,166,35,0.3);
}

/* ─ Frequency response area ─ */
.visual-card {
  background: linear-gradient(180deg, rgba(12,18,26,0.97), rgba(8,12,18,0.99));
}

.visualiser-wrap {
  background: #0d0f13;
  border: 1px solid rgba(25,38,52,0.6);
  border-radius: 3px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.4);
}

.visual-status {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.status-dot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 8px rgba(34,197,94,0.7), 0 0 3px rgba(34,197,94,0.5);
}

.surprise-status {
  color: #e8a308;
  text-shadow: 0 0 8px rgba(245,166,35,0.2);
}

/* ─ Engine state counters ─ */
.engine-state .stat {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #7a8a9a;
}

.engine-state .stat-val {
  font-weight: 700;
  font-size: clamp(0.9rem, 1.6vw, 1.3rem);
}

/* ─ Scale card ─ */
.mode-btns {
  display: flex;
  gap: 3px;
  background: rgba(5,8,12,0.85);
  border: 1px solid rgba(35,50,65,0.7);
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
  padding: 2px;
}

.mode-btn {
  flex: 1 1 0;
  text-align: center;
  font-weight: 700;
  transition: all 0.15s;
}

.mode-btn:hover:not(.active) {
  color: #b8c4d0;
  background: rgba(255,255,255,0.03);
}

.mode-btn.active {
  background: rgba(245,166,35,0.12);
  color: #ffc768;
  box-shadow: inset 0 -2px 0 rgba(245,166,35,0.7);
  text-shadow: 0 0 8px rgba(245,166,35,0.2);
}

/* ─ Note grid ─ */
.note-cell {
  height: 30px;
  border: 1px solid rgba(35,50,65,0.7);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(15,22,30,0.95), rgba(8,12,18,0.98));
  font-size: 0.66rem;
  font-weight: 700;
  color: #556677;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition: all 0.12s;
}

.note-cell:hover {
  border-color: rgba(100,120,140,0.5);
}

.note-cell.in-scale {
  background: linear-gradient(180deg, rgba(59,130,246,0.55), rgba(29,78,216,0.35));
  border-color: rgba(59,130,246,0.45);
  color: #d4e4ff;
  box-shadow:
    inset 0 1px 0 rgba(96,165,250,0.2),
    0 0 10px rgba(59,130,246,0.12);
  text-shadow: 0 0 6px rgba(59,130,246,0.3);
}

.note-cell.in-sub {
  background: linear-gradient(180deg, rgba(245,166,35,0.65), rgba(180,83,9,0.40));
  border-color: rgba(245,166,35,0.5);
  color: #fff5d4;
  box-shadow:
    inset 0 1px 0 rgba(251,191,36,0.2),
    0 0 10px rgba(245,166,35,0.12);
  text-shadow: 0 0 6px rgba(245,166,35,0.3);
}

.note-cell.is-root {
  background: linear-gradient(180deg, rgba(34,197,94,0.55), rgba(21,128,61,0.40));
  border-color: rgba(34,197,94,0.5);
  color: #d4ffd8;
  box-shadow:
    inset 0 1px 0 rgba(34,197,94,0.2),
    0 0 10px rgba(34,197,94,0.12);
  text-shadow: 0 0 6px rgba(34,197,94,0.3);
}

/* ─ Macro tabs ─ */
.macro-tab {
  color: #6b7a8a;
  font-weight: 700;
  transition: all 0.15s;
}

.macro-tab:hover:not(.active) {
  color: #94a3b5;
  background: rgba(255,255,255,0.02);
}

.macro-tab.active {
  color: #ffc768;
  text-shadow: 0 0 10px rgba(245,166,35,0.25);
}

/* ─ Macro card head ─ */
.macro-card-head {
  border-bottom: 1px solid rgba(35,50,65,0.7);
}

/* ─ Macro sub-tabs (GEN / ACC / SURP) ─ */
.macro-sub-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 4px;
  padding: 2px;
  background: rgba(10,18,25,0.5);
  border-radius: 4px;
}
.macro-sub-tabs .sub-tab {
  flex: 1;
  padding: 3px 0;
  font: 700 0.52rem/1 'SF Mono', 'Fira Code', monospace;
  letter-spacing: 0.08em;
  text-align: center;
  color: rgba(130,150,170,0.5);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.macro-sub-tabs .sub-tab:hover {
  color: rgba(180,200,220,0.7);
  background: rgba(30,45,60,0.3);
}
.macro-sub-tabs .sub-tab.active {
  color: rgba(245,180,30,0.9);
  background: rgba(245,180,30,0.08);
  border-color: rgba(245,180,30,0.2);
}

/* ─ Macro subsections ─ */
.macro-subsection {
  padding: 2px 0;
  transition: opacity 0.2s;
}
.macro-subsection.surprise-disabled {
  opacity: 0.45;
}
.macro-subsection .subsection-label {
  font: 700 0.5rem/1 'SF Mono', 'Fira Code', monospace;
  letter-spacing: 0.1em;
  color: rgba(130,150,170,0.45);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.macro-subsection.active .subsection-label {
  color: rgba(245,180,30,0.65);
}

/* ─ Register mini plot ─ */
.register-mini-section {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(35,50,65,0.4);
}
.register-mini-section .subsection-label {
  font: 700 0.5rem/1 'SF Mono', 'Fira Code', monospace;
  letter-spacing: 0.1em;
  color: rgba(130,150,170,0.45);
  text-transform: uppercase;
  margin-bottom: 4px;
  /* the 8va buttons sit in the label row — flex keeps them inside it
     instead of floating over the sliders below */
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.register-mini-canvas {
  width: 100%;
  height: 40px;
  background: rgba(5,10,8,0.5);
  border-radius: 3px;
  margin-top: 2px;
}

/* ─ Macro monitor ─ */
.monitor-title {
  color: #7a8a9a;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.07em;
}

/* ─ CRT LED display screen ─ */
.macro-monitor .accuracy-canvas {
  background: #050a08;
  border-radius: 5px;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(20,35,28,0.5),
    0 0 8px rgba(34,197,94,0.04),
    0 1px 3px rgba(0,0,0,0.5);
  outline: 1px solid rgba(30,45,38,0.3);
  outline-offset: 1px;
}

/* One vertical rhythm for every macro probability display.  The macro
   inspector is narrow, so it gets a compact height while the larger legacy
   macro panel keeps enough room for the CRT labels and live-note trace. */
.macro-monitor {
  --macro-display-height: 220px;
}

.macro-monitor .accuracy-canvas,
.melody-monitor .accuracy-canvas,
.duration-monitor .accuracy-canvas {
  display: block;
  width: 100%;
  height: var(--macro-display-height) !important;
  min-height: var(--macro-display-height);
  max-height: var(--macro-display-height);
  flex: 0 0 var(--macro-display-height);
}

.m2-inspector .macro-monitor {
  --macro-display-height: 150px;
  flex: none;
  overflow: visible;
}

/* ─ Structure / Markov card ─ */
.structure-card .section-label {
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ─ Production card ─ */
.production-head {
  border-bottom: 1px solid rgba(35,50,65,0.7);
}

.perf-tab {
  color: #6b7a8a;
  font-weight: 700;
  transition: all 0.15s;
}

.perf-tab:hover:not(.active) {
  color: #94a3b5;
  background: rgba(255,255,255,0.02);
}

.perf-tab.active {
  color: #ffc768;
  text-shadow: 0 0 10px rgba(245,166,35,0.25);
}

.production-panel .perc-layer {
  border: 1px solid rgba(30,45,58,0.7);
  border-radius: 5px;
  background: rgba(6,10,16,0.65);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.perc-header {
  color: #7a8a9a;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* ─ Output card ─ */
.output-card {
  background: linear-gradient(180deg, rgba(14,22,30,0.97), rgba(9,14,20,0.99));
}

.output-card .section-label {
  color: #8b99a8;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ─ VU meters: segmented LED style ─ */
.meter-pair span {
  width: 18px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 1px,
      rgba(0,0,0,0.5) 1px,
      rgba(0,0,0,0.5) 3px
    ),
    linear-gradient(
      180deg,
      #ef4444 0%,
      #f5a623 8%,
      #f5a623 15%,
      #22c55e 15%,
      #22c55e 65%,
      #15803d 65%,
      #0a3d1e 100%
    );
  box-shadow:
    0 0 8px rgba(34,197,94,0.2),
    inset 0 0 4px rgba(34,197,94,0.1);
}

.meter-labels {
  color: #4a5968;
  font-size: 0.58rem;
  font-weight: 700;
}

/* ─ Master fader ─ */
.vertical-fader {
  background: linear-gradient(
    90deg,
    transparent 42%,
    rgba(35,50,65,0.6) 42%,
    rgba(35,50,65,0.6) 58%,
    transparent 58%
  );
}

.vertical-fader span {
  background: linear-gradient(180deg, #d4dce6, #8b99a8, #6b7a8a);
  border-radius: 3px;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}

.master-strip output {
  font-size: 0.6rem;
  font-weight: 700;
  border: 1px solid rgba(35,50,65,0.7);
  background: #060a10;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
  text-shadow: 0 0 6px rgba(200,210,220,0.15);
}

/* ─ Limiter button ─ */
.limiter-btn {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(245,166,35,0.1);
  border: 1px solid rgba(245,166,35,0.35);
  color: #ffc768;
  box-shadow: 0 0 8px rgba(245,166,35,0.1);
  transition: all 0.15s;
  text-shadow: 0 0 6px rgba(245,166,35,0.25);
}

.limiter-btn:hover {
  background: rgba(245,166,35,0.15);
  border-color: rgba(245,166,35,0.5);
  box-shadow: 0 0 12px rgba(245,166,35,0.2);
}

/* ─ Save button ─ */
.top-save-bar #saveBtn {
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #f5a623;
  transition: all 0.15s;
  text-shadow: 0 0 8px rgba(245,166,35,0.2);
}

.top-save-bar #saveBtn:hover {
  border-color: rgba(245,166,35,0.4);
  background: rgba(245,166,35,0.06);
  box-shadow: 0 0 10px rgba(245,166,35,0.12);
}

/* ─ Library/Preset action buttons ─ */
.top-action-btn {
  font-weight: 800;
  transition: all 0.15s;
  color: #8b99a8;
}

.top-action-btn:hover {
  border-color: rgba(148,163,181,0.4);
  background: linear-gradient(180deg, #1a2836, #0c1420);
  color: #b8c4d0;
}

/* ─ Seed box ─ */
.seed-box #seedBtn {
  font-weight: 700;
  transition: border-color 0.15s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

.seed-box #seedBtn:hover {
  border-color: rgba(148,163,181,0.4);
}

/* ─ Scrollbar refinement ─ */
.explore-dashboard .card::-webkit-scrollbar {
  width: 5px;
}

.explore-dashboard .card::-webkit-scrollbar-track {
  background: rgba(5,8,12,0.5);
}

.explore-dashboard .card::-webkit-scrollbar-thumb {
  background: rgba(45,60,78,0.6);
  border-radius: 3px;
}

.explore-dashboard .card::-webkit-scrollbar-thumb:hover {
  background: rgba(60,80,100,0.7);
}

/* ─ Feature check labels ─ */
.feature-check {
  font-size: 0.65rem;
  font-weight: 700;
  color: #8b99a8;
  letter-spacing: 0.05em;
  transition: color 0.15s;
}

.feature-check:hover {
  color: #b8c4d0;
}

/* ─ Probability legend ─ */
.prob-legend {
  border: 1px solid rgba(30,45,58,0.6);
  background: rgba(5,8,12,0.4);
  border-radius: 4px;
  color: #7a8a9a;
  font-weight: 600;
}

/* ─ Rating slider ─ */
.top-rating-row .label {
  color: #7a8a9a;
  font-size: 0.62rem;
  font-weight: 800;
}

.top-rating-row output {
  font-weight: 700;
  text-shadow: 0 0 8px rgba(245,166,35,0.25);
}

/* ─ Surprise weight list ─ */
.surprise-weight-list .control-row output {
  text-shadow: 0 0 6px rgba(245,166,35,0.2);
}

/* ─ Global transitions ─ */
.explore-dashboard button,
.explore-dashboard .btn {
  transition: all 0.15s ease;
}

/* ─ Canvas containers ─ */
.scale-card #cvRoot {
  background: #070c12;
  border: 1px solid rgba(25,38,52,0.6);
  border-radius: 3px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.4);
}

/* ─ Section divider refinement ─ */
.explore-top {
  border-right: 1px solid rgba(35,50,65,0.45);
}

.engine-state {
  border-left: 1px solid rgba(35,50,65,0.5);
}

.engine-state .stat {
  border-right: 1px solid rgba(35,50,65,0.35);
}

.macro-controls {
  border-right: 1px solid rgba(35,50,65,0.6);
}

.master-strip,
.limiter-strip {
  border-left: 1px solid rgba(35,50,65,0.45);
}

/* ─ Toggle switch style for feature-check checkboxes ─ */
.explore-dashboard .feature-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.explore-dashboard .feature-check input[type="checkbox"] {
  width: 36px;
  height: 20px;
  min-width: 36px;
  border-radius: 10px;
  border: 1.5px solid rgba(45,62,78,0.9);
  background: #0a1018;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.5);
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.explore-dashboard .feature-check input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, #4a5568, #2d3748);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: all 0.2s ease;
}

.explore-dashboard .feature-check input[type="checkbox"]:checked {
  background: rgba(245,166,35,0.2);
  border-color: rgba(245,166,35,0.6);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.3), 0 0 8px rgba(245,166,35,0.2);
}

.explore-dashboard .feature-check input[type="checkbox"]:checked::after {
  left: calc(100% - 16px);
  background: radial-gradient(circle at 40% 35%, #fcd34d, #f5a623);
  box-shadow: 0 0 6px rgba(245,166,35,0.6), 0 1px 3px rgba(0,0,0,0.3);
}

/* ─ Transport icon styling ─ */
.transport-play {
  font-size: 1.3rem;
  letter-spacing: -0.05em;
}

.transport-play.is-playing {
  font-size: 1.1rem;
  letter-spacing: 0.1em;
}

.transport-stop {
  font-size: 1.1rem;
  color: #7a8a9a;
}

.transport-stop:hover {
  color: #b8c4d0;
}

/* ─ Preset navigation in transport ─ */
.top-save-bar input[type="text"] {
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

/* ─ Section label refinement matching mockup ─ */
.structure-card > .section-label:first-child {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(35,50,65,0.4);
  margin-bottom: 10px;
}

/* ─ Surprise section separator ─ */
.structure-card .section-label + .section-label,
.structure-card .section-label:nth-of-type(2) {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(35,50,65,0.4);
}

/* ─ Surprise weight labels ─ */
.surprise-weight-list {
  padding-top: 8px;
}

.surprise-weight-list .section-subhead {
  color: #7a8a9a;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

/* ─ Full note grid showing all 12 notes ─ */
.note-grid {
  gap: 4px;
  margin: 4px 0;
}

/* ─ Production section - more compact ─ */
.production-panel .perc-layers {
  gap: 5px;
}

.production-panel .perc-layer {
  padding: 4px 6px;
}

/* ─ Macro panel register controls visible ─ */
.macro-controls .section-subhead {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(35,50,65,0.3);
}

/* ─ Density improvements ─ */
.explore-dashboard .controls-grid {
  gap: 3px;
}

.explore-dashboard .control-row {
  min-height: 22px;
  gap: 0.2rem;
}

/* Scale to fit viewport if smaller than fixed plugin size */
@media (max-width: 1460px), (max-height: 810px) {
  body.explore-mode,
  body.explore-mode #app {
    align-items: flex-start;
    justify-content: flex-start;
  }
  .explore-dashboard {
    transform-origin: top left;
    /* Q12 QA: the original `transform: scale(min(calc(100vw / 1446), …))`
       was INVALID CSS — scale() takes a number, calc(100vw/1446) is a
       length — so the scale-to-fit design silently never applied and
       small viewports just clipped the right of the plugin. The scale is
       now computed in JS (fitStudioScale in app.js). */
  }
}

/* ── Output meters + limiter state ─────────────────────────── */
.meter-pair span {
  transform-origin: bottom center;
  transition: transform 0.06s linear;
}
.vertical-fader { cursor: ns-resize; touch-action: none; }
.vertical-fader span { transition: top 0.04s linear; cursor: grab; }
.limiter-btn { cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.limiter-btn.active {
  background: rgba(34,197,94,0.14);
  color: var(--green, #22c55e);
  box-shadow: inset 0 0 0 1px rgba(34,197,94,0.4);
}
.limiter-btn:not(.active) {
  background: rgba(49,69,86,0.18);
  color: #6f7b89;
  box-shadow: none;
}

/* ── Welcome / research opt-in ───────────────────────────── */

/* The welcome card floats over the studio on first visit instead of taking
   a row in the fixed-height dashboard grid (which squashed the workspace
   to nothing). Audit P0 / phase-01 render: compact centred choice card —
   audition strip + Just Play / Share Ratings / Load Demo. */
.welcome-card {
  border-color: var(--border2);
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  position: fixed;
  inset: 0;
  z-index: 60;
  margin: auto;
  width: min(680px, calc(100vw - 48px));
  height: fit-content;
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: 1.4rem 1.6rem !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  text-align: center;
}

.welcome-card::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(4, 6, 10, 0.62);
}

.welcome-card h2 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.welcome-card p {
  color: var(--text2);
  font-size: 0.92rem;
  max-width: 60ch;
  margin: 0 auto;
}

.welcome-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

/* The Soundinator marks: the street organ, themed to the UI's ink. The wide
   lockup goes where there's horizontal room; the square icon fits corners. */
.app-mark-bg { fill: var(--display); stroke: var(--text2); stroke-linecap: round; stroke-linejoin: round; }
.app-mark-art { fill: var(--surface2); stroke: var(--text2); stroke-linecap: round; stroke-linejoin: round; }
.app-mark-detail { fill: none; stroke: var(--text2); stroke-linecap: round; stroke-linejoin: round; }
.app-mark-fill { fill: var(--text2); }
.app-icon .app-mark-bg, .app-icon .app-mark-art { stroke-width: 24; }
.app-icon .app-mark-detail { stroke-width: 14; }
.app-logo .app-mark-bg, .app-logo .app-mark-art { stroke-width: 6; }
.app-logo .app-mark-detail { stroke-width: 3; }
.app-icon { width: 26px; height: 26px; flex: none; vertical-align: middle; overflow: visible; }
.app-icon.sm { width: 20px; height: 20px; }
.app-logo { width: 86px; height: 30px; flex: none; vertical-align: middle; overflow: visible; }
.app-logo.lg { width: 126px; height: 44px; }
/* The wordmark rows centre everything on one line — mark, name, build tag,
   and the account pill all share a baseline (owner 2026-07-15). */
.explore-top { align-items: center; }
.explore-title { min-width: 0; flex: 1 1 auto; }
/* The header column is user-resizable and often narrow: the brand name and
   the account pill's name BOTH shrink, so neither vanishes outright. */
.explore-top .account-bar { flex: 0 1 auto; min-width: 0; }
.explore-top .account-bar .acct-pill { min-width: 0; max-width: 100%; }
.explore-top .account-bar .acct-name { flex: 0 1 auto; min-width: 2ch; }
.explore-title h1 { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; min-width: 0; }
/* The wordmark takes a rounded face wherever it sits beside the machine
   marks — matching the artwork's fat round line-caps. */
:root { --brand-font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Quicksand", "Comfortaa", var(--font); }
.explore-title .app-name { overflow: hidden; text-overflow: ellipsis; min-width: 0;
  font-family: var(--brand-font); font-weight: 800; letter-spacing: .02em; }
.welcome-hero h2 { font-family: var(--brand-font); font-weight: 800; letter-spacing: .02em; }
.auth-modal header h3 { font-family: var(--brand-font); font-weight: 800; letter-spacing: .02em; }
.landing-header h1 { font-family: var(--brand-font); font-weight: 800; letter-spacing: .02em; }
.explore-title .build-tag { flex: none; }
/* The header column is user-resizable, so the wordmark responds to the
   COLUMN's width, not the window's: full lockup when roomy, then the build
   tag yields, then the name — the machine logo alone carries the brand in a
   tight corner. */
.explore-top { container-type: inline-size; }
@container (max-width: 560px) { .explore-title .build-tag { display: none; } }
@container (max-width: 400px) { .explore-title .app-name { display: none; } }
.daw-title { display: inline-flex; align-items: center; gap: 7px; }

.welcome-rule {
  position: relative;
  height: 1px;
  margin: 0.9rem auto 0.8rem;
  width: min(340px, 80%);
  background: linear-gradient(90deg, transparent, var(--border2), transparent);
}
.welcome-rule i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
}

.welcome-tagline {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.welcome-audition {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--display);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  margin-bottom: 1rem;
}
.welcome-wave {
  flex: 1;
  height: 32px;
  min-width: 0;
  color: #5b8fd4;
}
.welcome-wave rect { fill: currentColor; }
.welcome-audition-play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--accent);
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.welcome-audition-play:hover { border-color: var(--accent); background: #f5a62318; }

.welcome-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  align-items: stretch;
}
@media (max-width: 640px) { .welcome-choices { grid-template-columns: 1fr; } }

.welcome-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 0.8rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
}
.welcome-choice h3 { font-size: 0.95rem; }
.welcome-choice p { font-size: 0.78rem; line-height: 1.45; }
.welcome-choice-featured {
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.08) inset;
}

.welcome-choice-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 1.15rem;
}
.wc-amber  { color: var(--accent); background: #f5a62318; }
.wc-green  { color: var(--green);  background: #22c55e18; }
.wc-purple { color: var(--rootc);  background: #8b7cf618; }

.welcome-cta {
  margin-top: auto;
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}
.welcome-cta:hover { filter: brightness(1.12); }
.cta-amber  { background: var(--accent); color: #16181d; }
.cta-green  { background: var(--green);  color: #08130b; }
.cta-purple { background: var(--rootc);  color: #0d0a1c; }

.welcome-scale {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}
.welcome-scale span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}
.welcome-scale span.on {
  border: 1px solid var(--green);
  border-radius: 50%;
  color: var(--green);
}
.welcome-scale-ends {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.62rem;
  color: var(--text3);
}

.welcome-share-step p { font-size: 0.85rem; }

.welcome-anon {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--text2);
}

.welcome-demographics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
  margin: 0.9rem 0;
}

.welcome-demographics label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text2);
}

.welcome-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0.6rem;
}

.welcome-smallprint {
  font-size: 0.78rem;
  color: var(--text3);
}

.research-note {
  margin-top: 1.2rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text3);
}

.link-btn {
  background: none;
  border: none;
  color: var(--blue);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  padding: 0;
}

/* ── Modular preset sections ─────────────────────────────── */

.top-save-bar select {
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.4rem;
  font-size: 0.66rem;
  flex: none;
  max-width: 90px; /* "Everything" doesn't need 130px — keep the row compact */
}

.section-chip {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  border: 1px solid var(--border2);
  color: var(--accent2);
  background: rgba(245, 158, 11, 0.08);
  white-space: nowrap;
}

.section-chip.chip-full {
  color: var(--text3);
  background: rgba(136, 153, 170, 0.08);
}

/* ── Preset browser: section filters + in-context preview ── */

.library-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.7rem 0 0.9rem;
}

.filter-chip {
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}

.filter-chip:hover { border-color: var(--border2); color: var(--text); }

.filter-chip.active {
  color: var(--accent2);
  border-color: rgba(245,166,35,0.5);
  background: rgba(245,166,35,0.08);
}

.preview-btn { min-width: 2rem; }

.preview-btn.previewing {
  color: var(--surp);
  border-color: rgba(56,189,248,0.5);
  background: rgba(56,189,248,0.1);
}

/* ── Display hover readout ───────────────────────────────── */

.dist-readout {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background: rgba(16,18,22,0.94);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text2);
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}

.dist-readout strong { color: var(--text); font-weight: 600; margin-right: 0.15rem; }
.dist-readout .dr-gen  { color: var(--gen); }
.dist-readout .dr-acc  { color: var(--acc); }
.dist-readout .dr-surp { color: var(--surp); }

/* ── Per-panel preset bars ───────────────────────────────── */

.panel-presets {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.3rem 0 0.55rem;
}

.panel-presets select {
  flex: 1;
  min-width: 0;
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.22rem 0.4rem;
  font-size: 0.72rem;
}

.panel-presets .btn {
  flex: none;
  white-space: nowrap;
}

.panel-preset-control { align-items: stretch; }
.panel-preset-picker { flex: 1; min-width: 0; }
.panel-preset-display { min-height: 34px; box-sizing: border-box; }
.panel-preset-name-input {
  flex: 1; min-width: 0; width: 100%; box-sizing: border-box;
  border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-weight: 600; padding: 0;
}
.panel-preset-save:disabled {
  opacity: 0.34; cursor: not-allowed; filter: grayscale(0.75);
}
.panel-preset-save:not(:disabled) {
  border-color: rgba(245,166,35,0.58); color: #ffd28a;
  background: rgba(245,166,35,0.08);
}

/* ── Instrument library tab ──────────────────────────────── */

.instrument-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.6rem;
}

/* ── Producer mode ───────────────────────────────────────── */

.produce-view { display: flex; flex-direction: column; gap: 10px; }

.produce-top {
  display: flex; align-items: center; justify-content: space-between;
}
.produce-top h1 { font-size: 1.25rem; letter-spacing: 0.05em; }
.produce-actions { display: flex; gap: 0.5rem; }

.produce-browser .produce-sources {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
}

.source-chip {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.source-chip:hover { border-color: var(--accent); background: rgba(245,166,35,0.08); }
.source-chip.chip-factory { color: var(--text2); }

.timeline-grid { display: flex; flex-direction: column; gap: 4px; overflow-x: auto; }

.tl-row {
  display: grid;
  grid-template-columns: 130px repeat(16, minmax(38px, 1fr));
  gap: 3px;
  align-items: stretch;
}

.tl-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.72rem;
  color: var(--text);
  overflow: hidden;
}
.tl-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-remove {
  background: none; border: none; color: var(--text3);
  cursor: pointer; font-size: 0.85rem; line-height: 1;
}
.tl-remove:hover { color: var(--red); }

.tl-cell {
  min-height: 34px;
  background: var(--display);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 0.1s;
}
.tl-cell:hover { border-color: var(--accent); }

.tl-region {
  min-height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,166,35,0.16);
  border: 1px solid rgba(245,166,35,0.55);
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.62rem;
}
.tl-region.selected {
  border-color: var(--surp);
  box-shadow: 0 0 0 1px rgba(56,189,248,0.5);
}
.tl-seed { color: var(--accent2); font-family: var(--mono); }

.region-toolbar {
  display: flex; gap: 0.5rem; align-items: center;
  margin-top: 0.7rem;
}
.toolbar-hint { color: var(--text3); font-size: 0.78rem; }

.workspace-link { text-decoration: none; }

/* ── Formant detail disclosure ───────────────────────────── */

.formant-detail { margin-top: 0.6rem; }
.formant-detail summary {
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  user-select: none;
}
.formant-detail summary:hover { color: var(--text2); }
.formant-detail[open] summary { color: var(--text2); margin-bottom: 0.5rem; }

/* ── Producer session bar ────────────────────────────────── */

.session-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.4rem;
  align-items: center;
}

.session-controls label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  color: var(--text2);
}

.session-controls input[type="range"] { width: 110px; }

.session-controls select {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.35rem;
  font-size: 0.74rem;
}

.session-controls output {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent2);
  min-width: 2.2ch;
}

/* ── Arrangement playhead ────────────────────────────────── */

.tl-cell.playhead { border-color: var(--surp); background: rgba(56,189,248,0.06); }
.tl-region.playhead {
  border-color: var(--surp);
  box-shadow: 0 0 0 1px rgba(56,189,248,0.6), 0 0 10px rgba(56,189,248,0.25);
}

/* ── Producer v2: region length, track gain ──────────────── */

.tl-len {
  margin-left: 0.35rem;
  color: var(--text2);
  font-family: var(--mono);
  font-size: 0.6rem;
}

.tl-head .tl-gain {
  width: 46px;
  height: 3px;
  flex: none;
}

/* ── Touch ergonomics: coarse pointers get bigger targets ── */

@media (pointer: coarse) {
  input[type="range"] { height: 6px; }
  input[type="range"]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
  }
  input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
  }
  .explore-dashboard input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }
  .btn, .filter-chip, .m-chip, .tab, .workspace-tab {
    min-height: 38px;
  }
  .preset-item .actions .btn { padding: 0.5rem 0.9rem; }
}

/* ── Baked-region piano roll ─────────────────────────────── */

.roll-panel { margin-top: 0.8rem; }

.roll-panel canvas {
  display: block;
  width: 100%;
  height: 240px;
  background: var(--display);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.roll-readout {
  margin-top: 0.45rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}

/* ── DAW shell (producer v2 P1) ──────────────────────────── */

.daw {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 20px);
  gap: 0;
}

.daw-transport {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
}

.daw-title {
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  margin-right: 0.4rem;
}

.daw-sep {
  width: 1px;
  height: 22px;
  background: var(--border2);
}

.daw-ctx {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--text2);
}
.daw-ctx input[type="range"] { width: 84px; }
.daw-ctx select {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.16rem 0.3rem;
  font-size: 0.7rem;
}
.daw-ctx output {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent2);
}

.daw-main {
  /* Grid so the library (left) spans full height and rises to the top, while
     the transport/edit bar sits only over the track area (top-right). The
     first column track is set inline from dawLayout.leftW. */
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 250px 6px 1fr;
  grid-template-areas:
    "left vsplit regionbar"
    "left vsplit center";
  flex: 1;
  min-height: 0;
}
.daw-main > .daw-left { grid-area: left; min-height: 0; width: auto; }
.daw-main > .daw-vsplit { grid-area: vsplit; height: auto; }
.daw-main > .daw-center { grid-area: center; min-height: 0; }
/* The region edit bar (Stop loop / Bake / Reroll / seed / Split) sits at the
   top of the track column — starting after the left library pane — while the
   main transport stays full-width across the top. */
.daw-main > .region-toolbar {
  grid-area: regionbar;
  min-height: 40px;
  margin: 0 0 6px;
  padding: 6px 10px;
  gap: 8px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(26,31,41,0.98), rgba(17,21,29,0.98));
  border: 1px solid rgba(66,75,91,0.82);
  border-radius: 8px;
}
.daw-main > .region-toolbar .btn-sm { min-height: 28px; padding: 0.3rem 0.66rem; border-radius: 6px; }

.daw-left {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem;
  overflow-y: auto;
  flex: none;
  transition: width 0.15s ease;
}
.daw-left.collapsed { padding: 0.6rem 0.15rem; overflow: hidden; }
.daw-left .produce-sources { flex-direction: column; align-items: stretch; display: flex; }
.daw-left .source-chip { text-align: left; }

.daw-collapse {
  position: absolute;
  top: 6px;
  right: 4px;
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 0.8rem;
  z-index: 2;
}
.daw-collapse:hover { color: var(--text); }

.daw-vsplit {
  width: 6px;
  cursor: col-resize;
  flex: none;
}
.daw-vsplit:hover { background: rgba(154,160,171,0.15); border-radius: 3px; }

/* Horizontal splitter between the Browser and Palette panes in the library. */
.daw-lsplit {
  height: 6px;
  cursor: row-resize;
  flex: none;
  margin: 1px 0;
  border-radius: 3px;
}
.daw-lsplit:hover { background: rgba(154,160,171,0.2); }

.daw-center {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem;
  overflow: auto;
  /* owner 07-07: the region toolbar pins to the bottom instead of
     floating mid-workspace over an empty gap */
  display: flex;
  flex-direction: column;
}
.daw-center .timeline-grid { flex: 1 1 auto; }
.daw-center .region-toolbar { flex: none; margin-top: auto; }

.daw-hsplit {
  height: 6px;
  cursor: row-resize;
  flex: none;
}
.daw-hsplit:hover { background: rgba(154,160,171,0.15); border-radius: 3px; }

.daw-editor {
  flex: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem;
  overflow: auto;
}
.daw-editor.collapsed { border: none; padding: 0; }
.daw-editor .roll-panel { margin-top: 0; }

/* ── Producer browser + palette (v2 P2) ──────────────────── */

.daw-left-content { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.daw-browser { flex: 1 1 60%; min-height: 0; display: flex; flex-direction: column; }
.daw-browser input[type="search"] {
  width: 100%;
  background: var(--display);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  margin: 0.35rem 0 0.45rem;
}
.browser-filters { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.browser-cards { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; }

/* Owner 07-07: compact browser rows — many patches visible at once */
.browser-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.14rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: grab;
}
.browser-row:hover { background: var(--surface2); border-color: var(--border); }
.br-name { flex: 1; font-size: 0.72rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-kind { font-size: 0.55rem; color: var(--text3); white-space: nowrap; letter-spacing: 0.03em; }
.br-btn {
  width: 20px;
  height: 18px;
  padding: 0;
  background: none;
  color: var(--text3);
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.62rem;
  cursor: pointer;
  flex: none;
}
.br-btn:hover { color: var(--text); border-color: var(--border2); }
.br-btn.on { color: var(--surp); }

.browser-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  cursor: grab;
}
.browser-card:hover { border-color: var(--border2); }
.bc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; }
.bc-name { font-size: 0.78rem; color: var(--text); font-weight: 600; }
.bc-kind {
  font-size: 0.62rem;
  color: var(--accent2);
  border: 1px solid rgba(245,166,35,0.35);
  border-radius: 999px;
  padding: 0.02rem 0.4rem;
  white-space: nowrap;
}
.bc-desc { font-size: 0.68rem; color: var(--text3); margin-top: 0.15rem; }
.bc-actions { display: flex; gap: 0.35rem; margin-top: 0.35rem; }

.pal-btn {
  background: var(--surface);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.14rem 0.5rem;
  font-size: 0.68rem;
  cursor: pointer;
}
.pal-btn:hover { color: var(--text); border-color: var(--border2); }

.daw-palette { flex: 1 1 40%; min-height: 90px; margin-top: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.5rem; display: flex; flex-direction: column; }
.daw-palette.drop-target { outline: 1px dashed var(--accent); outline-offset: 3px; border-radius: 6px; }
.palette-rack { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; }
.palette-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 0.3rem 0.45rem;
  cursor: grab;
}
.pal-name { flex: 1; font-size: 0.75rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-kind { font-size: 0.6rem; color: var(--text3); white-space: nowrap; }
.pal-actions { display: flex; gap: 0.25rem; }

/* ── Q1: patch transparency badges + module halves ───────── */
.palette-item { flex-wrap: wrap; }
.palette-item.half-armed { border-color: rgba(245,166,35,0.55); box-shadow: 0 0 0 1px rgba(245,166,35,0.25); }
.palette-item.drop-target { outline: 1px dashed var(--accent); outline-offset: 2px; }
.pb-row { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.15rem; }
.pb-chip {
  font-size: 0.58rem;
  color: var(--text3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.02rem 0.4rem;
  white-space: nowrap;
}
.pb-chip.pb-surprise { color: var(--surp); border-color: rgba(56,189,248,0.45); }
.pb-chip.pb-off { opacity: 0.55; }
.pal-half { flex-basis: 100%; display: flex; gap: 0; margin-top: 0.25rem; }
.pal-half-btn {
  flex: 1;
  background: var(--surface);
  color: var(--text3);
  border: 1px solid var(--border);
  padding: 0.08rem 0.3rem;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.pal-half-btn:first-child { border-radius: 5px 0 0 5px; }
.pal-half-btn:last-child { border-radius: 0 5px 5px 0; }
.pal-half-btn.active {
  color: var(--accent2);
  border-color: rgba(245,166,35,0.5);
  background: rgba(245,166,35,0.1);
}
.splits-filter {
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
  font-size: 0.68rem;
  cursor: pointer;
}
.tl2-badges {
  position: absolute;
  left: 4px;
  bottom: 2px;
  right: 4px;
  overflow: hidden;
  pointer-events: none;
}
.tl2-badges .pb-row { flex-wrap: nowrap; margin-top: 0; }
.tl2-badges .pb-chip { background: rgba(10,14,20,0.65); }

/* ── Q5: global scale strip ──────────────────────────────── */
.tl2-gs-row { min-height: 20px; }
.gs-head { display: flex; align-items: center; gap: 0.3rem; padding: 0 0.3rem; }
.gs-chevron {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
}
.gs-chevron:hover { color: var(--text); }
.gs-strip {
  position: relative;
  min-height: 20px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.gs-strip.off { opacity: 0.45; }
.gs-strip.open { min-height: 42px; }
#gsCanvas { display: block; cursor: pointer; border-radius: 4px; }
.gs-flag {
  position: absolute;
  top: 0;
  font-size: 0.66rem;
  color: var(--accent2);
  cursor: pointer;
  line-height: 20px;
  padding: 0 2px;
}
.gs-flag.sel { color: #fff; text-shadow: 0 0 6px rgba(245,166,35,0.9); }
.gs-flag-label { font-size: 0.5rem; color: var(--text3); margin-left: 1px; }
.gs-add {
  position: absolute;
  top: 1px;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  border: 1px dashed var(--border2);
  background: none;
  color: var(--text3);
  font-size: 0.6rem;
  cursor: pointer;
  line-height: 1;
}
.gs-add:hover { color: var(--accent2); border-color: rgba(245,166,35,0.5); }
.gs-editor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.4rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 4px;
}
.gs-editor-title { font-size: 0.6rem; color: var(--text3); white-space: nowrap; }
.gs-roll { display: flex; gap: 2px; flex-wrap: wrap; }
.gs-cell {
  width: 22px;
  height: 20px;
  padding: 0;
  border-radius: 3px;
  border: 1px solid var(--border);
  font-size: 0.58rem;
  cursor: pointer;
  background: var(--surface);
  color: var(--text3);
}
.gs-cell.gs-scale { background: rgba(148,196,255,0.22); color: #b8d8ff; border-color: rgba(148,196,255,0.4); }
.gs-cell.gs-sub { background: rgba(245,166,35,0.22); color: var(--accent2); border-color: rgba(245,166,35,0.45); }
.gs-cell.gs-root { background: rgba(180,142,222,0.3); color: #d9c2f0; border-color: rgba(180,142,222,0.55); }
.tl2-gsbtn.on { color: #b8d8ff; border-color: rgba(148,196,255,0.5); }

/* ── Q10: MIDI recording ─────────────────────────────────── */
.tl2-arm { color: var(--text3); }
.tl2-arm.on { color: #ff5d5d; border-color: rgba(255,93,93,0.6); background: rgba(255,93,93,0.12); }
.midi-rec-dot { color: #ff5d5d; font-size: 0.8rem; animation: midiPulse 1.2s ease-in-out infinite; }
@keyframes midiPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── Q9: producer remainders ─────────────────────────────── */
.tl2-hue {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
.tl2-db { font-size: 0.55rem; color: var(--text3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl2-head { position: relative; }
.tl2-band {
  position: fixed;
  z-index: 40;
  display: none;
  background: rgba(245,166,35,0.08);
  border: 1px dashed rgba(245,166,35,0.55);
  pointer-events: none;
}
.roll-add-on { color: var(--accent2); border-color: rgba(245,166,35,0.5); }
.roll-keys { font-size: 0.55rem; color: var(--text3); letter-spacing: 0.08em; margin-left: 0.5rem; }
.shortcut-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6,8,12,0.6);
}
.shortcut-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  max-width: 560px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.shortcut-close { float: right; font-size: 0.6rem; color: var(--text3); text-transform: none; letter-spacing: 0; }
.shortcut-cols { display: flex; gap: 1.5rem; }
.shortcut-cols dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.7rem; margin: 0.6rem 0 0; }
.shortcut-cols dt { font-size: 0.68rem; color: var(--accent2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shortcut-cols dd { font-size: 0.68rem; color: var(--text2); margin: 0; }
.tour-card p { font-size: 0.78rem; color: var(--text2); line-height: 1.5; margin: 0.6rem 0; }
.tour-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* ── Studio tour: spotlight coach marks (audit P0 — non-blocking) ── */
/* The container ignores pointer events so the app stays usable while the
   tour runs; only the tooltip card is interactive. The dim comes from the
   ring's giant box-shadow, which never captures clicks. */
#studioTour { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
#audTour { position: fixed; inset: 0; z-index: 5300; pointer-events: none; }
#studioTour .tour-ring, #audTour .tour-ring {
  position: fixed;
  border: 2px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 0 0 200vmax rgba(4, 6, 10, 0.55), 0 0 18px rgba(245, 166, 35, 0.35);
  transition: all 0.25s ease;
}
#studioTour .tour-pop, #audTour .tour-pop {
  position: fixed;
  width: min(330px, calc(100vw - 24px));
  pointer-events: auto;
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  transition: left 0.25s ease, top 0.25s ease;
}
#studioTour .tour-pop p, #audTour .tour-pop p {
  font-size: 0.78rem;
  color: var(--text2);
  line-height: 1.5;
  margin: 0.5rem 0 0.6rem;
}

.studio-tour-btn { color: var(--text3); white-space: nowrap; }
.studio-tour-btn:hover { color: var(--accent2); }

/* The inspector is a flex column with overflow-y auto: children must not
   flex-shrink into nothing when content exceeds the panel height (the
   Bow/Pluck/Strike/Blow segment was crushed to 2 px). */
.ch-inspector > * { flex-shrink: 0; }
.ch-inspector .ch-string { max-width: 100%; }

/* Space audit 07-07: the envelope has a proper home in the right column */
.env-side-section .envelope-canvas { max-width: 100%; height: auto; }

/* ── Q7: layered subnote modules ─────────────────────────── */
.layer-strip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  border-top: 1px solid var(--border);
  margin-top: 0.4rem;
}
.layer-strip-label { font-size: 0.58rem; letter-spacing: 0.08em; color: var(--text3); }
.layer-area { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.2rem 0.5rem 0.4rem; }
/* Space audit 07-07: the rows never crowd the editors — they cap at two
   rows tall and scroll (the whole CHORDA area shares one fixed canvas) */
.layer-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  max-height: 128px;
  overflow-y: auto;
  scrollbar-color: rgba(245,166,35,0.42) rgba(10,14,20,0.55);
}
.layer-solo.on {
  color: #ffd28a;
  border-color: rgba(245,166,35,0.6);
  background: rgba(245,166,35,0.15);
}
.layer-edit-tag { color: var(--accent2); text-transform: none; letter-spacing: 0; }
.layer-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.25rem 0.5rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid hsl(var(--layer-hue), 70%, 55%);
  border-radius: 6px;
  cursor: pointer;
}
.layer-row.sel {
  border-color: hsla(var(--layer-hue), 70%, 55%, 0.7);
  box-shadow: 0 0 8px hsla(var(--layer-hue), 70%, 55%, 0.25);
}
.layer-row-tag {
  width: 18px;
  text-align: center;
  font-size: 0.7rem;
  color: hsl(var(--layer-hue), 70%, 68%);
  font-weight: 700;
}
.layer-minipad { width: 40px; height: 40px; flex: none; border-radius: 50%; }
.layer-row-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.layer-row-space { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.layer-row .sp-ctl input[type=range] { width: 70px; }
.layer-row-space .pal-btn:first-of-type { margin-left: auto; }
.layer-env {
  font-size: 0.6rem;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layer-ownhead { white-space: nowrap; }
/* Per-layer EFFECTS tags on the layer row (docs/EFFECTS_CONTRACT.md) */
.layer-fx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; }
.layer-fx.off { opacity: 0.5; }
.layer-fx-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface2); border: 1px solid var(--border);
  border-left: 2px solid var(--eff); border-radius: 4px; padding: 1px 4px 1px 5px;
}
.layer-fx-tag.off { border-left-color: var(--text3); opacity: 0.55; }
.layer-fx-name {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 0.6rem; color: var(--text2); white-space: nowrap;
}
.layer-fx-tag:not(.off) .layer-fx-name { color: var(--text); }
.layer-fx-wet { width: 34px; height: 10px; }
/* The always-present BASE row (owner 2026-07-09) */
.layer-row.base-row { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.layer-row.base-row.sel { box-shadow: inset 0 0 0 1px var(--accent), 0 0 14px -8px var(--accent); }
.layer-base-badge {
  font-size: 0.5rem; font-weight: 700; letter-spacing: 0.08em; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 3px; padding: 0 4px;
}
/* Editable layer titles (double-click to rename) */
.layer-name-row { display: flex; align-items: center; gap: 5px; margin-bottom: 1px; }
.layer-name {
  font-size: 0.72rem; font-weight: 600; color: var(--text);
  cursor: text; border-radius: 3px; padding: 0 2px; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layer-name:hover { background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border); }
.layer-name-edit {
  font-size: 0.72rem; font-weight: 600; color: var(--text);
  background: var(--bg); border: 1px solid var(--accent); border-radius: 3px;
  padding: 0 3px; width: 140px; font-family: inherit;
}
/* the synchronised-variation panel sits to the RIGHT of the rows — and
   scrolls internally rather than squeezing the editors above (the whole
   layer band is height-capped) */
.layer-area { max-height: 170px; }
.layer-rows { max-height: 162px; }
.layer-sync {
  flex: none;
  width: 230px;
  max-height: 162px;
  overflow-y: auto;
  padding: 0.4rem 0.55rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  scrollbar-color: rgba(245,166,35,0.42) rgba(10,14,20,0.55);
}
.layer-sync .layer-env-sync { margin-left: 0; }
.layer-sync-body.off { opacity: 0.35; pointer-events: none; }
.layer-add {
  width: 26px;
  height: 20px;
  border-radius: 4px;
  border: 1px dashed var(--border2);
  background: none;
  color: var(--text3);
  cursor: pointer;
}
.layer-add:hover { color: var(--accent2); border-color: rgba(245,166,35,0.5); }
.layer-env-sync {
  margin-left: auto;
  font-size: 0.6rem;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}
.layer-strip { flex-wrap: wrap; }

/* Owner 07-07: the scale is a circle — one octave per turn, degree 0 at
   12 o'clock; tuned nodes slide around the ring by their cents. */
.note-circle {
  position: relative;
  margin: 0.4rem auto;
}
.note-circle-ring {
  position: absolute;
  border: 1px solid rgba(90,110,130,0.3);
  border-radius: 50%;
  pointer-events: none;
}
.note-circle .note-cell {
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--note-node-size, 28px);
  height: var(--note-node-size, 28px);
  border-radius: 50%;
  font-size: var(--note-node-font, 0.58rem);
  flex-direction: column;
  line-height: 1;
  gap: 1px;
}
.note-circle .note-cell.tuned { border-style: dashed; }
.note-cents {
  font-size: 0.48rem;
  color: var(--accent2);
  font-variant-numeric: tabular-nums;
}
.oct-btns { display: inline-flex; gap: 0.25rem; flex: none; }

/* Owner 07-07: the strips are their own panel — pinned above the
   timeline (vertical scrolling never moves them), horizontally mirrored
   to the timeline's scrollLeft by wireStripsPanel. */
.strips-panel {
  flex: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  padding-bottom: 2px;
}
.strips-tl2 { overflow-x: hidden; padding-bottom: 0; }

/* ── Q6: global space designer ───────────────────────────── */
.tl2-sp-row { min-height: 20px; }
/* Owner 07-07 layout: cross-section + params live in the track-parameter
   column (left, sticky); the cylinder fills the lane column beat-aligned */
.sp-left {
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  width: 190px;
  overflow: visible;
}
.sp-params { display: flex; flex-direction: column; gap: 0.25rem; }
.sp-cyl-wrap { position: relative; }
#spSection, #spCylinder {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: crosshair;
}
/* Fixed CSS sizes are LOAD-BEARING: these canvases redraw per animation
   frame — without a CSS size matching the attribute size, backing-store
   resizing feeds back into clientWidth and the canvas doubles forever
   (the "global space is completely broken" bug: it reached 634,882 px
   wide). Both now draw with plain contexts at their attribute size; the
   cylinder's width is set inline per render (beat-aligned to the lanes). */
#spSection { width: 170px; height: 150px; flex: none; }
#spCylinder { cursor: ns-resize; }
.sp-head-panel { display: flex; flex-direction: column; gap: 0.3rem; min-width: 170px; }
.sp-ctl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.62rem;
  color: var(--text3);
}
.sp-ctl select, .sp-ctl input[type=range] { max-width: 110px; }
.sp-ctl select {
  background: var(--surface);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.62rem;
  padding: 0.1rem 0.25rem;
}

/* ── Q3: baked-note performance drill-down (roll drawer) ─── */
.roll-perf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--border);
}
.roll-perf-row { display: inline-flex; gap: 0.35rem; align-items: baseline; }
.roll-perf-key {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}
.roll-perf-val { font-size: 0.68rem; color: var(--text2); font-variant-numeric: tabular-nums; }
.roll-perf-missing { font-size: 0.66rem; color: var(--text3); font-style: italic; margin-top: 0.3rem; }

/* ── Producer v2 P3: beat-based timeline ─────────────────── */

.tl2 { overflow-x: auto; padding-bottom: 4px; }

.tl2-row { display: flex; align-items: stretch; margin-bottom: 4px; }

.tl2-head {
  position: sticky;
  left: 0;
  z-index: 3;
  flex: none;
  width: 190px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-right: 6px;
  font-size: 0.72rem;
  overflow: hidden; /* owner 07-07: controls must never spill onto the lanes */
}
/* two-row track head: identity on top, mix controls underneath */
.tl2-track-head { flex-direction: column; align-items: stretch; justify-content: center; gap: 0.15rem; }
.tl2-track-head.sp-sel { border-color: rgba(56,189,248,0.55); }
.tl2-head-top { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.tl2-head-ctl { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.tl2-head-ctl .tl-gain { flex: 1 1 40px; min-width: 24px; }
.tl2-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.tl2-corner { background: transparent; border: none; overflow: visible; }
.tl2-addbars {
  position: absolute;
  top: -1px;
  height: 22px;
  padding: 0 0.6rem;
  white-space: nowrap;
  background: var(--surface2);
  color: var(--text3);
  border: 1px dashed var(--border2);
  border-radius: 5px;
  font-size: 0.62rem;
  cursor: pointer;
}
.tl2-addbars:hover { color: var(--accent2); border-color: rgba(245,166,35,0.5); }
.tl2-ph-handle {
  position: absolute;
  top: 0;
  width: 11px;
  height: 100%;
  margin-left: -5px;
  cursor: ew-resize;
  z-index: 4;
}
.tl2-ph-handle::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid var(--surp);
}

.tl2-ruler {
  position: relative;
  height: 22px;
  flex: none;
  background:
    repeating-linear-gradient(to right,
      rgba(154,160,171,0.18) 0, rgba(154,160,171,0.18) 1px,
      transparent 1px, transparent 56px),
    repeating-linear-gradient(to right,
      rgba(154,160,171,0.07) 0, rgba(154,160,171,0.07) 1px,
      transparent 1px, transparent 14px),
    var(--display);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.tl2-bar {
  position: absolute;
  top: 2px;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text3);
  padding-left: 3px;
}
.tl2-playhead {
  position: absolute;
  top: 0;
  bottom: -600px;
  width: 1.5px;
  background: var(--surp);
  box-shadow: 0 0 6px rgba(56,189,248,0.6);
  z-index: 2;
  pointer-events: none;
}

.tl2-lane {
  position: relative;
  flex: none;
  /* Fill the row height (set by the taller two-row head) so there's no dead
     gap below each lane, and give regions a generous floor (owner 2026-07-09). */
  align-self: stretch;
  min-height: 60px;
  background:
    repeating-linear-gradient(to right,
      rgba(154,160,171,0.12) 0, rgba(154,160,171,0.12) 1px,
      transparent 1px, transparent 56px),
    repeating-linear-gradient(to right,
      rgba(154,160,171,0.045) 0, rgba(154,160,171,0.045) 1px,
      transparent 1px, transparent 14px),
    var(--display);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.tl2-lane.drop-target { border-color: var(--accent); }

.tl2-region {
  position: absolute;
  top: 3px;
  bottom: 3px;
  background: linear-gradient(180deg, rgba(245,166,35,0.28), rgba(245,166,35,0.16));
  border: 1px solid rgba(245,166,35,0.6);
  border-radius: 4px;
  cursor: grab;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.tl2-region.baked {
  background: linear-gradient(180deg, rgba(56,189,248,0.22), rgba(56,189,248,0.12));
  border-color: rgba(56,189,248,0.55);
}
.tl2-region.selected { box-shadow: 0 0 0 1.5px rgba(232,234,238,0.7); }
.tl2-region-label {
  font-size: 0.62rem;
  color: var(--text);
  padding: 0 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.tl2-resize {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: ew-resize;
  border-right: 2px solid rgba(232,234,238,0.35);
}
.tl2-resize:hover { border-right-color: rgba(232,234,238,0.8); }

.tl2-newtrack {
  flex: none;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.8rem;
  color: var(--text3);
  font-size: 0.72rem;
  border: 1px dashed var(--border2);
  border-radius: 5px;
}
.tl2-newtrack.drop-target { border-color: var(--accent); color: var(--text2); }
.tl2-gs-row.drop-target .gs-chevron,
.tl2-gs-row.drop-target .gs-strip { outline: 1px dashed var(--accent); outline-offset: 2px; }

.tl2-head .tl-gain { width: 46px; height: 3px; flex: none; }

/* ── Palette edit banner (producer v2 P6) ────────────────── */

.palette-edit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  border-color: rgba(245,166,35,0.5);
  background: linear-gradient(180deg, rgba(245,166,35,0.08), var(--surface));
  font-size: 0.82rem;
  color: var(--text2);
}
.palette-edit-banner strong { color: var(--accent2); }
.peb-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }

/* ── Pointer drag ghost (v2.1 U0) ────────────────────────── */

.drag-ghost {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  font-size: 0.72rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  opacity: 0.92;
}
body.dragging { cursor: grabbing; user-select: none; }

/* ── Track mute/solo (v2.1 U2) ───────────────────────────── */

.tl2-ms {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 0.6rem;
  font-weight: 700;
  background: var(--surface);
  color: var(--text3);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.tl2-ms.on { background: rgba(245,166,35,0.25); color: var(--accent2); border-color: rgba(245,166,35,0.6); }
.tl2-ms.tl2-solo.on { background: rgba(56,189,248,0.22); color: var(--surp); border-color: rgba(56,189,248,0.55); }
.tl2-head.inaudible .tl2-name { opacity: 0.4; }

/* ── Zoom/snap controls + rename (v2.1 U5-U7) ───────────── */

.daw-ctx-select {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.16rem 0.3rem;
  font-size: 0.7rem;
}

.tl2-rename {
  flex: 1;
  min-width: 0;
  background: var(--display);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: 0.72rem;
  padding: 0.1rem 0.3rem;
}

/* ── Loop ticks + spatial target (v2.1 U9, U10) ─────────── */

.tl2-looptick {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: rgba(232,234,238,0.3);
  pointer-events: none;
}
/* Generative-region motif boundaries: a light dashed vertical line per motif
   length (owner 2026-07-09 — restored). */
.tl2-motiftick {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 0;
  border-left: 1px dashed rgba(232,234,238,0.28);
  pointer-events: none;
  z-index: 1;
}

/* Compact spatial target that replaces the old L/R pan slider. */
.tl2-head .tl-space-dot {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: rgba(10,14,20,0.5);
  border: 1px solid rgba(58,66,80,0.65);
  cursor: grab;
  touch-action: none;
}
.tl2-head .tl-space-dot:hover { border-color: rgba(90,104,124,0.9); }
.tl2-head .tl-space-dot:active { cursor: grabbing; }

/* One compact spatial target everywhere a source can be placed. The dot is
   angle + physical distance together; the text is a readout, not a second
   control. */
.space-target-control {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--text3);
  font: 0.56rem/1.15 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.compact-space-target {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  border: 1px solid rgba(58,66,80,0.65);
  background: rgba(10,14,20,0.5);
  cursor: grab;
  touch-action: none;
}
.compact-space-target:hover { border-color: rgba(104,124,148,0.95); }
.compact-space-target:active { cursor: grabbing; }
.patch-space-target { margin-right: 2px; }
.layer-space-target { flex: 0 0 auto; }
.layer-space-target > span { display: none; }

/* ── Region gain (v2.1 U12) ──────────────────────────────── */

.region-gain-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--text2);
}
.region-gain-label input[type="range"] { width: 70px; }

/* Producer v3 transport (block A) */
.daw-pos {
  font-size: 0.72rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  background: var(--display);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 8px;
  min-width: 44px;
  text-align: center;
  cursor: pointer;
}
.daw-saved { font-size: 0.58rem; color: #58d6a9; min-width: 32px; }
#arrLoop.loop-on { color: #5fd4c8; border-color: #2c5b56; background: rgba(95,212,200,0.08); }
.zoom-slider { width: 74px; height: 12px; }
.tl2-loop-range {
  position: absolute;
  top: 0;
  height: 42%;
  background: rgba(95,212,200,0.18);
  border: 1px solid rgba(95,212,200,0.55);
  border-radius: 3px;
  pointer-events: none;
}
.tl2-loop-range.dim { opacity: 0.35; }

/* Producer v3 block B */
.tl2-region.muted { opacity: 0.35; }
.tl2-seed {
  position: absolute;
  right: 14px;
  top: 2px;
  font-size: 0.54rem;
  color: rgba(148,196,255,0.75);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.tl2-gain-tag {
  position: absolute;
  left: 3px;
  bottom: 2px;
  font-size: 0.56rem;
  color: #ffe3b0;
  background: rgba(10,13,17,0.75);
  border: 1px solid rgba(245,166,35,0.4);
  border-radius: 3px;
  padding: 0 4px;
  cursor: ns-resize;
  font-variant-numeric: tabular-nums;
}

.ch-head-mid { display: flex; gap: 10px; align-items: center; flex: 1; justify-content: center; min-width: 0; }
.ch-head-mid .param-select { max-width: 150px; }
.ch-mix { display: flex; gap: 5px; align-items: center; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
.ch-mix input { width: 70px; height: 12px; }
.ch-mix output { font-size: 0.62rem; color: var(--text2); }

/* CH-B1 articulated body block inside the inspector */
.ch-artic { display: flex; flex-direction: column; gap: 6px; }
.ch-artic .formant-weight-circle, .ch-artic .vowel-pad { max-width: 100%; }
.ch-artic .controls-grid { gap: 0.2rem; }

/* drop preview + roll head */
.tl2-drop-preview {
  position: fixed;
  z-index: 40;
  display: none;
  pointer-events: none;
  background: rgba(95,212,200,0.14);
  border: 1.5px dashed rgba(95,212,200,0.8);
  border-radius: 4px;
}
.roll-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; }
.roll-meta { font-size: 0.64rem; color: var(--text3); font-variant-numeric: tabular-nums; }
.roll-meta b { color: var(--text2); font-weight: 600; }
.roll-dyncheck { font-size: 0.62rem; color: var(--text3); display: flex; gap: 4px; align-items: center; text-transform: uppercase; letter-spacing: 0.08em; }

.roll-panel.dyn canvas { height: 300px; }

/* BODY bands: chip strip + per-band EQ editor (preset-then-editable) */
.body-band-strip { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 2px; }
.body-band-strip .band-chip { font-size: 10.5px; letter-spacing: 0.02em; }
.body-band-strip .band-chip.artic { border-color: rgba(236, 142, 200, 0.45); color: rgba(236, 168, 210, 0.9); }
.body-band-strip .band-chip.artic.active { background: rgba(236, 142, 200, 0.18); }
.body-band-strip .band-chip.active { border-color: rgba(255, 214, 140, 0.7); color: rgba(255, 222, 160, 0.95); }
.body-band-strip .band-reset { opacity: 0.75; }
.body-band-edit { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
.body-band-edit .body-band-name { font-size: 10.5px; color: var(--ch-dim, #8b9aa8); white-space: nowrap; }
.body-band-edit input[type=range] { flex: 1; min-width: 80px; }
.body-band-edit .body-band-out { font-size: 11px; font-variant-numeric: tabular-nums; color: rgba(255, 214, 140, 0.9); min-width: 44px; text-align: right; }

/* Melody pattern segmented control (walk / arp) */
.pattern-row { display: flex; gap: 4px; margin: 2px 0 8px; }
.pattern-row .seg-btn { flex: 1; }

.arp-surprise-note { font-size: 11.5px; color: var(--ch-dim, #8b9aa8); line-height: 1.5; padding: 4px 2px 6px; }

/* CH-B2: EXCITOR performance drawer + liftable envelope/vibrato blocks */
.ch-perf { margin: 8px 0 2px; border: 1px solid rgba(140, 160, 180, 0.14); border-radius: 8px; padding: 2px 8px 8px; }
.ch-perf summary { cursor: pointer; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ch-dim, #8b9aa8); padding: 6px 0; }
.ch-perf .perf-envelope-block, .ch-perf .perf-vibrato-block { margin-top: 6px; }
.ch-perf .envelope-canvas.adsr-edit { cursor: grab; width: 100%; }
.ch-perf .envelope-canvas.adsr-edit:active { cursor: grabbing; }
.ch-perf .vibrato-canvas { width: 100%; }

/* P2: family starter tags + filter chips */
.family-tag { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 8px; border: 1px solid rgba(245, 158, 11, 0.35); color: rgba(245, 190, 100, 0.9); white-space: nowrap; }

/* P3: note-connection control */
.connection-row { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; }
.connection-row .connection-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ch-dim, #8b9aa8); margin-right: 2px; }
.connection-row .seg-btn { flex: 0 0 auto; }

/* ── Room designer + ear models (owner 07-07 round 3) ─────────── */
.ear-model-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.ear-model-row select {
  flex: 1;
  min-width: 0;
  background: rgba(16, 20, 26, 0.9);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11px;
  padding: 3px 6px;
}
.room-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 5px;
}
.room-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 2px 3px;
  background: rgba(16, 20, 26, 0.7);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-dim);
}
.room-tile:hover { border-color: rgba(148, 196, 255, 0.5); color: var(--text); }
.room-tile.sel {
  border-color: #58d6a9;
  box-shadow: 0 0 6px rgba(88, 214, 169, 0.35);
  color: var(--text);
}
.room-tile canvas { display: block; }
.room-tile span {
  font-size: 8px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
/* producer: the uncollapsible room-designer row under the space panel */
.sp-designer {
  display: flex;
  flex-wrap: wrap; /* narrow producer: controls drop below the tiles */
  align-items: flex-start;
  gap: 10px 14px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: rgba(10, 13, 17, 0.55);
}
.sp-designer .room-tiles {
  grid-template-columns: repeat(5, 56px);
  flex: none;
}
.sp-designer-ctls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 14px;
  flex: 1;
  min-width: 150px;
}
.sp-designer-ctls input[type="range"] { width: 90px; }
.sp-designer-ctls .sp-ctl { white-space: nowrap; }
.sp-room-btn {
  background: rgba(16, 20, 26, 0.8);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 10px;
  padding: 3px 7px;
  cursor: pointer;
  text-align: left;
}
.sp-room-btn:hover { border-color: rgba(88, 214, 169, 0.6); }
.sp-room-blurb { color: var(--text-dim); font-style: italic; white-space: normal !important; }

/* ════════════════════════════════════════════════════════════════
   V2 REDESIGN — 2026-07-08 (audit/ui-audit-2026-07-08 + owner renders)
   Tone Designer · Spatial Stage · Scale Lab · Macro Explorer
   Stage hues: --exc (amber) --res (blue) --bodyc (violet) --spc (green)
   ════════════════════════════════════════════════════════════════ */

/* ── Stage rail v2: big waveform cards with power + subtitle ── */
.ch-rail { gap: 10px; }
.ch-sep { color: #46536a; font-size: 1rem; }
.ch-card {
  border-radius: 12px;
  padding: 8px 11px 7px;
  gap: 5px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(20,24,31,0.9), rgba(13,16,21,0.95));
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.ch-card-head { align-items: center; }
.ch-card-n {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.ch-excitor   .ch-card-n { color: #efc188; }
.ch-resonator .ch-card-n { color: #9ec9f8; }
.ch-body      .ch-card-n { color: #c3aef5; }
.ch-space     .ch-card-n { color: #9ad9b4; }
.ch-thumb { height: 56px; border-radius: 7px; }
.ch-card-sum { font-size: 0.62rem; color: var(--text2); }
.ch-card .ch-headline {
  font-size: 0.68rem;
  color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-excitor          { border-color: #4a3517; }
.ch-resonator        { border-color: #223f63; }
.ch-body             { border-color: #3f2d58; }
.ch-effects          { border-color: #542740; }
.ch-space            { border-color: #224d3e; }
.ch-excitor.active   { border-color: var(--exc);   box-shadow: 0 0 0 1px var(--exc),   0 0 22px -4px var(--exc); }
.ch-resonator.active { border-color: var(--res);   box-shadow: 0 0 0 1px var(--res),   0 0 22px -4px var(--res); }
.ch-body.active      { border-color: var(--bodyc); box-shadow: 0 0 0 1px var(--bodyc), 0 0 22px -4px var(--bodyc); }
.ch-effects.active   { border-color: var(--eff);   box-shadow: 0 0 0 1px var(--eff),   0 0 22px -4px var(--eff); }
.ch-space.active     { border-color: var(--spc);   box-shadow: 0 0 0 1px var(--spc),   0 0 22px -4px var(--spc); }
.ch-power {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: var(--text3); line-height: 0; border-radius: 50%;
}
.ch-power svg { width: 15px; height: 15px; display: block; }
.ch-power.on { color: inherit; }
.ch-excitor   .ch-power.on { color: var(--exc); }
.ch-resonator .ch-power.on { color: var(--res); }
.ch-body      .ch-power.on { color: var(--bodyc); }
.ch-effects   .ch-power.on { color: var(--eff); }
.ch-space     .ch-power.on { color: var(--spc); }
.ch-power.always { opacity: 0.45; cursor: default; }
.ch-card.stage-off .ch-thumb, .ch-card.stage-off .ch-headline { opacity: 0.35; }

/* ── Inspector v2: grouped knob sections ── */
.ins-group { border-top: 1px solid var(--border); padding-top: 7px; margin-top: 2px; }
.ins-group:first-of-type { border-top: none; margin-top: 0; }
.ins-group-label {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text2); margin-bottom: 4px;
}
.ins-group .knob-row { justify-content: space-around; gap: 2px 6px; }
.ch-inspector .knob-svg { width: 52px; height: 52px; }
.ch-inspector .knob-cell { width: 72px; }

/* ── Field header: "STAGE — Partial Field" ── */
.td-field-head {
  display: flex; align-items: baseline; gap: 10px;
}
.td-field-title { font-size: 0.86rem; font-weight: 600; color: var(--text); }
.td-field-title .td-stage-word { color: var(--text2); font-weight: 400; }
.ch-excitor-word   { color: var(--exc)  !important; }
.ch-resonator-word { color: var(--res)  !important; }
.ch-body-word      { color: var(--bodyc) !important; }
.ch-effects-word   { color: var(--eff)  !important; }
.ch-space-word     { color: var(--spc)  !important; }

/* ══ EFFECTS stage — three-panel rack (docs/EFFECTS_CONTRACT.md) ══════════
   The shell (browser + rack) stays flat/monochrome like the app; each effect
   FACE brings its own skeuomorphic design language from its module. */
.fxs-stage {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 268px;
  gap: 0.5rem;
}
.fxs-browser, .fxs-rack {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); overflow: hidden;
}
.fxs-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--text2);
  border-bottom: 1px solid var(--border); flex: none;
}
.fxs-count {
  font-size: 0.6rem; color: var(--text3); background: var(--surface2);
  border-radius: 20px; padding: 1px 7px; font-weight: 600;
}
.fxs-panel-head .fxs-mini { margin-left: auto; }
.fxs-mini {
  font-size: 0.62rem; letter-spacing: 0.04em; color: var(--text2);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 5px; padding: 3px 8px; cursor: pointer;
}
.fxs-mini:hover { color: var(--text); border-color: var(--border2); }

/* ── Browser: raised header bars over recessed list wells (Logic-style) ── */
.fxs-browser-list { overflow-y: auto; padding: 0; flex: 1; background: var(--display); }
.fxs-cat { border-bottom: 1px solid var(--border); }
.fxs-cat-head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; cursor: pointer; text-align: left;
  color: var(--text); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
  border: none; border-radius: 0;
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  position: sticky; top: 0; z-index: 2;
  box-shadow: 0 1px 0 var(--border);
}
.fxs-cat.open .fxs-cat-head { color: var(--eff); }
.fxs-cat-head:hover { background: linear-gradient(180deg, var(--border2), var(--surface2)); }
.fxs-cat-caret { width: 9px; color: var(--text3); font-size: 0.58rem; transition: color 0.1s; }
.fxs-cat.open .fxs-cat-caret { color: var(--eff); }
.fxs-cat-name { flex: 1; }
.fxs-cat-n {
  font-size: 0.58rem; color: var(--text3); background: var(--bg);
  border: 1px solid var(--border); border-radius: 20px; padding: 0 6px; font-weight: 600;
}
/* the expanded list is a recessed well, visually distinct from its header */
.fxs-cat-body {
  padding: 4px; background: var(--display);
  box-shadow: inset 0 2px 4px -3px rgba(0,0,0,0.9);
}
.fxs-eff {
  padding: 5px 8px 5px 20px; border-radius: 5px; cursor: grab;
  border: 1px solid transparent; display: block; overflow: hidden;
}
.fxs-eff:hover { background: var(--surface2); border-color: var(--border); }
.fxs-eff:active { cursor: grabbing; }
.fxs-eff-name { display: block; font-size: 0.75rem; color: var(--text); font-weight: 500; }
.fxs-eff-desc {
  display: block; font-size: 0.65rem; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Rack (stack) ── */
.fxs-rack-list { overflow-y: auto; padding: 6px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.fxs-rack-list.fxs-droptarget { outline: 1px dashed var(--eff); outline-offset: -3px; border-radius: 8px; }
.fxs-rack-empty, .fxs-face-empty-sub { color: var(--text3); font-size: 0.7rem; padding: 10px; line-height: 1.5; }
.fxs-slot {
  display: flex; align-items: center; gap: 6px; padding: 6px 7px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 7px; border-left: 3px solid var(--eff);
}
.fxs-slot.sel { border-color: var(--eff); box-shadow: 0 0 0 1px var(--eff-dim); }
.fxs-slot.off { opacity: 0.5; border-left-color: var(--text3); }
.fxs-slot.fxs-dragging { opacity: 0.4; }
.fxs-slot-grip { color: var(--text3); cursor: grab; font-size: 0.7rem; letter-spacing: -2px; }
.fxs-slot-power { background: none; border: none; cursor: pointer; color: var(--text3); padding: 0; line-height: 0; }
.fxs-slot-power svg { width: 13px; height: 13px; }
.fxs-slot-power.on { color: var(--eff); }
.fxs-slot-name { flex: 1; font-size: 0.74rem; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxs-slot-wet { display: flex; align-items: center; gap: 4px; }
.fxs-slot-wet input { width: 54px; }
.fxs-slot-wetv { font-size: 0.6rem; color: var(--text3); font-family: var(--mono); width: 30px; text-align: right; }
.fxs-slot-x { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.fxs-slot-x:hover { color: var(--red); }
.fxs-rack-foot { padding: 7px 11px; font-size: 0.62rem; color: var(--text3); border-top: 1px solid var(--border); flex: none; }

/* ── Face column (the effect's own panel mounts here) ── */
.fxs-face-col {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--display); overflow: hidden;
}
.fxs-face-head {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border-bottom: 1px solid var(--border); flex: none;
}
.fxs-face-name { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.fxs-face-cat { font-size: 0.62rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; }
.fxs-face-tools { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.fxs-face-preset {
  font-size: 0.66rem; background: var(--surface2); color: var(--text2);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 5px;
}
.fxs-face-mount { flex: 1; min-height: 0; position: relative; }
.fxs-face-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; color: var(--text2); text-align: center;
}
.fxs-face-empty-mark { font-size: 2.4rem; color: var(--text3); opacity: 0.5; }
.fxs-stage-off .fxs-face-col, .fxs-stage-off .fxs-rack { opacity: 0.6; }

/* ── Expanded overlay: face floats large, subnote page faintly visible ── */
.fxs-stage.fxs-expanded .fxs-face-col {
  position: fixed; inset: 3.5vh 3.5vw; z-index: 400;
  border: 1px solid var(--eff);
  box-shadow: 0 24px 80px -20px rgba(0,0,0,0.8);
}
.fxs-stage.fxs-expanded::after {
  content: ""; position: fixed; inset: 0; z-index: 399;
  background: rgba(10,11,14,0.55); backdrop-filter: blur(1px);
}

/* ── Right column: Envelope / Modulation panel ── */
.td-side {
  width: 252px; flex: none;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(10, 13, 17, 0.5);
  padding: 9px 11px;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; min-height: 0;
}
.td-side::-webkit-scrollbar { width: 7px; }
.td-side::-webkit-scrollbar-thumb { background: rgba(120,130,150,0.3); border-radius: 4px; }
.td-tabs {
  display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden;
}
.td-tab {
  flex: 1; background: none; border: none; color: var(--text3);
  font: inherit; font-size: 0.7rem; font-weight: 600; padding: 5px 0;
  cursor: pointer; letter-spacing: 0.03em;
}
.td-tab.active { color: #cfe3ff; background: rgba(61, 157, 246, 0.13); box-shadow: inset 0 0 0 1px #2b5892; border-radius: 6px; }
.td-side .envelope-canvas { width: 100%; height: 128px; background: var(--display); border: 1px solid var(--border); border-radius: 7px; }
.adsr-readouts {
  display: grid; grid-template-columns: repeat(4, 1fr); text-align: center;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.adsr-readouts .adsr-k { font-size: 0.66rem; color: var(--text3); font-weight: 600; }
.adsr-readouts output { font-size: 0.72rem; color: var(--text); display: block; }
.td-side .env-dist-row input[type=range] { height: 12px; }
.mod-list { display: flex; flex-direction: column; gap: 6px; }
.mod-row {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: rgba(18, 22, 29, 0.85);
  padding: 5px 4px 5px 9px;
}
.mod-row-icon { width: 20px; height: 14px; flex: none; }
.mod-row-main { flex: 1; min-width: 0; }
.mod-row-name { font-size: 0.72rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.mod-row-sub { font-size: 0.62rem; color: var(--text3); line-height: 1.2; }
.mod-row .knob-cell { width: 56px; padding: 0; }
.mod-row .knob-svg { width: 38px; height: 38px; }
.mod-row .knob-label { font-size: 0.52rem; }

/* (The bottom instrument cards retired 07-08 — the browser strip is the
   one selection surface in the sub-note view; .m2-preset.sel marks the
   active recipe there.) */

/* V2: the sub-note right column moved inside the chain (td-side), so the
   two-column workspace grid collapses to a single stacked flow. */
.subnote-full-layout { display: flex; flex-direction: column; min-height: 0; gap: 0.45rem; }
@media (max-width: 1050px) {
  .subnote-full-layout { display: flex; }
}
/* td-side children must never flex-shrink into nothing; the column itself scrolls */
.td-side > * { flex: none; }
.ch-card { min-height: 0; }

/* SPACE editor: the right column carries the ear response (arrival + colouring
   stacked vertically) instead of Envelope/Modulation (owner 2026-07-10) */
.td-side-ears { overflow: hidden; }
.ears-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ears-head-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; color: var(--text); }
.ears-head-sum { font-size: 0.56rem; color: var(--text3); }
.ears-head-sum b { color: var(--text2); font-weight: 700; }
.td-side-ears > .ears-slot { flex: 1 1 auto; min-height: 300px; position: relative; }
.td-side-ears canvas#cvSpaceField { width: 100%; height: 100%; display: block; }

/* ── V2 Spatial Stage (render phase-04) ── */
.stage-sources {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap; flex: none;
}
.stage-src {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid hsl(var(--src-hue, 36), 45%, 32%);
  border-radius: 8px;
  background: rgba(14, 18, 24, 0.85);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.66rem; color: var(--text2);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.stage-src.sel {
  border-color: hsl(var(--src-hue, 36), 70%, 55%);
  box-shadow: 0 0 0 1px hsl(var(--src-hue, 36), 70%, 55%), 0 0 14px -6px hsl(var(--src-hue, 36), 70%, 55%);
  color: var(--text);
}
.src-num {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid hsl(var(--src-hue, 36), 70%, 58%);
  color: hsl(var(--src-hue, 36), 75%, 65%);
  font-size: 0.6rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.src-name { font-weight: 600; }
.src-pos { font-variant-numeric: tabular-nums; color: var(--text3); }
.stage-src .layer-solo { margin-left: 2px; }
.stage-src-hint { margin-left: auto; font-size: 0.6rem; color: var(--text3); }

#cvStageBig { display: block; background: var(--display); border: 1px solid var(--border); border-radius: 8px; cursor: crosshair; }

.stage-readouts {
  display: flex; gap: 0; flex: none;
  border: 1px solid var(--border); border-radius: 8px;
  background: rgba(10, 13, 17, 0.6);
  padding: 5px 0;
}
.stage-ro {
  flex: 1; text-align: center;
  display: flex; flex-direction: column; gap: 1px;
  border-right: 1px solid var(--border);
}
.stage-ro:last-child { border-right: none; }
.stage-ro-k { font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); }
.stage-ro-v { font-size: 0.82rem; color: var(--text); font-variant-numeric: tabular-nums; }

.head-model-list { display: flex; flex-direction: column; gap: 4px; }
.head-model-row {
  display: flex; flex-direction: column; gap: 0;
  text-align: left; font: inherit; cursor: pointer;
  background: rgba(14, 18, 24, 0.85);
  border: 1px solid var(--border); border-radius: 7px;
  padding: 4px 8px; color: var(--text2);
}
.head-model-row:hover { border-color: var(--border2); }
.head-model-row.sel { border-color: var(--spc); box-shadow: 0 0 0 1px var(--spc); color: var(--text); }
.hm-name { font-size: 0.68rem; font-weight: 600; }
.hm-sub { font-size: 0.58rem; color: var(--text3); font-variant-numeric: tabular-nums; }
/* the stage flexes to whatever height the workspace can give it */
.ch-field-pos.stage-pos { flex: 1; min-height: 190px; display: flex; }
#cvStageBig { width: 100%; height: 100%; flex: 1; }
.layer-strip-note { font-size: 0.62rem; color: var(--text3); }

/* ── V2 Scale Lab (render phase-09) ── */
.scalelab-card { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.sl-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 240px;
  gap: 10px; flex: 1; min-height: 0;
}
.sl-left, .sl-right {
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(10, 13, 17, 0.5);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto; min-height: 0;
}
.sl-left::-webkit-scrollbar, .sl-right::-webkit-scrollbar { width: 7px; }
.sl-left::-webkit-scrollbar-thumb, .sl-right::-webkit-scrollbar-thumb { background: rgba(120,130,150,0.3); border-radius: 4px; }
.sl-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.sl-sec-label {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text3); margin-top: 6px;
}
.sl-search {
  background: var(--display); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font: inherit; font-size: 0.72rem; padding: 4px 8px;
}
.sl-preset-list { display: flex; flex-direction: column; gap: 3px; max-height: 230px; overflow-y: auto; }
.sl-preset {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--text2); font: inherit; font-size: 0.7rem;
  padding: 4px 8px; cursor: pointer; text-align: left;
}
.sl-preset:hover { background: rgba(255,255,255,0.03); }
.sl-preset.sel { border-color: var(--rootc); background: rgba(139,124,246,0.1); color: var(--text); }
.sl-preset-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-preset-tag { flex: none; font-size: 0.6rem; color: var(--text3); font-variant-numeric: tabular-nums; }
.sl-edo-step { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; }
.sl-mini-btn {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
  font: inherit; font-size: 0.85rem; cursor: pointer; line-height: 1;
}
.sl-mini-btn:hover { background: var(--border); }
.sl-ref-row { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text2); }
.sl-ref-row input { width: 84px; background: var(--display); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font: inherit; font-size: 0.72rem; padding: 3px 6px; }
.sl-check { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--text2); cursor: pointer; }
.sl-actions { display: flex; gap: 6px; margin-top: 8px; }

.sl-center { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 0; }
.sl-center-head { display: flex; gap: 8px; align-self: stretch; }
.sl-chip {
  font-size: 0.66rem; color: var(--text2);
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px;
}
.sl-chip-info { margin-left: auto; color: var(--text3); font-variant-numeric: tabular-nums; }
.sl-wheel { flex: 1; min-height: 0; max-height: 420px; width: auto; max-width: 100%; }
.sl-ring { fill: none; stroke: rgba(120, 140, 165, 0.45); stroke-width: 1.2; }
.sl-grid { stroke: rgba(90, 110, 130, 0.18); stroke-width: 1; }
.sl-ratio { stroke: rgba(56, 189, 248, 0.3); stroke-width: 1; stroke-dasharray: 3 4; }
.sl-ratio-t { fill: rgba(56, 189, 248, 0.65); font-size: 10px; text-anchor: middle; font-family: var(--mono); }
.sl-node { cursor: pointer; }
.sl-node circle { fill: #101216; stroke-width: 1.6; }
.sl-node text { text-anchor: middle; font-size: 11px; font-family: var(--mono); fill: var(--text2); }
.sl-node.sl-root circle { stroke: var(--rootc); fill: rgba(139,124,246,0.18); }
.sl-node.sl-root text { fill: #c9befc; }
.sl-node.sl-sub circle { stroke: var(--acc, #4caf7d); fill: rgba(76,175,125,0.14); }
.sl-node.sl-sub text { fill: #a5e3c3; }
.sl-node.sl-scale circle { stroke: rgba(190, 205, 220, 0.75); }
.sl-node.sl-off circle { stroke: rgba(90, 100, 115, 0.5); }
.sl-node.sl-off text { fill: var(--text3); font-size: 9px; }
.sl-node.sl-sel circle { stroke-width: 3; filter: drop-shadow(0 0 6px rgba(245,166,35,0.65)); }
.sl-legend { display: flex; gap: 14px; font-size: 0.64rem; color: var(--text2); }
.sl-leg { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; border: 1.5px solid; vertical-align: -1px; }
.sl-leg.sl-root { border-color: var(--rootc); background: rgba(139,124,246,0.3); }
.sl-leg.sl-sub { border-color: #4caf7d; background: rgba(76,175,125,0.25); }
.sl-leg.sl-scale { border-color: rgba(190,205,220,0.75); }
.sl-leg.sl-off { border-color: rgba(90,100,115,0.5); }

.sl-ins-head { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text); display: flex; align-items: center; gap: 6px; }
.sl-ins-sub { color: var(--text3); font-size: 0.66rem; }
.sl-deg-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid; }
.sl-deg-dot.sl-root { border-color: var(--rootc); background: rgba(139,124,246,0.35); }
.sl-deg-dot.sl-sub { border-color: #4caf7d; background: rgba(76,175,125,0.3); }
.sl-deg-dot.sl-scale { border-color: rgba(190,205,220,0.8); }
.sl-deg-dot.sl-off { border-color: rgba(90,100,115,0.55); }
.sl-st-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sl-st-btn {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text2); font: inherit; font-size: 0.66rem; font-weight: 600;
  padding: 5px 4px; cursor: pointer;
}
.sl-st-btn.active.sl-st-root { border-color: var(--rootc); color: #c9befc; background: rgba(139,124,246,0.12); }
.sl-st-btn.active.sl-st-sub { border-color: #4caf7d; color: #a5e3c3; background: rgba(76,175,125,0.1); }
.sl-st-btn.active.sl-st-scale { border-color: var(--border2); color: var(--text); background: rgba(255,255,255,0.05); }
.sl-st-btn.active.sl-st-off { border-color: var(--border2); color: var(--text); }
.sl-cents-row { display: flex; align-items: center; gap: 7px; }
.sl-cents-row input { width: 74px; background: var(--display); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font: inherit; font-size: 0.76rem; padding: 4px 6px; font-variant-numeric: tabular-nums; }
.sl-cents-abs { font-size: 0.62rem; color: var(--text3); font-variant-numeric: tabular-nums; }
.sl-kv { display: grid; grid-template-columns: 54px 1fr; gap: 0 8px; font-size: 0.72rem; align-items: baseline; }
.sl-kv span:first-child { color: var(--text3); font-size: 0.62rem; }
.sl-kv b { color: var(--text); font-variant-numeric: tabular-nums; }
.sl-kv-sub { grid-column: 2; color: var(--text3); font-size: 0.6rem; font-variant-numeric: tabular-nums; }
.sl-audition { display: flex; flex-direction: column; gap: 5px; }
.sl-keys-wrap { flex: none; display: flex; flex-direction: column; gap: 7px; }
.sl-map-heading { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.sl-map-heading > div:first-child { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sl-map-note { margin-top: 3px; color: var(--text3); font-size: 0.6rem; line-height: 1.35; }
.sl-map-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.sl-map-group {
  min-width: 0; margin: 0; padding: 4px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  border: 1px solid var(--border); border-radius: 7px;
}
.sl-map-group legend {
  padding: 0 4px; color: var(--text3); font-size: 0.56rem;
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.sl-map-choice {
  min-width: 0; display: flex; align-items: center; gap: 5px; padding: 4px 5px;
  border: 1px solid transparent; border-radius: 5px; color: var(--text2);
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.sl-map-choice:hover { background: rgba(255,255,255,0.035); }
.sl-map-choice.active { border-color: rgba(139,124,246,0.55); background: rgba(139,124,246,0.09); color: var(--text); }
.sl-map-choice input { width: 12px; height: 12px; margin: 0; accent-color: var(--rootc); flex: none; }
.sl-map-choice span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sl-map-choice b { overflow: hidden; text-overflow: ellipsis; font-size: 0.61rem; line-height: 1.2; white-space: nowrap; }
.sl-map-choice small { overflow: hidden; text-overflow: ellipsis; color: var(--text3); font-size: 0.51rem; line-height: 1.2; white-space: nowrap; }
#slKeys { display: block; background: var(--display); border: 1px solid var(--border); border-radius: 8px; }
@media (max-width: 1200px) {
  .sl-map-options { grid-template-columns: 1fr; }
}

/* Scale Lab owns the whole plugin area below the transport, like the
   sub-note workspace does */
.scalelab-card { display: none; }
.scalelab-workspace-mode .scalelab-card {
  display: flex;
  position: absolute;
  top: 44px; left: 3px; right: 3px; bottom: 46px;
  z-index: 2;
  overflow: hidden;
}
.scalelab-workspace-mode .visual-card,
.scalelab-workspace-mode .scale-card,
.scalelab-workspace-mode .melody-card,
.scalelab-workspace-mode .root-card,
.scalelab-workspace-mode .tuning-card,
.scalelab-workspace-mode .dynamics-card,
.scalelab-workspace-mode .register-card,
.scalelab-workspace-mode .rhythm-card,
.scalelab-workspace-mode .surprise-card,
.scalelab-workspace-mode .motif-card,
.scalelab-workspace-mode .percussion-card,
.scalelab-workspace-mode .rating-card,
.scalelab-workspace-mode .library-card { display: none; }
.scalelab-workspace-mode .research-note {
  position: absolute; right: 3px; bottom: 8px; z-index: 3; margin: 0;
}

/* ── V2 Macro Explorer (render phase-02) ── */
.macro2-card { display: none; }
.macro2-workspace-mode .macro2-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: absolute;
  top: 44px; left: 3px; right: 3px; bottom: 46px;
  z-index: 2;
  overflow: hidden;
}
.macro2-workspace-mode .library-card,
.macro2-workspace-mode .output-card { display: none; }
.macro2-workspace-mode .research-note {
  position: absolute; right: 3px; bottom: 8px; z-index: 3; margin: 0;
}

.m2-main { display: flex; gap: 10px; flex: 1; min-height: 0; }
.m2-rail {
  width: 148px; flex: none;
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(10, 13, 17, 0.5);
  padding: 8px;
  overflow-y: auto;
}
/* square icon cards (phase-02 mock): icon above a small centred label */
.m2-rail-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: linear-gradient(180deg, rgba(24,29,37,0.72), rgba(15,18,24,0.88));
  border: 1px solid var(--border); border-radius: 9px;
  color: var(--text2); font: inherit; font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.02em; text-align: center;
  padding: 9px 4px 7px; cursor: pointer; line-height: 1.25;
  min-height: 60px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.m2-rail-btn:hover { border-color: var(--border2); }
.m2-rail-btn.active {
  border-color: var(--rail-c, var(--gen)); color: var(--text);
  box-shadow: 0 0 0 1px var(--rail-c, var(--gen)), 0 0 16px -8px var(--rail-c, var(--gen));
}
.m2-rail-icon { color: var(--rail-c, var(--text3)); display: block; }
.m2-rail-btn.active .m2-rail-icon,
.m2-rail-btn:hover .m2-rail-icon { color: var(--rail-c, var(--text)); }
.m2-rail-icon svg { width: 22px; height: 22px; display: block; }
.m2-rail-group {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 5px; display: flex; flex-direction: column; gap: 5px;
}
.m2-rail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.m2-rail-grid .m2-rail-btn { min-height: 56px; padding: 7px 2px 6px; }
.m2-rail-head {
  font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text3); padding: 2px 5px 0;
}
.m2-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ── searchable scale combo: 12-tone presets + world tunings in one list ── */
.scale-combo { position: relative; flex: 1; min-width: 0; }
.scale-combo-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: rgba(14, 18, 24, 0.85); border: 1px solid var(--border); border-radius: 7px;
  color: var(--text); font: inherit; font-size: 0.72rem; font-weight: 600;
  padding: 6px 9px; cursor: pointer; text-align: left;
}
.scale-combo-btn:hover { border-color: var(--border2); }
.scale-combo-caret { color: var(--text3); font-size: 0.6rem; }
.scale-combo-pop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: rgba(12, 16, 22, 0.98); border: 1px solid var(--border2); border-radius: 9px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.55);
  padding: 6px; display: flex; flex-direction: column; gap: 5px;
}
.scale-combo-search {
  width: 100%; box-sizing: border-box;
  background: rgba(20, 26, 34, 0.9); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font: inherit; font-size: 0.7rem; padding: 5px 8px;
}
.scale-combo-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; }
.scale-combo-group {
  font-size: 0.56rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text3); padding: 6px 6px 3px;
}
.scale-combo-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: none; border: none; border-radius: 5px;
  color: var(--text2); font: inherit; font-size: 0.72rem;
  text-align: left; padding: 5px 7px; cursor: pointer;
}
.scale-combo-opt:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.scale-combo-opt.sel { color: var(--gen); }
.scale-combo-note { font-style: normal; font-size: 0.58rem; color: var(--text3); }

/* ── smart-combo: reusable searchable dropdown (docs/SMART_DROPDOWN_SPEC.md) ── */
.smart-combo { position: relative; flex: 1; min-width: 0; }
.smart-combo-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: rgba(14, 18, 24, 0.85); border: 1px solid var(--border); border-radius: 7px;
  color: var(--text); font: inherit; font-size: 0.72rem; font-weight: 600;
  padding: 6px 9px; cursor: pointer; text-align: left;
}
.smart-combo-btn:hover { border-color: var(--border2); }
.smart-combo-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-combo-caret { color: var(--text3); font-size: 0.6rem; flex: none; }
.smart-combo-pop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: rgba(12, 16, 22, 0.98); border: 1px solid var(--border2); border-radius: 9px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.55);
  padding: 6px; display: flex; flex-direction: column; gap: 5px;
}
/* the `hidden` attribute must win over the display:flex above (author rules
   beat the UA [hidden] rule, so an explicit attribute selector is required) */
.smart-combo-pop[hidden] { display: none; }
/* fall UP when there isn't room below (set by wireSmartCombos, owner 2026-07-10) */
.smart-combo-pop.smart-combo-pop-up { top: auto; bottom: calc(100% + 4px); }
.smart-combo-search {
  width: 100%; box-sizing: border-box;
  background: rgba(20, 26, 34, 0.9); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font: inherit; font-size: 0.7rem; padding: 5px 8px;
}
.smart-combo-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; }
.smart-combo-group {
  font-size: 0.56rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text3); padding: 6px 6px 3px;
}
.smart-combo-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: none; border: none; border-radius: 5px;
  color: var(--text2); font: inherit; font-size: 0.72rem;
  text-align: left; padding: 5px 7px; cursor: pointer;
}
.smart-combo-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-combo-opt:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.smart-combo-opt.sel { color: var(--gen); }
.smart-combo-note { font-style: normal; font-size: 0.58rem; color: var(--text3); flex: none; }
.smart-combo-empty { color: var(--text3); font-size: 0.68rem; padding: 8px 7px; }

/* ── percussion v2: enable toggle + editable layer list (owner 2026-07-10) ── */
.perc-enable-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.perc-enable-toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
}
.perc-enable-toggle input { accent-color: var(--gen); width: 15px; height: 15px; cursor: pointer; }
.perc-enable-hint { font-size: 0.64rem; color: var(--text3); }
.perc-body { display: flex; flex-direction: column; gap: 9px; transition: opacity 0.15s ease; }
.perc-body.perc-disabled { opacity: 0.4; pointer-events: none; filter: grayscale(0.5); }
.perc-list { display: flex; flex-direction: column; gap: 8px; }
.perc-empty { color: var(--text3); font-size: 0.7rem; padding: 10px 2px; }
.perc-lyr {
  display: flex; flex-direction: column; gap: 7px; padding: 9px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid hsl(var(--layer-hue, 32) 70% 55%); border-radius: 8px;
}
.perc-lyr-head { display: flex; align-items: center; gap: 8px; }
.perc-lyr-role {
  flex: none; background: rgba(14, 18, 24, 0.85); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font: inherit; font-size: 0.72rem; font-weight: 600;
  padding: 5px 8px; cursor: pointer;
}
.perc-lyr-remove { margin-left: auto; }
.perc-lyr-sound { display: flex; min-width: 0; }
/* One line per hit: position pad + volume (+ every/pitch) share the row. */
.perc-lyr-ctls { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.perc-lyr-ctls .sp-ctl { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.perc-lyr-ctls .sp-ctl input[type="range"] { flex: 1; min-width: 28px; width: auto; }
.perc-add {
  align-self: flex-start; background: rgba(14, 18, 24, 0.7); border: 1px dashed var(--border2);
  border-radius: 7px; color: var(--text2); font: inherit; font-size: 0.72rem; font-weight: 600;
  padding: 6px 12px; cursor: pointer;
}
.perc-add:hover { color: var(--text); border-color: var(--gen); }

/* percussion focus mode — chrome overlaid on the SPACE stage */
.perc-mode-chrome {
  position: absolute; inset: 0; z-index: 5; display: none; pointer-events: none;
  align-items: flex-start; justify-content: space-between; padding: 8px 10px;
  border: 1.5px solid hsl(32 75% 55% / 0.55); border-radius: 10px;
  background: hsl(32 75% 50% / 0.07);
}
.perc-mode-badge {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em;
  color: hsl(32 80% 70%); background: hsl(32 55% 20% / 0.9);
  border: 1px solid hsl(32 70% 50% / 0.5); border-radius: 5px; padding: 3px 8px;
}
.perc-mode-exit {
  pointer-events: auto; cursor: pointer; width: 24px; height: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--text); background: rgba(20, 26, 34, 0.92);
  border: 1px solid var(--border2); border-radius: 6px;
}
.perc-mode-exit:hover { border-color: hsl(32 70% 55%); color: hsl(32 80% 72%); }

.m2-center { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.m2-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m2-chip {
  font-size: 0.66rem; color: var(--text2);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 9px; background: rgba(14, 18, 24, 0.7);
}
.m2-chip b { color: var(--text); font-weight: 600; }
.m2-chip-link { cursor: pointer; color: var(--rootc); border-color: #3f3766; font: inherit; font-size: 0.66rem; }
.m2-chip-link:hover { background: rgba(139,124,246,0.1); }
.m2-chips .vis-mode-switch { margin-left: auto; }
.m2-visual { flex: 1; min-height: 0; position: relative; }
.m2-visual #vis { width: 100%; height: 100%; display: block; }
/* Layers view replaces the roll/lanes canvas with an HTML panel */
.visualiser-wrap.vis-mode-layers #vis { display: none; }
.m2-layers-panel {
  position: absolute; inset: 0; overflow-y: auto;
  background: var(--display); border-radius: 8px; padding: 10px 12px;
}
.prod-layers-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.prod-layers-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.prod-layers-note { font-size: 0.64rem; color: var(--text3); }
.prod-layers-list { display: flex; flex-direction: column; gap: 6px; }
.prod-layers-empty { color: var(--text3); font-size: 0.7rem; padding: 8px 2px; }
.prod-layer-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 9px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--layer-hue, var(--eff)); border-radius: 7px;
  flex-wrap: wrap;
}
.prod-layer-row.base { border-left-color: var(--accent); background: var(--surface2); }
.prod-layer-row.perc-row { border-left-color: hsl(32 70% 55%); background: color-mix(in srgb, hsl(32 70% 55%) 5%, var(--surface)); }
.prod-layer-row.perc-row.dim { opacity: 0.62; }
.prod-layer-row.perc-row .prod-layer-tag { background: color-mix(in srgb, hsl(32 75% 55%) 60%, transparent); }
.prod-layer-tag {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  border-radius: 50%; font-size: 0.62rem; color: var(--text);
  background: color-mix(in srgb, hsl(var(--layer-hue, 210) 60% 55%) 55%, transparent);
}
.prod-layer-name { font-size: 0.74rem; font-weight: 600; color: var(--text); width: 62px; flex: none; }
.prod-layer-ctls { display: flex; align-items: center; gap: 8px; }
.prod-ctl { display: flex; align-items: center; gap: 4px; font-size: 0.6rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; }
.prod-ctl input { width: 66px; }
.prod-ctl-mute { color: var(--text3); font-style: italic; }
.prod-layer-fx { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.prod-fx-none { font-size: 0.62rem; color: var(--text3); font-style: italic; }
.prod-fx-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface2); border: 1px solid var(--border);
  border-left: 2px solid var(--eff); border-radius: 4px; padding: 1px 3px 1px 5px;
}
.prod-fx-tag.off { border-left-color: var(--text3); opacity: 0.55; }
.prod-fx-name { background: none; border: none; cursor: pointer; padding: 0; font-size: 0.62rem; color: var(--text); white-space: nowrap; }
.prod-fx-tag.off .prod-fx-name { color: var(--text2); }
.prod-fx-wet { width: 40px; height: 11px; }
.prod-fx-x { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0 1px; }
.prod-fx-x:hover { color: var(--red); }
.prod-fx-add {
  font-size: 0.62rem; background: var(--surface2); color: var(--text2);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 5px;
}
.macro2-card .engine-state { flex: none; }

.m2-inspector {
  width: 300px; flex: none;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(10, 13, 17, 0.5);
  padding: 10px 12px;
  overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.m2-inspector::-webkit-scrollbar { width: 7px; }
.m2-inspector::-webkit-scrollbar-thumb { background: rgba(120,130,150,0.3); border-radius: 4px; }
.m2-inspector .macro-panel { display: flex; flex-direction: column; gap: 8px; }
.m2-inspector .note-circle { margin: 0 auto; }

.m2-presets {
  display: flex; gap: 8px; align-items: stretch; flex: none;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(10, 13, 17, 0.45);
  padding: 7px 9px;
  overflow-x: auto;
}
.m2-presets-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 0.56rem; letter-spacing: 0.14em; color: var(--text3);
  text-align: center; flex: none;
}
.m2-preset {
  flex: 0 0 150px;
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  background: linear-gradient(180deg, rgba(24,29,37,0.9), rgba(15,18,24,0.95));
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 8px; cursor: pointer; font: inherit; color: var(--text2);
  transition: border-color 0.15s;
}
.m2-preset:hover { border-color: var(--gen); }
.m2-preset.sel { border-color: var(--res); box-shadow: 0 0 0 1px var(--res), 0 0 18px -6px var(--res); }
/* Sub-note preview (owner 2026-07-09): the card being auditioned */
.m2-preset { position: relative; }
.m2-preset.previewing { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 20px -6px var(--accent); }
.m2-preview-badge {
  position: absolute; top: 5px; right: 5px;
  font-size: 0.5rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--bg); background: var(--accent); border-radius: 3px; padding: 1px 4px;
}
.m2-preset-name { font-size: 0.68rem; font-weight: 600; color: var(--text); }
.m2-preset canvas { width: 100%; height: 34px; background: var(--display); border-radius: 5px; }
.m2-preset-fam { font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
/* in the macro2 chips row the vis switch lies flat */
.m2-chips .vis-mode-switch { flex-direction: row; margin-top: 0; }
/* Modulation tab back to the classic blocks: sliders + the wobble trace */
.td-side .vibrato-canvas { width: 100%; height: 54px; background: var(--display); border: 1px solid var(--border); border-radius: 7px; }
.td-side .perf-vibrato-block .control-row { grid-template-columns: 92px 1fr 44px; }

/* ── V2.1 macro lanes: header overlay, key popovers, analysis tiles ── */
.m2-visual { position: relative; }
.m2-lane-heads {
  position: absolute; top: 0; left: 0; width: 190px;
  pointer-events: none;
}
.m2-lane-head {
  position: absolute; left: 0; width: 100%;
  display: flex; align-items: flex-start; gap: 7px;
  padding: 8px 10px 0 12px;
  pointer-events: auto;
}
.m2-lane-n {
  font-size: 0.76rem; font-weight: 700; font-family: var(--mono);
  opacity: 0.9; line-height: 1.2;
}
.m2-lane-tt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.m2-lane-title {
  font-size: 0.54rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m2-lane-sub {
  font-size: 0.51rem;
  color: var(--text3);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m2-lane-info {
  width: 15px; height: 15px; flex: none; margin-left: 3px;
  border-radius: 50%; border: 1px solid var(--border2);
  background: rgba(14, 18, 24, 0.85); color: var(--text2);
  font: italic 700 0.6rem Georgia, serif; line-height: 1;
  cursor: pointer;
}
.m2-lane-info:hover { color: var(--text); border-color: var(--text3); }

.m2-lane-key {
  position: absolute; z-index: 6; width: 210px;
  background: rgba(13, 18, 25, 0.97);
  border: 1px solid var(--border2); border-radius: 9px;
  padding: 8px 10px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
}
.m2-key-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.72rem; font-weight: 700; color: var(--text);
  margin-bottom: 6px;
}
.m2-key-close {
  background: none; border: none; color: var(--text3);
  font: inherit; font-size: 0.9rem; cursor: pointer; line-height: 1;
}
.m2-key-close:hover { color: var(--text); }
.m2-key-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.64rem; color: var(--text2); padding: 2.5px 0;
}
.k-sw { width: 26px; height: 10px; flex: none; position: relative; }
.k-line-amber::after, .k-line-amber-dash::after, .k-line-gray-dash::after, .k-line-teal::after {
  content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 2px solid;
}
.k-line-amber::after { border-color: #f5a623; }
.k-line-amber-dash::after { border-color: rgba(245,166,35,0.8); border-top-style: dashed; }
.k-line-gray-dash::after { border-color: rgba(180,190,205,0.6); border-top-style: dashed; }
.k-line-teal::after { border-color: rgba(95,212,200,0.9); }
.k-band { background: rgba(245,166,35,0.12); border-top: 1px dashed rgba(245,166,35,0.5); border-bottom: 1px dashed rgba(245,166,35,0.5); }
.k-heat { background: radial-gradient(ellipse at center, rgba(255,110,40,0.55), rgba(255,110,40,0)); }
.k-heat-blue { background: linear-gradient(90deg, rgba(80,150,255,0.5), rgba(80,150,255,0)); }
.k-onset { background: linear-gradient(90deg, transparent 11px, #60a5fa 11px, #60a5fa 14px, transparent 14px); }
.k-dur { background: rgba(96,165,250,0.5); border-radius: 2px; }
.k-dur-dash { border: 1px dashed rgba(96,165,250,0.7); border-radius: 2px; }
.k-rest { border: 1px solid rgba(229,72,77,0.75); border-radius: 2px; }
.k-gap { background: rgba(95,212,200,0.55); height: 4px; margin-top: 3px; }
.k-tag, .k-tag-cyan, .k-tag-cyan-dash {
  border-radius: 3px; font: 700 7px var(--mono); text-align: center; line-height: 10px;
}
.k-tag { border: 1px solid #f5a623; color: #ffd28a; background: rgba(58,38,10,0.9); }
.k-tag::before { content: "P"; }
.k-tag-cyan { border: 1px solid rgba(56,189,248,0.85); color: #8ee3ff; background: rgba(14,24,34,0.9); }
.k-tag-cyan::before { content: "R"; }
.k-tag-cyan-dash { border: 1px dashed rgba(56,189,248,0.6); color: #8ee3ff; background: rgba(14,24,34,0.9); }
.k-tag-cyan-dash::before { content: "risk"; }
.k-block-green { border: 1px solid #4caf7d; border-radius: 3px; }
.k-block-amber-dash { border: 1px dashed #e5a53a; border-radius: 3px; }
.k-diamond { background: #ffe07a; width: 8px; height: 8px; margin: 1px 9px; transform: rotate(45deg); }

.m2-bottom { display: flex; align-items: stretch; gap: 8px; flex: none; }
.m2-status-chip {
  display: flex; align-items: center;
  border: 1px solid var(--border2); border-radius: 8px;
  padding: 4px 10px; font-size: 0.64rem; color: var(--text2);
  white-space: nowrap;
  max-width: 280px;
}
.m2-status-chip.playing { border-color: rgba(245,166,35,0.6); color: #ffd28a; background: rgba(245,166,35,0.06); }
.m2-tiles { display: flex; gap: 8px; flex: 1; }
.m2-tiles .stat {
  flex: 1; display: flex; flex-direction: column-reverse; align-items: center; gap: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: rgba(10, 13, 17, 0.6);
  padding: 4px 6px; font-size: 0.52rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text3);
  min-width: 58px;
}
.m2-tiles .stat-val { font-size: 0.86rem; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ── Producer access: first-class mode pill (audit: access clarity) ── */
.workspace-tab-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border2); }
.producer-pill {
  border: 1px solid rgba(245,166,35,0.55) !important;
  border-radius: 7px;
  color: #ffd28a !important;
  background: rgba(245,166,35,0.07);
  font-weight: 700;
}
.producer-pill:hover { background: rgba(245,166,35,0.16); color: #ffe3b0 !important; }

/* ── V2 Producer pass (audit P0/P1 + target render) ── */
/* labelled creation actions — no more 18px "+" (audit hit-target P0) */
.br-btn.br-add {
  padding: 3px 9px;
  min-height: 24px;
  font-weight: 600;
  color: #ffd28a;
  border: 1px solid rgba(245,166,35,0.45);
  border-radius: 6px;
  background: rgba(245,166,35,0.06);
  white-space: nowrap;
}
.br-btn.br-add:hover { background: rgba(245,166,35,0.15); }
.pal-track-btn {
  font-weight: 600;
  color: #ffd28a !important;
  border-color: rgba(245,166,35,0.45) !important;
  background: rgba(245,166,35,0.06) !important;
  padding: 2px 8px !important;
  white-space: nowrap;
}
.pal-track-btn:hover { background: rgba(245,166,35,0.15) !important; }

/* first-run guidance under the empty timeline */
.tl2-empty-guide {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 12px;
  border: 1px dashed var(--border2); border-radius: 10px;
  background: rgba(10, 13, 17, 0.4);
}
.tl2-guide-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tl2-guide-step {
  font-size: 0.72rem; color: var(--text2);
  border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 12px; background: rgba(20, 25, 32, 0.8);
}
.tl2-guide-step b {
  display: inline-flex; width: 16px; height: 16px; margin-right: 6px;
  border-radius: 50%; border: 1px solid var(--gen); color: var(--gen);
  align-items: center; justify-content: center; font-size: 0.6rem;
}
.tl2-guide-arrow { color: var(--text3); }
.factory-session-picker { width:min(760px,100%); display:flex; flex-direction:column; gap:6px; }
.factory-session-label { color:var(--text3); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-align:left; text-transform:uppercase; }
.factory-session-list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
.factory-session-card { min-width:0; min-height:48px; padding:6px 7px; border:1px solid var(--border); border-radius:6px; background:var(--surface2); color:var(--text2); cursor:pointer; text-align:left; }
.factory-session-card:hover { border-color:color-mix(in srgb,var(--accent) 65%,var(--border)); background:color-mix(in srgb,var(--accent) 8%,var(--surface2)); color:var(--text); }
.factory-session-card b,.factory-session-card span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.factory-session-card b { font-size:.65rem; }.factory-session-card span { margin-top:3px; color:var(--text3); font-size:.54rem; }
@media (max-width: 760px) { .factory-session-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* region truth: generative = dashed sketch, baked = amber committed (target) */
.tl2-region {
  background: linear-gradient(180deg, rgba(32,38,48,0.92), rgba(23,28,36,0.94));
  border: 1px dashed rgba(148,163,184,0.5);
}
.tl2-region.baked {
  background: linear-gradient(180deg, rgba(72,53,16,0.95), rgba(48,36,12,0.96));
  border: 1px solid rgba(245,166,35,0.75);
}
.tl2-seed-chip {
  flex: none;
  font-family: var(--mono); font-size: 0.56rem; font-variant-numeric: tabular-nums;
  color: #ffd28a;
  border: 1px solid rgba(245,166,35,0.4); border-radius: 4px;
  background: rgba(20, 16, 6, 0.75);
  padding: 0 4px; margin-right: 4px;
  align-self: center;
}
.tl2-baked-tag { font-weight: 700; color: #ffd28a; margin-left: 5px; letter-spacing: 0.04em; }

/* Note editor header (target render) */
.roll-title { font-size: 0.82rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.roll-region { font-size: 0.66rem; color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.roll-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 0.6rem; color: var(--text3); white-space: nowrap; }
.roll-leg-intended { width: 18px; height: 9px; border: 1.5px dashed rgba(95,212,200,0.8); border-radius: 2px; }
.roll-leg-realised { width: 18px; height: 9px; background: rgba(245,166,35,0.85); border-radius: 2px; margin-left: 8px; }
.roll-head { flex-wrap: wrap; gap: 6px 10px; }
/* the producer pill lives in the transport now — the header column was
   too narrow and the pill was being covered by the transport's buttons */
.transport .producer-pill {
  display: inline-flex; align-items: center;
  padding: 5px 12px; text-decoration: none;
  font-size: 0.74rem;
}
.workspace-tab-sep { display: none; }

/* ── Producer audit pass 2026-07-08: professional production surface ── */
.daw {
  height: 100dvh;
  gap: 6px;
  background: #11141a;
  /* Never grow past the viewport — wide content (timeline, mixer) scrolls in
     its own panel instead of stretching the shell (owner 2026-07-09). */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.daw-transport {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px 6px;
  margin-bottom: 0;
  background: #151922;
  border-color: rgba(82, 91, 108, 0.58);
  border-radius: 8px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.03), 0 1px 0 rgba(0,0,0,0.35);
}

.daw-cluster {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 4px 7px;
  background: rgba(9, 12, 17, 0.42);
  border: 1px solid rgba(58, 66, 80, 0.62);
  border-radius: 7px;
  min-width: 0;
}

.daw-cluster-arrangement { flex: 1 1 380px; }
.daw-cluster-playback { flex: 0 0 auto; }
.daw-cluster-context { flex: 1 1 310px; }
.daw-cluster-edit { flex: 0 1 260px; }
.daw-cluster-io { flex: 0 1 330px; }

.daw-cluster .btn-sm {
  min-height: 26px;
  padding: 0.26rem 0.56rem;
  font-size: 0.72rem;
  border-radius: 6px;
}

.daw-cluster-playback .btn-sm {
  width: 30px;
  padding-left: 0;
  padding-right: 0;
}

.daw-cluster-playback #arrPlayBtn {
  width: 40px;
  box-shadow: 0 0 0 1px rgba(255,199,104,0.22), 0 8px 18px rgba(245,166,35,0.16);
}

.daw-title {
  color: var(--text);
  letter-spacing: 0.02em;
  min-width: max-content;
}

.daw-title .build-tag {
  color: rgba(154,160,171,0.62);
  font-weight: 500;
}

.daw-ctx-select,
.daw-cluster select,
.daw-cluster input[type="search"] {
  min-height: 26px;
  background: #0f131a;
  border-color: rgba(73, 82, 98, 0.72);
  color: var(--text);
  border-radius: 6px;
}

/* The name lives in the double-click-to-rename title; the select is a compact
   caret-only switcher (owner 2026-07-09). */
.daw-cluster-arrangement #arrSelect,
.daw-arr-switch {
  flex: none; width: 22px; max-width: 22px; min-height: 26px; padding: 0;
  -webkit-appearance: none; appearance: none;
  color: transparent; font-size: 0; text-indent: -999px; /* hide the option text */
  background: var(--surface2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' fill='none' stroke='%239aa0ab' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 12px;
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.daw-arr-switch:hover { border-color: var(--border2); background-color: var(--surface); }
.daw-arr-name {
  color: var(--text); font-weight: 600; font-size: 0.78rem;
  max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 3px 7px; border-radius: 5px; cursor: text; letter-spacing: 0.01em;
}
.daw-arr-name:hover { background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border); }
.daw-arr-rename {
  min-height: 26px; width: 150px; box-sizing: border-box;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--accent); border-radius: 5px; padding: 0 7px;
  font: inherit; font-size: 0.78rem; font-weight: 600;
}

.daw-ctx {
  min-height: 26px;
  color: rgba(232,234,238,0.72);
  font-size: 0.68rem;
  white-space: nowrap;
}

.daw-ctx input[type="range"] { width: 86px; }
.daw-ctx output { color: #ffd28a; }

.daw-pos {
  min-height: 26px;
  min-width: 55px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0b0f15;
  border-color: rgba(73,82,98,0.8);
  color: #f3f5f7;
  font-weight: 700;
}

.zoom-slider { width: 68px; }
.daw-saved { color: #63d69a; }

.daw-main { gap: 0; }

.daw-left,
.daw-center,
.daw-editor {
  background: #171b23;
  border-color: rgba(66, 75, 91, 0.72);
  border-radius: 8px;
}

/* Producer editor panel: switcher + body (owner 2026-07-09) */
.editor-panel-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 6px; }
.editor-topbar { display: flex; align-items: center; gap: 10px; flex: none; }
.editor-switch { display: inline-flex; gap: 2px; background: var(--display); border: 1px solid var(--border); border-radius: 7px; padding: 2px; }
.editor-tab {
  font-size: 0.66rem; font-weight: 600; padding: 3px 11px; border-radius: 5px;
  background: none; border: none; color: var(--text2); cursor: pointer;
}
.editor-tab.active { background: var(--surface2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border2); }
.editor-tab:hover:not(.active) { color: var(--text); }
.editor-region-label { font-size: 0.66rem; color: var(--text3); }
.editor-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
/* the region layers panel renders inline here, not as a positioned overlay */
.editor-body .m2-layers-panel { position: static; inset: auto; height: auto; background: transparent; padding: 0; }
.editor-body-roll .roll-panel { margin-top: 0; }

/* Bake overlay: a blank roll behind a prompt */
.roll-bake-prompt { position: relative; }
.roll-blank {
  width: 100%; height: 180px; display: block; border-radius: 6px; opacity: 0.5;
  background:
    repeating-linear-gradient(to right, rgba(154,160,171,0.07) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(to bottom, rgba(154,160,171,0.06) 0 1px, transparent 1px 20px),
    var(--display);
}
.roll-bake-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center;
}
.roll-bake-msg { font-size: 0.78rem; color: var(--text2); max-width: 440px; line-height: 1.5; }

/* ── Mixer view (owner 2026-07-09) ─────────────────────────────────────── */
.mixer-toggle {
  position: fixed; right: 14px; bottom: 12px; z-index: 30;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 7px 13px; border-radius: 8px; cursor: pointer;
  background: var(--surface2); color: var(--text); border: 1px solid var(--border2);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.7);
}
.mixer-toggle:hover { border-color: var(--accent); }
.mixer-toggle.active { background: var(--accent); color: #1a1205; border-color: var(--accent); }

.mixer-panel { display: flex; gap: 8px; height: 100%; min-height: 0; width: 100%; max-width: 100%; overflow: hidden; }
.mixer-tracks { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; flex: 1 1 0; min-width: 0; padding-bottom: 4px; }
.mixer-empty { color: var(--text3); font-size: 0.72rem; padding: 20px; }
.mixer-track {
  flex: 0 0 124px; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-top: 2px solid hsl(var(--track-h, 210) 65% 52%); border-radius: 7px;
  padding: 7px; min-height: 0;
}
.mixer-track-head { display: flex; align-items: center; gap: 6px; }
.mixer-track-hue { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mixer-track-name { font-size: 0.72rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mixer-region-stack { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; flex: 1 1 auto; min-height: 30px; }
.mixer-no-regions { font-size: 0.62rem; color: var(--text3); font-style: italic; padding: 2px; }
.mixer-region-row { display: flex; align-items: center; gap: 5px; }
.mixer-db { font-size: 0.56rem; color: var(--text3); font-family: var(--mono); width: 32px; text-align: right; flex: none; }
/* Volume as a filled block (not a slider): fill = level, name overlays top-left */
.mixer-vol-block {
  position: relative; width: 60px; height: 20px; flex: none;
  background: var(--display); border: 1px solid var(--border);
  border-radius: 3px; overflow: hidden; cursor: ew-resize; user-select: none;
}
.mixer-vol-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, hsl(var(--track-h,210) 55% 42%), hsl(var(--track-h,210) 62% 56%));
}
.mixer-vol-name {
  position: absolute; left: 4px; top: 2px; right: 3px;
  font-size: 0.54rem; font-weight: 600; line-height: 1.1; color: #eef2f6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75); pointer-events: none;
}

/* horizontal faders (drag left/right) */
.mixer-fader { flex: 1; min-width: 0; height: 16px; -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; }
.mixer-fader::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, hsl(var(--track-h,210) 60% 50%), hsl(var(--track-h,210) 65% 62%)); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35); }
.mixer-fader::-moz-range-track { height: 8px; border-radius: 4px; background: hsl(var(--track-h,210) 60% 52%); }
.mixer-fader::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 5px; height: 16px; border-radius: 2px; background: #eef2f6; margin-top: -4px; box-shadow: 0 0 3px rgba(0,0,0,0.6); }
.mixer-fader::-moz-range-thumb { width: 5px; height: 16px; border: none; border-radius: 2px; background: #eef2f6; }
.mixer-fader.master::-webkit-slider-runnable-track { background: linear-gradient(90deg, #4ade80, #eab308 78%, #ef4444); }
.mixer-fader.master::-moz-range-track { background: #eab308; }

.mixer-space-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.mixer-space-cv { width: 108px; height: 108px; background: var(--display); border: 1px solid var(--border); border-radius: 6px; cursor: crosshair; }
.mixer-additive { display: flex; align-items: center; gap: 4px; font-size: 0.6rem; color: var(--text2); }
.mixer-track-master { display: flex; align-items: center; gap: 6px; padding-top: 4px; border-top: 1px solid var(--border); }
.mixer-tm-label { font-size: 0.55rem; letter-spacing: 0.08em; color: var(--text3); width: 34px; flex: none; }

.mixer-master {
  flex: none; width: 82px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--surface2); border: 1px solid var(--border2); border-radius: 7px; padding: 8px 7px;
}
.mixer-master-label { font-size: 0.55rem; letter-spacing: 0.1em; font-weight: 700; color: var(--text2); flex: none; }
.mixer-master-body { flex: 1; min-height: 40px; display: flex; gap: 8px; align-items: stretch; justify-content: center; }
.mixer-master-meter { width: 30px; height: 100%; background: var(--display); border-radius: 4px; }
.mixer-master .mixer-db { width: auto; text-align: center; flex: none; }
/* Vertical mixing-desk fader: a horizontal slider rotated -90° (reliable full
   height); its length is set to the slot height in JS. Up = louder. */
.mixer-fader-slot {
  position: relative; width: 26px; height: 100%; min-height: 60px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.mixer-master-fader {
  position: absolute;
  -webkit-appearance: none; appearance: none;
  height: 20px; margin: 0; cursor: ns-resize; background: transparent;
  transform: rotate(-90deg); /* width (set in JS) becomes the vertical length */
}
.mixer-master-fader::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: #2a3038; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
}
.mixer-master-fader::-moz-range-track { height: 6px; border-radius: 3px; background: #2a3038; }
.mixer-master-fader::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 20px; border-radius: 2px; margin-top: -7px;
  background: linear-gradient(90deg, #f2f5f8, #aeb8c4);
  box-shadow: 0 2px 4px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.3);
}
.mixer-master-fader::-moz-range-thumb {
  width: 10px; height: 20px; border: none; border-radius: 2px;
  background: linear-gradient(90deg, #f2f5f8, #aeb8c4); box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.daw-left {
  padding: 8px;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.025);
}

.daw-center {
  padding: 8px 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

.daw .section-label {
  color: rgba(205,214,226,0.74);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  margin-bottom: 0.48rem;   /* ~20% tighter than the 0.6rem base */
  margin-top: 0;
}
.section-label-row { display:flex; align-items:center; gap:4px; }
.section-label-row .section-label-title { flex:1; text-align:center; }
.pal-collapse { background:none; border:none; color:var(--text3); cursor:pointer; font-size:0.7rem; line-height:1; padding:0 2px; }
.pal-collapse:hover { color:var(--text); }
.pal-info { font-size:0.95rem; }
.pal-info.on { color:var(--accent); }
.pal-info.on:hover { color:var(--accent2); }
/* Minimised palette: patches collapse to a browser-row-sized strip (icons +
   name + actions only); the parts/detail block hides until expanded. */
.daw-palette.min .pal-module-names,
.daw-palette.min .pal-draft-note,
.daw-palette.min .pal-kind { display:none; }
.daw-palette.min .palette-item { padding:4px 7px; }

.daw-browser input[type="search"] {
  min-height: 30px;
  margin: 0.4rem 0 0.45rem;
  background: #0d1117;
  border-color: rgba(64,73,88,0.78);
}

.browser-filters { gap: 4px; }

.browser-row {
  min-height: 30px;
  padding: 4px 6px;
  border-color: rgba(54,61,74,0.45);
  border-radius: 6px;
  background: rgba(12, 16, 22, 0.28);
}

.browser-row:hover {
  background: rgba(35, 42, 54, 0.88);
  border-color: rgba(82, 93, 112, 0.84);
}

.br-name {
  font-size: 0.73rem;
  color: rgba(242,244,247,0.92);
}

.br-kind {
  color: rgba(154,160,171,0.78);
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.br-btn {
  width: 24px;
  height: 24px;
  background: rgba(10,13,18,0.7);
  border-color: rgba(58,66,80,0.72);
}

.br-btn.br-add {
  width: auto;
  min-width: 56px;
  height: 24px;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.daw-palette {
  margin-top: 6px;
  padding-top: 6px;
  border-top-color: rgba(66,75,91,0.82);
}

.palette-rack { gap: 5px; }

.palette-item {
  gap: 5px;
  padding: 7px 7px 6px;
  background: rgba(23,28,37,0.9);
  border-color: rgba(70,82,101,0.72);
  border-left-width: 3px;
  border-radius: 7px;
}

.pal-name {
  font-size: 0.74rem;
  color: rgba(244,246,249,0.94);
}

.pal-actions { gap: 4px; }

.pal-btn {
  min-height: 22px;
  border-radius: 5px;
  background: rgba(11, 15, 21, 0.72);
}

.pal-half {
  margin-top: 4px;
  background: #0e1218;
  border: 1px solid rgba(55,63,76,0.72);
  border-radius: 5px;
  overflow: hidden;
}

.pal-half-btn {
  border: 0;
  border-left: 1px solid rgba(55,63,76,0.72);
  border-radius: 0;
  background: transparent;
  min-height: 21px;
}

.pal-half-btn:first-child { border-left: 0; }

.pal-half-btn.active {
  background: rgba(245,166,35,0.14);
  color: #ffd28a;
}

.strips-panel {
  margin-bottom: 6px;
  padding: 2px 0 5px;
  border-bottom-color: rgba(66,75,91,0.82);
}

.gs-head {
  min-height: 24px;
  background: #151a22;
  border-color: rgba(58,66,80,0.72);
}

.gs-chevron {
  width: 100%;
  text-align: left;
  color: rgba(213,220,232,0.78);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.gs-chevron:hover { color: #f3f5f7; }

/* Global scale/space active indicators (owner 2026-07-09) */
.gs-chevron.gs-active { color: #f3f5f7; }
.gs-onpip { color: var(--acc); font-size: 0.72em; margin-left: 4px; vertical-align: 1px; }
/* Global space is a toggle button that GLOWS when on */
.sp-toggle { flex: 1 1 auto; width: auto; }
.sp-toggle.sp-active { color: #eaf6ff; text-shadow: 0 0 10px rgba(56,189,248,0.6); }
.sp-onpip { color: #38bdf8; font-size: 0.72em; margin-left: 4px; vertical-align: 1px; text-shadow: 0 0 8px rgba(56,189,248,0.9); }
.sp-expand { flex: 0 0 auto; width: auto !important; padding: 0 6px; text-align: center; }
/* Collapsed slim cylinder — sits in the button row, top aligned with it. The
   box must shrink to the slim canvas (override .sp-cyl-wrap's 105px floor). */
.tl2-sp-row.sp-collapsed-row { align-items: flex-start; }
.sp-cyl-wrap.sp-cyl-collapsed {
  min-height: 0;
  border: 1px solid rgba(56,189,248,0.26);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 0 16px -7px rgba(56,189,248,0.45);
}

.gs-strip {
  background: #0c1117;
  border-color: rgba(58,66,80,0.72);
}

.tl2 { padding-bottom: 6px; }

.tl2-row { margin-bottom: 5px; }

.tl2-head {
  width: 200px;
  border-radius: 6px;
  border-color: rgba(58,66,80,0.72);
}

.tl2-track-head {
  min-height: 48px;
  padding: 6px 7px;
  background:
    linear-gradient(90deg, hsla(var(--track-h, 36), 76%, 56%, 0.88) 0 3px, transparent 3px),
    linear-gradient(180deg, rgba(31,37,48,0.96), rgba(20,25,33,0.96));
  border-color: rgba(68,78,96,0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.tl2-track-head.sp-sel {
  border-color: hsla(var(--track-h, 36), 80%, 68%, 0.88);
}

.tl2-head-top { gap: 5px; }

.tl2-hue {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 0 10px hsla(var(--track-h, 36), 70%, 55%, 0.22);
}

.tl2-name {
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(244,246,249,0.94);
}

.tl2-db {
  color: rgba(204,214,229,0.66);
  font-size: 0.56rem;
}

.tl2-head-ctl { gap: 4px; }

.tl2-ms {
  width: 21px;
  height: 21px;
  border-radius: 5px;
  background: rgba(10,13,18,0.72);
  border-color: rgba(64,73,88,0.78);
}

.tl2-ms.on {
  color: #ffd28a;
  border-color: hsla(var(--track-h, 36), 76%, 58%, 0.66);
  background: hsla(var(--track-h, 36), 72%, 45%, 0.16);
}

.tl2-head .tl-gain {
  height: 12px;
  min-width: 34px;
}

.tl2-ruler {
  height: 26px;
  background:
    repeating-linear-gradient(to right, rgba(154,160,171,0.24) 0, rgba(154,160,171,0.24) 1px, transparent 1px, transparent 56px),
    repeating-linear-gradient(to right, rgba(154,160,171,0.075) 0, rgba(154,160,171,0.075) 1px, transparent 1px, transparent 14px),
    #0c1117;
  border-color: rgba(58,66,80,0.82);
}

.tl2-bar {
  top: 3px;
  color: rgba(205,214,226,0.62);
}

.tl2-lane {
  height: 48px;
  background:
    repeating-linear-gradient(to right, rgba(154,160,171,0.16) 0, rgba(154,160,171,0.16) 1px, transparent 1px, transparent 56px),
    repeating-linear-gradient(to right, rgba(154,160,171,0.055) 0, rgba(154,160,171,0.055) 1px, transparent 1px, transparent 14px),
    #0c1117;
  border-color: rgba(42,49,62,0.96);
  border-radius: 4px;
}

.tl2-region {
  top: 5px;
  bottom: 5px;
  min-width: 26px;
  background:
    linear-gradient(180deg, hsla(var(--track-h, 36), 54%, 34%, 0.44), hsla(var(--track-h, 36), 52%, 22%, 0.42)),
    linear-gradient(180deg, rgba(25,31,40,0.96), rgba(16,21,29,0.96));
  border: 1px dashed hsla(var(--track-h, 36), 80%, 63%, 0.72);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), inset 0 -1px 0 rgba(0,0,0,0.42);
}

.tl2-region::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 10px;
  top: 50%;
  height: 17px;
  transform: translateY(-36%);
  opacity: 0.36;
  background:
    repeating-linear-gradient(to right,
      transparent 0 9px,
      hsla(var(--track-h, 36), 86%, 68%, 0.9) 9px 15px,
      transparent 15px 25px);
  -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 3px, #000 3px 5px, transparent 5px 8px);
  mask-image: repeating-linear-gradient(to bottom, transparent 0 3px, #000 3px 5px, transparent 5px 8px);
  pointer-events: none;
}

.tl2-region.baked {
  background:
    linear-gradient(180deg, hsla(var(--track-h, 36), 62%, 36%, 0.55), hsla(var(--track-h, 36), 55%, 22%, 0.5)),
    #121821;
  border-style: solid;
  border-color: hsla(var(--track-h, 36), 86%, 68%, 0.84);
}

.tl2-region.selected {
  border-color: rgba(241,245,249,0.96);
  box-shadow:
    0 0 0 1px rgba(241,245,249,0.62),
    0 0 0 3px hsla(var(--track-h, 36), 82%, 58%, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.tl2-region-label,
.tl2-seed-chip,
.tl2-baked-tag,
.tl2-gain-tag,
.tl2-badges,
/* Keep these above the shape SVG, but DON'T override their absolute
   positioning (the resize handle must stay pinned to the region's right edge
   so the ew-resize cursor is grabbable; loop ticks sit at their `left`). */
.tl2-resize,
.tl2-looptick {
  z-index: 2;
}

.tl2-region-label {
  font-size: 0.64rem;
  font-weight: 650;
  color: rgba(244,246,249,0.93);
  text-shadow: 0 1px 2px rgba(0,0,0,0.65);
}

.tl2-seed-chip {
  color: #ffe0a3;
  border-color: hsla(var(--track-h, 36), 80%, 63%, 0.62);
  background: rgba(8, 10, 14, 0.78);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.22);
}

.tl2-gain-tag {
  border-color: hsla(var(--track-h, 36), 80%, 63%, 0.48);
}

.tl2-resize {
  width: 9px;
  border-right-color: rgba(241,245,249,0.42);
}

.tl2-newtrack,
.tl2-empty-guide {
  background: rgba(10,14,20,0.52);
  border-color: rgba(76,86,104,0.7);
}

.daw-center .region-toolbar {
  min-height: 52px;
  margin-top: 8px;
  padding: 8px 10px;
  gap: 8px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(26,31,41,0.98), rgba(17,21,29,0.98));
  border: 1px solid rgba(66,75,91,0.82);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.daw-center .region-toolbar .btn-sm {
  min-height: 30px;
  padding: 0.34rem 0.72rem;
  border-radius: 6px;
}

.daw-center .region-toolbar .btn-primary {
  box-shadow: 0 8px 18px rgba(245,166,35,0.14);
}

.daw-center .toolbar-hint {
  color: rgba(205,214,226,0.72);
  font-size: 0.73rem;
}

.region-gain-label {
  min-height: 30px;
  padding: 0 6px;
  background: rgba(10,13,18,0.52);
  border: 1px solid rgba(58,66,80,0.72);
  border-radius: 6px;
}

@media (max-width: 1120px) {
  .daw-cluster-arrangement { flex-basis: 360px; }
  .daw-cluster-context { flex-basis: 290px; }
  .daw-cluster-io { flex-basis: 300px; }
  .daw-left { padding: 7px; }
  .tl2-head { width: 190px; }
  .daw-center .region-toolbar {
    gap: 5px;
    padding: 7px 8px;
  }
  .daw-center .region-toolbar .btn-sm {
    padding: 0.3rem 0.58rem;
  }
  .region-gain-label {
    padding: 0 5px;
    gap: 0.24rem;
  }
  .region-gain-label input[type="range"] {
    width: 56px;
  }
}

/* ── V2.2 macro browser (one preset surface, collapsed ↔ expanded) ── */
.m2-lib { display: flex; flex-direction: column; gap: 6px; flex: none; }
.m2-lib.open {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 58%;
  z-index: 7;
  background: rgba(13, 17, 23, 0.98);
  border: 1px solid var(--border2); border-radius: 12px 12px 10px 10px;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.55);
  padding: 8px 10px;
}
.m2-lib-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.m2-lib-title { font-size: 0.6rem; letter-spacing: 0.14em; color: var(--text3); font-weight: 600; }
.m2-lib-chip {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text2); font: inherit; font-size: 0.64rem; padding: 3px 9px; cursor: pointer;
}
.m2-lib-chip:hover { border-color: var(--border2); color: var(--text); }
.m2-lib-chip.active { border-color: var(--gen); color: #ffd28a; background: rgba(245,166,35,0.08); }
.m2-lib-expand { border-color: rgba(245,166,35,0.5); color: #ffd28a; font-weight: 600; }
.m2-lib-fav.active { border-color: #e5484d; color: #ff9a9e; background: rgba(229,72,77,0.08); }
.m2-lib-tabs { display: inline-flex; gap: 4px; margin-left: 4px; }
.m2-lib-search {
  background: var(--display); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font: inherit; font-size: 0.68rem; padding: 3px 8px; width: 150px;
}
.m2-lib-save { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.m2-lib-save input[type=text] {
  background: var(--display); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font: inherit; font-size: 0.68rem; padding: 3px 8px; width: 130px;
}
.m2-lib-save select { font-size: 0.66rem; }
.m2-lib-list {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
  border-top: 1px solid var(--border); padding-top: 6px;
}
.m2-lib-list::-webkit-scrollbar { width: 7px; }
.m2-lib-list::-webkit-scrollbar-thumb { background: rgba(120,130,150,0.3); border-radius: 4px; }
.m2-lib-row {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 8px; border-radius: 6px;
  font-size: 0.72rem; color: var(--text);
}
.m2-lib-row:hover { background: rgba(255,255,255,0.03); }
.m2-lib-name { flex: 0 1 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.m2-lib-tags { flex: 1; display: flex; gap: 4px; overflow: hidden; }
.m2-tag {
  font-style: normal; font-size: 0.58rem; color: var(--text3);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
/* layered presets: base sound + N sub-note sources */
.m2-tag-layers { color: #8ee3ff; border-color: rgba(56,189,248,0.35); }
/* browser presets drag onto the LAYERS strip */
[data-m2-drag] { cursor: grab; }
[data-m2-drag]:active { cursor: grabbing; }
.layer-strip.drop-ok, .layer-area.drop-ok {
  outline: 1px dashed rgba(56,189,248,0.7);
  outline-offset: -1px;
  background: rgba(56,189,248,0.07);
}
/* floating drop zone: appears while dragging a preset, so a layer target is
   always in view even when the expanded library covers the LAYERS strip */
.m2-drop-layer {
  position: fixed;
  top: 64px; left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  padding: 16px 28px;
  border: 2px dashed rgba(56,189,248,0.65);
  border-radius: 12px;
  background: rgba(10, 16, 24, 0.94);
  color: #8ee3ff;
  font-size: 0.78rem; font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.m2-drop-layer.drop-ok {
  border-color: #38bdf8;
  background: rgba(56,189,248,0.16);
  color: #d9f3ff;
}
.m2-drop-layer[hidden] { display: none; }
.m2-lib-stars { flex: none; font-size: 0.66rem; color: #ffd28a; font-variant-numeric: tabular-nums; width: 52px; }
.m2-lib-heart {
  background: none; border: none; cursor: pointer;
  color: rgba(148,163,184,0.4); font-size: 0.85rem; line-height: 1; padding: 2px 4px;
}
.m2-lib-heart:hover { color: rgba(255,154,158,0.8); }
.m2-lib-heart.on { color: #e5484d; }

/* ── Studio sections audit pass 2026-07-08: Macro / Sub-note / Scale Lab ── */
.explore-dashboard {
  background:
    linear-gradient(180deg, rgba(17,25,34,0.98), rgba(6,10,15,0.99)),
    linear-gradient(90deg, rgba(245,166,35,0.025), rgba(56,189,248,0.025));
  border-color: rgba(57, 78, 96, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.035),
    inset 0 18px 42px rgba(255,255,255,0.018),
    0 20px 70px rgba(0,0,0,0.54);
}

.explore-dashboard .card,
.explore-dashboard .visual-card {
  background:
    linear-gradient(180deg, rgba(20,29,39,0.98), rgba(8,13,19,0.99));
  border-color: rgba(63, 83, 101, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    inset 0 -18px 42px rgba(0,0,0,0.16);
}

.explore-dashboard .section-label,
.sl-sec-label,
.m2-rail-head,
.m2-presets-label,
.ch-focus-label,
.ch-lens-label,
.print-hint {
  color: rgba(205, 216, 228, 0.74);
  font-weight: 750;
}

.explore-top {
  border-right-color: rgba(63, 83, 101, 0.56);
}

.explore-top h1 {
  color: rgba(245, 248, 251, 0.96);
  letter-spacing: 0.07em;
}

.build-tag {
  color: rgba(150, 162, 177, 0.72);
}

.workspace-tabs {
  background: rgba(5, 8, 13, 0.9);
  border-color: rgba(70, 88, 106, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025),
    inset 0 -8px 16px rgba(0,0,0,0.35);
}

.workspace-tab {
  color: rgba(172, 184, 198, 0.74);
}

.workspace-tab:hover:not(.active) {
  color: rgba(235, 241, 247, 0.9);
  background: rgba(255,255,255,0.035);
}

.workspace-tab.active {
  color: #ffd690;
  background: linear-gradient(180deg, rgba(245,166,35,0.26), rgba(245,166,35,0.08));
  box-shadow:
    inset 0 -2px 0 rgba(245,166,35,0.82),
    0 0 20px rgba(245,166,35,0.12);
}

.transport-card .transport-round,
.transport-card .btn,
.transport-card .seed-box,
.top-save-bar input[type="text"],
.top-save-bar select,
.top-rating-row {
  border-color: rgba(62, 79, 96, 0.84);
}

.transport-card .btn-secondary,
.transport-card .transport-stop,
.transport-card .seed-box,
.top-rating-row {
  background: rgba(11, 16, 23, 0.68);
}

.transport-card .producer-pill {
  background: rgba(245,166,35,0.09);
  border-color: rgba(245,166,35,0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.macro2-card,
.subnote-full-card,
.scalelab-card {
  border-color: rgba(66, 88, 107, 0.92) !important;
}

.m2-rail,
.m2-inspector,
.m2-presets,
.sl-left,
.sl-right,
.ch-inspector,
.td-side,
.ch-card,
.ch-ch,
.tone-stage {
  background: linear-gradient(180deg, rgba(17,24,33,0.92), rgba(8,12,18,0.95));
  border-color: rgba(58, 75, 92, 0.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.m2-rail-btn {
  background:
    linear-gradient(180deg, rgba(30,37,48,0.9), rgba(12,16,22,0.96));
  border-color: rgba(58,75,92,0.86);
  color: rgba(210,220,231,0.78);
}

.m2-rail-btn:hover {
  border-color: rgba(109, 128, 148, 0.9);
  background:
    linear-gradient(180deg, rgba(38,46,58,0.96), rgba(15,20,27,0.98));
}

.m2-rail-btn.active {
  color: rgba(248,251,253,0.98);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rail-c, #f5a623) 16%, rgba(31,38,48,0.96)), rgba(12,16,22,0.98));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rail-c, #f5a623) 72%, transparent),
    inset 3px 0 0 var(--rail-c, #f5a623),
    0 0 18px -8px var(--rail-c, #f5a623);
}

.m2-inspector {
  border-left: 2px solid rgba(245,166,35,0.28);
}

.m2-chip,
.sl-chip,
.scale-combo-btn,
.ch-chip,
.print-band,
.seg-control,
.pb-chip {
  background: rgba(8, 12, 18, 0.72);
  border-color: rgba(59, 75, 92, 0.84);
}

.m2-chip b,
.sl-chip,
.ch-readout b,
.sl-kv b {
  color: rgba(244,247,250,0.96);
}

.visualiser-wrap,
#cvTonePrint,
#cvLens,
#slKeys,
.space-pad,
.body-mini,
.ch-string,
.ch-thumb,
.sl-search,
.sl-ref-row input,
.sl-cents-row input {
  background: #080d13;
  border-color: rgba(58,75,92,0.88);
}

.m2-presets {
  padding: 8px 10px;
}

.m2-preset {
  background: linear-gradient(180deg, rgba(25,32,42,0.96), rgba(10,14,20,0.98));
  border-color: rgba(58,75,92,0.86);
}

.m2-preset:hover {
  border-color: rgba(245,166,35,0.78);
  box-shadow: 0 0 0 1px rgba(245,166,35,0.16);
}

.m2-preset.sel {
  border-color: rgba(61,157,246,0.92);
  box-shadow: 0 0 0 1px rgba(61,157,246,0.68), 0 0 20px -8px rgba(61,157,246,0.9);
}

.m2-preset-name,
.m2-lib-name {
  color: rgba(244,247,250,0.94);
}

.m2-bottom,
.engine-state,
.stat,
.m2-status-chip {
  border-color: rgba(58,75,92,0.72);
}

.ch-card {
  min-height: 68px;
}

.ch-card:hover {
  border-color: rgba(120, 141, 163, 0.86);
}

.ch-card.active {
  background: linear-gradient(180deg, rgba(28,35,46,0.96), rgba(10,15,21,0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 18px -10px currentColor;
}

.ch-excitor.active { border-color: rgba(245,166,35,0.88); }
.ch-resonator.active { border-color: rgba(88,166,255,0.88); }
.ch-body.active { border-color: rgba(180,142,222,0.88); }
.ch-space.active { border-color: rgba(88,214,169,0.88); }

.ch-card-n,
.td-field-title,
.sl-title {
  color: rgba(237,243,249,0.94);
}

.ch-card-sum,
.ch-ins-d,
.ch-caption,
.sl-kv-sub,
.sl-cents-abs,
.sl-ins-sub {
  color: rgba(150, 164, 180, 0.78);
}

.td-tabs,
.pal-half,
.seg-control {
  background: rgba(7, 11, 17, 0.78);
}

.td-tab.active,
.seg-btn.active,
.print-band.active,
.ch-chip.active {
  box-shadow: inset 0 -2px 0 currentColor;
}

.ch-status {
  color: rgba(154,168,184,0.82);
  border-top-color: rgba(58,75,92,0.78);
}

.layer-row,
.m2-lib-row,
.sl-preset {
  background: rgba(10,14,20,0.38);
  border-color: rgba(58,75,92,0.35);
}

.layer-row:hover,
.m2-lib-row:hover,
.sl-preset:hover {
  background: rgba(34, 43, 56, 0.78);
  border-color: rgba(82, 101, 121, 0.84);
}

.sl-left,
.sl-right {
  border-radius: 8px;
}

.sl-title {
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}

.sl-preset {
  min-height: 25px;
}

.sl-preset.sel {
  border-color: rgba(139,124,246,0.92);
  background: rgba(139,124,246,0.16);
  box-shadow: inset 3px 0 0 rgba(139,124,246,0.85);
}

.sl-preset-name {
  color: rgba(226,234,242,0.88);
}

.sl-preset.sel .sl-preset-name {
  color: rgba(248,250,252,0.98);
}

.sl-mini-btn,
.sl-st-btn {
  background: rgba(10,14,20,0.84);
  border-color: rgba(58,75,92,0.86);
}

.sl-mini-btn:hover,
.sl-st-btn:hover {
  background: rgba(35,43,55,0.92);
}

.sl-node circle {
  fill: #080d13;
}

.sl-node text {
  fill: rgba(213,223,233,0.78);
}

.sl-node.sl-off text {
  fill: rgba(120,132,148,0.72);
}

.sl-node.sl-sel circle {
  filter: drop-shadow(0 0 7px rgba(245,166,35,0.78));
}

.sl-ring {
  stroke: rgba(146, 163, 182, 0.55);
}

.sl-grid {
  stroke: rgba(110, 128, 148, 0.22);
}

.sl-legend {
  color: rgba(190,202,216,0.78);
}

.sl-keys-wrap {
  padding-top: 2px;
}

.m2-lib.open {
  background: rgba(10, 14, 20, 0.985);
  border-color: rgba(75, 94, 114, 0.95);
}

.m2-lib-title {
  color: rgba(205, 216, 228, 0.74);
}

/* Studio responsive shell 2026-07-08: native panels, no scaled canvas. */
body.explore-mode {
  align-items: stretch;
  justify-content: stretch;
}

body.explore-mode #app,
body.explore-mode .view {
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  align-items: stretch;
  justify-content: stretch;
}

body.explore-mode .view {
  display: flex;
}

.explore-dashboard {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  max-height: none;
  transform: none !important;
  transform-origin: top left !important;
  grid-template-columns:
    clamp(190px, var(--dash-c1, 260px), 430px)
    minmax(0, 1fr)
    clamp(230px, 22vw, 360px);
  grid-template-rows:
    40px
    minmax(96px, 18vh)
    minmax(0, 1fr)
    minmax(112px, 19vh);
  gap: 4px;
  padding: 4px;
}

.dash-vsplit {
  display: block;
  top: 44px;
  bottom: 6px;
  left: clamp(190px, var(--dash-c1, 260px), 430px);
}

.transport-card,
.macro2-card,
.subnote-full-card,
.scalelab-card,
.m2-main,
.m2-center,
.subnote-full-layout,
.ch-main,
.sl-layout {
  min-width: 0;
  min-height: 0;
}

.macro2-workspace-mode .macro2-card,
.subnote-workspace-mode .subnote-full-card,
.scalelab-workspace-mode .scalelab-card {
  top: 44px;
  left: 4px;
  right: 4px;
  bottom: 42px;
}

.macro2-workspace-mode .research-note,
.subnote-workspace-mode .research-note,
.scalelab-workspace-mode .research-note {
  right: 4px;
  bottom: 7px;
}

.m2-main {
  gap: clamp(6px, 0.8vw, 10px);
}

.m2-rail {
  width: clamp(122px, 10vw, 158px);
  padding: clamp(6px, 0.7vw, 8px);
}

.m2-rail-grid {
  gap: clamp(3px, 0.45vw, 5px);
}

.m2-rail-btn {
  min-height: clamp(48px, 7vh, 60px);
  padding: 7px 3px 6px;
}

.m2-rail-grid .m2-rail-btn {
  min-height: clamp(44px, 6.5vh, 56px);
}

.m2-inspector {
  width: clamp(220px, 21vw, 330px);
}

.m2-presets {
  max-height: clamp(92px, 17vh, 142px);
}

.m2-preset {
  flex-basis: clamp(118px, 11vw, 160px);
}

.harmonic-stage.chorda .ch-main {
  min-height: clamp(150px, 26vh, 230px);
}

.ch-inspector {
  width: clamp(180px, var(--ch-w, 218px), 460px);
}

.td-side {
  width: clamp(210px, 20vw, 292px);
}

.td-side .envelope-canvas {
  height: clamp(94px, 16vh, 128px);
}

.layer-area {
  max-height: clamp(110px, 18vh, 165px);
}

.sl-layout {
  grid-template-columns:
    clamp(190px, 18vw, 260px)
    minmax(0, 1fr)
    clamp(200px, 20vw, 292px);
  gap: clamp(6px, 0.8vw, 10px);
}

.sl-left,
.sl-right {
  padding: clamp(8px, 0.9vw, 12px);
}

.sl-preset-list {
  max-height: min(230px, 28vh);
}

.sl-keys-wrap {
  min-height: clamp(90px, 15vh, 130px);
}

@media (max-width: 980px) {
  .explore-dashboard {
    grid-template-columns:
      clamp(170px, var(--dash-c1, 220px), 280px)
      minmax(0, 1fr)
      clamp(188px, 28vw, 245px);
    grid-template-rows:
      40px
      minmax(84px, 16vh)
      minmax(0, 1fr)
      minmax(96px, 17vh);
  }

  .dash-vsplit {
    left: clamp(170px, var(--dash-c1, 220px), 280px);
  }

  .m2-rail {
    width: clamp(108px, 18vw, 132px);
  }

  .m2-inspector {
    width: clamp(190px, 30vw, 245px);
    padding: 8px;
  }

  .m2-rail-btn {
    font-size: 0.55rem;
  }

  .sl-layout {
    grid-template-columns:
      clamp(168px, 28vw, 214px)
      minmax(0, 1fr)
      clamp(178px, 30vw, 224px);
  }

  .td-side {
    width: clamp(188px, 32vw, 238px);
  }
}

@media (max-width: 700px) {
  .ch-main {
    gap: 5px;
  }

  .ch-inspector {
    width: clamp(156px, var(--ch-w, 180px), 186px);
    padding: 7px;
  }

  .td-side {
    width: clamp(154px, 28vw, 174px);
    padding: 8px;
  }
}

/* Macro inspector polish 2026-07-08: Duration + top strip cleanup. */
.explore-dashboard {
  grid-template-rows:
    46px
    minmax(96px, 18vh)
    minmax(0, 1fr)
    minmax(112px, 19vh);
}

.dash-vsplit {
  top: 50px;
}

.macro2-workspace-mode .macro2-card,
.subnote-workspace-mode .subnote-full-card,
.scalelab-workspace-mode .scalelab-card {
  top: 50px;
}

.explore-top {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 8px;
  /* Visible, not hidden: the account dropdown hangs below this strip and
     was being clipped to a 4px sliver. The title truncates via its own
     overflow instead. */
  overflow: visible;
  background: linear-gradient(180deg, rgba(15,22,31,0.84), rgba(7,11,17,0.66));
  border: 1px solid rgba(58,75,92,0.72);
  border-radius: 7px;
}

.explore-top h1 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
}

.studio-subtitle {
  display: none;
}

.workspace-tabs {
  flex: none;
  margin-top: 0;
  padding: 3px;
  border-radius: 7px;
}

.workspace-tab {
  min-height: 26px;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
}

.transport-card {
  height: 100%;
  padding: 0 8px;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  border-left: 1px solid rgba(58,75,92,0.55);
  scrollbar-width: none;
}

.transport-card::-webkit-scrollbar {
  display: none;
}

.transport-card .transport {
  flex: 1 1 auto;
  min-width: max-content;
  gap: 8px;
}

.transport-card .transport > * {
  flex: none;
}

.transport-card .producer-pill {
  min-height: 34px;
  padding: 0 15px;
  border-radius: 7px;
  font-size: 0.82rem;
}

.transport-card .transport-round {
  width: 36px;
  height: 36px;
}

.transport-card .transport-play {
  width: 42px;
  height: 42px;
}

.transport-card .btn-secondary,
.transport-card .rand-btn,
.transport-card #regenBtn {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.transport-card .seed-box,
.transport-card .top-rating-row {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(62,79,96,0.84);
  border-radius: 7px;
  background: rgba(8,12,18,0.72);
}

.transport-card .seed-box {
  gap: 6px;
}

.top-rating-row {
  display: grid;
  grid-template-columns: auto 46px auto;
  align-items: center;
  gap: 5px;
  flex: none;
}

.top-rating-row .label {
  margin: 0;
  color: rgba(174,187,201,0.82);
  font-size: 0.58rem;
}

.top-rating-row input[type="range"] {
  width: 46px;
}

.top-rating-row output {
  min-width: 32px;
  text-align: right;
  color: #ffd28a;
}

.m2-inspector .macro-card-head {
  min-height: 26px;
  margin-bottom: 0;
  padding-bottom: 7px;
  border-bottom-color: rgba(58,75,92,0.72);
}

.m2-inspector .macro-card-head > div:first-child {
  min-width: 0;
  padding: 0;
}

.m2-inspector .macro-card-head .section-label {
  margin-bottom: 0;
  line-height: 1.25;
}

.m2-inspector .macro-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
  min-height: auto;
}

.m2-inspector .macro-panel > .panel-presets {
  flex: none;
  margin: 0;
  padding: 0 0 9px;
  border-bottom: 1px solid rgba(58,75,92,0.62);
}

.m2-inspector .panel-presets select {
  min-height: 34px;
  font-size: 0.72rem;
}

.m2-inspector .panel-presets .btn {
  min-height: 32px;
}

.m2-inspector .macro-controls {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: none;
  overflow: visible;
  padding: 0;
  border-right: 0;
}

.m2-inspector .macro-subsection {
  padding: 8px 0 0;
  border-top: 1px solid rgba(58,75,92,0.42);
}

.m2-inspector .macro-subsection:first-child {
  padding-top: 0;
  border-top: 0;
}

.m2-inspector .macro-subsection .subsection-label {
  margin-bottom: 6px;
  font-size: 0.55rem;
}

.m2-inspector .macro-controls .control-row,
.m2-inspector .breaks-grid .control-row {
  grid-template-columns: minmax(112px, 1fr) minmax(72px, 0.84fr) 52px;
  min-height: 30px;
  gap: 6px;
}

.m2-inspector .macro-controls .control-row .label,
.m2-inspector .breaks-grid .control-row .label {
  min-width: 0;
  white-space: normal;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.m2-inspector .macro-controls .control-row input[type="range"],
.m2-inspector .breaks-grid .control-row input[type="range"] {
  min-width: 0;
}

.m2-inspector .macro-controls .control-row output,
.m2-inspector .breaks-grid .control-row output {
  min-width: 0;
  width: 100%;
  justify-content: flex-end;
  font-size: 0.66rem;
}

.m2-inspector .macro-monitor {
  --macro-display-height: clamp(154px, 20vh, 188px);
  flex: none;
  gap: 8px;
  overflow: visible;
  padding: 0;
}

.m2-inspector .macro-inline-monitor {
  padding: 5px 0 2px;
}

.m2-inspector .duration-monitor {
  padding-top: 2px;
  border-top: 1px solid rgba(58,75,92,0.42);
}

.m2-inspector .monitor-title {
  text-align: left;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

.m2-inspector .duration-monitor .accuracy-canvas {
  flex-basis: var(--macro-display-height);
}

.m2-inspector .breaks-block {
  padding-top: 10px;
}

.m2-inspector .breaks-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.m2-inspector .connection-row {
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0 6px;
}

.m2-inspector .connection-row .connection-label {
  flex: 0 0 100%;
  margin-right: 0;
}

.m2-inspector .connection-row .seg-btn {
  flex: 1 1 0;
  min-height: 28px;
}

.m2-inspector .breaks-block .mini-canvas {
  width: 100%;
  height: 62px;
}

@media (max-width: 980px) {
  .explore-dashboard {
    grid-template-rows:
      46px
      minmax(84px, 16vh)
      minmax(0, 1fr)
      minmax(96px, 17vh);
  }

  .transport-card {
    gap: 6px;
    padding: 0 6px;
  }

  .transport-card .producer-pill {
    padding: 0 11px;
  }

  .transport-card .btn-secondary,
  .transport-card .rand-btn,
  .transport-card #regenBtn {
    padding: 0 10px;
  }

  .top-rating-row {
    grid-template-columns: auto 44px auto;
  }

  .top-rating-row input[type="range"] {
    width: 44px;
  }
}

/* Producer cleanup 2026-07-09: compact file menu, region actions, note editor. */
.daw {
  gap: 4px;
}

.daw-transport {
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
}

.daw-cluster {
  min-height: 30px;
  padding: 3px 6px;
  gap: 4px;
}

.daw-cluster-arrangement {
  flex: 1 1 340px;
}

.daw-cluster-context {
  flex: 0 1 260px;
}

.daw-cluster-edit {
  flex: 0 1 235px;
}

.daw-cluster-io {
  flex: 0 0 auto;
}

.daw-cluster-region {
  flex: 1 1 430px;
  margin-top: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.daw-cluster-region::-webkit-scrollbar {
  display: none;
}

.daw-file-menu {
  min-width: 132px;
}

.daw-cluster-region .btn-sm,
.daw-cluster-io .btn-sm {
  min-height: 26px;
  padding: 0.24rem 0.56rem;
}

.daw-cluster-region .toolbar-hint {
  white-space: nowrap;
  font-size: 0.68rem;
}

.daw-cluster-region .toolbar-keyhint {
  color: rgba(154,160,171,0.62);
}

.daw-center {
  padding: 6px 8px;
}

.daw-center .timeline-grid {
  flex: 1 1 auto;
  min-height: 0;
}

.strips-panel {
  margin-bottom: 3px;
  padding: 1px 0 3px;
}

.strips-panel .tl2-row {
  margin-bottom: 2px;
}

.tl2-gs-row,
.tl2-sp-row {
  min-height: 16px;
}

.tl2-gs-row:not(.open) .gs-head,
.tl2-sp-row .gs-head {
  min-height: 18px;
  padding: 0 5px;
}

.tl2-gs-row:not(.open) .gs-chevron,
.tl2-sp-row .gs-chevron {
  font-size: 0.58rem;
  line-height: 1;
}

.tl2-gs-row:not(.open),
.tl2-sp-row {
  opacity: 0.86;
}

.tl2-head {
  min-height: 0;
}

.tl2-track-head {
  gap: 0.1rem;
  padding: 5px 7px;
}

.tl2-lane {
  height: 38px;
}

.tl2-row {
  margin-bottom: 3px;
}

.roll-panel {
  margin-top: 0;
}

.roll-head {
  justify-content: flex-start;
  align-items: center;
  gap: 5px 9px;
  padding: 1px 2px 5px;
}

.roll-title {
  font-size: 0.78rem;
}

.roll-region,
.roll-meta,
.roll-keys,
.roll-legend {
  font-size: 0.6rem;
}

.roll-dyncheck {
  order: -2;
  margin-right: 2px;
  color: rgba(154,160,171,0.72);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.roll-dyncheck input {
  width: 12px;
  height: 12px;
  opacity: 0.75;
}

.roll-panel canvas {
  height: 210px;
}

.roll-panel.dyn canvas {
  height: 258px;
}

.roll-readout {
  margin-top: 0.3rem;
  font-size: 0.66rem;
}

.daw-editor {
  padding: 6px 8px;
}

@media (max-width: 1180px) {
  .daw-cluster-region {
    flex-basis: 360px;
  }

  .daw-title .build-tag,
  .daw-cluster-region .toolbar-keyhint {
    display: none;
  }
}

/* Producer compact lanes + global-space pass 2026-07-09. */
.timeline-grid > .tl2-row {
  margin-bottom: 1px;
}

.timeline-grid .tl2-track-head {
  min-height: 32px;
  padding: 4px 6px;
  gap: 1px;
}

.timeline-grid .tl2-head-top {
  gap: 4px;
}

.timeline-grid .tl2-head-ctl {
  gap: 3px;
}

.timeline-grid .tl2-ms {
  width: 16px;
  height: 16px;
  font-size: 0.54rem;
}

.timeline-grid .tl2-head .tl-gain {
  height: 3px;
}

.timeline-grid .tl2-lane {
  height: 32px;
}

.timeline-grid .tl2-region {
  top: 2px;
  bottom: 2px;
  align-items: flex-end;
  min-width: 22px;
  padding: 0 4px 3px;
  border-radius: 5px;
}

.timeline-grid .tl2-region::after {
  display: none;
}

.tl2-mini-roll,
.tl2-prob-curve {
  position: absolute;
  inset: 4px 7px;
  z-index: 0;
  pointer-events: none;
}

.tl2-mini-roll {
  opacity: 0.9;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 4px,
      hsla(var(--track-h, 36), 58%, 76%, 0.11) 4px 5px,
      transparent 5px 8px);
}

.tl2-mini-roll.empty {
  background:
    linear-gradient(90deg,
      transparent 0,
      hsla(var(--track-h, 36), 72%, 68%, 0.26) 46%,
      hsla(var(--track-h, 36), 72%, 68%, 0.26) 54%,
      transparent 100%);
  opacity: 0.45;
}

.tl2-mini-note {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: 3px;
  border-radius: 2px;
  background: hsla(var(--track-h, 36), 92%, 69%, var(--a));
  box-shadow: 0 0 5px hsla(var(--track-h, 36), 80%, 58%, calc(var(--a) * 0.32));
}

.tl2-prob-curve {
  overflow: visible;
  opacity: 0.84;
}

.tl2-prob-shadow,
.tl2-prob-line {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tl2-prob-shadow {
  stroke: hsla(var(--track-h, 36), 86%, 58%, 0.24);
  stroke-width: 7;
}

.tl2-prob-line {
  stroke: hsla(var(--track-h, 36), 92%, 70%, 0.82);
  stroke-width: 1.8;
}

.timeline-grid .tl2-region-label,
.timeline-grid .tl2-seed-chip,
.timeline-grid .tl2-gain-tag,
.timeline-grid .tl2-badges,
.timeline-grid .tl2-resize,
.timeline-grid .tl2-looptick {
  z-index: 2;
}

.timeline-grid .tl2-region-label {
  min-width: 0;
  max-width: 62%;
  padding: 0 0.2rem;
  font-size: 0.56rem;
  line-height: 1.1;
  opacity: 0.88;
}

.timeline-grid .tl2-seed-chip {
  margin-right: 2px;
  padding: 0 3px;
  font-size: 0.5rem;
  line-height: 1.35;
  opacity: 0.82;
}

.timeline-grid .tl2-badges {
  transform: scale(0.84);
  transform-origin: right center;
}

.sp-panel-row {
  align-items: stretch;
}

.sp-left {
  position: relative;
  width: 150px;
  height: 105px;
  min-height: 105px;
  padding: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#spSection {
  width: 132px;
  height: 105px;
}

.sp-cyl-wrap {
  min-height: 105px;
}

#spCylinder {
  height: 105px;
  display: block;
}

/* A slim label that fades up out of the cross-section instead of a floating
   boxed overlay — seamless with the canvas above (owner 2026-07-10). */
.sp-settings-toggle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 17px;
  padding: 6px 8px 4px;
  overflow: hidden;
  color: rgba(214,224,236,0.68);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.54rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: linear-gradient(to top, rgba(8,11,16,0.9) 30%, rgba(8,11,16,0));
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.sp-settings-toggle:hover {
  color: #ffe0a3;
}

.sp-designer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  padding: 9px 10px;
  /* Reads as an extension of the cross-section drawer, not a separate panel:
     a thin accent hairline at the top, a gentle fade below (owner 2026-07-10). */
  border: 0;
  border-top: 1px solid rgba(245,166,35,0.22);
  background: linear-gradient(180deg, rgba(245,166,35,0.055), rgba(10,13,17,0.42) 70%);
}

.sp-room-current {
  display: grid;
  grid-template-columns: 44px;
  justify-items: center;
  gap: 2px;
  color: rgba(244,246,249,0.82);
  font-size: 0.55rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sp-room-current canvas {
  width: 44px;
  height: 30px;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 4px;
  background: rgba(8, 11, 16, 0.74);
}

.sp-designer-ctls {
  grid-template-columns: repeat(auto-fit, minmax(134px, 1fr));
  gap: 4px 10px;
  min-width: 0;
}

.sp-designer-ctls .sp-ctl {
  min-width: 0;
  min-height: 22px;
  white-space: nowrap;
}

.sp-designer-ctls .sp-ctl select,
.sp-designer-ctls .sp-ctl input[type="range"] {
  width: 78px;
  max-width: 46%;
}

.sp-designer-ctls .sp-room-blurb {
  grid-column: 1 / -1;
  min-height: 0;
  justify-content: flex-start;
  color: rgba(154,160,171,0.72);
  white-space: normal;
}

/* Sub-note tone designer compaction 2026-07-09. */
.subnote-workspace-mode .subnote-full-card {
  grid-column: auto;
  grid-row: auto;
  top: 54px;
  left: 4px;
  right: 4px;
  bottom: 42px;
  padding: 4px 8px 6px;
}

.subnote-workspace-mode .subnote-full-layout,
.subnote-workspace-mode .harmonic-stage.chorda {
  gap: 4px;
}

.subnote-workspace-mode .ch-head {
  min-height: 15px;
  margin: 0 4px;
  align-items: center;
}

.ch-title-block {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.ch-preset-title {
  margin: 0;
  color: var(--text3);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: text;
}

.ch-title-edit {
  width: min(220px, 28vw);
  min-height: 19px;
  padding: 1px 6px;
  color: rgba(244,247,250,0.98);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(8, 12, 18, 0.92);
  border: 1px solid rgba(245,166,35,0.72);
  border-radius: 5px;
  outline: none;
}

.subnote-workspace-mode .layer-edit-tag {
  font-size: 0.62rem;
}

.subnote-workspace-mode .ch-readout {
  font-size: 0.62rem;
}

.subnote-workspace-mode .ch-rail {
  gap: 7px;
  align-items: stretch;
  margin-bottom: 3px;
}

.subnote-workspace-mode .ch-sep {
  align-self: center;
  padding: 0 1px;
  font-size: 0.84rem;
  opacity: 0.75;
}

.subnote-workspace-mode .ch-card {
  position: relative;
  height: clamp(70px, 10.5vh, 88px);
  min-height: 58px;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-radius: 9px;
}

.subnote-workspace-mode .ch-card::before,
.subnote-workspace-mode .ch-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.subnote-workspace-mode .ch-card::before {
  top: 0;
  height: 45px;
  background: linear-gradient(180deg, rgba(9, 13, 19, 0.92), rgba(9, 13, 19, 0.52) 62%, rgba(9, 13, 19, 0));
}

.subnote-workspace-mode .ch-card::after {
  bottom: 0;
  height: 34px;
  opacity: 0;
  background: rgba(7, 10, 15, 0.88);
  border-top: 1px solid rgba(255,255,255,0.035);
  transition: opacity 0.14s ease;
}

.subnote-workspace-mode .ch-card:hover::after,
.subnote-workspace-mode .ch-card.active::after {
  opacity: 1;
}

.subnote-workspace-mode .ch-card-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 8px 10px 18px;
}

.subnote-workspace-mode .ch-card-n {
  color: rgba(244,247,250,0.92);
  font-size: 0.72rem;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.72);
}

.subnote-workspace-mode .ch-power {
  position: relative;
  z-index: 4;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.75));
}

.subnote-workspace-mode .ch-thumb {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

.subnote-workspace-mode .ch-card .ch-headline,
.subnote-workspace-mode .ch-card .ch-card-sum {
  position: absolute;
  left: 10px;
  right: 10px;
  z-index: 3;
  opacity: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.82);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.subnote-workspace-mode .ch-card .ch-headline {
  bottom: 18px;
  color: rgba(244,247,250,0.9);
  font-size: 0.62rem;
  transform: translateY(4px);
}

.subnote-workspace-mode .ch-card .ch-card-sum {
  bottom: 5px;
  color: rgba(179,191,205,0.84);
  font-size: 0.55rem;
  transform: translateY(6px);
}

.subnote-workspace-mode .ch-card:hover .ch-headline,
.subnote-workspace-mode .ch-card:hover .ch-card-sum,
.subnote-workspace-mode .ch-card.active .ch-headline,
.subnote-workspace-mode .ch-card.active .ch-card-sum {
  opacity: 1;
  transform: translateY(0);
}

.subnote-workspace-mode .ch-card.stage-off .ch-thumb,
.subnote-workspace-mode .ch-card.stage-off .ch-headline,
.subnote-workspace-mode .ch-card.stage-off .ch-card-sum {
  opacity: 0.35;
}

.subnote-workspace-mode .harmonic-stage.chorda .ch-main {
  min-height: clamp(170px, 30vh, 250px);
}

/* Producer patch composer: a deliberately small three-pane inspector. */
.palette-item.selected { border-color: color-mix(in srgb, var(--accent) 72%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent); }
.pal-top { display:flex; align-items:center; gap:6px; width:100%; }
.palette-zones { display:grid; grid-template-columns:1fr 1fr; gap:5px; width:100%; }
.palette-zone { min-width:0; border:1px dashed var(--border); background:var(--surface2); border-radius:6px; padding:5px 6px; text-align:left; color:var(--text3); cursor:pointer; }
.palette-zone b,.palette-zone span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.palette-zone b { color:var(--text2); font-size:.59rem; text-transform:uppercase; letter-spacing:.06em; }
.palette-zone span { font-size:.68rem; margin-top:2px; }
.palette-zone.filled { border-style:solid; border-color:color-mix(in srgb,var(--accent) 38%,var(--border)); color:var(--text); background:color-mix(in srgb,var(--accent) 7%,var(--surface2)); }
.pal-draft-note { width:100%; font-size:.62rem; color:var(--text3); }
.patch-inspector { display:grid; grid-template-columns:minmax(250px,1fr) minmax(270px,1.05fr) minmax(250px,1fr); min-height:220px; background:var(--surface); }
.patch-pane { min-width:0; padding:10px; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.patch-pane:last-child { border-right:0; }
.patch-pane header { display:flex; gap:6px; align-items:center; min-height:20px; color:var(--text2); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.patch-pane header span { margin-left:auto; color:var(--text3); text-transform:none; letter-spacing:0; font-size:.62rem; }
.patch-pane header button { margin-left:auto; border:0; color:var(--text3); background:transparent; cursor:pointer; }
.patch-pane header button + button { margin-left:0; }
.patch-layer-list,.patch-space-map { display:flex; flex-direction:column; gap:5px; overflow:auto; max-height:230px; }
.patch-layer-list h4 { margin:2px 0; color:var(--text3); font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; }
.patch-source-row { display:flex; align-items:center; gap:5px; padding:5px; background:var(--surface2); border-left:2px solid var(--accent); border-radius:4px; font-size:.62rem; }
.patch-source-row.muted { opacity:.45; }
.patch-source-row b { min-width:54px; color:var(--text2); }
.patch-source-row label { display:flex; align-items:center; gap:3px; color:var(--text3); min-width:0; flex:1; }
.patch-source-row input { width:58px; min-width:0; }
.patch-source-row button { border:1px solid var(--border); border-radius:3px; background:var(--display); color:var(--text3); font-size:.58rem; }
.patch-source-note,.patch-pane p,.patch-engine-summary,.patch-global-note { color:var(--text3); font-size:.64rem; line-height:1.35; }
.patch-pane > label { font-size:.66rem; color:var(--text2); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.patch-pane select { max-width:130px; background:var(--display); color:var(--text); border:1px solid var(--border); border-radius:4px; }
.patch-perc-toggle { justify-content:flex-start !important; }
.patch-scale { border-top:1px solid var(--border); padding-top:7px; }
.patch-scale-head { color:var(--text2); font-size:.66rem; margin-bottom:5px; }
.patch-degrees { display:flex; gap:3px; flex-wrap:wrap; }
.patch-degrees button { width:23px; height:20px; border:1px solid var(--border); border-radius:3px; background:var(--display); color:var(--text3); font-size:.61rem; }
.patch-degrees button.sub { border-color:#d9a441; color:#d9a441; }.patch-degrees button.root { border-color:#7fce82; color:#7fce82; }
@media (max-width: 900px) { .patch-inspector { grid-template-columns:1fr; }.patch-pane { border-right:0; border-bottom:1px solid var(--border); }.patch-pane:last-child { border-bottom:0; } }

/* Patch inspector v2 — one named, spatially legible object instead of three
   disconnected forms.  These rules intentionally supersede the first pass
   above while keeping its compact controls usable at narrow widths. */
.patch-editor-wrap { gap:0; }
.patch-editor-wrap .editor-body { overflow:auto; }
.patch-inspector { display:block; min-height:0; background:var(--surface); }
.patch-inspector-titlebar { display:flex; align-items:center; gap:12px; min-height:42px; padding:6px 12px; border-bottom:1px solid var(--border); background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 52%); }
.patch-inspector-titlebar > div:first-child { min-width:170px; }
.patch-inspector-titlebar span { display:block; color:var(--text3); font-size:.58rem; letter-spacing:.11em; text-transform:uppercase; }
.patch-inspector-titlebar h3 { margin:2px 0 0; color:var(--text); font-size:.92rem; line-height:1.05; font-weight:650; }
.patch-inspector-badges { display:flex; gap:5px; flex:1; align-items:center; min-width:0; overflow:auto; }
.patch-inspector-badges i { flex:0 0 auto; border:1px solid var(--border); border-radius:999px; background:var(--display); padding:3px 6px; color:var(--text3); font-size:.58rem; font-style:normal; white-space:nowrap; }
.patch-inspector-badges .patch-local-badge { color:color-mix(in srgb, var(--accent) 75%, var(--text)); border-color:color-mix(in srgb, var(--accent) 38%, var(--border)); }
.patch-title-actions { display:flex; align-items:center; gap:7px; flex:0 0 auto; }.patch-title-actions .editor-switch { margin:0; }.patch-title-actions .editor-tab { padding:3px 8px; }
.patch-close { width:25px; height:25px; border:1px solid var(--border); border-radius:5px; background:transparent; color:var(--text3); font-size:1rem; cursor:pointer; }
.patch-close:hover { background:var(--surface2); color:var(--text); }
.patch-inspector-grid { display:grid; grid-template-columns:minmax(235px,.88fr) minmax(310px,1.18fr) minmax(270px,.98fr); min-height:280px; }
.patch-inspector-grid .patch-pane { gap:9px; padding:11px 12px; border-right:1px solid var(--border); }
.patch-inspector-grid .patch-pane:last-child { border-right:0; }
.patch-inspector-grid .patch-pane > header { justify-content:space-between; min-height:18px; color:var(--text2); }
.patch-inspector-grid .patch-pane > header > span { color:var(--text2); font-size:.64rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.patch-inspector-grid .patch-pane > header small { color:var(--text3); font-size:.59rem; text-transform:none; letter-spacing:0; font-weight:400; }
.patch-inspector-grid .patch-pane > header div { display:flex; gap:4px; }
.patch-inspector-grid .patch-pane > header button { width:20px; height:20px; margin:0; padding:0; border:1px solid transparent; border-radius:4px; }
.patch-inspector-grid .patch-pane > header button:hover { color:var(--text); border-color:var(--border); background:var(--surface2); }
.patch-sound-meta { display:flex; align-items:baseline; justify-content:space-between; margin-top:3px; color:var(--text2); font-size:.72rem; font-weight:600; }
.patch-sound-meta span { max-width:52%; overflow:hidden; color:var(--text3); font-size:.59rem; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.patch-layer-list { max-height:none; gap:6px; overflow:visible; }
.patch-main-source { display:flex; align-items:center; gap:8px; min-height:42px; padding:7px 8px; border:1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius:7px; background:linear-gradient(110deg, color-mix(in srgb, var(--accent) 15%, var(--surface2)), var(--surface2)); }
.patch-main-source > div { min-width:0; display:flex; flex:1; flex-direction:column; gap:1px; }
.patch-main-source b { color:var(--text); font-size:.7rem; }.patch-main-source span { color:var(--text3); font-size:.58rem; }
.patch-main-source .patch-main-source-pos { flex:0 0 auto; color:var(--text3); }
.patch-layer-card { display:flex; align-items:center; gap:7px; min-height:31px; padding:4px 7px; border:1px solid var(--border); border-radius:6px; background:var(--surface2); }
.patch-layer-card.muted { opacity:.5; }
.patch-layer-card b { min-width:0; color:var(--text2); font-size:.65rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.patch-layer-card > span:not(.patch-layer-dot) { flex:1; color:var(--text3); font-size:.57rem; }
.patch-layer-card > div { display:flex; gap:3px; }
.patch-layer-dot { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:#d7a640; box-shadow:0 0 0 2px rgba(215,166,64,.14); }.patch-layer-dot.blue { background:#6da8df; box-shadow:0 0 0 2px rgba(109,168,223,.14); }.patch-layer-dot.pink { background:#cf7bc3; box-shadow:0 0 0 2px rgba(207,123,195,.14); }
.patch-layer-toggle { min-width:19px; height:18px; padding:0 3px; border:1px solid var(--border); border-radius:3px; background:var(--display); color:var(--text3); font-size:.55rem; cursor:pointer; }.patch-layer-toggle.active { color:var(--text); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 18%, var(--display)); }
.patch-layer-empty { padding:9px; border:1px dashed var(--border); border-radius:6px; color:var(--text3); font-size:.62rem; line-height:1.35; }
.patch-space-stage { position:relative; align-self:center; width:min(160px,50vw); aspect-ratio:1; margin:1px auto -2px; overflow:hidden; border:1px solid color-mix(in srgb, var(--accent) 26%, var(--border)); border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, var(--surface2)) 0 3%, transparent 3.5% 100%), var(--surface2); }
.patch-space-stage > i { position:absolute; inset:18%; border:1px solid color-mix(in srgb, var(--text3) 28%, transparent); border-radius:50%; pointer-events:none; }.patch-space-stage > i:nth-child(2) { inset:34%; }.patch-space-stage > i:nth-child(3) { inset:0; border-color:color-mix(in srgb, var(--accent) 15%, var(--border)); }
.patch-space-centre { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--text3); font-size:.55rem; pointer-events:none; }
.patch-space-dot { position:absolute; left:var(--dot-x); top:var(--dot-y); width:10px; height:10px; transform:translate(-50%,-50%); border:2px solid var(--surface); border-radius:50%; background:#d7a640; box-shadow:0 0 0 2px rgba(215,166,64,.25),0 2px 5px rgba(0,0,0,.5); }.patch-space-dot.blue { background:#6da8df; box-shadow:0 0 0 2px rgba(109,168,223,.25),0 2px 5px rgba(0,0,0,.5); }.patch-space-dot.pink { background:#cf7bc3; box-shadow:0 0 0 2px rgba(207,123,195,.25),0 2px 5px rgba(0,0,0,.5); }.patch-space-dot.muted { opacity:.3; }
.patch-movement-control { display:flex; align-items:center; justify-content:space-between; margin-top:1px; padding:5px 7px; border:1px solid var(--border); border-radius:5px; background:var(--surface2); color:var(--text2); font-size:.62rem; }.patch-movement-control select { max-width:112px; padding:2px 4px; font-size:.62rem; }
.patch-pane-space > p { margin:0; color:var(--text3); font-size:.59rem; line-height:1.3; }
.patch-placement-list { display:flex; flex-direction:column; gap:4px; max-height:104px; overflow:auto; }
.patch-placement-row { display:grid; grid-template-columns:9px minmax(47px,.75fr) minmax(80px,1fr) minmax(80px,1fr); align-items:center; gap:5px; padding:4px 5px; border-radius:5px; background:var(--surface2); }.patch-placement-row.muted { opacity:.46; }.patch-placement-row b { overflow:hidden; color:var(--text2); font-size:.59rem; text-overflow:ellipsis; white-space:nowrap; }.patch-placement-row label { display:flex; align-items:center; gap:3px; color:var(--text3); font-size:.54rem; }.patch-placement-row input { min-width:0; width:100%; }
.patch-pane-macro { background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 3%, var(--surface)), var(--surface)); }
.patch-module-card { display:flex; flex-direction:column; gap:5px; padding:7px; border:1px solid var(--border); border-radius:7px; background:var(--surface2); }.patch-module-card-head { display:flex; align-items:center; gap:6px; min-height:15px; }.patch-module-card-head b { color:var(--text2); font-size:.65rem; }.patch-module-card-head > span { flex:1; overflow:hidden; color:var(--text3); font-size:.57rem; text-align:right; text-overflow:ellipsis; white-space:nowrap; }.patch-module-card-head > button { margin-left:0; border:0; background:transparent; color:var(--text3); cursor:pointer; }
.patch-perc-toggle { margin-left:auto; color:var(--text3); font-size:.58rem; text-transform:none; letter-spacing:0; }.patch-perc-toggle input { margin:0 3px 0 0; vertical-align:middle; }
.patch-module-card .smart-combo-btn { min-height:25px; font-size:.65rem; }.patch-module-card .smart-combo-pop { z-index:20; }
.patch-scale-card { gap:4px; }.patch-scale { border-top:0; padding-top:0; }.patch-scale-head { margin-bottom:5px; color:var(--text2); font-size:.64rem; }.patch-degrees { flex-wrap:nowrap; overflow:auto; padding-bottom:1px; }.patch-degrees button { flex:0 0 auto; }.patch-global-note { margin-top:4px; color:var(--text3); font-size:.56rem; }.patch-text-action { align-self:flex-start; padding:0; border:0; background:none; color:var(--text3); font-size:.59rem; cursor:pointer; }.patch-text-action:hover { color:var(--text); }
@media (max-width: 1000px) { .patch-inspector-grid { grid-template-columns:1fr 1.1fr; }.patch-pane-macro { grid-column:1 / -1; }.patch-pane-macro .patch-module-card { flex:1; }.patch-pane-macro { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; }.patch-pane-macro > header { grid-column:1 / -1; }.patch-scale-card { grid-column:1 / -1; } }
@media (max-width: 720px) { .patch-inspector-titlebar { align-items:flex-start; flex-wrap:wrap; gap:7px; }.patch-inspector-badges { order:3; flex-basis:calc(100% - 32px); }.patch-inspector-grid,.patch-pane-macro { grid-template-columns:1fr; }.patch-pane-macro { display:flex; }.patch-pane-macro > header { grid-column:auto; }.patch-scale-card { grid-column:auto; }.patch-inspector-grid .patch-pane { border-right:0; border-bottom:1px solid var(--border); }.patch-space-stage { width:130px; }.patch-placement-list { max-height:none; } }

/* Producer patch inspector v3 (owner 2026-07-10): a draggable space stage + a
   sub-note-style layer strip replace the static dots, placement sliders and
   layer cards. Reuses .sp-ctl / .pal-btn from the sub-note layer strip. */
.patch-pane-space { min-height:0; }
.patch-stage-wrap { flex:1; min-height:148px; display:flex; }
#patchStage { flex:1; width:100%; height:100%; min-height:148px; display:block; border:1px solid var(--border); border-radius:8px; background:var(--display); cursor:crosshair; }
.patch-stage-readout { min-height:14px; color:var(--text3); font-size:.6rem; font-variant-numeric:tabular-nums; }
.patch-lyr { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--border); border-left:3px solid hsl(var(--layer-hue,36) 70% 55%); border-radius:7px; background:var(--surface2); }
.patch-lyr.base { background:linear-gradient(110deg, color-mix(in srgb, var(--accent) 12%, var(--surface2)), var(--surface2)); }
.patch-lyr.sel { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.patch-lyr.muted { opacity:.5; }
.patch-lyr-tag { flex:0 0 auto; width:18px; height:18px; display:flex; align-items:center; justify-content:center; border-radius:4px; background:color-mix(in srgb, hsl(var(--layer-hue,36) 70% 55%) 55%, transparent); color:#0d1015; font-size:.6rem; font-weight:700; font-family:var(--mono); }
.patch-lyr-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.patch-lyr-name { display:flex; align-items:center; gap:6px; color:var(--text2); font-size:.66rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.patch-lyr-badge { flex:0 0 auto; padding:1px 5px; border-radius:999px; background:color-mix(in srgb, var(--accent) 22%, var(--display)); color:var(--accent); font-size:.5rem; letter-spacing:.06em; }
.patch-lyr-ctls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.patch-lyr-ctls .sp-ctl { font-size:.56rem; }
.patch-lyr-ctls .sp-ctl input[type=range] { width:54px; }
.patch-lyr-mute.on { color:var(--text); border-color:#c96; background:color-mix(in srgb, #c96 22%, var(--display)); }
.patch-lyr-solo.on { color:#0d1015; border-color:#e7b34a; background:#e7b34a; }
.patch-lyr-empty { padding:8px; border:1px dashed var(--border); border-radius:6px; color:var(--text3); font-size:.6rem; line-height:1.3; }
/* Percussion hits are grouped + tinted apart from the melodic layers (owner 2026-07-10) */
.patch-lyr-group { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:6px 2px 2px; padding-top:6px; border-top:1px dashed var(--border2); color:var(--eff); font-size:.56rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; }
.patch-lyr-group small { color:var(--text3); text-transform:none; letter-spacing:0; font-weight:400; font-size:.55rem; }
.patch-lyr-perc { background:linear-gradient(110deg, color-mix(in srgb, var(--eff) 9%, var(--surface2)), var(--surface2)); }
.patch-lyr-badge.perc { background:color-mix(in srgb, var(--eff) 22%, var(--display)); color:var(--eff); }

/* The module smart-combo sits in a COLUMN flex here; keep it button-height so
   it can't stretch open a big gap (which also dropped its popover to the pane
   bottom) — the root of the "weird layers panel" (owner 2026-07-10). */
.patch-inspector .smart-combo { flex:0 0 auto; }
/* Fit the three-column view into the dock: the inspector fills the dock and each
   pane scrolls INTERNALLY, so the whole editor never scroll-jumps and the space
   stage stays put (owner 2026-07-10). Combined with a taller patch dock. */
.patch-editor-wrap .editor-body { overflow:hidden; }
.patch-inspector { display:flex; flex-direction:column; height:100%; min-height:0; }
.patch-inspector-grid { flex:1; min-height:120px; }
.patch-inspector-grid .patch-pane { gap:7px; padding:9px 11px; overflow-y:auto; min-height:0; }
.patch-inspector-grid .patch-pane::-webkit-scrollbar { width:6px; }
.patch-inspector-grid .patch-pane::-webkit-scrollbar-thumb { background:rgba(120,130,150,0.3); border-radius:4px; }
.patch-sound-meta { margin-top:1px; }
.patch-module-card { padding:6px 7px; gap:4px; }
.patch-pane p, .patch-pane-space > p, .patch-global-note { line-height:1.28; }

/* ── patch inspector: drag-drop module swap + 2-col macro (owner 2026-07-10) ── */
/* Percussion + Note engine sit side by side to shorten the macro pane; Scale
   spans full width below. */
.patch-macro-2col { display:grid; grid-template-columns:1fr 1fr; gap:6px; align-items:start; }
.patch-pane-name { max-width:58%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* the sub-note & macro dropdowns are gone — swap a module by dragging a browser
   preset onto the pane; it outlines GREEN before dropping */
.patch-drop-hint { margin-top:auto; padding:5px 7px; border:1px dashed var(--border2); border-radius:6px; color:var(--text3); font-size:.57rem; line-height:1.3; text-align:center; opacity:.65; }
.patch-inspector-grid [data-patch-drop] { transition:background-color .08s; }
.patch-inspector-grid [data-patch-drop].drop-target { outline:2px solid var(--green); outline-offset:-2px; background:color-mix(in srgb, var(--green) 9%, transparent); }
.patch-inspector-grid [data-patch-drop].drop-target .patch-drop-hint { border-color:var(--green); border-style:solid; color:var(--green); opacity:1; }
/* keep the left (sub-note) pane stacked above the middle/macro panes (d) */
.patch-inspector-grid .patch-pane-subnote { position:relative; z-index:2; }

/* Harmonic guide: palette-first scale source search above the marker roll. */
.hg-head { padding:5px 7px; border-bottom:1px solid var(--border); background:var(--surface); }
.hg-picker { display:flex; align-items:center; gap:6px; min-width:0; }
.hg-picker input { width:min(260px,38%); min-width:150px; border:1px solid var(--border); border-radius:4px; background:var(--display); color:var(--text); padding:4px 6px; font-size:.65rem; }
.hg-choice-list { display:flex; align-items:center; gap:4px; overflow:auto; min-width:0; }
.hg-choice-list button { flex:0 0 auto; max-width:180px; border:1px solid var(--border); border-radius:4px; background:var(--surface2); color:var(--text); padding:3px 6px; text-align:left; cursor:pointer; }
.hg-choice-list button b,.hg-choice-list button i { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hg-choice-list button b { font-size:.62rem; }.hg-choice-list button i { color:var(--text3); font-size:.56rem; font-style:normal; }
.tl2-gsbtn { min-width:25px; font-size:.57rem; letter-spacing:-.04em; }

/* ── Five-part producer notation system ────────────────────────────────
   Each supplied PNG is used as an alpha mask. The differently cropped source
   canvases are positioned into one shared badge here, so active parts can be
   recoloured without maintaining duplicate artwork. */
.saem-icon {
  position:relative; display:inline-block; flex:0 0 auto; width:62px; height:38px;
  color:#737d8d; border:0; background:transparent; box-sizing:border-box; vertical-align:middle;
}
.saem-icon.compact { width:40px; height:25px; }
.saem-icon.has-active { border:0; box-shadow:none; }
.saem-part {
  position:absolute; display:block; background:#56606d; opacity:.68;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  filter:drop-shadow(0 1px rgba(0,0,0,.9)) drop-shadow(0 -1px rgba(255,255,255,.055));
}
.saem-part.active {
  background:#367db9; opacity:1;
  filter:drop-shadow(-.65px 0 #7eb5df) drop-shadow(.65px 0 #7eb5df)
    drop-shadow(0 -.65px #7eb5df) drop-shadow(0 1px rgba(0,6,14,.96));
}
.saem-stave { left:3%; top:5%; width:94%; height:58%; -webkit-mask-image:url('/saem-icons/stave.png'); mask-image:url('/saem-icons/stave.png'); }
.saem-clef { left:8%; top:0; width:31%; height:78%; -webkit-mask-image:url('/saem-icons/clef.png'); mask-image:url('/saem-icons/clef.png'); }
.saem-notes { left:42%; top:1%; width:45%; height:62%; -webkit-mask-image:url('/saem-icons/notes.png'); mask-image:url('/saem-icons/notes.png'); }
.saem-space { left:43%; top:59%; width:42%; height:19%; -webkit-mask-image:url('/saem-icons/slur.png'); mask-image:url('/saem-icons/slur.png'); }
.saem-percussion { left:4%; top:78%; width:88%; height:15%; -webkit-mask-image:url('/saem-icons/percussion.png'); mask-image:url('/saem-icons/percussion.png'); }

.saem-browser-facets { display:grid; grid-template-columns:minmax(38px,auto) repeat(5,minmax(0,1fr)); gap:3px; margin:3px 0 5px; align-items:center; }
.saem-browser-facets > button {
  min-width:0; min-height:28px; padding:1px; border:1px solid var(--border);
  border-radius:6px; background:var(--display); color:var(--text3); cursor:pointer;
}
.saem-browser-facets > button:first-child { min-height:24px; padding:0 8px; font-size:0.68rem; }
.saem-browser-facets .saem-icon { width:100%; max-width:40px; }
.saem-browser-facets > button.active { border-color:#4b91cf; background:rgba(41,88,133,.2); color:var(--text); }
.saem-browser-facets .saem-icon { background:transparent; }
.browser-row > .saem-icon { margin-right:2px; }
.pal-top { display:flex; align-items:center; gap:6px; width:100%; min-width:0; flex-wrap:nowrap; }
.pal-top > .saem-icon { margin-right:1px; }
.pal-top > .pal-name { flex:1 1 60px; }
.pal-top > .pal-kind { flex:0 0 auto; }
.pal-top > .pal-actions { flex:0 0 auto; margin-left:4px; justify-content:flex-end; }
.pal-module-names { display:flex; flex-wrap:wrap; gap:3px 7px; width:100%; padding-left:47px; }
.pal-module-name { min-width:0; color:var(--text2); font-size:.56rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pal-module-name b { margin-right:4px; color:var(--text3); font-size:.48rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.editable-name { cursor:text; }
.editable-name:hover { color:var(--text); text-decoration:underline dotted rgba(126,181,223,.7); text-underline-offset:2px; }
.inline-name-input { min-width:70px; max-width:100%; height:22px; padding:2px 5px; border:1px solid #4b91cf; border-radius:4px; background:var(--display); color:var(--text); font:inherit; font-size:.64rem; }

.saem-route {
  flex:0 0 auto !important; width:auto !important; height:auto !important; margin:0 !important;
  padding:1px !important; border:1px solid transparent !important; border-radius:6px !important;
  background:transparent !important; cursor:pointer;
}
.saem-route:hover,.saem-route.active { border-color:#4b91cf !important; background:rgba(41,88,133,.18) !important; }
.patch-inspector-grid .patch-pane > header > .saem-route + span { margin-left:0; }
.patch-module-card-head > .saem-route { margin-right:2px !important; }
.patch-module-card-head > .editable-name { margin-left:auto; max-width:48%; color:var(--text3); font-size:.56rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.patch-module-card > small { color:var(--text3); font-size:.58rem; }

.gs-chevron { display:flex; align-items:center; gap:5px; }
.gs-chevron .saem-icon { background:transparent; }
.hg-current { color:var(--text); font-size:.78rem; font-weight:600; min-height:24px; display:flex; align-items:center; }
.hg-current.hg-empty { color:var(--text3); font-weight:400; font-style:italic; }
.hg-divs { color:var(--text3); font-size:.62rem; }
.hg-divs::before { content:"·"; margin-right:6px; color:var(--text3); }

.patch-save-wrap { position:relative; }
.patch-save-toggle.dirty { box-shadow:0 0 0 1px rgba(75,145,207,.4); }
.patch-save-pop {
  position:absolute; z-index:60; top:calc(100% + 6px); right:0; width:360px; padding:10px;
  border:1px solid var(--border2); border-radius:8px; background:var(--surface);
  box-shadow:0 14px 38px rgba(0,0,0,.52); text-align:left;
}
.patch-save-pop > label { display:flex; align-items:center; gap:8px; color:var(--text2); font-size:.65rem; }
.patch-save-pop > label input { flex:1; min-width:0; padding:5px 7px; border:1px solid var(--border); border-radius:5px; background:var(--display); color:var(--text); }
.patch-save-label { margin:9px 0 5px; color:var(--text3); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; }
.saem-selector { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.saem-selector-part {
  display:flex; align-items:center; gap:6px; min-width:0; padding:4px; border:1px solid var(--border);
  border-radius:6px; background:var(--display); color:var(--text3); cursor:pointer; text-align:left;
}
.saem-selector-part.selected { border-color:rgba(75,145,207,.8); color:var(--text); background:rgba(41,88,133,.14); }
.saem-selector-part:disabled { opacity:.3; cursor:not-allowed; filter:grayscale(1); }
.saem-selector-part > span:last-child { overflow:hidden; font-size:.58rem; text-overflow:ellipsis; white-space:nowrap; }
.patch-save-actions { display:flex; justify-content:flex-end; gap:6px; margin-top:9px; }

@media (max-width:720px) {
  .patch-save-pop { position:fixed; left:10px; right:10px; top:auto; bottom:10px; width:auto; }
}

/* ─── Account control: embedded in each view's top panel ─── */
.account-bar { position:relative; display:inline-flex; align-items:center; flex:none;
  margin-left:auto; font-family: var(--font); }
.account-bar .acct-pill { display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  background: var(--surface); border:1px solid var(--border2); border-radius: 999px;
  color: var(--text); font-size:.82rem; font-weight:600; cursor:pointer; line-height:1; }
.account-bar .acct-pill:hover { border-color: var(--accent); }
.account-bar .acct-pill:focus { outline: none; }
.account-bar .acct-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-bar .acct-dot { width:7px; height:7px; border-radius:50%; background: var(--green); flex:none; }
.account-bar .acct-avatar { width:22px; height:22px; border-radius:50%; object-fit:cover;
  margin:-2px 0 -2px -5px; flex:none; }
.account-bar .acct-avatar.none { display:none; }
.account-bar .acct-avatar:not(.none) + .acct-dot { display:none; }
.account-bar .acct-name { max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-bar .acct-pill.signin { color: var(--text2); font-weight:500; }
.account-bar .acct-pill.signin.primary { background: var(--accent); color:#000; border-color: var(--accent); font-weight:700; }
.account-bar .acct-pill.signin.primary:hover { filter:brightness(1.08); }
.account-bar .acct-menu { position:absolute; top:calc(100% + 6px); right:0; min-width:180px; z-index:4000;
  background: var(--surface); border:1px solid var(--border2); border-radius: var(--radius); padding:6px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.account-bar .acct-menu[hidden] { display:none; }
.account-bar .acct-who { padding:7px 9px 9px; border-bottom:1px solid var(--border); margin-bottom:5px; }
.account-bar .acct-who b { display:block; font-size:.85rem; color:var(--text); }
.account-bar .acct-who span { font-size:.72rem; color:var(--text3); }
.account-bar .acct-menu button { display:block; width:100%; text-align:left; padding:8px 9px;
  background:none; border:none; color: var(--text2); font-family:inherit; font-size:.83rem;
  border-radius: var(--radius-sm); cursor:pointer; }
.account-bar .acct-menu button:hover { background: var(--surface2); color: var(--text); }
.explore-top { display:flex; align-items:flex-start; }
.landing-header { position:relative; }
.landing-acct { position:absolute; top:14px; right:16px; }
.profile-back { display:flex; align-items:center; }
.daw-transport .account-bar { margin-left:auto; }

/* App-owned dialogs and Producer file menu. */
.app-dialog-overlay { position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(4,7,11,.72); backdrop-filter:blur(5px); }
.app-dialog { width:min(440px,100%); padding:20px; border:1px solid var(--border2); border-radius:12px; background:var(--surface); box-shadow:0 24px 80px rgba(0,0,0,.58); }
.app-dialog h2 { margin:0 0 8px; font-size:1.05rem; }.app-dialog p { margin:0 0 14px; color:var(--text2); font-size:.82rem; }
.app-dialog-input { width:100%; padding:9px 10px; border:1px solid var(--border2); border-radius:7px; background:var(--display); color:var(--text); font:inherit; }
.app-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }.btn-danger { background:var(--red); border-color:var(--red); color:#fff; }
.daw-file-wrap { position:relative; flex:none; }.daw-file-button span { color:var(--text3); font-size:.58rem; }
.daw-file-pop { position:absolute; z-index:3000; top:calc(100% + 7px); left:0; width:240px; overflow:visible; padding:6px; border:1px solid var(--border2); border-radius:9px; background:var(--surface); box-shadow:0 18px 55px rgba(0,0,0,.58); }
.daw-file-pop[hidden] { display:none; }.daw-file-pop button { display:flex; flex-direction:column; gap:2px; width:100%; padding:7px 9px; border:0; border-radius:5px; background:transparent; color:var(--text2); text-align:left; cursor:pointer; font:inherit; font-size:.71rem; }
.daw-file-pop button:hover { background:var(--surface2); color:var(--text); }.daw-file-pop button.danger:hover { color:var(--red); }.daw-file-pop button b { color:inherit; font-size:.73rem; }.daw-file-pop button span,.daw-file-pop small { color:var(--text3); font-size:.61rem; }
.daw-file-section { margin-top:5px; padding-top:6px; border-top:1px solid var(--border); }.daw-file-section > strong { display:block; padding:3px 9px 4px; color:var(--text3); font-size:.56rem; letter-spacing:.09em; text-transform:uppercase; }.daw-file-ops { display:grid; grid-template-columns:1fr 1fr; }.daw-file-ops > strong { grid-column:1/-1; }
/* File menu fly-out submenus (Recent / Templates / Import-Export) */
.daw-file-divider { height:1px; background:var(--border); margin:5px 4px; }
.daw-file-sub { position:relative; }
.daw-file-pop .daw-file-subtrigger { flex-direction:row; align-items:center; justify-content:space-between; }
.daw-file-arrow { color:var(--text3); font-size:.7rem; }
.daw-file-flyout { position:absolute; left:100%; top:-7px; min-width:210px; max-height:min(460px,68vh); overflow:auto; padding:6px; border:1px solid var(--border2); border-radius:9px; background:var(--surface); box-shadow:0 18px 55px rgba(0,0,0,.58); display:none; }
.daw-file-sub:hover > .daw-file-flyout, .daw-file-sub:focus-within > .daw-file-flyout { display:block; }
.daw-file-sub:hover > .daw-file-subtrigger { background:var(--surface2); color:var(--text); }
.daw-file-empty { padding:7px 9px; color:var(--text3); font-size:.61rem; }

/* One coherent transport readout: position and editable BPM, no sliders. */
.daw-cluster-playback { border-color:color-mix(in srgb,var(--accent) 35%,var(--border)); background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--surface2)),var(--display)); }
.daw-transport-display { display:flex; align-items:stretch; overflow:hidden; border:1px solid var(--border2); border-radius:7px; background:#070b10; box-shadow:inset 0 1px 8px rgba(0,0,0,.55); }
.daw-transport-display > label,.daw-tempo-readout { display:grid; grid-template-columns:auto auto; align-items:center; gap:0 5px; min-width:64px; padding:3px 8px; border-right:1px solid var(--border); }
.daw-tempo-readout { grid-template-columns:auto auto auto; border-right:0; }.daw-transport-display span,.daw-tempo-readout span { grid-column:1/-1; color:var(--text3); font-size:.47rem; letter-spacing:.08em; text-transform:uppercase; }
.daw-pos { padding:0; border:0; background:transparent; color:var(--accent2); font:700 .78rem var(--mono); cursor:pointer; }.daw-tempo-readout input { width:38px; padding:0; border:0; outline:0; background:transparent; color:var(--accent2); font:700 .75rem var(--mono); }.daw-tempo-readout b { color:var(--text3); font-size:.47rem; }

.tl2-region.patch-selected { outline:2px solid color-mix(in srgb,var(--accent) 85%,white); outline-offset:1px; }

/* Effects read as a horizontal chain of filled mixer-style blocks. */
.prod-layer-fx,.layer-fx { flex-wrap:nowrap; overflow-x:auto; max-width:100%; padding-bottom:2px; }
.prod-fx-tag,.layer-fx-tag { flex:0 0 auto; min-width:132px; background:linear-gradient(90deg,color-mix(in srgb,var(--eff) 25%,var(--surface2)) 0 var(--wet),var(--surface2) var(--wet) 100%); }
.prod-fx-mix,.layer-fx-mix { display:flex; align-items:center; gap:3px; color:var(--text3); font-size:.46rem; text-transform:uppercase; }.prod-fx-wet,.layer-fx-wet { width:44px; }
.prod-fx-name,.layer-fx-name { max-width:86px; overflow:hidden; text-overflow:ellipsis; }.prod-fx-tag.off,.layer-fx-tag.off { filter:saturate(.2); }

.cloud-overlay { position: fixed; inset:0; z-index: 4100; background: rgba(8,9,12,.62);
  display:flex; align-items:center; justify-content:center; padding:24px; }
.cloud-overlay[hidden] { display:none; }
.cloud-modal { width:100%; max-width:520px; max-height:82vh; overflow:auto; background: var(--surface);
  border:1px solid var(--border2); border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.cloud-modal header { display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); }
.cloud-modal header h3 { margin:0; font-size:1.02rem; }
.cloud-modal header button.x { background:none; border:none; color:var(--text2); font-size:1.3rem; cursor:pointer; }
.cloud-actions { display:flex; gap:8px; padding:14px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.cloud-actions button { padding:8px 12px; border-radius: var(--radius-sm); border:1px solid var(--border2);
  background: var(--surface2); color: var(--text); font-family:inherit; font-size:.82rem; font-weight:600; cursor:pointer; }
.cloud-actions button.primary { background: var(--accent); color:#000; border-color: var(--accent); }
.cloud-actions button:hover { border-color: var(--accent); }
.cloud-list { list-style:none; margin:0; padding:8px 12px 16px; }
.cloud-list li { display:flex; align-items:center; gap:10px; padding:9px 8px; border-bottom:1px solid var(--border); }
.cloud-list li:last-child { border-bottom:none; }
.cloud-list .c-name { flex:1; min-width:0; }
.cloud-list .c-name b { display:block; font-size:.88rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cloud-list .c-name span { font-size:.7rem; color:var(--text3); }
.cloud-list .c-act { background:none; border:1px solid var(--border2); border-radius:5px; color:var(--text2);
  padding:4px 9px; font-size:.76rem; cursor:pointer; }
.cloud-list .c-act:hover { color:var(--text); border-color:var(--accent); }
.cloud-list .c-act.danger:hover { color:var(--red); border-color:var(--red); }
.cloud-empty { padding:22px 18px; color: var(--text3); font-size:.86rem; text-align:center; }

/* ─── Auth overlay (in-app create profile / log in) ─── */
.auth-modal { max-width:400px; }
.auth-modal header h3 { display:flex; align-items:center; gap:8px; }
.auth-tabs { display:flex; gap:4px; margin:14px 18px 0; padding:4px; background: var(--display);
  border:1px solid var(--border); border-radius: var(--radius-sm); }
.auth-tabs button { flex:1; padding:8px 0; background:none; border:none; border-radius:5px;
  color: var(--text3); font-family:inherit; font-size:.84rem; font-weight:600; cursor:pointer; }
.auth-tabs button.active { background: var(--surface2); color: var(--text); }
.auth-tabs button:hover { color: var(--text); }
.auth-reason { margin:12px 18px 0; padding:9px 11px; background: var(--surface2); border:1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text2); font-size:.8rem; }
.auth-form { display:flex; flex-direction:column; gap:11px; padding:16px 18px 6px; }
.auth-form label { display:flex; flex-direction:column; gap:5px; color: var(--text2); font-size:.78rem; font-weight:600; }
.auth-form input { padding:9px 10px; border:1px solid var(--border2); border-radius:7px;
  background: var(--display); color: var(--text); font:inherit; }
.auth-form input:focus { border-color: var(--accent); outline:none; }
.auth-hint { color: var(--text3); font-size:.72rem; font-weight:400; margin:0; }
.auth-form .auth-hint b { color: var(--text2); }
.auth-error { padding:8px 10px; background: color-mix(in srgb, var(--red) 14%, var(--surface));
  border:1px solid var(--red); border-radius: var(--radius-sm); color: var(--text); font-size:.78rem; }
.auth-error[hidden] { display:none; }
.auth-form button.primary { margin-top:4px; padding:10px 12px; border-radius: var(--radius-sm);
  border:1px solid var(--accent); background: var(--accent); color:#000; font-family:inherit;
  font-size:.86rem; font-weight:700; cursor:pointer; }
.auth-form button.primary:hover { filter:brightness(1.08); }
.auth-switch { display:block; width:100%; padding:12px 18px 16px; background:none; border:none;
  color: var(--text3); font-family:inherit; font-size:.78rem; cursor:pointer; text-align:center; }
.auth-switch:hover { color: var(--accent); }
.auth-form textarea { padding:9px 10px; border:1px solid var(--border2); border-radius:7px;
  background: var(--display); color: var(--text); font:inherit; resize:vertical; }
.save-share-row { flex-direction:row !important; align-items:center; gap:8px !important;
  color: var(--text2); font-size:.82rem; cursor:pointer; }
.top-save-btn { white-space:nowrap; }
.auth-form textarea:focus { border-color: var(--accent); outline:none; }

/* ─── Auth ENTRY card (create profile / log in) — shared design with the
   standalone /login page. Scoped to .auth-entry so the save / profile /
   share modals keep their plain header + title-case labels. ─── */
.auth-entry { max-width: 400px; position: relative; padding-bottom: 4px; }
.auth-entry .auth-x {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  background: none; border: none; color: var(--text3);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 2px 7px; border-radius: 6px;
}
.auth-entry .auth-x:hover { color: var(--text); background: var(--surface2); }
.auth-brand { display: flex; align-items: center; gap: 12px; padding: 24px 24px 2px; }
.auth-brand-icon { width: 44px; height: 44px; border-radius: 11px; flex: none; box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.auth-brand-text h3 {
  margin: 0; font-family: var(--brand-font); font-size: 1.45rem; font-weight: 800;
  letter-spacing: 0.01em; color: var(--text); line-height: 1.1;
}
.auth-sub { margin: 2px 0 0; color: var(--text3); font-size: 0.82rem; }
.auth-entry .auth-tabs { margin: 20px 24px 0; padding: 4px; }
.auth-entry .auth-tabs button { padding: 9px 0; font-size: 0.85rem; }
.auth-entry .auth-tabs button.active { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); }
.auth-entry .auth-reason { margin: 14px 24px 0; }
.auth-entry .auth-form { padding: 20px 24px 24px; gap: 14px; }
.auth-entry .auth-form > label {
  text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.66rem;
  font-weight: 700; color: var(--text3); gap: 7px;
}
.auth-entry .auth-form > label .auth-hint { text-transform: none; letter-spacing: normal; font-weight: 400; }
.auth-entry .auth-form input { padding: 11px 12px; font-size: 0.92rem; background: var(--bg); }
.auth-entry .auth-form > .auth-hint { margin-top: -4px; }
.auth-entry .auth-form button.primary { margin-top: 8px; padding: 12px; font-size: 0.95rem; }

/* ─── Community: context menu, stars, browser tier ─── */
.ctx-menu { position:fixed; z-index:5200; min-width:190px; margin:0; padding:5px; list-style:none;
  background: var(--surface); border:1px solid var(--border2); border-radius:9px;
  box-shadow: 0 18px 55px rgba(0,0,0,.58); }
.ctx-menu li { margin:0; padding:0; }
.ctx-menu button { display:block; width:100%; padding:8px 10px; background:none; border:none;
  border-radius:5px; color: var(--text2); font-family:inherit; font-size:.8rem; text-align:left; cursor:pointer; }
.ctx-menu button:hover { background: var(--surface2); color: var(--text); }
.ctx-menu button.danger:hover { color: var(--red); }

.br-author { display:block; color: var(--text3); font-size:.64rem; font-weight:400; }
.browser-row .br-author { margin-top:1px; }

.stars { display:inline-flex; align-items:center; gap:1px; color: var(--text3); font-size:.85rem; line-height:1; }
.stars .star { color: var(--border2); cursor:default; }
.stars .star.on { color: var(--accent); }
.stars.editable .star { cursor:pointer; transition: transform .1s ease, color .12s ease; }
/* Fill left→right up to the hovered star (`:has(~ :hover)` = earlier siblings). */
.stars.editable .star:hover, .stars.editable .star:has(~ .star:hover) { color: var(--accent2); }
.stars.editable .star:hover { transform: scale(1.25); }
.stars.editable .star:active { transform: scale(1.45); }
.stars .stars-label { margin-left:6px; color: var(--text3); font-size:.68rem; }
.rate-modal .rate-body { padding:14px 18px 20px; display:flex; flex-direction:column; gap:12px; }
.rate-modal .stars { font-size:1.5rem; gap:5px; }

/* ─── Community browser overlay ─── */
.pal-btn.community-open { width:auto; padding:2px 9px; font-size:.66rem; letter-spacing:.04em;
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border2)); border-radius:999px;
  color: var(--accent2); transition: background .15s ease, color .15s ease; }
.pal-btn.community-open:hover { background: var(--accent); color:#000; }
.cmty-modal { max-width:1080px; width:94vw; height:86vh; max-height:86vh; display:flex; flex-direction:column; overflow:hidden; }
.cmty-modal header { flex:none; gap:14px; }
.cmty-tabs { display:flex; gap:4px; margin-right:auto; margin-left:10px; }
.cmty-tabs button { padding:6px 12px; background:none; border:1px solid transparent; border-radius:999px;
  color: var(--text3); font-family:inherit; font-size:.8rem; font-weight:600; cursor:pointer; }
.cmty-tabs button:hover { color: var(--text); }
.cmty-tabs button.active { background: var(--surface2); border-color: var(--border2); color: var(--text); }
.cmty-controls { flex:none; display:flex; align-items:center; gap:8px; padding:10px 18px;
  border-bottom:1px solid var(--border); flex-wrap:wrap; }
.cmty-controls input[type="search"] { flex:1; min-width:180px; padding:8px 11px; border:1px solid var(--border2);
  border-radius:999px; background: var(--display); color: var(--text); font:inherit; font-size:.84rem; }
.cmty-controls input[type="search"]:focus { border-color: var(--accent); outline:none; }
.cmty-byuser { display:flex; align-items:center; gap:5px; color: var(--text3); font-size:.75rem; white-space:nowrap; }
.cmty-controls select { padding:7px 9px; border:1px solid var(--border2); border-radius:7px;
  background: var(--surface2); color: var(--text2); font:inherit; font-size:.76rem; }
.cmty-results { flex:1; overflow:auto; padding:14px 18px; }
.cmty-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; }
.cmty-card { display:flex; flex-direction:column; gap:6px; padding:11px 12px; background: var(--surface2);
  border:1px solid var(--border); border-radius:9px; cursor:grab;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.cmty-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border2));
  transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.32); }
.cmty-card:active { cursor:grabbing; transform: translateY(0); }
.cmty-card-head { display:flex; align-items:flex-start; gap:8px; }
.cmty-card-title { flex:1; min-width:0; }
.cmty-card-title b { display:block; font-size:.85rem; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmty-author { background:none; border:none; padding:0; color: var(--text3); font-family:inherit; font-size:.7rem; cursor:pointer; }
.cmty-author:hover { color: var(--accent); text-decoration:underline; }
.cmty-author.big { font-size:.88rem; color: var(--text); font-weight:600; text-align:left; }
.cmty-author.big span { color: var(--text3); font-weight:400; font-size:.74rem; }
.cmty-kind { color: var(--text3); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.cmty-desc { margin:0; color: var(--text2); font-size:.74rem; line-height:1.4; }
.cmty-tags { display:flex; flex-wrap:wrap; gap:4px; }
.cmty-tag { padding:2px 8px; background: var(--display); border:1px solid var(--border); border-radius:999px;
  color: var(--text3); font-family:inherit; font-size:.66rem; cursor:pointer; }
.cmty-tag:hover { color: var(--accent); border-color: var(--accent); }
.cmty-card-foot { display:flex; align-items:center; gap:7px; margin-top:auto; }
.cmty-spacer { flex:1; }
.cmty-add { padding:4px 10px; border:1px solid var(--border2); border-radius:999px; background: var(--surface);
  color: var(--text2); font-family:inherit; font-size:.72rem; font-weight:600; cursor:pointer; white-space:nowrap; }
.cmty-add:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.cmty-add.added { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--border2)); cursor:default; }
.cmty-yours { color: var(--text3); font-size:.68rem; font-style:italic; }
.cmty-empty { display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:40px 20px; color: var(--text3); font-size:.86rem; text-align:center; }
.cmty-empty .aud-mini-svg { width:64px; height:64px; opacity:.6; }
.cmty-empty .aud-mini-svg .icon-art { fill:none; stroke: var(--text3); }
.cmty-empty .aud-mini-svg .icon-fill { fill: var(--text3); }

/* Loading: shimmer skeleton cards instead of a bare "Loading…". */
@keyframes cmty-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.cmty-skel { height:118px; border-radius:9px; border:1px solid var(--border);
  background: linear-gradient(100deg, var(--surface2) 40%, color-mix(in srgb, var(--border2) 45%, var(--surface2)) 50%, var(--surface2) 60%);
  background-size: 200% 100%; animation: cmty-shimmer 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .cmty-skel { animation:none; } }

.cmty-toplist { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px;
  counter-reset: cmty-rank; }
.cmty-toplist li { display:flex; align-items:baseline; gap:12px; padding:10px 8px;
  border-bottom:1px solid var(--border); counter-increment: cmty-rank; }
.cmty-toplist li::before { content: counter(cmty-rank); flex:none; width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center; align-self:center;
  border-radius:50%; border:1px solid var(--border2); color: var(--text3);
  font-size:.74rem; font-weight:700; font-family: var(--mono); }
.cmty-toplist li:nth-child(1)::before { border-color: var(--accent); color: var(--accent); }
.cmty-toplist li:nth-child(2)::before, .cmty-toplist li:nth-child(3)::before {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border2)); color: var(--text2); }
.cmty-topscore { color: var(--accent); font-size:.8rem; font-weight:700; white-space:nowrap; }
.cmty-topitems { color: var(--text3); font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ─── Auditioner: the interactive machine overhanging the strip ─── */
.cmty-auditioner { flex:none; position:relative; display:flex; flex-direction:column;
  padding:7px 18px 8px; border-top:1px solid var(--border2);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--surface)), var(--surface)); }
.aud-bar { flex:none; display:flex; align-items:center; gap:8px; min-height:40px; }
/* Let the last cards scroll clear of the machine standing over the results. */
.cmty-results { padding-bottom:170px; }
.aud-title { color: var(--text3); font-size:.62rem; font-weight:700; letter-spacing:.12em; white-space:nowrap; }
.aud-btn { padding:4px 11px; border:1px solid var(--border2); border-radius:999px; background: var(--surface2);
  color: var(--text2); font-family:inherit; font-size:.72rem; font-weight:600; cursor:pointer; }
.aud-btn:hover { border-color: var(--accent); color: var(--text); }
.aud-btn.primary { background: var(--accent); border-color: var(--accent); color:#000; }

/* The contraption: Marcus's ink-line street organ, standing ON the strip and
   overhanging the results above it. The wrapper is aspect-locked to the
   980×172 viewBox. It ignores pointer events except on the machine's own
   interactive parts, so cards behind its empty air stay clickable. */
.aud-machine { position:absolute; bottom:calc(100% - 1px); left:24px; z-index:6;
  height:150px; aspect-ratio: 980 / 172; max-width:calc(100% - 48px);
  pointer-events:none;
  --aud-ink: #d9dce2;            /* line work on the dark stage */
  --aud-paper: #2b2417;          /* warm body fill when a part is inked in */
  --aud-ink-on: #f2c56b;         /* brass ink for awake parts */
}
/* A pool of shadow under the machine: a plain dark gradient that drops the
   contrast of whatever sits behind it, so the contraption reads as the
   foreground object. No blur. */
.aud-machine::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -38px -74px -10px;
  background:
    radial-gradient(ellipse 58% 40% at 50% 90%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 68%),
    radial-gradient(ellipse 76% 82% at 50% 72%, rgba(4, 5, 8, .88) 0%, rgba(4, 5, 8, .62) 50%, transparent 76%);
}
.aud-svg { display:block; width:100%; height:100%; overflow:visible; }
.aud-svg .aud-part { pointer-events:auto; }
/* The dim ink for empty/sleeping parts: the greyed-out DARK look, but built
   from solid colours — fully opaque, nothing shows through the machine. */
.aud-machine { --aud-ink-dim: color-mix(in srgb, #d9dce2 30%, #181b21); }
.aud-svg .aud-hit { cursor:pointer; }
.aud-svg #audDial { cursor:grab; }
.aud-svg #audDial:active { cursor:grabbing; }
.aud-svg .aud-hit-ns { cursor:ns-resize; }
.aud-svg #audCrankHit { cursor:grab; }
.aud-svg .aud-tick { fill: var(--aud-ink); stroke:none; font: 700 7px var(--mono); letter-spacing:.06em; }
.aud-svg .aud-tick.num { font-size: 11px; }
.aud-svg .aud-tick.sep { font-size: 9px; opacity:.6; }
.aud-part.on .aud-tick { fill: var(--aud-ink-on); }
/* Drum rig states (extra .aud-svg specificity so they beat the .on brass on
   a loaded engine):
   no-perc — the engine simply has no percussion: greyed out and asleep.
   muted   — percussion exists but was clicked off: stays brass, mallet stills. */
.aud-part.no-perc .anim-mallet, .aud-part.no-perc .anim-cymbal,
.aud-part.muted .anim-mallet, .aud-part.muted .anim-cymbal { animation-play-state:paused !important; }
.aud-svg .aud-part.no-perc .line-art { stroke: var(--aud-ink-dim); fill: var(--surface2); }
.aud-svg .aud-part.no-perc .detail { stroke: var(--aud-ink-dim); }
.aud-svg .aud-part.no-perc .filled { fill: var(--aud-ink-dim); }
.aud-svg .aud-part.no-perc .bg-fill { fill: var(--display); }
/* (Fast-forward speed is driven via the Web Animations API playbackRate —
   see rampMachineRate() — so the crank eases up and coasts back down.) */
.aud-svg .line-art { fill: var(--surface2); stroke: var(--aud-ink-dim); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; }
.aud-svg .detail { fill:none; stroke: var(--aud-ink-dim); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
.aud-svg .filled { fill: var(--aud-ink-dim); }
.aud-svg .bg-fill { fill: var(--display); }
.aud-svg .aud-hub { fill: var(--aud-ink-dim); }

/* Always opaque: empty parts sit in dim dark ink; a loaded slot turns its
   parts brass. (The highlight is the state signal, never transparency.) */
.aud-part { opacity:1; }
.aud-part.on .line-art { stroke: var(--aud-ink-on); fill: var(--aud-paper); }
.aud-part.on .detail { stroke: var(--aud-ink-on); }
.aud-part.on .filled { fill: var(--aud-ink-on); }
.aud-part.on .bg-fill { fill: color-mix(in srgb, var(--aud-paper) 55%, var(--display)); }
.aud-part.on .aud-hub { fill: var(--aud-ink-on); }
.aud-part.drop-target { opacity:1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); }
.aud-part.drop-target .line-art, .aud-part.drop-target .detail { stroke: var(--accent); }
.aud-part.drop-target .filled { fill: var(--accent); }

/* The two slot wells riding the toolbar: SYNTH and NOTE ENGINE. */
.aud-well { flex:1; min-width:0; display:flex; align-items:center; gap:6px; padding:4px 10px;
  border:1px dashed var(--border2); border-radius:999px; background: var(--display); }
.aud-well-label { flex:none; color: var(--text3); font-size:.56rem; font-weight:700; letter-spacing:.1em; }
.aud-well-hint { color: var(--text3); font-size:.68rem; font-style:italic; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.aud-well b { font-size:.7rem; color: var(--text); max-width:18ch; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.aud-well .cmty-author { font-size:.62rem; }
.aud-well.on { border-style:solid; border-color: color-mix(in srgb, var(--accent) 45%, var(--border2));
  background: color-mix(in srgb, var(--accent) 7%, var(--display)); }
.aud-well.drop-target { border-color: var(--accent); border-style:solid; }

/* Every moving piece carries its animation PAUSED. It runs only when its own
   module is loaded (.on) and the machine is playing — parts stall until the
   relevant module drives them. Speeds come from the loaded music via the
   --crank-dur/--roll-dur/--spin-dur/--lever-dur/--tap-dur vars set inline. */
@keyframes audg-spin { to { transform: rotate(360deg); } }
@keyframes audg-waggle { 0%, 100% { transform: rotate(-25deg); } 50% { transform: rotate(25deg); } }
@keyframes audg-tap { 0%, 100% { transform: rotate(-25deg); } 45% { transform: rotate(0deg); } 60% { transform: rotate(-25deg); } }
@keyframes audg-shiver { 0%, 9%, 31%, 100% { transform: rotate(0deg); } 12%, 24% { transform: rotate(5deg); } 18%, 30% { transform: rotate(-5deg); } }
@keyframes audg-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes audg-scroll1 { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -20; } }
@keyframes audg-scroll2 { from { stroke-dashoffset: -3; } to { stroke-dashoffset: -23; } }
@keyframes audg-scroll3 { from { stroke-dashoffset: -7; } to { stroke-dashoffset: -27; } }
@keyframes audg-comb { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes audg-steam1 { 0% { transform: translateY(0) scale(.5); opacity: 0; } 20% { transform: translateY(-10px) scale(1); opacity: .7; } 100% { transform: translateY(-40px) scale(1.5); opacity: 0; } }
@keyframes audg-steam2 { 0% { transform: translateY(0) scale(.5); opacity: 0; } 30% { transform: translateY(-15px) scale(1); opacity: .7; } 100% { transform: translateY(-45px) scale(1.5); opacity: 0; } }
@keyframes audg-steam3 { 0% { transform: translateY(0) scale(.5); opacity: 0; } 10% { transform: translateY(-8px) scale(1); opacity: .7; } 100% { transform: translateY(-38px) scale(1.5); opacity: 0; } }
@keyframes audg-steam4 { 0% { transform: translateY(0) scale(.5); opacity: 0; } 25% { transform: translateY(-12px) scale(1); opacity: .7; } 100% { transform: translateY(-42px) scale(1.5); opacity: 0; } }

.aud-svg .anim-crank   { transform-origin: 65px 100px;  animation: audg-spin var(--crank-dur, 2s) linear infinite paused; }
.aud-svg .anim-spinner { transform-origin: 240px 105px; animation: audg-spin var(--spin-dur, 4s) linear infinite paused; }
.aud-svg .anim-lever   { transform-origin: 360px 130px; animation: audg-waggle var(--lever-dur, 2.5s) ease-in-out infinite paused; }
.aud-svg .anim-mallet  { transform-origin: 750px 140px; animation: audg-tap var(--tap-dur, 1.2s) ease-in-out infinite paused; }
.aud-svg .anim-cymbal  { transform-origin: 840px 20px;  animation: audg-shiver var(--tap-dur, 1.2s) linear infinite paused; }
.aud-svg .anim-gear-fwd { transform-origin: 200px 35px; animation: audg-spin var(--roll-dur, 2s) linear infinite paused; }
.aud-svg .anim-gear-rev { transform-origin: 360px 35px; animation: audg-spin var(--roll-dur, 2s) linear infinite reverse paused; }
.aud-svg .anim-horn    { transform-origin: 460px 105px; animation: audg-pulse .8s ease-in-out infinite paused; }
.aud-svg .anim-roll-1  { stroke-dasharray: 4 6; animation: audg-scroll1 var(--roll-dur, 1s) linear infinite paused; }
.aud-svg .anim-roll-2  { stroke-dasharray: 6 4; animation: audg-scroll2 var(--roll-dur, 1s) linear infinite paused; }
.aud-svg .anim-roll-3  { stroke-dasharray: 3 7; animation: audg-scroll3 var(--roll-dur, 1s) linear infinite paused; }
.aud-svg .anim-comb    { animation: audg-comb 1.4s ease-in-out infinite paused; }
/* Reverb off = the pipes fall silent: no shimmer, no steam. */
.aud-svg .anim-comb.muted { animation-play-state: paused !important; }
/* Steam: invisible while the machine is stalled (opacity lives entirely in
   the keyframes), puffing from the pipes only when the sound module plays. */
.aud-svg .steam-bubble { fill: var(--text2); stroke: var(--aud-ink); stroke-width:.5;
  opacity:0; animation: audg-steam1 2s linear infinite paused; }
.aud-part.on .steam-bubble { fill: var(--text); }
.aud-machine.playing .aud-part.on .anim-crank, .aud-machine.playing .aud-part.on .anim-spinner,
.aud-machine.playing .aud-part.on .anim-lever, .aud-machine.playing .aud-part.on .anim-mallet,
.aud-machine.playing .aud-part.on .anim-cymbal, .aud-machine.playing .aud-part.on .anim-gear-fwd,
.aud-machine.playing .aud-part.on .anim-gear-rev, .aud-machine.playing .aud-part.on .anim-horn,
.aud-machine.playing .aud-part.on .anim-roll-1, .aud-machine.playing .aud-part.on .anim-roll-2,
.aud-machine.playing .aud-part.on .anim-roll-3, .aud-machine.playing .aud-part.on .anim-comb,
.aud-machine.playing .aud-part.on .steam-bubble {
  animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .aud-svg [class*="anim-"], .aud-svg .steam-bubble { animation: none !important; }
}

.aud-occ-stars { color: var(--accent); font-size:.62rem; }
.aud-occ-x { background:none; border:none; color: var(--text3); font-size:.8rem; cursor:pointer; padding:0 1px; line-height:1; }
.aud-occ-x:hover { color: var(--red); }

/* Minimised: the strip folds away into a floating machine button. */
.cmty-modal { position:relative; }
.cmty-auditioner.min { height:auto; padding:0; border-top:none; background:none; }
.aud-fab { position:absolute; right:16px; bottom:14px; z-index:6; width:42px; height:42px;
  border-radius:50%; border:1px solid var(--border2); background: var(--surface2);
  box-shadow: 0 6px 20px rgba(0,0,0,.45); cursor:pointer; padding:6px;
  display:flex; align-items:center; justify-content:center; }
.aud-fab:hover { border-color: var(--accent); }
/* The minimise button wears the same little machine, smaller still. */
.aud-btn.aud-btn-icon { display:inline-flex; align-items:center; justify-content:center;
  width:30px; padding:3px 5px; }
.aud-btn.aud-btn-icon .aud-mini-svg { width:20px; height:16px; }
.aud-btn.aud-btn-icon .icon-art { fill:none; stroke: var(--text2); }
.aud-btn.aud-btn-icon:hover .icon-art { stroke: var(--accent); }
.aud-btn.aud-btn-icon:hover .icon-fill { fill: var(--accent); }
.aud-mini-svg { width:100%; height:100%; overflow:visible; }
.aud-mini-svg .icon-art { fill: var(--surface); stroke: var(--text2); stroke-width:6;
  stroke-linecap:round; stroke-linejoin:round; }
.aud-mini-svg .icon-fill { fill: var(--text2); }
.aud-fab:hover .aud-mini-svg .icon-art { stroke: var(--accent); }
.aud-fab:hover .aud-mini-svg .icon-fill { fill: var(--accent); }
.aud-fab.playing .aud-mini-svg .icon-art { stroke: var(--accent); }
.aud-fab-count { position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px;
  border-radius:999px; background: var(--accent); color:#000; font-size:.58rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
@keyframes aud-fab-pulse { 0%,100% { box-shadow: 0 8px 26px rgba(0,0,0,.45), 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  50% { box-shadow: 0 8px 26px rgba(0,0,0,.45), 0 0 0 9px transparent; } }
.aud-fab.playing { border-color: var(--accent); animation: aud-fab-pulse 1.6s ease-out infinite; }

/* Minimise/restore: the machine tucks itself into the corner button and
   unfolds back out of it. */
@keyframes aud-tuck { to { transform: translate(38%, 65%) scale(.05); opacity: 0; } }
.aud-machine.closing { animation: aud-tuck .24s ease-in forwards; transform-origin: 92% 100%; pointer-events:none; }
@keyframes aud-bar-fade { to { opacity: 0; } }
.aud-bar.closing { animation: aud-bar-fade .2s ease-in forwards; pointer-events:none; }
/* Expanding: the machine rolls in from the right (no scaling), while the
   shadow pool fades up from the bottom on its own — it never rides the
   machine's movement. */
@keyframes aud-roll-in { from { transform: translateX(16%); opacity: 0; }
  60% { opacity: 1; } to { transform: none; opacity: 1; } }
.aud-machine.unfold .aud-svg { animation: aud-roll-in .34s cubic-bezier(.2, .75, .3, 1.04); }
@keyframes aud-grad-rise { from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; } }
.aud-machine.unfold::before { animation: aud-grad-rise .45s ease-out; }
@keyframes aud-fab-pop { from { transform: scale(.25); opacity: 0; }
  70% { transform: scale(1.14); opacity: 1; } to { transform: scale(1); opacity: 1; } }
.aud-fab.pop { animation: aud-fab-pop .26s ease-out; }
.aud-fab.pop.playing { animation: aud-fab-pop .26s ease-out, aud-fab-pulse 1.6s ease-out .3s infinite; }
@keyframes aud-fab-close { to { transform: scale(.25); opacity: 0; } }
.aud-fab.closing { animation: aud-fab-close .15s ease-in forwards !important; pointer-events:none; }
@media (prefers-reduced-motion: reduce) {
  .aud-fab.playing, .aud-fab.pop, .aud-fab.closing,
  .aud-machine.closing, .aud-machine.unfold .aud-svg,
  .aud-machine.unfold::before, .aud-bar.closing { animation:none !important; }
}
@media (max-width:900px) { .aud-machine { height:110px; } .aud-well-hint { display:none; } }

/* View-level share buttons (synth / engine / composition). */
.share-view-btn { padding:5px 12px; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border2));
  border-radius:999px; background:none; color: var(--accent2); font-family:inherit; font-size:.72rem;
  font-weight:600; cursor:pointer; white-space:nowrap; transition: background .15s ease, color .15s ease; }
.share-view-btn:hover { background: var(--accent); color:#000; }

/* ─── Profile pages ─── */
.profile-page { max-width:920px; margin:0 auto; padding:26px 22px 60px; }
.profile-back { margin-bottom:14px; }
.profile-header { display:flex; align-items:flex-start; gap:20px; padding:20px;
  background: var(--surface); border:1px solid var(--border2); border-radius:12px; margin-bottom:26px; }
.profile-avatar { flex:none; width:96px; height:96px; border-radius:50%; overflow:hidden;
  background: var(--surface2); border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center; }
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-avatar span { font-size:2.2rem; font-weight:700; color: var(--text3); }
.profile-id { flex:1; min-width:0; }
.profile-id h1 { margin:0; font-size:1.5rem; }
.profile-handle { color: var(--text3); font-size:.86rem; }
.profile-bio { margin:9px 0 0; color: var(--text2); font-size:.9rem; line-height:1.5; max-width:52ch; }
.profile-stats { display:flex; gap:16px; margin-top:12px; color: var(--text3); font-size:.76rem; }
.profile-stats b { color: var(--text); }
.profile-actions { display:flex; flex-direction:column; gap:8px; align-items:stretch; }
/* Avatar picker inside the Edit profile form. */
.prof-edit-avatar { display:flex; align-items:center; gap:12px; }
.profile-avatar.sm { width:52px; height:52px; }
.profile-avatar.sm span { font-size:1.2rem; }
.prof-edit-avatar-btn { cursor:pointer; white-space:nowrap; }
.profile-page section { margin-bottom:30px; }
.profile-page section h2 { font-size:.82rem; text-transform:uppercase; letter-spacing:.1em;
  color: var(--text3); margin:0 0 12px; }

.comp-row { display:flex; align-items:center; gap:13px; padding:12px 14px; margin-bottom:8px;
  background: var(--surface); border:1px solid var(--border); border-radius:10px; }
.comp-play { flex:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent);
  font-size:1rem; cursor:pointer; }
.comp-play:hover { background: var(--accent); color:#000; }
.comp-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.comp-head { display:flex; align-items:center; gap:12px; }
.comp-head b { font-size:.92rem; color: var(--text); }
.comp-progress { height:5px; border-radius:999px; background: var(--display); overflow:hidden; }
.comp-progress-fill { height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent2)); }
.comp-time { flex:none; color: var(--text3); font-size:.72rem; font-family: var(--mono); }
.cmty-tag.edit { border-style:dashed; }

/* Space stage: percussion is view-only here — this toggles its emphasis. */
.sp-showperc { position:absolute; left:10px; bottom:8px; display:flex; align-items:center; gap:5px;
  color: var(--text3); font-size:.68rem; cursor:pointer; user-select:none; }
.sp-showperc:hover { color: var(--text2); }
.stage-pos { position:relative; }
/* Per-hit position pad in the percussion panel rows. */
.perc-lyr-ctls .layer-minipad { flex:none; cursor:grab; }
.perc-lyr-ctls .layer-minipad:active { cursor:grabbing; }
/* Composition rows span the whole grid inside the community overlay. */
.cmty-grid .comp-row { grid-column: 1 / -1; margin-bottom:0; }
.comp-head .cmty-author { margin-right:auto; }
@media (max-width:640px) { .profile-header { flex-direction:column; } }

/* ═══ Unified top bar (audit 2026-07-14) ══════════════════════════════════
   One structural grammar for every view's top strip, left to right:
   brand · view nav · (space) · transport · (space) · utilities · primary
   action · account. The Explore bar (.tb-explore) and the Producer bar
   (.daw-transport.tb-producer) share the surface, the round transport
   language, a gold primary at the right edge, and the account pill LAST —
   the welcome copy sends people to the top-right for their profile.
   Appended at the end of the sheet so it wins the earlier era layers. */

/* One control height governs the whole bar so the row reads as a single
   even band (round audit found five different heights: 24/26/32/34/36). */
.app-topbar {
  --tb-h: 32px;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0 10px;
  background: linear-gradient(180deg, rgba(15,22,31,0.84), rgba(7,11,17,0.66));
  border: 1px solid rgba(58,75,92,0.72);
  border-radius: 7px;
  /* The account + File dropdowns hang below the strip — never clip them. */
  overflow: visible;
}
/* Nothing in the bar shrinks or wraps — the round audit's core bug was the
   Producer control wrapping to two lines and the seed value truncating to
   "10". Width pressure is handled by hiding labels (progressive disclosure
   below), never by squeezing a control. */
.app-topbar > * { flex: none; min-width: 0; }
.tb-explore { grid-column: 1 / -1; grid-row: 1; }
.tb-spacer { flex: 1 1 0 !important; min-width: 8px; }

/* Icons: one 24-grid SVG language, sized by context, inheriting text colour. */
.tb-ico { width: 16px; height: 16px; display: block; flex: none; pointer-events: none; }
.tb-ico.acct-caret { width: 13px; height: 13px; opacity: 0.66; margin-left: 1px; }

.tb-brand { display: inline-flex; align-items: center; gap: 7px; margin: 0; min-width: 0; flex: none; font-size: 0.72rem; white-space: nowrap; }
.tb-home { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; border-radius: 6px; }
.tb-home:focus { outline: none; }
.tb-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tb-brand .app-name {
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #f0f2f5, #b8c4d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tb-home:hover { filter: brightness(1.25); }
.tb-brand .build-tag { color: rgba(154,160,171,0.62); font-weight: 500; white-space: nowrap; }

/* Text pills — Producer, Save, Share. A real pill: fixed height, icon + label,
   never underlined (it used to be an <a> inheriting link underline), never
   wrapped. */
.app-topbar .tb-pill {
  height: var(--tb-h);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.app-topbar .tb-pill .tb-label { white-space: nowrap; }

/* Workspace tabs, seed, transport, account all snap to the same height. */
.app-topbar .workspace-tabs { height: var(--tb-h); }
.app-topbar .transport-round { width: var(--tb-h); height: var(--tb-h); }
.app-topbar .transport-play { width: var(--tb-h); height: var(--tb-h); }
.app-topbar .transport-round .tb-ico { width: 15px; height: 15px; }
.app-topbar .transport-cluster { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.app-topbar .seed-box {
  height: var(--tb-h);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 5px 0 11px;
  border-radius: 7px;
}
.app-topbar .seed-box #seedBtn { flex: none; white-space: nowrap; padding: 3px 8px; }
.app-topbar .seed-box .tb-label { color: var(--text3); font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase; }
.app-topbar .account-bar .acct-pill { height: var(--tb-h); }

/* Theme accents that used to be scoped to the old .transport-card. */
.app-topbar .transport-round,
.app-topbar .btn,
.app-topbar .seed-box,
.app-topbar .top-rating-row { border-color: rgba(62, 79, 96, 0.84); }
.app-topbar .seed-box,
.app-topbar .top-rating-row { background: rgba(11, 16, 23, 0.68); }
.app-topbar .producer-pill {
  background: rgba(245,166,35,0.09);
  border: 1px solid rgba(245,166,35,0.62);
  color: #ffd79a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.app-topbar .producer-pill:hover { background: rgba(245,166,35,0.16); color: #ffe6bf; }
.app-topbar .btn-primary { border-color: var(--accent); }
/* A quiet divider sets off the identity zone at the far right. */
.app-topbar .account-bar { flex: none; margin-left: 2px; padding-left: 10px; border-left: 1px solid rgba(58,75,92,0.55); }

/* Producer parity: the daw bar is denser (File, name, transport, tempo, edit,
   MIDI, Share, account), so its rounds run one notch smaller but share the
   icon language and the gold primary. */
.daw-transport.app-topbar { border-radius: 7px; }
/* High enough specificity to unify play with its siblings (base .transport-play
   is 36px): in both bars the play button is the SAME size as restart/stop/loop,
   emphasised only by its green ring — size stays consistent. */
.daw-transport .transport-cluster .transport-round,
.daw-transport .transport-cluster .transport-play { width: 32px !important; height: 32px !important; font-size: 0; }
.daw-transport .transport-round .tb-ico { width: 15px; height: 15px; }
.daw-transport .transport-cluster { gap: 5px; }
/* Keep the studio's divider before the identity zone (both bars match). */
.daw-transport .account-bar { margin-left: 2px; }
/* Round loop keeps its lit state (the old rule targeted the ghost button). */
#arrLoop.loop-on { color: #5fd4c8; border-color: #2c5b56; background: rgba(95,212,200,0.08); box-shadow: 0 0 0 2px rgba(95,212,200,0.10); }

/* Progressive disclosure — drop decoration before function as the row tightens.
   Order: build tag → wordmark + seed label → Producer/Save text (icon stays)
   + the optional tour button. The transport, seed VALUE and account never go. */
@media (max-width: 1280px) { .tb-brand .build-tag { display: none; } }
@media (max-width: 1120px) {
  .tb-explore .app-name { display: none; }
  .tb-explore .seed-box .tb-label { display: none; }
}
@media (max-width: 1000px) {
  .tb-explore .producer-pill .tb-label,
  .tb-explore .top-save-btn .tb-label { display: none; }
  .tb-explore .producer-pill,
  .tb-explore .top-save-btn { padding: 0 9px; }
  .tb-explore .studio-tour-btn { display: none; }
}

/* ── Report a problem dialog + early-access lock notice ─────────────────── */
.feedback-dialog .app-dialog-input { margin-bottom: 10px; }
.feedback-dialog .fb-text { resize: vertical; min-height: 96px; }
.feedback-dialog .fb-sub { margin: 0 0 12px; }
.feedback-dialog .fb-shot { display: block; font-size: .78rem; color: var(--text2); }
.feedback-dialog .fb-shot input { display: block; margin-top: 4px; font-size: .78rem; color: var(--text2); }
.feedback-dialog .fb-msg { margin: 10px 0 0; min-height: 1.1em; font-size: .8rem; color: var(--text2); }
.landing-lock { margin-top: 6px; font-size: .82rem; color: var(--accent, #f5a623); }
/* Landing hero uses the square mark at heading scale. */
.app-icon.lg { width: 44px; height: 44px; }
.landing-header h1 .app-icon { vertical-align: -6px; margin-right: 4px; }

/* ═══ Producer bar rebuild (audit round 2, 2026-07-14) ════════════════════
   The Producer top bar now follows the SAME grammar as the studio bar:
   brand-first identity, bare transport (no backing box → no nested outlines),
   one compact readout, ungrouped single-purpose tools, gold primary + account
   last. Functional zones are set off by whitespace + the two flex spacers,
   never by filled group boxes. Every control is one height (32px) and the bar
   matches the studio's 46px. */

.tb-producer { flex-wrap: nowrap; gap: 7px; min-height: 46px; }

/* Identity: dim breadcrumb root (Producer, links back to studio) → bright
   editable title (the arrangement) → borderless File menu trigger. */
.tb-producer .daw-brand { flex: none; gap: 6px; }
.tb-producer .daw-brand .app-name {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--text3);
  -webkit-text-fill-color: currentColor; background: none;
}
.tb-producer .daw-brand:hover .app-name { color: var(--text2); }
.tb-producer .daw-crumb-sep { flex: none; color: var(--text3); opacity: 0.45; font-size: 0.95rem; }
.tb-producer .daw-arr-name {
  flex: none; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.9rem; font-weight: 600; color: #f0f2f5;
  padding: 3px 5px; border-radius: 5px; cursor: text;
}
.tb-producer .daw-arr-name:hover { background: rgba(255,255,255,0.05); }

/* File reads as a menu, not a button: no border, visible caret, hover fill. */
.tb-producer .daw-file-wrap { flex: none; position: relative; }
.tb-producer .daw-file-button {
  display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px;
  background: none; border: 0; border-radius: 6px;
  color: var(--text2); font: inherit; font-size: 0.8rem; cursor: pointer;
}
.tb-producer .daw-file-button:hover,
.tb-producer .daw-file-button[aria-expanded="true"] { background: rgba(255,255,255,0.07); color: var(--text); }
.tb-producer .daw-file-caret { width: 14px; height: 14px; opacity: 0.85; margin: 0; }

/* Position + tempo: one compact readout; the two cells share label-row and
   value-row baselines (they were ~3px out and 45px tall). */
.tb-producer .daw-readout {
  flex: none; display: flex; align-items: stretch; height: 32px;
  border: 1px solid var(--border2); border-radius: 7px;
  background: rgba(7,11,16,0.55); overflow: hidden;
}
.tb-producer .daw-cell {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 0 11px; min-width: 0; margin: 0; height: auto;
}
.tb-producer .daw-cell + .daw-cell { border-left: 1px solid var(--border); }
.tb-producer .daw-cell-label {
  font-size: 0.5rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text3); line-height: 1;
}
.tb-producer .daw-cell-val {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-family: var(--mono); font-size: 0.82rem; color: var(--text);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.tb-producer .daw-pos {
  min-height: 0; min-width: 0; height: auto; display: inline; align-items: initial; justify-content: initial;
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--accent2); font: inherit; font-family: var(--mono); font-weight: 600; line-height: 1;
}
.tb-producer .daw-pos:hover { color: var(--accent); }
.tb-producer .daw-tempo-cell .daw-cell-val input {
  width: 3ch; background: none; border: 0; padding: 0; margin: 0;
  color: var(--text); font: inherit; font-family: var(--mono); text-align: right; line-height: 1;
  -moz-appearance: textfield;
}
.tb-producer .daw-tempo-cell .daw-cell-val input::-webkit-outer-spin-button,
.tb-producer .daw-tempo-cell .daw-cell-val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tb-producer .daw-tempo-cell .daw-cell-val i { font-style: normal; font-size: 0.55rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; }

/* Single-purpose utility buttons (undo, zoom ±, MIDI): one height, one look. */
.tb-producer .tb-util-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; flex: none;
  background: rgba(11,16,23,0.5); border: 1px solid var(--border2); border-radius: 7px;
  color: var(--text2); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.tb-producer .tb-util-btn:hover { border-color: var(--accent); color: var(--text); }
.tb-producer .tb-util-btn.tb-icon-only { width: 32px; padding: 0; justify-content: center; }
.tb-producer .tb-util-btn .tb-ico { width: 16px; height: 16px; }
/* Zoom's two buttons read as one control (shared context) without a group box. */
.tb-producer .daw-zoom { display: inline-flex; align-items: center; gap: 3px; flex: none; }

/* Empty status/saved spans must not reserve width (the dead gap). */
.tb-producer .daw-saved:empty, .tb-producer .toolbar-hint:empty { display: none; }
.tb-producer .daw-saved, .tb-producer .toolbar-hint { flex: none; }

/* Producer progressive disclosure — like the studio bar, drop decoration
   before function as the (denser) bar tightens. Order: breadcrumb wordmark →
   separator + MIDI label → Share label. Transport, readout, account never go. */
@media (max-width: 1180px) {
  .tb-producer .daw-brand .app-name { display: none; }
  .tb-producer .daw-arr-name { max-width: 190px; }
}
@media (max-width: 1040px) {
  .tb-producer .daw-crumb-sep { display: none; }
  .tb-producer #midiBtn .tb-label { display: none; }
  .tb-producer #midiBtn { width: 32px; padding: 0; justify-content: center; }
  .tb-producer .daw-arr-name { max-width: 150px; }
}
@media (max-width: 940px) {
  .tb-producer .top-save-btn .tb-label,
  .tb-producer #shareCompBtn .tb-label { display: none; }
  .tb-producer #shareCompBtn { padding: 0 10px; }
}

/* ═══ Early-access invite gate ("preview stopper") ═══════════════════════════
   A purpose-built overlay shown when a signed-out visitor tries to enter the
   studio in an invite-locked build. Warm, centred, and unmistakably on-brand. */
.gate-overlay {
  position: fixed; inset: 0; z-index: 5200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(900px 500px at 50% -5%, rgba(245,166,35,0.10), rgba(6,8,12,0.72));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.28s ease;
}
.gate-overlay.in { opacity: 1; }
.gate-card {
  position: relative; overflow: hidden;
  width: 100%; max-width: 430px; padding: 34px 32px 26px;
  text-align: center;
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  border: 1px solid var(--border2); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
  transform: translateY(10px) scale(0.985); transition: transform 0.28s cubic-bezier(0.2,0.7,0.2,1);
}
.gate-overlay.in .gate-card { transform: none; }
/* A soft amber wash behind the icon. */
.gate-glow {
  position: absolute; top: -70px; left: 50%; width: 260px; height: 200px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(245,166,35,0.28), transparent 70%);
  filter: blur(6px);
}
.gate-badge {
  position: relative; display: inline-block; margin-bottom: 18px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent2);
  background: rgba(245,166,35,0.10); border: 1px solid rgba(245,166,35,0.34);
}
.gate-icon {
  position: relative; display: block; width: 60px; height: 60px; margin: 0 auto 18px;
  border-radius: 15px; box-shadow: 0 8px 26px rgba(245,166,35,0.28);
}
.gate-card h2 {
  position: relative; margin: 0 0 10px;
  font-family: var(--brand-font); font-size: 1.5rem; font-weight: 800; letter-spacing: 0.01em;
  color: var(--text);
}
.gate-card > p {
  position: relative; margin: 0 auto; max-width: 34ch;
  color: var(--text2); font-size: 0.92rem; line-height: 1.6;
}
.gate-actions { position: relative; display: flex; flex-direction: column; gap: 9px; margin: 24px 0 4px; }
.gate-primary {
  padding: 12px 16px; border: 1px solid var(--accent); border-radius: 9px;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  color: #1a1204; font-family: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(245,166,35,0.26); transition: filter 0.15s ease, transform 0.05s ease;
}
.gate-primary:hover { filter: brightness(1.06); }
.gate-primary:active { transform: translateY(1px); }
.gate-secondary {
  padding: 9px; border: none; background: none; border-radius: 8px;
  color: var(--text3); font-family: inherit; font-size: 0.86rem; font-weight: 500; cursor: pointer;
}
.gate-secondary:hover { color: var(--text2); }
.gate-foot { position: relative; margin: 16px 0 0; font-size: 0.74rem; color: var(--text3); line-height: 1.5; }
.gate-foot b { color: var(--text2); font-weight: 600; }