/* Shared SVG network; no changes to the surrounding SOO RAR page system. */
.geographic-network, .geographic-network .network-diagram { overflow: visible; }
.geographic-network .network-svg { display: block; width: 100%; height: auto; overflow: visible; }
.geographic-network .geographic-mobile { display: none; }
.geographic-network .country-silhouette {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.25px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.geographic-network .network-route-base,
.geographic-network .network-route,
.geographic-network .network-label-leader {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.geographic-network .network-route-base { stroke: var(--border); stroke-width: 1px; }
.geographic-network .network-route { stroke: var(--gold); }
.geographic-network .network-international { stroke-width: 3.5px; }
.geographic-network .network-feeder { stroke-width: 2.75px; }
.geographic-network .network-distribution { stroke-width: 2.25px; }
.geographic-network .network-label-leader { stroke: var(--border-3); stroke-width: 1px; }
.geographic-network .network-location-label {
  font: 600 15px var(--font);
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--technical-grid-7);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.geographic-network [data-location-label="berbera"] { font-size: 18px; }
.geographic-network .network-metadata,
.geographic-network .network-annotation,
.geographic-network .region-label { font-size: var(--type-mono-size); }
.geographic-network .network-metadata,
.geographic-network .network-annotation {
  paint-order: stroke;
  stroke: var(--technical-grid-7);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.geographic-network .network-location-group { opacity: .72; transition: opacity var(--motion-standard); }
.geographic-network .network-location-group.is-active { opacity: 1; }
.geographic-network .network-location-node,
.geographic-network .network-junction {
  fill: var(--page);
  stroke: var(--route-gold-3);
  stroke-width: 1.75px;
  vector-effect: non-scaling-stroke;
}
.geographic-network .network-location-node { opacity: .55; }
.geographic-network .network-location-node.is-active { opacity: 1; stroke: var(--gold); }
.geographic-network .network-warehouse-node.is-active,
.geographic-network .network-hub-node.is-active,
.geographic-network .network-junction.is-active { fill: var(--gold); }
.geographic-network .network-hub-node { stroke-width: 2.25px; }
.geographic-network .network-node-pulse {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.geographic-network .network-camel circle { vector-effect: non-scaling-stroke; }
.geographic-network .route-states { list-style: none; padding: 0; margin-bottom: 0; }
.geographic-network .network-stage {
  position: relative;
  padding-left: 17px;
  font: 500 var(--type-mono-size)/1.5 var(--mono);
}
.geographic-network .stage-marker {
  position: absolute;
  top: 3px;
  left: 0;
  width: 8px;
  height: 8px;
  border: 1px solid var(--border-2);
  border-radius: 50%;
}
.geographic-network .stage-status { display: block; margin-top: var(--space-xs); font-size: var(--type-mono-size); color: var(--secondary); }
.geographic-network .is-complete .stage-marker { border-color: var(--route-gold-3); background: var(--route-gold-6); }
.geographic-network .is-current .stage-marker { border: 2px solid var(--brown); }
.geographic-network .is-complete .stage-label { color: var(--camel-brown-2); }
.geographic-network .is-current .stage-label { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.geographic-network .is-current .stage-status { color: var(--brown); }
.geographic-network .network-motion { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); min-height: 44px; margin-top: var(--space-md); }
.geographic-network .network-motion-note { font-size: var(--type-mono-size); color: var(--secondary); }
.geographic-network .network-pause {
  min-height: 44px;
  padding: var(--space-xs);
  border: 0;
  background: transparent;
  color: var(--brown);
  font: 500 var(--type-mono-size) var(--mono);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.geographic-network .network-pause[hidden] { display: none; }
.geographic-network .network-pause:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; }
.geographic-network .network-pause:disabled { color: var(--secondary); text-decoration: none; cursor: default; }

@media (min-width: 768px) and (max-width: 1279px) {
  .geographic-network .network-location-label { font-size: 18px; }
  .geographic-network [data-location-label="berbera"] { font-size: 21px; }
  .geographic-network .network-metadata,
  .geographic-network .network-annotation,
  .geographic-network .region-label { font-size: 15px; }
  .geographic-network .route-states { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .geographic-network .country-silhouette { stroke-width: 1.75px; }
  .geographic-network .network-location-label { font-size: 23px; }
  .geographic-network [data-location-label="berbera"] { font-size: 26px; }
  .geographic-network .geographic-desktop [data-location-label="yiwu"],
  .geographic-network .geographic-desktop [data-location-label="berbera"] { transform: translateY(calc(-1 * var(--space-sm))); }
  .geographic-network .geographic-desktop [data-location-metadata="guangzhou"] { transform: translateY(var(--space-sm)); }
  .geographic-network .network-metadata,
  .geographic-network .network-annotation,
  .geographic-network .region-label { font-size: 20px; }
}
@media (max-width: 767px) {
  .geographic-network .geographic-desktop { display: none; }
  .geographic-network .geographic-mobile { display: block; max-width: 420px; margin-inline: auto; }
  .geographic-network .country-silhouette { stroke-width: 1.75px; }
  .geographic-network .network-metadata, .geographic-network .network-annotation, .geographic-network .region-label { font-size: 13px; }
  .geographic-network .network-location-label { font-size: 17px; }
  .geographic-network [data-location-label="berbera"] { font-size: 18px; }
  .geographic-network .route-states { display: block; margin-top: var(--space-md); }
  .geographic-network .network-stage { display: grid; grid-template-columns: 1fr auto; gap: var(--space-sm); padding: 0 0 var(--space-md) 24px; }
  .geographic-network .stage-marker { top: 5px; }
  .geographic-network .network-stage::after { content: ''; position: absolute; width: 1px; top: 13px; bottom: -5px; left: 3px; background: var(--border); }
  .geographic-network .network-stage:last-child { padding-bottom: 0; }
  .geographic-network .network-stage:last-child::after { display: none; }
  .geographic-network .stage-status { margin-top: 0; }
  .geographic-network .network-motion { display: block; margin-top: var(--space-sm); }
  .geographic-network .network-pause { padding-left: 0; }
  .geographic-network .network-bottom { margin-top: var(--space-md); padding-top: var(--space-md); }
}
@media (max-width: 359px) {
  /* Compensate for SVG scaling on the narrowest phones. */
  .geographic-network .network-metadata, .geographic-network .network-annotation, .geographic-network .region-label { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .geographic-network .network-location-group { transition: none; }
  .geographic-network .network-node-pulse { display: none; }
}