/* iOS Add-to-Home-Screen onboarding card (App P1 — PWA foundation, 2026-07).
 *
 * JS-injected bottom card (components/a2hsOnboarding.js), shown only to
 * iOS-Safari-not-standalone visitors. Always-loaded via Layout::$defaultSheets
 * (same rationale as content-translations: the markup can appear on any page,
 * and AJAX content transitions never re-send <link> tags). Tiny + inert
 * without the markup.
 *
 * Bicolor mandate: ink card on the pink page, light pill CTA; no accents. */

.a2hs-onboarding {
	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;
}

.a2hs-onboarding__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;
}

.a2hs-onboarding__title {
	margin: 0 0 0.4rem;
	font-weight: 800;
	font-size: 1rem;
}

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

.a2hs-onboarding__share-icon {
	vertical-align: -0.25em;
	margin: 0 0.1em;
}

.a2hs-onboarding__dismiss {
	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);
}