/* THE SHARED MAP (MapView.tsx) and the pieces drawn on it. Sizes are rem, so they follow the person's text size (--ts). */
.smp {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 6rem;
  overflow: hidden;
  background: #f3f2ed;
  isolation: isolate;
}
/* MapLibre's own sheet makes its container "relative"; the map must fill the box, so this says so again, more firmly. */
.smp > .smp-canvas,
.smp > .smp-canvas.maplibregl-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.smp-canvas[data-map="still"] {
  pointer-events: none;
}
.smp-canvas .maplibregl-canvas {
  outline: none;
}
/* The pin is fixed in the middle; its tip is the middle of the map. */
.smp-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.75rem;
  height: 3.5rem;
  transform: translate(-50%, -100%);
  pointer-events: none;
  z-index: 2;
  display: block;
}
.smp-pin svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* A point set before, shown faintly while a new one is chosen. */
.smp-old {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: rgba(11, 61, 46, 0.22);
  border: 0.125rem solid rgba(11, 61, 46, 0.5);
  box-sizing: border-box;
}
.smp-wait {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #f3f2ed 30%, #eceae2 50%, #f3f2ed 70%);
  background-size: 200% 100%;
  animation: smp-wait 1.4s linear infinite;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .smp-wait {
    animation: none;
  }
}
@keyframes smp-wait {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
.smp-down {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: #555a55;
  z-index: 3;
  background: #f3f2ed;
}
/* The attribution is small, and MapLibre's compact "i" button opens it. */
.smp .maplibregl-ctrl-attrib {
  font-size: 0.625rem;
}
.smp .maplibregl-ctrl-attrib.maplibregl-compact {
  min-height: 1.25rem;
}
.smp .maplibregl-ctrl-attrib-button {
  width: 1.25rem;
  height: 1.25rem;
}
/* A point on the ground: the plots of a site, small with their names. */
.smp-plot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #ffffff;
  border: 0.1875rem solid #0b3d2e;
  box-sizing: border-box;
}
.smp-plot span {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 0.125rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.85);
  color: #0b3d2e;
  font: 600 0.625rem/1.3 Inter, system-ui, sans-serif;
  white-space: nowrap;
}
/* The corners of a site boundary: lime with a white edge, big enough for a thumb. The dots between two corners add one. */
.smp-corner {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: #d4e85c;
  border: 0.125rem solid #ffffff;
  box-sizing: border-box;
  cursor: grab;
  touch-action: none;
}
.smp-corner::after {
  content: "";
  position: absolute;
  inset: -0.775rem;
}
.smp-middle {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #ffffff;
  border: 0.125rem solid #d4e85c;
  box-sizing: border-box;
  opacity: 0.9;
}
.smp-middle::after {
  content: "";
  position: absolute;
  inset: -0.7rem;
}
/* A pin on the ground: the middle of a boundary. */
.smp-ground {
  width: 2.75rem;
  height: 3.5rem;
  pointer-events: none;
}
.smp-ground svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Where the phone is. */
.smp-you {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #2f6df0;
  border: 0.1875rem solid #ffffff;
  box-sizing: border-box;
  pointer-events: none;
}
/* Corners and points stay above MapLibre's own controls (the credit), so one under it can still be taken. */
.smp .maplibregl-marker {
  z-index: 3;
}