/* application.css — visualization styles */

/* ── Shared node styles ── */

.tree-node-group,
.graph-node-group { cursor: pointer; }

.tree-node-shadow,
.graph-node-shadow { fill: rgba(0,0,0,0.15); }
html.dark .tree-node-shadow,
html.dark .graph-node-shadow { fill: rgba(0,0,0,0.3); }

.tree-node { stroke-width: 1.5; transition: stroke-width 0.15s; }
.graph-node {
  fill: var(--node-fill);
  stroke: var(--node-stroke);
  stroke-width: 1.8;
  transition: stroke-width 0.15s;
}

.tree-node-group:hover .tree-node,
.tree-node-group.highlighted .tree-node { stroke-width: 2.2; }
.graph-node-group:hover .graph-node { stroke-width: 2.5; }
.graph-node-group.touched .graph-node { stroke-width: 3; }

.tree-node-inner,
.graph-node-inner {
  fill: none;
  stroke-width: 0.6;
  opacity: 0.4;
}
.graph-node-inner { stroke: var(--node-stroke); }

/* ── Tree glow ── */

.tree-node-glow-group {
  opacity: 0;
  transition: opacity 0.15s;
}
.tree-node-group:hover .tree-node-glow-group,
.tree-node-group.highlighted .tree-node-glow-group { opacity: 1; }

/* ── Graph glow ── */

.graph-node-glow {
  fill: var(--node-glow);
  opacity: 0;
  transition: opacity 0.15s;
}
.graph-node-group:hover .graph-node-glow { opacity: 0.5; }
.graph-node-group.touched .graph-node-glow { opacity: 0.55; }

/* ── Shared edge styles ── */

.tree-edge,
.graph-edge {
  fill: none;
  transition: stroke-width 0.15s, opacity 0.15s, filter 0.15s;
}

.tree-edge {
  stroke: var(--edge-color);
  stroke-width: 1.6;
  opacity: var(--edge-opacity);
}
.tree-edge.highlighted {
  stroke: var(--path-color);
  stroke-width: 2.2;
  opacity: var(--edge-opacity-strong);
}

.graph-edge {
  stroke-width: 1.6;
  opacity: var(--edge-opacity);
}
.graph-edge-group.highlighted .graph-edge,
.graph-edge-group.linked .graph-edge {
  stroke-width: 2.5;
  opacity: var(--edge-opacity-strong);
}
.graph-edge-group.linked .graph-edge { stroke-width: 3.5; }
.graph-edge-group.focused .graph-edge {
  animation: pulse-edge 0.8s ease-in-out infinite;
  filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 7px currentColor);
}

/* ── Arrows ── */
/* Polygon natural shape (in renderGraph): tip at local (0,0), base 8 units
   back at half-width 1.6. scaleY widens the base perpendicular to the line.
   Constant of proportionality K=2 (base = 2 × line stroke-width) is held
   across all states by matching each line stroke-width to its scaleY:
     default (1.6) → 1     highlighted (2.5) → 1.5625
     linked  (3.5) → 2.1875   focused-peak (5) → 3.125
   transform-origin 100% 50% with fill-box anchors scale to the tip. */

.graph-arrow {
  opacity: var(--edge-opacity);
  transition: opacity 0.15s, transform 0.15s;
  transform-box: fill-box;
  transform-origin: 100% 50%;
}
.graph-edge-group.highlighted .graph-arrow,
.graph-edge-group.linked .graph-arrow { opacity: var(--edge-opacity-strong); }
.graph-edge-group.highlighted .graph-arrow { transform: scaleY(1.5625); }
.graph-edge-group.linked .graph-arrow { transform: scaleY(2.1875); }
.graph-edge-group.focused .graph-arrow {
  animation: pulse-arrow 0.8s ease-in-out infinite;
}

/* ── Labels ── */

.tree-node-label,
.graph-edge-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  pointer-events: none;
}

.tree-node-label {
  font-size: 8px;
  fill: var(--text);
  text-anchor: middle;
  dominant-baseline: central;
}

.graph-edge-label {
  font-size: 9px;
  font-style: italic;
  opacity: 0.9;
  text-anchor: middle;
  dominant-baseline: central;
}
.graph-edge-group.highlighted .graph-edge-label,
.graph-edge-group.linked .graph-edge-label { opacity: 1; }

/* ── Depth rails (tree) ── */

.depth-rails { pointer-events: none; }
.depth-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  fill: var(--muted);
}
.depth-line {
  stroke: var(--muted);
  stroke-width: 0.5;
  stroke-dasharray: 2 5;
  opacity: var(--rail-opacity);
}

/* ── Pulse animations ── */

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes pulse-edge {
  0%, 100% { stroke-width: 3.5; }
  50%      { stroke-width: 5; }
}
@keyframes pulse-arrow {
  0%, 100% { transform: scaleY(2.1875); }
  50%      { transform: scaleY(3.125); }
}
.tree-node-group:hover .tree-node,
.graph-node-group:hover .graph-node {
  animation: pulse 0.8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}