/* Вход: одна колонка по центру страницы, тема и токены те же, что у пульта. */
.auth--login {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  padding-block: max(var(--space-6), env(safe-area-inset-top)) max(var(--space-6), env(safe-area-inset-bottom));
  padding-inline: var(--space-4);
  background: var(--bg);
  color: var(--text);
}

/* Колонка чуть выше середины: оптический центр, а не геометрический. */
.login {
  width: min(320px, 100%);
  margin-block: auto;
  padding-bottom: 6vh;
}

.login__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 40px;
}

/* Знак в плитке цвета акцента: тот же значок, что в сайдбаре, только весомее. */
.login__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
}

.login__mark .icon {
  width: 20px;
  height: 20px;
}

.login__name {
  display: grid;
  gap: 2px;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

.login__tagline {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

.login__title {
  margin: 0 0 var(--space-6);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

.login__form {
  display: grid;
  gap: var(--space-4);
}

.login__form .input {
  height: 40px;
  border-radius: 10px;
}

.login__submit {
  width: 100%;
  height: 40px;
  margin-top: var(--space-2);
  font-size: var(--text-md);
  touch-action: manipulation;
  transition:
    background var(--motion-fast) var(--ease-standard),
    transform var(--motion-control) var(--ease-standard);
}

.login__submit:active {
  transform: scale(0.98);
}

.login__footer {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

@media (max-width: 540px) {
  .login__form .input {
    /* iOS: не увеличивать экран при фокусе. */
    font-size: 16px;
  }
}