/* diagrams */
.dgm{--ink:#07131D;--navy:#0C2233;--line-d:#27455c;--amber:#FFB21A;--ok:#6EE3B0;--mutd:#A5B8C7;--disp:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;--sans:"Instrument Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;background:var(--navy);color:var(--paper);border:1px solid var(--line-d);position:relative}
.dark .dgm{background:#0A1B29}
.dgm-bar{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;padding:16px clamp(16px,2vw,28px);border-bottom:1px solid var(--line-d)}
.dgm-t{font:900 1.35rem/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;font:400 .76rem/1.2 var(--mono);color:var(--mutd)}
.legend li{display:flex;align-items:center;gap:8px}
.badge-i{font:600 .7rem/1 var(--mono);letter-spacing:.08em;padding:4px 6px;border-radius:2px;display:inline-block}
.b-live.badge-i{background:var(--ok);color:#06241a}.b-sample.badge-i{background:var(--amber);color:var(--ink)}.b-road.badge-i{border:1.5px dashed #8FA6B8;color:#C9D8E3}
.dgm-body{padding:clamp(12px,2vw,28px)}
.dgm svg{display:block;width:100%;height:auto;overflow:visible}
.dgm .mob{display:none}
.dgm-cap{margin:0;padding:14px clamp(16px,2vw,28px) 18px;font-size:.9rem;color:var(--mutd);border-top:1px solid var(--line-d)}
.dgm svg text{font-family:var(--sans)}
.d-t{font:600 25px var(--sans);fill:#fff;letter-spacing:-.005em}
.d-t.gt{fill:var(--ink)}
.d-s{font:400 16px var(--sans);fill:#B9C9D6}.d-s.gt{fill:#1b2530}
.d-bt{font:500 18px var(--sans);fill:#E8EEF3}
.d-k{font:500 13px var(--mono);letter-spacing:.14em;fill:var(--amber)}
.d-nn{font:600 15px var(--mono);fill:var(--ink)}.d-nn2{font:500 14px var(--mono);fill:var(--amber);letter-spacing:.1em}
.d-lab{font:400 13px var(--mono);fill:#B9C9D6}
.d-box{fill:#0F2A3D;stroke:#3A5E7A;stroke-width:1.5}
.d-box.st-box{transition:stroke .3s,fill .3s}
.d-box.key{fill:#12324A;stroke:var(--amber);stroke-width:2.5}
.d-box.road{fill:none;stroke:#7F98AC;stroke-dasharray:7 6}
.d-box.gate{fill:var(--amber);stroke:var(--amber)}
.d-box.cl{fill:#0B2133;stroke:#34546D}
.d-bar{fill:#0F2A3D;stroke:#3A5E7A}.d-bar.road{fill:none;stroke:#7F98AC;stroke-dasharray:7 6}
.d-chip{fill:#173B56;stroke:#4C7592}.d-chip-t{font:500 17px var(--sans);fill:#fff}
.d-node{fill:var(--amber);stroke:none}
.d-stem{stroke:var(--amber);stroke-width:2}
.d-arrow{stroke:var(--amber);stroke-width:2.5;fill:none}.d-arrow.dash{stroke-dasharray:6 6;stroke:#8FA6B8}
.route-base{stroke:#2E5069;stroke-width:6;fill:none;stroke-linecap:round}
.route{stroke:var(--amber);stroke-width:6;fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.6,.1,.2,1)}
.dgm.in .route{stroke-dashoffset:0}
.pulse{fill:#fff;filter:drop-shadow(0 0 6px var(--amber))}
.badge rect{stroke:none}.badge text{font:600 11px var(--mono);letter-spacing:.08em}
.badge.b-live rect{fill:var(--ok)}.badge.b-live text{fill:#06241a}
.badge.b-sample rect{fill:var(--amber)}.badge.b-sample text{fill:var(--ink)}
.badge.b-road rect{fill:none;stroke:#9FB3C4;stroke-dasharray:3 3;stroke-width:1.5}.badge.b-road text{fill:#C9D8E3}
.badge.b-draft rect{fill:#2B4C66}.badge.b-draft text{fill:#fff}
.badge.b-rule rect{fill:var(--ink)}.badge.b-rule text{fill:var(--amber)}
.gate .badge.b-rule rect{fill:var(--ink)}
/* highlight a station */
.dgm[data-hl]:not([data-hl=""]) .st{opacity:.45;transition:opacity .3s}
.dgm[data-hl=internet] .st-internet,.dgm[data-hl=hardware] .st-hardware,.dgm[data-hl=helpdesk] .st-helpdesk,.dgm[data-hl=security] .st-security,
.dgm[data-hl=quote] .st-quote,.dgm[data-hl=quote] .st-gate,.dgm[data-hl=renew] .st-renew,.dgm[data-hl=renew] .st-remind,.dgm[data-hl=support] .st-support,.dgm[data-hl=support] .st-order{opacity:1}
.dgm[data-hl=internet] .st-internet .st-box,.dgm[data-hl=hardware] .st-hardware .st-box,.dgm[data-hl=helpdesk] .st-helpdesk .st-box,.dgm[data-hl=security] .st-security .st-box,.dgm[data-hl=support] .st-support .st-box,.dgm[data-hl=renew] .st-renew .st-box{stroke:var(--amber);stroke-width:3}

.dgm-body{container-type:inline-size}
.dgm .mob{max-width:520px;margin:0 auto}
@container (max-width:1000px){.dgm .dsk{display:none}.dgm .mob{display:block}}