/* ============================================================================
   Оформление калькулятора в стиле ПИМ.Доставки.

   Палитра снята с сайта пимдоставка.рф (styles.506503d2.css, срез 28.08.2026):
   синий акцент #108BFF, ссылки #2E99FF, текст #161C2D, белый фон.
   Оттуда же — плотные заголовки с отрицательным трекингом и акцентная
   полоска слева у смысловых блоков. Карточки на светло-сером фоне — наши:
   у сайта лендинг без интерфейса, а здесь рабочий экран со списками.

   ВСЕ цвета и размеры заданы токенами в :root — правки вносятся только сюда.
   ============================================================================ */

:root {
  /* --- типографика ---
     Geologica — фирменный шрифт PIM.GO, лежит локально в app/static/fonts.
     Подключение — блок @font-face ниже. */
  --font: 15px/1.5 'Geologica', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.03em;

  /* --- фон и текст ---
     --text взят с сайта; в самом логотипе линии чуть синее (#18193F). */
  --bg:              #F3F5FA;
  --surface:         #FFFFFF;
  --surface-soft:    #F8FAFD;
  --text:            #161C2D;
  --text-muted:      #6B7385;
  --text-subtle:     #8A93A6;
  --border:          #E6EAF2;
  --border-input:    #DDE3EE;
  --border-hairline: #EEF1F7;

  /* --- акцент ---
     #108BFF — синий знака на логотипе и полосок на сайте,
     #2E99FF — цвет ссылок оттуда же. */
  --accent:          #108BFF;
  --accent-strong:   #0B6FD1;   /* тот же синий темнее — для наведения */
  --accent-text:     #2E99FF;
  --accent-soft:     #E7F3FF;
  --accent-ring:     rgba(16, 139, 255, 0.16);
  --accent-dark:     #161C2D;   /* тёмные кнопки — цветом текста сайта */

  /* --- статусы --- */
  --ok:              #12833F;
  --ok-soft:         #E7F7EE;
  --ok-border:       #BFE8CF;
  --warn:            #9A5B08;
  --warn-soft:       #FDF1DF;
  --warn-dot:        #F59E0B;
  --danger:          #C0362B;
  --danger-soft:     #FDEEEC;
  --danger-border:   #F3C9C4;

  /* --- геометрия --- */
  --radius-card:   16px;
  --radius-field:  12px;
  --radius-pill:   100px;
  --gap-card:      16px;
  --shadow-card:   0 1px 2px rgba(22, 28, 45, 0.04);
  --shadow-raised: 0 8px 24px rgba(22, 28, 45, 0.08);
}

/* --- Geologica: фирменный шрифт PIM.GO ---
   Файлы лежат в app/static/fonts и отдаются приложением: интернет в рантайме
   не нужен, внешних CDN в проекте нет. Шрифт переменный (300–800),
   поэтому одного файла на подмножество хватает на все начертания.
   Происхождение и лицензия — app/static/fonts/README.md. */

@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/geologica-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;   /* cyrillic-ext */
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/geologica-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;   /* cyrillic */
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/geologica-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;   /* latin-ext */
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/geologica-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;   /* latin */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding: 0 0 80px;
  -webkit-font-smoothing: antialiased;
}
.page { max-width: 1240px; margin: 0 auto; padding: 24px 28px 0; }
a { color: var(--accent-text); }

h1, h2, h3 { letter-spacing: var(--tracking-tight); }

/* --- шапка: белая полоса во всю ширину, как на сайте --- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
}
.top {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px; flex-wrap: wrap;
}
.brand-row { display: flex; align-items: center; gap: 18px; }

.logo { display: flex; align-items: center; text-decoration: none; }
.logo img {
  display: block; width: auto; height: 36px;
  /* знак мелкий — просим браузер не «умничать» при масштабировании */
  image-rendering: auto; shape-rendering: geometricPrecision;
}

.brand-divider { width: 1px; height: 26px; background: var(--border); }
.title { font-weight: 700; font-size: 16px; letter-spacing: var(--tracking-tight); }
.subtitle { font-size: 13px; color: var(--text-muted); margin-top: 1px; }

.demo {
  display: flex; align-items: center; gap: 8px;
  background: var(--warn-soft); color: var(--warn);
  font-size: 12.5px; font-weight: 600; padding: 7px 14px;
  border-radius: var(--radius-pill);
}
.demo i { width: 7px; height: 7px; border-radius: 50%; background: var(--warn-dot); }

.nav { display: flex; align-items: center; gap: 22px; }
.nav a {
  font-size: 14px; font-weight: 500; color: var(--text-muted); text-decoration: none;
}
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--accent); font-weight: 600; }

/* --- карточки --- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 24px 26px;
  margin-bottom: var(--gap-card); box-shadow: var(--shadow-card);
}
.card h2 { font-size: 19px; font-weight: 800; letter-spacing: var(--tracking-tight); }
.card .hint { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }
/* полоска слева у заголовка блока — приём с сайта (.func__text) */
.section-label {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  margin: 22px 0 9px; display: block;
  padding-left: 10px; border-left: 4px solid var(--accent);
  line-height: 1.35;
}
.muted { color: var(--text-muted); font-weight: 500; }

.note {
  font-size: 12.5px; line-height: 1.55; color: var(--text-muted);
  background: var(--accent-soft); border: 1px solid #CCE4FF;
  border-radius: var(--radius-field); padding: 11px 14px; margin-top: 14px;
}
.error {
  font-size: 13.5px; line-height: 1.5; color: var(--danger);
  background: var(--danger-soft); border: 1px solid var(--danger-border);
  border-radius: var(--radius-field); padding: 12px 15px; margin-bottom: 16px;
}

/* --- обязательные поля и свёрнутые уточнения (UX-ревью P0-2) --- */
/* Помечаем только обязательное: подпись «необязательно» у полутора десятков
   полей читалась бы как шум, а пометка у шести — как правило. */
.req {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--accent); background: var(--accent-soft);
  border-radius: var(--radius-pill); padding: 2px 8px; margin-left: 8px;
  white-space: nowrap; vertical-align: middle;
}
.need {
  font-size: 12.5px; line-height: 1.45; color: var(--danger);
  margin-top: 6px;
}
/* «Уточнить детали»: тот же вид, что у раскрывающихся блоков «Условий» */
.fold { margin-top: 18px; }
.fold > summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-subtle);
}
.fold > summary:hover { color: var(--accent); }

/* Формула подписью под цифрой вместо абзаца текста (UX-ревью INT-8):
   «105,15 = 270,39 − 165,24» читается быстрее, чем то же самое словами. */
.formula {
  font-size: 11px; color: var(--text-subtle); margin-top: 2px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* --- порог доходности и качество данных (UX-ревью INT-2) --- */
/* Доходность без порога рядом ничего не говорит: 38 % это хорошо или плохо,
   видно только вместе с тем, чем её меряют. */
.marg { font-weight: 700; font-variant-numeric: tabular-nums; }
.marg-ok   { color: var(--ok); }
.marg-near { color: var(--warn); }
.marg-low  { color: var(--danger); }
.marg-none { color: var(--text-subtle); }

.quality { margin: 12px 0 0; padding: 0; list-style: none; }
.quality > li {
  font-size: 13px; line-height: 1.5; padding: 9px 12px 9px 14px;
  border-left: 3px solid var(--border); border-radius: 0 var(--radius-field) var(--radius-field) 0;
  margin-bottom: 8px; background: var(--surface-soft); color: var(--text);
}
.quality-danger { border-left-color: var(--danger); background: var(--danger-soft); }
.quality-warn   { border-left-color: var(--warn-dot); background: var(--warn-soft); }
.quality-info   { border-left-color: var(--accent); background: var(--accent-soft); }

/* --- география сетки на экране «Сетки расчёта» --- */
.geo-cover { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
/* Москвы или Петербурга в сетке нет — в проценте покрытия это не видно */
.geo-missing {
  margin-top: 6px; padding: 7px 10px; font-size: 12px; font-weight: 600;
  color: var(--danger); background: var(--danger-soft);
  border: 1px solid var(--danger-border); border-radius: var(--radius-field);
}
.geo-uncovered { margin-top: 4px; }
.geo-uncovered > summary {
  cursor: pointer; color: var(--warn); font-weight: 700; font-size: 12px;
}
.geo-uncovered-body {
  margin-top: 6px; padding: 10px 12px; font-size: 12px;
  background: var(--warn-soft); border-radius: var(--radius-field);
}

/* --- список анкет: прогресс шагов и меню строки (UX-ревью P1-4) --- */
.progress {
  height: 6px; border-radius: var(--radius-pill);
  background: var(--border-hairline); overflow: hidden;
}
.progress > i { display: block; height: 100%; background: var(--accent); }

/* «Удалить» уехала под «⋯»: в общем ряду она стояла вплотную к «Продолжить» */
.row-menu { position: relative; display: inline-block; }
.row-menu > summary {
  list-style: none; cursor: pointer; width: 28px; height: 28px;
  border-radius: var(--radius-field); border: 1px solid var(--border-input);
  background: var(--surface); color: var(--text-subtle);
  font-size: 15px; line-height: 24px; text-align: center;
}
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary:hover { border-color: var(--accent); color: var(--accent); }
.row-menu-body {
  position: absolute; z-index: 40; right: 0; top: 34px;
  padding: 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-field);
  box-shadow: var(--shadow-raised);
}

/* --- подсказка «?» у поля или колонки (UX-ревью P1-1) --- */
/* Плашки по четыре строки читают один раз, а место они занимают всегда.
   Поэтому в плашке — строка, которую надо знать всегда, остальное здесь.
   Раскрывается по клику: JS нет, а title="" с телефона не прочитать. */
.help { display: inline-block; position: relative; vertical-align: middle; }
.help > summary {
  list-style: none; cursor: pointer;
  width: 16px; height: 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-input); background: var(--surface);
  color: var(--text-subtle); font-size: 10.5px; font-weight: 800;
  line-height: 14px; text-align: center;
  text-transform: none; letter-spacing: 0;
}
.help > summary::-webkit-details-marker { display: none; }
.help > summary:hover { border-color: var(--accent); color: var(--accent); }
.help[open] > summary {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.help-body {
  position: absolute; z-index: 40; top: 24px; width: 320px;
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-field);
  box-shadow: var(--shadow-raised);
  font-size: 12.5px; font-weight: 500; line-height: 1.55;
  color: var(--text-muted); text-transform: none; letter-spacing: 0;
  white-space: normal; text-align: left;
}
.help-left { left: 0; }
.help-right { right: 0; }   /* у правого края таблицы, иначе уезжает за экран */

/* Таблица расчёта прокручивается вбок, а overflow обрезает всё, что вылезает
   за контейнер, — в том числе раскрытую подсказку из шапки. Пока подсказка
   открыта, обрезание снимаем. `:has()` — единственный способ сделать это без
   JS; в браузере, который его не знает, подсказка просто обрежется. */
.rows-scroll { overflow-x: auto; }
.rows-scroll:has(details.help[open]) { overflow: visible; }

/* строка-пояснение без подложки: то, что раньше было плашкой в сводке */
.hint-line { font-size: 11.5px; line-height: 1.45; color: var(--text-subtle); }

/* --- внутренний контур: клиенту не показывать (UX-ревью INT-0) --- */
/* Кнопка внутреннего расчёта стояла в одном ряду с клиентскими, и на встрече
   наша экономика открывалась одним случайным нажатием. Теперь это отдельная
   группа с рамкой, а предупреждение набрано в полный контраст, не серым. */
.internal-group {
  margin-top: 18px; padding: 12px 16px 14px;
  border: 1px solid var(--danger-border); border-radius: var(--radius-card);
  background: var(--danger-soft);
}
.internal-group-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--danger); margin-bottom: 10px;
}
.internal-group-body { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.internal-group-body .warn-line {
  font-size: 12.5px; font-weight: 600; color: var(--danger);
}
.btn-internal {
  background: var(--surface); border-color: var(--danger-border); color: var(--danger);
}
.btn-internal:hover { background: var(--surface); border-color: var(--danger); }

/* Плашка самого внутреннего экрана: прилипает к верху, чтобы при прокрутке
   на встрече не пропала из виду. */
.internal-sticky {
  position: sticky; top: 0; z-index: 30;
  margin: -24px -28px 16px; padding: 10px 28px;
  background: var(--danger-soft); border-bottom: 1px solid var(--danger-border);
  font-size: 13px; font-weight: 700; color: var(--danger);
}

/* --- средний тариф клиента (ТЗ §8.10): главное число экрана «Результат» --- */
.avg-rate {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 14px 18px; margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}
.avg-rate-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.avg-rate-label {
  font-size: 11.5px; font-weight: 700; color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.avg-rate-value {
  font-size: 26px; font-weight: 800; letter-spacing: var(--tracking-tighter);
  color: var(--text); font-variant-numeric: tabular-nums;
}
.avg-rate-empty { color: var(--text-subtle); }
.avg-rate-main .muted { font-size: 13px; }
.avg-rate-warn { font-size: 12.5px; color: var(--warn); margin-top: 8px; }
.avg-rate-split {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px;
  font-size: 13px; color: var(--text-muted);
  padding-top: 8px; border-top: 1px solid var(--border-hairline);
}

/* --- поля --- */
label.field { display: block; }
.field-label {
  font-size: 11.5px; font-weight: 700; color: var(--text-subtle);
  margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: 0.05em;
}
input[type=text], select {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-field);
  border: 1px solid var(--border-input); font: inherit; font-weight: 600;
  background: var(--surface); color: var(--text);
}
input[type=text]::placeholder { font-weight: 500; color: var(--text-subtle); }
input[type=text]:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* --- чипы-галочки, без единой строчки JS --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block; padding: 9px 16px; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border-input); background: var(--surface);
  color: var(--text); user-select: none; transition: all .12s;
}
.chip span:hover { border-color: var(--accent); color: var(--accent); }
.chip input:checked + span {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-ring); }

/* --- кнопки --- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px;
  border-radius: var(--radius-field); font: inherit; font-weight: 700; font-size: 14px;
  cursor: pointer; border: 1px solid transparent; text-decoration: none;
  text-align: center; transition: all .12s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ghost { background: var(--surface); border-color: var(--border-input); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-dark { background: var(--accent-dark); color: #fff; }
.btn-dark:hover { background: #24272E; }
.btn-danger { background: var(--surface); border-color: var(--border-input); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger-border); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn[disabled] { opacity: .4; cursor: default; }
.actions {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 24px;
  padding-top: 20px; border-top: 1px solid var(--border-hairline);
}
.actions-right { display: flex; gap: 10px; }

/* --- таблицы --- */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-subtle);
  padding: 0 12px 11px; border-bottom: 1px solid var(--border-hairline);
}
/* tabular-nums: цифры одной ширины, иначе столбик сумм «пляшет» (INT-4) */
td { padding: 12px; border-bottom: 1px solid var(--border-hairline); font-size: 14px; vertical-align: middle; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }

/* --- бейджи --- */
.badge {
  display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700;
}
.badge-draft { background: var(--accent-soft); color: var(--accent); }
.badge-done  { background: var(--ok-soft); color: var(--ok); }
.badge-live  { background: var(--ok-soft); color: var(--ok); }
.badge-wave  { background: #F1F3F8; color: var(--text-muted); }

/* монограмма службы доставки: цветная плитка, как в макете сравнения */
.carrier {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em; flex-shrink: 0;
}
.carrier-row { display: flex; align-items: center; gap: 11px; }

/* --- степпер --- */
.stepper { display: flex; align-items: center; gap: 0; }
.stepper .item { display: flex; align-items: center; flex: 1; }
.stepper a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.stepper .num {
  width: 30px; height: 30px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 13.5px;
  flex-shrink: 0; background: var(--surface); color: var(--text-subtle);
  border: 1.5px solid var(--border-input);
}
.stepper .lbl { font-size: 13.5px; color: var(--text-muted); white-space: nowrap; }
.stepper .done .num { background: var(--accent); border-color: var(--accent); color: #fff; }
.stepper .current .num {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.stepper .current .lbl { color: var(--text); font-weight: 700; }
.stepper .line { flex: 1; height: 2px; background: var(--border); margin: 0 12px; }

/* --- две колонки: шаг + сводка --- */
.cols { display: grid; grid-template-columns: 1fr 340px; gap: var(--gap-card); align-items: start; }
.summary dt { font-size: 12px; color: var(--text-subtle); margin-top: 14px; }
.summary dd { font-size: 14px; font-weight: 600; margin-top: 2px; }
.summary hr { border: none; border-top: 1px solid var(--border-hairline); margin: 18px 0; }

@media (max-width: 1000px) {
  .cols { grid-template-columns: 1fr; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stepper { flex-wrap: wrap; gap: 10px; }
  .stepper .item { flex: none; }
  .stepper .line { display: none; }
  .nav { display: none; }
}

/* --- экран выбора пути заполнения --- */
.mode-card {
  max-width: 860px; margin: 40px auto 0; padding: 52px 48px;
  text-align: center; border-radius: 24px;
}
.mode-pill {
  display: inline-block; background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  padding: 8px 15px; border-radius: var(--radius-pill); margin-bottom: 22px;
}
.mode-title {
  font-size: 33px; font-weight: 800; line-height: 1.15;
  letter-spacing: var(--tracking-tighter); margin-bottom: 14px;
}
.mode-lead {
  font-size: 15.5px; color: var(--text-muted); line-height: 1.55;
  max-width: 560px; margin: 0 auto 34px;
}
.mode-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
.mode-options form { display: flex; }
.mode-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  width: 100%; padding: 22px 24px; border-radius: var(--radius-card);
  border: 1px solid var(--border); background: var(--surface);
  font: inherit; text-align: left; cursor: pointer; transition: all .12s;
}
.mode-option:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.mode-option.is-disabled { cursor: default; }
.mode-option.is-disabled .mode-option-name,
.mode-option.is-disabled .mode-option-desc { opacity: .55; }
.mode-option.is-disabled:hover { border-color: var(--border); box-shadow: none; }
.mode-option-name { font-weight: 800; font-size: 17px; letter-spacing: var(--tracking-tight); }
.mode-option-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.mode-option-go { font-size: 13px; font-weight: 700; color: var(--text-subtle); }
.mode-option-go.is-accent { color: var(--accent); }
.mode-footnote { font-size: 12.5px; color: var(--text-subtle); margin-top: 22px; }

/* строка режима над шагами */
.mode-bar b { color: var(--text); }

@media (max-width: 720px) {
  .mode-options { grid-template-columns: 1fr; }
  .mode-card { padding: 34px 22px; }
  .mode-title { font-size: 26px; }
}

/* --- «службы под капотом»: раскрытие галочкой, без JS ---
   Чекбокс ПИМ.Доставки лежит рядом с блоком, поэтому его состояние видно
   соседям через ~. Так блок появляется мгновенно, без похода на сервер. */
.pim-toggle { position: absolute; opacity: 0; pointer-events: none; }
.pim-block { display: none; }
.pim-toggle:checked ~ .pim-block { display: block; }
.chip-pim { cursor: pointer; }
.pim-toggle:checked ~ .chips .chip-pim span {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.pim-toggle:focus-visible ~ .chips .chip-pim span { box-shadow: 0 0 0 3px var(--accent-ring); }

/* --- таблетка-кнопка: выглядит как чип, но отправляет форму --- */
.chip-btn {
  display: inline-block; padding: 9px 16px; border-radius: var(--radius-pill);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border-input); background: var(--surface);
  color: var(--text); transition: all .12s;
}
.chip-btn:hover { border-color: var(--accent); color: var(--accent); }
.chip-btn.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- панель «службы под капотом» --- */
.pim-panel {
  background: var(--surface-soft); border: 1px solid var(--accent-soft);
  border-radius: var(--radius-card); padding: 18px 20px; margin-top: 18px;
}
.pim-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.pim-panel-title { font-size: 14.5px; font-weight: 800; letter-spacing: var(--tracking-tight); }
.pim-panel-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; max-width: 560px; }
/* галочка на выбранных — только внутри этой панели, как в макете */
.pim-panel .chip input:checked + span::before { content: "✓ "; }

/* --- таблица тарифных продуктов --- */
.tariff-table thead th { background: var(--surface-soft); }
.tariff-table thead th:first-child { border-radius: 10px 0 0 10px; }
.tariff-table thead th:last-child { border-radius: 0 10px 10px 0; }
.tariff-table tbody tr.is-on { background: var(--accent-soft); }
.tariff-table input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent); }
.route-badge {
  display: inline-block; padding: 4px 11px; border-radius: var(--radius-pill);
  background: #EFF2F8; color: var(--text-muted); font-size: 12.5px; font-weight: 600;
}
.live-mark { color: var(--ok); font-weight: 700; font-size: 13px; }

/* --- правка клиента в шапке анкеты --- */
.client-summary { cursor: pointer; font-size: 14px; list-style: none; }
.client-summary::-webkit-details-marker { display: none; }
.client-summary::before { content: "▸ "; color: var(--text-subtle); }
details[open] > .client-summary::before { content: "▾ "; }

/* --- таблица строк-комбинаций на шаге «Результат» --- */
.rows-table td { padding: 9px 12px; }
.rows-table tbody tr.is-custom { background: var(--accent-soft); }
.cell-input {
  width: 100%; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--border-input); font: inherit; font-size: 13px;
  font-weight: 600; text-align: right; background: var(--surface); color: var(--text);
}
.cell-input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.link-btn {
  display: block; margin-left: auto; margin-top: 2px; padding: 0; border: none;
  background: none; font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--accent); cursor: pointer; text-decoration: underline;
}

/* --- карточка договора с СД на шаге «Результат» --- */
.contract-card {
  border: 1px solid var(--border-hairline); border-radius: 12px;
  padding: 14px 16px; margin-top: 12px;
}
.contract-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.contract-rates {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px;
  font-size: 13px; color: var(--text-subtle);
}
.contract-rates b { color: var(--text); }

/* --- внутренний блок: раскрывается по клику, по умолчанию закрыт --- */
details.internal {
  margin-top: 22px; border: 1px solid var(--border-hairline);
  border-radius: 12px; padding: 12px 16px; background: var(--surface-soft);
}
details.internal > summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
details.internal[open] > summary { margin-bottom: 8px; }
.badge-internal {
  background: var(--surface); color: var(--text-subtle);
  border: 1px solid var(--border-hairline); font-weight: 600;
}
.badge-soft {
  background: var(--surface); color: var(--text-subtle);
  border: 1px solid var(--border-hairline); font-size: 10.5px;
  font-weight: 600; padding: 2px 7px;
}