/* Login screen: shown instead of the whole app when the trainer is served
   over http(s) and no session cookie is present yet (see app.js's
   checkSession/showLogin). Never shown when opened straight off disk — the
   plan's "работа с диска обязана сохраниться" constraint. */
.login-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Предел ширины в rem, а не в пикселях: колонка должна расти вместе с
   текстом, иначе на крупной ступени вступительный абзац рвётся на строки по
   пятнадцать символов. То же правило у остальных капов колонок в exam.css,
   memory.css и dojo.css. */
.login-box {
  width: 100%;
  max-width: 22.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px 26px;
}

.login-title { margin: 0 0 14px; font-size: 1.25rem; }

/* Переключатель «Вход / Регистрация»: две половины одной рамки, чтобы это
   читалось как один орган управления с двумя положениями, а не как две
   независимые кнопки, одна из которых что-то отправляет. */
.login-modes {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 16px;
}

.login-mode {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 0.75rem;
  /* Минимум цели нажатия — как у .btn, и тоже в rem: при крупной ступени
     масштаба кнопка обязана расти вместе с надписью, а не обрезать её. */
  min-height: 2rem;
  padding: 5px 10px;
  cursor: pointer;
}

.login-mode + .login-mode { border-left: 1px solid var(--line); }
.login-mode:hover { background: rgba(128, 140, 160, 0.15); }

/* Выбранное положение отмечено и цветом, и весом: одного цвета мало тому,
   кто их не различает. */
.login-mode-on {
  background: rgba(128, 140, 160, 0.22);
  color: var(--fg);
  font-weight: 600;
}

.login-intro { color: var(--muted); margin: 0 0 20px; font-size: 0.8125rem; line-height: 1.5; }

/* Правила для ника и пароля — только на форме регистрации. В режиме входа
   строка пуста, и :empty убирает её целиком: пустая строка с полями отступа
   оставляла бы под паролем необъяснимый провал. */
.login-hint {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
  margin: -6px 0 12px;
}

.login-hint:empty { display: none; }

.login-label {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 14px;
}

.login-input {
  display: block;
  width: 100%;
  margin-top: 5px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  font-size: 0.875rem;
  padding: 8px 10px;
}

/* Reserves a line even when empty so the submit button does not jump down
   the moment an error appears. */
.login-error {
  min-height: 1.125rem;
  color: var(--red);
  font-size: 0.75rem;
  margin: -4px 0 12px;
  line-height: 1.4;
}

.login-submit { width: 100%; }