/* Переключатель единиц мм/см/м (см. includes/calc-units.js).
 *
 * Выглядит как ЛЮБАЯ другая группа переключателей в форме калькулятора —
 * «Тип лестницы», «Материал кровли», «Верхняя ступень»: серая подпись сверху,
 * под ней круглые радиокнопки синим акцентом. Раньше это была синяя плашка с
 * кнопками-сегментами, и она выбивалась из формы: единственный элемент со
 * своей заливкой и рамкой среди обычных полей.
 *
 * Числа ниже — не на глаз, а те же, что даёт Tailwind в эталонном блоке:
 *   подпись   text-xs (.75rem/1rem) + text-gray-500 + mb-1.5 (.375rem)
 *   ряд       flex gap-4 (1rem)
 *   вариант   text-sm (.875rem/1.25rem) + gap-1.5 (.375rem) + cursor-pointer
 *   кружок    accent-blue-600 (#2563eb)
 * Цвет текста варианта НЕ задаём: в эталоне его нет, он наследуется от корня
 * калькулятора (text-gray-800) — зададим свой, и наш переключатель снова
 * станет единственным непохожим.
 *
 * Правится ТОЛЬКО здесь: разметку печатает один модуль на все страницы, где
 * есть переключатель, поэтому и вид у него один на все.
 */

.cl-units {
	display: block;
	margin: 0 0 1rem;          /* как .mb-4 у соседних групп формы */
}

.cl-units__label {
	display: block;
	font-size: .75rem;
	line-height: 1rem;
	color: #6b7280;            /* text-gray-500 */
	margin-bottom: .375rem;
}

.cl-units__set {
	display: flex;
	flex-wrap: wrap;           /* в узкой колонке телефона перенос, а не обрезка */
	gap: 1rem;
}

.cl-units__opt {
	display: flex;
	align-items: center;
	gap: .375rem;
	font-size: .875rem;
	line-height: 1.25rem;
	cursor: pointer;
}

.cl-units__radio {
	accent-color: #2563eb;     /* accent-blue-600 */
	cursor: pointer;
	margin: 0;                 /* у темы свои отступы у input — снимаем */
	flex: 0 0 auto;
}

@media print {
	.cl-units { display: none; }
}