/* kit.css — styles for kit/kit.js components. Design agent owns visual polish; class names are stable. */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg-0);color:var(--text);font:13px/1.4 var(--font);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit}
:focus-visible{outline:none}

/* knob ------------------------------------------------------------------ */
.bm-knob{display:inline-flex;flex-direction:column;align-items:center;gap:3px;padding:5px 6px;user-select:none;-webkit-user-select:none;touch-action:none;cursor:ns-resize;outline:none;border-radius:var(--radius-m);transition:background var(--t-fast)}
.bm-knob:hover{background:rgba(255,255,255,.03)}
.bm-knob:focus-visible{box-shadow:var(--ring)}
.bm-knob-label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);white-space:nowrap;max-width:84px;overflow:hidden;text-overflow:ellipsis;line-height:var(--cap-h);height:var(--cap-h);text-align:center}
.bm-knob svg{display:block;overflow:visible}
.bm-knob-track{stroke:var(--bg-4);stroke-width:3.5;stroke-linecap:round}
.bm-knob-fill{stroke:var(--knob-color,var(--accent));stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--knob-color,var(--accent)) 55%,transparent))}
.bm-knob-rim{fill:url(#bm-rim);stroke:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.bm-knob-body{fill:url(#bm-cap);stroke:rgba(0,0,0,.4);stroke-width:1}
.bm-knob-ptr{stroke:var(--knob-color,var(--accent));stroke-width:2.4;stroke-linecap:round}
.bm-knob:hover .bm-knob-body{fill:url(#bm-cap);filter:brightness(1.2)}
.bm-knob.bm-active .bm-knob-fill{stroke-width:4.2}
.bm-knob.bm-active .bm-knob-val{color:var(--knob-color,var(--accent))}
.bm-knob-val{font:11.5px/16px var(--mono);height:18px;box-sizing:border-box;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text);min-width:58px;text-align:center;cursor:text;border-radius:var(--radius-xs);padding:1px 4px;transition:background var(--t-fast),color var(--t-fast)}
.bm-knob-val:hover{background:var(--bg-3)}
.bm-knob-edit{width:60px;font:11.5px var(--mono);background:var(--bg-0);color:var(--text);border:1px solid var(--accent);border-radius:var(--radius-xs);text-align:center;padding:1px 2px;outline:none}

/* toggle / segmented / select -------------------------------------------- */
.bm-toggle{display:inline-flex;align-items:center;gap:8px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--radius-s);padding:0 var(--ctl-pad-x);min-height:var(--ctl-h);line-height:1.2;vertical-align:middle;cursor:pointer;font-size:var(--fs-s);font-weight:500;color:var(--text-2);transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.bm-toggle:hover{background:var(--bg-4);color:var(--text)}
.bm-toggle:focus-visible{box-shadow:var(--ring)}
.bm-led{flex:none}
.bm-led{width:8px;height:8px;border-radius:50%;background:var(--bg-0);box-shadow:inset 0 0 0 1px var(--line-3);transition:background var(--t-fast),box-shadow var(--t-fast)}
.bm-toggle.bm-on{color:var(--text);border-color:var(--toggle-color,var(--accent));background:color-mix(in srgb,var(--toggle-color,var(--accent)) 12%,var(--bg-3))}
.bm-toggle.bm-on .bm-led{background:var(--toggle-color,var(--accent));box-shadow:0 0 9px var(--toggle-color,var(--accent))}
.bm-seg{display:inline-flex;flex-direction:column;gap:var(--cap-gap)}
.bm-seg-label,.bm-select-label{line-height:var(--cap-h);font-size:var(--fs-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2)}
.bm-seg-row{display:inline-flex;align-items:stretch;min-height:var(--ctl-h);box-sizing:border-box;background:var(--bg-0);border:1px solid var(--line-2);border-radius:var(--radius-s);padding:2px;gap:2px}
.bm-seg-btn{background:none;border:0;padding:0 var(--ctl-pad-x);min-height:calc(var(--ctl-h) - 6px);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-2);font-size:var(--fs-s);font-weight:500;border-radius:4px;transition:background var(--t-fast),color var(--t-fast)}
.bm-seg-btn:hover{color:var(--text);background:var(--bg-3)}
.bm-seg-btn:focus-visible{box-shadow:var(--ring)}
.bm-seg-btn.bm-on{background:var(--accent);color:var(--text-inv);font-weight:700;box-shadow:0 1px 6px var(--accent-glow)}
.bm-select-wrap{display:inline-flex;flex-direction:column;gap:var(--cap-gap)}
.bm-select{appearance:none;-webkit-appearance:none;background:var(--bg-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa7bd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center;color:var(--text);border:1px solid var(--line-2);border-radius:var(--radius-s);padding:0 26px 0 10px;height:var(--ctl-h);box-sizing:border-box;font-size:var(--fs-s);min-width:96px;cursor:pointer;transition:border-color var(--t-fast),background-color var(--t-fast)}
.bm-select:hover{background-color:var(--bg-4);border-color:var(--line-3)}
.bm-select:focus-visible{box-shadow:var(--ring)}
.bm-select option{background:var(--bg-2);color:var(--text)}

/* meters ------------------------------------------------------------------ */
.bm-meter{display:flex;gap:2px;background:var(--bg-0);border:1px solid var(--line);border-radius:var(--radius-xs);padding:2px}
.bm-meter.bm-v{width:22px;height:140px;flex-direction:row}
.bm-meter.bm-h{width:180px;height:14px;flex-direction:column}
.bm-meter-ch{position:relative;flex:1;overflow:hidden;border-radius:2px;background:var(--bg-1)}
.bm-meter-bar{position:absolute;left:0;bottom:0;background:linear-gradient(to top,var(--meter-lo) 0%,var(--meter-lo) 70%,var(--meter-mid) 85%,var(--meter-hi) 100%)}
.bm-v .bm-meter-bar{width:100%;height:0}
.bm-h .bm-meter-bar{height:100%;width:0;background:linear-gradient(to right,var(--meter-lo) 0%,var(--meter-lo) 70%,var(--meter-mid) 85%,var(--meter-hi) 100%)}
.bm-meter-peak{position:absolute;background:var(--text)}
.bm-v .bm-meter-peak{left:0;right:0;height:2px;bottom:0}
.bm-h .bm-meter-peak{top:0;bottom:0;width:2px;left:0}
.bm-meter-peak.bm-clip{background:var(--bad);box-shadow:0 0 6px var(--bad)}

/* layout ------------------------------------------------------------------ */
.bm-canvas{display:block;width:100%;height:160px;background:linear-gradient(180deg,var(--bg-0),#090c12);border:1px solid var(--line);border-radius:var(--radius-m)}
.bm-section{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-m);padding:10px 12px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.bm-section-title{line-height:var(--cap-h);font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.bm-section-body{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end}
.bm-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bm-readout{display:inline-flex;align-items:center;gap:6px;min-height:var(--ctl-h);box-sizing:border-box;background:var(--bg-0);border:1px solid var(--line);border-radius:var(--radius-s);padding:0 10px;line-height:1.2}
.bm-readout>span{display:inline-flex;align-items:center}
.bm-readout-label{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3)}
.bm-readout-val{font:13px var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
.bm-readout-unit{font-size:var(--fs-xs);color:var(--text-3)}
.bm-auto{display:flex;flex-direction:column;gap:8px;padding:10px}

/* caption compensation (kit.js adds .bm-cap-center to a captioned select/segmented whose flex parent centres its
   children: the caption is mirrored below so the control itself sits on the common centre line) */
.bm-cap-center{margin-bottom:calc(var(--cap-h) + var(--cap-gap))}

/* symmetry helpers (opt-in, see docs/DESIGN.md "Symmetry helpers") ------------------------------------ */
.bm-row-center,.bm-row-spread,.bm-row-align{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.bm-row-center{justify-content:center;align-items:flex-end}
.bm-row-spread{justify-content:space-evenly;align-items:flex-end}
.bm-row-align{justify-content:center;align-items:center}
.bm-row-align>.bm-select-wrap,.bm-row-align>.bm-seg{margin-bottom:calc(var(--cap-h) + var(--cap-gap))}
.bm-row-spread.bm-row-align,.bm-row-center.bm-row-align{align-items:center}
.bm-row-spread.bm-row-align{justify-content:space-evenly}
.bm-grid-2,.bm-grid-3,.bm-grid-4{display:grid;gap:var(--sp-3);align-items:center;justify-items:center}
.bm-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bm-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bm-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bm-grid-2>.bm-select-wrap,.bm-grid-3>.bm-select-wrap,.bm-grid-4>.bm-select-wrap,
.bm-grid-2>.bm-seg,.bm-grid-3>.bm-seg,.bm-grid-4>.bm-seg{margin-bottom:calc(var(--cap-h) + var(--cap-gap))}
@media (max-width:380px){.bm-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bm-stack-center{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}