/* =========================================================
   TEAM VOICE — страницы входа и регистрации

   Оформление сделано по референсу: тёмный фиолетовый градиент, стеклянная
   карточка с тонкой светлой рамкой, поля со свечением при вводе, капсульная
   кнопка с градиентом.

   Почему именно эти страницы взяты первыми: здесь нет живого JS, страницы
   целиком серверные, поэтому оформление можно менять без риска что-то сломать.
   Разметку (templates/accounts/login.html, register.html) менять не пришлось —
   все нужные селекторы уже есть в шаблонах.

   Раньше правила этих страниц лежали в inline-блоках <style> внутри шаблонов,
   затем были сведены сюда.
   ========================================================= */
@layer pages {
    * {
        box-sizing: border-box;
    }

    body.login-page,
    body.register-page,
    body.invite-page {
        /* Явно возвращаем поведение прокрутки: в app.css (слой base) есть
           body{overflow:hidden} для каркаса приложения, и в слое pages это
           правило не перебивается — слой выигрывает только там, где он
           реально задаёт свойство. */
        overflow: visible;
        font-family: var(--font-ui);
        margin: 0;
        color: var(--text-normal);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 24px 0;

        /* Подложка на время загрузки видео: файл 8 МБ едет не мгновенно, и без
           подложки экран мигнул бы белым. Цвет взят токеном базового фона
           приложения — отдельный оттенок ради этого места не нужен. */
        background-color: var(--bg-app);
    }

    /* Видео-фон страницы: отдельный слой на весь экран, зациклено. */
    .auth-bg-video {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        /* cover: заполняет экран целиком, лишнее обрезается — пропорции при
           этом сохраняются, картинка не растягивается. */
        object-fit: cover;
        z-index: 0;
        pointer-events: none;
    }

    /* Затемнение поверх видео: без него светлые кадры мешают читать карточку.
       Градиент, а не ровный слой — так края темнее, а центр живее. */
    .auth-bg-overlay {
        position: fixed;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient(ellipse 85% 75% at 50% 50%,
            rgba(6, 4, 14, 0.42) 0%,
            rgba(6, 4, 14, 0.78) 100%);
    }

    /* Бегущий блик больше не нужен: фон — видео, оно движется само.
       Ключевые кадры удалены, чтобы не оставалось мёртвых правил. */

    /* Если человек просил уменьшить движение — видео-фон не показываем:
       движущаяся картинка на весь экран мешает именно таким людям. Остаётся
       тёмная подложка, карточка читается. */
    @media (prefers-reduced-motion: reduce) {
        .auth-bg-video {
            display: none;
        }
    }

    /* У регистрации форма длиннее — был padding: 20px 0. */
    body.register-page {
        padding: 20px 0;
    }

    /* --- Карточка: стекло ---
       Приём взят из референсов: полупрозрачный фон, едва заметная светлая
       рамка, подсветка по верхнему краю. Это и даёт «дорогой» вид вместо
       плоского прямоугольника. */
    .card.auth-card {
        position: relative;
        /* Выше видео и затемнения: видео — слой 0, затемнение — 1, карточка — 2. */
        z-index: 2;
        padding: 36px 32px 32px;
        border-radius: var(--radius-xl);
        background: linear-gradient(165deg,
            rgba(46, 33, 73, 0.72) 0%,
            rgba(24, 19, 38, 0.88) 60%);
        border: 1px solid rgba(168, 85, 247, 0.28);
        box-shadow:
            var(--inset-highlight),
            0 24px 64px rgba(0, 0, 0, 0.6),
            0 0 40px rgba(168, 85, 247, 0.14);
        backdrop-filter: blur(14px);
        width: 100%;
    }

    /* Тонкая светящаяся полоса сверху карточки. */
    .card.auth-card::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 12%;
        right: 12%;
        height: 1px;
        background: linear-gradient(90deg,
            transparent, var(--accent), var(--accent-2), transparent);
        opacity: 0.9;
    }

    body.login-page .auth-card {
        max-width: 420px;
    }

    body.register-page .auth-card {
        max-width: 460px;
    }

    /* --- Страница приглашения по ссылке (/join/<код>/) ---
       Вид тот же, что у входа и регистрации, поэтому заданы только части,
       которых там нет: карточка сервера и кнопка-ссылка. Ни одного
       литерального цвета — только токены (DESIGN.md). */
    body.invite-page .invite-card {
        max-width: 440px;
        text-align: center;
    }

    .invite-server-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 4px auto 18px;
        /* Квадрат 72x72 — тот же размер, что у картинки из _avatar.html,
           поэтому иконка сервера и кот по умолчанию встают на одно место. */
        width: 72px;
        height: 72px;
    }

    .invite-server-icon {
        width: 72px;
        height: 72px;
        border-radius: var(--radius-round);
        object-fit: cover;
        display: block;
    }

    /* Инициал — запасной вариант, если не отдалась сама картинка. */
    .invite-server-initial {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        border-radius: var(--radius-round);
        background: var(--bg-input);
        color: var(--text-primary);
        font-size: 28px;
        font-weight: 700;
    }

    .invite-lead {
        margin: 0 0 6px;
        font-size: 13px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .invite-server-name {
        margin: 0;
        font-size: 22px;
        color: var(--text-primary);
        /* Длинное название сервера не должно ломать карточку. */
        overflow-wrap: anywhere;
    }

    /* Кнопка-ссылка «Войти и присоединиться»: вид тот же, что у кнопки
       отправки формы (.auth-card button), поэтому повторяем её оформление,
       а не заводим третий стиль кнопки в проекте. Цвета — только токенами:
       у формы стоит литерал тени, и он уже в списке долга
       (tools/colors_baseline.json), второй такой же здесь не нужен. */
    .invite-primary-btn {
        display: block;
        width: 100%;
        margin-top: 24px;
        padding: 13px;
        background: var(--accent-gradient);
        color: var(--white);
        border: 1px solid transparent;
        border-radius: var(--radius-pill);
        font-size: 15px;
        font-weight: 600;
        font-family: var(--font-ui);
        letter-spacing: 0.02em;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        box-shadow: var(--inset-highlight), var(--glow-accent);
        transition: box-shadow var(--transition-base),
                    background var(--transition-base);
    }

    .invite-primary-btn:hover {
        background: var(--accent-gradient-hover);
        border-color: var(--neon-edge-hot);
        box-shadow: var(--neon-glow), var(--glow-accent-lg), var(--inset-glow);
    }

    .invite-primary-btn:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring), var(--glow-accent);
    }

    /* Подсказка про ручной ввод кода: текст, а не цвет — цвет берёт .errors. */
    .invite-errors {
        text-align: left;
    }

    .auth-card h1 {
        margin: 0 0 8px;
        color: var(--text-primary);
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.02em;
    }

    .auth-card .sub {
        color: var(--text-muted);
        font-size: 14px;
        text-align: center;
        margin: 0 0 28px;
    }

    /* --- Поля --- */
    .auth-card label {
        display: block;
        margin-bottom: 6px;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .auth-card input {
        width: 100%;
        padding: 11px 14px;
        background: rgba(12, 10, 20, 0.72);
        color: var(--text-primary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        font-size: 14px;
        font-family: var(--font-ui);
        margin-bottom: 18px;
        outline: none;
        transition: border-color var(--transition-base),
                    box-shadow var(--transition-base);
    }

    .auth-card input::placeholder {
        color: var(--text-faint);
    }

    /* Свечение при вводе: главный приём из референса формы входа. */
    .auth-card input:focus {
        border-color: var(--accent);
        box-shadow: var(--glow-accent);
    }

    /* --- Кнопка: капсула с градиентом --- */
    .auth-card button {
        width: 100%;
        padding: 13px;
        background: var(--accent-gradient);
        color: var(--white);
        /* Прозрачная грань в покое: при наведении загорается неоном, а размер
           кнопки не меняется — иначе она дёргалась бы на 2 px. */
        border: 1px solid transparent;
        border-radius: var(--radius-pill);
        font-size: 15px;
        font-weight: 600;
        font-family: var(--font-ui);
        letter-spacing: 0.02em;
        cursor: pointer;
        box-shadow: var(--inset-highlight), 0 8px 24px rgba(168, 85, 247, 0.35);
        transition: box-shadow var(--transition-base),
                    background var(--transition-base),
                    transform var(--transition-fast);
    }

    /* У регистрации кнопка чуть отступает от подсказки. */
    body.register-page .auth-card button {
        margin-top: 4px;
    }

    .auth-card button:hover {
        background: var(--accent-gradient-hover);
        border-color: var(--neon-edge-hot);
        box-shadow: var(--neon-glow), var(--glow-accent-lg), var(--inset-glow);
    }

    .auth-card button:active {
        transform: translateY(1px);
    }

    .auth-card button:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring), var(--glow-accent);
    }

    /* --- Ошибки --- */
    .auth-card .errors {
        background: rgba(239, 68, 68, 0.14);
        border: 1px solid var(--danger);
        color: var(--text-primary);
        padding: 12px 16px;
        border-radius: var(--radius-md);
        font-size: 14px;
        margin-bottom: 20px;
    }

    .auth-card .errors ul {
        margin: 0;
        padding-left: 18px;
    }

    .auth-card .errors li {
        margin: 2px 0;
    }

    /* --- Подписи и ссылки --- */
    .auth-card .foot {
        text-align: center;
        margin-top: 20px;
        font-size: 14px;
        color: var(--text-dim);
    }

    .auth-card .foot a {
        color: var(--link);
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: color var(--transition-base),
                    border-color var(--transition-base);
    }

    .auth-card .foot a:hover {
        color: var(--accent);
        border-bottom-color: var(--accent);
    }

    .auth-card .hint {
        font-size: 12px;
        color: var(--text-dim);
        margin-top: -12px;
        margin-bottom: 16px;
    }
}