/* Стили страницы auth/login.html.
   Вынесены из инлайнового <style> в шаблоне: пока правила лежали
   в разметке, изменение шкалы в слое их не касалось. */
/* ── Экран входа/регистрации по хендоффу design_handoff_login (система Pulse) ──
   Токены из README §5-7 — источник истины. Префикс .lg- чтобы не конфликтовать
   с общими стилями base.html. Telegram-кнопка намеренно отсутствует (method=email). */
/* Имена --lg-* сохранены (на них завязана вся раскладка экрана), но значения
   теперь приходят из слоя: вход обязан быть той же палитры, что и остальной
   продукт. Свои остались только коралловый акцент и атмосферные градиенты. */
.lg-root {
    --lg-grad1: color-mix(in srgb, var(--ui-accent) 6%, transparent);
    --lg-grad2: rgba(255,90,61,0.04);
    --lg-coral: #FF5A3D; --lg-coral-soft: #FFEBE6;
    position: fixed; inset: 0; overflow-y: auto;
    background: var(--ui-bg);
    font-family: 'Manrope', -apple-system, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    z-index: 10;
}
/* В тёмной теме поверхности и текст меняет сам слой, поэтому здесь остаётся
   только то, что от него не зависит: коралл и плотность градиентов. */
html.dark-theme .lg-root {
    --lg-grad1: color-mix(in srgb, var(--ui-accent) 11%, transparent);
    --lg-grad2: rgba(255,90,61,0.07);
    --lg-coral: #FF6B4F; --lg-coral-soft: rgba(255,107,79,0.16);
}
/* Колонка проявляется, когда скрипт определил режим (вход/регистрация): иначе
   на долю секунды видна форма, которую тут же подменяют. Показ — card.style.opacity. */
.lg-fade { opacity: 0; transition: opacity 150ms var(--ui-ease); }
/* Сообщение вместо формы, когда вход из Telegram не удался */
.lg-centered { margin: auto; text-align: center; }
.lg-atmo {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(65% 40% at 50% -5%, var(--lg-grad1), transparent 70%),
        radial-gradient(60% 45% at 90% 105%, var(--lg-grad2), transparent 70%);
}
.lg-col {
    position: relative; min-height: 100%;
    max-width: 402px; margin: 0 auto;
    display: flex; flex-direction: column;
    padding: 44px var(--ui-s-5) var(--ui-s-5);
    padding-top: max(44px, env(safe-area-inset-top, 0px));
    box-sizing: border-box;
}
/* Бренд */
.lg-logo {
    width: 76px; height: 76px; border-radius: 24px; margin: 0 auto 20px;
    background: var(--ui-surface); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--ui-accent) 24%, transparent),
                0 0 0 1px color-mix(in srgb, var(--ui-accent) 8%, transparent);
}
.lg-logo span { font-size: 46px; font-weight: 800; color: var(--ui-accent); letter-spacing: -0.04em; margin-top: -2px; }
.lg-h1 { font-size: var(--ui-t-2xl); font-weight: 800; color: var(--ui-text); letter-spacing: -0.03em; line-height: 1.1; text-align: center; margin: 0; }
.lg-sub { font-size: var(--ui-t-md); font-weight: 600; color: var(--ui-text-3); line-height: 1.45; max-width: 250px; margin: var(--ui-s-2) auto 0; text-align: center; }
.lg-spacer { flex: 1; min-height: var(--ui-s-5); }
/* Сегмент-контрол */
/* Сегмент «Вход / Регистрация» — `.ui-tabs` из слоя. Здесь была его копия
   со своими значениями: радиус 14/11, кегль 14.5 и высота 40 — все три мимо
   шкалы. Осталась только ширина ячеек: две вкладки ровно пополам. */
.lg-seg { margin-bottom: var(--ui-s-4); }
/* Поля */
.lg-form { display: flex; flex-direction: column; gap: var(--ui-s-3); }
/* Подпись поля — `.ui-field-label` из слоя, отступ до контрола даёт gap у `.ui-field`. */
.lg-field {
    display: flex; align-items: center; height: 52px;
    background: var(--ui-surface); border: 1.5px solid var(--ui-line); border-radius: var(--ui-r-lg);
    padding: 0 var(--ui-s-4); box-shadow: var(--ui-shadow-sm);
    transition: border-color 140ms, box-shadow 140ms;
}
.lg-field:focus-within { border-color: var(--ui-accent); box-shadow: 0 0 0 4px var(--ui-accent-soft); }
.lg-field input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-family: inherit; font-size: var(--ui-t-lg); font-weight: 600; color: var(--ui-text); letter-spacing: 0.01em;
}
.lg-field input::placeholder { color: var(--ui-text-3); }
.lg-eye { border: none; background: none; cursor: pointer; padding: var(--ui-s-1); color: var(--ui-text-3); display: flex; }
/* Запомнить / забыли */
.lg-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 3px; }
.lg-check { display: flex; align-items: center; gap: var(--ui-s-2); cursor: pointer; }
/* Галочку рисует `.ui-check` из слоя. Ручная пара «скрытый input + span со svg»
   забирала чекбокс у клавиатуры: display:none выкидывает его из таб-ордера. */
.lg-check span { font-size: var(--ui-t-md); font-weight: 700; color: var(--ui-text-2); }
.lg-forgot { font-size: var(--ui-t-md); font-weight: 700; color: var(--ui-accent-hover); text-decoration: none; }
/* Primary-кнопка целиком из слоя (.ui-btn--primary --lg --block --glow).
   Своим остался только облик экрана входа: радиус как у полей и та же высота 52px,
   иначе CTA оказывается ниже поля над ним. */
.lg-primary { min-height: 52px; border-radius: var(--ui-r-lg); font-weight: 800; }
/* Регистрация: роли */
.lg-promo { font-size: var(--ui-t-md); font-weight: 600; color: var(--ui-text-2); line-height: 1.5; margin: 0 0 var(--ui-s-4); }
.lg-roles { display: flex; flex-direction: column; gap: var(--ui-s-3); }
.lg-role {
    display: flex; align-items: center; gap: var(--ui-s-4); width: 100%; text-align: left;
    background: var(--ui-surface); border: 1.5px solid var(--ui-line); border-radius: var(--ui-r-lg);
    padding: var(--ui-s-4); cursor: pointer; box-shadow: var(--ui-shadow-sm);
    font-family: inherit; transition: transform 120ms, border-color 140ms;
    text-decoration: none;
}
.lg-role:active { transform: scale(0.99); }
.lg-role-icon {
    width: 46px; height: 46px; border-radius: var(--ui-r-md); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.lg-role-icon.coach { background: var(--ui-accent-soft); color: var(--ui-accent); }
.lg-role-icon.client { background: var(--lg-coral-soft); color: var(--lg-coral); }
.lg-role-body { flex: 1; min-width: 0; }
.lg-role-title { font-size: var(--ui-t-lg); font-weight: 800; color: var(--ui-text); letter-spacing: -0.01em; }
.lg-role-sub { font-size: var(--ui-t-sm); font-weight: 600; color: var(--ui-text-3); line-height: 1.35; margin-top: 2px; }
.lg-role-arrow { color: var(--ui-text-3); flex-shrink: 0; }
.lg-mode-back { margin-top: var(--ui-s-4); border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: var(--ui-t-sm); font-weight: 700; color: var(--ui-text-3); padding: var(--ui-s-2) 2px; }
/* Футер + ошибка */
.lg-footer { font-size: var(--ui-t-xs); font-weight: 600; color: var(--ui-text-3); line-height: 1.5; max-width: 290px; margin: var(--ui-s-5) auto 0; text-align: center; }
.lg-footer .lg-legal-link { color: var(--ui-text-3); text-decoration: underline; text-underline-offset: 2px; }
.lg-error { display: none; font-size: var(--ui-t-sm); font-weight: 700; color: var(--lg-coral); margin-top: 2px; }
.lg-error.show { display: block; }
/* Вход через Telegram (Login Widget) */
.lg-or { display: flex; align-items: center; gap: var(--ui-s-3); margin: var(--ui-s-4) 0 2px; }
.lg-or::before, .lg-or::after { content: ''; flex: 1; height: 1px; background: var(--ui-line); }
.lg-or span { font-size: var(--ui-t-xs); font-weight: 700; color: var(--ui-text-3); letter-spacing: 0.02em; }
.lg-tg-hint { font-size: var(--ui-t-xs); font-weight: 600; color: var(--ui-text-3); text-align: center; margin: var(--ui-s-2) auto 0; max-width: 280px; line-height: 1.4; }
/* Вход через мессенджеры — ряд компактных кнопок. Раньше это были две кнопки
   во всю ширину, каждая со своим абзацем подсказки: почти 260px экрана на то,
   что читается по логотипу. Кнопки светлые, чтобы не спорить с синей «Войти». */
.lg-soc { display: flex; gap: var(--ui-s-3); margin-top: var(--ui-s-4); }
.lg-soc__btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--ui-s-2);
    padding: var(--ui-s-3); border: none; border-radius: var(--ui-r-lg); cursor: pointer;
    background: var(--ui-surface); font-family: inherit; font-size: var(--ui-t-md); font-weight: 800;
    letter-spacing: 0.005em;
    box-shadow: var(--ui-shadow-sm), inset 0 0 0 1px var(--ui-line);
    transition: transform 120ms, box-shadow 160ms, opacity 140ms;
}
.lg-soc__btn:hover { box-shadow: var(--ui-shadow-sm), inset 0 0 0 1px var(--ui-line); }
.lg-soc__btn:active { transform: scale(0.985); }
.lg-soc__btn:disabled { opacity: 0.75; cursor: default; }
.lg-soc__btn svg { flex-shrink: 0; }
.lg-soc__btn--tg { color: #229ED9; }
.lg-soc__btn--max { color: #5B3FE8; }
html.dark-theme .lg-soc__btn--tg { color: #52BEF0; }
html.dark-theme .lg-soc__btn--max { color: #A78BFA; }
/* Пока ждём подтверждения, в кнопке висит длинный статус — соседнюю убираем,
   активная забирает всю строку. */
.lg-soc__btn--muted { display: none; }