/* Instrument screen: one full-height column — source bar, readout strip, plot (+ optional spectrogram), settings rail */
:root{
  --bg:#0a0d13;
  --panel:#10151e;
  --edge:#232b3a;
  --fg:#dfe4ee;
  --muted:#7f8a9e;
  --trace:#ffb547;
  --hold:#7fd3ff;
  --warn:#ff7a66;
  --f-label:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-num:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 var(--f-label);-webkit-tap-highlight-color:transparent}
.app{height:100%;display:flex;flex-direction:column;gap:8px;overflow:hidden;
  padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));
  padding-block:calc(8px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-bottom,0px))}

.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand h1{margin:0;font-weight:700;font-size:20px;letter-spacing:.12em;text-transform:uppercase;color:var(--trace)}
.brand span{color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}

.sources{display:flex;flex-wrap:wrap;gap:6px}
button,.btn{font:600 13px/1 var(--f-label);letter-spacing:.07em;text-transform:uppercase;color:var(--fg);
  background:var(--panel);border:1px solid var(--edge);border-radius:4px;padding:7px 10px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;touch-action:manipulation}
button:hover:not(:disabled){border-color:#3a4558}
button:focus-visible,select:focus-visible{outline:2px solid var(--hold);outline-offset:2px}
button:disabled{opacity:.4;cursor:not-allowed}
button .led{width:7px;height:7px;border-radius:50%;background:#2b3444;flex:none}
button[aria-pressed="true"]{border-color:var(--trace);color:var(--trace)}
button[aria-pressed="true"] .led{background:var(--trace);box-shadow:0 0 8px var(--trace)}
button.stop{color:var(--muted)}
.split{display:inline-flex}
.split:has(.devpick:not([hidden])) #bMic{border-radius:4px 0 0 4px}
.devpick{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;margin-left:-1px;
  background:var(--panel);border:1px solid var(--edge);border-radius:0 4px 4px 0;color:var(--muted);font-size:12px}
.devpick:hover{border-color:#3a4558;color:var(--fg)}
#bMic[aria-pressed="true"] + .devpick{border-color:var(--trace);color:var(--trace)}
.devpick:focus-within{outline:2px solid var(--hold);outline-offset:2px}
.devpick select{position:absolute;inset:0;width:100%;height:100%;max-width:none;padding:0;opacity:0;cursor:pointer;font-size:16px}

.readouts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--edge);
  border:1px solid var(--edge);border-radius:6px;overflow:hidden}
.ro{background:var(--panel);padding:5px 10px;min-width:0}
.ro small{display:block;color:var(--muted);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.ro output{display:block;font:600 14px/1.3 var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ro.key output{color:var(--trace)}

.stage{flex:1 1 0;min-height:200px;position:relative;
  background:var(--panel);border:1px solid var(--edge);border-radius:6px;overflow:hidden}
.stage canvas{position:absolute;left:0;width:100%;display:block;touch-action:none}
#spec{top:0;height:100%}
.stage.sg #spec{height:62%}
#sgram{top:62%;bottom:0;height:auto;border-top:1px solid var(--edge)}

.filebar{display:flex;align-items:center;gap:10px;min-width:0}
.filebar audio{width:100%;height:36px}

.controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 16px}
.ctl{display:flex;flex-direction:column;gap:3px}
.ctl label{color:var(--muted);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
select{font:12px var(--f-num);color:var(--fg);background:var(--panel);border:1px solid var(--edge);border-radius:4px;padding:5px 7px;max-width:100%}
input[type=range]{accent-color:var(--trace);width:120px}
.ctl .val{font:12px var(--f-num);color:var(--fg)}
.status{font:12px/1.5 var(--f-num);color:var(--muted);min-height:1.5em;overflow-wrap:anywhere}
.status.err{color:var(--warn)}

@media (max-width:760px){
  .app{height:auto;min-height:100%;overflow:visible}
  .stage{flex:none;height:58vh}
  .readouts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ro output{font-size:14px}
  .controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
  .ctl select,.ctl input[type=range]{width:100%}
  .controls .wide{grid-column:1/-1}
  button{padding:9px 10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}