/* ==========================================================================
   VI Answers — компоненты (общий файл для статических макетов)
   Зависит только от ../tokens.css и ../fonts.css. Значений цвета, шрифта
   и радиуса здесь нет — только токены (исключение: чёрное на белом в @media print).
   Подход mobile-first: базовые правила — для 360px, расширения — по min-width.
   ========================================================================== */

/* ---- Основа -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--spacing-6);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

a {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--duration-fast) var(--ease-ui);
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

::selection { background: var(--color-neon); color: var(--color-neon-contrast); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 0.875rem; height: 0.875rem; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums;
}

.label {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-sm);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---- Каркас -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}

.skip-link {
  position: absolute; left: var(--spacing-4); top: -100%;
  z-index: var(--z-skiplink);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-accent); color: var(--color-accent-contrast);
  border-radius: var(--radius-md);
}
.skip-link:focus { top: var(--spacing-4); }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-8);
  padding-block: var(--spacing-4) var(--spacing-section);
}
.layout > * { min-width: 0; }
.layout__main > * + * { margin-top: var(--spacing-10); }

@media (min-width: 64rem) {
  .layout {
    grid-template-columns: minmax(0, var(--container-prose)) var(--container-rail);
    justify-content: space-between;
    column-gap: var(--spacing-8);
    padding-top: var(--spacing-6);
  }
  .layout__top, .layout__main { grid-column: 1; }
  .layout__rail { grid-column: 2; grid-row: 1 / span 2; }
  .layout__rail-sticky { position: sticky; top: var(--spacing-6); }
}

.measure { max-width: var(--container-prose); }

/* ---- Пометки макета (не часть продукта) ---------------------------------- */
.mock-note {
  background: var(--color-surface-sunken);
  border-bottom: 1px dashed var(--color-border-strong);
  color: var(--color-text-muted);
  padding-block: var(--spacing-2);
  line-height: 1.5;
}
.sample {
  display: inline-block;
  vertical-align: 0.15em;
  margin-inline-end: 0.4em;
  padding: 0.05em 0.4em;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-normal);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ---- Шапка --------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: var(--z-header);
  border-bottom: var(--border-rule) solid var(--color-rule);
}
.site-header__row {
  display: flex; align-items: center; gap: var(--spacing-2);
  min-height: 3.5rem;
}
.site-header__spacer { flex: 1; }

.wordmark {
  display: inline-flex; align-items: center; gap: var(--spacing-2);
  min-height: var(--spacing-tap);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-text);
}
.wordmark__plate {
  display: inline-grid; place-items: center;
  min-width: 2rem; height: 1.75rem; padding-inline: 0.35rem;
  background: var(--color-neon); color: var(--color-neon-contrast);
  border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
}
.wordmark:hover .wordmark__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

.nav { display: none; }
.nav a, .menu__panel a {
  display: inline-flex; align-items: center;
  min-height: var(--spacing-tap);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}
.nav a:hover, .menu__panel a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.nav a[aria-current="page"], .menu__panel a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: var(--spacing-tap); height: var(--spacing-tap);
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--color-text); border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--ease-ui);
}
.icon-btn:hover { background: var(--color-surface-sunken); }

/* Переключатель темы: показывает действие, а не состояние */
.theme-toggle .icon--moon { display: block; }
.theme-toggle .icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon--moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon--sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon--moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon--sun { display: block; }
}
.site-header__row > .theme-toggle { display: none; }

/* Переключатель языка */
.lang {
  display: inline-flex;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.lang a {
  display: inline-grid; place-items: center;
  min-width: var(--spacing-tap); min-height: var(--spacing-tap);
  padding-inline: var(--spacing-2);
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-weight-semibold);
  text-decoration: none; color: var(--color-text-muted);
  transition: background-color var(--duration-fast) var(--ease-ui), color var(--duration-fast) var(--ease-ui);
}
.lang a:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.lang a[aria-current="true"] { background: var(--color-accent); color: var(--color-accent-contrast); }
.lang a:focus-visible { outline-offset: -3px; }

/* Мобильное меню на <details>: работает без JS */
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--color-accent); color: var(--color-accent-contrast); }
.menu__panel {
  position: absolute; inset-inline: 0; top: 100%;
  z-index: var(--z-popover);
  background: var(--color-bg);
  border-bottom: var(--border-rule) solid var(--color-rule);
  padding: var(--spacing-2) var(--spacing-gutter) var(--spacing-4);
}
.menu__panel li + li { border-top: 1px solid var(--color-border); }
.menu__panel a { display: flex; }
.menu__theme {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--color-border); padding-top: var(--spacing-2);
}

/* Полная шапка — с 1024px: русские подписи на четверть длиннее английских,
   на 768px навигация, поле поиска и переключатели в одну строку не помещаются. */
@media (min-width: 64rem) {
  .site-header__row { gap: var(--spacing-5); min-height: 4rem; }
  .nav { display: flex; gap: var(--spacing-6); margin-inline-start: var(--spacing-4); }
  .menu, .site-header .search-link { display: none; }
  .site-header__row > .theme-toggle { display: inline-grid; }
}

/* ---- Поиск --------------------------------------------------------------- */
.search {
  position: relative;
  display: flex; align-items: center;
  background: var(--color-surface);
  border: var(--border-rule) solid var(--color-rule);
  border-radius: var(--radius-md);
}
.search:focus-within { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.search__icon { margin-inline: var(--spacing-3) var(--spacing-2); color: var(--color-text-muted); }
.search__input {
  flex: 1; min-width: 0;
  height: 3.25rem; padding: 0;
  border: 0; background: transparent; outline: none;
  font-size: var(--text-lg);          /* >= 16px: iOS не зумит страницу при фокусе */
  appearance: none;
}
.search__input::placeholder { color: var(--color-text-muted); opacity: 1; }
.search__input::-webkit-search-cancel-button { appearance: none; }
.search__submit {
  align-self: stretch;
  margin: -2px -2px -2px 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.search--compact { display: none; border-width: 1px; border-color: var(--color-border-strong); width: 12rem; }
.search--compact .search__input { height: calc(var(--spacing-tap) - 2px); font-size: var(--text-base); }
.search--compact .search__icon { margin-inline: var(--spacing-3) var(--spacing-2); }
@media (min-width: 64rem) { .search--compact { display: flex; } }
@media (min-width: 80rem) { .search--compact { width: 15rem; } }

/* Выдача под полем */
.search__results {
  position: absolute; inset-inline: -2px; top: calc(100% + var(--spacing-2));
  z-index: var(--z-popover);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}
.search__results--static { position: static; margin-top: var(--spacing-3); margin-inline: 2px 6px; margin-bottom: 6px; }
.search__result { display: block; padding: var(--spacing-3) var(--spacing-4); text-decoration: none; }
.search__result + .search__result { border-top: 1px solid var(--color-border); }
.search__result:hover, .search__result[aria-selected="true"] { background: var(--color-surface-sunken); }
.search__result-q { display: block; font-weight: var(--font-weight-semibold); }
.search__result-meta { display: flex; flex-wrap: wrap; gap: var(--spacing-1) var(--spacing-3); align-items: center; margin-top: var(--spacing-1); color: var(--color-text-muted); }
.search__result mark { background: none; color: inherit; box-shadow: inset 0 -2px 0 currentColor; }   /* совпадение — линией, не цветом: цвет занят статусами */
.search__empty { padding: var(--spacing-4); color: var(--color-text-muted); }
.search__empty strong { display: block; color: var(--color-text); }

/* ---- Кнопка -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2);
  min-height: var(--spacing-tap);
  padding: 0 var(--spacing-5);
  background: var(--color-accent); color: var(--color-accent-contrast);
  border: var(--border-rule) solid var(--color-accent);
  border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: var(--font-weight-bold);
  font-size: var(--text-base); letter-spacing: var(--tracking-label); text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-ui), color var(--duration-fast) var(--ease-ui);
}
.btn:hover { background: var(--color-surface); color: var(--color-accent); }
.btn:active { background: var(--color-surface-sunken); color: var(--color-accent); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--color-surface-sunken); border-color: var(--color-border-strong); color: var(--color-text-muted); cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--color-accent); }
.btn--ghost:hover { background: var(--color-accent); color: var(--color-accent-contrast); }

/* ---- Хлебные крошки ------------------------------------------------------ */
.crumbs { font-size: var(--text-sm); color: var(--color-text-muted); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-inline: var(--spacing-2); color: var(--color-border-strong); }
.crumbs a {
  display: inline-flex; align-items: center;
  min-height: var(--spacing-tap);
  color: var(--color-text-muted);
  text-decoration-color: var(--color-border-strong);
}
.crumbs a:hover { color: var(--color-text); text-decoration-color: currentColor; }

/* ---- Статус: значок-шкала + подпись -------------------------------------- */
.status {
  --_c: var(--color-status-unconfirmed);
  --_fill: var(--color-status-unconfirmed-fill);
  --_bg: var(--color-status-unconfirmed-surface);
  --_knock: var(--color-surface);
  display: inline-flex; align-items: center; gap: 0.4em;
  color: var(--_c);
  font-family: var(--font-display); font-weight: var(--font-weight-bold);
  font-size: var(--text-sm); line-height: 1;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  white-space: nowrap;
}
.status--confirmed { --_c: var(--color-status-confirmed); --_fill: var(--color-status-confirmed-fill); --_bg: var(--color-status-confirmed-surface); }
.status--partial { --_c: var(--color-status-partial); --_fill: var(--color-status-partial-fill); --_bg: var(--color-status-partial-surface); }
.status__glyph { width: 1em; height: 1em; flex: none; color: var(--_fill); font-size: 1.15em; }
.status--chip {
  --_knock: var(--_bg);
  padding: 0.4em 0.6em 0.4em 0.5em;
  background: var(--_bg);
  border-radius: var(--radius-sm);
}
.status--lg { font-size: var(--text-base); }

/* Шкала статуса: сплошная = подтверждено, наполовину = частично, штриховка = нет */
.gauge {
  --_fill: var(--color-status-unconfirmed-fill);
  --_level: 0;
  height: 0.5rem;
  color: var(--_fill);
  background: var(--pattern-hatch);
  overflow: hidden;
}
.gauge::before {
  content: ""; display: block; height: 100%;
  background: currentColor;
  transform-origin: 0 50%;
  transform: scaleX(var(--_level));
  animation: gauge-fill var(--duration-slow) var(--ease-ui) both;
}
.gauge--confirmed { --_fill: var(--color-status-confirmed-fill); --_level: 1; }
.gauge--partial { --_fill: var(--color-status-partial-fill); --_level: 0.5; }
.gauge--unconfirmed { --_fill: var(--color-status-unconfirmed-fill); --_level: 0; }
@keyframes gauge-fill { from { transform: scaleX(0); } }

/* ---- Заголовок страницы-вопроса ------------------------------------------ */
.question {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--text-4xl--line-height);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin-block: var(--spacing-1) var(--spacing-5);
}

/* ---- Блок короткого ответа ----------------------------------------------- */
.answer {
  background: var(--color-surface);
  border: var(--border-rule) solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.answer__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--spacing-2) var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}
.answer__verified { color: var(--color-text-muted); }
.answer__verified time { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.answer__body { padding: var(--spacing-4) var(--spacing-4) var(--spacing-5); }
.answer__text { font-size: var(--text-lg); line-height: var(--text-lg--line-height); }
.answer__lead {
  display: block;
  margin-bottom: var(--spacing-3);
  font-size: var(--text-2xl); line-height: var(--text-2xl--line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.answer__note {
  display: flex; gap: var(--spacing-3); align-items: flex-start;
  margin-top: var(--spacing-4); padding-top: var(--spacing-4);
  border-top: 1px dashed var(--color-border-strong);
  font-size: var(--text-base);
}
.answer__note .status__glyph { margin-top: 0.2em; font-size: 1.125rem; }
.answer__basis {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2) var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.answer__basis-label { color: var(--color-text-muted); }
.answer__basis ol { display: contents; }

/* Состояния: частично — обычная рамка; не подтверждено — пунктир и нет крупной фразы */
.answer--unconfirmed { border-style: dashed; }
.answer--unconfirmed .answer__lead { font-size: var(--text-lg); line-height: var(--text-lg--line-height); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-2); }

@media (min-width: 48rem) {
  .answer__head, .answer__basis { padding-inline: var(--spacing-6); }
  .answer__body { padding: var(--spacing-6) var(--spacing-6) var(--spacing-8); }
}

/* Ссылка-сноска на источник */
.cite {
  display: inline-flex; align-items: center; gap: var(--spacing-2);
  min-height: 2rem; padding: 0 var(--spacing-3) 0 0;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-sm); font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-ui);
  position: relative;
}
.cite::after { content: ""; position: absolute; inset: -6px 0; }   /* цель касания 44px */
.cite:hover { border-color: var(--color-rule); }
.cite__n {
  align-self: stretch; display: inline-grid; place-items: center; min-width: 1.75rem;
  background: var(--color-accent); color: var(--color-accent-contrast);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
}
.ref {
  font-family: var(--font-mono); font-size: 0.75em; font-weight: var(--font-weight-semibold);
  vertical-align: 0.25em; text-decoration: none;
  padding: 0 0.15em;
}
.ref:hover { background: var(--color-accent); color: var(--color-accent-contrast); }

/* ---- Заголовок секции ---------------------------------------------------- */
.section-h {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--spacing-4);
  padding-top: var(--spacing-3);
  border-top: var(--border-rule) solid var(--color-rule);
  margin-bottom: var(--spacing-5);
}
.section-h h2, .section-h__title {
  font-family: var(--font-display); font-weight: var(--font-weight-bold);
  font-size: var(--text-3xl); line-height: var(--text-3xl--line-height);
  letter-spacing: var(--tracking-display);
}
.section-h__aside { color: var(--color-text-muted); }
.section-h__aside a { color: inherit; display: inline-flex; align-items: center; min-height: var(--spacing-tap); }

/* ---- Текст развёрнутого ответа ------------------------------------------ */
.prose { font-size: var(--text-lg); line-height: var(--text-lg--line-height); }
.prose > * + * { margin-top: var(--spacing-4); }
.prose h3 {
  font-family: var(--font-display); font-weight: var(--font-weight-bold);
  font-size: var(--text-xl); line-height: var(--text-xl--line-height);
  margin-top: var(--spacing-8);
}

.facts { font-size: var(--text-base); border-top: 1px solid var(--color-border-strong); }
.facts th, .facts td { padding: var(--spacing-3) 0; border-bottom: 1px solid var(--color-border); text-align: start; vertical-align: baseline; }
.facts th {
  width: 38%; padding-inline-end: var(--spacing-4);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text-muted);
}
.facts td { font-weight: var(--font-weight-medium); }

.callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing-3);
  padding: var(--spacing-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-base); line-height: var(--text-base--line-height);
}
.callout .status__glyph { font-size: 1.125rem; margin-top: 0.2em; color: var(--color-status-unconfirmed-fill); }
.callout strong { display: block; margin-bottom: var(--spacing-1); }

/* ---- Источники ----------------------------------------------------------- */
.sources__list { counter-reset: none; border-top: 1px solid var(--color-border-strong); }
.source {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--spacing-3);
  padding: var(--spacing-4) 0;
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: var(--spacing-6);
}
.source__n {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem;
  background: var(--color-accent); color: var(--color-accent-contrast);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
}
.source__title {
  display: inline-block; padding-block: 0.625rem; margin-block: -0.625rem;
  font-weight: var(--font-weight-semibold); font-size: var(--text-lg); line-height: 1.35;
}
.source__title .icon { display: inline-block; vertical-align: -0.05em; margin-inline-start: 0.3em; }
.source__meta {
  display: flex; flex-wrap: wrap; gap: var(--spacing-1) var(--spacing-3); align-items: baseline;
  margin-top: var(--spacing-2);
  color: var(--color-text-muted); font-size: var(--text-sm);
}
.source__publisher { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.source:target { background: var(--color-surface); box-shadow: -0.75rem 0 0 var(--color-surface), 0.75rem 0 0 var(--color-surface); }
.source:target .source__n { outline: 2px solid var(--color-rule); outline-offset: 2px; }

/* Журнал дат */
.ledger { border-top: 1px solid var(--color-border-strong); }
.ledger__row { display: flex; justify-content: space-between; gap: var(--spacing-4); padding: var(--spacing-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.ledger dt { color: var(--color-text-muted); }
.ledger dd { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ledger__row--key dt, .ledger__row--key dd { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-6); margin-top: var(--spacing-4); font-size: var(--text-sm); }
.page-actions a { display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: var(--spacing-tap); }

.tags { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.tag {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--spacing-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  font-size: var(--text-sm); text-decoration: none; color: var(--color-text-muted);
  transition: border-color var(--duration-fast) var(--ease-ui), color var(--duration-fast) var(--ease-ui);
  position: relative;
}
.tag::after { content: ""; position: absolute; inset: -6px 0; }   /* цель касания 44px */
.tag:hover { border-color: var(--color-rule); color: var(--color-text); }
.tag[aria-current="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); }
.tag__count { margin-inline-start: var(--spacing-2); font-family: var(--font-mono); font-size: var(--text-xs); }

/* ---- Карточка вопроса ---------------------------------------------------- */
.qgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-3); }
@media (min-width: 40rem) { .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-4); } }

.qcard {
  position: relative;
  display: flex; flex-direction: column; gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-ui);
}
.qcard:hover { border-color: var(--color-rule); }
.qcard:has(a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.qcard__q {
  font-family: var(--font-display); font-weight: var(--font-weight-bold);
  font-size: var(--text-xl); line-height: var(--text-xl--line-height);
  text-wrap: balance;
}
.qcard__q a { text-decoration: none; outline: none; }
.qcard__q a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* вся карточка — ссылка */
.qcard:hover .qcard__q a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.qcard__a { color: var(--color-text); }
.qcard__a--empty { color: var(--color-text-muted); font-style: italic; }
.qcard__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-2) var(--spacing-4);
  margin-top: auto; padding-top: var(--spacing-2);
  color: var(--color-text-muted);
}

/* Строка списка: та же карточка, уплотнённая под длинные перечни */
.qlist { border-top: 1px solid var(--color-border-strong); }
.qrow {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-1) var(--spacing-4);
  padding: var(--spacing-4) 0;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--duration-fast) var(--ease-ui);
}
.qrow--ranked { grid-template-columns: 2.25rem minmax(0, 1fr); }
.qrow__n { grid-row: 1 / span 3; padding-top: 0.3em; color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.qrow__q { font-family: var(--font-display); font-weight: var(--font-weight-bold); font-size: var(--text-xl); line-height: var(--text-xl--line-height); text-wrap: balance; }
.qrow__q a { text-decoration: none; outline: none; }
.qrow__q a::after { content: ""; position: absolute; inset: 0; }
.qrow:hover .qrow__q a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.qrow:has(a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.qrow__a--empty { color: var(--color-text-muted); font-style: italic; }
.qrow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-1) var(--spacing-4); margin-top: var(--spacing-1); color: var(--color-text-muted); }

@media (min-width: 48rem) {
  .qrow { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; padding-block: var(--spacing-5); }
  .qrow--ranked { grid-template-columns: 3rem minmax(0, 1fr) auto; }
  .qrow__q, .qrow__a { grid-column: -3 / -2; }
  .qrow__meta { grid-column: -2 / -1; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: var(--spacing-2); margin-top: 0.15rem; }
  .qrow:hover { background: var(--color-surface); box-shadow: -0.75rem 0 0 var(--color-surface), 0.75rem 0 0 var(--color-surface); }
}

/* ---- Плитка темы --------------------------------------------------------- */
.topics { display: grid; grid-template-columns: minmax(0, 1fr); }
.topic {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing-1) var(--spacing-4); align-items: baseline;
  padding: var(--spacing-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.topics .topic:first-child { border-top: 1px solid var(--color-border-strong); }
.topic__title { font-family: var(--font-display); font-weight: var(--font-weight-bold); font-size: var(--text-xl); line-height: var(--text-xl--line-height); }
.topic__title a { text-decoration: none; outline: none; }
.topic__title a::after { content: ""; position: absolute; inset: 0; }
.topic:hover .topic__title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.topic:has(a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.topic__count { color: var(--color-text-muted); }
.topic__desc { grid-column: 1 / -1; color: var(--color-text-muted); font-size: var(--text-sm); }
.topic[aria-current="page"] .topic__title a { text-decoration: underline; text-decoration-thickness: 2px; }

@media (min-width: 40rem) {
  .topics--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-8); }
  .topics--grid .topic:nth-child(2) { border-top: 1px solid var(--color-border-strong); }
}
@media (min-width: 64rem) {
  .topics--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .topics--grid .topic:nth-child(3) { border-top: 1px solid var(--color-border-strong); }
  .topics--grid .topic { padding-block: var(--spacing-5); }
}

/* ---- Главная: первый экран ----------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-8); padding-block: var(--spacing-8) var(--spacing-10); }
.hero__eyebrow { display: flex; flex-wrap: wrap; gap: var(--spacing-1) var(--spacing-4); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.hero__title {
  font-family: var(--font-display); font-weight: var(--font-weight-extrabold);
  font-size: var(--text-5xl); line-height: var(--text-5xl--line-height);
  letter-spacing: -0.015em;
  margin-block: var(--spacing-4) var(--spacing-5);
}
.hero__title span { display: block; }
.hero__lede { max-width: 34rem; font-size: var(--text-lg); line-height: var(--text-lg--line-height); color: var(--color-text-muted); margin-bottom: var(--spacing-6); }
.hero__search { max-width: 38rem; }
.hero__popular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2); margin-top: var(--spacing-4); }
.hero__popular-label { color: var(--color-text-muted); margin-inline-end: var(--spacing-1); }

@media (min-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 1fr) 22rem; column-gap: var(--spacing-16); align-items: end; padding-block: var(--spacing-16) var(--spacing-16); }
}

/* Легенда статусов: «как читать страницу» */
.legend { border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); }
.legend__title { padding: var(--spacing-3) var(--spacing-4); border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); }
.legend__item { padding: var(--spacing-3) var(--spacing-4); }
.legend__item + .legend__item { border-top: 1px solid var(--color-border); }
.legend__item .gauge { height: 0.375rem; margin-bottom: var(--spacing-2); }
.legend__item .gauge::before { animation: none; }
.legend__desc { margin-top: var(--spacing-1); font-size: var(--text-sm); color: var(--color-text-muted); }

.legend--inline { border: 0; background: none; display: grid; gap: var(--spacing-4); }
.legend--inline .legend__item { padding: 0; border: 0; }
@media (min-width: 40rem) { .legend--inline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-6); } }

/* Таблица «последние проверки» */
.checks { font-size: var(--text-base); border-top: 1px solid var(--color-border-strong); }
.checks td { padding: 0; border-bottom: 1px solid var(--color-border); vertical-align: baseline; }
.checks__date { width: 6.5rem; color: var(--color-text-muted); white-space: nowrap; }
.checks__status { text-align: end; padding-inline-start: var(--spacing-3); }
.checks a { text-decoration: none; font-weight: var(--font-weight-medium); display: block; padding-block: 0.625rem; }
.checks a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.checks .status__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.checks .status { justify-content: flex-end; }

.home-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-section); padding-bottom: var(--spacing-section); }
@media (min-width: 64rem) { .home-cols { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: var(--spacing-16); } }

/* ---- Хаб темы ------------------------------------------------------------ */
.topic-head { padding-bottom: var(--spacing-2); }
.topic-head__title {
  font-family: var(--font-display); font-weight: var(--font-weight-extrabold);
  font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); letter-spacing: var(--tracking-display);
  margin-block: var(--spacing-1) var(--spacing-3);
}
.topic-head__desc { max-width: 36rem; font-size: var(--text-lg); line-height: var(--text-lg--line-height); color: var(--color-text-muted); }

/* Сводка по статусам: одна шкала на тему */
.tally { margin-top: var(--spacing-6); }
.tally__bar { display: flex; height: 0.625rem; gap: 2px; }
.tally__seg { flex: var(--_n) 1 0; min-width: 0.5rem; }
.tally__seg--confirmed { background: var(--color-status-confirmed-fill); }
.tally__seg--partial { color: var(--color-status-partial-fill); background: linear-gradient(90deg, currentColor 50%, transparent 50%), var(--pattern-hatch); }
.tally__seg--unconfirmed { color: var(--color-status-unconfirmed-fill); background: var(--pattern-hatch); }
.tally__key { display: flex; flex-wrap: wrap; gap: var(--spacing-2) var(--spacing-5); margin-top: var(--spacing-3); }
.tally__key b { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); margin-inline-end: 0.2em; letter-spacing: 0; }

.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-3) var(--spacing-6); margin-bottom: var(--spacing-4); }
.filters .tag { min-height: 2.25rem; }
.filters .tag::after { inset: -4px 0; }
.filters__sort { color: var(--color-text-muted); }

.side-block > .label { display: block; padding-top: var(--spacing-3); border-top: var(--border-rule) solid var(--color-rule); margin-bottom: var(--spacing-2); }
.layout__rail > * + *, .layout__rail-sticky > * + * { margin-top: var(--spacing-8); }

/* ---- Рекламный слот ------------------------------------------------------
   Высота задаётся до загрузки рекламы и не зависит от её содержимого:
   сдвига вёрстки нет ни при пустом, ни при заполненном слоте.           */
.ad {
  --_h: var(--ad-height-inline);
  --_w: 300px;
  display: block;
  height: calc(var(--ad-label-height) + var(--_h));
  overflow: hidden;
  contain: layout paint;
}
.ad__label {
  display: flex; align-items: center; justify-content: center;
  height: var(--ad-label-height);
  color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.ad__box {
  display: grid; place-items: center;
  width: min(100%, var(--_w)); height: var(--_h); margin-inline: auto;
  background: var(--color-surface-sunken);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted); text-align: center;
}
.ad--banner { --_h: var(--ad-height-banner); --_w: 320px; }
@media (min-width: 48rem) { .ad--banner { --_h: var(--ad-height-leaderboard); --_w: 728px; } }
@media (min-width: 64rem) { .ad--rail { --_h: var(--ad-height-rail); } }
.ad--static-inline { --_h: var(--ad-height-inline); --_w: 300px; }
.ad--static-rail { --_h: var(--ad-height-rail); --_w: 300px; }
.ad--static-mobile-banner { --_h: var(--ad-height-banner); --_w: 320px; }
.ad--static-leaderboard { --_h: var(--ad-height-leaderboard); --_w: 728px; }

/* ---- Подвал -------------------------------------------------------------- */
.site-footer { border-top: var(--border-rule) solid var(--color-rule); padding-block: var(--spacing-8) var(--spacing-10); font-size: var(--text-sm); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-8); }
.disclaimer {
  display: grid; gap: var(--spacing-3);
  padding: var(--spacing-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  align-self: start;
}
.disclaimer__tag { justify-self: start; padding: 0.35em 0.55em; background: var(--color-accent); color: var(--color-accent-contrast); border-radius: var(--radius-sm); }
.disclaimer p { font-size: var(--text-base); line-height: var(--text-base--line-height); max-width: 44rem; }
.disclaimer p + p { color: var(--color-text-muted); font-size: var(--text-sm); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--spacing-6); }
.site-footer__links a { display: inline-flex; align-items: center; min-height: var(--spacing-tap); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-3) var(--spacing-6); color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: var(--spacing-4); }
.site-footer .theme-toggle { width: auto; padding-inline: var(--spacing-3); gap: var(--spacing-2); display: inline-flex; border: 1px solid var(--color-border-strong); }

@media (min-width: 64rem) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) 22rem; column-gap: var(--spacing-16); }
  .site-footer__bottom { grid-column: 1 / -1; }
}

/* ---- Страница состояний (components.html) -------------------------------- */
.spec { padding-block: var(--spacing-8) var(--spacing-section); }
.spec > * + * { margin-top: var(--spacing-section); }
.spec__row { display: grid; gap: var(--spacing-6); grid-template-columns: minmax(0, 1fr); }
.spec__cap { color: var(--color-text-muted); margin-bottom: var(--spacing-2); text-transform: uppercase; letter-spacing: 0.04em; }
.spec__inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-4) var(--spacing-6); }
@media (min-width: 64rem) { .spec__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .spec__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.is-focus { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.is-hover.qcard { border-color: var(--color-rule); }
.is-hover .qcard__q a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }

/* ---- Меньше движения: шкала не анимируется, прокрутка без плавности ------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---- Печать: ответ и источники, без рекламы и навигации ------------------ */
@media print {
  .site-header, .ad, .mock-note, .site-footer__links, .theme-toggle, .layout__rail { display: none !important; }
  body { background: #fff; color: #000; }
  .answer { break-inside: avoid; }
}