/* Web-push opt-in card (App P1b, 2026-07-05).
 *
 * JS-injected bottom card (components/pushOptIn.js), shown once on launch
 * in the INSTALLED-app context (standalone display-mode) while the
 * notification-permission decision is still open — the app-like first-open
 * ask. Sibling of the a2hs-onboarding card (same bottom-card idiom, own
 * classes). Always-loaded via Layout::$defaultSheets for the same reason:
 * the markup can appear on any page, and AJAX transitions never re-send
 * <link> tags. Tiny + inert without the markup.
 *
 * Bicolor mandate: ink card on the pink page, light pill primary CTA,
 * muted text secondary; no accents. */

.push-optin {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-popup);
	display: flex;
	justify-content: center;
	padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
	pointer-events: none;
}

.push-optin__card {
	pointer-events: auto;
	max-width: 24rem;
	background: var(--brand-ink);
	color: var(--brand-bg);
	border-radius: 16px;
	padding: 1rem 1.25rem;
	box-shadow: 0 8px 30px rgba(var(--brand-ink-rgb), 0.35);
	text-align: center;
}

.push-optin__title {
	margin: 0 0 0.4rem;
	font-weight: 800;
	font-size: 1rem;
}

.push-optin__body {
	margin: 0 0 0.8rem;
	font-size: 0.9rem;
	line-height: 1.45;
}

.push-optin__actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.push-optin__enable {
	display: inline-block;
	border: none;
	cursor: pointer;
	background: var(--brand-bg);
	color: var(--brand-ink);
	font-weight: 700;
	font-size: 0.9rem;
	padding: 0.45rem 1.4rem;
	border-radius: var(--brand-radius-pill, 999px);
}

.push-optin__later {
	display: inline-block;
	border: none;
	cursor: pointer;
	background: transparent;
	color: var(--brand-bg);
	opacity: 0.7;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 0.45rem 0.5rem;
	text-decoration: underline;
}