/* Карточка-ответ результатов расчёта (window.CLResult, см. calc-result.js).
   Главные величины выводятся крупно на акцентной подложке, чтобы ответ
   считывался сразу, не сливаясь со списком «Исходные данные». */

.cl-res-card {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 30px 36px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-left: 4px solid #2563eb;
	border-radius: 8px;
	padding: 14px 18px;
	margin: 0 0 14px;
	break-inside: avoid;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.cl-res-label {
	font-size: 11px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #64748b;
	margin-bottom: 3px;
}

.cl-res-value {
	font-size: 20px;
	line-height: 1.15;
	font-weight: 600;
	color: #1f2937;
	font-variant-numeric: tabular-nums;
	/* Переносится по словам. Запрет переноса раньше стоял на всей строке —
	   чтобы не рвалось «1 234 567» по пробелу между тысячами, — но в ответе
	   бывают и фразы («Поверхность холоднее точки росы — выпадет конденсат»),
	   и они молча вылезали за голубую панель. Теперь неразрывность точечная:
	   пробелы внутри числа подменяются неразрывными в calc-result.js. */
	overflow-wrap: break-word;
	word-break: normal;
}

/* Первая величина — самая важная, крупнее и в цвет акцента */
.cl-res-item--main .cl-res-value {
	font-size: 30px;
	font-weight: 700;
	color: #1d4ed8;
}

.cl-res-unit {
	font-size: .55em;
	font-weight: 400;
	color: #64748b;
}

/* НЕ БОЛЬШЕ ДВУХ ВИДОВ ТИПОГРАФИКИ В ОТВЕТЕ (решение заказчика 08.10.2026):
   крупно — только главная величина, остальные величины карточки выглядят
   ровно как строки «Результатов» под ней (подпись слева, число по линии,
   единица в своей колонке — см. правила строк в конце файла). Раньше вторая
   и третья величины были средним размером с подписью капителью — третий
   шрифт между крупным ответом и строками, отсюда «разнобой».
   Разметка прежняя (.cl-res-item), её читают CSV-экспорт и липкая строка. */
.cl-res-card:has(> .cl-res-item:not(.cl-res-item--main)) { row-gap: 0; }
.cl-res-item--main { flex: 1 0 100%; }
.cl-res-item--main + .cl-res-item { margin-top: 10px; }
.cl-res-item:not(.cl-res-item--main) {
	flex: 1 0 100%;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid rgba(37, 99, 235, .16);
	font-size: 14px;
}
.cl-res-item:not(.cl-res-item--main) .cl-res-label {
	font-size: inherit;
	line-height: inherit;
	text-transform: none;
	letter-spacing: 0;
	color: #475569;
	margin: 0;
}
.cl-res-item:not(.cl-res-item--main) .cl-res-value {
	font-size: inherit;
	line-height: inherit;
	font-weight: 600;
	color: #1f2937;
	text-align: right;
}
.cl-res-item:not(.cl-res-item--main) .cl-res-unit {
	display: inline-block;
	min-width: 2.75em;
	font-size: 12px;
	color: #9ca3af;
	text-align: left;
}
.cl-res-item:not(.cl-res-item--main) .cl-res-value:not(:has(> .cl-res-unit)) {
	padding-right: calc(33px + 0.28em);
}

/* Подсветка изменившегося значения после пересчёта */
@keyframes cl-res-flash {
	0%   { background: #fef08a; }
	100% { background: transparent; }
}

.cl-res-value.cl-res-flash {
	animation: cl-res-flash 1s ease-out;
	border-radius: 4px;
}

@media print {
	.cl-res-value.cl-res-flash { animation: none; }
}


/* ---------- Панель результатов ----------
   Голубую подложку получает вся колонка ответа: заголовок «Результаты расчёта»,
   карточка с главными величинами и таблица подробностей. Без этого таблица под
   карточкой читалась как посторонний текст, а не как часть результата.
   Класс ставит calc-result.js (panelize) — разметку калькуляторов менять не нужно. */
.cl-res-panel {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-left: 4px solid #2563eb;
	border-radius: 10px;
	padding: 14px 18px 16px;
	break-inside: avoid;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

/* Заголовок колонки внутри панели. */
.cl-res-panel > h3 { color: #1e3a8a; }

/* Карточка внутри панели теряет собственный фон и становится шапкой блока. */
.cl-res-panel .cl-res-card {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}
/* Одна большая цифра — и сплошной список мелких под ней (как у ecalc.ru): линия
   идёт под главным числом, а не под всей карточкой. Иначе строки карточки и
   строки таблицы под ней разрезались на два списка, и второй читался как
   «что-то другое, не результат». */
.cl-res-panel .cl-res-item--main {
	padding-bottom: 12px;
	border-bottom: 1px solid #bfdbfe;
}
.cl-res-panel .cl-res-item--main + .cl-res-item { margin-top: 0; }

/* Разделители строк подробностей: серый на голубом почти не виден. */
.cl-res-panel .border-gray-100 { border-color: rgba(37, 99, 235, .16) !important; }
.cl-res-panel .border-gray-200 { border-color: rgba(37, 99, 235, .24) !important; }

/* Подписи строк внутри панели — чуть темнее, чтобы держали структуру. */
.cl-res-panel .text-gray-500 { color: #475569; }

/* Если под карточкой в панели ничего нет, разделитель не нужен. */
.cl-res-panel > *:last-child > .cl-res-card:only-child,
.cl-res-panel > .cl-res-card:last-child {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* ==========================================================================
   Строки «подпись … число единица» (row() в шаблонах и CLResult.row):
   числа — по правому краю ОДНОЙ линией, единицы — слева от той же линии
   в своей колонке, как у ecalc.ru. Иначе «4.80 м²» и «0.25 л/м²» кончались
   у правого края, и числа стояли вразнобой на ширину единицы.
   Разметка строки одна у 215 шаблонов из 218 — правило по ней, шаблоны не
   трогаем. Колонка единиц шириной с «кг/м³» (так длинны почти все); более
   длинная единица («руб/мешок») просто сдвинет число своей строки.
   ========================================================================== */
[data-cl-calc] .justify-between > .font-semibold > .text-xs.text-gray-400 {
	display: inline-block;
	min-width: 2.75em;
	text-align: left;
}
/* Строка без единицы («Тип краски — Акриловая», «Слои — 1»): значение
   встаёт к той же линии, а не к краю. 2.75em единицы (12px) + пробел. */
[data-cl-calc] .justify-between > .font-semibold:not(:has(> .text-xs.text-gray-400)) {
	padding-right: calc(33px + 0.28em);
}