/* PageForge AI — accounts.
 *
 * Reskinned to match the PageForge Redesign: a dark "ink" split screen with a
 * warm ember accent, Instrument Serif display headings and Hanken Grotesk body.
 * Every selector the auth PHP emits is styled here; no PHP or JS changed.
 *
 * The screen brings its own dark surface so it looks identical on any theme,
 * including light ones. Retune the accent from --pfai-a.
 */

/* Fonts. Loaded here so the screen looks right even if the theme adds nothing.
   Same three families the design specifies. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

/* Keep SaaS auth pages from creating a horizontal scrollbar. */
html:has(.pfai-auth),
body:has(.pfai-auth),
body.pfai-auth-screen,
body.pfai-saas-page {
	overflow-x: hidden;
	max-width: 100%;
}

.pfai-auth {
	--pfai-a: #ea7644;
	--pfai-a-2: #f2a24a;
	--pfai-a-dark: #c6541f;
	--pfai-a-soft: #fbebe0;
	--pfai-ink: #0b0d11;
	--pfai-ink-2: #101319;
	--pfai-ink-3: #171b22;
	--pfai-hair: rgba(255, 255, 255, 0.11);
	--pfai-hair-2: rgba(255, 255, 255, 0.06);
	--pfai-paper: #f7f5ef;
	--pfai-paper-dim: rgba(247, 245, 239, 0.62);
	--pfai-paper-dim2: rgba(247, 245, 239, 0.40);
	--pfai-text: #f7f5ef;
	--pfai-muted: rgba(247, 245, 239, 0.62);
	--pfai-line: rgba(255, 255, 255, 0.11);
	--pfai-bad: #e0796b;
	--pfai-good: #6cc38a;
	--pfai-r: 16px;

	--serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
	--sans: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--pfai-text);
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	background: var(--pfai-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
	container-type: inline-size;
}

/* Break out of constrained theme columns without relying on 100vw alone. */
body.pfai-auth-screen .pfai-auth,
body.pfai-saas-page .pfai-auth {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
}

.pfai-auth *,
.pfai-auth *::before,
.pfai-auth *::after { box-sizing: border-box; }

.pfai-auth ::selection { background: rgba(234, 118, 68, 0.32); }

/* Split screen: brand panel + form side, matching the design's 1.04 / 1. */
.pfai-auth__shell {
	display: grid;
	grid-template-columns: 1.04fr 1fr;
	width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--pfai-ink);
}

/* No panel (bare) or signed-in: a single centred column. */
.pfai-auth--bare .pfai-auth__shell,
.pfai-auth--in .pfai-auth__shell {
	grid-template-columns: 1fr;
	max-width: 560px;
	min-height: auto;
	margin: clamp(32px, 8vh, 96px) auto;
	border: 1px solid var(--pfai-hair-2);
	border-radius: var(--pfai-r);
	overflow: hidden;
}

/* ---------------------------------------------------------------- panel --- */

.pfai-auth__panel {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 56px 60px 46px;
	background: linear-gradient(165deg, #17110b, #0b0d11 62%);
	border-right: 1px solid var(--pfai-hair-2);
}

.pfai-auth__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--pfai-hair-2) 1px, transparent 1px),
		linear-gradient(90deg, var(--pfai-hair-2) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(680px 520px at 20% 10%, #000, transparent 72%);
	mask-image: radial-gradient(680px 520px at 20% 10%, #000, transparent 72%);
	opacity: 0.5;
	pointer-events: none;
}

.pfai-auth__panel::before {
	content: "";
	position: absolute;
	top: -120px;
	left: -80px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(234, 118, 68, 0.20), transparent);
	pointer-events: none;
}

/* The PHP renders the wordmark and the headline block together inside
   panel-inner. The design pins the wordmark to the top of the panel and the
   headline block to the bottom, so make panel-inner a full-height flex column:
   the logo/wordmark stays at the top and everything after it is pushed down. */
.pfai-auth__panel-inner {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.pfai-auth__logo {
	position: relative;
	display: block;
	height: 34px;
	width: auto;
	margin-bottom: 26px;
}

/* Wordmark with the design's four-point gem rendered as a CSS badge. */
.pfai-auth__wordmark {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 26px;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.02em;
	color: var(--pfai-paper);
}

/* Push the headline block to the bottom of the panel. */
.pfai-auth__headline { margin-top: auto; }

.pfai-auth__wordmark::before {
	content: "✦";
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: linear-gradient(140deg, var(--pfai-a), #c6431a);
	box-shadow: 0 8px 20px -8px rgba(234, 118, 68, 0.8);
	font-size: 15px;
	color: #fff;
}

.pfai-auth__headline {
	position: relative;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(34px, 3.6vw, 52px);
	line-height: 1.0;
	letter-spacing: -0.01em;
	margin: 0 0 20px;
	color: var(--pfai-paper);
}

.pfai-auth__subhead {
	position: relative;
	color: var(--pfai-paper-dim);
	font-size: 16px;
	line-height: 1.6;
	max-width: 40ch;
	margin: 0 0 30px;
}

.pfai-auth__benefits {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pfai-auth__benefits li {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.45;
	color: var(--pfai-paper);
}

.pfai-auth__benefits li::before {
	content: "✓";
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background: var(--pfai-a-soft);
	color: var(--pfai-a-dark);
	font-size: 12px;
	font-weight: 800;
}

/* Panel footer trust line, below the benefits. */
.pfai-auth__panel-inner::after {
	content: "Trusted by studios shipping client pages every week.";
	position: relative;
	display: block;
	margin-top: 38px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--pfai-paper-dim2);
}

/* ----------------------------------------------------------------- main --- */

.pfai-auth__main {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 26px 28px;
	background: var(--pfai-ink);
}

.pfai-auth__product-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pfai-auth__product-nav a,
.pfai-auth__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--pfai-paper-dim);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease;
}

.pfai-auth__product-nav a:hover { color: var(--pfai-paper); }

.pfai-auth__product-nav a:focus-visible,
.pfai-auth__alt a:focus-visible,
.pfai-f__aside:focus-visible,
.pfai-auth .pfai-f__peek:focus-visible {
	outline: 2px solid var(--pfai-a);
	outline-offset: 2px;
	border-radius: 6px;
}

.pfai-auth__workspace {
	border: 1px solid var(--pfai-hair);
	border-radius: 9px;
	padding: 8px 14px;
	font-size: 13px;
	color: var(--pfai-paper) !important;
}

.pfai-auth__workspace:hover { background: rgba(255, 255, 255, 0.04); }

/* The form is centred in the remaining height, capped at the design's 400px. */
.pfai-auth__form,
.pfai-auth__state {
	width: 100%;
	max-width: 400px;
	margin: auto;
	padding: 24px 0;
}

.pfai-auth__head { margin-bottom: 28px; }

.pfai-auth__eyebrow {
	display: block;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pfai-a);
	margin-bottom: 12px;
}

.pfai-auth__title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.02;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
	color: var(--pfai-paper);
}

.pfai-auth__sub {
	color: var(--pfai-paper-dim);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

/* ---------------------------------------------------------------- fields -- */

.pfai-f { margin-bottom: 16px; }

.pfai-f__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 7px;
}

.pfai-f__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--pfai-paper-dim);
	margin-bottom: 7px;
}

.pfai-f__row .pfai-f__label { margin-bottom: 0; }

.pfai-f__aside {
	color: var(--pfai-a);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.pfai-f__aside:hover { color: var(--pfai-a-2); }

.pfai-f__wrap { position: relative; }

.pfai-auth .pfai-f__input {
	width: 100%;
	padding: 13px 14px;
	border-radius: 10px;
	border: 1px solid var(--pfai-hair);
	background: rgba(255, 255, 255, 0.04);
	color: var(--pfai-paper);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.4;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
}

.pfai-auth .pfai-f__input::placeholder { color: var(--pfai-paper-dim2); }

.pfai-auth .pfai-f__input:hover { border-color: rgba(255, 255, 255, 0.20); }

.pfai-auth .pfai-f__input:focus {
	outline: none;
	border-color: var(--pfai-a);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 0 0 3px rgba(234, 118, 68, 0.22);
}

.pfai-auth .pfai-f__input[aria-invalid="true"],
.pfai-auth .pfai-f__input:user-invalid {
	border-color: var(--pfai-bad);
}

.pfai-f__wrap .pfai-f__input { padding-right: 66px; }

.pfai-auth .pfai-f__peek {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--pfai-paper-dim);
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	padding: 8px 10px;
	border-radius: 7px;
	transition: color 0.15s ease, background 0.15s ease;
}

.pfai-auth .pfai-f__peek:hover { color: var(--pfai-paper); background: rgba(255, 255, 255, 0.06); }

.pfai-f__hint,
.pfai-f__note {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--pfai-paper-dim2);
	line-height: 1.45;
}

.pfai-f__note:empty { display: none; }
.pfai-f__note.is-bad { color: var(--pfai-bad); }

/* Strength meter — four bars that fill by score, matching the design. */
.pfai-meter {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

.pfai-meter__bars {
	display: flex;
	gap: 4px;
	flex: 1;
}

.pfai-meter__bars i {
	height: 4px;
	flex: 1;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.14);
	transition: background 0.2s ease;
}

.pfai-meter__label {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--pfai-paper-dim);
	min-width: 4ch;
	text-align: right;
}

.pfai-meter[data-score="1"] i:nth-child(1) { background: #e0796b; }
.pfai-meter[data-score="2"] i:nth-child(-n+2) { background: #e0a15a; }
.pfai-meter[data-score="3"] i:nth-child(-n+3) { background: var(--pfai-a); }
.pfai-meter[data-score="4"] i { background: var(--pfai-good); }
.pfai-meter[data-score="3"] .pfai-meter__label,
.pfai-meter[data-score="4"] .pfai-meter__label { color: var(--pfai-good); }

/* ------------------------------------------------------------- checkbox --- */

.pfai-auth .pfai-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--pfai-paper-dim);
	margin: 6px 0 22px;
	cursor: pointer;
}

.pfai-auth .pfai-check input {
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--pfai-a);
	flex: none;
}

.pfai-auth .pfai-check a { color: var(--pfai-a); text-decoration: none; }
.pfai-auth .pfai-check a:hover { color: var(--pfai-a-2); }

/* --------------------------------------------------------------- submit --- */

.pfai-auth .pfai-auth__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	border: 0;
	cursor: pointer;
	padding: 14px;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--pfai-a), #d8582a);
	color: #fff;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 16px 34px -16px rgba(234, 118, 68, 0.9);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.pfai-auth .pfai-auth__submit:hover {
	filter: brightness(1.04);
	box-shadow: 0 20px 40px -16px rgba(234, 118, 68, 0.95);
}

.pfai-auth .pfai-auth__submit:active { transform: translateY(1px); }

.pfai-auth .pfai-auth__submit:focus-visible {
	outline: 2px solid var(--pfai-a-2);
	outline-offset: 3px;
}

.pfai-auth .pfai-auth__submit[disabled] {
	opacity: 0.65;
	cursor: default;
	box-shadow: none;
}

.pfai-auth__submit .pfai-spin {
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pfai-auth-spin 0.7s linear infinite;
}

@keyframes pfai-auth-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------- alt / links --- */

.pfai-auth__alt {
	text-align: center;
	margin: 22px 0 0;
	color: var(--pfai-paper-dim);
	font-size: 14px;
}

.pfai-auth__alt a {
	color: var(--pfai-a);
	font-weight: 600;
	text-decoration: none;
}

.pfai-auth__alt a:hover { color: var(--pfai-a-2); }

.pfai-auth__sep {
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 10px;
	border-radius: 50%;
	background: var(--pfai-paper-dim2);
	vertical-align: middle;
}

/* Footer reassurance line under the form, from the design. */
.pfai-auth__main::after {
	content: "Protected sign-in · brute-force limited · you control your data";
	display: block;
	text-align: center;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--pfai-paper-dim2);
	margin-top: 4px;
}

.pfai-auth--in .pfai-auth__main::after,
.pfai-auth--bare .pfai-auth__main::after { content: none; }

/* -------------------------------------------------------------- messages -- */

.pfai-auth__messages {
	width: 100%;
	max-width: 400px;
	margin: 18px auto 0;
}

.pfai-auth__messages:focus-visible { outline: none; }

.pfai-auth__msg {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 11px;
	font-size: 14px;
	line-height: 1.45;
	margin-bottom: 10px;
	border: 1px solid transparent;
}

.pfai-auth__msg:last-child { margin-bottom: 0; }

.pfai-auth__msg-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 800;
	color: #fff;
	margin-top: 1px;
}

.pfai-auth__msg--bad .pfai-auth__msg-icon::before { content: "!"; }
.pfai-auth__msg--good .pfai-auth__msg-icon::before { content: "✓"; }

.pfai-auth__msg--bad {
	background: rgba(190, 74, 58, 0.14);
	border-color: rgba(224, 121, 107, 0.4);
	color: #f3c8c0;
}

.pfai-auth__msg--bad .pfai-auth__msg-icon { background: var(--pfai-bad); }

.pfai-auth__msg--good {
	background: rgba(63, 125, 87, 0.16);
	border-color: rgba(108, 195, 138, 0.4);
	color: #cce8d6;
}

.pfai-auth__msg--good .pfai-auth__msg-icon { background: var(--pfai-good); }

/* -------------------------------------------------------- states / avatar - */

.pfai-auth__state { text-align: center; }
.pfai-auth__state .pfai-auth__head { margin-bottom: 22px; }
.pfai-auth__state .pfai-auth__sub { max-width: 38ch; margin-inline: auto; }

.pfai-auth__state-icon,
.pfai-auth__avatar {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	border-radius: 50%;
	font-size: 26px;
	font-weight: 800;
	color: #fff;
}

.pfai-auth__avatar {
	background: linear-gradient(140deg, var(--pfai-a), #c6431a);
	box-shadow: 0 12px 28px -12px rgba(234, 118, 68, 0.8);
	font-family: var(--serif);
	font-weight: 400;
}

.pfai-auth__state-icon {
	background: rgba(190, 74, 58, 0.16);
	border: 1px solid rgba(224, 121, 107, 0.4);
	color: var(--pfai-bad);
}

/* Honeypot: off-screen, not display:none — the better bots skip hidden fields. */
.pfai-auth__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------- narrow --- */

@container (max-width: 860px) {
	.pfai-auth__shell { grid-template-columns: 1fr; }
	.pfai-auth__panel {
		padding: 40px 34px 34px;
		border-right: 0;
		border-bottom: 1px solid var(--pfai-hair-2);
	}
	.pfai-auth__panel-inner { margin-top: 24px; }
	.pfai-auth__benefits { display: none; }
	.pfai-auth__panel-inner::after { display: none; }
	.pfai-auth__subhead { margin-bottom: 0; max-width: none; }
	.pfai-auth__headline { font-size: clamp(30px, 6vw, 40px); }
	.pfai-auth__main { padding: 28px 30px 30px; }
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
	@media (max-width: 860px) {
		.pfai-auth__shell { grid-template-columns: 1fr; }
		.pfai-auth__panel {
			padding: 40px 34px 34px;
			border-right: 0;
			border-bottom: 1px solid var(--pfai-hair-2);
		}
		.pfai-auth__benefits { display: none; }
		.pfai-auth__panel-inner::after { display: none; }
		.pfai-auth__subhead { margin-bottom: 0; max-width: none; }
		.pfai-auth__main { padding: 28px 30px 30px; }
	}
}

@media (max-width: 480px) {
	.pfai-auth { font-size: 15px; }
	.pfai-auth__panel { padding: 32px 22px 26px; }
	.pfai-auth__main { padding: 24px 22px 26px; }
	.pfai-auth__title { font-size: 34px; }
	.pfai-auth__product-nav { flex-wrap: wrap; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.pfai-auth *,
	.pfai-auth *::before,
	.pfai-auth *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}