/* ============================================================
 * flibbr / validation-room.css
 *
 * Surface CSS for /validation-room/ (page-validation-room.php).
 * Lifted verbatim from the locked canonical
 * `flibbr-design-mockup-final-flibbr-validation-room.html`.
 *
 * SCOPE
 * Only the page-specific selectors are in this stylesheet —
 * all page-* chassis selectors are inherited from
 * page-chassis.css, including the .page-label sticky-CTA
 * family which was promoted to chassis at v0.5.34 (open #56
 * closed). The IntersectionObserver footer script that
 * toggles .is-released remains in functions.php since it
 * names the surface-specific anchor target (#enquire).
 *
 * NAMING
 * All page-content selectors live under .page-prose to match
 * the canonical. Op-learning #16: every body-prose-targeted
 * rule is `.page-prose .validation-*` so chassis cascade rules
 * (`.page-prose p { margin: 0 }`) don't override.
 *
 * @package Flibbr
 * @since   0.5.32
 * ============================================================ */


/* ============================================================
 * PAGE-LABEL sticky-CTA pattern
 *
 * Promoted to assets/css/page-chassis.css at v0.5.34 (open #56
 * closed). Chassis now ships:
 *   - .page-label typography baseline (was already chassis)
 *   - .page-label sticky behaviour (was here)
 *   - .page-label.is-released release-state (was here)
 *   - .page-label-text block-level child (was here)
 *   - 880px-down position-static reset (was here)
 *   - .page-label-cta + .page-label-cta-arrow + their :hover
 *     states (was here)
 *
 * This surface still owns the IntersectionObserver footer
 * script in functions.php — it names #enquire as the
 * release-trigger anchor (surface-specific).
 * ============================================================ */


/* ============================================================
 * VALIDATION-CTA-BLOCK — used once on this page in §7
 * ("Bring us a decision"). Routes to /contact/?type=validation.
 *
 * Solid container in --paper-warm. Internal stack: serif H2
 * headline (h2 inherits) · supporting prose · ink-violet pill ·
 * fineprint. Visual treatment is identical to the brand-ai
 * cta-block, ported across the canon as a single CTA-block
 * grammar.
 *
 * Op-learning #16: rules that target an element type (h2, p)
 * inside this block are `.page-prose .validation-cta-block <t>`
 * so they win the cascade against `.page-prose <t>` chassis
 * rules. Bare selectors are used only for elements without
 * a chassis-side equivalent (e.g. .validation-cta-pill).
 * ============================================================ */
.page-prose .validation-cta-block {
	background: var(--paper-warm);
	padding: var(--s-7) var(--s-7) var(--s-8) var(--s-7);
	margin-top: var(--s-8);
	max-width: 60ch;
}
.page-prose .validation-cta-block h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.page-prose .validation-cta-prose {
	margin-top: var(--s-5);
	margin-bottom: var(--s-5);
}
.validation-cta-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	font-family: var(--sans); font-weight: 600;
	font-size: 13px; line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--paper);
	background: var(--accent);
	text-decoration: none;
	transition:
		background var(--motion-duration-ui) var(--motion-ease-ui);
}
.validation-cta-pill:hover {
	background: var(--ink);
	color: var(--paper);
}

/* #210 chassis cascade override — .page-prose a (0,1,1) defeats surface color (0,1,0); class>type wins. */
.page-prose .validation-cta-pill { color: var(--paper); }
.validation-cta-pill-arrow {
	display: inline-block;
	font-size: 15px; line-height: 1;
	transition: transform var(--motion-duration-ui) var(--motion-ease-ui);
}
.validation-cta-pill:hover .validation-cta-pill-arrow {
	transform: translateX(3px);
}
.validation-cta-fineprint {
	margin-top: var(--s-4);
	font-family: var(--sans); font-weight: 400;
	font-size: 12px; line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--ink-quiet);
}
.validation-cta-fineprint em { font-style: italic; }


/* ============================================================
 * VALIDATION-LOOP — the §2 "How an engagement runs" four-step
 * flow. Same numbered-step typographic system as the Brand AI
 * loop (decimal-leading-zero counters). Voice on this page is
 * plainer and more clinical: process documentation, not
 * exhortation.
 * ============================================================ */
.page-prose .validation-loop {
	counter-reset: validation-loop-counter;
	display: flex; flex-direction: column;
	gap: var(--s-6);
	margin-top: var(--s-3);
}
.page-prose .validation-loop-step {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--s-5);
	align-items: baseline;
	counter-increment: validation-loop-counter;
}
.page-prose .validation-loop-step::before {
	content: counter(validation-loop-counter, decimal-leading-zero);
	font-family: var(--sans); font-weight: 600;
	font-size: 13px; line-height: 1;
	letter-spacing: 0.08em;
	color: var(--ink-quiet);
	padding-top: 6px;
}
.validation-loop-step-body {
	display: flex; flex-direction: column;
	gap: var(--s-2);
}
.validation-loop-step-name {
	font-family: var(--serif); font-weight: 600;
	font-size: 19px; line-height: 1.3;
	color: var(--ink);
}
.page-prose .validation-loop-step-prose {
	font-family: var(--serif); font-weight: 400;
	font-size: 17px; line-height: 1.6;
	color: var(--ink-soft);
	margin: 0;
}
.page-prose .validation-loop-step-prose em { font-style: italic; }
@media (max-width: 540px) {
	.page-prose .validation-loop-step {
		grid-template-columns: 1fr;
		gap: var(--s-2);
	}
	.page-prose .validation-loop-step::before {
		padding-top: 0;
	}
}


/* ============================================================
 * VALIDATION-PANEL-ROSTER — §4 starting set of named senior
 * Flibbrati who can sit on Validation Room panels. Each card
 * is a quiet typographic row — name in serif at h3-equivalent
 * weight, role/discipline line in sans below, profile link as
 * a small arrow at the end of the row. No portraits — keeping
 * the page restrained and clinical.
 *
 * Each row links to /flibbrati/{slug}/ — those URLs 404 until
 * Flibbrati posts are published (open #162). Same posture as
 * Consulting case-study links (#154).
 * ============================================================ */
.page-prose .validation-panel-roster {
	display: flex; flex-direction: column;
	border-top: 1px solid var(--rule);
	margin-top: var(--s-5);
}
.page-prose .validation-panel-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--s-4) var(--s-5);
	align-items: baseline;
	padding-block: var(--s-5);
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
	color: inherit;
	transition: background var(--motion-duration-ui) var(--motion-ease-ui);
}
.page-prose .validation-panel-row:hover {
	background: var(--paper-warm);
}
.validation-panel-row-body {
	display: flex; flex-direction: column;
	gap: var(--s-2);
}
.validation-panel-row-name {
	font-family: var(--serif); font-weight: 600;
	font-size: 19px; line-height: 1.25;
	color: var(--ink);
	letter-spacing: -0.005em;
}
.validation-panel-row-role {
	font-family: var(--sans); font-weight: 400;
	font-size: 13px; line-height: 1.45;
	color: var(--ink-quiet);
	letter-spacing: 0.02em;
}
.validation-panel-row-arrow {
	font-family: var(--sans); font-weight: 500;
	font-size: 14px; line-height: 1;
	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);
}
.page-prose .validation-panel-row:hover .validation-panel-row-arrow {
	transform: translateX(3px);
	color: var(--ink);
}
.page-prose .validation-panel-supporting {
	font-style: italic;
	color: var(--ink-soft);
	margin-top: var(--s-5);
	max-width: 60ch;
}


/* ============================================================
 * VALIDATION-REPORT-GATE — §4 gated download for the Sample
 * Validation Panel Report.
 *
 * UX: warm-paper container with explanation paragraph above a
 * four-field form (Name · Company · Designation · Email). All
 * required. On submit the form swaps in-place to a confirmation
 * state — a paragraph telling the visitor the two sample reports
 * are on their way to their inbox from
 * validation@flibbrconsulting.com.
 *
 * v0.5.32 SHIPS B''-STATIC: form renders, demo-script intercepts
 * submit and shows confirmation, but no email is actually sent.
 * Real wiring is logged as open #202 — Fluent Forms instance +
 * FluentSMTP transactional email + MailPoet segment tag (alias
 * for canonical-side opens #77 / #78). PDFs already exist at
 * /mnt/project/flibbrsamplevalidationpanelreport*.pdf.
 *
 * Op-learning #16: every form-internal selector prefixed
 * `.page-prose` so chassis input/label rules don't override.
 * Op-learning #10: <button> styled to look like a non-button
 * has explicit `border: 0; font: inherit;` baseline.
 * ============================================================ */
.page-prose .validation-report-gate {
	background: var(--paper-warm);
	padding: var(--s-7);
	margin-top: var(--s-7);
	max-width: 60ch;
}
.page-prose .validation-report-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;
}
.page-prose .validation-report-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;
}
.page-prose .validation-report-gate-headline em { font-style: italic; }
.page-prose .validation-report-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;
}
.page-prose .validation-report-gate-prose em { font-style: italic; }

/* form layout */
.page-prose .validation-report-form {
	display: flex; flex-direction: column;
	gap: var(--s-4);
}
.page-prose .validation-report-field {
	display: flex; flex-direction: column;
	gap: var(--s-2);
}
.page-prose .validation-report-label {
	font-family: var(--sans); font-weight: 600;
	font-size: 11px; line-height: 1;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ink-quiet);
}
.page-prose .validation-report-label .req {
	color: var(--accent);
	margin-left: 2px;
	font-weight: 600;
}
.page-prose .validation-report-input {
	display: block;
	width: 100%;
	padding: var(--s-3) var(--s-4);
	font-family: var(--serif); font-weight: 400;
	font-size: 16px; line-height: 1.4;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 0;
	transition: border-color var(--motion-duration-ui) var(--motion-ease-ui);
}
.page-prose .validation-report-input::placeholder {
	color: var(--ink-quiet);
	opacity: 0.6;
}
.page-prose .validation-report-input:focus {
	outline: none;
	border-color: var(--accent);
}
.page-prose .validation-report-input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
/* Honeypot — visible to bots, hidden from humans. */
.page-prose .validation-report-honeypot {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px; height: 1px;
	overflow: hidden;
}
.page-prose .validation-report-submit {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	align-self: flex-start;
	margin-top: var(--s-3);
	padding: var(--s-3) var(--s-5);
	border: 0;
	font: inherit;
	font-family: var(--sans); font-weight: 600;
	font-size: 13px; line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--paper);
	background: var(--accent);
	cursor: pointer;
	transition: background var(--motion-duration-ui) var(--motion-ease-ui);
}
.page-prose .validation-report-submit:hover {
	background: var(--ink);
}
.page-prose .validation-report-submit-arrow {
	display: inline-block;
	font-size: 15px; line-height: 1;
	transition: transform var(--motion-duration-ui) var(--motion-ease-ui);
}
.page-prose .validation-report-submit:hover .validation-report-submit-arrow {
	transform: translateX(3px);
}
.page-prose .validation-report-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);
}
.page-prose .validation-report-fineprint em { font-style: italic; }
.page-prose .validation-report-fineprint a {
	color: var(--ink-quiet);
	border-bottom: 1px solid var(--rule);
}
.page-prose .validation-report-fineprint a:hover {
	color: var(--ink);
	border-bottom-color: var(--accent);
}

/* In-place confirmation state — swapped in by demo script
   on form submission. Hidden by default; .is-shown reveals. */
.page-prose .validation-report-confirmation {
	display: none;
}
.page-prose .validation-report-confirmation.is-shown {
	display: block;
}
.page-prose .validation-report-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;
}
.page-prose .validation-report-confirmation-headline em { font-style: italic; }
.page-prose .validation-report-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;
}
.page-prose .validation-report-confirmation-prose em { font-style: italic; }

/* When the form is submitted, the form itself hides */
.page-prose .validation-report-form.is-hidden {
	display: none;
}


/* ============================================================
 * VALIDATION-NOT-THIS — §6 distinctions list. Four short
 * "not consulting / not a workshop / not a rubber stamp /
 * not productised" lines. Treatment: a thin-rule list with
 * a strong serif "Not X." opener and a sans clarifier line.
 * ============================================================ */
.page-prose .validation-not-this {
	display: flex; flex-direction: column;
	border-top: 1px solid var(--rule);
	margin-top: var(--s-5);
}
.page-prose .validation-not-this-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--s-5);
	padding-block: var(--s-5);
	border-bottom: 1px solid var(--rule);
	align-items: baseline;
}
@media (max-width: 720px) {
	.page-prose .validation-not-this-row {
		grid-template-columns: 1fr;
		gap: var(--s-2);
	}
}
.validation-not-this-label {
	font-family: var(--serif); font-weight: 600;
	font-size: 18px; line-height: 1.25;
	color: var(--ink);
	letter-spacing: -0.005em;
}
.page-prose .validation-not-this-prose {
	font-family: var(--serif); font-weight: 400;
	font-size: 16px; line-height: 1.55;
	color: var(--ink-soft);
	margin: 0;
}
.page-prose .validation-not-this-prose em { font-style: italic; }


/* ============================================================
 * VALIDATION-NOT-CONSULTING — pre-paragraph break utility.
 * Used once in §1, where the bold-led line "Validation is not
 * consulting." opens a new conceptual beat. Specificity (0,2,0)
 * to beat the chassis `.page-prose p { margin: 0 }` per
 * op-learning #16.
 * ============================================================ */
.page-prose .validation-not-consulting {
	margin-top: var(--s-7);
}

/* G.3b — validation-report-submit tap-target */
@media (max-width: 880px) {
  .validation-report-submit {
    min-height: 44px;
  }
}