/* Benecaster account sign-in surfaces: /set-password/ and the signed-out
 * /my-account/ sign-in panel (`feature/customer-surface-redesign`).
 *
 * The fields and buttons are the THEME's: both pages emit the shared
 * .bc-form / .bc-btn contract from site.css. This file adds only the card
 * that frames them and the spacing inside it, and it never restyles a
 * .bc-form__* or .bc-btn rule. Overriding the theme's base form styles from
 * the plugin is how the [hidden] defect happened (CLAUDE.md → Coding
 * Standards).
 *
 * Theme-neutral like account.css: the border is mixed from currentColor, so
 * the card reads correctly on the dark theme and on any light one, and no
 * colour is written here. ⚠ The card is deliberately NOT tinted: the theme's
 * inputs are one step lighter than the page, and a tinted card hides them.
 *
 * ⚠ The theme's `.bc-page .bc-content h2` and `p` rules (0,2,1) outrank a
 * two-class selector, so every rule that sets an element's margin or size is
 * also written under `.bc-content`, where those rules apply.
 */

.bc-auth {
	max-width: 30rem;
	margin: 0 0 2rem;
	padding: 2rem;
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.bc-auth [hidden] {
	display: none !important;
}

.bc-auth .bc-auth__title,
.bc-content .bc-auth .bc-auth__title {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	line-height: 1.2;
}

.bc-auth .bc-auth__lead,
.bc-content .bc-auth .bc-auth__lead {
	margin: 0 0 1.5rem;
	opacity: 0.8;
}

/* The theme caps .bc-form at its narrow form width; inside the card the card
 * is the measure, so the form fills it. */
.bc-auth .bc-form {
	max-width: none;
}

.bc-auth .bc-form__actions {
	margin-top: 0.5rem;
}

/* One primary action per card, full width: it is the thing to press. */
.bc-auth .bc-form__submit,
.bc-auth__cta {
	display: block;
	width: 100%;
	text-align: center;
}

.bc-auth .bc-form__banner {
	margin: 0 0 1.5rem;
}

.bc-auth .bc-form__banner p + p {
	margin-top: 0.5rem;
}

/* The secondary route (password sign-in, request a new link) under a rule, so
 * it reads as an alternative rather than a second step. */
.bc-auth .bc-auth__alt,
.bc-content .bc-auth .bc-auth__alt {
	margin: 1.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
	font-size: 0.875rem;
	text-align: center;
	opacity: 0.85;
}

.bc-auth .bc-auth__next,
.bc-content .bc-auth .bc-auth__next {
	margin: 0 0 1.5rem;
}

@media (max-width: 520px) {
	.bc-auth {
		margin: 0 0 1rem;
		padding: 1.5rem 1.25rem;
		border-radius: 8px;
	}
}