/*
 * Ф2.1 (план §3.3): общий слой примитивов для 17 инструментов-флагманов.
 * Раньше каждый tool-*/style.css заново описывал карточку-контейнер,
 * форму, кнопку, сетку чисел результата, предупреждение и дисклеймер —
 * 17 копий одного и того же с разными префиксами классов. Здесь —
 * канонические классы; каждый блок сохраняет свой префиксный класс
 * (`.kdw-form` и т.п.) ТОЛЬКО там, где ему нужна уникальная раскладка,
 * и добавляет соответствующий `.k-tool-*` класс для общего вида.
 * Существующие data-field атрибуты не трогаются — JS каждого блока
 * работает как раньше.
 */

.k-tool-card {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--card);
	padding: clamp(20px, 3vw, 36px);
	display: grid;
	gap: 20px;
	content-visibility: auto;
}

.k-tool-title { margin: 0; }
.k-tool-note { color: var(--wp--preset--color--muted); margin: 0; font-size: 14px; }

/*
 * Flex, не grid: у разных инструментов разное число полей (2-4) и своя
 * оригинальная grid-раскладка в собственном style.css блока — она
 * применяется первой (специфичнее/раньше в каскаде) и продолжает решать
 * раскладку. .k-tool-form — только safety-net для случаев без
 * собственной grid-раскладки. Раньше здесь стоял
 * `grid-template-columns: repeat(auto-fit, minmax(160px,1fr)) auto`,
 * который при столкновении с оригинальным `.kdw-form` создавал лишний
 * узкий грид-трек и сжимал кнопку «Рассчитать» до вертикального текста
 * по одной букве — поймано визуальной проверкой в браузере 2026-07-28.
 */
.k-tool-form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: end;
}

.k-tool-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 160px; min-width: 0; }
.k-tool-field > span { font-weight: 600; font-size: 14px; }
.k-tool-field input,
.k-tool-field select,
.k-tool-field textarea {
	padding: 12px 14px;
	border: 1px solid #E2E8F0;
	border-radius: var(--wp--custom--radius--md);
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	max-width: 100%;
}
/*
 * Реальный найденный баг (визуальная проверка в браузере 2026-07-28,
 * не связан с изменениями Ф2): у всех 17 инструментов поля формы стоят
 * в CSS Grid с треками `1fr` в собственном `tool-*/style.css` каждого
 * блока. У grid-track `1fr` неявный `min-width: auto` (= min-content) —
 * широкий `<select>` с длинным текстом опции не давал своему треку
 * сжаться, из-за чего последний трек (кнопка «Рассчитать») схлопывался
 * до пары пикселей и текст кнопки переносился по одной букве в
 * столбик. `min-width: 0` на самом grid/flex-item нейтрализует это
 * независимо от того, чья раскладка (grid блока или flex `.k-tool-form`
 * выше) в итоге побеждает по каскаду.
 */
.k-tool-field select,
.k-tool-field input {
	min-width: 0;
	text-overflow: ellipsis;
}
/*
 * Проверено на бою: у собственного style.css каждого блока (`.kdw-form`
 * и т.п.) специфичность та же (один класс), но он подключается ПОСЛЕ
 * components.css — поэтому побеждает по каскаду, а min-width:0/nowrap
 * выше не применялись вовсе. Два свойства ниже — единственные,
 * которым принудительно нужен приоритет: без них grid-трек кнопки
 * схлопывается, а её текст переносится по одной букве.
 */
.k-tool-field { min-width: 0 !important; }
.k-tool-cta { white-space: nowrap !important; }
.k-tool-field input[type="range"] {
	width: 100%;
	accent-color: var(--wp--preset--color--brand);
	padding: 0;
}

.k-tool-cta {
	flex: 0 0 auto;
	background: var(--wp--preset--color--brand);
	color: #fff;
	border: 0;
	padding: 14px 22px;
	font-weight: 700;
	border-radius: var(--wp--custom--radius--md);
	cursor: pointer;
	white-space: nowrap;
	transition: transform .15s, box-shadow .15s;
}
.k-tool-cta:hover { transform: translateY(-1px); box-shadow: var(--wp--custom--shadow--pop); }
.k-tool-cta:disabled { opacity: .6; cursor: default; transform: none; }

/* Слот «главное число» + вторичные числа результата (план §3.3) */
.k-tool-numbers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	background: var(--wp--preset--color--bg);
	padding: 16px;
	border-radius: var(--wp--custom--radius--md);
}
@media (max-width: 640px) {
	.k-tool-numbers { grid-template-columns: repeat(2, 1fr); }
}
.k-tool-numbers div small { color: var(--wp--preset--color--muted); display: block; }
.k-tool-numbers div b {
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 800;
	color: var(--wp--preset--color--brand-dark);
}

/* Слот «красный флаг» — предупреждение */
.k-tool-warn {
	background: #FFF7E6;
	border-left: 4px solid var(--wp--preset--color--warn);
	padding: 12px 16px;
	border-radius: var(--wp--custom--radius--sm);
	margin: 0;
}

/* Слот «источник этой цифры» — план §3.3: структурный, не опциональный */
.k-tool-source {
	color: var(--wp--preset--color--muted);
	font-size: 14px;
}
.k-tool-source a { color: var(--wp--preset--color--brand-dark); font-weight: 600; }

.k-tool-noscript { color: var(--wp--preset--color--muted); font-size: 14px; }

/* Слот «что дальше» — следующий шаг внутри сайта */
.k-tool-next {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.k-tool-next a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wp--preset--color--bg);
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	color: var(--wp--preset--color--brand-dark);
}
.k-tool-next a:hover { background: #E3F2FD; }

/* §3.2/§15: серверный SVG рядом с формой — виден без JS, не в hidden-output */
.k-tool-figure,
.kdw-figure,
.ktl-figure {
	margin: 0;
	color: var(--wp--preset--color--text, #1a2332);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.kidstic-figure {
	display: block;
	width: 100%;
	max-width: 560px;
	height: auto;
	margin: 0 auto;
}
.k-tool-figure__caption {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
	text-align: center;
}