/* v9 pages: five tabs (Today, Workout, Food, Weight, History). Active tab: icon plus label; inactive: icon only, 46px targets. */
:root{--tabh:56px}
.tabbar{gap:2px}
.tab{height:46px;min-width:46px;padding:0 13px;justify-content:center;gap:7px;font-size:11.5px;letter-spacing:.12em}
.tab .ms{font-size:22px;line-height:1}
.tab .ti{width:22px;height:22px;fill:currentColor;display:block;flex:none}
.tab .tl{display:none;line-height:1;white-space:nowrap}
.tab.is-on{padding:0 16px 0 13px}
.tab.is-on .tl{display:block;animation:tlIn var(--spring-d) var(--spring) both}
@keyframes tlIn{from{opacity:0;transform:translateX(-6px)}}
.tab.dot::after{content:"";position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 2px rgba(22,21,19,.9)}
.tab.is-on.dot::after{box-shadow:0 0 0 2px var(--ink)}
.tab-ind{top:5px;bottom:5px;border-radius:999px}
#app{padding-bottom:calc(var(--sab) + var(--tabh) + 40px)}
body.resting #app{padding-bottom:calc(var(--sab) + var(--tabh) + 130px)}
/* one global timer pill above the bar on every tab, never on top of it */
.rest{bottom:calc(var(--sab) + 12px + var(--tabh) + 14px)}
.rest .ring.tap,.rest .rl.tap{cursor:pointer}
@media (prefers-reduced-motion: reduce){.tab.is-on .tl{animation:none}}

/* header on Today: no day arrows */
.daynav.slim{padding-top:10px}
.vbanner{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin-top:10px;padding:0 14px;border-radius:14px;border:1px solid var(--ember);background:rgba(255,90,31,.08);font-size:13px;color:var(--ink-2)}
.vbanner b{font-weight:700;color:var(--ember);font-size:12px;letter-spacing:.1em;text-transform:uppercase}

/* Today: three tiles in one row, each with a quick action */
.ovr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.ovt{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 12px;min-height:146px;background:var(--card);border:1px solid var(--line);border-radius:18px;text-align:center;transition:transform var(--spring-d) var(--spring)}
.ovt .k{align-self:flex-start;padding-left:6px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.ovt.ok .k{color:var(--ember)}
.ovt-plus{position:absolute;top:4px;right:4px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.ovt-plus .ms{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--card-2);border:1px solid var(--line-2);font-size:20px}
.ovt-mid{position:relative;width:64px;height:64px;margin-top:2px}
.ring44,.drop44{width:64px;height:64px;display:block}
.ring44{transform:rotate(-90deg)}
.ring44 circle{fill:none;stroke-width:5}
.ring44 .trk{stroke:#2a2723}
.ring44 .arc{stroke:var(--ink);stroke-linecap:round;transition:stroke-dashoffset var(--spring-d) var(--spring)}
.ovt.ok .ring44 .arc{stroke:var(--ember)}
.ring44.mute .arc{stroke:var(--ember)}
.drop44 .trk{fill:#1f1d1a;stroke:var(--line-2);stroke-width:1.5}
.drop44 .fill{fill:var(--ember);transition:y var(--spring-d) var(--spring)}
.ovt-in{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:22px;line-height:1}
.ovt-in small{font-family:var(--body);font-size:11px;color:var(--ink-2);font-weight:600}
.ovt-in .ms{font-size:28px;color:var(--ember)}
.ovt-in.drop{padding-top:12px;text-shadow:0 1px 4px rgba(12,12,11,.8)}
.ovt .s{font-size:12px;color:var(--ink-2);line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.ovt.is-pressed{transform:scale(.97)}

/* Next up: one card that follows the clock */
.nextup{margin-top:10px}
.nx-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.nx-l{flex:1;min-width:0}
.nx-l b{display:block;font-family:var(--display);font-size:26px;line-height:1;text-transform:uppercase}
.nx-l span{display:block;font-size:13px;color:var(--ink-2);margin-top:5px;line-height:1.35}
.nx-act{display:flex;gap:6px;flex:none}
.mini.on{background:var(--ink);color:#141210;border-color:var(--ink)}

/* streak line */
.sline{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.sl-l{display:flex;align-items:baseline;gap:4px;flex:none}
.sl-l .ms{font-size:18px;color:var(--ember);align-self:center}
.sl-l b{font-family:var(--display);font-size:24px;line-height:1}
.sl-l span:last-child{font-size:12px;color:var(--ink-2)}
.sl-d{display:flex;gap:4px;flex:none}
.sl-d i{width:12px;height:12px;border-radius:3px;border:1px solid var(--line-2)}
.sl-d i.done{background:var(--ink);border-color:var(--ink)}
.sl-d i.pass{border-style:dashed}
.sl-d i.now{box-shadow:0 0 0 1.5px var(--ember)}
.sl-r{flex:1;min-width:0;text-align:right;line-height:1.25}
.sl-r b{display:block;font-size:13px;font-weight:700}
.sl-r span{display:block;font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Food | Water switch */
.fseg-wrap{margin-top:12px}

/* Weight: recent weigh-ins */
.wl{display:flex;flex-direction:column;margin-top:6px}
.wl-r{display:flex;align-items:center;gap:12px;min-height:48px;border-top:1px solid var(--line);text-align:left}
.wl-r:first-child{border-top:0}
.wl-r span{flex:1;font-size:13.5px;color:var(--ink-2)}
.wl-r b{font-family:var(--display);font-size:24px;font-weight:700}
.wl-r b small{font-family:var(--body);font-size:11px;color:var(--mute);margin-left:4px}
.wl-r em{font-style:normal;width:46px;text-align:right;font-size:12px;font-weight:600;color:var(--mute)}
.wl-r em.dn{color:var(--ember)}
.lbl-r{float:right;color:var(--mute)}

/* History: water ounces vs goal */
.ih-bars{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:4px;height:84px;margin-top:14px;align-items:end}
.ih-bars span{height:100%;display:flex;align-items:flex-end;border-radius:3px;background:#1a1916}
.ih-bars i{display:block;width:100%;height:calc(var(--p) * 100% / 1.15);border-radius:3px;background:#5a554d}
.ih-bars span.hit i{background:var(--ember)}
.ih-bars span.now{box-shadow:0 0 0 1px var(--ember)}
.ih-goal{position:absolute;left:0;right:0;bottom:calc(100% / 1.15);border-top:1px dashed var(--ink-2);pointer-events:none}
.cday.wg::before{content:"";position:absolute;left:4px;top:4px;width:5px;height:5px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#6fb3d9}
.legend .lg-wg{border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#6fb3d9}

/* settings */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.textbtn.danger{color:#e0664a}

/* Water intake */
.wi-top{display:flex;align-items:flex-end;justify-content:space-between;margin-top:6px}
.wi-big{font-family:var(--display);font-size:76px;line-height:.85}
.wi-big small{font-family:var(--body);font-size:14px;font-weight:600;color:var(--ink-2);margin-left:6px}
.wi-goal{text-align:right;font-size:12px;color:var(--ink-2);line-height:1.4}
.wi-goal b{display:block;font-family:var(--display);font-size:26px;color:var(--ink);font-weight:700;line-height:1}
.wi-cups{display:grid;grid-template-columns:repeat(var(--n,12),1fr);gap:4px;margin:16px 0 4px}
.wi-cups i{height:34px;border-radius:3px;background:#1f1d1a;border:1px solid var(--line-2);position:relative;overflow:hidden}
.wi-cups i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--f,0) * 100%);background:linear-gradient(#ff8a3d,#ff5a1f);transition:height var(--spring-d) var(--spring) calc(var(--k,0) * 22ms)}
.wi-cups.hit i::after{background:linear-gradient(#ffd28a,#ff8a3d)}
.wi-note{font-size:13px;color:var(--ink-2);margin:8px 0 14px;min-height:18px}
.wi-add{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.wi-add button{height:60px;flex-direction:column;line-height:1;border-radius:16px;background:var(--card-2);border:1px solid var(--line-2);font-family:var(--display);font-size:24px;display:flex;align-items:center;justify-content:center;gap:2px}
.wi-add button small{font-family:var(--body);font-size:11px;font-weight:600;color:var(--ink-2);margin-left:3px;letter-spacing:.04em}
.wi-add button.cust{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.wi-log{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.wi-log button{height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);font-size:12.5px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.wi-log button .ms{font-size:16px;color:var(--mute)}
.wi-cups.pop{animation:wiPop var(--sp-pop-d,700ms) var(--sp-pop,cubic-bezier(.34,1.56,.64,1))}
@keyframes wiPop{40%{transform:scale(1.03)}}
@media (prefers-reduced-motion: reduce){.wi-cups i::after,.ov-bar i{transition:none}.wi-cups.pop{animation:none}}
.wi-log button small{font-size:11px;color:var(--mute);font-weight:600}
.wi-empty,.wi-more{font-size:13px;color:var(--mute);align-self:center}
.wi-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:16px}
.wi-week span{display:flex;flex-direction:column;align-items:center;gap:5px}
.wi-week i{position:relative;display:block;width:100%;height:46px;border-radius:4px;background:#1a1916;overflow:hidden}
.wi-week i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--p) * 100%);background:#5a554d;border-radius:4px}
.wi-week span.hit i::after{background:var(--ember)}
.wi-week span.now i{box-shadow:inset 0 0 0 1px var(--ember)}
.wi-week em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--mute)}
.wi-add button.flare{animation:wiPop var(--sp-pop-d,700ms) var(--sp-pop,cubic-bezier(.34,1.56,.64,1))}
.rchips{grid-template-columns:repeat(3,minmax(0,1fr));margin:14px 0 4px}
.chart.rng svg{animation:rngIn var(--spring-d) var(--spring)}
@keyframes rngIn{from{opacity:.3;transform:scaleX(.97)}}
@media (prefers-reduced-motion: reduce){.chart.rng svg{animation:none}}

/* update bar (a new build is ready) */
.upd{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);z-index:90;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:999px;background:rgba(22,21,19,.94);border:1px solid var(--line-2);font-size:13px;font-weight:600;transform:translate(-50%,-160%);transition:transform var(--spring-d) var(--spring)}
.upd.on{transform:translate(-50%,0)}
.upd .ms{font-size:18px;color:var(--ember)}
.upd button{height:44px;padding:0 16px;border-radius:999px;background:var(--ink);color:#141210;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ob-restore{margin-top:12px}
.set-group.bk{margin-top:14px}
@media (prefers-reduced-motion: reduce){.upd{transition:none}}
/* v10 · V9-2: the drink list opens to every drink of the day (newest first), with a spring stagger */
.wi-log .wi-more{border-style:dashed;color:var(--ink);background:transparent;letter-spacing:.02em}
.wi-log .wi-more .ms{font-size:18px;color:var(--ember,#ff6a1f);transition:transform var(--spring-d,420ms) var(--spring,cubic-bezier(.34,1.56,.64,1))}
.wi-log .wi-more .ms{transform:rotate(90deg)}
.wi-log.all .wi-more .ms{transform:rotate(-90deg)}
.wi-log.grow > button{animation:wiRowIn 420ms cubic-bezier(.34,1.56,.64,1) both}
@keyframes wiRowIn{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.wi-log.grow > button{animation:none}}
/* v10 · V9-16: the tab slide never widens the page, even for a frame */
#screen{overflow-x:clip}
/* v10 · V9-10: full-height sheets. The fabric scrolls with the content all the way down (no seam one screen
   in), and a band in the page colour covers the status bar area above the sticky Back while scrolled. */
.sheet.full{background:linear-gradient(rgba(12,12,11,.45),rgba(12,12,11,.45)) local,url(fabric.9480df4b41.png) 0 0/384px 384px local,var(--bg)}
.sheet.full::before{display:none}
.sheet.full .sh-nav::before{content:"";position:absolute;left:-40px;right:-40px;bottom:100%;height:calc(var(--sat) + 4px);background:var(--bg);pointer-events:none}
/* v10 · the wordmark is "Victory": one word, uppercase display, with the ember slab */
.mark-n{text-transform:uppercase;font-size:40px;letter-spacing:.02em}
.ob-hero .mark-n{font-size:84px}
.mark-row{align-items:flex-end;margin-top:0}