/* =============================================================
   Park4Night — PWA
   Aesthetic: "Field Almanac" (aged paper + topographic field guide)
   Type: Fraunces (display/body, variable opsz+SOFT) + JetBrains Mono
   Single accent: blaze orange (trail mark). Favorite: moss green.
   ============================================================= */

:root {
	/* Palette: aged topographic */
	--paper:        #f1e7d0;
	--paper-soft:   #ebdfc2;
	--paper-deep:   #ddcca5;
	--vellum:       #faf3e2;
	--ink:          #1d1810;
	--ink-soft:     #4a3e2d;
	--ink-faint:    #80715a;
	--ink-ghost:    #b5a988;
	--rule:         #c9b88e;

	--blaze:        #d4541a;
	--blaze-deep:   #a83d0c;
	--blaze-soft:   rgba(212, 84, 26, 0.12);
	--blaze-ring:   rgba(212, 84, 26, 0.35);

	--moss:         #5d6f3f;
	--moss-deep:    #3f4d2b;
	--lichen:       #b5a868;
	--river:        #5a7689;
	--rust:         #8a4419;

	/* Backwards-compat: legacy var names referenced by inline JS styles.
	   Remapped onto the new palette. */
	--primary-green: var(--moss);
	--secondary-green: var(--moss-deep);
	--primary-text: var(--ink);
	--primary-grey: var(--ink-faint);
	--filter-services: var(--river);
	--filter-activities: var(--moss);

	/* Geometry */
	--r-sm: 3px;
	--r-md: 8px;
	--r-lg: 18px;
	--r-pill: 999px;

	/* Shadows */
	--shadow-disc:   0 1px 0 rgba(255,250,232,.85) inset, 0 -1px 0 rgba(29,24,16,.18) inset,
	                 0 1px 2px rgba(29,24,16,.25), 0 10px 22px -14px rgba(29,24,16,.55);
	--shadow-card:   0 1px 0 rgba(255,250,232,.55) inset,
	                 0 1px 2px rgba(29,24,16,.2),
	                 0 22px 44px -24px rgba(29,24,16,.45);
	--shadow-pin:    0 1px 0 rgba(0,0,0,.18), 0 4px 10px -3px rgba(0,0,0,.45);

	/* Type stacks */
	--serif: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif;
	--mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

	/* Topographic contour data-URI overlay (subtle) */
	--topo-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><g fill='none' stroke='%234a3e2d' stroke-opacity='0.08' stroke-width='0.7'><path d='M-20,40 Q40,15 100,38 T260,40'/><path d='M-20,60 Q50,32 100,58 T260,60'/><path d='M-20,82 Q40,55 100,78 T260,82'/><path d='M-20,104 Q60,76 100,98 T260,104'/><path d='M-20,128 Q40,100 100,122 T260,128'/><path d='M-20,152 Q70,124 100,146 T260,152'/><path d='M-20,176 Q40,148 100,170 T260,176'/><path d='M-20,200 Q60,172 100,194 T260,200'/></g></svg>");
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	font-family: var(--serif);
	font-variation-settings: "opsz" 14, "SOFT" 50, "wght" 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	color: var(--ink);
	background: var(--paper);
}

body {
	overscroll-behavior: none;
	-webkit-tap-highlight-color: transparent;
}

::selection { background: var(--blaze); color: var(--vellum); }

/* ============================================================= */
/* Map canvas                                                    */
/* ============================================================= */

#map {
	height: 100vh;
	height: 100dvh;
	background: var(--paper);
}

/* Hide MapLibre chrome — we own the controls */
.maplibregl-control-container { display: none !important; }

/* Warm the GL canvas to match the paper palette */
.maplibregl-canvas {
	filter: sepia(0.18) saturate(0.85) contrast(0.96) brightness(1.02);
}

/* ============================================================= */
/* Compass rose decoration                                       */
/* ============================================================= */

.compass-rose {
	position: fixed;
	right: 14px;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
	width: 54px;
	height: 54px;
	z-index: 400;
	pointer-events: auto;
	cursor: pointer;
	opacity: .82;
	filter: drop-shadow(0 6px 10px rgba(29,24,16,.35));
	animation: rose-settle 1200ms cubic-bezier(.2,.7,.2,1) both;
}

.compass-rose:hover  { opacity: 1; }
.compass-rose:active { transform: scale(.94); }
.compass-rose:focus-visible {
	outline: 2px solid var(--blaze);
	outline-offset: 3px;
	border-radius: var(--r-pill);
}

@keyframes rose-settle {
	from { opacity: 0; transform: rotate(-22deg) scale(.6); }
	to   { opacity: .82; transform: rotate(0) scale(1); }
}

/* ============================================================= */
/* Top discs (locate / favorites / filters)                      */
/* ============================================================= */

.top-btns {
	position: fixed;
	z-index: 500;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 0;
}

.top-btns.left  { top: 0; left: 0; }
.top-btns.right { top: 0; right: 0; }

.disc {
	--size: 48px;
	width: var(--size);
	height: var(--size);
	border-radius: var(--r-pill);
	border: 1px solid var(--rule);
	background:
		radial-gradient(120% 120% at 30% 25%, var(--vellum) 0%, var(--paper) 55%, var(--paper-soft) 100%),
		var(--topo-paper);
	background-size: cover, 80px 80px;
	background-blend-mode: normal, multiply;
	color: var(--ink-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-disc);
	transition: transform 160ms cubic-bezier(.2,.7,.2,1), color 160ms ease, background-color 160ms ease, border-color 160ms ease;
	position: relative;
	padding: 0;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.disc:hover  { transform: translateY(-1px); }
.disc:active { transform: translateY(0) scale(.97); }

.disc > *   { width: 22px; height: 22px; }
.disc > img { display: block; }
.disc > svg { width: 22px; height: 22px; }

/* Favorites disc: stamped seal when active */
#favorites-btn.is-active {
	background:
		radial-gradient(120% 120% at 30% 25%, #fff5e1 0%, #f6e4be 60%, var(--paper-soft) 100%);
	color: var(--blaze);
	border-color: var(--blaze);
	border-style: dashed;
	box-shadow:
		0 0 0 3px var(--blaze-soft),
		var(--shadow-disc);
	transform: rotate(-4deg);
}

#favorites-btn.is-active::before {
	content: "vu";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--mono);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.18em;
	color: var(--blaze);
}

#favorites-btn.is-active > svg { opacity: 0; }

#filters-btn        { color: var(--ink-soft); }
#filters-btn > svg  { width: 20px; height: 20px; }

/* ============================================================= */
/* Bottom menu — folded-map edge                                 */
/* ============================================================= */

.menu {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
	background:
		linear-gradient(180deg, var(--paper) 0, var(--paper-soft) 100%),
		var(--topo-paper);
	background-size: 100% 100%, 100px 100px;
	background-blend-mode: normal, multiply;
	border-top: 1px solid var(--rule);
	box-shadow: 0 -10px 24px -18px rgba(29,24,16,.5);
}

/* Folded corner visible above the menu strip */
.menu::after {
	content: "";
	position: absolute;
	top: -1px;
	right: 0;
	width: 30px;
	height: 30px;
	background: linear-gradient(135deg, transparent 50%, var(--paper-deep) 50% 100%);
	border-left: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	transform: translateY(-100%);
	pointer-events: none;
}

/* ============================================================= */
/* Buttons                                                       */
/* ============================================================= */

.button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid transparent;
	border-radius: var(--r-md);
	padding: 11px 18px;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--serif);
	font-variation-settings: "opsz" 14, "SOFT" 30, "wght" 500;
	font-size: 15px;
	letter-spacing: 0.01em;
	line-height: 1;
	color: var(--ink);
	background: var(--vellum);
	box-shadow: var(--shadow-disc);
	transition: transform 140ms ease, background-color 160ms ease, color 160ms ease;
	justify-content: center;
}

.button:hover  { transform: translateY(-1px); }
.button:active { transform: translateY(0) scale(.985); }

.button__kicker {
	font-family: var(--mono);
	font-weight: 700;
	font-size: 13px;
	opacity: .85;
}

.button__label { display: inline-block; }

.button.blaze {
	background: var(--blaze);
	color: var(--vellum);
	border-color: var(--blaze-deep);
	box-shadow:
		inset 0 1px 0 rgba(255,250,232,.25),
		inset 0 -1px 0 rgba(0,0,0,.18),
		0 1px 2px rgba(29,24,16,.3),
		0 10px 22px -14px rgba(168,61,12,.55);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: 600;
	padding: 12px 18px;
}

.button.blaze:hover { background: var(--blaze-deep); }

/* Ghost = subtle text-link with dotted underline */
.button.ghost,
.button.ghost:hover {
	background: transparent;
	box-shadow: none;
	border-color: transparent;
	color: var(--ink-soft);
	text-decoration: underline dotted var(--ink-ghost);
	text-underline-offset: 4px;
	padding: 11px 10px;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.button.ghost:hover { color: var(--ink); text-decoration-color: var(--ink-soft); }

/* Legacy color aliases (inline-built modals still reference them) */
.button.green {
	background: var(--moss);
	color: var(--vellum);
	border-color: var(--moss-deep);
}
.button.green:hover { background: var(--moss-deep); }
.button.green.ghost {
	background: transparent;
	color: var(--moss);
	border-color: transparent;
	box-shadow: none;
	text-decoration: underline dotted var(--ink-ghost);
}
.button.red {
	background: var(--blaze);
	color: var(--vellum);
	border-color: var(--blaze-deep);
}
.button.red:hover { background: var(--blaze-deep); }

/* ============================================================= */
/* Filters panel — field journal                                 */
/* ============================================================= */

#filters {
	display: none;
	flex-direction: column;
	position: fixed;
	left: 8px;
	right: 8px;
	bottom: 0;
	z-index: 999;
	max-width: 560px;
	margin: 0 auto;
	height: calc(100dvh - 110px);
	background:
		linear-gradient(180deg, var(--vellum) 0%, var(--paper) 100%),
		var(--topo-paper);
	background-size: 100% 100%, 110px 110px;
	background-blend-mode: normal, multiply;
	border: 1px solid var(--rule);
	border-bottom: none;
	border-top-left-radius: var(--r-lg);
	border-top-right-radius: var(--r-lg);
	padding: 0 22px 0;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--rule) transparent;
	box-shadow: 0 -22px 60px -30px rgba(29,24,16,.55);
}

/* Sticky grab strip; touch-action keeps the swipe off iOS pull-to-refresh */
.filters-handle {
	position: sticky;
	top: 0;
	z-index: 6;
	flex: 0 0 22px;
	height: 22px;
	min-height: 22px;
	margin: 0 -22px 0;
	background:
		linear-gradient(var(--ink-ghost), var(--ink-ghost)) center 9px / 44px 4px no-repeat,
		var(--vellum);
	border-top-left-radius: var(--r-lg);
	border-top-right-radius: var(--r-lg);
	touch-action: none;
	cursor: grab;
}

.filters-handle:active { cursor: grabbing; }

/* The sticky h2s must also resist flex-shrink */
#filters > h2 { flex-shrink: 0; }

/* Restore breathing room above the JS-built header row (icon + h1 + reset) */
#filters > .filters-header {
	margin-top: 8px;
}

#filters > h2 {
	position: sticky;
	/* Sticks right under the ::before vellum strip (22px tall) */
	top: 22px;
	z-index: 5;
	margin: 28px -22px 8px;
	padding: 14px 28px 10px;
	background: var(--vellum);
	font-family: var(--mono);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-soft);
	border-bottom: 1px dashed var(--rule);
	box-shadow: 0 10px 8px -8px rgba(29,24,16,.08);
}

#filters > h2:first-of-type { margin-top: 6px; }

#filters > label {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 11px 4px;
	margin: 0;
	font-size: 16px;
	font-variation-settings: "opsz" 14, "wght" 400;
	cursor: pointer;
	border-bottom: 1px dotted var(--rule);
	transition: background-color 160ms ease;
}

#filters > label:hover { background: rgba(212, 84, 26, .04); }

#filters input { margin: 0; }

.filters-icon-container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: white;
	width: 32px;
	height: 32px;
	padding: 6px;
	border-radius: var(--r-pill);
	box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 2px 4px rgba(29,24,16,.18);
	flex: 0 0 32px;
}

.filters-icon-container.service,
.filters-icon-container.activity {
	border-radius: var(--r-sm);
	padding: 5px;
}

.filters-icon-container > svg {
	width: 100%;
	height: 100%;
}

.filters-description {
	display: block;
	margin: 0;
	text-align: left;
	color: var(--ink);
	font-size: 15px;
}

.filters-star-svg {
	width: 28px;
	height: 28px;
}

/* The JS-built top row inside #filters (icon + h1 + reset button) */
#filters > div:first-of-type {
	gap: 12px !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	border-bottom: 1px solid var(--rule);
	padding-bottom: 14px;
	margin-bottom: 4px;
	font-size: inherit !important;
}

#filters > div:first-of-type h1 {
	font-family: var(--serif) !important;
	font-variation-settings: "opsz" 96, "SOFT" 100, "wght" 500;
	font-size: 24px !important;
	font-weight: 500;
	letter-spacing: -0.005em;
	margin: 0;
	color: var(--ink);
}

#filters > .apply-filters {
	position: sticky;
	bottom: 0;
	left: 0;
	/* Above the sticky h2 (z:5) so the apply button is never overlapped
	   when content scrolls past it. */
	z-index: 7;
	display: flex;
	justify-content: center;
	padding: 16px 0 calc(env(safe-area-inset-bottom, 0px) + 16px);
	background: linear-gradient(180deg, transparent, var(--vellum) 30%);
	margin-top: 22px;
	margin-left: -22px;
	margin-right: -22px;
	padding-left: 22px;
	padding-right: 22px;
}

#filters > .apply-filters .button { min-width: 220px; }

/* ============================================================= */
/* Inputs                                                        */
/* ============================================================= */

input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--ink-soft);
	border-radius: var(--r-sm);
	background: var(--vellum);
	position: relative;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
}

input[type="checkbox"]:checked {
	background: var(--blaze);
	border-color: var(--blaze-deep);
}

input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 7px;
	width: 6px;
	height: 11px;
	border: solid var(--vellum);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(40deg);
}

input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--ink-soft);
	border-radius: 50%;
	background: var(--vellum);
	position: relative;
	cursor: pointer;
}

input[type="radio"]:checked { border-color: var(--blaze); }

input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 11px;
	height: 11px;
	background: var(--blaze);
	border-radius: 50%;
}

select {
	font-family: var(--mono);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 10px 36px 10px 14px;
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	background-color: var(--vellum);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231d1810'><path d='M7 10l5 5 5-5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	appearance: none;
	-webkit-appearance: none;
	color: var(--ink);
	cursor: pointer;
	width: 100%;
	box-shadow: inset 0 1px 0 rgba(255,250,232,.6), 0 1px 0 rgba(29,24,16,.05);
}

select:focus {
	outline: none;
	border-color: var(--blaze);
	box-shadow: inset 0 1px 0 rgba(255,250,232,.6), 0 0 0 3px var(--blaze-soft);
}

/* ============================================================= */
/* Spot info overlay — bottom-sheet field log card               */
/* ============================================================= */

#spot-infos-overlay {
	display: none;
	position: fixed;
	left: 8px;
	right: 8px;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
	z-index: 499;
	max-width: 560px;
	margin: 0 auto;
	height: auto;
	min-height: 168px;
	background:
		linear-gradient(180deg, var(--vellum) 0%, var(--paper) 100%),
		var(--topo-paper);
	background-size: 100% 100%, 110px 110px;
	background-blend-mode: normal, multiply;
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	cursor: pointer;
	animation: sheet-rise 320ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes sheet-rise {
	from { transform: translateY(24px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

/* Folded corner (top-right of card) */
#spot-infos-overlay::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 22px;
	height: 22px;
	background: linear-gradient(225deg, var(--paper-deep) 0 50%, transparent 50% 100%);
	box-shadow: -1px 1px 0 rgba(29,24,16,.06);
	pointer-events: none;
	z-index: 3;
}

.spot-infos-overlay-img-container {
	display: block;
	width: 100%;
	overflow: hidden;
	position: relative;
	background: var(--paper-deep);
}

.spot-infos-overlay-img {
	width: 100%;
	height: 132px;
	object-fit: cover;
	display: block;
	filter: saturate(0.92) contrast(1.02);
}

.spot-infos-overlay-img-placeholder {
	width: 100%;
	height: 132px;
	object-fit: cover;
	display: block;
	opacity: .7;
}

/* Vellum gradient softening the photo edge */
.spot-infos-overlay-img-container::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 22px;
	background: linear-gradient(180deg, transparent, var(--vellum));
	pointer-events: none;
}

#spot-infos-overlay h1 {
	font-family: var(--serif);
	font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 500;
	font-size: 22px;
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 26px 0 4px;
	padding: 0 16px;
	color: var(--ink);
	font-weight: 500;
}

#spot-infos-overlay p {
	padding: 0 16px 16px;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

/* Compact stat row (e.g. height limit) shown above the description */
.spot-overlay-stat {
	padding: 4px 16px 6px !important;
	font-size: 13px !important;
	color: var(--ink) !important;
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}

.spot-overlay-stat__key {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.spot-overlay-stat__val {
	font-family: var(--mono);
	font-weight: 700;
	color: var(--blaze);
}

#spot-infos-overlay > span {
	display: block;
	padding-bottom: 12px;
}

/* Favorite stamp — top-right of the card */
#spot-infos-overlay > .bookmark-stamp {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vellum);
	border: 1px dashed var(--rule);
	border-radius: var(--r-pill);
	cursor: pointer;
	z-index: 4;
	transition: transform 220ms cubic-bezier(.2,.8,.2,1), background-color 160ms ease, border-color 160ms ease;
}

#spot-infos-overlay > .bookmark-stamp:hover  { transform: scale(1.04); }
#spot-infos-overlay > .bookmark-stamp:active { transform: scale(.94); }

/* Stamped state — detected via inline color set in JS to var(--blaze) */
#spot-infos-overlay > .bookmark-stamp:has(svg[style*="--blaze"]) {
	background: var(--blaze-soft);
	border-color: var(--blaze);
	transform: rotate(-6deg);
	box-shadow: 0 0 0 3px rgba(212,84,26,.08);
}

/* Type-icon pill pinned next to the favorite bookmark (top-right of card) */
#spot-infos-overlay .spot-info-icon-bg {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--vellum);
	border: 1px solid var(--rule);
	border-radius: var(--r-pill);
	position: absolute;
	top: 10px;
	right: 64px;	/* leave room for the 44px stamp + 10px gap */
	padding: 4px;	/* symmetric so a lone logo stays a circle, logo+height a pill */
	box-shadow: var(--shadow-pin);
	z-index: 4;
	max-width: calc(100% - 134px);
}

#spot-infos-overlay .spot-info-icon-bg > .spot-info-icon-container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: white;
	width: 28px;
	height: 28px;
	padding: 5px;
	border-radius: var(--r-pill);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.18);
	flex: 0 0 28px;
	box-sizing: border-box;
}

#spot-infos-overlay .spot-info-icon-bg > svg {
	width: 28px;
	height: 28px;
}

/* ============================================================= */
/* Markers                                                       */
/* ============================================================= */

.user-marker {
	width: 1.5rem;
	height: 1.5rem;
	filter: drop-shadow(0 1px 2px rgba(29,24,16,.5));
}

.spot-marker {
	position: relative;
	width: 26px;
	height: 26px;
	padding: 4px;
	border-radius: var(--r-pill);
	border-width: 2px;
	border-style: solid;
	box-shadow: var(--shadow-pin);
	transition: transform 200ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.spot-marker > svg {
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

/* Centre any SVG dropped into the type-icon pill on the spot card */
#spot-infos-overlay .spot-info-icon-bg > .spot-info-icon-container > svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Selected marker: blaze halo (detected via the appended navigateto child) */
.spot-marker:has(.navigateto-marker-bg) {
	box-shadow:
		0 0 0 3px rgba(212,84,26,.45),
		0 0 0 6px rgba(212,84,26,.15),
		var(--shadow-pin);
}

.spot-popup { max-height: 70vh; }

/* Favorite badge on a marker — a sibling look to the height-limit sign */
.marker-fav-badge {
	position: absolute;
	top: -13px;
	left: -13px;
	width: 24px;
	height: 24px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vellum);
	border: 2px solid var(--blaze);
	border-radius: 50%;
	box-shadow: var(--shadow-pin);
	box-sizing: border-box;
}

.navigateto-marker-bg {
	background-color: var(--vellum);
	color: var(--vellum);
	border-radius: var(--r-sm);
	width: 22px;
	height: 22px;
	position: absolute;
	top: 0;
	left: 30px;
	box-shadow: var(--shadow-pin);
	border: 1px solid var(--rule);
}

.navigateto-marker-container {
	background: var(--blaze);
	border-radius: var(--r-sm);
	width: 14px;
	height: 14px;
	position: absolute;
	top: 3px;
	left: 3px;
	transform: rotate(45deg);
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255,250,232,.3);
}

/* ============================================================= */
/* Full-screen spot modal — almanac page                         */
/* ============================================================= */

.full-screen {
	position: fixed;
	inset: 0;
	background: rgba(29, 24, 16, .72);
	backdrop-filter: blur(6px) saturate(.9);
	-webkit-backdrop-filter: blur(6px) saturate(.9);
	color: var(--vellum);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	z-index: 1500;
	overflow-y: auto;
	padding: 5vh 12px;
	animation: modal-fade 240ms ease both;
}

@keyframes modal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.spot-fullscreen-content {
	background:
		linear-gradient(180deg, var(--vellum) 0%, var(--paper) 100%),
		var(--topo-paper);
	background-size: 100% 100%, 110px 110px;
	background-blend-mode: normal, multiply;
	color: var(--ink);
	padding: 0 22px 32px;
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	width: 100%;
	max-width: 640px;
	box-shadow: 0 30px 60px -10px rgba(0,0,0,.55);
	max-height: 90vh;
	overflow-y: auto;
	overflow-x: clip;
	scrollbar-width: thin;
	scrollbar-color: var(--rule) transparent;
}

.spot-photos img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	margin: 5px;
	border-radius: var(--r-md);
	border: 1px solid var(--rule);
}

.close-btn-container {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	justify-content: flex-end;
	margin: 0 -22px;
	padding: 14px;
	background: linear-gradient(180deg, var(--vellum) 70%, transparent);
}

.spot-details { font-family: var(--serif); }

.spot-details h2 {
	margin: 0 0 6px;
	font-family: var(--serif);
	font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 500;
	font-size: 32px;
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--ink);
	font-weight: 500;
}

.spot-details h5 {
	margin: 0 0 14px;
	font-family: var(--mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

/* Stat row on the details page: type pill + height chip */
.spot-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding-bottom: 18px;
	border-bottom: 1px dashed var(--rule);
}

/* Action row on the details page: directions + favorite toggle */
.spot-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
}

.spot-actions .button { flex: 0 0 auto; }
.spot-actions #spot-directions { flex: 1 1 auto; }

/* Favorite toggle button */
.spot-bookmark-btn {
	color: var(--ink-soft);
	border: 1px solid var(--rule);
	background: var(--vellum);
	box-shadow: var(--shadow-disc);
	text-decoration: none;
}
.spot-bookmark-btn svg { color: var(--ink-faint); }
.spot-bookmark-btn.is-active svg { color: var(--blaze); }
.spot-bookmark-btn__label { font-size: 14px; }

.spot-stat-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--vellum);
	border: 1px solid var(--rule);
	border-radius: var(--r-pill);
	padding: 4px 12px 4px 4px;
	box-shadow: var(--shadow-pin);
	font-size: 14px;
	font-variation-settings: "opsz" 14, "wght" 500;
	color: var(--ink);
}

.spot-stat-pill__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 5px;
	border-radius: var(--r-pill);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.18);
	flex: 0 0 28px;
	box-sizing: border-box;
}

.spot-stat-pill__icon > svg {
	width: 100%;
	height: 100%;
	display: block;
}

.spot-stat-pill__label {
	white-space: nowrap;
}

.spot-stat-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 7px 12px;
	border: 1px dashed var(--blaze);
	border-radius: var(--r-pill);
	background: var(--blaze-soft);
}

.spot-stat-chip__key {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.spot-stat-chip__val {
	font-family: var(--mono);
	font-weight: 700;
	color: var(--blaze);
	font-size: 14px;
}

.spot-details h3 {
	font-family: var(--mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin: 22px 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px dashed var(--rule);
}

.spot-details p {
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink);
}

.spot-details strong {
	font-variation-settings: "opsz" 14, "SOFT" 30, "wght" 700;
	font-weight: 700;
}

#spot-reviews p { font-size: 15px; line-height: 1.5; margin: 0 0 6px; }
.review-separator {
	margin: 18px 0;
	border: none;
	border-bottom: 1px dashed var(--rule);
}

/* Single review block */
.review { position: relative; padding: 4px 0 8px; }

.review__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}

.review__author {
	font-family: var(--serif);
	font-variation-settings: "opsz" 14, "wght" 600;
	font-size: 14px;
	color: var(--ink);
}

.review__date {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.review__rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.review__score {
	font-family: var(--mono);
	font-weight: 700;
	font-size: 12px;
	color: var(--ink);
}

.review__body {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink);
	margin: 4px 0 8px;
	padding-right: 36px;	/* leave room for the translate icon button */
}

/* ============================================================= */
/* Icon button (translate, close, etc.)                          */
/* ============================================================= */

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: var(--r-pill);
	border: 1px solid var(--rule);
	background: var(--vellum);
	color: var(--ink-soft);
	cursor: pointer;
	box-shadow: 0 1px 0 rgba(255,250,232,.6) inset, 0 1px 2px rgba(29,24,16,.18);
	transition: transform 140ms ease, color 160ms ease, background-color 160ms ease, border-color 160ms ease;
	position: relative;
}

.icon-btn:hover:not(:disabled)  { transform: translateY(-1px); color: var(--blaze); border-color: var(--blaze); }
.icon-btn:active:not(:disabled) { transform: translateY(0) scale(.96); }
.icon-btn:disabled { cursor: progress; opacity: .85; }

.icon-btn > svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* While a spinner inside the icon-btn is visible, hide the static icon */
.icon-btn:has(.loader.is-visible) > svg { display: none; }
.icon-btn .loader { width: 16px; height: 16px; }

/* Translate button sits at the bottom-right of each review */
.review .icon-btn {
	position: absolute;
	right: 0;
	bottom: 4px;
}

/* Close button (top-right of the spot modal) */
.icon-btn--close {
	width: 38px;
	height: 38px;
	background: var(--vellum);
	color: var(--ink);
}

.icon-btn--close > svg { width: 18px; height: 18px; }

.icon-btn--close:hover {
	color: var(--blaze);
	border-color: var(--blaze);
	background: var(--blaze-soft);
}

/* ============================================================= */
/* Rating — 5 mountain peaks                                     */
/* ============================================================= */

.star-rating {
	position: relative;
	display: inline-block;
	width: 120px;
	height: 20px;
	background-color: transparent;
	overflow: hidden;
}

.stars-background,
.stars-foreground {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: 24px 20px;
	background-repeat: repeat-x;
}

/* Empty mountain peak — stroked triangle on a baseline */
.stars-background {
	background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='20' viewBox='0 0 24 20'><g fill='none' stroke='%2380715a' stroke-width='1.4' stroke-linejoin='round'><path d='M3 17 L12 4 L21 17 Z'/></g><line x1='1' y1='17.5' x2='23' y2='17.5' stroke='%2380715a' stroke-width='0.8' stroke-opacity='0.5'/></svg>");
}

/* Filled mountain peak — blaze fill */
.stars-foreground {
	background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='20' viewBox='0 0 24 20'><g fill='%23d4541a' stroke='%23a83d0c' stroke-width='1.2' stroke-linejoin='round'><path d='M3 17 L12 4 L21 17 Z'/></g><line x1='1' y1='17.5' x2='23' y2='17.5' stroke='%23a83d0c' stroke-width='0.9'/></svg>");
	width: 0%;
}

/* ============================================================= */
/* Swiper photo carousel                                         */
/* ============================================================= */

.swiper-container {
	width: 100%;
	max-width: 100%;
	margin: 12px 0;
	border-radius: var(--r-md);
	overflow: hidden;
	border: 1px solid var(--rule);
}

.swiper-slide img {
	width: 100%;
	height: auto;
	display: block;
}

.swiper-pagination {
	position: static !important;
	padding: 10px 0 4px;
}

.swiper-pagination-bullet {
	background: var(--ink-faint) !important;
	opacity: .55 !important;
}

.swiper-pagination-bullet-active {
	background: var(--blaze) !important;
	opacity: 1 !important;
}

/* ============================================================= */
/* Country selector (legacy positioning, restyled)               */
/* ============================================================= */

#country-selector {
	position: absolute;
	top: 14px;
	right: 14px;
	background: var(--vellum);
	padding: 10px;
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-disc);
	z-index: 500;
}

/* ============================================================= */
/* Utility classes (kept for backwards compat)                   */
/* ============================================================= */

.d-inline { display: inline; }
.d-flex { display: flex; }
.flex-direction-column { flex-direction: column; }
.align-items-end { align-items: flex-end; }
.gap-05 { gap: 0.5rem; }
.gap-2 { gap: 2rem; }
.m-0 { margin: 0; margin-block: 0; margin-inline: 0; }

/* ============================================================= */
/* Media queries                                                 */
/* ============================================================= */

@media (max-width: 480px) {
	.compass-rose {
		width: 46px;
		height: 46px;
		bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
	}
	.disc { --size: 44px; }
	#spot-infos-overlay h1,
	.spot-details h2 { font-size: 20px; }
	.spot-details h2 { font-size: 26px; }
}

@media (min-width: 768px) {
	.top-btns { padding-top: 18px; padding-left: 22px; padding-right: 22px; }
	.menu { padding-left: 26px; padding-right: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* Import-favorites dialog — paste a Park4Night session cookie to import      */
#import-favorites-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(29, 24, 16, .45);
	padding: 20px;
	place-items: center;
}

#import-favorites-overlay.is-open { display: grid; }

.import-favorites-card {
	width: min(420px, 100%);
	background: var(--vellum);
	color: var(--ink);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
	padding: 22px 22px 18px;
	font-family: var(--serif);
}

.import-favorites-card h2 {
	margin: 0 0 10px;
	font-size: 1.25rem;
}

.import-favorites-card p {
	margin: 0 0 14px;
	font-size: .92rem;
	color: var(--ink-soft);
	line-height: 1.45;
}

.import-favorites-card code {
	font-family: var(--mono);
	font-size: .85em;
	color: var(--blaze-deep);
}

#import-favorites-input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-family: var(--mono);
	font-size: .9rem;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
}

#import-favorites-input:focus {
	outline: none;
	border-color: var(--blaze);
	box-shadow: 0 0 0 3px var(--blaze-ring);
}

#import-favorites-status {
	min-height: 1.2em;
	margin: 10px 0 0;
	font-family: var(--mono);
	font-size: .82rem;
	color: var(--ink-faint);
}

.import-favorites-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 16px;
}