/*
 * Раскладка «панель ввода + итог» (профиль 'board', разметка — ui/board.php,
 * наполнение итога — SKResult.board() в ui/result.js).
 * Конкретных цветов здесь нет — только токены из ui/tokens.php.
 */

/* Своего серого листа у профиля нет: панель ввода сама даёт фон. */
/* УЖЕ, ЧЕМ СТРАНИЦА С ЧЕРТЕЖАМИ (10.10.2026, просьба заказчика: «можно
   калькулятор оформить более узко на странице?»): полей немного, и на
   1340 px панель растягивала их в длинные полосы. Ширина была: блок 980 px
   по центру, карточка итога 350 px.
   1126 px (14.10.2026, заказчик: «2 колонки в строку, как на №1»): сетка
   формы — общая .sk-form (layout.css), колонка 332 px, как у лестниц:
   2·332 + 48 + 2·26 + 8 (поля панели) + 350 (итог) + рамка. */
:root { --sk-board-w: 1126px; }  /* ширина страницы «board»: её же берёт шапка и статья (theme.css) */
.sk-calc--board {
	background: none;
	padding: 8px 0 20px;
	max-width: var(--sk-board-w);
	margin-left: auto;
	margin-right: auto;
}

.sk-board {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: 0;
	align-items: start;
	background: var(--sk-tint);
	border: 1px solid var(--sk-line);
}

/* ——— Панель ввода ————————————————————————————————————————————————— */

.sk-board__form { min-width: 0; padding: 6px 4px 14px; }

/* ПОЛЯ — СТАНДАРТНЫЕ, КАК У ЛЕСТНИЦ №1…№20 (14.10.2026, замечание заказчика:
   «огромные нестандартные поля, подписи сверху, а не слева»). Своих размеров,
   шрифтов и раскладки полей у профиля нет: сетку формы, подпись слева, поле
   34 px и список 40 px даёт field.css/layout.css. Здесь только отступы панели. */
.sk-form--board .sk-form__group:first-child { padding-top: 14px; }

/* ПОЛЯ ПО ТРИ В РЯД ('cols' => 3 у sk_board_page: коэффициенты A, B, C
   №209; 16.10.2026, заказчик: «поля A, B, C сделай в одну строку»). Сетка —
   три равные колонки, поле с короткой подписью занимает свою колонку целиком
   (числовое поле тянется на остаток после подписи). На телефоне — общее
   правило field.css (по два в ряд). */
@media screen and (min-width: 641px) {
	.sk-form--cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
	.sk-form--cols3 .sk-field[data-sk-field="number"] .sk-field__ctl { flex: 1 1 auto; min-width: 0; }
	.sk-form--cols3 .sk-field[data-sk-field="number"] .sk-num { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* ЧЕРТЁЖ И ПЕРВАЯ ГРУППА ПОЛЕЙ В ОДНУ СТРОКУ (sk_board_sketch_fields,
   15.10.2026, заказчик: «в верхнем левом углу, но маленьким», затем
   «поля сюда, чтобы пустого места поменьше»). Слева белая карточка эскиза,
   справа поля первой группы столбиком. На узком экране — друг под другом. */
.sk-board__top {
	grid-column: 1 / -1;
	display: flex;
	/* карточка эскиза — на высоту колонки полей, без пустоты под ней */
	align-items: stretch;
	gap: 24px;
	padding-top: 14px;
}
.sk-board__sketch {
	flex: 0 0 var(--sk-sketch-w, 290px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	padding: 6px 8px 4px;
	background: var(--sk-paper);
	border: 1px solid var(--sk-line);
}
.sk-board__sketch .sk-cap { margin: 0 0 2px; }
.sk-board__sketch svg { display: block; width: 100%; height: auto; max-height: var(--sk-sketch-h, 320px); margin: 0 auto; }
.sk-board__topf { flex: 1 1 0; min-width: 0; align-self: flex-start; }
/* колонка справа от эскиза узкая: подпись длинного поля короче, чтобы
   список («ГОСТ 8239-89 (с уклоном полок)») поместился целиком */
@media screen and (min-width: 761px) {
	.sk-board__topf .sk-field.sk-field--long:is([data-sk-field="select"], [data-sk-field="segment"]):has(> .sk-field__head .sk-field__label) > .sk-field__head { flex: 0 0 88px; }
	/* ПРАВЫЙ КРАЙ ПОЛЕЙ — ОДНОЙ ЛИНИЕЙ (15.10.2026, заказчик): длинный список
	   и переключатель кончаются там же, где числовое поле (за ним 28 px под
	   единицу), переключатель прижат вправо */
	.sk-board__topf .sk-field.sk-field--long > .sk-field__body { margin-right: 28px; }
	.sk-board__topf .sk-field.sk-field--long[data-sk-field="segment"] > .sk-field__body { display: flex; justify-content: flex-end; }
}
.sk-form--board .sk-board__topf .sk-form__group:first-child { padding-top: 0; }
/* эскиз во всю ширину панели ('wide', sk_board_sketch_fields), поля под ним */
.sk-board__top--wide .sk-board__sketch { flex: 1 1 auto; padding: 10px 16px 8px; }
.sk-board__top--wide .sk-board__sketch svg { max-height: var(--sk-sketch-h, 340px); }
.sk-form--board .sk-board__top--wide + .sk-form__group { padding-top: 14px; }
/* ПЕРВАЯ ГРУППА (под эскизом) НА ТЕЛЕФОНЕ — ТОЖЕ ПО ДВА ЧИСЛОВЫХ ПОЛЯ В
   РЯД (17.10.2026, заказчик по №262: «куча параметров — в 2 ряда, сжать
   интерфейс»). Её поля лежат в .sk-board__topf, а не прямо в сетке формы,
   и общее правило field.css до них не доставало. Правило то же. */
@media (max-width: 640px) {
	.sk-board__topf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; align-items: end; }
	.sk-board__topf > :not(.sk-field[data-sk-field="number"]),
	.sk-board__topf > .sk-field--wide { grid-column: 1 / -1; }
}
@media screen and (max-width: 760px) {
	.sk-board__top { flex-direction: column; align-items: stretch; gap: 8px; }
	.sk-board__sketch { flex: none; }
	.sk-form--board .sk-board__topf .sk-form__group:first-child { padding-top: 10px; }
}

/* Выбор единиц — последней строкой панели ввода (как у лестниц). */
.sk-board__form .sk-units-foot { padding: 14px 26px 16px; border-top-color: var(--sk-line); }
@media screen and (max-width: 760px) { .sk-board__form .sk-units-foot { padding: 12px 12px 14px; } }

/* ——— Итог ———————————————————————————————————————————————————————— */

.sk-board__res {
	position: sticky;
	top: calc(var(--sk-sticky-top, 0px) + 12px);
	margin: 8px;
	padding: 22px 22px 18px;
	background: var(--sk-paper);
	border: 1px solid var(--sk-line);
	min-width: 0;
}

.sk-board__cap {
	font-family: var(--sk-font-mono);
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--sk-accent-cap);
	text-align: center;
}

.sk-hero { text-align: center; padding: 18px 0 20px; border-bottom: 1px solid var(--sk-line-2); }
/* .sk-hero есть и в теме (шапка страницы) со своей чертой — правило точнее */
.sk-board .sk-hero.sk-hero--alone { border-bottom: 0; }
.sk-hero__label { font-size: 14px; color: var(--sk-muted); }
.sk-hero__val {
	overflow-wrap: anywhere;
	margin-top: 4px;
	font-family: var(--sk-font-mono);
	font-size: 46px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--sk-accent);
	letter-spacing: -0.02em;
}
.sk-hero__unit { font-size: 20px; font-weight: 600; color: var(--sk-muted-2); letter-spacing: 0; }
.sk-hero__note { margin-top: 6px; font-size: 13px; color: var(--sk-muted-2); }

.sk-brows__title {
	padding: 16px 0 4px;
	font-family: var(--sk-font-mono);
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--sk-accent-soft);
}

.sk-brow {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--sk-line-3);
}
.sk-brow:last-child { border-bottom: 0; }
.sk-brow__name { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--sk-ink-soft); }
.sk-brow__note { display: block; margin-top: 1px; font-size: 11.5px; color: var(--sk-faint); }
/* пояснение строки на экране — кружком «?» (result.js), текстом — только на
   печати и в PDF */
@media screen { .sk-brow__note { display: none; } }
@media print { .sk-brow .sk-tip { display: none; } }
.sk-board__res.sk-capture .sk-brow .sk-tip { display: none; }
/* «Развёрнуто»: пояснения текстом под строкой, кружков нет (и на телефоне) */
.sk-board__full {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin: -8px -6px 0 0;
	font-size: 12px;
	color: var(--sk-muted);
	cursor: pointer;
	user-select: none;
}
.sk-board__full input { margin: 0; accent-color: var(--sk-accent); cursor: pointer; }
.sk-board__res.is-full .sk-brow__note { display: block; }
.sk-board__res.is-full .sk-tip { display: none; }
@media print { .sk-board__full { display: none; } }
.sk-board__res.sk-capture .sk-board__full { display: none; }
.sk-brow__val {
	flex: none;
	font-family: var(--sk-font-mono);
	font-size: 14px;
	font-weight: 700;
	color: var(--sk-ink);
	white-space: nowrap;
	text-align: right;
}
/* Текстовое значение (выбранный вариант списка в эхе формы) — обычным
   шрифтом и с переносом: моноширинный нужен числам, а длинная фраза в одну
   строку наезжала на подпись. */
.sk-brow__val--txt {
	flex: 0 1 auto;
	max-width: 62%;
	font-family: var(--sk-font-sans);
	font-size: 13px;
	font-weight: 600;
	white-space: normal;
	line-height: 1.3;
}
/* очень длинное число (все цифры 103¹⁰³) — переносится, а не лезет на
   подпись и за карточку */
.sk-brow__val { max-width: 70%; overflow-wrap: anywhere; white-space: normal; }
.sk-brow__unit { font-family: var(--sk-font-sans); font-size: 12px; font-weight: 400; color: var(--sk-muted-2); }
/* единица — своя колонка одной ширины во всём итоге (result.js, unitCol):
   числа встают по одной линии и с единицей, и без неё */
.sk-brow__unit { flex: none; width: var(--sk-bu, auto); margin-left: -8px; white-space: nowrap; text-align: left; }
.sk-board__out--nou .sk-brow__unit { display: none; }

.sk-board__msg { margin-top: 14px; font-size: 12px; line-height: 1.45; color: var(--sk-muted-2); }
.sk-board__msg.is-bad { color: var(--sk-bad); font-size: 13.5px; }

/* Блок «Скачать расчёт» стоит под панелью, отдельно от неё. */
.sk-calc--board > .sk-board + * { margin-top: 18px; }

/* ——— Средний экран: итог уже́ ——————————————————————————————————— */
@media screen and (max-width: 1000px) {
	.sk-board { grid-template-columns: minmax(0, 1fr) 310px; }
}

/* ——— Телефон: панель и итог друг под другом ———————————————————————
   Лишнего на узком экране нет вовсе (решение заказчика 10.10.2026):
   ни рамки панели, ни подписи «Результат расчёта», ни пояснений под
   строками итога — только поля, крупная цифра и список. */
@media screen and (max-width: 760px) {
	.sk-calc--board { padding: 0 0 12px; }
	.sk-board { grid-template-columns: minmax(0, 1fr); border: 0; }
	.sk-board__form { padding: 0 0 8px; }
	.sk-board__res { position: static; margin: 0 8px 8px; padding: 6px 16px 10px; }
	.sk-board__res > .sk-board__cap { display: none; }
	/* «Развёрнуто» — внутри поля карточки: отрицательный отступ рассчитан на
	   поля компьютерной карточки и на телефоне выводил галочку к кромке */
	.sk-board__full { margin: 6px 0 0; }
	.sk-hero { padding: 12px 0 14px; }
	.sk-hero__val { font-size: 40px; }
	.sk-brow__note { display: none; }
	.sk-board__msg:not(.is-bad) { display: none; }
}

.sk-board__ptitle { display: none; font-size: 18px; font-weight: 700; color: var(--sk-ink); padding-bottom: 6px; }
@media print { .sk-board__ptitle { display: block; } }
.sk-board__res.sk-capture .sk-board__ptitle { display: block; }

/* Лист схемы под панелью (необязательный блок стандарта) — карточка
   дизайн-системы с листом sk_fig; оформление листа общее (ui/layout.css). */
.sk-board__scheme { margin-top: 14px; }
.sk-board__scheme[hidden] { display: none; }
.sk-board__scheme .sk-fig { padding: 14px 18px 16px; }
@media screen and (max-width: 760px) { .sk-board__scheme { margin: 10px 8px 0; } .sk-board__scheme .sk-fig { padding: 8px; } }
/* в листе итога (печать, PDF) — без рамки карточки: рамку и штамп даёт ui/sheet.js */
.sk-board__res .sk-board__scheme { margin: 12px 0 0; border: 0; box-shadow: none; }
.sk-board__res .sk-board__scheme .sk-fig { padding: 0; }

/* Подвал листа: QR и адрес расчёта — только на бумаге и в PDF. */
.sk-board__pfoot { display: none; align-items: center; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--sk-line-2); }
.sk-board__pfoot canvas { flex: none; width: 84px !important; height: 84px !important; }
.sk-board__pfoot-t { min-width: 0; font-size: 10.5px; line-height: 1.4; color: var(--sk-muted-2); }
.sk-board__pfoot-url { font-family: var(--sk-font-mono); font-size: 10px; color: var(--sk-ink-soft); word-break: break-all; }
@media print { .sk-board__pfoot { display: flex; break-inside: avoid; } }
.sk-board__res.sk-capture .sk-board__pfoot { display: flex; }

/* Эхо введённого в разметке первое (для бумаги), на экране — в конце итога. */
.sk-board__cols { display: flex; flex-direction: column; }
/* Эхо введённого — ТОЛЬКО на бумаге и в PDF (10.10.2026, решение
   заказчика: «исходные данные дублируются в результате и загромождают
   страницу»): на экране поля и так стоят слева. В разметке оно первое —
   на листе «что считали» открывает расчёт. */
@media screen { .sk-brows--echo { display: none; } }

/* ——— Бумага и PDF: ОДИН ЛИСТ ———————————————————————————————————————
   (10.10.2026, замечание заказчика: «распечатка на 3 листа, одного хватит»).
   Крупная цифра — строкой сверху, под ней группы в ДВЕ колонки, первой —
   «Исходные данные»; строки плотнее, кегль мельче. PDF собирает html2canvas
   с ЭКРАННЫМИ стилями, поэтому те же правила продублированы под классом
   sk-capture, который calc-actions.js ставит на область печати. */
@media print {
	.sk-board { display: block; background: none; border: 0; }
	.sk-board__form { display: none; }
	.sk-board__res { position: static; margin: 0; padding: 0; border: 0; }
}
@media print {
	.sk-board__res > .sk-board__cap { display: none; }
	.sk-hero { display: flex; align-items: baseline; gap: 14px; text-align: left; padding: 0 0 8px; }
	.sk-hero__val { margin: 0; font-size: 28px; }
	.sk-hero__unit { font-size: 15px; }
	.sk-hero__note { margin: 0; }
	.sk-board__cols { display: block; column-count: 2; column-gap: 28px; }
	.sk-brows { break-inside: avoid; }
	.sk-brows--echo { display: block; }
	.sk-brows__title { padding: 8px 0 2px; }
	.sk-brow { padding: 3px 0; }
	.sk-brow__name { font-size: 11.5px; }
	.sk-brow__note { display: block; font-size: 10px; }
	.sk-brow__val { font-size: 12px; }
	.sk-board__msg { display: block; margin-top: 8px; font-size: 10.5px; }
}
.sk-board__res.sk-capture { position: static; width: 760px; max-width: none; padding: 16px 20px 0; border: 0; }  /* лист A4: две колонки не помещаются в 380 px карточки */
.sk-board__res.sk-capture > .sk-board__cap { display: none; }
.sk-board__res.sk-capture .sk-hero { display: flex; align-items: baseline; gap: 14px; text-align: left; padding: 0 0 8px; }
.sk-board__res.sk-capture .sk-hero__val { margin: 0; font-size: 28px; }
.sk-board__res.sk-capture .sk-hero__unit { font-size: 15px; }
.sk-board__res.sk-capture .sk-hero__note { margin: 0; }
.sk-board__res.sk-capture .sk-board__cols { display: block; column-count: 2; column-gap: 28px; }
.sk-board__res.sk-capture .sk-brows { break-inside: avoid; }
.sk-board__res.sk-capture .sk-brows--echo { display: block; }
.sk-board__res.sk-capture .sk-brow { padding: 3px 0; }
.sk-board__res.sk-capture .sk-brow__note { display: block; }
.sk-board__res.sk-capture .sk-board__msg { display: block; }

/* ——— Формула вместо подписей (sk_formula_*, ui/board.php) ——————————————
   Поля стоят на своих местах в записи: показатель над крючком знака корня,
   число под чертой, справа «= итог». Знак — SVG, растянутый по высоте
   подкоренного блока; черта — верхняя кромка блока, толщины совпадают. */
.sk-formula {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding: 22px 0 4px;
	min-width: 0;
}
.sk-formula__root { display: inline-flex; align-items: stretch; flex: none; }
.sk-formula__idx { align-self: flex-start; margin-right: -12px; position: relative; z-index: 1; }
.sk-formula__sign { flex: none; width: 30px; height: auto; overflow: visible; }
.sk-formula__sign path {
	fill: none;
	stroke: var(--sk-ink);
	stroke-width: 2.5px;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.sk-formula__rad { border-top: 2.5px solid var(--sk-ink); padding: 9px 4px 3px 6px; margin-left: -1px; }

/* подпись поля — для эха на печати и для экранного диктора, не для глаз */
.sk-formula__lab {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.sk-formula__in { display: block; position: relative; }
/* Поле в формуле — стандартное поле (field.css): своя только ширина под
   место в формуле и число по центру. Высота, шрифт и рамка — общие. */
.sk-formula__in .sk-input { text-align: center; }
.sk-formula__in--m .sk-input { width: 210px; }
.sk-formula__in--s .sk-input { width: 50px; padding: 0 4px; }
.sk-formula__in--e .sk-input { width: 92px; padding: 0 4px; }
.sk-formula__in--b .sk-input { width: 130px; padding: 0 6px; }

.sk-formula__eq { font-size: 26px; font-weight: 300; color: var(--sk-muted); }
.sk-formula__out {
	min-width: 0;
	font-family: var(--sk-font-mono);
	font-size: 24px;
	font-weight: 700;
	color: var(--sk-ink);
	overflow-wrap: anywhere;
}

/* Степень: показатель справа вверху от основания (sk_formula_pow) */
.sk-formula__pow { display: inline-flex; align-items: flex-start; flex: none; padding-top: 22px; }
.sk-formula__exp { margin: -22px 0 0 4px; }

/* Дробь: целая часть слева, числитель над чертой, знаменатель под ней
   (sk_formula_frac). Та же разметка — у итога «= …». */
.sk-formula__mixed { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.sk-formula__frac { display: inline-flex; flex-direction: column; align-items: stretch; }
.sk-formula__num { padding-bottom: 5px; border-bottom: 2.5px solid var(--sk-ink); display: flex; justify-content: center; }
.sk-formula__den { padding-top: 5px; display: flex; justify-content: center; }
.sk-formula__in--w .sk-input { width: 64px; padding: 0 4px; }
.sk-formula__in--f .sk-input { width: 76px; padding: 0 4px; }
/* знак действия: список без рамки, крупный знак */
.sk-formula__op {
	height: var(--sk-input-h);
	padding: 0 22px 0 10px;
	font-size: 20px;
	line-height: 1;
	color: var(--sk-ink);
	background-color: var(--sk-paper);
	border: 1px solid var(--sk-line-input);
	border-radius: var(--sk-radius, 6px);
	cursor: pointer;
	/* воздух вокруг знака — в 2,5 раза шире промежутка формулы (16.10.2026,
	   заказчик на №210: «между полем знака и дробями отступы побольше») */
	margin: 0 21px;
}
.sk-formula__op:focus { outline: none; border-color: var(--sk-accent); }
/* итог дробью: числа без полей, черта та же */
.sk-formula__out .sk-formula__mixed { gap: 4px; }
.sk-formula__out .sk-formula__whole { font-size: 26px; }
.sk-formula__out .sk-formula__num,
.sk-formula__out .sk-formula__den { font-size: 20px; padding-left: 4px; padding-right: 4px; }

/* Быстрый выбор под формулой (√ ∛ ⁴√ …) — обычная строка .sk-seg. */
.sk-formula-picks { grid-column: 1 / -1; padding: 10px 0 2px; }
.sk-formula-picks__w { font-style: normal; }

@media screen and (max-width: 640px) {
	.sk-formula { gap: 6px 10px; padding-top: 14px; }
	.sk-formula__in--m .sk-input { width: min(190px, 52vw); }
	.sk-formula__in--w .sk-input { width: 48px; }
	.sk-formula__in--e .sk-input { width: 72px; }
	.sk-formula__in--b .sk-input { width: 110px; }
	.sk-formula__in--f .sk-input { width: 56px; }
	.sk-formula__op { padding: 0 16px 0 6px; margin: 0 14px; }
	/* «= итог» не помещается в строку формулы, а крупный итог стоит сразу
	   под панелью — на телефоне его здесь нет */
	.sk-formula__eq, .sk-formula__out { display: none; }
	/* на телефоне у быстрого выбора только знаки: √ ∛ ∜ ⁵√ */
	.sk-formula-picks__w { display: none; }
}

.sk-hero__val.sk-hero__val--lines { white-space: pre; font-size: 32px; line-height: 1.3; }
@media screen and (max-width: 760px) { .sk-hero__val.sk-hero__val--lines { font-size: 28px; } }

/* ——— Ход решения (sk_board_steps) ————————————————————————————————— */
.sk-board__steps { margin-top: 18px; padding: 18px 26px 22px; }
.sk-board__steps-h { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--sk-ink); }
.sk-steps { margin: 0; padding: 0; list-style: none; counter-reset: sk-step; }
.sk-step { position: relative; padding: 12px 0 12px 44px; border-top: 1px solid var(--sk-line); counter-increment: sk-step; }
.sk-step:first-child { border-top: 0; }
.sk-step::before {
	content: counter(sk-step);
	position: absolute; left: 0; top: 11px;
	width: 28px; height: 28px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 700; color: var(--sk-paper); background: var(--sk-accent);
}
.sk-step__h { font-weight: 700; color: var(--sk-ink); margin-bottom: 4px; }
.sk-step__t { color: var(--sk-muted); font-size: 14px; margin: 2px 0 6px; }
.sk-step__f {
	font-size: 18px;
	line-height: 2.3;
	color: var(--sk-ink);
	overflow-wrap: anywhere;
}
/* дробь в строке шага: числитель над чертой, посередине строки */
.sk-step__f .sk-formula__frac { display: inline-flex; vertical-align: middle; line-height: 1.25; margin: 0 2px; text-align: center; }
.sk-step__f .sk-formula__num { padding: 0 3px 2px; border-bottom-width: 1.5px; }
.sk-step__f .sk-formula__den { padding: 2px 3px 0; }
.sk-step__f b { color: var(--sk-accent); }
@media screen and (max-width: 640px) {
	.sk-board__steps { padding: 14px 12px 16px; }
	.sk-step { padding-left: 36px; }
	.sk-step__f { font-size: 16px; }
}
@media print { .sk-board__steps { display: none; } }

/* ——— Таблица под панелью (sk_board_table) ————————————————————————————— */
.sk-board__table { margin-top: 18px; }
.sk-board__table[hidden] { display: none; }
.sk-board__table .sk-table td { padding-top: 7px; padding-bottom: 7px; }
.sk-board__table .sk-table td:first-child { color: var(--sk-faint); }
/* строка итога (за год, за весь срок) */
.sk-board__table .sk-table tr.sk-tr-sum td { font-weight: 700; color: var(--sk-ink); background: var(--sk-wash); }
.sk-board__table .sk-table tr.sk-tr-sum td:first-child { color: var(--sk-ink); }
/* свёрнутая таблица: строки сверх первых — только по кнопке */
@media screen { .sk-board__table.is-fold tr.sk-tr-more { display: none; } }
.sk-board__table .sk-tr-fold td { padding: 12px 20px; text-align: center; background: none; }
@media print { .sk-board__table .sk-tr-fold { display: none; } }
/* в листе итога (печать, PDF) — без рамки карточки, все строки */
.sk-board__res .sk-board__table { margin: 16px 0 0; border: 0; box-shadow: none; }
.sk-board__res .sk-board__table .sk-card__head { padding-left: 0; padding-right: 0; }
.sk-capture .sk-board__table.is-fold tr.sk-tr-more { display: table-row; }
.sk-capture .sk-board__table .sk-tr-fold { display: none; }
@media screen and (max-width: 640px) {
	.sk-board__table { margin: 12px 8px 0; }
	.sk-board__table .sk-table { font-size: 12px; }
	.sk-board__table .sk-table th,
	.sk-board__table .sk-table td { padding-left: 6px; padding-right: 6px; }
	.sk-board__table .sk-table th:first-child,
	.sk-board__table .sk-table td:first-child { padding-left: 10px; }
	.sk-board__table .sk-table th:last-child,
	.sk-board__table .sk-table td:last-child { padding-right: 10px; }
}

/* ——— Таблица ввода (sk_itable_*, ui/board.php) ————————————————————————
   Строка на предмет, колонка на величину; колонки задаёт шаблон
   (--sk-it-cols). Группы раскрываются, в заголовке группы — её итог. */
.sk-itable { grid-column: 1 / -1; margin-top: 6px; font-size: 13px; }
.sk-itable__head,
.sk-itable__row {
	display: grid;
	grid-template-columns: var(--sk-it-cols);
	column-gap: 6px;
	align-items: center;
}
.sk-itable__head {
	padding: 0 0 6px;
	border-bottom: 1px solid var(--sk-line-input);
	font-size: 11.5px;
	line-height: 1.25;
	color: var(--sk-muted-2);
	text-align: center;
}
.sk-itable__th--name { text-align: left; }
.sk-itable__grp { border-bottom: 1px solid var(--sk-line-3); }
.sk-itable__sum {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 0;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--sk-accent);
}
.sk-itable__sum::-webkit-details-marker { display: none; }
.sk-itable__sum::before { content: '+'; flex: none; width: 12px; font-family: var(--sk-font-mono); color: var(--sk-accent-soft); }
.sk-itable__grp[open] > .sk-itable__sum::before { content: '−'; }
.sk-itable__gt { flex: 1 1 auto; }
.sk-itable__gv { flex: none; font-family: var(--sk-font-mono); font-size: 12px; font-weight: 600; color: var(--sk-muted-2); }
.sk-itable__row { padding: 3px 0; }
.sk-itable__row:last-child { padding-bottom: 10px; }
.sk-itable__name { min-width: 0; line-height: 1.25; color: var(--sk-ink); }
.sk-itable__td { min-width: 0; }
.sk-itable__in.sk-input { width: 100%; padding: 0 6px; }
/* число со стрелками ▲▼ (sk_itable_cell_html): поле на всю клетку, справа место под стрелки */
.sk-itable__num { width: 100%; }
.sk-itable__num > .sk-itable__in.sk-input { padding-right: calc(var(--sk-num-btn, 22px) + 7px); }
.sk-itable__out { display: block; text-align: right; font-family: var(--sk-font-mono); font-size: 13px; font-weight: 700; color: var(--sk-ink); }
/* строка, которая в расчёт не входит (время 0), — приглушена */
.sk-itable__row.is-off .sk-itable__name,
.sk-itable__row.is-off .sk-itable__out { color: var(--sk-faint); font-weight: 400; }
.sk-itable__row.is-off .sk-itable__in { color: var(--sk-muted-2); font-weight: 400; }
.sk-itable__row.is-bad .sk-itable__in { border-color: var(--sk-bad); }
/* удалить строку ('del' у клетки) и «+ Добавить» под таблицей */
.sk-itable__del {
	display: block; width: 26px; height: 26px; margin: 0 auto; padding: 0;
	font-size: 18px; line-height: 1;
	border: 1px solid var(--sk-line); border-radius: var(--sk-radius-sm, 6px);
	background: transparent; color: var(--sk-ink-2); cursor: pointer;
}
.sk-itable__del:hover { border-color: var(--sk-bad); color: var(--sk-bad); }
.sk-itable__add { grid-column: 1 / -1; margin: 2px 0 6px; }
.sk-itable__add[hidden] { display: none; }
@media screen and (max-width: 640px) {
	.sk-itable__head,
	.sk-itable__row { grid-template-columns: repeat(var(--sk-it-n, 5), minmax(0, 1fr)); }
	/* клеток с числом пять и больше (№155) — стрелкам места нет, число важнее */
	.sk-itable--dense .sk-itable__num .sk-num__btns { display: none; }
	.sk-itable--dense .sk-itable__num > .sk-itable__in.sk-input { padding-right: 6px; }
	.sk-itable__th--name { display: none; }
	.sk-itable__name { grid-column: 1 / -1; padding: 4px 0 3px; }
	.sk-itable__row { padding: 4px 0 6px; }
}
@media print { .sk-itable { display: none; } }

/* ——— Итог на странице «как у лестниц» (sk_board_page 'layout' => 'pro') ———
   Карточка «Результаты расчёта» во всю ширину: крупная цифра с подписью
   строкой, группы — колонками, как карточки результатов лестниц. */
.sk-board__out--wide { padding: 4px 22px 18px; }
.sk-board__out--wide .sk-hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; text-align: left; padding: 10px 0 14px; }
.sk-board__out--wide .sk-hero__val { margin: 0; font-size: 40px; }
.sk-board__out--wide .sk-board__cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 36px; align-items: start; }
@media screen and (max-width: 640px) {
	.sk-board__out--wide { padding: 2px 12px 14px; }
}

/* оценка строки итога (state у строки SKResult.board): число на подложке
   цвета оценки, как в таблицах результатов */
.sk-brow.is-ok   .sk-brow__val { background: var(--sk-ok-bg); }
.sk-brow.is-warn .sk-brow__val { background: var(--sk-warn-bg); }
.sk-brow.is-bad  .sk-brow__val { background: var(--sk-bad-bg); }
.sk-brow.is-ok .sk-brow__val, .sk-brow.is-warn .sk-brow__val, .sk-brow.is-bad .sk-brow__val { padding: 0 4px; border-radius: 3px; }

/* ——— Ряд «Сортамент» металлопроката (ui/metal-picks.php) ————————————————
   13 карточек должны встать в одну строку на ширине страницы board. */
.sk-picks--metal { grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; }
/* С РЯДОМ «МАТЕРИАЛ» — две свёрнутые строки рядом, как у лестниц. Раскрытый
   ряд встаёт во всю ширину, свёрнутый — строкой над или под ним: иначе
   соседняя ячейка тянулась на высоту карточек и стояла пустой (заказчик
   15.10.2026: «пустого места не должно быть»). */
.sk-picks--metal2 { display: flex; flex-wrap: wrap; }
.sk-picks--metal2 > .sk-pick { flex: 1 1 360px; min-width: 0; }
.sk-picks--metal2 > .sk-pick[open] { flex-basis: 100%; }
.sk-picks--metal2:has(> .sk-pick[open]) > .sk-pick + .sk-pick { border-left: 0; border-top: 1px solid var(--sk-line-2); }
.sk-pick--metal .sk-pick__row { gap: 6px; padding: 2px 16px 14px; }
.sk-pick--metal .sk-pick__item { width: 76px; padding: 8px 4px 7px; gap: 5px; }
.sk-pick--metal .sk-pick__item svg { width: 40px; height: 26px; }

/* НА ТЕЛЕФОНЕ — СВЁРНУТАЯ СТРОКА И СПИСОК В ДВЕ КОЛОНКИ (15.10.2026,
   заказчик: лента с прокруткой вбок неудобна). Строка «Сортамент — [значок]
   Уголок» показывает текущий выбор; по нажатию — список «значок + название»,
   все 13 профилей на одном экране, без прокрутки. Свёрнут ряд по умолчанию
   (как у лестниц, на всех экранах). */
@media screen and (max-width: 640px) {
	.sk-pick--metal .sk-pick__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 10px 12px; }
	.sk-pick--metal .sk-pick__item { width: auto; flex-direction: row; justify-content: flex-start; gap: 10px;
		min-height: 44px; padding: 6px 10px; }
	.sk-pick--metal .sk-pick__item svg { flex: none; width: 34px; height: 22px; }
	.sk-pick--metal .sk-pick__name { font-size: 13px; text-align: left; }
	.sk-pick--metal .sk-pick__name br { display: none; }
	.sk-pick--metal .sk-pick__sum { min-height: 48px; padding: 8px 14px; }
}

/* ——— Ряд «Материал» металлопроката (sk_metal_mat_row) ————————————————
   Карточки переключают материал на месте — у неактивной та же рука. */
.sk-pick--metalmat .sk-mat { cursor: pointer; }
.sk-pick--metalmat .sk-mat.is-active { cursor: default; }
/* поле своей плотности под карточками материала («Другой») */
.sk-pick__own { display: flex; align-items: center; gap: 8px; padding: 0 20px 10px; font-size: 13px; }
.sk-pick__own[hidden] { display: none; }
.sk-pick__own .sk-input { width: 110px; height: var(--sk-input-h, 34px); padding: 0 8px; border: 1px solid var(--sk-line-input); background: var(--sk-paper); font: inherit; }
/* Лист «лёгкого» калькулятора на телефоне — по высоте чертежа: растяжка на
   экран (layout.css, для листов лестниц с щипком) оставляла под схемой
   пустоту в пол-экрана. */
@media screen and (max-width: 640px) {
	.sk-calc--board .sk-fig__sheet > svg { min-height: 0; }
}
/* СХЕМА НАВЕРХУ ('top' => true): лист в карточке над полями — без
   панели и подписи (они на ширину страницы), лупа полноэкранного режима
   видна и мышью. На печати лист уходит в итог и печатается как обычно. */
/* лист стоит внутри сетки формы — на всю её ширину */
.sk-board__scheme--top { grid-column: 1 / -1; margin: 14px 0 0; padding: 6px 8px 4px; background: var(--sk-paper); border: 1px solid var(--sk-line); }
.sk-board__scheme--top + .sk-form--board .sk-form__group:first-child,
.sk-board__scheme--top ~ .sk-form__group:first-of-type { padding-top: 8px; }
@media screen {
	.sk-board__scheme--top .sk-fig__bar,
	.sk-board__scheme--top .sk-fig__foot { display: none; }
	.sk-board__scheme--top .sk-fig__fab {
		display: flex; align-items: center; justify-content: center;
		position: absolute; right: 6px; bottom: 6px; z-index: 2;
		width: 34px; height: 34px; border: 1px solid var(--sk-line); border-radius: 50%;
		background: var(--sk-paper); color: var(--sk-muted); box-shadow: 0 1px 6px rgba(0, 0, 0, .14); cursor: pointer;
	}
	.sk-figfull .sk-board__scheme--top .sk-fig__fab, .sk-board__scheme--top .sk-figfull .sk-fig__fab { display: none; }
	/* справа — своя полоса под лупу: иначе она ложится на край чертежа
	   (17.10.2026, №264 — конец нижней полосы раскроя) */
	.sk-board__scheme--top .sk-fig__sheet { max-width: none; padding-right: 40px; box-sizing: border-box; }
	.sk-board__scheme--top .sk-fig__sheet > svg { min-height: 0; max-height: 260px; }
}
/* «Сбросить» в правом верхнем углу панели ввода (sk_board_form_open) */
.sk-board__tools { display: flex; justify-content: flex-end; padding: 10px 26px 0; line-height: 1; }
@media screen and (max-width: 760px) { .sk-board__tools { padding: 8px 12px 0; } }
/* под строкой «Сбросить» первая группа и карточка схемы — без лишнего отступа */
.sk-board__tools + .sk-form--board .sk-form__group:first-child { padding-top: 4px; }
.sk-board__tools + .sk-form--board > .sk-board__top,
.sk-board__tools + .sk-form--board > .sk-board__scheme--top { margin-top: 6px; padding-top: 0; }
@media print { .sk-board__tools { display: none; } }