/* =========================================================================
   components.css — компоненты каркаса и содержательных страниц.
   Порядок разделов:
     1. Кнопки
     2. Прогресс чтения
     3. Шапка, навигация, переключатель темы, поиск
     4. Хлебные крошки
     5. Карточки, статистика, врезки
     6. Статусные чипы
     7. Блок правила, информационная плашка, цитата нормы
     8. Тултипы
     9. Таблицы и таблицы-карточки
    10. Переключатель отраслей, аккордеон FAQ, схемы
    11. Появление при прокрутке
    12. Кнопка «Наверх»
    13. Подвал
    14. Страница 404
    15. ПЕЧАТЬ
   ========================================================================= */

/* ========================= 1. КНОПКИ ===================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: var(--sp-3) var(--sp-5);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-m);
  font-weight: var(--fw-bold);
  font-size: var(--fs-s);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.btn:visited { color: var(--btn-secondary-text); }
.btn:hover { background: var(--btn-secondary-hover-bg); color: var(--btn-secondary-hover-text); }

.btn--primary,
.btn--primary:visited {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.btn--primary:hover {
  background: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-text);
}

.btn--secondary,
.btn--secondary:visited {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--color-border-strong);
}

.btn--ghost,
.btn--ghost:visited {
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
  border-color: var(--color-border-strong);
}

.btn--ghost:hover {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-hover-text);
}

.btn--lg {
  font-size: var(--fs-m);
  padding: var(--sp-4) var(--sp-6);
  min-height: 3.25rem;
}

.btn--block { display: flex; width: 100%; }

.btn__icon { flex: none; width: 1.15em; height: 1.15em; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block: var(--sp-5);
}

/* ========================= 2. ПРОГРЕСС ЧТЕНИЯ ============================ */
.read-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--progress-bg);
  z-index: var(--z-progress);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

.read-progress[data-active="true"] { opacity: 1; }

.read-progress__bar {
  height: 100%;
  width: 0;
  background: var(--progress-fill);
  transform-origin: left center;
}

/* ========================= 3. ШАПКА ====================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: var(--border-w) solid var(--header-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--header-h);
  transition: min-height var(--dur-base) var(--ease);
}

.site-header[data-scrolled="true"] { box-shadow: var(--shadow-s); }
.site-header[data-scrolled="true"] .site-header__inner { min-height: var(--header-h-compact); }
.site-header[data-scrolled="true"] .brand__sub { display: none; }

/* --- знак и название --- */
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--header-text);
  flex: 1 1 auto;
  min-width: 0;
}

.brand:visited { color: var(--header-text); }
.brand:hover { color: var(--header-text); }

.brand__mark { flex: none; width: 2rem; height: 2rem; }

.brand__name {
  display: block;
  font-weight: var(--fw-bold);
  font-size: var(--fs-m);
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand__sub {
  display: none;
  font-weight: var(--fw-regular);
  font-size: var(--fs-3xs);
  color: var(--header-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30ch;
}

/* --- действия справа --- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  margin-left: auto;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--header-text);
}

.icon-btn:hover { background: var(--color-surface-soft); }
.icon-btn svg { width: 1.25rem; height: 1.25rem; }

/* переключатель темы: две иконки, показывается одна */
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

/* закреплённый CTA — виден на всех ширинах */
.site-header .btn--cta {
  padding-inline: var(--sp-4);
  font-size: var(--fs-2xs);
  white-space: nowrap;
}

@media (min-width: 30rem) {
  .site-header .btn--cta { font-size: var(--fs-s); padding-inline: var(--sp-5); }
}

/* На узком экране CTA переносится во вторую строку шапки на всю ширину:
   так он остаётся видимым, а название продукта не сжимается в ноль. */
@media (max-width: 33.99rem) {
  .site-header__inner {
    flex-wrap: wrap;
    row-gap: var(--sp-2);
    padding-block: var(--sp-2);
    min-height: 0;
  }
  .site-header__inner > .btn--cta { flex: 1 0 100%; }
  .site-header[data-scrolled="true"] .site-header__inner { min-height: 0; }
}

@media (min-width: 90rem) {
  .brand__sub { display: block; }
}

/* --- меню --- */
.site-nav {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--nav-bg);
  border-bottom: var(--border-w) solid var(--header-border);
  box-shadow: var(--shadow-m);
  z-index: var(--z-nav);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}

.site-nav[data-open="false"] { display: none; }

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: var(--container);
  margin-inline: auto;
}

.site-nav__list li { margin: 0; }

.site-nav__link {
  display: block;
  padding: var(--sp-3) var(--sp-3);
  min-height: var(--tap-min);
  color: var(--nav-text);
  text-decoration: none;
  border-radius: var(--radius-s);
  font-size: var(--fs-s);
}

.site-nav__link:visited { color: var(--nav-text); }
.site-nav__link:hover { background: var(--nav-current-bg); color: var(--nav-current-text); }

.site-nav__link[aria-current="page"] {
  background: var(--nav-current-bg);
  color: var(--nav-current-text);
  font-weight: var(--fw-bold);
}

/* Десктоп: шапка в две строки — бренд с действиями сверху, разделы снизу
   во всю ширину контейнера. Восемь разделов с осмысленными подписями в одну
   строку с брендом и CTA не помещаются ни при какой разумной ширине; две
   строки — приём институциональных сайтов, и он не ломается на 1280. */
@media (min-width: 78rem) {
  .nav-toggle { display: none; }

  .site-header__inner {
    flex-wrap: wrap;
    align-items: center;
    min-height: 0;
    padding-block: var(--sp-2);
    row-gap: var(--sp-2);
  }

  .brand { flex: 0 0 auto; }
  .site-header__actions { margin-left: auto; }

  .site-nav,
  .site-nav[data-open="false"] {
    display: block;
    position: static;
    background: transparent;
    border: 0;
    border-top: var(--border-w) solid var(--header-border);
    box-shadow: none;
    overflow: visible;
    max-height: none;
    flex: 1 0 100%;
    order: 10;
    padding-top: var(--sp-2);
  }

  .site-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    gap: var(--sp-1);
    max-width: none;
  }

  .site-nav__link {
    padding: var(--sp-2) var(--sp-3);
    min-height: 0;
    font-size: var(--fs-2xs);
    white-space: nowrap;
  }

  .site-header[data-scrolled="true"] .site-header__inner {
    min-height: 0;
    padding-block: var(--sp-1);
  }
}

/* --- поиск по сайту --- */
.site-search { position: relative; }

.site-search__panel {
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  width: min(94vw, 30rem);
  background: var(--search-bg);
  color: var(--search-text);
  border: var(--border-w) solid var(--search-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  padding: var(--sp-3);
  z-index: var(--z-nav);
}

.site-search__panel[hidden] { display: none; }

.site-search__field {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-w) solid var(--search-border);
  border-radius: var(--radius-s);
  background: var(--search-bg);
  color: var(--search-text);
}

.site-search__results {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  max-height: 55vh;
  overflow-y: auto;
}

.site-search__results li { margin: 0; }

.site-search__results a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-s);
  text-decoration: none;
  color: var(--search-text);
}

.site-search__results a:hover,
.site-search__results a:focus-visible {
  background: var(--search-hit-bg);
  color: var(--search-hit-text);
}

.site-search__title { display: block; font-weight: var(--fw-bold); font-size: var(--fs-s); }
.site-search__snippet { display: block; color: var(--search-muted); font-size: var(--fs-2xs); }
.site-search__status { margin: var(--sp-2) 0 0; color: var(--search-muted); font-size: var(--fs-2xs); }

/* ========================= 4. ХЛЕБНЫЕ КРОШКИ ============================= */
.breadcrumbs {
  background: var(--crumb-bg);
  font-size: var(--fs-2xs);
  padding-block: var(--sp-3);
  border-bottom: var(--border-w) solid var(--color-border);
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  color: var(--crumb-text);
}

.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs li + li::before { content: "/"; color: var(--crumb-text); }
.breadcrumbs a { color: var(--crumb-link); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--crumb-text); }

/* ========================= 5. КАРТОЧКИ И ВРЕЗКИ ========================== */
.card {
  background: var(--card-bg);
  color: var(--card-text);
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-m);
  padding: var(--sp-5);
}

.card__title { font-size: var(--fs-l); margin-bottom: var(--sp-3); }
.card__meta { color: var(--card-muted); font-size: var(--fs-2xs); }
.card p:last-child { margin-bottom: 0; }
.card--accent { border-left: var(--accent-bar-w) solid var(--color-accent); }

.stat {
  background: var(--card-bg);
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-m);
  padding: var(--sp-5);
}

.stat__value {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.stat__label { display: block; margin-top: var(--sp-2); color: var(--card-muted); font-size: var(--fs-xs); }
.stat__source { display: block; margin-top: var(--sp-2); color: var(--card-muted); font-size: var(--fs-3xs); }

.callout {
  border-left: var(--accent-bar-w) solid var(--color-accent);
  background: var(--color-surface);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}

.callout > :last-child { margin-bottom: 0; }

/* ========================= 6. СТАТУСНЫЕ ЧИПЫ ============================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.2em 0.7em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  white-space: nowrap;
  background: var(--chip-out-bg);
  color: var(--chip-out-text);
}

.chip::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--chip-out-dot);
  flex: none;
}

.chip--ok { background: var(--chip-ok-bg); color: var(--chip-ok-text); }
.chip--ok::before { background: var(--chip-ok-dot); }

.chip--part { background: var(--chip-part-bg); color: var(--chip-part-text); }
.chip--part::before { background: var(--chip-part-dot); }

.chip--no { background: var(--chip-no-bg); color: var(--chip-no-text); }
.chip--no::before { background: var(--chip-no-dot); }

.chip--out { background: var(--chip-out-bg); color: var(--chip-out-text); }
.chip--out::before { background: var(--chip-out-dot); }

.chip-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block: var(--sp-4);
  padding: 0;
  list-style: none;
}

.chip-legend li { margin: 0; font-size: var(--fs-2xs); color: var(--color-text-muted); }

/* ========================= 7. ПРАВИЛА, ПЛАШКИ, ЦИТАТЫ ==================== */
.rule-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3) var(--sp-4);
  background: var(--rule-bg);
  color: var(--rule-text);
  border-left: var(--accent-bar-w) solid var(--rule-accent);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: var(--sp-5);
  margin-block: var(--sp-5);
}

.rule-box__icon {
  grid-row: 1 / span 2;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--rule-accent);
  margin-top: 0.15rem;
}

.rule-box__title {
  grid-column: 2;
  margin: 0;
  font-size: var(--fs-m);
  color: var(--rule-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-2xs);
}

.rule-box__body { grid-column: 2; }
.rule-box__body > :last-child { margin-bottom: 0; }
.rule-box__body p { max-width: none; }

.rule-box--warn {
  background: var(--warn-bg);
  color: var(--warn-text);
  border-left-color: var(--warn-accent);
}

.rule-box--warn .rule-box__icon { color: var(--warn-accent); }
.rule-box--warn .rule-box__title { color: var(--warn-label); }

.info-box {
  background: var(--info-bg);
  color: var(--info-text);
  border: var(--border-w) solid var(--color-border);
  border-left: var(--accent-bar-w) solid var(--info-accent);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: var(--sp-4) var(--sp-5);
  margin-block: var(--sp-5);
  font-size: var(--fs-s);
}

.info-box__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--info-label);
}

.info-box > :last-child { margin-bottom: 0; }
.info-box p { max-width: none; }

/* цитата нормы: название акта, номер, дата, статья, часть — обязательны */
.norm {
  background: var(--quote-bg);
  color: var(--quote-text);
  border-left: var(--accent-bar-w) solid var(--quote-accent);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: var(--sp-4) var(--sp-5);
  margin-block: var(--sp-5);
}

.norm blockquote { margin: 0; }
.norm p { max-width: none; }
.norm > :last-child { margin-bottom: 0; }

.norm__source {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--quote-label);
  font-style: normal;
}

.norm__source a { color: var(--link-text); }

/* ссылка, открывающаяся в новой вкладке */
.ext::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.3em;
  vertical-align: baseline;
  background-color: currentColor;
  -webkit-mask: var(--ext-icon) center / contain no-repeat;
  mask: var(--ext-icon) center / contain no-repeat;
}

:root {
  --ext-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M9 2h5v5M14 2 7 9M12 9.5V14H2V4h4.5'/%3E%3C/svg%3E");
}

/* ========================= 8. ТУЛТИПЫ ==================================== */
.has-tip {
  border-bottom: 1px dashed var(--color-border-strong);
  cursor: help;
  position: relative;
}

.tip-bubble {
  position: absolute;
  z-index: var(--z-tip);
  max-width: min(22rem, 92vw);
  background: var(--tip-bg);
  color: var(--tip-text);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-l);
  font-size: var(--fs-2xs);
  line-height: 1.5;
  pointer-events: none;
}

.tip-bubble[hidden] { display: none; }

/* ========================= 9. ТАБЛИЦЫ ==================================== */
.table-wrap { overflow-x: auto; margin-block: var(--sp-5); }

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--table-bg);
  color: var(--table-text);
  font-size: var(--fs-s);
  margin: 0;
}

.table caption {
  caption-side: top;
  text-align: left;
  color: var(--table-muted);
  font-size: var(--fs-2xs);
  padding-bottom: var(--sp-3);
}

.table th,
.table td {
  border: var(--border-w) solid var(--table-border);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.table tbody tr:nth-child(even) {
  background: var(--table-zebra-bg);
  color: var(--table-zebra-text);
}

.table--fixed { table-layout: fixed; }

/* таблица-карточки: ниже 45rem строка становится карточкой «подпись → значение» */
@media (max-width: 44.99rem) {
  .table--cards,
  .table--cards caption,
  .table--cards thead,
  .table--cards tbody,
  .table--cards tr,
  .table--cards th,
  .table--cards td { display: block; width: 100%; }

  .table--cards thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .table--cards tbody tr {
    border: var(--border-w) solid var(--table-border);
    border-radius: var(--radius-m);
    margin-bottom: var(--sp-4);
    padding: var(--sp-2) 0;
    background: var(--table-bg);
    color: var(--table-text);
  }

  .table--cards tbody tr:nth-child(even) {
    background: var(--table-zebra-bg);
    color: var(--table-zebra-text);
  }

  .table--cards td {
    border: 0;
    border-bottom: var(--border-w) dotted var(--table-border);
    padding: var(--sp-3) var(--sp-4);
  }

  .table--cards td:last-child { border-bottom: 0; }

  .table--cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-3xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--table-muted);
    margin-bottom: var(--sp-1);
  }

  .table-wrap { overflow-x: visible; }
}

/* ========================= 10. ПЕРЕКЛЮЧАТЕЛЬ, FAQ, СХЕМЫ ================= */
.seg { margin-block: var(--sp-5); }

.seg__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  border-bottom: var(--border-w) solid var(--color-border);
  padding: 0 0 var(--sp-3);
  margin: 0 0 var(--sp-5);
  list-style: none;
}

.seg__tabs li { margin: 0; }

.seg__tab {
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-4);
  border: var(--border-w) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
  font-size: var(--fs-s);
  font-weight: var(--fw-bold);
}

.seg__tab[aria-selected="true"] {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}

.seg__panel[hidden] { display: none; }

.faq { margin-block: var(--sp-5); }

.faq__item {
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--card-bg);
  color: var(--card-text);
  margin-bottom: var(--sp-3);
}

.faq__q {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-4) var(--sp-5);
  font-weight: var(--fw-bold);
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: "";
  margin-left: auto;
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}

.faq__item[open] .faq__q::after { transform: rotate(-135deg); }

.faq__a { padding: 0 var(--sp-5) var(--sp-5); }
.faq__a > :last-child { margin-bottom: 0; }
.faq__a p { max-width: none; }

.fig {
  margin-block: var(--sp-6);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--sp-4);
  background: var(--card-bg);
}

.fig__scroll { overflow-x: auto; }
.fig img, .fig svg { margin-inline: auto; }

/* ========================= 11. ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ =================== */
/* Базовое состояние — ВИДИМОЕ. Анимацию включает только JS, поставив
   на <html> класс .js-reveal. Сломается скрипт — контент останется на месте. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.js-reveal .reveal.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ========================= 12. КНОПКА «НАВЕРХ» =========================== */
.to-top {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-totop);
  width: var(--tap-min);
  height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--totop-bg);
  color: var(--totop-text);
  box-shadow: var(--shadow-m);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease),
              visibility var(--dur-base) var(--ease);
}

.to-top[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 1.25rem; height: 1.25rem; }

/* ========================= 13. ПОДВАЛ ==================================== */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding-block: var(--sp-7) var(--sp-5);
  margin-top: var(--sp-8);
}

.site-footer h2,
.site-footer h3 { color: var(--footer-text); }

.site-footer a { color: var(--footer-link); text-decoration: none; }
.site-footer a:visited { color: var(--footer-link); }
.site-footer a:hover { text-decoration: underline; }

.site-footer__cols {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) { .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .site-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.site-footer__title {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--sp-3);
  color: var(--footer-muted);
}

.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: var(--sp-2); font-size: var(--fs-s); }

.site-footer__req {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: var(--border-w) solid var(--footer-border);
  font-size: var(--fs-2xs);
  color: var(--footer-muted);
}

.site-footer__req p { max-width: 60rem; }
.site-footer__req a { color: var(--footer-link); }

.glossary { margin: 0; font-size: var(--fs-2xs); }
.glossary dt { color: var(--footer-text); font-weight: var(--fw-bold); margin-top: var(--sp-2); }
.glossary dd { color: var(--footer-muted); margin: 0 0 var(--sp-2); }

/* ========================= 14. СТРАНИЦА 404 ============================== */
.error-page {
  background: var(--error-bg);
  color: var(--error-text);
  padding-block: var(--sp-9);
  text-align: left;
}

.error-page__code {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: -0.03em;
}

.error-page__lead { color: var(--error-muted); font-size: var(--fs-l); }
.error-page__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block: var(--sp-6); }

/* ========================= 15. ПЕЧАТЬ ==================================== */
@media print {
  /* Печатаем всегда на светлом: страницу могли открыть в тёмной теме. */
  :root,
  :root[data-theme="dark"] {
    --color-canvas: #ffffff;
    --color-surface: #ffffff;
    --color-surface-soft: #f2f2f2;
    --color-text: #000000;
    --color-text-muted: #333333;
    --color-text-subtle: #333333;
    --color-border: #999999;
    --color-border-strong: #666666;
    --color-accent: #000000;
    --link-text: #000000;
    --link-hover-text: #000000;
    --link-visited-text: #000000;
    --band-bg: #ffffff;
    --band-text: #000000;
    --band-muted: #333333;
    --band-link: #000000;
    --card-bg: #ffffff;
    --card-text: #000000;
    --card-muted: #333333;
    --card-border: #999999;
    --figcap-text: #333333;
    --table-bg: #ffffff;
    --table-text: #000000;
    --table-muted: #333333;
    --table-border: #999999;
    --table-head-bg: #eeeeee;
    --table-head-text: #000000;
    --table-zebra-bg: #ffffff;
    --table-zebra-text: #000000;
    --rule-bg: #f4f4f4;
    --rule-text: #000000;
    --rule-label: #000000;
    --rule-accent: #000000;
    --warn-bg: #f4f4f4;
    --warn-text: #000000;
    --warn-label: #000000;
    --warn-accent: #000000;
    --info-bg: #f8f8f8;
    --info-text: #000000;
    --info-label: #333333;
    --info-accent: #666666;
    --quote-bg: #f8f8f8;
    --quote-text: #000000;
    --quote-label: #333333;
    --quote-accent: #000000;
    --chip-ok-bg: #ffffff;   --chip-ok-text: #000000;   --chip-ok-dot: #000000;
    --chip-part-bg: #ffffff; --chip-part-text: #000000; --chip-part-dot: #666666;
    --chip-no-bg: #ffffff;   --chip-no-text: #000000;   --chip-no-dot: #000000;
    --chip-out-bg: #ffffff;  --chip-out-text: #000000;  --chip-out-dot: #999999;
    --code-bg: #f2f2f2;      --code-text: #000000;
    --error-bg: #ffffff;     --error-text: #000000;     --error-muted: #333333;
    --shadow-s: none; --shadow-m: none; --shadow-l: none;
  }

  @page { size: A4; margin: 16mm 14mm; }

  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  /* не печатается */
  .site-header,
  .site-nav,
  .nav-toggle,
  .theme-toggle,
  .site-search,
  .to-top,
  .consultant,
  .read-progress,
  .modal,
  [data-modal],
  .skip-link,
  .btn-row,
  .seg__tabs,
  [hidden] { display: none !important; }

  .site-footer { margin-top: var(--sp-5); padding-block: var(--sp-4); }
  .site-footer__cols { display: none; }

  /* всё раскрыто: аккордеоны и вкладки на бумаге не сворачиваются */
  .faq__item { display: block; }
  .faq__a { display: block !important; padding-bottom: var(--sp-3); }
  .seg__panel { display: block !important; }
  .seg__panel[hidden] { display: block !important; }
  details { display: block; }
  details > summary { list-style: none; }

  /* блоки, которые нельзя рвать между страницами */
  .card, .fig, .rule-box, .info-box, .stat, .callout, .mock, .norm,
  .table thead, .table tr, .faq__item, figure, blockquote {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  h2 { margin-top: var(--sp-5); }

  /* ссылки не разворачиваются в километры URL */
  a, a:visited { color: #000000 !important; text-decoration: underline; }
  a[href]::after { content: none !important; }

  img, svg { max-width: 100% !important; }
  .table-wrap { overflow: visible !important; }
  .table { font-size: 9.5pt; }

  /* на бумаге таблица остаётся таблицей, а не карточками */
  .table--cards,
  .table--cards caption,
  .table--cards thead,
  .table--cards tbody,
  .table--cards tr,
  .table--cards th,
  .table--cards td { display: revert; width: auto; }

  .table--cards thead {
    position: static;
    width: auto; height: auto;
    clip: auto; clip-path: none;
    display: table-header-group;
  }

  .table--cards td[data-label]::before { content: none; }

  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   16. ВОРОНКА: СКВОЗНЫЕ ТОЧКИ ЗАХВАТА                     (агент 04, фаза 3)
   Раздел добавлен в конец файла и ничего выше не переопределяет.

   Здесь живут только те блоки воронки, которые нужны на ЛЮБОЙ странице:
     · .consultant — виджет связи (мессенджер, звонок, почта, обратный звонок);
     · .modal      — модальное окно (exit-intent, обратный звонок);
     · .capture    — компактный блок заявки в конце содержательной страницы.
   Разметку этих трёх блоков собирает раздел 9 site.js, поэтому страницам
   других агентов править не пришлось.

   Формы, квиз, календарь и калькулятор страниц воронки — в assets/forms.css.
   Новых токенов раздел не заводит: используются существующие пары
   --card-*, --band-*, --chip-*, --rule-*, --info-*, --btn-*.
   ========================================================================= */

/* ---------- 16.1. Виджет связи ---------- */
.consultant {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-totop);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
  max-width: min(20rem, calc(100vw - 2 * var(--sp-4)));
}

.consultant__panel {
  width: 17.5rem;
  max-width: 100%;
  padding: var(--sp-4);
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-l);
  background: var(--card-bg);
  color: var(--card-text);
  box-shadow: var(--shadow-l);
}

.consultant__panel[hidden] { display: none; }

.consultant__title {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-s);
  font-weight: var(--fw-bold);
}

.consultant__note {
  margin: 0 0 var(--sp-3);
  max-width: none;
  font-size: var(--fs-3xs);
  line-height: 1.5;
  color: var(--card-muted);
}

.consultant__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.consultant__list li { margin: 0; }

.consultant__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--btn-ghost-bg);
  color: var(--card-text);
  font-size: var(--fs-2xs);
  text-align: left;
  text-decoration: none;
  line-height: 1.35;
}

.consultant__link:hover,
.consultant__link:visited { color: var(--card-text); }
.consultant__link:hover { background: var(--btn-secondary-bg); border-color: var(--color-border-strong); }

.consultant__link svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--color-accent); }
.consultant__link b { display: block; font-weight: var(--fw-bold); }
.consultant__link span { display: block; color: var(--card-muted); }

.consultant__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-5);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-pill);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: var(--fs-s);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-m);
}

.consultant__toggle:hover { background: var(--btn-primary-hover-bg); }
.consultant__toggle svg { width: 1.2rem; height: 1.2rem; flex: none; }

@media (max-width: 47.99rem) {
  .consultant { right: var(--sp-3); bottom: var(--sp-3); }
  .consultant__toggle .consultant__toggle-text { display: none; }
  .consultant__toggle { padding: var(--sp-3); border-radius: 50%; }
}

/* «Наверх» не должна перекрывать виджет */
.to-top { margin-bottom: 3.5rem; }

/* ---------- 16.2. Модальное окно ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-tip);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--band-bg);
  background: color-mix(in srgb, var(--band-bg) 86%, transparent);
  overflow-y: auto;
}

.modal[hidden] { display: none; }

.modal__dialog {
  position: relative;
  width: min(38rem, 100%);
  max-height: calc(100vh - 2 * var(--sp-4));
  overflow-y: auto;
  padding: var(--sp-6);
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-l);
  background: var(--card-bg);
  color: var(--card-text);
  box-shadow: var(--shadow-l);
}

.modal__title { margin: 0 0 var(--sp-3); font-size: var(--fs-2xl); padding-right: 2.5rem; }
.modal__dialog p { max-width: none; }

.modal__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: var(--tap-min);
  height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--btn-ghost-bg);
  color: var(--card-text);
}

.modal__close:hover { background: var(--btn-secondary-bg); }
.modal__close svg { width: 1.1rem; height: 1.1rem; }

.modal__list { margin: 0 0 var(--sp-5); padding-left: 1.3em; font-size: var(--fs-s); }

/* ---------- 16.3. Компактный блок заявки ---------- */
.capture {
  margin-top: var(--sp-8);
  padding-block: var(--sp-7);
  border-top: var(--border-w) solid var(--color-border);
  background: var(--color-surface);
}

.capture__title { margin: 0 0 var(--sp-3); font-size: var(--fs-2xl); }
.capture__lead { margin-bottom: var(--sp-5); color: var(--color-text-muted); }

.capture__form {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
  align-items: end;
  max-width: 60rem;
}

@media (min-width: 60rem) {
  .capture__form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
}

.capture__field { min-width: 0; }

.capture__label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-1);
}

.capture__input {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-w) solid var(--color-border-strong);
  border-radius: var(--radius-m);
  background: var(--card-bg);
  color: var(--card-text);
  font-size: var(--fs-s);
}

.capture__input[aria-invalid="true"] { border-color: var(--chip-no-dot); border-width: 2px; }

.capture__error {
  display: none;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-s);
  background: var(--chip-no-bg);
  color: var(--chip-no-text);
  font-size: var(--fs-2xs);
  max-width: 46rem;
}

.capture__error[data-shown="true"] { display: block; }

.capture__note { margin: var(--sp-4) 0 0; font-size: var(--fs-2xs); color: var(--color-text-muted); }

/* ---------- 16.4. Печать: точки захвата на бумаге не нужны ---------- */
@media print {
  .consultant,
  .modal,
  .capture { display: none !important; }
}

/* ========================= 16. ГЛАВНАЯ СТРАНИЦА =========================== */
/* Блоки, которые встречаются только на index.html: первый экран, полоса цифр,
   макет интерфейса, сравнение «таблица против системы», модальное окно показа.
   Своих цветовых литералов нет — только пары токенов, уже проверенные
   tools/contrast.py. Раздел добавлен последним, поэтому его печатные правила
   перебивают раздел 15. */

/* ---------- первый экран ---------- */
.hero__note {
  margin: var(--sp-4) 0 0;
  color: var(--band-muted);
  font-size: var(--fs-s);
  max-width: var(--measure);
}

.hero__aside {
  margin: var(--sp-3) 0 0;
  color: var(--band-muted);
  font-size: var(--fs-xs);
  max-width: var(--measure);
}

.statline {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

.statline li { margin: 0; }

@media (min-width: 40rem) {
  .statline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 72rem) {
  .statline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.statline .stat__value { font-size: var(--fs-2xl); }

/* ---------- оговорка внутри карточки ---------- */
.card__caveat {
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3);
  border-top: var(--border-w) dashed var(--card-border);
  color: var(--card-muted);
  font-size: var(--fs-2xs);
}

.figcap-note {
  margin-top: var(--sp-3);
  color: var(--figcap-text);
  font-size: var(--fs-xs);
  max-width: none;
}

/* ---------- макет интерфейса ---------- */
.mock {
  margin-block: var(--sp-6);
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-l);
  background: var(--card-bg);
  color: var(--card-text);
  box-shadow: var(--shadow-m);
  overflow: hidden;
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  border-bottom: var(--border-w) solid var(--card-border);
  font-size: var(--fs-3xs);
}

.mock__dots { display: inline-flex; gap: 0.3rem; flex: none; }

.mock__dots i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.mock__path {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock__badge {
  flex: none;
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: var(--radius-pill);
  padding: 0.15em 0.6em;
  white-space: nowrap;
}

.mock__body {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  /* Две колонки — только когда в макете действительно есть дерево разделов.
     Без этого условия единственный .mock__main попадал в фиксированный
     трек 15rem и таблица протокола сжималась в узкую полосу. */
  .mock__body:has(.mock__nav) { grid-template-columns: 15rem minmax(0, 1fr); }
}

.mock__nav {
  min-width: 0;                     /* иначе горизонтальный список распирает колонку */
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-bottom: var(--border-w) solid var(--card-border);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-3xs);
}

@media (min-width: 60rem) {
  .mock__nav {
    border-bottom: 0;
    border-right: var(--border-w) solid var(--card-border);
    padding: var(--sp-4);
  }
}

.mock__navtitle {
  margin: 0 0 var(--sp-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
}

.mock__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
}

.mock__nav li {
  margin: 0;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-s);
  white-space: nowrap;
}

@media (min-width: 60rem) {
  .mock__nav ul { display: block; overflow: visible; }
  .mock__nav li { margin-bottom: 0.15rem; }
  .mock__sub { padding-left: var(--sp-5); }
}

.mock__nav li.is-current {
  background: var(--nav-current-bg);
  color: var(--nav-current-text);
  font-weight: var(--fw-bold);
}

.mock__main { padding: var(--sp-4); min-width: 0; }

@media (min-width: 48rem) {
  .mock__main { padding: var(--sp-5); }
}

.mock__title {
  margin: 0 0 var(--sp-2);
  font-weight: var(--fw-bold);
  font-size: var(--fs-s);
  max-width: none;
}

.mock__meta {
  margin: 0 0 var(--sp-4);
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.mock__status,
.mock__flag {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 0.2em 0.7em;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
}

.mock__status { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
.mock__flag { background: var(--chip-ok-bg); color: var(--chip-ok-text); }

.mock__tabs {
  display: flex;
  gap: var(--sp-2);
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0 0 var(--sp-3);
  border-bottom: var(--border-w) solid var(--card-border);
  overflow-x: auto;
}

.mock__tabs li { margin: 0; }

.mock__tab {
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-4);
  white-space: nowrap;
  border: var(--border-w) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}

.mock__tab[aria-selected="true"] {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}

.mock__panel[hidden] { display: none; }

.mock__fields {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
  margin: 0;
}

@media (min-width: 48rem) {
  .mock__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock__wide { grid-column: 1 / -1; }
}

.mock__fields > div {
  border-bottom: var(--border-w) dashed var(--card-border);
  padding-bottom: var(--sp-2);
}

.mock__fields dt {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

.mock__fields dd {
  margin: 0.15rem 0 0;
  font-size: var(--fs-xs);
}

.mock__fields b { color: var(--chip-no-text); margin-left: 0.15em; }

.mock__scroll { overflow-x: auto; }

.mock__table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--fs-3xs);
  margin: 0;
  background: var(--table-bg);
  color: var(--table-text);
}

.mock__table th,
.mock__table td {
  text-align: left;
  vertical-align: top;
  /* Плотная сетка интерфейса: с боковым отступом --sp-3 шестиколоночный
     реестр не помещался в колонку макета и обрезал последнее слово. */
  padding: var(--sp-2);
  border-bottom: var(--border-w) solid var(--table-border);
}

.mock__table thead th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  font-weight: var(--fw-bold);
}

.mock__hint {
  margin: var(--sp-3) 0 0;
  color: var(--figcap-text);
  font-size: var(--fs-3xs);
  max-width: none;
}

/* ---------- сравнение «таблица против системы» ---------- */
.compare {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  margin-block: var(--sp-5);
}

@media (min-width: 60rem) {
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.compare__pane {
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-m);
  background: var(--card-bg);
  color: var(--card-text);
  padding: var(--sp-4);
}

.compare__pane--chaos { border-left: var(--accent-bar-w) solid var(--chip-no-dot); }
.compare__pane--order { border-left: var(--accent-bar-w) solid var(--chip-ok-dot); }

.compare__title {
  margin: 0 0 var(--sp-3);
  font-weight: var(--fw-bold);
  font-size: var(--fs-s);
  max-width: none;
}

.compare__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.compare__file {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  background: var(--code-bg);
  color: var(--code-text);
  padding: 0.15em 0.5em;
  border-radius: var(--radius-s);
  overflow-wrap: anywhere;
}

.compare__rows {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  display: grid;
  gap: 2px;
  font-size: var(--fs-3xs);
}

.compare__rows li {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-s);
  background: var(--color-surface);
  color: var(--color-text);
}

@media (min-width: 30rem) {
  .compare__rows li { grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) minmax(0, 1fr); }
}

.compare__rows li.is-red { background: var(--chip-no-bg); color: var(--chip-no-text); }
.compare__rows li.is-amber { background: var(--chip-part-bg); color: var(--chip-part-text); }

.compare__st { font-weight: var(--fw-bold); }
.compare__st.is-late { color: var(--chip-no-text); }
.compare__st.is-done { color: var(--chip-ok-text); }

.compare__note {
  margin: 0;
  color: var(--card-muted);
  font-size: var(--fs-3xs);
  max-width: none;
}

/* ---------- модальное окно «как это работает» ---------- */
.demo-modal[hidden] { display: none; }

.demo-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-tip) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.demo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--band-bg);
  opacity: 0.75;
}

.demo-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 46rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--card-bg);
  color: var(--card-text);
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
}

.demo-modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  border-bottom: var(--border-w) solid var(--card-border);
}

.demo-modal__title {
  margin: 0;
  font-size: var(--fs-xl);
  flex: 1 1 auto;
}

.demo-modal__close { flex: none; }

.demo-modal__body { padding: var(--sp-5); }

.demo-modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  border-top: var(--border-w) solid var(--card-border);
}

body.is-demo-open { overflow: hidden; }

.demo__steps { list-style: none; margin: 0; padding: 0; }
.demo__step { margin: 0; }
.demo__step[hidden] { display: none; }

.demo__caption {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--card-muted);
  max-width: none;
}

.demo__scene {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-m);
  background: var(--color-surface);
}

.demo__line {
  margin: 0;
  max-width: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-s);
  font-size: var(--fs-xs);
  background: var(--card-bg);
  color: var(--color-text);
}

.demo__line--mail { background: var(--code-bg); color: var(--code-text); }
.demo__line--status { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); font-weight: var(--fw-bold); }
.demo__line--warn { background: var(--warn-bg); color: var(--warn-text); font-weight: var(--fw-bold); }
.demo__line--doc { background: var(--chip-ok-bg); color: var(--chip-ok-text); font-weight: var(--fw-bold); }

.demo__line--arrow {
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-3xs);
  padding: 0 var(--sp-3) 0 1.4rem;
  position: relative;
}

.demo__line--arrow::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.15rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.demo__line--branch {
  background: transparent;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.demo__line--branch span {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-radius: var(--radius-pill);
  padding: 0.25em 0.75em;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
}

.demo__note {
  margin: var(--sp-3) 0 0;
  color: var(--card-muted);
  font-size: var(--fs-2xs);
  max-width: none;
}

.demo__progress { margin: 0; font-size: var(--fs-2xs); color: var(--card-muted); }

.demo__controls { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.demo__step[data-demo-step] { animation: demo-in var(--dur-slow) var(--ease) both; }

@keyframes demo-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .demo__step[data-demo-step] { animation: none; }
}

/* ---------- печать: макеты раскрываются, окно показа не печатается ---------- */
@media print {
  /* Скрытые вкладки макета на бумаге НЕ раскрываем: печатается активная,
     иначе разворот противоречит правилу «[hidden] не печатается». */
  .mock { box-shadow: none; }
  .mock__table { min-width: 0; }
  .compare, .compare__pane, .statline { break-inside: avoid; page-break-inside: avoid; }
}

/* =========================================================================
   17. СОДЕРЖАТЕЛЬНЫЕ СТРАНИЦЫ                             (агент 05, фаза 3)

   Раздел добавлен в конец файла и ничего выше не переопределяет.
   Здесь живут только те блоки, которые встречаются на внутренних
   содержательных страницах:
     · .page-layout / .toc  — липкий навигатор по разделам длинной страницы;
     · .fsm                 — конечный автомат статусов события;
     · .matrix              — матрица «действие × тип объекта»;
     · .gauge               — двухпороговый контроль сроков;
     · .filterbar           — фильтр карты «требование ↔ функция»;
     · .tiles               — реестры плитками вместо списка ссылок;
     · .checklist           — чек-лист самопроверки со счётчиком;
     · .steps / .kv / .flow — текстовые записи маршрутов и пар «поле ↔ норма».

   Своих цветовых литералов нет: используются только пары токенов, уже
   проверенные tools/contrast.py (--card-*, --chip-*, --table-*, --code-*,
   --info-*, --warn-*, --btn-*). Новых токенов раздел не заводит.
   ========================================================================= */

/* ---------- 17.1. Двухколоночная раскладка с липким навигатором ---------- */
.page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: start;
}

@media (min-width: 62.5rem) {          /* 1000 px — порог из задания */
  .page-layout { grid-template-columns: 16.5rem minmax(0, 1fr); gap: var(--sp-7); }
}

.page-layout__main { min-width: 0; }

/* Ниже 1000 px липкий навигатор сворачивается в компактный селектор:
   два одинаковых оглавления подряд читателю не нужны. */
.toc { display: none; }

@media (min-width: 62.5rem) { .toc { display: block; } }

.toc {
  min-width: 0;
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-m);
  background: var(--card-bg);
  color: var(--card-text);
  padding: var(--sp-4);
}

@media (min-width: 62.5rem) {
  .toc {
    position: sticky;
    top: calc(var(--header-h-compact) + var(--sp-4));
    max-height: calc(100vh - var(--header-h-compact) - 2 * var(--sp-4));
    overflow-y: auto;
  }
}

.toc__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--card-muted);
  max-width: none;
}

.toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc__list li { margin: 0; }

.toc__link {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-s);
  font-size: var(--fs-2xs);
  line-height: 1.35;
  text-decoration: none;
  color: var(--card-text);
  background: transparent;
}

.toc__link:hover { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }

.toc__link[aria-current="true"] {
  background: var(--nav-current-bg);
  color: var(--nav-current-text);
  font-weight: var(--fw-bold);
}

/* Компактный селектор ниже 1000 px */
.toc-compact { margin: 0 0 var(--sp-5); }
.toc-compact[hidden] { display: none !important; }

.toc-compact__label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.toc-compact__select {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-w) solid var(--color-border-strong);
  border-radius: var(--radius-m);
  background: var(--card-bg);
  color: var(--card-text);
  font-family: inherit;
  font-size: var(--fs-s);
}

@media (min-width: 62.5rem) { .toc-compact { display: none; } }

/* ---------- 17.2. Конечный автомат статусов ---------- */
.fsm {
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-l);
  background: var(--card-bg);
  color: var(--card-text);
  padding: var(--sp-4);
  margin-block: var(--sp-5);
}

@media (min-width: 48rem) { .fsm { padding: var(--sp-5); } }

.fsm__hint { margin: 0 0 var(--sp-4); font-size: var(--fs-2xs); color: var(--card-muted); max-width: none; }

.fsm__grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }

@media (min-width: 56rem) {
  .fsm__grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

.fsm__nodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fsm__nodes li { margin: 0; }

/* На узком экране 24 кнопки отодвинули бы панель на экран вниз — список
   получает собственную прокрутку, панель остаётся в пределах досягаемости. */
@media (max-width: 55.99rem) {
  .fsm__nodes { max-height: 21rem; overflow-y: auto; }
}

.fsm__node {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-s);
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
  font-family: inherit;
  font-size: var(--fs-2xs);
  line-height: 1.3;
  text-align: left;
}

.fsm__node:hover { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }

.fsm__node[aria-pressed="true"] {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
  font-weight: var(--fw-bold);
}

.fsm__num {
  flex: none;
  min-width: 1.6em;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
}

.fsm__panel {
  min-width: 0;
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-m);
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--sp-4);
}

@media (min-width: 56rem) {
  .fsm__panel {
    position: sticky;
    top: calc(var(--header-h-compact) + var(--sp-4));
    align-self: start;
  }
}

.fsm__title { margin: 0 0 var(--sp-1); font-size: var(--fs-l); max-width: none; }
.fsm__code { margin: 0 0 var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--color-text-muted); max-width: none; }
.fsm__what { margin: 0 0 var(--sp-4); font-size: var(--fs-xs); max-width: none; }

.fsm__subtitle {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  max-width: none;
}

.fsm__out { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

.fsm__out li {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-s);
  background: var(--card-bg);
  color: var(--card-text);
  font-size: var(--fs-2xs);
  line-height: 1.4;
}

.fsm__out li b { display: block; }

.fsm__badge {
  display: inline-block;
  margin-top: var(--sp-1);
  border-radius: var(--radius-pill);
  padding: 0.15em 0.65em;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
}

.fsm__badge--comment { background: var(--chip-ok-bg); color: var(--chip-ok-text); }
.fsm__badge--nocomment { background: var(--chip-part-bg); color: var(--chip-part-text); }
.fsm__badge--end { background: var(--chip-out-bg); color: var(--chip-out-text); }

/* ---------- 17.3. Матрица «действие × тип объекта» ---------- */
/* position: relative обязателен: внутри ячеек есть подписи .visually-hidden
   (position: absolute). Без позиционированного предка их блок-контейнер —
   начальный, они не обрезаются прокруткой и растягивают документ вправо. */
.matrix__scroll { overflow-x: auto; position: relative; }

.matrix {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  margin: 0;
  background: var(--table-bg);
  color: var(--table-text);
  font-size: var(--fs-3xs);
}

.matrix th, .matrix td {
  border: var(--border-w) solid var(--table-border);
  padding: var(--sp-1);
  text-align: center;
  vertical-align: middle;
}

.matrix thead th, .matrix tbody th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  font-weight: var(--fw-bold);
}

.matrix tbody th { text-align: left; padding: var(--sp-2); min-width: 12rem; }

.matrix__btn {
  display: block;
  width: 100%;
  min-height: 2.25rem;
  padding: var(--sp-1);
  border: 0;
  border-radius: var(--radius-s);
  font-family: inherit;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.matrix__btn[data-on="yes"] { background: var(--chip-ok-bg); color: var(--chip-ok-text); }
.matrix__btn[data-on="no"] { background: var(--chip-out-bg); color: var(--chip-out-text); }
.matrix__btn[aria-pressed="true"] { outline: 3px solid var(--color-focus); outline-offset: -3px; }

.matrix__out {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-4);
  border-left: var(--accent-bar-w) solid var(--info-accent);
  border-radius: var(--radius-s);
  background: var(--info-bg);
  color: var(--info-text);
  font-size: var(--fs-xs);
  max-width: none;
  min-height: 4.5rem;
}

.matrix__out b { color: var(--info-label); }

/* ---------- 17.4. Двухпороговый контроль сроков ---------- */
.gauge {
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-l);
  background: var(--card-bg);
  color: var(--card-text);
  padding: var(--sp-5);
  margin-block: var(--sp-5);
}

.gauge__label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-s); font-weight: var(--fw-bold); }

.gauge__input { width: 100%; min-height: var(--tap-min); accent-color: var(--color-accent); }

.gauge__scale {
  display: flex;
  justify-content: space-between;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-3xs);
  color: var(--card-muted);
  max-width: none;
}

.gauge__state {
  margin: 0;
  padding: var(--sp-4);
  border-radius: var(--radius-m);
  font-size: var(--fs-s);
  max-width: none;
}

.gauge__state[data-level="ok"] { background: var(--chip-ok-bg); color: var(--chip-ok-text); }
.gauge__state[data-level="red"] { background: var(--chip-part-bg); color: var(--chip-part-text); }
.gauge__state[data-level="dead"] { background: var(--chip-no-bg); color: var(--chip-no-text); }

.gauge__state b { display: block; margin-bottom: var(--sp-1); }

/* ---------- 17.5. Фильтр карты требований ---------- */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block: var(--sp-4);
  padding: 0;
  list-style: none;
}

.filterbar li { margin: 0; }

.filterbar__btn {
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-4);
  border: var(--border-w) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
  font-family: inherit;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}

.filterbar__btn:hover { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }

.filterbar__btn[aria-pressed="true"] {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
}

.filter-status { margin: 0 0 var(--sp-3); font-size: var(--fs-2xs); color: var(--color-text-muted); }

/* ---------- 17.6. Плитки реестров ---------- */
.tiles {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tiles li { margin: 0; }

.tile {
  height: 100%;
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-m);
  background: var(--card-bg);
  color: var(--card-text);
  padding: var(--sp-4);
}

.tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--sp-3);
  border-radius: var(--radius-s);
  background: var(--code-bg);
  color: var(--code-text);
}

.tile__icon svg { width: 1.25rem; height: 1.25rem; }

.tile__title { margin: 0 0 var(--sp-2); font-size: var(--fs-s); font-weight: var(--fw-bold); max-width: none; }
.tile__text { margin: 0; font-size: var(--fs-2xs); color: var(--card-muted); max-width: none; }
.tile__text + .tile__text { margin-top: var(--sp-2); }

/* ---------- 17.7. Чек-лист самопроверки ---------- */
.checklist { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.checklist li { margin: 0; }

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: var(--tap-min);
  padding: var(--sp-3);
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-s);
  background: var(--card-bg);
  color: var(--card-text);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.checklist__item input { margin-top: 0.2em; width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--color-accent); }
.checklist__item span b { display: block; }
.checklist__item span i { display: block; font-style: normal; color: var(--card-muted); font-size: var(--fs-3xs); margin-top: 0.15em; }

.checklist__count {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-s);
  background: var(--info-bg);
  color: var(--info-text);
  font-size: var(--fs-s);
  font-weight: var(--fw-bold);
  max-width: none;
}

/* ---------- 17.7a. Схема маршрута: не сжимать до нечитаемого ---------- */
/* svg { max-width: 100% } из base.css ужимает схему на узком экране до
   нечитаемых подписей. Схеме маршрута задан нижний предел ширины, а
   .fig__scroll получает горизонтальную прокрутку. Текстовая запись того же
   маршрута есть в figcaption, поэтому прокрутка не единственный путь к смыслу. */
.fig__scroll > #marshrut-sobytiya { min-width: 52rem; }

/* ---------- 17.8. Текстовые записи маршрутов и пар ---------- */
.steps {
  list-style: none;
  counter-reset: step;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.steps li {
  counter-increment: step;
  margin: 0;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-s);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
}

.steps b { display: block; }

.kv { margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-2); }

.kv > div {
  display: grid;
  gap: 0.15rem var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--radius-s);
  background: var(--color-surface);
  color: var(--color-text);
}

@media (min-width: 44rem) { .kv > div { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); } }

.kv dt { font-size: var(--fs-3xs); color: var(--color-text-muted); }
.kv dd { margin: 0; font-size: var(--fs-xs); }

.flow {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-s);
  background: var(--code-bg);
  color: var(--code-text);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  line-height: 1.7;
  max-width: none;
  overflow-wrap: anywhere;
}

/* ---------- 17.9. Печать ---------- */
@media print {
  .toc, .toc-compact, .filterbar, .fsm__nodes, .gauge__input { display: none !important; }
  .page-layout { display: block; }
  .fsm, .gauge, .tile, .matrix__out, .checklist__item, .steps li { break-inside: avoid; page-break-inside: avoid; }
  .matrix { min-width: 0; font-size: 7pt; }
}

/* =========================================================================
   18. ЮРИДИЧЕСКИЕ СТРАНИЦЫ (legal/*.html)
   Нумерованные пункты документа, плашка «поле заполняет правообладатель»,
   карточка реквизитов. Новых цветовых токенов не вводит — использует
   существующие пары (--color-*, --warn-*, --card-*), поэтому contrast.py
   проверяет их автоматически.
   ========================================================================= */

/* ---------- 18.1. Нумерованные пункты вида «2.3.» ---------- */
.legal-list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  counter-reset: legal-item;
  max-width: var(--measure);
}

.legal-list > li {
  position: relative;
  margin: 0 0 var(--sp-4);
  padding-left: 3.2rem;
}

.legal-list > li::before {
  content: var(--legal-n, "") "." counter(legal-item) ".";
  counter-increment: legal-item;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-text-muted);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.legal-list > li > :first-child { margin-top: 0; }
.legal-list > li > :last-child { margin-bottom: 0; }
.legal-list ul { margin: var(--sp-2) 0 0; }

/* ---------- 18.2. Плейсхолдер реквизита ---------- */
.legal-tbd {
  display: inline;
  padding: 0.1em 0.3em;
  border-radius: var(--radius-s);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* Имя ключа хранилища в таблице: рвать по дефисам нельзя, читается как мусор. */
code.legal-key {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* ---------- 18.3. Карточка реквизитов правообладателя ---------- */
.legal-req {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-4) var(--sp-5);
  border: var(--border-w) solid var(--card-border);
  border-radius: var(--radius-m);
  background: var(--card-bg);
  color: var(--card-text);
  max-width: var(--measure);
}

.legal-req > div {
  display: grid;
  gap: 2px;
  padding: var(--sp-2) 0;
  border-top: var(--border-w) solid var(--card-border);
}

.legal-req > div:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 34rem) {
  .legal-req > div { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--sp-3); }
}

.legal-req dt { font-size: var(--fs-2xs); color: var(--card-muted); }
.legal-req dd { margin: 0; font-size: var(--fs-xs); }

/* ---------- 18.4. Печать ---------- */
@media print {
  .legal-list > li,
  .legal-req > div { break-inside: avoid; page-break-inside: avoid; }
  .legal-tbd { background: none; border: 1px dashed currentColor; }
}