/* ============================================================
   ЛАМИНА AI — блок дашбордов эффективности (С6)
   Монохром на токенах ASTROLABS: уголь --ink, бумага --soft,
   один акцент --deep. Собственных цветов здесь нет: всё через
   переменные из tokens.css.

   Правило блока: число и подпись живут в разметке и видны без
   JavaScript. <canvas> — дополнение к числу, а не его носитель.
   ============================================================ */

.charts{
  display:grid;
  gap:var(--sp-5);
  grid-template-columns:1fr;
}
/* Две колонки — только когда каждая держит полосу с подписью на
   конце. Ниже 860px карточки идут одна под другой. */
@media (min-width:860px){
  .charts{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Карточка на всю ширину сетки: диаграммы с семью строками и
   лента KPI читаются только в полную меру. */
.chart-card--wide{ grid-column:1 / -1; }

.chart-card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.chart-card h3{
  font-size:var(--fs-md);
  line-height:var(--lh-sub);
  letter-spacing:var(--ls-snug);
}
.chart-card__sub{
  color:var(--muted);
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
  max-width:var(--measure-card);
}
.chart-card__src{
  margin-top:auto;
  padding-top:var(--sp-3);
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:var(--lh-normal);
}

/* --- Числовой слой. Он же легенда, он же табличное представление
   для скринридера и для случая «JS не выполнился». --- */
.chart-values{
  display:grid;
  gap:var(--sp-2);
  font-size:var(--fs-sm);
}
.chart-values li{
  display:flex;
  align-items:baseline;
  gap:var(--sp-3);
  justify-content:space-between;
  padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--line);
}
.chart-values li:last-child{ border-bottom:0; padding-bottom:0; }
.chart-values__k{ color:var(--muted); }
.chart-values__v{
  min-width:5.5rem;
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}
.chart-values__v--accent{ color:var(--deep-ink); }

/* Маркер серии рядом с подписью: идентичность не держится на одном
   цвете — рядом всегда есть слово. */
.chart-key{
  display:inline-block;
  width:.6em; height:.6em;
  margin-right:.45em;
  border-radius:50%;
  background:var(--ink);
  vertical-align:baseline;
}
.chart-key--muted{ background:var(--line-control); }
.chart-key--accent{ background:var(--deep); }

/* --- Холст. Пока JS не отработал, места не занимает: без скрипта
   у карточки просто нет графика, а числа остаются на месте. --- */
.chart-canvas{
  position:relative;
  width:100%;
  height:0;
  overflow:hidden;
}
/* Класс js ставит charts.js. Нет скрипта — нет и пустой рамки. */
.js .chart-canvas{ height:var(--chart-h, 200px); }
.chart-canvas--tall{ --chart-h:280px; }
.chart-canvas canvas{ display:block; width:100% !important; height:100% !important; }
.chart-canvas svg{ display:block; width:100%; height:100%; }

@media (min-width:700px){
  .chart-canvas{ --chart-h:220px; }
  .chart-canvas--tall{ --chart-h:320px; }
}

/* --- Лента KPI: крупные числа без диаграммы. Форма выбрана
   осознанно — одно число не рисуют графиком. --- */
.kpi-band{
  display:grid;
  gap:var(--sp-5);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.kpi{ display:flex; flex-direction:column; gap:var(--sp-2); }
.kpi__num{
  font-family:var(--font-display);
  font-size:var(--fs-2xl);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.kpi__num em{ font-style:normal; color:var(--deep-ink); }
.kpi__label{ font-size:var(--fs-sm); color:var(--ink); }
.kpi__note{ font-size:var(--fs-xs); color:var(--muted); }

/* --- Движение.Входная анимация Chart.js отключается тем же
   переключателем, что и всё остальное на сайте (см. charts.js). --- */
@media (prefers-reduced-motion:reduce){
  .chart-canvas svg *{ animation:none !important; }
}

@media print{
  .chart-canvas{ display:none; }
}

/* Вафля: клетки всплывают лесенкой; при reduce-motion класс не
   ставится вовсе (см. charts.js), правило ниже — второй рубеж. */
.wf{ transform-box:fill-box; transform-origin:center; animation:wf-pop .45s cubic-bezier(.2,.7,.3,1) both; }
@keyframes wf-pop{ from{ transform:scale(0); opacity:0 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce){
  .wf{ animation:none; }
}

/* дамбелл: место под подписи партий слева */
#chartYield{ --chart-pad-left: 130px; }

/* ============================================================
   KIT — набор модулей волны 2 (контракт: KIT.md)
   Правило номер один: инлайновых стилей нет, CSP их режет
   (style-src 'self'). Любая доля приезжает классом-ступенью.
   Правило номер два: число живёт в разметке; JS только оживляет.
   .mod, .mod--dark и сетки .grid-1/2/3 — зона С1, здесь их нет.
   ============================================================ */

/* --- 1 · Счётчик --- */
.num{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}
.num--lg{
  font-family:var(--font-display);
  font-size:var(--fs-xl);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  font-weight:600;
}
.num--hero{
  font-family:var(--font-display);
  font-size:var(--fs-3xl);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
}
.num--accent{ color:var(--deep-ink); }
.num--muted{ color:var(--muted); }

/* --- 2 · Было → станет --- */
.swap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-3);
}
.swap__from .num{ color:var(--muted); font-weight:500; }
.swap__arrow{
  color:var(--line-control);
  font-size:var(--fs-md);
  line-height:1;
}
.swap__note{
  flex-basis:100%;
  color:var(--muted);
  font-size:var(--fs-sm);
}
@media (max-width:420px){
  .swap{ flex-direction:column; align-items:flex-start; gap:var(--sp-2); }
  .swap__arrow{ transform:rotate(90deg); }
}

/* --- 3 · Тумблер «сейчас / после» --- */
.toggle{ display:flex; flex-direction:column; gap:var(--sp-5); }
.toggle__bar{
  display:inline-flex;
  align-self:flex-start;
  padding:3px;
  gap:3px;
  border:1px solid var(--line-control);
  border-radius:999px;
  background:var(--paper);
}
.toggle__btn{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:var(--sp-2) var(--sp-5);
  min-height:40px;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:var(--fs-sm);
  font-weight:600;
  white-space:nowrap;
}
.toggle__btn:hover{ color:var(--ink); }
.toggle__btn.is-on{ background:var(--ink); color:#FFF; }
.toggle__pane[hidden]{ display:none; }

/* --- 5 · Мини-бар --- */
.bars{ display:grid; gap:var(--sp-4); }
.bars__row{
  display:grid;
  grid-template-columns:minmax(0, 8.5rem) 1fr auto;
  align-items:center;
  gap:var(--sp-3) var(--sp-4);
}
.bars__k{ color:var(--ink); font-size:var(--fs-sm); }
.bars__track{
  display:flex;
  height:22px;
  border-radius:999px;
  background:var(--sunken);
  overflow:hidden;
}
.bars__fill{
  width:var(--v, 0%);
  background:var(--line-control);
  border-radius:999px;
  transition:width var(--dur-slow, .7s) var(--ease-out, cubic-bezier(.2,.7,.3,1));
}
.bars--anim .bars__fill{ width:0; }
.bars__fill--ink{ background:var(--ink); }
.bars__fill--accent{ background:var(--deep); }
.bars__fill--soft{ background:var(--chart-l5); }
/* Стопка: сегменты в одном треке, разделены бумажным зазором. */
.bars--stack .bars__fill + .bars__fill{ box-shadow:-2px 0 0 var(--soft); }
.bars__v{ text-align:right; font-size:var(--fs-sm); min-width:5.5rem; }
@media (max-width:520px){
  .bars__row{ grid-template-columns:1fr auto; }
  .bars__track{ grid-column:1 / -1; order:3; }
  .bars__v{ order:2; }
}

/* --- 6 · Вафля --- */
.waffle{ display:grid; gap:var(--sp-4); position:relative; }
/* Слот под сетку: 20 клеток в ряд, 5 рядов, зазор 3px — отсюда 420/103.
   Стоит в разметке всегда, поэтому появление сетки ничего не двигает. */
.waffle::after{
  content:"";
  display:block;
  width:min(100%, 420px);
  aspect-ratio:420 / 103;
}
.waffle__grid{
  position:absolute;
  left:0;
  bottom:0;
  width:min(100%, 420px);
  display:grid;
  grid-template-columns:repeat(20, 1fr);
  gap:3px;
}
.waffle__grid i{
  display:block;
  aspect-ratio:1;
  border-radius:2px;
  background:var(--chart-l5);
}
.waffle__grid i.is-on{ background:var(--deep); }
.waffle__grid i.is-on2{ background:var(--ink); }
.waffle__grid i.wf{ animation:wf-pop .45s cubic-bezier(.2,.7,.3,1) both; }
.waffle__fallback{ color:var(--muted); font-size:var(--fs-sm); max-width:var(--measure-card); }

/* --- 7 · Спарклайн --- */
.spark{
  display:inline-block;
  width:100%;
  max-width:180px;
  height:28px;
  vertical-align:middle;
}
.spark svg{ display:block; width:100%; height:100%; overflow:visible; }
.spark__line{ fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.spark__dot{ fill:var(--deep); }
.spark--draw .spark__line{ stroke-dasharray:1; stroke-dashoffset:1; animation:spark-draw .8s var(--ease-out, cubic-bezier(.4,0,.2,1)) both; }
@keyframes spark-draw{ to{ stroke-dashoffset:0 } }

/* --- 8 · Шкала --- */
.gauge{ display:grid; gap:var(--sp-3); }
.gauge__track{
  position:relative;
  height:14px;
  border-radius:999px;
  background:var(--sunken);
  overflow:hidden;
}
.gauge__fill{
  display:block;
  height:100%;
  width:var(--v, 0%);
  border-radius:999px;
  background:var(--deep);
  transition:width var(--dur-slow, .7s) var(--ease-out, cubic-bezier(.2,.7,.3,1));
}
.gauge--anim .gauge__fill{ width:0; }
.gauge__mark{
  position:absolute;
  top:0; bottom:0;
  left:var(--v, 0%);
  width:2px;
  background:var(--ink);
}
.gauge__v{ line-height:var(--lh-tight); }
.gauge__k{ color:var(--muted); font-size:var(--fs-sm); }

/* --- 9 · Лента этапов --- */
.steps-t{ display:grid; gap:var(--sp-3); }
.steps-t__i{
  display:grid;
  grid-template-columns:auto minmax(0, 12rem) 1fr auto;
  align-items:center;
  gap:var(--sp-3) var(--sp-4);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--line);
}
.steps-t__i:last-child{ border-bottom:0; padding-bottom:0; }
.steps-t__n{
  display:grid;
  place-items:center;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--sunken);
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
}
.steps-t__name{ color:var(--ink); font-size:var(--fs-sm); }
.steps-t__bar{ display:block; height:10px; border-radius:999px; background:var(--sunken); overflow:hidden; }
.steps-t__fill{
  display:block; height:100%; width:var(--v, 0%);
  border-radius:999px; background:var(--line-control);
  transition:width var(--dur-slow, .7s) var(--ease-out, cubic-bezier(.2,.7,.3,1));
}
.steps-t--anim .steps-t__fill{ width:0; }
.steps-t__t{ text-align:right; font-size:var(--fs-sm); min-width:5.5rem; }
/* Ворота — разделитель, а не шаг. */
.steps-t__i--gate{
  grid-template-columns:1fr;
  gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);
  margin:var(--sp-2) 0;
  border:1px dashed var(--line-control);
  border-radius:var(--r-md);
  background:var(--deep-wash);
}
.steps-t__i--gate .steps-t__name{ font-weight:600; }
/* Ворота — не шаг: ни номера, ни длительности у них нет. Прячем и
   трек, и кружок номера. Авторы ставят в него точку-заглушку, и она
   висела одинокой «.» в углу плашки — правим здесь, а не в разметке,
   чтобы это не зависело от того, что автор туда положил. */
.steps-t__i--gate .steps-t__bar,
.steps-t__i--gate .steps-t__n{ display:none; }
/* Этап, который платформа снимает целиком. Единственное место,
   где зачёркивание числа разрешено. */
.steps-t__i--off .steps-t__name{ color:var(--muted); }
.steps-t__i--off .steps-t__t{ color:var(--muted); text-decoration:line-through; }
.steps-t__i--off .steps-t__fill{ background:var(--chart-l5); }
@media (max-width:640px){
  .steps-t__i{ grid-template-columns:auto 1fr auto; }
  .steps-t__bar{ grid-column:2 / -1; order:4; }
}

/* --- 10 · Сравнение двух колонок --- */
.versus{ display:grid; gap:var(--sp-5); }
@media (min-width:700px){
  .versus{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-6); }
}
.versus__col{
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-5);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--paper);
}
.versus__col--to{ border-color:rgba(var(--deep-rgb), .28); background:var(--deep-wash); }
.versus__cap{
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-wider);
  text-transform:uppercase;
  color:var(--muted);
}
.versus__col--to .versus__cap{ color:var(--deep-ink); }
.versus__list{ display:grid; gap:var(--sp-3); }
.versus__list li{
  position:relative;
  padding-left:var(--sp-5);
  color:var(--ink);
  font-size:var(--fs-sm);
  line-height:var(--lh-normal);
}
.versus__list li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:8px; height:2px;
  background:var(--line-control);
}
.versus__col--to .versus__list li::before{ background:var(--deep); }

/* --- Движение: одна дверь для всего набора --- */
@media (prefers-reduced-motion:reduce){
  .bars__fill, .gauge__fill, .steps-t__fill{ transition:none !important; }
  .bars--anim .bars__fill, .gauge--anim .gauge__fill, .steps-t--anim .steps-t__fill{ width:var(--v, 0%); }
  .waffle__grid i.wf, .spark--draw .spark__line{ animation:none; }
  .spark--draw .spark__line{ stroke-dasharray:none; stroke-dashoffset:0; }
}

/* Лесенка долей: ширина полос без инлайновых стилей (CSP). */
.v-0{ --v:0%; }
.v-1{ --v:1%; }
.v-2{ --v:2%; }
.v-3{ --v:3%; }
.v-4{ --v:4%; }
.v-5{ --v:5%; }
.v-6{ --v:6%; }
.v-7{ --v:7%; }
.v-8{ --v:8%; }
.v-9{ --v:9%; }
.v-10{ --v:10%; }
.v-11{ --v:11%; }
.v-12{ --v:12%; }
.v-13{ --v:13%; }
.v-14{ --v:14%; }
.v-15{ --v:15%; }
.v-16{ --v:16%; }
.v-17{ --v:17%; }
.v-18{ --v:18%; }
.v-19{ --v:19%; }
.v-20{ --v:20%; }
.v-21{ --v:21%; }
.v-22{ --v:22%; }
.v-23{ --v:23%; }
.v-24{ --v:24%; }
.v-25{ --v:25%; }
.v-26{ --v:26%; }
.v-27{ --v:27%; }
.v-28{ --v:28%; }
.v-29{ --v:29%; }
.v-30{ --v:30%; }
.v-31{ --v:31%; }
.v-32{ --v:32%; }
.v-33{ --v:33%; }
.v-34{ --v:34%; }
.v-35{ --v:35%; }
.v-36{ --v:36%; }
.v-37{ --v:37%; }
.v-38{ --v:38%; }
.v-39{ --v:39%; }
.v-40{ --v:40%; }
.v-41{ --v:41%; }
.v-42{ --v:42%; }
.v-43{ --v:43%; }
.v-44{ --v:44%; }
.v-45{ --v:45%; }
.v-46{ --v:46%; }
.v-47{ --v:47%; }
.v-48{ --v:48%; }
.v-49{ --v:49%; }
.v-50{ --v:50%; }
.v-51{ --v:51%; }
.v-52{ --v:52%; }
.v-53{ --v:53%; }
.v-54{ --v:54%; }
.v-55{ --v:55%; }
.v-56{ --v:56%; }
.v-57{ --v:57%; }
.v-58{ --v:58%; }
.v-59{ --v:59%; }
.v-60{ --v:60%; }
.v-61{ --v:61%; }
.v-62{ --v:62%; }
.v-63{ --v:63%; }
.v-64{ --v:64%; }
.v-65{ --v:65%; }
.v-66{ --v:66%; }
.v-67{ --v:67%; }
.v-68{ --v:68%; }
.v-69{ --v:69%; }
.v-70{ --v:70%; }
.v-71{ --v:71%; }
.v-72{ --v:72%; }
.v-73{ --v:73%; }
.v-74{ --v:74%; }
.v-75{ --v:75%; }
.v-76{ --v:76%; }
.v-77{ --v:77%; }
.v-78{ --v:78%; }
.v-79{ --v:79%; }
.v-80{ --v:80%; }
.v-81{ --v:81%; }
.v-82{ --v:82%; }
.v-83{ --v:83%; }
.v-84{ --v:84%; }
.v-85{ --v:85%; }
.v-86{ --v:86%; }
.v-87{ --v:87%; }
.v-88{ --v:88%; }
.v-89{ --v:89%; }
.v-90{ --v:90%; }
.v-91{ --v:91%; }
.v-92{ --v:92%; }
.v-93{ --v:93%; }
.v-94{ --v:94%; }
.v-95{ --v:95%; }
.v-96{ --v:96%; }
.v-97{ --v:97%; }
.v-98{ --v:98%; }
.v-99{ --v:99%; }
.v-100{ --v:100%; }

/* ============================================================
   Тёмные секции. Чистые --deep/--ink на --void не держат 4,5:1,
   поэтому на тёмном берём токены С1: --deep-on-dark и компанию.
   Одна точка правды для скриптовой графики — переменные --chart-*:
   их же читает charts.js, поэтому Chart.js и модули на CSS
   перекрашиваются вместе, а не по отдельности.
   ============================================================ */
:root{
  --chart-ink:   #11151F;
  --chart-l2:    #3F4A60;
  --chart-l3:    #5A6478;
  --chart-l4:    #8E99AC;
  --chart-l5:    #C3CBD9;
  --chart-grid:  #E3E8F0;
  --chart-acc:   #2B6CFF;
  --chart-paper: #F4F6FA;
}
/* Тёмная лестница пересобрана после аудита С1 по сложению слоёв.
   Три уровня подряд — фон, дорожка, заливка — не умещаются в 3:1
   каждый, если держать заливку в средних тонах. Поэтому дорожка
   поднята до 3,0 к фону, а заливка уведена вверх, к светлому концу:
   #505F84 на --void-soft даёт 3,02; --chart-l3 #C2CBDC на дорожке —
   3,89. Синий --deep-on-dark на такой дорожке давал 2,35, поэтому
   акцент графики на тёмном светлее текстового: #9DBBFF — 3,32 на
   дорожке и 10,0 на фоне. Текстовый акцент остаётся --deep-on-dark. */
.section--dark, .section--ink, .mod--dark{
  --chart-ink:   #E8ECF4;
  --chart-l2:    #DCE2EC;
  --chart-l3:    #C2CBDC;
  --chart-l4:    #8B97AD;
  --chart-l5:    #505F84;
  --chart-grid:  #1C2434;
  --chart-acc:   #9DBBFF;
  --chart-paper: #0A0F1A;
}

.section--dark .num, .section--ink .num, .mod--dark .num{ color:var(--ink-invert); }
.section--dark .num--muted, .section--ink .num--muted, .mod--dark .num--muted,
.section--dark .swap__from .num, .section--ink .swap__from .num, .mod--dark .swap__from .num{ color:var(--muted-invert); }
.section--dark .num--accent, .section--ink .num--accent, .mod--dark .num--accent{ color:var(--deep-on-dark); }

.section--dark .bars__track, .section--ink .bars__track, .mod--dark .bars__track,
.section--dark .gauge__track, .section--ink .gauge__track, .mod--dark .gauge__track,
.section--dark .steps-t__bar, .section--ink .steps-t__bar, .mod--dark .steps-t__bar{ background:var(--chart-l5); }
.section--dark .bars__fill, .section--ink .bars__fill, .mod--dark .bars__fill,
.section--dark .steps-t__fill, .section--ink .steps-t__fill, .mod--dark .steps-t__fill{ background:var(--chart-l3); }
.section--dark .bars__fill--ink, .section--ink .bars__fill--ink, .mod--dark .bars__fill--ink{ background:var(--chart-ink); }
.section--dark .bars__fill--accent, .section--ink .bars__fill--accent, .mod--dark .bars__fill--accent,
.section--dark .gauge__fill, .section--ink .gauge__fill, .mod--dark .gauge__fill{ background:var(--chart-acc); }
.section--dark .gauge__mark, .section--ink .gauge__mark, .mod--dark .gauge__mark{ background:var(--ink-invert); }
.section--dark .bars--stack .bars__fill + .bars__fill,
.section--ink .bars--stack .bars__fill + .bars__fill,
.mod--dark .bars--stack .bars__fill + .bars__fill{ box-shadow:-2px 0 0 var(--void); }

.section--dark .waffle__grid i, .section--ink .waffle__grid i, .mod--dark .waffle__grid i{ background:var(--chart-l5); }
.section--dark .waffle__grid i.is-on, .section--ink .waffle__grid i.is-on, .mod--dark .waffle__grid i.is-on{ background:var(--chart-acc); }
.section--dark .waffle__grid i.is-on2, .section--ink .waffle__grid i.is-on2, .mod--dark .waffle__grid i.is-on2{ background:var(--ink-invert); }
.section--dark .waffle__fallback, .section--ink .waffle__fallback, .mod--dark .waffle__fallback{ color:var(--muted-invert); }

.section--dark .spark__line, .section--ink .spark__line, .mod--dark .spark__line{ stroke:var(--ink-invert); }
.section--dark .spark__dot, .section--ink .spark__dot, .mod--dark .spark__dot{ fill:var(--chart-acc); }

.section--dark .toggle__bar, .section--ink .toggle__bar, .mod--dark .toggle__bar{ background:transparent; border-color:var(--muted-invert); }
.section--dark .toggle__btn, .section--ink .toggle__btn, .mod--dark .toggle__btn{ color:var(--muted-invert); }
.section--dark .toggle__btn:hover, .section--ink .toggle__btn:hover, .mod--dark .toggle__btn:hover{ color:var(--ink-invert); }
.section--dark .toggle__btn.is-on, .section--ink .toggle__btn.is-on, .mod--dark .toggle__btn.is-on{ background:var(--ink-invert); color:var(--void); }

.section--dark .steps-t__i, .section--ink .steps-t__i, .mod--dark .steps-t__i{ border-bottom-color:var(--line-dark); }
.section--dark .steps-t__n, .section--ink .steps-t__n, .mod--dark .steps-t__n{ background:var(--chart-l5); color:var(--ink-invert); }
.section--dark .steps-t__name, .section--ink .steps-t__name, .mod--dark .steps-t__name{ color:var(--ink-invert); }
.section--dark .steps-t__i--gate, .section--ink .steps-t__i--gate, .mod--dark .steps-t__i--gate{ background:rgba(var(--deep-rgb),.14); border-color:var(--deep-on-dark); }

.section--dark .versus__col, .section--ink .versus__col, .mod--dark .versus__col{ background:var(--void-soft); border-color:var(--line-dark); }
.section--dark .versus__col--to, .section--ink .versus__col--to, .mod--dark .versus__col--to{ background:rgba(var(--deep-rgb),.14); border-color:var(--deep-on-dark); }
.section--dark .versus__list li, .section--ink .versus__list li, .mod--dark .versus__list li{ color:var(--ink-invert); }
.section--dark .versus__cap, .section--ink .versus__cap, .mod--dark .versus__cap{ color:var(--muted-invert); }
.section--dark .versus__col--to .versus__cap, .section--ink .versus__col--to .versus__cap, .mod--dark .versus__col--to .versus__cap{ color:var(--deep-on-dark); }
.section--dark .versus__col--to .versus__list li::before, .section--ink .versus__col--to .versus__list li::before, .mod--dark .versus__col--to .versus__list li::before{ background:var(--deep-on-dark); }

/* .mod__sub — синоним .mod__note С1: контракт KIT переехал на его имя,
   а синоним оставлен, чтобы уже написанная разметка не осыпалась. */
.mod__sub{ color:var(--muted); font-size:var(--fs-sm); max-width:var(--measure-card); }
.section--dark .mod__sub, .section--ink .mod__sub, .mod--dark .mod__sub{ color:var(--muted-invert); }

/* График внутри модуля С1 не должен давать рамку в рамке. */
.mod .chart-card, .mod__body .chart-card{ padding:0; border:0; background:transparent; }

/* Подписи модулей на тёмном: собственный цвет текста, иначе --ink
   сливается с фоном (первый прогон витрины показал ровно это). */
.section--dark .bars__k, .section--ink .bars__k, .mod--dark .bars__k,
.section--dark .bars__v, .section--ink .bars__v, .mod--dark .bars__v,
.section--dark .steps-t__t, .section--ink .steps-t__t, .mod--dark .steps-t__t{ color:var(--ink-invert); }
.section--dark .gauge__k, .section--ink .gauge__k, .mod--dark .gauge__k,
.section--dark .swap__note, .section--ink .swap__note, .mod--dark .swap__note,
.section--dark .chart-values__k, .section--ink .chart-values__k, .mod--dark .chart-values__k,
.section--dark .chart-card__sub, .section--ink .chart-card__sub, .mod--dark .chart-card__sub,
.section--dark .chart-card__src, .section--ink .chart-card__src, .mod--dark .chart-card__src,
.section--dark .kpi__note, .section--ink .kpi__note, .mod--dark .kpi__note{ color:var(--muted-invert); }
.section--dark .chart-values__v, .section--ink .chart-values__v, .mod--dark .chart-values__v,
.section--dark .kpi__num, .section--ink .kpi__num, .mod--dark .kpi__num,
.section--dark .kpi__label, .section--ink .kpi__label, .mod--dark .kpi__label{ color:var(--ink-invert); }
.section--dark .chart-values__v--accent, .section--ink .chart-values__v--accent, .mod--dark .chart-values__v--accent,
.section--dark .kpi__num em, .section--ink .kpi__num em, .mod--dark .kpi__num em{ color:var(--deep-on-dark); }
.section--dark .chart-values li, .section--ink .chart-values li, .mod--dark .chart-values li,
.section--dark .chart-card__src, .section--ink .chart-card__src, .mod--dark .chart-card__src{ border-color:var(--line-dark); }
.section--dark .chart-key, .section--ink .chart-key, .mod--dark .chart-key{ background:var(--ink-invert); }
.section--dark .chart-key--muted, .section--ink .chart-key--muted, .mod--dark .chart-key--muted{ background:var(--muted-invert); }
.section--dark .chart-key--accent, .section--ink .chart-key--accent, .mod--dark .chart-key--accent{ background:var(--deep-on-dark); }