/*
 * Оформление единого числового поля калькуляторов (includes/calc-field.php).
 * Разметка: <span class="cl-num"><input …><span class="cl-num-btns">▲▼</span></span>
 * Правится ЗДЕСЬ — расходится по всем калькуляторам сразу.
 */

.cl-num {
	position: relative;
	display: block;
}

/* Узкое поле внутри строки текста («Длина: [__] см») — обёртка не должна рвать строку. */
.cl-num--inline {
	display: inline-block;
	width: auto;
	vertical-align: middle;
}

/* Поле лежит в строке-флексе (у нас это «высота/угол» у крыш) — обёртка должна вести себя
   как само поле, иначе колонки схлопываются по содержимому. */
.flex > .cl-num,
.flex > .cl-num-slide {
	flex: 1 1 0;
	min-width: 0;
}
/* Обёртка ползунка в той же строке («Высота [___] [мм▾]») — то же самое, и ещё строже:
   у неё container-type, а такой элемент своей ширины от содержимого не получает
   вовсе. Без правила поле схлопывалось до 40px (коробка 99, колебательный контур 107,
   мансардная 143) — ползунок прятался, а число обрезалось. */

/* Место под стрелки. Пара «класс + тег» перебивает Tailwind-класс px-* без !important.
   Селектор по тегу, а не по классу поля: так отступ получают и поля, которые калькуляторы
   рисуют своим набором классов (строки сметы в calc-price.js). */
.cl-num > input {
	/* ширина стрелок + зазор: число прижато вправо и не должно липнуть к разделителю */
	padding-right: calc(1.25rem + 8px);
	/* Число — по правому краю, вплотную к стрелкам: так разряды разных полей стоят
	   друг под другом, и стрелки рядом с тем, что они меняют (стандарт числовых полей). */
	text-align: right;
}

.cl-num-btns {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	width: 1.25rem;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 0 0.35rem 0.35rem 0;
	border-left: 1px solid #e5e7eb;
	/* поле может быть уже отрисовано — не перехватываем клики мимо самих кнопок */
	pointer-events: none;
}

.cl-num-btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	background: #f3f4f6;
	color: #6b7280;
	cursor: pointer;
	line-height: 0;
	pointer-events: auto;
	transition: background-color .12s, color .12s;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
}

.cl-num-btn + .cl-num-btn {
	border-top: 1px solid #e5e7eb;
}

.cl-num-btn:hover,
.cl-num-btn:active {
	background: #2563eb;
	color: #fff;
}

/* На телефоне палец шире курсора — кнопки заметно крупнее: колонка стрелок
   44px шириной, поле 48px высотой (каждая стрелка 44×24). До 07.10.2026 было
   27×18 — в Вебвизоре промахи мимо стрелок (spec_otkaz_analiz.md, П3). */
@media (max-width: 640px) {
	.cl-num > input { padding-right: calc(2.75rem + 8px); min-height: 48px; font-size: 16px; }
	.cl-num-btns { width: 2.75rem; }
}

/* ==========================================================================
   Ползунок числового поля
   Разметка: <span class="cl-num-slide"><input type=range><span class="cl-num">…</span></span>
   Появляется у поля сам, когда его id есть в includes/calc-ranges.php.
   ========================================================================== */

/* Полоса лежит НА НИЖНЕЙ КРОМКЕ поля, во всю его ширину (кроме стрелок) — как у
   ecalc.ru. До 07.10.2026 она стояла слева от узкого поля и забирала половину строки.
   Оба элемента кладутся в одну клетку сетки, полоса прижата к низу; разметку
   (calc-field.php) и поведение (calc-field.js) это не меняет. */
.cl-num-slide {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* ряд меряет сам себя — см. правило в конце блока */
	container-type: inline-size;
	/* бегунок выступает за нижний край поля на полвысоты — место под него */
	padding-bottom: 7px;
}

.cl-num-slide > .cl-num,
.cl-num-slide > .cl-num-range {
	grid-area: 1 / 1;
}

/* Сообщение об ошибке (calc-errors.js) — вторым рядом, под полем. */
.cl-num-slide > .cl-err-msg {
	grid-column: 1;
}

.cl-num-range {
	/* поверх поля: в разметке полоса идёт раньше него */
	position: relative;
	z-index: 1;
	align-self: end;
	/* центр бегунка — ровно на нижней кромке поля */
	margin: 0 calc(1.25rem + 6px) -7px 6px;
	width: auto;
	min-width: 0;
	/* высота — зона захвата: бегунок целиком; дорожку рисуют псевдоэлементы */
	height: 14px;
	/* Вертикальную прокрутку страницы браузер оставляет за собой. Это важно:
	   клик по дорожке мимо бегунка мы отменяем (preventDefault в calc-field.js,
	   чтобы значение шло шагами, а не прыгало), и без этой строки палец,
	   начавший листать страницу с полосы, никуда бы её не сдвинул. */
	touch-action: pan-y;
	padding: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	--cl-rng-fill: #2563eb;      /* тот же синий, что у стрелок поля и рамки в фокусе */
	--cl-rng-track: #dfe3e8;
}

/* Пустое поле: значение подставит первый расчёт — до этого бегунок ничего не показывает. */
.cl-num-range[data-cl-num-empty] {
	--cl-rng-fill: #b6bcc4;
}

/* Фокус показываем ореолом у бегунка, а не рамкой вокруг всей полосы: рамка на
   всю ширину поля читается как ошибка ввода (у нас так подсвечено красным). */
.cl-num-range:focus { outline: none; }
.cl-num-range:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 4px rgba(37, 99, 235, .3);
}
.cl-num-range:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 4px rgba(37, 99, 235, .3);
}

/* Дорожку слева от бегунка «заливает» градиент по переменной --cl-rng-p (её ведёт
   calc-field.js): своего ::-webkit-range-progress у WebKit нет. У Firefox есть — там
   ниже отдельные правила, и градиент ему не нужен. */
.cl-num-range::-webkit-slider-runnable-track {
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(to right,
		var(--cl-rng-fill) 0 var(--cl-rng-p, 0%),
		var(--cl-rng-track) var(--cl-rng-p, 0%) 100%);
}

.cl-num-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -5.5px;          /* (3px дорожки − 14px бегунка) / 2 */
	border-radius: 50%;
	border: 2px solid #fff;
	background: var(--cl-rng-fill);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
	transition: transform .1s;
}

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

.cl-num-range::-moz-range-track {
	height: 3px;
	border-radius: 2px;
	background: var(--cl-rng-track);
}

.cl-num-range::-moz-range-progress {
	height: 3px;
	border-radius: 2px;
	background: var(--cl-rng-fill);
}

.cl-num-range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: var(--cl-rng-fill);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

/* На телефоне стрелки крупнее — полоса кончается раньше; бегунок крупнее под палец. */
@media (max-width: 640px) {
	.cl-num-slide { padding-bottom: 9px; }
	.cl-num-range { height: 18px; margin: 0 calc(2.75rem + 6px) -9px 6px; }
	.cl-num-range::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7.5px; }
	.cl-num-range::-moz-range-thumb { width: 18px; height: 18px; }
}

/* Совсем узкое поле (по два-три в ряд в блоках «Закупка», «Проёмы») — полоса в
   несколько десятков пикселей, за которую не ухватиться; убираем. Блок идёт
   ПОСЛЕДНИМ среди правил ряда: вес тот же, решает порядок. */
@container (max-width: 120px) {
	.cl-num-range { display: none; }
}

/* В печать (и в PDF, см. freezeInputs в calc-actions.js) стрелки и ползунок не идут. */
@media print {
	.cl-num-btns { display: none; }
	.cl-num > input { padding-right: 0.6rem; }
	.cl-num-range { display: none; }
	.cl-num-slide { padding-bottom: 0; }
}