/* ============================================================
   favorites.css — избранное + вспомогательные блоки авторизации.

   Владеет классами .slvt-fav*, .slvt-auth*, .slvt-sec*.
   Всё остальное (формы, кнопки, плашки, пустые состояния, пагинация)
   берётся из темы: components.css / layout.css / archive.css.

   Ни одного своего цвета и размера шрифта — только токены темы,
   иначе тёмная схема разъедется.
   Точки останова — только те, что уже есть в теме: 1024 / 768 / 600.
   ============================================================ */

/* ============================================================
   1. Кнопка «в избранное» на карточке каталога

   Кнопку ставит premium-favorites.js СИБЛИНГОМ .entry-card__link
   (мина №13), поэтому позиционируемся абсолютом внутри .entry-card
   ровно по образцу .vbadge из archive.css: те же 8px, тот же z-index 2,
   та же полупрозрачная тёмная подложка.
   ============================================================ */

.slvt-fav {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: #fff;
	background: color-mix(in srgb, #000 55%, transparent);
	border: 0;
	border-radius: var(--r-pill);
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}

.slvt-fav svg {
	display: block;
	flex: none;
}

.slvt-fav:hover {
	background: color-mix(in srgb, #000 72%, transparent);
	transform: scale(1.06);
}

/* В избранном — заливка сердца акцентом статуса «внимание» из токенов темы. */
.slvt-fav.is-on {
	color: var(--st-danger);
}

.slvt-fav.is-on svg {
	fill: currentColor;
}

/* Фокус-ринг повторяет components.css: обводка снаружи, 2px основного цвета. */
.slvt-fav:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 2px;
}

/* Метка «Видео» уже занимает правый верхний угол — уступаем ей строку.
   :has() тема уже использует (components.css, .pagination), поддержка та же. */
.entry-card:has(.vbadge:not(.vbadge--inline)) .slvt-fav {
	top: 40px;
}

/* Гостевой вариант — ссылка на вход; подчёркивание темы здесь лишнее. */
a.slvt-fav,
a.slvt-fav:hover {
	text-decoration: none;
}

/* На узких экранах палец больше курсора. */
@media (max-width: 600px) {
	.slvt-fav {
		width: 38px;
		height: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.slvt-fav {
		transition: none;
	}

	.slvt-fav:hover {
		transform: none;
	}
}

/* ============================================================
   2. Страница /favorites/
   Сетка карточек и пустое состояние — классы темы (.entries--grid,
   .empty, .pagination); здесь только вертикальный ритм.
   ============================================================ */

.slvt-fav-page > * + * {
	margin-top: var(--s-5);
}

/* Счётчик «Сохранено N записей». Вид повторяет подсказку формы
   (.field__hint), но класс свой: тот принадлежит полям ввода. */
.slvt-fav-page__count {
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--c-text-soft);
}

.slvt-fav-page .pagination {
	margin-top: var(--s-6);
}

/* ============================================================
   3. Формы авторизации

   Раскладка — та же, что у формы /report/ в теме (.report__layout):
   карточка с формой слева, липкий пояснительный блок справа.
   ⚠️ Первая версия была без подложки — форма из двух полей висела прямо
   на фоне страницы и читалась как черновик. Подложку даёт ОБЁРТКА
   (.slvt-auth__card), а не сама форма: состав полей у четырёх форм разный,
   и подложка, размазанная по шорткодам, разъедется при первой же правке.

   Ни одного своего цвета и размера — только токены темы.
   ============================================================ */

.slvt-auth {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 17.5rem;
	gap: var(--s-7);
	align-items: start;
	margin-top: var(--s-6);
}

.slvt-auth__card {
	min-width: 0;
	padding: var(--s-7);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-sm);
}

/* Поля внутри карточки стоят на светлой подложке — своя рамка обязана быть
   контрастнее обычной, иначе на белом они «растворяются». */
.slvt-auth__card .field input,
.slvt-auth__card .field select,
.slvt-auth__card .field textarea {
	background: var(--c-surface-2);
	border-color: var(--c-border-strong);
}

.slvt-auth__card .field input:focus,
.slvt-auth__card .field select:focus,
.slvt-auth__card .field textarea:focus {
	background: var(--c-surface);
}

/* Первое поле не должно отбиваться от верха карточки лишним отступом. */
.slvt-auth__card > .slvt-auth-form > .field:first-child {
	margin-top: 0;
}

.slvt-auth .vcheck {
	margin-top: var(--s-4);
}

/* Кнопки — на всю ширину карточки, главная первой. Вторая («Забыли пароль?»)
   уходит вправо, чтобы не конкурировать с главной. */
.slvt-auth .page-shell__actions {
	align-items: center;
	justify-content: space-between;
	margin-top: var(--s-6);
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-border);
}

.slvt-auth .page-shell__actions .btn--primary {
	flex: 1 1 12rem;
	justify-content: center;
}

/* Подпись под формой: отделена от кнопок, приглушена. */
.slvt-auth__card > .field__hint,
.slvt-auth__card > p.field__hint {
	margin: var(--s-5) 0 0;
}

/* ── Боковая панель ──────────────────────────────────────── */

.slvt-auth__aside {
	position: sticky;
	top: calc(var(--header-h) + var(--s-5));
	min-width: 0;
}

.slvt-auth__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--s-3);
}

.slvt-auth__list li {
	position: relative;
	padding-left: var(--s-5);
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--c-text-muted);
}

/* Маркер — точка акцентного цвета, а не буллет: буллеты в этой теме
   нигде не используются. */
.slvt-auth__list li::before {
	content: "";
	position: absolute;
	top: .55em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: var(--r-pill);
	background: var(--c-primary);
}

/* ── Адаптив: точки останова только те, что уже есть в теме ── */

@media (max-width: 900px) {
	.slvt-auth {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-6);
	}

	/* На узком экране пояснение уже не «сбоку» — липкость теряет смысл
	   и только мешает прокрутке. */
	.slvt-auth__aside {
		position: static;
	}
}

@media (max-width: 600px) {
	.slvt-auth__card {
		padding: var(--s-5);
	}

	/* Две кнопки в ряд на телефоне не помещаются: «Войти» на всю ширину,
	   вторая ссылка под ней. */
	.slvt-auth .page-shell__actions {
		display: grid;
		gap: var(--s-3);
	}

	.slvt-auth .page-shell__actions .btn {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================================
   4. Вкладка «Безопасность»

   ⚠️ Тоже вынужденно в этом файле (см. п.3): вкладку печатает
   slvt_security_html() из includes/auth/security.php.
   ============================================================ */

.slvt-sec__block + .slvt-sec__block {
	margin-top: var(--s-8);
	padding-top: var(--s-6);
	border-top: 1px solid var(--c-border);
}

.slvt-sec__block > * + * {
	margin-top: var(--s-4);
}

.slvt-sec__form {
	max-width: 32rem;
}

/* Журнал входов. Стиль повторяет .prose table из base.css — вкладка живёт
   вне .prose, поэтому правила приходится продублировать здесь. */
.slvt-sec-log {
	overflow-x: auto;
}

.slvt-sec-log table {
	width: 100%;
	font-size: var(--fs-sm);
	border-collapse: collapse;
}

.slvt-sec-log :is(th, td) {
	padding: var(--s-2) var(--s-3);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--c-border);
	white-space: nowrap;
}

.slvt-sec-log th {
	font-weight: 600;
	color: var(--c-text);
	background: var(--c-surface-2);
}

.slvt-sec-log td {
	color: var(--c-text-muted);
}

@media (max-width: 600px) {
	.slvt-sec-log :is(th, td) {
		padding: var(--s-2);
	}
}