/* The map pins (public/map-pins.js), for the console map and the map stream widget: the iPhone app's pin, a round badge in the severity color, centered on the spot, with the kind's icon and a
   pulsing halo. The icon box is larger than the badge for the halo; only the badge takes clicks. */
.leaflet-marker-icon.incident-marker { background: transparent; border: 0; pointer-events: none; }
.pin { position: absolute; inset: 0; display: grid; place-items: center; }
.pin-badge { position: relative; z-index: 1; display: grid; place-items: center; width: var(--pin-size); height: var(--pin-size); border-radius: 50%; background: var(--pin); border: 2px solid rgb(255 255 255 / .85); box-shadow: 0 2px 8px rgb(0 0 0 / .6); pointer-events: auto; cursor: pointer; }
.pin-badge svg { width: 56%; height: 56%; fill: #fff; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .35)); }
.marker-selected .pin-badge { border: 3px solid #fff; }
.pin-halo { position: absolute; left: 50%; top: 50%; width: var(--pin-size); height: var(--pin-size); margin: calc(var(--pin-size) / -2) 0 0 calc(var(--pin-size) / -2); border-radius: 50%; background: var(--pin); opacity: 0; pointer-events: none; }
.pin-breaking-dot { position: absolute; z-index: 2; left: calc(50% + var(--pin-size) / 2 - 10px); top: calc(50% - var(--pin-size) / 2 - 2px); width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--pin-red, #e31b23); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .pin-halo { animation: pin-pulse var(--pulse-ms) cubic-bezier(.2, .6, .35, 1) var(--pulse-delay) infinite; }
  .pin-halo-2 { animation-delay: calc(var(--pulse-delay) - var(--pulse-ms) / 2); }
  @keyframes pin-pulse { from { opacity: var(--pulse-from); transform: scale(1); } to { opacity: 0; transform: scale(var(--pulse-to)); } }
}