/* ============================================================
   REALTBANK CRM — екран входу (ТЗ 0355).

   Усе скоуповано на .lg-page. Сторінка входу публічна й не має
   спільної розмітки з авторизованим shell, тому жодне правило звідси
   не повинно діставати до CRM — і навпаки.

   Щільність робиться сіткою, типографікою й висотами, а НЕ зменшенням
   усієї сторінки: transform: scale, CSS zoom і фіксований viewport тут
   заборонені (§19). Тому нижче є медіа-запити і по ширині, і по
   ВИСОТІ — низький ноутбук 1366×650 це не те саме, що вузький телефон.
   ============================================================ */

/* ── Семантика саме цього екрана ──────────────────────────────────────
   Свої змінні, але жодного нового кольору: усе відображається на
   глобальні токени. Це дозволяє темну тему нижче перевизначити один
   блок замість того, щоб дублювати правила. */
.lg-page {
    --auth-bg: var(--bg);
    --auth-surface: var(--surface);
    --auth-border: var(--border);
    --auth-text: var(--text);
    --auth-muted: var(--text-subtle);
    --auth-brand: var(--primary);
    --auth-brand-deep: var(--primary-dark);
    --auth-on-brand: var(--text-invert);
    --auth-soft: var(--primary-soft);
    --auth-danger: var(--danger);
    --auth-danger-soft: var(--danger-soft);

    /* Висота контрола входу свідомо більша за 34px решти CRM: це
       єдина форма, яку заповнюють до того, як прокинулись, і часто з
       телефона. 46px лишає запас над мінімальним тач-таргетом 44. */
    --auth-control-h: 46px;
    --auth-radius: var(--radius-lg);
}

/* Типовий відступ body. Сторінка входу свідомо не вантажить
   Tailwind, а разом із ним і його reset — тому обнуляємо рівно те, що
   заважає, і рівно на цій сторінці. :has() тут доречний: правило не
   має діяти ніде, крім входу. */
body:has(.lg-page) {
    margin: 0;
}

/* ── Коренева поверхня ────────────────────────────────────────────────
   min-height, а не height: при 200% зумі, відкритій клавіатурі або
   довгому перекладі сторінка мусить прокручуватись, а не обрізатись.
   100dvh додається лише там, де підтримується — інакше на старих
   браузерах правило просто ігнорується, і лишається 100vh. */
.lg-page {
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 40px 24px;
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    background: var(--auth-bg);
    color: var(--auth-text);
    /* Центрування безпечне саме тому, що висота задана через
       min-height: якщо вміст переростає екран, контейнер росте разом із
       ним і нічого не обрізається — сторінка просто прокручується. Із
       жорстким height той самий align-items: center зрізав би верх. */
    font-family: var(--font);
    font-size: var(--t-base);
    line-height: 1.5;
}

@supports (min-height: 100svh) {
    .lg-page { min-height: 100svh; }
}

@supports (min-height: 100dvh) {
    .lg-page { min-height: 100dvh; }
}

.lg-page *,
.lg-page *::before,
.lg-page *::after { box-sizing: border-box; }

/* ── Композиція ───────────────────────────────────────────────────────
   Одна рамка з двох колонок, а не «картка в картці всередині модалки».
   Співвідношення 55/45, загальна ширина обмежена: на широкому моніторі
   форма не має розтягуватись через увесь екран. */
/* Області, а не просто колонки.

   Причина в порядку Tab (§9.3): Telegram має йти ПІСЛЯ кнопки входу,
   тобто в розмітці контакт стоїть після форми. Візуально ж він
   належить лівій панелі. Грід-області розводять ці дві вимоги: DOM
   лишається «бренд → форма → контакт», а розкладка повертає контакт
   під бренд. Без цього довелося б або ламати порядок клавіатури, або
   малювати дві копії посилання. */
.lg-shell {
    width: 100%;
    max-width: 1080px;
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    grid-template-areas:
        "brand form"
        "contact form";
    grid-template-rows: 1fr auto;
    background: var(--auth-surface);
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .06);
    overflow: hidden;
}

/* ЛІВА КОЛОНКА — бренд і сенс продукту. */
.lg-brand {
    grid-area: brand;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s4);
    padding: 40px;
    background: linear-gradient(160deg, var(--auth-brand-deep) 0%, color-mix(in srgb, var(--auth-brand-deep) 78%, var(--auth-brand)) 58%, color-mix(in srgb, var(--auth-brand-deep) 66%, var(--auth-brand)) 100%);
    color: var(--auth-on-brand);
}

/* Обидва знаки на ОДНІЙ світлій підкладці.

   Текстовий знак — темно-синій (#04254E у самому файлі), і на темній
   панелі його не видно. Інвертувати фільтром заборонено (§12.2), тому
   під нього потрібна нейтральна підкладка. Спершу вона була тільки під
   текстом, і лого читалось як значок плюс окремий бейдж поруч. Плитка
   одна на обидва — і це знову один логотип, а не два предмети. */
.lg-logo {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    padding: 8px 14px 8px 10px;
    border-radius: var(--radius-lg);
    background: var(--auth-on-brand);
}

/* Обидва asset-и йдуть як є, у своїх пропорціях: без перемальовки,
   перефарбування і без CSS-інверсії (§12). Текстовий знак темно-синій,
   тому на брендовій панелі він лежить на світлій підкладці, а не
   інвертується фільтром. */
.lg-logo__mark {
    width: 32px;
    height: 32px;
    flex: none;
    display: block;
}

.lg-logo__word {
    height: 20px;
    width: auto;
    display: block;
}

.lg-eyebrow {
    margin: 0;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .04em;
    color: color-mix(in srgb, var(--auth-on-brand) 82%, transparent);
}

.lg-title {
    margin: 0;
    font-size: clamp(20px, 2.1vw, 28px);
    font-weight: 700;
    line-height: 1.25;
}

.lg-lead {
    margin: 0;
    font-size: var(--t-lg);
    line-height: 1.55;
    color: color-mix(in srgb, var(--auth-on-brand) 88%, transparent);
}

.lg-benefits {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.lg-benefits li {
    position: relative;
    padding-left: 20px;
    font-size: var(--t-base);
    color: color-mix(in srgb, var(--auth-on-brand) 90%, transparent);
}

/* Проста CSS-крапка замість іконки: у реєстрі rb-icons немає гліфа,
   який тут щось додав би, а малювати новий SVG заборонено (§12). */
.lg-benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-light);
}

/* Контакт лежить у брендовій колонці, тому носить те саме тло: разом
   із .lg-brand він має читатись як одна панель, а не як другий блок. */
.lg-contact {
    grid-area: contact;
    min-width: 0;
    padding: 0 40px 40px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--auth-brand-deep) 66%, var(--auth-brand)) 0%, color-mix(in srgb, var(--auth-brand-deep) 60%, var(--auth-brand)) 100%);
    color: var(--auth-on-brand);
}

.lg-contact__inner {
    padding-top: var(--s4);
    border-top: 1px solid color-mix(in srgb, var(--auth-on-brand) 18%, transparent);
}

.lg-contact__text {
    margin: 0 0 var(--s3);
    font-size: var(--t-sm);
    color: color-mix(in srgb, var(--auth-on-brand) 78%, transparent);
}

/* CTA помітний, але це не другий submit: контурна кнопка на брендовому
   тлі, і вона свідомо не схожа на синю кнопку входу праворуч. */
.lg-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--auth-on-brand) 45%, transparent);
    border-radius: var(--radius);
    color: var(--auth-on-brand);
    font-size: var(--t-base);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.lg-cta:hover { background: color-mix(in srgb, var(--auth-on-brand) 12%, transparent); border-color: color-mix(in srgb, var(--auth-on-brand) 70%, transparent); }
.lg-cta:focus-visible { outline: 2px solid var(--auth-on-brand); outline-offset: 2px; }

.lg-cta__handle {
    font-weight: 400;
    color: color-mix(in srgb, var(--auth-on-brand) 72%, transparent);
}

/* ПРАВА КОЛОНКА — форма. Спокійніша за брендову панель, але з ясною
   головною дією. */
.lg-form-col {
    grid-area: form;
    min-width: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lg-form-head { margin-bottom: var(--s5); }

.lg-form-eyebrow {
    margin: 0 0 6px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--auth-muted);
}

.lg-form-title {
    margin: 0 0 6px;
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--auth-text);
}

.lg-form-lead {
    margin: 0;
    font-size: var(--t-sm);
    color: var(--auth-muted);
}

.lg-field { margin-bottom: var(--s4); }

.lg-label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--auth-text);
}

/* 16px — не стиль, а вимога: менший кегль змушує iOS збільшувати
   сторінку при фокусі в поле, і людина опиняється в зумі, з якого
   сама не вийде (§6). */
.lg-input {
    width: 100%;
    height: var(--auth-control-h);
    padding: 0 14px;
    border: 1px solid var(--auth-border);
    border-radius: var(--radius);
    background: var(--auth-surface);
    color: var(--auth-text);
    font-family: inherit;
    font-size: 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.lg-input::placeholder { color: var(--auth-muted); }
.lg-input:hover { border-color: var(--border-strong); }

.lg-input:focus {
    outline: none;
    border-color: var(--auth-brand);
    box-shadow: 0 0 0 3px var(--auth-soft);
}

.lg-input:focus-visible {
    outline: 2px solid var(--auth-brand);
    outline-offset: 1px;
}

/* Пароль і кнопка показу. Кнопка всередині поля, але поле має власний
   правий відступ — текст ніколи не заповзає під кнопку. */
.lg-password { position: relative; }
.lg-password .lg-input { padding-right: 96px; }

/* Текстова кнопка, а не око: гліфа eye в rb-icons.js немає, а малювати
   новий SVG заборонено (§9.2). Текст тут навіть чесніший — він сам є
   доступним іменем і змінюється разом зі станом. */
.lg-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: var(--auth-control-h);
    min-width: 88px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--auth-brand);
    font-family: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    cursor: pointer;
}

.lg-toggle:hover { text-decoration: underline; }
.lg-toggle:focus-visible { outline: 2px solid var(--auth-brand); outline-offset: -2px; }

/* Без JS кнопки немає взагалі — пароль лишається робочим (§14). */
.lg-toggle[hidden] { display: none; }

.lg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    flex-wrap: wrap;
    margin-bottom: var(--s5);
}

.lg-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: var(--t-sm);
    color: var(--auth-text);
    cursor: pointer;
}

.lg-remember input {
    width: 18px;
    height: 18px;
    accent-color: var(--auth-brand);
    cursor: pointer;
}

.lg-forgot {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--t-sm);
    color: var(--auth-brand);
    text-decoration: none;
}

.lg-forgot:hover { text-decoration: underline; }
.lg-forgot:focus-visible { outline: 2px solid var(--auth-brand); outline-offset: 2px; }

.lg-submit {
    width: 100%;
    height: var(--auth-control-h);
    border: 0;
    border-radius: var(--radius);
    background: var(--auth-brand);
    color: var(--auth-on-brand);
    font-family: inherit;
    font-size: var(--t-lg);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}

.lg-submit:hover { background: var(--primary-hover); }
.lg-submit:focus-visible { outline: 2px solid var(--auth-brand); outline-offset: 2px; }

/* Ширина кнопки не змінюється під час відправки: інакше картка
   смикається рівно тоді, коли людина на неї дивиться (§9.3). */
.lg-submit[aria-busy="true"] { opacity: .72; cursor: progress; }

/* Вхід ключем — вторинна дія.

   Контурна, не залита: пароль лишається головним способом, і дві
   однаково яскраві кнопки поруч читались би як вибір, якого немає.
   Висота та сама, що в поля й submit — вони стоять одним стовпчиком. */
.lg-passkey {
    width: 100%;
    height: var(--auth-control-h);
    margin-top: var(--s3);
    border: 1px solid var(--auth-border);
    border-radius: var(--radius);
    background: var(--auth-surface);
    color: var(--auth-text);
    font-family: inherit;
    font-size: var(--t-base);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.lg-passkey:hover { border-color: var(--border-strong); background: var(--auth-bg); }
.lg-passkey:focus-visible { outline: 2px solid var(--auth-brand); outline-offset: 2px; }
.lg-passkey[disabled] { opacity: .6; cursor: progress; }

#lg-passkey-error { margin-top: var(--s3); margin-bottom: 0; }

/* ── Помилка ──────────────────────────────────────────────────────────
   Місце під помилку зарезервоване завжди, тому її поява не зсуває
   форму. Текст один і той самий незалежно від того, що саме не
   зійшлось: сервер навмисно не каже, чи існує акаунт. */
.lg-error {
    margin: 0 0 var(--s4);
    padding: 10px 12px;
    border: 1px solid var(--auth-danger);
    border-radius: var(--radius);
    background: var(--auth-danger-soft);
    color: var(--auth-danger);
    font-size: var(--t-sm);
}

.lg-status {
    margin: 0 0 var(--s4);
    padding: 10px 12px;
    border: 1px solid var(--success);
    border-radius: var(--radius);
    background: var(--success-soft);
    color: var(--success);
    font-size: var(--t-sm);
}

/* Автозаповнення не має перефарбовувати текст у нечитаний (§11). */
.lg-input:-webkit-autofill,
.lg-input:-webkit-autofill:hover,
.lg-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-text);
    box-shadow: 0 0 0 1000px var(--auth-surface) inset;
}

/* ── Мобільна послідовність, орієнтир ≤900px ──────────────────────────
   Одна розмітка, переставлена order: другої копії DOM тут немає, і
   Telegram-посилання лишається одне (§19). */
.lg-mobile-lead { display: none; }

@media (max-width: 900px) {
    .lg-page {
        padding: 24px 16px;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }

    .lg-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "brand"
            "form"
            "mlead"
            "contact";
        grid-template-rows: auto;
        max-width: 460px;
    }

    /* Короткий рядок позиціювання йде ПІСЛЯ форми, як вимагає §5.2:
       щоденний вхід агента важливіший за розповідь про систему. Разом
       із контактом вони стоять поряд, тож нижня панель лишається
       однією, а не двома темними смугами через білу форму. */
    .lg-mobile-lead {
        grid-area: mlead;
        padding: 20px 20px 0;
        background: linear-gradient(160deg, color-mix(in srgb, var(--auth-brand-deep) 66%, var(--auth-brand)) 0%, color-mix(in srgb, var(--auth-brand-deep) 63%, var(--auth-brand)) 100%);
    }

    /* Порядок: бренд → форма → сенс → контакт. Щоденний вхід агента
       важливіший за розповідь про систему. */
    .lg-brand {
        order: 2;
        gap: var(--s3);
        padding: 24px 20px;
    }

    .lg-form-col {
        order: 1;
        padding: 24px 20px 20px;
    }

    /* Розгорнутий список вигод і довгий абзац на телефоні не потрібні —
       їх замінює одне речення. Це не приховування контенту заради
       краси: те саме повідомлення, коротшою фразою. */
    .lg-lead,
    .lg-benefits { display: none; }

    .lg-mobile-lead {
        display: block;
        margin: 0;
        font-size: var(--t-base);
        color: color-mix(in srgb, var(--auth-on-brand) 90%, transparent);
    }

    .lg-title { font-size: var(--t-lg); }
    /* Запас під помилку. За замовчуванням сторінка вміщалась на 390×844
       рівно, без жодного пікселя вільного — і плашка помилки одразу
       виносила її за екран. Ховати помилку за прокруткою не можна:
       людина, яка не увійшла, читає саме її. Тому два відступи форми на
       вузькому екрані менші — цього вистачає обом станам. */
    .lg-form-head { margin-bottom: var(--s4); }
    .lg-row { margin-bottom: var(--s4); }
    .lg-contact { padding: 16px 20px 20px; }
    .lg-contact__inner { padding-top: var(--s3); border-top: 0; }
    .lg-contact__text { display: none; }
    .lg-cta { width: 100%; justify-content: center; }
}

/* ── Щільність по ВИСОТІ ──────────────────────────────────────────────
   Ноутбук 1366×650 широкий, але низький: розкладка лишається у дві
   колонки, а відступи стискаються. Через це запити по висоті окремі
   від запитів по ширині — інакше на 1024×650 раптово вмикався б
   мобільний стек (§13). */
@media (max-height: 720px) {
    .lg-page { padding-top: 22px; padding-bottom: 22px; }
    .lg-brand,
    .lg-form-col { padding: 28px; }
    .lg-contact { padding: 0 28px 28px; }
    .lg-form-head { margin-bottom: var(--s4); }
    .lg-field { margin-bottom: var(--s3); }
    .lg-row { margin-bottom: var(--s4); }
    .lg-benefits { gap: var(--s2); }
}

@media (max-height: 650px) {
    .lg-page { padding-top: 14px; padding-bottom: 14px; }
    .lg-brand,
    .lg-form-col { padding: 20px; }
    .lg-contact { padding: 0 20px 20px; }
    .lg-brand { gap: var(--s3); }
    .lg-title { font-size: var(--t-lg); }
    .lg-lead { font-size: var(--t-base); }
    .lg-form-head { margin-bottom: var(--s3); }
    .lg-contact__inner { padding-top: var(--s3); }
}

/* ── Темна тема ───────────────────────────────────────────────────────
   Окремого перемикача для входу немає навмисно: у CRM механізму теми
   поки не існує взагалі, тому єдине чесне джерело — системна
   налаштування браузера (§12.2). Перевизначається лише блок змінних.

   Логотипи НЕ інвертуються фільтром: текстовий знак і далі лежить на
   світлій підкладці, як і в світлій темі. */
@media (prefers-color-scheme: dark) {
    .lg-page {
        /* Темних токенів у CRM ще немає, тому кожен відтінок тут
           виводиться з наявних, а не вигадується: фірмовий темно-синій
           змішується з чорнилом або з білим. Зʼявиться загальна темна
           палітра — цей блок замінюється на неї одним рухом. */
        --auth-bg: color-mix(in srgb, var(--primary-dark) 55%, var(--print-ink));
        --auth-surface: color-mix(in srgb, var(--primary-dark) 76%, var(--print-ink));
        --auth-border: color-mix(in srgb, var(--text-invert) 14%, var(--primary-dark));
        --auth-text: color-mix(in srgb, var(--text-invert) 92%, var(--primary-dark));
        --auth-muted: color-mix(in srgb, var(--text-invert) 62%, var(--primary-dark));
        --auth-soft: color-mix(in srgb, var(--primary) 24%, transparent);
        --auth-danger: color-mix(in srgb, var(--danger) 62%, var(--text-invert));
        --auth-danger-soft: color-mix(in srgb, var(--danger) 18%, transparent);
    }

    .lg-shell { box-shadow: none; }

    .lg-input:-webkit-autofill,
    .lg-input:-webkit-autofill:hover,
    .lg-input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--auth-text);
        box-shadow: 0 0 0 1000px var(--auth-surface) inset;
    }
}

/* ── Менше руху ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lg-page * {
        transition-duration: .01ms;
        animation-duration: .01ms;
    }
}

/* ── Вузько І низько водночас ─────────────────────────────────────────
   360×640 — єдиний обовʼязковий розмір, де стандартної мобільної
   щільності не вистачало: на 390×844 сторінка вміщалась рівно, а тут
   вилазила на 94px. Тому запит саме комбінований: звичайний телефон
   нічого не втрачає.

   Ріжемо за порядком §2 — спершу декоративне, і жодного контенту не
   ховаємо: обидва eyebrow тут справді зайві. Верхній повторює те, що
   вже сказано назвою і коротким рядком, а «Робочий простір агенції»
   стоїть за десять сантиметрів від логотипа тієї самої агенції.
   Висоти контролів і тач-таргети не чіпаються — вони недоторканні. */
@media (max-width: 900px) and (max-height: 700px) {
    .lg-page { padding-top: 10px; padding-bottom: 10px; }

    .lg-brand { padding: 14px 20px; gap: var(--s2); }
    .lg-eyebrow { display: none; }

    .lg-form-col { padding: 14px 20px; }
    .lg-form-eyebrow { display: none; }
    .lg-form-head { margin-bottom: var(--s2); }

    .lg-field { margin-bottom: 10px; }
    .lg-row { margin-bottom: var(--s3); }

    .lg-mobile-lead { padding: 14px 20px 0; font-size: var(--t-sm); }

    .lg-contact { padding: 0 20px 12px; }
    .lg-contact__inner { padding-top: var(--s2); }

    /* Помилка мусить вміщатись разом з усім іншим — це вимога §17.3,
       а не побажання: людина, яка не змогла увійти, не має ще й шукати
       текст помилки прокруткою. Тому на цьому розмірі ущільнюється
       все, що можна ущільнити, і НЕ ховається нічого зі змісту:
       заголовок стає врівень із текстом, підпис форми йде (його думку
       повторює кнопка), сама плашка стає компактнішою. */
    .lg-title { font-size: var(--t-base); }
    .lg-form-lead { display: none; }
    .lg-error,
    .lg-status { padding: 8px 10px; margin-bottom: var(--s3); }
    .lg-page { padding-top: 8px; padding-bottom: 8px; }
    .lg-brand { padding: 12px 20px; }
    .lg-mobile-lead { padding-top: 12px; }
}

/* Рядок із посиланням на заявку. Окремий від «запам'ятати / забули»,
   бо це дія іншого адресата: там — свій, тут — ще не наш. */
.lg-row--signup {
    margin-top: calc(var(--s3) * -1);
    margin-bottom: var(--s4);
    justify-content: flex-start;
}

/* Оферта під формою входу: помітна тим, хто її шукає, і не заважає решті. */
.lg-terms {
    margin: 16px 0 0;
    text-align: center;
    font-size: 12px;
}

.lg-terms a { color: var(--text-subtle); text-decoration: none; }
.lg-terms a:hover { color: var(--primary); text-decoration: underline; }