/* master.html page styles — tokens only (css/tokens.css) */
body.bm-master{margin:0;background:var(--bg-0);color:var(--text);font:13px/1.4 var(--font);min-height:100vh}
.bm-master *{box-sizing:border-box}
.bm-master button{font:inherit}
.m-app{display:flex;flex-direction:column;height:100vh;min-width:900px}
.m-hidden{display:none !important}

/* ---- top bar: [brand · file · open]  <->  [undo redo lang ? | platform style | Auto Master  Export] ---- */
.m-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:8px 14px;background:var(--bg-1);border-bottom:1px solid var(--line)}
.m-topl{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
.m-topr{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0}
.m-logo{font-weight:800;letter-spacing:.02em;color:var(--text);text-decoration:none;font-size:15px}
.m-logo b{color:var(--accent)}
.m-logo.bm-brand{display:inline-flex;align-items:center;gap:8px;flex:none}
.m-file{color:var(--text-2);flex:0 1 auto;min-width:0;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.m-spacer{flex:1}
.m-btn{background:var(--bg-3);color:var(--text);border:1px solid var(--line-2);border-radius:var(--radius-s);padding:6px 11px;cursor:pointer;white-space:nowrap}
.m-btn:hover{background:var(--bg-4)}
.m-btn:disabled{opacity:.4;cursor:default}
.m-btn.m-on{border-color:var(--accent);color:var(--accent)}
.m-btn.m-primary{background:var(--accent);border-color:var(--accent);color:#1a0d00;font-weight:700}
.m-btn.m-primary:hover{background:var(--accent-2)}
.m-btn.m-magic{background:linear-gradient(135deg,var(--magic),var(--magic-2));border-color:var(--magic);color:#120a26;font-weight:700}
.m-btn.m-small{padding:3px 8px;font-size:11px}
.m-btn.m-icon{width:32px;padding:6px 0;text-align:center;font-weight:700;color:var(--text-2)}
.m-sel{background:var(--bg-3);color:var(--text);border:1px solid var(--line-2);border-radius:var(--radius-s);padding:6px 8px}
.m-top .m-sel{max-width:190px;min-width:0;text-overflow:ellipsis;field-sizing:content}

/* ---- main grid: two columns that end on the same line (each column is a stack of panels) ---- */
.m-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;padding:12px}
.m-left{display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0}
.m-right{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto}
.m-panel{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius-m);padding:10px}
.m-h{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:0 0 8px;font-weight:600;display:flex;align-items:center;gap:8px}
.m-wave{position:relative;background:var(--bg-0);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden}
.m-wave canvas{display:block;width:100%;height:210px;cursor:crosshair}
.m-wavehint{position:absolute;right:8px;bottom:5px;font-size:11px;color:var(--text-3);pointer-events:none}

/* busy overlay on the waveform: thin bar on top edge + label chip (analysis, decoding, Auto Master, codec check) */
.m-wavebusy{position:absolute;left:0;right:0;top:0;height:3px;border-radius:0;z-index:6}
.m-wavestatus{position:absolute;top:28px;right:10px;z-index:6;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-s);
  padding:3px 9px;color:var(--text-2);pointer-events:none}
.m-wavestatus:empty{display:none}
.m-progress.m-ind i{width:35%;animation:m-slide 1.1s ease-in-out infinite}
@keyframes m-slide{0%{margin-left:-35%}100%{margin-left:100%}}

/* ---- transport: two rows, each row spreads two groups edge to edge ---- */
.m-transport{display:flex;flex-direction:column;gap:8px}
.m-trow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.m-grp{display:flex;align-items:center;gap:8px;min-width:0}
.m-time{font:15px var(--mono);min-width:128px;color:var(--text)}
.m-time small{color:var(--text-3);font-size:12px}
.m-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--radius-s);overflow:hidden}
.m-seg button{background:var(--bg-3);color:var(--text-2);border:0;padding:6px 12px;cursor:pointer}
.m-seg button+button{border-left:1px solid var(--line-2)}
.m-seg button.m-on{background:var(--accent);color:#1a0d00;font-weight:700}
.m-seg button:disabled{opacity:.4;cursor:default}
.m-lm{min-width:74px;text-align:center;font-family:var(--mono)}
.m-matchinfo{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.m-vol{display:flex;align-items:center;gap:6px;color:var(--text-3);font-size:11px}
.m-vol input{width:90px;accent-color:var(--accent)}

/* signal chain = a bordered panel so the left column ends flush with the right one */
.m-rackwrap{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px}
.m-presets{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center}
.m-presets .m-h{margin:0}
.m-rackwrap>.m-h{justify-content:center}   /* the section label sits on the same centre line as the preset chips above it */
.m-meters{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.m-stat{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:6px 8px}
.m-stat span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.m-stat b{font:600 17px var(--mono)}
.m-stat em{font-style:normal;color:var(--text-3);font-size:11px;margin-left:3px}
.m-stat.m-big{grid-column:1/-1}
.m-stat.m-big b{font-size:26px}
.m-stat small{color:var(--text-3);font:11px var(--mono);margin-left:6px}
.m-bars{display:flex;gap:10px;align-items:center;margin-top:6px}
.m-bar{position:relative;flex:1;height:10px;background:var(--bg-0);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.m-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--meter-lo),var(--meter-mid) 80%,var(--meter-hi))}
.m-corr i{left:50%;width:0;background:var(--info)}

/* platform table: names wrap (never truncated); lossy preview selector sits under the title */
.m-plat{width:100%;border-collapse:collapse;font-size:12px}
.m-plat th{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);text-align:right;padding:2px 3px;font-weight:600}
.m-plat th:first-child,.m-plat td:first-child{text-align:left}
.m-plat td{white-space:nowrap;padding:4px 3px;border-top:1px solid var(--line);text-align:right;font-family:var(--mono)}
.m-plat td:first-child{font-family:var(--font);color:var(--text);white-space:normal;line-height:1.2;text-wrap:balance}
.m-plat .m-warn{color:var(--bad);font-weight:700}
.m-plat .m-tight{color:var(--warn);font-weight:700}
.m-plat .m-ok{color:var(--good)}
.m-pvrow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.m-pvlab{font-size:11px;color:var(--text-3)}
.m-pvseg button{padding:3px 9px;font-size:11px}
.m-platnote{font:11px var(--mono);margin-top:8px;line-height:1.4}
.m-platnote:empty{display:none}
.m-platnote.m-warn{color:var(--bad)}
.m-platnote.m-tight{color:var(--warn)}
.m-platnote.m-ok{color:var(--good)}
.m-hintline{font-size:11px;color:var(--text-3);margin-top:8px;line-height:1.4;text-wrap:balance}
.m-status{font:11px var(--mono);color:var(--text-3);min-height:16px}
.m-progress{height:3px;background:var(--bg-3);border-radius:2px;overflow:hidden;opacity:0;transition:opacity .2s}
.m-progress.m-act{opacity:1}
.m-progress i{display:block;height:100%;width:0;background:var(--accent)}
.m-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:var(--radius-m);padding:10px 16px;box-shadow:var(--shadow-1);z-index:100;max-width:520px}
.m-pop{position:fixed;z-index:90;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-m);box-shadow:var(--shadow-1);padding:12px;min-width:250px;max-width:calc(100vw - 16px)}
.m-pop h4{margin:0 0 8px;font-size:12px;color:var(--text-2)}
.m-pop label{display:flex;gap:8px;align-items:center;margin:6px 0}
.m-pop .m-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;justify-content:center}   /* popover buttons sit on the centre line, not in the left half */
.m-pop pre{background:var(--bg-0);border:1px solid var(--line);border-radius:var(--radius-s);padding:8px;max-height:260px;overflow:auto;font:11px var(--mono);white-space:pre-wrap}
.m-pop .m-warn{color:var(--bad);font-size:12px;margin-top:6px}
.m-drop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--text-2);
  background:color-mix(in srgb,var(--bg-0) 85%,transparent);z-index:5;text-align:center}
.m-drop.m-hidden{display:none}
.m-dragover::after{content:"";position:fixed;inset:6px;border:2px dashed var(--accent);border-radius:var(--radius-l);pointer-events:none;z-index:200}
.m-panel .m-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* inline plugin frame: slot header already shows name + bypass, hide the frame's own title */
.bm-fxbody .bm-frame-title { display: none; }
.m-btn:focus-visible, .m-sel:focus-visible, .m-top button:focus-visible, .m-chain button:focus-visible,
.m-chain [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Auto Master suggestion + before/after card ---- */
.m-suggest{display:flex;flex-direction:column;gap:8px;border-color:var(--magic);font-size:12px;color:var(--text-2)}
.m-card{font-size:12px}
.m-cardhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--magic)}
.m-cardsub{font-size:11px;color:var(--text-3);margin:-2px 0 8px}
.m-cmp{width:100%;border-collapse:collapse;font-family:var(--mono)}
.m-cmp th,.m-cmp td{padding:3px 4px;text-align:right;border-top:1px solid var(--line)}
.m-cmp th:first-child{text-align:left;font-family:var(--font)}
.m-cmp thead th{border-top:0;font-size:10px;color:var(--text-3);text-transform:uppercase}
.m-spec{display:flex;gap:3px;height:96px}
.m-sb{flex:1;position:relative;font-size:9px;text-align:center;color:var(--text-3)}
.m-sb i{position:absolute;left:15%;right:15%;border-radius:2px}
.m-sb span{position:absolute;bottom:0;left:0;right:0}
.m-sb b{position:absolute;top:0;left:0;right:0;font-weight:500;color:var(--text-2)}
.m-pending{color:var(--text-3);margin:auto;font-size:11px}
.m-unit{text-transform:none;letter-spacing:0;font-weight:500}
.m-steps{margin:4px 0 0;padding-left:18px;padding-right:6px;color:var(--text-2);max-height:190px;overflow:auto}
.m-steps li{text-wrap:pretty}
.m-steps small{color:var(--text-3)}
.m-keys{border-collapse:collapse}
.m-keys td{padding:3px 8px}
.m-keys td{white-space:nowrap}   /* one line per shortcut: the popover grows to its widest row instead of breaking "Ctrl+Z / Ctrl+Y" or "Loudness match" */
.m-keys kbd{font:11px var(--mono);background:var(--bg-0);border:1px solid var(--line-2);border-radius:4px;padding:1px 6px}

/* ---- narrow desktop (<= 1100 px): narrower side column, smaller table ---- */
@media (max-width:1100px){
  .m-main{grid-template-columns:minmax(0,1fr) 320px}
  .m-plat{font-size:11px}
  .m-plat .m-btn{padding:2px 6px;font-size:10px}
  .m-plat td:last-child{padding-right:0}
}
/* top bar becomes two full-width rows when one row cannot hold it (<= 1000 px) */
@media (max-width:1000px){
  .m-top{padding:8px 10px}
  .m-topl,.m-topr{flex:1 1 100%}
  .m-file{max-width:none;flex:1 1 auto}
  .m-topr .m-sel{flex:1 1 0;max-width:none}
  .m-topr .m-btn.m-magic,.m-topr .m-btn.m-primary{flex:none}
}
/* when a transport row cannot hold both groups, each group becomes its own full-width line (edge to edge, no ragged right side) */
@media (min-width:900px) and (max-width:1000px), (max-width:740px){
  .m-trow>.m-grp{flex:1 1 100%;justify-content:center;flex-wrap:wrap}
  .m-matchinfo{max-width:none;text-align:center}
}
/* phones / narrow tablets: tool buttons on one line (the two big ones share the free width), both selects below, side by side */
@media (max-width:740px){
  .m-topr{flex-wrap:wrap}
  .m-topr>.m-btn{flex:none}
  .m-topr>.m-btn.m-magic,.m-topr>.m-btn.m-primary{flex:1 1 auto}
  .m-topr>.m-sel{order:2;flex:1 1 45%}
}
/* single column below 900 px: the page scrolls, panels stack, nothing is cut */
@media (max-width:899px){
  .m-app{min-width:0;height:auto;min-height:100vh}
  .m-main{grid-template-columns:minmax(0,1fr);padding:10px}
  .m-right{overflow:visible}
  .m-rackwrap{overflow:visible}
  /* one flow: waveform, transport, Auto Master suggestion / result, chain, then meters + platforms + codec */
  .m-left,.m-right{display:contents}
  .m-left>.m-wave{order:1}
  .m-left>.m-transport{order:2}
  .m-right>.m-panel{order:6}
  .m-right>.m-suggest{order:3}
  .m-right>.m-card{order:4}
  .m-left>.m-rackwrap{order:5}
  .m-matchinfo{max-width:none;white-space:normal}
}

/* symmetry pass: the controls of the first transport row (play / stop / loop, original-mastered-reference, LM) share one 32 px height */
.m-transport>.m-trow:first-child .m-btn,.m-transport>.m-trow:first-child .m-seg{height:32px;box-sizing:border-box}
.m-transport>.m-trow:first-child .m-seg button{height:100%;box-sizing:border-box}
.m-transport>.m-trow:first-child .m-btn.m-lm{display:inline-flex;align-items:center;justify-content:center}