/* Calculator panel — design.md §5.3 */

.calculator__page-header {
	margin-block: var(--space-8) var(--space-12);
}
.calculator__page-header h1 { margin-bottom: var(--space-3); }
.calculator__page-header .lead {
	font-size: var(--font-size-lg);
	color: var(--color-ink-soft);
	max-width: 60ch;
}
.calculator__page-header .meta {
	margin-top: var(--space-4);
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.calculator__panel {
	background: var(--color-cream-soft);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
	margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
	.calculator__panel {
		padding: var(--space-12);
		grid-template-columns: 5fr 7fr;
		/* Each column ends at its own content height — without this, the shorter
		   column (usually the dark results card) stretches to match the taller
		   inputs column and leaves a large empty navy area below the last row. */
		align-items: start;
	}
}

.calculator--wide .calculator__panel {
	grid-template-columns: 1fr;
}

.calculator__inputs {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.calculator__compute {
	margin-top: auto;
	padding-top: var(--space-4);
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}
.calculator__compute .btn {
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;
}

.calculator__result {
	background: var(--color-ink);
	color: var(--color-cream);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-height: 240px;
}
.calculator__result h2, .calculator__result h3 { color: var(--color-cream); }

.result-headline {
	font-size: var(--font-size-sm);
	color: rgba(242,228,211,0.7);
	margin-bottom: var(--space-2);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.result-number {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 2.5rem;
	color: var(--color-mustard);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	min-width: 6ch;
	transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
	display: inline-block;
}
@media (min-width: 768px) { .result-number { font-size: 3rem; } }

.result-number.is-flashing { animation: result-flash 0.4s var(--motion-ease-standard); }
@keyframes result-flash {
	0%   { background: transparent; }
	50%  { background: rgba(232,199,102,0.3); }
	100% { background: transparent; }
}

.result-secondary {
	font-size: var(--font-size-sm);
	color: rgba(242,228,211,0.85);
}

.result-breakdown {
	margin-top: var(--space-6);
	padding-top: var(--space-6);
	border-top: 1px solid rgba(242,228,211,0.15);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.result-breakdown__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: var(--font-size-sm);
	gap: var(--space-4);
	color: rgba(242,228,211,0.85);
}
.result-breakdown__row strong { color: var(--color-cream); font-weight: 500; }
.result-breakdown__value {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

.result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: auto;
	padding-top: var(--space-6);
}

/* Vorlage download panel — top-priority CTA on single-vorlage pages.
   Single-column (no inputs/result split), more breathing room than a regular
   .calculator__panel, hairline divider above the buttons for "header → divider →
   action" rhythm, and a larger gap to the next info panel below. */
.vorlage-download-panel {
	grid-template-columns: 1fr;
	margin-bottom: var(--space-16);
}
@media (min-width: 768px) {
	.vorlage-download-panel { grid-template-columns: 1fr; }
}
.vorlage-download-panel .calculator__result {
	min-height: 0;
	padding: var(--space-8);
	gap: var(--space-6);
}
@media (min-width: 768px) {
	.vorlage-download-panel .calculator__result { padding: var(--space-12); }
}
.vorlage-download-panel .vorlage-download-row {
	border-top: 1px solid rgba(242,228,211,0.18);
	margin-top: var(--space-6);
	padding-top: var(--space-6);
}
.vorlage-download-panel + .calculator__panel {
	margin-top: var(--space-8);
}

/* "So wird gerechnet" — collapsible */
.calc-explain {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-6);
	border: 1px solid var(--color-border);
	margin-block: var(--space-8);
}
.calc-explain summary {
	cursor: pointer;
	font-weight: 500;
	color: var(--color-ink);
	list-style: none;
}
.calc-explain[open] summary { margin-bottom: var(--space-4); }
.calc-explain code {
	background: var(--color-cream-soft);
	padding: 0.1em 0.4em;
	border-radius: 4px;
	font-family: var(--font-mono);
	font-size: 0.9em;
}

/* Wizard / step layout (Scheinselbständigkeit, Freiberufler) */
.wizard {
	background: var(--color-white);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	max-width: 720px;
	margin-inline: auto;
	box-shadow: var(--shadow-md);
}
.wizard__progress {
	display: flex;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
}
.wizard__progress-step {
	flex: 1;
	height: 4px;
	background: var(--color-border);
	border-radius: 999px;
}
.wizard__progress-step.is-active { background: var(--color-ink); }
.wizard__progress-step.is-completed { background: var(--color-mustard); }

.wizard__question {
	font-family: var(--font-display);
	font-size: var(--font-size-xl);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--color-ink);
	margin-bottom: var(--space-6);
}
.wizard__choices {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.wizard__choice {
	border: 1.5px solid var(--color-border);
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-6);
	text-align: left;
	font-size: var(--font-size-base);
	color: var(--color-ink);
	cursor: pointer;
	transition: border-color var(--motion-duration-fast), background var(--motion-duration-fast);
}
.wizard__choice:hover { border-color: var(--color-ink); }
.wizard__choice.is-selected { background: var(--color-ink); color: var(--color-cream); border-color: var(--color-ink); }

.wizard__nav {
	display: flex;
	justify-content: space-between;
	margin-top: var(--space-8);
}

/* Wizard result — traffic-light */
.wizard-result {
	text-align: center;
	padding: var(--space-12);
}
.traffic-light {
	display: inline-flex;
	flex-direction: column;
	gap: var(--space-2);
	align-items: center;
	padding: var(--space-6);
	border-radius: var(--radius-xl);
	margin-bottom: var(--space-6);
	min-width: 200px;
}
.traffic-light--green   { background: rgba(93,143,108,0.15); color: var(--color-success); }
.traffic-light--yellow  { background: rgba(232,199,102,0.20); color: var(--color-warning); }
.traffic-light--red     { background: rgba(184,84,80,0.15);  color: var(--color-error); }
.traffic-light__label   { font-family: var(--font-display); font-size: var(--font-size-2xl); font-weight: 600; }
.traffic-light__score   { font-family: var(--font-mono); font-size: var(--font-size-lg); }

/* Chart container */
.chart-wrap {
	margin-block: var(--space-6);
	min-height: 200px;
	position: relative;
}
.chart-wrap canvas { max-width: 100%; }

/* Calc-form quick-row — for compact 2-input rows.
   Both cells flex-column so inputs bottom-align even when one label wraps to
   two lines and the other stays on one (e.g. Fahrtkosten "Entfernung Wohnung-
   Arbeit (km, einfach)" wraps but "Arbeitstage / Jahr" doesn't). The label
   min-height reserves two lines so the input row sits at the same Y on both
   sides — without it, inputs end up ~21 px out of vertical alignment. */
.field-row {
	display: grid;
	gap: var(--space-3);
	grid-template-columns: 1fr;
}
@media (min-width: 480px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field-row > .field {
	display: flex;
	flex-direction: column;
}
.field-row > .field > .field__label {
	min-height: 2.625rem; /* 2 lines at the body line-height */
	display: flex;
	align-items: flex-start;
}
/* When an .option-chip lives inside a .field-row cell next to a number input,
   the chip ends up shorter than the .input control by default. Match the input's
   real rendered height (50 px = 3.125 rem with 1.5 line-height + 0.75 rem padding
   each side + 1.5 px border) so the chip box and the input box are pixel-identical
   and their centerlines align exactly. */
.field-row > .field > .option-chip {
	min-height: 3.125rem;
}

/* Status-pill on result panels */
.result-status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.4rem 1rem;
	border-radius: var(--radius-pill);
	font-size: var(--font-size-sm);
	font-weight: 500;
	background: rgba(232,199,102,0.18);
	color: var(--color-mustard);
}

/* Hub category nav */
.calc-hub__categories {
	display: grid;
	gap: var(--space-4);
	margin-bottom: var(--space-12);
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.calc-hub__category {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-6);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	border: 1px solid var(--color-border);
}
.calc-hub__category-title {
	font-family: var(--font-display);
	font-size: var(--font-size-lg);
	font-weight: 600;
}
.calc-hub__category-count {
	font-size: var(--font-size-xs);
	color: var(--color-ink-soft);
}

/* Programmatic page table (gewerbesteuer cities, etc.) */
.compare-table {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	margin-block: var(--space-8);
}
.compare-table table { margin: 0; }