/*
 * GravityStack Managed Site: login page.
 *
 * Every colour below is a role from gravitystack-design.md, with contrast
 * measured in GravityBrain on 2026-10-02:
 *
 *   #323731  gravity-surface-dark   page background
 *   #ffffff  gravity-link-inverse   links outside the white box, 12.16:1
 *   #5d3fb8  gravity-cta            primary button fill, label 7.32:1
 *   #ffffff  gravity-cta-label      primary button label
 *   #5231aa  action-10              button hover and focus, 8.83:1
 *   #5d3fb8  gravity-focus          focus ring inside the white box
 *   #ffffff  gravity-focus-inverse  focus ring outside the white box
 *   #5d3fb8  gravity-link           links inside white message boxes
 *
 * Added for Security Ninja's two-factor screen, 2026-10-24:
 *
 *   #ffffff  gravity-cta-inverse    chosen method fill on the dark background
 *   #5d3fb8  gravity-cta-label-inverse  its label, 7.32:1
 *   #eeedff  action-3               its hover fill, label action-10 at 7.65:1
 *   #1d211c  gravity-text           success message
 *   #c63f30  error-11               error message, 5.1:1 on white
 *   #5d3fb8  gravity-cta            left edge of information messages
 *
 * The white box and the message boxes otherwise keep WordPress's own styling.
 * Information messages, which WordPress edges in its own blue, take indigo
 * instead, security plugins' notices included; error and success messages
 * keep WordPress's red and green edges, which carry meaning (Scott,
 * 2026-10-24, reopening the 2026-10-02 call to leave the edges alone).
 * Security Ninja's two-factor screen is also brought into the palette above,
 * as set out at its own section below (Scott, 2026-10-24).
 */

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/outfit/Outfit-SemiBold.woff2") format("woff2");
}

/*
 * WordPress 7.x colours the button, field focus, checkbox, and show-password
 * toggle from these variables, which it sets on body.admin-color-modern.
 * html body.login outranks that selector, so every consumer turns purple.
 */
html body.login {
	--wp-admin-theme-color: #5d3fb8;
	--wp-admin-theme-color--rgb: 93, 63, 184;
	--wp-admin-theme-color-darker-10: #5231aa;
	--wp-admin-theme-color-darker-10--rgb: 82, 49, 170;
	--wp-admin-theme-color-darker-20: #5231aa;
	--wp-admin-theme-color-darker-20--rgb: 82, 49, 170;
	--wp-admin-border-width-focus: 2px;

	background: #323731;
}

/*
 * Tightened so the page fits a laptop screen without scrolling. WordPress's
 * own top padding is 5% of the window's width, about 68px on a laptop.
 */
body.login #login {
	padding-top: clamp(16px, 4vh, 40px);
}

/* The "Go to site" link is removed by filter; its empty paragraph goes too. */
body.login #backtoblog {
	display: none;
}

body.login #nav {
	margin-top: 16px;
	text-align: center;
}

/* Top of the page: the site's name as text, in place of the WordPress logo. */

body.login #login h1 a {
	background-image: none;
	color: #ffffff;
	display: block;
	font-family: Outfit, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.75rem;
	font-weight: 600;
	height: auto;
	line-height: 1.25;
	margin: 0 auto 16px;
	overflow: visible;
	overflow-wrap: anywhere;
	text-align: center;
	text-decoration: none;
	text-indent: 0;
	white-space: normal;
	width: auto;
}

body.login #login h1 a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* Text and links outside the white box. */

body.login #nav,
body.login #backtoblog,
body.login .privacy-policy-page-link,
body.login .language-switcher label {
	color: #ffffff;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a,
body.login .gs-managed-site-login-footer__help a {
	color: #ffffff;
	opacity: 1;
	text-decoration: underline;
}

body.login #nav a:hover,
body.login #nav a:active,
body.login #backtoblog a:hover,
body.login #backtoblog a:active,
body.login .privacy-policy-page-link a:hover,
body.login .privacy-policy-page-link a:active,
body.login .gs-managed-site-login-footer__help a:hover,
body.login .gs-managed-site-login-footer__help a:active {
	color: #ffffff;
	text-decoration-thickness: 2px;
}

/* Focus outside the white box: a white outline, offset from the element. */

body.login #login h1 a:focus,
body.login #nav a:focus,
body.login #backtoblog a:focus,
body.login .privacy-policy-page-link a:focus,
body.login .gs-managed-site-login-footer a:focus {
	box-shadow: none;
	color: #ffffff;
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

body.login .language-switcher select:focus,
body.login .language-switcher .button:focus {
	box-shadow: none;
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* Inside the white box. */

body.login.wp-core-ui .button-primary {
	background: #5d3fb8;
	border-color: #5d3fb8;
	color: #ffffff;
}

body.login.wp-core-ui .button-primary:hover,
body.login.wp-core-ui .button-primary:focus,
body.login.wp-core-ui .button-primary:active {
	background: #5231aa;
	border-color: #5231aa;
	color: #ffffff;
}

/* A white gap, then the purple ring, so the ring reads against the fill. */
body.login.wp-core-ui .button-primary:focus {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #5d3fb8;
	outline: 2px solid transparent;
}

body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
	border-color: #5d3fb8;
	box-shadow: 0 0 0 2px #5d3fb8;
}

body.login .button.wp-hide-pw,
body.login .button.wp-hide-pw .dashicons {
	color: #5d3fb8;
}

body.login .button.wp-hide-pw:focus {
	border-color: #5d3fb8;
	box-shadow: 0 0 0 1px #5d3fb8;
}

body.login input[type="checkbox"]:focus {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #5d3fb8;
}

body.login form a,
body.login .message a,
body.login .notice a,
body.login .success a,
body.login #login_error a {
	color: #5d3fb8;
	text-decoration: underline;
}

body.login form a:hover,
body.login form a:focus,
body.login .message a:hover,
body.login .message a:focus,
body.login .notice a:hover,
body.login .notice a:focus,
body.login .success a:hover,
body.login .success a:focus,
body.login #login_error a:hover,
body.login #login_error a:focus {
	color: #5231aa;
}

/*
 * Information messages: indigo edge in place of WordPress's blue. WordPress
 * marks them .message, and recent versions add .notice-info; errors and successes
 * carry their own classes and keep their own edges.
 */
body.login .message:not(.notice-error):not(.notice-success):not(.notice-warning),
body.login .notice-info {
	border-left-color: #5d3fb8;
}

/*
 * Security Ninja's two-factor screen, the page after the password. Markup read
 * from the live screen by Scott, 2026-10-24: inside #login, p.sn-2fa-intro,
 * div.sn-2fa-method-switcher holding button.button.sn-2fa-method-btn with
 * .is-active on the chosen method, div#sn-2fa-email-panel.email-2fa with
 * p.okmsg or p.errmsg for its messages, then form#twofa-form-verify. The
 * page has no heading; the site name is put back by GS_Managed_Site_Login.
 *
 * Calmed to two surfaces, charcoal and white, with indigo only for actions
 * (Scott, 2026-10-24). Everything not named here stays Security Ninja's.
 */

body.login .sn-2fa-intro {
	color: #ffffff;
}

/*
 * The method switcher sits on the dark background, so it follows the dark
 * band's button rule: the chosen method inverts to gravity-cta-inverse, a
 * white fill with an indigo label (7.32:1), because an indigo fill measures
 * under 2.2:1 against the charcoal. The other method is outlined in white
 * with a white label (12.16:1), and its hover thickens the underline the way
 * a link on the dark band does.
 */
body.login.wp-core-ui .sn-2fa-method-switcher .sn-2fa-method-btn {
	background: transparent;
	border-color: #ffffff;
	box-shadow: none;
	color: #ffffff;
}

body.login.wp-core-ui .sn-2fa-method-switcher .sn-2fa-method-btn:hover {
	background: transparent;
	border-color: #ffffff;
	color: #ffffff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

body.login.wp-core-ui .sn-2fa-method-switcher .sn-2fa-method-btn.is-active {
	background: #ffffff;
	border-color: #ffffff;
	color: #5d3fb8;
	text-decoration: none;
}

/* action-3 fill, action-10 label: 7.65:1, so hover raises contrast. */
body.login.wp-core-ui .sn-2fa-method-switcher .sn-2fa-method-btn.is-active:hover {
	background: #eeedff;
	border-color: #eeedff;
	color: #5231aa;
}

/*
 * A white ring, offset onto the charcoal. The offset is what makes the ring
 * visible around the white chosen button, so it never goes to zero.
 */
body.login.wp-core-ui .sn-2fa-method-switcher .sn-2fa-method-btn:focus {
	box-shadow: none;
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* The email panel matches the code box: white, square corners. */
body.login #login #sn-2fa-email-panel {
	background: #ffffff;
	border-radius: 0;
}

/*
 * Messages: normal weight. Success in gravity-text, since the words carry it;
 * errors in error-11, 5.1:1 on white, so a problem still stands out.
 */
body.login #login .okmsg,
body.login #login .errmsg {
	font-weight: 400;
}

body.login #login .okmsg {
	color: #1d211c;
}

body.login #login .errmsg {
	color: #c63f30;
}

/*
 * Below the box: the help line, then the lockup. login_footer renders this
 * after the login column closes, so it takes the column's width itself.
 */

.gs-managed-site-login-footer {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 100%;
	padding: 0 24px 24px;
	text-align: center;
	width: 320px;
}

body.login .gs-managed-site-login-footer__help {
	color: #ffffff;
	font-size: 13px;
	line-height: 1.6;
	margin: 24px 0 0;
}

.gs-managed-site-login-footer__lockup {
	margin: 12px 0 0;
}

/* The link is padded to a 44px target height around the 32px image. */
.gs-managed-site-login-footer__lockup-link {
	display: inline-block;
	line-height: 0;
	padding: 6px 0;
}

.gs-managed-site-login-footer__lockup img {
	display: inline-block;
	height: auto;
	max-width: 100%;
	width: 180px;
}