/*
 * graph.css — SVG node, link, and force-graph visual styles
 * Depends on: tokens.css
 */

/* ── Nodes ── */
.node              { cursor: pointer; }
.node circle       {
  stroke: var(--node-stroke);
  stroke-width: var(--node-stroke-w);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  transition: fill 0.3s, stroke 0.25s, stroke-width 0.2s, filter 0.25s;
}

/* Fill by type — CSS custom props auto-adapt to theme */
.node.type-root      circle { fill: var(--node-root); }
.node.type-reference circle { fill: var(--node-reference); }
.node.type-citation  circle { fill: var(--node-citation); }
.node.type-expanded  circle { fill: var(--node-expanded); }

/* Selected state overrides type fill */
.node.selected circle {
  fill: var(--node-selected);
  stroke: var(--accent);
  stroke-width: 4px;
  filter: drop-shadow(0 0 12px var(--accent));
}

.node.dimmed { opacity: 0.15; pointer-events: none; }

/* Inner label — year centred inside circle */
.node .label-inner {
  fill: var(--node-text);
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
  font-family: inherit;
}

/* Outer label — author name below circle */
.node .label-outer {
  fill: var(--text-2);
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
  font-family: inherit;
}

/* ── Links ── */
.link {
  stroke: var(--link-color);
  stroke-opacity: 0.6;
  fill: none;
  transition: stroke 0.2s, stroke-opacity 0.2s, stroke-width 0.2s;
}
.link.dimmed      { stroke-opacity: 0.06; }
.link.highlighted { stroke: var(--accent); stroke-opacity: 0.95; stroke-width: 2.5; }

/* Arrow markers — CSS-driven fill for auto theme switching */
#arrow path           { fill: var(--link-color); }
#arrow-highlight path { fill: var(--accent); }