/* ============================================================
   VITALITY LOOP — WORDPRESS ADAPTER
   ============================================================
   Per-property file. Maps WordPress's own login markup onto the
   shared kit's classes. The kit files themselves
   (vitality-loop-login.css / vitality-loop-ring.js) are never
   edited here — see the plugin header.

   Two surfaces are handled:
     1. wp-login.php        body.login  (restyled in place)
     2. the /login/ page    body.vl-standalone  (our own markup)

   Structural restyling of wp-login.php is gated behind the
   .vl-ready class, which JS adds. Without JS the visitor still
   gets the dark palette and an ordinary, fully working login
   form rather than a half-transformed one.
   ============================================================ */

/* ---------- Standalone page (/login/) ---------- */

body.vl-standalone {
  margin: 0;
  padding: 0;
  background: var(--vl-bg);
}

/* Our own form needs no extra rules — .vl-field / .vl-go / .vl-input
   are already the kit's. The password row starts hidden and is
   revealed by JS; without JS both rows show and the form works. */
body.vl-standalone .vl-pass-row,
body.login.vl-ready .vl-pass-row {
  display: flex;
}

body.vl-standalone.vl-ready .vl-pass-row,
body.login.vl-ready .vl-pass-row {
  display: none;
}

body.vl-standalone.vl-ready .vl-pass-row.vl-revealed,
body.login.vl-ready .vl-pass-row.vl-revealed {
  display: flex;
}

/* The step-1 arrow disappears once the password row is showing, so
   there is only ever one submit affordance on screen. */
body.vl-standalone.vl-ready .vl-step-1.vl-hidden,
body.login.vl-ready .vl-step-1.vl-hidden {
  display: none;
}

body.vl-standalone .vl-footnote a {
  display: inline-block;
  margin-bottom: 6px;
}

/* ---------- wp-login.php ---------- */

body.login {
  background: var(--vl-bg) !important;
  color: var(--vl-text-primary);
  font-family: var(--vl-font-mono);
  min-height: 100vh;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Neutralise the previous branding plugin's backdrop if it is still
   active. Deactivating it is still the right move, but this means the
   two never visibly fight in the meantime. */
body.login::before {
  content: none !important;
  background: none !important;
}

/* Scanline wash, matching the kit. */
body.login::after {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    var(--vl-scanline) 3px,
    var(--vl-scanline) 4px
  );
  pointer-events: none;
  z-index: 2;
}

body.login .vl-canvas {
  z-index: 0;
}

body.login #login {
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  width: 100%;
  /* Mirrors .vl-orbital in the kit: the width cap is the content box and the
     gutter comes from the auto margins outside it, not from padding inside.
     Padding inside the cap narrows the content enough to wrap the tagline at
     375px, which the kit never does. */
  max-width: min(calc(var(--vl-ring-r) * 1.5), 92vw);
  padding: 24px 0;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* WordPress's own logo block. Our injected wordmark replaces it.
   Scoped to .wp-login-logo on purpose: a bare `#login h1` also matches the
   injected Vitality Loop wordmark, which lives inside #login too. */
body.login.vl-ready #login h1.wp-login-logo {
  display: none;
}

/* WordPress hides this in its own login stylesheet, but do not depend on
   another stylesheet's load order for whether a heading is visible. */
body.login .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The form: strip the card entirely. This is the "no box" rule. */
body.login #loginform,
body.login #lostpasswordform,
body.login #resetpassform,
body.login #registerform {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto;
  width: 100%;
  max-width: 340px;
  overflow: visible;
}

body.login form p,
body.login form .user-pass-wrap {
  margin: 0;
}

/* Field labels are visually redundant next to the placeholders JS adds, but
   must stay available to screen readers. The "keep me signed in" label is
   deliberately excluded — it is the only visible label in the design, and a
   checkbox with no visible text is not a control anyone can use. */
body.login.vl-ready #loginform > p:not(.forgetmenot) > label,
body.login.vl-ready .user-pass-wrap > label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Inputs: underline only. */
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 4px 15px !important;
  color: var(--vl-text-primary) !important;
  font-family: var(--vl-font-mono) !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  text-align: center;
  min-height: 0 !important;
  margin: 0 !important;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

body.login input::placeholder {
  color: var(--vl-text-muted);
}

body.login input:-webkit-autofill,
body.login input:-webkit-autofill:hover,
body.login input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--vl-text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--vl-bg) inset;
  caret-color: var(--vl-text-primary);
}

/* WordPress's show/hide password eye sits inside the field wrapper. Keep it
   usable but make it disappear into the design. */
/* WordPress ships .wp-pwd at width:100%. Inside the flex .vl-field it then
   claims the whole row and shoves the submit arrow past the right edge — at
   375px the arrow ends up half off-screen. Flex it instead so the input takes
   the slack and the 38px arrow keeps its place. min-width:0 is required or the
   input's intrinsic width stops it shrinking. */
body.login .wp-pwd {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

body.login .wp-pwd input[type="password"],
body.login .wp-pwd input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}

body.login .wp-hide-pw {
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--vl-text-muted) !important;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  flex-shrink: 0;
}

body.login .wp-hide-pw:hover,
body.login .wp-hide-pw:focus {
  color: var(--vl-text-primary) !important;
}

body.login .wp-hide-pw:focus-visible {
  outline: 2px solid var(--vl-teal);
  outline-offset: 2px;
}

/* WordPress's real submit, restyled into the kit's circular arrow. The input
   itself is untouched so the form still submits exactly as WordPress expects. */
body.login.vl-ready .submit,
body.login.vl-ready #wp-submit {
  flex-shrink: 0;
}

body.login.vl-ready #wp-submit {
  /* Explicit flex sizing, not just width: this is a flex item and any stray
     flex-grow elsewhere would otherwise stretch the circle into an oval. */
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--vl-rule) !important;
  background: transparent !important;
  color: var(--vl-text-secondary) !important;
  font-family: var(--vl-font-mono) !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  float: none !important;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

body.login.vl-ready .vl-field:focus-within #wp-submit,
body.login.vl-ready #wp-submit:hover {
  border-color: var(--vl-teal) !important;
  color: #08130f !important;
  background: var(--vl-teal) !important;
}

body.login.vl-ready #wp-submit:focus-visible {
  outline: 2px solid var(--vl-teal);
  outline-offset: 2px;
}

/* "Remember Me" becomes the small centered checkbox row. */
body.login.vl-ready .forgetmenot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px !important;
  float: none !important;
  color: var(--vl-text-secondary);
  font-size: 12px;
  letter-spacing: 0.3px;
  line-height: 1.4;
}

body.login.vl-ready .forgetmenot label {
  color: var(--vl-text-secondary);
  font-size: 12px;
  cursor: pointer;
}

/* Drawn from scratch rather than tinted. WordPress's forms.css already sets
   appearance:none and paints its own box with a dashicon check, so inheriting
   any of it leaves a near-invisible control on the dark backdrop. Owning the
   whole control is the only way to know what renders. */
body.login input[type="checkbox"],
body.vl-standalone input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  min-width: 14px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--vl-rule);
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}

body.login input[type="checkbox"]:hover,
body.vl-standalone input[type="checkbox"]:hover {
  border-color: var(--vl-teal);
}

body.login input[type="checkbox"]:checked,
body.vl-standalone input[type="checkbox"]:checked {
  background: var(--vl-teal);
  border-color: var(--vl-teal);
}

/* The tick. ::before is what WordPress uses for its dashicon, so overriding it
   here also suppresses that. */
body.login input[type="checkbox"]:checked::before,
body.vl-standalone input[type="checkbox"]:checked::before {
  content: "";
  display: block;
  width: 3px;
  height: 7px;
  margin-top: -2px;
  border: solid #08130f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  font-family: inherit;
  color: transparent;
  background: none;
}

body.login input[type="checkbox"]::before,
body.vl-standalone input[type="checkbox"]::before {
  content: "";
}

body.login input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--vl-teal);
  outline-offset: 2px;
}

/* Footer links: lost password, back to site. */
body.login #nav,
body.login #backtoblog {
  position: relative;
  z-index: 3;
  margin: 0;
  padding: 0;
  text-align: center;
  color: var(--vl-text-muted);
  font-family: var(--vl-font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  line-height: 1.7;
  text-shadow: none;
}

body.login #nav {
  margin-top: 40px;
}

body.login #nav a,
body.login #backtoblog a {
  color: var(--vl-text-muted) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--vl-rule);
  transition: color 0.2s, border-color 0.2s;
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
  color: var(--vl-text-primary) !important;
  border-bottom-color: var(--vl-teal);
}

body.login #nav a:focus-visible,
body.login #backtoblog a:focus-visible {
  outline: 2px solid var(--vl-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Notices: WordPress errors and messages, restyled boxless. */
body.login #login_error,
body.login .message,
body.login .success,
body.login .notice {
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  padding: 0 0 14px !important;
  margin: 0 0 6px !important;
  color: var(--vl-text-secondary) !important;
  font-family: var(--vl-font-mono) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  text-align: center;
}

body.login #login_error {
  color: var(--vl-error) !important;
}

body.login #login_error a,
body.login .message a {
  color: inherit !important;
}

/* WordPress's password-strength meter and language switcher add visual noise
   the orbital design has no room for. */
body.login .language-switcher {
  display: none;
}

/* The injected wordmark, tagline, rows and footnote reuse the kit classes,
   so they need no rules here beyond sitting above the canvas. */
body.login .vl-mark,
body.login .vl-auth,
body.login .vl-footnote,
body.login .vl-or {
  position: relative;
  z-index: 3;
}

/* In the kit the wordmark block is a direct flex item of .vl-orbital, so
   align-items:center lets it size to max-content and the tagline stays on one
   line at 375px. Here it sits one level deeper inside #login, which caps it at
   the ring width and wraps the tagline. Size it to content and cap it at the
   viewport instead. */
body.login .vl-mark {
  width: max-content;
  max-width: 96vw;
}

body.login .vl-auth {
  width: 100%;
  max-width: 340px;
}

@media (max-width: 560px) {
  body.login #login {
    width: 92vw;
  }
}