/* Map-side pieces of the new spotting form (#570): the spot location pin
   (modules/spotFormPin.js) and the loading frame shown while the form's code downloads
   (modules/spotFormPanel.js). Both live outside the React island and show before its code
   loads, so they cannot use the island's Tailwind classes; the form itself is styled with
   those (ui/map/spotForm/). Kept out of style.css, which is frozen for new features
   (docs/reference/ui-architecture.md). */

/* The spot pin: a purple teardrop whose tip marks the spot. Clicks pass through. */
.spot-form-pin {
	position: relative;
	width: 30px;
	height: 40px;
	/* !important because Mapbox writes pointer-events: auto inline on every marker. */
	pointer-events: none !important;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.spot-form-pin::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0;
	width: 26px;
	height: 26px;
	box-sizing: border-box;
	border: 2px solid #fff;
	border-radius: 50% 50% 50% 0;
	background: var(--purple, #7858b8);
	/* Rotated so the square corner points down at the spot. */
	transform: translateY(5px) rotate(-45deg);
	transform-origin: center;
}

.spot-form-pin-center {
	position: absolute;
	left: 10px;
	top: 10px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
}

/* "Show on map" (#756): a ring pulses out from the pin's head three times, for
   PIN_FLASH_MS in modules/spotFormPin.js. The ring is a pseudo-element because Mapbox
   positions the marker by writing transform on the pin itself. */
.spot-form-pin::after {
	content: '';
	position: absolute;
	left: -1px;
	top: 2px;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	border: 3px solid var(--purple, #7858b8);
	border-radius: 50%;
	opacity: 0;
}

.spot-form-pin--flash::after {
	animation: spot-form-pin-pulse 0.8s ease-out 3;
}

@keyframes spot-form-pin-pulse {
	from {
		opacity: 0.9;
		transform: scale(0.8);
	}
	to {
		opacity: 0;
		transform: scale(2.2);
	}
}

/* With reduced motion the ring holds still, a little out from the head, for the same time. */
@media (prefers-reduced-motion: reduce) {
	.spot-form-pin--flash::after {
		animation: none;
		opacity: 1;
		transform: scale(1.35);
	}
}

/* The loading frame: an empty copy of the form's wide glass side sheet (ui/map/sheet.css),
   shown at once on the first tap while the form's code is still on its way (usually it was
   preloaded and this never shows). Like the sheet, it does not dim the map. */
.spot-form-loading {
	position: fixed;
	z-index: var(--z-modal, 1000);
	inset: 0;
	display: flex;
	justify-content: flex-end;
}

.spot-form-loading-sheet {
	display: flex;
	flex-direction: column;
	width: min(36rem, 100vw);
	height: 100%;
	box-sizing: border-box;
	padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 0;
	border-left: 1px solid var(--subtle-border, rgba(38, 50, 70, 0.12));
	background: var(--bg-purple-tint, #fff);
	box-shadow: var(--shadow, -12px 0 32px rgba(0, 0, 0, 0.18));
	-webkit-backdrop-filter: blur(var(--glass-blur, 7px));
	backdrop-filter: blur(var(--glass-blur, 7px));
	color: var(--page-text-color, #263246);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 16px;
}

@media (prefers-reduced-transparency: reduce) {
	.spot-form-loading-sheet {
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	:root[data-theme='dark'] .spot-form-loading-sheet {
		background: #131b2b;
	}
}

@media (max-width: 639.98px) {
	.spot-form-loading-sheet {
		width: 100vw;
		border-left: 0;
	}
}

/* From 640px up the sheet leaves the map usable (#751), so the frame does too: same layer as
   .cs-sheet in ui/map/sheet.css. */
@media (min-width: 640px) {
	.spot-form-loading {
		z-index: var(--z-sheet, 900);
		pointer-events: none;
	}

	.spot-form-loading-sheet {
		pointer-events: auto;
	}
}

.spot-form-loading-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 20px 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}

.spot-form-loading-close {
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.spot-form-loading-close:focus-visible {
	outline: 2px solid var(--purple, #7858b8);
	outline-offset: 2px;
}

.spot-form-loading-text {
	margin: 0;
	padding: 16px 20px;
	color: inherit;
	opacity: 0.8;
}