/* ==========================================================================
   nn-chrome.css — the Nanonetes customization layer over the atlas.
   Aditya's atlas engine (atlas.js) and its stylesheet (atlas.css) are kept
   VERBATIM; every nanonetes-specific decision lives here, loadable and
   reviewable as one file. Brand language: research-blue accent on the
   editorial dark paper (#17171B), Barlow + Spline Sans Mono, 1px ink
   borders, mono for figures and counts.
   ========================================================================== */

/* ---- token remap: the atlas stage keeps its immersive darkness, now in
   brand-paper values; the warm terracotta becomes research-blue ---- */
:root {
  --bg: #17171B;
  --panel: rgba(23, 23, 27, 0.88);
  --panel-line: rgba(236, 236, 232, 0.09);
  --text: #ECECE8;
  --text-dim: #9AA0A8;
  --accent: #8FAFDA;   /* research-blue (#2D5DA8), lifted for the dark stage */
  --accent-2: #7fb2d9;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
body {
  font-family: "Barlow", system-ui, "Segoe UI", Inter, Roboto, sans-serif;
  color-scheme: dark;
}
#views button.active {
  color: #fff;
  background: rgba(45, 93, 168, 0.30);
  border-color: rgba(143, 175, 218, 0.45);
}

/* ---- brand chrome over the stage ---- */
.brain-page {
  background: var(--bg);
  /* scope the brand's own variables so header/auth render in dark ink-paper */
  --paper: #17171B;
  --ink: #ECECE8;
}
.brain-page .site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  max-width: none;
  margin: 0;
  padding: 12px clamp(16px, 4vw, 28px);
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(rgba(23, 23, 27, 0.92), rgba(23, 23, 27, 0));
  z-index: 40;
  pointer-events: none;
}
.brain-page .site-head > * { pointer-events: auto; }
.brain-page .site-head .wordmark { font-size: 19px; }
.brain-page .site-nav { display: flex; gap: 16px; margin-left: auto; }
.brain-page .site-nav a { color: var(--text-dim); text-decoration: none; font-size: 14px; }
.brain-page .site-nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ---- atlas chrome re-flow: the view strip centers under the header ---- */
#views {
  position: fixed;
  top: 58px; left: 50%; transform: translateX(-50%);
  z-index: 25;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  padding: 3px;
  backdrop-filter: blur(14px);
}
#panel { top: 104px; }
#controls { top: 104px; }

/* the atlas's own citation line, kept honest and visible */
.atlas-cite {
  font-size: 11px; color: var(--text-dim); line-height: 1.5; padding: 4px 2px 0;
}
.atlas-cite em { font-style: italic; }
#hint::after {
  content: " · nomenclature: Mai, Majtanik & Paxinos (4th ed.)";
  color: #6a7076;
}

/* ---- small screens: panel + controls become guests, not residents ---- */
.chrome-toggle {
  position: fixed; z-index: 26;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 999px;
  color: var(--text); font: 600 12px/1 "Barlow", system-ui, sans-serif;
  padding: 8px 12px; cursor: pointer; backdrop-filter: blur(14px);
  display: none;
}
@media (max-width: 860px) {
  #panel {
    left: 10px; right: 10px; width: auto; max-width: 340px;
    top: 104px; bottom: auto; max-height: min(62vh, 520px);
    transform: translateX(-120%); transition: transform .22s ease;
  }
  #panel.open { transform: none; }
  #controls {
    top: auto; bottom: 54px; right: 10px;
    width: auto; max-width: calc(100vw - 20px);
    flex-direction: row; flex-wrap: wrap; align-items: center;
  }
  #controls .ctl { flex-direction: row; align-items: center; gap: 8px; }
  .chrome-toggle { display: block; }
  #toggle-index { bottom: 54px; left: 10px; }
  #toggle-controls { bottom: 54px; right: 10px; }
  #controls:not(.open) { display: none; }
  #hint { display: none; }
  #views { top: 56px; }
  .brain-page .site-nav { display: none; }  /* nav-toggle menu takes over */
}
@media (max-width: 480px) {
  #views { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 16px); border-radius: 14px; }
  #info { left: 10px; right: 10px; max-width: none; }
}

/* ---- embed mode: mounted inside the homepage hero — the parent page's
   brand header serves; ours steps aside ---- */
.brain-page.embed .site-head { display: none; }
.brain-page.embed #views { top: 14px; }
.brain-page.embed #panel { top: 60px; }
.brain-page.embed #controls { top: 60px; }
@media (max-width: 860px) {
  .brain-page.embed #views { top: 12px; }
}

/* ---- WS2: the six analytic views ---- */
#viewTabs {
  position: fixed;
  top: 96px; left: 50%; transform: translateX(-50%);
  z-index: 24;
  display: flex; gap: 3px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  padding: 3px;
  backdrop-filter: blur(14px);
}
#viewTabs button {
  background: transparent; border: 0; color: var(--text-dim);
  font: 600 11.5px/1 "Barlow", system-ui, sans-serif;
  letter-spacing: .4px; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
}
#viewTabs button:hover { color: var(--text); }
#viewTabs button.active { color: #fff; background: rgba(45, 93, 168, 0.35); }
@media (max-width: 860px) {
  #viewTabs { top: 100px; max-width: calc(100vw - 16px); flex-wrap: wrap; justify-content: center; border-radius: 14px; }
}

#plateStep { display: flex; flex-direction: column; gap: 6px; }
#plateStep label { font-size: 11px; color: var(--text-dim); letter-spacing: .6px; text-transform: uppercase; }
#plateStep .plateLbl { font: 500 11px/1.4 var(--mono); color: var(--accent); }

#pathwayPicker { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
#pathwayPicker .picker-label { font-size: 11px; color: var(--text-dim); letter-spacing: .6px; text-transform: uppercase; margin: 0; }
#pathwayPicker .chips { display: flex; flex-wrap: wrap; gap: 5px; }
#pathwayPicker .chips button {
  background: rgba(255,255,255,0.04); border: 1px solid var(--panel-line); color: var(--text-dim);
  font: 500 11.5px/1 "Barlow", system-ui, sans-serif; padding: 6px 10px; border-radius: 999px; cursor: pointer;
}
#pathwayPicker .chips button:hover { color: var(--text); }
#pathwayPicker .chips button.active { color: #fff; border-color: var(--accent); background: rgba(45,93,168,.3); }

.lbl.plate { font-weight: 700; text-shadow: 0 0 6px rgba(0,0,0,.9); }

#clinicCard {
  position: fixed; right: 14px; top: 104px; z-index: 22;
  width: 320px; max-width: calc(100vw - 28px);
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px;
  padding: 16px; backdrop-filter: blur(14px);
}
#clinicCard h2 { margin: 6px 0 4px; font-size: 17px; }
#clinicCard .clinic-fn { color: var(--text-dim); font-size: 12.5px; line-height: 1.55; margin: 0 0 12px; }
#clinicCard .clinic-block { margin: 0 0 12px; }
#clinicCard .clinic-block label { display: block; font-size: 10.5px; color: var(--accent); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 6px; }
#clinicCard #clinicInstruments { display: flex; flex-direction: column; gap: 4px; }
#clinicCard #clinicInstruments a { color: var(--text); text-decoration: none; border-left: 2px solid var(--accent); padding-left: 8px; font-size: 13px; }
#clinicCard #clinicInstruments a:hover { color: var(--accent); }
#clinicCard #clinicInstruments .none { color: var(--text-dim); font-size: 12px; }
#clinicCard #clinicLesion { margin: 0; font-size: 12.5px; color: var(--text); line-height: 1.5; }
#clinicCard .clinic-note { margin: 8px 0 0; font-size: 10.5px; color: #6a7076; line-height: 1.45; }
#clinicClose { position: absolute; top: 10px; right: 10px; background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: 13px; }
@media (max-width: 860px) {
  #clinicCard { right: 10px; left: 10px; width: auto; top: 96px; }
}