/* ============================================================================
   Страница входа. Слева — фирменная иллюстрация целиком, справа — карточка
   формы.
   ========================================================================= */

body.login {
  min-height: 100vh;
  background: var(--surface);
}

/* Колонка формы фиксированной ширины, иллюстрация забирает весь остаток:
   на широком мониторе картинка становится шире, а форма не растягивается
   вслед за ней (читаемая строка ввода не зависит от размера окна). */
.login__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(400px, 38vw, 560px);
  min-height: 100vh;
}

/* ── Левая половина ──────────────────────────────────────────────────────── */

/* Иллюстрация заполняет колонку ЦЕЛИКОМ по высоте и ширине (cover).
   Композиция кадра — персонаж по центру, поэтому обрезаются только пустые
   боковые поля; object-position чуть выше центра, чтобы на низком окне
   не срезало лицо. */
.login__art {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 45%, #16203c 0%, #0c1226 55%, #070b17 100%);
  border-right: 1px solid #0b1226;
}

.login__art-pic,
.login__art-pic img {
  display: block;
  width: 100%;
  height: 100%;
}

.login__art-pic img {
  object-fit: cover;
  object-position: 50% 42%;
}

/* Мягкое затухание к краям колонки — стык картинки с фоном не читается
   как «наклеенный прямоугольник», а у границы с формой картинка уходит
   в тот же тёмный тон. */
.login__art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(7, 11, 23, .45) 0%, rgba(7, 11, 23, 0) 18%,
      rgba(7, 11, 23, 0) 82%, rgba(7, 11, 23, .45) 100%),
    linear-gradient(to right,
      rgba(7, 11, 23, .35) 0%, rgba(7, 11, 23, 0) 12%,
      rgba(7, 11, 23, 0) 88%, rgba(7, 11, 23, .35) 100%);
}

/* ── Правая половина ─────────────────────────────────────────────────────── */

.login__form {
  display: grid;
  place-items: center;
  padding: 40px 24px;
}

.login__card { width: 100%; max-width: 380px; }

.login__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 26px;
}
.login__brand-name { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }

.login__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.03em;
  text-align: center;
}
.login__sub {
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
  margin: 8px 0 26px;
}

.login__card .field__label { display: none; }   /* поля самодостаточны с иконками и placeholder */
.login__card .input { height: var(--control-h-lg); }
.login__card .input-group__btn { right: 8px; }

/* Подсказка про Caps Lock. Скрыта, пока клавиша не нажата: пустое место
   под полем не резервируем — форма не должна прыгать. */
.login__caps {
  display: none;
  align-items: center;
  gap: 6px;
  margin: -10px 0 14px;
  font-size: 12.5px;
  color: #b45309;
}
.login__caps.is-on { display: flex; }

.login__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ── Адаптивность ────────────────────────────────────────────────────────── */

/* На узком экране иллюстрация переезжает наверх баннером. Высота задана
   строкой грида: без неё height:100% у картинки не от чего считать. */
@media (max-width: 900px) {
  .login__grid { grid-template-columns: 1fr; grid-template-rows: 30vh 1fr; }
  .login__art { border-right: 0; border-bottom: 1px solid #0b1226; }
  .login__art-pic img { object-position: 50% 38%; }
  .login__form { padding: 32px 20px; }
}

/* Низкий экран (ноутбук 1366×768 в браузере с панелями) — баннер съедает
   слишком много, оставляем форме больше места. */
@media (max-width: 900px) and (max-height: 700px) {
  .login__grid { grid-template-rows: 22vh 1fr; }
}