/* Water (/water/): accent from the chosen theme (--wt, blue by default); light and dark from the site theme. */
#wt{--wt:#38BDF8;--wt2:#0369A1;--wton:#04121C}
.wt-main{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:14px;align-items:start}
.wt-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center}
.wt-glass{position:relative;width:150px;height:210px;border:4px solid var(--edge);border-top:0;border-radius:0 0 28px 28px;overflow:hidden;background:var(--ev-chip);clip-path:polygon(0 0,100% 0,90% 100%,10% 100%)}
.wt-water{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(var(--wt),var(--wt2));transition:height .9s cubic-bezier(.3,1.3,.5,1)}
.wt-water::before{content:"";position:absolute;left:-50%;top:-9px;width:200%;height:18px;background:radial-gradient(circle at 25% 100%,transparent 9px,var(--wt) 10px) 0 0/40px 18px repeat-x;animation:wtwave 3s linear infinite;opacity:.95}
@keyframes wtwave{to{transform:translateX(40px)}}
.wt-glass .wt-pct{position:absolute;inset:0;display:grid;place-content:center;font:900 34px var(--disp);color:var(--bone);text-shadow:0 1px 8px rgba(0,0,0,.35);z-index:1}
#wt.met .wt-glass{border-color:var(--wt)}
.wt-drop{position:absolute;left:50%;top:-30px;width:16px;height:22px;margin-left:-8px;background:var(--wt);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;opacity:0;z-index:2}
.wt-drop.go{animation:wtdrop .7s ease-in}
@keyframes wtdrop{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(160px)}}
.wt-amt{font:900 clamp(24px,3.4vw,34px)/1.05 var(--disp);letter-spacing:-.02em;margin:0}
.wt-left{color:var(--mute);margin:6px 0 0}
.wt-drinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.wt-drink{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;min-width:132px;padding:10px 14px;min-height:56px;border:2px solid var(--wt);background:transparent;color:var(--bone);cursor:pointer;font:inherit}
.wt-drink span{grid-row:1/3;font-size:26px}.wt-drink b{font:800 16px var(--disp)}.wt-drink small{font:12px var(--mono);color:var(--mute)}
.wt-drink:active{transform:scale(.96)}.wt-drink:hover{background:color-mix(in srgb,var(--wt) 12%,transparent)}
.wt-other{display:flex;gap:8px;align-items:flex-end;margin-top:12px;flex-wrap:wrap}
.wt-other label,.wt-sizes label,.wt-addd label,.wt-remx label,.wt-goalrow label{display:flex;flex-direction:column;gap:5px;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
#wt input[type=number],#wt input[type=time],#wt input:not([type]){font:16px var(--disp);padding:9px 10px;background:var(--ink);color:var(--bone);border:1px solid var(--edge);min-height:44px;width:120px}
#wt .wide input{width:100%}
.wt-today{list-style:none;margin:12px 0 0;padding:0;max-height:240px;overflow:auto}
.wt-today li{display:grid;grid-template-columns:70px 80px 1fr auto;gap:8px;align-items:center;border-top:1px solid var(--line);padding:6px 0;font-size:15px}
.wt-today li.empty{display:block;border:0}.wt-today span{font:12px var(--mono);color:var(--mute)}.wt-today em{color:var(--mute);font-style:normal}
.wt-x{background:none;border:1px solid var(--line);color:var(--mute);min-width:36px;min-height:36px;cursor:pointer;font-size:18px;line-height:1}
.wt-streak{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.wt-streak b{font:900 34px var(--disp)}.wt-streak span{font:12px var(--mono);color:var(--mute)}
.wt-week{display:flex;gap:6px;list-style:none;margin:12px 0 0;padding:0}
.wt-week li{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.wt-week i{display:block;width:100%;max-width:34px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--wt) calc(var(--f)*360deg),var(--line) 0)}
.wt-week li.ok i{box-shadow:0 0 0 2px var(--wt)}.wt-week li.now i{outline:2px dashed var(--edge);outline-offset:2px}
.wt-week span{font:10px var(--mono);color:var(--mute)}
.wt-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:14px;align-items:start}
.wt-goalrow{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:10px}
.wt-sizes{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.wt-dl{list-style:none;margin:0 0 10px;padding:0}.wt-dl li{display:flex;gap:8px;align-items:center;border-top:1px solid var(--line);padding:6px 0}.wt-dl li .wt-x{margin-left:auto}
.wt-addd{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
#wt .wt-addd #wtDEmo{width:70px}
.wt-remx{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:12px}.wt-remx .wide{flex-basis:100%}.wt-remx .ck{flex-direction:row;align-items:center;text-transform:none;letter-spacing:0;font:15px var(--disp);color:var(--bone)}
.wt-hint{font:12px/1.5 var(--mono);color:var(--mute);margin:10px 0 0}
.linkbtn{background:none;border:0;color:var(--bone);text-decoration:underline;font:inherit;cursor:pointer;padding:0;text-align:left}
.wt-hbars{display:flex;gap:2px;align-items:flex-end;height:120px;list-style:none;margin:0;padding:0}
.wt-hbars li{flex:1;height:100%;position:relative}
.wt-hbars i{position:absolute;bottom:0;left:0;right:0;background:var(--wt2);opacity:.7;min-height:1px}.wt-hbars i.ok{background:var(--wt);opacity:1}
.wt-hbars s{position:absolute;left:0;right:0;border-top:1px dashed var(--bone);opacity:.5}
.tdot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.ins{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.ins div{border:1px solid var(--line);padding:10px}.ins dt{font:11px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}.ins dd{margin:4px 0 0;font-weight:800}
.wt-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--wt);color:var(--wton);font:800 15px var(--disp);padding:12px 18px;opacity:0;transition:opacity .3s,transform .3s;z-index:60;pointer-events:none;max-width:calc(100% - 32px)}
.wt-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:900px){.wt-main{grid-template-columns:1fr}}
@media (max-width:520px){.wt-top{gap:14px}.wt-glass{width:112px;height:160px}.wt-glass .wt-pct{font-size:26px}.wt-drink{min-width:0;flex:1 1 40%}.wt-today li{grid-template-columns:62px 70px 1fr auto}}
@media (prefers-reduced-motion:reduce){.wt-water{transition:none}.wt-water::before,.wt-drop.go{animation:none}.wt-toast{transition:none}}