/* =========================================================
   Страница входа. Цвета, отступы и радиусы берутся переменными
   из styles.css — своей палитры здесь нет, иначе кабинет и вход
   разъедутся по оформлению при первой же правке.
   ========================================================= */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--sp-5);
}

.login {
  width: 100%;
  max-width: 380px;
  text-align: left;
}

.login__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-block);
  font-weight: 300;
  line-height: 1.2;
  color: var(--c-text);
}

.login__lead {
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-body);
  line-height: var(--lh);
  color: var(--c-text-soft);
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.login__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.login__label {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-soft);
}

.login__input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-field);
}

.login__input:focus-visible {
  outline: none;
  border: 2px solid var(--c-accent);
}

/* .btn в кабинете живёт в строке кнопок и растягивается по ширине;
   здесь колонка, и flex-basis из общей заготовки задал бы кнопке высоту */
.login__button {
  flex: 0 0 auto;
  min-height: var(--tap);
  font-size: var(--fs-body);
}

.login__message {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh);
  color: var(--c-text);
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-field);
}

/* «писем было слишком много» и «ссылка больше не работает»: то же место,
   другой цвет — человеку надо заметить, что кнопка ничего не изменила */
.login__message--warn {
  color: var(--c-danger);
  background: var(--c-danger-soft);
  border-color: var(--c-danger);
}

/* Опечатка в адресе — промах человека, а не наша поломка. Поэтому строка
   стоит у поля, куда человеку и возвращаться, а не плашкой под формой, где
   живут «слишком часто» и «письмо не уходит» — то, что человек починить
   не может. Ни красного фона, ни рамки: чинится одним движением.
   Решение Ольги 23.08.2026. */
.login__note {
  font-size: var(--fs-sm);
  line-height: var(--lh);
  color: var(--c-text);
}

/* поле подсвечено акцентом, а не тревожным красным: это метка «сюда»,
   а не сообщение о сбое */
.login__input--wrong {
  border-color: var(--c-accent);
}

/* Подсказка под полем — про пароль от восьми знаков. Тише подписи: это
   не требование к человеку, а сведение о том, что примет форма. */
.login__hint {
  font-size: var(--fs-caption);
  line-height: var(--lh);
  color: var(--c-text-soft);
}

/* Ряд кнопок: «Войти» и «Не помню пароль» рядом, а не одна под другой.
   Вторая — кнопка, а не мелкая ссылка внизу: правка Ольги 23.08.2026.
   На узком экране кнопки переносятся, а не сжимаются в нечитаемые. */
.login__ways {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Выданная ссылка стоит текстом и не нажимается намеренно: она одноразовая,
   и нажатие сожгло бы её раньше, чем участница её получит. Поэтому её
   выделяют и копируют. Служебная страница, участница её не видит. */
.login__link {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-sm);
  line-height: var(--lh);
  color: var(--c-text);
  background: var(--c-surface-soft);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-field);
  word-break: break-all;
  user-select: all;
}

/* Ссылка в наряде кнопки. Кнопке высоту держит min-height, а ссылке — нет:
   она строчная, и без display высота на неё не действует вовсе. Здесь это
   «Не помню пароль» и выходы со страницы заведения пароля. */
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
  color: var(--c-text);
  text-decoration: none;
}

a.btn--primary {
  color: #fff;
}

/* =========================================================
   Служебная страница: вкладки и материалы (задание 16).
   Участница этого не видит — здесь работает одна Ольга.
   ========================================================= */

/* Шесть полей текста не помещаются в колонку входа шириной 380 px,
   и по середине экрана их держать нечего: страница длинная, читается
   сверху вниз. */
.login-page--wide {
  align-items: flex-start;
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-8);
}

.login--wide { max-width: 720px; }

/* Вкладки: два дела Ольги на одной странице. Ряд ссылок с подчёркиванием
   у текущей — не кнопки: кнопка обещает действие, а здесь переход. */
.login__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-5);
  border-bottom: 1px solid var(--c-line);
}

.login__tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 0 var(--sp-2);
  border-bottom: 2px solid transparent;
  color: var(--c-text-soft);
  font-size: var(--fs-body);
  text-decoration: none;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}

.login__tab--here {
  color: var(--c-text);
  border-bottom-color: var(--c-accent);
}

/* Поле материала. Высота на глаз: конспект встречи — это экран текста,
   а не строка, и поле в две строки заставляло бы листать внутри поля.
   Растягивается мышью вниз, но не вбок: горизонтальное растягивание
   ломает раскладку страницы. */
.login__area {
  min-height: 180px;
  padding: var(--sp-3) var(--sp-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  line-height: var(--lh);
  resize: vertical;
}

@media (hover: hover) and (pointer: fine) {
  .login__tab:hover { color: var(--c-text); }
}

@media (min-width: 1024px) {
  .login__area { min-height: 220px; }
}