/* ═══════════════════════════════════════════════════════════════
   NeoIT — База знаний. Композиционный слой публичной Wiki.
   Кандидат Wiki Template v1.

   Что это и чем не является.
   Слой поверх канонических токенов (css/design-tokens.css) и общих
   компонентов (css/components.css). Своих кнопок, полей и бейджей не
   заводит. Глобальные токены не переопределяет: всё локальное живёт
   с префиксом --wk- и действует только внутри раздела.

   Зачем слой нужен. Шкала кабинета заканчивается на 18px и рассчитана
   на плотные операционные таблицы; длинная регулятивная статья на ней
   не читается. Здесь объявлена читательская шкала и composition-токены
   утверждённого визуала — по образцу css/dashboard-grid.css, который
   дизайн-система называет эталоном дисциплины: локальные токены поверх
   канонических, значение каждого обосновано комментарием.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Читательская типографика ─────────────────────────────────
     Пара 17px + 720px даёт меру 55–75 знаков на кириллице. */
  --wk-fs-body:   17px;
  --wk-fs-lead:   19px;
  --wk-fs-h1:     42px;
  --wk-fs-h2:     27px;
  --wk-fs-h3:     19px;
  --wk-fs-sm:     14px;
  --wk-fs-xs:     12px;
  --wk-lh-body:   1.7;

  /* Отрицательный трекинг собирает крупный кегль и даёт материалу
     «шапку» без увеличения размера. */
  --wk-tr-h1:    -0.022em;
  --wk-tr-h2:    -0.016em;

  /* ── Мягкие лиловые поверхности утверждённого визуала ──────────
     Это ОТТЕНКИ фирменного #6a1b9a, а не новый цвет: тон тот же,
     меняется только светлота. Живут в композиционном слое Wiki и
     за его пределы не выходят. Роль фирменного цвета не меняется —
     основное действие по-прежнему сплошная фирменная кнопка. */
  --wk-tint:        #f7f3fb;   /* заливка карточек-акцентов */
  --wk-warning-ink: #bf360c;   /* заголовок врезки «Частая ошибка»: 5.1:1 на --orange-50 (WCAG AA) */
  --wk-foot-ink:    #6e6e6e;   /* копирайт в подвале: 4.9:1 на --neutral-50 */
  --wk-tint-strong: #f0e8f8;   /* наведение, активный пункт оглавления */
  --wk-tint-line:   #e4d6f0;   /* граница лиловых поверхностей */

  /* ── Геометрия ────────────────────────────────────────────────
     Диапазоны заданы дополнением к ТЗ; выбраны середины. */
  --wk-page:      1200px;
  --wk-read:       740px;
  --wk-rail:       272px;
  --wk-gap:         40px;

  /* ── Ритм. Кратно 4px, как требует шкала отступов проекта. ──── */
  --wk-sec-gap:     40px;
  --wk-blk-gap:     20px;

  /* Радиусы композиционного слоя: крупнее кабинетных, потому что
     карточки здесь большие и редкие, а не строки таблицы. */
  --wk-r-card:      14px;
  --wk-r-inner:      9px;

  /* ── Глубина ───────────────────────────────────────────────────
     Тень фиолетово-нейтральная, а не серая: серая на лиловых
     поверхностях грязнит. Две ступени, и обе очень тихие —
     дизайн-система запрещает декоративные тени, здесь они
     работают только как разделение слоёв.
     Ключевые карточки получают глубину, контекстные блоки
     остаются плоскими: если приподнято всё, не приподнято ничто. */
  --wk-sh-1: 0 1px 2px rgba(35, 18, 54, .05);
  --wk-sh-2: 0 1px 2px rgba(35, 18, 54, .04), 0 10px 28px -14px rgba(35, 18, 54, .16);
}

/* ═══════════════════════════════════════════════════════════════
   1. КАРКАС
   ═══════════════════════════════════════════════════════════════ */

.wk-body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--wk-fs-body);
  line-height: var(--wk-lh-body);
  -webkit-font-smoothing: antialiased;
}

.wk-wrap { max-width: var(--wk-page); margin: 0 auto; padding: 0 var(--space-6); }

/* ── Шапка ─────────────────────────────────────────────────────
   Это не оболочка кабинета: Wiki открыта без авторизации, sidebar
   и topbar приложения здесь неприменимы. */

.wk-nav {
  position: sticky; top: 0; z-index: 30;
  position: -webkit-sticky; position: sticky;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
@supports not (backdrop-filter: blur(1px)) { .wk-nav { background: var(--color-surface); } }
.wk-nav__in {
  max-width: var(--wk-page); margin: 0 auto; padding: 0 var(--space-6);
  height: 60px; display: flex; align-items: center; gap: var(--space-6);
}

@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('../fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.wk-logo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none; color: var(--color-text-primary);
  font-family: 'Rubik', var(--font-family-base); font-weight: 500; font-size: 17px;
  letter-spacing: -0.01em; flex-shrink: 0;
}
.wk-logo__hub { font-weight: 400; }
.wk-logo img { width: 28px; height: 28px; display: block; }

.wk-nav__links { display: flex; align-items: center; gap: var(--space-6); font-size: var(--wk-fs-sm); }
.wk-nav__link {
  position: relative; padding: 20px 0;
  color: var(--color-text-secondary); text-decoration: none;
  transition: color var(--transition-fast);
}
.wk-nav__link:hover { color: var(--color-text-primary); }
/* Активный раздел — фирменная подчёркивающая линия. Законное
   употребление фирменного цвета: это активное состояние. */
.wk-nav__link--active { color: var(--color-primary); font-weight: var(--font-weight-medium); }
.wk-nav__link--active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--color-primary); border-radius: 2px 2px 0 0;
}

.wk-nav__act { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

/* Полоса прочитанного. Длинный регулятивный материал читают порциями,
   и человеку важно понимать, сколько осталось. Живёт в шапке, ничего
   не перекрывает и не отвлекает: 2px и фирменный цвет. */
.wk-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--purple-400), var(--color-primary));
  transition: width .12s linear;
}

/* Утилита ширины: кнопка берётся из components.css, растягивать её
   компонент не умеет — это композиция, а не новый компонент. */
.wk-btn-block { width: 100%; }

.wk-nav__link:focus-visible,
.wk-toc a:focus-visible,
.wk-crumbs a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ── Служебная полоса предпросмотра ────────────────────────────
   Материал rev3 к публикации не согласован, значит публично его нет.
   Эта страница — приватный предпросмотр выбранной редакции, и сказать
   об этом обязана сама страница, а не бейдж внутри статьи: состояние
   принадлежит режиму просмотра, а не содержанию материала. */
.wk-preview-bar {
  background: var(--color-warning-soft);
  border-bottom: 1px solid var(--orange-200);
  color: var(--color-warning-text);
  font-size: var(--wk-fs-sm);
  line-height: 1.45;
}
.wk-preview-bar__in {
  max-width: var(--wk-page); margin: 0 auto; padding: var(--space-2) var(--space-6);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
}
.wk-preview-bar svg { width: 16px; height: 16px; flex-shrink: 0; }
.wk-preview-bar b { font-weight: var(--font-weight-semibold); }
.wk-preview-bar__env {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-size: var(--wk-fs-xs); letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: var(--radius-sm);
  padding: 1px var(--space-2); opacity: .8;
}

/* ── Хлебные крошки ────────────────────────────────────────── */
.wk-crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: var(--space-6) 0 0;
  font-size: var(--wk-fs-sm); color: var(--color-text-muted); line-height: 1.4;
}
.wk-crumbs a { color: var(--color-text-muted); text-decoration: none; }
.wk-crumbs a:hover { color: var(--color-primary); }
.wk-crumbs svg { width: 14px; height: 14px; opacity: .5; flex-shrink: 0; }
.wk-crumbs__cur { color: var(--color-text-secondary); }

/* ═══════════════════════════════════════════════════════════════
   2. РАСКЛАДКА СТАТЬИ
   Колонка чтения + один правый рельс. Двух боковых панелей нет:
   утверждён основной вариант, а не смесь двух.
   ═══════════════════════════════════════════════════════════════ */

/* Три участника сетки: шапка материала, колонка чтения и рельс.
   Шапка вынесена из колонки не ради desktop — там ничего не меняется, —
   а ради телефона: при одной колонке порядок должен быть
   «заголовок → содержание → текст». Пока шапка лежала внутри колонки,
   рельс с оглавлением уезжал ВЫШЕ заголовка, и читатель встречал
   список разделов раньше, чем узнавал, о чём материал. */
.wk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--wk-rail);
  gap: 0 var(--wk-gap);
  align-items: start;
  padding-bottom: var(--space-12);
}
.wk-head { grid-column: 1; grid-row: 1; max-width: var(--wk-read); }
.wk-col  { grid-column: 1; grid-row: 2; min-width: 0; max-width: var(--wk-read); }
/* Рельс перекрывает обе строки, поэтому оглавление стоит вровень
   с заголовком, как в утверждённом визуале. */
.wk-rail { grid-column: 2; grid-row: 1 / span 2; }

.wk-rail {
  position: sticky; top: 76px;
  display: flex; flex-direction: column; gap: var(--space-3);
  max-height: calc(100vh - 92px);
  overflow-y: auto; overscroll-behavior: contain;
}

/* ═══════════════════════════════════════════════════════════════
   3. ШАПКА МАТЕРИАЛА
   ═══════════════════════════════════════════════════════════════ */

/* ── Шапка материала ───────────────────────────────────────────
   Две колонки: текст и тихий визуальный якорь. Это не рекламный
   герой — иллюстрация мелкая, стоит сбоку и ниже заголовка по
   оптическому весу. Задача — дать странице лицо, а не отодвинуть
   ответ вниз: первый абзац по-прежнему виден без прокрутки. */
/* Заголовок занимает колонку целиком: иллюстрация рядом с ним
   отнимала ширину и ломала H1 на четыре строки вместо трёх.
   Картинка стоит ниже, рядом с подзаголовком — там она уравновешивает
   короткую строку, а не конкурирует с главным. */
.wk-head__sub { display: grid; grid-template-columns: minmax(0,1fr) 200px; gap: var(--space-6); align-items: center; }
.wk-head__sub > div { min-width: 0; }
.wk-head__sub .wk-meta { margin-bottom: 0; }
.wk-head__art { justify-self: end; width: 200px; }
.wk-head__art img { width: 100%; height: auto; display: block; }

/* Тема материала — лиловая пилюля из утверждённого визуала */
.wk-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  margin: var(--space-6) 0 var(--space-4);
  padding: 4px var(--space-3);
  background: var(--wk-tint); border: 1px solid var(--wk-tint-line);
  border-radius: var(--radius-full);
  font-size: var(--wk-fs-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--purple-700);
}

.wk-h1 {
  margin: 0 0 var(--space-4);
  font-size: var(--wk-fs-h1); line-height: 1.14;
  letter-spacing: var(--wk-tr-h1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-wrap: balance;
}

.wk-lead {
  margin: 0;
  font-size: var(--wk-fs-lead); line-height: 1.55;
  color: var(--color-text-secondary); text-wrap: pretty;
}

/* ── Сведения о материале ──────────────────────────────────────
   Норма живёт ровно столько, сколько живёт срок: маркировку остатков
   уже переносили, и материал без даты сверки вводит в заблуждение
   молча. Поэтому дата сверки и граница применимости стоят до первого
   абзаца, который читатель может принять за инструкцию.

   Сверка в rev3 частичная — так и написано. Зелёного «Актуально»
   здесь нет и быть не может. */
.wk-meta {
  margin: var(--space-6) 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-6);
  font-size: var(--wk-fs-sm); line-height: 1.5;
}
.wk-meta__item { display: inline-flex; align-items: center; gap: 7px; color: var(--color-text-secondary); }
.wk-meta__item > svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--purple-400); }
.wk-meta__val { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }

/* ── Врезка-переход в продукт ──────────────────────────────────
   Лиловая карточка утверждённого визуала. Одна в теле статьи,
   после того как читатель получил часть ответа. Мелкий текст про
   сроки и условия сюда не переносится: действующие условия тарифа
   не подтверждены, а обещание в статье живёт дольше акции. */
.wk-promo {
  display: flex; align-items: center; gap: var(--space-4);
  margin: var(--space-6) 0;
  padding: var(--space-4);
  background: var(--wk-tint); border: 1px solid var(--wk-tint-line);
  border-radius: var(--wk-r-card);
}
.wk-promo__ico {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--color-surface); border: 1px solid var(--wk-tint-line);
  border-radius: var(--wk-r-inner); color: var(--color-primary);
}
.wk-promo__ico svg { width: 22px; height: 22px; }
.wk-promo__txt { flex: 1; min-width: 0; }
.wk-promo__ttl {
  display: block;                 /* span по умолчанию строчный —
                                     без этого заголовок слипается с подписью */
  margin: 0 0 2px; font-size: 16px; font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary); line-height: 1.35;
}
.wk-promo__sub { display: block; margin: 0; font-size: var(--wk-fs-sm); color: var(--color-text-secondary); line-height: 1.45; }

/* ═══════════════════════════════════════════════════════════════
   4. ТЕЛО СТАТЬИ
   ═══════════════════════════════════════════════════════════════ */

.wk-prose { color: var(--color-text-secondary); }

/* Раздел открывается короткой фирменной чертой над заголовком:
   в длинном тексте это даёт опору глазу при беглом просмотре,
   не утяжеляя сам заголовок. */
.wk-prose > h2::before, .wk-hd > h2::before {
  content: ""; display: block;
  width: 28px; height: 3px; border-radius: 2px;
  background: var(--color-primary);
  margin-bottom: var(--space-3);
}
.wk-prose > h2, .wk-hd > h2 {
  margin: var(--wk-sec-gap) 0 var(--space-4);
  font-size: var(--wk-fs-h2); line-height: 1.25;
  letter-spacing: var(--wk-tr-h2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  scroll-margin-top: 88px;      /* якорь не уезжает под липкую шапку */
  text-wrap: balance;
}
.wk-prose > h2:first-child, .wk-hd:first-child > h2 { margin-top: var(--space-2); }

/* Обёртка заголовка раздела: сам h2 без служебных символов, якорь —
   отдельная ссылка рядом. Так «#» не попадает ни в текст заголовка, ни в
   поисковый индекс, но остаётся кликабельным и доступным клавиатуре. */
.wk-hd { display: flex; align-items: flex-end; gap: var(--space-2); }
.wk-hd > h2 { min-width: 0; }

.wk-prose h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--wk-fs-h3); line-height: 1.35;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  scroll-margin-top: 88px;
}

.wk-prose p { margin: 0 0 var(--wk-blk-gap); text-wrap: pretty; }
.wk-prose strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }

.wk-prose ul, .wk-prose ol { margin: 0 0 var(--wk-blk-gap); padding-left: var(--space-6); }
.wk-prose li { margin-bottom: var(--space-2); }
.wk-prose li::marker { color: var(--purple-200); }

/* :not(.btn) обязателен. Без него ссылка-кнопка внутри текста
   получает фиолетовый цвет и подчёркивание поверх собственных
   стилей компонента — на фиолетовой заливке подпись становится
   нечитаемой. Специфичность у `.wk-prose a` выше, чем у
   `.btn--primary`, поэтому побеждает именно она. */
.wk-prose a:not(.btn) {
  color: var(--color-text-link); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  text-decoration-color: var(--purple-200);
}
.wk-prose a:not(.btn):hover { color: var(--color-text-link-hover); text-decoration-color: currentColor; }

/* Якорь заголовка — появляется по наведению, не мозолит глаза */
.wk-anchor {
  flex: none; opacity: 0;
  margin-bottom: var(--space-4);          /* на одной линии с последней строкой h2 (у него такой же нижний отступ) */
  color: var(--color-text-muted); text-decoration: none;
  font-size: var(--wk-fs-h2); line-height: 1.25; font-weight: var(--font-weight-regular);
  transition: opacity var(--transition-fast);
}
.wk-anchor::before { content: "#"; }
.wk-prose a.wk-anchor, .wk-prose a.wk-anchor:hover { color: var(--color-text-muted); text-decoration: none; }   /* та же специфичность, что .wk-prose a:not(.btn), но позже */
.wk-prose a.wk-anchor:hover, .wk-prose a.wk-anchor:focus-visible { color: var(--color-primary); }
.wk-hd:hover > .wk-anchor, .wk-anchor:focus-visible { opacity: 1; }
.wk-anchor:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 3px; }

/* ── Врезки ────────────────────────────────────────────────────
   Бледная семантическая плашка с иконкой и тонкой левой линейкой.
   Плоская: это часть документа, а не всплывающее уведомление.

   Четыре вида, и ни одного «на всякий случай»:
     warning — место, где продавец ошибается и теряет деньги;
     note    — уточнение, снимающее частое заблуждение;
     key     — ключевой срок или условие, ради которого читают;
     scope   — граница: чего материал или сервис не покрывает.

   Фирменный лиловый здесь только у key: это не украшение, а самый
   важный факт материала. Остальные держат семантику дизайн-системы. */
.wk-call {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--wk-r-inner);
  font-size: 16px; line-height: 1.6;
}
.wk-call > :last-child { margin-bottom: 0; }
.wk-call p { margin-bottom: var(--space-3); }

.wk-call__h {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: var(--space-2);
  font-size: var(--wk-fs-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: .06em; text-transform: uppercase;
}
.wk-call__h svg { width: 15px; height: 15px; flex-shrink: 0; }

.wk-call--warning { background: var(--color-warning-soft); border-color: var(--orange-100); border-left-color: var(--color-warning); }
/* Контраст: --color-warning-text (#e65100) на плашке #fff3e0 даёт 3.5:1;
   для мелкого капса нужно ≥ 4.5:1 — локальный оттенок той же гаммы, 5.1:1. */
.wk-call--warning .wk-call__h { color: var(--wk-warning-ink); }

.wk-call--note { background: var(--color-info-soft); border-color: var(--blue-100); border-left-color: var(--color-info); }
.wk-call--note .wk-call__h { color: var(--color-info-text); }

.wk-call--key { background: var(--wk-tint); border-color: var(--wk-tint-line); border-left-color: var(--color-primary); box-shadow: var(--wk-sh-1); }
.wk-call--key .wk-call__h { color: var(--purple-700); }

.wk-call--scope { background: var(--neutral-50); border-color: var(--color-border); border-left-color: var(--neutral-400); }
.wk-call--scope .wk-call__h { color: var(--color-text-secondary); }

/* ── Шаги ──────────────────────────────────────────────────────
   Номер в мягком квадрате плюс вертикальная линия между шагами:
   семь пунктов читаются как один процесс, а не как семь отдельных
   заголовков. Абзацы шага остаются обычным текстом — превращать
   всё в карточки прямо запрещено дополнением к ТЗ. */
.wk-steps { position: relative; }

.wk-step { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: var(--space-4); margin-bottom: var(--space-8); }
.wk-step:last-child { margin-bottom: 0; }

/* Линия идёт от номера к номеру и обрывается на последнем */
.wk-step::before {
  content: ""; position: absolute; left: 16px; top: 38px; bottom: calc(var(--space-8) * -1 + 4px);
  width: 1px; background: linear-gradient(180deg, var(--wk-tint-line), var(--color-border));
}
.wk-step:last-child::before { display: none; }

.wk-step__n {
  position: relative; z-index: 1;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--color-surface);
  border: 1px solid var(--wk-tint-line);
  box-shadow: var(--wk-sh-1);
  border-radius: 50%;
  font-size: var(--wk-fs-sm); font-weight: var(--font-weight-semibold);
  color: var(--purple-700); font-variant-numeric: tabular-nums;
  user-select: none;
}
.wk-step__b { min-width: 0; padding-top: 3px; }
.wk-step__b > h3 { margin-top: 0; }
.wk-step__b > :last-child { margin-bottom: 0; }

/* ── Таблицы ──────────────────────────────────────────────────
   Статичная таблица-содержимое, а не рабочий список: сортировать
   и фильтровать нечего, TableComponent здесь неприменим. */
.wk-tw { overflow-x: auto; margin: var(--space-6) 0; -webkit-overflow-scrolling: touch; }
.wk-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--font-size-lg); line-height: 1.55;
  border: 1px solid var(--color-border); border-radius: var(--wk-r-inner);
  overflow: hidden;
}
.wk-table th {
  text-align: left; padding: var(--space-3);
  background: var(--color-surface-secondary);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold); font-size: var(--wk-fs-sm);
  white-space: nowrap;
}
.wk-table td {
  padding: var(--space-3); border-bottom: 1px solid var(--color-border);
  vertical-align: top; color: var(--color-text-secondary);
}
.wk-table tr:last-child td { border-bottom: none; }

/* ── Иллюстрация и снимок экрана ─────────────────────────────
   Универсальный блок Template v1 (блок `image` рендерера): одно
   изображение на всю ширину колонки чтения и подпись под ним.
   Ширина/высота приходят из медиатеки и задают место до загрузки;
   max-width не даёт снимку 1400px раздвинуть страницу на телефоне.
   Тонкая рамка нужна снимкам экрана: у них белый фон, без рамки
   край сливается со страницей. */
.wk-fig { margin: var(--space-6) 0; }
.wk-fig img {
  display: block; width: 100%; max-width: 100%; height: auto;
  border: 1px solid var(--color-border); border-radius: var(--wk-r-inner);
  background: var(--color-surface);
}
.wk-fig figcaption {
  margin-top: var(--space-2);
  font-size: var(--wk-fs-sm); line-height: 1.5; color: var(--color-text-muted);
}

/* ── Частые вопросы ────────────────────────────────────────────
   Раскрытие на <details>: ответ присутствует в исходном HTML,
   работает без JS и корректно печатается. */
.wk-faq { border: 1px solid var(--color-border); border-radius: var(--wk-r-card); overflow: hidden; margin: var(--space-6) 0; }
.wk-faq__i { border-bottom: 1px solid var(--color-border); }
.wk-faq__i:last-child { border-bottom: none; }

.wk-faq__q {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); cursor: pointer; list-style: none;
  font-weight: var(--font-weight-medium); color: var(--color-text-primary);
  font-size: var(--font-size-lg); line-height: 1.5;
  transition: background var(--transition-fast);
}
.wk-faq__q::-webkit-details-marker { display: none; }
.wk-faq__q:hover { background: var(--color-surface-secondary); }
.wk-faq__q svg {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
  color: var(--color-text-muted); transition: transform var(--transition-base);
}
.wk-faq__i[open] .wk-faq__q { background: var(--wk-tint); }
.wk-faq__i[open] .wk-faq__q svg { transform: rotate(90deg); color: var(--color-primary); }
.wk-faq__a { padding: 0 var(--space-4) var(--space-4) 46px; font-size: 16px; }
.wk-faq__a > :last-child { margin-bottom: 0; }

/* ── Источники ────────────────────────────────────────────────
   Для регулятивного материала это доказательная база, а не подвал.
   Карточка вместо строки списка: видно тип источника и домен, по
   которому читатель поймёт, куда его отправляют, ещё до клика.
   Сетки бейджей «проверено» здесь нет — сверка частичная. */
.wk-src { counter-reset: s; list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); }

.wk-src li {
  counter-increment: s; position: relative;
  display: grid; grid-template-columns: 26px 1fr; gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--wk-r-inner);
  font-size: var(--font-size-lg); line-height: 1.5;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.wk-src li:hover { border-color: var(--wk-tint-line); background: var(--wk-tint); }

.wk-src li::before {
  content: counter(s);
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--color-surface-secondary); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted); font-size: var(--wk-fs-xs);
  font-variant-numeric: tabular-nums;
}
.wk-src__t { color: var(--color-text-primary); }
.wk-src__host {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 3px; color: var(--color-text-muted);
  font-size: var(--wk-fs-sm); word-break: break-word;
  text-decoration: none;
}
.wk-src__host:hover { color: var(--color-primary); }
.wk-src__host svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .7; }

/* ── Подпись материала ──────────────────────────────────────── */
.wk-sign {
  margin-top: var(--space-8); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--wk-fs-sm); color: var(--color-text-muted);
}

/* ── Ключевые даты ─────────────────────────────────────────────
   Опорный элемент материала. Ради двух этих дат статью и открывают,
   а в сплошном тексте они теряются между цитатами оператора.

   Содержание не выдумано и не переписано: обе даты и формулировки
   взяты из редакции 3 дословно, а полное предложение оставлено под
   шкалой целиком. Условие не отрывается от утверждения — оно стоит
   в том же блоке, а не «где-то ниже». */
.wk-dates {
  margin: var(--space-6) 0;
  padding: var(--space-6);
  border: 1px solid var(--wk-tint-line); border-radius: var(--wk-r-card);
  background: linear-gradient(180deg, var(--wk-tint) 0%, var(--color-surface) 100%);
  box-shadow: var(--wk-sh-2);
}
.wk-dates__h {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: var(--space-4);
  font-size: var(--wk-fs-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: .07em; text-transform: uppercase; color: var(--purple-700);
}
.wk-dates__h svg { width: 15px; height: 15px; }

.wk-dates__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: start; }

.wk-date__d {
  display: block; font-size: 23px; line-height: 1.2;
  letter-spacing: -0.02em; font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.wk-date__l {
  display: block; margin-top: 5px;
  font-size: var(--wk-fs-sm); line-height: 1.45; color: var(--color-text-secondary);
}
/* Точка с фирменной обводкой и соединительная черта — шкала времени,
   а не два случайных числа рядом. */
.wk-date { position: relative; padding-top: 20px; }
.wk-date::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--color-surface); border: 2px solid var(--color-primary);
}
.wk-date--next::before { border-color: var(--purple-200); }
.wk-dates__link {
  align-self: start; margin-top: 5px; height: 1px; min-width: 40px;
  background: repeating-linear-gradient(90deg, var(--purple-200) 0 4px, transparent 4px 8px);
}
.wk-dates__note {
  margin: var(--space-4) 0 0; padding-top: var(--space-4);
  border-top: 1px solid var(--wk-tint-line);
  font-size: 15px; line-height: 1.6; color: var(--color-text-secondary);
}
.wk-dates__note strong { color: var(--color-text-primary); }

/* ── Финальный блок перехода ───────────────────────────────────
   Один на материал, в конце, после того как читатель получил ответ.
   Сроков и условий тарифа здесь нет: действующие условия не
   подтверждены, а обещание в статье живёт дольше любой акции. */
.wk-final {
  margin: var(--wk-sec-gap) 0 0;
  border: 1px solid var(--wk-tint-line); border-radius: var(--wk-r-card);
  background: linear-gradient(135deg, var(--wk-tint) 0%, var(--color-surface) 62%);
  box-shadow: var(--wk-sh-2);
  display: grid; grid-template-columns: minmax(0,1fr) 208px; gap: var(--space-4);
  align-items: center; overflow: hidden;
}
.wk-final__b { padding: var(--space-6); }
.wk-final h3 {
  margin: 0 0 var(--space-2); font-size: 21px; line-height: 1.3;
  letter-spacing: var(--wk-tr-h2); font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.wk-final p { margin: 0 0 var(--space-4); font-size: var(--font-size-lg); line-height: 1.55; color: var(--color-text-secondary); }
.wk-final__art { align-self: end; }
.wk-final__art img { width: 208px; height: auto; display: block; }

/* ═══════════════════════════════════════════════════════════════
   5. ПРАВЫЙ РЕЛЬС
   ═══════════════════════════════════════════════════════════════ */

.wk-card { border: 1px solid var(--color-border); border-radius: var(--wk-r-card); background: var(--color-surface); box-shadow: var(--wk-sh-1); }
.wk-card__h {
  padding: var(--space-3) var(--space-4);
  font-size: var(--wk-fs-sm); font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}

/* Оглавление. Активный пункт — лиловая заливка и фирменная точка,
   как в утверждённом визуале. Это активное состояние, законное
   употребление фирменного цвета. */
.wk-toc { padding: 6px; }
.wk-toc ol { list-style: none; margin: 0; padding: 0; }
.wk-toc a {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--wk-fs-sm); line-height: 1.4;
  color: var(--color-text-secondary); text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.wk-toc a::before {
  content: ""; flex-shrink: 0;
  width: 6px; height: 6px; margin-top: 7px; border-radius: 50%;
  background: var(--neutral-300);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.wk-toc a:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.wk-toc a.is-active {
  background: var(--wk-tint-strong); color: var(--purple-700);
  font-weight: var(--font-weight-medium);
}
.wk-toc a.is-active::before { background: var(--color-primary); box-shadow: 0 0 0 3px var(--wk-tint); }

/* Карточка продукта в рельсе. Лиловая, чтобы отличаться от
   оглавления: рядом стоят два блока, и читатель должен видеть,
   что один — навигация, а другой — предложение. */
.wk-side {
  padding: var(--space-4);
  background: linear-gradient(180deg, var(--wk-tint) 0%, var(--color-surface) 70%);
  border-color: var(--wk-tint-line);
}
.wk-side__t {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary); line-height: 1.3;
}
.wk-side__t svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }

.wk-ticks { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.wk-ticks li {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--wk-fs-sm); line-height: 1.45; color: var(--color-text-secondary);
}
.wk-ticks svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--color-success); }

/* ═══════════════════════════════════════════════════════════════
   6. КАТАЛОГ РАЗДЕЛА
   ═══════════════════════════════════════════════════════════════ */

.wk-hero { padding: var(--space-8) 0 var(--space-4); }
.wk-hero__grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--space-8); align-items: center; }
.wk-hero h1 {
  margin: 0 0 var(--space-3);
  font-size: 38px; line-height: 1.15; letter-spacing: var(--wk-tr-h1);
  font-weight: var(--font-weight-semibold); color: var(--color-text-primary);
  text-wrap: balance;
}
.wk-hero p { margin: 0; max-width: 620px; font-size: var(--wk-fs-lead); color: var(--color-text-secondary); line-height: 1.55; }

/* Единственный декоративный элемент раздела: тематическая графика
   на CSS/SVG. Своих иллюстраций она не требует, рекламного текста
   не несёт и реальный материал вниз не двигает. */
/* Единственный декоративный элемент раздела. Раньше здесь стояла
   контурная иконка книги — она читалась как заглушка, а не как
   оформление. Теперь та же иллюстрация, что задаёт язык статьи. */
.wk-hero__art {
  position: relative; border-radius: var(--wk-r-card);
  background: radial-gradient(120% 100% at 70% 10%, var(--wk-tint-strong) 0%, var(--wk-tint) 52%, var(--color-surface) 100%);
  border: 1px solid var(--wk-tint-line);
  display: grid; place-items: center; overflow: hidden;
  box-shadow: var(--wk-sh-2);
}
.wk-hero__art img { width: 100%; height: auto; display: block; }

.wk-item__draft { color: var(--color-warning-text) !important; }

/* Поле поиска Pagefind в hero каталога (включается WikiRenderer::SEARCH_UI).
   Официальный UI перекрашен токенами дизайн-системы; своей разметки нет. */
.wk-search { max-width: 620px; margin: var(--space-4) 0 0; }
.wk-search .pagefind-ui {
  --pagefind-ui-primary: var(--color-primary); --pagefind-ui-text: var(--color-text-primary);
  --pagefind-ui-background: var(--color-surface); --pagefind-ui-border: var(--color-border);
  --pagefind-ui-tag: var(--wk-tint); --pagefind-ui-border-width: 1px; --pagefind-ui-border-radius: var(--radius-md);
  --pagefind-ui-font: var(--font-family-base); --pagefind-ui-scale: .9;
}

/* Тема */
/* Flex, а не auto-fill-сетка: при одной теме сетка оставляет карточке
   узкую колонку в 230px, и описание рвётся на четыре строки. Flex даёт
   карточке комфортную ширину и корректно переносит их, когда тем станет
   больше. */
.wk-topics { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }
.wk-topic { flex: 0 1 340px; }
.wk-topic {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--wk-tint-line); border-radius: var(--wk-r-card);
  background: var(--wk-tint); text-decoration: none;
  transition: border-color var(--transition-fast);
}
.wk-topic:hover { border-color: var(--color-primary); }
.wk-topic__ico {
  width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--color-surface); border: 1px solid var(--wk-tint-line);
  border-radius: var(--wk-r-inner); color: var(--color-primary);
}
.wk-topic__ico svg { width: 19px; height: 19px; }
/* span по умолчанию строчный: без display:block название темы
   слипается с описанием в одну строку. */
.wk-topic__n { display: block; margin: 0 0 2px; font-size: 16px; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.wk-topic__d { display: block; margin: 0; font-size: var(--wk-fs-sm); color: var(--color-text-secondary); line-height: 1.4; }
.wk-topic__c { display: block; margin-top: 4px; font-size: var(--wk-fs-sm); color: var(--purple-700); font-weight: var(--font-weight-medium); }

/* Список материалов темы */
/* Тот же опознавательный знак раздела, что в статье: каталог и
   материал должны читаться как один продукт, а не два экрана. */
.wk-sec-h { margin: 0 0 var(--space-4); }
.wk-sec-h::before {
  content: ""; display: block;
  width: 28px; height: 3px; border-radius: 2px;
  background: var(--color-primary); margin-bottom: var(--space-3);
}
.wk-sec-h h2 {
  margin: 0; font-size: 22px; letter-spacing: var(--wk-tr-h2);
  font-weight: var(--font-weight-semibold); color: var(--color-text-primary);
}

.wk-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.wk-item {
  display: grid; grid-template-columns: 116px minmax(0,1fr); gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--wk-r-card);
  text-decoration: none; background: var(--color-surface);
  box-shadow: var(--wk-sh-1);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.wk-item:hover { border-color: var(--wk-tint-line); box-shadow: var(--wk-sh-2); transform: translateY(-1px); }

/* Миниатюра — не фотография товара, а декоративная плашка раздела.
   Обещать скриншот, которого в материале нет, нельзя. */
.wk-item__ph {
  align-self: start; height: 96px; border-radius: var(--wk-r-inner);
  background: radial-gradient(120% 110% at 60% 15%, var(--wk-tint-strong) 0%, var(--wk-tint) 60%, var(--color-surface) 100%);
  border: 1px solid var(--wk-tint-line);
  display: grid; place-items: center; overflow: hidden;
}
.wk-item__ph img { width: 88px; height: auto; display: block; }
.wk-item__b { min-width: 0; }
.wk-item:hover .wk-item__t { color: var(--color-primary); }

.wk-item__t {
  margin: 0 0 var(--space-2); font-size: var(--wk-fs-h3); line-height: 1.35;
  font-weight: var(--font-weight-semibold); color: var(--color-text-primary);
  transition: color var(--transition-fast); text-wrap: pretty;
}
.wk-item__d { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); line-height: 1.5; color: var(--color-text-secondary); }
.wk-item__m { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--wk-fs-sm); color: var(--color-text-muted); }
.wk-item__m span { display: inline-flex; align-items: center; gap: 5px; }
.wk-item__m svg { width: 13px; height: 13px; opacity: .7; }

/* ═══════════════════════════════════════════════════════════════
   7. ПОДВАЛ
   ═══════════════════════════════════════════════════════════════ */

.wk-foot {
  margin-top: var(--space-12);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-secondary);
  padding: var(--space-6) 0;
  font-size: var(--wk-fs-sm); color: var(--color-text-muted);
}
.wk-foot__in {
  max-width: var(--wk-page); margin: 0 auto; padding: 0 var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center;
}
.wk-foot a { color: var(--color-text-secondary); text-decoration: none; }
.wk-foot a:hover { color: var(--color-primary); }
.wk-foot__sep { opacity: .4; }
.wk-foot__c { width: 100%; margin-top: var(--space-2); color: var(--wk-foot-ink); }   /* 4.9:1 на #fafafa (было 4.4) */

/* ═══════════════════════════════════════════════════════════════
   8. АДАПТИВ
   Контрольные ширины дополнения: 360, 390, 768, 1280, 1440.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .wk-layout { grid-template-columns: minmax(0,1fr); gap: var(--space-6) 0; }
  .wk-head, .wk-col, .wk-rail { grid-column: 1; grid-row: auto; }
  /* Порядок на узком экране: заголовок → оглавление → текст. */
  .wk-head { order: -2; }
  .wk-rail { order: -1; }
  .wk-col  { order: 0; }
  /* Иллюстрация шапки уходит: без рельса колонка сужается, и картинка
     сбоку начала бы отнимать у заголовка меру строки. */
  .wk-head__sub { grid-template-columns: minmax(0,1fr); }
  .wk-head__art { display: none; }
  /* Колонка чтения центрируется и остаётся узкой: без рельса справа
     текст иначе растягивается на всю ширину планшета и мера строки
     уходит за 80 знаков — читать становится тяжело. */
  .wk-col { max-width: 680px; margin: 0 auto; }
  /* Рельс перестаёт быть липким и уходит наверх: на узком экране
     оглавление нужно ДО текста, а не после него. */
  .wk-rail { position: static; max-height: none; order: -1; width: 100%; overflow: visible; }
  .wk-rail .wk-side { display: none; }   /* переход остаётся один — в теле статьи */
  .wk-hero__grid { grid-template-columns: minmax(0,1fr); }
  .wk-hero__art { display: none; }
  .wk-item { grid-template-columns: 92px minmax(0,1fr); }
  .wk-item__ph { height: 78px; }
  .wk-item__ph img { width: 70px; }        /* декор уступает место содержанию */
}

@media (max-width: 860px) {
  .wk-nav__links { display: none; }
}

@media (max-width: 860px) {
  /* Шкала дат складывается в столбец: три колонки на узком экране
     дают по два слова в строке. */
  .wk-dates__row { grid-template-columns: 1fr; gap: var(--space-4); }
  .wk-dates__link { display: none; }
  .wk-final { grid-template-columns: minmax(0,1fr); }
  .wk-final__art { justify-self: center; padding: 0 var(--space-6) var(--space-4); }
  .wk-final__art img { width: 176px; }
}

@media (max-width: 768px) {
  :root {
    --wk-fs-h1: 30px; --wk-fs-h2: 23px; --wk-fs-h3: 18px;
    --wk-fs-lead: 17px; --wk-fs-body: 16px;
    --wk-sec-gap: 32px;
  }
  .wk-wrap, .wk-nav__in, .wk-foot__in, .wk-preview-bar__in { padding-left: var(--space-4); padding-right: var(--space-4); }
  .wk-hero h1 { font-size: 28px; }
  .wk-item { grid-template-columns: minmax(0,1fr); }
  .wk-item__ph { display: none; }
  .wk-promo { flex-direction: column; align-items: flex-start; }
  .wk-promo .btn { width: 100%; }

  /* В шапке остаётся одно действие. Посетитель Базы знаний приходит
     из поиска и чаще всего не авторизован, поэтому уходит «Войти»,
     а не «Зарегистрироваться». Две кнопки на 360–390px не помещаются
     и выталкивают страницу за экран. Вход остаётся доступен со
     страницы, на которую ведёт логотип, и из подвала. */
  .wk-nav__act .btn--secondary { display: none; }
  .wk-nav__in { gap: var(--space-3); }
  .wk-dates { padding: var(--space-4); }
  .wk-final__b { padding: var(--space-4); }
  .wk-final h3 { font-size: 19px; }
  .wk-date__d { font-size: 21px; }
}

@media (max-width: 560px) {
  /* Таблицы раскладываются в строки-определения: обе таблицы
     материала двухколоночные, левая ячейка в них — подпись к правой.
     Боковая прокрутка справочной таблицы на телефоне прячет половину
     смысла за краем экрана. Порядок и структура сохраняются. */
  .wk-table { border: none; }
  .wk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wk-table tr { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
  .wk-table tr:last-child { border-bottom: none; }
  .wk-table td { display: block; border: none; padding: 0; }
  .wk-table td:first-child { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); }

  .wk-step { grid-template-columns: 28px 1fr; gap: var(--space-3); }
  .wk-step__n { width: 28px; height: 28px; font-size: var(--wk-fs-xs); }
  .wk-step::before { left: 13px; top: 32px; }
  .wk-faq__a { padding-left: var(--space-4); }
  .wk-meta__row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* Оглавление на узком экране складывается в раскрывающийся блок */
.wk-toc-m { display: none; }
@media (max-width: 1100px) {
  .wk-toc-m { display: block; }
  .wk-toc-m > summary {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none;
    font-size: var(--wk-fs-sm); font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
  }
  .wk-toc-m > summary::-webkit-details-marker { display: none; }
  .wk-toc-m > summary svg { width: 16px; height: 16px; transition: transform var(--transition-base); color: var(--color-text-muted); }
  .wk-toc-m[open] > summary svg { transform: rotate(90deg); }
  .wk-card__h--desk { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   9. ПЕЧАТЬ
   Регулятивный материал распечатывают и несут бухгалтеру. Рекламные
   блоки уходят, ответы остаются раскрытыми.
   ═══════════════════════════════════════════════════════════════ */

@media print {
  .wk-nav, .wk-rail, .wk-promo, .wk-foot, .wk-crumbs, .wk-anchor, .wk-preview-bar,
  .wk-head__art, .wk-final, .wk-progress { display: none !important; }
  .wk-head { display: block; }
  .wk-dates { box-shadow: none; background: none; }
  .wk-layout { display: block; }
  .wk-col { max-width: none; }
  .wk-body { font-size: 11pt; line-height: 1.5; }
  .wk-faq__i > .wk-faq__a { display: block !important; }
  .wk-call, .wk-step, .wk-faq__i { break-inside: avoid; }
  .wk-src a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto !important; }
}