/* Базовая вёрстка. Правило ширины: телефон от 360px — основной сценарий,
   десктоп разворачивается до широкой плотной сетки и не остаётся узкой колонкой.

   Приёмы языка страницы:
   1. Разделяет ЛИНИЯ, а не плашка. Карточек с тенями почти нет.
   2. Служебное (кикеры, счётчики, цены, подписи) набрано моноширинным вразрядку.
   3. Полосы разделов помечаются лентой «подпись —————— счётчик», а не крупным баннером.
   4. Жирный шрифт редок: ранг несут цвет чернил, капитель и разрядка. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* тёплое свечение сверху: страница начинается не с холодного белого */
  background: radial-gradient(1300px 620px at 50% -8%, rgba(168,121,78,.07), transparent 62%), var(--bg);
}
img, video { max-width: 100%; display: block; }
a { color: var(--cold-deep); }
h1, h2, h3, h4 { color: var(--ink-strong); line-height: 1.2; letter-spacing: -.015em; margin: 0; font-weight: var(--w-accent); }
p { margin: 0; }
b, strong { font-weight: var(--w-mid); color: var(--ink-strong); }
:focus-visible { outline: 2px solid var(--cold-deep); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.wrap--wide { max-width: var(--wrap); }

/* ---------- полоса раздела ---------- */
/* только вертикальный отступ: эти классы вешаются на тот же элемент, что и .wrap,
   и запись `padding: Y 0` стирала его боковые поля — текст прилипал к краю экрана */
.section { padding-block: var(--section-y); }
.section--soft { background: var(--panel-2); --band: var(--panel-2); border-block: var(--ln-hair) solid var(--c-hair); }

/* лента-подпись: «ЧТО ЭТО ——————————————— 4 пункта» */
.lab {
  display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s5);
  font-family: var(--mono); font-size: 10.5px; line-height: 1.2; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.lab s { flex: 1 1 auto; height: var(--ln-hair); background: var(--c-hair); text-decoration: none; }
.lab i { flex: none; font-style: normal; color: var(--camel-deep); letter-spacing: .1em; }

.section__head { margin-bottom: var(--s6); }
.section__title { font-size: clamp(22px, 3.2vw, 31px); }
.section__lead {
  margin-top: var(--s3); font-family: var(--mono); font-size: 13px; line-height: 1.7;
  color: var(--ink-dim); max-width: 74ch;
}

/* кикер: короткая линия и подпись капителью вместо цветной таблетки */
.kicker {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--camel-deep);
}
.kicker::before { content: ""; width: 34px; height: 1px; background: var(--camel); opacity: .7; flex: none; }

/* ---------- кнопки: таблетка, моноширинная подпись, тонкая грань ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: var(--ln-thin) solid rgba(168,121,78,.45); background: var(--panel); color: var(--camel-deep);
  box-shadow: var(--shadow-soft);
  transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2), transform var(--dur-1);
}
.btn:hover { background: var(--camel-tint); border-color: var(--camel-deep); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--camel); border-color: var(--camel); color: #fff; }
.btn--primary:hover { background: var(--camel-deep); border-color: var(--camel-deep); color: #fff; }
.btn--ghost { background: var(--panel); }
.btn--wide { width: 100%; }
@media (min-width: 600px) { .btn--wide { width: auto; } }
.btn[disabled] { opacity: .55; cursor: default; }

/* ---------- шапка: тонкая полоса, а не плавающая панель ---------- */
.header {
  position: sticky; top: 0; z-index: 40; height: var(--header-h);
  /* фон — токеном: скины /case/ перекрывают его своим цветом */
  background: var(--header-bg, rgba(247,247,247,.94)); backdrop-filter: blur(8px);
  border-bottom: var(--ln-thin) solid var(--c-thin);
}
.header__inner { display: flex; align-items: center; gap: var(--s4); height: var(--header-h); }
.header__brand {
  font-weight: var(--w-mid); color: var(--ink-strong); text-decoration: none;
  font-size: 13.5px; letter-spacing: -.01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.header__brand:hover { color: var(--camel-deep); }
.header__nav { display: none; margin-left: auto; gap: var(--s6); }
.header__nav a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--ink-dim); text-decoration: none;
}
.header__nav a:hover { color: var(--camel-deep); }
.header__cta { margin-left: auto; flex: none; }
.header__cta .btn { min-height: 36px; font-size: 11.5px; padding: 0 15px; }
@media (max-width: 480px) { .header__brand { font-size: 12px; } .header__cta .btn { font-size: 11px; padding: 0 12px; } }
@media (min-width: 980px) {
  .header__nav { display: flex; }
  .header__cta { margin-left: var(--s6); }
}

/* ---------- первый экран: слева обещание, справа работающая модель ---------- */
.hero { padding-block: var(--s7) var(--section-y); }
.hero__grid { display: grid; gap: var(--s7); }
.hero__title { font-size: clamp(27px, 4.4vw, 46px); line-height: 1.08; margin-top: var(--s4); }
.hero__sub {
  margin-top: var(--s4); font-family: var(--mono); font-size: 13.5px; line-height: 1.75;
  color: var(--ink-dim); max-width: 62ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8);
  margin-top: var(--s7); padding-top: var(--s5); border-top: var(--ln-hair) solid var(--c-hair);
}
.hero__fact b { display: block; font-family: var(--mono); font-size: 19px; font-weight: var(--w-mid); color: var(--camel-deep); letter-spacing: -.01em; }
.hero__fact span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
@media (min-width: 1000px) {
  /* текст прижат к верху: панель заметно выше него, и центрирование
     оставляло над заголовком пустую четверть экрана */
  .hero__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; gap: var(--s9); }
  .hero { padding-top: var(--s8); }
}

/* ---------- витрина-афиша: сетка ситуаций ----------
   Карточка несёт крупный кадр той панели, которая откроется по клику, и минимум
   текста: отрасль, название ситуации, вопрос владельца его словами. */
.hero--marquee { padding-block: var(--s6) var(--s5); }
.hero__band { display: grid; gap: var(--s5); }
.hero__aside { display: flex; flex-direction: column; gap: var(--s4); }
.hero__aside .hero__sub { margin-top: 0; }
.hero__aside .hero__actions { margin-top: 0; }
@media (min-width: 1000px) {
  .hero__band { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s9); align-items: end; }
  .hero--marquee { padding-block: var(--s7) var(--s6); }
}
/* якорь под липкой шапкой: прокрутка не должна прятать заголовок под неё */
.anchor { display: block; position: relative; top: calc(-1 * var(--header-h) - 8px); }

/* Ряды постеров, а не список: карточка вертикальная (9:16), поэтому в ряд их
   помещается больше — две даже на самом узком экране. */
.simgrid { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px)  { .simgrid { gap: var(--s4); grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .simgrid { gap: var(--s5); grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .simgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Портретный экран — основной сценарий просмотра: телефон и монитор, повёрнутый
   вертикально. Ширины там мало, а высоты избыток, поэтому колонок берём на одну
   меньше: постер крупнее, прокрутка длиннее — для портрета это естественно.
   Правила идут после ширинных: при равной специфичности побеждает последнее. */
@media (orientation: portrait) {
  .simgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 560px)  { .simgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 900px)  { .simgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1280px) { .simgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1700px) { .simgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
}
/* Хвост страницы симуляции: три соседние ситуации. Ширина ряда ограничена,
   иначе вертикальный постер раздувается на всё полотно и спорит с самой моделью. */
.simgrid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .simgrid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 840px; } }

.simcard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--panel); border: var(--ln-thin) solid var(--c-thin); border-radius: var(--radius);
  padding: var(--s2); box-shadow: var(--shadow);
  transition: border-color var(--dur-2), transform var(--dur-2), box-shadow var(--dur-2);
}
@media (min-width: 900px) { .simcard { padding: var(--s3); } }
a.simcard:hover { border-color: var(--camel-deep); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.11); }
a.simcard:hover .simcard__title { color: var(--camel-deep); }
a.simcard:hover .simcard__badge { background: var(--camel); color: #fff; border-color: var(--camel); }
/* Постер — тот же кадр 1080 x 1920, который уходит обложкой публикации:
   пропорция совпадает, поэтому картинка не кадрируется. */
.simcard__poster {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border: var(--ln-thin) solid var(--pan-edge); border-radius: var(--radius-sm); background: var(--pan-bg);
}
.simcard__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.simcard__badge {
  position: absolute; right: 6px; top: 6px; display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
  font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  color: var(--camel-deep); background: rgba(255,253,248,.94);
  border: var(--ln-thin) solid rgba(168,121,78,.5); border-radius: 999px;
  transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
@media (min-width: 900px) {
  .simcard__badge { right: 8px; top: 8px; height: 21px; padding: 0 9px; font-size: 9px; letter-spacing: .1em; }
}
/* Текст лежит ПОД кадром, а не поверх него: на 360 px постер сужается до ~140 px,
   и надпись поверх приборного кадра теряет контраст и закрывает лог и итоги. */
.simcard__body { display: flex; flex-direction: column; gap: 4px; padding: var(--s3) var(--s1) var(--s1); }
.simcard__tag {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.simcard__title { font-size: 14px; line-height: 1.25; transition: color var(--dur-2); }
.simcard__q {
  font-size: 11.5px; line-height: 1.45; color: var(--ink-dim);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
@media (min-width: 900px) {
  .simcard__body { gap: 5px; padding: var(--s3) var(--s2) var(--s2); }
  .simcard__tag { font-size: 9.5px; letter-spacing: .14em; }
  .simcard__title { font-size: 16px; }
  .simcard__q { font-size: 12.5px; line-height: 1.5; -webkit-line-clamp: 4; }
}
.simcard--soon { background: var(--panel-2); }
/* каркас в кадре уже бледный сам по себе: гасить его ещё раз — значит получить
   в ряду афиши пятно вместо постера */
.simcard--soon .simcard__poster { opacity: .82; }
.simcard--soon .simcard__title { color: var(--ink-dim); }
.simcard--soon .simcard__badge { color: var(--ink-faint); border-color: var(--c-thin); background: rgba(252,251,250,.94); }

/* ---------- страница одной симуляции ---------- */
.simpage { padding-block: var(--s5) var(--section-y); }
.simpage__back { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; margin-bottom: var(--s5); }
.simpage__back a { color: var(--ink-faint); text-decoration: none; }
.simpage__back a:hover { color: var(--camel-deep); }
.simpage__head { margin-bottom: var(--s5); }
.simpage__title { font-size: clamp(25px, 3.6vw, 38px); line-height: 1.1; margin-top: var(--s3); }
.simpage__q {
  margin-top: var(--s3); font-family: var(--mono); font-size: 13.5px; line-height: 1.7;
  color: var(--ink-dim); max-width: 70ch;
}
.simpage__notes {
  display: grid; gap: var(--s5); margin-top: var(--s7);
  padding-top: var(--s5); border-top: var(--ln-hair) solid var(--c-hair);
}
@media (min-width: 900px) { .simpage__notes { grid-template-columns: repeat(3, 1fr); gap: var(--s8); } }
.simpage__noteh {
  font-family: var(--mono); font-size: 10px; font-weight: var(--w-mid); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s3);
}
.simpage__notes p { font-size: 13.5px; line-height: 1.65; color: var(--ink-dim); max-width: 62ch; }
.simpage__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.simpage__list li {
  position: relative; padding: 8px 0 8px 16px; font-size: 13px; line-height: 1.5; color: var(--ink-dim);
  border-top: var(--ln-hair) solid var(--c-hair);
}
.simpage__list li:first-child { border-top: 0; padding-top: 0; }
.simpage__list li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 1px; background: var(--camel); }
.simpage__list li:first-child::before { top: 7px; }
.simpage__fine { margin-top: var(--s3); font-family: var(--mono); font-size: 10.5px; line-height: 1.6; color: var(--ink-faint); }
.simpage__cta {
  display: grid; gap: var(--s4); margin-top: var(--s7); padding: var(--s5);
  background: var(--panel-warm); border: var(--ln-thin) solid rgba(168,121,78,.5); border-radius: var(--radius);
}
.simpage__cta b { display: block; font-size: 17px; color: var(--ink-strong); }
.simpage__cta span { display: block; margin-top: 5px; font-size: 13.5px; color: var(--ink-dim); }
.simpage__ctaBtns { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (min-width: 860px) {
  .simpage__cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s7); }
}
.simpage__more { margin-top: var(--s9); }

/* ============================================================================
   ПРИБОРНАЯ ПАНЕЛЬ — визуальная система симуляций
   ----------------------------------------------------------------------------
   Первый экран не показывает запись продукта — он и есть продукт: ползунок
   двигается, числа пересчитываются в тот же кадр.
   Скелет панели (один и тот же у всех тем, описан в _design/sim_visual_system.md):
     1 шапка · 2 полоса стадий · 3 ряд метрик · 4 сцена · 5 лог · 6 итоги · 7 подпись
   Правила: весь служебный текст моноширинный капителью вразрядку и мелкий,
   числа крупные и контрастные, у каждого блока тонкая рамка, у каждого элемента
   подпись «что это значит» — панель читается без инструкции.
   ========================================================================== */
.pan {
  margin: 0; font-family: var(--mono); color: var(--pan-ink);
  background: var(--pan-bg); border: var(--ln-thin) solid var(--pan-edge); border-radius: 10px;
  overflow: hidden; box-shadow: var(--shadow);
  /* цвета кластеров живут на самой панели: тёмный режим переопределяет их разом */
  --pan-grid: rgba(43,40,35,.08);
}
.pan--dark {
  --pan-bg: #0e0e0e; --pan-face: #151413; --pan-edge: #2f2b27; --pan-hair: rgba(255,255,255,.13);
  --pan-ink: #f1ece5; --pan-dim: #8e867e; --pan-grid: rgba(255,255,255,.07);
  --k-warm: #e2a562; --k-cold: #6f9fe0; --k-teal: #4fb3a5; --k-alarm: #e0715a;
}
.pan section, .pan header { min-width: 0; }
/* На широком экране сцена и лог встают рядом: иначе сцена растягивается на всю
   ширину панели, её высота уходит за половину экрана, а кривая теряется в пустоте.
   Раскладка задаётся сеткой самой панели — разметка тем при этом не меняется. */
@media (min-width: 1100px) {
  .pan { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .pan__top, .pan__stages, .pan__row, .pan__totals, .pan__foot { grid-column: 1 / -1; }
  .pan__scene { grid-column: 1; border-right: var(--ln-thin) solid var(--pan-hair); }
  .pan__log { grid-column: 2; align-content: start; }
  .pan__log .pan__line:nth-child(n+4) { display: grid; }
}

/* --- 1. шапка: имя работы, хлебные крошки, ключевые числа, часы --- */
.pan__top {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s3);
  padding: 10px 12px; background: var(--pan-face); border-bottom: var(--ln-thin) solid var(--pan-hair);
}
.pan__id { display: flex; align-items: flex-start; gap: var(--s2); min-width: 0; flex: 1 1 220px; }
.pan__mark {
  flex: none; width: 30px; height: 30px; border-radius: 5px; background: var(--k-warm); color: #fff;
  display: grid; place-items: center; font-size: 11px; letter-spacing: .04em;
}
.pan__name { display: block; font-family: var(--sans); font-size: 15px; font-weight: var(--w-accent); color: var(--pan-ink); letter-spacing: -.01em; line-height: 1.2; }
.pan__crumbs { display: block; margin-top: 3px; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pan-dim); line-height: 1.5; }
.pan__keys { display: flex; align-items: flex-start; gap: var(--s4); margin-left: auto; }
.pan__key span { display: block; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--pan-dim); }
.pan__key b { display: block; font-size: 14px; font-weight: var(--w-mid); color: var(--k-warm); font-variant-numeric: tabular-nums; line-height: 1.3; }
.pan__clock {
  align-self: flex-start; font-size: 11px; color: var(--pan-ink); font-variant-numeric: tabular-nums;
  border: var(--ln-thin) solid var(--pan-hair); border-radius: 4px; padding: 3px 7px; letter-spacing: .04em;
}

/* --- 2. полоса стадий: пересчёт идёт по цепочке --- */
.pan__stages {
  list-style: none; margin: 0; padding: 7px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  background: var(--pan-face); border-bottom: var(--ln-thin) solid var(--pan-hair);
}
.pan__stage {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 3px;
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--pan-dim);
  white-space: nowrap; border: var(--ln-thin) dashed transparent;
  transition: background var(--dur-1), color var(--dur-1);
}
.pan__stage.is-on { background: var(--k-warm); color: #fff; }
.pan__stage.is-done { color: var(--pan-ink); }
.pan__dash { flex: none; width: 16px; border-top: var(--ln-thin) dashed var(--pan-hair); }

/* --- 3. ряд блоков-метрик --- */
.pan__row { display: grid; gap: var(--ln-thin); background: var(--pan-hair); border-bottom: var(--ln-thin) solid var(--pan-hair); }
@media (min-width: 620px) { .pan__row--3 { grid-template-columns: repeat(3, 1fr); } }
.pan__box { background: var(--pan-face); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: var(--s2); }
.pan__boxhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px var(--s2); }
.pan__boxt { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--pan-ink); }
.pan__chip {
  margin-left: auto; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--k-cold); border: var(--ln-thin) solid var(--k-cold); border-radius: 3px; padding: 2px 6px;
}
.pan__chip--warm { color: var(--k-warm); border-color: var(--k-warm); }
.pan__chip--alarm { color: var(--k-alarm); border-color: var(--k-alarm); }
.pan__hint { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pan-dim); line-height: 1.55; }

/* ползунки — единственный орган управления панелью */
.pan__ctrl { display: block; }
.pan__ctrl + .pan__ctrl { margin-top: 10px; }
.pan__ctrllab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--pan-dim); }
.pan__ctrlval { font-size: 13px; letter-spacing: 0; color: var(--k-warm); font-variant-numeric: tabular-nums; }
.pan input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; display: block; margin: 0;
  height: 22px; background: transparent; cursor: pointer;
}
.pan input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--pan-hair); }
.pan input[type="range"]::-moz-range-track { height: 2px; background: var(--pan-hair); }
.pan input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -7px; border-radius: 50%;
  background: var(--k-warm); border: 2px solid var(--pan-face); box-shadow: 0 0 0 1px var(--k-warm);
  transition: transform var(--dur-1);
}
.pan input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--k-warm);
  border: 2px solid var(--pan-face); box-shadow: 0 0 0 1px var(--k-warm);
}
.pan input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
.pan input[type="range"]:focus-visible { outline: 2px solid var(--k-cold); outline-offset: 3px; border-radius: 4px; }
.pan__scale { display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .08em; color: var(--pan-dim); }

/* бары с числами справа */
.pan__bars { display: grid; gap: 6px; }
.pan__bar { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: var(--s2); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--pan-dim); }
.pan__track { height: 9px; background: var(--pan-grid); border-radius: 1px; overflow: hidden; }
.pan__fill { display: block; height: 100%; width: 0; background: var(--k-warm); transition: width var(--dur-2) var(--ease), background var(--dur-2); }
.pan__fill--cold { background: var(--k-cold); }
.pan__fill--teal { background: var(--k-teal); }
.pan__fill--alarm { background: var(--k-alarm); }
.pan__barval { font-size: 10.5px; letter-spacing: 0; color: var(--pan-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* стековая полоса: из чего сложился рубль выручки */
.pan__stack { display: flex; height: 26px; border-radius: 2px; overflow: hidden; background: var(--pan-grid); }
.pan__seg { display: grid; place-items: center; font-size: 9px; color: #fff; letter-spacing: .04em; min-width: 0; overflow: hidden; transition: width var(--dur-2) var(--ease); }
.pan__seg--cost  { background: #8d867c; }
.pan__seg--disc  { background: var(--k-alarm); }
.pan__seg--marg  { background: var(--k-teal); }
.pan__legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pan-dim); }
.pan__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 1px; margin-right: 5px; vertical-align: baseline; }
/* вывод блока: цифра, ради которой блок и нарисован. Стоит внизу — пустое
   место в высоком блоке занимает смысл, а не воздух */
.pan__fact {
  margin-top: auto; padding-top: var(--s2); border-top: var(--ln-thin) solid var(--pan-hair);
  font-size: 10px; line-height: 1.55; color: var(--pan-dim);
}
.pan__fact b { font-weight: var(--w-text); color: var(--k-teal); }
.pan__fact b.is-alarm { color: var(--k-alarm); }

/* сетка занятости: клетка — интервал смены. Подмигивает, только пока панель
   на экране и только если человек не просил уменьшить движение */
.pan__grid { display: grid; gap: 2px; }
.pan__cell { display: block; aspect-ratio: 1; border-radius: 1px; background: var(--pan-grid); transition: background var(--dur-2); }
.pan__cell.is-busy { background: var(--k-cold); }
.pan.is-live .pan__cell.is-busy { animation: panBlink 2.6s ease-in-out infinite; }
@keyframes panBlink { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* --- 4. сцена: перелом целиком в одном кадре --- */
.pan__scene { background: var(--pan-face); border-bottom: var(--ln-thin) solid var(--pan-hair); padding: 10px 12px 12px; }
.pan__plot { position: relative; margin-top: var(--s2); }
.pan__plot svg { display: block; width: 100%; height: auto; }
/* фигуры сцены: смысл каждой линии расшифрован легендой рядом */
.pan__plot .s-zone-bad  { fill: rgba(193,84,60,.13); }
.pan__plot .s-zone-good { fill: rgba(46,143,132,.15); }
.pan__plot .s-zero { stroke: var(--pan-dim); stroke-width: 1; fill: none; opacity: .5; }
.pan__plot .s-base { stroke: var(--k-warm); stroke-width: 1; stroke-dasharray: 5 4; fill: none; opacity: .75; }
.pan__plot .s-full { stroke: var(--pan-dim); stroke-width: 1; stroke-dasharray: 2 4; fill: none; opacity: .75; }
.pan__plot .s-disc { stroke: var(--k-warm); stroke-width: 2; fill: none; }
.pan__plot .s-dot  { fill: var(--k-cold); stroke: var(--pan-face); stroke-width: 2; }
.pan__pin {
  position: absolute; top: 0; bottom: 18px; width: 0; border-left: var(--ln-thin) solid var(--k-cold);
  transition: left var(--dur-2) var(--ease);
}
.pan__pin b {
  position: absolute; top: 0; left: 4px; font-size: 8px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: var(--w-text); color: #fff; background: var(--k-cold); border-radius: 2px; padding: 1px 4px; white-space: nowrap;
}
.pan__pin--gate { border-left-style: dashed; border-left-color: var(--k-alarm); }
.pan__pin--gate b { background: var(--k-alarm); top: 16px; }
.pan__pin--gate.is-right b { left: auto; right: 4px; }
.pan__pin.is-off { display: none; }
/* подпись сидит прямо на горизонтали «прибыль сейчас»: линия без подписи —
   это фигура, о которой зритель вынужден догадываться */
.pan__baselab {
  position: absolute; left: 0; transform: translateY(-50%);
  font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--k-warm);
  background: var(--pan-face); padding: 1px 5px; border-radius: 2px; white-space: nowrap;
  transition: top var(--dur-2) var(--ease);
}
.pan__axis { display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .08em; color: var(--pan-dim); margin-top: 2px; }

/* --- 5. лог: что панель только что посчитала --- */
.pan__log { background: var(--pan-face); border-bottom: var(--ln-thin) solid var(--pan-hair); padding: 8px 12px 10px; }
.pan__lines { margin-top: 5px; display: grid; gap: 2px; }
.pan__line { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--s2); font-size: 9.5px; line-height: 1.6; color: var(--pan-dim); }
.pan__line em { font-style: normal; color: var(--pan-ink); font-variant-numeric: tabular-nums; }
.pan__line s { text-decoration: none; color: var(--k-cold); letter-spacing: .08em; text-transform: uppercase; }
.pan__line.is-alarm s { color: var(--k-alarm); }
.pan__line:nth-child(n+4) { display: none; }
@media (min-width: 620px) { .pan__line:nth-child(n+4) { display: grid; } }

/* --- 6. строка итогов --- */
.pan__totals { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ln-thin); background: var(--pan-hair); }
@media (min-width: 480px) { .pan__totals { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .pan__totals { grid-template-columns: repeat(6, 1fr); } }
.pan__total { background: var(--pan-face); padding: 8px 10px 9px; min-width: 0; }
.pan__total span { display: block; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--pan-dim); }
.pan__total b { display: block; font-size: 15px; font-weight: var(--w-mid); color: var(--pan-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.pan__total b.is-alarm { color: var(--k-alarm); }
.pan__total b.is-ok { color: var(--k-teal); }

/* --- 7. подпись под панелью --- */
.pan__foot {
  padding: 7px 12px; background: var(--pan-bg); font-size: 8.5px; line-height: 1.6;
  letter-spacing: .08em; text-transform: uppercase; color: var(--pan-dim);
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.pan__foot b { color: var(--pan-ink); font-weight: var(--w-text); }

/* ---------- «что это»: сетка на линиях ---------- */
.grid-lines { display: grid; gap: 0; border-top: var(--ln-hair) solid var(--c-hair); }
.grid-lines__item { padding: var(--s5) 0; border-bottom: var(--ln-hair) solid var(--c-hair); }
.grid-lines__item h3 { font-size: 17px; margin-top: var(--s1); }
.grid-lines__item p { margin-top: var(--s2); color: var(--ink-dim); font-size: 13.5px; line-height: 1.6; max-width: 62ch; }
.grid-lines__num { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--camel-deep); }
@media (min-width: 860px) {
  .grid-lines { grid-template-columns: 1fr 1fr; column-gap: var(--s9); }
  .grid-lines__item { padding: var(--s6) 0; }
}

/* ---------- демонстрации: панель с меткой слева, а не карточка с тенью ---------- */
.cards { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card {
  position: relative; display: flex; flex-direction: column; gap: var(--s2);
  background: var(--panel); border: var(--ln-thin) solid var(--c-thin); border-radius: var(--radius);
  padding: var(--s4) var(--s5); text-decoration: none; color: inherit;
  box-shadow: var(--shadow);
  transition: border-color var(--dur-2), transform var(--dur-2), box-shadow var(--dur-2);
}
.card::after {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: var(--ln-mark);
  border-radius: 0 3px 3px 0; background: var(--cold); opacity: .75;
}
a.card:hover { border-color: var(--camel-deep); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0,0,0,.10); }
a.card:hover .card__title { color: var(--camel-deep); }
.card--soon::after { background: var(--c-edge); }
.card--soon { background: var(--panel-2); }
/* превью — кадр такой же приборной панели, а не абстрактная заглушка:
   по нему сразу видно, что именно откроется */
.card__poster {
  border: var(--ln-thin) solid var(--pan-edge); border-radius: var(--radius-sm);
  background: var(--pan-bg); overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: var(--s2);
}
.card__poster img { width: 100%; height: 100%; object-fit: cover; }
.card--soon .card__poster { opacity: .82; }
.card__body { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.card__tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.card__title { font-size: 17px; line-height: 1.3; transition: color var(--dur-2); }
.card__teaser { color: var(--ink-dim); font-size: 13.5px; line-height: 1.6; }
.card__cta {
  align-self: flex-start; margin-top: auto; padding-top: var(--s2);
  display: inline-flex; align-items: center; height: 24px; padding-inline: 11px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; line-height: 1;
  color: var(--cold-deep); background: var(--cold-tint);
  border: var(--ln-thin) solid rgba(78,122,168,.55); border-radius: 999px;
}
.card--soon .card__cta { color: var(--ink-faint); background: var(--panel); border-color: var(--c-thin); }
.note { margin-top: var(--s5); font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--ink-faint); letter-spacing: .03em; }

/* ---------- шаги: станции на рельсе ---------- */
.steps { position: relative; display: grid; gap: var(--s5); counter-reset: step; padding-left: 46px; }
.steps::before {                      /* рельс: на телефоне вертикальный */
  content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: var(--ln-hair);
  background: var(--c-hair);
}
.step { position: relative; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: -46px; top: -4px; width: 31px; height: 31px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--camel-deep);
  background: var(--camel-tint); border: var(--ln-thin) solid rgba(168,121,78,.5);
  box-shadow: 0 0 0 5px var(--band);  /* пробивает рельс фоном полосы */
}
.step h3 { font-size: 16px; }
.step p { margin-top: var(--s2); color: var(--ink-dim); font-size: 13.5px; line-height: 1.6; }
@media (min-width: 940px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s7); padding-left: 0; padding-top: 46px; }
  .steps::before { left: 0; right: 0; top: 15px; bottom: auto; width: auto; height: var(--ln-hair); }
  .step::before { left: 0; top: -46px; }
}

/* ---------- пакеты: прайс-полоса документа ----------
   волосяные разделители получены зазором 1px на цветной подложке —
   без единой рамки и без двойных линий на стыках */
.plans {
  display: grid; gap: var(--ln-thin); background: var(--c-thin);
  border: var(--ln-thin) solid var(--c-thin); border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 760px)  { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); background: var(--panel); }
.plan--featured { background: var(--panel-warm); }
.plan__badge {
  align-self: flex-start; display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
  color: #6e4b29; background: rgba(168,121,78,.12); border: var(--ln-thin) solid rgba(168,121,78,.5); border-radius: 999px;
  margin-bottom: var(--s1);
}
.plan__name { font-size: 15px; line-height: 1.35; font-weight: var(--w-mid); color: var(--ink-strong); }
.plan__price {
  font-family: var(--mono); font-size: clamp(20px, 2.4vw, 25px); font-weight: var(--w-mid);
  color: var(--camel-deep); letter-spacing: -.02em; line-height: 1.2; margin-top: var(--s1);
  font-variant-numeric: tabular-nums;
}
.plan__price-note { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.plan__summary { color: var(--ink-dim); font-size: 13px; line-height: 1.55; margin-top: var(--s2); }
.plan__features { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 0; }
.plan__features li {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-dim);
  padding: 7px 0 7px 16px; position: relative; border-top: var(--ln-hair) solid var(--c-hair);
}
.plan__features li::before {
  content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: var(--ln-hair); background: var(--camel);
}
.plan__action { margin-top: auto; padding-top: var(--s5); }
.plan__action .btn { width: 100%; }

/* ---------- сомнения: строки, а не коробки ---------- */
.faq { display: grid; gap: 0; max-width: 980px; border-top: var(--ln-hair) solid var(--c-hair); }
.faq details { border-bottom: var(--ln-hair) solid var(--c-hair); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s4) 0; font-size: 15px; font-weight: var(--w-mid); color: var(--ink-strong);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; flex: none; width: 12px; text-align: center;
  font-family: var(--mono); font-size: 14px; color: var(--camel-deep);
}
.faq details[open] summary::before { content: "–"; }
.faq summary:hover { color: var(--camel-deep); }
.faq p { padding: 0 0 var(--s5) 24px; color: var(--ink-dim); font-size: 13.5px; line-height: 1.65; max-width: 74ch; }

/* ---------- заявка ---------- */
.lead-grid { display: grid; gap: var(--s7); }
@media (min-width: 1000px) { .lead-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s9); align-items: start; } }
.form {
  background: var(--panel); border: var(--ln-thin) solid var(--c-thin); border-radius: var(--radius);
  padding: var(--s5); box-shadow: var(--shadow-soft);
}
@media (min-width: 700px) { .form { padding: var(--s7); } }
.field { display: block; margin-bottom: var(--s5); }
.field__label {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: var(--s2);
}
.field__req { color: var(--camel-deep); }
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 13px; font-family: var(--sans); font-size: 14.5px; color: var(--ink-strong);
  background: var(--panel-2); border: var(--ln-thin) solid var(--c-thin); border-radius: var(--radius-sm);
  min-height: 46px;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--camel-deep); background: var(--panel);
  box-shadow: 0 0 0 3px rgba(168,121,78,.16);
}
.field__hint { display: block; font-family: var(--mono); font-size: 10.5px; line-height: 1.6; color: var(--ink-faint); margin-top: var(--s2); }
.field__counter { font-variant-numeric: tabular-nums; }
.consents {
  display: grid; gap: var(--s3); margin: var(--s5) 0;
  padding-top: var(--s5); border-top: var(--ln-hair) solid var(--c-hair);
}
.consent {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--s3); align-items: start;
  font-size: 13px; line-height: 1.5; color: var(--ink-dim); cursor: pointer;
}
.consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--camel); }
.consent a { color: var(--cold-deep); }
.form__result {
  margin-top: var(--s4); padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 13.5px; display: none;
}
.form__result--ok  { display: block; background: var(--camel-tint); color: #5c3f22; border: var(--ln-thin) solid rgba(168,121,78,.5); }
.form__result--err { display: block; background: var(--alarm-tint); color: #7c3627; border: var(--ln-thin) solid rgba(168,80,62,.45); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- подвал: продолжение документа, а не тёмный блок ---------- */
.footer {
  margin-top: var(--section-y); padding: var(--s8) 0 var(--s6);
  border-top: var(--ln-thin) solid var(--c-thin); background: var(--panel-2);
}
.footer__grid { display: grid; gap: var(--s7); }
/* Две колонки, а не три: колонка «Связь» убрана вместе с плейсхолдерным адресом.
   Третий трек с двумя детьми оставлял бы у подвала пустую правую треть. */
@media (min-width: 860px) { .footer__grid { grid-template-columns: 1.5fr 1fr; gap: var(--s8); } }
.footer h4 {
  font-family: var(--mono); font-size: 10px; font-weight: var(--w-mid); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s3);
}
.footer p { font-size: 13px; line-height: 1.6; color: var(--ink-dim); max-width: 54ch; }
.footer a { color: var(--cold-deep); text-decoration: none; }
.footer a:hover { color: var(--camel-deep); text-decoration: underline; }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: 13px; }
.footer__bottom {
  margin-top: var(--s7); padding-top: var(--s4); border-top: var(--ln-hair) solid var(--c-hair);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-faint);
}

/* ---------- баннер cookie: две равнозначные кнопки ---------- */
.cookie {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  background: var(--panel); border: var(--ln-edge) solid var(--c-edge); border-radius: var(--radius);
  box-shadow: 0 10px 34px rgba(0,0,0,.16); padding: var(--s4); display: none; gap: var(--s4);
}
.cookie--visible { display: grid; }
.cookie__text { font-size: 13px; line-height: 1.55; color: var(--ink-dim); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cookie__actions .btn { min-height: 40px; flex: 1 1 auto; }
@media (min-width: 860px) {
  .cookie { left: auto; right: 20px; bottom: 20px; max-width: 560px; }
  .cookie--visible { grid-template-columns: 1fr auto; align-items: center; }
  .cookie__actions .btn { flex: 0 0 auto; }
}

/* ---------- служебные страницы ---------- */
.page { padding-block: var(--s7) var(--section-y); max-width: var(--wrap-narrow); }
.page h1 { font-size: clamp(23px, 4vw, 32px); margin-bottom: var(--s2); }
.page h2 { font-size: 19px; margin: var(--s7) 0 var(--s2); }
.page h3 { font-size: 16px; margin: var(--s5) 0 var(--s1); }
.page p { margin: var(--s3) 0; max-width: 78ch; }
.page ul { margin: var(--s3) 0; padding-left: var(--s5); max-width: 78ch; }
.page li { margin: var(--s1) 0; }
.doc-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-faint);
  margin-bottom: var(--s6); padding-bottom: var(--s4); border-bottom: var(--ln-hair) solid var(--c-hair);
}
.status-box { border-radius: var(--radius); padding: var(--s6); border: var(--ln-thin) solid var(--c-thin); background: var(--panel); }
.status-box--ok  { background: var(--panel-warm); border-color: rgba(168,121,78,.5); }
.status-box--bad { background: var(--alarm-tint); border-color: rgba(168,80,62,.45); }
.status-box h1, .status-box h2 { margin-bottom: var(--s3); }
.status-box dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s5); margin: var(--s5) 0 0; font-size: 14px; }
.status-box dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); align-self: center; }
.status-box dd { margin: 0; font-weight: var(--w-mid); color: var(--ink-strong); }

/* ---------- плашка чернового контента (только локально) ---------- */
.draftbar {
  background: var(--camel-tint); color: #6e4b29; text-align: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; padding: 7px 12px;
  border-bottom: var(--ln-hair) solid rgba(168,121,78,.4);
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 12px; top: 12px; z-index: 100; background: var(--panel); padding: 10px 16px;
  border-radius: var(--radius-sm); border: var(--ln-thin) solid var(--c-edge);
}

/* ============================================================================
   РАЗБОР-СИМУЛЯЦИЯ (кейс-разбор) — страница /case/<название>
   ----------------------------------------------------------------------------
   Каркас формата: 4 смысловых блока и приложение-пакет. Язык страницы тот же
   тёплый документ, врезки данных говорят языком приборной панели (--pan-*).
   Всё движение — на общем движке sim-core.js, логика в case-demo.js.
   ========================================================================== */
.case-note {
  display: inline-block; margin-top: var(--s4); padding: 7px 12px;
  font-family: var(--mono); font-size: 11px; line-height: 1.6; letter-spacing: .04em;
  color: #6e4b29; background: var(--camel-tint);
  border: var(--ln-thin) solid rgba(168,121,78,.5); border-radius: var(--radius-sm);
}
.case-block { margin-top: var(--s8); padding-top: var(--s6); border-top: var(--ln-hair) solid var(--c-hair); }
.case-h { font-size: clamp(19px, 2.6vw, 25px); margin-bottom: var(--s4); }
.case-lead { color: var(--ink-dim); font-size: 13.5px; line-height: 1.65; max-width: 74ch; margin-bottom: var(--s5); }
.case-fine { font-family: var(--mono); font-size: 10.5px; line-height: 1.6; color: var(--ink-faint); }

/* --- 1. описание: текст + паспорт данных --- */
.case-desc { display: grid; gap: var(--s6); }
.case-desc__text p { margin-bottom: var(--s3); color: var(--ink-dim); font-size: 14px; line-height: 1.65; max-width: 64ch; }
@media (min-width: 1000px) {
  .case-desc { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--s8); align-items: start; }
}

/* паспорт — мини-панель: колонки самой панели ей не нужны */
.case-pass { display: flex; flex-direction: column; }
.case-pass__table { background: var(--pan-face); border-bottom: var(--ln-thin) solid var(--pan-hair); }
.case-pass__row {
  display: grid; gap: 3px var(--s3); padding: 9px 12px;
  border-top: var(--ln-thin) solid var(--pan-hair);
  font-size: 10px; line-height: 1.5; letter-spacing: .04em; color: var(--pan-dim);
  grid-template-areas: "a e" "b b" "c d"; grid-template-columns: minmax(0, 1fr) auto;
}
.case-pass__row:first-child { border-top: 0; }
.case-pass__row span:nth-child(1) { grid-area: a; }
.case-pass__row span:nth-child(2) { grid-area: b; }
.case-pass__row span:nth-child(3) { grid-area: c; }
.case-pass__row span:nth-child(4) { grid-area: d; text-align: right; }
.case-pass__row span:nth-child(5) { grid-area: e; text-align: right; white-space: nowrap; }
.case-pass__row b { font-weight: var(--w-text); color: var(--pan-ink); font-size: 11px; }
.case-pass__row--head { display: none; }
@media (min-width: 720px) {
  .case-pass__row, .case-pass__row--head {
    grid-template-areas: none; grid-template-columns: .8fr 1.15fr 1fr .7fr .9fr; gap: var(--s3);
  }
  /* :nth-child(n) держит специфичность базовых правил областей — иначе сброс проигрывает им */
  .case-pass__row span:nth-child(n) { grid-area: auto; text-align: left; }
  .case-pass__row--head {
    display: grid; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--pan-dim);
    padding-block: 6px;
  }
}
.case-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 5px; vertical-align: 1px;
}
.case-dot--live { background: var(--k-teal); }
.case-dot--sched { background: var(--k-cold); }
.case-block.is-live .case-dot--live { animation: caseDot 2.2s ease-in-out infinite; }
@keyframes caseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,143,132,.45); }
  50%      { box-shadow: 0 0 0 5px rgba(46,143,132,0); }
}
.case-pass__log { border-bottom: 0; }
.case-pass__log .pan__lines { min-height: 58px; }

/* --- 2. специалисты: строго обезличенные роли --- */
.case-roles { display: grid; gap: var(--s4); }
@media (min-width: 700px)  { .case-roles { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
@media (min-width: 1180px) { .case-roles { grid-template-columns: repeat(4, 1fr); } }
.case-role {
  position: relative; display: flex; flex-direction: column; gap: var(--s2);
  background: var(--panel); border: var(--ln-thin) solid var(--c-thin); border-radius: var(--radius);
  padding: var(--s4) var(--s5); box-shadow: var(--shadow-soft);
}
.case-role::after {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: var(--ln-mark);
  border-radius: 0 3px 3px 0; background: var(--camel); opacity: .75;
}
.case-role__num { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--camel-deep); }
.case-role__name { font-size: 16px; }
.case-role__what { color: var(--ink-dim); font-size: 13px; line-height: 1.6; }
.case-role__chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
.case-role__chips span {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  color: var(--cold-deep); background: var(--cold-tint); border: var(--ln-thin) solid rgba(78,122,168,.45);
  border-radius: 999px; padding: 4px 8px;
}
.case-role__file {
  margin-top: auto; padding-top: var(--s3); border-top: var(--ln-hair) solid var(--c-hair);
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--ink-faint);
}

/* --- 3. выводы: карточка-прибор с цифрой и мини-визуалом --- */
.case-findings { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .case-findings { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
.case-find {
  display: flex; flex-direction: column; gap: var(--s3);
  font-family: var(--mono); color: var(--pan-ink);
  background: var(--pan-bg); border: var(--ln-thin) solid var(--pan-edge); border-radius: 10px;
  padding: var(--s4); box-shadow: var(--shadow-soft);
}
.case-find__head { display: flex; align-items: baseline; gap: var(--s2); }
.case-find__role { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pan-dim); }
.case-find__num { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.case-find__num b {
  font-size: clamp(24px, 3vw, 31px); font-weight: var(--w-mid); color: var(--pan-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap;
}
.case-find__num b.is-alarm { color: var(--k-alarm); }
.case-find__num b.is-ok { color: var(--k-teal); }
.case-find__num span {
  flex: 1 1 160px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pan-dim); line-height: 1.6;
}
.case-find__note {
  margin-top: auto; padding-top: var(--s3); border-top: var(--ln-thin) solid var(--pan-hair);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.6; color: var(--ink-dim);
}
.case-find__stack { height: 22px; }
.case-find__plot svg { display: block; width: 100%; height: auto; }
.case-find__baselab { left: auto; right: 0; top: 22px; transform: none; }
/* гистограмма по часам: колонка вырастает, когда блок попал на экран */
.case-cols {
  display: flex; align-items: flex-end; gap: 3px;
  height: 96px; padding-top: 16px; margin-top: var(--s2);
  border-bottom: var(--ln-thin) solid var(--pan-hair);
}
.case-cols i {
  position: relative; flex: 1 1 0; min-width: 0; height: 0;
  background: var(--k-cold); border-radius: 1px 1px 0 0;
  transition: height .8s var(--ease);
}
.case-cols i:nth-child(-n+2), .case-cols i:nth-child(n+10) { background: var(--k-alarm); }
.case-cols i b {
  position: absolute; top: -14px; left: -4px; right: -4px; text-align: center;
  font-size: 8px; font-weight: var(--w-text); color: var(--pan-dim); font-variant-numeric: tabular-nums;
}
@media (max-width: 479px) { .case-cols i b { display: none; } }
.case-block.is-in .case-cols i { height: var(--h, 0%); }
.case-cols__axis {
  display: flex; justify-content: space-between; gap: var(--s2); margin-top: 3px;
  font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--pan-dim);
}

/* --- 4. заключение: строка итогов + вердикт --- */
.case-final__totals {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ln-thin);
  background: var(--pan-hair); border: var(--ln-thin) solid var(--pan-edge); border-radius: 10px;
  overflow: hidden; font-family: var(--mono);
}
@media (min-width: 480px)  { .case-final__totals { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .case-final__totals { grid-template-columns: repeat(6, 1fr); } }
.case-total { background: var(--pan-face); padding: 10px 12px 11px; min-width: 0; }
.case-total span { display: block; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--pan-dim); }
.case-total b {
  display: block; font-size: 17px; font-weight: var(--w-mid); color: var(--pan-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap;
}
.case-total b.is-alarm { color: var(--k-alarm); }
.case-total b.is-ok { color: var(--k-teal); }
.case-final__verdict {
  margin-top: var(--s5); padding: var(--s5);
  background: var(--panel-warm); border: var(--ln-thin) solid rgba(168,121,78,.5); border-radius: var(--radius);
}
.case-verdict, .case-rec { font-size: 14px; line-height: 1.65; color: var(--ink-dim); max-width: 84ch; }
.case-rec { margin-top: var(--s4); }
.case-verdict .pan__chip, .case-rec .pan__chip { margin: 0 8px 0 0; font-family: var(--mono); vertical-align: 2px; }
.case-final__verdict .case-fine { margin-top: var(--s4); padding-top: var(--s3); border-top: var(--ln-hair) solid rgba(168,121,78,.35); }

/* --- приложение: пакет для внедрения --- */
.case-pack { display: grid; gap: var(--s5); }
@media (min-width: 900px) {
  .case-pack { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--s8); align-items: start; }
}
.case-pack__list { border-top: var(--ln-hair) solid var(--c-hair); }
.case-pack__item {
  display: grid; gap: 2px var(--s4); padding: var(--s3) 0;
  border-bottom: var(--ln-hair) solid var(--c-hair);
}
.case-pack__item b { font-family: var(--mono); font-size: 12.5px; font-weight: var(--w-text); color: var(--camel-deep); }
.case-pack__item span { font-size: 13px; line-height: 1.55; color: var(--ink-dim); }
@media (min-width: 640px) {
  .case-pack__item { grid-template-columns: 220px minmax(0, 1fr); align-items: baseline; }
}
.case-pack__action { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }

/* ==========================================================================
   ТЕМЫ РАЗБОРОВ. Каждый кейс объявляет свою гамму атрибутом data-theme на
   <article class="casepage">: внутри переопределяются только переменные,
   разметка и остальные страницы не затрагиваются. Новая тема = новый блок.
   ========================================================================== */

/* --- тема «эфир»: холодный индиго вместо тёплого камеля; кейс R02 --- */
.casepage[data-theme="efir"] {
  /* акцент страницы: метки, кикеры, имена файлов пакета */
  --camel: #5352c0;
  --camel-deep: #403f9c;
  --camel-tint: #eceafb;
  /* стол и лицо панелей — холодная бумага, не тёплая */
  --pan-bg:   #f1f2f7;
  --pan-face: #fbfbfe;
  --pan-edge: rgba(37,39,54,.55);
  --pan-hair: rgba(37,39,54,.15);
  --pan-ink:  #1d1f2a;
  --pan-dim:  #676c7c;
  /* кластеры панели в языке этой темы */
  --k-warm:  #403f9c;   /* главные числа */
  --k-cold:  #5352c0;   /* объём, спрос */
  --k-teal:  #1f8a70;   /* то, что остаётся */
  --k-alarm: #b23a78;   /* всплеск, негатив */
  /* серии тем на графиках: порядок закреплён, палитра прошла проверку
     на различимость при цветослепоте (валидатор dataviz, поверхность #fbfbfe) */
  --w1: #b23a78;  /* внезапное событие */
  --w2: #5352c0;  /* календарное событие */
  --w3: #b07a1e;  /* затяжная тема */
  --w4: #1f8a70;  /* рыночная тема */
  --w5: #8a5a9e;  /* фоновая тема */
}

/* --- органы кейса «волны»: лента, пульс, вкладки тем, графики, ползунок --- */
.wave-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s3);
  margin-top: var(--s4); border: var(--ln-thin) solid var(--c-thin);
  border-radius: var(--radius-sm); background: var(--panel); overflow: hidden;
}
.wave-strip__pulse {
  flex: 1 1 100%; display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-bottom: var(--ln-hair) solid var(--c-hair);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); min-width: 0;
}
@media (min-width: 700px) {
  .wave-strip { flex-wrap: nowrap; }
  .wave-strip__pulse { white-space: nowrap; }
  .wave-strip__pulse { flex: none; border-bottom: 0; border-right: var(--ln-hair) solid var(--c-hair); }
}
.wave-strip__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--k-teal);
  animation: wavePulse 2s ease-in-out infinite;
}
@keyframes wavePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31,138,112,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(31,138,112,0); }
}
.wave-strip__belt { flex: 1 1 auto; overflow: hidden; position: relative; }
.wave-strip__belt::before, .wave-strip__belt::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 28px; z-index: 1; pointer-events: none;
}
.wave-strip__belt::before { left: 0; background: linear-gradient(90deg, var(--panel), transparent); }
.wave-strip__belt::after { right: 0; background: linear-gradient(270deg, var(--panel), transparent); }
.wave-strip__run { display: inline-flex; gap: var(--s7); padding: 8px 0; white-space: nowrap; will-change: transform; animation: waveRun 90s linear infinite; }
.wave-strip:hover .wave-strip__run { animation-play-state: paused; }
@keyframes waveRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wave-strip__item { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
.wave-strip__item b { font-weight: var(--w-text); color: var(--camel-deep); }
@media (prefers-reduced-motion: reduce) {
  .wave-strip__run { animation: none; }
}

.wave-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.wave-tab {
  appearance: none; cursor: pointer; border: var(--ln-thin) solid var(--c-edge);
  border-radius: 999px; background: var(--panel); padding: 5px 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-dim);
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.wave-tab i { width: 8px; height: 8px; border-radius: 2px; background: var(--tab-c, var(--ink-faint)); }
.wave-tab:hover { border-color: var(--tab-c, var(--camel)); color: var(--ink-strong); }
.wave-tab.is-on { border-color: var(--tab-c, var(--camel)); color: var(--ink-strong); box-shadow: inset 0 0 0 1px var(--tab-c, var(--camel)); }

.wave-chart { position: relative; }
.wave-chart svg { display: block; width: 100%; height: auto; }
.wave-chart .axis { stroke: var(--pan-hair); stroke-width: 1; }
.wave-chart .grid { stroke: var(--pan-hair); stroke-width: 1; stroke-dasharray: 2 4; }
.wave-chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wave-chart .fill { opacity: .1; }
.wave-chart .zone-neg { fill: var(--k-alarm); opacity: .06; }
.wave-chart text { font-family: var(--mono); font-size: 9px; fill: var(--pan-dim); }
.wave-chart .cursor { stroke: var(--pan-ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.wave-chart.is-hover .cursor { opacity: .6; }
.wave-tip {
  position: absolute; pointer-events: none; z-index: 2; opacity: 0;
  background: var(--pan-ink); color: #fbfbfe; border-radius: var(--radius-sm);
  padding: 6px 9px; font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
  transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap;
  transition: opacity var(--dur-1) var(--ease);
}
.wave-chart.is-hover .wave-tip { opacity: 1; }
.wave-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s2); }
.wave-legend span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--pan-dim); }
.wave-legend i { width: 10px; height: 2px; background: var(--lg-c, var(--pan-dim)); }

.wave-react { display: grid; gap: var(--s3); }
.wave-react__vals { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.wave-react__val span { display: block; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pan-dim); }
.wave-react__val b { display: block; font-family: var(--mono); font-size: 21px; font-weight: var(--w-text); font-variant-numeric: tabular-nums; color: var(--k-warm); }
.wave-react__val b.is-alarm { color: var(--k-alarm); }
.wave-react__val b.is-ok { color: var(--k-teal); }

/* движение выключается, если человек попросил об этом в системе */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   БИБЛИОТЕКА СКИНОВ /case/ — служебные органы.
   Скин = файл public/assets/skins/<id>.css, перекрывающий токены страницы.
   Здесь: неброский переключатель скинов (демо-режим) и изоляция блока
   «пакет для внедрения» от токенов скина.
   ========================================================================== */

/* --- переключатель скинов: тихий селект в углу, для показа библиотеки --- */
.skin-switch {
  position: fixed; right: 12px; bottom: 12px; z-index: 55;
  opacity: .3; transition: opacity var(--dur-2) var(--ease);
}
.skin-switch:hover, .skin-switch:focus-within { opacity: 1; }
.skin-switch select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  color: var(--ink-dim); background: var(--panel);
  border: var(--ln-thin) solid var(--c-edge); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; max-width: 190px;
}

/* --- блок пакета: ВСЕГДА корневой светлый стиль, скин его не перекрашивает.
       Переменные переобъявлены жёстко базовыми значениями: у вложенной области
       приоритет над переопределениями скина на body[data-skin] и .casepage --- */
.case-pack-std {
  --bg: #f7f7f7; --panel: #ffffff; --panel-2: #fcfbfa;
  --panel-warm: linear-gradient(180deg, #fcf6ec, #f6edde);
  --ink-strong: #1b1b1b; --ink: #2b2b2b; --ink-dim: #5c574f; --ink-faint: #707070;
  --camel: #a8794e; --camel-deep: #8a5e34; --camel-tint: #f6eee2;
  --cold: #4e7aa8; --cold-deep: #3e6076; --cold-tint: #eaf1f6;
  --alarm: #a8503e; --alarm-tint: #f7ece9;
  --c-hair: rgba(185,185,185,.30); --c-thin: rgba(185,185,185,.55); --c-edge: #b9b9b9;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.035);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.05);
  --radius: 12px; --radius-sm: 9px;
  --sans: "Work Sans", "WS Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "JB Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  font-family: var(--sans); color: var(--ink);
  background: var(--bg); border: var(--ln-thin) solid var(--c-edge);
  border-radius: var(--radius); padding: var(--s6) var(--s5) var(--s6);
  margin-top: var(--s8);
}
@media (min-width: 900px) { .case-pack-std { padding: var(--s7); } }
.case-pack-std .lab { color: var(--ink-faint); }
.case-pack-std .lab i { color: var(--camel-deep); }
.case-pack-std .case-h { color: var(--ink-strong); }
.case-pack-std b, .case-pack-std strong { color: var(--ink-strong); }

/* --- раскрывающиеся шаги установки --- */
.cps-install { margin-top: var(--s6); border-top: var(--ln-hair) solid var(--c-hair); }
.cps-install summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) 0; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--camel-deep);
}
.cps-install summary::-webkit-details-marker { display: none; }
.cps-install summary::before {
  content: "+"; flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: var(--ln-thin) solid var(--camel); display: inline-flex;
  align-items: center; justify-content: center; font-size: 13px; line-height: 1;
}
.cps-install[open] summary::before { content: "−"; }
.cps-install__body { padding-bottom: var(--s4); }

.cps-steps { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s3); }
.cps-steps li { font-size: 13.5px; line-height: 1.6; color: var(--ink-dim); }
.cps-steps li p { margin: 0; max-width: 78ch; }
.cps-steps li b { color: var(--ink-strong); font-weight: var(--w-mid); }

.cps-variants { display: grid; gap: var(--s5); margin-top: var(--s5); }
@media (min-width: 1000px) { .cps-variants { grid-template-columns: 1fr 1fr; gap: var(--s7); } }
.cps-var {
  background: var(--panel); border: var(--ln-thin) solid var(--c-thin);
  border-radius: var(--radius-sm); padding: var(--s4) var(--s5) var(--s5);
}
.cps-var h3 { font-size: 13.5px; margin-bottom: var(--s4); color: var(--ink-strong); }

/* команда копируемой строкой */
.cps-cmd {
  display: flex; align-items: stretch; margin-top: var(--s2);
  border: var(--ln-thin) solid var(--c-edge); border-radius: var(--radius-sm);
  overflow: hidden; background: #211d18;
}
.cps-cmd code {
  flex: 1 1 auto; min-width: 0; padding: 8px 11px;
  font-family: var(--mono); font-size: 11px; line-height: 1.55; color: #f0e9dd;
  white-space: pre-wrap; word-break: break-word;
}
.cps-cmd .cps-copy {
  flex: none; border: 0; border-left: 1px solid rgba(255,255,255,.14);
  background: #2c2721; color: #c7b596; cursor: pointer;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 0 12px;
}
.cps-cmd .cps-copy:hover { color: #f0e9dd; background: #3a332a; }
.cps-hint {
  margin-top: var(--s5); padding-top: var(--s4); border-top: var(--ln-hair) solid var(--c-hair);
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
}

/* ==========================================================================
   МИНИ-ТЕРМИНАЛ КЕЙСА: лента реальных запросов сборщика + живой повтор.
   Тёмная консоль во всех скинах; цвет акцента скин задаёт через --t-acc.
   ========================================================================== */
.term {
  --t-bg: #0d0c0a; --t-face: #14120f; --t-ink: #e8e2d5; --t-dim: #8f887c;
  --t-line: rgba(255,255,255,.09); --t-acc: #7cd992; --t-err: #ff6b5e;
  background: var(--t-bg); color: var(--t-ink);
  border: var(--ln-thin) solid var(--t-line); border-radius: var(--radius-sm);
  font-family: var(--mono); overflow: hidden;
}
.term__bar {
  display: flex; align-items: center; gap: var(--s3); padding: 9px 13px;
  background: var(--t-face); border-bottom: var(--ln-thin) solid var(--t-line);
}
.term__dots { display: inline-flex; gap: 5px; }
.term__dots i { width: 9px; height: 9px; border-radius: 50%; background: #453f37; }
.term__dots i:first-child { background: var(--t-err); opacity: .75; }
.term__dots i:nth-child(2) { background: #d8a03c; opacity: .6; }
.term__dots i:last-child { background: var(--t-acc); opacity: .7; }
.term__host { font-size: 11.5px; font-weight: var(--w-text); color: var(--t-acc); letter-spacing: .04em; }
.term__meta { margin-left: auto; font-size: 9.5px; letter-spacing: .08em; color: var(--t-dim); text-transform: uppercase; }
.term__list { max-height: 430px; overflow: auto; }
.term__req { border-bottom: 1px solid var(--t-line); }
.term__req:last-child { border-bottom: 0; }
.term__line {
  display: flex; align-items: baseline; gap: var(--s3); width: 100%;
  padding: 7px 13px; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 11px; color: var(--t-ink); text-align: left;
}
.term__line:hover { background: rgba(255,255,255,.04); }
.term__line[aria-expanded="true"] { background: rgba(255,255,255,.05); }
.term__line s {
  flex: none; text-decoration: none; color: var(--t-acc); font-size: 10px; letter-spacing: .1em;
}
.term__url {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--t-ink); opacity: .92;
}
.term__line em {
  flex: none; font-style: normal; font-size: 9.5px; color: var(--t-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.term__line em.is-ok { color: var(--t-acc); }
.term__line em.is-err { color: var(--t-err); }
@media (max-width: 700px) { .term__line em:nth-of-type(2), .term__line em:nth-of-type(3) { display: none; } }
.term__detail { padding: var(--s3) 13px var(--s4); background: rgba(0,0,0,.28); }
.term__params { display: grid; gap: 5px; margin-bottom: var(--s3); }
.term__param { display: grid; gap: 1px 14px; font-size: 10.5px; }
@media (min-width: 760px) { .term__param { grid-template-columns: minmax(180px, .8fr) 1.6fr; } }
.term__param b { font-weight: var(--w-text); color: var(--t-acc); word-break: break-all; }
.term__param span { color: var(--t-dim); }
.term__cap { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--t-dim); margin-bottom: 4px; }
.term__pre {
  margin: 0; padding: 9px 11px; max-height: 190px; overflow: auto;
  background: var(--t-face); border: 1px solid var(--t-line); border-radius: 6px;
  font-family: inherit; font-size: 10px; line-height: 1.55; color: var(--t-ink);
  white-space: pre-wrap; word-break: break-word;
}
.term__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.term__go {
  border: 1px solid var(--t-acc); background: transparent; color: var(--t-acc);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  font-family: inherit; font-size: 10.5px; letter-spacing: .06em;
}
.term__go:hover { background: var(--t-acc); color: var(--t-bg); }
.term__go[disabled] { opacity: .45; cursor: default; }
.term__note { font-size: 9.5px; color: var(--t-dim); }
.term__out { margin-top: var(--s3); }
.term__foot {
  padding: 8px 13px; border-top: var(--ln-thin) solid var(--t-line);
  font-size: 9.5px; letter-spacing: .05em; color: var(--t-dim);
}

/* кнопка скачивания внутри блока пакета — всегда базовая камель-таблетка:
   специфичность выше любых скиновых правил .btn--primary */
.case-block.case-pack-std .btn.btn--primary {
  background: var(--camel); border: var(--ln-thin) solid var(--camel); color: #fff;
  box-shadow: var(--shadow-soft); border-radius: 999px;
  font-family: var(--mono); text-transform: none; transform: none;
}
.case-block.case-pack-std .btn.btn--primary:hover {
  background: var(--camel-deep); border-color: var(--camel-deep); color: #fff;
}
/* заголовок и служебная лента пакета — базовая типографика при любом скине */
.case-block.case-pack-std .case-h {
  font-family: var(--sans); text-transform: none; letter-spacing: -.015em;
  font-weight: var(--w-accent); font-size: clamp(19px, 2.6vw, 25px);
}

/* ============================================================================
   ЭКСПЛЕЙНЕР (.exp-*) — компоненты страницы-разбора «editorial explainer».
   Скин-нейтральный каркас: цвета берутся из токенов, акцент карточки задаётся
   инлайн-переменной --acc. Классы живут только на /case/top-novosti,
   поэтому остальные страницы правилами не задеты. Палитру и свечение
   докручивает скин (v7.css).
   ========================================================================== */

/* ---------- общая рамка страницы: контент 1200, ритм секций ---------- */
.exp-page { --wrap: 1200px; }
.exp-page .case-block { margin-top: 48px; padding-top: 0; border-top: 0; }
@media (min-width: 900px) { .exp-page .case-block { margin-top: 72px; } }
.exp-page .case-block.case-pack-std { margin-top: 72px; padding-top: var(--s6); border-top: var(--ln-hair) solid var(--c-hair); }

/* моно-надпись-рубрика над блоком */
.exp-cap {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); line-height: 1.4;
}
.exp-cap em { font-style: normal; color: var(--acc, var(--camel)); }
.exp-hair { height: 1px; background: var(--pan-hair); margin: 16px 0; }

/* ---------- HERO: дек, ряд тезисов, степпер ---------- */
.exp-deck {
  margin-top: var(--s3); max-width: 78ch;
  font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink-dim);
}
.exp-deck b { color: var(--ink-strong); font-weight: 700; }

.exp-claims { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s4); }
.exp-claims span {
  font-family: var(--mono); font-size: 11px; line-height: 1.2; padding: 5px 10px;
  border: 1px solid var(--c-thin); border-radius: 7px; color: var(--ink-dim);
}
.exp-claims b { color: var(--ink-strong); font-weight: 400; }

.exp-stepper { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.exp-stepper a {
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px;
  border: 1px solid var(--c-thin); color: var(--ink-faint);
  font-family: var(--mono); font-size: 10px; text-decoration: none;
}
.exp-stepper a:hover { color: var(--ink-strong); border-color: var(--camel); }
.exp-stepper i {
  font-style: normal; margin-left: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-faint);
}

/* ---------- ряд плиток-цифр ---------- */
.exp-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .exp-tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.exp-tiles--6 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 760px) { .exp-tiles--6 { grid-template-columns: repeat(6, 1fr); } }
.exp-tile {
  background: var(--pan-bg); border: 1px solid var(--pan-hair); border-radius: 12px; padding: 12px 14px;
}
.exp-tile span {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.exp-tile b {
  display: block; margin-top: 6px; font-family: var(--sans); font-weight: var(--w-accent);
  font-size: 26px; line-height: 1.05; letter-spacing: -.025em; color: var(--ink-strong);
}
.exp-tile i {
  display: block; margin-top: 5px; font-style: normal;
  font-family: var(--mono); font-size: 10px; line-height: 1.4; color: var(--ink-faint);
}
.exp-note {
  margin-top: 12px; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--ink-dim);
}
.exp-note b { color: var(--ink-strong); font-weight: 400; }

/* ---------- ГЛАВНАЯ ФИГУРА: панель «лестница + рельс» ---------- */
.exp-main {
  --acc: #F59E0B;
  position: relative; overflow: hidden; margin: 0;
  background: var(--pan-bg); border: 1px solid var(--pan-hair); border-radius: 16px;
  padding: 18px 16px 16px;
}
@media (min-width: 900px) { .exp-main { padding: 22px 24px 18px; } }
.exp-main::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acc); opacity: .75; border-radius: 16px 0 0 16px;
}
.exp-main__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.exp-main__grid { display: grid; gap: 24px; margin-top: 18px; }
@media (min-width: 1025px) { .exp-main__grid { grid-template-columns: 62% 1fr; gap: 32px; } }
.exp-main__foot {
  margin-top: 16px; text-align: center;
  font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink-faint);
}

/* лестница: в DOM 01 идёт первым, на экране 04 сверху — читается снизу вверх */
.exp-ladder { display: flex; flex-direction: column-reverse; gap: 12px; margin-top: 12px; }
.exp-rung {
  --acc: #F59E0B;
  display: grid; grid-template-columns: minmax(0, 1fr) auto 24px minmax(0, 56%);
  align-items: stretch; column-gap: 0;
}
.exp-rung__aside {
  align-self: center; text-align: right; padding-right: 10px;
  font-family: var(--mono); font-size: 9.5px; line-height: 1.5; color: var(--ink-faint);
}
.exp-rung__no {
  align-self: center; padding-right: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--ink-faint);
}
.exp-rung__rail { position: relative; }
.exp-rung__rail::before {
  content: ""; position: absolute; left: 50%; top: -12px; bottom: -12px; width: 1px;
  background: var(--c-thin);
}
.exp-ladder > .exp-rung:first-child .exp-rung__rail::before { top: 50%; }
.exp-ladder > .exp-rung:last-child .exp-rung__rail::before { bottom: 50%; }
.exp-rung__rail i {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 55%, transparent);
}
/* шестиугольная лента: внешний слой = грань в акценте, внутренний = заливка */
.exp-hex {
  position: relative; height: 58px; display: grid; place-items: center; text-align: center;
  background: var(--acc);
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 22px 100%, 0 50%);
}
.exp-hex::before {
  content: ""; position: absolute; inset: 1px; z-index: 0;
  background: color-mix(in srgb, var(--acc) 15%, var(--pan-bg));
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 22px 100%, 0 50%);
}
.exp-hex > span { position: relative; z-index: 1; display: block; padding: 0 26px; }
.exp-hex b {
  display: block; font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1.2;
  letter-spacing: -.01em; color: var(--ink-strong);
}
.exp-hex u {
  display: block; margin-top: 3px; text-decoration: none;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
  color: color-mix(in srgb, var(--acc) 85%, transparent);
}

/* правый рельс панели */
.exp-rail__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; margin-top: 12px; }
.exp-rail__tile span {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.exp-rail__tile b {
  display: block; margin-top: 3px; font-family: var(--sans); font-weight: var(--w-accent);
  font-size: 19px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink-strong);
}
.exp-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.exp-legend li {
  display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim);
}
.exp-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--sc, var(--camel)); }
.exp-legend em { font-style: normal; color: var(--ink-faint); font-size: 9.5px; }
.exp-log { margin-top: 10px; min-height: 96px; }
.exp-log .pan__line {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: baseline;
  font-family: var(--mono); font-size: 9.5px; line-height: 1.55;
  white-space: nowrap; overflow: hidden;
}
.exp-log .pan__line em { font-style: normal; color: var(--ink-faint); }
.exp-log .pan__line s { text-decoration: none; color: var(--camel); }
.exp-log .pan__line span { color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; }

/* ---------- глобальный фильтр темы ---------- */
.exp-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.exp-filter > b {
  font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.exp-filter .wave-tabs { margin: 0; gap: 7px; }
.exp-filter .wave-tab { padding: 4px 10px; font-size: 10.5px; }

/* ---------- КАРТОЧКА-ПАНЕЛЬ доказательства ---------- */
.exp-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; margin-top: 20px; }
@media (min-width: 1025px) { .exp-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }

.exp-card {
  --acc: #F59E0B;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: var(--pan-bg); border: 1px solid var(--pan-hair); border-radius: 14px;
  padding: 18px 16px 16px; min-height: 300px;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
@media (min-width: 1025px) { .exp-card { padding: 22px 24px 18px; min-height: 344px; } }
.exp-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acc); opacity: .75; border-radius: 14px 0 0 14px;
}
.exp-card:hover {
  border-color: color-mix(in srgb, var(--acc) 35%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 12%, transparent), var(--shadow);
}
.exp-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; }
.exp-rub { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.exp-rub b {
  flex: none; font-family: var(--mono); font-weight: 400; font-size: 10px; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acc);
  border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent); border-radius: 5px; padding: 4px 7px;
}
.exp-rub span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.exp-state {
  flex: none; font-family: var(--mono); font-size: 10px; line-height: 1; color: var(--ink-dim);
  border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent); border-radius: 6px;
  padding: 4px 8px; white-space: nowrap;
}
.exp-card__claim {
  margin-top: 14px; max-width: 34em;
  font-family: var(--sans); font-weight: 600; font-size: 18px; line-height: 1.32;
  letter-spacing: -.012em; color: var(--ink-strong);
}
@media (min-width: 1025px) { .exp-card__claim { font-size: 19px; } }
.exp-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.exp-card__chips span {
  font-family: var(--mono); font-size: 11px; line-height: 1.2; padding: 4px 9px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); color: var(--ink-dim);
}
.exp-fig { flex: 0 0 auto; height: 140px; margin-top: 18px; }
@media (min-width: 1025px) { .exp-fig { height: 168px; } }
/* карточка со своим органом управления: фигура ниже — ползунок занимает её место */
.exp-card--ctrl .exp-fig { height: 118px; }
@media (min-width: 1025px) { .exp-card--ctrl .exp-fig { height: 136px; } }
.exp-fig > svg, .exp-fig > .wave-chart { display: block; width: 100%; height: 100%; }
.exp-fig > .wave-chart svg { display: block; width: 100%; height: 100%; }
.exp-card__tail { margin-top: auto; }
.exp-card__tail::before { content: ""; display: block; height: 1px; background: var(--pan-hair); margin: 14px 0 12px; }
.exp-card__take {
  font-family: var(--mono); font-size: 11px; line-height: 1.45; letter-spacing: .01em;
  color: var(--ink-faint); text-align: center;
}

/* ползунок часа реакции внутри карточки — компактный ряд под фигурой */
.exp-range { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.exp-range > span { flex: none; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.exp-range input[type="range"] { flex: 1 1 auto; min-width: 0; }
.exp-range > b {
  flex: none; font-family: var(--mono); font-weight: 400; font-size: 11px;
  color: var(--acc); min-width: 96px; text-align: right;
}

/* ---------- мини-схема ---------- */
.exp-scheme { overflow: visible; }
.exp-scheme .node {
  fill: color-mix(in srgb, var(--acc) 13%, transparent);
  stroke: color-mix(in srgb, var(--acc) 55%, transparent); stroke-width: 1;
}
.exp-scheme .link {
  fill: none; stroke: color-mix(in srgb, var(--acc) 35%, transparent);
  stroke-width: 1; stroke-linecap: round;
}
.exp-scheme .link--dash { stroke-dasharray: 4 4; }
.exp-scheme .dot { fill: var(--acc); }
.exp-scheme .pulse { fill: none; stroke: color-mix(in srgb, var(--acc) 30%, transparent); stroke-width: 1; }
.exp-scheme text { font-family: var(--mono); }
.exp-scheme .lb { font-size: 11px; fill: var(--ink-strong); text-anchor: middle; }
.exp-scheme .sub { font-size: 9px; fill: var(--ink-faint); text-anchor: middle; }
.exp-scheme .tag { font-size: 9.5px; fill: var(--acc); text-anchor: middle; }
.exp-scheme .chev { font-size: 13px; fill: color-mix(in srgb, var(--acc) 50%, transparent); text-anchor: middle; }
.exp-scheme .axis { stroke: var(--pan-hair); stroke-width: 1; }
.exp-scheme .plot { fill: none; stroke: var(--acc); stroke-width: 1.4; stroke-linejoin: round; }
.exp-scheme .plotfill { fill: var(--acc); opacity: .1; stroke: none; }

/* ---------- бары классов тем ---------- */
.exp-bars { display: grid; gap: 9px; align-content: center; height: 100%; }
.exp-bar { display: grid; grid-template-columns: minmax(0, 96px) 1fr auto; align-items: center; gap: 9px; }
.exp-bar > span:first-child {
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.exp-bar__track { height: 6px; border-radius: 3px; background: var(--pan-hair); overflow: hidden; }
.exp-bar__fill { display: block; height: 100%; border-radius: 3px; background: var(--sc, var(--camel)); width: 0; transition: width 700ms var(--ease); }
.exp-bar > b { font-family: var(--mono); font-weight: 400; font-size: 10px; color: var(--ink-dim); white-space: nowrap; }
.exp-bar.is-on > span:first-child, .exp-bar.is-on > b { color: var(--ink-strong); }

/* ---------- вердикт и чёрная плашка-правило ---------- */
.exp-verdict { min-height: 0; margin-top: 20px; }
.exp-verdict .exp-card__claim { font-size: 21px; max-width: 40em; }
@media (min-width: 1025px) { .exp-verdict .exp-card__claim { font-size: 22px; } }
.exp-verdict .exp-card__tail::before { margin-top: 18px; }
/* плашка-правило: display:block намеренно — grid/flex разложил бы каждый
   inline-кусок в отдельный ряд и порвал строку правила на три */
.exp-strip {
  margin-top: 20px; min-height: 52px; display: block;
  border-radius: 12px; padding: 16px 18px; background: var(--dark); text-align: center;
  font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--dark-dim);
}
.exp-strip b { font-weight: 400; color: var(--camel); }

/* ---------- приложение: полный журнал запросов ---------- */
.exp-appendix { margin-top: var(--s6); border-top: var(--ln-hair) solid var(--c-hair); padding-top: var(--s5); }
.exp-appendix > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-dim);
  border: 1px solid var(--c-edge); border-radius: 7px; padding: 6px 11px;
}
.exp-appendix > summary::-webkit-details-marker { display: none; }
.exp-appendix > summary::before { content: "+"; color: var(--camel); }
.exp-appendix[open] > summary::before { content: "-"; }
.exp-appendix__body { margin-top: var(--s4); }

/* ---------- мобайл ---------- */
@media (max-width: 640px) {
  .exp-rung { grid-template-columns: 1fr; row-gap: 6px; }
  .exp-rung__aside { text-align: left; padding: 0; order: 2; }
  .exp-rung__no { padding: 0; order: 3; }
  .exp-rung__rail { display: none; }
  .exp-hex { order: 1; }
  .exp-ladder { gap: 18px; }
  .exp-bar { grid-template-columns: minmax(0, 84px) 1fr auto; }
}

/* заголовок только для скринридера: смысловая иерархия страницы остаётся,
   визуально его место занимает моно-рубрика панели */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}