/* WaterCalcLab shared design system — public application and content studio. */
.header-tools a.header-cta{color:#fff}
:where(.hero-visual,.tinted,.admin-body,.callout,.empty-state,.trust-strip){--muted:#5c7183}
.mobile-kpi{display:none}.field-range{padding:0;border:0;accent-color:#087EAA;min-height:24px;margin:8px 0 0}.field-range:focus-visible{outline-offset:1px}.result-panel #result-chart{height:190px}
@media(max-width:540px){.mobile-kpi{display:block;border:1px solid #c5dfe9;background:#E6F4F8;color:#142B40;padding:16px;border-radius:10px;font-size:.9rem;font-weight:650;margin-top:22px;font-variant-numeric:tabular-nums}}
:root{--navy:#142B40;--dark:#0B1726;--ink:#1B344B;--muted:#64798B;--blue:#087EAA;--teal:#087e79;--cyan:#22B8B0;--mint:#E6F4F8;--paper:#F6FAFC;--white:#FFFFFF;--line:#dce6ec;--radius:14px;--shadow:0 16px 48px #142b4008;--measure:1240px;--ease:160ms ease;--font:Inter,"Segoe UI",system-ui,sans-serif;font-family:var(--font);background:var(--white)}
html{scroll-behavior:smooth;scroll-padding-top:28px}body{font-family:var(--font)}h1,h2,h3{font-weight:650}h1{letter-spacing:-.055em}h2{letter-spacing:-.04em}button,.button{background:var(--navy);border-color:var(--navy);border-radius:8px;font-size:.87rem;transition:background var(--ease),border-color var(--ease)}button:hover,.button:hover{background:var(--blue);border-color:var(--blue)}button:active,.button:active{transform:translateY(1px)}.secondary{background:var(--white);color:var(--ink);border-color:var(--line)}.secondary:hover{color:var(--navy);background:var(--mint);border-color:var(--blue)}:focus-visible{outline:3px solid var(--blue);outline-offset:4px}input[aria-invalid=true]{border-color:var(--danger);background:#fff4f5}input:disabled,select:disabled{background:var(--paper);opacity:.65;cursor:not-allowed}input,select{font-variant-numeric:tabular-nums}input:hover,select:hover,textarea:hover{border-color:#7e9caf}.container{max-width:var(--measure);padding-inline:36px}.header{height:86px;max-width:1440px;padding-inline:36px;gap:26px;background:var(--white)}.brand{font-size:1.42rem;letter-spacing:-.055em}.brand img{flex-shrink:0}.header nav{gap:20px}.header nav a{font-size:.78rem;color:#465e70}.header-tools{gap:16px;font-size:.75rem}.header-cta{font-size:.72rem;min-height:38px;padding:8px 12px;white-space:nowrap}.header nav a[aria-current=page]{color:var(--blue)}.eyebrow{color:var(--blue);font-size:.65rem;letter-spacing:.14em}.hero{padding-block:80px 72px;gap:56px;grid-template-columns:1.05fr 1fr}.hero h1{font-size:clamp(2.8rem,4.6vw,4rem);line-height:1.1;letter-spacing:-.06em}.hero h1 span{color:var(--blue)}.hero .lead{font-size:1rem;line-height:1.8;max-width:465px}.hero-proof{font-size:.66rem;gap:15px}.hero-visual{background:var(--paper);border-radius:16px;box-shadow:0 20px 60px #142b4010;position:relative;border-color:var(--line)}.visual-top{padding:20px 22px 0;font-size:.57rem;align-items:center}.visual-top .status-dot{background:var(--cyan)}.hero-visual>img{height:225px;object-fit:contain;margin:6px auto 0}.hero-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 22px}.hero-controls label{font-size:.68rem;margin-top:0;color:#465e70}.hero-controls label span{float:right;color:var(--muted);font-weight:400}.hero-controls input{font-weight:600;background:var(--white);border-color:var(--line);min-height:40px;padding:8px 12px}.hero-output{display:flex;justify-content:space-between;align-items:center;margin:18px 22px;padding:16px 0 0;border-top:1px solid var(--line)}.hero-output span{font-size:.67rem;color:var(--muted)}.hero-output strong{display:block;font-size:2.45rem;line-height:1.25;font-weight:650;letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--navy)}.hero-output strong small{font-size:1rem;font-weight:450;letter-spacing:0}.hero-output>a{width:42px;height:42px;display:grid;place-content:center;background:var(--navy);color:var(--white);text-decoration:none;border-radius:50%;font-size:1.3rem}.visual-note{font-size:.61rem;line-height:1.65;margin-inline:22px}.trust-strip{background:var(--paper);gap:40px;padding-block:20px}.trust-strip>span{font-size:.59rem;letter-spacing:.08em}.trust-strip strong{font-size:.74rem;font-weight:550}.section{padding-block:66px}.section-heading{margin-bottom:30px}.section-heading h2{font-size:2rem}.cards{gap:20px}.card{box-shadow:none;padding:26px;border-color:var(--line)}.tool-card{min-height:246px}.tool-icon{border-radius:10px;background:var(--mint);color:var(--blue);width:42px;height:42px;font-size:1.45rem;margin-bottom:20px}.card h3{font-size:1.12rem;letter-spacing:-.02em}.card p{font-size:.8rem;line-height:1.65}.card-link{font-size:.74rem;color:var(--blue)}a.card:hover{transform:none;box-shadow:var(--shadow);border-color:#9fc3d3}.topic-band{padding-block:55px;border-block:1px solid var(--line)}.topic-layout{display:grid;grid-template-columns:.9fr 1.3fr;gap:100px}.topic-layout h2{font-size:2.1rem}.topic-layout p{font-size:.86rem;max-width:350px;color:var(--muted)}.topic-layout .text-link{font-size:.78rem}.tool-rows>a{display:flex;align-items:center;gap:24px;justify-content:space-between;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);padding:18px 0}.tool-rows>a:first-child{padding-top:0}.tool-rows>a:last-child{border-bottom:0}.tool-rows strong{font-size:.95rem;display:block;font-weight:600}.tool-rows small{font-size:.74rem;display:block;line-height:1.65;margin-top:4px}.tool-rows b{font-size:1.4rem;font-weight:450;color:var(--blue)}.tool-rows>a:hover strong{color:var(--blue)}.dark-band{background:var(--dark);border-color:var(--dark)}.dark-band h2,.dark-band .tool-rows>a{color:white}.dark-band .eyebrow,.dark-band .text-link,.dark-band .tool-rows b{color:#59d7d0}.dark-band p,.dark-band small{color:#a4bbc9}.dark-band .tool-rows>a{border-color:#293c4e}.dark-band .tool-rows>a:hover strong{color:#59d7d0}.feature-stack b{color:var(--blue);font-size:.9rem}.feature-stack h3{font-size:1.05rem}.split{gap:90px}.split h2{font-size:2.5rem}.split .lead{font-size:.95rem}.reading-section{padding-block:40px}.editorial-empty{border-top:1px solid var(--line);padding:25px 0;display:grid;grid-template-columns:1fr 2fr 1fr;gap:24px;align-items:start}.editorial-empty>span{font-size:.6rem;letter-spacing:.12em;color:var(--muted);padding-top:4px}.editorial-empty p{font-size:.85rem;color:var(--muted);margin:0}.editorial-empty a{font-size:.78rem;text-align:right;text-decoration:none}.faq{max-width:940px}.faq h2{font-size:2.3rem}.faq details{padding-block:20px}.faq summary{font-size:.9rem;list-style:none;display:flex;justify-content:space-between;align-items:center}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';font-size:1.3rem;font-weight:400;color:var(--blue);margin-left:20px}.faq details[open] summary:after{content:'−'}.faq details p{font-size:.85rem;max-width:780px}.related-topics{padding-block:22px 35px;border-top:1px solid var(--line);display:flex;gap:24px;flex-wrap:wrap}.related-topics .eyebrow{flex-basis:100%;margin-bottom:0}.related-topics a{font-size:.8rem;text-decoration:none}.footer-grid .brand{font-size:1.5rem}footer{background:var(--dark);margin-top:20px}.footer-grid p{line-height:1.7}.calculator-layout{grid-template-columns:1.1fr 1fr;gap:28px}.calculator-form{padding:30px}.calculator-form>.muted{font-size:.74rem}.form-grid{gap:24px 20px}.field label{font-size:.77rem}.field small{font-size:.65rem}.input-unit input{font-size:1rem;font-weight:550}.result-panel{background:var(--dark);color:white;border-color:var(--dark);padding:30px;top:24px}.result-panel h2{color:white;font-size:1.05rem;font-weight:450}.result-panel .eyebrow{color:#59d7d0}.result-panel .result-item{border-color:#293c4e;padding:17px 0}.result-panel .result-item>span,.result-panel .result-item small,.result-panel .muted,.result-panel .result-footnote{color:#a4bbc9}.result-panel .result-item strong{color:white;font-size:1.8rem;font-weight:550;font-variant-numeric:tabular-nums}.result-panel .result-item:first-child strong{font-size:3rem;font-weight:600}.result-panel .secondary{background:#182b3d;border-color:#34495c;color:#e1eef4}.result-panel .secondary:hover{background:#263f54;border-color:#59d7d0}.result-panel #share-status{font-size:.75rem;margin-top:12px}.result-panel a{color:#59d7d0}.result-panel svg{height:130px}.result-panel .chart-note{font-size:.65rem}.method-grid{gap:70px;grid-template-columns:1.45fr 1fr}.method-grid p{font-size:.9rem}.formula{background:var(--dark)}.editorial{max-width:var(--measure)}.editorial>h1{max-width:950px;font-size:clamp(2.4rem,4vw,3.7rem)}.editorial>.lead{max-width:850px;font-size:1.13rem}.editorial>.muted{font-size:.74rem;border-bottom:1px solid var(--line);padding-bottom:24px}.editorial-grid{display:grid;grid-template-columns:230px minmax(0,720px);gap:64px;justify-content:start}.article-toc{position:sticky;top:30px;align-self:start;padding-top:36px}.article-toc a{display:block;font-size:.76rem;line-height:1.5;text-decoration:none;color:var(--muted);padding:9px 0;border-bottom:1px solid var(--line)}.article-toc a:hover{color:var(--blue)}.article-body{margin-top:0;min-width:0;font-size:1rem;line-height:1.85}.article-body h2{scroll-margin-top:30px;font-size:1.8rem}.article-body blockquote{margin:30px 0;padding:20px 25px;background:var(--paper);border-left:3px solid var(--blue)}.editorial>.cards{margin:24px 0 48px}.admin-body{background:var(--paper)}.admin-sidebar{background:var(--dark);width:244px;padding:30px 20px;position:fixed;inset:0 auto 0 0;overflow-y:auto;color:#a4bbc9}.admin-sidebar .brand{color:white;font-size:1.35rem;margin-bottom:18px;gap:8px}.admin-sidebar .eyebrow{color:#7d98ad;font-size:.58rem;padding-left:10px}.admin-sidebar nav{margin:28px 0}.admin-sidebar nav a{display:block;padding:11px 14px;border-radius:7px;font-size:.81rem;text-decoration:none;color:#a4bbc9;margin:3px 0;border:1px solid transparent}.admin-sidebar nav a:hover{background:#172a3c;color:white}.admin-sidebar nav a[aria-current=page]{color:#8ce4df;background:#183348;border-color:#245169}.admin-sidebar>a:not(.brand){display:block;text-decoration:none;color:#a4bbc9;font-size:.76rem;padding:7px 14px}.admin-main{margin-left:244px;padding:40px;max-width:1800px}.admin-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:30px;gap:20px}.admin-top h1{font-size:2.15rem;margin-bottom:0}.admin-top .eyebrow{font-size:.6rem;margin-bottom:10px}.admin-top form{display:flex;align-items:center;gap:14px;font-size:.72rem;color:var(--muted)}.stat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:26px}.stat{padding:22px 18px;border-radius:10px;background:white}.stat>span{display:block;font-size:.7rem;color:var(--muted);min-height:38px}.stat>strong{display:block;font-size:2.45rem;letter-spacing:-.05em;font-weight:550;line-height:1.4;font-variant-numeric:tabular-nums}.stat:nth-child(3){border-top:3px solid var(--cyan)}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.admin-main h2{font-size:1.15rem}.admin-main .card{border-radius:10px}.admin-main .card p,.admin-main .card li{font-size:.85rem;color:var(--muted)}.admin-main dl{display:grid;grid-template-columns:1fr 1fr;font-size:.8rem;gap:10px}.admin-main dt{color:var(--muted)}.admin-main dd{margin:0;text-align:right}.admin-main table{font-size:.78rem}.admin-main th{text-transform:uppercase;font-size:.64rem;letter-spacing:.06em;background:var(--paper)}.badge{display:inline-block;padding:3px 8px;border-radius:5px;background:var(--mint);color:var(--blue);font-size:.66rem}.rich-toolbar{display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--line);border-radius:8px 8px 0 0;padding:10px;background:var(--paper)}.rich-toolbar button{font-size:.74rem;min-height:32px;padding:4px 10px}.rich-area{min-height:380px;border:1px solid var(--line);border-top:0;padding:24px;border-radius:0 0 8px 8px;outline-color:var(--blue);line-height:1.8;background:white}.rich-area h2{margin-top:24px}.sticky-save{position:sticky;bottom:0;background:white;border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;align-items:center;gap:20px}.checkbox{display:flex;align-items:center;gap:10px}.checkbox input{width:auto;min-height:auto;accent-color:var(--blue)}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.login-card{max-width:480px}.admin-actions{margin-bottom:24px}.media-thumb{max-height:180px;object-fit:contain}dialog{border:1px solid var(--line);border-radius:var(--radius);padding:30px;max-width:550px;color:var(--ink);box-shadow:0 20px 80px #0b172633}dialog::backdrop{background:#0b172680}dialog h2{font-size:1.5rem}dialog p{font-size:.88rem}
@media(max-width:1200px){.header{gap:18px;padding-inline:24px}.header nav{gap:12px}.header nav a{font-size:.72rem}.header-cta{display:none}.hero{gap:35px}.hero h1{font-size:3.3rem}.topic-layout{gap:55px}.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-main{padding:30px}.editorial-grid{gap:40px;grid-template-columns:200px minmax(0,1fr)}}
@media(max-width:850px){.header{height:auto;min-height:76px}.header nav{display:none}.header nav.open{display:flex}.menu-toggle{display:block}.container{padding-inline:26px}.hero{grid-template-columns:1fr;padding-block:50px;gap:36px}.hero h1{font-size:3.7rem}.hero-visual{width:100%;max-width:640px}.hero-visual>img{height:235px}.topic-layout{grid-template-columns:1fr 1.4fr;gap:30px}.topic-layout h2{font-size:1.8rem}.trust-strip{gap:22px}.calculator-layout{grid-template-columns:1fr}.result-panel{position:static}.editorial-grid{grid-template-columns:1fr;gap:0}.article-toc{position:static;padding-block:20px;margin-bottom:20px}.article-toc a{display:inline-block;margin-right:18px}.editorial-empty{grid-template-columns:1fr}.editorial-empty a{text-align:left}.admin-sidebar{width:200px}.admin-sidebar .brand{font-size:1.07rem}.admin-main{margin-left:200px;padding:24px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-grid{grid-template-columns:1fr}.admin-top form{flex-direction:column}.split{gap:36px}.split h2{font-size:2rem}.method-grid{grid-template-columns:1fr}.header-tools{gap:12px}}
@media(max-width:540px){.container{padding-inline:20px}.header{padding-inline:20px;gap:10px}.header .brand{font-size:1.18rem;gap:6px}.header .brand img{width:28px;height:28px}.menu-toggle{font-size:.72rem;padding:6px 8px}.header-tools{gap:10px}.hero h1{font-size:2.85rem}.hero .lead{font-size:.95rem}.hero .actions{flex-direction:row;align-items:center;gap:18px}.hero .text-link{font-size:.75rem}.hero .button{font-size:.75rem;padding:12px 14px}.hero-proof{gap:10px;font-size:.59rem}.hero-visual>img{height:200px}.hero-output strong{font-size:2.2rem}.topic-layout{grid-template-columns:1fr;gap:30px}.topic-band{padding-block:40px}.section{padding-block:45px}.section-heading h2{font-size:1.8rem}.split{grid-template-columns:1fr}.split h2{font-size:2.1rem}.card{padding:22px}.cards{grid-template-columns:1fr}.tool-card{min-height:220px}.result-panel .result-item:first-child strong{font-size:2.7rem}.admin-sidebar{position:static;width:100%;padding:18px 20px}.admin-sidebar .brand{font-size:1.35rem}.admin-sidebar nav{display:flex;overflow:auto;margin:15px 0;gap:5px}.admin-sidebar nav a{white-space:nowrap;font-size:.74rem;padding:8px}.admin-sidebar>a:not(.brand){display:inline-block;padding:5px 8px}.admin-main{margin:0;padding:20px}.admin-top h1{font-size:1.7rem}.admin-top form span{display:none}.admin-top form{flex-direction:row}.stat-grid{gap:10px}.stat>strong{font-size:2rem}.admin-grid{gap:15px}.admin-main dl{grid-template-columns:1fr 1fr}.editorial>h1{font-size:2.3rem}.editorial>.lead{font-size:1rem}.check-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid .brand{font-size:1.35rem}.faq h2{font-size:2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{.result-panel,.result-panel h2,.result-panel .result-item strong{background:white;color:black}.result-panel .result-item>span,.result-panel .result-item small,.result-panel .muted,.result-panel .result-footnote{color:#333}.hero-planner,.article-toc,.header-cta,.related-topics{display:none}.editorial-grid{display:block}.admin-main{margin:0}.result-panel{border:1px solid #999}}

html:not(.js) #unit-toggle,html:not(.js) #share,html:not(.js) #example,html:not(.js) [data-print],html:not(.js) [data-consent-open],html:not(.js) .menu-toggle{display:none!important}.adsbygoogle{display:block}.ad-space{min-height:280px;margin-block:40px;padding:20px;border-top:1px solid var(--line)}@media(max-width:850px){html:not(.js) .header nav{display:flex!important;flex-wrap:wrap;position:static;flex-basis:100%;background:transparent}}


.js .hero-submit{display:none}html:not(.js) .hero-submit{display:inline-flex;margin:0 22px 22px}.header nav{gap:15px}.header nav a{font-size:.78rem}

/* Contrast on pale topic backgrounds. */
:root{--blue:#066f97}