/* ============================================================
   BASS//LINE — TB-303-style bass line generator
   DAW redesign (2026-07): "Vintage Rack" skin on a two-column
   console. Machined warm-metal faceplate, engraved silkscreen,
   amber LCDs, cream-pointer knobs; the glowing amber step
   faders stay the signature element.
   Spec: docs/superpowers/specs/2026-07-09-daw-ui-redesign-design.md
   ============================================================ */

/* Self-hosted fonts (Prompt 16) — latin subset only, so the vintage type
   survives offline without the Google Fonts CDN. Both faces are OFL-licensed. */
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/barlow-700.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/dmmono-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/dmmono-500.woff2") format("woff2");
}

:root {
  /* surround + faceplate metal */
  --bg:         #141210;     /* page behind the plate */
  --plate-hi:   #45423c;     /* faceplate top sheen */
  --plate:      #38352f;
  --plate-lo:   #2e2b27;     /* faceplate bottom */
  --panel:      #26241f;     /* module panel */
  --panel-lo:   #1f1d19;     /* card / sub-panel */
  --sunk:       #1d1a16;     /* recessed wells */
  --sunk-deep:  #151310;     /* deepest recess (fader tracks) */
  --line:       #17150f;     /* hairline separators */

  /* ink */
  --silk:      #d8cfc0;      /* engraved cream silkscreen */
  --silk-dim:  #8a8172;      /* secondary label */
  --muted:     #6b655a;      /* inactive control */

  /* signal */
  --amber:      #ff8c2e;     /* the accent */
  --amber-hi:   #ffa64d;
  --amber-soft: #ffc98a;     /* lit-button text */
  --cream:      #f5ead2;     /* knob pointers */
  --lcd-bg:     #1a130a;
  --lcd:        #ffa64d;     /* LCD amber glow */
  --lcd-dim:    #8a6b45;     /* LCD label */
  --red:        #ff5a3c;     /* stop / accent flag */
  --green:      #9fdc8a;     /* play */

  /* step faders — luminous amber-orange bands (signature, unchanged) */
  --fader:     #ef7a16;      /* band base — deep orange */
  --fader-hi:  #ffb64d;      /* band top — glowing amber */
  --fader-lip: #ffe7c2;      /* bright top-edge line */

  --radius: 4px;
  --font-disp: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  /* legacy aliases (tooltips/help reuse these) */
  --orange:    var(--amber);
  --orange-hi: var(--amber-hi);
  --accent:    var(--amber);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-disp);
  color: var(--silk);
  background:
    radial-gradient(120% 80% at 50% -10%, #1e1b17 0%, var(--bg) 60%, #0d0c0a 100%);
  padding: clamp(6px, 1.2vw, 12px);
  display: flex;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  /* Touch (Prompt 16): drop the 300ms double-tap-zoom delay, and stop
     pull-to-refresh / overscroll from stealing a fader/knob drag. */
  touch-action: manipulation;
  overscroll-behavior-y: contain;
}

/* Never start a text selection when dragging a control on touch/desktop. */
.channel__bar,
.knob__dial,
.lcd--knobbed {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ---- The faceplate: one machined metal plate with corner screws ---- */
.unit {
  width: min(1240px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(10px, 1.5vw, 16px);
  border-radius: 10px;
  background:
    /* corner screws: dark well + catch-light ring */
    radial-gradient(circle at 11px 11px,                     #0d0c09 0 2.6px, #6a645a 2.6px 3.6px, transparent 3.9px),
    radial-gradient(circle at calc(100% - 11px) 11px,        #0d0c09 0 2.6px, #6a645a 2.6px 3.6px, transparent 3.9px),
    radial-gradient(circle at 11px calc(100% - 11px),        #0d0c09 0 2.6px, #6a645a 2.6px 3.6px, transparent 3.9px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), #0d0c09 0 2.6px, #6a645a 2.6px 3.6px, transparent 3.9px),
    /* fine horizontal brush lines */
    repeating-linear-gradient(180deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--plate-hi) 0%, var(--plate) 4%, var(--plate-lo) 100%);
  border: 1px solid #1c1a17;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    inset 0 0 0 1px rgba(0,0,0,0.55),
    0 24px 50px -18px rgba(0,0,0,0.85);
}

/* Shared silkscreen label treatment */
.eyebrow,
.selector__eyebrow,
.lcd__label,
.banks__label {
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silk-dim);
  font-weight: 600;
}

/* ============================================================
   TOP BARS — Row 1 plugin header · Row 2 transport
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 5px 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, #23211e 0%, #1b1917 100%);
  border: 1px solid #131109;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.4);
}
.topbar__spacer { flex: 1; }

/* Brand (compact, in the header bar) */
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--silk);
  text-shadow: 0 1px 0 #000;
}
.brand__slash { color: var(--amber); }
.brand__sub {
  margin-top: 3px;
  font-size: 7px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--silk-dim);
}
.brand__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--silk-dim);
}

.transport__group { display: flex; gap: 6px; }
.transport__readouts { display: flex; gap: 6px; flex-wrap: wrap; }
.filebtns { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; }

/* Song-chain group lives at the right of the transport bar */
.chainlane { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chainlane__steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.chainstep {
  display: flex;
  align-items: stretch;
  height: 26px;
  border: 1px solid #131109;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(180deg, #2e2b26 0%, #221f1b 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.chainstep__bank {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 11px;
  color: var(--amber-hi);
  width: 20px;
  border: none;
  border-right: 1px solid #131109;
  background: transparent;
  cursor: pointer;
}
.chainstep__bank:hover { background: rgba(255,140,46,0.15); }
.chainstep__rep {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--silk-dim);
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  cursor: ns-resize;
  touch-action: none;
}
.chainstep__x {
  border: none;
  border-left: 1px solid #131109;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  width: 15px;
  cursor: pointer;
}
.chainstep__x:hover { background: rgba(255,90,60,0.25); color: #fff; }
.chainstep--add {
  align-items: center;
  justify-content: center;
  width: 26px;
  color: var(--silk-dim);
  font-size: 14px;
  cursor: pointer;
}
.chainstep--add[disabled] { opacity: 0.3; cursor: default; }
.chainstep.is-playing {
  border-color: var(--amber);
  box-shadow: 0 0 8px rgba(255,140,46,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ---- Buttons: machined metal pushbuttons -------------------- */
.btn {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--silk);
  background: linear-gradient(180deg, #504b44 0%, #33302b 100%);
  border: 1px solid #191713;
  border-radius: 3px;
  padding: 6px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 2px 3px rgba(0,0,0,0.45);
  transition: transform 0.05s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { background: linear-gradient(180deg, #5c564e 0%, #3b3731 100%); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); }
.btn span { font-size: 10px; letter-spacing: 0.16em; }
.btn--play { color: var(--green); }
.btn--play::before,
.btn--play span,
.btn--stop span { color: inherit; }
.btn--stop { color: var(--red); }
.btn--accent { color: var(--amber-hi); }
.btn--sq { font-size: 10px; letter-spacing: 0.16em; }
.btn--sm { padding: 5px 8px; font-size: 10px; letter-spacing: 0.1em; }
.btn--xs { padding: 3px 6px; font-size: 9px; letter-spacing: 0.08em; gap: 3px; }
/* engaged state for toggles / transport: lit amber, backlit from within */
.btn.is-on {
  color: var(--amber-soft);
  background: linear-gradient(180deg, #7a4a1d 0%, #4a2c10 100%);
  border-color: #2a1400;
  text-shadow: 0 0 6px rgba(255,166,77,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 9px rgba(255,140,46,0.4);
}
.btn--play.is-on {
  color: #d2f5c2;
  background: linear-gradient(180deg, #3d6b2a 0%, #234a14 100%);
  border-color: #10260a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 9px rgba(159,220,138,0.4);
}
.btn[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }

/* ---- LCD readouts: amber glass under a bezel ----------------- */
.lcd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 3px 8px;
  min-width: 58px;
  border-radius: 3px;
  background: linear-gradient(180deg, #140e06 0%, var(--lcd-bg) 100%);
  border: 1px solid #0c0906;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.85);
}
.lcd--sm { min-width: 50px; }
.lcd__label { font-size: 7px; color: var(--lcd-dim); }
/* draggable readout (tempo/swing/length) */
.lcd--knobbed { cursor: ns-resize; touch-action: none; }
.lcd--clickable { cursor: pointer; }
.lcd--knobbed:focus-visible,
.lcd--clickable:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.lcd__value {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--lcd);
  text-shadow: 0 0 7px rgba(255,166,77,0.45);
  line-height: 1;
}
.lcd--sm .lcd__value { font-size: 13px; }

/* ---- Selectors ----------------------------------------------- */
.selector { display: flex; flex-direction: column; gap: 3px; }
.selector__field {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--silk);
  background: var(--sunk);
  border: 1px solid #0f0d09;
  border-radius: 3px;
  padding: 5px 8px;
  cursor: pointer;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.6);
  appearance: none;
  min-width: 0;
}
.selector__field:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Segmented toggle */
.segbtns { display: inline-flex; border-radius: 3px; overflow: hidden; border: 1px solid #0f0d09; align-self: flex-end; }
.seg {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
  background: var(--sunk);
  border: none;
  padding: 7px 10px;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.seg:not(.seg--on):hover { color: var(--silk); background: #262219; }
.seg--on {
  color: var(--amber-soft);
  background: linear-gradient(180deg, #7a4a1d, #4a2c10);
  text-shadow: 0 0 6px rgba(255,166,77,0.6);
}

/* ---- Banks ---------------------------------------------------- */
.banks { display: flex; align-items: center; gap: 4px; }
.banks__label { margin-right: 2px; }
.bank {
  position: relative;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 12px;
  width: 30px;
  height: 30px;
  color: var(--muted);
  background: linear-gradient(180deg, #504b44, #33302b);
  border: 1px solid #191713;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  transition: color 0.12s ease, background 0.12s ease, transform 0.05s ease;
}
.bank:not(.bank--on):hover { color: var(--silk); background: linear-gradient(180deg, #5c564e, #3b3731); }
.bank:active { transform: translateY(1px); }
.bank--on {
  color: var(--amber-soft);
  background: linear-gradient(180deg, #7a4a1d, #4a2c10);
  border-color: #2a1400;
  text-shadow: 0 0 6px rgba(255,166,77,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 8px rgba(255,140,46,0.35);
}
/* "Used" indicator: a small lit dot on banks that hold a programmed pattern
   (and therefore take part in the chain). */
.bank__dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #131109;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.8);
}
.bank.is-used .bank__dot {
  background: var(--amber-hi);
  box-shadow: 0 0 5px var(--amber-hi);
}
.bank--on.is-used .bank__dot { background: #2a1400; box-shadow: none; }
/* Armed: a manual switch is pending until the next loop boundary. */
.bank--armed { animation: bank-arm 0.5s steps(2, jump-none) infinite; }
@keyframes bank-arm {
  50% { background: linear-gradient(180deg, #7a4a1d, #4a2c10); color: var(--amber-soft); }
}

/* ---- LEDs ------------------------------------------------------ */
.led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2a2620;
  box-shadow: inset 0 0 0 1px #000, inset 0 1px 1px rgba(255,255,255,0.15);
}
.led--red   { background: var(--red);      box-shadow: 0 0 6px 1px rgba(255,90,60,0.7),   inset 0 0 2px #fff; }
.led--amber { background: var(--amber-hi); box-shadow: 0 0 7px 1px rgba(255,166,77,0.7), inset 0 0 2px #fff; }

/* ============================================================
   CONSOLE DECK — named grid areas do the desktop↔phone reflow
   ============================================================ */
.deck {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
  grid-template-areas:
    "seq voice"
    "fx  master";
  align-items: stretch;
}
.module--seq    { grid-area: seq; }
.module--voice  { grid-area: voice; }
.module--fx     { grid-area: fx; }
.module--master { grid-area: master; }

/* ---- Module chrome: recessed panel + thin engraved header ---- */
.module {
  border-radius: 6px;
  background: linear-gradient(180deg, #29271f 0%, var(--panel) 100%);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 2px 6px rgba(0,0,0,0.35);
}
.module__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px;
  border-bottom: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(0,0,0,0.16));
  box-shadow: inset 0 -1px 0 rgba(255,140,46,0.25);
}
.module__led {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 6px 1px var(--amber), inset 0 0 2px rgba(255,255,255,0.8);
}
.module__title {
  margin: 0;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--silk);
  text-shadow: 0 1px 0 #000;
}
.module__sub {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--silk-dim);
  margin-left: auto;
}
/* pattern tools ride the sequencer's title strip, after the sub label */
.module__head .banktools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: 10px; }

/* ============================================================
   SEQUENCER (signature module)
   ============================================================ */
/* tools row: what the faders edit + scale lock + randomize */
.seqtools {
  display: flex;
  align-items: flex-end;
  gap: 6px 8px;
  flex-wrap: wrap;
  padding: 5px 12px 6px;
  border-bottom: 1px solid var(--line);
}
.seqtools__spacer { flex: 1; }
.editbar__rnd { display: flex; align-items: flex-end; gap: 5px; }
.editbar__rnd .lcd { padding: 3px 7px; }

/* the recessed fader well */
.stepbank__rail {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: clamp(3px, 0.6vw, 8px);
  margin: 8px 10px 10px;
  padding: 8px 8px 6px;
  border-radius: 4px;
  background: radial-gradient(130% 160% at 50% -30%, #232019 0%, var(--sunk) 65%);
  border: 1px solid #100e0a;
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.7);
}
.channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.channel__led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #26130a;
  box-shadow: inset 0 0 0 1px #000, inset 0 1px 1px rgba(255,255,255,0.08);
  transition: background 0.06s, box-shadow 0.06s;
}
/* running light — the playhead lights the active step's LED */
.channel--playing .channel__led {
  background: #fff2cf;
  box-shadow: 0 0 10px 3px rgba(255,166,77,0.9), 0 0 3px 1px var(--amber-hi), inset 0 0 2px #fff;
}

/* Fader — a colored band that fills from the bottom (Matrix step style) */
.channel__bar {
  position: relative;
  width: 100%;
  max-width: 34px;
  height: clamp(112px, 15vh, 132px);
  border-radius: 3px;
  overflow: hidden;
  cursor: ns-resize;
  touch-action: none;
  background: linear-gradient(180deg, #0b0906 0%, var(--sunk-deep) 100%);
  box-shadow:
    inset 0 0 0 1px #000,
    inset 0 2px 7px rgba(0,0,0,0.75);
}
/* faint tick grid so the recessed channel reads as a scale */
.channel__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg, transparent 0, transparent 22px,
    rgba(255,255,255,0.035) 22px, rgba(255,255,255,0.035) 23px);
}
.channel__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(180deg, var(--fader-hi) 0%, var(--fader) 100%);
  box-shadow:
    0 0 12px rgba(255,150,50,0.4),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
/* bright lip along the top edge of the band */
.channel__fill::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--fader-lip);
  opacity: 0.9;
}
.channel__bar:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
/* steps beyond the active pattern length are dimmed */
.channel--inactive { opacity: 0.3; filter: grayscale(0.5); }
/* a rest step (gate off) shows a faint band so you can see it's silent */
.channel--rest .channel__fill { opacity: 0.22; }
/* the active step's band brightens as the playhead passes */
.channel--playing .channel__fill {
  background: linear-gradient(180deg, #fff0cc 0%, #ffa733 100%);
  box-shadow: 0 0 18px rgba(255,190,90,0.7), inset 0 1px 0 rgba(255,255,255,0.35);
}
/* crisp amber ring + glow around the active channel so the playhead reads at a
   glance during fast playback. No transition — it should snap, not fade. */
.channel--playing .channel__bar {
  box-shadow:
    inset 0 0 0 2px var(--amber-hi),
    inset 0 2px 7px rgba(0,0,0,0.55),
    0 0 14px rgba(255,166,77,0.45);
}
.channel__note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--amber);
  letter-spacing: 0.02em;
  min-height: 1em;
}
.channel--playing .channel__note {
  color: var(--amber-hi);
  text-shadow: 0 0 8px rgba(255,166,77,0.6);
}
/* dim the band when a per-step toggle (accent/slide) is off */
.channel__bar--off .channel__fill { opacity: 0.35; filter: saturate(0.4); }

/* always-visible accent/slide flags under each band */
.channel__flags {
  display: flex;
  gap: 5px;
  font-size: 9px;
  line-height: 1;
  min-height: 1em;
}
.channel__flags .flag { color: #3d382e; transition: color 0.1s ease; }
.channel__flags.has-accent .flag--accent { color: var(--red); text-shadow: 0 0 6px rgba(255,90,60,0.6); }
.channel__flags.has-slide .flag--slide { color: var(--amber-hi); text-shadow: 0 0 6px rgba(255,166,77,0.6); }
.channel__num {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--silk-dim);
  letter-spacing: 0.05em;
}

/* ============================================================
   KNOBS — machined caps, cream pointer
   ============================================================ */
.knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 56px;
}
.knob__dial {
  --angle: -135deg;
  position: relative;
  cursor: ns-resize;
  touch-action: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 30%, #5c564c 0%, #2b2823 68%, #1c1915 100%);
  border: 1px solid #0f0d09;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.16),
    inset 0 -3px 6px rgba(0,0,0,0.7),
    0 3px 5px rgba(0,0,0,0.5);
  transition: box-shadow 0.12s ease;
}
/* hover cue: a faint amber ring */
.knob__dial:hover {
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.18),
    inset 0 -3px 6px rgba(0,0,0,0.7),
    0 0 0 1px var(--amber),
    0 3px 6px rgba(0,0,0,0.55);
}
/* pointer */
.knob__dial::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 3px;
  height: 13px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--cream);
  box-shadow: 0 1px 2px rgba(0,0,0,0.8);
  transform-origin: 50% 15px;
  transform: rotate(var(--angle));
}
.knob__label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silk-dim);
  text-align: center;
  white-space: nowrap;
}
.knob__dial:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.knob__value {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  color: var(--lcd);
  text-shadow: 0 0 6px rgba(255, 166, 77, 0.4);
}

/* FX / master knobs: smaller dials, value always visible */
.knob--fx { width: 46px; gap: 2px; }
.knob--fx .knob__dial,
#master-rail .knob__dial { width: 30px; height: 30px; }
/* pointer re-proportioned + re-pivoted to the smaller dial's centre */
.knob--fx .knob__dial::after,
#master-rail .knob__dial::after {
  top: 4px; height: 9px; transform-origin: 50% 11px;
}
.knob--fx .knob__label { font-size: 8px; letter-spacing: 0.08em; }

/* ============================================================
   SYNTH VOICE (right column)
   ============================================================ */
.voice__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px 12px;
}
.voice__wave .selector__field { width: 100%; }
.voice__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 4px;
  justify-items: center;
}

/* ============================================================
   MASTER (right column)
   ============================================================ */
.master__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px 10px;
}
.master__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
}
#master-rail .knob { width: 46px; gap: 3px; }
#master-rail .knob__label { font-size: 8px; letter-spacing: 0.06em; white-space: nowrap; }
.master--bypassed .master__row { opacity: 0.4; }
/* header BYPASS button sits at the right of the title strip */
.master .module__head .btn { margin-left: auto; padding: 3px 8px; font-size: 9px; }

/* Output level meter */
.master__meter { display: flex; align-items: center; gap: 8px; }
.master__meter-bar {
  position: relative;
  flex: 1;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #0f0d09;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
  background: linear-gradient(90deg, #8a6b45 0%, var(--amber-hi) 70%, var(--red) 100%);
}
/* Dark mask covering the un-lit (right) portion of the gradient. */
.master__meter-mask {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--sunk-deep);
}
.master__meter-db {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--silk-dim);
  min-width: 30px;
  text-align: right;
}
.master__meter-unit { font-size: 9px; color: var(--muted); letter-spacing: 0.1em; }

/* ============================================================
   FX RACK — two zones (INSERTS series · SENDS parallel)
   ============================================================ */
.fxrack__zones { display: flex; flex-direction: column; gap: 5px; padding: 6px 10px 8px; }
.fxzone {
  position: relative;
  border-radius: 5px;
  padding: 14px 5px 5px;
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(0,0,0,0.4);
}
.fxzone__label {
  position: absolute; top: 4px; left: 10px;
  font-family: var(--font-disp); font-weight: 700; font-size: 8px;
  letter-spacing: 0.22em; color: var(--silk-dim);
}
.fxrack__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.fxcard {
  min-width: 0;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(180deg, #232019 0%, var(--panel-lo) 100%);
  border: 1px solid #131109;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 5px rgba(0,0,0,0.4);
}
.fxcard__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--silk);
  text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25));
  border-bottom: 1px solid #131109;
}
.fxcard__led {
  width: 5px; height: 5px; border-radius: 50%;
  background: #3d382e;
  box-shadow: inset 0 0 0 1px #000;
}
/* card LED lights when its effect is engaged */
.fxcard:has(.fxcard__on[aria-pressed="true"]) .fxcard__led,
.fxcard--delay .fxcard__led,
.fxcard--reverb .fxcard__led {
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber), inset 0 0 2px rgba(255,255,255,0.8);
}
.fxcard__body {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  flex-wrap: wrap;
  padding: 4px 7px 5px;
}
.fxcard .selector__field { padding: 5px 7px; font-size: 10px; }
.fxcard .knob__value { color: var(--lcd); }

/* the ON toggle sits at the right of a card header */
.fxcard__on {
  margin-left: auto;
  padding: 2px 7px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted);
  background: linear-gradient(180deg, #3d3831, #2a2721);
}
.fxcard__on[aria-pressed="true"] {
  color: var(--amber-soft);
  background: linear-gradient(180deg, #7a4a1d, #4a2c10);
  border-color: #2a1400;
  text-shadow: 0 0 6px rgba(255,166,77,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 8px rgba(255,140,46,0.4);
}
/* dim a card's body when the effect is off */
.fxcard:has(.fxcard__on[aria-pressed="false"]) .fxcard__body { opacity: 0.5; }

/* ---- Help button + overlay ----------------------------------- */
.help-btn {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #191713;
  background: radial-gradient(120% 120% at 50% 30%, #504b44 0%, #2a2721 100%);
  color: var(--silk-dim);
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 2px 4px rgba(0,0,0,0.5);
  transition: color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.help-btn:hover,
.help-btn:focus-visible {
  color: var(--amber-hi);
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber) inset, 0 0 10px 1px rgba(255,140,46,0.4);
  outline: none;
}

.help {
  width: min(680px, 92vw);
  max-height: 86vh;
  padding: 0;
  border: 1px solid #4a453d;
  border-radius: 8px;
  background: var(--panel);
  color: var(--silk);
  box-shadow: 0 24px 70px rgba(0,0,0,0.7);
  overflow: hidden;
}
.help::backdrop {
  background: rgba(8,6,4,0.66);
  backdrop-filter: blur(2px);
}
.help__panel {
  display: flex;
  flex-direction: column;
  max-height: 86vh;
}
.help__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
  background: linear-gradient(180deg, #33302a 0%, var(--panel) 100%);
}
.help__title {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: var(--silk);
}
.help__slash { color: var(--amber); }
.help__close {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  border: 1px solid #4a453d;
  background: var(--sunk);
  color: var(--silk-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.help__close:hover,
.help__close:focus-visible {
  color: var(--amber-hi);
  border-color: var(--amber);
  outline: none;
}
.help__body {
  padding: 8px 20px 22px;
  overflow-y: auto;
}
.help__section { margin-top: 18px; }
.help__section h3 {
  font-family: var(--font-disp);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 8px;
}
.help__section p,
.help__section li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--silk);
}
.help__section ul,
.help__section ol {
  padding-left: 20px;
  display: grid;
  gap: 6px;
}
.help__section strong { color: var(--silk); font-weight: 600; }
.help__section em { color: var(--amber-hi); font-style: normal; }
.help__keys {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  align-items: baseline;
}
.help__keys dt { text-align: right; }
.help__keys dd { font-size: 14px; color: var(--silk); }
.help kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #4a453d;
  border-bottom-width: 2px;
  background: var(--sunk);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--lcd);
  text-align: center;
}
.help__note {
  margin-top: 8px;
  font-size: 12px !important;
  color: var(--silk-dim) !important;
}

/* ---- Styled tooltip (src/ui/tooltips.js) ---------------------- */
.tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 260px;
  padding: 6px 9px;
  border-radius: 4px;
  border: 1px solid #4a453d;
  background: linear-gradient(180deg, #2e2b25 0%, #1d1b16 100%);
  color: var(--silk);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.1s ease, transform 0.1s ease;
}
.tooltip.is-visible { opacity: 1; transform: none; }
/* little pointer nub — points down when above the control, up when below */
.tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -4px;
  border: 4px solid transparent;
  top: 100%;
  border-top-color: #4a453d;
}
.tooltip.tooltip--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #4a453d;
}

/* ---- Focus + reduced motion floor ------------------------------ */
:where(button, select):focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Short desktop windows (e.g. 1280×800): compact the tall bits so the whole
   console still fits without vertical scroll. */
@media (min-width: 951px) and (max-height: 850px) {
  .channel__bar { height: 104px; }
  .stepbank__rail { margin: 6px 10px 8px; padding: 6px 8px 5px; }
  .knob__dial { width: 36px; height: 36px; }
  .knob__dial::after { top: 5px; height: 11px; transform-origin: 50% 13px; }
  .voice__row { gap: 8px 4px; }
  .fxcard__body { padding: 3px 6px 4px; }
  .knob__value { font-size: 9px; }
}

/* Fold the console back to one column (spec order: seq→voice→fx→master). */
@media (max-width: 950px) {
  .deck {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "seq" "voice" "fx" "master";
  }
  .brand__badge { display: none; }
  .voice__row { grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); }
}

/* Phones: faders wrap into two rows of 8; grow hit targets for touch. */
@media (max-width: 720px) {
  .stepbank__rail { grid-template-columns: repeat(8, 1fr); row-gap: 14px; }
  .channel__bar { max-width: none; } /* faders fill their (wider) 8-col track */

  .btn { min-height: 40px; }
  .knob--fx { width: 56px; }
  .knob--fx .knob__dial,
  #master-rail .knob__dial { width: 44px; height: 44px; }
  .knob--fx .knob__dial::after,
  #master-rail .knob__dial::after {
    top: 5px; height: 13px; transform-origin: 50% 17px;
  }
  .fxrack__cards { grid-template-columns: minmax(0, 1fr); }
}

/* Very narrow phones: single tighter fader gap so two rows of 8 still fit. */
@media (max-width: 420px) {
  .stepbank__rail { gap: 4px; margin: 8px; padding: 10px 8px 8px; }
  .channel__bar { height: clamp(110px, 18vh, 150px); }
  .channel__note { font-size: 9px; }
}