/* Components — the toolbar construction applied to the rest of the kit.
   Housing (--hs) + cutout (--tol) + faces. Raised faces use the key material (--kf-*),
   recessed faces (fields, readouts, tracks) use --fd. Joined faces share --seam and square inner edges. */

.comps{padding-top:34px;padding-bottom:10px}
.pane[data-tone=dark]{--fd:linear-gradient(180deg,var(--dk-field-a),var(--dk-field-b));--fd-sh:inset 0 1px 2px #00000080,inset 0 0 0 .5px #0000008c;--fd-ink:var(--dk-ink);--fd-dim:var(--dk-dim);--sep:#ffffff14;--ok:var(--dk-ok);--warn:var(--dk-warn)}
.pane[data-tone=light]{--fd:linear-gradient(180deg,var(--lt-field-a),var(--lt-field-b));--fd-sh:inset 0 1px 2px #00000024,inset 0 0 0 .5px #00000024;--fd-ink:var(--lt-ink);--fd-dim:var(--lt-dim);--sep:#0000001a;--ok:var(--lt-ok);--warn:var(--lt-warn)}

.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:26px 26px;align-items:start}
.cc{display:grid;gap:12px;min-width:0;align-content:start}
.cc.wide{grid-column:1/-1}
.cc-h{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--sep)}
.cc-h .ser{font-size:9.5px}
.crow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ccol{display:grid;gap:10px}
.c2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.c2>*{min-width:0}
.clbl{font:var(--sw-label);letter-spacing:var(--sw-label-ls);text-transform:uppercase;color:var(--ink3)}
.ctext{font-size:13px;color:var(--mlab)}

/* ---------- generic housing + faces */
.hsg{position:relative;display:flex;gap:var(--seam);padding:var(--tol);border-radius:var(--brad);background:var(--hs);box-shadow:var(--hs-sh);--fr:max(1px,calc(var(--brad) - var(--tol)))}
.hsg.col{flex-direction:column}
.hsg.full{width:100%}
.fc,.fd{position:relative;display:flex;align-items:center;gap:8px;min-height:calc(var(--bh) - var(--tol) * 2);padding:0 10px;border-radius:0;color:var(--mlab);font:var(--sw-control);letter-spacing:var(--sw-control-ls)}
.fc{background:repeating-linear-gradient(90deg,#ffffff05 0 1px,#0000 1px 2px),linear-gradient(180deg,var(--kf-a),var(--kf-b));box-shadow:var(--kf-sh);transition:box-shadow .05s cubic-bezier(.2,.8,.2,1),color .03s}
.fd{background:var(--fd);box-shadow:var(--fd-sh);color:var(--fd-ink)}
.hsg>:first-child{border-top-left-radius:var(--fr);border-bottom-left-radius:var(--fr)}
.hsg>:last-child{border-top-right-radius:var(--fr);border-bottom-right-radius:var(--fr)}
.hsg.col>:first-child{border-radius:var(--fr) var(--fr) 0 0}
.hsg.col>:last-child{border-radius:0 0 var(--fr) var(--fr)}
.hsg>:only-child{border-radius:var(--fr)}
.fc svg,.fd svg{width:15px;height:15px;flex:none;fill:currentColor;position:relative;z-index:1}
.fc>*,.fd>*{position:relative;z-index:1}
button.fc{cursor:pointer}
button.fc:after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--dim);opacity:0;transition:opacity .05s;pointer-events:none;z-index:0}
button.fc:active:after,button.fc.tap:after{opacity:var(--dim-o);transition:none}
button.fc:active,button.fc.tap{box-shadow:var(--on-sh);transition:none}
button.fc:hover{color:var(--on-ico)}
.fc.ic{padding:0;justify-content:center;width:calc(var(--bh) - var(--tol) * 2)}
.fd.grow,.fc.grow{flex:1;min-width:0}
.doto{font:var(--sw-readout);letter-spacing:var(--sw-readout-ls)}
.dim{color:var(--fd-dim)}
.acc-t{color:var(--on-ico)}

/* ---------- switches */
.sw{--w:44px;--h:24px;position:relative;flex:none;width:var(--w);height:var(--h);border-radius:99px;background:var(--hs);box-shadow:var(--hs-sh);cursor:pointer}
.sw .tr{position:absolute;inset:var(--tol);border-radius:99px;background:var(--fd);box-shadow:var(--fd-sh);transition:background .06s}
.sw .th{position:absolute;top:var(--tol);left:var(--tol);width:calc(var(--h) - var(--tol) * 2);height:calc(var(--h) - var(--tol) * 2);border-radius:50%;background:linear-gradient(180deg,var(--kf-a),var(--kf-b));box-shadow:var(--kf-sh),0 1px 2px #0000006b;display:grid;place-items:center;transition:transform .09s cubic-bezier(.3,1.35,.5,1)}
.sw .th:after{content:'';width:5px;height:5px;border-radius:50%;background:var(--ki);opacity:.35}
.sw[aria-checked=true] .tr{background:var(--anod);box-shadow:inset 0 1px 2px #0000004d}
.sw[aria-checked=true] .th{transform:translateX(calc(var(--w) - var(--h)))}
.sw[aria-checked=true] .th:after{background:var(--on-ico);opacity:1;box-shadow:0 0 5px var(--on-ico)}
.sw:active .th{width:calc(var(--h) - var(--tol) * 2 + 3px)}
.sw.s{--w:34px;--h:18px}
.opt2{display:flex;align-items:center;gap:10px;font:var(--sw-body);letter-spacing:var(--sw-body-ls);color:var(--mlab);cursor:pointer;user-select:none}
.opt2 .sp{flex:1}
.ck,.rd{position:relative;flex:none;width:20px;height:20px;padding:var(--tol);border-radius:6px;background:var(--hs);box-shadow:var(--hs-sh)}
.rd{border-radius:50%}
.ck i,.rd i{display:grid;place-items:center;width:100%;height:100%;border-radius:calc(6px - var(--tol));background:linear-gradient(180deg,var(--kf-a),var(--kf-b));box-shadow:var(--kf-sh);transition:background .05s}
.rd i{border-radius:50%}
.ck svg{width:12px;height:12px;fill:var(--acc-ink);opacity:0;transform:scale(.5);transition:transform .08s cubic-bezier(.3,1.5,.5,1),opacity .05s}
.rd i:after{content:'';width:6px;height:6px;border-radius:50%;background:var(--acc-ink);opacity:0;transform:scale(.4);transition:transform .08s cubic-bezier(.3,1.5,.5,1),opacity .05s}
[aria-checked=true]>.ck i,[aria-checked=true]>.rd i{background:var(--anod);box-shadow:inset 0 1px 0 #ffffff4d}
[aria-checked=true]>.ck svg,[aria-checked=true]>.rd i:after{opacity:1;transform:none}
.opt2:hover .ck i,.opt2:hover .rd i{box-shadow:var(--kf-sh),inset 0 0 0 1px color-mix(in oklab,var(--on-ico) 55%,transparent)}

/* ---------- tabs */
.tabs2 .fc{flex:1;justify-content:center;font:var(--sw-label);letter-spacing:var(--sw-label-ls);text-transform:uppercase;color:var(--mlab-dim)}
.tabs2 .fc[aria-selected=true]{color:var(--on-ico)}
.tabs2 .fc[aria-selected=true]:before{content:'';position:absolute;left:22%;right:22%;bottom:3px;height:2px;border-radius:2px;background:var(--on-ico);box-shadow:0 0 6px color-mix(in oklab,var(--on-ico) 70%,transparent)}
.tabs2-body{font:var(--sw-small);color:var(--mlab-dim);padding:2px 2px 0}

/* ---------- slider */
.sl{--v:50%;position:relative;height:26px;touch-action:none;cursor:pointer;outline:0}
.sl .gv{position:absolute;left:0;right:0;top:50%;height:10px;margin-top:-5px;padding:var(--tol);border-radius:99px;background:var(--hs);box-shadow:var(--hs-sh)}
.sl .gv i{display:block;height:100%;width:var(--v);min-width:2px;border-radius:99px;background:var(--anod);box-shadow:0 0 8px -2px var(--acc-glow)}
.sl.hue .gv{background:linear-gradient(90deg,#f33,#ff3,#3f3,#3ff,#33f,#f3f,#f33);box-shadow:var(--hs-sh),inset 0 0 0 var(--tol) #0000004d}
.sl.hue .gv i{display:none}
.sl .cap{position:absolute;top:50%;left:var(--v);width:14px;height:24px;margin:-12px 0 0 -7px;border-radius:4px;background:linear-gradient(90deg,var(--kf-a),var(--kf-b));box-shadow:var(--kf-sh),0 0 0 var(--tol) #00000059,0 2px 4px #0000005c}
.sl .cap:after{content:'';position:absolute;left:50%;top:5px;bottom:5px;width:2px;margin-left:-1px;border-radius:2px;background:var(--ki);opacity:.5;transition:background .03s,opacity .03s}
.sl:hover .cap:after,.sl:focus-visible .cap:after,.sl.drag .cap:after{background:var(--on-ico);opacity:1;box-shadow:0 0 4px var(--on-ico)}
.sl-h{display:flex;justify-content:space-between;align-items:center}
.ticks2{display:flex;justify-content:space-between;padding:0 7px;margin-top:-2px}
.ticks2 i{width:1px;height:4px;background:var(--ink3);opacity:.6}
.ticks2 i:nth-child(5n+1){height:7px;opacity:1}
.rdo{display:inline-flex;align-items:center;gap:5px;padding:var(--tol);border-radius:7px;background:var(--hs);box-shadow:var(--hs-sh)}
.rdo b{display:block;padding:3px 7px;border-radius:calc(7px - var(--tol));background:var(--fd);box-shadow:var(--fd-sh);font:var(--sw-readout);letter-spacing:var(--sw-readout-ls);color:var(--on-ico);white-space:nowrap}
.rdo b small{font-size:inherit;color:var(--fd-dim)}

/* ---------- knob */
.dials2{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap}
.dial2{display:grid;justify-items:center;gap:12px}
.kn{--a:0deg;--s:58px;position:relative;width:var(--s);height:var(--s);margin:8px;cursor:ns-resize;touch-action:none;outline:0}
.kn .ticks{position:absolute;inset:-15px;border-radius:50%;background:repeating-conic-gradient(from -135deg,var(--ink3) 0 1.2deg,transparent 1.2deg 13.5deg);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));mask:radial-gradient(closest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));clip-path:polygon(50% 50%,0 100%,0 0,100% 0,100% 100%);opacity:.7}
.kn .ring{position:absolute;inset:-7px;border-radius:50%;background:var(--hs);box-shadow:var(--hs-sh)}
.kn .arc{position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(from -135deg,var(--on-ico) 0 calc(var(--a) + 135deg),transparent 0);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));filter:drop-shadow(0 0 3px var(--on-ico))}
.kn .body{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(#ffffff08 0 3deg,#0000 3deg 6deg),radial-gradient(circle at 50% 30%,var(--kf-a),var(--kf-b) 75%);box-shadow:var(--kf-sh),0 3px 6px #00000066;transform:rotate(var(--a))}
.kn .body:before{content:'';position:absolute;left:50%;top:6%;width:3px;height:28%;margin-left:-1.5px;border-radius:3px;background:var(--ki);opacity:.8;transition:background .03s}
.kn:hover .body:before,.kn.drag .body:before,.kn:focus-visible .body:before{background:var(--on-ico);opacity:1;box-shadow:0 0 5px var(--on-ico)}
.kn .body:after{content:'';position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle at 50% 35%,var(--kf-b),var(--kf-a));box-shadow:inset 0 1px 2px #0000004d}
.kn.s{--s:40px}

/* ---------- fields */
.fld2{display:grid;gap:6px}
.hsg.in:focus-within{box-shadow:var(--hs-sh),0 0 0 1px color-mix(in oklab,var(--on-ico) 70%,transparent)}
.fd input{flex:1;min-width:0;width:100%;border:0;background:none;outline:0;font:var(--sw-control);letter-spacing:var(--sw-control-ls);color:var(--fd-ink)}
.fd input::placeholder{color:var(--fd-dim)}
.fd input.num{font:var(--sw-value);letter-spacing:var(--sw-value-ls)}
.fd .unit{font:var(--sw-kbd);letter-spacing:var(--sw-kbd-ls);color:var(--fd-dim)}
.fd .kbd2{font:var(--sw-kbd);letter-spacing:var(--sw-kbd-ls);padding:2px 5px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--fd-dim);color:var(--fd-dim)}
.fd .ic2{color:var(--fd-dim)}
.hsg.in:focus-within .ic2{color:var(--on-ico)}
.ax2{cursor:ew-resize;user-select:none;justify-content:center;width:26px;padding:0;font:var(--sw-readout);letter-spacing:var(--sw-readout-ls);color:var(--mlab-dim)}
.ax2:hover,.ax2.drag{color:var(--on-ico)}
.hint2{font:var(--sw-small);color:var(--fd-dim)}

/* ---------- dropdown + menus */
.dd{position:relative}
.dd>.hsg>.fc{flex:1;justify-content:space-between;font:500 13px var(--f-ui)}
.dd>.hsg>.fc svg{transition:transform .08s;color:var(--mlab-dim)}
.dd.open>.hsg>.fc svg{transform:rotate(180deg);color:var(--on-ico)}
.pop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:8;opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .06s,transform .08s,visibility .06s}
.dd.open .pop{opacity:1;visibility:visible;transform:none}
.pop .hsg{box-shadow:var(--hs-sh),0 16px 28px -12px #000a}
.mrow{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:10px;text-align:left;width:100%;min-height:calc(var(--bh) * .86 - var(--tol))}
.mrow .sc2{font:var(--sw-kbd);letter-spacing:var(--sw-kbd-ls);color:var(--kbd)}
.mrow[aria-checked=true]{color:var(--on-ico)}
.mrow[aria-checked=true] .sc2{color:var(--on-ico)}
.mrow.no-ic{grid-template-columns:1fr auto}
.mrow.red{color:var(--red)}
.mrow.red:hover{color:var(--red)}
.mrow.dis{opacity:.4;pointer-events:none}
.hsg.col>.brk{margin-bottom:calc(var(--tol) * 2 + 2px)}
.mrow .pip2{width:6px;height:6px;border-radius:50%;background:var(--on-ico);box-shadow:0 0 5px var(--on-ico)}

/* ---------- tooltip */
.tt{display:inline-flex}
.tt .fd{min-height:26px;padding:0 9px;font:var(--sw-small);letter-spacing:var(--sw-small-ls);gap:8px}
.tt-wrap{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tt-anchor{display:grid;justify-items:center;gap:6px}
.tt-anchor .hsg{--bh:34px}

/* ---------- colour */
.swb .fc{width:calc((var(--bh) - var(--tol) * 2) * .9);padding:0;background:linear-gradient(180deg,#ffffff24,#0000 50%,#0000001f),var(--c);cursor:pointer}
.swb .fc[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px #fff,inset 0 0 0 3px #0000004d}

.chip2{width:14px;height:14px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px #0003}

/* ---------- layers */
.lay2 .fc{min-height:30px;gap:8px;font:var(--sw-body);letter-spacing:var(--sw-body-ls)}
.lay2 .fc.i1{padding-left:26px}
.lay2 .fc.i2{padding-left:42px}
.lay2 .fc .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.lay2 .fc>svg{color:var(--mlab-dim)}
.lay2 .fc .act{display:flex;gap:6px;opacity:0;transition:opacity .03s}
.lay2 .fc:hover .act,.lay2 .fc .act.pin{opacity:1}
.lay2 .fc .act span{display:grid;color:var(--mlab-dim);cursor:pointer}
.lay2 .fc .act span:hover{color:var(--on-ico)}
.lay2 .fc .act svg{width:14px;height:14px}
.lay2 .fc[aria-selected=true]{color:var(--on-ico)}
.lay2 .fc[aria-selected=true]>svg{color:var(--on-ico)}
.lay2 .fc:hover>svg{color:var(--on-ico)}
.lay2 .caret2{width:10px;height:10px;margin-left:-14px;color:var(--mlab-dim);transform:rotate(90deg)}

/* ---------- dialog */
.dlg2 .fc{display:grid;gap:12px;padding:18px;align-items:start;min-height:0}
.dlg2 h5{font:var(--sw-title);letter-spacing:var(--sw-title-ls);margin:0;color:var(--mlab)}
.dlg2 h5 em{font:var(--f-em-st,italic) var(--f-em-w,400) calc(1.12em * var(--f-em-sz,1)) var(--f-em)}
.dlg2 p{font-size:12.5px;color:var(--mlab-dim);line-height:1.45}
.dlg2 .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.dlg2 .top{display:flex;justify-content:space-between;align-items:center}

/* ---------- toast */
.toast2 .fc{flex:1;gap:10px;padding:8px 8px 8px 12px;min-height:0}
.toast2 .tx{flex:1;display:grid;gap:1px;text-align:left}
.toast2 b{font:var(--sw-heading);letter-spacing:var(--sw-heading-ls);color:var(--mlab)}
.toast2 small{font-size:11.5px;color:var(--mlab-dim)}
.toast2 .x2{display:grid;color:var(--mlab-dim);cursor:pointer;padding:4px}
.toast2 .x2:hover{color:var(--on-ico)}
.toast2 .x2 svg{width:12px;height:12px}
.pip3{width:7px;height:7px;border-radius:50%;flex:none}
.pip3.ok{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.pip3.warn{background:var(--warn);box-shadow:0 0 6px var(--warn)}
.pip3.err{background:var(--red);box-shadow:0 0 6px var(--red)}
.pip3.acc{background:var(--on-ico);box-shadow:0 0 6px var(--on-ico)}
.pip3.off{background:var(--ki);opacity:.35}
.toast2.gone{opacity:.25;transition:opacity .2s}

/* ---------- progress + meter */
.pg{height:12px;padding:var(--tol);border-radius:99px;background:var(--hs);box-shadow:var(--hs-sh)}
.pg i{display:block;height:100%;width:var(--p,40%);border-radius:99px;background:var(--anod);box-shadow:0 0 8px -2px var(--acc-glow);transition:width .1s linear}
.pg.ind i{width:100%;background:repeating-linear-gradient(-45deg,color-mix(in oklab,var(--acc) 90%,#fff) 0 6px,var(--acc) 6px 12px);background-size:17px 17px;animation:ind .5s linear infinite}
@keyframes ind{to{background-position:17px 0}}
.mtr{display:grid;grid-template-columns:repeat(20,1fr);gap:var(--seam);padding:var(--tol);border-radius:6px;background:var(--hs);box-shadow:var(--hs-sh);height:16px}
.mtr i{border-radius:1px;background:var(--fd);box-shadow:var(--fd-sh)}
.mtr i:first-child{border-radius:calc(6px - var(--tol)) 1px 1px calc(6px - var(--tol))}
.mtr i:last-child{border-radius:1px calc(6px - var(--tol)) calc(6px - var(--tol)) 1px}
.mtr i.on{background:var(--on-ico);box-shadow:0 0 5px var(--on-ico)}
.mtr i.on.w{background:var(--warn);box-shadow:0 0 5px var(--warn)}
.mtr i.on.r{background:var(--red);box-shadow:0 0 5px var(--red)}
.spin2{width:22px;height:22px;border-radius:50%;padding:var(--tol);background:var(--hs);box-shadow:var(--hs-sh)}
.spin2 i{display:block;width:100%;height:100%;border-radius:50%;background:conic-gradient(var(--on-ico),transparent 75%);-webkit-mask:radial-gradient(closest-side,transparent 58%,#000 60%);mask:radial-gradient(closest-side,transparent 58%,#000 60%);animation:spin .7s linear infinite}

/* ---------- badges + tags */
.bdg{display:inline-flex;padding:var(--tol);border-radius:99px;background:var(--hs);box-shadow:var(--hs-sh)}
.bdg>span{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border-radius:99px;background:linear-gradient(180deg,var(--kf-a),var(--kf-b));box-shadow:var(--kf-sh);font:var(--sw-label);letter-spacing:var(--sw-label-ls);text-transform:uppercase;color:var(--mlab)}
.bdg.acc>span{background:linear-gradient(180deg,color-mix(in oklab,var(--acc) calc(var(--tint) * 100%),var(--kf-a)),color-mix(in oklab,var(--acc) calc(var(--tint) * 100%),var(--kf-b)));color:var(--on-ico)}
.bdg.solid>span{background:var(--anod);color:var(--acc-ink)}
.bdg .pip3{width:6px;height:6px}
.tag{display:inline-flex;padding:var(--tol);border-radius:7px;background:var(--hs);box-shadow:var(--hs-sh);gap:var(--seam)}
.tag>span{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;background:linear-gradient(180deg,var(--kf-a),var(--kf-b));box-shadow:var(--kf-sh);font:var(--sw-small);letter-spacing:var(--sw-small-ls);color:var(--mlab);border-radius:calc(7px - var(--tol)) 0 0 calc(7px - var(--tol))}
.tag>button{display:grid;place-items:center;width:20px;height:22px;background:linear-gradient(180deg,var(--kf-a),var(--kf-b));box-shadow:var(--kf-sh);color:var(--mlab-dim);border-radius:0 calc(7px - var(--tol)) calc(7px - var(--tol)) 0}
.tag>button:hover{color:var(--on-ico)}
.tag>button svg{width:9px;height:9px;fill:currentColor}
.tag.gone{display:none}

/* ---------- status bar */
.stb .fd,.stb .fc{min-height:26px;padding:0 9px}
.stb .fc.ic{width:26px;padding:0}
.stb .fc svg{width:12px;height:12px}
.stb .doto{font-size:11px}

/* ---------- accent selector in the top bar (same swatch bar component) */
.accsel{display:flex;align-items:center;gap:10px;flex:none;--bh:30px;--brad:9px;--hs:linear-gradient(180deg,#9fa3a8,#c3c6ca);--hs-sh:inset 0 2px 4px #00000052,inset 0 0 0 1px #0000002e,0 1px 0 #ffffffe0;--kf-sh:inset 0 1px 0 #ffffff80,inset 0 -1px 0 #00000024}
html[data-theme=dark] .accsel{--hs:linear-gradient(180deg,#070809,#111215);--hs-sh:inset 0 2px 4px #000,inset 0 0 0 1px #000,0 1px 0 #ffffff1a;--kf-sh:inset 0 1px 0 #ffffff30,inset 0 -1px 0 #0000005e}
.accsel .swb .fc{width:30px;min-height:0;height:calc(var(--bh) - var(--tol) * 2);padding:0;opacity:1;border-radius:0;box-shadow:var(--kf-sh)}
.accsel .swb .fc:first-child{border-radius:var(--fr) 0 0 var(--fr)}
.accsel .swb .fc:last-child{border-radius:0 var(--fr) var(--fr) 0}
/* the bar's pressed-pill style must not repaint the active swatch */
.accsel .swb .fc[aria-pressed=true]{background:linear-gradient(180deg,#ffffff24,#0000 50%,#0000001f),var(--c);box-shadow:inset 0 0 0 1.5px #fff,inset 0 0 0 3px #0000004d}
.accname{font:var(--sw-readout);letter-spacing:var(--sw-readout-ls);text-transform:uppercase;min-width:118px;opacity:.85}

/* ---------- solid menu panel: one face, rows inside (dropdowns, context menus, layers, picker) */
.pane[data-tone=dark]{--mp-bg:var(--dk-menu)}
.pane[data-tone=light]{--mp-bg:var(--lt-menu)}
.mp{position:relative;display:grid;align-content:start;padding:4px 0;border-radius:var(--fr);background:var(--mp-bg);box-shadow:var(--kf-sh)}
.hsg>.mp{border-radius:var(--fr)}
.mr{position:relative;display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:10px;height:30px;padding:0 12px;width:100%;text-align:left;font:var(--sw-body);letter-spacing:var(--sw-body-ls);color:var(--mlab);cursor:pointer}
.mr.no-ic{grid-template-columns:1fr auto}
.mr svg{width:15px;height:15px;fill:currentColor}
.mr .sc2{font:var(--sw-kbd);letter-spacing:var(--sw-kbd-ls);color:var(--kbd)}
.mr:hover,.mr[aria-checked=true]{color:var(--on-ico)}
.mr[aria-checked=true] .sc2{color:var(--on-ico)}
.mr:active{background:#0000001c}
.mr.red,.mr.red:hover{color:var(--red)}
.msep{display:block;height:1px;margin:4px 0;background:var(--sep)}
.lay3{padding:3px 0}
.lr{position:relative;display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;width:100%;text-align:left;font:var(--sw-body);letter-spacing:var(--sw-body-ls);color:var(--mlab);cursor:default}
.lr.i1{padding-left:26px}.lr.i2{padding-left:42px}
.lr>svg{width:15px;height:15px;fill:currentColor;color:var(--mlab-dim);flex:none}
.lr .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr .act{display:flex;gap:6px;opacity:0}
.lr:hover .act,.lr .act.pin{opacity:1}
.lr .act span{display:grid;color:var(--mlab-dim);cursor:pointer}
.lr .act span:hover{color:var(--on-ico)}
.lr .act svg{width:14px;height:14px;fill:currentColor}
.lr:hover,.lr:hover>svg{color:var(--on-ico)}
.lr[aria-selected=true]{color:var(--on-ico);background:color-mix(in oklab,var(--acc) 11%,transparent)}
.lr[aria-selected=true]>svg{color:var(--on-ico)}

/* ---------- shuttle tabs */
.shuttle{position:relative;display:inline-grid;grid-template-columns:repeat(var(--n),1fr);padding:var(--tol);border-radius:var(--brad);background:var(--hs);box-shadow:var(--hs-sh);--fr:max(1px,calc(var(--brad) - var(--tol)))}
.ccol>.shuttle{display:grid}
.shuttle:before{content:'';position:absolute;inset:var(--tol);border-radius:var(--fr);background:var(--fd);box-shadow:var(--fd-sh)}
.shut{position:absolute;top:var(--tol);bottom:var(--tol);left:calc(var(--tol) + (100% - var(--tol) * 2) / var(--n) * var(--i));width:calc((100% - var(--tol) * 2) / var(--n));border-radius:var(--fr);background:linear-gradient(180deg,var(--kf-a),var(--kf-b));box-shadow:var(--kf-sh),0 1px 3px #0000005c;transition:left .13s cubic-bezier(.3,1.25,.5,1)}
.shuttle button{position:relative;z-index:1;height:calc(var(--bh) - var(--tol) * 2);padding:0 14px;display:grid;place-items:center;font:var(--sw-label);letter-spacing:var(--sw-label-ls);text-transform:uppercase;color:var(--fd-dim);transition:color .03s}
.shuttle button:hover{color:var(--mlab)}
.shuttle button[aria-selected=true]{color:var(--on-ico)}
.shuttle button svg{width:15px;height:15px;fill:currentColor}
.shuttle.ics button{width:calc(var(--bh) - var(--tol) * 2 + 8px);padding:0}
.shuttle.sm{--bh:26px;--brad:8px}
.shuttle.sm button{font-size:9.5px;padding:0 9px;letter-spacing:.1em}

/* ---------- full-height colour sliders: the cutout wraps the whole gradient */
.sl.hue,.sl.alpha{height:22px}
.sl.hue .gv,.sl.alpha .gv{top:0;height:100%;margin:0;border-radius:7px;background:var(--hs);box-shadow:var(--hs-sh)}
.sl.hue .gv i,.sl.alpha .gv i{display:block;width:100%;height:100%;border-radius:calc(7px - var(--tol));box-shadow:inset 0 1px 2px #0000004d}
.sl.hue .gv i{background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.sl.alpha .gv i{background:linear-gradient(90deg,transparent,var(--cpc,#2f63c1)),repeating-conic-gradient(#b9bbbe 0 25%,#fff 0 50%) 0 0/8px 8px}
.sl.hue .cap,.sl.alpha .cap{top:-2px;height:calc(100% + 4px);width:12px;margin:0 0 0 -6px}
.sl.hue .cap:after,.sl.alpha .cap:after{top:6px;bottom:6px}

/* ---------- colour picker */
.chipbtn{flex:none;width:18px;height:18px;border-radius:5px;background:var(--c);box-shadow:inset 0 0 0 1px #0003,0 0 0 1px #0000;cursor:pointer;transition:box-shadow .03s}
.chipbtn:hover,.chipbtn[aria-expanded=true]{box-shadow:inset 0 0 0 1px #0003,0 0 0 1.5px var(--on-ico)}
.cpk{display:none;max-width:300px}
.cpk.open{display:block}
.cpk>.hsg{box-shadow:var(--hs-sh),0 18px 32px -14px #000a}
.cp{gap:12px;padding:12px}
.cp-top{display:flex;justify-content:space-between;align-items:center}
.sv-h{--brad:10px}
.sv{position:relative;flex:1;height:150px;border-radius:var(--fr);background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--hue,220) 100% 50%));box-shadow:inset 0 1px 3px #00000066;cursor:crosshair;touch-action:none}
.svk{position:absolute;left:var(--sx,70%);top:var(--sy,30%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--cpc);box-shadow:0 0 0 2px #fff,0 0 0 3px #00000066,0 2px 5px #00000080;pointer-events:none}
.cp-mid{display:flex;gap:10px;align-items:center}
.cp-mid .hsg .fc.ic{--bh:40px}
.cp-prev{flex:none;width:40px;height:40px;padding:var(--tol);border-radius:10px;background:var(--hs);box-shadow:var(--hs-sh)}
.cp-prev i{display:block;width:100%;height:100%;border-radius:calc(10px - var(--tol));background:linear-gradient(color-mix(in srgb,var(--cpc) calc(var(--cpa,1) * 100%),transparent),color-mix(in srgb,var(--cpc) calc(var(--cpa,1) * 100%),transparent)),repeating-conic-gradient(#b9bbbe 0 25%,#fff 0 50%) 0 0/8px 8px;box-shadow:inset 0 1px 2px #0000004d}
.swb.sm .fc{width:24px;min-height:0;height:22px}
/* the old kit's .hue swatch rules must not leak into the slider */
.sl.hue{background:none;box-shadow:none;border-radius:0}
.sl.hue .gv i{position:static;margin:0;left:auto;top:auto}
.sl.hue .cap{background:linear-gradient(90deg,var(--kf-a),var(--kf-b))}
.mp.grow,.ccol.grow{flex:1;min-width:0}
.swb{justify-self:start}