Fix topology chain order and inspector SFP port width

Topology:
- Correct series layout: UDM-Pro → USW-Agg → Pro 24 PoE (not a fork)
- Remove CSS fork divs, replace with straight vertical connectors
- Labels: WAN · 10G SFP+ (UDM→Agg), 10G trunk (Agg→PoE)
- Remove ISL from legend (no parallel switch pair)

Inspector:
- Fix USW-Agg port blocks appearing narrower than other switches
- SFP ports in rows now use same width (34px) as copper ports;
  all-SFP switches like USL8A no longer look undersized

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

static/style.css

@@ -1076,9 +1076,9 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-amber); }
   letter-spacing: 0;
 }
 
-/* SFP port (in rows — slightly narrower to suggest cage) */
+/* SFP port (in rows) — width overridden to 34px further down */
 .switch-port-block.sfp-port {
-  width: 28px;
+  width: 34px;
   height: 38px;
   font-size: .55em;
 }
@@ -2006,9 +2006,10 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-amber); }
   letter-spacing: .04em;
   border-left-width: 3px;
 }
-/* SFP port in rows */
+/* SFP port in rows — same width as copper ports so all-SFP switches
+   (e.g. USW-Agg / USL8A) don't appear narrower than other switches */
 .switch-port-block.sfp-port {
-  width: 26px;
+  width: 34px;
   height: 40px;
   font-size: .55em;
   border-left-width: 2px;

templates/index.html

@@ -62,21 +62,16 @@
       </div>
     </div>
 
-    <!-- Fork: UDM-Pro → both switches via CSS (no SVG distortion) -->
+    <!-- UDM-Pro → USW-Agg (10G SFP+) -->
-    <div class="topo-fork">
+    <div class="topo-vc">
-      <div class="topo-fork-stem"></div>
+      <div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
-      <div class="topo-fork-bar"><span class="topo-fork-label">10G DAC</span></div>
+      <span class="topo-vc-label">10G SFP+</span>
-      <div class="topo-fork-drop topo-fork-drop-l"></div>
-      <div class="topo-fork-drop topo-fork-drop-r"></div>
     </div>
 
     <!-- ══════════════════════════════════════════════════════════════
-         TIER 3: Switches — each in a 50% half so fork drops align
+         TIER 3: USW-Aggregation
          ══════════════════════════════════════════════════════════ -->
-    <div class="topo-sw-row">
+    <div class="topo-tier">
-
-      <!-- USW-Aggregation in left half (center = 25% of total width) -->
-      <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>
@@ -86,8 +81,16 @@
       </div>
     </div>
 
-      <!-- Pro 24 PoE in right half (center = 75% of total width) -->
+    <!-- USW-Agg → Pro 24 PoE (10G trunk) -->
-      <div class="topo-sw-half">
+    <div class="topo-vc">
+      <div class="topo-vc-wire" style="background:var(--amber);opacity:.6;"></div>
+      <span class="topo-vc-label">10G trunk</span>
+    </div>
+
+    <!-- ══════════════════════════════════════════════════════════════
+         TIER 4: Pro 24 PoE
+         ══════════════════════════════════════════════════════════ -->
+    <div class="topo-tier">
       <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>
@@ -97,12 +100,9 @@
       </div>
     </div>
 
-    </div>
+    <!-- Pro 24 PoE → host bus section -->
-
+    <div class="topo-vc">
-    <!-- Drop connectors from switch centres down to bus rails -->
+      <div class="topo-vc-wire" style="background:var(--border);opacity:.5;"></div>
-    <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>
 
     <!-- ══════════════════════════════════════════════════════════════
@@ -159,7 +159,6 @@
     <!-- ── Legend ── -->
     <div class="topo-legend">
       <div class="topo-legend-item"><span class="topo-legend-line-wan"></span> WAN / uplink</div>
-      <div class="topo-legend-item"><span class="topo-legend-line-isl"></span> ISL / inter-switch</div>
       <div class="topo-legend-item"><span class="topo-legend-line-10g"></span> 10G SFP+ (Ceph / VLAN90)</div>
       <div class="topo-legend-item"><span class="topo-legend-line-1g"></span> 1G DHCP (mgmt)</div>
       <div class="topo-legend-item" style="border:1px dashed var(--border); padding:1px 5px; font-size:.56em; color:var(--text-muted);">dashed border = off-rack</div>