/*
Construction documents price calculator: a receipt-style ledger in one
bordered frame, following the pricing tariff table — hairline rows with the
key on the left and the value flush right. Editable inputs stay boxed so
they read as fillable; computed readouts are bare Oswald figures in jasmine.
Content-sized cells and flex-wrap keep the layout intact at any viewport
width without media queries.
*/
.construction-calc {
	display: block;
	/* Align the ledger with the step's text column and the label above, matching the live-bar callouts. */
	margin: 1rem 0 0 var(--service-process-indent);
	border: 0.75px solid var(--color-porcelain);

	.construction-calc__row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem 1rem;
		padding: 0.7rem 1rem;

		/* Each ledger line sits under a hairline rule. */
		& + .construction-calc__row {
			border-top: 0.75px solid var(--color-porcelain);
		}
	}

	.construction-calc__key {
		line-height: 1.3;
	}

	/*
	Computed value: bare typography instead of a boxed field, right-aligned.
	The currency mark is porcelain, the amount is jasmine.
	Wrapping contents let the minimum flag flow under the amount whenever
	the row cannot fit both, keeping mobile layouts inside the frame.
	*/
	.construction-calc__value {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.25rem 0.5rem;
	}

	.construction-calc__currency {
		color: var(--color-porcelain);
		font-family: "Oswald", sans-serif;
		font-weight: 500;
	}

	.construction-calc__amount {
		color: var(--color-jasmine);
		font-family: "Oswald", sans-serif;
		font-size: 1.25rem;
		font-weight: 500;
		white-space: nowrap;
	}

	.construction-calc__row--total .construction-calc__amount {
		font-size: 1.5rem;
	}

	/*
	Minimum-price flag: a jasmine chip after the total, rendered by the
	pricing handler only while the total is clamped to the minimum.
	*/
	.construction-calc__minimum {
		background-color: var(--color-jasmine);
		background-image: url("/assets/images/noise.svg");
		background-repeat: repeat;
		border: 0.75px solid var(--color-blueprint--darker);
		color: var(--color-blueprint--darker);
		font-family: "Oswald", sans-serif;
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		padding: 0.2rem 0.6rem;
		text-transform: uppercase;
		white-space: nowrap;
	}

	/*
	Each editable input sits inside a bordered field wrapper so its unit suffix
	(SF, / SF / YR) reads as part of the input: the wrapper carries the hairline
	frame while the unit is a solid blueprint block filling the field's right
	edge, echoing the section label chips. Focus styling lives on the wrapper via
	:focus-within, so the inner input keeps no border or outline of its own.
	*/
	.construction-calc__field {
		display: inline-flex;
		align-items: stretch;
		background-color: var(--color-porcelain);
		border: 0.75px solid var(--color-blueprint--darker);
		width: 10rem; /* Both editable boxes share one width so their left edges align. */
		max-width: 100%;

		&:focus-within {
			outline: 2px solid var(--color-blueprint--darker);
			outline-offset: 0;
		}

		input {
			flex: 1; /* Stretch to fill the field so the unit chip hugs the right edge. */
			min-width: 0;
			border: none;
			background: transparent;
			color: var(--color-blueprint--darker);
			font: inherit;
			padding: 0.4rem 0.6rem;

			&:focus {
				outline: none; /* Focus ring lives on the field wrapper. */
			}

			/* Drop the spinners so the unit block owns the field's right edge. */
			&::-webkit-outer-spin-button,
			&::-webkit-inner-spin-button {
				-webkit-appearance: none;
				margin: 0;
			}
			appearance: textfield;
			-moz-appearance: textfield;
		}
	}

	.construction-calc__unit {
		display: flex;
		align-items: center;
		background-color: var(--color-blueprint);
		background-image: url("/assets/images/noise.svg");
		background-repeat: repeat;
		color: var(--color-porcelain);
		font-family: "Oswald", sans-serif;
		font-size: 0.85rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		padding: 0 0.7rem;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.construction-calc__note {
		color: var(--color-porcelain);
		font-size: 0.9rem;
	}
}