/* ============================================================
   BASS//LINE — TB-303-style bass line generator
   Prompt 1: static layout shell. No behavior yet.
   Aesthetic: anodized graphite panel, cream silkscreen,
   Roland-orange accents, amber/red hardware LEDs.
   ============================================================ */

/* 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 {
  /* panel */
  --panel:        #17181b;   /* anodized graphite */
  --panel-raised: #23252a;   /* raised sub-panels */
  --panel-sunk:   #101113;   /* routed channels / recesses */
  --edge-hi:      #34373d;   /* top bevel highlight */
  --edge-lo:      #0b0c0e;   /* bottom bevel shadow */

  /* ink */
  --silk:      #d9d2c3;      /* cream silkscreen label */
  --silk-dim:  #8b877c;      /* secondary label */
  --muted:     #63666d;      /* inactive control */

  /* signal */
  --orange:    #f26b1f;      /* Roland orange — the accent */
  --orange-hi: #ff8a3d;
  --amber:     #ffb020;      /* LED on / playhead */
  --red:       #ff3b30;      /* run / accent LED */
  --lcd:       #ffc247;      /* LCD amber glow */

  /* per-module accent palette — each module reads as its own unit */
  --acc-seq:    #f26b1f;     /* sequencer — the signature orange */
  --acc-voice:  #ff5a47;     /* synth voice — red */
  --acc-filter: #35c9d6;     /* filter knobs — cyan */
  --acc-env:    #ffb020;     /* envelope knobs — amber */
  --acc-osc:    #ff5a47;     /* osc/tone knobs — red */
  --acc-send:   #4d8dff;     /* fx-send knobs — blue */
  --acc-fx:     #6ea8ff;     /* fx rack — blue */
  --acc-delay:  #4d8dff;     /* delay card — blue */
  --acc-reverb: #b06bff;     /* reverb card — violet */
  --acc-wah:    #e05cc8;     /* auto-wah — magenta */
  --acc-dist:   #ff6a3d;     /* distortion — hot orange-red */
  --acc-crush:  #d8e04a;     /* bit-crush — acid yellow */
  --acc-mod:    #35d0a0;     /* mod — teal */
  --acc-master: #35c26a;     /* master — green */
  --accent:     var(--orange); /* default section accent (overridden per module) */

  /* two-tone rack: black frame + lighter brushed-metal faceplates */
  --rack:       #0c0d0f;     /* black rack frame between modules */
  --face:       #262a30;     /* brushed-metal faceplate (lighter than chassis) */
  --face-lo:    #1c1f24;     /* faceplate bottom */
  --screw:      #14161a;     /* recessed screw well */

  /* step faders — luminous amber-orange bands, kin to the buttons */
  --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;
}

* { 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%, #1e2024 0%, #121316 60%, #0d0e10 100%);
  padding: clamp(12px, 3vw, 32px);
  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 device chassis ------------------------------------ */
.unit {
  width: min(1180px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(14px, 2.4vw, 26px);
  border-radius: 12px;
  /* black rack frame: modules sit inset in this, with faint mounting rails */
  background:
    linear-gradient(180deg, #1a1c20 0%, transparent 2px),
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,0.25) 3px 4px),
    linear-gradient(180deg, #141517 0%, #0a0b0d 100%);
  border: 1px solid #000;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 0 1px rgba(0,0,0,0.6),
    0 30px 60px -20px rgba(0,0,0,0.8);
}

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

/* ---- Brand ------------------------------------------------- */
.brand {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}
.brand__name {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: 0.02em;
  line-height: 0.9;
  color: var(--silk);
  text-shadow: 0 1px 0 #000;
}
.brand__slash { color: var(--orange); }
.brand__sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--silk-dim);
}
.brand__aside {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--silk-dim);
}

/* ---- Help button + overlay -------------------------------------------------- */
.help-btn {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--edge-hi);
  background:
    radial-gradient(120% 120% at 50% 30%, var(--panel-raised) 0%, var(--panel-sunk) 100%);
  color: var(--silk-dim);
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--edge-hi) inset, 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(--orange-hi);
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange) inset, 0 0 10px 1px rgba(242,107,31,0.4);
  outline: none;
}

.help {
  width: min(680px, 92vw);
  max-height: 86vh;
  padding: 0;
  border: 1px solid var(--edge-hi);
  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(5,6,8,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: 16px 20px;
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
  background: linear-gradient(180deg, var(--panel-raised) 0%, var(--panel) 100%);
}
.help__title {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--silk);
}
.help__slash { color: var(--orange); }
.help__close {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  border: 1px solid var(--edge-hi);
  background: var(--panel-sunk);
  color: var(--silk-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.help__close:hover,
.help__close:focus-visible {
  color: var(--orange-hi);
  border-color: var(--orange);
  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(--orange);
  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(--acc-fx); 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 var(--edge-hi);
  border-bottom-width: 2px;
  background: var(--panel-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;
}

/* ---- LEDs -------------------------------------------------- */
.led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2a2b2e;
  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,59,48,0.7),  inset 0 0 2px #fff; }
.led--amber { background: var(--amber); box-shadow: 0 0 7px 1px rgba(255,176,32,0.7), inset 0 0 2px #fff; }

/* ---- Faceplate base: brushed-metal module inset in the black rack --------- */
.transport, .editbar, .stepbank, .voice, .fxrack, .master, .patternbar, .chainlane {
  position: relative;
  border-radius: 6px;
  /* corner screws + fine vertical brush lines + metal gradient */
  background:
    radial-gradient(circle at 11px 11px,                     #0a0b0c 0 2.4px, #3a3f47 2.4px 3.4px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 11px) 11px,        #0a0b0c 0 2.4px, #3a3f47 2.4px 3.4px, transparent 3.6px),
    radial-gradient(circle at 11px calc(100% - 11px),        #0a0b0c 0 2.4px, #3a3f47 2.4px 3.4px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), #0a0b0c 0 2.4px, #3a3f47 2.4px 3.4px, transparent 3.6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--face) 0%, var(--face-lo) 100%);
  border: 1px solid #000;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.03),
    0 3px 8px -2px rgba(0,0,0,0.6);
}

/* ---- Module header strip (accent-colored identity) ------------------------ */
.module { padding: 0; }
.module__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 7px;
  border-bottom: 1px solid #000;
  border-radius: 6px 6px 0 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.18));
  /* accent underline + faint inner glow give each module its identity color */
  box-shadow:
    inset 0 -2px 0 -1px var(--accent),
    inset 0 0 22px -6px var(--accent);
}
.module__led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px 1px var(--accent), inset 0 0 2px rgba(255,255,255,0.8);
}
.module__title {
  margin: 0;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--silk);
  text-shadow: 0 1px 0 #000;
}
.module__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--silk-dim);
  margin-left: auto;
}

/* Per-module accent assignment */
.module--seq    { --accent: var(--acc-seq); }
.module--voice  { --accent: var(--acc-voice); }
.module--fx     { --accent: var(--acc-fx); }
.module--master { --accent: var(--acc-master); }
/* control bars (no header) get their own accent for LEDs / focus rings */
.transport { --accent: var(--amber); }
.editbar   { --accent: var(--orange); }

/* ---- Song chain lane --------------------------------------- */
.chainlane { display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
.chainlane__steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chainstep {
  display: flex;
  align-items: stretch;
  height: 34px;
  border: 1px solid #000;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(180deg, #2c2f34, #202227);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.chainstep__bank {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 14px;
  color: var(--orange-hi);
  width: 26px;
  border: none;
  border-right: 1px solid #000;
  background: transparent;
  cursor: pointer;
}
.chainstep__bank:hover { background: rgba(242,107,31,0.15); }
.chainstep__rep {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--silk-dim);
  min-width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  cursor: ns-resize;
  touch-action: none;
}
.chainstep__x {
  border: none;
  border-left: 1px solid #000;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  width: 18px;
  cursor: pointer;
}
.chainstep__x:hover { background: rgba(226,72,47,0.25); color: #fff; }
.chainstep--add {
  align-items: center;
  justify-content: center;
  width: 32px;
  color: var(--silk-dim);
  font-size: 18px;
  cursor: pointer;
}
.chainstep--add[disabled] { opacity: 0.3; cursor: default; }
.chainstep.is-playing {
  border-color: var(--orange);
  box-shadow: 0 0 8px rgba(242,107,31,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ---- Transport --------------------------------------------- */
.transport {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  flex-wrap: wrap;
}
.transport__group { display: flex; gap: 8px; }
.transport__group--right { margin-left: auto; }
.transport__readouts { display: flex; gap: 10px; flex-wrap: wrap; }

/* Buttons */
.btn {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--silk);
  background: linear-gradient(180deg, #2c2f34 0%, #202227 100%);
  border: 1px solid #000;
  border-radius: 3px;
  padding: 9px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 3px rgba(0,0,0,0.4);
  transition: transform 0.05s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { background: linear-gradient(180deg, #34373d 0%, #26282d 100%); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); }
.btn span { font-size: 11px; letter-spacing: 0.16em; }
.btn--play { color: var(--amber); }
.btn--play::before,
.btn--play span,
.btn--stop span { color: inherit; }
.btn--stop { color: var(--red); }
.btn--accent {
  color: #1a1206;
  background: linear-gradient(180deg, var(--orange-hi) 0%, var(--orange) 100%);
  border-color: #7a300a;
}
.btn--accent:hover { background: linear-gradient(180deg, #ff9a52 0%, #ff7a2e 100%); }
.btn--sq { font-size: 11px; letter-spacing: 0.16em; }
.btn--sm { padding: 7px 10px; font-size: 11px; letter-spacing: 0.1em; }
/* engaged state for toggles / transport */
.btn.is-on {
  color: #1a1206;
  background: linear-gradient(180deg, var(--orange-hi), var(--orange));
  border-color: #7a300a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 10px rgba(242,107,31,0.4);
}
.btn--play.is-on { color: #0c1a06; }

/* LCD readouts */
.lcd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 12px;
  min-width: 78px;
  border-radius: 3px;
  background: linear-gradient(180deg, #0a0b0c 0%, #0f1113 100%);
  border: 1px solid #000;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.7);
}
.lcd--sm { min-width: 60px; }
/* 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: 20px;
  font-weight: 500;
  color: var(--lcd);
  text-shadow: 0 0 8px rgba(255,194,71,0.45);
  line-height: 1;
}
.lcd--sm .lcd__value { font-size: 15px; }

/* ---- Edit bar ---------------------------------------------- */
.editbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 14px;
  flex-wrap: wrap;
}
.selector { display: flex; flex-direction: column; gap: 4px; }
.selector--inline { margin-left: auto; }
.editbar__rnd { display: flex; align-items: center; gap: 6px; }
.editbar__scale { display: flex; gap: 12px; margin-left: auto; }
.editbar__scale .selector__field { min-width: 96px; }
.selector__field {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--orange);
  background: var(--panel-sunk);
  border: 1px solid #000;
  border-radius: 3px;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.6);
  appearance: none;
  min-width: 150px;
}
.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 #000; }
.seg {
  font-family: var(--font-disp);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--muted);
  background: var(--panel-sunk);
  border: none;
  padding: 9px 16px;
  cursor: pointer;
}
.seg { transition: color 0.12s ease, background 0.12s ease; }
.seg:not(.seg--on):hover { color: var(--silk); background: #1c1e22; }
.seg--on { color: #1a1206; background: linear-gradient(180deg, var(--orange-hi), var(--orange)); }

/* ---- Step bank (signature) --------------------------------- */
.stepbank {
  /* the sequencer keeps a dark recessed housing — the glowing faders are the hero */
  background:
    radial-gradient(120% 140% at 50% -20%, #24262b 0%, #17181b 70%),
    var(--panel-sunk);
}
.stepbank__rail {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: clamp(4px, 0.8vw, 10px);
  padding: 18px 16px 16px;
}
.channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.channel__led {
  width: 10px;
  height: 10px;
  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,176,32,0.9), 0 0 3px 1px var(--amber), 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: 40px;
  height: clamp(150px, 26vh, 230px);
  border-radius: 3px;
  overflow: hidden;
  cursor: ns-resize;
  touch-action: none;
  background: linear-gradient(180deg, #08090a 0%, #131417 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 24px,
    rgba(255,255,255,0.035) 24px, rgba(255,255,255,0.035) 25px);
}
.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),
    inset 0 2px 7px rgba(0,0,0,0.55),
    0 0 14px rgba(255,176,32,0.45);
}
/* top-edge playhead marker above the active band */
.channel--playing .channel__note { text-shadow: 0 0 8px rgba(255,176,32,0.6); }
.channel__note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--orange);
  letter-spacing: 0.02em;
  min-height: 1em;
}
.channel--playing .channel__note { color: var(--amber); }
/* 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: 6px;
  font-size: 10px;
  line-height: 1;
  min-height: 1em;
}
.channel__flags .flag { color: #3a3c42; transition: color 0.1s ease; }
.channel__flags.has-accent .flag--accent { color: var(--red); text-shadow: 0 0 6px rgba(255,59,48,0.6); }
.channel__flags.has-slide .flag--slide { color: var(--amber); text-shadow: 0 0 6px rgba(255,176,32,0.6); }
.channel__num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--silk-dim);
  letter-spacing: 0.05em;
}

/* ---- Voice knob panel -------------------------------------- */
.voice__body {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  flex-wrap: wrap;
}
.voice__row {
  display: flex;
  gap: clamp(12px, 2vw, 26px);
  flex-wrap: wrap;
  align-items: flex-start;
}
.voice__wave { margin-left: auto; }

/* ---- Master bus strip -------------------------------------- */
.master__body { display: flex; align-items: center; gap: 18px; padding: 16px 18px; flex-wrap: wrap; }
.master__row { display: flex; gap: clamp(12px, 2vw, 26px); flex-wrap: wrap; align-items: flex-start; }
.master--bypassed .master__row { opacity: 0.4; }
/* header BYPASS button sits inline after the title */
.master .module__head .btn { margin-left: 8px; padding: 5px 10px; }
.master .module__sub { margin-left: auto; }

/* Output level meter (pushed to the right of the strip). */
.master__meter { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.master__meter-bar {
  position: relative;
  width: 120px;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #000;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
  background: linear-gradient(90deg, #35c26a 0%, #35c26a 60%, #e8c14a 80%, #e2482f 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: #0c0d0f;
}
.master__meter-db {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--silk-dim);
  min-width: 30px;
  text-align: right;
}
.master__meter-unit { font-size: 10px; color: var(--muted); letter-spacing: 0.1em; }

/* Keep longer master knob labels (e.g. LIMIT/DRIVE) tidy within the knob width. */
#master-rail .knob__label { letter-spacing: 0.06em; white-space: nowrap; }

/* FX panel: two labelled rows (DELAY / REVERB) below the knobs. */
.voice__fx {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.fxrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fxrow__label {
  width: 62px;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 62px;
}
.knob__dial {
  --angle: -135deg;
  position: relative;
  cursor: ns-resize;
  touch-action: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, #33363c 0%, #1c1e22 70%, #141518 100%);
  border: 1px solid #000;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.10),
    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 ring in the knob's function-group accent */
.knob__dial:hover {
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.12),
    inset 0 -3px 6px rgba(0,0,0,0.7),
    0 0 0 1px var(--knob-accent, var(--accent)),
    0 3px 6px rgba(0,0,0,0.55);
}
/* pointer */
.knob__dial::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 16px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--knob-accent, var(--accent));
  box-shadow: 0 0 6px var(--knob-accent, var(--accent));
  transform-origin: 50% 18px;
  transform: rotate(var(--angle));
}
.knob__label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silk-dim);
  text-align: center;
}
.knob__dial:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---- FX-rack knobs: smaller dials, value always visible ------ */
.knob--fx { width: 56px; gap: 4px; }
.knob--fx .knob__dial { width: 38px; height: 38px; }
/* pointer re-proportioned + re-pivoted to the smaller dial's centre */
.knob--fx .knob__dial::after {
  top: 5px; height: 12px; transform-origin: 50% 14px;
}
.knob--fx .knob__label { font-size: 9px; letter-spacing: 0.1em; }
.knob__value {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: var(--lcd);
  text-shadow: 0 0 6px rgba(255, 194, 71, 0.4);
}

/* ---- Pattern / export bar ---------------------------------- */
.patternbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  flex-wrap: wrap;
}
.banks { display: flex; align-items: center; gap: 6px; }
.banks__label { margin-right: 4px; }
.bank {
  position: relative;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 15px;
  width: 38px;
  height: 38px;
  color: var(--muted);
  background: linear-gradient(180deg, #2c2f34, #202227);
  border: 1px solid #000;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  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, #34373d, #26282d); }
.bank:active { transform: translateY(1px); }
.bank--on {
  color: #1a1206;
  background: linear-gradient(180deg, var(--orange-hi), var(--orange));
  border-color: #7a300a;
}
/* "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: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0c0d0f;
  box-shadow: inset 0 0 1px rgba(0,0,0,0.8);
}
.bank.is-used .bank__dot {
  background: var(--amber);
  box-shadow: 0 0 5px var(--amber);
}
.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, var(--orange-hi), var(--orange)); color: #1a1206; }
}

.banktools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.btn[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }

.patternbar__spacer { flex: 1; }
.filebtns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- FX RACK: effect cards (room to grow) ------------------ */
.fxrack__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px 16px;
}
.fxcard {
  flex: 1 1 360px;
  min-width: 300px;
  border-radius: 5px;
  overflow: hidden;
  background: linear-gradient(180deg, #1c1f24 0%, #15171b 100%);
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 5px rgba(0,0,0,0.45);
}
.fxcard--delay  { --accent: var(--acc-delay); }
.fxcard--reverb { --accent: var(--acc-reverb); }
.fxcard__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--silk);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.28));
  border-bottom: 1px solid #000;
  box-shadow: inset 0 -2px 0 -1px var(--accent);
}
.fxcard__led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent), inset 0 0 2px rgba(255,255,255,0.8);
}
.fxcard__body {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
}
/* the card's own accent tints its LCD readouts + select */
.fxcard .lcd__value,
.fxcard .knob__value { color: color-mix(in srgb, var(--accent) 55%, var(--lcd)); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent); }
.fxcard .selector__field { color: var(--accent); }

/* two-zone rack: INSERTS (series) then SENDS (parallel) */
.fxrack__zones { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; }
.fxzone { position: relative; border-radius: 5px; padding: 20px 8px 8px; background: rgba(0,0,0,0.18); border: 1px solid rgba(0,0,0,0.4); }
.fxzone__label {
  position: absolute; top: 5px; left: 12px;
  font-family: var(--font-disp); font-weight: 700; font-size: 10px;
  letter-spacing: 0.22em; color: var(--silk-dim);
}
.fxzone .fxrack__cards { padding: 0; }

/* per-card accents */
.fxcard--wah   { --accent: var(--acc-wah); }
.fxcard--dist  { --accent: var(--acc-dist); }
.fxcard--crush { --accent: var(--acc-crush); }
.fxcard--mod   { --accent: var(--acc-mod); }

/* the ON toggle sits at the right of a card header */
.fxcard__head { position: relative; }
.fxcard__on {
  margin-left: auto; padding: 3px 9px; font-size: 10px; letter-spacing: 0.14em;
  color: var(--muted); background: linear-gradient(180deg, #2c2f34, #202227);
}
.fxcard__on[aria-pressed="true"] {
  color: #12100a;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  border-color: #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* dim a card's body when the effect is off */
.fxcard:has(.fxcard__on[aria-pressed="false"]) .fxcard__body { opacity: 0.5; }

/* ---- Knob color-coding by function group ------------------- */
#knob-rail .knob[data-name="CUTOFF"],
#knob-rail .knob[data-name="RES"],
#knob-rail .knob[data-name="ENV MOD"]  { --knob-accent: var(--acc-filter); }
#knob-rail .knob[data-name="DECAY"],
#knob-rail .knob[data-name="ACCENT"]   { --knob-accent: var(--acc-env); }
#knob-rail .knob[data-name="TUNE"],
#knob-rail .knob[data-name="SUB"]       { --knob-accent: var(--acc-osc); }
#knob-rail .knob[data-name="DELAY"],
#knob-rail .knob[data-name="REVERB"]   { --knob-accent: var(--acc-send); }
#master-rail .knob                      { --knob-accent: var(--acc-master); }

/* ---- Styled tooltip (src/ui/tooltips.js) ------------------- */
.tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 260px;
  padding: 6px 9px;
  border-radius: 4px;
  border: 1px solid var(--edge-hi);
  background: linear-gradient(180deg, #26282d 0%, #191a1e 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: var(--edge-hi);
}
.tooltip.tooltip--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--edge-hi);
}

/* ---- 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: let faders wrap into two rows on phones ---- */
@media (max-width: 720px) {
  .stepbank__rail { grid-template-columns: repeat(8, 1fr); row-gap: 18px; }
  .transport__group--right { margin-left: 0; }
  .selector--inline { margin-left: 0; }
  .voice__wave { margin-left: 0; }

  /* Touch: grow the smallest hit targets toward ~44px so knobs/toggles are
     comfortable to drag/tap with a finger. */
  .btn { min-height: 40px; }
  .knob--fx { width: 62px; }
  .knob--fx .knob__dial { width: 46px; height: 46px; }
  .channel__bar { max-width: none; } /* faders fill their (wider) 8-col track */
}

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