/**
 * RCX Portal Auth — WP-core login-flow screens.
 *
 * Styles the four screens WordPress core itself serves at wp-login.php —
 * action=login, action=lostpassword, action=checkemail, action=rp/resetpass —
 * to read as the same surface as the Login card (see the theme's
 * assets/css/base.css .rcx-login__* block and the plugin's
 * templates/login.php). Core owns this markup; every selector below targets
 * core's fixed IDs/classes (#login, #loginform, #nav, #backtoblog,
 * .wp-login-logo, .notice, .button, .input, …) rather than reconstructing
 * the card's DOM. See spec.md § Login → "Where the sub-flow's screens
 * actually live" for the three accepted consequences of core owning the
 * markup (visual parity not structural identity; no per-Account branding;
 * no Disclaimers band here).
 *
 * Enqueued ONLY on login_enqueue_scripts (see
 * RCX\PortalAuth\Branding\LoginScreenBranding::enqueue_styles) — never on
 * wp_enqueue_scripts — so it never loads on the front end or in wp-admin.
 * Every rule below is additionally scoped under the body.login class core
 * adds only to wp-login.php, so even a hypothetical stray enqueue elsewhere
 * could not make these rules apply to another surface.
 *
 * TOKEN AVAILABILITY: theme.json's `--wp--preset--*` / `--wp--custom--*`
 * custom properties are NOT available here. WordPress emits them via
 * wp_enqueue_global_styles(), which core hooks only onto `wp_enqueue_scripts`
 * and `wp_footer` (wp-includes/default-filters.php). wp-login.php never
 * fires either action — it runs its own `login_enqueue_scripts` /
 * `login_head` / `login_footer` lifecycle instead, and the theme's own
 * base.css (enqueued via wp_enqueue_scripts in the theme's functions.php)
 * likewise never loads here. Confirmed by reading both files directly
 * (neither wp-login.php nor default-filters.php references wp_enqueue_scripts
 * or wp_footer for this file), not assumed. Consequently every design token
 * this stylesheet needs is redefined once below, scoped to body.login, and
 * referenced throughout — no raw hex values elsewhere in this file. Color,
 * radius, and shadow values mirror web/app/themes/rcx-portal/theme.json
 * exactly. --rcx-login-font-family is the one deliberate exception: it
 * extends theme.json's bare `'DM Sans', sans-serif` with a system-font
 * fallback stack (-apple-system, BlinkMacSystemFont, 'Segoe UI'). This is
 * not an oversight — DM Sans's @font-face declaration is ALSO part of
 * theme.json's global-styles output, printed via wp_print_font_faces(),
 * which core hooks only onto `wp_head` (wp-includes/default-filters.php) —
 * a front-end-only action that, for the identical reason established
 * above, never fires on wp-login.php either. The DM Sans webfont file is
 * therefore guaranteed to never load on these four screens regardless of
 * what this stack names first, so every request here falls through to
 * whatever follows 'DM Sans' — a real system-font stack renders better
 * than falling straight to the bare `sans-serif` generic theme.json uses
 * (safe there only because DM Sans DOES load on the rest of the site).
 */

html body.login {
	--rcx-login-color-primary: #1E2D4F;
	--rcx-login-color-accent-strong: #8A7340;
	--rcx-login-color-background: #F5F6F8;
	--rcx-login-color-surface: #FFFFFF;
	--rcx-login-color-text: #374151;
	--rcx-login-color-text-secondary: #6B7280;
	--rcx-login-color-border-input: #D1D5DB;
	--rcx-login-radius-md: 6px;
	--rcx-login-radius-lg: 8px;
	--rcx-login-shadow-card: 0 8px 24px rgba(0, 0, 0, .08);
	--rcx-login-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	/* --rcx-login-logo-url is injected as an inline style by
	   LoginScreenBranding::enqueue_styles() — the one value this static
	   stylesheet cannot know: the RCX default logo's theme-relative URL. */
}

/* box-sizing reset, scoped to body.login. The reference relies on the
   theme's own global `*{box-sizing:border-box}` reset (part of base.css /
   a shared stylesheet), which — per the token-availability finding above —
   never loads on wp-login.php. Without this, #login's `width: 440px` +
   `padding: 48px 40px` below computes as a content-box, rendering a ~520px
   box instead of the spec'd 440px card. */
html body.login,
html body.login *,
html body.login *::before,
html body.login *::after {
	box-sizing: border-box;
}

/* ----------------------------------------
   Page background + vertical/horizontal centering.
   Equivalent of .rcx-login-page + .rcx-login__wrap combined, since core
   gives us only <body class="login …"> — no separate wrapper element.
   ---------------------------------------- */

html body.login {
	background: var(--rcx-login-color-background);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 40px 20px;
	box-sizing: border-box;
	font-family: var(--rcx-login-font-family);
}

/* ----------------------------------------
   The card. Core's #login wraps the logo, any notice, the form, #nav, and
   #backtoblog — the same set of things .rcx-login__card wraps on the /login
   template — so #login itself becomes the card surface.
   Equivalent of .rcx-login__card.
   ---------------------------------------- */

body.login #login {
	width: 440px;
	max-width: 100%;
	background: var(--rcx-login-color-surface);
	border-radius: var(--rcx-login-radius-lg);
	box-shadow: var(--rcx-login-shadow-card);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

/* ----------------------------------------
   Brand mark. Core renders <h1 class="wp-login-logo"><a>TEXT</a></h1> — a
   fixed anchor, not an <img>. Core's own login.css already hides the anchor
   text off-screen and paints a background-image logo; we replace the image
   with the RCX default mark (login_headertext supplies "RCX Capital Group"
   as the still-accessible link text — see LoginScreenBranding::header_text)
   and size the box to match .rcx-login__logo's bounding box (200x48,
   contain-fit). No per-Account branding: wp-login.php carries no
   /login/<slug>, so this is always the RCX default mark (spec: "No
   per-Account branding" consequence).
   ---------------------------------------- */

body.login #login h1.wp-login-logo {
	margin: 0;
	padding: 0;
}

body.login #login h1.wp-login-logo a {
	display: block;
	width: 200px;
	max-width: 100%;
	height: 48px;
	margin: 0 auto;
	background-image: var(--rcx-login-logo-url);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	text-indent: -9999px;
	outline: none;
}

/* ----------------------------------------
   Error / message notices. Core renders every notice on these four screens
   as <div class="notice notice-{type} …">…</div> regardless of which code
   path produced it or whether it carries an id — confirmed against the
   installed core, not assumed:
     - Errors on the login/lostpassword/checkemail path get id="login_error"
       (wp-login.php ~243-290, wp_admin_notice() with 'id' => 'login_error').
     - checkemail's confirm/registered messages get id="login-message"
       (same file, the severity='message' branch a few lines later, 'id' =>
       'login-message').
     - The lostpassword intro copy and the resetpass intro/error copy carry
       NO id at all — both are built via wp_get_admin_notice() and passed as
       login_header()'s $message parameter, which is echoed unwrapped at
       wp-login.php ~231-235.
   Selecting by class (.notice), not id, means this rule covers all of the
   above uniformly without needing to enumerate which path produced which
   id — including an expired/invalid reset key (wp-login.php ~963-973),
   which redirects to action=lostpassword with ?error=…, turned into a
   WP_Error at ~848-854 and rendered through the same id="login_error" path.
   Equivalent of .rcx-login__error, applied uniformly to both severities per
   the reference (which uses one treatment for any $rcx_login_error).
   ---------------------------------------- */

body.login #login .notice {
	width: 100%;
	max-width: 100%;
	margin: 0;
	border: 1px solid var(--rcx-login-color-border-input);
	border-left: 1px solid var(--rcx-login-color-border-input);
	border-radius: var(--rcx-login-radius-md);
	padding: 12px 16px;
	background: var(--rcx-login-color-surface);
	color: var(--rcx-login-color-text);
	font-size: 14px;
	box-shadow: none;
}

body.login #login .notice p {
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

body.login #login .notice a {
	color: var(--rcx-login-color-accent-strong);
}

/* ----------------------------------------
   Forms. #loginform / #lostpasswordform / #resetpassform all live directly
   inside #login — targeting "#login form" covers all three without
   repeating each id. Equivalent of .rcx-login__form (full width, column,
   20px gap between fields).

   Core's own wp-admin/css/login.css gives `.login form` its OWN card box
   (margin: 24px 0; padding: 26px 24px; background: #fff; border: 1px solid
   #c3c4c7; box-shadow: …; overflow: hidden — see that file's `.login form`
   rule). #login above is now OUR card; without resetting the form's own
   box every screen with a form rendered two stacked boxes (a card inside
   the card). Only #login owns the border/radius/shadow/surface now.
   overflow is reset to visible (not just unset) because `overflow: hidden`
   on the form would otherwise clip the submit button's :focus-visible ring
   (2px outline-offset) and the password toggle's absolute-positioned box
   near the form's edges.
   ---------------------------------------- */

body.login #login form {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	overflow: visible;
}

/* Reset core's default <p>/<div> field-wrapper margins so the form's own
   `gap` is the only spacing rule in effect — otherwise core's own login.css
   margins would double up with the flex gap above. */
body.login #login form > p,
body.login #login form > div {
	margin: 0;
}

/* Field: label stacked above input. Equivalent of .rcx-login__field. */
body.login #login form p,
body.login #login .user-pass-wrap,
body.login #login .user-pass1-wrap,
body.login #login .user-pass2-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* text (#374151) on surface white is 10.31:1 — the highest-contrast pair
   this stylesheet uses, applied here and to general body/notice copy
   throughout (.notice, .notice p above). */
body.login #login label {
	font-size: 13px;
	font-weight: 500;
	color: var(--rcx-login-color-text);
}

/* ----------------------------------------
   Inputs. Equivalent of .rcx-login__input / .rcx-login__input:focus.
   ---------------------------------------- */

body.login #login input.input {
	font-family: var(--rcx-login-font-family);
	font-size: 14px;
	color: var(--rcx-login-color-text);
	border: 1px solid var(--rcx-login-color-border-input);
	border-radius: var(--rcx-login-radius-md);
	padding: 11px 14px;
	background: var(--rcx-login-color-surface);
	width: 100%;
	box-sizing: border-box;
	transition: border-color 150ms ease;
}

/* Deliberate departure from the /login card's literal placeholder color:
   the reference (.rcx-login__input::placeholder) uses the text-muted token
   (#9CA3AF), which the WP overlay's frontend criteria explicitly flag as
   failing AA on white and forbid for any text. text-secondary (#6B7280,
   4.83:1 on white) is theme.json's own "Secondary Text (AA)" token and is
   used here instead so placeholder text clears WCAG 2.1 AA. */
body.login #login input.input::placeholder {
	color: var(--rcx-login-color-text-secondary);
}

body.login #login input.input:focus {
	outline: none;
	border-color: var(--rcx-login-color-primary);
	box-shadow: none;
}

/* Password-visibility toggle (login/lostpassword-adjacent .wp-pwd wrapper):
   not part of the /login card (it has no such control), so there is no
   reference rule to match — positioned unobtrusively inside the input using
   the same token palette rather than left in core's default admin styling.

   Core's wp-admin/css/login.css independently gives BOTH the input (via the
   shared `input.input` rule below core also styles through `.login .input`)
   AND `.wp-hide-pw` (position: absolute; right: 0; top: 0;) their own box
   assumptions, which combined with our own input border produced a visible
   double border and an off-position toggle. Fix: the WRAPPER (.wp-pwd) is
   now the only element that owns the visible input box (border, radius,
   background, focus ring via :focus-within) — the input inside it is
   rendered borderless/transparent/flush, so there is exactly one box, not
   two, regardless of what core's own CSS additionally declares on either
   element. */
body.login #login .wp-pwd {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid var(--rcx-login-color-border-input);
	border-radius: var(--rcx-login-radius-md);
	background: var(--rcx-login-color-surface);
	width: 100%;
	box-sizing: border-box;
	transition: border-color 150ms ease;
	margin-bottom: 36px;
}

body.login #login .wp-pwd:focus-within {
	border-color: var(--rcx-login-color-primary);
}

body.login #login .wp-pwd input.input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	padding: 11px 44px 11px 14px;
}

body.login #login .wp-pwd .wp-hide-pw {
	position: absolute;
	right: 6px;
	top: 50%;
	left: auto;
	bottom: auto;
	transform: translateY(-50%);
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	background: transparent;
	border: none;
	color: var(--rcx-login-color-text-secondary);
	cursor: pointer;
}

/* Password-strength meter (resetpass only): a third child inside .wp-pwd
   (see core's markup — it sits alongside the input and toggle button, not
   as a separate sibling, unlike login/lostpassword's .wp-pwd, which has no
   third child). It is empty on initial page load and only gains text once
   core's own password-strength-meter.js runs, so it is deliberately taken
   out of .wp-pwd's flex flow and absolutely positioned below the wrapper's
   bordered box instead (.wp-pwd's own position: relative above anchors it).
   That way the field's box is always a fixed, single-row height — it never
   reserves space for this element whether it's empty or populated.
   Deliberately borderless/backgroundless in this stylesheet: core's own
   admin CSS supplies the background-color/border per strength class
   (.short/.bad/.good/.strong) once populated, so duplicating that styling
   here is unnecessary and intentionally left alone. */
body.login #login #pass-strength-result {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: 8px 0 0;
	padding: 6px 14px;
	font-size: 13px;
	color: var(--rcx-login-color-text-secondary);
	border-radius: var(--rcx-login-radius-md);
}

body.login #login p.description {
	font-size: 13px;
	color: var(--rcx-login-color-text-secondary);
}

/* ----------------------------------------
   Buttons. Equivalent of .rcx-login__btn / :hover / :focus-visible.
   The resetpass screen's secondary "Generate Password" control has no
   equivalent on the /login card; styled with the same token palette rather
   than left in core's default admin-button chrome.
   ---------------------------------------- */

body.login #login p.submit {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

body.login #login .button.button-primary {
	width: 100%;
	height: 46px;
	background: var(--rcx-login-color-primary);
	color: var(--rcx-login-color-surface);
	border: none;
	border-radius: var(--rcx-login-radius-md);
	font-family: var(--rcx-login-font-family);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 150ms ease;
	text-shadow: none;
	box-shadow: none;
}

body.login #login .button.button-primary:hover {
	background: var(--rcx-login-color-primary);
	filter: brightness(1.15);
}

body.login #login .button.button-primary:focus-visible {
	outline: 2px solid var(--rcx-login-color-accent-strong);
	outline-offset: 2px;
	box-shadow: none;
}

/* Targets .wp-generate-pw specifically, NOT the generic .button-secondary
   class — core's "Generate Password" button carries only `button
   wp-generate-pw …` (no `button-secondary`), while the PASSWORD-TOGGLE
   button carries `button button-secondary wp-hide-pw …`. An earlier
   `.button.button-secondary` selector matched the toggle button instead
   (tied specificity with the .wp-hide-pw rule above, and this rule loads
   later in the cascade) and stretched it to width:100%/height:46px,
   breaking its position — and never matched Generate Password at all,
   since that button lacks the button-secondary class. */
body.login #login .button.wp-generate-pw {
	width: 100%;
	height: 46px;
	background: var(--rcx-login-color-surface);
	color: var(--rcx-login-color-text);
	border: 1px solid var(--rcx-login-color-border-input);
	border-radius: var(--rcx-login-radius-md);
	font-family: var(--rcx-login-font-family);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	text-shadow: none;
	box-shadow: none;
}

body.login #login .button.wp-generate-pw:focus-visible {
	outline: 2px solid var(--rcx-login-color-accent-strong);
	outline-offset: 2px;
}

/* ----------------------------------------
   Nav links: "Lost your password?", "Log in", "Register", "← Go to …".
   Equivalent of .rcx-login__forgot a / :hover, centered (rather than
   right-aligned) because #nav/#backtoblog can hold more than one link,
   unlike the /login card's single "Forgot password?" link.
   ---------------------------------------- */

body.login #login #nav,
body.login #login #backtoblog {
	width: 100%;
	margin: 0;
	text-align: center;
}

body.login #login #nav a,
body.login #login #backtoblog a {
	font-size: 13px;
	font-weight: 500;
	color: var(--rcx-login-color-accent-strong);
	text-decoration: none;
}

body.login #login #nav a:hover,
body.login #login #backtoblog a:hover {
	text-decoration: underline;
}

/* #backtoblog reads "← Back to RCX Capital Group" (LoginScreenBranding::
   backtoblog_link()) ONLY on the four BRANDABLE_ACTIONS screens; every
   other $action — including 'login', and any value not on that list — gets
   an empty link string from the PHP side (Security Posture SD-01: an
   allowlist, not a denylist naming only 'login' — see backtoblog_link()'s
   docblock). This rule mirrors that allowlist shape: hidden by default,
   then explicitly re-shown only for the same four `login-action-{$action}`
   body classes core adds (wp-login.php's login_header(), the `$classes`
   array — see the next rule block). Scoping this rule to
   `.login-action-login` alone, the way an earlier version did, would have
   left the empty <p id="backtoblog"></p> visible — reserving a gap in
   #login's flex column with nothing inside it — on any action the PHP
   allowlist suppresses but this rule's selector didn't separately name.
   Core still prints the wrapping <p id="backtoblog"></p> unconditionally
   even with an empty link, and as a flex item in #login's `gap: 32px`
   column (see "The card" above) an empty paragraph would still consume a
   full gap slot, leaving a blank space near the bottom of the card.
   display: none removes it from flex layout entirely so no gap is reserved
   for it by default. */
body.login #login #backtoblog {
	display: none;
}

body.login.login-action-lostpassword #login #backtoblog,
body.login.login-action-checkemail #login #backtoblog,
body.login.login-action-resetpass #login #backtoblog,
body.login.login-action-rp #login #backtoblog {
	display: block;
}

/* ----------------------------------------
   Focus visibility (WCAG 2.1 AA — every focusable element needs a visible
   indicator). The reference only defines a focus-visible ring for the
   submit button; extended here to every link inside the card (nav links,
   backtoblog, and links embedded in notice copy, e.g. "visit the login
   page") since criterion 16 requires coverage core's own default styling
   does not reliably provide once the surrounding chrome is restyled.
   accent-strong (#8A7340) on white surface is 4.56:1 — passes the 3:1
   non-text contrast minimum for the ring itself with margin. Inputs are not
   repeated here: their :focus rule above already swaps the border to
   primary navy (13.61:1 against the white card, ~9x the 3:1 non-text
   minimum), which is itself a WCAG-sufficient visible focus change.
   ---------------------------------------- */

body.login #login a:focus-visible {
	outline: 2px solid var(--rcx-login-color-accent-strong);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ----------------------------------------
   Checkbox rows ("Remember Me", "Confirm use of weak password") — left as
   core's native checkbox but with matching label typography/spacing so the
   row doesn't look like a stray, unstyled fragment against the card.

   flex-direction: row is explicit (not just the default) because the
   earlier "#login form p" rule sets flex-direction: column for label-above-
   input fields; per-property cascade means that column value otherwise
   survives here even though this more specific rule wins on every property
   it DOES declare — align-items: center then centers the row's cross-axis
   (horizontal, for a column) rather than the row's cross-axis (vertical,
   for a row), which is what stacked and centered the checkbox above its
   label instead of placing them side by side.
   ---------------------------------------- */

body.login #login p.forgetmenot,
body.login #login .pw-weak {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	margin: 0;
}

body.login #login p.forgetmenot label,
body.login #login .pw-weak label {
	font-size: 13px;
	font-weight: 400;
	color: var(--rcx-login-color-text);
}