/* daw.css — the desk.
 *
 * Every selector here is namespaced `daw-`. The Wm Hemphill Reel Console pack
 * owns `studio-*` and the platform owns `pw-*`; this sheet touches neither, so
 * the pack keeps working on the fallback page and the desk cannot be restyled
 * out from under itself by a theme change.
 *
 * The palette is the pack's own -- amber on oxidised charcoal, warm walnut --
 * declared here as `--dk-*` rather than read from the pack, so the desk looks
 * the same whatever global theme a visitor has saved.
 *
 * This sheet is only ever parsed by a browser that cleared the capability gate
 * in index.html, so it uses grid, custom properties and modern selectors
 * freely. The legacy floor is served by the fallback page, not by this.
 */

.daw-root {
  --dk-bg:        var(--desk-bg, #14120f);
  --dk-panel:     var(--desk-panel, #1c1916);
  --dk-panel-2:   var(--desk-panel-2, #242019);
  --dk-line:      var(--desk-line, #3a332a);
  --dk-line-hi:   var(--desk-line-hi, #524839);
  --dk-ink:       var(--desk-ink, #d9cfbb);
  --dk-ink-dim:   var(--desk-ink-dim, #8d8271);
  --dk-ink-faint: var(--desk-ink-faint, #5f584c);
  --dk-amber:     var(--desk-accent, #e0a938);
  --dk-amber-hot: var(--desk-accent-hot, #ffc757);
  --dk-red:       var(--desk-record, #c8452e);
  --dk-green:     var(--desk-ok, #6f9b52);
  --dk-blue:      var(--desk-info, #4a7fa5);
  --dk-walnut:    var(--desk-wood, #4a3626);

  --dk-head-w:    188px;
  --dk-ruler-h:   30px;
  --dk-bar-h:     44px;

  position: fixed;
  top: 0; left: 0; right: 0;
  /* Reserved for the site's bottom furniture (player + ticker + launcher),
     measured at runtime -- see watchShellFurniture() in daw.js. */
  bottom: var(--daw-bottom, 0px);
  z-index: 40;
  display: grid;
  grid-template-rows: var(--dk-bar-h) auto 1fr auto;
  /* A grid with no explicit COLUMNS gets one implicit column sized to
     max-content -- so the transport bar's natural width (868px) became the
     width of every row, the root overflowed its own 800px box, and overflow
     hidden clipped the right-hand end of the bar and the cabinet off screen.
     One column, bounded by the root. */
  grid-template-columns: minmax(0, 1fr);
  background: var(--dk-bg);
  color: var(--dk-ink);
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.daw-root *, .daw-root *::before, .daw-root *::after { box-sizing: border-box; }

/* `display: grid` above OUT-SPECIFIES the browser's own [hidden] rule, so the
   hidden attribute silently does nothing on this element. That is what turns a
   failed boot into a desk sitting on top of the fallback page instead of a
   clean degrade. Restate it. */
.daw-root[hidden] { display: none !important; }

/* The desk owns the viewport while it is up. */
html.daw-capable, html.daw-capable body { overflow: hidden; height: 100%; }
html.daw-capable #daw-fallback { display: none; }

/* ------------------------------------------------------------ transport bar */

.daw-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  /* Narrow windows scroll the bar rather than compressing the transport into
     unclickable slivers. Nothing in it may shrink. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  background: linear-gradient(#262119, #1b1712);
  border-bottom: 1px solid var(--dk-line);
}

.daw-bar > * { flex: none; }
.daw-bar .daw-spacer { flex: 1 1 auto; min-width: 0; }

.daw-brand {
  font-weight: 700; letter-spacing: .14em; font-size: 11px;
  color: var(--dk-amber); text-transform: uppercase; white-space: nowrap;
}
.daw-brand small { display: block; font-size: 9px; letter-spacing: .1em; color: var(--dk-ink-faint); }

.daw-transport { display: flex; gap: 4px; }

.daw-btn {
  appearance: none;
  min-width: 34px; height: 26px;
  padding: 0 9px;
  background: #2c261e;
  color: var(--dk-ink);
  border: 1px solid var(--dk-line-hi);
  border-radius: 3px;
  font: inherit; font-size: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.daw-btn:hover { background: #38301f; color: var(--dk-amber-hot); }
.daw-btn:focus-visible { outline: 2px solid var(--dk-amber); outline-offset: 1px; }
.daw-btn[aria-pressed="true"] { background: var(--dk-amber); color: #1a1509; border-color: var(--dk-amber-hot); }
.daw-btn--rec[aria-pressed="true"] { background: var(--dk-red); color: #fff; border-color: #e2583c; }
.daw-btn:disabled { opacity: .38; cursor: default; }

/* Readouts are tabular so digits do not dance while the transport rolls. */
.daw-readout {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 2px 10px;
  background: #100e0b;
  border: 1px solid var(--dk-line);
  border-radius: 3px;
  min-width: 108px;
  font-variant-numeric: tabular-nums;
}
.daw-readout b { font-size: 15px; font-weight: 600; color: var(--dk-amber); letter-spacing: .03em; }
.daw-readout span { font-size: 9px; letter-spacing: .1em; color: var(--dk-ink-faint); text-transform: uppercase; }

.daw-field { display: flex; align-items: center; gap: 5px; color: var(--dk-ink-dim); }
.daw-field label { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.daw-field input, .daw-field select {
  width: 62px; height: 24px; padding: 0 6px;
  background: #100e0b; color: var(--dk-ink);
  border: 1px solid var(--dk-line); border-radius: 3px;
  font: inherit; font-variant-numeric: tabular-nums;
}
.daw-field select { width: auto; }
.daw-spacer { flex: 1; }

/* --------------------------------------------------------------- arrangement */

.daw-arrange {
  display: grid;
  grid-template-columns: var(--dk-head-w) 1fr 14px;
  grid-template-rows: minmax(0, 1fr) 14px;
  min-height: 0;
  border-bottom: 1px solid var(--dk-line);
}

.daw-heads { background: var(--dk-panel); border-right: 1px solid var(--dk-line); overflow: hidden; }
.daw-heads-top {
  height: var(--dk-ruler-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  border-bottom: 1px solid var(--dk-line);
  background: var(--dk-panel-2);
  font-size: 9px; letter-spacing: .1em; color: var(--dk-ink-faint); text-transform: uppercase;
}
.daw-heads-list { overflow: hidden; will-change: transform; }

/* The track head. Two rows and a resize grip -- what a lane needs to answer
   without leaving the arrangement. */
.daw-head {
  position: relative;
  border-bottom: 1px solid var(--dk-line);
  border-left: 3px solid var(--strip-color, transparent);
  padding: 4px 6px 4px 7px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  background: var(--dk-panel);
  overflow: hidden;
}
.daw-head[data-selected="true"] { background: #2a241b; }
.daw-head[data-muted="true"] { opacity: .5; }
.daw-head[data-kind="bus"] { background: linear-gradient(90deg, rgba(74,127,165,.10), transparent 60%), var(--dk-panel); }

.daw-head-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.daw-head-chip {
  appearance: none; width: 9px; height: 9px; flex: none; padding: 0;
  border-radius: 2px; border: 1px solid #0009; cursor: pointer;
  background: var(--strip-color, #7a7266);
}
.daw-head-chip:focus-visible { outline: 2px solid var(--dk-amber); outline-offset: 1px; }
.daw-head-name {
  flex: 1; min-width: 0;
  font-style: normal; font-size: 11px; color: var(--dk-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text;
}
.daw-head-name:focus-visible { outline: 2px solid var(--dk-amber); outline-offset: 1px; }
.daw-head-kind {
  font: 700 8px/1.4 ui-monospace, monospace; color: var(--dk-ink-faint);
  border: 1px solid var(--dk-line-hi); border-radius: 2px; padding: 0 3px; flex: none;
}
.daw-head-fx {
  appearance: none; flex: none; padding: 1px 4px;
  background: #191713; color: var(--dk-ink-faint);
  border: 1px solid #322c24; border-radius: 2px;
  font: 700 7.5px/1.5 ui-monospace, monospace; letter-spacing: .05em; cursor: pointer;
}
.daw-head-fx[data-on="true"] { color: var(--dk-amber); border-color: #5a4a28; background: #241f14; }
.daw-head-fx:hover { color: var(--dk-amber); }

.daw-head-ctl { display: flex; align-items: center; gap: 4px; min-width: 0; }
.daw-head-fader { flex: 1; min-width: 24px; height: 13px; accent-color: var(--dk-amber); }
.daw-head-db {
  flex: none; min-width: 26px; text-align: right;
  font: 600 8.5px/1 ui-monospace, monospace; color: var(--dk-ink-dim);
  font-variant-numeric: tabular-nums;
}
.daw-head-meter {
  position: relative; flex: none;
  width: 26px; height: 5px;
  background: #0b0d0a; border: 1px solid #2f3129; overflow: hidden;
}
.daw-head-meter i {
  position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, var(--dk-green) 0 62%, var(--dk-amber) 62% 86%, var(--dk-red) 86%);
  transition: transform 60ms linear;
}
/* Hidden until the lane is tall enough to hold it without crowding. */
.daw-head[style*="height: 3"] .daw-head-ctl,
.daw-head[style*="height: 4"] .daw-head-ctl { display: none; }

.daw-head-grip {
  position: absolute; left: 0; right: 0; bottom: -2px; height: 5px;
  cursor: ns-resize;
}
.daw-head-grip:hover { background: var(--dk-amber); opacity: .5; }

.daw-head-add {
  display: flex; gap: 3px; padding: 6px;
  border-bottom: 1px solid var(--dk-line);
}
.daw-head-add .daw-slot { flex: 1; text-align: center; }

.daw-canvas-wrap { position: relative; min-width: 0; overflow: hidden; background: #0f0d0b; }
.daw-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.daw-canvas-wrap:focus-visible { outline: 2px solid var(--dk-amber); outline-offset: -2px; }

/* --------------------------------------------------------------------- foot */

.daw-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 5px 12px;
  background: var(--dk-panel);
  border-top: 1px solid var(--dk-line);
  font-size: 10px; color: var(--dk-ink-dim);
  min-height: 26px;
}
.daw-status { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daw-status[data-kind="error"] { color: var(--dk-red); }
.daw-status[data-kind="good"]  { color: var(--dk-green); }

.daw-meter {
  display: flex; gap: 2px; align-items: center;
  width: 116px; height: 9px;
  background: #0c0a08; border: 1px solid var(--dk-line); border-radius: 2px;
  padding: 1px; flex: none;
}
.daw-meter i {
  display: block; height: 100%; flex: 1;
  background: linear-gradient(90deg, var(--dk-green) 0 62%, var(--dk-amber) 62% 86%, var(--dk-red) 86% 100%);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 60ms linear;
}

.daw-chip {
  padding: 1px 6px; border-radius: 2px;
  border: 1px solid var(--dk-line-hi); color: var(--dk-ink-faint);
  white-space: nowrap;
}
.daw-chip[data-on="true"] { color: var(--dk-amber); border-color: var(--dk-amber); }

/* Reduced motion: the meter is the only thing that animates, and a level
   meter that does not move is not a meter, so only the easing is dropped. */
@media (prefers-reduced-motion: reduce) {
  .daw-meter i { transition: none; }
}

/* Drop target. The whole desk accepts a file, because aiming at a lane while
   dragging is a miserable gesture. */
.daw-root[data-drag="true"]::after {
  content: "";
  position: absolute; inset: 0;
  border: 2px dashed var(--dk-amber);
  background: rgba(224, 169, 56, 0.06);
  pointer-events: none;
  z-index: 10;
}

/* ====================================================================
   THE WORKSPACE
   One room with several places to stand in it. The deck and the board
   are drawn by the Wm Hemphill pack's own `studio-*` rules -- this
   sheet only reshapes them for a full-height app, because the pack was
   written for a page that scrolls.

   Every rule here is unlayered, and the pack wraps its rules in
   @layer pw-theme.skin. An unlayered rule beats a layered one whatever
   the specificity, so none of this needs !important and none of it
   out-specifies anything.
   ==================================================================== */

.daw-tabs {
  display: flex;
  gap: 1px;
  padding: 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  background: #100e0b;
  border-bottom: 1px solid var(--dk-line);
}
.daw-tab {
  appearance: none;
  flex: none;
  white-space: nowrap;
  padding: 7px 15px 6px;
  background: transparent;
  color: var(--dk-ink-faint);
  border: 0;
  border-bottom: 2px solid transparent;
  font: 600 10px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .13em;
  cursor: pointer;
}
.daw-tab:hover { color: var(--dk-ink); }
.daw-tab:focus-visible { outline: 2px solid var(--dk-amber); outline-offset: -2px; }
.daw-tab[aria-selected="true"] {
  color: var(--dk-amber);
  border-bottom-color: var(--dk-amber);
  background: linear-gradient(rgba(224,169,56,.10), transparent);
}

.daw-viewport { position: relative; min-height: 0; overflow: hidden; }
.daw-view { position: absolute; inset: 0; overflow: auto; }
.daw-view[hidden] { display: none !important; }
.daw-view--arrange { overflow: hidden; display: flex; flex-direction: column; }
.daw-view--arrange .daw-arrange { flex: 1 1 auto; min-height: 0; height: auto; border-bottom: 0; }
.daw-view--arrange .daw-edit-bar { flex: 0 0 auto; }

/* ------------------------------------------------------------ the deck */

/* The cabinet fills the window when there is room, and SCROLLS when there is
   not. A console is a physical object -- it does not reflow.
 *
 * Both axes previously collapsed, because a flex item defaults to
 * min-width/min-height AUTO and so refuses to shrink below its content:
 *
 *   Vertically, the machine's own minimums total 563px. Squeezed into a 356px
 *   box on a short window, the children did not shrink -- they overflowed by
 *   207px and painted OUTSIDE the cabinet, straight over the maker rail, with
 *   the transport off the bottom entirely.
 *
 *   Horizontally, the cabinet's 34px side-wood columns plus the machine's
 *   min-content made the deck 844px wide inside an 800px window, clipping the
 *   POWER lamp off the right edge.
 *
 * So: min-width/min-height 0 all the way down to let the box be authoritative,
 * and a min-height floor equal to the machine's own minimums so the content is
 * never asked to fit somewhere it cannot. Below that the view scrolls. */
.daw-view--deck {
  padding: 10px 12px 18px;
  display: flex; align-items: stretch;
  overflow: auto;
}
.daw-deck {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
  max-width: 1560px; margin: 0 auto;
  /* head 28 + tape 214 + scope 74 + bank 62 + mixer 132 + transport 53
     + gaps 25 + machine padding 12 + cabinet padding 12 + rail 46 */
  min-height: 658px;
}
/* GROW to fill a tall window, but NEVER shrink below the machine's own
   content (flex-shrink 0). Letting it shrink is what allowed the mixer and
   the transport to be drawn outside the cabinet and over the maker rail on a
   short window. Below the content height the VIEW scrolls, which is the
   honest outcome -- a console does not compress. */
.daw-deck .studio-cabinet { flex: 1 0 auto; min-width: 0; }
.daw-deck .studio-machine {
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0;
}
.daw-deck .studio-machine > * { flex-shrink: 0; }
.daw-deck .studio-machine > * { min-width: 0; }
/* The tape deck keeps its proportions; the fader bank takes the slack, so a
   taller window buys fader throw rather than empty cabinet. */
.daw-deck .studio-tape-deck { flex: 0 0 auto; }
.daw-deck .daw-deck-mixer { flex: 1 1 auto; min-height: 132px; }
.daw-deck .studio-transport { flex: 0 0 auto; }


/* The pack sizes reels off the viewport width, which is right on a page and
   too large inside an app that also has to show meters and a transport. */
.daw-deck .studio-reel { width: min(13vw, 168px); min-width: 128px; }
.daw-deck .studio-tape-deck { min-height: 214px; padding-bottom: 30px; }

/* Supply and take-up reels trade radius as the tape moves across. */
.daw-deck .studio-reel[data-reel="left"]  { scale: var(--tape-left, 1); }
.daw-deck .studio-reel[data-reel="right"] { scale: var(--tape-right, .45); }
.daw-deck .studio-reel { transition: scale 220ms linear; }

/* Reel speed follows the transport rather than sitting at one fixed rate. */
.daw-deck[data-transport="play"] .studio-reel,
.daw-deck[data-transport="record"] .studio-reel { animation-duration: 2.1s; }
.daw-deck[data-transport="stop"] .studio-reel { animation: none; }

.daw-deck .daw-bank { grid-template-columns: repeat(8, 1fr) 70px; }
.daw-deck .studio-mini-vu[data-live="false"] { opacity: .32; }
.daw-deck .studio-mini-vu[data-clip="true"] { box-shadow: inset 0 0 7px #784a0c, 0 0 0 2px var(--dk-red); }
.daw-deck .daw-scope { min-height: 74px; margin-top: 5px; cursor: crosshair; }
.daw-deck .daw-scope canvas { height: 74px; }

@media (prefers-reduced-motion: reduce) {
  .daw-deck .studio-reel { transition: none; }
}

/* A short window gets a shorter machine rather than a scrollbar for the sake
   of 100px: the reels come down, the scope halves, and the tape deck gives up
   the padding it only had for looks. Below this the view scrolls, which is the
   honest outcome -- the console is not going to reflow into a column. */
@media (max-height: 780px) {
  .daw-deck { min-height: 496px; }
  .daw-deck .studio-tape-deck { min-height: 148px; padding-bottom: 22px; }
  .daw-deck .studio-reel { width: min(9vw, 112px); min-width: 84px; }
  .daw-deck .daw-scope, .daw-deck .daw-scope canvas { min-height: 40px; height: 40px; }
  .daw-deck .studio-meter-bank { padding: 3px; }
  .daw-deck .studio-mini-vu { min-height: 34px; }
}
@media (max-height: 620px) {
  .daw-deck .daw-scope { display: none; }
}


/* ============================================================ THE CONSOLE
   One strip component at two densities: compact in the deck cabinet, full on
   THE BOARD. The bays SIZE THEMSELVES to the viewport instead of sitting at a
   fixed 62px in the top-left corner of a 1600px screen -- which is what made
   the board read as a toy.
   ==================================================================== */

.daw-view--board { padding: 10px 12px 24px; display: flex; flex-direction: column; gap: 8px; }

.daw-board-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--dk-line);
}
.daw-board-count {
  font: 700 10px/1 ui-monospace, monospace; letter-spacing: .13em;
  color: var(--dk-ink-faint); margin-right: auto;
}
.daw-btn--sm { min-width: 0; height: 22px; padding: 0 8px; font-size: 9px; letter-spacing: .09em; }

/* The console. Bays are a fraction of the width, floored so they stay usable
   and capped so eight strips do not become eight billboards. */
.daw-mixer, .daw-deck-mixer {
  display: grid;
  grid-template-columns:
    repeat(var(--daw-strips, 8), minmax(84px, 1fr)) minmax(104px, 132px);
  /* ONE row, bounded by the box. Without minmax(0,...) the row sizes to the
     strip's max-content, the strip's own 1fr fader row has nothing definite to
     resolve against so it grows to the range input's intrinsic height, and the
     console ends up 400px taller than its own container with the scribble
     strips clipped off the bottom. */
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  background: linear-gradient(#292a25, #151613);
  border: 2px solid #090a09;
}
.daw-view--board .daw-mixer { flex: 0 0 auto; min-height: 0; }
/* The console is as tall as its channel strip and no taller (2026-09-11):
   stretching it to the window left a void between the tone section and the
   fixed-throw fader. What is left of the view below it is the desk's own
   material, which the pack paints. */

/* FLEX COLUMN, not grid.
   As a grid with a fixed row template the strip depended on every row being
   the height the template assumed. Where it was not -- Safari sized the knob
   captions differently -- rows collided and the PAN and TRIM labels were drawn
   on top of the knobs and the mute/solo buttons. A flex column cannot overlap:
   items are laid end to end and the fader takes whatever is left. */
.daw-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  min-width: 0;
  gap: 3px;
  padding: 5px 4px 4px;
  border-right: 1px solid #4d4a42;
  background: repeating-linear-gradient(90deg, transparent 0 12px, #ffffff05 13px);
}
.daw-strip > * { flex: none; width: 100%; }
.daw-strip .daw-fader-bay { flex: 1 1 auto; min-height: 54px; }
.daw-strip[data-muted="true"] { opacity: .5; }
.daw-strip[data-soloed="true"] { background: linear-gradient(#2e2a1d, #191a15); }
.daw-strip--blank { opacity: .3; }
.daw-strip--blank em { margin-top: auto; }
.daw-strip--blank em { align-self: end; width: 100%; min-height: 14px; background: #1b1c18; }

/* Head: colour chip, bay number, channel width. The chip is the same colour
   the clip carries on the timeline, so a strip and its audio are one thing. */
.daw-strip-head {
  display: flex; align-items: center; gap: 4px;
  width: 100%; padding: 1px 3px;
  background: #0f100e; border: 1px solid #35332c;
  color: #b4a990; font: 700 .5rem/1.5 ui-monospace, monospace;
  cursor: pointer;
}
.daw-strip-head span { flex: 1; text-align: center; }
.daw-strip-head em {
  font-style: normal; font-size: .42rem; color: var(--dk-ink-faint);
  border: 1px solid #3d3a33; padding: 0 2px;
}
.daw-strip-chip {
  width: 8px; height: 8px; flex: none; border-radius: 1px;
  background: var(--strip-color, #7a7266);
  box-shadow: 0 0 0 1px #0009;
}

.daw-strip-route { width: 100%; }
.daw-strip-route select {
  width: 100%; height: 17px; padding: 0 3px;
  background: #100e0b; color: var(--dk-ink-dim);
  border: 1px solid #35332c; border-radius: 2px;
  font: 600 8px/1 ui-monospace, monospace; letter-spacing: .05em;
}

.daw-strip-inserts, .daw-strip-sends, .daw-strip-foot {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
}
.daw-strip-sends, .daw-strip-foot { flex-direction: row; }
.daw-slot {
  appearance: none;
  width: 100%; min-height: 15px; padding: 1px 3px;
  background: #191713; color: var(--dk-ink-faint);
  border: 1px solid #322c24; border-radius: 2px;
  font: 600 7.5px/1.4 ui-monospace, monospace; letter-spacing: .03em;
  cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.daw-slot:hover:not(:disabled) { color: var(--dk-amber); border-color: var(--dk-amber); }
.daw-slot[data-on="true"] { background: #241f14; color: var(--dk-amber); border-color: #5a4a28; }
.daw-slot:disabled { opacity: .3; cursor: default; }
.daw-slot--danger:hover { color: var(--dk-red); border-color: var(--dk-red); }
.daw-slot-more { font: 600 7px/1 ui-monospace, monospace; color: var(--dk-ink-faint); }

.daw-strip-knobs { display: flex; gap: 6px; align-items: flex-start; justify-content: center; }
/* Fixed stack: knob, its name, its value. Each on its own line with its own
   line-height, so nothing can ride up onto the control above it. */
.daw-knob-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px; min-width: 0;
}
/* The knob, drawn here rather than borrowed from the pack -- same brushed cap
   and pointer line, but it cannot be restyled out from under the control. */
.daw-knob {
  width: 25px; height: 25px; flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #848078, #2c2d29 55%, #0e0f0d);
  border: 2px solid #777168;
  box-shadow: 0 2px 3px #000;
  cursor: ns-resize; touch-action: none;
  display: block; position: relative;
}
.daw-knob::before {
  content: ""; position: absolute; left: 50%; top: 2px;
  translate: -50% 0; width: 2px; height: 8px; background: #d5c8aa;
}
.daw-knob--sm { width: 19px; height: 19px; border-color: #5d6141; }
.daw-knob--sm::before { height: 6px; }
.daw-knob:focus-visible { outline: 2px solid var(--dk-amber); outline-offset: 2px; }
.daw-knob-cap {
  display: block; height: 9px; line-height: 9px;
  font: 700 6.5px/9px ui-monospace, monospace; letter-spacing: .07em;
  color: #8d8272; text-decoration: none; white-space: nowrap;
}
.daw-knob-val {
  display: block; height: 10px; line-height: 10px;
  font: 600 7.5px/10px ui-monospace, monospace; font-style: normal;
  color: var(--dk-amber); font-variant-numeric: tabular-nums; white-space: nowrap;
}

.daw-strip-btns { display: flex; gap: 2px; }
.daw-mini {
  appearance: none; width: 20px; height: 17px;
  background: #241f18; color: var(--dk-ink-dim);
  border: 1px solid var(--dk-line-hi); border-radius: 2px;
  font: 700 8px/1 ui-monospace, monospace; cursor: pointer;
}
.daw-mini:hover:not(:disabled) { color: var(--dk-amber); }
.daw-mini:disabled { opacity: .32; cursor: not-allowed; }
.daw-mini[aria-pressed="true"] { background: var(--dk-amber); color: #1a1509; }
.daw-mini--s[aria-pressed="true"] { background: var(--dk-blue); color: #fff; }
.daw-mini--r[aria-pressed="true"] { background: var(--dk-red); color: #fff; }

/* The fader bay grows with the strip, so a taller window is a longer throw --
   which is the whole reason a console is tall. */
.daw-fader-bay {
  position: relative;
  display: flex; align-items: stretch; justify-content: center; gap: 5px;
  width: 100%; min-height: 0;
}
.daw-fader-bay .studio-fader { height: 100%; }
.daw-strip-meter {
  position: relative; width: 9px; flex: none;
  background: #0b0d0a; border: 1px solid #2f3129; overflow: hidden; cursor: pointer;
}
.daw-strip-meter i {
  position: absolute; inset: 0; transform-origin: bottom center; transform: scaleY(0);
  background: linear-gradient(0deg, var(--dk-green) 0 58%, var(--dk-amber) 58% 84%, var(--dk-red) 84% 100%);
  transition: transform 55ms linear;
}
.daw-strip-meter u { position: absolute; left: 0; right: 0; height: 1px; background: #ffdca0; bottom: 0; }
.daw-strip-meter[data-clip="true"] { border-color: var(--dk-red); box-shadow: inset 0 0 5px var(--dk-red); }
.daw-strip-meter--master { width: 13px; }

/* dB and peak-hold are two numbers and must never read as one: "-4.0" next to
   "-8.0" printed as "-4.0-8.0" with a flex gap that did not survive. Explicit
   space, a divider, and each half sized so neither can collapse. */
.daw-strip-readouts {
  display: flex; align-items: baseline; justify-content: center;
  gap: 5px; width: 100%; overflow: hidden;
}
.daw-strip-readouts::before {
  content: ""; order: 1; width: 1px; height: 7px;
  background: #4a4438; flex: none;
}
.daw-strip-db { order: 0; }
.daw-strip-peak { order: 2; }
.daw-strip-db {
  font: 600 9px/1 ui-monospace, monospace; color: var(--dk-ink);
  font-variant-numeric: tabular-nums;
}
.daw-strip-peak {
  font: 600 7.5px/1 ui-monospace, monospace; color: var(--dk-ink-faint);
  font-variant-numeric: tabular-nums;
}
.daw-strip-peak[data-over="true"] { color: var(--dk-red); }

.daw-strip em {
  align-self: end; width: 100%; padding: 2px 1px; overflow: hidden;
  color: #21160c; background: var(--studio-texture-paper), #d2c3a2;
  font: 900 .48rem/1.3 var(--pw-font-body), ui-monospace, monospace;
  text-align: center; white-space: nowrap; text-overflow: ellipsis;
  border-top: 2px solid var(--strip-color, transparent);
  cursor: text;
}

.daw-master {
  display: grid; justify-items: center; gap: 4px;
  padding: 6px 6px 4px;
  background: #0f100e;
  /* The pack lays .studio-master-strip out as repeat(3, 1fr) COLUMNS for its
     three rotary controls. Left alone, the master fader auto-places into a
     column cell, the rows below never apply, and the strip comes out scattered
     and 180px taller than its own bay. One column, stated. */
  grid-template-columns: 1fr;
  grid-template-rows: auto auto minmax(56px, 1fr) auto;
  align-content: stretch;
  align-items: stretch;
  min-height: 0;
}
.daw-master > * { min-width: 0; }
.daw-master--compact { grid-template-rows: auto minmax(56px, 1fr) auto; }
.daw-master-title {
  width: 100%; padding: 1px 0;
  color: #c9b99b; font: 700 .52rem/1.6 ui-monospace, monospace;
  letter-spacing: .12em; text-align: center;
  background: #16170f; border: 1px solid #35332c;
}

@media (prefers-reduced-motion: reduce) { .daw-strip-meter i { transition: none; } }

/* ------------------------------------------------------------ the room */

.daw-view--room { padding: 22px 18px 40px; }
.daw-room-inner { max-width: 720px; margin: 0 auto; display: grid; gap: 16px; }
.daw-room-head { display: flex; gap: 16px; align-items: flex-start; }
.daw-room-mark { width: 62px; height: 62px; flex: none; }
.daw-room-head h1 { margin: 0 0 2px; font: 700 19px/1.1 ui-monospace, monospace; letter-spacing: .1em; color: var(--dk-ink); }
.daw-room-lead { margin: 0 0 6px; font: 600 11px/1 ui-monospace, monospace; letter-spacing: .17em; color: var(--dk-amber); }
.daw-room-head p, .daw-card p { margin: 0 0 8px; font-size: 12px; line-height: 1.6; color: var(--dk-ink-dim); }
.daw-card {
  padding: 14px 16px;
  background: var(--dk-panel);
  border: 1px solid var(--dk-line);
  border-left: 3px solid var(--dk-amber);
}
.daw-card h2 {
  margin: 0 0 7px;
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: .13em; text-transform: uppercase; color: var(--dk-ink);
}
.daw-card strong { color: var(--dk-ink); }
.daw-note { font-size: 11px !important; color: var(--dk-ink-faint) !important; font-style: italic; }
.daw-link {
  display: inline-block; padding: 6px 12px;
  background: var(--dk-amber); color: #1a1509;
  font: 700 10px/1 ui-monospace, monospace; letter-spacing: .1em;
  text-decoration: none; border-radius: 2px;
}
.daw-link:hover { background: var(--dk-amber-hot); }
.daw-view--room .studio-maker-rail { margin-top: 6px; }

/* ------------------------------------------------------------- THE FADER
   A div, not an <input type="range">.
   Styled vertically, a native range renders as a machined slot and a weighted
   cap in Chrome and as a large white pill on an accent-coloured track in
   Safari -- same markup, same CSS. Everything a native input gave us free is
   written out in ui/fader.js instead: role=slider, arrows, PageUp/Down,
   Home/End, pointer capture, focus. In exchange the console is the same
   console in every browser.
   ==================================================================== */

.daw-fader {
  position: relative;
  width: 26px;
  /* The bay is a flex ROW (fader beside meter), so `flex: 1` here grew the
     fader SIDEWAYS to 92px instead of giving it height. It takes its height
     from the bay stretching, not from growing. */
  flex: none;
  align-self: stretch;
  min-height: 54px;
  cursor: ns-resize;
  touch-action: none;
  --cap-h: 15px;
}
.daw-fader:focus-visible { outline: 2px solid var(--dk-amber); outline-offset: 2px; }
.daw-fader[data-dragging="true"] { cursor: grabbing; }

/* The slot: a machined channel with a highlight down one side. */
.daw-fader-slot {
  position: absolute; left: 50%; translate: -50% 0;
  top: 0; bottom: 0; width: 6px;
  background: linear-gradient(90deg, #080907, #1e201b 45%, #080907);
  border: 1px solid #3d3a33; border-radius: 3px;
  box-shadow: inset 0 0 4px #000;
}
/* Travelled portion, so the throw reads at a glance from across the room. */
.daw-fader-fill {
  position: absolute; left: 50%; translate: -50% 0; width: 2px;
  bottom: calc(var(--cap-h) / 2);
  height: calc((100% - var(--cap-h)) * var(--fader-pos, 0));
  background: var(--strip-color, var(--dk-amber));
  opacity: .5;
}
/* Unity. A hand goes here first. */
.daw-fader-unity {
  position: absolute; left: 1px; right: 1px; height: 1px;
  bottom: calc(var(--cap-h) / 2 + (100% - var(--cap-h)) * var(--fader-unity, 0));
  background: #6b6355;
}
/* The cap: wider than the slot, a grip line across it, a lip that catches
   light -- what makes it read as something you can take hold of. */
.daw-fader-cap {
  position: absolute; left: 0; right: 0;
  height: var(--cap-h);
  bottom: calc((100% - var(--cap-h)) * var(--fader-pos, 0));
  border-radius: 2px;
  background: linear-gradient(180deg, #ded0b0 0 42%, #6f6753 43% 57%, #cbbd9c 58% 100%);
  border: 1px solid #10110f;
  box-shadow: 0 2px 4px #000c, inset 0 1px #fff6;
}
.daw-fader-cap s {
  position: absolute; left: 3px; right: 3px; top: 50%; height: 1px;
  translate: 0 -50%; background: #3a352b; text-decoration: none;
}
.daw-fader[data-unity="true"] .daw-fader-cap { box-shadow: 0 2px 4px #000c, inset 0 1px #fff6, 0 0 0 1px var(--dk-amber); }
.daw-fader[data-dragging="true"] .daw-fader-cap { background: linear-gradient(180deg, #f0e2c2 0 42%, #7d7460 43% 57%, #ddcfae 58% 100%); }

.daw-fader-bay--master .daw-fader { width: 30px; --cap-h: 17px; }
/* The bay must stretch its children, or the fader has nothing to be tall in. */
.daw-fader-bay { align-items: stretch; }

/* -------------------------------------------------------------- the rack */

.daw-view--rack { padding: 12px 14px 30px; }
.daw-rack-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--dk-line);
}
.daw-rack-head label {
  font: 700 9px/1 ui-monospace, monospace; letter-spacing: .12em; color: var(--dk-ink-faint);
}
.daw-rack-target {
  height: 25px; padding: 0 8px;
  background: #100e0b; color: var(--dk-ink);
  border: 1px solid var(--dk-line); border-radius: 3px;
  font: inherit; font-size: 11px;
}

/* Four columns, left to right, in signal order. They stay in that order at
   every width -- reflowing them would put reverb before the denoiser. */
.daw-rack-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 10px;
  overflow-x: auto;
}
.daw-rack-stage {
  background: var(--dk-panel);
  border: 1px solid var(--dk-line);
  border-top: 2px solid var(--dk-amber);
  padding: 9px;
}
.daw-rack-stage h3 {
  margin: 0 0 3px;
  font: 700 10px/1 ui-monospace, monospace;
  letter-spacing: .16em; color: var(--dk-amber);
}
.daw-rack-stage .daw-note { margin: 0 0 9px; font-size: 10px; line-height: 1.4; }

.daw-dev {
  padding: 7px 8px;
  margin-bottom: 7px;
  background: #191713;
  border: 1px solid #322c24;
  border-left: 3px solid #3a332a;
}
.daw-dev[data-on="true"] { border-left-color: var(--dk-amber); background: #201c15; }
.daw-dev[data-where="server"] { opacity: .62; }
.daw-dev-top { display: flex; align-items: center; gap: 7px; }
.daw-dev-top b { font-size: 11px; color: var(--dk-ink); flex: 1; }
.daw-dev-sw {
  appearance: none;
  min-width: 34px; padding: 2px 5px;
  background: #24201a; color: var(--dk-ink-faint);
  border: 1px solid var(--dk-line-hi); border-radius: 2px;
  font: 700 8px/1.3 ui-monospace, monospace; letter-spacing: .08em;
  cursor: pointer;
}
.daw-dev-sw[aria-pressed="true"] { background: var(--dk-amber); color: #1a1509; border-color: var(--dk-amber-hot); }
.daw-dev-sw:focus-visible { outline: 2px solid var(--dk-amber); outline-offset: 1px; }
.daw-dev-tag {
  font: 700 7px/1 ui-monospace, monospace; letter-spacing: .09em;
  color: var(--dk-blue); border: 1px solid var(--dk-blue);
  padding: 2px 4px; border-radius: 2px; white-space: nowrap;
}
.daw-dev-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.daw-dev-knob { flex: none; }
.daw-dev-knob .daw-knob { width: 34px; height: 34px; }
.daw-dev-knob .daw-knob[aria-disabled="true"] { opacity: .35; cursor: default; }
.daw-dev-pre { display: flex; gap: 4px; }
.daw-dev-pre-btn {
  appearance: none; min-width: 34px; padding: 4px 6px;
  background: #24201a; color: var(--dk-ink-dim);
  border: 1px solid var(--dk-line-hi); border-radius: 2px;
  font: 700 8px/1.3 ui-monospace, monospace; letter-spacing: .08em; cursor: pointer;
  box-shadow: inset 0 1px #ffffff14, 0 1px 0 #000;
}
.daw-dev-pre-btn[aria-pressed="true"] { background: var(--dk-amber); color: #1a1509; border-color: var(--dk-amber-hot); }
.daw-dev-pre-btn:disabled { opacity: .35; cursor: default; }
.daw-dev-pre-btn:focus-visible { outline: 2px solid var(--dk-amber); outline-offset: 1px; }
.daw-dev-note {
  margin: 5px 0 0;
  font-size: 9.5px; line-height: 1.45; color: var(--dk-ink-faint);
}

/* ------------------------------------------------------------- the carts */

.daw-view--carts { padding: 12px 14px 30px; }
.daw-cart-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.daw-cart { min-height: 118px; }
/* A cart pad is a physical thing: a chunky cap with a label stuck on it, and
   it lights while it is playing. */
.daw-cart {
  position: relative;
  display: grid; align-content: space-between;
  min-height: 96px; padding: 10px;
  background: linear-gradient(#2c2820, #17150f);
  border: 1px solid #4b4438;
  border-bottom: 4px solid #0a0b09;
  box-shadow: inset 0 1px #ffffff14;
  cursor: pointer;
}
.daw-cart:hover { background: linear-gradient(#37311f, #1d1a12); }
.daw-cart:focus-visible { outline: 2px solid var(--dk-amber); outline-offset: 2px; }
.daw-cart:active { translate: 0 2px; border-bottom-width: 2px; }
.daw-cart b {
  font: 700 12px/1.2 ui-monospace, monospace;
  letter-spacing: .06em; color: var(--dk-ink);
}
.daw-cart u {
  display: block; height: 3px; margin: 7px 0;
  background: #0d0f0c; border: 1px solid #34322b;
}
.daw-cart[data-firing="true"] { border-color: var(--dk-amber); }
.daw-cart[data-firing="true"] u { background: var(--dk-amber); box-shadow: 0 0 8px var(--dk-amber); }
.daw-cart-drop {
  appearance: none;
  padding: 3px 6px;
  background: #1b1912; color: var(--dk-ink-faint);
  border: 1px solid var(--dk-line-hi); border-radius: 2px;
  font: 700 8px/1.3 ui-monospace, monospace; letter-spacing: .08em;
  cursor: pointer; justify-self: start;
}
.daw-cart-drop:hover { color: var(--dk-amber); border-color: var(--dk-amber); }
.daw-view--carts .daw-note { margin: 0; font-style: italic; }

/* A control that is not finished should look unavailable, not merely inert. */
.daw-deck .studio-transport button[disabled] { opacity: .38; cursor: not-allowed; }
.daw-deck .studio-transport button[disabled]:active { translate: none; }

/* ------------------------------------------- the staff pill, kept off the bar
   adminnav.js mounts its launcher position:fixed at top-left with z-index
   2147483300, so a page cannot see it coming -- it was sitting straight on top
   of the THE STUDIO wordmark. It publishes a documented contract for exactly
   this, and any bar that wants the protection reads the same two tokens:

       <html data-pw-staffpill style="--pw-staffpill-w: 31px">

   98px on the desktop, 31px under 700px where it shrinks to its key dot, and
   re-measured on resize. The public never get a launcher, so they never get
   the padding. */
html[data-pw-staffpill] .daw-bar {
  padding-left: calc(var(--pw-staffpill-w, 98px) + 1.1rem);
}

/* The console's own surfaces, now that the strips no longer wear the pack's
   classes. Same materials, drawn by the component that owns them. */
.daw-mixer, .daw-deck-mixer {
  color: var(--dk-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.daw-strip em {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: .02em;
}
.daw-master-title { font-family: ui-monospace, Menlo, monospace; }

/* -------------------------------------------------------- the edit bar */
.daw-edit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 8px;
  border-bottom: 1px solid var(--dk-line); background: var(--dk-panel); }
.daw-edit-btn { min-width: 0; }
.daw-edit-gap { display: inline-block; width: 1px; height: 18px; margin: 0 4px; background: var(--dk-line-hi); }

/* ------------------------------------------ the rack as rack units (2026-09-10)
   A stage is one shelf: its title plate and note on the first line, then every
   device as a full-width unit -- switch and name on the left, the dial and its
   push buttons in the middle, the note reading across the rest of the panel.
   Dials and buttons, nothing that only makes sense with a mouse. */
.daw-rack-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; }
.daw-rack-stage h3 { position: static; flex: 0 0 auto; margin: 0; }
.daw-rack-stage .daw-note { flex: 1 1 200px; margin: 0; min-width: 0; }
.daw-dev { flex: 0 0 100%; display: flex; align-items: center; gap: 16px; margin: 0; min-height: 58px; padding: 6px 12px; }
.daw-dev-top { flex: 0 0 250px; min-width: 0; }
.daw-dev-top b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daw-dev-row { flex: 0 0 auto; margin: 0; gap: 14px; }
.daw-dev-knob { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.daw-dev-note { flex: 1 1 160px; margin: 0; min-width: 0; text-align: left; }
@media (max-width: 900px) {
  .daw-dev { flex-wrap: wrap; gap: 8px 14px; }
  .daw-dev-top { flex-basis: 100%; }
  .daw-dev-note { flex-basis: 100%; }
}

/* rack faceplate furniture: the family symbol and the stage caption. Undressed
   the symbol is an empty slot; a pack fills it. */
.daw-dev-symbol { display: none; width: 30px; height: 30px; flex: none; background: center/contain no-repeat; }
.daw-dev-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.daw-dev-title b { flex: none; }
.daw-dev-cat { font: 700 7px/1 ui-monospace, monospace; letter-spacing: .14em; color: var(--dk-ink-faint); margin-bottom: 2px; }
.daw-dev[data-fx] .daw-dev-top b { flex: none; }

/* rack unit LED ladder: green to amber to red, lit from the bottom */
.daw-dev-meter { display: flex; gap: 2px; align-items: center; margin-left: auto; padding: 4px 6px; background: #0a0a09; border-radius: 3px; border: 1px solid #000; }
.daw-dev-meter i { display: block; width: 6px; height: 12px; border-radius: 1px; background: #1e2a17; box-shadow: inset 0 0 0 1px #0006; }
.daw-dev-meter i:nth-child(n+9) { background: #2c2612; }
.daw-dev-meter i:nth-child(n+12) { background: #2c1512; }
.daw-dev-meter i[data-on="true"] { background: #6ee04a; box-shadow: 0 0 5px #6ee04a99; }
.daw-dev-meter i:nth-child(n+9)[data-on="true"] { background: #f0c040; box-shadow: 0 0 5px #f0c04099; }
.daw-dev-meter i:nth-child(n+12)[data-on="true"] { background: #f0483a; box-shadow: 0 0 6px #f0483a99; }

/* rack unit instruments: a numeric readout and a moving-coil meter. The undressed
   desk shows the readout and the LED ladder; a pack picks per unit. */
.daw-dev-display { display: inline-flex; align-items: baseline; gap: 3px; padding: 3px 7px; border-radius: 2px; background: #0a0a09; border: 1px solid #000; color: var(--dk-amber); font: 700 14px/1 ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; min-width: 44px; justify-content: flex-end; }
.daw-dev-display small { font-size: 8px; opacity: .7; }
.daw-dev-vu { display: none; position: relative; width: 64px; height: 34px; border-radius: 3px 3px 2px 2px; background: radial-gradient(ellipse at 50% 100%, #e9dcb4, #c9b784 70%, #8c7a52); border: 2px solid #1a1712; overflow: hidden; }
.daw-dev-vu i { position: absolute; left: calc(50% - 1px); bottom: 3px; width: 2px; height: 26px; background: #2a1a0c; transform-origin: 50% 100%; transform: rotate(var(--vu-angle, -38deg)); transition: transform 140ms cubic-bezier(.25,1.45,.45,1); }
.daw-dev-note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---- rack unit face (2026-09-11): the name is the label, printed big and
   bold; the description is not on the face at all -- it scrolls across the
   unit's LED screen after a short pause, and stays a hover away in full. */
.daw-dev-top b { font-size: 14px; font-weight: 800; letter-spacing: .01em; }
.daw-dev-note {
  flex: 1 1 150px; min-width: 120px; max-width: 420px; margin: 0; padding: 0 8px;
  height: 22px; line-height: 22px; overflow: hidden; position: relative;
  background: #0a0a09; border: 1px solid #000; border-radius: 2px;
  color: var(--dk-amber); font: 700 10px/22px ui-monospace, Menlo, monospace; letter-spacing: .08em;
  white-space: nowrap; text-overflow: clip; opacity: 1;
  box-shadow: inset 0 0 8px #000;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.daw-dev-note-text { display: inline-block; padding-left: 100%; will-change: transform;
  animation: daw-ticker var(--ticker-s, 16s) linear var(--ticker-delay, 1.4s) infinite; }
@keyframes daw-ticker { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .daw-dev-note-text { animation: none; padding-left: 0; }
  .daw-dev-note { text-overflow: ellipsis; }
}

/* the skin picker lives in the transport bar on the web */
.daw-skin { display: flex; align-items: center; gap: 5px; color: var(--dk-ink-dim); }
.daw-skin select { width: auto; max-width: 150px; height: 24px; padding: 0 6px; background: #100e0b; color: var(--dk-ink);
  border: 1px solid var(--dk-line-hi); border-radius: 3px; font: inherit; font-size: 11px; }
.daw-root { --dk-clip: var(--desk-clip, #33291b); --dk-clip-sel: var(--desk-clip-sel, #4a3d22); }

/* ---- arrangement scrollbars (2026-09-11): lanes down the right, time along
   the bottom; native overflow boxes over a spacer the size of the workspace. */
.daw-heads { grid-row: 1 / 3; }
.daw-vbar { grid-column: 3; grid-row: 1; overflow-y: scroll; overflow-x: hidden; background: var(--dk-panel); border-left: 1px solid var(--dk-line); scrollbar-width: thin; scrollbar-color: var(--dk-line-hi) var(--dk-panel); }
.daw-hbar { grid-column: 2; grid-row: 2; overflow-x: scroll; overflow-y: hidden; background: var(--dk-panel); border-top: 1px solid var(--dk-line); scrollbar-width: thin; scrollbar-color: var(--dk-line-hi) var(--dk-panel); }
.daw-corner { grid-column: 3; grid-row: 2; background: var(--dk-panel); }
.daw-vbar > i { display: block; width: 1px; }
.daw-hbar > i { display: block; height: 1px; }
.daw-vbar::-webkit-scrollbar, .daw-hbar::-webkit-scrollbar { width: 12px; height: 12px; }
.daw-vbar::-webkit-scrollbar-thumb, .daw-hbar::-webkit-scrollbar-thumb { background: var(--dk-line-hi); border-radius: 6px; border: 3px solid var(--dk-panel); }
.daw-vbar::-webkit-scrollbar-track, .daw-hbar::-webkit-scrollbar-track { background: var(--dk-panel); }
.daw-mac { color: var(--dk-amber); }

/* ---- THE BOARD, sized like the desk it mirrors (2026-09-11): a 60 mm throw,
   not a fader the height of the window; the room above it is the channel's
   tone section -- HPF, HI / MID / LOW -- which are the rack's RUMBLE, AIR,
   PRESENCE and WARMTH on this track, so the strip and the rack agree. */
.daw-strip--full .daw-fader-bay { flex: 0 0 auto; height: 150px; min-height: 150px; }
.daw-strip--full .daw-strip-knobs { padding: 2px 0; }
.daw-strip-eq {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 4px; justify-items: center; align-items: start;
  padding: 5px 4px; margin: 2px 0;
  border-top: 1px solid var(--dk-line); border-bottom: 1px solid var(--dk-line);
}
.daw-strip-eq .daw-mini--hpf { grid-column: 1 / -1; min-width: 44px; font-size: 7.5px; }
.daw-strip-eq .daw-knob-wrap:nth-child(2) { grid-column: 1 / -1; }
.daw-strip-eq .daw-knob { width: 22px; height: 22px; }
.daw-strip-eq .daw-knob-cap { font-size: 6.5px; }
.daw-strip-eq .daw-knob-val { font-size: 8px; }
.daw-mini--hpf[aria-pressed="true"] { background: var(--dk-green); color: #08120a; }

/* ---- the level meter: more colour in the ladder, a glowing peak line that
   leaves a tracer behind it as it drops. The fill glows; the hold line (u) is
   quick; the ghost (b) follows late with a soft tail below it. */
.daw-strip-meter i {
  background: linear-gradient(0deg, #12602c 0, #35c25a 34%, #a6ef3c 52%, #ffd53a 66%, #ff9430 80%, #ff4a2f 92%, #ff2d50 100%);
  box-shadow: inset 0 0 6px #ffffff33, 0 0 8px #6ee04a55;
}
.daw-strip-meter u {
  height: 2px; background: #fff3d0; box-shadow: 0 0 6px 1px #ffd27a, 0 0 12px 2px #ffb04a88;
  transition: bottom 70ms ease-out;
}
.daw-strip-meter b {
  position: absolute; left: 0; right: 0; height: 14px; bottom: 0; translate: 0 100%;
  background: linear-gradient(0deg, transparent, #ffb84a66 45%, #ffe2a0cc);
  filter: blur(.4px); pointer-events: none;
  transition: bottom 420ms cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) { .daw-strip-meter u, .daw-strip-meter b { transition: none; } }
.daw-strip--full .daw-fader-bay { margin-top: auto; }

/* ---- the unit's LED screen, sized like one (2026-09-11): a taller window
   with a bezel, dot-matrix scanlines, the copy in bright segments with a bloom;
   the pack sets the colour. */
.daw-dev-note {
  height: 38px; line-height: 38px; font-size: 14px; letter-spacing: .1em; font-weight: 800;
  padding: 0 10px; border-radius: 3px;
  border: 2px solid #000; box-shadow: inset 0 0 12px #000, inset 0 0 0 1px #ffffff12, 0 1px 0 #ffffff14;
  text-shadow: 0 0 6px currentColor, 0 0 14px currentColor;
}
/* scanlines and glass live on the overlay, so a pack's background colour beneath stays its own */
.daw-dev-note::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #ffffff10, transparent 40%, transparent 70%, #00000040),
    repeating-linear-gradient(0deg, #00000055 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, #00000033 0 1px, transparent 1px 3px); }
.daw-dev-note-text { font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; }

.daw-vbar::-webkit-scrollbar, .daw-hbar::-webkit-scrollbar { width: 14px; height: 14px; }
.daw-vbar::-webkit-scrollbar-thumb, .daw-hbar::-webkit-scrollbar-thumb { background: var(--dk-amber); opacity: .8; border: 3px solid var(--dk-panel); border-radius: 7px; min-height: 28px; }
.daw-vbar, .daw-hbar { scrollbar-color: var(--dk-amber) var(--dk-panel); }

/* ---- THE CARTS as a tool (2026-09-11): named walls, eight pads, each with
   its own audio and behaviour. The pad body fires; the tool row underneath
   loads, records, sets loop / duck / level, and places on the timeline. */
.daw-cart-head { flex-wrap: wrap; gap: 8px; align-items: center; }
.daw-cart-head .daw-field select { width: auto; }
.daw-cart-head .daw-note { flex-basis: 100%; }
.daw-cart { display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; gap: 4px; min-height: 150px; }
.daw-cart[data-loaded="false"] { opacity: .78; border-style: dashed; }
.daw-cart[data-loaded="false"] b { color: var(--dk-ink-faint); }
.daw-cart[data-drop="true"] { outline: 2px dashed var(--dk-amber); outline-offset: -4px; }
.daw-cart[data-mode="loop"][data-firing="true"] u { animation: daw-cart-loop 1.1s ease-in-out infinite; }
@keyframes daw-cart-loop { 50% { opacity: .35; } }
.daw-cart[data-recording="true"] { border-color: var(--dk-red); box-shadow: 0 0 0 1px var(--dk-red), 0 0 14px #c8452e66; }
.daw-cart[data-recording="true"] u { background: var(--dk-red); box-shadow: 0 0 8px var(--dk-red); }
.daw-cart-len { font: 600 8px/1 ui-monospace, monospace; letter-spacing: .08em; color: var(--dk-ink-faint); }
.daw-cart-tools { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; align-self: end; margin-top: 4px; }
.daw-cart-tool {
  appearance: none; padding: 3px 5px; min-width: 30px;
  background: #1b1912; color: var(--dk-ink-dim);
  border: 1px solid var(--dk-line-hi); border-radius: 2px;
  font: 700 7.5px/1.3 ui-monospace, monospace; letter-spacing: .08em; cursor: pointer;
}
.daw-cart-tool:hover { color: var(--dk-amber); border-color: var(--dk-amber); }
.daw-cart-tool[aria-pressed="true"] { background: var(--dk-amber); color: #1a1509; border-color: var(--dk-amber-hot); }
.daw-cart-rec { color: #e8a39a; }
.daw-cart-rec:hover { color: #fff; border-color: var(--dk-red); }
.daw-cart[data-recording="true"] .daw-cart-rec { background: var(--dk-red); color: #fff; }
.daw-cart-trim { display: inline-flex; align-items: center; gap: 3px; }
.daw-cart-trim .daw-knob { width: 18px; height: 18px; }
.daw-cart-trim .daw-knob-val { font-size: 8px; min-width: 18px; }
.daw-cart-drop:disabled { opacity: .35; cursor: default; }
.daw-cart-stopall { color: var(--dk-red); }
/* selection is a ring, never a repaint of the plate (2026-09-11) */
.daw-head[data-selected="true"] { background: var(--dk-panel); box-shadow: inset 0 0 0 2px var(--dk-amber), inset 4px 0 0 var(--dk-amber); }
.daw-vbar, .daw-hbar, .daw-corner { position: relative; z-index: 3; }