/*
 * The lead form.
 *
 * Same rules in the modal and in the article gate, so the two never drift.
 * No borders around the box, no grey panels: separation is spacing, as the
 * design language asks.
 */

.leadform::backdrop { background: rgb(0 36 71 / .55); }

.leadform {
	width: min(520px, calc(100vw - 2 * var(--gutter)));
	max-height: calc(100dvh - 2 * var(--space-lg));
	padding: 0;
	border: 0;
	background: var(--page);
	color: var(--text);
	box-shadow: var(--shadow-float);
}

.leadform__box { position: relative; padding: var(--space-lg); }

.leadform--inline {
	max-width: 520px;
	margin-top: var(--space-lg);
	padding: var(--space-lg);
	background: var(--surface);
}

.leadform__close {
	position: absolute;
	inset-inline-end: var(--space-sm);
	top: var(--space-sm);
	display: flex;
	width: 40px;
	height: 40px;
	padding: 8px;
	border: 0;
	background: none;
	color: var(--text);
	cursor: pointer;
}

.leadform__close:hover { color: var(--accent); }

.leadform__title {
	margin: 0 var(--space-lg) var(--space-sm) 0;
	font-size: 26px;
	font-weight: var(--w-ultrabold);
	/* Keeps a year from being left alone on its own line. */
	text-wrap: balance;
}

/*
 * The disclosure sits above the form, never below it. A reader who has
 * already typed their address has passed the point where it helps.
 */
.leadform__disclosure {
	margin: 0 0 var(--space-md);
	font-size: var(--fs-meta);
	line-height: 1.5;
	color: var(--text-soft);
}

.leadform__disclosure[hidden] { display: none; }

/* The honeypot. Out of sight, out of the tab order, and not a display:none
   that a bot can detect as cheaply. */
.leadform__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.leadform__field { margin-bottom: var(--space-sm); }

.leadform__field label { display: block; margin-bottom: 6px; font-size: var(--fs-meta); font-weight: var(--w-bold); }

.leadform__field input {
	width: 100%;
	height: 48px;
	padding-inline: 14px;
	border: 0;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 17px;
}

.leadform--inline .leadform__field input { background: var(--page); }

.leadform__field input[aria-invalid] { box-shadow: inset 0 0 0 2px var(--accent); }

.leadform__error {
	margin: 6px 0 0;
	font-size: 15px;
	font-weight: var(--w-demibold);
	color: var(--accent);
}

.leadform__error[hidden] { display: none; }

.leadform__check { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: var(--space-md) 0; }
.leadform__check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.leadform__check label { font-size: var(--fs-meta); line-height: 1.45; }
.leadform__check .leadform__error { grid-column: 1 / -1; margin-top: 0; }

.leadform__privacy { margin: 0 0 var(--space-md); font-size: 14px; line-height: 1.5; color: var(--text-soft); }
.leadform__privacy a { text-decoration: underline; text-underline-offset: 3px; }
.leadform__privacy a:hover { color: var(--accent); }

.leadform__submit { width: 100%; }

.leadform__fail {
	margin: var(--space-sm) 0 0;
	font-size: var(--fs-meta);
	font-weight: var(--w-demibold);
	color: var(--accent);
}

.leadform__fail[hidden] { display: none; }

/* ---- Success -------------------------------------------------------- */

.leadform__done { text-align: center; }
.leadform__done[hidden] { display: none; }

.leadform__tick {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--space-sm);
	border-radius: 50%;
	background: var(--accent);
	position: relative;
}

.leadform__tick::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 22px;
	height: 12px;
	border-inline-start: 4px solid var(--text-invert);
	border-bottom: 4px solid var(--text-invert);
	transform: translateY(-3px) rotate(-45deg);
}

.leadform__done-title { margin: 0; font-size: 22px; font-weight: var(--w-ultrabold); }
.leadform__done-text { margin: var(--space-xs) 0 var(--space-md); font-size: var(--fs-meta); color: var(--text-soft); }

@media (max-width: 767px) {
	.leadform { width: 100vw; max-width: none; max-height: 92dvh; margin: auto 0 0; }
	.leadform__box { padding: var(--space-md); }
	.leadform__title { font-size: 22px; }
}

/* A dialog that has been scrolled should not scroll the page behind it. */
body:has(dialog[open]) { overflow: hidden; }