/* =====================================================================
   Эйра · раздел «Для бизнеса» · прототип
   Основа: assets/ds/components.css (импортирует tokens-v2.css) и
   assets/ds/site-chrome.css (шапка, подвал, крошки, полоса проекта):
   копии prototypes-journal/system, обновляются node tools/sync.mjs.
   Здесь только то, чего в дизайн-системе нет: формы раздела, расчёт,
   документы. Кегли только из шкалы (--t-h1 … --t-caption).
   Правила: радиус 3px, линия 1px, теней нет, пилюль и чипов нет.
   Выбор виден линией под словом. Тёмная кнопка одна на экран, остальное ссылки.
   ===================================================================== */
:root { --own: #7a5a1f; --top-h: 69px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
.sr { position: absolute !important; }
.small a.textlink, .textlink.inl { font-size: inherit; min-height: 0; }

/* ---------- действие-ссылка (как в 3D-примерке) ---------- */
.textlink { font: 500 15px/1.3 var(--font-sans); color: var(--tide); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--tide) 55%, transparent); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; transition: color var(--d-hover); cursor: pointer; text-align: left; }
.textlink:hover { color: var(--tide-strong); text-decoration-color: currentColor; }
.textlink.quiet { color: var(--ink-2); text-decoration-color: var(--line-strong); }
.textlink[disabled] { opacity: .4; cursor: not-allowed; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.alt { display: flex; flex-wrap: wrap; gap: 0 24px; align-items: center; font-size: var(--t-small); color: var(--muted); }
.alt .textlink { font-size: var(--t-small); }

/* ---------- кадр ---------- */
.fig__img img { display: block; }
.fig figcaption { display: block; }

/* ---------- вкладки и варианты с линией (как в 3D-примерке) ---------- */
.tabs { display: flex; gap: 4px 26px; flex-wrap: wrap; }
.tab { position: relative; padding: 12px 0 9px; font: 500 15px var(--font-sans); color: var(--muted); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap; min-height: 44px; text-decoration: none; display: inline-flex; align-items: center; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"], .tab[aria-checked="true"] { color: var(--ink); border-bottom-color: var(--tide); }
.tabs.big .tab { font: 500 var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--ls-h3); padding: 14px 0 11px; }
.tabs.opts { gap: 2px 18px; }
.tabs.opts .tab { font: 500 var(--t-small) var(--font-sans); padding: 8px 0 6px; min-height: 40px; }
.tabbar { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 0 24px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.tiles { display: grid; gap: 6px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px 7px; color: var(--muted); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; text-align: center; font: 500 var(--t-caption)/1.2 var(--font-sans); min-height: 44px; border-radius: 2px; }
.tile:hover { color: var(--ink); }
.tile[aria-checked="true"] { color: var(--ink); border-bottom-color: var(--tide); }
.tiles.forms { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tiles.rays { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 420px; }
@media (max-width: 700px) { .tiles.forms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* миниатюры изделий: рендер той же 3D-сцены, что в 3D-примерке, на стене #e5e5dc */
.thumb { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 2px; overflow: hidden; background: var(--ground); position: relative; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile .thumb { opacity: .85; transition: opacity .2s; }
.tile:hover .thumb, .tile[aria-checked="true"] .thumb { opacity: 1; }
.swatches { display: flex; gap: 14px; flex-wrap: wrap; }
.swc { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 2px 6px; border-bottom: 2px solid transparent; font: 400 var(--t-caption)/1.2 var(--font-sans); color: var(--muted); width: 84px; text-align: center; transition: color .2s, border-color .2s; }
.swc i { display: block; width: 40px; height: 40px; border-radius: 2px; border: 1px solid rgb(15 34 38 / .22); }
.swc i.c-belyy { background: #f2f2ed; }
.swc i.c-chernyy { background: #26262b; }
.swc:hover { color: var(--ink); }
.swc[aria-checked="true"] { color: var(--ink); border-bottom-color: var(--tide); }
.qty { display: inline-flex; align-items: center; }
.qty button { width: 40px; height: 44px; font: 400 22px/1 var(--font-sans); color: var(--ink); border-radius: 2px; }
.qty button:hover { background: var(--paper); }
.qty button[disabled] { opacity: .35; cursor: not-allowed; }
.qty input { width: 52px; min-height: 40px; text-align: center; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; font: 500 16px var(--font-display); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; border-radius: 0; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tier { font: 500 var(--t-caption) var(--font-sans); color: var(--tide); white-space: nowrap; }
.tier.own { color: var(--own); }

/* ---------- формы ---------- */
.field { align-content: start; min-width: 0; }
.field > .lbl { font: 500 15px/1.3 var(--font-display); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field .opt { font-weight: 400; color: var(--muted); }
.select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230f2226' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.textarea::placeholder { color: var(--muted); }
.field.is-error .select, .field.is-error .textarea, .input[aria-invalid="true"] { border-color: var(--error); }
.row3, .row4 { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .row3 { grid-template-columns: 1fr 1fr 1fr; } .row4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .row4 { grid-template-columns: 4fr 4fr 3fr 3fr; } }
.check { cursor: pointer; min-height: 32px; font-size: 15px; }
.checks { display: grid; gap: 8px; }
@media (min-width: 700px) { .checks.two { grid-template-columns: 1fr 1fr; } }
.date { max-width: 260px; }

/* ---------- всплывашка, диалог, строка-вопрос ---------- */
.toast { position: fixed; left: 50%; bottom: 104px; transform: translate(-50%, 16px); background: var(--ink); color: var(--deep-text); border-radius: var(--radius); padding: 10px 16px; font-size: var(--t-small); opacity: 0; pointer-events: none; transition: .25s; z-index: 80; max-width: 90vw; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
dialog { border: 0; border-radius: var(--radius); padding: 0; max-width: min(680px, 94vw); width: 100%; background: var(--paper); color: var(--ink); }
dialog::backdrop { background: rgb(15 34 38 / .5); }
dialog .dh { padding: 22px 24px 6px; }
dialog h3 { margin: 0 0 6px; }
dialog p { margin: 0; color: var(--ink-2); font-size: var(--t-small); }
dialog textarea { display: block; width: calc(100% - 48px); margin: 12px 24px; height: 260px; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 12px; background: #fbfbf7; font: var(--t-caption)/1.5 ui-monospace, Consolas, monospace; resize: vertical; }
dialog .df { display: flex; gap: 4px 24px; justify-content: flex-end; padding: 0 24px 16px; flex-wrap: wrap; align-items: center; }
.notice { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 28px; border-left: 2px solid var(--tide); padding: 8px 0 8px 16px; margin: 0 0 24px; color: var(--ink); max-width: 980px; }
.notice p { margin: 0; }
.notice .acts { gap: 0 24px; }
.is-flash { animation: flash 1.6s var(--ease); }
@keyframes flash { 0% { background: color-mix(in srgb, var(--tide) 14%, transparent); } 100% { background: transparent; } }

/* =====================================================================
   ОДИН ШАБЛОН СТРАНИЦЫ: крошки → хиро → содержание → финал
   ===================================================================== */
.hx { padding-top: var(--s-6); }
.hx-top { align-items: end; row-gap: var(--s-5); }
.hx h1 { max-width: 16ch; }
.hx-side { display: grid; gap: 18px; align-content: end; padding-bottom: 6px; }
.hx-side .lead { max-width: 42ch; }
.hx-side .acts { gap: 10px 24px; }
.hx-note { font-size: var(--t-small); color: var(--muted); }
.hx-fig { margin: var(--s-6) auto 0; }
.hx-fig .fig__img { aspect-ratio: 2.6 / 1; }
.hx-fig .fig__img img { object-position: 50% 35%; }
@media (min-width: 960px) { .hx h1 { grid-column: 1 / 8; max-width: none; } .hx-side { grid-column: 8 / -1; } }
@media (max-width: 700px) { .hx-fig .fig__img { aspect-ratio: 4 / 3; } .hx-fig .fig__img img { object-position: 50% 40%; } .hub-hero .fig__img img { object-position: 22% 40%; } }

.sx { padding-block: var(--pause-m); }
.sx--s { padding-block: var(--pause-s); }
.sx + .sx { border-top: 1px solid var(--line); }
.sx-head { display: grid; gap: 14px; margin-bottom: var(--s-7); }
.sx-head h2 { max-width: 20ch; }
.sx-head p { color: var(--ink-2); max-width: 52ch; font-size: var(--t-lead); }
.after { margin-top: 24px; }

/* финал: один компонент на все страницы */
.fin__in { display: grid; gap: var(--s-6) var(--gutter); align-items: start; }
.fin__t { display: grid; gap: 18px; align-content: start; }
.fin__t h2 { max-width: 16ch; }
.fin__t > p:not(.alt) { color: var(--ink-2); font-size: var(--t-lead); max-width: 42ch; }
@media (min-width: 960px) { .fin--form { grid-template-columns: 5fr 7fr; } }

/* ---------- хаб: коллекции ---------- */
.cts { display: grid; gap: var(--s-7) var(--gutter); }
@media (min-width: 960px) { .cts { grid-template-columns: 7fr 5fr; } .ct-wide { grid-column: 1 / -1; } }
.ct { display: grid; gap: 16px; align-content: start; }
.ct .fig__img { height: clamp(240px, 30vw, 430px); }
.ct .fig__img img { transition: transform var(--d-image) var(--ease); }
.ct a.fig:hover .fig__img img { transform: scale(1.02); }
a.fig { display: block; text-decoration: none; color: inherit; }
@media (max-width: 959px) { .ct .fig.wide .fig__img { height: auto; aspect-ratio: 1200 / 678; } }
.ct p { color: var(--ink-2); max-width: 46ch; }
.ct-cols { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.ct-cols a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; }
.ct-cols li:last-child a { border-bottom: 1px solid var(--line); }
.ct-cols b { font: 500 var(--t-body)/1.3 var(--font-display); letter-spacing: var(--ls-h3); transition: color var(--d-hover); }
.ct-cols span { font-size: var(--t-small); color: var(--muted); text-align: right; }
.ct-cols span.on { color: var(--tide); }
.ct-cols a:hover b { color: var(--tide); }
/* типографская плитка: для «Своей формы» и коллекций без кадра */
.type-tile { border-top: 1px solid var(--ink); padding-top: 20px; display: grid; gap: 12px 40px; align-content: start; }
.type-tile .tag { font-size: var(--t-small); color: var(--muted); }
.type-tile p { color: var(--ink-2); max-width: 46ch; }
@media (min-width: 960px) { .ct-wide.type-tile { grid-template-columns: 5fr 4fr 3fr; align-items: baseline; } .ct-wide.type-tile .textlink { justify-self: end; } }

/* ---------- хаб: сегменты плитками ---------- */
.sgs { display: grid; gap: var(--s-6) var(--gutter); }
@media (min-width: 700px) { .sgs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .sgs { grid-template-columns: 5fr 4fr 3fr; } .sgs.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-6); } }
.sg { display: grid; gap: 10px; text-decoration: none; color: inherit; align-content: start; }
.sg .fig__img { height: clamp(200px, 22vw, 320px); }
.sgs.four .sg .fig__img { height: clamp(160px, 15vw, 220px); }
.sg .fig__img img { transition: transform var(--d-image) var(--ease); }
.sg:hover .fig__img img { transform: scale(1.02); }
.sg h3 { transition: color var(--d-hover); }
.sg:hover h3 { color: var(--tide); }
.sg p { color: var(--ink-2); font-size: 16px; max-width: 40ch; }

/* ---------- сегмент: три варианта ---------- */
.pk { display: grid; gap: var(--s-6) var(--gutter); }
@media (min-width: 960px) { .pk { grid-template-columns: 5fr 4fr 3fr; } }
.pk-it { display: grid; gap: 12px; align-content: start; }
.pk-it .fig__img { height: clamp(220px, 22vw, 320px); }
.pk-it .fig__img img { transition: transform var(--d-image) var(--ease); }
.pk-it a.fig:hover .fig__img img { transform: scale(1.02); }
.pk-it .col { font-size: var(--t-small); color: var(--muted); }
.pk-it p { color: var(--ink-2); font-size: 16px; max-width: 44ch; }
.pk-it .pr { font: 500 var(--t-h3)/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.pk-it .pr small { font: 400 var(--t-caption) var(--font-sans); color: var(--muted); margin-left: 6px; }
.pk-it .inproj { font-size: var(--t-small); color: var(--tide); }

/* ---------- шаги: один компонент .steps из дизайн-системы ---------- */
.steps .no { padding-top: 6px; }

/* ---------- «Как мы работаем» ---------- */
.nothave { display: grid; gap: 0; }
.nothave > div { display: grid; gap: 6px var(--gutter); padding-block: 18px; border-top: 1px solid var(--line); }
.nothave > div:last-child { border-bottom: 1px solid var(--line); }
.nothave b { font: 500 var(--t-h3)/1.25 var(--font-display); letter-spacing: var(--ls-h3); }
.nothave p { color: var(--ink-2); max-width: 60ch; }
@media (min-width: 900px) { .nothave > div { grid-template-columns: 4fr 8fr; align-items: baseline; } }

/* ---------- форма «Прислать фото стены» ---------- */
.vz { display: grid; gap: var(--s-6) var(--gutter); align-items: start; }
@media (min-width: 960px) { .vz { grid-template-columns: 5fr 7fr; } }
.vz-intro { display: grid; gap: 18px; align-content: start; }
.vz-intro h1 { max-width: 14ch; }
.vz-intro > p { color: var(--ink-2); font-size: var(--t-lead); max-width: 40ch; }
.vz-more { display: grid; gap: 18px; align-content: start; }
.vz-get { list-style: none; margin: 0; padding: 0; display: grid; }
.vz-get li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.vz-get li:last-child { border-bottom: 1px solid var(--line); }
.vz-get b { color: var(--ink); font-weight: 500; }
.vz-cap { font: 500 15px var(--font-display); }
.viz { display: grid; gap: 22px; }
.viz-photo { border-left: 2px solid var(--tide); padding: 2px 0 2px 16px; display: grid; gap: 4px; }
.viz-photo b { font: 500 15px/1.3 var(--font-display); }
.viz-photo p { font-size: var(--t-small); color: var(--ink-2); max-width: 60ch; }
.viz-go { display: grid; gap: 10px; justify-items: start; padding-top: 6px; }
.viz-done { display: grid; gap: 18px; outline: none; }
.viz-steps { margin: 0; padding: 0; list-style: none; counter-reset: v; display: grid; }
.viz-steps li { counter-increment: v; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.viz-steps li::before { content: counter(v, decimal-leading-zero); font: 500 15px/1.5 var(--font-display); color: var(--tide); letter-spacing: .06em; }
.viz-steps b { color: var(--ink); font-weight: 500; }
.textarea.mono { font: var(--t-caption)/1.55 ui-monospace, Consolas, monospace; background: #fbfbf7; }
/* телефон: форма главного действия на первом экране, остальное под ней (аудит Б4) */
@media (max-width: 959px) {
  .vz-page .vz { gap: 28px; }
  .vz-page .vz-intro { gap: 10px; }
  .vz-page .vz-intro > p { font-size: 16px; }
  .vz-page .hx-pad { padding-top: 12px; }
}

/* =====================================================================
   РАСЧЁТ
   ===================================================================== */
.page-head { padding-block: var(--s-6) var(--s-2); display: grid; gap: 16px; }
.page-head .lead { max-width: 60ch; }
.calc { display: grid; gap: 36px var(--gutter); align-items: start; padding-bottom: var(--pause-m); }
@media (min-width: 1100px) { .calc { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .calc .side { position: sticky; top: calc(var(--top-h) + 60px); } }
.proj { display: grid; gap: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.wall { padding-block: 28px 22px; border-bottom: 1px solid var(--line-strong); scroll-margin-top: 140px; }
.wall-head { display: grid; gap: 12px 20px; align-items: end; margin-bottom: 14px; }
@media (min-width: 700px) { .wall-head { grid-template-columns: minmax(0, 1fr) minmax(0, 230px) auto; } }
.wall-no { display: block; font: 500 var(--t-caption)/1 var(--font-display); letter-spacing: var(--ls-num); color: var(--tide); margin-bottom: 4px; }
.wname { font: 500 var(--t-h3)/1.15 var(--font-display); letter-spacing: var(--ls-display); border: 0; border-bottom: 1px dashed var(--line-strong); background: transparent; padding: 4px 0; width: 100%; min-height: 44px; border-radius: 0; }
.wname:hover { border-bottom-color: var(--ink); }
.wname:focus { outline: none; border-bottom: 1px solid var(--tide); }
.wsum { font: 500 var(--t-h3)/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; padding-bottom: 8px; }
.wsum small { display: block; font: 400 var(--t-caption) var(--font-sans); color: var(--muted); margin-top: 4px; }
.wall-foot { display: flex; flex-wrap: wrap; gap: 0 26px; align-items: center; margin-top: 6px; }
.wall-warn { border-left: 2px solid var(--error); padding: 10px 0 10px 16px; color: var(--ink); max-width: 62ch; margin: 6px 0 12px; }
.wall-warn b { color: var(--error); font-weight: 500; }
.wall.is-off .prows { opacity: .45; }
.prows { list-style: none; margin: 0; padding: 0; }
.prow { border-top: 1px solid var(--line); }
.prow:last-child { border-bottom: 1px solid var(--line); }
.prow-main { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto; gap: 6px 16px; align-items: center; padding-block: 8px; }
.prow-main .thumb { width: 84px; }
.prow .t { font: 500 16px/1.25 var(--font-sans); }
.prow .t small { display: block; font: 400 var(--t-caption)/1.4 var(--font-sans); color: var(--muted); margin-top: 2px; }
.prow .pr { font: 500 16px/1.2 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 104px; }
.prow .pr small { display: block; font: 400 var(--t-caption) var(--font-sans); color: var(--muted); }
.prow .ra { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 0 22px; align-items: center; margin-top: -6px; }
.prow .ra .textlink { font-size: var(--t-small); min-height: 36px; }
.prow .note { grid-column: 2 / -1; font-size: var(--t-small); color: var(--ink-2); }
.prow .note .textlink { font-size: var(--t-small); min-height: 0; }
.prow.is-open { background: var(--paper); }
.prow.is-open .prow-main { padding-inline: 10px; }
@media (max-width: 640px) {
  .prow-main { grid-template-columns: 64px minmax(0, 1fr) auto; row-gap: 4px; column-gap: 12px; }
  .prow-main .thumb { width: 64px; grid-row: 1 / 3; align-self: start; margin-top: 4px; }
  .prow .t { grid-column: 2 / -1; }
  .prow .qty { grid-column: 2; justify-self: start; margin-left: -10px; }
  .prow .pr { grid-column: 3; min-width: 0; }
  .prow .ra { grid-column: 1 / -1; margin-top: 0; }
  .prow .note { grid-column: 1 / -1; }
  .tabs.big { gap: 4px 20px; }
}
.editor { padding: 6px 10px 20px; display: grid; gap: 18px; }
.editor .blk { display: grid; gap: 8px; }
.editor .lbl { display: flex; justify-content: space-between; gap: 12px; font: 500 15px var(--font-display); }
.editor .lbl .v { font: 400 var(--t-small) var(--font-sans); color: var(--ink-2); text-align: right; }
.editor .say { font-size: var(--t-small); color: var(--muted); max-width: 56ch; margin-top: -4px; }
.addrow { display: flex; flex-wrap: wrap; gap: 0 28px; }
.wall-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 28px; padding-top: 6px; }
.wall-foot .textlink.quiet, .prow .ra .textlink.quiet { text-decoration-color: transparent; color: var(--muted); }
.wall-foot .textlink.quiet:hover, .prow .ra .textlink.quiet:hover { text-decoration-color: currentColor; color: var(--ink); }
.addwall { padding-top: 20px; display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: center; }
.imp { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.imp summary { cursor: pointer; font: 500 var(--t-small) var(--font-sans); color: var(--ink-2); min-height: 44px; display: flex; align-items: center; }
.imp .row { display: grid; gap: 12px; align-items: end; margin-top: 8px; }
.imp .textarea { min-height: 64px; }
@media (min-width: 700px) { .imp .row { grid-template-columns: minmax(0, 1fr) auto; } }

.side-in { display: grid; gap: 18px; }
.sumbox { background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 22px 22px 18px; display: grid; gap: 16px; }
.wtot { list-style: none; margin: 0; padding: 0; display: grid; }
.wtot li { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-top: 1px solid var(--line); font-size: 15px; }
.wtot li span:last-child { font: 500 15px var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wtot li.off { color: var(--muted); }
.wtot a { color: inherit; text-decoration: none; }
.wtot a:hover { color: var(--tide); }
.grand { border-top: 1px solid var(--ink); padding-top: 12px; display: grid; gap: 6px; }
.grand b { font: 500 var(--t-num)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.grand span { font-size: var(--t-small); color: var(--muted); }
.sumbox .notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--t-small); color: var(--ink-2); }
.sumbox .btn { width: 100%; }
.sumbox .acts { gap: 0 22px; }
.sumbox .acts .textlink { font-size: var(--t-small); }
@media (max-width: 959px) { .sumbox .btn { display: none; } }

/* подбор под стену */
.pod { display: grid; gap: 36px; }
.pod-in { display: grid; gap: 22px; align-content: start; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.vars { display: grid; gap: 36px; }
.var { display: grid; gap: 16px var(--gutter); padding-top: 24px; border-top: 1px solid var(--ink); align-items: start; }
.var:first-child { padding-top: 0; border-top: 0; }
.var-body { display: grid; gap: 14px; align-content: start; }
@media (min-width: 900px) { .var { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.var-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.var-head .p { font: 500 var(--t-h3) var(--font-display); font-variant-numeric: tabular-nums; }
.var p { color: var(--ink-2); max-width: 62ch; }
.wallsvg { background: var(--sand); border-radius: var(--radius); padding: 12px; overflow: hidden; }
.wallsvg svg { width: 100%; height: auto; }
.var .items, .pk-items { list-style: none; margin: 0; padding: 0; display: grid; }
.var .items li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding-block: 6px; border-top: 1px solid var(--line); font-size: 15px; }
.var .items .p { font: 500 15px var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.var .items small { display: block; color: var(--muted); font-size: var(--t-caption); }
.empty { padding: 16px 0; color: var(--ink-2); }

/* =====================================================================
   ДОКУМЕНТ A4: КП и ТЗ. На экране предпросмотр, в печати лист.
   Внутри листа свои кегли в pt: это бумага, а не экран.
   ===================================================================== */
.docbar { padding-block: var(--s-6) 28px; display: grid; gap: 20px; }
.docbar .acts { gap: 6px 26px; }
.docbar .row3 { max-width: 980px; }
.docpage { background: var(--sand); padding: clamp(12px, 3vw, 40px) 0 var(--pause-m); border-top: 1px solid var(--line); }
.doc { width: 210mm; max-width: calc(100vw - 24px); margin: 0 auto; background: #fbfbf7; color: #0f2226; padding: 16mm 15mm 18mm; font: 400 10.5pt/1.45 var(--font-sans); border-radius: 2px; overflow-wrap: anywhere; }
.doc + .doc { margin-top: 24px; }
.doc h1 { font: 500 22pt/1.1 var(--font-display); letter-spacing: -.02em; margin: 0; }
.doc h2 { font: 500 13pt/1.2 var(--font-display); letter-spacing: -.01em; margin: 0 0 3mm; }
.doc h2.mt { margin-top: 5mm; }
.doc .dhead { display: grid; grid-template-columns: 1fr auto; gap: 6mm; align-items: start; padding-bottom: 5mm; border-bottom: .3mm solid #0f2226; }
.doc .dhead img { height: 9mm; width: auto; }
.doc .req { text-align: right; font-size: 8.5pt; line-height: 1.5; color: #33494c; }
.doc .req b { color: #0f2226; font-weight: 500; }
.doc .dtitle { display: grid; gap: 2mm; padding-block: 6mm 4mm; }
.doc .dtitle p { color: #33494c; }
.doc .meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm 6mm; padding: 3.5mm 0; border-top: .2mm solid #c3c4b7; border-bottom: .2mm solid #c3c4b7; font-size: 9.5pt; }
.doc .meta span { display: block; color: #4f6364; font-size: 8pt; }
.doc .meta b { font-weight: 500; }
.doc .meta.m4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.doc table { width: 100%; border-collapse: collapse; margin-top: 3mm; font-size: 9pt; }
.doc thead th { font: 500 8pt/1.2 var(--font-sans); color: #4f6364; text-align: left; padding: 0 2mm 2mm 0; border-bottom: .3mm solid #0f2226; vertical-align: bottom; }
.doc td { padding: 2mm 2mm 2mm 0; border-bottom: .2mm solid #c3c4b7; vertical-align: top; }
.doc td.r, .doc th.r { text-align: right; white-space: nowrap; padding-right: 0; padding-left: 2mm; }
.doc td.n { color: #4f6364; width: 6mm; }
.doc td.im { width: 20mm; }
.doc td.im img { width: 18mm; height: 12mm; object-fit: cover; border-radius: .6mm; background: #e5e5dc; }
.doc td small { display: block; color: #4f6364; font-size: 7.8pt; line-height: 1.35; margin-top: .6mm; }
.doc td small.m-only { display: none; }
.doc tr.ws td { border-bottom: .3mm solid #787d72; font-weight: 500; }
.doc tr { break-inside: avoid; page-break-inside: avoid; }
/* стена в КП: кадр или схема, потом её строки */
.doc .dwall { margin-top: 7mm; break-inside: avoid; page-break-inside: avoid; }
.doc .dwall-h { display: flex; justify-content: space-between; align-items: baseline; gap: 4mm; padding-bottom: 2mm; }
.doc .dwall-h b { font: 500 11pt var(--font-display); }
.doc .dwall-h span { font-size: 8.5pt; color: #4f6364; }
.doc .dwall-fig { margin: 0 0 1mm; }
.doc .dwall-fig .im { background: #e5e5dc; border-radius: .6mm; overflow: hidden; height: 52mm; display: flex; align-items: center; justify-content: center; }
.doc .dwall-fig img { width: 100%; height: 100%; object-fit: cover; }
.doc .dwall-fig svg { width: auto; height: 100%; max-width: 100%; }
.doc .dwall-fig figcaption { font-size: 7.8pt; color: #4f6364; padding-top: 1.2mm; }
.doc .dwall-fig figcaption b { color: #0f2226; font-weight: 500; }
.doc .totals { margin-top: 6mm; display: grid; justify-content: end; gap: 1.5mm; text-align: right; }
.doc .totals .g { font: 500 17pt/1.1 var(--font-display); letter-spacing: -.02em; }
.doc .totals small { color: #4f6364; font-size: 8.5pt; }
.doc .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; margin-top: 7mm; }
.doc .block { break-inside: avoid; page-break-inside: avoid; margin-top: 7mm; }
.doc h2 { break-after: avoid; page-break-after: avoid; }
.doc ul.dl { list-style: none; margin: 0; padding: 0; font-size: 9pt; }
.doc ul.dl li { padding: 1.4mm 0; border-top: .2mm solid #c3c4b7; break-inside: avoid; page-break-inside: avoid; }
.doc ul.dl li b { font-weight: 500; }
.doc .dfoot { margin-top: 8mm; padding-top: 3mm; border-top: .3mm solid #0f2226; display: grid; grid-template-columns: 1fr auto; gap: 4mm; font-size: 8.5pt; color: #33494c; }
.doc .dfoot .r { text-align: right; }
.doc .dfoot b { font-weight: 500; color: #0f2226; }
.doc .link { font: 8pt/1.35 ui-monospace, Consolas, monospace; color: #33494c; word-break: break-all; }
.doc .kv { display: grid; grid-template-columns: 44mm 1fr; gap: 0 5mm; font-size: 9.5pt; }
.doc .kv > div { display: contents; }
.doc .kv dt { color: #4f6364; padding: 1.6mm 0; border-top: .2mm solid #c3c4b7; }
.doc .kv dd { margin: 0; padding: 1.6mm 0; border-top: .2mm solid #c3c4b7; font-weight: 500; }
.doc .kv dd.blank { height: 8mm; }
.doc .kv dd.blank.tall { height: 16mm; }
.doc .kv dd .hintv { font-weight: 400; color: #4f6364; font-size: 8.5pt; }
.doc.blank .block { margin-top: 5mm; }
.doc.blank .kv dt { padding: 1.1mm 0; }
.doc.blank .kv dd { padding: 0; }
.doc.blank .kv dd.blank { height: 7mm; display: flex; align-items: center; }
.doc.blank .kv dd.blank.tall { height: 11mm; align-items: flex-start; }
.doc.blank .dtitle { padding-block: 5mm 2mm; }
.doc.blank .dfoot { margin-top: 3mm; }
.doc.blank .note { margin-top: 2mm; }
.doc.blank .dhead { padding-bottom: 3mm; }
.doc .dtitle.att { padding-top: 0; }
.doc .dtitle.att h1 { font-size: 16pt; }
.doc .photo img { max-width: 100%; max-height: 70mm; margin-top: 2mm; border-radius: .6mm; }
.doc .note { font-size: 8.5pt; color: #4f6364; margin-top: 3mm; }
@media screen and (max-width: 820px) {
  .doc { padding: 7vw 5vw; font-size: 13px; }
  .doc .dhead { grid-template-columns: 1fr; }
  .doc .req { text-align: left; }
  .doc .meta, .doc .meta.m4 { grid-template-columns: 1fr 1fr; }
  .doc .cols { grid-template-columns: 1fr; }
  .doc .kv { grid-template-columns: 38% 1fr; }
  .doc table { font-size: 12px; }
  .doc td.im, .doc thead th.im { display: none; }
  .doc thead th:nth-child(4), .doc thead th:nth-child(6), .doc tbody tr:not(.ws) td:nth-child(4), .doc tbody tr:not(.ws) td:nth-child(6) { display: none; }
  .doc td small.m-only { display: block; }
  .doc .dwall-fig .im { height: 44vw; }
  .doc .dfoot { grid-template-columns: 1fr; }
  .doc .dfoot .r { text-align: left; }
}

/* ---------- ТЗ-конструктор ---------- */
.tz { display: grid; gap: 36px var(--gutter); align-items: start; padding-bottom: var(--pause-m); }
@media (min-width: 1100px) { .tz { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); } .tz .tz-nav { position: sticky; top: calc(var(--top-h) + 60px); } }
.tz-nav ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); display: grid; }
.tz-nav li button { display: grid; grid-template-columns: 30px 1fr; gap: 6px; align-items: baseline; width: 100%; text-align: left; padding: 9px 0 9px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); font: 500 15px var(--font-sans); min-height: 44px; }
.tz-nav li button b { font: 500 var(--t-caption) var(--font-display); letter-spacing: var(--ls-num); color: var(--tide); }
.tz-nav li button:hover { color: var(--ink); }
.tz-nav li button[aria-current="step"] { color: var(--ink); border-left-color: var(--tide); }
.tz-nav li button.done { color: var(--ink-2); }
.progress { height: 2px; background: var(--line); margin-top: 16px; position: relative; overflow: hidden; }
.progress progress { position: absolute; inset: 0; width: 100%; height: 2px; appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--tide); }
.progress progress::-webkit-progress-bar { background: transparent; }
.progress progress::-webkit-progress-value { background: var(--tide); transition: width var(--d-state) var(--ease); }
.progress progress::-moz-progress-bar { background: var(--tide); }
.progress-cap { font-size: var(--t-small); color: var(--muted); margin-top: 8px; }
@media (max-width: 1099px) {
  .tz-nav ol { border-left: 0; display: flex; gap: 4px 18px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .tz-nav li button { grid-template-columns: auto auto; padding: 10px 0 8px; margin: 0; border-left: 0; border-bottom: 2px solid transparent; gap: 6px; }
  .tz-nav li button[aria-current="step"] { border-bottom-color: var(--tide); }
  .tz-nav li button span { display: none; }
  .tz-nav li button[aria-current="step"] span { display: inline; }
}
.tz-step { display: grid; gap: 26px; max-width: 760px; }
.tz-step .say { color: var(--ink-2); max-width: 56ch; margin-top: -12px; }
.tz-from { font-size: var(--t-small); color: var(--ink-2); border-left: 2px solid var(--tide); padding: 4px 0 4px 14px; max-width: 64ch; }
.tz-extra { border-left: 2px solid var(--tide); padding-left: 18px; display: grid; gap: 22px; }
.tz-extra .cap { font: 500 var(--t-small) var(--font-sans); color: var(--tide); }
.tz-nav-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 24px; }
.photo-prev { display: flex; gap: 12px; flex-wrap: wrap; }
.photo-prev figure { margin: 0; }
.photo-prev img { width: 140px; height: 100px; object-fit: cover; border-radius: 2px; }
.photo-prev .textlink { min-height: 32px; font-size: var(--t-small); }
.pick-file { cursor: pointer; width: max-content; }
.done-head { display: grid; gap: 14px; max-width: 760px; padding-top: var(--s-6); padding-bottom: 36px; }
.done-head .textarea { font: var(--t-caption)/1.5 ui-monospace, Consolas, monospace; }

/* ---------- печать ---------- */
@media print {
  @page { size: A4; margin: 12mm 12mm 14mm; }
  html, body { background: #fff; }
  body { overflow: visible; padding: 0 !important; }
  .no-print, .docbar, .toast, dialog, .ec-dock, .ec-pbar { display: none !important; }
  .docpage { background: #fff; padding: 0; border: 0; }
  .doc { width: auto; max-width: none; margin: 0; padding: 0; background: #fff; border-radius: 0; font-size: 10pt; }
  .doc + .doc { margin-top: 0; break-before: page; page-break-before: always; }
  .doc, .doc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }

/* появление один раз при входе в экран; без JS и при reduce всё видно */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--d-reveal) var(--ease), transform var(--d-reveal) var(--ease); }
  .js-reveal [data-reveal].in { opacity: 1; transform: none; }
}

/* страница фото: форма справа на широком экране, под заголовком на телефоне */
.vz-page .hx-pad { padding-top: var(--s-5); padding-bottom: var(--pause-m); }
.vz-ex .fig__img { aspect-ratio: 16 / 10; }
@media (min-width: 960px) {
  .vz-page .vz { grid-template-columns: 5fr 7fr; grid-template-areas: "intro form" "more form"; }
  .vz-page .vz-intro { grid-area: intro; }
  .vz-page .vz-form { grid-area: form; }
  .vz-page .vz-more { grid-area: more; }
}
.sumbox h2 { font-size: var(--t-h3); letter-spacing: var(--ls-h3); }
.pk-it .pr.later { font: 500 var(--t-body)/1.3 var(--font-display); color: var(--ink-2); }
.ec-dock__t small { white-space: nowrap; }
@media (max-width: 699px) {
  .sgs.four { grid-template-columns: 1fr 1fr; gap: var(--s-5) 12px; margin-top: var(--s-5); }
  .sgs.four .sg .fig__img { height: 120px; }
  .sgs.four .sg p { display: none; }
}
.lead .textlink.inl { font-weight: 400; color: var(--ink); text-decoration-color: var(--line-strong); }
.lead .textlink.inl:hover { color: var(--tide); }