/* mercury-forms.css — единый ртутный стиль форм (логин, регистрация и далее).
 * Стеклянная панель + скруглённые поля/кнопки в палитре ртути.
 * Подключается на страницах с формами вместе с фоном (mercury_background.php).
 * Один источник: меняешь тут — меняется на всех формах сайта. */

/* Дизайн-токены НЕ дублируются здесь — единый источник в
 * partials/mercury_background.php (:root). Этот файл только использует
 * var(--hg-*). Так стекло и палитра везде одной плотности. */

/* центрирование формы на весь экран — 100dvh (dynamic viewport) вместо 100vh,
   чтобы на мобильных не переполнялось под адресной строкой. Если карточка
   всё же выше экрана (совсем короткие устройства) — прокручивается САМА
   обёртка, а не body, страница остаётся «прибитой». */
.hg-form-wrap {
    box-sizing: border-box; /* padding ВНУТРЬ высоты, иначе обёртка выше экрана */
    /* 100svh = НАИМЕНЬШАЯ стабильная высота вьюпорта (как будто адресная строка
       браузера всегда видна). ОБЁРТКА — сам скроллер (overflow-y:auto): длинная
       форма листается ВНУТРИ неё, а body неподвижен → фон стоит. Карточка внутри
       центрируется через margin:auto (см. .hg-card) — по центру когда влезает, и
       оба конца достижимы когда выше экрана (это чинит «мёртвую» панель: процентный
       max-height на флекс-элементе был ненадёжен и клипался). */
    height: 100vh;          /* фолбэк для старых браузеров без svh */
    height: 100svh;
    overflow-y: auto;
    overscroll-behavior: contain;      /* прокрутка не «пробивается» в body → фон стоит */
    -webkit-overflow-scrolling: touch; /* инерционный тач-скролл на iOS */
    touch-action: pan-y;               /* явно разрешаем вертикальный тач-скролл */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:
        max(clamp(14px, 3.5vh, 28px), env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(clamp(14px, 3.5vh, 28px), env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));
    font-family: var(--font-body);
}

/* стеклянная панель формы */
.hg-card {
    box-sizing: border-box;
    width: min(400px, 92vw);
    /* margin:auto в flex-column со скроллящейся обёрткой = центр по вертикали, когда
       карточка ниже экрана, и ОБА конца достижимы, когда выше (без клипа верха). */
    margin: auto;
    flex-shrink: 0;               /* не сжимать карточку — пусть обёртка её скроллит */
    background: var(--hg-glass);
    border: 1px solid var(--hg-glass-edge);
    border-top: 1px solid var(--hg-glass-lip);
    border-radius: 28px;
    padding: clamp(20px, 4vh, 40px) clamp(22px, 5vw, 34px);
    backdrop-filter: blur(16px) saturate(0.9);
    -webkit-backdrop-filter: blur(16px) saturate(0.9);
    box-shadow:
        0 24px 70px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(232,236,241,0.07);
}
/* тонкий скролл — в тон ртути (скроллер теперь обёртка) */
.hg-form-wrap { scrollbar-width: thin; scrollbar-color: rgba(160,170,182,0.3) transparent; }
.hg-form-wrap::-webkit-scrollbar { width: 6px; }
.hg-form-wrap::-webkit-scrollbar-thumb { background: rgba(160,170,182,0.3); border-radius: 3px; }

/* шапка формы */
.hg-card .hg-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.5rem, 4.6vh, 1.9rem);
    letter-spacing: 0.16em;
    color: var(--hg-silver);
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}
.hg-card .hg-subtitle {
    font-size: 0.78rem;
    color: var(--hg-mist);
    letter-spacing: 0.05em;
    text-align: center;
    margin: clamp(2px, 0.8vh, 4px) 0 clamp(14px, 3.2vh, 26px);
}

/* строка поля */
.hg-card .form-row { margin-bottom: clamp(10px, 2.2vh, 18px); }
.hg-card label {
    display: block;
    font-size: 0.78rem;
    color: var(--hg-silver-dim);
    letter-spacing: 0.04em;
    margin-bottom: clamp(4px, 1vh, 7px);
}

/* поля ввода — скруглённые, матовые */
.hg-card input[type="text"],
.hg-card input[type="email"],
.hg-card input[type="password"],
.hg-card input[type="date"] {
    width: 100%;
    box-sizing: border-box;
    padding: clamp(10px, 1.6vh, 13px) 16px;
    background: var(--hg-field);
    border: 1px solid rgba(160,170,182,0.16);
    border-radius: 14px;
    color: var(--hg-silver);
    font-size: 0.98rem;
    font-family: var(--font-body);
    outline: none;
    transition: all 0.25s var(--ease-hg);
    -webkit-tap-highlight-color: transparent;
}
.hg-card input::placeholder { color: rgba(138,146,156,0.55); }
.hg-card input:focus {
    border-color: var(--hg-silver);
    background: var(--hg-field-lit);
    box-shadow: 0 0 0 3px rgba(200,205,212,0.08);
}
/* иконка календаря в date — под тёмную тему */
.hg-card input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

/* чекбокс-строка (согласие) */
.hg-card .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: clamp(12px, 2.4vh, 22px);
    font-size: 0.82rem;
    color: var(--hg-silver-dim);
    line-height: 1.5;
}
.hg-card .form-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    border: 1.5px solid var(--hg-mist);
    border-radius: 6px;
    background: var(--hg-field);
    cursor: pointer;
    position: relative;
    transition: all 0.2s var(--ease-hg);
}
.hg-card .form-check input[type="checkbox"]:checked {
    border-color: var(--hg-sheen);
    background: rgba(40,50,62,0.9);
}
.hg-card .form-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 10px;
    border: solid var(--hg-sheen);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.hg-card .form-check a { color: var(--hg-silver); border-bottom: 1px solid rgba(212,217,223,0.3); text-decoration: none; }

/* кнопка submit — стеклянная, светится при наведении */
.hg-card button[type="submit"] {
    width: 100%;
    padding: clamp(11px, 1.9vh, 14px);
    background: linear-gradient(135deg, rgba(60,72,86,0.9), rgba(40,50,62,0.9));
    border: 1px solid var(--hg-glass-lip);
    border-radius: 16px;
    color: var(--hg-sheen);
    font-size: 1rem;
    font-family: var(--font-body);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.28s var(--ease-hg);
    box-shadow: inset 0 1px 0 rgba(232,236,241,0.1);
}
.hg-card button[type="submit"]:hover {
    border-color: var(--hg-sheen);
    box-shadow: 0 0 22px rgba(200,205,212,0.25), inset 0 1px 0 rgba(232,236,241,0.15);
    transform: translateY(-1px);
}
.hg-card button[type="submit"]:active { transform: translateY(0) scale(0.99); }

/* нижняя ссылка (нет аккаунта / уже есть аккаунта) */
.hg-card .footer-link {
    text-align: center;
    margin-top: clamp(12px, 2vh, 20px);
    font-size: 0.85rem;
    color: var(--hg-mist);
}
.hg-card .footer-link a {
    color: var(--hg-silver-dim);
    text-decoration: none;
    border-bottom: 1px solid rgba(139,146,156,0.3);
    transition: color 0.2s var(--ease-hg);
}
.hg-card .footer-link a:hover { color: var(--hg-silver); }

/* сообщения: ошибка / успех — мягкие, в тон, без кричащего красного */
.hg-card .alert {
    padding: 11px 15px;
    border-radius: 12px;
    font-size: 0.85rem;
    margin-bottom: clamp(12px, 2.4vh, 18px);
    line-height: 1.45;
}
.hg-card .alert.error {
    background: rgba(120,60,66,0.25);
    border: 1px solid rgba(180,120,126,0.3);
    color: #e0b8bc;
}
.hg-card .alert.success {
    background: rgba(60,90,72,0.25);
    border: 1px solid rgba(120,160,134,0.3);
    color: #b8d8c4;
}
.hg-card .alert a { color: inherit; border-bottom: 1px solid currentColor; text-decoration: none; }

/* honeypot — скрыт */
.hg-hp { position: absolute; left: -9999px; top: -9999px; }

@media (prefers-reduced-motion: reduce) {
    .hg-card *, .hg-card *::before, .hg-card *::after { transition: none !important; }
}
@media (max-width: 600px) {
    .hg-card { border-radius: 24px; }
}
/* Короткие экраны (низкие телефоны в ландшафте, компактные вьюпорты):
   дожимаем ритм, чтобы длинные формы (регистрация) влезали без прокрутки. */
@media (max-height: 640px) {
    .hg-card .hg-subtitle { margin-bottom: clamp(8px, 2vh, 14px); }
    .hg-card .form-row { margin-bottom: clamp(7px, 1.6vh, 12px); }
    .hg-card .hg-title { letter-spacing: 0.12em; }
}

/* ═══════════════════════════════════════════════════════════════════
   UX-ПОЛИРОВКА ПОД «РТУТНЫЙ» КАНОН — общий файл, достаётся login/register
   и всем будущим формам сразу. Всё уважает prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

/* 1) Вход карточки — «ртуть оседает»: мягкий подъём + проявление */
@keyframes hg-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
.hg-card { animation: hg-card-in 0.62s var(--ease-hg) both; }

/* 2) Ртутный отблеск по вордмарку: серебристый блик медленно течёт по «Зеркало».
   Текст залит градиентом (clip:text); в reduced-motion — ровное серебро. */
.hg-card .hg-title {
    background-image: linear-gradient(100deg,
        var(--hg-silver-dim) 0%, var(--hg-sheen) 42%, #ffffff 50%,
        var(--hg-sheen) 58%, var(--hg-silver-dim) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: hg-sheen 7.5s linear infinite;
}
@keyframes hg-sheen { to { background-position: -250% 0; } }

/* 3) Жидкий блик по кнопке при наведении — «ртутное отражение» проходит поперёк */
.hg-card button[type="submit"] { position: relative; overflow: hidden; }
.hg-card button[type="submit"]::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 32%,
        rgba(232,236,241,0.20) 48%, rgba(232,236,241,0.04) 56%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.75s var(--ease-hg);
    pointer-events: none;
}
.hg-card button[type="submit"]:hover::before { transform: translateX(120%); }

/* 4) Фокус-строка: подпись оживает серебром при работе с полем */
.hg-card .form-row:focus-within label { color: var(--hg-silver); }

@media (prefers-reduced-motion: reduce) {
    .hg-card { animation: none; }
    .hg-card .hg-title {
        animation: none;
        -webkit-text-fill-color: var(--hg-silver);
        color: var(--hg-silver);
    }
    .hg-card button[type="submit"]::before { display: none; }
}