/* MX-16 mixing console — charcoal frame, colour-coded strip sections (red gain,
   green gate, blue EQ, orange dynamics and sidechain, yellow aux), LED meters,
   and a master section on the right with the aux returns and MASTER FX. */

.mx {
  --ink: #e9e7e1;
  --ink-dim: #8e949b;
  --line: rgba(233, 231, 225, 0.45);
  --c-gain: #ff6a55;
  --c-gate: #4fd17c;
  --c-eq: #62a8ff;
  --c-comp: #ffa142;
  --c-aux: #f1d34a;
  --c-pan: #f2f2f2;
  --c-ret: #7fd0ff;
  /* row heights shared by the legend and every strip */
  --h-head: 18px;
  --h-name: 20px;
  --h-src: 14px;
  --h-row: 42px;
  --h-btns: 24px;
  --h-fader: 150px;
  --h-presets: 22px;

  width: max-content;
  padding: 14px 16px 16px;
  border-radius: 10px;
  border: 1px solid #08090a;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #34373b, #26282b 60%, #1f2124);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    0 26px 34px rgba(0, 0, 0, 0.55),
    0 5px 9px rgba(0, 0, 0, 0.45);
  color: var(--ink);
}

.mx-console { display: flex; align-items: stretch; gap: 0; }
.mx-strips { display: flex; }

.mx-strip, .mx-legend {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 4px 8px;
}
.mx-strip {
  width: 90px;
  border-left: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%);
}
.mx-legend { width: 70px; padding-right: 8px; }

.mx-head { height: var(--h-head); display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.mx-legend .mx-head, .mx-name-l, .mx-legend .mx-src {
  font: 700 7.5px var(--font);
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  text-align: right;
  justify-content: flex-end;
}
.mx-name-l { height: var(--h-name); line-height: var(--h-name); margin-top: 4px; }
.mx-num { font: 700 12px var(--mono); color: var(--ink-dim); }
.mx-strip.live .mx-num { color: var(--ink); }
/* LEDs in a section's row (top right): GAIN's signal / clip, GATE's open / closed. */
.mx-rowled {
  position: absolute;
  top: 4px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #222;
  box-shadow: 0 0 0 1px #000;
}
.mx-gate[data-state="1"], .mx-level[data-state="signal"] { background: var(--c-gate); box-shadow: 0 0 0 1px #000, 0 0 6px 1px rgba(79, 209, 124, 0.7); }
.mx-gate[data-state="0"], .mx-level[data-state="clip"] { background: #e2483a; box-shadow: 0 0 0 1px #000, 0 0 6px 1px rgba(226, 72, 58, 0.7); }

/* Scribble strip: tape and marker, the same name as on the patchbays. */
.mx-name {
  height: var(--h-name);
  margin-top: 4px;
  padding: 0 3px;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #f3efe2, #e2dccb);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.5);
  color: #1c2768;
  font: 700 10px/20px "Segoe Print", "Bradley Hand", "Marker Felt", "Comic Sans MS", cursive;
  text-align: center;
  text-transform: uppercase;
}
.mx-name::placeholder { color: rgba(28, 39, 104, 0.3); }
.mx-name.auto:not(:focus) { color: rgba(48, 52, 64, 0.62); font-weight: 400; } /* named after its source: pencil, not marker */
.mx-name:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.mx-src {
  height: var(--h-src);
  overflow: hidden;
  margin-top: 2px;
  font: 600 8.5px/14px var(--mono);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #5d636a;
}
.mx-strip.live .mx-src { color: var(--vfd); text-shadow: 0 0 5px var(--vfd-dim); }

/* Knob rows */
.mx-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--h-row);
  padding: 0 1px;
}
.mx-row.single { justify-content: center; }
.mx ws-knob { --k: 34px; width: 41px; }
.mx-row + .mx-row:not(.sec-comp + .sec-comp):not(.sec-eq + .sec-eq):not(.sec-aux + .sec-aux) { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.mx-legend .mx-row { flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; padding-right: 2px; }
.mx-legend .mx-row b { font: 700 9px var(--font); letter-spacing: 0.14em; }
.mx-legend .mx-row small { font: 600 6.5px var(--font); letter-spacing: 0.12em; color: var(--ink-dim); }
.mx-legend .sec-gain b { color: var(--c-gain); }
.mx-legend .sec-gate b { color: var(--c-gate); }
.mx-legend .sec-eq b { color: var(--c-eq); }
.mx-legend .sec-comp b { color: var(--c-comp); }
.mx-legend .sec-aux b { color: var(--c-aux); }
.mx-legend .sec-pan b { color: var(--c-pan); }

/* Colour-coded knob caps per section. */
.mx .sec-gain .knob-body .pointer { stroke: var(--c-gain); }
.mx .sec-gate .knob-body .pointer { stroke: var(--c-gate); }
.mx .sec-eq .knob-body .pointer { stroke: var(--c-eq); }
.mx .sec-comp .knob-body .pointer { stroke: var(--c-comp); }
.mx .sec-aux .knob-body .pointer { stroke: var(--c-aux); }
.mx-strip .sec-eq { background: rgba(98, 168, 255, 0.04); }
.mx-strip .sec-comp { background: rgba(255, 161, 66, 0.04); }

.mx-gr {
  width: 36px;
  height: 8px;
  border-radius: 2px;
  background: #111;
  box-shadow: inset 0 1px 2px #000;
  overflow: hidden;
}
/* Gain reduction grows from the right, drawn on a canvas (meter-bar.js). */
.mx-gr canvas { display: block; width: 100%; height: 100%; }

/* Section power buttons (GATE, EQ, COMP), lit in the section's colour when on.
   A section that is off is dimmed. */
.mx-row.powered ws-knob { width: 34px; }
.mx-btn.pwr {
  display: grid;
  place-items: center;
  flex: none;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  color: #737a82;
}
.mx-btn.pwr svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.mx-btn.pwr[aria-pressed="true"] { color: #0d0f10; }
.sec-gate .mx-btn.pwr[aria-pressed="true"] { background: var(--c-gate); box-shadow: 0 2px 0 #0b0c0d, 0 0 8px rgba(79, 209, 124, 0.7); }
.sec-eq .mx-btn.pwr[aria-pressed="true"] { background: var(--c-eq); box-shadow: 0 2px 0 #0b0c0d, 0 0 8px rgba(98, 168, 255, 0.7); }
.sec-comp .mx-btn.pwr[aria-pressed="true"] { background: var(--c-comp); box-shadow: 0 2px 0 #0b0c0d, 0 0 8px rgba(255, 161, 66, 0.7); }
.mx-strip.gate-off .sec-gate ws-knob,
.mx-strip.eq-off .sec-eq ws-knob,
.mx-strip.comp-off .sec-comp ws-knob,
.mx-strip.comp-off .sec-comp .mx-gr,
.mx-strip.comp-off .mx-sc { opacity: 0.35; }
.mx-btn.cut { width: 32px; height: 16px; font-size: 7.5px; letter-spacing: 0.1em; }
.mx-btn.cut[aria-pressed="true"] { background: linear-gradient(180deg, #8cc2ff, #3f7fd0); color: #08172b; box-shadow: 0 2px 0 #0b0c0d, 0 0 10px rgba(98, 168, 255, 0.6); }

/* Sidechain: the key's source (a picker) and LISTEN, beside the SC HPF. */
.mx-sc { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 40px; }
.mx-sc-src {
  width: 40px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: radial-gradient(ellipse at 50% 40%, #0a201c, var(--vfd-bg));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 0 1px rgba(255, 255, 255, 0.08);
  color: #4f7a73;
  font: 600 8px/15px var(--mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
}
.mx-sc-src.ext { color: var(--vfd); text-shadow: 0 0 5px var(--vfd-dim); }
.mx-sc-src.missing { color: #ff8a73; text-shadow: 0 0 6px rgba(255, 90, 60, 0.8); }
.mx-sc-src:hover { color: #b5fff0; }
.mx-sc-src:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Mute / solo */
.mx-btns { display: flex; justify-content: center; gap: 4px; height: var(--h-btns); align-items: center; }
.mx-btns .mx-btn { width: 25px; }
.mx-legend .mx-btns { justify-content: flex-end; }
.mx-legend .mx-btns small { font: 600 6.5px var(--font); letter-spacing: 0.12em; color: var(--ink-dim); }
.mx-btn {
  width: 30px;
  height: 20px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #45494d, #2a2c30);
  box-shadow: 0 2px 0 #0b0c0d, inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #c9ccd0;
  font: 700 10px var(--mono);
  cursor: pointer;
}
.mx-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #0b0c0d; }
.mx-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mx-btn.mute[aria-pressed="true"] { background: linear-gradient(180deg, #ff6a55, #c4321f); color: #fff; box-shadow: 0 2px 0 #0b0c0d, 0 0 10px rgba(255, 90, 60, 0.6); }
.mx-btn.solo[aria-pressed="true"] { background: linear-gradient(180deg, #ffe066, #d9a90f); color: #3a2d00; box-shadow: 0 2px 0 #0b0c0d, 0 0 10px rgba(255, 210, 60, 0.6); }
.mx.soloing .mx-strip:not(:has(.solo[aria-pressed="true"])) { opacity: 0.5; }
.mx-btn.pfl[aria-pressed="true"] { background: linear-gradient(180deg, #7dffb0, #22b866); color: #032b14; box-shadow: 0 2px 0 #0b0c0d, 0 0 10px rgba(77, 255, 138, 0.6); }
.mx.pfling .mx-strip:not(:has(.pfl[aria-pressed="true"])) { opacity: 0.5; }
.mx-btn.listen { width: 40px; height: 14px; font-size: 6.5px; letter-spacing: 0.08em; }
.mx-btn.listen[aria-pressed="true"] { background: linear-gradient(180deg, #ffb35c, #d9761a); color: #2e1700; box-shadow: 0 2px 0 #0b0c0d, 0 0 10px rgba(255, 161, 66, 0.6); }

/* Fader and meter */
.mx-fader { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: var(--h-fader); margin-top: 4px; }
.mx-legend .mx-fader { justify-content: flex-end; align-items: center; }
.mx-legend .mx-fader b { font: 700 9px var(--font); letter-spacing: 0.14em; }
.mx ws-fader .fader { height: 140px; }
.mx ws-fader .ctl-label:empty { display: none; }
.mx-meter {
  position: relative;
  width: 8px;
  height: 136px;
  margin-bottom: 4px;
  border-radius: 2px;
  background: #121314;
  box-shadow: inset 0 1px 2px #000;
  overflow: hidden;
}
/* The bar: green, yellow, red in segments, drawn on a canvas (meter-bar.js:
   a canvas that changes costs no repaint of the console). */
.mx-meter canvas {
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}

/* Channel strip presets: LOAD and SAVE under the fader (mixer-presets.js). */
.mx-presets { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: var(--h-presets); }
.mx-legend .mx-presets { justify-content: flex-end; align-items: center; padding-top: 6px; }
.mx-legend .mx-presets small { font: 600 6.5px var(--font); letter-spacing: 0.12em; color: var(--ink-dim); }
.mx-pbtn {
  width: 36px;
  height: 15px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #3b3f43, #26282b);
  box-shadow: 0 1.5px 0 #0b0c0d, inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #9aa0a6;
  font: 700 7px var(--mono);
  letter-spacing: 0.1em;
  cursor: pointer;
}
.mx-pbtn:hover { color: var(--ink); }
.mx-pbtn[aria-expanded="true"] { color: var(--vfd); }
.mx-pbtn:active { transform: translateY(1px); box-shadow: 0 0.5px 0 #0b0c0d; }
.mx-pbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Resting on an empty spot of GATE, EQ, COMP or MASTER FX says it has presets;
   a right-click there opens their menu at the pointer (both in the page). */
.mx-hint {
  position: fixed;
  z-index: 80;
  max-width: 250px;
  padding: 5px 8px;
  border: 1px solid #2c3236;
  border-radius: 4px;
  background: #101315;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  color: #c9ccd0;
  font: 600 10.5px/1.35 var(--font);
  pointer-events: none;
}
.mx-menu-spot { position: fixed; width: 1px; height: 1px; pointer-events: none; }

/* ------------------------------------------------------------------ master */

.mx-master {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 238px;
  margin-left: 10px;
  padding: 8px 12px 10px 16px;
  border-left: 2px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.06);
}
.mx-brand { display: flex; flex-direction: column; gap: 2px; }
.mx-logo { font: 700 28px/1 var(--logo-font); letter-spacing: 0.02em; color: #f4f2ec; }
.mx-sub { font: 700 9px var(--font); letter-spacing: 0.32em; color: var(--c-comp); }
.mx-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05);
}
.mx-power { display: flex; align-items: center; gap: 12px; }
.mx-led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 16px;
  background: radial-gradient(circle at 35% 30%, #6c8f74, #19341f 70%);
  box-shadow: 0 0 0 2px #50565c;
}
.mx-led.on { background: radial-gradient(circle at 35% 30%, #e9ffe9, #36e05a 40%, #0f7a27); box-shadow: 0 0 0 2px #50565c, 0 0 12px 3px rgba(60, 230, 100, 0.55); }
/* The console preset: its name (EDITED once changed), LOAD and SAVE. */
.mx-cpreset { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; margin-left: auto; }
.mx-cp-display {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: 1px;
  padding: 3px 6px 4px;
  border-radius: 3px;
  background: radial-gradient(ellipse at 50% 40%, #0a201c, var(--vfd-bg));
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 0 1px rgba(255, 255, 255, 0.08);
}
.mx-cp-label { font: 600 6.5px var(--font); letter-spacing: 0.16em; color: #4f7a73; }
.mx-cp-edited { font: 700 6.5px var(--mono); letter-spacing: 0.08em; color: #ffb35c; }
.mx-cp-name {
  grid-column: 1 / -1;
  overflow: hidden;
  font: 600 10px/12px var(--mono);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--vfd);
  text-shadow: 0 0 5px var(--vfd-dim);
}
.mx-cp-name.none { color: #4f7a73; text-shadow: none; }
.mx-cp-btns { display: flex; gap: 4px; }
.mx-cp-btns .mx-pbtn { flex: 1; }
/* Aux: per send its master, then its return (level, balance, mute, signal). */
.mx-aux { gap: 4px; }
.mx-aux-head, .mx-aux-row {
  display: grid;
  grid-template-columns: 40px 41px 41px 41px 1fr;
  align-items: center;
  column-gap: 2px;
}
.mx-aux-head span { font: 700 6.5px var(--font); letter-spacing: 0.12em; text-align: center; color: var(--ink-dim); }
.mx-aux-head span:nth-child(2) { color: var(--c-aux); }
.mx-aux-head span:nth-child(3), .mx-aux-head span:nth-child(4) { color: var(--c-ret); }
.mx-aux-name { display: flex; flex-direction: column; gap: 2px; font: 700 8.5px var(--font); letter-spacing: 0.08em; color: var(--c-aux); }
.mx-aux-name small {
  max-width: 40px;
  overflow: hidden;
  font: 600 7.5px var(--mono);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5d636a;
}
.mx-aux-row.live .mx-aux-name small { color: var(--vfd); text-shadow: 0 0 5px var(--vfd-dim); }
.mx-aux-row ws-knob:nth-of-type(1) .knob-body .pointer { stroke: var(--c-aux); }
.mx-aux-row ws-knob:nth-of-type(n + 2) .knob-body .pointer { stroke: var(--c-ret); }
.mx-ret-side { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mx-ret-side .mx-btn { width: 26px; height: 18px; font-size: 9px; }
.mx-ret-led { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #0d240f; box-shadow: 0 0 0 1px #000; }
.mx-ret-led::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #4dff8a;
  box-shadow: 0 0 6px 1px rgba(77, 255, 138, 0.8);
  opacity: var(--level, 0);
}
.mx-caption { width: 100%; font: 600 6.5px var(--font); letter-spacing: 0.12em; text-align: center; color: var(--ink-dim); }
.mx-solo-all {
  align-self: flex-start;
  padding: 4px 12px;
  border: 1px solid #4a4f55;
  border-radius: 3px;
  background: #1c1e21;
  color: #6d7278;
  font: 700 9px var(--mono);
  letter-spacing: 0.2em;
  cursor: pointer;
}
.mx-solo-all.on { color: #3a2d00; background: #ffd23c; border-color: #ffd23c; animation: mx-blink 0.6s steps(2) infinite; }
.mx-listen-all.on { color: #2e1700; background: #ffa142; border-color: #ffa142; }
.mx-pfl-all.on { color: #032b14; background: #4dff8a; border-color: #4dff8a; }
@keyframes mx-blink { 50% { opacity: 0.55; } }
.mx-alerts { display: flex; gap: 8px; }

/* MASTER FX: the limiter (ON, THRESH, CEILING, RELEASE, AUTO) and its gain reduction. */
.mx-fx { gap: 6px; padding: 8px 10px 10px; }
.mx-fx-head { display: flex; align-items: center; justify-content: space-between; }
.mx-fx-title { display: flex; flex-direction: column; gap: 2px; font: 700 8.5px var(--font); letter-spacing: 0.14em; color: var(--c-comp); }
.mx-fx-title small { font: 600 6.5px var(--font); letter-spacing: 0.16em; color: var(--ink-dim); }
.mx-fx-meter { display: flex; align-items: center; gap: 6px; }
.mx-fx-meter .mx-gr { display: block; width: 72px; }
.mx-fx-db { width: 28px; font: 600 9px var(--mono); text-align: right; color: var(--c-comp); }
.mx-fx-knobs { display: flex; align-items: flex-end; justify-content: space-between; }
.mx-fx-knobs > * { flex: none; }
.mx-fx ws-switch { min-width: 30px; }
.mx-fx .ctl-label { min-height: 0; margin-bottom: 3px; font-size: 6.5px; letter-spacing: 0.1em; color: var(--ink-dim); }
.mx-fx ws-knob .knob-body .pointer { stroke: var(--c-comp); }
.mx-fx.off ws-knob, .mx-fx.off .mx-fx-meter, .mx-fx.off ws-switch[param="lim.auto"] { opacity: 0.45; }
.mx-fx.auto ws-knob.js-lim-rel { opacity: 0.45; }
.mx-masterfader { display: flex; align-items: flex-end; gap: 10px; margin-top: auto; }
.mx-masterfader ws-fader .fader { height: 200px; }
.mx-mmeters { position: relative; display: flex; gap: 4px; }
.mx-meter.big { width: 11px; height: 196px; }
.mx-clip {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font: 700 7px var(--font);
  letter-spacing: 0.1em;
  color: #7b2b20;
}
.mx-clip.on { color: #ff3b1f; text-shadow: 0 0 6px rgba(255, 59, 31, 0.8); }