/**
 * The live location map. The band's base styles (blocks.css) still paint the placeholder
 * grid for an entry with no coordinates; everything here is scoped to --live, which the
 * block only wears when it has a point to draw.
 */

.pwr-b-csmap--live {
	/* Leaflet's panes and controls run to z-index 800 (and the card below to 900). Without a
	   stacking context of their own they compete with the whole page and paint over the fixed
	   header (z-index 100) as the map scrolls under it. Isolated, they only order among
	   themselves — same as the globe band. */
	isolation: isolate;
	min-height: 440px;
	background: var(--wp--preset--color--grey-dark); /* behind the tiles while they load */
}

/* The surface stops being a painted grid and becomes the map container. */
.pwr-b-csmap--live .pwr-b-csmap__surface {
	background: none;
	opacity: 1;
}

/* The location card rides ABOVE the map: Leaflet's panes and controls run to z-index 800. */
.pwr-b-csmap--live .pwr-b-csmap__card {
	z-index: 900;
	pointer-events: none; /* the map stays pannable right up to the card's edge */
}

/* Leaflet draws its own focus/UI type; keep it in the band's family and off the brand ink. */
.pwr-b-csmap--live .leaflet-container {
	font: inherit;
	font-size: 12px;
}

/* The dark map: OSM's light tiles inverted — TILE PANE ONLY, so the orange circle/pin (the
   overlay pane) and the location card keep their true colours. SINGLE-COLOUR (design review,
   15 Oct: "a monotone, dark or light"): saturate(0) takes every hue out, so the tiles read as
   one dark grey drawing and the orange marker is the only colour on the band. It was 0.35,
   which left the parks green and the water blue. */
.pwr-b-csmap--live .leaflet-tile-pane {
	filter: invert(1) hue-rotate(180deg) brightness(0.72) contrast(0.92) saturate(0);
}

/* The card inverts against the dark map (same review: "if we go with a dark map, the callout
   card should be a light card with the text in dark") — a white plate, Deep Grey type, the
   orange eyebrow it already had. The placeholder band (no coordinates) is light, so its card
   stays the ink plate blocks.css gives it. */
.pwr-b-csmap--live .pwr-b-csmap__card {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	filter: drop-shadow(var(--wp--preset--shadow--m-dark));
}