/*
 * The listings on a slippy map, with the price as the marker.
 *
 * The panel used to be a plain box with the coordinates projected linearly onto
 * it. That showed relative positions and nothing else — no streets, no river,
 * no relief. For a tool built around "is this away from a centre", the
 * background is where the answer lives, so the tiles earn their keep.
 *
 * Leaflet draws the markers into its own overlay pane; the styles below apply
 * to the span inside each divIcon, which is ours.
 */

.map-panel {
  flex: none;
  height: 44%;
  min-height: 14rem;
  position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--surface-sunken);
}

.map-panel__canvas {
  position: absolute;
  inset: 0;
}

/* Leaflet's marker anchor is the icon's top-left corner and the pill has no
 * fixed width, so it is centred here rather than through an anchor offset. */
.map-panel__pin {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1.5px solid var(--accent);
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}

/* Guarded because it moves geometry, not just colour: a pin left enlarged after
 * a tap sits over its neighbours and hides them. */
@media (hover: hover) and (pointer: fine) {
  .map-panel__pin:hover {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

.map-panel__pin--selected {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* The selected marker must sit above its neighbours, and z-index on the pill
 * itself cannot do that: Leaflet stacks the marker panes, not their contents. */
.leaflet-marker-icon:has(.map-panel__pin--selected) {
  z-index: 1000 !important;
}

.map-panel__notice {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 500;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.map-panel__notice b {
  color: var(--ink);
}

/* Leaflet's own chrome, brought into the theme. */
.map-panel .leaflet-control-attribution {
  font-size: 0.625rem;
  background: var(--surface);
  color: var(--ink-faint);
}

.map-panel .leaflet-control-attribution a {
  color: var(--ink-muted);
}

.map-panel .leaflet-bar a {
  background: var(--surface);
  color: var(--ink);
  border-bottom-color: var(--line);
}