/*
 * Экраны А1 «Вход» и А2 «Регистрация» (login.html, register.html). Образец — MasterAvtoDesignSystem.dc.html,
 * раздел 7.3 «Готовые формы · клиент», поле пароля — 7.2, алерт — 12.2. Поля, алерт и шапка — в ui.css.
 * Цвета, шрифты, размеры текста и отступы — только переменные из tokens.css.
 * Числа без переменных — ширина карточки и толщины линий.
 */

.auth { display: flex; justify-content: center; padding-top: var(--space-16); padding-bottom: var(--space-24); }

/* Форма — светлый лист на тёмной странице. */
.auth__card {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-8) var(--space-10);
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.auth__kicker { font: 600 var(--text-overline-size)/1 var(--font-mono); letter-spacing: var(--text-overline-tracking); color: var(--color-text-muted); }
.auth__title { font: 700 var(--text-h3-size)/1.15 var(--font-mono); }
.auth__lead { font: 400 var(--text-body-size)/var(--text-body-line) var(--font-sans); color: var(--color-text-secondary); }
.auth__form, .auth__signed { display: flex; flex-direction: column; gap: var(--space-5); }
.auth__switch { font: 400 var(--text-body-s-size)/1.4 var(--font-sans); color: var(--color-text-secondary); text-align: center; }
.auth__switch a, .field__err a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.auth__switch a { color: var(--color-accent-text); }
.auth__alerts { display: flex; flex-direction: column; gap: var(--space-3); }
.auth__alerts:empty { display: none; }
.auth__actions { display: flex; flex-direction: column; gap: var(--space-3); }

/* «Пароль» и «Забыли пароль?» в одной строке (ДС 7.3 «ВХОД»). */
.auth__label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.auth__label-row a { font: 500 var(--text-label-size)/var(--text-label-line) var(--font-sans); color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Вход через Яндекс: в макетах нет, собрано из кнопки «outline» (ДС 6) и текста формы ---------- */

.auth__alt { display: flex; flex-direction: column; gap: var(--space-3); }
.auth__alt[hidden] { display: none; }
.auth__or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: 600 var(--text-overline-size)/1 var(--font-mono);
  letter-spacing: var(--text-overline-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.auth__fine { font: 400 var(--text-caption-size)/var(--text-caption-line) var(--font-sans); color: var(--color-text-muted); }
.auth__fine a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Пояснение без ошибки (А3): как плашка «info» записи — полоса слева. */
.auth__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg);
  border-left: 4px solid var(--color-text-primary);
  font: 400 var(--text-body-size)/var(--text-body-line) var(--font-sans);
}
.auth__note a { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Пароль: поле и кнопка «Показать» (ДС 7.2) ---------- */

.pw {
  display: flex;
  height: var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2);
}
.pw:hover { border-color: var(--color-text-primary); }
.pw:has(.pw__input:focus-visible) { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.pw:has(.pw__input[aria-invalid="true"]) { border: 2px solid var(--color-error); }
.pw__input, .pw .pw__input[aria-invalid="true"] { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; }
.pw__input:focus-visible { outline: none; }
.pw__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  min-width: var(--space-12);
  padding: 0 var(--space-3);
  border: 0;
  border-left: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-primary);
  font: 600 var(--text-overline-size)/1 var(--font-mono);
  cursor: pointer;
}
.pw__toggle:hover { background: var(--color-bg); }

/* ---------- Надёжность пароля (ДС 7.3, регистрация) ---------- */

.strength { display: flex; gap: var(--space-1); }
.strength__bar { flex: 1; height: 4px; background: var(--color-border); }
.strength__bar--on { background: var(--color-success); }
.strength--weak .strength__bar--on { background: var(--color-error); }

@media (max-width: 767px) {
  .wrap { padding: 0 var(--space-4); }
  .auth { padding-top: var(--space-6); padding-bottom: var(--space-16); }
  .auth__card { padding: var(--space-6) var(--space-4) var(--space-8); }
}