/* frontend/apps/public/auth.css
 *
 * Экран авторизации Bilox.
 *
 * Опирается на shared/design-system/tokens.css (--ws-*).
 * Не содержит собственных :root — только компоненты этого экрана.
 * Никакого shared/legacy/styles.css здесь не подключается.
 */

/* =========================================================
   Скелет страницы
   ========================================================= */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body.pauth {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    --legal-footer-mini-h: 32px;
    display: flex;
    flex-direction: column;
    /* Свечение рисует сам body. Отдельный слой .pauth-bg с z-index:-1 для
       этого не годится: отрицательный z-index уводит элемент ЗА фон
       родителя, и на непрозрачном body его просто не видно. Раньше это
       не всплывало, потому что тот же градиент дублировался и здесь. */
    background-color: var(--ws-bg);
    background-image:
        radial-gradient(54rem 44rem at 86% -6%, var(--ws-glow-cool), transparent 66%),
        radial-gradient(44rem 38rem at -4% 98%, var(--ws-glow-warm), transparent 64%),
        radial-gradient(28rem 24rem at 30% 30%, var(--ws-glow-accent), transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--ws-fg);
    font-family: var(--ws-font-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Декоративный задник экрана авторизации.

   Композиция намеренно асимметричная: крупное холодное пятно уходит за
   правый верхний угол, тёплое — за левый нижний, акцентное поменьше стоит
   между ними и чуть выше центра. Пятна разного размера и обрезаны краями
   экрана — так задник читается как продолжение пространства, а не как три
   ровных кружка на плашке. Цвета берутся из токенов свечения, поэтому в
   тёмной теме это тёплая дымка, а не холодный белый нимб.

   Сам элемент .pauth-bg оставлен пустым: разметка страниц-оболочек его
   ожидает, но рисовать фон он не должен — см. комментарий у body.pauth. */
.pauth-bg {
    display: none;
}

/* На узких экранах пятна сжимаются вместе с вьюпортом, иначе на телефоне
   в кадр попадает только середина самого крупного из них — получается
   ровная заливка вместо свечения. */
@media (max-width: 760px) {
    body.pauth {
        background-image:
            radial-gradient(30rem 26rem at 92% -8%, var(--ws-glow-cool), transparent 70%),
            radial-gradient(26rem 24rem at -12% 100%, var(--ws-glow-warm), transparent 68%),
            radial-gradient(18rem 16rem at 26% 30%, var(--ws-glow-accent), transparent 64%);
    }
}

/* =========================================================
   Топ-бар
   ========================================================= */
.pauth-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--ws-space-sm);
    min-height: 44px;
    padding: 6px clamp(18px, 4vw, 32px);
    background: color-mix(in srgb, var(--ws-bg) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ws-line);
}

/* Порядок в шапке задан в секции «Переключатель темы в шапке» внизу файла:
   логотип — переключатель — разделитель — «Вернуться». */

/* Логотип. Размеры — общие токены (shared/design-system/tokens.css), те же
   на лендинге: страницы связаны одним кликом, и знак не имеет права менять
   размер по дороге. */
.pauth-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ws-wordmark-gap);
    color: var(--ws-fg);
    font-family: var(--ws-font-heading);
    font-weight: var(--ws-wordmark-weight);
    font-size: var(--ws-wordmark-size);
    letter-spacing: -0.02em;
    text-decoration: none;
}

.pauth-brand-mark {
    display: grid;
    place-items: center;
    width: var(--ws-wordmark-mark-size);
    height: var(--ws-wordmark-mark-size);
    flex: 0 0 var(--ws-wordmark-mark-size);
    border-radius: var(--ws-wordmark-mark-radius);
    background: var(--ws-primary);
    color: var(--ws-primary-fg);
    font-family: var(--ws-font-heading);
    font-weight: var(--ws-wordmark-weight);
    font-size: var(--ws-wordmark-mark-font);
    letter-spacing: -0.02em;
}

.pauth-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ws-fg-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: color 0.18s ease;
}

.pauth-topbar-link:hover {
    color: var(--ws-primary);
}

.pauth-topbar-link svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* =========================================================
   Main + карточка
   ========================================================= */
.pauth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    position: relative;
}

.pauth-card {
    width: 100%;
    max-width: 400px;
    padding: 24px 26px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-2xl);
    background: var(--ws-surface);
    box-shadow: var(--ws-shadow-lg);
    transform: translateY(-16px);
}

.pauth-card:has(#registerForm:not(.hidden)) {
    padding: 18px 22px;
}

.pauth-card:has(#registerForm:not(.hidden)) .pauth-head {
    margin-bottom: 14px;
}

.pauth-card:has(#registerForm:not(.hidden)) .pauth-segment {
    margin-bottom: 14px;
}

.pauth-card:has(#registerForm:not(.hidden)) .pauth-form {
    gap: 10px;
}

.pauth-card:has(#registerForm:not(.hidden)) .pauth-consent {
    line-height: 1.25;
}

.pauth-card:has(#registerForm:not(.hidden)) .pauth-microcopy {
    line-height: 1.25;
}

.pauth-head {
    text-align: center;
    margin-bottom: 18px;
}

.pauth-head h1 {
    margin: 0 0 6px;
    font-family: var(--ws-font-heading);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ws-fg);
}

.pauth-head p {
    margin: 0;
    color: var(--ws-fg-muted);
    font-size: 13.5px;
    line-height: 1.35;
}

/* =========================================================
   Сегментированный переключатель роли
   ========================================================= */
.pauth-segment {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin-bottom: 16px;
    background: var(--ws-surface-soft);
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-lg);
}

.pauth-segment-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ws-fg-muted);
    font-family: var(--ws-font-sans);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.pauth-segment-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.pauth-segment-btn.active {
    background: var(--ws-surface);
    color: var(--ws-fg);
    box-shadow: 0 4px 12px rgba(21, 28, 44, 0.08);
}

body.theme-dark .pauth-segment-btn.active {
    background: var(--ws-surface-strong);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* =========================================================
   Формы
   ========================================================= */
.pauth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pauth-form.hidden {
    display: none;
}

.pauth-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pauth-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pauth-field label {
    display: inline-block;
    color: var(--ws-fg-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pauth-field-link {
    color: var(--ws-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.pauth-field-link:hover {
    text-decoration: underline;
}

.pauth-field input[type="text"],
.pauth-field input[type="email"],
.pauth-field input[type="password"],
.pauth-field input[type="tel"] {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--ws-radius-md);
    background: var(--ws-surface-soft);
    color: var(--ws-fg);
    font-family: var(--ws-font-sans);
    font-size: 14px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.pauth-field input::placeholder {
    color: color-mix(in srgb, var(--ws-fg-muted) 60%, transparent);
}

.pauth-field input:focus {
    border-color: var(--ws-primary-line);
    background: var(--ws-surface);
    box-shadow: 0 0 0 4px var(--ws-primary-soft);
}

.pauth-field input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pauth-field input:-webkit-autofill,
.pauth-field input:-webkit-autofill:hover,
.pauth-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ws-fg);
    box-shadow: 0 0 0 1000px var(--ws-surface-soft) inset;
    transition: background-color 9999s ease-out;
}

.pauth-field input.input-error,
.pauth-field input.input-error:focus {
    border-color: var(--ws-error);
    background: var(--ws-error-soft);
    box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.12);
}

.pauth-field .error-text {
    color: var(--ws-error);
    font-size: 12px;
    line-height: 1.4;
}

.pauth-field .error-text.hidden {
    display: none;
}

/* --- Поле пароля и надёжность --------------------------------------------
   Переехали в /shared/runtime/password-field.css: тот же глазок и та же
   плашка надёжности нужны в кабинете участника и в кабинете компании, где
   меняют пароль. Пока правила жили здесь, подключить их там было нельзя —
   этот файл несёт вёрстку всей страницы входа, — и смена пароля в кабинетах
   оставалась голыми полями без глазка и без оценки. */

/* --- Consent (чекбоксы соглашений) --- */
.pauth-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 0;
    font-size: 11px;
    line-height: 1.3;
    color: var(--ws-fg-muted);
    cursor: pointer;
}

/* Вид чекбокса — /shared/runtime/controls.css. Здесь был свой квадрат на
   16px со своей галочкой: тот же контрол, но на 4px меньше, чем везде. */
.pauth-consent input[type="checkbox"] {
    margin: 1px 0 0;
}

.pauth-consent a {
    color: var(--ws-primary);
    font-weight: 600;
    text-decoration: none;
}

.pauth-consent a:hover {
    text-decoration: underline;
}

.pauth-microcopy {
    margin: 0;
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--ws-fg-soft);
    text-align: center;
}

/* =========================================================
   Кнопки
   ========================================================= */
.pauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--ws-radius-md);
    font-family: var(--ws-font-sans);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.14s ease;
    text-decoration: none;
}

.pauth-btn-primary {
    background: var(--ws-primary);
    border-color: var(--ws-primary);
    color: var(--ws-primary-fg);
    box-shadow: var(--ws-shadow-primary);
}

.pauth-btn-primary:hover:not(:disabled) {
    background: var(--ws-primary-hover);
    border-color: var(--ws-primary-hover);
    transform: translateY(-1px);
}

.pauth-btn-primary:active {
    transform: translateY(0);
}

/* Неготовая кнопка приглушена, но стоит на месте: человек видит, к чему
   идёт. Курсор обычный, а не «запрещено»: это «пока рано», а не «сюда
   нельзя». Те же правила, что у кнопок в диалогах кабинетов
   (shared/runtime/modal-shell.js) — состояние готовности на площадке одно. */
.pauth-btn-primary:disabled {
    opacity: 0.45;
    cursor: default;
    box-shadow: none;
    transform: none;
}

/* Готовность объявляется одним миганием ореола: отвечает на вопрос «уже
   можно?» и на этом заканчивается. Безостановочная пульсация там, где
   печатают, мешает. */
.pauth-btn--ready {
    animation: pauth-btn-ready .9s ease-out 1;
}

@keyframes pauth-btn-ready {
    0%   { box-shadow: 0 0 0 0 var(--ws-primary-line); }
    60%  { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Подпись под полем: подтверждение или правило. Место занято всегда — иначе
   появление текста сдвигает кнопку, по которой человек целится. */
.pauth-hint {
    display: block;
    min-height: 16px;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--ws-fg-muted, #6b7280);
}
.pauth-hint--ok { color: #2f7d62; }
.pauth-hint--error { color: var(--ws-error, #dc2626); }

@media (prefers-reduced-motion: reduce) {
    .pauth-btn--ready { animation: none; }
}

.pauth-btn-ghost {
    background: transparent;
    color: var(--ws-fg-muted);
    border-color: transparent;
    min-height: 44px;
    font-weight: 600;
}

.pauth-btn-ghost:hover {
    color: var(--ws-fg);
    background: var(--ws-surface-soft);
}

.pauth-btn-secondary {
    background: var(--ws-surface);
    border-color: var(--ws-line);
    color: var(--ws-fg);
}

.pauth-btn-secondary:hover {
    border-color: var(--ws-line-strong);
    background: var(--ws-surface-soft);
}

/* =========================================================
   OAuth провайдеры
   ========================================================= */
.pauth-oauth {
    margin-top: 10px;
}

.pauth-oauth.hidden,
.pauth-oauth--mode-hidden {
    display: none;
}

.pauth-oauth-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--ws-fg-soft);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pauth-oauth-sep::before,
.pauth-oauth-sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ws-line);
}

.pauth-oauth-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pauth-oauth-btn,
.oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-md);
    background: var(--ws-surface);
    color: var(--ws-fg);
    font-family: var(--ws-font-sans);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.pauth-oauth-btn:hover,
.oauth-btn:hover {
    background: var(--ws-surface-soft);
    border-color: var(--ws-line-strong);
    color: var(--ws-primary);
}

.pauth-oauth-btn svg,
.oauth-btn svg {
    width: 18px;
    height: 18px;
}

.pauth-oauth-btn[data-provider="vk_id"],
.oauth-btn[data-provider="vk_id"] { color: var(--ws-fg); }
.pauth-oauth-btn[data-provider="vk_id"] svg,
.oauth-btn[data-provider="vk_id"] svg { color: #0077FF; }
.pauth-oauth-btn[data-provider="yandex"] svg,
.oauth-btn[data-provider="yandex"] svg { color: #FC3F1D; }
.pauth-oauth-btn[data-provider="telegram"] svg,
.oauth-btn[data-provider="telegram"] svg { color: #229ED9; }
.pauth-oauth-btn[data-provider="github"] svg,
.oauth-btn[data-provider="github"] svg { color: currentColor; }

/* =========================================================
   Mode switch и служебные состояния
   ========================================================= */
.pauth-mode-switch {
    margin-top: 12px;
    text-align: center;
    color: var(--ws-fg-muted);
    font-size: 14px;
}

.pauth-mode-switch p {
    display: inline;
    margin: 0;
}

.pauth-mode-switch button {
    display: inline;
    margin-left: 6px;
    border: 0;
    background: transparent;
    color: var(--ws-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.pauth-mode-switch button:hover {
    text-decoration: underline;
}

/* Alert-banner (id="message") */
.pauth-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--ws-line);
    border-radius: var(--ws-radius-md);
    background: var(--ws-surface-soft);
    color: var(--ws-fg);
    font-size: 12.5px;
    line-height: 1.35;
}

.pauth-message.hidden {
    display: none;
}

.pauth-message--error {
    border-color: var(--ws-error-line);
    background: var(--ws-error-soft);
    color: var(--ws-error);
}

.pauth-message--success {
    border-color: var(--ws-accent-emerald-line);
    background: var(--ws-accent-emerald-soft);
    color: var(--ws-accent-emerald);
}

.pauth-message svg {
    flex-shrink: 0;
    margin-top: 1px;
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* Верификация / TOTP / reset — общие блоки */
.pauth-state {
    display: block;
}

.pauth-state.hidden {
    display: none;
}

.pauth-state h1,
.pauth-state h2 {
    margin: 0 0 6px;
    font-family: var(--ws-font-heading);
    font-weight: 700;
    font-size: clamp(21px, 2.2vw, 26px);
    color: var(--ws-fg);
    text-align: center;
}

.pauth-state p.subtitle {
    margin: 0 0 var(--ws-space-lg);
    color: var(--ws-fg-muted);
    font-size: 14.5px;
    line-height: 1.5;
    text-align: center;
}

.pauth-verify-icon {
    display: grid;
    place-items: center;
    margin: 0 auto var(--ws-space-md);
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ws-primary-soft) 76%, white);
    color: var(--ws-primary);
}

.pauth-verify-icon svg {
    width: 40px;
    height: 40px;
}

.pauth-verify-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto var(--ws-space-lg);
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--ws-primary-soft);
    color: var(--ws-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pauth-verify-badge--pending {
    background: color-mix(in srgb, #5b7fb7 13%, white);
    color: #4f6f9f;
}

.pauth-verify-badge--approved {
    background: color-mix(in srgb, #2f7d62 14%, white);
    color: #2f6f58;
}

.pauth-verify-badge--rejected {
    background: color-mix(in srgb, #8d6b7d 13%, white);
    color: #6f5062;
}

.pauth-verify-state {
    text-align: center;
}

.pauth-verify-state .pauth-form {
    margin-top: 4px;
}

/* =========================================================
   Нижний футер
   ========================================================= */
.pauth-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ws-space-md);
    padding: 7px clamp(18px, 4vw, 32px);
    border-top: 1px solid var(--ws-line);
    color: var(--ws-fg-soft);
    font-size: 12px;
    background: color-mix(in srgb, var(--ws-surface) 55%, transparent);
    flex-wrap: wrap;
}

.pauth-footer nav {
    display: flex;
    gap: var(--ws-space-lg);
    flex-wrap: wrap;
}

.pauth-footer a {
    color: var(--ws-fg-muted);
    text-decoration: none;
    transition: color 0.14s ease;
}

.pauth-footer a:hover {
    color: var(--ws-primary);
}

body.pauth .legal-footer-mini {
    min-height: 32px;
    padding: 4px clamp(16px, 3vw, 28px);
    border-top: 0;
    background: transparent;
    box-shadow: none;
    font-size: 11.5px;
    line-height: 1.25;
    gap: 10px;
}

body.pauth .legal-footer-mini__help,
body.pauth .legal-footer-mini__copy,
body.pauth .legal-footer-mini__links,
body.pauth .legal-footer-mini__links a {
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

body.pauth .legal-footer-mini__help {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

body.pauth .legal-footer-mini__links {
    grid-column: 2;
    grid-row: 1;
    gap: 12px;
}

body.pauth .legal-footer-mini__copy {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    font-size: 11px;
}

/* =========================================================
   Утилиты
   ========================================================= */
.hidden {
    display: none !important;
}

@media (max-width: 480px) {
    .pauth-topbar { padding: 6px 14px; }
    .pauth-card { padding: 18px; border-radius: var(--ws-radius-xl); transform: translateY(-8px); }
    .pauth-footer { justify-content: center; text-align: center; }
    .pauth-footer nav { justify-content: center; }
    body.pauth .legal-footer-mini { padding: 6px 12px; gap: 6px; }
    body.pauth .legal-footer-mini__help,
    body.pauth .legal-footer-mini__links,
    body.pauth .legal-footer-mini__copy {
        grid-column: 1;
        grid-row: auto;
        justify-self: center;
    }
}


/* =========================================================
   Переключатель темы в шапке
   =========================================================
   Тихая иконка без рамки и заливки: это служебный контрол, он не должен
   спорить по весу с «Войти». От «Вернуться» отделён тонким разделителем —
   действия разной природы не должны читаться одной группой.

   Внизу страницы кнопке не место: там правовой подвал, и своя полоса под
   кнопку ломала его посадку. */
.pauth-topbar #themeToggle.pauth-theme-btn {
    position: static;
    order: 2;
    margin-left: auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--ws-radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--ws-fg-soft);
}

.pauth-topbar #themeToggle.pauth-theme-btn:hover {
    background: var(--ws-surface-soft);
    color: var(--ws-fg);
    transform: none;
}

.pauth-topbar #themeToggle.pauth-theme-btn svg {
    width: 16px;
    height: 16px;
}

.pauth-topbar-sep {
    order: 3;
    width: 1px;
    height: 18px;
    background: var(--ws-line);
}

.pauth-topbar .pauth-topbar-link {
    order: 4;
    margin-left: 0;
}

.pauth-brand {
    order: 1;
}