/*
 * Form module styles. Self-contained: every value falls back to its own default,
 * so the form also works outside the landing page. On the landing page it picks
 * up the page tokens (--u, --moo-*). Sizes are 1pt of the 1920 artboard (--f-u),
 * with pixel floors so nothing gets unreadable on a laptop.
 *
 * Classes only for styling; form.js hooks onto data-* (lessons #7).
 */
.moo-entry {
	--f-u: var(--u, .5px);
	--f-navy: var(--moo-navy, #28427d);
	--f-text: var(--moo-brown, #4f341e);
	--f-sky: var(--moo-sky, #a9dde5);
	--f-placeholder: var(--moo-placeholder, #c9c9c4);
	--f-font: var(--moo-font, system-ui, sans-serif);
	--f-error: #a1261b;
	--f-field-h: max(46px, calc(106.4 * var(--f-u)));
	--f-field-font: max(17px, calc(42 * var(--f-u)));
	--f-small: max(15px, calc(30 * var(--f-u)));

	position: relative;
	/* full column width: inside a flex parent it would shrink to its content,
	   and the full-bleed result band (negative margins) to zero */
	width: 100%;
	box-sizing: border-box;
	color: var(--f-text);
	font-family: var(--f-font);
}
.moo-entry *, .moo-entry *::before, .moo-entry *::after { box-sizing: border-box; }
.moo-entry [hidden] { display: none !important; }

/* visible to screen readers only */
.moo-form__label {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* honeypot: off-screen, never display:none (lessons #12) */
.moo-entry__hp {
	position: absolute !important;
	left: -10000px; top: auto;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* ---------- step 1: code row, as in the design ---------- */
.moo-form__row {
	display: flex;
	justify-content: center;
	gap: calc(19 * var(--f-u));
}

.moo-form__input,
.moo-field__input {
	width: calc(587.6 * var(--f-u));
	height: var(--f-field-h);
	margin: 0;
	padding: 0 calc(56 * var(--f-u));
	border: 2px solid transparent;
	border-radius: 999px;
	background: #fff;
	font: 500 var(--f-field-font) / 1 var(--f-font);
	color: var(--f-text);
	transition: border-color .2s;
}
.moo-form__input::placeholder,
.moo-field__input::placeholder { color: var(--f-placeholder); opacity: 1; }

.moo-form__button {
	min-width: calc(227.6 * var(--f-u));
	height: var(--f-field-h);
	margin: 0;
	padding: 0 calc(40 * var(--f-u));
	border: 0;
	border-radius: 999px;
	background: var(--f-navy);
	color: #fff;
	font: 500 max(17px, calc(38 * var(--f-u))) / 1 var(--f-font);
	cursor: pointer;
	transition: filter .2s, opacity .2s;
}
.moo-form__button:hover { filter: brightness(1.15); }
.moo-form__button:disabled { cursor: progress; opacity: .7; filter: none; }
.moo-entry input:focus-visible,
.moo-entry button:focus-visible,
.moo-entry a:focus-visible { outline: 3px solid var(--f-text); outline-offset: 3px; }

/* busy: a small spinner after the label */
.is-busy .moo-form__button[type="submit"]::after {
	content: "";
	display: inline-block;
	width: .8em; height: .8em;
	margin-left: .5em;
	vertical-align: -.1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: moo-spin .7s linear infinite;
}
@keyframes moo-spin { to { transform: rotate(360deg); } }

.moo-entry__turnstile { display: flex; justify-content: center; }
.moo-entry__turnstile:not(:empty) { margin-top: calc(24 * var(--f-u)); }

/* message line, in the style of msg-sorry: brown, heavy */
.moo-entry__msg {
	margin: 0;
	text-align: center;
	font-weight: 700;
	font-size: max(16px, calc(34 * var(--f-u)));
	line-height: 1.3;
}
.moo-entry__msg:not(:empty) { margin-top: calc(28 * var(--f-u)); }
.moo-entry__msg.is-error { font-weight: 900; }

/* ---------- step 2: details card ---------- */
.moo-details {
	width: min(100%, calc(1180 * var(--f-u)));
	margin: 0 auto;
	padding: calc(64 * var(--f-u)) calc(80 * var(--f-u)) calc(70 * var(--f-u));
	border-radius: calc(56 * var(--f-u));
	background: rgba(255, 255, 255, .45);
	box-shadow: 0 calc(18 * var(--f-u)) calc(60 * var(--f-u)) rgba(40, 66, 125, .12);
	text-align: left;
}
.moo-details__title {
	margin: 0;
	text-align: center;
	font: 900 max(21px, calc(49 * var(--f-u))) / 1.2 var(--f-font);
	color: var(--f-text);
}
.moo-details__title:focus { outline: none; }
.moo-details__text {
	margin: calc(14 * var(--f-u)) 0 0;
	text-align: center;
	font-weight: 500;
	font-size: max(16px, calc(34 * var(--f-u)));
	line-height: 1.3;
}
.moo-details__code {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 4px calc(24 * var(--f-u));
	margin: calc(24 * var(--f-u)) 0 0;
	font-size: var(--f-small);
}
.moo-details__code strong { font-weight: 900; letter-spacing: .08em; }
.moo-details__change {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	color: var(--f-navy);
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}

.moo-details__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(20 * var(--f-u)) calc(32 * var(--f-u));
	margin-top: calc(44 * var(--f-u));
}
.moo-field { min-width: 0; }
.moo-field__label {
	display: block;
	margin: 0 0 calc(10 * var(--f-u)) calc(32 * var(--f-u));
	font-weight: 700;
	font-size: var(--f-small);
}
.moo-field__input { width: 100%; padding: 0 calc(40 * var(--f-u)); }
.moo-field__error {
	margin: 0;
	padding: 0 calc(32 * var(--f-u));
	color: var(--f-error);
	font-weight: 700;
	font-size: max(14px, calc(26 * var(--f-u)));
	line-height: 1.3;
}
.moo-field__error:not(:empty) { margin-top: calc(8 * var(--f-u)); }
.is-invalid .moo-field__input { border-color: var(--f-error); }

.moo-check {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	column-gap: calc(18 * var(--f-u));
	margin-top: calc(28 * var(--f-u));
	padding-left: calc(32 * var(--f-u));
}
.moo-details__grid + .moo-check { margin-top: calc(40 * var(--f-u)); }
.moo-check__box {
	width: max(22px, calc(40 * var(--f-u)));
	height: max(22px, calc(40 * var(--f-u)));
	margin: 0;
	accent-color: var(--f-navy);
	cursor: pointer;
}
.moo-check__label {
	font-weight: 500;
	font-size: var(--f-small);
	line-height: 1.35;
	cursor: pointer;
}
.moo-check__label a { color: var(--f-navy); font-weight: 700; text-underline-offset: .2em; }
.moo-check .moo-field__error { grid-column: 2; padding: 0; }
.moo-check.is-invalid .moo-check__box { outline: 2px solid var(--f-error); outline-offset: 2px; }

.moo-details .moo-entry__msg.is-error { color: var(--f-error); }
.moo-details__submit { display: block; margin: calc(44 * var(--f-u)) auto 0; }

/* ---------- result band, in the style of msg-won / msg-sorry ---------- */
.moo-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(369 * var(--f-u));
	padding: calc(40 * var(--f-u)) calc(60 * var(--f-u));
	text-align: center;
}
.moo-result:focus { outline: none; }
/* confetti from msg-won-el.pdf (scripts/export-confetti.py), on the 1920 band */
.moo-result--won {
	position: relative;
	width: min(100vw, calc(1920 * var(--f-u)));
	margin-inline: calc(50% - min(50vw, 960 * var(--f-u)));
	background: url("../assets/confetti.svg") center / calc(1920 * var(--f-u)) auto no-repeat;
}
.moo-result__title {
	margin: 0;
	font: 900 max(24px, calc(49 * var(--f-u))) / 1.2 var(--f-font);
	color: var(--f-text);
}
.moo-result__text {
	max-width: calc(900 * var(--f-u));
	margin: calc(16 * var(--f-u)) 0 0;
	font-weight: 700;
	font-size: max(17px, calc(36 * var(--f-u)));
	line-height: 1.3;
}
.moo-result__text:empty { display: none; }
.moo-result__again { margin-top: calc(36 * var(--f-u)); }
.moo-result--closed { min-height: calc(200 * var(--f-u)); }

/* ---------- entrance ---------- */
.moo-entry .is-entering { animation: moo-entry-in .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes moo-entry-in {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.moo-entry .is-entering { animation: none; }
	.is-busy .moo-form__button[type="submit"]::after { animation-duration: 2s; }
}

/* ---------- mobile ---------- */
@media (max-width: 767.98px) {
	.moo-entry { --f-field-h: 52px; --f-field-font: 16px; --f-small: 15px; }
	.moo-form__row { flex-wrap: wrap; gap: 10px; }
	.moo-form__input { width: 100%; padding: 0 22px; }
	.moo-form__button { width: 100%; padding: 0 22px; font-size: 17px; }

	.moo-details { padding: 26px 18px 28px; border-radius: 24px; }
	.moo-details__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
	.moo-field__label { margin: 0 0 6px 18px; }
	.moo-field__input { padding: 0 20px; }
	.moo-field__error { padding: 0 18px; }
	.moo-check { padding-left: 4px; column-gap: 12px; margin-top: 16px; }
	.moo-details__grid + .moo-check { margin-top: 22px; }
	.moo-details__submit { width: 100%; margin-top: 24px; }

	.moo-result { min-height: 220px; padding: 36px 16px; }
	.moo-result--won { width: 100vw; margin-inline: calc(50% - 50vw); background-size: auto 100%; }
	.moo-result__again { width: 100%; }
}