/* Buttons — the toolbar's construction with more colour.
   Every button is a face sitting in its own machined cutout (--tol), joined faces share a --seam.
   Tuning: --bh (height), --brad (housing radius), --tint (how much accent the tinted/secondary faces carry). */

body{--bh:36px;--brad:11px;--tint:.18}
.buttons{padding-top:34px;padding-bottom:10px}
.btn-rows{display:grid;gap:22px}
.brow{display:grid;grid-template-columns:120px 1fr;gap:10px 18px;align-items:center}
@media (max-width:640px){.brow{grid-template-columns:1fr}}
.brow>.ex-cap{align-self:center}
.bset{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* per-tone extras */
.pane[data-tone=dark]{--mlab:var(--dk-lab);--mlab-dim:var(--dk-lab-dim);--red:var(--dk-err);--red-face:color-mix(in srgb,var(--dk-err) 14%,transparent);--pri-edge:inset 0 1px 0 #ffffff4d,inset 0 -1px 0 #00000045}
.pane[data-tone=light]{--mlab:var(--lt-lab);--mlab-dim:var(--lt-lab-dim);--red:var(--lt-err);--red-face:color-mix(in srgb,var(--lt-err) 12%,transparent);--pri-edge:inset 0 1px 0 #ffffff66,inset 0 -1px 0 #00000030}

/* ---------- housing + face */
.mb{position:relative;display:inline-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)))}
.mb.s{--bh:28px;--brad:9px}
.mb.l{--bh:46px;--brad:13px}
.mb.wide{display:flex;width:100%;max-width:420px}
.mf{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:calc(var(--bh) - var(--tol) * 2);min-width:calc(var(--bh) - var(--tol) * 2);padding:0 14px;border-radius:0;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);color:var(--mlab);font:var(--sw-control);letter-spacing:var(--sw-control-ls);white-space:nowrap;transition:box-shadow .05s cubic-bezier(.2,.8,.2,1),color .03s}
.mb.s .mf{padding:0 10px;font-size:12px;gap:6px}
.mb.l .mf{padding:0 20px;font-size:14.5px;gap:10px}
.mb.wide .mf{flex:1;justify-content:space-between}
.mf:first-child{border-top-left-radius:var(--fr);border-bottom-left-radius:var(--fr)}
.mf:last-child{border-top-right-radius:var(--fr);border-bottom-right-radius:var(--fr)}
.mf.ic{padding:0}
.mf svg{width:16px;height:16px;flex:none;fill:currentColor;stroke:none;position:relative;z-index:1;transition:color .03s}
.mb.l .mf svg{width:18px;height:18px}
.mf svg.o{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mf>span,.mf>b{position:relative;z-index:1}
.mf .kbd{font:var(--sw-kbd);letter-spacing:var(--sw-kbd-ls);padding:2px 5px;border-radius:4px;box-shadow:inset 0 0 0 1px currentColor;opacity:.6}
.mf .ro{position:relative;z-index:1}

/* press: instant dip, then flush */
.mf:after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--dim);opacity:0;transition:opacity .05s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.mf:active:after,.mf.tap:after,.mf.is-down:after{opacity:var(--dim-o);transition:none}
.mf:active,.mf.tap,.mf.is-down{box-shadow:var(--on-sh)!important;transition:none}
.mf:focus-visible{outline:2px solid var(--acc-glow);outline-offset:-2px;z-index:2}

/* secondary: panel face, accent icon, label goes accent on hover */
.mf.sec svg{color:var(--on-ico)}
.mf.sec:hover,.mf.sec.is-hover{color:var(--on-ico)}

/* primary: anodised accent face */
.mf.pri{background:repeating-linear-gradient(90deg,#ffffff0a 0 1px,#0000 1px 2px),var(--anod);box-shadow:var(--pri-edge);color:var(--acc-ink)}
.mf.pri:hover,.mf.pri.is-hover{box-shadow:var(--pri-edge)}
.mb:has(.mf.pri:hover),.mb:has(.mf.pri.is-hover){box-shadow:var(--hs-sh),0 0 16px -4px var(--acc-glow)}
.mf.pri .pip{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px 1px color-mix(in oklab,currentColor 60%,transparent);opacity:.9;position:relative;z-index:1}
.pane[data-tone=dark] .mf.pri:active:after,.pane[data-tone=dark] .mf.pri.tap:after,.pane[data-tone=dark] .mf.pri.is-down:after{opacity:.14}

/* tinted: panel face washed with accent */
.mf.tint{background:repeating-linear-gradient(90deg,#ffffff05 0 1px,#0000 1px 2px),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)}
.mf.tint:hover,.mf.tint.is-hover{background:repeating-linear-gradient(90deg,#ffffff05 0 1px,#0000 1px 2px),linear-gradient(180deg,color-mix(in oklab,var(--acc) calc(var(--tint) * 140%),var(--kf-a)),color-mix(in oklab,var(--acc) calc(var(--tint) * 140%),var(--kf-b)))}

/* destructive */
.mf.red{color:var(--red);background:linear-gradient(0deg,var(--red-face),var(--red-face)),linear-gradient(180deg,var(--kf-a),var(--kf-b))}
.mf.red:hover,.mf.red.is-hover{background:linear-gradient(0deg,var(--red-face),var(--red-face)),linear-gradient(0deg,var(--red-face),var(--red-face)),linear-gradient(180deg,var(--kf-a),var(--kf-b))}

/* ghost: no housing, no face */
.ghost{display:inline-flex;align-items:center;gap:8px;height:var(--bh);padding:0 12px;border-radius:var(--brad);font:var(--sw-control);letter-spacing:var(--sw-control-ls);color:var(--mlab-dim);transition:color .03s}
.ghost svg{width:16px;height:16px;fill:currentColor}
.ghost:hover,.ghost.is-hover{color:var(--on-ico)}
.ghost:active{color:var(--on-ico);opacity:.8}

/* toggles: stay lit like the toolbar */
.mf.tg[aria-pressed=true]{color:var(--on-ico)}
.mf.tg:hover{color:var(--on-ico)}
.mf.tg[aria-pressed=true] svg{filter:drop-shadow(0 0 calc(3px * var(--glow)) color-mix(in oklab,var(--on-ico) 60%,transparent))}
.mf.tg .t{font:600 14px var(--ff-sans);letter-spacing:0}
.mf.tg .t.i{font-style:italic}
.mf.tg .t.u{text-decoration:underline;text-underline-offset:2px}
.mf.tg .t.st{text-decoration:line-through}

/* split: a caret face joined to the action */
.mf.caret{padding:0;width:calc(var(--bh) - var(--tol) * 2 - 6px);min-width:0}
.mf.caret svg{width:12px;height:12px}

/* disabled + loading */
.mf:disabled,.mf[aria-disabled=true]{opacity:.42;cursor:not-allowed}
.mf:disabled:after{opacity:0!important}
.mf .ring{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .6s linear infinite;position:relative;z-index:1}
.mf.busy{cursor:progress}
.mf.pri .ro{background:#00000030;box-shadow:none;color:inherit;padding:2px 6px}
.mf .fillbar{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:#ffffff26;border-radius:inherit;transition:width .12s linear}

/* notes under the panes */
.bnote{font-size:13px;opacity:.7;max-width:760px;margin-top:4px}