/* Личный вход (/account/login) - страница-разворот по макету от 08.09.2026:
   слева непрозрачная тёмно-синяя панель с формой (~37% ширины), справа
   фотография самолёта на остальные ~63%, между ними прямой стык.

   Палитра здесь фиксированная, а не из токенов темы (style.css): вход -
   единственный экран, который человек видит до того, как у него появится
   аккаунт и, значит, сохранённая тема, поэтому он не должен менять вид
   вместе с ней. Из style.css берутся только шрифты (@font-face +
   --font-body) - «шрифт существующего приложения» из макета. */

body.login-page {
  margin: 0;
  min-height: 100vh;
  background: #193442;      /* фон панели и на узких экранах, где фото скрыто */
  color: #ffffff;
  font-family: var(--font-body);
}

.login-split {
  display: grid;
  grid-template-columns: 37% 63%;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---- левая панель ---- */

.login-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #193442;      /* непрозрачный: без градиента, рамки и скругления */
  padding: 48px 32px;       /* боковые отступы не меньше 32px по макету */
  box-sizing: border-box;
  min-width: 0;
}

.login-form {
  width: 100%;
  max-width: 400px;
}

.login-form h1 {
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.login-sub {
  margin: 0 0 36px;
  font-size: 15px;
  line-height: 1.4;
  color: #9db1c0;           /* приглушённый серо-голубой */
}

.login-field { margin-bottom: 20px; }

.login-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #c6d4dd;
}

.login-field input {
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  padding: 0 14px;
  background: #213e50;
  border: 1px solid #708897;
  border-radius: 6px;
  color: #ffffff;
  font-size: 15px;
  font-family: var(--font-body);
  -webkit-appearance: none;
  appearance: none;
}

.login-field input::placeholder { color: #7d94a3; }

.login-field input:hover { border-color: #8ba1ae; }

.login-field input:focus {
  border-color: #2463eb;
  outline: none;
}

/* Видимый фокус с клавиатуры - на всех интерактивных элементах формы. */
.login-field input:focus-visible,
.login-pw-toggle:focus-visible,
.login-submit:focus-visible {
  outline: 2px solid #8ab4ff;
  outline-offset: 2px;
}

/* Автозаполнение: у Chrome свой жёлтый фон, который на тёмной панели
   выглядит как чужой элемент. Тень внутрь перекрашивает его в цвет поля. */
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px #213e50 inset;
  caret-color: #ffffff;
}

/* ---- пароль: кнопка показать/скрыть ---- */

.login-pw { position: relative; }

.login-pw input { padding-right: 48px; }

.login-pw-toggle {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 46px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0 5px 5px 0;
  color: #9db1c0;
  cursor: pointer;
}

.login-pw-toggle:hover { color: #ffffff; }
.login-pw-toggle svg { width: 20px; height: 20px; display: block; }
.login-pw-toggle .icon-hide { display: none; }
.login-pw-toggle[aria-pressed="true"] .icon-show { display: none; }
.login-pw-toggle[aria-pressed="true"] .icon-hide { display: block; }

/* ---- ошибка ---- */

.login-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 18px;
  padding: 10px 12px;
  background: rgba(226, 72, 61, 0.14);
  border: 1px solid rgba(226, 72, 61, 0.45);
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 1.35;
  color: #ffb3ad;
}

.login-error::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #e2483d;
}

/* ---- кнопка ---- */

.login-submit {
  width: 100%;
  height: 52px;
  margin-top: 10px;
  background: #2463eb;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background .15s ease;
}

.login-submit:hover { background: #1d55d0; }
.login-submit[aria-busy="true"] { background: #1d55d0; cursor: progress; }
.login-submit:disabled { opacity: .75; }

/* ---- правая половина: фотография ---- */

.login-art {
  position: relative;
  overflow: hidden;
  background: #193442;      /* видно, только если файл фотографии отсутствует */
  min-width: 0;
}

/* Без затемнения, размытия и вуали: только сама фотография.

   Кадрирование посчитано по самому снимку (1672x941, ~1.78). Правая
   половина разворота заметно уже этих пропорций, поэтому cover почти всегда
   масштабирует по высоте: вся высота кадра видна (небо, шасси, перрон),
   режется только ширина. По ширине борт занимает от 24% (законцовка носа)
   до 81% (правый край стабилизатора), то есть 57% кадра, а в правую половину
   на экране 16:10 попадает 56.7% - нос и хвост вписываются ровно, без
   запаса. object-position: 54% - это и есть подобранный максимум: слева
   остаётся 23.4%, справа 80.1%, то есть нос виден целиком, а от тонкого
   кончика стабилизатора срезается ~15px, чего на глаз не видно. Смещать
   дальше вправо нельзя - начнёт срезаться нос. */
.login-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 50%;
}

/* Сверхширокий экран (панорамный монитор, аспект шире ~2.8): здесь правая
   половина шире самого снимка, cover масштабирует уже по ширине и режет по
   высоте - отдаём небо, держим шасси и перрон. */
@media (min-aspect-ratio: 14/5) {
  .login-art img { object-position: 50% 62%; }
}

/* ---- узкие экраны: фото убирается, панель на всю ширину ---- */

@media (max-width: 900px) {
  .login-split { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login-pane { padding: 40px 32px; }
  .login-form h1 { font-size: 30px; }
}

/* Низкие экраны (телефон в ландшафте, окно в половину высоты): не сжимать
   форму, а разрешить прокрутку. */
@media (max-height: 620px) {
  .login-split { min-height: 0; }
  .login-pane { align-items: flex-start; padding-top: 32px; padding-bottom: 32px; }
}