/*
 * Raffle Engine donor front end.
 *
 * Hand authored, no build step, consumes only the P0 tokens. Section 10: one
 * accent, generous neutrals, tabular numerals, nothing else. No gradients, no
 * glassmorphism, no colored-icon-in-rounded-square cards.
 *
 * Density here is a conversion surface, not a data tool: wide margins, one
 * action per screen. The entries table in P5 is the opposite and shares these
 * tokens without sharing this file.
 */

.rfl-raffle {
	max-width: var(--rfl-layout-donor-max);
	margin: 0 auto;
	padding: var(--rfl-space-6) var(--rfl-space-4);
	font-family: var(--rfl-font-sans);
	font-size: var(--rfl-size-base);
	line-height: var(--rfl-leading-normal);
	color: var(--rfl-color-text-primary);
}

/* Tabular figures everywhere a number can change under the reader. Section 10
   makes this mandatory: digits that shift width make a counter look unstable. */
.rfl-num {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------------- hero */

.rfl-hero__media {
	display: grid;
	gap: var(--rfl-space-2);
	margin-bottom: var(--rfl-space-6);
}

.rfl-hero__image {
	width: 100%;
	height: auto;
	border-radius: var(--rfl-radius-lg);
	display: block;
}

.rfl-hero__title {
	font-size: var(--rfl-size-3xl);
	font-weight: var(--rfl-weight-bold);
	letter-spacing: var(--rfl-tracking-tight);
	line-height: var(--rfl-leading-tight);
	margin: 0 0 var(--rfl-space-3);
}

.rfl-hero__hook {
	font-size: var(--rfl-size-lg);
	color: var(--rfl-color-text-secondary);
	max-width: var(--rfl-layout-measure);
	margin: 0;
}

/* --------------------------------------------------------------- progress */

.rfl-progress {
	margin: var(--rfl-space-8) 0;
}

.rfl-progress__bar {
	height: 10px;
	border-radius: var(--rfl-radius-pill);
	background: var(--rfl-color-surface-sunken);
	overflow: hidden;
}

.rfl-progress__fill {
	height: 100%;
	background: var(--rfl-color-accent-base);
	border-radius: var(--rfl-radius-pill);
	transition: width var(--rfl-motion-duration-slow) var(--rfl-motion-easing-standard);
}

.rfl-progress__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--rfl-space-4);
	margin: var(--rfl-space-5) 0 0;
}

@media (min-width: 40rem) {
	.rfl-progress__stats {
		grid-template-columns: repeat(4, 1fr);
	}
}

.rfl-stat__label {
	font-size: var(--rfl-size-sm);
	color: var(--rfl-color-text-muted);
	margin: 0 0 var(--rfl-space-1);
}

.rfl-stat__value {
	font-size: var(--rfl-size-xl);
	font-weight: var(--rfl-weight-semibold);
	margin: 0;
}

/* -------------------------------------------------------------- countdown */

.rfl-countdown {
	display: flex;
	align-items: baseline;
	gap: var(--rfl-space-2);
	padding: var(--rfl-space-3) var(--rfl-space-4);
	background: var(--rfl-color-surface-sunken);
	border-radius: var(--rfl-radius-md);
	margin-bottom: var(--rfl-space-8);
}

.rfl-countdown__label {
	font-size: var(--rfl-size-sm);
	color: var(--rfl-color-text-muted);
}

.rfl-countdown__value {
	font-family: var(--rfl-font-mono);
	font-weight: var(--rfl-weight-medium);
}

/* ------------------------------------------------------------ how it works */

.rfl-how {
	margin: var(--rfl-space-8) 0;
}

.rfl-how__title {
	font-size: var(--rfl-size-xl);
	font-weight: var(--rfl-weight-semibold);
	margin: 0 0 var(--rfl-space-5);
}

.rfl-how__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--rfl-space-5);
}

@media (min-width: 48rem) {
	.rfl-how__steps {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--rfl-space-6);
	}
}

.rfl-how__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--rfl-radius-pill);
	background: var(--rfl-color-accent-muted);
	color: var(--rfl-color-accent-base);
	font-weight: var(--rfl-weight-semibold);
	font-size: var(--rfl-size-sm);
	margin-bottom: var(--rfl-space-2);
}

.rfl-how__step-title {
	font-size: var(--rfl-size-base);
	font-weight: var(--rfl-weight-semibold);
	margin: 0 0 var(--rfl-space-1);
}

.rfl-how__step-body {
	margin: 0;
	color: var(--rfl-color-text-secondary);
	font-size: var(--rfl-size-sm);
	line-height: var(--rfl-leading-relaxed);
}

/* ------------------------------------------------------------------ claim */

.rfl-claim {
	margin: var(--rfl-space-8) 0;
	padding: var(--rfl-space-6);
	background: var(--rfl-color-surface-raised);
	border: 1px solid var(--rfl-color-surface-border);
	border-radius: var(--rfl-radius-xl);
}

.rfl-claim__title {
	font-size: var(--rfl-size-xl);
	font-weight: var(--rfl-weight-semibold);
	margin: 0 0 var(--rfl-space-5);
}

.rfl-field {
	margin-bottom: var(--rfl-space-4);
}

.rfl-field--check {
	display: flex;
	align-items: center;
	gap: var(--rfl-space-2);
}

.rfl-label {
	display: block;
	font-size: var(--rfl-size-sm);
	font-weight: var(--rfl-weight-medium);
	margin-bottom: var(--rfl-space-1);
}

.rfl-label--inline {
	margin: 0;
	font-weight: var(--rfl-weight-regular);
}

.rfl-input {
	width: 100%;
	box-sizing: border-box;
	padding: var(--rfl-space-3);
	font-family: inherit;
	font-size: var(--rfl-size-base);
	color: var(--rfl-color-text-primary);
	background: var(--rfl-color-surface-page);
	border: 1px solid var(--rfl-color-surface-border-strong);
	border-radius: var(--rfl-radius-md);
}

.rfl-input:focus-visible,
.rfl-check:focus-visible,
.rfl-button:focus-visible {
	outline: 2px solid var(--rfl-color-accent-ring);
	outline-offset: 2px;
}

.rfl-help {
	margin: var(--rfl-space-1) 0 0;
	font-size: var(--rfl-size-sm);
	color: var(--rfl-color-text-muted);
}

/* The single largest source of support tickets in this category, per section 8.
   Body copy weight and contrast, never fine print. */
.rfl-disclosure {
	margin: var(--rfl-space-5) 0;
	padding: var(--rfl-space-4);
	background: var(--rfl-color-state-warning-muted);
	border-radius: var(--rfl-radius-md);
	font-size: var(--rfl-size-sm);
	line-height: var(--rfl-leading-relaxed);
	color: var(--rfl-color-text-primary);
}

.rfl-payment {
	margin: var(--rfl-space-5) 0;
}

.rfl-error {
	margin: var(--rfl-space-4) 0;
	padding: var(--rfl-space-3) var(--rfl-space-4);
	background: var(--rfl-color-state-danger-muted);
	border-radius: var(--rfl-radius-md);
	color: var(--rfl-color-state-danger);
	font-size: var(--rfl-size-sm);
}

.rfl-button {
	width: 100%;
	padding: var(--rfl-space-4);
	font-family: inherit;
	font-size: var(--rfl-size-base);
	font-weight: var(--rfl-weight-semibold);
	color: var(--rfl-color-accent-fg);
	background: var(--rfl-color-accent-base);
	border: 0;
	border-radius: var(--rfl-radius-md);
	cursor: pointer;
	transition: background var(--rfl-motion-duration-fast) var(--rfl-motion-easing-standard);
}

.rfl-button:hover:not(:disabled) {
	background: var(--rfl-color-accent-hover);
}

.rfl-button:active:not(:disabled) {
	background: var(--rfl-color-accent-active);
}

.rfl-button:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ----------------------------------------------------------------- reveal */

.rfl-reveal {
	margin: var(--rfl-space-8) 0;
	padding: var(--rfl-space-8) var(--rfl-space-6);
	text-align: center;
	background: var(--rfl-color-surface-raised);
	border: 1px solid var(--rfl-color-surface-border);
	border-radius: var(--rfl-radius-xl);
}

.rfl-spinner {
	width: 2rem;
	height: 2rem;
	margin: 0 auto var(--rfl-space-4);
	border: 3px solid var(--rfl-color-surface-border);
	border-top-color: var(--rfl-color-accent-base);
	border-radius: var(--rfl-radius-pill);
	animation: rfl-spin 900ms linear infinite;
}

@keyframes rfl-spin {
	to {
		transform: rotate(360deg);
	}
}

.rfl-reveal__status {
	margin: 0;
	color: var(--rfl-color-text-secondary);
	line-height: var(--rfl-leading-relaxed);
}

.rfl-reveal__reference {
	margin: var(--rfl-space-3) 0 0;
	font-family: var(--rfl-font-mono);
	font-size: var(--rfl-size-xs);
	color: var(--rfl-color-text-muted);
	word-break: break-all;
}

/* The holding state past five minutes. Calm, not alarming: the entry is safe
   and the copy says so. It must not read as an error. */
.rfl-reveal__waiting.is-holding .rfl-spinner {
	animation: none;
	border-top-color: var(--rfl-color-surface-border);
	opacity: 0.4;
}

.rfl-reveal__eyebrow {
	margin: 0;
	font-size: var(--rfl-size-sm);
	text-transform: uppercase;
	letter-spacing: var(--rfl-tracking-wide);
	color: var(--rfl-color-text-muted);
}

/* Section 10: the emotional peak of the product. Real motion, no library. */
.rfl-reveal__number {
	margin: var(--rfl-space-2) 0;
	font-size: var(--rfl-size-reveal);
	font-weight: var(--rfl-weight-bold);
	line-height: 1;
	letter-spacing: var(--rfl-tracking-tight);
	color: var(--rfl-color-accent-base);
}

.rfl-reveal.is-revealed .rfl-reveal__result {
	animation: rfl-reveal var(--rfl-motion-duration-reveal) var(--rfl-motion-easing-reveal) both;
}

@keyframes rfl-reveal {
	from {
		opacity: 0;
		transform: scale(0.94);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.rfl-reveal__amount {
	margin: 0;
	color: var(--rfl-color-text-secondary);
}

/* --------------------------------------------------------------- sold out */

.rfl-soldout {
	margin: var(--rfl-space-8) 0;
	padding: var(--rfl-space-6);
	text-align: center;
	background: var(--rfl-color-surface-sunken);
	border-radius: var(--rfl-radius-xl);
}

.rfl-soldout__title {
	margin: 0 0 var(--rfl-space-2);
	font-size: var(--rfl-size-xl);
	font-weight: var(--rfl-weight-semibold);
}

.rfl-soldout__body,
.rfl-closed {
	margin: 0;
	color: var(--rfl-color-text-secondary);
}

/* ------------------------------------------------------------- fine print */

.rfl-fineprint {
	margin-top: var(--rfl-space-8);
	padding-top: var(--rfl-space-5);
	border-top: 1px solid var(--rfl-color-surface-border);
	font-size: var(--rfl-size-xs);
	line-height: var(--rfl-leading-relaxed);
	color: var(--rfl-color-text-muted);
}

/* ------------------------------------------------------------------ a11y */

@media (prefers-reduced-motion: reduce) {
	.rfl-spinner {
		animation-duration: 2400ms;
	}

	.rfl-progress__fill,
	.rfl-button {
		transition: none;
	}

	.rfl-reveal.is-revealed .rfl-reveal__result {
		animation: rfl-fade var(--rfl-motion-duration-base) linear both;
	}

	@keyframes rfl-fade {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
}

/* -------------------------------------------------------- number prizes */

/*
 * Announced prizes. Under the hero, above the claim form, because a prize on a
 * high number only makes high numbers sell if the donor sees it before they
 * decide.
 */

.rfl-prizes {
	margin: var(--rfl-space-10) 0;
}

.rfl-prizes__title {
	margin: 0 0 var(--rfl-space-2);
	font-size: var(--rfl-size-2xl);
	font-weight: var(--rfl-weight-bold);
	letter-spacing: var(--rfl-tracking-tight);
}

.rfl-prizes__intro {
	margin: 0 0 var(--rfl-space-5);
	max-width: var(--rfl-layout-measure);
	color: var(--rfl-color-text-secondary);
	line-height: var(--rfl-leading-relaxed);
}

.rfl-prizes__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--rfl-space-3);
}

.rfl-prize {
	display: flex;
	align-items: flex-start;
	gap: var(--rfl-space-4);
	padding: var(--rfl-space-4);
	background: var(--rfl-color-surface-raised);
	border: 1px solid var(--rfl-color-surface-border);
	border-radius: var(--rfl-radius-lg);
}

.rfl-prize__number {
	flex: 0 0 auto;
	min-width: 3.5rem;
	padding: var(--rfl-space-2) var(--rfl-space-3);
	text-align: center;
	font-size: var(--rfl-size-xl);
	font-weight: var(--rfl-weight-bold);
	color: var(--rfl-color-accent-fg);
	background: var(--rfl-color-accent-base);
	border-radius: var(--rfl-radius-md);
}

.rfl-prize__body {
	display: block;
}

.rfl-prize__label {
	display: block;
	font-size: var(--rfl-size-lg);
	font-weight: var(--rfl-weight-semibold);
}

.rfl-prize__desc {
	display: block;
	margin-top: var(--rfl-space-1);
	color: var(--rfl-color-text-secondary);
	line-height: var(--rfl-leading-relaxed);
}

.rfl-prize__state {
	display: inline-block;
	margin-top: var(--rfl-space-2);
	font-size: var(--rfl-size-sm);
	font-weight: var(--rfl-weight-medium);
	color: var(--rfl-color-state-success);
}

/*
 * A taken number stays on the page rather than disappearing. Removing it would
 * leave the pitch claiming prizes that are no longer winnable, and a donor who
 * saw it advertised yesterday would think it was never real.
 */
.rfl-prize--gone {
	opacity: 0.65;
}

.rfl-prize--gone .rfl-prize__number {
	color: var(--rfl-color-text-secondary);
	background: var(--rfl-color-neutral-200);
}

.rfl-prize--gone .rfl-prize__state {
	color: var(--rfl-color-text-muted);
}

/*
 * P7 accessibility. Visually hidden, still announced.
 *
 * Used for the countdown's spoken summary, because the ticking digits beside it
 * are aria-hidden: a live region that speaks once a second is worse than none.
 */
.rfl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}