/* THE DIVE (templates/journey.html). Loaded by the dive's page only.

   One idea carries the page: you go down. The first two steps happen in the
   clear shallows under the site's own top bar, which is the surface; choosing
   the star is where you go under, and every step after it is a little deeper
   and a little darker, until the tank lights up at the bottom. The sea, the
   light from the surface and the drifting silt are the one bold thing; the
   cards, the gauge and the dive computer stay quiet and legible on top of it.

   Every colour is a token in style.css :root (the THE DIVE block). */

/* ------------------------------------------------------------- the canvas */

/* The two literals in this file: @property needs a plain initial value, and
   these are --dive-0-top and --dive-0-bottom. The masks below are alpha, not
   paint. Registered so the sea can fade back to the surface on the way out. */
@property --sea-top    { syntax: "<color>"; inherits: true; initial-value: #eaf6fb; }
@property --sea-bottom { syntax: "<color>"; inherits: true; initial-value: #c6e4f2; }
@property --picks-top    { syntax: "<length>"; inherits: false; initial-value: 0rem; }
@property --picks-bottom { syntax: "<length>"; inherits: false; initial-value: 0rem; }

/* The sea fills whatever the top bar leaves of the window, and no more. */
body.is-dive { background: var(--dive-6-bottom); min-height: 100vh; display: flex; flex-direction: column; }
body.is-dive::before { display: none; }          /* no ambient plants under the sea */
.is-dive .page { max-width: none; width: 100%; padding: 0; display: flex; flex-direction: column; flex: 1; }
.is-dive .colophon { display: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.dive {
  --sea-top: var(--dive-0-top);
  --sea-bottom: var(--dive-0-bottom);
  --ink-here: var(--ink);
  --ink-here-soft: var(--ink-soft);
  --panel-here: var(--dive-glass);
  --line-here: var(--line);
  --accent-here: var(--sea);
  --accent-bright-here: var(--sea-bright);
  --accent-ink-here: var(--on-sea);
  --ray-opacity: 1;
  --snow-opacity: 0.15;
  position: relative;
  isolation: isolate;
  flex: 1;
  color: var(--ink-here);
  background: linear-gradient(180deg, var(--sea-top), var(--sea-bottom));
  /* No colour fade from one depth to the next. On a long shelf it repainted
     the whole page, every card's text included, every frame for over a
     second: the lag Efe felt (2026-10-24). The page transition already
     crossfades the old water into the new, on the graphics chip. */
  overflow-x: clip;
}

.dive[data-depth="1"] { --sea-top: var(--dive-1-top); --sea-bottom: var(--dive-1-bottom); --ray-opacity: 0.85; --snow-opacity: 0.25; }
.dive[data-depth="2"] { --sea-top: var(--dive-2-top); --sea-bottom: var(--dive-2-bottom); --ray-opacity: 0.6; --snow-opacity: 0.5; }
.dive[data-depth="3"] { --sea-top: var(--dive-3-top); --sea-bottom: var(--dive-3-bottom); --ray-opacity: 0.45; --snow-opacity: 0.6; }
.dive[data-depth="4"] { --sea-top: var(--dive-4-top); --sea-bottom: var(--dive-4-bottom); --ray-opacity: 0.32; --snow-opacity: 0.7; }
.dive[data-depth="5"] { --sea-top: var(--dive-5-top); --sea-bottom: var(--dive-5-bottom); --ray-opacity: 0.2; --snow-opacity: 0.8; }
.dive[data-depth="6"] { --sea-top: var(--dive-6-top); --sea-bottom: var(--dive-6-bottom); --ray-opacity: 0.08; --snow-opacity: 0.85; }

/* Under the surface the ink turns pale and the glass turns dark. */
.dive:not([data-depth="0"]):not([data-depth="1"]) {
  --ink-here: var(--dive-ink-deep);
  --ink-here-soft: var(--dive-ink-deep-soft);
  --panel-here: var(--dive-glass-deep);
  --line-here: var(--dive-line-deep);
  --accent-here: var(--dive-accent);
  --accent-bright-here: var(--dive-accent-bright);
  --accent-ink-here: var(--dive-accent-ink);
}

/* Light from the surface: soft shafts, fading with depth and with distance
   from the top of the page. */
.dive__sea { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.dive__rays {
  position: absolute; inset: -10% -20% 30%;
  background: repeating-linear-gradient(104deg,
    transparent 0 7%, var(--dive-ray) 8% 10.5%, transparent 12% 19%,
    var(--dive-ray) 20% 21%, transparent 22.5% 31%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  opacity: var(--ray-opacity);
  transform-origin: 50% 0;
  animation: sway 18s ease-in-out infinite alternate;
  transition: opacity 1.2s ease;
}
@keyframes sway { from { transform: skewX(-4deg); } to { transform: skewX(4deg); } }

/* Silt drifting in the water: two layers at two sizes and two speeds, so the
   near one moves past the far one. */
.dive__snow {
  position: absolute; inset: -200px 0 0;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, var(--dive-snow), transparent 70%),
    radial-gradient(1.2px 1.2px at 140px 90px, var(--dive-snow), transparent 70%),
    radial-gradient(2px 2px at 80px 170px, var(--dive-snow), transparent 70%),
    radial-gradient(1px 1px at 190px 150px, var(--dive-snow), transparent 70%);
  background-size: 220px 220px;
  opacity: var(--snow-opacity);
  animation: silt 70s linear infinite;
  transition: opacity 1.2s ease;
}
.dive__snow--far { background-size: 140px 140px; opacity: calc(var(--snow-opacity) * 0.6); animation-duration: 120s; filter: blur(0.6px); }
@keyframes silt { from { transform: translateY(0); } to { transform: translateY(220px); } }

/* ----------------------------------------------------------------- layout */

/* The site's own bar scrolls away on the dive; the dive's bar takes its
   place at the top of the screen, the way Apple pins a product's bar. */
.is-dive .topbar { position: relative; }

.dive__grid {
  position: relative;
  max-width: 84rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.5rem) var(--gutter) 6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  grid-template-areas: "steps side";
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.steps { grid-area: steps; min-width: 0; display: grid; gap: 0.6rem; align-content: start; }
.step { min-width: 0; }
.dive__side {
  grid-area: side; position: sticky; top: 5.25rem;
  display: flex; flex-direction: column; gap: 1rem;
  /* Never taller than the window under the bar (Efe, 2026-10-28: the fish
     at the bottom of the list were out of sight, their buttons cut in
     half). The tank gives a little height on short screens and the list of
     fish scrolls in its own box; the score stays put. */
  max-height: calc(100vh - 6.5rem);
  max-height: calc(100dvh - 6.5rem);
}

.dive :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 10px; }

/* ---------------------------------------------------------------- the bar */

/* Frosted glass over the sea, pinned to the top: the depth marks of the
   ladder, where you are, and the score. */
.divebar {
  position: sticky; top: 0; z-index: 25;
  color: var(--ink-here);
  background: color-mix(in srgb, var(--sea-top) 74%, transparent);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-here);
}
.divebar__inner {
  max-width: 84rem; margin: 0 auto; min-height: 3.5rem;
  padding: 0.5rem var(--gutter);
  display: flex; align-items: center; gap: 1rem;
}
.divebar__marks { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.1rem; }
.divebar__mark { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; color: inherit; }
.divebar__dot {
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: 0.5;
  transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease;
}
.divebar__stop.is-done .divebar__dot { background: currentColor; opacity: 0.75; }
.divebar__stop.is-here .divebar__dot {
  background: var(--accent-here); border-color: var(--accent-here); opacity: 1;
  transform: scale(1.45); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-here) 25%, transparent);
}
.divebar__stop.is-skipped .divebar__dot { border-style: dashed; opacity: 0.35; }
a.divebar__mark:hover .divebar__dot { opacity: 1; transform: scale(1.3); }
.divebar__where { margin: 0; display: flex; align-items: baseline; gap: 0.55rem; white-space: nowrap; }
.divebar__label { font: 650 0.9375rem/1 var(--sans); letter-spacing: -0.01em; }
.divebar__depth { font: 400 0.75rem/1 var(--mono); color: var(--ink-here-soft); }
.divebar__score { margin: 0 0 0 auto; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--ink-here-soft); white-space: nowrap; }
.divebar__score b { font: 700 1.3rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--ink-here); }
.divebar__score::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--dive-good); }
.divebar__score.is-mid::before { background: var(--dive-mid); }
.divebar__score.is-bad::before { background: var(--dive-bad); }
.divebar__score.is-waiting::before { background: transparent; border: 1.5px dashed currentColor; }
/* On a phone the score is a button: it opens your fish as a sheet (below,
   "your fish, on a phone"), with how many kinds there are beside it. */
a.divebar__score {
  min-height: 2.75rem; padding: 0.3rem 0.75rem 0.3rem 0.8rem; border-radius: 999px;
  color: var(--ink-here-soft); box-shadow: inset 0 0 0 1.5px var(--line-here);
  transition: box-shadow 0.15s ease;
}
a.divebar__score:hover { box-shadow: inset 0 0 0 1.5px var(--accent-here); }
.divebar__fish {
  display: inline-flex; align-items: center; gap: 0.3rem; padding-left: 0.55rem; border-left: 1px solid var(--line-here);
  font: 700 0.9375rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-here);
}
.divebar__fish svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Beside the steps on a wider screen, the computer itself shows the score. */
@media (min-width: 62.01rem) { .divebar__score { display: none; } }
@media (max-width: 34rem) { .divebar__level { display: none; } }

/* ------------------------------------------------------------- the strips */

/* A question already answered, folded into one line: the depth, the
   question, your answer, and Change. */
.recap {
  display: grid; grid-template-columns: 3.25rem 7.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.9rem;
  min-height: 3.5rem; padding: 0.5rem 0.6rem 0.5rem 1.1rem; border-radius: 16px;
  background: var(--panel-here); border: 1px solid var(--line-here);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.recap__depth { font: 400 0.75rem/1 var(--mono); color: var(--ink-here-soft); }
.recap__label { font-size: 0.875rem; color: var(--ink-here-soft); }
.recap__answer { display: flex; align-items: center; gap: 0.65rem; min-width: 0; font: 650 1rem/1.25 var(--display); letter-spacing: -0.01em; }
.recap__photo { width: 3rem; flex: none; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.recap__change {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.45rem 0.95rem; border-radius: 999px;
  color: inherit; box-shadow: inset 0 0 0 1.5px var(--line-here);
  font: 650 0.875rem/1 var(--sans); transition: box-shadow 0.15s ease;
}
.recap__change:hover { box-shadow: inset 0 0 0 1.5px var(--accent-here); }

/* ------------------------------------------------------------------- step */

/* One question to a screen, Apple's way: the depth small above, the question
   very large and centred, a few words under it, then room. */
.step { padding: clamp(2.5rem, 9vh, 6.5rem) 0 2rem; scroll-margin-top: 4.5rem; }
.step__head { margin: 0 auto clamp(2rem, 5vw, 3.25rem); max-width: 46rem; text-align: center; }
.step__depth { margin: 0 0 0.9rem; font: 500 0.875rem/1 var(--body); color: var(--ink-here-soft); }
.step__title {
  margin: 0;
  font: 700 clamp(2.6rem, 1.2rem + 4.2vw, 5.25rem)/0.98 var(--display);
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.step__title:focus { outline: none; }
.step__lede {
  margin: 1.15rem auto 0; max-width: 44ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; color: var(--ink-here-soft);
}
.step__error {
  margin: 1.25rem auto 0; padding: 0.75rem 1rem; border-radius: 12px; max-width: 56ch; text-align: left;
  background: var(--coral-wash); border: 1px solid var(--coral); color: inherit; font-weight: 500;
}

.step__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.5rem; }
.step__nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-here);
}

.dive-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.8rem 1.6rem; border: 0; border-radius: 999px;
  background: var(--accent-here); color: var(--accent-ink-here);
  font: 700 1rem/1 var(--display); letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 24px -10px var(--glow), inset 0 1px 0 var(--dive-highlight);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.dive-button:hover { background: var(--accent-bright-here); transform: translateY(-1px); }
/* Onward to the next step: the same arrow as the way out of the tank. */
.dive-button--next { padding-right: 1.2rem; }
.dive-button--next::after {
  content: ""; width: 0.5rem; height: 0.5rem; margin-left: 0.15rem;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: translateX(-2px) rotate(45deg); transition: transform 0.2s ease;
}
.dive-button--next:hover::after { transform: translateX(2px) rotate(45deg); }
.dive-button:active { transform: translateY(1px); }
.dive-button--quiet { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px var(--line-here); }
.dive-button--quiet:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.dive-button--surface {
  min-height: 3.5rem; padding-inline: 2rem; font-size: 1.125rem;
  background: linear-gradient(180deg, var(--dive-lamp), var(--dive-lamp-deep)); color: var(--dive-lamp-ink);
  box-shadow: 0 0 0 0 var(--dive-lamp-glow), 0 14px 40px -12px var(--dive-lamp-glow);
}
.dive-button--surface:hover { background: linear-gradient(180deg, var(--dive-lamp-bright), var(--dive-lamp)); }
/* The quiet button: Back, No crew, Start a new dive, More. A button, never an
   underlined link (Efe, 2026-10-20: no hyperlink underbar on any button). */
.dive-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 3rem; padding: 0.75rem 1.4rem; border: 0; border-radius: 999px;
  background: transparent; color: inherit; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--line-here);
  font: 650 1rem/1 var(--display); letter-spacing: -0.01em; text-decoration: none;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
.dive-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent-here); background: color-mix(in srgb, currentColor 7%, transparent); }
.dive-ghost--back::before {
  content: ""; display: inline-block; width: 0.5rem; height: 0.5rem;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateX(2px) rotate(45deg);
}
.dive a, .dive button { text-decoration: none; }

/* ---------------------------------------------------------------- choices */

.choices { list-style: none; margin: 0 auto; padding: 0; max-width: 56rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.choice {
  position: relative;
  display: grid; align-content: start; gap: 0.5rem;
  min-height: 10.5rem; padding: 1.35rem 1.35rem 1.25rem;
  border-radius: 22px; border: 1px solid var(--line-here);
  background: var(--panel-here);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: inherit; text-decoration: none; cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.choice:hover { transform: translateY(-3px); border-color: var(--accent-here); box-shadow: 0 18px 40px -24px var(--shadow-deep); }
a.choice.is-chosen, .choice:has(.choice__input:checked) { border-color: var(--accent-here); box-shadow: inset 0 0 0 1.5px var(--accent-here); }
/* A tile with a real box to tick shows the live tick, never the answer the
   page was drawn with: change an answer and the old one goes dark (Efe,
   2026-10-28: 29 and 40 gallons both lit). Only a browser without :has()
   falls back to the drawn answer. */
@supports not selector(:has(*)) {
  label.choice.is-chosen, .size.is-chosen, .tlevel.is-chosen { border-color: var(--accent-here); box-shadow: inset 0 0 0 1.5px var(--accent-here); }
  .size.is-chosen .size__water { opacity: 1; }
}
.choice__fish { display: flex; gap: 0.15rem; color: var(--navy); margin-bottom: 0.35rem; }
.dive:not([data-depth="0"]):not([data-depth="1"]) .choice__fish { color: var(--dive-rope); }
.choice__fish svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.choice__title { font: 700 1.3rem/1.15 var(--display); letter-spacing: -0.01em; }
.choice__text { color: var(--ink-here-soft); line-height: 1.45; }
.choice__figure {
  justify-self: start; margin-top: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 999px;
  font-weight: 600; font-size: 0.875rem;
  background: color-mix(in srgb, var(--accent-here) 22%, transparent);
}
.choice--tick { padding-left: 3.4rem; }
.choice__input {
  position: absolute; left: 1.3rem; top: 1.5rem; width: 1.25rem; height: 1.25rem; margin: 0;
  accent-color: var(--accent-here);
}
.choices--crew { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.crewform__group { border: 0; margin: 0; padding: 0; min-width: 0; }

/* ------------------------------------------------------------------- tank */

/* Four questions, each on its own pane of glass. With the script running only
   one is sharp at a time: an answer glides the page to the next, and the ones
   answered and the ones still to come sit blurred behind frosted glass until
   they are tapped (Efe, 2026-10-20). Without it, all four are simply there. */
.tankform { display: grid; gap: 1.1rem; }
.tankform__group {
  margin: 0; min-width: 0; padding: 1.1rem 1.2rem 1.3rem;
  border-radius: 24px; border: 1px solid var(--line-here); background: var(--panel-here);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  scroll-margin: 22vh;
}
.tankform__legend { float: left; width: 100%; padding: 0; margin-bottom: 0.8rem; font: 700 1.2rem/1.2 var(--display); letter-spacing: -0.015em; }
.tankform__legend + * { clear: both; }
.tankform.is-staged > [data-stage] {
  transition: filter 0.55s ease, opacity 0.55s ease, transform 0.55s ease, box-shadow 0.55s ease;
  scroll-margin: 22vh;
}
.tankform.is-staged > .is-answered,
.tankform.is-staged > .is-ahead {
  filter: blur(3px) saturate(0.8); opacity: 0.5; transform: scale(0.97); cursor: pointer;
}
.tankform.is-staged > .is-answered:hover,
.tankform.is-staged > .is-ahead:hover { filter: blur(1.5px) saturate(0.9); opacity: 0.75; }
/* A question still waiting for its answer when Next or the way on is pressed
   (Efe, 2026-11-12): a coral ring and one plain line, shown staged or not. */
.qalert { margin: 0.9rem 0 0; font: 650 0.95rem/1.35 var(--display); color: var(--dive-bad); }
.tankform .tankform__group.is-missing { box-shadow: 0 0 0 2px var(--dive-bad), 0 30px 60px -36px var(--dive-shade); }
@media (prefers-reduced-motion: no-preference) {
  .tankform .tankform__group.is-missing { animation: nudge 0.42s ease; }
}
@keyframes nudge { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* Back and Next under the question in front (Efe, 2026-11-12). Only while
   the questions are staged, and only on the sharp one. */
.qnav { display: none; }
.tankform.is-staged > .is-current .qnav { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.tankform.is-staged > .is-current .qalert + .qnav { margin-top: 0.6rem; }
.qnav .dive-ghost { min-height: 2.75rem; padding: 0.6rem 1.25rem; }
.qnav__next { margin-left: auto; }
.qnav__next::after {
  content: ""; display: inline-block; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: translateX(-2px) rotate(45deg);
}
.tankform.is-staged > .tankform__group.is-current {
  box-shadow: 0 0 0 1.5px var(--accent-here), 0 30px 60px -36px var(--dive-shade);
}

/* Seven to a row at a laptop's width, so the thirteen tiles make two even
   rows instead of a lone "Another size" on a third (Efe, 2026-10-28). Every
   tile is the same three rows, centred: the glass, the size, the length. */
.sizes { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); }
.size {
  position: relative; display: grid; grid-template-rows: auto auto 1fr; justify-items: center; align-content: start;
  gap: 0.15rem; padding: 0.75rem 0.5rem 0.7rem; text-align: center;
  border-radius: 16px; border: 1px solid var(--line-here);
  background: var(--panel-here); cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.size:hover { transform: translateY(-2px); border-color: var(--accent-here); }
.size__input, .tlevel__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.size:has(.size__input:focus-visible), .tlevel:has(.tlevel__input:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; }
.size:has(.size__input:checked) { border-color: var(--accent-here); box-shadow: inset 0 0 0 1.5px var(--accent-here); }
/* The glass, drawn to scale and centred: every silhouette shares one box,
   so a 2.5 gallon reads as tiny beside a 180. */
.size__glass { display: block; position: relative; width: 100%; height: 3.1rem; margin-bottom: 0.45rem; }
.size__glass::before {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  border: 1.5px solid currentColor; border-top-width: 3px; border-radius: 2px 2px 3px 3px;
  opacity: 0.7;
}
.size__water {
  position: absolute; left: 50%; bottom: 1.5px; transform: translateX(-50%);
  width: calc(var(--w) * 1% - 3px); height: calc(var(--h) * 0.86% - 1.5px);
  background: var(--water); opacity: 0.55; border-radius: 0 0 2px 2px;
  transition: opacity 0.2s ease;
}
.size:has(.size__input:checked) .size__water { opacity: 1; }
.size__name { font: 650 0.9375rem/1.15 var(--sans); white-space: nowrap; }
.size__detail { font-size: 0.8125rem; color: var(--ink-here-soft); }
/* Long, Breeder: the shape, tucked in the corner, out of the name's way. */
.size__variant {
  position: absolute; top: 0.45rem; right: 0.45rem;
  padding: 0.15rem 0.45rem; border-radius: 999px;
  font: 650 0.6875rem/1.2 var(--body); color: var(--ink-here-soft);
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.size--custom { grid-template-rows: auto auto; align-content: center; min-height: 6.5rem; }

.tankform__custom { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; margin-top: 0.9rem; }
@supports selector(:has(*)) {
  .tankform__custom { display: none; }
  .tankform:has(.size--custom .size__input:checked) .tankform__custom { display: grid; }
}
.tankform__next { min-height: 2.75rem; }
.no-js .tankform__next { display: none; }

/* The way on, out of the tank: as wide as the questions, the next step's
   name in big type and an arrow pointing on down the ladder. Quiet while a
   question is still open; once all four have an answer it lights up, swells
   a moment and the arrow keeps nudging onward (Efe, 2026-10-28: "click here
   to move on, now that you've chosen everything"). Plain CSS reads the
   answers, so it works with scripting off too. */
.step__actions--onward { margin-top: 0.4rem; }
.onward {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  width: 100%; min-height: 6.5rem; padding: 1.1rem 1.25rem 1.1rem 1.75rem;
  border: 1px solid var(--line-here); border-radius: 24px;
  background: var(--panel-here); color: inherit; text-align: left; cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}
.onward:hover { border-color: var(--accent-here); }
.onward__words { display: grid; gap: 0.35rem; min-width: 0; }
.onward__line { font: 500 0.9375rem/1.2 var(--body); color: var(--ink-here-soft); }
.onward__line--ready { display: none; }
.onward__title { font: 700 clamp(1.65rem, 1.1rem + 1.6vw, 2.4rem)/1 var(--display); letter-spacing: -0.01em; }
.onward__arrow {
  flex: none; display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-here);
  transition: background 0.45s ease, color 0.45s ease, box-shadow 0.45s ease;
}
.onward__arrow::before {
  content: ""; width: 0.75rem; height: 0.75rem;
  border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor;
  transform: translateX(-3px) rotate(45deg);
}
.tankform:has(input[name="tank_size"]:checked):has(input[name="planting"]:checked):has(input[name="filtration"]:checked):has(input[name="water_changes"]:checked) .onward {
  background: linear-gradient(120deg, var(--accent-bright-here), var(--accent-here));
  color: var(--accent-ink-here); border-color: transparent;
  box-shadow: 0 22px 50px -20px var(--glow), inset 0 1px 0 var(--dive-highlight);
  animation: onward-ready 0.75s cubic-bezier(.2, .9, .3, 1.3) both;
}
.tankform:has(input[name="tank_size"]:checked):has(input[name="planting"]:checked):has(input[name="filtration"]:checked):has(input[name="water_changes"]:checked) .onward__line--ahead { display: none; }
.tankform:has(input[name="tank_size"]:checked):has(input[name="planting"]:checked):has(input[name="filtration"]:checked):has(input[name="water_changes"]:checked) .onward__line--ready { display: block; color: inherit; opacity: 0.85; }
.tankform:has(input[name="tank_size"]:checked):has(input[name="planting"]:checked):has(input[name="filtration"]:checked):has(input[name="water_changes"]:checked) .onward__arrow {
  background: var(--accent-ink-here); color: var(--accent-here); box-shadow: none;
  animation: onward-nudge 1.8s ease-in-out 0.9s infinite;
}
@keyframes onward-ready { 0% { transform: scale(0.97); } 55% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes onward-nudge { 0%, 55%, 100% { transform: translateX(0); } 28% { transform: translateX(7px); } }
.dfield { display: grid; gap: 0.35rem; }
.dfield__label { font-size: 0.875rem; font-weight: 500; }
.dfield__input {
  min-height: 2.75rem; padding: 0.5rem 0.8rem; border-radius: 12px;
  border: 1px solid var(--line-here); background: var(--panel-here); color: inherit; font: inherit;
}

.tlevels { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tlevel {
  position: relative; display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 2.75rem; padding: 0.55rem 1rem; border-radius: 999px;
  border: 1px solid var(--line-here); background: var(--panel-here); cursor: pointer;
  transition: border-color 0.15s ease;
}
.tlevel:hover { border-color: var(--accent-here); }
.tlevel:has(.tlevel__input:checked) { border-color: var(--accent-here); box-shadow: inset 0 0 0 1.5px var(--accent-here); }
.tlevel__name { font-weight: 500; }
/* Four little stems, lit to the planting level. */
.tlevel__plants { display: inline-flex; align-items: flex-end; gap: 2px; height: 1.1rem; }
.tlevel__plants i { display: block; width: 3px; border-radius: 2px; background: var(--moss); }
.tlevel__plants i:nth-child(1) { height: 55%; }
.tlevel__plants i:nth-child(2) { height: 100%; }
.tlevel__plants i:nth-child(3) { height: 70%; }
.tlevel__plants i:nth-child(4) { height: 85%; }
.tlevel__plants.is-none i { opacity: 0.18; }
.tlevel__plants.is-low i:nth-child(n+2) { opacity: 0.18; }
.tlevel__plants.is-medium i:nth-child(n+3) { opacity: 0.18; }

/* ----------------------------------------------------------------- shelves */

/* Search the shelf (Efe, 2026-11-12): a pane of the same glass as the
   questions, rounded like the dive's buttons. */
.shelfsearch { margin: 0 0 1.6rem; }
.shelfsearch__box {
  display: flex; align-items: center; gap: 0.65rem; max-width: 30rem;
  min-height: 3.1rem; padding: 0 1.1rem; border-radius: 999px;
  border: 1px solid var(--line-here); background: var(--panel-here);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.shelfsearch__box:focus-within { border-color: var(--accent-here); box-shadow: 0 0 0 1.5px var(--accent-here); }
.shelfsearch__icon { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: var(--ink-here-soft); stroke-width: 2; stroke-linecap: round; }
/* The site's own search box style (style.css) is undone here: the pill is the
   field, and the words take the colour of the water they sit on. */
.shelfsearch .shelfsearch__input {
  flex: 1; min-width: 0; width: auto; padding: 0.6rem 0; border: 0; border-radius: 0;
  background: transparent; color: inherit; outline: none; box-shadow: none;
  font: 500 1rem/1.2 var(--body);
}
.shelfsearch .shelfsearch__input::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.6; cursor: pointer; }
.shelfsearch__input::placeholder { color: var(--ink-here-soft); opacity: 0.85; }
.shelfsearch__none { margin: 0.9rem 0 0; color: var(--ink-here-soft); }

.shelf { display: grid; gap: 2.25rem; }
.shelf__title {
  margin: 0 0 0.85rem; display: flex; align-items: baseline; gap: 0.6rem;
  font: 650 1.4rem/1.1 var(--display); letter-spacing: -0.01em;
}
.shelf__count {
  font: 500 0.8125rem/1 var(--mono); padding: 0.25rem 0.5rem; border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.shelf__lede { margin: -0.4rem 0 0.9rem; color: var(--ink-here-soft); max-width: 56ch; }
.shelf__empty {
  margin: 0; padding: 1rem 1.15rem; border-radius: 16px; max-width: 56ch;
  border: 1px solid var(--line-here); color: var(--ink-here-soft);
}
details.shelf__tier--not > summary { cursor: pointer; list-style: none; }
details.shelf__tier--not > summary::-webkit-details-marker { display: none; }
details.shelf__tier--not > summary::after {
  content: ""; width: 0.55rem; height: 0.55rem; margin-left: 0.25rem; align-self: center;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px); transition: transform 0.2s ease;
}
details.shelf__tier--not[open] > summary::after { transform: rotate(225deg) translateY(-1px); }

/* A fish, the fish database's way: the photograph at 4:3 with the name on
   its foot, then the badges and the three figures, then this tank's verdict
   and the two buttons. Nothing moves or scales over the photograph, so it
   stays exactly as sharp as the file. */
.fishes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.fish {
  /* A column, not a grid: a 4:3 photo inside a grid inside the shelf's grid
     made the browser lay every photo out several times, and a shelf of 89
     arrived in a 0.2 s freeze. As a column it lays out in a third of that. */
  display: flex; flex-direction: column; min-width: 0;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-here); background: var(--panel-here);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.fish:hover { border-color: var(--accent-here); box-shadow: 0 22px 44px -28px var(--dive-shade); }
.fish__photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--glass); color: inherit; }
.fish__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--zoom, 1)); transform-origin: var(--focus, 50% 50%);
}
.fish__photo.is-glyph { display: grid; place-items: center; }
.fish__photo.is-glyph img { width: 40%; height: auto; object-fit: contain; opacity: 0.45; }
.fish__caption {
  position: absolute; inset: auto 0 0 0; display: grid; gap: 0.1rem;
  padding: 2.4rem 0.9rem 0.7rem;
  background: linear-gradient(180deg, transparent 0%, var(--dive-caption) 100%);
  color: var(--dive-ink-deep);
}
.fish__name { font: 700 1.075rem/1.2 var(--display); letter-spacing: -0.015em; }
.fish__sci { font-style: italic; font-size: 0.8125rem; color: var(--dive-ink-deep-soft); }
.fish__body { flex: 1 0 auto; display: grid; align-content: start; gap: 0.6rem; padding: 0.8rem 0.9rem 0.2rem; min-width: 0; }
.fish__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.fbadge {
  padding: 0.3rem 0.6rem; border-radius: 999px; white-space: nowrap;
  font: 500 0.75rem/1 var(--body); border: 1px solid var(--line-here);
}
.fbadge--role { background: color-mix(in srgb, currentColor 10%, transparent); border-color: transparent; }
.fbadge.is-beginner, .fbadge.is-peaceful { border-color: var(--dive-good); }
.fbadge.is-intermediate, .fbadge.is-semi-aggressive { border-color: var(--dive-mid); }
.fbadge.is-advanced, .fbadge.is-aggressive, .fbadge.is-predatory { border-color: var(--dive-bad); }
.fish__stats {
  display: grid; grid-template-columns: auto auto auto; justify-content: space-between; gap: 0.4rem;
  margin: 0; font-size: 0.8125rem; color: var(--ink-here-soft);
}
.fstat { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; white-space: nowrap; }
.fstat svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fish__notes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.fish__badge, .fish__concern { padding: 0.24rem 0.55rem; border-radius: 8px; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; }
.fish__badge { background: color-mix(in srgb, var(--accent-here) 22%, transparent); }
.fish__concern { background: color-mix(in srgb, var(--amber) 26%, transparent); }
.fish--not_recommended .fish__concern { background: color-mix(in srgb, var(--coral) 26%, transparent); }
.fish__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.75rem 0.9rem 0.9rem; }
.fish__verdict { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.fish__score { font: 700 1.3rem/1 var(--display); font-variant-numeric: tabular-nums; }
.fish__delta { font-style: normal; font-weight: 600; font-size: 0.875rem; color: var(--good-deep); }
.fish__delta.is-down { color: var(--coral-deep); }
.dive:not([data-depth="0"]):not([data-depth="1"]) .fish__delta { color: var(--dive-good); }
.dive:not([data-depth="0"]):not([data-depth="1"]) .fish__delta.is-down { color: var(--dive-bad); }
.fish__level { font-size: 0.8125rem; color: var(--ink-here-soft); }
.fish__actions { display: inline-flex; gap: 0.4rem; margin-left: auto; }
.fish__more, .fish__pick {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.45rem 0.9rem;
  border-radius: 999px; font: 650 0.875rem/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.fish__more { color: inherit; box-shadow: inset 0 0 0 1.5px var(--line-here); }
.fish__more:hover { box-shadow: inset 0 0 0 1.5px var(--accent-here); }
.fish__pick { background: var(--accent-here); color: var(--accent-ink-here); }
.fish__pick:hover { background: var(--accent-bright-here); }
.fish--not_recommended .fish__pick { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px var(--dive-bad); }

/* Not recommended: the same fish in a row, dimmed, folded away. */
.fishes--compact { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.fishes--compact .fish { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; opacity: 0.85; }
.fishes--compact .fish:hover { opacity: 1; }
.fishes--compact .fish__photo { align-self: stretch; aspect-ratio: auto; min-height: 6.75rem; }
.fishes--compact .fish__photo img { filter: saturate(0.6); }
.fishes--compact .fish__caption { padding: 1.4rem 0.6rem 0.45rem; }
.fishes--compact .fish__name { font-size: 0.9375rem; }
.fishes--compact .fish__sci, .fishes--compact .fish__stats { display: none; }
.fishes--compact .fish__body { padding: 0.6rem 0.8rem; }
.fishes--compact .fish__foot { padding: 0.6rem 0.9rem; flex-direction: column; align-items: flex-end; }

/* -------------------------------------------------------------- the pane */

.pane {
  width: min(52rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 0;
  border: 1px solid var(--dive-line-deep); border-radius: 26px;
  background: var(--dive-instrument-solid); color: var(--dive-ink-deep);
  box-shadow: 0 40px 90px -30px var(--dive-shade);
  overflow: auto;
}
.pane::backdrop { background: var(--dive-veil); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pane[open] { animation: pane-in 320ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pane-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
.pane__body { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.pane__side { display: grid; align-content: start; gap: 1.1rem; padding-bottom: 1.4rem; }
.pane__photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--glass); }
.pane__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); transform-origin: var(--focus, 50% 50%); }
.pane__photo.is-glyph { display: grid; place-items: center; }
.pane__photo.is-glyph img { width: 40%; height: auto; object-fit: contain; opacity: 0.45; }
.pane__text { display: grid; align-content: start; gap: 0.9rem; padding: 1.4rem 1.5rem 1.5rem; min-width: 0; }
.pane__name { margin: 0; padding-right: 2.5rem; font: 700 1.85rem/1.05 var(--display); letter-spacing: -0.01em; }
.pane__sci { margin: -0.55rem 0 0; font-style: italic; color: var(--dive-ink-deep-soft); }
/* No strip down the left (2026-11-11): the box takes its colour whole. */
.pane__fit { padding: 0.85rem 1rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--dive-good) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--dive-good) 12%, transparent), transparent 70%); }
.pane__fit.is-other { border-color: color-mix(in srgb, var(--dive-mid) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--dive-mid) 12%, transparent), transparent 70%); }
.pane__fit.is-not_recommended { border-color: color-mix(in srgb, var(--dive-bad) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--dive-bad) 12%, transparent), transparent 70%); }
.pane__heading { margin: 0 0 0.3rem; font: 700 1.05rem/1.2 var(--display); }
.pane__score { margin: 0; color: var(--dive-ink-deep-soft); }
.pane__score b { color: var(--dive-ink-deep); font: 700 1.15rem/1 var(--display); }
.pane__why { margin: 0.55rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; font-size: 0.875rem; color: var(--dive-ink-deep-soft); }
.pane__facts { margin: 0; padding: 0 1.4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem 1rem; }
.pane__facts dt { font-size: 0.75rem; color: var(--dive-ink-deep-soft); }
.pane__facts dd { margin: 0.1rem 0 0; font-weight: 600; }
.pane__note { margin: 0; line-height: 1.55; }
.pane__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-top: 0.25rem; }
.pane__close {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--dive-veil); color: var(--dive-ink-deep);
}
.pane__close svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* ------------------------------------------------- your fish, on a phone */

/* The dive computer, risen from the foot of the page (Efe, 2026-10-28: "a
   lot more phone friendly"). The score in the bar opens it; × or a tap
   outside closes it. journey.js moves the computer itself in here while it
   is open, so it keeps its own look, flattened onto the sheet. */
.tanksheet {
  inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: min(88vh, 46rem);
  padding: 0 0 max(0.75rem, env(safe-area-inset-bottom)); border: 0; border-radius: 26px 26px 0 0;
  background: var(--dive-instrument-solid); color: var(--dive-ink-deep);
  box-shadow: 0 -24px 60px -24px var(--dive-shade);
  overflow-y: auto; overscroll-behavior: contain;
}
.tanksheet::backdrop { background: var(--dive-veil); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tanksheet[open] { animation: sheet-up 360ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sheet-up { from { transform: translateY(100%); } }
.tanksheet__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 0.85rem 0.25rem 1.25rem; background: var(--dive-instrument-solid);
}
.tanksheet__title { margin: 0; font: 700 1.15rem/1.2 var(--display); letter-spacing: -0.01em; }
.tanksheet__close {
  flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer; background: var(--dive-veil); color: inherit;
}
.tanksheet__close svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dive .tanksheet .computer {
  border: 0; border-radius: 0; background: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0.4rem 1.25rem 0.5rem;
}

@media (max-width: 44rem) {
  /* One column: the photograph, then the name and the verdict, then the facts. */
  .pane__body { grid-template-columns: minmax(0, 1fr); }
  .pane__side { display: contents; }
  .pane__photo { order: 0; }
  .pane__text { order: 1; padding-bottom: 0.5rem; }
  .pane__facts { order: 2; padding-bottom: 1.4rem; }
  .pane { max-height: calc(100vh - 1.5rem); }
}

/* ---------------------------------------------------------------- the side */

.dive__tank {
  border-radius: 22px; padding: 0.9rem 0.9rem 0.4rem;
  background: var(--panel-here); border: 1px solid var(--line-here);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: box-shadow 1s ease;
}
.dive__tank .tank__stage { min-height: 0; }
.dive__tank { flex: none; }
.dive__tank .tank__scene { width: 100%; max-width: none; max-height: clamp(6.5rem, 21vh, 13rem); }
.dive:not([data-depth="0"]):not([data-depth="1"]) .tank__label { color: var(--ink-here-soft); }
.dive:not([data-depth="0"]):not([data-depth="1"]) .tank__frame { stroke: var(--dive-frame); }

.computer {
  display: flex; flex-direction: column; min-height: 0;
  border-radius: 26px; padding: 1.15rem 1.15rem 1rem;
  background: var(--dive-glass-deep); color: var(--dive-ink-deep);
  border: 1px solid var(--dive-line-deep);
  box-shadow: inset 0 1px 0 var(--dive-highlight-soft), 0 24px 50px -30px var(--dive-shade);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
/* In the shallows the instrument is still dark: it is the one object that
   came down from the boat with you. */
.dive[data-depth="0"] .computer, .dive[data-depth="1"] .computer { background: var(--dive-instrument); }

.computer__face { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.ring { position: relative; width: 7.25rem; height: 7.25rem; display: grid; place-items: center; align-content: center; }
.ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--dive-track); stroke-width: 9; }
.ring__fill {
  fill: none; stroke: var(--dive-good); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset 0.9s cubic-bezier(.2, .8, .2, 1), stroke 0.4s ease;
}
.computer.is-mid .ring__fill { stroke: var(--dive-mid); }
.computer.is-bad .ring__fill { stroke: var(--dive-bad); }
.computer.is-waiting .ring__fill { stroke: transparent; }
.computer.is-waiting .ring__track { stroke-dasharray: 3 5; }
.ring__value { position: relative; font: 700 2.35rem/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ring__of { position: relative; margin-top: 0.2rem; font-size: 0.75rem; color: var(--dive-ink-deep-soft); }
.computer__readout { display: grid; gap: 0.35rem; min-width: 0; }
.computer__readout p { margin: 0; }
.computer__level { font-weight: 600; }
.computer__level b { font: 700 1.15rem/1 var(--display); margin-right: 0.2rem; }
.computer__level.is-good b { color: var(--dive-good); }
.computer__level.is-mid b { color: var(--dive-mid); }
.computer__level.is-bad b { color: var(--dive-bad); }
.computer__tank, .computer__note { font-size: 0.875rem; line-height: 1.4; color: var(--dive-ink-deep-soft); }
.computer > .computer__note { margin: 0.75rem 0 0; }

.bars { list-style: none; margin: 1rem 0 0; padding: 0.85rem 0 0; border-top: 1px solid var(--dive-line-deep); display: grid; gap: 0.55rem; }
.bars__row { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem 2rem; gap: 0.6rem; align-items: center; font-size: 0.875rem; }
.bars__rail { height: 6px; border-radius: 3px; background: var(--dive-track); overflow: hidden; }
.bars__fill { display: block; height: 100%; border-radius: 3px; background: var(--dive-good); transition: width 0.8s cubic-bezier(.2, .8, .2, 1); }
.bars__row.is-mid .bars__fill { background: var(--dive-mid); }
.bars__row.is-bad .bars__fill { background: var(--dive-bad); }
.bars__value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bars__row.is-waiting { opacity: 0.6; }

.computer__face, .bars { flex: none; }
.picks {
  list-style: none; margin: 0.9rem 0 0; padding: 0.85rem 0.15rem 0.1rem 0; border-top: 1px solid var(--dive-line-deep);
  display: grid; gap: 0.4rem; align-content: start;
  min-height: 3.5rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--dive-line-deep) transparent;
}
/* When the list scrolls, its edges fade where more fish wait out of sight. */
@supports (animation-timeline: scroll()) {
  .picks {
    --picks-top: 0rem; --picks-bottom: 0rem;
    mask-image: linear-gradient(transparent, #000 var(--picks-top), #000 calc(100% - var(--picks-bottom)), transparent);
    -webkit-mask-image: linear-gradient(transparent, #000 var(--picks-top), #000 calc(100% - var(--picks-bottom)), transparent);
    animation: picks-edges linear both; animation-timeline: scroll(self);
  }
  @keyframes picks-edges {
    0% { --picks-top: 0rem; --picks-bottom: 2rem; }
    12% { --picks-top: 2rem; }
    88% { --picks-bottom: 2rem; }
    100% { --picks-top: 2rem; --picks-bottom: 0rem; }
  }
}
.picks__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.picks__name { min-width: 0; font-size: 0.9375rem; line-height: 1.25; }
.picks__name b { font-variant-numeric: tabular-nums; }
.picks__name small { display: block; margin-top: 0.1rem; font-size: 0.75rem; line-height: 1.2; color: var(--dive-ink-deep-soft); }
.picks__row.is-star .picks__name small { color: var(--dive-lamp); }
.picks__tools { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; }
.picks__tool, .picks__change {
  display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 0.4rem;
  border-radius: 999px; border: 1px solid var(--dive-line-deep);
  color: inherit; text-decoration: none; font-weight: 600; line-height: 1;
}
.picks__tool:hover, .picks__change:hover { border-color: var(--dive-good); }
.picks__tool.is-off { opacity: 0.35; }
.picks__change { font-size: 0.8125rem; padding: 0 0.7rem; }


/* ---------------------------------------------------------------- reveal */

.finale { display: grid; gap: 1.5rem; }
.finale__stock { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.finale__fish {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.75rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--line-here);
}
.finale__count { font: 700 1.9rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--dive-lamp); }
.finale__name { font: 650 1.2rem/1.2 var(--display); }
.finale__role { font-size: 0.875rem; color: var(--ink-here-soft); }
.finale__title { margin: 0.5rem 0 0; font: 650 1.3rem/1.1 var(--display); }
.finale__water { margin: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.finale__param { padding: 0.8rem 1rem; border-radius: 16px; background: var(--panel-here); border: 1px solid var(--line-here); }
.finale__param dt { font-size: 0.875rem; color: var(--ink-here-soft); }
.finale__param dd { margin: 0.2rem 0 0; font: 650 1.05rem/1.3 var(--display); }
.finale__verdict { display: block; margin-top: 0.2rem; font: 500 0.8125rem/1.2 var(--body); color: var(--dive-good); }
.finale__param.is-tight .finale__verdict { color: var(--dive-mid); }
.finale__param.is-clash .finale__verdict { color: var(--dive-bad); }
.finale__param.is-unknown .finale__verdict { color: var(--ink-here-soft); }
.finale__notes { margin: 0; color: var(--ink-here-soft); }

/* The tank lights up at the bottom of the dive. */
.dive[data-step="reveal"] .dive__tank {
  box-shadow: 0 0 0 1px var(--dive-lamp-edge), 0 0 90px -10px var(--dive-lamp-glow);
}
.dive[data-step="reveal"] .tank__light { fill: var(--dive-lamp); }
.dive[data-step="reveal"] .tank__water { filter: brightness(1.2) saturate(1.15); }
.dive[data-step="reveal"] .dive__tank .tank__scene { max-height: 16rem; }

/* ------------------------------------------------------------------ phone */

/* A short window (a laptop's, under the browser's own bars): the instrument
   tightens so the list of fish keeps room. */
@media (min-width: 62.01rem) and (max-height: 54rem) {
  .dive__side { gap: 0.75rem; }
  .computer { padding: 0.95rem 1rem 0.85rem; }
  .ring { width: 5.75rem; height: 5.75rem; }
  .ring__value { font-size: 1.9rem; }
  .ring__of { font-size: 0.6875rem; }
  .bars { margin-top: 0.75rem; padding-top: 0.7rem; gap: 0.4rem; }
  .picks { margin-top: 0.7rem; padding-top: 0.7rem; }
}

@media (max-width: 62rem) {
  /* One column: the tank, the dive so far, the whole computer last. The
     score rides in the bar at the top meanwhile. */
  .dive__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tank" "steps" "computer";
    padding-bottom: 4rem;
  }
  .dive__side { display: contents; }
  .dive__tank { grid-area: tank; }
  .computer { grid-area: computer; }
  .dive__tank .tank__scene { max-height: 9rem; }
  .dive[data-step="reveal"] .dive__tank .tank__scene { max-height: 13rem; }
  .divebar__inner { gap: 0.6rem; }
  .divebar__depth { display: none; }
  .recap { grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.75rem; padding-block: 0.6rem; }
  .recap__depth { display: none; }
  .recap__label, .recap__answer { grid-column: 1; }
  .recap__change { grid-row: 1 / span 2; grid-column: 2; }
}

@media (max-width: 26rem) {
  .divebar__where { display: none; }
}

@media (max-width: 34rem) {
  /* A phone: the recommended fish one to a row, so the photograph is as
     large as the screen allows; the compromises two to a row. */
  .fishes { grid-template-columns: minmax(0, 1fr); }
  .shelf__tier--other .fishes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .shelf__tier--other .fish__sci, .shelf__tier--other .fish__stats { display: none; }
  .shelf__tier--other .fish__body { padding: 0.6rem 0.65rem 0.1rem; }
  .shelf__tier--other .fish__foot { padding: 0.55rem 0.65rem 0.7rem; }
  .shelf__tier--other .fish__actions { width: 100%; justify-content: space-between; }
  .fishes--compact .fish { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .fishes--compact .fish__foot { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .choice { min-height: 0; }
  .sizes { grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 0.45rem; }
  .size { padding: 0.65rem 0.3rem 0.6rem; }
  .size__name { font-size: 0.8125rem; }
  .size__detail { font-size: 0.75rem; }
  .size__glass { height: 2.5rem; }
}

/* The first step fills the room under the dive bar and centres its question
   and boxes in it (Efe, 2026-11-12): at the top of the page there is nothing
   above to scroll past. journey.js measures the room into --dive-room. */
.step--experience {
  min-height: var(--dive-room, 0px); box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 1.25rem; padding-bottom: 1.25rem;
}
/* The full width of the step, as before it became a column. In a column the
   list's auto margins sized it to all three boxes side by side, which ran off
   a phone's edge and hid "Years of tanks" (Efe, 2026-11-15). The 56rem cap
   and the auto margins still centre it on a wide screen. */
.step--experience > .choices { width: 100%; }

/* A laptop's short screen (Efe, 2026-11-12): the question, its few words and
   its boxes fit in one view together, so the title stays in the picture.
   A little less air and a smaller headline; nothing taken away. */
@media (min-width: 46.01rem) and (max-height: 820px) {
  .step { padding-top: clamp(1.25rem, 4vh, 2.5rem); }
  .step__head { margin-bottom: 1.4rem; }
  .step__depth { margin-bottom: 0.6rem; }
  .step__title { font-size: clamp(2.4rem, 1rem + 3vw, 3.6rem); }
  .step__lede { margin-top: 0.6rem; }
  .tankform { gap: 0.8rem; }
  .tankform__group { padding: 0.85rem 1.1rem 0.95rem; }
  .tankform__legend { margin-bottom: 0.6rem; }
  .sizes { gap: 0.45rem; }
  /* Room above the drawing for the Long and Breeder tags, the same on every
     tile so the names stay in line (Efe: the tags were touching them). */
  .size { padding: 1.45rem 0.4rem 0.5rem; }
  .size__variant { top: 0.35rem; }
  .size__glass { height: 2.2rem; margin-bottom: 0.35rem; }
  .qnav { margin-top: 0.7rem; }
  .qnav .dive-ghost { min-height: 2.4rem; padding: 0.45rem 1.1rem; }
}

/* ----------------------------------------------------------------- motion
   Everything here answers something the keeper did: a step taken, a fish
   picked, the dive finished. The sea's slow drift above is the only motion
   nobody asked for. journey.js adds the classes; with scripting off none of
   this runs and nothing is missing. */

/* Answering folds the question into its strip and brings the next one in
   below: every strip and the current question carry a view-transition name
   per step (_journey_steps.html), so the browser morphs the one answered into
   its strip while the rest of the page settles. */
::view-transition-group(*) { animation-duration: 0.6s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* The question arrives: its depth, then its headline, then its words, rising
   out of a blur into place. Then its answers, one after another. */
.step.is-arriving .step__depth,
.step.is-arriving .step__title,
.step.is-arriving .step__lede {
  animation: surface-in 950ms cubic-bezier(.2, .8, .2, 1) both;
}
.step.is-arriving .step__title { animation-delay: 90ms; }
.step.is-arriving .step__lede { animation-delay: 230ms; }
@keyframes surface-in { from { opacity: 0; transform: translateY(30px); filter: blur(8px); } }

.step.is-arriving .choices > li,
.step.is-arriving .choice--tick,
.step.is-arriving .finale__fish {
  animation: rise-in 700ms cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(380ms + min(var(--i, 0), 12) * 70ms);
}
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } }

/* Further down, things arrive as you reach them, as on Apple's page: each
   fish card and shelf heading rises into place as it scrolls into view.
   Browsers without scroll-driven animation simply show them. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fish, .shelf__title, .finale__param, .tankform__group {
      animation: reach-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
    @keyframes reach-in { from { opacity: 0; transform: translateY(40px) scale(0.98); } }
  }
}

/* The change in score, floating off the ring. */
.ring__delta {
  position: absolute; right: -0.4rem; top: 0.2rem;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  font: 700 0.95rem/1 var(--sans); font-variant-numeric: tabular-nums;
  background: var(--dive-good); color: var(--dive-accent-ink);
  animation: float-off 1.5s cubic-bezier(.2, .8, .2, 1) forwards;
  pointer-events: none;
}
.ring__delta.is-down { background: var(--dive-bad); color: var(--dive-lamp-ink); }
@keyframes float-off {
  0% { opacity: 0; transform: translateY(8px) scale(0.8); }
  15% { opacity: 1; transform: translateY(0) scale(1.05); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}

/* A picked fish: its photograph flies to the tank, the sprites drop in. */
.fish-ghost { position: fixed; z-index: 60; object-fit: cover; pointer-events: none; border-radius: 18px; will-change: transform, opacity; }
.swimmer.is-arriving { animation: drop-in 700ms cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: var(--arrive, 0.35s); }
@keyframes drop-in { from { opacity: 0; translate: 0 -14px; } }

/* The bottom of the dive: the lamp warms up and the water brightens. */
.dive[data-step="reveal"] .dive__tank { animation: lamp-on 1.6s ease-out both; }
@keyframes lamp-on {
  0% { box-shadow: 0 0 0 1px transparent, 0 0 0 -10px transparent; }
  100% { box-shadow: 0 0 0 1px var(--dive-lamp-edge), 0 0 90px -10px var(--dive-lamp-glow); }
}
.dive[data-step="reveal"] .tank__bubble { animation-duration: 3.2s; }
.dive[data-step="reveal"] .dive-button--surface { animation: beckon 2.4s ease-in-out 1.2s infinite; }
@keyframes beckon {
  0%, 100% { box-shadow: 0 0 0 0 var(--dive-lamp-glow), 0 14px 40px -12px var(--dive-lamp-glow); }
  50% { box-shadow: 0 0 0 10px transparent, 0 14px 40px -12px var(--dive-lamp-glow); }
}

/* Leaving for My Aquarium: back up through the water to the surface. */
.dive.is-surfacing {
  --sea-top: var(--dive-0-top); --sea-bottom: var(--dive-0-bottom);
  transition: --sea-top 0.6s ease, --sea-bottom 0.6s ease;   /* the reveal is short: cheap here */
}
.dive.is-surfacing .dive__grid { opacity: 0; transform: translateY(-30px); transition: opacity 0.5s ease, transform 0.6s ease; }

@media (prefers-reduced-motion: reduce) {
  .dive__rays, .dive__snow { animation: none; }
  .dive.is-surfacing { transition: none; }
  .onward, .onward__arrow { animation: none !important; }
  .tanksheet[open] { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* --------------------------------------------------------------- premium */

/* Locked: one quiet line above a shelf saying what unlocking adds. */
.dive-premium {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem;
  margin: 0 0 1.25rem; padding: 0.6rem 0.6rem 0.6rem 0.9rem; border-radius: 16px;
  background: var(--panel-here); border: 1px solid var(--line-here);
  font-size: 0.9375rem; color: var(--ink-here-soft);
}
.dive-premium__tag {
  padding: 0.3rem 0.65rem; border-radius: 999px; font: 650 0.75rem/1 var(--sans);
  color: var(--accent-here); box-shadow: inset 0 0 0 1px var(--accent-here);
}
.dive-premium__text { flex: 1 1 14rem; }
.dive-premium__unlock { min-height: 2.25rem; padding: 0.45rem 1rem; font-size: 0.875rem; }

/* Unlocked, when the notes did not come: one plain line above the shelf, in
   the same quiet panel as the locked line, with a way to ask again. */
.dive-notes-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem;
  margin: 0 0 1.25rem; padding: 0.6rem 0.6rem 0.6rem 0.9rem; border-radius: 16px;
  background: var(--panel-here); border: 1px solid var(--line-here);
  font-size: 0.9375rem; line-height: 1.45; color: var(--ink-here-soft);
}
.dive-notes-status[hidden], .dive-notes-status [hidden] { display: none; }
.dive-notes-status > span { flex: 1 1 16rem; }
.dive-notes-status .dive-ghost { min-height: 2.25rem; padding: 0.45rem 1rem; font-size: 0.875rem; }

/* Unlocked: a note on each fish, written for this tank, at the foot of its card. */
.fish__note {
  margin: 0.1rem 0 0; padding: 0.55rem 0.65rem; border-radius: 10px;
  background: color-mix(in srgb, var(--accent-here) 12%, transparent);
  font-size: 0.875rem; line-height: 1.45; color: var(--ink-here);
  animation: rise-in 500ms cubic-bezier(.2, .8, .2, 1) both;
}
.fish__note-tag {
  display: block; margin-bottom: 0.2rem; font: 700 0.75rem/1.2 var(--sans);
  color: var(--accent-here);
}
@media (prefers-reduced-motion: reduce) { .fish__note { animation: none; } }


/* The dive's ledes read as prose: the guide's serif (Efe, 2026-11-11). */
.step__lede { font-family: var(--serif); }


/* The "i" beside a tank question takes the question's own colour. */
.tankform__legend .infobtn { color: inherit; }
.tankform__legend .infobtn:focus-visible { outline-color: var(--accent-here); }