/* ========================================================================
   Mobile bottom sheet primitive (map-first shells)
   Breakpoint aligned with app nav: 992px
   ======================================================================== */

:root {
	/* Docs only — @media cannot use custom props; keep MQs at 991.98/992 in sync */
	--mobile-bp: 992px;
	/* Peek under map chrome + POI cards (10050). Half/full covers toolbars and POI cards. */
	--mobile-sheet-z: 1100;
	--mobile-sheet-expanded-z: 11000;
	--mobile-sheet-exit-z: 12000;
	--risk-zones-sheet-z: 1110;
	--mobile-sheet-radius: 1rem;
	/* handle (18) + tab (app-btn-min-h 36) + tabs pad-bottom (8) + safe area */
	--mobile-sheet-peek: calc(3.875rem + env(safe-area-inset-bottom, 0px));
	--mobile-sheet-half: 45dvh;
	--mobile-sheet-full: min(92dvh, 100% - 3rem);
}

.mobile-sheet {
	display: none;
}

@media (max-width: 991.98px) {
	.mobile-sheet {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: var(--mobile-sheet-z);
		max-height: var(--mobile-sheet-full);
		/*
		 * Tint + blur on the host (not a z-index:-1 ::before). Topbar menu open
		 * elevates a sibling stacking context; filtered pseudos can blank entirely
		 * (bg included), which made a transparent host look like the peek vanished.
		 */
		background: var(--map-overlay-surface-background, var(--clr-surface-1, #121212));
		-webkit-backdrop-filter: var(--map-overlay-surface-filter, blur(8px));
		backdrop-filter: var(--map-overlay-surface-filter, blur(8px));
		color: var(--clr-text-high, #fff);
		-webkit-font-smoothing: antialiased;
		border-radius: var(--mobile-sheet-radius) var(--mobile-sheet-radius) 0 0;
		border: none;
		border-top: 1px solid var(--clr-surface-4, #333);
		box-shadow:
			0 0 0 1px rgba(0, 0, 0, 0.06),
			0 -0.5rem 1.75rem rgba(0, 0, 0, 0.35);
		overflow: hidden;
		/* Keep tabs / actions above the home indicator */
		padding-bottom: env(safe-area-inset-bottom, 0px);
		transition: height 0.28s cubic-bezier(0.32, 0.72, 0, 1),
			transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
		/* Allow body/panels to pan-y; handle keeps touch-action: none for drag */
		touch-action: manipulation;

		&[data-height="peek"] {
			height: var(--mobile-sheet-peek);
		}

		&[data-height="half"],
		&[data-height="full"] {
			z-index: var(--mobile-sheet-expanded-z);
		}

		&[data-height="half"] {
			height: var(--mobile-sheet-half);
		}

		&[data-height="full"] {
			height: var(--mobile-sheet-full);
		}

		&.is-hidden {
			transform: translateY(110%);
			pointer-events: none;
		}
	}

	.mobile-sheet-handle {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		/* Fixed row height — margins on the pill used to inflate peek and clip tabs */
		height: 1.125rem;
		min-height: 1.125rem;
		cursor: grab;
		touch-action: none;

		&::before {
			content: "";
			width: 2.25rem;
			height: 4px;
			margin: 0;
			border-radius: 999px;
			background: color-mix(in srgb, var(--clr-text-medium, #999) 55%, transparent);
		}
	}

	.mobile-sheet-tabs {
		flex-shrink: 0;
		display: flex;
		gap: 0.35rem;
		/* Match quick-live padding-inline */
		padding: 0 1rem 0.5rem;
	}

	.mobile-sheet-tab {
		flex: 1;
		/* Match app .btn / quick-live action sizing */
		min-height: var(--app-btn-min-h, 2.25rem);
		padding: var(--app-btn-pad-y, 0.5rem) var(--app-btn-pad-x, 1rem);
		border: 1px solid transparent;
		border-radius: 0.75rem;
		background: transparent;
		color: var(--clr-text-medium, #999);
		font-family: var(--app-btn-font, inherit);
		font-size: var(--app-btn-fs, 0.875rem);
		font-weight: var(--app-btn-fw, 500);
		letter-spacing: -0.01em;
		line-height: 1.2;
		cursor: pointer;
		-webkit-font-smoothing: antialiased;
		transition-property: background-color, border-color, color, scale;
		transition-duration: 150ms;
		transition-timing-function: ease-out;

		&:active {
			scale: 0.96;
		}

		&:focus-visible {
			outline: 2px solid var(--clr-focus);
			outline-offset: 2px;
		}

		&.is-active {
			/* Same wash as map-overlay inset / quick-live point rows */
			background: var(--map-overlay-inset-bg, color-mix(in srgb, var(--clr-text-high, #fff) 8%, transparent));
			color: var(--clr-text-high, #fff);
			border-color: color-mix(in srgb, var(--clr-text-high, #fff) 12%, transparent);
		}
	}

	.mobile-sheet-body {
		flex: 1 1 0;
		min-height: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		touch-action: pan-y;
		overscroll-behavior: contain;
	}

	/* Collapsed peek: chrome only (handle + tabs) — no clipped list bleed */
	.mobile-sheet[data-height="peek"] .mobile-sheet-body {
		visibility: hidden;
		pointer-events: none;
	}

	.mobile-sheet-panel {
		display: none;
		flex: 1 1 0;
		min-height: 0;
		/* Sole outer frame — the tree/detail child scrolls (avoid nested scroll jank) */
		overflow: hidden;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
		overscroll-behavior: contain;

		&.is-active {
			display: flex;
			flex-direction: column;
		}
	}

	.mobile-sheet-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		z-index: calc(var(--mobile-sheet-expanded-z) - 1);
		background: rgba(0, 0, 0, 0.35);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;

		&.is-active {
			display: block;
			opacity: 1;
			pointer-events: auto;
		}
	}
}

@media (min-width: 992px) {
	.mobile-sheet,
	.mobile-sheet-backdrop {
		display: none !important;
	}
}

/* Immersive map mode — native FS fallback on any viewport */
body.map-immersive .mobile-sheet,
body.map-immersive .mobile-sheet-backdrop,
body.map-immersive .mobile-menu-toggle,
body.map-immersive .topbar-menu-toggle,
body.map-immersive .sidebar,
body.map-immersive .sidebar-overlay,
body.map-immersive .topbar,
body.map-immersive .scenario-create-sheet,
body.map-immersive .compare-hero {
	display: none !important;
}

body.map-immersive .main-content-wrapper {
	margin-inline-start: 0 !important;
}

body.map-immersive .page-wrapper {
	padding: 0 !important;
	height: 100dvh !important;
	max-height: 100dvh !important;
}

.map-immersive-exit {
	display: none;
	position: fixed;
	top: max(0.75rem, env(safe-area-inset-top));
	inset-inline-end: max(0.75rem, env(safe-area-inset-right));
	z-index: var(--mobile-sheet-exit-z);
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	border: none;
	background: var(--clr-surface-1, #121212);
	color: var(--clr-text-high, #fff);
	font-size: var(--fs-450, 0.875rem);
	font-weight: 500;
	cursor: pointer;
	box-shadow: var(--shadow-chrome);
	transition-property: scale, box-shadow, background-color;
	transition-duration: 0.15s;
	transition-timing-function: ease;

	&:active {
		scale: 0.96;
	}

	&:focus-visible {
		outline: 2px solid var(--clr-focus);
		outline-offset: 2px;
	}
}

body.map-immersive .map-immersive-exit {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
	.mobile-sheet,
	.mobile-sheet-backdrop,
	.mobile-sheet-tab,
	.map-immersive-exit {
		transition-duration: 0.01ms !important;
	}

	.mobile-sheet-tab:active,
	.map-immersive-exit:active {
		scale: 1;
	}
}