/**
 * Feature: furniture and occupancy.
 *
 * Removable with the rest of the feature. Uses the calculator's own tokens,
 * so nothing here has to be kept in step with the core stylesheet beyond the
 * variable names.
 */

.acoucalc-objects {
	margin-top: 22px;
	padding: 20px 22px;
	background: var(--ac-surface);
	border: 1px solid var(--ac-line);
	border-radius: var(--ac-radius);
}

.acoucalc-objects__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin-bottom: 16px;
}

.acoucalc-objects__intro strong {
	font-family: var(--font-500, "Keiner 500", sans-serif);
	font-size: 15px;
}

.acoucalc-objects__intro span {
	font-size: 13px;
	color: var(--ac-ink-soft);
}

.acoucalc-objects__grid {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 16px;
	align-items: end;
}

/*
 * A grid item is allowed to be as wide as its own content unless it is told
 * otherwise, and the content here is a select carrying a sentence: "Dense
 * (soft seating, screens, shelving)" is wider at 14px than the whole card is
 * on a 360px screen. Without this the field pushed its column out to 282px
 * inside a 262px one and both controls — the number beside it stretches to the
 * same track — hung over the card's edge. The core takes the same precaution
 * on the report form's fields, and every other grid in the calculator either
 * does this or writes its tracks as `minmax(0, 1fr)`.
 */
.acoucalc-objects__grid > .acoucalc-field {
	min-width: 0;
}

/*
 * The two controls in that grid are a compact input beside a select, and the
 * core sizes them from different places: the input carries
 * `.acoucalc-input--sm` and is 44px, while this select — the only one in the
 * calculator outside a surface or treatment row — falls through to the 48px
 * a field gets on its own. The pair looked level only for as long as the
 * modifier was losing on specificity and holding the input at 48 as well.
 * With that fixed, the select has to come down too, or this row becomes the
 * uneven one QA filed, the other way round.
 */
.acoucalc-objects .acoucalc-select__trigger,
.acoucalc-objects .acoucalc-select select {
	height: 44px;
	font-size: 14px;
}

.acoucalc-objects__note {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ac-ink-soft);
}

/* Stacked, and `minmax(0, 1fr)` rather than a bare `1fr` for the same reason
   the rule above exists: `1fr` is `minmax(auto, 1fr)`, and `auto` as a track
   minimum is the widest thing in it. */
@media (max-width: 640px) {
	.acoucalc-objects__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * ...but back to 16px where the core takes every field, because a field
 * smaller than that is one iOS Safari zooms the page in on and never zooms
 * back out again. The core's rule lists each compact selector by name and
 * cannot reach a class written after it. Only the native select needs this:
 * the enhanced trigger is a button, and a button is not a field iOS zooms
 * for — which is why the core's list has no trigger in it either.
 */
@media (max-width: 782px) {
	.acoucalc-objects .acoucalc-select select {
		font-size: 16px;
	}
}

/*
 * On a phone this was a bordered, 14px-rounded card sitting inside the step
 * card — the same radius as the box around it, so the two read as a frame
 * drawn twice, and its 22px of side padding came on top of the step body's
 * own. It is a section of step 2, not a panel floating in it: run it out to
 * the step body's edges on the core's phone gutter, and let a rule do what
 * the border was doing.
 */
@media screen and (max-width: 600px) {
	.acoucalc-objects {
		margin: 20px -16px 0;
		padding: 18px 16px 0;
		background: none;
		border-width: 1px 0 0;
		border-radius: 0;
	}

	/* Stacked, the strong lead and its sentence are two paragraphs, not a
	   heading with a note beside it. */
	.acoucalc-objects__intro {
		display: block;
		margin-bottom: 14px;
	}

	.acoucalc-objects__intro span {
		display: block;
		margin-top: 3px;
	}
}