/* site.css (2026-10-14 night): the full top nav, separate pages and a home hub. Loaded LAST; overrides the side-by-side
   "pager" layout of pager.css / zen.css, which stay for every page's own look. html carries "pager fullview site",
   plus "home" on the home page (pager.js) and "is-admin" under /admin/.
   Buttons copy the look of his barbershop site: square, small spaced capitals, a hairline outline, filled when primary. */

/* ---------------------------------------------------------------- the document scrolls like any site */
html.site, html.site body { height: auto; overflow: visible; }
html.site body { display: block; min-height: 100dvh; background: var(--bg); }
html.site main { display: block; }
html.site .pages { position: static; overflow: visible; perspective: none; border: 0; min-height: 0; }
html.site .page { position: static; display: none; overflow: visible; padding: clamp(1.75rem, 4vw, 3rem) 0 4rem; animation: none !important; background: none; }
html.site .page.on { display: block; }
html.site .page[hidden] { display: none !important; }
html.site .page .wrap, html.pager.fullview.site .page .wrap { max-width: 64rem; margin: 0 auto; padding: 0 var(--pad); }
html.site .sizer, html.site .morehint, html.site .pagefoot, html.site .bar-mode, html.site .datebk { display: none !important; }
html.site:not(.is-admin) .adminonly { display: none !important; }

/* ---------------------------------------------------------------- the bar: logo, the full nav, the theme icon */
html.site .top { position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; min-height: var(--bar); padding: 0 var(--pad); background: var(--bar-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
html.site .brand { display: inline-flex; align-items: center; gap: .55rem; margin: 0; min-height: var(--bar); text-decoration: none; color: var(--strong); }
.brand-logo { display: block; width: 1.5rem; height: 1.5rem; border-radius: 50%; }
html.site .brand-name { font-family: var(--sans); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: lowercase; }
html.site .nav { position: static; grid-area: auto; display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 0; min-width: 0; max-height: none; padding: 0; margin: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: none; border: 0; visibility: visible; opacity: 1; transform: none; }
html.site .nav::-webkit-scrollbar { display: none; }
html.site .nav a, html.pager.site .nav a { flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .55rem; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--grey); font-size: .625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
html.site .nav a + a { border-top: 0; }
html.site .nav a:hover { color: var(--strong); }
html.site .nav a[aria-current="page"], html.pager.site .nav a[aria-current="page"] { color: var(--strong); background: none; border-bottom-color: var(--strong); }
html.site .nav a[hidden] { display: none; }
.themebtn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; background: none; border: 1px solid var(--line-strong); border-radius: 0; color: var(--strong); cursor: pointer; transition: border-color .2s var(--ease); }
.themebtn:hover { border-color: var(--strong); }
html.site .adminbadge { order: 2; flex: none; }
@media (min-width: 75rem) { html.site .nav { flex: 1 1 0; justify-content: flex-start; } html.site .nav::before { content: ""; margin-left: auto; } }
html.site .menu-btn { display: none !important; }
/* below desktop width the nav takes its own row under the logo and scrolls sideways */
@media (max-width: 74.99rem) {
  html.site .brand { margin-right: auto; }
  html.site .nav { order: 5; flex-basis: 100%; justify-content: flex-start; margin: 0 calc(var(--pad) * -1); padding: 0 calc(var(--pad) - .55rem); border-top: 1px solid var(--line); }
  html.site .themebtn { order: 3; }
}

/* ---------------------------------------------------------------- the camera on every page (10/14 night: "lost its SPA tank / sidebar feel")
   Wide: a sticky column on the left, the page scrolls beside it. Phone: on top, it tucks into a corner once scrolled past. */
html.pager.fullview.site .tankside { display: block; position: static; inset: auto; width: auto; height: auto; aspect-ratio: auto; max-width: none; margin: 0; padding: 1rem var(--pad) 0; background: none; border: 0; box-shadow: none; overflow: visible; z-index: auto; }
html.pager.fullview.site .tankside > .modenow { display: flex; }
html.pager.fullview.site .tankside .viewslot { width: 100%; height: auto; margin: 0 auto; aspect-ratio: 16 / 9; }
html.pager.fullview.site .tankside .viewslot button, html.pager.fullview.site .tankside .cams { pointer-events: auto; }
html.pager.fullview.site .tankside .fs, html.pager.fullview.site .tankside .roombtn { display: inline-flex; }
html.pager.fullview.site .tankside .view.dock .undock { display: grid; }
html.site .view.dock { aspect-ratio: var(--ar, 16 / 9) !important; height: auto !important; }
@media (min-width: 60rem) {
  html.site main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(30rem, 46rem); align-items: start; }
  html.pager.fullview.site .tankside { position: sticky; top: var(--bar); max-height: calc(100dvh - var(--bar)); padding: 1.5rem clamp(1.25rem, 2.5vw, 2.5rem); border-right: 1px solid var(--line); }
  html.pager.fullview.site .tankside .viewslot { width: min(100%, calc((100dvh - var(--bar) - 7rem) * 1.42)); }
  html.site .page .wrap, html.pager.fullview.site .page .wrap { max-width: none; padding: 0 clamp(1.25rem, 2.5vw, 2.5rem); }
  html.site .hub { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); }
}
@keyframes pg-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.site .page.on.fadein { animation: pg-fade .28s var(--ease) both !important; }
@media (prefers-reduced-motion: reduce) { html.site .page.on.fadein { animation: none !important; } }
html.site .tankside .modenow { justify-content: center; gap: .55rem; margin: 0; padding: .9rem 0 0; border: 0; text-align: center; }
html.site .tankside .modenow .modedot { display: block; width: .5rem; height: .5rem; box-shadow: none; animation: none; }
html.site .tankside .modenow .modedot.off { background: var(--line-strong); border: 0; }
html.site .tankside .modename, html.pager.site .tankside .modename { font-family: var(--sans); font-size: .9375rem !important; font-weight: 400 !important; color: var(--text); }
html.site .tankside #mode-sub:empty { display: none; }
html.site .tankside .modename:empty + .small:empty { display: none; }
html.site .modenow:has(.modename:empty) { visibility: hidden; }

html.site .page-now { padding-top: clamp(2rem, 5vw, 3.5rem); }
html.site .page-now .hero, html.pager.site .page-now .hero { margin: 0; max-width: none; font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem) !important; line-height: 1.25; color: var(--strong); }
html.site .page-now .dayline { display: block; margin: .35rem 0 0; color: var(--grey); }
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0 2rem; margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.hubtile { display: grid; gap: .2rem; padding: 1rem 0 1.05rem; border-top: 1px solid var(--line); color: var(--strong); text-decoration: none; transition: border-color .2s var(--ease); }
.hubtile .hn { font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; }
.hubtile .hs { color: var(--grey); font-size: .8125rem; }
.hubtile:hover, .hubtile:focus-visible { border-top-color: var(--strong); }
html.site .page-now .foot { margin-top: 3.5rem; padding: 1.25rem 0 0; border-top: 1px solid var(--line); }
html.site .page-now .foot .wrap { padding: 0; }

/* ---------------------------------------------------------------- buttons: the barbershop look */
.pause, .modepick .go, html.site .foot button, html.site .adminbadge button, html.site .view .fs, html.site .view .roombtn, html.site .cams button, html.site .twin button, html.site .cal button, html.site .act {
  border-radius: 0 !important; font-family: var(--sans); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.pause, .modepick .go { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .5rem 1.1rem; background: var(--strong); color: var(--bg); border: 1px solid var(--strong); font-size: .6875rem; cursor: pointer; }
.pause:hover, .modepick .go:hover { background: transparent; color: var(--strong); }
html.site .foot button, html.site .adminbadge button { min-height: 2.25rem; padding: .3rem .9rem; background: transparent; color: var(--strong); border: 1px solid var(--line-strong); font-size: .625rem; }
html.site .foot button:hover, html.site .adminbadge button:hover { border-color: var(--strong); }
html.site .view .fs, html.site .view .roombtn { font-size: .5625rem; }

/* ---------------------------------------------------------------- water tests: one chart per test, stacked */
html.site #data .testcharts.stacked { grid-template-columns: minmax(0, 1fr) !important; gap: 1.75rem; margin-bottom: 1rem; }
html.site #data .tc { padding-top: .75rem; }
html.site #data .tc svg { max-height: none; height: auto; width: 100%; }
html.site #data .label { margin-top: 2.25rem; }

/* ---------------------------------------------------------------- Setup: the cabinet with doors that open */
.cabinet { margin: 2.5rem auto 0; max-width: 26rem; }
.cab { position: relative; aspect-ratio: 408 / 420; perspective: 1400px; background: url("img/gear/stand.webp") center / 100% 100% no-repeat; }
.cab-top { position: absolute; left: 0; right: 0; top: 0; height: 15.5%; pointer-events: none; }
.cab-in { position: absolute; left: 1.5%; right: 1.5%; top: 16%; bottom: 2.5%; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #0b0c0b; }
.cab-side { position: relative; overflow: hidden; background: linear-gradient(#1b1d1b, #0f100f); }
.cab-part { position: absolute; height: auto; filter: drop-shadow(0 4px 6px rgb(0 0 0 / 50%)); }
.cp-filter { left: 14%; bottom: 3%; width: 72%; }
.cp-cyl { left: 10%; bottom: 3%; width: 26%; }
.cp-reg { left: 2%; bottom: 60%; width: 58%; }
.cp-strip { right: 4%; top: 6%; width: 34%; transform: rotate(8deg); }
.cp-atom { right: 8%; bottom: 24%; width: 24%; }
.cab-lbl { position: absolute; left: 0; right: 0; bottom: .3rem; color: #e9e9e4; font-size: .5625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-align: center; text-shadow: 0 1px 3px #000; }
.cab-door { position: absolute; top: 16%; bottom: 2.5%; width: 48.5%; padding: 0; border: 0; border-radius: 0; cursor: pointer; background-image: url("img/gear/stand.webp"); background-size: 206.2% 122.7%; background-repeat: no-repeat; transition: transform .8s var(--ease); backface-visibility: hidden; box-shadow: 0 0 0 transparent; }
.cab-door-l { left: 1.5%; background-position: 2.9% 86.5%; transform-origin: 0 50%; }
.cab-door-r { right: 1.5%; background-position: 97.1% 86.5%; transform-origin: 100% 50%; }
.cab-door-l.open { transform: rotateY(-104deg); }
.cab-door-r.open { transform: rotateY(104deg); }
.cab-door:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cab-say { margin-top: .6rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .cab-door { transition: none; } }

/* ---------------------------------------------------------------- the shark: his own pictures */
.view img.sharkimg, .sharkimg { position: absolute; inset: auto; z-index: 3; height: auto !important; max-width: none !important; max-height: none !important; object-fit: contain !important; background: none !important; pointer-events: none; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 55%)); }
.sharkface { position: fixed; left: 50%; top: 50%; z-index: 60; width: min(60vw, 26rem); height: auto; opacity: 0; pointer-events: none; transform: translate(-50%, -40%) scale(.6); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .9, .2, 1.2); }
.sharkface.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .sharkface { transition: opacity .3s ease; transform: translate(-50%, -50%); } }

/* the camera crop: the box has the crop's shape, so the frame's width and height scale separately (app.js cropCam) */
.view.cropped video, .view.cropped #still { height: var(--csy, var(--cs)) !important; }
html.site .adminbadge { padding: 0; border: 0; }
html.site.is-admin .nav a { padding: 0 .45rem; }
html.site.is-admin .nav a { letter-spacing: .1em; padding: 0 .4rem; }

/* ---------------------------------------------------------------- fish needs against the tank (more.js fitChart) */
.fit { margin: 1.5rem 0 2.25rem; padding: 1.25rem 0 0; border-top: 1px solid var(--strong); }
.fit-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .9rem; }
.fit-head .label { margin: 0 !important; color: var(--strong); }
.fit-sum { margin: 0; font-size: .8125rem; font-weight: 600; } .fit-sum.ok { color: var(--accent); } .fit-sum.warn { color: var(--warn); }
.fit-box { position: relative; display: grid; gap: .45rem; --nw: 8.5rem; --vw: 6.5rem; }
.fit-row { display: grid; grid-template-columns: var(--nw) minmax(0, 1fr) var(--vw); align-items: center; gap: .75rem; font-size: .8125rem; }
.fit-name { color: var(--strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fit-val { color: var(--grey); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fit-lane { position: relative; display: block; height: .7rem; }
.fit-bar { position: absolute; top: 0; bottom: 0; background: var(--line-strong); }
.fit-row.out .fit-bar { background: var(--warn); opacity: .7; } .fit-row.out .fit-val { color: var(--warn); }
.fit-tankrow { padding-bottom: .55rem; margin-bottom: .2rem; border-bottom: 1px solid var(--line); }
.fit-tankrow .fit-name { font-weight: 600; } .fit-tankrow .fit-val { color: var(--strong); font-weight: 600; }
.fit-bar-tank { background: var(--accent); }
.fit-track { position: absolute; top: 0; bottom: 0; left: calc(var(--nw) + .75rem); right: calc(var(--vw) + .75rem); pointer-events: none; }
.fit-tank { position: absolute; top: 0; bottom: 0; background: var(--accent); opacity: .13; }
.fit-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--strong); }
.fit-key { margin: .75rem 0 0; }
@media (max-width: 30rem) { .fit-box { --nw: 6.2rem; --vw: 4.6rem; } .fit-row { gap: .5rem; font-size: .75rem; } }

/* ---------------------------------------------------------------- the heater: its own photo */
.heaterfig { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 1rem; align-items: center; max-width: 34rem; margin: 1.5rem auto 0; }
.heaterfig img { width: 2.2rem; height: auto; }
.heaterfig figcaption { color: var(--text); font-size: .9375rem; line-height: 1.5; }
.th-rodfill { fill: #d0632f; opacity: .55; }
html.site .page-now .herophotos { margin-top: 2.5rem; }
.fit { overflow: hidden; } .fit-row > * { min-width: 0; }
@media (max-width: 30rem) { .fit-out { display: none; } .fit-box { --nw: 5.6rem; --vw: 4.2rem; } }

/* ---------------------------------------------------------------- credits: one quiet link, one page (10/14 night) */
html.site .page:not(#photo-credits) details.credits { display: none !important; }
.footlinks { display: flex !important; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline; margin-top: .75rem; }
.footlinks a { color: var(--grey); font-size: .75rem; text-decoration: none; border-bottom: 1px solid var(--line); }
.footlinks a:hover { color: var(--strong); border-color: var(--strong); }
#photo-credits .linklist li { margin: .35rem 0; }

/* ---------------------------------------------------------------- chum blue: his logo's blue is the accent (10/14 night) */
:root, :root[data-theme="dark"] { --accent: #248FD3; --chum: #248FD3; --chum-text: #5DB3EA; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --accent: #1A74B0; --chum: #248FD3; --chum-text: #1A74B0; } }
:root[data-theme="light"] { --accent: #1A74B0; --chum: #248FD3; --chum-text: #1A74B0; }
html.site .nav a[aria-current="page"] { border-bottom-color: var(--chum) !important; }
.hubtile:hover, .hubtile:focus-visible { border-top-color: var(--chum); }
.hubtile:hover .hn { color: var(--chum-text); }
.pause, .modepick .go { background: var(--chum); border-color: var(--chum); color: #fff; }
.pause:hover, .modepick .go:hover { background: transparent; color: var(--chum-text); }
.fit-bar-tank, .fit-tank { background: var(--chum); }
.fit-sum.ok { color: var(--chum-text); }
a { text-decoration-color: var(--chum); }

/* ---------------------------------------------------------------- the detail panel: the barbershop feel */
.sheet { width: min(94vw, 42rem); border: 1px solid var(--line-strong); background: var(--bg); box-shadow: 0 30px 80px rgb(0 0 0 / 35%); }
.sheet[open] { animation: sheet-in .38s var(--ease) both; }
.sheet::backdrop { background: rgb(8 10 12 / 62%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet[open] { animation: none; } }
.sheet-top { padding: .9rem .75rem .9rem 1.5rem; border-bottom: 1px solid var(--line); }
.sheet h3, .sheet-top h3 { font-family: var(--serif) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 1.5rem !important; color: var(--strong); }
.sheet .sheet-x { border: 1px solid var(--line-strong) !important; border-radius: 0; }
.sheet-scroll { padding: 0 1.5rem 1.75rem; }
.sheet .latin { margin: .9rem 0 0; font-style: italic; }
.sheet .sheetpic { margin: 1rem -1.5rem 0; padding: 1.25rem; background: var(--raise); display: grid; place-items: center; }
.sheet .sheetpic img { max-height: 13rem; width: auto; max-width: 100%; object-fit: contain; }
.sheet .fitone { margin-top: 1.25rem; }
.sheet .fitone .fit { margin: 0 0 1rem; padding-top: .9rem; }
.sheet .fitone .fit-key { display: none; }
.sheet .why { font-weight: 400; color: var(--strong); font-size: 1rem; line-height: 1.55; margin-top: 1.25rem; }
.sheet .factgrid { margin-top: 1.25rem; }
.sheet .sheetlinks a { display: inline-flex; align-items: center; min-height: 2.5rem; margin: .25rem .5rem 0 0; padding: .3rem .9rem; border: 1px solid var(--line-strong); color: var(--strong); text-decoration: none; font-size: .625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.sheet .sheetlinks a:hover { border-color: var(--chum); color: var(--chum-text); }
@media (max-width: 45.99rem) { .sheet { width: 100vw; } .sheet[open] { animation-name: sheet-up; } }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* fish cards open the panel */
.eopen { cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.eopen:hover, .eopen:focus-visible { outline: none; background: var(--raise); }
.eopen:hover .ename, .eopen:focus-visible .ename { color: var(--chum-text); }
.ego { display: inline-flex; align-items: center; margin-top: .6rem; padding: .35rem .8rem; border: 1px solid var(--line-strong); color: var(--strong); font-size: .5625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.eopen:hover .ego { border-color: var(--chum); color: var(--chum-text); }
.sheet .sheetpic { overflow: hidden; }
.sheet .sheetpic img { display: block; max-height: 13rem !important; height: auto !important; width: auto !important; max-width: 100% !important; object-fit: contain; }
.sheet .fit-box { --vw: 7.5rem; }
.sheet .sheetpic { height: auto !important; max-height: none !important; aspect-ratio: auto !important; }
/* plants and fish: cards side by side on wide screens */
@media (min-width: 46rem) { html.site .pages .entries { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } html.site .pages .entries .entry:not(.choice) { grid-template-columns: 15rem minmax(0, 1fr) !important; align-items: center; gap: 2rem; padding: 1rem 1rem 1rem 0; } html.site .pages .entries .entry:not(.choice) .epic { height: 9rem; } }

/* ---------------------------------------------------------------- Plan: month beside the day and Upcoming; one colour per kind */
:root { --k-test: #248FD3; --k-wc: #22A39A; --k-plant: #5E9E3E; --k-feed: #D98A2B; --k-stock: #8C6CD1; --k-ms: #C2507A; }
.cal2 { display: grid; gap: 1.75rem; }
@media (min-width: 52rem) { .cal2 { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; } }
html.site .cal-day { min-height: 0; aspect-ratio: 1 / 1; padding: .25rem .1rem; }
html.site .cal-day.today .cal-n { background: var(--chum); color: #fff; }
html.site .cal-day.sel { box-shadow: inset 0 0 0 2px var(--chum); }
.cal-marks i.k-test { background: var(--k-test) !important; border: 0 !important; }
.cal-marks i.k-wc { background: var(--k-wc) !important; border: 0 !important; }
.cal-marks i.k-wc:not(.done) { background: none !important; border: 1.5px solid var(--k-wc) !important; }
.cal-marks i.k-ms { background: var(--k-ms) !important; border: 0 !important; }
.cal-marks i.k-ms:not(.done) { background: none !important; border: 1.5px solid var(--k-ms) !important; }
.cal-win { border-top-color: var(--k-stock) !important; }
.cal-key2 { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .75rem; font-size: .75rem; color: var(--grey); }
.cal-key2 .kk { display: inline-flex; align-items: center; gap: .4rem; }
.cal-key2 .kk i { width: .6rem; height: .6rem; background: var(--c); }
.k-test { --c: var(--k-test); } .k-wc { --c: var(--k-wc); } .k-plant { --c: var(--k-plant); } .k-feed { --c: var(--k-feed); } .k-stock { --c: var(--k-stock); } .k-ms { --c: var(--k-ms); }
.cal-side .label, .cal-done .label { margin: 0 0 .5rem !important; }
.cal-up { margin-top: 1.75rem; }
.cal-done { margin-top: 2.25rem; }
.ev2s { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ev2 { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; padding: .55rem .8rem; border-left: 3px solid var(--c, var(--line-strong)); background: color-mix(in srgb, var(--c, var(--grey)) 9%, transparent); font-size: .875rem; color: var(--strong); }
.cal-daybox .ev2 { grid-template-columns: minmax(0, 1fr); }
.ev2 time { color: var(--grey); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.ev2.plan { background: transparent; border-left-style: dashed; }
.ev2.none { grid-template-columns: 1fr; color: var(--grey); border-left-color: var(--line); background: none; }
html.site #timeline { display: none; }

/* the wordmark and the quiet planted line under it */
.brand-txt { display: grid; line-height: 1.15; }
html.site .brand-day { color: var(--grey); font-size: .6875rem; font-weight: 400; letter-spacing: .02em; text-transform: none; white-space: nowrap; }
html.site .page-now { padding-top: 1.25rem; }
html.site .page-now .hub { margin-top: 0; }
html.site main > * { min-width: 0; }
@media (min-width: 60rem) { html.site .pages { overflow-x: clip; } }
html.site .tankside, html.site .pages, html.site .nav { grid-area: auto !important; }
@media (min-width: 60rem) { html.site .tankside { grid-column: 1 !important; grid-row: 1 !important; } html.site .pages { grid-column: 2 !important; grid-row: 1 !important; } }
.hubphotos { display: block; margin: 2.25rem 0 .6rem; color: var(--strong); font-family: var(--serif); font-size: 1.15rem; text-decoration: none; }
.hubphotos::after { content: " →"; color: var(--chum-text); }
html.site .page-now .herophotos { margin-top: 0; }

/* Water: tests and changes on one page */
.tc-wc { stroke: var(--chum); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .8; }
.wtwo { display: grid; gap: 0 2.5rem; }
@media (min-width: 46rem) { .wtwo { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.taptds { margin-top: .75rem; }
html.site .testphotos { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(9rem, 12rem)); gap: .75rem; }
html.site .testphotos .tthumb { aspect-ratio: 1 / 1; width: 100%; height: auto; padding: 0; }
html.site .testphotos .tthumb img { width: 100%; height: 100%; object-fit: cover; }
html.site #changes .time li { grid-template-columns: 4.5rem minmax(0, 1fr); }
.fit-box { --vw: 8.5rem; }

.countdown { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; margin: 0 0 1.25rem; padding: .9rem 1rem; border-left: 3px solid var(--chum); background: color-mix(in srgb, var(--chum) 8%, transparent); color: var(--strong); text-decoration: none; }
.countdown .cd-fish { font-family: var(--serif); font-size: 1.35rem; }
.countdown .cd-crew { color: var(--chum-text); font-size: .875rem; }
.countdown:hover .cd-fish { color: var(--chum-text); }

/* Schedule: one bar per day type, light and CO2 on one axis; chum blue and neutrals only */
.sch-today { margin: 0 0 1.5rem; font-family: var(--serif); font-size: 1.4rem; color: var(--strong); }
.sb-day { padding: 1rem 0 .75rem; border-top: 1px solid var(--line); }
.sb-day.today { border-top: 2px solid var(--chum); }
.sb-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; } .sb-head b { font-weight: 600; color: var(--strong); }
.sb-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .15rem .75rem; align-items: center; margin: .45rem 0; font-size: .8125rem; }
.sb-k { color: var(--grey); } .sb-t { grid-column: 2; color: var(--strong); font-variant-numeric: tabular-nums; }
.sb-track { position: relative; height: .9rem; }
.sb { position: absolute; top: 0; bottom: 0; }
.sb-off { background: var(--line); }
.sb-dim { background: color-mix(in srgb, var(--chum) 35%, transparent); }
.sb-full { background: var(--chum); }
.sb-co2 { background: var(--grey); } .sb-co2.planned { background: none; border: 1.5px dashed var(--grey); }
.sb-now { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--strong); }
.sb-axrow { margin-top: .25rem; } .sb-axis { position: relative; height: 1rem; }
.sb-axis span { position: absolute; transform: translateX(-50%); color: var(--grey); font-size: .6875rem; white-space: nowrap; }
.sb-axis span:first-child { transform: none; } .sb-axis span:last-child { transform: translateX(-100%); }
.sb-key { display: flex; gap: 1.25rem; margin-top: 1rem; color: var(--grey); font-size: .75rem; }
.sb-key span { display: inline-flex; align-items: center; gap: .4rem; } .sb-key .sb { position: static; display: inline-block; width: .9rem; height: .6rem; }
.sb-axrow .sb-t { display: none; }

/* Cycle: six equal week cards */
.wk6 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 40rem) { .wk6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wk { display: grid; grid-template-rows: auto auto 4.5rem auto; gap: .45rem; padding: .9rem; border: 1px solid var(--line); }
.wk.on { border-color: var(--chum); box-shadow: inset 0 3px 0 var(--chum); }
.wk-n { color: var(--grey); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; } .wk.on .wk-n { color: var(--chum-text); }
.wk b { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; color: var(--strong); line-height: 1.2; min-height: 2.5em; }
.wk-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; align-items: end; height: 100%; }
.wk-b { display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; text-align: center; }
.wk-b i { display: block; width: 100%; background: var(--c-nh3, var(--grey)); }
.wk-b.stg-no2 i { background: var(--c-no2, var(--grey)); } .wk-b.stg-no3 i { background: var(--c-no3, var(--grey)); }
.wk-b em { font-style: normal; font-size: .5625rem; color: var(--grey); letter-spacing: .06em; margin-top: .2rem; }
.wk-s { color: var(--text); font-size: .8125rem; line-height: 1.35; min-height: 2.7em; }

/* the camera on its side: the box is portrait; app.js places the turned frame (inline, so these old rules step aside) */
.view.rot video, .view.rot #still { object-fit: fill !important; }
@media (min-width: 60rem) {
  html.cam-portrait.site main { grid-template-columns: minmax(18rem, 30rem) minmax(0, 1fr); }
  html.cam-portrait.site .tankside .viewslot { width: min(100%, calc((100dvh - var(--bar) - 6.5rem) * .56)) !important; }
}
html.cam-portrait .view.dock { width: min(32vw, 9rem) !important; }
html.site .view.dock .roombtn, html.site .view.dock .theaterbtn { display: none !important; }
/* About, on Home */
.about { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); max-width: 40rem; }
.about .label { margin: 0 0 .6rem !important; font-family: var(--sans) !important; font-size: .6875rem !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--grey); }
.about p { margin: 0; color: var(--strong); line-height: 1.6; }
.about a { color: var(--chum-text); }
.about-sig { margin-top: .6rem !important; color: var(--grey) !important; font-size: .875rem; }
@media (max-width: 59.99rem) { html.cam-portrait.site .tankside .viewslot { width: min(100%, calc(56dvh * .56)) !important; } }
html.site .page-now .herophotos { margin-top: 2rem; }
html.cam-portrait .view .theaterbtn { display: none !important; }
html.cam-portrait .view:not(.dock) .roombtn { left: .6rem !important; right: auto !important; transform: none !important; }

/* Day by day: a day picker, the day large, its shots in a row */
.dp { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; gap: .5rem; align-items: center; margin-bottom: 1.25rem; }
.dp-arrow { width: 2.5rem; height: 2.5rem; background: none; border: 1px solid var(--line-strong); color: var(--strong); font: inherit; cursor: pointer; }
.dp-arrow:disabled { opacity: .3; cursor: default; }
.dp-strip { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; justify-content: center; }
.dp-strip::-webkit-scrollbar { display: none; }
.dp-day { flex: none; display: grid; justify-items: center; gap: .1rem; min-width: 3rem; padding: .4rem .3rem; background: none; border: 1px solid var(--line); color: var(--grey); font: inherit; font-size: .6875rem; cursor: pointer; }
.dp-day b { font-size: 1rem; font-weight: 500; color: var(--strong); }
.dp-day.on { border-color: var(--chum); background: color-mix(in srgb, var(--chum) 12%, transparent); } .dp-day.on span { color: var(--chum-text); }
.dv-big { margin: 0 auto; max-width: 26rem; }
.dv-big img { display: block; width: 100%; height: auto; cursor: zoom-in; background: #000; }
.dv-big figcaption { margin-top: .4rem; color: var(--grey); font-size: .8125rem; text-align: center; }
.dv-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .4rem; margin-top: 1rem; }
.dv-shot { display: grid; gap: .2rem; padding: 0; background: none; border: 1px solid transparent; color: var(--grey); font: inherit; font-size: .6875rem; cursor: pointer; }
.dv-shot img { width: 100%; aspect-ratio: .56; object-fit: cover; }
.dv-shot.on { border-color: var(--chum); color: var(--chum-text); }
html.site #days .daygrid { display: block; }
.dv-big { max-width: none; text-align: center; } .dv-big img { width: auto; max-width: 100%; max-height: calc(100dvh - 20rem); min-height: 16rem; margin: 0 auto; }

/* Setup: each piece where it sits, as its own photo */
.sp-part { position: absolute; transform: translate(-50%, -50%); width: 13%; aspect-ratio: 1; padding: 4%; border: 1px solid rgb(255 255 255 / 55%); border-radius: 50%; background: rgb(255 255 255 / 82%); box-shadow: 0 4px 14px rgb(0 0 0 / 30%); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease); z-index: 2; }
.sp-part img { width: 100%; height: 100%; object-fit: contain; }
.sp-part:hover, .sp-part:focus-visible, .sp-part.on { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 3px var(--chum), 0 6px 18px rgb(0 0 0 / 35%); outline: none; }
html.site .sp-dot { width: 1.1rem; height: 1.1rem; min-width: 0; padding: 0; border-radius: 50%; background: var(--chum); border: 2px solid #fff; font-size: 0; color: transparent; }
html.site .sp-dot.on { box-shadow: 0 0 0 4px color-mix(in srgb, var(--chum) 40%, transparent); }
.grow.hl { background: color-mix(in srgb, var(--chum) 8%, transparent); }
.grow.gonly { grid-template-columns: minmax(0, 1fr) auto !important; }
.grow.gonly .gpic { width: 6rem; height: 6rem; }
.gpic-link { display: block; width: 100%; height: 100%; }
.sp-n { display: none !important; }
.sp-part { width: 11%; padding: 1%; }

/* the real tank photo with parts and lines on it (diagrams.js ph()) */
.tph { position: relative; margin: 0 auto 1rem; max-width: 30rem; }
.tph > img { display: block; width: 100%; height: auto; }
.tph-s { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tph-l { position: absolute; inset: 0; pointer-events: none; }
.tph-p { position: absolute; height: auto; }
.tph-shadow { filter: drop-shadow(0 6px 12px rgb(0 0 0 / 45%)); }
.tph-b { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--chum); color: #fff; font-size: .75rem; font-weight: 600; box-shadow: 0 0 0 2px #fff; }
.tph-s .dg-flow, .tph-s .dg-jet, .tph-s .dg-loop, .tph-s .dg-gas, .tph-s .dg-gasline, .tph-s .dg-out { stroke-width: 6; vector-effect: non-scaling-stroke; }
.tph-s .dg-flow, .tph-s .dg-jet { stroke: #fff; stroke-width: 2.5; }
.tph-s .dg-loop { stroke: rgb(255 255 255 / 80%); stroke-width: 2; }
.tph-bub { fill: rgb(255 255 255 / 85%); animation: tph-rise 2.6s ease-in infinite; }
@keyframes tph-rise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--rise, -120px)); } }
.tph-glow { fill: var(--chum); opacity: .55; }
@media (prefers-reduced-motion: reduce) { .tph-bub { animation: none; opacity: .8; } }
/* the swimming fish: the photo cut to the glass */
.swim { margin: 0 0 1.5rem; }
.swim-crop { position: relative; overflow: hidden; aspect-ratio: 819 / 491; }
.swim-crop > img:first-child { position: absolute; width: 109.9%; height: auto; left: -4.4%; top: -28.4%; max-width: none; }
.swim-f { position: absolute; left: 0; top: 0; height: auto; filter: drop-shadow(0 3px 4px rgb(0 0 0 / 35%)); will-change: transform; pointer-events: none; }
/* Controls: the real photo; the light's colour washes softly over the water */

/* ================= 10/14 late night: ONE long page. The camera is a large upright view at the top, then a small
   upright pop-out in the bottom-right corner (app.js docks it). Nothing sits over the picture at the top. */
@media (min-width: 60rem) {
  html.site main, html.cam-portrait.site main { display: block !important; }
  html.pager.fullview.site .tankside { position: static !important; max-height: none !important; border-right: 0 !important; padding: 1.25rem var(--pad) 0 !important; }
  html.site .page .wrap, html.pager.fullview.site .page .wrap { max-width: 64rem; margin: 0 auto; padding: 0 var(--pad); }
}
html.site .page { display: block !important; padding: clamp(2.25rem, 5vw, 3.5rem) 0 1rem; scroll-margin-top: calc(var(--bar) + .5rem); }
html.site .page[hidden] { display: none !important; }
html.site .page + .page > .wrap { border-top: 1px solid var(--line); padding-top: clamp(2rem, 4vw, 3rem); }
html.site .page-now { padding-top: 1rem; }
html.cam-portrait.site .tankside .viewslot { width: min(100%, calc(min(78dvh, 54rem) * .56)) !important; }
html.site:not(.cam-portrait) .tankside .viewslot { width: min(100%, 46rem) !important; }
html.site .tankside .cams { position: static !important; display: flex; justify-content: center; gap: 0; margin: .75rem auto 0; width: max-content; background: none; }
html.site .tankside .cams[hidden] { display: none !important; }
html.site .cams button { min-height: 2.25rem; padding: .3rem 1rem; background: transparent; color: var(--grey); border: 1px solid var(--line-strong); font-size: .625rem; }
html.site .cams button + button { border-left: 0; }
html.site .cams button.on { background: var(--chum); border-color: var(--chum); color: #fff; }
html.site .view .live, html.site .view .theaterbtn, html.site .view .roombtn, html.site .view .fs { display: none !important; }
/* the pop-out */
html.site .view.dock { position: fixed !important; inset: auto 1rem calc(1rem + env(safe-area-inset-bottom)) auto !important; width: 15rem !important; z-index: 45 !important; }
html.cam-portrait.site .view.dock { width: 8.5rem !important; }
@media (min-width: 60rem) { html.cam-portrait.site .view.dock { width: 11rem !important; } }
html.site .view.dock .cams { position: absolute !important; left: .35rem; right: .35rem; bottom: .35rem; width: auto; margin: 0; z-index: 3; }
html.site .view.dock .cams button { flex: 1; min-height: 1.6rem; padding: .1rem .3rem; font-size: .5rem; background: rgb(0 0 0 / 55%); color: #fff; border-color: rgb(255 255 255 / 35%); }
html.site .view.dock .cams button.on { background: var(--chum); }
html.site .view.dock .undock { display: grid !important; }
html.site .sitefoot { margin-top: 3rem; }
html.site .sitefoot .wrap { max-width: 64rem; margin: 0 auto; padding: 0 var(--pad); }
/* images: always sized before they load (his phone saw them huge, then snapping) */
html.site img { max-width: 100%; }
html.site .epic { height: 10rem; display: grid; place-items: center; overflow: hidden; }
html.site .epic img { width: auto !important; height: 100% !important; max-width: 100%; object-fit: contain; }
html.site .gpic img, html.site .eco2-pic img, html.site .cc-pic img, html.site .dg-partpic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sb-show { background: var(--strong); } .sb-show.planned { background: none; border: 1.5px dashed var(--chum); }
.sb-key .sb-show { background: none; border: 1.5px dashed var(--chum); }
.stormdemo { margin-top: 2rem; } .stormdemo video { width: 100%; max-width: 40rem; display: block; background: #000; }

/* camera: at the top only (no corner pop-out by itself); small tools once scrolled past */
.camtools { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 44; display: none; gap: .4rem; }
html.cam-past .camtools { display: flex; }
.camtool { min-height: 2.5rem; padding: .35rem .85rem; background: var(--bg); color: var(--strong); border: 1px solid var(--line-strong); font: 600 .625rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 6px 20px rgb(0 0 0 / 18%); cursor: pointer; }
.camtool:hover { border-color: var(--chum); color: var(--chum-text); }
.topbtn { display: none; } @media (max-width: 59.99rem) { .topbtn { display: inline-flex; align-items: center; } }
html.site .view.dock { inset: auto 1rem calc(4rem + env(safe-area-inset-bottom)) auto !important; }
.camfs { display: block; margin: .6rem auto 0; min-height: 2.25rem; padding: .3rem 1rem; background: transparent; color: var(--grey); border: 1px solid var(--line-strong); font: 600 .625rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.livenow { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: .5rem 0 0; color: var(--grey); font-size: .75rem; }
.livenow i { width: .5rem; height: .5rem; border-radius: 50%; background: #e0352b; }
.livenow[hidden] { display: none; }
html.site .tankside .cams { margin-top: .5rem; }
/* full screen keeps the picture upright: the box itself fills the screen */
.viewslot:fullscreen { width: auto !important; height: 100% !important; max-width: 100%; margin: 0 auto; background: #000; }
.viewslot:-webkit-full-screen { width: auto !important; height: 100% !important; margin: 0 auto; background: #000; }
html.cam-overlay, html.cam-overlay body { overflow: hidden; }
html.cam-overlay .tankside .viewslot { position: fixed !important; inset: 0 auto auto 50% !important; transform: translateX(-50%); z-index: 80; width: auto !important; height: 100dvh !important; max-width: 100vw; margin: 0 !important; background: #000; }
html.cam-overlay .camfs { position: fixed; z-index: 81; top: calc(.75rem + env(safe-area-inset-top)); right: .75rem; background: rgb(0 0 0 / 60%); color: #fff; border-color: rgb(255 255 255 / 40%); }
html.cam-overlay body::before { content: ""; position: fixed; inset: 0; z-index: 79; background: #000; }
.echip { display: inline-block; margin-bottom: .35rem; padding: .15rem .5rem; border: 1px solid color-mix(in srgb, var(--chum) 45%, transparent); color: var(--chum-text); font-size: .5625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.cab-tubes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cab-hose { fill: none; stroke: rgb(220 236 240 / 75%); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-width: 5px; }
.cab-gas { fill: none; stroke: #e7e7e2; stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-dasharray: 5 3; }
.cp-plug { width: 11%; transform: rotate(8deg); z-index: 2; }
.cp-plug1 { right: 12%; top: 18%; } .cp-plug2 { right: 8%; top: 30%; }
@media (max-width: 59.99rem) { html.cam-portrait.site .tankside .viewslot { width: min(100%, calc(58dvh * .56)) !important; } }
html.site .tankside { text-align: center; }
html.site .tankside .cams { display: inline-flex !important; vertical-align: middle; margin: .6rem .2rem 0 !important; }
html.site .tankside .cams[hidden] { display: none !important; }
html.site .camfs { display: inline-block; vertical-align: middle; margin: .6rem .2rem 0; }
html.site .tankside .modenow, html.site .tankside .livenow { text-align: left; }
/* the old side-column rule hid everything in the camera area except the picture on wide screens */
html.pager.fullview.site .tankside > .camfs { display: inline-block; }
html.pager.fullview.site .tankside > .livenow:not([hidden]) { display: flex; }
html.pager.fullview.site .tankside > .cams:not([hidden]) { display: inline-flex !important; }

/* the Neo parts: big enough to read */
html.site .dg-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem; }
html.site .dg-partcard .dg-partpic { height: 8rem; }
html.site .dg-partcard .dg-partpic img { max-height: 8rem; }
html.site .dg-partcard b { font-size: 1rem; } html.site .dg-partcard span { font-size: .875rem; }
html.site .dg-key li { font-size: .9375rem; }

/* 10/14 11:20 pm: camera back in landscape; the crop is a little taller than wide */
html.site:not(.cam-portrait) .tankside .viewslot { width: min(100%, calc(min(74dvh, 50rem) * .89)) !important; }
@media (max-width: 59.99rem) { html.site:not(.cam-portrait) .tankside .viewslot { width: min(100%, calc(60dvh * .89)) !important; } }

/* Controls for everyone: a demo for visitors, the real thing under /admin/ */
.tag.demo { border-color: var(--chum); color: var(--chum-text); }
html.site #controls .rigbox figcaption { color: var(--chum-text); font-weight: 600; letter-spacing: .06em; }
/* Admin (only under /admin/) */
.adm { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.adm-card { display: grid; gap: .6rem; align-content: start; padding: 1rem; border: 1px solid var(--line-strong); }
.adm-card h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.adm-f { display: grid; gap: .2rem; font-size: .75rem; color: var(--grey); }
.adm-f input { min-height: 2.5rem; padding: .4rem .6rem; background: var(--bg); color: var(--strong); border: 1px solid var(--line-strong); border-radius: 0; font: inherit; font-size: 1rem; }
.adm-f input:focus { outline: 2px solid var(--chum); outline-offset: 0; }
.adm-go { min-height: 2.75rem; background: var(--chum); color: #fff; border: 1px solid var(--chum); font: 600 .6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.adm-say { margin: 0; min-height: 1.2em; font-size: .8125rem; color: var(--grey); } .adm-say.ok { color: var(--chum-text); } .adm-say.bad { color: var(--warn); }
.adm-seg { display: flex; } .adm-seg button { flex: 1; min-height: 2.75rem; background: transparent; color: var(--strong); border: 1px solid var(--line-strong); font: 600 .6875rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.adm-seg button + button { border-left: 0; } .adm-seg button.on { background: var(--chum); border-color: var(--chum); color: #fff; }
.adm-runs ul { margin: 0; padding-left: 1.1rem; font-size: .875rem; color: var(--text); } .adm-runs li { margin: .25rem 0; }
.adm-f input { width: 100%; box-sizing: border-box; min-width: 0; }
.adm-card { min-width: 0; }
.adm { align-items: start; }

/* 10/15 (his ask): the front camera's whole frame, never stretched. Letterboxed in its own 16:9 box; full screen and the
   phone overlay show the whole frame at its own shape with black around it; the overlay turns it on its side on a phone
   held upright (cam-turn, app.js) so it fills the screen. */
html.cam-full .view video, html.cam-full .view #still { object-fit: contain !important; inset: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; }
html.site.cam-full .tankside .viewslot { aspect-ratio: 16 / 9 !important; width: min(100%, calc(min(62dvh, 40rem) * 16 / 9)) !important; }
@media (max-width: 59.99rem) { html.site.cam-full .tankside .viewslot { width: 100% !important; } }
html.cam-full .viewslot:fullscreen { width: 100% !important; height: 100% !important; max-width: none; aspect-ratio: auto !important; }
html.cam-full .viewslot:-webkit-full-screen { width: 100% !important; height: 100% !important; max-width: none; aspect-ratio: auto !important; }
html.cam-full.cam-overlay .tankside .viewslot { inset: 0 !important; transform: none; width: 100vw !important; height: 100dvh !important; max-width: none; aspect-ratio: auto !important; }
html.cam-full.cam-overlay.cam-turn .tankside .viewslot { inset: 50% auto auto 50% !important; width: 100dvh !important; height: 100vw !important; transform: translate(-50%, -50%) rotate(90deg); }