/* assets/css/auth.css
 * Sign in. One card, centred, nothing else on the page competing with it.
 */

.auth {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 320px);
  padding: 64px 0 88px;
  /* A soft lift behind the card rather than a flat fill. Subtle enough that
     it reads as depth, not as a second element competing with the form. */
  background: radial-gradient(
      ellipse 120% 90% at 50% 32%,
      var(--verde-100) 0%,
      var(--band) 62%
    ),
    var(--band);
}

.auth > .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* The card is 440 wide with roughly 740px of empty band each side at 1920.
   These are the ornaments already cut for the reviews band and toned for
   this exact colour, so the page gets dressed without a new asset. */
.auth .orn--grass-tl {
  top: 0;
  left: 0;
  width: 150px;
}

.auth .orn--flag-bl {
  bottom: 0;
  left: 20px;
  width: 280px;
}

.auth .orn--sun-tr {
  top: 34px;
  right: 40px;
  width: 150px;
}

.auth .orn--bush-br {
  right: 0;
  bottom: 0;
  width: 300px;
}

/* The global rule drops the left-hand ornaments below 1500 because on the
   reviews band they collide with left-aligned copy. Here the card is centred
   with 500px clear on each side at 1440, so they can stay. */
@media (min-width: 1101px) and (max-width: 1500px) {
  .auth .orn--grass-tl,
  .auth .orn--flag-bl {
    display: block;
  }
}

/* Below this the card and the artwork start sharing space. */
@media (max-width: 1100px) {
  .auth .orn {
    display: none;
  }
}

.auth__card {
  max-width: 440px;
  margin-inline: auto;
  padding: 46px 44px 40px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 22px 50px rgba(5, 52, 36, 0.14);
  text-align: center;
}

.auth__brand {
  margin-bottom: 22px;
}

.auth__title {
  font-size: var(--h4);
  line-height: var(--h4-lh);
}

.auth__lead {
  margin-top: 6px;
  color: var(--ink-soft);
}

.auth__form {
  margin-top: 30px;
  text-align: left;
}

.auth__submit {
  width: 100%;
  margin-top: 26px;
}

.auth__alt {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-soft);
}

.auth__alt a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.auth__help {
  max-width: 440px;
  margin: 22px auto 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink-soft);
  text-align: center;
}

@media (max-width: 640px) {
  .auth {
    min-height: 0;
    padding: 44px 0 56px;
  }

  .auth__card {
    padding: 34px 24px 32px;
  }
}

/* ---- Added for the live page ------------------------------------------
 * The design was markup only, so these two states had nowhere to be styled.
 */

/* Sign-in closed from /admin/settings. It replaces the form rather than
   disabling it — a form you can type into and not submit is a worse answer
   than no form. */
.c-auth-closed {
  margin-top: 26px;
  text-align: left;
}

/* The submit button spends time disabled while the fields are empty and while
   a request is in flight. Without this it looks pressable throughout. */
.auth__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}