/* Токены и плотность — из утверждённого макета docs/design/final.html.
   Палитра «Invoice & Billing Tool», шрифты JetBrains Mono + IBM Plex Sans,
   плотность «Data-Dense Dashboard»: строка 36, отступ 12, панель 388.
   Свой дизайн здесь не изобретается: макет — визуальная спецификация.

   Палитра и шрифты утверждены владельцем и не меняются. Добавлены только:
   шкала размеров и отступов (раньше её не было вовсе — 12 кеглей с шагом
   в полпикселя и отступы 5/6/7/9/11/22/26 вне всякой сетки, AUDIT-layout Н11–Н12)
   и отдельный оттенок зелёного ДЛЯ ТЕКСТА: заливочный #059669 как цвет букв
   нигде не набирал 4,5:1 (Н5). Заливки, рамки и фокус остались прежними. */
:root{
  --primary:#1E3A5F; --accent:#059669; --accent-soft:#ECFDF5;
  /* Зелёный для текста: 5,48 на белом, 4,93 на сером. Для заливок — --accent. */
  --accent-text:#047857;
  --bg:#F8FAFC; --card:#FFF; --fg:#0F172A;
  --muted:#F1F3F5; --muted-fg:#5A6B80; --border:#E4E7EB;
  --danger:#B91C1C;
  /* Шкала кеглей: шесть ступеней вместо двенадцати. */
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-lg:16px; --fs-xl:18px; --fs-2xl:26px;
  /* Шкала отступов, кратная четырём. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --row:36px; --pad:var(--s3);
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  /* Микровзаимодействия: 150 мс — предел, за которым отклик кажется вялым. */
  --fast:.15s ease-out;
}
*{box-sizing:border-box}
/* Скрытое обязано быть скрытым: у .cols задан display:grid, и он перебивает
   служебный display:none атрибута hidden — вкладка «Мои заказы» открывалась
   поверх видимого калькулятора. */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--fs-md)/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
code{font:400 var(--fs-sm) var(--mono)}

/* Рамка фокуса видна всегда: экран рассчитан на полную работу с клавиатуры. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

.page{max-width:1600px;margin:0 auto;padding:var(--s5) var(--s4) 60px}
h1{font:700 var(--fs-xl)/1.25 var(--mono);letter-spacing:-.02em;margin:0 0 var(--s3)}

/* Ссылка-перескок к адресу: по Tab поле адреса тридцать седьмое, а разговор
   начинается именно с него (AUDIT-layout Н13). Видна только с клавиатуры. */
.skip{position:absolute;left:-9999px;font:600 var(--fs-sm)/1 var(--sans);color:var(--accent-text)}
.skip:focus{position:static;display:inline-block;margin:0 0 var(--s2)}

.error{margin:0 0 var(--s3);padding:var(--s2) var(--s3);border:1px solid var(--danger);border-radius:5px;
  background:#FEF2F2;color:var(--danger);font-size:var(--fs-md)}

/* overflow:clip, а не hidden: hidden делает панель прокручиваемым контейнером,
   и липкий блок с итогом и кнопкой прилипал бы к её невидимому низу, а не
   к краю окна. clip обрезает так же, но контейнером прокрутки не становится. */
.app{background:var(--card);border:1px solid var(--border);border-radius:6px;overflow:clip}
.tabs{display:flex;border-bottom:1px solid var(--border);background:var(--muted)}
.tabs button{font:600 var(--fs-xs)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:0 var(--s4);
  height:42px;border:0;border-right:1px solid var(--border);background:transparent;color:var(--muted-fg);
  transition:background-color var(--fast),color var(--fast)}
.tabs button:not(:disabled):hover{background:var(--card);color:var(--fg)}
.tabs button.on{background:var(--card);color:var(--fg);box-shadow:inset 0 -2px 0 var(--accent)}
/* Вкладка без содержимого с экрана уходит: нажать её нельзя, а место в самом
   верху берёт и обещает то, чего ещё нет. Появится содержимое — в index.html
   снимут disabled, и вкладка вернётся сама, без переделки навигации. */
.tabs button:disabled{display:none}
.tabs .who{margin-left:auto;display:flex;align-items:center;padding:0 var(--s3);
  font:500 var(--fs-xs)/1 var(--mono);color:var(--muted-fg);text-transform:none;letter-spacing:0}
/* «Сбросить всё» — разрушающее действие, и подача у него своя.
   Раньше это был серый текст в ряду серых вкладок, и кнопка терялась совсем.
   Теперь она видна в покое: красный контур, свой значок и отступ, отделяющий
   её и от вкладок, и от подписи менеджера. Но именно контур, а не заливка:
   заливку на этом экране носит только «Оформить заказ», и опасное действие
   не должно выглядеть привлекательнее целевого. Красный по белому — 7,1:1,
   надпись читаема; смысл несут цвет, значок и слово сразу, а не один цвет.
   Подтверждение перед очисткой остаётся.

   Селектор с button, а не просто .reset: общее правило .tabs button:hover
   весит столько же и стоит выше — без этого наведение красило кнопку в общий
   серый, и разрушающее действие теряло свой цвет ровно в момент касания. */
.tabs button.reset{display:flex;align-items:center;gap:6px;align-self:center;height:28px;
  margin:0 var(--s3) 0 var(--s2);padding:0 var(--s3);border:1px solid var(--danger);border-radius:4px;
  background:var(--card);color:var(--danger);letter-spacing:.06em;
  transition:background-color var(--fast),color var(--fast),box-shadow var(--fast)}
.tabs button.reset svg{width:13px;height:13px;flex:0 0 auto}
.tabs button.reset:hover{background:var(--danger);color:#fff;box-shadow:0 0 0 3px #FEF2F2}
.tabs button.reset:active{transform:translateY(1px)}
.tabs button.reset:focus-visible{outline-color:var(--danger)}

/* Ширина распределена по содержимому: слева конфигуратор, справа текст КП,
   написанный под 80 символов в строке (AUDIT-layout Н2 и Н3). */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 600px}
.main{padding:var(--s3) var(--pad)}
.side{padding:var(--s3) var(--pad);border-left:1px solid var(--border);background:#FCFDFE}

.lbl{font:600 var(--fs-xs)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-fg);
  margin:0 0 var(--s2);display:flex;align-items:baseline;gap:var(--s2)}
.lbl s{text-decoration:none;font:400 var(--fs-xs)/1 var(--mono);letter-spacing:0;text-transform:none;opacity:.75}
.lbl label{cursor:pointer}

.forms{display:flex;gap:var(--s1);max-width:430px}
.form{flex:1;border:1px solid var(--border);border-radius:5px;background:var(--card);padding:var(--s2) var(--s1);
  text-align:center;color:var(--muted-fg);transition:border-color var(--fast),background-color var(--fast)}
.form:hover{border-color:var(--muted-fg)}
.form:active{transform:translateY(1px)}
.form.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.form b{font:600 var(--fs-sm)/1.3 var(--sans);display:block;margin-top:var(--s1);color:var(--fg)}
.form i{font-style:normal;font:400 var(--fs-xs)/1 var(--mono);color:var(--muted-fg)}
.form.on b{color:var(--accent-text)}
.form svg .ground{stroke:var(--muted-fg)}

.seg{display:flex;border:1px solid var(--border);border-radius:5px;overflow:hidden;width:fit-content;background:var(--card)}
.seg button{font:500 var(--fs-md)/1 var(--sans);padding:var(--s2) var(--s3);border:0;border-right:1px solid var(--border);
  background:transparent;color:var(--fg);text-align:left;transition:background-color var(--fast),color var(--fast)}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--muted)}
.seg button.on{background:var(--primary);color:#fff}
/* Подпись под рядом ширин: почему 2,5 м и 3 м стоят одинаково. */
.segnote{margin:var(--s1) 0 0;max-width:440px;font:400 var(--fs-xs)/1.4 var(--mono);color:var(--muted-fg)}
.row{display:flex;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s3)}

/* Каркас: ряды осей и подпись «это Народная».
   Название модели — результат выбора, а не сам выбор, поэтому не кнопка.
   min-height держит место под ряд осей: у каплевидной и у ширины 1,8 м
   сечение одно, ряд исчезает, и всё ниже прыгало на 62 px под курсором (Н4). */
#frames{min-height:94px}
.frame-note{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--s4);
  padding:var(--s2) var(--s3);background:var(--muted);border-radius:5px;
  font:400 var(--fs-sm)/1.35 var(--mono);color:var(--muted-fg)}
.frame-note .is{font-size:var(--fs-xs)}
.frame-note b{font:600 var(--fs-md)/1.2 var(--sans);color:var(--fg)}
.frame-note .load{margin-left:auto;font-weight:600;color:var(--accent-text)}

/* Карточки вариантов вместо сплющенной полосы.
   Пять каркасов в одной строке равными долями ломали подписи по слогам —
   минимальная ширина ячейки 168px этого не допускает. */
/* max-width — чтобы ряд не рассыпался на широком окне. Без него auto-fit при
   левой колонке в 942 px открывает ПЯТУЮ дорожку, четыре карточки жмутся влево,
   а справа остаётся пустая клетка шириной с карточку: ряд читается как сломанный.
   Ограничение того же порядка, что и max-width у силуэтов формы (430 px). */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--s1);
  max-width:800px;margin-bottom:var(--s4)}
.opt{border:1px solid var(--border);border-radius:5px;background:var(--card);color:var(--fg);
  padding:var(--s2) var(--s3);text-align:left;display:block;
  transition:border-color var(--fast),background-color var(--fast)}
.opt:hover{border-color:var(--muted-fg)}
.opt:active{transform:translateY(1px)}
.opt.on{border-color:var(--primary);background:var(--primary);color:#fff}
.opt .t{font:600 var(--fs-md)/1.25 var(--sans);display:block}
/* Вторая строка карточки — плотность листа, кг/м². tabular-nums держит запятые
   в столбик: четыре карточки стоят рядом, и прыгающая запятая читается как
   разнобой. Ширины ячейки (168px) хватает и на «4 мм premium», и на число,
   поэтому перенос по слогам невозможен, а многоточие не срабатывает. */
.opt .s{font:400 var(--fs-xs)/1.5 var(--mono);color:var(--muted-fg);display:block;margin-top:var(--s1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.opt.on .s{color:rgba(255,255,255,.78)}
.opt .load{font:600 var(--fs-xs)/1 var(--mono);color:var(--accent-text);display:block;margin-top:var(--s1)}
.opt.on .load{color:#6EE7B7}
/* Производитель — одной строкой на весь ряд, а не по разу на карточке:
   он один на все варианты. grid-column:1/-1 — строка идёт целиком, сколько бы
   карточек ни встало в ряд на широком окне. */
.cards .pc-maker{grid-column:1/-1;display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s2);
  margin:var(--s1) 0 0;font:400 var(--fs-xs)/1.5 var(--mono);color:var(--muted-fg)}
.cards .pc-maker b{font-weight:600;color:var(--fg);letter-spacing:.04em}
.cards .pc-maker span+b::before,.cards .pc-maker b+span::before{content:"·";margin-right:var(--s2);
  font-weight:400;color:var(--muted-fg)}

/* адрес, подсказки, карта маршрута */
.addrbox{position:relative}
.addr{width:100%;padding:var(--s2) var(--s3);border:1px solid var(--border);border-radius:5px;
  font:var(--fs-md) var(--sans);background:var(--card);transition:border-color var(--fast)}
.addr:hover{border-color:var(--muted-fg)}
.sug{position:absolute;z-index:5;top:100%;left:0;right:0;margin:var(--s1) 0 0;padding:var(--s1);list-style:none;
  background:var(--card);border:1px solid var(--border);border-radius:5px;box-shadow:0 6px 18px rgba(15,23,42,.12)}
.sug button{display:block;width:100%;text-align:left;padding:var(--s1) var(--s2);border:0;border-radius:4px;
  background:transparent;transition:background-color var(--fast)}
.sug button:hover{background:var(--muted)}
.sug b{display:block;font:500 var(--fs-md)/1.3 var(--sans);color:var(--fg)}
.sug i{display:block;font-style:normal;font:400 var(--fs-xs)/1.3 var(--mono);color:var(--muted-fg);margin-top:2px}

.map{position:relative;height:200px;margin-top:var(--s2);border:1px solid var(--border);border-radius:5px;
  overflow:hidden;background:#EEF2F6}
/* Слой настоящей карты Яндекса. Своим svg-правилам сюда нельзя: карта рисует
   собственные svg внутри того же контейнера, и общий селектор их ломает. */
.map .ymap{position:absolute;inset:0}
.map > svg.scheme{position:absolute;inset:0;width:100%;height:100%}
.map .road{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.map .from{fill:var(--primary)}
.map .to{fill:var(--accent)}
.map .pin{font:500 9px var(--mono);fill:var(--muted-fg)}
.map .cap{position:absolute;z-index:2;left:var(--s2);bottom:var(--s1);pointer-events:none;
  padding:1px 5px;border-radius:3px;background:rgba(255,255,255,.85);font:500 var(--fs-xs)/1 var(--mono);color:var(--muted-fg)}

.km{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;margin-top:var(--s2);
  font:500 var(--fs-sm)/1.4 var(--mono);color:var(--muted-fg)}
.km b{font:700 var(--fs-md)/1 var(--mono);color:var(--fg);font-variant-numeric:tabular-nums}
.km.miss{color:var(--danger)}
.km .wait{color:var(--accent-text)}

/* смета */
.spec{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.spec th{font:600 var(--fs-xs)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-fg);
  text-align:left;padding:0 0 var(--s1);border-bottom:1px solid var(--fg)}
.spec th:last-child{text-align:right}
.spec td{padding:var(--s1) 0;border-bottom:1px solid var(--border);vertical-align:top}
.spec td:last-child{text-align:right;font-family:var(--mono);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.spec .q{color:var(--muted-fg);font:400 var(--fs-xs)/1.4 var(--mono)}
/* Разбивка теплицы: видна только когда её раскрыли, и сдвинута, чтобы читалось
   как «из чего сложилась строка выше». */
.spec td.sub{padding-left:var(--s3);color:var(--muted-fg)}
/* «Подробно» — самая маленькая цель на экране: одиннадцать пикселей в высоту,
   попасть в неё мышью с первого раза нельзя. Отступы поднимают область нажатия
   до 19 px, не двигая ни строку сметы, ни соседние суммы. */
.more{margin-left:var(--s1);padding:var(--s1) var(--s1);border:0;background:transparent;color:var(--accent-text);
  font:500 var(--fs-xs)/1 var(--mono);text-decoration:underline;text-underline-offset:2px;border-radius:3px}
.more:hover{color:var(--fg);background:var(--muted)}

/* Итог и главная кнопка держатся у нижнего края окна: «Оформить заказ»
   не была видна без прокрутки ни на одной высоте окна (AUDIT-layout Н1). */
.close{position:sticky;top:0;z-index:3;margin-top:var(--s3);padding:var(--s3) 0 var(--s2);
  background:#FCFDFE;border-top:2px solid var(--fg);box-shadow:0 8px 12px -10px rgba(15,23,42,.35)}
.sum{display:flex;justify-content:space-between;align-items:baseline}
.sum span{font:600 var(--fs-xs)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-fg)}
/* Итог без доставки — неполный. Он обязан выглядеть неполным, иначе менеджер
   назовёт его клиенту как окончательный. */
.sum span.partial{color:var(--danger)}
.sum b{font:700 var(--fs-2xl)/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.badge{font:500 var(--fs-xs)/1 var(--mono);color:var(--accent-text);background:var(--accent-soft);
  border:1px solid var(--accent);border-radius:3px;padding:2px var(--s1);margin-left:var(--s1)}

.warn{margin:var(--s2) 0 0;padding:var(--s2) var(--s3) var(--s2) var(--s5);background:#FFFBEB;
  border:1px solid #FDE68A;border-radius:5px;font-size:var(--fs-xs);line-height:1.55;color:#78350F}


.terms{margin-top:var(--s2);padding:var(--s2) var(--s3);background:var(--muted);border-radius:5px;
  font-size:var(--fs-sm);color:var(--muted-fg);line-height:1.65}
.terms b{color:var(--fg);font-weight:600}
/* Заливка --accent-text, а не --accent: белым по #059669 выходит 3,77:1 — для
   подписи в 13 px мало, порог 4,5:1. По #047857 — 5,48:1. Оттенок из той же
   палитры. Отклик на наведение перенесён с цвета на кольцо, как у «Сбросить всё»:
   темнее уже некуда, а светлее — снова терять контраст на главной кнопке. */
.go{display:block;width:100%;margin-top:var(--s2);padding:var(--s3);border:0;border-radius:5px;
  background:var(--accent-text);color:#fff;font:600 var(--fs-md)/1 var(--sans);
  transition:background-color var(--fast),box-shadow var(--fast)}
.go:hover{box-shadow:0 0 0 3px var(--accent-soft)}
.go:active{transform:translateY(1px)}
/* Недоступная кнопка не «бледная зелёная», а серая: выключенность читается
   цветом, а не светлотой, и надпись остаётся разборчивой (Н9). */
.go[aria-disabled="true"]{background:var(--muted);color:var(--muted-fg);cursor:not-allowed;
  box-shadow:inset 0 0 0 1px var(--border)}
/* Кнопка недоступна — рядом написано почему, иначе менеджер решит, что сломалось. */
.gowhy{margin:var(--s1) 0 0;font:400 var(--fs-sm)/1.45 var(--sans);color:var(--danger);text-align:center}

/* Узкое окно: колонки встают друг под друга, ничего не сжимается до нечитаемого.
   Итог с кнопкой при этом остаются липкими и видны на любом экране (Н8). */
@media (max-width:1400px){
  .cols{grid-template-columns:minmax(0,1fr) 480px}
}
@media (max-width:1100px){
  .cols{grid-template-columns:1fr}
  .side{border-left:0;border-top:1px solid var(--border)}
}