/* pass.css (2026-10-14 late night, his review): the UNS mock-up (mock.js), the Setup list in groups, the Schedule for
   phones, the CO2 history strip, the daily photos' labels, photo credits folded at the foot. Loaded last. */

/* ---------------------------------------------------------------- the mock-up */
.mk { margin: 0; }
.mk-stage { position: relative; width: 100%; max-width: 24rem; margin: 0 auto; container-type: inline-size; }
.mk-base { position: relative; display: block; width: 100%; height: auto; }
.mk-in { position: absolute; background: linear-gradient(180deg, #171917, #0c0d0c); box-shadow: inset 0 0 0 1px #000, inset 0 10px 24px rgb(0 0 0 / 70%); opacity: 0; transition: opacity .4s ease; }
.open-L .mk-in-L, .open-R .mk-in-R { opacity: 1; }
.mk-p { position: absolute; z-index: 2; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.mk-p img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 35%)); transition: transform .2s ease; }
.mk-p:hover img, .mk-p:focus-visible img { transform: scale(1.06); }
.mk-p:focus-visible { outline: 2px solid var(--chum); outline-offset: 2px; }
.mk-p::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); padding: .2rem .45rem; background: rgb(12 14 13 / 88%); color: #fff; font-size: .625rem; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 6; }
.mk-p:hover::after, .mk-p:focus-visible::after { opacity: 1; }
.mk-tank { z-index: 1; }
.mk-tank.mk-k-tree img { filter: none; }
/* what sits in a compartment shows only while its door is open */
.mk-L, .mk-R { opacity: 0; pointer-events: none; transition: opacity .35s ease .2s; }
.open-L .mk-L, .open-R .mk-R { opacity: 1; pointer-events: auto; }
.mk-door { position: absolute; z-index: 4; padding: 0; border: 0; border-radius: 0; background-image: url("img/rig/rig.webp"); background-repeat: no-repeat; cursor: pointer; transition: transform .7s cubic-bezier(.3, .7, .2, 1), box-shadow .7s ease; backface-visibility: hidden; }
.mk-stage { perspective: 1600px; }
.mk-door-L { transform-origin: 0 50%; }
.mk-door-R { transform-origin: 100% 50%; }
.open-L .mk-door-L { transform: rotateY(-100deg); }
.open-R .mk-door-R { transform: rotateY(100deg); }
.mk-door:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%); }
.mk-door:focus-visible { outline: 2px solid var(--chum); outline-offset: -2px; }
.mk-plan { position: absolute; z-index: 2; left: 21.5%; top: 38.6%; width: 8%; height: 3.7%; border: 1.5px dashed var(--chum); border-radius: 0 0 40% 40%; }
.mk-plan span { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); color: var(--chum-text); font-size: .5625rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.mk-badge { position: absolute; z-index: 5; transform: translate(-50%, -50%); display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--chum); color: #fff; font-size: .6875rem; font-weight: 600; box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.mk-say { margin: .8rem 0 0; color: var(--grey); text-align: center; min-height: 1.4em; }
.mk-host { margin: 0 0 1.25rem; }
.mk-host .mk-stage { max-width: 20rem; }

/* ---------------------------------------------------------------- Setup: mock beside the list */
.setup2 { display: grid; gap: 2rem; }
@media (min-width: 60rem) {
  .setup2 { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 3rem; align-items: start; }
  .mk-col { position: sticky; top: calc(var(--bar, 4rem) + 1rem); }
}
#kit { display: grid; gap: 2.25rem; min-width: 0; }
.kgrp { min-width: 0; }
.khead { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .85rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
html.site #kit .khead h3, .khead h3 { margin: 0; font-family: inherit; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.khead .tag { margin: 0; }
/* columns follow the count so no row is left with one card (balance): 4 and 8 go two or four across, 3, 6 and 9 three */
.kgrid { --kc: 3; display: grid; grid-template-columns: repeat(var(--kc), minmax(0, 1fr)); gap: 1.1rem .7rem; }
.kgrid[data-n="2"], .kgrid[data-n="4"], .kgrid[data-n="8"] { --kc: 2; }
@media (min-width: 44rem) { .kgrid[data-n="4"], .kgrid[data-n="8"] { --kc: 4; } .kgrid[data-n="5"] { --kc: 5; } }
@media (min-width: 60rem) and (max-width: 79.99rem) { .kgrid[data-n="4"], .kgrid[data-n="8"] { --kc: 2; } .kgrid[data-n="5"] { --kc: 3; } }
.kcard { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: .35rem; min-width: 0; color: inherit; text-decoration: none; }
.kpic { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; aspect-ratio: 1; padding: 12%; min-width: 0; overflow: hidden; background: color-mix(in srgb, var(--line) 45%, transparent); }
.kpic img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 3px 6px rgb(0 0 0 / 14%)); transition: transform .25s ease; }
a.kcard:hover .kpic img { transform: scale(1.04); }
.kname { font-size: .75rem; line-height: 1.35; color: var(--strong); overflow-wrap: anywhere; }
.kline { font-size: .75rem; line-height: 1.35; color: var(--grey); font-style: italic; }
.kstore { font-size: .5625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--chum-text); }
.kwidepic { padding: 1.25rem 8%; background: color-mix(in srgb, var(--line) 45%, transparent); }
.kwidepic img { display: block; width: 100%; height: auto; max-height: 15rem; object-fit: contain; }
.knames { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .35rem 1rem; font-size: .8125rem; }
.knames a { color: var(--strong); text-decoration-color: var(--line-strong); }
/* the old setup pieces are gone from this page */
#hardware #setup-photo, #hardware #cabinet, #hardware #gear, #hardware #setup-specs, #hardware #setup-view { display: none !important; }

/* ---------------------------------------------------------------- Schedule, for phones */
.sc-now { display: grid; gap: .15rem; margin: 0 0 1.5rem; }
.sc-clock { font-family: var(--serif, serif); font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); line-height: 1.05; color: var(--strong); }
.sc-state { color: var(--chum-text); font-weight: 600; }
.sc-bar { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .6rem; align-items: stretch; padding-top: 1.6rem; }
.sc-labs { display: grid; grid-template-rows: 1.1rem .7rem; row-gap: .45rem; font-size: .6875rem; color: var(--grey); }
.sc-labs span { line-height: 1.1rem; } .sc-labs span + span { line-height: .7rem; }
.sc-tracks { position: relative; display: grid; grid-template-rows: 1.1rem .7rem; row-gap: .45rem; }
.sc-track { position: relative; overflow: hidden; border-radius: 2px; }
.sc-pin { position: absolute; top: -1.6rem; bottom: -.3rem; width: 0; border-left: 2px solid var(--strong); z-index: 2; }
.sc-pin.end span { left: auto; right: -2px; transform: none; } .sc-pin.start span { left: -2px; transform: none; }
.sc-pin span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: .05rem .4rem; background: var(--strong); color: var(--bg); font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sc-axrow { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .6rem; margin-top: .4rem; }
.sc-axis { position: relative; height: 1rem; font-size: .625rem; color: var(--grey); }
.sc-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.sc-axis span:first-child { transform: none; } .sc-axis span:last-child { transform: translateX(-100%); }
.sc-key { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .9rem 0 0; font-size: .75rem; color: var(--grey); }
.sc-key span { display: inline-flex; align-items: center; gap: .4rem; }
.sc-key .sb { position: static; display: inline-block; width: .9rem; height: .6rem; }
.sc-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.sc-list li { position: relative; display: grid; grid-template-columns: 5.8rem minmax(0, 1fr); gap: .75rem; padding: .55rem 0 .55rem 1rem; }
.sc-list li::before { content: ""; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--bg); border: 2px solid var(--chum); }
.sc-list li.past { color: var(--grey); } .sc-list li.past::before { border-color: var(--line-strong); background: var(--line-strong); }
.sc-t { font-variant-numeric: tabular-nums; color: var(--grey); }
.sc-list .sc-nowrow { color: var(--strong); font-weight: 700; }
.sc-list .sc-nowrow::before { background: var(--strong); border-color: var(--strong); }
.sc-list .sc-nowrow::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--strong); opacity: .25; z-index: -1; }
.sc-nowrow .sc-t { color: var(--strong); }
.sc-other { margin: .9rem 0 0; color: var(--grey); }
.sc-up { display: grid; gap: .9rem; }
.sc-day { display: grid; grid-template-columns: 6.9rem minmax(0, 1fr); gap: .75rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.sc-day:last-child { border-bottom: 0; }
.sc-day b { font-weight: 600; color: var(--strong); white-space: nowrap; }
.sc-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.sc-day li { display: flex; align-items: center; gap: .5rem; }
.sc-day li i { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--k-ms); }
.sc-day li.k-test i { background: var(--k-test); } .sc-day li.k-wc i { background: var(--k-wc); } .sc-day li.k-co2 i { background: var(--grey); }
.sc-day li.done { color: var(--grey); }
#schedule .subh { margin-top: 2.25rem; }
@media (min-width: 60rem) { #sched { max-width: 44rem; } }

/* ---------------------------------------------------------------- CO2: drop checker photo, history strip */
.dc-photo { display: grid; place-items: center; width: 8.5rem; aspect-ratio: 1; padding: .6rem; background: color-mix(in srgb, var(--line) 45%, transparent); }
.dc-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
#co2 .dgsec-first { margin-top: 0; }
.ch-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 6.5rem; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity; }
.ch-day { display: grid; gap: .3rem; padding: 0; border: 0; background: none; color: var(--grey); font: inherit; font-size: .6875rem; cursor: zoom-in; scroll-snap-align: end; }
.ch-day img { width: 100%; aspect-ratio: 1; object-fit: cover; border-bottom: 3px solid var(--dc, transparent); }

/* ---------------------------------------------------------------- Photos: day by day, any shape */
.dv-shot { gap: .1rem; }
.dv-shot img { aspect-ratio: 1 !important; object-fit: cover; }
.dv-shot span { color: var(--strong); font-size: .6875rem; }
.dv-shot small { color: var(--grey); font-size: .625rem; }
.dv-shot.on span { color: var(--chum-text); }
.dv-row { grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)) !important; max-width: 40rem; margin-left: auto; margin-right: auto; }
.dv-big img { max-height: min(70dvh, 40rem) !important; min-height: 0 !important; }
.dv-big figcaption { margin-top: .6rem; }

/* ---------------------------------------------------------------- Ecosystem: the fish in the UNS mock-up's glass */
.swim-crop { aspect-ratio: 711 / 428 !important; background: color-mix(in srgb, var(--line) 30%, transparent); }
.swim-crop > img:first-child { width: 108% !important; left: -3.9% !important; top: -118% !important; }

/* ---------------------------------------------------------------- Controls: the original picture again */
html.site #controls .rig { width: min(100%, 17rem); }

/* ---------------------------------------------------------------- photo credits, folded at the foot */
.footlinks { display: grid; gap: .6rem; }
.creditsfold > summary { cursor: pointer; color: var(--grey); font-size: .8125rem; list-style: none; }
.creditsfold > summary::-webkit-details-marker { display: none; }
.creditsfold > summary::before { content: "+"; display: inline-block; width: 1em; color: var(--chum-text); }
.creditsfold[open] > summary::before { content: "–"; }
.creditsfold #credits { margin-top: 1rem; }

/* ---------------------------------------------------------------- About and section spacing */
html.site #about .about { max-width: 38rem; }
html.site #about .about p { margin: 0 0 1rem; }
html.site #about .about-sig { margin-top: 1.25rem; color: var(--grey); }

/* ---------------------------------------------------------------- GH and KH beside the four tests */
:root { --c-gh: #d39a3c; --c-kh: #4fb3b0; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --c-gh: #9a6418; --c-kh: #1f7f7c; } }
:root[data-theme="light"] { --c-gh: #9a6418; --c-kh: #1f7f7c; }
.stg-gh { --stg: var(--c-gh); } .stg-kh { --stg: var(--c-kh); }
.tc.tc-wait { opacity: .75; }
.tc-starts { margin: .5rem 0 0; color: var(--grey); }
.fit-wait { margin: 0 0 1.5rem; }
.fit-wait .label { margin: 0 0 .25rem; }
.howtest { margin: -.6rem 0 1.4rem; font-size: .8125rem; }
html.site #about .about { margin-top: 0; padding-top: 0; border-top: 0; }
html.site #about .about-sig { margin-top: .25rem !important; }
/* day picker: arrows beside the days, close under the label; the photo right under */
html.site #days .dp { grid-template-columns: auto auto auto; justify-content: center; gap: .75rem; margin-bottom: .75rem; }
html.site #days .dp-arrow { width: 2.25rem; height: 2.25rem; }
html.site #days .dayview { margin-top: 0; }
html.site #days .label { margin-top: 2rem; }
.mk { overflow-x: clip; }
.mk-p.tip-r::after { left: auto; right: 0; transform: none; }
.mk-p.tip-l::after { left: 0; transform: none; }
/* Filter: the heater line sits beside a short picture, not a tall one */
html.site .heaterfig { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 1rem; align-items: center; max-width: 30rem; margin: 1.5rem 0; }
html.site .heaterfig img { width: 1.6rem; height: auto; max-height: 9rem; object-fit: contain; }
.sc-done { color: var(--ok, #4c9a3c); font-weight: 700; }