/* pass11.css (fishtank.cam, 2026-10-26 afternoon; his review: "be critical of this site ... hide things behind sections:
   blue tabs that say More ... blue pop-outs to reduce scrolling", the turn "smoother", the cycle "fits better in the
   centre ... cuts off at the top"). Loaded last. README section 92. */

/* ---- the opening turn as pictures on a phone (v4.js SEQ): the live 3D box is laid out (it is measured) but not drawn */
html.t4-seqon .t4 > .t4l:not(.t4-front), html.t4-seqon .t4-front > :not(.t4-gm) { display: none !important; }
html.t4-seqon .t4-front { visibility: hidden; }
.t4-seq { position: absolute; display: block; pointer-events: none; }

/* ---- the blue "More" buttons */
.p11-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin: clamp(1.25rem, 3vw, 2rem) auto 0; max-width: 46rem; }
.p11-btn { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.875rem; padding: .375rem 1rem .375rem .375rem; border: 0; border-radius: 999px;
  background: #248FD3; color: #fff; font: 600 .9375rem/1.2 var(--sans, system-ui); letter-spacing: -.005em; cursor: pointer; text-align: left;
  box-shadow: 0 6px 18px rgb(36 143 211 / 28%); transition: background .2s ease, transform .2s ease; -webkit-tap-highlight-color: transparent; }
.p11-btn:hover { background: #1f7fbd; }
.p11-btn:active { transform: scale(.98); }
.p11-btn:focus-visible { outline: 3px solid color-mix(in srgb, #248FD3 45%, var(--strong, #fff)); outline-offset: 3px; }
.p11-tag { flex: none; padding: .3125rem .5625rem; border-radius: 999px; background: rgb(255 255 255 / 22%); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.p11-ar { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 40rem) { .p11-row { flex-direction: column; align-items: stretch; } .p11-btn { width: 100%; } .p11-lb { flex: 1; } }

/* ---- the pop-out: a sheet from the bottom on a phone, a panel in the middle on a computer; a blue top */
.p11-sheet { width: min(56rem, calc(100vw - 2rem)); max-width: none; max-height: min(86vh, 56rem); padding: 0; border: 0; border-radius: 1.25rem; overflow: hidden;
  background: var(--bg, #000); color: var(--text, #ddd); box-shadow: 0 24px 80px rgb(0 0 0 / 45%); }
.p11-sheet[open] { display: block; animation: p11-in .28s cubic-bezier(.2, .8, .2, 1); }
.p11-sheet::backdrop { background: rgb(4 18 30 / 62%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes p11-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.p11-in { display: flex; flex-direction: column; max-height: inherit; }
.p11-top { flex: none; display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding: .5rem .5rem .5rem 1.25rem; background: #248FD3; color: #fff; }
.p11-top h2 { flex: 1; min-width: 0; margin: 0; color: #fff; font: 700 1.125rem/1.2 var(--display, var(--sans, system-ui)); letter-spacing: -.02em; }
.p11-x { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 18%); color: #fff; cursor: pointer; }
.p11-x:hover, .p11-x:focus-visible { background: rgb(255 255 255 / 32%); outline: none; }
.p11-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 1.25rem clamp(1rem, 3vw, 2rem) calc(1.5rem + env(safe-area-inset-bottom)); }
.p11-body > :first-child { margin-top: 0 !important; }
.p11-body .lede-2 .head, .p11-body .dgsec > .head { display: none; }
.p11-body .lede, .p11-body .tale { text-align: left; }
.p11-body #resources, .p11-body #photo-credits { padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
.p11-body #resources > .wrap > .lede, .p11-body #photo-credits .head { display: none; }
.p11-body .wrap { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
@media (max-width: 45.99rem) {
  .p11-sheet { width: 100vw; max-height: 88svh; margin: auto 0 0; border-radius: 1.25rem 1.25rem 0 0; }
  @keyframes p11-in { from { transform: translateY(40%); } to { transform: none; } }
}
html.p11-open { overflow: hidden; }

/* ---- a section that went into pop-outs entirely: folded away (its pop-out still opens from its neighbour's button) */
.chapter > section.p11-gone { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; }

/* ---- held pictures sit under the bar AND the chapter strip (the cycle was cut off at the top under the strip) */
@media (max-width: 63.99rem) {
  /* 10/27 (his words: "There's black lines when scrolling"): the held picture sat 4 px under the chapter strip, and the
     words scrolling up showed through that gap as thin cut-off lines; now flush with the strip, and the words fade out
     under the picture's lower edge instead of being cut by a hard black edge */
  html.scrub .md-pic { top: calc(var(--barh, 56px) + var(--striph, 0px)); padding-top: .25rem; height: calc(48svh - (var(--barh, 56px) + var(--striph, 0px)) * .3); }
  .md-pic::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 2rem; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
  html.scrub .md-steps > li { min-height: 44svh; }
}
@media (min-width: 64rem) { html.scrub .md-steps > li { min-height: 54vh; } }
/* the cycle: the ring fills its band and sits in its middle */
.md-hold-cyc .md-pic { align-items: center; }
.md-hold-cyc .md-cyc { width: auto; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 1; margin: 0 auto; }
/* 10/27 (his words: "The repeats and cycle is awful"): one ring and the words for the lit stop. Phones: the ring with its
   words under it, held together on screen; the list under them only paces the scroll. Computers: the ring, steps beside. */
.md-cycart { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
.md-cycart .md-cyc { flex: 1 1 auto; min-height: 0; }
.md-cap { display: none; }
@media (max-width: 63.99rem) {
  html.scrub .md-hold-cyc .md-pic { height: calc(94svh - var(--barh, 56px) - var(--striph, 0px)); }
  .md-hold-cyc .md-cycart { justify-content: center; gap: .25rem; padding-bottom: 4svh; }
  .md-hold-cyc .md-cycart .md-cyc { flex: 0 0 auto; height: min(38svh, 80vw); width: auto; }
  .md-cap { display: block; width: min(100%, 24rem); min-height: 9.5rem; padding: .75rem 0 0; text-align: center; }
  .md-cap h3 { margin: 0; font-size: clamp(1.375rem, 6vw, 1.75rem); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; color: var(--c, var(--strong)); text-wrap: balance; }
  .md-cap .md-t { margin: .5rem auto 0; font-size: 1rem; }
  .md-hold-cyc .md-steps > li { opacity: 0 !important; }
  html.scrub .md-hold-cyc .md-steps { padding-bottom: 0; }
}

/* ---- 10/26 (his words: "this is way too long and repeats way too much"; "routines shouldn't be all hidden") ---- */
/* shorter held steps: the words swap sooner, the page is about half as long */
@media (max-width: 63.99rem) { html.scrub .md-steps > li { min-height: 27svh; } html.scrub .md-steps { padding-bottom: 10svh; } :root { --s-sec: 4rem; } }
@media (min-width: 64rem) { html.scrub .md-steps > li { min-height: 38vh; } :root { --s-sec: clamp(4rem, 6vw, 6.5rem); } }
/* the routine at a glance (Care), the detail stays behind the More buttons */
.routine { list-style: none; margin: clamp(1.25rem, 3vw, 2rem) auto 0; padding: 0; max-width: 40rem; display: grid; gap: 1px; border-radius: 1rem; overflow: hidden; background: color-mix(in srgb, var(--strong, #fff) 12%, transparent); }
.routine li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: baseline; padding: .875rem 1.125rem; background: var(--bg, #000); text-align: left; }
.routine b { color: #248FD3; font-weight: 650; letter-spacing: -.01em; }
.routine span { color: var(--text, #ccc); line-height: 1.45; }
@media (max-width: 30rem) { .routine li { grid-template-columns: 1fr; gap: .125rem; } }
/* a folded section keeps no gap after it (story.css's section breaks are more specific than .p11-gone) */
html.v4 body .chapter > section.band.sub.p11-gone.p11-gone.p11-gone { margin: 0 !important; padding: 0 !important; }

/* ---- 10/27 phone pass (his words: "See where I learn and shop" opens a pop-out that is cut off on a phone).
   The sheet is pinned to the bottom of what is visible (dvh follows Safari's bars), keeps clear of the notch, and its last
   line stays above the home bar and the browser's own bottom bar; the sections it sits in lose their entrance shift while
   it is open (a transformed, clipped parent is what Safari has clipped a pop-out by). */
@media (max-width: 45.99rem) {
  .p11-sheet { position: fixed; inset: auto 0 0 0; height: auto; max-height: 88svh; max-height: calc(100dvh - max(6rem, env(safe-area-inset-top) + 2rem)); }
  .p11-body { padding-bottom: calc(3rem + env(safe-area-inset-bottom)); }
}
.p11-host { transform: none !important; filter: none !important; contain: none !important; will-change: auto !important; content-visibility: visible !important; }
/* the cycle's status line is not part of the story (his words: "don't put my current cycle status in that") */
#ncycle-say { display: none !important; }
/* 10/27 phone pass: the floating buttons sat on the words and on the last buttons; on a phone they are two round icons */
@media (max-width: 51.25rem) {
  html.v4 .v3dock .v3btn { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; }
  html.v4 .v3dock .v3cam span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.v4 .v3dock .v3btn svg { width: 1.15rem; height: 1.15rem; }
}
/* the pop-out title already names it: no second small heading inside (Inside the filter) */
.p11-sheet .p11-body .lede-2 > .head { display: none !important; }