/* Brain Energy — app styles on top of assets/css/biomodels.css (top bar: css/site.css) */

.bio{flex-basis:290px;width:290px}
.linkbtn{appearance:none;border:none;background:none;font:inherit;font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ink-faint);cursor:pointer;padding:0}
.linkbtn:hover{color:var(--ink);text-decoration:underline}
#treeFilter{margin-bottom:6px}

/* ---- region tree ---- */
.tree{font-size:12.5px;user-select:none}
.tnode{display:flex;align-items:center;gap:4px;padding:3px 4px;border-radius:3px;cursor:pointer;line-height:1.3}
.tnode:hover{background:var(--extra)}
.tnode.sel{background:var(--blue-soft);font-weight:600}
.tnode.hl:not(.sel){background:#f6eef4}
.tnode .car{flex:0 0 14px;width:14px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:9px;border-radius:2px}
.tnode .car.has:hover{color:var(--ink);background:#fff}
.tnode .sw{flex:0 0 10px;width:10px;height:10px;border-radius:2px;border:1px solid rgba(0,0,0,.12)}
.tnode .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tnode .cnt{font-size:10px;color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.tnode.grp .nm{color:var(--ink-soft);font-weight:600;font-size:11px;letter-spacing:.03em;text-transform:uppercase}
.tnode.dim{opacity:.35}
.tkids{margin-left:12px;border-left:1px dotted var(--line);padding-left:2px}

.systems{display:flex;flex-direction:column;gap:4px}
.sysbtn{appearance:none;display:flex;align-items:center;gap:8px;text-align:left;font:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);cursor:pointer}
.sysbtn:hover{border-color:var(--accent)}
.sysbtn.on{border-color:var(--accent);background:var(--blue-soft);font-weight:600}
.sysbtn .sw{width:12px;height:12px;border-radius:50%}

/* ---- canvas toolbar: a column on the right, so the Start / Speed bar can sit top middle ---- */
.bm-canvas .toolbar{flex-direction:column}
.bm-canvas .toolbar .sep{width:auto;height:1px;margin:3px 2px}

.bm-canvas{transition:background .3s}

.orient{position:absolute;left:16px;right:16px;bottom:10px;display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-faint);pointer-events:none;letter-spacing:.04em}
.toolbar .anim-only{display:none}
.show-anim .toolbar .anim-only{display:inline-block}
.toolbar .sep.anim-only{display:none}
.show-anim .toolbar .sep.anim-only{display:block}

/* ---- svg map ---- */
#stage{cursor:grab;will-change:transform;transform-origin:0 0}
#fxc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;will-change:transform;transform-origin:0 0}
#stage.panning{cursor:grabbing}
.rg{stroke:#fff;stroke-opacity:var(--border-op,1);stroke-width:1.2;stroke-linejoin:round;cursor:pointer;
  transition:fill var(--fade-t,.25s),stroke var(--fade-t,.25s)}
.rg.stroke{fill:none;stroke-linecap:round}
.rg.deep{fill-opacity:.55;stroke-dasharray:4 3;stroke-width:1.4}
.decor path{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round}
.decor.cx path{opacity:var(--sulci-op,.5)}
.decor.cb > path{stroke-width:2.6;opacity:var(--cb-op,.5)}
.decor.folia path{stroke-width:.9;opacity:var(--folia-op,.28);stroke:#0b0b3a}
.shade{opacity:var(--shade-op,1)}
.nmode .shade{display:none}
.lbl{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:600;fill:#22303f;paint-order:stroke;stroke:#ffffffd0;stroke-width:3px;stroke-linejoin:round;text-anchor:middle;dominant-baseline:middle;transition:opacity var(--fade-t,.25s)}
.lbl.faded{opacity:.45}

/* neuron mode: regions become a pale backdrop (white theme) */
.nmode .rg{fill-opacity:var(--region-alpha,.3)}
.nmode .rg.deep{fill-opacity:calc(var(--region-alpha,.3) * .8)}
.nmode .decor.cx path,.nmode .decor.cb > path{opacity:calc(var(--sulci-op,.5) * .35)}
.nmode .decor.folia path{opacity:calc(var(--folia-op,.28) * .4)}
#lyNeurons{transition:opacity var(--fade-t,.25s)}
#lyNeurons path.ns{stroke:var(--ns);transition:stroke var(--fade-t,.25s)}
#lyNeurons .soma{fill:var(--sf);stroke:var(--ns);transition:stroke var(--fade-t,.25s)}
#lyNeurons .nucleus{fill:var(--ns)}
#lyNeurons path.my{stroke:var(--my)}
#lyNeurons .bt{fill:var(--bf);fill-opacity:var(--bop,.5);stroke:var(--bs)}
#lyNeurons .vs{fill:var(--vf)}
#lyNeurons .pd{stroke:var(--pd)}
.emode .rg{fill-opacity:calc(var(--region-alpha,.3) + .3)}

/* ---- right info panel ---- */
.infopanel{flex:0 0 340px;width:340px;height:100%;background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;z-index:10}
.ip-scroll{flex:1;min-height:0;overflow:auto;padding:16px 18px 20px}
.crumbs{font-size:11px;color:var(--ink-faint);margin-bottom:8px;display:flex;flex-wrap:wrap;gap:3px}
.crumbs a{color:var(--ink-soft);text-decoration:none;cursor:pointer}
.crumbs a:hover{text-decoration:underline;color:var(--ink)}
.ip-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.ip-head .sw{flex:0 0 14px;height:14px;border-radius:3px;margin-top:4px}
.ip-head h2{margin:0;font-size:18px;line-height:1.2}
.ip-head .subt{font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.ip-sum{font-size:13px;line-height:1.55;margin:0 0 12px}
.ip-sec{margin:14px 0 6px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{font-size:11.5px;padding:3px 8px;border-radius:10px;background:var(--extra);color:var(--ink)}
/* 'What it does' badges: tinted with the region's (or system's) own colour */
.chip.does{--c:#56697f;background:color-mix(in srgb,var(--c) 20%,#fff);border:1px solid color-mix(in srgb,var(--c) 45%,#fff);color:color-mix(in srgb,var(--c) 35%,#1b2430);font-weight:600}
.chip.link{cursor:pointer}
.chip.link:hover{background:var(--blue-soft)}
.ip-facts{margin:0;padding-left:16px;font-size:12px;line-height:1.5;color:var(--ink)}
.ip-facts li{margin-bottom:4px}
.stat{border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin:10px 0}
.stat .big{font-size:16px;line-height:1.3;font-weight:700;font-variant-numeric:tabular-nums}
.stat .small{font-size:11.5px;color:var(--ink-soft);line-height:1.45;margin-top:3px}
.stat .basis{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:8px;margin-left:6px;vertical-align:middle}
.basis.measured{background:#e3f1e4;color:#2e7d32}
.basis.estimate{background:#fff2d6;color:#9a6a00}
.basis.none{background:var(--extra);color:var(--ink-soft)}
.basis.weak{background:var(--extra);color:var(--ink-soft)}
.basis.mixed{background:#fde6e6;color:#b23b3b}
.basis.moderate{background:#e3ecf7;color:#1d5f9a}
.meter{height:8px;border-radius:4px;background:var(--extra);overflow:hidden;margin:6px 0 2px}
.meter i{display:block;height:100%;border-radius:4px}
.reflinks{font-size:11.5px;line-height:1.5}
.reflinks a{color:#0d47a1;cursor:pointer;text-decoration:none}
.reflinks a:hover{text-decoration:underline}
.ip-actions{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px}
.kids{display:flex;flex-direction:column;gap:3px}
.kid{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:4px 6px;border-radius:3px;cursor:pointer}
.kid:hover{background:var(--extra)}
.kid .sw{width:10px;height:10px;border-radius:2px}
.hint{font-size:12px;color:var(--ink-soft);line-height:1.5}

/* references */
.refsum{background:#f7f9fb;border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin-bottom:12px}
.refsum ul{margin:6px 0 0;padding-left:16px;font-size:12px;line-height:1.5}
.refsum li{margin-bottom:5px}
.reffilter{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 10px}
.reffilter button{appearance:none;font:inherit;font-size:11px;padding:3px 9px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer}
.reffilter button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.ref{border-top:1px solid var(--line);padding:10px 0}
.ref.flash{animation:refflash 1.4s}
@keyframes refflash{0%{background:#fff4c2}100%{background:transparent}}
.ref .rt{font-size:12.5px;font-weight:600;line-height:1.35}
.ref .rt a{color:var(--ink);text-decoration:none}
.ref .rt a:hover{color:#0d47a1;text-decoration:underline}
.ref .ra{font-size:11px;color:var(--ink-soft);margin-top:2px;line-height:1.4}
.ref .rtype{font-size:10.5px;color:var(--ink-faint);margin-top:2px}
.ref .rnote{font-size:11.5px;color:var(--ink);margin-top:4px;line-height:1.45}
.fnd{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.fnd span{font-size:10.5px;padding:2px 7px;border-radius:9px;cursor:pointer;line-height:1.4}
.fnd span b{font-weight:700}
.eff-increased{background:#e3ecf7;color:#1d5f9a}
.eff-preserved{background:#e3f1e4;color:#2e7d32}
.eff-reduced{background:#fff2d6;color:#9a6a00}
.eff-vulnerable{background:#fde6e6;color:#b23b3b}

/* ---- floating energy / neuron bar: top middle of the canvas (the canvas is position:relative) ---- */
.energybar{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:21;background:#fffe;border:1px solid var(--line);border-radius:8px;padding:10px 14px;box-shadow:0 4px 20px rgba(0,0,0,.12);min-width:460px}
.eb-row{display:flex;align-items:center;gap:12px}
.eb-slider{flex:1;display:flex;flex-direction:column;font-size:11px;color:var(--ink-soft);min-width:180px}
.eb-slider input{margin:3px 0 0}
.eb-ends{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-faint)}
.eb-ends i{font-style:normal}
#ebVal{min-width:70px;font-size:12.5px;text-align:center}
.eb-legend{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:10.5px;color:var(--ink-soft);position:relative}
.eb-legend .ramp{flex:1;height:8px;border-radius:4px;background:linear-gradient(90deg,#2b3445,#3f5d85,#4f9ab0,#9fd08a,#ffd35a)}
.eb-legend .lo,.eb-legend .hi{font-size:10px;color:var(--ink-faint)}
.nbar{min-width:560px;max-width:calc(100% - 90px)}

/* admin extras */
.colrow{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:12px}
.colrow input[type=color]{width:38px;height:22px;flex:0 0 38px;padding:1px}
.colrow .nm{flex:1}
.colrow.l1 .nm{padding-left:10px}.colrow.l2 .nm{padding-left:20px}.colrow.l3 .nm{padding-left:30px}
.colrow .rst{font-size:10px}
.admgroup{margin:16px 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.admgroup:first-child{margin-top:0}

@media (max-width:1100px){
  .infopanel{flex-basis:290px;width:290px}
  .bio{flex-basis:250px;width:250px}
}
@media (max-width:760px){
  .infopanel{width:100%;flex:0 0 auto;max-height:50vh;border-left:none;border-top:1px solid var(--line)}
  .energybar{min-width:0;width:calc(100% - 70px);left:10px;transform:none;top:10px}
  .eb-row{flex-wrap:wrap}
}

.sup{font-weight:700}
.sup-yes{color:#2e7d32}.sup-no{color:#b23b3b}.sup-mixed{color:#9a6a00}
.energybar .btn{white-space:nowrap}

/* ---- left panel tabs ---- */
.lefttabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 10px}
.lefttabs button{appearance:none;border:none;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-soft);padding:7px 12px;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.lefttabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.tnode.fnroot .nm{font-weight:700}
#ltFunctions .note{margin:0 0 8px}
.nbspeed,.toxspeed{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-soft);white-space:nowrap}
.nbspeed input{width:110px}
.nbspeed b,.toxspeed b{font-size:11px;color:var(--ink);min-width:44px;font-variant-numeric:tabular-nums}

/* ---- toxicity tab ---- */
.toxmode #stage,.toxmode #fx,.toxmode #fxc,.toxmode .toolbar,.toxmode .orient{display:none}
.toxview{position:absolute;inset:12px 0 0 0;display:flex;flex-direction:column;padding:0 16px 12px;gap:8px}
.toxtabs{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.toxtabs button{appearance:none;font:inherit;font-size:12px;font-weight:600;padding:5px 12px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer}
.toxtabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.toxstage{position:relative;flex:1;min-height:0}
.toxstage canvas{position:absolute;inset:0;width:100%;height:100%}
.toxcap{position:absolute;left:12px;top:10px;max-width:46%;background:#fffffff0;border:1px solid var(--line);border-radius:6px;padding:8px 11px;font-size:12px;line-height:1.45;box-shadow:0 2px 10px rgba(0,0,0,.06);pointer-events:none}
.toxcap b{display:block;font-size:13px;margin-bottom:2px}
.toxread{position:absolute;right:12px;bottom:10px;background:#fffffff0;border:1px solid var(--line);border-radius:6px;padding:7px 11px;font-size:11.5px;min-width:190px;pointer-events:none}
.toxread div{display:flex;justify-content:space-between;gap:14px;line-height:1.7;color:var(--ink-soft)}
.toxread b{color:var(--ink);font-variant-numeric:tabular-nums}
.toxplayer{display:flex;align-items:center;gap:10px}
.toxplayer #toxScrub{flex:1}
.toxspeed input{width:100px}
.toxsteps{margin:0;padding-left:20px;font-size:12.5px;line-height:1.5}
.toxsteps li{cursor:pointer;padding:2px 4px;border-radius:3px;color:var(--ink-soft)}
.toxsteps li:hover{background:var(--extra)}
.toxsteps li.on{color:var(--ink);font-weight:700;background:var(--blue-soft)}
.ref.cur{background:#fff8e1;border-radius:4px;padding-left:6px;padding-right:6px}
.nbar .eb-row{flex-wrap:wrap}
.nbar #nbCount{flex-basis:100%}

.selhead{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;font-weight:700;color:var(--ink);margin:2px 0 6px}
.tnode .rm{color:var(--ink-faint);font-size:15px;line-height:1;padding:0 4px;border-radius:3px}
.tnode .rm:hover{color:var(--bad);background:#fff}
.tnode .hits{font-size:10px;color:#1d5f9a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}

/* Config button */
.cfgbtn{position:absolute;right:14px;bottom:28px;z-index:22;appearance:none;border:1px solid var(--line);background:#fffd;border-radius:4px;cursor:pointer;font:inherit;font-size:11px;font-weight:600;color:var(--ink-soft);padding:4px 10px}
.cfgbtn:hover{color:var(--ink);border-color:var(--accent)}
.toxmode .cfgbtn{bottom:auto;top:12px}
.bm-embed .cfgbtn{display:none}
.plastbtn{margin-left:auto;border-color:#7cb342;color:#33691e;white-space:nowrap}
.plastbtn:hover{background:#f1f8e9}

#ebVal{font-size:12px}
#ebVal.lv-none{color:#2e7d32}#ebVal.lv-mild{color:#ef6c00}#ebVal.lv-moderate{color:#e53935}#ebVal.lv-severe{color:#b71c1c}
.eb-slider > span{font-size:11.5px;color:var(--ink-soft)}

/* book icon buttons (references) */
.bookbtn{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;line-height:0}
.bookbtn svg{display:block}

/* Toxicity: Play / timeline / Speed box at the top middle too (under the scene tabs), like the Start / Speed bars */
.toxtabs{order:0}
.toxplayer{order:1;align-self:center;width:min(760px,100% - 90px);background:#fffe;border:1px solid var(--line);border-radius:8px;padding:8px 12px;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.toxstage{order:2}
@media (max-width:760px){.toxplayer{width:100%;flex-wrap:wrap}}