/* =========================================================
   THE HERTSPARTNERS MAP SHELL

   One definition of what a HertsPartners map looks like, shared by every map
   on the site: the frame, the glow, the brand mark, the loading state, the
   controls, the details sheet and the dark-mode treatment.

   Extracted from heartbeat.css so it can be loaded anywhere a map appears.
   It used to live there, which was fine while the only maps were on the
   homepage and Heartbeat -- but Safe Water's reporting map is on a petition
   page, and a shared look that only loads on two routes is not shared.

   What belongs here is the SHELL. What does not is any feature's own data or
   markers: the business heart, the Heartbeat signal pin and the Safe Water
   droplet each stay with their own feature, which is why the three maps look
   like one product without ever being able to show each other's data.
   ========================================================= */

/* One shared HertsPartners map surface for Homepage and Heartbeat. */
.hp-local-map {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 1px solid rgba(124, 58, 237, .22);
	border-radius: 34px;
	background: #eae4f8;
	box-shadow: 0 30px 84px rgba(68, 35, 125, .17), 0 0 0 8px rgba(124,58,237,.035);
}

.hp-local-map::after {
	position: absolute;
	inset: 0;
	z-index: 410;
	border: 1px solid rgba(255,255,255,.62);
	border-radius: inherit;
	box-shadow: inset 0 0 60px rgba(91,52,158,.07);
	content: "";
	pointer-events: none;
}

.hp-local-map__glow {
	position: absolute;
	z-index: 411;
	top: -100px;
	left: 20%;
	width: 60%;
	height: 160px;
	border-radius: 50%;
	background: rgba(151, 104, 255, .2);
	filter: blur(55px);
	pointer-events: none;
}

.hp-local-map__canvas { min-height: 550px; }
.hp-local-map--homepage { margin: 30px 0 22px; }
.hp-local-map--homepage .hp-local-map__canvas { min-height: clamp(520px, 56vw, 650px); }

.hp-local-map .leaflet-tile-pane {
	filter: saturate(.62) hue-rotate(218deg) brightness(1.06) contrast(.9);
}

.hp-local-map .leaflet-control-zoom {
	overflow: hidden;
	border: 1px solid rgba(124,58,237,.15) !important;
	border-radius: 15px !important;
	box-shadow: 0 12px 30px rgba(54,31,96,.15) !important;
}

.hp-local-map .leaflet-control-zoom a {
	width: 38px;
	height: 38px;
	border-color: #eee8fb;
	background: rgba(255,255,255,.94);
	color: #5b28b4;
	font-weight: 700;
	line-height: 38px;
}

.hp-local-map .leaflet-top.leaflet-left { top: 72px; left: 12px; }
.hp-local-map .leaflet-control-attribution { padding: 3px 8px; background: rgba(255,255,255,.86); font-size: 10px; }

.hp-local-map__brand {
	position: absolute;
	z-index: 500;
	top: 16px;
	left: 16px;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 13px;
	border: 1px solid rgba(124,58,237,.12);
	border-radius: 999px;
	background: rgba(255,255,255,.94);
	box-shadow: 0 10px 28px rgba(46,25,83,.13);
	color: #2a1948;
	font-size: .78rem;
	font-weight: 850;
	backdrop-filter: blur(12px);
}

.hp-local-map__brand img { width: 25px; height: 25px; object-fit: contain; }

.hp-local-map__status {
	position: absolute;
	z-index: 500;
	top: 17px;
	right: 16px;
	max-width: min(420px, calc(100% - 260px));
	margin: 0;
	padding: 9px 14px;
	border: 1px solid rgba(124,58,237,.1);
	border-radius: 999px;
	background: rgba(255,255,255,.94);
	box-shadow: 0 8px 24px rgba(25,14,50,.1);
	color: #35255c;
	font-size: .75rem;
	font-weight: 750;
	text-align: center;
	backdrop-filter: blur(12px);
}

.hp-local-map__facts {
	position: absolute;
	z-index: 500;
	right: 18px;
	bottom: 18px;
	left: 18px;
	display: flex;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}

.hp-local-map__facts > span {
	padding: 10px 13px;
	border: 1px solid rgba(124,58,237,.1);
	border-radius: 999px;
	background: rgba(255,255,255,.94);
	box-shadow: 0 9px 26px rgba(41,22,76,.12);
	color: #4b3b63;
	font-size: .75rem;
	font-weight: 650;
	backdrop-filter: blur(12px);
}

.hp-local-map__facts strong { color: #5b21b6; font-size: .86rem; }
.hp-local-map__facts-live { display: inline-flex; align-items: center; gap: 7px; }
.hp-local-map__facts-live i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 5px rgba(34,197,94,.1); }

.hp-local-map__sheet {
	position: absolute;
	z-index: 610;
	right: 18px;
	bottom: 76px;
	width: min(350px, calc(100% - 36px));
	padding: 23px;
	border: 1px solid rgba(124,58,237,.16);
	border-radius: 24px;
	background: rgba(255,255,255,.97);
	box-shadow: 0 24px 70px rgba(30,17,60,.25);
	animation: hp-map-sheet-in .28s cubic-bezier(.2,.75,.3,1) both;
	backdrop-filter: blur(16px);
}

.hp-local-map__sheet[hidden] { display: none; }
.hp-local-map__sheet h3 { margin: 4px 34px 4px 0; font-size: 1.3rem; }
.hp-local-map__sheet > p { margin: 0 0 14px; color: var(--hp-color-text-muted); }
.hp-local-map__sheet .hp-local-map__eyebrow { color: var(--hp-color-primary-600); font-size: .75rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }

/* Wave 6 mobile touch-target audit (2026-08-20): was 38px, under the D004
   44px minimum. The sheet's own 23px padding leaves ample clearance for
   the extra 6px. */
/* Compound `button.` selector (2026-09-16): hello-elementor's reset.css styles
   `[type=button], [type=submit], button` -- an attribute selector carrying the
   same specificity as a single class -- and it is enqueued AFTER every child
   theme stylesheet, so a bare `.hp-local-map__close` lost the cascade and the
   map's close control rendered as the parent theme's crimson default button.
   Same fix, same reason, as the Partner Hub CV/Live Signals buttons. */
.hp-local-map__close,
button.hp-local-map__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #f1ebff;
	color: #4c258f;
	font-size: 1.45rem;
	cursor: pointer;
}

.hp-local-map-marker,
.hp-local-map-cluster {
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
}

.hp-local-map-marker span,
.hp-local-map-cluster span {
	position: relative;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255,255,255,.88);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 26%, #bd8cff 0%, #7c3aed 39%, #4c1d95 72%, #251044 100%);
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.2), inset 0 -8px 15px rgba(30,7,65,.23), 0 10px 26px rgba(73,32,141,.4), 0 0 0 5px rgba(124,58,237,.1);
	color: #fff;
	font-weight: 850;
	filter: drop-shadow(0 4px 3px rgba(45,24,82,.2));
}

.hp-local-map-marker span::before,
.hp-local-map-cluster span::before {
	position: absolute;
	inset: 5px;
	border: 1px solid rgba(255,255,255,.42);
	border-radius: 50%;
	content: "";
}

.hp-local-map-marker span::after,
.hp-local-map-cluster span::after {
	position: absolute;
	inset: -7px;
	z-index: -1;
	border: 1px solid rgba(124,58,237,.22);
	border-radius: 50%;
	content: "";
}

.hp-local-map-marker span > img,
.hp-local-map-cluster span > img {
	position: absolute;
	inset: 3px;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	object-fit: contain;
	filter: saturate(1.05) contrast(1.04) drop-shadow(0 3px 5px rgba(39,13,76,.24));
}

.hp-local-map-marker span {
	width: 38px;
	height: 38px;
}

.hp-local-map-marker span i {
	position: relative;
	z-index: 1;
	display: block;
	width: 21px;
	height: 12px;
	background: #fff;
	clip-path: polygon(0 44%, 20% 44%, 29% 20%, 38% 68%, 48% 6%, 59% 82%, 69% 38%, 77% 44%, 100% 44%, 100% 58%, 73% 58%, 64% 53%, 59% 72%, 47% 100%, 38% 43%, 34% 67%, 25% 58%, 0 58%);
}

.hp-local-map-cluster span {
	width: 58px;
	height: 58px;
	font-size: .82rem;
}

.hp-local-map-cluster b { position: relative; z-index: 1; padding: 4px 6px; border-radius: 999px; background: rgba(54,18,112,.72); box-shadow: 0 3px 9px rgba(26,7,55,.24); color: #fff; font: inherit; line-height: 1; }
.hp-local-map-cluster span::after { animation: hp-map-beacon-ring 2.4s ease-out infinite; }
.hp-local-map-marker:hover span,
.hp-local-map-marker:focus-visible span,
.hp-local-map-cluster:hover span,
.hp-local-map-cluster:focus-visible span { transform: translateY(-2px) scale(1.08); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 14px 32px rgba(73,32,141,.5), 0 0 0 7px rgba(124,58,237,.13); }

.hp-local-map__tooltip {
	padding: 8px 11px;
	border: 1px solid rgba(124,58,237,.16);
	border-radius: 12px;
	background: rgba(255,255,255,.96);
	box-shadow: 0 12px 30px rgba(38,20,70,.16);
	color: #352255;
	font-size: .72rem;
	font-weight: 750;
}
.hp-local-map__tooltip::before { display: none; }

/* Business detail pages keep Directorist's one real coordinate-backed map,
   but place that canvas inside the same HertsPartners shell used by the
   homepage. No location means Directorist emits no canvas and this component
   does not appear. */
.hp-local-map--business {
	margin: 0;
	border-radius: var(--hp-radius-lg, 24px);
}
.hp-local-map--business .hp-local-map__canvas {
	width: 100%;
	height: clamp(340px, 40vw, 440px) !important;
	min-height: 340px;
	border: 0;
	border-radius: inherit;
}
.hp-local-map--business .hp-local-map__status { pointer-events: none; }
.hp-local-map-marker--directorist { filter: none !important; }

.hp-local-map-marker.hp-is-selected span,
.hp-local-map-cluster.hp-is-selected span { animation: hp-map-heart-pulse .72s ease-in-out 2; }

@keyframes hp-map-heart-pulse {
	0%, 100% { transform: scale(1); }
	45% { transform: scale(1.16); }
}

@keyframes hp-map-beacon-ring {
	0% { opacity: .7; transform: scale(.82); }
	75%, 100% { opacity: 0; transform: scale(1.35); }
}

@keyframes hp-map-sheet-in {
	from { opacity: 0; transform: translateY(14px) scale(.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hp-heartbeat-card-arrive {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

.hp-home-discovery-panel .hp-local-map { margin-bottom: 22px; }

/*
 * Owner directive (2026-08-15): a genuinely purpose-built mobile
 * composition, not the desktop six-node physical orbit shrunk down.
 * Compact hero, a swipeable ambient rail instead of a vertical stack,
 * and the radar itself becomes status-pill -> heart -> a labeled 3x2
 * category grid, all using the SAME markup as desktop (grid-area
 * reassignment + position:static overrides) so there is one source of
 * truth, not a parallel mobile template.
 */
@media (max-width: 760px) {
	.hp-heartbeat__shell { width: min(100% - 28px, 1180px); }
	.hp-heartbeat__hero { padding: 18px 0 14px; }

	/*
	 * Owner directive (2026-08-15): "first screen = Heartbeat, scroll =
	 * extras" -- the heart and category grid must appear immediately
	 * after the title, not after a full hero + stacked telemetry
	 * section. Reordered via flex `order` on the hero's own shell, not
	 * a markup change, so desktop's source order (and its own separate
	 * unrelated .hp-heartbeat__shell instances further down the page)
	 * stay completely untouched.
	 */
	.hp-heartbeat__hero .hp-heartbeat__shell { display: flex; flex-direction: column; }
	.hp-heartbeat__eyebrow { order: 1; }
	.hp-heartbeat h1 { order: 2; font-size: clamp(2rem, 10vw, 2.6rem); }
	.hp-heartbeat__tagline { order: 3; margin-top: 2px; font-size: .96rem; }
	.hp-heartbeat-radar { order: 4; margin-top: 4px; }
	.hp-heartbeat-ambient { order: 5; margin-top: 18px; }
	/* Demoted: shorter, quieter, and now genuinely below the primary
	 * instrument -- was competing with the heart for first-screen space. */
	.hp-heartbeat__intro { order: 6; margin-top: 10px; font-size: .76rem; opacity: .78; }
	/* Regression fix: the reorder pass above replaced the original
	 * "display: none" rule for these pills with just an order value --
	 * real iPhone screenshots showed them reappearing below the fold,
	 * reading as leftover marketing copy after the new app-style
	 * instrument. Restoring the original intent: never shown on mobile. */
	.hp-heartbeat-trust { display: none; order: 7; }

	/*
	 * Owner directive (2026-08-15), item 2: no horizontal swipe/scroll
	 * for basic status reading -- a genuine 2-column grid instead, both
	 * cards visible at once, no clipped/faded edge. The odd-item-last
	 * selector below spans a genuinely lone third card (Community, most
	 * of the time, since Weather is usually absent) across both columns
	 * rather than leaving it stranded alone in the left column; with an
	 * even count (e.g. once Weather is also fresh) every card just
	 * pairs up normally.
	 */
	.hp-heartbeat-ambient {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: start;
		gap: 8px;
	}
	.hp-heartbeat-ambient__chip:nth-child(odd):last-child { grid-column: 1 / -1; }
	.hp-heartbeat-ambient__chip { width: auto; padding: 10px 12px; }
	/* Real content needs more than one line at this width -- wrapping
	 * beats truncating, and the grid has vertical room to spare. */
	.hp-heartbeat-ambient__body strong,
	.hp-heartbeat-ambient__body small { overflow: visible; white-space: normal; text-overflow: clip; }
	.hp-heartbeat-ambient__body strong { font-size: .76rem; }
	.hp-heartbeat-ambient__body small { font-size: .64rem; }
	.hp-heartbeat-connector { display: none; }

	.hp-heartbeat-radar {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			"status status status"
			"heart heart heart"
			"panel panel panel"
			"n1 n2 n3"
			"n4 n5 n6";
		gap: 10px 9px;
		width: 100%;
		min-height: 0;
		margin-top: 8px;
		padding: 0;
		place-items: stretch center;
	}
	.hp-heartbeat-radar__grid { inset: 0; }
	/*
	 * Owner directive (2026-08-15), item 1: real iPhone screenshots
	 * showed a stray line poking out past the ring toward the screen
	 * edge -- the ::before/::after "energy line" decorations below stay
	 * a fixed 260px wide (tuned for the desktop radar's much bigger
	 * ring), so on a ring this small they extended far past its own
	 * edge instead of sitting inside it. No equivalent decoration is
	 * worth keeping at this size -- removed outright rather than
	 * rescaled, since a soft ring + the heart's own halo already read
	 * as "radar energy" without them. Ring itself sized to sit clearly
	 * inside the gap above/below (not touching the status badge or the
	 * category grid) rather than the desktop's much larger relative
	 * spread.
	 */
	/* grid-area: heart (shared with the heart itself) + inset:0 + auto
	 * margins centers this exactly on the heart regardless of how tall
	 * the status badge above happens to render -- a fixed pixel offset
	 * would drift out of alignment whenever that badge's content wraps
	 * to a different number of lines. */
	.hp-heartbeat-radar__rings { grid-area: heart; position: absolute; inset: 0; margin: auto; width: 138px; height: 138px; box-shadow: 0 0 0 16px rgba(124,58,237,.045), 0 0 0 32px rgba(124,58,237,.025); }
	.hp-heartbeat-radar__rings::before,
	.hp-heartbeat-radar__rings::after { display: none; }

	/* Owner directive, item 6: "reviewed signal" + location merged into
	 * one compact badge that belongs to the heart, not two elements
	 * floating in unrelated places. Same two real elements as desktop
	 * (position:absolute there, so this reordering/wrapping is a no-op
	 * for that layout) -- just given a shared pill here instead of one
	 * each. */
	.hp-heartbeat-radar__status {
		grid-area: status;
		z-index: 4;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 9px 18px;
		border: 1px solid rgba(124, 58, 237, .14);
		border-radius: 18px;
		background: rgba(255, 255, 255, .94);
		box-shadow: 0 12px 30px rgba(57, 33, 99, .1);
	}
	.hp-heartbeat-radar__signal-state,
	.hp-heartbeat-radar__location {
		position: static;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}
	.hp-heartbeat-radar__location { gap: 5px; font-size: .78rem; }
	/* The signal-state line above already carries the live-status dot --
	 * a second one right below reads as redundant in a stacked badge. */
	.hp-heartbeat-radar__location > span { display: none; }
	/* Kept for screen readers rather than display:none -- "Publication-
	 * gated intelligence" is real methodology context, just not
	 * prominent resident-facing copy on a small screen. */
	.hp-heartbeat-radar__location small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

	.hp-heartbeat-radar__heart { grid-area: heart; position: relative; top: auto; left: auto; width: 116px; height: 116px; margin: 4px 0; }
	.hp-heartbeat-radar__heart img { width: 56px; height: 56px; }

	/* Owner directive, item 4: a labelled 3x2 grid -- icon, label AND
	 * count all visible -- not icon-only circles with a number badge. */
	.hp-heartbeat-node {
		position: relative;
		top: auto; right: auto; bottom: auto; left: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		width: 100%;
		min-width: 0;
		padding: 12px 6px;
		border-bottom-width: 2px;
		text-align: center;
	}
	.hp-heartbeat-node::after { display: none; }
	.hp-heartbeat-node:hover, .hp-heartbeat-node:focus-visible { transform: none; }
	.hp-heartbeat-node > i { width: 36px; height: 36px; }
	.hp-heartbeat-node > span { display: flex; flex-direction: column; align-items: center; gap: 1px; }
	.hp-heartbeat-node b { order: 1; font-size: .68rem; line-height: 1.2; }
	.hp-heartbeat-node strong, .hp-heartbeat-node small { display: none; }
	.hp-heartbeat-node__adaptive { display: block; order: 2; color: var(--hp-color-text-muted); font-size: .64rem; font-style: normal; font-weight: 700; }
	/* Owner directive, item 4: "a little more visual separation and
	 * subtle category-colour personality" -- a thin bottom accent in
	 * each tile's own already-established icon colour (same palette as
	 * desktop's node icons), not a new colour system. */
	.hp-heartbeat-node--one { grid-area: n1; }
	.hp-heartbeat-node--two { grid-area: n2; }
	.hp-heartbeat-node--three { grid-area: n3; }
	.hp-heartbeat-node--four { grid-area: n4; }
	.hp-heartbeat-node--five { grid-area: n5; }
	.hp-heartbeat-node--six { grid-area: n6; }
	.hp-heartbeat-node { border-bottom-color: rgba(var(--hp-heartbeat-node-rgb), .3); }

	/* Keep the approved three-column mobile rhythm while centring incomplete
	 * AUTO rows instead of leaving a lone card stranded on the left. */
	.hp-heartbeat-radar[data-subject-count="1"] .hp-heartbeat-node--one { grid-area: auto; grid-row: 4; grid-column: 2; }
	.hp-heartbeat-radar[data-subject-count="2"] .hp-heartbeat-node--one { grid-area: auto; grid-row: 4; grid-column: 1; }
	.hp-heartbeat-radar[data-subject-count="2"] .hp-heartbeat-node--two { grid-area: auto; grid-row: 4; grid-column: 3; }
	.hp-heartbeat-radar[data-subject-count="4"] .hp-heartbeat-node--four { grid-area: auto; grid-row: 5; grid-column: 2; }
	.hp-heartbeat-radar[data-subject-count="5"] .hp-heartbeat-node--four { grid-area: auto; grid-row: 5; grid-column: 1; }
	.hp-heartbeat-radar[data-subject-count="5"] .hp-heartbeat-node--five { grid-area: auto; grid-row: 5; grid-column: 3; }

	/* Owner directive (2026-08-15), item 5: tapping the heart reveals
	 * this panel (progressive enhancement -- see heartbeat.js; the
	 * heart stays a real <a href="#..."> throughout, so this degrades
	 * to "tap scrolls straight to the feed" with the script blocked).
	 * `hidden` collapses the grid row to 0 height on its own, so no
	 * height transition is needed to avoid a layout jump. */
	.hp-heartbeat-radar__heart { cursor: pointer; }
	.hp-heartbeat-radar__heart-panel {
		grid-area: panel;
		z-index: 4;
		width: min(100%, 300px);
		margin: -4px 0 2px;
		padding: 14px 18px;
		border: 1px solid rgba(124, 58, 237, .16);
		border-radius: 18px;
		background: rgba(255, 255, 255, .96);
		box-shadow: 0 16px 40px rgba(57, 33, 99, .14);
		text-align: center;
		animation: hp-heartbeat-panel-in .22s cubic-bezier(.2, .75, .3, 1) both;
	}
	.hp-heartbeat-radar__heart-panel-status {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		margin: 0;
		color: #211537;
		font-size: .82rem;
		font-weight: 800;
	}
	.hp-heartbeat-radar__heart-panel-status i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.14); }
	.hp-heartbeat-radar__heart-panel-location { margin: 4px 0 0; color: var(--hp-color-primary-700); font-size: .78rem; font-weight: 750; }
	.hp-heartbeat-radar__heart-panel-latest-label { margin: 10px 0 0; color: var(--hp-color-primary-600); font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
	.hp-heartbeat-radar__heart-panel-detail { margin: 4px 0 0; color: var(--hp-color-text-muted); font-size: .74rem; font-weight: 650; }
	.hp-heartbeat-radar__heart-panel-link {
		display: inline-block;
		margin-top: 10px;
		padding: 8px 16px;
		border-radius: 999px;
		background: #f1eaff;
		color: #6d28d9;
		font-size: .74rem;
		font-weight: 800;
		text-decoration: none;
	}

	@keyframes hp-heartbeat-panel-in {
		from { opacity: 0; transform: translateY(-6px); }
		to { opacity: 1; transform: translateY(0); }
	}

	/* Rings briefly energise and the category grid subtly illuminates
	 * while the panel is open -- "activating the system", not a static
	 * page jump. */
	.hp-heartbeat-radar--energised .hp-heartbeat-radar__rings {
		border-color: rgba(124, 58, 237, .38);
		box-shadow:
			0 0 0 22px rgba(124, 58, 237, .09),
			0 0 0 44px rgba(124, 58, 237, .05),
			0 28px 80px rgba(105, 54, 198, .18);
		transition: border-color .3s ease, box-shadow .3s ease;
	}
	.hp-heartbeat-radar--energised .hp-heartbeat-node {
		border-color: rgba(124, 58, 237, .28);
		box-shadow: 0 18px 46px rgba(43, 26, 80, .09), 0 0 0 3px rgba(124, 58, 237, .05);
		transition: border-color .3s ease, box-shadow .3s ease;
	}
	/* Owner directive (2026-08-15), item 3: the six tiles illuminate in
	 * sequence rather than all snapping on together -- a small, quick
	 * ripple outward from the heart instead of a single flat toggle. */
	.hp-heartbeat-radar--energised .hp-heartbeat-node--one,
	.hp-heartbeat-radar--energised .hp-heartbeat-node--two { transition-delay: .04s; }
	.hp-heartbeat-radar--energised .hp-heartbeat-node--three,
	.hp-heartbeat-radar--energised .hp-heartbeat-node--four { transition-delay: .1s; }
	.hp-heartbeat-radar--energised .hp-heartbeat-node--five,
	.hp-heartbeat-radar--energised .hp-heartbeat-node--six { transition-delay: .16s; }
	.hp-heartbeat-radar__heart.is-pulsing { animation: hp-heartbeat-lubdub-live 1.08s ease-in-out 1; }

	.hp-heartbeat__section-heading { align-items: flex-start; flex-direction: column; }
	.hp-heartbeat-insight { grid-template-columns: auto 1fr; padding: 16px; }
	.hp-heartbeat-insight__link { grid-column: 1 / -1; padding-left: 62px; white-space: normal; }
	.hp-heartbeat-feed { grid-template-columns: 1fr; }
	.hp-heartbeat__empty { grid-template-columns: auto 1fr; }
	.hp-heartbeat__empty .hp-c-btn { grid-column: 1 / -1; width: 100%; }
	.hp-local-map { border-radius: 25px; }
	.hp-local-map__canvas,
	.hp-local-map--homepage .hp-local-map__canvas { min-height: 520px; }
	.hp-local-map__brand { top: 12px; left: 12px; padding: 8px 10px; }
	.hp-local-map__brand span { display: none; }
	.hp-local-map__status { top: 12px; right: 12px; max-width: calc(100% - 72px); font-size: .69rem; }
	.hp-local-map .leaflet-top.leaflet-left { top: 62px; left: 6px; }
	.hp-local-map__facts { right: 10px; bottom: 10px; left: 10px; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
	.hp-local-map__facts::-webkit-scrollbar { display: none; }
	.hp-local-map__facts > span { flex: 0 0 auto; padding: 8px 10px; }
	.hp-local-map__facts-live { display: none !important; }
	.hp-local-map__sheet { right: 10px; bottom: 62px; width: calc(100% - 20px); }
}

@media (max-width: 340px) {
	.hp-heartbeat-radar { grid-template-columns: repeat(2, 1fr); grid-template-areas: "status status" "heart heart" "panel panel" "n1 n2" "n3 n4" "n5 n6"; }
	.hp-heartbeat-ambient__chip { width: 208px; }
}

@media (prefers-reduced-motion: reduce) {
	.hp-heartbeat-radar__heart,
	.hp-heartbeat-radar__rings,
	.hp-heartbeat-radar__signal-state i,
	.hp-heartbeat-trust i,
	.hp-local-map-marker.hp-is-selected span,
	.hp-local-map-cluster.hp-is-selected span,
	.hp-local-map__sheet,
	.hp-heartbeat-feed__item,
	.hp-local-map-cluster span::after,
	.hp-heartbeat-connector::after,
	.hp-heartbeat-radar__heart-panel,
	.hp-heartbeat-radar__heart.is-pulsing,
	.hp-heartbeat-radar__halo::after,
	.hp-heartbeat-radar__rings::before,
	.hp-heartbeat-radar__rings::after,
	.hp-heartbeat-ambient__chip--pulse-live .hp-heartbeat-ambient__icon { animation: none; }
	/* The ripple is purely decorative, so it is removed rather than frozen
	   mid-expansion where it would read as a stray ring. */
	.hp-heartbeat-radar__halo::after { opacity: 0; }
	.hp-heartbeat-node,
	.hp-heartbeat-insight,
	.hp-heartbeat-ambient__icon,
	.hp-heartbeat-ambient__chevron::before,
	.hp-heartbeat-radar--energised .hp-heartbeat-radar__rings,
	.hp-heartbeat-radar--energised .hp-heartbeat-node,
	.hp-heartbeat-ambient__chip { transition: none; }
}

/* =========================================================
   LIVE SIGNAL MAP LAYER
   The shell is shared with the business and Safe Water maps; only the marker
   and the sheet's actions belong to Heartbeat. Red means LIVE and worth a
   look -- an attention marker, not a claim that anything is dangerous.
   ========================================================= */

.hp-signal-marker { background: none !important; border: 0 !important; }

.hp-signal-marker__pin {
	position: relative;
	display: block;
	width: 30px;
	height: 38px;
	filter: drop-shadow(0 3px 5px rgba(17, 17, 17, .38));
}

.hp-signal-marker__pin svg { display: block; width: 30px; height: 38px; }
/* The teardrop, and the hole punched through it. */
.hp-signal-marker__pin svg path { fill: #d62839; }
.hp-signal-marker__pin svg circle { fill: #fff; }

/* More than one person has said this is still happening. */
.hp-signal-marker__pin b {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 999px;
	background: #fff;
	border: 1.5px solid #d62839;
	color: #b01d2c;
	font-size: 11px;
	font-weight: 800;
	line-height: 15px;
	text-align: center;
}

/* One slow ring, and none at all for anybody who asked for less motion. */
@keyframes hp-signal-live-ring {
	0%   { box-shadow: 0 0 0 0 rgba(214, 40, 57, .45); }
	70%  { box-shadow: 0 0 0 14px rgba(214, 40, 57, 0); }
	100% { box-shadow: 0 0 0 0 rgba(214, 40, 57, 0); }
}

.hp-signal-marker--pulse .hp-signal-marker__pin::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 8px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	animation: hp-signal-live-ring 2.6s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.hp-signal-marker--pulse .hp-signal-marker__pin::after { animation: none; }
}

.hp-local-map__freshness {
	margin: 6px 0 0;
	font-size: .8rem;
	color: var(--hp-color-text-muted);
}

.hp-local-map__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}

.hp-signal-action { font-size: .82rem; min-height: 40px; padding: 8px 14px; }
.hp-signal-action--quiet { background: transparent; border: 1px solid var(--hp-color-border-strong); color: var(--hp-color-text); }

.hp-signal-actions__note,
.hp-signal-actions__result {
	flex: 1 1 100%;
	margin: 4px 0 0;
	font-size: .8rem;
	color: var(--hp-color-text-muted);
}

.hp-experience-dark .hp-signal-action--quiet { border-color: #57406f; color: #efe5fa; }