/* Таблицы Шевелева — клон: стили (Win-classic) + адаптив под мобильные */
body{font-family:"Segoe UI",Tahoma,sans-serif;font-size:13px;background:#ece9d8;margin:0}
#app{width:1024px;max-width:100%;box-sizing:border-box;margin:10px auto;background:#ece9d8;border:2px outset #fff;padding:8px}
h1{font-size:15px;margin:2px 0 8px;text-align:center;position:relative}
h1 .ver{position:absolute;right:8px;top:2px;font-weight:normal;font-size:11px;color:#666}
h1 .subtitle{font-weight:normal;font-size:11px}
fieldset{border:1px solid #999;margin:6px 0;padding:6px;background:#f3f1e8}
legend{font-weight:bold;padding:0 4px}
label{display:inline-block}
select,input[type=text]{font-size:13px;padding:1px 2px;border:1px solid #7f9db9;background:#fff;max-width:100%;box-sizing:border-box}
.row{margin:3px 0}
.col2{display:flex;gap:12px}
.col2>div{flex:1;min-width:0}
#out,#outH{background:#fff;border:1px solid #7f9db9;padding:6px;min-height:90px;white-space:pre-wrap;overflow-wrap:break-word}
#outH{min-height:54px}
.warn{color:#b00}
.ok{color:#060}
button{font-size:13px;padding:3px 14px;margin-right:6px}
.hint{color:#555;font-size:11px}
.dimmed{opacity:.45} /* frmtablII3: при «другой» блок dн/S/dв заблокирован (серый), как в оригинале */
.fdoc{font-size:11px;color:#00c}  /* ссылка на ГОСТ в программе открывала .doc — не гиперссылка, без подчёркивания */
#help{background:#fff;border:1px solid #7f9db9;padding:8px;display:none;font-size:12px}
#help i{font-family:Georgia,serif}
/* «печатные» формулы справки — CSS-дроби (офлайн file://, без KaTeX/MathJax) */
.math{font-family:'Times New Roman',Georgia,serif;font-size:1.2em;margin:.4em 0}
.math sup{font-size:.65em}
.mrow{display:flex;flex-wrap:wrap;align-items:center;gap:.15em 1em;margin:.3em 0}
.mlab{flex:1 1 20em;font-family:inherit;font-size:12px;color:#333}
.frac{display:inline-flex;flex-direction:column;text-align:center;vertical-align:middle;margin:0 .15em;line-height:1.25}
.frac>.fnum{border-bottom:1px solid currentColor;padding:0 .3em}
.frac>.fden{padding:0 .3em}
.grp{display:inline-block;vertical-align:middle}
.mdef{margin-top:.5em;font-size:12px;font-family:inherit}
.drow{display:flex;gap:.4em;margin:.1em 0}
.dsym{flex:0 0 2.6em;text-align:right;font-family:'Times New Roman',Georgia,serif;font-size:1.2em}
/* латинские переменные — курсив (<i>), греческие (λ, ν) — прямые: ν не путается с v, как в книге */
.nu{font-family:'Cambria Math','MathJax_Math','STIX Two Math','DejaVu Math TeX Gyre',Georgia,serif;font-style:italic}
.footnote{width:1024px;max-width:100%;box-sizing:border-box;margin:6px auto;font-size:11px;color:#444;padding:0 8px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.footnote .gh{flex:0 0 auto;display:inline-flex;align-items:center;line-height:0}
.footnote .gh svg{width:18px;height:18px;fill:#3a3a3a}
.footnote .gh:hover svg{fill:#0b5ea7}

/* ширины контролов (были inline в разметке) */
.w-material{width:340px}
.w-d{width:120px}
.w-t{width:70px}
.w-mode{width:100%}
.w-nupreset{width:150px}

/* «Исходные данные» и «Участок»: подписи в одну колонку, контролы равной ширины друг под другом */
.fields .row{display:grid;grid-template-columns:minmax(0,1fr) 165px;column-gap:8px;align-items:center;margin:5px 0}
.fields .row.full{grid-template-columns:minmax(0,1fr)}
.fields .row>b,.fields .row>span:first-child{text-align:right}
.fields .row.full>b{text-align:left} /* «Система:» — у левого края */
.fields .row>input[type=text],.fields .row>select{width:100%}
.fields .ctl{display:flex;gap:6px;align-items:center;min-width:0}
.fields .ctl>input,.fields .ctl>select{flex:1 1 auto;min-width:0}
.fields .ctl>.hint{flex:0 1 auto}
/* чугун: исходные данные в две колонки — класс слева, остальное справа (как в frmtablII3) */
#srcGrid.two{display:grid;grid-template-columns:max-content 1fr;column-gap:18px;align-items:start}
#dcv{flex:1 1 70px;min-width:0}
#qunit{flex:0 0 60px}
#duLine{white-space:pre-line}
#dpOther{white-space:nowrap}

/* «Участок»: грид 50/50 — слева два ввода (Q с единицами и L), справа кнопка «Расчёт»
   на всю высоту контейнера; «Справка» остаётся снизу во всю ширину */
.calcGrid{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;align-items:stretch}
.calcGrid>.calcBtn{display:flex}
.calcGrid>.calcBtn>button{flex:1 1 auto;width:100%}
/* колонка контролов внутри «Участка» уже, чем в «Исходных данных»: подписи не должны переноситься */
.calcInputs .row{grid-template-columns:minmax(0,1fr) 140px}
.calcGrid button{margin-right:0}

/* ===== ГЛОБАЛЬНОЕ правило неактивных контролов (одно на весь клон) =====
   Любой неактивный контрол выглядит неактивным САМ: серое поле вместо белого, приглушённый
   текст значения, курсор «запрет»; значения остаются читаемыми (видно, какие ν/ρ/k применены).
   Подпись поля (заголовок) при этом НЕ блекнет — она обычная. Блеклые подписи и легенды —
   только у целиком неактивного блока (.off / .locked), как в оригинальном окне. Действует автоматически на всех полях, которые гасит движок:
   ν и ρ на меди при «вода» (cuHeatSync), ν/пресет ν на стальных страницах при «холодном
   водоснабжении», k без учёта местных сопротивлений, dв вне «другой», SDR/PE вне «другой»,
   классы труб и т.д. Целые блоки гасятся теми же цветами: .off (медь: Frame4 «Температура»,
   Frame5 «Теплоноситель») и .locked (страницы с фиксированными ν/ρ/k). */
:root{--off-fieldset:#e9e7df;--off-bg:#e2e0d7;--off-fg:#6f6c62;--off-border:#b8b4a6;--off-caption:#7a776c}
input:disabled,select:disabled,textarea:disabled{background:var(--off-bg);color:var(--off-fg);
 border-color:var(--off-border);cursor:not-allowed}
input[type=radio]:disabled,input[type=checkbox]:disabled{opacity:.55;cursor:not-allowed}
fieldset.off,#sysField.locked{background:var(--off-fieldset);border-color:var(--off-border)}
fieldset.off legend,#sysField.locked legend{color:var(--off-caption)}
fieldset.off b,fieldset.off label,fieldset.off .hint,
#sysField.locked b,#sysField.locked label,#sysField.locked .hint{color:var(--off-caption);font-weight:normal}
fieldset.off input[type=text],fieldset.off select,
#sysField.locked input[type=text],#sysField.locked select{background:var(--off-bg);color:var(--off-fg);
 border-color:var(--off-border);cursor:not-allowed}
fieldset.off input[type=radio],fieldset.off input[type=checkbox],
#sysField.locked input[type=radio],#sysField.locked input[type=checkbox]{cursor:not-allowed;opacity:.55}


/* ===== frmtablII9 «для медных труб СП40-108-2004» ===== */
/* Frame2 «Выбор системы»: 4 Option — списком (в оригинале радиогруппа в рамке) */
#cuSysField .cusys{grid-template-columns:minmax(0,1fr)}
#cuSysField label,#cuHeatField label{display:block;margin:2px 0}
/* Frame6 «Местные сопротивления»: 12 пар «название + ξ + количество» в две колонки (как в окне) */
/* две колонки только когда хватает ширины на «картинка + название (≥92px) + ξ + шт.» */
.xiGrid{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:center}
@media (max-width:1000px){.xiGrid{grid-template-columns:1fr}}
.xiItem{display:flex;column-gap:6px;align-items:center;
  font-size:13px;margin:3px 0}
.xiItem input[type=number]{width:52px;padding:2px 4px;box-sizing:border-box}  /* border+padding внутри 52px — «шт.» не наползает на рамку */
.xiItem .unit{font-size:11px;color:#555;white-space:nowrap;justify-self:start}
#xiSum{font-weight:bold}
/* мини-схема местного сопротивления: условная труба + стрелка потока (маркер #xiArrow) */
.xiPic{width:40px;height:27px;display:block;overflow:visible}
.xiPic .pipe{fill:none;stroke:#222;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.xiPic .pipe.thin{stroke-width:1.6}
.xiPic .pipe.wide{stroke-width:4}
.xiPic .flow{fill:none;stroke:#333;stroke-width:1.1;stroke-linecap:round;marker-end:url(#xiArrow)}
.xiDefs{position:absolute}
/* Frame5 «Теплоноситель» меди: грид 40/60 — слева радио «вода/другой», справа ν (Text3) и ρ (Text18) */
.coolGrid{display:grid;grid-template-columns:40% minmax(0,1fr);column-gap:10px;align-items:center}
.coolRadios{display:flex;flex-direction:column;gap:4px}
.coolRadios label{white-space:nowrap}
.coolParams{min-width:0}
.coolParams .row{grid-template-columns:auto minmax(48px,1fr)}

/* ===== ПЭ 100 по ГОСТ Р 70628.2-2023: выбор по PN + таблица размеров ===== */
/* Кнопки PN — в строку с переносом (10 серий), подпись «PN 25» читается как в проекте */
.pnbox{display:inline-flex;flex-wrap:wrap;gap:2px 10px;vertical-align:middle}
.pnbox label{white-space:nowrap}
/* Таблица размеров выбранной серии: весь ряд сразу, строка выбирается кликом.
   Высота ограничена, чтобы длинный ряд (у SDR 9 — 26 диаметров) не растягивал страницу. */
.peCap{font-size:12px;color:#333}
.peTableWrap{max-height:230px;overflow:auto;border:1px solid #7f9db9;background:#fff;margin:4px 0}
#peTable{border-collapse:collapse;width:100%;font-size:12px}
#peTable th{position:sticky;top:0;background:#e4e1d4;border-bottom:1px solid #7f9db9;
 padding:2px 6px;text-align:right;font-weight:bold;z-index:1}
#peTable td{padding:1px 6px;text-align:right;border-bottom:1px solid #eeecdf;cursor:pointer;
 font-variant-numeric:tabular-nums}
#peTable tbody tr:hover td{background:#eef3fa}
#peTable tbody tr.sel td{background:#cfe0f5;font-weight:bold}
#peTable tbody tr.off td{color:var(--off-fg);cursor:not-allowed;background:transparent}
#peTableField.off .peTableWrap{border-color:var(--off-border)}

/* ===== планшет/узкое окно: колонки в столбик (порог 820 — чтобы iPad-портрет 768 тоже складывался) ===== */
@media (max-width:820px){
 .col2{flex-direction:column;gap:0}
 .w-material{width:100%}
 .w-nupreset{width:130px}
 .xiGrid{grid-template-columns:1fr}   /* местные сопротивления меди — в одну колонку */
}

/* ===== телефон ===== */
@media (max-width:480px){
 body{font-size:15px}                    /* читаемость без pinch-zoom */
 #app{margin:0;border:none;border-radius:0;padding:6px}
 h1{font-size:17px}
  h1 .ver{font-size:12px}
 h1 .subtitle{font-size:13px;display:block}     /* подзаголовок — читаемый на телефоне, с новой строки */
 fieldset{margin:8px 0;padding:8px}
 legend{font-size:15px}
 select,input[type=text]{font-size:16px; /* <16px iOS зумит поле при фокусе */
   padding:6px 4px;border-radius:3px}
 button{font-size:16px;padding:10px 18px;border-radius:4px}
 .row{margin:7px 0}
 /* «как в аптеке» на телефоне отменяем: метка сверху, контрол на всю ширину */
 .fields .row{display:block}
 .fields .row>b,.fields .row>span:first-child{text-align:left}
 /* строки ввода: метка сверху, контрол на всю ширину */
 .row>input[type=text],.row>select{display:block;width:100%;margin-top:3px}
 .row>b,.row{display:block}
 #thicknessRow>select,#mode,#material,#dsel,#tsel,#nuPreset{width:100%}
 /* ν и ρ + их подписи: инпут и пресет в одну строку */
 #nu,#rho{display:inline-block;width:38%}
 #nuPreset{display:inline-block;width:60%}
 #q{display:inline-block;width:45%}
 #qunit{display:inline-block;width:53%}
 #len,#k{display:block;width:100%}
 label{display:inline-block;margin-right:12px;padding:4px 0}  /* крупные радиокнопки */
 input[type=radio]{width:20px;height:20px;vertical-align:middle}
 #out,#outH{font-size:15px;padding:10px;min-height:110px}
 #outH{min-height:70px}
 #help{font-size:14px;padding:10px}
 .hint,.fdoc{font-size:13px}
 .footnote{font-size:12px}
 /* кнопки — на всю ширину, чтобы попадать пальцем */
 #btnCalc,#btnHelp{width:100%;margin:4px 0 0}
 /* «Участок» на телефоне: кнопка «Расчёт» — под строками ввода, тоже во всю ширину */
 .calcGrid{grid-template-columns:1fr}
 .calcBtn{margin-top:2px}
}
/* вторая синяя ссылка (PEX-AL-PEX: «СП 41-102-98» + «СП40-102-2000») */
#gostLink2{margin-left:.7em}

/* Раздел «Расчёты» в справке: формула → подстановка → результат */
.tex-frac{display:inline-block;vertical-align:middle;text-align:center;margin:0 .15em}
.tex-num{display:block;border-bottom:1px solid currentColor;padding:0 .25em}
.tex-den{display:block;padding:0 .25em}
.tex-sqrt .tex-rad{border-top:1px solid currentColor;padding:0 .15em}
.calcStep{margin:.7em 0;padding:.5em .7em;border-left:3px solid var(--off-border,#bbb);background:rgba(0,0,0,.02)}
.calcHead{color:#555;font-size:.92em}
.calcTex{margin:.25em 0;font-size:1.06em}
.calcSub{font-family:ui-monospace,Consolas,monospace;font-size:.9em}
.calcRes{font-weight:600;margin-top:.15em}
.calcNote{color:#666;font-size:.86em;margin-top:.15em}

/* Названия сопротивлений — одной строкой: ξ-сетка в один столбец (иначе длинные подписи переносятся) */
.xiGrid{grid-template-columns:1fr}
.xiItem .xiName{white-space:nowrap;margin-right:auto}
.xiItem .hint{white-space:nowrap}
.xiItem>input[type=checkbox]{flex:0 0 auto}
.xiItem>.xiPic{flex:0 0 44px}
.xiItem .xiName{white-space:nowrap;margin-right:auto}
/* «другие ξ=» — поле сразу за чекбоксом, а не в конце строки */
.fields .row.xiOtherRow{display:flex;align-items:center;gap:.5em}
.fields .row.xiOtherRow>label{text-align:left}
.fields .row.xiOtherRow>#xiotherval{width:8em}

/* Каждая формула справки — отдельной строкой, с номером и источником */
.fLine{display:block;margin:.1em 0 .35em;padding-left:0}
.fSrc{display:block;margin:.5em 0 .1em;color:#666;font-size:.9em}
.fNote{color:#666;font-size:.88em}
.fLegend{display:block;margin:.1em 0 .6em 0;color:#666;font-size:.88em}
.fLegend .fParam{display:block;margin:.06em 0;padding-left:0}
.fBlock{margin:0 0 1.25em}          /* гэп между формулами (просьба 10.10.2026) */
.fBlock:last-child{margin-bottom:.4em}
.fBlock.fUnused{opacity:.55}          /* по этой формуле расчёт не ведётся — блок лёгкий */
.fBlock.fUnused .fHead{font-weight:500;color:#8a8a8a}
.fBlock.fUnused .fLine{color:#6f6f6f}
.fHead{font-weight:600;margin:0 0 .1em}
/* поле «t = … °C» на страницах стали (ГВС): вдвое шире обычного селекта (просьба 10.10.2026) */
#tSteel{min-width:0}
#tSteelRow{grid-template-columns:minmax(0,1fr) 330px}   /* поле температуры вдвое шире (2×165px) */
#tSteelRow .hint{grid-column:1/-1;text-align:left;white-space:normal;min-width:0}
.fStep{margin:-.1em 0 .6em 11.5em}
.fStep .calcStep{margin:.25em 0 .5em;padding:.35em .5em}
.fLegend .calcStep{margin:.35em 0 0;padding:.3em .45em}
.fLegend .calcTex{font-size:.95em}