/* lh-auth.css — экраны входа, регистрации и восстановления пароля
 * (Ева, 15.09.2026; переведено на кит 2.0 15.10.2026 по задаче Гузель).
 *
 * Поверх кита: lh-tokens.css (Onest самохостом, палитра ролей, шкала) и
 * lh-components.css (.lh-btn). Здесь только оболочка экрана и поле ввода —
 * своего компонента поля в ките ещё нет, геометрия поля взята от кнопки L,
 * с которой оно стоит в одной колонке. Ни одного цвета и кегля числом:
 * только var(); размеры в rem, в px лишь толщина линий (units.md).
 *
 * Принцип экрана прежний: одна центральная колонка, одно главное действие
 * (`btn/primary`), вход через сервис — свой вид кита `btn/social`,
 * «Восстановить пароль» и «Зарегистрироваться» — ссылки, а не заголовки.
 */

.lh-auth {
	/* Старые имена ролей — для lh-public.css (витрина и её выдача живут на
	   этой же оболочке). Значения теперь из палитры кита. */
	--ui-brand: var(--lh-accent-base);
	--ui-brand-strong: var(--lh-accent-hover);
	--ui-text: var(--lh-fg-primary);
	--ui-muted: var(--lh-fg-muted);
	--ui-line: var(--lh-line-base);
	--ui-surface: var(--lh-bg-page);

	--lh-auth-col: 27.5rem;        /* ширина колонки формы */
	--lh-auth-field-gap: calc(1.125rem - var(--lh-auth-squeeze) * 0.0444); /* между полями: 18 → 10 px */
	--lh-auth-label-gap: 0.375rem; /* подпись → поле: ближе, чем поле → поле */

	/* Заголовок экрана (Гузель, 16.10.2026: «чуть уменьшить»). Тот же h1
	   кита, но с потолком 32 px вместо 40: на телефоне по-прежнему 24 px,
	   растёт так же, просто раньше упирается. */
	--lh-auth-title: min(var(--lh-type-h1), 2rem);

	/* Сжатие по высоте (Гузель, 16.10.2026: на ноутбуке 1280×620 вход не
	   помещался — 740 px при окне 620). Одна величина: 0 на окне от 800 px
	   (50rem) в высоту и выше — вид прежний; растёт до 180 px (11.25rem) к
	   окну 620 px. Крупные отступы экрана вычитают из своего значения долю
	   сжатия, поэтому сжимаются плавно и одновременно, без брейкпоинта.
	   Кегли, поля и кнопки не сжимаются — только воздух между блоками. */
	--lh-auth-squeeze: clamp(0rem, calc(50rem - 100vh), 11.25rem);
	--lh-auth-squeeze: clamp(0rem, calc(50rem - 100svh), 11.25rem);

	min-height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	font: var(--lh-weight-text) var(--lh-type-body-m)/var(--lh-line) var(--lh-font);
	color: var(--lh-fg-primary);
	background: var(--lh-bg-page);
	-webkit-font-smoothing: antialiased;
}
.lh-auth *, .lh-auth *::before, .lh-auth *::after { box-sizing: border-box; }
.lh-auth b { font-weight: var(--lh-weight-head); }

/* Ссылки в тексте — как текстовая кнопка кита: в покое основной цвет и серое
   подчёркивание, под курсором зелёные (links.md). :not(.lh-btn) — кнопка-
   ссылка свои цвета берёт из компонента. */
.lh-auth a:not(.lh-btn):not(.lh-auth-logo) {
	color: var(--lh-fg-primary);
	text-decoration: underline;
	text-decoration-color: var(--lh-fg-muted);
	text-underline-offset: 0.2em;
	transition: color var(--lh-fast) var(--lh-ease), text-decoration-color var(--lh-fast) var(--lh-ease);
}
.lh-auth a:not(.lh-btn):not(.lh-auth-logo):hover {
	color: var(--lh-accent-base);
	text-decoration-color: var(--lh-accent-base);
}
.lh-auth a:not(.lh-btn):focus-visible {
	outline: 3px solid var(--lh-focus-ring);
	outline-offset: 2px;
	border-radius: var(--lh-radius-s);
}

/* Шапка: логотип и переход на соседний экран (кнопка S «с обводкой»). */
.lh-auth-top {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	max-width: 65rem;
	margin: 0 auto;
	padding: calc(1.125rem - var(--lh-auth-squeeze) * 0.0444) 1.25rem; /* 18 → 10 px */
}
.lh-auth .lh-auth-logo {
	display: inline-flex;
	align-items: baseline;
	gap: 0.375rem;
	font: var(--lh-weight-head) var(--lh-type-h3)/var(--lh-line) var(--lh-font);
	letter-spacing: -0.01em;
	color: var(--lh-fg-primary);
	text-decoration: none;
}
.lh-auth .lh-auth-logo:hover { color: var(--lh-fg-primary); text-decoration: none; }
.lh-auth-logo b { color: var(--lh-accent-base); }
.lh-auth-top-link { margin-left: auto; }

/* Колонка */
.lh-auth-wrap {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	/* Логотип → заголовок (Гузель, 04.11.2026: +50 %). Расстояние = низ шапки
	   + верх колонки; верх колонки добирает его до полутора прежних:
	   было 42 → 18 px, стало 63 → 27 px (сжатие по высоте сохраняется). */
	padding: calc((2.625rem - var(--lh-auth-squeeze) * 0.1333) * 1.5 - (1.125rem - var(--lh-auth-squeeze) * 0.0444)) 1.25rem calc(4rem - var(--lh-auth-squeeze) * 0.3333); /* снизу 64 → 4 px */
}
.lh-auth-col { width: 100%; max-width: var(--lh-auth-col); }

.lh-auth-head { margin: 0 -3rem calc(1.5rem - var(--lh-auth-squeeze) * 0.0667); text-align: center; } /* 24 → 12 px */
/* Шапка экрана шире формы на 3rem с каждой стороны: h1 кита на компьютере
   40 px, и «Вход в личный кабинет» в ширину формы не помещается. На телефоне
   заголовок 24 px — шапка по ширине колонки. */
/* Иконка над заголовком не используется: на «Новом пароле» её нет, а конверт
   «Письма отправлено» стоит в карточке справа от текста (Гузель, 16.10.2026). */
.lh-auth-head-ico { display: block; margin: 0 auto 0.75rem; color: var(--lh-ico-fg-active); }
.lh-auth-head h1 {
	margin: 0;
	font: var(--lh-weight-text) var(--lh-auth-title)/var(--lh-type-h1-line) var(--lh-font);
	text-wrap: balance;
}
.lh-auth-head p {
	margin: 0.5rem auto 0;
	max-width: 30em;
	color: var(--lh-fg-muted);
	text-wrap: balance;
}

/* Карточка — `card/base` кита: белая, рамка line/base, без тени. */
.lh-auth-card {
	background: var(--lh-bg-surface);
	border: 1px solid var(--lh-line-base);
	border-radius: var(--lh-card-radius-l);
	padding: calc(var(--lh-card-pad-y-l) - var(--lh-auth-squeeze) * 0.0444); /* 24 → 16 px */
}

/* «Письмо отправлено»: конверт внутри карточки, справа от основного текста,
   по верху его первой строки (Гузель, 16.10.2026). */
.lh-auth-msg { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lh-card-gap); }
.lh-auth-msg p { margin: 0; text-wrap: balance; } /* без «почту.» одной на строке */
.lh-auth-msg-ico { flex: none; margin-top: calc((var(--lh-line) * 1em - var(--lh-ico-size-l)) / 2); color: var(--lh-ico-fg-active); }

/* Подпись поля, скрытая с экрана, но доступная диктору (вход, Гузель, 16.10.2026). */
.lh-auth-field label.lh-auth-label--hidden {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Поля. Геометрия от кнопки L (высота, радиус, кегль), цвета из палитры:
   рамка line/strong, под курсором fg/muted, в фокусе accent/strong и общее
   кольцо кабинета — как поле «Моих дел». */
.lh-auth-field + .lh-auth-field { margin-top: var(--lh-auth-field-gap); }
.lh-auth-field label.lh-auth-label {
	display: block;
	margin-bottom: var(--lh-auth-label-gap);
	font: var(--lh-weight-head) var(--lh-type-body-s)/var(--lh-line) var(--lh-font);
	color: var(--lh-fg-primary);
}
/* Звёздочка обязательного поля: цвет ошибки, для экранного диктора её
   заменяет атрибут required у поля. */
.lh-auth-req { color: var(--lh-state-danger); }
.lh-auth-field .lh-input {
	display: block;
	width: 100%;
	min-height: var(--lh-btn-h-l);
	padding: var(--lh-btn-py) 1rem;
	font: var(--lh-weight-text) var(--lh-type-body-m)/var(--lh-line) var(--lh-font); /* меньше 16 px — iOS зумит страницу на фокусе */
	color: var(--lh-fg-primary);
	background: var(--lh-bg-surface);
	border: 1px solid var(--lh-line-strong);
	border-radius: var(--lh-btn-radius-l);
	outline: none;
	transition: border-color var(--lh-fast) var(--lh-ease);
	-webkit-appearance: none;
	appearance: none;
}
.lh-auth-field .lh-input::placeholder { color: var(--lh-fg-muted); }
.lh-auth-field .lh-input:hover { border-color: var(--lh-fg-muted); }
.lh-auth-field .lh-input:focus { border-color: var(--lh-accent-strong); }
.lh-auth-field .lh-input:focus-visible { outline: 3px solid var(--lh-focus-ring); outline-offset: 2px; }
.lh-auth-field .lh-input.is-bad,
.lh-auth-field .lh-input[aria-invalid="true"] { border-color: var(--lh-state-danger); }
.lh-auth-hint,
.lh-auth-err {
	margin: var(--lh-auth-label-gap) 0 0;
	font: var(--lh-weight-text) var(--lh-type-body-s)/var(--lh-line) var(--lh-font);
	color: var(--lh-fg-muted);
}
.lh-auth-err { color: var(--lh-state-danger); }

/* Общая ошибка формы — плашка с тоном danger. */
.lh-auth-alert {
	margin-bottom: 1.25rem;
	padding: var(--lh-card-pad-y-s) var(--lh-card-pad-x-s);
	border-left: 3px solid var(--lh-state-danger);
	border-radius: var(--lh-radius-s);
	background: var(--lh-state-danger-soft);
	color: var(--lh-fg-primary);
	font: var(--lh-weight-text) var(--lh-type-body-s)/var(--lh-line) var(--lh-font);
}
.lh-auth-alert p { margin: 0; }
.lh-auth-alert p + p { margin-top: 0.25rem; }

/* Иконка в поле (Гузель, 16.10.2026): конверт у почты, замок у пароля.
   Слева внутри поля, 20 px, цвет иконки в покое; в фокусе поля — зелёная,
   как его рамка. Поле получает отступ слева под иконку. Иконка не ловит
   клик (pointer-events: none) — нажатие проходит в поле. */
.lh-auth-input { position: relative; }
.lh-auth-input .lh-auth-ico {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--lh-ico-fg);
	pointer-events: none;
	transition: color var(--lh-fast) var(--lh-ease);
}
/* Отступ под иконку — только если она есть: в активации у полей пароля
   замка нет, а глазик есть (04.11.2026). */
.lh-auth-field .lh-auth-ico ~ .lh-input { padding-left: calc(1rem + var(--lh-ico-size-m) + 0.625rem); }
.lh-auth-input:focus-within .lh-auth-ico { color: var(--lh-ico-fg-active); }

/* Глазик в поле пароля (Гузель, 04.11.2026): справа внутри поля, квадрат
   высотой с поле — палец попадает и на телефоне. Иконка того же размера и
   цвета, что замок слева; под курсором и когда пароль открыт — зелёная. */
.lh-auth-field .lh-auth-input--pass .lh-input { padding-right: var(--lh-btn-h-l); }
.lh-pass-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lh-btn-h-l);
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--lh-btn-radius-l);
	background: none;
	color: var(--lh-ico-fg);
	cursor: pointer;
	transition: color var(--lh-fast) var(--lh-ease);
}
.lh-pass-toggle[hidden] { display: none; }
.lh-pass-toggle:hover,
.lh-pass-toggle[aria-pressed="true"] { color: var(--lh-ico-fg-active); }
.lh-pass-toggle:focus-visible { outline: 3px solid var(--lh-focus-ring); outline-offset: -3px; }
.lh-pass-toggle__hide,
.lh-pass-toggle[aria-pressed="true"] .lh-pass-toggle__show { display: none; }
.lh-pass-toggle[aria-pressed="true"] .lh-pass-toggle__hide { display: block; }
/* Edge рисует свой глазик в поле пароля — второй не нужен. */
.lh-auth-input--pass .lh-input::-ms-reveal { display: none; }

/* Согласие */
.lh-auth-check {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
	margin-top: calc(1.25rem - var(--lh-auth-squeeze) * 0.0444); /* 20 → 12 px */
	font: var(--lh-weight-text) var(--lh-type-body-s)/var(--lh-line) var(--lh-font);
	color: var(--lh-fg-muted);
}
.lh-auth-check input {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.125rem 0 0;
	flex: none;
	accent-color: var(--lh-accent-strong);
}
/* Не отмечено при отправке — красная рамка, как у поля с ошибкой. */
.lh-auth-check input[aria-invalid="true"] { outline: 2px solid var(--lh-state-danger); outline-offset: 2px; }

/* Кнопки — компонент кита `.lh-btn` размера L; здесь только место в колонке:
   во всю ширину, главная — с отступом от последнего поля. */
.lh-auth .lh-auth-btn { display: flex; width: 100%; }
.lh-auth #lh-vk-onetap[hidden] { display: none !important; }
.lh-auth #lh-vk-onetap:not([hidden]) + .lh-auth-btn--vk { display: none !important; }
.lh-auth .lh-auth-btn--main { margin-top: calc(1.5rem - var(--lh-auth-squeeze) * 0.0556); } /* 24 → 14 px */
.lh-auth-btn--vk svg { width: 1.25rem; height: 1.25rem; flex: none; }
.lh-auth-btn--yandex svg { width: 1.25rem; height: 1.25rem; flex: none; }
.lh-auth .lh-auth-btn--yandex { margin-top: 0.75rem; }
.lh-auth-social-note { margin: 0.75rem 0 0; font: var(--lh-weight-text) var(--lh-type-caption)/var(--lh-line) var(--lh-font); color: var(--lh-fg-muted); text-align: center; }

/* Разделитель «или» */
.lh-auth-or {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: calc(1.25rem - var(--lh-auth-squeeze) * 0.0222) 0 calc(1rem - var(--lh-auth-squeeze) * 0.0222); /* 20/16 → 16/12 px */
	font: var(--lh-weight-text) var(--lh-type-caption)/var(--lh-line) var(--lh-font);
	color: var(--lh-fg-muted);
}
.lh-auth-or::before,
.lh-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--lh-line-base); }

/* Ссылки под карточкой */
.lh-auth-links {
	margin-top: calc(1.25rem - var(--lh-auth-squeeze) * 0.0444); /* 20 → 12 px */
	text-align: center;
	color: var(--lh-fg-muted);
}
.lh-auth-links p { margin: 0; }
.lh-auth-links p + p { margin-top: 0.5rem; }

.lh-auth-aside {
	margin-top: calc(1.5rem - var(--lh-auth-squeeze) * 0.0667); /* 24 → 12 px */
	text-align: center;
	font: var(--lh-weight-text) var(--lh-type-body-s)/var(--lh-line) var(--lh-font);
	color: var(--lh-fg-muted);
}
.lh-auth .lh-auth-aside a { color: var(--lh-fg-muted); }
.lh-auth .lh-auth-aside a:hover { color: var(--lh-accent-base); }

/* Ноутбуки и планшеты — регистрация (Гузель, 16.10.2026). Экран выше входа,
   и одной колонкой в невысокое окно не помещается даже со сжатием отступов.
   Действует от 601 px в ширину, на окне до 1440 px или ниже 800 px в высоту;
   большой монитор и телефон — прежняя колонка.
   · Согласие и кнопка в одну строку. Форма шире обычной на 2.5rem, чтобы
     согласие рядом с кнопкой не рассыпалось на четыре строки.
   · От 1024 px (брейкпоинт кита) заголовок встаёт слева от формы, вровень с
     её верхом и вплотную к ней. Уже 1024
     не делим: на вертикальном планшете колонка заголовка выходит ~210 px,
     подзаголовок рвётся, а по высоте экран и так помещается. */
@media (min-width: 601px) and (max-width: 1440px), (min-width: 601px) and (max-height: 800px) {
	.lh-auth-col--split { --lh-auth-col: 30rem; }

	.lh-auth-col--split .lh-auth-submit {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin-top: calc(1.5rem - var(--lh-auth-squeeze) * 0.0556); /* 24 → 14 px */
	}
	.lh-auth-col--split .lh-auth-submit .lh-auth-check { flex: 1; margin: 0; }
	/* Ошибка согласия — отдельной строкой под рядом, на расстоянии подписи. */
	.lh-auth-col--split .lh-auth-submit { flex-wrap: wrap; row-gap: var(--lh-auth-label-gap); }
	.lh-auth-col--split .lh-auth-submit .lh-auth-err { order: 1; flex-basis: 100%; margin: 0; }
	.lh-auth .lh-auth-col--split .lh-auth-submit .lh-auth-btn--main { flex: none; width: auto; margin: 0; }
}
@media (min-width: 1024px) and (max-width: 1440px), (min-width: 1024px) and (max-height: 800px) {
	.lh-auth-col--split {
		display: grid;
		/* Заголовок по ширине текста, пара «заголовок + форма» по центру:
		   заголовок стоит рядом с формой, а не у левого края (Гузель, 16.10.2026). */
		grid-template-columns: max-content minmax(0, var(--lh-auth-col));
		justify-content: center;
		column-gap: clamp(2.5rem, 4vw, 4rem);
		align-items: start;
		max-width: 62.5rem;
	}
	.lh-auth-col--split > * { grid-column: 2; }
	.lh-auth-col--split > .lh-auth-head {
		grid-column: 1;
		grid-row: 1 / span 3;
		align-self: start; /* верх заголовка = верх карточки формы */
		margin: 0;
		text-align: left;
	}
	.lh-auth-col--split .lh-auth-head p { margin: 0.75rem 0 0; }
}

/* Телефон до 600 px (брейкпоинт кита): карточка остаётся, отступы
   мобильные — как у карточек кабинета. */
@media (max-width: 600px) {
	.lh-auth-top { padding: calc(1rem - var(--lh-auth-squeeze) * 0.0333) 1rem; } /* 16 → 10 px */
	.lh-auth-wrap { padding: calc((1.25rem - var(--lh-auth-squeeze) * 0.0333) * 1.5 - (1rem - var(--lh-auth-squeeze) * 0.0333)) 1rem 3rem; } /* логотип → заголовок: было 20 → 14 px, стало 30 → 21 px */
	.lh-auth-head { margin: 0 0 calc(1.25rem - var(--lh-auth-squeeze) * 0.0444); } /* 20 → 12 px */
	.lh-auth-card { padding: calc(1.25rem - var(--lh-auth-squeeze) * 0.0333) 1rem; border-radius: var(--lh-card-radius); } /* 20 → 14 px */
}