.gpxmap { margin: 1.5em 0; }
.gpxmap-map { position: relative; width: 100%; border-radius: 4px; z-index: 0; }
.gpxmap-stats { margin-top: .5em; font-size: .9em; }
.gpxmap-error { padding: .5em .75em; border-left: 4px solid #d63638; background: #fcf0f1; }

/* Elevation profile */
.gpxmap-profile {
	position: relative;
	margin-top: .5em;
	touch-action: pan-y; /* vertical swipes scroll the page, horizontal swipes scrub */
	cursor: crosshair;
	user-select: none;
	-webkit-user-select: none;
	font-size: 11px;
}
.gpxmap-profile svg { display: block; overflow: visible; }
.gpxmap-grid line { stroke: rgba(0, 0, 0, .1); stroke-width: 1; }
.gpxmap-grid text { fill: #666; font: inherit; }
.gpxmap-cursor line { stroke: #333; stroke-width: 1; stroke-dasharray: 3 2; }
.gpxmap-cursor circle { stroke: #fff; stroke-width: 1.5; }
.gpxmap-tip {
	position: absolute;
	top: 0;
	visibility: hidden;
	padding: 2px 6px;
	border-radius: 3px;
	background: rgba(20, 20, 20, .85);
	color: #fff;
	white-space: pre; /* keeps the wider spacing around the separators */
	pointer-events: none;
	font-variant-numeric: tabular-nums;
}
.gpxmap-legend {
	position: absolute;
	top: 0;
	right: 12px;
	display: flex;
	gap: .75em;
	color: #666;
	pointer-events: none;
}
.gpxmap-legend i {
	display: inline-block;
	width: .8em;
	height: .8em;
	margin-right: .3em;
	border-radius: 2px;
	vertical-align: -.05em;
}

/* Gesture hint overlay */
.gpxmap-hint {
	position: absolute;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	background: rgba(0, 0, 0, .5);
	color: #fff;
	font-size: 1.1em;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s;
}
.gpxmap-hint.is-visible { opacity: 1; }

/* Full-screen button */
.gpxmap-fs-control a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: #333;
}

/* Full screen (native and CSS fallback) */
.gpxmap.is-fullscreen {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	background: #fff;
}
.gpxmap.is-fullscreen .gpxmap-map { flex: 1 1 auto; height: auto !important; min-height: 0; border-radius: 0; }
.gpxmap.is-fullscreen .gpxmap-profile { flex: 0 0 auto; margin: .5em 0; }
.gpxmap.is-fullscreen .gpxmap-stats { flex: 0 0 auto; margin: 0 0 .5em; padding: 0 12px; }
.gpxmap--pseudo-fs {
	position: fixed;
	inset: 0;
	z-index: 100000;
	height: 100vh;
	height: 100dvh;
}
html.gpxmap-noscroll, html.gpxmap-noscroll body { overflow: hidden; }

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

/* Download link */
.gpxmap-download { margin: .25em 0 0; font-size: .9em; }
.gpxmap.is-fullscreen .gpxmap-download { flex: 0 0 auto; margin: 0 0 .5em; padding: 0 12px; }