/* Header, brand lockup and status-pill rules live in
   ../shared/chrome.css — do not redefine them here. */
/* Design tokens ---------------------------------------------------------
   Shared Thermalsock Labs house style: kraft-paper chassis, ink text, one
   rust accent thread through every interactive/live element. Matches the
   homepage and every sibling app (oscilloscope, subharmonicon, modulus
   studio). The two working canvases (waveform + grain cloud) stay near-
   black like the oscilloscope's scope well; everything around them is the
   shared warm chrome.
------------------------------------------------------------------------- */

:root {
  --chassis: #0B0D12;
  --panel: #0F1118;
  --panel-raised: #161A22;
  --hairline: rgba(138, 160, 184, 0.16);
  --hairline-strong: rgba(138, 160, 184, 0.30);
  --text: #E7F4FF;
  --text-dim: #8AA0B8;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
  --sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --serif-display: 'Space Grotesk', -apple-system, system-ui, sans-serif;

  --accent: #00C8FF;
  --accent-dim: rgba(0, 200, 255, 0.32);
  --accent-fg: #04222C;
  --danger: #FF5A6E;

  --amber: #FFB454;
  --violet: #A98CFF;
  --teal: #3FD9C4;
  --pink: #FF7BB0;
  --blue: #6FA8FF;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--chassis);
  color: var(--text);
  font-family: var(--sans);
}

/* --- Permission gate ("boot screen") ------------------------------------ */

.gate {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0, 200, 255, 0.08), transparent 60%),
    var(--chassis);
}

.gate[hidden],
.app[hidden] {
  display: none;
}

.gate-panel {
  width: 100%;
  max-width: 460px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 32px;
  box-shadow: 0 20px 50px rgba(138, 160, 184, 0.18);
  margin: 24px 0;
}

.gate-panel h1 {
  font-family: var(--serif-display);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 2px;
  letter-spacing: 0.005em;
}

.gate-sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 20px;
}

.gate-copy {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 24px;
}




select, input[type="range"], button, input[type="text"], input[type="number"] {
  font-family: var(--sans);
}

select {
  width: 100%;
  background: var(--panel-raised);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
}

input[type="text"], input[type="number"] {
  background: var(--panel-raised);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 12.5px;
}

.btn-primary, .btn-secondary {
  width: 100%;
  padding: 11px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary { background: var(--accent); color: var(--accent-fg); border: none; }
.btn-primary:hover { filter: brightness(1.08); }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  margin-top: 10px;
}
.btn-secondary:hover { border-color: var(--accent-dim); }

.btn-small {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  background: var(--panel-raised);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  white-space: nowrap;
}
.btn-small:hover { border-color: var(--accent-dim); }
.btn-small.active { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.btn-small.danger:hover { border-color: var(--danger); color: var(--danger); }

.gate-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 14px;
  line-height: 1.4;
}

/* --- Main app shell ------------------------------------------------------ */

.app { height: 100%; display: flex; flex-direction: column; }



.page-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  background: rgba(138, 160, 184, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 3px;
}
.page-nav-link {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 3px;
}
.page-nav-link:hover { color: var(--text); }
.page-nav-link.active { color: var(--accent-fg); background: var(--accent); font-weight: 600; }


.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 3px;
  border: 1px solid var(--hairline-strong);
  background: rgba(138, 160, 184, 0.04);
  color: var(--text-dim);
  cursor: default;
}
.pill.mode { color: var(--violet); border-color: rgba(106, 90, 156, 0.35); background: rgba(106, 90, 156, 0.08); }
.pill.live { color: var(--text-dim); }
.pill.toggle { cursor: pointer; user-select: none; }
.pill.toggle.on { color: var(--accent-fg); background: var(--accent); border-color: transparent; }

.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
.status-dot.live { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

.stage {
  flex: 1;
  display: flex;
  gap: 18px;
  padding: 18px 22px 12px 22px;
  min-height: 0;
}

.visual-column { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding-right: 2px; }

/* --- Waveform + grain cloud, overlaid in one display -------------------- */

.visual-area { display: flex; gap: 14px; height: 230px; flex-shrink: 0; }
.canvas-wrap {
  flex: 1;
  min-width: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6), inset 0 0 2px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(138, 160, 184, 0.08);
  position: relative;
  background: #000;
}
.canvas-wrap .canvas-label {
  position: absolute;
  top: 8px;
  left: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  z-index: 3;
  pointer-events: none;
}
.canvas-wrap canvas { width: 100%; height: 100%; display: block; }

/* The waveform canvas is the base layer (owns the drag-to-scan cursor) and
   the grain-cloud canvas is a transparent overlay drawn directly on top of
   it, so grain activity reads as happening "in" the waveform the way it
   does on a hardware granular unit — not as a second, separate scope. */
.canvas-wrap.combined { position: relative; }
.canvas-wrap.combined canvas { position: absolute; top: 0; left: 0; }
.canvas-wrap.combined #waveformCanvas { z-index: 1; cursor: crosshair; }
.canvas-wrap.combined #grainCloudCanvas { z-index: 2; pointer-events: none; }

.drop-hint {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(211, 160, 90, 0.14);
  border: 2px dashed rgba(211, 160, 90, 0.6);
  border-radius: 10px;
  color: #f0e4d0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.canvas-wrap.drag-over .drop-hint { display: flex; }

/* --- Cards / panel groups (shared shape with sibling apps) -------------- */



.chip.violet { background: rgba(106, 90, 156, 0.15); color: var(--violet); }
.chip.pink { background: rgba(163, 74, 114, 0.15); color: var(--pink); }

.row .row-value { font-family: var(--mono); font-size: 11px; color: var(--accent); width: 52px; text-align: right; flex-shrink: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid-2 .row { grid-column: span 1; }


/* --- Grain engine controls card ----------------------------------------- */

.controls-card, .instrument-panel { flex-shrink: 0; }

/* --- Instrument panel: screen, a horizontal scrub slider under it, one
   fader row, one knob row, done — a flat top-to-bottom flow rather than a
   2-column grid. The grid version put 7 faders in a cramped 300px side
   column (illegibly thin) and a stretchy middle knob group that left a
   large dead gap before the next group — this fixes both by keeping
   everything in single, evenly-spaced rows at full card width, and keeps
   the whole card considerably shorter so the page doesn't need to scroll
   to see Performance Controls below it. Reskinned in the Field Notes
   palette, loosely modeled on a hardware granular unit's panel (screen +
   fader bank + knob row, all visible at once, no tabs). ------------------ */

.ip-screen-row { display: flex; gap: 16px; align-items: stretch; margin-bottom: 12px; }
.ip-screen-row .visual-area { flex: 1; margin-bottom: 0; }
.ip-master { flex-shrink: 0; display: flex; align-items: flex-end; padding-bottom: 4px; }

.ip-scrub { margin-bottom: 14px; }
.ip-scrub > div { width: 100%; }

.ip-fader-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 16px 24px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 14px;
}
.ip-fader-divider { width: 1px; align-self: stretch; background: var(--hairline-strong); margin: 0 2px; }

.ip-knob-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; padding: 0 4px; }
.ip-knob-row-selects { display: flex; flex-direction: column; gap: 6px; min-width: 170px; }
.ip-knob-row-selects select.rack-select { margin-bottom: 0; }

.ip-utility-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.ip-utility-row select.rack-select { width: auto; min-width: 120px; margin-bottom: 0; flex: 1; }

/* --- Vertical fader widget (js/faderControl.js: Fader) ------------------- */

.fader-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fader-label { font-family: var(--sans); font-size: 9.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.fader-track {
  position: relative;
  width: 12px;
  background: var(--chassis);
  border: 1px solid var(--hairline-strong);
  border-radius: 5px;
  cursor: ns-resize;
  touch-action: none;
  outline: none;
}
.fader-track:focus { border-color: var(--accent); }
.fader-fill { position: absolute; bottom: 0; left: 0; width: 100%; background: var(--accent); border-radius: 4px; }
.fader-handle {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 11px;
  margin-left: -11px;
  margin-bottom: -5.5px;
  background: var(--text);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(138, 160, 184, 0.3);
  pointer-events: none;
}
.fader-value {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--chassis);
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  padding: 2px 4px;
  min-width: 30px;
  text-align: center;
  cursor: text;
}
.fader-value-input {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--chassis);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 2px 4px;
  width: 44px;
  text-align: center;
}

/* --- Horizontal fader widget (js/faderControl.js: HFader) ---------------- */

.hfader-wrap { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.hfader-label-row { display: flex; justify-content: space-between; font-size: 10.5px; }
.hfader-label { color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--sans); }
.hfader-value { font-family: var(--mono); color: var(--accent); font-weight: 600; }
.hfader-track {
  position: relative;
  height: 14px;
  background: var(--panel-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: 7px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}
.hfader-track:focus { border-color: var(--accent); }
.hfader-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--accent); border-radius: 7px; }
.hfader-handle {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 26px;
  margin-left: -8px;
  margin-top: -13px;
  background: var(--text);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(138, 160, 184, 0.35);
  pointer-events: none;
}


/* --- Instrument surface: reskinned in the site's own Field Notes palette
   (light kraft panel, ink text, rust accent) rather than a dark hardware-
   module look — laid out closer to a hardware granular unit's screen +
   tabbed mode strip (Tasty Chips GR-1/GR-2), not copied, just the same
   idea: one big screen, a row of mode tabs, knobs grouped per page. --- */

.rack-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.rack-tab {
  flex: 1;
  min-width: 64px;
  background: var(--panel-raised);
  color: var(--text-dim);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 6px;
  cursor: pointer;
  text-align: center;
}
.rack-tab:hover { border-color: var(--accent-dim); color: var(--text); }
.rack-tab.active {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
}

.rack-panel {
  background: var(--panel-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  gap: 0;
}

.rack-section {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  padding: 0 20px;
  border-right: 1px solid var(--hairline);
  min-width: 108px;
}
.rack-section:first-child { padding-left: 4px; }
.rack-section:last-child { border-right: none; padding-right: 4px; }
.rack-section .knob-row { justify-content: space-evenly; }

.rack-section-header {
  background: transparent;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  text-align: center;
  padding: 0 0 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 12px;
}
.rack-section-header.neutral { color: var(--text-dim); }

.knob-row { display: flex; gap: 14px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }

.rack-select {
  background: var(--chassis);
  color: var(--text);
  border: 1px solid var(--hairline-strong);
  border-radius: 5px;
  font-size: 10.5px;
  padding: 5px 6px;
  width: 100%;
  margin-bottom: 6px;
}
.rack-select:last-child { margin-bottom: 0; }

.rack-divider-label {
  font-size: 8.5px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

.rack-toggle-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-top: 12px; }
.rack-toggle-row .toggle-chip { flex: 1; min-width: 100px; text-align: center; }
.rack-pill {
  background: var(--chassis);
  color: var(--text-dim);
  border: 1px solid var(--hairline-strong);
  border-radius: 5px;
  font-size: 10.5px;
  font-family: var(--sans);
  padding: 6px 10px;
  cursor: pointer;
  text-align: center;
  user-select: none;
}
.rack-pill.on {
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  border-color: transparent;
}
.rack-pill:hover { border-color: var(--accent-dim); }
button.rack-pill { font-family: var(--sans); }

/* --- Knob widget (js/knobControl.js) ------------------------------------- */

.knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.knob-label { font-family: var(--sans); font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.knob-svg { cursor: ns-resize; touch-action: none; outline: none; }
.knob-svg:focus .knob-face { stroke: var(--accent); }
.knob-track { fill: none; stroke: var(--hairline-strong); stroke-width: 4; stroke-linecap: round; }
.knob-fill { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.knob-face { fill: var(--chassis); stroke: var(--hairline-strong); stroke-width: 1; }
.knob-pointer { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.knob-value {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--chassis);
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  padding: 2px 6px;
  min-width: 38px;
  text-align: center;
  cursor: text;
}
.knob-value-input {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--chassis);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 2px 6px;
  width: 54px;
  text-align: center;
}
.knob-unit { font-size: 8.5px; color: var(--text-dim); }

/* --- Envelope shape preview (small curve icon next to the Envelope select,
   the way a hardware unit's screen shows a live glyph for the current
   selection rather than just a dropdown label) --------------------------- */

.envelope-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chassis);
  border: 1px solid var(--hairline-strong);
  border-radius: 5px;
  padding: 4px;
  margin-bottom: 6px;
  height: 34px;
}
.envelope-preview svg { width: 100%; height: 100%; }
.envelope-preview path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* --- Performance controls: macros + XY pad ------------------------------ */

.performance-card { flex-shrink: 0; }

.xy-pad-wrap { display: flex; flex-direction: column; gap: 6px; }
.xy-pad {
  width: 100%;
  height: 90px;
  border-radius: 8px;
  border: 1px solid var(--hairline-strong);
  background: var(--chassis);
  position: relative;
  cursor: crosshair;
  touch-action: none;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 20px 20px;
}
.xy-pad-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-dim);
  pointer-events: none;
}

.xy-axis-selects { display: flex; gap: 6px; }
.xy-axis-selects select { font-size: 10.5px; padding: 4px 6px; }


/* --- Toggle-chip rows for advanced/discrete features --------------------- */

.toggle-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.toggle-chip {
  font-family: var(--sans);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid var(--hairline-strong);
  background: rgba(138, 160, 184, 0.04);
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.toggle-chip.on { color: var(--accent-fg); background: var(--accent); border-color: transparent; }

/* --- Right sidebar -------------------------------------------------------- */

.panel {
  width: 320px;
  flex-shrink: 0;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 14px;
}

/* --- Modulation matrix ---------------------------------------------------- */

#modMatrixCanvas { width: 100%; height: 92px; display: block; border-radius: 6px; margin-bottom: 10px; }

.mod-source-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.mod-source-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border-radius: 6px; background: var(--panel-raised);
  border: 1px solid var(--hairline);
  font-size: 11.5px;
}
.mod-source-item .src-meta { display: flex; flex-direction: column; gap: 2px; }
.mod-source-item .src-meta small { color: var(--text-dim); font-family: var(--mono); font-size: 10px; }
.mod-source-item .src-controls { display: flex; align-items: center; gap: 4px; }
.mod-source-item select, .mod-source-item input[type="number"] { padding: 3px 5px; font-size: 10.5px; width: auto; }

.route-list { display: flex; flex-direction: column; gap: 6px; }
.route-row {
  display: grid;
  grid-template-columns: 1fr 1fr 60px auto auto;
  gap: 5px;
  align-items: center;
  font-size: 11px;
}
.route-row select { padding: 5px 6px; font-size: 10.5px; }
.route-row input[type="range"] { width: 100%; accent-color: var(--accent); }

.add-source-buttons { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }

/* --- MIDI panel ------------------------------------------------------------ */

.midi-device-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.midi-device-list li { list-style: none; font-size: 11.5px; padding: 5px 8px; border-radius: 6px; background: var(--panel-raised); display: flex; justify-content: space-between; }
.cc-mapping-list { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.cc-mapping-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; }

/* --- Presets ---------------------------------------------------------------- */

.preset-row { display: flex; gap: 6px; margin-bottom: 8px; }
.preset-row input[type="text"] { flex: 1; }
.preset-row select { flex: 1; }
.snapshot-bank { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.snapshot-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 6px; border: 1px solid var(--hairline-strong); background: var(--panel-raised); cursor: pointer; font-size: 10.5px; }
.snapshot-btn:hover { border-color: var(--accent-dim); }
.snapshot-btn .snap-hint { font-size: 9px; color: var(--text-dim); }

/* --- MIDI panel ------------------------------------------------------------ */

.midi-panel-row { display: flex; gap: 28px; flex-wrap: wrap; }
.midi-panel-col { flex: 1; min-width: 220px; }
.midi-panel-col h3 {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 600;
  margin: 0 0 8px;
}

/* --- Footer readout strip --------------------------------------------------- */

.footer-strip {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding: 8px 22px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-dim);
  border-top: 1px solid var(--hairline);
}
.footer-strip b { color: var(--accent); font-weight: 600; }

@media (max-width: 980px) {
  .secondary-row { grid-template-columns: 1fr; }
  html, body { overflow-y: auto; height: auto; }
  .stage { flex-direction: column; }
  .panel { width: 100%; padding-bottom: 20px; }
  .visual-area { height: 200px; }
}

/* --- Support widget & legal bar ------------------------------------------ */

#supportWidget { position: fixed; left: 14px; bottom: 34px; z-index: 10; }
#supportWidget img { display: block; }

#legalBar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 5px 12px; font-size: 10.5px; color: var(--text-dim);
  background: rgba(11, 13, 18, 0.9);
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
}
#legalBar a { color: var(--text-dim); text-decoration: none; }
#legalBar a:hover { color: var(--accent); }

/* --- Action pills, record button, collapsible panels ----------------------
   Load Sample and Randomise were styled as `pill toggle`, identical to
   Freeze — but they're momentary actions, not latching states. Actions and
   toggles now read differently. */

.pill.action {
  font-family: var(--mono, var(--mono), monospace);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 6px 13px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.pill.action:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.pill.action:disabled { opacity: 0.4; cursor: default; }

.pill.record {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono, var(--mono), monospace);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 6px 13px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.pill.record .rec-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-faint);
  transition: background .2s;
}
.pill.record:hover { color: var(--text); border-color: var(--danger, var(--danger)); }
.pill.record[aria-pressed="true"] {
  color: var(--danger, var(--danger));
  border-color: var(--danger, var(--danger));
  background: rgba(255, 90, 110, 0.10);
}
.pill.record[aria-pressed="true"] .rec-dot {
  background: var(--danger, var(--danger));
  animation: ts-rec-pulse 1.4s ease-in-out infinite;
}
@keyframes ts-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .pill.record[aria-pressed="true"] .rec-dot { animation: none; }
}

/* Collapsible secondary panels. Four large stacked sections with no way to
   fold the ones you aren't using made the rack a long scroll. */
.card.collapsible > h2 { position: relative; padding-right: 30px; }
.panel-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  width: 22px; height: 22px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.panel-toggle::before {
  content: '';
  position: absolute;
  left: 6px; top: 8px;
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--text-faint);
  border-bottom: 1.6px solid var(--text-faint);
  transform: rotate(45deg);
  transition: transform .22s, border-color .2s;
}
.panel-toggle:hover::before { border-color: var(--accent); }
.panel-toggle[aria-expanded="false"]::before { transform: rotate(-45deg); }
.card.collapsible[data-collapsed="true"] > *:not(h2) { display: none; }

/* Footer stats: the two you watch while playing vs the four that never move. */
.footer-strip .stat-live { color: var(--text); }
.footer-strip .stat-live b { color: var(--accent); font-weight: 600; }
.footer-strip .stat-static { color: var(--text-faint); font-size: 0.92em; }
.footer-strip .stat-sep {
  width: 1px;
  align-self: stretch;
  background: var(--hairline);
  margin: 0 4px;
}

/* --- Layout utilities ----------------------------------------------------
   These replace the inline style="flex:1" / style="margin-bottom:0" attributes
   that were doing layout work scattered through the markup, so spacing is
   defined in one place and can't drift panel to panel. */
.grow { flex: 1; }
.flush { margin-bottom: 0; }
.full { width: 100%; }
.spaced { margin-top: 6px; }
.wide-select { min-width: 170px; }
.row-tight { margin-top: 10px; gap: 6px; }
.push-right { margin-left: auto; }
.centered { text-align: center; }
.clickable { cursor: pointer; }