/* ============================================================================
 * Free to Build — form controls, FALLBACK ONLY
 *
 * ⚠️ THE THEME OWNS HOW A FORM LOOKS. Read this before adding anything here.
 *
 * The theme's sections.css carries ~120 rules for forms inside `.ftb-form__card`, targeting
 * ELEMENTS (input, select, textarea, label, button) with a doubled class - so it wins over
 * anything in this file AND applies to the plugin's markup automatically. It is also the
 * better treatment: 19px so iOS does not zoom on focus, a border one tier stronger than the
 * card's for reading at arm's length in poor light, a soft brass focus ring, the settle
 * transition.
 *
 * Thomas, 2026-09-30, twice: "the background of the text fields is almost black", then "on
 * the waitlist, there's a nice fade-in. It's subtle, and on the scorecard, it's very
 * aggressive, the brass color." Both times the cause was this file re-implementing something
 * the theme already did properly. Then: "I'm not sure why you're trying to fight the theme,
 * man." He was right. The first version of this file duplicated field colours, focus rings,
 * selects and the consent row, lost every one of those fights inside the card, and quietly
 * looked different outside it.
 *
 * So: where the theme has an opinion, the theme wins and this file stays out. Field spacing,
 * the checkbox divider and select positioning are keyed to `.ftb-form__field` IN THE THEME,
 * listed next to WS Form's old wrapper class, rather than reimplemented here.
 *
 * WHAT BELONGS HERE, and nothing else:
 *   1. markup the theme has no concept of - the required marker, the honeypot, autofill
 *   2. a plain fallback for a form rendered OUTSIDE .ftb-form__card, so it is never unstyled
 *
 * Before adding a rule, check sections.css. If the theme already styles it, let it.
 * ========================================================================= */

.ftb-form--bare .ftb-form__field {
	margin-bottom: var(--space-5);
}

.ftb-form--bare .ftb-form__field label {
	display: block;
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	margin-bottom: var(--space-2);
}

/*
 * The required marker. Brass, so it reads as part of the system rather than as an error,
 * and aria-hidden in the markup because the input already carries `required` — a screen
 * reader announces that properly and would otherwise also read out "star".
 */
.ftb-form__req {
	color: var(--brass-on-ink);
	font-weight: var(--font-weight-medium);
}

/*
 * ⚠️ THE THEME WINS INSIDE ITS OWN CARD, DELIBERATELY.
 *
 * sections.css styles every field inside .ftb-form__card with a doubled class, so those
 * rules beat these. That is correct and this file does not try to out-specify it: the theme
 * version is the more considered one (19px to stop iOS zooming on focus, a stronger border
 * for reading at arm's length in poor light, and the settle transition), and two sheets
 * fighting over the same control is how a form ends up looking different on two pages.
 *
 * These rules are the fallback for a form rendered WITHOUT that card - the scorecard's lead
 * form on its own page, and anywhere a form is dropped in future.
 */
.ftb-form--bare .ftb-form__field input,
.ftb-form--bare .ftb-form__field select,
.ftb-form--bare .ftb-form__field textarea {
	width: 100%;
	min-height: 54px;
	padding: 0 var(--space-4);
	font-family: inherit;
	font-size: var(--font-size-body);
	color: var(--ink-text);
	background: var(--ink-raised);
	border: 1px solid var(--ink-border);
	border-radius: var(--radius-sm);
}

/* A textarea is multi-line, so it needs real vertical padding and a sane resize handle. */
.ftb-form--bare .ftb-form__field textarea {
	min-height: 96px;
	padding: var(--space-3) var(--space-4);
	line-height: 1.5;
	resize: vertical;
}

/*
 * The native select arrow is drawn in the OS's own colours and reads as a light-mode
 * artefact on this ground, so it is replaced with an inline SVG chevron. A data URI rather
 * than a file: one fewer request, and it cannot 404.
 */
.ftb-form--bare .ftb-form__field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: var(--space-10);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23C7C3B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-4) center;
	background-size: 12px 8px;
}

/*
 * ⚠️ AUTOFILL. Chrome and Safari paint their own pale blue ground on any field filled
 * from a saved value - white-on-blue over a dark form, which is what Thomas saw picking an
 * email from the browser's dropdown. `background-color` cannot override it; the UA style is
 * applied at a level ordinary declarations do not reach.
 *
 * The working trick is an inset box-shadow thick enough to cover the field, plus a long
 * background-color transition so the UA's own paint never gets a frame to show. -webkit-
 * only on purpose: Firefox does not do this, and its prefixed selector would be invalid
 * here and invalidate the whole rule.
 *
 * `background-clip: text` keeps the TEXT colour ours - without it the glyphs stay in the
 * browser's near-black autofill ink and vanish into the shadow.
 */
.ftb-form__field input:-webkit-autofill,
.ftb-form__field input:-webkit-autofill:hover,
.ftb-form__field input:-webkit-autofill:focus,
.ftb-form__field select:-webkit-autofill,
.ftb-form__field textarea:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--ink-raised) inset;
	box-shadow: 0 0 0 1000px var(--ink-raised) inset;
	-webkit-text-fill-color: var(--ink-text);
	caret-color: var(--ink-text);
	transition: background-color 100000s ease-in-out 0s;
}

/*
 * FOCUS. A soft brass glow, not a hard outline.
 *
 * ⚠️ THIS MATCHES THE THEME'S CARD TREATMENT ON PURPOSE. The first version here was
 * `outline: 2px solid` + offset, which next to the theme's 3px 28%-opacity halo looked like
 * a different design system. Thomas: "on the waitlist, there's a nice fade-in. It's subtle,
 * and on the scorecard, it's very aggressive, the brass color."
 *
 * The same control should focus the same way on every page, so the better of the two wins
 * and this one is brought to it rather than the theme being dragged down to a bare outline.
 * The transition is what makes it read as a fade rather than a snap.
 *
 * `outline: none` is safe ONLY because the border and the ring together are a clearly
 * visible focus indicator - never remove the outline without replacing it with one.
 */
.ftb-form--bare .ftb-form__field input,
.ftb-form--bare .ftb-form__field select,
.ftb-form--bare .ftb-form__field textarea {
	transition:
		border-color 180ms var(--ease-settle, cubic-bezier(.2, 0, 0, 1)),
		box-shadow 180ms var(--ease-settle, cubic-bezier(.2, 0, 0, 1)),
		background 180ms var(--ease-settle, cubic-bezier(.2, 0, 0, 1));
}

.ftb-form--bare .ftb-form__field input:focus,
.ftb-form--bare .ftb-form__field select:focus,
.ftb-form--bare .ftb-form__field textarea:focus {
	outline: none;
	border-color: var(--brass-light);
	box-shadow: 0 0 0 3px rgba(201, 164, 95, 0.28);
	background: var(--ink-base);
}

.ftb-form--bare .ftb-form__consent {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	/* More room below than above: the consent row is the last thing read before the button,
	   and at space-6 the two sat close enough to look like one block. */
	margin: var(--space-6) 0 var(--space-8);
	font-size: var(--font-size-small);
	color: var(--ink-text-secondary);
	cursor: pointer;
}

.ftb-form--bare .ftb-form__consent input {
	/* Nudged down so the box sits on the first line's baseline rather than its box top. */
	margin-top: 4px;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	accent-color: var(--brass-on-ink);
}

.ftb-form__fineprint {
	font-size: var(--font-size-xs);
	color: var(--ink-text-muted);
	margin: var(--space-4) 0 0;
}

.ftb-form__notice {
	padding: var(--space-4);
	margin-bottom: var(--space-6);
	background: var(--ink-overlay);
	border-left: 3px solid var(--brass-on-ink);
	border-radius: var(--radius-xs);
	font-size: var(--font-size-small);
}

/*
 * The honeypot. Positioned off-screen rather than display:none or hidden — a bot skips
 * anything the CSS obviously hides, but fills a text input that is simply somewhere else on
 * the page. aria-hidden and tabindex="-1" in the markup keep it away from screen readers
 * and the keyboard.
 */
.ftb-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ----------------------------------------------------- the waitlist success state
 *
 * Shown in place of the form after a successful join. Lives here rather than in a
 * stylesheet of its own: four rules do not earn a file, and they are only ever rendered by
 * the same template as the form above.
 *
 * No padding or width — the theme's form card still owns those.
 */
.ftb-waitlist__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brass-on-ink);
	margin: 0 0 var(--space-3);
}

.ftb-waitlist__title {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-heading);
	line-height: 1.2;
	margin: 0 0 var(--space-4);
}

.ftb-waitlist__lede p {
	color: var(--ink-text-secondary);
	margin: 0 0 var(--space-6);
}