/**
 * vp-svg-nodes.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Visual Pathway Simulator — SVG Anatomy Node Styles
 *
 * Scope    : Targets the interactive anatomical node circles and their labels
 *            inside #visual-pathway-diagram (the SVG anatomy diagram).
 *
 * Extracted from: visual_pathway.html inline <style> block (lines 180–226)
 * Reason for extraction: Enforce CSS/HTML separation per project architecture.
 *
 * States   :
 *   .node          → idle  (dark gradient, subtle shadow)
 *   .node:hover    → hover (blue gradient, glow, scale 1.35×)
 *   .node.active   → selected lesion (red gradient, larger glow, scale 1.45×)
 *
 * Dependencies: SVG filters #node-glow and #label-shadow defined in
 *               html-templates/visual-pathway/vp-anatomy-nodes.html <defs>.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Interactive node circle ─────────────────────────────────────────────── */
.node {
  fill: url(#node-grad-idle);
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 5;
  cursor: pointer;

  /* Smooth spring-like transition for all state changes */
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: center;
  transform-box: fill-box;

  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

/* ── Hover state: blue glow + scale up ───────────────────────────────────── */
.node:hover {
  fill: url(#node-grad-hover);
  stroke: #ffffff;
  stroke-width: 6;
  transform: scale(1.35);
  filter: url(#node-glow) drop-shadow(0 4px 12px rgba(59, 91, 219, 0.6));
}

/* ── Active state: red glow, indicates selected lesion site ──────────────── */
.node.active {
  fill: url(#node-grad-active);
  stroke: #ffffff;
  stroke-width: 7;
  transform: scale(1.45);
  filter: url(#node-glow) drop-shadow(0 4px 14px rgba(225, 29, 72, 0.7));
}

/* ── Node label — main text (bold, dark) ─────────────────────────────────── */
.node-label {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  fill: #0f172a;
  pointer-events: none; /* Labels don't intercept clicks */
  user-select: none;
}

/* ── Node label background pill (frosted white behind text) ──────────────── */
.node-label-bg {
  fill: rgba(255, 255, 255, 0.88);
  filter: url(#label-shadow);
  pointer-events: none;
}

/* ── Node sub-label — secondary text (lighter, smaller) ─────────────────── */
.node-label-sub {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 21px;
  font-weight: 500;
  fill: #64748b;
  pointer-events: none;
  user-select: none;
}