/* Styles for the Live-faithful drills (mixer with returns, Clip View, Arrangement View, Operator).
   Everything is built from the --dev* device variables so the app theme carries over. */
.lv-well{background:color-mix(in srgb,var(--dev2) 70%,#000)}

/* ---------- mixer with returns ---------- */
.rmix .strip{min-width:92px}
.rmix .strip.ret{background:color-mix(in srgb,var(--dev2) 85%,var(--teal) 15%);border-color:var(--devline)}
.rmix .strip.sendsonly .strip-name{outline:1px solid var(--devacc);outline-offset:-1px}
.rt-io{width:100%}.rt-io .k-label{font-size:10px;color:var(--devtext);opacity:.75}
.rt-io select{width:100%;background:color-mix(in srgb,var(--dev2) 70%,#000);border:1px solid var(--devline);border-radius:3px;color:var(--devtext);font-size:11px;padding:2px}
.rt-sends{display:flex;flex-direction:column;gap:2px;align-items:center}
.rt-sends .knob{width:78px}
.rt-pp{width:100%}
.rt-act{min-width:30px}

/* ---------- clip view ---------- */
.clipview{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-start}
.cv-box{background:color-mix(in srgb,var(--dev2) 70%,#000);border:1px solid var(--devline);border-radius:3px;padding:3px 8px;font-size:12px;margin-top:2px;color:var(--devtext)}
.cv-seg .k-label,.cv-lbl{font-size:11px;color:var(--devtext);opacity:.8}
.cv-sub{display:flex;gap:10px;align-items:flex-start}
.cvw{height:90px}

/* ---------- arrangement view ---------- */
.arr{background:var(--dev);border:1px solid var(--devline);border-radius:6px;margin-bottom:14px;color:var(--devtext);user-select:none;-webkit-user-select:none}
.arr-bar{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:6px 8px;border-bottom:1px solid var(--devline);font-size:11.5px}
.arr-bar .mono{font-size:11px}
.arr-main{display:grid;grid-template-columns:minmax(0,1fr) 112px}
.arr-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.arr-canvas{position:relative}
.arr-ruler,.arr-locs{position:relative;height:18px;border-bottom:1px solid var(--devline);background:color-mix(in srgb,var(--dev2) 70%,#000);cursor:pointer}
.arr-locs{height:20px}
.arr-ruler span{position:absolute;top:2px;font:10px var(--mono);opacity:.75;transform:translateX(2px)}
.arr-loc{position:absolute;top:2px;height:16px;padding:0 5px 0 4px;font-size:10.5px;line-height:16px;white-space:nowrap;background:var(--devline);border-left:2px solid var(--devacc);border-radius:0 3px 3px 0;cursor:pointer}
.arr-loc:hover{background:color-mix(in srgb,var(--devline) 70%,var(--devacc))}
.arr-lane{position:relative;height:42px;border-bottom:1px solid var(--devline)}
.arr-lane.drop{background:color-mix(in srgb,var(--dev) 85%,var(--devacc))}
.arr-grid{position:absolute;top:0;bottom:0;width:1px;background:var(--devline);opacity:.55;pointer-events:none}
.arr-grid.bar4{opacity:1}
.arr-sec{position:absolute;top:0;bottom:0;background:var(--devtext);opacity:.035;pointer-events:none}
.arr-clip{position:absolute;top:2px;bottom:2px;border-radius:2px;overflow:hidden;cursor:grab;touch-action:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.arr-clip .cname{display:block;font-size:10px;line-height:13px;padding:0 4px;white-space:nowrap;overflow:hidden;color:#111;background:rgba(255,255,255,.35)}
.arr-clip canvas{position:absolute;left:0;top:13px;width:100%;height:calc(100% - 13px);opacity:.75}
.arr-clip.sel{box-shadow:inset 0 0 0 2px #fff}
.arr-clip .rh{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize}
.arr-clip .rh.r{right:0}.arr-clip .rh.l{left:0}
.arr-clip.diff{outline:2px solid var(--red);outline-offset:-2px}
.arr-ghost{position:absolute;top:2px;bottom:2px;border:1px dashed var(--red);border-radius:2px;pointer-events:none;opacity:.8}
.arr-play{position:absolute;top:0;bottom:0;width:1.5px;background:var(--devtext);pointer-events:none;z-index:3}
.arr-ins{position:absolute;top:0;bottom:0;width:1px;background:var(--devacc);pointer-events:none;z-index:2}
.arr-heads{border-left:1px solid var(--devline)}
.arr-hsp{height:39px;border-bottom:1px solid var(--devline);background:color-mix(in srgb,var(--dev2) 70%,#000)}
.arr-th{height:42px;border-bottom:1px solid var(--devline);display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 6px;background:var(--dev2)}
.arr-th .tn{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid var(--c);padding-left:5px}
.arr-th .tb{display:flex;gap:3px}
.arr-th .act,.arr-th .solo{width:24px;height:16px;font-size:10px}
.arr-browser{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-top:1px solid var(--devline)}
.arr-src{font-size:11px;padding:4px 8px;border-radius:3px;color:#111;cursor:grab;touch-action:none;border:2px solid transparent}
.arr-src.armed{border-color:#fff}
.arr-energy{position:relative;height:38px;border-bottom:1px solid var(--devline)}
.arr-energy i{position:absolute;bottom:0}
.arr-energy .tgt{border:1.5px solid var(--teal);border-bottom:0;background:color-mix(in srgb,var(--teal) 10%,transparent)}
.arr-energy .you{background:var(--devacc);opacity:.75}
.arr-rules .check{font-size:13px}

/* ---------- operator ---------- */
.op{display:grid;grid-template-columns:250px minmax(0,1fr) 110px;gap:8px}
.op-shells,.op-right{display:flex;flex-direction:column;gap:5px}
.op-shell{background:var(--dev2);border:1px solid var(--devline);border-radius:3px;padding:3px 4px}
.op-shell.sel{border-color:var(--devacc)}
.op-shell.off .op-sel{opacity:.55}
.op-sel{display:block;width:100%;text-align:left;background:none;border:0;color:var(--devtext);font-size:11px;font-weight:600;padding:1px 2px;cursor:pointer}
.op-shell.car .op-sel::after{content:" · out";font-weight:400;opacity:.6}
.op-sk{display:flex;gap:2px;justify-content:space-between}
.op-sk .knob{width:72px}
.op-disp{background:color-mix(in srgb,var(--dev2) 70%,#000);border:1px solid var(--devline);border-radius:3px;padding:6px;min-width:0}
.op-dhead{font-size:10.5px;opacity:.8;margin-bottom:4px}
.op-env{height:96px}
.op-ek{margin-top:6px}
.op-ek .knob{width:64px}
.op-galg{display:flex;flex-direction:column;align-items:center;font-size:10.5px}
.op-galg svg{width:64px;height:64px}
.op-algs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.op-algbtn{background:var(--dev2);border:1px solid var(--devline);border-radius:3px;padding:2px;cursor:pointer}
.op-algbtn.on{border-color:var(--devacc);background:color-mix(in srgb,var(--dev2) 75%,var(--devacc))}
.op-algbtn svg{width:100%;height:auto;display:block}
.op svg rect{fill:var(--dev);stroke:var(--devtext);stroke-width:1}
.op svg rect.car{fill:color-mix(in srgb,var(--dev) 60%,var(--devacc))}
.op svg text{fill:var(--devtext);font:700 8px var(--mono);text-anchor:middle}
.op svg line{stroke:var(--devtext);stroke-width:1.2;opacity:.8}
.op svg .outl{stroke:var(--devacc)}

@media (max-width:760px){
  .rmix .strip{min-width:86px}
  .op{grid-template-columns:1fr}
  .op-right{flex-direction:row}
  .op-gshell{flex:1}.op-galg{flex-direction:row;gap:10px}
  .op-sk .knob{width:31%}
  .arr-main{grid-template-columns:minmax(0,1fr) 84px}
  .arr-th .tb{display:none}
}

/* timed reps */
.clock{font-size:12.5px;padding:3px 8px;border:1px solid var(--line);border-radius:5px;color:var(--text)}
.clock.late{border-color:var(--red);color:var(--red)}

/* warp session clip slots */
.cv-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-bottom:10px}
.cv-slot{text-align:left;background:var(--dev2);border:1px solid var(--devline);border-radius:4px;color:var(--devtext);padding:6px 8px;cursor:pointer;font-size:12.5px}
.cv-slot b{color:var(--devacc);margin-right:4px}.cv-slot small{display:block;opacity:.7;font-size:11px}
.cv-slot.sel{border-color:var(--devacc)}.cv-slot.done{box-shadow:inset 3px 0 0 var(--teal)}
.cv-job{font-size:15px}

/* return device chains */
.rt-chain{display:flex;flex-direction:column;gap:3px;width:100%;align-items:stretch}
.rt-dev{display:block;font-size:10.5px;text-align:center;background:color-mix(in srgb,var(--dev2) 70%,#000);border:1px solid var(--devline);border-radius:3px;padding:2px 3px;color:var(--devtext)}
.rt-dev.sat{border-color:var(--devacc)}
.rt-mv{display:flex;align-items:center;justify-content:space-between;gap:2px}
.rt-mv button{background:none;border:0;color:var(--devtext);cursor:pointer;padding:0 3px;font-size:10px}
.rt-mv button:disabled{opacity:.25;cursor:default}
.rt-add{font-size:10.5px;padding:2px 4px}
.rt-drive,.rt-pan{display:flex;justify-content:center}
.rmix .strip.ret{min-width:104px}

/* Live 12 Sample panel (Clip View) */
.cv{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:10px 14px;align-items:start}
.cv-l,.cv-r{display:flex;flex-direction:column;gap:8px}
.cv-r{align-items:center;border-left:1px solid var(--devline);padding-left:12px}
.cv-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cv-mode .chooser{min-width:160px}
.cv-modeparams{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-start}
.cv-modeparams .kcol{min-width:170px}
.cv-pill{border-radius:10px;padding:2px 9px}
.cv-gain{display:flex;gap:6px;align-items:stretch;height:120px}
.cv-gain .fader{height:120px}
.cv-scale{display:flex;flex-direction:column;justify-content:space-between;font:10px var(--mono);color:var(--devtext);opacity:.8}
.cv-scale b{font-weight:400}
.cv-gdb{font-size:11px}
.cv-pitchknob .k-label{display:none}
.cv-pboxes .vbox{width:48px}
.cv-bpmv .vbox{width:76px}
/* value box: a field with a fill bar, as Live draws Grain Size, Formants, Envelope */
.vbox{width:150px;align-items:stretch}
.vbox .vb{position:relative;height:22px;background:color-mix(in srgb,var(--dev2) 60%,#fff 8%);border:1px solid var(--devline);border-radius:2px;cursor:ew-resize;touch-action:none;overflow:hidden}
.vbox .vb i{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--teal) 70%,transparent)}
.vbox.nofill .vb i{display:none}
.vbox .k-val{position:relative;display:block;text-align:center;line-height:20px;background:none;border:0;min-width:0;margin:0;cursor:text}
.vbox .k-edit{width:100%;height:20px}
.knob.vbox.disabled{opacity:.35;pointer-events:none}
@media (max-width:760px){ .cv{grid-template-columns:1fr} .cv-r{border-left:0;padding-left:0;flex-direction:row;flex-wrap:wrap;gap:10px} .cv-gain,.cv-gain .fader{height:90px} .vbox{width:140px} }

/* Operator, laid out as in Live 12 (from Connor's screenshot) */
.op{grid-template-columns:330px minmax(0,1fr) 120px}
.op-shells{gap:3px}
.op-shell[data-op]{display:grid;grid-template-columns:auto 44px auto 26px;align-items:center;gap:4px;padding:2px 4px}
.op-shell[data-op] .op-sk{justify-content:flex-start}
.op-fixed{display:flex;flex-direction:column;align-items:center;gap:6px}
.op-fixed input{width:14px;height:14px}
.op-letter{width:22px;height:20px;border:1px solid var(--devtext);border-radius:2px;background:transparent;color:var(--devtext);font:700 11px var(--mono);cursor:pointer;padding:0}
.op-shell.sel .op-letter{background:var(--teal);color:#111;border-color:var(--teal)}
.op-shell.sel{border-color:var(--devline);background:color-mix(in srgb,var(--dev2) 85%,var(--teal) 15%)}
.op-sec{font-size:11.5px;border-bottom:1px solid var(--devline);margin:4px 0 6px;padding-bottom:2px;color:var(--devtext)}
.op-secs{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px}
.op-grid{display:flex;flex-wrap:wrap;gap:6px 10px}
.op-grid .vbox{width:76px}
.op-grid .vbox .vb{background:transparent;border-color:transparent}
.op-grid .vbox .k-val{color:var(--teal);text-align:left}
.op-grid .chooser{min-width:100px}
.op-gshell{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;cursor:pointer;color:var(--devtext)}
@media (max-width:760px){ .op{grid-template-columns:1fr} .op-shell[data-op]{grid-template-columns:1fr 40px auto 26px} .op-secs{grid-template-columns:1fr} }
.op-fixed .k-label{font-size:11px;color:var(--devtext);opacity:.8}

/* Session mixer, as in Live 12 (from Connor's screenshot) */
.rmix .strip{min-width:118px;align-items:stretch}
.rmix .strip-name{text-align:left;padding:4px 6px}
.rmix .strip.ret .strip-name.sel{outline:2px solid var(--devacc);outline-offset:-2px}
.rt-sendsec{display:flex;flex-direction:column;gap:2px}
.rt-sendsec .k-label{font-size:11px;color:var(--devtext);opacity:.8}
.rmix .rt-sends{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:0}
.rmix .rt-sends .knob{width:52px}
.rt-sends.dimmed{opacity:.45}
.rt-lower{display:flex;gap:6px;align-items:flex-start;justify-content:space-between}
.rt-lcol{display:flex;flex-direction:column;align-items:center;gap:5px}
.rt-vol{border:1px solid var(--devline);border-radius:9px;padding:0 8px;min-width:46px;text-align:center}
.rt-lcol .knob{width:52px}
.rt-pps{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.rt-pprow{display:flex;gap:6px;align-items:center}
.rmix .strip.master{min-width:96px}
.rt-dv{background:var(--dev);border-color:var(--devline);color:var(--devtext)}
.rt-dvbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:8px;font-size:13px}
.rt-fx{font-size:12px;padding:3px 9px;border:1px solid var(--devline);border-radius:3px;background:var(--dev2);cursor:grab;touch-action:none}
.rt-fx.armed{border-color:var(--devacc);color:var(--devacc)}
.rt-chainview{display:flex;gap:8px;overflow-x:auto;align-items:stretch;min-height:120px}
.rt-chainview .ldev{margin:0;min-width:170px}
.rt-chainview .ldev.sel{outline:2px solid var(--devacc);outline-offset:-1px}
.rt-drop{flex:1;min-width:150px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--devline);border-radius:6px;font-size:12.5px;opacity:.8}
/* Operator Global view: the 11 algorithm icons in one compact row, coloured squares as in Live */
.op-algs{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px}
.op-algbtn{background:transparent;border-color:transparent}
.op svg rect.car{fill:var(--dev)}
.op svg rect{stroke-width:1.4}
.op-gshell .op-galg svg{width:44px;height:44px}
.cv-tpair{flex-wrap:nowrap}.cv-tloop{min-width:56px}.cv-tloop select{font-size:13px}.cv-tenv{width:82px}
/* sends: A and C stacked on the left, B to the right (as Live lays out three returns) */
.rmix .rt-sends{display:grid;grid-template-columns:repeat(2,52px);grid-auto-flow:row;gap:0 2px}
.rmix .rt-sends .knob:nth-child(2){grid-column:2;grid-row:1 / span 2;align-self:center}
.rmix .rt-sends .knob:nth-child(3){grid-column:1;grid-row:2}
.rt-vol.vol{color:var(--devacc)}
/* Live's Delay */
.dl{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.dl-col{display:flex;flex-direction:column;gap:6px;align-items:center}
.dl-lr{display:flex;gap:6px;align-items:center}
.dl-side{display:flex;flex-direction:column;gap:4px;align-items:center}
.dl-side.off{opacity:.45;pointer-events:none}
.dl-grid{display:grid;grid-template-columns:repeat(2,26px);gap:3px}
.dl-grid .vbox{width:76px;grid-column:1 / span 2}
.dl-n{padding:2px 0;text-align:center}
.dl-link{padding:2px 6px}
.dl-mid{background:color-mix(in srgb,var(--dev2) 60%,#000);border:1px solid var(--devline);border-radius:3px;padding:8px;min-width:200px;align-self:stretch}
.dl-frow{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.dl-frow .vbox{width:84px}
.dl-right .ltoggle{width:96px}

/* Arrangement View as in Live 12 (from Connor's screenshot) */
.arr-main{grid-template-columns:minmax(0,1fr) 318px}
.arr-lane,.arr-mlane{height:96px;border-bottom:1px solid var(--devline);position:relative}
.arr-mlane{height:26px;background:color-mix(in srgb,var(--dev) 80%,#000)}
.arr-th{height:96px;display:grid;grid-template-columns:118px 96px 1fr;gap:4px;align-items:start;padding:3px 4px;background:var(--dev2)}
.arr-mth{height:26px;align-items:center}
.th-name{height:100%;background:var(--c);color:#111;border-radius:2px;padding:2px 4px;display:flex;gap:4px;align-items:flex-start;font-size:11.5px;font-weight:600;overflow:hidden}
.th-name .tn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-fold{opacity:.7}
.th-e{margin-left:auto;font-size:10px;opacity:.7;font-weight:400}
.th-io{display:flex;flex-direction:column;gap:2px}
.th-sel{width:100%;font-size:10.5px;background:color-mix(in srgb,var(--dev2) 50%,#fff 10%);color:var(--devtext);border:1px solid var(--devline);border-radius:2px;padding:0 2px;height:18px}
.th-mon{display:flex;gap:2px}.th-mon button{flex:1;font-size:10px;padding:0;height:17px;border:1px solid var(--devline);background:transparent;color:var(--devtext);border-radius:2px;cursor:pointer}
.th-mon button.on{background:var(--devacc);color:#111;border-color:var(--devacc)}
.th-mix{display:flex;flex-direction:column;gap:3px}
.th-row{display:flex;gap:3px;align-items:center}
.th-row .act{flex:1.4;height:18px;width:auto}.th-row .solo{flex:1;height:18px;width:auto}
.th-arm{flex:1;height:18px;border:1px solid var(--devline);border-radius:3px;background:transparent;color:var(--devtext);font-size:10px;cursor:pointer}
.th-arm.on{background:var(--red);color:#fff;border-color:var(--red)}
.th-vp .vbox{width:auto;flex:1}
.th-vp .vbox .vb{height:18px}.th-vp .vbox .k-val{line-height:16px;font-size:11px}
.th-vol .vb i{background:color-mix(in srgb,var(--teal) 80%,transparent)}
.arr-hsp{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:2px 4px}
.arr-set{padding:0 8px;border-radius:9px;font-size:11px}
.arr-lnav{display:flex;gap:4px}.arr-lnav button{background:transparent;border:1px solid var(--devline);color:var(--devtext);border-radius:50%;width:18px;height:18px;font-size:8px;padding:0;cursor:pointer}
.arr-loc{background:none;border:0;padding:0 4px 0 0;color:var(--devtext);font-size:11px}
.arr-loc::before{content:"▷";margin-right:3px}
.arr-loc.user{opacity:.85}
.arr-secs{position:relative;height:18px;border-top:1px solid var(--devline);background:color-mix(in srgb,var(--dev2) 70%,#000)}
.arr-secs span{position:absolute;top:2px;font:10px var(--mono);opacity:.75;transform:translateX(2px)}
.arr-hsec{border-top:1px solid var(--devline)}
.arr-gridlbl{position:absolute;right:6px;bottom:22px;font-size:16px;opacity:.35;pointer-events:none}
.arr-clip{background-clip:padding-box}
.arr-clip .cname{color:#111;background-blend-mode:normal;border-bottom:1px solid rgba(0,0,0,.25)}
.arr-clip.sel{background:#bfe9f2!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.arr-clip canvas{top:14px;height:calc(100% - 14px)}
@media (max-width:760px){ .arr-main{grid-template-columns:minmax(0,1fr) 128px} .arr-th{grid-template-columns:1fr;height:96px} .th-io{display:none} .arr-mth .th-mix{display:none} .arr-lane{height:96px} }
@media (max-width:760px){ .th-name{height:auto} }

/* Live's control bar (transport part), loop brace, time selection, clip fades */
.lcb{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:5px 8px;border-bottom:1px solid var(--devline);background:color-mix(in srgb,var(--dev) 85%,#fff 6%)}
.lcb-f{border:1px solid var(--devline);background:color-mix(in srgb,var(--dev2) 50%,#fff 10%);border-radius:2px;padding:1px 6px;font-size:12px;min-width:40px;text-align:center}
.lcb-pos{min-width:70px}
.lcb-b{background:transparent;border:1px solid transparent;color:var(--devtext);font-size:15px;line-height:1;padding:2px 6px;border-radius:3px;cursor:pointer}
.lcb-b.on{background:var(--devacc);color:#111}.lcb-b:disabled{opacity:.4;cursor:default}
.lcb-play{font-size:17px}
.lcb-gap{width:10px}
.arr-brace{position:absolute;top:3px;height:12px;background:color-mix(in srgb,var(--devtext) 35%,transparent);border:1px solid var(--devtext);border-radius:2px;cursor:grab;touch-action:none;opacity:.6}
.arr-brace.on{opacity:1;background:color-mix(in srgb,var(--devtext) 70%,transparent)}
.arr-brace i{position:absolute;top:-2px;font-size:10px;font-style:normal;color:var(--dev)}
.arr-brace .bl{left:1px}.arr-brace .br{right:1px}
.arr-ruler{height:20px}
.arr-lline{position:absolute;top:20px;bottom:0;width:1px;background:var(--devtext);opacity:.7;pointer-events:none;z-index:2}
.arr-tsel{position:absolute;top:0;bottom:0;background:rgba(175,225,240,.55);pointer-events:none;z-index:2}
.arr-clip .cfade{position:absolute;left:0;top:14px;width:100%;height:calc(100% - 14px);pointer-events:none}
.cfade .fz{fill:rgba(0,0,0,.18)}.cfade .fl{stroke:#111;stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}
.arr-clip .fh{position:absolute;top:14px;width:8px;height:8px;margin-left:-4px;background:#fff;border:1px solid #111;cursor:ew-resize;opacity:0;z-index:3}
.arr-clip:hover .fh,.arr-clip.sel .fh{opacity:1}
@media (hover:none){ .arr-clip .fh{opacity:1;width:12px;height:12px;margin-left:-6px} }
.lcb{font-size:12px}
.lcb-dim{opacity:.75;cursor:default}
.lcb-on{background:var(--devacc);color:#111}
.lcb-scale{background:#9b8cff;color:#111}
.arr-clip .fdia{position:absolute;width:9px;height:9px;margin:-4px 0 0 -4px;background:#ff7a8a;border:1px solid #111;transform:rotate(45deg);cursor:ns-resize;z-index:3;opacity:0}
.arr-clip:hover .fdia,.arr-clip.sel .fdia{opacity:1}
@media (hover:none){ .arr-clip .fdia{opacity:1} }

/* Operator right-hand sections: LFO, Filter, Pitch Envelope, Global (as in Live 12) */
.op{grid-template-columns:330px minmax(0,1fr) 280px}
.op-right{gap:3px}
.op-rs{display:grid;grid-template-columns:auto 1fr;gap:4px 6px;align-items:center;padding:4px 6px;width:100%;text-align:left}
.op-rh{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.op-rrow{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.op-rk{display:flex;gap:2px;justify-content:flex-end}
.op-rk .knob{width:62px}
.op-sq{width:16px;height:16px;border:1px solid var(--devtext);background:transparent;border-radius:2px;cursor:pointer;padding:0}
.op-sq.on{background:var(--teal);border-color:var(--teal)}
.op-title{background:none;border:0;color:var(--devtext);font-size:12.5px;font-weight:600;cursor:pointer;padding:0 2px}
.op-rs.sel .op-title{text-decoration:underline;text-underline-offset:3px}
.op-ch select{font-size:11px;padding:1px 3px;max-width:96px}
.op-ch-s select{max-width:40px}
.op-r,.op-slope{border:1px solid var(--devline);background:transparent;color:var(--devtext);font:600 10px var(--mono);border-radius:2px;padding:1px 4px;cursor:pointer}
.op-r.on{background:var(--teal);color:#111;border-color:var(--teal)}
.op-slope.on{background:var(--devacc);color:#111;border-color:var(--devacc)}
.op-peicon{font:600 13px var(--mono)}
.op-galgmini{background:none;border:0;cursor:pointer;padding:0}
.op-galgmini svg{width:40px;height:40px}
.op-dests{display:flex;gap:3px;flex-basis:100%}
.op-dest{border:1px solid var(--dc,var(--devtext));background:transparent;color:var(--dc,var(--devtext));font:700 10px var(--mono);border-radius:2px;padding:1px 4px;cursor:pointer}
.op-dest.on{background:var(--dc,var(--teal));color:#111}
.op-destb{display:flex;gap:6px;align-items:flex-end;flex-basis:100%}
.op-destb .chooser{min-width:120px}
.op-glidewrap{display:flex;flex-direction:column;gap:2px}
.op-static{opacity:.7}
@media (max-width:760px){ .op{grid-template-columns:1fr} .op-right{flex-direction:column} .op-rs{grid-template-columns:1fr} .op-rk{justify-content:flex-start} }
/* Operator display: Live's grid (Envelope 4 columns, the right section 2 columns) */
.op-secs{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.op-ek{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 6px}
.op-ok{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 6px;align-content:start}
.op-ek .vbox,.op-ok .vbox{width:auto}
.op-ok .op-dests,.op-ok .op-destb{grid-column:1 / -1}
.op-destb .chooser{min-width:0;flex:1}.op-destb .chooser select{max-width:100%}
.op-destb .vbox{width:56px}
.op-grid .k-label{font-size:11px;white-space:nowrap}
.op-grid .chooser{min-width:0}.op-grid .chooser select{max-width:100%}
@media (max-width:760px){ .op-secs{grid-template-columns:1fr} }
@media (min-width:761px) and (max-width:1180px){
  .op{grid-template-columns:330px minmax(0,1fr)}
  .op-right{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
}
/* Operator: performance strip, display switches, harmonics editor, Global page and MIDI matrix */
.op-perf{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px;padding-top:8px;border-top:1px solid var(--devline)}
.op-perf .vbox{width:84px}.op-perf .chooser{min-width:120px}
.op-dbody{position:relative}
.op-vsw{position:absolute;top:0;right:0;display:flex;gap:3px;z-index:1}
.op-vsq{width:14px;height:14px;border:1px solid var(--devtext);background:transparent;border-radius:2px;cursor:pointer;padding:0;opacity:.75}
.op-vsq.on{background:var(--teal);border-color:var(--teal);opacity:1}
.op-graph{margin-right:40px}
.op-harm{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px}
.op-hcv{width:100%;height:96px;display:block;cursor:crosshair;background:rgba(0,0,0,.18);border-radius:2px}
.op-hsw{display:flex;flex-direction:column;gap:3px;justify-content:flex-end}
.op-cmenu{position:fixed;z-index:50;background:var(--dev2,#2a2c2d);border:1px solid var(--devline,#444);border-radius:3px;padding:3px;display:flex;flex-direction:column;min-width:110px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.op-cmenu button{background:none;border:0;color:var(--devtext,#ddd);text-align:left;font-size:12px;padding:4px 8px;cursor:pointer}
.op-cmenu button.on::before{content:"✓ "}.op-cmenu button:hover{background:rgba(255,255,255,.08)}
.op-cmenu hr{border:0;border-top:1px solid var(--devline,#444);margin:3px 0}
.op-pair{display:flex;gap:3px;align-items:flex-end}.op-pair .vbox{flex:1;min-width:0}.op-pair .op-r{margin-bottom:3px}
.op-tgl{display:flex;flex-direction:column;gap:3px;align-items:flex-start}.op-tgl .k-label{font-size:11px;color:var(--devtext);opacity:.8}
.op-gsecs{margin-top:8px;grid-template-columns:1fr!important;gap:4px}
.op-gk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px 6px;margin-top:6px;padding-top:6px;border-top:1px solid var(--devline)}.op-gk .chooser{min-width:0}
.op-mx{margin-top:6px;padding-top:6px;border-top:1px solid var(--devline)}
.op-gsq{width:22px;height:18px;border:1px solid var(--devacc);background:transparent;border-radius:2px;cursor:pointer;padding:0}.op-gsq.on{background:var(--devacc)}.op-gk .vbox{width:auto}
.op-mx{display:flex;flex-direction:column;gap:2px;font-size:11px}
.op-mxrow{display:grid;grid-template-columns:70px minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.3fr) minmax(0,.8fr);gap:4px;align-items:center}
.op-mxrow .chooser{min-width:0}.op-mxrow .chooser select{max-width:100%;font-size:11px;padding:1px 3px}
.op-mxrow .vbox{width:auto}.op-mxrow .vbox .k-label{display:none}
.op-mxhead span{opacity:.7}.op-mxsrc{color:var(--devtext)}.op-mxfix{color:var(--teal);font-size:11px}
@media (max-width:760px){ .op-gk{grid-template-columns:repeat(4,minmax(0,1fr))} .op-mxrow{grid-template-columns:58px repeat(4,minmax(0,1fr))} .op-perf .vbox{width:72px} }
/* FM Patch Match: Operator revealed level by level (fm.js gate()) */
.op .op-hide,.op-perf.op-hide,.op-perf .op-hide{display:none!important}
.op.op-noright{grid-template-columns:330px minmax(0,1fr)}
.op.op-noright .op-right{display:none}
.op.op-nodisp{grid-template-columns:minmax(0,330px)}
.op.op-nodisp .op-disp{display:none}
.op-new{outline:1px solid var(--teal);outline-offset:2px;border-radius:3px;animation:opnew 1.6s ease-out 2}
@keyframes opnew{0%{outline-color:transparent}40%{outline-color:var(--teal)}}
.op-news{display:flex;flex-direction:column;gap:6px;font-size:14px;border-left:3px solid var(--teal)}
.op-newshead{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.op-news details{font-size:13px;opacity:.85}.op-news details>div{margin-top:4px}
.op-news summary{cursor:pointer}
@media (max-width:760px){ .op.op-noright,.op.op-nodisp{grid-template-columns:1fr} }