/* ===== Theme tokens ===== */
:root{
  --bg:#0b0b0c;
  --panel:#151518;
  --ink:#f2f4f6;
  --muted:#9aa3a8;
  --line:#24262a;

  /* Accent (default = green) */
  --accent:#22c55e;
  --accent-hi:#46e08b;
  --accent-rgb:34 197 94;

  /* Flash (hit) green */
  --ok:#22c55e;
  --ok-rgb:34 197 94;

  --danger:#ef4444;

  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --ring: 0 0 0 3px rgb(var(--accent-rgb) / .35);

  /* Sequencer step width (keep header & cells in sync) */
  --stepW: 28px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg, #0b0b0c 0%, #0e0e11 100%);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===== Layout / header ===== */
.wrap{max-width:1000px; margin:0 auto; padding:16px;}
header{display:flex; gap:12px; align-items:center; justify-content:space-between; margin:8px 0 16px;}
h1{font-size:clamp(18px,3vw,26px); margin:0; font-weight:800; letter-spacing:.2px}

/* brand cluster */
.brand{display:flex; align-items:center; gap:10px}
.brand .logo{width:28px; height:28px; display:block}

/* ===== Bars dropdown (drop-in) ===== */
.select-wrap{ position:relative; display:inline-block; width:100%; }

.select.select--bars{
  /* reset + base */
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:40px;                            /* matches .btn visual height */
  padding:0 44px 0 14px;                  /* room for chevron on the right */
  border-radius:999px;                    /* pill, like your buttons */
  border:1px solid var(--line);
  background: linear-gradient(180deg,#121316,#0f1113);
  color:var(--ink);
  font: inherit;                          /* keep your system-ui */
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: .15s background,.15s border-color,.15s box-shadow,.12s transform;
}

/* hover / focus */
.select.select--bars:hover{ background:#171a1f; }
.select.select--bars:focus{ outline:none; box-shadow: var(--ring); border-color: transparent; }

/* active press */
.select.select--bars:active{ transform: translateY(1px) scale(.99); }

/* disabled */
.select.select--bars:disabled{ opacity:.55; cursor:not-allowed; }

/* custom chevron via mask so it can use var(--accent) */
.select-wrap::after{
  content:"";
  position:absolute; inset:auto 12px 0 auto; top:50%;
  width:12px; height:12px; transform: translateY(-50%);
  background: var(--accent);              /* swaps to red in .theme-metal */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5'/></svg>") no-repeat center / contain;
  pointer-events:none;
  opacity:.95;
}

/* high-contrast focus for keyboard users */
.select.select--bars:focus-visible{
  outline:2px solid #93eabf;
  outline-offset:2px;
  border-radius:999px;
}

/* (optional) compact size variant if you ever need it
.select.select--bars.sm{ height:34px; padding:0 38px 0 12px; font-size:14px; }
*/


/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:999px; border:1px solid transparent;
  background:#121316; color:var(--ink); box-shadow:var(--shadow);
  cursor:pointer; transition:.15s transform,.15s background,.15s border-color,.15s box-shadow;
  user-select:none;
}
.btn:hover{background:#191b20}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.green{background:var(--accent); color:#062011}
.btn.green:hover{background:var(--accent-hi)}
.btn.red{background:var(--danger); color:#2b0606}
.btn.ghost{background:#121316; border-color:#2a2d33}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}

/* ===== Panels / layout ===== */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
}
.controls{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px;
}
@media (max-width:720px){
  .controls{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.control label{
  display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)
}
.row{display:flex; gap:10px; align-items:center; margin-top:6px}
.value{min-width:64px; text-align:right; font-variant-numeric:tabular-nums; color:#cbd5dc}

/* ===== Sliders (range inputs) ===== */
input[type=range]{width:100%; -webkit-appearance:none; background:transparent; height:28px}
input[type=range]::-webkit-slider-runnable-track{
  height:6px; background:linear-gradient(90deg, #2a2d33, #31353b); border-radius:6px;
}
input[type=range]::-moz-range-track{
  height:6px; background:linear-gradient(90deg, #2a2d33, #31353b); border-radius:6px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; margin-top:-6px;
  background:var(--accent); border-radius:50%; box-shadow:0 0 0 2px #0c0d10, 0 2px 8px rgba(0,0,0,.4);
  transition:.15s transform,.15s background;
}
input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.06); background:var(--accent-hi) }
input[type=range]::-moz-range-thumb{
  width:18px; height:18px; background:var(--accent); border:none; border-radius:50%; box-shadow:0 0 0 2px #0c0d10, 0 2px 8px rgba(0,0,0,.4);
}

/* ============================ */
/* ===== Sequencer (NEW) ====== */
/* ============================ */

/* Make the whole sequencer panel scroll horizontally so header + rows move together */
.seq.panel { overflow-x: auto; }

/* Header layout */
.seq{padding:12px}
.seq-head{
  display:grid;
  grid-template-columns:140px 1fr; /* sticky label width must match row grid */
  gap:10px;
  align-items:end;
  margin-bottom:6px;
  position:sticky;
  top:0;
  z-index:3;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25));
  backdrop-filter: blur(2px);
  border-bottom:1px solid rgba(255,255,255,.04);
}

/* Header step numbers in a single scrolling line */
.seq .seq-head .steps{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--stepW);
  align-items:center;
}
.step-num{
  font-size:10px;
  text-align:center;
  color:#7e8790;
  user-select:none;
  padding:2px 0;
  box-shadow: inset 0 -1px rgba(255,255,255,0.06);
}

/* Track rows: grid with sticky label column */
.track{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:10px;
  align-items:center;
  margin:8px 0;
  /* per-track tint defaults (overridden by nth-child hues below) */
  --rowHue: 200;
  --rowBgA: 0.08;
  --cellOnA: 0.65;
  background: hsla(var(--rowHue), 70%, 12%, var(--rowBgA));
}

/* Zebra striping to help scan across */
#tracks .track:nth-child(odd)  { background: hsla(var(--rowHue), 70%, 10%, calc(var(--rowBgA) + 0.02)); }
#tracks .track:nth-child(even) { background: hsla(var(--rowHue), 70%, 8%,  calc(var(--rowBgA) + 0.00)); }

/* Track-specific colours (extend to 8) */
#tracks .track:nth-child(1){ --rowHue: 0;   }  /* Kick  → red-ish   */
#tracks .track:nth-child(2){ --rowHue: 40;  }  /* Snare → orange    */
#tracks .track:nth-child(3){ --rowHue: 200; }  /* Hat   → cyan      */
#tracks .track:nth-child(4){ --rowHue: 280; }  /* Bass  → purple    */
#tracks .track:nth-child(5){ --rowHue: 120; }  /* Clap  → green     */
#tracks .track:nth-child(6){ --rowHue: 320; }  /* Perc1 → magenta   */
#tracks .track:nth-child(7){ --rowHue: 180; }  /* Hat2  → teal      */
#tracks .track:nth-child(8){ --rowHue: 60;  }  /* Snare2→ yellow    */

.track .label{
  display:flex; align-items:center; gap:8px; color:#dfe6ec;
  position:sticky; left:0; z-index:2;
  background: hsla(var(--rowHue), 70%, 14%, calc(var(--rowBgA) + 0.06));
  box-shadow: inset -1px 0 rgba(255,255,255,0.08);
}

/* Key badge */
.kbd{
  width:32px; height:32px; border-radius:999px; background:#1c1f25; display:inline-flex;
  align-items:center; justify-content:center; font-weight:800; font-size:12px; color:#cbd5dc;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.4);
  opacity:.92;
}

/* Cells container: one long row, width controlled by --stepW */
.cells{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--stepW);
  gap:6px;
}

/* Individual step cells */
.cell{
  height:36px; border-radius:10px; border:1px solid #2a2d33; background:linear-gradient(180deg,#14161a,#121316);
  cursor:pointer; transition:.12s transform,.12s background,.12s border,.08s box-shadow,.08s outline;
  position:relative; isolation:isolate;
}
.cell:hover{background:#181b20}

/* Beat & bar guides for long patterns */
.cells .cell:nth-child(4n)    { box-shadow: inset 1px 0 rgba(255,255,255,0.06); }  /* beats */
.cells .cell:nth-child(16n+1) { box-shadow: inset 2px 0 rgba(255,255,255,0.22); }  /* bars */

/* Playhead */
.cell.playing{
  outline:2px solid rgba(255,255,255,.6);
  outline-offset:1px;
  box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .25);
  transform:translateY(-1px);
}

/* ON state: pick up the track hue */
.cells .cell.on{
  background: hsla(var(--rowHue), 80%, 48%, var(--cellOnA));
  border-color: hsla(var(--rowHue), 85%, 60%, 0.85);
  color:#0b0b0c;
}

/* HIT flash */
.cells .cell.on.hit{
  filter: brightness(1.2);
  border-color: var(--ok);
}

/* Keyboard focus */
.cell:focus-visible{outline:2px solid #93eabf; outline-offset:1px}

/* ===== Pads (tinted + high-contrast, matches track hues) ===== */
.pads{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
@media (max-width:720px){
  .pads{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Per-pad hue (keep in sync with track hues) */
.pads .pad               { --padHue: 200; } /* default fallback */
.pads .pad:nth-child(1)  { --padHue: 0;   } /* Kick  → red-ish   */
.pads .pad:nth-child(2)  { --padHue: 40;  } /* Snare → orange    */
.pads .pad:nth-child(3)  { --padHue: 200; } /* Hat   → cyan      */
.pads .pad:nth-child(4)  { --padHue: 280; } /* Bass  → purple    */
.pads .pad:nth-child(5)  { --padHue: 120; } /* Clap  → green     */
.pads .pad:nth-child(6)  { --padHue: 320; } /* Tom L → magenta   */
.pads .pad:nth-child(7)  { --padHue: 180; } /* Tom M → teal      */
.pads .pad:nth-child(8)  { --padHue: 60;  } /* Tom H → yellow    */

.pads .pad{
  height:96px;
  border-radius:16px;
  background:
    linear-gradient(180deg,
      hsla(var(--padHue), 70%, 22%, .55),
      hsla(var(--padHue), 70%, 12%, .35)
    );
  border:1px solid hsla(var(--padHue), 85%, 60%, .55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 28px rgba(0,0,0,.45),
    0 0 0 3px hsla(var(--padHue), 85%, 60%, .14);
  color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer;
  transition:.12s transform,.15s box-shadow,.15s background,.15s border-color;
}
.pads .pad:hover{
  transform:translateY(-1px);
  background:
    linear-gradient(180deg,
      hsla(var(--padHue), 80%, 26%, .62),
      hsla(var(--padHue), 70%, 14%, .42)
    );
  border-color: hsla(var(--padHue), 90%, 65%, .75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 36px rgba(0,0,0,.55),
    0 0 0 4px hsla(var(--padHue), 85%, 60%, .18);
}
.pads .pad:active{ transform:translateY(0) scale(.99); }

/* Text + tiny hue chip */
.pads .pad .title{
  font-weight:800; letter-spacing:.2px;
  position:relative; padding-left:18px;
}
.pads .pad .title::before{
  content:"";
  position:absolute; left:0; top:50%;
  width:10px; height:10px; border-radius:50%;
  transform:translateY(-50%);
  background: hsla(var(--padHue), 90%, 60%, .95);
  box-shadow: 0 0 8px hsla(var(--padHue), 90%, 60%, .45);
}
.pads .pad .sub{ font-size:12px; color:var(--muted); }

/* Focus and “hit” pulse */
.pads .pad:focus-visible{
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 4px hsla(var(--padHue), 85%, 60%, .30),
    0 12px 26px rgba(0,0,0,.5);
}
.pads .pad.pulse{
  border-color: hsla(var(--padHue), 95%, 68%, .9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 16px 42px rgba(0,0,0,.6),
    0 0 0 5px hsla(var(--padHue), 90%, 64%, .22);
}



/* ===== Audio / Mixer ===== */
#audio{margin-top:12px}
#mixer{margin-top:12px}

/* ===== Footer / credit ===== */
footer{margin:14px 0; color:#9aa3a8; font-size:13px; text-align:center}
.hint{color:#9aa3a8; font-size:13px; text-align:center; margin-top:14px}

.site-footer{margin:16px 0; text-align:center; color:var(--muted); font-size:13px}
.site-footer .credit{margin-top:6px; display:inline-flex; align-items:center; gap:6px}
.site-footer .brand{color:var(--accent); font-weight:700; letter-spacing:.2px}
/* inline SVG mark (themeable via color) */
.site-footer .mark{height:14px; width:auto; color:var(--accent); opacity:.95; vertical-align:-2px}

.site-footer a{color:var(--accent); text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* ===== Accessibility & motion ===== */
:focus-visible{outline:2px solid #93eabf; outline-offset:2px; border-radius:8px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

/* ===== METAL THEME (Slipknot-ish) =====
   Add class="theme-metal" on <body> to enable */
.theme-metal{
  --bg:#0a0a0a;
  --panel:#111112;
  --ink:#f4f4f5;
  --muted:#a1a1aa;
  --line:#262626;

  --accent:#ef4444;
  --accent-hi:#f87171;
  --accent-rgb:239 68 68;
}

/* SVG logo as background-image, swap to green on hover/focus */
.brand .logo-sdm{
  width:28px; height:28px; display:block;
  background: center/contain no-repeat url('assets/logo-red.svg'); /* default red */
  transition: filter .15s ease;
}
.brand .logo-sdm:hover,
.brand .logo-sdm:focus-visible{
  background-image: url('assets/logo-green.svg');                 /* hover/focus green */
  filter: drop-shadow(0 0 8px rgb(34 197 94 / .35));             /* subtle green glow */
}

/* Bigger logo (SVG background swap you set up earlier) */
.brand .logo-sdm{
  width: clamp(36px, 5vw, 52px);
  height: clamp(36px, 5vw, 52px);
  display:block;
  background: center/contain no-repeat url('assets/logo-red.svg'); /* default red */
  transition: filter .15s ease;
}
.brand .logo-sdm:hover,
.brand .logo-sdm:focus-visible{
  background-image: url('assets/logo-green.svg'); /* hover green */
  filter: drop-shadow(0 0 8px rgb(34 197 94 / .35));
}

/* Metal wordmark */
.wordmark{
  font-family: "Metal Mania", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(24px, 5.2vw, 44px);
  line-height: 1;
  margin: 0;
  letter-spacing: .5px;
  color: var(--ink);
}

/* Tighten brand spacing a touch for the bigger logo */
.brand{
  display:flex; align-items:center; gap: 12px;
}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;margin:-1px;border:0;padding:0;
  white-space:nowrap; clip-path:inset(50%); clip:rect(0 0 0 0); overflow:hidden;
}

/* === Sequencer alignment & guides (final) === */
:root{
  --stepW: 28px;
  --stepGap: 6px;
}

/* Header step numbers in one scrolling row */
.seq .seq-head .steps{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--stepW);
  column-gap: var(--stepGap);
  align-items:center;
}

/* Cells grid mirrors header */
.cells{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--stepW);
  gap: var(--stepGap);
}

/* Let nth-child rules control all dividers */
.cells .cell.bar{ box-shadow: none !important; }

/* ---- Dividers ---- */
/* Quarters: 1,5,9,13,... (visible) */
.cells .cell:nth-child(4n+1){
  box-shadow: inset 1px 0 rgba(255,255,255,0.55) !important;
}

/* Bars: 1,17,33,... (stronger, overrides quarter) */
.cells .cell:nth-child(16n+1){
  box-shadow: inset 2px 0 rgba(255,255,255,0.95) !important;
}

/* ---- Step numbers ---- */
/* Quarters (1,5,9,13,...) */
.step-num:nth-child(4n+1){
  color: #e5e5e5;
  font-weight: 700;
}

/* Bars (1,17,33,...) */
.step-num:nth-child(16n+1){
  color: var(--ink);
  font-weight: 900;
  font-size: 1.05em;
}

/* ============================= */
/* ===== Instrument Picker ===== */
/* ============================= */

/* Lock background when picker is open (single source of truth) */
body.no-scroll { overflow: hidden; }

/* Root + backdrop */
.sdm-modal.hidden { display: none; }
.sdm-modal { position: fixed; inset: 0; z-index: 1000; }
.sdm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);                   /* darker */
  backdrop-filter: blur(2px) brightness(0.9);    /* subtle glassy dim */
}


/* Panel: themed, capped to viewport so content can scroll */
.sdm-modal__panel {
  position: relative;
  margin: 4vh auto; /* slightly less margin = looks bigger */
  max-width: 960px;
  min-height: 75vh;
  max-height: calc(100dvh - 8vh);

  /* Metal backdrop */
  background: #1a1a1d; /* deep steel grey */
  border: 1px solid #2a2d33;
  color: var(--ink);

  /* subtle red edge glow for “metal” vibe */
  box-shadow: 0 20px 60px rgba(0,0,0,.45),
              0 0 12px rgba(var(--accent-rgb), 0.25);

  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  border-radius: var(--radius);
  overflow: hidden;
}


/* Header/Tabs/Toolbar keep your existing dark chrome */
.sdm-modal__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line);
}
.sdm-modal__close {
  font-size: 28px; line-height: 1; background: transparent; border: 0;
  color:#cbd5dc; cursor: pointer;
}
.sdm-modal__tabs {
  display:flex; gap:8px; padding:10px 16px; border-bottom:1px solid var(--line); flex-wrap: wrap;
}
.sdm-modal__tabs .tab {
  padding:8px 12px; border-radius:999px; border:1px solid #2a2d33;
  background:#121316; color:#dfe6ec; cursor:pointer;
}
.sdm-modal__tabs .tab.active { background:var(--accent); color:#062011; border-color:transparent; }

.sdm-modal__toolbar {
  display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line);
}
.sdm-input {
  flex:1; padding:10px 12px; border:1px solid #2a2d33; border-radius: 10px;
  background:#0b0b0c; color:#dfe6ec;
}
.chips { display:flex; gap:8px; overflow:auto; }
.chips .chip {
  padding:6px 10px; border:1px solid #2a2d33; border-radius:999px;
  background:#0b0b0c; color:#cbd5dc; cursor:pointer; white-space:nowrap;
}
.chips .chip.active { background:#121316; color:#fff; border-color:#353942; }

/* Scrollable content area */
.sdm-modal__content {
  padding: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Card/grid styles (unchanged) */
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; }
@media (max-width: 780px){ .grid { grid-template-columns: repeat(2, 1fr); } }
.card {
  border:1px solid #2a2d33; border-radius:12px; padding:10px;
  display:grid; grid-template-columns: 48px 1fr auto; gap:10px; align-items:center;
  background:#0c0d10;
}
.card .icon {
  width:48px; height:48px; border-radius:10px; background:#17191e;
  display:grid; place-items:center; font-weight:700; color:#cbd5dc;
}
.card .meta { display:flex; flex-direction:column; }
.card .meta .name { font-weight:600; }
.card .meta .tags { font-size:12px; color:#9aa3a8; }
.card .actions { display:flex; gap:8px; }
.card .btn {
  padding:6px 10px; border-radius:8px; border:1px solid #2a2d33;
  background:#0b0b0c; color:#dfe6ec; cursor:pointer;
}
.card .btn.playing { background:#102231; border-color:#1f3a53; }

.empty { text-align:center; color:#9aa3a8; padding:40px 0; }

.sdm-modal__footer {
  display:flex; justify-content:flex-end; gap:12px; padding:12px 16px; border-top:1px solid var(--line);
}
.sdm-btn {
  padding:10px 14px; border-radius:10px; border:1px solid #2a2d33;
  background:#121316; color:#dfe6ec; cursor:pointer;
}
.sdm-btn.primary { background:var(--accent); color:#062011; border-color:transparent; }
.sdm-btn[disabled] { opacity:.5; cursor:not-allowed; }


/* ===== Transport (under the tracks) ===== */
.transport{
  display:flex; gap:10px; align-items:center; justify-content:center;
  padding:10px 12px;
}
.transport .btn{ padding:12px 18px; font-weight:700; }

/* ===== Sound Shaping panel ===== */
#shaper > label{
  display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin-bottom:6px;
}

.param-grid{ display:grid; gap:10px; }
.param-row{
  display:grid; grid-template-columns: 140px 1fr; align-items:center;
  background: linear-gradient(180deg,#0f1216,#0c0f12);
  border:1px solid var(--line); border-radius:12px; padding:8px 10px;
  box-shadow: var(--shadow);
}
.param-label{
  font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em;
}
.param-cells{ display:grid; grid-template-columns: repeat(var(--cols, 8), minmax(0,1fr)); gap:12px; }

.param-cell input[type="range"]{ width:100%; }
.param-readout{ font-size:11px; color:var(--muted); margin-top:4px; text-align:right; }
.param-empty{ height:28px; opacity:.35; border-radius:8px; background:linear-gradient(180deg,#121419,#0d0f12); border:1px dashed rgba(255,255,255,.05); }

#instrumentPicker { position:fixed; inset:0; display:none; }
#instrumentPicker.open { display:block; }
#instrumentPicker .picker-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); }
#instrumentPicker .picker-panel { position:absolute; top:6%; left:50%; transform:translateX(-50%);
  width:min(1000px,94vw); background:#11151b; border:1px solid #27303a; border-radius:12px; padding:16px; }
#pickerGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:12px; }
.picker-card { background:#0f1318; border:1px solid #1f2832; border-radius:10px; padding:12px; }
.picker-card.compact .ctrls, .picker-card.compact .actions { display:none; }
.picker-card .hdr .t { font-weight:600; }
.picker-card .hdr .sub { font-size:12px; opacity:.7; }
.shaper-row { display:grid; grid-template-columns:120px 1fr 60px; gap:8px; align-items:center; margin:6px 0; }
.actions { display:flex; gap:8px; margin-top:12px; justify-content:flex-end; }
.btn.green { background:#1e8f4d; color:#fff; border:0; }

/* Lock background when modal is open */
body.sdm-lock {
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
}

/* Make the picker a fixed, centered overlay */
#instrumentPicker {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;               /* hidden by default */
  align-items: center;         /* center dialog */
  justify-content: center;
}

/* Visible state toggled by JS */
#instrumentPicker.open { display: flex; }

/* Backdrop (you already render .picker-backdrop) */
#instrumentPicker .picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

/* 👉 Define the named shell that scrolls (renamed from .picker-panel) */
#instrumentPicker .picker-dialog {
  position: relative;
  max-height: 90vh;            /* dialog scrolls, not the page */
  width: min(900px, 92vw);
  overflow: auto;
  background: var(--panel, #121212);
  color: var(--ink, #fff);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
}

/* Optional bits if you want sticky header/footer */
#instrumentPicker .picker-header { position: sticky; top: 0; background: inherit; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
#instrumentPicker .picker-grid   { padding: 16px 20px; }
#instrumentPicker .picker-foot   { position: sticky; bottom: 0; background: inherit; padding: 12px 20px; border-top: 1px solid rgba(255,255,255,0.08); }


/* 🔴 Red theme for main action buttons in the picker */
#instrumentPicker .picker-card [data-open],
#instrumentPicker .picker-card [data-act="commit"] {
  background: #c62828;   /* deep red */
  color: #fff;
  border: none;
}

#instrumentPicker .picker-card [data-open]:hover,
#instrumentPicker .picker-card [data-act="commit"]:hover {
  background: #b71c1c;   /* darker red on hover */
}

#instrumentPicker .picker-card [data-open"]:active,
#instrumentPicker .picker-card [data-act="commit"]:active {
  background: #8e0000;   /* pressed state */
}