/* Spanning Tree Protocol — Radia Perlman's self-healing network, made visible.
   Wire switches together with redundant links and you get loops; a single broadcast
   would circle forever. STP elects a root, each switch keeps only its best path
   toward the root and blocks the rest, leaving one loop-free tree that still reaches
   every switch. The blocked links are held in reserve: fail an active link and the
   protocol re-converges, promoting a backup to heal connectivity with no human in
   the loop. Click any link to fail or restore it. Vanilla JS + inline SVG, no deps.
   Palette shared with siblings: green = active tree link / root, cyan = a blocked
   backup link, dim grey = a failed link. No red. */

#spanning-tree {
  --st-active: #30d158;
  --st-backup: #5ac8fa;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px; padding: clamp(16px, 3vw, 26px); margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}
.st-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.st-explain { font-size: 0.9rem; line-height: 1.55; margin: 8px 0 16px; color: var(--color-text-secondary, rgba(255,255,255,0.7)); }

.st-plot { width: 100%; height: auto; display: block; background: #0c0c0f; border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08)); border-radius: 10px; touch-action: manipulation; }
.st-edge-hit { stroke: transparent; stroke-width: 16; cursor: pointer; }
.st-edge { stroke-width: 3; pointer-events: none; transition: stroke 0.25s, opacity 0.25s; }
.st-edge.active { stroke: var(--st-active); }
.st-edge.backup { stroke: var(--st-backup); stroke-dasharray: 5 5; opacity: 0.85; }
.st-edge.failed { stroke: rgba(255,255,255,0.22); stroke-dasharray: 2 5; opacity: 0.6; }
.st-fail-x { stroke: rgba(255,255,255,0.5); stroke-width: 2; pointer-events: none; }
.st-node { fill: var(--color-bg-surface, #1a1a1a); stroke: rgba(255,255,255,0.4); stroke-width: 2; }
.st-node.root { fill: rgba(48,209,88,0.16); stroke: var(--st-active); stroke-width: 3; }
.st-node.off { opacity: 0.4; }
.st-nodelbl { fill: #fff; font-family: var(--font-mono, monospace); font-size: 13px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.st-rootlbl { fill: var(--st-active); font-family: var(--font-family, sans-serif); font-size: 9px; font-weight: 700; text-anchor: middle; letter-spacing: 0.08em; pointer-events: none; }

.st-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 4px; }
.st-stat { background: var(--color-bg-surface, #1a1a1a); border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08)); border-radius: 10px; padding: 10px 12px; }
.st-stat .st-k { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary, rgba(255,255,255,0.45)); margin-bottom: 4px; }
.st-stat .st-v { font-family: var(--font-mono, monospace); font-size: 1.15rem; font-weight: 650; }
.st-stat .st-v.ok { color: var(--st-active); }
.st-stat .st-v.bad { color: var(--st-backup); }

.st-bar { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.st-reset { appearance: none; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 600; border: 1px solid var(--color-border, rgba(255,255,255,0.16)); background: transparent; color: var(--color-text-tertiary, rgba(255,255,255,0.6)); padding: 6px 12px; border-radius: 8px; }
.st-reset:hover { color: #fff; border-color: rgba(255,255,255,0.35); }
.st-hint { font-size: 0.78rem; color: var(--color-text-tertiary, rgba(255,255,255,0.45)); }

.st-caption { margin-top: 14px; font-size: 0.9rem; line-height: 1.55; color: var(--color-text-secondary, rgba(255,255,255,0.78)); min-height: 2.6em; }
.st-caption b { color: #fff; }
.st-caption .st-hl { color: var(--st-active); font-weight: 650; }
.st-caption .st-lo { color: var(--st-backup); font-weight: 650; }
.st-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }