/* @mostly-tiny/geo — map kit styles. Scoped under .mtgeo so a host app's CSS can't
 * bleed in. Served verbatim as web/_kit/geo-kit.css (installed by mt-install-geo-kit,
 * drift-gated). Pairs with geo-kit.js. Requires maplibre-gl.css (CDN) for base map UI. */

.mtgeo {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  border-radius: 12px;
  overflow: hidden;
  background: #0e1726; /* dataviz-dark-ish fallback while tiles load */
}

.mtgeo .maplibregl-canvas { outline: none; }

/* Live pin — a small core dot with an expanding ring; "pop" plays once on add. */
.mtgeo__pin {
  width: 14px;
  height: 14px;
  position: relative;
  cursor: pointer;
  pointer-events: auto;
}
.mtgeo__pin-core {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #e8413a;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 1px 4px rgba(0, 0, 0, 0.35);
}
.mtgeo__pin-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(232, 65, 58, 0.55);
  opacity: 0;
}
.mtgeo__pin--pop .mtgeo__pin-core { animation: mtgeo-pop 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.mtgeo__pin--pop .mtgeo__pin-ring { animation: mtgeo-ring 1100ms ease-out 1; }

@keyframes mtgeo-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes mtgeo-ring {
  0% { opacity: 0.7; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
  .mtgeo__pin--pop .mtgeo__pin-core,
  .mtgeo__pin--pop .mtgeo__pin-ring { animation: none; }
  .mtgeo__pin-ring { opacity: 0; }
}

/* Heat legend (optional; host renders the markup, kit ships the look). */
.mtgeo-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #5b6472;
}
.mtgeo-legend__bar {
  width: 120px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #3b5bdb 0%, #2f9e9e 20%, #57c785 40%, #f2d23b 60%, #f08a24 80%, #e8413a 100%);
}

/* Degraded placeholder (no key / no maplibre): branded empty state, not a blank box. */
.mtgeo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 120% at 50% 0%, #16233b 0%, #0e1726 70%);
  color: #aeb8c8;
}
.mtgeo__ph { text-align: center; padding: 24px; max-width: 280px; }
.mtgeo__ph p { margin: 12px 0 0; font-size: 13px; line-height: 1.4; }
.mtgeo__ph-dot {
  width: 12px;
  height: 12px;
  margin: 0 auto;
  border-radius: 50%;
  background: #e8413a;
  box-shadow: 0 0 0 6px rgba(232, 65, 58, 0.18), 0 0 0 12px rgba(232, 65, 58, 0.08);
}