/* GSM OPT ID — вход, «Способы входа», подключение мессенджера (задача 77).
   Всё оформление — классы css/ui_kit.css (gsm-card, gsm-h1, gsm-note, gsm-badge, gsm-table, gsm-check, gsm-btn, gsm-link);
   здесь только раскладка и отступы из шкалы --gsm-s-*. */
html { touch-action: pan-x pan-y; } /* без масштабирования — как на всём сайте (m/shell.php) */
body { margin: 0; min-height: 100vh; background: var(--gsm-bg, #f6f7f9); color: var(--gsm-ink, #23282d); font-family: var(--gsm-font, 'Open Sans', Arial, sans-serif); -webkit-text-size-adjust: 100%; }
.gid { box-sizing: border-box; max-width: 440px; margin: 0 auto; padding: calc(var(--gsm-s-4, 16px) + env(safe-area-inset-top)) var(--gsm-s-4, 16px) var(--gsm-s-8, 32px); }
.gid--wide { max-width: 640px; }
/* Атрибут hidden сильнее раскладки: иначе display:flex у форм показывал скрытые поля */
.gid [hidden] { display: none !important; }
.gid-brand { display: flex; align-items: center; justify-content: space-between; margin: var(--gsm-s-1, 4px) 0 var(--gsm-s-5, 20px); }
.gid .gsm-card + .gsm-card { margin-top: var(--gsm-s-3, 12px); }
.gid form, .gid-stack { display: flex; flex-direction: column; gap: var(--gsm-s-3, 12px); }
.gid .gsm-h1 { margin: 0 0 var(--gsm-s-2, 8px); }
.gid .gsm-h2 { margin: var(--gsm-s-3, 12px) 0; }
.gid .gsm-text { margin: 0 0 var(--gsm-s-3, 12px); }
.gid .gsm-note { margin: 0; }
.gid .gsm-btn { width: 100%; }
.gid .gsm-table .gsm-btn { width: auto; }
.gid .gsm-btn.gsm-btn--icon { width: 32px; } /* кнопка-значок (глаз в поле пароля) — не во всю ширину */
@media (pointer: coarse) { .gid .gsm-btn.gsm-btn--icon { width: 44px; } }
.gid-block { display: block; width: 100%; min-height: 44px; margin-top: var(--gsm-s-2, 8px); text-align: center; }
.gid-choice { display: flex; align-items: center; gap: var(--gsm-s-3, 12px); min-height: 44px; }
.gid-choice > span { flex: 1; min-width: 0; }
.gid .gsm-table { width: 100%; }
.gid .gsm-table td:last-child { text-align: right; white-space: nowrap; }
.gid-qr { display: block; width: 200px; height: 200px; margin: var(--gsm-s-4, 16px) auto var(--gsm-s-1, 4px); image-rendering: pixelated; }
@media (pointer: coarse) { .gid-qr, .gid-qr-note { display: none; } }
/* Кнопки-ссылки: без рамки и фона браузера по умолчанию (вид — от gsm-link) */
.gid button.gsm-link { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
/* Логотип сайта (как в мобильной версии) */
.gid-logo { display: flex; align-items: center; }
.gid-logo img { display: block; height: 32px; width: auto; }
/* Тёмная тема — те же цвета, что у мобильной версии (m/css/base.css, html.theme-dark): только значения токенов */
html.theme-dark {
	--gsm-bg: #24282e; --gsm-card: #2e3339; --gsm-ink: #eef0f3; --gsm-ink-2: #bcc3cb; --gsm-ink-3: #959da8;
	--gsm-line: #40474f; --gsm-line-strong: #535a64; --gsm-link: #3aa7e0; --gsm-blue-soft: #254154; --gsm-blue-dark: #7cc4ea;
	--gsm-green-soft: #173024; --gsm-red-soft: #3a2123; --gsm-amber-soft: #372d16; --gsm-amber-ink: #f2b53a; --gsm-red-ink: #f06b6b;
	color-scheme: dark;
}
html.theme-dark .gid-logo img { filter: brightness(0) invert(1); }
html.theme-dark .gsm-input { background: var(--gsm-bg); color: var(--gsm-ink); }
/* «Войти» появляется, когда введён пароль: высота, прозрачность и сдвиг за 0,3 с (как все анимации сайта).
   Пока скрыта — не занимает места (отрицательный отступ гасит промежуток формы). */
.gid-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(-6px); margin-bottom: calc(-1 * var(--gsm-s-3, 12px));
	transition: grid-template-rows .3s ease, opacity .3s ease, transform .3s ease, margin-bottom .3s ease; }
.gid-reveal > div { min-height: 0; overflow: hidden; }
.gid-reveal.is-on { grid-template-rows: 1fr; opacity: 1; transform: none; margin-bottom: 0; }
.gid-reveal .gsm-btn { width: 100%; }
@media (prefers-reduced-motion: reduce) { .gid-reveal { transition: none; } }
/* Официальные логотипы мессенджеров на кнопках */
.gid-brand-ico { width: 22px; height: 22px; flex: none; }
.gid-hold { font-variant-numeric: tabular-nums; opacity: .85; }

/* «Обновить данные из Telegram / MAX?»: старое и новое фото в строку (задание №79) */
.gid-ava-swap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Привычный порядок входа (21.10.2026): «Продолжить» → черта «или» → мессенджеры → мелким запасной путь */
.gid-or { display: flex; align-items: center; gap: var(--gsm-s-3, 12px); margin: var(--gsm-s-1, 4px) 0; color: var(--gsm-ink-3, #949ba5); font-size: 13px; }
.gid-or::before, .gid-or::after { content: ''; flex: 1 1 0; height: 1px; background: var(--gsm-line, #e4e8ec); }
.gid-or--thin { gap: 0; margin-top: var(--gsm-s-2, 8px); }
.gid-small { font-size: 13px; }