/* Water reads at a glance: a level bar under the amount, the same bar language as calories;
   More's extra controls line up under the buttons instead of floating */

body.pm-premium #waterSec .wlevel{position:relative;height:10px;border-radius:999px;margin:10px 0 2px;background:linear-gradient(180deg,#EBEAE7,#F9F8F5);box-shadow:inset 0 1px 2px rgba(30,31,33,.14);overflow:hidden}
body.pm-premium #waterSec .wlevel i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(180deg,#A7CFF2,#7FB3E2);transition:width .6s ease}
body.pm-premium #waterSec .wopts:not(.hide){display:flex!important;flex-direction:column;align-items:flex-start;gap:8px;margin-top:10px}
body.pm-premium #waterSec .wopts .repmore{margin:0!important;text-align:left!important;align-self:stretch}
body.pm-premium #waterSec .wopts .wunits{margin:0!important}/* BR-04: PORTRAIT. iPhone home-screen apps ignore the manifest's portrait setting and Safari has no
   orientation lock, so a phone turned sideways gets this cover instead. It only covers: nothing under it
   is closed, reloaded or reset, so a running workout, its rest clock, a typed draft and every open sheet
   are exactly where they were when the phone comes back upright. Touch phones only (a desktop window
   that happens to be wide is not a sideways phone), and never over the open barcode camera, which can
   need the phone sideways. Android installed apps already honour the manifest and never see it.
   The page's shape alone is not enough: with the keyboard up, a small upright Android phone is briefly
   wider than tall, so the device's own orientation must also say sideways (html.rot-side). *//* the Profile sheet's close key is drawn at 38 px; its touch area reaches the 44 px a thumb needs, nothing moves */


#pfSheetX{position:relative}
#pfSheetX::after{content:"";position:absolute;inset:-4px;border-radius:50%}
#rotateHint{display:none}
@media (orientation:landscape) and (max-height:500px) and (hover:none) and (pointer:coarse){
  html.rot-side #rotateHint{display:flex;position:fixed;inset:0;z-index:2147483000;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    padding:max(16px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
    background:var(--bg,#EEF2F6);color:var(--ink,#163E63);text-align:center}
  body:has(#camScan:not(.hide)) #rotateHint,body:has(#phr:not(.hide)) #rotateHint,html.rot-ok #rotateHint{display:none}
}
#rotateHint .rh-phone{width:34px;height:56px;border-radius:9px;border:3px solid currentColor;position:relative;opacity:.85}
#rotateHint .rh-phone::after{content:"";position:absolute;left:50%;bottom:5px;width:10px;height:3px;margin-left:-5px;border-radius:2px;background:currentColor}
#rotateHint b{font-size:20px;font-weight:800;letter-spacing:-.01em}
#rotateHint button{margin-top:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--hair,#C8D2DD);background:transparent;color:var(--ink,#163E63);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
#rotateHint span{font-size:14.5px;font-weight:600;color:var(--ink-2,#2F6A9A);max-width:340px;line-height:1.35}