/* Экраны аутентификации (layout "auth"): вход, регистрация, пароль,
 * принятие приглашения сотрудника. CRM v2 (docs/design-crm-v2.md,
 * разделы 5 и 9): знак и название над белой карточкой с радиусом 10, без
 * тени. Поля и кнопки — компоненты ui.css (.field, .field__input, .btn);
 * здесь только раскладка экрана, карточки и формы. Только токены. */

.auth-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: var(--bg-page);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

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

/* Знак и название над карточкой — как в навигации CRM */
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.auth-brand-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--surface);
  font-size: var(--font-size-chip);
  font-weight: 700;
  letter-spacing: .02em;
}

.auth-brand-name {
  font-size: var(--font-size-h2);
  line-height: 22px;
  font-weight: 600;
  color: var(--text);
}

/* Flash-плашки: полная триада текст + фон + граница, не только цвет */
.auth-flash {
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid;
  border-radius: var(--radius-panel);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.auth-flash--alert {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.auth-flash--notice {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--success-border);
}

/* Карточка: белая, рамка панели, радиус 10, без тени */
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-panel);
  padding: 32px;
}

.auth-title {
  margin: 0 0 20px;
  font-size: var(--font-size-h1);
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Вводный текст под заголовком — 13/18 вторичным */
.auth-intro {
  margin: -8px 0 20px;
  font-size: var(--font-size-secondary);
  line-height: 18px;
  color: var(--text-secondary);
}

/* Текст карточки без формы (приглашение, недействительная ссылка) */
.auth-text {
  margin: 0 0 16px;
}

/* Форма — столбец полей с шагом 16; кнопка отправки во всю ширину */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Подзаголовок группы полей (регистрация): обычным регистром */
.auth-section {
  margin: 8px 0 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--font-size-h2);
  line-height: 22px;
  font-weight: 600;
}

.auth-section:first-of-type {
  margin-top: 0;
}

/* Специфичность .auth-card .x — компоненты ui.css (.btn, .field__input)
 * подключаются позже этого файла и иначе перекрыли бы раскладку */
.auth-card .auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

/* Только для чтения (логин из приглашения) — подложкой, вторичным */
.auth-card .field__input[readonly] {
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

/* Поле с суффиксом-адресом (поддомен): поле и суффикс — одна рамка */
.auth-input-group {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.auth-card .auth-input-group .field__input {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.auth-input-suffix {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border-control);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-secondary);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Ссылки под формой */
.auth-links {
  margin-top: 16px;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  text-align: center;
}

.auth-divider {
  height: 1px;
  margin: 20px 0;
  background: var(--border-soft);
}

/* Подпись под карточкой — 12 приглушённым (--text-faint — только декор) */
.auth-footer {
  margin: 20px 0 0;
  font-size: var(--font-size-hint);
  line-height: 16px;
  color: var(--text-muted);
  text-align: center;
}

/* Телефон (< 768): карточка во всю ширину с полями 16, сверху — без
 * центрирования по высоте (клавиатура не прячет поля). Кегль полей 16 px:
 * мельче iOS Safari увеличивает страницу при фокусе — порог браузера,
 * а не размер из шкалы, поэтому числом */
@media (max-width: 767px) {
  .auth-body {
    align-items: flex-start;
    padding: 24px 16px 32px;
  }

  .auth-shell {
    width: 100%;
  }

  .auth-card {
    padding: 24px 16px;
  }

  .auth-card .field__input,
  .auth-input-suffix {
    font-size: 16px;
  }
}

/* Касание: поля и кнопки карточки — не ниже 44 */
@media (pointer: coarse) {
  .auth-card .field__input,
  .auth-card .auth-submit {
    min-height: 44px;
  }
}