/* Discovery and topology pages (net-discovery-topo.js). Every class is ndt- prefixed. */
.ndt-bar { display: flex; align-items: center; gap: 10px; margin: -2px 0 8px; flex-wrap: wrap; }
.ndt-lnk { color: var(--accent); white-space: nowrap; }
.ndt-side { display: flex; flex-direction: column; gap: 8px; }
.ndt-side .card { margin: 0; }
.ndt-kv { grid-template-columns: 100px 1fr; }
.ndt-svg { width: 100%; height: auto; display: block; }
.ndt-e { stroke: var(--line2); stroke-linecap: round; }
.ndt-e.ok { stroke: color-mix(in srgb, var(--ok) 70%, var(--line2)); }
.ndt-e.warn { stroke: var(--warn); }
.ndt-e.crit { stroke: var(--crit); }
.ndt-e.dn { stroke-dasharray: 4 3; }
.ndt-e.dash { stroke: var(--muted); stroke-dasharray: 5 4; stroke-width: 1.3; }
.ndt-e.faint { stroke: var(--line2); stroke-width: 1; opacity: .7; }
.ndt-el { font-size: 9.5px; fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.ndt-el.crit { fill: var(--crit); font-weight: 650; }
.ndt-box { fill: var(--panel2); stroke: var(--line2); stroke-width: 1.2; }
.ndt-box.ok { stroke: var(--ok); } .ndt-box.warn { stroke: var(--warn); fill: var(--warn-bg); } .ndt-box.crit { stroke: var(--crit); fill: var(--crit-bg); }
.ndt-box.dst { stroke: var(--accent); stroke-dasharray: 3 2; }
.ndt-bl { font-size: 11px; font-weight: 600; fill: var(--text); text-anchor: middle; }
.ndt-sub { font-size: 9.5px; fill: var(--muted); text-anchor: middle; font-family: var(--mono, monospace); }
.ndt-ap { fill: var(--panel2); stroke: var(--ok); stroke-width: 1.5; }
.ndt-ap.warn { stroke: var(--warn); } .ndt-ap.crit { stroke: var(--crit); fill: var(--crit-bg); }
.ndt-apl { font-size: 9px; fill: var(--muted); text-anchor: middle; }
.ndt-n { cursor: pointer; }
.ndt-n:hover .ndt-box, .ndt-n:hover .ndt-ap { stroke: var(--accent); stroke-width: 2; }
.ndt-tier { font-size: 9.5px; fill: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.ndt-wan { fill: var(--panel); stroke: var(--accent); stroke-width: 1.2; }
.ndt-wan.dash { stroke: var(--muted); stroke-dasharray: 4 3; } .ndt-wan.crit { stroke: var(--crit); }
.ndt-vl { fill: var(--panel2); stroke: var(--line2); }
.ndt-vt { font-size: 10.5px; fill: var(--text); }
.ndt-leg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.ndt-leg div { display: flex; align-items: center; gap: 6px; }
.ndt-sw { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: var(--ok); }
.ndt-sw.warn { background: var(--warn); } .ndt-sw.crit { background: var(--crit); }
.ndt-sw.lag { height: 6px; background: none; border-top: 2px solid var(--muted); border-bottom: 2px solid var(--muted); border-radius: 0; }
.ndt-sq { display: inline-block; width: 10px; height: 10px; border-radius: 2px; border: 1.5px solid var(--ok); }
.ndt-sq.warn { border-color: var(--warn); } .ndt-sq.crit { border-color: var(--crit); background: var(--crit-bg); }
.ndt-note { padding: 6px 10px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); }
.ndt-btn { font: inherit; font-size: 11.5px; padding: 2px 9px; margin-left: 4px; border-radius: 4px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); cursor: pointer; line-height: 18px; }
.ndt-btn:hover { border-color: var(--accent); }
.ndt-btn.ok { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.ndt-btn:disabled { opacity: .7; cursor: default; }
.ndt-undo { font-size: 11px; color: var(--muted); margin-left: 4px; }
table.t tr.ndt-done td { opacity: .6; }

/* stage 1: traffic signals along links (docs/ui-ux-spec.md section 4) */
.ndt-pk { fill: var(--ok); opacity: .9; pointer-events: none; }
.ndt-pk.warn { fill: var(--warn); } .ndt-pk.crit { fill: var(--crit); }
@media (prefers-reduced-motion: reduce) { .ndt-pk { display: none; } }