:root{
  --ink:#0f1319; --panel:#161b23; --panel-2:#1c222c; --sunken:#12161d; --gutter:#0b0e13;
  --line:#2a323e;
  --text:#c9d2de; --text-dim:#7d8a9c; --text-dim-2:#5b6a7d; --text-bright:#eef3f9;
  --muted:#8f9bab; --muted-2:#4d5866; --sel:#2d5f8a;
  --accent:#5cc8ff; --success:#8ce99a; --danger:#ff8f8f; --warn:#ffd866; --range:#cfe2f3;
  --active-row-bg:#1d2733; --active-row-border:#33465c; --scrollbar:#2c3542;
  --modal-backdrop:rgba(6,9,13,.72); --readout-bg:rgba(15,19,25,.93); --hover-tint:rgba(255,255,255,.05);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "DejaVu Sans Mono", Consolas, monospace;
}
/* explicit toggle (see btnTheme in main.js), not prefers-color-scheme -- the
   canvas plots can't be re-themed by CSS at all (see theme.js), so an
   automatic OS-driven switch would desync the chrome from the plots. */
:root[data-theme="light"]{
  --ink:#f4f5f7; --panel:#ffffff; --panel-2:#eef0f4; --sunken:#e6e9ee; --gutter:#dde1e8;
  --line:#d5dbe4;
  --text:#2a323e; --text-dim:#5b6675; --text-dim-2:#7a8494; --text-bright:#10151c;
  --muted:#5b6675; --muted-2:#7a8494;
  --accent:#0d79b5; --success:#1c8a4d; --danger:#c23b3b; --warn:#9a6a00; --range:#0d5a8a;
  --active-row-bg:#dbe6f2; --active-row-border:#a9c4dc; --scrollbar:#c7cdd6;
  --modal-backdrop:rgba(120,130,145,.35); --readout-bg:rgba(255,255,255,.93); --hover-tint:rgba(0,0,0,.05);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--ink);color:var(--text);font:12px/1.45 var(--mono);
  display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;}
header{display:flex;align-items:center;gap:14px;padding:8px 12px;background:var(--panel);
  border-bottom:1px solid var(--line);flex:0 0 auto;flex-wrap:wrap}
.brand{color:var(--text-bright);letter-spacing:.18em;text-transform:uppercase;font-size:11px}
.brand b{font-weight:600}
.file{color:var(--text-dim);font-size:11px;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spacer{flex:1}
button,select,input{font:inherit;font-size:11px;color:var(--text);background:var(--panel-2);
  border:1px solid var(--line);border-radius:3px;padding:4px 8px}
button{cursor:pointer}
button:hover{border-color:var(--text-dim);color:var(--text-bright)}
button.on{background:var(--sel);border-color:var(--sel);color:#fff}
button.sq{padding:3px 9px;font-size:13px;line-height:1}
input.num{width:11ch;padding:3px 5px}
input[type=range]{width:70px;padding:0;background:none;border:none;vertical-align:middle}
label.ctl{display:flex;align-items:center;gap:5px;color:var(--text-dim);font-size:11px}
.grp{display:flex;align-items:center;gap:3px;padding-left:8px;border-left:1px solid var(--line)}
.coffee{font-size:11px;color:var(--text);text-decoration:none;border:1px solid var(--line);
  border-radius:3px;padding:4px 9px;background:var(--panel-2)}
.coffee:hover{border-color:var(--warn);color:var(--text-bright)}
.tabs{display:flex;gap:2px}
.tabs button{border-radius:3px 3px 0 0;padding:4px 14px}
main{flex:1;display:flex;min-height:0}
aside{width:270px;flex:0 0 auto;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
aside.collapsed{width:0!important;min-width:0;border-right:none}
.resizer{flex:0 0 auto;width:8px;position:relative;cursor:col-resize;background:transparent}
.resizer:hover{background:var(--hover-tint)}
.resizer button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:16px;height:30px;padding:0;font-size:13px;line-height:1;border-radius:3px;
  cursor:pointer;z-index:2}
aside .head{padding:8px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;
  flex:0 1 auto;min-height:0;overflow-y:auto;max-height:min(60vh,420px)}
aside input[type=text]{width:100%}
.hint{color:var(--text-dim);font-size:10px;letter-spacing:.03em}
.derived{display:flex;flex-direction:column;gap:5px;padding:6px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:4px}
.derived input{width:100%}
.derived .dlgmsg:empty{display:none}
.derivedRow{display:flex;align-items:center;gap:6px}
.infowrap{display:inline-flex}
.infobtn{width:18px;height:18px;padding:0;border-radius:50%;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center}
/* position:fixed (not absolute) so it isn't clipped by aside .head's own
   overflow:auto scrolling -- position is computed in JS from the button's
   rect since CSS alone can't anchor a fixed element to another one */
.infopop{display:none;position:fixed;z-index:30;width:260px;
  background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:8px 10px;
  font-size:10px;color:var(--text-dim);line-height:1.5;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.infopop.show{display:block}
.infopop.helppop{width:360px;max-height:74vh;overflow-y:auto;
  display:none;grid-template-columns:auto 1fr;column-gap:10px;row-gap:5px}
.infopop.helppop.show{display:grid}
.helppop .helpsec{grid-column:1/-1;margin-top:8px;color:var(--text-bright);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.helppop .helpsec:first-child{margin-top:0}
.helppop .key{color:var(--success);white-space:nowrap;font-family:var(--mono)}
.acdrop{position:fixed;z-index:30;max-height:180px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.5)}
.acitem{padding:4px 8px;font-size:11px;color:var(--text);cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.acitem:hover{background:var(--panel-2)}
.acitem.sel,.acitem.on{background:var(--sel);color:#fff}
.dchips{display:flex;flex-wrap:wrap;gap:4px;max-height:64px;overflow-y:auto}
.dchips:empty{display:none}
.dchip{display:flex;align-items:center;gap:3px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:1px 3px 1px 8px;font-size:10.5px;color:var(--text);cursor:pointer}
.dchip:hover{border-color:var(--text-dim)}
.dchip .dchiprm{padding:0 5px;font-size:11px;line-height:1.4;border-radius:8px}
.collist{flex:1;overflow-y:auto;padding:2px 0}
.col{display:flex;align-items:center;gap:7px;padding:2px 8px;cursor:pointer;white-space:nowrap;overflow:hidden}
.col:hover{background:var(--panel-2)}
.col.active{background:var(--sel);color:#fff}
.swatch{width:9px;height:9px;padding:0;margin:0;border:1px solid var(--line);border-radius:2px;
  background:none;cursor:pointer;flex:0 0 auto;-webkit-appearance:none;appearance:none}
.swatch::-webkit-color-swatch-wrapper{padding:0}
.swatch::-webkit-color-swatch{border:none;border-radius:2px}
.swatch::-moz-color-swatch{border:none;border-radius:2px}
.swatch-empty{width:9px;height:9px;border-radius:2px;flex:0 0 auto;background:transparent;border:1px solid var(--line)}
.col .nm{overflow:hidden;text-overflow:ellipsis;flex:1 0 auto}
.col .rng{margin-left:auto;color:var(--text-dim);font-size:10px;flex:0 1 auto;min-width:0;
  overflow:hidden;padding-left:8px}
.col.active .rng{color:var(--range)}
.col.nonnum{opacity:.35;cursor:default}
.srchdr{display:flex;align-items:center;gap:6px;padding:4px 8px;margin-top:4px;cursor:pointer;
  background:var(--panel-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:10.5px;letter-spacing:.03em;color:var(--text-dim);position:sticky;top:0;z-index:1}
.srchdr:hover{color:var(--text)}
.srchdr .tri{flex:0 0 auto;width:9px}
.srchdr .letter{flex:0 0 auto;font-weight:700;color:var(--accent)}
.srchdr.cur .letter{color:var(--success)}
.srchdr .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srchdr .cnt{margin-left:auto;flex:0 0 auto}
section.view{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.toolbar{display:flex;gap:8px;align-items:center;padding:5px 10px;border-bottom:1px solid var(--line);
  background:var(--panel);flex-wrap:wrap;flex:0 0 auto}
canvas{display:block;width:100%;height:100%}
#cvs,#cvs2{cursor:crosshair}
.canvaswrap{flex:1;min-height:0;position:relative}
.navwrap{height:30px;flex:0 0 auto;border-top:1px solid var(--line);background:var(--sunken);position:relative}
#nav{cursor:ew-resize}
.readout{position:absolute;top:8px;right:8px;background:var(--readout-bg);border:1px solid var(--line);
  border-radius:3px;padding:6px 8px;font-size:11px;pointer-events:none;max-width:46ch;overflow:hidden}
.readout .k{color:var(--text-dim)}
.drop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:10px;background:var(--ink);z-index:5;text-align:center}
.drop.hide{display:none}
.drop .big{font-size:14px;color:var(--text-bright);letter-spacing:.05em}
.drop.over{background:var(--panel-2);outline:1px dashed var(--sel);outline-offset:-16px}
#emptyPane{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px}
#emptyPane .emptyLogo{width:56px;height:56px;border-radius:10px;border:1px dashed var(--line)}
#emptyPane .hint{font-size:11px}
.hidden{display:none !important}
.modal{position:fixed;inset:0;z-index:20;background:var(--modal-backdrop);display:flex;
  align-items:center;justify-content:center}
.dlg{background:var(--panel);border:1px solid var(--line);border-radius:5px;width:min(760px,92vw);
  max-height:88vh;display:flex;flex-direction:column;box-shadow:0 18px 60px rgba(0,0,0,.6)}
.dlg h2{margin:0;padding:11px 14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-bright);border-bottom:1px solid var(--line);font-weight:600}
.dlg .body{padding:12px 14px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.dlg .foot{padding:10px 14px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:9px 18px}
.opt{display:flex;flex-direction:column;gap:3px}
.opt>span{color:var(--text-dim);font-size:10px;letter-spacing:.05em}
.opt input,.opt select{width:100%}
.chk{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text)}
.chk input{width:auto;accent-color:var(--sel)}
pre.raw{margin:0;padding:8px;background:var(--sunken);border:1px solid var(--line);border-radius:3px;
  font-size:10.5px;line-height:1.5;max-height:130px;overflow:auto;white-space:pre;color:var(--muted)}
pre.raw .cmt{color:var(--muted-2)}
table.prev{border-collapse:collapse;font-size:10.5px;width:100%;display:block;overflow:auto;max-height:180px}
table.prev th,table.prev td{border:1px solid var(--line);padding:2px 6px;text-align:right;white-space:nowrap}
table.prev th{color:var(--text-bright);background:var(--panel-2);text-align:left;position:sticky;top:0}
table.prev td.bad{color:var(--danger)}
.dlgmsg{font-size:11px;color:var(--text-dim)}
.dlgmsg.err{color:var(--danger)}
.tabbar{display:flex;align-items:stretch;gap:2px;background:var(--panel);flex:0 0 auto;
  border-bottom:1px solid var(--line);padding:4px 6px 0;overflow-x:auto}
.tab{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 10px;border:1px solid var(--line);
  border-bottom:none;border-radius:4px 4px 0 0;background:var(--panel-2);color:var(--text-dim);
  cursor:pointer;white-space:nowrap;font-size:11px;position:relative;top:1px}
.tab:hover{color:var(--text)}
.tab.active{background:var(--ink);color:var(--text-bright);border-color:var(--line);
  box-shadow:0 1px 0 0 var(--ink)}
.tab.dragging{opacity:.4}
.tab.drag-over{box-shadow:inset 2px 0 0 var(--sel)}
.tab .kind{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim-2)}
.tab.active .kind{color:var(--sel);filter:brightness(1.5)}
.tab .nm{outline:none}
.tab .nm[contenteditable="true"]{background:var(--sunken);padding:0 3px;border-radius:2px}
.tab .x{border:none;background:none;color:var(--text-dim-2);padding:0 2px;font-size:13px;line-height:1}
.tab .x:hover{color:var(--danger)}
.addtabwrap{align-self:center;margin-left:4px}
.addtab{padding:3px 8px;font-size:11px}
#addTabMenu .acitem{display:flex;justify-content:space-between;gap:14px}
.pickbar{padding:7px 8px;border-bottom:1px solid var(--line);background:var(--sunken);
  display:flex;flex-direction:column;gap:5px}
.pickrow{display:flex;align-items:center;gap:6px;font-size:11px}
.pickrow .tag{color:var(--text-dim);width:1.4ch}
.pickrow .val{flex:1;color:var(--text-bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickrow .val.empty{color:var(--text-dim-2);font-style:italic}
.searchrow{display:flex;gap:5px;align-items:center}
.searchrow input{flex:1}
.searchrow button{padding:3px 7px;font-size:10.5px}
.col .quick{display:none;gap:3px;margin-left:auto;padding-left:6px}
.col:hover .quick{display:flex}
.col .quick button{padding:0 5px;font-size:10px;line-height:1.5;border-radius:2px}
.col.hasx{box-shadow:inset 2px 0 0 var(--accent)}
.serieslist{flex:0 0 auto;height:96px;overflow-y:auto;background:var(--sunken);
  border-bottom:1px solid var(--line);padding:4px 8px;display:flex;flex-direction:column;gap:3px}
.serieslist:empty{display:none}
.serieslist.collapsed{display:none}
.serieslist:empty+.hresizer{display:none}
.hresizer{flex:0 0 auto;height:8px;position:relative;cursor:row-resize;background:transparent;
  border-bottom:1px solid var(--line)}
.hresizer:hover{background:var(--hover-tint)}
.hresizer button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:26px;height:14px;padding:0;font-size:10px;line-height:1;border-radius:3px;
  cursor:pointer;z-index:2}
.gblock{border-radius:3px}
.gblock.active{outline:1px solid var(--sel)}
.ghdr{font-size:10px;color:var(--text-dim);letter-spacing:.03em;padding:2px 4px;cursor:pointer;border-radius:2px}
.ghdr:hover{color:var(--text);background:var(--panel-2)}
.gblock.active .ghdr{color:var(--success)}
.srow{display:flex;align-items:center;gap:7px;padding:2px 4px;border-radius:3px;cursor:pointer}
.srow:hover{background:var(--panel-2)}
.srow.active{background:var(--active-row-bg);outline:1px solid var(--active-row-border)}
.srow select{padding:1px 4px;font-size:10.5px}
.srow .rm{padding:1px 7px;font-size:12px;line-height:1;margin-left:auto}
.cmaprow{display:flex;align-items:center;gap:6px;padding:2px 4px 2px 26px;flex-wrap:wrap}
.cmaprow .stop{display:flex;align-items:center;gap:2px;background:var(--panel-2);border-radius:3px;padding:1px 3px}
.cmaprow .stop input[type=color]{width:16px;height:16px;padding:0;border:1px solid var(--line);border-radius:2px;
  background:none;-webkit-appearance:none;appearance:none}
.cmaprow .stop input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.cmaprow .stop input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}
.cmaprow .stop input[type=number]{width:5.2em;padding:1px 3px;font-size:10.5px}
.cmaprow .stop .stoprm{padding:0 4px;font-size:11px;line-height:1.3}
.cmaprow .stopadd{padding:1px 7px;font-size:10.5px}
#seriesPane:fullscreen,#xyPane:fullscreen,#xyzPane:fullscreen,#gridPane:fullscreen{background:var(--ink)}
.gridwrap{position:relative;flex:1;display:grid;gap:4px;padding:4px;min-height:0;background:var(--gutter)}
.gcol-resizer{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;z-index:5;background:transparent}
.grow-resizer{position:absolute;left:0;right:0;height:6px;cursor:row-resize;z-index:5;background:transparent}
.gcol-resizer:hover,.gcol-resizer.dragging,.grow-resizer:hover,.grow-resizer.dragging{background:var(--sel)}
.gcell{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0;
  background:var(--ink);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.gcell.active{border-color:var(--sel)}
.gcell-hdr{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:2px 4px;border-bottom:1px solid var(--line);flex:0 0 auto}
.gcell-hdr select{padding:1px 3px;font-size:9.5px}
.gcell-hdr button{padding:1px 6px;font-size:9.5px}
.gcell-hdr button.sq{padding:1px 5px}
.gcell-hdr button.on{background:var(--sel);color:#fff}
.gcell canvas{flex:1;width:100%;min-height:0;cursor:crosshair}
#credits{flex:0 0 auto;padding:3px 10px;font-size:9.5px;color:var(--text-dim);
  background:var(--panel);border-top:1px solid var(--line);user-select:none;
  display:flex;align-items:center;justify-content:flex-end;gap:6px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* print / "save as PDF" -- only the active plot's own canvas + axis labels
   matter on a printed page, so everything else (header, sidebar, tab bar,
   per-plot toolbar/curve-list/nav strip, any open dropdown) is hidden and
   the canvas is given the full page instead. Whichever pane is already
   showing on screen (not .hidden) is the one that ends up on the page --
   see printPlot() in main.js, which redraws it at the new (page-sized)
   resolution just before printing so it isn't a blurry upscale. */
@media print{
  body{background:#fff!important}
  header,aside,.resizer,.tabbar,.toolbar,.serieslist,.hresizer,.navwrap,
  .readout,.drop,.acdrop{display:none!important}
  main,.view,.canvaswrap{height:100vh!important}
  canvas{background:#fff!important}
}