/* fishtank.cam/betta only (written into the page by sync/tank_betta_page.py as a link). 10/17. */
/* /betta: no camera yet, so no camera button or floating view */
html.betta .v3cam, html.betta #tankside, html.betta #view { display: none !important; }
html.betta .showline { display: none !important; }
/* Inside the filter: the five parts in the order the water meets them, as cut-outs (the 75P shows its canister there) */
html.betta #mediaflow { display: block !important; }
html.betta #mediaflow > .label { display: none; }
/* the cube is as tall as it is wide: on a computer its pictures keep to the 75P size */
html.betta #eco-drawn .swim, html.betta #flow-zoom .mk, html.betta #mock-setup .mk { max-width: 34rem; margin-left: auto; margin-right: auto; }
/* the end of the intro: his photo of the 30A today, where the 75P has its camera; then the planned look (10/17 late) */
html.betta .bplan { margin: 0 auto; width: min(100%, 30rem, calc((100dvh - var(--barh, 56px) - 7rem) * 760 / 800)); }
html.betta .bplan-slot { aspect-ratio: 760 / 800; border-radius: var(--r, 14px); overflow: hidden; background: #111; }
html.betta .bplan-slot img, html.betta .bshot img { display: block; width: 100%; height: auto; }
html.betta .bshot { margin: 0 auto; width: min(100%, 30rem); border-radius: var(--r, 14px); overflow: hidden; background: #111; }
/* the turning tank: the black back wall behind the water, pale sand */
html.betta .t4-bw { background: linear-gradient(#161a1d, #0b0d0f); }
html.betta .t4-bs { background: linear-gradient(#cbbd9f, #a39374); }
html.betta .t4-floor { background: linear-gradient(180deg, #d8ccb2, #b9aa8b); }
html.betta .t4-gside { background: linear-gradient(rgb(220 240 245 / 10%) 0 2.7%, rgb(140 190 210 / 26%) 2.7% 92%, #c2b394 92%); }
/* 10/22: both 30As are betta tanks (/plakat left, /betta right). The light's facts, its two day types, the plants by place,
   the cycle's steps (wrapping, unlike the one-line balance list) */
html.t30 .t30-facts { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
html.t30 .t30-days { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 40rem; margin: 1.5rem auto 0; padding: 0; }
html.t30 .t30-days li { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--grey) 9%, transparent); text-align: center; color: var(--grey); font-size: .875rem; }
html.t30 .t30-days b { color: var(--strong); font-size: 1rem; font-weight: 600; margin-bottom: .15rem; }
html.t30 .t30-note { max-width: 34rem; margin: 1.25rem auto 0; text-align: center; color: var(--grey); font-size: .875rem; line-height: 1.5; }
html.t30 .t30-place { max-width: 56rem; margin: clamp(2rem, 6vw, 3.5rem) auto 1.25rem; text-align: center; color: #248FD3; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
html.t30 .t30-place:first-of-type { margin-top: clamp(1.25rem, 4vw, 2rem); }
html.t30 .loop.t30-wrap { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
html.t30 .loop.t30-wrap li { white-space: normal; overflow: visible; text-overflow: clip; }
html.t30 .t30-facts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html.t30 .t30-facts .k { font-size: .75rem; }
html.t30 ul.scape li:only-child { grid-column: 1 / -1; justify-self: center; width: min(100%, 16rem); }
@media (min-width: 48rem) { html.t30 ul.scape li:last-child:nth-child(3n+1) { grid-column: 2; } }
/* the plant lists: a short last row sits in the middle */
html.t30 ul.scape { display: flex !important; flex-wrap: wrap; justify-content: center; }
html.t30 ul.scape li { width: calc((100% - var(--sp3, 1.5rem)) / 2); }
@media (min-width: 48rem) { html.t30 ul.scape li { width: calc((100% - 2 * var(--sp3, 1.5rem)) / 3); } }
html.t30 ul.scape li:only-child { width: min(100%, 16rem); }
@media (min-width: 48rem) { html.t30 ul.scape li:only-child { width: calc((100% - 2 * var(--sp3, 1.5rem)) / 3); } }