/* Full-screen map behind the sheet */
.map { position: fixed; inset: 0; z-index: 0; background: var(--color-map-bg); }
/* Map pages are fixed layers (map + sheet); the document itself must never scroll, or iOS
   shifts everything when the keyboard opens. */
html:has(body.page-map), body.page-map { height: 100%; overflow: hidden; overscroll-behavior: none; }
.map__canvas { position: absolute; inset: 0; }
.leaflet-container { font-family: var(--font-sans); background: var(--color-map-bg); }
/* Strictly monochrome base map (lib/map_tiles.js); only the tiles, not our markers/overlays. */
.leaflet-tile-pane { filter: grayscale(1); }

/* Alert area (map_controller#setupArea): screen overlay above tiles and shapes, below
   markers (Leaflet marker pane is z-index 600); taps pass through to the map. */
.map-area-shade {
  position: absolute; inset: 0; z-index: 450; pointer-events: none;
  background: radial-gradient(circle var(--area-r, 0px) at var(--area-x, 50%) var(--area-y, 50%),
                              transparent calc(var(--area-r, 0px) - 0.5px), rgb(0 0 0 / 0.45) var(--area-r, 0px));
}
.map-area-shade::after {
  content: ""; position: absolute; box-sizing: border-box;
  left: calc(var(--area-x) - var(--area-r)); top: calc(var(--area-y) - var(--area-r));
  width: calc(var(--area-r) * 2); height: calc(var(--area-r) * 2);
  border: 2px solid #fff; border-radius: 50%;
}

/* Item dot label (map_controller#itemLabel): dark like the pin labels, one line each */
.map-popup .leaflet-popup-content-wrapper {
  padding: 0; border-radius: var(--radius-pill); background: rgb(80 80 80 / 0.94); color: #fff;
  box-shadow: var(--shadow-md);
}
.map-popup .leaflet-popup-content { margin: 0; line-height: var(--leading-tight); }
.map-popup .leaflet-popup-tip { background: rgb(80 80 80 / 0.94); box-shadow: none; }
/* .leaflet-container prefix beats Leaflet's own `.leaflet-container a` link color */
.leaflet-container .map-popup__link {
  display: flex; flex-direction: column; gap: 2px; max-width: 220px;
  padding: var(--space-2) var(--space-5); color: #fff; text-decoration: none;
}
.map-popup__title, .map-popup__subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-popup__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.map-popup__subtitle { font-size: var(--text-xs); opacity: 0.8; }

/* Divicon pins (featured meetings and the ad) */
.map-pin-icon { background: none; border: 0; }
.map--area .map-pin-icon { cursor: grab; pointer-events: none; } /* not clickable under the Alert Me circle */
.map-pin { position: relative; width: 40px; height: 52px; }
.map-pin__shape { position: absolute; inset: 0; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.25)); }
.map-pin__text {
  position: absolute; top: 10px; left: 0; right: 0; text-align: center;
  font-size: var(--text-xs); font-weight: var(--weight-bold); color: #fff;
}
.map-pin__label {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%);
  max-width: 180px; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill); background: rgb(80 80 80 / 0.92); color: #fff;
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}