/*
 * Оформление вывода результатов (разметку собирает includes/ui/result.js).
 * Конкретных цветов нет — только токены из includes/ui/tokens.php.
 */

/* ——— Легенда оценки ——————————————————————————————————————————————— */

.sk-legend {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 10px 20px;
	border-bottom: 1px solid var(--sk-line-2);
	font-size: 12px;
	font-weight: 600;
	color: var(--sk-muted-2);
}

.sk-legend__item { display: flex; align-items: center; gap: 6px; }

.sk-legend__item i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	display: block;
}

.sk-legend__item.is-ok   i { background: var(--sk-ok); }
.sk-legend__item.is-warn i { background: var(--sk-warn); }
.sk-legend__item.is-bad  i { background: var(--sk-bad); }

/* ——— Колонки величин ——————————————————————————————————————————————
 * Колонок столько, сколько влезает по ширине; на телефоне они встают друг
 * под друга сами — ширину решает браузер.                                   */

.sk-res {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	background: var(--sk-paper);
}

.sk-res__col { border-left: 1px solid var(--sk-line-2); min-width: 0; }
.sk-res__col:first-child { border-left: 0; }

.sk-res__title {
	padding: 14px 20px 13px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--sk-ink);
	background: var(--sk-tint);
	border-bottom: 1px solid var(--sk-line);
}

/* Подзаголовок внутри таблицы результатов: пачка величин внутри колонки
   («Нижний марш», «Верхний марш», «Проход под перекрытием»). Тише заголовка
   группы — тот шапка колонки, а этот всего лишь делит её на части. */
.sk-res__sub {
	padding: 12px 20px 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sk-muted);
	border-top: 1px solid var(--sk-line-2);
}
.sk-res__subrow:first-child .sk-res__sub { border-top: 0; }

.sk-res__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.sk-res__row > td {
	padding: 9px 8px;
	border-bottom: 1px solid var(--sk-line-3);
	vertical-align: middle;
}

/* Колонка буквы: узкая и постоянной ширины, чтобы подписи стояли в столбик. */
.sk-res__code {
	width: 46px;
	padding-left: 20px !important;
	text-align: center;
}

.sk-res__name {
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--sk-ink-soft);
	text-wrap: pretty;
}

.sk-res__note {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--sk-faint);
}

.sk-res__val {
	width: 108px;
	text-align: right;
	font-family: var(--sk-font-mono);
	font-size: 17px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--sk-ink);
}

/* Текстовое значение переносится по словам и занимает больше колонки: у
   справочных калькуляторов («Расшифровка марок сталей») значением идёт целая
   фраза, и в 108 пикселей она не помещается никаким шрифтом. */
.sk-res__val--text {
	width: auto;
	white-space: normal;
	overflow-wrap: break-word;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
}

.sk-res__val--text.sk-res__val--right { text-align: right; white-space: nowrap; }

.sk-res__unit {
	width: 52px;
	padding-right: 20px !important;
	font-size: 11.5px;
	color: var(--sk-faint);
}

/* ——— Оценка величины ——————————————————————————————————————————————
 * Оценку показывает ПОДЛОЖКА числа и единицы — как в макете. Ни планок сбоку,
 * ни перекраски текста: цвет букв менялся заодно с фоном, и число вне нормы
 * читалось хуже нормального, хотя внимания требует больше. Текст везде один
 * и тот же, меняется только фон.                                            */

.sk-res__row.is-ok   .sk-res__val,
.sk-res__row.is-ok   .sk-res__unit { background: var(--sk-ok-bg); }
.sk-res__row.is-warn .sk-res__val,
.sk-res__row.is-warn .sk-res__unit { background: var(--sk-warn-bg); }
.sk-res__row.is-bad  .sk-res__val,
.sk-res__row.is-bad  .sk-res__unit { background: var(--sk-bad-bg); }

/* ——— Итоговая строка —————————————————————————————————————————————— */

.sk-verdict {
	padding: 13px 20px;
	border-top: 1px solid var(--sk-line-2);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sk-ink-soft);
	background: var(--sk-wash);
}

.sk-verdict.is-ok   { background: var(--sk-ok-bg); }
.sk-verdict.is-warn { background: var(--sk-warn-bg); }
.sk-verdict.is-bad  { background: var(--sk-bad-bg); }

/* ——— Плитки величин (калькуляторы без чертежей) ——————————————————— */

.sk-kpi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
	gap: 1px;
	background: var(--sk-line-2);
}

.sk-kpi__item {
	background: var(--sk-paper);
	padding: 16px 18px;
	min-width: 0;
}

.sk-kpi__name {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 5px;
	font-size: 12px;
	line-height: 1.35;
	color: var(--sk-muted-2);
}

.sk-kpi__code {
	font-family: var(--sk-font-mono);
	font-size: 10.5px;
	padding: 0 4px;
	border: 1px solid var(--sk-line-input);
	color: var(--sk-accent-code);
}

.sk-kpi__val {
	font-family: var(--sk-font-mono);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--sk-accent-num);
	overflow-wrap: anywhere;
}

.sk-kpi__unit {
	font-size: 11.5px;
	font-weight: 400;
	color: var(--sk-muted-2);
}

.sk-kpi__note {
	margin-top: 5px;
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--sk-faint);
}

.sk-kpi__item.is-ok   .sk-kpi__val { color: var(--sk-ok); }
.sk-kpi__item.is-warn .sk-kpi__val { color: var(--sk-pro); }
.sk-kpi__item.is-bad  .sk-kpi__val { color: var(--sk-bad); }

/* ——— Список «подпись — значение» —————————————————————————————————— */

/* Список величин раскладывается в НЕСКОЛЬКО КОЛОНОК: на широком экране число
   стоит рядом со своим названием, а не в другом конце строки, и блок
   результатов не занимает пол-экрана. На узком контейнере («лёгкий» профиль,
   телефон) остаётся одна колонка.

   Колонки — СЕТКОЙ по группам, а не многоколоночным текстом: в `columns`
   браузер сам режет поток, и группа, не влезшая в остаток колонки, целиком
   уезжала вниз — под короткой группой оставалось пол-экрана пустоты. В сетке
   каждая группа занимает свою ячейку, как в макете. */
.sk-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	/* зазор рядов сеткой, а не отступом заголовка: у заголовков групп одного
	   ряда отступ один, и они стоят на одной линии (15.10.2026) */
	gap: 10px 40px;
	align-items: start;
	padding: 4px 20px 16px;
}

.sk-list__grp { min-width: 0; }

/* Легенда — не группа величин: она объясняет цвета всей таблицы, поэтому
   занимает всю ширину, а не отъедает колонку под себя. */
.sk-list__grp:has(> .sk-legend) { grid-column: 1 / -1; }
.sk-list .sk-legend { padding-left: 0; padding-right: 0; }
.sk-list__grp:empty { display: none; }

/* Заголовок группы — плашка на подложке, как в макете: строк много, и
   набранный текстом заголовок терялся среди них. */
.sk-list__title {
	margin: 6px 0 4px;
	padding: 9px 12px 8px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--sk-ink);
	background: var(--sk-tint);
	border-bottom: 1px solid var(--sk-line-2);
}


/* Строка тянется по высоте (align-items: stretch), чтобы подкрашенная ячейка
   значения закрывала её ЦЕЛИКОМ — вместе с пояснением в две-три строки, как
   столбец таблицы в макете. */
.sk-list__row {
	display: flex;
	align-items: stretch;
	gap: 10px;
	padding: 6px 12px;
	border-bottom: 1px solid var(--sk-line-3);
	font-size: 13.5px;
}

.sk-list__name { color: var(--sk-muted); text-wrap: pretty; }

/* Значение — обычно короткое число, переносить его незачем. Но в «Указанных
   размерах» значением бывает выбранный вариант списка целой фразой («Прочностные
   характеристики грунта получены в результате испытаний»): при nowrap такая
   строка не сжималась и уносила страницу за край экрана. Переносим по словам, а
   число вместе с единицей удерживает nowrap у .sk-list__unit. */
.sk-list__val {
	display: inline-flex;
	align-items: baseline;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 5px;
	min-width: 0;
	margin-left: auto;
	font-family: var(--sk-font-mono);
	font-weight: 600;
	text-align: right;
	overflow-wrap: break-word;
	color: var(--sk-ink);
}

.sk-list__unit { font-weight: 400; font-size: 11.5px; color: var(--sk-faint); white-space: nowrap; }

/* Пояснение под названием величины (норма, что менять). */
.sk-list__note {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--sk-faint);
	text-wrap: pretty;
}

/* Оценка величины — ПОДЛОЖКА числа (как в макете): зелёная в норме, жёлтая
   «допустимо», красная вне нормы. Ни планки слева, ни цветного текста —
   буквы везде одного цвета, меняется только фон под ними. */
.sk-list__row--is-ok   .sk-list__val,
.sk-list__row--is-warn .sk-list__val,
.sk-list__row--is-bad  .sk-list__val {
	/* Заливка — ЯЧЕЙКА, а не плашка под текстом: отрицательные поля растягивают
	   её на всю высоту строки и до её правого края, как столбец значений в
	   таблице макета. Поля добавляем только подкрашенным — иначе строки без
	   оценки съехали бы относительно них. */
	min-width: 96px;
	padding: 6px 12px;
	margin: -6px -12px -6px auto;
	border-radius: 0;
}

.sk-list__row--is-ok   .sk-list__val { background: var(--sk-ok-bg); }
.sk-list__row--is-warn .sk-list__val { background: var(--sk-warn-bg); }
.sk-list__row--is-bad  .sk-list__val { background: var(--sk-bad-bg); }

/* ——— Спецификация ————————————————————————————————————————————————— */

.sk-spec__i {
	width: 44px;
	font-family: var(--sk-font-mono);
	color: var(--sk-muted-2);
}

/* МАРКИРОВКА ДЕТАЛИ — «Кс-1», «Ст-3» (значения выводит ui/marks.js).
   Своя колонка сразу за номером позиции: марку ищут глазом сверху вниз по
   столбцу. Моноширинный шрифт, как у номера, — так столбик марок стоит ровно,
   и «Ст-1» под «Ст-10» не разъезжается. Цвет обычный, а не оранжевый цвет
   буквы размера (--sk-letter): буква у поля обозначает РАЗМЕР на чертеже,
   а маркировка — деталь; одним цветом их путать нельзя.
   Ширина — под ЗАГОЛОВОК, а не под содержимое: «Кс-1» короче слова
   «Маркировка», и колонку всё равно распирает шапка (заголовок из одного
   слова не переносится). Прежние 66 px были меньше этого минимума и молча
   ничего не значили. */
.sk-spec__mark { width: 108px; }

.sk-mark {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid var(--sk-line);
	border-radius: 4px;
	font-family: var(--sk-font-mono);
	font-size: 12px;
	line-height: 1.5;
	white-space: nowrap;
	color: var(--sk-ink);
	background: var(--sk-wash);
}

.sk-spec__name { font-weight: 600; color: var(--sk-ink); }

.sk-spec__dims {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 220px;
}

.sk-spec__dim {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sk-spec__k {
	font-size: 12px;
	color: var(--sk-muted-2);
	margin-right: auto;
}

.sk-spec__v {
	font-family: var(--sk-font-mono);
	font-size: 14px;
	font-weight: 600;
}

/* Буква в плотных таблицах — чуть мельче текста строки. */
.sk-code--sm { font-size: 0.9em; }

/* ——— Ведомость заготовок ————————————————————————————————————————
 * Та же таблица спецификации, но с колонкой эскиза: у каждой строки своя
 * маленькая картинка. Большим листом-SVG это уже было и читалось плохо —
 * чертёжный шрифт мелкий, строки не переносятся, на телефоне не увеличить.  */

.sk-cut__group td {
	padding-top: 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sk-muted-2);
	background: var(--sk-wash);
}

.sk-cut__fig { width: 380px; }   /* эскиз печатается крупнее — шрифт как на листах (cutlist.js, sketchK) */

/* СТРАХОВКА ОТ СЖАТИЯ (29.09.2026): в узкой колонке таблица с авто-раскладкой
   ужимала колонку «Эскиз» до полоски, и рисунок пропадал. Ниже минимума
   таблица едет вбок внутри .sk-table-scroll; в карточном режиме телефона
   минимум снимается (см. медиаблок). */
.sk-table.sk-cut { min-width: 820px; }

.sk-cut__qty { white-space: nowrap; }

/* Разряды в столбик: число своей ширины по правому краю, единица — справа от
   него и тоже своей ширины. Иначе «1 шт» и «28 шт» смещали друг друга, и
   колонка выглядела пляшущей. */
.sk-cut__qtyv {
	display: inline-block;
	min-width: 2.2em;
	text-align: right;
}

.sk-cut__qtyu {
	display: inline-block;
	width: 2.2em;
	margin-left: 6px;
	font-family: var(--sk-font-sans);
	font-size: 12px;
	text-align: left;
	color: var(--sk-muted-2);
}


.sk-cut__svg {
	display: block;
	max-width: 100%;
	height: auto;
}

.sk-cut__note {
	padding: 12px 20px 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sk-ink);
}

.sk-cut__note--muted { color: var(--sk-muted-2); }

/* ——— Печать ——————————————————————————————————————————————————————— */

@media print {
	.sk-res { grid-template-columns: repeat(2, 1fr); }
	.sk-res__col { break-inside: avoid; }
	.sk-kpi { grid-template-columns: repeat(3, 1fr); }
}

/* ——— Спецификация на телефоне ———————————————————————————————————
 * Пять колонок в 290 px не помещаются никаким шрифтом, и таблица уезжала
 * вбок. На узком экране строка разворачивается в карточку: название, под ним
 * размеры, ниже количество и объём со своими подписями (data-label ставит
 * result.js). Номер строки прячем — в списке он ничего не различает.        */

@media (max-width: 640px) {
	.sk-table.sk-spec,
	.sk-table.sk-spec tbody,
	.sk-table.sk-spec tr,
	.sk-table.sk-spec td { display: block; width: auto; }

	.sk-table.sk-spec thead { display: none; }

	.sk-table.sk-spec tr {
		padding: 11px 14px;
		border-bottom: 1px solid var(--sk-line-2);
	}

	.sk-table.sk-spec td {
		padding: 1px 0;
		border: 0;
	}

	.sk-table.sk-spec td:empty { display: none; }
	.sk-table.sk-spec .sk-spec__i { display: none; }
	/* Марку, в отличие от номера позиции, на телефоне ОСТАВЛЯЕМ: номер в
	   карточке строки ничего не различает, а марка — это имя детали, по
	   которому на неё ссылаются. Стоит первой строкой карточки, над названием. */
	.sk-table.sk-spec .sk-spec__mark { width: auto; padding-bottom: 3px; }
	.sk-table.sk-spec .sk-spec__dims { min-width: 0; margin: 3px 0; }

	/* СТРОКИ РАЗМЕРОВ — ВО ВСЮ ШИРИНУ КАРТОЧКИ (09.10.2026, замечание
	   заказчика: «на узком экране таблица сильно сжимается, а должна быть по
	   ширине экрана»): подпись слева, число справа, между ними пунктир.
	   Прежде (29.09.2026) подпись стояла узкой колонкой в 5.4em, число —
	   вплотную за ней: «Длина по уклону» рвалась на две строки, а карточка
	   занимала левую треть. Пунктир держит число при своей подписи — ради
	   этого 29.09 его и прижимали. */
	.sk-table.sk-spec .sk-spec__dims { gap: 6px; }
	.sk-table.sk-spec .sk-spec__dim { align-items: baseline; gap: 6px; }
	.sk-table.sk-spec .sk-spec__k {
		margin-right: 0;
		flex: 1 1 auto;
		display: flex;
		align-items: baseline;
		gap: 6px;
		min-width: 0;
		font-size: 13px;
	}
	.sk-table.sk-spec .sk-spec__k::after,
	.sk-table.sk-spec td.sk-table__num::after {
		content: '';
		flex: 1 1 auto;
		min-width: 12px;
		border-bottom: 1px dotted var(--sk-line-input);
		transform: translateY(-3px);
	}
	.sk-table.sk-spec .sk-spec__v { flex: none; text-align: right; }

	/* количество и объём — той же строкой «подпись ····· число» */
	.sk-table.sk-spec td.sk-table__num {
		display: flex;
		align-items: baseline;
		gap: 6px;
		padding: 3px 0;
		text-align: right;
		white-space: normal;
	}
	.sk-table.sk-spec td.sk-table__num::after { order: 1; }
	.sk-table.sk-spec td.sk-table__num > * { order: 2; }
	.sk-table.sk-spec .sk-cut__qtyv { min-width: 0; }
	.sk-table.sk-spec .sk-cut__qtyu { width: auto; margin-left: -2px; }

	.sk-table.sk-spec td.sk-table__num::before {
		content: attr(data-label);
		order: 0;
		font-size: 13px;
		font-family: var(--sk-font-sans);
		color: var(--sk-muted-2);
	}
}

@media (max-width: 640px) {
	.sk-table.sk-spec .sk-cut__fig { width: auto; padding: 4px 0; }
	.sk-table.sk-spec tr.sk-cut__group td { padding: 14px 0 4px; }
	.sk-cut__note { padding-left: 14px; padding-right: 14px; }

	/* Карточный режим: страховочная min-width таблицы снимается, эскиз идёт
	   ВО ВСЮ ширину карточки (cutlist.js на узком экране печатает его своим
	   конфигом — кегль 20 в поле 260, см. CFG_M). */
	.sk-table.sk-cut { min-width: 0; }
	.sk-table.sk-spec .sk-cut__svg { width: 100%; height: auto; }
}

/* ═══════════ ТЕЛЕФОН: АУДИТ ЮЗАБИЛИТИ 29.09.2026 (spec_usability_lestn.md) ═══════════ */

/* Число и единица — одним неразрывным куском (п. 14, разметку даёт
   SKResult.line/list → valHtml). */
.sk-list__vu { white-space: nowrap; }

/* ——— Таблица «Эргономика и прочность» на узком экране (п. 8) ——————————
   Колонка названия была узкой, длинное пояснение нормы наматывало 8–10 строк,
   а колонка значения пустовала: одна строка — до 500 px. Теперь строка
   перекладывается сеткой: буква · название · значение · единица в одной
   строке, ПОЯСНЕНИЕ — ПОД НЕЙ во всю ширину карточки. td названия
   раскрывается display: contents, его текст становится ячейкой сетки, а
   пояснение (.sk-res__note) — своей строкой. */
@media (max-width: 640px) {
	.sk-res__table,
	.sk-res__table tbody { display: block; }
	.sk-res__table colgroup { display: none; }

	.sk-res__row {
		display: grid;
		grid-template-columns: 34px minmax(0, 1fr) auto auto;
		align-items: baseline;
		column-gap: 8px;
		padding: 8px 14px;
		border-bottom: 1px solid var(--sk-line-3);
	}
	.sk-res__row > td { padding: 0; border-bottom: 0; }

	.sk-res__code {
		grid-column: 1;
		grid-row: 1;
		width: auto;
		padding-left: 0 !important;
		text-align: left;
	}
	/* Название раскрывается: текст — ячейка (1-я строка, 2-я колонка,
	   автоплейсмент), пояснение — своя строка на всю ширину. */
	.sk-res__name { display: contents; }
	.sk-res__note {
		grid-column: 1 / -1;
		margin-top: 3px;
	}
	.sk-res__val {
		grid-column: 3;
		grid-row: 1;
		width: auto;
		font-size: 15px;
	}
	.sk-res__unit {
		grid-column: 4;
		grid-row: 1;
		width: auto;
		padding-right: 0 !important;
	}

	/* Оценка — ещё и ТОЧКОЙ у значения: цветная подложка на телефоне слабо
	   считывается. Цвета те же, что у легенды. */
	.sk-res__row.is-ok   .sk-res__val::before,
	.sk-res__row.is-warn .sk-res__val::before,
	.sk-res__row.is-bad  .sk-res__val::before {
		content: '';
		display: inline-block;
		width: 8px;
		height: 8px;
		margin-right: 6px;
		border-radius: 50%;
		vertical-align: 1px;
	}
	.sk-res__row.is-ok   .sk-res__val::before { background: var(--sk-ok); }
	.sk-res__row.is-warn .sk-res__val::before { background: var(--sk-warn); }
	.sk-res__row.is-bad  .sk-res__val::before { background: var(--sk-bad); }

	/* Подзаголовок внутри таблицы («Нижний марш») — обычной строкой блока. */
	.sk-res__subrow { display: block; }
	.sk-res__subrow .sk-res__sub { display: block; }
}

/* ——— Строка «Итого» спецификации (колонки «Масса» и «Стоимость»,
 * SKResult.spec opts.extra, 16.10.2026): суммы под своими колонками,
 * жирным и с линией сверху — итог ищут глазом внизу таблицы.               */
.sk-table.sk-spec .sk-spec__total td {
	font-weight: 700;
	border-top: 2px solid var(--sk-ink);
	background: var(--sk-wash);
}
@media (max-width: 640px) {
	.sk-table.sk-spec tfoot,
	.sk-table.sk-spec .sk-spec__total { display: block; }
	.sk-table.sk-spec .sk-spec__total { padding: 11px 14px; border-top: 2px solid var(--sk-ink); }
	.sk-table.sk-spec .sk-spec__total td { display: block; border: 0; padding: 1px 0; background: none; }
}