/* Styles for the treatment teachings: log removal chart, notes, chlorine demand, dosing calculator */

.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-bottom:14px}
.ctl-label{font:600 12px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.seg{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface)}
.seg button{font:500 14px/1 var(--f-data);font-variant-numeric:tabular-nums;color:var(--fg);background:transparent;border:0;border-right:1px solid var(--line);padding:9px 12px;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.assume{font-size:13px;color:var(--muted)}

.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--muted);margin-bottom:18px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:14px;height:10px;border-radius:2px;display:inline-block}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1020px){.grid{grid-template-columns:minmax(0,1fr)}}
.col{background:var(--surface);border:1px solid var(--line);border-radius:8px;min-width:0;display:flex;flex-direction:column}
.col-head{padding:16px 16px 14px;border-bottom:1px solid var(--line);display:grid;gap:10px}
.col-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.col-title h2{margin:0;font:700 22px/1 var(--f-display)}
.size{font:400 12px/1 var(--f-data);color:var(--muted);white-space:nowrap}
.pickers{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.pickers label{display:grid;gap:4px;font:600 11px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
select{font:500 15px/1.2 var(--f-body);color:var(--fg);background:var(--sunk);border:1px solid var(--line);border-radius:5px;padding:8px 10px;width:100%;min-width:0}
.blurb{font-size:13px;color:var(--muted);margin:0}

.summary{padding:12px 16px;background:var(--sunk);border-bottom:1px solid var(--line);font-size:13.5px;display:grid;gap:4px}
.summary b{font-weight:600}
.summary .good b{color:var(--ok)}
.summary .no b{color:var(--bad)}

.section{padding:12px 16px 4px}
.section h3{margin:0 0 6px;font:600 12px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.section h3 em{font-style:normal;font-family:var(--f-data);letter-spacing:0;text-transform:none}
.row{display:grid;grid-template-columns:118px minmax(0,1fr) 78px;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.rname{font-size:14px;font-weight:500;line-height:1.15}
.rname small{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:2px}
.val{font:500 13px/1.15 var(--f-data);font-variant-numeric:tabular-nums;text-align:right}
.val small{display:block;font:500 10.5px/1.2 var(--f-display);letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
.v-ok{color:var(--ok)} .v-warn{color:var(--warn)} .v-bad{color:var(--bad)} .v-mute{color:var(--muted)}

.track{position:relative;height:18px;background:var(--sunk);border-radius:3px}
.track .tick{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.track .fill{position:absolute;left:0;top:3px;bottom:3px;border-radius:2px;transition:width .35s ease}
.track .target{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px dashed var(--fg);opacity:.7}
.axis{display:grid;grid-template-columns:118px minmax(0,1fr) 78px;gap:10px;font:400 10.5px/1 var(--f-data);color:var(--muted);padding:2px 0 8px}
.axis .nums{position:relative;height:12px}
.axis .nums span{position:absolute;transform:translateX(-50%)}
.axis .nums span:first-child{transform:none}
.axis .nums span:last-child{transform:translateX(-100%)}

.zones{position:relative;height:18px;border-radius:3px;overflow:hidden;display:flex}
.zones i{display:block;height:100%}
.zones .zo{background:var(--z-ok);width:42%} .zones .zw{background:var(--z-warn);width:33%} .zones .zb{background:var(--z-bad);width:25%}
.marker{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;border-radius:2px;background:var(--fg);transition:left .35s ease}
.zones.dead{background:repeating-linear-gradient(135deg,var(--z-bad) 0 6px,var(--sunk) 6px 12px)}
.zones.dead i{display:none}
.zones.dead::after{content:"No useful effect";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 11px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--bad)}
.zones.beyond{background:var(--sunk)}
.zones.beyond i{display:none}
.zones.beyond::after{content:"Beyond credit tables";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 11px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.col-foot{margin-top:auto;padding:10px 16px 14px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}

/* Notes tab */
.notes{max-width:74ch;display:grid;gap:22px}
.notes h2{margin:0 0 6px;font:700 22px/1.1 var(--f-display)}
.notes p,.notes li{margin:0 0 8px}
.notes ul{padding-left:20px;margin:0}
.logtable{border-collapse:collapse;font-family:var(--f-data);font-size:14px;font-variant-numeric:tabular-nums}
.logtable th,.logtable td{border-bottom:1px solid var(--line);padding:6px 16px 6px 0;text-align:left}
.logtable th{font:600 12px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.callout{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:6px;padding:12px 14px}
@media (prefers-reduced-motion:reduce){.track .fill,.marker{transition:none}}
@media (max-width:420px){.row,.axis{grid-template-columns:96px minmax(0,1fr) 70px;gap:8px}}

/* Chlorine tab */
:root{--dem1:#9AAAAE;--dem2:#D9A396;--total:#B9CDD0;--z1:#F3F6F6;--z2:#F7F1E3;--z3:#F6E9E5;--z4:#E6F1EE}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--dem1:#5E7175;--dem2:#8C5447;--total:#2F474C;--z1:#111E21;--z2:#1E1D15;--z3:#22191A;--z4:#12241F}}
:root[data-theme="dark"]{--dem1:#5E7175;--dem2:#8C5447;--total:#2F474C;--z1:#111E21;--z2:#1E1D15;--z3:#22191A;--z4:#12241F}
.cl{display:grid;gap:28px}
.cl h2{margin:0 0 6px;font:700 24px/1.1 var(--f-display);text-wrap:balance}
.cl .lede{margin:0 0 14px;color:var(--muted);max-width:72ch}
.eqs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.eqs{grid-template-columns:minmax(0,1fr)}}
.eq{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px;display:grid;gap:8px;min-width:0}
.eq .f{font:600 19px/1.3 var(--f-display);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.eq .f b{font-weight:700}
.eq .f span{color:var(--muted);font-weight:500}
.eq p{margin:0;font-size:13.5px;color:var(--muted)}
.eq p b{color:var(--fg);font-weight:600}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;min-width:0}
.bp{display:grid;grid-template-columns:minmax(0,1fr) 300px}
@media (max-width:980px){.bp{grid-template-columns:minmax(0,1fr)}}
.bp-main{padding:16px;min-width:0;border-right:1px solid var(--line)}
@media (max-width:980px){.bp-main{border-right:0;border-bottom:1px solid var(--line)}}
.sliders{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 16px;margin-bottom:12px}
@media (max-width:700px){.sliders{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sl{display:grid;gap:4px;min-width:0}
.sl label{display:flex;justify-content:space-between;gap:6px;font:600 11px/1.2 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sl output{font:500 13px/1 var(--f-data);letter-spacing:0;text-transform:none;color:var(--fg);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent);margin:0}
.sl.dose label{color:var(--fg)}
.chartbox{overflow-x:auto}
#bp-svg{display:block;width:100%;min-width:520px;height:auto;touch-action:none;cursor:ew-resize}
#bp-svg text{font-family:var(--f-data);font-size:11px;fill:var(--muted)}
#bp-svg .zl{font-family:var(--f-display);font-weight:600;font-size:12px;fill:var(--muted);letter-spacing:.04em}
#bp-svg .ann{font-family:var(--f-display);font-weight:600;font-size:12.5px;fill:var(--fg)}
.cl-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted);margin-top:8px}
.cl-legend span{display:inline-flex;align-items:center;gap:6px}
.ln{display:inline-block;width:18px;height:0;border-top:2.5px solid}
.side{padding:16px;display:grid;gap:14px;align-content:start}
.zone-pill{display:inline-block;font:600 12px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:var(--sunk);color:var(--fg)}
.side h3{margin:6px 0 4px;font:700 19px/1.15 var(--f-display)}
.side p{margin:0;font-size:13.5px;color:var(--muted)}
.read{display:grid;grid-template-columns:1fr auto;gap:0;font-size:14px}
.read div{padding:6px 0;border-top:1px solid var(--line)}
.read div:nth-child(-n+2){border-top:0}
.read .n{font:500 14px/1.2 var(--f-data);font-variant-numeric:tabular-nums;text-align:right}
.stack{display:flex;height:22px;border-radius:4px;overflow:hidden;background:var(--sunk);gap:2px}
.stack i{display:block;height:100%;transition:width .3s ease}
.stack-key{display:grid;gap:4px;font-size:12.5px;color:var(--muted);margin-top:8px}
.stack-key span{display:flex;align-items:center;gap:6px}
.stack-key b{margin-left:auto;font:500 12.5px var(--f-data);color:var(--fg);font-variant-numeric:tabular-nums}
.btn{font:600 14px/1 var(--f-display);letter-spacing:.03em;background:var(--accent);color:var(--accent-ink);border:0;border-radius:6px;padding:10px 14px;cursor:pointer;justify-self:start}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
/* Dosing calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){.calc{grid-template-columns:minmax(0,1fr)}}
.calc form{padding:16px;display:grid;gap:14px;border-right:1px solid var(--line);align-content:start}
@media (max-width:900px){.calc form{border-right:0;border-bottom:1px solid var(--line)}}
.fg{display:grid;gap:5px;min-width:0}
.fg>label,.fg legend{font:600 11px/1.2 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
.pair{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:8px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:420px){.two{grid-template-columns:minmax(0,1fr)}.pair{grid-template-columns:minmax(0,1fr) 110px}}
input[type=number]{font:500 15px/1.2 var(--f-data);font-variant-numeric:tabular-nums;color:var(--fg);background:var(--sunk);border:1px solid var(--line);border-radius:5px;padding:8px 10px;width:100%;min-width:0;box-sizing:border-box}
input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hint{font-size:12.5px;color:var(--muted);margin:0}
.jar{background:var(--sunk);border-radius:6px;padding:12px;display:grid;gap:10px}
.jar h4{margin:0;font:600 14px/1.2 var(--f-display)}
.jar .row3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end}
@media (max-width:420px){.jar .row3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.jar .res{font:500 14px var(--f-data);padding-bottom:9px}
.out{padding:16px;display:grid;gap:14px;align-content:start}
.big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.big div{background:var(--sunk);border-radius:6px;padding:12px;display:grid;gap:4px;min-width:0}
.big small{font:600 11px/1.2 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.big strong{font:600 26px/1.05 var(--f-display);font-variant-numeric:tabular-nums}
.big strong em{font-style:normal;font:500 14px var(--f-body);color:var(--muted);margin-left:4px}
.big span{font:400 12.5px/1.3 var(--f-data);color:var(--muted)}
.work{font:400 13px/1.7 var(--f-data);font-variant-numeric:tabular-nums;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:10px 12px;overflow-x:auto;white-space:pre;margin:0}
.flags{display:grid;gap:6px}
.flag{font-size:13px;padding:8px 10px;border-radius:6px;border-left:4px solid var(--warn);background:var(--sunk)}
.flag.bad{border-left-color:var(--bad)}
.flag.ok{border-left-color:var(--ok)}
.err{color:var(--bad);font-size:13.5px;font-weight:600;margin:0}
.ex{font:600 11px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--warn)}
@media (prefers-reduced-motion:reduce){.stack i{transition:none}}

/* Columnar maths, shared by the calculators. As on paper: operator | whole part | decimal part | unit, answer under a rule */
.eqb{background:var(--bg);border-radius:6px;padding:10px 12px;display:grid;gap:6px}
.eqb+.eqb{margin-top:2px}
.eqb .lab{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
.eqb .lab b{font-weight:600}
.eqb .lab i{color:var(--muted)}
.colm{display:inline-grid;grid-template-columns:auto auto auto auto;column-gap:0;row-gap:3px;justify-self:start;font:400 16px/1.25 var(--f-data);font-variant-numeric:tabular-nums;padding-left:4px}
.colm .op{color:var(--muted);padding-right:14px;text-align:center}
.colm .wh{text-align:right}
.colm .fr{text-align:left}
.colm .un{color:var(--muted);padding-left:12px;font-size:14px}
.colm .rule{grid-column:1/5;border-top:2px solid var(--fg);height:0;margin:1px 0}
.colm .ans{font-weight:600;color:var(--accent)}
.colm .un.ans{color:var(--accent)}
@keyframes flash{from{background:var(--z-warn)}to{background:transparent}}
.colm .chg{animation:flash 1.1s ease-out}
@media (prefers-reduced-motion:reduce){.colm .chg{animation:none;text-decoration:underline}}
.eqb .note{font:400 13px var(--f-body);color:var(--muted)}
.worked-c{display:grid;gap:8px}
.worked-c h3{margin:0;font:600 12px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#j-out:empty{display:none}