/* =============================================================================
   Synapse — Cerebral Angiography page styles (loaded with site.css + atlas.css,
   reusing atlas.css's .viewer / .controls / .ctl / .readout / .credits).
   Three modes: 2D DSA cine · 3D Circle of Willis (three.js) · 3D MRA (NiiVue).
   ========================================================================== */
.angio-head { margin-bottom: 18px; }
.angio-head h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: -.02em; }
.angio-head p { color: var(--muted); max-width: 74ch; margin-top: 8px; }

/* "what is this" banner — updates per mode */
.angio-desc {
  margin: 0 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;
}

.angio-stage { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
@media (max-width: 880px) { .angio-stage { grid-template-columns: 1fr; } }

/* one landscape viewer shared by all three modes */
.angio-stage .viewer { height: min(70vh, 600px); }
#angio-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#angio-canvas:active { cursor: grabbing; }
#angio-canvas[hidden] { display: none; }
#mra-gl { width: 100%; height: 100%; display: block; }
#mra-gl[hidden] { display: none; }

/* the phase value reuses the atlas .readout chip */
.readout #angio-phase, .readout #cow-vessel { font-weight: 600; color: var(--text); font-size: .98rem; }
/* atlas.css sets .viewer .readout{display:flex}, which beats the [hidden] UA rule — restore it */
.viewer .readout[hidden] { display: none; }

.ctl-slider2 { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); font-weight: 600; }
.ctl-slider2 input[type=range] { accent-color: var(--cyan); width: 92px; }

/* per-mode control visibility */
.controls[data-mode="cine"] .g-cow, .controls[data-mode="cine"] .g-mra { display: none; }
.controls[data-mode="cow"]  .g-cine, .controls[data-mode="cow"] .g-mra { display: none; }
.controls[data-mode="mra"]  .g-cine, .controls[data-mode="mra"] .g-cow { display: none; }

/* Circle-of-Willis vessel legend */
.cow-legend { display: flex; flex-direction: column; gap: 5px; }
.cow-legend .row { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); font-weight: 600; cursor: pointer; }
.cow-legend .row:hover { color: var(--text); }
.cow-legend .sw { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset; }
.cow-legend .row.dim { opacity: .42; }

/* DSA run picker — searchable dropdown (32 real DIAS runs) */
.angio-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; }
.angio-select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(8,145,178,.14); }