/* ./styles.css */
:root {
  color-scheme: dark;
  --bg: #05080d;
  --surface: #0a1119;
  --surface-2: #0d1722;
  --surface-3: #13202d;
  --line: #26394b;
  --line-soft: rgba(70, 96, 120, 0.34);
  --ink: #edf3f7;
  --muted: #8da0b2;
  --dim: #506477;
  --cyan: #32d7ee;
  --pink: #ff3f92;
  --green: #45e394;
  --amber: #ffb82f;
  --danger: #ff6877;
  --radius: 7px;
  --cell-h: 25px;
  --topbar-h: 52px;
  --dock-h: 224px;
  --command-h: 34px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
body { height: 100dvh; overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, [role="gridcell"]:focus-visible { outline: 2px solid var(--pink); outline-offset: -2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell {
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--dock-h) var(--command-h);
  overflow: hidden;
  background: linear-gradient(180deg, #05080d, #070b11 70%);
}

.topbar {
  min-width: 0;
  display: grid;
  /* Status is content-sized, not flex-sized: a 1fr status track could resolve
     narrower than the controls inside it, which squeezed the help control to
     20px at exactly 1280px while the element stayed visible. Brand is the only
     flexible owner because its project name is the only top-bar text with an
     ellipsis contract. */
  grid-template-columns: minmax(200px, 1fr) auto auto auto auto;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: #05090e;
  z-index: 20;
}

.brand-block, .transport-cluster, .tempo-cluster, .scope-switch, .topbar-status {
  min-width: 0;
  display: flex;
  align-items: center;
}

/* #441 already settled which of these three reads loudest: BRKTRK and the
   release marker recede, the project name is the ink. What was left is that
   the name still had nowhere to be: at 1280 it needed 87px, had 58px, and
   rendered "UNTIT..." even for the 11-character default name.

   Three changes together buy it back, none of them a font change - dropping
   the redundant "PLAY:" label frees the scope track, and this block is tighter
   because an 11px gap between items set at 8-15px is wider than the type asks
   for. The difference goes to the only value in the block that ever changes. */
.brand-block { gap: 8px; padding: 0 12px; }
.brand { font-size: 19px; font-weight: 950; letter-spacing: -0.045em; }
.edition { color: var(--cyan); font: 850 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.project-name {
  min-width: 0;
  padding: 4px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: 750 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
}

.transport-cluster { gap: 6px; padding: 5px 8px; border-left: 1px solid var(--line-soft); }
.transport-button, .icon-button, .micro-button, .preview-button, .phone-edit-button, .engine-button, .dock-tabs button, .scope-switch button {
  border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  touch-action: manipulation;
}
.transport-button {
  min-width: 78px;
  height: 40px;
  padding: 0 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.transport-button.play { border-color: rgba(69, 227, 148, 0.45); color: var(--green); }
.transport-button.play[aria-pressed="true"] { background: var(--green); color: #041009; border-color: var(--green); }
.transport-button.stop { color: var(--muted); }

.tempo-cluster { gap: 4px; padding: 5px 7px; border-left: 1px solid var(--line-soft); }
.icon-button { width: 36px; height: 36px; padding: 0; border-radius: 6px; display: grid; place-items: center; font-weight: 900; }
.tempo-button {
  width: 64px;
  height: 42px;
  padding: 3px 0 1px;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.tempo-button span { color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: 0.12em; }
.tempo-button strong { margin-top: 2px; font: 900 19px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }

.scope-switch { gap: 3px; padding: 5px 8px; border-left: 1px solid var(--line-soft); }
.scope-switch > span { margin-right: 3px; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: 0.08em; }
.scope-switch button { height: 34px; padding: 0 8px; border-radius: 5px; background: transparent; color: var(--muted); font-size: 8px; font-weight: 900; }
.scope-switch button[aria-pressed="true"] { border-color: rgba(255, 63, 146, 0.72); background: rgba(255, 63, 146, 0.16); color: var(--pink); }

.topbar-status { justify-content: flex-end; gap: 8px; padding: 5px 12px 5px 8px; border-left: 1px solid var(--line-soft); }
.utility-panels { display: flex; gap: 4px; }
.utility-panels button {
  min-width: 40px; min-height: 34px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: 5px;
  color: var(--muted); background: #0a121b;
  font: 850 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.utility-panels button[aria-pressed="true"] { color: var(--pink); border-color: var(--pink); }
.utility-panel-title { color: var(--pink); font-size: 9px; letter-spacing: .12em; }

@media (min-width: 761px) {
  .app-shell:has(#inspectorPane[data-dock="none"]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--command-h);
  }
  #inspectorPane[data-dock="none"] { display: none; }
}
@media (max-width: 760px) {
  .utility-panels { display: none; }
  .utility-panel-title { display: none; }
}
.engine-button {
  height: 40px;
  min-width: 142px;
  padding: 0 9px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}
.engine-button .status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--dim); }
.engine-button[aria-pressed="true"] .status-dot { background: var(--green); box-shadow: 0 0 10px rgba(69, 227, 148, 0.65); }
.engine-button b, .engine-button small { display: block; }
.engine-button b { color: var(--muted); font-size: 7px; letter-spacing: 0.08em; }
.engine-button small { margin-top: 2px; color: var(--cyan); font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.meter-pair { width: 45px; display: grid; gap: 3px; }
.meter-pair i { height: 4px; overflow: hidden; border-radius: 2px; background: var(--line); }
.meter-pair b { display: block; width: 0; height: 100%; background: var(--green); transition: width 70ms linear; }
/* Signal-backed output safety: a transient float peak above unity is
   potential downstream clipping, not an automatically clipped signal.
   The existing Worklet meter is the authority; no hidden limiter is added. */
.transport-cluster { position: relative; }
.output-overload {
  position: absolute;
  z-index: 2;
  right: 3px;
  top: -3px;
  padding: 2px 3px;
  border: 1px solid var(--danger);
  border-radius: 3px;
  background: #45141d;
  color: #fff2f2;
  font: 900 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  pointer-events: none;
}
.meter-pair[data-output-overload="true"] b { background: var(--danger); }
.topbar-status .meter-pair[data-output-overload="true"] { opacity: 1; }


.workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(365px, 35%) minmax(0, 65%);
  gap: 6px;
  padding: 6px 6px 4px;
  overflow: hidden;
}

.pane, .dock {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.pane { display: grid; grid-template-rows: 38px minmax(0, 1fr); position: relative; }
.pane.active-pane::before {
  content: "";
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--pink);
}
.pane-header {
  min-width: 0;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: #091019;
}
.pane-header h1 { margin: 0; font-size: 13px; letter-spacing: 0.01em; }
.eyebrow { display: block; margin-bottom: 1px; color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: 0.12em; }
.pane-context { color: var(--muted); font: 750 8px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.active-editor-copy { min-width: 0; text-align: right; }
.active-editor-copy span { display: block; color: var(--pink); font: 850 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.active-editor-copy small { display: block; margin-top: 3px; color: var(--muted); font: 700 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }

.tracker-grid {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  user-select: none;
  background: #070d14;
}
.grid-header, .grid-row { display: grid; grid-template-columns: var(--cols); width: 100%; }
.grid-header { position: sticky; top: 0; z-index: 5; background: #0c151f; border-bottom: 1px solid var(--line); }
.grid-header > span {
  height: 23px;
  min-width: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  border-right: 1px solid var(--line-soft);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.07em;
}
.grid-row { min-height: var(--cell-h); position: relative; border-bottom: 1px solid var(--line-soft); }
.grid-row.beat-row { background: rgba(50, 215, 238, 0.025); }
.grid-row.active-row { background: rgba(255, 63, 146, 0.045); }
.grid-row.playing-row { background: rgba(69, 227, 148, 0.085); }
.grid-row.playing-row::before { content: ""; position: absolute; z-index: 4; left: 0; top: 3px; bottom: 3px; width: 3px; background: var(--green); }
.grid-row.queued-row::before { content: ""; position: absolute; z-index: 4; left: 0; top: 3px; bottom: 3px; width: 3px; background: var(--amber); }
.grid-cell {
  min-width: 0;
  min-height: var(--cell-h);
  padding: 0 4px;
  display: grid;
  place-items: center;
  position: relative;
  border: 0;
  border-right: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
  font: 760 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: default;
  touch-action: manipulation;
}
.grid-cell.clickable { cursor: pointer; }
.grid-cell.value { color: var(--cyan); }
.grid-cell.instrument { color: var(--green); }
.grid-cell.fx { color: var(--pink); }
.grid-cell.index { color: #607387; font-weight: 650; }
.grid-cell.empty { color: #4d6072; font-weight: 600; }
/* UX0-07 (#374): stored, but nothing is applying it. A velocity with no note
   to strike is not "unset" - the number is real and editable - so it keeps its
   digits and loses the confidence, rather than reading as live data. */
.grid-cell.inoperative { color: #44566a; font-weight: 600; }
.grid-cell.inoperative.instrument { color: #3f5f57; }

/* UX0-02 (#373): a shared Chain or Phrase is reused on purpose, and editing it
   changes every occurrence. Amber is this surface's word for routing and
   status, which is exactly what this is: not an error, a fact about reach. */
.shared-marker {
  color: var(--amber);
  font-weight: 800;
  letter-spacing: 0.04em;
}
.grid-cell.selected { background: var(--pink); color: #15030b; box-shadow: none; font-weight: 950; }
.grid-cell.linked:not(.selected) { box-shadow: inset 0 0 0 1px var(--cyan); color: var(--cyan); }
.grid-cell.context-selected:not(.selected):not(.linked) { background: rgba(255, 63, 146, 0.06); }
.grid-cell.playing:not(.selected) { color: var(--green); }
.grid-cell .badge { position: absolute; right: 2px; bottom: 1px; color: var(--green); font-size: 6px; }
.grid-cell .badge.condition-badge {
  right: 1px;
  bottom: 1px;
  padding: 1px 2px;
  border: 1px solid rgba(255, 184, 47, .42);
  border-radius: 3px;
  background: rgba(5, 8, 13, .88);
  color: var(--amber);
  font-size: 5.5px;
  font-weight: 900;
  letter-spacing: -.02em;
  cursor: pointer;
  pointer-events: auto;
}

.song-grid { --cols: 34px repeat(8, minmax(34px, 1fr)); overflow-x: hidden; }
.song-grid .grid-header, .song-grid .grid-row { min-width: 0; }
.song-grid .grid-header > span.active-track { color: var(--pink); box-shadow: inset 0 -2px 0 var(--pink); }

.pattern-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(175px, 26%) minmax(0, 74%);
  gap: 5px;
  padding: 5px;
  overflow: hidden;
}
.subpane {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #070d14;
}
.subpane.active-subpane { border-top-color: var(--pink); }
.subpane-header {
  min-width: 0;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: #0a121b;
}
.subpane-header span { display: block; color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: 0.11em; }
.subpane-header strong { display: block; margin-top: 2px; font: 900 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.subpane-actions { display: flex; gap: 3px; }
.micro-button { width: 27px; height: 26px; padding: 0; border-radius: 4px; color: var(--pink); font-size: 16px; line-height: 1; }
.phrase-condition-button {
  width: auto;
  min-width: 42px;
  padding: 0 6px;
  color: var(--muted);
  font: 850 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
}
.phrase-condition-button[data-condition-active="true"] {
  border-color: rgba(255, 184, 47, .6);
  background: rgba(255, 184, 47, .09);
  color: var(--amber);
}
.chain-grid { --cols: 30px minmax(54px, 1fr) minmax(54px, 0.9fr); overflow-x: hidden; }
.phrase-grid { --cols: 30px minmax(64px, 1.15fr) minmax(43px, 0.65fr) minmax(43px, 0.65fr) repeat(3, minmax(48px, 0.78fr)); overflow-x: hidden; }

.dock {
  margin: 0 6px 4px;
  display: grid;
  grid-template-rows: 38px minmax(0, 1fr);
  background: #080e15;
}
.dock-tabs-row {
  min-width: 0;
  padding: 0 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #091019;
}
.dock-tabs { align-self: stretch; display: flex; }
.dock-tabs button {
  min-width: 70px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.dock-tabs button.active { color: var(--pink); border-bottom-color: var(--pink); background: rgba(255, 63, 146, 0.06); }
.selection-breadcrumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.preview-button { height: 27px; padding: 0 9px; border-radius: 4px; color: var(--cyan); font-size: 8px; font-weight: 850; }
.dock-panel { min-height: 0; overflow: hidden; }

.sound-dock { padding: 8px 10px; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
.sound-heading { padding-right: 10px; border-right: 1px solid var(--line); }
.sound-heading h2 { margin: 5px 0 0; font: 900 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.instrument-inspector { min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(85px, 1fr)); gap: 6px; }
.parameter-card { min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 5px; background: #0a121b; }
.parameter-card header { display: flex; justify-content: space-between; gap: 7px; margin-bottom: 9px; }
.parameter-card label { color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: 0.08em; }
.parameter-card output { color: var(--cyan); font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.parameter-card input { width: 100%; accent-color: var(--pink); }

.mixer-section { padding: 7px 8px 8px; }
.mixer { height: 100%; min-height: 0; display: grid; grid-template-columns: repeat(9, minmax(88px, 1fr)); gap: 5px; }
.channel {
  min-width: 0;
  min-height: 0;
  padding: 6px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #0a121b;
}
.channel.active { border-color: var(--pink); box-shadow: inset 0 2px 0 rgba(255, 63, 146, 0.55); }
.channel.master { border-color: rgba(255, 63, 146, 0.45); background: rgba(255, 63, 146, 0.045); }
.channel-header { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.channel-header strong { font: 850 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.channel-header small { color: var(--muted); font: 700 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.channel-meter { height: 5px; overflow: hidden; border-radius: 2px; background: var(--line); }
.channel-meter i { display: block; height: 100%; width: 0; background: var(--cyan); }
.channel.master .channel-meter i { width: 18%; background: var(--pink); }
.channel-controls { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 26px 24px; align-items: center; gap: 4px; }
.channel input[type="range"] { min-width: 0; width: 100%; accent-color: var(--cyan); }
.channel button { width: 26px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); color: var(--muted); font-size: 7px; font-weight: 900; }
.channel button[aria-pressed="true"] { background: var(--amber); color: #160f00; border-color: var(--amber); }
.channel .pan-readout { color: var(--muted); font: 750 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.channel.master .channel-controls { grid-template-columns: 1fr; }
.master-note { color: var(--muted); font: 700 7px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.placeholder-dock { padding: 20px; place-content: center; text-align: center; }
.placeholder-dock strong { color: var(--muted); font-size: 10px; }

.command-bar {
  min-width: 0;
  padding: 0 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  background: #091019;
  z-index: 25;
}
.status-line { color: var(--green); font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.edit-breadcrumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.edit-breadcrumb b { color: var(--pink); }
.key-legend { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 7px; font-weight: 800; }
kbd { min-width: 20px; min-height: 18px; padding: 2px 5px; display: inline-grid; place-items: center; border: 1px solid #3f566a; border-bottom-width: 2px; border-radius: 4px; background: #101923; color: var(--ink); font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.phone-edit-button { height: 26px; padding: 0 9px; border-radius: 4px; color: var(--cyan); font-size: 8px; font-weight: 900; }
.mobile-tabs { display: none; }

.help-dialog {
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.68);
}
.help-dialog::backdrop { background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(6px); }
.help-dialog form { padding: 18px; }
.help-dialog header { display: flex; align-items: center; justify-content: space-between; }
.help-dialog h2 { margin: 2px 0 0; }
.shortcut-grid { margin-top: 18px; display: grid; grid-template-columns: 112px 1fr; gap: 9px 14px; align-items: center; }
.dialog-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }

@media (max-width: 1280px) {
  :root { --cell-h: 21px; --dock-h: 208px; }
  .brand-block { padding-inline: 10px; gap: 7px; }
  .project-name { max-width: 92px; }
  .scope-switch > span { display: none; }
  .scope-switch button { padding-inline: 5px; }
  .engine-button { min-width: 118px; }
  .engine-button b { display: none; }
  .workspace { grid-template-columns: minmax(330px, 38%) minmax(0, 62%); }
  .pattern-workspace { grid-template-columns: minmax(158px, 27%) minmax(0, 73%); }
  .phrase-grid { --cols: 28px minmax(58px, 1.1fr) 38px 38px repeat(3, minmax(41px, 0.72fr)); }
  .mixer { grid-template-columns: repeat(5, minmax(120px, 1fr)); grid-auto-rows: minmax(68px, 1fr); }
  .channel { padding: 5px 6px; gap: 4px; }
  .sound-dock { grid-template-columns: 105px minmax(0, 1fr); }
  .instrument-inspector { grid-template-columns: repeat(3, minmax(85px, 1fr)); }
}

/* Between the phone layout and 1280px the five top-bar owners need more width
   than one row can give them. A single row let the auto-sized scope cluster
   claim its max-content first and starve the status track, so from 1240px down
   the project name clipped, from 1120px down the help control collapsed to an
   11px tap target, and by 768px the scope cluster overlapped status and the bar
   overflowed its own width. Give scope its own row for the whole band instead
   of compacting dynamic state into illegibility: stable controls may shrink,
   playback/scope state may not. */
/* #472: the scope cluster owned a whole second row from 761px all the way to
   1279px, doubling the bar to 98px. Measured: at 1210px - the reported
   viewport - row one has 392px spare once brand is at its 200px floor, and the
   cluster only needs 330px. It was never a width problem there.

   At 1280px the shared panel controls need compact status sizing; with the INST/MIX pair the full owner row genuinely stops fitting below 1120px, even with the shortened labels the
   band below applies, so it keeps its own row rather than pushing a control
   off the viewport. The breakpoint is measured, not guessed: available width
   is W - transport(179) - tempo(159) - status(280) - brand floor(200). */
@media (max-width: 1119px) and (min-width: 761px) {
  :root { --topbar-h: 98px; }
  .topbar {
    grid-template-columns: minmax(120px, 1fr) auto auto auto;
    grid-template-areas:
      "brand transport tempo status"
      "scope scope     scope  scope";
  }
  .brand-block { grid-area: brand; }
  .transport-cluster { grid-area: transport; }
  .tempo-cluster { grid-area: tempo; }
  .topbar-status { grid-area: status; }
  .scope-switch {
    grid-area: scope;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
}

@media (max-width: 900px) and (min-width: 761px) {
  .edition, .meter-pair, .project-name { display: none; }
  .transport-button { min-width: 64px; padding-inline: 8px; }
  .engine-button { min-width: 92px; }
}

@media (max-width: 760px) {
  :root { --topbar-h: 54px; --command-h: 40px; --cell-h: 31px; }
  body { overflow: hidden; }
  .app-shell { grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--command-h) 60px; }
  .topbar {
    grid-template-columns: minmax(116px, 1fr) auto auto;
    grid-template-areas: "brand transport tempo";
    align-items: center;
    padding: max(4px, env(safe-area-inset-top)) 6px 4px;
  }
  .brand-block { grid-area: brand; padding: 0 5px; gap: 8px; }
  .brand { font-size: 18px; }
  .edition { display: inline; }
  .project-name { display: none; }
  .transport-cluster { grid-area: transport; padding: 0; border: 0; gap: 4px; }
  .transport-button { min-width: 42px; width: 42px; height: 38px; padding: 0; }
  .transport-button span:last-child { display: none; }
  .tempo-cluster { grid-area: tempo; padding: 0; border: 0; }
  .tempo-cluster .icon-button { display: none; }
  .tempo-button { width: 52px; height: 40px; }
  .tempo-button strong { font-size: 18px; }
  .scope-switch, .topbar-status { display: none; }

  .workspace { display: block; padding: 5px; overflow: hidden; }
  .pane, .dock { display: none; height: 100%; margin: 0; border-radius: 6px; }
  .workspace[data-view="song"] .song-pane { display: grid; }
  .workspace[data-view="chain"] .pattern-pane,
  .workspace[data-view="phrase"] .pattern-pane,
  .workspace[data-view="pattern"] .pattern-pane { display: grid; }
  .workspace[data-view="sound"] + .dock,
  .workspace[data-view="mix"] + .dock { display: grid; margin: 5px; height: auto; }
  .workspace[data-view="sound"], .workspace[data-view="mix"] { display: none; }

  .pattern-workspace { display: block; padding: 4px; overflow: hidden; }
  .chain-subpane, .phrase-subpane { display: none; height: 100%; }
  .workspace[data-view="chain"] .chain-subpane { display: grid; }
  .workspace[data-view="phrase"] .phrase-subpane,
  .workspace[data-view="pattern"] .phrase-subpane { display: grid; }
  .pattern-header { min-height: 42px; }
  .pattern-header h1 { font-size: 15px; }
  .active-editor-copy span { font-size: 8px; }
  .subpane { border-radius: 5px; }
  .subpane-header { min-height: 42px; }
  .subpane-header strong { font-size: 14px; }
  .chain-grid { --cols: 34px minmax(82px, 1fr) minmax(76px, 0.9fr); }
  .phrase-grid { --cols: 36px minmax(70px, 1.15fr) 50px 48px repeat(3, minmax(48px, 0.75fr)); overflow-x: auto; }
  .grid-header > span { height: 27px; font-size: 8px; }
  .grid-cell { font-size: 11px; }
  .song-grid { --cols: 36px repeat(8, minmax(42px, 1fr)); overflow-x: auto; }
  .song-grid .grid-header, .song-grid .grid-row { min-width: 420px; }

  .dock { grid-template-rows: 42px minmax(0, 1fr); }
  .dock-tabs-row { grid-template-columns: 1fr auto; padding: 0 6px; }
  .dock-tabs { overflow-x: auto; }
  .dock-tabs button { min-width: 58px; padding-inline: 8px; }
  .selection-breadcrumb { display: none; }
  .preview-button { display: none; }
  .sound-dock { display: block; padding: 8px; overflow-y: auto; }
  .sound-heading { padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--line); }
  .instrument-inspector { margin-top: 8px; grid-template-columns: 1fr 1fr; }
  .mixer-section { overflow: auto; }
  .mixer { height: auto; grid-template-columns: 1fr; grid-auto-rows: 72px; }
  .channel:not(.active):not(.master) { opacity: 0.72; }

  .command-bar { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 8px; }
  .status-line, .key-legend { display: none; }
  .edit-breadcrumb { font-size: 8px; }

  .mobile-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: 60px;
    padding: 3px max(3px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(3px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: #091019;
    z-index: 26;
  }
  .mobile-tabs button {
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--muted);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    font-size: 7px;
    font-weight: 850;
  }
  .mobile-tabs button span { font-size: 16px; }
  .mobile-tabs button.active { color: var(--pink); background: rgba(255, 63, 146, 0.13); box-shadow: inset 0 -2px 0 var(--pink); }

}

@media (max-width: 430px) {
  .phrase-grid { --cols: 34px 68px 44px 42px repeat(3, 46px); }
  .grid-cell { padding-inline: 3px; }
}


/* ./p2.css */
/* BRKTRK Web v2 P2 interaction and settings layer. */

.pane-active-label {
  display: none;
  margin-left: auto;
  color: var(--pink);
  font: 850 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
}
.pane-active-label.visible { display: block; }

.subpane { position: relative; }
.subpane.active-subpane::before {
  content: "";
  position: absolute;
  z-index: 7;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pink);
}
.subpane.active-subpane .subpane-header span { color: var(--pink); }

.grid-cell.selected:focus-visible { outline: none; }
.grid-row.active-row { background: rgba(255, 63, 146, 0.075); }
.grid-row.playing-row { background: rgba(69, 227, 148, 0.1); }
.grid-row.playing-row::before {
  width: 3px;
  background: var(--green);
  box-shadow: 0 0 8px rgba(69, 227, 148, 0.34);
}
.grid-row.queued-row::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 4px;
  top: 3px;
  bottom: 3px;
  width: 3px;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(255, 184, 47, 0.3);
}
.grid-row.queued-row:not(.playing-row) { background: rgba(255, 184, 47, 0.055); }
.grid-cell.linked:not(.selected) {
  box-shadow: inset 0 0 0 1px var(--cyan);
  background: rgba(50, 215, 238, 0.035);
}

.state-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--muted);
  font: 750 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.state-legend span { display: inline-flex; align-items: center; gap: 4px; }
.state-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; }
.state-legend .legend-edit::before { background: var(--pink); }
.state-legend .legend-link::before { border: 1px solid var(--cyan); background: transparent; }
.state-legend .legend-play::before { width: 3px; background: var(--green); border-radius: 0; }
.state-legend .legend-queue::before { width: 3px; background: var(--amber); border-radius: 0; }

.settings-button { flex: 0 0 auto; }
.mobile-sound-tabs, .mobile-dock-title { display: none; }

.settings-dialog {
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 26px 100px rgba(0, 0, 0, 0.72);
}
.settings-dialog::backdrop { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(6px); }
.settings-dialog form { max-height: calc(100dvh - 24px); overflow: auto; }
.settings-header {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 58px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: #080e15;
}
.settings-header h2 { margin: 2px 0 0; font-size: 17px; }
.settings-grid { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.settings-section {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #09111a;
}
.settings-section h3 { margin: 0 0 10px; color: var(--pink); font-size: 10px; letter-spacing: 0.08em; }
.settings-about { grid-column: 1 / -1; }
.settings-about p { margin: 6px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.settings-about code { color: var(--cyan); }
.settings-control {
  min-height: 48px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.settings-control:last-of-type { border-bottom: 0; }
.settings-control > span { font-size: 11px; font-weight: 750; }
.settings-control small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.35; }
.settings-control select {
  min-width: 122px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--ink);
}
.settings-control input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pink); }
.storage-status { margin: 8px 0 10px; color: var(--cyan); font: 750 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.settings-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.settings-actions button {
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 8px;
  font-weight: 850;
  cursor: pointer;
}
.settings-actions .danger-action { border-color: rgba(255, 104, 119, 0.5); color: var(--danger); }

body[data-density="comfortable"] { --cell-h: 28px; --dock-h: 240px; }
body.hide-key-hints .key-legend { display: none; }

@media (max-width: 1279px) {
  .state-legend { gap: 5px; }
  .state-legend span { font-size: 0; }
}

@media (max-width: 760px) {
  .topbar {
    grid-template-columns: minmax(112px, 1fr) auto auto 38px;
    grid-template-areas: "brand transport tempo settings";
  }
  .topbar-status {
    display: flex;
    grid-area: settings;
    padding: 0;
    border: 0;
    justify-content: center;
  }
  .topbar-status > :not(.settings-button) { display: none; }
  .settings-button { width: 36px; height: 36px; }

  .pattern-header .eyebrow { display: none; }
  .pattern-header { min-height: 50px; padding: 7px 10px; }
  .pattern-header h1 { font: 900 17px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
  .active-editor-copy span { display: none; }
  .active-editor-copy small { margin: 0; font-size: 7px; line-height: 1.35; }
  .subpane-header { min-height: 34px; justify-content: flex-end; }
  .subpane-header > div:first-child { display: none; }
  .subpane-actions { margin-left: auto; }

  .dock-tabs { display: none; }
  .dock-tabs-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mobile-sound-tabs {
    min-width: 0;
    align-self: stretch;
    display: none;
    align-items: stretch;
  }
  body[data-mobile-workspace="sound"] .mobile-sound-tabs { display: flex; }
  .mobile-sound-tabs button {
    min-width: 62px;
    padding: 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 8px;
    font-weight: 850;
  }
  .mobile-sound-tabs button.active { color: var(--pink); border-bottom-color: var(--pink); background: rgba(255, 63, 146, 0.06); }
  .mobile-dock-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
    font: 850 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: right;
  }
  body[data-mobile-workspace="sound"] .mobile-dock-title { display: none; }

  .state-legend { display: none; }
  .settings-dialog { width: 100vw; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
  .settings-dialog form { max-height: 100dvh; }
  .settings-header { padding-top: max(10px, env(safe-area-inset-top)); }
  .settings-grid { grid-template-columns: 1fr; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .settings-about { grid-column: auto; }
  .settings-actions { grid-template-columns: 1fr; }
  body[data-density="comfortable"] { --cell-h: 34px; }
}


/* ./p3.css */
/* BRKTRK Web v2 P3.0 input and phone note-entry layer. */

.p3-note-dock { display: none; }
.p3-edit-button { display: none; }

@media (max-width: 760px) {
  .p3-edit-button:not([hidden]) {
    display: inline-flex;
    min-width: 78px;
    justify-content: center;
    color: var(--pink);
    border-color: rgba(255, 63, 146, 0.55);
  }

  .p3-note-dock {
    position: fixed;
    z-index: 58;
    left: max(5px, env(safe-area-inset-left));
    right: max(5px, env(safe-area-inset-right));
    bottom: calc(60px + max(4px, env(safe-area-inset-bottom)));
    max-height: min(246px, calc(100dvh - 126px));
    padding: 7px;
    overflow: auto;
    grid-template-rows: auto auto auto;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(7, 13, 20, 0.985);
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(12px);
  }

  .p3-note-dock[aria-hidden="false"] { display: grid; }

  .p3-note-header {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .p3-note-header span {
    display: block;
    color: var(--pink);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.1em;
  }
  .p3-note-header strong {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .p3-note-header button {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: 20px;
  }

  .p3-pitch-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(44px, 1fr));
    gap: 5px;
  }
  .p3-pitch-grid button,
  .p3-note-controls button {
    min-width: 0;
    min-height: 44px;
    padding: 0 5px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--ink);
    font: 850 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    touch-action: manipulation;
  }
  .p3-pitch-grid button.active {
    border-color: var(--pink);
    background: rgba(255, 63, 146, 0.2);
    color: var(--pink);
    box-shadow: inset 0 -2px 0 var(--pink);
  }

  .p3-note-controls {
    display: grid;
    grid-template-columns: repeat(6, minmax(44px, 1fr));
    gap: 5px;
  }
  .p3-note-controls button b {
    display: block;
    margin-top: 2px;
    color: var(--cyan);
    font-size: 11px;
  }
  .p3-note-controls #p3EditStep { grid-column: span 2; }
  .p3-note-controls .special {
    color: var(--amber);
    border-color: rgba(255, 184, 47, 0.45);
  }

}

@media (max-width: 390px) {
  .p3-note-dock { padding: 5px; gap: 4px; }
  .p3-pitch-grid, .p3-note-controls { gap: 4px; }
  .p3-pitch-grid button, .p3-note-controls button { padding-inline: 2px; font-size: 9px; }
}


/* ./p3-0-1.css */
/* BRKTRK Web 0.9.0 — owner-qualified MVP release identity; prior Chain period correction retained. */

.applied-scope-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(255, 196, 74, 0.34);
  border-radius: 4px;
  color: var(--amber);
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

#scopeSwitch .i1-queued-scope {
  border-color: var(--amber);
  box-shadow: inset 0 -2px 0 var(--amber);
}

#mixer[data-routing-state="quarantined"] .channel:not(.master) { opacity: 0.62; }
#mixer[data-routing-state="quarantined"] input:disabled,
#mixer[data-routing-state="quarantined"] button:disabled { cursor: not-allowed; filter: grayscale(1); }
#mixer[data-routing-state="quarantined"] .channel-header small,
#mixer[data-routing-state="quarantined"] .master-note { color: var(--amber); }

.dock.p301-active-workspace { position: relative; border-color: rgba(255, 63, 146, 0.62); }
.dock.p301-active-workspace::before {
  content: "";
  position: absolute;
  z-index: 9;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--pink);
}

.channel.p301-keyboard-focus,
.track-bus-channel.p301-keyboard-focus,
.parameter-card.p301-keyboard-focus {
  outline: 2px solid var(--pink);
  outline-offset: -2px;
  background: rgba(255, 63, 146, 0.08);
}

@media (max-width: 760px) {
  :root { --topbar-h: 68px; }
  .brand-block {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 24px;
    align-content: center;
    align-items: center;
    gap: 2px 7px;
  }
  .brand { grid-column: 1; grid-row: 1; }
  .edition {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .project-name {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    width: 100%;
    min-width: 0;
    height: 24px;
    margin: 0;
    padding: 0 3px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    touch-action: manipulation;
  }
  .project-name:active,
  .project-name:focus-visible {
    border-color: var(--line);
    background: rgba(255, 63, 146, 0.08);
    color: var(--ink);
  }
  .applied-scope-status { display: none; }
}

/* The release marker is a fixed-width ~90px string. Below 480px the brand
   block floor is 112px, so reserving a track for it left the marker itself
   clipped to a "WEB..." stub and, once the marker was given its room, clipped
   the project name to "U." instead. Neither is a top-bar owner the product
   definition asks for, and project identity outranks release identity on a
   phone, so the marker is dropped here and the Settings dialog reports the
   running release instead. */
@media (max-width: 479px) {
  .edition { display: none; }
}


/* ./p35.css */
/* BRKTRK Web P3.5 playback context, follow policy and desktop mixer compliance. */

.p35-policy-button {
  min-width: 72px;
  padding-inline: 8px;
  border-left: 1px solid var(--line) !important;
}

.p35-auto-scope-button { min-width: 86px; }
.p35-view-button {
  margin-left: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--line) !important;
}

.p35-policy-button[aria-pressed="true"] {
  color: var(--green) !important;
  border-bottom-color: var(--green) !important;
  background: rgba(80, 220, 130, 0.08) !important;
}

.p35-view-button[aria-pressed="true"] {
  color: var(--cyan) !important;
  border-bottom-color: var(--cyan) !important;
  background: rgba(50, 215, 238, 0.07) !important;
}

/* A5 owner-acceptance clarity pass.
   Runtime state/ownership remains unchanged; this layer projects the legacy
   internal vocabulary as plain visible language and removes steady-state
   status duplication from the crowded transport row. */
#p35ScopeModeButton {
  font-size: 0 !important;
}
#p35ScopeModeButton::after {
  content: "AUTO";
  font: 900 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

#p35FollowButton {
  min-width: 108px;
  font-size: 0 !important;
}
#p35FollowButton::after {
  content: "FOLLOW PLAYBACK";
  font: 900 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
#p35FollowButton[data-follow-state="held"]::after {
  content: "FOLLOW PAUSED";
}

/* The playing scope is already shown by the green decorated SONG/CHAIN/PHRASE
   button. Keep only transitional information as text: APPLYING / UP NEXT. */
#scopeSwitch .scope-status-token.playing {
  display: none !important;
}
#scopeSwitch .applied-scope-status {
  min-height: 0 !important;
}

/* UX0 #440 top-bar hierarchy. This is deliberately presentation-only and uses
   existing owners: Project becomes the primary context, transport + scope share
   one playback treatment, tempo remains directly editable but secondary, and a
   genuinely playable audio owner collapses to status instead of competing with
   transport. Disabled/error/verifying/no-instrument audio remains a full
   actionable control. Phone keeps the P3.6 compact owner model unchanged. */
@media (min-width: 761px) {
  .brand {
    color: var(--dim);
    font-size: 15px;
    letter-spacing: -0.025em;
  }
  .edition {
    color: var(--dim);
    font-size: 8px;
  }
  .project-name {
    color: var(--ink);
    font-size: 11px;
    font-weight: 850;
  }

  .transport-cluster,
  .scope-switch {
    background: rgba(69, 227, 148, 0.025);
  }

  .tempo-cluster {
    opacity: 0.76;
    transition: opacity 120ms ease;
  }
  .tempo-cluster:hover,
  .tempo-cluster:focus-within {
    opacity: 1;
  }

  /* This is still the only implemented live master output meter. Keep it in
     the header until Mixer owns a real signal meter; reduce its visual weight
     rather than deleting truthful feedback. */
  .topbar-status .meter-pair {
    opacity: 0.58;
  }

  /* Lifecycle ready is not the same thing as playable. audio-lifecycle-ui owns
     the readiness truth on this existing dataset; only the fully playable state
     is allowed to collapse to a compact dot. */
  .engine-button[data-audio-readiness-state="playable"] {
    width: 38px;
    min-width: 38px;
    padding-inline: 0;
    justify-content: center;
  }
  .engine-button[data-audio-readiness-state="playable"] > span:last-child {
    display: none;
  }
  .engine-button[data-audio-readiness-state="playable"] .status-dot {
    width: 9px;
    height: 9px;
  }

  /* Base chrome historically keys its green dot from aria-pressed, which tracks
     lifecycle status only. Override that optimistic colour while readiness is
     still verifying or lacks a playable production Instrument. */
  .engine-button[aria-pressed="true"]:not([data-audio-readiness-state="playable"]) .status-dot {
    background: var(--amber);
    box-shadow: none;
  }

  .topbar-status .icon-button,
  .topbar-status .settings-button {
    color: var(--muted);
  }
}

/* Phone uses the same policy. Keep compatibility HOLD/FIXED text in the DOM for
   the mature state regressions, but do not collapse its rendered font to zero:
   the visible navigation vocabulary is an absolute overlay that does not widen
   the compact control. */
.p36-mobile-policy-button small {
  position: relative;
  font-size: 7px !important;
  color: transparent !important;
}
.p36-mobile-policy-button small::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  content: "FOLLOW";
  color: var(--muted);
  font: 900 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.p36-mobile-policy-button[data-follow-state="hold"] small::after {
  content: "PAUSED";
  color: var(--amber);
}
.p36-mobile-policy-button[data-follow-state="fixed"] small::after {
  content: "MANUAL";
  color: var(--muted);
}

#p36MobileFollow {
  font-size: 0 !important;
}
#p36MobileFollow::after {
  content: "FOLLOW PLAYBACK · ON";
  font-size: 9px;
  font-weight: 900;
}
#p36MobileFollow[data-follow-state="hold"]::after {
  content: "RESUME FOLLOWING";
}
#p36MobileFollow[data-follow-state="fixed"]::after {
  content: "FOLLOW PLAYBACK · OFF";
}

.p35-playback-context {
  min-width: 0;
  margin-left: auto;
  padding: 0 8px;
  overflow: hidden;
  color: var(--green);
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.p35-playback-context[data-match="other"] { color: var(--amber); }

.grid-cell .p35-effective-note {
  margin-left: 5px;
  color: var(--green);
  font-size: 7px;
  font-weight: 900;
}

@media (min-width: 761px) {
  .mixer {
    grid-template-columns: repeat(9, minmax(70px, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
  }

  .channel {
    grid-template-rows: auto minmax(58px, 1fr) minmax(82px, 1.4fr) !important;
    text-align: center;
  }

  .channel-header { justify-content: center; flex-wrap: wrap; }

  .channel-meter {
    width: 7px;
    height: 100%;
    min-height: 54px;
    justify-self: center;
    display: flex;
    align-items: flex-end;
  }

  .channel-meter i {
    width: 100% !important;
    min-height: 0;
  }

  .channel-controls {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(68px, 1fr) 26px auto;
    justify-items: center;
    align-items: center;
  }

  .channel input[type="range"].p35-vertical-fader {
    width: 30px;
    height: 100%;
    min-height: 68px;
    writing-mode: vertical-lr;
    direction: rtl;
    -webkit-appearance: slider-vertical;
    appearance: auto;
  }

  .channel .pan-readout {
    min-width: 44px;
    white-space: nowrap;
  }

  .channel.master .channel-controls { display: grid; place-items: center; }
}

/* #472: between 1040 and 1279 the whole PLAY group now shares row one, so it
   pays only for the words it needs. The visible label is this ::after layer,
   not the element text - shortening textContent alone changes nothing. The
   buttons themselves stay buttons: transport-state-ui paints i1-playing-scope
   / i1-queued-scope / i1-applying-scope on them, which is live-performance
   information a single dropdown could not carry. */
@media (max-width: 1279px) and (min-width: 1000px) {
  .p35-policy-button { min-width: 0; padding-inline: 4px; font-size: 7px; }
  .p35-auto-scope-button { min-width: 0; }
  .p35-view-button { margin-left: 4px; padding-left: 7px; }
  .scope-switch { gap: 2px; padding-inline: 6px; }
  /* Each control sizes to its own label and no further. Without this the flex
     row squeezes them below their text - AUTO measured 12px wide, which is a
     clipped control rather than a compact one. */
  .scope-switch button { flex: none; min-width: 28px; padding-inline: 4px; }
  /* The base rule is an ID selector, so a class cannot release this floor. */
  #p35FollowButton { min-width: 0; }
  #p35ScopeModeButton::after,
  #p35FollowButton::after { font-size: 7px; }
  /* FOLLOW PAUSED still says the whole thing: it is the state that needs
     explaining, and it only shows while following is actually held. */
  #p35FollowButton::after { content: "FOLLOW"; }
}

@media (max-width: 999px) and (min-width: 761px) {
  .p35-policy-button { min-width: 58px; padding-inline: 5px; font-size: 7px; }
  .p35-auto-scope-button { min-width: 76px; }
  .p35-view-button { min-width: 100px; margin-left: 4px; padding-left: 7px; }
  #p35ScopeModeButton::after,
  #p35FollowButton::after { font-size: 7px; }
  .mixer { grid-template-columns: repeat(9, minmax(64px, 1fr)) !important; gap: 4px; }
  .channel { padding: 4px; }
  .channel-header small { display: none; }
  .channel .pan-readout { min-width: 38px; font-size: 6.5px; }
}

@media (max-width: 760px) {
  .p35-playback-context {
    max-width: 58vw;
    padding-inline: 4px;
    font-size: 7px;
  }
}


/* ./phrase-fx-surface.css */
/* BRKTRK Web 0.8.35 — explicit M4.1B Phrase FX command/value surface retained through M4.2B1 corrective. */

/* Desktop/tablet retain the explicit command/value columns. */
.phrase-grid {
  --cols: 30px minmax(64px, 1.15fr) 44px 44px 52px 42px 52px 42px 52px 42px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.phrase-grid .grid-header,
.phrase-grid .grid-row {
  min-width: 500px;
}

.grid-cell.fx-value {
  color: var(--amber);
  font-weight: 800;
}

.grid-cell.fx-value.selected {
  color: #15030b;
}

@media (max-width: 1279px) and (min-width: 761px) {
  .phrase-grid {
    --cols: 28px 60px 40px 40px 48px 40px 48px 40px 48px 40px;
  }
  .phrase-grid .grid-header,
  .phrase-grid .grid-row {
    min-width: 472px;
  }
}

/*
 * Phone contract: command+value is one visual FX slot. The schema remains the
 * same three {command,value} pairs; only the portrait authoring surface is
 * grouped so no horizontal discovery gesture is required.
 */
@media (max-width: 760px) {
  .phrase-grid {
    --cols: 22px minmax(56px, 1.25fr) 34px 34px repeat(3, minmax(52px, .9fr));
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  .phrase-grid .grid-header,
  .phrase-grid .grid-row {
    width: 100%;
    min-width: 0;
  }

  /* Header positions include ROW. Hide VAL1/VAL2/VAL3; values are rendered
     inside the corresponding FX1/FX2/FX3 command cells on phone. */
  .phrase-grid .grid-header > :nth-child(6),
  .phrase-grid .grid-header > :nth-child(8),
  .phrase-grid .grid-header > :nth-child(10),
  .phrase-grid [data-pane="phrase"][data-col="4"],
  .phrase-grid [data-pane="phrase"][data-col="6"],
  .phrase-grid [data-pane="phrase"][data-col="8"] {
    display: none !important;
  }

  .phrase-grid .grid-header > span {
    padding-inline: 1px;
    font-size: 6.5px;
    letter-spacing: 0;
  }

  .phrase-grid .grid-cell {
    padding-inline: 1px;
    font-size: 8.5px;
    touch-action: manipulation;
  }

  .phrase-grid .grid-cell.fx,
  .phrase-grid [data-phone-fx-slot] {
    white-space: nowrap;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 360px) {
  .phrase-grid {
    --cols: 20px minmax(50px, 1.2fr) 31px 31px repeat(3, minmax(48px, .9fr));
  }
  .phrase-grid .grid-header > span { font-size: 6px; }
  .phrase-grid .grid-cell { font-size: 8px; }
}

/* Grouped phone FX editor. */
.m41b-phone-fx-dock { display: none; }

@media (max-width: 760px) {
  .m41b-phone-fx-dock {
    position: fixed;
    z-index: 68;
    left: max(5px, env(safe-area-inset-left));
    right: max(5px, env(safe-area-inset-right));
    bottom: calc(60px + max(4px, env(safe-area-inset-bottom)));
    box-sizing: border-box;
    max-height: calc(100dvh - 78px);
    padding: 9px;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(7, 13, 20, .99);
    box-shadow: 0 -18px 60px rgba(0, 0, 0, .72);
    backdrop-filter: blur(12px);
  }
  .m41b-phone-fx-dock[aria-hidden="false"] { display: grid; }

  .m41b-phone-fx-header {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .m41b-phone-fx-header span {
    display: block;
    color: var(--pink);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
  }
  .m41b-phone-fx-header strong {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .m41b-phone-fx-header > button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: 20px;
  }

  .m41b-phone-fx-command-choices {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .m41b-phone-fx-command-choices button,
  .m41b-phone-fx-value-row button,
  .m41b-phone-fx-value-row input,
  .m41b-phone-fx-actions button {
    min-width: 0;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--ink);
    font: 900 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .m41b-phone-fx-command-choices button.active {
    border-color: var(--pink);
    background: rgba(255, 63, 146, .16);
    color: var(--pink);
  }

  .m41b-phone-fx-unknown {
    padding: 8px 10px;
    border: 1px solid var(--amber);
    border-radius: 5px;
    color: var(--amber);
    font: 800 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  .m41b-phone-fx-value-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(46px, .75fr)) minmax(72px, 1.2fr) repeat(2, minmax(46px, .75fr));
    gap: 5px;
  }
  .m41b-phone-fx-value-row input {
    padding: 0 8px;
    text-align: center;
    color: var(--cyan);
    font-size: 18px;
    outline: none;
  }
  .m41b-phone-fx-value-row input:disabled {
    color: var(--dim);
    opacity: .7;
  }

  .m41b-phone-fx-actions {
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: 6px;
  }
  .m41b-phone-fx-actions .primary {
    border-color: var(--pink);
    background: rgba(255, 63, 146, .16);
    color: var(--pink);
  }

  body.m41b-phone-fx-open .command-bar {
    visibility: hidden;
    pointer-events: none;
  }
  body.m41b-phone-fx-open .p32-value-dock,
  body.m41b-phone-fx-open .p3-note-dock {
    display: none !important;
  }
}


/* ./release-identity.css */
.edition::after {
  content: " · 0.9.0";
  color: var(--pink);
}

/* ./mobile-context-picker.css */
/* Mobile Chain/Phrase context selector. Reference mutation is handled by the P3.2 Value Dock. */
.p3-context-id-button,
.p3-context-picker { display: none; }

@media (max-width: 760px) {
  /* The injected context button is the single mobile title. Hide the legacy duplicate title/action row. */
  .pattern-pane { grid-template-rows: minmax(0, 1fr); }
  .pattern-pane > .pattern-header { display: none; }
  .subpane-header > div:not(.subpane-actions),
  .subpane-header > .subpane-actions { display: none; }

  .p3-context-id-button {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 4px 10px;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 1px 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-2);
    color: var(--ink);
    text-align: left;
    touch-action: manipulation;
  }
  .p3-context-id-button span {
    color: var(--muted);
    font: 850 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.08em;
  }
  .p3-context-id-button strong {
    grid-row: 1 / 3;
    grid-column: 2;
    justify-self: end;
    color: var(--cyan);
    font: 950 20px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .p3-context-id-button small {
    color: var(--pink);
    font: 800 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.03em;
  }
  .subpane-header .p3-context-id-button { margin: 0; }

  .p3-context-picker {
    position: fixed;
    z-index: 70;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    max-height: min(72dvh, calc(100dvh - 12px));
    padding: 0 12px max(12px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--line);
    background: rgba(5, 8, 13, 0.99);
    box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.72);
  }
  .p3-context-picker[aria-hidden="false"] { display: block; }

  .p3-context-picker-header {
    min-height: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 42px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--line);
  }
  .p3-context-picker-header span,
  .p3-context-picker-header small { display: block; }
  .p3-context-picker-header span {
    color: var(--pink);
    font: 900 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.08em;
  }
  .p3-context-picker-header small {
    margin-top: 5px;
    color: var(--muted);
    font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .p3-context-picker-header strong {
    color: var(--cyan);
    font: 950 27px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .p3-context-picker-header button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: 20px;
  }

  .p3-context-keypad {
    padding: 12px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
  }
  .p3-context-keypad button {
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--ink);
    font: 950 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    touch-action: manipulation;
  }
  .p3-context-keypad button:active { background: var(--pink); color: #15030b; }

  .p3-context-picker-actions {
    display: grid;
    grid-template-columns: 58px 84px minmax(0, 1fr);
    gap: 7px;
  }
  .p3-context-picker-actions button {
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: 9px;
    font-weight: 900;
    touch-action: manipulation;
  }
  .p3-context-picker-actions .primary {
    border-color: var(--pink);
    background: rgba(255, 63, 146, 0.16);
    color: var(--pink);
  }

  body.p3-context-picker-open .mobile-tabs,
  body.p3-context-picker-open .command-bar { visibility: hidden; }
}


/* ./value-dock.css */
/* P3.2 descriptor-backed phone value editor and Mixer drag hotfix. */
.p32-value-dock, .p32-edit-value-button { display: none; }

.p32-special-tabs {
  display: flex;
  gap: 4px;
}
.p32-special-tabs[hidden] { display: none !important; }
.p32-special-tabs button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--muted);
  font: 850 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
}
.p32-special-tabs button[aria-pressed="true"] {
  border-color: var(--amber);
  background: rgba(255, 184, 47, .1);
  color: var(--amber);
}

@media (min-width: 761px) {
  .p32-value-dock[data-desktop-special="true"][aria-hidden="false"] {
    position: fixed;
    z-index: 64;
    left: 50%;
    bottom: calc(var(--command-h) + 10px);
    width: min(560px, calc(100vw - 24px));
    transform: translateX(-50%);
    display: grid;
    padding: 9px;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(7, 13, 20, .99);
    box-shadow: 0 -18px 60px rgba(0, 0, 0, .72);
  }
  .p32-value-dock[data-desktop-special="true"] .p32-value-header {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .p32-value-dock[data-desktop-special="true"] .p32-value-header span {
    display: block;
    color: var(--amber);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
  }
  .p32-value-dock[data-desktop-special="true"] .p32-value-header strong {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .p32-value-dock[data-desktop-special="true"] .p32-value-header button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-2);
    color: var(--ink);
  }
  .p32-value-dock[data-desktop-special="true"] .p32-value-controls {
    display: grid;
    grid-template-columns: 72px 58px minmax(92px, 1fr) 58px 72px;
    gap: 5px;
  }
  .p32-value-dock[data-desktop-special="true"] .p32-value-controls button,
  .p32-value-dock[data-desktop-special="true"] .p32-value-controls input,
  .p32-value-dock[data-desktop-special="true"] .p32-value-actions button {
    min-height: 38px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-2);
    color: var(--ink);
    font: 900 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .p32-value-dock[data-desktop-special="true"] .p32-value-controls input {
    padding: 0 8px;
    text-align: center;
    color: var(--cyan);
    font-size: 16px;
  }
  .p32-value-dock[data-desktop-special="true"] .p32-value-actions {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 6px;
  }
  .p32-value-dock[data-desktop-special="true"] .p32-value-actions .primary {
    border-color: var(--amber);
    background: rgba(255, 184, 47, .1);
    color: var(--amber);
  }
}

#mixer .channel input[type="range"] { touch-action: none; }

@media (max-width: 760px) {
  .p32-edit-value-button:not([hidden]) {
    display: inline-flex;
    min-width: 82px;
    justify-content: center;
    color: var(--pink);
    border-color: rgba(255, 63, 146, 0.55);
  }

  .p32-value-dock {
    position: fixed;
    z-index: 64;
    left: max(5px, env(safe-area-inset-left));
    right: max(5px, env(safe-area-inset-right));
    bottom: calc(60px + max(4px, env(safe-area-inset-bottom)));
    box-sizing: border-box;
    max-height: calc(100dvh - 78px);
    padding: 8px;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(7, 13, 20, 0.99);
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(12px);
  }
  .p32-value-dock[aria-hidden="false"] { display: grid; }

  .p32-value-header {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .p32-value-header span {
    display: block;
    color: var(--pink);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
  }
  .p32-value-header strong {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .p32-value-header button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: 20px;
  }

  .p32-value-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(48px, .75fr)) minmax(72px, 1.2fr) repeat(2, minmax(48px, .75fr));
    gap: 5px;
  }
  .p32-value-controls button,
  .p32-value-controls input,
  .p32-value-actions button {
    min-width: 0;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--ink);
    font: 900 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .p32-value-controls input {
    padding: 0 8px;
    text-align: center;
    color: var(--cyan);
    font-size: 18px;
    outline: none;
  }
  .p32-value-controls input:focus { border-color: var(--pink); box-shadow: inset 0 -2px 0 var(--pink); }

  .p32-value-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; }
  .p32-value-actions .primary {
    border-color: var(--pink);
    background: rgba(255, 63, 146, 0.16);
    color: var(--pink);
  }

  body.p32-value-open .command-bar {
    visibility: hidden;
    pointer-events: none;
  }

  body.p32-value-open .p3-note-dock { display: none !important; }
}

@media (max-width: 390px) {
  .p32-value-dock { padding: 6px; gap: 6px; }
  .p32-value-controls { gap: 4px; }
  .p32-value-controls button { font-size: 9px; }
}


/* ./note-entry-ui.css */
/* BRKTRK Web mobile Note Editor UX. */

@media (max-width: 760px) {
  .p3-note-dock[data-note-entry="p3.5-sticky"] {
    box-sizing: border-box;
    max-height: min(348px, calc(100dvh - 106px));
    padding: 7px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    grid-template-rows: auto auto auto auto;
    gap: 6px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .p3-note-dock[data-note-entry="p3.5-sticky"] * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  body.p3-note-open .command-bar {
    visibility: hidden;
    pointer-events: none;
  }

  .p33-value-row {
    min-height: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px;
    align-items: stretch;
    gap: 5px;
  }

  .p33-inline-field {
    min-width: 0;
    padding: 4px;
    display: grid;
    grid-template-rows: auto minmax(30px, 1fr);
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 63, 146, 0.055);
  }

  .p33-inline-field > span {
    padding-left: 2px;
    color: var(--muted);
    font: 850 6.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.08em;
  }

  .p33-inline-field > div {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(48px, 1fr) 34px;
    gap: 3px;
  }

  .p33-inline-field button,
  .p33-entry-lock {
    min-width: 0;
    min-height: 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-2);
    color: var(--ink);
    font: 900 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    touch-action: manipulation;
  }

  .p33-inline-field [data-p33-adjust] {
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }

  .p33-inline-field button[id] {
    color: var(--pink);
    background: rgba(8, 18, 27, 0.96);
  }

  .p33-inline-field button b {
    color: inherit;
    font-size: 14px;
  }

  .p33-entry-lock {
    display: grid;
    place-content: center;
    gap: 3px;
    color: var(--muted);
    background: rgba(8, 18, 27, 0.96);
    -webkit-tap-highlight-color: transparent;
  }

  .p33-entry-lock span {
    font: 900 16px/1 system-ui, sans-serif;
  }

  .p33-entry-lock b {
    font: 900 6px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.06em;
  }

  .p33-entry-lock[aria-pressed="true"] {
    border-color: rgba(69, 227, 148, 0.68);
    color: var(--green);
    background: rgba(69, 227, 148, 0.1);
    box-shadow: inset 0 0 0 1px rgba(69, 227, 148, 0.12);
  }

  .p33-value-row.locked .p33-inline-field {
    border-color: rgba(69, 227, 148, 0.36);
  }

  .p3-pitch-grid.p33-piano {
    position: relative;
    display: block;
    height: 94px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #03070c;
  }

  .p33-white-keys {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
  }

  .p3-pitch-grid.p33-piano .p33-white-key {
    min-width: 0;
    height: 100%;
    padding: 0 0 8px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border: 0;
    border-radius: 0 0 5px 5px;
    background: #dce4e8;
    color: #101820;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.14);
    font: 900 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  .p33-black-keys {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .p3-pitch-grid.p33-piano .p33-black-key {
    position: absolute;
    z-index: 2;
    left: var(--p33-key-left);
    top: 0;
    width: 11.5%;
    height: 60%;
    min-width: 34px;
    max-width: 45px;
    padding: 0 0 7px;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: auto;
    border: 1px solid #26333e;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    background: #071019;
    color: #d9e2e8;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.6), inset 0 -3px 0 #020509;
    font: 850 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  .p3-pitch-grid.p33-piano button.active {
    border-color: var(--pink);
    background: rgba(255, 63, 146, 0.92);
    color: #18050d;
    box-shadow: inset 0 -3px 0 rgba(40, 0, 18, 0.55);
  }

  .p3-note-controls {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 4px;
  }

  .p3-note-controls button {
    min-height: 35px;
  }

  .p3-note-controls #p3VelocityDown,
  .p3-note-controls #p3VelocityValue,
  .p3-note-controls #p3VelocityUp {
    display: none;
  }

  .p3-note-controls #p3OctaveDown { grid-column: 1 / 4; grid-row: 1; }
  .p3-note-controls #p3OctaveValue { grid-column: 4 / 7; grid-row: 1; }
  .p3-note-controls #p3OctaveUp { grid-column: 7 / 10; grid-row: 1; }
  .p3-note-controls #p3EditStep { grid-column: 10 / 13; grid-row: 1; }
  .p3-note-controls #p33Preview { grid-column: 1 / 5; grid-row: 2; }
  .p3-note-controls #p3NoteOff { grid-column: 5 / 9; grid-row: 2; }
  .p3-note-controls #p3NoteEmpty { grid-column: 9 / 13; grid-row: 2; }

  .p3-note-controls #p33Preview[aria-pressed="true"] {
    border-color: rgba(69, 227, 148, 0.55);
    color: var(--green);
    background: rgba(69, 227, 148, 0.08);
  }

  .p3-note-controls #p33Preview[aria-pressed="false"] b { color: var(--muted); }
}

@media (max-width: 390px) {
  .p3-note-dock[data-note-entry="p3.5-sticky"] { padding: 5px; gap: 4px; }
  .p33-value-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 46px; gap: 4px; }
  .p33-inline-field > div { grid-template-columns: 30px minmax(42px, 1fr) 30px; gap: 2px; }
  .p3-pitch-grid.p33-piano { height: 88px; }
}

@media (max-width: 760px) and (max-height: 700px) {
  .p3-note-dock[data-note-entry="p3.5-sticky"] {
    max-height: min(326px, calc(100dvh - 98px));
    padding: 5px;
    gap: 4px;
  }

  .p3-note-header { min-height: 30px; }
  .p3-note-header button { width: 34px; height: 34px; }
  .p33-value-row { min-height: 40px; }
  .p33-inline-field { padding-block: 3px; }
  .p3-pitch-grid.p33-piano { height: 80px; }
  .p3-note-controls button { min-height: 33px; }
}


/* ./touch-actions.css */
/* BRKTRK Web P3.4 contextual touch-only structural actions. */

.p34-touch-actions { display: none; }

@media (max-width: 760px) {
  /* The shared status footer owns breadcrumb visibility and layout. */
  body.p34-touch-actions-ready .p3-edit-button,
  body.p34-touch-actions-ready .p32-edit-value-button {
    display: none !important;
  }

  .p34-touch-actions:not([hidden]) {
    min-width: 0;
    width: 100%;
    display: flex;
    gap: 4px;
  }

  .p34-touch-actions button {
    min-width: 56px;
    min-height: 44px;
    flex: 1 1 56px;
    padding: 3px 6px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-2);
    color: var(--ink);
    text-overflow: clip;
    white-space: nowrap;
    font: 900 8.5px/1.05 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .015em;
    touch-action: manipulation;
  }

  .p34-touch-actions button[data-label-lines="2"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    white-space: normal;
  }

  .p34-touch-actions .p34-action-line {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  .p34-touch-actions button:disabled {
    opacity: .34;
    color: var(--muted);
  }

  .p34-touch-actions button[data-tone="pink"] {
    border-color: rgba(255, 63, 146, .62);
    background: rgba(255, 63, 146, .12);
    color: var(--pink);
  }

  .p34-touch-actions button[data-tone="cyan"] {
    border-color: rgba(50, 215, 238, .55);
    background: rgba(50, 215, 238, .08);
    color: var(--cyan);
  }

  .p34-touch-actions button[data-tone="amber"] {
    border-color: rgba(255, 184, 47, .48);
    color: var(--amber);
  }

  .p34-touch-actions button[data-tone="danger"] {
    border-color: rgba(255, 104, 119, .56);
    color: var(--danger);
  }

  .p34-touch-actions #p34Clear[data-tone="danger"]:not(:disabled) {
    background: rgba(255, 104, 119, .07);
  }

  /* UX0-03 (#373): the enabled MAKE UNIQUE carries the same amber tint as the
     SHARED marker that sent the musician here. Disabled it keeps the slot, so
     moving the cursor down a column of references does not reflow the strip
     under a thumb already on its way to a button.

     The fifth slot needs no sizing of its own: measured at 390px a five-slot
     strip resolves to 72px per button with nothing clipped, and the existing
     370px/340px steps carry it down from there. An earlier revision shrank it
     anyway and pushed the type under the accepted 8.5px floor for no gain. */
  .p34-touch-actions #p34Unique[data-tone="amber"]:not(:disabled) {
    background: rgba(255, 184, 47, .08);
  }

  .p32-value-actions.p34-has-open {
    grid-template-columns: .8fr 1.35fr 1fr;
  }

  .p32-value-actions #p34ValueOpen {
    border-color: rgba(50, 215, 238, .58);
    background: rgba(50, 215, 238, .1);
    color: var(--cyan);
  }
}

@media (max-width: 370px) {
  .p34-touch-actions { gap: 3px; }
  .p34-touch-actions button {
    min-width: 52px;
    flex-basis: 52px;
    padding-inline: 3px;
    font-size: 7.8px;
  }
  .p32-value-actions.p34-has-open { grid-template-columns: .72fr 1.42fr .9fr; }
  .p32-value-actions button { font-size: 8px; }
}

@media (max-width: 340px) {
  .p34-touch-actions button {
    min-width: 48px;
    flex-basis: 48px;
    font-size: 7.3px;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  .p3-note-dock[data-note-entry="p3.3"] {
    max-height: min(310px, calc(100dvh - 118px));
    padding: 5px;
    gap: 4px;
  }

  .p33-current-step button { min-height: 42px; padding-block: 4px; }
  .p33-current-step small { display: none; }
  .p3-pitch-grid button,
  .p3-note-controls button { min-height: 40px; }
  body.p3-note-open .workspace[data-view="phrase"] .phrase-grid { scroll-padding-bottom: 278px; }
}


/* ./p36.css */
/* BRKTRK Web P3.6-P3.7 independent Song transport and compact policy UI. */

.p35-playback-context {
  flex: 0 1 440px;
  width: 440px;
  max-width: min(440px, 52vw);
  margin-left: 12px;
  margin-right: auto;
  padding-inline: 0;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.p35-playback-context[data-silent="true"] { color: var(--muted); }

.p36-queue-marker,
.p36-playing-marker {
  position: absolute;
  top: 2px;
  min-width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  border-radius: 2px;
  font: 950 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  pointer-events: none;
}

.p36-queue-marker {
  right: 2px;
  background: var(--amber);
  color: #170e00;
}

.p36-playing-marker {
  left: 2px;
  background: var(--green);
  color: #021209;
}

.grid-cell.p36-queued-cell,
.grid-cell.p36-playing-reference {
  position: relative;
}

.grid-cell.p36-queued-cell {
  box-shadow: inset -3px 0 0 var(--amber);
}

.grid-cell.p36-playing-reference {
  box-shadow: inset 3px 0 0 var(--green);
}

.grid-cell.p36-playing-reference.p36-queued-cell {
  box-shadow: inset 3px 0 0 var(--green), inset -3px 0 0 var(--amber);
}

.applied-scope-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  min-height: 22px;
  padding: 0;
  border: 0;
  color: inherit;
}

.scope-status-token {
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.025);
  font: 850 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.045em;
  white-space: nowrap;
}

.scope-status-token.playing { color: var(--green); }
.scope-status-token.queued { color: var(--amber); }
.scope-status-token.applying { color: var(--pink); }

/* Playing and queued scope carry a glyph as well as a colour. The AUTO policy
   button is green while AUTO is active and the playing scope button is green
   while it plays, so two adjacent buttons in the same cluster read as the same
   green state with different meanings - and the disambiguating PLAYING/UP NEXT
   text is deliberately suppressed here to avoid duplicating them. The glyph is
   the orthogonal channel that keeps "what is playing" readable without
   reintroducing that duplicate text or relying on colour alone. */
#scopeSwitch button.i1-playing-scope {
  border-color: var(--green) !important;
  color: var(--green) !important;
  box-shadow: inset 0 -2px 0 var(--green) !important;
}

#scopeSwitch button.i1-playing-scope::before {
  content: "\25B6";
  margin-right: 3px;
  font-size: 7px;
  line-height: 1;
}

#scopeSwitch button.i1-queued-scope::before {
  content: "\23F1";
  margin-right: 3px;
  font-size: 7px;
  line-height: 1;
}

#scopeSwitch button.i1-queued-scope {
  border-color: var(--amber) !important;
  color: var(--amber) !important;
  box-shadow: inset 0 -2px 0 var(--amber) !important;
}

#scopeSwitch button.i1-applying-scope {
  border-color: var(--pink) !important;
  color: var(--pink) !important;
  box-shadow: inset 0 -2px 0 var(--pink) !important;
}

#p35FollowButton[data-follow-state="held"] {
  border-color: var(--muted);
  color: var(--muted);
  border-style: dashed;
}

.p36-mobile-policy-button,
.p36-mobile-policy-panel { display: none; }

@media (min-width: 761px) {
  .mixer-section { overflow: hidden; }

  .mixer {
    grid-template-columns: repeat(9, minmax(76px, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    align-items: stretch;
  }

  .channel {
    grid-template-columns: 9px minmax(28px, 1fr) 38px !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "head head head"
      "meter controls controls";
    column-gap: 7px !important;
    row-gap: 5px !important;
    overflow: hidden;
  }

  .channel-header {
    grid-area: head;
    min-height: 14px;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .channel-meter {
    grid-area: meter;
    width: 7px !important;
    height: 100% !important;
    min-height: 82px !important;
    align-self: stretch;
    justify-self: center;
  }

  .channel-controls {
    grid-area: controls;
    min-width: 0;
    min-height: 0;
    display: grid !important;
    grid-template-columns: minmax(28px, 1fr) 36px !important;
    grid-template-rows: minmax(0, 1fr) 27px !important;
    gap: 5px !important;
    align-items: stretch !important;
    justify-items: center !important;
    overflow: visible;
  }

  .channel input[type="range"].p35-vertical-fader {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 30px !important;
    height: 100% !important;
    min-height: 92px !important;
    align-self: stretch;
  }

  .channel-controls > button {
    grid-column: 2;
    grid-row: 1;
    width: 34px !important;
    height: 26px !important;
    align-self: start;
    justify-self: center;
  }

  .channel .pan-readout {
    grid-column: 2;
    grid-row: 2;
    min-width: 34px !important;
    align-self: center;
    white-space: nowrap;
  }
}

@media (max-width: 1279px) and (min-width: 761px) {
  .p35-playback-context {
    flex-basis: 360px;
    width: 360px;
    max-width: 40vw;
    font-size: 7px;
  }

  .mixer { grid-template-columns: repeat(9, minmax(66px, 1fr)) !important; }
  .channel { grid-template-columns: 7px minmax(24px, 1fr) 31px !important; column-gap: 4px !important; }
  .channel-controls { grid-template-columns: minmax(24px, 1fr) 29px !important; gap: 3px !important; }
  .channel-controls > button { width: 28px !important; }
  .channel .pan-readout { min-width: 28px !important; font-size: 6px; }
}

@media (max-width: 760px) {
  /* Settings remains a real phone top-bar owner (p2.css). Keep all four grid
     areas explicit, but use the compact 112px brand floor that fits the full
     transport + policy + tempo + Settings row at the 360px acceptance width.
     The brand track is sized by its content rather than by slack: an open 1fr
     handed it every spare pixel, so at 640px the brand owned 398px of a 640px
     bar and the three interactive owners were crammed against the right edge.
     space-between now distributes that slack between owners instead. */
  .topbar {
    grid-template-columns: minmax(112px, auto) auto auto 38px;
    grid-template-areas: "brand transport tempo settings";
    justify-content: space-between;
  }
  /* Bounds the brand track by content instead of slack, and keeps a long
     project name from reclaiming the hogged width through max-content. A
     definite max here would outrank the auto transport track and crush the
     transport/policy owners at 360px, so the cap belongs on the item. */
  .brand-block { max-width: 232px; }

  .p35-playback-context {
    width: auto;
    max-width: 55vw;
    margin-left: 5px;
    margin-right: auto;
  }

  .applied-scope-status {
    max-width: 100%;
    gap: 2px;
  }

  .scope-status-token {
    min-height: 16px;
    padding-inline: 4px;
    font-size: 6px;
  }

  .p36-mobile-policy-button {
    width: 48px;
    height: 38px;
    padding: 3px 2px;
    display: grid;
    place-items: center;
    gap: 1px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-2);
    color: var(--cyan);
    font: 900 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  .p36-mobile-policy-button b { font-size: 7px; }
  .p36-mobile-policy-button small {
    width: 42px;
    max-width: 42px;
    overflow: hidden;
    color: var(--muted);
    font-size: 7px;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }
  .p36-mobile-policy-button[data-follow-state="hold"] small { color: var(--amber); }

  .p36-mobile-policy-panel {
    position: fixed;
    z-index: 120;
    left: 8px;
    right: 8px;
    bottom: calc(64px + env(safe-area-inset-bottom));
    padding: 10px;
    display: none;
    grid-template-columns: 1fr;
    gap: 8px;
    border: 1px solid var(--pink);
    border-radius: 8px;
    background: #091019;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.72);
  }

  .p36-mobile-policy-panel[aria-hidden="false"] { display: grid; }

  .p36-mobile-policy-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .p36-mobile-policy-panel header span,
  .p36-mobile-policy-panel header strong { display: block; }
  .p36-mobile-policy-panel header span { color: var(--muted); font-size: 7px; }
  .p36-mobile-policy-panel header strong { margin-top: 2px; font-size: 12px; }
  .p36-mobile-policy-panel header button { width: 38px; height: 38px; font-size: 20px; }

  .p36-mobile-policy-panel > button,
  .p36-mobile-scope-grid button {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: 9px;
    font-weight: 900;
  }

  .p36-mobile-policy-panel button[aria-pressed="true"] {
    border-color: var(--green);
    color: var(--green);
    background: rgba(80, 220, 130, 0.08);
  }

  #p36MobileFollow[data-follow-state="hold"] {
    border-color: var(--amber);
    color: var(--amber);
    border-style: dashed;
  }

  .p36-mobile-scope-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }

  .p36-mobile-policy-panel p {
    margin: 0;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.35;
  }
}


/* ./track-mixer.css */
.track-bus-channel {
  min-width: 0;
  min-height: 0;
  padding: 5px 4px;
  display: grid;
  grid-template-rows: 22px minmax(0, 1fr) !important;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #0a121b;
}

.track-bus-channel.active {
  border-color: var(--pink);
  box-shadow: inset 0 2px 0 rgba(255, 63, 146, 0.55);
  background: rgba(255, 63, 146, 0.045);
}

.track-bus-channel .channel-header {
  min-width: 0;
  justify-content: center;
  padding: 0;
}

.track-bus-channel .channel-header strong {
  color: var(--ink);
  font: 900 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.track-bus-controls {
  min-height: 0;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 27px !important;
  grid-template-rows: minmax(86px, 1fr) 27px !important;
  gap: 4px !important;
  align-items: stretch !important;
}

/* The mixer rendered six type sizes, two of them below any readable
   threshold: pan centre at 5.5px and mute state at 4.5px. Those were not a
   styling choice so much as the consequence of fitting four controls into a
   72px channel. With the channel now proportional there is room for one
   scale - 7 / 8 / 9 / 12 - and state text can simply be legible. */
.track-mix-control {
  min-width: 0;
  color: var(--muted);
  font: 750 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.track-mix-control output {
  color: var(--cyan);
  font: 850 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.track-gain-control {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-rows: minmax(62px, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 3px;
}

.track-gain-control > span {
  display: none;
}

.track-gain-control .track-gain-range {
  width: 28px !important;
  height: 100% !important;
  min-height: 62px;
  margin: 0;
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: slider-vertical;
  appearance: auto;
  accent-color: var(--cyan);
  touch-action: none;
}

.track-pan-control {
  display: none !important;
}

.track-pan-trigger {
  --pan-angle: 0deg;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  min-height: 34px;
  padding: 1px !important;
  display: grid;
  grid-template-rows: 23px 8px;
  place-items: center;
  gap: 1px;
  color: var(--cyan) !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  touch-action: none;
  user-select: none;
  cursor: ns-resize;
}

.track-pan-knob-face {
  position: relative;
  width: 22px;
  height: 22px;
  display: block;
  border: 1px solid var(--line);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(76, 223, 255, 0.12), transparent 48%),
    #0a151f;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.018), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.track-pan-knob-face::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 2px;
  height: 7px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 4px rgba(76, 223, 255, 0.34);
  transform: rotate(var(--pan-angle));
  transform-origin: 50% 9px;
}

.track-pan-trigger output {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: clip;
  white-space: nowrap;
  font: 900 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.track-pan-trigger.centered .track-pan-knob-face {
  border-color: rgba(255, 184, 47, 0.48);
}

.track-pan-trigger.centered output {
  color: var(--amber);
}

.track-pan-trigger:hover .track-pan-knob-face,
.track-pan-trigger:focus-visible .track-pan-knob-face,
.track-pan-trigger.adjusting .track-pan-knob-face {
  border-color: var(--pink);
  box-shadow: inset 0 0 0 2px rgba(255, 63, 146, 0.08), 0 0 0 1px rgba(255, 63, 146, 0.18);
}

.track-pan-trigger:hover output,
.track-pan-trigger:focus-visible output,
.track-pan-trigger.adjusting output {
  color: var(--pink);
}

.track-pan-trigger:focus-visible {
  outline: 1px solid var(--pink);
  outline-offset: 1px;
}

.track-mute-control {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  width: 27px !important;
  height: auto !important;
  min-height: 42px;
  padding: 4px 1px !important;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 2px;
  color: var(--muted);
  border-color: var(--line) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

.track-mute-control span {
  font: 900 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.track-mute-control small {
  color: currentColor;
  font: 900 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.05em;
}

.track-mute-control[aria-pressed="true"] {
  color: var(--amber) !important;
  border-color: var(--amber) !important;
  background: rgba(255, 183, 77, 0.15) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 183, 77, 0.32);
}

.track-mute-control[aria-pressed="true"] span {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.track-extension-rack[hidden] {
  display: none !important;
}

.master-reserve {
  min-width: 0;
  /* UX0-06 (#374): honest, and quiet. It still says what the area is for and
     that it has no controls; it stops doing so at the volume of a section
     heading in the middle of a mixer that has none. */
  padding: 10px 14px !important;
  display: grid !important;
  place-items: center;
  /* The reserve is a `.channel`, so p36.css shaped it with the Track strip's
     "meter | controls" template. Its single copy element has no grid-area, so
     it landed in the 7-9px meter track: 47px wide inside a 466px panel,
     wrapping to 176px tall and clipped on both axes. The reserve has no meter
     and no controls, so it owns a single-cell grid instead. */
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, auto) !important;
  grid-template-areas: none !important;
  border-color: rgba(255, 63, 146, 0.26) !important;
  background:
    linear-gradient(135deg, rgba(255, 63, 146, 0.022), transparent 48%),
    #0a1018 !important;
}

.master-reserve-copy {
  max-width: min(420px, 100%);
  display: grid;
  gap: 6px;
  text-align: center;
}

.master-reserve-copy strong {
  color: var(--muted);
  font: 900 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.05em;
}

.master-reserve-copy span {
  color: var(--muted);
  font: 800 7px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
}

.master-reserve-copy small {
  color: var(--dim);
  font: 750 7px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (min-width: 761px) {
  .mixer {
    /* Channels were capped at 72px while Master took `1fr` - every spare pixel.
       At 1440 that gave eight working channels 611px between them and the
       Master placard 794px, for a placard with no controls in it. Both tracks
       are now proportional, so the split holds at every width instead of
       depending on how much room is left over.

       The fixture sets the floor, not the value: it requires
       `tracksWidth < mixerWidth * 0.72` and `masterWidth > channelWidth * 2.5`
       (scripts/run-track-mixer-cdp-fixture.mjs:331), which with 8 channels at
       1fr and Master at Nfr need N > 3.11 and N > 2.5 respectively.

       This is the revisit that comment asked for, in the direction UX0-06
       (#374) names: reduce the placeholder's footprint until real Master
       controls exist. 6fr held a stable 41-42% of the Mixer at every audited
       desktop width - 519px against an 86px channel at 1280 - to say that
       there is nothing here yet. Eight working channels shared 58% with the
       placeholder taking 42%.

       4fr keeps Master plainly the widest element and the reservation
       obvious, stays clear of both fixture floors, and hands the difference
       to the channels that carry real state. Size N against what real Master
       controls measure once they exist, not against either estimate. */
    grid-template-columns: repeat(8, minmax(58px, 1fr)) minmax(240px, 4fr) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    justify-content: stretch;
    align-items: stretch;
  }

  .mixer > .track-bus-channel {
    width: 100%;
  }

  .mixer > .master-reserve {
    grid-column: 9;
    grid-row: 1;
  }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .mixer {
    grid-template-columns: repeat(8, minmax(50px, 1fr)) minmax(170px, 4fr) !important;
    gap: 4px !important;
  }

  .track-bus-channel {
    padding-inline: 3px;
  }

  .master-reserve {
    padding-inline: 10px !important;
  }
}

@media (max-width: 760px) {
  .mixer-section {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .mixer {
    min-width: 304px;
    grid-template-columns: repeat(8, minmax(34px, 1fr)) !important;
    grid-auto-rows: minmax(188px, 1fr) !important;
    gap: 3px !important;
    align-items: stretch;
  }

  .track-bus-channel {
    min-width: 0;
    min-height: 188px;
    padding: 3px;
    grid-template-rows: 18px minmax(0, 1fr) !important;
    gap: 3px;
    border-radius: 4px;
  }

  .track-bus-channel .channel-header strong {
    font-size: 7px;
  }

  .track-bus-controls {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(102px, 1fr) 30px 44px !important;
    gap: 3px !important;
  }

  .track-gain-control {
    grid-column: 1;
    grid-row: 1;
    grid-template-rows: minmax(78px, 1fr) auto;
    gap: 2px;
  }

  .track-gain-control .track-gain-range {
    width: 27px !important;
    min-height: 78px;
  }

  .track-gain-control output {
    font-size: 6px;
  }

  .track-mute-control {
    grid-column: 1;
    grid-row: 2;
    width: 100% !important;
    height: 30px !important;
    min-height: 30px;
    padding: 2px 1px !important;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr;
    gap: 2px;
  }

  .track-mute-control span {
    font-size: 8px;
  }

  .track-mute-control small {
    font-size: 6px;
  }

  .track-pan-trigger {
    grid-column: 1;
    grid-row: 3;
    width: 100% !important;
    min-width: 0;
    height: 44px !important;
    min-height: 44px;
    grid-template-rows: 28px 8px;
    padding: 3px 0 !important;
  }

  .track-pan-knob-face {
    width: 25px;
    height: 25px;
  }

  .track-pan-knob-face::after {
    top: 2px;
    height: 8px;
    transform-origin: 50% 10.5px;
  }

  .track-pan-trigger output {
    font-size: 6px;
  }

  .mixer > .channel.master {
    display: none !important;
  }
}

/* Desktop Pan/Mute separation contract */
#mixer .track-bus-channel {
  grid-template-areas:
    "head"
    "controls" !important;
}

#mixer .track-bus-channel > .channel-header {
  grid-area: head !important;
}

#mixer .track-bus-channel > .track-bus-controls {
  grid-area: controls !important;
}

@media (min-width: 761px) {
  #mixer .track-bus-controls {
    grid-template-columns: minmax(0, 1fr) 34px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    column-gap: 7px !important;
    row-gap: 0 !important;
    align-items: stretch !important;
  }

  #mixer .track-gain-control {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
  }

  #mixer .track-secondary-controls {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 34px;
    display: grid;
    grid-template-columns: 34px;
    grid-template-rows: 34px 34px;
    align-content: start;
    gap: 8px;
  }

  #mixer .track-pan-trigger,
  #mixer .track-mute-control {
    position: static !important;
    inset: auto !important;
    grid-column: 1 !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    align-self: start !important;
    z-index: auto !important;
  }

  #mixer .track-pan-trigger {
    grid-row: 1 !important;
    padding: 1px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 23px 8px !important;
    gap: 1px !important;
  }

  #mixer .track-mute-control {
    grid-row: 2 !important;
    padding: 3px 1px !important;
  }
}

@media (max-width: 760px) {
  #mixer .track-secondary-controls { display: contents; }
}

/* Wide-desktop Instrument and Mixer share the right inspector. Eight real
   channel strips form four pairs; the empty Master reservation takes no space. */
@media (min-width: 1180px) {
  #inspectorPane .mixer-section { overflow-y: auto; }
  #inspectorPane .mixer {
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(130px, 16dvh) !important;
    gap: 6px !important;
  }
  #inspectorPane .mixer > .master-reserve { display: none !important; }
  #inspectorPane .mixer-output-latency { grid-template-columns: auto minmax(0, 1fr); }
  #inspectorPane .mixer-output-latency-note { grid-column: 1 / -1; }
}

/* The output path's own latency, stated beside the channel strip rather than
   inside the Master placard: `.mixer > .channel.master` is display:none under
   760px, so a reading living in the Master would be invisible on exactly the
   device that needs it. It is a reading and not a control - nothing here
   changes the signal. */
.mixer-output-latency {
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 63, 146, 0.22);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 63, 146, 0.035), transparent 60%), #0a1018;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 10px;
}

.mixer-output-latency-label {
  color: var(--dim);
  font: 900 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.17em;
}

.mixer-output-latency-value {
  color: var(--ink);
  font: 900 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.mixer-output-latency-note {
  min-width: 0;
  color: var(--muted);
  font: 750 7px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Past the point where playing along stops working, the number says so itself
   instead of waiting to be interpreted. */
.mixer-output-latency[data-output-latency-band="late"] .mixer-output-latency-value {
  color: var(--amber);
}

.mixer-output-latency[data-output-latency-band="late"] {
  border-color: rgba(255, 184, 47, 0.42);
}

.mixer-output-latency[data-output-latency-band="unknown"] .mixer-output-latency-value {
  color: var(--dim);
}

/* On a phone the note needs the whole width rather than a third of 390px. */
@media (max-width: 760px) {
  .mixer-output-latency {
    grid-template-columns: auto minmax(0, 1fr);
    margin-top: 8px;
  }

  .mixer-output-latency-note {
    grid-column: 1 / -1;
  }
}


/* ./track-insert-fx.css */
.track-insert-fx-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line, #2b3642);
  background: var(--panel, #0b1118);
}
.track-insert-fx-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.track-insert-fx-header small { opacity: .72; }
.track-insert-fx-rack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.track-insert-fx-slot {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line, #2b3642);
  background: rgba(255,255,255,.02);
}
.track-insert-fx-slot-toolbar {
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.track-insert-fx-slot-toolbar select,
.track-insert-fx-slot-toolbar button { min-height: 32px; }
.track-insert-fx-parameters {
  display: grid;
  gap: 6px;
}
.track-insert-fx-parameter {
  display: grid;
  grid-template-columns: minmax(5.5rem, .7fr) minmax(7rem, 2fr) minmax(5rem, .7fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.track-insert-fx-parameter output {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.track-insert-fx-empty { opacity: .65; padding: 8px 0; }
.track-insert-fx-slot[data-bypass="true"] .track-insert-fx-parameters { opacity: .55; }
@media (max-width: 760px) {
  .track-insert-fx-rack { grid-template-columns: 1fr; }
  .track-insert-fx-header { align-items: flex-start; flex-direction: column; gap: 2px; }
  .track-insert-fx-parameter { grid-template-columns: 5rem minmax(6rem, 1fr) 5rem; }
}

/* UX1: the mix workspace becomes a narrow side inspector at >=1180px.
   The global two-up rack has a 128px minimum selector *per* slot and a
   three-column parameter row with a ~280px minimum. Inside a 340-420px
   inspector this silently overflows and stacks controls over FX2.
   Keep both real serial slots; present them as readable stacked modules. */
#inspectorPane .track-insert-fx-panel {
  min-width: 0;
  padding: 8px;
  margin-top: 8px;
  gap: 7px;
}
#inspectorPane .track-insert-fx-header {
  min-width: 0;
  flex-wrap: wrap;
  gap: 3px 8px;
}
#inspectorPane .track-insert-fx-header small {
  font-size: 9px;
  line-height: 1.3;
}
#inspectorPane .track-insert-fx-rack {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}
#inspectorPane .track-insert-fx-slot {
  min-width: 0;
  padding: 7px;
  gap: 6px;
}
#inspectorPane .track-insert-fx-slot-toolbar {
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
}
#inspectorPane .track-insert-fx-slot-toolbar select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-size: 12px;
}
#inspectorPane .track-insert-fx-slot-toolbar button {
  min-width: 0;
  max-width: 100%;
  padding-inline: 7px;
  white-space: nowrap;
  font-size: 10px;
}
#inspectorPane .track-insert-fx-parameters { min-width: 0; }
#inspectorPane .track-insert-fx-parameter {
  grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr) minmax(0, 4.5rem);
  gap: 6px;
  min-width: 0;
  font-size: 11px;
}
#inspectorPane .track-insert-fx-parameter span {
  min-width: 0;
  overflow-wrap: anywhere;
}
#inspectorPane .track-insert-fx-parameter input[type="range"] {
  width: 100%;
  min-width: 0;
}
#inspectorPane .track-insert-fx-parameter output {
  min-width: 0;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 380px) {
  #inspectorPane .track-insert-fx-parameter {
    grid-template-columns: minmax(0, 3.75rem) minmax(0, 1fr) minmax(0, 4.15rem);
    gap: 4px;
  }
}


/* ./honest-surface.css */
/* BRKTRK Web honest production surface. */

[data-dock="mod"],
[data-dock="fx"],
#placeholderDock {
  display: none !important;
}

/* Phrase command/value layout is owned by phrase-fx-surface.css from M4.1B onward. */

/* Production Sound is a musical Instrument surface, not a SaaS form or a
   legacy inspector-card grid. Keep package identity secondary, make the
   active page's controls visible together, and reserve magenta/cyan/green/
   amber for focus, structure, signal and routing/status respectively. */
#soundDock {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

#instrumentInspector.instrument-inspector {
  min-width: 0;
  min-height: 0;
  display: block;
  overflow: visible;
  container-type: inline-size;
}

#instrumentInspector > .a4a-sound-shell {
  width: 100%;
  min-width: 0;
}

#instrumentInspector .a4a-sound-toolbar {
  min-width: 0;
  padding: 4px 0;
  display: grid;
  grid-template-columns: auto minmax(180px, 280px) minmax(0, 1fr);
  gap: 6px 12px;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#instrumentInspector .a4a-sound-toolbar label {
  min-width: 0;
  gap: 5px;
  color: var(--muted);
  font: 850 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}

#instrumentInspector .a4a-sound-toolbar select,
#instrumentInspector .a4a-sound-toolbar input[type="text"] {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #08111a;
  color: var(--ink);
  font: 760 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

#instrumentInspector .a4a-sound-toolbar select:focus-visible,
#instrumentInspector .a4a-sound-toolbar input[type="text"]:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: -2px;
}

#instrumentInspector .a4a-engine-id {
  min-width: 0;
  justify-self: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cyan);
  opacity: .48;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

#instrumentInspector .a4b-preset-panel {
  min-width: 0;
  padding: 5px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  grid-template-areas:
    "row heading"
    "save heading"
    "manage heading";
  gap: 8px 12px;
  align-items: center;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
}

#instrumentInspector .a4b-preset-heading {
  grid-area: heading;
  min-width: 0;
  display: grid;
  gap: 2px;
  justify-items: end;
}

#instrumentInspector .a4b-preset-heading strong {
  color: var(--amber);
  font: 900 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}

#instrumentInspector .a4b-preset-state {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  opacity: .78;
  font: 700 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

#instrumentInspector .a4b-preset-row {
  grid-area: row;
  min-width: 0;
  gap: 6px;
}

/* SAVE sits beside the preset it saves. It takes only the width of its own
   word so the selector, which carries the name a musician reads, keeps the
   rest of the row. */
#instrumentInspector .a4b-preset-row button[data-preset-library-action="save"] {
  flex: 0 0 auto;
  min-height: 29px;
  padding-inline: 12px;
  border: 1px solid rgba(255,184,47,.44);
  border-radius: 4px;
  background: rgba(255,184,47,.07);
  color: var(--amber);
  font: 900 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
}

/* The selector is where a musician looks to see which sound is loaded, so it
   is where it has to say the sound is no longer that preset. The option text
   carries an asterisk for the same reason: a collapsed select shows text, and
   colour alone is not a channel every platform renders here. */
#instrumentInspector .a4b-preset-row select[data-preset-modified="true"] {
  color: var(--amber);
  border-color: rgba(255,184,47,.5);
}

#instrumentInspector .a4b-preset-blocked {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--amber);
  opacity: .72;
  font: 700 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
}

#instrumentInspector .a4b-preset-blocked[hidden] {
  display: none;
}

#instrumentInspector .a4b-preset-row select {
  min-width: 0;
  min-height: 29px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #08111a;
  color: var(--ink);
  font: 760 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

#instrumentInspector .a4b-preset-row button {
  min-height: 29px;
  padding-inline: 12px;
  border: 1px solid rgba(255,184,47,.44);
  border-radius: 4px;
  background: rgba(255,184,47,.07);
  color: var(--amber);
  font: 900 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
}

#instrumentInspector .a4b-preset-row button:disabled {
  border-color: var(--line);
  background: transparent;
  color: var(--dim);
}

/* One titled section per engine parameter group. The section is a plain
   container so an engine that declares no groups renders exactly the single
   flat grid it did before. */
#instrumentInspector .a4a-param-group {
  min-width: 0;
  display: grid;
  gap: 5px;
}

#instrumentInspector .a4a-param-group + .a4a-param-group {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

#instrumentInspector .a4a-param-group-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--a4a-accent, var(--amber));
  font: 900 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
}

/* The section name earns its own line by carrying a rule across the rest of
   it, so a large engine reads as sections rather than as a wall of controls. */
#instrumentInspector .a4a-param-group-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-soft);
}

/* A declared section fades its rule out in its own colour, so the eye follows
   the signal path down the panel. */
#instrumentInspector .a4a-param-group[data-section-accent] .a4a-param-group-title::after {
  background: linear-gradient(90deg, var(--a4a-accent), transparent);
  opacity: .34;
}

#instrumentInspector .a4b-preset-save-row {
  grid-area: save;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 6px;
  min-width: 0;
}

/* An explicit display beats the hidden attribute, so the closed form has to
   say so itself - the same rule the management row already needs. */
#instrumentInspector .a4b-preset-save-row[hidden] {
  display: none;
}

#instrumentInspector .a4b-preset-save-row select {
  min-width: 0;
  min-height: 29px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #08111a;
  color: var(--ink);
  padding-inline: 6px;
  font: 760 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

#instrumentInspector .a4b-preset-save-row input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 29px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #08111a;
  color: var(--ink);
  padding-inline: 8px;
  font: 760 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

#instrumentInspector .a4b-preset-save-row button {
  flex: 0 0 auto;
  min-height: 29px;
  padding-inline: 12px;
  border: 1px solid rgba(255,184,47,.44);
  border-radius: 4px;
  background: rgba(255,184,47,.07);
  color: var(--amber);
  font: 900 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
}

#instrumentInspector .a4b-preset-manage-row {
  grid-area: manage;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 6px;
  min-width: 0;
}

#instrumentInspector .a4b-preset-manage-row[hidden] {
  display: none;
}

#instrumentInspector .a4b-preset-manage-row input {
  min-width: 0;
  min-height: 29px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #08111a;
  color: var(--ink);
  padding-inline: 8px;
  font: 760 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

#instrumentInspector .a4b-preset-manage-row button {
  min-height: 29px;
  padding-inline: 10px;
  border: 1px solid rgba(255,184,47,.34);
  border-radius: 4px;
  background: rgba(255,184,47,.045);
  color: var(--muted);
  font: 850 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .045em;
}

#instrumentInspector .a4b-preset-manage-row button[data-preset-library-action="delete"] {
  border-color: rgba(255,93,93,.3);
}

#instrumentInspector .a4b-preset-manage-row button:disabled {
  opacity: .42;
}

#instrumentInspector .a4a-page-tabs {
  min-width: 0;
  min-height: 27px;
  padding: 0;
  gap: 2px;
  align-items: stretch;
  border-bottom: 1px solid var(--line-soft);
}

#instrumentInspector .a4a-page-tabs button {
  min-height: 27px;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: 900 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em;
}

#instrumentInspector .a4a-page-tabs button[aria-pressed="true"] {
  border-bottom-color: var(--pink);
  background: rgba(255,63,146,.055);
  color: var(--pink);
}

#instrumentInspector .a4a-parameter-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
  gap: 2px 14px;
  align-items: start;
}

/* A parameter is a row, not a card. The box, its border and its own padding
   were spending most of each control's area on the container rather than on
   the control, so a phone fitted five of them. Rhythm and a hairline separate
   the rows instead, and the track becomes the row's own baseline. */
#instrumentInspector .a4a-param {
  min-width: 0;
  padding: 9px 2px 8px;
  display: grid;
  gap: 6px;
  border: 0;
  /* No radius: a rounded focus tint reads as a card again. The selected row is
     a full-bleed band, which is what a row-per-parameter surface should show. */
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--line-soft);
  transition: background 80ms linear, box-shadow 80ms linear;
}

#instrumentInspector .a4a-param.p301-keyboard-focus,
#instrumentInspector .a4a-param:focus-within {
  background: rgba(255, 63, 146, .07);
  box-shadow: inset 2px 0 0 var(--pink), inset 0 -1px 0 var(--line-soft);
}

/* Magenta stays the meaning of focus, so a magenta section marks its focused
   row with its own edge rather than saying the same thing twice. */
#instrumentInspector .a4a-param-group[data-section-accent="1"] .a4a-param.p301-keyboard-focus,
#instrumentInspector .a4a-param-group[data-section-accent="1"] .a4a-param:focus-within {
  box-shadow: inset 2px 0 0 var(--ink), inset 0 -1px 0 var(--line-soft);
}

#instrumentInspector .a4a-param header {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

/* The label recedes and the value leads: the number is what you read while you
   drag, and at the same size as its own caption neither one does. */
#instrumentInspector .a4a-param header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#instrumentInspector .a4a-param output {
  flex: 0 0 auto;
  color: var(--ink);
  font: 800 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* The native range stays the control - every gesture, durability and
   accessibility path in the app is bound to it - but it is drawn as the row's
   own track. The whole width is the target, and the fill is painted from the
   custom properties the renderer writes, so there is no second source of truth
   about where the value is. */
#instrumentInspector .a4a-param input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 16px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: ew-resize;
}

/* A groove rather than a line. The fill sits IN something, which is most of
   what separates a synth control from a form input, and the notch marks the
   value the engine itself shipped — the second value a synth's knob ring
   usually carries, and the only one BRKTRK actually has. Both layers are the
   track's own background, so the whole control is still one native input. */
#instrumentInspector .a4a-param input[type="range"]::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 4px;
  background-color: #0a121b;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .035);
  background-image:
    linear-gradient(90deg,
      transparent 0 var(--a4a-default, 50%),
      rgba(141, 160, 178, .5) var(--a4a-default, 50%) calc(var(--a4a-default, 50%) + 1px),
      transparent calc(var(--a4a-default, 50%) + 1px) 100%),
    linear-gradient(90deg,
      transparent 0 var(--a4a-fill-from, 0%),
      var(--a4a-accent, var(--pink)) var(--a4a-fill-from, 0%) var(--a4a-fill-to, 0%),
      transparent var(--a4a-fill-to, 0%) 100%);
}

#instrumentInspector .a4a-param input[type="range"]::-moz-range-track {
  height: 7px;
  border-radius: 4px;
  background-color: #0a121b;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(255, 255, 255, .035);
  background-image:
    linear-gradient(90deg,
      transparent 0 var(--a4a-default, 50%),
      rgba(141, 160, 178, .5) var(--a4a-default, 50%) calc(var(--a4a-default, 50%) + 1px),
      transparent calc(var(--a4a-default, 50%) + 1px) 100%),
    linear-gradient(90deg,
      transparent 0 var(--a4a-fill-from, 0%),
      var(--a4a-accent, var(--pink)) var(--a4a-fill-from, 0%) var(--a4a-fill-to, 0%),
      transparent var(--a4a-fill-to, 0%) 100%);
}

/* A parameter whose range crosses zero fills from its own zero outward, so a
   negative value looks negative instead of looking like a partly full bar. The
   tick marks where zero actually sits, which is only the middle when the
   engine's range happens to be symmetric. */
/* Each engine only parses its own pseudo-element, and one unknown selector in a
   list invalidates the whole rule - which silently dropped this tick in both
   engines when the two were declared together. */
#instrumentInspector .a4a-param[data-bipolar] input[type="range"]::-webkit-slider-runnable-track {
  background-image:
    linear-gradient(90deg,
      transparent 0 var(--a4a-fill-zero, 50%),
      rgba(226, 238, 248, .62) var(--a4a-fill-zero, 50%) calc(var(--a4a-fill-zero, 50%) + 1px),
      transparent calc(var(--a4a-fill-zero, 50%) + 1px) 100%),
    linear-gradient(90deg,
      transparent 0 var(--a4a-default, 50%),
      rgba(141, 160, 178, .5) var(--a4a-default, 50%) calc(var(--a4a-default, 50%) + 1px),
      transparent calc(var(--a4a-default, 50%) + 1px) 100%),
    linear-gradient(90deg,
      transparent 0 var(--a4a-fill-from, 0%),
      var(--a4a-accent, var(--pink)) var(--a4a-fill-from, 0%) var(--a4a-fill-to, 0%),
      transparent var(--a4a-fill-to, 0%) 100%);
}

#instrumentInspector .a4a-param[data-bipolar] input[type="range"]::-moz-range-track {
  background-image:
    linear-gradient(90deg,
      transparent 0 var(--a4a-fill-zero, 50%),
      rgba(226, 238, 248, .62) var(--a4a-fill-zero, 50%) calc(var(--a4a-fill-zero, 50%) + 1px),
      transparent calc(var(--a4a-fill-zero, 50%) + 1px) 100%),
    linear-gradient(90deg,
      transparent 0 var(--a4a-default, 50%),
      rgba(141, 160, 178, .5) var(--a4a-default, 50%) calc(var(--a4a-default, 50%) + 1px),
      transparent calc(var(--a4a-default, 50%) + 1px) 100%),
    linear-gradient(90deg,
      transparent 0 var(--a4a-fill-from, 0%),
      var(--a4a-accent, var(--pink)) var(--a4a-fill-from, 0%) var(--a4a-fill-to, 0%),
      transparent var(--a4a-fill-to, 0%) 100%);
}

#instrumentInspector .a4a-param input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2px;
  height: 13px;
  margin-top: -3px;
  border: 0;
  border-radius: 1px;
  background: var(--ink);
}

/* The cap lights up while the control is held, so the row you are dragging is
   unmistakable on a phone where a finger covers the value. */
#instrumentInspector .a4a-param input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0 0 7px var(--a4a-accent, var(--pink));
}

#instrumentInspector .a4a-param input[type="range"]::-moz-range-thumb {
  width: 2px;
  height: 13px;
  border: 0;
  border-radius: 1px;
  background: var(--ink);
}

#instrumentInspector .a4a-param input[type="range"]:focus-visible {
  outline: none;
}

/* Forced colors drops the row's tint, its inset edge and the painted track, so
   the only focus cue this surface has would disappear along with the value the
   fill states. Both come back here in system colours. */
@media (forced-colors: active) {
  #instrumentInspector .a4a-param input[type="range"]:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  #instrumentInspector .a4a-param.p301-keyboard-focus,
  #instrumentInspector .a4a-param:focus-within {
    outline: 1px solid Highlight;
    outline-offset: -1px;
  }

  #instrumentInspector .a4a-param input[type="range"]::-webkit-slider-runnable-track {
    forced-color-adjust: none;
  }

  #instrumentInspector .a4a-param input[type="range"]::-moz-range-track {
    forced-color-adjust: none;
  }
}

/* A list of options is cyan and carries a chevron and no track, so you can tell
   at a glance that dragging it will do nothing. It stays a native select so a
   thirty-entry shape list opens the platform picker. */
#instrumentInspector .a4a-param[data-control="enum"] {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
}

#instrumentInspector .a4a-param[data-control="enum"] header {
  display: contents;
}

#instrumentInspector .a4a-param[data-control="enum"] output {
  display: none;
}

#instrumentInspector .a4a-param[data-control="enum"] small {
  grid-column: 1 / -1;
}

#instrumentInspector .a4a-param[data-control="enum"] {
  color: var(--a4a-accent, var(--cyan));
}

#instrumentInspector .a4a-param select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 26px;
  padding: 0 15px 0 0;
  border: 0;
  border-radius: 3px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23506477' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 9px 9px;
  color: var(--a4a-accent, var(--cyan));
  font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
  text-align-last: right;
  cursor: pointer;
}

#instrumentInspector .a4a-param select option {
  background: var(--surface-3);
  color: var(--ink);
}

#instrumentInspector .a4a-param small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dim);
  opacity: .72;
  font: 650 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

#instrumentInspector .a4a-param[data-filter-bypassed] input[type="range"] {
  opacity: .55;
}

#instrumentInspector .a4a-param .a4a-filter-bypass-hint {
  color: var(--amber);
  opacity: 1;
  font-size: 8px;
  white-space: normal;
}

#instrumentInspector .a4a-create-panel {
  border-color: rgba(50,215,238,.28);
  background: rgba(50,215,238,.025);
}

/* Before an Instrument exists this panel is the whole Sound workspace - the
   first thing a new musician sees there. It used the browser's own select and
   button: a light-grey block in a dark instrument, 32px tall, under the 44px
   phone target UX_CONTRACT sets for every interactive Sound control. It now
   speaks the preset row's language; CREATE builds structure, so it is cyan. */
#instrumentInspector .a4a-create-panel > strong {
  color: var(--ink);
  font: 850 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}

#instrumentInspector .a4a-create-panel select {
  min-width: 0;
  min-height: 29px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #08111a;
  color: var(--ink);
  font: 760 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

#instrumentInspector .a4a-create-panel button {
  min-height: 29px;
  padding-inline: 14px;
  border: 1px solid rgba(50,215,238,.5);
  border-radius: 4px;
  background: rgba(50,215,238,.08);
  color: var(--cyan);
  font: 900 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  cursor: pointer;
}

#instrumentInspector .a4a-create-panel button:disabled {
  border-color: var(--line);
  background: transparent;
  color: var(--dim);
  cursor: default;
}

#instrumentInspector .a4a-create-panel select:focus-visible,
#instrumentInspector .a4a-create-panel button:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: -2px;
}

#instrumentInspector .a4a-create-panel .a4a-sound-state {
  color: var(--muted);
  opacity: 1;
  font: 650 9px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
}

#instrumentInspector .a4a-create-panel .a4a-sound-state.a4a-error {
  color: var(--danger);
}

@media (max-width: 760px) {
  #instrumentInspector .a4a-create-panel select,
  #instrumentInspector .a4a-create-panel button {
    box-sizing: border-box;
    min-height: 44px;
    min-block-size: 44px;
  }
}

/* Between phone and wide desktop, both panels stay below the tracker but never
   takes more than a compact workbench. Its controls scroll independently. */
@media (min-width: 761px) {
  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) {
    grid-template-rows: var(--topbar-h) minmax(0, 1fr) clamp(210px, 28dvh, 280px) var(--command-h);
  }

  #soundDock {
    padding: 6px 8px;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
  }

  #soundDock .sound-heading {
    padding-right: 7px;
  }

  #soundDock .sound-heading h2 {
    font-size: 14px;
  }
}

/* A wide Sound editor lives alongside Song and Phrase. The tracker keeps the
   whole usable height; only the Sound controls scroll. Instrument and Mixer share this same
   position, so changing panels cannot move or shorten the tracker. */
@media (min-width: 1180px) {
  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) {
    grid-template-columns: minmax(0, 1fr) clamp(350px, 30vw, 420px);
    grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--command-h);
  }

  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) > .topbar,
  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) > .command-bar {
    grid-column: 1 / -1;
  }

  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) > .workspace {
    grid-column: 1;
    grid-row: 2;
    /* The second tracker pane absorbs the gap instead of overflowing the
       available column when Song reaches its 330px minimum. */
    grid-template-columns: minmax(330px, 38%) minmax(0, 1fr);
  }

  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) > #inspectorPane {
    grid-column: 2;
    grid-row: 2;
    margin: 6px 6px 4px 0;
  }

  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) #soundDock {
    display: block;
    padding: 8px 10px 12px;
  }

  #soundDock .sound-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 0 0 8px;
    margin-bottom: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  #soundDock .sound-heading h2 {
    margin: 0;
  }

  #instrumentInspector .a4a-sound-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  #instrumentInspector .a4a-sound-toolbar .a4a-engine-id {
    grid-column: 1 / -1;
    justify-self: start;
  }

  #instrumentInspector .a4b-preset-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "row" "save" "manage";
    gap: 5px;
  }

  #instrumentInspector .a4b-preset-heading {
    justify-items: start;
  }

  #instrumentInspector .a4b-preset-row {
    flex-wrap: wrap;
  }

  #instrumentInspector .a4b-preset-row select {
    flex: 1 1 150px;
    min-width: 0;
  }

  #instrumentInspector .a4b-preset-blocked {
    flex: 1 0 100%;
    text-align: left;
  }

  #instrumentInspector .a4b-preset-save-row,
  #instrumentInspector .a4b-preset-manage-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #instrumentInspector .a4b-preset-save-row input,
  #instrumentInspector .a4b-preset-manage-row input {
    grid-column: 1 / -1;
  }
}

/* At 1280px the full Song grid needs its normal 365px minimum. Keep Phrase
   flexible so the new side inspector never clips the last note/FX column. */
@media (min-width: 1280px) {
  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) > .workspace {
    grid-template-columns: minmax(365px, 35%) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  #instrumentInspector .a4b-preset-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "heading"
      "row"
      "save"
      "manage";
  }

  #instrumentInspector .a4b-preset-heading {
    justify-items: start;
  }

  /* A blocked-gate code is a status, not a control. It was flex:none with a
     long code such as STRUCTURAL-RECONCILIATION-PENDING, which starved the
     preset selector to 0px at 360 and 17px at 412 - the selector collapsed
     exactly when a musician needed it to act on the gate. The code now takes
     its own line and the selector keeps a real floor. */
  #instrumentInspector .a4b-preset-row {
    flex-wrap: wrap;
  }

  #instrumentInspector .a4b-preset-row select {
    flex: 1 1 auto;
    min-width: 8rem;
  }

  #instrumentInspector .a4b-preset-blocked {
    flex: 1 0 100%;
    text-align: left;
  }

  #instrumentInspector .a4b-preset-save-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #instrumentInspector .a4b-preset-save-row input {
    grid-column: 1 / -1;
  }

  #instrumentInspector .a4a-sound-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    padding-top: 0;
  }

  #instrumentInspector .a4a-sound-toolbar label {
    width: auto;
  }

  #instrumentInspector .a4a-sound-toolbar .a4a-engine-id {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
  }

  #instrumentInspector .a4a-sound-toolbar select,
  #instrumentInspector .a4a-sound-toolbar input[type="text"],
  #instrumentInspector .a4b-preset-row select,
  #instrumentInspector .a4b-preset-row button,
  #instrumentInspector .a4b-preset-save-row input,
  #instrumentInspector .a4b-preset-save-row select,
  #instrumentInspector .a4b-preset-save-row button,
  #instrumentInspector .a4b-preset-manage-row input,
  #instrumentInspector .a4b-preset-manage-row button,
  #instrumentInspector .a4a-page-tabs button,
  #instrumentInspector .a4a-param select,
  #instrumentInspector .a4a-param input[type="range"] {
    box-sizing: border-box;
    min-height: 44px;
    min-block-size: 44px;
  }

  /* Chromium's native range control can keep its intrinsic rendered height
     below min-height even when the CSS minimum computes to 44px. Give the
     continuous control a physical block size so its actual hit box satisfies
     the same phone target contract as selects and buttons. */
  #instrumentInspector .a4a-param input[type="range"] {
    height: 44px;
    block-size: 44px;
  }

  #instrumentInspector .a4b-preset-state {
    max-width: 100%;
    text-align: left;
  }

  #instrumentInspector .a4a-page-tabs {
    min-height: 44px;
  }

  #instrumentInspector .a4a-parameter-grid {
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 2px 12px;
  }

  #instrumentInspector .a4a-param {
    padding: 8px 2px 6px;
    gap: 2px;
  }

  /* The 44px control keeps its phone touch target, but its box now overlaps the
     label line's leading instead of stacking below it, so the row reads at
     about two thirds of the height the bordered card needed. */
  #instrumentInspector .a4a-param input[type="range"] {
    margin-top: -10px;
    margin-bottom: -8px;
  }

  #instrumentInspector .a4a-param[data-control="enum"] {
    gap: 2px 10px;
  }
}

/* Portrait phone gets one full-width column: a row that spans the screen can
   lead with its value, and the drag has the whole width to resolve into. */
@media (max-width: 430px) {
  #instrumentInspector .a4a-parameter-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #instrumentInspector .a4a-param {
    padding: 9px 4px 7px;
  }

  #instrumentInspector .a4a-param output {
    font-size: 17px;
  }

  #instrumentInspector .a4a-param header strong {
    font-size: 9px;
  }

  #instrumentInspector .a4a-param select {
    font-size: 14px;
  }
}

@media (max-width: 390px) {
  #instrumentInspector .a4a-sound-toolbar,
  #instrumentInspector .a4a-parameter-grid {
    grid-template-columns: 1fr;
  }
}

/* A desktop Sound dock has enough horizontal room for sections side by side.
   Put the section headings beside one another, so a normal Instrument can be
   edited without scrolling past every section above the target control. */
@container (min-width: 540px) {
  #instrumentInspector .a4a-sound-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 7px;
    align-content: start;
  }

  #instrumentInspector .a4a-sound-toolbar,
  #instrumentInspector .a4b-preset-panel,
  #instrumentInspector .a4a-page-tabs,
  #instrumentInspector .a4a-create-panel {
    grid-column: 1 / -1;
  }

  #instrumentInspector .a4a-param-group + .a4a-param-group {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  #instrumentInspector .a4a-parameter-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #instrumentInspector .a4a-param {
    padding-block: 5px 4px;
    gap: 3px;
  }

  #instrumentInspector .a4a-param header strong { font-size: 9px; letter-spacing: .06em; }
  #instrumentInspector .a4a-param output { font-size: 15px; }
  #instrumentInspector .a4a-param small { font-size: 8px; }

  #instrumentInspector .a4a-param input[type="range"]::-webkit-slider-thumb {
    width: 13px;
    height: 13px;
    margin-top: -3px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: #0a121b;
    box-shadow: 0 0 0 2px #0a121b;
  }

  #instrumentInspector .a4a-param input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: #0a121b;
  }
}



/* ./undo-redo.css */
.undo-redo-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex: 0 0 auto;
}

.history-button {
  min-width: 58px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line, #243248);
  border-radius: 6px;
  background: var(--panel, #0a111d);
  color: var(--text, #dce7f7);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
}

.history-button:not(:disabled):hover,
.history-button:not(:disabled):focus-visible {
  border-color: var(--magenta, #ff3ea5);
  color: var(--magenta, #ff3ea5);
}

.history-button:disabled {
  opacity: .36;
  cursor: default;
}

@media (max-width: 760px) {
  .undo-redo-controls {
    gap: 3px;
    margin-left: 0;
  }

  .history-button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    letter-spacing: 0;
  }

  #undoButton::before,
  #redoButton::before {
    display: block;
    font: 900 20px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  #undoButton::before { content: "↶"; }
  #redoButton::before { content: "↷"; }
}


/* ./selection-clipboard.css */
/* M4.2B1R — session-only rectangular tracker selection and phone action bar. */

[data-pane][data-row][data-col].m42b-cell-selected {
  background: rgba(255, 196, 74, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 74, 0.56);
}

[data-pane][data-row][data-col].m42b-cell-selected.selected {
  box-shadow: inset 0 0 0 2px var(--amber);
}

[data-row-pane].m42b-row-selected [data-pane].m42b-cell-selected:first-of-type {
  box-shadow: inset 2px 0 0 var(--amber), inset 0 0 0 1px rgba(255, 196, 74, 0.56);
}

[data-row-selector="true"].m42b-row-index-selected {
  color: var(--amber);
  background: rgba(255, 196, 74, 0.09);
}

.m42b-selection-actions {
  display: none;
}

@media (max-width: 760px) {
  .m42b-selection-actions:not([hidden]) {
    min-width: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    align-items: stretch;
  }

  .m42b-selection-actions button {
    min-width: 0;
    min-height: 44px;
    height: 44px;
    padding: 0 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 196, 74, 0.45);
    border-radius: 4px;
    background: rgba(255, 196, 74, 0.08);
    color: var(--amber);
    font: 850 8.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.035em;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
    touch-action: manipulation;
  }

  .m42b-selection-actions button:disabled {
    opacity: 0.36;
  }

  body.m42b-selection-active [data-pane][data-row][data-col] {
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }
}


/* ./phrase-row-operations.css */
/* M4.2B2 — Phrase row operation controls reuse the accepted M4.2B phone action typography. */

#m42bSelectionActions [hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  #m42bSelectionActions[data-phrase-row-actions="true"] {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  #m42bSelectionActions[data-phrase-row-actions="true"] button {
    padding-inline: 2px;
    font-size: 8.5px;
    letter-spacing: 0.015em;
  }
}


/* ./ux1-visual-foundation.css */
/*
 * UX1-A (#537) — visual foundation for the next BRKTRK interface.
 *
 * This stylesheet deliberately does not change tracker schemas, DOM ownership,
 * transport/audio semantics or input commands. It is a reversible visual layer
 * over the current Song/Chain/Phrase renderers while the new shell is validated.
 */

:root {
  --bg: #05090e;
  --surface: #081018;
  --surface-2: #0b151f;
  --surface-3: #101d29;
  --line: #263b4d;
  --line-soft: rgba(82, 111, 136, .24);
  --ink: #e9f0f5;
  --muted: #8da0b2;
  --dim: #53697c;
  --cyan: #35d7e9;
  --pink: #ff4b9c;
  --green: #49e59a;
  --amber: #ffba3b;
  --danger: #ff6f7d;
  --radius: 5px;
}

/* One dark instrument surface, not a stack of dashboard cards. */
.app-shell {
  background:
    radial-gradient(circle at 68% 18%, rgba(31, 72, 98, .08), transparent 38%),
    linear-gradient(180deg, #05090e 0%, #060b11 100%);
}

.topbar {
  border-bottom-color: rgba(82, 111, 136, .34);
  background: rgba(4, 9, 14, .98);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}

.brand-block,
.transport-cluster,
.tempo-cluster,
.scope-switch,
.topbar-status {
  border-left-color: rgba(82, 111, 136, .20);
}

.brand {
  color: #bfeffc;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .23em;
}

.edition {
  color: var(--dim);
  font-size: 8px;
  letter-spacing: .10em;
}

.project-name {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .04em;
}

.transport-button,
.icon-button,
.micro-button,
.preview-button,
.engine-button,
.scope-switch button,
.utility-panels button {
  border-color: rgba(82, 111, 136, .43);
  background: rgba(11, 21, 31, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}

.transport-button:hover,
.icon-button:hover,
.micro-button:hover,
.preview-button:hover,
.engine-button:hover,
.scope-switch button:hover,
.utility-panels button:hover {
  border-color: rgba(116, 150, 177, .58);
  background: rgba(15, 28, 40, .94);
}

.transport-button.play {
  border-color: rgba(73, 229, 154, .48);
  color: var(--green);
}

.transport-button.play[aria-pressed="true"] {
  background: rgba(73, 229, 154, .17);
  border-color: var(--green);
  color: var(--green);
  box-shadow: inset 0 -2px 0 var(--green);
}

.transport-button.stop {
  color: #b4c1cc;
}

.tempo-button span {
  color: var(--dim);
}

.scope-switch button {
  border-color: transparent;
  background: transparent;
}

.scope-switch button[aria-pressed="true"] {
  border-color: rgba(255, 75, 156, .54);
  background: rgba(255, 75, 156, .08);
  color: var(--pink);
  box-shadow: inset 0 -2px 0 var(--pink);
}

.utility-panels button {
  background: rgba(8, 16, 24, .86);
}

.utility-panels button[aria-pressed="true"] {
  border-color: rgba(255, 75, 156, .72);
  background: rgba(255, 75, 156, .07);
  color: var(--pink);
  box-shadow: inset 0 -2px 0 rgba(255, 75, 156, .72);
}

.engine-button {
  background: transparent;
}

.engine-button[aria-pressed="true"] .status-dot {
  box-shadow: 0 0 8px rgba(73, 229, 154, .5);
}

.meter-pair i {
  background: #071018;
  box-shadow: inset 0 0 0 1px rgba(82, 111, 136, .22);
}

/* Composition panes keep their real contents; only hierarchy becomes clearer. */
.workspace {
  gap: 5px;
  padding: 5px;
}

.pane,
.dock {
  border-color: rgba(82, 111, 136, .34);
  border-radius: var(--radius);
  background: rgba(7, 14, 21, .88);
  box-shadow: none;
}

.pane.active-pane::before {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--pink) 30%, var(--pink) 70%, transparent 100%);
  opacity: .72;
}

.pane-header,
.subpane-header,
.dock-tabs-row {
  border-bottom-color: rgba(82, 111, 136, .27);
  background: rgba(8, 16, 24, .88);
}

.pane-header .eyebrow,
.sound-heading .eyebrow {
  color: var(--dim);
  letter-spacing: .14em;
}

.pane-header h1,
.subpane-header strong,
.sound-heading h2 {
  color: #dfeaf1;
  letter-spacing: .04em;
}

.active-editor-copy span {
  color: var(--pink);
}

/* Dense tracker surface. No columns or semantic fields are added or removed. */
.tracker-grid {
  background: rgba(5, 11, 17, .55);
}

.grid-header {
  background: rgba(9, 18, 27, .97);
  border-bottom-color: rgba(82, 111, 136, .42);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .28);
}

.grid-header > span {
  color: #70889b;
  font-weight: 800;
  letter-spacing: .07em;
}

.grid-row {
  border-bottom-color: rgba(82, 111, 136, .16);
}

.grid-row.beat-row {
  background: rgba(53, 215, 233, .018);
}

.grid-row.active-row {
  background: rgba(255, 75, 156, .025);
}

.grid-row.playing-row {
  background: rgba(73, 229, 154, .055);
}

.grid-row.playing-row::before,
.grid-row.queued-row::before {
  width: 2px;
  top: 1px;
  bottom: 1px;
}

.grid-cell {
  border-right-color: rgba(82, 111, 136, .15);
  font-variant-numeric: tabular-nums;
}

.grid-cell.index {
  color: #62798c;
}

.grid-cell.value {
  color: var(--cyan);
}

.grid-cell.instrument {
  color: #79eab1;
}

.grid-cell.fx {
  color: #ff72b1;
}

.grid-cell.empty,
.grid-cell.inoperative {
  color: #435667;
}

/* Focus is a framed edit location rather than a large solid paint block. */
.grid-cell.selected {
  position: relative;
  z-index: 3;
  background: rgba(255, 75, 156, .13);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--pink),
    inset 3px 0 0 rgba(255, 75, 156, .9);
  font-weight: 900;
}

.grid-cell.linked:not(.selected) {
  color: var(--cyan);
  box-shadow: inset 0 0 0 1px rgba(53, 215, 233, .48);
}

.grid-cell.context-selected:not(.selected):not(.linked) {
  background: rgba(255, 75, 156, .045);
  box-shadow: inset 2px 0 0 rgba(255, 75, 156, .38);
}

.song-grid .grid-header > span.active-track {
  color: var(--pink);
  box-shadow: inset 0 -1px 0 var(--pink);
}

/* Sound keeps the honest row-per-parameter grammar from current main. */
#soundDock,
#mixerSection {
  background: rgba(7, 14, 21, .96);
}

#instrumentInspector .a4a-sound-toolbar,
#instrumentInspector .a4b-preset-panel {
  border-bottom-color: rgba(82, 111, 136, .22);
}

#instrumentInspector .a4a-page-tabs button[aria-pressed="true"] {
  background: rgba(255, 75, 156, .055);
  border-bottom-color: var(--pink);
}

#instrumentInspector .a4a-param {
  box-shadow: inset 0 -1px 0 rgba(82, 111, 136, .20);
}

#instrumentInspector .a4a-param.p301-keyboard-focus,
#instrumentInspector .a4a-param:focus-within {
  background: rgba(255, 75, 156, .055);
}

/* Bottom row is status, not another visual toolbar. */
.command-bar {
  border-top-color: rgba(82, 111, 136, .30);
  background: rgba(4, 9, 14, .98);
}

.status-line {
  color: #8fa2b4;
}

.edit-breadcrumb {
  color: #a9bac8;
}

.key-legend {
  opacity: .72;
}

/* Portrait keeps the existing five-workspace product contract. */
@media (max-width: 760px) {
  .topbar {
    background: rgba(4, 9, 14, .99);
  }

  .workspace {
    padding: 4px;
  }

  .pane,
  .dock {
    border-radius: 4px;
  }

  .grid-header > span {
    color: #71899d;
  }

  .grid-cell.selected {
    background: rgba(255, 75, 156, .14);
    box-shadow:
      inset 0 0 0 1px var(--pink),
      inset 3px 0 0 var(--pink);
  }

  .mobile-tabs {
    border-top-color: rgba(82, 111, 136, .34);
    background: rgba(4, 9, 14, .985);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
  }

  .mobile-tabs button {
    color: #667d90;
  }

  .mobile-tabs button.active {
    color: var(--pink);
    background: rgba(255, 75, 156, .065);
    box-shadow: inset 0 2px 0 rgba(255, 75, 156, .85);
  }

  .p32-value-dock,
  .p3-note-dock,
  .m41b-phone-fx-dock,
  .p3-context-picker,
  .p36-mobile-policy-panel {
    border-color: rgba(82, 111, 136, .44);
    background: rgba(7, 14, 21, .985);
    box-shadow: 0 -18px 48px rgba(0, 0, 0, .42);
  }
}

@media (prefers-reduced-motion: reduce) {
  .transport-button,
  .icon-button,
  .micro-button,
  .preview-button,
  .engine-button,
  .scope-switch button,
  .utility-panels button {
    transition: none !important;
  }
}

/* UX1-C (#537) — top-bar visual convergence. Geometry remains with the
   established top-bar owners; this visual layer only changes hierarchy. */
@media (min-width: 761px) {
  .edition { display: inline; }

  .brand-block {
    padding-inline: 12px 10px;
    gap: 10px;
    border-right: 1px solid rgba(82, 111, 136, .24);
  }

  .project-name {
    flex: 1 1 auto;
    max-width: 220px;
    padding-left: 10px;
    border-left-color: rgba(82, 111, 136, .27);
  }

  .transport-cluster,
  .tempo-cluster,
  .scope-switch {
    background: rgba(7, 15, 22, .68);
  }

  .transport-cluster { border-left: 0; padding-right: 5px; }
  .tempo-cluster { border-left: 0; padding-left: 4px; padding-right: 4px; }
  .scope-switch { border-left: 0; padding-left: 5px; }

  .transport-button {
    min-width: 70px;
    height: 36px;
    border-radius: 4px;
  }

  .tempo-button { width: 58px; height: 38px; }
  .tempo-button strong { font-size: 18px; }
  .scope-switch button { min-height: 32px; border-radius: 3px; }

  .topbar-status {
    margin-left: 3px;
    padding-left: 9px;
    border-left: 1px solid rgba(82, 111, 136, .31);
    background: rgba(4, 9, 14, .99);
  }

  .topbar-status .meter-pair { opacity: .46; }
  .topbar-status .icon-button,
  .topbar-status .settings-button { background: transparent; }

  .engine-button[data-audio-readiness-state="playable"] {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
}

@media (min-width: 761px) and (max-width: 1119px) {
  .scope-switch {
    padding-inline: 10px;
    background: rgba(7, 15, 22, .76);
    border-top-color: rgba(82, 111, 136, .25);
  }

  .scope-switch::before {
    content: "PLAY";
    margin-right: 5px;
    color: var(--dim);
    font: 850 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .12em;
  }
}

@media (max-width: 760px) {
  .edition { display: none !important; }
}


/* ./ux1-desktop-shell.css */
/*
 * UX1-B (#537) — desktop composition shell.
 *
 * Presentation-only layout. Song/Chain/Phrase DOM, fields, renderers and input
 * semantics remain untouched. The inspector occupies a stable side slot rather
 * than taking tracker height on desktop.
 */

/* Wide desktop: preserve all three composition panes and put the contextual
   inspector at the right. The width is intentionally smaller than the former
   350–420px dock so Phrase keeps useful horizontal space at 1210–1280px. */
@media (min-width: 1180px) {
  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 400px);
    grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--command-h);
  }

  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) > .topbar,
  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) > .command-bar {
    grid-column: 1 / -1;
  }

  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) > .workspace {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }

  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) > #inspectorPane {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin: 5px 5px 4px 0;
  }

  /* Song really contains the existing eight Track columns, so it keeps the
     established readable floor. Pattern/Phrase gets every remaining pixel. */
  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) .workspace {
    grid-template-columns: minmax(330px, 35%) minmax(0, 1fr);
  }

  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) .pattern-workspace {
    grid-template-columns: minmax(150px, 25%) minmax(0, 1fr);
  }
}

@media (min-width: 1280px) {
  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) .workspace {
    grid-template-columns: minmax(365px, 35%) minmax(0, 1fr);
  }
}

/* Medium desktop/tablet: Song and Inspector are alternate occupants of the
   same left context slot. Chain/Phrase never lose vertical height and do not
   jump below the tracker when INST/MIX opens. */
@media (min-width: 761px) and (max-width: 1179px) {
  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) {
    grid-template-columns: clamp(250px, 32vw, 330px) minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--command-h);
  }

  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) > .topbar,
  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) > .command-bar {
    grid-column: 1 / -1;
  }

  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) > .workspace {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    padding: 5px 5px 4px 4px;
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) > .workspace > .song-pane {
    display: none;
  }

  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) > .workspace > .pattern-pane {
    min-width: 0;
    grid-column: 1;
  }

  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) .pattern-workspace {
    grid-template-columns: minmax(145px, 27%) minmax(0, 1fr);
  }

  .app-shell:has(#inspectorPane:is([data-dock="sound"], [data-dock="mix"])) > #inspectorPane {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    height: auto;
    margin: 5px 0 4px 5px;
    grid-template-rows: 38px minmax(0, 1fr);
  }

  /* Sound becomes a narrow vertical workbench rather than a horizontal dock. */
  .app-shell:has(#inspectorPane[data-dock="sound"]) #soundDock {
    display: block;
    min-width: 0;
    overflow-y: auto;
    padding: 7px 8px 10px;
  }

  .app-shell:has(#inspectorPane[data-dock="sound"]) #soundDock .sound-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 7px;
    padding: 0 0 7px;
    margin: 0 0 7px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .app-shell:has(#inspectorPane[data-dock="sound"]) #soundDock .sound-heading h2 {
    margin: 0;
    font-size: 13px;
  }

  .app-shell:has(#inspectorPane[data-dock="sound"]) #instrumentInspector .a4a-sound-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .app-shell:has(#inspectorPane[data-dock="sound"]) #instrumentInspector .a4a-sound-toolbar .a4a-engine-id {
    grid-column: 1;
    justify-self: start;
    max-width: 100%;
  }

  .app-shell:has(#inspectorPane[data-dock="sound"]) #instrumentInspector .a4b-preset-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "row" "save" "manage";
    gap: 5px;
  }

  .app-shell:has(#inspectorPane[data-dock="sound"]) #instrumentInspector .a4b-preset-heading {
    justify-items: start;
  }

  .app-shell:has(#inspectorPane[data-dock="sound"]) #instrumentInspector .a4b-preset-row {
    flex-wrap: wrap;
  }

  .app-shell:has(#inspectorPane[data-dock="sound"]) #instrumentInspector .a4b-preset-row select {
    flex: 1 1 145px;
    min-width: 0;
  }

  .app-shell:has(#inspectorPane[data-dock="sound"]) #instrumentInspector .a4b-preset-blocked {
    flex: 1 0 100%;
    text-align: left;
  }

  .app-shell:has(#inspectorPane[data-dock="sound"]) #instrumentInspector .a4b-preset-save-row,
  .app-shell:has(#inspectorPane[data-dock="sound"]) #instrumentInspector .a4b-preset-manage-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell:has(#inspectorPane[data-dock="sound"]) #instrumentInspector .a4b-preset-save-row input,
  .app-shell:has(#inspectorPane[data-dock="sound"]) #instrumentInspector .a4b-preset-manage-row input {
    grid-column: 1 / -1;
  }

  .app-shell:has(#inspectorPane[data-dock="sound"]) #instrumentInspector .a4a-parameter-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Current Mixer remains the real eight Track buses. In the narrow side slot
     it uses a two-column inspector projection; no new Master/sends/meters are
     invented here. */
  .app-shell:has(#inspectorPane[data-dock="mix"]) .mixer-section {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px;
  }

  .app-shell:has(#inspectorPane[data-dock="mix"]) .mixer {
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(122px, 16dvh) !important;
    gap: 5px !important;
  }

  .app-shell:has(#inspectorPane[data-dock="mix"]) .mixer > .master-reserve {
    display: none !important;
  }

  .app-shell:has(#inspectorPane[data-dock="mix"]) .mixer-output-latency {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell:has(#inspectorPane[data-dock="mix"]) .mixer-output-latency-note {
    grid-column: 1;
  }
}


/* ./ux1-context-sheet.css */
/*
 * UX1-D1 (#537) — shared portrait Context Sheet visual host.
 *
 * Note / Value / grouped FX / Context Picker / playback-policy keep their
 * existing command and lifecycle owners. This layer only gives them one visual
 * shell geometry so later lifecycle convergence does not require another UI
 * redesign.
 */

@media (max-width: 760px) {
  :is(
    .p3-note-dock,
    .p32-value-dock,
    .m41b-phone-fx-dock,
    .p3-context-picker,
    .p36-mobile-policy-panel
  ) {
    left: max(5px, env(safe-area-inset-left));
    right: max(5px, env(safe-area-inset-right));
    bottom: calc(60px + max(4px, env(safe-area-inset-bottom)));
    box-sizing: border-box;
    max-height: calc(100dvh - 78px);
    border: 1px solid rgba(82, 111, 136, .48);
    border-radius: 10px;
    background:
      linear-gradient(180deg, rgba(15, 28, 40, .46), transparent 38px),
      rgba(7, 14, 21, .985);
    box-shadow: 0 -18px 48px rgba(0, 0, 0, .46);
    backdrop-filter: blur(12px);
    overscroll-behavior: contain;
  }

  :is(
    .p3-note-header,
    .p32-value-header,
    .m41b-phone-fx-header,
    .p3-context-picker-header,
    .p36-mobile-policy-panel > header
  ) {
    min-height: 42px;
    border-bottom: 1px solid rgba(82, 111, 136, .24);
  }

  :is(
    .p3-note-header,
    .p32-value-header,
    .m41b-phone-fx-header,
    .p3-context-picker-header,
    .p36-mobile-policy-panel > header
  ) button {
    min-width: 42px;
    min-height: 42px;
    border-color: rgba(82, 111, 136, .43);
    border-radius: 6px;
    background: rgba(11, 21, 31, .88);
    color: var(--ink);
  }

  :is(
    .p32-value-header,
    .m41b-phone-fx-header,
    .p3-context-picker-header
  ) :is(span, strong) {
    font-variant-numeric: tabular-nums;
  }

  .p3-context-picker {
    padding: 8px;
  }

  .p3-context-picker-header {
    min-height: 52px;
    grid-template-columns: minmax(0, 1fr) auto 42px;
    padding-bottom: 5px;
  }

  .p3-context-keypad {
    padding: 8px 0;
    gap: 5px;
  }

  .p3-context-keypad button,
  .p3-context-picker-actions button {
    border-color: rgba(82, 111, 136, .40);
    background: rgba(11, 21, 31, .88);
  }

  body.p3-context-picker-open .mobile-tabs {
    visibility: visible;
  }

  body.p3-context-picker-open .command-bar {
    visibility: hidden;
    pointer-events: none;
  }

  :is(
    .p32-value-controls button,
    .p32-value-actions button,
    .m41b-phone-fx-command-choices button,
    .m41b-phone-fx-value-row button,
    .m41b-phone-fx-actions button,
    .p3-context-keypad button,
    .p3-context-picker-actions button,
    .p36-mobile-policy-panel > button,
    .p36-mobile-scope-grid button
  ) {
    border-color: rgba(82, 111, 136, .40);
    background: rgba(11, 21, 31, .86);
  }

  :is(
    .p32-value-actions .primary,
    .m41b-phone-fx-actions .primary,
    .p3-context-picker-actions .primary
  ) {
    border-color: rgba(255, 75, 156, .68);
    background: rgba(255, 75, 156, .11);
    color: var(--pink);
  }

  .m41b-phone-fx-command-choices button.active {
    border-color: var(--pink);
    background: rgba(255, 75, 156, .12);
    color: var(--pink);
    box-shadow: inset 0 -2px 0 var(--pink);
  }

  :is(
    .p32-value-controls input,
    .m41b-phone-fx-value-row input
  ) {
    border-color: rgba(82, 111, 136, .43);
    background: #071018;
    color: var(--cyan);
  }

  .p36-mobile-policy-panel {
    padding: 8px;
    gap: 6px;
    border-color: rgba(82, 111, 136, .48);
  }

  #p36MobileFollow[data-follow-state="hold"] {
    border-color: var(--amber);
    background: rgba(255, 186, 59, .055);
  }
}

@media (max-width: 390px) {
  :is(
    .p3-note-dock,
    .p32-value-dock,
    .m41b-phone-fx-dock,
    .p3-context-picker,
    .p36-mobile-policy-panel
  ) {
    left: max(4px, env(safe-area-inset-left));
    right: max(4px, env(safe-area-inset-right));
    border-radius: 8px;
  }
}


/* ./ux1-sound-workbench.css */
/*
 * Sound Workbench alpha: real engine parameters, not proxy macros.
 * PLAY offers an intentional six-control performance page; every other
 * engine-authored page keeps its full controls and the existing Store sink.
 * No DSP, parameter ABI or Project schema changes.
 */
#instrumentInspector .a4a-sound-shell {
  gap: 8px;
  min-width: 0;
  color: var(--ink);
}
#instrumentInspector .a4a-sound-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  background: linear-gradient(165deg, #14202b 0%, #0c151e 100%);
  border: 1px solid rgba(129, 160, 185, .22);
  border-radius: 9px;
  padding: 9px;
}
#instrumentInspector .a4a-sound-toolbar label {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .05em;
  color: var(--muted);
}
#instrumentInspector .a4a-sound-toolbar label > select,
#instrumentInspector .a4a-sound-toolbar label > input {
  min-width: 0;
  width: 100%;
  color: var(--ink);
  background: #0b151f;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 5px 8px;
}
#instrumentInspector .a4a-engine-id {
  font-size: 9px;
  color: #718799;
  overflow-wrap: anywhere;
}
#instrumentInspector .a4a-page-tabs {
  position: sticky;
  top: -1px;
  z-index: 5;
  display: flex;
  overflow-x: auto;
  scrollbar-width: thin;
  gap: 4px;
  padding: 7px 0 8px;
  background: #081018;
  border-bottom: 1px solid rgba(102, 132, 157, .2);
}
#instrumentInspector .a4a-page-tabs button {
  min-height: 33px;
  border-radius: 6px;
  padding: 6px 11px;
  font-size: 10px;
  letter-spacing: .055em;
  font-weight: 750;
  color: #9eb2c1;
  background: #101b27;
  border: 1px solid transparent;
}
#instrumentInspector .a4a-page-tabs button[aria-pressed="true"] {
  color: #f0f6fa;
  background: #1b2b38;
  border-color: rgba(65, 215, 236, .62);
  box-shadow: inset 0 -2px 0 var(--cyan);
}
#instrumentInspector .a4a-page-tabs button:focus-visible,
#instrumentInspector .a4a-param :focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}
#instrumentInspector .a4a-param-group {
  min-width: 0;
  padding-top: 6px;
}
#instrumentInspector .a4a-param-group-title {
  margin: 0 0 8px;
  font: 750 10px/1.3 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .095em;
  text-transform: uppercase;
  color: var(--a4a-accent, var(--muted));
}
#instrumentInspector .a4a-parameter-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
#instrumentInspector .a4a-param {
  padding: 8px 2px 9px;
  min-width: 0;
}
#instrumentInspector .a4a-param header strong {
  font-size: 10px;
  letter-spacing: .035em;
  line-height: 1.35;
}
#instrumentInspector .a4a-param output {
  font-size: 16px;
}
/* The selected parameter is a genuine interaction state, independent of
   which card the most recent mouse/touch gesture happened to focus. */
#instrumentInspector .a4a-parameter-grid[data-layout="detail"] .a4a-param.p301-keyboard-focus,
#instrumentInspector .a4a-parameter-grid[data-layout="detail"] .a4a-param:focus-within {
  background: rgba(255, 75, 156, .075);
  box-shadow: inset 3px 0 0 var(--pink), inset 0 -1px 0 var(--line-soft);
}
#instrumentInspector .a4a-parameter-grid[data-layout="performance"] .a4a-param.p301-keyboard-focus,
#instrumentInspector .a4a-parameter-grid[data-layout="performance"] .a4a-param:focus-within {
  background: linear-gradient(150deg, #222435, #101721);
  border-color: rgba(255, 75, 156, .60);
  box-shadow: inset 0 0 0 1px rgba(255, 75, 156, .28), 0 0 0 1px rgba(255, 75, 156, .14);
}
#instrumentInspector .a4a-param select {
  min-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#instrumentInspector .a4a-parameter-grid[data-layout="performance"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#instrumentInspector .a4a-parameter-grid[data-layout="performance"] .a4a-param {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-height: 139px;
  min-width: 0;
  padding: 9px 4px;
  border: 1px solid rgba(124, 154, 176, .17);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.026);
  background: linear-gradient(150deg, #111e29, #0b141d);
}
#instrumentInspector .a4a-parameter-grid[data-layout="performance"] .a4a-param header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
}
#instrumentInspector .a4a-parameter-grid[data-layout="performance"] .a4a-param header strong {
  max-width: 100%;
  min-height: 16px;
  font-size: 10px;
  color: #a6bac9;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
}
#instrumentInspector .a4a-parameter-grid[data-layout="performance"] .a4a-param output {
  color: #f0f8fc;
  font-weight: 750;
  font-size: 13px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
#instrumentInspector .a4a-knob-wheel {
  position: relative;
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: conic-gradient(from 225deg,
    var(--a4a-accent, var(--cyan)) 0 var(--a4a-knob-arc, 0deg),
    #324451 var(--a4a-knob-arc, 0deg) 270deg,
    transparent 270deg 360deg);
  box-shadow: 0 1px 5px rgba(0,0,0,.3);
}
#instrumentInspector .a4a-knob-wheel::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #0d1822;
}
#instrumentInspector .a4a-knob-dial {
  position: absolute;
  inset: 11px;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 25%, #40505d 0%, #23323e 48%, #101b26 100%);
  border: 1px solid rgba(177,195,210,.24);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12), 0 2px 4px rgba(0,0,0,.5);
}
#instrumentInspector .a4a-knob-needle {
  position: absolute;
  inset: 0;
  transform: rotate(var(--a4a-knob-angle, -135deg));
  pointer-events: none;
}
#instrumentInspector .a4a-knob-needle::before {
  content: "";
  position: absolute;
  left: calc(50% - 1.5px);
  top: 5px;
  width: 3px;
  height: 13px;
  border-radius: 3px;
  background: #e0f6ff;
  box-shadow: 0 0 6px rgba(53,215,233,.5);
}
#instrumentInspector .a4a-knob-wheel:focus-within {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}
#instrumentInspector input.a4a-knob-input[type="range"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
#instrumentInspector .a4a-parameter-grid[data-layout="performance"] .a4a-param[data-control="enum"] {
  display: flex;
  align-items: stretch;
}
#instrumentInspector .a4a-parameter-grid[data-layout="performance"] .a4a-param[data-control="enum"] header {
  display: flex;
}
#instrumentInspector .a4a-parameter-grid[data-layout="performance"] .a4a-param[data-control="enum"] output {
  display: none;
}
#instrumentInspector .a4a-parameter-grid[data-layout="performance"] .a4a-param[data-control="enum"] select {
  margin: auto 0;
  min-height: 48px;
  width: 100%;
  padding: 8px 18px 8px 6px;
  text-align: center;
  text-align-last: center;
  font-size: 12px;
  white-space: normal;
}
#instrumentInspector .a4a-parameter-grid[data-layout="performance"] .a4a-param small {
  display: none;
}
#instrumentInspector .a4a-parameter-grid[data-layout="performance"] .a4a-param small.a4a-filter-bypass-hint {
  display: block;
  width: 100%;
  margin-top: 3px;
  color: var(--amber);
  font-size: 9px;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 1;
}
@media (max-width:760px) {
  #instrumentInspector .a4a-sound-toolbar select,
  #instrumentInspector .a4a-sound-toolbar input,
  #instrumentInspector .a4a-page-tabs button,
  #instrumentInspector .a4a-param select { min-height: 44px; }
  #instrumentInspector .a4a-parameter-grid[data-layout="performance"] .a4a-param { min-height: 145px; }
  #instrumentInspector .a4a-knob-wheel { width: 84px; height: 84px; }
}
@media (max-width:330px) {
  #instrumentInspector .a4a-parameter-grid[data-layout="performance"] { gap: 4px; }
  #instrumentInspector .a4a-knob-wheel { width: 70px; height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  #instrumentInspector .a4a-knob-wheel,
  #instrumentInspector .a4a-knob-dial { transition: none; }
}

/* Deliberate, reversible engine replacement. Kept within the Sound inspector;
   no modal floats over the Chain/Phrase composition surface. */
#instrumentInspector .a4a-engine-change {
  min-height: 32px;
  justify-self: start;
  padding: 5px 8px;
  border: 1px solid rgba(65,215,236,.4);
  border-radius: 5px;
  color: var(--cyan);
  background: rgba(65,215,236,.045);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}
#instrumentInspector .a4a-engine-replace-panel {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(255,184,47,.40);
  border-radius: 7px;
  background: #101a22;
}
#instrumentInspector .a4a-engine-replace-panel > strong {
  color: var(--amber);
  font-size: 11px;
}
#instrumentInspector .a4a-engine-replace-panel > small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
#instrumentInspector .a4a-engine-replace-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 5px;
  min-width: 0;
}
#instrumentInspector .a4a-engine-replace-row select {
  min-width: 0;
  max-width: 100%;
  padding: 5px;
  background: #081018;
  color: var(--ink);
  border: 1px solid var(--line);
}
#instrumentInspector .a4a-engine-replace-row button {
  min-width: 0;
  padding: 6px;
  font-size: 10px;
}
#instrumentInspector .a4a-engine-replace-panel[data-engine-replace-armed="true"] button:first-of-type {
  color: #061017;
  background: var(--amber);
}
#instrumentInspector .a4a-engine-replace-status {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  #instrumentInspector .a4a-engine-change,
  #instrumentInspector .a4a-engine-replace-row select,
  #instrumentInspector .a4a-engine-replace-row button { min-height: 44px; }
  #instrumentInspector .a4a-engine-replace-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #instrumentInspector .a4a-engine-replace-row select { grid-column: 1 / -1; }
}