/* ===== SVG canvas ===== */
svg#graph {
  width: 100%;
  height: 100%;
  display: block;
  background: radial-gradient(circle, #EDEFF1 1px, transparent 1px) 0 0 / 22px 22px;
  cursor: grab;
  touch-action: none;
}
svg#graph.grabbing { cursor: grabbing; }

/* ===== Nodes ===== */
.node { cursor: pointer; }
.node rect {
  fill: var(--node-fill);
  stroke: var(--node-border);
  stroke-width: 1.25px;
}
.node text {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 500;
  dominant-baseline: middle;
  text-anchor: middle;
  pointer-events: none;
}
.node .cat {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 400;
}
.node.selected rect  { stroke: var(--accent); stroke-width: 2px; }
.node.related  rect  { stroke: var(--accent); }
.node.dim            { opacity: .22; }

/* ===== Edges ===== */
.edge path {
  fill: none;
  stroke: #B9BEC6;
  stroke-width: 1.4px;
}
.edge.active path { stroke: var(--accent); stroke-width: 1.8px; }
.edge.dim         { opacity: .15; }

/* ===== Edge labels ===== */
.edge-label {
  font-size: 10px;
  fill: var(--muted);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.edge-label-bg { fill: var(--bg); }
.edge.active .edge-label { fill: var(--accent); }