/* frame.css — plugin window chrome (kit/frame.js) */
.bm-frame{--frame-accent:var(--accent);--frame-ctl:var(--ctl-h);--frame-ctl-sm:var(--ctl-h-sm);display:flex;flex-direction:column;max-width:760px;margin:0 auto;background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--line-2);border-radius:var(--radius-l);box-shadow:var(--shadow-2);overflow:visible}

/* header = 3-column grid `1fr auto 1fr`: [icon name chip] [preset prev/select/next] [A/B bypass help close].
   The two outer columns are always equal, so the preset picker is exactly on the centre line, the title hugs the left
   padding edge and the tools hug the right padding edge (same 12 px). Every control is --frame-ctl (32 px) high and
   vertically centred in the row. */
.bm-frame-head{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:var(--sp-3);row-gap:var(--sp-2);padding:8px 12px;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent),var(--bg-1);border-bottom:1px solid var(--line);border-radius:var(--radius-l) var(--radius-l) 0 0;position:relative}
.bm-frame-head::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--frame-accent);box-shadow:0 0 14px var(--frame-accent)}
/* title: one 32 px line; when the column is too narrow the chip wraps below and is clipped (never the preset picker) */
.bm-frame-title{grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:center;flex-wrap:wrap;gap:40px 9px;align-content:flex-start;padding-top:calc((var(--frame-ctl,30px) - 26px)/2);box-sizing:border-box;min-width:0;max-width:100%;height:var(--frame-ctl,30px);overflow:hidden}
.bm-frame-title>*{flex:none}
.bm-frame-title .bm-frame-name{flex:0 1 auto;min-width:0;max-width:calc(100% - 35px)}   /* 35 = icon 26 + gap 9: the name ellipsizes on line 1, only the chip may drop to the clipped line 2 */
.bm-frame-ico{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--radius-s);background:var(--bg-3);color:var(--frame-accent);flex:none}
.bm-frame-name{font-weight:750;font-size:var(--fs-l);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-frame-presetbox{grid-column:2;grid-row:1;justify-self:center;display:inline-flex;align-items:stretch;height:var(--frame-ctl,30px);box-sizing:border-box;background:var(--bg-0);border:1px solid var(--line-2);border-radius:var(--radius-s);overflow:hidden}
.bm-frame-presetbox .bm-select:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.bm-frame-presetbox .bm-select{height:100%;border:0;border-radius:0;background-color:transparent;min-width:110px;max-width:150px}
.bm-frame-tools{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.bm-frame-btn{background:none;border:0;color:var(--text-2);width:var(--frame-ctl-sm,26px);display:grid;place-items:center;cursor:pointer;border-radius:var(--radius-s);transition:background var(--t-fast),color var(--t-fast)}
.bm-frame-tools>.bm-frame-btn{width:var(--frame-ctl,30px);height:var(--frame-ctl,30px)}
.bm-frame-btn:hover{background:var(--bg-3);color:var(--text)}
.bm-frame-btn:focus-visible{box-shadow:var(--focus)}
.bm-frame-ab{display:inline-flex;align-items:stretch;height:var(--frame-ctl,30px);box-sizing:border-box;background:var(--bg-0);border:1px solid var(--line-2);border-radius:var(--radius-s);padding:2px;cursor:pointer;font:700 11px var(--font);color:var(--text-3)}
.bm-frame-ab span{display:inline-flex;align-items:center;padding:0 8px;border-radius:4px;transition:background var(--t-fast),color var(--t-fast)}
.bm-frame-ab[data-cur="A"] .a,.bm-frame-ab[data-cur="B"] .b{background:var(--frame-accent);color:var(--text-inv)}
.bm-frame-ab:focus-visible{outline:none;box-shadow:var(--ring)}
.bm-frame-power{width:var(--frame-ctl,30px);height:var(--frame-ctl,30px);display:grid;place-items:center;border-radius:50%;background:var(--bg-0);border:1px solid var(--line-2);color:var(--text-3);cursor:pointer;transition:all var(--t-fast)}
.bm-frame-power.bm-on{color:var(--good);border-color:color-mix(in srgb,var(--good) 55%,var(--line-2));box-shadow:0 0 12px color-mix(in srgb,var(--good) 30%,transparent)}
.bm-frame-power:hover{background:var(--bg-3)}
.bm-frame-power:focus-visible{outline:none;box-shadow:var(--ring)}
.bm-frame-help{display:grid;place-items:center;width:var(--frame-ctl,30px);height:var(--frame-ctl,30px);border-radius:50%;color:var(--text-3);cursor:help;outline:none}
.bm-frame-help:hover,.bm-frame-help:focus-visible{color:var(--text);background:var(--bg-3)}
.bm-frame-help[data-tip]::after{width:max-content;max-width:min(280px,70vw);left:auto;right:0;transform:translate(0,3px)}
.bm-frame-help[data-tip]:hover::after,.bm-frame-help[data-tip]:focus-visible::after{transform:translate(0,0)}
.bm-frame-body{padding:12px;min-height:120px;transition:opacity var(--t-med),filter var(--t-med)}
.bm-frame-bypassed .bm-frame-body{opacity:.45;filter:saturate(.3)}

/* narrow header (kit/frame.js adds .bm-narrow when the header is < 700 px wide, so it also holds inside narrow floating
   windows): row 1 = title (left) + tools (right), row 2 = the preset picker centred and stretched to a fixed width */
.bm-frame-head.bm-narrow{grid-template-columns:minmax(0,1fr) auto}
.bm-frame-head.bm-narrow .bm-frame-tools{grid-column:2}
.bm-frame-head.bm-narrow .bm-frame-presetbox{grid-column:1 / -1;grid-row:2;justify-self:center;width:min(100%,360px)}
.bm-frame-head.bm-narrow .bm-frame-presetbox .bm-select{flex:1 1 auto;min-width:0;max-width:none}

/* slot panels of the mastering rack hide the title (the slot header owns name/bypass): the preset picker then fills the
   row left of the tools, so neither side is empty */
.bm-fxbody .bm-frame-head,.bm-fxbody .bm-frame-head.bm-narrow{grid-template-columns:minmax(0,1fr) auto}
.bm-fxbody .bm-frame-head .bm-frame-presetbox,.bm-fxbody .bm-frame-head.bm-narrow .bm-frame-presetbox{grid-column:1;grid-row:1;justify-self:stretch;width:auto}
.bm-fxbody .bm-frame-head .bm-frame-presetbox .bm-select{flex:1 1 auto;min-width:0;max-width:none}
.bm-fxbody .bm-frame-head .bm-frame-tools,.bm-fxbody .bm-frame-head.bm-narrow .bm-frame-tools{grid-column:2;grid-row:1}