/* BUFF OS v190 — the page scrolls like a page, and the water comes in like water.

   THE DOCK. v189 tried to put the dock flush to the bottom by detecting the
   extra strip iOS 26 reserves under a standalone web app and zeroing the dock's
   padding. It did not work — the strip is outside the web view, so nothing in
   the page can paint it, and the dock was still sitting ~60pt above the glass.
   Focus Coach had the identical shell and the identical strip; what removed it
   there was structural: iOS reserves that strip under a NON-SCROLLING page
   (body overflow hidden, an inner div scrolling instead), and stops reserving
   it when the document itself scrolls. So: html/body/.app release their height
   and overflow, the document scrolls, content runs under the dock, and only the
   dock pads for the home indicator — exactly the shape that works. */
html, body { height: auto !important; min-height: 100dvh; overflow: visible !important; overscroll-behavior-y: auto; }
.app { height: auto !important; min-height: 100dvh; overflow: visible !important;
  /* room for the dock, so the last card is never trapped under it */
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
.tabbar { bottom: 0 !important;
  --tab-bottom-pad: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  /* frosted, and it fades in from the top rather than starting at a line */
  background: linear-gradient(180deg, rgba(13,15,20,0) 0%, rgba(13,15,20,.55) 34%, rgba(13,15,20,.86) 100%) !important;
  backdrop-filter: blur(22px) saturate(1.35) !important; -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
  padding-top: 20px !important; border: 0 !important; box-shadow: none !important;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 40%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 40%, #000 100%); }
html[data-ios-system-strip] .tabbar { --tab-bottom-pad: 10px !important; }
/* the page holds still while a sheet, an overlay or the arrange bar is up */
body.scroll-lock { overflow: hidden !important; height: 100dvh !important; }
body.v43-arranging { padding-bottom: 118px; }

/* THE WATER. The meter was a bar that widened; now the fill is a body of water
   with a surface that moves, and logging a drink sends it rushing in — a surge
   past the mark, a slosh back, and it settles, with a crest of light riding
   the leading edge on the way. */
.wmeter { position: relative; overflow: hidden; }
.wmeter > i { position: relative; overflow: visible;
  background: linear-gradient(180deg, #8fd0f5 0%, #4a97dd 55%, #2f6fc2 100%) !important;
  transition: width .9s cubic-bezier(.22,1.15,.36,1) !important; }
.wmeter.drain > i { transition: width .7s cubic-bezier(.5,0,.25,1) !important; }
/* the surface: a soft sheen that drifts along the top of the water, clipped to
   the water's own rounded shape so nothing ever runs past the end of the fill.
   (Scallops were the second attempt; they read as a row of half-circles and
   poked out past the rounded end. This is light on water, not a pattern.) */
.wmeter > i { overflow: hidden !important; border-radius: inherit; }
.wmeter > i::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 35%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.22) 65%, rgba(255,255,255,0) 100%) 0 0 / 140px 100% repeat-x;
  animation: wSheen 5.5s linear infinite; }
.wmeter > i::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0)) 0 0 / 220px 100% repeat-x;
  animation: wSheen 3.2s linear infinite reverse; }
@keyframes wSheen { from { background-position-x: 0; } to { background-position-x: 140px; } }
/* the crest: a band of light at the leading edge while the water is moving */
.wmeter .wcrest { position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,0) 100%);
  filter: blur(1px); }
/* the surge on a log: overshoot, slosh back, settle */
.wmeter.surge > i { animation: wSurge .9s cubic-bezier(.22,1.15,.36,1) both; }
@keyframes wSurge {
  0%   { filter: brightness(1) saturate(1); }
  18%  { filter: brightness(1.16) saturate(1.12); }
  55%  { filter: brightness(1.06) saturate(1.04); }
  100% { filter: brightness(1) saturate(1); } }
.wmeter.surge .wcrest { animation: wCrest .9s cubic-bezier(.22,1.15,.36,1) both; }
@keyframes wCrest { 0% { opacity: 0; transform: translateX(-30px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(12px); } }
/* droplets thrown up as it lands */
.wmeter .wdrop { position: absolute; top: 40%; width: 5px; height: 5px; border-radius: 50%; background: #bfe6ff; pointer-events: none;
  opacity: 0; animation: wDrop .8s cubic-bezier(.2,.8,.3,1) both; }
@keyframes wDrop { 0% { opacity: .9; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx,14px), -18px) scale(.4); } }
@media (prefers-reduced-motion: reduce) {
  .wmeter > i::before, .wmeter > i::after, .wmeter.surge > i, .wmeter .wcrest, .wmeter .wdrop { animation: none !important; }
}

/* ===== Coffee meter (v192) — the same rush, in coffee colours =====
   buff-v50 paints the water fill with !important, so the coffee variant has to
   answer in the same layer and with more specificity. */
.wmeter.cmeter > i {
  background: linear-gradient(180deg, #7d5228 0%, #4f2f13 55%, #331d0b 100%) !important;
}
.wmeter.cmeter.full > i {
  background: linear-gradient(180deg, #8d5f30 0%, #5c3818 55%, #3d240d 100%) !important;
}
/* the white sheen is what made it read as cream — keep it, but much fainter on coffee */
.wmeter.cmeter > i::before { opacity: .34; }
.wmeter.cmeter > i::after  { opacity: .30; }
.wmeter.cmeter .wdrop { background: #b98a56; }
.wmeter.cmeter .wcrest {
  background: linear-gradient(90deg, rgba(255,226,192,0) 0%, rgba(255,226,192,.28) 55%, rgba(255,226,192,0) 100%);
}


/* how many glasses / bottles / cups / mugs, under each meter */
.wtally{margin-top:7px;font-size:12px;font-weight:800;letter-spacing:.02em;
  color:#3ddc84;min-height:14px}
.wtally:empty{display:none}

/* Ticked supplements used the muted sage gradient, which read as "greyed out"
   rather than "done". Same bright green as the hydration counts, so a completed
   thing looks completed at a glance. */
.pill.on .pchk { background: #3ddc84 !important; box-shadow: 0 0 0 3px rgba(61,220,132,.18); }
.pill.on .pchk svg { stroke: #06180d !important; stroke-width: 4; }
.pill.on { border-color: rgba(61,220,132,.45) !important;
  background: linear-gradient(150deg, rgba(61,220,132,.13), rgba(61,220,132,.03)) !important; }
.pill.on .pi { background: rgba(61,220,132,.16) !important; }