/* mix/mixer.css — FL-style mixer (strips + slot panel). Prefix mxr-. Loaded after mix.css. */
.mx-mixer.mxr{display:flex;flex-direction:column;height:min(440px,52vh);min-height:260px;position:relative;background:var(--bg-1);border-top:1px solid var(--line-2);min-width:0}
.mx-mixer.mxr[hidden]{display:none}
.mx-mixer.mxr.mxr-max{grid-row:4 / span 2;height:auto;min-height:0}
.mxr-resizer{height:6px;cursor:ns-resize;flex:none;background:var(--bg-2);border-bottom:1px solid var(--line);touch-action:none}
.mxr-resizer:hover{background:var(--accent-soft)}
.mxr-body{flex:1;min-height:0;display:flex;min-width:0}
/* the master strip is the FIRST child of the scroller, pinned with position:sticky: it shares the strips' height, padding and
   scrollbar, so every row (fader, buttons, arrow, name) lines up between master and channels */
.mxr-masterwrap{position:sticky;left:0;z-index:3;flex:none;display:flex;margin-right:4px;padding-left:4px;background:var(--bg-1);box-shadow:6px 0 8px -4px rgba(0,0,0,.55)}
.mxr-strips{flex:1;min-width:0;display:flex;gap:2px;padding:4px 4px 2px 0;overflow-x:auto;overflow-y:hidden;align-items:stretch;scroll-padding-left:120px}
.mxr-strips::-webkit-scrollbar{height:10px}
.mxr-strips::-webkit-scrollbar-track{background:var(--bg-1)}
.mxr-strips::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:5px;border:2px solid var(--bg-1)}
.mxr-panel{flex:none;width:276px;overflow-y:auto;border-left:1px solid var(--line-3);background:var(--bg-2);padding:8px 10px;font-size:11px;color:var(--text-2)}
.mxr-strip{flex:0 1 80px;min-width:68px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 3px;background:var(--bg-2);border:1px solid var(--line);border-top:3px solid var(--tc);border-radius:var(--radius-xs);position:relative;outline:0;overflow:hidden}
.mxr-strip.mxr-sel{background:var(--bg-3);border-color:var(--tc);box-shadow:0 0 0 1px var(--tc),0 0 14px -4px var(--tc)}
.mxr-strip.mxr-muted .mxr-fad,.mxr-strip.mxr-muted .mxr-name{opacity:.45}
.mxr-strip.mxr-keyonlysrc .mxr-name{text-decoration:line-through;text-decoration-color:var(--warn)}
.mxr-master{flex:none;width:104px;border-top-color:var(--accent)}
.mxr-master.mxr-sel{box-shadow:0 0 0 1px var(--accent),0 0 14px -4px var(--accent)}
.mxr-head{display:flex;align-items:center;gap:4px;width:100%;justify-content:space-between}
.mxr-num{font:700 10px var(--mono);color:var(--text-3)}
.mxr-led{width:14px;height:14px;border-radius:50%;border:1px solid var(--line-3);background:var(--bg-4);padding:0;cursor:pointer}
.mxr-led.mxr-on{background:var(--good);border-color:var(--good);box-shadow:0 0 6px var(--good)}
.mxr-ledmaster{width:14px;height:14px}
.mxr-clip{width:12px;height:8px;border-radius:2px;border:0;background:var(--bg-4);padding:0;cursor:pointer}
.mxr-clip.mxr-on{background:var(--bad);box-shadow:0 0 6px var(--bad)}
.mxr-chips{display:flex;flex-direction:column;gap:2px;width:100%;height:26px;flex:none;overflow:hidden;align-items:stretch}
.mxr-chip{font:600 9px var(--mono);padding:1px 3px;border-radius:3px;background:var(--bg-4);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;text-align:left}
.mxr-chip-key{background:var(--magic-soft);color:var(--magic-2)}
.mxr-chip-key.mxr-keyonly{background:var(--warn);color:var(--text-inv)}
.mxr-chip-src{background:var(--accent-soft);color:var(--accent-2)}
.mxr-chip-send{background:var(--accent-soft);color:var(--accent-2)}
.mxr-knobs{display:flex;justify-content:space-around;align-items:flex-start;width:100%;flex:none}
.mxr-pan,.mxr-wid{display:flex;flex-direction:column;align-items:center;gap:0}
.mxr-master .mxr-knobs{justify-content:center}
.mxr-kl{font:700 8px/9px var(--mono);letter-spacing:.06em;color:var(--text-3);pointer-events:none}
.mxr .mx-sl{display:flex}
.mxr-fad{flex:1;min-height:90px;display:flex;gap:2px;align-items:stretch;justify-content:center;width:100%;position:relative}
.mxr-meter{width:10px;flex:none;background:var(--bg-0);border-radius:2px}
.mxr-master .mxr-meter{width:26px}
.mxr-gr{width:5px;flex:none;background:var(--bg-0);border-radius:2px;position:relative;display:flex;align-items:flex-start}
.mxr-gr i{display:block;width:100%;height:0;background:var(--warn)}
.mxr-gr.mxr-act i{background:var(--magic-2)}
.mxr-master .mxr-gr{display:none}
.mxr .mx-vf{flex:none}
.mxr-scale{position:relative;width:18px;flex:none}
.mxr-scale span{position:absolute;right:0;font:8px var(--mono);color:var(--text-3)}
.mxr-read{font:600 10px var(--mono);color:var(--text-2)}
.mxr-btns{display:flex;gap:2px}
.mxr-b{width:20px;height:20px;padding:0;border-radius:var(--radius-xs);background:var(--bg-3);border:1px solid var(--line-2);color:var(--text-2);font:700 9px var(--font);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mxr-b:hover{background:var(--bg-4);color:var(--text)}
.mxr-s.mxr-on{background:var(--info);border-color:var(--info);color:var(--text-inv)}
.mxr-r.mxr-on{background:var(--bad);border-color:var(--bad);color:#fff}
.mxr-b.mxr-sc{color:var(--magic-2)}
.mxr-snd{width:100%;display:flex;flex:none;min-height:16px}
.mxr-snd.mxr-off .mx-sl{opacity:.28;pointer-events:none}
.mxr-snd .mx-sl i{background:var(--accent-2)}
.mxr-arrow{width:100%;height:20px;border-radius:var(--radius-xs);border:1px solid var(--line-2);background:var(--bg-3);color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.mxr-arrow svg{transform:rotate(90deg)}
.mxr-arrow:hover{color:var(--text);background:var(--bg-4)}
.mxr-arrow.mxr-on{background:var(--accent);border-color:var(--accent);color:var(--text-inv);box-shadow:0 0 8px var(--accent-glow)}
.mxr-arrow.mxr-dest{border-color:var(--tc);color:var(--tc)}
.mxr-name{writing-mode:vertical-rl;transform:rotate(180deg);height:66px;flex:none;font:700 11px var(--font);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text;line-height:1.2}
.mxr-rename{width:60px;font:600 11px var(--font);background:var(--bg-0);color:var(--text);border:1px solid var(--accent);border-radius:3px}
/* 2 x 2 loudness readout: as tall as the S/R/SC row + send row of a channel strip (20 + 3 + 16 = 39 px; the channel strip has one more gap row), so the master fader is as long as the others */
.mxr-lufs{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:3px 4px;align-content:center;align-items:center;height:39px;flex:none;font:10px/12px var(--mono);color:var(--text-3);width:100%}
.mxr-lufs b{color:var(--text);text-align:right;font-weight:600;white-space:nowrap}
.mxr-addch{flex:none;width:52px;border:1px dashed var(--line-3);border-radius:var(--radius-xs);background:transparent;color:var(--text-3);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px}
.mxr-addch:hover:not(:disabled){color:var(--text);border-color:var(--accent)}
.mxr-addch:disabled{opacity:.4;cursor:not-allowed}
.mxr-phead{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13px;margin-bottom:6px}
.mxr-phead .bm-btn{margin-left:auto}
.mxr-pdot{width:10px;height:10px;border-radius:50%;background:var(--tc)}
.mxr-pkind{font:700 9px var(--mono);color:var(--text-3)}
.mxr-sec{font:700 10px var(--font);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin:10px 0 4px;display:flex;gap:8px;align-items:baseline}
.mxr-hint{font-size:10px;color:var(--text-3);text-transform:none;letter-spacing:0;font-weight:400}
.mxr-sources{display:flex;flex-wrap:wrap;gap:3px}
.mxr-sources .mxr-chip{cursor:pointer}
.mxr-slots{display:flex;flex-direction:column;gap:2px}
.mxr-slot{display:flex;align-items:center;gap:6px;height:24px;padding:0 6px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--radius-xs)}
.mxr-slot.mxr-selslot{border-color:var(--accent);background:var(--bg-4)}
.mxr-slot.mxr-byp .mxr-slotname{color:var(--text-3);text-decoration:line-through}
.mxr-slot.mxr-empty{background:transparent;border-style:dashed}
.mxr-slot.mxr-dropping{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.mxr-sled{width:9px;height:9px;border-radius:50%;background:var(--bg-5);border:1px solid var(--line-3);padding:0;cursor:pointer;flex:none}
.mxr-sled.mxr-on{background:var(--good);border-color:var(--good);box-shadow:0 0 5px var(--good)}
.mxr-sled.mxr-dis{opacity:.4;cursor:default}
.mxr-slotname{flex:1;min-width:0;background:none;border:0;color:var(--text);font:600 11px var(--font);text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0}
.mxr-slot.mxr-empty .mxr-slotname{color:var(--text-3)}
.mxr-mixk{flex:none;width:44px;min-width:44px}
.mxr-out{width:100%;background:var(--bg-3);color:var(--text);border:1px solid var(--line-2);border-radius:var(--radius-xs);height:26px;font:600 11px var(--font)}
.mxr-sc{display:flex;flex-direction:column;gap:4px}
.mxr-scrow{display:flex;align-items:center;gap:6px;background:var(--bg-3);border:1px solid var(--line-2);border-left:3px solid var(--magic-2);border-radius:var(--radius-xs);padding:2px 6px;height:26px}
.mxr-scname{flex:1;font:600 11px var(--mono);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mxr-mode{font:700 10px var(--font);padding:2px 6px;border-radius:3px;border:1px solid var(--line-3);background:var(--bg-4);color:var(--text-2);cursor:pointer}
.mxr-mode.mxr-keyonly{background:var(--warn);border-color:var(--warn);color:var(--text-inv)}
.mxr-slotb{width:16px;height:16px;border:0;background:none;color:var(--text-3);cursor:pointer;padding:0;font-size:13px}
.mxr-slotb:hover{color:var(--text)}
.mxr-meq{margin-top:4px}
.mxr-eqrow{display:flex;align-items:center;gap:8px;height:22px}
.mxr-eqrow span:first-child{width:34px;font-size:10px;color:var(--text-3)}
.mxr-eqv{width:36px;text-align:right;font:10px var(--mono);color:var(--text)}
@media (max-width:900px){.mxr-panel{width:210px}.mxr-strip{flex-basis:72px;min-width:64px}.mxr-master{flex:none;width:104px;min-width:104px}}
.mxr.mxr-compact .mxr-chips{display:none}
.mxr.mxr-compact .mxr-name{height:48px}
.mxr.mxr-compact .mxr-fad{min-height:64px}
.mxr-strip.mxr-drag{opacity:.7;z-index:5;box-shadow:0 6px 20px #0008;pointer-events:none}
.mxr-name{cursor:grab}
/* rotary knob (pan) */
.mx-knob{--ks:26px;position:relative;width:var(--ks);height:var(--ks);margin:2px auto;border-radius:50%;cursor:ns-resize;background:radial-gradient(circle at 35% 30%,var(--bg-4,#3a3f48),var(--bg-2,#1b1e24));box-shadow:0 0 0 1px var(--line-3,#333),inset 0 1px 1px rgba(255,255,255,.08);touch-action:none}
.mx-knob:focus-visible{outline:2px solid var(--accent,#6cf);outline-offset:1px}
.mx-knob u{position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from var(--a0,0deg),var(--tc,var(--accent,#6cf)) 0 var(--sweep,0deg),transparent var(--sweep,0deg));-webkit-mask:radial-gradient(circle,transparent calc(50% - 3px),#000 calc(50% - 2px) 100%);mask:radial-gradient(circle,transparent calc(50% - 3px),#000 calc(50% - 2px) 100%);pointer-events:none}
.mx-knob i{position:absolute;inset:0;pointer-events:none}
.mx-knob i::after{content:"";position:absolute;left:calc(50% - 1px);top:3px;width:2px;height:28%;border-radius:1px;background:var(--text-1,#eee)}
.mx-main[hidden]{display:none}
/* automated controls: a small dot in the lane colour (core: docs/requests/timeline-pro-to-mixer-ui.md) */
.mxr-auto{position:relative}
.mxr-auto::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--ac,var(--accent));box-shadow:0 0 5px var(--ac,var(--accent));pointer-events:none}
.mxr-read.mxr-auto::after{right:-9px;top:3px}
.mxr-pan.mxr-auto::after{right:-4px;top:3px}
.mxr-snd.mxr-auto::after{left:1px;top:-3px}
.mxr-slot.mxr-auto::after{left:-8px;top:50%;margin-top:-3px}

/* symmetry pass: a channel strip never gets narrower than its content (fader scale 18 + fader 34 + meter 10 + GR 5 + gaps = 73 px, knob rings 2 x 32 px):
   the strip scroller scrolls instead of squeezing pan / fader into each other and clipping them */
.mxr-strip{flex:0 1 84px;min-width:82px}
@media (max-width:900px){.mxr-strip{flex-basis:84px;min-width:82px}}
.mxr-strip.mxr-master{flex:none;width:104px;min-width:104px}
/* indicator buttons: 14 px hit targets (clip LED had 12 x 8, slot LED 9 x 9) so every control of a strip has the same minimum size as the channel LED */
.mxr-clip{width:14px;height:14px;border-radius:3px}
.mxr-sled{width:14px;height:14px}
/* phones: the inspector panel goes under the strips (it took 44 % of a 480 px screen and left room for 1.5 strips) */
@media (max-width:700px){
  /* with the mixer open the timeline would be squeezed to a cut-off sliver (ruler + half a header row): the mixer takes its place and the Mixer button brings the timeline back */
  .mx-app:has(.mx-mixer.mxr:not([hidden])) .mx-main{display:none}
  .mx-mixer.mxr{grid-row:4 / span 2;height:auto;min-height:0}
  .mxr-body{flex-direction:column}
  .mxr-panel{flex:none;width:auto;max-height:34%;border-left:0;border-top:1px solid var(--line-3)}
}