/* =========================================================
   THE ALGORITHM FORGE
   CLIENT LOGIN
========================================================= */


:root {

  --charcoal:
    #202124;

  --charcoal-deep:
    #17181a;

  --ember:
    #f0642b;

  --ember-hover:
    #dc5521;

  --ivory:
    #f7f4ee;

  --white:
    #ffffff;

  --muted:
    #737373;

  --border:
    #dedbd4;

  --soft:
    #f1eee8;

}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing:
    border-box;
}


html {
  min-height:
    100%;
}


body {

  margin:
    0;

  min-height:
    100vh;

  font-family:
    "Inter",
    sans-serif;

  color:
    var(--charcoal);

  background:
    var(--ivory);

}


button,
input {
  font:
    inherit;
}


a {
  color:
    inherit;

  text-decoration:
    none;
}


/* =========================================================
   PAGE
========================================================= */

.login-page {

  min-height:
    100vh;

  display:
    flex;

  flex-direction:
    column;

}


/* =========================================================
   BRAND
========================================================= */

.login-brand {

  width:
    100%;

  padding:
    28px
    34px;

}


.brand-link {

  width:
    fit-content;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    12px;

}


.brand-logo {

  width:
    46px;

  height:
    46px;

  object-fit:
    contain;

}


.brand-wordmark {

  display:
    flex;

  flex-direction:
    column;

  line-height:
    1;

}


.brand-the {

  margin-bottom:
    2px;

  font-size:
    0.58rem;

  font-weight:
    700;

  letter-spacing:
    0.28em;

  color:
    var(--muted);

}


.brand-name {

  font-family:
    "Anton",
    sans-serif;

  font-size:
    1.15rem;

  letter-spacing:
    0.025em;

}


.brand-accent {
  color:
    var(--ember);
}


/* =========================================================
   LOGIN SHELL
========================================================= */

.login-shell {

  flex:
    1;

  display:
    grid;

  place-items:
    center;

  width:
    100%;

  padding:
    36px
    24px
    60px;

}


.login-card {

  width:
    min(
      100%,
      480px
    );

  padding:
    42px;

  border:
    1px solid
    var(--border);

  border-radius:
    16px;

  background:
    var(--white);

  box-shadow:
    0 18px 55px
    rgba(
      32,
      33,
      36,
      0.08
    );

}


/* =========================================================
   HEADING
========================================================= */

.login-heading {

  margin-bottom:
    30px;

}


.eyebrow {

  margin:
    0
    0
    10px;

  font-size:
    0.72rem;

  font-weight:
    800;

  letter-spacing:
    0.16em;

  color:
    var(--ember);

}


.login-heading h1 {

  margin:
    0;

  font-family:
    "Anton",
    sans-serif;

  font-size:
    clamp(
      2.6rem,
      7vw,
      4rem
    );

  font-weight:
    400;

  line-height:
    0.98;

  letter-spacing:
    0.01em;

  color:
    var(--charcoal);

}


.login-heading h1 span {
  color:
    var(--ember);
}


.login-intro {

  margin:
    18px
    0
    0;

  max-width:
    390px;

  font-size:
    0.9rem;

  line-height:
    1.65;

  color:
    var(--muted);

}


/* =========================================================
   FORM
========================================================= */

.login-form {

  display:
    grid;

  gap:
    20px;

}


.form-field {

  display:
    grid;

  gap:
    8px;

}


.form-field label {

  font-size:
    0.76rem;

  font-weight:
    700;

  color:
    var(--charcoal);

}


.form-field input {

  width:
    100%;

  min-height:
    48px;

  padding:
    11px
    13px;

  border:
    1px solid
    var(--border);

  border-radius:
    8px;

  outline:
    none;

  color:
    var(--charcoal);

  background:
    var(--white);

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;

}


.form-field input:focus {

  border-color:
    var(--ember);

  box-shadow:
    0 0 0 3px
    rgba(
      240,
      100,
      43,
      0.12
    );

}


/* =========================================================
   PASSWORD
========================================================= */

.password-field {

  position:
    relative;

}


.password-field input {

  padding-right:
    70px;

}


.password-toggle {

  position:
    absolute;

  top:
    50%;

  right:
    12px;

  transform:
    translateY(-50%);

  padding:
    5px;

  border:
    0;

  cursor:
    pointer;

  font-size:
    0.7rem;

  font-weight:
    700;

  color:
    var(--ember);

  background:
    transparent;

}


.password-toggle:hover {
  color:
    var(--ember-hover);
}


/* =========================================================
   ERROR
========================================================= */

.login-error {

  padding:
    12px
    14px;

  border:
    1px solid
    rgba(
      190,
      45,
      45,
      0.25
    );

  border-radius:
    8px;

  font-size:
    0.78rem;

  line-height:
    1.5;

  color:
    #9e2929;

  background:
    rgba(
      190,
      45,
      45,
      0.07
    );

}


/* =========================================================
   BUTTON
========================================================= */

.login-button {

  min-height:
    50px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  padding:
    12px
    20px;

  border:
    0;

  border-radius:
    8px;

  cursor:
    pointer;

  font-weight:
    800;

  color:
    var(--white);

  background:
    var(--ember);

  transition:
    background 160ms ease,
    transform 160ms ease;

}


.login-button:hover:not(:disabled) {

  background:
    var(--ember-hover);

  transform:
    translateY(-1px);

}


.login-button:disabled {

  cursor:
    wait;

  opacity:
    0.72;

}


/* =========================================================
   LOADER
========================================================= */

.button-loader {

  width:
    16px;

  height:
    16px;

  border:
    2px solid
    rgba(
      255,
      255,
      255,
      0.4
    );

  border-top-color:
    var(--white);

  border-radius:
    50%;

  animation:
    client-login-spin
    700ms
    linear
    infinite;

}


@keyframes client-login-spin {

  to {
    transform:
      rotate(360deg);
  }

}


/* =========================================================
   HELP
========================================================= */

.login-help {

  margin-top:
    28px;

  padding-top:
    22px;

  border-top:
    1px solid
    var(--border);

  text-align:
    center;

}


.login-help p {

  margin:
    0
    0
    5px;

  font-size:
    0.75rem;

  color:
    var(--muted);

}


.login-help a {

  font-size:
    0.76rem;

  font-weight:
    700;

  color:
    var(--ember);

}


.login-help a:hover {
  text-decoration:
    underline;
}


/* =========================================================
   FOOTER
========================================================= */

.login-footer {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  padding:
    20px
    24px
    28px;

  font-size:
    0.68rem;

  color:
    var(--muted);

}


.login-footer a:hover {
  color:
    var(--ember);
}

/* =========================================================
   FORGOT PASSWORD
========================================================= */

.forgot-password-row {

  display:
    flex;

  justify-content:
    flex-end;

  margin-top:
    -10px;

}


.forgot-password-button {

  padding:
    0;

  border:
    0;

  cursor:
    pointer;

  font-size:
    0.72rem;

  font-weight:
    700;

  color:
    var(--ember);

  background:
    transparent;

}


.forgot-password-button:hover {

  color:
    var(--ember-hover);

  text-decoration:
    underline;

}

/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width: 600px
) {

  .login-brand {

    padding:
      22px
      20px;

  }


  .brand-logo {

    width:
      40px;

    height:
      40px;

  }


  .brand-name {
    font-size:
      1rem;
  }


  .login-shell {

    align-items:
      start;

    padding:
      22px
      16px
      44px;

  }


  .login-card {

    padding:
      30px
      22px;

  }


  .login-heading h1 {

    font-size:
      3rem;

  }

}

.password-requirements {
  margin: 8px 0 0;
  color: #6f7378;
  font-size: 0.82rem;
  line-height: 1.45;
}