.alt-exp-map-shell {
	--alt-exp-forest: #173f35;
	--alt-exp-ink: #16221c;
	--alt-exp-moss: #dae6d0;
	--alt-exp-gold: #f5c542;
	--alt-exp-paper: #fffaf0;
	--alt-exp-line: rgba(23, 63, 53, 0.18);
	--alt-exp-shadow: 0 24px 70px rgba(22, 34, 28, 0.18);
	background:
		radial-gradient(circle at top left, rgba(245, 197, 66, 0.22), transparent 28rem),
		linear-gradient(135deg, #f5f1df 0%, #dce7d1 100%);
	border: 1px solid var(--alt-exp-line);
	border-radius: 24px;
	box-shadow: var(--alt-exp-shadow);
	color: var(--alt-exp-ink);
	font-family: inherit;
	padding: clamp(1rem, 2vw, 1.5rem);
}

.alt-exp-map-toolbar {
	align-items: flex-end;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.alt-exp-map-title-group {
	min-width: 0;
}

.alt-exp-map-eyebrow {
	color: var(--alt-exp-forest);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	margin: 0 0 0.28rem;
	text-transform: uppercase;
}

.alt-exp-map-heading {
	color: var(--alt-exp-ink);
	font-size: clamp(1.4rem, 3vw, 2.2rem);
	line-height: 1.08;
	margin: 0;
}

.alt-exp-map-controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: flex-end;
}

.alt-exp-map-poi-panel {
	align-items: center;
	background: rgba(255, 250, 240, 0.66);
	border: 1px solid rgba(23, 63, 53, 0.14);
	border-radius: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	justify-content: space-between;
	margin: -0.25rem 0 1rem;
	padding: 0.8rem 0.9rem;
}

.alt-exp-map-layer-panel {
	align-items: center;
	background: rgba(255, 250, 240, 0.58);
	border: 1px solid rgba(23, 63, 53, 0.14);
	border-radius: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1rem;
	justify-content: space-between;
	margin: -0.25rem 0 1rem;
	padding: 0.8rem 0.9rem;
}

.alt-exp-map-layer-panel-title {
	color: var(--alt-exp-forest);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	margin: 0;
	text-transform: uppercase;
}

.alt-exp-map-layer-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 0.9rem;
	justify-content: flex-end;
}

.alt-exp-map-layer-toggles label {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.88rem;
	font-weight: 700;
	gap: 0.4rem;
	line-height: 1.25;
}

.alt-exp-map-layer-panel input {
	accent-color: var(--alt-exp-forest);
}

.alt-exp-map-poi-toggle,
.alt-exp-map-poi-filters label {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.88rem;
	font-weight: 700;
	gap: 0.4rem;
	line-height: 1.25;
}

.alt-exp-map-poi-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 0.9rem;
	justify-content: flex-end;
}

.alt-exp-map-poi-hint {
	color: rgba(22, 34, 28, 0.68);
	flex-basis: 100%;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.3;
	margin: -0.2rem 0 0;
	text-align: right;
}

.alt-exp-map-poi-panel input {
	accent-color: var(--alt-exp-forest);
}

.alt-exp-map-basemap-label {
	align-items: flex-start;
	display: grid;
	font-size: 0.82rem;
	font-weight: 700;
	gap: 0.28rem;
}

.alt-exp-map-basemap-select {
	appearance: none;
	background:
		linear-gradient(45deg, transparent 50%, var(--alt-exp-forest) 50%) right 0.82rem center / 0.42rem 0.42rem no-repeat,
		var(--alt-exp-paper);
	border: 1px solid rgba(23, 63, 53, 0.28);
	border-radius: 999px;
	color: var(--alt-exp-ink);
	cursor: pointer;
	font: inherit;
	font-size: 0.94rem;
	min-width: 10.5rem;
	padding: 0.62rem 2rem 0.62rem 0.9rem;
}

.alt-exp-map-legend {
	align-items: center;
	background: rgba(255, 250, 240, 0.78);
	border: 1px solid rgba(23, 63, 53, 0.16);
	border-radius: 999px;
	display: inline-flex;
	font-size: 0.9rem;
	font-weight: 700;
	gap: 0.55rem;
	padding: 0.58rem 0.85rem;
}

.alt-exp-map-legend-line {
	background: var(--alt-exp-gold);
	border: 2px solid #11241c;
	border-radius: 999px;
	display: inline-block;
	height: 0.28rem;
	width: 2.5rem;
}

.alt-exp-map-canvas {
	background: #d7e2d3;
	border: 1px solid rgba(22, 34, 28, 0.2);
	border-radius: 20px;
	min-height: 320px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.alt-exp-map-message {
	background: #fff2d6;
	border: 1px solid rgba(127, 77, 0, 0.3);
	border-radius: 12px;
	color: #4d3300;
	font-size: 0.95rem;
	margin-top: 0.8rem;
	padding: 0.75rem 0.9rem;
}

.alt-exp-map-message[data-status="error"] {
	background: #ffe5df;
	border-color: rgba(142, 35, 15, 0.32);
	color: #6d1d0e;
}

.alt-exp-map-attribution {
	color: rgba(22, 34, 28, 0.72);
	font-size: 0.78rem;
	line-height: 1.45;
	margin: 0.85rem 0 0;
}

.alt-exp-map-attribution a {
	color: var(--alt-exp-forest);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.14em;
}

.alt-exp-map-popup {
	color: #17231d;
	font-size: 0.92rem;
	line-height: 1.35;
	max-width: 16rem;
}

.alt-exp-map-popup p {
	margin: 0.4rem 0 0;
}

.alt-exp-map-popup a {
	color: #1f5f50;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

.alt-exp-map-error {
	background: #ffe5df;
	border: 1px solid rgba(142, 35, 15, 0.32);
	border-radius: 12px;
	color: #6d1d0e;
	padding: 0.75rem 0.9rem;
}

@media (max-width: 700px) {
	.alt-exp-map-shell {
		border-radius: 18px;
		padding: 0.85rem;
	}

	.alt-exp-map-toolbar {
		align-items: stretch;
		display: grid;
	}

	.alt-exp-map-controls {
		justify-content: stretch;
	}

	.alt-exp-map-poi-panel,
	.alt-exp-map-poi-filters,
	.alt-exp-map-layer-panel,
	.alt-exp-map-layer-toggles {
		align-items: stretch;
		display: grid;
		justify-content: stretch;
	}

	.alt-exp-map-poi-hint {
		text-align: left;
	}

	.alt-exp-map-basemap-label,
	.alt-exp-map-basemap-select,
	.alt-exp-map-legend {
		width: 100%;
	}

	.alt-exp-map-canvas {
		border-radius: 16px;
		min-height: 360px;
	}
}