/**
 * Passwordless-first login screen (overlay on wp-login.php).
 *
 * Progressive enhancement: the block is hidden by default and only revealed once JS
 * adds `body.hc-pwl-on`. A no-JS visitor therefore sees the ordinary WordPress
 * password form untouched and can always sign in.
 *
 * Body-class state machine:
 *   (none)          -> no JS: native #loginform only.
 *   hc-pwl-on       -> passwordless active: our block shows, #loginform hidden.
 *   hc-pwl-on pw    -> user chose password: our steps hidden, #loginform shown.
 */

/* Hidden until JS proves it can run. */
.hc-pwl { display: none; }

body.hc-pwl-on .hc-pwl { display: block; margin: 0 0 20px; }

/* Passwordless active: hide the native form + the lost-password nav row. */
body.hc-pwl-on #loginform { display: none; }
body.hc-pwl-on #nav { display: none; }

/* Password mode: hide our steps + the "prefer password" link, reveal the native form
   and a "back to email" link. */
body.hc-pwl-on.hc-pwl-pw .hc-pwl-step,
body.hc-pwl-on.hc-pwl-pw .hc-pwl-alt { display: none; }
body.hc-pwl-on.hc-pwl-pw #loginform,
body.hc-pwl-on.hc-pwl-pw #nav { display: block; }

.hc-pwl-back { display: none; }
body.hc-pwl-on.hc-pwl-pw .hc-pwl-back { display: block; }

/* --- The passwordless card ------------------------------------------------- */

.hc-pwl-lead {
	font-size: 14px;
	line-height: 1.55;
	color: #50575e;
	margin: 0 0 16px;
}

.hc-pwl-label {
	display: block;
	text-align: left;
	font-size: 13px;
	color: #50575e;
	margin: 0 0 6px;
}

.hc-pwl-input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 16px; /* 16px stops iOS zoom-on-focus */
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	background: #fff;
	color: #1d2327;
}

.hc-pwl-input:focus {
	outline: 2px solid #2a2aff;
	outline-offset: 1px;
	border-color: #2a2aff;
}

.hc-pwl-code-field {
	text-align: center;
	letter-spacing: 10px;
	font-size: 22px;
	font-weight: 700;
}

.hc-pwl-btn {
	width: 100%;
	box-sizing: border-box;
	margin: 14px 0 0;
	padding: 12px 16px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: #2a2aff;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.hc-pwl-btn:hover { background: #1f1fd6; }
.hc-pwl-btn[disabled] { opacity: .6; cursor: default; }

.hc-pwl-msg { margin: 14px 0 0; font-size: 14px; line-height: 1.5; }
.hc-pwl-err { color: #b3261e; }

.hc-pwl-alt,
.hc-pwl-back { margin: 16px 0 0; font-size: 13px; text-align: center; }

.hc-pwl-alt a,
.hc-pwl-back a,
.hc-pwl-link {
	color: #2a2aff;
	text-decoration: underline;
	background: none;
	border: 0;
	padding: 0;
	font-size: 13px;
	cursor: pointer;
}

.hc-pwl-link { display: inline-block; margin-top: 14px; }

/* The "Prefer a username & password?" link is deliberately understated — muted grey
   and ~30% smaller (13px -> 9px) so passwordless stays the obvious default. */
.hc-pwl-alt { font-size: 9px; }
.hc-pwl-alt a { color: #8a8f94; font-size: 9px; text-decoration: none; }

/* --- Dark mode (auto, matching the login page's own auto dark support) ------ */
@media (prefers-color-scheme: dark) {
	body.hc-pwl-on .hc-pwl-lead,
	body.hc-pwl-on .hc-pwl-label { color: #a7adba; }
	body.hc-pwl-on .hc-pwl-input {
		background: #1c1f2a;
		border-color: #2c303c;
		color: #f2f3f7;
	}
	/* Brand blue #2a2aff is near-invisible on the dark login (2026-08-26) —
	   the links lift to a readable periwinkle in dark only. */
	.hc-pwl-back a,
	.hc-pwl-link { color: #8f9bff; }
	.hc-pwl-alt a { color: #a7adba; }
}