/* railroad editor — the vendored library renders each leaf as a <g> (the pick target) whose visible
   shape is an inner <rect> (term / nonterm) or a lone <text class="comment"> (comment). A <g> paints
   no stroke of its own, so relay the core's pick outline to the inner shape (mindmap pattern):
   accent the inner rect's stroke for term / nonterm, accent the text fill for a comment. */
.dia-railroad .flow-canvas g.dia-pick { cursor: pointer; }

/* term / nonterm — accent the box outline on hover / select */
.dia-railroad .flow-canvas g.dia-pick-hover > rect { stroke: var(--accent, #3b6ef6) !important; stroke-width: 3 !important; }
.dia-railroad .flow-canvas g.dia-pick-sel > rect { stroke: var(--accent, #3b6ef6) !important; stroke-width: 3.5 !important; fill: color-mix(in srgb, var(--accent, #3b6ef6) 14%, hsl(120,100%,90%)) !important; }

/* comment — no rect, so accent the text glyph fill instead */
.dia-railroad .flow-canvas g.dia-pick-hover > text,
.dia-railroad .flow-canvas g.dia-pick-sel > text { fill: var(--accent, #3b6ef6) !important; }

/* let the diagram breathe inside the canvas */
.dia-railroad .flow-canvas svg.railroad-diagram { max-width: 100%; height: auto; }