/* The Mixer (mixer-ui.js): three channel strips in the panel's Mixer card. The house language: Helvetica at the
   house sizes, flat, no glow; a strip's ink (its track's deal ink, Master white) marks its name, its knobs' sweep,
   its fader cap and its meter, and nothing else. */
body.field-ui #panel-audio .space-stage[data-page=mixer]{width:min(780px,calc(100% - 24px))}
body.field-ui #panel-audio .space-stage[data-group=mixer] .field-footer>.field-action{display:none}
body.field-ui #panel-audio .field-mixer.menu-current{display:block}
body.field-ui #panel-audio .field-mixer .mixer-note{margin:0 0 12px;color:var(--note-text-muted);font:var(--note-weight-text) var(--note-text-xs)/var(--note-leading) var(--note-font)}

/* Strips side by side, a hairline between them. */
body.field-ui #panel-audio .mixer-strips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
body.field-ui #panel-audio .mixer-strip{
 --strip-ink:#ffffff;
 display:grid;grid-template-columns:minmax(0,1fr) 64px;grid-template-rows:auto 1fr auto;grid-template-areas:'name name' 'knobs level' 'reset level';
 gap:4px 12px;min-width:0;padding:0 18px;border-left:1px solid var(--note-rule)
}
body.field-ui #panel-audio .mixer-strip:first-child{padding-left:0;border-left:0}
body.field-ui #panel-audio .mixer-strip:last-child{padding-right:0}
body.field-ui #panel-audio .mixer-strip[data-disabled]{opacity:.45}

/* Name: a chip of the strip's ink, the name, and what it plays. */
body.field-ui #panel-audio .mixer-name{grid-area:name;display:grid;grid-template-columns:10px minmax(0,1fr);align-items:center;column-gap:8px;margin:0 0 6px}
body.field-ui #panel-audio .mixer-swatch{width:10px;height:10px;border-radius:2px;background:var(--strip-ink)}
body.field-ui #panel-audio .mixer-name strong{color:var(--note-text);font:var(--note-weight-label) var(--note-text-sm)/1.3 var(--note-font)}
body.field-ui #panel-audio .mixer-name small{grid-column:2;overflow:hidden;color:var(--note-text-muted);font:var(--note-weight-text) var(--note-text-xs)/1.3 var(--note-font);text-overflow:ellipsis;white-space:nowrap}

/* Knobs: High, Mid, Low and (tracks) Pan, two by two. */
body.field-ui #panel-audio .mixer-knobs{grid-area:knobs;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;align-content:start}
body.field-ui #panel-audio .mixer-knob{display:flex;flex-direction:column;align-items:center;gap:0;margin:0;min-width:0}
body.field-ui #panel-audio .mixer-knob>label{margin:0 0 4px;color:var(--note-text-muted);font:var(--note-weight-text) var(--note-text-xs)/1.2 var(--note-font)}
body.field-ui #panel-audio .mixer-knob .field-dial{width:44px;height:44px}
body.field-ui #panel-audio .mixer-strip .field-dial::before{background:conic-gradient(from 225deg,var(--strip-ink) 0deg var(--sweep,0deg),transparent var(--sweep,0deg));filter:none}
body.field-ui #panel-audio .mixer-knob>.field-value{min-width:44px;min-height:32px;margin-top:-2px}
body.field-ui #panel-audio .mixer-strip .panel-val{color:var(--note-text);font:var(--note-weight-text) var(--note-text-xs)/1 var(--note-font);font-variant-numeric:var(--note-numeric)}

/* Level: a vertical fader with a 0 dB tick, the meter beside it, the dB readout under it. */
body.field-ui #panel-audio .mixer-level{grid-area:level;display:flex;flex-direction:column;align-items:center;min-height:0}
/* The fader (role=slider, mixer-ui.js): the whole column takes the pointer (44px wide, the travel's full height);
   only it stops the browser's touch gestures. The line, the 0 dB tick, the cap and the meter are drawn inside it. */
body.field-ui #panel-audio .mixer-fader{position:relative;flex:1;width:44px;min-height:180px;touch-action:none;cursor:ns-resize;outline:none;-webkit-user-select:none;user-select:none}
body.field-ui #panel-audio .mixer-fader.is-dragging{cursor:grabbing}
body.field-ui #panel-audio .mixer-fader[aria-disabled=true]{cursor:default}
body.field-ui #panel-audio .mixer-fader:focus-visible{outline:1px solid var(--note-text);outline-offset:3px;border-radius:var(--note-radius-focus)}
body.field-ui #panel-audio .mixer-line{position:absolute;left:15px;top:6px;bottom:6px;width:2px;border-radius:1px;background:var(--note-track);pointer-events:none}
/* The cap: a flat key cap with a line of the strip's ink, centred on the travel at --pos. */
body.field-ui #panel-audio .mixer-cap{position:absolute;left:2px;width:28px;height:12px;bottom:calc((100% - 12px) * var(--pos,.75));border-radius:3px;background:#1c1c1b;box-shadow:inset 0 0 0 1px var(--note-rule);pointer-events:none}
body.field-ui #panel-audio .mixer-cap::after{content:'';position:absolute;left:4px;right:4px;top:5px;height:2px;background:var(--strip-ink)}
/* Held: the cap lights in the strip's ink. */
body.field-ui #panel-audio .mixer-fader.is-dragging .mixer-cap{background:color-mix(in srgb,var(--strip-ink) 38%,#1c1c1b)}
/* 0 dB sits three quarters up the travel (mixer-ui.js: UNITY), less the thumb's half height at each end. */
body.field-ui #panel-audio .mixer-unity{position:absolute;left:4px;width:24px;bottom:calc(6px + (100% - 12px) * .75);height:1px;background:var(--note-text-faint);pointer-events:none}
body.field-ui #panel-audio .mixer-meter{position:absolute;right:2px;top:6px;bottom:6px;width:4px;border-radius:1px;background:var(--note-track);overflow:hidden;pointer-events:none}
body.field-ui #panel-audio .mixer-rms{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--strip-ink)}
body.field-ui #panel-audio .mixer-peak{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--strip-ink);opacity:.6}
body.field-ui #panel-audio .mixer-level>.field-value{min-width:56px;min-height:32px}
body.field-ui #panel-audio .mixer-db{white-space:nowrap}

body.field-ui #panel-audio .mixer-reset{grid-area:reset;justify-self:start;align-self:end;min-height:var(--note-target);padding:0;color:var(--note-text-muted);font:var(--note-weight-text) var(--note-text-xs)/1 var(--note-font)}
body.field-ui #panel-audio .mixer-reset:not(:disabled):hover{color:var(--note-text)}

/* Phones: the strips scroll sideways, one and a bit at a time. */
@media(max-width:700px){
 body.field-ui #panel-audio .mixer-strips{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
 body.field-ui #panel-audio .mixer-strip{scroll-snap-align:start;padding:0 14px}
 body.field-ui #panel-audio .mixer-strip:first-child{padding-left:0}
}
@media(prefers-reduced-motion:reduce){body.field-ui #panel-audio .mixer-meter{display:none}}