/* Maps (Leaflet + OpenStreetMap tiles), styled with the app's tokens from urbanx.css. */

.map { height: 190px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); margin-top: 12px; z-index: 0; }
.map-picker { height: 240px; cursor: crosshair; }
.map-link { display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 800; color: var(--ink); }

.map-pin { background: none; border: 0; }
.map-pin span {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px 12px 12px 3px;
  background: var(--deep); border: 2px solid var(--brand); color: #fff; font-size: 16px;
  box-shadow: 0 4px 12px #26372940; transform: rotate(0deg);
}

.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size: 9px; }
[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.8) contrast(1.1) saturate(.85); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-tile-pane { filter: brightness(.8) contrast(1.1) saturate(.85); } }

/* The radar's detail panel */
.selected-map { height: 170px; margin-top: 12px; }
.mobile-detail .selected-map { height: 130px; }

/* Pin picker on the meetup form */
.pick-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 10px; color: var(--muted); }
.pick-row .link-danger { border: 0; background: none; padding: 0; color: var(--red); font: inherit; font-weight: 800; cursor: pointer; }