/* Раскладочные помощники калькуляторов — по одному правилу на приём.
   Подключается глобально (Cl_Calculators::enqueue_assets). */

/* ---------- Липкая форма на десктопе ----------
   На длинных страницах (лестницы — до 9 300 px) форма уезжает вверх, и менять
   размеры, глядя на чертёж, невозможно. Нужны ДВЕ пометки в разметке:
   класс на колонке формы   — <div class="cl-sticky-form flex-none w-full lg:w-80 …">
   атрибут на корне         — <div id="xxx-calc" data-cl-sticky-form …>
   Без второй липкость не работает вообще (почему — в комментарии ниже).
   Только с широкого экрана: на телефоне колонки идут одна под другой, и липкая
   форма съела бы весь экран.

   Собственной полосы прокрутки у формы НЕТ. Раньше была (max-height + overflow-y),
   но две прокрутки рядом спорят под колесом мыши, а на длинных формах полоса висела
   всегда. Вместо неё формы выше окна липнут НИЖНИМ краем: пока страница едет вниз,
   форма едет вместе с ней, и останавливается, когда её низ дошёл до низа окна.
   Отрицательный `top` для таких форм считает includes/calc-sticky-form.js
   (переменная --cl-sticky-top); без скрипта работает обычное липкое поведение. */
@media (min-width: 1024px) {
	/* ВАЖНО: корню калькулятора нужен видимый overflow, иначе липкость не работает.
	   Корень свёрстан как <div id="xxx-calc" class="… rounded-lg overflow-hidden">:
	   overflow-hidden там ради скругления углов, но для потомка с position:sticky
	   такой предок становится «прокручиваемым контейнером». Липнуть внутри него
	   не к чему — контейнер сам едет вместе со страницей, и форма уезжает вверх,
	   хотя position:sticky в стилях стоит. Именно поэтому липкая форма на части
	   калькуляторов не работала, хотя класс был проставлен.
	   Липкость включается атрибутом на корне (<div id="xxx-calc" data-cl-sticky-form …>);
	   06.08.2026 он проставлен во всех 142 шаблонах с формой. Атрибут оставлен
	   вместо «отменить клипование у всех подряд» осознанно: правило снимает
	   overflow только там, где это осмысленно, и новый калькулятор получает
	   липкую форму сознательным решением, а не побочным эффектом.
	   Селектор удвоен намеренно. У .overflow-hidden от Tailwind тот же вес (0,1,0),
	   а его стили CDN-сборка вставляет в <head> уже во время работы страницы —
	   то есть ПОЗЖЕ нашего файла, и при равном весе побеждает он. Удвоение даёт
	   (0,2,0) и снимает зависимость от порядка загрузки, не прибегая к !important. */
	[data-cl-sticky-form][data-cl-sticky-form] { overflow: visible; }

	.cl-sticky-form {
		position: sticky;
		top: var(--cl-sticky-top, 1rem);
		align-self: flex-start;
	}

	/* Своя полоса прокрутки у формы — по отдельному разрешению:
	   <div id="xxx-calc" data-cl-sticky-form="scroll" …>. Такая форма всегда
	   липнет ВЕРХНИМ краем и прокручивается внутри себя, а не уезжает вниз
	   (нижний край для неё не считается — см. includes/calc-sticky-form.js).
	   Прокрутку намеренно НЕ запираем (overscroll-behavior не трогаем): дойдя
	   до конца формы, колесо продолжает листать страницу — иначе курсор над
	   формой упирается в стену. */
	[data-cl-sticky-form="scroll"] .cl-sticky-form {
		max-height: calc(100vh - 2rem);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

@media print {
	.cl-sticky-form { position: static !important; top: auto !important; }
}

/* ---------- Заголовок над чертежом ----------
   Вкладок над лентой чертежей больше нет (модуль calc-figure-tabs.js удалён
   06.08.2026): переключатель прятал от пользователя всё, кроме одного чертежа,
   и что стоит за кнопкой — по ней не догадаться. Чертежи идут лентой, один под
   другим, как у конкурента, но каждый подписан. Подпись попадает и в заголовок
   полноэкранного просмотра — через data-cl-fig-title на самом чертеже
   (см. includes/calc-figure.js). */
.cl-fig-caption {
	margin: 1.25rem 0 .35rem;
	font: 600 15px/1.3 Arial, sans-serif;
	color: #374151;
}
.cl-fig-caption:first-child { margin-top: 0; }


/* ---------- Картинка наверху на телефоне (includes/calc-mobile-top.js) ----------
   Помеченный блок (data-cl-top) на узком экране переезжает в этот карман перед
   колонкой формы — чтобы 3D-модель была видна сразу, без прокрутки через всю
   форму. Ширина полная: ряд свёрстан как flex-wrap, и неполная ширина посадила
   бы форму рядом с моделью. На широком экране карман пуст и спрятан атрибутом
   hidden — блок в это время лежит на своём месте в правой колонке. */
.cl-top-slot {
	width: 100%;
	/* до формы ровно 12px: ряд даёт свои 24px (gap-6), карман их наполовину
	   съедает, а нижний отступ самого блока (mb-2 у рамки 3D) обнулён — было 44px,
	   и форма отъезжала от рисунка (решение заказчика 08.10.2026) */
	margin-bottom: -12px;
}
.cl-top-slot > [data-cl-top] { margin-bottom: 0; }


/* ---------- Аккордеон групп формы (includes/calc-accordion.js) ---------- */
.cl-acc__head {
	position: relative;
	padding-right: 1.4rem;
	cursor: pointer;
	user-select: none;
}
.cl-acc__head::after {
	content: '';
	position: absolute;
	right: .25rem;
	top: 50%;
	width: .4rem;
	height: .4rem;
	margin-top: -.32rem;
	border-right: 1.5px solid #94a3b8;
	border-bottom: 1.5px solid #94a3b8;
	transform: rotate(45deg);
	transition: transform .15s;
}
.cl-acc__head[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -.12rem; }
.cl-acc__head:hover::after { border-color: #2563eb; }
.cl-acc__head:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

@media print {
	/* на печать форма идёт целиком, свёрнутые группы тоже */
	.cl-acc__body { display: block !important; }
	.cl-acc__head::after { display: none; }
}


/* ---------- Печать: служебные элементы новых модулей ---------- */
@media print {
	.cl-home-chips,
	.cl-index__bar,
	.cl-index__letters,
	.cl-section-bar,
	.cl-section-nav,
	.cl-fav-btn,
	.vzd-tile,
	.cupe-dup { display: none !important; }

	/* Плитки выбора детали печатать незачем, а вот выбранная схема нужна. */
	#vzd-tiles { display: none !important; }
}

/* ---------- Телефон: калькулятор без рамок ----------
   На узком экране рамка корня (border + rounded-lg), его внутренний отступ
   (.p-5) и отступ серой формы складывались с отступом сайта и карточки темы:
   до поля ввода набегало под 90px с каждой стороны. Теперь, как у ecalc.ru,
   рамок нет вовсе, а форма — серая полоса во всю ширину экрана (выходит за
   отступ сайта в 16px, см. cl-design.css темы).
   Корень находим по data-cl-sticky: он стоит у всех калькуляторов с формой.
   Селекторы удвоены по той же причине, что выше: Tailwind CDN вставляет свои
   классы позже нашего файла, и при равном весе победил бы он. */
@media (max-width: 780px) {
	[data-cl-sticky][data-cl-sticky] {
		border: 0;
		border-radius: 0;
		margin-top: 0;
		overflow: visible;
	}
	[data-cl-sticky][data-cl-sticky] > .p-5 { padding: 0; }
	[data-cl-sticky] .cl-sticky-form.cl-sticky-form {
		width: calc(100% + 32px);
		margin-left: -16px;
		margin-right: -16px;
		padding: 16px;
		border-radius: 0;
	}
}

/* ---------- Простой калькулятор: без «Исходных данных» ----------
   Метку data-cl-simple на корень ставит шорткод, если в config.php калькулятора
   'simple' => true (см. cl_calc_is_simple() в cl-calculators.php). Таблица
   «Исходные данные» повторяла форму, стоящую рядом, — прячем её колонку, а
   «Результаты» растягиваем на всю ширину. Шаблон не трогаем: JS калькулятора
   по-прежнему пишет в {pre}-in, просто этого не видно. */
[data-cl-simple] .grid > div:has(> [id$="-in"]) { display: none; }
[data-cl-simple] .grid:has(> div > [id$="-in"]) { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   Телефон: результат — сразу под формой (решение заказчика 08.10.2026).
   - Панель якорей («Чертежи / Расчёты / Скачать / Информация») на телефоне
     занимала два ряда крупных кнопок между формой и ответом — прячем. Кнопки
     сохранения и печати остаются ниже, в блоке «Сохранить или распечатать».
     У панели display задан инлайном (calc-nav.php) — отсюда !important.
   - «Исходные данные» повторяют форму, стоящую прямо над ними, — прячем, как
     у простых калькуляторов. JS по-прежнему пишет в {pre}-in.
   Только screen: в печать и PDF с телефона таблица и так идёт целиком.
   ========================================================================== */
@media screen and (max-width: 780px) {
	[data-cl-calc] .cl-calc-nav { display: none !important; }
	[data-cl-calc] .grid > div:has(> [id$="-in"]) { display: none; }
	/* Ответ — сразу под кнопкой расчёта, чертежи и 3D — ниже: цифры результата
	   должны стоять как можно ближе к полям, из которых получились. В разметке
	   сетка результатов идёт ПОСЛЕ рисунков (так и надо для печати и десктопа),
	   поэтому порядок меняется только тут. Сетка — прямой ребёнок области печати
	   у 270 калькуляторов из 271 (проверено обходом, scratchpad/slider-edge/struct.js). */
	[data-cl-calc] [id$="-print-area"] { display: flex; flex-direction: column; }
	[data-cl-calc] [id$="-print-area"] > :has([id$="-out"]) { order: -1; margin-top: 0; margin-bottom: 1.25rem; }
}

/* ==========================================================================
   Числовые поля — по два в ряд (решение заказчика 08.10.2026: «сжать
   интерфейс везде, где возможно»). Шаблоны не правятся.

   Блок «подпись + числовое поле» без списков и галочек помечает классом
   .cl-fld-half calc-field.js (markHalves — почему JS, см. там). Контейнер с
   такими блоками становится сеткой в две колонки: поле занимает одну, всё
   остальное (заголовки, списки, галочки, поле со списком единиц, подсказки) —
   всю ширину. Поля в ряду встают по НИЗУ ячейки: подпись в две строки не
   сбивает соседа по высоте.

   Готовые сетки и флекс-ряды шаблонов (.grid / .flex) не трогаем — там
   раскладка уже задана руками (у краски по металлу, в «Закупке» и т. п.).
   ========================================================================== */
:where([data-cl-calc] .cl-sticky-form, [data-cl-calc] .cl-sticky-form div):not(.grid):not(.flex):has(> .cl-fld-half) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 12px;
	align-items: end;
}
:where([data-cl-calc] .cl-sticky-form, [data-cl-calc] .cl-sticky-form div):not(.grid):not(.flex):has(> .cl-fld-half) > :where(*) {
	grid-column: 1 / -1;
}
:where([data-cl-calc] .cl-sticky-form, [data-cl-calc] .cl-sticky-form div):not(.grid):not(.flex):has(> .cl-fld-half) > .cl-fld-half {
	grid-column: auto;
}
/* Последнее поле нечётной серии (и одинокое поле) пары не найдёт — во всю
   ширину, как было: половина строки с пустотой рядом ничего не сжимает.
   Класс .cl-fld-odd ставит calc-field.js. */
:where([data-cl-calc] .cl-sticky-form, [data-cl-calc] .cl-sticky-form div):not(.grid):not(.flex):has(> .cl-fld-half) > .cl-fld-half.cl-fld-odd {
	grid-column: 1 / -1;
}

/* ==========================================================================
   Панель над 3D-моделью («Изменить цвета» + «Размерные линии») — СНАРУЖИ рамки
   (решение заказчика 08.10.2026). Панель scene-kit.js вставляет первым ребёнком
   в обёртку холста, а рамка была на обёртке: кнопка сидела внутри рамки, и её
   бок ложился ровно на линию бока рисунка. Рамку переносим с обёртки на сам
   холст (он идёт сразу за панелью), панели даём отступ от края рисунка.
   Шаблоны не правятся: у всех 19 калькуляторов с панелью обёртка одинаковая
   (rounded-lg overflow-hidden border).
   ========================================================================== */
[data-cl-calc] div.border:has(> .cl-calc-3d-bar) {
	border: 0 !important;
	border-radius: 0;
	overflow: visible;
}
[data-cl-calc] div.border > .cl-calc-3d-bar {
	margin: 0 0 8px;
	padding: 0 10px;
	/* справа — на любой ширине, как на телефоне (решение заказчика 08.10.2026) */
	justify-content: flex-end;
}
[data-cl-calc] div.border > .cl-calc-3d-bar + * {
	border: 1px solid var(--cl-calc-color-canvas-border);
	border-radius: 0.5rem;
	overflow: hidden;
}

/* Длинное пояснение под рисунком: на широком экране — текстом, на телефоне —
   кружком «?» после короткой подписи (решение заказчика 08.10.2026: пять строк
   мелкого текста отодвигали форму от поднятого наверх рисунка).
   Разметка: <span class="cl-note-full">текст</span>
             <span class="cl-note-tip">Подпись <?= cl_tip(текст) ?></span> */
.cl-note-tip { display: none; }
@media screen and (max-width: 780px) {
	.cl-note-full { display: none; }
	.cl-note-tip { display: inline; }
}

/* Телефон: на кнопке цветов только палитра
   и образцы материалов, без слов «Изменить цвета» (решение заказчика
   08.10.2026: надпись загромождала). Имя кнопке оставляет её title. */
@media screen and (max-width: 780px) {
	[data-cl-calc] .cl-calc-3d-bar button > svg + span {
		display: none;
	}
}

/* Кнопка цветов — крайняя справа, галочка «Размерные линии» перед ней
   (решение заказчика 08.10.2026). Порядок в разметке задаёт модуль 3D,
   их девять — переставляем здесь. */
.cl-calc-3d-bar > .cl-calc-3d-check { order: -1; }

/* Телефон: без горизонтальных линий между группами формы — заголовок группы
   и так отделяет её, а полосы дробили и без того длинную ленту полей
   (решение заказчика 08.10.2026). Отступ над заголовком остаётся. */
@media screen and (max-width: 780px) {
	[data-cl-calc] .cl-sticky-form h4,
	[data-cl-calc] .cl-sticky-form .border-t {
		border-top-width: 0 !important;
	}
	[data-cl-calc] .cl-sticky-form hr {
		display: none;
	}
}