.ef-map-figure {
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
}

.ef-map {
	min-block-size: 0;
	inline-size: 100%;
	block-size: 100%;
	overflow: hidden;
	background: var(--ef-color-gray_light);
}

.ef-map .maplibregl-canvas-container,
.ef-map .maplibregl-control-container {
	position: absolute;
	inset: 0;
}

.ef-map .maplibregl-control-container {
	pointer-events: none;
}

.ef-map .maplibregl-canvas {
	outline: none;
}

.ef-map .maplibregl-canvas:focus-visible {
	outline: var(--ef-border-default) solid var(--ef-color-primary);
	outline-offset: calc(-1 * var(--ef-border-default));
}

/* Measurement-only bridge for deck.gl's numeric presentation properties.
   The circular geometry is intrinsic to ScatterplotLayer, not a second radius system. */
.ef-map-cluster-style {
	position: absolute;
	visibility: hidden;
	pointer-events: none;
	box-sizing: content-box;
	width: calc(var(--ef-font-micro) + var(--ef-space-m) * 2);
	height: calc(var(--ef-space-xl) * 2);
	padding: var(--ef-space-s);
	border: var(--ef-border-strong) solid var(--ef-color-primary_contrast);
	border-radius: var(--ef-radius-round);
	background: var(--ef-color-primary);
	color: var(--ef-color-primary_contrast);
	font-family: var(--ef-family-body);
	font-size: var(--ef-font-micro);
	font-weight: var(--ef-weight-semibold);
}

.ef-map-pin-card {
	position: fixed;
	z-index: var(--ef-z-sticky);
	inline-size: min(24rem, calc(100vw - (var(--ef-space-m) * 2)));
	max-block-size: min(36rem, calc(100vh - (var(--ef-space-m) * 2)));
	overflow: auto;
	overscroll-behavior: contain;
	border: var(--ef-border-default) solid color-mix(in srgb, var(--ef-color-text_muted) 18%, transparent);
	border-radius: var(--ef-radius-l);
	background: var(--ef-color-white);
	color: var(--ef-color-text);
	box-shadow: var(--ef-shadow-panel);
}

.ef-map-pin-card-flyout {
	top: 0;
	left: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	box-shadow: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(calc(var(--ef-space-2xs) * -1));
	transition:
		opacity var(--ef-motion-default) var(--ef-ease-out),
		transform var(--ef-motion-default) var(--ef-ease-out),
		visibility var(--ef-motion-default) var(--ef-ease-out);
}

.ef-map-pin-card-flyout.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.ef-map-pin-card-content {
	min-block-size: var(--ef-space-xl);
}

.ef-map-pin-card-loading {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: var(--ef-space-s) var(--ef-space-m);
	padding: var(--ef-space-m);
	border-radius: var(--ef-radius-m);
	background: var(--ef-color-white);
}

.ef-map-pin-card-loading > .ef-skeleton {
	block-size: var(--ef-font-small);
}

.ef-map-pin-card-loading > .ef-skeleton::after {
	display: none;
}

.ef-map-pin-card-loading > .ef-map-pin-card-loading__image {
	grid-row: span 3;
	block-size: 4rem;
}

.ef-map-pin-card-loading__title {
	inline-size: 70%;
}

.ef-map-pin-card-loading__detail {
	inline-size: 55%;
}

.ef-map-pin-card-sheet {
	box-sizing: border-box;
	inset: auto 0 0;
	inline-size: 100%;
	max-inline-size: none;
	max-block-size: min(52vh, 42rem);
	max-block-size: min(52dvh, 42rem);
	margin: 0;
	padding-block-end: max(var(--ef-space-m), env(safe-area-inset-bottom));
	border-inline: 0;
	border-block-end: 0;
	border-radius: var(--ef-radius-l) var(--ef-radius-l) 0 0;
}

.ef-map-pin-card-sheet::backdrop {
	background: color-mix(in srgb, var(--ef-color-text) 34%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.ef-map-pin-card-flyout {
		transform: none;
		transition: opacity var(--ef-motion-default), visibility var(--ef-motion-default);
	}
}