/* ─────────────────────────────────────────────────────────────────────────
   Калькулятор «Экономика лида» — страница /zakazchikam/kalkulyator/
   Фирменные токены темы (--blue*, --f-*, --r-*) из styles.css.
   Внутренние страницы сайта тёмные (body.page:not(.home) → --blue-night),
   поэтому блок строится светлым текстом по тёмному фону.
   ───────────────────────────────────────────────────────────────────────── */

.calc-page {
  --c-card:   rgba(255, 255, 255, .055);
  --c-card-2: rgba(255, 255, 255, .09);
  --c-line:   rgba(145, 173, 255, .20);
  --c-line-2: rgba(145, 173, 255, .34);
  --c-text:   rgba(255, 255, 255, .94);
  --c-mute:   rgba(209, 209, 215, .72);
  --c-mute-2: rgba(209, 209, 215, .52);
  --c-good:   #3ddc97;
  --c-warn:   #ffc75a;
  --c-bad:    #ff7a70;
  --c-good-bg: rgba(61, 220, 151, .12);
  --c-warn-bg: rgba(255, 199, 90, .12);
  --c-bad-bg:  rgba(255, 122, 112, .12);
  color: var(--c-text);
}

/* ── Первый экран ── */
.calchero { padding: 150px 0 46px; }
.calchero__eyebrow {
  font-family: var(--f-accent);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-pale); margin: 0 0 14px;
}
.calchero__title {
  font-family: var(--f-display);
  font-size: clamp(30px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.02em;
  margin: 0; color: #fff; max-width: 17ch;
  /* «Калькулятор» в display-шрифте шире, чем 17ch на узком экране, и утаскивал
     всю страницу в горизонтальный скролл. Страховка на случай длинного слова. */
  overflow-wrap: break-word;
}
/* На 320–420px нижняя граница clamp (30px) всё ещё не даёт слову поместиться:
   там ограничение по ширине в ch снимаем и опускаем кегль. */
@media(max-width:420px){
  .calchero__title { font-size: 24px; max-width: none; }
}
.calchero__sub {
  margin: 18px 0 0; max-width: 62ch; font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55; color: var(--c-mute);
}
.calchero__note {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(145, 173, 255, .12); border: 1px solid var(--c-line);
  font-size: 13px; color: var(--blue-pale);
}

/* ── Раскладка калькулятора ── */
.calc { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1040px) { .calc { grid-template-columns: minmax(0, 1fr); } }

.calc__col > .ccard + .ccard { margin-top: 16px; }

.ccard {
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--r-card); padding: 20px 22px;
}
.ccard__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ccard__hd h2 {
  font-family: var(--f-head); font-size: 19px; line-height: 1.2; margin: 0;
  color: #fff; font-weight: 700; letter-spacing: -.01em;
}
.ccard__step {
  font-family: var(--f-accent); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-mute-2);
}
.ccard__note { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--c-mute-2); }

/* ── Поля ── */
.cfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr)); gap: 13px; }
.cf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf > span { font-size: 13px; color: var(--c-mute); }
.calc-page input,
.calc-page select {
  font-family: var(--f-body); font-size: 15px; color: #fff;
  background: rgba(4, 7, 78, .55); border: 1px solid var(--c-line-2);
  border-radius: var(--r-btn); padding: 11px 12px; width: 100%; min-width: 0;
  /* 44px — минимальная зона нажатия, как в ux-fixes.css по всему сайту. */
  min-height: 44px;
  -webkit-appearance: none; appearance: none;
}
.calc-page input[type="number"] { font-variant-numeric: tabular-nums; }
.calc-page select {
  background-image: linear-gradient(45deg, transparent 50%, var(--blue-pale) 50%),
                    linear-gradient(135deg, var(--blue-pale) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 34px;
}
.calc-page select option { background: var(--blue-night); color: #fff; }
.calc-page input:focus,
.calc-page select:focus { outline: none; border-color: var(--blue-neon); box-shadow: 0 0 0 3px rgba(82, 182, 249, .22); }

/* ── Строки каналов ── */
.crow { display: grid; grid-template-columns: 1.4fr .95fr .95fr .74fr .74fr 36px; gap: 9px; align-items: end; }
.crow + .crow { margin-top: 10px; }
.crow-head { margin-bottom: 9px; }
.crow-head > div {
  font-family: var(--f-accent); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-mute-2);
}
@media (min-width: 861px) { .crow .cf > span { display: none; } }
@media (max-width: 860px) {
  .crow {
    grid-template-columns: 1fr 1fr; gap: 11px;
    padding: 14px; border: 1px solid var(--c-line); border-radius: var(--r-btn);
    background: rgba(4, 7, 78, .35);
  }
  .crow > *:first-child { grid-column: 1 / -1; }
  .crow-head { display: none; }
  .crow .cdel { justify-self: end; align-self: center; }
}
.cdel {
  background: none; border: 1px solid var(--c-line-2); color: var(--c-mute);
  border-radius: var(--r-btn); width: 36px; min-height: 44px; font-size: 19px; line-height: 1;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.cdel:hover { color: var(--c-bad); border-color: var(--c-bad); }
.cadd {
  margin-top: 14px; background: rgba(145, 173, 255, .14); color: var(--blue-pale);
  border: 1px solid var(--c-line); border-radius: var(--r-btn);
  padding: 11px 18px; min-height: 44px; font-family: var(--f-body); font-size: 15px; font-weight: 600;
  transition: background .2s var(--ease);
}
.cadd:hover { background: rgba(145, 173, 255, .24); }
.cadd[disabled] { opacity: .4; cursor: default; }

/* ── Вердикт ── */
.cverdict { border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 20px 22px; }
.cverdict h2 { font-family: var(--f-head); font-size: 20px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.cverdict p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--c-mute); }
.cverdict--good { background: var(--c-good-bg); border-color: rgba(61, 220, 151, .42); }
.cverdict--good h2 { color: var(--c-good); }
.cverdict--warn { background: var(--c-warn-bg); border-color: rgba(255, 199, 90, .42); }
.cverdict--warn h2 { color: var(--c-warn); }
.cverdict--bad  { background: var(--c-bad-bg);  border-color: rgba(255, 122, 112, .42); }
.cverdict--bad h2 { color: var(--c-bad); }

/* ── Показатели ── */
.ckpis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--c-line); border: 1px solid var(--c-line);
  border-radius: var(--r-card); overflow: hidden; margin-top: 16px;
}
.ckpi { background: var(--blue-night); padding: 15px 16px; }
.ckpi__k { font-size: 12.5px; color: var(--c-mute-2); }
.ckpi__v {
  overflow-wrap: break-word; min-width: 0;
  font-family: var(--f-display); font-size: 25px; line-height: 1.1; margin-top: 5px;
  letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums;
}
.ckpi__s { font-size: 12px; color: var(--c-mute-2); margin-top: 5px; line-height: 1.4; }
.ckpi__v.is-good { color: var(--c-good); }
.ckpi__v.is-warn { color: var(--c-warn); }
.ckpi__v.is-bad  { color: var(--c-bad); }

/* ── Таблица по каналам ── */
.ctable-wrap { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.ctable { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.ctable th, .ctable td {
  padding: 10px 12px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--c-line); font-variant-numeric: tabular-nums;
}
.ctable th:first-child, .ctable td:first-child {
  text-align: left; white-space: normal; min-width: 138px; font-variant-numeric: normal;
}
.ctable thead th {
  font-family: var(--f-accent); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--c-mute-2); font-weight: 400;
  border-bottom-color: var(--c-line-2);
}
.ctable tfoot td { font-weight: 700; color: #fff; border-top: 2px solid var(--c-line-2); border-bottom: 0; padding-top: 12px; }
.ctable td.pos { color: var(--c-good); }
.ctable td.neg { color: var(--c-bad); }
.ctable .empty { text-align: center; color: var(--c-mute-2); padding: 22px; }
.cpill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.cpill--good { background: var(--c-good-bg); color: var(--c-good); }
.cpill--warn { background: var(--c-warn-bg); color: var(--c-warn); }
.cpill--bad  { background: var(--c-bad-bg);  color: var(--c-bad); }

/* ── Рычаги ── */
.clever { display: flex; gap: 13px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--c-line); }
.clever:last-child { border-bottom: 0; }
.clever__n { flex: 0 0 20px; font-family: var(--f-accent); font-size: 12px; color: var(--blue-pale); }
.clever__t { flex: 1 1 auto; font-size: 14px; line-height: 1.55; color: var(--c-mute); }
.clever__t b { color: #fff; font-weight: 600; }
.clever__lead { font-size: 14px; line-height: 1.55; color: var(--c-mute); margin: 0 0 6px; }
.clever__lead b { color: #fff; font-weight: 600; }

/* ── Методика и вопросы ── */
.calcmeta { padding: 64px 0 0; }
.calcmeta__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 26px; }
.calcmeta h2, .cfaq h2 {
  font-family: var(--f-display); font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.15; margin: 0 0 26px; color: #fff; letter-spacing: -.02em;
}
.calcmeta h3 { font-family: var(--f-head); font-size: 17px; margin: 0 0 10px; color: #fff; font-weight: 700; }
.calcmeta p, .calcmeta li { font-size: 14.5px; line-height: 1.65; color: var(--c-mute); }
.calcmeta ul { margin: 0; padding-left: 20px; }
.calcmeta li { margin-bottom: 7px; }
.calcmeta li b, .calcmeta p b { color: #fff; font-weight: 600; }
.cformula {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px;
  background: rgba(4, 7, 78, .5); border: 1px solid var(--c-line);
  border-radius: var(--r-btn); padding: 14px 16px; color: var(--c-mute);
  overflow-x: auto; white-space: pre; line-height: 1.85; margin: 0 0 14px;
}

.cfaq { padding: 60px 0 0; }
.cfaq__item { border-bottom: 1px solid var(--c-line); padding: 20px 0; }
.cfaq__item:first-of-type { border-top: 1px solid var(--c-line); }
.cfaq__q { font-family: var(--f-head); font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 9px; }
.cfaq__a { font-size: 14.5px; line-height: 1.65; color: var(--c-mute); margin: 0; }

/* ── Форма ── */
.cform { padding: 64px 0 100px; }
.cform__box {
  background: linear-gradient(135deg, rgba(0, 80, 200, .30) 0%, rgba(7, 11, 116, .55) 100%);
  border: 1px solid var(--c-line-2); border-radius: var(--r-block); padding: 38px 34px;
}
.cform__title { font-family: var(--f-display); font-size: clamp(23px, 2.6vw, 32px); line-height: 1.15; margin: 0; color: #fff; letter-spacing: -.02em; }
.cform__sub { margin: 14px 0 26px; font-size: 15.5px; line-height: 1.55; color: var(--c-mute); max-width: 58ch; }
.cform__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px; align-items: end; }
.cform__submit {
  background: var(--blue); color: #fff; border: 0; border-radius: var(--r-btn);
  padding: 12px 26px; font-family: var(--f-body); font-size: 15.5px; font-weight: 600;
  min-height: 44px; transition: background .2s var(--ease);
}
.cform__submit:hover { background: var(--blue-ink); }
.cform__legal { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--c-mute-2); }
.cform__legal a { color: var(--blue-pale); text-decoration: underline; }
.cform__ok { display: none; font-size: 16px; line-height: 1.6; color: var(--c-good); }
.cform.is-sent .cform__grid,
.cform.is-sent .cform__legal { display: none; }
.cform.is-sent .cform__ok { display: block; }

@media (max-width: 700px) {
  .calchero { padding: 120px 0 34px; }
  .ccard { padding: 17px 16px; }
  .ckpi { padding: 13px 14px; }
  .cform__box { padding: 26px 20px; }
  .calcmeta { padding-top: 48px; }
}

/* ═══ Нормы рынка под полями ═══ */
.cnorm{display:block;margin-top:5px;font-size:11px;line-height:1.35;font-style:normal;
  letter-spacing:.01em;cursor:help}
.cnorm.is-in{color:#2e7d52}
.cnorm.is-below{color:#a8640a}
.cnorm.is-above{color:#2e7d52}
@media (prefers-color-scheme:dark){
  .cnorm.is-in,.cnorm.is-above{color:#7ecfa0}
  .cnorm.is-below{color:#e0ac5c}
}

/* ═══ Пояснение в вердикте ═══ */
.cverdict__x{margin:10px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.18);
  font-size:14px;line-height:1.55;opacity:.94}
.cverdict--good .cverdict__x,.cverdict--warn .cverdict__x,.cverdict--bad .cverdict__x{
  border-top-color:rgba(0,0,0,.12)}

/* ═══ Забрать расчёт ═══ */
.cshare__lead,.csrc__lead{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--muted,#525256)}
.cshare__btns{display:flex;gap:10px;flex-wrap:wrap}
.cbtn{font:600 13px/1 inherit;padding:14px 20px;min-height:48px;border-radius:8px;cursor:pointer;
  border:1px solid #d1d1d7;background:#fff;color:#0b1230;transition:border-color .15s,color .15s}
.cbtn:hover{border-color:#0050c8;color:#0050c8}
.cbtn:focus-visible{outline:2px solid #0050c8;outline-offset:2px}
.cbtn--primary{background:#0050c8;border-color:#0050c8;color:#fff}
.cbtn--primary:hover{background:#0f2e8a;border-color:#0f2e8a;color:#fff}
.cshare__msg{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:#2e7d52;display:none}
.cshare__msg.is-on{display:block}

/* ═══ Источники норм ═══ */
.csrc__list{margin:0;padding-left:20px;display:grid;gap:9px}
.csrc__list li{font-size:14px;line-height:1.55}
.csrc__list b{font-weight:700}
.csrc__note{margin:16px 0 0;padding-top:14px;border-top:1px solid #e7e7ea;
  font-size:13.5px;line-height:1.6;color:var(--muted,#525256)}

/* ═══ Печать: калькулятор как документ ═══ */
@media print{
  .noprint,.cshare,.calcmeta__faq,header,footer,nav,.cdel,[data-add]{display:none!important}
  body{background:#fff!important;color:#000!important}
  .ccard{break-inside:avoid;box-shadow:none!important;border:1px solid #bbb!important;
    background:#fff!important;margin-bottom:12px}
  .cverdict{border:2px solid #000!important;background:#fff!important;color:#000!important}
  .cverdict h2,.cverdict p{color:#000!important}
  .ckpi__v,.ckpi__k,.ckpi__s{color:#000!important}
  .cpill{border:1px solid #666!important;background:#fff!important;color:#000!important}
  table{break-inside:auto}
  tr{break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555}
  @page{margin:14mm}

  /* Таблица каналов на печати. На экране она лежит в скроллере с min-width 980px,
     а принтер не прокручивает — он обрезает, и со страницы пропадали как раз
     колонки выручки, прибыли и ROMI. Поэтому на печати снимаем и скроллер,
     и минимальную ширину, и вылет за поля, а текст пускаем в перенос. */
  .cchan__scroll{overflow:visible!important}
  .ccard--wide{margin-left:0!important;margin-right:0!important;width:auto!important}
  .ctable,.ctable--merged{min-width:0!important;width:100%!important;
    table-layout:auto!important;font-size:7pt!important}
  .ctable th,.ctable td{white-space:normal!important;overflow:visible!important;
    text-overflow:clip!important;padding:3px 3px!important;word-break:break-word}
  .ctable thead th{font-size:6.5pt!important;hyphens:auto}
  /* поля ввода на бумаге — просто числа, рамки только мешают */
  .ctable input,.ctable select{border:none!important;background:none!important;
    color:#000!important;padding:0!important;font-size:7pt!important;width:100%!important;
    min-width:0!important;-webkit-appearance:none;appearance:none}
  /* Колонка «убрать» на бумаге бессмысленна: скрытая кнопка всё равно
     оставляла ячейку, и таблица вылезала за поле листа на несколько пикселей.
     Прячем и ячейки, и её колонку в colgroup, иначе ширины разъедутся. */
  .ctable thead tr:first-child th:last-child,.ctable td.c-del,
  .ctable colgroup col:last-child{display:none!important}
  .ctable,.ctable thead{break-inside:auto}
  .ctable thead{display:table-header-group}
}

/* Подсказка под выбором ниши: откуда взялись подставленные цифры. */
.cf--wide{grid-column:1 / -1}
.cnichenote{display:block;margin-top:6px;font-style:normal;font-size:12px;line-height:1.45;
  color:var(--c-mute-2)}
.cnichenote.is-avg{color:var(--c-warn,#e0a81a)}

/* ═══ Таблица по каналам — во всю ширину экрана ═══
   Контейнер страницы уже, чем нужно семи колонкам, поэтому карточка
   выходит за его поля приёмом full-bleed: сдвигаем края к границам вьюпорта.
   Так таблица помещается целиком и горизонтальной прокрутки не остаётся. */
.ccard--wide{
  grid-column:1 / -1;
  margin-top:16px;
  margin-left:calc(50% - 50vw + 14px);
  margin-right:calc(50% - 50vw + 14px);
  width:auto;
  max-width:none;
  overflow:visible;
}
.ccard--wide .ctable{width:100%;table-layout:fixed;font-size:14px}
.ccard--wide .ctable th,.ccard--wide .ctable td{padding:12px 10px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* заголовкам разрешаем перенос — так колонки уже, а числа остаются в строку */
.ccard--wide .ctable thead th{white-space:normal;line-height:1.25}
.ccard--wide .ctable th:first-child,.ccard--wide .ctable td:first-child{
  min-width:0;width:20%;white-space:normal}
.ccard--wide .ctable th:last-child,.ccard--wide .ctable td:last-child{width:11%}

/* На узких экранах full-bleed не нужен: там прокрутка честнее сжатия. */
@media(max-width:900px){
  .ccard--wide{margin-left:0;margin-right:0;overflow-x:auto}
  .ccard--wide .ctable{table-layout:auto;min-width:620px;font-size:13px}
  .ccard--wide .ctable th,.ccard--wide .ctable td{padding:10px 9px}
}

/* ═══ Строки каналов: подписи норм не должны ломать выравнивание ═══
   Было align-items:end — ячейка с подписью выше, поэтому её поле уезжало вверх,
   а соседние прижимались к низу. Выравниваем по верху: поля в одну линию,
   подписи свисают под ними. */
.crow{align-items:start}
.crow-head{align-items:end}
.crow .cf{align-self:start}
.crow .cnorm{font-size:10.5px;line-height:1.3;margin-top:4px}
/* Чтобы строки не прыгали по высоте, резервируем место под подпись у всех полей. */
.crow .cf{min-height:44px}
@media(min-width:861px){
  .crow{grid-template-columns:1.35fr .9fr .9fr .82fr .82fr 36px}
  .crow .cf:nth-child(4) .cnorm,.crow .cf:nth-child(5) .cnorm{max-width:100%}
}
@media(max-width:860px){
  .crow .cnorm{font-size:11px}
}

/* ═══ Компоновка калькулятора: сверху вниз по логике работы ═══
   Ввод → результат по каналам → вердикт → что менять → справка и действия.
   Раньше вывод жил в правой колонке и таблица была оторвана от ввода. */
.calc{display:block}
.calc__row{display:grid;gap:16px;margin-bottom:16px}
.calc__row--input{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start}
.calc__row--out{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch}
.calc__row--out .cverdict{margin:0}
.calc__row--out .ckpis{margin:0}
.calc__row--full{grid-template-columns:minmax(0,1fr)}
.calc__row--foot{grid-template-columns:repeat(auto-fit,minmax(min(280px, 100%), 1fr));align-items:start}
.calc__row > .ccard{margin-top:0}
.calc__col > .ccard + .ccard{margin-top:16px}

/* Таблица идёт отдельной строкой во всю ширину экрана */
.ccard--wide{margin-top:0;margin-bottom:16px}

@media(max-width:1040px){
  .calc__row--input,.calc__row--out{grid-template-columns:minmax(0,1fr)}
}

/* ═══ Объединённая таблица каналов ═══
   Слева поля ввода, справа расчёт по той же строке. Ширина — по контенту сайта,
   full-bleed убран: таблица живёт в общей сетке страницы. */
.ccard--wide{margin-left:0;margin-right:0}
.cchan{padding:20px 18px}
.cchan__scroll{overflow-x:auto;margin:0 -4px;padding:0 4px}
.ctable--merged{width:100%;min-width:1040px;border-collapse:collapse;font-size:13px;table-layout:fixed}
.ctable--merged th,.ctable--merged td{padding:8px 7px;text-align:right;vertical-align:middle;
  border-bottom:1px solid var(--c-line);font-variant-numeric:tabular-nums}
.ctable--merged thead th{font-family:var(--f-accent);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--c-mute-2);font-weight:400;line-height:1.25;white-space:normal}

/* Две зоны: что вводите и что получается */
.ctable__zones th{padding-bottom:5px;border-bottom:0}
.ctable__zones .z-in,.ctable__zones .z-out{font-size:10.5px;letter-spacing:.09em;text-align:center;
  border-radius:4px 4px 0 0}
.ctable__zones .z-in{color:var(--blue-pale,#91adff);background:rgba(145,173,255,.10)}
.ctable__zones .z-out{color:#3ddc97;background:rgba(61,220,151,.09)}
.ctable--merged td.z-in{background:rgba(145,173,255,.045)}
.ctable--merged td.z-out{background:rgba(61,220,151,.035)}
.ctable--merged th.z-out:first-of-type,.ctable--merged td.z-out:first-of-type{
  border-left:2px solid rgba(145,173,255,.28)}

/* Колонки */
.ctable--merged th:first-child,.ctable--merged td:first-child{text-align:left;width:13%}
.ctable--merged .z-in{width:8.4%}
.ctable--merged .z-out{width:8.4%}
.ctable--merged th:last-child,.ctable--merged td.c-del{width:34px;padding:4px}

/* Поля прямо в ячейках — компактные */
.ctable--merged input,.ctable--merged select{
  font-size:13px;padding:7px 8px;min-height:36px;border-radius:6px;text-align:right;width:100%}
.ctable--merged select{text-align:left;padding-right:26px;background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%}
.ctable--merged .cnorm{margin-top:3px;font-size:9.5px;line-height:1.25;text-align:right;white-space:normal}
.ctable--merged .cdel{width:28px;height:28px;padding:0;min-height:0}
.ctable--merged tfoot td{font-weight:700;color:#fff;border-top:2px solid var(--c-line-2);border-bottom:0;
  padding-top:11px;background:transparent}
.ctable--merged td.pos{color:var(--c-good)}
.ctable--merged td.neg{color:var(--c-bad)}
.ctable--merged .cpill{font-size:11px;padding:2px 8px}
.cchan .cadd{margin-top:14px}

@media(max-width:1040px){
  .ctable--merged{font-size:12.5px;min-width:980px}
  .ctable--merged th,.ctable--merged td{padding:7px 5px}
}

/* ═══ Ширины колонок объединённой таблицы ═══
   Через colgroup, иначе fixed-раскладка читает их из строки с colspan
   и все одиннадцать колонок схлопываются в четыре. */
.ctable--merged col.c-name{width:12.5%}
.ctable--merged col.c-in{width:9.2%}
.ctable--merged col.c-out{width:8.4%}
.ctable--merged col.c-x{width:3.2%}
/* проценты на ячейках больше не нужны — их перебивает colgroup */
.ctable--merged th:first-child,.ctable--merged td:first-child{width:auto}
.ctable--merged .z-in,.ctable--merged .z-out{width:auto}
.ctable--merged th:last-child,.ctable--merged td.c-del{width:auto}
/* заголовки не должны налезать друг на друга */
.ctable--merged thead th{overflow-wrap:anywhere;hyphens:auto;vertical-align:bottom}
.ctable--merged td{overflow:hidden}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ═══ Подписи норм: страница калькулятора всегда тёмная ═══
   Раньше цвета зависели от системной темы, и в светлой на тёмный фон
   попадали тёмные оттенки — контраст падал до 3,07 при норме 4,5. */
.calc-page .cnorm.is-in,.calc-page .cnorm.is-above{color:#7ed9a6}
.calc-page .cnorm.is-below{color:#e8b968}
.calc-page .cnichenote.is-avg{color:#e8b968}

/* Кнопка удаления канала — до нормы тач-цели */
.ctable--merged .cdel{width:32px;height:32px}

/* «Откуда взяты нормы» внутри методики: список источников шире соседей */
.calcmeta__src{grid-column:1 / -1}
.calcmeta__src .csrc__list{margin:12px 0 0;padding-left:20px;
  display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(min(320px, 100%), 1fr))}
.calcmeta__src .csrc__list li{font-size:14.5px;line-height:1.55}
.calcmeta__src .csrc__note{margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(145,173,255,.22);font-size:14px;line-height:1.6}
@media(max-width:720px){
  .calcmeta__src .csrc__list{grid-template-columns:1fr}
}

/* ═══ Цель по обороту ═══
   Проверяет не «сколько дадут деньги», а обратное: хватит ли бюджета
   на заявленный рост и не выпадает ли он из рыночной нормы 5–20% оборота. */
.cgoal{margin-bottom:16px;padding:18px 20px;border-radius:var(--r-card);
  border:1px solid var(--c-line);background:var(--c-card)}
.cgoal--good{border-color:rgba(61,220,151,.45);background:rgba(61,220,151,.07)}
.cgoal--warn{border-color:rgba(224,168,26,.45);background:rgba(224,168,26,.07)}
.cgoal--bad{border-color:rgba(233,110,100,.5);background:rgba(233,110,100,.08)}
.cgoal__nums{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(190px, 100%), 1fr));
  margin-bottom:14px}
.cgoal__n{display:flex;flex-direction:column;gap:3px}
.cgoal__n b{font-family:var(--f-display);font-size:clamp(19px,2vw,25px);line-height:1.1;
  letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.cgoal__n span{font-size:12.5px;line-height:1.4;color:var(--c-mute)}
.cgoal__v{margin:0;padding-top:13px;border-top:1px solid var(--c-line);
  font-size:14.5px;line-height:1.6;color:var(--c-text)}
.cgoal--good .cgoal__v{color:#a8ecc9}
.cgoal--warn .cgoal__v{color:#f0d59a}
.cgoal--bad .cgoal__v{color:#f4b7b1}
.cgoal__hint{margin:0;font-size:14px;line-height:1.55;color:var(--c-mute)}
@media print{.cgoal{border:1px solid #bbb!important;background:#fff!important}
  .cgoal__n b,.cgoal__v{color:#000!important}}

/* ═══════════════════════════════════════════════════════════════════════════
   Инфографика расчёта.

   Цвет здесь несёт смысл, а не украшает: статусная тройка (хорошо/внимание/
   плохо) при дальтонизме различается на грани (ΔE 6,7 для протанопии), поэтому
   КАЖДЫЙ статус обязан дублироваться подписью и значком, а «подозрительная»
   зона — ещё и штриховкой. Цветом одним не кодируем ничего.

   Величину показываем одним тоном (фирменный --blue-neon) с прямыми подписями:
   сравнение каналов — задача про «сколько», а не про «кто», девять разных
   цветов тут только мешали бы.
   ═══════════════════════════════════════════════════════════════════════════ */

.cviz { display: grid; gap: 14px; margin-top: 14px; }

/* ── Общая шкала: полосы норм + маркер «вы здесь» ───────────────────────── */
.cscale { display: grid; gap: 7px; }
.cscale__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cscale__name { font-size: 13px; color: var(--c-mute); }
.cscale__val { font-family: var(--f-head); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.cscale__track {
  position: relative; height: 26px; border-radius: 7px; overflow: hidden;
  background: rgba(255,255,255,.05); display: flex;
}
.cscale__band { position: relative; height: 100%; }
.cscale__band + .cscale__band { box-shadow: inset 2px 0 0 var(--blue-night); }
.cscale__band--bad  { background: var(--c-bad-bg); }
.cscale__band--warn { background: var(--c-warn-bg); }
.cscale__band--good { background: var(--c-good-bg); }
/* «слишком хорошо» — та же тревога, но отличается штриховкой, а не только цветом */
.cscale__band--odd {
  background: repeating-linear-gradient(135deg,
    var(--c-warn-bg) 0 6px, rgba(255,255,255,.02) 6px 12px);
}
.cscale__band b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  color: var(--c-mute-2); overflow: hidden; padding: 0 4px;
}
.cscale__mark {
  position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px;
  background: #fff; box-shadow: 0 0 0 2px var(--blue-night); transform: translateX(-1.5px);
}
.cscale__foot { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--c-mute-2); }
.cscale__note { font-size: 12.5px; line-height: 1.5; color: var(--c-mute); }
.cscale__note b { color: var(--c-text); font-weight: 600; }

/* ── Воронка: лиды → квалифицированные → сделки ─────────────────────────── */
.cfunnel { display: grid; gap: 9px; }
/* 128px: «Квалифицированные» — самое длинное слово, в 108px оно не вставало. */
.cfunnel__row { display: grid; grid-template-columns: 128px 1fr; gap: 10px; align-items: center; }
.cfunnel__lab { font-size: 12.5px; color: var(--c-mute); line-height: 1.25; overflow-wrap: break-word; }
.cfunnel__bar { position: relative; height: 30px; border-radius: 6px; background: rgba(255,255,255,.05); }
.cfunnel__fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--blue-neon), var(--blue-pale));
  min-width: 3px;
}
.cfunnel__v {
  position: absolute; top: 0; bottom: 0; left: 10px; display: flex; align-items: center;
  font-family: var(--f-head); font-size: 14px; font-weight: 700; color: var(--blue-night);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.cfunnel__v.is-out { left: auto; right: 10px; color: var(--c-text); text-shadow: none; }
.cfunnel__drop { font-size: 11.5px; color: var(--c-mute-2); padding-left: 138px; margin-top: -3px; }
.cfunnel__drop b { color: var(--c-warn); font-weight: 600; }

/* ── Вклад каналов: один тон, сортировка по убыванию ────────────────────── */
.cbars { display: grid; gap: 8px; }
.cbars__row { display: grid; grid-template-columns: 132px 1fr 96px; gap: 10px; align-items: center; }
.cbars__name { font-size: 12.5px; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbars__track { position: relative; height: 20px; border-radius: 5px; background: rgba(255,255,255,.05); }
.cbars__fill { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--blue-neon); min-width: 2px; }
.cbars__fill.is-loss { background: var(--c-bad); }
.cbars__zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--c-line-2); }
.cbars__v { font-size: 12.5px; text-align: right; color: var(--c-text); font-variant-numeric: tabular-nums; }
.cbars__v.is-loss { color: var(--c-bad); }

/* ── Полоса выполнения цели ─────────────────────────────────────────────── */
.cprog { display: grid; gap: 7px; }
.cprog__track { position: relative; height: 22px; border-radius: 6px; background: rgba(255,255,255,.05); overflow: hidden; }
.cprog__fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--c-good); }
.cprog__fill.is-short { background: var(--c-warn); }
.cprog__cap { position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: var(--c-line-2); }
.cprog__lab { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--c-mute); }

/* Значок статуса: цвет никогда не работает в одиночку. */
.cflag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; }
.cflag::before { font-size: 13px; line-height: 1; }
.cflag--good { color: var(--c-good); } .cflag--good::before { content: '✓'; }
.cflag--warn { color: var(--c-warn); } .cflag--warn::before { content: '▲'; }
.cflag--bad  { color: var(--c-bad); }  .cflag--bad::before  { content: '✕'; }

/* Таблица-дублёр под графикой: и для скринридера, и для печати. */
.cviz details { margin-top: 2px; }
.cviz summary { font-size: 12px; color: var(--c-mute-2); cursor: pointer; padding: 3px 0; }
.cviz summary:hover { color: var(--c-text); }
.cviz details table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12.5px; }
.cviz details th, .cviz details td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--c-line); }
.cviz details th { color: var(--c-mute-2); font-weight: 600; }
.cviz details td { font-variant-numeric: tabular-nums; }

/* Номер шага в заголовке карточки: виден порядок действий. */
.cstep-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 9px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 12px; font-weight: 700;
  font-family: var(--f-head); flex: none;
}
.ccard__hd h2 { display: flex; align-items: center; }

/* Липкая шапка и итог таблицы каналов: на девяти строках заголовки уезжали. */
.ccard--wide .ctable thead th { position: sticky; top: 0; z-index: 3; background: #0a1050; }
.ccard--wide .ctable tfoot td { position: sticky; bottom: 0; z-index: 2; background: #0a1050;
  box-shadow: 0 -1px 0 var(--c-line-2); }

@media (max-width: 720px) {
  .cfunnel__row { grid-template-columns: 92px 1fr; }
  .cfunnel__drop { padding-left: 102px; }
  .cbars__row { grid-template-columns: 96px 1fr 78px; }
}
@media print {
  .cviz details { display: block !important; }
  .cviz details > summary { display: none !important; }
  .cviz details table { display: table !important; }
  .cscale__track, .cfunnel__bar, .cbars__track, .cprog__track { display: none !important; }
  .ccard--wide .ctable thead th, .ccard--wide .ctable tfoot td { position: static !important; }
}

/* Подпись шага над блоком результата: продолжает нумерацию карточек. */
.cviz-step { display: flex; align-items: center; margin: 0 0 12px;
  font-family: var(--f-head); font-size: 15px; font-weight: 700; color: var(--c-text); }