[hidden]{display:none!important}
.ru-table-wrapper{max-width:100%;overflow-x:auto}
.ru-table{min-width:580px}
.ru-table th,.ru-table td{overflow-wrap:anywhere}
.ru-primary-result strong{font-size:1.7rem}
#water-change-summary,#cost-change-summary{font-weight:700}
@media(max-width:400px){.ru-input-grid{grid-template-columns:1fr}}
.shower-helper{margin:12px 0 20px;border:1px solid #ccd4dc;border-radius:5px;padding:10px 12px}
.shower-helper summary{cursor:pointer;font-weight:600}
.helper-content{padding-top:10px;min-width:0}
.helper-content h3{margin-top:0}
.helper-content button{margin:6px 0}
/* Information hierarchy for this tool only. */
.ru-tool{max-width:1180px}
.shower-top-boxes{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.shower-box{min-width:0;border:1px solid #aaa;padding:16px}
.main-box{border:2px solid #555;background:#fff}
.optional-box{background:#f7f7f7}
.optional-label{font-size:13px;color:#555}
.shower-box h2{font-size:19px}
.shower-box .ru-input-grid{grid-template-columns:1fr;gap:12px}
.shower-box .ru-field{margin-bottom:10px}
.shower-box button{width:100%;padding:10px}
.shower-disclosure{margin:16px 0;border-top:1px solid #bbb;padding-top:10px}
.shower-disclosure summary{font-weight:600;cursor:pointer}
.shower-disclosure[open]>summary{margin-bottom:12px}
.decision-dashboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.decision-card{border:1px solid #aaa;padding:16px;min-width:0;background:#f7f7f7}
.decision-card h3{margin-top:0}
.decision-card [data-result]{font-weight:bold;font-size:21px;overflow-wrap:anywhere}
#cost-percent-label{display:inline;font-weight:normal}
#payback-results{margin-top:16px}
@media(min-width:1050px){.main-box .ru-input-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:700px) and (max-width:999px){.shower-top-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}.main-box{grid-column:1/-1}.main-box .ru-input-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:699px){.shower-top-boxes,.decision-dashboard{grid-template-columns:1fr}.shower-box{padding:12px}.decision-card{padding:12px}}
@media(max-width:699px){
 .ru-table{min-width:0}
 .ru-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .ru-table tbody tr{display:block;margin-bottom:12px}
 .ru-table tbody th{display:block}
 .ru-table td{display:flex;justify-content:space-between;gap:12px}
 .ru-table td::before{content:attr(data-label);font-weight:normal;flex:1}
}