/*
 * Экраны авторизации: Auth 01 «Вход», Auth 02 «Регистрация»,
 * Auth 03 «Восстановление» и Auth 04 «Письмо отправлено».
 *
 * Все четыре собраны по одному образцу прототипа: слева фотография с надписью,
 * справа колонка с формой. Файл общий на четыре страницы — разметка у них
 * одинаковая, отличается только содержимое колонки.
 *
 * Значения — только из tokens.css. Где в прототипе стояло значение вне шкалы
 * (34px у надписи, 32px у заголовка, 13px у подписей, ширина колонки 440px),
 * взята ближайшая ступень токенов или доля контейнера.
 */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-medium);
  line-height: var(--line-height-body-medium);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-text-secondary); }

/* Скрытые блоки сообщений — display у них задан, поэтому [hidden] нужно усилить */
[hidden] { display: none !important; }

/* --- Общая раскладка экрана ---------------------------------------------------
   Колонка формы в прототипе 440px. Здесь это доля ширины окна: на типовом
   десктопе 1280px получается те же ~440px, а на широком мониторе колонка
   не остаётся ниткой у края. */

.auth { display: flex; width: 100%; min-height: 100vh; }

.auth-photo { position: relative; flex-grow: 1; }

.auth-photo .photo-slot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-24);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-small);
  text-align: center;
}

/* Затемнение снизу собрано из тёмной поверхности токенов,
   степени прозрачности — как в прототипе */
.auth-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--color-surface-inverse) 75%, transparent) 0%,
    color-mix(in srgb, var(--color-surface-inverse) 15%, transparent) 60%
  );
}

.auth-slogan {
  position: absolute;
  left: var(--space-48);
  bottom: var(--space-48);
  z-index: 1;
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-text-on-inverse);
}

.auth-panel {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-32);
  padding: var(--space-64);
  background: var(--color-background);
}

.auth-logo {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-h2);
}

.auth-title {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
}

.auth-lead {
  margin: 0;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
}

.auth-back {
  align-self: center;
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}

/* --- Форма ---------------------------------------------------------------------- */

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

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

.field-label {
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.input {
  width: 100%;
  padding: var(--input-padding);
  border: var(--border-width-default) solid var(--color-input-border);
  border-radius: var(--radius-md);
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--input-font-size);
  outline: none;
}
.input:focus { border-color: var(--color-input-border-focus); box-shadow: var(--input-focus-ring); }

.input:disabled {
  border-color: var(--color-input-border-disabled);
  background: var(--color-input-background-disabled);
  color: var(--color-input-text-disabled);
}

/* Поле, на которое указал сервер или проверка формы */
.input-error,
.input-error:focus { border-color: var(--color-input-border-error); }

.field-error {
  margin: 0;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption);
  color: var(--color-input-text-error);
}

/* Пароль с переключателем показа */
.password-box { position: relative; display: flex; }
.password-box .input { padding-right: var(--space-96); }

.password-toggle {
  position: absolute;
  right: var(--space-16);
  top: 0;
  bottom: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.password-toggle:hover { color: var(--color-text-primary); }

/* Надёжность пароля: четыре деления и подпись под ними */
.strength { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.strength-bars { display: flex; gap: var(--space-4); }

.strength-bars i {
  flex: 1;
  height: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-border);
}
.strength-bars i.filled { background: var(--color-text-primary); }

.strength-note {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption);
  color: var(--color-text-secondary);
}

/* Согласие с политикой */
.agree { display: flex; align-items: flex-start; gap: var(--space-8); }

.agree input {
  margin: 0;
  accent-color: var(--color-text-primary);
  width: var(--space-16);
  height: var(--space-16);
  flex-shrink: 0;
}

.agree label { font-size: var(--font-size-body-small); color: var(--color-text-secondary); }

/* Пункт, за которым ещё нет страницы, — текстом, а не ссылкой в никуда */
.pending { text-decoration: underline; text-underline-offset: var(--space-4); }

.forgot-link {
  align-self: flex-end;
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}

/* Разделитель перед входом через Яндекс: «или» с чертой по обе стороны.
   Кнопки этой в прототипе нет — функция появилась позже плана. Поэтому
   разделитель собран из того, что на экране уже есть: подпись цветом
   вторичного текста и линия толщиной hairline цветом границы. */
.auth-or {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
}

.auth-or::before,
.auth-or::after {
  content: '';
  flex: 1;
  height: var(--border-width-hairline);
  background: var(--color-border);
}

/* --- Кнопка «Войти с Яндекс ID» --------------------------------------------
 * Единственное место в проекте, оформленное не по нашим токенам, и это
 * осознанно: у Яндекса есть требования к своей кнопке, и они старше наших
 * правил. Менять нельзя цвет, толщину обводки и содержимое — текст, логотип
 * и отступы между ними.
 *
 * Поэтому кнопка не собирается вёрсткой, а лежит целиком одним файлом
 * официальной графики (web/img/yandex-login.svg). Так её и не получится
 * случайно поправить: перекрасить или сдвинуть надпись в SVG нечем.
 * Взято из требований Яндекса: дополнительная версия, полный текст,
 * скругление 28, высота 56 — размер L.
 *
 * Наше здесь только одно — место, которое кнопка занимает: она стоит
 * по центру колонки, а зазор до соседей задаёт gap формы из токенов.
 * Ширина у кнопки своя, 260px, и растягивать её на всю колонку нельзя —
 * это изменило бы пропорции. На узком экране она не ужимается, а
 * уменьшается целиком, сохраняя пропорции: за это отвечает пара
 * max-width + height: auto.
 *
 * Ни ховера, ни смены цвета в нажатом состоянии здесь намеренно нет —
 * это и была бы та самая смена цвета кнопки. Видимый отклик остаётся
 * один, и он снаружи: кольцо фокуса нашими токенами.
 */

.yandex-login {
  align-self: center;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill); /* только форма кольца фокуса */
  background: none;
  max-width: 100%;
  cursor: pointer;
}

.yandex-login img {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
}

.yandex-login:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }
.yandex-login:disabled { cursor: default; }

/* Строка состояния под кнопкой Яндекса: «Переходим в Яндекс…».
   Живёт отдельно, потому что надпись на самой кнопке менять нельзя. */
.auth-hint {
  margin: 0;
  text-align: center;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
}

.auth-switch { font-size: var(--font-size-body-small); color: var(--color-text-secondary); text-align: center; }
.auth-switch a { font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: var(--space-4); }

/* --- Кнопки ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-pill);
  padding: var(--button-padding-large);
  font-family: var(--font-family-base);
  font-size: var(--button-font-size-medium);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-button);
  letter-spacing: var(--letter-spacing-button);
  cursor: pointer;
}

.btn-primary {
  background: var(--color-button-primary-background);
  color: var(--color-button-primary-text);
}
.btn-primary:hover { background: var(--color-button-primary-background-hover); }

.btn-secondary {
  background: transparent;
  border-color: var(--color-button-secondary-border);
  color: var(--color-button-secondary-text);
}
.btn-secondary:hover { background: var(--color-button-secondary-background-hover); }

.btn:focus-visible { outline: none; box-shadow: var(--button-focus-ring); }

.btn-primary:disabled {
  background: var(--color-button-primary-background-disabled);
  color: var(--color-button-primary-text-disabled);
  cursor: default;
}

.btn-secondary:disabled {
  border-color: var(--color-button-secondary-border-disabled);
  color: var(--color-button-secondary-text-disabled);
  cursor: default;
}

/* --- Ответ сервера --------------------------------------------------------------
   Правило 7: ошибку человек читает на форме, а не в консоли. */

.form-error {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-16);
  border: var(--border-width-hairline) solid var(--color-danger);
  border-radius: var(--radius-lg);
  background: var(--color-danger-surface);
  color: var(--color-danger);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
}

/* Спокойное сообщение: запрос прошёл, но продолжать нечем. Та же коробка,
   что и у ошибки, только парой «цвет + подложка» информационного статуса
   из токенов — по правилу системы статусный цвет живёт только так. */
.form-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-16);
  border: var(--border-width-hairline) solid var(--color-info);
  border-radius: var(--radius-lg);
  background: var(--color-info-surface);
  color: var(--color-info);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
}

.form-error-code {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption);
}

/* --- Экран «Письмо отправлено» ----------------------------------------------------- */

.sent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-16); }

.sent-icon {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--font-size-h3);
}

.sent-note {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  color: var(--color-text-secondary);
}

.sent .form-error { text-align: left; width: 100%; }

/* --- Планшет: 768–1199px ------------------------------------------------------------ */

@media (max-width: 1199px) {
  .auth-panel { flex-basis: 50%; padding: var(--space-48); }
  .auth-slogan { left: var(--space-32); bottom: var(--space-32); }
}

/* --- Мобильный: до 767px -------------------------------------------------------------
 * Колонки становятся строками: фотография сверху, форма под ней.
 *
 * Раньше фотография на узком экране просто пряталась — вместе с ней пропадал
 * и слоган. Теперь она остаётся полосой в четверть высоты окна: первый экран
 * не съедает, форму вниз не уводит, а показать её всё-таки показывает.
 */

@media (max-width: 767px) {
  .auth { flex-direction: column; }

  .auth-photo { flex: 0 0 25vh; }
  .auth-slogan {
    left: var(--container-padding-mobile);
    bottom: var(--space-24);
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    letter-spacing: var(--letter-spacing-h3);
  }

  .auth-panel {
    flex: 1 1 auto;
    justify-content: flex-start;
    padding: var(--space-32) var(--container-padding-mobile);
    gap: var(--space-24);
  }
}