/* CBCS palette, shared with the decomPOSEr, MolSanitizer and gnina apps (see the
   note in decomposer/templates/index.html for the contrast reasoning behind each
   value). --ink2 sits between the palette's text and muted tones, since this app
   uses three levels of text. */
:root {
  --bg:#0f1420; --panel:#1a2132; --soft:#131a29; --line:#2a3550; --line2:#2f3a57;
  --ink:#e6ecf5; --ink2:#b9c3d4; --ink3:#8b97ad; --acc:#1e96a2; --acc2:#b0d661;
  --accbg:#24404a; --warn:#ff5d5d; --orange:#f9aa40;
  --header-grad:linear-gradient(90deg,#10333c,#0f1420); --veil:rgba(15,20,32,.86); --pw:320px;
}
:root[data-theme="light"] {
  --bg:#eef1f7; --panel:#ffffff; --soft:#f6f8fc; --line:#d6dce8; --line2:#c6cee0;
  --ink:#1b2230; --ink2:#3d4757; --ink3:#586577; --acc:#14646c; --acc2:#5a771f;
  --accbg:#dfeef0; --warn:#d83b3b; --orange:#b26806;
  --header-grad:linear-gradient(90deg,#e3f1f2,#f5faf9); --veil:rgba(238,241,247,.86);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html{font-size:13px} body{font-size:15px}
body{background:var(--bg);color:var(--ink);display:flex;flex-direction:column;transition:.2s}
#hdr{background:var(--header-grad);border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:1rem;padding:8px 1.1rem;flex-shrink:0;z-index:10}
/* The logo sits on its own white plate in both themes rather than being recoloured. */
.cbcs{flex:0 0 auto;display:block;line-height:0;background:#fff;padding:5px 9px;border-radius:8px;border:1px solid rgba(0,0,0,.06)}
.cbcs img{display:block;height:30px;width:auto}
/* Wordmark: "CBCS" in brand orange and "pace" in teal, in both themes. The light
   theme darkens the orange (same hue) to 3.7:1 on the header; #f9aa40 is ~1.7:1 there. */
.brand{font-weight:800;letter-spacing:.04em;color:var(--orange);font-size:calc(1.1rem + 2px)}
.brand b{font-weight:inherit;color:var(--acc)}
.ver{font-size:calc(.72rem + 2px);color:var(--ink3)}
.grow{flex:1}
#statusmsg{font-size:calc(.76rem + 2px);color:var(--ink3)}
.btn{font-size:calc(.74rem + 2px);padding:.4rem .8rem;border-radius:6px;cursor:pointer;border:1px solid var(--line2);
  background:var(--soft);color:var(--ink2);transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--acc);color:var(--acc)}
a.btn{text-decoration:none;display:inline-block;line-height:1.2}
#app{display:flex;flex:1;overflow:hidden}
.panel{width:var(--pw);flex-shrink:0;background:var(--panel);display:flex;flex-direction:column;overflow:hidden}
#left{border-right:1px solid var(--line)}
.scroll{flex:1;overflow-y:auto;padding:.85rem}
.scroll::-webkit-scrollbar{width:7px}
.scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.lbl{font-size:calc(.66rem + 2px);font-weight:800;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase;
  margin:.9rem 0 .45rem;display:flex;align-items:center;gap:.45rem}
.lbl::after{content:'';flex:1;height:1px;background:var(--line)}
.sub{font-size:calc(.64rem + 2px);font-weight:700;letter-spacing:.08em;color:var(--ink3);text-transform:uppercase;margin:.55rem 0 .25rem .15rem}
.subrow{display:flex;align-items:center;justify-content:space-between;margin:.55rem 0 .25rem .15rem}
.subrow .sub{margin:0}
.togg{font-size:calc(.62rem + 2px);font-weight:700;color:var(--ink3)}
.togg a{cursor:pointer;color:var(--acc);text-decoration:none}
.togg a:hover{text-decoration:underline}
#drop{border:1.5px dashed var(--line2);border-radius:8px;padding:1.15rem .5rem;text-align:center;
  cursor:pointer;transition:.15s;color:var(--ink3);font-size:calc(.78rem + 2px)}
#drop:hover,#drop.over{border-color:var(--acc);color:var(--acc);background:var(--accbg)}
#drop .ic{font-size:calc(1.5rem + 2px);margin-bottom:.25rem}
#file{display:none}
.row{display:flex;align-items:center;gap:.45rem;padding:.34rem .3rem;border-radius:5px}
.row:hover{background:var(--soft)}
.row input[type=checkbox]{width:13px;height:13px;accent-color:var(--acc);flex-shrink:0}
.swatch{position:relative;width:15px;height:15px;flex-shrink:0}
.swatch .dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--line2);pointer-events:none}
.swatch select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.nm{flex:1;font-size:calc(.78rem + 2px);color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct{font-size:calc(.68rem + 2px);color:var(--ink3);flex-shrink:0;font-variant-numeric:tabular-nums}
.rm{background:none;border:none;color:var(--ink3);cursor:pointer;font-size:calc(.8rem + 2px);padding:0 .2rem}
.rm:hover{color:var(--warn)}
.rm.df:hover{color:var(--acc)}
.grp{margin-bottom:.15rem}
.ghead{display:flex;align-items:center;gap:.45rem;padding:.34rem .3rem;border-radius:5px;cursor:pointer;user-select:none}
.ghead:hover{background:var(--soft)}
.ghead input[type=checkbox]{width:13px;height:13px;accent-color:var(--acc);flex-shrink:0}
.caret{width:15px;text-align:center;color:var(--ink3);font-size:calc(.7rem + 2px);transition:transform .15s;flex-shrink:0}
.grp.open .caret{transform:rotate(90deg)}
.gname{flex:1;font-size:calc(.78rem + 2px);font-weight:700;color:var(--ink)}
.gbody{display:none;margin-left:1.1rem;border-left:1px solid var(--line);padding-left:.25rem}
.grp.open .gbody{display:block}
.seg{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem}
.seg .opt{font-size:calc(.74rem + 2px);padding:.28rem .65rem;border-radius:5px;border:1px solid var(--line2);
  background:var(--soft);color:var(--ink2);cursor:pointer;transition:.15s}
.seg .opt.on{background:var(--accbg);border-color:var(--acc);color:var(--acc);font-weight:700}
#axes{display:none;margin-top:.35rem}
#axes.show{display:block}
.arow{display:flex;align-items:center;gap:.45rem;margin-bottom:.35rem}
.arow span{font-size:calc(.72rem + 2px);color:var(--ink3);width:12px}
select{flex:1;font-size:calc(.73rem + 2px);padding:.28rem .4rem;border-radius:5px;border:1px solid var(--line2);
  background:var(--soft);color:var(--ink2)}
select:focus{outline:none;border-color:var(--acc)}
.dgrid{display:flex;flex-direction:column;gap:.1rem;max-height:230px;overflow-y:auto}
.dgrid::-webkit-scrollbar{width:7px}
.dgrid::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.drow{display:flex;align-items:center;gap:.45rem;padding:.14rem .2rem;border-radius:4px}
.drow:hover{background:var(--soft)}
.drow input{width:12px;height:12px;accent-color:var(--acc)}
.drow label{font-size:calc(.73rem + 2px);color:var(--ink2);cursor:pointer}
.drow label i{color:var(--ink3);font-style:normal}
.mini{display:flex;gap:.4rem;margin-bottom:.4rem}
.mini .btn{flex:1;padding:.3rem;text-align:center}
.slider{display:flex;align-items:center;gap:.5rem}
input[type=range]{flex:1;accent-color:var(--acc)}
.sval{font-size:calc(.72rem + 2px);color:var(--ink3);min-width:30px;text-align:right}
.lfrow{margin-bottom:.75rem}
.lfhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.2rem}
.lfname{font-size:calc(.74rem + 2px);color:var(--ink2);font-weight:700}
.lfval{font-size:calc(.68rem + 2px);color:var(--ink3);font-variant-numeric:tabular-nums}
.dualrange{position:relative;height:20px}
.dualrange .track{position:absolute;left:0;right:0;top:8px;height:4px;border-radius:2px;background:var(--line2)}
.dualrange .fill{position:absolute;top:8px;height:4px;border-radius:2px;background:var(--acc)}
.dualrange input[type=range]{position:absolute;left:0;top:0;width:100%;height:20px;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none}
.dualrange input[type=range]::-webkit-slider-runnable-track{background:none;height:20px}
.dualrange input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;
  width:13px;height:13px;border-radius:50%;background:var(--acc);border:2px solid var(--panel);
  box-shadow:0 0 0 1px var(--line2);cursor:pointer;margin-top:3.5px}
.dualrange input[type=range]::-moz-range-track{background:none;height:4px;border:none}
.dualrange input[type=range]::-moz-range-thumb{pointer-events:auto;width:13px;height:13px;border-radius:50%;
  background:var(--acc);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line2);cursor:pointer}
#go{width:100%;margin-top:.9rem;padding:.65rem;font-size:calc(.8rem + 2px);font-weight:800;letter-spacing:.04em;
  background:var(--acc);border:none;color:#fff;border-radius:7px;cursor:pointer;transition:.15s}
#go:hover{filter:brightness(1.08)}
#go:disabled{opacity:.45;cursor:not-allowed}
#plotwrap{flex:1;display:flex;flex-direction:column;background:var(--bg);position:relative;overflow:hidden}
#plot{width:100%;flex:1}
/* keep the default arrow cursor over the 2D plot instead of Plotly's crosshair/grab */
#plot .nsewdrag,#plot .drag{cursor:default !important}
#plotinfo{position:absolute;top:8px;right:14px;font-size:calc(.7rem + 2px);color:var(--ink3);
  background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:.2rem .5rem;display:none}
#resetbtn{position:absolute;top:8px;left:14px;font-size:calc(.72rem + 2px);color:var(--ink2);cursor:pointer;
  background:var(--panel);border:1px solid var(--line2);border-radius:5px;padding:.28rem .6rem;display:none;z-index:21;transition:.15s}
#resetbtn:hover{border-color:var(--acc);color:var(--acc)}
#modewrap{position:absolute;top:44px;left:14px;z-index:21;display:none;gap:.3rem}
.mopt{font-size:calc(.8rem + 2px);line-height:1;padding:.32rem .5rem;border-radius:5px;border:1px solid var(--line2);
  background:var(--panel);color:var(--ink2);cursor:pointer;transition:.15s}
.mopt:hover{border-color:var(--acc);color:var(--acc)}
.mopt.on{background:var(--accbg);border-color:var(--acc);color:var(--acc)}
#selwrap{position:absolute;bottom:14px;right:14px;z-index:21;width:250px;max-height:min(380px,60%);
  background:var(--panel);border:1px solid var(--line2);border-radius:9px;box-shadow:0 6px 24px rgba(0,0,0,.16);
  display:none;flex-direction:column;overflow:hidden}
#selhdr{display:flex;align-items:center;gap:.35rem;padding:.5rem .6rem;border-bottom:1px solid var(--line)}
#selcount{font-size:calc(.72rem + 2px);font-weight:800;color:var(--ink2);flex:1}
#selhdr button{font-size:calc(.68rem + 2px);padding:.25rem .45rem;border-radius:5px;border:1px solid var(--line2);
  background:var(--soft);color:var(--ink2);cursor:pointer}
#selhdr button:hover{border-color:var(--acc);color:var(--acc)}
#sellist{overflow-y:auto;flex:1}
#sellist::-webkit-scrollbar{width:6px}
#sellist::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.selitem{display:flex;align-items:center;gap:.4rem;padding:.3rem .6rem;cursor:pointer;border-bottom:1px solid var(--line)}
.selitem:last-child{border-bottom:none}
.selitem:hover{background:var(--soft)}
.selitem .nm{flex:1;font-size:calc(.73rem + 2px);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selitem .ds{font-size:calc(.62rem + 2px);color:var(--ink3);flex-shrink:0;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#searchwrap{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:22;width:248px;display:none}
#searchrow{position:relative}
#searchbox{width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:6px;
  padding:.36rem 1.7rem .36rem .6rem;color:var(--ink);font-size:calc(.78rem + 2px);outline:none;transition:.15s}
#searchbox:focus{border-color:var(--acc)}
#searchclear{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:none;
  background:none;border:none;color:var(--ink3);cursor:pointer;font-size:calc(.82rem + 2px);padding:.1rem .25rem;line-height:1}
#searchclear:hover{color:var(--warn)}
#searchwrap.active #searchclear{display:block}
#searchres{margin-top:4px;background:var(--panel);border:1px solid var(--line);border-radius:6px;
  max-height:260px;overflow:auto;display:none;box-shadow:0 6px 20px rgba(0,0,0,.18)}
#searchres.show{display:block}
.sres{padding:.34rem .55rem;cursor:pointer;border-bottom:1px solid var(--line);line-height:1.25}
.sres:last-child{border-bottom:none}
.sres:hover{background:var(--soft)}
.sres .nm{font-size:calc(.76rem + 2px);color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sres .ds{font-size:calc(.64rem + 2px);color:var(--ink3)}
.snon{font-size:calc(.72rem + 2px);color:var(--ink3);padding:.45rem .55rem}
#empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:.4rem;pointer-events:none;color:var(--ink3)}
#empty.hide{display:none}
#empty .p{font-size:calc(.8rem + 2px)}
#empty .p::before{content:'▸ ';color:var(--acc2)}
#card{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--line2);
  border-radius:10px;overflow:hidden;box-shadow:0 6px 28px rgba(0,0,0,.18);display:none;z-index:20;min-width:200px}
#card .cd{font-size:calc(.72rem + 2px);font-weight:800;color:var(--acc);padding:.45rem .7rem .15rem;letter-spacing:.03em}
#card img{display:block;width:220px;height:180px;object-fit:contain;background:#fff}
#card .cn{font-size:calc(.74rem + 2px);color:var(--ink2);padding:.2rem .7rem .45rem;text-align:center;word-break:break-all}
#card .cv{font-size:calc(.68rem + 2px);color:var(--ink3);padding:0 .7rem .5rem;text-align:center;display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap}
#card .cv span{white-space:nowrap}
#card .cv b{color:var(--ink2);font-weight:700}
#prog{position:absolute;inset:0;background:var(--veil);display:none;align-items:center;
  justify-content:center;flex-direction:column;gap:.75rem;z-index:30}
#prog.show{display:flex}
#progmsg{font-size:calc(.85rem + 2px);color:var(--ink2)}
.pbar{width:240px;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--acc);width:0;transition:width .3s}
table{width:100%;border-collapse:collapse;font-size:calc(.72rem + 2px)}
th{color:var(--ink3);font-weight:800;padding:.3rem .4rem;text-align:left;border-bottom:1px solid var(--line);
  font-size:calc(.66rem + 2px);letter-spacing:.06em}
td{padding:.3rem .4rem;color:var(--ink2);border-bottom:1px solid var(--line)}
td.v{color:var(--ink);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
#notif{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:var(--panel);
  border:1px solid var(--line2);border-radius:7px;padding:.6rem 1.2rem;font-size:calc(.8rem + 2px);color:var(--ink2);
  box-shadow:0 4px 18px rgba(0,0,0,.14);opacity:0;transition:.3s;pointer-events:none;z-index:99}
#notif.show{opacity:1}
#notif.err{border-color:var(--warn);color:var(--warn)}