/* ==========================================================================
   Kalkulator wyceny — [custom_calc_elevtech]
   Kroki jak arkusze rysunku technicznego, wynik w ramce z linią wymiarową.
   Ładowany tylko tam, gdzie jest kalkulator. Tokeny z main.css.
   ========================================================================== */

@layer components {
	.kalk {
		--kalk-bg: var(--c-paper);
		container-type: inline-size;
		width: 100%; /* zawieranie rozmiaru zeruje szerokość własną — bez tego w kolumnie flex/grid kalkulator by się zwinął */
		max-width: 46rem;
		margin-inline: auto;
		color: var(--c-text);
		text-align: left;
	}

	.kalk [hidden] {
		display: none !important;
	}

	/* Bez JS: zamiast kalkulatora link do formularza wyceny */
	.no-js .kalk__app {
		display: none;
	}

	.kalk__noscript {
		padding: var(--sp-4);
		border: var(--hair) solid var(--c-ink);
		background: var(--c-plaster);
	}

	.kalk__noscript a {
		font-weight: 650;
	}

	/* ---------- Postęp ---------- */
	.kalk__progress {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: var(--sp-1);
		margin-bottom: var(--sp-5);
	}

	.kalk__seg {
		height: 4px;
		background: var(--c-line);
		transition: background var(--t) var(--ease);
	}

	.kalk__seg.is-done {
		background: var(--c-marker-deep);
	}

	.kalk__seg.is-active {
		background: var(--c-ink);
	}

	/* ---------- Arkusz (krok) ---------- */
	.kalk__steps {
		margin: 0;
	}

	.kalk__sheet {
		position: relative;
		min-width: 0; /* fieldset domyślnie min-content — bez tego poziomy scroll na 320 px */
		margin: 0;
		padding: var(--sp-6) var(--sp-4) var(--sp-4);
		border: var(--hair) solid var(--c-ink);
		background: var(--kalk-bg);
	}

	/* Znaczniki narożne arkusza */
	.kalk__sheet::before,
	.kalk__sheet::after {
		content: "";
		position: absolute;
		width: .75rem;
		height: .75rem;
		pointer-events: none;
	}

	.kalk__sheet::before {
		top: var(--sp-2);
		right: var(--sp-2);
		border-top: var(--hair) solid var(--c-ink);
		border-right: var(--hair) solid var(--c-ink);
	}

	.kalk__sheet::after {
		bottom: var(--sp-2);
		left: var(--sp-2);
		border-bottom: var(--hair) solid var(--c-ink);
		border-left: var(--hair) solid var(--c-ink);
	}

	.kalk__legend {
		float: left; /* legenda wewnątrz arkusza, nie w ramce */
		width: 100%;
		padding: 0;
		margin-bottom: var(--sp-3);
	}

	.kalk__legend + * {
		clear: both;
	}

	.kalk__legend:focus {
		outline: none;
	}

	.kalk__legend:focus-visible {
		outline: var(--focus);
		outline-offset: 4px;
	}

	/* „Krok 2 z 5” — opis na linii ramki, jak tabliczka arkusza */
	.kalk__count {
		position: absolute;
		top: 0;
		left: var(--sp-4);
		transform: translateY(-50%);
		padding-inline: var(--sp-2);
		background: var(--kalk-bg);
		color: var(--c-marker-deep);
	}

	.kalk__title {
		display: block;
		font-size: var(--fs-xl);
		font-weight: 760;
		font-stretch: var(--w-narrow);
		line-height: 1.12;
		letter-spacing: -.012em;
		text-wrap: balance;
	}

	.kalk__desc {
		margin-bottom: var(--sp-4);
		color: var(--c-text-muted);
		font-size: var(--fs-sm);
		font-weight: 400;
	}

	/* Powierzchnia */
	.kalk__field {
		gap: 0;
	}

	.kalk__area {
		display: flex;
		max-width: 15rem;
	}

	.kalk__area .field__input {
		flex: 1;
		min-width: 0;
		font-size: var(--fs-lg);
		font-variant-numeric: tabular-nums;
	}

	.kalk__unit {
		display: grid;
		place-items: center;
		padding-inline: var(--sp-4);
		border: var(--hair) solid var(--c-line);
		border-left: 0;
		border-bottom: 2px solid var(--c-ink);
		background: var(--c-plaster);
		font-weight: 650;
	}

	/* Odpowiedzi — natywne radio, cały kafel klikalny */
	.kalk__opts {
		display: grid;
		gap: var(--sp-2);
	}

	.kalk__opt {
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: var(--sp-3);
		align-items: start;
		padding: var(--sp-3) var(--sp-4);
		border: var(--hair) solid var(--c-line);
		background: var(--c-paper);
		transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
	}

	.kalk__opt:hover {
		border-color: var(--c-ink);
	}

	.kalk__opt:has(.kalk__radio:checked) {
		border-color: var(--c-ink);
		box-shadow: inset 0 0 0 1px var(--c-ink);
		background: var(--c-plaster);
	}

	.kalk__opt:has(.kalk__radio:focus-visible) {
		outline: var(--focus);
		outline-offset: 2px;
	}

	.kalk__radio {
		appearance: none;
		display: grid;
		place-content: center;
		width: 1.25rem;
		height: 1.25rem;
		margin: .2rem 0 0;
		border: 2px solid var(--c-ink);
		border-radius: 50%;
		background: var(--c-paper);
		cursor: pointer;
	}

	.kalk__radio::before {
		content: "";
		width: .625rem;
		height: .625rem;
		border-radius: 50%;
		background: var(--c-ink);
		transform: scale(0);
		transition: transform var(--t-fast) var(--ease);
	}

	.kalk__radio:checked::before {
		transform: scale(1);
	}

	.kalk__radio[aria-invalid="true"] {
		border-color: var(--c-danger);
	}

	/* Fokus pokazuje kafel; bez :has — sam przycisk radio */
	.kalk__radio:focus-visible {
		outline: none;
	}

	@supports not selector(:has(*)) {
		.kalk__radio:focus-visible {
			outline: var(--focus);
			outline-offset: 2px;
		}
	}

	.kalk__opt-label {
		font-weight: 560;
		line-height: 1.4;
		cursor: pointer;
	}

	.kalk__opt-label::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.kalk__radio:checked + .kalk__opt-label {
		font-weight: 680;
	}

	.kalk__hint {
		grid-column: 2;
		margin-top: var(--sp-1);
		color: var(--c-text-muted);
		font-size: var(--fs-xs);
		line-height: 1.45;
	}

	/* Błędy: tekst + znacznik, nie tylko kolor */
	.kalk__error {
		display: flex;
		align-items: baseline;
		gap: var(--sp-2);
		margin-top: var(--sp-2);
	}

	.kalk__error::before {
		content: "!";
		display: inline-grid;
		place-items: center;
		flex: none;
		width: 1.1em;
		height: 1.1em;
		background: var(--c-danger);
		color: var(--c-paper);
		font-size: .85em;
		font-weight: 760;
		line-height: 1;
		transform: translateY(.1em);
	}

	/* Nawigacja */
	.kalk__nav {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-3);
		margin-top: var(--sp-5);
		padding-top: var(--sp-4);
		border-top: var(--hair) solid var(--c-line);
	}

	.kalk__next {
		margin-left: auto;
	}

	.kalk .btn--ghost {
		--btn-fg: var(--c-ink);
		--btn-bd: var(--c-ink);
	}

	/* ---------- Wynik ---------- */
	.kalk__result {
		display: grid;
		gap: var(--sp-5);
	}

	.kalk__frame {
		padding: var(--sp-5) var(--sp-4);
		border: var(--hair) solid var(--c-ink);
		background: var(--kalk-bg);
		text-align: center;
	}

	.kalk__result-title {
		font-weight: 650;
		font-size: var(--fs-base);
	}

	.kalk__result-title:focus {
		outline: none;
	}

	.kalk__result-title:focus-visible {
		outline: var(--focus);
		outline-offset: 4px;
	}

	/* Linia wymiarowa: linie pomocnicze (boki), linia główna, kreski końcowe 45° i opis */
	.kalk__dim {
		position: relative;
		display: grid;
		place-items: center;
		height: 1.75rem;
		margin-block: var(--sp-4) var(--sp-2);
		border-inline: var(--hair) solid var(--c-ink);
		background: linear-gradient(var(--c-ink), var(--c-ink)) center / 100% var(--hair) no-repeat;
	}

	.kalk__dim::before,
	.kalk__dim::after {
		content: "";
		position: absolute;
		top: 50%;
		width: 1.5px;
		height: .875rem;
		background: var(--c-ink);
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.kalk__dim::before {
		left: 0;
	}

	.kalk__dim::after {
		left: 100%;
	}

	.kalk__dim-label {
		position: relative;
		padding-inline: var(--sp-2);
		background: var(--kalk-bg);
		color: var(--c-marker-deep);
	}

	.kalk__price {
		font-size: clamp(1.625rem, 8.5cqi, 2.875rem);
		font-weight: 760;
		font-stretch: var(--w-narrow);
		line-height: 1.05;
		letter-spacing: -.01em;
		font-variant-numeric: tabular-nums;
		text-wrap: balance;
	}

	.kalk__price-note {
		margin-top: var(--sp-2);
		font-size: var(--fs-sm);
		font-weight: 650;
	}

	/* Informacja o wycenie orientacyjnej — zawsze widoczna przy wyniku */
	.kalk__note {
		margin-top: var(--sp-4);
		padding-top: var(--sp-3);
		border-top: var(--hair) solid var(--c-line);
		font-size: var(--fs-sm);
		line-height: 1.5;
		text-align: left;
	}

	.kalk__note-label {
		display: block;
		margin-bottom: var(--sp-1);
		color: var(--c-marker-deep);
	}

	/* Podsumowanie odpowiedzi */
	.kalk__summary {
		display: grid;
		margin: 0;
		border-top: var(--hair) solid var(--c-line);
	}

	.kalk__summary-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--sp-1) var(--sp-4);
		padding-block: var(--sp-2);
		border-bottom: var(--hair) solid var(--c-line);
	}

	.kalk__summary dt {
		color: var(--c-text-muted);
	}

	.kalk__summary dd {
		margin: 0;
		font-weight: 620;
		text-align: right;
	}

	.kalk__again {
		margin: 0;
	}

	/* ---------- Kontakt pod wynikiem ---------- */
	.kalk__contact {
		padding: var(--sp-5) var(--sp-4);
		border: var(--hair) solid var(--c-ink);
		background: var(--c-plaster);
	}

	.kalk__contact-title {
		margin-bottom: var(--sp-4);
		font-size: var(--fs-lg);
		font-weight: 760;
		font-stretch: var(--w-narrow);
		line-height: 1.15;
		text-wrap: balance;
	}

	.kalk__grid {
		display: grid;
		gap: var(--sp-4);
	}

	.kalk__opt-note {
		color: var(--c-text-muted);
		font-weight: 400;
	}

	.kalk__hp {
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	.kalk__form {
		position: relative;
	}

	.kalk__legal {
		margin-top: var(--sp-4);
		color: var(--c-text-muted);
		font-size: var(--fs-xs);
		line-height: 1.5;
	}

	.kalk__form-msg {
		margin-top: var(--sp-3);
		padding: var(--sp-3);
		border-left: 3px solid var(--c-danger);
		background: var(--c-paper);
		color: var(--c-danger);
		font-size: var(--fs-sm);
		font-weight: 560;
	}

	.kalk__submit {
		width: 100%;
		margin-top: var(--sp-4);
	}

	.kalk__submit[aria-disabled="true"] {
		opacity: .7;
		cursor: progress;
	}

	/* Po wysłaniu */
	.kalk__done {
		display: grid;
		justify-items: start;
		gap: var(--sp-2);
	}

	.kalk__done-icon {
		width: 2.5rem;
		height: 2.5rem;
		padding: .4rem;
		background: var(--c-marker-deep);
		stroke: var(--c-paper);
		stroke-width: 2.2;
	}

	.kalk__done-title {
		font-size: var(--fs-xl);
		font-weight: 760;
		font-stretch: var(--w-narrow);
		line-height: 1.1;
	}

	.kalk__done-title:focus {
		outline: none;
	}

	.kalk__done-title:focus-visible {
		outline: var(--focus);
		outline-offset: 4px;
	}

	/* ---------- Szerzej ---------- */
	@container (min-width: 36rem) {
		.kalk__sheet {
			padding: var(--sp-7) var(--sp-6) var(--sp-5);
		}

		.kalk__count {
			left: var(--sp-6);
		}

		.kalk__frame,
		.kalk__contact {
			padding: var(--sp-6);
		}

		.kalk__summary {
			grid-template-columns: 1fr 1fr;
			column-gap: var(--sp-6);
		}

		.kalk__grid {
			grid-template-columns: 1fr 1fr;
		}

		.kalk__wide {
			grid-column: 1 / -1;
		}

		.kalk__submit {
			width: auto;
		}
	}

	/* ---------- Ruch ---------- */
	@media (prefers-reduced-motion: no-preference) {
		.kalk__sheet:not([hidden]),
		.kalk__result:not([hidden]),
		.kalk__done:not([hidden]) {
			animation: kalk-in var(--t-slow) var(--ease);
		}
	}

	@keyframes kalk-in {
		from {
			opacity: 0;
			transform: translateY(.5rem);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	/* ---------- Tryb wysokiego kontrastu ---------- */
	@media (forced-colors: active) {
		.kalk__radio {
			appearance: auto;
		}

		.kalk__radio::before {
			display: none;
		}

		.kalk__seg.is-active,
		.kalk__seg.is-done {
			background: Highlight;
		}

		.kalk__opt:has(.kalk__radio:checked) {
			outline: 2px solid Highlight;
		}
	}
}

.kalk__netto {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-6);
	margin: var(--sp-3) 0 0;
}

.kalk__netto dt {
	color: var(--c-text-muted);
	font-size: var(--fs-xs);
	font-weight: 650;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.kalk__netto dd {
	margin: .15rem 0 0;
	font-size: var(--fs-lg);
	font-weight: 680;
	font-variant-numeric: tabular-nums;
}

.kalk__vat-note {
	margin-top: var(--sp-2);
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
}