/* ============================================================
   Support page contact form.
   Kept out of styles.css so a browser holding an older cached
   styles.css never shows the form unstyled (and its spam-trap
   field visible). Uses the same --fm-* and --web-* tokens.
   Fields follow the app's text field: serif body in ink on page,
   framed in ink at stroke-rule, labels in label-sm steel.
   ============================================================ */

.contact-form {
	display: grid;
	gap: var(--fm-space-5);
	margin-top: var(--fm-space-5);
}

/* display: grid would otherwise override the hidden attribute after a message is sent. */
.contact-form[hidden] { display: none; }

.contact-field label {
	display: block;
	margin-bottom: var(--fm-space-2);
	font-family: var(--fm-font-display); font-weight: 600; font-variation-settings: "wdth" var(--fm-wdth-label);
	font-size: var(--fm-fs-label-sm); line-height: var(--fm-lh-label-sm);
	letter-spacing: var(--fm-tracking-label); text-transform: uppercase;
	color: var(--fm-steel);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
	display: block;
	width: 100%;
	min-height: var(--fm-target-min);
	margin: 0;
	padding: var(--fm-space-2) var(--fm-space-3);
	border: var(--fm-stroke-rule) solid var(--fm-ink);
	border-radius: 0;
	background: var(--fm-page);
	color: var(--fm-ink);
	font-family: var(--fm-font-text);
	font-size: var(--fm-fs-body);
	line-height: var(--fm-lh-body);
}

.contact-field textarea { min-height: calc(var(--fm-target-min) * 4); resize: vertical; }

/* A menu that picks a value: the same frame with a downward chevron. */
.contact-select { position: relative; }
.contact-select select { padding-right: calc(var(--fm-space-3) * 3); appearance: none; -webkit-appearance: none; }
.contact-select::after {
	position: absolute; top: 50%; right: var(--fm-space-4);
	width: var(--fm-space-2); height: var(--fm-space-2);
	border-right: var(--fm-stroke-rule) solid var(--fm-ink);
	border-bottom: var(--fm-stroke-rule) solid var(--fm-ink);
	transform: translateY(-75%) rotate(45deg);
	pointer-events: none;
	content: "";
}

.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible {
	outline: var(--fm-focus-width) solid var(--fm-focus);
	outline-offset: var(--fm-focus-offset);
}

.article-body .contact-hint {
	margin-top: var(--fm-space-2);
	font-family: var(--fm-font-display); font-size: var(--fm-fs-meta); line-height: var(--fm-lh-meta);
	color: var(--fm-steel);
}

/* Spam trap: real visitors never see or fill it. */
.contact-honeypot {
	position: absolute;
	left: -10000px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.contact-turnstile:empty { display: none; }

/* Errors use ink text and a plain explanation, never caution. */
.article-body .contact-status { margin-top: 0; }
.article-body .contact-status:empty { display: none; }
/* After sending, the callout panel replaces the form; the heavy frame marks it as the panel that matters. */
.article-body .contact-sent { border-width: var(--fm-stroke-heavy); }
.article-body .contact-status.is-error {
	padding-left: var(--fm-space-3);
	border-left: var(--fm-stroke-heavy) solid var(--fm-ink);
	font-weight: 600;
}

.contact-form .btn { justify-self: start; }
.contact-form .btn:disabled { cursor: progress; opacity: 0.6; }

@media (max-width: 560px) {
	.contact-form .btn { justify-self: stretch; }
}