/* Светлый инженерный вид: серый фон, белые плитки и панели, схемы медным
   цветом, заголовки тёмно-синим. */
:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --ink: #111827;
  --muted: #6b7280;
  --line: #d1d5db;
  --title: #1e3a8a;
  --copper: #b45309;
  --copper-soft: #fff7ed;
  --error: #b91c1c;
  --font: "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", "DejaVu Sans Mono", monospace;
  /* Формулы — шрифтом с засечками, как в справочнике: курсивные буквы
     переменных и индексы читаются лучше, чем в рубленом шрифте. */
  --math: Cambria, "STIX Two Text", "Times New Roman", serif;
  /* Поле страницы слева и справа; на телефоне уже (см. ниже). */
  --gutter: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }
/* Атрибут hidden сильнее любого display: правило «.field { display: grid }»
   на телефоне показывало поля чужих режимов (обзор 7). */
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); }
a { color: var(--title); }
button { font: inherit; }

.site-header, main, .site-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.site-header { padding-block: 12px; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; }
.site-name { font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.05rem; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.92rem; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--title); }
main { padding-block: 16px 48px; }
.site-footer { padding-block: 20px; color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--line); }
.crumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 12px; }
.crumbs a { color: var(--muted); }

h1 { font-size: clamp(1.4rem, 3.5vw, 1.8rem); line-height: 1.2; margin: 0 0 6px; color: var(--ink); text-wrap: balance; }
h2 { font-size: 1.1rem; margin: 0 0 10px; }
.lead { color: var(--muted); max-width: 70ch; margin: 0; }
/* Страница 404: под сообщением — заголовок каталога. */
h1 + .lead + h2 { margin-top: 20px; }

/* Иконка: схема калькулятора в квадратной рамке, подписи схемы скрыты. */
.icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  border: 2px solid var(--copper);
  border-radius: 6px;
  color: var(--copper);
  background: var(--surface);
}
.icon svg { width: 50px; height: auto; }
.icon .lbl { display: none; }

/* Каталог */
.catalog-tools { display: grid; gap: 12px; margin: 18px 0 8px; }
#catalog-search {
  max-width: 420px; width: 100%; padding: 9px 12px; font: inherit;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
}
.tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--line); }
.tab {
  background: none; border: 0; padding: 8px 0; cursor: pointer; color: var(--ink);
  font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tab[aria-pressed="true"] { color: var(--copper); border-bottom-color: var(--copper); }
.tab:focus-visible, #catalog-search:focus-visible, .card:focus-visible { outline: 2px solid var(--title); outline-offset: 2px; }
.catalog-section { margin-top: 22px; }
.catalog-section h2 { font-size: 0.95rem; }

.card-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.card {
  display: grid; justify-items: center; align-content: start; gap: 8px; height: 100%;
  padding: 16px 12px; text-align: center; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
}
.card:hover { border-color: var(--copper); box-shadow: 0 2px 8px rgb(0 0 0 / 0.06); }
.card-title { color: var(--title); font-weight: 700; line-height: 1.3; }
.card-lead { color: var(--ink); font-size: 0.85rem; line-height: 1.4; }
.card-grid-small { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.card-grid-small .card { padding: 12px 10px; }

/* Страница калькулятора. Порядок в разметке: форма, затем .calc-side —
   результат и схема. Узкий экран — всё в столбик, результат под формой;
   средний — схема справа от формы, .calc-side не видна вёрстке. От 1000 px
   результат и схема — колонкой справа, результат сверху: виден сразу (обзор
   7: у коротких форм он начинался ниже первого экрана) и держится у верха
   окна, пока правятся поля (обзор 6: у котла до результата 13–15 полей).
   Колонка влезает в окно — держится вся, со схемой; не влезает — один
   результат, а схема уходит под него. Классы ставит app.js. */
.calc-head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.calc-panel {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px 24px;
  grid-template-areas: "form diagram" "result diagram"; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 20px;
}
.calc-form { grid-area: form; }
.calc-diagram { grid-area: diagram; margin: 0; color: var(--copper); padding: 12px; border: 1px solid var(--line); border-radius: 6px; }
.calc-diagram svg { display: block; width: 100%; height: auto; }
.calc-result { grid-area: result; }
.calc-side { display: contents; }
@media (min-width: 1000px) {
  .calc-panel { grid-template-areas: "form side"; }
  .calc-side { grid-area: side; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  /* Держится только то, что целиком влезает в экран: у высокого иначе не
     увидеть низ, а прокрутка внутри рамки неудобна. */
  .calc-side.fits-screen { position: sticky; top: 12px; }
  .calc-side:not(.fits-screen) { align-self: stretch; }
  .calc-side:not(.fits-screen) .calc-result.fits-screen { position: sticky; top: 12px; z-index: 1; }
}
@media (max-width: 760px) {
  .calc-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "form" "result" "diagram"; padding: 14px; }
  .calc-diagram { max-width: 360px; }
}

.calc-form { display: grid; gap: 12px; }
.field { min-width: 0; }
.field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
/* Поле и колонка единиц фиксированной ширины: все поля ввода одной ширины,
   есть у поля единица или нет. */
.control { display: grid; grid-template-columns: minmax(0, 1fr) 5.5em; align-items: center; gap: 8px; }
.control input, .control select {
  min-width: 0; width: 100%; font: inherit; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink);
}
.control input:focus-visible, .control select:focus-visible { outline: 2px solid var(--title); outline-offset: 1px; }
.unit { color: var(--muted); }
.hint { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 3px; }
/* Поле, о котором сообщение об ошибке. */
.field.is-invalid label { color: var(--error); }
.field.is-invalid .control > :first-child { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }

/* Телефон: до первого поля калькулятора — как можно меньше места. Разделы
   шапки — одной строкой с прокруткой вбок, крошки — одной строкой (последняя
   из них повторяет заголовок), иконка калькулятора скрыта: схема есть ниже. */
@media (max-width: 480px) {
  :root { --gutter: 12px; }
  .site-header { padding-block: 8px 4px; }
  .site-nav {
    flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;
    padding-bottom: 4px; scrollbar-width: none;
    /* Край затухает: видно, что разделов больше, чем влезло. */
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  main { padding-block: 8px 32px; }
  .crumbs { margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .calc-head { margin-bottom: 12px; }
  .calc-head .icon { display: none; }
  .calc-head .lead { font-size: 0.9rem; }
}

/* Поля на телефоне — на всю ширину карточки, а карточка — на всю ширину
   экрана, чтобы выбранный пункт списка читался целиком (обзор 6:
   «Баттерворт — максимал»). Колонка единиц у всех полей одна и та же —
   нулевой ширины: единица уходит в строку подписи, к правому краю. */
@media (max-width: 480px) {
  .calc-panel {
    margin-inline: calc(-1 * var(--gutter)); border-inline: 0; border-radius: 0;
    padding: 12px var(--gutter); gap: 14px;
  }
  .calc-form { gap: 10px; }
  .field { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: end; }
  .field .control { display: contents; }
  .field > label { grid-area: 1 / 1; }
  .control > :first-child { grid-area: 2 / 1 / 3 / -1; }
  .control > :last-child { grid-area: 1 / 2; margin-bottom: 4px; font-size: 0.88rem; }
  /* Справа у списка — только стрелка: ещё несколько знаков пункта влезают. */
  .control input, .control select { padding-inline: 8px; }
  .control select { padding-right: 2px; }
  .control > .unit-select { width: auto; padding: 2px 4px; }
  .hint { grid-column: 1 / -1; }
}

.calc-result { background: var(--copper-soft); border: 1px solid #fed7aa; border-radius: 6px; padding: 14px 16px; }
.results { margin: 0; display: grid; gap: 8px; }
/* Подписи не меньше 9em: иначе длинное значение забирает всю ширину, и
   слова подписи вылезают под него. */
.result-row { display: grid; grid-template-columns: minmax(min(9em, 50%), 1fr) minmax(0, max-content); gap: 4px 12px; align-items: baseline; border-bottom: 1px dashed #fed7aa; padding-bottom: 6px; }
.result-row:last-child { border-bottom: 0; padding-bottom: 0; }
.result-row[hidden] { display: none; }
.result-row dt { color: var(--muted); font-size: 0.88rem; }
.result-row dd { margin: 0; font: 600 1.05rem/1.3 var(--mono); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .result-row { grid-template-columns: minmax(0, 1fr); }
  .result-row dd { text-align: left; }
}
/* Таблица и текстовый ответ («Да: до молниеотвода 8 м…») — на всю ширину,
   подпись над ними. */
.result-row:has(.result-table), .result-row.is-text { grid-template-columns: minmax(0, 1fr); }
/* Ответ словами («в коде не указан») — обычным шрифтом, моноширинный — для чисел. */
.result-row.is-text dd, .result-row.is-words dd { font: 600 0.95rem/1.4 var(--font); }
.result-row.is-text dd { text-align: left; }
/* Ячейка таблицы рвётся только между словами: «overflow-wrap: anywhere» у dd
   давал «Мощность, к» ¶ «Вт» и «1,5» ¶ «мм²» на 375 px (обзор 7). */
.result-table { border-collapse: collapse; width: 100%; font-family: var(--font); font-weight: 400; font-size: 0.92rem; overflow-wrap: normal; }
.result-table td { padding: 3px 0; border-bottom: 1px solid #fde4c8; }
.result-table td:first-child { text-align: left; padding-right: 12px; }
.result-table td:last-child { text-align: right; font-family: var(--mono); font-weight: 600; }
.result-table td + td { text-align: right; font-family: var(--mono); font-weight: 600; padding-left: 10px; }
.result-table th { text-align: right; font-weight: 600; color: var(--muted); font-size: 0.82rem; padding: 0 0 4px 10px; }
.result-table th:first-child { text-align: left; padding-left: 0; }
/* Широкая таблица на узком телефоне прокручивается в своей ячейке, а не
   раздвигает страницу: на 320 px таблица сечений была шире экрана на 31 px. */
.result-row dd:has(> .result-table) { overflow-x: auto; }
.error { color: var(--error); font-weight: 600; margin: 0 0 10px; }
.notes { margin: 10px 0 0; padding-left: 1.2em; color: var(--muted); font-size: 0.85rem; }
.calc-visual { margin-bottom: 10px; }
.calc-visual svg { display: block; max-width: 100%; height: auto; }

.formula { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 14px 18px; }
.formula h2 { margin-bottom: 6px; }
.formula-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.formula-list li { overflow-wrap: anywhere; }
.formula-label { color: var(--muted); font-size: 0.9rem; }
.math { font: 1.15rem/1.6 var(--math); }
/* Наклон курсивной буквы съедает пробел справа: «P= q» вместо «P = q». */
.math i { padding-right: 0.1em; }
.formula sub, .formula sup { font-size: 0.72em; line-height: 0; }

.more { margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 12px 18px; }
.more summary { cursor: pointer; font-weight: 700; color: var(--title); }
.more[open] summary { margin-bottom: 8px; }
.article { max-width: 78ch; }
.article h2 { margin-top: 18px; font-size: 1.05rem; }
.article h3 { font-size: 0.98rem; margin: 14px 0 4px; }
.article p, .article li { max-width: 78ch; }
.formula-table { border-collapse: collapse; margin: 8px 0; display: block; max-width: 100%; overflow-x: auto; }
.formula-table th, .formula-table td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; }
.sources { color: var(--muted); font-size: 0.88rem; }
/* Адрес в источнике («prodigtv.ru/efirnoe/antenna/harchenko») — одно слово без
   пробелов: без переноса он раздвигал страницу на 320 px. */
.sources li { overflow-wrap: break-word; }
.updated { color: var(--muted); font-size: 0.85rem; }
.related { margin-top: 22px; }
.text-page { max-width: 75ch; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 20px; }

/* На телефоне результат оказывается ниже полей, поэтому главный результат
   (при ошибке ввода — её текст) дублируется полосой у нижнего края экрана. */
.summary-bar { display: none; }
@media (max-width: 760px) {
  .summary-bar:not([hidden]) {
    display: block; position: sticky; bottom: 0; margin: 0 calc(-1 * var(--gutter));
    padding: 10px max(var(--gutter), env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--title); color: #fff; font: 600 1rem/1.3 var(--mono); z-index: 5;
  }
  /* Главный результат и второй ("summary" в meta.json) — каждый своей строкой. */
  .summary-line { display: block; }
  .summary-bar.is-error:not([hidden]) { background: var(--error); font: 600 0.92rem/1.35 var(--font); }
}

/* Каталог на телефоне: плитки — компактным списком (иконка, название,
   описание в одну строку), вкладки разделов — одной строкой с прокруткой. */
@media (max-width: 480px) {
  .catalog-tools { grid-template-columns: minmax(0, 1fr); }
  .tabs { flex-wrap: nowrap; overflow-x: auto; gap: 0 18px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; white-space: nowrap; }
  .catalog-section .card-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .catalog-section .card {
    grid-template-columns: 40px minmax(0, 1fr); justify-items: start; align-items: center;
    gap: 0 12px; padding: 8px 10px; text-align: left;
  }
  .catalog-section .card .icon { grid-row: 1 / span 2; width: 40px; height: 40px; border-width: 1.5px; border-radius: 4px; }
  .catalog-section .card .icon svg { width: 32px; }
  .catalog-section .card-lead {
    justify-self: stretch; min-width: 0; color: var(--muted); font-size: 0.8rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}