/* Экран входа (templates/login.html).

   Анонимная страница: подключается только theme.css и этот файл — ни шапки
   приложения, ни app_layout.css. Цвета берутся переменными --theme-*, иначе
   тёмная тема не доезжает: _theme_head.html ставит data-theme, а литералы его
   игнорируют. Раньше эти правила жили инлайновым <style> в шаблоне и были
   прибиты светлыми литералами — отсюда белая карточка в тёмной теме.

   `!important` в нескольких местах — не прихоть: theme.css красит `label`,
   ссылки и `.login` правилами с `!important`, перебить их можно только таким
   же весом. Файл подключается после theme.css, поэтому при равной
   специфичности побеждает он. */

* {
    box-sizing: border-box;
}

body[data-page="login"] {
    --login-radius: 16px;
    --login-radius-sm: 10px;
    --login-wash: rgba(0, 178, 147, .13);

    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    /* Сверху воздуха больше: переключатель темы висит фиксировано в правом
       верхнем углу и иначе наезжает на карточку на невысоких экранах. */
    padding: 62px 20px 28px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

/* Тёмная тема в проекте синяя, а не зелёная: подложка обязана ехать за
   акцентом, иначе зелёный развод спорит с синими кнопками. */
html[data-theme="dark"] body[data-page="login"] {
    --login-wash: rgba(53, 116, 240, .20);
}

/* Подложка рисуется на ::before, а не на самом body: его фон перекрашивает
   theme.css правилом с `!important`. */
body[data-page="login"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(68% 52% at 50% -10%, var(--login-wash), transparent 68%),
        radial-gradient(52% 46% at 94% 106%, var(--login-wash), transparent 70%);
}

.login {
    /* z-index вместе с подложкой выше: оба в потоке body, карточка — поверх. */
    position: relative;
    z-index: 1;
    width: min(100%, 404px);
    padding: 28px 28px 22px;
    border: 1px solid var(--theme-border);
    border-radius: var(--login-radius);
    background: var(--theme-surface);
    box-shadow: 0 20px 48px var(--theme-shadow);
}

/* --- Заголовок ------------------------------------------------------------ */

.login-brand {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
}

/* Класс `brand-link` исключён из общего правила ссылок в theme.css — знак с
   подписью остаётся цветом текста, а не ссылки. */
.login-brand a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--theme-text);
    text-decoration: none;
}

.login-title {
    margin: 16px 0 20px;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -.02em;
}

/* --- Сообщения ------------------------------------------------------------ */

/* Цвета берёт theme.css: `.error` — своим правилом, нотис — переменными ниже. */
.login-alert {
    margin: 0 0 16px;
    padding: 10px 13px;
    border: 1px solid var(--theme-message-border);
    border-radius: var(--login-radius-sm);
    background: var(--theme-message-bg);
    color: var(--theme-message-text);
    font-size: .875rem;
}

/* --- Форма ---------------------------------------------------------------- */

.login-form {
    display: grid;
    gap: 14px;
}

.login-field {
    display: grid;
    gap: 6px;
}

.login-field-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.login-form label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--theme-muted) !important;
}

.login-form input {
    /* Без min-width поле в гриде растягивает карточку за пределы экрана
       телефона: у грид-элемента минимум — min-content. */
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--theme-border-strong);
    border-radius: var(--login-radius-sm);
    font: inherit;
}

.login-form input:focus-visible {
    border-color: var(--accent);
    outline: 3px solid var(--theme-focus-ring);
    outline-offset: 0;
}

.login-forgot {
    font-size: .8125rem;
}

.login-submit {
    min-height: 46px;
    margin-top: 6px;
    border: 0;
    border-radius: var(--login-radius-sm);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* --- Яндекс ID ------------------------------------------------------------ */

.login-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 14px;
    color: var(--theme-muted);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-or::before,
.login-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--theme-border);
}

.login-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 14px;
    border: 1px solid var(--theme-border-strong);
    border-radius: var(--login-radius-sm);
    background: var(--theme-surface-muted);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
}

/* Подпись кнопки — цветом текста, а не ссылки: зелёная (в тёмной теме синяя)
   строка спорила бы с «Войти» рядом. Селектор такой длинный не от хорошей
   жизни: в theme.css общее правило ссылок несёт четыре `:not()`, и перебить
   его можно только большей специфичностью. */
body[data-page="login"] a.login-oauth.login-oauth.login-oauth,
body[data-page="login"] a.login-oauth.login-oauth.login-oauth:hover {
    color: var(--theme-text) !important;
}

.login-oauth:hover {
    background: var(--theme-hover-bg);
}

/* Знак Яндекса не ужимается и не растёт вместе с подписью. */
.login-oauth-mark {
    flex: 0 0 auto;
}

/* --- Подвал карточки ------------------------------------------------------ */

.login-help {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--theme-border);
    color: var(--theme-muted);
    font-size: .8125rem;
    line-height: 1.55;
}

.login-register {
    margin: 12px 0 0;
    font-size: .875rem;
}

.login-register-hint {
    display: block;
    margin-top: 4px;
    color: var(--theme-muted);
    font-size: .8125rem;
    line-height: 1.5;
}

/* Служебная строка: «О продукте» и адрес поддержки в одну линию через точку. */
.login-meta {
    display: flex;
    flex-wrap: wrap;
    margin: 18px 0 0;
    color: var(--theme-muted);
    font-size: .8125rem;
}

.login-meta p {
    margin: 0;
}

.login-meta > * + * {
    position: relative;
    padding-left: 17px;
}

.login-meta > * + *::before {
    content: "·";
    position: absolute;
    left: 7px;
}

.login-meta a {
    word-break: break-word;
}

@media (max-width: 480px) {
    body[data-page="login"] {
        padding: 56px 14px 24px;
    }

    .login {
        padding: 22px 18px 18px;
        border-radius: 14px;
    }

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