/* ==========================================================================
   ISRA Ланселот: Оценка Риска Информационной Безопасности
   components.css — каркас (шапка, подвал, служебное) и общие компоненты.
   В конце файла — раздел ПЕЧАТЬ.

   Все цвета — через var(--…) из tokens.css. Литералов здесь нет:
   стилевые форки фазы 5 переопределяют токены, а не переписывают правила.
   ========================================================================== */

/* ==========================================================================
   1. КНОПКИ
   Минимальная область касания 44×44 px — требование не косметическое:
   на телефоне промах по кнопке «Запросить демонстрацию» стоит заявки.
   ========================================================================== */

.btn {
  --btn-fill: var(--btn-secondary-bg);
  --btn-ink: var(--btn-secondary-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  min-width: 44px;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--btn-fill);
  color: var(--btn-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-normal);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.btn:hover { color: var(--btn-ink); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-fill: var(--btn-primary-bg);
  --btn-ink: var(--btn-primary-text);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: color-mix(in srgb, var(--btn-primary-bg) 88%, var(--color-text)); }

.btn--secondary {
  --btn-fill: var(--btn-secondary-bg);
  --btn-ink: var(--btn-secondary-text);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover { border-color: var(--color-action); }

.btn--ghost {
  --btn-fill: transparent;
  --btn-ink: var(--color-text-link);
  border-color: transparent;
  padding-inline: var(--sp-3);
}
.btn--ghost:hover { background: var(--color-canvas-sunken); }

.btn--lg { min-height: 52px; padding: 0.95rem 1.75rem; font-size: var(--fs-md); }
.btn--sm { min-height: 44px; padding: 0.5rem 0.9rem; font-size: var(--fs-xs); }
.btn--block { display: flex; width: 100%; }

.btn__icon { flex: none; width: 18px; height: 18px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* ==========================================================================
   2. ШАПКА
   Двухъярусная: верхняя строка — знак, поиск, тема, CTA; нижняя — навигация.
   При прокрутке JS ставит [data-scrolled] и шапка становится компактной.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--t-mid) var(--ease);
}

.site-header[data-scrolled="true"] { box-shadow: var(--shadow-md); }

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
  padding-block: var(--sp-2);
  transition: min-height var(--t-mid) var(--ease);
}

.site-header[data-scrolled="true"] .site-header__bar {
  min-height: var(--header-h-compact);
}

/* --- Знак и название --- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-right: auto;
  min-width: 0;
  color: var(--header-text);
  text-decoration: none;
  padding-block: var(--sp-1);
}

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

.brand__mark {
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--color-action);
  transition: width var(--t-mid) var(--ease), height var(--t-mid) var(--ease);
}

.site-header[data-scrolled="true"] .brand__mark { width: 28px; height: 28px; }

.brand__name {
  display: block;
  min-width: 0;
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--header-text);
}

/* Полное название продукта присутствует на странице целиком: первая строка —
   «ISRA Ланселот:», вторая — «Оценка Риска Информационной Безопасности».
   Сокращать нельзя, поэтому на узких экранах вторая строка уходит только
   в доступное имя ссылки, оставаясь в разметке. */
.brand__descriptor {
  display: block;
  font-size: var(--fs-3xs);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: var(--ls-wide);
  color: var(--header-muted);
}

/* На широких экранах место есть — держим название одной строкой. */
@media (min-width: 900px) {
  .brand__descriptor { white-space: nowrap; }
}

.site-header[data-scrolled="true"] .brand__descriptor { display: none; }

/* --- Действия в шапке --- */

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--header-text);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.icon-btn:hover { background: var(--color-canvas-sunken); border-color: var(--color-border); }
.icon-btn__glyph { width: 21px; height: 21px; }

/* Переключатель темы: два контурных SVG, лишний спрятан.
   Типографские символы (☀/☾) в закрытом контуре превращаются в «тофу». */
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

.header-cta { flex: none; }

/* --- Навигация --- */

.site-nav {
  border-top: 1px solid var(--color-hairline);
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  padding-block: var(--sp-1) var(--sp-2);
}

/* 13 px, а не 15: восемь разделов при 15 px не помещаются в контейнер
   и меню переносится на вторую строку, задирая шапку. */
.site-nav__link {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: var(--r-sm);
  color: var(--header-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.site-nav__link:hover {
  color: var(--header-text);
  background: var(--color-canvas-sunken);
}

.site-nav__link[aria-current="page"] {
  color: var(--color-text-link);
  background: var(--tag-bg);
}

.nav-toggle { display: none; }

/* Мобильное меню: панель под шапкой. CTA дублируется внутри — кнопка обязана
   быть достижима на всех ширинах, в том числе из открытого меню. */
@media (max-width: 1099px) {
  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: var(--z-nav-panel);
    background: var(--header-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }

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

  .site-nav__list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding-block: var(--sp-2) var(--sp-4);
  }

  .site-nav__link {
    padding: 0.85rem 0.7rem;
    font-size: var(--fs-md);
    border-bottom: 1px solid var(--color-hairline);
    border-radius: 0;
    white-space: normal;
  }

  .site-nav__cta { padding: var(--sp-4) 0 0; }

  .nav-toggle { display: inline-flex; }
}

@media (min-width: 1100px) {
  .site-nav__cta { display: none; }
  .site-nav[data-open="false"] { display: block; }
}

/* Ниже 720 px кнопка уезжает из шапки в нижнюю закреплённую полосу:
   в строке шапки она уже не помещается рядом со знаком и значками. */
@media (max-width: 719px) {
  .header-cta { display: none; }
  .brand__descriptor {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ==========================================================================
   3. ПОИСК ПО САЙТУ
   Статический индекс assets/search-index.json, собираемый
   tools/build_search_index.py. Никаких внешних сервисов.
   ========================================================================== */

.site-search { position: relative; }

.site-search__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-2));
  z-index: var(--z-nav-panel);
  width: min(460px, calc(100vw - 2rem));
  padding: var(--sp-3);
  background: var(--search-bg);
  color: var(--search-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

/* Ниже 1100 px кнопка поиска стоит не у правого края шапки: справа от неё
   ещё переключатель темы, призыв и кнопка меню. Панель шире расстояния от
   кнопки до левого края окна, и, прижатая к кнопке, уезжала за границу экрана
   (документ при этом не прокручивался, поэтому автопроверки её не ловили).
   Ниже этой ширины панель прижимается к окну, а не к кнопке. */
@media (max-width: 1099px) {
  .site-search { position: static; }

  .site-search__panel {
    left: auto;
    right: var(--sp-4);
    width: min(460px, calc(100vw - 2 * var(--sp-4)));
  }
}

.site-search__field {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  background: var(--color-surface);
  color: var(--search-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}

.site-search__field::placeholder { color: var(--search-muted); opacity: 1; }

.site-search__results {
  margin-top: var(--sp-2);
  max-height: 52vh;
  overflow-y: auto;
}

.site-search__results li + li { border-top: 1px solid var(--color-hairline); }

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

.site-search__results a:hover { background: var(--color-canvas-sunken); }

.site-search__title { display: block; font-weight: 700; font-size: var(--fs-sm); }

.site-search__snippet {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--search-muted);
}

.site-search__status {
  padding: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--search-muted);
}

/* ==========================================================================
   4. ХЛЕБНЫЕ КРОШКИ (schema.org/BreadcrumbList)
   ========================================================================== */

.breadcrumbs {
  padding-block: var(--sp-4) 0;
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
}

.breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--sp-2); }

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--color-border-strong);
  border-right: 1px solid var(--color-border-strong);
  transform: rotate(45deg);
}

.breadcrumbs a { color: var(--color-text-subtle); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-text-link); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--color-text-muted); font-weight: 700; }

/* ==========================================================================
   5. ПОЛОСА ПРОГРЕССА ЧТЕНИЯ
   Живёт внутри шапки, поэтому не спорит с ней за верхний край экрана.
   ========================================================================== */

.read-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  pointer-events: none;
  background: transparent;
}

.read-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--color-action), var(--color-accent));
  transform-origin: left center;
  transition: width 80ms linear;
}

/* ==========================================================================
   6. КНОПКА «НАВЕРХ» и НИЖНЯЯ ПОЛОСА CTA
   ========================================================================== */

.to-top {
  position: fixed;
  right: var(--sp-4);
  bottom: calc(var(--ctabar-h) + var(--sp-4));
  z-index: var(--z-float);
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease),
              visibility var(--t-mid) var(--ease);
}

.to-top[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--color-action); }
.to-top__glyph { width: 20px; height: 20px; }

.cta-bar { display: none; }

@media (max-width: 719px) {
  :root { --ctabar-h: 68px; }

  .cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-float);
    display: block;
    padding: var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
    background: var(--header-bg);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 16px rgba(15, 30, 50, 0.12);
  }

  body { padding-bottom: var(--ctabar-h); }
}

/* ==========================================================================
   7. КАРТОЧКИ, ПЛИТКИ, ВРЕЗКИ
   ========================================================================== */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-xs);
}

.card--flat { box-shadow: none; }
.card--sunken { background: var(--color-surface-alt); }
.card--accent { border-top: 3px solid var(--color-accent); }

.card__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.card__body { margin-top: var(--sp-3); color: var(--color-text-muted); }
.card__body > * + * { margin-top: var(--sp-3); }

.card__meta {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-hairline);
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
}

/* Числовая плитка */
.stat {
  background: var(--stat-bg);
  color: var(--stat-text);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
}

.stat__value {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
}

.stat__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--stat-label);
}

.stat__note {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-3xs);
  color: var(--stat-label);
}

/* Врезка-иллюстрация: схема, макет, таблица с подписью */
.fig {
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.fig__body { padding: var(--sp-4); }

/* Схема с горизонтальной раскладкой. На узком экране она нечитаема, если
   ужать её по ширине окна, поэтому ниже 860 px схема получает минимальную
   ширину и прокручивается ВНУТРИ врезки. Прокрутки самой страницы при этом
   не появляется. Контейнеру нужен tabindex, иначе до прокрутки не добраться
   с клавиатуры. */
.fig__body--scroll { overflow-x: auto; }

.diagram { display: block; width: 100%; height: auto; }

/* Классы фигур внутри встроенных схем. Раньше они лежали в <style> внутри
   самого <svg>; под боевым CSP (style-src 'self', без 'unsafe-inline')
   встроенный <style> отклоняется, и схема превращалась в чёрные плашки с
   невидимым текстом. Здесь эти же правила приезжают обычным файлом стилей
   и работают под тем же CSP. */
.diagram .d-box {
  fill: var(--color-surface);
  stroke: var(--color-border-strong);
  stroke-width: 1.2;
}

.diagram .d-step { fill: var(--color-accent); }
.diagram .d-num  { fill: var(--color-surface); font: 700 11px "Carlito", sans-serif; }
.diagram .d-title { fill: var(--color-text); font: 700 15px "Carlito", sans-serif; }
.diagram .d-sub  { fill: var(--color-text-subtle); font: 400 12px "Carlito", sans-serif; }
.diagram .d-arrow { stroke: var(--color-accent); stroke-width: 1.6; fill: none; }
.diagram .d-head { fill: var(--color-accent); }

.fig__hint { display: none; }

@media (max-width: 859px) {
  .diagram { min-width: 700px; }
  .fig__hint {
    display: block;
    padding: 0 var(--sp-4) var(--sp-3);
    font-size: var(--fs-2xs);
    color: var(--color-text-subtle);
  }
}

.fig figcaption,
.fig__caption {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--color-hairline);
  background: var(--color-surface-alt);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-subtle);
}

/* Метка-эйбрау над заголовком */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--tag-bg);
  color: var(--tag-text);
  font-size: var(--fs-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

/* ==========================================================================
   8. СТАТУСНЫЕ ЧИПЫ
   Состояние дублируется точкой и текстом: чип читается без различения
   цветов и в чёрно-белой печати.
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.18em 0.6em;
  border-radius: var(--r-pill);
  background: var(--chip-muted-bg);
  color: var(--chip-muted-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: baseline;
}

.chip::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}

.chip--ok    { background: var(--chip-ok-bg);    color: var(--chip-ok-text); }
.chip--warn  { background: var(--chip-warn-bg);  color: var(--chip-warn-text); }
.chip--risk  { background: var(--chip-risk-bg);  color: var(--chip-risk-text); }
.chip--info  { background: var(--chip-info-bg);  color: var(--chip-info-text); }
.chip--muted { background: var(--chip-muted-bg); color: var(--chip-muted-text); }

/* Квадратная точка вместо круглой — второй, нецветовой признак «критично» */
.chip--risk::before { border-radius: 1px; }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* ==========================================================================
   9. АКЦЕНТНЫЙ БЛОК ПРАВИЛА и ИНФОРМАЦИОННАЯ ПЛАШКА
   ========================================================================== */

.rule-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  border-left: 4px solid currentColor;
  background: var(--rule-bg);
  color: var(--rule-text);
}

.rule-box__icon {
  grid-row: span 2;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: currentColor;
}

.rule-box__title {
  align-self: center;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: currentColor;
}

.rule-box__body {
  grid-column: 2;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.rule-box__body > * + * { margin-top: var(--sp-2); }
.rule-box__title + .rule-box__body { margin-top: calc(-1 * var(--sp-1)); }

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

.rule-box a { color: currentColor; text-decoration-color: currentColor; }

.info-box {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--info-bg);
  color: var(--info-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.info-box > * + * { margin-top: var(--sp-2); }
.info-box__title { font-weight: 700; font-size: var(--fs-sm); }
.info-box a { color: currentColor; }

/* Общий контейнер выноски — используется, когда нужна нейтральная врезка */
.callout {
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-alt);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* ==========================================================================
   10. ТУЛТИПЫ
   Разметка: <span class="has-tip" data-tip="…" tabindex="0">термин</span>
   Пузырь рисует site.js единственным элементом на <body> и позиционирует
   фиксированно с зажимом по краям экрана — обрезание краем невозможно.
   ========================================================================== */

.has-tip {
  border-bottom: 1px dashed var(--color-border-strong);
  cursor: help;
}

.tip-bubble {
  position: fixed;
  z-index: var(--z-tip);
  max-width: min(320px, calc(100vw - 2rem));
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--tip-bg);
  color: var(--tip-text);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  font-weight: 400;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease), visibility var(--t-fast) var(--ease);
}

.tip-bubble[data-visible="true"] { opacity: 1; visibility: visible; }

/* ==========================================================================
   11. ТАБЛИЦЫ
   Ниже 720 px .table--cards разворачивается в вертикальные карточки:
   подпись берётся из data-label. Горизонтальной прокрутки страницы нет.
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

.table caption {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  border-bottom: 1px solid var(--color-hairline);
}

.table th,
.table td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-hairline);
}

.table thead th {
  position: sticky;
  top: 0;
  background: var(--thead-bg);
  color: var(--thead-text);
  font-weight: 700;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  border-bottom: 1px solid var(--color-border);
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--color-surface-alt); }

.table th[scope="row"] { font-weight: 700; color: var(--color-text); }

/* Числовая колонка. Заголовок выравнивается вместе со значениями, иначе
   подпись висит у левого края, а число — у правого, и глазом их не связать. */
.table .num-cell { text-align: right; }
.table td.num-cell { font-family: var(--font-mono); }

@media (max-width: 719px) {
  .table--cards { display: block; }
  .table--cards thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .table--cards tbody,
  .table--cards tr,
  .table--cards td,
  .table--cards th { display: block; }

  .table--cards tr {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--color-border);
  }
  .table--cards tr:last-child { border-bottom: 0; }
  .table--cards tr:hover { background: transparent; }

  /* caption у таблицы с display:block схлопывается в узкую колонку. */
  .table--cards caption { display: block; }

  .table--cards td,
  .table--cards th {
    padding: var(--sp-1) 0;
    border-bottom: 0;
  }

  /* В режиме карточек числовая колонка теряет смысл выравнивания вправо:
     подпись и значение должны стоять в общей левой колонке. */
  .table--cards .num-cell { text-align: left; }

  .table--cards td[data-label]::before,
  .table--cards th[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: var(--fs-3xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--color-text-subtle);
  }

  .table--cards .table-wrap,
  .table-wrap:has(.table--cards) { overflow-x: visible; }
}

/* ==========================================================================
   12. ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   Базовое состояние — ВИДИМОЕ. Анимацию включает только JS, поставив
   .js-reveal на <html>. Сломается скрипт — контент останется на месте.
   ========================================================================== */

.reveal { opacity: 1; transform: none; }

/* Скрывается только то, что скрипт пометил data-reveal="pending" — то есть
   блок, который при загрузке был ниже экрана. Нет скрипта, нет атрибута —
   нет и скрытого содержимого. */
.js-reveal .reveal[data-reveal="pending"] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  will-change: opacity, transform;
}

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

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal[data-reveal="pending"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* На бумаге скрытого содержимого не бывает ни при каких условиях. */
@media print {
  .js-reveal .reveal[data-reveal="pending"] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   13. ПОДВАЛ
   Колонки «Продукт», «Компания», «Правовая информация», «Глоссарий».
   Юридические ссылки живут только здесь и открываются в новой вкладке.
   ========================================================================== */

/* Отступа сверху нет намеренно: подвал стыкуется с последней секцией
   встык. Иначе между тёмной полосой призыва и тёмным подвалом остаётся
   светлая щека в цвет холста. Воздух даёт собственный padding подвала. */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding-block: var(--sp-8) var(--sp-6);
}

/* :not(.btn) — по той же причине, что и в .section--dark: правило с типом
   элемента перебивает .btn и гасит надпись на кнопке. */
.site-footer a:not(.btn) { color: var(--footer-link); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--footer-link); text-decoration: underline; }

.site-footer__grid {
  display: grid;
  gap: var(--sp-6) var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/* Глоссарий вдвое длиннее остальных колонок и в равной сетке вытягивает
   подвал в столб. На широких экранах он занимает две доли и раскладывается
   в две колонки — высота подвала выравнивается по остальным. */
@media (min-width: 1000px) {
  .site-footer__grid { grid-template-columns: 0.85fr 1.15fr 1fr 1.9fr; }
  .glossary { column-count: 2; column-gap: var(--sp-5); }
  .glossary div { break-inside: avoid; }
}

.site-footer__col > * + * { margin-top: var(--sp-3); }

.site-footer__heading {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--footer-muted);
}

.site-footer__links > li + li { margin-top: var(--sp-2); }
.site-footer__links a { font-size: var(--fs-sm); }

/* Мини-глоссарий: термин + одно предложение */
.glossary { font-size: var(--fs-xs); line-height: var(--lh-snug); }
.glossary div + div { margin-top: var(--sp-3); }
.glossary dt { font-weight: 700; color: var(--footer-text); }
.glossary dd { margin: 2px 0 0; color: var(--footer-muted); }

/* Реквизиты */
.requisites {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--footer-muted);
}

.requisites > * + * { margin-top: var(--sp-2); }
.requisites strong { color: var(--footer-text); font-size: var(--fs-sm); }
.requisites a { color: var(--footer-link); }

.requisites__row { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }

/* Не переданные владельцем значения остаются явными плейсхолдерами —
   выдумывать регистрационные номера нельзя. */
.placeholder {
  padding: 0 0.35em;
  border: 1px dashed var(--footer-muted);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--footer-muted);
}

.site-footer__bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid color-mix(in srgb, var(--footer-muted) 30%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--footer-muted);
}

/* ==========================================================================
   14. ПЕРВЫЙ ЭКРАН и СЛУЖЕБНЫЕ СТРАНИЦЫ
   ========================================================================== */

.hero {
  position: relative;
  background: var(--hero-bg);
  color: var(--hero-text);
  padding-block: clamp(2.5rem, 7vw, 6rem);
  overflow: hidden;
}

/* «Миллиметровка» — намёк на расчётный лист. Только градиенты, без картинок. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--hero-muted) 12%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--hero-muted) 12%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(120% 90% at 15% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 15% 0%, #000 0%, transparent 72%);
}

.hero > * { position: relative; }

.hero__title {
  font-size: var(--fs-4xl);
  color: var(--hero-text);
  max-width: 20ch;
}

.hero__lead {
  margin-top: var(--sp-4);
  max-width: 58ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--hero-muted);
}

.hero__actions { margin-top: var(--sp-6); }
.hero .eyebrow { background: color-mix(in srgb, var(--hero-text) 14%, transparent); color: var(--hero-text); }

/* Заголовок внутренней страницы */
.page-head { padding-block: var(--sp-6) var(--sp-5); }
.page-head__title { margin-top: var(--sp-3); }
.page-head__lead { margin-top: var(--sp-4); max-width: var(--w-prose); }

/* Страница 404 */
.error-page {
  padding-block: clamp(3rem, 10vw, 7rem);
  text-align: center;
}

.error-page__code {
  font-family: var(--font-mono);
  font-size: clamp(3.5rem, 14vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--color-action);
}

.error-page__title { margin-top: var(--sp-4); }
.error-page__lead { margin-top: var(--sp-4); margin-inline: auto; max-width: 56ch; }
.error-page__actions { margin-top: var(--sp-6); justify-content: center; }
.error-page__links { margin-top: var(--sp-8); text-align: left; }

/* ==========================================================================
   15. ПЕЧАТЬ
   Формат A4. Крупные руководители печатают описание продукта перед
   совещанием, и на бумаге не должно быть ни навигации, ни виджетов,
   ни тёмного фона — страница может быть открыта в тёмной теме.
   ========================================================================== */

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

@media print {
  /* Тема принудительно светлая: печатать тёмный фон нельзя. */
  :root,
  :root[data-theme="dark"] {
    --color-canvas: #ffffff;
    --color-canvas-sunken: #ffffff;
    --color-surface: #ffffff;
    --color-surface-alt: #ffffff;
    --color-text: #000000;
    --color-text-muted: #1a1a1a;
    --color-text-subtle: #333333;
    --color-text-link: #000000;
    --color-border: #999999;
    --color-border-strong: #666666;
    --color-hairline: #cccccc;
    --color-action: #000000;
    --color-accent: #000000;
    --hero-bg: #ffffff;
    --hero-text: #000000;
    --hero-muted: #1a1a1a;
    --footer-bg: #ffffff;
    --footer-text: #000000;
    --footer-muted: #333333;
    --footer-link: #000000;
    --info-bg: #ffffff;
    --info-text: #000000;
    --rule-bg: #ffffff;
    --rule-text: #000000;
    --rule-warn-bg: #ffffff;
    --rule-warn-text: #000000;
    --code-bg: #f4f4f4;
    --code-text: #000000;
    --thead-bg: #eeeeee;
    --thead-text: #000000;
    --stat-bg: #ffffff;
    --stat-text: #000000;
    --stat-label: #333333;
    --chip-ok-bg: #ffffff;    --chip-ok-text: #000000;
    --chip-warn-bg: #ffffff;  --chip-warn-text: #000000;
    --chip-risk-bg: #ffffff;  --chip-risk-text: #000000;
    --chip-info-bg: #ffffff;  --chip-info-text: #000000;
    --chip-muted-bg: #ffffff; --chip-muted-text: #000000;
    --tag-bg: #ffffff;        --tag-text: #000000;
    --mark-bg: #f0f0f0;       --mark-text: #000000;
    --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
    color-scheme: light;
  }

  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 10.5pt;
    line-height: 1.42;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  /* Каркас и виджеты на бумаге не нужны */
  .site-header,
  .site-nav,
  .nav-toggle,
  .theme-toggle,
  .site-search,
  .to-top,
  .cta-bar,
  .consultant,
  .read-progress,
  .skip-link,
  .modal,
  [data-modal],
  [hidden] { display: none !important; }

  .breadcrumbs { display: none !important; }

  /* Кнопки — это действия, на бумаге они мусор.
     Исключение: главный призыв печатается как строка с телефоном и почтой,
     её даёт .print-only-contacts. */
  .btn,
  .btn-row { display: none !important; }

  .print-only { display: block !important; }

  .hero::before { display: none !important; }
  .hero, .section, .section--dark {
    padding-block: 0 0.6rem !important;
    background: #ffffff !important;
    color: #000000 !important;
  }

  .site-footer {
    margin-top: 0.8rem;
    padding-block: 0.5rem 0;
    border-top: 1pt solid #999999;
  }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
  .glossary, .site-footer__links { font-size: 8.5pt; }

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

  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  h2 { margin-top: 0.6rem; font-size: 14pt; }
  h3 { font-size: 12pt; }
  p, li { orphans: 3; widows: 3; }

  .card, .fig, .info-box, .rule-box, .table-wrap {
    border: 0.75pt solid #999999 !important;
    box-shadow: none !important;
  }

  /* Таблицы на бумаге — снова обычные таблицы, а не карточки */
  .table--cards { display: table !important; }
  .table--cards thead { position: static !important; width: auto; height: auto; clip: auto; clip-path: none; display: table-header-group !important; }
  .table--cards tbody { display: table-row-group !important; }
  .table--cards tr { display: table-row !important; padding: 0 !important; }
  .table--cards td,
  .table--cards th { display: table-cell !important; padding: 0.3rem 0.4rem !important; border-bottom: 0.5pt solid #cccccc !important; }
  .table--cards td[data-label]::before,
  .table--cards th[data-label]::before { display: none !important; }
  .table thead th { position: static !important; }
  .table-wrap { overflow: visible !important; }

  /* Ссылки не разворачиваются в километры URL. Телефон и почта на сайте
     всегда подписаны сами собой, поэтому дописывать к ним href не нужно:
     получилось бы «info@… (mailto:info@…)». */
  a { color: #000000 !important; text-decoration: none !important; }
  a::after { content: none !important; }

  /* Схема на бумаге вписывается в ширину полосы: горизонтальной прокрутки
     на листе не существует, и без этого правая колонка просто обрезается. */
  .fig__body--scroll { overflow: visible !important; }
  .diagram { min-width: 0 !important; width: 100% !important; }
  .fig__hint { display: none !important; }

  .chip { border: 0.75pt solid #000000; padding: 0 0.4em; }
  .chip::before { background: #000000 !important; }

  .grid, .site-footer__grid { gap: 0.5rem !important; }
  .container, .container--wide { max-width: none; padding-inline: 0; }
}

.print-only { display: none; }

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

/* --- 16.1 Первый экран ---------------------------------------------------
   Заголовок первого экрана — целое предложение с оборотом после тире.
   Он остаётся одним <h1>, но хвост после тире набирается мельче: иначе на
   1440 px строка уходит на пять полос и заголовок перестаёт читаться.
   -------------------------------------------------------------------------- */

.hero__title--long {
  font-size: var(--fs-3xl);
  max-width: 24ch;
}

.hero__title-tail {
  display: block;
  margin-top: var(--sp-3);
  max-width: 44ch;
  font-size: 0.5em;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--hero-muted);
}

.hero__lead--wide { max-width: 66ch; }

/* Ссылки на тёмном первом экране. Базовый --color-text-link — тёмно-синий,
   на --hero-bg он практически не виден; берём тот же светлый тон, что и в
   подвале (пара --footer-link / --footer-bg проверена). */
.hero a:not(.btn) { color: var(--footer-link); }

.hero__note {
  margin-top: var(--sp-3);
  max-width: 58ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--hero-muted);
}

.hero__quiet {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid color-mix(in srgb, var(--hero-muted) 28%, transparent);
  font-size: var(--fs-sm);
  color: var(--hero-muted);
}

.hero__quiet a { white-space: nowrap; }

/* Плашка происхождения и оговорок на тёмном фоне */
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--hero-muted) 42%, transparent);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--hero-text);
}

.hero__badge svg { flex: none; width: 15px; height: 15px; }

/* --- 16.2 Отраслевой переключатель --------------------------------------
   Разметка: role="tablist" + role="tab" + role="tabpanel", roving tabindex,
   стрелки и Home/End — поведение в site.js ([data-seg]).
   -------------------------------------------------------------------------- */

.seg { margin-top: var(--sp-6); }

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

.seg__tab {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: var(--lh-snug);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.seg__tab[aria-selected="true"] {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-text-on-brand);
}

/* Тот же переключатель на тёмном первом экране */
.hero .seg__tab {
  border-color: color-mix(in srgb, var(--hero-text) 34%, transparent);
  color: var(--hero-text);
}

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

.seg__panel { margin-top: var(--sp-4); }

.seg__list { max-width: 62ch; }

.seg__list li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.seg__list li + li { margin-top: var(--sp-2); }

.seg__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 2px;
  background: var(--color-accent);
}

.hero .seg__list li { color: var(--hero-muted); }
.hero .seg__list li strong { color: var(--hero-text); }

/* --- 16.3 Макет рабочего экрана -----------------------------------------
   Не картинка и не снимок: сущности, статусы и колонки — из состава модуля.
   Ниже 900 px макет прокручивается ВНУТРИ своей рамки, страница — нет.
   -------------------------------------------------------------------------- */

.mock {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.mock__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}

.mock__dots { display: inline-flex; gap: 5px; }

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

.mock__path {
  font-size: var(--fs-2xs);
  color: var(--color-text-subtle);
}

.mock__path b { color: var(--color-text-muted); font-weight: 700; }

.mock__bar .chip { margin-left: auto; }

.mock__scroll { overflow-x: auto; }

.mock__grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-width: 780px;
}

.mock__nav {
  padding: var(--sp-3);
  border-right: 1px solid var(--color-border);
  background: var(--color-canvas-sunken);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
}

.mock__nav ul { margin: 0; }
.mock__nav li { padding: 0.32rem 0.4rem; border-radius: var(--r-sm); color: var(--color-text-muted); }
.mock__nav li.is-sub { padding-left: var(--sp-5); color: var(--color-text-subtle); }
.mock__nav li.is-active { background: var(--tag-bg); color: var(--tag-text); font-weight: 700; }
.mock__nav h4 {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-3xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--color-text-subtle);
}

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

.mock__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--sp-3);
}

.mock__tab {
  min-height: 38px;
  padding: 0.45rem 0.75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-subtle);
  font-size: var(--fs-2xs);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.mock__tab[aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

.mock__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}

.mock__title { font-size: var(--fs-sm); font-weight: 700; }
.mock__sub { font-size: var(--fs-3xs); color: var(--color-text-subtle); }

.mock__table { width: 100%; border-collapse: collapse; font-size: var(--fs-2xs); }

.mock__table th {
  padding: 0.4rem 0.5rem;
  text-align: left;
  background: var(--thead-bg);
  color: var(--thead-text);
  font-size: var(--fs-3xs);
  font-weight: 700;
  white-space: nowrap;
}

.mock__table td {
  padding: 0.42rem 0.5rem;
  border-bottom: 1px solid var(--color-hairline);
  color: var(--color-text-muted);
  vertical-align: middle;
}

.mock__table tr:last-child td { border-bottom: 0; }
.mock__table .num-cell { text-align: right; font-variant-numeric: tabular-nums; }
.mock__table b { color: var(--color-text); }

.mock__foot {
  margin-top: var(--sp-3);
  font-size: var(--fs-3xs);
  color: var(--color-text-subtle);
}

.mock__hint {
  display: none;
  padding: 0 var(--sp-4) var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--color-text-subtle);
}

@media (max-width: 899px) {
  .mock__hint { display: block; }
}

@media (max-width: 719px) {
  .mock__grid { grid-template-columns: minmax(0, 1fr); min-width: 620px; }
  .mock__nav { display: none; }
}

/* --- 16.4 «Один экран вместо десятка таблиц» -----------------------------
   Слева — привычный расчётный файл: вкладки версий, ручная раскраска,
   версия в имени. Справа — одна строка реестра с посчитанным значением.
   Обе половины нарисованы стилями, картинок нет.
   -------------------------------------------------------------------------- */

.compare {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

@media (min-width: 900px) {
  .compare { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}

.compare__side {
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.compare__cap {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-hairline);
  background: var(--color-surface-alt);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

.compare__cap span { display: block; font-weight: 400; color: var(--color-text-subtle); }

.compare__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); flex: 1; }

/* Полоса вкладок файла */
.compare__filetabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: var(--sp-3);
}

.compare__filetab {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  background: var(--color-canvas-sunken);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--color-text-subtle);
}

.compare__filetab.is-active {
  background: var(--mark-bg);
  color: var(--mark-text);
  border-color: var(--mark-text);
}

/* Клетки «электронной таблицы»: заливки вручную, значения расходятся */
.sheet { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }

.sheet i {
  display: block;
  height: 15px;
  border-radius: 1px;
  background: var(--color-canvas-sunken);
  font-style: normal;
}

.sheet i.is-red   { background: var(--chip-risk-bg); }
.sheet i.is-amber { background: var(--chip-warn-bg); }
.sheet i.is-green { background: var(--chip-ok-bg); }
.sheet i.is-mark  { background: var(--mark-bg); }

.sheet i.is-text {
  height: auto;
  padding: 0 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  line-height: 15px;
  color: var(--color-text-subtle);
  overflow: hidden;
  white-space: nowrap;
}

.sheet i.is-err {
  background: var(--chip-risk-bg);
  color: var(--chip-risk-text);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  line-height: 15px;
  text-align: center;
}

.compare__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--color-text-subtle);
}

/* Правая половина: строки реестра */
.compare__rows { display: grid; gap: var(--sp-2); }

.compare__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-sm);
  background: var(--color-surface-alt);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.compare__row b { color: var(--color-text); font-family: var(--font-mono); }
.compare__row .chip { margin-left: auto; }

.compare__arrow {
  display: none;
  align-self: center;
  color: var(--color-accent);
}

@media (min-width: 900px) {
  .compare__arrow { display: block; }
  .compare__arrow svg { width: 34px; height: 34px; }
}

/* --- 16.5 Плитка механизма ------------------------------------------------ */

.mech__formula {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--code-bg);
  color: var(--code-text);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  overflow-x: auto;
}

/* --- 16.6 Кому подходит и кому нет ---------------------------------------
   Галочка и крест нарисованы рамками: типографские знаки ✓ и ✗ в подмножество
   гарнитуры не входят и в закрытом контуре выпали бы в «тофу».
   -------------------------------------------------------------------------- */

.fit-list li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.fit-list li + li { margin-top: var(--sp-3); }

.fit-list li::before,
.fit-list li::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.fit-list--yes li::before {
  left: 2px;
  top: 0.34em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--color-risk-low);
  border-bottom: 2px solid var(--color-risk-low);
  transform: rotate(-45deg);
}

.fit-list--no li::before,
.fit-list--no li::after {
  left: 3px;
  top: 0.72em;
  width: 14px;
  height: 0;
  border-top: 2px solid var(--color-risk-high);
}

.fit-list--no li::before { transform: rotate(45deg); }
.fit-list--no li::after  { transform: rotate(-45deg); }

/* --- 16.7 Модальное окно «Посмотреть, как это работает» -------------------
   Показ идёт по тем же макетам: переключение раздела, смена статуса,
   появление записи в истории. Видеофайла нет — только разметка и стили.
   При prefers-reduced-motion автопоказ не запускается, остаётся листание.
   -------------------------------------------------------------------------- */

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

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--hero-bg) 86%, transparent);
}

.modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: min(88vh, 760px);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--color-border);
}

.modal__head h2 { font-size: var(--fs-lg); }
.modal__head p { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--color-text-subtle); }

.modal__close {
  flex: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.modal__close:hover { border-color: var(--color-action); }
.modal__close svg { width: 18px; height: 18px; }

.modal__body { padding: var(--sp-4); overflow-y: auto; }

.modal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--color-border);
}

.modal__foot .btn-row { margin-left: auto; }

.modal__progress {
  display: flex;
  gap: 4px;
  flex: 1 1 160px;
  min-width: 120px;
}

.modal__progress i {
  flex: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--color-border);
  overflow: hidden;
}

.modal__progress i span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-accent);
}

.modal__progress i[data-done="true"] span { width: 100%; }

/* Шаг показа */
.demo__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}

.demo__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text-on-brand);
  font-size: var(--fs-3xs);
  font-weight: 700;
}

.demo__title { font-size: var(--fs-md); font-weight: 700; }
.demo__text { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--color-text-muted); }

/* Подсветка того, что изменилось на шаге. Оттенок #fff3cd — единственный
   цветовой код, найденный в исходниках модуля (подсветка изменённого поля). */
.demo__hl {
  background: var(--mark-bg);
  color: var(--mark-text);
  border-radius: var(--r-xs);
  padding: 0 0.25em;
}

@media (prefers-reduced-motion: no-preference) {
  .modal[data-open="true"] .demo__hl { animation: demo-flash var(--t-slow) var(--ease) 2; }
}

@keyframes demo-flash {
  0%, 100% { background: var(--mark-bg); }
  50%      { background: color-mix(in srgb, var(--mark-bg) 45%, transparent); }
}

@media (max-width: 719px) {
  .modal { padding: var(--sp-2); }
  .modal__dialog { max-height: 92vh; }
  .modal__foot .btn-row { margin-left: 0; width: 100%; }
}

/* --- 16.8 Печать главной -------------------------------------------------- */

@media print {
  /* Скрытые панели переключателей на бумаге остаются скрытыми — так же,
     как в браузере: печатается то, что человек видел на экране. */
  /* На бумаге макет вписывается в полосу целиком. Кроме прокрутки и
     минимальной ширины сетки это требует снять обрезку у самой рамки и
     разрешить перенос в шапке таблицы: иначе неразрывные заголовки
     раздвигают таблицу шире листа, и правые колонки уходят под обрез. */
  .mock { box-shadow: none !important; border: 0.75pt solid #999999 !important;
          overflow: visible !important; }
  .mock__scroll { overflow: visible !important; }
  .mock__grid { min-width: 0 !important; grid-template-columns: 140px minmax(0, 1fr) !important; }
  .mock__main { overflow: visible !important; padding: 0.4rem 0.5rem 0.5rem !important; }
  .mock__table { table-layout: auto !important; }
  .mock__table th { white-space: normal !important; }
  .mock__table th,
  .mock__table td { padding: 0.28rem 0.3rem !important; }
  .mock__hint { display: none !important; }
  .compare { grid-template-columns: 1fr 1fr !important; }
  .compare__arrow { display: none !important; }
  .hero__title-tail { color: #1a1a1a !important; }
  /* Переключатель отраслей остаётся на бумаге: без него неясно, к какой
     отрасли относится напечатанная панель. Заливку убираем. */
  .seg__tab {
    background: none !important;
    border: 0.5pt solid #999999 !important;
    color: #000000 !important;
    min-height: 0 !important;
    padding: 0.05rem 0.4rem !important;
  }
  .seg__tab[aria-selected="true"] { border: 1pt solid #000000 !important; }
}

/* Сетки главной с фиксированным числом колонок. Базовые .grid--3/--4 —
   auto-fit: на 1440 px в «тройку» помещается четыре колонки, и последний ряд
   остаётся с «сиротой». Здесь число колонок задано явно. */
@media (min-width: 960px) {
  .grid--fixed3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Длинные имена файлов и формулы переносятся, а не обрезаются краем плитки. */
.mech__formula { overflow-wrap: anywhere; }

/* Список внутри блока правила. Базовый сброс снимает маркеры у всех ul,
   а перечисление из трёх условий без маркеров читается как сплошной текст. */
.mech-list { list-style: disc; padding-left: var(--sp-5); }
.mech-list li + li { margin-top: var(--sp-2); }

/* Кнопки листания показа: недоступное состояние должно быть видно. */
.modal .btn:disabled { opacity: 0.45; cursor: default; transform: none; }

/* Таблицы внутри показа: на узком экране прокручиваются внутри шага,
   страница и окно при этом не разъезжаются. */
.modal .mock__main { overflow-x: auto; }

@media (max-width: 719px) {
  .mock__table th { white-space: normal; }
}

/* Числовые плитки: на планшете 2×2, на широком экране в один ряд.
   Базовая .grid--4 (auto-fit) даёт на 768 px три колонки и «сироту». */
@media (min-width: 520px) and (max-width: 959px) {
  .grid--fixed4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .grid--fixed4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   17. СОДЕРЖАТЕЛЬНЫЕ СТРАНИЦЫ
   Секция агента 05. Внутренние страницы: расчёт риска, контроль и анкета,
   классификатор, согласование и аудит, реестры, развёртывание, пилот.

   Новых токенов НЕ заводится: все цвета берутся из уже проверенных пар
   tokens.css, поэтому tools/contrast.py не требует правок.
   ========================================================================== */

/* --- 17.1 Липкий навигатор страницы --------------------------------------
   На длинной странице колонка разделов закрепляется сбоку и подсвечивает
   текущий раздел (хук [data-toc], подсветка — aria-current="true").
   Ниже 1000 px сворачивается в компактную ленту над содержимым: лента
   прокручивается ВНУТРИ себя, горизонтальной прокрутки страницы нет.
   -------------------------------------------------------------------------- */

.pagegrid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1000px) {
  .pagegrid {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--sp-8);
  }
}

.toc { min-width: 0; }

@media (min-width: 1000px) {
  .toc {
    position: sticky;
    top: calc(var(--header-h-compact) + var(--sp-4));
    align-self: start;
    max-height: calc(100vh - var(--header-h-compact) - var(--sp-6));
    overflow-y: auto;
  }
}

.toc__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--color-text-subtle);
}

.toc__list {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  scrollbar-width: thin;
}

.toc__list a {
  display: block;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  white-space: nowrap;
  text-decoration: none;
}

.toc__list a:hover { border-color: var(--color-action); color: var(--color-text); }

.toc__list a[aria-current="true"] {
  background: var(--tag-bg);
  border-color: var(--color-accent);
  color: var(--tag-text);
  font-weight: 700;
}

@media (min-width: 1000px) {
  .toc__list {
    display: block;
    overflow: visible;
    padding-bottom: 0;
    border-left: 2px solid var(--color-border);
  }

  .toc__list li + li { margin-top: 2px; }

  .toc__list a {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0.4rem 0 0.4rem var(--sp-4);
    margin-left: -2px;
    border-left: 2px solid transparent;
    white-space: normal;
  }

  .toc__list a[aria-current="true"] {
    background: none;
    border-left-color: var(--color-accent);
    color: var(--color-text);
  }
}

/* --- 17.2 Расчётные виджеты ----------------------------------------------
   Считают на значениях, которые вводит сам посетитель: веса и пороги —
   те же, что в модуле. Без скрипта виджет остаётся читаемой формой,
   а рядом с ним всегда стоит таблица весов, поэтому смысл не теряется.
   Хук — [data-calc] (он же в functional.selectors тулбокса).
   -------------------------------------------------------------------------- */

.calc {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.calc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.calc__head h3 { font-size: var(--fs-sm); }
.calc__head p { font-size: var(--fs-2xs); color: var(--color-text-subtle); }

.calc__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--sp-4);
}

@media (min-width: 900px) {
  .calc__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.calc__fields { display: grid; gap: var(--sp-3); align-content: start; }

@media (min-width: 560px) {
  .calc__fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.calc__group {
  padding: var(--sp-3);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-md);
  background: var(--color-canvas-sunken);
}

@media (min-width: 560px) {
  .calc__group--wide { grid-column: 1 / -1; }
}

.calc__legend {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--color-text-subtle);
}

.calc__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.calc__field + .calc__field { margin-top: var(--sp-2); }

.calc__label {
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.calc__select,
.calc select {
  min-height: 44px;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-xs);
}

.calc select:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.calc__toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  background: var(--color-surface);
  cursor: pointer;
}

.calc__toggle input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-action); }
.calc__toggle span { font-size: var(--fs-2xs); line-height: var(--lh-snug); color: var(--color-text-muted); }
.calc__toggle:has(input:checked) { border-color: var(--color-accent); }
.calc__toggle:has(input:checked) span { color: var(--color-text); }

/* Правая половина — результат */
.calc__out {
  align-self: start;
  padding: var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-canvas-sunken);
}

.calc__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--color-hairline);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.calc__row:last-child { border-bottom: 0; }

.calc__val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.calc__verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-border);
}

.calc__big {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
}

.calc__formula {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--code-bg);
  color: var(--code-text);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

.calc__note {
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--color-text-subtle);
}

/* Требование обоснования — появляется вместе с ручной корректировкой */
.calc__req {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--rule-warn-bg);
  color: var(--rule-warn-text);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
}

/* --- 17.3 Конечный автомат статусов --------------------------------------
   Слева — состояния, справа — куда из выбранного состояния можно уйти
   и что этому мешает. Хук [data-fsm]; кнопки состояний — обычные button,
   поэтому механизм полностью доступен с клавиатуры.
   -------------------------------------------------------------------------- */

.fsm {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 860px) {
  .fsm { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
}

.fsm__states { display: grid; gap: var(--sp-2); align-content: start; }

.fsm__state {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.fsm__state small {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 400;
  color: var(--color-text-subtle);
}

.fsm__state[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--tag-bg);
  color: var(--tag-text);
}

.fsm__state[aria-pressed="true"] small { color: var(--tag-text); }

.fsm__panel {
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-canvas-sunken);
}

.fsm__panel h4 { font-size: var(--fs-sm); }
.fsm__panel > p { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--color-text-muted); }

.fsm__moves { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }

.fsm__move {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-sm);
  background: var(--color-surface);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.fsm__move b { color: var(--color-text); }
.fsm__move em { font-style: normal; color: var(--color-text-subtle); }

.fsm__guard {
  width: 100%;
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--color-border);
  color: var(--rule-warn-text);
}

.fsm__none { font-size: var(--fs-2xs); color: var(--color-text-subtle); }

/* --- 17.4 Дерево вложенных объектов --------------------------------------
   Построено на <details>/<summary>: раскрытие, клавиатура и печать
   работают без скрипта.
   -------------------------------------------------------------------------- */

.tree { display: grid; gap: var(--sp-2); }
.tree ul { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); padding-left: var(--sp-5); }

.tree__node {
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-surface);
}

.tree__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  font-size: var(--fs-xs);
  list-style: none;
}

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

.tree__sum::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
  transition: transform var(--t-fast) var(--ease);
}

.tree__node[open] > .tree__sum::before { transform: rotate(45deg); }
.tree__sum b { font-weight: 700; }
.tree__sum .chip { margin-left: auto; }

.tree__body {
  padding: 0 var(--sp-3) var(--sp-3) var(--sp-6);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.tree__body > * + * { margin-top: var(--sp-2); }

.tree__lvl {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--color-text-subtle);
}

/* --- 17.5 Плитки реестров ------------------------------------------------- */

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.tile__icon {
  width: 34px;
  height: 34px;
  color: var(--color-accent);
}

.tile__title { font-size: var(--fs-sm); font-weight: 700; }
.tile__text { font-size: var(--fs-2xs); line-height: var(--lh-snug); color: var(--color-text-muted); }

.tile__file {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--color-text-subtle);
  overflow-wrap: anywhere;
}

/* --- 17.6 Сквозная схема процесса ----------------------------------------
   Этапы крупно, с номером и связкой. Появление — общий класс .reveal,
   он сам выключается при prefers-reduced-motion и на печати.
   -------------------------------------------------------------------------- */

.flow {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr);
  counter-reset: flow;
}

@media (min-width: 720px) { .flow--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 720px) { .flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) { .flow--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .flow--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.flow__step {
  position: relative;
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--r-md);
  background: var(--color-surface);
}

.flow__step::before {
  counter-increment: flow;
  content: counter(flow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-bottom: var(--sp-2);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text-on-brand);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 700;
}

.flow__title { font-size: var(--fs-sm); font-weight: 700; }
.flow__text { margin-top: var(--sp-2); font-size: var(--fs-2xs); line-height: var(--lh-snug); color: var(--color-text-muted); }
.flow__out {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--color-border);
  font-size: var(--fs-3xs);
  color: var(--color-text-subtle);
}

/* --- 17.7 Пары «параметр — значение» -------------------------------------- */

.kv { display: grid; gap: 0; }

.kv__row {
  display: grid;
  gap: var(--sp-1) var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--color-hairline);
}

@media (min-width: 640px) {
  .kv__row { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: baseline; }
}

.kv__row:last-child { border-bottom: 0; }
.kv__k { font-size: var(--fs-xs); font-weight: 700; color: var(--color-text); }
.kv__v { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--color-text-muted); }
.kv__v code { overflow-wrap: anywhere; }

/* --- 17.8 Список с фильтром ----------------------------------------------
   29 аудируемых действий: поле сужает список, счётчик показывает,
   сколько осталось. Без скрипта виден весь список — это рабочее состояние.
   Хук [data-filter].
   -------------------------------------------------------------------------- */

.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
}

.filterbar input {
  flex: 1 1 240px;
  min-height: 44px;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-xs);
}

.filterbar output {
  font-size: var(--fs-2xs);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.taglist {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

.taglist li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-sm);
  background: var(--color-surface);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.taglist li i {
  flex: none;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--color-text-subtle);
}

.taglist li[hidden] { display: none; }

/* --- 17.9 Чек-лист подготовки --------------------------------------------
   Отмечает сам посетитель; счётчик считает отмеченное. Ничего никуда
   не отправляется и нигде не сохраняется.
   -------------------------------------------------------------------------- */

.checklist { display: grid; gap: var(--sp-2); }

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-surface);
  cursor: pointer;
}

.checklist__item input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--color-action); }
.checklist__item b { display: block; font-size: var(--fs-xs); }
.checklist__item span { display: block; margin-top: 3px; font-size: var(--fs-2xs); line-height: var(--lh-snug); color: var(--color-text-muted); }
.checklist__item:has(input:checked) { border-color: var(--color-accent); background: var(--color-surface-alt); }

.checklist__count {
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* --- 17.10 Мелочи --------------------------------------------------------- */

/* Ряд из двух колонок текста без карточек */
.cols2 { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Подпись-«ключ основания» под фактом */
.src {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: var(--color-text-subtle);
  overflow-wrap: anywhere;
}

/* Раздел «Что это даёт ИТ-директору» — тише карточки, но заметнее абзаца */
.cto {
  padding: var(--sp-5);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-action);
  border-radius: var(--r-md);
  background: var(--color-surface-alt);
}

.cto h3 { font-size: var(--fs-lg); }
.cto ul { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }

.cto li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.cto li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 2px;
  background: var(--color-action);
}

.cto li b { color: var(--color-text); }

/* --- 17.11 Печать содержательных страниц ---------------------------------- */

@media print {
  .toc { display: none !important; }
  .pagegrid { grid-template-columns: 1fr !important; }
  .calc { box-shadow: none !important; border: 0.75pt solid #999999 !important; }
  .calc__grid { grid-template-columns: 1fr 1fr !important; }
  .fsm { grid-template-columns: 1fr !important; }
  .filterbar { display: none !important; }
  .taglist { grid-template-columns: 1fr 1fr !important; }
  .tree__node[open] > .tree__body { display: block !important; }
  .flow--4, .flow--5, .flow--3 { grid-template-columns: 1fr 1fr !important; }
}

/* Ряд из пяти карточек (пять действий ролевой модели). Базовая .grid--3
   auto-fit даёт на 1440 px четыре колонки и «сироту» в последнем ряду. */
@media (min-width: 700px) and (max-width: 1099px) {
  .grid--fixed5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .grid--fixed5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Блоки агента 05, которые нельзя разрывать между печатными страницами.
   Дублирует список из print.noBreak конфига тулбокса. */
@media print {
  .calc,
  .tile,
  .flow__step,
  .checklist__item,
  .fsm__panel,
  .kv__row,
  .cto { break-inside: avoid; page-break-inside: avoid; }
}

/* ======================================================================
   ЛОГОТИПЫ КЛИЕНТОВ
   Секция скрыта атрибутом hidden, пока assets/clients/logos.json пуст.
   ====================================================================== */

.clients__grid {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--sp-4);
  align-items: center;
}

.clients__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5rem;
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--color-surface);
}

.clients__link { display: flex; align-items: center; justify-content: center; }

.clients__logo {
  max-width: 100%;
  max-height: 3rem;
  height: auto;
  width: auto;
}

.clients__note {
  margin-top: var(--sp-4);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}