/*
 * The sign-in screens in design direction B. Loaded after WordPress's own
 * login stylesheet and storybank.css, so it only overrides what differs.
 */
body.login { background: var(--ground); color: var(--ink); font: 15px/1.5 var(--font); display: flex; flex-direction: column; min-height: 100vh; }
.login #login { width: min(400px, 100%); padding: 9vh max(16px, env(safe-area-inset-left)) 24px; margin: 0 auto; }

/* The name, not the WordPress logo. */
.login h1 { margin-bottom: 20px; text-align: left; }
.login h1 a { background: none; width: auto; height: auto; margin: 0; text-indent: 0; overflow: visible; font: 600 24px/1.2 var(--font); color: var(--ink); text-decoration: none; }
.login h1 a:focus { box-shadow: none; outline: 2px solid var(--accent); outline-offset: 4px; }

/* The form card. */
.login form { margin: 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; overflow: visible; }
.login form p, .login .user-pass-wrap { margin-bottom: 16px; }
.login label { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; margin-bottom: 4px; display: inline-block; }
.login form .input, .login input[type=text], .login input[type=password], .login input[type=email] {
	font: 16px/1.4 var(--font); min-height: 44px; padding: 9px 12px; margin: 0; border: 1px solid #C7D0DC; border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: none;
}
.login form .input:focus, .login input[type=text]:focus, .login input[type=password]:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); outline: none; }
.login .wp-pwd { position: relative; }
.login .button.wp-hide-pw { color: var(--muted); height: 44px; min-height: 44px; width: 44px; top: 0; right: 0; border: 0; background: none; }
.login .button.wp-hide-pw:focus { box-shadow: 0 0 0 2px var(--accent); }

/* One clear button. */
.login .button-primary, .login .button.button-large {
	float: none; width: 100%; min-height: 46px; height: auto; padding: 0 18px; margin: 4px 0 0; font: 600 16px/1 var(--font);
	background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius); color: var(--accent-ink); text-shadow: none; box-shadow: none;
}
.login .button-primary:hover, .login .button-primary:focus { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.login .button-primary:focus { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.login .submit { margin: 0; }
.login .forgetmenot { float: none; margin-bottom: 16px; }
.login .forgetmenot label { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.login input[type=checkbox] { width: 18px; height: 18px; margin: 1px 0 0; border-radius: 4px; accent-color: var(--accent); flex: none; }
.login input[type=checkbox]:checked::before { display: none; }
.login .button.button-secondary:not(.wp-hide-pw) { min-height: 44px; border-radius: var(--radius); border-color: var(--line); color: var(--ink); }

/* Messages. */
.login .message, .login .notice, .login #login_error, .login .success {
	margin: 0 0 16px; padding: 12px 16px; border: 1px solid #BFDBFE; border-left: 1px solid #BFDBFE; border-radius: var(--radius); background: var(--accent-soft); box-shadow: none; color: var(--ink);
}
.login #login_error, .login .notice-error { border-color: #F5B5AE; background: var(--alert-soft); color: #7A1A12; }
.login .success, .login .notice-success { border-color: #A7D7B5; background: var(--ok-soft); color: #14432A; }

/* Links under the form. */
.login #nav, .login #backtoblog { margin: 16px 0 0; padding: 0; font-size: 14px; }
.login #nav a, .login #backtoblog a { color: var(--accent); }
.login #backtoblog:empty, .login #backtoblog a:empty { display: none; }
.login .privacy-policy-page-link { display: none; }
.sb-login-help { width: min(400px, 100%); margin: 0 auto 32px; padding: 0 max(16px, env(safe-area-inset-left)); font-size: 13px; color: var(--muted); }

/* Two-factor setup and recovery codes (security.php), shown inside the same card. */
.login form ol { margin: 8px 0 16px 20px; line-height: 1.6; }
.login code { font: 15px/1.6 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1px; background: var(--inset); padding: 2px 6px; border-radius: 4px; word-break: break-all; }
.login pre { border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset) !important; }
.login .pw-weak, .login .indicator-hint { font-size: 13px; color: var(--muted); }

/* The code screen (second step). */
.sb-step-lede { margin: 0 0 16px !important; color: var(--muted); }
.login .sb-code-input { font: 600 24px/1.2 ui-monospace, Menlo, Consolas, monospace !important; letter-spacing: 6px; text-align: center; min-height: 52px !important; }
.sb-recovery { margin-top: 16px; font-size: 14px; }
.sb-recovery summary { cursor: pointer; color: var(--accent); }
.sb-recovery p { margin: 8px 0 0 !important; color: var(--muted); }
.sb-recovery summary { padding: 6px 0; }
.login #nav a { display: inline-flex; align-items: center; min-height: 28px; }
.sb-qr { display: block; width: 220px; margin: 10px 0 12px; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); line-height: 0; }
.sb-qr svg { display: block; width: 100%; height: auto; }