/* Scoped extension of the existing centres pages. */
.network-map-layout > *, .network-map, .network-city-panel { min-width: 0; }
.network-map { padding: 20px; align-self: start; min-height: 0; }
.network-map-canvas { position: relative; width: 100%; min-width: 0; aspect-ratio: 560 / 540; isolation: isolate; }
.network-map-svg { display: block; width: 100%; height: 100%; min-width: 0; pointer-events: none; }
.network-map-origin { opacity: 0; pointer-events: none; }
.network-map-origin.is-offset { opacity: 1; }
.network-map-origin line { stroke: var(--muted); stroke-width: 1; stroke-opacity: .55; vector-effect: non-scaling-stroke; }
.network-map-origin circle { fill: var(--green); }
.network-map-marker { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; transform: translate(-50%,-50%); border-radius: 50%; clip-path: circle(50%); color: var(--ink); text-decoration: none; z-index: 1; }
.network-map-dot { position: relative; display: block; width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--orange); box-sizing: border-box; }
.network-map-dot::after { content: ""; position: absolute; inset: 3px; border: 2px solid var(--surface); border-radius: 50%; box-sizing: border-box; }
.network-map-marker--partner .network-map-dot { background: var(--green); }
.network-map-marker--mixed .network-map-dot { background: linear-gradient(90deg,var(--orange) 50%,var(--green) 50%); }
.network-map-marker:hover .network-map-dot, .network-map-marker.is-selected .network-map-dot, .network-map-marker:focus-visible .network-map-dot { outline: 2px solid var(--ink); outline-offset: 2px; }
.network-map-marker:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; z-index: 2; }
.network-map-tooltip { position: absolute; z-index: 3; max-width: calc(100% - 16px); width: max-content; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); pointer-events: none; overflow-wrap: anywhere; font: 400 1.125rem/1.45 var(--ui); }
.network-map-tooltip[hidden] { display: none; }
.network-map-tooltip strong, .network-map-tooltip span { display: block; }
.network-map-tooltip strong { font-weight: 600; }
.network-map-tooltip span { color: var(--muted); }
.network-map .map-legend { flex-wrap: wrap; gap: 12px 20px; font-family: inherit; font-size: 1rem; letter-spacing: normal; text-transform: none; }
.network-map .network-legend-mixed { background: linear-gradient(90deg,var(--orange) 50%,var(--green) 50%); }
.network-map-hint { font-size: 1rem; line-height: 1.6; margin: 14px 0; }
.network-count { font-weight: 600; }
.network-city-panel[hidden] { display: none; }
.network-city-panel { margin-bottom: 24px; border: 2px solid var(--green); position: relative; animation: network-panel-in .18s ease-out; scroll-margin-top: 125px; }
.network-city-panel h3 { margin-top: 12px; clear: both; }
.network-panel-close { float: right; min-height: 44px; padding: 8px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font: inherit; cursor: pointer; }
.network-panel-close:focus-visible, .network-city-link:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.network-area-list { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; padding: 0; margin: 0 0 20px; }
.network-area-list li { font-size: 1rem; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.network-city-link { display: inline-flex; align-items: center; min-height: 48px; white-space: normal; }
.network-partner h2, .network-partner h3, .network-partner p { overflow-wrap: anywhere; }
.network-partner .pill, .network-partner .site-type { color: var(--green); }
.network-partner { min-width: 0; }
@keyframes network-panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .network-city-panel { animation: none; } }
@media (max-width: 700px) { .network-map { padding: 14px; } .network-city-panel { padding: 20px; } }