/* ═══ ТОКЕНЫ ═══
   Палитра третья по счёту и нарочно не похожа на первые две (тёплая бумага
   у QR-меню, холодная бирюза у виджетов): восемь кворков одной рукой не должны
   читаться как восемь копий одного шаблона. Здесь глубокая индиговая на светло-
   серой бумаге — цвет считающего инструмента, а не рекламной страницы.

   🚨 --paper, --ink и --accent читает съёмка: `shoot-demo.mjs` берёт их
   у первого кадра и красит ими подложку работ. Переименовывать только вместе
   с шутером, иначе работы уедут в чужой палитре и молча. */
:root {
  --paper:    #f1f2f5;
  --card:     #ffffff;
  --ink:      #16181f;
  --ink-2:    #52566a;
  /* 🚨 #696d7d, а не прежний #878ca0. Замер `check-contrast.mjs` 07.09.2026:
     старый давал 2.98 на бумаге и 3.34 на карточке при норме AA 4.5, и под ним
     сидели ВОСЕМЬ мест разом — подпись ниши, единицы измерения у полей, заголовок
     сметы, сноски. Новый: 4.59 и 5.14. */
  --ink-3:    #696d7d;
  /* Волосяная линия для разделителей и карточек: украшение, контраст ей не нужен. */
  --rule:     #dcdee6;
  /* Граница ЭЛЕМЕНТА УПРАВЛЕНИЯ. Пустое поле ввода на белой карточке опознаётся
     только по рамке, а --rule даёт на белом 1.34 при норме 3.0. Отдельный токен,
     потому что одна переменная на оба случая либо не проходит порог, либо
     превращает каждую карточку в коробку с жирным кантом. */
  --field:    #919398;
  --accent:   #2f3bb3;
  --accent-w: #e8eafc;
  --good:     #12724f;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 68px;
  --r-chip: 8px; --r-btn: 10px; --r-card: 14px; --r-big: 18px;

  --sans: "Golos Text", system-ui, -apple-system, sans-serif;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font: 400 15.5px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  /* Цифры в смете обязаны стоять столбиком: пропорциональные вызывают
     дрожание итога при каждом шаге ползунка. */
  font-variant-numeric: tabular-nums;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--s6); }

/* ── Шапка ── */
.top { background: var(--card); border-bottom: 1px solid var(--rule); }
.top__in { display: flex; align-items: center; gap: var(--s5); min-height: 68px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); }
.brand__mark { width: 25px; height: 25px; flex: none; }
.brand__name { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.022em; }
.top__note { margin-left: auto; font-size: 13px; color: var(--ink-3); }

/* ── Ниши ── */
.tabs { display: flex; gap: var(--s2); padding-top: var(--s5); flex-wrap: wrap; }
.tab {
  font: 500 14.5px/1 var(--sans); letter-spacing: -0.008em;
  background: var(--card); color: var(--ink-2); cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--r-chip); padding: 11px 17px;
  transition: color 130ms ease-out, border-color 130ms ease-out;
}
.tab:hover { color: var(--accent); border-color: var(--accent); }
.tab[aria-current="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600;
}
.hint { margin-top: var(--s3); font-size: 13.5px; color: var(--ink-3); }

/* ── Раскладка ── */
.grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: var(--s6);
  align-items: start; margin-top: var(--s5);
}

/* ── Параметры ── */
.params {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-big);
  padding: var(--s2) var(--s5) var(--s3);
}
.fld { padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.fld:last-child { border-bottom: 0; }
.fld__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.fld__top label, .fld__lb { font-size: 15px; font-weight: 500; letter-spacing: -0.008em; }

/* Счётчик: минус, поле, единица, плюс. Единица ВНУТРИ рамки, потому что «18»
   и «18 м²» — разные подписи, и вторая не требует держать в голове, что мерим. */
.fld__val {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  border: 1px solid var(--field); border-radius: var(--r-btn); background: var(--card);
  padding: 2px; transition: border-color 130ms ease-out, box-shadow 130ms ease-out;
}
.fld__val:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-w); }
.stp {
  width: 30px; height: 30px; flex: none; border: 0; background: none; cursor: pointer;
  color: var(--ink-2); font: 400 19px/1 var(--sans); border-radius: 7px;
}
.stp:hover { background: var(--accent-w); color: var(--accent); }
.fld__val input {
  width: 52px; border: 0; background: none; outline: none; text-align: right;
  font: 600 15.5px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums;
}
.fld__u { font-size: 13px; color: var(--ink-3); min-width: 26px; }

/* Ползунок. Заполненная часть рисуется градиентом по --p, значение ставит JS:
   родной ползунок Chromium без этого показывает только бегунок, и с одного
   взгляда непонятно, где ты в диапазоне. */
.rng {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; margin-top: var(--s2); background: none; cursor: pointer;
}
.rng::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) var(--p, 0%), var(--rule) var(--p, 0%));
}
.rng::-webkit-slider-thumb {
  -webkit-appearance: none; width: 17px; height: 17px; margin-top: -6px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgb(22 24 31 / .28);
}

/* Выбор из трёх */
.pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s3); }
.pick__o {
  text-align: left; cursor: pointer; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r-btn); padding: 11px 13px;
  transition: border-color 130ms ease-out, background 130ms ease-out;
}
.pick__o b { display: block; font: 600 14px/1.25 var(--sans); letter-spacing: -0.01em; }
.pick__o i { display: block; font: 400 12.5px/1 var(--sans); font-style: normal; color: var(--ink-3); margin-top: 4px; }
.pick__o:hover { border-color: var(--accent); }
.pick__o[aria-checked="true"] {
  border-color: var(--accent); background: var(--accent-w);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.pick__o[aria-checked="true"] i { color: var(--accent); }

/* Галочка-переключатель */
.fld--chk { padding: var(--s3) 0; }
.chk { display: flex; align-items: center; gap: var(--s3); cursor: pointer; background: none; border: 0; width: 100%; text-align: left; }
.chk__b {
  flex: none; width: 40px; height: 23px; border-radius: 12px; background: var(--rule);
  position: relative; transition: background 140ms ease-out;
}
.chk__b::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgb(22 24 31 / .3);
  transition: transform 140ms ease-out;
}
.chk[aria-checked="true"] .chk__b { background: var(--accent); }
.chk[aria-checked="true"] .chk__b::after { transform: translateX(17px); }
.chk__t { font: 500 15px/1.3 var(--sans); letter-spacing: -0.008em; }
.chk__t i { display: block; font: 400 12.5px/1 var(--sans); font-style: normal; color: var(--ink-3); margin-top: 3px; }

/* ── Смета ── */
.bill { position: sticky; top: var(--s5); }
.bill__box {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-big);
  padding: var(--s5);
}
.bill__h { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.rows { margin-top: var(--s4); display: grid; gap: 11px; }
.row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.row__l { font-size: 14px; }
.row__l i { display: block; font-size: 12px; font-style: normal; color: var(--ink-3); margin-top: 2px; }
.row__s { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
/* Добор до минимума — не ошибка и не скрытая наценка, поэтому цветом не кричим,
   но и не прячем: отдельная строка с объяснением. */
.row--soft .row__l, .row--soft .row__s { color: var(--ink-2); }
.row--soft .row__l i { max-width: 30ch; }

.tot {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: var(--s4); padding-top: var(--s4); border-top: 2px solid var(--ink);
}
.tot span { font-size: 15px; font-weight: 500; }
.tot b { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; color: var(--accent); }
.term { margin-top: var(--s3); font-size: 13.5px; color: var(--ink-2); }
.term b { font-weight: 600; }
.bill__note { margin-top: var(--s3); font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }

.btn {
  display: block; width: 100%; margin-top: var(--s4); cursor: pointer;
  font: 600 15.5px/1 var(--sans); letter-spacing: -0.008em;
  background: var(--accent); color: #fff; border: 0;
  border-radius: var(--r-btn); padding: 15px 20px;
  transition: filter 140ms ease-out;
}
.btn:hover { filter: brightness(1.12); }

.share { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.share__t { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.share__row { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.share__tail {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 12px/1.6 ui-monospace, Consolas, monospace; color: var(--ink-2);
  background: var(--paper); border-radius: 7px; padding: 5px 9px;
}
.lnk {
  flex: none; background: none; border: 0; cursor: pointer; padding: 0;
  font: 500 12.5px/1.6 var(--sans); color: var(--accent); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, #fff);
  text-underline-offset: 2px;
}

/* ── Заявка ── */
.lead { margin-top: var(--s6); }
.lead__in {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-big);
  padding: var(--s6); display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: var(--s7);
  align-items: start;
}
.lead__k { font-size: 12.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.lead__n { font-size: 26px; font-weight: 600; letter-spacing: -0.028em; margin-top: var(--s2); }
.lrows { margin-top: var(--s4); display: grid; gap: 9px; }
.lrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
        font-size: 14px; color: var(--ink-2); }
.lrow b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.lead__tot {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule);
}
.lead__tot span { font-size: 15px; font-weight: 500; }
.lead__tot b { font-size: 24px; font-weight: 600; letter-spacing: -0.028em; color: var(--accent); }
.lead__term { margin-top: var(--s2); font-size: 13.5px; color: var(--ink-2); }
.lead__term b { font-weight: 600; }
.lead__lnk { display: block; margin-top: var(--s4); font-size: 12.5px; color: var(--ink-3); }
.lead__lnk input {
  display: block; width: 100%; margin-top: 5px;
  font: 400 12.5px/1.6 ui-monospace, Consolas, monospace; color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--field); border-radius: 7px;
  padding: 8px 10px; outline: none;
}

.lead__form { border-left: 1px solid var(--rule); padding-left: var(--s7); }
.lead__h { font-size: 20px; font-weight: 600; letter-spacing: -0.024em; }
.lead__s { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; }
.in { display: block; margin-top: var(--s4); font-size: 12.5px; color: var(--ink-2); }
.in input, .in textarea {
  display: block; width: 100%; margin-top: 5px; resize: vertical;
  font: 400 15px/1.4 var(--sans); color: var(--ink);
  background: var(--card); border: 1px solid var(--field); border-radius: var(--r-btn);
  padding: 12px 13px; outline: none;
  transition: border-color 130ms ease-out, box-shadow 130ms ease-out;
}
.in input { font-variant-numeric: tabular-nums; }
.in input:focus, .in textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-w); }
.in ::placeholder { color: color-mix(in srgb, var(--ink) 34%, #fff); }
.err:not(:empty) { margin-top: var(--s3); font-size: 13px; color: #b0341f; }
.lead__fine { margin-top: var(--s3); font-size: 12px; line-height: 1.4; color: var(--ink-3); }

.lead__ok { grid-column: 2; border-left: 1px solid var(--rule); padding-left: var(--s7); }
.lead__ok-m {
  width: 44px; height: 44px; border-radius: 50%; background: var(--accent-w); color: var(--accent);
  display: grid; place-items: center; margin-bottom: var(--s4);
}
.lead__ok-m svg { width: 21px; height: 21px; }
.lead__demo {
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule);
  font-size: 12px; line-height: 1.45; color: var(--ink-3);
}

/* ── Как устроено ── */
.how { margin-top: var(--s8); }
.how__h { text-wrap: balance; font-size: 25px; font-weight: 600; letter-spacing: -0.028em; }
.how__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s5); }
.how__i {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
  border-top: 2px solid var(--ink); padding-top: var(--s3);
}
.how__i b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 5px; }

/* ── Подвал ── */
.foot { margin-top: var(--s8); border-top: 1px solid var(--rule); padding: var(--s5) 0 var(--s6); }
.foot__in { display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.foot p { font-size: 12.5px; color: var(--ink-3); }


/* ── Кольцо фокуса ──
   🚨 Рисуем СВОЁ и только для клавиатуры. Родное кольцо браузера на кнопке
   цвета акцента почти не читается, а `:focus` без `-visible` подсвечивал бы
   кнопку и после обычного клика мышью — это шум, из-за которого кольцо
   потом отключают совсем. `outline` сам повторяет скругление элемента. */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Узкий экран ── */
@media (max-width: 900px) {
  .wrap { padding: 0 var(--s4); }
  .top__in { min-height: 58px; gap: var(--s2); }
  .top__note { margin-left: 0; width: 100%; font-size: 11.5px; padding-bottom: var(--s2); }
  .brand__name { font-size: 17px; }

  .tabs { padding-top: var(--s5); gap: 6px; }
  .tab { padding: 9px 13px; font-size: 13.5px; }

  /* 🚨 minmax(0, 1fr), а НЕ 1fr. `1fr` это `minmax(auto, 1fr)`, и его минимум —
     min-content содержимого. Внутри сметы лежит строка адреса расчёта
     с `white-space: nowrap`: её min-content 440 px, и колонка отказывалась
     сжиматься. Страница на телефоне становилась 599 px вместо 390, правый
     край уезжал за экран вместе с итогом. Замер 07.09.2026. */
  .grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); margin-top: var(--s4); }
  /* На телефоне смета НЕ приклеена: приклеенная панель на 384 px съедает
     половину экрана и человек крутит параметры в щель. */
  .bill { position: static; }
  .params { padding: 0 var(--s4) var(--s2); }
  .pick { grid-template-columns: minmax(0, 1fr); }
  .pick__o { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
  .pick__o i { margin-top: 0; }

  .lead__in { grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding: var(--s5); }
  .lead__form, .lead__ok { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: var(--s5); }
  .lead__ok { grid-column: 1; }
  .lead__n { font-size: 22px; }

  .how { margin-top: var(--s7); }
  .how__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .how__h { font-size: 21px; }
  .foot { margin-top: var(--s7); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}