/*
 * drum-circles: a rheome surface.
 * Retoned 2026-07-14 from the dark-terminal/CRT dialect to the KAOLIN
 * hardware-chassis language — transcribed from KaolinLookAndFeel.h (the
 * Kaolin plugin's design-tokens header). Matte skeuomorphic panels, not a
 * terminal: an outer near-black chassis (#0A0A0A) carries light gray-blue
 * "plate" panels (#9EA4A8) with hairline group-frame borders, and each
 * plate's title is engraved into it as a bracketed lowercase mono label
 * ("[transport]") rather than set as a chip on the page background. Light
 * lives in two places: the note grid and VU meters are dark sunken "display"
 * wells (a #15171C -> #08090C gradient), while the sequencer rings mount
 * their step LEDs directly into the plate like real panel LEDs — unlit
 * lenses in control-gray, lit in Kaolin's LED accents (ledGreen/ledCyan for
 * the two euclidean rings, ledAmber for armed/selected, ledRed for mute).
 * Controls (knobs,
 * buttons, selects) are FLAT hardware-gray (#585C5E) with hairline borders —
 * Kaolin's M8.6 pass explicitly dropped gloss and fake 3D bevels, so no glow
 * or gradient rides on anything that isn't an explicit "lit" state. The one
 * accent that may shout is controlActive (#FFA200): a lit border/cap is a
 * STATE, not decoration. Body type is Optima (Kaolin's panel face); the lone
 * monospace use left in the app is the bracketed section label. No scanline —
 * that was the old terminal's texture, not this one's.
 */

:root {
  --bg: #0a0a0a;
  --plate: #9ea4a8;
  --plate-sunken: #7b8286;
  --plate-border: #2b2b2c;

  --display: #2a2a2a;
  --display-dim: #15181c;
  --display-grad-a: #15171c;
  --display-grad-b: #08090c;

  --control-bg: #585c5e;
  --control-border: #474b4d;
  --control-edge: #2e2e2e;
  --thumb-hi: #676c6e;
  --thumb-lo: #383c3e;

  --knob-arc: #3e4448;
  --knob-value: #1d1c1b;

  --accent: #ffa200;
  --led-green: #00ff88;
  --led-red: #ff4949;
  --led-amber: #ffb347;
  --led-cyan: #00d4ff;

  --cursor: #e7eeeb;
  --cursor-glow: #fcfdfc;

  --text-primary: #1a1a1a;
  --text-secondary: #4a4a44;
  --text-on-dark: #e8e4d8;
  --text-button: #c8c8c0;
  --text-active: #edf1f2;
  --text-section: rgba(58, 58, 60, 0.85);

  --font-body: "Optima", "Optima Regular", Candara, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "SFMono-Regular", Menlo, ui-monospace, monospace;

  --radius-display: 5px;
  --radius-panel: 8.5px;
  --radius-control: 6px;

  --glow-accent: 0 0 10px rgba(255, 162, 0, 0.4);
  --glow-red: 0 0 10px rgba(255, 73, 73, 0.4);
  --glow-amber: 0 0 10px rgba(255, 179, 71, 0.4);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--control-border) transparent;
}

body {
  background: var(--bg);
  color: rgba(232, 228, 216, 0.65);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0;
  min-height: 100vh;
}

::selection {
  background: var(--accent);
  color: var(--text-primary);
}

/* Thin scrollbars everywhere (webkit). */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: var(--control-border);
  border-radius: 3px;
}
::-webkit-scrollbar-track {
  background: transparent;
}

button,
input,
select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* ---- header bar ---- */

.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--control-border);
}

.bar-id {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  min-width: 0;
}

.wordmark {
  color: var(--text-on-dark);
  font-weight: 500;
  font-size: 13px;
}

.tagline {
  color: rgba(232, 228, 216, 0.55);
  font-size: 11px;
  white-space: nowrap;
}

.return-link {
  color: rgba(232, 228, 216, 0.55);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}

.return-link:hover,
.return-link:focus-visible {
  color: var(--accent);
  outline: none;
}

/* ---- groovebox column ----
 * One flex-wrap container so the JS-appended panels (.scale-selector, .mixer
 * land at the END of .groovebox) can be reordered visually: transport + fx +
 * scale share the top strip, tracks fill the middle, mixer sits at the
 * bottom. Full-width rows opt in with width:100%. */

.groovebox {
  max-width: 1480px;
  margin: 0 auto;
  padding: 1.2rem 1rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.9rem;
}

.transport {
  order: 1;
}
.scale-selector {
  order: 2;
}
.fx {
  order: 3;
  flex: 1 1 auto;
}
.tracks {
  order: 4;
  width: 100%;
}
.mixer {
  order: 5;
  width: 100%;
}

/* ---- panel dialect ----
 * A raised hardware plate: solid gray-blue fill, hairline group-frame
 * border, 8.5px radius. The title used to be a chip set into the border on
 * page background; Kaolin engraves section names INTO the plate instead —
 * a bracketed lowercase mono label notched top-left, inside the frame. */

.transport,
.fx,
.scale-selector,
.track,
.mixer {
  position: relative;
  border: 1px solid var(--plate-border);
  border-radius: var(--radius-panel);
  background: var(--plate);
}

.transport::before,
.fx::before,
.scale-selector::before,
.mixer::before {
  position: absolute;
  top: 0.55rem;
  left: 0.8rem;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 2.1px;
  color: var(--text-section);
  text-transform: lowercase;
  user-select: none;
  pointer-events: none;
}

.transport::before {
  content: "[transport]";
}
.fx::before {
  content: "[fx]";
}
.scale-selector::before {
  content: "[scale]";
}
.mixer::before {
  content: "[mixer]";
}

/* ---- transport ----
 * Top padding grown to clear the engraved label notched inside the plate. */

.transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.1rem;
  padding: 1.55rem 1rem 0.75rem;
}

/* The primary control: same hardware-button dialect, more presence. */
#playButton {
  background: var(--control-bg);
  border: 1px solid var(--control-edge);
  border-radius: var(--radius-control);
  color: var(--text-button);
  text-transform: lowercase; /* the JS writes Play/Stop */
  padding: 0.45rem 1.6rem;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

#playButton:hover {
  border-color: var(--accent);
}

/* A lit border is a STATE and may shout: no fill, just the accent border
 * and the brightened "lit caps" text tone plus its glow. */
#playButton.active {
  background: var(--control-bg);
  border-color: var(--accent);
  color: var(--text-active);
  box-shadow: var(--glow-accent);
}

.bpm {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 11px;
}

#bpmControl {
  width: 3.6em;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--control-border);
  color: var(--knob-value);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 0.15rem 0.1rem;
  caret-color: var(--accent);
  -moz-appearance: textfield;
  appearance: textfield;
}

#bpmControl::-webkit-inner-spin-button,
#bpmControl::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

#bpmControl:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

/* ---- fx panel ---- */

.fx {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.6rem;
  padding: 1.55rem 1rem 0.75rem;
}

.fx-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
}

.fx-name {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 500;
}

.fx-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-secondary);
  font-size: 11px;
}

.fx-group input[type="range"] {
  width: 64px;
}

.fx-group .value-display {
  min-width: 3.5ch;
  font-size: 10px;
  text-align: right;
}

/* ---- scale selector (JS-generated) ---- */

.scale-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  padding: 1.55rem 1rem 0.75rem;
}

.scale-selector label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: lowercase; /* the JS writes Scale: / Root Note: */
}

/* ---- selects ---- */

#scaleSelect,
#rootNote,
.logic-operator,
.track-select {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  color: var(--text-button);
  font-size: 12px;
  padding: 0.25rem 0.5rem;
  transition: border-color 120ms ease;
}

#scaleSelect:hover,
#rootNote:hover,
.logic-operator:hover,
.track-select:hover {
  border-color: var(--accent);
}

#scaleSelect option,
#rootNote option,
.logic-operator option,
.track-select option {
  background: var(--display);
  color: var(--text-on-dark);
}

/* ---- range sliders ----
 * Groove, not lamp: a near-black track with a flat hardware-gray thumb. The
 * thumb keeps Kaolin's one sanctioned gradient (the linear-slider thumb is
 * the single control the source still gives a gradient cap). */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 12px; /* hit area; the drawn track is 2px */
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--knob-arc);
  border-radius: 1px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -5px;
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--thumb-hi), var(--thumb-lo));
  border: 1px solid var(--control-edge);
}

input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--knob-arc);
  border-radius: 1px;
}

input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 1px solid var(--control-edge);
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--thumb-hi), var(--thumb-lo));
}

/* ---- tracks grid ---- */

.tracks {
  display: grid;
  /* 194px min lets all seven tracks share one row inside the 1480px column
   * (was 220px/six tracks; smpl made it seven, which would otherwise wrap
   * an orphaned 7th onto its own row) */
  grid-template-columns: repeat(auto-fit, minmax(194px, 1fr));
  gap: 0.9rem;
}

.track {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.5rem 0.8rem 0.8rem;
  min-width: 0;
}

/* Track title (the synth name) gets the same engraved bracketed treatment
 * as a panel's section label: it names the instrument the way a front panel
 * would, notched into the plate rather than floating on page background.
 * The DOM only supplies the bare name, so the brackets are drawn in CSS. */
.track h3 {
  position: absolute;
  top: 0.55rem;
  left: 0.9rem;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 2.1px;
  color: var(--text-section);
  line-height: 1.2;
  text-transform: lowercase;
  user-select: none;
}

.track h3::before {
  content: "[";
}
.track h3::after {
  content: "]";
}

/* ---- circular sequencer ----
 * The step LEDs mount straight into the plate, the way hardware actually
 * mounts LEDs — no dark screen behind them (retheme note: the black well
 * boxed the circles in; the rings ARE the display). An idle step is an
 * unlit lens: a control-gray dot with the hardware edge; a lit step is the
 * LED accent itself. */

.circular-sequencer {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circular-sequencer svg {
  width: 100%;
  height: 100%;
}

/* Idle: an unlit LED lens set into the plate. */
.sequencer-led {
  fill: var(--control-bg);
  stroke: var(--control-edge);
  stroke-width: 1;
  transition: fill 100ms ease, stroke 100ms ease;
}

/* Kaolin's tonal/noisy LED pair distinguishes the two euclidean patterns. */
.outer-ring .sequencer-led.active {
  fill: var(--led-green);
  stroke: var(--led-green);
  filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.55));
}

.inner-ring .sequencer-led.active {
  fill: var(--led-cyan);
  stroke: var(--led-cyan);
  filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.55));
}

/* The playing cursor is always YOU, and is always white. */
.sequencer-led.playing {
  stroke: var(--cursor);
  stroke-width: 2;
  filter: drop-shadow(0 0 4px rgba(252, 253, 252, 0.65));
}

/* ---- track controls ---- */

.track-controls,
.sequencer-controls {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

/* Each section inside a track opens with a hairline and a dim label. */
.sequencer-control-group {
  border-top: 1px solid var(--plate-border);
  padding-top: 0.5rem;
}

.outer-controls::before,
.inner-controls::before {
  display: block;
  color: var(--text-secondary);
  font-size: 10px;
  margin-bottom: 0.35rem;
}

.outer-controls::before {
  content: "outer";
}
.inner-controls::before {
  content: "inner";
}

/* ---- knobs ----
 * M8.6: flat matte face, no gloss, no fake bevel. The indicator is a groove
 * (near-black), not a lamp. */

.knob-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.5rem;
}

.knob-container {
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.knob-outer {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
}

/* Pointer line: a groove, not a lamp — no glow. Geometry is untouched, the
 * JS rotates it around bottom-center (= the knob's center). */
.knob-indicator {
  position: absolute;
  width: 2px;
  height: 19px;
  top: 5px;
  left: calc(50% - 1px);
  background: var(--knob-value);
  transform-origin: bottom center;
  transform: rotate(-135deg);
  pointer-events: none;
}

.knob-surface {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  cursor: grab;
  z-index: 1;
}

.knob-surface:active {
  cursor: grabbing;
}

.knob-label {
  margin-top: 0.3rem;
  color: var(--text-secondary);
  font-size: 8.5px;
  letter-spacing: 2.1px;
  text-align: center;
  text-transform: lowercase;
}

.value-display {
  color: var(--knob-value);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ---- logic / pattern-mode row (JS-generated when present) ---- */

.logic-controls {
  display: flex;
  justify-content: center;
}

.pattern-sequence-controls {
  border-top: 1px solid var(--plate-border);
  padding-top: 0.5rem;
}

.sequence-label {
  color: var(--text-primary);
  font-size: 11px;
}

.cycle-info {
  color: var(--text-secondary);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* ---- note grid: 8x8, scale-locked ----
 * Another sunken display well: the grid of cells lives on the dark map
 * gradient, same bezel treatment as the sequencer. */

.note-selection {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  width: 100%;
  padding: 0.55rem;
  background: linear-gradient(160deg, var(--display-grad-a), var(--display-grad-b));
  border: 1px solid var(--control-border);
  border-radius: var(--radius-display);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.note-selection::before {
  content: "notes";
  grid-column: 1 / -1;
  color: rgba(232, 228, 216, 0.5);
  font-size: 9px;
  margin-bottom: 0.3rem;
}

.note-button {
  aspect-ratio: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--display);
  border: 1px solid transparent;
  border-radius: 3px;
  color: rgba(232, 228, 216, 0.45);
  font-size: 8.5px;
  line-height: 1;
  padding: 0;
  transition: border-color 100ms ease, background 100ms ease, color 100ms ease,
    box-shadow 100ms ease;
}

.note-button:hover {
  border-color: var(--text-button);
  color: var(--text-on-dark);
}

/* Selected = armed = amber. */
.note-button.selected {
  background: var(--led-amber);
  border-color: var(--led-amber);
  color: var(--display-dim);
  box-shadow: 0 0 6px rgba(255, 179, 71, 0.5);
}

/* ---- synth params ---- */

.synth-controls {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-top: 1px solid var(--plate-border);
  padding-top: 0.5rem;
}

.synth-controls::before {
  content: "synth";
  color: var(--text-secondary);
  font-size: 10px;
  margin-bottom: 0.1rem;
}

/* ---- groove / filter (per-track, JS-generated) ----
 * Same shape as .synth-controls: a hairline-topped section with a dim
 * label, populated with the same .param-control rows. Reverb/delay send
 * sliders used to live in this section (as .sends-controls) but moved onto
 * the mixer channel strip -- see .mixer-sends below. */

.groove-controls,
.filter-controls {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-top: 1px solid var(--plate-border);
  padding-top: 0.5rem;
}

.groove-controls::before {
  content: "groove";
  color: var(--text-secondary);
  font-size: 10px;
  margin-bottom: 0.1rem;
}

.filter-controls::before {
  content: "filter";
  color: var(--text-secondary);
  font-size: 10px;
  margin-bottom: 0.1rem;
}

.param-control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.1rem 0.6rem;
}

.param-control label {
  grid-column: 1;
  grid-row: 1;
  color: var(--text-secondary);
  font-size: 10px;
  text-transform: lowercase;
}

.param-control .value-display {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}

.param-control input[type="range"] {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
}

/* param-select: a dropdown counterpart (sample/wave/noise-color) sharing the
 * .param-control row shape, minus the value-display column. */
.param-control.param-select select {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
}

/* The poly track's chord toggle sits in .synth-controls alongside its
 * wave/spread controls, same dialect as the fx panel's sync toggle. */
.synth-controls .chord-toggle {
  align-self: flex-start;
  width: auto;
  padding: 0 0.5rem;
}

/* ---- mixer ---- */

.mixer {
  display: flex;
  align-items: stretch;
  /* wrap rather than scroll: overflow-x would clip the engraved label
   * notched into the plate, and wrapped channel rows read fine on narrow
   * screens */
  flex-wrap: wrap;
  gap: 1.1rem;
  padding: 1.6rem 1rem 0.8rem;
}

.mixer h4 {
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 400;
  text-transform: lowercase;
}

/* Master compressor block leads the row. */
.compressor-controls {
  flex: 0 0 auto;
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-right: 1.1rem;
  border-right: 1px solid var(--plate-border);
}

.compressor-controls h4 {
  color: var(--text-primary);
  font-weight: 500;
  font-size: 11px;
  margin-bottom: 0.2rem;
}

.comp-control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.comp-control label {
  flex: 0 0 72px;
  color: var(--text-secondary);
  font-size: 10px;
  text-transform: lowercase;
}

.comp-control input[type="range"] {
  flex: 1 1 auto;
  min-width: 40px;
}

.comp-control .value-display {
  flex: 0 0 52px;
  text-align: right;
  font-size: 10px;
}

.mixer-separator {
  flex: 0 0 1px;
  align-self: stretch;
  background: var(--plate-border);
}

/* Channel strips: name, fader-over-VU, pan, sends, mute/solo. Each strip now
 * sits on its own sunken sub-plate (Kaolin's panelDark), rather than bare on
 * the mixer plate — one tier of relief between "mixer" and "channel". */
.mixer-channel {
  /* fixed width: a range input's intrinsic ~129px size would otherwise
   * stretch every strip and wrap the row; 124px seats compressor + master
   * + all seven strips on one line inside the 1480px column */
  flex: 0 0 124px;
  width: 124px;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-content: start;
  gap: 0.5rem 0.35rem;
  background: var(--plate-sunken);
  border: 1px solid var(--plate-border);
  border-radius: var(--radius-panel);
  padding: 0.6rem 0.5rem 0.7rem;
}

.mixer-channel h4 {
  grid-column: 1 / -1;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 500;
}

/* The fader rides on top of the VU meter (rotated range input); the flex
 * centering below is what keeps the rotated absolute input aligned — keep. */
.fader-container {
  grid-column: 1 / -1;
  position: relative;
  width: 30px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Another display well: same map gradient and bezel as the sequencer/notes. */
.vu-meter {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--display-grad-a), var(--display-grad-b));
  border: 1px solid var(--control-border);
  border-radius: var(--radius-display);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

/* LED green rising to cyan at the top; the gradient is pinned to the meter's
 * full height so the colors stay put as the fill moves. */
.vu-meter-fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to top, var(--led-green) 0%, var(--led-cyan) 100%);
  background-size: 100% 150px;
  background-position: bottom;
  transition: height 50ms linear;
}

.fader {
  position: absolute;
  width: 150px;
  height: 30px;
  transform: rotate(-90deg);
  transform-origin: center;
  background: transparent;
  z-index: 2;
  cursor: grab;
}

.fader:active {
  cursor: grabbing;
}

.fader::-webkit-slider-runnable-track {
  height: 2px;
  background: rgba(232, 228, 216, 0.18);
}

.fader::-moz-range-track {
  height: 2px;
  background: rgba(232, 228, 216, 0.18);
}

.pan-container {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  justify-content: center;
}

.pan-container input {
  width: 64px;
}

/* Per-channel reverb/delay sends, between pan and mute/solo. Narrow strip,
 * so each is a single row: a ~3ch label plus a flexed slider (reusing the
 * global input[type="range"] styling above -- no per-control value-display,
 * there isn't room). */
.mixer-sends {
  grid-column: 1 / -1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.send-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.send-row label {
  flex: 0 0 3ch;
  color: var(--text-secondary);
  font-size: 9px;
  text-transform: lowercase;
}

.send-row input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- hardware buttons: mute / solo / toggle ----
 * One shared flat base; each lit state means something different, so each
 * gets its own accent rather than a single combined ".active" rule: mute is
 * an alert (red), solo is armed-warm (amber), sync/chord is a plain lit
 * state (accent border, no fill) — the same pattern as #playButton.active. */

.mute,
.solo,
.toggle-btn {
  width: 26px;
  height: 22px;
  background: var(--control-bg);
  border: 1px solid var(--control-edge);
  border-radius: var(--radius-control);
  color: var(--text-button);
  font-size: 10px;
  line-height: 1;
  text-transform: lowercase; /* the JS writes M / S / sync */
  padding: 0;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.mute:hover,
.solo:hover,
.toggle-btn:hover {
  border-color: var(--accent);
}

.mute.active {
  background: var(--led-red);
  border-color: var(--led-red);
  color: var(--display-dim);
  box-shadow: var(--glow-red);
}

.solo.active {
  background: var(--led-amber);
  border-color: var(--led-amber);
  color: var(--display-dim);
  box-shadow: var(--glow-amber);
}

.toggle-btn.active {
  background: var(--control-bg);
  border-color: var(--accent);
  color: var(--text-active);
  box-shadow: var(--glow-accent);
}

/* ---- help system ----
 * The icon toggles .help-mode on <body>; the pointer-events machinery below
 * is load-bearing — it freezes the instrument so hovering reads tooltips
 * instead of tweaking knobs. Restyled hardware-button/display, mechanics
 * preserved. */

.help-icon {
  position: fixed;
  top: 3.5rem;
  right: 1.25rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--control-bg);
  border: 1px solid var(--control-edge);
  color: var(--text-button);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
  pointer-events: auto !important;
}

.help-icon:hover {
  border-color: var(--accent);
}

.help-icon.active {
  background: var(--control-bg);
  border-color: var(--accent);
  color: var(--text-active);
  box-shadow: var(--glow-accent);
}

.help-tooltip {
  position: fixed;
  background: var(--display);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-display);
  color: var(--text-on-dark);
  font-size: 12px;
  line-height: 1.45;
  padding: 0.7rem 0.85rem;
  max-width: 300px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  text-align: left;
}

/* Freeze everything; only help-annotated regions catch the pointer. */
.help-mode * {
  pointer-events: none;
}

.help-active {
  pointer-events: auto !important;
}

.help-mode .help-active * {
  pointer-events: none;
}

.help-mode .help-icon,
.help-mode #helpToggle {
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Highlight: the accent outline on the hovered/annotated control — a lit
 * border is a STATE, and help-mode's own outline is exactly that. */
.help-mode .help-active {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--glow-accent);
  border-radius: 4px;
  cursor: help;
  position: relative;
  z-index: 1;
}

/* Knobs get a whole-container hit area in help mode. */
.help-mode .knob-container {
  pointer-events: auto !important;
  cursor: help;
}

.help-mode .knob-container * {
  pointer-events: none;
}

.help-mode .knob-surface {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  cursor: help;
}

/* Keep the annotated regions visible and hoverable. */
.help-mode .track,
.help-mode .mixer,
.help-mode .note-selection,
.help-mode .knob-container,
.help-mode .fader-container,
.help-mode .pan-container,
.help-mode .circular-sequencer,
.help-mode .pattern-sequence-controls,
.help-mode .logic-operator,
.help-mode .synth-controls,
.help-mode .groove-controls,
.help-mode .filter-controls,
.help-mode .mixer-sends,
.help-mode .scale-selector,
.help-mode .compressor-controls,
.help-mode .comp-control {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* But controls themselves stay inert while help is on. */
.help-mode button:not(#helpToggle),
.help-mode input,
.help-mode select {
  pointer-events: none;
}

/* ---- responsive ---- */

@media (max-width: 768px) {
  .groovebox {
    padding: 1.1rem 0.75rem 1.25rem;
  }
  .transport,
  .fx,
  .scale-selector {
    flex: 1 1 100%;
  }
}

@media (max-width: 480px) {
  .tagline {
    display: none;
  }
  .fx-group {
    width: 100%;
  }
}

/* ---- reduced motion ---- */

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