/* Final map surface: memory-first, crisp while moving, and calm at every zoom. */
html body main.app-shell section.map-stage.map-focus,
html body main.app-shell section.map-stage.map-focus #map,
html body main.app-shell section.map-stage.map-focus #map.maplibregl-map,
html body main.app-shell section.map-stage.map-focus .maplibregl-canvas-container {
  background: #dcece7 !important;
}

html body main.app-shell section.map-stage.map-focus .maplibregl-canvas {
  filter: none !important;
  opacity: 1 !important;
  image-rendering: auto !important;
}

/* Memory pins remain crisp and anchored while the WebGL map moves beneath them. */
html body main.app-shell section.map-stage.map-focus .maplibregl-marker.mymappi-memory-pin-icon {
  width: 30px !important;
  height: 45px !important;
  contain: layout size !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
}

html body main.app-shell section.map-stage.map-focus .mymappi-pin-only .memory-pin-svg {
  filter: drop-shadow(0 1.5px 1.5px rgba(4, 47, 58, 0.16)) !important;
}

html body main.app-shell section.map-stage.map-focus .mymappi-pin-only .memory-pin-rim {
  stroke: rgba(255, 255, 255, 0.78) !important;
  stroke-width: 1.05px !important;
}

html body main.app-shell section.map-stage.map-focus .mymappi-pin-only .memory-pin-body {
  stroke: color-mix(in srgb, var(--marker-color, #18a978) 66%, #063644 34%) !important;
  stroke-width: 0.9px !important;
}

html body main.app-shell section.map-stage.map-focus.map-interacting .mymappi-pin-only .memory-pin-svg,
html body main.app-shell section.map-stage.map-focus.map-zooming .mymappi-pin-only .memory-pin-svg {
  filter: none !important;
}

html body main.app-shell section.map-stage.map-focus.map-interacting .mymappi-pin-only,
html body main.app-shell section.map-stage.map-focus.map-zooming .mymappi-pin-only {
  opacity: 0.96 !important;
}

/* Grouped memories use one compact, readable marker without blur or bloom. */
html body main.app-shell section.map-stage.map-focus .maplibregl-marker:has(.memory-cluster-marker),
html body main.app-shell section.map-stage.map-focus .memory-cluster-marker,
html body main.app-shell section.map-stage.map-focus .memory-cluster-marker.constellation-cluster {
  width: 60px !important;
  min-width: 60px !important;
  height: 36px !important;
  min-height: 36px !important;
}

html body main.app-shell section.map-stage.map-focus .memory-cluster-marker,
html body main.app-shell section.map-stage.map-focus .memory-cluster-marker.constellation-cluster {
  grid-template-columns: 19px minmax(18px, auto) !important;
  gap: 5px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--marker-color, #18a978) 76%, #0a5962 24%),
      color-mix(in srgb, var(--marker-color, #18a978) 86%, #0b4352 14%)) !important;
  box-shadow: 0 4px 11px rgba(4, 45, 55, 0.16) !important;
  filter: none !important;
  transform: translateZ(0) !important;
}

html body main.app-shell section.map-stage.map-focus .memory-cluster-marker .cluster-count {
  font-size: 12.5px !important;
  font-weight: 850 !important;
}

html body main.app-shell section.map-stage.map-focus.map-interacting .memory-cluster-marker,
html body main.app-shell section.map-stage.map-focus.map-zooming .memory-cluster-marker {
  box-shadow: none !important;
  filter: none !important;
  opacity: 0.97 !important;
}

/* Live location reads as exact and premium, without overpowering a memory pin. */
html body main.app-shell section.map-stage.map-focus .user-location-dot-core {
  width: 13px !important;
  height: 13px !important;
  border-width: 1.5px !important;
  box-shadow:
    0 3px 8px rgba(4, 79, 171, 0.24),
    0 0 0 1px rgba(22, 118, 239, 0.14) !important;
}

html body main.app-shell section.map-stage.map-focus .user-location-heading {
  width: 14px !important;
  height: 22px !important;
}

/* Quiet focus feedback belongs to the controls, not over the map itself. */
html body main.app-shell section.map-stage.map-focus .map-navigation-gadget > * {
  transition: background-color 150ms ease, color 150ms ease !important;
}

html body main.app-shell section.map-stage.map-focus .map-navigation-gadget > *:active {
  background: rgba(101, 226, 194, 0.25) !important;
}

@media (max-width: 720px) {
  html body main.app-shell section.map-stage.map-focus .memory-cluster-marker,
  html body main.app-shell section.map-stage.map-focus .memory-cluster-marker.constellation-cluster,
  html body main.app-shell section.map-stage.map-focus .maplibregl-marker:has(.memory-cluster-marker) {
    width: 58px !important;
    min-width: 58px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body main.app-shell section.map-stage.map-focus .mymappi-pin-only,
  html body main.app-shell section.map-stage.map-focus .memory-cluster-marker,
  html body main.app-shell section.map-stage.map-focus .map-navigation-gadget > * {
    animation: none !important;
    transition: none !important;
  }
}