/* p6.css (fishtank.cam pass 6, 2026-10-23, his asks). Loaded last on the public pages. README section 59. */

/* ---- 1 to 5: the five tanks in the bar */
.p6-tk { display: flex; gap: 4px; align-items: center; margin: 0 .5rem 0 auto; }
.p6-tk a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 600 .8125rem/1 var(--sans, -apple-system, "SF Pro Text", Inter, system-ui, sans-serif);
  color: var(--grey, #8a8f98); text-decoration: none; font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s; }
.p6-tk a:hover { color: var(--strong, #fff); background: color-mix(in srgb, var(--grey, #8a8f98) 18%, transparent); }
.p6-tk a[aria-current] { background: #248FD3; color: #fff; }
header.bw-top .p6-tk { margin: 0 .25rem 0 auto; }
.p6-tk-m { display: none; }
@media (max-width: 47.99rem) {
  header .p6-tk { display: none; }
  .p6-tk-m { display: flex; position: absolute; z-index: 30; left: 50%; translate: -50% 0; top: calc(var(--barh, 56px) + env(safe-area-inset-top) + 10px); margin: 0;
    padding: 4px; gap: 4px; border-radius: 99px; background: color-mix(in srgb, var(--bg, #000) 70%, transparent); }
}

/* ---- the pixel clock, always shown */
.p6-clock { width: min(15rem, 62vw); margin: 0 auto .9rem; }
.p6-clock canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; padding: 3%; box-sizing: border-box; border-radius: 10px; background: #0a0b0d; }
#c-live .p6-clock { margin: 0 0 .75rem; }
@media (min-width: 64rem) { .p6-clock { width: 17rem; } }
.p6-clock-bowl { position: absolute; left: 16px; top: calc(var(--barh, 56px) + 52px); margin: 0; width: min(9rem, 34vw); z-index: 3; }
@media (min-width: 48rem) { .p6-clock-bowl { top: calc(var(--barh, 56px) + 16px); width: 11rem; } }
.bw-bowlbox { position: relative; }

/* ---- the betta is the pointer (computer with a mouse) */
html.p6-cur, html.p6-cur * { cursor: none !important; }
html.p6-cur input, html.p6-cur textarea, html.p6-cur [contenteditable] { cursor: text !important; }
.p6-betta { position: fixed; left: 0; top: 0; z-index: 2147483600; width: 64px; height: auto; pointer-events: none; opacity: 0; transition: opacity .25s;
  will-change: transform; filter: drop-shadow(0 3px 6px rgb(0 0 0 / 35%)); }
.chase-betta { display: none !important; }

/* ---- numbers with their scale and colour (High tech) */
.ctx { display: grid; gap: 1.6rem; margin: 2rem 0 1rem; max-width: 40rem; }
.ctx-k { margin: 0 0 1.6rem; font-weight: 600; color: var(--strong, #fff); }
.ctx-bar { position: relative; height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--grey, #8a8f98) 22%, transparent); }
.ctx-band { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: #4CC38A; }
.ctx-co2 .ctx-bar { background: linear-gradient(90deg, color-mix(in srgb, #248FD3 30%, transparent), color-mix(in srgb, #248FD3 30%, transparent) 50%, transparent 50%, transparent 75%, color-mix(in srgb, #E5534B 35%, transparent) 75%); }
.ctx-mk { position: absolute; top: -1.45rem; translate: -50% 0; font-size: .75rem; font-weight: 600; color: #4CC38A; font-variant-numeric: tabular-nums; }
.ctx-day { background: linear-gradient(90deg, #14213a, #2a3f66 30%, #2a3f66 70%, #14213a); }
.ctx-day .ctx-band { background: #F5B83D; opacity: .55; }
.ctx-day .ctx-soft { opacity: 1; }
.ctx-ends { display: flex; justify-content: space-between; gap: .5rem; margin: .5rem 0 0; font-size: .8125rem; color: var(--grey, #8a8f98); }
.ctx-ends b { color: var(--strong, #fff); font-weight: 600; }
.ctx-co2 .ctx-ends b { color: #4CC38A; } .ctx-light .ctx-ends b { color: #F5B83D; }
.ctx-line { margin: 0; color: var(--grey, #8a8f98); } .ctx-line b { color: var(--strong, #fff); font-weight: 600; }

/* ---- the appendix, folded */
.apx-fold { margin: 0 auto; width: min(100% - 32px, 72rem); }
.apx-fold > summary { list-style: none; display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.2rem; border-radius: 99px; font-weight: 600;
  background: color-mix(in srgb, var(--grey, #8a8f98) 14%, transparent); color: var(--strong, #fff); }
.apx-fold > summary::-webkit-details-marker { display: none; }
.apx-fold > summary::after { content: "+"; color: #248FD3; font-size: 1.2rem; line-height: 1; }
.apx-fold[open] > summary::after { content: "–"; }
#c-appendix { padding-bottom: 3rem; }

/* ---- the bowl pages' diagrams (pass 6: fewer words, a picture each) */
.p6-dg { margin: 1.5rem auto; width: min(100%, 40rem); }
.p6-dg svg { display: block; width: 100%; height: auto; overflow: visible; }
.p6-dg text { font: 600 11px var(--sans, -apple-system, "SF Pro Text", Inter, system-ui, sans-serif); fill: var(--strong, #f2f4f6); }
.p6-dg .dg-txt text.r { text-anchor: end; } .p6-dg .dg-txt text.c, .p6-dg .dg-c { text-anchor: middle; }
.p6-dg .dg-txt text.dk { fill: #3b3325; }
.p6-dg .dg-s, .p6-dg .dg-s2 { font-weight: 500; fill: var(--grey, #8a8f98); font-size: 10px; }
.dg-water { fill: color-mix(in srgb, #248FD3 30%, transparent); }
.dg-flowln { fill: none; stroke: #9fd3ee; stroke-width: 1.2; stroke-dasharray: 2 7; opacity: .6; }
.dg-roots path { fill: none; stroke: #8a6a3a; stroke-width: 1.4; }
.dg-disc { fill: color-mix(in srgb, var(--grey, #8a8f98) 14%, transparent); }
.dg-arrow { fill: none; stroke: var(--grey, #8a8f98); stroke-width: 1.5; } .dg-head { fill: var(--grey, #8a8f98); }
.dg-ruler { fill: none; stroke: var(--grey, #8a8f98); stroke-width: 1.2; }
.lf-t { fill: color-mix(in srgb, var(--grey, #8a8f98) 22%, transparent); } .lf-f { fill: #E5534B; transform-origin: 210px 61px; }
/* the anchialine pool */
.pl-sea { fill: #1f5f93; } .pl-wave { fill: none; stroke: #7cc0f2; stroke-width: 1.5; }
.pl-rock { fill: #2b2321; } .pl-holes circle { opacity: .9; }
.pl-pool { fill: #10302f; } .pl-poolw { fill: #2f9c95; }
.pl-fresh, .pl-salt { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 8; }
.pl-fresh { stroke: #9fd8f5; } .pl-salt { stroke: #3c8fd6; }
.pl-mix { fill: none; stroke: #5fd1c8; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 6; }
.p6-pool .dg-txt .fr { fill: #9fd8f5; } .p6-pool .dg-txt .sa { fill: #7cc0f2; } .p6-pool .dg-txt .br { fill: #5fd1c8; }
.pl-arr path { fill: none; stroke: var(--grey, #8a8f98); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* the jar's loop and the evaporation strip */
.lp-ring { fill: none; stroke: color-mix(in srgb, var(--grey, #8a8f98) 30%, transparent); stroke-width: 2; }
.lp-flow { fill: none; stroke: #248FD3; stroke-width: 2.5; stroke-dasharray: 3 14; stroke-linecap: round; }
.lp-sun circle { fill: #F5B83D; } .lp-sun path { stroke: #F5B83D; stroke-width: 2; stroke-linecap: round; }
.lp-in { stroke: #F5B83D; stroke-width: 2; } .lp-inh { fill: #F5B83D; }
.lp-n circle { fill: color-mix(in srgb, var(--c) 22%, var(--bg, #000)); stroke: var(--c); stroke-width: 2; }
.p6-dg .lp-n text { text-anchor: middle; font-size: 10.5px; } .p6-dg .lp-n text.s { font-weight: 500; font-size: 9px; fill: var(--grey, #8a8f98); }
.p6-loop .dg-txt text { font-weight: 500; font-size: 9.5px; fill: var(--grey, #8a8f98); }
.ev-glass { fill: none; stroke: color-mix(in srgb, #9fd3ee 60%, transparent); stroke-width: 2; }
.ev-w { fill: color-mix(in srgb, #3b9ac4 45%, transparent); } .ev-salty { fill: color-mix(in srgb, #2f7fa8 70%, transparent); }
.ev-up path { fill: none; stroke: #9fd3ee; stroke-width: 1.6; stroke-linecap: round; opacity: .8; }
.ev-drop { fill: #9fd8f5; }
.p6-evap .dg-c { font-size: 10px; }
/* motion with a purpose: the water moves the way the words say; nothing else */
@media (prefers-reduced-motion: no-preference) {
  html:not(.flat) .pl-fresh { animation: p6flow 2.4s linear infinite; }
  html:not(.flat) .pl-salt { animation: p6flow 3s linear infinite; }
  html:not(.flat) .pl-mix { animation: p6flow 2s linear infinite; }
  html:not(.flat) .pl-tide { animation: p6tide 6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
  html:not(.flat) .lp-flow { animation: p6loop 5s linear infinite; }
  html:not(.flat) .ev-up path { animation: p6rise 2.6s ease-in-out infinite; }
  html:not(.flat) .dg-flowln { animation: p6flow 4s linear infinite; }
}
@keyframes p6flow { to { stroke-dashoffset: -24; } }
@keyframes p6loop { to { stroke-dashoffset: -170; } }
@keyframes p6tide { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.82); } }
@keyframes p6rise { 0% { transform: translateY(4px); opacity: 0; } 40% { opacity: .8; } 100% { transform: translateY(-8px); opacity: 0; } }
/* the plant cards on the neo bowl: drawn, small, two or four across */
.p6-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 48rem) { .p6-cards { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
/* pass 6 (his words: "10 minutes to scroll"): the bowl builds over a shorter scroll */
@media (prefers-reduced-motion: no-preference) { html:not(.flat) .bw-intro { height: 380svh; } }

/* ---- one bar and one menu on the pages that had none (status, guides, live, the console): the bowl pages' bar */
html.p6-hasbar { --p6-barh: 56px; }
html.p6-hasbar body { padding-top: var(--p6-barh); }
.p6-bar { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--p6-barh, 56px); display: grid; grid-template-columns: 2.75rem 1fr auto 2.75rem; align-items: center; gap: .5rem;
  padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--bg, #000) 72%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid transparent; transition: border-color .3s;
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif); }
.p6-bar.solid { border-bottom-color: color-mix(in srgb, var(--grey, #8e8e93) 22%, transparent); }
.p6-brand { justify-self: center; display: flex; align-items: center; gap: .55rem; color: var(--strong, #fff) !important; text-decoration: none; }
.p6-brand img { width: 26px; height: 26px; }
.p6-brand span { display: grid; line-height: 1.1; }
.p6-brand b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.p6-brand small { font-size: .72rem; color: var(--grey, #8e8e93); }
.p6-brand small:empty { display: none; }
.p6-ib { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--strong, #fff); cursor: pointer; }
.p6-ib:hover { background: color-mix(in srgb, var(--grey, #8e8e93) 16%, transparent); }
.p6-ib svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.p6-burger { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.p6-burger i { display: block; width: 18px; height: 1.5px; margin: 2px 0; background: currentColor; border-radius: 1px; }
.p6-bar .p6-tk { margin: 0; }
@media (min-width: 48rem) { .p6-bar { grid-template-columns: 2.75rem auto 1fr auto 2.75rem; } .p6-brand { justify-self: start; } .p6-bar .p6-tk { grid-column: 4; } .p6-bar .p6-burger { grid-column: 5; } }
/* the page's own old top row (name and the four links) gives way to the bar */
html.p6-hasbar .wrap > .top, html.p6-hasbar .wrap > .pagesrow { display: none; }
/* the menu card, the same look as on the tank pages */
.p6-menu.jumpsheet.mnu { --line: color-mix(in srgb, var(--grey, #8e8e93) 22%, transparent); --raise: color-mix(in srgb, var(--grey, #8e8e93) 14%, transparent);
  width: 22.5rem; max-width: calc(100vw - 32px); max-height: calc(100dvh - 80px); margin: 64px max(16px, env(safe-area-inset-right)) auto auto;
  padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--bg, #000); color: var(--text, #e8e8ed); box-shadow: 0 24px 64px rgb(0 0 0 / 22%); overflow: auto; overscroll-behavior: contain;
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif); }
.p6-menu::backdrop { background: rgb(0 0 0 / 32%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.p6-menu .mnu-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 3.5rem; padding: 0 .5rem 0 1.25rem; background: var(--bg, #000); border-bottom: 1px solid var(--line); color: var(--strong, #fff); font: 600 1.0625rem/1 inherit; letter-spacing: -.02em; }
.p6-menu .mnu-head:focus { outline: none; }
.p6-menu .mnu-x { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--strong, #fff); cursor: pointer; }
.p6-menu .mnu-x svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.p6-menu .mnu-g { padding: .75rem .5rem .25rem; } .p6-menu .mnu-g + .mnu-g { border-top: 1px solid var(--line); }
.p6-menu .mnu-l { margin: 0 .75rem .35rem; color: var(--grey, #8e8e93); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.p6-menu .mnu-list { display: grid; }
.p6-menu .mnu-list a { display: flex; align-items: center; gap: .75rem; min-height: 3rem; padding: .35rem .75rem; border-radius: 12px; color: var(--strong, #fff); text-decoration: none; font-size: 1rem; letter-spacing: -.01em; }
.p6-menu .mnu-list a.tk { min-height: 3.5rem; }
.p6-menu .mnu-list a:hover { background: var(--raise); }
.p6-menu .mnu-t { display: grid; gap: .1rem; min-width: 0; } .p6-menu .mnu-t b { font-weight: 500; } .p6-menu .mnu-list a.tk .mnu-t b { font-weight: 600; }
.p6-menu .mnu-t small { color: var(--grey, #8e8e93); font-size: .8125rem; }
.p6-menu .mnu-list a[aria-current] { color: #5AB0EA; }
.p6-menu .mnu-list a[aria-current="page"]::after { content: ""; flex: none; width: .5rem; height: .5rem; margin-left: auto; border-radius: 50%; background: #248FD3; }
.p6-menu .mnu-list .chi { display: inline-flex; width: 1.25rem; height: 1.25rem; flex: none; color: var(--grey, #8e8e93); }
.p6-menu .mnu-list .chi svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.p6-menu .mnu-list a.tk .chi { width: 1.5rem; height: 1.5rem; }
.p6-menu .mnu-list a[target="_blank"] .mnu-t b::after { content: " ↗"; color: var(--grey, #8e8e93); font-weight: 400; }
.p6-menu .mnu-clock { margin: .25rem 1rem .9rem; }
.p6-menu .mnu-clock canvas { display: block; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: 4 / 1; padding: 3.2%; border-radius: 10px; background: #0a0b0d; }
/* "View live" and "Join the chat" under the camera */
.p6-go { display: flex; justify-content: center; gap: .6rem; margin: 1rem 0 0; flex-wrap: wrap; }
.p6-btn { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.2rem; border-radius: 99px; background: #248FD3; color: #fff !important; font-weight: 600; text-decoration: none; }
.p6-btn2 { background: color-mix(in srgb, #A970FF 22%, transparent); color: var(--strong, #fff) !important; }
/* the charts (charts.js) */
.p6c { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans, -apple-system, system-ui, sans-serif); }
.p6c-band { fill: color-mix(in srgb, #4CC38A 16%, transparent); }
.p6c-goal { stroke: #4CC38A; stroke-width: 1.2; stroke-dasharray: 4 4; }
.p6c-mark { stroke: color-mix(in srgb, #5AB0EA 55%, transparent); stroke-width: 1.2; stroke-dasharray: 2 3; }
.p6c-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.p6c-last { stroke: var(--bg, #000); stroke-width: 2; }
.p6c-y, .p6c-x { font-size: 11px; fill: var(--grey, #8e8e93); }
.p6c-y { text-anchor: end; } .p6c-x.end { text-anchor: end; }
.p6c-v { font-size: 13px; font-weight: 700; fill: var(--strong, #fff); } .p6c-v.ok { fill: #4CC38A; } .p6c-v.off { fill: #FF8A5B; }
.p6c-empty { margin: .5rem 0; color: var(--grey, #8e8e93); font-size: .875rem; }
/* the guides' own tab bars stay under the site bar */
html.p6-hasbar .bar { top: var(--p6-barh, 56px) !important; }

/* 10/30: the tank switcher as pictures on every page with this bar (p6.js pics; the same look as p8.css on the p8 pages) */
nav.p6-tk.p8-sw { gap: 2px; }
nav.p6-tk.p8-sw a.p8-tk { position: relative; display: inline-flex; align-items: center; gap: .4rem; width: auto; height: 30px; padding: 0 .65rem 0 3px; border-radius: 999px; font: 600 .75rem/1 var(--sans, -apple-system, "SF Pro Text", Inter, system-ui, sans-serif); color: var(--grey, #8a8f98); text-decoration: none; background: none; }
nav.p6-tk.p8-sw a.p8-tk:hover { color: var(--strong, #fff); background: color-mix(in srgb, var(--grey, #8e8e93) 14%, transparent); }
nav.p6-tk.p8-sw a.p8-tk[aria-current] { color: var(--strong, #fff); background: color-mix(in srgb, #248FD3 22%, transparent); }
nav.p6-tk.p8-sw .p8-th { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: none; background: #0d1114; display: grid; place-items: center; }
nav.p6-tk.p8-sw .p8-th img { width: 100%; height: 100%; object-fit: cover; }
nav.p6-tk.p8-sw .p8-live { position: absolute; left: 20px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 2px var(--bg, #000); }
@media (max-width: 79.99rem) { header nav.p6-tk.p8-sw .p8-tn { display: none; } header nav.p6-tk.p8-sw a.p8-tk { padding: 0 3px; } }
nav.p6-tk.p8-sw.p6-tk-m { max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--bg, #000) 70%, transparent); }
nav.p6-tk.p8-sw.p6-tk-m .p8-tn { display: inline; }