/* 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: 1.125rem; /* между полями */
	--lh-auth-label-gap: 0.375rem; /* подпись → поле: ближе, чем поле → поле */

	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: 1.125rem 1.25rem;
}
.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;
	padding: 1.5rem 1.25rem 4rem;
}
.lh-auth-col { width: 100%; max-width: var(--lh-auth-col); }

.lh-auth-head { margin: 0 -3rem 1.5rem; text-align: center; }
/* Шапка экрана шире формы на 3rem с каждой стороны: h1 кита на компьютере
   40 px, и «Вход в личный кабинет» в ширину формы не помещается. На телефоне
   заголовок 24 px — шапка по ширине колонки. */
.lh-auth-head h1 {
	margin: 0;
	font: var(--lh-weight-text) var(--lh-type-h1)/var(--lh-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: var(--lh-card-pad-y-l) var(--lh-card-pad-y-l);
}

/* Поля. Геометрия от кнопки 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);
}
.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; }

/* Согласие */
.lh-auth-check {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
	margin-top: 1.25rem;
	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-btn` размера L; здесь только место в колонке:
   во всю ширину, главная — с отступом от последнего поля. */
.lh-auth .lh-auth-btn { display: flex; width: 100%; }
.lh-auth .lh-auth-btn--main { margin-top: 1.5rem; }
.lh-auth-btn--vk svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* Разделитель «или» */
.lh-auth-or {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.25rem 0 1rem;
	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: 1.25rem;
	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: 1.5rem;
	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); }

/* Телефон до 600 px (брейкпоинт кита): карточка остаётся, отступы
   мобильные — как у карточек кабинета. */
@media (max-width: 600px) {
	.lh-auth-top { padding: 1rem; }
	.lh-auth-wrap { padding: 0.5rem 1rem 3rem; }
	.lh-auth-head { margin: 0 0 1.25rem; }
	.lh-auth-card { padding: 1.25rem 1rem; border-radius: var(--lh-card-radius); }
}