/* ═══════════════════════════════════════════════════════════════════════
   calc-srok.css — калькулятор сроков в статье блога (25.08.2026).

   ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ. Статья «Сколько времени занимает разработка сайта»
   даёт ~250 кликов в месяц из поиска и ноль заявок: человек получал ответ
   и уходил. Калькулятор — проверка гипотезы «информационный трафик можно
   конвертировать конструкцией страницы». Отдельный файл, чтобы: (1) не
   раздувать blog-article.css на 81 страницу ради одной, (2) блок можно было
   снять одной строкой, если гипотеза не подтвердится, (3) переиспользовать
   на статье про цену, когда подтвердится.

   Токены берём из blog-article.css (:root светлой темы статей) — свой
   палитры не заводим, иначе блок будет выглядеть чужим.
   ═══════════════════════════════════════════════════════════════════════ */

.cs{
  margin:38px 0;
  border:1px solid var(--line,#E5E7EB);
  border-radius:var(--r,16px);
  background:var(--surface,#F6F8FA);
  padding:clamp(20px,3.4vw,30px);
}
.cs-h{font-size:clamp(19px,2.4vw,23px);line-height:1.25;margin-bottom:6px;color:var(--text,#061D29)}
.cs-sub{font-size:14px;color:var(--muted,#425D6D);margin-bottom:20px}

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

.cs-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.cs-f > span{font-size:13px;font-weight:600;color:var(--muted,#425D6D)}
.cs-f select,.cs-f input{
  font:inherit;font-size:15px;
  padding:11px 12px;
  border:1px solid var(--line2,#D1D5DB);
  border-radius:11px;
  background:var(--bg,#fff);
  color:var(--text,#061D29);
  width:100%;
  /* Явный appearance: в Safari нативный select игнорирует радиус и фон. */
  -webkit-appearance:none;appearance:none;
}
.cs-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 11px center;background-size:17px;
  padding-right:36px;
}
.cs-f select:focus-visible,.cs-f input:focus-visible{
  outline:2px solid var(--accent,#6D49CE);outline-offset:1px;border-color:transparent;
}
.cs-f[hidden]{display:none}

.cs-out{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line,#E5E7EB);
  display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end;
}
.cs-val{display:flex;flex-direction:column;gap:3px}
.cs-val b{font-size:clamp(26px,4.2vw,34px);line-height:1.05;color:var(--text,#061D29);font-variant-numeric:tabular-nums}
.cs-val span{font-size:12.5px;color:var(--faint,#5A7382)}

.cs-note{font-size:13px;line-height:1.55;color:var(--faint,#5A7382);margin-top:16px}
.cs-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
/* 🔴 Селектор через `.cs a.` — иначе побеждает blog-article.css: там ссылки
   внутри текста статьи подчёркнуты, и кнопки приезжали с подчёркиванием.
   Специфичность выше — работает без !important. */
.cs a.cs-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:999px;font-size:15px;font-weight:600;
  text-decoration:none;border-bottom:0;background-image:none;
  transition:transform .18s var(--ease,ease),box-shadow .18s;
}
.cs a.cs-btn.primary{background:var(--accent,#6D49CE);color:var(--accent-ink,#fff)}
.cs a.cs-btn.ghost{background:transparent;color:var(--text,#061D29);border:1px solid var(--line2,#D1D5DB)}
@media (hover:hover){
  .cs a.cs-btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(109,73,206,.75)}
  .cs a.cs-btn.ghost:hover{border-color:var(--accent,#6D49CE);color:var(--accent,#6D49CE)}
}
@media (prefers-reduced-motion:reduce){ .cs a.cs-btn{transition:none} .cs a.cs-btn.primary:hover{transform:none} }