/**
 * Calculator Styles — archive-hz_calculator.php and single-hz_calculator.php
 *
 * Per theme-architecture/CSS_ARCHITECTURE.md's "calculator.css" file-split
 * plan and PERFORMANCE_ARCHITECTURE.md's conditional-asset rule —
 * enqueued ONLY on calculator archive/single templates (see
 * inc/assets.php), never sitewide.
 *
 * .card-grid (layouts.css), .card/.calc-card/.card-tab-* (components.css),
 * and .disclaimer-block (components.css, moved here-adjacent in this
 * same pass) are intentionally NOT redeclared — this file only adds
 * what's genuinely new for the calculator templates.
 */

/* ===== Filter Bar (archive only) ===== */
.calculator-filter-bar {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}
.calculator-filter-bar__search {
	width: 100%;
	max-width: 480px;
	padding: 12px 18px;
	border-radius: var(--radius-pill);
	border: var(--border-hairline);
	font-size: 1rem;
	font-family: var(--font-body);
}
.calculator-filter-bar__search:focus {
	border-color: var(--color-secondary);
	outline: none;
	box-shadow: 0 0 0 2px rgba(62, 142, 107, 0.25);
}
.calculator-filter-bar__types {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.calculator-filter-chip {
	background: #fff;
	border: var(--border-hairline);
	border-radius: var(--radius-pill);
	padding: 8px 16px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-muted);
	transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.calculator-filter-chip:hover {
	border-color: var(--color-secondary);
}
.calculator-filter-chip.is-active {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}
.calculator-filter-bar__empty-types,
.calculator-filter-bar__no-results {
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}
.calculator-filter-bar__status {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

/* ===== Pagination (archive only) ===== */
.calculator-pagination {
	margin-top: var(--space-6);
	display: flex;
	justify-content: center;
	gap: var(--space-2);
}
.calculator-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-2);
	border-radius: var(--radius-sm);
	border: var(--border-hairline);
	color: var(--color-text);
	font-size: 0.9375rem;
}
.calculator-pagination .page-numbers.current {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

/* ===== Single Calculator ===== */
.calculator-single__explainer {
	margin-top: var(--space-6);
	max-width: 720px;
}
.calculator-single__explainer :is(h2, h3) {
	margin-top: var(--space-5);
}

/* ===== Calculator Engine Mount (empty in this phase) ===== */
.calculator-engine-mount {
	margin-top: var(--space-5);
}
.calculator-engine-mount--empty .disclaimer-block {
	margin-top: 0;
}

/* ===== Related Calculators ===== */
.calculator-related {
	background: rgba(62, 142, 107, 0.04);
}