/*
 * Engineering Calculators — /calculators/ catalog + the shared
 * page-engineering-calculator.php template. Framework stage: layout only
 * (Industrial Premium / Dark Enterprise, same tokens as the rest of the
 * theme) — no field/input/result styling yet, since no calculator has any
 * fields to style. Deliberately self-contained: reuses global tokens
 * (tokens.css/base.css, always loaded) plus template-parts/shared/
 * internal-hero.php's own CSS (internal-pages.css) for the Hero — no
 * dependency on solutions-calculator.css or calculator.css (both belong
 * to unrelated calculators, see inc/enqueue.php's docblock).
 */

/* ---------------------------------------------------------------------
 * Engineering category navigation 01–05 — thin anchor strip directly
 * under the Hero (template-parts/calculators/catalog-nav.php). Plain
 * <nav>/<a> anchors, no JS. Desktop: one row, equal-width items with thin
 * dividers. Mobile: horizontal scroll via overflow-x only — never a
 * vertical stack the height of the screen.
 * ------------------------------------------------------------------- */

.calculators-catalog-nav {
	border-bottom: 1px solid var(--ark-border-soft);
}

.calculators-catalog-nav__inner {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

/* Restrained mobile-only scroll affordance — a thin fade at the right edge
 * hinting the strip continues, no arrow/JS/scrollbar theming. Pinned to
 * .calculators-catalog-nav__inner's own box (not its scrolling content),
 * so it stays put at the visible edge regardless of scroll position.
 * Removed entirely at >=768px, where the 5 items already fit in one row
 * with nothing left to scroll to. */
.calculators-catalog-nav__inner::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 40px;
	background: linear-gradient(to right, transparent, var(--ark-bg-900));
	pointer-events: none;
}

@media (min-width: 768px) {
	.calculators-catalog-nav__inner::after {
		display: none;
	}
}

.calculators-catalog-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	min-width: max-content;
}

.calculators-catalog-nav__item {
	flex: 0 0 auto;
	min-width: 0;
	border-left: 1px solid var(--ark-border-soft);
}

.calculators-catalog-nav__item:first-child {
	border-left: none;
}

.calculators-catalog-nav__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px 24px;
	min-height: 44px;
	justify-content: center;
	white-space: normal;
}

.calculators-catalog-nav__number {
	font-size: var(--ark-fs-meta);
	font-weight: 700;
	color: var(--ark-border-titanium);
}

.calculators-catalog-nav__label {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--ark-text-primary);
	line-height: 1.3;
	overflow-wrap: break-word;
}

/* Desktop: 5 equal-width columns filling the full row, each with its own
 * clearly bounded area (fixes a cascade bug — these two declarations used
 * to live before the unconditional .calculators-catalog-nav__item rule
 * above, which, coming later in source with equal specificity, silently
 * won regardless of viewport width. The five items never actually grew to
 * fill the row, sat content-sized/left-packed instead, and the previous
 * 15ch cap on the link — needed only for that broken narrow state — made
 * long labels wrap inside a box far narrower than the real ~270px+ column
 * each item now gets, reading as if adjacent labels collided). No 15ch cap
 * needed anymore: each item's own flex-grown width decides wrapping. */
@media (min-width: 768px) {
	.calculators-catalog-nav__list {
		min-width: 0;
	}

	.calculators-catalog-nav__item {
		flex: 1 1 0;
	}
}

/* ---------------------------------------------------------------------
 * Catalog — /calculators/ editorial category sections + card grid.
 * ------------------------------------------------------------------- */

.calculators-catalog {
	padding-block: var(--ark-space-section-lg);
}

/* Category header — an editorial row (NOT a sidebar): LEFT
 * (number/H2/description/service link) + RIGHT (a compact engineering-
 * scope list). Three independent grid items — intro/scope/link — placed
 * via named areas so the service link can sit under the intro on desktop
 * but move to the very end (after the scope list) once the layout stacks
 * to one column on mobile, without duplicating any markup. Cards
 * (.calculators-catalog__grid) are a separate, full-width block below this
 * header, not a sibling column next to it — see catalog-grid.php. */
.calculators-catalog__category-header {
	display: grid;
	grid-template-columns: minmax(0, 35%) minmax(0, 1fr);
	grid-template-areas: "intro scope" "link scope";
	column-gap: clamp(20px, 2.5vw, 40px);
	row-gap: 32px;
	align-items: start;
	margin-bottom: clamp(32px, 3.5vw, 46px);
	scroll-margin-top: 24px;
}

@media (max-width: 1023px) {
	.calculators-catalog__category-header {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "intro" "scope" "link";
		row-gap: 24px;
	}
}

/* Systemic P1 fix (320px body overflow): both cells are grid items, whose
 * automatic minimum width otherwise defaults to their content's min-content
 * size — for the category title that's the width of its single longest
 * unbreakable word ("Кондиционирование"), which can exceed the 38% track
 * at narrow viewports and force the whole grid (and .container around it)
 * wider than the viewport. min-width: 0 lets each cell actually shrink to
 * its track's real available width instead of blowing it out. This is the
 * general-purpose fix (works for any future long category name/word or
 * scope label), not a one-off rule tied to one heading's text. */
.calculators-catalog__category-intro,
.calculators-catalog__category-scope {
	min-width: 0;
}

.calculators-catalog__category-intro {
	grid-area: intro;
}

.calculators-catalog__category-number {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--ark-border-titanium);
	margin: 0 0 22px;
}

.calculators-catalog__category-title {
	font-size: var(--ark-fs-h2);
	font-weight: 600;
	color: var(--ark-text-primary);
	margin: 0 0 28px;
	/* Last-resort safety net only — with min-width: 0 above plus the
	   narrow-viewport size step below, no currently registered category
	   name actually needs to break mid-word; this just guards against a
	   future longer name on some viewport nobody has hand-tuned for. */
	overflow-wrap: break-word;
}

/* Below ~400px the 38%-track intro column (and, once the header has
 * already stacked to one column, the full but still narrow content width)
 * leaves too little room for "Кондиционирование" at the shared --ark-fs-h2
 * size to stay on one line without the break-word fallback above kicking
 * in. A single, moderate step down avoids that without touching
 * --ark-fs-h2 itself (used by other H2s sitewide) or the desktop scale. */
@media (max-width: 400px) {
	.calculators-catalog__category-title {
		font-size: 1.4rem;
	}
}

.calculators-catalog__category-description {
	font-size: var(--ark-fs-body);
	line-height: 1.6;
	color: var(--ark-text-secondary);
	max-width: 40ch;
	margin: 0;
}

/* Compact engineering-scope list — RIGHT side of the category header.
 * Purely editorial/navigational text, never clickable, no card background,
 * no border-radius, no heavy frame — just thin hairline top-dividers
 * between rows (same restrained-divider language as
 * .calculators-catalog-nav__item's border-left elsewhere on this page) and
 * a small counter-driven number in the existing titanium/bronze accent.
 * Two columns when there's real width for it (desktop's ~58–62% column, or
 * the full stacked width from tablet down to ~640px); a single column
 * below that, where two ~150px halves would force awkward mid-phrase
 * wraps on labels like "Вентиляторы и обработка воздуха". */
.calculators-catalog__category-scope {
	grid-area: scope;
}

.calculators-catalog__category-scope-label {
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ark-text-secondary);
	margin: 0 0 16px;
}

.calculators-catalog__category-scope-list {
	counter-reset: ark-catalog-scope;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 44px;
	row-gap: 4px;
}

@media (max-width: 639px) {
	.calculators-catalog__category-scope-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

.calculators-catalog__category-scope-item {
	counter-increment: ark-catalog-scope;
	display: flex;
	align-items: baseline;
	gap: 16px;
	min-width: 0;
	padding: 22px 0;
	border-top: 1px solid var(--ark-border-medium);
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ark-text-secondary);
}

.calculators-catalog__category-scope-item::before {
	content: counter(ark-catalog-scope, decimal-leading-zero);
	flex: 0 0 auto;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ark-border-titanium);
}

.calculators-catalog__category-link {
	grid-area: link;
	align-self: start;
	display: inline-block;
	margin-top: 14px;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--ark-text-primary);
	border-bottom: 1.5px solid var(--ark-border-titanium);
	padding-bottom: 3px;
}

/* Card grid — full container width, a separate block below the category
 * header (not a column beside it, see catalog-grid.php). CSS Grid with
 * auto-fill instead of flex-wrap: auto-fill (unlike auto-fit) keeps empty
 * tracks at the same width as filled ones, so a short row (03 Отопление,
 * 2 cards) renders its cards at the same width they'd have in a full row
 * instead of stretching to fill the row — "не растягивать искусственно"
 * without a card-count-specific rule. At the container's full ~1376–1416px
 * width, minmax(360px, 1fr) resolves to exactly 3 tracks (never 4+, never
 * a run of undersized columns) — the "~3 per row" target from the brief,
 * achieved from the available width rather than a hardcoded count. */
.calculators-catalog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 24px;
}

@media (max-width: 639px) {
	.calculators-catalog__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Calculator card (template-parts/cards/calculator-card.php). Text-only,
 * no image — the placeholder "coming soon" state (no Page/URL yet) is a
 * non-interactive <div>, the built state is an <a>; both share the same
 * box so nothing shifts once a calculator goes live.
 * ------------------------------------------------------------------- */

.calculator-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 28px;
	background: var(--ark-surface-700);
	border: 1px solid var(--ark-border-soft);
	border-radius: var(--ark-radius-lg);
	color: inherit;
	text-decoration: none;
	transition: border-color 200ms var(--ark-ease), background-color 200ms var(--ark-ease);
}

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

.calculator-card--soon {
	opacity: 0.6;
}

.calculator-card__eyebrow {
	font-size: var(--ark-fs-meta);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ark-text-muted);
	margin: 0;
}

.calculator-card__title {
	font-size: var(--ark-fs-card-title);
	font-weight: 600;
	color: var(--ark-text-primary);
	margin: 0;
	overflow-wrap: anywhere;
}

.calculator-card__description {
	font-size: var(--ark-fs-body);
	line-height: 1.5;
	color: var(--ark-text-secondary);
	margin: 0;
	flex-grow: 1;
}

.calculator-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--ark-border-soft);
}

.calculator-card__units {
	font-size: var(--ark-fs-meta);
	color: var(--ark-text-muted);
}

.calculator-card__status {
	font-size: var(--ark-fs-meta);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ark-accent-conditioning);
}

.calculator-card--soon .calculator-card__status {
	color: var(--ark-text-muted);
}

/* ---------------------------------------------------------------------
 * Workspace — desktop: input panel left, sticky result panel right.
 * Mobile: input, then result, in document order (no CSS reorder needed).
 * Framework stage: empty shell, no field/result styling — see
 * template-parts/calculators/workspace.php (renders nothing without
 * $args, so this section is not present on any page yet).
 * ------------------------------------------------------------------- */

.engineering-calculator-workspace {
	padding-block: var(--ark-space-section-md);
}

.engineering-calculator-workspace__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

.engineering-calculator-workspace__input {
	min-width: 0;
	background: var(--ark-surface-700);
	border: 1px solid var(--ark-border-soft);
	border-radius: var(--ark-radius-lg);
	padding: clamp(24px, 3vw, 40px);
}

.engineering-calculator-workspace__result {
	min-width: 0;
	position: sticky;
	top: 96px;
	background: var(--ark-surface-650);
	border: 1px solid var(--ark-border-soft);
	border-radius: var(--ark-radius-lg);
	padding: clamp(24px, 3vw, 40px);
}

@media (max-width: 960px) {
	.engineering-calculator-workspace__grid {
		grid-template-columns: 1fr;
	}

	.engineering-calculator-workspace__result {
		position: static;
	}
}

/* ---------------------------------------------------------------------
 * Formula block — «Как считается». Framework stage: empty shell, see
 * template-parts/calculators/formula.php.
 * ------------------------------------------------------------------- */

.engineering-calculator-formula {
	padding-block: var(--ark-space-section-sm);
	border-top: 1px solid var(--ark-border-soft);
}

.engineering-calculator-formula__title {
	font-size: var(--ark-fs-h3);
	font-weight: 600;
	color: var(--ark-text-primary);
	margin: 0 0 20px;
}

.engineering-calculator-formula__equation {
	font-size: var(--ark-fs-body);
	color: var(--ark-text-primary);
	background: var(--ark-surface-700);
	border: 1px solid var(--ark-border-soft);
	border-radius: var(--ark-radius-md);
	padding: 20px 24px;
	margin: 0 0 24px;
}

/* Air distribution shows both formulas at once (count + area) and marks
 * the one matching the active input mode — see assets/js/calculators/
 * air-distribution.js's setMode(). Absent the JS toggle, both lines simply
 * read at equal weight. */
.calc-formula-line {
	opacity: 0.5;
	transition: opacity 200ms var(--ark-ease), color 200ms var(--ark-ease);
}

.calc-formula-line:last-child {
	margin-top: 8px;
}

.calc-formula-line.is-active {
	opacity: 1;
	font-weight: 600;
}

.engineering-calculator-formula__variables,
.engineering-calculator-formula__assumptions {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.engineering-calculator-formula__variable {
	display: flex;
	gap: 12px;
	font-size: var(--ark-fs-body);
	color: var(--ark-text-secondary);
}

.engineering-calculator-formula__variable-symbol {
	flex: 0 0 auto;
	min-width: 2.5em;
	font-weight: 600;
	color: var(--ark-text-primary);
}

.engineering-calculator-formula__assumptions li {
	font-size: var(--ark-fs-meta);
	color: var(--ark-text-muted);
	padding-left: 16px;
	position: relative;
}

.engineering-calculator-formula__assumptions li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 1px;
	background: var(--ark-border-titanium);
}

/* ---------------------------------------------------------------------
 * Information block — «Как использовать результат» + disclaimer.
 * Framework stage: renders only once real copy exists, see
 * template-parts/calculators/information.php.
 * ------------------------------------------------------------------- */

.engineering-calculator-information {
	padding-block: var(--ark-space-section-sm);
	border-top: 1px solid var(--ark-border-soft);
}

.engineering-calculator-information__title {
	font-size: var(--ark-fs-h3);
	font-weight: 600;
	color: var(--ark-text-primary);
	margin: 0 0 16px;
}

.engineering-calculator-information__body {
	font-size: var(--ark-fs-body);
	line-height: 1.6;
	color: var(--ark-text-secondary);
	max-width: 68ch;
}

.engineering-calculator-information__disclaimer {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--ark-border-soft);
	font-size: var(--ark-fs-meta);
	line-height: 1.6;
	color: var(--ark-text-muted);
	max-width: 68ch;
}

/* ---------------------------------------------------------------------
 * Related calculators. Framework stage: renders only once a related
 * calculator's own Page exists, see template-parts/calculators/related.php.
 * ------------------------------------------------------------------- */

.engineering-calculator-related {
	padding-block: var(--ark-space-section-sm);
	border-top: 1px solid var(--ark-border-soft);
}

.engineering-calculator-related__title {
	font-size: var(--ark-fs-h3);
	font-weight: 600;
	color: var(--ark-text-primary);
	margin: 0 0 24px;
}

.engineering-calculator-related__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

/* Related cards reuse .calculator-card (template-parts/cards/calculator-card.php)
 * as-is — no separate link styling needed here. */

/* ---------------------------------------------------------------------
 * Hero — very subtle duct line-art on the calculator Hero background,
 * scoped to .internal-hero--calculators only (template-parts/calculators/
 * hero.php). No photographic Hero, no other internal-hero caller affected.
 * ------------------------------------------------------------------- */

.internal-hero--calculators {
	position: relative;
	overflow: hidden;
}

.internal-hero--calculators::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260' viewBox='0 0 420 260' fill='none'%3E%3Crect x='30' y='40' width='200' height='40' stroke='%23A69F93' stroke-width='1.5'/%3E%3Cline x1='230' y1='60' x2='340' y2='60' stroke='%23A69F93' stroke-width='1.5'/%3E%3Crect x='340' y='30' width='40' height='60' stroke='%23A69F93' stroke-width='1.5'/%3E%3Cline x1='60' y1='120' x2='60' y2='200' stroke='%23A69F93' stroke-width='1.5'/%3E%3Ccircle cx='60' cy='210' r='10' stroke='%23A69F93' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right -20px top 10%;
	background-size: min(46vw, 480px) auto;
}

.internal-hero--calculators .internal-hero__inner {
	position: relative;
	z-index: 1;
}

@media (max-width: 767px) {
	.internal-hero--calculators::after {
		opacity: 0.035;
	}
}

/* ---------------------------------------------------------------------
 * Calculator input panel — engineering-parameter fields, not a standard
 * web form. Shared shell (used by any future calculator's own input
 * partial, e.g. template-parts/calculators/air-exchange/input.php).
 * ------------------------------------------------------------------- */

.calc-panel__title {
	font-size: var(--ark-fs-h3);
	font-weight: 600;
	color: var(--ark-text-primary);
	margin: 0 0 28px;
}

.calc-fields {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.calc-field__label {
	display: block;
	font-size: var(--ark-fs-meta);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ark-text-muted);
	margin-bottom: 10px;
}

.calc-field__control {
	display: flex;
	align-items: baseline;
	gap: 10px;
	border-bottom: 1px solid var(--ark-border-soft);
	padding-bottom: 8px;
	transition: border-color 200ms var(--ark-ease);
}

.calc-field__control:focus-within {
	border-color: var(--ark-border-titanium);
}

.calc-field__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	appearance: none;
	background: transparent;
	border: 0;
	outline: none;
	font-family: inherit;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
	font-weight: 600;
	color: var(--ark-text-primary);
	padding: 0;
}

.calc-field__input::placeholder {
	color: var(--ark-text-muted);
}

.calc-field__input[aria-invalid="true"] {
	color: var(--ark-accent-heating);
}

.calc-field__unit {
	flex: 0 0 auto;
	font-size: var(--ark-fs-body);
	color: var(--ark-text-muted);
	padding-bottom: 0.2em;
}

.calc-field__slider {
	appearance: none;
	width: 100%;
	height: 2px;
	margin-top: 16px;
	background: var(--ark-border-soft);
	border-radius: 999px;
	outline: none;
}

.calc-field__slider::-webkit-slider-thumb {
	appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ark-border-titanium);
	border: 2px solid var(--ark-surface-700);
	cursor: pointer;
}

.calc-field__slider::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ark-border-titanium);
	border: 2px solid var(--ark-surface-700);
	cursor: pointer;
}

.calc-field__slider:focus-visible {
	outline: 2px solid var(--ark-border-titanium);
	outline-offset: 4px;
}

.calc-field__error {
	margin: 8px 0 0;
	font-size: var(--ark-fs-meta);
	color: var(--ark-accent-heating);
}

/* Explanatory helper text for a field whose value the visitor must supply
 * themselves (no safe default exists) — cooling-capacity's heat-load field
 * is the first user of this; deliberately neutral, not a warning. */
.calc-field__helper {
	margin: 8px 0 0;
	font-size: var(--ark-fs-meta);
	line-height: 1.5;
	color: var(--ark-text-muted);
}

.calc-panel__actions {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--ark-border-soft);
}

.calc-panel__action {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font-size: var(--ark-fs-meta);
	font-weight: 600;
	color: var(--ark-text-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 200ms var(--ark-ease);
}

.calc-panel__action:hover,
.calc-panel__action:focus-visible {
	color: var(--ark-text-primary);
}

/* ---------------------------------------------------------------------
 * Result panel — instant, no submit. Main figure is the visual center of
 * the workspace; secondary parameters + diagram support it.
 * ------------------------------------------------------------------- */

.calc-result__diagram {
	display: flex;
	justify-content: center;
	margin-bottom: 24px;
}

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

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

.calc-diagram__box {
	transition: transform 200ms var(--ark-ease);
	transform-box: fill-box;
	transform-origin: center;
}

.calc-diagram__flow-line {
	fill: none;
	stroke: var(--ark-accent-ventilation);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-dasharray: 4 5;
	opacity: 0.6;
	transition: opacity 200ms var(--ark-ease);
}

@media (prefers-reduced-motion: no-preference) {
	.calc-diagram__flow-line {
		animation: calc-flow-dash 5s linear infinite;
	}
}

@keyframes calc-flow-dash {
	to {
		stroke-dashoffset: -36;
	}
}

/* ---------------------------------------------------------------------
 * Heat-load diagram (cooling-capacity) — reuses .calc-diagram__box/
 * .calc-diagram__face (the same isometric room box as air-exchange) but
 * with lines converging INTO the box from small abstract source marks —
 * the visual opposite of air-exchange's diverging flow lines. Uses the
 * existing --ark-accent-heating token (already the site's "heat/warning"
 * accent) instead of the ventilation-blue flow-line color, so the two
 * diagrams stay visually distinguishable at a glance.
 * ------------------------------------------------------------------- */

.calc-diagram__heat-source {
	fill: var(--ark-accent-heating);
	fill-opacity: 0.35;
	stroke: var(--ark-accent-heating);
	stroke-width: 1;
}

.calc-diagram__heat-line {
	fill: none;
	stroke: var(--ark-accent-heating);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-dasharray: 4 5;
	opacity: 0.6;
	transition: opacity 200ms var(--ark-ease);
}

@media (prefers-reduced-motion: no-preference) {
	.calc-diagram__heat-line {
		animation: calc-flow-dash 5s linear infinite;
	}
}

.calc-result__figure {
	text-align: center;
	margin-bottom: 8px;
}

.calc-result__label {
	font-size: var(--ark-fs-meta);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ark-text-muted);
	margin: 0 0 12px;
}

.calc-result__value-row {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 10px;
}

.calc-result__value {
	font-size: clamp(2.4rem, 1.9rem + 2vw, 3.6rem);
	font-weight: 700;
	color: var(--ark-text-primary);
	line-height: 1;
}

[data-result-state="pending"] .calc-result__value {
	color: var(--ark-text-muted);
}

.calc-result__unit {
	font-size: var(--ark-fs-h3);
	color: var(--ark-text-secondary);
}

.calc-result__note {
	text-align: center;
	font-size: var(--ark-fs-meta);
	color: var(--ark-text-muted);
	margin: 10px 0 0;
}

.calc-result__hint {
	text-align: center;
	font-size: var(--ark-fs-meta);
	color: var(--ark-text-muted);
	margin: 4px 0 0;
}

[data-result-state="ready"] .calc-result__hint {
	display: none;
}

.calc-result__secondary {
	list-style: none;
	margin: 28px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--ark-border-soft);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

[data-result-state="pending"] .calc-result__secondary {
	display: none;
}

.calc-result__secondary-row:not([hidden]) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--ark-fs-body);
	color: var(--ark-text-secondary);
}

.calc-result__secondary-row[hidden] {
	display: none;
}

.calc-result__secondary-row span:last-child {
	color: var(--ark-text-primary);
	font-weight: 600;
}

.calc-result__actions {
	margin-top: 20px;
}

/* ---------------------------------------------------------------------
 * Shape switch — two large segmented cards (duct-air-velocity), not a
 * <select>/radio-dot list. Native radio inputs stay in the DOM for
 * keyboard/screen-reader support, visually hidden in favour of the card.
 * ------------------------------------------------------------------- */

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

.calc-mode__option {
	display: block;
	cursor: pointer;
}

.calc-mode__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.calc-mode__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 18px 12px;
	text-align: center;
	background: var(--ark-surface-650);
	border: 1px solid var(--ark-border-soft);
	border-radius: var(--ark-radius-md);
	color: var(--ark-text-secondary);
	transition: border-color 200ms var(--ark-ease), background-color 200ms var(--ark-ease), color 200ms var(--ark-ease);
}

.calc-mode__input:checked + .calc-mode__card {
	background: var(--ark-surface-700);
	border-color: var(--ark-border-titanium);
	color: var(--ark-text-primary);
}

.calc-mode__input:focus-visible + .calc-mode__card {
	outline: 2px solid var(--ark-border-titanium);
	outline-offset: 2px;
}

.calc-mode__icon {
	width: 28px;
	height: 28px;
	color: inherit;
}

.calc-mode__label {
	font-size: var(--ark-fs-meta);
	font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Shape-dependent field groups (duct-air-velocity) — a hidden group is
 * removed from layout/tab order entirely (its inputs are also set
 * `disabled` by JS); the group that becomes visible fades in briefly so
 * the switch doesn't feel like an abrupt form reload.
 * ------------------------------------------------------------------- */

.calc-fields-group:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

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

@media (prefers-reduced-motion: no-preference) {
	.calc-fields-group:not([hidden]) {
		animation: calc-fields-fade 220ms var(--ark-ease);
	}
}

@keyframes calc-fields-fade {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * Checkbox field (cooling-capacity client mode) — a single inline
 * label+checkbox, not a full .calc-field__input control.
 * ------------------------------------------------------------------- */

.calc-field--checkbox {
	display: flex;
	align-items: center;
}

.calc-field__checkbox-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--ark-fs-meta);
	color: var(--ark-text-secondary);
	cursor: pointer;
}

.calc-field__checkbox-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--ark-accent-titanium, var(--ark-accent-heating));
}

/* ---------------------------------------------------------------------
 * Duct cross-section diagram (duct-air-velocity) — round/rect variants,
 * only one visible at a time (JS toggles the [hidden] attribute to match
 * the selected shape). Same visual language as the air-exchange room
 * diagram: titanium-stroked shape, ventilation-blue flow lines.
 * ------------------------------------------------------------------- */

.calc-result__diagram {
	position: relative;
}

/* Some engines' UA stylesheet doesn't include `[hidden] { display: none }`
 * for the SVG namespace (only HTML), so the hidden duct diagram can stay
 * visually rendered even with the attribute correctly set — force it. */
.calc-diagram[hidden] {
	display: none;
}

.calc-diagram__duct {
	fill: var(--ark-surface-700);
	stroke: var(--ark-border-titanium);
	stroke-width: 1.5;
	transition: r 200ms var(--ark-ease), width 200ms var(--ark-ease), height 200ms var(--ark-ease), x 200ms var(--ark-ease), y 200ms var(--ark-ease);
}

/* ---------------------------------------------------------------------
 * Air distribution diagrams (air-distribution) — dot-grid "count" view
 * and hatched-area "area" view. Reuses .calc-diagram/.calc-diagram__duct
 * (frame) above; these rules are the parts unique to this calculator's
 * own visual language, not the shared duct cross-section.
 * ------------------------------------------------------------------- */

.calc-diagram__dot {
	fill: var(--ark-surface-650);
	stroke: var(--ark-border-titanium);
	stroke-width: 1.5;
	transition: fill 200ms var(--ark-ease);
}

.calc-diagram__dot--active {
	fill: var(--ark-accent-ventilation);
}

.calc-diagram__more {
	fill: var(--ark-text-muted);
	font-size: 11px;
	font-weight: 600;
}

.calc-diagram__more[hidden] {
	display: none;
}

.calc-diagram__hatch-line {
	stroke: var(--ark-accent-ventilation);
	stroke-width: 1;
}

.calc-diagram__area-box {
	stroke: var(--ark-border-titanium);
	stroke-width: 1;
	transition: width 200ms var(--ark-ease), height 200ms var(--ark-ease), x 200ms var(--ark-ease), y 200ms var(--ark-ease);
}

.calc-result__subvalue {
	text-align: center;
	font-size: var(--ark-fs-h3);
	font-weight: 600;
	color: var(--ark-text-secondary);
	margin: 4px 0 0;
}

.calc-result__subvalue[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------
 * Duct area diagrams (duct-area) — "section" view accents the enclosed
 * area with a tinted fill; "surface" view is a duct-run side profile
 * accenting the lateral band between two (dimmed) end caps, not the ends
 * themselves. Reuses .calc-diagram/.calc-diagram[hidden] above.
 * ------------------------------------------------------------------- */

.calc-diagram__outline {
	fill: none;
	stroke: var(--ark-border-titanium);
	stroke-width: 1.5;
	transition: r 200ms var(--ark-ease), width 200ms var(--ark-ease), height 200ms var(--ark-ease), x 200ms var(--ark-ease), y 200ms var(--ark-ease), rx 200ms var(--ark-ease), ry 200ms var(--ark-ease);
}

.calc-diagram__outline-line {
	stroke: var(--ark-border-titanium);
	stroke-width: 1.5;
}

.calc-diagram__area-fill {
	fill: var(--ark-accent-ventilation);
	fill-opacity: 0.28;
	stroke: var(--ark-accent-ventilation);
	stroke-width: 1;
	transition: r 200ms var(--ark-ease), width 200ms var(--ark-ease), height 200ms var(--ark-ease), x 200ms var(--ark-ease), y 200ms var(--ark-ease);
}