/* ═══════════════════════════════════════════════════════════════════════
   calc-econom.css — калькулятор экономии на странице /ai-avtomatizaciya/.
   Агент И, волна августа 2026. Спецификация — `prompts/agent-И-ii-stranicy.md`,
   раздел 5. Основание — `КАРТА-БОЛЕЙ-ИИ-2026-08-25.md`: «на сайт нужен
   калькулятор… человек сам вводит свои цифры и сам себя убеждает».

   ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ. Ровно та же логика, что у `calc-srok.css`: блок
   живёт на одной-двух страницах, а home.css грузится на 105. Отдельный файл
   можно снять одной строкой, если гипотеза не подтвердится, и переиспользовать
   на `/ai-agenty/`, когда подтвердится.

   ОТЛИЧИЕ ОТ calc-srok.css. Тот написан под светлую тему статей блога
   (blog-article.css). Этот — под маркетинговые страницы: токены берём из
   `tokens.css` каноническими именами (--c-line, --c-accent, --r-md …),
   своей палитры не заводим. Инлайн-стилей и инлайн-скриптов нет: CSP
   страницы запрещает `script-src 'unsafe-inline'`.
   ═══════════════════════════════════════════════════════════════════════ */

.ce{
  border:1px solid var(--c-line);
  border-radius:var(--r);
  background:var(--c-bg);
  box-shadow:var(--sh-2);
  padding:clamp(22px,3.4vw,36px);
}

.ce-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:680px){ .ce-grid{grid-template-columns:1fr} }

.ce-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.ce-f > span{font-size:var(--fs-small);font-weight:600;color:var(--c-muted)}
.ce-f select,.ce-f input{
  font:inherit;font-size:1rem;
  padding:12px 14px;
  border:1px solid var(--c-line2);
  border-radius:var(--r-sm);
  background:var(--c-bg);
  color:var(--c-ink);
  width:100%;
  /* Явный appearance: Safari игнорирует радиус и фон на нативном select. */
  -webkit-appearance:none;appearance:none;
}
.ce-f select{
  /* Стрелка через data-URI: внешние картинки режет CSP (img-src 'self' data:). */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23425D6D' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
  padding-right:38px;
}
.ce-f select:focus-visible,.ce-f input:focus-visible{
  outline:2px solid var(--c-accent);outline-offset:1px;border-color:transparent;
}

/* ── Результат ── */
.ce-out{
  margin-top:26px;padding:22px clamp(16px,2.4vw,24px);
  background:var(--c-lav);border-radius:var(--r-md);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
}
@media(max-width:680px){ .ce-out{grid-template-columns:1fr;gap:16px} }

.ce-val{display:flex;flex-direction:column;gap:4px;min-width:0}
.ce-val b{
  font-size:clamp(1.55rem,3.6vw,2.15rem);line-height:1.04;font-weight:800;
  color:var(--c-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.ce-val span{font-size:var(--fs-caption);line-height:1.4;color:var(--c-muted)}
.ce-val.accent b{color:var(--c-accent)}

/* Вилка цены — отдельной строкой под тремя числами: это уже наше
   предложение, а не его цифра, и смешивать их в один ряд нечестно. */
.ce-price{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--c-line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
}
.ce-price .k{font-size:var(--fs-small);color:var(--c-muted)}
.ce-price .v{font-size:var(--fs-h3);font-weight:700;color:var(--c-ink);font-variant-numeric:tabular-nums}

/* Предупреждение «не окупается за полгода — не беремся». Показывается
   вместо вилки цены. Правило из `ии-цены-редакция-2`, раздел «Как считаем». */
.ce-stop{
  margin-top:18px;padding:16px 18px;
  border:1px solid var(--c-line2);border-left:3px solid var(--c-warn);
  border-radius:var(--r-sm);background:var(--c-bg);
  font-size:var(--fs-small);line-height:1.6;color:var(--c-muted);
}
.ce-stop b{color:var(--c-ink);font-weight:650}
.ce-stop[hidden]{display:none}

.ce-note{font-size:var(--fs-small);line-height:1.6;color:var(--c-faint);margin-top:18px;max-width:70ch}
.ce-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}