/* ═══════════════════════════════════════════════════════════════════════════════════════
   STUDIO INSTRUMENTS — one visual family for the Beat Machine, the Audio Lab and the DJ table
   (2026-09-19, Josh: "all the tools look about the same, regular buttons, basic layouts,
   nothing beautiful about them").

   The idea: the instruments are always DARK HARDWARE, sitting in the studio's cream room.
   Real gear is dark — an MPC, a console, a deck — and the pale-grey grids the light palette
   produced had no depth at all. So each instrument carries its own warm green-black palette
   whatever the page theme, with the studio's brand green as the LED colour, amber for accents,
   Fraunces for the nameplate and a true monospace for every readout.

   Loaded after the tools inject their own <style>s, so every rule here carries `html` for
   specificity. Tokens first (the tools already read them), materials second.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Studio Mono"; src: url(/studio/fonts/jetbrains.ttf) format("truetype"); font-weight: 100 800; font-display: swap; }

/* ── THE MEDIA KIT (style audit 2026-09-27: five tools, 18 type sizes on one screen, 25 radii, a different
   button in every tool). One scale that ALL FIVE tools read — the Video Editor, the Audio Lab, My audio, the
   Beat Machine and the DJ table. Tools read these with a fallback (var(--mk-fs-xs, 11px)), so a tool file and
   this sheet can ship in either order.
   - TYPE: 11px is the floor for any word or number someone reads (rulers, chips, lengths, labels included).
   - CONTROLS: 28 (dense toolbar) / 32 (standard) / 44 (any control under a coarse pointer — iPad, phone).
   - ONE primary per view: the solid accent fill. A toggle that is ON is NOT the primary look: it is a lit
     key — accent tint, accent rim, accent text, and an LED dot (.mk-led) where the tool draws one.
   - Hover lightens (never darkens); a primary keeps its fill on hover. Focus is always visible (--mk-focus).
   - Text contrast ≥ 4.5:1 on its own surface; --faint is for lines and disabled glyphs, never words. ── */
:root {
  --mk-fs-2xs: 11px; --mk-fs-xs: 12px; --mk-fs-sm: 13px; --mk-fs-md: 14px; --mk-fs-lg: 16px; --mk-fs-xl: 20px;
  --mk-h-sm: 28px; --mk-h-md: 32px; --mk-h-touch: 44px;
  --mk-r-ctl: 9px; --mk-r-panel: 14px; --mk-r-chassis: 20px; --mk-r-pill: 999px;
  --mk-focus: 0 0 0 2px var(--paper, #0c110f), 0 0 0 4px var(--accent, #2fb894);
  /* the dark surface scale every dark panel maps onto (the instrument palette's own family): well, panel, raised, line, text */
  --mk-d-0: #0a0e0c; --mk-d-1: #0f1412; --mk-d-2: #151b18; --mk-d-3: #1c2420; --mk-d-line: #243029; --mk-d-line2: #31403a;
  --mk-d-ink: #eef3ee; --mk-d-ink2: #c9d3cc; --mk-d-ink3: #9aa6a0;   /* ink3 = 7:1 on d-1: the dimmest TEXT allowed on dark */
}

/* ── the instrument palette: warm green-black, the brand green as light ─────────────── */
html #alBeat, html #alLab, html #alDJ {
  --paper: #0c110f; --paper2: #080b0a; --card: #141a17; --ink: #eef3ee; --soft-ink: #c9d3cc;
  --muted: #8d9a92; --faint: #5c6a63; --line: #243029; --line2: #31403a;
  --accent: #2fb894; --accent-ink: #8ae6c9; --accent-soft: #122b23; --accent-glow: rgba(47,184,148,.28);
  --on-accent: #04110d;   /* text on the mint (design review 2026-09-23) — the page token, pinned like the rest */
  --amber: #e6a94e; --amber-soft: #2a2214; --rose: #e8836c; --rose-soft: #361f18;
  --trough: #0a0d0c; --trough-inset: rgba(0,0,0,.45);
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 40px -18px rgba(0,0,0,.8);
  --mono: "Studio Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp: "Fraunces", Georgia, serif;
  color-scheme: dark;
}

/* ── nameplates: the brand's serif, set like a badge on the chassis ─────────────────── */
html #alBeat .btitle b, html #alDJ .djtitle b {
  font: italic 600 1.02rem/1 var(--disp); letter-spacing: .01em; color: var(--ink);
}
html #alBeat .blogo, html #alDJ .djlogo { color: var(--accent); }

/* ── readouts: a real monospace, tabular, lit ───────────────────────────────────────── */
html #alBeat #bPos, html #alBeat #bBpm, html #alBeat #bSteps, html #alBeat #bChain,
html #alBeat .bhdrt, html #alDJ .djtm, html #alDJ .djrt, html #alDJ .djbe, html #alDJ input[type=number],
html #alLab .altime, html #alLab #alClock, html #alLab .alrul, html #alLab .alrul span {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}

/* ═══ BEAT MACHINE ═══════════════════════════════════════════════════════════════════ */
html #alBeat .bbox {
  background: linear-gradient(180deg, #11171400, #0a0e0c) , var(--paper);
  border: 1px solid #2a3630; border-radius: 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 50px 120px -40px rgba(0,0,0,.9);
}
/* the top strip is brushed metal: a slight sheen, a hard bottom edge */
html #alBeat .bhd {
  background: linear-gradient(180deg, #1b2320, #131a17 60%, #10161370);
  border-bottom: 1px solid #060908; box-shadow: 0 1px 0 #2a3630;
}
/* modules are recessed wells with screened labels */
html #alBeat .bmod {
  background: #0b100e; border: 1px solid #060908; border-radius: 10px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.05);
}
html #alBeat .blbl { color: #9fb0a7; font: 700 var(--mk-fs-2xs, 11px) var(--sans); letter-spacing: .08em; }   /* the kit's floor (style pass 2026-09-27: 8.8 px) */
html #alBeat .bmod select, html #alBeat .bmod input[type=number], html #alBeat .bmod input[type=text] {
  background: #050807; color: var(--ink); border: 1px solid #1c2521; border-radius: 7px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.8);
}
/* the sheets' menus are the same dark wells, with the machine's own chevron (style pass 2026-09-27: on an iPad the row
   sheet's swing and length menus were the system's pale boxes, their words under the arrow) */
html #alBeat .bsted .bsel select {
  -webkit-appearance: none; appearance: none; background: #050807; color: var(--ink); border: 1px solid #1c2521;
  border-radius: 7px; padding: 3px 24px 3px 8px; box-shadow: inset 0 1px 2px rgba(0,0,0,.8);
}
/* one key is the hero: PLAY — a round green pad with a glow ring */
html #alBeat #bPlay {
  background: radial-gradient(circle at 40% 32%, #59d9b4, #1f9c7a 55%, #157a5f);
  border: 1px solid #0c4a3a; color: var(--on-accent);
  box-shadow: 0 0 0 4px #0b100e, 0 0 0 5px #2a3630, 0 0 22px -2px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
html #alBeat .bbtn {
  background: linear-gradient(180deg, #202a25, #161d1a); color: var(--soft-ink);
  border: 1px solid #0a0e0c; border-bottom-width: 2px; border-radius: var(--mk-r-ctl, 9px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
html #alBeat .bbtn.bmini { border-radius: var(--mk-r-ctl, 9px); }   /* one key shape: the dense keys were 999 px pills */
html #alBeat .bbtn:hover { color: var(--ink); background: linear-gradient(180deg, #27322c, #1a221e); }
html #alBeat .bbtn:disabled:hover { color: var(--soft-ink); background: linear-gradient(180deg, #202a25, #161d1a); }
/* ON IS A LIT KEY, NOT THE PRIMARY (style pass 2026-09-27, the media kit): a toggle that is on — a pattern, the grid, the
   swing's 8ths, song, Follow, a sheet's tab — wears the accent's tint, rim and ink; the solid green is PLAY's alone */
html #alBeat .bbtn.on, html #alBeat .bmod .bbtn.on, html #alBeat .bsted .bbtn.on, html #alBeat .bpager .bbtn.on,
html #alBeat .bchop .bbtn.on, html #alBeat #bSong.on {
  background: linear-gradient(180deg, #173a30, #112c24); color: var(--accent-ink); border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(47,184,148,.3), 0 0 12px -4px var(--accent-glow);
}
/* Apply is the way out, not a second primary: the accent's rim and ink on the key's own face */
html #alBeat .bbtn.pri {
  background: linear-gradient(180deg, #202a25, #161d1a); color: var(--accent-ink); border-color: var(--accent);
  font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
html #alBeat .bbtn.pri:hover { background: linear-gradient(180deg, #27322c, #1a221e); color: #b5f2de; }
/* …the chop sheet is a view of its own, without PLAY: there "→ pads" is the one primary */
html #alBeat .bchop .bbtn.pri:not(:disabled) {
  background: linear-gradient(180deg, #36c9a2, #1f9c7a); color: var(--on-accent); border-color: #0c4a3a;
  box-shadow: 0 0 18px -2px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
html #alBeat .btb { color: var(--muted); }
html #alBeat .btb.on, html #alBeat .bmu.on, html #alBeat .bso.on { color: var(--amber); }

/* the grid is a black panel; each step is a key with a lens; a placed hit is a green LED,
   an accent an amber one; the playing column is a soft white bar */
html #alBeat #bGrid { background: #070a09; border: 1px solid #1a221e; border-radius: 14px; box-shadow: inset 0 2px 8px rgba(0,0,0,.8); }
html #alBeat .bbeat { background: transparent; }
html #alBeat .bbeat.bbar1 { box-shadow: inset 2px 0 0 #1f2a25; }
html #alBeat .bstep {
  background: linear-gradient(180deg, #1c2521, #131a17); border: 1px solid #050807;
  border-bottom: 3px solid #030504; border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
html #alBeat .bstep.q { background: linear-gradient(180deg, #232e29, #18201c); }
html #alBeat .bstep:hover { background: linear-gradient(180deg, #27332d, #1a221e); }
html #alBeat .bstep .bfl {
  position: absolute; inset: 22% 26%; border-radius: 999px;
  background: radial-gradient(circle at 45% 35%, #a6f5df, #2fb894 55%, #1a8a6b);
  box-shadow: 0 0 10px 2px rgba(47,184,148,.55), 0 0 26px 6px rgba(47,184,148,.25);
}
html #alBeat .bstep.acc .bfl {
  background: radial-gradient(circle at 45% 35%, #ffe4a8, #e6a94e 55%, #b57b22);
  box-shadow: 0 0 10px 2px rgba(230,169,78,.6), 0 0 28px 6px rgba(230,169,78,.28);
}
html #alBeat .bstep.on, html #alBeat .bstep.acc { border-color: #0a0e0c; background: linear-gradient(180deg, #202b26, #141b18); }
html #alBeat .bstep.now { outline: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 0 12px rgba(255,255,255,.18); }
html #alBeat .brow.bhdr .bhdrt { color: #8d9a92; }   /* the ruler reads: 4.5:1 on the grid (it was #6f7f77, 4.4) */
html #alBeat .bnmt { font-weight: 700; color: var(--ink); }
html #alBeat .bft { color: var(--muted); border-top: 1px solid #1a221e; }
html #alBeat .bsted { background: #0e1411; border-color: #2a3630; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); }

/* tap mode: rubber pads on the panel — four across, big enough to drum on, a soft rim light,
   the key letter screened in the corner, a green flash when they are hit */
html #alBeat .bpads { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 4px 2px; }
html #alBeat .bpadw { display: flex; flex-direction: column; gap: 8px; }
html #alBeat .bpad {
  aspect-ratio: auto; height: clamp(96px, 17vh, 150px); min-height: 0; border-radius: 14px; border: 1px solid #050807; border-bottom: 4px solid #030504;
  background: radial-gradient(120% 90% at 50% 20%, #26312c, #151c19 60%, #0f1512);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -10px 24px rgba(0,0,0,.35), 0 8px 18px -10px rgba(0,0,0,.8);
  color: var(--ink); transition: transform .06s ease, box-shadow .12s ease, background .12s ease;
}
html #alBeat .bpad .pk { font: 700 var(--mk-fs-2xs, 11px) var(--mono); letter-spacing: .1em; color: #8d9a92; text-transform: uppercase; }
html #alBeat .bpad .pnm { font: 700 .92rem var(--sans); letter-spacing: -.01em; }
html #alBeat .bpad .ptv { font: 700 var(--mk-fs-2xs, 11px) var(--mono); color: var(--amber); }
html #alBeat .bpad:hover { background: radial-gradient(120% 90% at 50% 20%, #2c3933, #1a221e 60%, #121815); }
html #alBeat .bpad:active, html #alBeat .bpad.hitfx {
  transform: translateY(3px); border-bottom-width: 1px;
  background: radial-gradient(120% 90% at 50% 30%, #63e2be, #2fb894 55%, #1b7f62);
  color: var(--on-accent); box-shadow: 0 0 26px -2px rgba(47,184,148,.7), inset 0 1px 0 rgba(255,255,255,.35);
}
html #alBeat .bpad:active .pk, html #alBeat .bpad.hitfx .pk { color: #064a38; }
html #alBeat .bpad.bpadd { background: transparent; border: 2px dashed #2a3630; box-shadow: none; color: #8d9a92; min-height: clamp(96px, 17vh, 150px); }
html #alBeat .bpad.bpadd:hover { border-color: #2fb894; color: var(--accent-ink); background: rgba(47,184,148,.06); transform: none; }
html #alBeat .bpctl { background: #0b100e; border: 1px solid #060908; border-radius: 9px; padding: 4px 8px; box-shadow: inset 0 1px 3px rgba(0,0,0,.7); }
html #alBeat .bclock { background: #070a09; border: 1px solid #1a221e; border-radius: 12px; padding: 8px 10px; box-shadow: inset 0 2px 8px rgba(0,0,0,.8); }
html #alBeat .bclock .bstep.mini { height: 10px; min-width: 0; border-radius: 4px; border-bottom-width: 1px; }
html #alBeat .bclock .bstep.mini.now { background: linear-gradient(180deg, #63e2be, #2fb894); box-shadow: 0 0 10px rgba(47,184,148,.7); }

/* ═══ AUDIO LAB ══════════════════════════════════════════════════════════════════════ */
html #alLab { background: var(--paper); }
/* the top strip is the console's meter bridge; second row tools are quiet until touched */
html #alLab .alhd {
  background: linear-gradient(180deg, #171e1b, #10161370); border-bottom: 1px solid #060908; box-shadow: 0 1px 0 #2a3630;
}
html #alLab .altools .albtn:not(.pri):not(.on):not([aria-pressed="true"]) {   /* a pressed toggle (Mixer) keeps its pressed look (2026-09-23) */
  background: transparent; border-color: transparent; color: var(--soft-ink); box-shadow: none;
}
html #alLab .altools .albtn:not(.pri):not(.on):not([aria-pressed="true"]):hover { background: var(--mk-d-3, #1c2420); border-color: var(--mk-d-line2, #31403a); color: var(--ink); }
/* THE ONE PRIMARY: Render master is the only solid gradient on the console. It keeps it on hover, a step brighter (the Lab's
   own :hover used to flatten it to the plain accent). The colour under the gradient is its mid-tone, for anything that reads
   the fill without the image. */
html #alLab .albtn.pri {
  background: linear-gradient(180deg, #36c9a2, #1f9c7a); background-color: #2aae8c; color: var(--on-accent); border-color: #0c4a3a;
  box-shadow: 0 0 18px -2px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
html #alLab .albtn.pri:hover { background: linear-gradient(180deg, #45d6ae, #25a986); background-color: #33bb97; color: var(--on-accent); border-color: #0c4a3a; filter: none; }
/* ONE SELECTED LOOK, REFINED BY THE MEDIA KIT (2026-09-27): a key that is ON is a LIT KEY — the accent's tint, an accent rim,
   accent ink and a small LED — and the solid gradient belongs ONLY to the primary. The 2026-09-23 review made on = the Beat's
   solid green key; on the Lab's toolbar that lit four or five green pills (Duck, LUFS, ♩, Mixer, Snap) that out-shouted
   Render master. A pressed toggle (aria-pressed: the Mixer key, the microphone's Level) is the same lit key as Duck and LUFS. */
html #alLab .albtn.on, html #alLab .albtn[aria-pressed="true"] {
  color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(47,184,148,.18);
}
html #alLab .albtn.on:hover, html #alLab .albtn[aria-pressed="true"]:hover { color: var(--ink); border-color: var(--accent); background: #18392e; }
html #alLab .alrail { background: #0f1512; }
html #alLab .altempo.derived { border-style: dashed; color: var(--soft-ink); }   /* a tempo read from a clip, not yet set */
html #alLab .altempo input { width: 52px; font: inherit; font-family: var(--mono); background: #060908; color: var(--ink); border: 1px solid #2fb894; border-radius: 6px; padding: 1px 4px; }

/* the clip inspector: sections read as panels on the console, digits sit in dark wells */
html #alLab .alinsp { background: #0e1411; border-top: 1px solid #2a3630; color-scheme: dark; }
html #alLab .alinshead { background: #121917; border-bottom: 1px solid #1f2925; }
html #alLab .alinsname b { font-size: var(--mk-fs-md, 14px); letter-spacing: -.01em; }
html #alLab .alinsname small { font-family: var(--mono); font-size: var(--mk-fs-2xs, 11px); letter-spacing: 0; color: var(--mk-d-ink3, #9aa6a0); }
html #alLab .alinsgroup h3 {
  font: 600 var(--mk-fs-xs, 12px) var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted);
  padding-bottom: 6px; border-bottom: 1px solid #1f2925; margin-bottom: 8px;
}
html #alLab .alinsgroup label { color: var(--muted); font-weight: 600; }
html #alLab .alinsgroup input[type=number], html #alLab .alinsgroup select, html #alLab .alinsgroup input[type=text] {
  background: #060908; color: var(--ink); border: 1px solid #1c2521; border-radius: 7px;
  font-family: var(--mono); font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 2px rgba(0,0,0,.8);
}
/* a field in focus draws the kit's ring (it was a 25 % glow, all but invisible on the dark well) */
html #alLab .alinsgroup input[type=number]:focus, html #alLab .alinsgroup select:focus { outline: 0; border-color: #2fb894; box-shadow: var(--mk-focus, 0 0 0 2px #0c110f, 0 0 0 4px #2fb894), inset 0 1px 2px rgba(0,0,0,.8); }
html #alLab .alinsgroup input[type=range] { accent-color: #2fb894; }
html #alLab .alinsgroup input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html #alLab .alinsgroup audio { filter: invert(1) hue-rotate(160deg) saturate(.6) brightness(.9); border-radius: 999px; }
html #alLab .alinsgroup .albtn.on { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }   /* the lit key */
html #alLab .alinsgroup .albtn.danger { color: #f0a293; border-color: #5a2b24; background: transparent; }
html #alLab .alinsgroup .albtn.danger:hover { background: var(--rose-soft); border-color: #7a3a30; }   /* hover lifts, never darkens */
html #alLab .alcliperror { color: #f0a293; font-size: var(--mk-fs-2xs, 11px); }

/* the mixer strips and the master: one material with the rest of the console */
html #alLab .almix, html #alLab .alstrip, html #alLab .almaster { background: #0e1411; border-color: #1f2925; }

/* ═══ DJ TABLE — the nameplate only; the deck already has its own hardware ═══════════ */
html #alDJ .djhd { background: linear-gradient(180deg, #171e1b, #10161370); }