/* Colours mirror parrot-app/src/design/tokens.ts (setterChrome). */
html, body, #map { margin: 0; height: 100%; width: 100%; background: #F5F3EF; }
body.dark, body.dark #map { background: #0F0F0F; }
body.dark .pin { background: rgba(245, 243, 239, 0.9); border-color: #0F0F0F; color: #0F0F0F; }
body.dark .pin.cluster { background: rgba(245, 243, 239, 0.75); }
body.dark .pin.selected { background: #10B981; }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }

.pin {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.86);
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transform: scale(0);
  /* Springy: a slight overshoot as a pin grows with its visits. */
  transition: width 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    height 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 160ms ease;
}
.pin.shown { transform: scale(1); }
.pin.selected { background: #047857; }
.pin.cluster { background: rgba(17, 17, 17, 0.72); }
.pin:focus-visible { outline: 3px solid #047857; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pin { transition: none; }
}