/**
 * RoofingWala - interactive tools.
 *
 * Loaded only on pages that carry an [rw_tool] shortcode. Uses the same tokens
 * as the calculators, and doubles class names where prose styles would
 * otherwise win, as calculator.css does.
 *
 * @package RoofingWala
 */

.rw-tool.rw-tool {
	margin: var(--rw-space-xl) 0;
	padding: var(--rw-space-lg);
	background-color: var(--rw-surface);
	border-radius: var(--rw-radius);
}

.rw-tool .rw-tool__header {
	margin-bottom: var(--rw-space-md);
}

.rw-tool .rw-tool__title {
	margin: 0;
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-h3);
	color: var(--rw-ink);
}

.rw-tool .rw-tool__summary {
	margin: var(--rw-space-2xs) 0 0;
	font-size: var(--rw-size-small);
	color: var(--rw-muted);
}

.rw-tool .rw-tool__lead {
	margin: 0 0 var(--rw-space-md);
	font-size: var(--rw-size-small);
	color: var(--rw-body);
}

/* Questions and options ---------------------------------------------- */

.rw-tool .rw-tool__question {
	margin: 0 0 var(--rw-space-md);
	padding: 0;
	border: 0;
}

.rw-tool .rw-tool__question legend {
	margin-bottom: var(--rw-space-xs);
	padding: 0;
	font-family: var(--rw-font-heading);
	font-weight: 600;
	color: var(--rw-ink);
}

.rw-tool .rw-tool__options {
	display: grid;
	gap: var(--rw-space-2xs);
}

.rw-tool .rw-tool__option {
	display: flex;
	gap: var(--rw-space-xs);
	align-items: flex-start;
	padding: var(--rw-space-xs) var(--rw-space-sm);
	font-size: var(--rw-size-small);
	line-height: 1.45;
	color: var(--rw-body);
	background-color: var(--rw-bg);
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius);
	cursor: pointer;
}

.rw-tool .rw-tool__option:hover,
.rw-tool .rw-tool__option:has(input:checked) {
	border-color: var(--rw-accent);
}

.rw-tool .rw-tool__option input {
	flex: 0 0 auto;
	margin-top: 0.2em;
	accent-color: var(--rw-accent);
}

/* Results ----------------------------------------------------------- */

.rw-tool .rw-tool__results {
	margin-top: var(--rw-space-lg);
	padding-top: var(--rw-space-md);
	border-top: 1px solid var(--rw-line-strong);
}

.rw-tool .rw-tool__results[hidden],
.rw-tool [hidden] {
	display: none !important;
}

.rw-tool .rw-tool__results-title {
	margin: 0 0 var(--rw-space-sm);
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-h3);
	color: var(--rw-ink);
}

.rw-tool .rw-leak__causes {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rw-cause;
}

.rw-tool .rw-leak__cause {
	margin: 0 0 var(--rw-space-sm);
	padding: var(--rw-space-sm) var(--rw-space-md);
	background-color: var(--rw-bg);
	border-left: 3px solid var(--rw-accent);
	border-radius: var(--rw-radius);
	counter-increment: rw-cause;
}

.rw-tool .rw-leak__cause::before {
	content: none;
}

.rw-tool .rw-leak__cause-title {
	margin: 0 0 var(--rw-space-2xs);
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-body);
	color: var(--rw-ink);
}

.rw-tool .rw-leak__cause-title::before {
	content: counter(rw-cause) ". ";
	color: var(--rw-accent);
}

.rw-tool .rw-leak__cause p {
	margin: var(--rw-space-2xs) 0 0;
	font-size: var(--rw-size-small);
	line-height: 1.55;
}

.rw-tool .rw-tool__note {
	margin: var(--rw-space-sm) 0 0;
	font-size: var(--rw-size-meta);
	color: var(--rw-muted);
}

.rw-tool .rw-tool__safety {
	margin-top: var(--rw-space-md);
	padding: var(--rw-space-sm) var(--rw-space-md);
	font-size: var(--rw-size-small);
	line-height: 1.55;
	color: var(--rw-body);
	background-color: var(--rw-bg);
	border: 1px solid var(--rw-line-strong);
	border-radius: var(--rw-radius);
}

.rw-tool .rw-tool__safety strong {
	color: var(--rw-ink);
}

/* Checklists -------------------------------------------------------- */

.rw-tool .rw-check__group {
	margin: 0 0 var(--rw-space-lg);
	padding: 0;
	border: 0;
}

.rw-tool .rw-check__group legend,
.rw-tool .rw-check__group-title {
	margin: 0 0 var(--rw-space-xs);
	padding: 0;
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-body);
	font-weight: 600;
	color: var(--rw-ink);
}

.rw-tool .rw-check__item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--rw-space-xs);
	align-items: center;
	margin: 0 0 var(--rw-space-2xs);
	padding: var(--rw-space-xs) var(--rw-space-sm);
	background-color: var(--rw-bg);
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius);
}

.rw-tool .rw-check__item.is-done {
	border-color: var(--rw-accent);
}

.rw-tool .rw-check__item.is-concern {
	border-color: var(--rw-ink);
	box-shadow: inset 3px 0 0 var(--rw-ink);
}

.rw-tool .rw-check__text {
	font-size: var(--rw-size-small);
	line-height: 1.45;
	color: var(--rw-body);
}

.rw-tool .rw-check__text strong {
	display: block;
	color: var(--rw-ink);
}

.rw-tool .rw-check__choices {
	display: flex;
	gap: var(--rw-space-2xs);
}

.rw-tool .rw-check__choice {
	display: inline-flex;
	gap: 0.3em;
	align-items: center;
	padding: 0.2em 0.55em;
	font-size: var(--rw-size-meta);
	font-weight: 600;
	white-space: nowrap;
	color: var(--rw-ink);
	border: 1px solid var(--rw-line-strong);
	border-radius: 999px;
	cursor: pointer;
}

.rw-tool .rw-check__choice:has(input:checked) {
	color: var(--rw-on-dark);
	background-color: var(--rw-accent);
	border-color: var(--rw-accent);
}

.rw-tool .rw-check__choice input {
	accent-color: var(--rw-accent);
}

.rw-tool .rw-check__summary {
	margin: var(--rw-space-md) 0 0;
	font-family: var(--rw-font-heading);
	font-weight: 600;
	color: var(--rw-ink);
}

.rw-tool .rw-check__concerns {
	margin-top: var(--rw-space-sm);
}

.rw-tool .rw-tool__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rw-space-2xs);
	margin-top: var(--rw-space-md);
}

.rw-tool .rw-tool__button {
	padding: var(--rw-space-2xs) var(--rw-space-sm);
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-small);
	font-weight: 600;
	color: var(--rw-ink);
	background-color: var(--rw-bg);
	border: 1px solid var(--rw-line-strong);
	border-radius: var(--rw-radius);
	cursor: pointer;
}

.rw-tool .rw-tool__button:hover,
.rw-tool .rw-tool__button:focus-visible {
	color: var(--rw-accent);
	border-color: var(--rw-accent);
}

/* Quote checklist table -------------------------------------------- */

.rw-tool .rw-quote__scroll {
	overflow-x: auto;
}

.rw-tool .rw-quote__table {
	width: 100%;
	margin: 0;
	font-size: var(--rw-size-small);
	border-collapse: collapse;
	background-color: var(--rw-bg);
}

.rw-tool .rw-quote__table th,
.rw-tool .rw-quote__table td {
	padding: var(--rw-space-2xs) var(--rw-space-xs);
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--rw-line);
}

.rw-tool .rw-quote__table thead th {
	font-family: var(--rw-font-heading);
	color: var(--rw-ink);
	border-bottom: 1px solid var(--rw-line-strong);
}

.rw-tool .rw-quote__table .rw-quote__box {
	width: 3.5rem;
	text-align: center;
}

.rw-tool .rw-quote__table input {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--rw-accent);
}

.rw-tool .rw-quote__summaries {
	margin: var(--rw-space-md) 0 0;
	padding: 0;
	list-style: none;
}

.rw-tool .rw-quote__summaries li {
	margin: 0 0 var(--rw-space-2xs);
	font-size: var(--rw-size-small);
	color: var(--rw-body);
}

.rw-tool .rw-quote__summaries li::before {
	content: none;
}

/* Material cards ---------------------------------------------------- */

.rw-tool .rw-mat__controls {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rw-space-sm);
	align-items: flex-end;
	margin-bottom: var(--rw-space-md);
}

.rw-tool .rw-mat__controls label {
	font-size: var(--rw-size-small);
	color: var(--rw-ink);
}

.rw-tool .rw-mat__pitch {
	display: block;
	width: 7rem;
	margin-top: var(--rw-space-3xs);
	padding: var(--rw-space-2xs) var(--rw-space-xs);
	font: inherit;
	color: var(--rw-ink);
	background-color: var(--rw-bg);
	border: 1px solid var(--rw-line-strong);
	border-radius: var(--rw-radius);
}

.rw-tool .rw-mat__grid {
	display: grid;
	gap: var(--rw-space-sm);
}

@media (min-width: 40em) {
	.rw-tool .rw-mat__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.rw-tool .rw-mat__card {
	padding: var(--rw-space-sm) var(--rw-space-md);
	background-color: var(--rw-bg);
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius);
}

.rw-tool .rw-mat__card.is-fit {
	border-color: var(--rw-accent);
}

.rw-tool .rw-mat__card.is-unfit {
	opacity: 0.6;
}

.rw-tool .rw-mat__name {
	margin: 0;
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-body);
	color: var(--rw-ink);
}

.rw-tool .rw-mat__badge {
	display: inline-block;
	margin-top: var(--rw-space-3xs);
	padding: 0.1em 0.5em;
	font-size: var(--rw-size-meta);
	font-weight: 600;
	color: var(--rw-accent);
	border: 1px solid currentColor;
	border-radius: 999px;
}

.rw-tool .rw-mat__card.is-unfit .rw-mat__badge {
	color: var(--rw-ink);
}

.rw-tool .rw-mat__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.2em var(--rw-space-sm);
	margin: var(--rw-space-xs) 0;
	font-size: var(--rw-size-small);
}

.rw-tool .rw-mat__facts dt {
	color: var(--rw-muted);
}

.rw-tool .rw-mat__facts dd {
	margin: 0;
	color: var(--rw-ink);
}

.rw-tool .rw-mat__note {
	margin: 0;
	font-size: var(--rw-size-small);
	line-height: 1.5;
	color: var(--rw-body);
}

/* Maintenance schedule --------------------------------------------- */

.rw-tool .rw-sched__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rw-space-sm) var(--rw-space-md);
	align-items: flex-end;
	margin-bottom: var(--rw-space-md);
	font-size: var(--rw-size-small);
}

.rw-tool .rw-sched__form select {
	display: block;
	margin-top: var(--rw-space-3xs);
	padding: var(--rw-space-2xs) var(--rw-space-xs);
	font: inherit;
	color: var(--rw-ink);
	background-color: var(--rw-bg);
	border: 1px solid var(--rw-line-strong);
	border-radius: var(--rw-radius);
}

.rw-tool .rw-sched__form input {
	accent-color: var(--rw-accent);
}

.rw-tool .rw-sched__season {
	margin: 0 0 var(--rw-space-md);
}

.rw-tool .rw-sched__season-title {
	margin: 0 0 var(--rw-space-2xs);
	font-family: var(--rw-font-heading);
	font-size: var(--rw-size-body);
	color: var(--rw-ink);
}

.rw-tool .rw-sched__tasks {
	margin: 0;
	padding-left: 1.2em;
}

.rw-tool .rw-sched__tasks li {
	margin: 0 0 var(--rw-space-3xs);
	font-size: var(--rw-size-small);
	line-height: 1.5;
}

@media print {
	.rw-tool .rw-tool__actions,
	.rw-tool .rw-sched__form,
	.rw-tool .rw-mat__controls {
		display: none;
	}

	.rw-tool.rw-tool {
		padding: 0;
		background: none;
	}
}