/*
 * Cyborg Studio — the login screen.
 *
 * ⚠  THIS IS THE ONLY HAND-WRITTEN ADMIN CSS IN THIS PLUGIN, AND THAT IS ON
 *     PURPOSE. Everything a client sees INSIDE wp-admin is recolored through
 *     WordPress's own color-scheme API (colors-cyborg.css), because admin
 *     markup shifts between releases and hand-written overrides break quietly
 *     on update — you find out when a client does.
 *
 *     wp-login.php is the exception worth making. It is one small, self-
 *     contained screen whose markup has been essentially stable for a decade,
 *     it is the first thing a client sees, and the color-scheme API does not
 *     reach most of it. If you are ever tempted to add a rule here for a
 *     screen that is NOT wp-login.php, that rule belongs in the color scheme
 *     or nowhere.
 */

body.login {
  background: #05060a;
  color: #9aa3b2;
}

/* The mark, in place of the WordPress logo. Sized in one place: change
   --cy-logo-h and the whole block re-lays out. */
body.login #login {
  --cy-logo-h: 74px;
  padding-top: 6vh;
  width: 340px;
}

body.login h1 a {
  background-image: var(--cy-login-logo);
  background-size: contain;
  background-position: center center;
  width: 260px;
  height: var(--cy-logo-h);
  margin-bottom: 26px;
}

/* The card. */
body.login form {
  background: #0a0c12;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  padding: 30px 26px 26px;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
  background: #05060a;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  color: #ffffff;
  padding: 9px 12px;
}

body.login label {
  color: #c8d0dc;
}

/* Focus ring. Teal, and thick enough to satisfy a keyboard user — never
   remove the outline here; this is the one screen where losing focus
   visibility locks somebody out rather than merely annoying them. */
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus,
body.login input[type="checkbox"]:focus,
body.login .button:focus,
body.login a:focus {
  border-color: #00dbc9;
  box-shadow: 0 0 0 2px rgba(0, 219, 201, .55);
  outline: 2px solid transparent;   /* keeps a ring in forced-colors mode */
  outline-offset: 0;
}

/* Autofill: Chrome paints its own near-white background over the field, which
   on a dark card renders the value as white-on-white. The inset shadow is the
   only reliable way to repaint it. */
body.login input:-webkit-autofill,
body.login input:-webkit-autofill:hover,
body.login input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px #05060a inset;
  caret-color: #ffffff;
}

body.login .button-primary {
  background: #00dbc9;
  border-color: #00dbc9;
  color: #04050a;
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
  border-radius: 999px;
  padding: 2px 22px;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
  background: #00c9b1;
  border-color: #00c9b1;
  color: #04050a;
}

/* The links under the card. #backtoblog and #nav are the "Back to site" and
   "Lost your password?" rows. */
body.login #backtoblog a,
body.login #nav a,
body.login .privacy-policy-link {
  color: #9aa3b2;
}

body.login #backtoblog a:hover,
body.login #nav a:hover,
body.login .privacy-policy-link:hover {
  color: #00dbc9;
}

body.login .message,
body.login .success {
  background: #0a0c12;
  border-left-color: #00dbc9;
  color: #c8d0dc;
}

body.login #login_error {
  background: #0a0c12;
  border-left-color: #ff5c72;
  color: #ffd7dc;
}

/* The Remember Me checkbox. Core paints it white-on-white-border, which on a
   dark card reads as a bright hole. Recolored, and the checkmark redrawn —
   core's tick is a dashicon `:before` in the browser's default text color,
   so recoloring only the box leaves an invisible tick on a teal field. */
body.login input[type="checkbox"] {
  background: #05060a;
  border-color: rgba(255, 255, 255, .24);
  border-radius: 4px;
}

body.login input[type="checkbox"]:checked {
  background: #00dbc9;
  border-color: #00dbc9;
}

body.login input[type="checkbox"]:checked::before {
  color: #04050a;
  margin: -3px 0 0 -4px;
}

body.login .dashicons-visibility,
body.login .wp-hide-pw .dashicons {
  color: #9aa3b2;
}

/* The language switcher WordPress drops below the form on multilingual
   installs — left visible, just made legible on the dark ground. */
body.login .language-switcher select {
  background: #0a0c12;
  border-color: rgba(255, 255, 255, .14);
  color: #c8d0dc;
}

@media (prefers-reduced-motion: no-preference) {
  body.login .button-primary {
    transition: background .18s ease, border-color .18s ease;
  }
}