/* phylogenetic tree (Newick) editor. Two elements share each node's data-path: a node dot
   (a <circle>) and its name <text> (a leaf name on the right, or a small internal-node label).
   Both are .nwk-node pick targets, so a click on either selects the node. */

/* branches — right-angle connector lines */
.dia-newick .flow-canvas .nwk-branch { stroke: #64748b; stroke-width: 1.6px; fill: none; }

/* node dots */
.dia-newick .flow-canvas .nwk-dot { fill: #334155; stroke: #ffffff; stroke-width: 1px; }

/* labels */
.dia-newick .flow-canvas .nwk-leaf-label { font: 13px ui-sans-serif, system-ui, sans-serif; fill: #1a2233; }
.dia-newick .flow-canvas .nwk-internal-label { font: 11px ui-sans-serif, system-ui, sans-serif; fill: #64748b; }
.dia-newick .flow-canvas .nwk-len { font: 10px ui-monospace, monospace; fill: #94a3b8; pointer-events: none; }

/* selection / hover relay:
   the dot is a filled circle — an accent stroke around it reads as the pick outline, and we
   also accent its fill. A label is a glyph, so a stroke would look broken — accent-fill it
   instead (the pie / freeform text pattern). */
.dia-newick .flow-canvas circle.nwk-dot.dia-pick-hover { stroke: rgba(59, 110, 246, 0.6) !important; stroke-width: 2.5px !important; }
.dia-newick .flow-canvas circle.nwk-dot.dia-pick-sel { stroke: var(--accent, #3b6ef6) !important; stroke-width: 3px !important; fill: var(--accent, #3b6ef6) !important; }

.dia-newick .flow-canvas text.nwk-node.dia-pick-hover { stroke: none !important; fill: var(--accent, #3b6ef6) !important; }
.dia-newick .flow-canvas text.nwk-node.dia-pick-sel { stroke: none !important; fill: var(--accent, #3b6ef6) !important; font-weight: 600; }