/* Raw-SVG POC: every interaction is hand-rolled CSS + JS. */

#map {
  width: 100%;
  display: block;
}

#map svg {
  width: 100%;
  height: auto;
  display: block;
  /* Hand all touch gestures (drag, pinch) to our JS handlers. Without this,
     mobile browsers fire a few pointermove events then send pointercancel
     when they decide the gesture is a page scroll, which makes panning
     feel scattered and slow. */
  touch-action: none;
}

#map path {
  fill: var(--color-state-base, #cfd8dc);
  stroke: #ffffff;
  stroke-width: 0.7;
  cursor: pointer;
  transition: fill 120ms ease, stroke-width 120ms ease;
}

#map path:hover {
  fill: var(--color-accent-soft, #90caf9);
}

#map path.is-active {
  fill: var(--color-accent, #1976d2);
  stroke: #0d47a1;
  stroke-width: 1.6;
}

/* Postal-code labels planted at each state's centroid. Always visible so
   mobile users (no hover) can identify states at a glance. */
.state-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 700;
  fill: #455a64;
  pointer-events: none;
  user-select: none;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 2.2;
  stroke-linejoin: round;
  transition: fill 120ms ease;
}
.state-label.is-active {
  fill: #ffffff;
  stroke: rgba(13, 71, 161, 0.55);
}