/*
 * Оформление единого поля ввода (см. includes/ui/field.php).
 * Ни один конкретный цвет здесь не записан — только токены из includes/ui/tokens.php.
 * Правится ЗДЕСЬ — расходится по всем калькуляторам сразу.
 *
 * Разметка:
 *   .sk-field
 *     .sk-field__head  → .sk-field__text(.sk-field__label(+ .sk-code) + .sk-field__note)  .sk-field__ctl
 *     .sk-range                           (у числового поля с известным диапазоном)
 *     .sk-field__body                     (у списков и переключателей)
 */

/* ——— Строка поля ——————————————————————————————————————————————————— */

.sk-field {
	padding: 9px 0;
	min-width: 0;
}

/* Поле во всю ширину сетки формы (длинный список, площадь ввода). */
.sk-field--wide { grid-column: 1 / -1; }

.sk-field__head {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

/* У числового поля под шапкой идёт ползунок — между ними воздух. */
.sk-field__head:not(:last-child) { margin-bottom: 4px; }

.sk-field__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Название параметра — обычным начертанием: жирная в строке только буква
   размера (.sk-code). Когда жирным было и название, буква на его фоне не
   выделялась вовсе — а она и должна цеплять взгляд, это связь с чертежом. */
.sk-field__label {
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--sk-ink);
	cursor: pointer;
	text-wrap: pretty;
}

.sk-field__note {
	font-size: 12px;
	line-height: 1.35;
	color: var(--sk-muted-2);
	text-wrap: pretty;
}

.sk-field__ctl {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}

.sk-field__unit {
	font-size: 12px;
	color: var(--sk-muted-2);
	min-width: 22px;
}

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

/* Поле без единицы держит её место (22 + 6 px): иначе оно уезжает вправо
   и выбивается из столбика соседних полей (коэффициенты, счётчики). */
@media (min-width: 641px) {
	.sk-field[data-sk-field="number"] .sk-field__ctl:not(:has(> .sk-field__unit, > .sk-field__usel)) { padding-right: 28px; }
	/* МЕСТО ЕДИНИЦЫ — ФИКСИРОВАННОЕ (15.10.2026, заказчик на №39: «поля не
	   друг под другом»). Поле прижато к правому краю колонки, и длинная
	   единица («кН/м³») сдвигала его влево. Теперь у единицы 22 px всегда,
	   длиннее — выходит в промежуток между колонками (48 px). */
	.sk-field[data-sk-field="number"] .sk-field__ctl > .sk-field__unit { flex: none; width: 22px; min-width: 22px; white-space: nowrap; overflow: visible; }
	/* число со списком единиц (№158 «кОм») — в том же месте «поле + единица»:
	   левый край поля вровень с соседями, список кончается там же, где
	   место единицы; число ужимается на ширину списка (17.10.2026) */
	.sk-field[data-sk-field="number"] .sk-field__ctl:has(> .sk-field__usel) { width: calc(var(--sk-num-w, 156px) + 28px); }
	.sk-field[data-sk-field="number"] .sk-field__ctl:has(> .sk-field__usel) > .sk-num { flex: 1 1 0; width: auto; min-width: 0; }
}

/* СПИСОК И ПЕРЕКЛЮЧАТЕЛЬ — ПОДПИСЬ СЛЕВА, КАК У ЧИСЛА (14.10.2026, заказчик:
   «везде поля сбоку подписывались, а то неаккуратно»). Элемент стоит на
   месте числового поля: левый край там же; список шириной с само поле
   (--sk-num-w), переключатель — поле + место единицы (184 px). Длинный (sk-field--long, решает sk_field_html() по тексту
   вариантов) занимает обе колонки: подпись той же ширины, что у числа в
   колонке 332 px, элемент до правого края формы. Галочка — как была:
   подпись у неё справа от квадратика. На телефоне подпись над элементом. */
@media (min-width: 641px) {
	/* :not([hidden]) — поле, скрытое шаблоном, display: flex не возвращает */
	.sk-field:is([data-sk-field="select"], [data-sk-field="segment"]):not([hidden]):has(> .sk-field__head .sk-field__label) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 10px;
	}
	.sk-field:is([data-sk-field="select"], [data-sk-field="segment"]):has(> .sk-field__head .sk-field__label) > .sk-field__head {
		flex: 1 1 0;
		margin-bottom: 0;
	}
	/* список — ровно числовое поле: та же ширина --sk-num-w и то же место
	   единицы справа (22 + 6 px), края совпадают с соседними числами */
	.sk-field:is([data-sk-field="select"], [data-sk-field="segment"]):has(> .sk-field__head .sk-field__label) > .sk-field__body {
		flex: 0 0 calc(var(--sk-num-w, 156px) + 28px);
	}
	.sk-field[data-sk-field="select"]:not(.sk-field--long):has(> .sk-field__head .sk-field__label) > .sk-field__body {
		flex-basis: var(--sk-num-w, 156px);
		margin-right: 28px;
	}
	.sk-form > .sk-field--long { grid-column: 1 / -1; }
	/* подпись = колонка формы минус элемент: (100% − 48)/2 − 184 − 10 */
	.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 clamp(120px, calc(50% - 24px - var(--sk-num-w, 156px) - 38px), 300px);
	}
	.sk-field.sk-field--long:is([data-sk-field="select"], [data-sk-field="segment"]):has(> .sk-field__head .sk-field__label) > .sk-field__body { flex: 1 1 0; }
	/* длинный список кончается там же, где рамка числового поля правой
	   колонки, а не на краю формы: место единицы (22 + 6 px) свободно
	   (17.10.2026, заказчик на №132, №141: «правый край полей не ровно») */
	.sk-field.sk-field--long[data-sk-field="select"]:has(> .sk-field__head .sk-field__label) > .sk-field__body { margin-right: 28px; }
	.sk-field:is([data-sk-field="select"], [data-sk-field="segment"]) > .sk-field__err { flex: 1 0 100%; }
}

/* ——— Буква размера ————————————————————————————————————————————————
   Та же буква стоит на чертеже: связь поля и размера читается без легенды. */

/* Буква размера — та же, что на чертеже. Не бейдж-квадратик, а жирная
   акцентная приписка сразу за названием параметра: квадрат забирал себе
   внимание, хотя главное в строке — название и число. */
.sk-code {
	font-family: var(--sk-font-mono);
	/* 700 у JetBrains Mono должен быть В СПИСКЕ ЗАГРУЖАЕМЫХ начертаний
	   (`font_url` в ui/tokens.php): без него браузер берёт ближайшее
	   загруженное (600) и буква выглядит почти обычной. */
	font-weight: 700;
	color: var(--sk-letter);
	white-space: nowrap;
	font-style: normal;   /* в ручной разметке буква стоит в <em> */
}

/* ——— Числовое поле ————————————————————————————————————————————————— */

.sk-input {
	width: 88px;
	height: var(--sk-input-h);
	padding: 0 9px;
	text-align: right;
	font-family: var(--sk-font-mono);
	font-size: 16px;
	font-weight: 600;
	color: var(--sk-ink);
	background: var(--sk-paper);
	border: 1px solid var(--sk-line-input);
	border-radius: var(--sk-radius);
	outline: none;
	box-sizing: border-box;
	-moz-appearance: textfield;
}

.sk-input::-webkit-outer-spin-button,
.sk-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Поле внутри строки таблицы (смета, список приборов): места мало. */
.sk-input--xs {
	width: 5.5rem;
	height: 30px;
	padding: 0 6px;
	font-size: 13.5px;
}

/* Текстовое поле — по левому краю и во всю ширину: там не число, а строка. */
.sk-input--text {
	width: 100%;
	text-align: left;
	font-family: var(--sk-font-sans);
	font-size: 14px;
	font-weight: 400;
}

.sk-input:focus,
.sk-select:focus {
	border-color: var(--sk-accent);
	box-shadow: 0 0 0 3px rgb(0 124 132 / 0.13);
}

/* ——— Ползунок ————————————————————————————————————————————————————
   Смысл — гонять значение и сразу видеть, как меняется чертёж. Заливка дорожки
   до бегунка идёт по переменной --sk-rng, её ведёт includes/ui/field.js. */

.sk-range {
	display: block;
	width: 100%;
	height: 16px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	/* Вертикальный свайп, начатый на ползунке, прокручивает СТРАНИЦУ, а не
	   дёргает значение (iOS это любит); горизонтальный — двигает бегунок. */
	touch-action: pan-y;
}

.sk-range::-webkit-slider-runnable-track {
	height: 3px;
	background: linear-gradient(to right,
		var(--sk-accent) 0 var(--sk-rng, 0%),
		var(--sk-line) var(--sk-rng, 0%) 100%);
}

.sk-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -5.5px;             /* (3px дорожки − 14px бегунка) / 2 */
	background: var(--sk-accent);
	border: 2px solid var(--sk-paper);
	box-shadow: 0 0 0 1px rgb(22 24 26 / 0.2);
	transition: transform .1s;
}

.sk-range:active::-webkit-slider-thumb { transform: scale(1.15); }

.sk-range::-moz-range-track    { height: 3px; background: var(--sk-line); }
.sk-range::-moz-range-progress { height: 3px; background: var(--sk-accent); }
.sk-range::-moz-range-thumb {
	width: 14px; height: 14px; border-radius: 0;
	background: var(--sk-accent);
	border: 2px solid var(--sk-paper);
	box-shadow: 0 0 0 1px rgb(22 24 26 / 0.2);
}

/* Значение подставит первый расчёт — до этого бегунок ничего не показывает. */
.sk-range[data-sk-empty] { opacity: .55; }

.sk-range:focus { outline: none; }
.sk-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgb(22 24 26 / 0.2), 0 0 0 4px rgb(0 124 132 / 0.28); }
.sk-range:focus-visible::-moz-range-thumb     { box-shadow: 0 0 0 1px rgb(22 24 26 / 0.2), 0 0 0 4px rgb(0 124 132 / 0.28); }

/* Разметка — sk_field_num_html(): <span.sk-num><input
   range><input.sk-input><span.sk-num__btns>. Поле и полоса лежат в ОДНОЙ клетке
   сетки, полоса прижата к низу, центр бегунка — ровно на нижней кромке поля. Стрелки
   — колонкой справа ВНУТРИ рамки поля; полоса кончается перед ними. */

.sk-num {
	position: relative;
	display: inline-grid;
	grid-template-columns: minmax(0, 1fr);
	width: var(--sk-num-w, 156px);
	vertical-align: middle;
}
.sk-num--slide { padding-bottom: 7px; }

.sk-num > .sk-input,
.sk-num > .sk-range { grid-area: 1 / 1; }

.sk-num > .sk-input {
	width: 100%;
	padding-right: calc(var(--sk-num-btn, 22px) + 9px);
}

.sk-num > .sk-range {
	position: relative;
	z-index: 1;                       /* поверх поля: в разметке полоса идёт раньше */
	align-self: end;
	width: auto;
	min-width: 0;
	height: 14px;
	margin: 0 calc(var(--sk-num-btn, 22px) + 6px) -7px 6px;
}
.sk-num > .sk-range::-webkit-slider-runnable-track { height: 3px; }
.sk-num > .sk-range::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5.5px; }
.sk-num > .sk-range::-moz-range-thumb { width: 14px; height: 14px; }

.sk-num__btns {
	position: absolute;
	top: 1px;
	right: 1px;
	height: calc(var(--sk-input-h) - 2px);
	width: var(--sk-num-btn, 22px);
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--sk-line);
	pointer-events: none;             /* мимо кнопок клик уходит в поле */
	z-index: 2;
}

.sk-num__btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	background: var(--sk-wash);
	color: var(--sk-muted-2);
	cursor: pointer;
	line-height: 0;
	pointer-events: auto;
	transition: background-color .12s, color .12s;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
}
.sk-num__btn + .sk-num__btn { border-top: 1px solid var(--sk-line); }
.sk-num__btn:hover,
.sk-num__btn:active { background: var(--sk-accent); color: var(--sk-paper); }

/* ——— Список ———————————————————————————————————————————————————————— */

.sk-select {
	display: block;
	width: 100%;
	height: 40px;
	padding: 0 32px 0 11px;
	font-family: var(--sk-font-sans);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--sk-ink);
	background-color: var(--sk-paper);
	border: 1px solid var(--sk-line-input);
	border-radius: var(--sk-radius);
	outline: none;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23787e82' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
}

/* Список единиц КОНВЕРТЕРА (заказчик 18.10.2026: «вторичность, приоритет на
   цифры»; править только конвертеры, остальные калькуляторы — как раньше):
   белая подложка с тонкой светлой рамкой (серая сливалась с фоном панели),
   приглушённый текст по правому краю — под числом поля. Класс ставит только
   sk_conv_select(); длинный список select.js переносит на свою кнопку
   (.sk-sel--unit, select.css). */
.sk-select--unit {
	font-weight: 500;
	color: var(--sk-muted);
	background-color: var(--sk-paper);
	border-color: var(--sk-line-2);
	/* текст по правому краю — под числом поля, которое тоже прижато вправо */
	text-align: right;
	text-align-last: right;
	/* высота — как у числового поля над ним, а не 40 px списка формы */
	height: var(--sk-input-h);
}
.sk-select--unit:hover { border-color: var(--sk-line-input); }

/* Единица списком в строке числового поля (sk_field_unit_select_html):
   короткий список справа от числа, по верхнему краю — под числом лежит
   ползунок, и список вровень с самим полем, а не с ползунком. */
.sk-field__ctl > .sk-field__usel {
	width: auto;
	flex: none;
	align-self: flex-start;
}
/* На телефоне число со списком в половину ряда не помещается — строка целиком. */
@media (max-width: 640px) {
	.sk-form > .sk-field:has(.sk-field__usel) { grid-column: 1 / -1; }
}

/* ——— Поле, размеченное в шаблоне вручную ——————————————————————————
 * У части калькуляторов один-два органа управления собраны прямо в шаблоне
 * (список режимов, поле внутри таблицы). Класс .sk-ctrl приводит их к общему
 * виду, не требуя переписывать сам блок: разметка чужая, оформление наше.  */

.sk-ctrl {
	display: block;
	width: 100%;
	height: 40px;
	padding: 0 11px;
	font-family: var(--sk-font-sans);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--sk-ink);
	background-color: var(--sk-paper);
	border: 1px solid var(--sk-line-input);
	border-radius: var(--sk-radius);
	outline: none;
	box-sizing: border-box;
}

input.sk-ctrl {
	font-family: var(--sk-font-mono);
	font-size: 16px;
	text-align: right;
}

select.sk-ctrl {
	padding-right: 32px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23787e82' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
}

.sk-ctrl:focus {
	border-color: var(--sk-accent);
	box-shadow: 0 0 0 3px rgb(0 124 132 / 0.13);
}

/* ——— Переключатели ————————————————————————————————————————————————— */

.sk-radios { display: flex; flex-direction: column; gap: 7px; }

.sk-radio,
.sk-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--sk-ink-soft);
	cursor: pointer;
}

.sk-radio input,
.sk-check input {
	flex: none;
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: var(--sk-accent);
	cursor: pointer;
}

/* ——— Поле особняком (sk_field([ 'apart' => true ])) ————————————————
 * Обычное поле начинается со строки-названия, и по ней видно, где оно
 * началось. У галочки, весь текст которой стоит на ней самой, такой строки
 * нет — и она читается как ЧАСТЬ ПОЛЯ СВЕРХУ («ещё одна опция шага
 * стержней»), хотя относится ко всему калькулятору. Пустая строка перед ней
 * эту связь рвёт: расстояние до соседа сверху заметно больше, чем внутри
 * поля. Ставится ПО ЗАЯВКЕ шаблона, а не всем галочкам подряд: там, где
 * галочек несколько кряду (теплопотери дома, ламинат), они и так читаются
 * одним блоком, и лишние пустые строки только растянули бы форму.          */

.sk-field--apart { padding-top: 28px; }

/* Слитная строка кнопок: единицы измерения, «налево / направо». */
.sk-seg { display: flex; flex-wrap: wrap; }

.sk-seg__item { display: block; cursor: pointer; }
.sk-seg__item + .sk-seg__item { margin-left: -1px; }
.sk-seg__item input { position: absolute; opacity: 0; pointer-events: none; }

/* Высота кнопки — как у числового поля (--sk-input-h). */
.sk-seg__item span {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: var(--sk-input-h);
	padding: 0 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sk-muted);
	background: var(--sk-paper);
	border: 1px solid var(--sk-line-input);
}

.sk-seg__item:hover span { border-color: var(--sk-ink); color: var(--sk-ink); position: relative; z-index: 1; }

.sk-seg__item input:checked + span {
	color: var(--sk-paper);
	background: var(--sk-ink);
	border-color: var(--sk-ink);
	position: relative;
	z-index: 2;
}

.sk-seg__item input:focus-visible + span { box-shadow: 0 0 0 3px rgb(0 124 132 / 0.28); position: relative; z-index: 3; }

/* Единицы измерения набраны моноширинным — так «мм / см / м» стоят ровно. */
.sk-seg--mono .sk-seg__item span { font-family: var(--sk-font-mono); font-size: 12px; }

/* ——— Ошибка ввода —————————————————————————————————————————————————— */

.sk-field__err {
	margin-top: 7px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--sk-bad);
}

.sk-field--err .sk-input,
.sk-field--err .sk-select { border-color: var(--sk-bad); }
.sk-field--err .sk-code   { color: var(--sk-bad); }

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

@media print {
	.sk-range,
	.sk-num__btns { display: none; }
	.sk-num--slide { padding-bottom: 0; }
	.sk-num > .sk-input { padding-right: 9px; }
	.sk-input,
	.sk-select { border-color: var(--sk-line); }
}

/* ——— Пояснение: кружок «?» и всплывающее окно ———————————————————————
   28.09.2026, решение заказчика: строки пояснений под полями загромождали
   форму. Текст теперь за кружком, показывает его includes/ui/tip.js.
   Знак рисуется здесь (::before), а не текстом разметки — подпись поля
   читают errors.js и обходы, «?» в ней был бы лишним словом. */
.sk-tip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 4px;
	border: 1px solid var(--sk-line-2);
	border-radius: 50%;
	vertical-align: 1px;
	font-family: var(--sk-font-sans);
	font-size: 11px;
	font-weight: 600;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sk-muted);
	background: var(--sk-paper);
	cursor: help;
	user-select: none;
	flex: none;
}
.sk-tip::before { content: '?'; }
.sk-tip:hover,
.sk-tip:focus-visible,
.sk-tip.is-open {
	color: var(--sk-paper);
	background: var(--sk-accent);
	border-color: var(--sk-accent);
	outline: none;
}

.sk-tip-pop {
	position: absolute;
	z-index: 1000;
	max-width: min(320px, calc(100vw - 16px));
	padding: 9px 12px;
	border: 1px solid var(--sk-line);
	border-radius: var(--sk-radius);
	background: var(--sk-paper);
	color: var(--sk-ink);
	font-family: var(--sk-font-sans);
	font-size: 13px;
	line-height: 1.45;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
	text-wrap: pretty;
}
.sk-tip-pop[hidden] { display: none; }
.sk-tip-pop::before {
	content: '';
	position: absolute;
	top: -6px;
	left: calc(var(--sk-tip-arrow, 50%) - 5px);
	width: 10px;
	height: 10px;
	background: inherit;
	border-left: 1px solid var(--sk-line);
	border-top: 1px solid var(--sk-line);
	transform: rotate(45deg);
}
.sk-tip-pop--up::before {
	top: auto;
	bottom: -6px;
	transform: rotate(225deg);
}
@media print { .sk-tip, .sk-tip-pop { display: none !important; } }

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

/* ——— Ползунок под палец (п. 5) ————————————————————————————————————————
   Зона касания была 272×16 при бегунке 14×14 — промах уводил прокрутку.
   Только геометрия: дорожка чуть толще, бегунок 22 px, весь input 32 px. */
@media (pointer: coarse) {
	.sk-range { height: 32px; }
	.sk-range::-webkit-slider-runnable-track { height: 4px; }
	.sk-range::-webkit-slider-thumb {
		width: 22px;
		height: 22px;
		margin-top: -9px;              /* (4px дорожки − 22px бегунка) / 2 */
	}
	.sk-range::-moz-range-track    { height: 4px; }
	.sk-range::-moz-range-progress { height: 4px; }
	.sk-range::-moz-range-thumb { width: 22px; height: 22px; }

	/* ——— Чекбоксы и радио (п. 6): квадрат 20 px, строка от 44 px ———— */
	.sk-radio input,
	.sk-check input { width: 20px; height: 20px; }
	.sk-check { min-height: 44px; }
	.sk-radio { min-height: 40px; }

	/* ——— Авто-зум iOS (п. 18): фокусируемому полю шрифт не меньше 16 px.
	   Правка только на телефоне — на десктопе кегли прежние. ————————— */
	.sk-input--xs,
	.sk-input--text,
	.sk-select,
	.sk-ctrl { font-size: 16px; }
}

/* Всё, что не числовое поле (галочки, сегменты, списки, заголовки групп,
   свои блоки шаблонов), занимает строку целиком. Поля стоят по нижнему краю
   ряда: у соседа подпись бывает в две строки. */
@media (max-width: 640px) {
	.sk-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
	}
	.sk-form > :not(.sk-field[data-sk-field="number"]),
	.sk-form > .sk-field--wide { grid-column: 1 / -1; }

	/* КОРОТКИЙ СПИСОК — ТОЖЕ ПО ДВА В РЯД (15.10.2026, заказчик: «мобильный
	   экран искусственно удлиняется, цель — меньше прокручивать»). «М500»,
	   «П2», «50 кг» во всю ширину только растягивали форму. Длинный список
	   (sk-field--long — по тексту вариантов, тот же порог 156 px, что и
	   половина строки телефона) остаётся на всю строку. Подпись сверху,
	   список прижат к низу ряда — как у чисел. */
	.sk-form > .sk-field[data-sk-field="select"]:not(.sk-field--long):not(.sk-field--wide):not(:has(.sk-field__usel)) {
		grid-column: auto;
	}
	.sk-field[data-sk-field="select"]:not(.sk-field--long):not([hidden]) { display: flex; flex-direction: column; }
	.sk-field[data-sk-field="select"]:not(.sk-field--long) > .sk-field__head { flex: 0 0 auto; }
	.sk-field[data-sk-field="select"]:not(.sk-field--long) > .sk-field__body { margin-top: auto; padding-bottom: 13px; }
	/* список вровень с числовым полем: та же высота 44 px, под ним запас на
	   ползунок соседа (.sk-num--slide) */
	.sk-field[data-sk-field="select"] .sk-select,
	.sk-field[data-sk-field="select"] .sk-sel__head { height: 44px; }

	/* :not([hidden]) — поле, ненужное в режиме расчёта, шаблон гасит атрибутом */
	.sk-field[data-sk-field="number"]:not([hidden]) { display: flex; flex-direction: column; }
	.sk-field[data-sk-field="number"] .sk-field__text { flex: 0 0 auto; }
	.sk-field[data-sk-field="number"] .sk-field__head {
		flex: 1 1 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 5px;
	}
	.sk-field[data-sk-field="number"] .sk-field__label { font-size: 13.5px; }
	.sk-field[data-sk-field="number"] .sk-field__ctl {
		margin: auto 0 0;
		gap: 4px;
	}
	.sk-field[data-sk-field="number"] .sk-num { flex: 1 1 auto; width: auto; min-width: 0; }
	.sk-field[data-sk-field="number"] .sk-field__unit { min-width: 0; }

	/* палец шире курсора: стрелки 36 px, поле 44 px */
	.sk-num { --sk-num-btn: 34px; }
	.sk-num--slide { padding-bottom: 9px; }
	/* число без ползунка — тот же запас снизу, что под ползунком: поля ряда
	   (число, список, число с ползунком) стоят на одной линии */
	.sk-field[data-sk-field="number"] .sk-num:not(.sk-num--slide) { margin-bottom: 9px; }
	.sk-num > .sk-input { height: 44px; font-size: 16px; }
	.sk-num__btns { height: 42px; }
	.sk-num > .sk-range { height: 18px; margin-bottom: -9px; }
	.sk-num > .sk-range::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7.5px; }
	.sk-num > .sk-range::-moz-range-thumb { width: 18px; height: 18px; }
}

/* ——— Несколько чисел под одной подписью (sk_field_multi) ———————————————
   «[0] сут [3] ч [45] мин [50] с»: поля делят строку поровну, единица — сразу
   за числом. На узком месте строка переносится парами. */
/* строка из нескольких чисел в одну колонку формы не помещается — она на всю ширину */
.sk-form > .sk-multi { grid-column: 1 / -1; }
.sk-multi .sk-field__label { display: block; margin-bottom: 6px; }
.sk-multi__row { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.sk-multi__cell { display: flex; align-items: center; gap: 5px; flex: 1 1 0; min-width: 92px; }
.sk-multi__cell .sk-num { flex: 1 1 auto; width: 0; min-width: 76px; }
.sk-multi__u { flex: none; min-width: 2.2em; font-size: 13px; color: var(--sk-muted); }
@media screen and (max-width: 640px) {
	.sk-multi__cell { flex-basis: calc(50% - 6px); }
}

/* ГАЛОЧКА С ПОДПИСЬЮ ПОЛЯ (шаблон дал 'label', а текст варианта пустой):
   квадратик слева, подпись справа В ОДНОЙ СТРОКЕ, как у обычной галочки
   (15.10.2026, заказчик на №45: «галочка и подпись на разных уровнях»). */
.sk-field[data-sk-field="check"]:has(> .sk-field__head .sk-field__label):not([hidden]) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 8px;
}
.sk-field[data-sk-field="check"]:has(> .sk-field__head .sk-field__label) > .sk-field__body { order: -1; flex: none; margin: 0; }
.sk-field[data-sk-field="check"]:has(> .sk-field__head .sk-field__label) > .sk-field__head { flex: 1 1 0; min-width: 0; margin: 0; }
.sk-field[data-sk-field="check"]:has(> .sk-field__head .sk-field__label) > .sk-field__err { flex: 1 0 100%; }