/* scrub.css (2026-10-26, ~11:20 am; his words: "text moves, images stay and animate ... smooth, consistent, reliable").
   Replaces snap.css. One pattern on phones and computers: a held picture stays put while its words scroll past, and the
   picture moves only with the scroll (mid.js). On a wide screen the pictures take turns, left then right, the words on the
   other side. On a phone the picture sits under the bar and the words slide up behind it. README section 89. */

/* the words of a step follow the scroll (mid.js sets their opacity); nothing waits for a timer */
html.scrub .md-steps > li { transition: none; will-change: opacity; }
html.scrub .md-f { transition: opacity .25s linear; }

/* a phone: the words pass behind the picture; its lower edge is soft so they slip under it */
@media (max-width: 63.99rem) {
  html.scrub .md-pic { top: calc(var(--barh, 56px) + .25rem); height: calc(46svh - var(--barh, 56px) * .25); padding-bottom: 1.25rem; }
  html.scrub .md-pic::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2.5rem; height: 2.5rem; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
  html.scrub .md-steps > li { min-height: 52svh; }
}
/* a wide screen: alternate sides */
@media (min-width: 64rem) {
  html.scrub .md-hold.md-flip { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
  html.scrub .md-hold.md-flip .md-pic { grid-column: 2; }
  html.scrub .md-hold.md-flip .md-steps { grid-column: 1; }
  html.scrub .md-hold.md-flip .md-steps > li { align-items: flex-end; text-align: right; }
  html.scrub .md-hold.md-flip .md-t { margin-left: auto; margin-right: 0; }
}

/* a phone: the corner camera steps aside while a held picture is on screen (scrub.js) */
@media (max-width: 63.99rem) {
  html.scrub.held .view.dock, html.scrub.held .v3dock { opacity: 0 !important; pointer-events: none !important; transition: opacity .25s linear; }
  html.scrub:not(.held) .view.dock, html.scrub:not(.held) .v3dock { transition: opacity .25s linear; }
}

/* the live view: the camera and its badge only (the show times live in The schedule now) */
html.scrub .showline { display: none !important; }

/* the opening is a little shorter, so the story starts sooner (the tank still turns and the live view still arrives) */
html.scrub.v4.lay-b:not(.intro-static) .intro { height: 250vh; height: 250svh; }

/* ---- the schedule */
.md-hold-day .md-k { --md-c: var(--c-light, #F2C94C); }
.md-clock { font: 600 18px var(--sans, system-ui); letter-spacing: -.01em; fill: var(--strong, #fff); font-variant-numeric: tabular-nums; }
.md-tbase { fill: color-mix(in srgb, var(--grey) 35%, transparent); }
.md-tarea { fill: color-mix(in srgb, var(--c-light, #F2C94C) 30%, transparent); stroke: var(--c-light, #F2C94C); stroke-width: 1.2; stroke-linejoin: round; }
.md-tco2 { fill: var(--c-co2, #A88BF5); }
.md-tco2t { fill: var(--c-co2, #A88BF5) !important; }
.md-tshow { stroke: color-mix(in srgb, var(--grey) 60%, transparent); stroke-width: .8; stroke-dasharray: 2 2; }
.md-tlab { font: 600 10px var(--sans, system-ui); fill: var(--grey); }
.md-tnow { stroke: #248FD3; stroke-width: 1.4; }
.md-tdot { fill: #248FD3; stroke: var(--bg, #000); stroke-width: 1.5; }

/* ---- the thermometer */
.md-hold-temp .md-k { --md-c: var(--c-heat, #F2643A); }
.md-thermo { height: 100%; width: auto; max-width: 100%; max-height: 32rem; }
.md-thglass { fill: color-mix(in srgb, var(--grey) 10%, transparent); stroke: color-mix(in srgb, var(--grey) 55%, transparent); stroke-width: 1.5; }
.md-thshine { fill: rgba(255, 255, 255, .22); }
.md-thtick { stroke: var(--grey); stroke-width: 1.2; }
.md-thnum { font: 600 10px var(--sans, system-ui); fill: var(--grey); }
.md-thband { fill: #4CC38A; }
.md-thtri { fill: var(--strong, #fff); }
.md-thbig { font: 700 34px var(--sans, system-ui); letter-spacing: -.04em; fill: var(--strong, #fff); font-variant-numeric: tabular-nums; }
.md-thsub { font: 500 11px var(--sans, system-ui); fill: var(--grey); }
.md-thsafe .md-thbig { fill: #4CC38A; }
/* the big number and bar are in the picture now; the fish ranges and the last day stay under it */
.md-temp-rest > .tq-top { display: none; }