/* Anycast network map (b8). Dark theme on the home network story; light theme on the DDoS page. */
.anycast-figure {
 --map-bg: #081a33; --map-border: #24426a; --map-dot: #23446e; --map-text: #f2f7ff; --map-muted: #c9d8ec;
 --map-backbone: #66c2ff; --map-pop: #90e4ff; --map-pop-fill: #081a33; --map-attack: #ffbd77; --map-clean: #90e4ff;
 --map-card: #0f2a4d; --map-card-border: #4f79a8; --map-chip: #13335a; --map-step-border: #5d7ea6;
 --map-step-active: #12345c; --map-tip-bg: #f2f7ff; --map-tip-text: #081a33; --map-focus: #66c2ff;
 margin: 0; padding: clamp(16px, 2.6vw, 36px); border: 1px solid var(--map-border); border-radius: 24px;
 background: var(--map-bg); color: var(--map-text);
}
.anycast-figure[data-network-kind="ddos"] {
 --map-bg: #f5f8ff; --map-border: #dfe6f0; --map-dot: #c9d7eb; --map-text: #111e35; --map-muted: #344965;
 --map-backbone: #0057d9; --map-pop: #0057d9; --map-pop-fill: #fff; --map-attack: #a32c00; --map-clean: #00617d;
 --map-card: #fff; --map-card-border: #a4bce0; --map-chip: #fff; --map-step-border: #677b96;
 --map-step-active: #e3edff; --map-tip-bg: #111e35; --map-tip-text: #fff; --map-focus: #0053bd;
}
.diagram-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; color: var(--map-muted); }
.diagram-topline strong { color: var(--map-text); font-size: clamp(1.1rem, 1.5vw, 1.4rem); letter-spacing: -.01em; }
.topline-note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.prefix-chip { display: inline-block; padding: 1px 12px; border: 1px solid var(--map-step-border); border-radius: 999px; background: var(--map-chip); color: var(--map-text); font: 600 .9em/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.anycast-svg { display: block; width: 100%; height: auto; margin: 20px 0 8px; }
.anycast-mobile { display: none; }

/* Map layers */
.world-dots { fill: none; stroke: var(--map-dot); stroke-linecap: round; }
.stop-bg { stop-color: var(--map-bg); stop-opacity: 1; }
.stop-bg-clear { stop-color: var(--map-bg); stop-opacity: 0; }
.stop-solid { stop-color: var(--map-backbone); stop-opacity: 1; }
.stop-fade { stop-color: var(--map-backbone); stop-opacity: 0; }
.backbone-halo { fill: none; stroke: var(--map-backbone); stroke-opacity: .2; stroke-width: 9px; stroke-linecap: round; }
.backbone-core { fill: none; stroke: var(--map-backbone); stroke-width: 2px; stroke-linecap: round; }
.attack-route { fill: none; stroke: var(--map-attack); stroke-width: 1.8px; stroke-dasharray: 5 5; }
.visitor-route { fill: none; stroke: var(--map-clean); stroke-width: 1.8px; }
.delivery-route { fill: none; stroke: var(--map-clean); stroke-width: 2.4px; }
.clean-route { fill: none; stroke: none; }
.map-marker-clean path { fill: var(--map-clean); }
.map-marker-attack path { fill: none; stroke: var(--map-attack); stroke-width: 2.4px; stroke-linecap: round; }
.anycast-svg text { font-family: inherit; fill: var(--map-text); paint-order: stroke; stroke: var(--map-bg); stroke-width: 4px; stroke-linejoin: round; }
.pop-code { font-size: 17px; font-weight: 700; letter-spacing: .06em; }
.customer-label { font-size: 14px; font-weight: 600; }
.anycast-svg .customer-label { fill: var(--map-clean); }
.anycast-svg .backbone-label { fill: var(--map-muted); font-size: 14px; font-weight: 600; letter-spacing: .06em; }
.anycast-svg .backbone-label:lang(en) { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.origin-card { fill: var(--map-card); stroke: var(--map-card-border); stroke-width: 1.5px; }
.origin-icon rect, .origin-icon path { fill: none; stroke: var(--map-clean); stroke-width: 2px; stroke-linecap: round; }
.anycast-svg .origin-node text { stroke: var(--map-card); }
.origin-title { font-size: 16px; font-weight: 700; }
.anycast-svg .origin-mode { fill: var(--map-muted); font-size: 14px; }

/* Packets and effects are positioned by network-map.js with transform + opacity only. */
.traffic-packet, .map-fx { opacity: 0; }
.packet-attack circle { fill: var(--map-bg); fill-opacity: .9; }
.packet-attack path, .fx-drop path { fill: none; stroke: var(--map-attack); stroke-width: 2.6px; stroke-linecap: round; }
.packet-clean path { fill: var(--map-clean); stroke: var(--map-bg); stroke-width: 1.2px; stroke-linejoin: round; }
.packet-clean .packet-tail { fill: none; stroke: var(--map-clean); stroke-width: 2.4px; stroke-opacity: .45; stroke-linecap: round; }
.fx-pulse { fill: none; stroke: var(--map-pop); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.fx-drop circle { fill: none; stroke: var(--map-attack); stroke-width: 2px; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.fx-glow { fill: none; stroke: var(--map-clean); stroke-width: 3px; }

/* PoP markers */
.pop-node { cursor: help; }
.pop-node:focus { outline: none; }
.pop-halo { fill: var(--map-pop); fill-opacity: .14; }
.pop-ring { fill: var(--map-pop-fill); stroke: var(--map-pop); stroke-width: 2.6px; }
.pop-core { fill: var(--map-pop); }
.pop-customer-ring { fill: none; stroke: var(--map-clean); stroke-width: 2px; }
.pop-focus-keyline, .pop-focus-ring { fill: none; visibility: hidden; }
.pop-node:focus-visible .pop-focus-keyline { visibility: visible; stroke: #fff; stroke-width: 2.5px; }
.pop-node:focus-visible .pop-focus-ring { visibility: visible; stroke: var(--map-focus); stroke-width: 3px; }
.pop-tooltip { visibility: hidden; opacity: 0; }
.pop-tooltip rect { fill: var(--map-tip-bg); }
.anycast-svg .pop-tooltip text { fill: var(--map-tip-text); stroke: none; font-size: 15px; font-weight: 600; }
.pop-node:hover .pop-tooltip, .pop-node:focus .pop-tooltip { visibility: visible; opacity: 1; }
.pop-node.is-tooltip-dismissed .pop-tooltip { visibility: hidden; opacity: 0; }

/* Step emphasis: dim the layers a step does not describe (labels keep full contrast). */
.map-layer, .delivery-route { transition: opacity .5s ease; }
.anycast-figure:is([data-step="0"], [data-step="1"]) :is(.layer-backbone, .delivery-route) { opacity: .45; }
.anycast-figure:is([data-step="2"], [data-step="3"]) :is(.layer-attack, .layer-visitor) { opacity: .3; }
.anycast-figure[data-step="3"] .layer-backbone { opacity: .6; }

/* Caption, steps and legend */
.anycast-figure figcaption { color: var(--map-muted); }
.city-code-legend { margin: 8px 0 16px; color: var(--map-text); font-weight: 600; }
.diagram-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.diagram-steps li { display: flex; }
.step-button { display: flex; flex: 1; gap: 10px; align-items: flex-start; min-height: 56px; padding: 12px 14px; border: 1px solid var(--map-step-border); border-radius: 12px; background: transparent; color: var(--map-muted); font: inherit; line-height: 1.45; text-align: left; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.step-index { display: inline-grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border: 1.5px solid currentColor; border-radius: 50%; font-weight: 700; font-size: .85rem; line-height: 1; }
.diagram-steps [aria-current="step"] .step-button { border-color: var(--map-clean); background: var(--map-step-active); color: var(--map-text); box-shadow: inset 0 0 0 1px var(--map-clean); }
.diagram-steps [aria-current="step"] .step-index { border-color: var(--map-clean); background: var(--map-clean); color: var(--map-bg); }
.step-button[aria-pressed="true"] { border-style: solid; border-width: 2px; padding: 11px 13px; }
.step-button:hover { border-color: var(--map-clean); color: var(--map-text); }
.step-button:focus-visible, .anycast-figure .motion-toggle:focus-visible { outline: 3px solid var(--map-focus); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
.diagram-note { margin: 16px 0; font-size: .95rem; }
.diagram-legend { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; font-size: .9rem; color: var(--map-text); }
.diagram-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.legend-swatch { flex: none; width: 40px; height: 16px; overflow: visible; }
.legend-attack-line { fill: none; stroke: var(--map-attack); stroke-width: 2px; stroke-dasharray: 5 4; }
.legend-attack-x { fill: none; stroke: var(--map-attack); stroke-width: 2.4px; stroke-linecap: round; }
.legend-clean-line { fill: none; stroke: var(--map-clean); stroke-width: 2px; }
.legend-clean-head { fill: var(--map-clean); }
.legend-backbone-halo { fill: none; stroke: var(--map-backbone); stroke-opacity: .25; stroke-width: 9px; stroke-linecap: round; }
.legend-backbone-core { fill: none; stroke: var(--map-backbone); stroke-width: 2px; stroke-linecap: round; }
.anycast-figure .motion-toggle { margin-left: auto; min-height: 44px; padding: 8px 20px; border: 1px solid var(--map-text); border-radius: 999px; background: transparent; color: var(--map-text); }
.anycast-figure .motion-toggle:hover { background: var(--map-text); color: var(--map-bg); }

@media (max-width: 1399.98px) {
 .anycast-svg.anycast-desktop .backbone-label:lang(en) { font-size: 14px; }
}
@media (max-width: 1199.98px) {
 .anycast-desktop .pop-code { font-size: 20px; }
 .anycast-desktop .customer-label { font-size: 17px; }
 .anycast-svg.anycast-desktop .backbone-label, .anycast-svg.anycast-desktop .backbone-label:lang(en) { font-size: 17px; }
 .anycast-desktop .origin-node { transform: scale(1.25); transform-box: fill-box; transform-origin: 0 0; }
}
@media (max-width: 991.98px) {
 .anycast-desktop { display: none; }
 .anycast-mobile { display: block; max-width: 640px; margin-inline: auto; }
 .diagram-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mobile variant geometry (shown below 992px). */
.anycast-mobile text { stroke-width: 3px; }
.anycast-mobile .pop-code { font-size: 14px; }
.anycast-mobile .customer-label { font-size: 13px; }
.anycast-mobile .origin-title { font-size: 14px; }
.anycast-mobile .origin-mode { font-size: 13px; }
.anycast-svg.anycast-mobile .pop-tooltip text { font-size: 12.5px; }
.anycast-mobile .backbone-halo { stroke-width: 5px; }
.anycast-mobile .backbone-core { stroke-width: 1.4px; }
.anycast-mobile .attack-route { stroke-width: 1.3px; stroke-dasharray: 3.5 3.5; }
.anycast-mobile .visitor-route { stroke-width: 1.3px; }
.anycast-mobile .delivery-route { stroke-width: 1.8px; }
.anycast-mobile .pop-ring { stroke-width: 1.8px; }
.anycast-mobile .packet-attack path, .anycast-mobile .fx-drop path { stroke-width: 2px; }
.anycast-mobile .packet-clean .packet-tail { stroke-width: 1.8px; }
.anycast-mobile .origin-card { stroke-width: 1.2px; }
.anycast-mobile .pop-focus-keyline { stroke-width: 2px; }
.anycast-mobile .pop-focus-ring { stroke-width: 2.4px; }
@media (min-width: 576px) and (max-width: 991.98px) {
 .anycast-mobile .pop-code { font-size: 11px; }
 .anycast-mobile .customer-label { font-size: 10px; }
 .anycast-mobile .origin-node { transform: scale(.75); transform-box: fill-box; transform-origin: 100% 0; }
}
@media (max-width: 575.98px) {
 .diagram-steps { gap: 8px; font-size: .9rem; }
 .step-button { flex-direction: column; gap: 6px; padding: 10px; }
 .step-button[aria-pressed="true"] { padding: 9px; }
 .diagram-legend { gap: 10px; }
 .anycast-figure .motion-toggle { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
 .anycast-figure .motion-toggle { visibility: hidden; }
 .map-layer, .delivery-route, .step-button { transition: none; }
}