/*
  Leaflet's own controls (lib/leaflet/leaflet.css) hardcode a light palette with no awareness of
  theme.css's custom properties or of prefers-color-scheme (task 246). That file is vendored and
  licensed separately, so it is never edited directly — every rule below overrides it from here
  instead, consuming the same tokens theme.css already defines rather than inventing a second
  palette. Each selector is qualified with `.leaflet-container` (or, where the vendor rule itself
  is gated on it, `.leaflet-container.leaflet-touch`) purely to outrank the vendor rule it replaces
  on specificity, so the override holds regardless of the two stylesheets' relative link order.

  Popups and tooltips have no rule here: map.js never calls bindPopup or bindTooltip, so Leaflet
  never renders either. Cluster markers (lib/leaflet.markercluster/MarkerCluster.css) also have no
  rule here — that stylesheet carries only the plugin's spiderfy/expand transitions, not its default
  green/yellow/orange cluster classes (MarkerCluster.Default.css, deliberately not linked — see
  index.html's comment). map.js draws clusters as an inline-SVG divIcon (clusterIcon, ADR-0130) with
  an explicit fill and a solid white stroke, so a cluster already carries its own colour and reads
  against light or dark alike without help from either stylesheet.
*/

.leaflet-container .leaflet-bar a {
	background-color: var(--colour-surface);
	border-bottom-color: var(--colour-control-border);
	color: var(--colour-text);
}
/*
  Glyph (--colour-text on --colour-surface): 17.09:1 light, 13.70:1 dark.
  Divider (--colour-control-border on --colour-surface): 3.30:1 light, 3.33:1 dark — the same pairing
  and ratios ADR-0087 already measured for a text input's own boundary, reused here rather than
  computing a second "control border" value.
*/

.leaflet-container .leaflet-bar a:hover,
.leaflet-container .leaflet-bar a:focus {
	background-color: var(--colour-surface-hover);
}

.leaflet-container .leaflet-bar a.leaflet-disabled {
	background-color: var(--colour-surface-hover);
	color: var(--colour-text-muted);
}
/*
  --colour-text-muted on --colour-surface: 5.82:1 light, 6.97:1 dark — visibly dimmer than the
  enabled glyph's 17.09:1 / 13.70:1 above without fading to illegible, which is what distinguishes
  disabled from enabled here rather than the background (--colour-surface-hover is the same fill
  used on hover/focus above; the vendor rule this replaces reused a single grey for both states too).
*/

.leaflet-container.leaflet-touch .leaflet-bar {
	border-color: var(--colour-control-border);
}

.leaflet-container .leaflet-control-attribution {
	background: var(--colour-surface);
	border: 1px solid var(--colour-border);
	border-radius: var(--radius);
	color: var(--colour-text-muted);
}
/*
  Opaque, not the vendor's translucent white-on-tiles, because legibility here is an OSM
  tile-usage-policy obligation and a translucent fill cannot guarantee contrast against tiles of
  unknown colour. --colour-text-muted on --colour-surface: 5.82:1 light, 6.97:1 dark — both above
  WCAG AA's 4.5:1 for text this size, not merely the 3:1 floor that would suffice for a non-text
  boundary.
*/

.leaflet-container .leaflet-control-attribution a {
	color: var(--colour-accent);
}
/*
  Needed despite app.css already setting `a { color: var(--colour-accent) }` globally: leaflet.css's
  own `.leaflet-container a { color: #0078A8 }` outranks that plain-tag rule on specificity
  regardless of stylesheet order, so the attribution link was never actually themed.
  --colour-accent on --colour-surface: 5.18:1 light, 6.83:1 dark.
*/