/* Device geometry follows the native reference. Cards retain their intrinsic
   size when the lower panel grows; only an explicitly expanded EQ gets wider. */
body .studio .detail-area .device-panel { overflow-x:auto; overflow-y:hidden; }
@media (max-height:410px) { body .studio .detail-area .device-panel { overflow-y:auto; } }
body .studio .device-chain { align-items:flex-start; gap:6px; height:100%; box-sizing:border-box; }
/* One shared device scale keeps waveform, labels and controls proportional.
   CSS zoom participates in layout, so the chain can scroll to every device. */
body .studio .device-chain>.device-card,
body .studio .device-chain>.midi-effects { zoom:var(--device-scale,1.35); }
body .studio .device-drop { position:relative; align-self:stretch; min-height:0; }
body .studio .device-drop .device-picker { position:absolute; top:calc(50% + 12px); left:50%; transform:translateX(-50%); max-width:100%; opacity:0; pointer-events:none; }
body .studio .device-drop:is(:hover,:focus-within) .device-picker { opacity:1; pointer-events:auto; }
@media (hover:none) { body .studio .device-drop .device-picker { opacity:1; pointer-events:auto; } }
/* Colors and LiveSans come from REA-extracted .ask/TTF files. Corner geometry
   is calibrated to the supplied screenshot; no decoded native radius claim. */
body .studio .device-card { position:relative; --device-body-height:141px; background:var(--live-surface); color:var(--live-text); border-color:var(--live-clip-border); border-radius:3px; overflow:hidden; box-shadow:none; height:158px; min-height:158px; max-height:158px; }
body .studio .device-card.selected>.device-head { background:var(--live-selection-muted); color:var(--live-text); }
body .studio .device-head .device-route-label { display:none; }
body .studio .device-card .knob-control { --knob-color:var(--live-knob-range,var(--live-curve)); padding:1px; background:conic-gradient(from 225deg,var(--knob-color) 0deg var(--knob-fill),var(--live-knob-track,var(--live-frame)) var(--knob-fill) 270deg,transparent 270deg 360deg); }
body .studio .device-card .knob-control>i { background:var(--live-knob-needle,var(--live-frame)); }
body .studio .device-card input[data-knob] { border:0!important; background:var(--live-surface)!important; }
body .studio .device-card .device-value-editor { color:var(--live-curve); font-variant-numeric:tabular-nums; }
body .studio .device-card :is(.device-value-editor,.eq-number,.device-enum select) { border-radius:0; }
body .studio .device-card .device-head { gap:3px; padding:0 3px; }
body .studio .device-card .device-head button[data-device-toggle] { width:10px; height:10px; min-width:10px; font-size:0; border-radius:50%; border:1px solid var(--live-clip-border); background:var(--live-accent); }
body .studio .device-card .device-head button[data-device-toggle][aria-pressed=false] { background:var(--live-field); }
body .studio .device-card>.device-head { height:15px; min-height:15px; flex:0 0 15px; background:var(--live-highlight); border-radius:2px 2px 0 0; }
body .studio .device-card :is(.eq-display,.native-device-display,.legacy-response-display) { border-radius:1px; overflow:hidden; }
body .studio .device-head strong { font-size:9px; line-height:13px; }
body .studio .device-card select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--live-muted) 50%),linear-gradient(135deg,var(--live-muted) 50%,transparent 50%); background-position:calc(100% - 5px) 50%,calc(100% - 2px) 50%; background-size:3px 3px; background-repeat:no-repeat; }
body .studio .device-card select:not([hidden]) { padding-right:8px; }

body .studio .eq-eight-card { width:399px; min-width:399px; max-width:none; overflow:hidden; }
body .studio .eq-eight-card.eq-expanded { width:699px; min-width:699px; max-width:none; }
body .studio .detail-area:has(.device-panel:not([hidden]) .eq-eight-card) { min-height:0; }
body .studio .eq-eight-card .device-head { position:relative; }
body .studio .eq-eight-card .device-head strong { padding-left:9px; }
body .studio .eq-eight-card .device-head [data-eq-expand] { position:absolute; left:14px; top:2px; width:9px; height:11px; padding:0; font-size:9px; background:none; border:0; border-radius:0; color:var(--live-text); }
body .studio .eq-eight-card .device-head [data-eq-expand][aria-pressed=true] { transform:rotate(90deg); }
body .studio .eq-eight-card .eq-eight-body { display:grid; grid-template-columns:40px minmax(0,1fr) 45px; grid-template-rows:minmax(0,1fr); gap:2px; height:var(--device-body-height); min-height:var(--device-body-height); flex:0 0 var(--device-body-height); padding:2px 2px 1px; }
body .studio .eq-eight-card .eq-eight-controls { width:auto; min-width:0; min-height:0; padding:0 1px; gap:0; display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); }
body .studio .eq-eight-card .eq-eight-controls label { position:relative; height:auto; min-height:0; margin:0; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:0; font-size:8px; line-height:10px; }
body .studio .eq-eight-controls .device-automation-indicator { position:absolute; left:0; top:1px; margin:0; }
body .studio :is(.channel-eq-layout,.compressor-layout,.delay-layout,.reverb-layout,.overdrive-layout) label { position:relative; }
body .studio :is(.channel-eq-layout,.compressor-layout,.delay-layout,.reverb-layout,.overdrive-layout) label>.device-automation-indicator { position:absolute; left:0; top:1px; margin:0; }
body .studio .eq-eight-card .eq-eight-controls .knob-control { width:22px; height:22px; min-height:22px; flex:0 0 22px; padding:1px; }
body .studio .eq-eight-card .eq-eight-controls .knob-control { --knob-face-size:20px; }
body .studio .eq-eight-card .eq-eight-controls .eq-number { width:33px; max-width:100%; height:12px; min-height:12px; padding:0; margin:0; text-align:center; background:transparent; color:var(--live-text); border:0; font-size:8px; line-height:11px; font-variant-numeric:tabular-nums; }
body .studio .eq-eight-card .eq-eight-controls .eq-unit { position:absolute; right:-1px; bottom:1px; font-size:8px; line-height:10px; pointer-events:none; }
body .studio .eq-eight-main { display:flex; flex-direction:column; min-width:0; min-height:0; }
body .studio .eq-eight-card .eq-display { height:auto; min-height:0; flex:1; margin:0; border:1px solid var(--live-frame); }
body .studio .eq-eight-card .eq-display svg { width:100%; height:100%; }
body .studio .eq-eight-card .device-grid { stroke-width:.4; stroke:var(--live-grid-major); }
body .studio .eq-eight-card .eq-eight-bands { height:25px; min-height:25px; flex:0 0 25px; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:3px; padding:2px 0 0; border:0; }
body .studio .eq-filter-band { display:flex; flex-direction:column; gap:1px; min-width:0; }
body .studio .eq-filter-type { position:relative; display:flex; align-items:center; justify-content:space-between; height:11px; min-height:11px; padding:0 1px; background:var(--live-field); color:var(--live-muted); border:1px solid var(--live-frame); }
body .studio .eq-filter-type svg { width:22px; height:9px; flex:1; min-width:0; }
body .studio .eq-filter-type path { fill:none; stroke:currentColor; stroke-width:.9; vector-effect:non-scaling-stroke; }
body .studio .eq-filter-type>span { font-size:7px; line-height:8px; }
body .studio .eq-eight-bands .eq-filter-type select { position:absolute; inset:0; width:100%; max-width:100%; height:100%; padding:0; margin:0; opacity:0; cursor:pointer; }
body .studio .eq-filter-type:focus-within { outline:1px solid var(--live-selection); }
body .studio .eq-filter-switch { display:flex; align-items:center; gap:2px; min-width:0; height:10px; }
body .studio .eq-eight-bands .eq-filter-switch button { height:10px; min-height:10px; min-width:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--live-muted); font-size:8px; line-height:10px; }
body .studio .eq-eight-bands .eq-band-activator { flex:0 0 7px; width:7px; height:7px!important; min-height:7px!important; background:var(--live-field)!important; border:1px solid var(--live-frame)!important; }
body .studio .eq-eight-bands .eq-band-activator[aria-pressed=true] { background:var(--live-curve)!important; }
body .studio .eq-eight-bands [data-band-select] { flex:1; text-align:left; }
body .studio .eq-eight-bands [data-band-select][aria-pressed=true] { color:var(--live-text); }
body .studio .eq-filter-band.current .eq-filter-type { color:var(--live-text); }
body .studio .eq-eight-global { display:flex; flex-direction:column; justify-content:flex-start; min-width:0; gap:4px; padding:0 0 0 1px; border-left:1px solid var(--live-frame); font-size:8px; line-height:10px; }
body .studio .eq-analysis-controls { display:flex; gap:1px; align-items:center; }
body .studio .eq-analysis-controls button { flex:0 0 11px; width:11px; height:11px; padding:0; border:1px solid var(--live-frame); border-radius:0; font-size:8px; line-height:9px; background:var(--live-field); color:var(--live-muted); }
body .studio .eq-analysis-controls button[aria-pressed=true] { background:var(--live-accent); color:var(--live-on-text); }
body .studio .eq-analysis-controls select { width:26px; min-width:0; height:12px; padding:0; margin:0; font-size:7px; border:1px solid var(--live-frame); border-radius:0; color:var(--live-text); background-color:var(--live-field); }
body .studio .eq-stereo-mode { display:flex; flex-direction:column; gap:1px; color:var(--live-muted); }
body .studio .eq-mode-value { background:var(--live-field); color:var(--live-text); text-align:center; }
body .studio .eq-global-control { display:flex; flex-direction:column; gap:1px; font-size:8px; line-height:10px; min-width:0; }
body .studio .eq-global-control .device-value { display:flex; height:12px; min-height:12px; width:100%; background:var(--live-field); gap:0; align-items:center; justify-content:center; }
body .studio .eq-global-control .device-value-editor { box-sizing:border-box; width:0; min-width:0; flex:1; max-width:100%; height:12px; padding:0; margin:0; border:0; color:var(--live-curve); text-align:right; background:transparent; font-size:8px; line-height:10px; }
body .studio .eq-global-control .device-value-unit { font-size:7px; line-height:10px; flex:none; color:var(--live-muted); }
body .studio .eq-global-control .device-value-editor:focus { outline:1px solid var(--live-selection); }

/* Legacy devices retain only controls that actually reach their web DSP. */
body .studio .channel-eq-card { width:174px; min-width:174px; }
body .studio .channel-eq-layout { height:var(--device-body-height); display:flex; flex-direction:column; }
body .studio .channel-eq-layout .eq-display { flex:1; height:auto; min-height:0; margin:3px; }
body .studio .channel-eq-layout .device-knobs { min-height:57px; height:57px; padding-top:2px; }
body .studio .device-card.compressor-card { width:270px; min-width:270px; }
body .studio .compressor-layout { display:grid; grid-template-columns:102px minmax(0,1fr) 16px; height:var(--device-body-height); gap:4px; padding:4px; }
body .studio .compressor-envelope { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:4px; }
body .studio .compressor-envelope>label,body .studio .reverb-output>label { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; font-size:8px; line-height:10px; }
body .studio .compressor-characteristic { display:flex; flex-direction:column; min-width:0; }
body .studio .legacy-response-display { flex:1; min-height:0; background:var(--live-display); border:1px solid var(--live-frame); }
body .studio .legacy-response-display svg { display:block; height:100%; width:100%; }
body .studio .legacy-display-grid { fill:none; stroke:var(--live-grid-major); stroke-width:.4; }
body .studio [data-legacy-response] { fill:none; stroke:var(--live-curve); stroke-width:1.1; vector-effect:non-scaling-stroke; }
body .studio .compressor-readouts { height:15px; min-height:15px; margin:0; padding:2px 0; font-size:8px; line-height:10px; display:flex; justify-content:space-between; }
body .studio .compressor-readouts b { font-weight:400; color:var(--live-curve); }
body .studio .compressor-gr { position:relative; margin-top:12px; border:1px solid var(--live-frame); background:var(--live-display); }
body .studio .compressor-gr>span { position:absolute; top:-12px; font-size:7px; line-height:10px; }
body .studio .compressor-gr i { display:block; position:absolute; top:0; left:2px; right:2px; height:0; background:var(--live-curve); }
body .studio .delay-card { width:307px; min-width:307px; }
body .studio .delay-layout { display:grid; grid-template-columns:73px minmax(0,1fr) 48px; grid-template-rows:minmax(0,1fr); height:var(--device-body-height); padding:4px; gap:6px; }
body .studio .delay-layout h4,body .studio .reverb-layout h4 { margin:0 0 3px; font-size:8px; line-height:11px; font-weight:400; color:var(--live-muted); }
body .studio .delay-sync { display:flex; flex-direction:column; gap:2px; border-right:1px solid var(--live-highlight); padding-right:5px; }
body .studio .delay-sync>label { display:flex; flex-direction:column; align-items:center; gap:1px; font-size:8px; line-height:10px; }
body .studio .delay-divisions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; }
body .studio .delay-divisions button { height:13px; padding:0; border:1px solid var(--live-frame); border-radius:0; background:var(--live-field); color:var(--live-text); font-size:8px; line-height:11px; }
body .studio .delay-divisions button[aria-pressed=true] { background:var(--live-accent); color:var(--live-on-text); }
body .studio .delay-feedback { display:flex; flex-direction:column; min-width:0; min-height:0; }
body .studio .delay-feedback .device-knobs { grid-template-columns:repeat(2,minmax(0,1fr)); min-height:56px; height:56px; padding:2px 0 0; }
body .studio .reverb-card { width:425px; min-width:425px; }
body .studio .reverb-layout { display:grid; grid-template-columns:minmax(0,1fr) 47px; grid-template-rows:minmax(0,1fr); height:var(--device-body-height); padding:4px; gap:6px; }
body .studio .reverb-layout>section { display:flex; flex-direction:column; min-width:0; min-height:0; }
body .studio .reverb-output { display:flex; flex-direction:column; justify-content:flex-end; border-left:1px solid var(--live-clip-border); padding:0 2px; }
body .studio .overdrive-card { width:100px; min-width:100px; }
body .studio .overdrive-layout { display:flex; flex-direction:column; height:var(--device-body-height); padding:4px; gap:3px; }
body .studio .overdrive-layout .device-knobs { grid-template-columns:repeat(2,minmax(0,1fr)); min-height:56px; height:56px; padding:0; }
body .studio :is(.compressor-envelope,.delay-sync,.reverb-output) .device-value { display:flex; align-items:center; width:100%; height:13px; min-width:0; font-size:8px; justify-content:center; }
body .studio :is(.compressor-envelope,.delay-sync,.reverb-output) .device-value-editor { box-sizing:border-box; flex:0 1 auto; width:var(--device-readout-width,3ch); min-width:0; height:13px; border:0; background:transparent; color:var(--live-text); text-align:right; font-size:8px; padding:0; }

body .studio .delay-repeats { display:flex; flex-direction:column; min-height:0; min-width:0; padding-top:0; padding-bottom:30px; }
body .studio .delay-output { display:flex; align-items:flex-end; min-width:0; border-left:1px solid var(--live-clip-border); padding-left:3px; }
body .studio :is(.delay-output,.delay-feedback-control,.reverb-time-control)>label { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; width:100%; font-size:8px; line-height:10px; }
body .studio .delay-time-value>label { display:flex; justify-content:center; gap:2px; font-size:8px; line-height:12px; min-width:0; }
body .studio .delay-time-value .knob-control { display:none; }
body .studio .delay-time-value .device-value { min-width:0; max-width:48px; height:12px; justify-content:center; }
body .studio .delay-time-value .device-value-editor { min-width:0; width:26px; padding:0; text-align:right; font-size:8px; }
body .studio .delay-time-value .device-value-unit { font-size:8px; }
body .studio .delay-feedback-control { margin-top:auto; }
body .studio .legacy-display-axis { display:flex; justify-content:space-between; font-size:7px; line-height:9px; height:10px; color:var(--live-muted); }
body .studio .reverb-decay .legacy-response-display { flex:0 0 61px; }
body .studio .reverb-time-control { width:50px; margin-top:auto; }
body .studio :is(.delay-output,.delay-feedback-control,.reverb-time-control) .device-value { display:flex; height:12px; min-width:0; width:100%; font-size:8px; align-items:center; justify-content:center; }
body .studio :is(.delay-output,.delay-feedback-control,.reverb-time-control) .device-value-editor { min-width:0; width:var(--device-readout-width,3ch); flex:0 1 auto; text-align:right; padding:0; height:12px; border:0; background:transparent; font-size:8px; }
body .studio :is(.overdrive-layout,.channel-eq-layout) .device-value { display:flex; align-items:center; min-width:0; max-width:100%; gap:0; height:12px; justify-content:center; }
body .studio :is(.overdrive-layout,.channel-eq-layout) .device-value-editor { min-width:0; width:var(--device-readout-width,3ch); flex:0 1 auto; padding:0; text-align:right; font-size:8px; height:12px; border:0; background:transparent; }
body .studio .overdrive-layout .device-knobs { gap:2px; }
body .studio .overdrive-layout .device-knobs label { font-size:8px; line-height:10px; }
body .studio .device-card .knob-control>i { left:calc(50% - .5px); top:2px; height:calc(50% - 2px); transform-origin:50% 100%; }

/* 12.3 EQ globals retain the native narrow utility column. */
body .studio .live123-card.eq-eight-card .eq-eight-global { gap:1px; }
body .studio .live123-card.eq-eight-card .eq-eight-global .live-device-control { gap:0; font-size:8px; line-height:9px; align-items:stretch; text-align:left; }
body .studio .live123-card.eq-eight-card .eq-eight-global :is(input,select) { height:12px; min-height:12px; max-width:100%; min-width:0; padding:0; border:1px solid var(--live-frame); border-radius:0; font:8px LiveSans,Arial,sans-serif; color:var(--live-curve); background-color:var(--live-field); }
body .studio .live123-card.eq-eight-card .eq-eight-global .live-device-readout { display:flex; gap:0; }
body .studio .live123-card.eq-eight-card .eq-eight-global .live-device-readout input { flex:1; width:0; text-align:right; }
body .studio .live123-card.eq-eight-card .eq-eight-global .live-device-readout small { font-size:8px; }
body .studio .live123-card.eq-eight-card .eq-eight-global .live-device-toggle { flex-direction:row; align-items:center; justify-content:space-between; min-height:12px; }
body .studio .live123-card.eq-eight-card .eq-eight-global input[type=checkbox] { appearance:none; width:8px; height:8px; min-height:8px; margin:0; }
body .studio .live123-card.eq-eight-card .eq-eight-global input[type=checkbox]:checked { background:var(--live-accent); }
body .studio .live123-card.eq-eight-card .eq-eight-global .device-automation-indicator { font-size:5px; }
body .studio .live-device-version { margin-left:auto; font-size:7px; line-height:11px; color:var(--live-muted); }
body .studio .device-head .live-upgrade { margin-left:auto; width:auto; min-width:21px; height:11px; min-height:11px; padding:0 2px; border:1px solid var(--live-frame); border-radius:2px; font-size:7px; line-height:9px; background:var(--live-field); color:var(--live-muted); }
.live-sidechain-source { display:flex; gap:4px; align-items:center; font:9px LiveSans,Arial,sans-serif; padding:3px; }
.live-sidechain-source select { min-width:0; max-width:150px; }