/*
 * Auth screens — mobile full-screen form; desktop split (teal brand panel +
 * form card). See docs/views.md. Google button lands in slice 4.
 */
.auth {
  display: flex;
  min-height: 100dvh;
}

/* Brand panel is desktop-only; mobile is a full-screen form */
.auth__brand {
  display: none;
}

.auth__panel {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.auth__card {
  width: 100%;
  max-width: 400px;
}

.auth__title {
  font-size: var(--text-display);
  margin-bottom: var(--space-2);
}

.auth__lead {
  margin-bottom: var(--space-6);
  color: var(--color-muted);
}

.auth__forgot {
  margin-top: var(--space-4);
  font-size: var(--text-small);
}

.auth__alt {
  margin-top: var(--space-5);
  font-size: var(--text-small);
  color: var(--color-muted);
  text-align: center;
}

@media (min-width: 900px) {
  .auth__brand {
    display: flex;
    flex: 1;
    align-items: flex-end;
    padding: var(--space-9);
    background: var(--gradient-agent);
    color: #fff;
  }

  .auth__brand-inner {
    max-width: 32ch;
  }

  .auth__eyebrow {
    color: rgba(255, 255, 255, .78);
  }

  .auth__pitch {
    margin: var(--space-3) 0;
    font-size: var(--text-display);
    color: #fff;
  }

  .auth__pitch-sub {
    color: rgba(255, 255, 255, .85);
    line-height: var(--leading-body);
  }

  .auth__panel {
    flex: 1;
  }
}