/* Экран входа. Перенос из прототипа, `sc-if value="{{ needLogin }}"`.
 *
 * Объявления взяты дословно из инлайновых стилей прототипа: класс — это
 * новое имя для той же декларации, а не повод её подправить. Порядок
 * блоков ниже повторяет порядок в разметке прототипа.
 *
 * Чего здесь нет и почему: блока «Демо-доступы» и кнопки перехода на
 * вторую дверь. Оба убраны решением Раунда 1 и критерием приёмки — они
 * показывали список учётных записей и существование второго контура.
 */

/* Внешняя обёртка: карточка по центру страницы. */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f6f8;
  padding: 32px;
}

.login-column {
  width: 100%;
  max-width: 392px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Шапка с логотипом. */
.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 4px;
}

.login-brand__mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #1f4fd8;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 11px 'IBM Plex Mono', monospace;
}

.login-brand__name {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.login-brand__version {
  font: 400 10px 'IBM Plex Mono', monospace;
  color: #8b939d;
}

/* Карточка формы. */
.login-card {
  background: #fff;
  border: 1px solid #e3e7ec;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-card__title {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.login-card__hint {
  font-size: 11.5px;
  color: #8b939d;
  margin-top: 3px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Форма восстановления в прототипе чуть плотнее формы входа. */
.login-form--recover {
  gap: 12px;
}

.login-label {
  font: 500 9.5px 'IBM Plex Sans';
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #a2a9b3;
  margin-bottom: 5px;
}

.login-input {
  width: 100%;
  height: 34px;
  border: 1px solid #dfe4e9;
  border-radius: 7px;
  padding: 0 10px;
  font: 400 12.5px 'IBM Plex Sans';
  outline: none;
  background: #fbfcfd;
  color: #141a21;
}

/* В прототипе это атрибут `style-focus` инструмента дизайна. */
.login-input:focus {
  border-color: #1f4fd8;
  background: #fff;
}

/* Отказ входа: красная полоска внутри карточки, не окно поверх экрана. */
.login-error {
  padding: 8px 10px;
  background: #fbeceb;
  border-radius: 7px;
  font-size: 11.5px;
  color: #a4302a;
}

.login-submit {
  height: 36px;
  border: 0;
  border-radius: 7px;
  background: #1f4fd8;
  color: #fff;
  font: 500 13px 'IBM Plex Sans';
  cursor: pointer;
}

.login-submit:hover {
  background: #1a45bd;
}

/* Пока запрос в пути. В прототипе состояния нет: там вход мгновенный. */
.login-submit[disabled] {
  background: #b9c1cb;
  cursor: default;
}

/* «Забыли пароль?» — ссылка-кнопка. */
.login-link {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: 500 11.5px 'IBM Plex Sans';
  color: #1f4fd8;
  align-self: center;
}

.login-link:hover {
  text-decoration: underline;
}

/* «← Вернуться к входу» — та же кнопка, но приглушённая. */
.login-back {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: 500 11.5px 'IBM Plex Sans';
  color: #5c6673;
  align-self: center;
}

.login-back:hover {
  color: #141a21;
}

/* Сообщение «ссылка отправлена». */
.login-sent {
  padding: 11px 12px;
  background: #e2f2ea;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.6;
  color: #0f6d47;
  text-wrap: pretty;
}

.login-sent b {
  font-family: 'IBM Plex Mono', monospace;
}

.login-outline {
  height: 36px;
  border: 1px solid #dfe4e9;
  border-radius: 7px;
  background: #fff;
  color: #141a21;
  font: 500 12.5px 'IBM Plex Sans';
  cursor: pointer;
}

.login-outline:hover {
  border-color: #b9c1cb;
}