/*
 * Engineering Calculators — Premium UI addendum ("Calculator UI v1").
 *
 * Reference implementation: /calculators/cooling-capacity/ (see
 * docs/STATE.md). Migrated calculators so far: cooling-capacity,
 * air-exchange, duct-air-velocity, airflow-by-velocity, duct-sizing,
 * duct-area, pressure-loss, fan-power, air-distribution, air-mixing,
 * air-heating-cooling, refrigerant-state, superheat-subcooling,
 * refrigeration-cycle.
 * Enqueued ONLY for those pages (inc/enqueue.php's $ark_premium_ui_calc_keys
 * gate), loaded after engineering-calculators.css. Every rule here only ADDS
 * a premium visual layer to markup/classes already used by every other
 * calculator — it does not override .calc-panel/.calc-field/.calc-result
 * base rules for anyone else, since no non-migrated calculator page ever
 * loads this file. No JS behaviour, no data-* contract, no calculation
 * logic lives here.
 *
 * All rules are calculator-agnostic by class name (nothing is scoped to a
 * specific slug) — the only per-calculator content is each hero's own
 * inline SVG illustration markup, built in page-engineering-calculator.php
 * and styled here via the shared .calc-hero-diagram__* vocabulary.
 *
 * Tokens: reuses assets/css/tokens.css exclusively (--ark-*). No new
 * magic colors — the few calculator-specific accents below are aliases of
 * existing tokens for readability, not new hex values.
 */

/* ---------------------------------------------------------------------
 * Premium Hero — template-parts/calculators/shared/premium-hero.php.
 * ------------------------------------------------------------------- */

.calc-premium-hero {
	position: relative;
	padding-block: clamp(48px, 6vw, 88px) clamp(28px, 3vw, 48px);
	background: linear-gradient(180deg, var(--ark-bg-950) 0%, var(--ark-bg-900) 100%);
	border-bottom: 1px solid var(--ark-border-soft);
	overflow: hidden;
}

.calc-premium-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

/* Catalog Hero only (page-calculators.php passes 'visual_variant' =>
 * 'catalog', which premium-hero.php now also stamps on the <section> as
 * .calc-premium-hero--catalog) — a wider ~55–60% visual column per the
 * approved BIM-visual composition, and align-items: stretch so that column
 * matches the full height of the text column instead of only its own
 * content's height (the media inside is absolutely positioned/cover-fit,
 * see .calc-premium-hero__media-image below, so it needs a real box to
 * fill). Every individual calculator hero keeps the original 1.1fr/0.9fr
 * centered grid untouched. */
.calc-premium-hero--catalog .calc-premium-hero__grid {
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	align-items: stretch;
}

.calc-premium-hero--catalog .calc-premium-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.calc-premium-hero__eyebrow {
	font-size: var(--ark-fs-meta);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ark-accent-conditioning);
	margin: 0 0 16px;
}

.calc-premium-hero__title {
	font-size: var(--ark-fs-hero-h1);
	font-weight: 600;
	line-height: 1.08;
	color: var(--ark-text-primary);
	margin: 0 0 18px;
	max-width: 16ch;
	overflow-wrap: break-word;
}

.calc-premium-hero__lead {
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.15rem);
	line-height: 1.6;
	color: var(--ark-text-secondary);
	max-width: 46ch;
	margin: 0 0 24px;
}

.calc-premium-hero__markers {
	list-style: none;
	margin: 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--ark-border-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
}

.calc-premium-hero__marker {
	position: relative;
	padding-left: 16px;
	font-size: var(--ark-fs-meta);
	color: var(--ark-text-muted);
}

.calc-premium-hero__marker::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 1px;
	background: var(--ark-border-titanium);
}

.calc-premium-hero__visual {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Catalog-only treatment (page-calculators.php passes 'visual_variant' =>
 * 'catalog') — the visual dissolves into the section background instead of
 * sitting in its own card, via a mask fading toward the content column.
 * Every individual calculator hero omits 'visual_variant' and is
 * unaffected. position: relative gives .calc-premium-hero__media-picture
 * (rendered only once a real image_src is set — see premium-hero.php) a
 * box to absolutely fill; the inline SVG fallback below ignores this
 * (it sizes itself via width/max-width/height, not this box) so nothing
 * changes here until a real asset exists. The negative right margin lets
 * the visual bleed past the container's own right padding toward the
 * viewport edge — "enters the Hero from the right edge" rather than
 * stopping at an inset box — safe because the section above already has
 * overflow: hidden.
 *
 * Mask kept deliberately gentle: the approved BIM render (assets/images/
 * calculators/calculators-hero-bim.*) already dissolves itself into black
 * across its own left half (dark graphite background + a fading technical
 * wireframe), so a strong mask on top would double-darken that transition
 * exactly where the brief says not to. This only fades the last stretch
 * closest to the text column and cleans up the hard right-edge/bottom-edge
 * rectangle the raw bitmap would otherwise show. */
.calc-premium-hero__visual--catalog {
	position: relative;
	overflow: hidden;
	margin-right: calc(-1 * var(--ark-container-pad));
	-webkit-mask-image: linear-gradient(to left, #000 55%, transparent 96%);
	mask-image: linear-gradient(to left, #000 55%, transparent 96%);
}

/* The BIM/MEP render (assets/images/calculators/calculators-hero-bim.*) —
 * absolutely fills the visual column (sized by align-items: stretch
 * above). The inline SVG fallback is unaffected by these rules (different
 * class), so nothing here touches the no-asset state. */
.calc-premium-hero__media-picture {
	position: absolute;
	inset: 0;
	display: block;
}

/* The column's own aspect ratio (~2:1 once stretched to the text column's
 * height) is wider than the source render's (~1.87:1), so a plain
 * object-fit: cover ends up width-constrained — it fits the frame with
 * almost no horizontal crop, which shrinks the actual MEP model (sitting
 * in the right ~55% of the source frame) down to a small cluster instead
 * of filling the column. transform: scale zooms into that same
 * width-fitted image afterwards, transform-origin keeps the zoom anchored
 * on the model rather than the frame center, and overflow: hidden on the
 * parent (.calc-premium-hero__visual--catalog) clips the excess — this
 * reads as "crop into the model", not a resize of the whole frame. */
.calc-premium-hero__media-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 75% 38%;
	transform: scale(1.55);
	transform-origin: 78% 42%;
}

.calc-premium-hero__blueprint {
	width: 100%;
	max-width: 320px;
	height: auto;
	opacity: 0.9;
}

.calc-premium-hero__blueprint-frame {
	fill: none;
	stroke: var(--ark-border-titanium);
	stroke-width: 1;
}

.calc-premium-hero__blueprint-line {
	stroke: var(--ark-border-soft);
	stroke-width: 1;
	stroke-dasharray: 3 4;
}

.calc-premium-hero__blueprint-accent {
	fill: none;
	stroke: var(--ark-accent-conditioning);
	stroke-width: 1.5;
	opacity: 0.7;
}

@media (max-width: 960px) {
	.calc-premium-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The catalog's desktop-only 2-class override
	 * (.calc-premium-hero--catalog .calc-premium-hero__grid, specificity
	 * 0,2,0) outranks the single-class rule right above it regardless of
	 * media query — specificity beats source order — so it has to be
	 * re-stated at equal specificity here to actually collapse to one
	 * column below the grid breakpoint. Same for align-items: without
	 * resetting it back to the base value, stretch would keep leaking
	 * through into the stacked mobile layout too. */
	.calc-premium-hero--catalog .calc-premium-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		align-items: center;
	}

	.calc-premium-hero__visual {
		order: -1;
	}

	.calc-premium-hero__blueprint {
		max-width: 220px;
	}

	/* Below the grid breakpoint the visual stacks above the text instead
	 * of sitting beside it, so the left-to-right dissolve mask (meant to
	 * blend into the content column beside it) would fade the wrong edge.
	 * Swap to a top/bottom fade so it still dissolves into the section
	 * background rather than reading as a hard-edged image block. Height
	 * is capped and controlled explicitly — once stacked, this box has no
	 * stretch partner to inherit height from, and its only real content
	 * (the media picture, once one exists) is absolutely positioned/out of
	 * flow, so without an explicit height the row would otherwise collapse
	 * to 0. Text stays the dominant element; the visual reads as a modest,
	 * cropped backdrop rather than a second full-width hero block. The
	 * desktop-only right-edge bleed is reset: at full container width a
	 * stacked block bleeding past one side only would look like a layout
	 * slip, not an intentional edge-entry. */
	.calc-premium-hero__visual--catalog {
		height: clamp(160px, 42vw, 240px);
		margin-right: 0;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 78%, transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 78%, transparent 100%);
	}

	/* Softer presence on mobile so the real BIM image (once in place)
	 * recedes behind the copy instead of competing with it — the inline
	 * SVG fallback keeps its own .calc-premium-hero__blueprint opacity
	 * (0.9) unchanged, this only affects the raster media path. */
	.calc-premium-hero__media-image {
		opacity: 0.7;
	}
}

@media (max-width: 640px) {
	.calc-premium-hero__title {
		max-width: none;
	}
}

/* ---------------------------------------------------------------------
 * Hero technical diagram (cooling-capacity) — axonometric room, glazing
 * plane, incoming solar vector, two internal heat-source marks, dimension
 * line and short blueprint labels (see page-engineering-calculator.php's
 * $ark_cc_hero_illustration). Replaces the generic square+circle
 * placeholder that .calc-premium-hero__blueprint-* renders for any future
 * calculator that hasn't supplied its own illustration yet.
 * ------------------------------------------------------------------- */

.calc-hero-diagram {
	width: 100%;
	max-width: 340px;
	height: auto;
}

.calc-hero-diagram__face {
	fill: var(--ark-surface-700);
	stroke: var(--ark-border-titanium);
	stroke-width: 1;
}

.calc-hero-diagram__face--top {
	fill: var(--ark-surface-650);
}

.calc-hero-diagram__glazing {
	fill: var(--ark-accent-conditioning);
	fill-opacity: 0.16;
	stroke: var(--ark-accent-conditioning);
	stroke-width: 1;
}

.calc-hero-diagram__glazing-mullion {
	stroke: var(--ark-accent-conditioning);
	stroke-width: 0.75;
	opacity: 0.55;
}

.calc-hero-diagram__solar-line {
	fill: none;
	stroke: var(--ark-accent-heating);
	stroke-width: 1;
	stroke-dasharray: 3 4;
	opacity: 0.7;
}

.calc-hero-diagram__solar-arrow {
	fill: none;
	stroke: var(--ark-accent-heating);
	stroke-width: 1;
	stroke-linejoin: round;
	opacity: 0.8;
}

.calc-hero-diagram__load-dot {
	fill: var(--ark-accent-heating);
	opacity: 0.7;
}

.calc-hero-diagram__load-line {
	fill: none;
	stroke: var(--ark-border-titanium);
	stroke-width: 0.75;
	stroke-dasharray: 2 3;
	opacity: 0.6;
}

.calc-hero-diagram__dim-line,
.calc-hero-diagram__dim-tick,
.calc-hero-diagram__sum-line {
	stroke: var(--ark-text-muted);
	stroke-width: 0.75;
	opacity: 0.5;
}

.calc-hero-diagram__label {
	font-family: var(--ark-font-sans);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.08em;
	fill: var(--ark-text-muted);
}

.calc-hero-diagram__label--muted {
	fill: var(--ark-text-muted);
	opacity: 0.7;
}

.calc-hero-diagram__label--accent {
	fill: var(--ark-accent-conditioning);
	font-size: 11px;
}

/* Reusable across every duct/airflow hero illustration (air-exchange,
 * duct-air-velocity, airflow-by-velocity, duct-sizing) — a small shared
 * line-art vocabulary rather than a bespoke style per calculator. */
.calc-hero-diagram__flow-line {
	fill: none;
	stroke: var(--ark-accent-ventilation);
	stroke-width: 1.25;
	opacity: 0.8;
}

.calc-hero-diagram__flow-arrow {
	fill: none;
	stroke: var(--ark-accent-ventilation);
	stroke-width: 1.25;
	stroke-linejoin: round;
	opacity: 0.9;
}

.calc-hero-diagram__duct-body {
	fill: var(--ark-surface-650);
	stroke: var(--ark-border-titanium);
	stroke-width: 1;
}

.calc-hero-diagram__duct-cap {
	fill: var(--ark-surface-700);
	stroke: var(--ark-border-titanium);
	stroke-width: 1;
}

/* Catalog Hero illustration only (page-calculators.php) — outer drawing
 * frame + light grid, reinforcing the "engineering drawing" read alongside
 * the existing dimension-line/load-dot vocabulary above. */
.calc-hero-diagram__frame {
	fill: none;
	stroke: var(--ark-border-soft);
	stroke-width: 1;
}

.calc-hero-diagram__grid-line {
	stroke: var(--ark-border-soft);
	stroke-width: 0.5;
	opacity: 0.7;
}

.calc-hero-diagram--catalog {
	max-width: 380px;
}

@media (max-width: 960px) {
	.calc-hero-diagram {
		max-width: 240px;
	}
}

/* ---------------------------------------------------------------------
 * Step Navigation — template-parts/calculators/shared/step-nav.php.
 * Visual status/progress layer, not interactive routing (see the
 * partial's own docblock) — no active-step state, all markers equal
 * weight, purely a "this is what the workspace below covers" index.
 * ------------------------------------------------------------------- */

.calc-step-nav {
	position: relative;
	background: var(--ark-bg-900);
	border-bottom: 1px solid var(--ark-border-soft);
}

/* Thin baseline the whole rail sits on, visually tying it to the
 * workspace console directly below rather than reading as a separate
 * navigation bar between two unrelated sections. */
.calc-step-nav::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	background: linear-gradient(90deg, var(--ark-accent-conditioning) 0%, transparent 45%);
	opacity: 0.5;
}

.calc-step-nav__inner {
	overflow-x: auto;
	scrollbar-width: thin;
}

.calc-step-nav__list {
	list-style: none;
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 14px 0;
	min-width: max-content;
}

.calc-step-nav__item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 16px;
	border-right: 1px solid var(--ark-border-soft);
	white-space: nowrap;
}

.calc-step-nav__item:last-child {
	border-right: 0;
}

.calc-step-nav__index {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--ark-accent-conditioning);
}

.calc-step-nav__label {
	font-size: var(--ark-fs-meta);
	font-weight: 600;
	color: var(--ark-text-secondary);
}

/* ---------------------------------------------------------------------
 * Workspace shell — premium variant (extra_class on workspace.php). One
 * continuous instrument body: outer border + rounded corners live on the
 * shell/grid, not on each panel — input/result read as two zones of the
 * same console (divided by a single vertical rule), not two cards with a
 * gap between them.
 * ------------------------------------------------------------------- */

.engineering-calculator-workspace--premium {
	padding-block: clamp(32px, 3.5vw, 56px);
	background: var(--ark-bg-900);
}

.engineering-calculator-workspace--premium .engineering-calculator-workspace__rail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	padding: 14px 28px;
	background: var(--ark-bg-850);
	border: 1px solid var(--ark-border-soft);
	border-bottom: 0;
	border-radius: var(--ark-radius-lg) var(--ark-radius-lg) 0 0;
}

.engineering-calculator-workspace__rail-label {
	min-width: 0;
	overflow-wrap: break-word;
}

.engineering-calculator-workspace__rail-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ark-text-muted);
}

.engineering-calculator-workspace__rail-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ark-accent-conditioning);
}

.engineering-calculator-workspace__rail-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ark-accent-conditioning);
}

.engineering-calculator-workspace--premium .engineering-calculator-workspace__grid {
	gap: 0;
	border: 1px solid var(--ark-border-soft);
	border-radius: var(--ark-radius-lg);
	overflow: hidden;
	background: var(--ark-surface-700);
}

.engineering-calculator-workspace--premium .engineering-calculator-workspace__rail + .engineering-calculator-workspace__grid {
	border-radius: 0 0 var(--ark-radius-lg) var(--ark-radius-lg);
}

.engineering-calculator-workspace--premium .engineering-calculator-workspace__input,
.engineering-calculator-workspace--premium .engineering-calculator-workspace__result {
	background: transparent;
	border: 0;
	border-radius: 0;
	position: static;
}

.engineering-calculator-workspace--premium .engineering-calculator-workspace__result {
	background: var(--ark-surface-650);
	border-left: 1px solid var(--ark-border-soft);
}

/* Desktop only: the grid row stretches both columns to the taller one's
 * height (input, on calculators with many field-groups but few result
 * rows — e.g. pump-power, heat-exchanger). Centering the result panel's
 * own content within that stretched height avoids a large empty block
 * pinned under a short result, without touching any calculator's markup
 * or shortening the shared row to the result's own content height. */
@media (min-width: 961px) {
	.engineering-calculator-workspace--premium .engineering-calculator-workspace__result {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

@media (max-width: 960px) {
	.engineering-calculator-workspace--premium .engineering-calculator-workspace__result {
		border-left: 0;
		border-top: 1px solid var(--ark-border-soft);
	}
}

/* ---------------------------------------------------------------------
 * Panel module label / state badge — calc-panel--premium (both input and
 * result panels for cooling-capacity).
 * ------------------------------------------------------------------- */

.calc-panel--premium .calc-panel__module-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ark-text-muted);
	margin: 0 0 14px;
}

.calc-panel__module-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.calc-result__state-badge {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 10px;
	border: 1px solid var(--ark-border-soft);
	border-radius: 999px;
	color: var(--ark-text-muted);
	margin-bottom: 14px;
}

.calc-result__state-badge::before {
	content: "Ожидание данных";
}

[data-result-state="ready"] .calc-result__state-badge {
	color: var(--ark-accent-conditioning);
	border-color: var(--ark-accent-conditioning);
}

[data-result-state="ready"] .calc-result__state-badge::before {
	content: "Готово";
}

/* ---------------------------------------------------------------------
 * Input field groups — calc-field-group (cooling-capacity/input.php).
 * ------------------------------------------------------------------- */

.calc-field-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.calc-field-group + .calc-field-group {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--ark-border-soft);
}

.calc-field-group__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--ark-fs-meta);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ark-text-secondary);
	margin: 0;
}

.calc-field-group__index {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--ark-accent-conditioning);
}

/* calc-fields-group already provides the fade-in on mode switch; nested
 * calc-field-group elements inherit spacing without an extra gap rule. */
.calc-fields-group .calc-field-group:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Two related fields side by side (e.g. area + people) — higher desktop
 * density without changing input semantics; each item is just a flex
 * child, so a hidden mode-group inside a row (e.g. "people" hidden in
 * professional mode) simply lets its sibling grow to fill the row instead
 * of leaving a fixed empty column. */
.calc-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.calc-field-row > .calc-field,
.calc-field-row > .calc-field-row__item {
	flex: 1 1 200px;
	min-width: 0;
}

.calc-field-row__item.calc-fields-group[hidden] {
	display: none;
}

@media (max-width: 640px) {
	.calc-field-row {
		flex-direction: column;
	}
}

/* ---------------------------------------------------------------------
 * Result breakdown bars — presentational only, width set inline by
 * cooling-capacity.js from the same already-computed watts values used
 * for the adjacent text (no new calculation, see that file's comment).
 * ------------------------------------------------------------------- */

.calc-result__secondary--premium {
	gap: 14px;
}

.calc-result__secondary--premium .calc-result__secondary-row:not([hidden]) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(60px, 2fr) auto;
	align-items: center;
	gap: 12px;
}

.calc-result__secondary-label {
	font-size: var(--ark-fs-meta);
	color: var(--ark-text-secondary);
}

.calc-result__bar {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: var(--ark-bg-800);
	overflow: hidden;
}

.calc-result__bar-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--ark-accent-conditioning);
	border-radius: 999px;
	transition: width 260ms var(--ark-ease);
}

@media (prefers-reduced-motion: reduce) {
	.calc-result__bar-fill {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * Technical diagram refinements — glazing plane + dimension ticks added
 * to the existing isometric room box (see result.php). Still aria-hidden,
 * still no data-result-*/aria-live overlap.
 * ------------------------------------------------------------------- */

.calc-diagram__ground-line {
	stroke: var(--ark-border-soft);
	stroke-width: 1;
}

.calc-diagram__glazing {
	fill: var(--ark-accent-conditioning);
	fill-opacity: 0.18;
	stroke: var(--ark-accent-conditioning);
	stroke-width: 1;
}

.calc-diagram__glazing-mullion {
	stroke: var(--ark-accent-conditioning);
	stroke-width: 0.75;
	opacity: 0.6;
}

.calc-diagram__dim-line,
.calc-diagram__dim-tick {
	stroke: var(--ark-text-muted);
	stroke-width: 0.75;
	opacity: 0.5;
}

/* ---------------------------------------------------------------------
 * Formula / Information — premium card treatment (extra_class on the
 * shared formula.php/information.php partials).
 * ------------------------------------------------------------------- */

.engineering-calculator-formula--premium,
.engineering-calculator-information--premium {
	background: var(--ark-bg-900);
}

.engineering-calculator-formula--premium .engineering-calculator-formula__title,
.engineering-calculator-information--premium .engineering-calculator-information__title {
	display: flex;
	align-items: center;
	gap: 12px;
}

.engineering-calculator-formula--premium .engineering-calculator-formula__title::before {
	content: "01";
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--ark-accent-conditioning);
	border: 1px solid var(--ark-border-soft);
	border-radius: 999px;
	padding: 3px 9px;
}

.engineering-calculator-information--premium .engineering-calculator-information__title::before {
	content: "02";
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--ark-accent-conditioning);
	border: 1px solid var(--ark-border-soft);
	border-radius: 999px;
	padding: 3px 9px;
}

.engineering-calculator-formula--premium .engineering-calculator-formula__equation {
	background: var(--ark-surface-700);
	border-color: var(--ark-border-medium);
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
}

.engineering-calculator-information--premium .engineering-calculator-information__body {
	background: var(--ark-surface-700);
	border: 1px solid var(--ark-border-soft);
	border-radius: var(--ark-radius-md);
	padding: 20px 24px;
	max-width: none;
}

/* ---------------------------------------------------------------------
 * Technical knowledge area — wraps formula.php + information.php into one
 * two-column grid on desktop (see page-engineering-calculator.php's
 * cooling-capacity branch: a layout-only wrapper div, neither partial's
 * own args/content changed). Removes the double border-top + stacked
 * full-width sections that read as generic content blocks.
 * ------------------------------------------------------------------- */

.calc-knowledge-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 0;
	border-top: 1px solid var(--ark-border-soft);
}

.calc-knowledge-grid .engineering-calculator-formula,
.calc-knowledge-grid .engineering-calculator-information {
	border-top: 0;
	padding-block: clamp(32px, 3.5vw, 56px);
}

.calc-knowledge-grid .engineering-calculator-formula {
	border-right: 1px solid var(--ark-border-soft);
}

@media (max-width: 960px) {
	.calc-knowledge-grid {
		grid-template-columns: 1fr;
	}

	.calc-knowledge-grid .engineering-calculator-formula {
		border-right: 0;
		border-bottom: 1px solid var(--ark-border-soft);
	}
}

/* ---------------------------------------------------------------------
 * Related calculators — denser cards + a technical "open" arrow, for the
 * cooling-capacity page only (this file loads nowhere else, so the base
 * catalog grid/cards are untouched everywhere they're actually shared).
 * ------------------------------------------------------------------- */

.engineering-calculator-related {
	padding-block: clamp(32px, 3.5vw, 56px);
}

.engineering-calculator-related .calculator-card {
	padding: 20px;
	gap: 8px;
}

.engineering-calculator-related .calculator-card__footer {
	margin-top: 4px;
	padding-top: 12px;
}

.engineering-calculator-related a.calculator-card .calculator-card__status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.engineering-calculator-related a.calculator-card .calculator-card__status::after {
	content: "\2192";
}

/* ---------------------------------------------------------------------
 * Section transition into the Final CTA — a deliberate close to the
 * technical content above it, not an abrupt switch to a different site
 * section. Existing template-parts/home/final-cta.php markup/behaviour
 * is untouched; this only adjusts the boundary on the cooling-capacity
 * page (final-cta.css classes are shared sitewide, so this file only
 * targets the section when it directly follows our related block).
 * ------------------------------------------------------------------- */

.engineering-calculator-related + .final-cta {
	border-top: 1px solid var(--ark-border-soft);
}

/* ---------------------------------------------------------------------
 * Two-stream input layout (air-mixing) — Stream 1 / Stream 2 field groups
 * side by side on desktop, stacked on mobile. Calculator-specific per
 * task brief §11 ("two-stream hero" / layout edge case) — only air-mixing
 * has two independent inlet streams to compare visually.
 * ------------------------------------------------------------------- */

.calc-stream-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-bottom: 28px;
}

@media (max-width: 767px) {
	.calc-stream-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.calc-stream-grid .calc-field-group + .calc-field-group {
		margin-top: 28px;
		padding-top: 28px;
		border-top: 1px solid var(--ark-border-soft);
	}
}

@media (min-width: 768px) {
	.calc-stream-grid .calc-field-group + .calc-field-group {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
		padding-left: 28px;
		border-left: 1px solid var(--ark-border-soft);
	}
}

/* ---------------------------------------------------------------------
 * Warning hint (air-mixing condensation) — an engineering condition, not
 * a form error: reuses --ark-accent-heating (the site's existing
 * heat/caution accent, same one cooling-capacity's diagram already uses)
 * instead of introducing a new red "error" treatment. Semantic behaviour
 * (hidden/shown, which hint is active) is untouched — presentation only.
 * ------------------------------------------------------------------- */

.calc-result__hint--warning {
	color: var(--ark-accent-heating);
	border: 1px solid var(--ark-accent-heating);
	border-radius: var(--ark-radius-sm);
	padding: 10px 14px;
	background: rgba(181, 106, 69, 0.08);
}

/* ---------------------------------------------------------------------
 * Process-state note (air-heating-cooling) — presents the existing
 * JS-set process label (heating / sensible cooling / cooling with
 * condensation) as a quiet metadata badge instead of plain body text.
 * Text content itself still comes entirely from air-heating-cooling.js's
 * existing PROCESS_LABELS map — untouched.
 * ------------------------------------------------------------------- */

.calc-result__note--process {
	display: inline-block;
	margin: 8px 0 0;
	padding: 3px 10px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ark-text-secondary);
	border: 1px solid var(--ark-border-soft);
	border-radius: 999px;
}

/* ---------------------------------------------------------------------
 * CoolProp cold-start loading indicator (refrigerant-state,
 * superheat-subcooling, refrigeration-cycle) — a quiet calculation-state
 * chip instead of plain helper text, so the ~6 MB WASM cold start reads
 * as "the instrument is warming up", not an empty/broken panel. Visibility
 * (hidden/shown) is still entirely controlled by each calculator's own JS
 * — this only restyles the element while it's visible.
 * ------------------------------------------------------------------- */

.calc-field__helper--loading {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ark-accent-conditioning);
}

.calc-field__helper--loading::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ark-accent-conditioning);
}

@media (prefers-reduced-motion: no-preference) {
	.calc-field__helper--loading::before {
		animation: calc-loading-pulse 1.2s ease-in-out infinite;
	}
}

@keyframes calc-loading-pulse {
	0%, 100% {
		opacity: 0.4;
	}
	50% {
		opacity: 1;
	}
}

/* ---------------------------------------------------------------------
 * Cycle state-point list (refrigeration-cycle) — a compact numbered list,
 * not 4 separate large cards. Reuses .calc-result__secondary as the base
 * (same row/typography rules); only adds the numbered index badge.
 * ------------------------------------------------------------------- */

.calc-result__points-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
}

.calc-result__points-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--ark-accent-conditioning);
	border: 1px solid var(--ark-border-soft);
	border-radius: 50%;
}

.calc-result__points-label {
	color: var(--ark-text-secondary);
}

/* ---------------------------------------------------------------------
 * Catalog — /calculators/ premium alignment (page-calculators.php +
 * template-parts/calculators/{catalog-nav,catalog-grid}.php). The
 * catalog's own hero reuses shared/premium-hero.php verbatim (styled by
 * the hero rules above already, plus the --catalog visual variant); this
 * block covers what's specific to the catalog body: the 01–05 nav strip's
 * hover state, editorial category dividers, denser cards, and a calmer
 * "Скоро" state.
 * ------------------------------------------------------------------- */

.calculators-catalog-nav__link:hover .calculators-catalog-nav__label,
.calculators-catalog-nav__link:focus-visible .calculators-catalog-nav__label {
	color: var(--ark-border-titanium);
}

.calculators-catalog-nav__link:focus-visible {
	outline: 2px solid var(--ark-border-titanium);
	outline-offset: -2px;
}

.calculators-catalog__category + .calculators-catalog__category {
	margin-top: clamp(48px, 5.2vw, 76px);
	padding-top: clamp(36px, 4vw, 48px);
	border-top: 1px solid var(--ark-border-soft);
}

.calculators-catalog__category-link:hover,
.calculators-catalog__category-link:focus-visible {
	color: var(--ark-border-titanium);
}

/* Premium polish pass: wider grid tracks (engineering-calculators.css)
 * plus more internal breathing room here — a calculator card should read
 * as a tool's entry point first, a text blurb second. Title gets more
 * room and weight, the supporting description steps back (smaller, more
 * muted) instead of competing with it; meta/unit + "Открыть" stay compact
 * at the bottom, unchanged in markup. Border/surface/radius stay the
 * restrained base values — no shadow, no scale on hover. */
.calculators-catalog .calculator-card {
	padding-inline: 32px;
	padding-block: 30px;
	gap: 14px;
	background: var(--ark-surface-700);
	border-color: var(--ark-border-soft);
}

/* min-height only from the desktop 3-column breakpoint up (matches
 * .calculators-catalog__grid's own mobile collapse in
 * engineering-calculators.css) — on mobile a card's height should come
 * from its own content, never a fixed floor. */
@media (min-width: 640px) {
	.calculators-catalog .calculator-card {
		min-height: 276px;
	}
}

.calculators-catalog .calculator-card__title {
	font-size: 1.3rem;
	line-height: 1.25;
	margin-bottom: 10px;
}

.calculators-catalog .calculator-card__description {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--ark-text-muted);
}

.calculators-catalog a.calculator-card:hover,
.calculators-catalog a.calculator-card:focus-visible {
	border-color: var(--ark-border-titanium);
	background: var(--ark-surface-650);
}

.calculators-catalog a.calculator-card .calculator-card__status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.calculators-catalog a.calculator-card .calculator-card__status::after {
	content: "\2192";
}

/* "Скоро" cards stay legible and calm — a dashed border and slightly
 * quieter surface communicate "not yet open" without the flat opacity
 * dimming (base .calculator-card--soon rule) that reads as a disabled
 * form control rather than an upcoming engineering tool. */
.calculators-catalog .calculator-card--soon {
	opacity: 1;
	background: var(--ark-bg-900);
	border-style: dashed;
	border-color: var(--ark-border-soft);
}

.calculators-catalog .calculator-card--soon .calculator-card__title,
.calculators-catalog .calculator-card--soon .calculator-card__description {
	color: var(--ark-text-secondary);
}