.waters-page { --water-border: #cadbc8; }
.water-heading { margin-bottom: 28px; }
.water-heading h1 { margin: 6px 0 12px; }
.water-heading .intro { max-width: 64ch; }
.water-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.water-tab-count {
    display: inline-block;
    margin-inline-start: 4px;
    padding-inline: 6px;
    border-radius: 20px;
    background: #628a662b;
}
.water-tabs .primary .water-tab-count { background: #ffffff2e; }
.water-filters {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr) auto;
    align-items: end;
    gap: 14px;
    border: 1px solid var(--water-border);
    background: var(--white);
    border-radius: 10px;
    padding: 18px;
}
.water-filters label { display: grid; gap: 5px; font-weight: 650; }
.water-filters input, .water-filters select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--white);
    color: inherit;
    font: inherit;
}
.water-count { color: var(--dim); margin-block: 14px 18px; }
.water-count a { text-decoration: underline; text-underline-offset: .18em; }
.water-grid, .water-detail { display: grid; gap: 18px; }
.water-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.water-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.water-card, .water-panel {
    padding: clamp(16px, 2.5vw, 26px);
    border: 1px solid var(--water-border);
    border-radius: 12px;
    background: var(--white);
}
.water-card { display: flex; flex-direction: column; border-top: 4px solid #82a481; }
.water-kicker { color: var(--blue); font-size: .82rem; font-weight: 700; }
.water-card h2, .water-panel h2 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); margin: 5px 0 9px; }
.water-place { color: var(--dim); margin-bottom: 12px; }
.water-facts { margin: 0; }
.water-facts div { padding: 9px 0; border-top: 1px solid var(--water-border); }
.water-facts dt { font-size: .82rem; color: var(--dim); font-weight: 700; }
.water-facts dd { margin: 0; overflow-wrap: anywhere; }
.water-card-link { align-self: start; margin-top: auto; padding-top: 8px; }
.water-rules { margin-block: 20px; }
.water-rules .actions { align-items: center; }
.water-source { color: var(--dim); font-size: .9rem; margin-top: 18px; }
.water-source a, .water-facts a { text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 950px) {
    .water-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
    .water-grid, .water-detail, .water-filters { grid-template-columns: minmax(0, 1fr); }
    .water-filters button { justify-self: start; }
}