/* ===========================================================
   РасчётБалки.РФ — расчётные мини-приложения для проектировщиков
   Дизайн-система: «чертёжный лист»
   =========================================================== */

:root{
  /* чернила */
  --ink:      #12181E;
  --ink-2:    #46525C;
  --ink-3:    #79858F;
  /* бумага */
  --paper:    #EDEFF1;
  --card:     #FFFFFF;
  --line:     #D6DBE0;
  --line-2:   #EAEDF0;
  /* акценты */
  --steel:    #123E77;
  --steel-2:  #0B2C58;
  --steel-3:  #E7EDF5;
  --signal:   #C2410C;   /* нагрузки, эпюры, превышения */
  --signal-2: #FDF0EA;
  --ok:       #10633F;
  --ok-2:     #E7F3EC;
  --warn:     #8A5A00;

  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sans: "PT Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --narrow: "PT Sans Narrow", "PT Sans", "Segoe UI", system-ui, sans-serif;

  --r: 3px;
  --shadow: 0 1px 2px rgba(18,24,30,.06), 0 8px 24px -16px rgba(18,24,30,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); font-size:16px; line-height:1.55;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
h1,h2,h3,h4{margin:0; font-family:var(--narrow); font-weight:700; line-height:1.08; letter-spacing:-.01em}
p{margin:0}
a{color:var(--steel); text-decoration:none}
a:hover{text-decoration:underline}
table{border-collapse:collapse; width:100%}
:focus-visible{outline:2px solid var(--steel); outline-offset:2px}

.wrap{max-width:1180px; margin:0 auto; padding:0 22px}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}

/* --- СЕТКА-МИЛЛИМЕТРОВКА ------------------------------------ */
.gridbg{
  background-image:
    linear-gradient(to right, rgba(18,62,119,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18,62,119,.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(18,62,119,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18,62,119,.09) 1px, transparent 1px);
  background-size:12px 12px, 12px 12px, 96px 96px, 96px 96px;
}

/* ===========================================================
   ПЕРЕКЛЮЧАТЕЛЬ РЕЖИМА + ПРОСТОЙ РЕЖИМ
   =========================================================== */
.mode-switch{
  display:flex; flex:0 0 auto; margin-left:16px; border:1px solid var(--line);
  border-radius:99px; overflow:hidden; background:#fff;
}
.mode-switch button{
  border:0; background:transparent; cursor:pointer; font-family:var(--sans);
  font-size:12.5px; line-height:1; padding:7px 13px; color:var(--ink-2); white-space:nowrap;
  transition:background .12s, color .12s;
}
.mode-switch button + button{border-left:1px solid var(--line)}
.mode-switch button:hover{background:var(--steel-3)}
.mode-switch button[aria-pressed="true"]{background:var(--steel); color:#fff; font-weight:700}
.mode-switch button[aria-pressed="true"]:hover{background:var(--steel-2)}

/* что скрывается и что показывается в простом режиме */
.simple-only, .simple-only-i{display:none}
.lbl-simple{display:none}
.mode-simple .pro-only{display:none !important}
.mode-simple .simple-only{display:block}
.mode-simple span.simple-only-i{display:inline}
.mode-simple .lbl-pro{display:none}
.mode-simple span.lbl-simple{display:inline}

/* пояснения к схемам работы */
.explain{
  margin-top:11px; padding:12px 14px; border-left:2px solid var(--steel);
  background:var(--steel-3); border-radius:0 var(--r) var(--r) 0;
}
.explain p{font-size:12.5px; line-height:1.5; color:var(--ink-2)}
.explain p + p{margin-top:8px}
.explain b{color:var(--ink)}
.explain .ex-title{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel); margin-bottom:7px;
}

/* результат простого режима */
.big-result{
  font-family:var(--narrow); font-weight:700; font-size:clamp(24px,2.6vw,32px);
  line-height:1.15; letter-spacing:-.01em;
}
.big-result .unit{font-size:.62em; color:var(--ink-3); font-weight:400}
.simple-list{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px}
.simple-list li{position:relative; padding-left:26px; font-size:14.5px; color:var(--ink-2); line-height:1.45}
.simple-list li::before{
  content:""; position:absolute; left:2px; top:7px; width:11px; height:6px;
  border-left:2px solid var(--ok); border-bottom:2px solid var(--ok); transform:rotate(-45deg);
}
.simple-list li.warn::before{content:"!"; border:0; transform:none; top:0; left:5px; color:var(--signal); font-weight:700; font-size:15px; width:auto; height:auto}

/* ссылка-кнопка и выбор снегового района */
.link-btn{
  background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:12.5px;
  color:var(--steel); text-decoration:underline; text-underline-offset:2px;
}
.link-btn:hover{color:var(--steel-2)}
.link-btn[aria-expanded="true"]{color:var(--steel-2); text-decoration:none; font-weight:700}

.region-pick{
  margin-top:10px; padding:12px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; max-height:320px; overflow:auto;
}
.rp-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.rp-zone{
  display:block; width:100%; text-align:left; cursor:pointer; margin-bottom:6px;
  padding:8px 11px; border:1px solid var(--line); border-radius:var(--r); background:#fff;
  font-family:var(--sans); font-size:12px; line-height:1.4; color:var(--ink-3);
  transition:border-color .12s, background .12s;
}
.rp-zone:last-child{margin-bottom:0}
.rp-zone:hover{border-color:var(--steel); background:var(--steel-3)}
.rp-zone b{display:block; font-family:var(--mono); font-size:12px; font-weight:500; color:var(--ink); margin-bottom:2px}

/* --- инструменты над результатом --- */
.calc-tools{
  display:flex; flex-wrap:wrap; gap:14px 20px; align-items:flex-start;
  padding:14px 18px; margin-bottom:18px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r);
}
.calc-tools .tool{display:flex; flex-direction:column; gap:5px; flex:1 1 230px; min-width:200px}
.calc-tools label{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.calc-tools .hint{margin:0}
.calc-tools .tool-btn{flex:0 0 auto; min-width:0; justify-content:flex-end; gap:8px}
.calc-tools .tool-btn .btn{white-space:nowrap}
@media (max-width:960px){.calc-tools{margin-top:0}}

/* быстрый выбор шага */
.quick{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.quick button{
  font-family:var(--mono); font-size:12px; padding:5px 11px; cursor:pointer;
  border:1px solid var(--line); border-radius:99px; background:#fff; color:var(--ink-2);
  transition:border-color .12s, background .12s, color .12s;
}
.quick button:hover{border-color:var(--steel); color:var(--steel)}
.quick button.on{background:var(--steel); border-color:var(--steel); color:#fff}

/* --- ШАПКА --------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex; align-items:center; gap:26px; height:60px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-mark{width:26px; height:26px; flex:0 0 auto}
.brand-name{
  font-family:var(--narrow); font-weight:700; font-size:21px; letter-spacing:.14em;
  text-transform:uppercase; line-height:1;
}
.brand-sub{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-family:var(--mono); line-height:1}
.nav{margin-left:auto; display:flex; align-items:center; gap:4px}
.nav a{
  font-size:14px; padding:7px 11px; color:var(--ink-2); border-radius:var(--r);
  text-decoration:none; white-space:nowrap;
}
.nav a:hover{background:var(--steel-3); color:var(--steel); text-decoration:none}
.nav a[aria-current="page"]{background:var(--steel); color:#fff}
.nav .cipher{font-family:var(--mono); font-size:11px; opacity:.75; margin-right:5px}

/* --- КНОПКИ -------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:15px; font-weight:700; line-height:1;
  padding:13px 20px; border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:var(--r); cursor:pointer; text-decoration:none;
  transition:transform .06s, background .15s, border-color .15s, color .15s;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--steel); border-color:var(--steel); color:#fff}
.btn-primary:hover{background:var(--steel-2); border-color:var(--steel-2)}
.btn-lg{padding:16px 26px; font-size:16px}
.btn-sm{padding:9px 14px; font-size:13.5px}
.btn-block{width:100%}
.btn svg{flex:0 0 auto}

/* яркая кнопка печати отчёта */
.btn-report{
  background:linear-gradient(180deg,#E2540F,#C2410C); border-color:#A83708; color:#fff;
  box-shadow:0 5px 16px -7px rgba(194,65,12,.85);
}
.btn-report:hover{background:linear-gradient(180deg,#C2410C,#9E360A); border-color:#932F06; color:#fff}

/* кнопка «Поделиться» */
.btn-share{border-color:var(--steel); color:var(--steel); background:var(--card)}
.btn-share:hover{background:var(--steel-3); color:var(--steel-2); border-color:var(--steel)}

/* всплывающее уведомление «ссылка скопирована» */
#ui-toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,16px);
  z-index:90; width:min(92vw,560px);
  background:#12181E; color:#fff; border-radius:6px;
  padding:13px 16px; font-size:13.5px; line-height:1.45;
  box-shadow:0 14px 38px -14px rgba(0,0,0,.65);
  display:flex; flex-direction:column; gap:9px;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
#ui-toast.on{opacity:1; pointer-events:auto; transform:translate(-50%,0)}
.toast-msg{font-weight:700}
.toast-url{
  font-family:var(--mono); font-size:11.5px; padding:8px 10px; border-radius:4px;
  border:1px solid #3A444E; background:#1C242C; color:#D9E2EA; width:100%;
}
.toast-url:focus{outline:2px solid #5C7CA8; border-color:#5C7CA8}

/* --- ТИПОГРАФИКА БЛОКОВ ------------------------------------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); display:flex; align-items:center; gap:9px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--steel); display:block}
.lede{font-size:17px; color:var(--ink-2); max-width:62ch}
.small{font-size:13px; color:var(--ink-2); line-height:1.5}
.tiny{font-size:11.5px; color:var(--ink-3); line-height:1.45}

/* --- ЛЕНДИНГ: ГЕРОЙ ------------------------------------------ */
.hero{border-bottom:1px solid var(--line); background:var(--card); overflow:hidden}
.hero .wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:52px; align-items:center; padding-top:52px; padding-bottom:52px;
}
.hero h1{font-size:clamp(34px,4.6vw,58px); margin:18px 0 16px; max-width:16ch}
.hero h1 em{font-style:normal; color:var(--steel); position:relative}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.hero-norms{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:26px; padding-top:20px;
  border-top:1px solid var(--line-2);
}
.hero-norms span{font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--ink-3)}

/* приборная панель героя */
.hero-widget{border:1px solid var(--line); background:var(--card); border-radius:var(--r); box-shadow:var(--shadow)}
.hero-widget-head{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border-bottom:1px solid var(--line-2); background:#FAFBFC;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.dot{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:0 0 auto}
.hero-widget-body{padding:8px 10px 4px}
.hero-widget-foot{
  display:flex; flex-wrap:wrap; gap:14px 24px; padding:12px 16px 16px; border-top:1px solid var(--line-2);
}
.hero-widget-foot div{display:flex; flex-direction:column; gap:1px}
.hero-widget-foot b{font-family:var(--mono); font-size:19px; font-weight:500}
.hero-widget-foot span{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}

/* --- СЕКЦИИ ЛЕНДИНГА ----------------------------------------- */
.section{padding:66px 0}
.section + .section{border-top:1px solid var(--line)}
.section-head{margin-bottom:34px; max-width:70ch}
.section-head h2{font-size:clamp(26px,3vw,38px); margin:14px 0 10px}

.modules{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:20px}
.module{
  display:flex; flex-direction:column; padding:26px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); position:relative;
  transition:border-color .15s, box-shadow .15s, transform .1s;
}
.module:hover{border-color:var(--steel); box-shadow:var(--shadow); text-decoration:none; transform:translateY(-2px)}
.module .cipher{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--steel);
  border:1px solid var(--line); padding:2px 7px; border-radius:2px; align-self:flex-start;
}
.module h3{font-size:27px; margin:14px 0 8px}
.module p{font-size:14.5px; color:var(--ink-2)}
.module ul{margin:16px 0 22px; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.module li{font-size:13.5px; color:var(--ink-2); padding-left:18px; position:relative}
.module li::before{content:""; position:absolute; left:0; top:8px; width:9px; height:1px; background:var(--ink-3)}
.module .btn{margin-top:auto; align-self:flex-start}

.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:32px}
.cols h4{font-size:19px; margin-bottom:10px}
.spec-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.spec-list li{font-size:13.5px; padding-left:20px; position:relative; color:var(--ink-2)}
.spec-list li::before{
  content:""; position:absolute; left:0; top:7px; width:10px; height:6px;
  border-left:1px solid var(--steel); border-bottom:1px solid var(--steel);
}
.spec-list b{color:var(--ink); font-family:var(--mono); font-size:12.5px; letter-spacing:.02em}

/* --- ФОРМЫ --------------------------------------------------- */
.calc{display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:26px; align-items:start; padding:30px 0 70px}
@media (max-width:960px){.calc{grid-template-columns:minmax(0,1fr)}}

.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r)}
.panel + .panel{margin-top:18px}
.panel-head{
  display:flex; align-items:baseline; gap:10px; padding:13px 18px;
  border-bottom:1px solid var(--line-2); background:#FAFBFC;
}
.panel-head h2{font-size:17px; letter-spacing:.02em}
.panel-head .cipher{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--steel);
  margin-left:auto;
}
.panel-body{padding:18px}
.form-sticky{position:sticky; top:78px}
@media (max-width:960px){.form-sticky{position:static}}

.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.field > label, .field-label{
  display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin-bottom:7px;
}
.row{display:flex; gap:10px}
.row > *{min-width:0}

input[type="text"], input[type="number"], select, textarea{
  width:100%; font-family:var(--mono); font-size:15px; font-variant-numeric:tabular-nums;
  padding:9px 11px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; color:var(--ink); appearance:none;
}
select{
  font-family:var(--sans); font-size:14.5px; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2346525C'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
input:hover, select:hover{border-color:#BFC7CE}
input:focus, select:focus{border-color:var(--steel); box-shadow:0 0 0 3px rgba(18,62,119,.1); outline:none}
input[aria-invalid="true"]{border-color:var(--signal); background:var(--signal-2)}

.hint{font-size:11.5px; color:var(--ink-3); margin-top:6px; line-height:1.45}

/* сегментированный переключатель */
.seg{display:flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff}
.seg label{flex:1; position:relative; cursor:pointer; margin:0; min-width:0}
.seg input{position:absolute; opacity:0; width:0; height:0}
.seg span{
  display:block; text-align:center; padding:9px 6px; font-size:13.5px; line-height:1.25; color:var(--ink-2);
  border-right:1px solid var(--line); transition:background .12s, color .12s;
}
.seg span.lbl-simple{display:none}
.mode-simple .seg span.lbl-pro{display:none}
.mode-simple .seg span.lbl-simple{display:block}
.seg label:last-child span{border-right:0}
.seg input:checked + span{background:var(--steel); color:#fff; font-weight:700}
.seg input:focus-visible + span{box-shadow:inset 0 0 0 2px var(--steel)}
.seg label:hover span{background:var(--steel-3)}
.seg input:checked + span:hover{background:var(--steel)}

/* вертикальный сегментированный список */
.seg-vert{flex-direction:column}
.seg-vert span{text-align:left; border-right:0; border-bottom:1px solid var(--line); padding:10px 13px}
.seg-vert label:last-child span{border-bottom:0}
.seg-vert span.lbl-simple{display:none}
.mode-simple .seg-vert span.lbl-pro{display:none}
.mode-simple .seg-vert span.lbl-simple{display:block}

/* чипы материалов */
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{position:relative; cursor:pointer; margin:0}
.chip input{position:absolute; opacity:0; width:0; height:0}
.chip span{
  display:inline-block; padding:6px 11px; font-size:13px; border:1px solid var(--line);
  border-radius:99px; background:#fff; color:var(--ink-2); transition:.12s; white-space:nowrap;
}
.chip span::before{content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border:1px solid var(--ink-3); border-radius:50%; vertical-align:1px}
.chip input:checked + span{background:var(--steel-3); border-color:var(--steel); color:var(--steel); font-weight:700}
.chip input:checked + span::before{background:var(--steel); border-color:var(--steel)}
.chip input:focus-visible + span{box-shadow:0 0 0 3px rgba(18,62,119,.18)}
.chip:hover span{border-color:#BFC7CE}
.group-label{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  margin:14px 0 7px;
}
.group-label:first-child{margin-top:0}

/* ползунок запаса */
.range-wrap{display:flex; align-items:center; gap:14px}
input[type="range"]{
  -webkit-appearance:none; appearance:none; flex:1; height:22px; background:transparent; padding:0; border:0;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:4px; background:linear-gradient(to right, var(--steel) var(--pct,0%), var(--line) var(--pct,0%));
  border-radius:2px;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; margin-top:-7px; border-radius:50%;
  background:#fff; border:2px solid var(--steel); cursor:grab; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(18,62,119,.2)}
.range-val{
  font-family:var(--mono); font-size:17px; min-width:62px; text-align:center;
  border:1px solid var(--line); border-radius:var(--r); padding:4px 6px; background:#FAFBFC;
}
.range-scale{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:2px}

/* чекбокс */
.check{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--ink-2); cursor:pointer}
.check input{width:16px; height:16px; margin:2px 0 0; accent-color:var(--steel); flex:0 0 auto}

/* раскрывающийся блок */
details.fold{border-top:1px solid var(--line-2)}
details.fold > summary{
  cursor:pointer; padding:13px 18px; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-2); font-weight:700; list-style:none; display:flex; align-items:center; gap:8px;
}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::before{content:"+"; font-family:var(--mono); color:var(--steel); font-size:15px; width:10px}
details.fold[open] > summary::before{content:"–"}
details.fold > summary:hover{color:var(--steel)}
.fold-body{padding:0 18px 18px}

/* --- РЕЗУЛЬТАТЫ ---------------------------------------------- */
.res-headline{
  display:flex; align-items:baseline; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,#FAFBFC,#fff);
}
.res-headline h2{font-size:22px}
.res-headline .cipher{margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ink-3)}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); border-bottom:1px solid var(--line-2)}
.kpi{padding:13px 16px; border-right:1px solid var(--line-2)}
.kpi:last-child{border-right:0}
.kpi b{display:block; font-family:var(--mono); font-size:20px; font-weight:500; line-height:1.2}
.kpi span{display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:3px}
.kpi small{display:block; font-size:10.5px; color:var(--ink-3); font-family:var(--mono)}

/* схема */
.scheme-box{padding:6px 10px 0; background:#fff; border-bottom:1px solid var(--line-2)}
.scheme{display:block; width:100%; height:auto}
.scheme .s-line{stroke:#12181E; stroke-width:2; fill:none}
.scheme .s-thin{stroke:#12181E; stroke-width:1; fill:none}
.scheme .s-hair{stroke:#9AA6B0; stroke-width:.8; fill:none}
.scheme .s-accent{stroke:var(--signal); stroke-width:1.6; fill:none}
.scheme .s-accent-fill{fill:rgba(194,65,12,.1); stroke:none}
.scheme .s-ord{fill:#46525C; font-family:var(--mono); font-size:10px}
.scheme .s-ord-strong{fill:#12181E; font-family:var(--mono); font-size:11px; font-weight:500}
.scheme .s-label{fill:#79858F; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase}
.scheme path.diagram{stroke-dasharray:1400; stroke-dashoffset:0; animation:draw .7s ease-out}
@keyframes draw{from{stroke-dashoffset:1400} to{stroke-dashoffset:0}}

/* таблица подбора */
.table-scroll{overflow-x:auto}
table.fit{font-size:13px; min-width:600px}
table.fit th{
  text-align:right; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.fit th:first-child, table.fit td:first-child{text-align:left; padding-left:18px}
table.fit th:last-child, table.fit td:last-child{padding-right:18px}
table.fit td{padding:10px 12px; border-bottom:1px solid var(--line-2); text-align:right; vertical-align:middle}
table.fit tbody tr:hover{background:#FAFBFC}
table.fit tr.best{background:var(--ok-2)}
table.fit tr.best:hover{background:#DEF0E6}
table.fit .sec-name{font-family:var(--mono); font-size:14.5px; font-weight:500; white-space:nowrap}
table.fit .sec-mat{display:block; font-size:11px; color:var(--ink-3); font-family:var(--sans)}
table.fit .v{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13.5px}
table.fit .v small{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); white-space:nowrap}

.bar{position:relative; display:inline-block; width:54px; height:5px; background:var(--line-2); border-radius:3px; vertical-align:middle; margin-right:8px}
.bar i{position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--ok)}
.bar i.mid{background:#B45309}
.bar i.over{background:var(--signal)}

.tag{display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:2px; white-space:nowrap}
.tag-ok{background:var(--ok-2); color:var(--ok); border:1px solid #BEDDCB}
.tag-no{background:var(--signal-2); color:var(--signal); border:1px solid #F0CFC0}
.tag-info{background:var(--steel-3); color:var(--steel); border:1px solid #C6D5E8}
.tag-num{background:#F3F5F7; color:var(--ink-2); border:1px solid var(--line)}

.notes{padding:16px 18px; border-top:1px solid var(--line-2); background:#FAFBFC}
.notes h4{font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); margin-bottom:9px}
.notes ol,.notes ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px}
.notes li{font-size:12px; color:var(--ink-2); line-height:1.5}

.alert{display:flex; gap:11px; padding:13px 16px; font-size:13px; border:1px solid; border-radius:var(--r); line-height:1.5}
.alert-warn{background:#FEF7EC; border-color:#F0DDBB; color:#6B4A00}
.alert-signal{background:var(--signal-2); border-color:#F0CFC0; color:#8A2E08}
.alert-info{background:var(--steel-3); border-color:#C6D5E8; color:var(--steel-2)}
.alert b{font-weight:700}

/* --- Справочный характер расчёта ---------------------------- */
.disclaimer{
  display:flex; gap:13px; align-items:flex-start;
  border:1px solid #E7B36A; border-left:5px solid var(--signal);
  background:linear-gradient(180deg,#FFF8EF,#FDF0E2);
  border-radius:var(--r); padding:15px 18px; margin:0 0 16px;
}
.disclaimer .dc-mark{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--signal); color:#fff; font-weight:700; font-size:17px;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.disclaimer .dc-title{
  display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--signal); font-weight:700; margin-bottom:5px;
}
.disclaimer p{margin:0; font-size:13.5px; line-height:1.5; color:#6B3A0C}
.disclaimer b{color:#8A2E08}
@media print{.disclaimer{border:1px solid #E7B36A; background:#FFF8EF}}

.empty{padding:34px 20px; text-align:center; color:var(--ink-3); font-size:13.5px}

/* --- ПОДВАЛ -------------------------------------------------- */
.site-footer{border-top:1px solid var(--line); background:var(--card); margin-top:0}
.site-footer .wrap{padding-top:34px; padding-bottom:34px; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:26px}
.site-footer h4{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.site-footer li, .site-footer p{font-size:13px; color:var(--ink-2)}
.footer-bottom{border-top:1px solid var(--line-2)}
.footer-bottom .wrap{display:block; padding-top:16px; padding-bottom:20px}

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

@media (max-width:920px){
  .hero .wrap{grid-template-columns:minmax(0,1fr); gap:32px}
  .nav .nav-label{display:none}
}
@media (max-width:600px){
  .nav{gap:0}
  .nav a{padding:7px 9px; font-size:13.5px}
  .brand-sub{display:none}
  .section{padding:48px 0}
  .kpi{border-right:0; border-bottom:1px solid var(--line-2)}
}
/* ===========================================================
   МОБИЛЬНАЯ ШАПКА: БУРГЕР-МЕНЮ
   Кнопку вставляет assets/js/nav.js; здесь — вид и поведение.
   =========================================================== */
.burger{
  display:none; margin-left:auto; flex:0 0 auto;
  width:42px; height:38px; padding:0; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
  transition:background .15s, border-color .15s;
}
.burger span{display:block; width:19px; height:2px; background:var(--ink); border-radius:2px; transition:transform .18s, opacity .18s}
.burger:hover{border-color:var(--steel); background:var(--steel-3)}
.burger:focus-visible{outline:2px solid var(--steel); outline-offset:2px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:920px){
  .site-header .wrap{flex-wrap:wrap; gap:0 14px; height:auto; min-height:60px; padding-top:10px; padding-bottom:10px}
  .burger{display:flex; order:2}
  .site-header .nav{
    display:none; order:3; flex:1 1 100%;
    flex-direction:column; align-items:stretch; gap:0; margin:10px 0 0;
  }
  .site-header.nav-open .nav{display:flex}
  .site-header .nav a{padding:12px 2px; border-bottom:1px solid var(--line-2); border-radius:0; font-size:15px}
  .site-header .nav .nav-label{display:inline}
  .site-header .mode-switch{
    display:none; order:4; flex:1 1 100%;
    margin:12px 0 4px; align-self:flex-start; box-shadow:0 1px 3px rgba(18,24,30,.06);
  }
  .site-header.nav-open .mode-switch{display:flex}
}

/* --- FAQ ----------------------------------------------------- */
.faq{display:flex; flex-direction:column; gap:10px; max-width:900px}
.faq-item{border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
.faq-item summary{
  cursor:pointer; list-style:none; padding:14px 18px;
  font-family:var(--narrow); font-weight:700; font-size:17px;
  display:flex; align-items:center; gap:10px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"+"; font-family:var(--mono); color:var(--steel); font-size:16px; width:10px}
.faq-item[open] summary::before{content:"–"}
.faq-item summary:focus-visible{outline:2px solid var(--steel); outline-offset:2px}
.faq-item p{margin:0; padding:0 18px 16px 38px; color:var(--ink-2); font-size:14px; line-height:1.55}
.faq-item a{text-decoration:underline; text-underline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}