/* =========================================================================
   Pond Pumps Adviser Pro — tools.css (calculators, quiz, visualizers, trackers)
   ========================================================================= */

.ppa-tool {
	background: linear-gradient(180deg, #FFFFFF, #F4F8FA);
}
.ppa-tool__form {
	background: var(--ppa-white); border: 1px solid var(--ppa-border);
	border-radius: var(--ppa-radius-lg); padding: 1.25rem; box-shadow: var(--ppa-shadow);
}
.ppa-tool__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.ppa-tool__result {
	display: block; margin-top: 1.25rem; padding: 1rem 1.2rem;
	background: var(--ppa-surface); border: 1px solid var(--ppa-border);
	border-left: 4px solid var(--ppa-electric);
	border-radius: var(--ppa-radius);
}
.ppa-tool__result h3 { margin-top: 0; color: var(--ppa-pond-blue); }
.ppa-tool__result .ppa-mono { color: var(--ppa-pond-blue); font-size: 1.4rem; }
.ppa-tool__result .ppa-chip { background: #fff; }
.ppa-tool__result-grid { display: grid; gap: .5rem; grid-template-columns: repeat(3, 1fr); margin: .75rem 0; }
@media (max-width: 700px) { .ppa-tool__result-grid { grid-template-columns: 1fr 1fr; } }

/* ----- Quiz ----- */
.ppa-quiz__shell {
	background: var(--ppa-white); border: 1px solid var(--ppa-border);
	border-radius: var(--ppa-radius-lg); padding: 1.4rem; box-shadow: var(--ppa-shadow);
	max-width: 900px;
}
.ppa-quiz__progress {
	height: 6px; background: var(--ppa-surface);
	border-radius: 999px; overflow: hidden; margin-bottom: 1rem;
}
.ppa-quiz__progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--ppa-water-teal), var(--ppa-electric)); transition: width .35s ease; }
.ppa-quiz__loading { color: var(--ppa-muted); margin: 0; }
.ppa-quiz__stage h3 { margin: 0 0 .5rem; color: var(--ppa-pond-blue); }
.ppa-quiz__options {
	display: grid; gap: .5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 1rem;
}
@media (max-width: 800px) { .ppa-quiz__options { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .ppa-quiz__options { grid-template-columns: 1fr; } }
.ppa-quiz__option {
	background: var(--ppa-white); border: 1px solid var(--ppa-border);
	border-radius: var(--ppa-radius); padding: .85rem 1rem;
	text-align: left; cursor: pointer; font-weight: 600; color: var(--ppa-ink);
}
.ppa-quiz__option:hover, .ppa-quiz__option.is-active {
	border-color: var(--ppa-water-teal); background: #ECF8F8;
}
.ppa-quiz__controls { display: flex; gap: .5rem; flex-wrap: wrap; }
.ppa-quiz__result {
	background: var(--ppa-surface); border: 1px solid var(--ppa-border);
	border-left: 4px solid var(--ppa-moss);
	border-radius: var(--ppa-radius); padding: 1.2rem 1.4rem; margin-top: 1rem;
}
.ppa-quiz__result h3 { margin-top: 0; color: var(--ppa-pond-blue); }
.ppa-quiz__result-meta { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.ppa-quiz__result-related { display: grid; gap: .5rem; margin-top: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .ppa-quiz__result-related { grid-template-columns: 1fr; } }

/* ----- Fountain visualizer ----- */
.ppa-fviz {
	display: grid; grid-template-columns: 280px 1fr;
	gap: 1.25rem;
	background: var(--ppa-white); border: 1px solid var(--ppa-border);
	border-radius: var(--ppa-radius-lg); padding: 1.25rem; box-shadow: var(--ppa-shadow);
}
@media (max-width: 800px) { .ppa-fviz { grid-template-columns: 1fr; } }
.ppa-fviz__controls { display: grid; gap: .65rem; }
.ppa-fviz__stage { background: #DAEFF0; border-radius: var(--ppa-radius); overflow: hidden; min-height: 320px; }
.ppa-fviz__stage svg { width: 100%; height: 100%; }
.ppa-fviz__hint {
	grid-column: 1 / -1;
	background: var(--ppa-surface); border: 1px solid var(--ppa-border);
	border-radius: var(--ppa-radius); padding: .75rem 1rem; font-size: .85rem;
}
.ppa-fviz__hint[data-ppa-fviz-state="idle"],
.ppa-fviz__hint[hidden] { display: none !important; }

/* ----- Layout visualizer ----- */
.ppa-layout-viz {
	display: grid; grid-template-columns: 220px 1fr; gap: 1.25rem;
	background: var(--ppa-white); border: 1px solid var(--ppa-border);
	border-radius: var(--ppa-radius-lg); padding: 1.25rem; box-shadow: var(--ppa-shadow);
}
@media (max-width: 900px) { .ppa-layout-viz { grid-template-columns: 1fr; } }
.ppa-layout-viz__palette h3 { margin-top: 0; color: var(--ppa-pond-blue); font-size: 1rem; }
.ppa-layout-viz__palette ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ppa-layout-viz__palette button {
	width: 100%; padding: .5rem .7rem; text-align: left;
	border: 1px solid var(--ppa-border); border-radius: 999px;
	background: var(--ppa-surface); color: var(--ppa-pond-blue); font-weight: 600; cursor: pointer; font-size: .85rem;
}
.ppa-layout-viz__palette button:hover { background: #ECF8F8; border-color: var(--ppa-water-teal); }
.ppa-layout-viz__actions { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; }
.ppa-layout-viz__canvas { background: var(--ppa-surface); border: 1px dashed var(--ppa-border); border-radius: var(--ppa-radius); overflow: hidden; }
.ppa-layout-viz__canvas svg { width: 100%; height: 480px; touch-action: none; }
.ppa-layout-viz__notes {
	grid-column: 1 / -1; font-size: .85rem; color: var(--ppa-stone);
}

/* ----- Tabs ----- */
.ppa-tabs__nav { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ppa-tabs__btn {
	background: var(--ppa-surface); border: 1px solid var(--ppa-border);
	border-radius: 999px; padding: .5rem .9rem; font-weight: 600; cursor: pointer;
	color: var(--ppa-pond-blue);
}
.ppa-tabs__btn.is-active { background: var(--ppa-pond-blue); color: var(--ppa-white); border-color: var(--ppa-pond-blue); }
.ppa-tabs__panel { display: none; }
.ppa-tabs__panel.is-active { display: block; }

/* ----- Trackers / checklists ----- */
.ppa-tracker__continue {
	background: #ECF8F8; border: 1px solid #b3dadb;
	border-radius: var(--ppa-radius); padding: .75rem 1rem; margin-bottom: 1rem;
	color: var(--ppa-pond-blue);
}
.ppa-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ppa-checklist li label { display: flex; align-items: flex-start; gap: .55rem; cursor: pointer; padding: .35rem .25rem; }
.ppa-checklist li input { margin-top: .25rem; transform: scale(1.1); accent-color: var(--ppa-water-teal); }
.ppa-tracker__actions { display: flex; gap: .35rem; flex-wrap: wrap; margin: .75rem 0 0; }
.ppa-tracker__list {
	list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem;
}
.ppa-tracker__list li {
	background: var(--ppa-surface); border: 1px solid var(--ppa-border);
	border-radius: 8px; padding: .55rem .8rem; font-size: .9rem;
	display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center;
}
.ppa-tracker__list li button { background: transparent; border: 0; color: var(--ppa-amber); cursor: pointer; }