:root{
  --bg:#F7F2F2; --surface:#FFFFFF; --surface-2:#F1EAEA; --line:#E3D9D9;
  --ink:#26212A; --ink-2:#6B6069; --ink-3:#9C9098;
  --feed:#D98324; --feed-soft:#FBEBD5; --feed-line:#EFCFA2;
  --nap:#35857A; --nap-soft:#DDF0EC; --nap-line:#A9D8CF;
  --med:#6F5FB0; --med-soft:#E9E4F6; --med-line:#C6BCE7;
  --pee:#B99320; --pee-soft:#FAF1D4; --pee-line:#E6D28C;
  --poo:#8A5C40; --poo-soft:#F0E2D9; --poo-line:#D9BBA6;
  --pump:#31708F; --pump-soft:#DDEBF3; --pump-line:#A6C7DB;
  --veil:rgba(247,242,242,.58); --veil-top:rgba(247,242,242,.92); --glass:rgba(255,255,255,.70);
  --warn:#BE4436; --warn-soft:#FBE7E4;
  --shadow:0 1px 2px rgba(38,33,42,.06), 0 8px 24px -12px rgba(38,33,42,.22);
  --r:18px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#15141B; --surface:#1E1D26; --surface-2:#272531; --line:#35323F;
    --ink:#F0EBF1; --ink-2:#A49DAD; --ink-3:#736C7E;
    --feed:#F2B45E; --feed-soft:#3B2D1A; --feed-line:#5C452444;
    --nap:#72C4B4; --nap-soft:#153330; --nap-line:#2A5C5444;
    --med:#AE9FE6; --med-soft:#252038; --med-line:#463C6E44;
    --pee:#E6CB63; --pee-soft:#332C15; --pee-line:#5A4E2044;
    --poo:#C6906C; --poo-soft:#2E2119; --poo-line:#59402D44;
    --pump:#74B2D4; --pump-soft:#14262F; --pump-line:#2A4A5C44;
    --veil:rgba(21,20,27,.66); --veil-top:rgba(21,20,27,.93); --glass:rgba(30,29,38,.72);
    --warn:#F0857A; --warn-soft:#3A1E1B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#15141B; --surface:#1E1D26; --surface-2:#272531; --line:#35323F;
  --ink:#F0EBF1; --ink-2:#A49DAD; --ink-3:#736C7E;
  --feed:#F2B45E; --feed-soft:#3B2D1A; --feed-line:#5C452444;
  --nap:#72C4B4; --nap-soft:#153330; --nap-line:#2A5C5444;
  --med:#AE9FE6; --med-soft:#252038; --med-line:#463C6E44;
  --pee:#E6CB63; --pee-soft:#332C15; --pee-line:#5A4E2044;
  --poo:#C6906C; --poo-soft:#2E2119; --poo-line:#59402D44;
  --pump:#74B2D4; --pump-soft:#14262F; --pump-line:#2A4A5C44;
  --veil:rgba(21,20,27,.66); --veil-top:rgba(21,20,27,.93); --glass:rgba(30,29,38,.72);
  --warn:#F0857A; --warn-soft:#3A1E1B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--bg);}
/* body stays transparent: an opaque body background paints over a z-index:-1
   pseudo-element, which would hide the photo entirely */
body{
  margin:0; background:transparent; color:var(--ink);
  font-family:"Source Sans 3",ui-sans-serif,system-ui,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}

/* Photo backdrop. Two fixed layers behind everything: the image, then a veil heavy
   enough that nothing above it loses contrast at 3am. */
/* Only on the signed-in page: /bg.jpg is behind the password gate, so requesting it
   from the login screen returns a redirect the browser then caches as a failed image. */
body.app::before, body.app::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;}
body.app::before{
  background:url("/bg.jpg") center top / cover no-repeat;
  /* the photo is bright and busy; pull it back before the veil even lands */
  filter:saturate(.8);
}
body.app::after{background:linear-gradient(to bottom,
  var(--veil-top) 0, var(--veil-top) 42px, var(--veil) 150px, var(--veil) 100%);}
img{max-width:100%}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none;}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:6px;}
.mono{font-family:"DM Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;}

.wrap{max-width:470px; margin:0 auto; padding-inline:18px;
  padding-block:22px calc(64px + env(safe-area-inset-bottom));}

.banner{position:sticky; top:0; z-index:30; background:var(--warn); color:#fff;
  padding:11px 16px; font-size:14px; font-weight:600; text-align:center;}

/* ---- header ---- */
.top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px;}
.name{font-family:Gabarito,system-ui,sans-serif; font-weight:800; font-size:30px; letter-spacing:-.02em; line-height:1;}
.day{font-size:12px; color:var(--ink-2); letter-spacing:.06em; text-transform:uppercase;}

/* ---- since strip ---- */
.since{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:22px;}
/* direct children only — ".since div" also matched .k/.v/.s, which each then drew
   their own panel once the fill became translucent */
.since > div{background:var(--glass); padding:10px 10px 11px; min-width:0;}
.since .k{font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* one line, always: the tile is ~88px of usable width on a 375px phone */
.since .v{font-family:"DM Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:clamp(15px, 4.5vw, 18px); font-weight:500; letter-spacing:-.03em;
  white-space:nowrap; overflow:hidden;}
.since .v.stale{color:var(--ink-2);}
.since .v.due{color:var(--warn);}
.since .s{font-size:11px; color:var(--ink-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ---- feed card ---- */
.card{background:var(--glass); backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);}
.feedcard{padding:14px; margin-bottom:12px; border-color:var(--feed-line);}
.cardhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding-inline:2px;}
.cardhead h2{margin:0; font-family:Gabarito,sans-serif; font-size:15px; font-weight:700;
  display:flex; align-items:center; gap:7px;}

.lobes{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.lobe{position:relative; overflow:hidden; min-height:104px; border-radius:14px; background:var(--feed-soft);
  border:1.5px solid transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  transition:border-color .2s, transform .1s;}
.lobe:active{transform:scale(.985);}
.lobe .side{font-family:Gabarito,sans-serif; font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--feed);}
.lobe .t{font-family:"DM Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:26px; font-weight:500; letter-spacing:-.03em; color:var(--ink);}
.lobe .sub{font-size:11px; color:var(--ink-2);}
.lobe.on{border-color:var(--feed);}
.lobe.paused{border-color:var(--feed-line);}
.lobe.paused .side{animation:none; opacity:.55;}
.lobe .fill{position:absolute; inset:auto 0 0 0; background:var(--feed); opacity:.16; height:0; transition:height .6s linear;}
.lobe.on .side{animation:breathe 2.6s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:1} 50%{opacity:.45}}

.bottlebtn{margin-top:10px; width:100%; min-height:44px; border-radius:12px; background:var(--feed); color:#241704;
  font-family:Gabarito,sans-serif; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .1s;}
.bottlebtn svg{width:17px; height:17px; fill:#241704;}
.bottlebtn:active{transform:scale(.985);}

.ctrl{margin-top:10px; display:grid; grid-template-columns:1fr 1.4fr; gap:8px;}
.ctrl button{min-height:48px; border-radius:12px; font-family:Gabarito,sans-serif; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; gap:9px; transition:transform .1s;}
.ctrl button:active{transform:scale(.985);}
.pausebtn{background:var(--feed-soft); color:var(--feed); border:1.5px solid var(--feed-line);}
.finish{background:var(--feed); color:#241704;}
.finish .tot{font-family:"DM Mono",monospace; font-weight:500; opacity:.7;}
.backstart{width:100%; min-height:40px; margin-top:6px; font-size:13px; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line);}
.backstart:active{color:var(--ink);}

/* quick-add chips */
.chips{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:4px;}
.chips button{min-height:52px; border-radius:12px; background:var(--feed-soft); color:var(--feed);
  border:1.5px solid var(--feed-line); font-family:Gabarito,sans-serif; font-weight:700; font-size:16px;}
.chips button:active{background:var(--feed); color:#241704;}

/* destructive */
.danger{min-height:50px; width:100%; border-radius:13px; background:var(--warn); color:#fff;
  font-family:Gabarito,sans-serif; font-weight:700; font-size:15px; margin-bottom:8px;}
.entry{display:flex; align-items:center; gap:11px; padding:13px; border-radius:13px;
  background:var(--surface-2); margin-bottom:14px;}
.entry .tm{font-family:"DM Mono",monospace; font-size:13px; color:var(--ink-2);}
.entry .txt{flex:1; font-size:15px;}
.entry .dot{width:8px; height:8px; border-radius:50%; flex:none;}

/* ---- balance meter ---- */
.balance{margin-bottom:12px; padding:12px 14px 13px; background:var(--glass);
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow);}
.bhead{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px;}
.blab{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.bnext{font-family:Gabarito,sans-serif; font-size:13px; font-weight:700;}
.bbar{display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--surface-2);}
.bleft{background:var(--feed);}
.bright{background:var(--pump);}
.bfoot{display:flex; justify-content:space-between; gap:8px; margin-top:7px;
  font-family:"DM Mono",monospace; font-size:11px; color:var(--ink-2);}
.bfoot span:nth-child(2){color:var(--ink-3);}
.buckets{display:grid; grid-template-columns:auto repeat(3,1fr); gap:2px 8px; margin-top:11px;
  padding-top:11px; border-top:1px solid var(--line);
  font-family:"DM Mono",monospace; font-variant-numeric:tabular-nums; font-size:12px;}
.buckets .h{font-family:"Source Sans 3",sans-serif; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); text-align:center;}
.buckets .sd{font-family:"Source Sans 3",sans-serif; font-size:11px; font-weight:600; color:var(--ink-2);}
.buckets .c{text-align:center; color:var(--ink);}
.buckets .c.z{color:var(--ink-3); opacity:.45;}
.bpending{margin-top:9px; font-size:11.5px; color:var(--ink-3);}

/* ---- pump card ---- */
.pumpcard{padding:14px; margin-bottom:12px; border-color:var(--pump-line);}
.vol{position:relative; min-height:104px; border-radius:14px; background:var(--pump-soft);
  border:1.5px solid transparent; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;}
.vol .side{font-family:Gabarito,sans-serif; font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pump);}
.vol input{background:none; border:0; text-align:center; width:100%; min-height:0; padding:0;
  font-size:26px; font-weight:500; letter-spacing:-.03em; color:var(--ink);}
.vol input:focus{outline:none}
.vol:focus-within{border-color:var(--pump);}
.vol .unit{font-size:11px; color:var(--ink-2);}
.pumpbtn{margin-top:10px; width:100%; min-height:48px; border-radius:12px; background:var(--pump); color:#fff;
  font-family:Gabarito,sans-serif; font-weight:700; font-size:15px; transition:transform .1s;}
.pumpbtn:active{transform:scale(.985);}
.pumpbtn:disabled{opacity:.4; cursor:default;}

/* ---- nap card (mirrors the feed timer, one dial instead of two lobes) ---- */
.napcard{padding:14px; margin-bottom:12px; border-color:var(--nap);}
.napfrom{font-size:11.5px; color:var(--ink-3);}
.napdial{position:relative; overflow:hidden; min-height:104px; border-radius:14px;
  background:var(--nap-soft); border:1.5px solid var(--nap);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;}
.napdial .fill{position:absolute; inset:auto 0 0 0; background:var(--nap); opacity:.16; height:0;
  transition:height .6s linear;}
.napdial .t{font-family:"DM Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:32px; font-weight:500; letter-spacing:-.03em; color:var(--ink); z-index:1;}
.napdial .sub{font-size:11px; color:var(--nap); letter-spacing:.14em; text-transform:uppercase;
  font-family:Gabarito,sans-serif; font-weight:700; z-index:1;}
.napdial.running .sub{animation:breathe 3.4s ease-in-out infinite;}
.napcard .pausebtn{background:var(--nap-soft); color:var(--nap); border-color:var(--nap-line);}
.napcard .finish{background:var(--nap); color:#04231F;}
.napchips button{background:var(--nap-soft); color:var(--nap); border-color:var(--nap-line);}
.napchips button:active{background:var(--nap); color:#04231F;}

/* ---- action grid ---- */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
.act{min-height:66px; border-radius:15px; border:1px solid var(--line); background:var(--glass);
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  display:flex; align-items:center; gap:11px; padding:0 14px; box-shadow:var(--shadow); transition:transform .1s;}
.act:active{transform:scale(.98);}
.act .lab{font-family:Gabarito,sans-serif; font-weight:700; font-size:15px; text-align:left; line-height:1.15;}
.act .ago{display:block; font-family:"DM Mono",monospace; font-weight:400; font-size:11px; color:var(--ink-3);}
.ic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none;}
.ic svg{width:19px; height:19px;}
.pee .ic{background:var(--pee-soft)} .pee svg{fill:var(--pee)} .pee{border-color:var(--pee-line)}
.poo .ic{background:var(--poo-soft)} .poo svg{fill:var(--poo)} .poo{border-color:var(--poo-line)}
.med .ic{background:var(--med-soft)} .med svg{fill:var(--med)} .med{border-color:var(--med-line)}
.nap .ic{background:var(--nap-soft)} .nap svg{fill:var(--nap)} .nap{border-color:var(--nap-line)}
.act.flash{background:var(--surface-2);}
.act.napon{border-color:var(--nap); background:var(--nap-soft);}

.manual{width:100%; min-height:44px; font-size:14px; color:var(--ink-2); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--line); margin-bottom:26px;}

/* ---- log ---- */
.loghead{display:flex; align-items:baseline; justify-content:space-between; margin:0 2px 10px;}
.logtitle{font-family:Gabarito,sans-serif; font-size:12px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin:0;}
.csv{font-size:13px; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px;}
.daylabel{display:flex; align-items:center; gap:10px; margin:20px 0 8px; padding-inline:2px;}
.daylabel:first-of-type{margin-top:0;}
.daylabel span{font-family:Gabarito,sans-serif; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); white-space:nowrap;}
.daylabel .rule{height:1px; background:var(--line); flex:1;}
.rows{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--glass);
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);}
.row{display:flex; align-items:center; gap:11px; padding:11px 13px; border-top:1px solid var(--line);
  width:100%; text-align:left; min-height:46px;}
.row:first-child{border-top:0;}
.row[data-id]{cursor:pointer;}
.row[data-id]:active{background:var(--surface-2);}
.row .tm{font-family:"DM Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:13px; color:var(--ink-2); width:62px; flex:none;}
.row .dot{width:8px; height:8px; border-radius:50%; flex:none;}
.row .txt{flex:1; font-size:14.5px;}
.row .txt em{font-style:normal; color:var(--ink-3);}
.row .det{font-family:"DM Mono",monospace; font-size:12.5px; color:var(--ink-2); white-space:nowrap;}
.empty{padding:26px 14px; text-align:center; color:var(--ink-3); font-style:italic;}

/* ---- sheet ---- */
.scrim{position:fixed; inset:0; background:rgba(20,16,24,.5); backdrop-filter:blur(3px); z-index:40;
  display:flex; align-items:flex-end; justify-content:center;}
.sheet{background:var(--surface); width:100%; max-width:470px; border-radius:22px 22px 0 0;
  padding:8px 16px calc(16px + env(safe-area-inset-bottom)); max-height:88vh; overflow-y:auto;
  animation:rise .22s cubic-bezier(.2,.8,.3,1);}
@keyframes rise{from{transform:translateY(16px); opacity:.6} to{transform:none; opacity:1}}
.handle{width:38px; height:4px; border-radius:2px; background:var(--line); margin:6px auto 14px;}
.sheet h3{margin:0 0 12px 2px; font-family:Gabarito,sans-serif; font-size:19px; font-weight:800;}
.mrow{width:100%; min-height:60px; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:13px;
  border:1px solid var(--line); background:var(--surface); margin-bottom:8px; text-align:left;}
.mrow .nm{flex:1; font-weight:600; font-size:15px;}
.mrow .nm b{display:block; font-weight:400; font-size:12px; color:var(--ink-3); font-family:"DM Mono",monospace;}
.mrow .since2{font-family:"DM Mono",monospace; font-size:13px; color:var(--ink-2); text-align:right;}
.mrow .since2 b{display:block; font-size:10px; font-weight:400; color:var(--ink-3); letter-spacing:.08em;
  text-transform:uppercase; font-family:"Source Sans 3",sans-serif;}
.close{width:100%; min-height:46px; border-radius:13px; background:var(--surface-2); font-weight:600; margin-top:4px;}

/* ---- forms ---- */
.f{display:grid; gap:12px; margin-bottom:6px;}
.fl{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px; display:block;}
input,select{width:100%; min-height:46px; padding:0 12px; border-radius:12px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); font:inherit; font-size:16px;}
input[type=number]{font-family:"DM Mono",monospace;}
.two{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.save{min-height:50px; border-radius:13px; background:var(--ink); color:var(--bg);
  font-family:Gabarito,sans-serif; font-weight:700; font-size:15px; width:100%;}
.hint{font-size:13px; color:var(--ink-3); margin:0 0 12px 2px;}
.err{color:var(--warn); font-size:14px; margin:0;}
.login{max-width:340px; padding-block:16vh;}
.login .name{margin-bottom:20px;}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}