Fix topology diagram: replace SVG fork with CSS, fix line alignment

- Remove SVG fork with preserveAspectRatio="none" (caused line width
  distortion and stretched 10G DAC label like a tube TV)
- Replace with pure CSS .topo-fork: stem + horizontal bar + left/right
  drops, all absolutely positioned at consistent 2px width
- Use .topo-sw-row with two 50% halves so switch centres land at
  exactly 25% and 75% — matching fork drop positions mathematically
- ISL rendered via ::before/::after on .topo-sw-row (switch boxes
  with solid bg cover the line at their edges, leaving only the gap)
- Add .topo-sw-drops: two vertical stubs from switch centres to bus rails
- All lines are now exactly 2px, no distortion, no misalignment

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/style.css

@@ -1628,46 +1628,109 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-amber); }
 .topo-v2-switch   { border-color:var(--amber); color:var(--amber); text-shadow:var(--glow-amber); }
 .topo-v2-host     { border-color:var(--border); color:var(--text); cursor:default; }
 
-/* ── Switch tier: both switches with inter-switch link ── */
+/* ── CSS fork: UDM-Pro → two switches, no SVG distortion ── */
-.topo-switch-pair {
+/* The fork sits between the router tier and the switch row.
-  display: flex;
+   Drops are at left:25% and left:75%, matching each switch's
-  align-items: center;
+   centre (each switch lives in a 50%-wide half). */
-  gap: 0;
+.topo-fork {
-}
-
-.topo-isl {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0 12px;
-  gap: 4px;
-}
-.topo-isl-wire {
-  width: 80px;
-  height: 2px;
-  background: linear-gradient(to right, var(--amber), var(--amber));
-  opacity: .6;
   position: relative;
+  width: 100%;
+  height: 40px;
+  flex-shrink: 0;
 }
-.topo-isl-wire::before,
+/* Vertical stem down from router centre */
-.topo-isl-wire::after {
+.topo-fork-stem {
-  content: '';
   position: absolute;
-  top: -3px;
+  left: 50%;
+  top: 0;
   width: 2px;
-  height: 8px;
+  height: 50%;
+  transform: translateX(-50%);
   background: var(--amber);
-  opacity: .6;
+  opacity: .65;
 }
-.topo-isl-wire::before { left: 0; }
+/* Horizontal bar at mid-height, spanning between the two drop points */
-.topo-isl-wire::after  { right: 0; }
+.topo-fork-bar {
-.topo-isl-label {
+  position: absolute;
+  left: 25%;
+  right: 25%;
+  top: calc(50% - 1px);
+  height: 2px;
+  background: var(--amber);
+  opacity: .55;
+  display: flex;
+  justify-content: center;
+}
+.topo-fork-label {
+  position: absolute;
+  top: -13px;
   font-size: .54em;
   color: var(--amber);
-  opacity: .75;
   white-space: nowrap;
-  letter-spacing: .05em;
+  letter-spacing: .06em;
   font-family: var(--font);
+  opacity: .85;
+  background: var(--bg);
+  padding: 0 4px;
+  text-shadow: var(--glow-amber);
+}
+/* Left and right vertical drops from bar down to switch tops */
+.topo-fork-drop {
+  position: absolute;
+  top: 50%;
+  width: 2px;
+  height: 50%;
+  background: var(--amber);
+  opacity: .55;
+}
+.topo-fork-drop-l { left: 25%;  transform: translateX(-50%); }
+.topo-fork-drop-r { left: 75%;  transform: translateX(-50%); }
+
+/* ── Switch row: two equal 50% halves ── */
+/* Each switch is centred in its half, so their centres are at
+   exactly 25% and 75% — matching the fork drops above. */
+.topo-sw-row {
+  display: flex;
+  width: 100%;
+  position: relative;
+  align-items: center;
+}
+.topo-sw-half {
+  width: 50%;
+  display: flex;
+  justify-content: center;
+  padding: 0 16px;
+  position: relative;
+  z-index: 1;       /* sit above the ISL line */
+}
+/* ISL line rendered as ::before — switch boxes (bg3) cover it at their edges */
+.topo-sw-row::before {
+  content: '';
+  position: absolute;
+  left: 25%;
+  right: 25%;
+  top: 50%;
+  height: 2px;
+  background: var(--amber);
+  opacity: .35;
+  z-index: 0;
+}
+/* ISL label centred between the two switches */
+.topo-sw-row::after {
+  content: '10G ISL';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: calc(50% - 14px);
+  font-size: .5em;
+  color: var(--amber);
+  white-space: nowrap;
+  font-family: var(--font);
+  letter-spacing: .06em;
+  opacity: .65;
+  background: var(--bg);
+  padding: 0 5px;
+  z-index: 2;
 }
 
 /* ── Dual-home bus section ── */
@@ -1839,21 +1902,34 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-amber); }
 .topo-v2-badge-degraded{ color:var(--orange); border-color:var(--orange); }
 .topo-v2-badge-unknown { color:var(--text-muted); border-color:var(--border); }
 
-/* vertical connector from router to switch tier */
+/* (removed: old SVG fork — replaced by .topo-fork CSS above) */
-.topo-v2-fork {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  position: relative;
-  height: 50px;
-}
 
-/* Fork tree SVG lines from UDM-Pro down to two switches */
+/* ── Drop wires from each switch down to the bus rails ── */
-.topo-v2-fork svg {
+.topo-sw-drops {
+  position: relative;
   width: 100%;
+  height: 20px;
+  flex-shrink: 0;
+}
+.topo-sw-drop {
+  position: absolute;
+  top: 0;
+  width: 2px;
   height: 100%;
-  overflow: visible;
+  opacity: .5;
+}
+.topo-sw-drop-l {
+  left: 25%;
+  transform: translateX(-50%);
+  background: var(--green);
+}
+.topo-sw-drop-r {
+  left: 75%;
+  transform: translateX(-50%);
+  background: var(--amber);
+  border-left: 2px dashed var(--amber);
+  width: 0;
+  background: none;
 }
 
 /* ── Improved chassis legend ── */

templates/index.html

@@ -62,53 +62,47 @@
       </div>
     </div>
 
-    <!-- Fork: UDM-Pro → two switches via SVG tree -->
+    <!-- Fork: UDM-Pro → both switches via CSS (no SVG distortion) -->
-    <div class="topo-vc" style="height:56px; overflow:visible;">
+    <div class="topo-fork">
-      <svg viewBox="0 0 400 56" preserveAspectRatio="none" style="width:100%;height:56px;overflow:visible;display:block;">
+      <div class="topo-fork-stem"></div>
-        <!-- stem down from router -->
+      <div class="topo-fork-bar"><span class="topo-fork-label">10G DAC</span></div>
-        <line x1="200" y1="0" x2="200" y2="24" stroke="var(--green)" stroke-width="2" opacity=".6"/>
+      <div class="topo-fork-drop topo-fork-drop-l"></div>
-        <!-- horizontal branch -->
+      <div class="topo-fork-drop topo-fork-drop-r"></div>
-        <line x1="108" y1="24" x2="292" y2="24" stroke="var(--amber)" stroke-width="2" opacity=".5"/>
-        <!-- drop to Agg switch (left) -->
-        <line x1="108" y1="24" x2="108" y2="56" stroke="var(--amber)" stroke-width="2" opacity=".55"/>
-        <!-- drop to PoE switch (right) -->
-        <line x1="292" y1="24" x2="292" y2="56" stroke="var(--amber)" stroke-width="2" opacity=".55"/>
-        <!-- DAC label -->
-        <text x="204" y="21" fill="var(--amber)" font-size="9" font-family="monospace" opacity=".8">10G DAC</text>
-      </svg>
     </div>
 
     <!-- ══════════════════════════════════════════════════════════════
-         TIER 3: Switches (Agg + PoE)
+         TIER 3: Switches — each in a 50% half so fork drops align
          ══════════════════════════════════════════════════════════ -->
-    <div class="topo-tier">
+    <div class="topo-sw-row">
-      <div class="topo-switch-pair">
 
-        <!-- USW-Aggregation -->
+      <!-- USW-Aggregation in left half (center = 25% of total width) -->
-        <div class="topo-v2-node topo-v2-switch" id="topo-switch-agg" style="min-width:130px;">
+      <div class="topo-sw-half">
+        <div class="topo-v2-node topo-v2-switch" id="topo-switch-agg">
           <span class="topo-v2-icon">⬡</span>
           <span class="topo-v2-label">USW-Agg</span>
           <span class="topo-v2-sub">Aggregation · RU22</span>
           <span class="topo-v2-sub">8 × 10G SFP+</span>
           <span class="topo-v2-vlan">VLAN90 · 10.10.90.x/24</span>
         </div>
-
-        <!-- Inter-switch link -->
-        <div class="topo-isl">
-          <div class="topo-isl-wire"></div>
-          <span class="topo-isl-label">10G SFP+</span>
       </div>
 
-        <!-- Pro 24 PoE -->
+      <!-- Pro 24 PoE in right half (center = 75% of total width) -->
-        <div class="topo-v2-node topo-v2-switch" id="topo-switch-poe" style="min-width:130px;">
+      <div class="topo-sw-half">
+        <div class="topo-v2-node topo-v2-switch" id="topo-switch-poe">
           <span class="topo-v2-icon">⬡</span>
           <span class="topo-v2-label">Pro 24 PoE</span>
           <span class="topo-v2-sub">24-Port · RU23</span>
           <span class="topo-v2-sub">24 × 1G PoE</span>
           <span class="topo-v2-vlan">DHCP · mgmt</span>
         </div>
+      </div>
 
     </div>
+
+    <!-- Drop connectors from switch centres down to bus rails -->
+    <div class="topo-sw-drops">
+      <div class="topo-sw-drop topo-sw-drop-l"></div>
+      <div class="topo-sw-drop topo-sw-drop-r"></div>
     </div>
 
     <!-- ══════════════════════════════════════════════════════════════