/* Diagrams (2026-10-14): the water in the tank, the water cycle, the CO2 cycle, the ecosystem (diagrams.js).
   Same look as the filter cut-away: thin lines, the accent green for water, warm for gas and light.
   Moving parts are CSS animations, so reduced motion (app.css) and "Pause the water" (:root.still) stop them. */
.dg { display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.dg-wide { max-width: 34rem; } .dg-tall { max-width: 26rem; } .dg-small { max-width: 13rem; } .dg-eco { max-width: 40rem; }
.dg-strip { max-width: 34rem; margin-top: .75rem; }
.dg-box { margin: 0; }
#flow-tank, #ncycle, #co2cycle { margin-top: .25rem; }
html.pager .page .dgsec { margin-top: 1.75rem; }
.dgsec .head { margin-bottom: .6rem !important; }
.dgsec h3 { margin: 0; color: var(--strong); font-size: 1.15rem; letter-spacing: -.01em; }
.dg-water { fill: var(--accent); opacity: .08; }
.dg-glass { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linejoin: round; }
.dg-surf { fill: none; stroke: var(--accent); stroke-opacity: .55; stroke-width: 1.4; }
.dg-soil { fill: var(--grey); opacity: .28; }
.dg-carpet circle { fill: var(--accent); opacity: .5; }
.dg-pipe { fill: none; stroke: var(--line-strong); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.dg-pipein { fill: none; stroke: var(--bg); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.dg-pipe2 { fill: var(--raise); stroke: var(--line-strong); stroke-width: 1.5; }
.dg-flow { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; animation: dg-flow 1.4s linear infinite; }
.dg-jet { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 10; animation: dg-flow 1.2s linear infinite; }
.dg-jet.dg-slow { animation-duration: 2.2s; }
.dg-loop { fill: none; stroke: var(--accent); stroke-opacity: .5; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1.5 8; animation: dg-flow 3s linear infinite; }
.dg-arh { fill: var(--accent); } .dg-arlh { fill: var(--accent); opacity: .6; } .dg-argh { fill: var(--warm); }
@keyframes dg-flow { to { stroke-dashoffset: -24; } }
.dg-mesh { fill: var(--raise); stroke: var(--line-strong); stroke-width: 1.5; } .dg-meshl { stroke: var(--line-strong); stroke-width: 1; }
.dg-part { fill: var(--raise); stroke: var(--strong); stroke-width: 1.6; }
.dg-lip { stroke: var(--warm); stroke-width: 3.5; stroke-linecap: round; }
.dg-wing { fill: var(--raise); stroke: var(--strong); stroke-width: 1.4; stroke-linejoin: round; }
.dg-speck { fill: var(--warm); opacity: 0; animation: dg-skim 3.5s linear infinite; }
@keyframes dg-skim { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: .9; } 88% { opacity: .9; } 100% { opacity: 0; transform: translateX(var(--dx, 100px)); } }
.dg-mk circle { fill: var(--strong); } .dg-mk text { fill: var(--bg); font: 700 11px var(--sans); }
.dg-t { fill: var(--strong); font: 600 13px var(--sans); }
.dg-s { fill: var(--grey); font: 400 11px var(--sans); } .dg-i { font-style: italic; }
.dg-val { fill: var(--accent); font: 800 15px var(--sans); } .dg-val.dg-warn { fill: var(--warm); }
.dg-node { fill: var(--raise); stroke: var(--line-strong); stroke-width: 1.4; }
.dg-node-bad { stroke: var(--warm); } .dg-node-good { stroke: var(--accent); } .dg-node-soft { stroke-dasharray: 4 3; }
.dg-vert { stroke-dasharray: 2 7; }
.dg-key { margin: .9rem 0 0; padding: 0; list-style: none; counter-reset: dgk; display: grid; gap: .1rem; }
.dg-key li { position: relative; padding: .45rem 0 .5rem 2rem; border-top: 1px solid var(--line); font-size: .875rem; line-height: 1.45; counter-increment: dgk; }
.dg-key li::before { content: counter(dgk); position: absolute; left: 0; top: .5rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--strong); color: var(--bg); font-size: .6875rem; font-weight: 700; }
.dg-key b, .dg-pair b { color: var(--strong); font-weight: 600; }
.dg-pair { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 1rem; align-items: center; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.dg-pair p { margin: 0; }
.dg-note { margin: .6rem 0 0; }
/* CO2 */
.dg-light { fill: var(--warm); opacity: .9; } .dg-ray { stroke: var(--warm); stroke-opacity: .35; stroke-width: 1.5; stroke-dasharray: 3 4; }
.dg-stem { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; } .dg-leaf { fill: var(--accent); opacity: .75; }
.dg-pearl { fill: var(--strong); opacity: 0; animation: dg-rise 3.6s ease-in infinite; }
@keyframes dg-rise { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .85; } 100% { opacity: 0; transform: translateY(-46px); } }
.dg-bottle { fill: var(--raise); stroke: var(--line-strong); stroke-width: 2; }
.dg-reg { fill: var(--warm); opacity: .85; } .dg-gauge { fill: var(--bg); stroke: var(--strong); stroke-width: 1.5; }
.dg-sol { fill: var(--raise); stroke: var(--warm); stroke-width: 1.6; }
.dg-clock { fill: var(--bg); stroke: var(--strong); stroke-width: 1.5; } .dg-hand { fill: none; stroke: var(--strong); stroke-width: 1.5; stroke-linecap: round; }
.dg-wire { fill: none; stroke: var(--grey); stroke-width: 1.2; stroke-dasharray: 2 3; }
.dg-vial { fill: var(--accent); fill-opacity: .15; stroke: var(--line-strong); stroke-width: 1.4; }
.dg-cbub { fill: var(--strong); opacity: 0; animation: dg-cb 1.5s linear infinite; }
@keyframes dg-cb { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-26px); } }
.dg-gasline { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-linejoin: round; }
.dg-gas { fill: none; stroke: var(--warm); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1 7; animation: dg-flow 1.1s linear infinite; }
.dg-valve { fill: var(--bg); stroke: var(--strong); stroke-width: 1.5; } .dg-valvea { fill: var(--strong); }
.dg-diff { fill: var(--raise); stroke: var(--warm); stroke-width: 1.8; }
.dg-mist { fill: var(--warm); opacity: 0; animation: dg-mist 3s ease-out infinite; }
@keyframes dg-mist { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx, 30px), -46px); } }
.dg-co2 { fill: none; stroke: var(--warm); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 7; animation: dg-flow 1.6s linear infinite; }
.dg-out { fill: none; stroke: var(--grey); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 2 5; animation: dg-flow 1.8s linear infinite; }
.dg-stemg { stroke: var(--line-strong); stroke-width: 2; } .dg-drop { fill: #5fae6e; stroke: var(--strong); stroke-width: 1.4; }
.dg-sw { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin: 0 .3rem 0 .15rem; vertical-align: -.05em; }
.dg-sw-b { background: #3f7fd0; } .dg-sw-g { background: #5fae6e; } .dg-sw-y { background: #e2c23a; }
.dg-axis { stroke: var(--line-strong); stroke-width: 1; } .dg-bl { fill: var(--warm); opacity: .8; } .dg-bc { fill: var(--accent); opacity: .7; }
/* the ecosystem */
.dg-zone { fill: var(--grey); font: 600 9px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.dg-zline { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.dg-stone { fill: var(--grey); opacity: .45; }
.dg-sp { cursor: pointer; outline: none; transition: opacity .2s; }
.dg-eco.sel .dg-sp { opacity: .18; } .dg-eco.sel .dg-sp.on { opacity: 1; }
.dg-swim { animation: dg-swim 5s ease-in-out infinite alternate; }
.dg-crawl { animation: dg-crawl 6s ease-in-out infinite alternate; }
@keyframes dg-swim { from { transform: translate(-5px, 1px); } to { transform: translate(5px, -1.5px); } }
@keyframes dg-crawl { from { transform: translateX(-1.5px); } to { transform: translateX(1.5px); } }
.eco-panel { min-height: 5.6rem; margin-top: .75rem; padding: .7rem 0 .6rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.eco-panel p { margin: 0; }
.eco-name { color: var(--strong); font-weight: 700; font-size: 1.05rem; } .eco-name .tag { vertical-align: .2em; }
.eco-zone { color: var(--accent); font-size: .8125rem; font-weight: 600; margin-top: .1rem !important; }
.eco-line { font-size: .9375rem; line-height: 1.45; margin-top: .25rem !important; }
/* the species under the picture: an even grid, every card the same size */
.eco-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
.eco-card { display: grid; grid-template-rows: 2.6rem auto auto; height: 100%; justify-items: center; align-content: start; gap: .2rem; min-width: 0; min-height: 6.4rem; padding: .55rem .35rem .5rem; background: none; border: 1px solid var(--line); color: var(--text); font: inherit; text-align: center; cursor: pointer; }
.eco-pic { display: grid; place-items: center; width: 100%; height: 2.6rem; }
.eco-pic img { display: block; width: auto; height: auto; max-width: 80%; max-height: 2.6rem; object-fit: contain; }
.eco-cn { display: flex; align-items: center; justify-content: center; min-height: 2.4em; color: var(--strong); font-size: .75rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.eco-cc { color: var(--grey); font-size: .6875rem; }
.eco-card:hover { border-color: var(--line-strong); }
.eco-card[aria-pressed="true"] { border-color: var(--strong); background: var(--raise); }
@media (min-width: 40rem) { .eco-cn { font-size: .8125rem; } }
#eco-sources { padding-bottom: .5rem; }
/* without motion the bubbles and the surface film still show, standing still */
@media (prefers-reduced-motion: reduce) { .dg-speck, .dg-pearl, .dg-cbub, .dg-mist { opacity: .8; } }

/* ===== 2026-10-14: one colour per stage of the water cycle (hint: the API test cards), shared by the cycle
   drawing, the Data charts, the test table and the latest-test chips. */
:root { --c-waste: #b59a7a; --c-nh3: #5cc77e; --c-no2: #b48cf2; --c-no3: #f08a5e; --c-ph: #6aa6f0; --c-o2: #8fd3f0; --c-co2: #c9c9c0; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --c-waste: #7d6448; --c-nh3: #23803f; --c-no2: #7445b8; --c-no3: #c24a1c; --c-ph: #2a64b4; --c-o2: #1d7fa6; --c-co2: #6b6b63; } }
:root[data-theme="light"] { --c-waste: #7d6448; --c-nh3: #23803f; --c-no2: #7445b8; --c-no3: #c24a1c; --c-ph: #2a64b4; --c-o2: #1d7fa6; --c-co2: #6b6b63; }
.stg-nh3 { --stg: var(--c-nh3); } .stg-no2 { --stg: var(--c-no2); } .stg-no3 { --stg: var(--c-no3); } .stg-ph { --stg: var(--c-ph); } .stg-waste { --stg: var(--c-waste); }
.stg { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 .3rem; min-width: 0; }
.stg-dot { flex: none; align-self: center; width: .55rem; height: .55rem; border-radius: 50%; background: var(--stg, var(--grey)); }
.stg-n { color: inherit; }
.stg-f { color: var(--stg, var(--grey)); font-weight: 600; font-size: .9em; white-space: nowrap; }
.stg-f sub, .stg-f sup, .dg-f sub { font-size: .72em; line-height: 0; }
.stg-u { color: var(--grey); font-size: .85em; }
.minivals .stg-chip { display: flex; flex-wrap: wrap; white-space: normal; overflow: visible; color: var(--grey); font-size: .6875rem; line-height: 1.25; }
.minivals .stg-chip .stg-f { flex-basis: 100%; font-size: .75rem; }
.minivals .stg-chip .stg-dot { display: none; }
.minivals > div[class^="stg-"] { border-top: 3px solid var(--stg, var(--line)); padding-top: .35rem; }
.minivals > div[class^="stg-"] b { color: var(--stg, var(--strong)); }
.tc { border-top: 3px solid var(--stg, var(--line)) !important; }
.tc .tch b { color: var(--stg, var(--strong)); }
.tc-line { stroke: var(--stg, var(--accent)) !important; } .tc-dot { fill: var(--stg, var(--accent)) !important; }
.stg-th { display: inline-flex; font-weight: inherit; }
.stg-th .stg-f { font-size: .85em; }
/* the cycle drawing */
.dg-st { fill: var(--stg); fill-opacity: .14; stroke: var(--stg); stroke-width: 1.6; }
.dg-stt { fill: var(--strong); font: 600 13px var(--sans); }
.dg-fx { fill: var(--stg); font: 700 11.5px var(--sans); }
.dg-stv { fill: var(--stg); font: 800 15px var(--sans); }
.dg-arst { fill: none; stroke: var(--stg); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 7; animation: dg-flow 1.2s linear infinite; }
.dg-o2 { fill: var(--c-o2); font: 600 10.5px var(--sans); } .dg-co2t { fill: var(--c-co2); font: 600 10.5px var(--sans); }
.dg-arsth { fill: var(--stg); }

/* ===== 2026-10-14 evening: the loop and the CO2 setup from product photos; Water cycle and CO2 pages.
   Clear acrylic and glass photos (class dg-clear) are dark lines on nothing; in dark mode they are inverted to light
   lines, hue turned back, so the glass stays glass-green. */
.dg-loopsvg { max-width: 30rem; } .dg-co2svg { max-width: 32rem; }
html.pager .page .dg-loopsvg { max-height: 78dvh; }
.dg-ph { pointer-events: none; }
.dg-win { fill: var(--bg); fill-opacity: .9; stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 4 3; }
.dg-hose { fill: none; stroke: var(--grey); stroke-opacity: .55; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.dg-hosein { fill: none; stroke: var(--bg); stroke-opacity: .8; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.dg-tube { fill: none; stroke: var(--grey); stroke-opacity: .35; stroke-width: 6; stroke-linecap: round; }
.dg-opt { fill: none; stroke: var(--warm); stroke-width: 1.4; stroke-dasharray: 3 3; }
.dg-optimg { opacity: .7; }
.dg-gas-t { fill: var(--warm); font-weight: 600; }
.dg-link text { text-decoration: underline; text-decoration-color: var(--line-strong); }
.dg-link:hover text { fill: var(--strong); }
.dg-either { stroke-dasharray: 6 4; }
.dg-cyl { stroke: var(--line-strong); stroke-width: 1; }
.dg-badge circle { fill: var(--warm); } .dg-badge text { fill: var(--bg); font: 800 11px var(--sans); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dg-clear, :root:not([data-theme="light"]) .dg-clearc img { filter: invert(1) hue-rotate(180deg); } }
:root[data-theme="dark"] .dg-clear, :root[data-theme="dark"] .dg-clearc img { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dg-stand { filter: drop-shadow(0 0 1px rgb(255 255 255 / 45%)); } }
:root[data-theme="dark"] .dg-stand { filter: drop-shadow(0 0 1px rgb(255 255 255 / 45%)); }
/* the parts under a drawing: real photos in an even grid */
.dg-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; margin-top: 1rem; }
.dg-partcard { margin: 0; display: grid; grid-template-rows: 5.5rem auto; gap: .35rem; padding: .5rem .4rem .55rem; border: 1px solid var(--line); text-align: center; }
.dg-partpic { display: flex; align-items: center; justify-content: center; gap: .2rem; height: 5.5rem; }
.dg-partpic img { display: block; max-width: 100%; max-height: 5.5rem; width: auto; height: auto; object-fit: contain; }
.dg-drops .dg-partpic img { max-width: 30%; }
.dg-partcard figcaption { display: grid; gap: .1rem; font-size: .75rem; line-height: 1.25; }
.dg-partcard b { color: var(--strong); font-weight: 600; } .dg-partcard span { color: var(--grey); }
.dg-cross { margin-top: 1.5rem; color: var(--grey); } .dg-cross a, .dg-key a, .dg-note a { color: var(--text); }
/* weeks 1 to 6 */
.dg-weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.dg-weeks li { display: grid; gap: .25rem; padding: .55rem .6rem .65rem; border: 1px solid var(--line); border-top: 3px solid var(--stg, var(--line)); font-size: .8125rem; line-height: 1.4; }
.dg-weeks li b { color: var(--stg, var(--strong)); font-weight: 700; }
.dg-weeks li.on { background: var(--raise); border-color: var(--line-strong); border-top-color: var(--stg); }
.dg-now { margin-left: .3rem; padding: .05rem .35rem; background: var(--strong); color: var(--bg); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; vertical-align: .1em; }
/* every test, as chips */
.dg-tkey { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-bottom: .6rem; font-size: .8125rem; }
.dg-tests { list-style: none; margin: 0; padding: 0; }
.dg-tests li { display: grid; grid-template-columns: 4.2rem repeat(4, minmax(0, 1fr)); gap: .35rem; align-items: center; padding: .4rem 0; border-top: 1px solid var(--line); font-size: .875rem; }
.dg-td { color: var(--grey); font-size: .8125rem; }
.dg-chip { display: inline-flex; align-items: center; gap: .35rem; color: var(--stg); font-weight: 700; font-variant-numeric: tabular-nums; }

/* open cabinet (10/14) */
.dg-inside { fill: #0c0e0d; fill-opacity: 1; stroke: #3a403d; stroke-dasharray: none; }
.dg-door { fill: #1b1e1d; stroke: #3a403d; stroke-width: 1.2; }
.dg-lbl { fill: #e9edea; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.dg-dim { opacity: .55; }
.dg-setupsvg, .dg-co2svg { max-height: 78dvh; }