/* Форма входа, регистрации и подтверждения — одинаковая
   для клиента и для сотрудников бизнеса. */

.auth__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.auth__lead {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-dim);
}

/* Форма одна на все экраны входа: и клиент, и компания, и вход
   собираются из одних и тех же кирпичей. Подписи живут внутри полей
   (.field--stack), поэтому внешних строк подписи здесь нет вовсе —
   с ними самая длинная форма проекта не помещалась в экран.

   Поля появляются лесенкой сверху вниз: взгляд ведут по порядку
   заполнения, а не показывают всё разом. */
.auth__form {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.auth__form > * { animation: form-rise var(--base) var(--ease) both; }

.auth__form > *:nth-child(1)  { animation-delay: 40ms; }
.auth__form > *:nth-child(2)  { animation-delay: 70ms; }
.auth__form > *:nth-child(3)  { animation-delay: 100ms; }
.auth__form > *:nth-child(4)  { animation-delay: 130ms; }
.auth__form > *:nth-child(5)  { animation-delay: 160ms; }
.auth__form > *:nth-child(6)  { animation-delay: 190ms; }
.auth__form > *:nth-child(7)  { animation-delay: 220ms; }
.auth__form > *:nth-child(8)  { animation-delay: 250ms; }
.auth__form > *:nth-child(n+9) { animation-delay: 280ms; }

/* Пустая подсказка не держит высоту: пять пустых строк по восемнадцать
   пикселей — это сто пикселей пустоты. Появится ошибка — строка
   вырастет и подвинет форму, но это редкий случай против постоянной
   потери. */
.auth__form .hint {
  margin-top: var(--sp-1);
  animation: hint-in var(--fast) var(--ease);
}

.auth__form .hint:empty {
  min-height: 0;
  margin-top: 0;
}

@keyframes form-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes hint-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

.auth .btn--primary { margin-top: var(--sp-3); }

/* Согласия стоят между полями и кнопкой — там, где их читают перед
   нажатием, а не после. Отделены от полей воздухом: это не поле ввода,
   а решение, и оно не должно выглядеть продолжением формы. */
.auth__consents {
  margin-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.auth__note {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-faint);
}

/* Переход на соседний экран — кнопкой, а не подчёркнутым текстом. */
.auth__switch {
  margin-top: var(--sp-6);
  display: flex;
  justify-content: center;
}