/* login.css — страница входа. Один экран, одна задача: уйти в сервис входа.
   Подключается только этой страницей.

   Правило именования: .page--login .login__<элемент>. */

.page--login{
    display:flex;align-items:center;justify-content:center;
    min-height:60vh;padding:var(--s5);
}

.login__card{
    display:flex;flex-direction:column;gap:var(--s4);
    width:100%;max-width:26rem;
    padding:var(--s6) var(--s5);
    background:var(--d-sheet);border:1px solid var(--w-hair);border-radius:var(--r-panel);
}

.login__eyebrow{
    margin:0;font-family:var(--f-mono);font-size:var(--t-12);
    letter-spacing:.08em;color:var(--w-ink-muted);
}
.login__title{margin:0;font-size:var(--t-20);font-weight:600;color:var(--w-ink)}
.login__lead{margin:0;font-size:var(--t-14);line-height:1.6;color:var(--w-ink-soft)}
.login__alert{margin:0}

.login__methods{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s2)}

.login__note{margin:0;font-size:var(--t-12);line-height:1.6;color:var(--w-ink-muted)}

@media (min-width:768px){
    .login__card{padding:var(--s7) var(--s6);gap:var(--s5)}
    .login__title{font-size:var(--t-26)}
}

/* Форма входа по паролю. Поля тянутся на всю ширину карточки: это единственная
   колонка страницы, и половинная ширина смотрелась бы случайной. */
.login__form{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s2)}

/* Разделитель между паролем и внешними поставщиками. Линии идут по бокам от
   слова, иначе одна линия читалась бы как подчёркивание предыдущего блока. */
.login__or{
    display:flex;align-items:center;gap:var(--s3);
    margin:var(--s2) 0;font-size:var(--t-12);color:var(--w-ink-muted);
}
.login__or::before,.login__or::after{content:"";flex:1;height:1px;background:var(--w-hair)}