/* ==========================================================================
   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);
}
/* Dark ink-paper ONLY outside light theme. These vars must NOT sit on
   .brain-page unconditionally: CSS custom properties resolve by tree
   proximity, so a dialog inside body inherits the closest scope — a dark
   --paper here forced the "dark dialog in light mode" bug. */
html:not([data-theme="light"]) .brain-page {
  --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 (CEO order 2026-10-02): ONE view strip on top —
   the analytic lens; camera orientation lives in the Display pane ---- */
#viewTabs {
  position: fixed;
  top: 58px; left: 50%; transform: translateX(-50%);
  z-index: 25;
  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 12px/1 "Barlow", system-ui, sans-serif;
  letter-spacing: .4px; text-transform: uppercase;
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
}
#viewTabs button:hover { color: var(--text); background: rgba(255,255,255,0.06); }
#viewTabs button.active { color: #fff; background: rgba(45, 93, 168, 0.35); }

/* LEFT pane — Structure */
#panel { top: 104px; }
.pane-title {
  margin: 0 0 2px;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}

/* RIGHT pane — Display: a proper column, not a floating cluster */
#controls {
  position: fixed;
  top: 104px; right: 14px; bottom: 14px;
  width: 264px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 14px;
  padding: 12px;
  backdrop-filter: blur(14px);
  z-index: 20;
  overflow-y: auto;
}
#controls .ctl { flex-direction: column; align-items: stretch; gap: 6px; }
#controls .ctl label { margin: 0; }
.seg.wrap { flex-wrap: wrap; gap: 3px; }
.seg.wrap button { flex: 1 1 28%; }
#views { display: flex; gap: 2px; flex-wrap: wrap; }
#views button {
  flex: 1 1 30%;
  background: rgba(255,255,255,0.04); border: 1px solid transparent; color: var(--text-dim);
  font: inherit; font-size: 12px; padding: 5px 6px; border-radius: 7px; cursor: pointer;
}
#views button:hover { color: var(--text); background: rgba(255,255,255,0.08); }
#modes button[disabled] { opacity: .45; cursor: not-allowed; }
#modes.pinned::after {
  content: "set by view";
  font: 400 10px/1 var(--mono);
  color: var(--text-dim);
  margin-left: 6px;
}

/* 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 (CEO order 2026-10-02): the brain becomes a banner —
   canvas on top, scaled to fit with air at the top, and EVERY control flows
   below it. The page scrolls; nothing floats over the model. ---- */
.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) {
  body.brain-page {
    overflow-y: auto;          /* atlas.css pins the body — the flow needs a page */
    overflow-x: hidden;
    height: auto;
    min-height: 100svh;
  }
  /* canvas banner: sits under the translucent header, air reserved above */
  #stage {
    position: relative; inset: auto;
    height: 52svh; min-height: 300px;
    padding-top: 44px;         /* the header's air */
    box-sizing: border-box;
  }
  #labels, #vignette {
    position: absolute; inset: auto; top: 0;
    width: 100%; height: 52svh; min-height: 300px;
  }
  /* the chrome flows beneath, full-width, in reading order */
  #panel {
    position: static;
    inset: auto; bottom: auto;
    width: auto; max-width: none; max-height: none;
    margin: 12px 10px 0;
    transform: none; transition: none;
  }
  .brain-page #panel .tree { max-height: 46vh; }
  #controls {
    position: static;
    inset: auto;
    width: auto; max-width: none;
    margin: 12px 10px 24px;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px;
    display: flex;
  }
  #controls:not(.open) { display: flex; }   /* everything is visible below — no guests */
  #controls .ctl { flex-direction: row; align-items: center; gap: 8px; }
  .chrome-toggle { display: none; }         /* no toggles when nothing floats */
  #hint { display: none; }
  #viewTabs { position: static; transform: none; margin: 10px auto 0; width: fit-content; max-width: calc(100vw - 16px); flex-wrap: wrap; justify-content: center; }
  #controls .ctl { flex-direction: column; align-items: stretch; }  /* keep stacked inside the flowing pane */
  .brain-page .site-nav { display: none; }  /* nav-toggle menu takes over */
  #info { position: fixed; }                /* region card still pops over */
}
@media (max-width: 480px) {
  #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 #viewTabs { 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 — now THE single top strip (rules at the
   top of this file; the old duplicate strip block was removed 2026-10-02) ---- */

#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; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME · LIGHT — "the anatomy plate" (CEO directive 2026-10-02: no inversion)
   Dark is the instrument at night; light is the printed plate: warm paper,
   ink rules, the cortex as the colored object ON paper. Every value below is
   decided, none defaulted. Palette: paper #ECE9E2 · ink #1D1D1B · soft
   #57574F · rule rgba(29,29,27,.12) · plate-blue #2D5DA8 (brand stim-blue).
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --bg: #ECE9E2;
  --panel: rgba(250, 249, 246, 0.92);
  --panel-line: rgba(29, 29, 27, 0.12);
  --text: #1D1D1B;
  --text-dim: #57574F;
  --accent: #2D5DA8;
  --paper: #ECE9E2;   /* nn-chrome brand vars — light must own them */
  --ink: #1D1D1B;
}

/* — the plate stage — */
html[data-theme="light"] body.brain-page {
  background:
    radial-gradient(110% 85% at 50% 40%, #F2EFE8 0%, #ECE9E2 58%, #E3DFD6 100%);
}
html[data-theme="light"] #vignette {
  background: radial-gradient(120% 90% at 50% 42%, transparent 58%, rgba(29, 29, 27, 0.10) 100%);
}
html[data-theme="light"] .brain-page .site-head {
  background: linear-gradient(rgba(240, 237, 230, 0.94), rgba(240, 237, 230, 0));
}
html[data-theme="light"] .brain-page .site-nav a { color: #57574F; }
html[data-theme="light"] .brain-page .site-nav a:hover { color: #1D1D1B; }

/* — glass becomes paper card — */
html[data-theme="light"] #viewTabs,
html[data-theme="light"] #panel,
html[data-theme="light"] #controls {
  background: var(--panel);
  border-color: var(--panel-line);
  box-shadow: 0 18px 44px -24px rgba(29, 29, 27, 0.28);
  backdrop-filter: blur(10px);
}
html[data-theme="light"] #viewTabs button { color: #57574F; }
html[data-theme="light"] #viewTabs button:hover { color: #1D1D1B; background: rgba(29, 29, 27, 0.05); }
html[data-theme="light"] #viewTabs button.active {
  color: #1D1D1B; background: rgba(45, 93, 168, 0.15);
}
html[data-theme="light"] .pane-title { color: #2D5DA8; }

/* — controls: segments + pickers — */
html[data-theme="light"] .modes { background: rgba(29, 29, 27, 0.06); }
html[data-theme="light"] .modes button { color: #57574F; }
html[data-theme="light"] .modes button.active { color: #1D1D1B; background: rgba(45, 93, 168, 0.16); }
html[data-theme="light"] .modes button[data-mode="regions"].active { background: rgba(35, 122, 70, 0.16); }
html[data-theme="light"] .modes button[data-mode="ghost"].active { background: rgba(196, 124, 22, 0.16); }
html[data-theme="light"] .modes.pinned::after { color: #8b8b83; }
html[data-theme="light"] .seg { background: rgba(29, 29, 27, 0.06); }
html[data-theme="light"] .seg button { color: #57574F; }
html[data-theme="light"] .seg button.active { color: #1D1D1B; background: rgba(45, 93, 168, 0.16); }
html[data-theme="light"] #views button { background: rgba(29, 29, 27, 0.04); color: #57574F; }
html[data-theme="light"] #views button:hover { color: #1D1D1B; background: rgba(29, 29, 27, 0.08); }
html[data-theme="light"] #views button.active {
  color: #1D1D1B; background: rgba(45, 93, 168, 0.22); border-color: rgba(45, 93, 168, 0.45);
}
html[data-theme="light"] .toggle { background: rgba(29, 29, 27, 0.06); color: #57574F; }
html[data-theme="light"] input[type="range"] { accent-color: #2D5DA8; }

/* — structure pane — */
html[data-theme="light"] #search {
  background: #FFFFFF; border-color: rgba(29, 29, 27, 0.18); color: #1D1D1B;
}
html[data-theme="light"] #search:focus { border-color: rgba(45, 93, 168, 0.55); }
html[data-theme="light"] #search::placeholder { color: #8b8b83; }
html[data-theme="light"] .results { background: #FFFFFF; border-color: rgba(29, 29, 27, 0.14); box-shadow: 0 14px 34px -18px rgba(29, 29, 27, 0.3); }
html[data-theme="light"] .results .hit { border-bottom-color: rgba(29, 29, 27, 0.06); }
html[data-theme="light"] .results .hit:hover { background: rgba(45, 93, 168, 0.08); }
html[data-theme="light"] .tree summary:hover { background: rgba(29, 29, 27, 0.05); color: #1D1D1B; }
html[data-theme="light"] .tree .item:hover { background: rgba(29, 29, 27, 0.06); }
html[data-theme="light"] .tree .item.selected { background: rgba(45, 93, 168, 0.16); }
html[data-theme="light"] .count { background: rgba(29, 29, 27, 0.05); }
html[data-theme="light"] .legend .chip-row { color: #1D1D1B; }
html[data-theme="light"] .plateLbl { color: #2D5DA8; }
html[data-theme="light"] #pathwayPicker .chips button {
  background: rgba(29, 29, 27, 0.04); border-color: rgba(29, 29, 27, 0.14); color: #57574F;
}
html[data-theme="light"] #pathwayPicker .chips button:hover { color: #1D1D1B; }
html[data-theme="light"] #pathwayPicker .chips button.active {
  background: rgba(45, 93, 168, 0.16); border-color: rgba(45, 93, 168, 0.4); color: #1D1D1B;
}

/* — cards that pop over the plate — */
html[data-theme="light"] #info {
  background: rgba(250, 249, 246, 0.97);
  border-color: var(--panel-line);
  box-shadow: 0 20px 50px -22px rgba(29, 29, 27, 0.35);
}
html[data-theme="light"] #info p { color: #3f3f39; }
html[data-theme="light"] #infoClose { color: #57574F; }
html[data-theme="light"] #infoClose:hover { color: #1D1D1B; }
html[data-theme="light"] .chip { background: rgba(29, 29, 27, 0.06); }
html[data-theme="light"] #infoFly { background: rgba(45, 93, 168, 0.12); color: #2D5DA8; }
html[data-theme="light"] #infoFly:hover { background: rgba(45, 93, 168, 0.2); }
html[data-theme="light"] #tooltip {
  background: rgba(250, 249, 246, 0.97); border-color: rgba(29, 29, 27, 0.15); color: #1D1D1B;
  box-shadow: 0 10px 26px -14px rgba(29, 29, 27, 0.35);
}
html[data-theme="light"] #hint { color: #8b8b83; }
html[data-theme="light"] #hint::after { color: #9a9a90; }

/* — labels become print: colored ink with a paper halo — */
html[data-theme="light"] .lbl {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95), 0 0 7px rgba(255, 255, 255, 0.8);
  filter: brightness(0.72) saturate(1.15) contrast(1.06);
}
html[data-theme="light"] .lbl::before { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85); }
html[data-theme="light"] .lbl.sel { color: #1D1D1B; }

/* — misc — */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(29, 29, 27, 0.18); }
html[data-theme="light"] .atlas-cite { color: #57574F; }
html[data-theme="light"] #loading .spin { border-color: rgba(45, 93, 168, 0.2); }