/* ==========================================================================
   Калькулятор оклейки — стили сцены, списка деталей и итоговой строки.
   Собирается из web/calculator.html скриптом tools/build_calc.py,
   руками не правится: правки затрутся при следующей сборке.
   Цвета берутся из site.css.
   ========================================================================== */


/* PURE — калькулятор стоимости детейлинга, 3D.
   Цены и контакты — в блоке PRICES / CONTACT.
   Машина собрана в коде (buildCar): её можно заменить загрузчиком GLTF,
   проставив те же userData.part, остальное трогать не придётся. */
:root{--radius:14px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--void);color:var(--plat);
  font-family:"Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.5;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
.wrap{max-width:1180px;margin:0 auto;padding:18px 16px 24px}



.types{display:flex;gap:6px;margin:14px 0}
.type{flex:1;min-height:46px;padding:5px 8px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);color:var(--steel);font:inherit;
  cursor:pointer;display:grid;place-items:center;
  transition:border-color .15s,background .15s,color .15s}
/* Ширина у всех иконок одна, высота своя: масштаб общий, и разница между
   седаном, кроссовером и бусом видна сама по себе. Ширину ограничиваем: на
   всю кнопку картинка растягивалась в баннер и перетягивала на себя весь
   верх страницы, хотя это переключатель на три положения. */
.type img{display:block;width:min(100%,62px);height:auto}
.type[aria-pressed="true"]{border-color:var(--plat);background:var(--panel-2);color:var(--plat)}
.type:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.type:disabled{cursor:default;opacity:.34;border-style:dashed}
.cols{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.cols{grid-template-columns:minmax(0,1fr) 372px;gap:24px;align-items:start}}
@media(max-width:899px){
  /* блочная раскладка вместо сетки: элемент сетки может липнуть только внутри
     своей ячейки, а она ровно по его высоте — ездить некуда */
  .cols{display:block}
  .cols > .stage{margin-bottom:16px}
}
/* На телефоне сцена занимает ровно остаток первого экрана: шапка, кнопки и
   нижняя панель известны, поэтому вычитаем их и прокрутка не нужна, чтобы
   увидеть машину целиком. svh — высота без адресной строки браузера. */
.stage{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  height:calc(100vh - 286px);height:calc(100svh - 286px);
  min-height:240px;max-height:640px}
@media(min-width:900px){.stage{height:70vh;min-height:500px;max-height:none}
  /* машина остаётся на виду, пока листаешь прайс: иначе выбираешь вслепую и
     не видишь, куда подлетела камера */
  .stage{position:sticky;top:16px}}
@media(max-width:899px){
  .stage{position:sticky;top:0;z-index:5;transition:height .25s ease}
  /* прокрутил список — машина ужимается, но остаётся перед глазами */
  body.compact .stage{height:34vh;min-height:190px}
}
.stage canvas{display:block;width:100%;height:100%;touch-action:none}
.badge{position:absolute;left:12px;top:12px;font-size:.74rem;color:var(--dim);
  background:rgba(14,17,20,.7);padding:5px 9px;border-radius:8px;pointer-events:none}
.icon{position:absolute;right:12px;top:12px;width:38px;height:38px;border:1px solid var(--line);
  border-radius:10px;background:rgba(14,17,20,.7);color:var(--steel);cursor:pointer;
  display:grid;place-items:center;font:inherit;font-size:1rem;
  transition:color .15s,border-color .15s}
.icon:hover{color:var(--plat);border-color:#39424E}
.icon.second{top:58px}
.icon.third{top:104px}
.icon svg{width:20px;height:20px;display:block}
.icon[aria-pressed="true"]{color:var(--plat);border-color:var(--plat)}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);
  font-size:.9rem;background:var(--panel);text-align:center;padding:20px}
.list{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.grp{display:flex;align-items:center;gap:10px;width:100%;background:var(--panel);
     border:0;padding:13px 14px;font:inherit;font-size:.72rem;letter-spacing:.12em;
     text-transform:uppercase;color:var(--dim);cursor:pointer;text-align:left;
     transition:color .15s}
.grp:hover{color:var(--steel)}
.grp:focus-visible{outline:2px solid var(--ice);outline-offset:-2px}
.grp .gname{flex:1}
.grp .gcnt{letter-spacing:0;text-transform:none;font-size:.76rem;color:var(--steel)}
.grp.has .gcnt{color:var(--ice)}
.grp .gchev{width:14px;height:14px;flex:none;transition:transform .18s}
.grp[aria-expanded="true"] .gchev{transform:rotate(180deg)}
.grp-body{display:flex;flex-direction:column;gap:1px}
.grp-body[hidden]{display:none}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--panel);
  border:0;width:100%;text-align:left;font:inherit;color:var(--plat);cursor:pointer;
  min-height:50px;transition:background .15s}
.row:hover{background:var(--panel-2)}
.row:focus-visible{outline:2px solid var(--ice);outline-offset:-2px}
.box{width:22px;height:22px;flex:none;border:1.5px solid #3C4553;border-radius:6px;
  display:grid;place-items:center;transition:background .15s,border-color .15s}
.box svg{width:13px;height:13px;opacity:0;transition:opacity .15s}
.row[aria-pressed="true"] .box{background:var(--ice);border-color:var(--ice)}
.row[aria-pressed="true"] .box svg{opacity:1}
.row .nm{flex:1;min-width:0}
.row .pair{display:block;font-size:.75rem;color:var(--dim);margin-top:1px}
.row .pr{color:var(--steel);font-variant-numeric:tabular-nums;white-space:nowrap}
.row:disabled{cursor:default}
.row:disabled .nm{color:var(--steel)}
.row:disabled .pr{color:var(--dim);font-style:italic}
.row:disabled .box{opacity:.4}
.byn{width:.615em;height:.76em;fill:currentColor;margin-left:.24em;vertical-align:0}
.row[aria-pressed="true"] .pr{color:var(--plat)}
.presets{display:flex;gap:8px;margin-bottom:10px}
.preset{flex:1;min-height:58px;padding:8px 10px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel);color:var(--plat);font:inherit;
  cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px;
  transition:border-color .15s,background .15s}
.preset:hover{border-color:#39424E;background:var(--panel-2)}
.preset:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.preset .pname{font-size:.92rem;font-weight:500}
.preset .psum{font-size:.78rem;color:var(--steel);font-variant-numeric:tabular-nums}
.tools{display:flex;gap:8px;margin-top:12px}
.tool{flex:1;min-height:44px;border:1px solid var(--line);border-radius:10px;
  background:transparent;color:var(--steel);font:inherit;font-size:.86rem;cursor:pointer;
  transition:color .15s,border-color .15s}
.tool:hover{color:var(--plat);border-color:#39424E}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(14,17,20,.94);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.bar-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:12px}
.sum{flex:1;min-width:0}
.sum .lbl{font-size:.75rem;color:var(--dim);display:block}
.sum .val{font-size:1.5rem;font-weight:600;color:var(--plat);
  font-variant-numeric:tabular-nums;line-height:1.15}
.sum .cnt{font-size:.78rem;color:var(--steel)}
.c-order{min-height:50px;padding:0 20px;border:0;border-radius:12px;background:var(--ice);
  color:#0B1017;font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;
  white-space:nowrap;transition:filter .15s,opacity .15s}
.c-order:hover{filter:brightness(1.08)}
.c-order:disabled{opacity:.35;cursor:default}
@media(max-width:400px){.sum .val{font-size:1.28rem}.c-order{padding:0 14px;font-size:.9rem}}


/* ==========================================================================
   Обвязка: как калькулятор ведёт себя внутри сайта.

   Главный сценарий — телефон: сцена липнет к верху и ужимается при прокрутке
   списка, итог и кнопка всегда внизу. На большом экране страница помещается
   ровно в один экран и не прокручивается вовсе.
   ========================================================================== */

:root { --bar-h: 82px; }

/* ==========================================================================
   Приведение к оформлению сайта.
   Калькулятор рисовался отдельно и весь на скруглениях, сайт — строго
   прямоугольный, с моноширинными подписями и ледяной заливкой на главном
   действии. Здесь калькулятор переводится на тот же язык.
   ========================================================================== */

/* Гексагональный фон — тот же, что в секциях сайта.

   Там его даёт `.section--hex::before`, но калькулятор сложен не секциями:
   это одна сплошная рабочая область, а на большом экране она ещё и не
   прокручивается. Поэтому фон здесь отдельным слоем на всё окно, за
   содержимым (`z-index:-1`). Плотность и прозрачность — как на сайте, чтобы
   переход со страницы услуги на калькулятор не читался как смена фона. */
.hex-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/hex.svg") repeat;
  background-size: 190px auto;
  opacity: .028;
  mask-image: radial-gradient(120% 88% at 50% 0%, #000 18%, transparent 76%);
}

/* ни одного скругления, как и везде на сайте */
.stage, .list, .type, .preset, .tool, .icon, .badge, .box, .c-order { border-radius: 0; }

/* мелкие подписи — моноширинные, как .meta на сайте */
.badge, .grp, .tool, .sum .lbl, .loading, .c-order {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.badge {
  left: 14px; top: 14px; padding: 7px 11px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(11, 13, 16, .78); backdrop-filter: blur(4px);
}
.grp { font-size: 11px; letter-spacing: .14em; padding: 14px 16px; }
.grp .gcnt { font-family: "Golos Text", sans-serif; letter-spacing: 0; }
.loading { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }

/* кнопки поверх сцены — рамка и наведение как у .icon-link в шапке */
.icon { right: 14px; top: 14px; width: 40px; height: 40px; background: rgba(11, 13, 16, .72); }
.icon.second { top: 62px; }
.icon.third { top: 110px; }
.icon:hover { color: var(--plat); border-color: var(--line-2); }
.icon[aria-pressed="true"] { color: var(--ice); border-color: var(--ice); }

/* выбор кузова: иконки — белые контуры на прозрачном, поэтому состояние
   показываем яркостью контура и рамкой кнопки, ничего перекрашивать не нужно.
   Ширина картинки ограничена: во всю кнопку это был баннер на пол-экрана,
   а нужен переключатель на три положения. */
.types { gap: 6px; }
.type { padding: 5px 8px; min-height: 44px; }
.type img {
  width: 100%; max-width: 62px; height: auto; object-fit: contain;
  opacity: .34;
  transition: opacity .25s var(--ease);
}
.type[aria-pressed="true"] { border-color: var(--ice); background: var(--panel-2); }
.type[aria-pressed="true"] img { opacity: 1; }
.type:hover:not(:disabled):not([aria-pressed="true"]) { border-color: var(--line-2); }
.type:hover:not(:disabled) img { opacity: .62; }
.type:disabled img { opacity: .2; }

/* готовые наборы и вспомогательные кнопки */
.preset:hover { border-color: var(--line-2); background: var(--panel-2); }
.preset.on { border-color: var(--ice); }
.tool {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  min-height: 46px; color: var(--steel);
}
.tool:hover { color: var(--ice); border-color: var(--ice); }

/* галочка у детали — квадратная */
.box { border-color: var(--line-2); }

/* главное действие — ледяная заливка с графитовым текстом, как .btn--ice */
.c-order {
  min-height: 48px; padding: 0 26px; color: var(--void);
  font-weight: 500; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
}
.c-order:hover { filter: none; background: #fff; }


.wrap { max-width: none; width: 100%; margin: 0; padding: 0 var(--gut) 28px; }

.calc-top { display: grid; gap: 14px; padding: clamp(18px, 3vw, 28px) 0 14px; }
.calc-intro { display: grid; gap: 9px; }
.calc-intro h1 {
  font-family: "Unbounded", sans-serif; font-weight: 600;
  font-size: clamp(25px, 5.6vw, 40px); line-height: 1; letter-spacing: -.03em;
  text-transform: uppercase; margin: 0;
}
.calc-intro .lede { font-size: 15px; max-width: 46ch; }
.types { margin: 0; }

/* знак рубля — часть числа: site.css делает все svg блочными, здесь нельзя */
.byn { display: inline-block; vertical-align: -.08em; }
.pr, .psum, .val, .sum .val, .pcost { white-space: nowrap; }
.row .pr { flex: none; }

/* готовый набор: примечание сверху, цена отдельной строкой */
.preset { gap: 4px; }
.preset .psum { display: flex; flex-direction: column; gap: 3px; }
.pnote { color: var(--dim); line-height: 1.3; white-space: normal; }
.pcost { color: var(--plat); font-weight: 600; font-size: 1rem; }
.preset.on .pcost { color: var(--ice); }

/* итоговая строка */
.bar { background: rgba(11, 13, 16, .95); }
.bar-in { max-width: none; align-items: center; padding-inline: calc(var(--gut) - 16px); }
.sum { display: grid; gap: 1px; align-content: center; }
.sum .lbl { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.sum .val { font-family: "Unbounded", sans-serif; font-weight: 500; letter-spacing: -.025em; line-height: 1.05; }
.sum .cnt { font-size: 13px; color: var(--steel); }

/* --- телефон: главный сценарий ------------------------------------------- */
@media (max-width: 1059px) {
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
  /* до сцены должно быть как можно меньше: инструмент важнее вступления */
  .calc-top { padding: 14px 0 12px; gap: 10px; }
  .calc-intro { gap: 6px; }
  .calc-intro .crumbs { display: none; }
  .calc-intro h1 { font-size: clamp(22px, 6vw, 30px); }
  /* подсказка уже есть на самой сцене — не повторяем её текстом */
  .calc-intro .lede { display: none; }
  /* подсказка не должна налезать на кнопки сцены справа */
  .badge { max-width: calc(100% - 72px); }
  /* сцена липнет под шапкой и ужимается, когда листаешь список */
  .stage {
    position: sticky; top: var(--head-h); z-index: 5;
    height: 46vh; height: 46svh; min-height: 220px; max-height: none;
    margin-bottom: 14px;
  }
  body.compact .stage { height: 30vh; height: 30svh; min-height: 170px; }
  .presets { gap: 8px; }
  .tools { margin-bottom: 4px; }
  .foot { margin-bottom: calc(var(--bar-h) + 8px); }
}

@media (max-width: 560px) {
  .types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .type { min-height: 46px; padding: 5px 8px; }
  .presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preset { min-height: 0; padding: 10px 12px; }
  .pcost { font-size: .95rem; }
}

/* --- большой экран: одна страница без прокрутки --------------------------- */
@media (min-width: 1060px) and (min-height: 660px) {
  html, body { height: 100%; overflow: hidden; }
  body { padding-bottom: 0; }
  #main { height: calc(100svh - var(--head-h) - var(--bar-h)); display: flex; flex-direction: column; }
  .wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; }

  /* заголовок и выбор кузова — одной строкой, чтобы не съедать высоту */
  .calc-top {
    grid-template-columns: minmax(0, 1fr) minmax(228px, 24vw);
    align-items: center; gap: 28px; padding: 15px 0 13px; flex: none;
  }
  .calc-intro { gap: 5px; }
  .calc-intro h1 { font-size: clamp(22px, 1.9vw, 30px); }
  .calc-intro .lede { font-size: 13.5px; }
  .calc-intro .crumbs { font-size: 10.5px; }
  .type { min-height: 40px; }

  .cols { flex: 1; min-height: 0; align-items: stretch; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; }
  /* relative, а не static: кнопки поверх сцены привязаны к ней абсолютом */
  .stage { position: relative; height: auto; max-height: none; min-height: 0; margin-bottom: 0; }
  .cols > section:last-child { display: flex; flex-direction: column; min-height: 0; }
  .presets, .tools { flex: none; }
  .list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .list::-webkit-scrollbar { width: 6px; }
  .list::-webkit-scrollbar-thumb { background: var(--line); }

  /* подвал на этом экране не нужен: все ссылки есть в шапке */
  .foot { display: none; }
}

@media (min-width: 1400px) { .cols { grid-template-columns: minmax(0, 1fr) 440px; } }