/*
 * Sign-in pages: the team console, the partner portal and the website (UI
 * refresh, October 2026). A residence photographed at the hour the house
 * comes alive, and a quiet column for the form. On phones the photograph is a
 * band at the top and the form rises over it as a sheet.
 *
 * .auth--console and .auth--partners take the console's corners; .auth--site
 * keeps the website's square ones (handoff 6, "Layout").
 */

.auth-page {
  background: var(--ebony);
}

.auth {
  --auth-sheet-radius: 20px;
  --auth-control-height: 50px;
  --radius-control: var(--radius-console);
  --input-height: var(--auth-control-height);
  --control-font-size: 15px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.auth--site {
  --auth-sheet-radius: 0;
  --radius-control: var(--radius-site);
}

/* The photograph ------------------------------------------------------------ */

.auth__visual {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 300px;
  min-height: 38svh;
  padding: 22px 22px 52px;
  overflow: hidden;
  /* Lamplight on walnut, for a page without a photograph. */
  background:
    radial-gradient(90% 70% at 18% 0%, rgba(184, 150, 104, 0.22), transparent 70%),
    linear-gradient(160deg, #2a221a 0%, var(--walnut) 45%, var(--ebony) 100%);
}

.auth__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.auth__photo .picture__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

/* Dark at the top for the wordmark and at the foot for the words, clear in the middle for the house. */
.auth__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(20, 17, 14, 0.62) 0%, rgba(20, 17, 14, 0.08) 30%, rgba(20, 17, 14, 0.18) 55%, rgba(20, 17, 14, 0.94) 100%),
    radial-gradient(120% 80% at 0% 100%, rgba(20, 17, 14, 0.55), transparent 60%);
}

.auth__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  min-height: 44px;
  color: var(--ivory);
  text-decoration: none;
}

.auth__logo {
  display: block;
  width: 104px;
  height: auto;
}

.auth__area {
  padding: 5px 12px 6px;
  border: 1px solid rgba(239, 231, 218, 0.26);
  border-radius: var(--radius-full);
  background: rgba(20, 17, 14, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12px;
  line-height: 1.2;
  color: var(--ivory);
}

.auth__statement {
  max-width: 34rem;
}

.auth__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 32px;
  line-height: 1.06;
  letter-spacing: -0.005em;
  color: var(--ivory);
  text-wrap: balance;
}

.auth__perks {
  display: none;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.auth__perks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 15px;
  color: rgba(239, 231, 218, 0.86);
}

.auth__perks .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--brass-light);
}

.auth__caption {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  font-size: 13px;
  color: rgba(239, 231, 218, 0.72);
}

.auth__caption .icon {
  width: 15px;
  height: 15px;
  color: var(--brass-light);
}

/* The form ------------------------------------------------------------------ */

.auth__main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-top: calc(-1 * var(--auth-sheet-radius) - 8px);
  padding: 36px 22px 28px;
  border-radius: var(--auth-sheet-radius) var(--auth-sheet-radius) 0 0;
  background: var(--ebony);
}

.auth--site .auth__main {
  margin-top: 0;
}

/* A lamp left on at the top of the column. */
.auth__main::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(70% 45% at 80% 0%, rgba(184, 150, 104, 0.09), transparent 70%);
  pointer-events: none;
}

.auth__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.auth__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 36px;
  line-height: 1.05;
  color: var(--ivory);
  text-wrap: balance;
}

.auth__lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sand);
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth__form .field__label {
  color: var(--ivory);
  font-size: 14px;
}

.auth .btn {
  height: var(--auth-control-height);
}

.auth__submit {
  width: 100%;
}

.auth--console .auth__submit,
.auth--partners .auth__submit {
  font-size: 15px;
}

/* The way back to the email step. */
.auth__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 44px;
  margin: -12px 0 -8px -2px;
  color: var(--sand);
  font-size: 14px;
  text-decoration: none;
}

.auth__back:hover {
  color: var(--ivory);
}

.auth__back .icon {
  width: 18px;
  height: 18px;
}

/* The envelope above "Check your email". */
.auth__mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(184, 150, 104, 0.45);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(184, 150, 104, 0.24), rgba(184, 150, 104, 0.03) 70%);
  color: var(--brass-light);
}

.auth--site .auth__mark {
  border-radius: 0;
}

.auth__mark .icon {
  width: 24px;
  height: 24px;
}

/* The address the code went to, with the way to change it. */
.auth__address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 2px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--smoke-soft);
  border-radius: var(--radius-control);
  background: var(--walnut);
  font-size: 14px;
  color: var(--ivory);
  overflow-wrap: anywhere;
}

.auth__address strong {
  font-weight: 500;
}

.auth__address .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--sand);
}

.auth__address-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.auth__address a {
  margin-left: auto;
  color: var(--brass);
  font-size: 13px;
}

/* Resend, with its countdown. */
.auth__resend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin: -6px 0 0;
  font-size: 14px;
  color: var(--sand);
}

.auth__resend form {
  margin: 0;
}

.auth__resend-button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brass);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.auth__resend-button:hover {
  color: var(--brass-light);
}

.auth__resend-button:disabled {
  color: var(--stone);
  text-decoration: none;
  cursor: default;
  font-variant-numeric: tabular-nums;
}

.auth__fine {
  margin: -14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--stone);
}

/* Links in the column are brass, as in the console. */
.auth__card a:not([class]),
.auth__footer a {
  color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.auth__card a:not([class]):hover,
.auth__footer a:hover {
  color: var(--brass-light);
}

.auth__footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  width: 100%;
  max-width: 400px;
  margin: 44px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--smoke-soft);
  font-size: 13px;
  color: var(--stone);
}

.auth__footer p {
  margin: 0;
}

/* The website's sign-in card, above "Claim a stay". */
.auth__section {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* The website's "Claim a stay": a second card under sign-in. */
.auth__claim {
  border-top: 1px solid var(--smoke-soft);
  padding-top: 18px;
}

.auth__claim > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--sand);
  cursor: pointer;
  list-style: none;
}

.auth__claim > summary::-webkit-details-marker {
  display: none;
}

.auth__claim > summary strong {
  color: var(--ivory);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 0.25em;
}

.auth__claim > summary .icon {
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--sand);
  transition: transform var(--motion-fast) var(--ease-standard);
}

.auth__claim[open] > summary .icon {
  transform: rotate(180deg);
}

.auth__claim-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 14px;
}

.auth--single .auth__claim {
  border-top: 0;
  padding-top: 0;
}

.auth--single .auth__claim > summary {
  cursor: default;
  pointer-events: none;
}

.auth--single .auth__claim > summary .icon {
  display: none;
}

.auth__contact {
  margin: 0;
  font-size: 14px;
  color: var(--sand);
}

/* The forms the website shares with the reserve flow (includes/site/sign-in-forms.php). */
.auth .sign-in-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth .sign-in-form .btn--site {
  width: 100%;
}

.auth .sign-in-form__email {
  margin: 0;
  color: var(--sand);
  overflow-wrap: anywhere;
}

.auth .sign-in-form__email strong {
  color: var(--ivory);
  font-weight: 500;
}

.auth .sign-in-form__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
}

.auth .sign-in-form__more form {
  margin: 0;
}

.auth .sign-in-form__pair {
  display: grid;
  gap: 18px;
}

/* Wider screens --------------------------------------------------------------- */

@media (min-width: 640px) {
  .auth__visual {
    padding: 32px 40px 64px;
  }

  .auth__line {
    font-size: 42px;
  }

  .auth__main {
    padding: 48px 40px 32px;
  }

  .auth__title {
    font-size: 42px;
  }

  .auth .sign-in-form__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .auth {
    grid-template-columns: minmax(0, 1.2fr) minmax(480px, 1fr);
  }

  .auth__visual {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: 44px 56px 56px;
  }

  .auth__line {
    font-size: clamp(46px, 4.4vw, 68px);
  }

  .auth__perks,
  .auth__caption {
    display: flex;
  }

  .auth__perks {
    flex-direction: column;
  }

  .auth__main {
    justify-content: center;
    margin-top: 0;
    padding: 64px clamp(40px, 6vw, 104px) 36px;
    border-radius: 0;
  }

  .auth__title {
    font-size: 46px;
  }

  .auth__footer {
    margin-top: auto;
  }

  .auth__card {
    margin-top: auto;
    margin-bottom: 0;
  }

  .auth__card + .auth__footer {
    margin-top: auto;
  }
}

/* The step's entrance: the one motion on these pages, and only when asked for. */
@media (prefers-reduced-motion: no-preference) {
  .auth__card {
    animation: auth-arrive 420ms var(--ease-standard) both;
  }

  @keyframes auth-arrive {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}