/* ============================
   Страница входа /login — узкие переопределения поверх registration.css.
   body имеет оба класса: .registration-page (общий фон-градиент)
   + .login-page (этот scope).
   Всё остальное (шапка, градиент, типографика, визуал справа,
   адаптивные брейкпоинты mobile/tablet/desktop) наследуется как есть.
   ============================ */

/* Форма входа — одна вертикальная колонка из трёх строк: email, password,
   кнопка. На регистрации форма была 594.341 (email+button side-by-side
   + consent); тут уже не нужно столько ширины. */
.login-page .registration-form__form {
  width: 100%;
  max-width: 387px;
  /* gap 20 между строками вместо 30 — три элемента подряд не нужно так
     разносить, как row + consent на регистрации. */
  gap: 20px;
}

/* В каждой строке login только один элемент: он тянется на всю ширину
   формы. Перебиваем фиксированную 387px (registration desktop, рассчитанную
   на email+button side-by-side) и flex-shrink: 0. */
.login-page .registration-form__input {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
}

/* Кнопка тоже full-width формы (на регистрации десктоп — 186.355 в паре
   с email; тут пара не нужна, кнопка занимает строку целиком). */
.login-page .registration-form__submit {
  width: 100%;
  max-width: 100%;
}

/* «Забыли пароль? Восстановить» — небольшая ссылка внутри формы под полем
   пароля, выровненная по правому краю (стандартный UX login-форм).
   Приглушённый цвет, чтобы не конкурировать с кнопкой и основным
   prompt-ом «Нет аккаунта? Зарегистрироваться» внизу. */
.login-page__forgot {
  margin: 0;
  align-self: flex-end;
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: rgba(0, 0, 0, 0.5);
}

/* Ссылка наследует color: inherit, поэтому красится в тот же приглушённый
   тон. Жирность и подчёркивание остаются от базового .registration-form__login-link. */

/* ============================
   Страницы, где на мобилке картинка уезжает в самый низ:
   /password-reset и /registration/password.
   На обеих формах пользователь УЖЕ видел composition отчёта на
   /registration (или /login) — нет смысла снова скроллить мимо неё к форме.
   Desktop/tablet раскладка остаётся такой же, как на /registration и /login
   (форма слева, картинка справа): там всё видно одновременно, скролла нет.
   ============================ */

/* На мобилке (<768) inner — flex column. Стандартные order из
   registration.css: intro 1, visual 2, form 3, login 4. Перебиваем
   только visual на 5 — он уходит в самый конец, после login. */
@media (max-width: 767px) {
  .password-reset-page .registration-visual,
  .password-create-page .registration-visual {
    order: 5;
  }
}