/*
 * Каркас страницы калькулятора: карточки, шапки, сетка формы, кнопки, вкладки,
 * таблицы, лист чертежа, 3D-сцена, статья. Разметку печатает includes/ui/layout.php.
 * Конкретных цветов здесь нет — только токены из includes/ui/tokens.php.
 */

/* ——— Корень ——————————————————————————————————————————————————————
 * Серый фон и белые карточки — это и есть «лист документа» из макета.
 * Когда фон страницы возьмёт на себя тема, здесь останется одна строка.     */

.sk-calc {
	font-family: var(--sk-font-sans);
	font-size: 14px;
	line-height: 1.45;
	color: var(--sk-ink);
	background: var(--sk-page);
	padding: 20px;
	-webkit-font-smoothing: antialiased;
}

.sk-calc *,
.sk-calc *::before,
.sk-calc *::after { box-sizing: border-box; }

/* На телефоне своих боковых полей у калькулятора нет: поле страницы (10 px)
   даёт тема, второе поле внутри только сужало чертёж (29.09.2026). */
@media (max-width: 640px) {
	.sk-calc { padding: 12px 0; }
}

/* СЕТКА КАРТОЧЕК — одна на все профили страницы (04.09.2026). Была только у
   «лёгких» (`.sk-calc--lite > .sk-grid`): у них форма и результат стоят рядом.
   Но пара соседних карточек нужна и на «профессиональной» странице — у
   металлических лестниц «Эргономика лестницы» и «Геометрия марша» шли друг под
   другом, хотя на остальных страницах они рядом (замечание заказчика). Правило
   общее: `.sk-grid` раскладывает вложенные карточки в колонки и сам сжимается
   в одну на узком экране. */
.sk-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
	gap: 22px;
	align-items: start;
}

/* Три карточки в ряд — и на экране, и на листе печати/PDF (№28: расчётные
   параметры · эргономика · геометрия). Внутри узкой колонки таблица итога
   идёт одним столбцом, иначе печатное правило `.sk-res` делит её надвое. */
/* Карточка-вердикт: фон по оценке всего расчёта (№24, «Результат
   расчёта»: зелёный — параметры годятся, розовый — нет). Цвета — те же
   подложки, что у строк с оценкой. */
.sk-card.sk-card--ok  { background: var(--sk-ok-bg);  border-color: var(--sk-ok); }
.sk-card.sk-card--bad { background: var(--sk-bad-bg); border-color: var(--sk-bad); }
.sk-card--ok .sk-kpi__item  { background: var(--sk-ok-bg); }
.sk-card--bad .sk-kpi__item { background: var(--sk-bad-bg); }

/* Карточка на пол-листа (№24, «Допустимый шаг по сечениям»: короткая
   таблица во всю ширину растягивает число далеко от подписи). На узком
   экране — во всю ширину. */
@media screen and (min-width: 783px) {
	.sk-card--half { max-width: calc((100% - 22px) / 2); }
}

.sk-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.sk-capture .sk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media print {
	.sk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.sk-grid--3 .sk-res { grid-template-columns: 1fr; }
	/* колонка в треть A4 узкая: строка сеткой, пояснение под ней во всю
	   ширину карточки — как у таблицы итога на телефоне (result.css) */
	.sk-grid--3 .sk-res__table,
	.sk-grid--3 .sk-res__table tbody { display: block; }
	.sk-grid--3 .sk-res__table colgroup { display: none; }
	.sk-grid--3 .sk-res__row {
		display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto;
		align-items: baseline; column-gap: 4px; padding: 4px 6px;
		border-bottom: 1px solid var(--sk-line-3); font-size: 10px;
	}
	.sk-grid--3 .sk-res__row > td { padding: 0; border-bottom: 0; }
	.sk-grid--3 .sk-res__code { grid-column: 1; grid-row: 1; width: auto; padding-left: 0 !important; }
	.sk-grid--3 .sk-res__name { display: contents; font-size: 10.5px; line-height: 1.25; }
	.sk-grid--3 .sk-res__note { grid-column: 2 / -1; margin-top: 1px; font-size: 8.5px; }
	.sk-grid--3 .sk-res__val { grid-column: 3; grid-row: 1; width: auto; font-size: 11px; }
	.sk-grid--3 .sk-res__unit { grid-column: 4; grid-row: 1; width: auto; padding-right: 0 !important; font-size: 9px; }
	.sk-grid--3 .sk-res__subrow { display: block; }
	.sk-grid--3 > .sk-card { break-inside: avoid; }
}

/* Во всю ширину сетки — блок «Скачать», статья. */
.sk-grid__wide { grid-column: 1 / -1; }

/* Внутри сетки соседние карточки НЕ отбиваются сверху: отступ между ними даёт
   сама сетка (`gap`), а margin от правила `.sk-card + .sk-card` опускал вторую
   колонку на 22 px ниже первой. */
.sk-grid > .sk-card + .sk-card { margin-top: 0; }

/* ——— Карточка ———————————————————————————————————————————————————— */

.sk-card {
	display: block;
	background: var(--sk-paper);
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-radius);
}

.sk-card + .sk-card,
.sk-grid + .sk-card,
.sk-card + .sk-grid,
.sk-split + .sk-card,
.sk-card + .sk-split,
.sk-picks + .sk-split { margin-top: 22px; }

/* ——— Пара «модель + параметры» ————————————————————————————————————
 * Слева 3D (2fr ≈ 40%), справа поля (3fr). 3D липкое: при прокрутке длинного
 * списка параметров модель остаётся в кадре, и результат движения ползунка
 * виден сразу — ради этого пара и заведена.                                  */

.sk-split {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 22px;
	align-items: start;
}

.sk-split > .sk-card:first-child {
	position: sticky;
	/* Ниже липкой шапки сайта (--sk-sticky-top задаёт тема), плюс воздух.
	   Без слагаемого верхушка карточки с 3D уходит ЗА шапку. */
	top: calc(var(--sk-sticky-top, 0px) + 12px);
	z-index: 2;
}

/* Карточки внутри пары стоят рядом, а не друг под другом. */
.sk-split > .sk-card + .sk-card { margin-top: 0; }

/* В узкой колонке 3D перестаёт быть липким и уходит наверх обычной карточкой. */
@media (max-width: 1000px) {
	/* minmax(0, …), а не 1fr: иначе колонка раздувается под min-content
	   содержимого (канва 3D задана в пикселях) и уезжает за экран. */
	.sk-split { grid-template-columns: minmax(0, 1fr); }
	.sk-split > .sk-card:first-child { position: static; }
	.sk-split > .sk-card + .sk-card { margin-top: 22px; }
}

@media print {
	.sk-split { display: block; }
	.sk-split > .sk-card:first-child { position: static; }
	.sk-split > .sk-card + .sk-card { margin-top: 22px; }
}

.sk-card__head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 14px 22px;
	border-bottom: 1px solid var(--sk-line);
}

.sk-card__title {
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--sk-ink);
}

.sk-card__sub {
	font-size: 12px;
	font-weight: 600;
	color: var(--sk-faint);
}

.sk-card__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.sk-card__body { padding: 18px 22px 22px; }

/* ——— Якорные кнопки над калькулятором ————————————————————————————
 * «Чертежи · Расчёты · Скачать · Информация · Комментарии». Разметку печатает
 * ui/anchors.php из sk_calc_open(), поведение — ui/anchors.js. Кнопка секции,
 * которой на странице нет, не показывается вовсе.                            */

.sk-anchors {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

.sk-anchors__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 16px;
	font-family: var(--sk-font-sans);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sk-accent);
	background: var(--sk-paper);
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-radius);
	cursor: pointer;
	transition: color .12s, background-color .12s, border-color .12s;
}

.sk-anchors__btn svg { flex: none; }

.sk-anchors__btn:hover {
	color: var(--sk-paper);
	background: var(--sk-accent);
	border-color: var(--sk-accent);
}

.sk-anchors__btn:focus-visible {
	outline: 2px solid var(--sk-accent);
	outline-offset: 2px;
}

/* На бумаге кнопки не нажимаются, а место занимают — как и блок «Скачать».
   Тот же список гасит перед съёмкой PDF calc-actions.js (SCREEN_ONLY). */
@media print {
	.sk-anchors { display: none; }
}

/* НА ТЕЛЕФОНЕ ЯКОРНЫХ КНОПОК НЕТ (10.10.2026, решение заказчика: «кнопки
   чертежи-скачать-расчёты тоже скрой на моб версии»). На узком экране они
   занимали два-три ряда над калькулятором, а страница там и так листается
   пальцем сверху вниз. */
@media (max-width: 640px) {
	.sk-anchors { display: none; }
}

/* ——— Заголовок-капс ——————————————————————————————————————————————
 * Моноширинный с разрядкой — как надпись на чертёжном штампе.               */

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

/* ——— Сетка формы —————————————————————————————————————————————————
 * Колонок столько, сколько влезает; ширину решает браузер, а не шаблон.     */

.sk-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
	column-gap: 48px;
	padding: 6px 26px 22px;
}

@media (max-width: 640px) {
	.sk-form { padding: 4px 16px 18px; }
}

/* ОТСТУП ПЕРЕД ПОДЗАГОЛОВКОМ ГРУППЫ — 42 px (25.09.2026, просьба заказчика:
   «отступ перед подзаголовком увеличь в 2 раза», затем «ещё в полтора раза»;
   было 14 → 28 → 42). Группа отделяется
   от полей предыдущей и читается началом нового блока. Первая группа
   (`:first-child` ниже) стоит у шапки карточки — у неё свой отступ. */
.sk-form__group {
	grid-column: 1 / -1;
	padding: 42px 0 4px;
	font-family: var(--sk-font-mono);
	/* РАЗМЕР ПОДЗАГОЛОВКА — 15 px (25.09.2026, просьба заказчика: «сам этот
	   подзаголовок сильно меньше чем даже обычный шрифт — увеличь в 2 раза»,
	   затем «огромные получились, уменьши в полтора раза»; 11 → 22 → 15).
	   Пояснение под ним (`.sk-form__hint`) задано своим размером и не растёт. */
	font-size: 15px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--sk-accent-soft);
}
/* НА ТЕЛЕФОНЕ ОТСТУП ПЕРЕД ПОДЗАГОЛОВКОМ ВДВОЕ МЕНЬШЕ (15.10.2026,
   заказчик: «цель — сжать интерфейс»): 42 → 22 px, на компьютере прежний. */
@media (max-width: 640px) {
	.sk-form__group { padding-top: 22px; }
}

/* Пояснение к подзаголовку группы — обычным шрифтом, строкой ниже. */
.sk-form__hint {
	display: block;
	margin-top: 4px;
	font-family: var(--sk-font-sans);
	font-size: 12px;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sk-muted);
}

/* Первая группа стоит вплотную к шапке карточки. */
.sk-form__group:first-child { padding-top: 12px; }

/* Форма в узкой колонке (калькулятор без чертежей) — всегда одна колонка. */
.sk-form--single { grid-template-columns: 1fr; column-gap: 0; padding: 6px 22px 20px; }


.sk-cff-out {
	padding: 16px 20px 20px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--sk-ink-soft);
}

.sk-cff-out b,
.sk-cff-out strong {
	font-family: var(--sk-font-mono);
	font-weight: 600;
	color: var(--sk-accent-num);
}

.sk-cff-out table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0;
	font-size: 13.5px;
}

.sk-cff-out th,
.sk-cff-out td {
	padding: 8px 10px;
	text-align: left;
	border-bottom: 1px solid var(--sk-line-2);
}

.sk-cff-out th { font-weight: 700; background: var(--sk-wash); }

.sk-cff-err { color: var(--sk-bad); }

/* Три органа управления в одной строке поля (слой стены: группа, материал,
   толщина). На узком экране встают друг под друга. */
.sk-row3 {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 10px;
	align-items: center;
}

@media (max-width: 720px) {
	.sk-row3 { grid-template-columns: 1fr; }
}

/* ——— Кнопки ——————————————————————————————————————————————————————— */

.sk-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 15px;
	font-family: var(--sk-font-sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sk-ink);
	background: var(--sk-paper);
	border: 1px solid var(--sk-line-input);
	border-radius: var(--sk-radius);
	cursor: pointer;
	transition: border-color .12s, background-color .12s, color .12s;
}

.sk-btn:hover { border-color: var(--sk-ink); }

.sk-btn--primary {
	font-weight: 700;
	color: var(--sk-paper);
	background: var(--sk-ink);
	border-color: var(--sk-ink);
}

.sk-btn--primary:hover {
	background: var(--sk-accent);
	border-color: var(--sk-accent);
}

.sk-btn--quiet {
	padding: 6px 8px;
	font-size: 12px;
	color: var(--sk-muted-2);
	background: none;
	border-color: transparent;
}

.sk-btn--quiet:hover { color: var(--sk-ink); border-color: transparent; }

.sk-icon { flex: none; }

/* Кнопка-стрелка внутри таблицы (переставить строку сметы). */
.sk-iconbtn {
	padding: 0 4px;
	font-size: 13px;
	line-height: 1;
	color: var(--sk-accent);
	background: none;
	border: 0;
	cursor: pointer;
}

.sk-iconbtn:hover { color: var(--sk-ink); }

/* Строка формы, где бейдж и подпись стоят в ряд (переключатель). */
.sk-row-inline {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* ——— Вкладки ——————————————————————————————————————————————————————
 * Ими переключаются чертежи: «Вид сбоку / План / Развёртка / Спецификация». */

/* Обёртка полосы (29.09.2026, аудит юзабилити, п. 1): в ней сама полоса
   (прокручивается вбок), фейды по краям и кнопка «Ещё N». Липнет ОНА —
   см. правило sticky ниже. */
.sk-tabs-bar {
	position: relative;
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--sk-line);
}

.sk-tabs {
	display: flex;
	gap: 0;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: thin;
}

/* ЛЕВЫЙ ФЕЙД: виден, только когда влево есть скрытые вкладки (класс ставит
   ui/tabs.js по scrollLeft). Правый фейд нарисован у кнопки «Ещё N» (ниже):
   она стоит вплотную к правому краю, и градиент под ней был бы не виден. */
.sk-tabs-bar::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 26px;
	background: linear-gradient(90deg, var(--sk-paper), transparent);
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s;
	z-index: 1;
}
.sk-tabs-bar.is-fade-l::before { opacity: 1; }

/* Кнопка «Ещё N»: постоянный знак, что вкладок больше, чем видно. Показывает
   список всех листов столбиком (меню печатает ui/tabs.js). */
.sk-tabs-all {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 12px;
	border: 0;
	border-left: 1px solid var(--sk-line-2);
	background: var(--sk-paper);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	color: var(--sk-accent-code);
	cursor: pointer;
	white-space: nowrap;
}
.sk-tabs-all[hidden] { display: none; }
.sk-tabs-all::before {
	content: '';
	position: absolute;
	left: -26px;
	top: 0;
	bottom: 0;
	width: 26px;
	background: linear-gradient(90deg, transparent, var(--sk-paper));
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s;
}
.sk-tabs-bar.is-fade-r .sk-tabs-all::before { opacity: 1; }

/* Список вкладок столбиком — раскрывает кнопка «Ещё N». */
.sk-tabs-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 6;
	min-width: 220px;
	max-width: min(320px, calc(100vw - 16px));
	max-height: min(60vh, 420px);
	overflow-y: auto;
	background: var(--sk-paper);
	border: 1px solid var(--sk-line);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
}
.sk-tabs-menu[hidden] { display: none; }
.sk-tabs-menu button {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border: 0;
	border-bottom: 1px solid var(--sk-line-3);
	background: none;
	font: inherit;
	font-size: 13px;
	text-align: left;
	color: var(--sk-ink-soft);
	cursor: pointer;
}
.sk-tabs-menu button:hover { background: var(--sk-wash); }
.sk-tabs-menu button.is-active { font-weight: 700; color: var(--sk-ink); background: var(--sk-tint); }

.sk-tab {
	flex: none;
	padding: 12px 16px;
	font-family: var(--sk-font-sans);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--sk-muted);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: color .12s, border-color .12s;
}

.sk-tab:hover { color: var(--sk-ink); }

.sk-tab.is-active {
	color: var(--sk-ink);
	border-bottom-color: var(--sk-ink);
}

.sk-tabpanel[hidden] { display: none; }

/* ЛИПКАЯ ПАНЕЛЬ ВКЛАДОК (31.08.2026). Чертежей у лестницы до восьми, лист
   высокий, и пока прокручиваешь один вид, переключиться на соседний нечем:
   ряд «Вид сбоку · План · Развёртка · Заготовки» остался вверху страницы.
   Теперь он едет вместе с чертежами и стоит над ними всё время, пока смотришь
   карточку с чертежами.

   Липнет в пределах .sk-tabs-box — своей карточки: ушли чертежи с экрана,
   ушла и панель. Отступ сверху — общий токен --sk-sticky-top (сколько занято
   постоянно видимым; сейчас ноль, шапка сайта не липкая).

   Фон обязателен: без него сквозь панель просвечивал бы уезжающий под неё
   лист. Своя высота панели уходит в --sk-tabs-h (её меряет ui/tabs.js) —
   оттуда её берёт липкая шапка таблицы внутри вкладки «Заготовки», иначе
   строка заголовка встала бы ПОД панель. */
@media screen {
	.sk-tabs-bar {
		position: sticky;
		top: var(--sk-sticky-top, 0px);
		z-index: 4;
		background: var(--sk-paper);
	}
}

/* ——— Лист чертежа ————————————————————————————————————————————————— */

/* Figure — колонка: название вида, ПАНЕЛЬ УПРАВЛЕНИЯ, лист, подпись. Панель
   печатает sk_fig_close (только там известно, нужна ли галочка «Зеркально»),
   а наверх её поднимает `order` — разметка шаблонов не меняется. */
.sk-fig { margin: 0; display: flex; flex-direction: column; }
.sk-fig__title { order: 0; }
.sk-fig__bar   { order: 1; }
.sk-fig__sheet { order: 2; }
.sk-fig__foot  { order: 3; }

.sk-fig__title {
	padding: 12px 20px 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sk-ink);
}

/* Это органы управления ПРОСМОТРОМ, а не свойства чертежа, поэтому стоят
   над листом отдельной полосой, как панель инструментов, а не в подписи
   под ним. */
.sk-fig__bar {
	/* Липнет под панелью вкладок (её высоту меряет ui/tabs.js → --sk-tabs-h),
	   пока лист на экране: у высокого листа кнопки нужны и на его середине.
	   Вне вкладок --sk-tabs-h не задана, и панель липнет к верху окна. */
	position: sticky;
	top: calc(var(--sk-sticky-top, 0px) + var(--sk-tabs-h, 0px));
	z-index: 3;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px 14px;
	flex-wrap: wrap;
	padding: 6px 12px;
	border-top: 1px solid var(--sk-line-2);
	border-bottom: 1px solid var(--sk-line-2);
	background: var(--sk-page);
}
.sk-fig__bar-l, .sk-fig__bar-r { display: inline-flex; align-items: center; gap: 6px; }
.sk-fig__bar-r { gap: 12px; }
.sk-fig__bar-hint {
	margin-left: 8px;
	font-size: 11px;
	color: var(--sk-muted-2);
	user-select: none;
}
@media (max-width: 720px) { .sk-fig__bar-hint { display: none; } }

.sk-fig__tool {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	border: 1px solid var(--sk-line);
	border-radius: 4px;
	background: var(--sk-paper);
	font: inherit;
	font-size: 12px;
	color: var(--sk-muted);
	cursor: pointer;
}
.sk-fig__tool:hover { color: var(--sk-ink); border-color: var(--sk-line-input); }
.sk-fig__tool .sk-icon { flex: none; }
.sk-fig__zoom { color: var(--sk-ink); }

/* Лист вписан в ширину колонки на любом экране: вбок он больше не ездит.
   Разглядывание — колесом мыши (масштаб) и правой кнопкой (сдвиг) прямо на
   странице (includes/ui/fig.js): svg получает transform, а лист-окно режет
   лишнее. На телефоне A3 — это 290 px, и подписи в 5 мм читаются плохо,
   поэтому там лист открывают «Полноэкранным режимом», где работают палец
   и щипок. */
.sk-fig__sheet {
	display: block;
	position: relative;
	background: var(--sk-paper);
	overflow: hidden;
	/* Ширина ограничена, лист стоит по центру колонки. */
	width: 100%;
	max-width: 1040px;
	align-self: center;    /* .sk-fig — flex-колонка: auto-margin тут сжал бы лист до 300 px */
}
/* ПЛОСКИЙ ЛИСТ — ШИРЕ (15.09.2026, просьба заказчика: «вид сверху можно на
   15–20 % больше сделать, и он всё равно будет на экран влазить»). План,
   лёгший боком, после обрезки канвы по содержимому (gost-fig.js, render)
   выходит вдвое ниже вида сбоку, и полоса 1040 px оставляла его мелким при
   пустой колонке по бокам. Класс ставит сам лист по пропорции канвы
   (высота ≤ 0.55 ширины); прочие листы остаются 1040 px — у них рост ширины
   вытолкнул бы вид за один экран. */
.sk-fig__sheet--flat { max-width: 1240px; }

.sk-fig__sheet > svg {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: 0 0;
}
/* Чертёж там и так обрезан по нарисованному (gost-fig.js, render) и
   упирается в ширину; выше становится ОКНО листа: 100svh минус липкая полоса
   вкладок, панель листа и мини-полоса результата. Растёт сам <svg>, а не
   отступ вокруг него: чертёж внутри центрирует preserveAspectRatio (meet), а
   начало координат svg остаётся в углу листа — от него ui/fig.js считает
   масштаб к курсору и щипок. Лист, который и так выше экрана (ведомости),
   это правило не задевает. */
@media screen and (max-width: 640px) {
	.sk-fig__sheet > svg { min-height: calc(100vh - 170px); min-height: calc(100svh - 170px); }
	.sk-figfull .sk-fig__sheet > svg { min-height: 0; }
}
/* ВЫБРАННЫЙ ЛИСТ — тот, что берёт колесо (08.09.2026, см. includes/ui/fig.js).
   Без щелчка по листу колесо прокручивает страницу, а не масштабирует; рамка
   показывает, почему колесо ведёт себя по-разному. Тень внутрь, а не рамка:
   лист не должен дёргаться на пиксель при выборе. */
.sk-fig__sheet--active { box-shadow: inset 0 0 0 2px var(--sk-accent); }
@media print { .sk-fig__sheet--active { box-shadow: none; } }
.sk-figfull .sk-fig__sheet--active { box-shadow: none; }

.sk-fig__sheet--drag { cursor: grabbing; }
.sk-fig__sheet--drag > svg { pointer-events: none; }

/* «Зеркально» — галочка в панели листа: состояние, а не действие. Стоит в
   одном ряду с «Полноэкранный режим», поэтому и набрана тем же кеглем. */
.sk-fig__mir {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 12px;
	color: var(--sk-muted);
	user-select: none;
}
.sk-fig__mir:hover { color: var(--sk-ink); }
.sk-fig__mir input { width: 14px; height: 14px; margin: 0; accent-color: var(--sk-accent); }

.sk-fig__foot-r { display: inline-flex; align-items: center; gap: 12px; }

/* ——— Лист на весь экран ——————————————————————————————————————— */

.sk-figfull {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	background: var(--sk-page);
}

.sk-figfull[hidden] { display: none; }

/* страница под оверлеем не прокручивается: иначе палец уводит фон, а не лист */
.sk-figfull-on, .sk-figfull-on body { overflow: hidden; }

.sk-figfull__body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--sk-paper);
}

/* В оверлее лист занимает всё окно: svg вписан целиком (viewBox сам держит
   пропорции и центрирует), а масштаб и сдвиг — те же колесо/правая кнопка,
   плюс палец и щипок (fig.js). Своей прокрутки у оверлея нет: лист двигают,
   а не страницу под ним. */
.sk-figfull .sk-fig { flex: 1 1 auto; min-height: 0; }
.sk-figfull .sk-fig__sheet { flex: 1 1 auto; min-height: 0; touch-action: none; max-width: none; }
.sk-figfull .sk-fig__sheet > svg { width: 100%; height: 100%; }
.sk-figfull .sk-fig__title { display: none; }
.sk-figfull .sk-fig__bar { border-top: 0; }

.sk-fig__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px 18px;
	border-top: 1px solid var(--sk-line-2);
	font-family: var(--sk-font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--sk-muted-2);
}

/* «ГОЛЫЙ» ЛИСТ — У ВСЕХ ЛЕСТНИЦ (08.09.2026, решение заказчика: «на всех
   чертежах калькуляторов лестниц снеси наверху название чертежа — оно и так
   есть в заголовке вкладки — и комментарии внизу»). Класс ставит
   sk_calc_open() по реестру лестниц; название вида и примечания ВНУТРИ листа
   снимает CLFig (флаг bare), а здесь гаснет полоса под чертежом («ВИД СБОКУ ·
   РАЗМЕРЫ В ММ · ГОСТ 21.101 · ЕСКД»).

   В разметке полоса ОСТАЁТСЯ: её левую половину (название вида) читает
   ui/sheet.js и ставит в основную надпись по ГОСТ 2.104 при печати и в PDF —
   удалив её, мы оставили бы штамп без наименования листа. Поэтому правило
   только @media screen: печать оно не трогает. Стоит ПОСЛЕ описания самой
   полосы — иначе то же `display` перебило бы его обратно. */
@media screen {
	.sk-calc--bare .sk-fig__foot { display: none; }
	/* НАЗВАНИЕ ЛИСТА — ТОЛЬКО НА ВКЛАДКЕ (16.10.2026, решение заказчика): у
	   листа во вкладке левая половина полосы (имя вида) на экране пуста.
	   Место держится, чтобы «РАЗМЕРЫ В ММ…» осталась справа; штамп печати
	   читает текст из разметки. Лист без вкладок имя здесь сохраняет — оно у
	   него единственное. */
	.sk-tabpanel .sk-fig__foot > span:first-child { visibility: hidden; }
}

/* ——— 3D-сцена ————————————————————————————————————————————————————— */

.sk-3d {
	height: 430px;
	background: linear-gradient(#fbfbfc, #eff0f1);
	cursor: grab;
	position: relative;
}

.sk-3d:active { cursor: grabbing; }

/* Канва three.js получает размер ИНЛАЙНОМ в пикселях (renderer.setSize), и без
   max-width её ширина становится минимальной шириной колонки: на телефоне сетка
   раздувается под канву, снятую на широком экране, ResizeObserver видит прежний
   размер — и 3D больше не сжимается. Слой подписей CSS2D — absolute, на поток
   не влияет, но ограничен той же строкой. */
.sk-3d canvas,
.sk-3d > div { max-width: 100%; }
.sk-3d canvas { display: block; }

@media (max-width: 640px) {
	.sk-3d { height: 300px; }
}

/* ——— Таблицы —————————————————————————————————————————————————————
 * Одна разметка на спецификацию, разметку ступеней и справочные таблицы.    */

.sk-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.sk-table th {
	padding: 10px 12px;
	font-weight: 700;
	text-align: left;
	color: var(--sk-ink);
	background: var(--sk-wash);
	border-bottom: 1px solid var(--sk-line);
}

.sk-table td {
	padding: 11px 12px;
	vertical-align: top;
	border-bottom: 1px solid var(--sk-line-2);
	color: var(--sk-ink-soft);
}

.sk-table th:first-child,
.sk-table td:first-child { padding-left: 20px; }

.sk-table th:last-child,
.sk-table td:last-child { padding-right: 20px; }

/* Числовая колонка: моноширинный и по правому краю — разряды встают в столбик. */
.sk-table__num,
.sk-table td.sk-table__num,
.sk-table th.sk-table__num {
	font-family: var(--sk-font-mono);
	text-align: right;
	white-space: nowrap;
}

.sk-table__note {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: var(--sk-faint);
}

.sk-table-scroll { overflow-x: auto; }

/* ——— Липкая шапка таблицы ———————————————————————————————————————
 * В «Ведомости материалов», отметках ступеней и «Заготовках» строк больше
 * экрана: к середине уже не помнишь, что в колонке — количество или объём.
 *
 * Класс --fits ставит ui/table.js: он значит «таблица влезла в колонку, вбок
 * прокручивать нечего». Только в этом состоянии шапку и можно приклеить — у
 * обёртки с overflow-x: auto ближайшим «экраном» для sticky становится она
 * сама, а по вертикали она не прокручивается, и заголовок стоял бы на месте.
 * Не влезла — класса нет, обёртка снова ездит вбок, шапка обычная. */
.sk-table-scroll--fits { overflow: visible; }

@media screen {
	.sk-table-scroll--fits thead th {
		position: sticky;
		/* Ниже всего, что уже приклеено сверху: --sk-sticky-top — сколько
		   занято постоянно видимым на сайте (задаёт тема), --sk-tabs-h —
		   высота липкой панели вкладок (её меряет ui/tabs.js и кладёт на
		   .sk-tabs-box). Таблица вне вкладок переменной не видит и липнет
		   к самому верху — как и было. */
		top: calc(var(--sk-sticky-top, 0px) + var(--sk-tabs-h, 0px));
		z-index: 3;
		/* При border-collapse: collapse рамка принадлежит таблице, а не ячейке,
		   и у липкой шапки она уезжает вверх вместе со строками. Рисуем её
		   тенью внутрь — тень едет с ячейкой. */
		border-bottom: 0;
		box-shadow: inset 0 -1px 0 var(--sk-line);
	}
}

/* Съёмка PDF (includes/calc-actions.js ставит класс на область печати).
   html2canvas снимает липкий элемент там, где он приклеен сейчас: шапка
   ведомости уезжала в конец таблицы и ложилась поверх последней строки.
   Печатные стили этого не касаются — sticky и так объявлен только для экрана. */
.sk-capture .sk-table-scroll--fits thead th,
.sk-capture .sk-tabs-bar,
.sk-capture .sk-split > .sk-card:first-child,
.sk-capture .sk-fig__bar { position: static; }
/* Лист, увеличенный колесом, в PDF уходит целиком: масштаб — это способ
   смотреть, а не свойство чертежа (панель над листом гасит calc-actions.js). */
.sk-capture .sk-fig__sheet > svg { transform: none !important; }

/* Строка под таблицей: от чего считаны числа, каких допущений держаться. */
.sk-table__foot {
	margin: 0;
	padding: 10px 20px 12px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sk-muted);
}

/* Разметка ступеней — узкая таблица. Колонки короткие (номер и две отметки),
   и на всю ширину карточки числа расходятся к противоположным краям экрана:
   строку глазом уже не собрать. Ширина — по содержимому, с потолком; таблица
   прижата влево. */
.sk-table.cl-stair-marks {
	width: auto;
	max-width: 100%;
}

.sk-table.cl-stair-marks th,
.sk-table.cl-stair-marks td { padding-right: 18px; }

.sk-table.cl-stair-marks th:last-child,
.sk-table.cl-stair-marks td:last-child { padding-right: 20px; }

/* Примечание у последней ступени — самая длинная строка в первой колонке;
   без ограничения оно одно растягивает таблицу. */
.sk-table.cl-stair-marks .sk-table__note { max-width: 120px; }

/* На телефоне те же три колонки должны уместиться в 290 px, иначе таблица
   ездит вбок при половине пустого листа: шрифт мельче, отступы у́же,
   заголовки переносятся по словам. */
@media (max-width: 640px) {
	.sk-table.cl-stair-marks { font-size: 12px; }
	.sk-table.cl-stair-marks th,
	.sk-table.cl-stair-marks td { padding: 7px 6px; }
	.sk-table.cl-stair-marks th:first-child,
	.sk-table.cl-stair-marks td:first-child { padding-left: 12px; }
	.sk-table.cl-stair-marks th:last-child,
	.sk-table.cl-stair-marks td:last-child { padding-right: 12px; }
	.sk-table.cl-stair-marks th.sk-table__num { white-space: normal; }
	.sk-table.cl-stair-marks .sk-table__note { max-width: none; font-size: 11px; }
}

/* ——— Блок «Скачать расчёт» ———————————————————————————————————————— */

.sk-dl { padding: 16px 20px; }

.sk-dl__row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
}

/* ——— Статья под калькулятором ————————————————————————————————————
 * Тексты приходят из шаблона/страницы, поэтому стилизуем по тегам.          */

.sk-article { padding: 30px 34px 36px; }

.sk-article h2 {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.sk-article h3 {
	margin: 22px 0 0;
	font-size: 17px;
	font-weight: 800;
}

.sk-article p,
.sk-article li {
	font-size: 15px;
	line-height: 1.65;
	color: var(--sk-ink-soft);
	text-wrap: pretty;
}

.sk-article p { margin: 16px 0 0; max-width: 760px; }

.sk-article__meta {
	font-size: 12.5px;
	color: var(--sk-faint);
	margin-bottom: 22px;
}

@media (max-width: 640px) {
	.sk-article { padding: 22px 16px 26px; }
	.sk-article h2 { font-size: 20px; }
}

/* ——— Сообщение об ошибке ввода ————————————————————————————————————
 * Отдельной карточкой между формой и результатом: расчёт не состоялся,
 * и показывать рядом старые числа было бы враньём.                        */

.sk-alert {
	padding: 13px 20px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sk-bad);
	background: var(--sk-bad-bg);
	border-color: var(--sk-bad);
}

.sk-alert[hidden] { display: none; }

/* ——— Текстовый блок внутри карточки (справка, пояснения) ——————————— */

.sk-prose {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sk-ink-soft);
	max-width: 860px;
}

.sk-prose p { margin: 0 0 10px; }
.sk-prose p:last-child { margin-bottom: 0; }
.sk-prose ul,
.sk-prose ol { margin: 0 0 10px; padding-left: 22px; }
.sk-prose li { margin: 3px 0; }
.sk-prose b,
.sk-prose strong { font-weight: 700; color: var(--sk-ink); }

.sk-prose code {
	font-family: var(--sk-font-mono);
	font-size: 13px;
	padding: 1px 4px;
	background: var(--sk-tint);
	color: var(--sk-accent-code);
}

/* ——— Ссылки на нормативы —————————————————————————————————————————— */

.sk-refs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 1px;
	background: var(--sk-line-2);
	border: 1px solid var(--sk-line-2);
}

.sk-refs a {
	display: block;
	padding: 14px 16px;
	background: var(--sk-paper);
	color: inherit;
	text-decoration: none;
}

.sk-refs a:hover { background: var(--sk-wash); }

.sk-refs__code {
	font-family: var(--sk-font-mono);
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 4px;
}

.sk-refs__name {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--sk-muted);
}

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

@media print {
	.sk-calc { background: none; padding: 0; }
	.sk-card { border-color: var(--sk-line); break-inside: avoid; }
	/* Экранные органы управления: блок «Скачать», панель вкладок и кнопка
	   «Во весь экран». На бумаге они не нажимаются, а место занимают.
	   Тот же список гасит перед съёмкой PDF calc-actions.js (SCREEN_ONLY). */
	.sk-dl,
	.sk-tabs-bar,
	.sk-fig__bar { display: none; }
	.sk-fig__sheet > svg { transform: none !important; }
	/* ЛИСТ ЧЕРТЕЖА — ЭТО САМА СТРАНИЦА (08.09.2026, замечание заказчика:
	   «границы по ГОСТ должны быть по краю листа A4»). Лист собран форматом
	   A4 в миллиметрах (ui/sheet.js), рамка в нём отбита от края бумаги на
	   20/5/5/5 мм по ГОСТ 2.301 — значит страница под него заказывается без
	   полей, а сам он растягивается на неё целиком. Ориентацию объявляет
	   лист: широкий чертёж ложится поперёк, высокий вдоль. */
	@page sheet-port { size: A4 portrait; margin: 0; }
	@page sheet-land { size: A4 landscape; margin: 0; }
	figure.sk-fig--port { page: sheet-port; }
	figure.sk-fig--land { page: sheet-land; }

	figure.sk-fig--port,
	figure.sk-fig--land {
		display: block;
		width: 100%;
		min-height: 0;
		/* Разрыв ПЕРЕД листом не нужен: страница под него другого формата, и
		   браузер начинает новую сам. С разрывом же выходил лишний ПУСТОЙ
		   лист — на нём успевала начаться карточка чертежей. */
		break-before: auto;
	}

	.sk-fig--port .sk-fig__sheet > svg[data-sk-sheet],
	.sk-fig--land .sk-fig__sheet > svg[data-sk-sheet] {
		display: block;
		width: 100%;
		height: auto;
		max-width: none;
	}

	/* Карточку с чертежами и её вкладки НЕ держим цельными: в них полтора
	   десятка листов, каждый со своей страницей, и общее `break-inside: avoid`
	   браузеру нечем соблюсти. */
	.sk-card:has(figure.sk-fig) { border: 0; }
	.sk-card:has(figure.sk-fig),
	.sk-tabs-box:has(figure.sk-fig),
	.sk-tabpanel:has(figure.sk-fig) { break-inside: auto; }

	/* Поля карточки и вкладки на странице ЛИСТА не нужны: рамка обязана идти
	   по краю бумаги, а отступ обёртки сдвинул бы её внутрь. Гасятся только
	   там, где внутри лист. */
	.sk-card:has(figure.sk-fig) > .sk-card__body,
	.sk-tabs-box:has(figure.sk-fig),
	.sk-tabpanel:has(> figure.sk-fig),
	.sk-fig--port .sk-fig__sheet,
	.sk-fig--land .sk-fig__sheet { padding: 0; margin: 0; border: 0; }
	.sk-tabpanel[hidden] { display: block !important; }
	/* лист, выключенный режимом калькулятора (SKTabs.enable), на бумагу не идёт */
	.sk-tabpanel.sk-tabpanel--off { display: none !important; }
	.sk-fig,
	.sk-table { break-inside: avoid; }
	/* Чертёж — отдельный документ, а не иллюстрация в тексте: он занимает
	   страницу целиком, следующий начинается с новой. Таблица тоже начинается
	   с новой страницы — вместе со своим заголовком, поэтому разрыв ставится
	   перед КАРТОЧКОЙ. То же самое для PDF делает calc-actions.js: html2canvas
	   печатные стили не применяет (см. getForcedBreaks). */
	.sk-fig { break-before: page; break-after: page; }
	/* `.sk-res` — таблица величин с оценкой (SKResult.render), `.sk-list` —
	   список строк (SKResult.raw / list): и то, и другое на бумаге начинается
	   с новой страницы вместе со своим заголовком. */
	.sk-card:has(.sk-table-scroll),
	.sk-card:has(.sk-res),
	.sk-card:has(.sk-list) { break-before: page; }
}

/* ——— Заголовок панели вкладки: ТОЛЬКО на печати и в PDF ———————————
 * На экране панель подписана самой вкладкой, и второй заголовок над ней был бы
 * повтором. На бумаге вкладок нет вовсе (они погашены как экранный орган
 * управления), и ведомость заготовок выходила в PDF таблицей без заголовка.
 *
 * Правило двойное, потому что путей два: браузерная печать применяет @media
 * print, а html2canvas печатные стили НЕ применяет — перед съёмкой PDF
 * calc-actions.js вешает на область класс `sk-capture`, по нему заголовок и
 * показывается. */

.sk-tabpanel__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--sk-ink);
}

@media screen {
	.sk-tabpanel__title { display: none; }
	.sk-capture .sk-tabpanel__title { display: block; }
}

/* У листа чертежа название вида нарисовано в самом листе (и уходит в основную
   надпись по ГОСТ) — второй заголовок над ним лишний. */
.sk-tabpanel:has(.sk-fig) > .sk-tabpanel__title { display: none !important; }

/* ——— Блоки выбора над калькулятором: тип и материал ———————————————
 * Карточка с миниатюрой вместо радио-списка: разницу между Г-образной с
 * площадкой и Г-образной с забежными видно глазами. Каждая карточка ведёт
 * на свой калькулятор — у нас это разные страницы, а не режимы одной.       */

.sk-picks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
	background: var(--sk-paper);
	border: 1px solid var(--sk-line);
	margin-bottom: 22px;
}

/* Ряд свёрнут: видна строка «подпись — текущий выбор», карточки раскрываются
   щелчком. Смена типа лестницы — редкое действие, а две ленты карточек
   занимали верх экрана и уводили 3D-модель под сгиб на телефоне. */
.sk-pick { padding: 0; }
.sk-pick + .sk-pick { border-left: 1px solid var(--sk-line-2); }

/* Когда ряды встают друг под друга, разделять их должна горизонтальная
   линия, а не вертикальная сбоку. */
@media (max-width: 800px) {
	.sk-pick + .sk-pick { border-left: 0; border-top: 1px solid var(--sk-line-2); }
}

.sk-pick__sum {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 16px 9px 20px;
	cursor: pointer;
	list-style: none;          /* маркер-треугольник рисуем свой */
	user-select: none;
}

.sk-pick__sum::-webkit-details-marker { display: none; }
.sk-pick__sum:hover { background: var(--sk-wash); }

/* Chromium рисует чёрную рамку фокуса и после щелчка мышью — оставляем её
   только для клавиатуры и в цвете акцента. */
.sk-pick__sum:focus { outline: none; }
.sk-pick__sum:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: -2px; }

.sk-pick__cur {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: 13px;
	color: var(--sk-ink);
}

.sk-pick__cur svg { flex: none; color: var(--sk-accent-code); }
.sk-pick__cur .sk-mat__tex { flex: none; width: 22px; height: 16px; }
.sk-pick__cur b { font-weight: 700; }

.sk-pick__chev {
	margin-left: auto;
	flex: none;
	width: 9px;
	height: 6px;
	background: var(--sk-muted-2);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.sk-pick[open] .sk-pick__chev { transform: rotate(180deg); }

.sk-pick .sk-cap { margin: 0; white-space: nowrap; }   /* подпись в строку, переносится длинное название */

.sk-pick__row { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 20px 16px; }

.sk-pick__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	width: 96px;
	padding: 10px 6px 9px;
	border: 1px solid var(--sk-line-input);
	background: var(--sk-paper);
	color: var(--sk-muted);
	text-decoration: none;
	cursor: pointer;
}

.sk-pick__item:hover { border-color: var(--sk-ink); color: var(--sk-ink); }

.sk-pick__item.is-active {
	border-color: var(--sk-accent);
	background: var(--sk-tint);
	color: var(--sk-accent-code);
	cursor: default;
}

.sk-pick__item.is-soon { opacity: 0.45; cursor: not-allowed; }
.sk-pick__item.is-soon:hover { border-color: var(--sk-line-input); color: var(--sk-muted); }

.sk-pick__name { font-size: 11.5px; line-height: 1.25; text-align: center; }
.sk-pick__item.is-active .sk-pick__name { font-weight: 700; }

.sk-pick__note {
	margin: 0;
	padding: 0 20px 16px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--sk-muted-2);
}

/* простая кнопка выбора — ряды «Несущая конструкция» и «Маршей»: миниатюра
   там ничего не добавляет (контур доски с пазами и с запилами в поле 46×30
   различаются парой пикселей), поэтому только подпись. */

.sk-opt {
	display: inline-flex;
	align-items: center;
	padding: 9px 14px;
	border: 1px solid var(--sk-line-input);
	background: var(--sk-paper);
	color: var(--sk-ink);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.sk-opt:hover { border-color: var(--sk-ink); }
.sk-opt.is-active { background: var(--sk-accent); border-color: var(--sk-accent); color: var(--sk-paper); cursor: default; }
.sk-opt.is-soon { opacity: 0.45; cursor: not-allowed; }

/* материал: свотч фактуры + название */

.sk-mat {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 14px 9px 9px;
	border: 1px solid var(--sk-line-input);
	background: var(--sk-paper);
	color: var(--sk-ink);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.sk-mat:hover { border-color: var(--sk-ink); }
.sk-mat.is-active { background: var(--sk-accent); border-color: var(--sk-accent); color: var(--sk-paper); cursor: default; }
.sk-mat.is-soon { opacity: 0.45; cursor: not-allowed; }

.sk-mat__tex { width: 26px; height: 22px; display: block; }
.sk-mat__tex--wood { background: repeating-linear-gradient(92deg, #cfa06a 0 4px, #b57f45 4px 6px, #c99a63 6px 11px, #9d6a33 11px 12px); }
.sk-mat__tex--metal { background: linear-gradient(105deg, #eceef0 0%, #aeb4b8 45%, #f3f4f5 60%, #8f969b 100%); }
.sk-mat__tex--steel { background: linear-gradient(105deg, #c9cdd0 0%, #7d8489 45%, #b9bec1 60%, #5f666b 100%); }
.sk-mat__tex--stainless { background: linear-gradient(105deg, #f6f7f8 0%, #b8bec2 40%, #ffffff 58%, #a3aaaf 100%); }
.sk-mat__tex--aluminum { background: linear-gradient(105deg, #f2f3f4 0%, #d3d7da 45%, #f7f8f9 60%, #c3c8cb 100%); }
.sk-mat__tex--copper { background: linear-gradient(105deg, #e4a07a 0%, #b5643b 45%, #e8a982 60%, #8f4a29 100%); }
.sk-mat__tex--brass { background: linear-gradient(105deg, #ecd68a 0%, #b89a3e 45%, #f0dc96 60%, #937727 100%); }
.sk-mat__tex--bronze { background: linear-gradient(105deg, #d1a072 0%, #8f6236 45%, #cf9e70 60%, #6e4a26 100%); }
.sk-mat__tex--titanium { background: linear-gradient(105deg, #d9d6cf 0%, #8e8a82 45%, #cfccc4 60%, #6f6b64 100%); }
.sk-mat__tex--castiron { background: linear-gradient(105deg, #8a8d8f 0%, #4f5356 45%, #7c8083 60%, #3b3e40 100%); }
.sk-mat__tex--lead { background: linear-gradient(105deg, #a7adb5 0%, #6b737d 45%, #9aa1aa 60%, #555c65 100%); }
.sk-mat__tex--nichrome { background: linear-gradient(105deg, #d4d2cc 0%, #9a978e 45%, #cbc8c0 60%, #7d7a72 100%); }
.sk-mat__tex--cupronic { background: linear-gradient(105deg, #e7e3dc 0%, #aea79c 45%, #e1dcd3 60%, #918a80 100%); }
.sk-mat__tex--tungsten { background: linear-gradient(105deg, #b5b7b9 0%, #6c7073 45%, #a6a9ac 60%, #505457 100%); }
.sk-mat__tex--silver { background: linear-gradient(105deg, #fbfbfb 0%, #c9ccce 42%, #ffffff 58%, #b3b7ba 100%); }
.sk-mat__tex--gold { background: linear-gradient(105deg, #f7e08a 0%, #c9a227 45%, #fbe7a0 60%, #a8841a 100%); }
.sk-mat__tex--platinum { background: linear-gradient(105deg, #eeeeec 0%, #b9bab6 45%, #f3f3f1 60%, #9e9f9b 100%); }
.sk-mat__tex--own { background: repeating-linear-gradient(135deg, #e3e6e8 0 4px, #c7ccd0 4px 6px); }
.sk-mat__tex--concrete { background-color: #cdd0d1; background-image: radial-gradient(#bcc0c2 1px, transparent 1.2px); background-size: 5px 5px; }

/* ——— Панель в шапке карточки: поворот, единицы, «Сбросить» ——————————— */

/* Гнездо кнопок 3D в шапке карточки: «Изменить цвета» и «Показать / скрыть
   элементы» стоят рядом, каждая со своей выпадающей панелью. */
.sk-3d-tools { display: inline-flex; align-items: center; gap: 8px; }

.sk-tool { display: inline-flex; align-items: center; gap: 9px; }
/* Две группы единиц («Ввод» и «Результат») стояли впритык и читались одной
   строкой переключателей (15.09.2026, замечание заказчика: «сливаются»). */
.sk-tool + .sk-tool { margin-left: 22px; }
/* «Сбросить» — заметно дальше от группы «Результат» (15.09.2026, замечание
   заказчика: «ощущение, что эта кнопка именно к единицам измерения
   относится»): кнопка сбрасывает ПОЛЯ, а не единицы, и стоять она должна
   отдельно от переключателей. */
.sk-tool + .sk-tool__reset { margin-left: 34px; }

/* Флажок в шапке карточки — рядом с кнопками ракурса и «Изменить цвета»
   (показывать ростовую фигуру). Не поле формы: он ничего не считает, а
   управляет показом, поэтому живёт в панели карточки, а не в списке полей. */
.sk-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--sk-muted-2);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.sk-toggle input {
	accent-color: var(--sk-accent);
	cursor: pointer;
	margin: 0;
}

.sk-toggle:hover { color: var(--sk-ink); }
.sk-tool__label { font-size: 12px; font-weight: 600; color: var(--sk-muted-2); }

.sk-tool__reset {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--sk-muted-2);
	cursor: pointer;
}

.sk-tool__reset:hover { color: var(--sk-ink); }

/* Кнопки ракурсов над 3D — те же сегменты, но каждая сама по себе. */
.sk-view { display: inline-flex; gap: 7px; }

.sk-view button {
	padding: 5px 11px;
	border: 1px solid var(--sk-line);
	background: var(--sk-paper);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--sk-ink);
	cursor: pointer;
}

.sk-view button:hover { border-color: var(--sk-ink); }
.sk-view button.is-active { border-color: var(--sk-accent); background: var(--sk-tint); color: var(--sk-accent-code); }

/* Карточка 3D: в шапке слева — «Изменить цвета», справа — кнопки ракурса.
   Раньше кнопка цветов висела оверлеем поверх модели и загораживала её. */
.sk-card--3d .sk-card__actions { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sk-card--3d .sk-card__head { gap: 12px; }

/* ——— Статья под калькулятором ——————————————————————————————————— */

.sk-article { padding: 22px 26px 26px; max-width: 820px; }

.sk-article__title { margin: 0 0 16px; font-size: 24px; font-weight: 800; line-height: 1.25; color: var(--sk-ink); }

.sk-article__body { font-size: 15px; line-height: 1.65; color: var(--sk-ink-soft); }
.sk-article__body p { margin: 0 0 14px; }
.sk-article__body h3 { margin: 22px 0 8px; font-size: 17px; font-weight: 700; color: var(--sk-ink); }
.sk-article__body code { font-family: var(--sk-font-mono); font-size: 13px; }
.sk-article__body b,
.sk-article__body strong { font-weight: 700; color: var(--sk-ink); }   /* сброс темы гасит жирность тега */

/* Списки: в инструкции ими идут шаги и разбор полей, а сброс темы
   оставляет их без маркеров и отступа. */
.sk-article__body ul,
.sk-article__body ol { margin: 0 0 14px; padding-left: 22px; }
.sk-article__body ul { list-style: disc; }
.sk-article__body ol { list-style: decimal; }
.sk-article__body li { margin: 4px 0; }

/* Разделы и таблицы статьи (28.09.2026). У статей под калькулятором их не
   было, а статьи раздела /stati/ держатся на таблицах с числами — без этого
   они печатались голой сеткой без полей. Вид — как у таблиц результатов
   (.sk-table): подложка шапки, линии между строками, поля по краям; широкая
   таблица едет вбок сама, страницу не распирает. */
.sk-article__body h2 { margin: 30px 0 10px; font-size: 21px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: var(--sk-ink); }
.sk-article__body > h2:first-child,
.sk-article__body > p:first-child + h2 { margin-top: 8px; }
.sk-article__body a { color: var(--sk-accent); text-decoration: underline; text-underline-offset: 2px; }
.sk-article__body table {
	display: block; max-width: 100%; overflow-x: auto;
	margin: 6px 0 18px; border-collapse: collapse; font-size: 14px; line-height: 1.45;
	border: 1px solid var(--sk-line); border-radius: 8px;
}
.sk-article__body th {
	padding: 10px 14px; text-align: left; font-weight: 700; color: var(--sk-ink);
	background: var(--sk-wash); border-bottom: 1px solid var(--sk-line); vertical-align: bottom;
}
.sk-article__body td { padding: 9px 14px; vertical-align: top; border-bottom: 1px solid var(--sk-line-2); color: var(--sk-ink-soft); }
.sk-article__body tr:last-child td { border-bottom: 0; }
.sk-article__body tbody tr:nth-child(even) td { background: var(--sk-wash); }
.sk-article__body blockquote {
	margin: 6px 0 18px; padding: 12px 16px; border-left: 3px solid var(--sk-accent);
	background: var(--sk-wash); border-radius: 0 8px 8px 0;
}
.sk-article__body blockquote p:last-child { margin-bottom: 0; }
/* Текст — колонкой чтения 820 px, как и был; таблица — во всю ширину карточки:
   в 820 px шесть колонок ломали заголовки в столбик по слову. */
.sk-card--article .sk-article { max-width: 1180px; }
.sk-article__body > p, .sk-article__body > ul, .sk-article__body > ol,
.sk-article__body > h2, .sk-article__body > h3, .sk-article__body > blockquote { max-width: 820px; }
.sk-article__body table { width: max-content; min-width: min(100%, 820px); }
.sk-article__body th { white-space: nowrap; }
.sk-article__body th, .sk-article__body td { max-width: 320px; }
.sk-card--article + .sk-card--article,
.sk-card--article + .cl-calc-wrap,
.cl-calc-wrap + .sk-card--article { margin-top: 18px; }
.sk-article__body li::marker { color: var(--sk-faint); }

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

/* ——— Кнопка «Перейти к результату» у низа экрана ——————————————————
   09.10.2026, решение заказчика: прежние числа на полосе («α 30.3 · h 16.67 ·
   b 28.53») и оценка «вне нормы» ничего человеку не говорили. Теперь это
   одна большая кнопка во всю ширину. Разметку строит ui/quickbar.js; полоса
   живёт только на телефоне — на широком экране с мышью её прячет media. */
.sk-qbar { display: none; }

@media screen and (max-width: 782px), screen and (pointer: coarse) {
	.sk-qbar:not([hidden]) {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		display: flex;
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
		background: var(--sk-paper);
		border-top: 1px solid var(--sk-line);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
	}
	.sk-qbar { transition: transform .2s ease; }
	/* дошли до результатов — кнопка уезжает вниз за край экрана */
	.sk-qbar.is-away { transform: translateY(110%); pointer-events: none; }
	/* низ страницы (комментарии) не должен прятаться под полосой */
	body.sk-qbar-on { padding-bottom: 68px; }
}

.sk-qbar__body {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 16px;
	border: 0;
	background: var(--sk-accent);
	color: var(--sk-paper);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	touch-action: manipulation;
}
.sk-qbar__body:active { background: var(--sk-accent-code); }

/* Тесно — сжимается подпись многоточием, число не сжимается никогда. */
.sk-qbar__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.sk-qbar__label {
	font-size: 12px;
	line-height: 1.2;
	color: var(--sk-muted-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sk-qbar__num {
	font-family: var(--sk-font-mono);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--sk-accent);
	white-space: nowrap;
}
.sk-qbar__num.is-flash { animation: sk-qbar-flash .9s ease-out; }
@keyframes sk-qbar-flash { 0% { color: var(--sk-pro); } 100% { color: var(--sk-accent); } }
.sk-qbar--num { align-items: center; gap: 12px; }
.sk-qbar--num .sk-qbar__body { flex: none; font-size: 14px; padding: 0 14px; }

@media print { .sk-qbar { display: none !important; } }

/* ——— Подпись карточки 3D: мышь ↔ палец (п. 9) ————————————————————————
   Пара текстов печатается PHP (sk_card_open, cap про мышь), показывается
   нужный. Признак — точность указателя, а не ширина: планшет с пальцем шире
   иного ноутбука. */
.sk-only-touch { display: none; }
@media (pointer: coarse) {
	.sk-only-mouse { display: none; }
	.sk-only-touch { display: inline; }
}

/* ——— Цели касания (п. 4, 5, 6, 12, 16) ————————————————————————————————
   Только геометрия, визуальный стиль прежний. Минимум 40–44 px по Apple HIG /
   Material; ползунок правится в field.css (там его стили). */
@media (pointer: coarse) {
	/* кнопки панели листа: «Сбросить», «+/−», «Полноэкранный режим» */
	.sk-fig__tool { min-height: 40px; min-width: 40px; }
	/* слово у кнопки полноэкранного режима на телефоне лишнее — иконки
	   хватает (п. 16), и панель листа не переносится на вторую строку */
	.sk-fig__zoom span { display: none; }
	/* кнопки видов «Изометрия / Сбоку / Сверху» */
	.sk-view button { min-height: 40px; }
	/* «Сбросить» в панели единиц — кнопкой, а не голой ссылкой 56×17 (п. 12) */
	.sk-tool__reset {
		min-height: 40px;
		padding: 0 14px;
		border: 1px solid var(--sk-line-input);
		border-radius: var(--sk-radius);
		background: var(--sk-paper);
	}
	/* галочка «Зеркально» в панели листа */
	.sk-fig__mir { min-height: 40px; }
	.sk-fig__mir input { width: 20px; height: 20px; }
	/* флажок «Ростовая фигура» в шапке карточки 3D */
	.sk-toggle input { width: 20px; height: 20px; }
}

/* ——— Кнопка-лупа на превью листа (п. 4) ——————————————————————————————
   На телефоне числа листа 6–8 px, и единственный путь к чтению — полноэкранный
   режим; лупа стоит прямо на листе, в правом нижнем углу. Печатает
   sk_fig_close, действие то же, что у кнопки панели (data-sk-fig-zoom). */
.sk-fig__fab { display: none; }
@media (pointer: coarse) {
	.sk-fig__fab {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 10px;
		bottom: 10px;
		z-index: 2;
		width: 44px;
		height: 44px;
		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-fig__fab { display: none; }
}
@media print { .sk-fig__fab { display: none !important; } }

/* ——— Единицы внизу входных параметров (09.10.2026) ————————————————————
   Печатает sk_card_close() у карточки, в шапку которой шаблон отдал
   sk_units_bar()/sk_toolbar_html() с группой единиц. Отступы — как у формы. */
.sk-units-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	padding: 16px 26px 20px;
	border-top: 1px solid var(--sk-line-2);
}
.sk-units-foot .sk-tool + .sk-tool { margin-left: 0; }
@media (max-width: 640px) {
	.sk-units-foot { padding: 14px 16px 18px; }
}
@media print { .sk-units-foot { display: none; } }

/* ——— Панель единиц на телефоне (п. 12) ———————————————————————————————
   «Ввод» и «Результат» — каждая группа своей строкой во всю ширину шапки,
   сегменты компактнее: «дюйм» падал на отдельную строку, а «Сбросить» висел
   голой ссылкой. */
@media (max-width: 640px) {
	.sk-tool { width: 100%; }
	.sk-tool + .sk-tool { margin-left: 0; }
	.sk-tool + .sk-tool__reset { margin-left: 0; }
	.sk-tool .sk-seg__item span { padding: 8px 9px; }
	.sk-seg--mono .sk-seg__item span { font-size: 11px; }
}

/* ——— QR-код на телефоне бессмыслен (п. 13) ———————————————————————————
   Сканировать телефоном экран этого же телефона нельзя; «Ссылка на расчёт»
   на touch зовёт нативный шэринг (calc-actions.js). */
@media (pointer: coarse) {
	.cl-calc-btn-qr { display: none; }
}

/* ——— Аккордеон групп полей на телефоне (п. 7, ui/fold.js) ————————————
   Классы ставит JS и только на узком экране; display: none живёт в @media,
   поэтому на широком экране поля видимы при любых классах.
   ВЫЖИМКА ТОЖЕ ТОЛЬКО НА ТЕЛЕФОНЕ (29.09.2026, замечание заказчика: «что
   это за цифры около подзаголовков?»): группа, свёрнутая на узком экране,
   на широком оставалась с выжимкой, и числа липли к названию группы. */
.sk-fold__sum { display: none; }
@media (max-width: 782px) {
	.sk-folded { display: none !important; }

	.sk-form__group.sk-fold {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 2px 8px;
		min-height: 44px;
		padding-right: 30px;
		cursor: pointer;
		user-select: none;
	}
	/* шеврон: вниз у раскрытой, вправо у свёрнутой */
	.sk-form__group.sk-fold::after {
		content: '';
		position: absolute;
		right: 8px;
		top: 50%;
		width: 8px;
		height: 8px;
		margin-top: -6px;
		border-right: 2px solid var(--sk-muted);
		border-bottom: 2px solid var(--sk-muted);
		transform: rotate(45deg);
		transition: transform .15s;
	}
	.sk-form__group.sk-fold--closed::after {
		transform: rotate(-45deg);
		margin-top: -4px;
	}

	/* выжимка значений свёрнутой группы — серым, одной строкой с обрезкой */
	.sk-fold__sum {
		display: block;
		flex: 1 1 100%;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		color: var(--sk-muted-2);
	}
	.sk-fold__sum[hidden] { display: none; }
}

/* ——— Правовые документы (legal.php, 20.10.2026) ——————————————————————— */

/* Галочка согласия в формах: квадратик слева, текст со ссылками справа. */
.sk-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sk-muted);
	cursor: pointer;
}
.sk-consent input { flex: none; margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--sk-ink); }
.sk-consent a { color: var(--sk-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Плашка cookie: карточка в левом нижнем углу, на телефоне — во всю ширину
   над нижней полосой (.sk-qbar, z-index 900). */
.sk-cookie:not([hidden]) {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 950;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 520px;
	padding: 12px 14px;
	background: var(--sk-paper);
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-radius);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
}
.sk-cookie p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--sk-muted); }
.sk-cookie a { color: var(--sk-ink); text-decoration: underline; text-underline-offset: 2px; }
.sk-cookie .sk-btn { flex: none; }
@media screen and (max-width: 640px) {
	.sk-cookie:not([hidden]) { left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); max-width: none; }
}
@media print { .sk-cookie { display: none !important; } }

/* Оговорка под блоком «Скачать расчёт». */
.sk-dl__note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--sk-faint); }
.sk-dl__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }