/*
  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.
*/

/*
  Task 256, the one rule in this file that overrides nothing: the ring around the currently selected
  pin's base. It lives here rather than in LeafletMap.razor.css because Leaflet builds every marker's
  own DOM itself, outside Blazor, so a scoped stylesheet's own attribute selector never reaches it —
  the same reason the overrides above cannot be scoped either.

  Drawn as a pseudo-element on the selected marker's own icon (map.js's setSelectedMarker adds the
  class and the custom property together), not as a Leaflet layer of its own: see that function's own
  remarks for why. The icon box is 25x41 with its anchor at (12, 41) — map.js's colouredPinIcon — so
  `left: 12px; bottom: 0` with a half-and-half translate centres the ring exactly on the point the pin
  marks on the map, and it overflows the icon box freely, which nothing clips.

  `z-index: -1` is what puts the ring behind its own pin rather than over it. Leaflet writes an explicit
  `z-index` onto every marker icon (Marker._updateZIndex, from the marker's own projected y), so the icon
  is always its own stacking context and a negative child cannot fall behind the tiles or behind another
  marker — only behind this pin's own SVG. `pointer-events: none` keeps the ring out of hit-testing
  entirely: the pin's own click target stays the 25x41 icon box it already was, so selecting, dragging
  and clustering all see exactly what they saw before.

  The colour is the pin's own group colour, so it cannot be given a contrast ratio here the way every
  override above can — a group may be any hex a caller chose (ADR-0117), including one that vanishes
  against pale tiles or dark ones. The two box-shadows are what make it read regardless, and are why
  this needs nothing from theme.css and behaves identically in light and dark: a near-white ring is
  bounded by the inset dark edge, a near-black one by the outer white edge, and every colour between
  keeps both. The same trick colouredPinIcon and clusterIcon already use for their own outlines.

  The `currentColor` fallback is unreachable in practice — map.js sets the custom property in the same
  call that adds the class — and exists only so a ring whose colour somehow went missing is still
  a visible ring rather than an invisible one.
*/
.leaflet-container .placemark-marker-icon--selected::before {
	content: "";
	position: absolute;
	left: 12px;
	bottom: 0;
	width: 22px;
	height: 22px;
	transform: translate(-50%, 50%);
	border: 3px solid var(--placemark-selection-ring-colour, currentColor);
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	z-index: -1;
}