/**
 * The Snapshot — modal + invite + question screens.
 *
 * Mobile-first. One question fits at 375px without horizontal scroll; option
 * buttons are >=44px tap targets. All motion is gated behind
 * (prefers-reduced-motion: no-preference) and the JS `data-snap-no-motion`
 * hook, so reduced-motion users get instant screen switches with no transition.
 *
 * Uses theme tokens only (emerald/black/white, Prata/Raleway) from base.css.
 */

/* ---- Body scroll lock while open ------------------------------- */
/* snapshot.js pads body by the scrollbar width before adding this class, so
   hiding overflow doesn't shift the page (and sticky header) sideways. */
body.snap-lock {
	overflow: hidden;
}

/* ---- Overlay + centering --------------------------------------- */
.snap-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-sm);
}

.snap-modal[hidden] {
	display: none;
}

.snap-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 15, 16, 0.72);
	border: 0;
	cursor: pointer;
}

.snap-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 34rem;
	max-height: calc(100vh - 2 * var(--space-sm));
	max-height: calc(100dvh - 2 * var(--space-sm));
	overflow-y: auto;
	background: var(--white);
	color: var(--ink-900);
	border-radius: var(--radius);
	padding: var(--space-lg) var(--space-md) var(--space-md);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

/* ---- Close button ---------------------------------------------- */
.snap-modal__close {
	position: absolute;
	top: var(--space-2xs);
	right: var(--space-2xs);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--ink-700);
	background: transparent;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
}

.snap-modal__close:hover {
	color: var(--green);
}

.snap-modal__close:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* ---- Screens container ----------------------------------------- */
.snap-modal__screens {
	display: block;
}

.snap-screen {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

/* `[hidden]` must win over the display:flex above (class+attr specificity),
   or the empty result/qualifying/capture/full slots render and drag the
   honeypot into the tab order. */
.snap-screen[hidden] {
	display: none;
}

/* ---- Invite ---------------------------------------------------- */
.snap-invite__lead {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	line-height: 1.3;
	color: var(--ink-900);
	margin: 0;
}

.snap-invite__start {
	align-self: flex-start;
}

/* ---- Progress -------------------------------------------------- */
.snap-progress {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.snap-progress__label {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--grey-text);
	margin: 0;
}

.snap-progress__track {
	height: 4px;
	background: var(--grey-bg);
	border-radius: 999px;
	overflow: hidden;
}

.snap-progress__bar {
	display: block;
	height: 100%;
	background: var(--green-vibrant);
	border-radius: 999px;
}

/* ---- Question -------------------------------------------------- */
.snap-question__text {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	line-height: 1.35;
	color: var(--ink-900);
	margin: 0;
}

/* ---- Options (large tap targets, no numbers) ------------------- */
.snap-options {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.snap-option {
	display: block;
	width: 100%;
	min-height: 44px;
	text-align: left;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink-900);
	background: var(--paper);
	border: 1px solid var(--grey-bg);
	border-radius: var(--radius);
	padding: var(--space-xs) var(--space-sm);
	cursor: pointer;
}

.snap-option:hover {
	border-color: var(--green-vibrant);
	background: color-mix(in srgb, var(--green-vibrant) 8%, var(--paper));
}

.snap-option:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-color: var(--green-vibrant);
}

/* ---- Back ------------------------------------------------------ */
.snap-back {
	align-self: flex-start;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--grey-text);
	background: transparent;
	border: 0;
	padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) 0;
	cursor: pointer;
}

.snap-back:hover {
	color: var(--green);
}

.snap-back:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius);
}

/* ---- Pending placeholder (Task 7 replaces this screen) --------- */
.snap-pending__text {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	color: var(--ink-900);
	margin: 0;
	text-align: center;
	padding: var(--space-lg) 0;
}

/* ---- Result (teaser) ------------------------------------------- */
.snap-result__heading {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	line-height: 1.25;
	color: var(--ink-900);
	margin: 0;
	text-align: center;
}

/* The heading is a programmatic focus target (tabindex=-1) that the flow
   controller focuses while /shape is in flight so focus never jumps to Close.
   It is not keyboard-reachable, so suppress the focus box — aria-live still
   announces it, and sighted keyboard users see focus on real controls on Tab. */
.snap-result__heading:focus {
	outline: none;
}

/* The wheel is brand-built for dark surfaces (white labels/icons), so seat it
   on a dark panel inside the white modal — legible, and on-brand. */
.snap-result__wheel,
.snap-full__wheel {
	background: var(--ink-900);
	border-radius: var(--radius);
	padding: var(--space-md) var(--space-sm);
	/* Clip the highlighted-petal glow to the dark panel so it can never bleed
	   over the copy below (as it did when every petal was lit at once). */
	overflow: hidden;
}

/* The wheel wrapper adds its own bottom gap for a (here-absent) CTA — trim it
   so the panel hugs the graphic. */
.snap-result__wheel .wheel,
.snap-full__wheel .wheel {
	gap: 0;
}

.snap-result__teaser {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--ink-800);
	margin: 0;
	text-align: center;
	min-height: 1.5em; /* Reserve space so the layout doesn't jump on fill. */
}

.snap-result__continue {
	align-self: center;
}

.snap-result__continue[disabled] {
	opacity: 0.55;
	cursor: default;
}

/* ---- Forms (qualifying + capture) ------------------------------ */
.snap-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.snap-capture__lead {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	line-height: 1.3;
	color: var(--ink-900);
	margin: 0;
}

.snap-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

.snap-field__label {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--ink-900);
}

.snap-field__input {
	width: 100%;
	min-height: 44px;
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.4;
	color: var(--ink-900);
	background: var(--white);
	border: 1px solid var(--grey-bg);
	border-radius: var(--radius);
	padding: var(--space-2xs) var(--space-xs);
}

.snap-field__input--area {
	min-height: 6rem;
	resize: vertical;
}

.snap-field__input:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-color: var(--green-vibrant);
}

.snap-field__error {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: #A23225; /* Reuse the contact form's error red (sections.css). */
	margin: 0;
}

.snap-form__submit {
	align-self: flex-start;
}

/* ---- Full result ----------------------------------------------- */
.snap-full {
	text-align: center;
}

.snap-full__read {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.55;
	color: var(--ink-800);
	text-align: left;
}

/* ---- Elaborate report (assembled in inc/snapshot-rest.php) ------ */
.snap-report {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	text-align: left;
}

.snap-report__title {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	line-height: 1.2;
	color: var(--ink-900);
	margin: 0;
}

.snap-report__intro {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--ink-800);
	margin: 0;
}

.snap-report__card {
	border-radius: var(--radius);
	padding: var(--space-sm);
	border-left: 3px solid var(--green-vibrant);
	background: color-mix(in srgb, var(--green-vibrant) 7%, var(--paper));
}

.snap-report__card--strain {
	border-left-color: var(--gold);
	background: color-mix(in srgb, var(--gold) 9%, var(--paper));
}

.snap-report__label {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--grey-text);
	margin: 0 0 var(--space-3xs);
}

.snap-report__cond {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	line-height: 1.2;
	color: var(--ink-900);
	margin: 0 0 var(--space-2xs);
}

.snap-report__text {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--ink-800);
	margin: 0;
}

.snap-report__closing {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.55;
	color: var(--ink-800);
	margin: 0;
}

.snap-full__confirm {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--grey-text);
	margin: 0;
}

.snap-full__book {
	align-self: center;
}

.snap-full__retake {
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* Tap-target bar, matching the .btn controls. */
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--grey-text);
	background: transparent;
	border: 0;
	padding: var(--space-2xs) var(--space-sm);
	cursor: pointer;
}

.snap-full__retake:hover {
	color: var(--green);
}

.snap-full__retake:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius);
}

/* ---- Honeypot (visually hidden, still in the a11y-hidden host) - */
.snap-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Motion (opt-in only) -------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.snap-modal:not([data-snap-no-motion]) .snap-modal__dialog {
		animation: snap-rise var(--transition-base);
	}

	.snap-modal:not([data-snap-no-motion]) [data-snap-dynamic] {
		animation: snap-fade var(--transition-base);
	}

	/* Static gated screens (result/qualifying/capture/full) fade in the same
	   way when revealed — display flips from none, restarting the animation. */
	.snap-modal:not([data-snap-no-motion]) .snap-result:not([hidden]),
	.snap-modal:not([data-snap-no-motion]) .snap-qualifying:not([hidden]),
	.snap-modal:not([data-snap-no-motion]) .snap-capture:not([hidden]),
	.snap-modal:not([data-snap-no-motion]) .snap-full:not([hidden]) {
		animation: snap-fade var(--transition-base);
	}

	.snap-option,
	.snap-back,
	.snap-modal__close {
		transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
	}
}

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

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

/* ---- Small phones (>=360px roomier) ---------------------------- */
@media (min-width: 30rem) {
	.snap-modal__dialog {
		padding: var(--space-xl) var(--space-lg) var(--space-lg);
	}
}

/* ---- Landing page (template-parts/page-snapshot.php, /snapshot/) ---- */
/* Full-bleed young-tree render behind the copy; scrim darkest on the left. */
.snapshot-hero.page-hero--media {
	background:
		linear-gradient(90deg, rgba(14, 15, 16, 0.94) 0%, rgba(14, 15, 16, 0.66) 50%, rgba(14, 15, 16, 0.34) 100%),
		url("../tree/maturing.jpg") center / cover no-repeat var(--ink-900);
}

/* Eyebrow / heading / sub come from the shared .page-hero__* rules (base.css)
   so this hero matches the homepage hero. Only the CTA + noscript are local. */
.snapshot-hero__cta {
	margin-bottom: var(--space-md);
}

.snapshot-hero__noscript {
	color: color-mix(in srgb, var(--cream) 70%, transparent);
	font-size: var(--text-sm);
	max-width: 40ch;
}

.snapshot-hero__noscript a {
	color: var(--gold);
}