/* tanks.css (2026-10-18, his asks). Loaded last on all three tank pages (/, /plakat, /betta: the 30A pages are written
   from index.html by sync/tank_30a_pages.py, so they share this file and look the same):
   - the tank switch with three tanks, each "UNS 75P / Community" etc. on two lines;
   - the water tests: symbol beside each name, a word for the number (safe / caution / danger), the zones on the charts;
   - the gear list as one even grid (same card, same picture box, same columns in every group);
   - motion: words rising into place, a word that changes in the intro title, lists that arrive one by one, chart lines
     that draw themselves, numbers that count up. All of it is off for prefers-reduced-motion (tanks.js adds tk-anim only
     when motion is allowed). */
:root { --tq-safe: #3fb27f; --tq-caution: #e3a43b; --tq-danger: #e2584a; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --tq-safe: #1f8a5a; --tq-caution: #a86a08; --tq-danger: #c13a2c; } }
:root[data-theme="light"] { --tq-safe: #1f8a5a; --tq-caution: #a86a08; --tq-danger: #c13a2c; }

/* ---------------------------------------------------------------- the tank switch: three tanks */
html .tswitch-row .tswitch { max-width: 100%; }
html .tswitch-row .tswitch a { display: grid; justify-items: center; gap: .05rem; padding: .45rem .95rem .5rem; line-height: 1.1; text-align: center; transition: background-color .35s var(--ease, ease), color .25s var(--ease, ease); }
html .tswitch-row .tswitch a small { font-size: .625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
@media (max-width: 26rem) { html .tswitch-row .tswitch a { padding: .45rem .7rem .5rem; font-size: .8125rem; } }

/* ---------------------------------------------------------------- water tests */
.tq-vials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 64rem) { .tq-vials { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tq-card { align-items: flex-start; padding: 1rem 1rem 1.05rem; }
.tq-card .vial { margin-top: .2rem; }
.tq-t { gap: .35rem; }
.tq-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.tq-name .vial-n { color: var(--strong); font-size: .9375rem; font-weight: 600; }
.tq-sym { color: var(--grey); font-size: .8125rem; font-weight: 500; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.tq-val { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; }
.tq-val b { color: var(--strong); font-size: 1.5rem; font-weight: 650; letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tq-st { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: 999px; font-size: .6875rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--tq-c, var(--grey)); background: color-mix(in srgb, var(--tq-c, var(--grey)) 15%, transparent); }
.tq-st::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.tq-safe { --tq-c: var(--tq-safe); } .tq-caution { --tq-c: var(--tq-caution); } .tq-danger { --tq-c: var(--tq-danger); }
.tq-acidic, .tq-neutral, .tq-alkaline { --tq-c: var(--c-ph, #6aa6f0); }
.tq-means { color: var(--grey); font-size: .8125rem; line-height: 1.4; }
.tq-minor .tq-val b { font-size: 1.25rem; }
#data .vial-when { margin-top: .6rem; color: var(--grey); }
#data .tc3-note, #data .ghkh-line, #data .tc3-wait { display: none; }
/* the charts: one per test, the same width, height and days; zones behind the line */
html.v4 #data #testchart.testcharts.stacked { display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: .75rem; }
@media (min-width: 56rem) { html.v4 #data #testchart.testcharts.stacked { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html #data .testcharts .cyc-mini { grid-column: 1 / -1; } }
html #data .tq-chart { width: auto; max-width: none; margin: 0 !important; padding: 1.1rem 1.1rem .95rem; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--grey) 8%, transparent); }
html #data .tq-card { border: 0; border-radius: 16px; background: color-mix(in srgb, var(--grey) 8%, transparent); }
.tq-svg .tc3-tx { font-size: 13px; }
.tq-chart .tc3-h { flex-wrap: wrap; row-gap: .3rem; }
.tq-chart .tc3-h b { margin-left: auto; font-size: 1rem; font-variant-numeric: tabular-nums; }
.tq-chart .tc3-h .tq-st { order: 9; }
.tq-zone { opacity: .1; } .tq-z-safe { opacity: .16; }
.tq-z-safe { fill: var(--tq-safe); } .tq-z-caution { fill: var(--tq-caution); } .tq-z-danger { fill: var(--tq-danger); }
.tq-z-soft { fill: var(--c-ph, #6aa6f0); opacity: .1; } .tq-z-hard { fill: var(--c-ph, #6aa6f0); opacity: .04; }
.tq-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tq-line-ammonia, .tq-dot-ammonia, .tq-pt-ammonia { stroke: var(--c-nh3); fill: var(--c-nh3); background: var(--c-nh3); }
.tq-line-nitrite, .tq-dot-nitrite, .tq-pt-nitrite { stroke: var(--c-no2); fill: var(--c-no2); background: var(--c-no2); }
.tq-line-nitrate, .tq-dot-nitrate, .tq-pt-nitrate { stroke: var(--c-no3); fill: var(--c-no3); background: var(--c-no3); }
.tq-line-ph, .tq-dot-ph, .tq-pt-ph { stroke: var(--c-ph); fill: var(--c-ph); background: var(--c-ph); }
.tq-line-tds, .tq-dot-tds, .tq-pt-tds { stroke: #248FD3; fill: #248FD3; background: #248FD3; }
path.tq-line { fill: none !important; }
.tq-svg circle { stroke: var(--bg, #000); stroke-width: 2; }
.tq-ex { display: grid; gap: .2rem; margin-top: .45rem; font-size: .8125rem; line-height: 1.4; }
.tq-ex p { margin: 0; color: var(--grey); }
.tq-key { color: var(--text) !important; font-weight: 500; }
.tq-rise b { color: var(--strong); font-weight: 600; }

/* ---------------------------------------------------------------- the gear list: one even grid */
html.v4 #kit .kgrid, html #kit .kgrid { --kc: 2 !important; grid-template-columns: repeat(var(--kc), minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 40rem) { html.v4 #kit .kgrid, html #kit .kgrid { --kc: 3 !important; } }
@media (min-width: 64rem) { html.v4 #kit .kgrid, html #kit .kgrid { --kc: 4 !important; } }
html.v4 #kit .kgrid > .kcard, html.v4 #kit .kgrid > .kcard-static:nth-child(3n+1):last-child { grid-column: auto; }
html.v4 #kit .kcard { grid-template-rows: auto 1fr; gap: 0; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--grey) 8%, transparent); transition: background-color .25s var(--ease, ease), transform .35s var(--ease, ease); }
html.v4 #kit .kcard:hover { background: color-mix(in srgb, var(--grey) 14%, transparent); }
html.v4 #kit .kpic { aspect-ratio: 1; padding: 13%; border-radius: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--grey) 14%, transparent), transparent) !important; }
html.v4 #kit .kpic img { width: 100%; height: 100%; object-fit: contain; }
html.v4 #kit .kname { padding: .7rem .85rem .85rem; font-size: .8125rem; font-weight: 500; line-height: 1.3; }
html.v4 #kit .kline { display: none; }
html.v4 #kit .khead { border: 0; padding: 0; }

/* ---------------------------------------------------------------- motion (tanks.js sets tk-anim; never with reduced motion) */
/* words rise into place, one after another */
html.tk-anim .tk-words .w { display: inline-block; opacity: 0; transform: translateY(.3em); transition: opacity .75s var(--ease, ease), transform .9s cubic-bezier(.16, 1, .3, 1), filter .75s var(--ease, ease); transition-delay: calc(var(--i, 0) * 60ms); }
html.tk-anim .tk-words.tk-on .w { opacity: 1; transform: none; filter: none; }
/* a word that changes in place (10/18 second version): the box is as wide as the word showing and slides to the next
   word's width; words are stacked at its left edge, the new one rises in, the old one rises out */
.tk-rot { position: relative; display: inline-block; vertical-align: bottom; white-space: nowrap; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; transition: width .55s cubic-bezier(.65, 0, .35, 1); }
.tk-rot-size { visibility: hidden; }
.tk-rot-w { position: absolute; left: 0; top: 0; white-space: nowrap; transition: opacity .45s var(--ease, ease), transform .6s cubic-bezier(.16, 1, .3, 1), filter .45s var(--ease, ease); }
.tk-rot-w:not(.on) { opacity: 0; transform: translateY(.75em); filter: blur(6px); }
.tk-rot-w.out { transform: translateY(-.75em); }
.tk-rot-w.on { color: var(--strong); }
/* lists and grids arrive one by one */
html.tk-anim .tk-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease, ease), transform .7s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 70ms); }
/* the two (or three) tank cards: together, a quick stagger, nothing late */
html.tk-anim .tk-pair.tk-stagger > * { transition-duration: .5s, .6s; transition-delay: calc(var(--i, 0) * 90ms); }
html.tk-anim .tk-stagger.tk-on > * { opacity: 1; transform: none; }
/* chart lines draw themselves, then the readings pop in */
html.tk-anim .tq-chart .tq-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1) .15s; }
html.tk-anim .tq-chart.tk-on .tq-line { stroke-dashoffset: 0; }
/* 10/23 calm pass: the line draws; the readings and the status are simply there (no pop) */



@keyframes tq-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
/* 10/22 night (Q194, a motion pass; timing from the huashu-motion technique notes): one entrance curve (ease-out expo)
   for sections and pictures; the water test rows rise as a set, each goal bar wipes in from the left, then the marker
   lands with a small settle; the pictures in the scape and gear cards settle from slightly large as their card arrives. */
html.v4 .rv.in { transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }
html.v4 .art-wait.on { transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1); }
/* 10/23 calm pass (his words: "a chart that changes four different ways is unclear"): a test row only fades up; its bar,
   marker and number are already in place */
html.tk-anim .tw.tw-wait { opacity: 0; transform: translateY(10px); }
html.tk-anim .tw.tw-wait.tw-in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.16, 1, .3, 1) var(--d, 0s), transform .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }
html.tk-anim :is(.scape, #kit .kgrid).tk-stagger > * :is(.sc-pic img, .kpic img) { transform: scale(1.06); transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 70ms + 80ms); }
html.tk-anim :is(.scape, #kit .kgrid).tk-stagger.tk-on > * :is(.sc-pic img, .kpic img) { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tk-rot, .tk-rot-w { transition: none; }
  .tw, .tw-m, .sc-pic img, .kpic img { opacity: 1 !important; transform: none !important; scale: none !important; clip-path: none !important; transition: none !important; }
  .tk-words .w, .tk-stagger > *, .tq-line, .tq-svg circle, .tq-st { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ---------------------------------------------------------------- the 30A pages: "stocking to come" */
.tk-tocome { display: grid; justify-items: center; gap: 1.1rem; margin: clamp(1rem, 4vw, 2rem) auto 0; max-width: 34rem; text-align: center; }
.tk-tocome .tk-slots { display: flex; gap: .7rem; }
.tk-tocome .tk-slots i { width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--grey) 55%, transparent); background: color-mix(in srgb, #248FD3 6%, transparent); }
html.tk-anim .tk-tocome .tk-slots i { animation: tk-breathe 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .35s); }
@keyframes tk-breathe { 0%, 100% { transform: scale(1); border-color: color-mix(in srgb, var(--grey) 55%, transparent); } 50% { transform: scale(1.08); border-color: #248FD3; } }
.tk-tocome p { margin: 0; color: var(--grey); font-size: .9375rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* ---------------------------------------------------------------- the 75P: celestial pearl danios lead (10/18, his favourite) */
html.v4 #stock-list .allfish > .entry.tk-fav { grid-column: 1 / -1 !important; background: radial-gradient(120% 100% at 25% 45%, color-mix(in srgb, #248FD3 18%, transparent), color-mix(in srgb, #248FD3 5%, transparent) 75%) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #248FD3 40%, transparent); }
html.v4 #stock-list .allfish > .entry.tk-fav .echip::after { content: " · The favourite"; }
html.v4 #stock-list .allfish > .entry.tk-fav .ename { font-size: clamp(1.25rem, 2.6vw, 1.75rem) !important; }
html.v4 #stock-list .allfish > .entry.tk-fav .epic { aspect-ratio: 16 / 7 !important; }
@media (min-width: 48rem) {
  html.v4 #stock-list .allfish > .entry.tk-fav { display: grid !important; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 1.5rem !important; padding: 1.25rem 1.75rem !important; }
  html.v4 #stock-list .allfish > .entry.tk-fav .epic { aspect-ratio: 16 / 8 !important; }
}
html.v4 #stock-list .entries.allfish.allfish:has(> .entry.tk-fav:first-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 46rem; justify-content: stretch; }
html.v4 #stock-list .entries.allfish:has(> .tk-fav) > .entry:not(.tk-fav) { grid-column: auto !important; justify-self: stretch !important; width: auto !important; max-width: none !important; }

/* ---------------------------------------------------------------- the two 30As as a pair (on /plakat and /betta) */
.tk-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.6rem, 2.5vw, 1.25rem); max-width: 44rem; margin: 0 auto; }
.tk-pt { position: relative; display: grid; gap: .2rem; padding-bottom: .9rem; border-radius: 18px; overflow: hidden; color: var(--strong); text-decoration: none; text-align: center; background: color-mix(in srgb, var(--grey) 8%, transparent); transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; }
.tk-pt[aria-current] { box-shadow: inset 0 0 0 2px #248FD3; }
.tk-pt:hover { transform: translateY(-3px); }
.tk-ptimg { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #111; }
.tk-ptimg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.tk-pt:hover .tk-ptimg img { transform: scale(1.04); }
.tk-pfish { position: relative; z-index: 1; display: block; width: 44%; margin: -15% auto .35rem; filter: drop-shadow(0 8px 16px rgb(0 0 0 / 45%)); }
.tk-pfish img { display: block; width: 100%; height: auto; }
/* 10/18: one box for each fish (betta, puffer, CPD differ in shape), so the cards' words line up */
.tk-pfish:not(.tk-psoon) { aspect-ratio: 720 / 543; display: flex; align-items: center; }
.tk-pfish:not(.tk-psoon) img { max-height: 100%; object-fit: contain; }
html.tk-anim .tk-pfish img { animation: tk-bob 4.6s ease-in-out infinite alternate; }
html.tk-anim .tk-pt + .tk-pt .tk-pfish img { animation-duration: 3.4s; animation-delay: -1.2s; }
@keyframes tk-bob { from { transform: translate(-4%, 2%) rotate(-2deg); } to { transform: translate(4%, -3%) rotate(2deg); } }
.tk-pt b { display: grid; gap: .1rem; font-size: clamp(1rem, 2.6vw, 1.25rem); font-weight: 650; letter-spacing: -.02em; }
.tk-pt b small { color: var(--grey); font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.tk-psay { color: var(--grey); font-size: .8125rem; }
.tk-pair-sec .tale { margin-bottom: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .tk-pfish img { animation: none !important; } .tk-pt, .tk-ptimg img { transition: none; } }
.tk-psoon { display: grid; justify-items: center; gap: .45rem; width: auto; margin: -2.1rem auto .35rem; filter: none; }
.tk-psoon i { width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--grey) 60%, transparent); background: var(--bg, #000); }
html.tk-anim .tk-psoon i { animation: tk-breathe 3.2s ease-in-out infinite; }
.tk-psoon em { color: var(--grey); font-size: .6875rem; font-style: normal; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.tk-tocome[hidden] { display: none; }

/* ---------------------------------------------------------------- the 75P CO2 picture: the drop checker on the LEFT glass (10/18), so its cup faces left */
.mk-k-drop img { transform: scaleX(-1); }

/* ---------------------------------------------------------------- "See other tanks": the swap (10/18) */
.tk-swap .tk-pt { cursor: pointer; }
.tk-swap .tk-pt::after { content: "→"; position: absolute; z-index: 2; right: .6rem; top: .6rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgb(0 0 0 / 65%); color: #fff; font-weight: 600; transition: transform .35s cubic-bezier(.16, 1, .3, 1), background-color .25s; }
.tk-swap .tk-pt:hover::after { background: #248FD3; }
.tk-swap .tk-pt:hover::after { transform: translateX(3px); }
.tk-pt.tk-going { transform: scale(.98); }
.tk-veil { position: fixed; inset: 0; z-index: 2147482999; background: #000; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.tk-veil.on { opacity: .85; }
.tk-swapfx { position: fixed; z-index: 2147483000; border-radius: 18px; background: #000 center / cover no-repeat; pointer-events: none;
  transition: left .6s cubic-bezier(.65, 0, .35, 1), top .6s cubic-bezier(.65, 0, .35, 1), width .6s cubic-bezier(.65, 0, .35, 1), height .6s cubic-bezier(.65, 0, .35, 1), border-radius .6s ease; }
.tk-swapfx.on { border-radius: 0; }

/* ---------------------------------------------------------------- headings: balanced lines, no one-word last line (10/18) */
html :is(h1, h2, h3, .intro-title, .intro-sub, .ch-sub, .tale p, .lede .head h2, .tk-pt b) { text-wrap: balance; }
html :is(p, li, figcaption, .tq-means, .esay, .kname) { text-wrap: pretty; }

/* ---------------------------------------------------------------- Day by day: step back through the days (10/18) */
.gr-strip { touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.gr-nav { display: flex; justify-content: center; gap: .6rem; margin-top: .9rem; }
.gr-nav[hidden] { display: none; }
.gr-go { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--grey) 16%, transparent); color: var(--strong); cursor: pointer; transition: background-color .2s, opacity .2s; }
.gr-go:hover:not(:disabled) { background: #248FD3; color: #fff; }
.gr-go:disabled { opacity: .3; cursor: default; }
.gr-go svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- the tests while the tank cycles (10/18) */
.tq-cycle { display: grid; gap: .35rem; margin: 0 0 .9rem; padding: 1rem 1.1rem; border-radius: 16px; background: color-mix(in srgb, #248FD3 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #248FD3 35%, transparent); }
.tq-cycle p { margin: 0; }
.tq-cy-t b { color: var(--strong); font-size: 1.125rem; font-weight: 650; letter-spacing: -.02em; }
.tq-cy-when { color: var(--grey); font-size: .875rem; }
.tq-cy-pr { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-top: .2rem; }
.tq-cy-dots { display: inline-flex; gap: .3rem; }
.tq-cy-dots i { width: .75rem; height: .75rem; border-radius: 50%; border: 1.5px solid color-mix(in srgb, #248FD3 70%, transparent); }
.tq-cy-dots i.on { background: #248FD3; border-color: #248FD3; }
.tq-cy-n { color: var(--text); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tq-cyc { --tq-c: #248FD3; } .tq-muted { --tq-c: var(--grey); }
.tq-wait .tq-none { font-size: 1rem !important; font-weight: 600; color: var(--grey) !important; }
.tq-wait .vial { opacity: .5; }
.tq-cy-co2 { color: var(--text); font-size: .875rem; font-weight: 600; }
.tq-cy-co2::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; border-radius: 50%; background: var(--tq-safe); vertical-align: .05em; }
.tk-co2on { display: inline-flex; align-items: center; gap: .45rem; margin: .9rem 0 0; padding: .35rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--tq-safe) 14%, transparent); color: var(--strong); font-size: .8125rem; font-weight: 600; }
.tk-co2on i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--tq-safe); }
html.tk-anim .tk-co2on i { animation: tk-pulse 2.4s ease-in-out infinite; }
@keyframes tk-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tq-safe) 50%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
html.v4 #stock-list .entries.allfish.allfish:has(> .entry.tk-fav) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 60rem; }
@media (min-width: 48rem) { html.v4 #stock-list .entries.allfish.allfish:has(> .entry.tk-fav) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* ---------------------------------------------------------------- the storm's sound toggle (10/18) */
.sl-play, .storm-tog { display: inline-flex; align-items: center; gap: .4rem; }
.sl-play svg, .storm-tog svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-play svg path:first-child, .storm-tog svg path:first-child { fill: currentColor; stroke: none; }
.storm-fab { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 60; }
.storm-fab[hidden] { display: none; }
.storm-tog { min-height: 2.5rem; padding: 0 .95rem; border: 0; border-radius: 999px; background: rgb(18 22 26 / 82%); color: #fff; font: 600 .8125rem/1 var(--sans, system-ui); cursor: pointer; box-shadow: 0 6px 20px rgb(0 0 0 / 35%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.storm-tog[aria-pressed="true"] { background: #248FD3; }
.storm-tog::before { content: "Storm"; padding-right: .5rem; margin-right: .1rem; border-right: 1px solid rgb(255 255 255 / 30%); opacity: .85; }

/* ---------------------------------------------------------------- temperature colours and the heater (10/18) */
.tq-top { --tz: var(--tq-safe); }
.tq-top.tz-near { --tz: var(--tq-caution); } .tq-top.tz-out { --tz: var(--tq-danger); } .tq-top.tz-cold { --tz: var(--chum-text, #1A74B0); }
/* 10/23 calm pass: cold below the range (blue), the range green, too warm above it (red) */
.tq-top .tq-track { background: linear-gradient(90deg, color-mix(in srgb, var(--chum, #248FD3) 34%, transparent) 0 var(--b0, 0%), transparent var(--b0, 0%) var(--b1, 100%), color-mix(in srgb, var(--tq-danger) 30%, transparent) var(--b1, 100%) 100%), color-mix(in srgb, var(--grey) 14%, transparent); }
.tq-top .tq-n, .tq-top .tq-u { color: var(--tz); }
.tq-top .tq-band { background: color-mix(in srgb, var(--tq-safe) 70%, transparent); }
.tq-top .tq-edge { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--tq-caution) 85%, transparent); }
.tq-top .tq-now { background: var(--tz); }
.tq-top .tq-now b { color: var(--tz); }
.tq-top .tq-say { color: var(--tz); font-weight: 600; }
.tq-top .tq-tlab { color: var(--text); font-weight: 600; }
.tl-safe { fill: var(--tq-safe) !important; opacity: .16 !important; }
.tl-edge { fill: var(--tq-caution); opacity: .22; }
.tl-out { fill: var(--tq-danger); opacity: .08; }
.tl-dot.tz-in { fill: var(--tq-safe); } .tl-dot.tz-near { fill: var(--tq-caution); } .tl-dot.tz-out { fill: var(--tq-danger); }
.tq-heat { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .6rem; margin-top: .85rem; }
.tq-hst, .tq-hset { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; line-height: 1.2; }
.tq-hst::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.hs-heating { color: var(--tq-caution); background: color-mix(in srgb, var(--tq-caution) 15%, transparent); }
.hs-holding { color: var(--tq-safe); background: color-mix(in srgb, var(--tq-safe) 15%, transparent); }
.hs-off { color: var(--tq-danger); background: color-mix(in srgb, var(--tq-danger) 15%, transparent); }
.tq-hset { color: var(--text); background: color-mix(in srgb, var(--grey) 14%, transparent); }

/* ---------------------------------------------------------------- spacing pass (10/18, his ask: "cluttered, pushed together").
   One scale: .5 / .75 / 1 / 1.5 / 2.5 rem inside sections; section breaks keep story.css's --s-sec. Small refinements only. */
html.v4 { --sp1: .5rem; --sp2: .75rem; --sp3: 1rem; --sp4: 1.5rem; --sp5: 2.5rem; }
/* body text: a little more air between lines */
html.v4 :is(.esay, .tq-means, .tq-ex p, .tq-cy-when, .kd-is, .kd-does, .about p, .rolesay, .tk-psay, .sc-cut span, .dg-key li) { line-height: 1.55; }
html.v4 .about p + p { margin-top: var(--sp3); }
/* the heading block to its content */
html.v4 .lede { margin-bottom: clamp(2.5rem, 6.5vw, 4rem); }
html.v4 .lede .tale p + p { margin-top: clamp(.85rem, 2.2vw, 1.2rem); }
/* cards: more room inside and between */
html.v4 .tq-vials { gap: var(--sp2); }
@media (min-width: 40rem) { html.v4 .tq-vials { gap: var(--sp3); } }
html #data .tq-card { padding: 1.15rem 1.15rem 1.2rem; gap: .85rem; }
.tq-t { gap: .45rem; }
.tq-val { gap: .45rem .65rem; }
html.v4 #data .vial-when { margin-top: var(--sp3); }
.tq-cycle { margin-bottom: var(--sp4); padding: 1.15rem 1.25rem; gap: .5rem; }
html.v4 #stock-list .entries.allfish.allfish { gap: var(--sp3) !important; }
html.v4 #stock-list .entry { padding: 1.05rem !important; gap: .6rem !important; }
html.v4 #kit .kgrid { gap: var(--sp3); }
html.v4 .kgrp + .kgrp { margin-top: var(--sp5); }
html.v4 #kit .khead { margin-bottom: var(--sp3); }
.tk-pair { gap: var(--sp3); }
.tk-pt { gap: .3rem; padding-bottom: 1.15rem; }
.tk-pt b { margin-top: .15rem; }
/* charts: room around and inside */
html.v4 #data #testchart.testcharts.stacked { gap: var(--sp3); margin-top: var(--sp5); }
html #data .tq-chart { padding: 1.25rem 1.25rem 1.1rem; }
.tq-svg { margin-top: var(--sp2) !important; }
.tq-ex { margin-top: var(--sp2); gap: .35rem; }
html.v4 .cyc-mini { margin-bottom: var(--sp2); gap: .5rem .75rem; flex-wrap: wrap; }
html.v4 .tq-chart > .tq-h, html.v4 #temp-page .tq-h { margin-bottom: var(--sp2); }
html.v4 #temp-page > * + * { margin-top: var(--sp5); }
/* pills and chips: never touching */
.tq-heat { gap: .6rem .75rem; margin-top: var(--sp3); }
.tk-co2on { margin-top: var(--sp3); }
html.v4 .sl-storm, html.v4 .sl-btns { gap: .6rem; }
/* the week grids (care, feeding): labels no longer run into the day cells on a phone */
html.v4 .wk7 { gap: .5rem; }
html.v4 .wk7-row { gap: .3rem; }
@media (max-width: 30rem) {
  html.v4 .wk7-row { grid-template-columns: minmax(6.25rem, 1.5fr) repeat(7, minmax(0, 1fr)); }
  html.v4 .wk7-l b { white-space: normal; font-size: .875rem; line-height: 1.15; }
  html.v4 .wk7-l small { white-space: normal; line-height: 1.25; }
}
/* the stocking plan: more room per row */
html.v4 #gantt .g-row { padding-block: .7rem; }
/* the scape and the gear picture: a little more room between pieces */
html.v4 ul.scape { gap: var(--sp4) var(--sp3) !important; }
html.v4 #gantt .g-row, html.v4 #gantt .g-axis { border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; }
html.v4 #stocking .plangrid, html.v4 #gantt { border-top: 0 !important; border-bottom: 0 !important; }

/* ---------------------------------------------------------------- tank types (10/18, his words) */
.intro-type { margin: 0 0 .6rem; color: #248FD3; font-size: clamp(.75rem, 1.8vw, .875rem); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
html .tswitch-row .tswitch a .ts-type { display: none; font-style: normal; font-size: .625rem; font-weight: 500; letter-spacing: .02em; opacity: .8; white-space: nowrap; }
@media (min-width: 48rem) { html .tswitch-row .tswitch a .ts-type { display: block; margin-top: .15rem; } }
@media (min-width: 48rem) { .tswitch-end .ts-say { display: none; } }
.tk-ptype { color: #248FD3; font-size: .625rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
/* 10/22 later (his ask: "explain the water goal and visualize it"): the water tests as a plain list, one test per row:
   name and reading, one status word, a bar with the goal green and the rest tinted, a marker at the reading, one sentence. */
.tw-list { list-style: none; display: grid; gap: clamp(2rem, 5vw, 2.75rem); max-width: 38rem; margin: var(--sp4, 1.5rem) auto 0; padding: 0; text-align: left; }
.tw { --tw-c: var(--grey); }
.tw-at { --tw-c: var(--tq-safe); } .tw-close { --tw-c: var(--tq-caution); } .tw-off { --tw-c: var(--tq-danger); }
.tw-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tw-top h3 { margin: 0; font-size: 1.1875rem; font-weight: 650; letter-spacing: -.015em; color: var(--strong); }
.tw-n { font-size: clamp(1.75rem, 5vw, 2.125rem); font-weight: 650; letter-spacing: -.035em; line-height: 1; color: var(--tw-c); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tw-n small { font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--grey); }
.tw-st { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; margin: .3rem 0 0; font-size: .875rem; }
.tw-w { color: var(--tw-c); font-weight: 650; }
.tw-tr { color: var(--grey); }
.tw-bar { position: relative; margin: .85rem .5rem 0; }
.tw-track { position: relative; height: .625rem; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--grey) 14%, transparent); }
.tw-z { position: absolute; top: 0; bottom: 0; }
.tw-z-at { background: color-mix(in srgb, var(--tq-safe) 70%, transparent); }
.tw-z-close { background: color-mix(in srgb, var(--tq-caution) 26%, transparent); }
.tw-z-off { background: color-mix(in srgb, var(--tq-danger) 26%, transparent); }
.tw-m { position: absolute; top: 50%; width: 1.125rem; height: 1.125rem; margin: -.5625rem 0 0 -.5625rem; border-radius: 50%; background: var(--tw-c); box-shadow: 0 0 0 3px var(--bg, #fff); }
.tw-gl { position: relative; height: 1.1rem; margin: .35rem .5rem 0; }
.tw-gl span { position: absolute; top: 0; white-space: nowrap; color: var(--tq-safe); font-size: .75rem; font-weight: 600; }
.tw-say { margin: .5rem 0 0; color: var(--text); font-size: .9375rem; line-height: 1.45; text-wrap: pretty; }
.tw-cnt { color: var(--chum-text, #248FD3); }
/* 10/22 (his ask): the tank switcher pill mid-page read as random; a quiet black screen that points down, and to
   the other tanks. 10/22 later: "more open area. simpler" -> taller, smaller lighter words, a plain text link */
.tank-gate { display: grid; place-content: center; justify-items: center; gap: .6rem; padding: 2.5rem 16px; background: #000; color: #fff; text-align: center; }
.tank-gate .tg-say { margin: 0; max-width: 22ch; font-size: clamp(1.125rem, 2.4vw, 1.5rem); font-weight: 400; letter-spacing: -.01em; line-height: 1.35; color: rgba(255,255,255,.72); }
.tank-gate .tg-link { border: 0; padding: .25rem .5rem; background: none; color: #248FD3; font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; }
.tank-gate .tg-link::after { content: " \2192"; }
.tank-gate .tg-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 10/23 (his words: "zooms into a very pixelated picture"): the photo grows to its own size at most, over the page's colour */
.tk-swapfx { background-color: transparent; background-size: contain; }
.tk-swapfx.on { border-radius: 18px; }
.tk-veil { background: var(--bg, #000); }
.tk-veil.on { opacity: 1; }