/* ========================================================================== *
 * # Sheet (the phone menu)
 * ==========================================================================
 * A native <dialog> opened with showModal(): focus is trapped and Escape closes it for free.
 * Slides in from the right, full height; the backdrop is the --scrim token.
 * ========================================================================== */

.sheet {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(360px, 100vw);
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	background: var(--raised);
	color: var(--ink);
	border: 0;
	box-shadow: -12px 0 40px var(--shadow);

	&::backdrop {
		background: var(--scrim);
	}

	&[open] {
		display: flex;
		flex-direction: column;
		animation: sheet-in 200ms var(--transition-ease);
	}
}

@keyframes sheet-in {
	from { transform: translateX(24px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-75) var(--space-100) var(--space-75) var(--space-150);
	padding-top: max(var(--space-75), env(safe-area-inset-top));
	border-bottom: var(--border-width) solid var(--line);
}

.sheet-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-150);
	padding: var(--space-100) var(--space-150) var(--space-150);
	padding-bottom: max(var(--space-150), env(safe-area-inset-bottom));
	overflow-y: auto;
}

.menu-sheet-list {
	display: flex;
	flex-direction: column;
	padding: 0;

	& li {
		list-style: none;
	}
}

.menu-sheet-link {
	display: flex;
	align-items: center;
	min-height: 52px;
	border-bottom: var(--border-width) solid var(--line);
	font-size: var(--h3);
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;

	&:hover,
	&[aria-current] {
		color: var(--pri);
	}
}

.menu-sheet-actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-75);
}

.menu-sheet-whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-50);
	min-height: 44px;
	color: var(--ink-2);
	text-decoration: none;
}