/*
 * Your Clearest Path Portal · auth shell styles.
 *
 * Scoped under body.aje-acp · isolates from the wp-admin shell that
 * the coach plugin owns. Locked design system: serif titles, sans
 * body, mono labels. No raw values outside tokens.css except a small
 * number of element-local pixel measurements matching v5_2 rhythm.
 */

body.aje-acp {
	margin: 0;
	padding: 0;
	background: var(--white);
	color: var(--text);
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.aje-acp * {
	box-sizing: border-box;
}

/* ── Mark / header · canonical CW logo ──────────────────────── */

body.aje-acp .aje-acp-mark {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 20px 32px;
	background: transparent; /* no white bar · color logo floats over the field */
}

/* mobile · center the mark */
@media (max-width: 680px) {
	body.aje-acp .aje-acp-mark { justify-content: center; }
}

body.aje-acp .aje-acp-mark-home {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
}

body.aje-acp .aje-acp-mark-logo {
	height: 36px;
	width: auto;
	display: block;
	max-width: 100%;
}

body.aje-acp .aje-acp-tm {
	font-size: 0.45em;
	vertical-align: super;
	margin-left: 1px;
	font-weight: 400;
	color: var(--teal-deep);
}

body.aje-acp .aje-acp-mark-out {
	margin-left: auto;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-soft);
	text-decoration: none;
	padding: 4px 8px;
	border-radius: 4px;
	transition: color var(--dur) var(--ease-out);
}

body.aje-acp .aje-acp-mark-out:hover,
body.aje-acp .aje-acp-mark-out:focus-visible {
	color: var(--teal-deep);
}

/* Local-only QA affordance · visible only when WP_DEBUG=true AND
   current user is a non-admin (PHP-gated in shell.php). Dashed
   amber border signals "dev surface, not production." */
body.aje-acp .aje-acp-dev-relogin {
	margin-left: 8px;
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--amber-deep);
	text-decoration: none;
	padding: 3px 8px;
	border: 1px dashed var(--amber);
	border-radius: 4px;
	transition: color var(--dur) var(--ease-out),
		background var(--dur) var(--ease-out);
}

body.aje-acp .aje-acp-dev-relogin:hover,
body.aje-acp .aje-acp-dev-relogin:focus-visible {
	background: var(--amber-pale);
	color: var(--amber-deep);
}

/* ── Landing page · single column ───────────────────────────── */

body.aje-acp .aje-acp-lp {
	min-height: calc(100vh - 80px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px 60px;
	background: var(--teal-xlt);
}

body.aje-acp .aje-acp-lp-content {
	width: 100%;
	max-width: 480px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 40px 36px;
	box-shadow: 0 1px 3px rgba(15, 58, 71, 0.04);
}

body.aje-acp .aje-acp-eyebrow {
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--teal);
	margin-bottom: 14px;
}

body.aje-acp .aje-acp-title {
	font-family: var(--serif);
	font-size: 2.4rem;
	font-weight: 400;
	color: var(--ink);
	line-height: 1.05;
	margin: 0 0 16px 0;
	letter-spacing: -0.005em;
}

body.aje-acp .aje-acp-title em {
	font-style: italic;
	color: var(--teal-deep);
}

body.aje-acp .aje-acp-sub {
	font-size: 14px;
	color: var(--text-mid);
	line-height: 1.6;
	margin: 0 0 24px 0;
}

/* ── Form ───────────────────────────────────────────────────── */

body.aje-acp .aje-acp-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
}

body.aje-acp .aje-acp-label {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-soft);
	margin-bottom: 0;
}

body.aje-acp .aje-acp-input {
	font-family: var(--sans);
	font-size: 15px;
	color: var(--text);
	background: var(--white);
	border: 1px solid var(--border-md);
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 4px;
	outline: none;
	transition: border-color var(--dur) var(--ease-out);
}

body.aje-acp .aje-acp-input:focus {
	border-color: var(--teal);
}

body.aje-acp .aje-acp-input::placeholder {
	color: var(--text-ghost);
}

/* ── Buttons ────────────────────────────────────────────────── */

body.aje-acp .aje-acp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 12px 20px;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out),
		color var(--dur) var(--ease-out);
}

body.aje-acp .aje-acp-btn-primary {
	background: var(--amber);
	color: var(--white);
	border-color: var(--amber);
}

body.aje-acp .aje-acp-btn-primary:hover,
body.aje-acp .aje-acp-btn-primary:focus-visible {
	background: var(--amber-mid);
	border-color: var(--amber-mid);
}

body.aje-acp .aje-acp-btn-secondary {
	background: var(--white);
	color: var(--teal-deep);
	border-color: var(--border-md);
}

body.aje-acp .aje-acp-btn-secondary:hover,
body.aje-acp .aje-acp-btn-secondary:focus-visible {
	border-color: var(--teal);
	color: var(--teal);
}

body.aje-acp .aje-acp-cta-row {
	margin-top: 22px;
	display: flex;
	gap: 10px;
}

/* ── Banner · feedback ──────────────────────────────────────── */

body.aje-acp .aje-acp-banner {
	padding: 14px 16px;
	border-radius: 8px;
	margin-bottom: 18px;
	font-size: 13.5px;
	line-height: 1.55;
}

body.aje-acp .aje-acp-banner-h {
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

body.aje-acp .aje-acp-banner-b {
	color: var(--text);
}

body.aje-acp .aje-acp-banner-ok {
	background: var(--teal-lt);
	border: 1px solid var(--border-md);
}

body.aje-acp .aje-acp-banner-ok .aje-acp-banner-h {
	color: var(--teal-deep);
}

body.aje-acp .aje-acp-banner-err {
	background: var(--amber-pale);
	border: 1px solid var(--amber);
}

body.aje-acp .aje-acp-banner-err .aje-acp-banner-h {
	color: var(--amber-deep);
}

/* Notice · softer, brand-aligned · for informational states like
   "no portal account found" that should not read as alarming. */
body.aje-acp .aje-acp-banner-notice {
	background: var(--teal-xlt);
	border: 1px solid var(--border-md);
}

body.aje-acp .aje-acp-banner-notice .aje-acp-banner-h {
	color: var(--teal-deep);
}

body.aje-acp .aje-acp-banner-dev {
	background: #fff5d9;
	border: 1px dashed var(--amber);
}

body.aje-acp .aje-acp-banner-dev .aje-acp-banner-h {
	color: var(--amber-deep);
}

/* ── Inline link affordances ────────────────────────────────── */

body.aje-acp .aje-acp-link {
	color: var(--teal);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
	word-break: break-all;
}

body.aje-acp .aje-acp-link:hover,
body.aje-acp .aje-acp-link:focus-visible {
	color: var(--teal-deep);
}

body.aje-acp .aje-acp-back {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-soft);
	text-decoration: none;
}

body.aje-acp .aje-acp-back:hover,
body.aje-acp .aje-acp-back:focus-visible {
	color: var(--teal-deep);
}

body.aje-acp .aje-acp-fineprint {
	font-size: 12.5px;
	color: var(--text-soft);
	margin: 18px 0 0 0;
	line-height: 1.55;
}

/* ── Slice 2.5.X · Premium dashboard handoff (home) ──────────── */

body.aje-acp .aje-acp-home {
	max-width: 640px;
}

body.aje-acp .aje-acp-home-card {
	background: var(--white);
	border: 1px solid var(--border, #e7e3da);
	border-radius: 10px;
	padding: 18px 20px;
	margin: 22px 0 0 0;
}

body.aje-acp .aje-acp-home-label {
	font-family: var(--mono, "DM Mono", ui-monospace, monospace);
	font-size: 8.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--teal-dark, #185364);
	font-weight: 500;
	margin: 0 0 10px 0;
}

body.aje-acp .aje-acp-home-h {
	font-family: var(--serif, "Cormorant Garamond", serif);
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--ink, #1f2329);
	line-height: 1.25;
	margin: 0 0 8px 0;
	letter-spacing: -0.005em;
}

body.aje-acp .aje-acp-home-h-dim {
	color: var(--text-soft, #5e6470);
	font-style: italic;
	font-size: 0.92em;
}

body.aje-acp .aje-acp-home-body {
	font-family: var(--sans, "DM Sans", system-ui, sans-serif);
	font-size: 14.5px;
	color: var(--ink-soft, #3a3f48);
	line-height: 1.6;
	margin: 0;
}

body.aje-acp .aje-acp-vision-paragraph {
	font-family: var(--serif, "Cormorant Garamond", serif);
	font-size: 1.12rem;
	font-weight: 400;
	color: var(--ink-soft, #3a3f48);
	line-height: 1.75;
	padding: 14px 16px;
	background: var(--teal-xlt, #f3f8f9);
	border-radius: 8px;
	border: 1px solid var(--border-md, #d8d1c1);
	letter-spacing: -0.003em;
	white-space: pre-line;
	margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 480px) {
	body.aje-acp .aje-acp-lp-content {
		padding: 28px 22px;
	}
	body.aje-acp .aje-acp-title {
		font-size: 2rem;
	}
	body.aje-acp .aje-acp-home-card {
		padding: 14px 16px;
	}
}

/* ── Threshold · The Dew ────────────────────────────────────────────
   The first crossing. Canvas dew field behind the live sign-in card;
   on a first visit core/threshold.js plays the ceremony then reveals
   the card. The CW color logo (.aje-acp-mark) stays pinned above the
   field so the moment reads as Caton Wellness from the first frame.
   Card hide is JS-applied (.aje-threshold-active) so the form is
   visible + functional by default if the script never runs. */
body.aje-acp .aje-acp-mark { position: relative; z-index: 20; }

/* Entry page · the dew field is full-bleed. The page background is the
   field tint so the transparent canvas (dots only) sits on the field
   edge-to-edge — no white strip behind the floating logo, in every state
   incl. reduced-motion / JS-off. */
body.aje-acp-entry { background: var(--teal-xlt); }

body.aje-acp #aje-sky {
	position: fixed; inset: 0; width: 100%; height: 100%;
	display: block; z-index: 0; pointer-events: none;
}
body.aje-acp .aje-acp-lp { position: relative; }
/* The card's resting state is visible. The ceremony HIDES it (JS adds
   .aje-threshold-active); revealing = removing that class, and a
   transition (not a fill-mode animation) carries the rise — a throttled
   transition still lands on the target, so the card can never stick
   hidden the way a paused animation's fill can. */
body.aje-acp .aje-acp-lp-content {
	position: relative; z-index: 5;
	transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.19,.62,.22,1);
}

/* frosted veil · guarantees statement legibility over the field */
body.aje-acp .aje-veil {
	position: fixed; left: 50%; top: 50%; z-index: 2;
	width: min(80vmin, 700px); height: min(80vmin, 700px);
	transform: translate(-50%, -50%); border-radius: 50%;
	background: radial-gradient(closest-side, rgba(238,246,247,.94) 44%, rgba(238,246,247,.6) 66%, rgba(238,246,247,0) 80%);
	opacity: 0; pointer-events: none; transition: opacity 1.6s ease;
}
body.aje-acp .aje-veil.show { opacity: 1; }

body.aje-acp .aje-lines {
	position: fixed; inset: 0; z-index: 3;
	display: grid; place-items: center;
	text-align: center; pointer-events: none; padding: 0 5vw;
}
body.aje-acp .aje-lines > div { grid-area: 1 / 1; } /* each statement owns center */

body.aje-acp .aje-statement {
	font-family: var(--serif); font-weight: 500;
	font-size: clamp(1.9rem, 5vw, 3.5rem);
	line-height: 1.24; letter-spacing: .012em;
	color: var(--ink); opacity: 0;
	will-change: opacity, transform, filter;
}
body.aje-acp .aje-statement .ln { display: block; }
body.aje-acp .aje-begins { font-style: italic; }

/* the address: upright, gold, larger — the CTA before the CTA */
body.aje-acp .aje-yours {
	font-family: var(--serif); font-weight: 600; font-style: normal;
	font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: .01em;
	color: var(--amber); opacity: 0;
	will-change: opacity, transform, filter;
}

body.aje-acp .fade-in { animation: ajeDewRise 1.8s cubic-bezier(.19,.62,.22,1) forwards; }
body.aje-acp .fade-out { animation: ajeDewSettleOut 1.2s cubic-bezier(.55,.06,.68,.19) forwards; }
@keyframes ajeDewRise {
	from { opacity: 0; transform: translateY(20px) scale(.992); filter: blur(10px); }
	to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes ajeDewSettleOut {
	from { opacity: 1; filter: blur(0); }
	to   { opacity: 0; transform: translateY(-12px); filter: blur(6px); }
}

/* skip hint */
body.aje-acp .aje-skip {
	position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
	font-family: var(--mono); font-size: .6rem; letter-spacing: .3em;
	text-transform: uppercase; color: rgba(37,87,105,.4); white-space: nowrap;
	opacity: 0; transition: opacity 1.2s ease; pointer-events: none; z-index: 6;
}
body.aje-acp .aje-skip.show { opacity: 1; }

/* Replay · subtle, upper-right, shown only once the card is settled.
   Lets a visitor (or the coach) re-watch the crossing without clearing
   cookies. JS-toggled via .show. */
body.aje-acp .aje-replay {
	position: fixed; top: 1.6rem; right: 1.4rem; z-index: 21;
	font-family: var(--mono); font-size: .6rem; letter-spacing: .22em;
	text-transform: uppercase; color: var(--teal-deep);
	background: none; border: none; cursor: pointer; padding: 6px 8px;
	opacity: 0; transition: opacity 1s ease; pointer-events: none;
	border-bottom: 1px dotted rgba(37, 87, 105, .4);
}
body.aje-acp .aje-replay.show { opacity: .65; pointer-events: auto; }
body.aje-acp .aje-replay.show:hover,
body.aje-acp .aje-replay.show:focus-visible { opacity: 1; }
@media (max-width: 680px) {
	body.aje-acp .aje-replay { top: 1rem; right: 1rem; }
}

/* during the ceremony the live card is hidden (JS-applied); the rise
   plays when the class is removed, via the transition above. */
body.aje-acp .aje-acp-lp.aje-threshold-active .aje-acp-lp-content {
	opacity: 0; visibility: hidden;
	transform: translateY(24px) scale(.985);
}

@media (max-width: 680px) {
	body.aje-acp .aje-skip { bottom: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
	body.aje-acp .fade-in,
	body.aje-acp .fade-out { animation: none; }
	body.aje-acp .aje-acp-lp-content,
	body.aje-acp .aje-veil { transition: none; }
}