/* Mixer channel strips and their attached effects/routing panels. */
.mixer{font-family:var(--font-ui);font-variant-numeric:tabular-nums}
.mixer-inline-inspector{--mixer-strip-width:112px;--mixer-drawer-width:360px;display:flex!important;flex-direction:column;position:relative;min-width:0;min-height:0;padding:0!important;overflow:hidden!important;background:var(--bg)}
.mixer-producer{align-self:flex-start;flex:none;margin:8px 12px 0;padding:5px 9px;font-size:11px}
.mixer{display:flex;align-items:stretch;gap:8px;flex:1;min-width:0;min-height:0;overflow:auto;padding:14px 14px var(--transport-clearance,90px);scroll-padding:14px;scrollbar-width:thin}
.mixer-channel{position:relative;display:flex;flex:0 0 auto;width:var(--mixer-strip-width);min-width:var(--mixer-strip-width);min-height:450px;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;transition:width .2s ease;isolation:isolate}
.mixer-channel.selected{border-color:var(--track-color);box-shadow:0 0 0 1px color-mix(in srgb,var(--track-color) 25%,transparent)}
.mixer-channel.channel-expanded{width:calc(var(--mixer-strip-width) + var(--mixer-drawer-width))}
.mixer-strip{display:flex;flex-direction:column;flex:0 0 calc(var(--mixer-strip-width) - 2px);width:calc(var(--mixer-strip-width) - 2px);min-width:0;gap:9px;padding:0 0 8px;background:color-mix(in srgb,var(--track-color) 3%,var(--panel))}
.mixer-cap{border-radius:12px 12px 0 0;display:flex;align-items:center;justify-content:center;height:25px;flex:none;background:var(--track-color);color:#202324;font:700 10px var(--font-ui);letter-spacing:1px}
.mixer-title{display:flex;align-items:flex-start;justify-content:flex-start;gap:7px;min-height:42px;width:100%;padding:0 8px;white-space:normal;text-align:left;color:var(--text)}
.mixer-title .channel-signal{flex:none;margin-top:4px}
.mixer-name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;line-height:1.35;font-size:10px;font-weight:600}
.mixer-controls{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:5px;flex:1;min-height:0;padding:0 8px}
.mixer-control-stack{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:0}
.mixer-dial .rotary-control{width:100%;min-width:0;gap:4px}
.mixer-dial .rotary{width:40px;height:40px}
.mixer .rotary-ring{border-color:var(--line);background:conic-gradient(from 225deg,var(--track-color) 0deg,var(--track-color) 270deg,transparent 270deg);box-shadow:none;opacity:.8}
.mixer .rotary-cap{inset:5px;border:1px solid var(--line);background:var(--raised);box-shadow:none}
.mixer .rotary-cap i{height:10px;width:2px;left:calc(50% - 1px);top:3px;background:var(--text);box-shadow:none}
.mixer .rotary:focus-visible{outline-color:var(--accent)}
.mixer .rotary:hover .rotary-ring,.mixer .rotary.dragging .rotary-ring{box-shadow:0 0 0 2px color-mix(in srgb,var(--track-color) 20%,transparent);opacity:1}
.mixer .rotary-control output{font:10px var(--font-ui);color:var(--text)}
.mixer .rotary-control>label{font:9px var(--font-ui);color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.mixer .rotary-entry{font:10px var(--font-ui)!important;width:52px!important;background:var(--bg)!important;color:var(--text);border-color:var(--accent)!important}
.mixer-output-label{display:flex;align-items:center;justify-content:center;gap:6px;min-height:73px;color:var(--muted);font-size:10px;white-space:normal}
.mixer-strip .buttons{display:flex;gap:3px}
.mixer-strip .buttons button{flex:1;min-width:24px}
.mixer-strip .buttons [data-action="master-limiter"]{font-size:8px;min-height:28px;white-space:normal}
.mixer-channel-actions{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:auto}
.mixer-channel-actions [aria-expanded=true]{color:var(--text);border-color:var(--track-color);background:color-mix(in srgb,var(--track-color) 10%,var(--raised))}
.mixer-arrangement .ph-icon{width:14px;height:14px;font-size:14px}
.mixer-channel-actions small{margin-left:auto;color:var(--muted)}
.mixer-meter{display:flex;flex-direction:column;gap:4px;min-height:260px;min-width:0;align-self:stretch}
.mixer-peak-reset{height:15px;min-height:15px;flex:none;padding:0;font:8px var(--font-ui);color:var(--muted);border:1px solid var(--line);border-radius:3px}
.mixer-peak-reset.clipped{border-color:#ee8787;color:#ee8787}
.mixer-meter-bars{display:flex;gap:3px;flex:1;min-height:0}
.mixer-meter-channel{display:flex;flex-direction:column;gap:3px;flex:0 0 7px;min-height:0;align-items:center;font:8px var(--font-ui);color:var(--muted)}
.mixer-clip-led{width:6px;height:3px;flex:none;border-radius:1px;background:var(--line)}.mixer-clip-led.clipped{background:#ee8787}
.meter-long{display:flex;align-items:flex-end;position:relative;flex:1;width:7px;min-height:0;background:var(--bg);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.meter-long .meter-fill{display:block;width:100%;height:0;max-height:100%;background:#95b9a6}
.meter-long .meter-peak{position:absolute;left:0;right:0;height:2px;background:var(--text);transform:translateY(1px)}
.mixer-meter-scale{display:flex;flex-direction:column;justify-content:space-between;font:8px var(--font-ui);color:var(--muted);padding:19px 0 0 2px}
.mixer-meter-scale span{position:relative}.mixer-meter-scale span:before{content:"";position:absolute;width:2px;height:1px;left:-3px;top:50%;background:var(--line)}
.mixer-fx-summary{display:flex;flex-direction:column;gap:3px;min-height:24px;margin:0 8px;overflow:hidden}
.mixer-fx-summary small{font-size:8px;color:var(--muted)}
.mixer-fx-summary>span{font-size:8px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mixer-arrangement{display:flex;gap:6px;flex:none;min-height:25px;margin:0 6px;padding:3px 5px;border:1px solid var(--line);border-radius:7px;font-size:10px;color:var(--muted)}
.mixer-channel-drawer{flex:0 0 var(--mixer-drawer-width);width:var(--mixer-drawer-width);min-width:0;overflow:auto;overflow-anchor:none;border-left:1px solid var(--line);background:var(--panel)}
.mixer-channel:not(.channel-expanded) .mixer-channel-drawer{visibility:hidden}
.mixer-master-effects{padding:12px;min-width:0}
.mixer-master-effects h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.mixer-master-effects h3>span{flex:1;min-width:0}.mixer-master-effects h3>button{flex:none;width:28px;height:28px}
.mixer-drawer-tabs{display:flex;gap:4px;padding:3px;margin-bottom:14px;border:1px solid var(--line);border-radius:7px;background:var(--bg)}
.mixer-drawer-tabs button{flex:1;min-height:32px;padding:5px;font-size:11px;color:var(--muted)}
.mixer-drawer-tabs button[aria-pressed=true]{background:var(--raised);color:var(--text)}
.mixer-drawer-tabs .ph-icon{width:17px;height:17px;font-size:17px}
.mixer-channel-drawer[data-panel=routing] #master-effect-body,.mixer-channel-drawer[data-panel=effects] .mixer-routing{display:none}
.mixer-channel-drawer #master-effect-body{overflow:visible}
.mixer-channel-drawer .effect-chain-toolbar{flex-wrap:wrap;gap:8px}
.mixer-channel-drawer .effect-chain-toolbar strong{font-size:12px}
.mixer-channel-drawer .effect-chain-toolbar button{font-size:11px;min-height:30px;padding:5px 9px}
.mixer-channel-drawer .effect-row-header>button{min-width:24px;padding:2px}
.mixer-channel-drawer .effect-edit strong{font-size:11px}
.mixer-channel-drawer .effect-edit small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:9px;line-height:1.4}
.mixer-channel-drawer .effect-row-body{padding:10px}
.mixer-channel-drawer .effect-controls{gap:12px}
.mixer-routing{padding:0;color:var(--text)}
.mixer-routing summary{cursor:pointer;padding:4px 0 12px;font-size:12px;font-weight:600}
.routing-flow{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);align-items:center;gap:8px;padding:14px 9px;border:1px solid var(--line);border-radius:8px;background:var(--bg);margin-bottom:16px}
.routing-flow>span{display:flex;align-items:center;flex-direction:column;gap:7px;min-width:0;text-align:center}
.routing-flow strong{font-size:11px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.routing-flow .ph-icon{color:var(--track-color,var(--muted));width:20px;height:20px;font-size:20px}
.routing-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-bottom:20px}
.routing-controls label{display:grid;gap:7px;min-width:0;font-size:11px;color:var(--muted)}
.routing-controls label>span{display:flex;align-items:center;gap:7px}
.routing-controls select{min-width:0;width:100%;max-width:100%;padding:8px;background:var(--bg);border:1px solid var(--line);color:var(--text);font-size:12px}
.routing-controls .sodium-picker,.routing-controls .sodium-picker-trigger{min-width:0;width:100%}
.routing-send-section>header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:14px 0 10px}
.routing-send-section>header>strong{font-size:12px;font-weight:600}
.routing-send-section>header>div{display:flex;gap:5px}
.routing-send-section>header button{min-height:28px;padding:4px 7px;border:1px solid var(--line);font-size:10px}
.routing-sends{display:flex;flex-direction:column;gap:9px}
.routing-send{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.routing-send>div:first-child{display:grid;grid-template-columns:18px minmax(0,1fr);gap:4px 7px;min-width:0}
.routing-send strong{font-size:11px;overflow-wrap:anywhere;font-weight:500}.routing-send small{grid-column:2;font-size:10px;color:var(--muted)}
.routing-send .rotary-control{flex:none}.routing-empty{font-size:11px;line-height:1.6;color:var(--muted);margin:0;padding:12px 0}
.workarea:has(>#main-editor.mixer-inline-inspector)>.detail{display:none}.workarea:has(>#main-editor.mixer-inline-inspector)>#main-editor{flex:1;min-height:0}
@media(max-width:760px){.mixer-inline-inspector{--mixer-strip-width:104px;--mixer-drawer-width:286px}.mixer{padding:10px;gap:10px}.mixer-channel{min-height:440px}.mixer-controls{padding-inline:7px;gap:4px}.mixer-cap{height:25px}.mixer-channel-drawer .effect-row-header{grid-template-columns:18px minmax(0,1fr) repeat(4,24px);gap:2px;padding-inline:5px}.mixer-channel-drawer .effect-number{width:17px;height:17px}.mixer-channel-drawer .effect-row-header>button{min-width:22px}}
@media(prefers-reduced-motion:reduce){.mixer-channel{transition:none}}