/* Экран входа. Владелец: таск 37. Разметку рисует ui/login.js.

   Своих цветов здесь нет ни одного: всё из styles.css. Два места, где оттенок
   всё-таки считается, — плитка знака и подпись на зелёном поле; оба сделаны
   разведением уже объявленного цвета (color-mix, opacity), а не новым токеном.

   Слой перекрывает страницу целиком (position: fixed): узел `#login-root` лежит
   вне `.app`, и на адресе `#/vhod` приложение прячет оболочку — но экран обязан
   закрыть её и тогда, когда сессия кончилась посреди работы.

   ЯКОРЬ 900 здесь свой, и это не оболочка: два столбца макета перестают помещаться
   раньше, чем сайдбар превращается в таб-бар. Совпадение с якорем оболочки случайно
   и ничего не значит — сайдбара на этом экране нет вовсе. */

.login {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--bg);
  overflow-y: auto;
}

/* ------------------------------ левая половина ------------------------------ */

.login-aside {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  padding: 40px;
  background: var(--sage-deep);
  /* Тот же приём, что у .button.primary: на зелёной заливке в светлой теме
     читается surface, в тёмной — ink. Пятнадцатого цвета для этого не нужно. */
  color: var(--surface);
}

@media (prefers-color-scheme: dark) {
  .login-aside { color: var(--ink); }
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 20px/1.2 var(--font-display);
}

.login-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  /* Разведённая заливка, а не новый оттенок: плитка обязана быть видна и в светлой,
     и в тёмной теме, а цвет у неё один — тот же, которым набран текст рядом. */
  background: color-mix(in srgb, currentColor 16%, transparent);
}

.login-pitch {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin-top: auto;
  max-width: 22ch;
}

.login-pitch-title { color: inherit; }

/* Второй голос на зелёном поле. --ink-2 здесь не годится: он тёмно-зелёный
   и на --sage-deep пропадает. Приглушение прозрачностью того же цвета
   держит контраст выше 4,5:1 в обеих темах. */
.login-pitch-lead {
  margin: 0;
  color: inherit;
  opacity: .86;
}

.login-aside-foot {
  margin-top: auto;
  color: inherit;
  opacity: .72;
}

/* ------------------------------ правая половина ----------------------------- */

.login-main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  padding: 40px;
  max-width: 520px;
  width: 100%;
}

.login-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-title { margin: 0; }

.login-lead { max-width: 46ch; }

/* --------------------------------- форма ---------------------------------- */

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.login-input-wrap {
  position: relative;
  display: flex;
}

.login-input { padding-right: 44px; }

/* Глаз лежит внутри поля и потому рисуется здесь, а не берётся из .button:
   кнопка с рамкой внутри рамки поля читается как второе поле. */
.login-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.login-eye:hover { color: var(--ink); }

.login-eye.is-shown { color: var(--ink); }

.login-plate {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

.login-plate-icon {
  flex: none;
  margin-top: 1px;
  color: var(--ink-2);
}

.login-plate-text { min-width: 0; }

.login-actions {
  display: flex;
  gap: var(--gap);
}

.login-submit { flex: 1; }

/* Место под строку ожидания занято всегда: иначе «Проверяю пароль…» подпрыгивало бы
   вместе со всей формой ровно в тот момент, когда человек смотрит на кнопку. */
.login-status {
  margin: 0;
  min-height: 1.4em;
  font-size: 13px;
  color: var(--ink-2);
}

.login-address {
  margin: 0;
  color: var(--ink-2);
}

.login-foot {
  margin-top: auto;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   ЯКОРЬ 900 — два столбца становятся одним.

   Зелёное поле на телефоне не заливается (макет `26-iphone-vhod`): знак, заголовок
   и обещание стоят на общем фоне, а форма прижата к низу — под большой палец.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Знак и обещание сверху, форма — внизу, под большой палец (макет `26-iphone-vhod`).
     Второй ряд забирает остаток высоты, поэтому форму прижимает к низу он, а не отступ. */
  .login {
    grid-template-columns: minmax(0, 1fr);
    /* `1fr`, а не `minmax(0, 1fr)`: нижняя строка обязана вырасти под своё содержимое.
       С нулевым минимумом форма, не влезшая в экран (клавиатура, альбомная ориентация),
       уходила бы вверх за край — и прокрутка слоя её не доставала бы. */
    grid-template-rows: auto 1fr;
  }

  .login-aside {
    gap: var(--gap);
    padding: max(var(--pad), env(safe-area-inset-top)) var(--pad) 0;
    background: transparent;
    color: var(--ink);
  }

  .login-mark {
    background: var(--sage);
    color: var(--bg);
  }

  .login-pitch {
    margin-top: var(--gap);
    max-width: none;
  }

  .login-pitch-lead {
    color: var(--ink-2);
    opacity: 1;
  }

  .login-aside-foot { display: none; }

  .login-main {
    max-width: none;
    justify-content: flex-end;
    padding: var(--gap-lg) var(--pad) calc(var(--gap-lg) + env(safe-area-inset-bottom));
  }

  .login-foot { margin-top: var(--gap-lg); }

  .login-form {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .login-actions { flex-direction: column-reverse; }
}

@media (max-width: 600px) {
  /* Мишень глаза — 44 px, как у всего остального (История 159); поле уступает ему место. */
  .login-eye {
    width: var(--tap);
    height: var(--tap);
  }

  .login-input { padding-right: calc(var(--tap) + 8px); }
}