/* globe.css — sizing/interaction rules for the corridor globe (globe.js).
   Loaded after styles.css. When globe.js initialises it adds .has-globe to
   .network__map and inserts a <canvas class="globe">; the original SVG stays
   in the DOM as the no-JS / failed-init fallback. */
.network__map.has-globe .corridor-map {
  display: none;
}
.globe {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  /* no border-radius: a rounded replaced element clips its bitmap, and labels
     near the limb sit outside the inscribed circle; the panel supplies the bg */
  cursor: grab;
  touch-action: pan-y;            /* vertical page scroll stays with the browser */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.globe.is-dragging {
  cursor: grabbing;
}
.globe:focus-visible {
  outline: 2.5px solid var(--blue-bright);
  outline-offset: 3px;
}
/* keyboard/screen-reader help referenced by aria-describedby */
.globe-help {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  /* globe.js renders a single static frame (arcs complete, no auto-rotation,
     no cargo); dragging and the arrow keys still rotate it. */
  .globe {
    cursor: grab;
    transition: none;
  }
}