/*
 * dispatch-register.css — page-specific styles for /dispatch/register/
 *
 * Lifted verbatim from the locked canonical
 * flibbr-design-mockup-final-dispatch-register.html (Phase A, v123,
 * 7 May 2026), lines 1799-2068. Three section blocks:
 *
 *   §2 — .preamble   (editorial preamble grid)
 *   §3 — .register   (register-gate; form input styling lives in
 *                     forms.css via .flibbr-form-wrap, scoped to the
 *                     existing Fluent Forms skin)
 *   §4 — .tail       (three-row tail rail, mirrors Contact v7 path-rows)
 *
 * .register-form-state / .register-confirmation rules from the canonical
 * are deliberately omitted — they were mockup-only state-swap markup.
 * Fluent Forms handles its own success state in production.
 *
 * Closes #304 Phase C (CSS half) at v126.
 */


/* ============================================================
   §2.  EDITORIAL PREAMBLE — quiet prose under the masthead.
        Same body-grid scaffold as Single Article and page.php
        fallback. Left page-label rail, prose on the right.
============================================================ */
.preamble {
	padding-block: var(--s-8) var(--s-7);
	border-bottom: 1px solid var(--rule-soft);
}
.preamble-grid {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--s-7);
}
@media (max-width: 800px) {
	.preamble-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}
.preamble-label {
	font-family: var(--sans); font-weight: 600;
	font-size: 11px; line-height: 1;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--accent);
	padding-top: var(--s-2);
}
.preamble-prose {
	max-width: 56ch;
	font-family: var(--serif); font-weight: 400;
	font-size: 17px; line-height: 1.65;
	color: var(--ink-soft);
}
.preamble-prose p { margin: 0 0 var(--s-5) 0; }
.preamble-prose p:last-child { margin-bottom: 0; }
.preamble-prose em { font-style: italic; }
.preamble-prose strong { font-weight: 600; color: var(--ink); }


/* ============================================================
   §3.  REGISTER GATE — paper-warm container that holds the
        Fluent Form. Form-input styling lives in forms.css under
        .flibbr-form-wrap — this file only covers the gate
        wrapper, the kicker/headline/prose/fineprint, and the
        layout grid.
============================================================ */
.register {
	padding-block: var(--s-8) var(--s-9);
	border-bottom: 1px solid var(--rule-soft);
}
.register-grid {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--s-7);
}
@media (max-width: 800px) {
	.register-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}
.register-label {
	font-family: var(--sans); font-weight: 600;
	font-size: 11px; line-height: 1;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--accent);
	padding-top: var(--s-2);
}
.register-gate {
	background: var(--paper-warm);
	padding: var(--s-7);
	max-width: 60ch;
}
.register-gate-kicker {
	font-family: var(--sans); font-weight: 600;
	font-size: 11px; line-height: 1;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 var(--s-4) 0;
}
.register-gate-headline {
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(22px, 2.2vw, 26px);
	line-height: 1.2; letter-spacing: -0.008em;
	color: var(--ink);
	margin: 0 0 var(--s-4) 0;
}
.register-gate-headline em { font-style: italic; }
.register-gate-prose {
	font-family: var(--serif); font-weight: 400;
	font-size: 16px; line-height: 1.6;
	color: var(--ink-soft);
	margin: 0 0 var(--s-6) 0;
}
.register-gate-prose em { font-style: italic; }

/* Form fineprint sits below the Fluent Form. Same grammar as the
   canonical mockup's .register-fineprint, applied here as the
   container's trailing prose row. */
.register-fineprint {
	font-family: var(--sans); font-weight: 400;
	font-size: 11px; line-height: 1.55;
	letter-spacing: 0.02em;
	color: var(--ink-quiet);
	margin-top: var(--s-3);
}
.register-fineprint em { font-style: italic; }
.register-fineprint a {
	color: var(--ink-quiet);
	border-bottom: 1px solid var(--rule);
}
.register-fineprint a:hover {
	color: var(--ink);
	border-bottom-color: var(--accent);
}


/* ============================================================
   §3b.  WELCOME GATE — post-DOI-click landing surface.
         Used by page-dispatch-welcome.php (template = "Dispatch
         Welcome", WP page /welcome/). Reuses the .register-gate
         paper-warm panel and shares grid/label rules above. The
         .register-confirmation-* rules are lifted from the
         locked canonical mockup
         flibbr-design-mockup-final-dispatch-register.html
         lines 1984-1999, where they were originally a JS-swapped
         in-place state. Here they style a permanent landing
         surface so we drop the canonical's `display: none`
         default and skip the .is-shown reveal class.
         Added at v0.5.68 alongside Phase F.5a.
============================================================ */
.register-confirmation-headline {
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(22px, 2.2vw, 26px);
	line-height: 1.2; letter-spacing: -0.008em;
	color: var(--ink);
	margin: 0 0 var(--s-4) 0;
}
.register-confirmation-headline em { font-style: italic; }
.register-confirmation-prose {
	font-family: var(--serif); font-weight: 400;
	font-size: 16px; line-height: 1.6;
	color: var(--ink-soft);
	margin: 0;
	max-width: 56ch;
}
.register-confirmation-prose em { font-style: italic; }

/* MailPoet's [mailpoet_page] chrome rendered inside the gate.
   On real DOI activation MailPoet substitutes its own confirmation
   message; on direct visits the shortcode returns empty (page is
   noindexed). The wrapper gives MailPoet's output some breathing
   room from our confirmation prose above without forcing visual
   weight when the shortcode is empty. */
.welcome-gate-mailpoet {
	margin-top: var(--s-5);
}
.welcome-gate-mailpoet:empty { display: none; }
.welcome-gate-mailpoet p {
	font-family: var(--serif); font-weight: 400;
	font-size: 16px; line-height: 1.6;
	color: var(--ink-soft);
	margin: 0 0 var(--s-3) 0;
}
.welcome-gate-mailpoet p:last-child { margin-bottom: 0; }


/* ============================================================
   §4.  TAIL RAIL — three quiet next-steps. Same path-row
        pattern as Contact v7, downgraded from "doors" to
        "next steps" semantically. Hairline-separated rows.
============================================================ */
.tail {
	padding-block: var(--s-8) var(--s-9);
}
.tail-intro {
	margin-bottom: var(--s-7);
	max-width: 60ch;
}
.tail-headline { margin: 0; }
.tail-supporting {
	margin: var(--s-3) 0 0 0;
	color: var(--ink-soft);
}
.tail-supporting em { font-style: italic; color: var(--ink-quiet); }
.tail-list {
	border-top: 1px solid var(--rule);
}
.tail-row {
	display: grid;
	grid-template-columns: 220px 1fr 24px;
	gap: var(--s-5);
	padding: var(--s-5) 0;
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
	color: inherit;
	transition: padding-left var(--motion-duration-ui) var(--motion-ease-ui);
}
.tail-row:hover {
	padding-left: var(--s-3);
}
@media (max-width: 700px) {
	.tail-row {
		grid-template-columns: 1fr 24px;
		gap: var(--s-2) var(--s-4);
	}
}
.tail-label {
	font-family: var(--sans); font-weight: 600;
	font-size: 12px; line-height: 1;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ink);
	padding-top: 4px;
}
@media (max-width: 700px) {
	.tail-label { grid-column: 1 / -1; }
}
.tail-body {
	font-family: var(--serif); font-weight: 400;
	font-size: 16px; line-height: 1.55;
	color: var(--ink-soft);
}
.tail-body em { font-style: italic; color: var(--ink-quiet); }
.tail-arrow {
	font-family: var(--sans); font-size: 18px;
	color: var(--ink-quiet);
	align-self: center;
	transition: transform var(--motion-duration-ui) var(--motion-ease-ui),
	            color var(--motion-duration-ui) var(--motion-ease-ui);
}
.tail-row:hover .tail-ar2ow {
	transform: translateX(4px);
	color: var(--ink);
}