/* Tank Log — simple fish theme: deep-water header with bubbles, sandy footer */
:root{
  --deep:#0b3d50; --mid:#13708a; --shallow:#3fb6c9; --foam:#e8f7fa;
  --bg:#f4fbfc; --surface:#ffffff; --fg:#12303a; --muted:#587680; --line:#d3e8ec;
  --coral:#ff7b3d; --sand:#efe2c4; --sand-fg:#6b5a36;
  --good:#24875a; --warn:#b5650d; --bad:#c0352d;
  --chip-test:#d7eefa; --chip-change:#d3f2e6; --chip-death:#fbdcd6; --chip-other:#eee8d8;
  --display:"Fredoka",system-ui,sans-serif; --body:"Nunito",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#071c24; --surface:#0d2a35; --fg:#dff1f5; --muted:#8fb0b9; --line:#1c4250;
  --sand:#3a3324; --sand-fg:#d8c9a3; --good:#6fd39f; --warn:#f0a85a; --bad:#f07d74;
  --chip-test:#16384a; --chip-change:#15392f; --chip-death:#4a2420; --chip-other:#352f22;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 var(--body)}
.wrap{max-width:820px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.2}

/* Header: the sea */
.sea{position:relative;overflow:hidden;color:var(--foam);
  background:linear-gradient(180deg,var(--deep) 0%,var(--mid) 70%,var(--shallow) 100%)}
.head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;flex-wrap:wrap;position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font:600 1.3rem var(--display)}
nav{display:flex;gap:6px}
nav a{color:var(--foam);text-decoration:none;padding:6px 14px;border-radius:99px;font-weight:700}
nav a[aria-current]{background:rgba(255,255,255,.18)}
nav a:hover{background:rgba(255,255,255,.12)}
.intro{position:relative;z-index:1;padding-top:28px;padding-bottom:72px}
.intro h1{margin:0;font-size:2.4rem}
.intro p{margin:6px 0 0;opacity:.9}
.wave{position:absolute;bottom:-1px;left:0;width:100%;height:60px;fill:var(--bg)}
.bubbles i{position:absolute;bottom:-20px;width:12px;height:12px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);animation:rise 9s linear infinite}
.bubbles i:nth-child(1){left:8%;animation-delay:0s}
.bubbles i:nth-child(2){left:20%;width:8px;height:8px;animation-delay:3s;animation-duration:7s}
.bubbles i:nth-child(3){left:35%;animation-delay:5s}
.bubbles i:nth-child(4){left:52%;width:16px;height:16px;animation-delay:1s;animation-duration:11s}
.bubbles i:nth-child(5){left:66%;width:7px;height:7px;animation-delay:6s}
.bubbles i:nth-child(6){left:78%;animation-delay:2s;animation-duration:8s}
.bubbles i:nth-child(7){left:88%;width:9px;height:9px;animation-delay:4s}
.bubbles i:nth-child(8){left:95%;animation-delay:7s;animation-duration:10s}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:1}50%{transform:translate(8px,-160px)}100%{transform:translate(-6px,-340px);opacity:0}}
@media (prefers-reduced-motion:reduce){.bubbles i{animation:none;display:none}}

main{padding-top:8px;padding-bottom:48px}
main section{margin-bottom:32px}
h2{font-size:1.25rem;margin:0 0 12px;color:var(--mid)}
@media (prefers-color-scheme:dark){h2{color:var(--shallow)}}

/* Latest readings */
.readings{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.r{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.r .k{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.r .v{font:600 1.5rem var(--display);font-variant-numeric:tabular-nums}
.r .u{font:400 .8rem var(--body);color:var(--muted);margin-left:3px}
.r .d{font-size:.78rem;color:var(--muted)}
.r.ok .v{color:var(--good)} .r.warn .v{color:var(--warn)} .r.bad .v{color:var(--bad)}

/* History */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.filters button{font:inherit;font-size:.85rem;padding:5px 12px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--mid);border-color:var(--mid);color:#fff}
.log{list-style:none;margin:0;padding:0;border-left:3px solid var(--line);margin-left:6px}
.ev{position:relative;display:grid;grid-template-columns:110px 1fr;gap:4px 14px;padding:12px 0 12px 20px}
.ev::before{content:"";position:absolute;left:-9px;top:17px;width:12px;height:12px;border-radius:50%;background:var(--shallow);border:3px solid var(--bg)}
.ev[data-type="death"]::before{background:var(--bad)}
.ev[data-type="water_change"]::before{background:var(--good)}
.ev time{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.ev time small{display:block}
.chip{display:inline-block;font-size:.75rem;font-weight:700;padding:1px 9px;border-radius:99px;background:var(--chip-other);margin-right:6px}
.chip.water_test{background:var(--chip-test)} .chip.water_change{background:var(--chip-change)} .chip.death{background:var(--chip-death)}
.vals{font-variant-numeric:tabular-nums;font-weight:700;margin-top:2px}
.note{margin:2px 0 0;color:var(--muted)}
.empty{color:var(--muted)}
@media (max-width:480px){.ev{grid-template-columns:1fr}.ev time small{display:inline;margin-left:6px}}

/* Fish cards */
.fish{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.fcard img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--line)}
.fb{padding:12px 14px 14px}
.fb h3{margin:0;font-size:1.3rem;color:var(--coral)}
.fs{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.fb p{margin:6px 0 0;font-size:.92rem;color:var(--muted)}

.sand{background:var(--sand);color:var(--sand-fg);padding:18px 0;font-size:.85rem;
  border-top:6px dotted rgba(0,0,0,.06)}