/* DCM Switchboard — wp-login.php in the house style.            Added v1.5.0

   wp-login.php does not load theme.json or theme.css, so the tokens are
   literal here. Keep them in step with :root in theme.css.

   Covers: sign in, lost password, reset password, "check your email",
   and the logged-out / error messages. Nothing structural is changed;
   WordPress's own markup and JS (show password, remember me) are intact.  */

@font-face{font-family:"Spectral";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/spectral-600.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/source-sans-3-400.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/source-sans-3-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2")}

:root{
  --ink:#0E1722;--ink-0:#080F17;--ink-2:#14202D;--ink-3:#1B2937;
  --paper:#F1F2EE;--paper-2:#FBFBF9;
  --brass:#C18B43;--brass-2:#D8A65C;--slate:#5C7180;
  --on-ink:#ECEDE7;--on-ink-dim:#9FABB6;--on-paper:#16212C;--on-paper-dim:#51616E;
  --line-dark:rgba(255,255,255,.10);--line-light:rgba(14,23,34,.13);
}

html,body.login{background:var(--ink)}
body.login{
  font-family:"Source Sans 3",system-ui,sans-serif;
  color:var(--on-paper);
  -webkit-font-smoothing:antialiased;
}

/* ---------- the brand line ---------------------------------------------- */
.login h1 a,
.login .wp-login-logo a{
  background:none;
  width:auto;height:auto;
  text-indent:0;overflow:visible;
  font-family:"IBM Plex Mono",monospace;font-weight:500;
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brass);text-decoration:none;
  display:block;margin:0 auto 22px;padding:0;
}
.login h1 a:hover,.login h1 a:focus,
.login .wp-login-logo a:hover,.login .wp-login-logo a:focus{color:var(--brass-2)}

/* ---------- the card ---------------------------------------------------- */
#login{width:360px;padding:9vh 0 0}


.login form{
  --pad:30px;
  background:var(--paper);
  border:0;border-radius:2px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 60px rgba(0,0,0,.45);
  padding:var(--pad) var(--pad) 28px;
  margin-top:0;
}
.login form::before{
  content:"";display:block;height:3px;background:var(--brass);
  margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 26px;
  border-radius:2px 2px 0 0;
}

.login label{
  display:block;
  font-family:"IBM Plex Mono",monospace;font-weight:500;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);margin-bottom:6px;
}
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"]{
  font-family:"Source Sans 3",system-ui,sans-serif;font-size:1rem;
  background:var(--paper-2);color:var(--on-paper);
  border:1px solid var(--line-light);border-radius:6px;
  padding:10px 12px;margin:0 0 18px;
  box-shadow:none;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus{
  border-color:var(--brass);box-shadow:0 0 0 2px rgba(193,139,67,.28);outline:none;
}
.login .wp-pwd{margin-bottom:18px}
.login .wp-pwd .input{margin-bottom:0}
.login .wp-pwd .button.wp-hide-pw{color:var(--slate)}
.login .wp-pwd .button.wp-hide-pw:hover{color:var(--on-paper)}

/* ---------- the "keep me signed in" row -----------------------------------
   wp-login.php renders the checkbox and its label as SIBLINGS inside
   .forgetmenot, not nested — so the row has to be laid out here. Putting
   flex on the label (the obvious place) does nothing, which is how the
   label ended up touching the box.

   WordPress draws the tick as a 21px SVG dashicon pulled into place with
   negative margins. That is sized for its own 1rem box and lands outside a
   custom one, so the glyph is replaced below rather than recoloured.        */

.login .forgetmenot{
  display:flex;align-items:center;gap:.55rem;
  margin:0 0 10px;min-height:32px;
}
.login .forgetmenot label{
  font-family:"Source Sans 3",system-ui,sans-serif;font-size:.92rem;
  letter-spacing:0;text-transform:none;color:var(--on-paper-dim);
  margin:0;line-height:1.25;cursor:pointer;
}

.login input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  flex:none;width:19px;height:19px;min-width:19px;
  margin:0;padding:0;
  border:1px solid var(--line-light);border-radius:4px;
  background:var(--paper-2);box-shadow:none;
  display:inline-grid;place-content:center;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease;
}
.login input[type="checkbox"]:checked{background:var(--brass);border-color:var(--brass)}

/* Two borders on a rotated box: crisp at any zoom, no image, no font. */
.login input[type="checkbox"]:checked::before{
  content:"";display:block;
  width:5px;height:9px;margin:-2px 0 0 0;
  border:solid #1A130A;border-width:0 2px 2px 0;
  border-radius:0;transform:rotate(45deg);
  background:none;box-shadow:none;filter:none;
}
.login input[type="checkbox"]:focus-visible{
  outline:2px solid var(--brass-2);outline-offset:2px;
}

.login .submit{margin-top:6px}
.login .button-primary,
.wp-core-ui .login .button-primary{
  float:none;width:100%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Source Sans 3",system-ui,sans-serif;font-weight:600;font-size:.95rem;
  letter-spacing:.01em;line-height:1;
  min-height:44px;padding:.85rem 1.5rem;
  background:var(--brass);color:#1A130A;
  border:1px solid var(--brass);border-radius:7px;
  box-shadow:none;text-shadow:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.login .button-primary:hover,
.login .button-primary:focus,
.wp-core-ui .login .button-primary:hover,
.wp-core-ui .login .button-primary:focus{
  background:var(--brass-2);border-color:var(--brass-2);color:#1A130A;
  box-shadow:none;transform:translateY(-1px);
}
.wp-core-ui .login .button-primary:focus{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--brass-2)}

/* ---------- messages ----------------------------------------------------- */
.login .message,
.login .success,
.login #login_error,
.login .notice{
  background:var(--ink-2);color:var(--on-ink);
  border:0;border-left:3px solid var(--brass);border-radius:2px;
  box-shadow:none;padding:14px 16px;margin-bottom:18px;
  font-size:.95rem;line-height:1.5;
}
.login #login_error{border-left-color:#D98A6A}
.login #login_error a,.login .message a,.login .notice a{color:var(--brass-2)}
.login #login_error strong{color:var(--on-ink)}

/* ---------- links under the card ---------------------------------------- */
.login #nav,.login #backtoblog{
  text-align:center;font-size:.86rem;padding:0;
}
.login #nav{margin:20px 0 6px}
.login #nav a,.login #backtoblog a{color:var(--on-ink-dim);text-decoration:none}
.login #nav a:hover,.login #backtoblog a:hover,
.login #nav a:focus,.login #backtoblog a:focus{color:var(--brass-2)}
.login .privacy-policy-page-link{margin-top:2em}
.login .privacy-policy-page-link a{color:var(--slate);font-size:.8rem}

/* ---------- reset-password page ------------------------------------------ */
.login .pw-weak label,
.login #pass-strength-result{
  font-family:"Source Sans 3",system-ui,sans-serif;letter-spacing:0;text-transform:none;
}
.login #pass-strength-result{border-radius:6px;margin-bottom:18px}
.login .reset-pass-submit .button{
  font-family:"Source Sans 3",system-ui,sans-serif;font-weight:600;
}
.login .reset-pass-submit .button:not(.button-primary){
  background:transparent;color:var(--on-paper-dim);border-color:var(--line-light);
}
.login p.description.indicator-hint{color:var(--on-paper-dim);font-size:.85rem}

/* ---------- language switcher (hide; the site is English) --------------- */
.login .language-switcher{display:none}


/* ---------- narrow screens -----------------------------------------------
   Last in the file on purpose: several of these override rules declared
   above at the same specificity, so source order is what makes them win.   */

@media(max-width:420px){
  #login{width:auto;margin:0 14px;padding-top:6vh}
  .login form{--pad:22px}

  /* Nothing on this page should need a precise tap. */
  .login #nav,.login #backtoblog{font-size:.9rem}
  .login #nav a,.login #backtoblog a{display:inline-block;padding:.4rem 0}
  .login .forgetmenot{min-height:36px}
}

/* Landscape on a phone: 6vh of head room is nothing, and the card would sit
   under the browser chrome. */
@media(max-height:520px){
  #login{padding-top:20px}
  #login h1 a,.login .wp-login-logo a{margin-bottom:14px}
}