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

.bio{flex-basis:320px;width:320px}
.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:#1d5f9a;color:#fff;font-weight:600}   /* the active row: solid blue, white text */
.tnode.sel:hover{background:#174f80}
.tnode.sel .nm,.tnode.grp.sel .nm{color:#fff}
.tnode.sel .cnt,.tnode.sel .hits,.tnode.sel .car,.tnode.sel .rm{color:#d6e4f3}
.tnode.sel .car.has:hover{color:#fff;background:rgba(255,255,255,.16);box-shadow:none}
.tnode.sel .sw{border-color:rgba(255,255,255,.85)}
.tnode.hl:not(.sel){background:#f6eef4}
.tnode .car{flex:0 0 22px;width:22px;height:22px;margin:-3px 0 -3px -3px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:11px;line-height:1;border-radius:4px;transition:transform .18s ease,background .15s,color .15s}
.tnode .car.has{cursor:pointer}
.tnode .car.open{transform:rotate(90deg)}                 /* one ▶ glyph, turned down when open */
.tnode .car.has:hover{color:var(--ink);background:#fff;box-shadow:0 0 0 1px var(--line)}
.tkids.anim{overflow:hidden;transition:height .18s ease,opacity .18s ease}   /* slide open / closed (js: runTreeAnim) */
.tkids.tghost{pointer-events:none}
@media (pointer:coarse){.tnode .car{flex-basis:30px;width:30px;height:30px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.tnode .car,.tkids.anim{transition:none}}
.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:#1d5f9a;background:#1d5f9a;color:#fff;font-weight:600}   /* same solid blue as the selected rows */
.sysbtn.on .sw{box-shadow:0 0 0 2px #fff}
.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 ---- */
/* pan / zoom: the .stagewrap DIVS get the CSS transform (one compositor layer each, no repaint);
   a transform on an <svg> element would make Chrome re-layout and re-rasterise it on every frame */
.stagewrap{position:absolute;inset:0;will-change:transform;transform-origin:0 0;contain:layout paint}
.stagewrap > svg{display:block;position:absolute;inset:0;width:100%;height:100%}
.stagewrap.under,.stagewrap.under > svg{pointer-events:none}   /* clicks go through to #stage */
#stage{cursor:grab}
#fxc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#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.lod-far .vs{display:none}   /* vesicles only when zoomed in enough to see them */
#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{display:flex;align-items:flex-start;gap:8px;margin:0 -18px 12px;padding:0 18px 10px;border-bottom:1px solid var(--line);font-size:11px}
.crumbs .cr{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.crumbs .sep{color:var(--ink-faint);padding:0 1px}
.crumb{display:inline-block;padding:2px 8px;border-radius:9px;border:1px solid #c9d6e6;background:#f2f6fb;color:#1d5f9a;font-weight:600;text-decoration:none;cursor:pointer;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb:hover{background:#e3ecf7;border-color:#1d5f9a}
.crumb.cur{background:#1d5f9a;border-color:#1d5f9a;color:#fff;cursor:default}
.crback{appearance:none;flex:0 0 auto;width:26px;height:22px;border:1px solid #c9d6e6;border-radius:6px;background:#fff;color:#1d5f9a;font-size:14px;line-height:1;cursor:pointer}
.crback:hover{background:#e3ecf7;border-color:#1d5f9a}
.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{display:flex;align-items:center;gap:7px;margin:20px -18px 10px;padding:7px 18px 6px;background:#f1f4f8;border-top:1px solid #dbe2ea;border-bottom:1px solid #e6ebf1;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#34475d}
.ip-sec::before{content:'';flex:0 0 3px;height:12px;border-radius:2px;background:#1d5f9a}   /* full-width band: one clear divider per section */
.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}
.basis.placeholder{background:#fde6e6;color:#b23b3b;border:1px dashed #b23b3b}
.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:285px;width:285px}
}
@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 8px;white-space:nowrap;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{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-soft);white-space:nowrap}
.nbspeed input{width:110px}
.nbspeed b{font-size:11px;color:var(--ink);min-width:44px;font-variant-numeric:tabular-nums}

.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:12px;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)}
.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}


/* ---- touch & tablet performance ---- */
#stage{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.bm-canvas .toolbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fffffff2}   /* a blur over the animated canvas is re-computed every frame */
.maintabs,.energybar{backdrop-filter:none;-webkit-backdrop-filter:none}

/* ---- sliders with a big, easy-to-grab handle (energy deficiency, speed, timeline) ---- */
.energybar input[type=range]{-webkit-appearance:none;appearance:none;height:30px;margin:2px 0 0;background:transparent;cursor:pointer;touch-action:none}
.energybar input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:#d3dae3}
.energybar input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:#d3dae3}
.energybar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.energybar input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.25)}
#ebDef::-webkit-slider-runnable-track{background:linear-gradient(90deg,#2e7d32,#fbc02d 40%,#ef6c00 70%,#b71c1c)}
#ebDef::-moz-range-track{background:linear-gradient(90deg,#2e7d32,#fbc02d 40%,#ef6c00 70%,#b71c1c)}
.nbspeed input{width:150px}
@media (pointer:coarse){
  .energybar input[type=range]{height:40px}
  .energybar input[type=range]::-webkit-slider-thumb{width:34px;height:34px;margin-top:-13px}
  .energybar input[type=range]::-moz-range-thumb{width:28px;height:28px}
  .energybar .btn{min-height:36px;padding:6px 12px}
  .bm-canvas .toolbar button{min-width:38px;height:38px}
}
@media (pointer:coarse){#lyNeurons *,.rg,.lbl{transition:none!important}}   /* thousands of animated strokes are slow on tablets */
/* low animation quality (Config → View, or Auto when frames get slow): no colour transitions either -
   every frame of a 0.25 s fade re-rasterises all the regions and neurons on a weak GPU */
.lowq #lyNeurons *,.lowq .rg,.lowq .lbl,.lowq #lyNeurons{transition:none!important}
.lowq .shade{display:none}
/* keep the top-middle bars clear of the zoom column on narrow canvases (tablets) */
.energybar{left:calc(50% - 30px);max-width:calc(100% - 96px);min-width:min(460px,calc(100% - 96px))}
.nbar{min-width:min(560px,calc(100% - 96px))}
@media (max-width:1240px){ .infopanel{flex-basis:290px;width:290px} .bio{flex-basis:290px;width:290px} }
@media (max-width:760px){ .energybar{left:10px;max-width:calc(100% - 70px)} }

/* ---- Neurotransmitters tab ---- */
#ltTransmitters > .note{margin:0 0 10px}
.ntlist{display:flex;flex-direction:column;gap:4px}
.ntlist .subhead{margin:12px 0 4px}
.ntlist .subhead:first-child{margin-top:0}
.ntbtn{--c:#56697f;appearance:none;display:flex;align-items:center;gap:9px;text-align:left;font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);cursor:pointer}
.ntbtn:hover{border-color:var(--c)}
.ntbtn.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff);box-shadow:inset 3px 0 0 var(--c)}
.ntsw{flex:0 0 36px;height:22px;border-radius:11px;background:var(--c);color:#fff;font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;letter-spacing:.02em}
.nttx{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.nttx b{font-size:12.5px;font-weight:650}
.nttx small{font-size:10.5px;color:var(--ink-soft)}
.ntlv{--c:#56697f;display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;width:18px;height:18px;border-radius:4px;font-size:10px;font-weight:800;color:#fff;background:var(--c);margin-right:6px}
.ntlv.lv-M{background:color-mix(in srgb,var(--c) 55%,#fff);color:#1b2430}
.ntlv.lv-L{background:color-mix(in srgb,var(--c) 28%,#fff);color:#1b2430}
.ntscope{font-size:12px;line-height:1.45;padding:7px 10px;border-radius:6px;margin:0 0 10px;background:var(--extra);color:var(--ink)}
.ntscope.sc-general{background:#e8f1fb}
.ntscope.sc-diffuse{background:#fdf1e3}
.ntscope.sc-local{background:#eef6ea}
.ntmade{margin-left:auto;font-size:10px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;border:1.5px solid #22303f;border-radius:3px;padding:0 4px}
.ntmore{margin:6px 0 0;font-size:12px}
.ntmore summary{cursor:pointer;color:var(--ink-soft);font-weight:600;padding:4px 0}
.ntlegend{margin:12px 0 4px;font-size:11px;line-height:1.9;color:var(--ink-soft)}
.ntlegend .ntlv{margin:0 3px 0 6px}
.ntlegend .ntlv:first-child{margin-left:0}
.chip.ntchip{display:inline-flex;align-items:center}
.chip.ntchip .ntlv{width:16px;height:16px;flex-basis:16px;margin-right:5px}

/* ---- Learn tab: article in the canvas area ---- */
.learnmode .stagewrap,.learnmode #fxc,.learnmode .toolbar,.learnmode .orient,.learnmode .cfgbtn{display:none}
.learnmode{background:#f3f5f8}
.learnview{position:absolute;inset:0;display:flex}
.lv-scroll{flex:1;min-width:0;overflow-y:auto;background:#fff}
.learnview .be-sec{padding:30px 34px 70px}
.learnview .be-sec h1{font-size:28px}
.learnview .be-sec .lede{font-size:17px}
.learnview .be-sec{font-size:15.5px}
/* left topic list */
.lnav{display:flex;flex-direction:column;gap:1px}
.lnav .lnhd{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 4px;padding:0 8px}
.lnav .lnhd:first-child{margin-top:2px}
.lnav a{display:block;padding:7px 10px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:13px;font-weight:600;border-left:3px solid transparent}
.lnav a:hover{background:var(--extra)}
.lnav a.on{background:#1d5f9a;color:#fff;border-left-color:#0d3b63}
/* book buttons after each point */
.refbtn{display:inline-flex;align-items:center;gap:3px;vertical-align:1px;margin:0 1px 0 3px;padding:1px 6px 1px 5px;border:1px solid #c9d6e6;border-radius:9px;background:#f2f6fb;color:#1d5f9a;font:600 10.5px/1.3 Inter,Arial,sans-serif;cursor:pointer;white-space:nowrap}
.refbtn:hover{background:#e3ecf7;border-color:#1d5f9a}
.refbtn.on{background:#1d5f9a;border-color:#1d5f9a;color:#fff}
.refbtn svg{display:block}
.refbtn.demo{cursor:default}
.lv-hl{background:#fff8e1!important;box-shadow:0 0 0 3px #fff8e1;border-radius:4px;transition:background .2s}
.lquote{margin:0 0 10px;padding:8px 12px;border-left:3px solid #1d5f9a;background:#f2f6fb;font-size:12.5px;line-height:1.5;color:var(--ink);border-radius:0 6px 6px 0}
ul.ev{padding-left:20px}
ul.ev li{margin:8px 0}
@media (pointer:coarse){.refbtn{padding:4px 9px;font-size:12px}}
.be-sec h3.cz{border-left:4px solid var(--c,#8e24aa);padding-left:10px;margin:24px 0 6px;font-size:17px}   /* Causes: one coloured heading per cause */

/* function evidence badge (right panel; functions.json "evidence") */
.fnev{font-size:11.5px;line-height:1.5;color:var(--ink-soft);margin:-4px 0 12px}
.fnev .basis{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:8px;margin-right:4px;vertical-align:1px}

/* Configure panel: starts 1 px under the top bar instead of covering it (--top-h = the bar's height, set by js/app.js) */
#adminPanel{top:calc(var(--top-h,52px) + 1px);height:calc(100% - var(--top-h,52px) - 1px)}
@media (max-width:760px){#adminPanel{height:auto;max-height:min(70vh,calc(100% - var(--top-h,52px) - 1px))}}

/* projected nuclei (basal ganglia, substantia nigra, locus coeruleus): a faint dashed outline, filled and
   clickable only while in focus (selected, or part of the selected system / function / transmitter) */
.rg.ghost{fill-opacity:.07;stroke-width:1.3;stroke-dasharray:4 3;pointer-events:none}
.rg.ghost.focus{fill-opacity:.62;pointer-events:auto}
.nmode .rg.ghost{fill-opacity:.04}
.nmode .rg.ghost.focus{fill-opacity:calc(var(--region-alpha,.3) + .25)}
/* Config menu: reset button at the bottom of the left menu */
.panel .menu .cfgreset{margin-top:6px;color:var(--bad,#b23b3b);font-weight:600}
.panel .menu .cfgreset:hover{background:#fdecec}
.panel .menu .cfgreset.armed{background:#b23b3b;color:#fff}

/* right panel: "Functions it takes part in" tree + expand / collapse all buttons in the section header */
.ip-sec .grow{flex:1}
.secbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:22px;margin:-4px -4px -4px 0;padding:0;border:1px solid transparent;border-radius:4px;background:none;color:#34475d;cursor:pointer}
.secbtn:hover{background:#fff;border-color:#c9d3df;color:#1d5f9a}
.rftree{font-size:12.5px;margin:0 0 4px}
.rftree .tnode .nm{cursor:pointer}
.rftree .tnode .nm:hover{color:#1d5f9a}
@media (pointer:coarse){.secbtn{width:32px;height:30px}}

/* right-panel overview: reasons / protection lists with a publications button per point */
ul.ovlist{margin:0 0 8px;padding-left:18px;font-size:13px;line-height:1.55}
ul.ovlist li{margin:0 0 7px}
.ipTabs{margin:2px 0 12px}   /* Publications / Overview: same look as the left tabs (site.css styles .reftabs as pills for About) */
.refset{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#f2f6fb;border:1px solid #c9d6e6;border-radius:6px;padding:7px 10px;margin:0 0 10px;font-size:12px}

/* Config → Neurons: the device-speed box at the top */
.admbox{border:1px solid var(--line);border-radius:6px;background:#f7f9fb;padding:10px 12px 12px;margin:0 0 16px}
.admbox .admgroup{margin:0 0 8px}
.admbox .perfnote{margin:4px 0 10px;font-size:12px;line-height:1.45;font-weight:600;color:var(--ink)}
.rftree .tnode .nm{white-space:normal;line-height:1.3}   /* long function names wrap in the right panel instead of being cut */

/* book glyph used by every publications button */
.bk{font-family:"Segoe UI Symbol","Segoe UI Emoji","Noto Sans Symbols 2","Apple Symbols","Symbola",sans-serif;font-size:13px;line-height:1;display:inline-block;vertical-align:-1px}
.bk.big{font-size:18px}
.refbtn .bk{margin-right:1px}
/* tooltips (data-tip, js tipInit): white, bordered, panel-wide */
.tip{position:fixed;z-index:60;max-width:calc(100vw - 24px);background:#fff;color:var(--ink);border:1px solid #b9c6d6;border-radius:8px;box-shadow:0 6px 22px rgba(20,40,70,.16);padding:10px 13px;font-size:12.5px;line-height:1.5;pointer-events:none}
.tip[hidden]{display:none}
/* links that are buttons (no href): "More in Learn › Causes →" */
.linkbtn.more{font-size:12px;color:#1d5f9a;text-decoration:none}
.linkbtn.more:hover{text-decoration:underline;color:#174f80}
/* region / function: where it sits */
.inpath{font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.inpath a{color:var(--ink-soft);cursor:pointer;text-decoration:none}
.inpath a:hover{color:#1d5f9a;text-decoration:underline}

/* hover outline on the map (js: map.hover) */
#lyHover .hov{stroke:#1d8bff;stroke-linejoin:round;stroke-linecap:round;opacity:.9}

/* ================= phones (≤ 760 px, e.g. Pixel 412 × 915): the map takes the whole screen; the two side
   panels are slide-up sheets opened from the bar at the bottom, and a tap on the map opens Details ================= */
.sheet-head{display:none}
.mbar{display:none}
@media (max-width:760px){
  body.be > .bm-app{flex:1 1 auto;min-height:0;height:auto;flex-direction:row;position:relative}
  .bm-canvas{flex:1 1 auto;height:100%;min-height:0}
  .bio,.infopanel{position:absolute;left:0;right:0;bottom:50px;top:auto;width:100%;flex:none;height:min(62%,calc(100% - 56px));max-height:none;
    border:none;border-top:1px solid var(--line);border-radius:14px 14px 0 0;box-shadow:0 -8px 28px rgba(10,30,60,.22);
    transform:translateY(110%);transition:transform .25s ease;z-index:26;background:#fff}
  .bio.open,.infopanel.open{transform:none}
  @media (prefers-reduced-motion:reduce){.bio,.infopanel{transition:none}}
  .sheet-head{display:flex;align-items:center;justify-content:space-between;position:relative;flex:0 0 auto;padding:12px 14px 6px;font-size:13px;border-bottom:1px solid var(--line)}
  .sheet-head::before{content:'';position:absolute;left:50%;top:5px;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:#c9d3df}
  .sheet-head .xbtn{font-size:20px;line-height:1;padding:2px 8px}
  .mbar{display:flex;position:absolute;left:0;right:0;bottom:0;height:50px;z-index:27;background:#fff;border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(0,0,0,.08)}
  .mbar button{appearance:none;flex:1;border:none;background:none;font:inherit;font-size:11px;font-weight:650;color:var(--ink-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer}
  .mbar button .ico{font-size:17px;line-height:1.1}
  .mbar button.on{color:#1d5f9a;background:#e3ecf7}
  .cfgbtn,.orient{display:none}
  .bm-canvas .toolbar{top:8px;right:8px}
  .energybar,.nbar{left:8px;right:58px;width:auto;max-width:none;min-width:0;top:8px;padding:8px 10px;transform:none}
  .eb-row{gap:8px}
  .nbspeed input{width:90px}
  .nbar #nbCount{display:none}
  .ip-scroll,.bio-scroll{padding-bottom:16px}
  .crumbs{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .ip-sec{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .ip-scroll{padding:12px 14px 16px}
  .learnview .be-sec{padding:18px 16px 60px}
  .learnview .be-sec h1{font-size:23px}
  .tip{max-width:calc(100vw - 16px)}
}

/* Energy overview: Descriptions / Correlations toggles and the correlation badges */
.ovtabs{margin:8px 0 0}
.ovsub{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#1d5f9a;margin:12px 0 6px;padding-bottom:3px;border-bottom:1px dashed #c9d6e6}
.corrkey{margin:-4px 0 8px}
.ovintro{font-size:12.5px;line-height:1.5;color:var(--ink);margin:0 0 8px}
.ovtoggles{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:4px 0 2px;font-size:12px;color:var(--ink)}
.ovtoggles label{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-weight:600}
.ovtoggles input{accent-color:#1d5f9a;width:14px;height:14px;margin:0}
.corrkey{font-size:10.5px;color:var(--ink-soft)}
.corrs{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 2px}
.corr{appearance:none;font:inherit;font-size:10.5px;font-weight:600;line-height:1.3;padding:2px 8px 2px 6px;border-radius:9px;cursor:pointer;text-align:left;background:#fde6e6;color:#b23b3b;border:1px solid #f3c4c4}
.corr:hover{background:#f9d3d3;border-color:#d98a8a}
.corr .ck{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:#c0392b;border-radius:7px;padding:1px 5px;margin-right:5px;vertical-align:1px}
.corr::after{content:' \1F56E';font-family:"Segoe UI Symbol","Segoe UI Emoji","Noto Sans Symbols 2","Apple Symbols","Symbola",sans-serif;font-weight:400;opacity:.75}
ul.ovlist.nodesc li{margin:0 0 9px}