/* On-map base-map switcher (top-right Leaflet control): a compact segmented
   toggle matching the header's view-mode toggles, so map types are one tap
   away instead of buried in the filters. Top-right keeps it clear of the
   attribution, which wraps across the bottom on narrow phones. */
.map-style-control {
  display: inline-flex;
  align-items: stretch;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px -2px rgba(9, 22, 36, 0.35);
}

.map-style-control__option {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* >=40px touch target for this primary map action (WCAG target size). */
  min-height: 40px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.map-style-control__option[aria-pressed='true'] {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

/* Form controls (single-row selects and the numeric range inputs): 36px
   comfortable baseline everywhere; the touch-first block below raises them
   to the full 44px. Multi-row list selects keep their native sizing. */
#filters select:not([multiple]),
#filters input[type='number'],
#results-sort {
  min-height: 2.25rem;
}

/* Touch-first contexts (coarse pointers, or phone/tablet widths where touch
   is likely): raise the on-map primary actions and form controls to the full
   44px target. Desktop mouse users keep Leaflet's compact 30px zoom buttons,
   which clear WCAG 2.5.8's 24px minimum. The .leaflet-touch selector is
   needed to outrank Leaflet's own .leaflet-touch .leaflet-bar a sizing on
   touch devices. */
@media (pointer: coarse), (max-width: 1024px) {
  .leaflet-control-zoom a,
  .leaflet-touch .leaflet-control-zoom a {
    width: 2.75rem;
    height: 2.75rem;
    line-height: 2.75rem;
  }

  .map-style-control__option {
    min-height: 2.75rem;
  }

  #filters select:not([multiple]),
  #filters input[type='number'],
  #results-sort {
    min-height: 2.75rem;
  }
}

.map-style-control__option[aria-pressed='false']:hover {
  color: var(--text);
  background: var(--accent-soft);
}

.map-style-control__option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}