/*
 * Экран входа: карточка посреди пустого окна.
 *
 * Своих цветов и шрифтов не заводит, берёт токены админки: это её
 * дверь, и выглядеть она должна её частью.
 */
body.sign-in {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  margin: 0;
  padding: 20px;
  background: var(--native-sidebar);
  color: var(--native-label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: var(--native-text);
  -webkit-font-smoothing: antialiased;
}

.sign-in__card {
  width: 100%;
  /* Уже, чем формы админки: в форме два поля, и растянутая на всю
     ширину карточка выглядела бы незаполненной. */
  max-width: 320px;
  padding: 24px;
  border: 1px solid var(--native-separator);
  border-radius: 12px;
  background: var(--native-content);
  box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
}

.sign-in__card > header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.sign-in__card > header svg {
  width: 16px;
  height: 16px;
  color: var(--native-secondary-label);
}

/* Подписи над полями, а не слева: колонка подписей в 140 пикселей
   съела бы половину узкой карточки. */
.sign-in__form .form-row {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}

.sign-in__form .form-row span {
  color: var(--native-secondary-label);
  font-size: var(--native-small);
}

.sign-in__form input {
  width: 100%;
  box-sizing: border-box;
  height: var(--native-field-height);
}

.sign-in__form .action-button {
  width: 100%;
  margin-top: 4px;
}

/* Ошибка входа. Стоит над полями: внизу, под кнопкой, её не замечают
   и жмут «Войти» второй раз с тем же паролем. */
.sign-in__error {
  margin: 0 0 14px;
  padding: 8px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--native-red, #ff3b30) 12%, transparent);
  color: var(--native-red, #ff3b30);
  font-size: var(--native-small);
}

/*
 * Сообщение о том, что произошло: сохранено, отказано, вот пароль
 * нового пользователя.
 *
 * Лежит в этом файле, а не в своём: правило короткое и относится к тому
 * же кругу задач — доступ и его отказы. Отдельный файл на пять строк
 * пришлось бы искать глазами в списке импортов.
 */
.flash {
  margin: 0;
  padding: 10px var(--native-gutter, 16px);
  border-bottom: 1px solid var(--native-separator);
  font-size: var(--native-small);
}

.flash--notice {
  background: var(--native-control-fill);
  color: var(--native-label);
}

.flash--alert {
  background: color-mix(in srgb, var(--native-red, #ff3b30) 12%, transparent);
  color: var(--native-red, #ff3b30);
}

/* Заголовок «Вход». Некрупный: карточка и так объясняет, что это за
   экран, а крупный заголовок над двумя полями выглядел бы тяжело. */
.sign-in__title {
  margin: 0 0 16px;
  font-size: var(--native-text);
  font-weight: 600;
}