/* =============================================================================
   Synapse — Interactive Brain Atlas page styles.
   Loaded in addition to site.css (reuses its design tokens). Page-specific.
   ========================================================================== */

.atlas-head { margin-bottom: 18px; }
.atlas-head h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: -.02em; }
.atlas-head p { color: var(--muted); max-width: 70ch; margin-top: 8px; }

/* segmented mode control */
.atlas-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 18px; }
.atlas-modes .seg { border: 0; background: transparent; color: var(--muted); font-weight: 600;
  font-size: .92rem; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: .15s; }
.atlas-modes .seg.active { background: var(--grad); color: #fff; }

/* stage: viewer + controls */
.atlas-stage { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
@media (max-width: 880px) { .atlas-stage { grid-template-columns: 1fr; } }

.viewer { position: relative; height: min(70vh, 620px); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: #0b1020; box-shadow: var(--shadow); }
#gl { width: 100%; height: 100%; display: block; }
.three-root { position: absolute; inset: 0; background: #0b1020; }
.three-root[hidden] { display: none; }
.three-root canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.viewer .status.status-tl { right: auto; left: 14px; }
@media (max-width: 880px) { .viewer { height: 64vh; } }

.viewer .readout { position: absolute; left: 14px; bottom: 14px; z-index: 3;
  display: flex; flex-direction: column; gap: 2px; max-width: calc(100% - 28px);
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 14px; }
.readout .readout-lab { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--cyan); }
.readout #region { font-weight: 600; color: var(--text); font-size: .98rem; line-height: 1.25; }

.viewer .status { position: absolute; right: 14px; top: 14px; z-index: 3; font-size: .82rem;
  color: var(--muted); background: rgba(255,255,255,.9); padding: 4px 10px; border-radius: 999px; }
.viewer .status:empty { display: none; }
.viewer .status.err { color: #b91c1c; }

/* control rail — a clean card with evenly-gridded options */
.controls { display: flex; flex-direction: column; gap: 0; align-self: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px 18px; box-shadow: 0 1px 2px rgba(28, 48, 118, .05); }
.ctl-group { padding: 16px 0; }
.ctl-group + .ctl-group { border-top: 1px solid var(--border); }
.ctl-group > .ctl-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--faint); margin-bottom: 10px; }
.ctl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); gap: 6px; }
.ctl { display: inline-flex; align-items: center; justify-content: center; text-align: center;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  font-size: .85rem; font-weight: 600; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  transition: .15s; -webkit-tap-highlight-color: transparent; user-select: none; }
.ctl:hover { border-color: var(--border-2); color: var(--text); background: var(--surface-3); }
.ctl.active { background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px -8px rgba(34, 211, 238, .5); }
.ctl.full { grid-column: 1 / -1; }
.ctl-slider { display: flex; align-items: center; gap: 10px; }
.ctl-slider input[type=range] { flex: 1; accent-color: var(--cyan); }
.ctl-check { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--text); font-weight: 600; cursor: pointer; }
.ctl-check input { accent-color: var(--cyan); width: 17px; height: 17px; }
.ctl-hint { font-size: .82rem; color: var(--faint); line-height: 1.5; margin: 0; }

/* per-mode control visibility:
   g-nv = NiiVue controls (MRI + 3D Model) · g-mri = slice views only · g-st = 3D Structures only */
.controls[data-mode="mri"]        .g-st { display: none; }
.controls[data-mode="model"]      .g-st,
.controls[data-mode="model"]      .g-mri { display: none; }
.controls[data-mode="structures"] .g-nv,
.controls[data-mode="structures"] .g-mri { display: none; }
/* g-ct = CT case selector — only in CT mode; CT keeps slice views but hides MNI overlays + structures */
.controls[data-mode="mri"]        .g-ct,
.controls[data-mode="model"]      .g-ct,
.controls[data-mode="structures"] .g-ct { display: none; }
.controls[data-mode="ct"] .g-nv,
.controls[data-mode="ct"] .g-st { display: none; }
/* …but CT keeps the clip-plane slicer (it's a g-nv group; re-show it for CT) */
.controls[data-mode="ct"] .g-clip { display: block; }
/* g-conn = connectome controls — only in the connectome mode */
.controls[data-mode="mri"]        .g-conn,
.controls[data-mode="model"]      .g-conn,
.controls[data-mode="ct"]         .g-conn,
.controls[data-mode="structures"] .g-conn { display: none; }
.controls[data-mode="connectome"] .g-nv,
.controls[data-mode="connectome"] .g-mri,
.controls[data-mode="connectome"] .g-ct,
.controls[data-mode="connectome"] .g-st { display: none; }
.conn-legend { display: flex; flex-direction: column; gap: 4px; }
.conn-net { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 6px 8px; border: 1px solid var(--border, #d7deea); border-radius: 8px;
  background: transparent; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--text, #1a2230); }
.conn-net:hover { background: rgba(127,127,127,.09); }
.conn-net.active { border-color: #6a7bff; background: rgba(106,123,255,.13); }
.conn-net i { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.conn-net span { margin-left: auto; color: var(--muted, #7a8699); font-weight: 500; }
.conn-matrix { width: 100%; max-width: 360px; border-radius: 8px; display: block; background: #0c1224; cursor: crosshair; }

/* credits / attribution */
.credits { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: .82rem; color: var(--faint); line-height: 1.6; }
.credits h3 { font-size: .9rem; color: var(--muted); margin-bottom: 6px; }
.credits a { color: var(--cyan); }

/* "what is this" description banner (also used by angio via .angio-desc) */
.atlas-desc { margin: -4px 0 16px; padding: 11px 15px; border: 1px solid var(--border);
  border-left: 3px solid var(--cyan); border-radius: 10px; background: var(--surface);
  color: var(--text); font-size: .9rem; line-height: 1.5; max-width: 96ch; }

/* searchable structure list (3D Structures mode) */
.st-search { width: 100%; padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px;
  font: inherit; font-size: .88rem; background: var(--surface-2); color: var(--text); }
.st-search:focus { outline: none; border-color: var(--cyan); }
.st-list { margin-top: 8px; max-height: 240px; overflow: auto; border: 1px solid var(--border); border-radius: 9px; }
.st-item { padding: 6px 11px; font-size: .82rem; color: var(--muted); cursor: pointer; border-bottom: 1px solid var(--border); }
.st-item:last-child { border-bottom: 0; }
.st-item:hover { background: var(--surface-3); color: var(--text); }
.st-item.sel { background: var(--grad); color: #fff; }
.st-empty { padding: 10px 11px; font-size: .82rem; color: var(--faint); }

/* ===== Spinal cord tract cross-section ================================= */
.cord-svg { width: 100%; max-width: 250px; display: block; margin: 6px auto 2px; }
.cord-tract { cursor: pointer; stroke: rgba(16,32,74,0); stroke-width: 2; transition: opacity .12s, stroke .12s; }
.cord-tract:hover { opacity: .82; }
.cord-tract.on { stroke: #10204a; stroke-width: 2.5; }
.cord-orient { font-size: 8px; fill: var(--faint); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.cord-readout { font-size: .8rem; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.cord-readout b { color: var(--text); }

/* CT case dropdown (matches the angio selects) */
.atlas-select { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: .88rem; font-weight: 600; font-family: inherit; cursor: pointer; }
.atlas-select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(8,145,178,.14); }