/* ============================================================
   BAZA · Components
   Кнопки, статусы, чипы, поиск, оверлей, пагинация, пустое
   состояние, поля формы, мета-сетка и «паспорт» записи.

   Всё — только на токенах из tokens.css. Геометрия в px
   встречается там, где её диктует спецификация (6/10/38/40/56),
   цвет и размеры шрифта — исключительно через var(--…).
   Владение файла: .btn*, .icon-btn, .status*, .chip*,
   .count-chip, .pill, .q*, .search-overlay*, .suggest-*, kbd,
   .pagination/.page-numbers, .empty*, .field*, .form-alert*,
   .tech-grid/.tech*, .passport*, .report-box, .honeypot.
   ============================================================ */

/* ============================================================
   1. Кнопки
   ============================================================ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-width: 0;
	max-width: 100%;
	padding: 10px var(--s-4);
	font-family: var(--ff-sans);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.005em;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	color: var(--c-text);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--r-ctl);
	cursor: pointer;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease),
		box-shadow var(--t-fast) var(--ease),
		transform var(--t-fast) var(--ease);
}

.btn:active {
	transform: translateY(1px);
}

/* Иконка/стрелка внутри кнопки не сжимается и подаётся вперёд при hover. */
.btn > svg,
.btn .arrow {
	flex: 0 0 auto;
	transition: transform var(--t-fast) var(--ease);
}
.btn:hover > svg,
.btn:hover .arrow {
	transform: translateX(2px);
}

/* ── Основная (--accent оставлен алиасом на случай кэша разметки) ── */
.btn--primary,
.btn--accent {
	color: var(--c-on-primary);
	background: var(--c-primary);
	border-color: var(--c-primary);
}
.btn--primary:hover,
.btn--accent:hover {
	background: var(--c-primary-hover);
	border-color: var(--c-primary-hover);
}
.btn--primary:active,
.btn--accent:active {
	background: var(--c-primary-active);
	border-color: var(--c-primary-active);
}

/* ── Контурная ── */
.btn--ghost {
	color: var(--c-text);
	background: transparent;
	border-color: var(--c-border-strong);
}
.btn--ghost:hover {
	background: var(--c-surface-2);
	border-color: var(--c-text-soft);
}

/* ── Тихая: только текст ── */
.btn--quiet {
	padding-inline: var(--s-1);
	color: var(--c-text-muted);
	background: transparent;
	border-color: transparent;
}
.btn--quiet:hover {
	color: var(--c-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Переход на check-you.to: единственное место кораллового цвета ── */
.btn--cy {
	color: var(--c-cy);
	background: color-mix(in srgb, var(--c-cy) 8%, transparent);
	border-color: var(--c-cy);
}
.btn--cy:hover {
	background: color-mix(in srgb, var(--c-cy) 14%, transparent);
}

/* ── Размеры ── */
.btn--sm {
	padding: var(--s-2) var(--s-3);
	font-size: var(--fs-md);
}
.btn--lg {
	/* 16px считаем от базового токена, чтобы не хардкодить размер шрифта */
	padding: 13px 22px;
	font-size: calc(var(--fs-base) + 1px);
}
.btn--block {
	display: flex;
	width: 100%;
}

/* Кнопка только для широких экранов (на мобильном её роль у бургера). */
.btn--desktop {
	display: inline-flex;
}

/* ── Квадратная иконочная кнопка ── */
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	padding: 0;
	color: var(--c-text-muted);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-ctl);
	cursor: pointer;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease);
}
.icon-btn:hover {
	color: var(--c-text);
	background: var(--c-surface-2);
	border-color: var(--c-border-strong);
}
.icon-btn > svg {
	flex: 0 0 auto;
}

/* ============================================================
   2. Статусы, чипы, счётчики
   ============================================================ */

/* Цвет берётся из --st: его ставит модификатор is-* (tokens.css). */
.status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--s-1) 10px;
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
	color: var(--st);
	background: var(--st-soft);
	border: 1px solid color-mix(in srgb, var(--st) 26%, transparent);
	border-radius: var(--r-pill);
}
.status__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	background: var(--st);
	border-radius: var(--r-pill);
}

/* ── Чип активного фильтра: ссылка (без JS) или span + кнопка (с JS) ── */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 5px 10px;
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.3;
	color: var(--c-text-muted);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition:
		background-color var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease);
}
a.chip:hover {
	color: var(--c-text);
	background: var(--c-surface-2);
	border-color: var(--c-border-strong);
}

.chip__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-right: -2px;
	padding: 0;
	font-family: var(--ff-sans);
	font-size: var(--fs-md);
	line-height: 1;
	color: var(--c-text-soft);
	background: none;
	border: 0;
	border-radius: var(--r-pill);
	cursor: pointer;
	appearance: none;
	transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.chip:hover .chip__x,
.chip__x:hover {
	color: var(--st-danger);
	background: color-mix(in srgb, var(--st-danger) 10%, transparent);
}

/* «Очистить всё» — акцентный чип */
.chip--clear {
	color: var(--c-primary);
	background: var(--c-primary-soft);
	border-color: color-mix(in srgb, var(--c-primary) 26%, transparent);
	font-weight: 600;
}
a.chip--clear:hover {
	color: var(--c-primary-hover);
	background: color-mix(in srgb, var(--c-primary) 14%, transparent);
	border-color: color-mix(in srgb, var(--c-primary) 40%, transparent);
}

/* ── Счётчик рядом с заголовком секции ── */
.count-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--s-2);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	color: var(--c-primary);
	background: var(--c-primary-soft);
	border: 1px solid color-mix(in srgb, var(--c-primary) 18%, transparent);
	border-radius: var(--r-pill);
}

/* ── Нейтральная пилюля-примитив (метка без статуса) ── */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--s-1) 10px;
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.35;
	color: var(--c-text-muted);
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
}

/* ============================================================
   3. Поиск .q  (класс .search занят WordPress под <body>)
   ============================================================ */

.q {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
	background: var(--c-surface);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-ctl);
	transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.q:focus-within {
	border-color: var(--c-primary);
	box-shadow: var(--sh-ring);
}

.q__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--c-text-soft);
	transition: color var(--t-fast) var(--ease);
}
.q:focus-within .q__icon {
	color: var(--c-primary);
}

/* Поле не наследует рамку/фон из base.css: селектор с двумя классами
   специфичнее любого input[type=…] — !important не нужен. */
.q .q__field {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: var(--s-2) 0;
	font-family: var(--ff-sans);
	font-size: var(--fs-base);
	line-height: 1.4;
	color: var(--c-text);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	appearance: none;
}
.q .q__field:focus,
.q .q__field:focus-visible {
	border: 0;
	outline: none;
	box-shadow: none;
}
.q .q__field::placeholder {
	color: var(--c-text-soft);
	opacity: 1;
}
.q .q__field::-webkit-search-cancel-button {
	appearance: none;
}

.q__kbd {
	flex: 0 0 auto;
}

.q .q__btn {
	flex: 0 0 auto;
	min-height: 36px;
	padding-block: 0;
}

/* ── Hero-вариант: пилюля высотой ~56px ── */
.q--hero {
	gap: var(--s-3);
	min-height: 56px;
	padding: var(--s-1) var(--s-2) var(--s-1) var(--s-5);
	border-radius: var(--r-pill);
	box-shadow: var(--sh-sm);
}
.q--hero .q__btn {
	min-height: 44px;
	padding-inline: var(--s-5);
	border-radius: var(--r-pill);
}

/* ── Вариант внутри оверлея ── */
.q--overlay {
	min-height: 48px;
}
.q--overlay .q__btn {
	min-height: 40px;
}

/* ============================================================
   4. Оверлей поиска
   ============================================================ */

.search-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--z-search);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh var(--gutter) var(--s-6);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	transition: opacity 220ms var(--ease);
}
/* Атрибут hidden всегда сильнее display:flex (двумя уровнями специфичности). */
.search-overlay[hidden] {
	display: none;
}
.search-overlay:not(.is-open) {
	pointer-events: none;
}
.search-overlay.is-open {
	opacity: 1;
}

.search-overlay__backdrop {
	position: absolute;
	inset: 0;
	/* Единый токен затемнения (см. tokens.css --c-overlay). */
	background: var(--c-overlay);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.search-overlay__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	width: 100%;
	max-width: 640px;
	padding: var(--s-5);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	opacity: 0;
	transform: translateY(-10px) scale(0.985);
	transition:
		opacity 220ms var(--ease-out),
		transform 220ms var(--ease-out);
}
.search-overlay.is-open .search-overlay__panel {
	opacity: 1;
	transform: none;
}

.search-overlay__close {
	align-self: flex-end;
	margin: calc(-1 * var(--s-1)) calc(-1 * var(--s-1)) calc(-1 * var(--s-3)) 0;
}

/* ── Живые подсказки ── */
.search-overlay__suggest {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 46vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}
/* Пустой контейнер не должен добавлять зазор в панели. */
.search-overlay__suggest:empty {
	display: none;
}

.suggest-item {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-3);
	min-height: 44px;
	padding: var(--s-2) var(--s-3);
	color: var(--c-text);
	text-decoration: none;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.suggest-item:hover {
	background: var(--c-surface-2);
	border-color: var(--c-border);
}
.suggest-item__no {
	flex: 0 0 auto;
	font-size: var(--fs-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--c-text-soft);
}
.suggest-item__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--fs-md);
	font-weight: 600;
	overflow-wrap: anywhere;
}
.suggest-item__meta {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: var(--fs-xs);
	color: var(--c-text-soft);
}

.suggest-empty {
	padding: var(--s-3) var(--s-3) var(--s-2);
	font-size: var(--fs-md);
	line-height: 1.5;
	color: var(--c-text-muted);
	overflow-wrap: anywhere;
}

/* ── Подсказки по клавишам ── */
.search-overlay__hint {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-4);
	padding-top: var(--s-3);
	border-top: 1px solid var(--c-border);
	font-size: var(--fs-xs);
	color: var(--c-text-soft);
}
.search-overlay__hint span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 2px 6px;
	font-family: var(--ff-sans);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	color: var(--c-text-muted);
	background: var(--c-sunken);
	border: 1px solid var(--c-border);
	border-radius: 6px;
}

/* ============================================================
   5. Пагинация
   ============================================================ */

.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: var(--s-7);
}
/* Пустой контейнер (нет второй страницы) не занимает места.
   :empty ловит очистку через JS… */
.pagination:empty {
	display: none;
	margin-top: 0;
}
/* …а этот вариант — серверный случай, когда внутри остались только пробелы.
   Держим отдельным правилом: без поддержки :has() оно просто игнорируется. */
.pagination:not(:has(*)) {
	display: none;
	margin-top: 0;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	max-width: 100%;
	padding: 0 10px;
	font-family: var(--ff-sans);
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	text-align: center;
	text-decoration: none;
	color: var(--c-text-muted);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-ctl);
	cursor: pointer;
	appearance: none;
	overflow-wrap: anywhere;
	transition:
		background-color var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease);
}
.pagination a.page-numbers:hover,
.pagination button.page-numbers:hover {
	color: var(--c-text);
	background: var(--c-surface-2);
	border-color: var(--c-border-strong);
}
/* Отдельным правилом: обёртка со ссылкой внутри (соседние записи). */
.pagination .page-numbers:has(a):hover {
	color: var(--c-text);
	background: var(--c-surface-2);
	border-color: var(--c-border-strong);
}
/* Соседние записи (single.php) приходят ссылкой внутри .page-numbers. */
.pagination .page-numbers a {
	color: inherit;
	text-decoration: none;
}
.pagination .page-numbers.current {
	color: var(--c-on-primary);
	background: var(--c-primary);
	border-color: var(--c-primary);
	cursor: default;
}
.pagination .page-numbers.dots {
	color: var(--c-text-soft);
	background: transparent;
	border-color: transparent;
	cursor: default;
}

/* ============================================================
   6. Пустое состояние
   ============================================================ */

.empty {
	/* внутри сеток плиток занимает всю строку */
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	padding: var(--s-8) var(--s-4);
	text-align: center;
}
.empty__mark {
	display: inline-flex;
	color: var(--c-text-soft);
	opacity: 0.5;
}
.empty__mark svg {
	width: 40px;
	height: 40px;
}
.empty p,
.empty .empty__text {
	max-width: 46ch;
	font-size: var(--fs-base);
	color: var(--c-text-muted);
	text-wrap: pretty;
}
/* Заголовок — сериф; селектор с двумя классами обязателен, иначе
   правило `.empty p` выше окажется специфичнее (класс + тип). */
.empty .empty__title {
	max-width: 30ch;
	font-family: var(--ff-display);
	/* ≈19px по спеке; берём токен h3 (clamp 18…21) вместо хардкода */
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--c-text);
	text-wrap: balance;
}
.empty .btn {
	margin-top: var(--s-2);
}

/* ============================================================
   7. Поля формы и уведомления
   ============================================================ */

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: var(--s-5);
}
.field > label {
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.4;
	color: var(--c-text);
}
/* Оформление самих контролов — за base.css; здесь только ширина в колонке.
   Padding не переопределяем: у select он держит место под шеврон. */
.field input,
.field select,
.field textarea {
	width: 100%;
	max-width: 100%;
}
.field textarea {
	min-height: 140px;
	resize: vertical;
}
.field__hint {
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--c-text-soft);
}
.field__hint a {
	color: var(--c-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.field__hint a:hover {
	color: var(--c-primary);
}
.req {
	color: var(--st-danger);
}

/* ── Уведомление формы ──
   Локальный --st задаёт тон; --st-soft пересчитываем рядом, иначе
   он останется со значением, посчитанным на :root. */
.form-alert {
	--st: var(--st-blue);
	--st-soft: color-mix(in srgb, var(--st) 12%, transparent);
	display: block;
	margin-bottom: var(--s-5);
	padding: var(--s-4) var(--s-5);
	font-size: var(--fs-md);
	line-height: 1.55;
	color: var(--c-text);
	background: var(--st-soft);
	border: 1px solid color-mix(in srgb, var(--st) 28%, transparent);
	border-left: 3px solid var(--st);
	border-radius: var(--r);
	overflow-wrap: anywhere;
}
.form-alert--ok {
	--st: var(--st-blue);
	--st-soft: color-mix(in srgb, var(--st) 12%, transparent);
}
.form-alert--err {
	--st: var(--st-danger);
	--st-soft: color-mix(in srgb, var(--st) 12%, transparent);
}
.form-alert a {
	color: var(--c-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.form-alert a:hover {
	color: var(--c-primary-hover);
}

/* Ловушка для ботов — вне зоны видимости, но в потоке формы. */
.honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ============================================================
   8. Мета-сетка записи (.tech-grid)
   Hairline-разделители = фон контейнера, видимый в gap:1px.
   ============================================================ */

.tech-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	background: var(--c-border);
	border: 1px solid var(--c-border);
	border-radius: var(--r);
	overflow: hidden;
}
.tech {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: var(--s-3) var(--s-4);
	background: var(--c-surface);
}
.tech__label {
	font-size: var(--fs-xs);
	font-weight: 500;
	line-height: 1.4;
	color: var(--c-text-soft);
}
.tech__value {
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	color: var(--c-text);
	overflow-wrap: anywhere;
}
.tech__value a {
	color: var(--c-primary);
	text-decoration: none;
	transition: color var(--t-fast) var(--ease);
}
.tech__value a:hover {
	color: var(--c-primary-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ============================================================
   9. Паспорт записи (карточка в сайдбаре страницы записи)
   ============================================================ */

.passport {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-sm);
	overflow: hidden;
}

.passport__cover {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	background: var(--c-sunken);
	border-bottom: 1px solid var(--c-border);
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	overflow: hidden;
}
/* Обложка обёрнута ссылкой на полный файл — блок на всю площадь фигуры,
   иначе height:100% у картинки некуда упереться. */
.passport__cover-link {
	display: block;
	width: 100%;
	height: 100%;
}
.passport__cover-link:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: -3px;
}
.passport__cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Плашка с № и статусом на полупрозрачной подложке поверх обложки. */
.passport__cover-tag {
	position: absolute;
	right: var(--s-3);
	bottom: var(--s-3);
	left: var(--s-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2);
	padding: 6px var(--s-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--c-text);
	background: color-mix(in srgb, var(--c-surface) 78%, transparent);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	border: 1px solid color-mix(in srgb, var(--c-border-strong) 60%, transparent);
	border-radius: var(--r-sm);
}
.passport__cover-tag .num-t {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.passport__head {
	padding: var(--s-4) var(--s-5) 0;
}
.passport__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--c-text);
}

.passport__rows {
	padding: var(--s-2) var(--s-5) var(--s-4);
}
.passport-row {
	display: grid;
	grid-template-columns: minmax(80px, 36%) 1fr;
	align-items: center;
	gap: var(--s-3);
	padding: 10px 0;
	border-bottom: 1px solid var(--c-border);
}
.passport-row:last-child {
	border-bottom: 0;
}
.passport-row__k {
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.4;
	color: var(--c-text-muted);
}
.passport-row__v {
	min-width: 0;
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	color: var(--c-text);
	overflow-wrap: anywhere;
}
a.passport-row__v {
	color: var(--c-primary);
	text-decoration: none;
	transition: color var(--t-fast) var(--ease);
}
a.passport-row__v:hover {
	color: var(--c-primary-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.passport-row__v .status {
	vertical-align: middle;
}

.passport__report {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 44px;
	margin: 0 var(--s-5) var(--s-5);
	padding: 10px var(--s-4);
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--c-text-muted);
	text-decoration: none;
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--r-ctl);
	transition:
		background-color var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease);
}
.passport__report:hover {
	color: var(--c-text);
	background: var(--c-sunken);
	border-color: var(--c-border-strong);
}
.passport__report > svg {
	flex: 0 0 auto;
}

/* ============================================================
   10. Универсальные поверхности
   ============================================================ */


/* Врезка «что делать дальше» внутри текстовых страниц. */
.report-box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-2);
	padding: var(--s-5);
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
}

.report-box__title {
	margin: 0;
	font-family: var(--ff-sans);
	font-size: var(--fs-md);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--c-text);
}

.report-box__text {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--c-text-muted);
}

/* ============================================================
   11. Клавиатурный фокус
   ============================================================ */

.btn:focus-visible,
.icon-btn:focus-visible,
.chip:focus-visible,
.chip__x:focus-visible,
.suggest-item:focus-visible,
.passport__report:focus-visible,
a.passport-row__v:focus-visible,
.tech__value a:focus-visible,
.pagination .page-numbers:focus-visible,
.pagination .page-numbers a:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 2px;
}
/* На залитых индиго контролах добавляем просвет цвета страницы. */
.btn--primary:focus-visible,
.btn--accent:focus-visible,
.pagination .page-numbers.current:focus-visible {
	box-shadow: 0 0 0 2px var(--c-bg);
}

/* ============================================================
   12. Адаптив (1200 / 1024 / 900 / 768 / 600 / 480)
   ============================================================ */

@media (max-width: 900px) {
	/* В шапке остаётся бургер — дублирующая кнопка не нужна. */
	.btn--desktop {
		display: none;
	}
}

@media (max-width: 768px) {
	/* Тач-цели */
	.btn {
		min-height: 44px;
	}
	.icon-btn {
		width: 44px;
		height: 44px;
	}
	.q {
		min-height: 52px;
		padding-left: var(--s-4);
	}
	.q .q__btn,
	.q--overlay .q__btn {
		min-height: 44px;
	}
	.q--hero {
		min-height: 56px;
	}
	.q__kbd {
		display: none;
	}
	.pagination .page-numbers {
		min-width: 44px;
		min-height: 44px;
	}
	.chip {
		min-height: 36px;
		padding-block: 6px;
	}
	.chip__x {
		width: 24px;
		height: 24px;
	}
	.suggest-item {
		min-height: 48px;
	}
	.passport__head,
	.passport__rows {
		padding-inline: var(--s-4);
	}
	.passport__report {
		margin-inline: var(--s-4);
		margin-bottom: var(--s-4);
	}
}

@media (max-width: 600px) {
	/* 16px в поле поиска — иначе iOS зумит страницу при фокусе. */
	.q .q__field {
		font-size: calc(var(--fs-base) + 1px);
	}
	.search-overlay {
		padding-top: 8vh;
		padding-bottom: var(--s-4);
	}
	.search-overlay__panel {
		padding: var(--s-4);
		border-radius: var(--r);
	}
	.search-overlay__suggest {
		max-height: 52vh;
	}
	.search-overlay__hint {
		display: none;
	}
	/* Мета-сетка в колонку: подпись слева, значение справа. */
	.tech-grid {
		grid-template-columns: 1fr;
	}
	.tech {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--s-3);
	}
	.tech__value {
		text-align: right;
	}
	.passport-row {
		grid-template-columns: minmax(72px, 40%) 1fr;
	}
}

@media (max-width: 480px) {
	/* Hero-поиск складывается в две строки: поле сверху, кнопка во всю ширину. */
	.q--hero {
		flex-wrap: wrap;
		row-gap: var(--s-3);
		padding: var(--s-3);
		border-radius: var(--r-lg);
	}
	.q--hero .q__btn {
		flex: 1 0 100%;
		border-radius: var(--r-ctl);
	}
	.btn--lg {
		padding: var(--s-3) var(--s-5);
	}
	.empty {
		padding-block: var(--s-7);
	}
	.form-alert {
		padding: var(--s-3) var(--s-4);
	}
}

/* ============================================================
   13. Уважение к prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.btn,
	.btn > svg,
	.btn .arrow,
	.icon-btn,
	.chip,
	.chip__x,
	.q,
	.q__icon,
	.search-overlay,
	.search-overlay__panel,
	.suggest-item,
	.pagination .page-numbers,
	.passport__report,
	.tech__value a,
	a.passport-row__v {
		transition: none;
		animation: none;
	}
	.btn:active {
		transform: none;
	}
	.btn:hover > svg,
	.btn:hover .arrow {
		transform: none;
	}
	.search-overlay__panel {
		transform: none;
	}
}