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

/* Fields side by side keep their inputs level when one hint is longer than the other */
.wg-tool[data-tool="rafter"] .wg-tool__row {
	align-items: start;
}

/* Keep "4,013 mm" and "64.2 m²" on one line; the label wraps instead */
.wg-tool[data-tool="rafter"] .wg-result__rows dd {
	white-space: nowrap;
}

/* "What to measure" diagram under the roof type toggle */
.wg-tool[data-tool="rafter"] .rf-diagram {
	color: var(--color-text);
	margin: 0;
	max-inline-size: 26rem;
}

.wg-tool[data-tool="rafter"] .rf-diagram svg {
	block-size: auto;
	display: block;
	inline-size: 100%;
}

.wg-tool[data-tool="rafter"] .rf-diagram text {
	fill: currentColor;
	font-family: var(--font-body);
}

.wg-tool[data-tool="rafter"] .rf-d-rafter {
	fill: none;
	stroke: var(--color-accent);
	stroke-linecap: round;
	stroke-width: 5;
}

.wg-tool[data-tool="rafter"] .rf-d-dim {
	fill: none;
	stroke: var(--color-text-muted);
	stroke-width: 1.25;
}

.wg-tool[data-tool="rafter"] .rf-d-guide {
	fill: none;
	stroke: var(--color-text-muted);
	stroke-dasharray: 4 3;
	stroke-width: 1;
}

.wg-tool[data-tool="rafter"] .rf-d-solid {
	fill: var(--color-text-muted);
}

.wg-tool[data-tool="rafter"] .rf-d-wall {
	fill: var(--color-bg-alt);
	stroke: var(--color-border-strong);
	stroke-width: 1;
}