/*
 * The /connexion page (alcaline-members): login, forgotten password, reset
 * and invitation forms.
 *
 * Self-contained on purpose: it does not rely on the theme's form styles,
 * which a utility-first theme (Tailwind's preflight) resets to nothing. Every
 * rule is scoped to .alcaline-connexion, so nothing leaks into the site.
 *
 * A site only sets its colours, anywhere in its own stylesheet or the
 * customiser's additional CSS, by setting these variables — nothing else
 * should need changing. The defaults below are fallbacks (var(--x, default)),
 * so a value set on :root always wins, whatever the order of the stylesheets.
 * Available: --alcaline-accent, -accent-contrast, -focus, -text, -muted,
 * -border, -field, -error, -notice, -radius, -font.
 *
 *   :root {
 *     --alcaline-accent: #1b3258;
 *     --alcaline-focus: #149bd7;
 *   }
 *
 * The file itself stays identical on every site.
 */
.alcaline-connexion {
	--_accent: var(--alcaline-accent, #1f2937);
	--_accent-contrast: var(--alcaline-accent-contrast, #fff);
	--_text: var(--alcaline-text, inherit);
	--_muted: var(--alcaline-muted, #6b7280);
	--_border: var(--alcaline-border, #d1d5db);
	--_field: var(--alcaline-field, #fff);
	--_error: var(--alcaline-error, #b3261e);
	--_notice: var(--alcaline-notice, #1e6b3a);
	--_radius: var(--alcaline-radius, 6px);
	--_font: var(--alcaline-font, inherit);
	--_focus: var(--alcaline-focus, var(--_accent));

	box-sizing: border-box;
	max-width: 28rem;
	margin: 2rem auto;
	color: var(--_text);
	font-family: var(--_font);
	line-height: 1.5;
}

.alcaline-connexion *,
.alcaline-connexion *::before,
.alcaline-connexion *::after {
	box-sizing: inherit;
}

.alcaline-connexion .alcaline-form p {
	margin: 0 0 1rem;
}

.alcaline-connexion .alcaline-intro {
	color: var(--_muted);
}

.alcaline-connexion .alcaline-form label {
	display: block;
	margin: 0 0 0.35rem;
	font-weight: 600;
}

.alcaline-connexion .alcaline-form input[type="text"],
.alcaline-connexion .alcaline-form input[type="password"] {
	display: block;
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	background: var(--_field);
	color: inherit;
	font: inherit;
	line-height: 1.4;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.alcaline-connexion .alcaline-form input[type="text"]:focus,
.alcaline-connexion .alcaline-form input[type="password"]:focus {
	outline: none;
	border-color: var(--_focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--_focus) 25%, transparent);
}

.alcaline-connexion .alcaline-remember label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: normal;
	cursor: pointer;
}

.alcaline-connexion .alcaline-remember input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--_accent);
}

.alcaline-connexion .alcaline-form button {
	display: inline-block;
	width: 100%;
	padding: 0.7rem 1.2rem;
	border: 0;
	border-radius: var(--_radius);
	background: var(--_accent);
	color: var(--_accent-contrast);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s;
}

.alcaline-connexion .alcaline-form button:hover {
	filter: brightness(1.1);
}

.alcaline-connexion .alcaline-form button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--_focus) 45%, transparent);
	outline-offset: 2px;
}

.alcaline-connexion .alcaline-links {
	margin: 0 0 1rem;
	text-align: center;
	font-size: 0.925em;
}

.alcaline-connexion .alcaline-links a {
	color: var(--_accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.alcaline-connexion .alcaline-links a:hover {
	text-decoration-thickness: 2px;
}

.alcaline-connexion .alcaline-error,
.alcaline-connexion .alcaline-notice {
	margin: 0 0 1rem;
	padding: 0.65rem 0.9rem;
	border-left: 4px solid;
	border-radius: var(--_radius);
	list-style: none;
}

.alcaline-connexion ul.alcaline-error li + li {
	margin-top: 0.25rem;
}

.alcaline-connexion .alcaline-error {
	color: var(--_error);
	background: color-mix(in srgb, var(--_error) 8%, transparent);
}

.alcaline-connexion .alcaline-notice {
	color: var(--_notice);
	background: color-mix(in srgb, var(--_notice) 8%, transparent);
}