/*
 * Sign-in family: login, 2FA code, forgot / reset password, verify email, invite.
 * Mockups: client-LoginMobile (390 × 844) and client-LoginDesktop.
 * Phone first. From 1280 px the photo hero takes a fixed left column (640, then 800 from 1440);
 * the form column always lands on 448 px, so nothing falls on a fraction.
 */

.auth {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- Hero (desktop only) ---------- */

.auth__hero {
  display: none;
}

.auth__brand {
  font-family: var(--font-display);
  font-size: var(--text-14);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-20);
}

.auth__tagline,
.auth-phone-hero__tagline {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
}

.auth__tagline-accent {
  color: var(--color-accent);
}

.auth__place {
  font-size: var(--text-14);
  line-height: var(--leading-20);
  color: var(--color-text-subtle);
}

/* ---------- Coach photo (decision 166) ----------
 * Three layers: the photo, a dark gradient so the text reads, the text. The photo drifts left to
 * right and back; only transform moves, so the compositor does the work. Zoomed to 112 %, the
 * 3 % travel each way never shows an edge.
 */

.coach-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--color-photo-bg);
}

.coach-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--color-photo-bg) 92%, transparent) 0%, transparent 60%),
    linear-gradient(to bottom, color-mix(in srgb, var(--color-photo-bg) 64%, transparent) 0%, transparent 24%);
}

.coach-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: scale(1.12) translateX(-3%);
  animation: coach-drift 40s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes coach-drift {
  to { transform: scale(1.12) translateX(3%); }
}

@media (prefers-reduced-motion: reduce) {
  .coach-photo__img {
    animation: none;
    transform: scale(1.12);
  }
}

/* ---------- Main column ---------- */

.auth__main {
  max-width: 496px;
  margin: 0 auto;
  padding: var(--space-32) var(--space-24) var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.auth__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lang-switch__button {
  height: 32px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-4);
  border: var(--border-width) solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-11);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
}

/* Phone: the strip above the tagline, as the bars were. At 48 px the tagline takes three lines:
 * laid over a 240 px strip it would cover the face. */
.auth-phone-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-top: var(--space-16);
}

.auth-phone-hero__photo {
  position: relative;
  isolation: isolate;
  height: 240px;
  border-radius: var(--radius-8);
  overflow: hidden;
}

.auth-phone-hero__photo .coach-photo__img {
  object-position: 50% 26%;
}

.auth-phone-hero__tagline {
  font-size: var(--text-48);
  line-height: var(--leading-48);
  letter-spacing: var(--tracking-display);
}

/* ---------- Form ---------- */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.auth-form__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.auth-form__head--desktop {
  display: none;
}

.auth-form__title {
  font-size: var(--text-32);
  line-height: var(--leading-40);
  letter-spacing: var(--tracking-tight);
}

.auth-form__lead {
  font-size: var(--text-15);
  line-height: var(--leading-24);
  color: var(--color-text-muted);
}

.auth-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.auth-form__footnote {
  text-align: center;
  font-size: var(--text-13);
  line-height: var(--leading-20);
  color: var(--color-text-subtle);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.field__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.field__label {
  font-family: var(--font-display);
  font-size: var(--text-11);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-16);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.field__link {
  font-size: var(--text-13);
  font-weight: var(--weight-medium);
  line-height: var(--leading-20);
}

.field__input {
  width: 100%;
  height: 56px;
  padding: 0 var(--space-16);
  border-radius: var(--radius-8);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-16);
}

.field__input::placeholder {
  color: var(--color-text-subtle);
}

.field__input--code {
  font-family: var(--font-display);
  font-size: var(--text-24);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-brand);
}

.checkbox {
  height: 48px;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--text-15);
  cursor: pointer;
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.checkbox__box {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--radius-4);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox__input:checked + .checkbox__box {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.checkbox__input:focus-visible + .checkbox__box {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.button {
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
}

.button--primary {
  height: 64px;
  border-radius: var(--radius-8);
  background: var(--color-accent);
  color: var(--color-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-size: var(--text-17);
  font-weight: var(--weight-extrabold);
}

.button--text {
  padding: 0;
  background: transparent;
  color: var(--color-accent-text);
  font-family: var(--font-body);
  font-size: var(--text-13);
  font-weight: var(--weight-medium);
  line-height: var(--leading-20);
}

.auth-alert {
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-8);
  border: var(--border-width) solid var(--color-border);
  font-size: var(--text-14);
  line-height: var(--leading-20);
}

.auth-alert--error {
  border-color: var(--color-alert);
}

.auth-alert--notice {
  border-color: var(--color-accent);
}

.auth-note {
  display: none;
}

/* ---------- Desktop: 1280 and up ---------- */

@media (min-width: 1280px) {
  .auth {
    display: grid;
    grid-template-columns: 640px 640px;
    justify-content: center;
  }

  .auth__hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding: var(--space-56) var(--space-64);
    color: var(--color-photo-text);
  }

  /* The tagline sits low, over the body, clear of the face. */
  .auth__hero-body {
    margin-top: auto;
  }

  .auth__hero .auth__place {
    color: var(--color-photo-text-muted);
  }

  .auth__hero .auth__brand {
    font-size: var(--text-16);
    letter-spacing: var(--tracking-brand);
  }

  .auth__tagline {
    font-size: var(--text-72);
    line-height: var(--leading-72);
    letter-spacing: var(--tracking-display-xl);
  }

  .auth__main {
    max-width: none;
    margin: 0;
    padding: var(--space-56) var(--space-96);
    justify-content: center;
  }

  .auth__main > .auth-form,
  .auth__main > .auth__top {
    width: 448px;
  }

  .auth__brand--phone,
  .auth-phone-hero,
  .auth-form__footnote--phone {
    display: none;
  }

  .auth__top {
    justify-content: flex-end;
  }

  .auth-form {
    gap: var(--space-32);
  }

  .auth-form__head--desktop {
    display: flex;
  }

  .auth-note {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-16);
    border-radius: var(--radius-8);
    border: var(--border-width) solid var(--color-surface-raised);
    font-size: var(--text-13);
    line-height: var(--leading-20);
    color: var(--color-text-muted);
  }

  .auth-note svg {
    flex-shrink: 0;
  }
}

@media (min-width: 1440px) {
  .auth {
    grid-template-columns: 800px 640px;
  }

  .auth__tagline {
    font-size: var(--text-96);
    line-height: var(--leading-88);
  }
}