/*
 * wp-login.php in the site's clothes: lost password, set password and the
 * confirmation after it. Members land here from the migration mail, so the core
 * grey, the WordPress mark and the blue button would look like a phishing page.
 * Only colour, type and spacing change; core's markup and scripts stay as they are.
 */
body.login {
  background: var(--wp--preset--color--ground);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--m);
  color: var(--wp--preset--color--ink);
}
.login #login {
  width: 420px;
  max-width: calc(100% - 32px);
  padding-top: 6vh;
}
.login h1 a {
  width: 92px;
  height: 92px;
  margin-bottom: 26px;
  background-size: contain;
  background-position: center;
  mix-blend-mode: multiply;
}
.login form {
  margin-top: 0;
  padding: 26px;
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: var(--wp--custom--radius--l);
  background: var(--wp--preset--color--surface);
  box-shadow: var(--wp--custom--shadow--card);
}
.login label {
  display: inline-block;
  margin-bottom: 7px;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  letter-spacing: var(--wp--custom--letter-spacing--label);
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: 2.1px;
  color: var(--wp--preset--color--ink);
}
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login #pass1 {
  min-height: 0;
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: var(--wp--custom--radius--m);
  background: var(--wp--preset--color--surface);
  box-shadow: none;
  font-size: var(--wp--preset--font-size--l);
  line-height: 1.3;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login #pass1:focus {
  border-color: var(--wp--preset--color--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
  outline: none;
}
.login .button.wp-hide-pw {
  height: 100%;
  color: var(--wp--preset--color--ink-2);
}
.login .button.wp-hide-pw:focus {
  border-color: var(--wp--preset--color--primary);
  box-shadow: none;
}
.login #pass-strength-result {
  margin: -8px 0 14px;
  border-radius: var(--wp--custom--radius--s);
  font-weight: 600;
}
.login .description,
.login .indicator-hint {
  font-size: var(--wp--preset--font-size--s);
  line-height: 1.5;
  color: var(--wp--preset--color--ink-2);
}
.login .pw-weak label {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  letter-spacing: var(--wp--custom--letter-spacing--label);
  text-transform: uppercase;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--wp--preset--font-size--s);
}
.login .submit,
.login .reset-pass-submit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.login .button-primary,
.login .button.wp-generate-pw {
  float: none;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 14px 20px;
  border: 2px solid var(--wp--preset--color--primary);
  border-radius: var(--wp--custom--radius--s);
  background: var(--wp--preset--color--primary);
  box-shadow: none;
  text-shadow: none;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  letter-spacing: var(--wp--custom--letter-spacing--label);
  text-transform: uppercase;
  line-height: 1.2;
  font-size: var(--wp--preset--font-size--s);
  color: var(--wp--preset--color--primary-ink);
}
.login .button-primary:hover,
.login .button.wp-generate-pw:hover,
.login .button-primary:focus,
.login .button.wp-generate-pw:focus {
  border-color: var(--wp--preset--color--primary-deep);
  background: var(--wp--preset--color--primary-deep);
  box-shadow: none;
  color: var(--wp--preset--color--surface);
}
.login .button.wp-generate-pw {
  order: 2;
  background: transparent;
  color: var(--wp--preset--color--primary-deep);
}
.login .message,
.login .notice,
.login .success,
.login #login_error {
  margin-bottom: 18px;
  padding: 14px 18px;
  border-left: 4px solid var(--wp--preset--color--primary);
  border-radius: var(--wp--custom--radius--m);
  background: var(--wp--preset--color--surface-alt);
  box-shadow: none;
  font-size: var(--wp--preset--font-size--m);
  line-height: 1.5;
}
.login .message p,
.login .notice p,
.login .success p,
.login #login_error p {
  font-size: inherit;
  margin: 0;
}
.login #login_error,
.login .notice-error {
  border-left-color: var(--wp--preset--color--error);
}
.login #nav,
.login #backtoblog {
  margin: 18px 0 0;
  padding: 0;
  text-align: center;
  font-size: var(--wp--preset--font-size--m);
}
.login #nav a,
.login #backtoblog a {
  color: var(--wp--preset--color--primary-deep);
}
.login #nav a:hover,
.login #backtoblog a:hover,
.login #nav a:focus,
.login #backtoblog a:focus {
  color: var(--wp--preset--color--ink);
}
.login .privacy-policy-page-link a {
  color: var(--wp--preset--color--ink-2);
}