/* Roof tile calculator: extras on top of tools.css. Tokens only. */

/* Roof sections: one card per slope group (or plan section) */
.wg-tool[data-tool="roof-tile"] .rt-panel,
.wg-tool[data-tool="roof-tile"] .rt-rows {
	display: grid;
	gap: var(--space-s);
	min-inline-size: 0;
}

.wg-tool[data-tool="roof-tile"] .rt-panel > .wg-tool__btn {
	justify-self: start;
}

.wg-tool[data-tool="roof-tile"] .rt-row {
	border: var(--border-w) solid var(--color-border);
	border-radius: var(--radius-m);
	display: grid;
	gap: var(--space-s);
	margin: 0;
	min-inline-size: 0;
	padding: var(--space-xs) var(--space-s) var(--space-s);
}

.wg-tool[data-tool="roof-tile"] .rt-row__legend {
	color: var(--color-text-muted);
	font-size: var(--step--1);
	font-weight: var(--fw-semibold);
	padding-inline: var(--space-3xs);
}

.wg-tool[data-tool="roof-tile"] .rt-row__remove {
	justify-self: start;
}

/* Fields line up even when one hint wraps more than its neighbour */
.wg-tool[data-tool="roof-tile"] .wg-tool__row {
	align-items: start;
}

.wg-tool[data-tool="roof-tile"] .rt-check strong {
	color: var(--color-text);
}

/* Optional verges */
.wg-tool[data-tool="roof-tile"] .rt-more {
	border-block-start: var(--border-w) solid var(--color-border);
}

.wg-tool[data-tool="roof-tile"] .rt-more > summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: var(--step--1);
	font-weight: var(--fw-semibold);
	gap: var(--space-xs);
	min-block-size: var(--tap);
}

.wg-tool[data-tool="roof-tile"] .rt-more > summary:focus-visible {
	outline: var(--focus-w) solid var(--color-focus);
	outline-offset: var(--focus-offset);
}

.wg-tool[data-tool="roof-tile"] .rt-more[open] > summary {
	margin-block-end: var(--space-xs);
}

/* Pitch or headlap warning inside the dark result panel */
.wg-tool[data-tool="roof-tile"] .rt-warn {
	border-inline-start: var(--border-w-strong) solid var(--color-focus-inverse);
	color: var(--color-text-inverse);
	font-size: var(--step--1);
	margin: 0;
	padding-inline-start: var(--space-xs);
}

.wg-tool[data-tool="roof-tile"] .wg-result .wg-tool__btn:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* Phones: the result sits below a long form, so a short summary stays in view while scrolling it */
.wg-tool[data-tool="roof-tile"] .rt-peek {
	align-items: center;
	background-color: var(--color-bg-inverse);
	border-radius: var(--radius-m);
	bottom: var(--space-xs);
	box-shadow: var(--shadow-m);
	color: var(--color-text-inverse);
	display: flex;
	font-size: var(--step--1);
	font-variant-numeric: tabular-nums;
	font-weight: var(--fw-semibold);
	gap: var(--space-xs);
	justify-content: space-between;
	margin: 0;
	padding: var(--space-3xs) var(--space-xs) var(--space-3xs) var(--space-s);
	position: sticky;
	z-index: 1;
}

.wg-tool[data-tool="roof-tile"] .rt-peek a {
	align-items: center;
	color: var(--color-text-inverse);
	display: inline-flex;
	flex: none;
	font-size: var(--step--1);
	min-block-size: var(--tap);
}

.wg-tool[data-tool="roof-tile"] .rt-peek a:focus-visible {
	outline: var(--focus-w) solid var(--color-focus-inverse);
	outline-offset: var(--focus-offset);
}

@media (min-width: 64em) {
	.wg-tool[data-tool="roof-tile"] .rt-peek {
		display: none;
	}
}