:root{
  --bg:#000;--panel:#111;--b1:#222;--b2:#333;
  --dim:#666;--mid:#888;--txt:#bbb;--hi:#eee;
  --green:#0f8;--green2:#0b7;--green3:#064;
  --amber:#fb2;--red:#f44;--blue:#48f;--cyan:#2de;
  --font-ui:'Barlow Condensed';--font-mono:'Share Tech Mono';
  --size-logo:14px;--size-toggle-btn:11px;--size-header-btn:10px;
  --size-section-label:9px;--size-readout-label:9px;--size-readout-value:19px;
  --size-readout-value-compact:23px;--size-readout-unit:9px;--size-status:10px;
  --color-section-label:#678;--color-readout-label:#789;--color-readout-value:#def;
  --color-readout-unit:#567;--color-status:#678;
  --color-readout-bg:#0a1420;--color-readout-border:#1a2d42;
  --color-readout-ok:#0f8;--color-readout-warn:#fc4;--color-readout-bad:#f55;
  --color-splitter-bg:#0d1722;--color-splitter-line:#357;
  /* Gap between module title (.slbl) and content below; all .mod sections use this. */
  --mod-title-gap:3px;
  /* History graph top inset; must stay in sync with PADT in drawHistory (loudness.js). */
  --loudness-history-pad-top:28px;
  /* Loudness right readout column: vertical stack, single min width. */
  --loudness-readout-gap:6px;
  --loudness-readout-cell-min:86px;
  --loudness-readout-panel-min:236px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--bg);color:var(--txt);
  font-family:var(--font-ui,'Barlow Condensed'), 'Arial Narrow', sans-serif;
  height:100vh;display:flex;flex-direction:column;overflow:hidden;
  user-select:none;
}
#hdr{
  display:flex;align-items:center;gap:10px;
  padding:0 14px;height:42px;
  border-bottom:1px solid var(--b1);background:var(--panel);flex-shrink:0;
}
.logo{font-weight:700;font-size:var(--size-logo);letter-spacing:4px;text-transform:uppercase;color:var(--hi);white-space:nowrap;}
.logo span{color:var(--cyan);}
.hsp{flex:1;}
.tgl{display:flex;background:var(--bg);border:1px solid var(--b2);border-radius:3px;overflow:hidden;}
.tbtn{
  background:none;border:none;color:var(--dim);
  font-family:var(--font-ui,'Barlow Condensed'), sans-serif;font-weight:600;
  font-size:var(--size-toggle-btn);letter-spacing:1.5px;padding:4px 10px;cursor:pointer;transition:all .15s;white-space:nowrap;
}
.tbtn.on{background:var(--b2);color:var(--hi);}
.hbtn{
  background:none;border:1px solid var(--b2);color:var(--mid);
  font-family:var(--font-ui,'Barlow Condensed'), sans-serif;font-weight:600;
  font-size:var(--size-header-btn);letter-spacing:2px;padding:4px 10px;
  cursor:pointer;border-radius:3px;text-transform:uppercase;transition:all .15s;white-space:nowrap;
}
.hbtn:hover{color:var(--hi);border-color:var(--mid);}
#startBtn{border-color:var(--green3);color:var(--green);display:flex;align-items:center;gap:6px;}
#startBtn::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);flex-shrink:0;}
#startBtn.off{border-color:var(--b2);color:var(--mid);}
#startBtn.off::before{background:var(--mid);box-shadow:none;}
#startBtn.on::before{animation:blink 1.1s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}

.settings-overlay{
  position:fixed;inset:0;z-index:1000;
  display:none;align-items:flex-start;justify-content:flex-end;
  padding:42px 14px 14px;
  background:rgba(0,0,0,.48);
}
.settings-overlay.open{display:flex;}
.settings-panel{
  min-width:280px;max-width:min(360px,calc(100vw - 28px));
  background:var(--panel);
  border:1px solid var(--b1);
  border-radius:4px;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
}
.settings-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 12px;border-bottom:1px solid var(--b1);
}
.settings-title{
  font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--hi);
}
.settings-close{
  background:none;border:none;color:var(--dim);font-size:22px;line-height:1;
  cursor:pointer;padding:0 4px;transition:color .15s;
}
.settings-close:hover{color:var(--hi);}
.settings-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:12px;}
.settings-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:30px;
}
.settings-k{
  flex:0 1 46%;
  font-size:var(--size-section-label);font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--color-section-label);
  line-height:1.2;
}
.settings-v{
  flex:1;min-width:0;display:flex;justify-content:flex-end;align-items:center;
}
.settings-v .hbtn{flex-shrink:0;}
.settings-v .tgl{width:100%;max-width:200px;}
.settings-v .tgl .tbtn{flex:1;text-align:center;}
.settings-select{
  width:100%;max-width:200px;
  font-family:var(--font-ui,'Barlow Condensed'),sans-serif;font-weight:600;
  font-size:var(--size-toggle-btn);letter-spacing:1px;
  padding:5px 8px;border:1px solid var(--b2);border-radius:3px;
  background:var(--bg);color:var(--hi);cursor:pointer;
  appearance:auto;
}
.settings-select:hover,.settings-select:focus{
  border-color:var(--mid);outline:none;
}

#main{
  display:grid;
  grid-template-columns:minmax(180px, 22%) 6px minmax(620px, 1fr);
  flex:1;
  overflow:hidden;
  min-height:0;
}
#lp{
  border-right:1px solid var(--b1);
  display:grid;grid-template-rows:minmax(240px, 68%) 6px minmax(120px, 32%);
  padding:10px 11px;gap:8px;overflow:hidden;
  min-width:0;
}
.slbl{font-size:var(--size-section-label);font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--color-section-label);flex-shrink:0;line-height:1.15;}
.corrLbl{
  font-size:var(--size-section-label);
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--color-section-label);
  display:flex;
  justify-content:center;
  gap:6px;
  flex-shrink:0;
  margin-top:-2px;
}
#mWrap,#vWrap{flex:1;min-height:0;}
#mCvs{display:block;width:100%;height:100%;}

/* padding-top set in drawHistory to match PADT (plot area top). */
#rdouts{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--loudness-readout-gap);min-width:var(--loudness-readout-panel-min);width:100%;padding-top:0;}
/* Single-line row: label | value | unit */
#rdouts .rdout{
  min-width:0;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(4.5ch,auto) minmax(2.75em,max-content);
  align-items:center;
  column-gap:10px;
  padding:6px 10px;
}
#rdouts .rl{
  margin-bottom:0;
  line-height:1.2;
  overflow-wrap:anywhere;
  word-break:break-word;
}
#rdouts .rv{
  justify-self:end;
  text-align:right;
  font-variant-numeric:tabular-nums;
  letter-spacing:0.02em;
}
#rdouts .ru{
  margin-top:0;
  justify-self:end;
  text-align:right;
  white-space:nowrap;
}
.rdout{background:var(--color-readout-bg);border:1px solid var(--color-readout-border);border-radius:4px;padding:7px 10px;}
.rl{font-size:var(--size-readout-label);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--color-readout-label);margin-bottom:3px;line-height:1.2;}
.rv{font-family:var(--font-mono,'Share Tech Mono'), monospace;font-size:var(--size-readout-value);line-height:1.1;color:var(--color-readout-value);}
.ru{font-size:var(--size-readout-unit);letter-spacing:1px;color:var(--color-readout-unit);margin-top:2px;font-weight:600;}
.rdout.compact .rv{font-size:var(--size-readout-value-compact);}
.rdout.c-ok  .rv{color:var(--color-readout-ok);}
.rdout.c-warn .rv{color:var(--color-readout-warn);}
.rdout.c-bad  .rv{color:var(--color-readout-bad);}

button.rdout.hist-toggle{
  font:inherit;color:inherit;text-align:left;width:100%;
  cursor:pointer;appearance:none;-webkit-appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
button.rdout.hist-toggle.on{
  border-color:var(--cyan);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--cyan) 35%, transparent), 0 0 16px color-mix(in srgb, var(--cyan) 18%, transparent);
  background-color:color-mix(in srgb, var(--color-readout-bg) 88%, var(--cyan) 12%);
}
button.rdout.hist-toggle:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}

#splitMain,
.splitV{
  background:var(--color-splitter-bg);
  border:1px solid var(--b1);
  position:relative;
}
#splitMain{
  cursor:col-resize;
}
#splitMain::after{
  content:'';
  position:absolute;
  left:2px; right:2px; top:50%;
  border-top:1px solid var(--color-splitter-line);
}
#rp{
  min-width:0;
  overflow:hidden;
  padding:10px 10px 10px 11px;
  display:grid;
  grid-template-rows:minmax(180px, 54%) 6px minmax(190px, 46%);
  gap:0;
}
.mod{
  min-height:0;
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:var(--mod-title-gap);
}
.modBody{
  flex:1;
  min-height:0;
}
#loudMod{grid-row:1;}
.splitV{
  grid-row:2;
  cursor:row-resize;
}
#specMod{grid-row:3;}
#sCvs,#hCvs,#vCvs{
  display:block;
  width:100%;
  height:100%;
}
.loudRow{
  flex:0 0 auto;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(200px, 1fr) minmax(var(--loudness-readout-panel-min), 0.42fr);
  gap:6px;
  align-items:start;
}
#loudMod .loudRow .modBody{flex:0 0 auto;height:auto;min-height:0;}
#hWrap{min-width:0;min-height:0;}
.splitV::after{
  content:'';
  position:absolute;
  top:2px; bottom:2px; left:50%;
  border-left:1px solid var(--color-splitter-line);
}

#sbar{height:22px;background:var(--panel);border-top:1px solid var(--b1);
  padding:0 14px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.st{font-size:var(--size-status);letter-spacing:.5px;color:var(--color-status);}
.st.ok{color:var(--green2);}.st.err{color:var(--red);}.st.warn{color:var(--amber);}
.sdiv{width:1px;height:12px;background:var(--b1);flex-shrink:0;}