/*
 * /join/ and /sign-in/.
 *
 * Deliberately plain, and every value is a design token. These two pages are
 * the first thing a stranger sees with their guard up, so they borrow the
 * card and control language the rest of the site already uses rather than
 * introducing a look of their own.
 */

.oview-authcard {
	inline-size: 100%;
	max-inline-size: 46rem;
	margin-inline: auto;
	margin-block: var(--space-xl);
	padding: var(--space-l);
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-l-2);
}

/* --------------------------------------------------------------------------
 * The step indicator.
 *
 * ⚠️ It exists to say "an email is coming" before it arrives. The commonest
 * support message a verified-signup site gets is "I registered and it says
 * check my email", and naming step 2 out loud is most of the cure.
 * -------------------------------------------------------------------------- */

.oview-steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-s);
	padding-block-end: var(--space-s);
	border-block-end: 1px solid var(--color-border);
}

.oview-steps__step {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.oview-steps__step span {
	display: grid;
	place-items: center;
	inline-size: 2.2rem;
	block-size: 2.2rem;
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border);
	font-size: var(--text-xs);
	line-height: 1;
}

/*
 * ⚠️ `--color-accent-ink`, NOT `--color-accent`, BECAUSE THE BADGE CARRIES TEXT.
 *
 * White on `--color-accent` is 3.72:1, and the step number is `--text-xs`, so
 * it needs 4.5. The palette already has the darker one for exactly this: an
 * accent used as a surface behind small words is ink, not decoration (D117).
 * Found by the mobile gate the day `/join/` was first added to the page list -
 * the page had never been measured.
 */

/* Where you are now. Colour AND weight, so it does not rely on colour alone. */
.oview-steps__step.is-here {
	color: var(--color-text);
	font-weight: 600;
}

.oview-steps__step.is-here span {
	background: var(--color-accent-ink);
	border-color: var(--color-accent-ink);
	color: var(--color-surface);
}

/* --------------------------------------------------------------------------
 * The notice, and the alternative-action line under each form.
 * -------------------------------------------------------------------------- */

.oview-authnote {
	padding: var(--space-s);
	border-radius: var(--radius-s);
	background: var(--color-surface-sunk);
	border-inline-start: 3px solid var(--color-accent);
	font-size: var(--text-xs);
	color: var(--color-text-body);
}

.oview-authalt {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	padding-block-start: var(--space-s);
	border-block-start: 1px solid var(--color-border);
}

.oview-authalt a {
	color: var(--color-accent-ink);
}

/*
 * ⚠️ The honeypot, hidden without `display: none`.
 *
 * A field that is display:none is one a bot can trivially detect and skip, and
 * some autofill tools skip it too. Moved out of view instead, and taken out of
 * the tab order, so a person never meets it and a form-filler still does.
 */
.oview-authcard input[name*="jtrap"] {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * ⚠️ A BROWSER-DEFAULT CHECKBOX IS 13x13, AND WCAG 2.2 SC 2.5.8 WANTS 24.
 *
 * Bricks renders a bare `<input type="checkbox">` with no class of its own, so
 * nothing here had ever sized one. "Stay signed in" was a 13px target - the
 * hardest kind of control to hit on a phone, on the page people use most.
 */
.brxe-form input[type="checkbox"],
.brxe-form input[type="radio"] {
	inline-size: var(--tap-min);
	block-size: var(--tap-min);
	margin-block: 0;
	accent-color: var(--color-accent-ink);
}