/*
 * PickBot Free Picks - landing page styles.
 *
 * DESIGN CONTRACT: this stylesheet CONSUMES the theme's --pb-* custom properties and
 * DEFINES NONE. Renaming or removing a token is therefore a breaking change for this
 * plugin, and no test will catch it - identical to the Intelligence Lab's recorded D-3
 * contract. Do not "fix" that by copying the variables in here; that forks the design
 * system and the two copies drift.
 *
 * Tokens consumed (9): --pb-ground --pb-surface --pb-raised --pb-text --pb-text-2
 *                      --pb-muted --pb-signal --pb-hairline --pb-wide
 *
 * Accent discipline: --pb-signal appears on the headline's final stop, the primary CTA and
 * one focus ring. The brand rule is that chartreuse represents the signal, so it is spent
 * once - the accent ink budget is ~2.5% and this page stays well inside it.
 *
 * Contrast: body-size text uses --pb-muted (6.2:1 on this ground), never --pb-faint, which
 * measures 3.18:1 and is below AA for body text. That figure is already recorded in this
 * project; it is not re-derived here.
 */

.pbfp {
	color: var(--pb-text);
	background: var(--pb-ground);
}

.pbfp-wrap {
	max-width: var(--pb-wide, 1240px);
	margin-inline: auto;
	padding-inline: 20px;
}

/* ---------- 1. Hero ---------- */

.pbfp-hero {
	position: relative;
	padding-block: clamp(48px, 9vw, 104px);
	overflow: hidden;
}

/*
 * The scrim is a CSS layer, never baked into the image. It stays present through the whole
 * section, protects the copy region, and is what carries contrast for the eyebrow, headline,
 * body, consent text and compliance line.
 */
.pbfp-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		var(--pb-ground) 0%,
		color-mix(in srgb, var(--pb-ground) 88%, transparent) 46%,
		color-mix(in srgb, var(--pb-ground) 52%, transparent) 100%
	);
	pointer-events: none;
}

.pbfp-hero > .pbfp-wrap {
	position: relative;
}

.pbfp-eyebrow {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pb-muted);
	margin: 0 0 14px;
}

.pbfp-h1 {
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
	/* Two deliberate lines on mobile; the desktop rule meets it exactly at 781px so
	   there is no seam at the breakpoint. */
	font-size: clamp(38px, 4.6vw, 66px);
	max-width: 18ch;
}

.pbfp-h1::after {
	content: ".";
	color: var(--pb-signal);
}

.pbfp-sub {
	font-size: 17px;
	line-height: 1.55;
	color: var(--pb-text-2);
	max-width: 46ch;
	margin: 0 0 26px;
}

.pbfp-compliance {
	font-size: 13px;
	line-height: 1.5;
	color: var(--pb-muted);
	max-width: 60ch;
	margin: 22px 0 0;
}

/* ---------- Form ---------- */

.pbfp-form {
	max-width: 420px;
	display: grid;
	gap: 14px;
}

.pbfp-field {
	display: grid;
	gap: 6px;
}

.pbfp-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--pb-text);
}

.pbfp-optional {
	font-weight: 400;
	color: var(--pb-muted);
}

.pbfp-input {
	width: 100%;
	padding: 13px 14px;
	font-size: 16px; /* 16px prevents iOS zoom-on-focus. */
	color: var(--pb-text);
	background: var(--pb-surface);
	border: 1px solid var(--pb-hairline);
	border-radius: 4px;
}

.pbfp-input:focus-visible {
	outline: 2px solid var(--pb-signal);
	outline-offset: 2px;
}

.pbfp-cta {
	display: inline-block;
	padding: 15px 22px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--pb-ground);
	background: var(--pb-signal);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.pbfp-cta--ghost {
	color: var(--pb-text);
	background: transparent;
	border: 1px solid var(--pb-hairline);
}

.pbfp-cta:focus-visible {
	outline: 2px solid var(--pb-text);
	outline-offset: 3px;
}

.pbfp-consent {
	font-size: 12px;
	line-height: 1.5;
	color: var(--pb-muted);
	margin: 0;
}

.pbfp-error {
	margin: 0;
	font-size: 13px;
	color: var(--pb-text);
}

.pbfp-error--shown {
	padding: 10px 12px;
	background: var(--pb-raised);
	border-left: 3px solid var(--pb-signal);
	border-radius: 2px;
}

/*
 * Honeypot. Off-screen rather than display:none, because some bots skip hidden inputs but
 * fill positioned ones. aria-hidden and tabindex="-1" keep it away from people entirely.
 */
.pbfp-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Thank-you state ---------- */

.pbfp-thanks {
	max-width: 520px;
	padding: 24px;
	background: var(--pb-surface);
	border: 1px solid var(--pb-hairline);
	border-radius: 6px;
}

.pbfp-thanks__h {
	margin: 0 0 10px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 26px;
}

.pbfp-thanks__primary {
	margin: 18px 0 6px;
}

.pbfp-secondary,
.pbfp-muted {
	font-size: 13px;
	color: var(--pb-muted);
}

/* ---------- Sections 2-7 ---------- */

.pbfp-section {
	padding-block: clamp(40px, 6vw, 76px);
	border-top: 1px solid var(--pb-hairline);
}

.pbfp-section h2 {
	font-family: Archivo, system-ui, sans-serif;
	font-size: clamp(24px, 2.6vw, 34px);
	margin: 0 0 20px;
}

.pbfp-list,
.pbfp-steps {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 68ch;
	color: var(--pb-text-2);
	line-height: 1.55;
}

.pbfp-step {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-right: 10px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12px;
	color: var(--pb-ground);
	background: var(--pb-signal);
	border-radius: 50%;
}

/* Wide content scrolls inside its own container; the page never scrolls horizontally. */
.pbfp-tablewrap {
	overflow-x: auto;
}

.pbfp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.pbfp-table th,
.pbfp-table td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--pb-hairline);
	color: var(--pb-text-2);
}

.pbfp-table thead th {
	color: var(--pb-text);
	font-family: Archivo, system-ui, sans-serif;
}

.pbfp-table th[scope="row"] {
	color: var(--pb-text);
	font-weight: 600;
}

.pbfp-responsible p,
.pbfp-community p,
.pbfp-final p {
	max-width: 68ch;
	color: var(--pb-text-2);
	line-height: 1.6;
}

/* ---------- Motion and data preferences ---------- */

@media (prefers-reduced-motion: reduce) {
	.pbfp * {
		transition: none !important;
		animation: none !important;
	}
}

/* Mobile poster only - no hero video on this page at any width. */
@media (max-width: 782px) {
	.pbfp-h1 {
		font-size: min(8.8vw, 38px);
	}

	.pbfp-form {
		max-width: none;
	}
}