/* =================================================================
   The Institute for Aquarium Maintenance Science
   Single design system. Zero build step. All tokens are CSS
   variables declared once, here, at :root.
   Aesthetic: marine research journal x government standards body.
   ================================================================= */

/* ---- 1. Design tokens ------------------------------------------ */
:root {
  /* Colour — archival paper, deep ink, one muted aquatic accent */
  --paper:        #f7f5ef;   /* page background — warm off-white */
  --paper-2:      #f0ede3;   /* panels, table stripes */
  --paper-edge:   #e4e0d3;   /* hairline borders on paper */
  --ink:          #1c2522;   /* body text — near-black, faint green */
  --ink-soft:     #44504c;   /* secondary text */
  --ink-faint:    #5a635d;   /* captions, meta (AA-contrast on paper) */
  --accent:       #1f5f5b;   /* deep teal — the Institute colour */
  --accent-deep:  #143f3c;   /* hovers, headings on accent */
  --accent-soft:  #d8e4e1;   /* tints, callout backgrounds */
  --turquoise:    #2ec4b6;   /* "clean water" accent */
  --rule:         #c9c3b3;   /* decorative rules */
  --warn:         #8a5a1c;   /* cautionary callouts (amber-brown) */
  --warn-soft:    #f1e6d4;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-700: clamp(2.4rem, 5vw, 3.6rem);   /* page h1 / hero */
  --fs-600: clamp(1.9rem, 3.5vw, 2.5rem); /* section h2 */
  --fs-500: 1.5rem;                       /* h3 */
  --fs-400: 1.125rem;                     /* body */
  --fs-300: 0.95rem;                      /* small */
  --fs-200: 0.8rem;                       /* labels, meta */

  /* Space */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-8: 3rem;    --sp-10: 4.5rem;

  --measure: 70ch;            /* readable line length */
  --wrap:    1180px;          /* outer page width */
  --radius:  3px;             /* understated, document-like */
  --shadow:  0 1px 2px rgba(20,30,28,.06), 0 8px 24px rgba(20,30,28,.05);
}

/* Breakpoints (mobile-first). Base styles target the smallest screen; min-width
   queries layer enhancements upward. em-based so they honour user zoom. CSS cannot
   read custom properties inside media conditions, so the scale lives here as a
   convention, applied consistently throughout:
     40em  (640px) — nav inline beside the wordmark; footer & calculator → 2 columns
     64em (1024px) — footer → 3 columns; guide rail → sticky 2-column               */

/* ---- 2. Reset & base ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: 1.65;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;   /* long unbroken strings (URLs/DOIs) never force horizontal scroll */
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; color: var(--ink); font-weight: 560; }
h1 { font-size: var(--fs-700); letter-spacing: -0.01em; margin: 0 0 var(--sp-4); }
h2 { font-size: var(--fs-600); margin: var(--sp-8) 0 var(--sp-4); }  /* sp-10 top restored at 40em */
h3 { font-size: var(--fs-500); margin: var(--sp-6) 0 var(--sp-3); }
p { margin: 0 0 var(--sp-4); }

/* ---- 3. Layout primitives -------------------------------------- */
.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.prose { max-width: var(--measure); }
.prose p, .prose ul, .prose ol, .prose table, .prose figure { margin-bottom: var(--sp-5); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: var(--sp-2); }
.stack > * + * { margin-top: var(--sp-5); }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff;
  padding: var(--sp-2) var(--sp-4); z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---- 4. Eyebrow / labels --------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow { color: var(--accent); margin-bottom: var(--sp-3); display: inline-block; }

/* ---- 5. Header / masthead -------------------------------------- */
.masthead {
  border-bottom: 1px solid var(--paper-edge);
  background: var(--paper);
  position: static; z-index: 50;                  /* sticky only at 40em+ (see §19) — a tall
                                                     wrapped wordmark shouldn't pin on phones */
  backdrop-filter: saturate(1.1);
}
.masthead__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); padding: var(--sp-3) 0; }
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--ink); }
.brand__mark { width: 38px; height: 38px; flex: 0 0 38px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.brand__sub { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
/* Mobile base: nav fills its own row beneath the wordmark, with roomy tap targets. */
.nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); width: 100%; }
.nav a {
  font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-soft); padding: var(--sp-3) 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current] { color: var(--accent); border-color: var(--accent); }

/* ---- 6. Hero --------------------------------------------------- */
.hero { padding: var(--sp-10) 0 var(--sp-8); border-bottom: 1px solid var(--paper-edge); }
.hero__lede { font-size: clamp(1.2rem, 2.2vw, 1.45rem); color: var(--ink-soft); max-width: 58ch; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-6);
  font-family: var(--font-mono); font-size: var(--fs-200); color: var(--ink-faint);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.hero__meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* ---- 7. Buttons ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-300); letter-spacing: 0.04em;
  text-decoration: none; padding: var(--sp-3) var(--sp-5); border-radius: var(--radius);
  border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer;
  transition: background .15s ease;
}
.btn:hover { background: var(--accent-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--accent); }
.btn--ghost:hover { background: var(--accent-soft); color: var(--accent-deep); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ---- 8. Cards / library grid ----------------------------------- */
.grid { display: grid; gap: var(--sp-5); }
/* min(...,100%) lets a column shrink below its floor on screens narrower than the
   floor itself, so the cards never overflow a ~281px-wide .wrap on a 320px phone. */
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.card {
  background: #fff; border: 1px solid var(--paper-edge); border-radius: var(--radius);
  padding: var(--sp-5); box-shadow: var(--shadow); display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink); transition: transform .15s ease, border-color .15s ease;
}
a.card:hover { transform: translateY(-2px); border-color: var(--accent); }
.card__no { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--accent); letter-spacing: 0.1em; }
.card h3 { margin: var(--sp-2) 0 var(--sp-3); font-size: 1.3rem; }
.card p { color: var(--ink-soft); font-size: var(--fs-300); margin-bottom: var(--sp-4); }
.card__more { margin-top: auto; font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
a.card__more:hover { color: var(--accent-deep); text-decoration: underline; }

/* ---- 9. Sections ----------------------------------------------- */
section { padding: var(--sp-8) 0; }
.section-head { max-width: var(--measure); margin-bottom: var(--sp-6); }
.section-head p { color: var(--ink-soft); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-8) 0; }

/* ---- 10. Callouts / notes -------------------------------------- */
.note {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--sp-5) 0;
}
.note--warn { border-left-color: var(--warn); background: var(--warn-soft); }
.note__label { font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); display: block; margin-bottom: var(--sp-1); }
.note--warn .note__label { color: var(--warn); }
.note p:last-child { margin-bottom: 0; }

/* ---- 11. Data tables ------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--paper-edge); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); background: #fff; }
caption { text-align: left; font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); padding: var(--sp-3) var(--sp-4); }
th, td { padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--paper-edge); vertical-align: top; }  /* roomier at 40em */
thead th { background: var(--accent); color: #fff; font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-200); letter-spacing: 0.06em; text-transform: uppercase; }
tbody tr:nth-child(even) { background: var(--paper-2); }
tbody th[scope="row"] { font-weight: 600; }
td.num, th.num { font-family: var(--font-mono); white-space: nowrap; }

/* ---- 12. Citations --------------------------------------------- */
sup.cite { font-family: var(--font-mono); line-height: 0; }
sup.cite a { text-decoration: none; font-size: 0.7em; padding: 0 1px; }
sup.cite a::before { content: ""; }
:target { scroll-margin-top: 90px; }
main { counter-reset: ref; } /* citation counter runs continuously across grouped ref-lists */
.ref-list { list-style: none; padding: 0; }
.ref-list li { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--paper-edge); }
.ref-list li::before { content: "[" counter(ref) "]"; counter-increment: ref; font-family: var(--font-mono); color: var(--accent); font-size: var(--fs-300); }
.ref-list li:target { background: var(--accent-soft); border-radius: var(--radius); padding-inline: var(--sp-3); }
.ref-list .src-title { font-style: italic; }
.ref-list .src-meta { display: block; font-size: var(--fs-300); color: var(--ink-faint); margin-top: var(--sp-1); overflow-wrap: anywhere; }

/* ---- 13. Figures / SVG diagrams -------------------------------- */
figure { margin: var(--sp-6) 0; }
figure.diagram { background: #fff; border: 1px solid var(--paper-edge); border-radius: var(--radius); padding: var(--sp-4); }  /* sp-6 at 40em */
/* Wide guide diagrams stay legible on phones: they hold a readable minimum size and scroll
   sideways inside the frame (the same pattern as the data tables) instead of shrinking to
   tiny labels. Scoped to .guide-main so the small, square founder portrait is unaffected. */
.guide-main figure.diagram:not(.diagram--portrait) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.guide-main figure.diagram:not(.diagram--portrait) svg { min-width: 34rem; }
figcaption { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--ink-faint); letter-spacing: 0.06em; margin-top: var(--sp-3); text-transform: uppercase; }

/* ---- 14. Step lists (HowTo) ------------------------------------ */
.steps { list-style: none; counter-reset: step; padding: 0; }
.steps > li { position: relative; padding-left: 3.5rem; margin-bottom: var(--sp-6); }
.steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 1rem;
}
.steps h3 { margin-top: 0; }

/* ---- 15. Joke-ad slot (empty placeholder for later) ------------ */
.joke-ad {
  border: 1px dashed var(--rule); border-radius: var(--radius);
  padding: var(--sp-5); text-align: center; color: var(--ink-faint);
  font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: 0.08em;
  text-transform: uppercase; margin: var(--sp-6) 0; background: var(--paper-2);
}

/* ---- 16. Definition / framing table (about) -------------------- */
.framing tbody th[scope="row"] { font-family: var(--font-mono); font-size: var(--fs-300); color: var(--accent-deep); font-weight: 500; }

/* ---- 17. Footer ------------------------------------------------ */
.colophon {
  margin-top: var(--sp-10); border-top: 2px solid var(--accent);
  background: var(--paper-2); padding: var(--sp-8) 0 var(--sp-6);
}
.colophon__grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }  /* 2-up at 40em, 3-up at 64em */
.colophon h2 { font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 var(--sp-3); }
.colophon ul { list-style: none; padding: 0; margin: 0; }
.colophon li { margin-bottom: var(--sp-2); }
.colophon a { text-decoration: none; color: var(--ink-soft); font-size: var(--fs-300); }
.colophon a:hover { color: var(--accent); }
.colophon__seal { display: flex; gap: var(--sp-3); align-items: flex-start; }
.colophon__seal svg { width: 46px; height: 46px; flex: 0 0 46px; }
.colophon__fine { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--paper-edge); font-size: var(--fs-200); color: var(--ink-faint); font-family: var(--font-mono); letter-spacing: 0.04em; }

/* ---- 18. Utilities --------------------------------------------- */
.text-center { text-align: center; }
.muted { color: var(--ink-faint); }
.mono { font-family: var(--font-mono); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* ---- 19. Responsive — mobile-first min-width enhancements ------- */
@media (min-width: 40em) {
  h2 { margin-top: var(--sp-10); }
  .masthead { position: sticky; top: 0; }                      /* compact one-row header pins */
  .nav { width: auto; margin-left: auto; gap: var(--sp-5); }   /* inline, right of the wordmark */
  .nav a { padding: var(--sp-2) 0; }
  .colophon__grid { grid-template-columns: 1fr 1fr; }
  .colophon__seal { grid-column: 1 / -1; }                     /* seal spans the pair at this tier */
  figure.diagram { padding: var(--sp-6); }                     /* restore roomier diagram padding */
  th, td { padding: var(--sp-3) var(--sp-4); }                 /* and roomier table cells */
}
@media (min-width: 64em) {
  .colophon__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .colophon__seal { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* ---- 20. Guide reading rail (contents + water-fill progress) --- */
.guide-layout { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
.guide-main, .guide-rail { min-width: 0; }       /* shrink to the column so figures/tables scroll within, not the page */
.guide-rail { order: -1; }                       /* mobile: above the article */
.guide-rail .rail { border: 0; padding: 0; }
.rail__summary {
  list-style: none; cursor: pointer; padding: var(--sp-2) 0;
  font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.rail__summary::-webkit-details-marker { display: none; }
.rail__pct { color: var(--accent); }
.rail__body { padding-top: var(--sp-4); }

/* The little tank fills with clean water as you read (--p set by JS, 0–1). */
.tank {
  position: relative; width: 64px; height: 88px; margin: 0 0 var(--sp-5);
  border: 2px solid var(--accent); border-radius: 6px; overflow: hidden; background: #fff;
}
.tank__water {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--p, 0) * 100%); background: linear-gradient(180deg, #5fe0d2, var(--turquoise));
  transition: height .3s ease-out;
}
.tank__wave {
  position: absolute; top: -5px; left: 0; right: 0; height: 10px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='10'%20viewBox='0%200%2040%2010'%3E%3Cpath%20d='M0,5Q10,0,20,5T40,5V10H0Z'%20fill='%232ec4b6'/%3E%3C/svg%3E") repeat-x;
  background-size: 40px 10px;
  animation: tank-wave 4s linear infinite;
}
.tank__water::after {                            /* a single slow bubble */
  content: ""; position: absolute; left: 32%; bottom: 6%;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .65);
  animation: tank-bubble 5s ease-in infinite;
}
@keyframes tank-wave { to { background-position-x: 40px; } }
@keyframes tank-bubble {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: .8; }
  100% { transform: translateY(-58px); opacity: 0; }
}

.toc { display: flex; flex-direction: column; gap: 2px; }
.toc__link {
  font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: 0.03em;
  line-height: 1.35; text-decoration: none; color: var(--ink-faint);
  padding: var(--sp-2) var(--sp-3); border-left: 2px solid var(--paper-edge);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.toc__link:hover { color: var(--accent); border-left-color: var(--accent); }
.toc__link.is-current {
  color: var(--accent-deep); border-left-color: var(--accent); background: var(--accent-soft);
}

@media (min-width: 1024px) {
  .guide-layout {
    grid-template-columns: minmax(0, var(--measure)) 1fr;
    grid-template-areas: "main rail"; gap: var(--sp-8); align-items: start;
  }
  .guide-main { grid-area: main; }
  .guide-rail { grid-area: rail; order: 0; position: sticky; top: 88px; }
  .guide-rail > * { max-width: 15rem; }
  .guide-rail .rail__summary { display: none; }
  .guide-rail .rail__body { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tank__wave, .tank__water::after { animation: none !important; }
}

/* ---- 21. Interactive specimen tank (homepage) ------------------ */
.tank-demo { padding-top: var(--sp-6); }
.tank-demo__stage { display: flex; gap: var(--sp-3); align-items: stretch; }
.tank-demo__stage > .aquarium { flex: 1 1 auto; min-width: 0; }   /* tank yields width to the meter */
.fish-health {
  flex: 0 0 auto; width: clamp(48px, 12vw, 64px);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
}
.fish-health__title {
  font-family: var(--font-mono); font-size: var(--fs-200); line-height: 1.15;
  letter-spacing: .04em; text-transform: uppercase; text-align: center; color: var(--ink-soft);
}
.fish-health__track {
  position: relative; flex: 1 1 auto; width: 18px; border-radius: 9px; overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--paper-edge);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
}
.fish-health__fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--health, 0) * 100%); background: #c0504d;
  transition: background-color .5s ease;
}
.fish-health__track::after {   /* graduated scale lines, every 20% */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to top,
    transparent 0 calc(20% - 1px), rgba(0, 0, 0, .16) calc(20% - 1px) 20%);
}
.fish-health__cap {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.fish-health__face { font-size: 1.15rem; line-height: 1; }
.tank-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sp-3);
  margin: var(--sp-4) 0 0; padding: var(--sp-4);
  background: var(--paper-2); border: 1px solid var(--paper-edge); border-radius: var(--radius);
}
.tank-stats__item { margin: 0; text-align: center; }
.tank-stats dt {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--sp-1);
}
.tank-stats__val {
  margin: 0; font-family: var(--font-display); color: var(--ink);
  font-size: clamp(1rem, 2.4vw, 1.3rem); font-variant-numeric: tabular-nums;
}
/* traffic-light status — red = bad, orange = ok, green = good — on the dot, value and trend bar */
.tank-stats__dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 5px; vertical-align: middle; background: var(--ink-faint);
}
.tank-stats__bar { height: 4px; margin: 6px auto 0; border-radius: 2px; overflow: hidden; background: var(--paper-edge); }
.tank-stats__bar > span { display: block; height: 100%; width: 0; background: var(--ink-faint); transition: width .3s ease, background-color .3s ease; }
.tank-stats__item[data-level="good"] .tank-stats__dot,
.tank-stats__item[data-level="good"] .tank-stats__bar > span { background: #2f7d4f; }
.tank-stats__item[data-level="warn"] .tank-stats__dot,
.tank-stats__item[data-level="warn"] .tank-stats__bar > span { background: #c4781a; }
.tank-stats__item[data-level="bad"] .tank-stats__dot,
.tank-stats__item[data-level="bad"] .tank-stats__bar > span { background: #b23b2e; }
.tank-stats__item[data-level="good"] .tank-stats__val { color: #2f7d4f; }
.tank-stats__item[data-level="warn"] .tank-stats__val { color: #c4781a; }
.tank-stats__item[data-level="bad"] .tank-stats__val { color: #b23b2e; }
.tank-stats__item--advice, .tank-stats__item--note {
  grid-column: 1 / -1; margin-top: var(--sp-2); padding-top: var(--sp-3);
  border-top: 1px solid var(--paper-edge); text-align: left;
}
.tank-stats__advice { margin: 0; font-size: 1.05rem; color: var(--ink-soft); }
.tank-stats__note { margin: 0; max-width: 80ch; color: var(--ink-soft); }
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 5px; padding: 0; vertical-align: baseline;
  font-family: var(--font-mono); font-size: 0.66rem; font-style: italic; line-height: 1;
  text-transform: none; color: var(--accent); background: transparent;
  border: 1px solid var(--accent); border-radius: 50%; cursor: pointer;
}
.info-btn:hover { color: var(--paper); background: var(--accent); }
.tank-modal {
  max-width: 32rem; width: calc(100% - 2rem); padding: var(--sp-5);
  border: 1px solid var(--paper-edge); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow);
}
.tank-modal::backdrop { background: rgba(20, 30, 28, .5); }
.tank-modal__title { margin: 0 0 var(--sp-3); }
.tank-modal p { margin: 0 0 var(--sp-3); color: var(--ink-soft); }
.tank-modal__close { margin-top: var(--sp-2); }
.tank-explainer { margin-top: var(--sp-4); }
.tank-explainer__stage {
  display: inline-block; margin-bottom: var(--sp-2); font-family: var(--font-mono);
  font-size: var(--fs-200); letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.tank-explainer__body { margin: 0; max-width: 70ch; color: var(--ink-soft); }
.aq-hand {
  position: absolute; top: -6px; width: 54px; height: 56px; margin-left: -27px;
  pointer-events: none; opacity: 0; transform-origin: 50% 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
  animation: aq-hand .9s ease-out forwards;
}
.aq-hand svg { width: 100%; height: 100%; display: block; }
@keyframes aq-hand {
  0%   { opacity: 0; transform: translateY(-12px) rotate(-7deg); }
  22%  { opacity: 1; transform: translateY(0) rotate(-7deg); }
  42%  { transform: translateY(0) rotate(7deg); }
  60%  { transform: translateY(0) rotate(-4deg); }
  78%  { transform: translateY(0) rotate(3deg); }
  100% { opacity: 0; transform: translateY(-10px) rotate(0); }
}
.aquarium {
  --clarity: 0;
  position: relative; height: clamp(260px, 44vw, 500px);
  border: 3px solid var(--accent); border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, #3a4d31, #1d2a17);   /* neglected: murky green */
  box-shadow: var(--shadow); cursor: crosshair; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.aquarium > div { position: absolute; inset: 0; pointer-events: none; }
.aquarium__water {
  background: linear-gradient(180deg, #46e4d4 0%, #1aa093 60%, #0f7b71 100%);
  opacity: var(--clarity); transition: opacity .6s ease;
}
/* substrate/plants/airstone anchor to the BOTTOM: the child selector below must out-
   weigh `.aquarium > div { inset: 0 }` (0,1,1), so they use `.aquarium > .x` (0,2,1). */
.aquarium > .aquarium__substrate {
  top: auto; height: 28px;
  background: repeating-linear-gradient(90deg, #c9a875 0 6px, #bb9a66 6px 12px);
  box-shadow: inset 0 6px 10px rgba(0, 0, 0, .25);
}
.aquarium__algae {
  opacity: calc(1 - var(--clarity)); transition: opacity .6s ease;
  background:
    radial-gradient(circle at 18% 32%, rgba(90, 120, 45, .55) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 68%, rgba(80, 110, 40, .5) 0 2px, transparent 4px),
    radial-gradient(circle at 70% 24%, rgba(95, 125, 50, .5) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 60%, rgba(80, 110, 40, .5) 0 3px, transparent 4px),
    radial-gradient(circle at 30% 85%, rgba(85, 115, 45, .5) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(60, 95, 30, .45), rgba(40, 70, 20, .55));
  animation: aq-drift 14s linear infinite;
}
.aquarium__caustics {
  opacity: calc(var(--clarity) * .85); mix-blend-mode: screen;
  background:
    radial-gradient(45% 35% at 28% 18%, rgba(255, 255, 255, .22), transparent 60%),
    radial-gradient(40% 30% at 68% 26%, rgba(200, 255, 250, .16), transparent 60%),
    radial-gradient(35% 28% at 50% 60%, rgba(255, 255, 255, .12), transparent 60%);
  animation: aq-caustic 9s ease-in-out infinite alternate;
}
.aquarium__glass {
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .16) 0%, transparent 26%),
    radial-gradient(120% 120% at 50% 0%, transparent 60%, rgba(0, 0, 0, .28) 100%);
}
/* bubble intensity follows the aeration level (--aer 0..1) */
.aquarium__bubbles { opacity: var(--aer, 0); transition: opacity .4s ease; }
.aquarium__bubbles span {
  position: absolute; bottom: 8%; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .5); opacity: 0;
  animation: aq-bubble 6s ease-in infinite;
  animation-duration: calc(6s - var(--aer, 0) * 3s);   /* more air → faster, livelier bubbles */
}
.aquarium__bubbles span:nth-child(1) { left: 22%; }
.aquarium__bubbles span:nth-child(2) { left: 55%; width: 5px; height: 5px; animation-delay: 2.2s; }
.aquarium__bubbles span:nth-child(3) { left: 78%; width: 9px; height: 9px; animation-delay: 4s; }
.aquarium__bubbles span:nth-child(4) { left: 40%; width: 6px; height: 6px; animation-delay: 1.2s; }
.aquarium__bubbles span:nth-child(5) { left: 47%; width: 8px; height: 8px; animation-delay: 3s; }
.aquarium__bubbles span:nth-child(6) { left: 60%; width: 6px; height: 6px; animation-delay: 0.6s; }
.aquarium__bubbles span:nth-child(7) { left: 67%; width: 5px; height: 5px; animation-delay: 5s; }
.aquarium__bubbles span:nth-child(8) { left: 50%; width: 7px; height: 7px; animation-delay: 2s; }
.aquarium > .aquarium__plants { top: auto; bottom: 0; height: 64px; opacity: 0; transition: opacity .5s ease; }
.aquarium.has-plants > .aquarium__plants { opacity: .92; }
.aquarium__plants svg { width: 100%; height: 100%; display: block; }
.aquarium > .aquarium__airstone { top: auto; right: auto; bottom: 5px; left: 50%; transform: translateX(-50%); width: 52px; height: 16px; }
.aquarium__airstone svg { width: 100%; height: 100%; display: block; }
.aquarium__refresh {
  z-index: 4;
  background: linear-gradient(180deg, rgba(214, 247, 255, .6), rgba(214, 247, 255, 0) 65%);
  opacity: 0;
}
.aquarium.is-refreshing .aquarium__refresh { animation: aq-refresh .8s ease-out; }
@keyframes aq-refresh {
  0% { opacity: 0; transform: translateY(-100%); }
  18% { opacity: .85; }
  100% { opacity: 0; transform: translateY(0); }
}
.aquarium__wipe {
  width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%;
  transform: translate(-9999px, -9999px); mix-blend-mode: screen; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle, rgba(255, 255, 255, .30), transparent 70%);
}
.aquarium.is-wiping .aquarium__wipe { opacity: 1; }
.fish {
  position: absolute; top: 0; left: 0; width: 46px; height: 26px; will-change: transform, filter;
  /* --lum / --sat track each fish's wellbeing: a fed fish glows bright and vivid, a hungry one dims */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)) brightness(var(--lum, 1)) saturate(var(--sat, 1));
  transition: filter .6s linear;
}
.fish svg { width: 100%; height: 100%; display: block; }
.fish__mouth { transition: d .35s ease; }
.aquarium__fx-layer { z-index: 3; }   /* hearts rise above the fish */
.aq-heart {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  pointer-events: none; opacity: 0; will-change: transform, opacity;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
  animation: aq-heart 1.15s ease-out forwards;
}
.aq-heart svg { width: 100%; height: 100%; display: block; }
@keyframes aq-heart {
  0%   { opacity: 0;   transform: translateY(2px) scale(.3); }
  18%  { opacity: .95; transform: translateY(-4px) scale(1); }
  100% { opacity: 0;   transform: translateY(-36px) scale(.85); }
}
.pellet {
  position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%;
  background: #e3b34d; box-shadow: 0 0 5px rgba(227, 179, 77, .9); will-change: transform;
}
.aquarium__timer {
  position: absolute; bottom: 10px; left: 12px; pointer-events: none;
  font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: .06em; text-transform: uppercase;
  color: #eafffb; text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.aquarium__age {
  position: absolute; top: 10px; right: 12px; pointer-events: none;
  font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: .06em; text-transform: uppercase;
  color: #eafffb; text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.tank-demo__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
}
.tank-speed { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tank-speed__label, .tank-speed__out {
  font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.tank-speed__out { min-width: 2.8ch; text-align: right; font-variant-numeric: tabular-nums; }
.tank-speed__range { width: clamp(90px, 22vw, 160px); accent-color: var(--accent); cursor: pointer; }
.tank-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.tank-real {
  display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.tank-real input { accent-color: var(--accent); cursor: pointer; }
.tank-speed__range:disabled { cursor: default; }
.tank-speed:has(input:disabled), .tank-real:has(input:disabled) { opacity: .5; }
.tank-reset {
  cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-200);
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep);
  background: var(--paper-2); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 6px 12px;
}
.tank-reset:hover { background: #fff; }
.tank-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tank-btn {
  cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-200);
  letter-spacing: .06em; text-transform: uppercase; color: var(--paper);
  background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius); padding: 6px 12px;
}
.tank-btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.tank-btn:focus-visible, .tank-reset:focus-visible,
.tank-real input:focus-visible, .tank-speed__range:focus-visible {
  outline: 2px solid var(--accent-deep); outline-offset: 2px;
}
.aquarium__hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); pointer-events: none;
  font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: .06em; text-transform: uppercase;
  color: #eafffb; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); opacity: .9; transition: opacity .4s;
}
.aquarium.is-touched .aquarium__hint { opacity: 0; }

@keyframes aq-drift { to { background-position: 12px 8px, -10px 6px, 8px -8px, -12px -6px, 6px 10px, 0 0; } }
@keyframes aq-caustic { to { transform: translate3d(4%, 2%, 0) scale(1.06); } }
@keyframes aq-bubble {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: .7; }
  100% { transform: translateY(-400px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .aquarium__algae, .aquarium__caustics, .aquarium__bubbles span { animation: none !important; }
}