.alpcity-layout {
	--alpcity-text: #172117;
	--alpcity-muted: #586355;
	--alpcity-card: #f7f9f5;
	--alpcity-border: #d4dbd0;
	--alpcity-course: #f2ce00;
	--alpcity-gap: #75bc68;
	--alpcity-setback: #e58d2d;
	--alpcity-road: #333b42;
	display: grid;
	gap: 16px;
	width: 100%;
	color: var(--alpcity-text);
	font-family: inherit;
	box-sizing: border-box;
}

.alpcity-layout *,
.alpcity-layout *::before,
.alpcity-layout *::after {
	box-sizing: border-box;
}

.alpcity-layout__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.alpcity-layout__stat {
	display: grid;
	gap: 4px;
	padding: 14px;
	background: var(--alpcity-card);
	border: 1px solid var(--alpcity-border);
	border-radius: 10px;
}

.alpcity-layout__stat span {
	color: var(--alpcity-muted);
	font-size: .88em;
}

.alpcity-layout__stat strong {
	font-size: 1.28em;
	font-variant-numeric: tabular-nums;
}

.alpcity-layout__controls {
	display: grid;
	gap: 8px;
	max-width: 440px;
}

.alpcity-layout__controls label {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.alpcity-layout__range {
	width: 100%;
	accent-color: var(--alpcity-course);
}

.alpcity-layout__stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #223122;
	border-radius: 12px;
	aspect-ratio: 1200 / 674;
}

.alpcity-layout__stage img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.alpcity-layout__stage svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.alpcity-layout__course-zone {
	fill: var(--alpcity-course);
	fill-opacity: .58;
	stroke: #fff;
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.alpcity-layout__course-label-bg {
	fill: #172117;
}

.alpcity-layout__course-label,
.alpcity-layout__measure-label {
	fill: #fff;
	font-family: Arial, sans-serif;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: middle;
}

.alpcity-layout__reserve-zone {
	fill: var(--alpcity-gap);
	fill-opacity: .16;
	stroke: var(--alpcity-gap);
	stroke-width: 2;
	stroke-dasharray: 7 6;
	vector-effect: non-scaling-stroke;
}

.alpcity-layout__setback-zone {
	fill: var(--alpcity-setback);
	fill-opacity: .34;
}

.alpcity-layout__measure-line,
.alpcity-layout__measure-tick {
	stroke: #fff;
	stroke-width: 2.5;
	vector-effect: non-scaling-stroke;
}

.alpcity-layout__measure-label-bg {
	fill: #172117;
	fill-opacity: .9;
}

.alpcity-layout__road-line {
	fill: none;
	stroke: var(--alpcity-road);
	stroke-opacity: .92;
	vector-effect: non-scaling-stroke;
}

.alpcity-layout__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	font-size: .9em;
}

.alpcity-layout__legend span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.alpcity-layout__legend b {
	font-weight: 600;
}

.alpcity-layout__swatch {
	display: inline-block;
	width: 20px;
	height: 11px;
	flex: 0 0 auto;
}

.alpcity-layout__swatch--course { background: var(--alpcity-course); }
.alpcity-layout__swatch--gap { border: 2px dashed var(--alpcity-gap); }
.alpcity-layout__swatch--setback { background: var(--alpcity-setback); }
.alpcity-layout__swatch--road { background: var(--alpcity-road); }

@media (max-width: 760px) {
	.alpcity-layout__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.alpcity-layout__stats {
		grid-template-columns: 1fr;
	}

	.alpcity-layout__legend {
		align-items: flex-start;
		flex-direction: column;
	}
}