/* pass10.css (fishtank.cam, 2026-10-26, his voice review at 12:27 pm; README section 90). Loaded last.
   - the opening tank as a real glass box (v4.js buildTank): thick blue-green glass edges, opaque soil, the light in 3D
   - tall screens (taller than wide): the held pictures sit on top and the words pass under them, as on a phone
   - the cameras: LIVE bottom left, the time bottom right
   - the chapter questions ("But where are the fish?", "Why so long?") as big titles */

/* ------------------------------------------------------------------ the opening tank */
.t4-scene { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.t4 .t4f, .t4 .t4-spr { position: absolute; display: block; backface-visibility: visible; }
.t4 .t4-pane { background-size: 100% 100% !important; background-repeat: no-repeat !important;
  box-shadow: inset 0 0 0 calc(var(--u, .4px) * 7) rgb(150 222 232 / 88%), inset 0 0 calc(var(--u, .4px) * 22) rgb(160 225 235 / 30%); }
.t4 .t4-gside { background-color: transparent; }
.t4 .t4-pback { box-shadow: inset 0 0 0 calc(var(--u, .4px) * 5) rgb(140 210 222 / 60%); }
.t4 .t4-pfront { box-shadow: inset 0 0 0 calc(var(--u, .4px) * 8) rgb(160 228 238 / 92%), inset 0 0 calc(var(--u, .4px) * 26) rgb(170 230 240 / 26%); }
.t4 .t4-surf { background: linear-gradient(rgb(200 238 248 / 26%), rgb(130 200 225 / 14%)); box-shadow: inset 0 0 0 calc(var(--u, .4px) * 4) rgb(190 238 246 / 55%); }
.t4 .t4-floor2 { background-size: 100% 100% !important; }
.t4 .t4-beam { background: linear-gradient(rgb(255 248 226 / 22%), rgb(255 248 226 / 4%) 80%, rgb(255 248 226 / 0%)); clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); }
.t4 .t4-bar.t4-bo { box-shadow: 0 0 calc(var(--u, .4px) * 34) calc(var(--u, .4px) * 10) rgb(255 247 222 / 60%); }
.t4 .t4-bar.t4-bf::after { content: "CHIHIROS"; position: absolute; right: 6%; top: 50%; transform: translateY(-50%); font: 700 calc(var(--u, .4px) * 7) / 1 var(--sans, system-ui); letter-spacing: .2em; color: rgb(255 255 255 / 32%); }
.t4 .t4-clamp.t4-bf::after { content: "Chihiros"; position: absolute; right: 12%; top: 26%; font: 600 calc(var(--u, .4px) * 6) / 1 var(--sans, system-ui); color: rgb(255 255 255 / 35%); }
.t4 .t4-tree, .t4 .t4-stone { filter: drop-shadow(0 calc(var(--u, .4px) * 4) calc(var(--u, .4px) * 5) rgb(0 0 0 / 35%)); }
/* light page: the glass edges a little deeper so they read on white */
:root[data-theme="light"] .t4 .t4-pane { box-shadow: inset 0 0 0 calc(var(--u, .4px) * 7) rgb(96 186 204 / 92%), inset 0 0 calc(var(--u, .4px) * 22) rgb(120 200 215 / 30%); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .t4 .t4-pane { box-shadow: inset 0 0 0 calc(var(--u, .4px) * 7) rgb(96 186 204 / 92%), inset 0 0 calc(var(--u, .4px) * 22) rgb(120 200 215 / 30%); } }

/* ------------------------------------------------------------------ the cameras: LIVE bottom left, the time bottom right */
.camtag { left: .6rem; right: .6rem; bottom: .6rem; display: flex; justify-content: space-between; gap: .5rem; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.camtag > span { display: inline-flex; align-items: center; padding: .22rem .55rem; border-radius: 6px; background: rgb(0 0 0 / 50%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.camtag .ct-time { margin-left: auto; }
.camtag.is-live .ct-time { padding-left: .55rem; border-left: 0; }
.view.dock .camtag { left: .4rem; right: .4rem; bottom: .4rem; padding: 0; }
.view.dock .camtag > span { padding: .15rem .4rem; }
.tale-live p, .tale-side p { font-weight: 600; }

/* ------------------------------------------------------------------ the chapter questions */
html.v4 .chapter > .ch-head.ch-q h2 { text-wrap: balance; }

/* ------------------------------------------------------------------ tall screens: the held pictures on top */
@media (min-width: 64rem) and (max-aspect-ratio: 1/1) {
  .md-hold, html.scrub .md-hold.md-flip { grid-template-columns: minmax(0, 1fr) !important; width: min(64rem, calc(100vw - 4rem)); margin-left: auto; margin-right: auto; column-gap: 0; }
  .md-pic, html.scrub .md-hold.md-flip .md-pic { grid-column: 1; grid-row: auto; top: calc(var(--barh, 56px) + var(--striph, 0px) + .5rem); height: calc(48vh - var(--barh, 56px) * .5); padding-bottom: 1.5rem; }
  html.scrub .md-pic::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3rem; height: 3rem; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
  .md-steps, html.scrub .md-hold.md-flip .md-steps { grid-column: 1; grid-row: auto; padding: 4vh 0 22vh; }
  .md-steps > li, html.scrub .md-hold.md-flip .md-steps > li { min-height: 44vh; align-items: center; text-align: center; }
  .md-t, html.scrub .md-hold.md-flip .md-t { margin-left: auto; margin-right: auto; max-width: 36rem; }
  .md-steps h3 { font-size: clamp(2rem, 3.4vw, 3rem); }
  .md-t { font-size: clamp(1.0625rem, 1.6vw, 1.375rem); }
  .md-who { justify-content: center; }
  .md-cut { margin-left: auto; }
}

/* ------------------------------------------------------------------ CO2: the drop checker's words under the meter */
.md-dcsay { font: 600 10px var(--sans, system-ui); fill: var(--strong, #fff); }
.md-dc circle, .md-gauge circle { transition: fill .25s linear; }

/* ------------------------------------------------------------------ temperature: the thermometer only */
#temperature .md-temp-rest, #temperature #temp-say { display: none !important; }

/* ------------------------------------------------------------------ the fish come straight after the cameras, so the old note goes */
#wherefish { display: none !important; }
html.v4 .tale p + p + p { margin-top: .35rem; }

/* ------------------------------------------------------------------ the front camera fills more of a tall screen */
@media (max-aspect-ratio: 1/1) and (min-width: 40rem) {
  html.v4.site .intro-cam .tankside .viewslot, html.v4.cam-portrait.site .intro-cam .tankside .viewslot { width: min(100%, 50rem, calc(78vh * var(--car)), calc(78dvh * var(--car))) !important; }
}

/* ------------------------------------------------------------------ water tests: smooth lines, the safe zone */
.tc3-safe { fill: rgb(76 195 138 / 12%); }
.tc3-safet { font: 600 9px var(--sans, system-ui); fill: #4CC38A; letter-spacing: .06em; text-transform: uppercase; }
.tc3-raw { opacity: .35; }
.tc3-smooth { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#data .testcharts { max-width: 46rem; margin-left: auto; margin-right: auto; }
#co2-checker, #co2-setup { display: none !important; }

/* ------------------------------------------------------------------ the local stores, with their own logos */
.rs-logo .rs-mark { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 15rem; height: 4.5rem; margin: 0 0 .6rem; padding: .5rem; border-radius: 14px; background: #fff; }
.rs-logo .rs-mark img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.rs-logo .rs-mark:not(.rs-wide) img { height: 100%; }

/* ------------------------------------------------------------------ the gear list: tiles that stay small on big and tall screens */
#kit { max-width: 66rem; margin-left: auto; margin-right: auto; }
#kit .kgrid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)) !important; }
#kit .kgrid > .kcard-static:nth-child(3n+1):last-child { grid-column: auto !important; }

/* ------------------------------------------------------------------ the menu: the pages, then the sections */
.p10-g { padding: .55rem 0 .2rem; }
.p10-gl { margin: 0; padding: .25rem 1.1rem .45rem; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.p10-subs { padding-left: 1.1rem !important; }
.p10-g .p10-a[href$="/admin/"], .p10-g .p10-a[href="/"] { border-color: #248FD3; color: var(--strong); }

/* ------------------------------------------------------------------ very wide screens: the held pictures grow with the room */
@media (min-width: 110rem) and (min-aspect-ratio: 1/1) {
  .md-hold { width: min(100rem, calc(100vw - 22rem)); margin-left: calc(50% - min(50rem, 50vw - 11rem)); }
  .md-steps h3 { font-size: clamp(2.25rem, 2.2vw, 3.25rem); }
  .md-t { font-size: 1.3125rem; max-width: 34rem; }
}