/* ============================================================
   КиберОпора — страничные дополнения
   Требует tokens.css + components.css. Здесь ТОЛЬКО то,
   чего нет в компонентах: ритм страницы, hero главной, знак-ромб,
   сетки листингов, широкие плакатные блоки, блоки отдельных страниц.
   Инлайн-<style> и style="" в разметке не используем: всё сюда.
   Mobile-first: база 375px → 768px → 1120px.
   ============================================================ */

/* ============ ШРИФТ: MANROPE, СВОЙ ХОСТИНГ ============ */
/* Одна вариативная гарнитура на весь сайт — Manrope (SIL OFL 1.1,
   текст лицензии в site/assets/fonts/OFL-Manrope.txt). Файлы лежат
   в site/assets/fonts/: свой хостинг убирает сторонние origin из
   критической цепочки и даёт кэш immutable на год. Ось wght 200–800 —
   один файл на сабсет закрывает все веса от текста до плакатных цифр.

   Сабсеты — сборка Fontsource (три файла, ~54 КБ суммарно):
   cyrillic (полный русский + №), latin (ASCII, типографика, €),
   latin-ext (знак рубля U+20BD и прочие валюты — рубль на сайте
   в каждом втором абзаце, поэтому файл обязателен). */

@font-face{
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Метрически подогнанные подложки против CLS ---
   Пока грузится вебшрифт (font-display: swap), текст рисуется системным.
   Manrope немного шире Segoe UI и Arial, поэтому системный шрифт слегка
   растягиваем через size-adjust — высота блоков до и после подмены
   совпадает и страница не «прыгает». На Android реальный fallback Roboto. */
@font-face{ font-family:'Manrope Fallback Win';   src: local('Segoe UI'); font-weight: 200 800; font-style: normal; size-adjust: 103%; }
@font-face{ font-family:'Manrope Fallback Droid'; src: local('Roboto');   font-weight: 200 800; font-style: normal; size-adjust: 101%; }
@font-face{ font-family:'Manrope Fallback Arial'; src: local('Arial');    font-weight: 200 800; font-style: normal; size-adjust: 102%; }

:root{
  --font-display: 'Manrope', 'Manrope Fallback Win', 'Manrope Fallback Droid', 'Manrope Fallback Arial', 'Segoe UI', Arial, sans-serif;
  --font-text:    'Manrope', 'Manrope Fallback Win', 'Manrope Fallback Droid', 'Manrope Fallback Arial', 'Segoe UI', Arial, sans-serif;
}

/* ============ РИТМ СТРАНИЦЫ ============ */
/* Один и тот же порядок узлов повторяется почти на каждой странице,
   поэтому отбивки описаны здесь, а не проставляются в разметке.
   Шапка страницы: крошки → H1 → прямой ответ → сноска. */

.breadcrumbs + h1{ margin-top: var(--s-5); max-width: 22ch; }
h1 + .lead-answer{ margin-top: var(--s-5); }
.lead-answer + p{ margin-top: var(--s-4); }
.lead-answer + p + p{ margin-top: var(--s-4); }

/* Секция: кикер → заголовок → подводка → блок */
.ko-kicker + h1{ margin-top: var(--s-3); max-width: 22ch; }
.container > .ko-kicker + h2{ margin-top: var(--s-3); max-width: 26ch; }
.container > h2 + p{ margin-top: var(--s-4); }
.container > h2 + .faq{ margin-top: var(--s-5); }
.container > * + .form{ margin-top: var(--s-6); }

/* Секция без верхнего отступа — идёт вплотную к предыдущей */
.ko-section--tight{ padding-top: 0; }

/* ============ УТИЛИТЫ ОТБИВОК И МЕРЫ ============ */
/* Для плакатных блоков (шаги, чек-листы, плашки), которые стоят
   между абзацами. Только шаг сетки — произвольных значений нет. */

.gap-2{ margin-top: var(--s-2); }
.gap-3{ margin-top: var(--s-3); }
.gap-4{ margin-top: var(--s-4); }
.gap-5{ margin-top: var(--s-5); }
.gap-6{ margin-top: var(--s-6); }
.gap-7{ margin-top: var(--s-7); }

/* Обнуление и нижние отбивки — те же шаги сетки */
.gap-0{ margin-top: 0; }
.mb-3{ margin-bottom: var(--s-3); }
.mb-4{ margin-bottom: var(--s-4); }
.mb-5{ margin-bottom: var(--s-5); }

/* Внутренние отступы блоков-секций */
.pad-top-0{ padding-top: 0; }
.pad-top-5{ padding-top: var(--s-5); }
.pad-top-6{ padding-top: var(--s-6); }

/* Мера строки: та же ширина, что у .prose и чуть уже */
.measure{ max-width: 68ch; }
.measure--narrow{ max-width: 62ch; }
.measure--64{ max-width: 64ch; }
.measure--26{ max-width: 26ch; }
.measure--24{ max-width: 24ch; }
.measure--22{ max-width: 22ch; }
.measure--18{ max-width: 18ch; }

/* Мера в пикселях — для блоков с таблицами и схемами, где ch не подходит */
.measure--wide{ max-width: 820px; }
.measure--widest{ max-width: 860px; }
.measure--form{ max-width: 680px; }

/* Узкий центрированный блок (иллюстрации и врезки внутри текста) */
.block-center{ margin-left: auto; margin-right: auto; max-width: 460px; }

/* Инлайн-SVG, растягивающийся по ширине контейнера */
.svg-fluid{ width: 100%; height: auto; display: block; }

/* Пометка «пример» под заголовком карточки */
.ko-card-title + .note{ margin-top: var(--s-2); }

/* ============ РЯД КНОПОК ============ */
/* Одна реализация на все страницы: 404, /spasibo/ и всё, что дальше */

.ko-btn-row{ display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ============ ПЛАКАТНЫЕ СХЕМЫ (инлайн-SVG) ============ */

.figure-svg{
  display: block; width: 100%; max-width: 640px; height: auto;
  margin: var(--s-5) 0;
}
.figure-svg--sm{ width: 152px; }

/* ============ СООБЩЕНИЕ ОБ ОШИБКЕ ФОРМЫ ============ */
/* JS на сайте нет, поэтому блок показывается через :target.
   Обработчик /form-handler.php при ошибке возвращает на страницу
   адрес вида /konsultaciya/?err=fields#err-fields — браузер
   подсвечивает нужный блок и прокручивает к форме.
   Коды: off | fields | rate | form | too-long. */

.form-alert{ display: none; }
.form-alert:target{ display: flex; }

/* ============ HERO ГЛАВНОЙ ============ */

.ko-hero{ padding: var(--s-7) 0 var(--s-6); }
.ko-hero-grid{ display: grid; gap: var(--s-6); }

/* Плашка-выделение в H1 — акцентный синий в крупном размере */
.ko-hero h1 .hl{
  background: var(--ko-brand); color: var(--ko-paper);
  padding: 0 8px 2px; display: inline-block;
}

.ko-hero-sub{
  margin-top: var(--s-4);
  font-size: var(--fs-lead); line-height: var(--lh-lead);
  max-width: 56ch;
}
.ko-hero-sub b{ font-weight: 600; }

.ko-hero .check-form{ margin-top: var(--s-5); }
.ko-hero-form-note{ margin-top: 10px; }

.ko-hero .facts{ margin-top: var(--s-6); }
.facts-note{ margin-top: var(--s-2); text-align: right; }

/* ---------- Знак-ромб «Сначала проверь — потом плати» ---------- */

.sign-wrap{ display: none; } /* показывается только на широких экранах */
.sign{
  position: relative;
  width: 216px; height: 216px; margin: 14px auto 0;
  border: var(--border-3) solid var(--ko-line); background: var(--ko-paper);
  transform: rotate(45deg);
  display: grid; place-items: center;
}
.sign::after{
  content: ""; position: absolute; inset: 8px;
  border: var(--border-2) solid var(--ko-line); pointer-events: none;
}
.sign-inner{ transform: rotate(-45deg); text-align: center; width: 200px; }
.sign-inner .bang{
  font-family: var(--font-display); font-weight: 700;
  font-size: 64px; line-height: 1;
  color: var(--ko-brand); display: block; /* плакатный глиф — легальная роль сигнального */
}
.sign-inner .sign-text{
  display: block; margin-top: 6px;
  font-weight: 600; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
}

/* ============ СЕТКИ ЛИСТИНГОВ ============ */

/* Листинг с боковой колонкой (скамлист, блог): лента + sidebar */
.listing{ display: grid; gap: var(--s-6); align-items: start; }

/* Каталожная сетка равных карточек (схемы, инструменты) */
.grid-catalog{ display: grid; gap: var(--s-4); }

/* ============ ПЛАШКИ-«ЛОГОТИПЫ» КОНТОР СКАМЛИСТА ============ */
/* Стилизованный текстовый знак вымышленной конторы в карточке разбора.
   Декоративный (aria-hidden): название компании даёт заголовок карточки. */

.brand-line{ display: flex; align-items: center; gap: var(--s-3); margin-top: 14px; }
.brand-line .ko-card-title{ margin-top: 0; }

.brand-mark{
  flex: none; display: inline-grid; place-items: center;
  width: 54px; height: 54px; max-width: 100%;
  border: var(--border-3) solid var(--ko-line); background: var(--ko-paper);
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; line-height: 1; letter-spacing: 0;
  position: relative; overflow: hidden; user-select: none;
}
.brand-mark--ink{  background: var(--ko-bg-inverse); color: var(--ko-paper); }
.brand-mark--sand{ background: var(--ko-mist); }
.brand-mark--safe{ background: var(--ko-safe); color: var(--ko-paper); }

/* Тревожная пометка: знак перечёркнут диагональной сигнальной полосой.
   Класс намеренно назван нейтрально (--alarm): это визуальный акцент карточки,
   а не квалификация деятельности компании. */
.brand-mark--alarm::after{
  content: ""; position: absolute; top: 50%; left: -16%; right: -16%;
  height: 7px; margin-top: -5px;
  background: var(--ko-danger);
  border-top: 2px solid var(--ko-line); border-bottom: 2px solid var(--ko-line);
  transform: rotate(-38deg);
}

/* Крупная плашка в шапке страницы разбора */
/* font-size подобран так, чтобы двухбуквенный знак помещался в фиксированный
   бокс и не обрезался: Manrope 800 достаточно широкий, «MW» — самая широкая пара. */
.brand-mark--lg{ width: 76px; height: 76px; font-size: 26px; letter-spacing: 0; }

/* ============ ШИРОКИЕ ПЛАКАТНЫЕ БЛОКИ ============ */

/* Песочная лента во всю ширину — фон для шагов и чек-листов */
.poster-band{
  border-top: var(--border-3) solid var(--ko-line);
  border-bottom: var(--border-3) solid var(--ko-line);
  background: var(--ko-bg-alt);
  padding: var(--s-7) 0 var(--s-8);
}
.poster-band .checklist,
.poster-band .step{ background: var(--ko-paper); }

/* Двухколоночный разворот: основной поток + узкая колонка (чек-лист, шаги) */
.split-2{ display: grid; gap: var(--s-6); align-items: start; }

/* ============================================================
   БЛОКИ ОТДЕЛЬНЫХ СТРАНИЦ
   Раньше жили в инлайн-<style> и дублировались между файлами.
   Собраны здесь, чтобы правка была одна на весь сайт.
   ============================================================ */

/* ---------- 404: плакатный номер ошибки ---------- */

.error-code{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(110px, 26vw, 220px); line-height: .95;
  letter-spacing: .01em;
  color: var(--ko-brand); /* крупные цифры — законное место сигнального */
}
.error-code + h1{ margin-top: var(--s-3); max-width: 14ch; }

/* ---------- Немой футер карточки без ссылки ---------- */
/* Каталог схем и скамлист: «разбор готовится» вместо ссылки */

.ko-card-soon{
  display: block;
  border-top: 2px dashed var(--ko-line);
  padding: var(--s-3) var(--s-4);
  font-weight: 600; font-size: 14px;
  letter-spacing: .04em; opacity: .65;
}

/* ---------- Каталог схем: главный красный флаг в карточке ---------- */

.scheme-flag{
  border-top: var(--border-2) solid var(--ko-line);
  padding: 12px var(--s-4) 14px;
}
.scheme-flag p{ margin-top: 2px; font-size: 15px; font-weight: 500; }

/* ---------- Листинг скамлиста: шапка, фильтры, боковая колонка ---------- */

.listing-head{ padding: var(--s-5) 0 0; }
.listing-head h1{ margin-top: var(--s-4); max-width: 18ch; }
.listing-head .ko-hero-sub{ margin-top: var(--s-4); }
.listing-head .alert-bar{ margin-top: var(--s-5); max-width: 760px; }
.listing-body{ padding: var(--s-6) 0 var(--s-8); }
.filters{ margin-bottom: var(--s-5); }

.listing .pagination{ margin-top: var(--s-6); }

.side-stack{ display: grid; gap: var(--s-5); }
.sidebox{ border: var(--border-3) solid var(--ko-line); background: var(--ko-paper); }
.sidebox > h2{
  background: var(--ko-bg-inverse); color: var(--ko-paper);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-text); font-weight: 600;
  font-size: var(--fs-caption); line-height: var(--lh-caption);
  letter-spacing: .12em; text-transform: uppercase;
}
.sidebox-body{ padding: var(--s-4); font-size: 15px; }
.sidebox-body > * + *{ margin-top: var(--s-3); }

.verdict-legend{ list-style: none; }
.verdict-legend li{ display: block; }
.verdict-legend li + li{ margin-top: var(--s-3); padding-top: var(--s-3); border-top: 2px dashed var(--ko-line); }
.verdict-legend p{ margin-top: var(--s-2); font-size: var(--fs-caption); line-height: var(--lh-caption); }

/* ---------- Шапка разбора скамлиста (header.article-head) ---------- */

.crumbs-band{ padding: var(--s-4) 0 0; }
header.article-head{ padding: var(--s-5) 0 var(--s-6); }
.verdict-row{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.verdict-date{ font-size: 12px; font-weight: 500; }
header.article-head h1{ margin-top: var(--s-4); max-width: 24ch; }
header.article-head .lead-answer{ margin-top: var(--s-5); }
header.article-head .alert-bar{ margin-top: var(--s-5); max-width: 720px; }
.protocol-band{ padding: 0 0 var(--s-6); }
.protocol-band .signs-table{ max-width: 760px; }

.article-section{ padding: var(--s-2) 0 var(--s-7); }
.article-section .lead-answer{ margin-top: var(--s-4); }
.article-section .prose{ margin-top: var(--s-4); }
.article-section .trail,
.article-section .table-scroll,
.article-section .steps{ margin-top: var(--s-5); max-width: 880px; }
.article-section .risk{ margin-top: var(--s-5); max-width: 640px; }

/* ---------- Шапка пилара схемы (.container.article-head) ---------- */

.breadcrumbs-band{ padding-top: var(--s-5); }
.container.article-head{ padding: var(--s-6) 0 0; }

/* ---------- Блог: лента и пост ---------- */

.blog-aside h2{ font-size: var(--fs-h3); line-height: var(--lh-h3); }

.post-meta{
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-4);
  font-size: var(--fs-caption); font-weight: 500;
}
.post-meta .sep{ opacity: .5; }

/* ---------- Новости: боковая колонка листинга ---------- */
/* Та же роль, что у .blog-aside: узкая колонка рядом с лентой.
   Отдельный класс, а не общий с блогом, — разделы живут врозь
   и правки в одном не должны молча менять другой. */

.news-aside h2{ font-size: var(--fs-h3); line-height: var(--lh-h3); }

/* ---------- Результаты поиска по базе разборов (/proverit-kompaniyu/) ---------- */
/* Блок наполняет assets/js/poisk.js, та же разметка продублирована в <noscript>.
   Рамка 3px, радиус 0, без теней — как у карточки разбора. */

.check-results{
  margin-top: var(--s-5);
  border: var(--border-3) solid var(--ko-line);
  background: var(--ko-paper);
}
.check-results[hidden]{ display: none; }
.check-results:focus{ outline: 3px solid var(--ko-focus-ring); outline-offset: 2px; }

.check-results-head{
  margin: 0; padding: 12px var(--s-4);
  border-bottom: var(--border-2) solid var(--ko-line);
  background: var(--ko-bg-alt);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-label); line-height: var(--lh-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}

.check-results-list{ list-style: none; margin: 0; padding: 0; }
.check-results-list > li{
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--border-2) solid var(--ko-line);
}
.check-results-list > li:last-child{ border-bottom: 0; }

.check-hit-title{
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h3); line-height: var(--lh-h3);
}
.check-hit-note{ margin-top: var(--s-2); font-size: var(--fs-caption); line-height: var(--lh-caption); }

.check-results-foot,
.check-results-empty{ padding: var(--s-3) var(--s-4); }
.check-results-foot{ font-size: var(--fs-caption); line-height: var(--lh-caption); border-top: var(--border-2) solid var(--ko-line); }
.check-results-empty > * + *{ margin-top: var(--s-3); }
.check-results-empty .check-results-list{ margin: var(--s-3) 0; }
.check-results-empty .check-results-list > li{ padding: var(--s-2) 0; border-bottom: 0; }

/* ---------- Фильтр скамлиста по типу карточки (радиокнопки + CSS, без JS) ---------- */
/* История: сначала были ссылки index.html?verdikt=…, которые ничего не
   фильтровали; потом фильтр по вердиктам (все реальные разборы несли одну
   красную плашку — фильтр был бессмысленным). С 03.08.2026 фильтр разводит
   ленту по типу карточки: «Разборы компаний» (.ko-cards--razbor) отдельно
   от «Типовых схем» (.scheme-block). Счётчики в разметке /scamlist/
   обновляются руками — см. комментарий там же. */

.vfilter{ position: relative; align-items: stretch; }
.vfilter-radio{
  position: absolute; width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}
.vfilter-radio + .tag{ cursor: pointer; }
.vfilter-radio:checked + .tag{ background: var(--ko-ink); color: var(--ko-paper); }
.vfilter-radio:checked + .tag .tag-count{ color: var(--ko-paper); }
.vfilter-radio:focus-visible + .tag{ outline: 3px solid var(--ko-focus-ring); outline-offset: 2px; }

.listing:has(#vf-razbor:checked) .scheme-block,
.listing:has(#vf-shema:checked) .ko-cards--razbor{
  display: none;
}

/* Браузер без :has() ничего отфильтровать не сможет — тогда переключатель
   прячем целиком, чтобы не показывать кнопки, которые не работают. */
@supports not selector(:has(*)){
  .vfilter{ display: none; }
}

/* ============================================================
   ≥768px
   ============================================================ */
@media (min-width: 768px){
  .ko-hero{ padding: var(--s-8) 0 var(--s-7); }
  .grid-catalog{ grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .ko-card--featured .scheme-flag{ border-top: 0; flex: 1; }
}

/* ============================================================
   ≥1120px
   ============================================================ */
@media (min-width: 1120px){
  .ko-hero-grid{ grid-template-columns: 1fr 340px; align-items: center; gap: var(--s-8); }
  .sign-wrap{ display: block; }
  .listing{ grid-template-columns: 1fr 340px; gap: var(--s-9); }
  .split-2{ grid-template-columns: 1fr 380px; gap: var(--s-9); }
}