.map-annotations {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  contain: layout style;
}

.map-annotations__leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-annotation-leader { fill: none; stroke: rgba(255, 255, 255, .68); stroke-width: 1.6; stroke-linecap: round; }
.map-annotation-leader--capital { stroke: rgba(242, 97, 38, .72); stroke-width: 1.4; }

.map-annotation {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 7px;
  background: rgba(4, 30, 66, .68);
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  text-shadow: 0 1px 3px #041e42, 0 0 5px #041e42, 0 0 9px #041e42;
  -webkit-tap-highlight-color: transparent;
  animation: map-label-appear 150ms ease-out both;
}
@keyframes map-label-appear { from { opacity: 0; } to { opacity: 1; } }
.map-annotation--capital, .map-annotation--city { background: rgba(4, 30, 66, .9); font-weight: 500; }
.map-annotation--city { color: #ff8a55; }
.map-annotation.is-selected { border-color: rgba(255, 255, 255, .48); background: rgba(4, 30, 66, .96); }
.map-annotation:hover, .map-annotation:focus-visible { background: rgba(4, 30, 66, .88); outline: 1px solid rgba(255, 255, 255, .55); }

.map-capital-point {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.map-capital-point::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(5px, .19vw, 8px);
  height: clamp(5px, .19vw, 8px);
  border-radius: 50%;
  background: #f26126;
  box-shadow: 0 0 0 1.3px rgba(255, 255, 255, .78), 0 1px 5px rgba(4, 30, 66, .5);
  transform: translate(-50%, -50%);
}
.map-capital-point.is-selected::before { background: var(--psb-orange); box-shadow: 0 0 0 3px rgba(242, 97, 38, .24); }
.map-annotations[data-density-tier="0"] .map-capital-point:not(.is-selected) { opacity: .64; }
.is-overview .map-capital-point::before { animation: overview-capital-pulse 3.2s ease-in-out infinite; }
.is-overview .map-capital-point:nth-child(3n)::before { animation-delay: -.8s; }
.is-overview .map-capital-point:nth-child(5n)::before { animation-delay: -1.6s; }
@keyframes overview-capital-pulse {
  0%, 100% { opacity: .72; transform: translate(-50%, -50%) scale(.92); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}
.map-capital-point:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.map-annotations [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .is-overview .map-capital-point::before, .map-annotation { animation: none; }
}