/* Purpose: Sign-in screen. Rebuilds wp-login.php as the two-panel desk login from the
   approved mockup — navy brand panel on the left, WordPress's own form on the right.
   Loaded only on wp-login.php; see inc/enqueue.php and inc/login.php. */

body.login {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
}

/* WordPress wraps the form in #login with its own fixed width and padding. */
body.login #login {
  width: 100%;
  max-width: 360px;
  margin: 0;
  padding: 0;
}

.login-split {
  display: flex;
  min-height: 100vh;
}

/* ---------- Brand panel ---------- */

.login-brand {
  position: relative;
  display: none;
  flex: 1.1;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: var(--space-10) var(--space-12);
  background: var(--color-secondary);
  color: var(--color-surface);
}

.login-brand::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -140px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(46, 53, 105, 0.55), transparent 65%);
}

.login-brand__top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.login-brand__logo {
  height: 62px;
  width: auto;
}

.login-brand__wordmark {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

.login-brand__mark {
  align-self: center;
  padding-left: var(--space-4);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #8B90AE;
}

.login-brand__copy { position: relative; z-index: 1; }

/* body.login prefix beats wp-login.php's own `.login h1 { text-align: center }`. */
body.login .login-brand__headline {
  max-width: 440px;
  text-align: left;
  font-size: clamp(1.75rem, 3.4vw, 2.625rem);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-surface);
}

.login-brand__headline .u-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--weight-medium);
}

.login-brand__sub {
  max-width: 390px;
  margin-top: var(--space-4);
  font-size: 14.5px;
  line-height: var(--leading-loose);
  color: #9BA0BE;
}

.login-brand__foot {
  position: relative;
  z-index: 1;
  font-size: var(--text-xs);
  color: #5A5F80;
}

/* ---------- Form panel ---------- */

.login-form-side {
  display: grid;
  flex: 1;
  place-items: center;
  padding: var(--space-8) var(--space-5);
}

body.login #login > h1 { display: none; }

body.login form {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* The card is drawn by inc/login.php around WordPress's own #login block. */
.login-card {
  width: 100%;
  max-width: 360px;
  padding: var(--space-8);
  border: var(--border-thin);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.login-card__title {
  margin-bottom: var(--space-1);
  font-size: 21px;
  font-weight: var(--weight-semibold);
}

.login-card__sub {
  margin-bottom: var(--space-6);
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Uppercase and tracked, as the mockup has them. At this size sentence case reads as
   body copy sitting above the field rather than as the field's label. */
body.login label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* "Keep me signed in" is a sentence beside its box, not a field label. */
body.login .forgetmenot label {
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
  width: 100%;
  height: 40px;
  margin: 0 0 var(--space-4);
  padding: 0 12px;
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(46, 53, 105, 0.12);
  outline: none;
}

body.login .wp-pwd { position: relative; }

body.login .wp-hide-pw {
  top: 2px;
  right: 2px;
  color: var(--color-text-muted);
}

/* ---------- Reset screen: WordPress's own password meter ---------- */

/* The meter and the generate button come from wp-admin's user-profile.js, which the
   reset screen needs — it also draws the show/hide eye. Dequeuing the script to be rid
   of the bright green bar would take the strength warning and the eye with it, so both
   are restyled instead. The meter keeps its four states; only its colours change. */
/* The meter is a sibling of the input inside .wp-pwd, not a child of the row — it sits
   below the field only because the wrapper stacks them. The eye button is positioned
   against this same wrapper, so the wrapper keeps position: relative. */
body.login #pass-strength-result {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--space-2) 0 var(--space-4);
  border: 0;
  background: none;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-align: left;
}

/* Before anything is typed WordPress gives the meter the class "empty" and a single
   space as its text — so :empty never matches it, and the node would hold a blank line
   above the weak-password row. */
body.login #pass-strength-result.empty,
body.login #pass-strength-result:empty { display: none; }

body.login #pass-strength-result.short,
body.login #pass-strength-result.bad { color: var(--color-error); }
body.login #pass-strength-result.good { color: var(--color-warning); }
body.login #pass-strength-result.strong { color: var(--color-success); }

body.login .description.indicator-hint {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* Secondary to the save button beside it, which is the one that finishes the job. */
body.login .wp-generate-pw {
  height: 34px;
  margin-bottom: var(--space-3);
  padding: 0 var(--space-4);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

body.login .wp-generate-pw:hover,
body.login .wp-generate-pw:focus {
  border-color: var(--color-primary);
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

/* Shown only when a weak password is typed, and it is a sentence beside a box.
   The row's own display is left to jQuery — .show() and .hide() write it inline, and a
   display declared here would either be overridden or fight the hidden state. The box
   and its sentence are aligned on the children instead. */
body.login .pw-weak {
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

body.login .pw-weak .pw-checkbox {
  margin: 0 var(--space-2) 0 0;
  vertical-align: middle;
}

body.login .pw-weak label {
  display: inline;
  margin: 0;
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  vertical-align: middle;
}

/* The caps-lock warning is WordPress's, drawn as a tooltip above the field. */
body.login #caps-warning {
  border-color: var(--color-warning);
  background: var(--color-bg-alt);
  color: var(--color-text);
}

body.login .wp-hide-pw:hover { color: var(--color-primary); }

body.login .forgetmenot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  float: none;
}

body.login .forgetmenot label {
  margin: 0;
  color: var(--color-text);
}

body.login input[type="checkbox"] { accent-color: var(--color-primary); }

body.login .submit { margin: 0; }

body.login .button-primary {
  display: flex;
  width: 100%;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-surface);
  text-shadow: none;
  box-shadow: none;
  float: none;
  transition: background var(--duration-fast);
}

body.login .button-primary:hover,
body.login .button-primary:focus {
  background: var(--color-primary-dark);
  box-shadow: none;
}

.login-card__aux {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  text-align: right;
  color: var(--color-text-muted);
}

/* "Forgot password?" sits inside the card, on the same line as the aux note. */
body.login #nav {
  margin-top: calc(var(--space-4) * -1 - 2px);
  text-align: left;
}

body.login #nav {
  margin: var(--space-4) 0 0;
  padding: 0;
  font-size: var(--text-sm);
}

body.login #nav a {
  color: var(--color-primary);
  font-weight: var(--weight-medium);
}

body.login #backtoblog,
body.login .privacy-policy-page-link,
body.login .language-switcher { display: none; }

/* Messages and errors in the desk's own voice. */
body.login .message,
body.login #login_error {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
  box-shadow: none;
}

body.login .message { border-left-color: var(--color-primary); }
body.login #login_error { border-left-color: var(--color-error); }

@media (min-width: 900px) {
  .login-brand { display: flex; }
}