/**
 * Feature: doors and windows. Removable with the rest of the feature.
 *
 * The checkbox is moved into the surface list by the script, into the gap
 * between the room's own surfaces and the two it reveals. That breaks the
 * core's `.acoucalc-surface + .acoucalc-surface` divider — the door row is no
 * longer adjacent to the floor row — so the rules below put the hairlines
 * back rather than letting the list lose them.
 */

/* Centred, not baseline-aligned. The switch is a flex container whose first
   item is the checkbox, and a replaced element's baseline is its bottom margin
   edge — so `baseline` hung the hint off the bottom of the box rather than off
   the label's own baseline, and the two texts read out of line. */
.acoucalc-openings {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	padding: 14px 20px;
	background: var(--ac-canvas);
	border-top: 1px solid var(--ac-line);
}

.acoucalc-openings__switch {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	cursor: pointer;
}

/*
 * A theme that styles every checkbox label decides how this row sits, unless
 * this file says otherwise. wdm-stigarm gives them `margin: 0 0 13px`, an
 * 8px gap and 16px type — and because `align-items: center` centres a flex
 * item's *margin* box, not its border box, that stray 13px lifted the label
 * exactly 6.5px off the hint's centre line. Measured in Chrome against the
 * theme's own stylesheet, before and after.
 *
 * Three classes deep on purpose: `label:has(input[type=checkbox]):not(…)`
 * outscores any single class, and the order the two stylesheets load in is
 * not something this file gets to rely on.
 */
.acoucalc .acoucalc-openings .acoucalc-openings__switch {
	gap: 9px;
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
}

.acoucalc-openings__switch input {
	width: 17px;
	height: 17px;
	accent-color: var(--ac-teal-ink);
	cursor: pointer;
}

.acoucalc-openings small {
	font-size: 12px;
	color: var(--ac-ink-soft);
}

/* The row the checkbox reveals, and anything after it. Each section's rows
   are wrapped in a group by the core, so the divider goes on the group. */
.acoucalc-openings + .acoucalc-surface-group,
.acoucalc-openings + .acoucalc-surface {
	border-top: 1px solid var(--ac-line);
}

/*
 * The switch is a label wrapping its own box, so the label is the target —
 * and the label is 23px tall, against the 44 every other control on the touch
 * layout gets. The box itself was being squeezed as well: it is a flex item
 * with no `flex-shrink` of its own, so on a 320px screen the sentence beside
 * it pulled the 17px square down to 13px across and it rendered as an oval.
 *
 * This lives here rather than in the core stylesheet because the core loads
 * first: a rule there could not outrank the sizes above on specificity alone.
 */
@media (max-width: 782px) {
	.acoucalc .acoucalc-openings .acoucalc-openings__switch {
		min-height: 44px;
	}

	.acoucalc-openings__switch input {
		flex: 0 0 auto;
		width: 20px;
		height: 20px;
	}
}

/* The core pulls the surface list out to the step body's edges below 600px
   and re-hangs its rows on a 16px gutter. This row is one of them. */
@media screen and (max-width: 600px) {
	.acoucalc-openings {
		padding: 14px 16px;
	}
}

@media print {
	.acoucalc-openings {
		display: none !important;
	}
}