/* graph / network editor (Graphviz) — the whole g.node / g.edge is the click/hover target, but a
   <g> paints no stroke, so relay the hover/selection outline onto the inner shape (polygon/ellipse/
   path). Node labels are a <text>; give a selected node's label the accent fill so it reads clearly. */

/* nodes: outline the shape (box/diamond = polygon, circle/ellipse = ellipse; plaintext has none) */
.dia-graph .flow-canvas g.node.dia-pick-hover > polygon,
.dia-graph .flow-canvas g.node.dia-pick-hover > ellipse,
.dia-graph .flow-canvas g.node.dia-pick-hover > path {
  stroke: rgba(59, 110, 246, 0.55) !important;
  stroke-width: 2px !important;
}
.dia-graph .flow-canvas g.node.dia-pick-sel > polygon,
.dia-graph .flow-canvas g.node.dia-pick-sel > ellipse,
.dia-graph .flow-canvas g.node.dia-pick-sel > path {
  stroke: var(--accent, #3b6ef6) !important;
  stroke-width: 3px !important;
}
.dia-graph .flow-canvas g.node.dia-pick-sel > text { fill: var(--accent, #3b6ef6) !important; }

/* edges: the visible line is a <path>; the arrowhead is a <polygon>. Colour both. */
.dia-graph .flow-canvas g.edge.dia-pick-hover > path {
  stroke: rgba(59, 110, 246, 0.55) !important;
  stroke-width: 2px !important;
}
.dia-graph .flow-canvas g.edge.dia-pick-sel > path {
  stroke: var(--accent, #3b6ef6) !important;
  stroke-width: 2.5px !important;
}
.dia-graph .flow-canvas g.edge.dia-pick-hover > polygon {
  stroke: rgba(59, 110, 246, 0.55) !important;
  fill: rgba(59, 110, 246, 0.55) !important;
}
.dia-graph .flow-canvas g.edge.dia-pick-sel > polygon {
  stroke: var(--accent, #3b6ef6) !important;
  fill: var(--accent, #3b6ef6) !important;
}
.dia-graph .flow-canvas g.edge.dia-pick-sel > text { fill: var(--accent, #3b6ef6) !important; }