/* Sightings map. Loaded only where the block/section is used. */
.asm {
	--asm-accent: var(--ast-global-color-0, #2f6b3a);
	padding-block: clamp(2rem, 5vw, 3.5rem);
}
.asm__title { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 3vw, 2rem); }

.asm__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem 1rem;
	margin-bottom: 1rem;
}
.asm__bar[hidden] { display: none; }
.asm__field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; font-size: 0.8rem; font-weight: 600; }
.asm__field select,
.asm__field input {
	min-width: 9rem;
	margin: 0;
	padding: 0.45rem 0.7rem;
	border: 1px solid rgba(127, 127, 127, 0.4);
	border-radius: 8px;
	background: #fff;
	color: #1d2327;
	font-size: 0.9rem;
	font-weight: 400;
}
.asm__field--search input { min-width: 13rem; }

.asm__toggle { display: inline-flex; border: 1px solid rgba(127, 127, 127, 0.4); border-radius: 999px; overflow: hidden; }
.asm .asm__toggle button {
	margin: 0;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.asm .asm__toggle button[aria-pressed="true"] { background: var(--asm-accent); color: #fff; }

.asm .asm__reset {
	margin: 0;
	padding: 0.5rem 0.25rem;
	border: 0;
	background: none;
	color: inherit;
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
}
.asm__count { flex: 1 1 100%; margin: 0; font-size: 0.85rem; opacity: 0.75; }
@media (min-width: 900px) { .asm__count { flex: 1 1 auto; text-align: right; } }

.asm__map,
.asm__placeholder {
	position: relative;
	z-index: 0; /* keep Leaflet panes under the sticky header */
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: #e8ece6;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06);
}
@media (max-width: 600px) { .asm__map { max-height: 70vh; } }
.asm__placeholder { display: grid; place-items: center; padding: 1rem; text-align: center; opacity: 0.8; }
.asm__notice { margin: 0; opacity: 0.8; }

/* Pins */
.asm__pin { background: none; border: 0; }
.asm__pin span {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--asm-pin);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	color: #fff;
	font: 700 12px/1 system-ui, sans-serif;
	transition: transform 0.15s;
}
.asm__pin:hover span,
.asm__pin:focus span { transform: scale(1.12); }

/* Pop-ups */
.asm__popup .leaflet-popup-content { margin: 12px 14px; font-size: 13px; line-height: 1.4; }
.asm__pop-title { display: block; font-size: 15px; }
.asm__pop-sub { display: block; margin-bottom: 6px; opacity: 0.7; }
.asm__pop-list { max-height: 220px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.asm__pop-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 4px 0; border-top: 1px solid rgba(127, 127, 127, 0.15); }
.asm__when { margin-left: auto; font-size: 12px; opacity: 0.65; }
.asm__dot { width: 8px; height: 8px; border-radius: 50%; background: #2f6b3a; }
.asm__dot--moth { background: #7a4a8c; }
.asm__tick { padding: 1px 6px; border-radius: 999px; background: rgba(47, 107, 58, 0.12); font-size: 11px; font-weight: 600; }
.asm__pop-more { display: block; margin-top: 4px; opacity: 0.7; }
.asm__pop-link { display: block; margin-top: 6px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .asm__pin span { transition: none; } }

@media (max-width: 600px) {
	.asm__field { flex: 1 1 calc(50% - 0.5rem); }
	.asm__field--search { flex-basis: 100%; }
	.asm__field select,
	.asm__field input { width: 100%; min-width: 0; }
}